/* ═══════════════════════════════════════════════════════════════════════
   KILOMEE — MARKETING SITE
   The marketing site's own design language. It shares the brand primitives
   (violet #7B2FF7, Sora, IBM Plex Mono) with the app deck and the admin
   panel because those are the identity of record (DEC-136).

   PALETTE (5 Nov): repainted to the client's "Kilomee Home A" reference.
   Violet #7B2FF7 is unchanged (DEC-136); what the reference adds is LIME
   #B6F23A as the single accent and a flat, bordered card in place of the
   tinted one. The four services no longer carry four lane colours — the
   client asked for the green on all of them, so the lane tokens all resolve
   to the same pair and the lane distinction is carried by the icon alone.
   Structure, markup and copy are untouched; only colour, weight and radius.

   THE IDEA. The mark is a junction — two things meeting. So is the business:
   somebody already going, somebody who needs. The whole site is built on a
   SEAM that runs the length of the page with those two parties either side
   of it, and violet marks the junction and nothing else. Scroll down the
   seam and you are reading a list of meetings.

   THE NEUTRALS carry a violet bias so the brand sits inside the palette
   rather than on top of it. Measured on this ramp:
     ink  17.8:1 on paper · ink-2 7.9 · ink-3 5.1 · brand 5.6
     on the night field: white 19.1 · mist 16.2 · lilac 10.9
     brand on night is 3.3 — a LARGE mark only, never body text.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* brand — locked, shared with the app (DEC-136) */
  --brand:        #7B2FF7;
  --brand-press:  #6A20E0;
  --brand-wash:   #F1E9FF;
  --brand-edge:   #D3BDFB;
  --on-violet:    #F1E9FF;   /* body copy on the violet band */

  /* the reference's accent. Site-only: it is not in the app palette. */
  --lime:         #B6F23A;
  --lime-press:   #A4E126;
  --lime-edge:    #9FD92F;
  /* The reference sets its hero eyebrow in the lime, which measures 4.40:1
     on the violet — under AA for type that size. This is the same green
     lifted far enough to pass (4.66:1) and is used for SMALL TYPE ON VIOLET
     only; every lime fill stays --lime, where ink on it is 12.7:1. */
  --lime-text:    #C6F56A;

  /* neutrals — this site's own, biased violet */
  --paper:        #F8F7FF;
  --paper-2:      #F1EEFC;
  --night:        #1B1B2F;
  --night-2:      #262441;
  --ink:          #1B1B2F;
  --ink-2:        #55536B;
  --ink-3:        #6B5B8E;
  --rule:         #E6E1F5;
  --rule-strong:  #D2CAEA;
  --on-night:     #FFFFFF;
  --on-night-2:   #D9D6EE;
  --on-brand:     #FFFFFF;

  /* the tinted band the layout uses for trust — the brand wash */
  --tint:         #F1E9FF;
  --tint-edge:    #DCCDFA;

  /* The four services. ONE colour across all four (client, 5 Nov): the
     reference gives every service the same lime tile, so these resolve to a
     single pair and are kept as four names only so the markup need not move. */
  --c-carry:      #B6F23A;  --c-carry-bg: #B6F23A;
  --c-task:       #B6F23A;  --c-task-bg:  #B6F23A;
  --c-buy:        #B6F23A;  --c-buy-bg:   #B6F23A;
  --c-take:       #B6F23A;  --c-take-bg:  #B6F23A;
  --c-on-lane:    #1B1B2F;

  --ok:           #0F7A52;
  --warn:         #9A4808;
  --stop:         #B8241C;

  --sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --seam-w: clamp(52px, 7vw, 104px);
  --page:   1180px;
  --pad:    clamp(20px, 4vw, 40px);

  --s1: 6px;  --s2: 10px; --s3: 16px; --s4: 24px;
  --s5: 36px; --s6: 54px; --s7: 80px; --s8: 120px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px;
  /* The reference is flat: cards are a 1px border, not a shadow. These stay
     so hover and the modal keep their lift, but at about a third the weight. */
  --sh-1: 0 1px 2px rgba(27,27,47,.04);
  --sh-2: 0 1px 2px rgba(27,27,47,.04), 0 10px 24px -20px rgba(27,27,47,.26);
  --sh-3: 0 2px 6px rgba(27,27,47,.05), 0 20px 44px -28px rgba(27,27,47,.30);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── TYPE ───────────────────────────────────────────────────────────────
   ONE display register (5 Nov). The two-weight split — Sora 300 with the
   claimed thing at 800 — was this site's own; the reference sets every
   heading in a single heavy weight and lets size carry the hierarchy. <b>
   is kept in the markup and simply inherits, so no copy had to move.
   Mono is still the ledger: every figure, time, weight and route. */

.d1 { font-size: clamp(36px, 6vw, 68px);  line-height: 1.05; letter-spacing: -.035em;
      font-weight: 800; margin: 0; text-wrap: balance; }
.d1 b, .d1 strong { font-weight: 800; }

.d2 { font-size: clamp(28px, 4vw, 44px);  line-height: 1.1; letter-spacing: -.03em;
      font-weight: 800; margin: 0; text-wrap: balance; }
.d2 b { font-weight: 800; }

.d3 { font-size: clamp(20px, 2.2vw, 26px);  line-height: 1.25; letter-spacing: -.02em;
      font-weight: 800; margin: 0; }

.lede { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.62; color: var(--ink-2);
        margin: var(--s4) 0 0; max-width: 46ch; }
.sm   { font-size: 15px; line-height: 1.58; color: var(--ink-2); margin: 0; }

.tag { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em;
       text-transform: uppercase; color: var(--ink-3); margin: 0; }
.tag--brand { color: var(--brand); }

.fig { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums;
       letter-spacing: -.01em; }
.fig--xl { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em;
           font-size: clamp(40px, 6vw, 76px); line-height: .92; }

/* ── NAV ────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60;
       background: var(--paper);
       border-bottom: 1px solid var(--rule); }
.nav__in { display: flex; align-items: center; gap: var(--s5);
           padding: 15px 0; max-width: var(--page); margin: 0 auto;
           padding-left: var(--pad); padding-right: var(--pad); }
/* 26px, up from 20px. The header CTA is 44px tall, so the lockup can grow
   this far without becoming the tallest thing in the bar — the header height
   is unchanged at every width. `width: auto` lets the SVG's own 4.01:1 ratio
   decide the width; it is never set explicitly.

   `flex: 0 0 auto` and `max-width: none` are what keep it HONEST. The mark is
   a flex item, and the global `img { max-width: 100% }` plus flex shrinking
   will happily compress it horizontally while the fixed height holds — at
   320px the enlarged lockup measured 3.75:1 against its true 4.01:1, a
   visibly narrower wordmark. A logo that silently distorts is worse than a
   small one, so it is allowed to keep its width and the gap gives way
   instead (see the narrow-width rule below). */
.nav__mark { flex: 0 0 auto; }
.nav__mark img { height: 26px; width: auto; max-width: none; }
.nav__links { display: flex; gap: var(--s4); margin-left: auto; align-items: center; }
/* :not(.btn) so this never out-specifies a button that happens to sit in the
   nav — .nav__links a is 0,2,0 and would otherwise beat .btn--brand at 0,1,0,
   which is exactly how the CTA ended up dark-on-violet the first time. */
