/* ==========================================================================
   Bounty design system
   --------------------------------------------------------------------------
   One stylesheet, hand-authored. Replaces the compiled Tailwind build that
   shipped with the old dark theme, so there is exactly one system in play.

   Layers, in order:
     1. fonts        self-hosted Inter (text) + Archivo (display)
     2. tokens       colour, type, space, radius, shadow, motion
     3. base         reset + element defaults
     4. layout       shell, sections, grids
     5. components   buttons, cards, forms, board, nav, footer, ...
     6. state        focus, motion, print, reduced-motion

   Colour contract (measured, sRGB, WCAG 2.1)
   --------------------------------------------------------------------------
   #008e2a is THE Bounty green: the hero field, every primary action, every
   icon chip. It replaced #18a772 in that role. The swap is also why the type
   on green is now white rather than ink — measured, #008e2a simply carries
   light type better than #18a772 ever did:

     white  on #008e2a   4.28:1        white  on #18a772   3.08:1
     ink    on #008e2a   3.81:1        ink    on #18a772   5.30:1

   So the field flips its polarity: #18a772 was a light green that needed dark
   type, #008e2a is a mid green that needs light type. Do not mix the two.

   ON CREAM (#d7cbbd) — the page ground
     ink        #14231b   10.24:1   body copy
     ink-soft   #3d4f45    5.48:1   secondary copy
     ink-muted  #47594e    4.69:1   tertiary / captions
     green-ink  #00631d    4.70:1   green TEXT at any size
     #008e2a               2.69:1   NEVER text on cream. Fills and marks only.

   ON THE GREEN FIELD (#008e2a)
     white      #ffffff    4.28:1   AA for >=24px, or >=18.66px at 700+.
                                    Display type, headings, button labels
                                    at the sizes set below. Never at 100%
                                    opacity minus anything — see the note.
     white on a darkened inset (rgba(0,0,0,.16) -> #007723)  5.73:1
                                    This is how SMALL text sits on green:
                                    the flag pill and the hero proof strip.
                                    It is the only way to clear 4.5:1 there.

   ON PAPER (#f1ebe3) — the highest surface
     green-text #008e2a    3.62:1   DISPLAY green only (>=24px): the reward
                                    figures on bounty cards and the pricer.
     green-ink  #00631d    6.33:1   green text at any size

   FILLED ACTIONS
     white on #008e2a      4.28:1   >=3:1 floor, so the label must be large
                                    bold: .btn is 19px/800, .btn--lg 20px/800.
     white on #00731f      6.05:1   --c-green-press. Compact fills (.btn--sm,
                                    15px) and EVERY hover, so hovering only
                                    ever raises contrast, never lowers it.

   DEEP FIELDS
     paper on #0b5f3f      6.51:1   the hunter band
     paper on #08432d      9.58:1   the footer

   NEVER put `opacity` on type over a coloured field. .hero__sub carried
   opacity:.86, which quietly took white from 4.28:1 to 3.56:1 while this
   contract still claimed the undimmed number. Secondary emphasis on green
   comes from SIZE and WEIGHT, not from transparency.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. fonts */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:InterFallback;src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.06%}

@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(./fonts/1a4aa50920b5315c-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(./fonts/23d669af23d19c95-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:ArchivoFallback;src:local("Arial");ascent-override:88.96%;descent-override:21.28%;line-gap-override:0%;size-adjust:98.7%}

/* --------------------------------------------------------------- 2. tokens */

:root{
  /* -- brand ------------------------------------------------------------ */
  --bounty-cream:      #d7cbbd;   /* the page ground                       */
  --bounty-green:      #008e2a;   /* THE Bounty green: field + every action */
  --bounty-green-text: #008e2a;   /* the same green, named for its use as
                                     display type on paper (3.62:1, >=24px) */
  /* #18a772 was the old brand field and is deliberately gone. Audited every
     surviving use: each one either carries text (where it fails — ink 5.30:1
     only worked because the field was light) or is a mark that now reads
     better in the field green or --c-green-press. A third green earned its
     place in neither, so the system is two. Do not reintroduce it. */

  /* -- ground & surfaces ------------------------------------------------ */
  --c-cream:   var(--bounty-cream);
  --c-raised:  #e2d9cc;           /* cards sitting on cream                */
  --c-paper:   #f1ebe3;           /* the highest surface: forms, panels    */
  --c-sunken:  #cabca9;           /* wells, inputs, inset areas            */

  /* -- brand field ------------------------------------------------------ */
  --c-green:       var(--bounty-green);
  --c-green-press: #00731f;       /* compact fills + EVERY hover: 6.05:1
                                     on white, so hover only ever raises
                                     contrast                             */
  --c-green-inset: rgba(0,0,0,.16); /* darkens the field under SMALL text:
                                     #008e2a -> #007723, white at 5.73:1  */
  --c-green-dark:  #0b5f3f;       /* deep field, carries light type        */
  --c-green-deep:  #08432d;       /* footer ground                         */



  /* -- type ------------------------------------------------------------- */
  --c-ink:        #14231b;
  --c-ink-soft:   #3d4f45;
  --c-ink-muted:  #47594e;
  --c-green-ink:  #00631d;        /* green TEXT at any size, on cream/paper */
  --c-on-green:   #ffffff;        /* type on the brand-green field: 4.28:1  */
  --c-on-dark:    #f1ebe3;        /* type on the deep-green field           */

  /* -- lines ------------------------------------------------------------ */
  --c-line:        rgba(20,35,27,.16);
  --c-line-strong: rgba(20,35,27,.34);
  --c-line-green:  rgba(0,99,29,.32);
  --c-line-on-dark:rgba(241,235,227,.24);

  /* -- status ----------------------------------------------------------- */
  --c-ok:     #00631d;
  --c-warn:   #7a4800;
  --c-danger: #a52218;
  --c-danger-bg: rgba(165,34,24,.1);
  --c-ok-bg:     rgba(0,99,29,.1);

  /* -- type scale (fluid, clamped) -------------------------------------- */
  --font-text:    Inter, InterFallback, system-ui, -apple-system, sans-serif;
  --font-display: Archivo, ArchivoFallback, Inter, system-ui, sans-serif;

  --t-display: clamp(2.6rem, 1.5rem + 4.4vw, 4.5rem);
  --t-h1:      clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem);
  --t-h2:      clamp(1.85rem, 1.25rem + 2.6vw,3rem);
  --t-h3:      clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  --t-lead:    clamp(1.05rem, .99rem + .35vw, 1.3rem);
  --t-body:    1rem;
  --t-small:   .9375rem;
  --t-micro:   .8125rem;

  /* -- space (4px base) -------------------------------------------------- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.5rem;
  --s-6:2rem;   --s-7:2.5rem; --s-8:3rem;   --s-9:4rem;   --s-10:5rem;
  --s-section: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* -- radius: three steps, no more -------------------------------------- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill:999px;

  /* -- elevation: restrained ---------------------------------------------*/
  --e-1: 0 1px 2px rgba(20,35,27,.07);
  --e-2: 0 2px 8px rgba(20,35,27,.09);
  --e-3: 0 12px 32px rgba(20,35,27,.13);

  /* -- motion ------------------------------------------------------------*/
  --m-fast: 120ms cubic-bezier(.2,0,.2,1);
  --m-base: 200ms cubic-bezier(.2,0,.2,1);

  --shell: 1160px;
  --shell-narrow: 760px;
}

