html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.4;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-underline-offset: 0.22em;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.home {
  background: #fcf9f3;
  color: #002036;
}

.home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border-radius: 0.65rem;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
}

.home .btn-light {
  background: #fcf9f3;
  color: #002036;
}

.home .btn-gold {
  background: #d8c29a;
  color: #002036;
}

.home .btn-ghost {
  border-color: #d8c29a;
  color: #fcf9f3;
}

.home .btn-navy {
  background: #002036;
  color: #fcf9f3;
}

.home .btn:hover {
  filter: brightness(1.08);
}

.home a:focus-visible {
  outline: 3px solid #d8c29a;
  outline-offset: 3px;
}

.home .staff a:focus-visible,
.home .partners a:focus-visible {
  outline-color: #4b8a33;
}

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fcf9f3;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.nav-brand img {
  border-radius: 0.6rem;
}

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, #033b2e 0%, #002036 60%);
  color: #fcf9f3;
  text-align: center;
}

.leaves {
  position: absolute;
  top: 0;
  right: 0;
  width: min(60vw, 26rem);
  height: auto;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 44rem;
  margin: 0 auto;
  padding: 6.5rem 1.25rem 5rem;
}

.home .owl {
  width: 8rem;
  aspect-ratio: 231 / 247;
}

.home h1 {
  margin: 1.25rem 0 0;
  font-size: clamp(4rem, 16vw, 7rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.rap .a {
  color: #6bb04a;
}

.platform {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.home .tagline {
  margin: 1.25rem 0 0;
  color: #d8c29a;
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: normal;
}

.lede {
  max-width: 32rem;
  margin: 1.5rem 0 0;
  color: #e8e4da;
  font-size: 1.1875rem;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.pillars {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 1rem;
}

.pillars ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.75rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.pillars svg {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
}

.pillars h2 {
  margin: 0.75rem 0 0.15rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pillars p {
  margin: 0;
  color: #3b4f5c;
  font-size: 0.9375rem;
}

.partners {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
  text-align: center;
}

.partners h2,
.staff h2 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  letter-spacing: -0.01em;
}

.section-lede {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: #3b4f5c;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e6dfcf;
  border-radius: 1rem;
  background: #fff;
  color: #002036;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 32, 54, 0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 32, 54, 0.14);
}

.card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.5rem;
}

.card-regfin .card-mark {
  background: #213752;
}

.card-lll .card-mark {
  background: #f1f4ec;
}

.card-mark img {
  width: auto;
  height: 5.5rem;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.4rem 1.5rem;
}

.card-body strong {
  font-size: 1.25rem;
}

.card-go {
  margin-top: 0.5rem;
  color: #033b2e;
  font-weight: 600;
}

.card-go::after {
  content: " \2192";
}

.staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: center;
  gap: 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4.5rem;
}

.staff-copy p {
  max-width: 28rem;
  margin: 0.9rem 0 1.5rem;
  color: #3b4f5c;
}

.mock {
  margin: 0;
}

.mock-frame {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  overflow: hidden;
  border: 6px solid #1c2b36;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 24px 48px rgba(0, 32, 54, 0.25);
  font-size: 0.6875rem;
}

.mock-side {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: #002036;
  color: #cfd8dc;
}

.mock-side span {
  padding: 0.3rem 0.45rem;
  border-radius: 0.3rem;
}

.mock-side .mock-logo {
  margin-bottom: 0.5rem;
  color: #fcf9f3;
  font-size: 1rem;
  font-weight: 800;
}

.mock-side .on {
  background: #033b2e;
  color: #fff;
}

.mock-main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.75rem;
}

.mock-main > strong {
  font-size: 0.875rem;
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.mock-stats div {
  padding: 0.45rem 0.55rem;
  border: 1px solid #e6dfcf;
  border-radius: 0.4rem;
}

.mock-stats b {
  display: block;
  font-size: 1.1rem;
}

.mock-stats small {
  color: #3b4f5c;
}

.mock table {
  width: 100%;
  border-collapse: collapse;
}

.mock th,
.mock td {
  padding: 0.35rem 0.3rem;
  border-bottom: 1px solid #eee7d8;
  text-align: left;
  white-space: nowrap;
}

.mock th {
  color: #3b4f5c;
  font-weight: 600;
}

.mock .s {
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-style: normal;
}

.s-new {
  background: #d8c29a;
}

.s-alloc {
  background: #cfe3c4;
}

.s-closed {
  background: #dfe5ea;
}

.mock figcaption {
  margin-top: 0.6rem;
  color: #3b4f5c;
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 30rem) {
  .mock-frame {
    grid-template-columns: 1fr;
  }

  .mock-side {
    display: none;
  }

  .mock th:nth-child(3),
  .mock td:nth-child(3) {
    display: none;
  }
}

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2.5rem 1.25rem;
  background: #002036;
  color: #fcf9f3;
  text-align: center;
}

.foot img {
  border-radius: 0.5rem;
}

.foot p {
  margin: 0;
  color: #d8c29a;
  letter-spacing: 0.08em;
}

.foot .foot-note {
  color: #b9c3c9;
  font-size: 0.8125rem;
  letter-spacing: 0;
}

body.form {
  background: #fff;
  color: #213752;
}

body.form-lll {
  color: #1a1a1a;
}

body.form main {
  width: 100%;
}

body.form .band {
  display: flex;
  justify-content: center;
  background: #213752;
  padding: 1.25rem 1rem;
}

body.form .brandmark {
  width: 5.5rem;
}

body.form .logo {
  width: min(100% - 2.5rem, 16rem);
  margin: 1.25rem auto 0;
}

body.form .fields {
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
}

body.form h1,
body.form .who,
body.form .org,
body.form .hint,
body.form .legal,
body.form .consent-body,
body.form .footer {
  overflow-wrap: anywhere;
}

body.form h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 650;
}

