/* Feeder Fort — production stylesheet.
   Blocks 1-5 are the Feeder Fort Design System, inlined in $import order
   (tokens/fonts, tokens/colors, tokens/typography, tokens/layout, css/base,
   css/components, css/sections). Inlined rather than @imported: seven
   chained stylesheet requests is seven round trips in front of first paint,
   and this audience is on mobile data.
   Block 6 is Feeder Fort page work the system does not cover — the jump
   section, the comparison table, the FAQ grid, and the bundle/checkout flow.
   Do not edit blocks 1-5 by hand; re-inline them from the system instead. */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap");
/* Two families. No third. Oswald is condensed and upright — it does the display work;
   Open Sans keeps the 19px reading floor comfortable. Preload both in the document head. */
:root{--font-display:"Oswald","Arial Narrow",Impact,sans-serif;--font-body:"Open Sans","Helvetica Neue",Helvetica,sans-serif}

/* Feeder Fort palette — playful, earthy, premium.
   Forest is the voice of authority AND the action colour. Sunshine is the playful mark.
   Cardinal is demoted to two jobs only: the defeat strikethrough and the focus ring. */
:root{
/* base */
--forest:#1c3527;--forest-light:#25452f;--forest-deep:#142819;
--cream:#fdf9ed;--cream-dark:#f6efd9;--ink:#1e2420;
--sunshine:#f4c233;--sunshine-dark:#dca916;--sunshine-soft:#fbe6a8;
--cardinal:#b5342a;--cardinal-dark:#93271f;
--line:#e6dcc0;--line-dark:#35513f;
--cream-text:#f6f0df;
/* the only two whites: the guarantee panel and the cart bump box.
   both are earned - they are where the brand hands over money-back trust. */
--white-earned:#ffffff;

/* semantic - surfaces */
--surface-page:var(--cream);--surface-alt:var(--cream-dark);--surface-invert:var(--forest);
--surface-close:var(--forest-deep);--surface-trust:var(--white-earned);--surface-placeholder:var(--cream-dark);
--surface-highlight:var(--sunshine);--surface-scrim:rgba(20,30,24,.55);
/* semantic - text */
--text-body:var(--ink);--text-heading:var(--forest);--text-on-invert:var(--cream-text);
--text-heading-invert:#ffffff;--text-accent:var(--forest);--text-accent-invert:var(--sunshine);
--text-defeat:var(--cardinal);
/* semantic - lines */
--rule:var(--line);--rule-invert:var(--line-dark);--rule-accent:var(--sunshine);
--rule-step:4px solid var(--sunshine);
/* semantic - interactive */
--action-bg:var(--forest);--action-bg-hover:var(--forest-light);--action-text:#ffffff;
--focus-ring:var(--cardinal);--zebra:rgba(28,53,39,.03);--ghost-ink:rgba(244,194,51,.55)
}

/* Oswald is condensed, so display sizes hold more characters per line than a wide serif would;
   measures stay capped anyway. 19px body is a floor, not a suggestion. Nothing on the page goes under 15px.
   The demo is 45+ and half of them are reading on a phone outdoors. */
:root{
--fs-h1:clamp(2.4rem,5.2vw,3.9rem); /* @kind font */
--fs-h2:clamp(1.8rem,3.6vw,2.6rem); /* @kind font */
--fs-h2-close:clamp(2rem,4.4vw,3rem); /* @kind font */
--fs-h3:24px; /* @kind font */
--fs-manifesto:clamp(2.2rem,4.4vw,2.6rem); /* @kind font */
--fs-hero-sub:21px; /* @kind font */
--fs-body:19px; /* @kind font */
--fs-body-sm:18px; /* @kind font */
--fs-caption:15px; /* @kind font */
--fs-eyebrow:14px; /* @kind font */
--fs-ghost:74px; /* @kind font */
--fs-price:34px; /* @kind font */
--lh-display:1.12; /* @kind font */
--lh-heading:1.16; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-tight:1; /* @kind font */
--ls-h1:-.005em; /* @kind font */
--ls-h2:0em; /* @kind font */
--ls-eyebrow:.14em; /* @kind font */
--ls-caps:.08em; /* @kind font */
--fw-display:600; /* @kind font */
--fw-display-heavy:700; /* @kind font */
--fw-display-soft:500; /* @kind font */
--fw-body:400; /* @kind font */
--fw-body-bold:700; /* @kind font */
--measure-body:58ch; /* @kind other */
--measure-heading:24ch; /* @kind other */
--measure-copy-col:52ch /* @kind other */
}
h1,.t-h1{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-display);letter-spacing:var(--ls-h1);color:var(--text-heading);margin:0}
h2,.t-h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-h2);color:var(--text-heading);max-width:var(--measure-heading);margin:0}
h3,.t-h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.25;color:var(--text-heading);margin:0}
p,.t-body{font-size:var(--fs-body);line-height:var(--lh-body);max-width:var(--measure-body);margin:0}
.t-sub{font-size:var(--fs-hero-sub);line-height:1.5;max-width:var(--measure-body)}
.t-caption{font-size:var(--fs-caption);line-height:1.45}
.t-accent{color:var(--text-accent)}
@media(max-width:860px){p,.t-body{font-size:var(--fs-body-sm)}}

