/* KinFront waitlist · "Evergreen & Lamplight" tokens from the design canvas */
:root {
  --paper: #FAF8F3;
  --surface: #FFFDF9;
  --sunken: #F3F0E8;
  --hairline: #E6E0D4;
  --input: #D6CEBF;
  --ink: #1B2420;
  --text: #37332D;
  --muted: #69635A;
  --sage: #5D6E5E;
  --evergreen: #1F3A30;
  --evergreen-hover: #2B4A3E;
  --evergreen-tint: #E5ECE6;
  --lamplight: #B97A2E;
  --lamplight-tint: #F6ECD9;
  --lamplight-ink: #7A5216;
  --clay: #8C3A22;
  --clay-tint: #F5E7DF;
  --prose: #4A463F;            /* body prose, a shade softer than --text */
  --edge: #CFC7B8;             /* quiet borders and inactive dots */
  --edge-strong: #8C857A;      /* dashed placeholder borders */
  --hover: #F1EDE4;
  --placeholder: #9A9388;
  --error-ink: #5C2A18;
  --ok: #2F5242;
  --panel: #1F3A30;            /* the "proudly not" block: the same in both themes */
  --focus-ring: #E5ECE6;
  --lift: 0 24px 48px -36px rgba(45, 38, 28, .4);
  --phone-shadow: 0 34px 60px -34px rgba(27, 36, 32, .55);
  color-scheme: light dark;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
a { color: var(--evergreen); }
a:hover { color: var(--evergreen-hover); }
:focus-visible { outline: 2px solid var(--lamplight); outline-offset: 2px; }
svg { display: block; }

.wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .wrap { max-width: 1080px; padding: 0 56px; } }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--hairline); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
/* Lockup: the lamp's ink box is cropped to the artwork (26.4 x 29.8 of the 40-unit
   grid) so its height can be set against the wordmark's cap height directly.
   Mark ink 30px : cap height ~20.5px at 29px Newsreader = 1.46, the ratio a
   figurative mark wants beside caps. The 1px lift centres it on the cap band
   rather than the em box. */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand svg { width: 27.5px; height: 31px; transform: translateY(-2px); flex: none; }
.brand .wordmark { font: 500 30px/1 var(--serif); letter-spacing: -0.015em; }
@media (max-width: 600px) { .site-header .wrap { min-height: 62px; }
  .brand { gap: 9px; } .brand svg { width: 23.9px; height: 27px; } .brand .wordmark { font-size: 26px; } }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed var(--lamplight); color: var(--lamplight-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ---------- type ---------- */
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
h1 { margin: 0; font: 400 clamp(36px, 4.6vw, 50px)/1.04 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
h1 em { font-style: italic; color: var(--evergreen); }
h1.long { font-size: clamp(33px, 4.5vw, 40px); }
h2 { margin: 0; font: 400 clamp(28px, 3.6vw, 36px)/1.1 var(--serif); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
h3 { margin: 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.lede { margin: 0; font-size: 18px; color: var(--prose); max-width: 600px; }
.fine { font-size: 14px; color: var(--muted); }

/* ---------- layout ---------- */
main.wrap { display: flex; flex-direction: column; gap: 56px; padding-top: 34px; padding-bottom: 72px; }
@media (min-width: 760px) { main.wrap { gap: 88px; padding-top: 34px; } }
section > .kicker + h2 { margin-top: 8px; }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.section-head .lede { font-size: 17px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; } }
.hero-copy { display: flex; flex-direction: column; gap: 10px; }
.who { margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 16px; font-weight: 600; color: var(--ink); }
.who .who-for { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.who .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.who .tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 9px; background: var(--evergreen); color: var(--paper); font: 600 14px/1.2 var(--sans); }
.who .who-line { font-size: 16.5px; color: var(--ink); }
.hero .lede { font-size: 17.5px; }
@media (min-width: 900px) { .hero .lede { font-size: 17.5px; max-width: 660px; } }
.hero-visual { order: 3; }
@media (min-width: 900px) { .hero-visual { order: 0; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font: 600 16px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease); }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--evergreen); color: var(--paper); }
.btn-primary:hover { background: var(--evergreen-hover); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--evergreen); border: 1px solid var(--edge); }
.btn-secondary:hover { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--evergreen); border: 0; height: 44px; padding: 0 12px; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-block { width: 100%; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 24px; }
.card.sunken { background: var(--sunken); border-color: transparent; }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 18px; } }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 20px 20px 20px 18px; }
.step .icon { width: 56px; height: 56px; border-radius: 16px; background: var(--evergreen-tint); color: var(--evergreen); display: grid; place-items: center; }
.step h3 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--prose); font-size: 16px; }

