/* Funnel pages: product extras, order, offer, thanks. Light only: white, navy ink, hairlines. Inherits the site palette via variables. */

/* Funnel pages drop the nav links and keep the logo, so the checkout has one job */
body.funnel .nav .links,body.funnel .nav .cta,body.funnel .nav details{display:none}

.mockchip{display:inline-block;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--pink);color:var(--white);margin-top:12px}

/* Product page extras */
.buybox .price small.keep{display:block;margin:6px 0 0;font-family:var(--body);font-size:14px;color:var(--mute);letter-spacing:0}
.forwho{display:grid;gap:28px}
.forwho ul.who{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.forwho ul.who li{padding:12px 0 12px 30px;border-top:1px solid var(--line);position:relative;line-height:1.4}
.forwho ul.who li:last-child{border-bottom:1px solid var(--line)}
.forwho ul.who li:before{content:"";position:absolute;left:4px;top:19px;width:12px;height:12px;border-radius:50%;background:var(--yellow)}
.faq{list-style:none;padding:0;margin:0}
.faq li{border-top:1px solid var(--line);padding:16px 0}
.faq li:last-child{border-bottom:1px solid var(--line)}
.faq li b{display:block;font-family:var(--head);font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;line-height:1}
.faq li p{margin:0;color:var(--ink)}
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--white);border-top:1px solid var(--line);padding:10px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:14px;transform:translateY(110%);transition:transform .25s}
.stickybuy.show{transform:none}
.stickybuy .sp{font-family:var(--head);font-size:28px;letter-spacing:.03em;line-height:1}
.stickybuy .sp small{display:block;font-family:var(--body);font-size:12px;color:var(--mute);letter-spacing:0;margin-top:2px}
.stickybuy .btn{padding:13px 22px}
@media (min-width:760px){.stickybuy{display:none}.forwho{grid-template-columns:1fr 1fr}}

/* Shared funnel frame */
.fn{padding-top:36px}
.fn-wrap{max-width:1040px}
.fn-narrow{max-width:720px}
.fn-head{margin-bottom:28px}
.fn-head h1{font-size:clamp(44px,7vw,80px);color:var(--navy)}
.fn-head .lede{margin-top:12px}
.fn-h{font-size:22px;letter-spacing:.03em;margin:0 0 14px;color:var(--navy)}
.fn-cols{display:grid;gap:28px}
.fn-block{padding:22px 0;border-top:1px solid var(--line)}
.fn-label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
.fn-label:first-of-type{margin-top:0}
.fn-label small{display:block;font-weight:400;color:var(--mute);font-size:13px;margin-top:2px}
.fn-input{all:unset;box-sizing:border-box;display:block;width:100%;font-family:var(--body);font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink)}
.fn-input::placeholder{color:#A3A3A3}
.fn-input:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.fn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fn-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:18px 0 14px;font-size:16px}
.fn-total strong{font-family:var(--head);font-size:40px;letter-spacing:.03em;line-height:1;color:var(--navy)}
.fn-pay{width:100%}
.fn-trust{font-size:13px;color:var(--mute);margin-top:12px;line-height:1.6}
.fn-trust .flag{margin-left:4px}

