/*
 * botany.tech — marketing site stylesheet  (site.css)
 * ---------------------------------------------------------------------------
 * One stylesheet for every page: /, /pass/, /season/<name>/, /pricing/
 * (each page adds its own small sheet: home.css, pass.css, pricing.css,
 * season.css; home's blocks live in home.css, behaviour in home.js).
 * Source of truth is the product, branch `app`: app/src/styles/tokens.css,
 * base.css, components.css, desktop.css and the components that render
 * them (app/src/components/*.tsx). The UI parts below — buttons, controls,
 * tags, cards, the creator header — keep the app's values and structure;
 * only page type (display, H2, lead), section grounds and layout are the
 * site's own, set larger for a marketing page. Behaviour lives in site.js
 * (data-* hooks noted below). No build step.
 *
 * Tokens: the app's light set and dark set (tokens.css), with the owner's
 * v4 contrast changes kept (docs/brief/home-v4.md §2): secondary ink no
 * lighter than #4A4B45 (--ink500/400/300 each one step darker than the
 * app's), hairlines and greys a step stronger (--l100/--l300, --s2/--s3),
 * the dark set's secondary ink lifted. Added by the site: --l500 (a
 * stronger edge for the hero's chain badges and chart rules), --pos-text
 * (#5F7010, the app's named readable step of --pos, for small figures),
 * the dark grounds, the hero sky. [data-site-theme="dark"] switches the dark set
 * per region, as the app's nav column does; .on-paper puts the light set
 * back on a piece of the app laid on a dark plate.
 *
 * Rules the components keep (from the app, and home-v2.md §1 / home-v4.md)
 *   - Buttons are the app's pills (base.css .btn): 36 high, 0 18 in, 14/500,
 *     gap 6; .btn-sm is 28 / 0 12 / 13. Black (--solid-bg, 600) commits;
 *     .btn-ghost (the --l300 hairline, --quiet-fill behind it on a dark
 *     ground) is the way elsewhere; citrine (.btn-cit, 600) is the one
 *     press-me per screen; in a dark region black turns paper. No arrows:
 *     the only mark a button carries is the app's OutIcon (.ic-out) on a
 *     press that leaves the product. A button fills its width only where
 *     the app's does: the one action across the foot of a card (.mk, a
 *     plan). The hero's press alone is 40 (the desktop wizard's commit,
 *     .sumbar-b). Olive is never a button colour. Text links (.link) live
 *     only inside running text.
 *   - Corners say what can be pressed: 4px (--r-tap) on pressable things
 *     (cards, options, plans), 12px (--r-card) on read-only things (plates,
 *     notices, the creator strip), 2px tags.
 *   - No shadows, no gradients on UI. Flat plates with a 1px hairline;
 *     depth comes from the dark olive grounds, never from drop shadows.
 *   - Olive = profit, coral = loss, the sign always written (+ / −).
 *   - Satoshi for words, Roboto Mono for every figure, Doto for the app's
 *     .label (700, 12/16, .1em, uppercase, full ink) and the step numbers.
 *   - Avatars are octagons (clip-path: var(--av-shape), .av-i inside a
 *     paper ring), never circles; a creator's small face in a meta line is
 *     the app's round .cface. A strategy has no face.
 *
 * Type scale (site, for a marketing page)  mobile  →  ≥1024 (≥1200 display)
 *   .display  h1                     48/50        76/78 → 88/88  500 −.035em
 *   .h2       section heading        36/40        56/60          500
 *   .h3       card title             24/28        28/32          500
 *   .lead 15/22 → 15/23 (secondary ink) · body 17/26 · .small 14/20
 *   .label    the app's Doto label   12/16, 700, uppercase, .1em
 *   .num-l · .num-xl · .fig-xl       mono figures at page scale
 *
 * Layout primitives
 *   .container (max 1120, 20/40/80 gutters) · .section (--tight --season
 *   --grey) · .blk (--white --paper --grey --olive --deep --follow) ·
 *   .split .split-4-8 .split-5-7 .split-4-7 · .stack(-s,-l) · .cluster ·
 *   .head (--center --row) · .sr-only .skip-link
 *
 * Components  →  classes  →  app source
 *   HDR   Header          header.hdr .hdr-inner .logo .hdr-nav .hdr-link
 *                         .hdr-cta
 *                         (.btn-ghost: outlined, no fill)
 *                         .hdr-burger .hdr-menu · .is-scrolled .is-menu-open
 *                         .hdr--min .hdr--over                  (site's own)
 *   BTN   Buttons         .btn + .btn-primary | .btn-ghost | .btn-cit
 *                         (= .btn-accent) · .btn-sm · .btn-block ·
 *                         .btn > svg.ic.ic-out              base.css, Icon.tsx
 *   ICON  Round button    .iconbtn (36, hairline)                 base.css
 *   LINK  Text link       .link .link-arrow (ArrowRightIcon: a line that
 *                         goes elsewhere, as MarketNudge's)       base.css
 *   TAG   Tags            .tag (.live .acc .trading > .tradedot)  base.css,
 *                         components.css · .chips .chip .chip--no (site's,
 *                         /pass)
 *   PAPER Light set       .on-paper (the creator header on a dark ground)
 *   HERO  Hero scene      [data-hero-scene] .hero-art .hero-canvas
 *                         .hero-poster .hero-slot .hero-loader (.has-scene
 *                         .is-live .is-failed .is-poster) · .hero-copy .chain .btn.hero-cta
 *                         (home's first screen is home.css .hc)
 *   SCAN  Comet           .scan.comet > .comet-in (canvas.comet-ascii) +
 *                         .comet-text > .dot3 — the app's comet (Autotrade
 *                         Start, AsciiWave.tsx) with its "Analyzing market"
 *                         mark (StrategyCard .dot3); a readout, not a press
 *   SEG   Switch          .seg > span (.is-on)            components.css .seg
 *   OPT   Option row      .opt (.is-on) .r .t .opt-from .d
 *                                              components.css .opt, StrategyTypeSheet
 *   TRACK Track chart     svg.track .track-a .track-l .track-b .track-g
 *                         .track-o · .sprout · .roots (site's art on the
 *                         app's curve.ts walk)
 *   PHONE .phone[data-flow]: the app's screens (assets/flow) walked by
 *                         initFlows; the device is styled in assets/phone.css
 *   MK    Strategy card   (unused: the fallback for home's strategies table)
 *                         .mk .mk-save .mk-t .mk-meta (.m-where .coins
 *                         .m-coins · .authorlink .cface .h .vbadge.is-sm)
 *                         .mk-b (.mk-lead .t .v · .spark.mk-spark) .mk-figs
 *                         .btn-block       MarketCard.tsx, AuthorLink.tsx,
 *                         Verified.tsx; .coins = the app's .stack
 *   BEST  Card row        .best > .mk ×3 .best-foot .best-more (unused,
 *                         with MK)                              (site's own)
 *   RISK  Risk note       p.risk .risk-ico (the app's .help disc)
 *   EARN  Creator band    .earn .earn-grid .earn-body .earn-art >
 *                         .cc.on-paper (.cc-b .cc-art · .cc-n .cc-av > .av-i
 *                         > .av-fill > .av-l · .cc-id .cc-name .cc-seal
 *                         .cc-bio · .cc-figs) — CreatorHeader.tsx /
 *                         .chead .ch-b .ch-n.has-art .ch-av .ch-figs at the
 *                         phone page's values · .cc-list .cc-row (site's
 *                         summary of their cards) · .ref (the app's referral terms card:
 *                         .ref-h .ref-k .ref-bon .ref-big .ref-d)
 *   AV    Octagon face    .av-i .av-fill .av-l (home's founder note)
 *   FAQ   Accordion       .faq[data-accordion][data-accordion-single]
 *                         .faq-item[data-acc-item] > .faq-q > .faq-btn
 *                         (.faq-icon: .iconbtn with a plus; open = the
 *                         app's pressed .help tint) + .faq-a (region)
 *   ACC   Collapsible     .acc[data-accordion][data-acc-item] .acc-btn
 *                         (.acc-icon) .acc-label .acc-panel .acc-list
 *   CTA   Band            section.cta-band (the end of every page but home,
 *                         whose CTA is home.css .end-cta)
 *   FTR   Footer          footer.end.end-ftr (--sheet off home) .end-stage
 *                         .end-branch .end-word .end-ground .end-row .end-id
 *                         .end-nav .end-legal · site.js
 *                         initFooter
 *   SBAR  Season line     .sbar[data-season-bar] .sbar-in .sbar-t .sbar-sub
 *                         .sbar-a .sbar-ic (home)
 *   STEP  Numbered steps  ol.steps > li.step .step-thumb .step-num
 *                         .step-text · .step--key  (/pass)
 *   QUEST Quest row       ol.quests > li.quest .quest-ring .quest-body
 *                         .quest-title .quest-text .quest-pts · .quest--start
 *                         .quest--progress (--p) .quest--done  (/season)
 *   PLAN  Plan card       article.plan .plan-name .plan-for .plan-price
 *                         .plan-amount .plan-was .plan-per .plan-note
 *                         .plan-list · .plan--rec (.plan-tag = .tag.acc)
 *   TOGGLE Billing        .toggle[data-billing] > button.toggle-opt
 *                         [role=radio] .toggle-badge — the app's .seg
 *   CD    Countdown       .cd-row .cd [data-countdown] · .cd.is-ended
 *   EMPTY Empty state     .empty
 *   TBD   Placeholder     .tbd (inline) · .tbd-mark · [data-placeholder]
 *   REVEAL               [data-reveal] rises in once (700/900ms, 22px and
 *                         .95 scale, --ease-in-view; siblings staggered by
 *                         site.js through --rd); the hero copy rises on load;
 *                         nothing hidden without JS or with reduced motion.
 * ---------------------------------------------------------------------------
 */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Doto';src:url('fonts/doto-latin.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('fonts/roboto-mono-latin.woff2') format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}