/* Layout, radii, motion. One breakpoint: 860px. */
:root{
--wrap:1120px;--gutter:24px;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:18px;--space-5:24px;--space-6:32px;
--space-7:44px;--space-8:56px;--space-9:72px;--space-10:88px;
--section-y:72px;--section-y-mobile:52px;--section-y-close:88px;
--r-btn:999px;--r-panel:16px;--r-img:20px;--r-trust:20px;--r-close:28px;--r-pill:999px;--r-chip:14px;
--tap-min:48px;--tap-min-bar:44px;
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--dur-reveal:.6s; /* @kind other */
--dur-ui:.18s; /* @kind other */
--dur-drawer:.25s; /* @kind other */
--stagger:.1s; /* @kind other */
--shadow-bar:0 -8px 24px rgba(20,30,24,.18);--shadow-drawer:-12px 0 40px rgba(20,30,24,.22)
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--close{padding-block:var(--section-y-close)}
@media(max-width:860px){.section{padding-block:var(--section-y-mobile)}}
/* Ground alternation is the page's spine:
   cream -> cream-dark -> forest -> cream -> cream-dark -> cream -> cream(guarantee) -> cream-dark -> forest-deep */
.ground-cream{background:var(--surface-page);color:var(--text-body)}
.ground-alt{background:var(--surface-alt);color:var(--text-body)}
.ground-forest{background:var(--surface-invert);color:var(--text-on-invert)}
.ground-close{background:var(--surface-close);color:var(--text-on-invert)}
/* Split ratios. Never let two adjacent sections share a ratio and an image side. */
.split-hero{display:grid;grid-template-columns:55fr 45fr;gap:var(--space-8);align-items:center}
.split-media{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:center}
.split-copy{display:grid;grid-template-columns:5fr 6fr;gap:var(--space-8);align-items:center}
.split-tight{display:grid;grid-template-columns:4fr 5fr;gap:var(--space-7);align-items:center}
@media(max-width:860px){.split-hero,.split-media,.split-copy,.split-tight{grid-template-columns:1fr;gap:var(--space-6)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--forest-light);text-decoration-color:var(--sunshine-dark)}
.ground-forest a,.ground-close a,footer a{color:var(--cream-text)}
.ground-forest a:hover,.ground-close a:hover,footer a:hover{color:var(--sunshine)}
/* Focus rings are mandatory on every interactive element. Non-negotiable at 45+. */
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
.ground-forest :focus-visible,.ground-close :focus-visible,footer :focus-visible{outline-color:var(--sunshine)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Reveal contract - JS toggles .is-in at a 0.12 IntersectionObserver threshold. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
/* Stagger siblings 0.1s apart. CSS only - no new JS. */
.stagger>*{transition-delay:0s}
.reveal.is-in .stagger>:nth-child(2),.stagger.is-in>:nth-child(2){transition-delay:.1s}
.reveal.is-in .stagger>:nth-child(3),.stagger.is-in>:nth-child(3){transition-delay:.2s}
.reveal.is-in .stagger>:nth-child(4),.stagger.is-in>:nth-child(4){transition-delay:.3s}
.reveal.is-in .stagger>:nth-child(5),.stagger.is-in>:nth-child(5){transition-delay:.4s}
/* Shared policy pages: /shipping /returns /privacy /contact /thanks */
.policy-main{max-width:720px;margin-inline:auto;padding:var(--space-9) var(--gutter)}
.policy-main h1{margin-bottom:var(--space-5)}
.policy-main h2{font-size:var(--fs-h3);margin-block:var(--space-7) var(--space-3)}
.policy-main p,.policy-main li{font-size:var(--fs-body);line-height:var(--lh-body)}
.policy-main ul{padding-left:1.1em}
.policy-main li+li{margin-top:var(--space-2)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.btn:active,.spec-table tbody tr:hover,.hacks-ledger li:hover{transform:none}
.manifesto span{opacity:1}
.mech-leader{stroke-dashoffset:0!important}
}

/* ── Button ──────────────────────────────────────────────────────────────
   Pill, forest fill, white text. Forest is the action colour. No gradient, ever. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap-min);padding:18px 34px;border:0;border-radius:var(--r-btn);background:var(--action-bg);color:var(--action-text);font-family:var(--font-body);font-weight:var(--fw-body-bold);font-size:19px;line-height:1.1;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:background-color var(--dur-ui) ease,transform .08s ease}
.btn:hover{background:var(--action-bg-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--line);color:#6b6252;box-shadow:none;cursor:not-allowed}
.btn--big{font-size:21px;padding:20px 42px}
.btn--wide{width:100%}
.btn--bar{min-height:var(--tap-min-bar);padding:12px 26px;font-size:18px}
/* Sunshine variant: only on forest grounds, where a forest button would disappear. */
.btn--sun{background:var(--sunshine);color:var(--forest)}
.btn--sun:hover{background:var(--sunshine-dark)}
.btn__note{display:block;font-size:var(--fs-caption);font-weight:var(--fw-body);margin-top:10px;color:var(--ink);opacity:.85}

/* ── Trust line ──────────────────────────────────────────────────────────
   The reassurance under the CTA. Facts only. */
.trust-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-size:var(--fs-caption);color:var(--ink);opacity:.9}
.trust-line span{display:inline-flex;align-items:center;gap:7px}
.trust-line svg{width:15px;height:15px;color:var(--forest);flex:none}
.trust-line b{font-weight:var(--fw-body);opacity:.5}
.ground-forest .trust-line,.ground-close .trust-line{color:var(--cream-text)}
.ground-forest .trust-line svg,.ground-close .trust-line svg{color:var(--sunshine)}

/* ── Eyebrow ─────────────────────────────────────────────────────────────
   Forest label, sunshine rule. Never floats alone. */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-body);font-weight:var(--fw-body-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent);margin:0 0 var(--space-4)}
.eyebrow::before{content:"";width:26px;height:4px;border-radius:2px;background:var(--sunshine);flex:none}
.eyebrow--stacked{display:block}
.eyebrow--stacked::before{display:block;margin-bottom:10px}
.ground-forest .eyebrow,.ground-close .eyebrow,.eyebrow--invert{color:var(--text-accent-invert)}

/* ── Stat circles ────────────────────────────────────────────────────────
   Sunshine discs with a number in Oswald and a plain label underneath. */
.stat-circles{display:flex;flex-wrap:wrap;gap:26px 34px;list-style:none;margin:var(--space-6) 0 0;padding:0}
.stat{display:grid;justify-items:center;gap:10px;text-align:center}
.stat__disc{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--sunshine);color:var(--forest);font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--fs-caption);font-weight:var(--fw-body-bold);color:var(--ink);max-width:12ch}
.ground-forest .stat__label,.ground-close .stat__label{color:var(--cream-text)}

/* ── Sticker badge ───────────────────────────────────────────────────────
   One playful tilted mark. Never more than one per photo. */
.sticker{position:absolute;z-index:3;display:grid;place-items:center;text-align:center;width:112px;height:112px;border-radius:50%;background:var(--sunshine);color:var(--forest);font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:19px;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;transform:rotate(-11deg);box-shadow:0 6px 18px rgba(20,30,24,.16);padding:10px}
.sticker--forest{background:var(--forest);color:var(--sunshine)}
.sticker--tl{top:-22px;left:-22px}
.sticker--tr{top:-22px;right:-22px}
.sticker--br{bottom:-22px;right:-22px}
@media(max-width:860px){.sticker{width:92px;height:92px;font-size:16px}.sticker--tl{top:-14px;left:8px}}

/* ── FUD checks ──────────────────────────────────────────────────────────
   One drawn mark, used in the hero and the final CTA so the two rhyme. */
.fud-checks{display:flex;flex-wrap:wrap;gap:14px 26px;list-style:none;margin:0;padding:0}
.fud-row{display:flex;align-items:center;gap:10px;font-size:var(--fs-caption);font-weight:var(--fw-body-bold);letter-spacing:.01em}
.fud-row__mark{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sunshine);color:var(--forest)}
.fud-row__mark svg{width:12px;height:12px;display:block}
.ground-forest .fud-row,.ground-close .fud-row{color:var(--cream-text)}

/* ── Image slot ──────────────────────────────────────────────────────────
   .is-missing is a live state, not an error - photos ship after the page does. */