/* Order bump */
.bump{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;border:2px dashed var(--yellow-deep);border-radius:var(--r);padding:18px;margin:6px 0 22px;cursor:pointer;background:var(--white)}
.bump input{position:absolute;opacity:0;width:1px;height:1px}
.bump-box{display:block;width:22px;height:22px;border:2px solid var(--navy);border-radius:4px;margin-top:2px;position:relative;background:var(--white)}
.bump input:checked+.bump-box{background:var(--navy)}
.bump input:checked+.bump-box:after{content:"";position:absolute;left:6px;top:2px;width:6px;height:12px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bump input:focus-visible+.bump-box{outline:2px solid var(--pink);outline-offset:2px}
.bump-text{display:grid;gap:4px;line-height:1.4}
.bump-text strong{font-size:17px;color:var(--navy)}
.bump-text em{font-style:normal;font-size:13px;color:var(--mute)}

/* Order summary */
.fn-summary{border:1px solid var(--line);border-radius:var(--r);padding:20px;align-self:start;background:var(--white)}
.fn-summary-wide{margin-bottom:28px}
.fn-sum-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.fn-sum-item:last-of-type{border-bottom:0}
.fn-sum-item strong{display:block;font-size:15px;line-height:1.3}
.fn-sum-item span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.fn-sum-item b{font-family:var(--head);font-size:24px;letter-spacing:.03em;color:var(--navy)}
.fn-thumb{width:64px;aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:var(--light);container-type:inline-size}
.fn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fn-thumb .cover{padding:6px}
.fn-thumb .cover i{display:none}
.fn-thumb .cover b{font-size:7px}
.fn-thumb-bump{display:grid;place-items:center;font-family:var(--head);font-size:26px;color:var(--navy)}
.fn-summary .small{margin-top:14px;line-height:1.6}

/* One-tap offer */
.offer{display:grid;gap:22px;border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--white)}
.offer-cover{aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:var(--light);container-type:inline-size}
.offer-cover img{width:100%;height:100%;object-fit:cover;display:block}
.offer-title{font-size:clamp(30px,4vw,44px);margin:10px 0 8px;color:var(--navy)}
.offer-price{font-family:var(--head);font-size:40px;letter-spacing:.03em;line-height:1;color:var(--navy);margin:16px 0 14px}
.offer-price small{display:block;font-family:var(--body);font-size:13px;color:var(--mute);letter-spacing:0;margin-top:6px}
.offer-no{display:block;text-align:center;margin-top:14px;color:var(--mute);font-size:15px}
@media (min-width:760px){.offer{grid-template-columns:5fr 7fr;align-items:start}}

/* Thanks */
.next{counter-reset:n;list-style:none;padding:0;margin:0 0 28px}
.next li{counter-increment:n;position:relative;padding:16px 0 16px 48px;border-top:1px solid var(--line);line-height:1.5}
.next li:last-child{border-bottom:1px solid var(--line)}
.next li:before{content:counter(n);position:absolute;left:0;top:14px;width:32px;height:32px;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--head);font-size:20px;display:grid;place-items:center;line-height:1}
.fn-after{margin-top:28px;color:var(--mute);font-size:15px}

.fn-cols .fn-summary{order:-1}
@media (min-width:860px){
  .fn-cols .fn-summary{order:0}
  .fn{padding-top:48px}
  .fn-cols{grid-template-columns:7fr 5fr;gap:48px;align-items:start}
  .fn-summary{position:sticky;top:20px}
}

/* the hidden attribute must beat the flex display on summary rows */
.fn-sum-item[hidden]{display:none}

/* round 2: one bullet system (pink dot, as ul.tick) and the one-line checkout footer */
.forwho ul.who li:before{width:8px;height:8px;top:21px;background:var(--pink)}
body.funnel footer{padding:26px 0}
body.funnel footer .bottom.fn-foot{border-top:0;padding-top:0}
/* round 3: the summary chips sit on their own line so the sentence never orphans a word */
.fn-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fn-thumb .cover.typo b{font-size:7px;max-width:none}
.fn-thumb .cover em{display:none}

/* redesign: mounted cards, dashed notice, pink prices, one yellow per screen (the bump) */
.mockchip{background:var(--white);color:var(--pink);border:1px dashed var(--pink)}
.fn-summary,.offer{border:1px solid var(--navy);border-radius:0}
.fn-total strong{color:var(--navy)}
.fn-sum-item b,.offer-price{color:var(--pink)}
.fn-input{border-color:var(--navy);border-radius:3px}
.bump{border-radius:0}
.fn-head h1{font-size:clamp(40px,5vw,64px)}
body.funnel .fn-summary{position:relative}