/* ----------------------------------------------------------------- 3. base */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--c-cream);
  color:var(--c-ink);
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* `hidden` would make <body> a scroll container, which silently kills every
     position:sticky on the page. `clip` contains the same overflow without
     creating one. The `hidden` line is the fallback for Safari < 16. */
  overflow-x:hidden;
  overflow-x:clip;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0;
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}
h1{font-size:var(--t-h1);}
h1,h2,h3,h4{overflow-wrap:break-word;}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em;}
p{margin:0;text-wrap:pretty;}
ul,ol{margin:0;padding:0;list-style:none;}

a{color:inherit;text-decoration:none;}
img,picture,svg,video{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
svg{flex:none;}

hr{border:0;border-top:1px solid var(--c-line);margin:0;}

::selection{background:var(--c-green);color:var(--c-on-green);}

.u-sr{
  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 — first tab stop, invisible until focused. */
.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--c-ink);color:var(--c-cream);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-md);font-weight:700;
  transition:top var(--m-base);
}
.skip:focus{top:var(--s-4);}

/* --------------------------------------------------------------- 4. layout */

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s-5);}
@media (min-width:768px){.shell{padding-inline:var(--s-6);}}

.section{padding-block:var(--s-section);}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem);}

/* A ruled band: the cream ground with a hairline above it. */
.section--ruled{border-top:1px solid var(--c-line);}

.section__head{max-width:46rem;margin-bottom:var(--s-7);}
.section__head--wide{max-width:none;}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-green-ink);margin-bottom:var(--s-3);
}
.eyebrow::before{
  content:"";width:1.5rem;height:2px;background:currentColor;border-radius:2px;
}
.eyebrow--plain::before{display:none;}

/* Breadcrumb for /vs/* and other sub-pages — plain text trail, not a chip,
   so the page identifies itself without reproducing the eyebrow-above-H1
   "AI SaaS hero" shape. */
.crumb{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  font-size:var(--t-small);color:var(--c-ink-muted);margin-bottom:var(--s-4);
}
.crumb a{color:var(--c-ink-muted);text-decoration:underline;text-decoration-color:var(--c-line-strong);text-underline-offset:2px;}
.crumb a:hover{color:var(--c-ink);text-decoration-color:currentColor;}
.crumb [aria-current="page"]{color:var(--c-ink);font-weight:650;}

.lead{font-size:var(--t-lead);color:var(--c-ink-soft);line-height:1.55;max-width:44rem;}
.muted{color:var(--c-ink-muted);}
.small{font-size:var(--t-small);}
.micro{font-size:var(--t-micro);}
.green-ink{color:var(--c-green-ink);}

/* Green display type. Only used at >=24px on paper/raised, per the
   colour contract at the top of this file. */
.accent{color:var(--bounty-green-text);}

.stack > * + *{margin-top:var(--s-4);}
.stack-sm > * + *{margin-top:var(--s-2);}
.stack-lg > * + *{margin-top:var(--s-6);}

.grid{display:grid;gap:var(--s-5);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;}
.row--between{justify-content:space-between;}
.row--nowrap{flex-wrap:nowrap;}

/* ----------------------------------------------------------- 5. components */

/* -- 5.1 buttons ---------------------------------------------------------- */

.btn{
  --btn-bg:var(--c-green);
  --btn-fg:var(--c-on-green);
  --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-3) var(--s-6);
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--btn-bd);border-radius:var(--r-pill);
  font-family:var(--font-display);
  /* 19px/800. White on #008e2a is 4.28:1, which clears AA only as large
     bold text (>=18.66px at 700+). 17px would have failed. The bigger
     label is the better CTA anyway. */
  font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;
  cursor:pointer;text-align:center;
  transition:background var(--m-fast),border-color var(--m-fast),
             transform var(--m-fast),box-shadow var(--m-fast);
}
.btn:hover{--btn-bg:var(--c-green-press);}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;}
.btn svg{width:1.15em;height:1.15em;}

.btn--lg{min-height:56px;padding:var(--s-4) var(--s-7);font-size:1.25rem;}
/* A compact fill drops below the large-text threshold, so it takes the
   deeper green to keep white at 6.05:1 rather than 4.28:1. */
.btn--sm{
  min-height:40px;padding:var(--s-2) var(--s-4);font-size:var(--t-small);
  --btn-bg:var(--c-green-press);
}
.btn--block{width:100%;}

/* Secondary: an outline that reads as a real second option, not a ghost. */
.btn--secondary{--btn-bg:transparent;--btn-fg:var(--c-ink);--btn-bd:var(--c-line-strong);}
.btn--secondary:hover{--btn-bg:rgba(20,35,27,.06);--btn-bd:var(--c-ink);}

/* On the green field the outline is white, matching the type there. */
.btn--on-green{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5);}
.btn--on-green:hover{--btn-bg:rgba(0,0,0,.14);--btn-bd:#fff;}

.btn--ink{--btn-bg:var(--c-ink);--btn-fg:var(--c-paper);}
.btn--ink:hover{--btn-bg:#23382c;}

.btn--quiet{
  --btn-bg:transparent;--btn-fg:var(--c-green-ink);--btn-bd:transparent;
  min-height:auto;padding:0;font-size:var(--t-small);
}
.btn--quiet:hover{--btn-bg:transparent;text-decoration:underline;text-underline-offset:3px;}

/* Text link inside prose. */
.link{
  color:var(--c-green-ink);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--c-line-green);
  transition:text-decoration-color var(--m-fast);
}
.link:hover{text-decoration-color:currentColor;}

/* -- 5.2 surfaces --------------------------------------------------------- */

.card{
  background:var(--c-raised);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:var(--s-5);
}
.card--paper{background:var(--c-paper);}
.card--flat{background:transparent;}
.card--pad-lg{padding:var(--s-6);}

.panel{
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--e-2);
}

