/*
 * botany.tech — the home page's blocks  (home.css)
 * ---------------------------------------------------------------------------
 * Linked from index.html only, after site.css and phone.css. Each block is
 * scoped under its own prefix; behaviour is in home.js (one init per block,
 * each guarded by a query for its section). The header, the season line and
 * the footer are sitewide and live in site.css (HDR, SBAR, FTR). The
 * approved designs and their notes: docs/variants/<block>/final.html and
 * README.md § Final.
 *
 *   HC    Hero            section.hc#hero > .hc-pin[data-hero-scene]
 *                         (.hero-art .hero-slot .hc-dim) .hc-foot .hc-row
 *                         .hc-copy.hero-copy .hc-sub .hc-cta   (--hc-p)
 *   OFR   What we offer   #offer.ofr .ofr-plate .ofr-seg .ofr-txt
 *                         .ofr-panel .ofr-show .ofr-chips .ofr-chip
 *                         .ofr-stage > .phone[data-way] .ofr-act .ofr-trust
 *   HS    How it works    #how.hs .hs-flow[data-stem] .hs-rail .hs-roots
 *                         .hs-end .hs-steps .hs-step (.is-in) .hs-ic
 *                         .hs-mark .hs-num .hs-text .hs-foot
 *                         .hs-sprout .hs-note
 *   ST    Strategies      #strategies.st table.st-table (cards < 760)
 *                         .st-n .st-by .st-face--b|m .st-co .st-v .st-spark
 *                         .st-fb .st-fl .st-fd .st-age .st-from .st-foot
 *                         .st-asof .st-more        (site.css MK/BEST are the
 *                         card fallback, unused)
 *   SSN   Season banner   #quest.ssn .ssn-band .ssn-field .ssn-in .ssn-hang
 *                         .ssn-rig .ssn-strap .ssn-card .ssn-hw .ssn-grow
 *                         .ssn-body .ssn-live .ssn-time .ssn-board
 *                         .ssn-units .ssn-date .ssn-acts
 *   FDR   Founder note    #founder.fdr .fdr-stage .fdr-back .fdr-sheet
 *                         .fdr-from .fdr-av .fdr-hi .fdr-h .fdr-p .fdr-mark
 *                         .fdr-foot .fdr-sig .fdr-acts
 *   END   Final CTA       #cta.end.end-cta .end-cta-in (the footer under it
 *                         is site.css FTR)
 * ---------------------------------------------------------------------------
 */

/* ---------- HC · hero: the close-up, pinned, covered by the next sheet ---------- */
/* The branch is a close-up across the top of the first screen, running
   out of both sides, with clear sky between it and the header. The
   promise sits at the foot, left, set like a cover line; the one filled
   press at the end of the reading path (bottom right, under the H1 on a
   phone). The first screen pins and the next block's sheet (#offer,
   .blk--sheet) slides up over it while the branch drifts up and dims;
   once covered, the scene holds still (home.js initHero). The section
   carries its own pin: it is two screens tall and gives the second one
   back with a negative bottom margin, so no wrapper is needed. */
/* the section: two screens tall, the second given back to the next block */
.hc{--hc-h:max(600px,calc(100svh - var(--sbar-h)));--hc-p:0;
  position:relative;z-index:0;isolation:isolate;height:calc(var(--hc-h) * 2);
  margin-top:calc(-1 * var(--hdr-h));margin-bottom:calc(-1 * var(--hc-h) - var(--sheet-r))}
.hc-pin{position:sticky;top:var(--sbar-h);height:var(--hc-h);overflow:hidden;
  padding-top:var(--hdr-h);background:var(--hero-sky)}
.hc .hero-art{transform:translateY(calc(var(--hc-p) * -12%));will-change:transform}
/* the frame the scene composes into. Far larger than the screen, so the
   lens comes in close; set low enough that clear sky stays between the
   header and the moss (the owner's note), and a little right, so the
   right limb leaves the screen below the header and the hanging twig
   clears the H1 */
.hc .hero-slot{left:-37%;right:-43%;top:-32%;bottom:24%}
/* the still (reduced motion, Save-Data, no WebGL): the render sized on the
   screen's height and set to its right edge, so its branch sits where the
   live one does, under the same band of sky; its foot fades out before the
   H1, so the falling end of the wood and the low stone never reach the type */