.imgslot{position:relative;display:block;border-radius:var(--r-img);overflow:hidden;background:var(--surface-placeholder)}
.imgslot img{width:100%;height:100%;object-fit:cover}
.imgslot .ph-label{display:none}
.imgslot.is-missing{display:grid;place-items:center;border:2px dashed var(--line);background:var(--surface-placeholder)}
.imgslot.is-missing img{display:none}
.imgslot.is-missing .ph-label{display:block;padding:20px;font-size:var(--fs-caption);font-weight:var(--fw-body-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--forest);opacity:.75;text-align:center}
.imgslot--43{aspect-ratio:4/3}.imgslot--169{aspect-ratio:16/9}.imgslot--11{aspect-ratio:1/1}.imgslot--32{aspect-ratio:3/2}.imgslot--54{aspect-ratio:5/4}
/* Framing: an offset ground plate reads mounted, not pasted. */
.imgframe{position:relative}
.imgframe::before{content:"";position:absolute;inset:16px -16px -16px 16px;border-radius:var(--r-img);background:var(--sunshine);z-index:0}
.imgframe--forest::before{background:var(--forest)}
.imgframe--left::before{inset:16px 16px -16px -16px}
.imgframe>.imgslot{position:relative;z-index:1}
.imgslot--ring{box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--surface-page)}
.imgcap{margin-top:10px;font-size:var(--fs-caption);color:var(--ink);opacity:.85;max-width:34ch}

/* ── Spec table (CN-04) ──────────────────────────────────────────────────
   One wrapper border + overflow hidden + internal rules. Never double-drawn. */
.spec-table{width:100%;border-collapse:collapse;background:var(--surface-page)}
.spec-wrap{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.spec-table th,.spec-table td{text-align:left;padding:16px 20px;font-size:var(--fs-body-sm);vertical-align:top}
.spec-table th{width:38%;background:var(--surface-alt);font-family:var(--font-body);font-weight:var(--fw-body-bold);color:var(--forest)}
.spec-table tr+tr th,.spec-table tr+tr td{border-top:1px solid var(--line)}
.spec-table tbody tr:nth-child(even) td{background:var(--zebra)}
@media(max-width:860px){.spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block}
.spec-table tr{display:grid;grid-template-columns:38% 62%}
.spec-table th{width:auto}
.spec-table tr+tr th,.spec-table tr+tr td{border-top:1px solid var(--line)}}

/* ── Ledger (LS-02) ──────────────────────────────────────────────────────
   A ledger of defeats — the one place cardinal still speaks. */
.hacks-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hacks-ledger li{display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:0 18px;padding:18px 12px;border-radius:var(--r-chip);transition:background-color var(--dur-ui) ease,opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.hacks-ledger li+li{border-top:1px solid var(--line)}
.hacks-ledger li:hover{background:var(--surface-alt)}
.hacks-num{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:26px;font-variant-numeric:tabular-nums;color:var(--forest)}
.hack{font-size:var(--fs-body);color:var(--ink);background-image:linear-gradient(var(--cardinal),var(--cardinal));background-repeat:no-repeat;background-position:0 58%;background-size:0 2px;transition:background-size .55s var(--ease-out) .18s}
.is-in .hack{background-size:100% 2px}
.verdict{justify-self:end;text-align:right;font-size:var(--fs-caption);font-weight:var(--fw-body-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-defeat);transition:transform var(--dur-ui) var(--ease-out)}
.hacks-ledger li:hover .verdict{transform:translateX(4px)}
.hacks-close{font-family:var(--font-display);font-weight:var(--fw-display);font-size:26px;line-height:1.25;color:var(--forest);margin-top:var(--space-7);max-width:26ch}
@media(max-width:860px){.hacks-ledger li{grid-template-columns:44px 1fr;row-gap:6px}.verdict{grid-column:2;justify-self:start;text-align:left}}

/* ── Mechanism list + annotated diagram (FT-06) ──────────────────────────
   Marker and row are a matched pair. Hover or focus either, both lift. */
.mech-list{list-style:none;margin:0;padding:0}
.mech-list li{display:grid;grid-template-columns:40px 1fr;gap:0 16px;padding:20px 8px;align-items:start;border-radius:var(--r-chip);transition:background-color var(--dur-ui) ease,opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.mech-list li+li{border-top:1px solid var(--line-dark)}
.mech-mark{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--sunshine);color:var(--sunshine);font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:17px;font-variant-numeric:tabular-nums;line-height:1;transition:background-color var(--dur-ui) ease,color var(--dur-ui) ease}
.mech-label{font-weight:var(--fw-body-bold);font-size:var(--fs-body-sm);color:#fff;margin:0 0 4px}
.mech-body{font-size:var(--fs-body-sm);color:var(--cream-text);margin:0;max-width:44ch}
.mech-list li.is-linked,.mech-list li:hover,.mech-list li:focus-within{background:rgba(246,240,223,.06)}
.mech-list li.is-linked .mech-mark,.mech-list li:hover .mech-mark{background:var(--sunshine);color:var(--forest)}
.mech-figure{position:relative}
.mech-overlay{position:absolute;inset:0;pointer-events:none}
.imgslot.is-missing+.mech-overlay,.mech-figure:has(.is-missing) .mech-overlay{display:none}
.mech-pin{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:2px solid var(--sunshine);background:rgba(20,40,25,.72);color:var(--sunshine);font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:17px;display:grid;place-items:center;pointer-events:auto;cursor:default;transition:background-color var(--dur-ui) ease,color var(--dur-ui) ease}
.mech-pin.is-linked{background:var(--sunshine);color:var(--forest)}
.mech-leader{fill:none;stroke:var(--sunshine);stroke-width:1;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset .9s var(--ease-out) .25s}
.is-in .mech-leader{stroke-dashoffset:0}
@media(max-width:860px){.mech-leaders{display:none}}

/* ── Guarantee panel + seal (HD-06) ──────────────────────────────────────
   White is earned here. The seal half-overlaps the border so the panel reads sealed. */
.guarantee-panel{position:relative;max-width:780px;margin-inline:auto;background:var(--surface-trust);border:2px solid var(--forest);border-radius:var(--r-trust);padding:74px var(--space-8) var(--space-8);text-align:center}
.seal{position:absolute;top:-48px;left:50%;transform:translateX(-50%);width:96px;height:96px}
.manifesto{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-manifesto);line-height:1.24;letter-spacing:var(--ls-h2);color:var(--forest);max-width:20ch;margin-inline:auto}
.manifesto span{opacity:0;transition:opacity .34s ease}
.is-in .manifesto span{opacity:1}
.manifesto .hl{background:var(--sunshine);border-radius:6px;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.manifesto span:nth-child(1){transition-delay:.05s}.manifesto span:nth-child(2){transition-delay:.15s}.manifesto span:nth-child(3){transition-delay:.25s}.manifesto span:nth-child(4){transition-delay:.35s}.manifesto span:nth-child(5){transition-delay:.45s}.manifesto span:nth-child(6){transition-delay:.55s}.manifesto span:nth-child(7){transition-delay:.65s}.manifesto span:nth-child(8){transition-delay:.75s}
.no-js .manifesto span{opacity:1}

/* ── Step / ghost numeral (SB-02) ────────────────────────────────────────*/
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7)}
.step{position:relative;border-top:var(--rule-step);padding-top:var(--space-4);overflow:hidden}
.ghost{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:var(--fs-ghost);line-height:var(--lh-tight);color:var(--ghost-ink);user-select:none;margin-left:-.06em;display:block}
.step h3{margin:-8px 0 8px}
.step p{font-size:var(--fs-body-sm);max-width:32ch}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:var(--space-6)}}