.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:.3rem .7rem;border-radius:var(--r-pill);
  background:rgba(20,35,27,.07);
  font-size:var(--t-micro);font-weight:650;color:var(--c-ink-soft);
  border:1px solid transparent;
}
.chip--green{background:rgba(0,99,29,.12);color:var(--c-green-ink);}
.chip--outline{background:transparent;border-color:var(--c-line-strong);}
.chip--on-green{background:rgba(20,35,27,.14);color:var(--c-on-green);}

/* A live dot that does not spin, pulse or otherwise perform. */
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--c-green-ink);flex:none;}
.dot--on-green{background:var(--c-on-green);}

/* -- 5.3 header / nav ----------------------------------------------------- */

.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;
  transition:background var(--m-base),box-shadow var(--m-base),border-color var(--m-base);
  border-bottom:1px solid transparent;
}
.site-head__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:72px;
}
.site-head__logo{
  display:flex;align-items:center;gap:.5rem;flex:none;
  min-height:44px;
}
.site-head__logo img{height:30px;width:30px;}
/* Two glyphs, one swapped for the other by app.js: the ink mark is invisible
   on green and the paper mark is invisible on cream. */
.site-head__logo .logo--paper{display:block;}
.site-head__logo .logo--ink{display:none;}
.site-head.is-stuck .site-head__logo .logo--paper{display:none;}
.site-head.is-stuck .site-head__logo .logo--ink{display:block;}
.site-head__logo span{
  font-family:var(--font-display);font-weight:900;
  font-size:1.3rem;letter-spacing:-.045em;
}

.site-head__nav{display:none;align-items:center;gap:var(--s-5);}
@media (min-width:960px){.site-head__nav{display:flex;}}

.navlink{
  font-size:var(--t-small);font-weight:600;color:var(--c-ink-soft);
  padding:var(--s-2) 0;position:relative;transition:color var(--m-fast);
}
.navlink:hover{color:var(--c-ink);}
.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--m-base);
}
.navlink:hover::after{transform:scaleX(1);}

/* Scrolled state — set by app.js. On the hero the header floats; once the
   cream content is behind it, it needs a ground of its own. */
.site-head.is-stuck{
  background:rgba(215,203,189,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--c-line);
}

/* Floating over the green field, the header type MUST be white. Ink-soft
   measures 2.04:1 on #008e2a — it was legible on the old #18a772 and is not
   legible on this one. The stuck state is over cream and keeps ink. */
.site-head:not(.is-stuck){
  color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,0));
  /* A gradient is positioned against the padding box but painted across the
     border box, so the 1px transparent border-bottom row fell outside the
     gradient and REPEATED it from its darkest stop — a hard dark line across
     the hero. no-repeat leaves that row unpainted. */
  background-repeat:no-repeat;
}
/* Full white, never dimmed: at 15px these need 4.5:1 and have no headroom
   to give away to an alpha. */
.site-head:not(.is-stuck) .navlink{color:#fff;}
.site-head:not(.is-stuck) .navlink:hover{color:#fff;}
.site-head:not(.is-stuck) .nav-toggle{color:#fff;}
.site-head:not(.is-stuck) .nav-toggle:hover{background:rgba(0,0,0,.16);}
.site-head:not(.is-stuck) .btn--secondary{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5);}
.site-head:not(.is-stuck) .btn--secondary:hover{--btn-bg:rgba(0,0,0,.16);--btn-bd:#fff;}

/* Sub-pages (/vs/*, no green hero behind the fixed header) force the
   "stuck" cream-and-ink header look from the first frame instead of the
   white-on-transparent one meant to float over .hero. app.js still toggles
   .is-stuck on scroll, so these rules only cover the :not(.is-stuck) gap. */
.page--sub .site-head:not(.is-stuck){
  background:rgba(215,203,189,.92);
  color:var(--c-ink);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--c-line);
}
.page--sub .site-head:not(.is-stuck) .navlink,
.page--sub .site-head:not(.is-stuck) .navlink:hover,
.page--sub .site-head:not(.is-stuck) .nav-toggle{color:var(--c-ink-soft);}
.page--sub .site-head:not(.is-stuck) .navlink:hover,
.page--sub .site-head:not(.is-stuck) .nav-toggle:hover{color:var(--c-ink);}
.page--sub .site-head:not(.is-stuck) .btn--secondary{--btn-fg:var(--c-ink);--btn-bd:var(--c-line-strong);}
.page--sub .site-head:not(.is-stuck) .logo--paper{display:none;}
.page--sub .site-head:not(.is-stuck) .logo--ink{display:block;}
.page--sub main{padding-top:72px;}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-right:calc(var(--s-3) * -1);
  background:transparent;border:0;border-radius:var(--r-md);
  color:var(--c-ink);cursor:pointer;
}
@media (min-width:960px){.nav-toggle{display:none;}}
.nav-toggle:hover{background:rgba(20,35,27,.07);}

.site-head__panel{
  display:none;
  background:var(--c-paper);
  /* A light surface inside a header whose floating state is colour:#fff.
     Without this the panel's links inherit white and vanish (1.18:1). */
  color:var(--c-ink);
  border-top:1px solid var(--c-line);
  box-shadow:var(--e-3);
  padding:var(--s-4) 0 var(--s-5);
}
.site-head__panel.is-open{display:block;}
@media (min-width:960px){.site-head__panel{display:none!important;}}
.site-head__panel a{
  display:block;padding:var(--s-3) 0;font-size:1.05rem;font-weight:600;
  border-bottom:1px solid var(--c-line);
}
.site-head__panel a:last-child{border-bottom:0;}
.site-head__panel .btn{
  display:flex;margin-top:var(--s-4);border-bottom:0;
  padding:var(--s-3) var(--s-6);
  /* `.site-head__panel a` above would otherwise drag the button down to
     16.8px/600, below the size that keeps white legible on green. */
  font-size:1.1875rem;font-weight:800;color:var(--btn-fg);
}

/* -- 5.4 hero ------------------------------------------------------------- */

/* The green brand field — #008e2a, the dominant Bounty surface.
   White type on it measures 4.28:1, so everything here is either large
   (h1, sub, button labels) or sits on a darkened inset (flag, proof). */
.hero{
  position:relative;
  background:var(--c-green);
  color:var(--c-on-green);
  padding-block:calc(72px + var(--s-9)) 0;
  overflow:hidden;
}
.hero__inner{
  display:grid;gap:var(--s-8);
  grid-template-columns:1fr;
  align-items:center;
  padding-bottom:var(--s-9);
}
@media (min-width:1000px){
  .hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-9);}
}

