/* ==========================================================================
   Tab Truck — landing page  (handoff v3, §05)
   Full-bleed marketing page on the shared design system. Max-width 1180,
   grids collapse to one column below 900, H1 scales 60 → 40.
   ========================================================================== */

* { box-sizing: border-box; }

body.tt { font-size: 16px; }

.ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   Buttons (landing-local: the extension's .tt-btn lives in tokens.css, but
   these are anchors, not <button>s)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: var(--outline);
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 44px;
  box-shadow: var(--lift);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-fast),
              box-shadow var(--t-fast) var(--ease-fast),
              background var(--t-fast) var(--ease-fast);
}
.btn:hover { background: var(--panel); transform: translateY(-1px); box-shadow: var(--lift-hover); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow-neutral); }

.btn--primary { background: var(--orange); color: #fff; box-shadow: var(--lift-orange); }
.btn--primary:hover { background: var(--orange-hover); box-shadow: var(--lift-hover-orange); }
.btn--primary:active { background: var(--orange-press-bg); box-shadow: 0 1px 0 var(--orange-press); }

.btn--sm { font-size: 14px; padding: 9px 16px; min-height: 0; border-radius: 11px; box-shadow: var(--lift-sm); }
.btn--sm:hover { box-shadow: var(--lift); }
.btn--lg { font-size: 17px; padding: 14px 24px; border-radius: 14px; box-shadow: 0 5px 0 var(--shadow-neutral); }
.btn--lg.btn--primary { box-shadow: 0 5px 0 var(--orange-press); }
.btn--lg .ico { width: 20px; height: 20px; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  max-width: 1180px; margin: 0 auto;
  padding: 22px 24px;
  display: flex; align-items: center; gap: var(--s2);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  color: var(--ink); text-decoration: none;
  white-space: nowrap; flex: none;
}
.nav-links {
  margin-left: auto;
  display: flex; align-items: center; gap: 22px;
  font-size: 15px; font-weight: 600;
}
.nav-links > a:not(.btn) { color: var(--ink-soft); text-decoration: none; }
.nav-links > a:not(.btn):hover { color: var(--ink); }

/* ==========================================================================
   Nav dropdowns — one button per job
   ==========================================================================
   Same sticker language as .btn: 2px ink outline, flat offset shadow, the press
   that travels down. It has to read as a control rather than a link, because it
   holds a menu — but stay quieter than the orange CTA beside it, which is still
   the one thing the page wants you to press. */
.navdrop { position: relative; }

.navdrop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: var(--outline);
  border-radius: 11px;
  padding: 8px 14px;
  /* Never wrap. The label wrapping to two lines doubles the button's height and shoves
     the whole bar around, in the narrow band between "the nav still fits" and "the nav
     has collapsed into the burger". */
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--lift-sm);
  transition: transform var(--t-fast) var(--ease-fast),
              box-shadow var(--t-fast) var(--ease-fast),
              background var(--t-fast) var(--ease-fast);
}
.navdrop-btn:hover { background: var(--panel); transform: translateY(-1px); box-shadow: var(--lift); }
.navdrop-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow-neutral); }

/* The caret is drawn, not typed: a "▾" glyph renders at a different weight and
   baseline in every font on every platform, and next to a 2px stroke system it
   looks like a stray character. */
.navdrop-caret {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease-fast);
}
.navdrop:hover .navdrop-caret,
.navdrop:focus-within .navdrop-caret,
.navdrop.is-open .navdrop-caret { transform: translateY(1px) rotate(225deg); }

.navdrop-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 40;
  display: none;
  min-width: 262px;
  padding: 6px;
  background: var(--white);
  border: var(--outline);
  border-radius: 14px;
  box-shadow: var(--lift);
}
/* Hover for a pointer, focus for a keyboard, .is-open for a tap (see the nav script).
   The hover rule is what makes this work with JavaScript off. */
.navdrop:hover .navdrop-menu,
.navdrop:focus-within .navdrop-menu,
.navdrop.is-open .navdrop-menu { display: block; }

/* A hover menu that opens BELOW its button leaves a gap the pointer falls through on
   the way down, and the menu closes under the cursor. This bridges it. */
.navdrop-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px;
}

.navdrop-menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ink); text-decoration: none;
}
.navdrop-menu a:hover { background: var(--panel); }
.navdrop-menu a b { display: block; font-family: var(--font-display); font-size: 15px; }
/* The cost of each half, stated on the line — which one needs an account is the
   distinction four flat links were hiding. */
.navdrop-menu a small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-muted); line-height: 1.4; }

/* the phone-only hamburger drawer — hidden until the nav collapses */
.nav-menu { display: none; }
/* No breakpoint of its own: .nav-links is hidden wholesale at 720px, which takes the
   dropdowns with it, and the drawer below lists every destination flat. A hover menu on
   a phone is a menu that opens when you scroll past it. */
.nav-cta { flex: none; }
.nav-cta-short { display: none; }

.theme-cycle {
  font-size: 15px; line-height: 1;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--ink);
  border: var(--outline); border-radius: 11px;
  box-shadow: var(--lift-sm);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast);
}
.theme-cycle:hover { transform: translateY(-1px); box-shadow: var(--lift); }
.theme-cycle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow-neutral); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  max-width: 1180px; margin: 0 auto;
  padding: 36px 24px 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center;
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--green-press);
  background: var(--green-100);
  border: 1.5px solid var(--green);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  margin-bottom: 20px;
}
:root[data-theme="dark"] .pill { color: var(--green-ok-text); }

.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 60px; line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.hero-sub { font-size: 20px; line-height: 1.5; color: var(--ink-soft); max-width: 36ch; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 13px; color: var(--ink-muted); margin: 16px 0 0; }

/* The receive box, promoted into the hero. Carded so it reads as the one thing to do
   here, with sending demoted to a plain link beneath it — recipients outnumber senders,
   and a recipient arrives already holding a code. */
.hero-receive {
  margin: 22px 0 18px;
  padding: 18px;
  max-width: 460px;
  background: var(--white);
  border: var(--outline);
  border-radius: 16px;
}
.hero-receive-title { font-size: 15px; margin: 0 0 12px; }

/* The portal page's two ends, side by side. The whole reason this is one page and not
   two: the relationship between "I edit" and "I watch" is the thing people miss, and it
   is only visible when they sit next to each other. */
.portal-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: var(--s4) 0; }
.portal-role {
  padding: 16px;
  background: var(--white);
  border: var(--outline);
  border-radius: 16px;
  box-shadow: var(--lift-sm);
}
.portal-role h3 { margin: 0 0 8px; font-size: 17px; }
.portal-role p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
/* The cost, on the card, before the click — which end needs an account is the single
   fact a visitor is trying to work out. */