.nav__links a:not(.btn) { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__cta { margin-left: var(--s3); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
       padding: 13px 20px; border-radius: 999px; border: 1px solid transparent;
       text-decoration: none; cursor: pointer; white-space: nowrap;
       transition: background-color .14s ease, color .14s ease, transform .14s ease; }
.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-press); }
/* on the night closing band the accent is the one that reads: lime on ink,
   as the reference's own CTA band does. (The old rule filled it lavender and
   hovered to a teal left over from the reverted 17 Oct repaint.) */
.sec--close .btn--brand { background: var(--lime); color: var(--ink); }
.sec--close .btn--brand:hover { background: var(--lime-press); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--night { background: var(--on-night); color: var(--night); }
.btn--night:hover { background: var(--on-night-2); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 16px 26px; font-size: 16px; }
/* the dominant CTA. Carry Me, the hero and the nav own this; nothing else
   on a light section may use it. */
.btn--navy { background: var(--brand); color: var(--on-brand); }
.btn--navy:hover { background: var(--brand-press); }
/* the reference's header CTA is the ink pill; violet stays the page's own */
.nav__cta .btn--navy { background: var(--ink); color: #fff; }
.nav__cta .btn--navy:hover { background: #2E2C4C; }
.btn--navy .ico { width: 15px; height: 15px; }
/* a quiet text-level action beside it */
.btn--plain { background: transparent; color: var(--ink); padding-left: 4px; padding-right: 4px; }
.btn--plain:hover { color: var(--brand-press); }
.btn--plain .ico { width: 15px; height: 15px; }
/* outlined, for use ON the navy closing band */
.btn--ghostlight { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghostlight:hover { background: rgba(255,255,255,.1); }

/* ── THE SEAM ────────────────────────────────────────────────────────────
   One rule, the length of the page, with the two parties either side. The
   junction node is the only violet on a light section. On narrow screens
   the seam moves to the left edge and the pair becomes a sequence, because
   two columns at 380px is two columns of nothing. */

.jx { display: grid; grid-template-columns: 1fr var(--seam-w) 1fr;
      align-items: stretch; }
.jx__side { padding: var(--s6) 0; min-width: 0; }
.jx__side--l { padding-right: clamp(4px, 1.6vw, 20px); }
.jx__side--r { padding-left:  clamp(4px, 1.6vw, 20px); }

.jx__seam { position: relative; }
.jx__seam::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
                    width: 1px; background: var(--rule); transform: translateX(-.5px); }
.jx__node { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
            margin: -6.5px 0 0 -6.5px; background: var(--brand); border-radius: 3px;
            transform: rotate(45deg); }
.jx__node::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--brand-edge);
                   border-radius: 5px; }
/* the short arms that reach into each column — the actual "meeting" */
.jx__arm { position: absolute; top: 50%; height: 1px; background: var(--brand-edge); }
.jx__arm--l { right: calc(50% + 10px); left: 0; }
.jx__arm--r { left:  calc(50% + 10px); right: 0; }

.jx--head .jx__side { padding-top: var(--s7); }
.jx--tail .jx__side { padding-bottom: var(--s7); }

/* a party: who they are, what they have or want, and the number that follows */
.party__role { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--s3); }
.party__role .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.party--supply .dot { background: var(--ink); }
.party--demand .dot { background: var(--brand); }
.party__line { font-size: clamp(19px, 2vw, 25px); line-height: 1.3; letter-spacing: -.018em;
               font-weight: 400; margin: 0; max-width: 24ch; }
.party__line b { font-weight: 700; }
.party__meta { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: 7px 18px;
               font-family: var(--mono); font-size: .76rem; letter-spacing: .12em;
               text-transform: uppercase; color: var(--ink-3); }
.jx__side--r .party__role,
.jx__side--r .party__meta { justify-content: flex-end; }
.jx__side--r .party__line { margin-left: auto; text-align: right; }
.jx__side--r .party__role { flex-direction: row-reverse; }

/* the outcome sits ON the seam, under the node */
.jx__out { grid-column: 1 / -1; display: flex; justify-content: center;
           padding-bottom: var(--s6); }
.jx__outbox { display: inline-flex; align-items: baseline; gap: var(--s3);
              border: 1px solid var(--rule); background: #FFFFFF; border-radius: 999px;
              padding: 11px 22px; }
.jx__outbox .fig { font-size: 19px; font-weight: 600; color: var(--ink); }
.jx__outbox .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .15em;
                   text-transform: uppercase; color: var(--ink-3); }