/* ---------- tokens: the app's light set (tokens.css), contrast raised for v4 ---------- */
:root{
  --cover-ratio:10 / 3;
  --s0:#FFFFFF; --s1:#FAFAF8; --s2:#F5F5F0; --s3:#ECECE5;
  /* hairlines a step stronger than the app's (#EEEFE9 / #D8D9D4) */
  --l100:#E3E4DD; --l300:#C9CBC3; --l500:#A9ABA2;
  --tint-4:rgba(0,0,0,.04); --tint-6:rgba(0,0,0,.06); --tint-8:rgba(0,0,0,.08);
  /* ink: primary copy is --ink900; secondary --ink500 (8.8:1 on white);
     --ink400 / --ink300 are for marks and rules, never for reading */
  --ink900:#161514; --ink500:#4A4B45; --ink400:#5C5D57; --ink300:#76776F;
  --ol900:#100F0F; --ol800:#2C2E11; --ol700:#535D0A; --ol600:#72860F; --ol400:#8FA441;
  --cit500:#E1CD06; --cit700:#B5A406;
  --art-crest:22,21,20; --art-body:83,93,10; --art-tail:112,128,44; --art-acc:160,138,0; --art-lit:83,93,10;
  --pos:#72860F; --neg:#E0664A;
  --neg-ink:#B54327;
  --pos-ink:var(--pos);
  --control-on:#535D0A;
  --sand:#E3D9C6; --olive:#A9B285; --clay:#C08464; --sky:#5E92C0; --navy:#121A33;
  --solid-bg:#100F0F; --solid-fg:#F7F7F2; --solid-bg-hover:#2B2A28;
  --r-tap:4px;
  --r-card:12px;
  --wizstep:40px;
  --r-plate:24px; /* the landing: the app's big filled blocks (moneycard, tcard, ctx 24), owner 29.10.2026 */
  --r-inner:14px;
  --av-shape:polygon(42.6% 3.1%, 46.2% 2.0%, 50.0% 1.6%, 53.8% 2.0%, 57.4% 3.1%, 77.9% 11.6%, 81.3% 13.4%, 84.2% 15.8%, 86.6% 18.7%, 88.4% 22.1%, 96.9% 42.6%, 98.0% 46.2%, 98.4% 50.0%, 98.0% 53.8%, 96.9% 57.4%, 88.4% 77.9%, 86.6% 81.3%, 84.2% 84.2%, 81.3% 86.6%, 77.9% 88.4%, 57.4% 96.9%, 53.8% 98.0%, 50.0% 98.4%, 46.2% 98.0%, 42.6% 96.9%, 22.1% 88.4%, 18.7% 86.6%, 15.8% 84.2%, 13.4% 81.3%, 11.6% 77.9%, 3.1% 57.4%, 2.0% 53.8%, 1.6% 50.0%, 2.0% 46.2%, 3.1% 42.6%, 11.6% 22.1%, 13.4% 18.7%, 15.8% 15.8%, 18.7% 13.4%, 22.1% 11.6%);
  --quiet-fill:transparent;
  --sans:Satoshi,'Helvetica Neue',Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
  --doto:Doto,monospace;

  /* ---- the site's own, on top of the app's ---- */
  /* The olive the app names as the step a small figure can be painted in
     (tokens.css, on --pos): the same hue, 5.5:1 on white. */
  --pos-text:#5F7010;
  /* The dark olive grounds, fixed here so a [data-site-theme="dark"] block (which
     redefines --ol800/--ol900) still stands on the light set's olive. */
  --ground-olive:#2C2E11;
  --ground-deep:#100F0F;
  /* The hero band is the WebGL scene's own sky (art, not UI): the dome is
     tone-mapped, so it runs darker than paper and shades top to bottom.
     Read off the live framebuffer of the holding page. */
  --hero-sky:linear-gradient(180deg,#D5D7CC 0%,#D8DACF 20%,#DDDFD4 40%,#DCDED3 60%,#D9DCD0 80%,#D1D4C7 100%);
  --hero-sky-mid:#DCDED3;
  --paper:#E9EAE2;        /* WebGL clear colour */

  /* legacy names the page sheets (pass.css, season.css, pricing.css) read,
     mapped onto the system's roles */
  --bg:var(--s1);
  --r-4:var(--r-tap);
  --r-8:var(--r-card);
  --r-16:16px;
  --r-pill:999px;
  --ol650:var(--solid-bg-hover);
  --focus:var(--ol700);

  /* layout */
  --max:1120px;
  --gutter:20px;
  --block:72px;
  --block-season:48px;
  --hdr-h:56px;
  --sbar-h:40px;
  --gap:32px;

  /* motion */
  --dur:180ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* the arrival curve: quick off the mark, a long soft landing */
  --ease-in-view:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
}
@media (min-width:640px){:root{--gutter:40px;--block:104px;--block-season:64px}}
@media (min-width:1024px){:root{--gutter:80px;--block:128px;--block-season:80px;--hdr-h:64px}}

/* The app's dark set, switched on per region the way the app's nav column
   does it (TabBar marks it data-site-theme="dark"). Secondary ink is lifted (#BEC0B2: 10:1 on the deep ground, 7.5:1 on
   the olive) so nothing on a dark ground reads pale. */
[data-site-theme="dark"]{
  --s0:#1A1B14; --s1:#121209; --s2:#1E2017; --s3:#262820;
  --l100:#34372A; --l300:#565A48; --l500:#737762;
  --tint-4:rgba(255,255,255,.05); --tint-6:rgba(255,255,255,.08); --tint-8:rgba(255,255,255,.10);
  --ink900:#F1F2EA; --ink500:#BEC0B2; --ink400:#A6A89A; --ink300:#8B8D7F;
  --ol900:#0B0B06; --ol800:#1F2110; --ol700:#A3B84A; --ol600:#B8CC5E; --ol400:#8FA441;
  --cit500:#E1CD06; --cit700:#C9B705;
  --art-crest:237,238,230; --art-body:212,230,78; --art-tail:160,178,47; --art-acc:225,205,6; --art-lit:163,184,74;
  --pos:#A3B84A; --neg:#E0664A; --neg-ink:#EE8A71; --pos-ink:#A3B84A; --pos-text:#A3B84A;
  --control-on:#535D0A;
  --solid-bg:#F1F2EA; --solid-fg:#14160E; --solid-bg-hover:#FFFFFF;
  /* the app's: behind an outlined button on a dark ground */
  --quiet-fill:#1E2017;
  --focus:#C9DB6A;
  color-scheme:dark;
  color:var(--ink900);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--sbar-h,0px) + var(--hdr-h) + 16px)}
body{
  margin:0;color:var(--ink900);
  background:var(--s1);
  font-family:var(--sans);font-size:17px;line-height:26px;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:rgba(143,164,65,.32)}
