/* ============================================================
   Home page styles (homepage redesign, 2026-09).
   Tokens, type and nav live in /styles/site.css.
   ============================================================ */

/* ---- interactive forms demo (page specifics; widget shell lives in site.css) ---- */
.demo-stage{height:584px}
.demo-page{position:relative;box-shadow:0 14px 34px -20px rgba(23,34,43,.4)}
.demo-still img{height:540px;width:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.demo-canvas{display:block;border:1px solid var(--line);border-radius:6px;background:#fff}
.demo-boxes{position:absolute;inset:0;pointer-events:none}
.demo-box{position:absolute;border-radius:3px;opacity:0;transform:scale(.55);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.85,.3,1.35)}
.demo-boxes.on .demo-box{opacity:1;transform:none}
.demo-box--tx{border:1.5px solid color-mix(in srgb,var(--accent) 75%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.demo-box--btn{border:1.5px solid rgba(76,127,174,.85);background:rgba(76,127,174,.16)}
.demo-box--ch{border:1.5px solid color-mix(in srgb,var(--gold) 80%,transparent);background:color-mix(in srgb,var(--gold) 15%,transparent)}
.demo-box--sig{border:1.5px solid rgba(138,109,177,.85);background:rgba(138,109,177,.16)}
.demo-callouts{position:absolute;inset:0;pointer-events:none}
.demo-callout{position:absolute;max-width:150px;background:var(--menu-bg);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11px;line-height:1.35;font-weight:600;color:var(--ink);box-shadow:var(--shadow);opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease}
.demo-callout::after{content:"";position:absolute;top:12px;width:9px;height:2px;background:var(--accent)}
.demo-callout--l{border-right:3px solid var(--accent)}
.demo-callout--l::after{right:-12px}
.demo-callout--r{border-left:3px solid var(--accent)}
.demo-callout--r::after{left:-12px}
.demo-callouts.on .demo-callout{opacity:1;transform:none}
#demoDrop{font-size:12.5px}
#demoDrop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo--drag .demo-in{outline:2px dashed var(--accent);outline-offset:-8px}
/* one container, deterministic stage states (e2e keys off data-stage) */
.demo-media,.demo-after{display:none}
#formsDemo[data-stage="video"] .demo-rail,#formsDemo[data-stage="video"] .demo-stage,#formsDemo[data-stage="video"] .demo-bar,
#formsDemo[data-stage="after"] .demo-rail,#formsDemo[data-stage="after"] .demo-stage,#formsDemo[data-stage="after"] .demo-bar{display:none}
#formsDemo[data-stage="video"] .demo-in,#formsDemo[data-stage="after"] .demo-in{grid-template-columns:1fr}
#formsDemo[data-stage="video"] .demo-media{display:block}
#formsDemo[data-stage="after"] .demo-after{display:block}
.demo-video{display:block;width:100%;height:auto;aspect-ratio:1280/800;background:#10181d}
.demo-after img{width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.demo-box,.demo-callout{transition:none}}

/* ---- self-hosted walkthrough video (now at the end of the season band) ---- */
.vid-frame{max-width:860px;margin:0 auto;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.vid-frame video{display:block;width:100%;height:auto;border-radius:10px;background:#10181d}

/* ---- #founder (condensed letter; full version lives at /about/) ---- */
.letter-card{max-width:680px;margin:0 auto;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:38px 36px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);font-size:15.5px;line-height:1.8}
.letter-card .eyebrow{margin-bottom:20px}
.letter-card p{margin:0 0 16px;color:var(--ink2)}
.letter-card p.opener{color:var(--ink);font-size:16.5px}
.letter-card strong{color:var(--ink)}
.refusals{list-style:none;margin:0 0 16px;padding:0}
.refusals li{position:relative;padding-left:30px;margin:0 0 10px;color:var(--ink2);font-size:14.5px}
.refusals li svg{position:absolute;left:0;top:4px;width:17px;height:17px;stroke:#c25454;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.letter-card .signoff{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);font-weight:650;color:var(--ink)}
.letter-card .letter-more{margin:14px 0 0}
.letter-card .letter-more a{color:var(--accent);font-weight:600}
.letter-card .letter-more a:hover{text-decoration:underline}
@media (max-width:560px){.letter-card{padding:28px 22px}}

/* ---- #founding-firms (offer card + lead form; posts via js/site.js) ---- */
.founding{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;background:var(--glass);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:18px;padding:36px 34px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
/* Inline, not the site-wide inline-flex: its 8px gap sat between "·", the live
   count and "spots" (they are separate flex items), which read as double spaces. */
.founding .eyebrow{display:inline-block;margin-bottom:14px}
.founding .sep{margin:0 .28em}
.founding h2{font-size:24px;margin:0 0 10px}
.founding-copy>p{font-size:14px;color:var(--ink2);line-height:1.7;margin:0 0 12px}
.founding-copy .fine{margin:0}
@media (max-width:760px){.founding{grid-template-columns:1fr;padding:28px 22px;gap:24px}}

/* ---- pricing cross-link to the founding offer + FAQ inline links ---- */
#pricing .ff-note{margin-top:6px}
#pricing .ff-note a{color:var(--accent);font-weight:600}
#pricing .ff-note a:hover{text-decoration:underline}
.faq p a{color:var(--accent);font-weight:600}
.faq p a:hover{text-decoration:underline}

/* ---- savings calculator (marketing trust pass, Component 5) ---- */
.calc{max-width:720px;margin:0 auto;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.calc fieldset{border:none;margin:0;padding:0}
.calc legend{font:600 11px/1 var(--font);letter-spacing:0;color:var(--accent);padding:0 0 10px}
.calc-inputs{display:grid;grid-template-columns:1fr 1.4fr;gap:28px}
.calc-size-opts{display:flex;flex-wrap:wrap;gap:8px}
.calc-chip{position:relative;display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass-hi);font-size:13px;color:var(--ink2);cursor:pointer;user-select:none;transition:border-color .15s,color .15s}
.calc-chip input{position:absolute;opacity:0;width:1px;height:1px}
.calc-chip:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.calc-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.calc-tool-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.calc-tool{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 10px;border-radius:9px;border:1px solid transparent}
.calc-tool:has(input:checked){background:var(--glass-hi);border-color:var(--line)}
.calc-tool label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);cursor:pointer}
.calc-tool input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);flex:none}
.calc-tool-name{color:var(--ink);font-weight:600}
.calc-tool-unit{color:var(--ink3);font-size:11.5px}
.calc-tool-line{font:600 12px/1 var(--mono);color:var(--ink3);white-space:nowrap}
.calc-tool:has(input:checked) .calc-tool-line{color:var(--accent)}
.calc-output{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:9px}
.calc-out-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink2)}
.calc-out-row b{font:750 22px/1.1 var(--mono);letter-spacing:-.02em;color:var(--ink)}
.calc-out-row .calc-per{font:500 11px/1 var(--mono);color:var(--ink3);margin-left:3px}
.calc-out-us b{color:var(--accent)}
.calc-out-save{padding-top:9px;border-top:1px dashed var(--line)}
.calc-out-save>span{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.calc-out-save svg{width:16px;height:16px;color:var(--accent);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.calc-out-save b{color:var(--accent-hi,var(--accent))}
.calc-out-save b.calc-neg{color:var(--ink3)}
.calc-cta{display:block;width:max-content;margin:20px auto 0}
@media (max-width:700px){.calc{padding:22px 18px}.calc-inputs{grid-template-columns:1fr;gap:22px}}
.cmp-links{margin-top:26px;font-size:13px;color:var(--ink2)}
.cmp-links a{color:var(--accent);font-weight:600}
.cmp-note{margin:18px auto 0;max-width:64ch;font-size:11.5px;color:var(--ink3)}
.cmp-note a{color:var(--accent);font-weight:600}

/* ---- pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
@media (max-width:860px){.price-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.price-grid{grid-template-columns:1fr}}
.price{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:24px 20px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;flex-direction:column;gap:8px;transition:transform .18s ease;text-align:left}
.price:hover{transform:translateY(-3px)}
.price.hot{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(170deg,var(--accent-soft),transparent 45%),var(--glass)}
.price .tag{font:600 10px/1 var(--font);letter-spacing:0;color:var(--accent)}
.price .name{font-weight:700;font-size:16px}
.price .amt{font:800 34px/1 var(--mono);letter-spacing:-.03em}
.price .amt s{font-size:14px;color:var(--ink3);font-weight:500;text-decoration:none}
.price ul{margin:8px 0 16px;padding:0;list-style:none;font-size:12.5px;color:var(--ink2);display:grid;gap:6px}
.price li{padding-left:18px;position:relative}
.price li::before{content:"";position:absolute;left:1px;top:7px;width:5px;height:3px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-48deg)}
.price .btn{margin-top:auto}
.price-note{margin-top:26px;font-size:12.5px;color:var(--ink3)}
@media (prefers-reduced-motion: reduce){.price:hover{transform:none}}

/* ---- shared band primitives ---- */
main{display:block}
/* site.css's .band is the other pages' rounded final-CTA card: top margin,
   radius, centred text, a glow ::after laid over the content (it would take
   the clicks) and overflow:hidden (it would stop the story's sticky stage).
   The homepage's bands are full-bleed, so none of that applies here. */
.band{position:relative;padding:96px 0;margin-top:0;border-radius:0;text-align:left;box-shadow:none;overflow:visible}
.band::after{content:none}
.band--stage{background:var(--stage);color:#fff}
.band--night{background:var(--night);color:#e7eee9}
.band .wrap{position:relative}
.band h2{color:inherit}
/* Band labels at 4.5:1 or more on the stage band's glow (measured: 4.58 at
   the eyebrow's brightest point, 390 px wide). */
.band .eyebrow{color:#c3e8d3}
.band--night .eyebrow{color:#8fcaa8}
.shot{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(10,30,20,.12),0 24px 50px -24px rgba(10,30,20,.45)}
.shot img,.shot video{display:block;width:100%;height:auto}
@media (max-width:699px){.band{padding:64px 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:radial-gradient(45% 60% at 10% 15%,#e3efe7 0,transparent 70%)}
/* The hero's tint runs up behind the nav, which is transparent until the page
   scrolls: the hero starts under the nav (by the nav's own height, 72 px, 64 px
   up to 900 px wide) and pads its content back down by the same amount, so the
   tint has no hard edge where the nav ends and nothing on the page moves. */
.hero{margin-top:-72px;padding-top:72px}
@media (max-width:900px){.hero{margin-top:-64px;padding-top:64px}}
/* From 1024 up, the copy's left edge sits on the nav's content edge (.navbar:
   max-width 1200, 24 px padding) and the slab still bleeds off the right edge,
   so .hero-in has no max-width. The % resolves against the page width without
   the scrollbar, as the nav's auto margins do. --hero-ov is how far the season
   card hangs over the slab's left edge; the copy keeps clear of it. */
.hero-in{--hero-ov:clamp(40px,4.2vw,60px);display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);padding:48px 0 64px max(24px,calc(50% - 576px))}
/* The copy hangs from a fixed top offset (about centred on the 640 px slab)
   instead of being centred: when /api/founding answers after first paint, the
   pill can go from two lines to one (or hide), and a centred block would move
   the headline with it. */
.hero-copy{position:relative;z-index:3;align-self:start;padding:100px calc(var(--hero-ov) + 28px) 0 0}
.hero h1{font-size:clamp(38px,4.1vw,60px);font-weight:620;letter-spacing:-.035em;line-height:1.03;margin:0 0 18px;max-width:14ch}
.hero .sub{font-size:18px;line-height:1.5;margin:0 0 26px;text-wrap:pretty}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.hero-trust{margin-top:18px;font-size:13.5px;color:var(--ink2);text-wrap:balance}
/* Instrument Sans sets " · " tight, so each dot gets a little air (the text
   still reads "a · b"). A .nw phrase keeps its trailing dot, so a wrapped line
   never starts with one. */
.hero .sep{margin:0 .28em}
.hero .nw{white-space:nowrap}
.founding-pill{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:7px 14px 7px 8px;border:1px solid #cfdcd3;background:#fff;border-radius:999px;font-size:14px;color:var(--ink);text-decoration:none}
.founding-pill b{font-weight:650}
.founding-pill-ic{width:24px;height:24px;border-radius:50%;background:#F6E9CF;display:grid;place-items:center;flex:none}
.founding-pill-ic svg{width:14px;height:14px;fill:var(--gold)}
.founding-pill-arrow{color:var(--accent);font-weight:650}
.founding-full .founding-pill{display:none}
.hero-visual{position:relative;align-self:stretch;min-height:640px}
.hero-slab{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:28px 0 0 28px;background:var(--stage)}
/* The shot box stops 40 px above the slab's foot and clips the image there. */
.hero-shot{position:absolute;left:8%;top:56px;bottom:40px;width:1080px;max-width:none;border-radius:12px 0 0 12px}
.hero-season{position:absolute;z-index:4;left:calc(-1 * var(--hero-ov));bottom:48px;width:330px;background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 20px 48px -12px rgba(0,0,0,.35);color:var(--ink);font-size:14px}
.hero-season-hd{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.hero-season-hd b{display:block;font-size:16px}
.hero-season-hd div>span{font-size:12.5px;color:var(--ink2)}
.hero-season-av{width:34px;height:34px;border-radius:50%;background:#3F3D9A;color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center;flex:none}
.season-steps{list-style:none;margin:0;padding:0}
.season-step{position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:6px 0}
.season-step:not(:last-child)::after{content:"";position:absolute;left:9px;top:28px;bottom:-6px;width:2px;background:#cfe3d7}
.season-dot{width:20px;height:20px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.season-dot svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.season-step--now .season-dot{background:#fff;border:2.5px solid var(--accent)}
.season-t{font-weight:600}
.season-when{font:500 12px var(--mono);color:var(--ink2)}
.js .hero-season .season-step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.js .hero-season .season-step.is-in{opacity:1;transform:none}
/* Below 1024 the slab ends the hero; the bottom padding leaves a light gap so
   it never runs into the green story band as one block. */
@media (max-width:1023px){
  .hero-in{grid-template-columns:1fr;padding:32px 24px 28px}
  .hero-copy{padding:0}
  .hero-visual{min-height:0;height:560px;margin:28px -24px 0;overflow:hidden}
  .hero-slab{border-radius:28px 28px 0 0}
  .hero-shot{left:50%;top:28px;bottom:auto;width:min(78vw,300px);transform:translateX(-50%);border-radius:14px}
  .hero-season{left:50%;right:auto;bottom:24px;transform:translateX(-50%);width:min(88vw,330px)}
  .season-step--intake{display:none}
}
/* The nav's gutter drops to 16 px at 900; the copy follows it. */
@media (max-width:900px){
  .hero-in{padding-left:16px;padding-right:16px}
  .hero-visual{margin-left:-16px;margin-right:-16px}
}
@media (min-width:700px) and (max-width:1023px){
  .hero-shot{width:min(92vw,760px)}
  .season-step--intake{display:grid}
}
/* Phone (spec 3, version 1): headline, the shorter sub-line, the buttons side
   by side and the founding pill (no trust line), then a slab short enough that
   the app and the season card both sit inside the first 844 px and the card
   clears the chat button (bottom-right, from y=778 at 390x844). The shot box
   ends behind the card, so the image's cut edge never shows. */
@media (max-width:699px){
  .hero-in{padding-top:12px}
  .hero h1{font-size:36px;margin-bottom:12px}
  .hero .sub{font-size:16px;margin-bottom:18px}
  .hero .sub-long,.hero-trust{display:none}
  .cta-row .btn{flex:1 1 0}
  .founding-pill{margin-top:12px;gap:8px;padding:6px 14px 6px 6px;font-size:13px}
  /* The count phrase takes its own line, so the pill keeps its height whether
     it says "a limited number of" or the live number: no layout shift when
     /api/founding answers after first paint. The line break stands in for the dot. */
  .founding-pill .nw:last-child{display:block}
  .founding-pill .sep{display:none}
  .hero-visual{height:396px;margin-top:20px}
  .hero-shot{top:24px;bottom:84px}
  .hero-season{padding:14px 16px}
  .hero-season-hd{margin-bottom:8px}
}

/* ---- season story (#features) ---- */
/* The band's content edge is the nav's (1200 max, 24 px gutter, 16 px from
   900 down), as the hero's is; that also gives the pinned stage ~700 px at
   1440, so every story screen shows at 75% of real size or more. */
.season .wrap{max-width:1200px}
@media (max-width:900px){.season .wrap{padding:0 16px}}
.season h2{font-size:clamp(28px,3.3vw,46px);font-weight:620;letter-spacing:-.03em;margin:10px 0 8px;max-width:20ch}
.season .nw{white-space:nowrap}
.season-intro{color:#d3e8dc;font-size:17px;max-width:56ch}
/* Which plan the story's screens come from (the features differ by plan). */
.season-plan{margin-top:10px;color:#d3e8dc;font-size:14.5px;max-width:60ch}
.season-plan a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.season-plan a:hover{text-decoration-thickness:2px}
.season-grid{margin-top:48px}
.season-rows{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.season-row{display:grid;grid-template-columns:44px 1fr;gap:14px 18px}
.season-num{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;font:600 14px var(--mono)}
.season-text h3{font-size:22px;letter-spacing:-.015em;margin:4px 0 8px}
.season-text p{color:#d3e8dc;line-height:1.55;max-width:52ch}
.season-fact{margin-top:10px;font:500 13px var(--mono);color:#c3e8d3!important}
/* A stacked screen keeps to the 700 px its srcset is sized for. */
.season-shot{grid-column:1/-1;margin:6px 0 0;max-width:700px}
.season-shot--rule{position:relative}
/* Step 3's loop: a pause button over its top-right corner (js/season-story.js). */
.season-shot{position:relative}
.loop-toggle{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(14,40,28,.78);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.loop-toggle:hover{background:rgba(14,40,28,.92)}
.loop-toggle svg{width:16px;height:16px;fill:currentColor}
.loop-toggle .i-play,.loop-toggle[aria-pressed="true"] .i-pause{display:none}
.loop-toggle[aria-pressed="true"] .i-play{display:block}
.season-loop{cursor:pointer}
.rule-card{position:absolute;left:18px;bottom:18px;max-width:78%;background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.4);font-size:13px;display:grid;grid-template-columns:1fr auto;gap:4px 10px}
.rule-on{font-size:11.5px;font-weight:650;color:var(--accent);background:#DCEFE3;border-radius:6px;padding:2px 7px;align-self:start}
.rule-line{grid-column:1/-1;color:var(--ink2)}
/* Below 1024 the stacked screenshot is too small to give up its lower half to
   the card, so the card sits under it: the picture takes the screenshot look
   and the figure lets the card out. */
@media (max-width:1023px){
  .season-shot--rule{overflow:visible;background:none;box-shadow:none;border-radius:0}
  .season-shot--rule picture{display:block;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(10,30,20,.12),0 24px 50px -24px rgba(10,30,20,.45)}
  .season-shot--rule .rule-card{position:static;max-width:none;margin-top:12px}
}
/* site.css's `.band .btn` whitens every button in a band. The forms demo is
   docked in this band but draws its own light panel, so its buttons keep
   their site-wide looks here (the overlay moves it out of the band anyway). */
.band .demo .btn.pri{background:linear-gradient(135deg,var(--accent),var(--accent-hi));color:#fff}
.band .demo .btn.ghost{background:var(--glass-hi);color:var(--ink)}
/* .season-prefixed so they outrank site.css's `.band .btn`. */
.season .try-live{margin-top:16px;color:var(--ink)}
.season .season-cta{background:#fff;color:#12432f}
/* The dock opens across the whole row (under the step number too), so the
   demo's phone video is not squeezed into the text column. */
.demo-dock{margin:18px 0 0 -62px}
.demo-dock .demo{margin:0}
.season-end{margin-top:64px;display:grid;gap:28px;justify-items:center;text-align:center}
.season-video{width:100%;max-width:880px;margin:0 auto}
.season-video h3{font-size:20px;margin-bottom:14px}
.season-video .vid-frame{margin:0}
.season-video .vid-alt a{color:#c3dfcf;font-weight:600}
.season-video .vid-alt a:hover{text-decoration:underline}
/* desktop, JS on, motion allowed: a progress rail beside a pinned screen.
   The rail (the seven steps) and the stage are stuck together in .season-pin
   for (steps - 1) x STEP_VH of scroll. js/season-story.js sets the track's
   (.season-grid's) height to the pin's plus that runway and maps progress
   through it to the active step. --season-h keeps the pin inside the space
   under the 72 px sticky nav on short screens (1280x720, 1366x768 laptops). */
@media (min-width:1024px){
  .season{--season-h:min(580px,calc(100vh - 104px))}
  .season.is-pinned .season-grid{position:relative}
  /* Centred in the space under the nav; 88 px from the top at most. */
  .season.is-pinned .season-pin{position:sticky;top:calc(36px + 50vh - var(--season-h) / 2);height:var(--season-h);display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:56px;align-items:start}
  /* The rail: every step's title at once. The active one opens (number
     filled, copy, fact line, and "Try it live" on step 5); finished ones dim
     and keep a filled number; upcoming ones show their title only.
     Each row's layout box is its title line only, whatever is active: the
     open copy is laid over the rail and the rows below it slide down by its
     height (--season-open, set by js/season-story.js) with a transform. So
     changing step moves nothing in layout (no layout shift), only transforms
     and opacity. */
  .season.is-pinned .season-rows{gap:0}
  .season.is-pinned .season-row{position:relative;grid-template-columns:30px 1fr;gap:0 16px;padding-bottom:18px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .season.is-pinned .season-row.is-active ~ .season-row{transform:translateY(var(--season-open,0px))}
  /* Above the rows still sliding out of its way, so they never take its clicks. */
  .season.is-pinned .season-row.is-active{z-index:1}
  .season.is-pinned .season-row:not(:last-child)::before{content:"";position:absolute;left:14px;top:36px;bottom:6px;width:2px;border-radius:1px;background:rgba(255,255,255,.16)}
  .season.is-pinned .season-row.is-active::before{bottom:calc(6px - var(--season-open,0px))}
  .season.is-pinned .season-row.is-done::before{background:rgba(159,211,182,.55)}
  .season.is-pinned .season-row .season-shot{display:none}
  .season.is-pinned .season-num{width:30px;height:30px;border:1.5px solid rgba(255,255,255,.42);font-size:12.5px;color:rgba(255,255,255,.78)}
  .season.is-pinned .season-row.is-done .season-num{background:rgba(159,211,182,.26);border-color:transparent;color:#fff}
  .season.is-pinned .season-row.is-active .season-num{background:#fff;border-color:#fff;color:#12432f}
  .season.is-pinned .season-text{position:relative}
  .season.is-pinned .season-text h3{font-size:18px;line-height:1.35;margin:3px 0 0;color:rgba(255,255,255,.72);transition:color .3s ease}
  .season.is-pinned .season-row.is-active .season-text h3{color:#fff}
  /* The copy opens and closes by opacity and transform only; hidden copy
     (and step 5's button) is visibility:hidden, so it takes no focus. */
  .season.is-pinned .season-body{position:absolute;left:0;right:0;top:calc(100% + 8px);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .season.is-pinned .season-row.is-active .season-body{visibility:visible;opacity:1;transform:none;transition:opacity .4s ease .15s,transform .45s cubic-bezier(.2,.8,.2,1) .15s,visibility 0s}
  .season.is-pinned .season-body > p{font-size:15.5px}
  .season.is-pinned .season-body > .season-fact{font-size:12.5px;margin-top:10px}
  .season.is-pinned .try-live{margin-top:14px;padding:9px 16px;font-size:13.5px}
  /* A rail title is a button that scrolls to its step (js/season-story.js). */
  .season-go{font:inherit;letter-spacing:inherit;color:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer;border-radius:4px}
  .season-go:hover{color:#fff}
  .season-go:focus-visible{outline:2px solid #fff;outline-offset:4px}
  .season.is-pinned .season-stage{position:relative;height:min(520px,var(--season-h))}
  /* A frame is a clear box the size of the stage; the screen inside it
     carries the card look, so a short screen never sits in a tall white box. */
  .season-stage .season-frame{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .3s ease;display:flex;align-items:flex-start;max-width:none;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .season-stage .season-frame.is-active{opacity:1}
  .season-stage .season-frame:not(.is-active){pointer-events:none}
  .season-frame > picture,.season-frame > video{width:100%}
  .season-frame img,.season-frame video{display:block;max-width:100%;max-height:min(520px,var(--season-h));width:auto;height:auto;margin:0 auto;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(10,30,20,.12),0 24px 50px -24px rgba(10,30,20,.45)}
}
/* Under 640 px tall (a 1024x600 window) the rail closes up so its lowest
   title stays on screen with step 5 open. */
@media (min-width:1024px) and (max-height:640px){
  .season.is-pinned .season-row{padding-bottom:12px}
  .season.is-pinned .season-row:not(:last-child)::before{top:34px}
}
.season-stage:empty{display:none}

/* ---- feature ring (#more) ---- */
.ring-sec{position:relative;padding:88px 0 52px}
.ring-head{text-align:center}
.ring-head h2{font-size:clamp(28px,3.2vw,44px);font-weight:620;letter-spacing:-.03em;margin:8px 0 6px}
.ring-line{color:var(--ink2)}
.ring-line a{color:var(--accent)}
/* default = horizontal snap row (phones, reduced motion, no JS). The row
   clips at its box, so its padding leaves room for the focus ring above a
   card and the card's shadow below it. */
.ring-stage{margin-top:26px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:10px 6vw 44px}
.ring-list{list-style:none;margin:0;padding:0;display:flex;gap:20px;width:max-content}
/* Every card in the row is as tall as the tallest (the <li> stretches, the
   card fills it) and any spare height goes under the title, so the nine
   screenshots all sit on the same line. */
.ring-item{scroll-snap-align:center;display:flex}
.ring-card{width:min(88vw,1080px);background:#fff;border:1px solid #dde3de;border-radius:22px;overflow:hidden;display:grid;grid-template-rows:1fr auto;box-shadow:0 30px 60px -30px rgba(20,40,30,.4)}
.ring-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ring-tx{padding:22px 28px 16px;display:grid;grid-template-columns:auto 1fr auto;column-gap:22px;row-gap:4px;align-items:baseline;align-content:start}
.ring-n{grid-row:1/3;font:500 12px var(--mono);color:var(--ink2)}
.ring-tx h3{font-size:clamp(19px,1.7vw,26px);letter-spacing:-.02em;font-weight:620}
.ring-tx p{grid-column:2;font-size:15px;line-height:1.55;color:var(--ink2)}
.ring-plan{grid-column:3;grid-row:1;font-size:12px;font-weight:650;color:#8A5A07;background:#F6E9CF;border-radius:6px;padding:2px 8px}
.ring-img{margin:0;background:var(--stage);padding:18px 18px 0}
/* One frame for all nine: two captures are a little taller than 1195x569
   (the website, 1195x618), and cover/top trims them at the foot. */
.ring-img img{display:block;width:100%;height:auto;aspect-ratio:1195/569;object-fit:cover;object-position:center top;border-radius:10px 10px 0 0}
.ring-dots{display:none}
/* Phones: the counter and plan chip share a line above the title, so the
   text gets the card's full width; a narrower gap lets the next card peek. */
@media (max-width:699px){
  .ring-list{gap:12px}
  .ring-tx{grid-template-columns:1fr auto;padding:18px 20px 14px}
  .ring-n{grid-row:1;grid-column:1}
  .ring-tx h3,.ring-tx p{grid-column:1/-1}
  .ring-plan{grid-column:2;grid-row:1}
  .ring-img{padding:12px 12px 0}
}
/* desktop, JS on, motion allowed: the 3D ring */
@media (min-width:1024px){
  .ring-sec.is-ring{padding:0}
  /* padding-top clears the 72 px sticky nav, which sits over the pin.
     overflow:clip, not hidden: a hidden box is still a scroll container, and
     tabbing to a side card scrolled it sideways, shifting the whole ring. */
  .ring-sec.is-ring .ring-pin{position:sticky;top:0;height:100vh;overflow:hidden;overflow:clip;display:grid;grid-template-rows:auto 1fr auto;padding-top:96px}
  /* The card size lives on the stage so the floor shadow can sit at the
     front card's foot; the cards inherit it. */
  .ring-sec.is-ring .ring-stage{--w:min(72vw,1080px);--h:min(64vh,620px,calc(100vh - 300px),calc(var(--w) * .62));position:relative;margin:0;overflow:visible;padding:0;perspective:2400px;perspective-origin:50% 45%}
  /* The prototype's soft glow behind the ring and a floor shadow under the
     front card: two static gradients (no filter), painted before the ring,
     so nothing repaints as it turns. */
  .ring-sec.is-ring .ring-pin{background:radial-gradient(60% 45% at 50% 62%,#e2ece5 0,transparent 70%)}
  .ring-sec.is-ring .ring-stage::before{content:"";position:absolute;left:50%;top:calc(50% + var(--h) / 2 - 22px);width:min(70vw,1100px);height:60px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(20,50,35,.18),transparent 70%);pointer-events:none}
  .ring-sec.is-ring .ring-list{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;display:block}
  /* The <li> sits between the turning list and its card: without this it
     flattens the card into its own plane and the ring loses its depth. */
  .ring-sec.is-ring .ring-item{display:block;transform-style:preserve-3d;scroll-snap-align:none}
  /* The last two terms only bite on short screens (under ~840 px tall),
     where the nav, heading and dots would otherwise crowd the card, and on
     tall narrow ones (a portrait 1024 px tablet), where a full-height card
     would crop the screenshot's sides. */
  .ring-sec.is-ring .ring-card{grid-template-rows:auto 1fr;position:absolute;width:var(--w);height:var(--h);left:calc(var(--w) / -2);top:calc(var(--h) / -2);backface-visibility:hidden}
  .ring-sec.is-ring .ring-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(243,245,242,var(--shadeL,0)),rgba(243,245,242,var(--shadeR,0)))}
  .ring-sec.is-ring .ring-img{overflow:hidden}
  /* Cards that turn in 3D do not enlarge: no Enlarge button, and with it
     hidden js/lightbox.js ignores clicks on the picture too. The flat snap
     row (phones, reduced motion, no ring) keeps both. */
  .ring-sec.is-ring .ftx-zoom{display:none}
  .ring-sec.is-ring .ftx-zoomable picture,.ring-sec.is-ring .ftx-zoomable picture img{cursor:auto}
  .ring-sec.is-ring .ring-img img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top}
  .ring-sec.is-ring .ring-tx>*{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
  .ring-sec.is-ring .ring-card.front .ring-tx>*{opacity:1;transform:none}
  .ring-sec.is-ring .ring-card.front .ring-tx>*:nth-child(2){transition-delay:.06s}
  .ring-sec.is-ring .ring-card.front .ring-tx>*:nth-child(3){transition-delay:.12s}
  .ring-sec.is-ring .ring-card.front .ring-tx>*:nth-child(4){transition-delay:.18s}
  .ring-sec.is-ring .ring-img picture{display:block;height:100%;transform:translateY(22px) scale(.985);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  .ring-sec.is-ring .ring-card.front .ring-img picture{transform:none}
  .ring-sec.is-ring .ring-dots{display:flex;justify-content:center;gap:7px;padding:0 0 4vh}
  .ring-dots i{width:8px;height:8px;border-radius:50%;background:#c9d4cc;transition:background .3s,transform .3s}
  .ring-dots i.on{background:var(--accent);transform:scale(1.35)}
  .ring-snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start}
}
html.ring-snapping{scroll-snap-type:y proximity}

/* ---- security band (#trust-band) ---- */
/* Its content edge is the nav's, as the story band's is (1200 max, 16 px
   gutter from 900 down). */
#trust-band .wrap{max-width:1200px}
@media (max-width:900px){#trust-band .wrap{padding:0 16px}}
#trust-band h2{font-size:clamp(26px,3vw,40px);font-weight:620;letter-spacing:-.03em;margin:8px 0 10px}
.sec-lead{color:#b3c1b9;max-width:64ch}
.secband-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.secband-item{display:grid;align-content:start;gap:8px;padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;color:#e7eee9;text-decoration:none;transition:border-color .2s}
.secband-item:hover,.secband-item:focus-visible{border-color:rgba(255,255,255,.3)}
.secband-ic svg{width:26px;height:26px;fill:none;stroke:#8fcaa8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* balance: no lone "WISP" or "8879" on a second line */
.secband-item b{font-size:17px;text-wrap:balance}
.secband-ev{font:500 13px var(--mono);color:#a9b6ae;text-wrap:balance}
@media (max-width:760px){.secband-grid{grid-template-columns:1fr}}
/* ---- customer quote (#quote) ---- */
.quote{margin:0 auto;max-width:820px;text-align:center}
.quote blockquote p{font-size:clamp(20px,2.2vw,28px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
/* The quote marks are drawn by CSS, so the element's text stays exactly the
   approved words (an e2e test pins them); the empty alt after the slash keeps
   screen readers from reading the marks out. */
.quote blockquote p::before{content:"\201C";content:"\201C" / ""}
.quote blockquote p::after{content:"\201D";content:"\201D" / ""}
.quote figcaption{margin-top:16px;color:var(--ink2);font-size:15px}
.quote cite{font-style:normal;font-weight:600}
/* ---- closing CTA (#start) ---- */
/* The band follows the FAQ list directly, so it keeps site.css's old top
   margin (the homepage's .band reset sets it to 0). */
.cta-close{text-align:center;margin-top:96px}
.cta-close h2{font-size:clamp(28px,3.4vw,48px);font-weight:620;letter-spacing:-.03em}
.cta-close p{color:#c3dfcf;margin:10px auto 26px}
/* White on green on purpose: this is the page's last button, set as the
   story band's Start free is. Declared here rather than left to site.css's
   `.band .btn`, which whitens every band button. */
.cta-close .btn{background:#fff;color:#12432f}
.cta-close .fine{margin-top:14px;color:#9fc6b0}
.cta-close .sep{margin:0 .28em}
.cta-close .nw{white-space:nowrap}
/* site.css's focus ring is the accent green, which all but disappears on the
   dark and green bands (2.6:1 on --night); these two bands ring in white. */
#trust-band :focus-visible,.cta-close :focus-visible{outline-color:#fff}
/* The story band too: Try it live, the rail, the plan link, Start free, the
   walkthrough video and the YouTube link. The video's ring goes round its
   light glass frame, on the green (its inner controls keep the browser's
   own ring). The docked demo keeps its light panel's accent ring, and the
   buttons laid over screenshots (Enlarge, the loop's pause) get a white and
   dark double ring that shows on the screen and on the green alike. */
.season :focus-visible{outline-color:#fff}
.season video:focus-visible{outline:2px solid #fff;outline-offset:3px}
@supports selector(:has(*)){
  .season video:focus-visible{outline:none}
  .season .vid-frame:has(video:focus-visible){outline:2px solid #fff;outline-offset:3px}
}
.season .demo :focus-visible{outline-color:var(--accent)}
.season .season-shot :focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px #12432f}
@media (max-width:699px){.cta-close{margin-top:64px}}