/* 13px text on green: only clears 4.5:1 on a darkened inset. rgba(0,0,0,.2)
   takes the field to #007222, white on it 6.12:1. */
.hero__flag{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:rgba(0,0,0,.2);
  color:#fff;
  border-radius:var(--r-pill);padding:.4rem .9rem;
  font-size:var(--t-micro);font-weight:650;margin-bottom:var(--s-5);
}

.hero h1{
  font-size:var(--t-display);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.92;
  text-transform:uppercase;
}
.hero h1 .hero__line2{display:block;}
/* 20px minimum at weight 700 makes this large bold text, so white's 4.28:1
   clears the 3:1 floor at every viewport. It previously ran 16.8px at
   opacity .86 — 3.56:1, under every floor there is. Emphasis here comes
   from size and weight, never from transparency. */
.hero__sub{
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  margin-top:var(--s-5);
  max-width:46ch;
  color:#fff;
}

/* The moat line. 17px at weight 800 on the darkened inset (#007723) is
   5.73:1 in white — clears 4.5:1 with room, same base as .hero__proof.
   Kept a separate block so it reads as a claim, not as part of the subhead. */
.hero__kicker{
  display:inline-block;
  margin-top:var(--s-4);
  padding:.45rem .85rem;
  background:var(--c-green-inset);
  border-radius:var(--r-md);
  color:#fff;
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:-.01em;
}

.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);}
.hero__ctas .btn{flex:1 1 auto;min-width:min(100%,15rem);}
@media (min-width:480px){.hero__ctas .btn{flex:0 0 auto;}}

/* The proof strip carries 15px text, which needs 4.5:1 — unreachable on bare
   #008e2a. It sits on a darkened inset instead (#007723, white 5.73:1),
   which also gives the hero a base to sit on rather than a hairline. */
.hero__proof{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  margin-top:var(--s-6);
  padding:var(--s-4) var(--s-5);
  background:var(--c-green-inset);
  border-radius:var(--r-md);
  color:#fff;
  font-size:var(--t-small);font-weight:600;
}
.hero__proof li{display:flex;align-items:center;gap:var(--s-2);}
.hero__proof svg{width:1.05rem;height:1.05rem;}

/* The hero device. Shows real completed bounties — see index.html. */
.device{
  width:min(100%,320px);margin-inline:auto;
  background:var(--c-paper);
  /* .hero sets colour:#fff for the field. This card is a light surface ON
     that field, so it must restate ink or its text inherits white and
     disappears (measured 1.18:1 before this line). */
  color:var(--c-ink);
  border-radius:28px;
  border:1px solid rgba(20,35,27,.2);
  box-shadow:0 24px 48px rgba(8,42,28,.28);
  padding:var(--s-3);
  rotate:-1.5deg;
}
@media (min-width:1000px){.device{margin-inline:0 auto;}}
.device__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-2) var(--s-2) var(--s-3);
}
.device__title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;}
.device__list{display:grid;gap:var(--s-2);}
.device__row{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-3);
  align-items:baseline;
  padding:var(--s-3);border-radius:var(--r-md);
  background:var(--c-cream);
}
.device__amt{
  font-family:var(--font-display);font-weight:900;font-size:1.15rem;
  color:var(--c-green-ink);white-space:nowrap;
}
.device__task{font-weight:650;font-size:var(--t-small);line-height:1.3;}
.device__meta{grid-column:1/-1;font-size:var(--t-micro);color:var(--c-ink-muted);}
.device__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-3);padding:var(--s-3);
  border-radius:var(--r-md);background:rgba(0,99,29,.1);
}

/* -- 5.5 bounty board ----------------------------------------------------- */

.board__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  margin-bottom:var(--s-5);
  min-width:0;
}
.board__filters{
  display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-2);
  scrollbar-width:none;-ms-overflow-style:none;
  max-width:100%;
  /* bleed to the viewport edge so the rail reads as scrollable on phones */
  margin-inline:calc(var(--s-5) * -1);padding-inline:var(--s-5);
  width:calc(100% + var(--s-5) * 2);
}
.board__filters::-webkit-scrollbar{display:none;}
@media (min-width:768px){
  .board__filters{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;}
}

.filter{
  flex:none;
  /* These live in a horizontal rail on phones, where they are the smallest
     things on the page a thumb has to hit. 44px is the floor. */
  display:inline-flex;align-items:center;min-height:44px;
  padding:.45rem .9rem;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--c-line-strong);
  font-size:var(--t-small);font-weight:650;color:var(--c-ink-soft);
  cursor:pointer;white-space:nowrap;
  transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast);
}
.filter:hover{background:rgba(20,35,27,.06);color:var(--c-ink);}
.filter[aria-pressed="true"]{
  background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper);
}

.board__grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}

/* The card. Reward first, task second, place third — nothing else competes. */
.bounty{
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:var(--s-5);
  transition:transform var(--m-base),box-shadow var(--m-base),border-color var(--m-base);
}
a.bounty:hover{transform:translateY(-2px);box-shadow:var(--e-3);border-color:var(--c-line-green);}
.bounty__amt{
  font-family:var(--font-display);
  font-size:clamp(2rem,1.6rem + 1.4vw,2.6rem);
  font-weight:900;line-height:1;letter-spacing:-.03em;
  color:var(--bounty-green-text);   /* display size on paper: 3.62:1 */
}
.bounty__title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:750;
  line-height:1.25;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bounty__where{font-size:var(--t-small);color:var(--c-ink-muted);}
.bounty__foot{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--c-line);
}

/* Skeletons while the board loads. */
.bounty--skeleton{pointer-events:none;}
.sk{
  background:linear-gradient(90deg,rgba(20,35,27,.07) 25%,rgba(20,35,27,.12) 37%,rgba(20,35,27,.07) 63%);
  background-size:400% 100%;
  border-radius:var(--r-sm);
  animation:sk 1.4s ease infinite;
}
@keyframes sk{from{background-position:100% 50%}to{background-position:0 50%}}
.sk--amt{height:2.2rem;width:5rem;}
.sk--title{height:1.05rem;width:100%;}
.sk--title2{height:1.05rem;width:70%;}
.sk--meta{height:.85rem;width:45%;}