main:focus{outline:none}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--solid-bg);color:var(--solid-fg);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:12px}

/* ---------- type: the v4 scale, with jumps ---------- */
.display{font-size:48px;line-height:50px;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.h2{font-size:36px;line-height:40px;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.h3{font-size:24px;line-height:28px;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:15px;line-height:22px;color:var(--ink500);text-wrap:pretty}
.body{font-size:17px;line-height:26px}
.small{font-size:14px;line-height:20px;color:var(--ink500)}
/* The app's label, as an eyebrow: Doto, square dots, full ink. */
.label{font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink900)}
/* Doto as a heading: the app's .panel-dark .h2 (EARN POINTS), larger. */
.dlabel{font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:28px;line-height:32px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink900)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num-l{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:24px;line-height:28px;font-weight:500;letter-spacing:-.02em}
.num-xl{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:36px;line-height:40px;font-weight:500;letter-spacing:-.03em}
.fig-xl{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:72px;line-height:72px;font-weight:500;letter-spacing:-.05em}
.pos{color:var(--pos)} .neg{color:var(--neg)}
@media (min-width:640px){
  .display{font-size:64px;line-height:66px}
  .h2{font-size:44px;line-height:48px}
  .lead{font-size:15px;line-height:23px}
  .dlabel{font-size:36px;line-height:40px}
  .fig-xl{font-size:96px;line-height:96px}
}
@media (min-width:1024px){
  .display{font-size:76px;line-height:78px}
  .h2{font-size:56px;line-height:60px}
  .h3{font-size:28px;line-height:32px}
  .dlabel{font-size:44px;line-height:48px}
  .num-l{font-size:28px;line-height:32px}
  .num-xl{font-size:44px;line-height:48px}
  .fig-xl{font-size:120px;line-height:116px}
}
@media (min-width:1200px){.display{font-size:88px;line-height:88px}}

/* ---------- layout ---------- */
.container{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--block)}
.section--tight{padding-block:calc(var(--block) * .5)}
.section--season{padding-block:var(--block-season)}
.section--grey{background:var(--s2)}
.section + .section--flush{padding-top:0}
/* One block between blocks on a page that flows section into section. */
.flow > .section + .section{padding-top:0}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-s{display:flex;flex-direction:column;gap:8px}
.stack-l{display:flex;flex-direction:column;gap:32px}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:760px}
.head .label{margin-bottom:2px}
.head--center{text-align:center;align-items:center;margin-inline:auto}
/* heading left, its one pill right (wraps under on a phone) */
.head--row{max-width:none;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.head--row > div{display:flex;flex-direction:column;gap:14px;max-width:720px}
@media (min-width:1024px){.head{margin-bottom:56px}}

/* Home sections: each carries its own ground, so the page has rhythm. */
.blk{padding-block:var(--block);position:relative}
.blk--white{background:var(--s0)}
:root{--sheet-r:28px}
.blk--sheet{margin-top:calc(-1 * var(--sheet-r));border-radius:var(--sheet-r) var(--sheet-r) 0 0;z-index:2}
@media (min-width:1024px){:root{--sheet-r:36px}}
.blk--paper{background:var(--s1)}
.blk--grey{background:var(--s2)}
.blk--olive{background:var(--ground-olive)}
.blk--deep{background:var(--ground-deep)}
/* a block that follows one on the same ground: half the gap */
.blk--follow{padding-top:calc(var(--block) * .5)}
.blk--white + .blk--white{padding-top:calc(var(--block) * .4)}

.split,.split-4-8,.split-5-7,.split-4-7{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
  .split-4-8{grid-template-columns:4fr 8fr}
  .split-5-7{grid-template-columns:5fr 7fr}
  .split-4-7{grid-template-columns:4fr 7fr;column-gap:calc(var(--gap) + 6%)}
}

/* ---------- BTN · buttons (base.css + components.css, value for value) ---------- */
/* The app's pill: 36 high, 0 18 in, 14/500, a 6 gap. One size on every
   page; .btn-sm is the app's 28. No arrows: the app draws a mark on a
   button only when the press leaves the product (.btn > .ic-out, its
   OutIcon), and the site does the same. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 18px;border-radius:999px;border:1px solid transparent;
  font-size:14px;line-height:1;font-weight:500;white-space:nowrap;
  text-decoration:none;cursor:pointer;user-select:none;
  transition:background-color .18s,border-color .18s,color .18s;
}
a.btn{text-decoration:none}
.btn-sm{height:28px;padding:0 12px;font-size:13px}
.btn-block{display:flex;width:100%}
/* The commit: ink on paper (paper on ink in a dark region), a weight more
   than the buttons beside it. */
.btn-primary{background:var(--solid-bg);color:var(--solid-fg)}
.btn-primary,.btn-cit,.btn-accent{font-weight:600}
/* The way elsewhere: the light hairline, the quiet fill behind it on a dark
   ground (transparent in the light set). */
.btn-ghost{background:var(--quiet-fill);border-color:var(--l300);color:var(--ink900)}
.btn-cit,.btn-accent{background:var(--cit500);color:#12140C;border-color:transparent}
/* the app's soft pill (components.css .btn-soft): a quiet way elsewhere that
   still reads as a press on white */
.btn-soft{background:var(--s2);border-color:var(--l300);color:var(--ink900)}
@media (hover:hover) and (pointer:fine){.btn-soft:hover{background:var(--s3);border-color:var(--ink300)}}
/* a press out of the product altogether: the app's OutIcon after the word */
.btn > .ic-out{flex:none;width:14px;height:14px;stroke-width:2;margin-left:-2px}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--solid-bg-hover)}
  .btn-ghost:hover{background:var(--s2);border-color:var(--ink300)}
  .btn-cit:hover,.btn-accent:hover{background:var(--cit700)}
}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}

/* The comet (components.css): the app's ASCII wave crossing the one press
   that starts the money working. site.js paints .comet-ascii; the word sits
   on the button's own ink, nothing drawn round it. */
.comet{position:relative;isolation:isolate;overflow:hidden}
.comet-in{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background-color:inherit}
.comet-ascii{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.comet-text{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:100%}

/* ---------- ICON · round button (base.css; l300 as on a page, .ch-acts) ---------- */
.iconbtn{width:36px;height:36px;flex:none;border-radius:999px;border:1px solid var(--l300);
  display:flex;align-items:center;justify-content:center;color:var(--ink900);position:relative;
  transition:background-color .18s}
@media (hover:hover) and (pointer:fine){.iconbtn:hover{background:var(--s2)}}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- LINK (inside running text only) ---------- */
.link{color:var(--ol700);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;border-radius:0;transition:color var(--dur)}
.link-arrow::after{content:'\2192';display:inline-block;margin-left:.3em;transition:transform var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .link:hover{color:var(--ol600)}
  .link-arrow:hover::after{transform:translateX(3px)}
}

/* ---------- logo (the app's lockup) ---------- */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink900);font-size:17px;line-height:1;font-weight:700;letter-spacing:-.02em;border-radius:6px;flex:none}
.logo svg{width:15px;height:19px;flex:none;color:var(--ink900)}
.logo-tld{font-weight:400;color:var(--ink500)}

/* ---------- HDR · header ---------- */
/* the season line and the header stay on screen together */
:root{--sbar-h:0px}
html:has(.sbar){--sbar-h:40px}
.hdr{
  position:sticky;top:var(--sbar-h);z-index:30;height:var(--hdr-h);
  background:rgba(250,250,248,0);
  /* a hairline only just there, from the first screen */
  border-bottom:1px solid rgb(22 21 20/.05);
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease);
}
.hdr.is-scrolled,.hdr.is-menu-open{
  background:rgba(250,250,248,.94);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
}
.hdr:not(.hdr--over){background:var(--s1)}
.hdr:not(.hdr--over).is-scrolled{background:rgba(250,250,248,.94)}
.hdr-inner{height:100%;display:flex;align-items:center;gap:24px}
.hdr .logo{margin-right:auto}
/* the small lockup in the header (the footer keeps the large one) */
.hdr .logo{font-size:15px;gap:7px}
.hdr .logo svg{width:12px;height:15px}
.hdr-nav{display:none;align-items:center;gap:4px}
.hdr-link{
  display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink500);text-decoration:none;
  transition:color var(--dur);
}
.hdr-link[aria-current="page"]{color:var(--ink900)}
@media (hover:hover) and (pointer:fine){.hdr-link:hover{color:var(--ink900)}}
/* One pill, outlined while the hero carries the commit; it fills (black,
   600) once the page's own press has gone: site.js .is-cta-filled, or on
   home .hc-fill, set as the next sheet covers the pinned hero (home.js). */