.portal-role-cost { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.portal-step { margin: var(--s5) 0 var(--s2); font-size: 19px; }
.summon--page > .summon-lede { margin-top: 0; }
@media (max-width: 720px) { .portal-roles { grid-template-columns: 1fr; } }

/* The other doors: one line each, no pitch. Sits under the two cards that carry the
   jobs people actually arrived for. */
.hero-more { display: grid; gap: 6px; max-width: 460px; margin-top: var(--s3); }
.hero-more a {
  display: block; padding: 9px 12px;
  background: var(--white); border: var(--outline); border-radius: 12px;
  text-decoration: none; color: var(--ink);
}
.hero-more a:hover { background: var(--panel); }
.hero-more b { font-family: var(--font-display); font-size: 14px; }
.hero-more small { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 1px; }

/* The portals this device is watching. Above summoning, because if you already have one
   the answer to "what do I do here" is almost always "that one". */
.my-portals { margin-bottom: var(--s3); }
.my-portals-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.my-portal {
  display: flex; align-items: stretch; gap: 6px;
  background: var(--white); border: var(--outline); border-radius: 11px;
  overflow: hidden;
}
.my-portal-open {
  flex: 1; min-width: 0; text-align: left;
  padding: 10px 12px; font-size: 14px; font-weight: 600;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  word-break: break-all;
}
.my-portal-open:hover { background: var(--panel); }
/* Separated from the row it sits beside, and a real target — the mistake this prevents is
   forgetting a portal you meant to open. */
.my-portal-drop {
  flex: none; min-width: 40px;
  background: none; border: 0; border-left: var(--hair);
  color: var(--ink-muted); font-size: 17px; cursor: pointer;
}
.my-portal-drop:hover { background: var(--orange-100); color: var(--orange-press); }
.summon-saved { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }

/* SUMMON A PORTAL. A disclosure under the receive box, not a second primary action —
   most readers arrive holding a code and must not be made to choose between two things
   on the way in. */
.summon { margin-top: 14px; }
.summon > summary {
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--orange-link);
}
.summon-lede { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0; }
.summon-row { margin: 0 0 10px; }
.summon-out { margin-top: 10px; }
.summon-label { font-size: 12px; font-weight: 700; margin: 0 0 6px; color: var(--ink-soft); }
.summon-code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* The one string that has to be read aloud accurately — bigger, spaced, boxed. */
.summon-code {
  flex: 1; min-width: 0;
  font-size: 16px; letter-spacing: 0.02em;
  background: var(--green-100); border: var(--outline); border-radius: 11px;
  padding: 10px 12px; word-break: break-all;
}
:root[data-theme="dark"] .summon-code { color: var(--ink); }
/* The phrase field sits beside its button in the same row shape as the code box above,
   because it is the same kind of thing: the half you have to supply. */
#summonPhrase {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 15px;
  color: var(--ink); background: var(--cream);
  border: var(--outline); border-radius: 12px;
  padding: 10px 12px;
}
#summonPhrase:focus { outline: none; border-color: var(--green); }
/* The wait line is the only thing on screen while nothing is happening, so it has to
   read as "working", not as "stuck". */
.summon-wait {
  margin: 10px 0 14px; font-size: 12.5px; font-weight: 600;
  color: var(--green-press);
}
:root[data-theme="dark"] .summon-wait { color: var(--green-ok-text); }
.summon-qr { margin-top: 10px; }
.summon-qr svg { width: 132px; height: 132px; display: block; }
.summon-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); margin: 10px 0 0; }

/* One line for the other half of the audience, instead of a card. */
.portal-sender-line { font-size: 13px; color: var(--ink-soft); margin: 0 0 var(--s3); }
.portal-sender-line a { color: var(--orange-link); font-weight: 600; text-decoration: none; white-space: nowrap; }
.portal-sender-line a:hover { text-decoration: underline; }

/* The reasoning, for whoever wants it, below the thing it explains. */
.portal-why { margin-top: 16px; }
.portal-why > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--orange-link); }
.portal-why p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; max-width: 62ch; }

/* ONCE THE PORTAL IS OPEN, the setup is done and everything that got you here is noise:
   the pitch, the sender's line, the passcode you already handed over, the phrase you
   already typed, and the explainer. What remains is the content and the control that
   stops it. */
body.portal-live .share-head,
body.portal-live .portal-sender-line,
body.portal-live .summon,
body.portal-live .portal-why { display: none; }
/* The card the message renders into becomes the page — so the section stops reserving
   room for a header that is no longer there. */
body.portal-live .open-inner { padding-top: 0; }
body.portal-live .open-page { padding-top: var(--s3); }

/* Present for the script, absent from the page. display:none rather than an off-screen
   position, because nothing here should be reachable by tab or read aloud — these are
   plumbing, not controls someone might want. */
.visually-gone { display: none; }
/* The closing line sits under a row whose button carries a sticker shadow; without this
   it tucks in behind it. */
.summon--page ~ .share-hint, #portal .share-hint { margin-top: 14px; }

/* Watching is a STATE, so the button has to look different while it is on — the whole
   point is that the reader can tell the page is still listening. */
.watch-btn { margin-top: 14px; }
.watch-btn.is-on { background: var(--green-100); border-color: var(--green); }

.hero-portal-line { font-size: 13px; color: var(--ink-soft); margin: 12px 0 0; }
/* Keep the label and its arrow on one line — an arrow orphaned onto its own row reads
   as a rendering fault. */
.hero-portal-line a { white-space: nowrap; }
.hero-portal-line a { color: var(--orange-link); font-weight: 600; text-decoration: none; }
.hero-portal-line a:hover { text-decoration: underline; }

/* "or" rule between the two jobs. Cheap way to say "these are separate things" without
   a second heading competing with the h1. */
.hero-or {
  display: flex; align-items: center; gap: 12px;
  max-width: 460px; margin: 0 0 14px;
  color: var(--ink-muted); font-size: 13px;
}
.hero-or::before, .hero-or::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}

/* The send half. A panel rather than a plain button so it reads as "the other thing you
   can do here", not as a second submit control for the receive form above it.

   It is a real compose box now, not a link out. The hover-lift the link had is gone
   deliberately: a card you type into should sit still, and a whole panel that rises
   under the cursor while you aim for the textarea reads as a button that isn't one. */
.hero-send {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 460px; padding: 14px 16px;
  background: var(--white);
  border: var(--outline);
  border-radius: 16px;
  box-shadow: var(--lift);
  color: var(--ink);
}
.hero-send-head { display: flex; align-items: center; gap: 14px; }
.hero-send textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--cream);
  border: var(--outline); border-radius: 12px;
  padding: 10px 12px;
  resize: vertical;                 /* never horizontal — it would outgrow its own card */
}
.hero-send textarea::placeholder { color: var(--ink-muted); }
.hero-send textarea:focus { outline: none; border-color: var(--green); }
/* The passcode row. Full-width field with the suggester beside it — the same shape as
   the receive card's rows above, because it is the same kind of thing: the secret half. */
.hero-pass-row { display: flex; gap: 8px; align-items: stretch; }
.hero-pass-row input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 15px;
  color: var(--ink); background: var(--cream);
  border: var(--outline); border-radius: 12px;
  padding: 10px 12px;
}
.hero-pass-row input::placeholder { color: var(--ink-muted); }
.hero-pass-row input:focus { outline: none; border-color: var(--green); }
.hero-pass-row .btn { flex: none; }

.hero-send-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-send-file { color: var(--orange-link); font-weight: 600; font-size: 14px; text-decoration: none; }
.hero-send-file:hover { text-decoration: underline; }

/* Files chosen or dropped here, listed before they go. Same chip shape as the composer's
   (pwa/app.css .mail-file-chip) on purpose: it is the same list, one screen earlier, and
   arriving at a composer that shows what you already saw is what makes the hand-off feel
   like one step instead of two. */
.hero-files { display: flex; flex-direction: column; gap: 4px; }
.hero-file-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--green-100);
  border: var(--outline);
  border-radius: 11px;
  font-size: 13px;
}
:root[data-theme="dark"] .hero-file-chip { color: var(--ink); }
.hero-file-name { font-weight: 600; flex: 1; min-width: 0; word-break: break-all; }
.hero-file-size { flex: none; color: var(--ink-soft); }
.hero-file-x {
  flex: none; padding: 2px 9px; font-size: 16px; line-height: 1;
  background: var(--white); color: var(--ink);
  border: var(--outline); border-radius: 8px; cursor: pointer;
}
@media (max-width: 720px) { .hero-file-x { min-height: 40px; min-width: 40px; } }
.hero-file-x:hover { background: var(--panel); }
.hero-file-total { font-size: 12px; color: var(--ink-muted); padding: 2px 4px; }

/* The picker trigger is a <button> so it can open a file dialog, but it must keep
   reading as the quiet alternative to "Send it", not as a second submit. */