/* Empty / error state for the board. */
.board__note{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  text-align:center;
  padding:var(--s-7) var(--s-5);
  border:1px dashed var(--c-line-strong);border-radius:var(--r-lg);
  background:rgba(241,235,227,.5);
}
.board__note h3{font-size:1.25rem;max-width:34rem;}
.board__note p{max-width:34rem;color:var(--c-ink-muted);font-size:var(--t-small);}
.board__recent{
  display:grid;gap:var(--s-2);width:100%;max-width:26rem;text-align:left;
}
.board__recent a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3);border-radius:var(--r-md);
  background:var(--c-paper);border:1px solid var(--c-line);
  font-weight:650;font-size:var(--t-small);color:var(--c-ink);
  text-decoration:none;
  transition:border-color var(--m-fast);
}
.board__recent a:hover{border-color:var(--c-line-green);}
.board__recent-amt{
  font-family:var(--font-display);font-weight:900;color:var(--c-green-ink);white-space:nowrap;
}

/* -- 5.6 the flow: one bounty moving through its three states -------------

   The page's only narrative section. It exists because "escrow" and "you
   approve, then they're paid" are mechanisms, and a mechanism is easier to
   show than to assert. Each stage is the SAME real bounty at a different
   moment, so the money line — held, held, released — is the spine of it.

   Motion is a reveal, not a performance: the rules draw left to right and the
   cards lift in sequence, once, when the section is first seen. app.js adds
   .is-in. Without JavaScript, and under prefers-reduced-motion, every stage is
   simply already visible — see the end of this block.               */

.flow{display:grid;gap:var(--s-7);counter-reset:flow;}
@media (min-width:900px){.flow{grid-template-columns:repeat(3,1fr);gap:var(--s-6);}}

.flow__stage{display:grid;gap:var(--s-4);align-content:start;}

/* The track. Three rules in a row read as one line across the section. */
.flow__rule{height:3px;background:var(--c-ink);border-radius:3px;transform-origin:left;}
.flow__stage:last-child .flow__rule{background:var(--c-green);}

.flow__mark{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
}
.flow__num{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--t-micro);letter-spacing:.1em;color:var(--c-green-ink);
}
.flow__num::before{counter-increment:flow;content:counter(flow,decimal-leading-zero);}
/* Which side of the marketplace is acting at this moment. This is how the
   page explains that it is two-sided without a separate section for it. */
.flow__side{
  font-size:var(--t-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink-muted);
}

.flow__card{
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:var(--s-5);
  /* state / task / reward / money — the task row absorbs the slack so the
     reward figures and the money lines align across all three cards. That
     alignment is the comparison the section is asking the reader to make. */
  display:grid;gap:var(--s-3);
  grid-template-rows:auto 1fr auto auto;
}
.flow__stage:last-child .flow__card{border-color:var(--c-line-green);}

.flow__state{
  display:inline-flex;align-items:center;gap:.4rem;
  align-self:start;justify-self:start;   /* a chip, not a banner */
  padding:.3rem .7rem;border-radius:var(--r-pill);
  font-size:var(--t-micro);font-weight:700;
  background:rgba(20,35,27,.08);color:var(--c-ink-soft);
}
.flow__state svg{width:.9rem;height:.9rem;}
.flow__state--done{background:var(--c-green-press);color:#fff;}  /* 13px -> 6.05:1 */

/* Two lines reserved, so all three cards are the same height and the reward
   figures and money lines land on one line across the section. That
   alignment is the comparison the section exists to make. */
.flow__task{
  font-weight:650;font-size:var(--t-small);line-height:1.35;
  min-height:calc(1.35em * 2);
}
.flow__amt{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,1.7rem + 1.2vw,2.5rem);line-height:1;letter-spacing:-.03em;
  color:var(--bounty-green-text);   /* display size on paper: 3.62:1 */
}

/* The money line is the point of the whole section, so it gets a rule of its
   own and never wraps into the body copy. */
.flow__money{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-1);padding-top:var(--s-3);
  border-top:1px solid var(--c-line);
  font-size:var(--t-micro);
}
.flow__money dt{color:var(--c-ink-muted);}
.flow__money dd{margin:0;font-weight:700;color:var(--c-ink);}
.flow__money dd.is-released{color:var(--c-green-ink);}

.flow__stage h3{font-size:1.1rem;}
.flow__stage > p{font-size:var(--t-small);color:var(--c-ink-soft);}

/* The reveal. Default is the finished state, so no-JS and reduced-motion
   visitors get the whole thing immediately; .can-animate is set by app.js
   only when it is going to run the sequence. */
.can-animate .flow__rule{transform:scaleX(0);}
.can-animate .flow__card,
.can-animate .flow__stage h3,
.can-animate .flow__stage > p{opacity:0;transform:translateY(10px);}

.can-animate .flow.is-in .flow__rule{
  transform:scaleX(1);
  transition:transform 520ms cubic-bezier(.2,0,.2,1) var(--flow-delay,0ms);
}
.can-animate .flow.is-in .flow__card,
.can-animate .flow.is-in .flow__stage h3,
.can-animate .flow.is-in .flow__stage > p{
  opacity:1;transform:none;
  transition:opacity 420ms ease var(--flow-delay,0ms),
             transform 420ms cubic-bezier(.2,0,.2,1) var(--flow-delay,0ms);
}
.flow__stage:nth-child(1){--flow-delay:0ms;}
.flow__stage:nth-child(2){--flow-delay:160ms;}
.flow__stage:nth-child(3){--flow-delay:320ms;}

@media (prefers-reduced-motion:reduce){
  .can-animate .flow__rule{transform:none;}
  .can-animate .flow__card,
  .can-animate .flow__stage h3,
  .can-animate .flow__stage > p{opacity:1;transform:none;}
}

/* -- 5.7 safety rail (icon → headline → one line) ------------------------- */

.rail{display:grid;gap:var(--s-5);}
@media (min-width:640px){.rail{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.rail{grid-template-columns:repeat(3,1fr);}}
.rail__item{display:flex;gap:var(--s-4);align-items:flex-start;}
.rail__icon{
  flex:none;width:2.5rem;height:2.5rem;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--c-green);color:var(--c-on-green);
}
.rail__icon svg{width:1.25rem;height:1.25rem;}
.rail__item h3{font-size:1.05rem;margin-bottom:var(--s-1);}
.rail__item p{font-size:var(--t-small);color:var(--c-ink-soft);}