.hc .hero-poster img{width:calc(var(--hc-h) * 2.43);max-width:none;height:auto;left:calc(100% - var(--hc-h) * 2.43);top:-58%;right:auto;bottom:auto;object-fit:fill;
  -webkit-mask-image:linear-gradient(#000 76%,transparent 88%);mask-image:linear-gradient(#000 76%,transparent 88%)}
/* the air: a band of the scene's own sky under the header, so nothing the
   scene floats up there (a stone, a limb's edge) crowds the lockup */
.hc-pin::before{content:"";position:absolute;inset:0 0 auto;z-index:0;pointer-events:none;
  height:calc(var(--hdr-h) + 56px);
  background:linear-gradient(var(--hero-sky-mid) calc(100% - 72px),rgb(220 222 211/0))}
.hc-dim{position:absolute;inset:0;z-index:1;pointer-events:none;background:#100F0F;opacity:calc(var(--hc-p) * .5)}

/* the cover line: bottom left, the press bottom right */
.hc-foot{position:absolute;left:0;right:0;bottom:calc(var(--sheet-r) + 40px);z-index:2;
  transform:translateY(calc(var(--hc-p) * -60px));opacity:calc(1 - var(--hc-p) * 1.6)}
.hc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
.hc .hc-copy.hero-copy{display:block;text-align:left;margin:0;max-width:none;padding-top:0}
.hc-copy .display{max-width:12.5ch;margin-bottom:0;text-wrap:balance}
.hc-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:20px;font-size:16px;line-height:22px;color:#3E3F39}
.hc-sub .chain{color:#3E3F39;font-weight:500;gap:6px}
.hc-sub .chain svg{width:15px;height:15px}
.hc-cta.btn.hero-cta{height:44px;padding:0 48px;font-size:15px;margin-bottom:4px}
@media (prefers-reduced-motion:no-preference){
  .js .hc-copy > *,.js .hc-cta{animation:rise-in 900ms var(--ease-in-view) both}
  .js .hc-copy > :nth-child(2){animation-delay:90ms}
  .js .hc-cta{animation-delay:200ms}
}
@media (prefers-reduced-motion:reduce){.hc .hero-art,.hc-foot{transform:none;opacity:1}}
@media (min-width:1200px){.hc-copy .display{font-size:clamp(64px,10.6svh,96px);line-height:.98;letter-spacing:-.04em}}
/* a wide, short window: the frame a little smaller and further left, so
   the falling end of the wood clears the H1; the still lifted further */
@media (min-width:760px) and (min-aspect-ratio:5/3){
  .hc .hero-slot{left:-30%;right:-10%;top:-25.5%;bottom:30.3%}
  .hc .hero-poster img{top:-60%;-webkit-mask-image:linear-gradient(#000 76%,transparent 81%);mask-image:linear-gradient(#000 76%,transparent 81%)}
}

/* phone: the close-up across the upper half, under a band of sky; the
   words and the press stack at the foot, left, where the thumb is */
@media (max-width:759px){
  /* the frame is 94% of the screen tall and hangs from the cover line
     (its foot 372px above the screen's foot), so the gap to the H1 holds
     and a taller phone gets more sky, not a lower branch */
  /* not a full screen on a tall phone: the hero stops at 668px, with air under the press, so the
     branch and the cover line sit high and the offer sheet shows below */
  .hc{--hc-h:clamp(608px,calc(100svh - var(--sbar-h)),668px)}
  .hc .hero-slot{left:-94%;right:-94%;top:calc(var(--hc-h) * .248 - 372px);bottom:calc(372px - var(--hc-h) * .188)}
  .hc-foot{bottom:calc(var(--sheet-r) + 56px)}
  .hc-row{grid-template-columns:minmax(0,1fr);gap:24px}
  .hc-copy .display{font-size:46px;line-height:47px;max-width:9ch}
  .hc-sub{margin-top:14px;font-size:15px;line-height:21px}
  .hc-sub .chain{font-size:15px}
  .hc-cta.btn.hero-cta{justify-self:start;padding:0 52px}
}
/* the phone still (its own portrait render) hangs from the cover line too */
@media (max-width:639px){
  .hc .hero-poster img{width:170%;left:-35%;top:calc(var(--hc-h) - 380px - 256.6vw);-webkit-mask-image:linear-gradient(#000 86%,transparent 97%);mask-image:linear-gradient(#000 86%,transparent 97%)}
}

/* ---------- OFR · what we offer: one olive plate, the app's switch, one phone ---------- */
/* Autotrading | Strategies (the app's segmented control), one line each, a
   phone walking the real flow (assets/flow) with three chips over it lit in
   step with the taps; one citrine press, swapped by the switch. The phones
   carry no data-flow: home.js initOffer plays them, not site.js. */
.ofr-plate{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"seg" "txt" "show" "act";
  justify-items:center;text-align:center;overflow:hidden;padding:20px 20px 28px;
  background:var(--ground-olive);border-radius:var(--r-plate);box-shadow:inset 0 0 0 1px rgb(241 242 234/.08)}

/* the switch: the app's segmented control, on the dark ground */
.ofr-seg{grid-area:seg;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;max-width:340px;padding:3px;border-radius:999px;background:rgb(241 242 234/.08)}
.ofr-seg button{min-height:34px;border-radius:999px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink500);transition:background-color .2s,color .2s}
.ofr-seg button[aria-selected="true"]{background:var(--solid-bg);color:var(--solid-fg)}
@media (hover:hover) and (pointer:fine){.ofr-seg button[aria-selected="false"]:hover{color:var(--ink900)}}

.ofr-txt{grid-area:txt;display:grid;margin-top:24px;min-width:0}
.ofr-panel{grid-area:1/1}
.ofr-panel[hidden]{display:none}
.ofr-panel.is-in{animation:ofr-in .32s var(--ease-in-view) both}
@keyframes ofr-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ofr-title{font-size:28px;line-height:32px;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.ofr-line{margin-top:10px;max-width:24em;font-size:15px;line-height:22px;color:var(--ink500);text-wrap:balance}

/* the phone, and three chips over it lit in step with the taps */
.ofr-show{grid-area:show;display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:24px;min-width:0}
.ofr-chips{display:flex;align-items:center;gap:6px}
.ofr-chips[hidden]{display:none}
.ofr-chips li{display:flex;align-items:center;gap:6px}
.ofr-chips li + li::before{content:'';width:12px;height:1px;background:rgb(241 242 234/.22)}
.ofr-chip{min-height:28px;padding:0 12px;border-radius:999px;font-size:13px;line-height:16px;font-weight:500;white-space:nowrap;
  color:var(--ink400);box-shadow:inset 0 0 0 1px rgb(241 242 234/.16);transition:background-color .25s,color .25s,box-shadow .25s}
.ofr-chip.is-done{color:var(--ink900);box-shadow:inset 0 0 0 1px rgb(163 184 74/.55)}
.ofr-chip.is-on{background:var(--cit500);color:#12140C;box-shadow:none}
@media (hover:hover) and (pointer:fine){.ofr-chip:not(.is-on):hover{color:var(--ink900)}}
.ofr-stage{display:grid}
.ofr-stage .phone{grid-area:1/1;margin:0;--sw:min(250px,calc(100vw - 130px));transition:opacity .2s ease,visibility 0s linear .2s}
.ofr-stage .phone[aria-hidden="true"]{opacity:0;visibility:hidden}
.ofr-stage .phone[aria-hidden="false"]{transition:opacity .2s ease}

.ofr-act{grid-area:act;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.ofr-trust{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--ink500)}

@media (min-width:640px){
  .ofr-plate{padding:40px 40px 44px}
  .ofr-title{font-size:36px;line-height:40px}
  .ofr-line{font-size:16px;line-height:24px}
  .ofr-stage .phone{--sw:270px}
}
@media (min-width:1024px){
  .ofr-plate{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;
    grid-template-areas:". show" "seg show" "txt show" "act show" ". show";grid-template-rows:1fr auto auto auto 1fr;
    justify-items:start;text-align:left;padding:0 0 0 64px}
  .ofr-txt{margin-top:40px}
  .ofr-title{font-size:44px;line-height:48px}
  .ofr-line{margin-top:14px}
  .ofr-act{align-items:flex-start;margin-top:32px}
  .ofr-show{justify-self:center;margin:0 0 -40px;padding-top:48px}
  .ofr-stage .phone{--sw:300px}
}
@media (min-width:1200px){.ofr-plate{padding-left:80px}}
@media (prefers-reduced-motion:reduce){.ofr-panel.is-in{animation:none}}

/* ---------- HS · how it works: three marks on one stem that grows as you read ---------- */
/* Three dot-matrix marks (home.js HowDots, on their finished frame);
   number, title, one short line. No stem and no nodes now: the steps arrive
   once, 01 then 02 then 03 (merge.css HS). Reduced motion: just there. */
.hs .head{margin-bottom:48px}
.hs .lead{max-width:30em}
/* --ic-h: height of a mark; --ic-gap: mark to node; --y: the stem's line */
.hs-flow{position:relative;--p:0;--ic-h:75px;--ic-gap:20px;--y:calc(var(--ic-h) + var(--ic-gap) + 11px)}
.hs-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-left:44px}
.hs-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hs-ic{display:block;width:116px;height:var(--ic-h);margin:0 0 var(--ic-gap) -5px}
/* the stem: a hairline the whole way, olive over it as far as you have read */
.hs-rail{position:absolute;left:11px;top:var(--y);bottom:-58px;width:2px;pointer-events:none}
.hs-rail::before,.hs-rail i{content:'';position:absolute;inset:0;border-radius:2px}
.hs-rail::before{background:var(--l100)}
.hs-rail i{background:var(--ol700);transform-origin:50% 0;transform:scaleY(var(--p))}
/* the step's number (no node: the stem and its lights are gone) */
.hs-mark{display:flex;align-items:center;gap:20px;height:24px;margin:0 0 10px -44px}
.hs-num{font-family:var(--mono);font-size:13px;line-height:18px;font-weight:500;letter-spacing:.02em;color:var(--ink300)}
.hs-step .h3{margin-bottom:8px}
.hs-text{font-size:14px;line-height:20px;color:var(--ink500);max-width:22em;text-wrap:pretty}
/* roots at the stem's start, a sprout at its end */
.hs-roots,.hs-end{display:none;position:absolute;overflow:visible;pointer-events:none}
.hs-roots path,.hs-sprout path{fill:none;stroke:var(--ol700);stroke-linecap:round}
.hs-roots .r1{stroke-width:2}.hs-roots .r2{stroke-width:1.4}.hs-roots .r3{stroke-width:1.1}.hs-roots .r4{stroke-width:.8;opacity:.7}
.hs-sprout{width:26px;height:38px;overflow:visible;transform-origin:50% 100%;transform:scale(calc(.3 + .7 * var(--p)));transition:transform .5s var(--ease-in-view)}
.hs-sprout path{stroke-width:2}
.hs-sprout .lf{fill:var(--ol700);stroke:none}
.hs-sprout .lf2{fill:var(--ol400);stroke:none}
/* the foot: on a phone the stem ends in a sprout beside the press */
.hs-foot{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:64px;padding-left:44px}
.hs-foot .hs-sprout{position:absolute;left:1px;top:-30px}
.hs-note{font-size:15px;line-height:22px;color:var(--ink500)}

@media (min-width:900px){
  .hs .head{margin-bottom:64px}
  .hs-flow{--ic-h:114px;--ic-gap:28px}
  .hs-steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;padding:0;text-align:center}
  .hs-step{align-items:center}
  .hs-ic{width:176px;margin-inline:auto}
  /* the stem runs across, under the marks */
  .hs-rail{left:0;right:0;bottom:auto;width:auto;height:2px}
  .hs-rail i{transform-origin:0 50%;transform:scaleX(var(--p))}
  .hs-mark{flex-direction:column;gap:6px;height:auto;margin:0 0 14px;padding:0 10px;background:var(--s0)}
  .hs-text{margin-inline:auto}
  .hs-roots{display:block;left:-38px;top:var(--y);width:40px;height:30px}
  .hs-end{display:block;right:-4px;top:calc(var(--y) - 35px);width:30px;height:36px}
  .hs-foot{align-items:center;padding:0;margin-top:64px;text-align:center}
  .hs-foot .hs-sprout{display:none}
}
@media (min-width:1024px){.hs-steps{column-gap:56px}}

/* ---------- ST · our best strategies: a table on desktop, cards on a phone ---------- */
/* One row per strategy, return and worst fall side by side in the same face
   and size, the track line with its deepest drop in coral. Under 760 each
   row is a small card with the same fields. Needs the page's sprite
   (#coin-*, #seal-*). */
.st .container{max-width:1440px}
@media (min-width:1024px){.st .container{padding-inline:48px}}
.st .head{margin-bottom:32px}
@media (min-width:1024px){.st .head{margin-bottom:44px}}

.st-table{width:100%;border-collapse:separate;border-spacing:0;text-align:left}
.st-table thead th{padding:0 12px 12px;border-bottom:1px solid var(--l300);vertical-align:bottom;white-space:nowrap;
  font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:11px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink500)}
.st-table tbody th,.st-table tbody td{padding:20px 12px;border-bottom:1px solid var(--l100);vertical-align:middle;font-weight:400;transition:background-color .2s}
.st-table tbody tr:last-child > *{border-bottom-color:var(--l300)}
.st-table tr > :first-child{padding-left:16px}
.st-table tr > :last-child{padding-right:16px}
.st-table .st-num{text-align:right}
.st-h-coins{width:14%} .st-h-ret,.st-h-fall{width:10%} .st-h-track{width:25%} .st-h-from{width:8%} .st-h-act{width:1%}

.st-n{display:block;font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.01em;color:var(--ink900)}
.st-by{margin-top:4px;gap:6px;font-size:13px;line-height:18px;color:var(--ink500)}
.st-by .cface{width:18px;height:18px;font-size:10px}
.st-face--b{background:var(--ol700);color:#F7F7F2}
.st-face--m{background:var(--cit500);color:#12140C}

.st-co{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;line-height:18px;color:var(--ink500);white-space:nowrap}
.st .coins .coin{width:20px;height:20px;margin-left:-7px;box-shadow:0 0 0 2px var(--st-ring,var(--s0))}
.st .coins .coin:first-child{margin-left:0}

.st-ml{display:none}
.st-v{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.st-v.pos{color:var(--pos-text)}
.st-v.neg{color:var(--neg-ink)}

.st-table .st-c-track{white-space:nowrap}
.st-table .st-c-track,.st-table .st-h-track{padding-left:32px}
.st-spark{display:inline-block;vertical-align:middle;width:calc(100% - 64px);height:36px}
.st-age{display:inline-block;vertical-align:middle;width:56px;margin-left:8px;text-align:right;font-family:var(--mono);font-size:13px;line-height:18px;color:var(--ink500)}
.st-fb{fill:color-mix(in srgb,var(--neg) 10%,transparent);transition:fill .2s}
.st-fl{fill:none;stroke:var(--neg);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.st-fd{fill:none;stroke:var(--neg);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}

.st-from{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;line-height:20px;font-weight:500;white-space:nowrap}
.st-from small{margin-left:4px;font-size:11px;font-weight:400;color:var(--ink500)}
.st-c-act{text-align:right;white-space:nowrap}

@media (hover:hover) and (pointer:fine){
  .st-table tbody tr:hover{--st-ring:var(--s2)}
  .st-table tbody tr:hover > *{background:var(--s2)}
  .st-table tbody tr:hover .st-fb{fill:color-mix(in srgb,var(--neg) 17%,transparent)}
  .st-table tbody tr:hover .btn-ghost{background:var(--s0);border-color:var(--ink300)}
}
.st-table tbody tr:focus-within{--st-ring:var(--s2)}
.st-table tbody tr:focus-within > *{background:var(--s2)}

.st-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:16px;padding-inline:16px}
.st-foot .risk{background:none;padding:0;gap:8px;align-items:center;font-size:13px;line-height:18px}
.st-asof{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--ink500);white-space:nowrap}
.st-asof .tag{font-family:var(--sans)}
.st-more{display:flex;justify-content:center;margin-top:40px}

/* narrower desktop: the coin names give way to the marks, figures a step smaller */
@media (max-width:1199px){
  .st-ct{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .st-h-coins{width:auto} .st-h-ret,.st-h-fall{width:auto} .st-h-track{width:22%} .st-h-from{width:auto}
  .st-table thead th,.st-table tbody th,.st-table tbody td{padding-inline:8px}
  .st-table tr > :first-child{padding-left:12px}
  .st-table tr > :last-child{padding-right:12px}
  .st-v{font-size:19px;line-height:24px}
  .st-table .st-c-track,.st-table .st-h-track{padding-left:20px}
  .st-spark{width:calc(100% - 54px)}
  .st-age{width:46px}
}
/* tablet: the line goes, its age stays */
@media (max-width:1023px) and (min-width:760px){
  .st-h-track{width:auto}
  .st-spark{display:none}
  .st-age{width:auto;margin:0}
  .st-n{font-size:17px;line-height:22px}
}

/* a phone: each row is a compact card with the same fields */
@media (max-width:759px){
  .st .head{margin-bottom:24px}
  .st-table,.st-table tbody{display:block}
  .st-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .st-table tbody{display:grid;gap:10px}
  .st-table tbody tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px;padding:14px;background:var(--s1);border:1px solid var(--l300);border-radius:var(--r-tap);--st-ring:var(--s1)}
  .st .st-table tbody tr > *{padding:0;border:0;background:none;text-align:left}
  .st-table tbody tr::after{content:"";grid-column:1 / -1;grid-row:3;align-self:start;height:1px;margin-top:14px;background:var(--l100)}
  .st-c-name{grid-column:1 / 5;grid-row:1;min-width:0}
  .st-n{font-size:17px;line-height:22px}
  .st-by{margin-top:2px}
  .st .st-table tbody .st-c-act{grid-column:5 / 7;grid-row:1;justify-self:end;align-self:start;text-align:right}
  .st-c-ret{grid-column:1 / 3;grid-row:2;margin-top:14px}
  .st-c-fall{grid-column:3 / 5;grid-row:2;margin-top:14px}
  .st-ml{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ink500)}
  .st-v{font-size:20px;line-height:26px}
  .st-c-track{display:contents}
  .st-age{grid-column:5 / 7;grid-row:2;align-self:start;width:auto;margin:14px 0 0;text-align:left;font-size:12px;line-height:16px;color:var(--ink900)}
  .st-age .st-ml{display:inline;margin-right:6px;font-family:var(--sans)}
  .st-spark{grid-column:5 / 7;grid-row:2;align-self:end;width:100%;height:26px}
  .st .st-table tbody .st-c-coins,.st .st-table tbody .st-c-from{grid-row:3;align-self:start;margin-top:14px;padding-top:11px;line-height:16px}
  .st-c-coins{grid-column:1 / 5}
  .st-ct{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .st-co{gap:8px;font-size:12px;line-height:16px}
  .st .coins .coin{width:16px;height:16px;margin-left:-5px}
  .st .coins .coin:first-child{margin-left:0}
  .st .st-table tbody .st-c-from{grid-column:5 / 7;text-align:right;white-space:nowrap}
  .st-c-from .st-ml{display:inline;margin-right:6px}
  .st-from{font-size:13px;line-height:16px}
  .st-from small{margin-left:3px}
  .st-foot{flex-direction:column;align-items:flex-start;gap:8px;padding-inline:2px;margin-top:14px}
  .st-more{margin-top:28px}
}

/* arrival: the rows follow one another, each line draws itself */
@media (prefers-reduced-motion:no-preference){
  .js .st-table tbody tr{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-in-view),transform .7s var(--ease-in-view)}
  .js .st-table tbody tr:nth-child(2){transition-delay:70ms}
  .js .st-table tbody tr:nth-child(3){transition-delay:140ms}
  .js .st-table.is-in tbody tr{opacity:1;transform:none}
  .js .st-spark{clip-path:inset(-6px 100% -6px 0);transition:clip-path 1.1s cubic-bezier(.45,.05,.25,1) .3s}
  .js .st-table.is-in .st-spark{clip-path:inset(-6px -6px -6px 0)}
}

/* ---------- SSN · season banner: the Grower Pass on a dot field ---------- */
/* Ground: deep olive #1F210D, no gradients; a dot field drawn on a canvas,
   lit only by the pass. The time left is lit into that same field (from
   site.js SEASON, via window.BOTANY_SEASON). ≥1024: the pass hangs from the
   band's top edge on a woven strap; strap → D-ring → swivel → lobster clasp
   → split ring → the slot in the card's tab. It swings as one pendulum (a
   damped spring, nudged by the pointer). <1024: no strap. The band starts
   lower and the pass leans out over its top edge. The section clips any
   overhang. */
.ssn{--ssn-paper:241 242 234;--ssn-cit:225 205 6;--ssn-ground:#1F210D;--ssn-lift:136px;--ssn-pitch:8px;--cw:264px;
  position:relative;padding-top:var(--ssn-lift);background:var(--s0);overflow:clip}
.ssn-band{position:relative;isolation:isolate;background:var(--ssn-ground);color:var(--ink900)}
/* no-JS / first paint: the same field in CSS; the canvas replaces it */
.ssn-band::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(rgb(var(--ssn-paper)/.10) 1px,transparent 1.3px) 0 0/12px 12px}
.ssn.has-field .ssn-band::before{display:none}
.ssn-field{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.ssn-in{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:56px}

/* ---- the pass ---- */
.ssn-hang{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--ssn-lift) * -1 + 4px)}
.ssn-rig{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;transform:rotate(var(--sw,0deg))}
.ssn-card{position:relative;width:var(--cw);perspective:900px}
.ssn-card-in{position:relative;z-index:1;transform-style:preserve-3d;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform 400ms var(--ease)}
.ssn-card-in img{width:100%;height:auto;display:block}
.ssn-glare{position:absolute;inset:11% 16% 16% 15%;border-radius:12px;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.ssn-glare::before{content:'';position:absolute;top:-20%;bottom:-20%;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,rgb(var(--ssn-paper)/.22) 45%,rgb(var(--ssn-cit)/.12) 55%,transparent);transform:skewX(-12deg)}
.ssn.is-in .ssn-glare::before{animation:ssn-glare 1500ms 500ms var(--ease-in-view) both}
@keyframes ssn-glare{from{left:-60%}to{left:130%}}

/* phone and tablet: the card leans out over the band's top edge */
.ssn-card{transform:rotate(-8deg);transform-origin:50% 60%}
.ssn-strap,.ssn-hw{display:none}
@media (prefers-reduced-motion:no-preference){
  .ssn.is-armed .ssn-card{transition:transform 1100ms var(--ease-in-view)}
  .ssn.is-armed:not(.is-in) .ssn-card{transform:translateY(28px) rotate(-2deg)}
}

/* the strap: woven olive tape, citrine selvedge, printed name, stitched fold */
.ssn-strap{--sw-w:34px;position:relative;z-index:2;width:var(--sw-w);height:var(--ssn-strap-h,104px);overflow:hidden;
  background:
    linear-gradient(90deg,rgb(8 9 2/.42),transparent 24%,rgb(var(--ssn-paper)/.07) 46%,transparent 68%,rgb(8 9 2/.46)),
    repeating-linear-gradient(0deg,rgb(8 9 2/.34) 0 1px,transparent 1px 2.5px),
    repeating-linear-gradient(90deg,rgb(var(--ssn-paper)/.07) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(62deg,rgb(var(--ssn-paper)/.06) 0 1px,transparent 1px 3.5px),
    repeating-linear-gradient(-62deg,rgb(8 9 2/.12) 0 1px,transparent 1px 3.5px),
    #4A5219}
/* selvedge: a citrine thread woven along each edge */
.ssn-strap::before{content:'';position:absolute;inset:0 3.5px;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgb(var(--ssn-cit)/.62) 0 2px,rgb(var(--ssn-cit)/.3) 2px 3px) left/1.5px 100% no-repeat,
    repeating-linear-gradient(180deg,rgb(var(--ssn-cit)/.62) 0 2px,rgb(var(--ssn-cit)/.3) 2px 3px) right/1.5px 100% no-repeat}
/* box-and-cross stitch where the tape is sewn back on itself */
.ssn-strap::after{content:'';position:absolute;left:8px;right:8px;bottom:16px;height:26px;pointer-events:none;
  border:1px dashed rgb(var(--ssn-paper)/.5);
  background:
    linear-gradient(to top right,transparent calc(50% - .6px),rgb(var(--ssn-paper)/.42) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),
    linear-gradient(to bottom right,transparent calc(50% - .6px),rgb(var(--ssn-paper)/.42) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px))}
.ssn-strap span{position:absolute;left:0;right:0;bottom:52px;display:flex;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgb(var(--ssn-paper)/.78);white-space:nowrap}
/* the tape turning round the D-ring's bar */
.ssn-strap i{position:absolute;left:0;right:0;bottom:0;height:10px;border-radius:0 0 5px 5px;
  background:linear-gradient(rgb(8 9 2/.45),rgb(8 9 2/0) 35%,rgb(var(--ssn-paper)/.08) 60%,rgb(8 9 2/.35)),#3F4614;
  box-shadow:0 -1px 0 rgb(8 9 2/.35)}
/* hardware + the card's tab, drawn in the card's own pixels (760 = card width) */
.ssn-hw{position:absolute;z-index:0;left:calc(var(--cw) * 280 / 760);top:calc(var(--cw) * -130 / 760);width:calc(var(--cw) * 200 / 760);height:auto;overflow:visible;
  filter:drop-shadow(0 3px 2px rgb(4 5 1/.55))}

/* the same card, bare to covered */
.ssn-grow{display:flex;align-items:center;gap:10px;margin-top:-14px}
.ssn-grow ol{display:flex;gap:4px}
.ssn-grow img{width:34px;height:auto;display:block}
.ssn-grow li:not(:last-child) img{opacity:.78}
.ssn-grow p{font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:10px;line-height:13px;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--ssn-paper)/.66);max-width:14em}

/* ---- words ---- */
.ssn-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin-top:36px}
.ssn-live{display:inline-flex;align-items:center;gap:10px}
.ssn-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cit500)}
@media (prefers-reduced-motion:no-preference){.ssn-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--cit500);animation:ssn-pulse 2.4s ease-out infinite}}
@keyframes ssn-pulse{from{transform:scale(.5);opacity:.9}to{transform:scale(1.6);opacity:0}}
.ssn-title{margin-top:16px}
.ssn .lead{margin-top:14px;max-width:30em}
/* the scoreboard: an empty box in the page; the field lights the digits in it */
.ssn-time{margin-top:32px;width:100%}
.ssn-time .label{font-size:11px;color:rgb(var(--ssn-paper)/.7)}
.ssn-board{position:relative;height:calc(var(--ssn-pitch) * 7);margin-top:12px;width:calc(var(--ssn-pitch) * 39)}
.ssn-units{display:grid;grid-template-columns:repeat(3,calc(var(--ssn-pitch) * 11));column-gap:calc(var(--ssn-pitch) * 4);margin-top:10px}
.ssn-units span{font-family:var(--doto);font-variation-settings:'ROND' 0;font-weight:700;font-size:10px;line-height:12px;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--ssn-paper)/.6)}
.ssn-date{margin-top:12px;font-size:14px;line-height:20px;color:var(--ink500)}
.ssn-date time{font-family:var(--mono);font-size:13px;color:var(--ink900)}
.ssn-ended .ssn-board,.ssn-ended .ssn-units{display:none}
.ssn-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ssn .btn-ghost{border-color:rgb(var(--ssn-paper)/.34);background:transparent}
@media (hover:hover) and (pointer:fine){.ssn .btn-ghost:hover{border-color:rgb(var(--ssn-paper)/.6);background:rgb(var(--ssn-paper)/.06)}}