.hdr-cta{flex:none;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.hdr-cta.btn-ghost{background:transparent;border-color:rgb(22 21 20/.32)}
@media (hover:hover) and (pointer:fine){.hdr-cta.btn-ghost:hover{background:rgb(22 21 20/.05);border-color:rgb(22 21 20/.55)}}
.hdr.is-cta-filled .hdr-cta.btn-ghost,.hdr.hc-fill .hdr-cta.btn-ghost{background:var(--solid-bg);border-color:var(--solid-bg);color:var(--solid-fg);font-weight:600}
@media (max-width:759px){.hdr .hdr-cta{height:32px;padding:0 14px;font-size:13px}}
.hdr-burger{width:44px;height:44px;margin-right:-10px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;flex:none}
.hdr-burger span{position:relative;display:block;width:18px;height:1.5px;background:var(--ink900);border-radius:2px;transition:background-color var(--dur)}
.hdr-burger span::before,.hdr-burger span::after{content:'';position:absolute;left:0;width:18px;height:1.5px;background:var(--ink900);border-radius:2px;transition:transform 200ms var(--ease)}
.hdr-burger span::before{transform:translateY(-6px)}
.hdr-burger span::after{transform:translateY(6px)}
.hdr.is-menu-open .hdr-burger span{background:transparent}
.hdr.is-menu-open .hdr-burger span::before{transform:rotate(45deg)}
.hdr.is-menu-open .hdr-burger span::after{transform:rotate(-45deg)}
.hdr-menu{position:absolute;left:0;right:0;top:100%;background:var(--s1);border-bottom:1px solid var(--l300);padding:8px var(--gutter) 24px}
.hdr-menu[hidden]{display:none}
.hdr-menu-link{display:flex;align-items:center;height:56px;border-bottom:1px solid var(--l100);font-size:20px;font-weight:500;letter-spacing:-.01em;text-decoration:none;color:var(--ink900)}
.hdr-menu-link[aria-current="page"]{color:var(--ol700)}
@media (min-width:760px){
  .hdr-nav{display:flex}
  .hdr-burger,.hdr-menu{display:none!important}
  .hdr-inner{gap:28px}
}
.hdr--min .hdr-nav,.hdr--min .hdr-burger,.hdr--min .hdr-menu{display:none!important}
.hdr--min .logo{pointer-events:none}
@media (max-width:380px){.hdr .hdr-cta{padding:0 14px}.hdr-inner{gap:12px}}

/* ---------- shared: the octagon face, and the light set inside a dark region ---------- */
/* A piece of the app laid on a dark plate keeps the app's light set: a
   public card or a creator page is paper in the app, so it is paper here. */
.on-paper{
  --s0:#FFFFFF; --s1:#FAFAF8; --s2:#F5F5F0; --s3:#ECECE5;
  --l100:#E3E4DD; --l300:#C9CBC3; --l500:#A9ABA2;
  --ink900:#161514; --ink500:#4A4B45; --ink400:#5C5D57; --ink300:#76776F;
  --ol700:#535D0A; --ol600:#72860F; --pos:#72860F; --neg:#E0664A; --neg-ink:#B54327; --pos-text:#5F7010;
  --quiet-fill:transparent;
  color:var(--ink900);color-scheme:light;
}

/* ---------- SBAR · the season's line over the header (home) ----------
   Dark olive, one line in bold: the season, and its press, the app's Season
   mark (NavMark, the sprout) beside "Get your pass", drawn in citrine and
   not filled (it fills on hover). */
.sbar{position:sticky;top:0;z-index:31;height:40px;overflow:hidden;background:var(--ground-olive);color:#F7F7F2}
.sbar-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px}
.sbar-t{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;line-height:19px;font-weight:700}
.sbar-sub{font-weight:700;color:rgb(247 247 242/.72)}
.sbar-a{flex:none;gap:6px;height:28px;background:transparent;border-color:var(--cit500);color:var(--cit500);font-weight:700}
@media (hover:hover) and (pointer:fine){.sbar-a:hover{background:var(--cit500);color:#12140C}}
.sbar-ic{width:14px;height:14px;flex:none;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:639px){.sbar-sub{display:none}}

/* ---------- HERO (home): the scene and the promise ---------- */
/* The WebGL scene (hero-scene.js) fills .hero-art and frames its
   composition on .hero-slot; the poster is the same scene, rendered, shown
   under reduced motion, without WebGL, or until the scene is live. The
   branch is the one picture. The first screen itself (the close-up that
   pins and is covered by the next sheet) is home.css .hc, built on these. */
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;margin-inline:auto;max-width:980px;pointer-events:auto}
/* The one hero press: the app's pill at the height of the commit at the
   foot of a desktop wizard (.sheet.wizard .sumbar-b .btn, 40 / 0 22), with
   the app's comet in it: room either side of the word for the wave to
   cross. Also the final CTA's press. */
.btn.hero-cta{height:40px;padding:0 44px}
/* the venues as words with their marks, not as pills: nothing here presses */
.chain{display:inline-flex;align-items:center;gap:6px;color:var(--ink500);font-size:16px;line-height:22px;font-weight:500;white-space:nowrap}
.chain svg{width:18px;height:18px;flex:none}

/* the scene: canvas over the poster, both filling the hero */
.hero-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 600ms var(--ease);pointer-events:auto}
.is-live > .hero-art .hero-canvas,.is-live .hero-canvas{opacity:1}
.hero-poster,.hero-poster img{position:absolute;inset:0;width:100%;height:100%}
.hero-poster img{object-fit:cover;object-position:50% 0;height:122%}
.has-scene .hero-poster{opacity:0;visibility:hidden}
.has-scene.is-failed .hero-poster{opacity:0;visibility:visible;transition:opacity 900ms var(--ease)}
.has-scene.is-failed.is-poster .hero-poster{opacity:1}
/* the wait (site.js heroLoader): the tape the scene opens on, printed in
   dots on the sky; it fades in with the page and lets go as the scene's own
   candles print over it (or as the poster comes up) */
.hero-loader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 400ms var(--ease)}
.hero-loader.is-on{opacity:1}
.hero-loader.is-out{opacity:0;transition:opacity 1200ms var(--ease) 250ms}
.is-live .hero-poster{opacity:0;visibility:hidden;transition:opacity 600ms var(--ease),visibility 0s 600ms}
/* the frame the scene is composed in: the lower part of the hero, a little
   wider than it, so the branch runs off both edges */
.hero-slot{position:absolute;pointer-events:none;left:-6%;right:-6%;top:20%;bottom:-4%}

@keyframes rise-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- SCAN · the comet, reading the market ---------- */
/* The app's comet (components.css .comet: AsciiWave crossing the black
   commit pill, Autotrade's Start) carrying the app's 'Analyzing market'
   state (StrategyCard: .dot3 before the words). The pill is the desktop
   commit's 44 (.autoside .dock-commit), the word the button's 14/600 in
   the reading face; the side padding is the room the wave crosses in.
   A readout here, not a press. */
.scan{position:relative;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 40px;border-radius:999px;background:#100F0F;color:#F7F7F2;font-size:14px;line-height:1;font-weight:600;white-space:nowrap}
.scan .comet-text{width:auto;height:auto;gap:0}
/* the app's three dots, lit in turn, never all out (base.css .dot3) */
.dot3{display:inline-flex;align-items:center;gap:2.5px;margin-right:6px}
.dot3 i{width:3px;height:3px;border-radius:999px;background:currentColor;opacity:.25;animation:dot3 1.4s ease-in-out infinite}
.dot3 i:nth-child(2){animation-delay:.18s}
.dot3 i:nth-child(3){animation-delay:.36s}
@keyframes dot3{0%,55%,100%{opacity:.25}22%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dot3 i{animation:none;opacity:.55}}

/* ---------- SEG · the app's segmented switch (components.css .seg) ---------- */
/* 32 in a 3px track, 14/500, the chosen one paper with no edge drawn. */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:3px;background:var(--s2);border-radius:999px}
.seg > *{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;border-radius:999px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink500);white-space:nowrap}
.seg > .is-on{background:var(--s0);color:var(--ink900)}
/* on a plate that is already --s2, the track one step further down (the
   app does the same for a mark on a filled plate: .card .skel) */