/* ── Sticky bar ──────────────────────────────────────────────────────────*/
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);padding-bottom:calc(12px + env(safe-area-inset-bottom));background:var(--forest);border-top:1px solid var(--line-dark);box-shadow:var(--shadow-bar);transform:translateY(110%);transition:transform var(--dur-drawer) var(--ease-out)}
.sticky-bar.is-visible{transform:translateY(0)}
.sticky-price{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:24px;color:#fff}
.sticky-price small{display:block;font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-caption);color:var(--cream-text)}
@media(max-width:860px){.sticky-bar{display:flex}}

/* ── Cart drawer ─────────────────────────────────────────────────────────*/
.cart-overlay{position:fixed;inset:0;z-index:50;background:var(--surface-scrim);opacity:0;visibility:hidden;transition:opacity var(--dur-drawer) var(--ease-out),visibility 0s linear var(--dur-drawer)}
.cart-overlay.is-open{opacity:1;visibility:visible;transition-delay:0s}
.cart-panel{position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(430px,100%);display:flex;flex-direction:column;background:var(--cream);transform:translateX(100%);transition:transform var(--dur-drawer) var(--ease-out)}
.cart-panel.is-open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px var(--space-5);border-bottom:1px solid var(--line)}
.cart-head h2{font-size:24px;max-width:none}
.cart-close{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;color:var(--forest);transition:background-color var(--dur-ui) ease}
.cart-close:hover{background:var(--cream-dark)}
.cart-body{flex:1;overflow-y:auto;padding:var(--space-5)}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}
.cart-line__name{display:block;font-weight:var(--fw-body-bold);font-size:var(--fs-body-sm)}
.cart-line__meta{display:block;font-size:var(--fs-caption);color:var(--ink);opacity:.8}
.cart-line__price,.cart-total strong{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:21px;color:var(--forest);font-variant-numeric:tabular-nums}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;padding:var(--space-5) 0;font-size:var(--fs-body-sm)}
.cart-foot{padding:var(--space-5);border-top:1px solid var(--line);background:var(--cream-dark)}

/* ── Order bump ──────────────────────────────────────────────────────────
   The second earned white. Whole box is the hit target. */
