/* How it works, page styles. Loaded after site.css and
   directions/journal-tokens.css; used only by howitworks.html.

   Eighth pass, 2026-09-28: the "field journal in green" look
   (directions/field-journal-green.html). The page's colours, type and sizes
   come only from the shared --j- tokens. Refined the same day (Sonia, via
   the Directions session): one continuous beige page, no white sheets,
   frames or shadows round sections, only a hairline between them; each
   section its natural height (not forced to a screen); lowercase serif headings; small mono
   labels; the red pen only for the ring round "first year free" and ticks
   as list bullets, no notes on or around the drawings of the app. The
   screens inside keep the app's own colours
   (apps/garden/app/sponica-design-tokens.css), because they show the app.

   Earlier passes, in short: three steps (find, join or host, show up) with
   one running example, Ola's Neon Museum visit; step 1 an Events feed that
   scrolls to her plan; step 2 join or host side by side; step 3 the usual
   group chat against a settled plan; each step led by its biggest value;
   the opening is a short outline of the steps beside the video, with no
   controls under the phone (Sonia, 2026-09-28). */

/* ---------- one continuous page: sections split by a hairline ----------
   The page background is the shared paper texture in journal-tokens.css;
   nothing here sets a body, page or section background over it. */
/* the shared header and footer line up with this page's text: the same
   width and side inset as .sheets below (journal-tokens.css, .j-top) */