/* ---------- OPT · the app's option row (components.css .opt) ---------- */
/* Filled, not outlined: --s2 with the --l300 edge, 12/14 in; the chosen one
   takes the olive edge and a step darker (--s3). Radio 18 on --l300. */
.opt{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:12px 14px;background:var(--s2);border:1px solid var(--l300);border-radius:var(--r-tap);text-align:left}
.opt .r{position:relative;width:18px;height:18px;margin-top:1px;border-radius:999px;border:1px solid var(--l300)}
.opt .t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;line-height:20px;font-weight:500}
.opt-from{flex-shrink:0;font-size:12px;font-weight:400;color:var(--ink300)}
.opt .d{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--ink500)}
.opt.is-on{border-color:var(--ol700);background:var(--s3)}
.opt.is-on .r{border-color:var(--ol700)}
.opt.is-on .r::after{content:'';position:absolute;inset:4px;border-radius:999px;background:var(--ol700)}

/* ---------- TRACK · a track drawn to scale, that roots and sprouts ---------- */
/* The app's walk (curve.ts), thinned as the app thins a chart. A flat tint
   under the line (no gradient on UI), the start on a dotted 100. Where the
   line begins it puts down roots; where it ends it keeps growing. */
.track{display:block;overflow:visible}
.track-a{fill:color-mix(in srgb,var(--pos) 12%,transparent);stroke:none}
.track-l{fill:none;stroke:var(--pos);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.track-b{stroke:var(--l500);stroke-width:1;stroke-dasharray:2 4}
.track-g{stroke:var(--l300);stroke-width:1;stroke-dasharray:2 4}
.track-o{fill:var(--s0);stroke:var(--ink900);stroke-width:2}
.sprout .stem,.sprout .twig{fill:none;stroke:var(--pos);stroke-width:2.5;stroke-linecap:round}
.sprout .twig{stroke-width:1.8}
.sprout .leaf{fill:var(--pos)}
.sprout .leaf--b{fill:var(--ol400)}
.roots path{fill:none;stroke:var(--ol700);stroke-linecap:round}
.roots .r1{stroke-width:2}
.roots .r2{stroke-width:1.6}
.roots .r3{stroke-width:1.1}
.roots .r4{stroke-width:.8;opacity:.7}

/* ---------- shared chart strokes (Sparkline.tsx, TrackCurve.tsx) ---------- */
/* Flat fill under the line: the app fades it, the site does not draw
   gradients on UI, so it is one tint of the verdict colour. */
.spark{display:block;width:100%;height:44px;overflow:visible}
.spark-a{fill:color-mix(in srgb,var(--pos) 12%,transparent);stroke:none}
.spark-b{stroke:var(--l300);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.spark-l{fill:none;stroke:var(--pos);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark.is-down .spark-a{fill:color-mix(in srgb,var(--neg) 12%,transparent)}
.spark.is-down .spark-l{stroke:var(--neg)}

/* ---------- MK · the public strategy card (components.css) ---------- */
/* Not on any page now: home shows its strategies as a table (home.css .st).
   Kept, with BEST below, as the fallback the owner may return to (the
   cards, as home had them until Oct 2026). */
/* As the app's Strategies shelf draws it (components.css .mk): the
   pressable corner 4, the hairline, the paper fill. Checked against the
   running app, 29.10.2026; don't soften it. */
.mk{position:relative;background:var(--s2);border:1px solid var(--l300);border-radius:var(--r-tap);padding:14px;display:flex;flex-direction:column;min-width:0}
.mk-t{font-size:17px;line-height:23px;font-weight:500;letter-spacing:-.01em;padding-right:46px}
.mk-t + .mk-meta{padding-right:30px}
/* the save mark in the card's corner, as on the app's shelf (not pressable here) */
.mk-save{position:absolute;right:12px;top:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--tint-6);border-radius:999px;background:var(--tint-4);color:var(--ink500)}
.mk-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:6px;padding-bottom:12px;border-bottom:1px solid var(--l100);font-family:var(--mono);font-size:12px;line-height:17px;color:var(--ink500)}
.mk-meta > * + *{padding-left:10px;border-left:1px solid var(--l300)}
.mk-meta .m-where{display:flex;align-items:center;gap:7px;min-width:0}
.mk-meta .m-coins{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The app's coin stack (.stack in the app; .coins here, where .stack is the
   layout primitive): marks overlapped, a paper ring between them. */
.coins{display:flex;flex-shrink:0}
.coin{width:24px;height:24px;display:block;flex:none;border-radius:999px}
.coins .coin{margin-left:-8px;box-shadow:0 0 0 2px var(--s2)}
.coins .coin:first-child{margin-left:0}
.mk-meta .coins .coin{width:17px;height:17px;margin-left:-6px;box-shadow:0 0 0 2px var(--s2)}
.mk-meta .coins .coin:first-child{margin-left:0}
.authorlink{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;color:inherit;text-decoration:none}
.authorlink .h{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cface{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;border-radius:999px;font-family:var(--sans);font-size:11px;font-weight:700;line-height:1}
.mk-meta .cface{width:17px;height:17px;font-size:9px}
.vbadge{width:16px;height:16px;flex-shrink:0}
.vbadge.is-sm{width:14px;height:14px}
.mk-b{display:grid;grid-template-columns:minmax(0,1fr) 1.25fr;align-items:center;gap:14px;margin:20px 0 2px}
.mk-lead .t,.mk-figs .t{display:block;font-size:14px;line-height:19px;font-weight:500;color:var(--ink500)}
.mk-lead .v{display:block;font-family:var(--mono);font-size:26px;line-height:32px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.mk-lead .v.pos{color:var(--pos)}
.mk-lead .v.neg{color:var(--neg)}
.mk-figs .v.neg{color:var(--neg-ink)}
.mk-spark{height:94px}
.mk-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 14px}
.mk-figs .v{display:block;font-family:var(--mono);font-size:18px;line-height:24px;font-weight:500;margin-top:1px;white-space:nowrap}
.mk-figs .v small{font-size:13px;color:var(--ink300);font-weight:400;margin-left:5px}
.mk .btn-block{margin-top:auto}
/* The facts line wraps whole: coins, age and author each keep their width
   and move to the next line rather than break or lose letters. (The app's
   .mkgrid keeps it on one line from 1024 because its cards are wider; three
   to a row here, the author would be cut.) */
.mk-meta > *{flex:none;white-space:nowrap}
.mk-meta .m-coins,.mk-meta .authorlink .h{overflow:visible;text-overflow:clip}
/* the fanned cards are narrower than a shelf card: their facts line wraps
   whole (no ellipsis on the coins or the author) */
@media (max-width:359px){.mk-lead .v{font-size:24px}.mk-figs .v{font-size:16px}}

/* ---------- BEST · three public cards in a row (unused: the fallback for home.css .st) ---------- */
/* In a row, the three share their rows (subgrid): titles, meta lines,
   figures and buttons line up across the cards whatever wraps in one. */
.best .mk-figs .t{white-space:nowrap}
@media (min-width:960px){
  .best{display:grid;column-gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto)}
  .best > .mk{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
}
@media (min-width:960px) and (max-width:1199px){.best .mk-figs .t{font-size:13px}.best .mk-figs .v{font-size:16px}}
@media (min-width:1024px){.best{column-gap:24px}}
@media (max-width:420px){.best .mk-figs{gap:6px}.best .mk-figs .t{font-size:13px}.best .mk-figs .v{font-size:16px}}
/* Under 960px the three stand one under another, the full width, on the
   page's own gutter. */
@media (max-width:959px){.best{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}}
/* ---------- SWIPE · a row of cards on a phone (swipe.js) ---------- */
/* Under 640px a [data-swipe] list scrolls sideways, one card to a stop,
   the next one showing at the edge; a dot per card under it, the one in
   view lit. The row runs to the screen's edges and keeps the gutter as its
   scroll padding, so the first card starts on the page's line. */
.swipe-dots{display:none}
@media (max-width:639px){
  [data-swipe]{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  [data-swipe]::-webkit-scrollbar{display:none}
  [data-swipe] > *{flex:0 0 86%;min-width:0;scroll-snap-align:start}
  .swipe-dots{display:flex;justify-content:center;gap:0;margin-top:12px}
  .swipe-dots button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
  .swipe-dots button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--l300);transition:background-color var(--dur)}
  .swipe-dots button[aria-current="true"]::before{background:var(--ink900)}
}
.best-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:32px;text-align:center}
.best-foot .risk{background:none;padding:0;align-items:center;max-width:44em;font-size:13px;line-height:18px}
.best-more{display:flex}
@media (min-width:1024px){.best-foot{margin-top:32px}}