/* -- 5.8 forms ------------------------------------------------------------ */

.post-layout{display:grid;gap:var(--s-7);grid-template-columns:1fr;}
/* Belt and braces for the note on .input above: a grid item may never be
   sized by its widest indivisible child. */
.post-layout > *{min-width:0;}
.form,.field{min-width:0;}
@media (min-width:1000px){
  .post-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s-8);align-items:start;}
  .post-layout > .section__head{position:sticky;top:104px;}
}

.form{display:grid;gap:var(--s-4);}
.field{display:grid;gap:var(--s-2);}
.field__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  font-size:var(--t-small);font-weight:650;color:var(--c-ink);
}
.field__label .opt{font-weight:500;color:var(--c-ink-muted);font-size:var(--t-micro);}
.field__hint{font-size:var(--t-micro);color:var(--c-ink-muted);}
.field__err{font-size:var(--t-micro);color:var(--c-danger);font-weight:600;}

.input,.textarea,.select{
  width:100%;min-height:48px;
  /* Chromium gives input[type=datetime-local] a 257px min-content width.
     Inside a grid (.field is one, and grid items default to min-width:auto)
     that propagated all the way out to .post-layout and pushed the page to
     scrollWidth 347 on a 320px viewport. Every input takes min-width:0 so an
     intrinsic control width can never set the page width again. */
  min-width:0;
  padding:var(--s-3) var(--s-4);
  background:var(--c-cream);
  color:var(--c-ink);
  border:1.5px solid var(--c-line-strong);
  border-radius:var(--r-md);
  font-size:1rem;   /* 16px — stops iOS zooming the page on focus */
  transition:border-color var(--m-fast),background var(--m-fast),box-shadow var(--m-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--c-ink-muted);opacity:.85;}
.input:hover,.textarea:hover,.select:hover{border-color:var(--c-ink-muted);}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--c-green-ink);background:var(--c-paper);
  box-shadow:0 0 0 3px rgba(0,99,29,.2);
}
.textarea{min-height:7rem;resize:vertical;line-height:1.55;}
.select{
  appearance:none;padding-right:var(--s-8);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347594e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;background-size:1.1rem;
}
[aria-invalid="true"].input,[aria-invalid="true"].textarea,[aria-invalid="true"].select{
  border-color:var(--c-danger);
}

/* $ prefix on the amount field */
.money-wrap{position:relative;display:grid;}
.money-wrap .input{padding-left:2.1rem;}
.money-wrap .money-mark{
  position:absolute;left:var(--s-4);top:0;bottom:0;
  display:flex;align-items:center;
  color:var(--c-ink-muted);font-weight:650;pointer-events:none;
}

/* Segmented radio group */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);border:0;padding:0;margin:0;}
.segmented legend{
  font-size:var(--t-small);font-weight:650;margin-bottom:var(--s-2);padding:0;
}
.segmented label{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-3);
  border:1.5px solid var(--c-line-strong);border-radius:var(--r-md);
  background:var(--c-cream);
  font-size:var(--t-small);font-weight:650;color:var(--c-ink-soft);
  cursor:pointer;user-select:none;
  transition:background var(--m-fast),border-color var(--m-fast),color var(--m-fast);
}
.segmented label:hover{border-color:var(--c-ink-muted);}
.segmented input:checked + span,
.segmented label:has(input:checked){
  background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper);
}
.segmented label:focus-within{
  outline:2px solid var(--c-green-ink);outline-offset:2px;
}

.form__note{
  border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
  font-size:var(--t-small);font-weight:600;
}
.form__note--err{background:var(--c-danger-bg);color:var(--c-danger);border:1px solid rgba(165,34,24,.3);}
.form__note--ok{background:var(--c-ok-bg);color:var(--c-ok);border:1px solid var(--c-line-green);}

.form__legal{font-size:var(--t-micro);color:var(--c-ink-muted);line-height:1.5;}

/* -- 5.9 price picker ----------------------------------------------------- */

.pricer{display:grid;gap:var(--s-5);}
@media (min-width:880px){.pricer{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-6);align-items:start;}}

.pricer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);}
@media (min-width:520px){.pricer__grid{grid-template-columns:repeat(2,1fr);}}

.pricer__task{
  display:grid;gap:var(--s-1);
  text-align:left;padding:var(--s-3) var(--s-4);
  background:transparent;border:1.5px solid var(--c-line);border-radius:var(--r-md);
  cursor:pointer;
  transition:background var(--m-fast),border-color var(--m-fast);
}
.pricer__task:hover{background:rgba(241,235,227,.7);border-color:var(--c-line-strong);}
.pricer__task[aria-pressed="true"]{background:var(--c-paper);border-color:var(--c-ink);}
.pricer__name{font-size:var(--t-small);font-weight:650;}
.pricer__range{font-size:var(--t-micro);font-weight:700;color:var(--c-ink-muted);}
.pricer__task[aria-pressed="true"] .pricer__range{color:var(--c-green-ink);}

.pricer__panel{
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:var(--s-6);
  position:sticky;top:96px;
}
.pricer__figure{
  font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(2.5rem,2rem + 2.5vw,3.5rem);line-height:1;
  color:var(--bounty-green-text);   /* display size on paper */
}

/* The competitor fee anchor. Their numbers sit in muted ink, ours in green
   ink at full weight, so the 3% row is the one the eye lands on. Rows stack
   on narrow screens rather than squeezing the two columns together. */
.fee-anchor{
  display:grid;gap:0;
  border-top:1px solid var(--c-line);
}
.fee-anchor li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--c-line);
}
.fee-anchor__who{
  flex:0 0 8.5rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--c-ink);
}
.fee-anchor__what{
  flex:1 1 16rem;
  font-size:var(--t-small);
  color:var(--c-ink-muted);
}
.fee-anchor .is-ours .fee-anchor__who,
.fee-anchor .is-ours .fee-anchor__what{
  color:var(--c-green-ink);
  font-weight:800;
}

/* Named testimonial cards. The face and the outcome line carry this, so the
   attribution block is a real component rather than a caption. Markup and
   fill-in instructions live in index.html at the #stories section. */