.bump-box{display:grid;grid-template-columns:28px 72px 1fr;gap:14px;align-items:center;margin-top:var(--space-5);padding:16px;background:var(--white-earned);border:2px solid var(--forest);border-radius:var(--r-panel);cursor:pointer;transition:border-color var(--dur-ui) ease,background-color var(--dur-ui) ease}
.bump-box:hover{border-color:var(--sunshine-dark)}
.bump-box input[type=checkbox]{width:22px;height:22px;accent-color:var(--forest);cursor:pointer}
.bump-box.is-checked{border-color:var(--sunshine-dark);background:#fffaea}
.bump-box .imgslot{width:72px;aspect-ratio:1/1;border-radius:12px}
.bump-title{display:block;font-weight:var(--fw-body-bold);font-size:var(--fs-body-sm);margin:0}
.bump-sub{display:block;font-size:var(--fs-caption);margin:2px 0 0;opacity:.85}

/* ── Header / wordmark ───────────────────────────────────────────────────*/
.site-header{border-bottom:1px solid var(--line);background:var(--cream)}
.site-header .wrap{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-block:22px}
.wordmark{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:26px;letter-spacing:-.005em;color:var(--forest);margin:0;line-height:1}
.wordmark i{font-style:normal;color:var(--sunshine-dark)}
.tagline{font-size:var(--fs-eyebrow);font-weight:var(--fw-body-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink);opacity:.75}
.ground-forest .wordmark,.site-footer .wordmark{color:#fff}
.site-footer .wordmark i{color:var(--sunshine)}

/* ── Footer ──────────────────────────────────────────────────────────────*/
.site-footer{background:var(--forest);color:var(--cream-text);padding-block:var(--space-8)}
.site-footer .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.site-footer .wordmark{margin-right:auto}
.footer-links{display:flex;flex-wrap:wrap;gap:16px 28px;list-style:none;margin:0;padding:0}
.footer-links a{font-size:var(--fs-caption);text-underline-offset:3px}
.footer-rule{border:0;border-top:1px solid var(--line-dark);margin:0 0 var(--space-5)}
.footer-fine{font-size:var(--fs-caption);color:var(--cream-text);opacity:.8;margin-top:var(--space-5)}

/* Section-level composition. One page, one decision - no nav, no anchors. */

/* 2 · Hero (HR-06) - photo panel bleeds off the right edge of the wrap. */
.hero{padding-block:var(--space-9) var(--space-10);overflow:hidden}
.hero .split-hero{gap:var(--space-9)}
.hero h1{max-width:14ch}
.hero h1 em{font-style:normal;color:var(--forest);background:var(--sunshine);border-radius:8px;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-sub{font-size:var(--fs-hero-sub);margin-top:var(--space-5);max-width:46ch}
.hero-media{position:relative;margin-right:calc(50% - 50vw);max-width:none}
.hero-media .imgslot{aspect-ratio:4/5;border-radius:var(--r-img) 0 0 var(--r-img)}
.hero-media::before{content:"";position:absolute;inset:18px -0px -18px 18px;border-radius:var(--r-img) 0 0 var(--r-img);background:var(--sunshine)}
.hero-media>*:not(.sticker){position:relative;z-index:1}
.price-card{position:absolute;left:-28px;bottom:26px;z-index:4;background:var(--cream);border:2px solid var(--forest);border-radius:var(--r-panel);padding:14px 22px}
.price-card b{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-size:var(--fs-price);color:var(--forest);display:block;line-height:1}
.price-card s{color:var(--cardinal);text-decoration-thickness:2px;font-size:var(--fs-caption)}
.price-card span{display:block;font-size:var(--fs-caption);margin-top:4px}
.hero-cta{margin-top:var(--space-6)}
.hero .fud-checks{margin-top:var(--space-5)}
.proof-lines{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);display:grid;gap:8px;list-style:none;padding-left:0}
.proof-lines li{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-caption)}
.proof-lines li::before{content:"";flex:none;width:9px;height:9px;margin-top:2px;background:var(--sunshine);border-radius:50%}
@media(max-width:860px){
.hero{padding-block:var(--space-6) var(--space-8)}
.hero .split-hero{display:flex;flex-direction:column}
.hero-media{order:-1;margin-inline:calc(var(--gutter)*-1);width:100vw}
.hero-media .imgslot{aspect-ratio:4/3;border-radius:0}
.hero-media::before{display:none}
.price-card{position:static;margin-top:var(--space-5)}
.hero .btn{width:100%}
}

/* 3 · The war so far (LS-02) - left aligned, never centered. */
.hacks{max-width:840px}

/* 4 · Mechanism (FT-06) - forest ground, media left, annotated. */
.mechanism h2,.mechanism h3{color:#fff}
.mechanism .split-media{grid-template-columns:6fr 5fr}
.mechanism .mech-figure .imgslot{aspect-ratio:4/5;background:#fff}
@media(max-width:860px){.mechanism .mech-figure{order:-1}}

/* 5 · Spec strip (CN-04) - heading sits against the table's left edge. */
.specs .split-copy{grid-template-columns:4fr 7fr;align-items:start}

/* 6 · Built for the birds (FT-01) - media doubled, staggered, photos right. */
.birds .split-copy{grid-template-columns:5fr 7fr}
.birds-pair{display:grid;grid-template-columns:3fr 2fr;gap:var(--space-5);align-items:end}
.birds-pair .imgslot{aspect-ratio:4/5}
.birds-pair>*:last-child{transform:translateY(36px)}
@media(max-width:860px){.birds-pair{grid-template-columns:1fr 1fr;gap:14px}.birds-pair>*:last-child{transform:none}}

/* 7 · Setup - the quietest section on the page. No CTA, on purpose. */
.setup .split-tight{gap:44px}
.setup .imgslot{aspect-ratio:3/2}
.setup ol{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:14px}
.setup li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:var(--fs-body-sm)}
.setup li b{font-family:var(--font-display);font-weight:var(--fw-display-heavy);color:var(--forest);font-variant-numeric:tabular-nums;background:var(--sunshine);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px}

/* 9 · How it works (SB-02) */
.howto{background:var(--cream-dark)}

/* 10 · Final CTA (CA-01) - the one symmetric section, and it earns it. */
.final{padding-block:var(--section-y-close)}
.final-panel{background:var(--forest-deep);border-radius:var(--r-close);padding:var(--space-10) var(--space-8);text-align:center;background-image:radial-gradient(circle at center,rgba(244,194,51,.09) 1.5px,transparent 1.5px);background-size:24px 24px}
.final-panel h2{color:#fff;font-size:var(--fs-h2-close);max-width:16ch;margin-inline:auto}
.final-panel .eyebrow{justify-content:center;color:var(--sunshine)}
.final-panel p{color:var(--cream-text);margin:var(--space-4) auto 0;max-width:44ch}
.final-panel .btn{margin-top:var(--space-6)}
.final-panel .fud-checks{justify-content:center;margin-top:var(--space-6)}
.final-panel .fud-row{color:var(--cream-text)}
@media(max-width:640px){.final-panel .btn{width:100%}}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · FEEDER FORT — page work the design system does not cover.
   Everything here is built from system tokens only. No new colours, no new
   families, no new radii. If a value below is not a var(), it is a one-off
   that should be justified in a comment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header logo ─────────────────────────────────────────────────────────
   The system shipped a typographic .wordmark because no logo existed. One
   exists now, so the wordmark is retired and the real mark takes its place
   (the system's own README prescribes exactly this swap). The crest carries
   its own "FEEDER FORT" lettering, so no text sits beside it. */
.site-logo { display: block; width: 268px; max-width: 62vw; height: auto; }
.site-header .wrap { padding-block: 18px; }
@media (max-width: 860px) { .site-logo { width: 210px; } }

/* ── Hero price anchor ───────────────────────────────────────────────────
   Sits under the price card and closes the Amazon tab before it opens.
   Deliberately quiet: a fact, not a badge. Never a strikethrough — cardinal
   has exactly two jobs in this system and this is not one of them. */
.anchor-line { font-size: var(--fs-caption); margin-top: var(--space-3); opacity: .85; }
.price-card .anchor-line { margin-top: 6px; }

/* ── The jump (FT-01 + inline LS-07 disqualifier) ────────────────────────
   The page's second set piece. The disqualifier must read confident, not
   apologetic — it is the page turning customers away on purpose, and that
   posture is the whole persuasive mechanism. No warning colour, no icon. */
.jump-close {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 26px; line-height: 1.25; color: var(--forest);
  margin-top: var(--space-6); max-width: 26ch;
}
.disqualify { margin-top: var(--space-9); border-top: 1px solid var(--rule); padding-top: var(--space-7); }
.disqualify > h3 {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--forest);
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-5); max-width: none;
}
.disqualify > h3::before { content: ""; width: 26px; height: 4px; border-radius: 2px; background: var(--sunshine); flex: none; }
.disqualify dt {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 30px; line-height: 1.15; color: var(--forest); max-width: 20ch;
}
.disqualify dd { font-size: var(--fs-body-sm); max-width: 48ch; margin: var(--space-2) 0 0; }
@media (min-width: 861px) {
  /* LS-07's size contrast is the whole idea: big term left, small note right. */
  .disqualify dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); align-items: baseline; }
  .disqualify dt { grid-column: 1; }
  .disqualify dd { grid-column: 2; margin-top: 0; }
  .disqualify dd:not(:first-of-type),
  .disqualify dd + dt { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
}
@media (max-width: 860px) {
  .disqualify dt { font-size: 25px; }
  .disqualify dd + dt { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
}
/* The second door. The only non-buying link on the page, and it must not
   look like a CTA — its power is that it is visibly not a sales move. */
.disqualify-out { margin-top: var(--space-7); font-size: var(--fs-body-sm); max-width: 62ch; }

/* ── The three feeders (PT-04 Unified Comparison Table) ──────────────────
   Column-major markup on purpose: it is what lets mobile stack into cards
   with OURS SECOND, which the archetype requires. Row heights are locked or
   the columns desynchronise and the line-by-line read is lost.
   NO ✓/✗ glyphs, ever — the rows are honest prose, not binary wins, and
   check-marking our column would turn an honest comparison into the other
   kind. */
.compare {
  display: grid; grid-template-columns: minmax(120px, .8fr) 1fr 1.15fr 1fr;
  margin-top: var(--space-7);
  border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden;
  background: var(--surface-page);
}
.cmp-col + .cmp-col { border-left: 1px solid var(--rule); }
.cmp-head {
  min-height: 76px; display: flex; align-items: center; padding: var(--space-4) var(--space-5);
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 20px; line-height: 1.2;
  color: var(--forest); border-bottom: 1px solid var(--rule);
}
.cmp-cell {
  min-height: 84px; display: flex; align-items: center; padding: var(--space-3) var(--space-5);
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--rule);
}
.cmp-col > :last-child { border-bottom: none; }
.cmp-labels .cmp-cell { font-weight: var(--fw-body-bold); color: var(--forest); background: var(--surface-alt); }
.cmp-col.is-ours { background: var(--white-earned); box-shadow: inset 0 4px 0 var(--sunshine); }
.cmp-label { display: none; }
.compare-close { margin-top: var(--space-6); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 24px; line-height: 1.3; color: var(--forest); max-width: 40ch; }

/* ── Straight answers (FQ-04 Static Q&A Grid) ────────────────────────────
   Static, never an accordion: hover/tap-gated objection handling is
   objection handling nobody reads, and the system bans hover-only info. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-8); margin-top: var(--space-7); }
.faq-grid h3 { font-size: 21px; margin-bottom: var(--space-2); max-width: 28ch; }
.faq-grid p { font-size: var(--fs-body-sm); max-width: 52ch; }

/* ── Birds pair caption ──────────────────────────────────────────────────*/
.birds-pair .imgcap { grid-column: 1 / -1; margin-top: 44px; }

/* ── Footer identity ─────────────────────────────────────────────────────
   A visible business identity is what separates a real store from the
   day-zero profile that draws an ad review. */
.foot-identity { font-size: var(--fs-caption); opacity: .8; }

/* ═══ Purchase flow: /bundle.html and /checkout.html ══════════════════════
   Two pages the design system predates. They are the only surface between a
   click and money, so they use the same tokens, type scale and component
   vocabulary as the landing page. No second design system. */

.flow-page .site-header .wrap { justify-content: space-between; align-items: center; }
.flow-step {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--forest); opacity: .8;
}
.flow-main { max-width: 680px; margin-inline: auto; padding: var(--space-7) var(--gutter) var(--space-10); }
.flow-main--wide { max-width: 1080px; }
.flow-main h1 { margin-bottom: var(--space-3); }
.flow-lede { font-size: var(--fs-hero-sub); margin-bottom: var(--space-7); }
.back { display: inline-flex; align-items: center; min-height: var(--tap-min-bar); margin-bottom: var(--space-4); font-weight: var(--fw-body-bold); }