/* ---------- RISK · risk note: a notice, read-only ---------- */
.risk{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--s2);border-radius:var(--r-card);font-size:14px;line-height:20px;color:var(--ink500)}
/* the app's explanation mark (components.css .help): a disc, not a ring */
.risk-ico{flex:none;width:20px;height:20px;border-radius:999px;background:var(--s3);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;line-height:1;color:var(--ink500)}

/* ---------- AV · the octagon avatar's inside (components.css .ch-av) ---------- */
.av-i{position:absolute;inset:5px;clip-path:var(--av-shape);background:var(--s3);overflow:hidden}
.av-i img,.av-fill{display:block;width:100%;height:100%;object-fit:cover}
.av-fill{display:flex;align-items:center;justify-content:center}
.av-l{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em}

/* ---------- EARN · creators, on the olive ground (home) ---------- */
/* Words left; right, the app's creator header at full size (cover line
   art, octagon, seal, four figures, two strategies) on paper, and the
   creator share laid over its corner on the deep ground. */
.earn{overflow:hidden}
.earn-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.earn-body{display:flex;flex-direction:column;align-items:flex-start}
.earn-body .h2{margin-top:14px}
.earn-body .lead{margin-top:14px;max-width:26em}
.earn-body .btn{margin-top:32px}
.earn-art{position:relative;display:flex;flex-direction:column;gap:16px}
/* The app's creator header (CreatorHeader.tsx, components.css .chead
   .ch-b .ch-n.has-art .ch-av .ch-id .ch-figs) at the phone page's own
   values: the strip at the soft corner, the octagon hanging 40 off its
   edge with the paper ring of .ch-av, the name 21 with the small seal, the
   line under it, four figures across with no tile round them. */
.cc{position:relative;display:block;padding:12px 12px 6px;background:var(--s0);border-radius:var(--r-card)}
.cc-b{display:block;aspect-ratio:10 / 3;border-radius:var(--r-card);overflow:hidden;background:var(--s2)}
.cc-art{display:block;width:100%;height:100%}
.cc-n{position:relative;display:flex;align-items:flex-end;gap:16px;margin-top:-40px}
.cc-av{position:relative;display:block;flex:none;width:112px;height:112px;clip-path:var(--av-shape);background:#FFF}
.cc-av .av-i{inset:5px}
.cc-av .av-l{font-size:44px}
.cc-id{display:block;flex:1;min-width:0;padding-bottom:14px}
.cc-name{display:flex;align-items:center;gap:6px;font-size:21px;line-height:27px;font-weight:500;letter-spacing:-.01em}
.cc-seal{width:14px;height:14px;flex:none}
.cc-bio{display:block;margin-top:4px;font-size:14px;line-height:19px;color:var(--ink500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-figs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:20px}
.cc-figs > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-figs .t{display:block;font-size:11px;line-height:15px;color:var(--ink500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-figs b{display:block;font-family:var(--mono);font-size:14px;line-height:19px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--ink900)}
.cc-figs b.pos{color:var(--pos)}
.cc-figs small{font-size:12px;font-weight:400;color:var(--ink300);margin-left:2px}
/* two of their public strategies, as a short list under the figures (the
   page itself goes on to their cards) */
.cc-list{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--l100)}
.cc-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 66px;align-items:center;gap:12px;padding:12px 0;font-size:15px;line-height:20px;font-weight:500}
.cc-row + .cc-row{border-top:1px solid var(--l100)}
.cc-rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-row .cc-spark{height:28px}
.cc-row b{text-align:right;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--pos)}
/* The app's referral terms card (components.css .refwhat at 68d005c): the
   dark plate with the money ground under a scrim, three plan panes at a
   tenth of paper, the share in the olive that reads on black. */
.ref{position:relative;color:#F7F7F2;background:var(--ol900);border-radius:var(--r-plate);padding:20px;overflow:hidden}
.ref::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.9;
  background:linear-gradient(100deg,rgb(16 15 15/.8) 0%,rgb(16 15 15/.66) 36%,rgb(16 15 15/.5) 70%,rgb(16 15 15/.58) 100%),url('money-ground.webp') center/cover no-repeat}
.ref > *{position:relative}
.ref-h{font-size:17px;line-height:22px;font-weight:600;margin-bottom:16px}
.ref-k{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;font-size:15px;line-height:20px;font-weight:500}
.ref-k .once{font-size:12px;line-height:16px;font-weight:400;color:rgb(247 247 242/.55)}
.ref hr{border:0;border-top:1px solid rgb(247 247 242/.14);margin:16px 0}
.ref-bon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ref-bon > div{background:rgb(247 247 242/.08);border-radius:var(--r-inner);padding:10px 12px;min-width:0}
.ref-bon span{display:block;font-size:12px;line-height:16px;color:rgb(247 247 242/.72);margin-bottom:2px}
.ref-bon b{display:block;font-family:var(--mono);font-size:22px;line-height:26px;font-weight:400}
.ref-big{font-family:var(--mono);font-size:26px;line-height:30px;color:var(--ol400);margin-top:4px}
.ref-d{font-size:13px;line-height:18px;color:rgb(247 247 242/.72);margin-top:4px;max-width:34em}
@media (min-width:640px){
  .cc{padding:16px 16px 8px}
  /* the wide page's figure size (desktop.css .chead .ch-figs) */
  .cc-figs .t{font-size:13px;line-height:18px}
  .cc-figs b{font-size:20px;line-height:26px}
  .cc-row{grid-template-columns:minmax(0,1fr) 110px 72px}
  .ref{padding:24px}
  .ref-bon b{font-size:26px;line-height:30px}
  .ref-big{font-size:32px;line-height:36px}
}
@media (min-width:900px){
  .earn-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:center}
  .earn-art{margin-right:8px}
}
/* ---------- FAQ · a clear list, round plus buttons ---------- */
.faq{border-top:1px solid var(--l300)}
.faq-item{border-bottom:1px solid var(--l300)}
.faq-q{font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.01em;margin:0}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;text-align:left;border-radius:4px}
/* The app's .iconbtn: 36 round, hairline, the glyph in ink. */
.faq-icon,.acc-icon{
  position:relative;flex:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--l300);
  transition:background-color .18s,border-color .18s;
}
.faq-icon::before,.faq-icon::after,.acc-icon::before,.acc-icon::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink900);border-radius:1px;transition:transform 200ms var(--ease),opacity 200ms var(--ease)}
.faq-icon::after,.acc-icon::after{transform:rotate(90deg)}
/* open: the app's pressed round mark (.help[aria-expanded]): a tint of the ink */
[aria-expanded="true"] > .faq-icon,[aria-expanded="true"] > .acc-icon{background:color-mix(in srgb,var(--ink900) 14%,transparent);border-color:transparent}
[aria-expanded="true"] > .faq-icon::after,[aria-expanded="true"] > .acc-icon::after{transform:rotate(90deg) scaleX(0);opacity:0}
@media (hover:hover) and (pointer:fine){.faq-btn:hover .faq-icon,.acc-btn:hover .acc-icon{background:var(--tint-6)}}
.faq-a,.acc-panel{display:grid;grid-template-rows:1fr}
.faq-a > *,.acc-panel > *{min-height:0}
.faq-a p{max-width:62ch;color:var(--ink500);font-size:15px;line-height:22px;padding:0 56px 24px 0}
.faq-a p + p{margin-top:-10px}
.faq-a .btn{margin:-4px 0 24px}
.faq-a .link{font-size:15px}
.js .faq-a,.js .acc-panel{transition:grid-template-rows 220ms var(--ease),visibility 0s}
.js [data-acc-item]:not(.is-open) > .faq-a,
.js [data-acc-item]:not(.is-open) > .acc-panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 220ms var(--ease),visibility 0s 220ms}
.js .faq-a > *,.js .acc-panel > *{overflow:hidden}
@media (min-width:1024px){.faq-q{font-size:20px;line-height:28px}.faq-btn{padding:24px 0}}
.faq-split{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.faq-split{grid-template-columns:4fr 8fr;gap:var(--gap)}}