.story{display:flex;flex-direction:column;}
.story__who{
  display:flex;align-items:center;gap:var(--s-3);
  margin-top:auto;padding-top:var(--s-5);
}
.story__face{
  width:56px;height:56px;flex:0 0 56px;
  border-radius:var(--r-pill);
  object-fit:cover;
  border:1px solid var(--c-line);
}
.story__name{display:block;font-size:var(--t-small);font-weight:800;color:var(--c-ink);}
.story__job{display:block;font-size:var(--t-micro);font-weight:650;color:var(--c-green-ink);}

/* Running totals. The numbers are deliberately small and unspun — the honesty
   is the proof here, so the date stamp gets real weight rather than being
   tucked away as fine print. */
.tally{
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:var(--s-6);
}
.tally__lead{
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:var(--s-5);
}
.tally__grid{
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.tally__item dt{
  font-size:var(--t-micro);
  font-weight:700;
  color:var(--c-ink-muted);
  margin-bottom:var(--s-2);
}
.tally__item dd{
  font-family:var(--font-display);
  font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);
  font-weight:900;letter-spacing:-.03em;line-height:1;
  color:var(--c-green-ink);
}
.tally__sub{
  font-family:var(--font-text);
  font-size:var(--t-small);
  font-weight:650;
  color:var(--c-ink-muted);
  letter-spacing:0;
}
.tally__stamp{
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--c-line);
  font-size:var(--t-small);
  color:var(--c-ink-soft);
}

/* JTBD cards. The card is a column so the price anchor and CTA sit flush at
   the bottom regardless of how long each situation runs. */
.job{display:flex;flex-direction:column;}
.job__emotion{
  margin-bottom:var(--s-2);
  font-size:var(--t-small);
  font-weight:700;
  color:var(--c-green-ink);
}
.job__tasks{
  margin-top:var(--s-4);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--c-ink-muted);
}
.job__anchor{
  margin-top:auto;
  padding-top:var(--s-4);
  font-family:var(--font-display);
  font-size:1.375rem;font-weight:900;letter-spacing:-.03em;line-height:1;
  color:var(--c-green-ink);
}

/* Ambassador rate card. The amount is the scannable column, so it gets the
   display face at a fixed width and the label sits beside it in soft ink. */
.rate-card{
  display:grid;gap:0;
  border-top:1px solid var(--c-line);
}
.rate-card li{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--c-line);
}
.rate-card__amt{
  flex:0 0 3rem;
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1;
  color:var(--c-green-ink);
}
.rate-card__for{
  font-size:var(--t-small);
  font-weight:650;
  color:var(--c-ink-soft);
}

/* -- 5.10 FAQ ------------------------------------------------------------- */

.faq{border-top:1px solid var(--c-line);}
.faq details{border-bottom:1px solid var(--c-line);}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary svg{
  width:1.25rem;height:1.25rem;color:var(--c-green-ink);
  transition:transform var(--m-base);
}
.faq details[open] summary svg{transform:rotate(45deg);}
.faq details p{padding-bottom:var(--s-5);color:var(--c-ink-soft);max-width:52rem;}

/* -- 5.11 hunter band ----------------------------------------------------- */

/* Deep green field — light type on it measures 6.51:1. */
.band-dark{
  background:var(--c-green-dark);
  color:var(--c-on-dark);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}
.band-dark .eyebrow,.band-dark .accent{color:#7fe0ae;}
.band-dark .lead,.band-dark .muted{color:rgba(241,235,227,.8);}
.band-dark .card{background:rgba(241,235,227,.08);border-color:var(--c-line-on-dark);}
.band-dark .card h3{color:var(--c-on-dark);}
.band-dark .card p{color:var(--c-on-dark);}   /* was .78 alpha: 4.02:1 */
.band-dark .btn--secondary{--btn-fg:var(--c-on-dark);--btn-bd:rgba(241,235,227,.45);}
.band-dark .btn--secondary:hover{--btn-bg:rgba(241,235,227,.12);--btn-bd:var(--c-on-dark);}
.band-dark__inner{position:relative;z-index:1;padding:var(--s-8) var(--s-5);}
@media (min-width:768px){.band-dark__inner{padding:var(--s-9) var(--s-8);}}
/* The download section: copy on the left, the plain facts on the right. */
.dl-layout{display:grid;gap:var(--s-7);grid-template-columns:1fr;align-items:center;}
@media (min-width:900px){
  .dl-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-8);}
}
.dl-facts{display:grid;gap:var(--s-4);}
.dl-facts li{
  padding-left:var(--s-5);border-left:2px solid var(--c-green);
  font-size:var(--t-small);color:var(--c-ink-soft);
}
.dl-facts strong{display:block;color:var(--c-ink);font-weight:700;}

/* -- 5.12 founders -------------------------------------------------------- */

.founders{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));}
.founder{text-align:center;}
.founder img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  margin:0 auto var(--s-3);
  border:2px solid var(--c-line);
  background:var(--c-sunken);
}
.founder h3{font-size:1rem;}
.founder p{font-size:var(--t-micro);color:var(--c-ink-muted);}
.founder__links{display:flex;justify-content:center;gap:var(--s-1);margin-top:var(--s-1);}
.founder__links a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);
  color:var(--c-ink-muted);transition:color var(--m-fast),background var(--m-fast);
}
.founder__links a:hover{background:rgba(20,35,27,.07);}
.founder__links a:hover{color:var(--c-green-ink);}
.founder__links svg{width:1.1rem;height:1.1rem;}

/* -- 5.13 store badges ---------------------------------------------------- */

.stores{display:flex;flex-wrap:wrap;gap:var(--s-3);}
.store{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);min-height:56px;
  background:var(--c-ink);color:var(--c-paper);
  border-radius:var(--r-md);
  transition:background var(--m-fast),transform var(--m-fast);
}
.store:hover{background:#23382c;transform:translateY(-1px);}
.store svg{width:1.6rem;height:1.6rem;}
.store span{display:block;line-height:1.15;}
.store .store__pre{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;}
.store .store__name{font-family:var(--font-display);font-size:1rem;font-weight:800;}

.stars{color:var(--c-green-ink);letter-spacing:.08em;}

/* -- 5.13b sticky mobile action bar ---------------------------------------

   The page runs to ~17,800px on a phone. Without this the primary action is
   only reachable in the hero and the footer, which is most of a scroll away
   from wherever a visitor actually decides. app.js shows it once the hero has
   gone and hides it again over the post form, so it never covers the thing it
   is pointing at, and never double-asks.

   Desktop keeps the header CTA and does not need it.                       */

.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-5);
  padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom,0px));
  background:rgba(215,203,189,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--c-line);
  transform:translateY(110%);
  transition:transform var(--m-base);
}
@media (max-width:959px){.actionbar{display:flex;}}
/* `display:flex` above outranks the [hidden] attribute's UA display:none, so
   the attribute has to be honoured explicitly or the markup's `hidden` is a
   lie until app.js clears it. */