button.hero-send-file {
  background: none; border: 0; padding: 0;
  font-family: var(--font-display); cursor: pointer;
}

/* Whole-page drop target, painted only while a drag is actually over the window.
   Matches the web app's overlay (pwa/app.css .dropzone) — the same gesture should look
   the same on both surfaces. */
.page-drop {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  padding: 24px;
}
.page-drop.is-on { display: grid; }
.page-drop-inner {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--ink);
  background: var(--white);
  border: 3px dashed var(--orange);
  border-radius: 20px;
  padding: 42px 46px;
  text-align: center;
  max-width: 90vw;
}

/* Returning visitors only — see share-view.js. Hidden by default so a first-time
   visitor is never offered a shortcut into a sign-in they have not made yet. */
.hero-send-self { display: none; }
body.returning .hero-send-self {
  display: inline-flex; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
body.returning .hero-send-self:hover { color: var(--orange-link); }
.hero-send-self .ico { width: 17px; height: 17px; }

.hero-send-ico {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
}
.hero-send-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-send-copy strong { font-family: var(--font-display); font-size: 16px; }
.hero-send-copy small { font-size: 12.5px; color: var(--ink-muted); }
.hero-receive .share-row + .share-row { margin-top: 8px; }
/* In share-mode the hero collapses to just the viewer, so the card shouldn't sit
   inside a box within a box. */
.share-mode .hero-receive { border: 0; padding: 0; max-width: none; background: none; }

/* --- the browser mock --- */
.hero-scene { position: relative; display: grid; gap: var(--s4); align-content: center; justify-items: center; }

/* The brand mark. Small on purpose: it is a signature, not an explanation — the moment it
   grows back to illustration size it starts costing the doors their place on the fold. */
.hero-mark {
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  height: 150px;
}
.hero-mark .ps-truck { height: 118px; width: auto; }
.hero-mark .mailpost { height: 96px; width: auto; }
/* KTRD's mark is one wide row rather than two objects, so it carries the full height. */
.hero-mark .ps-capy { height: 140px; width: auto; }

/* In this column the doors are the main event rather than a footnote, so they get real
   card weight — the left column's compact list rule is overridden below it. */
.hero-scene .hero-more { width: 100%; max-width: 420px; margin-top: 0; gap: 10px; }
.hero-scene .hero-more a { padding: 14px 16px; background: var(--card); }
.hero-scene .hero-more b { font-size: 16px; }
.hero-scene .hero-more small { font-size: 13px; margin-top: 3px; }

/* ==========================================================================
   Mailbox-home hero — the brand truck's REAR backed up to a small curbside mailbox.
   No engine jitter; the only motion is the flag springing up and an envelope popping
   out, both one-shot and gated behind prefers-reduced-motion.
   ========================================================================== */
.post-scene { padding: 22px 20px 20px; }
.ps-stage {
  display: flex; align-items: flex-end; justify-content: center; gap: 20px;
  height: 196px;
}
/* big truck rear vs. small mailbox — the size gap is the whole point */
.ps-truck { width: 156px; height: auto; flex: none; }
.mailpost { width: 76px; height: auto; flex: none; margin-bottom: 4px; }

.mp-flag { transform-box: fill-box; transform-origin: left bottom; }
.mp-env  { transform-box: fill-box; transform-origin: center bottom; }
@keyframes flag-raise { 0% { transform: rotate(78deg); } 100% { transform: rotate(0deg); } }
@keyframes env-pop { 0% { transform: translateY(16px) scale(.9); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .mp-flag { animation: flag-raise 1s .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
  .mp-env  { animation: env-pop 1s .9s ease-out backwards; }
}

.ps-preview { margin-top: 14px; display: flex; justify-content: center; }
.ps-preview .tabprev { width: 100%; max-width: 300px; }
.mock {
  position: relative; z-index: 1;   /* above the wheels, so their tops tuck under it */
  background: var(--panel);
  border: var(--outline);
  border-radius: 22px;
  box-shadow: var(--lift-hero);
  overflow: hidden;
}
.mock-bar {
  height: 34px;
  background: var(--hairline);
  border-bottom: var(--outline);
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
/* Once it's a truck rear, the browser chrome is gone: the bar collapses and its dots
   with it. :has lets the sibling bar react to the road opening. */
.mock:has(.mock-road.open) .mock-bar { height: 0; opacity: 0; border-bottom-color: transparent; }
.mock-dot { width: 10px; height: 10px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); }
.mock-dot--o { background: var(--orange); }
.mock-dot--l { background: var(--orange-200); }
.mock-dot--g { background: var(--green-100); }

.mock-road {
  height: 280px;
  background: repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--hairline) 12px 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  position: relative; overflow: hidden;
}

.road-line {
  position: absolute; left: 0; right: 0; height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--hairline-strong) 0 22px, transparent 22px 44px);
  opacity: .7;
}
.road-line--fast { top: 96px;  animation: speedline .5s linear infinite; }
.road-line--slow { top: 150px; opacity: .5; animation: speedline .32s linear infinite; }
@keyframes speedline { to { transform: translateX(-44px); } }

.truck-drive { position: relative; display: inline-flex; animation: drive .6s ease-in-out infinite; }
@keyframes drive { 50% { transform: translateY(-3px); } }

/* v4 cover animation: little tabs arc down and drop into the cargo box */
.toss-tab {
  position: absolute; left: 74px; top: 30px; z-index: 2;
  width: 30px; height: 21px;
  background: #fff; border: 2px solid #2A2620; border-radius: 6px;
  box-shadow: 0 2px 0 var(--shadow-neutral);
  display: flex; align-items: center; gap: 3px; padding: 0 5px;
  opacity: 0;
  animation: tosstab 2.7s ease-in infinite;
}
.toss-tab .tt-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.toss-tab .tt-line { flex: 1; height: 3px; border-radius: 2px; background: #E4E2DC; }
@keyframes tosstab {
  0%   { transform: translate(-92px,-72px) rotate(-32deg) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(-28px,-38px) rotate(-8deg) scale(1);    opacity: 1; }
  86%  { transform: translate(-2px,-6px) rotate(10deg) scale(0.6);    opacity: 1; }
  100% { transform: translate(4px,8px) rotate(16deg) scale(0.35);     opacity: 0; }
}

/* the hero truck's headlight (front = orange cab, right). Off on the light theme,
   a warm glow + beam thrown forward at night. Bobs with the truck. */
.hero-lamp { position: absolute; right: 9px; bottom: 27px; z-index: 3;
  width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.hero-lamp::before { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 44px; height: 18px; border-radius: 50%; background: transparent; }
:root[data-theme="dark"] .hero-lamp { background: #FFE9A8; box-shadow: 0 0 11px 3px rgba(255,221,130,0.9); }
:root[data-theme="dark"] .hero-lamp::before { background: linear-gradient(to right, rgba(255,224,140,0.5), transparent); }

/* ==========================================================================
   The mailbox — the truck's cargo box, backed up to you and swung open.
   The share viewer is what's inside it. share-view.js puts .open on #mockRoad.
   ========================================================================== */

/* The frame grows to make room for the box. A fixed open height, not height:auto,
   because auto cannot be transitioned — the frame would snap to its new size while
   the box sprang open, and the two motions would fight. Anything the viewer reveals
   afterwards scrolls INSIDE the box rather than resizing the hero under the reader. */
.mock-road { height: 280px; transition: height .5s cubic-bezier(.4, 0, .2, 1); cursor: pointer; }
.mock-road.open { height: 470px; cursor: default; }   /* room for the revealed contents */

.mock-stage {
  /* width:100% is load-bearing. .loadbar-wrap is 64% wide and used to be a direct
     child of the frame; as a flex item of a shrink-to-fit stage it would instead be
     64% of the TRUCK, collapsing the bar to a stub. */
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity .32s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* It made its delivery, so it drives on. */
.mock-road.open .mock-stage { opacity: 0; transform: translateX(52%) scale(.92); pointer-events: none; }

/* "Hover or tap to open" — the affordance while parked, gone the instant it opens. */
.mock-hint {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-muted);
  transition: opacity .25s ease;
  pointer-events: none;
}
.mock-road.open .mock-hint { opacity: 0; }

.mailbox {
  position: absolute; z-index: 2;
  inset: 14px;
  display: flex; flex-direction: column;
  /* Match the frame: the same diagonal road-stripe, same panel/hairline tones, so the
     open bay reads as continuous with the mock around it rather than a plain box on it.
     The input fields stay white, so text keeps its clean ground. */
  background: repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--hairline) 12px 24px);
  border: var(--outline);
  border-radius: 16px;
  box-shadow: var(--lift);
  overflow: hidden;                 /* clips the door as it rolls up into the roof */

  /* Parked: invisible, sitting just below its final spot. It cross-fades in as the
     truck drives off — no spring; the DOOR is the motion now. */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.mock-road.open .mailbox { opacity: 1; transform: none; pointer-events: auto; }

/* the roof: the housing the roll-up door disappears into. Sits above the door so the
   door reads as rolling up behind it. */
.mailbox-roof {
  position: relative; z-index: 3;
  height: 13px; flex: none;
  background: var(--orange);
  border-bottom: var(--outline);
}

.mailbox-body {
  flex: 1; min-height: 0;         /* min-height:0 or the flex child refuses to scroll */
  overflow-y: auto;
  padding: 16px 18px 14px;
}

/* the tab-groups preview inside the cargo — what the truck delivers */
.tabprev { display: flex; flex-direction: column; gap: 9px; }
.tabprev-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px;
}
.tabprev-group {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: var(--outline); border-radius: 11px;
  box-shadow: var(--lift-sm); padding: 10px 13px;
}
.tabprev-group b { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 14px; }
/* The line under the single message, saying what the picture can't: that this is all
   the reader gets. Quiet — it's a caption, not a claim competing with the h1. */
.tabprev-note {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-muted);
  margin: 10px 2px 0; max-width: 34ch;
}
.tabprev-dot { width: 11px; height: 11px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); flex: none; }
.tabprev-count {
  flex: none; font-size: 11px; font-weight: 700;
  color: var(--green-press); background: var(--green-100);
  border-radius: var(--r-pill); padding: 3px 9px;
}
:root[data-theme="dark"] .tabprev-count { color: var(--green-ok-text); }
.tabprev-lock { flex: none; color: var(--ink-muted); line-height: 0; }
.tabprev-lock .ico { width: 15px; height: 15px; }