/* ---------- ACC · collapsible ---------- */
.acc{background:var(--s2);border:1px solid var(--l300);border-radius:var(--r-tap)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 12px 0 20px;text-align:left;border-radius:var(--r-tap)}
.acc-label{display:none}
.acc-panel{padding:0 20px 20px}
.acc-list{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.acc-list li{font-size:15px;line-height:22px;color:var(--ink900);padding-top:12px;border-top:1px solid var(--l300)}
.acc-list li:first-child{border-top:0;padding-top:0}
@media (min-width:640px){
  .acc--open-md .acc-btn{display:none}
  .acc--open-md .acc-label{display:block;padding:24px 28px 0}
  .acc--open-md .acc-panel{display:block!important;visibility:visible!important;grid-template-rows:1fr!important;padding:20px 28px 28px}
  .acc--open-md .acc-panel > *{overflow:visible}
  .acc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
  .acc-list li{border-top:0;padding-top:0}
}
@media (min-width:1024px){.acc-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- CTA band (other pages): light band, the black pill ---------- */
.cta-band{background:var(--s2);padding-block:var(--block);text-align:center;border-top:1px solid var(--l100)}
.cta-band .container{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-band .btn{margin-top:20px}
/* ---------- FTR · footer: the hero's sky, ending on a strip of ground ---------- */
/* Every page ends here. The sky (--hero-sky-mid) runs on from home's final
   CTA (home.css .end-cta, the same .end set); elsewhere the footer comes up
   over the page's CTA band as the site's rounded sheet (.end-ftr--sheet).
   The branch (assets/branch-cut.webp) is turned into a low arch lying in
   front of a big Satoshi `botany.tech`, which sinks into a strip of ground
   carrying the lockup, the links and the risk line.
   site.js initFooter: the word rises out of the ground once, the branch
   drifts by at most 24px with the scroll; both still under reduced motion. */
.end{--end-sky:var(--hero-sky-mid);--end-ground:#CDD0C1;--end-ink:#2E2F29;--end-word:var(--ground-olive)}
.end-ftr{position:relative;z-index:2;background:var(--end-sky);color:var(--end-ink)}
.end-ftr--sheet{margin-top:calc(-1 * var(--sheet-r));border-radius:var(--sheet-r) var(--sheet-r) 0 0;overflow:clip}
.end-stage{position:relative;overflow-x:clip;overflow-y:visible;padding-top:clamp(120px,19vw,290px)}
/* the branch: a closer frame than the hero's, turned into a low arch that
   lies in front of the name: its two ends cross the tops of the b and the y */
.end-branch{position:absolute;z-index:2;pointer-events:none;width:140vw;left:-34vw;top:-6vw;transform:translate3d(0,var(--end-py,0px),0) rotate(var(--end-rot,12.5deg))}
.end-branch img{display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 18px 18px rgb(44 46 17/.14))}
/* never an empty sky: until the picture has arrived and decoded, a 40px
   copy of it (inline, ~0.5 KB) stands in its place, blurred; site.js
   initFooter fetches the real one well ahead and fades it in (.is-in) */
.end-branch picture{position:relative;display:block}
.end-branch picture::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;filter:blur(8px);transition:opacity 900ms var(--ease);
  background:url(data:image/webp;base64,UklGRiYCAABXRUJQVlA4WAoAAAAQAAAAJwAACgAAQUxQSP8AAAABkGNb27E91/Pc72/bKFXaGIDt/++t2E6dfwKxzYqVVdu2k1dX8GkIETEBCGQm/g9e/Ojto6P9AAzDEBUAjRWLwss2bL1Jj2dqFQKqxNA49ZwkTdOyfjvklTXrNh+/5IcSAGrkGd1fDj3/dujRm9IiAKIbZw+Tts3ft89sam+et0jH8UGJ4P/UmfskHcvhkUJ4LNr3jr/v3X7wBhBDAIRm9my5+oG0f/0iuQxQ2hARIKEw10BQtFIAEjoPP/hOkqZJ8tfRBoiGRy3wXja1+y1Jmjb/3zWaBwh8VForKBW3lyQdmyQ/37k4XwlACwJ4lo5luXQ/vZgoyw4GIIZGQAEAVlA4IAABAADQBQCdASooAAsAPo06l0glI6IhNUgAoBGJbAC09iAN4vK9n22K0aTs8LlGeuZGuvrSiKDJUyQAAP7qd3d1Q57O1tsxCBKMeTT+F6lu+p+HNC+RYXD4PkZCWiwdsJVOdpCoWKvYincltdz5fjp0ZSPuuIfh9BgcAvlvexFjiYJ8qmDrXVnfQ7+Ya4EbG25SWD1p8CP0WGNnsS4acVJHzogaurF5vt/FZRUizgVp2KoUVQxwJWLvPvd5K0IpjkpLS3ydyTG+XsgRNgSml1Mmwgbe3BbENqy/XWztnxzCKOsiRjNsISz/oLzwd/Abbd71951Nm98B83+xkQyAAIlauAAA) center/100% 100% no-repeat}
.js .end-branch picture::before{opacity:1}
.js .end-branch img{opacity:0;transition:opacity 700ms var(--ease)}
.js .end-branch.is-in img{opacity:1}
.js .end-branch.is-in picture::before{opacity:0}
.end-branch.is-now img,.end-branch.is-now picture::before{transition:none}
/* the name: Satoshi, tight like the h1, dark olive, standing under the tree:
   the branch (above) is in front of it, the ground strip cuts only the y's tail */
.end-word{position:relative;z-index:1;margin:0 0 -.1em;display:flex;justify-content:center;user-select:none;pointer-events:none}
/* the full name is wider than `botany` and so set smaller: the stage
   gives it more sky, and the arch lies flatter, so the wood still crosses
   only the tops of the b and the h */
.end-ftr{--end-rot:6deg}
.end-stage{padding-top:clamp(150px,25vw,370px)}
.end-word > span{display:block;font-family:var(--sans);font-weight:700;font-size:min(15.2vw,222px);line-height:.86;letter-spacing:-.065em;padding-right:.06em;white-space:nowrap;color:var(--end-word);
  transform:translateY(var(--end-wy,0));transition:transform 1200ms var(--ease-in-view)}
.js .end-word:not(.is-up){--end-wy:.3em}
/* the name as the lockup sets it: the .tech a step lighter */
.end-tld{font-weight:400;letter-spacing:-.05em}
.end-ground{position:relative;z-index:3;background:var(--end-ground);border-top:1px solid rgb(44 46 17/.35)}
.end-row{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:28px 0 24px}
.end-id{display:flex;flex-direction:column;gap:10px}
.end-ftr .logo{font-size:20px;color:var(--ink900)}
.end-ftr .logo svg{width:18px;height:22px;color:var(--ol700)}
.end-ftr .logo-tld{color:var(--end-ink)}
/* Pass, Pricing, X, Telegram: four words alike, each with its small mark
   in the same ink -- no outline, no fill, no pill. The underline comes on
   hover, and stays on the page you are on. */
.end-nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.end-nav a{display:inline-flex;align-items:center;gap:7px;height:32px;font-size:15px;line-height:1;font-weight:500;letter-spacing:-.01em;color:var(--ink900);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .18s}
.end-nav a[aria-current="page"]{text-decoration-color:currentColor}
.end-nav .ic{width:16px;height:16px;stroke-width:1.6;color:currentColor}
@media (hover:hover) and (pointer:fine){.end-nav a:hover{text-decoration-color:currentColor}}
.end-legal{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px;line-height:18px;color:var(--end-ink);padding:16px 0 28px;border-top:1px solid rgb(22 21 20/.12)}
@media (min-width:640px){
  .end-legal{flex-direction:row;justify-content:space-between;gap:24px}
  .end-legal p:last-child{text-align:right;max-width:36em}
}
@media (min-width:900px){.end-row{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}}
@media (min-width:1024px){.end-row{padding:32px 0 28px}}
@media (max-width:639px){
  .end-stage{padding-top:46vw}
  .end-branch{width:160vw;left:-44vw;top:4vw}
  .end-word > span{font-size:16.6vw}
  .end-nav{gap:4px 24px}
}
/* off home there is no sky above the footer: the branch and the word come
   down together, so the stub stays inside the sheet's own sky */
.end-ftr--sheet .end-stage{padding-top:calc(clamp(150px,25vw,370px) + 6vw)}
.end-ftr--sheet .end-branch{top:0}
@media (max-width:639px){
  .end-ftr--sheet .end-stage{padding-top:56vw}
  .end-ftr--sheet .end-branch{top:14vw}
}
@media (prefers-reduced-motion:reduce){
  .end-branch{transform:rotate(var(--end-rot,12.5deg))}
  .js .end-word:not(.is-up){--end-wy:0}
}

/* ---------- STEP · numbered steps (/pass) ---------- */
.steps{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);counter-reset:step}
.step{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;align-content:start}
.step-thumb{position:relative;overflow:hidden;background:var(--s2);border:1px solid var(--l100);border-radius:var(--r-card);aspect-ratio:1/1;display:flex;justify-content:center;align-items:flex-start}
.step-thumb img{width:84%;margin-top:10%;border-radius:8px 8px 0 0;border:1px solid var(--l100);border-bottom:0;background:var(--s0)}
.step-thumb img.is-card{border-radius:8px;border-bottom:1px solid var(--l100);margin-top:auto;margin-bottom:auto}
.step-body{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--l300);font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;color:var(--ink900);margin-bottom:6px}
.step--key .step-num{background:var(--solid-bg);border-color:var(--solid-bg);color:var(--solid-fg)}
.step-text{font-size:15px;line-height:22px;color:var(--ink500);text-wrap:pretty}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:24px}
  .step{grid-template-columns:minmax(0,1fr);gap:20px}
  .step-thumb{aspect-ratio:5/4}
  .step-thumb img{width:78%;margin-top:9%;border-radius:12px 12px 0 0}
  .step-thumb img.is-card{width:84%;border-radius:10px}
  .step-body{padding-top:0}
}
@media (min-width:1024px){.steps{gap:32px}}