:root{--j-page-max:1200px;--j-page-inset:clamp(8px,2.8vw,40px)}
.sheets{max-width:1200px;margin:0 auto;padding:clamp(10px,2vw,24px) clamp(8px,2.8vw,40px) 4px;font-family:var(--j-text);color:var(--j-body)}
.jsheet{position:relative;padding:var(--j-pad)}
.jsheet + .jsheet{border-top:1px solid var(--j-line)}
section[id],.hstep[id]{scroll-margin-top:16px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* the three printed voices */
.j-label{font-family:var(--j-mono);font-stretch:75%;font-weight:400;font-size:11.5px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:var(--j-accent)}
.j-h1,.j-h2,.j-h3{font-family:var(--j-disp);font-stretch:66%;font-weight:600;line-height:.86;letter-spacing:-.018em;text-transform:lowercase;color:var(--j-head);text-wrap:balance;max-width:none}
/* an inner page's headline: smaller than the home page's (--j-h1, about
   95px), about 72px at 1440 x 900, so it stays two lines beside the phone */
.j-h1{font-size:clamp(40px,min(5vw,8svh),72px);margin-top:14px}
.j-h1:after{content:none}
.j-h2{font-size:var(--j-h2);margin-top:12px}
.j-h3{font-size:clamp(28px,min(3vw,5.4svh),44px);margin-top:10px}
.j-lede{font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--j-body);margin-top:clamp(12px,2svh,18px);max-width:32em}
.j-link{color:var(--j-accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.j-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--j-accent);color:#fff;font-family:var(--j-mono);font-stretch:75%;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.j-btn:hover{background:var(--j-chip-ink)}
.j-btn:focus-visible,.j-link:focus-visible{outline:2px solid var(--j-accent);outline-offset:3px}

/* the pen (--j-pen): one underline per screen at most (.j-under, in
   journal-tokens.css; the ring was retired, Sonia 2026-10-01), and ticks as
   bullets; never on or around the drawings of the app */
svg.tick{width:22px;height:22px;flex:none;fill:none;stroke:var(--j-pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 1. the opening ---------- */
.hero-grid{display:grid;gap:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:clamp(16px,2.6svh,24px)}

/* the phone around the video: the whole screen is the play / pause button
   (WCAG 2.2.2); its icon shows on hover, on keyboard focus and while paused */
.hero-phone{--w:min(210px,calc((100svh - 250px) / 2.2));display:grid;justify-items:center;align-content:center;margin:0}
.device{position:relative;width:max(170px,var(--w));margin:0 auto;padding:calc(var(--w)*.035);border-radius:calc(var(--w)*.17);background:#3d4144;box-shadow:inset 0 0 0 1.5px #555a5e,0 30px 52px -30px color-mix(in srgb,var(--j-head) 70%,transparent)}
.device::before,.device::after{content:"";position:absolute;width:3px;border-radius:2px;background:#3d4144}
.device::before{left:-2px;top:21%;height:11%}
.device::after{right:-2px;top:26%;height:15%}
.screen{position:relative;overflow:hidden;aspect-ratio:390/844;border-radius:calc(var(--w)*.135);background:var(--j-page)}
.screen video{display:block;width:100%;height:100%;object-fit:cover}
.island{position:absolute;z-index:3;top:2.4%;left:50%;width:30%;height:3.3%;margin-left:-15%;border-radius:99px;background:#000}
.phone-toggle{position:absolute;inset:0;z-index:4;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.phone-toggle:focus-visible{outline:3px solid var(--j-accent);outline-offset:-3px}
.pt-icon{position:absolute;right:9%;bottom:6%;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--j-head) 80%,transparent);opacity:0;transition:opacity .2s}
.phone-toggle:hover .pt-icon,.phone-toggle:focus-visible .pt-icon,.phone-toggle[data-paused="true"] .pt-icon{opacity:1}
.pt-icon::before,.pt-icon::after{content:"";position:absolute;top:11px;width:4px;height:12px;border-radius:1px;background:#fff}
.pt-icon::before{left:12px}
.pt-icon::after{right:12px}
.phone-toggle[data-paused="true"] .pt-icon::before{left:13px;top:10px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.phone-toggle[data-paused="true"] .pt-icon::after{display:none}

/* ---------- 2. the steps: one sheet each ---------- */
.steps-head{margin-bottom:clamp(18px,3.4svh,34px)}
.hstep{display:grid;gap:22px}
.hstep-text p{font-size:15.5px;line-height:1.5;color:var(--j-body);margin-top:8px;max-width:28em}
.hstep-text p.value{font-size:clamp(18px,1.45vw,21px);line-height:1.35;font-weight:500;color:var(--j-head);margin-top:12px;max-width:22em}
.hstep-text p.small{font-size:13.5px}
.hstep-text p.j-label{font-size:11.5px;line-height:1.3;color:var(--j-accent);margin-top:0}
.hstep-text b{color:var(--j-head);font-weight:600}
.gains{list-style:none;display:grid;gap:9px;margin-top:14px;max-width:30em}
.gains li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.45;color:var(--j-body)}
.gains svg.tick{margin-top:-3px}
.gains b{color:var(--j-head);font-weight:600}

/* The drawn screens: on the quiet green, in the app's own colours and type
   (DM Sans; the app's tokens below). */
/* the step pictures sit on a flat rounded fern-mist panel, no line, no
   shadow, the same as Home's (Sonia, 2026-10-02: "modern but clean") */
.scene{position:relative;margin:0;background:var(--j-soft);border-radius:24px;padding:26px 20px 22px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;font-family:var(--j-app);color:#0e1a18;
  --app-green:#1b4332;--app-bg:#faf6ef;--app-surface:#fffdf9;--app-line:#e0d6c5;--app-muted:#6b6152;--app-variant:#f0e9dc;--app-soft:#e4efe4}
svg.i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lane{display:flex;align-items:center;gap:7px}
.lane svg.i{width:22px;height:22px;padding:5px;border-radius:50%;background:var(--j-sheet);color:var(--j-accent);stroke-width:2.4}
.lane.quiet{color:var(--j-body)}
.lane-sub{margin-top:4px;color:var(--j-body)}
.app-btn{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;background:var(--app-green);color:#fff;border-radius:12px;padding:8px;font-size:13px;font-weight:700}
.app-btn svg.i{width:15px;height:15px}
.toast{display:flex;gap:8px;align-items:center;background:var(--app-soft);border-radius:12px;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--app-green)}
.toast svg.i{width:15px;height:15px;stroke-width:2.6}

/* step 1: the Events screen in a phone that rises out of the green; the
   list scrolls past two plans and stops on Ola's (script at the bottom) */
.scene-phone{padding-top:30px;padding-bottom:0;overflow:hidden}
.mini-phone{position:relative;width:min(244px,100%);padding:8px 8px 0;border-radius:40px 40px 0 0;background:#3d4144;box-shadow:inset 0 0 0 1.5px #555a5e,0 22px 44px color-mix(in srgb,var(--j-head) 16%,transparent)}
.mini-screen{display:flex;flex-direction:column;height:346px;overflow:hidden;border-radius:33px 33px 0 0;background:var(--app-bg);text-align:left}
.status{position:relative;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 20px 0 22px;background:var(--app-green);color:#fff;font-size:10px}
.status::after{content:"";position:absolute;top:6px;left:50%;width:62px;height:17px;margin-left:-31px;border-radius:99px;background:#000}
.status span{width:19px;height:9px;border:1.5px solid rgba(255,255,255,.9);border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--app-green),inset 0 0 0 9px rgba(255,255,255,.9)}
.appbar{display:flex;align-items:center;gap:8px;padding:4px 12px 9px;background:var(--app-green);color:#fff}
.appbar img{width:22px;height:22px;border-radius:6px}
.appbar b{font:700 15px/1 var(--j-app)}
.appbar svg.i{width:16px;height:16px;margin-left:auto}
.appbar img.me{width:21px;height:21px;border-radius:50%;object-fit:cover}
.seg{display:flex;gap:2px;margin:8px 10px 0;padding:2px;border:1px solid var(--app-line);border-radius:12px;background:var(--app-variant)}
.seg span{flex:1;padding:5px 0;border-radius:8px;text-align:center;font-size:10.5px;font-weight:600;color:#3b3a33}
.seg span.on{background:#fff;color:var(--app-green);box-shadow:0 1px 3px rgba(20,54,41,.12)}
.feed-view{position:relative;flex:1;overflow:hidden;margin-top:8px}
.feed{display:grid;gap:10px;padding:0 10px 20px}
.feed.feed-anim{transition:transform 2.6s cubic-bezier(.5,0,.2,1) .35s}
.fcard{overflow:hidden;background:var(--app-surface);border:1px solid var(--app-line);border-radius:16px;box-shadow:0 1px 2px rgba(20,54,41,.05)}
.fcard.landed{box-shadow:0 0 0 2px var(--app-green),0 10px 24px rgba(20,54,41,.16);transition:box-shadow .45s ease 2.9s}
.feed.no-anim .fcard.landed{transition:none}
.fcard-art{display:block;width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;object-position:center 40%}
.fcard-body{padding:8px 10px 10px}
.fcard h4{font:700 13.5px/1.2 var(--j-app);color:#0e1a18}
.fcard .host{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:10.5px;color:var(--app-muted)}
.fcard .host img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.fcard .row{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:10.5px;color:#2d2a24}
.fcard .row svg.i{width:12px;height:12px;color:var(--app-green)}
.fcard-act{display:flex;gap:6px;margin-top:8px}
.join{background:var(--app-green);color:#fff;border-radius:99px;padding:5px 14px;font-size:11px;font-weight:700}
.fav{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--app-line);border-radius:99px;padding:4px 9px;font-size:10.5px;font-weight:600;color:var(--app-green)}
.fav svg.i{width:12px;height:12px}

/* step 2: two ways in, side by side */
.scene-ways{gap:12px;justify-items:stretch;padding-top:26px}
.path{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;min-width:0;text-align:left}
.sheet{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:12px;box-shadow:0 14px 30px rgba(20,54,41,.10)}
.sheet-h{font:700 15px/1.2 var(--j-app);color:#0e1a18}
.sheet-host{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;color:var(--app-muted)}
.sheet-host img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.sheet-host b{color:#0e1a18;font-weight:600}
/* who is already going, shown before the button (2026-10-05) */
.going{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid var(--app-line);font-size:12px;color:var(--app-muted)}
.going b{color:#0e1a18;font-weight:600}
.going .faces img{width:24px;height:24px;border-color:var(--app-surface)}
.jfacts{display:grid;gap:4px;margin-top:8px;list-style:none}
.jfacts li{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;color:#2d2a24}
.jfacts svg.i{color:var(--app-green)}
.link-field{margin-top:8px;overflow:hidden;background:var(--app-variant);border:1px solid var(--app-line);border-radius:10px;padding:7px 10px;font-size:11.5px;color:#3b3a33;white-space:nowrap;text-overflow:ellipsis}
.invite{display:grid;gap:6px;justify-items:start}
.invite-from{display:flex;align-items:flex-end;gap:6px}
.invite-from img{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover}
.invite-text{background:#fff;border-radius:16px 16px 16px 5px;padding:8px 11px;font-size:13px;box-shadow:0 6px 16px rgba(20,54,41,.08)}
.invite-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;width:100%;background:#fff;border-radius:14px;padding:8px;box-shadow:0 6px 16px rgba(20,54,41,.08)}
.invite-art{display:block;width:52px;height:52px;border-radius:9px;object-fit:cover}
.invite-card b{display:block;font-size:13px}
.invite-card span{display:block;margin-top:2px;font-size:11px;color:var(--app-muted)}
.or{display:flex;align-items:center;gap:10px}
.or::before,.or::after{content:"";flex:1;border-top:1px dashed var(--j-line)}

/* step 3: the usual group chat, next to a plan Spotka has settled */
.scene-settled{gap:18px;justify-items:stretch;padding-top:26px}
.usual{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;align-content:start;text-align:left}
.gray{justify-self:start;max-width:100%;background:rgba(255,255,255,.65);border-radius:14px 14px 14px 4px;padding:6px 9px;font-size:11.5px;color:#6d6a63}
.gray b{display:block;margin-bottom:1px;font-size:10.5px;color:#8a857b}
.settled{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;min-width:0;text-align:left}
/* the reminder lands on top of the group chat, like a notification arriving */
.notif{position:relative;z-index:2;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;margin:0 10px -24px;background:#fff;border-radius:16px;padding:8px 11px;box-shadow:0 14px 30px rgba(20,54,41,.16);text-align:left}
.notif img{width:36px;height:36px;border-radius:9px;object-fit:cover}
.notif small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--app-muted)}
.notif b{display:block;font-size:13px}
.notif span{font-size:12.5px}
.notif em{align-self:start;font-style:normal;font-size:11px;color:var(--app-muted)}
.chat-card{background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:30px 10px 10px;box-shadow:0 14px 30px rgba(20,54,41,.10)}
.chat-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:0 2px 8px;border-bottom:1px solid var(--app-line)}
.chat-art{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover}
.chat-head b{display:block;font-size:13px}
.chat-head span{font-size:11px;color:var(--app-muted)}
/* Spotka's first message, drawn as the plan it states: when, where, who */
.plan{background:var(--app-variant);border-radius:16px 16px 16px 5px;padding:4px 10px}
.plan-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;align-items:center;padding:5px 0}
.plan-row + .plan-row{border-top:1px solid rgba(147,128,95,.18)}
.plan-ic{justify-self:center;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--app-green)}
.plan-ic svg.i{width:15px;height:15px}
.plan-row b{display:block;font-size:12.5px;line-height:1.3;color:#0e1a18}
.plan-row p span{display:block;margin-top:1px;font-size:11px;color:var(--app-muted)}
.plan-row .ok-note{display:flex;align-items:center;gap:4px;font-weight:600;color:var(--app-green)}
.ok-note svg.i{width:12px;height:12px;stroke-width:2.8}
.plan-row .maps{font-style:normal;font-weight:600;color:var(--app-green);text-decoration:underline;text-underline-offset:2px}
.faces{display:flex;justify-self:center}
.faces img,.talk img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid var(--app-variant)}
.faces img + img{margin-left:-8px}
.talk{display:flex;gap:6px;align-items:flex-end;margin-top:8px}
.talk img{border-color:var(--app-surface)}
.bubble{max-width:88%;background:#fff;border:1px solid var(--app-line);border-radius:16px 16px 16px 5px;padding:8px 11px;font-size:12.5px;line-height:1.4}

/* The three steps are one sequence (Sonia, 2026-09-28: "make it visually
   more clear that this is a 3 step process instead of disconnected
   slides"): one section, an ordered list, the same layout for every step,
   and a numbered line down the left joining 1 to 2 to 3. Only the other
   sections (Fern, the rules, your data) differ from each other. */
.steps-rail{--step-gap:clamp(40px,7svh,72px);list-style:none;display:grid;margin:0}
.steps-rail .hstep{position:relative;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:22px;padding-bottom:var(--step-gap)}
.steps-rail .hstep:last-child{padding-bottom:0}
.step-mark{grid-column:1;grid-row:1 / span 2;position:relative;align-self:stretch}
.step-mark b{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--j-accent);color:#fff;font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:23px;line-height:1}
.steps-rail .hstep:not(:last-child) .step-mark::after{content:"";position:absolute;left:19px;top:46px;bottom:calc(6px - var(--step-gap));width:2px;border-radius:2px;background:var(--j-light)}
.steps-rail .hstep-text,.steps-rail .scene{grid-column:2}
.usual.paper{background:var(--j-note);border:1px solid var(--j-line);padding:14px 14px 16px;align-self:start}
/* Fern's chat sits straight on the page, without the green behind it */
.scene.bare{background:none;padding:0}

/* ---------- 3. Fern ---------- */
.fern{display:grid;gap:26px}
.fern-face{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--j-sheet);box-shadow:0 0 0 1px var(--j-line);margin-bottom:12px}
.fern-facts{display:grid;margin-top:18px;border-bottom:1px solid var(--j-line);max-width:34em}
.fern-facts div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--j-line)}
.fern-facts dd{font-size:15px;line-height:1.45;color:var(--j-body)}
/* the way to talk to her now: opens the Ask Fern chat (shown only when it is on) */
.fern-ask{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px;max-width:34em}
.fern-ask[hidden]{display:none}
.fern-ask p{flex:1 1 15em;font-size:15px;line-height:1.45;color:var(--j-head)}
.more-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
.more-links a{color:var(--j-accent)}
.scene-fern{padding:26px 20px}
/* The Fern chat is a small drawing beside the text, not the main event
   (Sonia, 2026-10-02: "the chat box is a little big"). */
.card{position:relative;width:100%;max-width:330px;background:var(--app-surface);border:1px solid var(--app-line);border-radius:18px;padding:14px 14px 13px;box-shadow:0 12px 28px rgba(20,54,41,.09);text-align:left}
.card-h{font:500 16.5px/1.1 var(--j-app-serif);letter-spacing:-.01em;color:#0e1a18}
.convo{display:grid;gap:6px;margin-top:11px}
.msg{display:flex;gap:7px;align-items:flex-end}
.msg img.f{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover}
.msg .text{background:var(--app-variant);border-radius:14px 14px 14px 4px;padding:7px 10px;font-size:12px;line-height:1.42;max-width:84%}
.msg.me{justify-content:flex-end}
.msg.me .text{background:var(--app-green);color:#fff;border-radius:14px 14px 4px 14px}
/* Fern's tappable answers, shown while she asks: small hairline pills, so
   they read as options and not as messages; Kasia's pick is filled and
   ticked (Sonia, 2026-10-02: "smaller, more distinct but delicate"). */
.fchips{display:flex;flex-wrap:wrap;gap:5px;padding:1px 0 2px 29px}
.fchips span{display:inline-flex;align-items:center;gap:4px;font:500 10.5px/1 var(--j-app);letter-spacing:.01em;padding:5px 9px;border-radius:999px;border:1px solid rgba(27,67,50,.32);background:transparent;color:var(--app-green)}
.fchips .on{background:var(--app-green);border-color:var(--app-green);color:#fff}
.fchips .on::before{content:"";width:7px;height:4px;margin:-2px 1px 0 0;border:solid currentColor;border-width:0 0 1.4px 1.4px;transform:rotate(-45deg)}
/* What the talk gets you: the first idea, with the reason it is there. */
.payoff{margin-top:12px;padding-top:10px;border-top:1px solid var(--app-line)}
.payoff-k{font:600 9.5px/1 var(--j-app);letter-spacing:.08em;text-transform:uppercase;color:var(--app-muted)}
.payoff-ev{display:flex;gap:10px;align-items:center;margin-top:8px;padding:8px;border-radius:12px;background:var(--app-soft)}
.payoff-ev img{flex:none;width:46px;height:46px;border-radius:9px;object-fit:cover}
.payoff-ev b{display:block;font:600 12.5px/1.25 var(--j-app);color:#0e1a18}
.payoff-ev small{display:block;margin-top:2px;font:400 11px/1.3 var(--j-app);color:var(--app-muted)}
.payoff-ev em{display:block;margin-top:4px;font:italic 400 11.5px/1.3 var(--j-app-serif);color:var(--app-green)}

/* ---------- 4 and 5. the rules and your data ---------- */
.tiles{list-style:none;display:grid;gap:12px;margin-top:clamp(14px,2.4svh,22px)}
.tile{background:var(--j-sheet);border:1px solid var(--j-line);padding:clamp(14px,2.2svh,18px)}
.tile span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--j-soft)}
.tile svg{width:19px;height:19px;fill:none;stroke:var(--j-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:clamp(22px,min(1.9vw,3.4svh),27px);line-height:.95;text-transform:lowercase;color:var(--j-head);margin-top:10px}
.tile p{font-size:14px;line-height:1.5;color:var(--j-body);margin-top:6px}
/* the rules, calm (Sonia: "this is visually too busy"): the offer is one
   sentence in the intro, the four rules one quiet list beside it */
.rules-grid{display:grid;gap:28px}
.rules-intro .j-lede{color:var(--j-head);max-width:26em}
.rules-small{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--j-body);max-width:32em}
.rules-list{list-style:none;border-bottom:1px solid var(--j-line)}
.rule{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;padding:18px 0;border-top:1px solid var(--j-line)}
.rule-ic{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--j-soft)}
.rule-ic svg{width:21px;height:21px;fill:none;stroke:var(--j-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rule h3,.rule p{grid-column:2}
.rule h3{padding-top:3px;font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:clamp(21px,min(1.7vw,3.2svh),25px);line-height:1;text-transform:lowercase;color:var(--j-head)}
.rule p{font-size:15px;line-height:1.5;color:var(--j-body)}
.who-runs{font-size:14px;line-height:1.55;color:var(--j-body);margin-top:16px;max-width:52em}

/* ---------- 6. join the beta: its own card, taped in ---------- */
.join-grid{display:grid;gap:28px;align-items:center}
.join-card{position:relative;background:var(--j-soft);border:1px solid var(--j-line);padding:clamp(24px,3svh,36px) clamp(20px,2.4vw,34px) clamp(20px,2.6svh,30px);box-shadow:0 1px 1px color-mix(in srgb,var(--j-head) 8%,transparent),0 20px 40px -26px color-mix(in srgb,var(--j-head) 55%,transparent)}
.join-card .j-h3{color:var(--j-head)}
.join-note{margin-top:10px;font-size:16px;line-height:1.5;color:var(--j-chip-ink)}
.join-card .j-label{color:var(--j-chip-ink)}
.join-form{display:block;margin-top:clamp(16px,2.4svh,24px)}
.join-form label{display:block}
.line{display:flex;align-items:center;gap:10px;margin-top:8px}
.line input{flex:1;min-width:0;min-height:52px;border:1.5px solid var(--j-line);border-radius:999px;background:#fff;font-family:var(--j-text);font-size:17px;color:var(--j-head);padding:0 20px}
.line input::placeholder{color:var(--j-body)}
.line input:focus{outline:none;border-color:var(--j-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--j-accent) 22%,transparent)}
.line .j-btn{min-height:52px}
.fine{margin-top:12px;font-size:14px;color:var(--j-chip-ink)}
.tape{position:absolute;z-index:2;left:50%;top:-13px;width:92px;height:26px;margin-left:-46px;background:color-mix(in srgb,var(--j-line) 70%,var(--j-page));opacity:.92;box-shadow:0 1px 1.5px color-mix(in srgb,var(--j-head) 18%,transparent);clip-path:polygon(0 12%,3% 0,97% 6%,100% 26%,97% 50%,100% 76%,97% 100%,3% 94%,0 70%,3% 44%);transform:rotate(-2deg);pointer-events:none}

/* ---------- phone widths ---------- */
/* on a phone the steps stack, so the usual chat keeps only its first and last line */
@media(max-width:699px){
  .gray.mid{display:none}
  .jsheet{padding:28px 16px 34px}
  .line{flex-wrap:wrap}
  .line .j-btn{width:100%}
}

@media(min-width:700px){
  .tiles{grid-template-columns:1fr 1fr}
  .scene{padding:32px 28px 24px}
  .scene-phone{padding-bottom:0}
  .scene-ways,.scene-settled{padding-top:32px}
  .scene-ways{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:start}
  .scene-ways .or{flex-direction:column;align-self:center}
  .scene-ways .or::before,.scene-ways .or::after{flex:none;height:44px;border-top:0;border-left:1px dashed var(--j-line)}
  .scene-settled{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}

@media(min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:center}
  .steps-rail .hstep{grid-template-columns:44px minmax(0,.78fr) minmax(0,1.22fr);column-gap:40px;align-items:start}
  .steps-rail .step-mark{grid-row:1}
  .steps-rail .step-mark b{width:44px;height:44px;font-size:25px}
  .steps-rail .hstep:not(:last-child) .step-mark::after{left:21px;top:50px}
  .steps-rail .hstep-text{grid-column:2;padding-top:8px}
  .steps-rail .scene{grid-column:3}
  .fern.flip > .scene{order:-1}
  .fern{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .join-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .rules-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
}

/* Sections take their natural height (Sonia, 2026-09-28: "not all the
   slides need to be viewport ... it looks funny with just a heading"):
   no forced window height and no scroll snap, just even room above and
   below each one on a computer. The type still sizes by the window's
   height as well as its width (svh), so nothing grows past a short
   screen. */
@media (min-width:900px){
  .jsheet{padding-block:clamp(48px,8svh,88px)}
  .jsheet.j-hero{padding-top:clamp(32px,5svh,56px)}
}

/* ---------- terms and data, each its own shape (Sonia, 2026-10-02) ----------
   "these 2 sides look so similar": the terms sit on one white card, the data
   is four open columns split by thin lines (she chose look 1 of three). */
#terms .rules-list{background:#fffdf9;border:1px solid var(--j-line);border-radius:4px;padding:4px 26px;box-shadow:0 12px 30px rgba(20,54,41,.08)}
#terms .rule:first-child{border-top:0}
#data .tiles{gap:0;border-top:1px solid var(--j-line)}
#data .tile{background:none;border:0;border-bottom:1px solid var(--j-line);padding:18px 0;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center}
#data .tile h3{margin-top:0}
#data .tile p{grid-column:1 / -1;margin-top:8px}
@media(min-width:700px){
  #data .tile{padding:20px 24px 20px 0}
  #data .tile:nth-child(odd){padding-right:24px}
  #data .tile:nth-child(even){padding-left:24px;border-left:1px solid var(--j-line)}
}
@media(min-width:940px){
  #data .tiles{border-top:0}
  #data .tile,#data .tile:nth-child(odd),#data .tile:nth-child(even){border-bottom:0;border-left:0;padding:6px 22px;align-items:start}
  #data .tile:first-child{padding-left:0}
  #data .tile + .tile{border-left:1px solid var(--j-line)}
}

/* ---------- TRIAL: a quieter, more delicate data panel (2026-10-02) ----------
   Sonia: "make the slides a little bit more distinct ... maybe the data panel
   can look different and more delicate than the rest? shouldn't be crazy".
   Shown with ?data=fine in the address; without it the page is unchanged.
   Centred and narrower where every other section is left-aligned, a smaller
   heading, the four points in one thin frame, small label-style headings and
   bare line icons instead of filled circles. Delete the losing version once
   Sonia picks. */
html[data-trial="fine"] #data{text-align:center}
html[data-trial="fine"] #data .j-h2{font-size:clamp(30px,2.8vw,40px)}
html[data-trial="fine"] #data .j-lede{font-size:15.5px;margin-inline:auto}
html[data-trial="fine"] #data .tiles{max-width:860px;margin:26px auto 0;display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--j-line);border-radius:4px;text-align:left}
html[data-trial="fine"] #data .tile,html[data-trial="fine"] #data .tile:nth-child(odd),html[data-trial="fine"] #data .tile:nth-child(even),html[data-trial="fine"] #data .tile + .tile{display:block;padding:20px 24px;border:0;border-bottom:1px solid var(--j-line)}
html[data-trial="fine"] #data .tile:last-child{border-bottom:0}
html[data-trial="fine"] #data .tile span{display:inline-block;width:auto;height:auto;background:none;border-radius:0;vertical-align:-3px;margin-right:8px}
html[data-trial="fine"] #data .tile svg{width:15px;height:15px;stroke-width:1.6}
html[data-trial="fine"] #data .tile h3{display:inline;margin:0;font-family:var(--j-mono);font-stretch:75%;font-weight:500;font-size:11.5px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--j-accent)}
html[data-trial="fine"] #data .tile p{margin-top:8px;font-size:14px;line-height:1.55}
html[data-trial="fine"] #data .who-runs{margin:18px auto 0;max-width:46em;font-size:13px;opacity:.85}
html[data-trial="fine"] #data .more-links{justify-content:center}
@media(min-width:700px){
  html[data-trial="fine"] #data .tiles{grid-template-columns:1fr 1fr}
  html[data-trial="fine"] #data .tile:nth-child(odd){border-right:1px solid var(--j-line)}
  html[data-trial="fine"] #data .tile:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- TRIAL B: the data as a quiet list (2026-10-02) ----------
   Sonia liked ?data=fine ("good direction, give me one more option").
   ?data=ledger: centred like fine, but no frame and no icons at all. One
   narrow column of four rows split by hairlines, the small label on the left
   and the sentence on the right, like the fine print on a ticket. */
html[data-trial="ledger"] #data{text-align:center}
html[data-trial="ledger"] #data .j-h2{font-size:clamp(30px,2.8vw,40px)}
html[data-trial="ledger"] #data .j-lede{font-size:15.5px;margin-inline:auto}
html[data-trial="ledger"] #data .tiles{display:block;max-width:720px;margin:30px auto 0;border-top:1px solid var(--j-line);text-align:left}
html[data-trial="ledger"] #data .tile,html[data-trial="ledger"] #data .tile:nth-child(odd),html[data-trial="ledger"] #data .tile:nth-child(even),html[data-trial="ledger"] #data .tile + .tile,html[data-trial="ledger"] #data .tile:first-child{display:grid;grid-template-columns:1fr;row-gap:6px;padding:16px 0;border:0;border-bottom:1px solid var(--j-line);background:none}
html[data-trial="ledger"] #data .tile span{display:none}
html[data-trial="ledger"] #data .tile h3{margin:0;font-family:var(--j-mono);font-stretch:75%;font-weight:500;font-size:11.5px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--j-accent)}
html[data-trial="ledger"] #data .tile p{grid-column:auto;margin:0;font-size:14.5px;line-height:1.55}
html[data-trial="ledger"] #data .who-runs{margin:20px auto 0;max-width:46em;font-size:13px;opacity:.85}
html[data-trial="ledger"] #data .more-links{justify-content:center}
@media(min-width:700px){
  html[data-trial="ledger"] #data .tile,html[data-trial="ledger"] #data .tile:nth-child(odd),html[data-trial="ledger"] #data .tile:nth-child(even),html[data-trial="ledger"] #data .tile + .tile,html[data-trial="ledger"] #data .tile:first-child{grid-template-columns:190px minmax(0,1fr);column-gap:28px;align-items:baseline;padding:18px 0}
}

/* ---------- the closing join section on a dark green panel (2026-10-02) ----------
   Sonia: "maybe we should try doing the bottom slide for joining a different
   background color?", then "i like the dark green". The panel sits inside the
   section with the paper showing around it (sections themselves never get a
   solid background); light words on the green, the form card white. */
.hiw-close .join-grid{border-radius:6px;padding:clamp(36px,6svh,64px) clamp(22px,4vw,56px);background:#1b4332;box-shadow:0 24px 48px -30px rgba(20,54,41,.6)}
.hiw-close .join-grid > div:first-child .j-label{color:#a8cdb0}
.hiw-close .join-grid > div:first-child .j-h2{color:#f6f1e7}
.hiw-close .join-grid > div:first-child .j-lede{color:#d9e4d6}
.hiw-close .join-card{background:#fffdf9;border-color:transparent}

/* ---------- phone checks from directions/ROLLOUT.md (2026-10-02) ----------
   Standalone links are at least 44px tall to tap (links inside a sentence
   stay inline). On phones every paragraph of body text is at least 16px;
   the drawings of the app keep their own small sizes. */
.hero-cta .j-link,.more-links a,.rules-small .j-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:699px){
  .jsheet :is(p,dd,li):not(.j-label):not(.mc-why-h):not(.scene *):not(.scene){font-size:16px}
}

/* Fern's section: what she heard, above the first idea */
.scene-fern .heard{margin-top:8px;font:500 17px/1.35 var(--j-app-serif);color:#0e1a18}
/* step 1: Fern's chat card in the step's frame */
.scene-chat{padding:26px 20px}

/* ---------- Fern: how the matching works, on one screen (2026-10-02) ----------
   Sonia: "should fit in vp, too big of a slide for what it is". The three
   things Fern learns are rows on the paper split by hairlines (no bordered
   cards: Home's frames read as "tacky"); the plan and its reasons sit beside
   them. */
.match-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4svh,40px)}
.match-label{display:flex;align-items:center;gap:10px}
.match-face{width:34px;height:34px;border-radius:50%;object-fit:cover}
.match-text .j-lede{max-width:30em}
.match-inputs{list-style:none;margin-top:clamp(16px,2.6svh,26px);border-top:1px solid var(--j-line)}
.mi{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding:clamp(10px,1.7svh,16px) 0;border-bottom:1px solid var(--j-line)}
.mi-n{color:var(--j-accent);padding-top:.4em}
.mi-h{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:clamp(21px,1.75vw,26px);line-height:1;text-transform:lowercase;color:var(--j-head)}
.mi p:not(.mi-chips){margin-top:4px;font-size:15px;line-height:1.45;color:var(--j-body)}
.mi .mi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mi-chips span{font:500 12.5px/1 var(--j-app);padding:6px 11px;border-radius:999px;background:var(--j-soft);color:#1b4332}
.match-result{display:grid;align-content:start;gap:10px}
.match-card{margin:0;background:#fffdf9;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(20,54,41,.06),0 22px 44px -28px rgba(20,54,41,.45)}
.mc-art{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.mc-body{padding:14px 18px 16px}
.mc-title{display:block;font:600 19px/1.2 var(--j-app);color:#0e1a18}
.mc-meta{display:block;margin-top:3px;font:400 13.5px/1.4 var(--j-app);color:var(--j-body)}
.mc-why-h{margin-top:12px;font-family:var(--j-mono);font-stretch:75%;font-size:11.5px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--j-accent)}
.mc-why{list-style:none;display:grid;gap:5px;margin-top:6px}
.mc-why li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;font-size:15px;line-height:1.4;color:var(--j-body)}
.mc-why b{color:var(--j-head);font-weight:600}
.mc-steer{display:flex;gap:8px;margin-top:12px}
.mc-steer span{font:500 12.5px/1 var(--j-app);padding:7px 12px;border-radius:999px;border:1px solid rgba(27,67,50,.28);color:#1b4332}
.match-note{font-size:14.5px;line-height:1.5;color:var(--j-body)}
.match-result .fern-ask{margin-top:4px}
@media(min-width:900px){
  .match-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,72px);align-items:center}
}

/* ---------- the drawings' small stories (2026-10-02) ----------
   Sonia: "make the fern here a video; apply small animations to the visual
   stuff but not overwhelming, make sure it makes sense". Each part waits for
   its turn (--d, in seconds) and rises in once; a button is pressed; a chip
   gets picked; the reminder drops in from the top. Hidden only while motion
   is on (html.j-motion, set by directions/journal-motion.js), so with
   reduce motion, print or ?embed=1 everything is simply there. */
.j-motion [data-play] [data-seq]{opacity:0}
.j-motion [data-play].play [data-seq]{animation:seq-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 1s)}
.j-motion [data-play].play [data-seq].drop{animation-name:seq-drop}
.j-motion [data-play].play .pulse{animation:seq-press .45s ease both;animation-delay:calc(var(--d,0) * 1s)}
.j-motion [data-play]:not(.play) .pick{background:transparent;color:#1b4332;border-color:rgba(27,67,50,.32)}
.j-motion [data-play].play .pick{animation:seq-pick .3s ease both;animation-delay:calc(var(--d,0) * 1s)}
@keyframes seq-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes seq-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes seq-press{0%,100%{transform:none}45%{transform:scale(.93)}}
@keyframes seq-pick{from{background:transparent;color:#1b4332;border-color:rgba(27,67,50,.32)}to{background:#1b4332;color:#fff;border-color:#1b4332}}
.replay{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:0 4px;border:0;background:none;font:500 13px/1 var(--j-app);color:#1b4332;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.replay[hidden]{display:none}
.replay::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}

/* ---------- TRIAL v2 (howitworks-v2.html, 2026-10-05) ----------
   Sonia: "review again whether this is compelling to people and clear",
   then "yes build 1-5 as a trial". Classes used only by howitworks-v2.html,
   so howitworks.html is unchanged. Once she picks, the winner is folded
   into howitworks.html and the other is deleted. */
/* step 1 spans both columns: what you say, then what you get */
@media(min-width:940px){
  .steps-rail .hstep.s-wide .hstep-text{grid-column:2 / -1;max-width:40em}
  .steps-rail .hstep.s-wide .scene{grid-column:2 / -1;grid-row:2}
  .steps-rail .hstep.s-wide .step-mark{grid-row:1 / span 2}
}
.scene-flow{display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;align-items:center;gap:14px;padding:26px 20px 18px}
.scene-flow .flow-chat{justify-self:center}
.flow-arrow{justify-self:center;width:28px;height:28px;position:relative}
.flow-arrow::before{content:"";position:absolute;left:13px;top:2px;bottom:6px;width:2px;background:#1b4332;border-radius:2px}
.flow-arrow::after{content:"";position:absolute;left:8px;bottom:3px;width:8px;height:8px;border:solid #1b4332;border-width:0 2px 2px 0;transform:rotate(45deg)}
.flow-get{display:grid;gap:12px;width:100%;max-width:360px;justify-self:center;text-align:left}
.flow-k{font-family:var(--j-mono);font-stretch:75%;font-size:11.5px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--j-accent)}
.heard{background:var(--app-surface);border-radius:16px;padding:12px 14px 12px;box-shadow:0 10px 24px -18px rgba(20,54,41,.4)}
.heard-list{display:grid;gap:8px;margin-top:8px}
.heard-list div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:baseline}
.heard-list dt{font:500 12px/1.3 var(--j-app);color:var(--app-muted)}
.heard-list dd{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.heard-list dd span{font:500 12.5px/1 var(--j-app);padding:6px 10px;border-radius:999px;background:var(--app-soft);color:#1b4332}
.heard-list dd .hot{background:#1b4332;color:#fff}
.flow-plan{display:grid;grid-template-columns:minmax(0,1fr);background:var(--app-surface);border-radius:16px;overflow:hidden;box-shadow:0 14px 30px -20px rgba(20,54,41,.5)}
.fp-art{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.fp-body{padding:11px 14px 13px}
.fp-title{display:block;margin-top:4px;font:600 16px/1.2 var(--j-app);color:#0e1a18}
.fp-meta{display:block;margin-top:2px;font:400 12.5px/1.35 var(--j-app);color:var(--app-muted)}
.fp-why{list-style:none;display:grid;gap:4px;margin-top:8px}
.fp-why li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;align-items:start;font:400 13.5px/1.35 var(--j-app);color:var(--j-body)}
.fp-why svg.tick{width:18px;height:18px;margin-top:-1px}
.fp-why b{color:var(--j-head);font-weight:600}
.fp-steer{display:flex;gap:6px;margin-top:10px}
.fp-steer span{font:500 12px/1 var(--j-app);padding:6px 11px;border-radius:999px;border:1px solid rgba(27,67,50,.28);color:#1b4332}
.scene-flow .replay{grid-column:1 / -1;justify-self:center}
@media(min-width:800px){
  .scene-flow{grid-template-columns:minmax(0,1.05fr) 32px minmax(0,1fr);gap:18px;padding:30px 28px 18px}
  /* "rotate", not "transform": the fade-in ends on transform:none */
  .flow-arrow{rotate:-90deg}
}
/* the proof line under the steps: real supply, checked */
.proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:clamp(8px,2svh,20px);padding-top:clamp(18px,3svh,26px);border-top:1px solid var(--j-line)}
.proof-n{font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--j-head);max-width:34em}
.proof-n b{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:1.5em;line-height:1;color:var(--j-accent)}
.proof-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.proof-act .j-link{display:inline-flex;align-items:center;min-height:44px}
/* good to know: four short items in one quiet row, hairlines between */
.good-h2{font-size:clamp(30px,2.8vw,40px)}
.good{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(16px,2.6svh,24px);border-top:1px solid var(--j-line)}
.good li{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-bottom:1px solid var(--j-line)}
.good h3{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:clamp(21px,1.7vw,24px);line-height:1;text-transform:lowercase;color:var(--j-head)}
.good p{font-size:15px;line-height:1.5;color:var(--j-body)}
.good li > .j-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:14px}
@media(min-width:700px){
  .good{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}
@media(min-width:1100px){
  .good{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--j-line)}
  .good li{border-bottom:0;padding:18px 22px 10px}
  .good li:first-child{padding-left:0}
  .good li + li{border-left:1px solid var(--j-line)}
}

/* trial v2, after the review (2026-10-05) */
/* "What Fern heard": labels go above the pills when the card is narrow, and no pill breaks */
.heard{container-type:inline-size}
.heard-list dd span,.fp-steer span{white-space:nowrap}
.fp-steer{flex-wrap:wrap}
.heard-list div{grid-template-columns:104px minmax(0,1fr)}
@container (max-width:340px){.heard-list div{grid-template-columns:1fr;gap:4px}}
/* the step 1 panel plays in about six seconds, not twelve */
.j-motion #fern-flow.play [data-seq],.j-motion #fern-flow.play .pick{animation-delay:calc(var(--d,0) * .5s)}
/* the two columns sized to their content and centred */
@media(min-width:800px){.scene-flow{grid-template-columns:minmax(0,330px) 32px minmax(0,360px);justify-content:center}}
/* good to know: every link on the cell's bottom line */
.good li > .j-link{margin-top:auto}
/* the join card: the button drops under the email field when there is not room for both */
.join-form .line{flex-wrap:wrap}
.join-form .line input{flex:1 1 200px;min-width:0}

/* trial v2, aligned with the app (2026-10-05) */
.sheet-count{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--app-line);font-size:12px;color:#2d2a24}
.sheet-count svg.i{color:var(--app-green)}
.going.after{margin:0;padding:8px 10px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-surface);color:#2d2a24}
.heard-s{margin-top:8px;font:500 15px/1.35 var(--j-app-serif);color:#0e1a18}
.heard-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.heard-pills span{font:500 12.5px/1 var(--j-app);padding:6px 10px;border-radius:999px;background:var(--app-soft);color:#1b4332;white-space:nowrap}
.fp-host{display:flex;align-items:center;gap:6px;margin-top:6px;font:400 12.5px/1.3 var(--j-app);color:var(--app-muted)}
.fp-host img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.fp-host b{color:#0e1a18;font-weight:600}
.fp-reason{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;margin-top:10px;padding:9px 10px;border-radius:12px;background:var(--app-soft)}
.fp-reason img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.fp-reason p{font:400 12.5px/1.4 var(--j-app);color:#2d2a24}
.fp-reason p b{font-weight:600;color:#0e1a18}
.fp-reason .fp-ask{margin-top:6px;font-size:11.5px;color:var(--app-muted)}
.fp-reason .fp-steer{margin-top:7px}
.fp-steer span{display:inline-flex;align-items:center;gap:4px;background:var(--app-surface)}
.fp-steer svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Meet Fern: text and facts beside the app's Meet Fern screen */
.meet-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,4svh,40px);align-items:center}
.meet-text .j-lede{max-width:30em}
.meet-facts{display:grid;margin-top:clamp(14px,2.4svh,22px);border-bottom:1px solid var(--j-line);max-width:36em}
.meet-facts div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--j-line)}
.meet-facts dd{font-size:15px;line-height:1.45;color:var(--j-body)}
.meet-text .fern-ask{margin-top:18px}
.scene-meet{padding:30px 20px}
.meet-screen{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:300px;padding:26px 20px 22px;border-radius:22px;background:var(--app-surface);box-shadow:0 14px 30px -20px rgba(20,54,41,.5);text-align:center}
.meet-face{width:84px;height:84px;border-radius:50%;object-fit:cover}
.meet-t{font:500 22px/1.1 var(--j-app-serif);color:#0e1a18}
.meet-s{font:400 13.5px/1.4 var(--j-app);color:var(--app-muted);max-width:16em}
.meet-b{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;border-radius:999px;border:1px solid rgba(27,67,50,.3);font:600 13.5px/1 var(--j-app);color:#1b4332}
.meet-b.on{background:#1b4332;border-color:#1b4332;color:#fff}
.meet-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:900px){.meet-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,72px)}}
@media(max-width:699px){.meet-facts div{grid-template-columns:1fr;gap:2px}}

/* app-alignment pass 2 (2026-10-05) */
.chat-letter{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--app-soft);font:600 13px/1 var(--j-app);color:#1b4332}
.going.after{justify-content:flex-start}

/* second review round (2026-10-05) */
.fp-steer span{white-space:normal}
.going.after{flex-wrap:wrap}

/* step 1 fits one screen on a computer (Sonia, 2026-10-05: "these should fit
   in vp"): the same words, a tighter drawing; "Play again" sits in the space
   under the chat instead of adding a row */
@media(min-width:940px){
  .steps-rail .hstep.s-wide{row-gap:14px}
  .scene-flow{padding:20px 26px 18px;gap:16px;align-items:start}
  .scene-flow .flow-chat{grid-column:1;grid-row:1;align-self:start;padding:11px 12px 10px}
  .scene-flow .flow-get{grid-column:3;grid-row:1}
  .scene-flow .flow-chat .card-h{font-size:15px}
  .scene-flow .flow-chat .convo{gap:5px;margin-top:8px}
  .scene-flow .flow-chat .msg img.f{width:22px;height:22px}
  .scene-flow .flow-chat .msg .text{font-size:11.5px;line-height:1.36;padding:6px 9px}
  .scene-flow .flow-chat .fchips{padding-left:29px}
  .scene-flow .flow-chat .fchips span{font-size:10px;padding:4px 8px}
  .scene-flow .flow-arrow{grid-column:2;grid-row:1;align-self:center}
  .scene-flow .flow-get{gap:10px}
  .scene-flow .heard{padding:10px 12px}
  .scene-flow .heard-s{font-size:14px;margin-top:6px}
  .scene-flow .heard-pills{margin-top:7px}
  .scene-flow .fp-art{aspect-ratio:16/5}
  .scene-flow .fp-body{padding:9px 12px 11px}
  .scene-flow .fp-title{font-size:15px}
  .scene-flow .fp-host{margin-top:4px}
  .scene-flow .fp-reason{margin-top:8px;padding:8px 9px}
  .scene-flow .fp-reason p{font-size:11.5px;line-height:1.38}
  .scene-flow .fp-reason .fp-ask{margin-top:4px;font-size:10.5px}
  .scene-flow .fp-steer{gap:5px;margin-top:6px}
  .scene-flow .fp-steer span{font-size:10.5px;padding:4px 8px}
  .scene-flow .replay{grid-column:1;grid-row:1;align-self:end;justify-self:center;min-height:36px}
}

/* the Meet Fern drawing is a link to the sign-up form, never a dead button
   (review 2026-10-05) */
.meet-link{display:block;width:100%;max-width:300px;color:inherit;text-decoration:none;border-radius:22px}
.meet-link .meet-screen{max-width:none}
.meet-link:focus-visible{outline:2px solid #1b4332;outline-offset:4px}

/* ---------- TRIAL v3 (howitworks-v3.html, 2026-10-05) ----------
   Sonia: "is this still not too complex the page? i mean the visuals?",
   then "build quickly". One picture per step showing one moment, the final
   picture from the start, nothing under 13px inside a picture, words on top
   and the picture under for all three steps. Scoped to .hiw-v3 and t3-
   classes, so howitworks.html and v2 are unchanged. */
.hiw-v3 .t3-proof{margin:0 0 clamp(26px,5svh,48px);padding:0 0 clamp(18px,3svh,26px);border-top:0;border-bottom:1px solid var(--j-line)}
/* step 1: the chat, then the one plan Fern picked and her reason, readable */
.t3-chat-head{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--app-line)}
.t3-chat-head img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.t3-chat-head p{display:grid;line-height:1.2;margin:0}
.t3-chat-head b{font:600 15px/1.2 var(--j-app);color:#0e1a18}
.t3-chat-head span{font:400 12.5px/1.3 var(--j-app);color:var(--app-muted)}
.hiw-v3 .scene-flow .flow-chat .convo{margin-top:10px}
.hiw-v3 .scene-flow .flow-chat .msg .text{font-size:13px;line-height:1.4}
.hiw-v3 .scene-flow .flow-chat .fchips span{font-size:11.5px}
.t3-plan{justify-self:center;width:100%;max-width:340px;background:var(--app-surface);border-radius:18px;overflow:hidden;box-shadow:0 14px 30px -20px rgba(20,54,41,.5);text-align:left}
.t3-plan-art{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.t3-plan-body{display:grid;gap:3px;padding:12px 16px 2px}
.t3-plan-body b{font:600 18px/1.2 var(--j-app);color:#0e1a18}
.t3-plan-body span{font:400 14px/1.35 var(--j-app);color:var(--app-muted)}
.t3-why{display:flex;gap:10px;align-items:flex-start;margin:12px 12px 14px;padding:12px 14px;border-radius:14px;background:var(--app-soft);font:400 16px/1.4 var(--j-app);color:#0e1a18}
.t3-why img{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover}
.t3-why b{font-weight:600}
@media(min-width:800px){.hiw-v3 .scene-flow .t3-plan{grid-column:3;grid-row:1;align-self:center}}
/* step 2: join a plan, a big hand-drawn "or", host your own (as on Home) */
.t3-ways{display:grid;gap:10px;justify-items:stretch;text-align:left}
.t3-way{display:grid;gap:8px;width:100%;max-width:380px;justify-self:center;min-width:0}
.t3-way-h{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:22px;line-height:1;text-transform:lowercase;color:var(--j-head);margin:0 0 2px 2px}
.t3-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:16px;background:var(--app-surface);box-shadow:0 10px 24px -18px rgba(20,54,41,.45)}
.t3-pic{width:76px;height:76px;border-radius:11px;object-fit:cover}
.t3-card-b{display:grid;gap:3px;min-width:0;font-family:var(--j-app)}
.t3-card-b b{font-weight:600;font-size:15px;line-height:1.2;color:#0e1a18}
.t3-m{font-size:13.5px;color:var(--app-muted)}
.t3-in{display:inline-flex;align-items:center;gap:5px;justify-self:start;margin-top:2px;padding:3px 10px 3px 7px;border-radius:999px;background:var(--app-soft);color:#1b4332;font-weight:600;font-size:13px}
.t3-in .i{width:15px;height:15px}
.t3-going{display:flex;align-items:center;gap:10px;margin:0;padding:0 4px;font:400 14px/1.3 var(--j-app);color:var(--j-body)}
.t3-going b{font-weight:600;color:#0e1a18}
.t3-going .faces{justify-self:start}
.t3-going .faces img{width:28px;height:28px}
.t3-act{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.t3-tag{font-style:normal;font-size:13px;color:var(--app-muted);background:#e9e5de;border-radius:8px;padding:2px 8px}
.t3-btn{font-style:normal;font-weight:700;font-size:13px;background:#1b4332;color:#fff;border-radius:10px;padding:5px 14px}
.t3-sent{display:flex;justify-content:flex-end;margin:0}
.t3-sent span{max-width:85%;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--app-green);color:#fff;font:400 14px/1.4 var(--j-app)}
.t3-or{justify-self:center;align-self:center;margin:2px 0;font-family:var(--j-hand);color:var(--j-pen-text);font-size:36px;line-height:1;transform:rotate(-6deg)}
@media(min-width:760px){.t3-ways{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center}}
/* step 3: the usual chat, readable and whole on phones too, next to one card */
.hiw-v3 .gray{font-size:13px}
.hiw-v3 .gray b{font-size:12px}
.hiw-v3 .gray.mid{display:block}
.t3-with{display:grid;gap:8px;align-content:start;min-width:0}
.t3-pc{display:grid;gap:10px;padding:12px 14px 14px;border-radius:18px;background:var(--app-surface);box-shadow:0 14px 30px -20px rgba(20,54,41,.5);font-family:var(--j-app);text-align:left}
.t3-remind{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin:0;padding:4px 11px 4px 8px;border-radius:999px;background:#1b4332;color:#fff;font-size:13px;font-weight:600}
.t3-remind .i{width:15px;height:15px;stroke:#fff}
.t3-pc-h{display:grid;gap:2px;margin:0;padding-bottom:9px;border-bottom:1px solid var(--app-line)}
.t3-pc-h b{font-weight:600;font-size:16px;color:#0e1a18}
.t3-pc-h span{font-size:13px;color:var(--app-muted)}
.t3-rows{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.t3-rows li{display:flex;align-items:center;gap:10px;font-size:14.5px;line-height:1.3;color:#0e1a18;font-weight:500}
.t3-rows .i{flex:none;width:18px;height:18px}
.t3-rows .faces{flex:none;justify-self:start}
.t3-rows .faces img{width:24px;height:24px;border-color:var(--app-surface)}
.t3-talk{display:flex;align-items:flex-end;gap:8px;margin:2px 0 0}
.t3-talk img{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover}
.t3-talk span{background:var(--app-variant);border-radius:14px 14px 14px 4px;padding:7px 11px;font-size:14px;line-height:1.4}
.t3-act{flex-wrap:wrap}
.t3-tag,.t3-btn,.t3-in{white-space:nowrap}

/* ---------- TRIAL v4 (howitworks-v4.html, 2026-10-05) ----------
   Sonia: "number line from the left, then image, then text on the side",
   "the slides being different sizes throw me off". The rail, one picture
   in a frame of one size, the words beside it; one moment per frame.
   Scoped to .hiw-v4 (the page also carries .hiw-v3 for the shared pieces). */
.hiw-v4 .t4-frame{display:grid;place-items:center;align-content:center}
.hiw-v4 .t4-frame > *{width:100%}
.hiw-v4 .t4-frame > .t3-or{width:auto;justify-self:center;margin:4px 0}
.hiw-v4 .t4-frame .flow-chat{max-width:360px;justify-self:center}
.hiw-v4 .t4-frame .flow-chat .convo{margin-top:10px}
.hiw-v4 .t4-frame .flow-chat .msg .text{font-size:12.5px;line-height:1.4}
.hiw-v4 .t4-frame .flow-chat .fchips span{font-size:11.5px}
.hiw-v4 .t4-ways{grid-template-columns:minmax(0,1fr);gap:6px}
.hiw-v4 .t4-ways .t3-way{max-width:400px}
.t4-pick{display:grid;gap:0;border-radius:16px;background:var(--app-surface);box-shadow:0 10px 24px -18px rgba(20,54,41,.45);overflow:hidden}
.t4-pick .t3-card{box-shadow:none;border-radius:0}
.t4-pick .t3-why{margin:0 8px 8px;font-size:15px;padding:10px 12px}
.t3-left{font-style:normal;font-size:13px;color:#1b4332;font-weight:600}
.hiw-v4 .t4-pc{max-width:400px;justify-self:center}
@media(min-width:940px){
  .hiw-v4 .steps-rail .hstep{grid-template-columns:44px minmax(0,540px) minmax(0,1fr);column-gap:48px;align-items:center}
  .hiw-v4 .steps-rail .step-mark{grid-row:1;align-self:stretch}
  /* the settled plan fills its frame like the other two pictures */
  .hiw-v4 .t4-pc{max-width:430px;padding:18px 20px 20px;gap:13px}
  .hiw-v4 .t4-pc .t3-remind{font-size:14px;padding:5px 12px 5px 9px}
  .hiw-v4 .t4-pc .t3-pc-h b{font-size:19px}
  .hiw-v4 .t4-pc .t3-pc-h span{font-size:14px}
  .hiw-v4 .t4-pc .t3-rows{gap:11px}
  .hiw-v4 .t4-pc .t3-rows li{font-size:16px}
  .hiw-v4 .t4-pc .t3-rows .faces img{width:28px;height:28px}
  .hiw-v4 .t4-pc .t3-talk img{width:30px;height:30px}
  .hiw-v4 .t4-pc .t3-talk span{font-size:15px;padding:8px 13px}
  .hiw-v4 .steps-rail .scene{grid-column:2;grid-row:1}
  .hiw-v4 .steps-rail .hstep-text{grid-column:3;grid-row:1;padding-top:0;align-self:center}
  .hiw-v4 .t4-frame{height:540px;padding:28px}
}

/* v4 good to know: one small round icon per card (Sonia, 2026-10-05) */
.hiw-v4 .good-ic{align-self:flex-start;width:40px;height:40px;padding:9px;border-radius:50%;background:var(--j-soft);color:var(--j-accent);stroke-width:1.7;margin-bottom:6px}

/* v4 Fern card: voice or text as two quiet tags, not buttons (Sonia, 2026-10-05) */
.meet-modes{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;font:500 13.5px/1 var(--j-app);color:#1b4332}
.meet-modes span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--app-soft)}
.meet-modes svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.meet-modes em{font-style:normal;color:var(--app-muted)}

/* App preview inside the existing phone frame. Not a screenshot. */
.hero-phone figcaption{margin-top:8px;max-width:16em;font-size:12.5px;line-height:1.4;color:var(--j-body);text-align:center}
.screen{display:flex;flex-direction:column;background:#faf6ef}
.app-preview{display:flex;flex-direction:column;height:100%;min-height:0;padding:18px 7px 0;box-sizing:border-box;text-align:left;color:#143629;font-family:var(--j-app, "DM Sans", sans-serif)}
.ap-badge{align-self:flex-start;margin:2px 0 5px;padding:2px 6px;border-radius:99px;background:#1b4332;color:#f6f1e7;font:700 8px/1.4 var(--j-app, sans-serif);letter-spacing:.04em;text-transform:uppercase}
.ap-h{margin:0 1px 5px;font:700 13px/1.1 var(--j-app, sans-serif)}
.ap-cats{display:flex;gap:3px;margin:0 0 6px;overflow:hidden}
.ap-cats span{flex:none;border:1px solid rgba(27,67,50,.35);border-radius:99px;padding:2px 5px;font:600 8px/1.3 var(--j-app, sans-serif);color:#1b4332}
.ap-cats span.on{background:#1b4332;color:#fff;border-color:#1b4332}
.ap-list{display:grid;gap:5px;min-height:0}
.ap-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;align-items:center;padding:4px;border-radius:10px;background:#fffdf9}
.ap-card img.ap-pic{width:52px;height:52px;object-fit:cover;border-radius:8px}
.ap-card b{display:block;font-size:10px;line-height:1.2;font-weight:700}
.ap-kind{display:inline-block;margin-bottom:1px;font:700 7px/1.2 var(--j-app, sans-serif);letter-spacing:.03em;text-transform:uppercase;color:#1b4332}
.ap-kind.idea{color:#7a4a12}
.ap-meta{display:block;margin-top:1px;font-size:8px;line-height:1.25;color:#5c564c}
.ap-faces{display:flex;align-items:center;margin-top:3px}
.ap-faces img{width:14px;height:14px;border-radius:50%;object-fit:cover;border:1px solid #fff;margin-left:-4px}
.ap-faces img:first-child{margin-left:0}
.ap-open{margin-left:4px;font-size:8px;font-weight:700;color:#1b4332}
.ap-nav{display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto;border-top:1px solid #e0d6c5;background:#fffdf9}
.ap-nav span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 7px;font:700 7.5px/1 var(--j-app, sans-serif);color:#6b6152}
.ap-nav span.on{color:#1b4332}
.ap-nav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Compact steps: content height only, no viewport-tall scenes. */
#steps.jsheet{padding-block:28px 18px}
#steps .steps-rail{--step-gap:22px}
#steps .scene{min-height:0;padding:12px}
.scene-profile .pick-card{width:min(100%,440px);text-align:left;background:var(--app-surface,#fffdf9);border-radius:16px;padding:12px}
.pk-note{margin:0 0 6px;font:500 11.5px/1.35 var(--j-app, sans-serif);color:#6b6152}
.prof-preview{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid #e0d6c5}
.prof-preview img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.prof-preview b{display:block;font:700 13px/1.2 var(--j-app, sans-serif);color:#0e1a18}
.prof-preview span{display:block;font:500 11.5px/1.35 var(--j-app, sans-serif);color:#6b6152}
.steps-next{margin:18px 0 0}
.hero-soon{margin-top:12px;font-size:15.5px;font-weight:600;color:var(--j-head)}
#steps .scene-choice .t3-pic{width:64px;height:64px}
#match .fn-list li,#fern .fn-list li{align-items:start}