/* Tier cards. The whole card is the label, so the card is the tap target —
   this audience is 45+ on a phone and the selected state must be readable
   at arm's length. Sunshine marks the selection; forest still carries the
   click on the button below. */
.tier-set { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.tier {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--space-4);
  align-items: start; padding: var(--space-5);
  background: var(--surface-page); border: 2px solid var(--rule);
  border-radius: var(--r-panel); cursor: pointer;
  transition: border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.tier:hover { border-color: var(--sunshine-dark); }
.tier.is-selected { border-color: var(--sunshine-dark); background: var(--white-earned); }
.tier input { width: 22px; height: 22px; margin-top: 4px; accent-color: var(--forest); cursor: pointer; }
.tier-name { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 23px; color: var(--forest); }
.tier-desc { display: block; font-size: var(--fs-body-sm); margin-top: 5px; max-width: 46ch; }
.tier-tag {
  display: inline-block; margin-left: var(--space-2); padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--sunshine); color: var(--forest);
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-body-bold);
  letter-spacing: .02em; vertical-align: middle; text-transform: uppercase;
}
.tier-price { font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: 26px; color: var(--forest); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* .bump-decline removed 2026-08-09. The bump is unchecked by default, so the
   "No thanks, just the station" button was a no-op in every state a buyer
   actually reaches it in — one more decision on a page whose whole job is to
   make one decision easy. The bump-box label already toggles both ways. */
.order-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: 28px;
  color: var(--forest); border-top: 1px solid var(--rule);
  padding-top: var(--space-5); margin-top: var(--space-5);
}
.order-note { font-size: var(--fs-body-sm); margin: var(--space-2) 0 var(--space-6); }
.flow-trust { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-body-sm); }
.flow-trust li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.flow-trust li::before {
  content: ""; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sunshine); flex: none;
  /* the system's drawn check, as a mask so no icon library is needed */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat, linear-gradient(#000,#000);
  mask-composite: exclude;
}
.flow-fineprint { font-size: var(--fs-caption); margin-top: var(--space-5); opacity: .85; }

/* Checkout: form left, sticky summary right; summary moves ABOVE the form
   under 860px because the total is what they confirm before typing. */
.checkout-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-9); align-items: start; margin-top: var(--space-6); }
.ck-h { font-size: 21px; margin: var(--space-7) 0 var(--space-3); max-width: none; }
.ck-h:first-child { margin-top: 0; }
#ckEmail {
  width: 100%; min-height: 56px; font-family: var(--font-body); font-size: var(--fs-body-sm);
  color: var(--ink); background: var(--white-earned);
  border: 2px solid var(--forest); border-radius: 10px; padding: 12px 14px;
}
.ck-note { font-size: var(--fs-caption); margin-top: var(--space-2); opacity: .85; }
.ck-secure { font-size: var(--fs-caption); margin-top: var(--space-3); text-align: center; opacity: .85; }
.ck-error {
  font-size: var(--fs-body-sm); font-weight: var(--fw-body-bold); color: var(--cardinal);
  background: #fdf1ef; border: 2px solid var(--cardinal); border-radius: var(--r-panel);
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
}
#payBtn { margin-top: var(--space-6); }
.checkout-summary {
  position: sticky; top: var(--space-5);
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--r-panel); padding: var(--space-6) var(--space-5);
}
.sum-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-body-sm); padding: var(--space-2) 0; }
.sum-total {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: var(--fw-display-heavy); font-size: 24px;
  color: var(--forest); border-top: 1px solid var(--rule); margin-top: var(--space-2); padding-top: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.checkout-summary .flow-trust { font-size: var(--fs-caption); margin-top: var(--space-5); }
.checkout-summary .ck-note a { display: inline-flex; align-items: center; min-height: var(--tap-min-bar); font-weight: var(--fw-body-bold); }
.thanks-cta { margin: var(--space-5) 0 var(--space-3); }

@media (max-width: 860px) {
  /* PT-04 on mobile: stacked cards, never a 4-column table, never a
     horizontal scroll. Ours lands SECOND so it reads last against the cheap
     one and before the name brand. */
  .compare { grid-template-columns: 1fr; border: 0; border-radius: 0; background: none; }
  .cmp-labels { display: none; }
  .cmp-col { border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; margin-bottom: var(--space-4); background: var(--surface-page); }
  .cmp-col + .cmp-col { border-left: 1px solid var(--rule); }
  .cmp-col:nth-of-type(2) { order: 1; }
  .cmp-col.is-ours { order: 2; }
  .cmp-col:nth-of-type(4) { order: 3; }
  .cmp-head { min-height: 0; background: var(--surface-alt); }
  .cmp-col.is-ours .cmp-head { background: var(--white-earned); }
  .cmp-cell { min-height: 0; display: block; padding: var(--space-3) var(--space-5); }
  .cmp-label {
    display: block; font-size: var(--fs-caption); font-weight: var(--fw-body-bold);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--forest); opacity: .75; margin-bottom: 2px;
  }
  .faq-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .flow-step { display: none; }
  .checkout-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .checkout-summary { position: static; order: -1; }
  .tier { grid-template-columns: 26px 1fr; }
  .tier-price { grid-column: 2; margin-top: var(--space-2); }
  .birds-pair .imgcap { margin-top: var(--space-3); }
}

/* ── Design-system bug fixes ─────────────────────────────────────────────
   Two defects in blocks 1-5, corrected here rather than by editing the
   system files (so a re-inline doesn't silently drop the fix). Both should
   go back to the design system.

   1. The system's own mobile override `.price-card{position:static}`
      (specificity 0,1,0) is out-ranked by its own
      `.hero-media>*:not(.sticker){position:relative}` (0,2,0), so on mobile
      the price card keeps the desktop `left:-28px` and hangs 28px off the
      left edge of the screen. Measured at 764px: card left = -28.
   2. Same cascade problem leaves the mobile hero photo inset instead of
      full-bleed. */
@media (max-width: 860px) {
  .hero-media > .price-card:not(.sticker) {
    position: static;
    left: auto; bottom: auto;
    margin: var(--space-5) var(--gutter) 0;
  }
  .hero-media > .imgslot:not(.sticker) { margin-inline: 0; }
}