/* ---------- TAG · tags and chips (base.css .tag) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--l300);background:var(--s0);font-size:14px;line-height:1;color:var(--ink900);white-space:nowrap}
.chip--no{border-style:dashed;background:transparent;color:var(--ink500);text-decoration:line-through;text-decoration-thickness:1px}
.tag{display:inline-flex;align-items:center;white-space:nowrap;height:20px;padding:0 7px;border-radius:2px;font-size:11px;font-weight:500;line-height:1;letter-spacing:.02em;border:1px solid var(--l300);color:var(--ink500);background:transparent}
.tag.live{border-color:var(--ol700);color:var(--ol700)}
.tag.acc{background:var(--cit500);border-color:var(--cit500);color:var(--ol900)}
/* a running strategy past its first trade (components.css .tag.trading) */
.tag.trading{gap:6px;height:24px;padding:0 10px;border-radius:999px;border-color:transparent;background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--ol700);font-size:12px;font-weight:600}
.tradedot{width:6px;height:6px;border-radius:50%;background:var(--pos)}

/* ---------- QUEST · quest rows (/season) ---------- */
.quests{display:flex;flex-direction:column;gap:8px}
.quest{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 18px;background:var(--s0);border:1px solid var(--l300);border-radius:var(--r-tap);cursor:default}
.quest-ring{--p:0;width:20px;height:20px;border-radius:50%;margin-top:2px;border:1.5px solid var(--l300);background:conic-gradient(var(--ol700) calc(var(--p) * 360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 5.5px,#000 6px);mask:radial-gradient(circle,transparent 5.5px,#000 6px)}
.quest-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.quest-title{font-size:16px;line-height:22px;font-weight:500;letter-spacing:-.01em}
.quest-text{font-size:14px;line-height:20px;color:var(--ink500)}
.quest-body .tag{align-self:flex-start;margin-bottom:4px}
.quest-pts{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;line-height:22px;text-align:right;white-space:nowrap;color:var(--pos-text)}
.quest--start{border-color:var(--ol700);background:var(--s1)}
.quest--progress .quest-ring{border-color:var(--l300)}
.quest--done{opacity:.6}
.quest--done .quest-ring{background:var(--ol700);border-color:var(--ol700);-webkit-mask:none;mask:none;position:relative}

/* ---------- PLAN + TOGGLE (/pricing): the app's .plan plate ---------- */
/* the app's .seg, sized to its words: 32 in a 3px --s2 track, 14/500 */
.toggle{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:var(--s2)}
.toggle-opt{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border-radius:999px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink500);transition:background-color .18s,color .18s}
.toggle-opt[aria-checked="true"]{background:var(--s0);color:var(--ink900)}
/* 2 months free: a round pill tinted with the olive it is written in, so
   it never reads as the square-cornered Recommended tag (owner, 01.11.2026) */
.toggle-badge,.tag.live.toggle-badge{display:inline-flex;align-items:center;height:20px;padding:0 9px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ol700) 12%,transparent);color:var(--ol700);font-size:11px;font-weight:500;line-height:1}
@media (hover:hover) and (pointer:fine){.toggle-opt[aria-checked="false"]:hover{color:var(--ink900)}}
.plans{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.plans{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plan{position:relative;display:flex;flex-direction:column;padding:24px;background:var(--s0);border:1px solid var(--l300);border-radius:var(--r-tap)}
.plan--rec{border:2px solid var(--ol700);padding:23px;background:var(--s0)}
.plan-tag{position:absolute;top:0;left:23px;transform:translateY(-50%)}
.plan-name{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.015em}
.plan-for{font-size:15px;line-height:21px;color:var(--ink500);margin-top:4px;min-height:42px}
.plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:20px}
.plan-amount{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:36px;line-height:40px;font-weight:500;letter-spacing:-.03em;min-width:3.2ch}
.plan-was{font-family:var(--mono);font-size:16px;color:var(--ink500);text-decoration:line-through;text-decoration-thickness:1px}
.plan-per{font-size:14px;color:var(--ink500)}
.plan-note{min-height:16px;margin-top:6px}
.plan .btn{margin-top:20px}
.plan-list{display:flex;flex-direction:column;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--l300)}
.plan-list li{position:relative;padding-left:26px;font-size:15px;line-height:21px}
.plan-list li::before{content:'';position:absolute;left:2px;top:5px;width:9px;height:5px;border:solid var(--ol600);border-width:0 0 2px 2px;transform:rotate(-45deg)}
@media (min-width:1024px){.plan-amount{font-size:44px;line-height:48px}}

/* ---------- CD · countdown ---------- */
.cd-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-weight:500}
.cd{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--s3);font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:500;color:var(--ink900);white-space:nowrap}
.cd.is-ended{background:transparent;padding:0;font-family:var(--sans)}

/* ---------- EMPTY ---------- */
.empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:26px 18px;background:var(--s2);border:1px solid var(--l100);border-radius:var(--r-card);color:var(--ink500);font-size:15px;line-height:22px}

/* ---------- TBD · owner placeholders, visible and marked ---------- */
.tbd{display:inline;padding:1px 6px;border:1px dashed var(--ink400);border-radius:2px;font-family:var(--mono);font-size:.82em;letter-spacing:0;color:var(--ink500);white-space:nowrap;background:var(--s3)}
.tbd-mark{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink500);white-space:nowrap}
@media (max-width:759px){.tbd-mark{display:none}}

/* ---------- REVEAL ---------- */
@media (prefers-reduced-motion:no-preference){
  /* things arrive the way the moss does: up a little, a touch smaller, then
     settle. Siblings in a row follow one another (site.js sets --rd). */
  .js [data-reveal]:not(.is-in){opacity:0;transform:translateY(22px) scale(.95)}
  .js [data-reveal]{transform-origin:50% 100%;transition:opacity 700ms var(--ease-in-view),transform 900ms var(--ease-in-view);transition-delay:var(--rd,0ms)}
  /* the first screen rises line by line as the page opens */
  .js .hero-copy > *{animation:rise-in 900ms var(--ease-in-view) both}
  .js .hero-copy > :nth-child(2){animation-delay:90ms}
  .js .hero-copy > :nth-child(3){animation-delay:180ms}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}