/* ── SECTIONS ───────────────────────────────────────────────────────────── */
.sec { padding: var(--s8) 0; }
.sec--tight { padding: var(--s7) 0; }
.sec--night { background: var(--night); color: var(--on-night); }
.sec--night .lede, .sec--night .sm { color: var(--on-night-2); }
.sec--night .tag { color: var(--on-night-2); }
.sec--night .jx__seam::before { background: #2E2448; }
.sec--night .jx__outbox { background: var(--night-2); border-color: #2E2448; }
.sec--night .jx__outbox .fig { color: var(--on-night); }
.sec--night .jx__outbox .lbl { color: var(--on-night-2); }
.sec--night .party--supply .dot { background: var(--on-night); }
.sec--night .party__meta { color: var(--on-night-2); }
.sec--wash { background: var(--paper-2); }

/* The head is a pair too: the claim on the left, the qualification on the
   right, sharing a baseline. Held in one narrow column it left two thirds of
   the page empty above rows that span all of it. */
.sec__head { display: grid; grid-template-columns: 1.1fr 1fr;
             column-gap: clamp(28px, 6vw, 96px); align-items: end;
             margin-bottom: var(--s6); max-width: none; }
.sec__head .tag  { grid-column: 1 / -1; margin-bottom: var(--s3); }
.sec__head .d2   { grid-column: 1; max-width: 15ch; }
.sec__head .lede { grid-column: 2; max-width: 44ch; margin-top: 0; }
@media (max-width: 860px) {
  .sec__head { grid-template-columns: 1fr; }
  .sec__head .d2, .sec__head .lede { grid-column: 1; max-width: 26ch; }
  .sec__head .lede { max-width: 46ch; margin-top: var(--s4); }
}

/* ── THE RAIL: how it works, read down the seam ─────────────────────────── */
.rail { display: grid; grid-template-columns: var(--seam-w) 1fr; }
.rail__seam { position: relative; }
.rail__seam::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
                      background: var(--rule); transform: translateX(-.5px); }
.rail__step { display: contents; }
.step { padding: var(--s5) 0 var(--s5) clamp(14px, 2.4vw, 34px);
        border-top: 1px solid var(--rule); }
.step:first-of-type { border-top: 0; }
.step h3 { font-size: clamp(19px, 1.9vw, 23px); font-weight: 700; letter-spacing: -.02em;
           margin: 0 0 7px; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 54ch; }
.step__n { position: relative; display: flex; align-items: flex-start;
           justify-content: center; padding-top: var(--s5);
           border-top: 1px solid var(--rule); }
.step__n:first-of-type { border-top: 0; }
.step__n span { position: relative; z-index: 1; background: var(--paper);
                font-family: var(--mono); font-size: .76rem; font-weight: 500;
                letter-spacing: .1em; color: var(--brand); padding: 3px 0; }
.sec--wash .step__n span { background: var(--paper-2); }

/* ── THE LEDGER: where the money actually goes ──────────────────────────── */
.ledger { border-top: 2px solid var(--ink); max-width: 560px; }
.ledger__row { display: flex; justify-content: space-between; align-items: baseline;
               gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ledger__row span { color: var(--ink-2); font-size: 16px; }
.ledger__row .fig { font-size: 17px; color: var(--ink); }
.ledger__row--sum { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px;
                    padding-top: 16px; }
.ledger__row--sum span { color: var(--ink); font-weight: 600; }
.ledger__row--sum .fig { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em;
                         font-size: clamp(28px, 3.2vw, 40px); }
.sec--night .ledger { border-top-color: var(--on-night); }
.sec--night .ledger__row { border-bottom-color: #2E2448; }
.sec--night .ledger__row span { color: var(--on-night-2); }
.sec--night .ledger__row .fig { color: var(--on-night); }
.sec--night .ledger__row--sum { border-top-color: var(--on-night); }
.sec--night .ledger__row--sum span { color: var(--on-night); }

/* ── CORRIDORS ──────────────────────────────────────────────────────────── */
.corr { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.corr__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
             align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.corr__from { font-size: clamp(18px, 1.9vw, 23px); font-weight: 600; letter-spacing: -.018em; }
.corr__from em { font-style: normal; color: var(--ink-3); font-weight: 400;
                 padding: 0 .45em; }
.corr__meta { font-family: var(--mono); font-size: .76rem; letter-spacing: .13em;
              text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ── WAITLIST ───────────────────────────────────────────────────────────── */
.join { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0 0; max-width: 480px; }
.join input { flex: 1 1 230px; min-width: 0; font-family: var(--sans); font-size: 16px;
              color: var(--on-night); background: #231741; border: 1px solid #3A2A62;
              border-radius: 999px; padding: 15px 20px; }
.join input::placeholder { color: #8E82AE; }
.join input[aria-invalid="true"] { border-color: #F2766B; }
.join__msg { margin: var(--s3) 0 0; font-size: 15px; min-height: 22px; color: var(--on-night-2); }
.join__msg[data-tone="error"] { color: #F2A79E; }

/* ── SIGNUP CONFIRMATION ─────────────────────────────────────────────────
   A modal <dialog> that site.js builds only after /api/waitlist accepts an
   address, then removes once it is closed. Paper card on a dimmed, softly
   blurred page; violet marks the check and nothing else. Motion is a short
   rise and a drawn check, and is skipped entirely for reduced motion. */
:root:has(dialog.ok[open]) { overflow: hidden; }
.ok { width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
      margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink);
      overflow: visible; }
.ok::backdrop { background: rgba(27, 27, 47, .52);
                -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ok__card { position: relative; text-align: center; background: var(--paper);
            border: 1px solid var(--rule); border-radius: var(--r-xl);
            padding: 44px 36px 32px; max-height: calc(100dvh - 32px); overflow-y: auto;
            box-shadow: 0 2px 8px rgba(18,11,36,.08), 0 36px 80px -32px rgba(18,11,36,.6); }
.ok__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
         display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px;
         background: transparent; color: var(--ink-3); cursor: pointer; }
.ok__x:hover { background: var(--paper-2); color: var(--ink); }
.ok__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
             stroke-width: 2; stroke-linecap: round; }
.ok__mark { display: block; width: 68px; height: 68px; margin: 0 auto var(--s4); }
.ok__ring { fill: var(--brand-wash); stroke: var(--brand); stroke-width: 2.5; }
.ok__tick { fill: none; stroke: var(--brand); stroke-width: 4;
            stroke-linecap: round; stroke-linejoin: round; }
.ok__h { margin: 0 0 var(--s2); font-size: clamp(24px, 3vw, 28px); font-weight: 800;
         line-height: 1.15; letter-spacing: -.022em; }
.ok__p { margin: 0 auto; max-width: 32ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.ok__soon { margin: var(--s3) 0 0; font-family: var(--mono); font-size: 13px; font-weight: 500;
            letter-spacing: .06em; text-transform: uppercase; color: var(--brand-press); }
.ok__go { width: 100%; margin-top: var(--s5); }
@media (max-width: 480px) {
  .ok__card { padding: 40px 22px 22px; border-radius: var(--r-lg); }
  .ok__mark { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ok[open]::backdrop { animation: ok-fade .28s ease-out both; }
  .ok[open] .ok__card { animation: ok-rise .44s cubic-bezier(.2, .8, .2, 1) both; }
  .ok[open] .ok__ring { stroke-dasharray: 183; animation: ok-draw .6s .12s cubic-bezier(.65, 0, .35, 1) both,
                                                   ok-fill .5s .3s ease-out both; }
  .ok[open] .ok__tick { stroke-dasharray: 36; animation: ok-tick .34s .52s cubic-bezier(.65, 0, .35, 1) both; }
  .ok.is-closing::backdrop { animation: ok-fade .18s ease-in reverse both; }
  .ok.is-closing .ok__card { animation: ok-leave .18s ease-in both; }
}
@keyframes ok-fade  { from { opacity: 0; } }
@keyframes ok-rise  { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes ok-leave { to   { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ok-draw  { from { stroke-dashoffset: 183; } to { stroke-dashoffset: 0; } }
@keyframes ok-fill  { from { fill: transparent; } }
@keyframes ok-tick  { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
/* Kept compact (client, 31 Oct): the footer is a way out, not a section, so
   it carries tight rhythm and 14px links rather than the page's 17px body. */
.foot { background: var(--night); color: var(--on-night-2); padding: var(--s6) 0 var(--s4); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s4) var(--s5); }
.foot h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em;
           text-transform: uppercase; color: #8E82AE; margin: 0 0 var(--s2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--on-night-2); text-decoration: none; font-size: 14px; }
.foot a:hover { color: var(--on-night); }
.foot img { height: 20px; }
.foot__end { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid #2E2448;
             display: flex; justify-content: space-between; gap: 4px var(--s4); flex-wrap: wrap;
             font-size: 13px; color: #8E82AE; }
/* The address inherits the footer's 13px rather than the 14px the links
   use, so the closing line stays one size throughout; underlined because it
   is the only link down here that does something other than navigate. */
.foot__end a { font-size: inherit; color: var(--on-night-2); text-decoration: underline;
               text-underline-offset: 3px; text-decoration-color: #4A3C6E; }
.foot__end a:hover { color: var(--on-night); text-decoration-color: currentColor; }

/* ── MOTION ─────────────────────────────────────────────────────────────
   One idea, used once per junction: the two sides arrive from their own
   side of the seam and lock. Nothing loops, nothing floats. */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transition: opacity .5s cubic-bezier(.22,.7,.28,1),
                                transform .5s cubic-bezier(.22,.7,.28,1); }
  .rv--l { transform: translateX(-14px); }
  .rv--r { transform: translateX(14px); }
  .rv--u { transform: translateY(14px); }
  .rv.in { opacity: 1; transform: none; }
  .jx__node { transform: rotate(45deg) scale(.4); opacity: 0;
              transition: transform .42s cubic-bezier(.3,1.4,.5,1) .12s, opacity .3s ease .12s; }
  .jx.in .jx__node { transform: rotate(45deg) scale(1); opacity: 1; }
  .jx__arm { transform: scaleX(0); transition: transform .42s cubic-bezier(.22,.7,.28,1); }
  .jx__arm--l { transform-origin: left; }
  .jx__arm--r { transform-origin: right; }
  .jx.in .jx__arm { transform: scaleX(1); }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────
   Below 860 the seam leaves the middle and runs down the left edge: the
   junction becomes a sequence, which is what a phone can actually show. */
@media (max-width: 860px) {
  .jx { grid-template-columns: 30px 1fr; position: relative; }
  /* The rows here are IMPLICIT, so `grid-row: 1 / -1` resolves -1 against the
     explicit grid — which is line 1 — and the seam spanned nothing. Draw it on
     the junction itself instead, where full height is simply full height. */
  .jx::before { content:''; position:absolute; left:15px; top:0; bottom:0; width:1px;
                background: var(--rule); }
  .sec--night .jx::before { background: #2E2448; }
  .jx__seam { grid-row: 1; }
  .jx__seam::before { display: none; }
  .jx__node { left: 15px; top: 46px; }
  .jx__arm--l { display: none; }
  .jx__arm--r { left: 15px; right: auto; width: 16px; top: 46px; }
  .jx__side { grid-column: 2; padding: var(--s4) 0 var(--s4) var(--s4); }
  .jx__side--l { padding-top: var(--s5); padding-right: 0; }
  .jx__side--r { padding-left: var(--s4); padding-bottom: var(--s5); }
  .jx__side--r .party__line { margin-left: 0; text-align: left; }
  .jx__side--r .party__role { flex-direction: row; justify-content: flex-start; }
  .jx__side--r .party__meta { justify-content: flex-start; }
  .jx__out { grid-column: 2; justify-content: flex-start; padding-left: var(--s4); }
  /* a pill that wraps to three ragged lines is not a pill */
  .jx__outbox { flex-direction: column; align-items: flex-start; gap: 3px;
                border-radius: 12px; padding: 13px 18px; }
  .jx__outbox .fig { font-size: 22px; }
  .jx--head .jx__side { padding-top: var(--s5); }
  .rail { grid-template-columns: 34px 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nav__links { display: none; }
  .nav__links.nav__links--cta { display: flex; margin-left: auto; }
  .corr__row { grid-template-columns: 1fr; gap: 4px; }
  .foot { padding: var(--s5) 0 var(--s4); }
  /* The two link lists sit side by side under the brand block instead of
     stacking into one long column: same links, same 44px targets, half the
     height. */
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .foot__grid > div:first-child { grid-column: 1 / -1; }
  .foot__end { flex-direction: column; }
}

/* the prohibited lists sit side by side until there is no room for two */
@media (max-width: 760px) { .split2 { grid-template-columns: 1fr !important; } }

/* ── MOBILE NAVIGATION ──────────────────────────────────────────────────
   Five routes and, below the tablet breakpoint, nowhere to go: the link row
   was simply hidden and only the CTA survived, which left the footer as the
   only way to reach another page. A disclosure panel instead, with tap
   targets at 48px and the button reachable by keyboard. */
.nav__toggle { display: none; margin-left: auto; width: 48px; height: 48px;
  align-items: center; justify-content: center; background: transparent;
  border: 1px solid var(--rule-strong); border-radius: 12px; cursor: pointer;
  padding: 0; color: var(--ink); }
.nav__toggle:hover { background: var(--paper-2); }
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .22s cubic-bezier(.22,.7,.28,1), opacity .16s ease; }
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ''; position: absolute; left: 0; }
.nav__bars::before { top: -5.5px; }
.nav__bars::after  { top:  5.5px; }
[aria-expanded="true"] .nav__bars { background: transparent; }
[aria-expanded="true"] .nav__bars::before { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .nav__bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

.nav__panel { display: none; border-top: 1px solid var(--rule); background: var(--paper); }
.nav__panel nav { display: flex; flex-direction: column;
  max-width: var(--page); margin: 0 auto; padding: var(--s2) var(--pad) var(--s4); }
.nav__panel a { display: flex; align-items: center; min-height: 48px;
  font-size: 18px; font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule); }
.nav__panel a:last-child { border-bottom: 0; }
.nav__panel a[aria-current="page"] { color: var(--brand); }

@media (max-width: 767px) {
  .nav__links[aria-label="Main"] { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { margin-left: var(--s2); }
  .nav__cta .btn { padding: 12px 16px; font-size: 14.5px; }
  .nav__panel { display: block; }
  .nav__panel[hidden] { display: none; }
  .nav__in { gap: var(--s3); }
}

/* At 320 the enlarged lockup, the toggle and the CTA together need about 6px
   more than the bar has. The gap yields rather than the logo: measured at
   320, 360 and 375, this keeps all three on one row, undistorted, with the
   header height unchanged. */
@media (max-width: 374px) {
  .nav__in { gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__bars, .nav__bars::before, .nav__bars::after { transition: none; }
}

/* ── TOUCH TARGETS ──────────────────────────────────────────────────────
   Measured at eight widths: the nav lockup was a 20px-tall target, footer
   links 19px, the header CTA 41px and the toggle squeezed to 36px wide at
   320. All of those are things people actually tap. 44px minimum, bought
   with padding so nothing moves visually. */
.nav__mark { display: inline-flex; align-items: center; min-height: 44px; }
.nav__toggle { flex: 0 0 auto; min-width: 44px; min-height: 44px; }

@media (max-width: 767px) {
  .nav__cta .btn { min-height: 44px; }
  /* the short home page added its own standalone controls: measured at 375,
     the chips were 38px, the "in detail" links 32px and the step-by-step
     link 19px. Bought with padding so nothing shifts visually. */
  .btn { min-height: 44px; }
  .trust__more { min-height: 44px; }
  .chip { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .svc__more { min-height: 44px; align-items: center; }
  .flow__note a { display: inline-flex; align-items: center; min-height: 44px; }
  /* the footer is the other place a phone navigates from */
  .foot ul { gap: 0; }
  .foot ul a { display: flex; align-items: center; min-height: 44px; }
  .foot__end { padding-top: var(--s3); }
  /* an 11.5px uppercase mono label with wide tracking is hard work on a phone */
  .tag { font-size: .78rem; }
  .party__meta { font-size: .78rem; }
  .jx__outbox .lbl { font-size: .78rem; }
  .corr__meta { font-size: .78rem; }
  .foot h4 { font-size: .78rem; }
}

/* ── ICONS ──────────────────────────────────────────────────────────────
   Lucide (DEC-109). A lane colour appears on the icon that names its
   service and nowhere else — never a surface, a button or body text. */
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
       flex: 0 0 auto; display: block; }
.ico--lg { width: 28px; height: 28px; }
.lane { display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
        border: 1px solid var(--rule); background: #fff;
        transition: transform .2s cubic-bezier(.3,1.3,.5,1), border-color .2s ease; }
.lane--carry, .lane--task, .lane--buy, .lane--take {
  background: var(--lime); border-color: var(--lime-edge); color: var(--c-on-lane); }
.lane .ico { stroke-width: 2; }
.party:hover .lane { transform: translateY(-2px); border-color: var(--c-on-lane); }
.sec--night .lane { background: var(--lime); border-color: var(--lime-edge); color: var(--c-on-lane); }
.party__role .lane + .tag { margin-left: 2px; }
.step__ico { color: var(--brand); margin-bottom: 11px; }
.sec--night .step__ico { color: #A77BFF; }

/* ── THE SEAM FILLS AS YOU PASS IT ──────────────────────────────────────
   The signature stops being a static rule: the part of the seam you have
   already scrolled past is violet, the part ahead is not. One idea, the
   length of the page. */
.jx { position: relative; }
.jx__seam::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px;
                   height: 0; background: var(--brand); transform: translateX(-.5px);
                   transition: height .45s cubic-bezier(.22,.7,.28,1); }
.jx.in .jx__seam::after { height: 50%; }
.sec--night .jx__seam::after { background: #A77BFF; }
@media (prefers-reduced-motion: reduce) { .jx__seam::after { display: none; } }

@media (max-width: 860px) {
  .jx__seam::after { left: 15px; }
  .jx.in .jx__seam::after { height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HOME PAGE
   Six bands: hero, services, process, trust, coverage + waitlist, closing.
   Carry Me is primary by SIZE and by CTA weight — it gets the wide card and
   the only solid navy button on the page. The other three are equal to each
   other and visibly smaller than it, each with one restrained accent.
   ═══════════════════════════════════════════════════════════════════════ */

/* TYPE SCALE for this page. The display sizes were built for a full-width
   hero and run to 86px; in a split hero at ~50% width that wrapped the
   headline onto four lines. These are proportioned to the two-column
   layout instead, and keep one consistent step between levels. */
.home .hero__copy .d1 { font-size: clamp(31px, 3.35vw, 46px); line-height: 1.1; max-width: 24ch; }
.home .bar h2 { font-size: clamp(21px, 2.3vw, 30px); font-weight: 700; letter-spacing: -.022em; }
.home .trust__copy .d2,
.home .cov__ask .d2,
.home .sec--close .d2 { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.12; }

/* Tightened for the client reference pass: the page carries nine sections and
   the rhythm is where its height is. Type is untouched; only the gaps move. */
.home .sec { padding: clamp(38px, 3.4vw, 52px) 0; }
.home .sec--tight { padding: clamp(28px, 2.6vw, 38px) 0; }
.home .lede { margin-top: var(--s3); }

/* a section's eyebrow + title sitting on one line, as the reference does */
.bar { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
       margin-bottom: var(--s5); }
.bar h2 { margin: 0; }
.bar p { margin: 0; font-size: .92rem; color: var(--ink-3); }
.bar--split { justify-content: space-between; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.home .hero-sec { padding: clamp(28px, 3.4vw, 46px) 0 clamp(36px, 4vw, 58px); }
.hero { display: grid; gap: clamp(var(--s5), 4vw, var(--s7));
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; }
.hero__art { position: relative; }
.hero__copy .d1 { margin: var(--s3) 0 0; max-width: 19ch; }
.hero__copy .lede { max-width: 44ch; }
.hero__cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
             margin-top: var(--s5); }
.hero__note { margin: var(--s4) 0 0; font-size: .84rem; color: var(--ink-3); }

/* the four services as chips — Carry first and filled, the rest tinted */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.chip { display: inline-flex; align-items: center; gap: var(--s2);
        padding: 8px 15px 8px 10px; border-radius: 999px; font-size: .86rem;
        font-weight: 600; text-decoration: none; border: 1px solid transparent;
        transition: transform .16s, box-shadow .16s; }
.chip:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.chip .ico { width: 15px; height: 15px; }
/* All four wear the lime (client, 5 Nov). The icon is what tells them
   apart now, so the four rules differ in nothing and are kept separate only
   because the markup names them. */
.chip--carry, .chip--task, .chip--buy, .chip--take {
  background: var(--lime); color: var(--c-on-lane); border-color: var(--lime-edge);
  font-weight: 700; }

/* ── the photograph slot ──────────────────────────────────────────────
   Sized and cornered for a real photograph. Until one is supplied it draws
   its own panel rather than a broken frame, so the page is presentable
   either way. Drop an <img> inside and the layout does not move. */
.ph { position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden;
      background: linear-gradient(145deg, var(--brand-wash) 0%, #E7E0F8 48%, var(--paper-2) 100%);
      box-shadow: var(--sh-3); isolation: isolate; }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none;
             background: radial-gradient(120% 90% at 78% 12%, rgba(255,255,255,.55), transparent 60%); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph--hero { aspect-ratio: 4 / 3; }
.ph--card { aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.ph__mark { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s2);
            align-content: center; text-align: center; padding: var(--s4); z-index: 1; }
.ph__mark .ico { width: 30px; height: 30px; color: var(--brand); opacity: .65; }
.ph--card .ph__mark .ico { width: 22px; height: 22px; }
.ph__mark span { font: 500 .68rem/1.3 var(--mono); letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ink-3); opacity: .8; }
.ph--card .ph__mark span { font-size: .6rem; }

/* the reference's handwritten aside */
.scribble { position: absolute; right: 10px; top: -14px; z-index: 2; max-width: 11ch;
            font-family: var(--mono); font-size: .76rem; line-height: 1.5;
            color: var(--ink-2); text-align: right; transform: rotate(-5deg);
            background: var(--paper); padding: 8px 12px; border-radius: var(--r-sm);
            box-shadow: var(--sh-2); }
.scribble b { display: block; font-weight: 600; color: var(--brand-press); }

/* ── services: Carry Me wide, the other three equal and smaller ───────── */
/* FOUR EQUAL CARDS. The reference makes this the focal point of the page and
   gives every service the same weight; the previous layout promoted Carry Me
   to a full-width lead above three smaller cards, which both buried the other
   three and cost about 300px of height on a page that needs to fit into two
   screens. Order is fixed by the brief: Carry, Task, Buy, Take. */
.svc { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0,1fr)); }
.svc__card { background: var(--card-bg, #fff); border: 1px solid var(--card-edge, var(--rule)); border-radius: var(--r-lg);
             overflow: hidden; display: flex; flex-direction: column;
             transition: transform .18s, box-shadow .18s, border-color .18s; }
.svc__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--rule-strong); }
.svc__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.svc__k { display: inline-flex; align-items: center; gap: var(--s2); margin: 0;
          font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.svc__card h3 { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.svc__card p { margin: 0; font-size: .89rem; line-height: 1.56; color: var(--ink-3); }
.svc__more { margin-top: auto; padding-top: var(--s3); display: inline-flex; align-items: center;
             gap: var(--s2); font-size: .85rem; font-weight: 600; text-decoration: none; }
.svc__more .ico { width: 15px; height: 15px; transition: transform .16s; }
.svc__more:hover .ico { transform: translateX(3px); }
.svc__note { font: 400 .66rem/1.4 var(--mono); letter-spacing: .07em;
             text-transform: uppercase; color: var(--ink-3); }

/* the icon badge that sits over each card's image, as in the reference */
.svc__badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
              position: absolute; left: var(--s4); bottom: -23px; z-index: 2;
              border: 3px solid #fff; box-shadow: var(--sh-1); }
/* the tile is lime, so the icon is ink — the reference's stroke colour */
.svc__badge .ico { width: 21px; height: 21px; color: var(--c-on-lane); stroke-width: 2; }
.svc__top { position: relative; }
.svc__body--badged { padding-top: calc(var(--s4) + 14px); }

/* Carry Me: the primary. Full width above the other three, navy CTA. */
.svc--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
             border-color: var(--rule-strong); box-shadow: var(--sh-2); }
.svc--lead .svc__top { order: 2; }
.svc--lead .ph--card { height: 100%; aspect-ratio: auto; min-height: 260px; }
.svc--lead .svc__body { order: 1; padding: clamp(var(--s4), 3vw, var(--s6)); gap: var(--s3); justify-content: center; }
.svc--lead .svc__k { font-size: 1.05rem; }
.svc--lead h3 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 700;
                color: var(--ink); line-height: 1.18; letter-spacing: -.02em; }
.svc--lead p { font-size: .98rem; color: var(--ink-2); max-width: 46ch; }
.svc--lead .svc__badge { position: static; border: 0; box-shadow: none; width: 38px; height: 38px;
                         border-radius: 12px; }
.svc--lead .svc__cta { margin-top: var(--s3); display: flex; gap: var(--s4);
                       align-items: center; flex-wrap: wrap; }

.c-carry, .c-task, .c-buy, .c-take { background: var(--lime); }
.t-carry, .t-task, .t-buy, .t-take { color: var(--ink); }
.svc__more.t-carry, .svc__more.t-task,
.svc__more.t-buy,   .svc__more.t-take { color: var(--brand-press); }

/* ── process strip ────────────────────────────────────────────────────── */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
        grid-template-columns: repeat(5, minmax(0,1fr)); text-align: center; }
.flow__step { display: flex; flex-direction: column; align-items: center; gap: var(--s1);
              position: relative; }
.flow__ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
             margin-bottom: var(--s2); background: var(--brand); border: 0; }
.flow__ico .ico { width: 23px; height: 23px; color: #fff; stroke-width: 2; }
.flow__step b { font-size: .94rem; font-weight: 700; }
.flow__step span:not(.flow__ico) { font-size: .85rem; line-height: 1.5; color: var(--ink-3); max-width: 22ch; }
.flow__step::after { content: ""; position: absolute; top: 28px; left: calc(50% + 40px);
                     width: calc(100% - 80px); height: 1px; background: var(--rule-strong); }
.flow__step::before { content: ""; position: absolute; top: 25px; right: calc(-1 * var(--s3) - 3px);
                      width: 6px; height: 6px; border-top: 1px solid var(--rule-strong);
                      border-right: 1px solid var(--rule-strong); transform: rotate(45deg); }
.flow__step:last-child::after, .flow__step:last-child::before { display: none; }

/* ── trust: the mint band ─────────────────────────────────────────────── */
.sec--tint { background: var(--tint); }
.trust { display: grid; gap: clamp(var(--s5), 4vw, var(--s7));
         grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); align-items: center; }
.trust__copy .d2 { margin: 0; }
.trust__copy .lede { color: var(--ink-2); max-width: 40ch; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid;
               grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s3); text-align: center; }
.trust__list li { display: flex; flex-direction: column; align-items: center; gap: var(--s2);
                  font-size: .8rem; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.trust__badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
                background: var(--lime); border: 0; box-shadow: none; }
.trust__badge .ico { width: 21px; height: 21px; color: var(--c-on-lane); stroke-width: 2; }
.trust__status { margin-top: var(--s5); max-width: 62ch; color: var(--ink-3); }
.trust__more { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4);
               font-weight: 600; font-size: .9rem; color: var(--brand-press); text-decoration: none; }
.trust__more .ico { width: 15px; height: 15px; }

/* ── coverage + waitlist, one band ────────────────────────────────────── */
.cov { display: grid; gap: clamp(var(--s5), 4vw, var(--s6));
       grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg);
         padding: clamp(var(--s4), 3vw, var(--s5)); box-shadow: var(--sh-1); }
.panel h3 { margin: 0 0 var(--s2); font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.panel .corr__row { padding: 13px 0; }
.panel .corr__from { font-size: 1rem; }
.cov__ask .d2 { margin: 0; max-width: 16ch; }
.cov__ask .lede { max-width: 40ch; }

/* ── rewards: joining bonus + referral bonus ──────────────────────────
   Two COMPACT cards of equal size and weight, told apart by ground rather
   than by size: the joining bonus on the brand fill, the referral on night.
   Both grounds carry white type (violet 5.85:1, night 19.1:1 per DEC-136).
   Each card is a mark, a title and one line; no amount is shown, so nothing
   here is at display scale. */
.sec--bonus { padding-top: 0; }
.bonus { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0,1fr)); }
.bonus__card { position: relative; isolation: isolate; overflow: hidden;
               display: flex; align-items: center; gap: var(--s3);
               border-radius: var(--r-lg); color: #fff;
               padding: var(--s4) clamp(var(--s4), 2.4vw, var(--s5)); }
/* the site's ring ornament, small, so the cards share the hero's texture */
.bonus__card::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px;
                      right: -90px; top: -110px; border-radius: 50%;
                      background: repeating-radial-gradient(circle, transparent 0 13px,
                        rgba(255,255,255,.08) 13px 14px, transparent 14px 27px); }
.bonus__card--join { background: var(--brand); }
.bonus__card--ref  { background: var(--night); }

.bonus__mark { flex: none; display: grid; place-items: center; width: 46px; height: 46px;
               border-radius: 14px; background: rgba(255,255,255,.12);
               border: 1px solid rgba(255,255,255,.22); }
.bonus__mark .ico { width: 22px; height: 22px; }

.bonus__title { margin: 0; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.2;
                letter-spacing: -.02em; font-weight: 300; }
.bonus__title b { font-weight: 800; letter-spacing: -.03em; }
.bonus__text { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.9); }

@media (max-width: 760px) {
  .bonus { grid-template-columns: minmax(0,1fr); gap: var(--s2); }
  .bonus__card { padding: var(--s3) var(--s4); }
  .bonus__mark { width: 40px; height: 40px; border-radius: 12px; }
  .bonus__mark .ico { width: 20px; height: 20px; }
  .sec--bonus .bar .btn { width: 100%; }
}

/* ── closing band ─────────────────────────────────────────────────────── */
.sec--close { background: var(--night); color: var(--on-night); text-align: center; }
.sec--close .d2 { margin: 0 auto; max-width: 18ch; }
.sec--close .lede { color: var(--on-night-2); margin-left: auto; margin-right: auto; max-width: 48ch; }
.close__cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .trust { grid-template-columns: minmax(0,1fr); }
  .trust__list { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5) var(--s3); }
  .flow__step::after, .flow__step::before { display: none; }
}
@media (max-width: 900px) {
  .hero, .cov { grid-template-columns: minmax(0,1fr); }
  .hero__art { order: 2; }
  .svc { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svc--lead { grid-template-columns: minmax(0,1fr); }
  .svc--lead .svc__top { order: 1; } .svc--lead .svc__body { order: 2; }
  .svc--lead .ph--card { min-height: 0; aspect-ratio: 16/9; }
}
@media (max-width: 620px) {
  .svc, .flow, .trust__list { grid-template-columns: minmax(0,1fr); }
  .trust__list li { flex-direction: row; text-align: left; gap: var(--s3); font-size: .9rem; }
  .scribble { display: none; }
  .hero__cta .btn, .svc--lead .svc__cta .btn { width: 100%; justify-content: center; }
  .flow__step span:not(.flow__ico) { max-width: none; }
}

/* ── the inner pages ──────────────────────────────────────────────────
   How it works and Trust & safety reuse the home page's card, panel and
   band vocabulary so the three read as one site. Only the pieces they
   need that the home page does not are below. */

/* numbered step cards (How it works) */
.stepgrid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.svc__body--num { gap: var(--s2); }
.num { display: inline-grid; place-items: center; width: 38px; height: 38px;
       border-radius: 50%; margin-bottom: var(--s1);
       background: var(--brand); border: 0;
       color: #fff; font: 800 1rem/1 var(--sans); }
.stepgrid .svc__card h3 { font-size: 1.02rem; color: var(--ink); }

/* icon pill on the trust pillars */
.svc--four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pill { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
        background: var(--lime); border: 0; margin-bottom: var(--s1); }
.pill .ico { width: 20px; height: 20px; color: var(--c-on-lane); stroke-width: 2; }
.svc--four .svc__card h3 { font-size: 1rem; color: var(--ink); }

/* the two restriction panels read at a glance */
.panel h3 .dot-no, .panel h3 .dot-ok {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px;
  vertical-align: middle; }
.panel h3 .dot-no { background: var(--stop); }
.panel h3 .dot-ok { background: var(--ok); }
.panel .corr__row:last-child { border-bottom: 0; padding-bottom: 0; }
.panel .corr { border-top: 0; }
.panel .corr__from { font-size: .95rem; font-weight: 500; line-height: 1.5; }
.panel .ledger__row:last-child { border-bottom: 0; }

@media (max-width: 1040px) { .svc--four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .stepgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .stepgrid, .svc--four { grid-template-columns: minmax(0,1fr); } }

/* ── corridor rows on a very narrow screen ────────────────────────────
   `1fr auto` with a nowrap mono meta column: neither track can shrink, so
   below ~340px the two together are wider than the viewport and the page
   scrolls sideways. Stack them instead. Affects every page using .corr. */
@media (max-width: 420px) {
  .corr__row { grid-template-columns: 1fr; gap: 2px; align-items: start; }
  .corr__meta { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TYPE FLOOR — must stay LAST in this file.
   These selectors have the same specificity as the component rules they
   override, so order is the only thing deciding them. An earlier attempt sat
   ABOVE the components it was meant to override and lost silently. Twice.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .xch__role, .chips__lbl { font-size: .64rem; }
  .xch__foot { font-size: .72rem; }
  .svc__note { font-size: .7rem !important; }
  .flow__step span:not(.flow__ico) { font-size: .88rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CLIENT REFERENCE PASS — warm, photographic, community-led.
   The reference the client supplied keeps this site's structure and asks for
   a warmer surface, four equal service cards, a lifestyle collage and a
   corridor panel. Brand primitives are untouched: #7B2FF7 is still the brand
   (DEC-136) and #A0137C is still the Task Me lane (DEC-137). Nothing below
   introduces a colour that is not derived from a token already in this file.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* The cream band is gone with the repaint: the reference alternates its
     near-white page ground with plain white, so --cream resolves to white
     and every .sec--cream keeps working without touching the markup. */
  --cream:     #FFFFFF;
  --cream-2:   #F8F7FF;
  --cream-rule:#E6E1F5;
}

/* The reference's card is WHITE with a 1px violet-grey border, and the only
   colour on it is the lime icon tile. The four tinted grounds are gone. */
.svc--carry, .svc--task, .svc--buy, .svc--take {
  --card-bg: #FFFFFF; --card-edge: var(--rule); }
.svc__card .ph--card { aspect-ratio: 16 / 10; }

/* ── THE BANDS ────────────────────────────────────────────────────────
   The reference is a stack of full-bleed grounds: violet, page, white,
   night, lime. Nothing below changes a section's contents or its order —
   only what it is painted on, and what has to be relit to stay legible. */
.sec--cream { background: var(--cream); }

/* ── the hero, on violet ─────────────────────────────────────────────── */
.hero-sec { background: var(--brand); color: #fff; }
.hero-sec .d1 { color: #fff; }
.hero-sec .tag { color: var(--lime-text); }
.hero-sec .lede { color: var(--on-violet); }
.hero-sec .hero__note { color: var(--on-violet); }
/* the page's violet CTA cannot sit on violet; the accent takes over */
.hero-sec .btn--navy { background: var(--lime); color: var(--ink); }
.hero-sec .btn--navy:hover { background: var(--lime-press); }
/* The hero's second action was bare white text beside a filled pill, so it
   read as a sentence rather than a control and only looked clickable on
   hover. Outlined, at its sibling's size, it is a button at rest. The border
   is white at .65 = 3.3:1 on the violet, over the 3:1 that WCAG 1.4.11 asks
   of a control's boundary. Scoped to the hero: on a light section .btn--plain
   stays the quiet text action it was designed to be (404, below the fold). */
.hero-sec .btn--plain {
  color: #fff;
  border-color: rgba(255,255,255,.65);
  padding: 16px 26px;              /* .btn--lg, to match the button beside it */
  font-size: 16px;
}
.hero-sec .btn--plain:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
  border-color: #fff;
}
.hero-sec :focus-visible { outline-color: #fff; }
/* the ring ornament is drawn in violet, which is the ground here */
.hero-sec.orn::before, .hero-sec.orn::after {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px,
    rgba(255,255,255,.14) 13px 14px, transparent 14px 27px);
  opacity: 1; }
/* the photo frame's placeholder gradient is a violet wash — invisible here */
.hero-sec .ph { background: linear-gradient(145deg, #8E4BF9 0%, #6A20E0 100%); }
.hero-sec .ph__mark .ico { color: #fff; }
.hero-sec .ph__mark span { color: rgba(255,255,255,.8); }

/* ── the waitlist, on lime — the reference's closing band ────────────── */
#coverage { background: var(--lime); }
#coverage .lede { color: #2B2B3F; }
#coverage .join input { background: var(--ink); border-color: var(--ink); color: #fff; }
#coverage .join input::placeholder { color: #A5A2BC; }
#coverage .btn--navy { background: var(--ink); color: #fff; }
#coverage .btn--navy:hover { background: #2E2C4C; }
#coverage .join__msg { color: #2B2B3F; }
#coverage .join__msg[data-tone="error"] { color: #8A1008; }
#coverage :focus-visible { outline-color: var(--ink); }

/* ── ORNAMENT ─────────────────────────────────────────────────────────
   The reference edges its sections with mandala line art. Drawn in CSS from
   repeating radial gradients rather than shipped as an image: a background
   image here would be the largest asset on the page for pure decoration. */
.orn { position: relative; overflow: hidden; }
.orn::before, .orn::after {
  content: ""; position: absolute; width: 320px; height: 320px; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 13px,
      color-mix(in srgb, var(--brand) 11%, transparent) 13px 14px, transparent 14px 27px);
  opacity: .5;
}
.orn::before { top: -120px; left: -110px; }
.orn::after  { bottom: -140px; right: -120px; }
@media (max-width: 767px) { .orn::before, .orn::after { display: none; } }

/* ── LIFESTYLE COLLAGE ────────────────────────────────────────────────
   One large landscape and two companions, per the reference. Deliberately
   NOT a row of equal tiles: at this width equal thirds read as a stock
   strip, and the reference's rhythm comes from the size difference. */
.collage { display: grid; gap: var(--s3);
           grid-template-columns: 1.55fr 1fr; align-items: stretch; }
.collage__stack { display: grid; gap: var(--s3); }
.collage .ph { border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.collage .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage__big img { aspect-ratio: 4 / 3; }
.collage__stack .ph img { aspect-ratio: 16 / 10; }
@media (max-width: 767px) {
  .collage { grid-template-columns: minmax(0,1fr); }
  .collage__stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* handwritten annotation — real text, never baked into an image */
.scrib { font-family: var(--sans); font-weight: 300; font-style: italic;
         font-size: clamp(.95rem, 1.5vw, 1.12rem); line-height: 1.45;
         color: var(--brand-press); transform: rotate(-3deg); display: inline-block; }

/* ── WHERE WE'RE LAUNCHING ────────────────────────────────────────────
   Countries only — never a service beside a country. Copy and two place
   cards on the left, a map on the right: India in full violet, the six Gulf
   states in a lighter wash, dotted routes between them. Each card carries a
   drawn landmark emblem in place of a flag and a skyline along its foot.
   Motion: pins drop in when the map reveals, the rings breathe, the routes
   flow; all of it stops for reduced motion. */
.launch { position: relative; overflow: hidden;
          background:
            radial-gradient(60% 70% at 78% 45%, rgba(184,146,255,.22), transparent 70%),
            radial-gradient(40% 50% at 8% 10%, rgba(201,174,251,.18), transparent 70%),
            linear-gradient(180deg, var(--paper) 0%, #F5F0FE 100%); }
.launch__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                gap: clamp(var(--s4), 4vw, var(--s6)); align-items: center; }
.launch__h { margin: 0; }
/* the brush stroke belongs to the word, so it follows it when the heading wraps */
.launch__h b { color: var(--brand); padding-bottom: .16em;
               background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 12C70 4 170 2 296 7' fill='none' stroke='%237B2FF7' stroke-width='3.5' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") left bottom / 100% .28em no-repeat; }
.launch__copy .lede { margin-top: var(--s3); max-width: 34ch; }

.lands { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.land { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
        align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) 0;
        background: rgba(255,255,255,.72); border: 1px solid #E6DCFB; border-radius: var(--r-lg);
        box-shadow: 0 1px 2px rgba(91,18,201,.05), 0 18px 40px -28px rgba(91,18,201,.45);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; }
.land__emb { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
             background: linear-gradient(145deg, #A47BF8, var(--brand) 55%, #5B12C9);
             box-shadow: 0 0 0 4px #F0EAFE, 0 8px 18px -8px rgba(91,18,201,.7); }
.land__emb svg { width: 38px; height: 38px; }
.land__txt { display: grid; gap: 2px; min-width: 0; }
.land__txt strong { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.land__txt span { font-size: .86rem; line-height: 1.35; color: var(--ink-3); }
.land__sky { grid-column: 1 / -1; display: block; width: 100%; height: 92px; margin-top: calc(var(--s2) * -1); }
.sky__ground { fill: #E9E0FC; }
.sky__pin path { fill: var(--brand); }
.sky__pin circle { fill: #fff; }

.launch__map { position: relative; margin: 0 calc(var(--pad) * -1) 0 0; }
.launch__svg { display: block; width: 100%; height: auto; overflow: visible; }
.launch__rings circle { stroke-width: 1.2; opacity: .4; }
.pin--in path { fill: #fff; } .pin--in circle { fill: var(--brand); }
.pin--gu path { fill: var(--brand); } .pin--gu circle { fill: #fff; }
.pin path { filter: drop-shadow(0 3px 3px rgba(60,10,140,.35)); }
.launch__tag { position: absolute; transform: translate(-50%, -100%); padding: 7px 14px;
               border-radius: 12px; font-size: .9rem; font-weight: 700; letter-spacing: -.005em;
               white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(91,18,201,.65); }
.launch__tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
                      background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.launch__tag--in { left: 82%; top: 13%; background: var(--brand); color: #fff; }
.launch__tag--me { left: 27%; top: 22%; background: #fff; color: var(--brand-press); border: 1px solid #E6DCFB; }

@media (prefers-reduced-motion: no-preference) {
  .launch__map .pin { opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.3,1.3);
                      transition-delay: calc(var(--i) * 70ms + 250ms); }
  .launch__map .pin path, .launch__map .pin circle { transform: translateY(-14px); transition: inherit; }
  .launch__map.in .pin { opacity: 1; }
  .launch__map.in .pin path, .launch__map.in .pin circle { transform: none; }
  .launch__map .pin--in { transition-delay: calc(var(--i) * 70ms + 650ms); }
  .launch__rings circle { transform-origin: 700px 320px; animation: lm-breathe 6s ease-in-out infinite; }
  .launch__rings circle:nth-child(2) { animation-delay: -2s; }
  .launch__rings circle:nth-child(3) { animation-delay: -4s; }
  .launch__arcs path { animation: lm-flow 1.6s linear infinite; }
  .launch__tag { animation: lm-float 5s ease-in-out infinite; }
  .launch__tag--me { animation-delay: -2.5s; }
}
@keyframes lm-breathe { 0%, 100% { opacity: .18; transform: scale(.97); } 50% { opacity: .5; transform: scale(1.02); } }
@keyframes lm-flow    { to { stroke-dashoffset: -20; } }
@keyframes lm-float   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

@media (max-width: 960px) {
  /* heading, then the map, then the cards: the copy column dissolves so its
     parts can sit either side of the map */
  .launch__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .launch__copy { display: contents; }
  .launch__map { order: 1; margin: var(--s4) calc(var(--pad) * -1) 0; }
  .lands { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s4); }
  .launch__copy .lede { max-width: none; }
}
@media (max-width: 620px) {
  .lands { grid-template-columns: minmax(0, 1fr); }
  .land__sky { height: 78px; }
  .launch__tag { font-size: .78rem; padding: 5px 10px; border-radius: 10px; }
}

/* the waitlist band without its old side panel */
.cov--solo { grid-template-columns: minmax(0,1fr); }

/* ── FOOTER SOCIAL ────────────────────────────────────────────────────── */
.soc { display: flex; gap: var(--s3); align-items: center; }
.soc a { display: grid; place-items: center; width: 36px; height: 36px;
         border-radius: 10px; border: 1px solid #2E2448; color: var(--on-night-2);
         transition: background .16s, color .16s, border-color .16s; }
.soc a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.soc .ico { width: 17px; height: 17px; }


/* ── DENSITY ──────────────────────────────────────────────────────────
   The client's note is that the reference "fits into about two page
   lengths". Measured, the reference image is 640x1600, which at 1440 wide
   is 3600px — four viewports at 900, not two. Nine mandated sections at
   readable type cannot be half that without deleting required content, so
   the target taken here is the REFERENCE'S OWN proportion, reached by
   tightening rhythm rather than shrinking type. No font-size is reduced
   anywhere in this block. */
@media (min-width: 1041px) {
  /* Measured first: 1,130px of a 4,900px page was section padding alone.
     Rhythm is where the height is, so rhythm is where it comes from. */
  .svc__body  { padding: var(--s3) var(--s4) var(--s4); gap: 7px; }
  /* The badge hangs 21px below the photo (bottom:-21px on a 42px box), so a
     badged body has to keep that clearance plus a readable gap. The shorthand
     on the line above sets padding-top too and, being later in the file at
     equal specificity, was silently winning over .svc__body--badged — which
     put the service label 5px INSIDE the badge at this breakpoint. */
  .svc__body--badged { padding-top: calc(var(--s3) + 22px); }
  .svc__card .ph--card { aspect-ratio: 16 / 9; }
  .foot       { padding: var(--s5) 0 var(--s4); }

  /* The collage's big frame is the single tallest element on the page.
     Capped rather than reshaped, so the crop stays editorial. */
  .collage__big img       { aspect-ratio: 3 / 2; max-height: 420px; }
  .collage__stack .ph img { aspect-ratio: 16 / 9; max-height: 198px; }

}

/* The closing band is dark; the ornament needs its own ink there or it
   vanishes into the ground. */
.sec--close.orn::before, .sec--close.orn::after {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px,
    rgba(255,255,255,.07) 13px 14px, transparent 14px 27px);
  opacity: 1;
}


/* ══ FINAL CTA BANNER ═══════════════════════════════════════════════════
   One wide lifestyle frame with the closing line on top. The scrim is not
   decoration: white type has to stay legible over a photograph whose own
   brightness varies across the frame, and the sunset here is bright at the
   horizon. Gradient rather than flat so the sky keeps its colour. ════════ */
.ctab {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-xl);
  min-height: clamp(252px, 26vw, 392px);
  display: grid; place-items: center;
  padding: clamp(34px, 4.4vw, 64px) clamp(20px, 4vw, 56px);
  text-align: center;
}
.ctab > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
}
.ctab::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,31,.26) 0%, rgba(20,16,31,.70) 100%);
}
.ctab__in { display: grid; gap: var(--s4); justify-items: center; max-width: 52ch; }
.ctab h2 { color: #fff; margin: 0; }
.ctab p  { color: rgba(255,255,255,.90); margin: 0; }
.ctab .btn { box-shadow: 0 10px 30px rgba(0,0,0,.30); }