/* 3. The system's hero highlight collides with its own display leading.
      `.hero h1 em` paints the full inline content area — measured 93px tall
      on Oswald at 62px — while --lh-display (1.12) is only 70px, so on any
      headline that wraps mid-highlight the sunshine blocks overlap the line
      above by ~23px. Ours wraps twice.
      Fix: paint a controlled-height band instead of the whole content area,
      using the same solid-colour background-image technique the system
      already uses for the ledger strikethrough, and give the hero H1 a
      little more leading. The band is square-ended rather than 8px-rounded
      — a marker-pen highlight, which suits "playful, earthy" and is the
      only way to control the painted height. */
.hero h1 { line-height: 1.26; }
.hero h1 em {
  background: linear-gradient(var(--sunshine), var(--sunshine)) no-repeat;
  background-size: 100% 1.12em;
  background-position: 0 58%;
  border-radius: 0;
  padding: 0 .08em;
}

/* 4. The system's own accessibility floor says "tap targets never drop below
      44x44", but .footer-links a inherits only its 15px line box (measured
      21px). Standalone nav links get the floor. Inline links inside a
      sentence are exempt by definition and are left alone. */
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap-min-bar); }

/* ═══════════════════════════════════════════════════════════════════════════
   LEGIBILITY FLOOR — buyers are 45+. Clarity beats aesthetic, every time.
   Added 2026-08-09. Everything below is measured, not guessed: contrast is
   WCAG 2.1 relative luminance against the actual painted surface.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 5. `.ground-forest a` (0,0,1,1) out-ranks `.btn--sun` (0,0,1,0), so the
      yellow CTA inside the forest mechanism section paints --cream-text on
      --sunshine. Measured 1.46:1 — light on light, effectively unreadable,
      on a primary CTA. The other two yellow CTAs sit outside .ground-forest
      and were always correct at 7.94:1, which is why this hid in plain sight.
      Restate both button colours at matching specificity. */
.ground-forest a.btn, .ground-close a.btn, footer a.btn { color: var(--action-text); }
.ground-forest a.btn--sun, .ground-close a.btn--sun, footer a.btn--sun { color: var(--forest); }

/* 6. Caption and eyebrow were 15px and 14px. At arm's length on a 45+ retina
      that is the first thing to go, and between them they carry the price
      note, the trust line, the guarantee fine print and the checkout note —
      all copy that removes doubt right before a payment. Raised to 17px/15px.
      Body stays 19px and line-height stays 1.6; both were already right. */