/* the relocated share viewer, centred in its section */
.open-inner { max-width: 620px; margin: 0 auto; }

/* the rear bumper — a dark step plate with two treads */
.mailbox-gate {
  position: relative; z-index: 3;
  flex: none;
  height: 16px;
  display: flex; align-items: center; justify-content: center; gap: 44px;
  background: var(--dark-bg);
  border-top: var(--outline);
}
.mailbox-gate span {
  width: 30px; height: 5px; border-radius: var(--r-pill);
  background: var(--dark-text); opacity: .4;
}

/* ---- the roll-up cargo door ------------------------------------------------
   Covers the bay while parked; slides up on open. It overlays the body only —
   top starts just under the roof, bottom rests on the bumper — and the roof/bumper
   (z-index 3) clip and cap it so it looks housed. Grooves = the slats of a roll-up. */
.cargo-door {
  position: absolute; left: 0; right: 0; top: 11px; bottom: 15px; z-index: 2;
  background: repeating-linear-gradient(180deg,
    var(--orange) 0 11px,
    #C9622F 11px 13px);           /* a darker orange groove between each slat */
  border-bottom: 2.5px solid var(--ink);   /* the door's bottom rail */
  pointer-events: none;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1) .3s;  /* delay: cargo settles, truck clears, THEN roll up */
}
.mock-road.open .cargo-door { transform: translateY(-100%); }
/* the pull handle near the door's bottom edge */
.cargo-handle {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 54px; height: 7px; border-radius: var(--r-pill);
  background: var(--ink); opacity: .65;
}

/* amber tail-lights on the bumper corners. They pulse slowly once open — idling
   brake lights, the one animated cue that doesn't disturb the form. */
.cargo-light {
  position: absolute; bottom: 3px; z-index: 4;
  width: 13px; height: 11px; border-radius: 3px;
  background: #F4B740; border: 2px solid var(--ink);
}
.cargo-light--l { left: 12px; }
.cargo-light--r { right: 12px; }
.mock-road.open .cargo-light { animation: tailPulse 2.8s ease-in-out infinite; }
@keyframes tailPulse {
  0%, 100% { opacity: .6; box-shadow: 0 0 0 0 rgba(244, 183, 64, 0); }
  50%      { opacity: 1;  box-shadow: 0 0 7px 1px rgba(244, 183, 64, .55); }
}

/* ---- wheels ----------------------------------------------------------------
   Children of .hero-scene, BELOW the whole frame (not inside it), so they read as
   the truck's wheels on the ground. z-index 0 keeps their tops tucked behind the
   frame (z-index 1). They appear only once the frame has opened into a truck rear. */
.cargo-wheel {
  position: absolute; bottom: -15px; z-index: 0;
  /* a tyre seen from BEHIND is a rounded upright, not a side-on circle — matching the
     brand swatch, whose head-on tyres are rounded rectangles too. */
  width: 22px; height: 36px; border-radius: 8px;
  /* --tire, NOT --ink: --ink flips to pale egg on the dark theme, which was painting
     the wheels pale. --tire is near-black on light, slate on dark — a tyre in both. */
  background: var(--tire);
  opacity: 0; transform: translateY(-14px);
  transition: opacity .3s ease .1s, transform .4s cubic-bezier(.34, 1.2, .5, 1) .1s;
}
.cargo-wheel::after {              /* a hint of tread down the tyre */
  content: ''; position: absolute; inset: 5px 4px; border-radius: 5px;
  background-image: repeating-linear-gradient(180deg, transparent 0 4px, rgba(255, 255, 255, .12) 4px 5px);
}
.cargo-wheel--l { left: 16%; }
.cargo-wheel--r { right: 16%; }
.hero-scene:has(.mock-road.open) .cargo-wheel { opacity: 1; transform: none; }

/* a wisp of exhaust rising from under the back, only once open */
.cargo-exhaust {
  position: absolute; bottom: 2px; left: 30%; z-index: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); opacity: 0;
}
.hero-scene:has(.mock-road.open) .cargo-exhaust { animation: puff 3.2s ease-out infinite; }
@keyframes puff {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5); }
  18%  { opacity: .16; }
  100% { opacity: 0;   transform: translate(-18px, -22px) scale(1.9); }
}

