/* The platform landing page. Colours are set once here. */
:root {
  color-scheme: light;
  --forest: #0f2f29;
  --forest-2: #17443b;
  --ink: #15211e;
  --muted: #55645f;
  --paper: #f3f5ef;
  --white: #fff;
  --line: #d4dbd2;
  --sun: #ffb627;
  --sun-dark: #e59a00;
  --mint: #bfe6d3;
  --head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--head); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; max-width: 18ch; }
h3 { font-size: 1.35rem; font-weight: 700; }
a { color: inherit; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--white); padding: 10px 14px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--sun-dark); outline-offset: 3px; }

.mark { width: 34px; height: 34px; color: var(--forest-2); flex: none; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 1.3rem var(--head); letter-spacing: -.02em; text-decoration: none; }

.btn { display: inline-block; padding: 15px 26px; border-radius: 999px; background: var(--sun); color: var(--forest); font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.btn:hover { background: #ffc54f; transform: translateY(-1px); }
.btn-small { padding: 10px 18px; font-size: .95rem; }
.btn-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--forest); color: var(--white); }
.top .mark, .foot .mark { color: #2a6355; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; }
.top nav { display: flex; gap: 28px; font-weight: 500; font-size: .98rem; }
.top nav a { text-decoration: none; opacity: .85; }
.top nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* Hero */
.hero { background: var(--forest); color: var(--white); overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.tag { color: var(--mint); font-weight: 600; margin-bottom: 18px; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.2rem); font-weight: 800; }
h1 em { font-style: normal; color: var(--sun); display: block; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-top: 24px; max-width: 34em; color: #e3ece7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Sample brands: one app, three companies */
.hero-demo { --brand: #b4610a; --brand-soft: #fdf0d9; }
.hero-demo[data-brand="harbour"] { --brand: #1b4f8f; --brand-soft: #e2edf9; }
.hero-demo[data-brand="bright"] { --brand: #7a2a78; --brand-soft: #f6e6f5; }
.phones { position: relative; max-width: 436px; margin-inline: auto; min-height: 476px; }
.phone { width: 244px; border-radius: 36px; background: #06120f; padding: 9px; box-shadow: 0 26px 60px rgba(0, 0, 0, .42); }
.phone-crew { position: absolute; right: 0; top: 96px; width: 186px; }
.screen { background: var(--white); color: var(--ink); border-radius: 28px; padding: 22px 16px 18px; min-height: 440px; display: flex; flex-direction: column; gap: 10px; }
.phone-crew .screen { min-height: 330px; }
.ph-brand { display: flex; align-items: center; gap: 8px; font: 700 .9rem var(--head); color: var(--brand); }
.ph-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); flex: none; }
.ph-hello { font: 700 1.25rem/1.15 var(--head); margin: 6px 0 4px; }
.ph-card { background: #f2f4f1; border-radius: 14px; padding: 12px; font-size: .78rem; line-height: 1.35; }
.ph-card small, .ph-field small { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; }
.ph-card strong { display: block; font-size: .92rem; margin: 2px 0; }
.ph-card-live { background: var(--brand-soft); }
.ph-field { background: #f2f4f1; border-radius: 12px; padding: 9px 12px; font-size: .9rem; letter-spacing: .04em; }
.ph-btn { margin-top: auto; background: var(--brand); color: var(--white); border-radius: 12px; padding: 11px; text-align: center; font-weight: 700; font-size: .88rem; }
.switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.switch-label { width: 100%; text-align: center; font-size: .92rem; color: #cfdcd6; }
.switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--white); font: 500 .9rem var(--body); cursor: pointer; }
.switch button:hover { background: rgba(255, 255, 255, .18); }
.switch button[aria-pressed="true"] { background: var(--white); color: var(--forest); font-weight: 700; }
.swatch { width: 12px; height: 12px; border-radius: 50%; }
.swatch-wattle { background: #d9860f; }
.swatch-harbour { background: #2d6fc0; }
.swatch-bright { background: #a23ea0; }

/* Sections */
section:not(.hero) { padding: clamp(56px, 8vw, 104px) 0; }
.doors { margin-top: 40px; border-top: 2px solid var(--ink); counter-reset: door; }
.doors li { counter-increment: door; display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.doors li::before { content: counter(door); font: 800 2.3rem/1 var(--head); color: var(--sun-dark); }
.doors p { color: var(--muted); }

.families { background: var(--forest-2); color: var(--white); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.families p { margin-top: 18px; color: #dfe9e4; max-width: 32em; }
.families h2 + p { margin-top: 24px; }
.consent { background: var(--white); color: var(--ink); border-radius: 22px; padding: 22px 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.consent .consent-title { margin: 0 0 8px; color: var(--ink); font: 700 1.15rem var(--head); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-weight: 600; }
.row small { display: block; color: var(--muted); font-weight: 400; font-size: .88rem; }
.row b { color: var(--forest-2); white-space: nowrap; }
.toggle { flex: none; width: 44px; height: 26px; border-radius: 99px; background: #c4ccc6; position: relative; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); }
.toggle.on { background: #1e8a63; }
.toggle.on::after { left: 21px; }

.money-lead { font-size: 1.2rem; margin-top: 18px; }
.flow { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.flow-node { flex: 1; min-height: 104px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; font: 700 1.1rem/1.25 var(--head); }
.flow-end { background: var(--sun); border-color: var(--sun); color: var(--forest); }
.flow-arrow { flex: none; width: 34px; height: 3px; background: var(--ink); position: relative; }
.flow-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border-left: 10px solid var(--ink); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.money-note { margin-top: 22px; color: var(--muted); max-width: 44em; }

.start { background: var(--white); }
.steps { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 4px solid var(--forest-2); padding-top: 16px; }
.steps li::before { content: "Step " counter(step); display: block; color: var(--muted); font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.steps p { margin-top: 8px; color: var(--muted); }

.promise-list { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.promise-list p { margin-top: 10px; color: var(--muted); }

.fit { background: #e5ebe1; }
.sectors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sectors li { background: var(--white); border-radius: 999px; padding: 9px 18px; font-weight: 600; }
.fit-note { margin-top: 24px; color: var(--muted); max-width: 44em; }

.signup { background: var(--sun); color: var(--forest); text-align: center; }
.signup h2 { margin-inline: auto; }
.signup p { margin: 16px auto 0; max-width: 34em; font-size: 1.15rem; }

.foot { background: var(--forest); color: var(--white); padding: 30px 0; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: .95rem; }

@media (max-width: 960px) {
  .top nav { display: none; }
  .hero-in, .split { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .promise-list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  .phones { max-width: 343px; }
  .phone { width: 196px; border-radius: 30px; padding: 7px; }
  .phone-crew { width: 146px; top: 110px; }
  .screen { border-radius: 24px; padding: 18px 11px 14px; }
  .ph-card { padding: 9px; }
  .ph-field { padding: 8px 9px; font-size: .78rem; }
  .doors li { grid-template-columns: 44px minmax(0, 1fr); }
  .doors li::before { font-size: 1.7rem; grid-row: span 2; }
  .flow { flex-direction: column; align-items: stretch; }
  .flow-node { min-height: 72px; }
  .flow-arrow { align-self: center; width: 3px; height: 26px; }
  .flow-arrow::after { right: -5px; top: auto; bottom: -1px; border-top: 10px solid var(--ink); border-left: 6.5px solid transparent; border-right: 6.5px solid transparent; border-bottom: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}