@media (min-width:640px){
  .ssn{--ssn-pitch:10px;--cw:300px;--ssn-lift:160px}
}
/* desktop: the pass hangs on its strap from the band's top edge */
@media (min-width:1024px){
  .ssn{--ssn-pitch:12px;--cw:360px;--ssn-lift:0px;--ssn-strap-h:112px;background:var(--ssn-ground)}
  .ssn-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;padding-bottom:0;min-height:720px}
  .ssn-hang{margin-top:0;padding-bottom:64px}
  .ssn-card,.ssn.is-armed:not(.is-in) .ssn-card{transform:none;margin-top:calc(var(--cw) * 122 / 760)}
  .ssn.is-armed .ssn-card{transition:none}
  .ssn-strap,.ssn-hw{display:block}
  .ssn-grow{margin-top:-20px}
  .ssn-body{margin-top:0;align-self:center;padding-block:96px}
}

/* ---------- FDR · founder: a short signed note on paper ---------- */
/* Who it is from comes first. The second sheet is turned under the note;
   "hi!" and the signature are written in on scroll (home.js initFounder
   arms the motion; without JS or under reduced motion all is shown). */
.fdr{padding-block:max(48px,calc(var(--block) * .625));overflow-x:clip}
.fdr-stage{position:relative;max-width:640px;margin-inline:auto}
/* the second sheet turned under the note: paper on paper, no shadow */
.fdr-back{position:absolute;inset:8px -4px -8px 6px;background:var(--s1);border:1px solid var(--l300);border-radius:var(--r-plate);transform:rotate(1.4deg);transform-origin:50% 0}
.fdr-sheet{position:relative;background:var(--s0);border:1px solid var(--l300);border-radius:var(--r-plate);padding:20px 20px 24px}