.loadbar-wrap { width: 64%; }
.loadbar-label { text-align: center; margin-bottom: 7px; font-size: 12px; }
.loadbar {
  height: 12px;
  background: var(--cream);
  border: var(--outline);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.loadbar-fill {
  height: 100%; background: var(--orange); border-radius: var(--r-pill);
  animation: loadbar 2.2s ease-in-out infinite;
}
@keyframes loadbar {
  0%   { width: 8%; }
  60%  { width: 92%; }
  100% { width: 8%; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust { background: var(--dark-bg); color: var(--dark-text); }
.trust { position: relative; overflow: hidden; }

/* ---- trucks driving along the top rim (the road) ---- */
.trust-road { position: absolute; top: 0; left: 0; right: 0; height: 26px; pointer-events: none; z-index: 1; }
.road-truck { position: absolute; top: 3px; left: 0; will-change: transform; }
.rt-body { position: relative; display: block; }
.rt-body svg { width: 34px; height: 20px; display: block; }
.rt-flip { transform: scaleX(-1); }             /* faces the other way */

/* headlight sits at the FRONT (the cab, right edge) with the beam thrown ahead
   of it; a truck's .rt-flip mirrors the body, so both move to the left edge for
   left-bound trucks. Off on the cream theme, glowing in dark. */
.rt-lamp { position: absolute; right: 1px; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: transparent; }
.rt-lamp::before { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: var(--beam, 16px); height: 7px; border-radius: 50%; background: transparent; }
:root[data-theme="dark"] .rt-lamp { background: #FFE9A8; box-shadow: 0 0 5px 1.5px rgba(255,221,130,0.85); }
:root[data-theme="dark"] .rt-lamp::before { background: linear-gradient(to right, rgba(255,224,140,0.55), transparent); }

/* rear exhaust: little puffs off the trailer end (opposite the cab). Shown on the
   light theme; the dark theme shows headlights instead. .rt-flip mirrors the body,
   so the puffs sit at the rear of left-bound trucks too. */
.rt-smoke, .rt-smoke::before, .rt-smoke::after {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(201,197,189,0.85);
}
.rt-smoke { left: -1px; bottom: 4px; animation: smokepuff 1.4s ease-out infinite; }
.rt-smoke::before { content: ''; left: 0; bottom: 0; animation: smokepuff 1.4s ease-out infinite; animation-delay: 0.47s; }
.rt-smoke::after  { content: ''; left: 0; bottom: 0; animation: smokepuff 1.4s ease-out infinite; animation-delay: 0.93s; }
:root[data-theme="dark"] .rt-smoke { display: none; }
.rt-2 .rt-smoke, .rt-2 .rt-smoke::before, .rt-2 .rt-smoke::after { animation-duration: 1.1s; }
.rt-3 .rt-smoke, .rt-3 .rt-smoke::before, .rt-3 .rt-smoke::after { animation-duration: 1.7s; }
@keyframes smokepuff {
  0%   { transform: translate(0,0) scale(0.4);      opacity: 0; }
  25%  { opacity: 0.5; }
  100% { transform: translate(-11px,-9px) scale(1.5); opacity: 0; }
}

/* each truck: its own speed (randomised look), size and start offset.
   negative delays start them mid-road so they're staggered from the first frame. */
.rt-1 { animation: truck-ltr 11s linear infinite;  animation-delay: 0s;  --cab: #E1793F; --beam: 20px; }
.rt-2 { animation: truck-ltr 8s  linear infinite;  animation-delay: -5s; --cab: #7C3AED; --beam: 13px; }  /* bigger = closer/faster */
.rt-2 .rt-body svg { width: 38px; height: 22px; }
.rt-3 { animation: truck-rtl 14s linear infinite;  animation-delay: -3s; --cab: #35A07C; --beam: 26px; }  /* flipped, drives left */
.rt-3 .rt-body svg { width: 30px; height: 18px; }
.rt-4 { animation: truck-rtl 17s linear infinite;  animation-delay: -9s; --cab: #DB2777; --beam: 15px; }  /* flipped, smaller = further */
.rt-4 .rt-body svg { width: 27px; height: 16px; }

@keyframes truck-rtl { from { transform: translateX(102vw); } to { transform: translateX(-70px); } }
@keyframes truck-ltr { from { transform: translateX(-70px); } to { transform: translateX(102vw); } }

:root[data-theme="dark"] .trust { border-top: var(--outline); border-bottom: var(--outline); }
.trust-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 30px 24px 20px;
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  position: relative; z-index: 2;
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
}
.trust-inner span { display: inline-flex; align-items: center; gap: 8px; }
.trust-inner .ico { width: 18px; height: 18px; }
.trust-sep { color: #5A5248; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { max-width: 1180px; margin: 0 auto; padding: 68px 24px; }
.section--tint {
  max-width: none;
  background: var(--panel);
  border-top: var(--outline);
  border-bottom: var(--outline);
}
.section--tint > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.section-head { text-align: center; margin-bottom: 44px; }
.eyebrow { color: var(--orange-link); font-size: 12px; font-weight: 700; }
.section-head h2 {
  font-size: 40px; margin: 8px 0 0; letter-spacing: -0.01em;
}
.section-sub { color: var(--ink-soft); margin: 12px 0 0; }
.send-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* --- how it works --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: var(--white);
  border: var(--outline);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--shadow-neutral);
  overflow: hidden;
}
.step-art {
  height: 150px;
  background: repeating-linear-gradient(135deg, var(--panel) 0 11px, var(--hairline) 11px 22px);
  border-bottom: var(--outline);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--ink);
}
.step-ico { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step-num {
  position: absolute; bottom: 8px;
  background: var(--cream);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
}
.step-body { padding: 20px 22px 24px; }
.step-body h3 { font-size: 20px; margin: 0 0 6px; }
.step-body p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ==========================================================================
   Section background motion
   Both layers are absolutely positioned INSIDE their section and clip their own
   overflow — the section itself must not get `overflow:hidden`, or it would cut
   off the cards' flat sticker shadows.
   ========================================================================== */
#features, .privacy { position: relative; isolation: isolate; }

.tab-snow, .truck-lanes {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* .section--tint > * clamps children to 1180px; the snow is full-bleed. */
.section--tint > .tab-snow { max-width: none; margin: 0; }

/* keep the real content above the motion */
#features > .section-head, #features > .features,
.privacy > .privacy-inner { position: relative; z-index: 1; }

/* --- falling tabs (Features) --- */
.snow-tab {
  position: absolute;
  top: 0; left: var(--x);
  width: 24px; height: 16px;
  border-radius: 5px;
  background: var(--white);
  border: 1.5px solid var(--ink);
  opacity: 0;
  will-change: transform, opacity;
  animation: tabfall var(--dur, 18s) linear var(--delay, 0s) infinite;
}
.snow-tab::before {            /* the favicon dot */
  content: ''; position: absolute; left: 3px; top: 3.5px;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--c, #E1793F);
}
.snow-tab::after {             /* the title line */
  content: ''; position: absolute; left: 12px; top: 5.5px;
  width: 8px; height: 2.5px; border-radius: 2px;
  background: var(--hairline-strong);
}
@keyframes tabfall {
  0%   { transform: translate3d(0, -60px, 0) rotate(-14deg); opacity: 0; }
  6%   { opacity: .34; }
  90%  { opacity: .34; }
  100% { transform: translate3d(var(--drift, 24px), 1400px, 0) rotate(18deg); opacity: 0; }
}
:root[data-theme="dark"] .snow-tab { opacity: 0; }
:root[data-theme="dark"] .snow-tab { animation-name: tabfallDark; }
@keyframes tabfallDark {       /* dimmer on the navy, or it reads as confetti */
  0%   { transform: translate3d(0, -60px, 0) rotate(-14deg); opacity: 0; }
  6%   { opacity: .16; }
  90%  { opacity: .16; }
  100% { transform: translate3d(var(--drift, 24px), 1400px, 0) rotate(18deg); opacity: 0; }
}

/* --- bird's-eye trucks (Privacy) --- */
.lane-truck {
  position: absolute;
  top: var(--y, 50%);
  left: 0;
  width: var(--w, 60px); height: auto;
  /* the privacy band is dark in BOTH themes, so the truck is drawn as light
     line-art (currentColor) — a dark outline would simply vanish on the navy. */
  color: var(--dark-text);
  opacity: .34;
  will-change: transform;
  animation: laneRun var(--dur, 22s) linear var(--delay, 0s) infinite;
}
.lane-truck.rtl { left: auto; right: 0; animation-name: laneRunRtl; }

/* start fully off one edge, end fully off the other. The .rtl keyframes carry
   scaleX(-1) themselves — a separate transform would be overwritten. */
@keyframes laneRun {
  from { transform: translateX(calc(-1 * var(--w, 46px) - 20px)); }
  to   { transform: translateX(calc(100vw + 20px)); }
}
@keyframes laneRunRtl {
  from { transform: translateX(calc(var(--w, 46px) + 20px)) scaleX(-1); }
  to   { transform: translateX(calc(-100vw - 20px)) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-snow, .truck-lanes { display: none; }

  /* The mailbox still opens — it holds a form, and a form nobody can reach is not
     an accessibility win. It just arrives instead of rolling. share-view.js also
     opens it immediately here, so it's simply open when the page is: the door starts
     already up and never animates. */
  .mock-road, .mock-stage, .mailbox, .cargo-door, .mock-hint, .cargo-wheel, .mock-bar { transition: none; }
  .mock-road.open .mailbox { transform: none; }
  .mock-road.open .mock-stage { transform: none; }
  .cargo-door { transform: translateY(-100%); }
  .hero-scene:has(.mock-road.open) .cargo-wheel { transform: none; }
  /* no idling animation when motion is reduced */
  .mock-road.open .cargo-light,
  .hero-scene:has(.mock-road.open) .cargo-exhaust { animation: none; }
}

/* --- scenarios: narrative "that's me" cards. The lead card spans the row
       because it's the case nothing else on the market solves. --- */
.scenarios {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.scenario {
  background: var(--white);
  border: var(--outline);
  border-radius: 16px;
  box-shadow: var(--lift);
  padding: var(--s4);
}
.scenario h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  margin: 14px 0 8px;
}
.scenario p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; }
.scenario strong { color: var(--ink); }

.scenario--lead {
  grid-column: 1 / -1;
  border-color: var(--orange);
  box-shadow: var(--lift-orange);
}
.scenario--lead h3 { font-size: 25px; }
.scenario--lead p { font-size: 17px; max-width: 64ch; }
/* needs to out-specify `.scenario--lead p`, or the aside renders at body size */
.scenario p.scenario-also {
  margin-top: 14px; font-size: 14px; color: var(--ink-muted);
}

@media (max-width: 900px) {
  .scenarios { grid-template-columns: 1fr; }
  .scenario--lead h3 { font-size: 21px; }
  .scenario--lead p { font-size: 16px; }
}

/* --- features --- */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.feature {
  background: var(--white);
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 22px;
  transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast);
}
.feature:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--shadow-neutral); }
.feature-tile {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange-100);
  border: 2px solid var(--orange);
  border-radius: 12px;
  color: var(--orange-link);
  margin-bottom: 14px;
}
.feature-tile .ico { width: 22px; height: 22px; }
.feature-tile--trust {
  background: var(--green-100);
  border-color: var(--green);
  color: var(--green-press);
}
:root[data-theme="dark"] .feature-tile--trust { color: var(--green-ok-text); }
.feature h3 { font-size: 18px; margin: 0 0 6px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.feature code {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--panel); border: 1.5px solid var(--hairline);
  padding: 1px 5px; border-radius: 5px;
}

/* ==========================================================================
   Privacy — dark full-bleed strip
   ========================================================================== */
.privacy { background: var(--dark-bg); color: var(--dark-text); }
:root[data-theme="dark"] .privacy { border-top: var(--outline); border-bottom: var(--outline); }
.privacy-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 68px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.privacy .eyebrow { color: var(--orange-hover); }
.privacy h2 { font-size: 40px; margin: 8px 0 18px; letter-spacing: -0.01em; }
.privacy p { color: var(--dark-muted); font-size: 17px; line-height: 1.6; margin: 0 0 24px; max-width: 46ch; }
.privacy .btn {
  background: transparent;
  color: var(--dark-text);
  border-color: var(--dark-text);
  box-shadow: 0 4px 0 #000;
}
.privacy .btn:hover { background: var(--dark-raised); }

.privacy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.privacy-list li {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--dark-raised);
  border: 2px solid #4A4238;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--dark-muted);
}
.privacy-list strong { color: var(--dark-text); }
.privacy-list .ico { width: 20px; height: 20px; color: #3FB88D; margin-top: 2px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--white);
  border: var(--outline);
  border-radius: 14px;
  box-shadow: var(--lift-sm);
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  display: flex; align-items: center; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '+';
  font-size: 20px; line-height: 1;
  color: var(--orange-link);
  transition: transform var(--t-fast) var(--ease-fast);
}
.faq-item[open] summary::before { content: '−'; }
/* tint the whole item on hover, not just the summary — otherwise an open item
   shows a hover colour on the question row but not the answer, which looks broken */
.faq-item:hover { background: var(--panel); }
.faq-item p {
  margin: 0; padding: 0 20px 18px 42px;
  color: var(--ink-soft); font-size: 15px; line-height: 1.6;
}
.faq-item code {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--panel); border: 1.5px solid var(--hairline);
  padding: 1px 5px; border-radius: 5px;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.cta {
  max-width: none;
  background: var(--orange-100);
  border-top: var(--outline);
  border-bottom: var(--outline);
  padding: 72px 24px;
}
.cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cta h2 { font-size: 44px; letter-spacing: -0.01em; margin: 0 0 12px; }
.cta p { font-size: 18px; color: var(--ink-soft); margin: 0 0 28px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-note { font-size: 13px; color: var(--ink-muted); margin: 18px 0 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--dark-bg); color: var(--dark-text); }
.foot-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 48px 24px 32px;
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.foot-tag { color: var(--dark-muted); font-size: 13px; }

/* Ko-fi sticker. The usual --ink outline is #2A2620 — which is exactly --dark-bg,
   so on this strip it would be invisible. Outline and shadow go cream instead, and
   the fill carries Ko-fi's blue. */
.kofi {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: #fff;
  background: #5485d9;
  border: 2px solid var(--dark-text);
  border-radius: 12px;
  padding: 8px 13px;
  box-shadow: 0 3px 0 var(--dark-text);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast), background var(--t-fast) var(--ease-fast);
}
.kofi:hover { background: #4472bf; transform: translateY(-1px); box-shadow: 0 4px 0 var(--dark-text); text-decoration: none; }
.kofi:active { transform: translateY(3px); box-shadow: 0 0 0 var(--dark-text); }
.kofi-cup { font-size: 15px; line-height: 1; }

.foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col h4 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--dark-muted);
  margin: 0 0 4px;
}
.foot-col a { color: var(--dark-text); text-decoration: none; font-size: 14px; }
.foot-col a:hover { color: var(--orange-hover); text-decoration: underline; }