body.form .who {
  margin: 0.35rem 0 0;
  font-size: 1.125rem;
  font-weight: 650;
}

body.form .org {
  margin: 0.15rem 0 0;
  font-size: 1rem;
}

body.form form {
  margin: 0.25rem 0 0;
}

body.form label {
  display: block;
  margin-top: 1rem;
  font-weight: 650;
}

body.form input[type="text"],
body.form input[type="tel"],
body.form input[type="email"],
body.form select,
body.form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  margin-top: 0.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #213752;
  border-radius: 2px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
}

body.form-lll input[type="text"],
body.form-lll input[type="tel"],
body.form-lll input[type="email"],
body.form-lll select,
body.form-lll textarea {
  border-color: #1a1a1a;
}

body.form textarea {
  min-height: 6rem;
  resize: vertical;
}

body.form .hint {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
}

body.form .legal {
  margin: 1.25rem 0 0;
}

body.form a {
  color: inherit;
  font-weight: 650;
}

body.form .consent-body {
  margin: 0.75rem 0 0;
  white-space: pre-wrap;
}

body.form .check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-weight: 650;
}

body.form .check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  flex: none;
  accent-color: #213752;
}

body.form-lll .check input {
  accent-color: #0f3d2e;
}

body.form .error {
  display: block;
  margin-top: 0.35rem;
  color: #7f1d1d;
  font-weight: 650;
}

body.form button {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  min-height: 3rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 2px;
  background: #213752;
  color: #fff;
  font: inherit;
  font-weight: 650;
}

body.form-lll button {
  background: #0f3d2e;
}

body.form button:focus-visible,
body.form input:focus-visible,
body.form select:focus-visible,
body.form textarea:focus-visible {
  outline: 2px solid #213752;
  outline-offset: 2px;
}

body.form .hp {
  position: absolute;
  left: 0;
  top: 0;
  width: 12rem;
  height: 2rem;
  margin: 0;
  overflow: hidden;
  transform: translateX(-150vw);
}

body.form .hp label {
  margin: 0;
}

body.notice,
body.done,
body.status {
  background: #fcf9f3;
  color: #002036;
}

body.notice main,
body.done main,
body.status main {
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: 4rem 1.25rem;
}