/* the sender, like the head of a message */
.fdr-from{display:flex;align-items:center;gap:12px;min-width:0}
.fdr-av{position:relative;display:block;flex:none;width:44px;height:44px;clip-path:var(--av-shape)}
.fdr-av .av-i{inset:0}
.fdr-av .av-fill{background:var(--control-on)}
.fdr-av .av-l{font-size:15px;color:#F7F7F2}
.fdr-who{display:flex;flex-direction:column;min-width:0}
.fdr-n{font-size:16px;line-height:22px;font-weight:500;letter-spacing:-.01em}
.fdr-r{font-size:14px;line-height:20px;color:var(--ink500)}
/* a handwritten "hi!" with an arrow back to the name */
.fdr-hi{display:block;flex:none;width:68px;height:auto;margin:-14px 0 0 2px;color:var(--ol700);overflow:visible;transform:rotate(-6deg)}

/* hand strokes: the greeting and the signature */
.fdr-hand path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.fdr-hi path{stroke-width:2.2}
.fdr-hi .fdr-dot{stroke-width:3.2}

/* the one line, then two sentences */
.fdr-h{margin-top:20px;font-size:28px;line-height:32px}
.fdr-p{margin-top:10px;font-size:16px;line-height:24px;color:var(--ink900);max-width:34em;text-wrap:pretty}
.fdr-p .link{font-size:inherit}
/* citrine once: a highlighter pulled under the promise */
.fdr-mark{background:linear-gradient(var(--cit500),var(--cit500)) 0 88%/100% 55% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px;margin:0 -2px}

/* signature, then the two ways to reach us */
.fdr-foot{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.fdr-sig{display:block;width:150px;height:auto;color:var(--ink900);overflow:visible}
.fdr-sig path{stroke-width:2.4}
.fdr-sig .fdr-sig-u{stroke-width:1.6;opacity:.7}
.fdr-acts{display:flex;flex-direction:column;gap:8px}
.fdr-acts .btn{width:100%}

@media (min-width:640px){
  .fdr-back{inset:10px -8px -10px 8px}
  .fdr-sheet{padding:28px 36px 28px}
  .fdr-hi{width:76px}
  .fdr-h{margin-top:24px;font-size:32px;line-height:36px}
  .fdr-p{font-size:17px;line-height:26px}
  .fdr-foot{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:8px}
  .fdr-sig{width:160px;flex:none}
  .fdr-acts{flex-direction:row;align-items:center}
  .fdr-acts .btn{width:auto}
}
@media (min-width:1024px){
  .fdr-stage{max-width:680px}
  .fdr-sheet{padding:32px 44px 32px}
  .fdr-h{font-size:36px;line-height:40px}
}

/* stroke order and pace: the greeting first, the signature last */
.fdr-hi path:nth-child(1){--t:380ms;--d:300ms}
.fdr-hi path:nth-child(2){--t:200ms;--d:640ms}
.fdr-hi path:nth-child(3){--t:520ms;--d:820ms}
.fdr-hi path:nth-child(4){--t:240ms;--d:1300ms}
.fdr-hi path:nth-child(5){--t:80ms;--d:1520ms}
.fdr-hi path:nth-child(6){--t:220ms;--d:1600ms}
.fdr-hi path:nth-child(7){--t:80ms;--d:1800ms}
.fdr-sig path:nth-child(1){--t:480ms;--d:1900ms}
.fdr-sig path:nth-child(2){--t:700ms;--d:2340ms}
.fdr-sig path:nth-child(3){--t:420ms;--d:3000ms}
.fdr-sig path:nth-child(4){--t:480ms;--d:3380ms}
.fdr-sig path:nth-child(5){--t:400ms;--d:3820ms}

/* motion, only when it is welcome and the script has armed the block:
   the note settles, "hi!" is written, the highlighter is pulled, then the
   signature is written. Without motion everything is simply there. */
@media (prefers-reduced-motion:no-preference){
  .fdr.is-armed .fdr-stage{opacity:0;transform:translateY(20px);transition:opacity 600ms var(--ease-in-view),transform 900ms var(--ease-in-view)}
  .fdr.is-armed .fdr-back{transform:rotate(0deg);transition:transform 1100ms var(--ease-in-view) 200ms}
  .fdr.is-armed .fdr-hand path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t,500ms) cubic-bezier(.45,.05,.4,1) var(--d,0ms)}
  .fdr.is-armed .fdr-mark{background-size:0% 55%;transition:background-size 800ms var(--ease-in-view) 900ms}
  .fdr.is-in .fdr-stage{opacity:1;transform:none}
  .fdr.is-in .fdr-back{transform:rotate(1.4deg)}
  .fdr.is-in .fdr-hand path{stroke-dashoffset:0}
  .fdr.is-in .fdr-mark{background-size:100% 55%}
}

/* ---------- END · final CTA: the sky comes up over the white FAQ ---------- */
/* The hero's sky as the site's rounded sheet, a clean edge; the sky runs on
   into the footer (site.css FTR, the same .end set). */
.end-cta{position:relative;z-index:2;margin-top:calc(-1 * var(--sheet-r));border-radius:var(--sheet-r) var(--sheet-r) 0 0;background:var(--end-sky);padding-top:calc(var(--block) * .75)}
.end-cta-in{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.end-cta .btn{margin-top:18px}
@media (max-width:639px){
  .end-cta{padding-top:56px}
  .end-cta .btn{align-self:stretch}
}