.foot-legal {
  max-width: 1180px; margin: 0 auto;
  padding: 20px 24px 40px;
  border-top: 1.5px solid #4A4238;
  color: var(--dark-muted);
  font-size: 12px;
}

/* the footer/privacy strips are always dark, so the focus ring needs contrast */
.foot :focus-visible,
.privacy :focus-visible,
.trust :focus-visible { outline-color: #3FB88D; }

/* ==========================================================================
   Responsive (v3): grids collapse below 900, H1 scales 60 → 40
   ========================================================================== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 12px; }
  /* The truck used to lead on phones (v3, when the hero was only a pitch). Once the
     hero gained the receive box, a ~500px illustration above it pushed the one thing
     most visitors came to do clean off the first screen. Moving it below the copy fixed
     that but left it as ~500px of scrolling past a picture, after the reader has
     already seen the headline, both actions and the pitch. It is decorative and
     aria-hidden, so on phones it earns nothing and costs height: drop it. It still
     carries the right-hand half of the hero on wider screens, where there is room.

     THE DOORS ARE NOT DECORATIVE and live in this column too, so the rule has to be
     aimed at the mark rather than the whole scene — hiding the container took the only
     route to the portal, the clipboard and tabs off every phone, silently, because a
     display:none leaves nothing to notice. Here the scene collapses to just the doors,
     placed last by the phone ordering below. */
  .hero-mark { display: none; }
  .hero-scene { display: block; }
  .hero-scene .hero-more { max-width: none; }
  /* Within the copy, headline then the box: the headline says what this is in one
     line, and the box is immediately reachable without scrolling past the pitch. */
  /* Phone order: headline, then BOTH actions, then the pitch. Receive and send are why
     people are here; the badge and the paragraph are why they might stay. Leaving the
     copy in between pushed the send panel off the first screen. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy h1 { order: -4; }
  .hero-copy .hero-receive { order: -3; margin-top: 14px; }
  .hero-copy .hero-or { order: -2; }
  .hero-copy .hero-send { order: -1; margin-bottom: 18px; }
  .hero-or, .hero-send { max-width: none; }
  .hero h1 { font-size: 40px; }
  .hero-sub { font-size: 18px; max-width: none; }
  .steps, .features { grid-template-columns: 1fr; }
  .privacy-inner { grid-template-columns: 1fr; gap: 32px; }
  .section-head h2, .privacy h2 { font-size: 32px; }
  .cta h2 { font-size: 34px; }
  .nav-links { gap: 16px; }
  /* Same band: buy back the width the two buttons cost before the bar has to collapse. */
  .navdrop-btn { font-size: 14px; padding: 7px 11px; }
  .navdrop-menu { min-width: 232px; }
}