/* promise: one pull line in body type, not a second headline (critic M8) */
.prodhero p.promise{font-family:var(--body);font-weight:400;font-size:clamp(18px,2vw,21px);line-height:1.35;text-transform:none;letter-spacing:0;color:var(--navy);border-left:2px solid var(--pink);padding-left:14px;margin:0 0 14px;max-width:40ch}

/* checkout test wiring (Stripe test mode) */
#f-card{margin-top:4px}
.fn-err{color:var(--pink);font-weight:700;font-size:14px;min-height:1em;margin:10px 0 0}
.fn-err:empty{display:none}
.fn-testcards{margin-top:10px}
.fn-access{font-weight:700;margin:16px 0 0}
.fn-access:empty{display:none}
button.offer-no{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;text-align:center;margin-top:14px;color:var(--mute);font-size:15px;font-family:inherit}
button.fn-pay{cursor:pointer;border:0;font:inherit}
button.fn-pay:disabled,button.offer-no:disabled{opacity:.55;cursor:default}

/* Books (15 Oct 2026): the cover sits whole in the thumb, the postage line and total in the summary, the address echoed back */
.fn-thumb-book{background:var(--tile,#F3F6FD)}
.fn-thumb-book img{object-fit:contain;padding:3px}
.fn-sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--navy);margin:6px 0 0;padding:12px 0 0;font-weight:700}
.fn-sum-total b{font-family:var(--head);font-size:28px;letter-spacing:.03em;color:var(--navy)}
.fn-uk{margin:-6px 0 14px}
.fn-ship{border-top:1px solid var(--line);padding:14px 0 4px}
.fn-ship[hidden]{display:none}
.fn-ship-h{font-weight:700;font-size:14px;margin:0 0 6px}
.fn-ship address{font-style:normal;line-height:1.6}

/* Thank-you pages (Fish, 20 Oct 2026): James's letter beside a till-slip receipt. White, plain, like the
   confirmation emails. The one flourish is the pink PAID stamp on the slip. */
.ty{padding:40px 0 40px}
.ty-wrap{max-width:1080px}
.ty-grid{display:grid;gap:44px}
.ty-letter{max-width:620px}
.ty-letter h1{font-size:clamp(46px,7.4vw,84px);line-height:.92;color:var(--navy);margin:0 0 26px}
.ty-letter p{font-size:18px;line-height:1.62;margin:0 0 18px;color:var(--ink)}
.ty-letter .ty-lede{font-size:clamp(21px,2.4vw,25px);line-height:1.4;margin-bottom:24px}
.ty-letter .ty-lede strong{font-weight:700}
.ty-letter a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
.ty-sign{margin-top:30px}
.ty-sign p{margin:0}
.ty-sign img{width:220px;height:auto;margin-top:6px}
.ty-letter p.small{font-size:14px;line-height:1.5;color:var(--mute);margin:0}

.ty-side{display:grid;gap:28px;align-content:start}
.ty-slips{display:grid;gap:22px;background:var(--light);padding:28px 22px 40px;border-radius:var(--r)}
.slip{position:relative;background:var(--white);border:1px solid var(--line);border-bottom:0;padding:14px 24px 34px;
  box-shadow:0 1px 2px rgba(21,38,76,.05),0 18px 34px -22px rgba(21,38,76,.35);
  font-variant-numeric:tabular-nums;color:var(--ink);transform:rotate(-.6deg);transform-origin:top center}
/* torn bottom edge: a zigzag cut out of the paper */
.slip:after{content:"";position:absolute;left:-1px;right:-1px;bottom:-10px;height:10px;
  background:linear-gradient(-45deg,transparent 7px,var(--white) 0) 0 0/14px 10px repeat-x,
             linear-gradient(45deg,transparent 7px,var(--white) 0) 0 0/14px 10px repeat-x;
  filter:drop-shadow(0 1px 0 var(--line))}