body.notice h1,
body.done h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 650;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body.done .ref {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

body.status p {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

body.status p:first-child {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.notice .support {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

body.notice .support a {
  color: #002036;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

/* The brand pages and the receipt are one composition. The ground is the
   brand's own, and the mark, the line and the phone are one centred group
   that fills the viewport instead of a strip on an unused sheet. */
body.regfin,
body.lll,
body.done-regfin,
body.done-lll {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

body.regfin main,
body.lll main,
body.done-regfin main,
body.done-lll main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: min(100%, 36rem);
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
}

.mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Regional Finance. The navy is the page; the mark is already drawn white for
   it. */
body.regfin,
body.done-regfin {
  background: #213752;
  color: #fff;
}

.brandmark {
  width: min(58%, 11rem);
  aspect-ratio: 1 / 1;
}

.tagline-mark {
  width: min(100%, 22rem);
  aspect-ratio: 510.1864 / 92.741;
  /* The script is inked navy for a light sheet and this page is that navy.
     One filter reverses it to a single white ink; there is no white original
     of this mark to serve instead. */
  filter: brightness(0) invert(1);
}

/* Lifestyle Loans. The supplied logo is an opaque white block, so white is
   this brand's ground until a transparent or reversed mark exists: any other
   colour would draw a white rectangle around the logo. The brand is carried
   by the mark and by the green of the phone. */
body.lll,
body.done-lll {
  background: #fff;
  color: #3a3a3a;
}

.logo {
  width: min(100%, 18.5rem);
  aspect-ratio: 430 / 355;
}

.context {
  margin: 0;
  max-width: 20rem;
  font-size: 1.125rem;
  line-height: 1.45;
  text-wrap: balance;
}

/* The phone is the action on every brand page, not a line of underlined text
   under the tagline. */
.phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.75rem;
  border-radius: 999px;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

body.regfin .phone,
body.done-regfin .phone {
  background: #fff;
  color: #213752;
}

body.regfin .phone:focus-visible,
body.done-regfin .phone:focus-visible {
  outline-color: #fff;
}

body.lll .phone,
body.done-lll .phone {
  background: #006c57;
  color: #fff;
}

body.lll .phone:focus-visible,
body.done-lll .phone:focus-visible {
  outline-color: #006c57;
}

/* The enquiry link stays below the phone. */
.demo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
}

body.regfin .demo {
  color: #c3cfdd;
}

body.lll .demo {
  color: #5f6b66;
}

/* The receipt wears the brand the link belonged to. These follow the plain
   body.done rules above, which stay for a ticket that names no brand. */
body.done .mark {
  gap: 0.75rem;
}

body.done-regfin .brandmark {
  width: min(40%, 7rem);
}

body.done-lll .logo {
  width: min(100%, 14rem);
}

body.done .brand {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

body.done-regfin .ref,
body.done-lll .ref,
body.done-regfin h1,
body.done-lll h1 {
  margin: 0;
}

/* The install invite (refer-assure-lv0p.9), only on the receipt of a client
   who gave an email. It sits under the phone as the secondary action: the
   sign-in link is outlined in the brand's colour where the phone is filled,
   so the two never read as the same thing. Plain links; no script. */
body.done .invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 24rem;
}

body.done .invite h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  text-wrap: balance;
}

body.done .invite p {
  margin: 0;
  line-height: 1.45;
}

.invite-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
}

body.done .stores a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.375rem;
}

body.done-regfin .invite-signin,
body.done-regfin .stores a {
  color: #fff;
}

body.done-lll .invite-signin,
body.done-lll .stores a {
  color: #006c57;
}

/* The account deletion page (refer-assure-lv0p.17): plain reading. */
body.client-delete {
  background: #fcf9f3;
  color: #002036;
}

body.client-delete main {
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: 3rem 1rem;
}

body.client-delete h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 650;
}

body.client-delete h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.15rem;
}

body.client-delete .brands {
  padding: 0;
  list-style: none;
}

body.client-delete .brands li {
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}

body.client-delete .note {
  margin-top: 2rem;
  font-size: 0.95rem;
}