/* --- phones: collapse the section links into a hamburger drawer --------- */
@media (max-width: 720px) {
  .nav {
    padding: 14px 16px; gap: 8px; flex-wrap: nowrap;
  }
  .brand { font-size: 18px; margin-right: auto; }
  .brand svg { width: 32px; height: 23px; }

  .nav-links { display: none; }             /* the inline links move into the drawer */
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }

  .nav-menu { display: block; position: relative; flex: none; }
  .nav-burger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; list-style: none; cursor: pointer;
    background: var(--white); color: var(--ink);
    border: var(--outline); border-radius: 11px; box-shadow: var(--lift-sm);
    transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast);
  }
  .nav-burger::-webkit-details-marker { display: none; }
  .nav-burger:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow-neutral); }
  .nav-menu[open] .nav-burger { background: var(--panel); }
  .nav-burger-box { position: relative; display: block; width: 18px; height: 13px; }
  .nav-burger-box span {
    position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-burger-box span:nth-child(1) { top: 0; }
  .nav-burger-box span:nth-child(2) { top: 5.5px; }
  .nav-burger-box span:nth-child(3) { top: 11px; }

  .nav-drawer {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 190px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--white);
    border: var(--outline); border-radius: var(--r-card);
    box-shadow: var(--lift); padding: 8px;
    z-index: 50;
  }
  .nav-drawer a {
    padding: 12px 12px; border-radius: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: 15px;
    color: var(--ink); text-decoration: none;
  }
  .nav-drawer a:hover { background: var(--panel); }
}

@media (max-width: 560px) {
  .section { padding: 48px 20px; }
  .hero-cta, .cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .cta-row .btn { width: 100%; }   /* full-width CTAs on phones — but never the nav */
}

/* ==========================================================================
   Public share viewer — it lives INSIDE the hero's browser mock now. The truck
   backs up, its cargo box springs open, and the viewer is what's in the back.
   ========================================================================== */
.share-head { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s3); }
/* Once a share is revealed, the "Got a share ID?" intro has done its job — collapse it
   so the note/file gets the room. The input fields stay, for opening another. */
body.revealed .share-head { display: none; }
/* 26px was sized for a full-width 820px section; in a ~480px frame it wraps to
   three lines and shoves the inputs out of the box. */
.share-head h2 { font-size: 21px; margin: 0 0 3px; }
.share-head p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }

.share-tile {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-100);
  border: 2px solid var(--green);
  border-radius: 13px;
  color: var(--green-press);
}
:root[data-theme="dark"] .share-tile { color: var(--green-ok-text); }
.share-tile .ico { width: 21px; height: 21px; }

.share-row { display: flex; gap: 8px; }
.share-row + .share-row { margin-top: 8px; }
.share-row input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: var(--outline);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
}
.share-row input::placeholder { color: var(--ink-muted); }
.share-row input:focus { border-color: var(--green); }
.share-row .btn { min-height: 44px; flex: none; }

/* The code field. One box, so a 33-char Drive id and a two-word code share the same
   input without either looking cramped; the placeholder carries the expected shape. */
#codeIn { font-family: var(--font-body); }

.share-msg { min-height: 20px; margin: var(--s2) 0 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.share-msg.err  { color: var(--orange-err-text); }
.share-msg.warn { color: var(--orange-link); }
.share-msg.ok   { color: var(--green-press); }
:root[data-theme="dark"] .share-msg.ok { color: var(--green-ok-text); }

.shared-box {
  margin-top: var(--s3);
  background: var(--white);
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 20px 22px;
}
.shared-box h3 { font-size: 20px; margin: 0; }
.shared-count {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--green-press); background: var(--green-100);
  border-radius: var(--r-pill); padding: 4px 9px;
}
:root[data-theme="dark"] .shared-count { color: var(--green-ok-text); }
/* pre-wrap keeps the sender's line breaks and wraps on spaces; overflow-wrap:anywhere
   is what breaks a long UNBROKEN run — a pasted URL, a wordless token — which otherwise
   pushes the note wider than the card and scrolls the whole page sideways. min-width:0
   lets it actually shrink inside a flex/grid parent, which is where the break can't
   take effect otherwise. */
.shared-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-top: 10px;
  font-size: 15px;
}
.shared-box ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 8px; }
.shared-box li {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--cream);
  border: var(--hair);
  border-radius: 12px;
  padding: 10px 13px;
}
.shared-box li a { color: var(--ink); text-decoration: none; font-weight: 600; word-break: break-word; }
.shared-box li a:hover { color: var(--orange-link); text-decoration: underline; }
.shared-url { font-size: 12px; color: var(--ink-muted); }

.shared-file-name { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink); word-break: break-all; }
.shared-file-dl { margin-top: 14px; }

/* Links inside a received note. Underlined as well as coloured — colour alone is not a
   link affordance for a reader who cannot distinguish it, and this is the one element on
   the page whose content came from someone else. break-word so a long URL wraps inside
   the card instead of pushing the page sideways. */