.slip-head{text-align:center;padding:50px 0 16px;border-bottom:1px dashed #C9CDD8}
.slip-co{font-family:var(--head);font-size:19px;letter-spacing:.06em;color:var(--navy);margin:0}
.slip-meta{font-size:13px;color:var(--mute);margin:4px 0 0}
.slip-lines{list-style:none;margin:0;padding:6px 0 0}
.slip-lines li{padding:12px 0;border-bottom:1px dashed #C9CDD8}
.slip-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.slip-item{font-weight:700;font-size:15px;line-height:1.35;text-wrap:balance}
.slip-amt{font-size:15px;font-weight:700;white-space:nowrap}
.slip-desc,.slip-vat{font-size:13px;line-height:1.45;color:var(--mute);margin:3px 0 0}
.slip-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--navy);margin-top:8px;padding:14px 0 2px}
.slip-total-l{font-family:var(--head);font-size:22px;letter-spacing:.05em;color:var(--navy)}
.slip-total-v{font-family:var(--head);font-size:38px;letter-spacing:.03em;line-height:1;color:var(--navy)}
.slip-note{font-size:13px;color:var(--mute);margin:2px 0 0;text-align:right}
.slip-post{margin-top:16px;padding-top:14px;border-top:1px dashed #C9CDD8}
.slip-post-h{font-family:var(--head);font-size:16px;letter-spacing:.06em;color:var(--navy);margin:0}
.slip-post-a{font-size:14px;line-height:1.5;margin:4px 0 0}
.slip-foot{font-size:12px;color:var(--mute);margin:18px 0 0;text-align:center;line-height:1.5}
.slip-stamp{position:absolute;right:10px;top:10px;font-family:var(--head);font-size:30px;letter-spacing:.12em;line-height:1;
  color:var(--pink);border:4px double var(--pink);border-radius:6px;padding:6px 12px 3px;transform:rotate(-12deg);opacity:.9;
  mix-blend-mode:multiply;pointer-events:none}
.slip-stamp.is-test{color:var(--mute);border-color:var(--mute)}
.ty-status{font-size:16px;font-weight:700;color:var(--navy);margin:0}
.ty-status:empty{display:none}
.ty-status.is-alert{color:var(--pink);font-weight:700}
.ty-next{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ty-next li{font-size:15px;line-height:1.5;padding:14px 0;border-bottom:1px solid var(--line)}
.ty-next li:last-child{border-bottom:0}
.ty-foot{margin-top:40px}
.ty-foot .btn-row{margin-bottom:12px}
@media (min-width:900px){
  .ty{padding-top:64px}
  .ty-grid{grid-template-columns:minmax(0,1fr) 380px;gap:72px;align-items:start}
  .ty-side{position:sticky;top:24px}
}
@media (max-width:420px){.ty-slips{margin:0 -20px;border-radius:0}.slip{padding:12px 18px 32px}.slip-stamp{font-size:24px;right:6px;top:8px;padding:5px 9px 2px}}
@media (prefers-reduced-motion:reduce){.slip{transform:none}}

/* Checkout trust (Fish, 20 Oct 2026): what you get, secure strip with real card and wallet marks, a guarantee seal
   that echoes the thank-you page's PAID stamp, and James beside the form. Mobile order: summary, form, trust. */
.ck .fn-cols{grid-template-areas:"sum" "form" "trust"}
.ck .fn-form{grid-area:form}
.ck .ck-sum{grid-area:sum}
.ck .ck-trust{grid-area:trust}
.ck-bundle{display:none;width:100%;height:auto;margin:0 0 16px;border:1px solid var(--line)}
.ck-what{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* phones: what you get sits under the pay button with the guarantee, so the form stays near the top */
.ck-sum .ck-what{display:none}
.ck-trust .ck-what{margin-top:0}
.ck-what-h{font-family:var(--head);font-size:18px;letter-spacing:.05em;color:var(--navy);margin:0 0 6px}
.ck-what ul{list-style:none;padding:0;margin:0}
.ck-what li{position:relative;padding:5px 0 5px 24px;font-size:14px;line-height:1.45}
.ck-what li:before{content:"";position:absolute;left:3px;top:10px;width:11px;height:6px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}
.ck-secure{margin-top:16px;text-align:center}
.ck-secure-h{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;color:var(--navy);margin:0}
.ck-marks{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;list-style:none;padding:0;margin:10px 0 8px}
.ck-marks img{width:auto;height:26px;opacity:.8}
.ck-secure-note{font-size:13px;color:var(--mute);margin:0}
.ck-trust{display:grid;gap:30px;align-content:start}
.ck-guarantee{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center}
.ck-seal{width:92px;height:92px;border-radius:50%;border:4px double var(--pink);color:var(--pink);display:grid;place-content:center;text-align:center;transform:rotate(-8deg);line-height:1}
.ck-seal b{font-family:var(--head);font-size:40px;font-weight:400;line-height:.9}
.ck-seal span{display:block;font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;max-width:62px;margin:2px auto 0;line-height:1.05}
.ck-guarantee-h{font-family:var(--head);font-size:24px;letter-spacing:.04em;color:var(--navy);margin:0}
.ck-guarantee .small{margin:4px 0 0;line-height:1.5}
.ck-james{margin:0}
.ck-james-photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:57% 30%}
.ck-james figcaption{padding:14px 0 0}
.ck-james p{font-size:17px;line-height:1.5;margin:0;color:var(--ink)}
.ck-james-sig{width:140px;height:auto;margin-top:8px}
@media (min-width:860px){
  .ck .fn-cols{grid-template-areas:"form sum" "form trust";grid-template-rows:auto 1fr}
  .ck .fn-summary{position:static}
  .ck-bundle{display:block}
  .ck-sum .ck-what{display:block}
  .ck-trust .ck-what{display:none}
  .ck-sum:has(.ck-bundle) > .fn-sum-item:first-of-type .fn-thumb{display:none}
  .ck-sum:has(.ck-bundle) > .fn-sum-item:first-of-type{grid-template-columns:1fr auto}
  .ck-james-photo{aspect-ratio:16/9}
}

/* Checkout critic round 1 (20 Oct 2026) */
.ck-guarantee{grid-template-columns:92px 1fr}
.ck-guarantee .small{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.ck-marks{gap:8px}
.ck-marks li{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;padding:3px 8px;height:28px}
.ck-marks img{height:18px;width:auto;opacity:.75;filter:grayscale(1)}
.ck-postage{grid-template-columns:1fr auto}
.ck .bump.ck-bump{grid-template-columns:24px 56px 1fr auto;gap:14px;border:1px solid var(--navy);background:#FFF9DB;border-radius:0}
.ck-bump-thumb{grid-column:2;grid-row:1}
.ck-bump-thumb img{width:56px;height:56px;object-fit:cover;border:1px solid var(--line);background:var(--white)}
.ck-bump .bump-text{grid-column:3;grid-row:1}
.ck-bump-price{grid-column:4;grid-row:1;font-family:var(--head);font-size:26px;letter-spacing:.03em;color:var(--pink);line-height:1}
.ck-bump input,.ck-bump .bump-box{grid-column:1;grid-row:1}
@media (max-width:859px){
  .ck-trust .ck-guarantee{order:-1}
  .ck-sum .fn-sum-item:first-of-type{grid-template-columns:1fr auto}
  .ck-sum .fn-sum-item:first-of-type .fn-thumb{display:none}
  .ck .bump.ck-bump{grid-template-columns:24px 1fr auto}
  .ck-bump-thumb{display:none}
  .ck-bump .bump-text{grid-column:2}
  .ck-bump-price{grid-column:3}
}
@media (min-width:860px){.ck-bundle{max-height:230px;width:auto;margin:0 auto 16px}}
.ck-marks li{height:36px;padding:0 6px}
.ck-marks img{height:32px}
/* marketing opt-out under the name (6 Nov 2026, Fish's wording B) */
.fn-optnote{font-size:14px;color:var(--mute);margin:14px 0 6px}
.fn-opt{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.fn-opt input{width:18px;height:18px;margin:0;accent-color:var(--navy);flex:none}