:root { --fs-caption: 17px; --fs-eyebrow: 15px; --text-muted: #3f4a44; }

/* 7. Fifteen rules dimmed 15px text with `opacity` between .75 and .9, which
      is contrast reduction disguised as hierarchy — and it compounds with the
      small size from note 6. Opacity goes to 1 and hierarchy is carried by a
      real colour instead: --text-muted measures 8.77:1 on --cream, 8.03:1 on
      --cream-dark and 9.23:1 on --white-earned, versus 15.02:1 for full ink.
      Still visibly secondary, never dim. */
.btn__note, .trust-line, .imgcap, .cart-line__meta, .bump-sub, .tagline,
.anchor-line, .flow-fineprint, .ck-note, .ck-secure {
  opacity: 1;
  color: var(--text-muted);
}
/* Reversed out of forest. --text-muted is tuned for cream grounds and measures
   1.43:1 on --forest, so the two footer lines take the light token instead.
   Same intent, opposite direction: hierarchy by colour, never by opacity. */
.footer-fine, .foot-identity { opacity: 1; color: var(--cream-text); }
/* Placeholder labels are scaffolding, not copy — they keep their recessive
   treatment but stop being sub-4.5:1 while they are on screen. */
.imgslot.is-missing .ph-label { opacity: 1; color: var(--text-muted); }

/* 8. No `figure` reset anywhere in the sheet, so the UA default
      `margin: 1em 40px` applies to all eight figures. The hero was patched
      individually in note 2 above; nothing else was. Worst case is the order
      bump on /bundle, where 40px shoves the image out of its 72px grid column
      and the copy renders on top of it. On the homepage it silently crushes
      the paired bird photos to 88px and 137px wide. */
figure { margin: 0; }

/* 9. `[hidden]` is a UA rule, so ANY author `display` beats it. `.sum-row`
      sets `display:flex`, which means #sumBumpRow renders its "Solar
      bird-bath fountain $19" line even when the customer never added it —
      a phantom charge above a total that does not include it, at the exact
      moment they are deciding whether to trust us with a card. */
[hidden] { display: none !important; }

/* 10. The reduced-motion safety net `.manifesto span{opacity:1}` is declared
       inside the media query at line ~154, but the base `opacity:0` is
       declared at ~283 — same specificity, later in source, so the safety net
       never applies and reduced-motion users depend on JS to see the
       manifesto at all. Restated here, after both. */
@media (prefers-reduced-motion: reduce) {
  .manifesto span { opacity: 1; }
}

/* Second-station saving row on /checkout. The scratch-off popup this shipped
   alongside was reverted 2026-08-09 (it priced the second unit at landed cost);
   this row survives because it makes the standing $30 saving visible. */
.sum-row--save { color: var(--forest); font-weight: var(--fw-body-bold); }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET + DESKTOP HERO GEOMETRY. Added 2026-08-09, measured at 768/834/1024/
   1280/1440. Both of these are the same cascade trap as note 1, which was
   diagnosed and fixed for mobile only — the desktop half was never caught.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 11. `.price-card` asks for position:absolute (0,1,0) and is overruled by
       `.hero-media>*:not(.sticker){position:relative}` (0,2,0). So the card
       has never floated on the photo the way HR-06 intends: it is a relative
       block that stretches to the full media width — measured 865px at 1280,
       715px at 1024 — carries the media's negative right margin, and loses its
       right third to `.hero{overflow:hidden}`. 283px of the $99 card is cut
       off at 1280, 257px at 1024. The price is the most important number on
       the page and part of it is off-screen at every desktop and tablet-
       landscape width. Scoped to min-width 861 so the mobile fix in note 1
       (position:static, in-flow under the photo) is left exactly as it is. */
@media (min-width: 861px) {
  .hero-media > .price-card:not(.sticker) {
    position: absolute;
    width: max-content;
    max-width: min(300px, 62%);
  }
}

/* 12. The bleed is `margin-right:calc(50% - 50vw)`, which assumes the 50% is
       half the wrap. It is not — percentage margins resolve against the
       containing block, and here that is the 45fr grid column. So the pull is
       computed from the wrong base and over-shoots at every width: measured
       -308px at 1024 and -311px at 1280, against a real wrap-edge-to-viewport
       -edge distance of 24px and 104px. The surplus is invisible only because
       .hero has overflow:hidden, so roughly a third of the hero photo is
       cropped away before anyone sees it — including the caption, which cuts
       mid-word on tablet.
       This lands the panel exactly on the viewport edge at any width:
       below the wrap's max-width the gap is just the gutter; above it, half
       the difference between the viewport and the wrap's content box. */
@media (min-width: 861px) {
  .hero-media {
    margin-right: calc(-1 * max(var(--gutter), 50vw - (var(--wrap) / 2 - var(--gutter))));
  }
}

/* 13. TABLET PORTRAIT (561-860). The single 860px breakpoint hands an iPad the
       phone layout, and the phone layout's two vertical costs scale with width
       while the viewport height does not. Measured at 768x1024: the 4:3 hero
       photo renders 576px tall and the price card adds another 154px in flow,
       so the H1 starts at y=990 of a 1024 viewport and the CTA sits 267px below
       the fold. An iPad visitor's first screen is a logo, a photo and a price —
       the sentence that explains what this is never appears.
       Fix borrows the desktop treatment: a wider photo band, and the price card
       floated back onto it instead of pushing everything down. Phones are
       untouched (they clear the fold already at 375: H1 lands around y=600). */
@media (min-width: 561px) and (max-width: 860px) {
  .hero-media .imgslot { aspect-ratio: 16 / 9; }
  .hero-media > .price-card:not(.sticker) {
    position: absolute;
    left: var(--gutter);
    bottom: var(--space-5);
    margin: 0;
    width: max-content;
    max-width: min(320px, 70%);
    z-index: 4;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRO PASS — 2026-08-09. Scored against 30-Systems/cro-audit (homepage H1-H15,
   cross-cutting X1-X16). The findings these fix: H13 / X5 (mobile hero buries
   the value prop) and D12/D13 (the buy button is not reachable when it counts).
   Measured before: on a 375x812 phone the hero CTA sat at y=1136, 319px BELOW
   the fold, and the sticky bar did not appear until the entire 1600px hero had
   scrolled past — so a phone visitor scrolled roughly two screens with no buy
   button anywhere on screen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 14. The crest is a 268px desktop asset scaled to 210px on every small screen,
       which spends 114px of an 817px phone fold (14%) on a logo the visitor
       already clicked an ad to reach. Brand recognition is worth less here than
       the sentence underneath it. */
@media (max-width: 860px) {
  .site-logo { width: 168px; }
  .site-header .wrap { padding-block: 14px; }
}
@media (max-width: 560px) {
  .site-logo { width: 140px; }
  .site-header .wrap { padding-block: 12px; }
}

/* 15. Phone hero, same move as note 13 made for tablet: float the price card
       onto the photo instead of letting it push the headline down, and shorten
       the photo band. Together these recover ~210px, which is the difference
       between the CTA being off-screen and being reachable. */
@media (max-width: 560px) {
  .hero-media .imgslot { aspect-ratio: 3 / 2; }
  .hero-media > .price-card:not(.sticker) {
    position: absolute;
    left: var(--gutter);
    bottom: var(--space-4);
    margin: 0;
    width: max-content;
    max-width: min(260px, 74%);
    z-index: 4;
    padding: 12px 18px;
  }
  .hero { padding-block: var(--space-5) var(--space-7); }
}

/* 16. The sticky bar is now on screen from first paint on phones (it used to
       wait for the whole hero to scroll past), so its height is fold real
       estate rather than an overlay you meet later. Measured 118px of an 817px
       viewport — 14% — because "$99 / free shipping" stacked and the button
       wrapped to "Get the / Feeder Fort". Both go on one line. */
@media (max-width: 860px) {
  .sticky-bar { padding-block: 10px; gap: 12px; }
  .sticky-price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  .sticky-price small { display: inline; }
  .sticky-bar .btn--bar { white-space: nowrap; flex: none; }
}
@media (max-width: 400px) {
  /* At 375 the two cannot both be full-length. The price is already three
     characters and the button is the action, so the subtitle is what goes. */
  .sticky-price small { display: none; }
}

/* Social-proof toast. Bottom-LEFT so it never sits under the sticky CTA, and
   raised above the bar's height on small screens so the two never overlap. */
.proof-toast {
  position: fixed; left: var(--gutter); bottom: var(--space-5); z-index: 45;
  display: flex; align-items: center; gap: 10px;
  max-width: min(340px, calc(100vw - var(--gutter) * 2));
  padding: 12px 14px;
  background: var(--white-earned); border: 2px solid var(--forest);
  border-radius: var(--r-panel); box-shadow: 0 10px 30px rgba(20, 30, 24, .18);
}
.proof-toast__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sunshine-dark); }
.proof-toast__text { font-size: var(--fs-caption); line-height: 1.4; color: var(--ink); margin: 0; }
.proof-toast__close {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.proof-toast__close:hover { background: var(--cream-dark); }
@media (max-width: 860px) { .proof-toast { bottom: calc(65px + var(--space-4)); } }

/* About (X8). Single column, capped measure — this is the one block on the
   page people actually read start to finish, so it gets reading typography
   rather than landing-page typography. */
.about h2 { max-width: 18ch; }
.about-body { margin-top: var(--space-5); display: grid; gap: var(--space-4); max-width: var(--measure-body); }
.about-signoff {
  font-family: var(--font-display); font-weight: var(--fw-display-soft);
  font-size: 22px; line-height: 1.3; color: var(--forest);
  border-left: var(--rule-step); padding-left: var(--space-4); margin-top: var(--space-2);
}

/* 17. The mechanism section never collapsed on mobile. The system's own
       breakpoint rule `.split-hero,.split-media,...{grid-template-columns:1fr}`
       is specificity (0,1,0); `.mechanism .split-media{grid-template-columns:
       6fr 5fr}` is (0,2,0) and declared later, so it wins INSIDE the media
       query and the two-column layout survives all the way down.
       Measured at 390px: the copy column was 72.9px wide — about eight
       characters per line — and the section ran 1985px tall to fit it. Third
       instance of this same trap (see notes 1, 11, 12); the pattern is a
       component rule out-ranking the system's responsive rule. */
@media (max-width: 860px) {
  .mechanism .split-media,
  .specs .split-copy,
  .birds .split-copy {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .mechanism .mech-figure .imgslot { aspect-ratio: 4 / 3; }
  .mech-list li { padding: 18px 4px; }
}

/* 18. Phone hero, last 67px. After notes 14/15 the CTA still finished 67px
       below an 844px fold. Two causes, both measured: the hero grid keeps its
       72px desktop gap between the photo and the copy, and "Get the Feeder
       Fort — $99" wraps to two lines at 21px in a 342px button (46px of text
       in an 86px button). Closing the gap and fitting the label on one line
       recovers exactly that, and the label is the thing a buyer reads last
       before tapping, so one line is better anyway. */
@media (max-width: 560px) {
  .hero .split-hero { gap: var(--space-6); }
  .hero .btn--big { font-size: 19px; padding-block: 16px; }
  .hero .eyebrow { margin-bottom: var(--space-2); }
}

/* Featured tier on /bundle. Emphasis only — the radio default is untouched, so
   nobody gets defaulted into the pricier option. */
.tier--featured {
  position: relative;
  border-color: var(--forest);
  border-width: 3px;
  box-shadow: 0 6px 20px rgba(20, 30, 24, .10);
}
.tier-flag {
  position: absolute; top: -13px; left: var(--space-5);
  padding: 3px 12px; border-radius: var(--r-pill);
  background: var(--forest); color: var(--action-text);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap;
}