.actionbar[hidden]{display:none!important;}
.actionbar.is-up{transform:none;}
.actionbar .btn{flex:1 1 auto;min-width:0;}
.actionbar .btn--secondary{flex:0 1 auto;}

/* The bar covers the last of the page, so the footer gets clearance. */
@media (max-width:959px){
  .site-foot{padding-bottom:calc(var(--s-8) + env(safe-area-inset-bottom,0px));}
}

@media print{.actionbar{display:none!important;}}

/* -- 5.14 footer ---------------------------------------------------------- */

.site-foot{background:var(--c-green-deep);color:var(--c-on-dark);}
.site-foot a{color:rgba(241,235,227,.82);transition:color var(--m-fast);}
.site-foot a:hover{color:var(--c-on-dark);text-decoration:underline;text-underline-offset:3px;}
/* A button in the footer is a button, not a footer link. Without this,
   `.site-foot a` wins on specificity and paints the label at 82% paper over
   the green fill — 2.90:1. */
.site-foot a.btn{color:var(--btn-fg);}
.site-foot a.btn:hover{text-decoration:none;}
.site-foot h3{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;
  font-family:var(--font-text);font-weight:700;
  color:rgba(241,235,227,.68);margin-bottom:var(--s-3);   /* .6 measured 4.49:1 */
}
.site-foot li{font-size:var(--t-small);}
/* Footer nav is a list of targets, not prose, so each link gets a real box
   to tap. Padding + the row gap keeps ~44px between adjacent targets. */
.site-foot nav li a{display:inline-block;padding-block:.45rem;}
.foot-cta{
  border-bottom:1px solid var(--c-line-on-dark);
  padding-block:var(--s-9);text-align:center;
}
.foot-cta h2{font-size:var(--t-h2);margin-bottom:var(--s-4);}
.foot-cta .lead{color:rgba(241,235,227,.8);margin-inline:auto;}
.foot-cta .btn--secondary{--btn-fg:var(--c-on-dark);--btn-bd:rgba(241,235,227,.45);}
.foot-cta .btn--secondary:hover{--btn-bg:rgba(241,235,227,.12);--btn-bd:var(--c-on-dark);}
.foot-grid{
  display:grid;gap:var(--s-6);padding-block:var(--s-8);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.foot-grid__brand{grid-column:1/-1;max-width:22rem;}
@media (min-width:900px){.foot-grid__brand{grid-column:span 2;}}
.foot-grid__brand .foot-logo{
  display:flex;align-items:center;gap:.5rem;margin-bottom:var(--s-3);
}
.foot-grid__brand .foot-logo img{height:28px;width:28px;}
.foot-grid__brand .foot-logo span{
  font-family:var(--font-display);font-weight:900;
  font-size:1.2rem;letter-spacing:-.045em;color:var(--c-on-dark);
}
.foot-grid__brand p{font-size:var(--t-small);color:rgba(241,235,227,.72);}
.foot-base{
  border-top:1px solid var(--c-line-on-dark);
  padding-block:var(--s-5);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  align-items:center;justify-content:space-between;
  font-size:var(--t-micro);color:rgba(241,235,227,.65);
}

/* ---------------------------------------------------------------- 6. state */

/* One focus treatment for the whole site. */
:focus-visible{
  outline:3px solid var(--c-green-ink);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.hero :focus-visible,.band-dark :focus-visible,.site-foot :focus-visible{
  outline-color:var(--c-paper);
}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .sk{animation:none;}
}

@media print{
  .site-head,.nav-toggle,.board__filters,.skip{display:none!important;}
  body{background:#fff;color:#000;}
  .hero,.band-dark,.site-foot{background:#fff!important;color:#000!important;}
}

/* ------------------------------------------------------------ 7. utilities

   A deliberately small, closed set. These exist because the CSP in ../_headers
   sets `style-src 'self'` with no 'unsafe-inline', so a `style="..."` attribute
   in the markup is dropped by the browser. Every one-off spacing decision has
   to be a class. Keep this list short; if something here is used more than a
   few times, it belongs in a component above.                               */

.mt-3{margin-top:var(--s-3);}
.mt-4{margin-top:var(--s-4);}
.mt-5{margin-top:var(--s-5);}
.mt-6{margin-top:var(--s-6);}
.mt-7{margin-top:var(--s-7);}
.mb-0{margin-bottom:0;}
.mb-2{margin-bottom:var(--s-2);}
.mb-3{margin-bottom:var(--s-3);}
.mb-4{margin-bottom:var(--s-4);}
.mb-5{margin-bottom:var(--s-5);}
.my-5{margin-block:var(--s-5);}

.gap-4{gap:var(--s-4);}
.gap-7{gap:var(--s-7);}

.grid-1{grid-template-columns:1fr;}
.grid-fit-xs{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));}
.grid-fit-sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));}

.items-start{align-items:start;}
.items-center{align-items:center;}
.row--center{justify-content:center;}

.mw-34{max-width:34rem;}
.mw-40{max-width:40rem;}
.mw-44{max-width:44rem;}
.mw-46{max-width:46rem;}
.shell--narrow{max-width:var(--shell-narrow);}

.pad-6{padding:var(--s-6);}
.c-soft{color:var(--c-ink-soft);}
.ico-green{color:var(--c-green-ink);}
.fw-650{font-weight:650;}

/* #post sits behind the fixed header when jumped to from the nav. */
.anchor-offset{scroll-margin-top:88px;}

.quote{font-size:var(--t-lead);margin-block:var(--s-4);line-height:1.45;}

.pricer__suggested{
  font-family:var(--font-display);font-weight:900;font-size:1.6rem;line-height:1.1;
}

.card--dashed-center{
  border-style:dashed;
  display:flex;flex-direction:column;justify-content:center;
}

/* The post-checkout result panel, swapped in by app.js on return from
   Stripe. Classes rather than inline styles — see the note at the top of
   this section. */
.result{text-align:center;padding-block:var(--s-7);}
.result__body{max-width:28rem;margin-inline:auto;}