.shared-note a {
  color: var(--orange-link);
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.shared-note a:hover { color: var(--orange-press); }

/* The note that came with an attachment. Same look as a standalone note — to the reader
   it IS the message — with a rule under it so the attachment below reads as an enclosure
   rather than as more of the same block. */
.shared-caption { margin-bottom: 4px; }
.shared-caption + .shared-copy { margin-bottom: 14px; }

/* Copy-what-you-received. Sits under the content, not beside the heading: it is the
   thing you reach for AFTER reading, and it must not compete with Download. */
.shared-copy { margin-top: 12px; }
.shared-copy.is-done { background: var(--green-100); color: var(--green-press); }
:root[data-theme="dark"] .shared-copy.is-done { color: var(--green-ok-text); }

/* A batch: one card per file, so a set of twenty reads as a list rather than one wall of
   names and buttons. Each row is the single-file layout, boxed. */
/* Its own line: .shared-count is an inline pill, so an inline button lands beside it and
   the size of the set reads as a label on the button rather than as the set's total. */
.shared-dl-all { display: flex; width: fit-content; margin-top: 14px; }
.shared-file-set { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.shared-file-row {
  padding: 10px 14px 14px;
  background: var(--panel);
  border: var(--outline);
  border-radius: 12px;
}
.shared-file-row .shared-file-name { margin-top: 0; font-size: 15px; }
.shared-file-row .shared-file-dl { margin-top: 10px; }

/* Inline image preview on the receiving end. */
.shared-image { margin: 12px 0 0; }
.shared-image img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  border-radius: 12px;
  border: var(--outline);
  background: var(--panel);
}
.shared-image-status { margin-top: 10px; }

/* Quiet links under the viewer. On the dedicated /open page they always show; the
   share-mode rules below just restyle them when a reader arrived via a #s= link. */
.share-what {
  display: inline-block;
  color: var(--orange-link);
  font-weight: 600;
  text-decoration: none;
}
.share-what:hover { text-decoration: underline; }
.open-foot { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.open-page { min-height: 68vh; }
.hidden { display: none !important; }

/* Cross-sell strip on the mailbox home — points tab-hunters to the /tabs page. */
.teaser {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  max-width: 860px; margin: 0 auto;
  padding: 26px 28px;
  background: var(--panel); border: var(--outline); border-radius: var(--r-card);
}
.teaser .feature-tile { flex: none; }
.teaser-copy { flex: 1; min-width: 240px; }
.teaser-copy h2 { font-size: 22px; margin: 0 0 6px; }
.teaser-copy p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* ==========================================================================
   Share mode — arrived via a #s= link.
   Whoever opened this wanted to read something, not to be sold an extension:
   strip the page down to the shared content and one quiet way back.
   ========================================================================== */
/* The hero itself must SURVIVE here — the viewer lives inside its browser mock now,
   so hiding .hero (as this used to) would hide the very thing the reader came for.
   Hide the pitch beside it instead, and let the mock take the page. */
body.share-mode .hero-copy,
/* Share mode — arrived via a #s= link. Reading the share is the whole visit, so strip
   the page down to just the #open viewer. The viewer is its own section now, so this is
   simply "hide everything else". */
body.share-mode .hero,
body.share-mode #why,
body.share-mode #how,
body.share-mode #features,
body.share-mode #send,
body.share-mode #privacy,
body.share-mode #faq,
body.share-mode .cta,
body.share-mode .trust,
body.share-mode .foot,
body.share-mode .nav-links > a:not(.btn),
body.share-mode .welcome-back { display: none; }

/* …EXCEPT on the homepage, which now carries the viewer in its hero. The blanket
   `.hero` / `.hero-copy` hiding above predates that and would blank out the one thing
   a #s= visitor came for. Scoped with :has so /open — which has no .hero-receive — is
   untouched: there, the rules above still strip the page down to its #open section. */
body.share-mode .hero:has(.hero-receive) {
  display: grid; grid-template-columns: 1fr; justify-items: center;
  align-content: start;          /* sit under the nav, not floating mid-page */
  min-height: 0; padding-top: 32px;
}
/* The homepage has sections the /open page doesn't, and share-mode's hide list was
   written for /open. Anything not in that list leaks in under the viewer. */
body.share-mode #tabs-teaser,
body.share-mode #install { display: none; }
body.share-mode .hero:has(.hero-receive) .hero-copy { display: block; width: 100%; max-width: 640px; }
/* Inside it, keep only the viewer — the pitch, the CTA and the truck are noise to
   someone who is here to read one message. */
body.share-mode .hero:has(.hero-receive) .hero-copy > *:not(.hero-receive) { display: none; }
body.share-mode .hero:has(.hero-receive) .hero-scene { display: none; }

body.share-mode #open {
  min-height: 72vh;
  padding-top: 40px;
  display: flex; justify-content: center;
}
body.share-mode .open-inner { width: 100%; max-width: 640px; }
body.share-mode .share-head h2 { font-size: 26px; }

body.share-mode .share-what {
  display: inline-block;
  margin-top: var(--s4);
  color: var(--orange-link);
  font-weight: 600;
  text-decoration: none;
}
body.share-mode .share-what:hover { text-decoration: underline; }

/* ==========================================================================
   Returning visitor — they've used the web app before, so don't make them
   hunt for it behind the pitch.
   ========================================================================== */
.welcome-back { display: none; }
body.returning .welcome-back {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green);
  color: #fff;
  border-bottom: var(--outline);
  padding: 12px 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  text-decoration: none;
}
:root[data-theme="dark"] body.returning .welcome-back { color: #10241B; }
body.returning .welcome-back:hover { filter: brightness(1.05); }
.welcome-back .ico { width: 20px; height: 20px; }
.welcome-arrow { transition: transform var(--t-fast) var(--ease-fast); }
body.returning .welcome-back:hover .welcome-arrow { transform: translateX(3px); }

@media (max-width: 560px) {
  .share-row { flex-direction: column; }
  .share-row .btn { width: 100%; }
  .share-head { flex-direction: column; gap: var(--s2); }

  /* The rows stack here, so the box needs a third row's worth of height — without
     this the Reveal button sits below the fold of its own container. */
  .mock-road.open { height: 580px; }
}

/* Paste affordance. Two boxes labelled "first word" / "second word" read as "type each
   one" — but a code usually arrives in a chat and gets pasted whole, so the row has to
   say that out loud or people will hunt for a way to enter it. */
.hero-receive-hint, .share-hint {
  font-size: 12.5px; color: var(--ink-muted);
  margin: -6px 0 12px;
}

/* ==========================================================================
   Time capsule — the countdown a reader sees when their passcode is right but
   the date isn't. A state, not an error, so it reads calm rather than red.
   ========================================================================== */
.capsule {
  padding: 26px 22px;
  text-align: center;
  background: var(--white);
  border: var(--outline);
  border-radius: 18px;
}
.capsule h3 { margin: 0 0 6px; font-size: 19px; }
.capsule-when { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
.capsule-clock { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.capsule-unit {
  min-width: 74px; padding: 12px 8px;
  background: var(--panel); border: var(--outline); border-radius: 13px;
}
.capsule-unit b {
  display: block;
  font-family: var(--font-display); font-size: 27px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.capsule-unit small { font-size: 11px; color: var(--ink-muted); }
.capsule-note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.capsule.ready h3 { margin-bottom: 14px; }

/* ==========================================================================
   Saved mailboxes — restored with the address book (see share-view.js).
   Addresses only; a saved chip is a shortcut, never a stored secret.
   ========================================================================== */
.known { margin-bottom: var(--s2); }
.known-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.known-list { display: flex; flex-wrap: wrap; gap: 6px; }
.known-chip {
  display: inline-flex; align-items: stretch;
  background: var(--white); border: var(--outline);
  border-radius: var(--r-pill); overflow: hidden;
}
.known-pick {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--ink); background: none; border: 0;
  padding: 6px 4px 6px 12px; cursor: pointer;
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.known-chip:hover { background: var(--green-100); }
/* Forget-this-mailbox sits inside the same pill as the button that OPENS it, and was
   ~27px square. Tapping the wrong one deletes a saved address with no confirm and no
   undo — the address being the thing they saved precisely because they could not
   remember it. Bigger, and separated from its neighbour. */
@media (max-width: 720px) {
  .known-drop { min-height: 40px; min-width: 36px; }
  .known-pick { min-height: 40px; }
}
.known-drop {
  font-size: 15px; line-height: 1;
  color: var(--ink-muted); background: none; border: 0;
  padding: 6px 10px 6px 4px; cursor: pointer;
}
.known-drop:hover { color: var(--orange-link); }
.known-pick:focus-visible, .known-drop:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.save-row { margin-top: var(--s2); }
.save-ask { display: block; margin-bottom: 8px; font-size: 13px; color: var(--ink-soft); }

/* Pinned messages sit above the saved mailboxes: a pin is a specific thing you meant
   to come back to, a saved mailbox is just an address you type less often. */
.pins { margin-bottom: var(--s2); }
.pin-chip { background: color-mix(in srgb, var(--orange) 8%, var(--white)); }
.pin-chip:hover { background: color-mix(in srgb, var(--orange) 16%, var(--white)); }
.pin-btn { margin-top: var(--s2); }

/* "Reply" on a read message — the only organic growth this product has: every message
   is an introduction to someone who has already watched it work. */
.reply-btn { margin-top: var(--s2); }