/* ---------- proudly not ---------- */
.not { background: var(--panel); color: #E3E9E3; border-radius: 28px; padding: 36px 24px; }
@media (min-width: 760px) { .not { padding: 56px; } }
.not .kicker { color: #C9B07E; }
.not h2 { color: #F4F1EA; }
.not .lede { color: #C4CEC5; }
.not .grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .not .grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
.not .item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 18px; background: rgba(250, 248, 243, .06); border: 1px solid rgba(250, 248, 243, .12); }
.not .icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(250, 248, 243, .08); display: grid; place-items: center; color: #B8C6B9; }
.not h3 { color: #F4F1EA; font-size: 18px; margin-bottom: 4px; }
.not h3 s { text-decoration-color: #D9A169; text-decoration-thickness: 2px; }
.not p { margin: 0; font-size: 15.5px; color: #C4CEC5; }
.not .so { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #E7C58E; }

/* ---------- pricing (only when PRICING_TEST is on) ---------- */
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .amount { font: 400 48px/1 var(--serif); color: var(--ink); }
.price .unit { font-size: 16px; color: var(--muted); }

/* ---------- founder / what happens next ---------- */
.two { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; gap: 24px; } }
.two > .card { display: flex; flex-direction: column; }
.two > .card > .fine:last-child { margin-top: auto; padding-top: 18px; }
.note p { margin: 0 0 12px; font-size: 16.5px; color: var(--prose); }
.note p:last-child { margin: 0; }
.note .sig { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.note .sig .av { width: 48px; height: 48px; border-radius: 50%; background: var(--evergreen-tint); color: var(--evergreen); display: grid; place-items: center; font: 500 18px/1 var(--serif); overflow: hidden; flex: none; }
.note .sig .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The name, the title and the link each get their own line. Scoped to .meta so
   the rules can't reach the initial inside the avatar. */
.note .sig .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.note .sig .meta b { font-size: 15px; line-height: 1.3; color: var(--ink); }
.note .sig .meta > span { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.note .founder-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--evergreen); text-decoration: none; }
.note .founder-link svg { flex: none; position: relative; top: -.5px; }  /* seats the mark on the baseline */
.note .founder-link:hover { text-decoration: underline; }
ul.next { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
ul.next li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 15.5px; color: var(--prose); }
ul.next li svg { color: var(--evergreen); margin-top: 2px; }

/* ---------- CTA band ---------- */
.band { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.band .lede { max-width: 520px; }

/* ---------- form ---------- */
.form { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px; padding: 22px 20px; box-shadow: var(--lift); scroll-margin-top: 24px; }
@media (min-width: 760px) { .form { padding: 22px 26px 24px; } }
.form .head { display: flex; flex-direction: column; gap: 4px; }
.form .head h3 { font: 400 23px/1.15 var(--serif); letter-spacing: -0.01em; }
.form .head .fine { font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, fieldset legend { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.field > label .opt, fieldset legend .opt { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="email"], textarea {
  font: 16px/1.4 var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--input); border-radius: 12px; padding: 12px 14px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus { border-color: var(--evergreen); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
input[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }
textarea { resize: vertical; min-height: 76px; }
fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--input); background: var(--surface); color: var(--text); font: 500 14px/1.2 var(--sans); transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.chip:hover span { background: var(--hover); }
.chip input:checked + span { border-color: var(--evergreen); background: var(--evergreen); color: var(--paper); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--lamplight); outline-offset: 2px; }
.chip span.big { min-height: 40px; padding: 0 14px; font-size: 15px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > .btn { flex: 1 1 auto; }
.consent-line { margin: -2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.consent-line a { color: var(--muted); }
.error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--clay-tint); color: var(--error-ink); font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { min-height: 0; }
.turnstile:empty { display: none; }
.ts-mock { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px dashed var(--edge-strong); border-radius: 12px; background: var(--sunken); color: var(--text); font-size: 13.5px; }
.ts-mock .box { width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid var(--evergreen); display: grid; place-items: center; color: var(--evergreen); background: var(--surface); flex: none; }
.ts-mock b { display: block; font-size: 13.5px; color: var(--ink); }
.ts-mock span { display: block; font-size: 12px; color: var(--muted); }
.success-tag { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok); }
.share { display: flex; gap: 8px; align-items: stretch; }
.share input { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); background: var(--sunken); border-color: transparent; }
.share .btn { height: 46px; padding: 0 16px; font-size: 14.5px; }
.hidden { display: none !important; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 24px 0 40px; font-size: 13px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-direction: column; gap: 6px; }

/* ---------- the phone: one stage at 390px, scaled to fit ---------- */
/* vp width = 390 * --s, vp height = 844 * --s, so the stage fits exactly */
/* The frame is an iPhone 15 / 15 Pro: 393 x 852 logical points, 55pt screen
   radius. Everything is derived from --s so the screen, the bezel and the two
   corner radii cannot drift apart: the viewport is exactly the stage times --s,
   and the frame's radius is the screen's radius plus the bezel it sits in. */
.device { --s: .6667; --bez: 9px; flex: none; padding: var(--bez); background: #1b1b1d;
  width: calc(393px * var(--s) + 2 * var(--bez));
  border-radius: calc(55px * var(--s) + var(--bez));
  box-shadow: var(--phone-shadow); }
@media (min-width: 760px) { .device { --s: .7634; --bez: 10px; } }
.device .vp { position: relative; overflow: hidden; background: var(--paper);
  width: calc(393px * var(--s)); height: calc(852px * var(--s));
  border-radius: calc(55px * var(--s)); }
.stage { position: absolute; inset: 0; width: 393px; height: 852px; transform-origin: top left; transform: scale(var(--s)); }

/* The screens inside the phone are the product as it is designed: light, always.
   Re-declaring the palette here pins every descendant to the light values, so a
   visitor on a dark system still sees the app the way it actually looks — and a
   lit phone screen is what a phone looks like in a dark room anyway. */
.stage {
  --paper: #FAF8F3; --surface: #FFFDF9; --sunken: #F3F0E8; --hairline: #E6E0D4;
  --input: #D6CEBF; --ink: #1B2420; --text: #37332D; --muted: #69635A; --sage: #5D6E5E;
  --evergreen: #1F3A30; --evergreen-hover: #2B4A3E; --evergreen-tint: #E5ECE6;
  --lamplight: #B97A2E; --lamplight-tint: #F6ECD9; --lamplight-ink: #7A5216;
  --prose: #4A463F; --edge: #CFC7B8; --panel: #1F3A30;
  color-scheme: light;
}

/* The screens below reproduce the iPhone artboards from the design canvas
   (Today, New request, Confirmed, Money, and the client's own page). Colours,
   radii, type sizes and shadows are the artboards' values, not approximations. */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #FAF8F3; font-family: -apple-system, "SF Pro Text", "Instrument Sans", system-ui, sans-serif;
  color: #37332D; font-size: 17px; line-height: 1.35; }
/* Beats cross-dissolve: the incoming screen fades up over the one it replaces,
   both inside the same frame, so nothing slides and the bezel never flickers. */
.scr.fade { opacity: 0; transition: opacity .72s var(--ease); }
.scr.fade.in { opacity: 1; }

/* Status bar, to the device's real measurements. The Dynamic Island is
   125 x 36.67pt, 11.33pt down from the top edge, which leaves a 134pt ear on
   either side (134 + 125 + 134 = 393) and puts its bottom at 48 — 11pt clear of
   the 59pt top safe area. The clock and the indicators are centred in their ear
   and on the island's centre line (y 29.665), which is why each ear is 59.33pt
   tall inside a 54pt bar: half of 59.33 is exactly that centre line. */
.sb { position: relative; z-index: 5; flex: none; height: 54px; }
.di { position: absolute; top: 11.33px; left: 134px; width: 125px; height: 36.67px;
  border-radius: 18.34px; background: #000; }
.sb .ear { position: absolute; top: 0; height: 59.33px; width: 134px;
  display: flex; align-items: center; justify-content: center; }
.sb .ear.l { left: 0; }
.sb .ear.r { right: 0; gap: 5px; }
.sb .clock { font: 600 17px/1 -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  color: #000; letter-spacing: .1px; }
/* Home indicator: 139 x 5pt, 8pt up from the bottom edge, inside the 34pt
   bottom safe area that every screen already pads for. */
.home { position: absolute; z-index: 6; left: 50%; bottom: 8px; margin-left: -69.5px;
  width: 139px; height: 5px; border-radius: 2.5px; background: #000; opacity: .88; }

/* scrolling body of a tab screen */
.pb { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px;
  padding: 5px 16px 96px; overflow: hidden; }   /* 54 + 5 = the 59pt top safe area */
.pb.tight { gap: 16px; }
.pme { flex: none; display: flex; justify-content: flex-end; align-items: center; height: 44px; }
.pme span { width: 36px; height: 36px; border-radius: 50%; background: #DCE5DE; color: #1F3A30;
  font: 700 13px/1 var(--sans); display: grid; place-items: center; }
.phd { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 0 4px; margin-top: -14px; }
.phd .k { font-size: 15px; color: #69635A; }
.phd h3 { margin: 0; font: 500 40px/1.05 var(--serif); letter-spacing: -0.02em; color: #1B2420; }
.phd .s { font-size: 15px; color: #4A463F; margin-top: 4px; }
.psec { flex: none; display: flex; flex-direction: column; gap: 7px; }
.lbl { margin: 0 4px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #5D6E5E; }

/* grouped rows */
.grp { background: #FFFDF9; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), 0 10px 24px -18px rgba(45,38,28,.3); }
.gr { display: flex; gap: 12px; padding: 16px; align-items: flex-start; }
.gr.mid { align-items: center; padding: 14px 16px; gap: 14px; }
.sep { height: 1px; background: #EEE9DF; margin-left: 37px; }
.one { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px;
  background: #FFFDF9; box-shadow: 0 0 0 1px var(--hairline); }
.dot9 { margin-top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--lamplight); flex: none; }
.gc { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc.g4 { gap: 4px; }
.gc .r1 { display: flex; justify-content: space-between; gap: 8px; }
.gc .nm { font-weight: 600; color: #1B2420; }
.gc .tm, .gc .l2 { font-size: 15px; color: #69635A; }
.gc .l1 { font-size: 15px; color: #37332D; }
.chev { margin-top: 4px; flex: none; }
.gr.mid .chev { margin-top: 0; }
.lead { flex: none; display: flex; flex-direction: column; align-items: flex-start; min-width: 64px; }
.lead b { font: 500 22px/1.1 var(--serif); color: #1B2420; font-variant-numeric: tabular-nums; }
.lead span { font-size: 13px; color: #69635A; }
.done { display: flex; gap: 10px; align-items: center; padding: 6px 4px; font-size: 15px; color: #69635A; }

/* pills */
.pil { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: 999px; font: 600 12.5px/1 var(--sans); white-space: nowrap; }
.pil i { flex: none; }
.pil.await { border: 1px solid #D9B987; color: var(--lamplight-ink); }
.pil.await i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--lamplight); box-sizing: border-box; }
.pil.paid { background: var(--evergreen); color: var(--paper); }
.pil.sched { height: 24px; padding: 0 10px; background: var(--evergreen-tint); color: var(--evergreen); }
.pil.new { height: 24px; padding: 0 10px; background: var(--lamplight-tint); color: var(--lamplight-ink); font-size: 13px; }
.pil.new i { width: 7px; height: 7px; border-radius: 50%; background: var(--lamplight); }

/* floating tab bar */
.tabs { position: absolute; left: 14px; right: 14px; bottom: 22px; height: 66px; border-radius: 33px;
  background: rgba(255,253,249,.86); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(214,206,191,.8), 0 12px 32px -14px rgba(30,40,35,.32);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.tabs span { position: relative; width: 66px; height: 54px; border-radius: 27px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; color: #69635A; font: 500 10.5px/1 var(--sans); }
.tabs span.on { background: var(--evergreen-tint); color: var(--evergreen); font-weight: 600; }
.tabs u { position: absolute; top: 7px; right: 16px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lamplight); box-shadow: 0 0 0 2px var(--evergreen-tint); }

/* sheet screens */
.scr.mod { background: #E8E4DB; }
.scrim { position: absolute; inset: 0; background: rgba(27,36,32,.18); }
.under { position: absolute; top: 54px; left: 16px; right: 16px; transform: scale(.94); transform-origin: top center;
  opacity: .55; display: flex; flex-direction: column; gap: 10px; }
.under span { font-size: 15px; color: #69635A; margin-top: 30px; }
.under b { font: 500 40px/1.05 var(--serif); color: #1B2420; }
.sheet { position: absolute; top: 69px; left: 0; right: 0; bottom: 0; background: var(--paper);
  border-radius: 30px 30px 0 0; box-shadow: 0 -10px 40px -18px rgba(15,24,20,.4);
  display: flex; flex-direction: column; overflow: hidden; }
.grab { flex: none; align-self: center; width: 38px; height: 5px; border-radius: 3px; background: #D3CBBD; margin-top: 8px; }
.shd { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px;
  font-size: 17px; color: var(--evergreen); }
.shd .ttl { font-size: 17px; font-weight: 600; color: #1B2420; }
.shd .lf { padding: 0 10px; }
.shd .rt { width: 44px; display: grid; place-items: center; }
.sbody { flex: 1; min-height: 0; overflow: hidden; padding: 6px 16px 0; display: flex; flex-direction: column; gap: 18px; }
.sbody.wide { padding: 0 20px; gap: 20px; }
.sfoot { flex: none; padding: 12px 16px 34px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(to bottom, rgba(250,248,243,0), var(--paper) 24%); }

/* request sheet */
.rhd { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.rhd h3 { margin: 0; font: 500 32px/1.1 var(--serif); letter-spacing: -0.015em; color: #1B2420; }
.rhd .for { font-size: 16px; color: #4A463F; }
.kv { flex: none; background: #FFFDF9; border-radius: 16px; box-shadow: 0 0 0 1px var(--hairline); overflow: hidden; }
.kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid #EEE9DF; font-size: 15px; }
.kv > div:last-child { border-bottom: 0; }
.kv .k { color: #69635A; }
.kv .v { text-align: right; color: #1B2420; display: inline-flex; align-items: center; gap: 6px; }
.kv .v.b { font-weight: 600; }
.kv .v.g { color: #2F5242; font-weight: 600; }
.kv .ic { display: flex; gap: 6px; }
.kv .ic span { width: 40px; height: 40px; border-radius: 50%; background: var(--evergreen-tint); color: var(--evergreen);
  display: grid; place-items: center; }
.kv .pad { padding: 8px 8px 8px 16px; }
.quo { flex: none; margin: 0 4px; padding: 2px 0 2px 14px; border-left: 2px solid var(--input);
  font: italic 400 18px/1.45 var(--serif); color: #37332D; }
.sugg { display: flex; gap: 8px; }
.sugg span { flex: 1; padding: 11px 12px; border-radius: 14px; background: #FFFDF9;
  box-shadow: 0 0 0 1px var(--hairline); display: flex; flex-direction: column; }
.sugg b { font-size: 15px; font-weight: 600; color: #1B2420; }
.sugg i { font-style: normal; font-size: 13px; color: #2F5242; }

/* buttons inside a screen */
.bp { height: 52px; border-radius: 999px; background: var(--evergreen); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font: 600 17px/1 var(--sans);
  transition: transform .2s var(--ease), background-color .2s var(--ease); }
.bp.tap { transform: scale(.965); background: #16291f; }
.brow { display: flex; gap: 8px; }
.bs { flex: 1; height: 46px; border-radius: 999px; background: #EEEAE2; color: var(--evergreen);
  display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--sans); }
.bs.mute { color: #57524A; }
.bs.on { background: var(--evergreen); color: var(--paper); }

/* confirmed */
.cwrap { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 4px; }
.cmark { width: 60px; height: 60px; border-radius: 50%; background: var(--evergreen); display: grid; place-items: center; }
.cwrap .ck { font: 600 13px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); }
.cwrap h3 { margin: 0; font: 400 34px/1.1 var(--serif); letter-spacing: -0.015em; color: #1B2420; }
.cwrap .s { font-size: 16px; color: #4A463F; }
.strip { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  border-radius: 16px; background: var(--evergreen); color: #F4F1EA; }
.strip span { flex: 1; font-size: 15px; }
.strip b { font-variant-numeric: tabular-nums; }
.strip u { height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(250,248,243,.16);
  color: var(--paper); font: 600 15px/40px var(--sans); text-decoration: none; }
.det { flex: none; background: #FFFDF9; border-radius: 16px; box-shadow: 0 0 0 1px var(--hairline); overflow: hidden; }
.det .hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #EEE9DF; }
.det .hdr b { font-size: 16px; font-weight: 600; color: #1B2420; }
.det .rw { display: flex; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #EEE9DF; font-size: 15px; }
.det .rw:last-child { border-bottom: 0; }
.det .rw span:first-child { color: #69635A; }
.det .rw span:last-child { color: #1B2420; }
.pay { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px;
  background: #FFFDF9; box-shadow: 0 0 0 1px var(--hairline); }
.pay b { font-weight: 600; color: #1B2420; }
.pay .s { font-size: 15px; color: #4A463F; }

/* money */
.toast { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--evergreen); color: #F4F1EA; font-size: 15px; }
.tiles { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { padding: 14px; border-radius: 16px; background: #FFFDF9; box-shadow: 0 0 0 1px var(--hairline);
  display: flex; flex-direction: column; gap: 2px; }
.tile span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #69635A; }
.tile b { font: 400 28px/1.1 var(--serif); color: #1B2420; font-variant-numeric: tabular-nums; }
.tile i.ho { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--lamplight); box-sizing: border-box; }
.tile i.so { width: 8px; height: 8px; border-radius: 50%; background: var(--evergreen); }
.payout { flex: none; margin: -8px 4px 0; font-size: 13.5px; color: #69635A; }
.amt { flex: none; font: 500 19px/1 var(--serif); color: #1B2420; font-variant-numeric: tabular-nums; }
.mfoot { flex: none; text-align: center; font-size: 13px; color: #69635A; }

/* the client's own page, at phone width */
.pp { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  padding-top: 5px; font-family: var(--sans); }
.pp .nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 18px 14px; border-bottom: 1px solid var(--hairline); }
.pp .nav .bm { display: flex; align-items: baseline; gap: 8px; }
.pp .nav .bm b { font: 500 23px/1 var(--serif); letter-spacing: -0.01em; color: #1B2420; }
.pp .nav .bm i { font-style: normal; font: 600 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--sage); }
.pp .nav .go { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--evergreen); color: var(--paper);
  font: 600 14.5px/1 var(--sans); display: inline-flex; align-items: center; white-space: nowrap; }
.pp .bd { flex: 1; min-height: 0; overflow: hidden; padding: 24px 18px 0; display: flex; flex-direction: column; gap: 14px; }
.pp .eye { font: 600 12px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.pp h3 { margin: 0; font: 400 37px/1.04 var(--serif); letter-spacing: -0.022em; color: #1B2420; }
.pp h3 em { font-style: italic; color: var(--evergreen-hover); }
.pp .ld { font-size: 16px; line-height: 1.5; color: #4A463F; }
.pp .svc { background: #FFFDF9; border-radius: 16px; box-shadow: 0 0 0 1px var(--hairline); overflow: hidden; }
.pp .svc div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid #EEE9DF; font-size: 15px; color: #37332D; }
.pp .svc div:last-child { border-bottom: 0; }
.pp .svc b { font: 500 16px/1 var(--serif); color: #1B2420; }
.pp .facts { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-direction: column; gap: 9px;
  font-size: 14.5px; color: #4A463F; }
.pp .facts li { display: flex; align-items: center; gap: 8px; }
.pp .nxt { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border-radius: 14px;
  background: var(--sunken); }
.pp .nxt b { font: 600 14.5px/1 var(--sans); color: #1B2420; }
.pp .nxt span { font-size: 14px; line-height: 1.4; color: #4A463F; }
.pp .act { flex: none; padding: 14px 18px 34px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(to bottom, rgba(250,248,243,0), var(--paper) 26%); }
.pp .act .nt { font-size: 12.5px; color: #69635A; text-align: center; }

.cap-d { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; font-size: 12.5px; color: var(--muted); width: 100%; max-width: 320px; }
.cap-d .dots { display: flex; gap: 5px; flex: none; }
.cap-d .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--edge); transition: background-color .3s var(--ease), transform .3s var(--ease); }
.cap-d .dots i.on { background: var(--evergreen); transform: scale(1.3); }
.hero-visual { display: flex; flex-direction: column; align-items: center; }

/* ---------- "see it" carousel: copy cross-dissolves, the phone swipes ---------- */
.see .section-head { margin-bottom: 20px; }
.car { position: relative; overflow: hidden; border-radius: 26px; background: var(--sunken);
  cursor: grab; touch-action: pan-y;
  padding: 26px 22px 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
@media (min-width: 860px) { .car { flex-direction: row; align-items: center; justify-content: center; gap: 56px; padding: 44px 56px; } }

/* the three copy blocks share one grid cell, so the box is as tall as the tallest */
.car-copies { display: grid; width: 100%; max-width: 460px; }
@media (min-width: 860px) { .car-copies { flex: 0 1 460px; } }
.car-copy { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .62s var(--ease); }
.car-copy.on { opacity: 1; pointer-events: auto; }
@media (min-width: 860px) { .car-copy { text-align: left; } }
.car-copy h3 { margin: 0; font: 400 clamp(25px, 3.4vw, 36px)/1.12 var(--serif); color: var(--ink); letter-spacing: -0.018em; }
.car-copy p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--prose); }
.car-copy .fine { font-size: 13px; }

/* One phone; the three screens live in its stage and cross-dissolve, so the
   frame stays put and never goes half-transparent mid-swap. */
.car-phones { display: flex; justify-content: center; flex: none; }
#car-stage > .scr { opacity: 0; transition: opacity .7s var(--ease); }
#car-stage > .scr.on { opacity: 1; z-index: 2; }
/* While dragging, the pointer drives the dissolve directly, so the transition
   steps out of the way and the inline opacity set in JS takes over. */
.car.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.car.dragging #car-stage > .scr, .car.dragging .car-copy { transition: none; }
.car:focus-visible { outline: 2px solid var(--lamplight); outline-offset: 3px; }
.car-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (hover: none) { .car { cursor: default; } }
.car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 16px; }
.car-dots { display: flex; gap: 8px; }
.car-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--edge); cursor: pointer; transition: background-color .25s var(--ease), transform .25s var(--ease); }
.car-dots button[aria-current="true"] { background: var(--evergreen); transform: scale(1.3); }

/* ---------- phones: keep the email field and the button above the fold ---------- */
.only-phone { display: none; }
@media (max-width: 600px) {
  .only-phone { display: block; }
  .only-wide { display: none !important; }
  main.wrap { padding-top: 26px; }
  .hero-copy { gap: 12px; }
  .who { gap: 6px; }
  .who .tag { min-height: 30px; font-size: 13.5px; padding: 0 11px; }
  .who .who-line { font-size: 16px; }
  h1 { font-size: 33px; }
  h1.long { font-size: 30px; }
  .hero .lede { font-size: 16px; }
  .chip span.big { min-height: 36px; }
  input[type="text"], input[type="email"] { padding: 11px 13px; }
  .btn { height: 50px; }
  .field { gap: 5px; }
  .form { padding: 16px 18px 20px; gap: 13px; }
  .form .head { gap: 0; }
  .form .head .fine { font-size: 13.5px; }
  .car { padding: 22px 16px 26px; }
}

/* ---------- very narrow screens: fold cover panels, SE-class phones ---------- */
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 30px; }
  h1.long { font-size: 27px; }
  .device { --s: .58; --bez: 8px; }
  .who .tag { font-size: 13px; padding: 0 10px; min-height: 29px; }
  .who .who-line { font-size: 15.5px; }
  .hero .lede { font-size: 15.5px; }
  .form { padding: 15px 15px 18px; }
  .car { padding: 20px 12px 24px; }
  .card { padding: 20px; }
  .not { padding: 28px 20px; }
  .cap-d { font-size: 12px; }
}

/* ---------- short viewports ----------
   What pushes the email field below the fold is height, not width: an SE-class
   phone (553 visible in Safari), an iPad in landscape (698), a laptop whose
   browser chrome eats 70px. These rules only fire where height is scarce.
   On a short, wide screen the lede steps out rather than the headline shrinking
   — a 40px headline squeezed to 27px on a 1440px screen reads as broken, and
   the headline plus the form's own line already carry the pitch. */
@media (max-height: 820px) { main.wrap { padding-top: 22px; } }
@media (max-height: 790px) {
  main.wrap { padding-top: 18px; }
  .hero-copy { gap: 9px; }
  .who { gap: 6px; }
  .form { padding: 16px 18px 18px; gap: 11px; }
}
@media (max-height: 790px) and (min-width: 900px) {
  .who .who-for { display: none; }
  .hero .lede { display: none; }
}
@media (max-height: 700px) {
  main.wrap { padding-top: 16px; }
  h1 { font-size: clamp(27px, 4.2vw, 36px); }
  h1.long { font-size: clamp(25px, 4vw, 33px); }
  .who .tag { min-height: 29px; }
  .form .head .fine { font-size: 13.5px; }
}
@media (max-height: 660px) { .hero .lede { display: none; } }

/* ---------- dark mode, taken from the system setting ----------
   The page chrome flips. The phones do not: their palette is pinned on .stage
   above, because those screens are the product as designed. The "proudly not"
   block keeps its evergreen in both themes — in light it is the dark panel on
   the page, in dark it is the one that lifts off it. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1714;
    --surface: #1A251F;
    --sunken: #151E1A;
    --hairline: #28352E;
    --input: #3A4840;
    --ink: #F2F0E8;
    --text: #CFCCC2;
    --prose: #B9B6AC;
    --muted: #8E9A91;
    --sage: #9DB3A3;
    --evergreen: #BDD9C6;
    --evergreen-hover: #D4E8DA;
    --evergreen-tint: #22342B;
    --lamplight: #D9A45E;
    --lamplight-tint: #35281A;
    --lamplight-ink: #E8C08A;
    --clay: #D98A6B;
    --clay-tint: #33211A;
    --edge: #37443D;
    --edge-strong: #5A6A61;
    --hover: #22302A;
    --placeholder: #7B8780;
    --error-ink: #F3C3AC;
    --ok: #9FD0B4;
    --focus-ring: rgba(189, 217, 198, .25);
    --lift: 0 24px 48px -32px rgba(0, 0, 0, .75);
    --phone-shadow: 0 34px 64px -30px rgba(0, 0, 0, .85);
  }
  /* The lamp in the header is drawn in the light-mode greens; lift it to the
     page's foreground so the mark reads as brightly as the wordmark beside it. */
  .brand svg path[fill="#1F3A30"], .brand svg rect[fill="#1F3A30"] { fill: #DCE9E0; }
  .not { box-shadow: 0 0 0 1px rgba(226, 232, 227, .11); }
  .device { box-shadow: var(--phone-shadow), 0 0 0 1px rgba(242, 240, 232, .08); }
  .card.sunken { box-shadow: inset 0 0 0 1px var(--hairline); }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scr.enter { animation: none; }
  .car-copy, #car-stage > .scr, .scr.fade { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .chip span { transition: none; }
}