/* Daily Better You: the site's ONE style file (the settle build, card q-20261106-1959-984c, 7 Nov 2026).
   Every page loads it: home, the System, the shop and its 29 guide pages, the result, Help, About, the delivery page
   and the legal set. The look is locked in brainstorms/2026-11-06-dby-site-settle.md "THE LOOK, LOCKED":
   cream ground; oxblood + golden orange for the bar, the System panel and the buttons on offers; the five stage colours
   only on stage things (bars, quiz parts, the stage card); never the rainbow sweep; no blur on any product.
   Motion: a soft fade-rise on scroll, a lift on hover, press feedback; under 400 ms; never on the products; never
   holds the scroll; off with prefers-reduced-motion. Written by hand; common/build.py writes the pages that use it. */

@font-face{font-family:"Instrument Sans";src:url(assets/fonts/instrument-sans-wght-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* ground and ink */
  --cream:#fff4e6;--cream-2:#fbecd8;--white:#fff;--ink:#2c2030;--ink-soft:#5b4a5a;--ink-mute:#7a6878;
  --hair:rgba(44,32,48,.12);--line:rgba(44,32,48,.22);
  /* the accent family (locked): oxblood + golden orange */
  --ox:#5a1824;--ox-hi:#6a1f2c;--ox-lo:#4c1420;--ox-ink:#3d0e17;
  --gold:#ffd58a;                                 /* the bar's highlight, the live dot */
  --or-a:#e4782a;--or-b:#f7bb69;                  /* round 17: the System's orange = the /shop/system gallery's sweep (sampled from 01-box), top to floor */
  --seal-a:#ffc35e;--seal-b:#ff8a2e;              /* seal B, golden orange */
  --or-soft:#fff0dc;                              /* a pale orange wash for bands */
  /* the five stage colours: fills and words (ink); stage things only. Round 17 (B3, Jay: "too childish… too bright…
     less opacity and slightly darker"): palette A "Dusk", the same five hues at about 40-55% saturation and 56-60%
     lightness (was 100% and 65-77%). Every ink passes AA (5:1 or better) on cream and on its own tint.
     Was: #a789ff #ff85b0 #ff9a6b #ffc66b #ffd24d · inks #5b3aa0 #a02d56 #a03420 #9d5a14 #8f6a1a */
  --s1:#8874be;--s2:#c46e88;--s3:#cc7c5c;--s4:#ce9550;--s5:#ccb25c;
  --s1-ink:#573aa6;--s2-ink:#a53154;--s3-ink:#974626;--s4-ink:#875922;--s5-ink:#76621e;
  /* the five stage tints, muted to match (round 17; was round 9's tints B #ddd6ff #ffcddb #ffd1bd #fad6a1 #f1db9f) */
  --s1-t:#d5cee8;--s2-t:#e9ced6;--s3-t:#e9d5ce;--s4-t:#e9ddce;--s5-t:#e9e3ce;
  /* type */
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  /* shape */
  --r-s:10px;--r-m:16px;--r-l:24px;--r-xl:32px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(44,32,48,.06),0 8px 24px -14px rgba(44,32,48,.22);
  --sh-2:0 1px 2px rgba(44,32,48,.06),0 24px 60px -30px rgba(44,32,48,.35);
  --sh-lift:0 2px 4px rgba(44,32,48,.06),0 30px 60px -28px rgba(44,32,48,.42);
  /* space */
  --g:56px;                                       /* the side gutter (16 px on a phone) */
  --max:1328px;
  --sec:112px;                                    /* a section's top and bottom */
  /* motion: one ease, under 400 ms */
  --ease:cubic-bezier(.22,1,.36,1);--t-fast:160ms;--t:280ms;--t-rise:380ms;
  /* ONE token per board pick (options board round 9, 8 Nov); placeholders until Jay picks */
  --wm-font:var(--sans);--wm-weight:600;--wm-track:-.03em;          /* the wordmark beside the mark */
  /* round 17: the System's ground everywhere = the /shop/system gallery's own sweep (B2's SYS_SWEEP in build.py, the same
     string; site.test.mjs fails if the two ever differ) */
  --sys:#ea8838;--sys-a:#e4782a;--sys-m:#f09a45;--sys-b:#f7bb69;--sys-ink:#8a3f0c;
  --bg-sys:radial-gradient(46% 70% at 50% 40%,rgba(255,226,160,.38),rgba(255,226,160,0) 75%),linear-gradient(180deg,#e4782a 0%,#f09a45 55%,#f7bb69 100%);
  /* round 19: the guide ground behind every guide picture, everywhere, is Mist: a pale blue sweep lit like a studio (Jay picked
     it from the ground lab, 11 Nov; round 18's Ink before it). The baked pictures are the same sweep (render/r17/guides17.py
     --ground mist) with a soft, greyed-blue shadow (--guide-sh); stage colour stays only as a small accent */
  --bg-guide:radial-gradient(120% 90% at 50% 38%,#e9f0f6 0%,#cfdcea 45%,#b5c8da 100%);--guide:#cfdcea;--guide-sh:#4e5d6e;
  /* round 18 (rule 4): ONE bundle geometry, in pixels, everywhere a bundle object stands in a panel or card (the shop,
     home, the result, the product pages): the object's solid body rises --pk over the frame's top edge and stops --gp
     above its bottom edge, so every object is exactly as tall as its frame. The System box set the numbers (12 and 13 px
     at 1440 before round 18); measured by research/settle-build-2026-11-07/measure-r18.mjs */
  --pk:12px;--gp:12px;
  /* round 18: the result's stage card sits on apricot (the oxblood cards pop on it) */
  --bg-card:radial-gradient(70% 60% at 50% 40%,#fdebd2 0%,rgba(253,235,210,0) 75%),linear-gradient(180deg,#f1c79c 0%,#f6d8b6 45%,#fae6cf 100%);
  /* board round 9: All 29 ground B (plum to rose), Your First 21 Days ground A (wine) */
  /* round 16: All 29 = midnight navy (board round 10 pick A) */
  --navy:#16264a;--navy-hi:#2c4a80;--navy-lo:#0c1730;--wine:#4c1428;--wine-hi:#7c2640;--wine-lo:#3a0f1f;
  /* the Companion and tools' ground: lane R3's eucalyptus #7ea9a1 (r16-brief "Decisions"), the same sweep as the tool pages' gallery */
  --tools:#7ea9a1;
  --bg-tools:linear-gradient(180deg,#5f8c86 0%,#6d9a93 34%,#7ea9a1 56%,#90b8af 78%,#9cc2b8 100%);
  --bg-all29:radial-gradient(38% 58% at 50% 54%,rgba(150,185,255,.30),rgba(150,185,255,0) 78%),linear-gradient(90deg,var(--navy),var(--navy-hi));
  --bg-first21:radial-gradient(38% 58% at 50% 54%,rgba(255,150,175,.32),rgba(255,150,175,0) 78%),linear-gradient(90deg,#4c1428,#7c2640);
  /* the result's stage card: board round 9 card B (oxblood), drawn on a canvas by result/page.js */
}
@media (max-width:1180px){:root{--g:40px;--sec:96px}}
@media (max-width:1023px){:root{--g:16px;--sec:64px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--g));margin:0 auto;padding:0 var(--g)}
.em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:.9}
.nw{white-space:nowrap}

/* type scale */
.kick{font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.h1{font:600 72px/.98 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.h2{font:600 48px/1.04 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.h3{font:600 28px/1.12 var(--sans);letter-spacing:-.025em}
.lead{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:36em}
.micro{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.body p+p{margin-top:14px}
@media (max-width:1180px){.h1{font-size:60px}.h2{font-size:40px}}
@media (max-width:1023px){.h1{font-size:44px;line-height:1}.h2{font-size:32px}.h3{font-size:23px}.lead{font-size:17px}}

/* ---------- buttons (press feedback, hover lift) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:56px;padding:0 30px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:600 17px/1.1 var(--sans);letter-spacing:-.005em;text-decoration:none;text-align:center;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.btn:hover{box-shadow:0 12px 26px -12px rgba(44,32,48,.55);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:80ms}
.btn.ox{background:linear-gradient(180deg,var(--ox-hi),var(--ox) 60%,var(--ox-lo));box-shadow:inset 0 1px 0 rgba(255,214,150,.22)}
.btn.ox:hover{box-shadow:inset 0 1px 0 rgba(255,214,150,.22),0 14px 28px -12px rgba(90,24,36,.6)}
/* round 17 (rule 5): a bundle's every button takes the bundle's GROUND: the System its gallery orange (dark oxblood text,
   5.4:1 or better, AA), All 29 its midnight navy (white, 8.8:1), Your First 21 Days its wine (white, 9.5:1). Keyed on the
   button's own data-buy too, so every lane's buy button for that bundle (panels, choices, phone bars) follows */
.btn.org,a.btn[data-buy="system"],a.btn[data-cta="system"]{background:linear-gradient(180deg,var(--sys-m),var(--sys) 55%,var(--sys-a));color:var(--ox-ink);box-shadow:inset 0 1px 0 rgba(255,236,200,.55),inset 0 -1px 0 rgba(120,50,10,.18)}
.btn.org:hover,a.btn[data-buy="system"]:hover,a.btn[data-cta="system"]:hover{box-shadow:inset 0 1px 0 rgba(255,236,200,.55),0 14px 28px -12px rgba(160,70,10,.55)}
.btn.navy,a.btn[data-buy="guides"]{background:linear-gradient(180deg,var(--navy-hi),var(--navy) 62%,var(--navy-lo));color:#fff;box-shadow:inset 0 1px 0 rgba(170,200,255,.25)}
.btn.navy:hover,a.btn[data-buy="guides"]:hover{box-shadow:inset 0 1px 0 rgba(170,200,255,.25),0 14px 28px -12px rgba(22,38,74,.6)}
.btn.wine,a.btn[data-buy="tripwire"]{background:linear-gradient(180deg,var(--wine-hi),#5e1a31 60%,var(--wine));color:#fff;box-shadow:inset 0 1px 0 rgba(255,190,200,.22)}
.btn.wine:hover,a.btn[data-buy="tripwire"]:hover{box-shadow:inset 0 1px 0 rgba(255,190,200,.22),0 14px 28px -12px rgba(76,20,40,.6)}
/* "See everything inside" and "Learn more" in the bundle's own colour, a dark tone of its ground (AA on white) */
.sys .more .ghost,.gc-more{color:var(--sys-ink);text-decoration-color:var(--sys)}
.sys.k-all29 .more .ghost{color:var(--navy);text-decoration-color:var(--navy-hi)}
.sys.k-first21 .more .ghost{color:var(--wine-hi);text-decoration-color:var(--wine-hi)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.line:hover{background:#fff}
.btn.wide{width:100%}
.btn svg{flex:none;margin-right:10px}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.ghost{display:inline-block;font:600 17px/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-underline-offset var(--t-fast) var(--ease)}
.ghost:hover{text-underline-offset:8px}
.ghost:active{opacity:.7}
@media (max-width:1023px){.btn{min-height:54px;padding:0 22px;font-size:16.5px;white-space:normal}}

/* ---------- the countdown bar (round 8 D: the live dot) ---------- */
.bar{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;min-height:52px;padding:9px var(--g);color:#fff;font:500 15.5px/1.3 var(--sans);letter-spacing:-.005em;text-align:center;
  background:linear-gradient(180deg,var(--ox-hi) 0%,var(--ox) 55%,var(--ox-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,214,150,.22),inset 0 -1px 0 rgba(0,0,0,.25)}
.bar b{font-weight:600}
.bar,.bar:hover{text-decoration:none}   /* the whole bar is one link (round 16) */
.bar a{color:inherit;text-decoration:none}
.bar .live{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bar .live i{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);animation:livedot 2.4s ease-out infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(255,213,138,.55)}70%{box-shadow:0 0 0 9px rgba(255,213,138,0)}100%{box-shadow:0 0 0 0 rgba(255,213,138,0)}}
.bar .left{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
/* board round 9, bar A: the offer as a gold pill (to /shop/system), its arrow in an oxblood dot */
.bar .go{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 15px;border-radius:var(--r-pill);font-weight:500;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
/* round 16: the pill sits quiet by default and turns gold when the bar is hovered or focused (the whole bar is the link) */
.bar .go:not(.here){color:var(--gold);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,213,138,.75)}
.bar .go:not(.here) i{background:rgba(255,213,138,.16);color:var(--gold)}
.bar:hover .go:not(.here),.bar:focus-visible .go:not(.here){color:#4a1420;background:linear-gradient(180deg,#ffe2a6,#f6b453);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.3);transform:translateY(-1px)}
.bar:hover .go:not(.here) i,.bar:focus-visible .go:not(.here) i{background:var(--ox);color:var(--gold)}
.bar:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.bar:active .go:not(.here){transform:translateY(0) scale(.98)}
.bar .go b{font-weight:700;letter-spacing:.01em}
.bar .go i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ox);color:var(--gold);font-size:13px;margin-left:4px}
.bar .ends{display:inline-flex;align-items:center;gap:6px;color:rgba(255,244,230,.8);white-space:nowrap}
.bar .go.here s{color:rgba(255,244,230,.7);text-decoration-thickness:1.5px}
.bar .go.here b{color:var(--gold)}
.bar .go.here{background:none;box-shadow:none;color:#fff;padding:0;min-height:0;font-weight:500;white-space:normal}
.bar .sample{margin-left:10px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,236,214,.75);border:1px solid rgba(255,213,138,.4);border-radius:var(--r-pill);padding:4px 8px}
.bar[data-state="after"] .live,.bar[data-state="after"] .left{display:none}
@media (max-width:1023px){
  .bar{gap:4px 10px;padding:8px 12px;font-size:13.5px;min-height:50px}
  .bar .t{flex-basis:100%;order:3}
  .bar{gap:6px 10px;padding:9px 12px}
  .bar .live{font-size:10.5px}
  .bar .go{order:3;flex-basis:100%;justify-content:center;padding:8px 8px 8px 16px;font-size:14px}
  .bar .go.here{text-align:center;display:block;font-size:13.5px}
  .bar .sample{display:none}   /* the sample-date marker shows on the computer; a phone's bar keeps its two rows */
}

/* ---------- the header (the guides' 3-line lockup) ---------- */
.hdr{position:relative;z-index:20}
.hdr .top{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px}
.lockup{display:inline-flex;align-items:center;text-decoration:none;padding:4px 0}
/* logo D (board round 9): the orange mark and DAILY / BETTER / YOU in one outlined SVG; its height is the B's height */
.lockup img{display:block;flex:none;max-width:none;height:46px;width:auto}
.lockup.l40 img{height:40px}
.nav{display:flex;align-items:center;gap:30px;font:500 16px/1 var(--sans)}
.nav a{text-decoration:none;padding:8px 0;position:relative}
.nav a:not(.pill)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.nav a:not(.pill):hover::after,.nav a[aria-current="page"]:not(.pill)::after{transform:scaleX(1)}
.pill{display:inline-flex;align-items:center;min-height:46px;padding:0 20px!important;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:600;transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.pill:hover{background:var(--ink);color:#fff}
.pill:active{transform:scale(.97)}
.nav .retake{color:var(--ink-soft)}
.menu{display:none;width:46px;height:46px;border-radius:var(--r-pill);place-items:center;box-shadow:inset 0 0 0 1.5px var(--line)}
.menu svg{width:22px;height:22px}
.mnav{display:none}
@media (max-width:1023px){
  .hdr .top{height:76px}
  .nav{display:none}
  .menu{display:grid}
  .lockup.l46 img{height:38px}
  .mnav:not([hidden]){display:grid;gap:2px;padding:4px var(--g) 20px;border-bottom:1px solid var(--hair);background:var(--cream)}
  .mnav a{display:flex;align-items:center;min-height:52px;font:600 19px/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--hair)}
  .mnav a.pill{margin-top:14px;justify-content:center;border-bottom:0}
}

/* ---------- sections and grounds ---------- */
.sec{padding:var(--sec) 0}
.sec.white{background:var(--white)}
.sec.tight{padding:calc(var(--sec) * .6) 0}
.sec-h{display:grid;gap:14px;margin-bottom:48px;max-width:760px}
.sec-h.c{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}
.sec-h .lead{margin-top:2px}
@media (max-width:1023px){.sec-h{margin-bottom:32px}}
/* ---------- cards (hover lift) ---------- */
.card{display:block;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-1);text-decoration:none;color:inherit;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.card:hover,.card.lift:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
a.card:active{transform:translateY(-1px) scale(.995);transition-duration:90ms}
.tile{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-1);padding:32px}
@media (max-width:1023px){.tile{padding:22px 18px;border-radius:20px}}

/* ---------- the guarantee seal (B, golden orange, its 30 in oxblood) ---------- */
.seal{position:relative;flex:none;width:96px;height:96px;transform:rotate(8deg);filter:drop-shadow(0 8px 14px rgba(220,90,30,.28))}
.seal svg{width:100%;height:100%}
.seal .lab{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--ox)}
.seal .lab b{font:600 31px/.9 var(--sans);letter-spacing:-.04em}
.seal .lab small{font:700 8.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.seal.sm{width:64px;height:64px}
.seal.sm .lab b{font-size:21px}.seal.sm .lab small{font-size:6px;letter-spacing:.14em;margin-top:2px}
.sline{display:block;font:600 15px/1.45 var(--sans);color:var(--ink)}
.sline i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:1px;background:linear-gradient(135deg,var(--seal-a),var(--seal-b))}
.sline a{display:inline-block;margin-left:6px;color:var(--ink-soft);font-weight:500;text-underline-offset:3px}
.g-row{display:flex;align-items:center;gap:16px}
.g-row .seal{transform:rotate(8deg)}

/* ---------- the System panel (locked: wide and short, about 3.2:1; golden orange left, white right) ---------- */
.sys{position:relative;display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);aspect-ratio:3.2/1;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-2)}
.sys .pic{position:relative;display:block;border-radius:var(--r-l) 0 0 var(--r-l);background:var(--bg-sys)}
.sys.k-all29 .pic{background:var(--bg-all29)}
.sys.k-first21 .pic{background:var(--bg-first21)}
.sys .pic img{transition:transform var(--t) var(--ease)}
.sys .rec{display:inline-flex;align-items:center;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ox);background:var(--or-soft);box-shadow:inset 0 0 0 1px rgba(90,24,36,.18);border-radius:var(--r-pill);padding:7px 11px;margin-bottom:12px}
.sysT{font:700 34px/1.05 var(--sans);letter-spacing:-.03em;text-align:center;margin-bottom:4px}
.sysT a{text-decoration:none}
.sysT a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.price .now{color:var(--ox-hi)}
.price .was{font:500 26px/1 var(--sans);color:var(--ink-mute);text-decoration-thickness:2px;letter-spacing:-.02em}
.price .then{font-size:14px;color:var(--ink-soft)}
.price small{font-size:14px;color:var(--ink-soft);margin-left:4px}
.glines{display:grid;gap:4px}
.secure{display:flex;align-items:center;gap:8px;font:600 13.5px/1.3 var(--sans);color:var(--ink-soft)}
.secure svg{width:16px;height:16px;color:var(--ox)}
.sys .glines{justify-items:center;margin-top:12px}
.sys .glines .sline{margin-top:0}
/* round 18 (rule 4): the one bundle geometry. Each object is placed by its SOLID body, never its canvas (whose soft
   shadow and padding pull it off): --ocx the body's centre, --oty its top, --osh its height, as shares of the file
   (alpha > 230, measured on the cutouts; the per-type 21-day sleeves share first21's canvas). The body is centred in
   the frame, rises --pk over its top edge and ends --gp above its bottom edge (the tokens in :root). */
.sys,.g-sys{--ocx:.476;--oty:.020;--osh:.890}             /* box/box-800, box-2x, box-1600 */
.sys.k-all29,.g-all29{--ocx:.562;--oty:.017;--osh:.801}   /* objects/all29 */
.sys.k-first21,.g-first21{--ocx:.445;--oty:.017;--osh:.819} /* objects/first21 and first21-<type> */
.g-guide{--ocx:.499;--oty:.086;--osh:.830}                /* picks/NN-<slug>-half (the original pose) */
.sys .pic img,.b3p img,.bo{position:absolute;left:50%;top:calc(-1 * var(--pk));height:calc((100% + var(--pk) - var(--gp)) / var(--osh));width:auto;max-width:none;
  transform:translate(calc(var(--ocx) * -100%),calc(var(--oty) * -100%));transform-origin:50% 60%}
.sys .pic img{filter:drop-shadow(0 18px 24px rgba(110,40,8,.20))}
@media (hover:hover){.sys a.pic:hover img{transform:translate(calc(var(--ocx) * -100%),calc(var(--oty) * -100%)) scale(1.02)}}
.sys .txt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 48px}
.sys .txt .seal{position:absolute;right:-20px;top:-26px;width:100px;height:100px}
.sys .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.sys .rec{display:inline-flex;align-items:center;font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ox);background:var(--or-soft);box-shadow:inset 0 0 0 1px rgba(90,24,36,.18);border-radius:var(--r-pill);padding:6px 9px}
.sys .price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;margin:8px 0 8px;font-weight:400}
.sys .price b{font:600 58px/.9 var(--sans);letter-spacing:-.045em}
.sys .price .then{flex-basis:100%;text-align:center}
.sys .one{font-size:16px;line-height:1.45;color:var(--ink-soft);margin-bottom:10px;max-width:30em}
.sys .btn{width:100%;max-width:440px;min-height:54px}
.sys .sline{margin-top:12px;text-align:center;font-size:14.5px}
.sys .more{margin-top:8px}
.sys .more .ghost{font-size:15px}
@media (max-width:1279px){.sys{aspect-ratio:2.6/1}}
@media (max-width:1023px){
  .sys{grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
  .sys .pic{border-radius:20px 20px 0 0;height:250px}
  .sys .txt{padding:52px 18px 26px;border-radius:0 0 20px 20px}
  .sys .txt .seal{top:-34px;right:6px;width:78px;height:78px}
  .sys .txt .seal .lab b{font-size:25px}.sys .txt .seal .lab small{font-size:7px}
  .sys .price b{font-size:52px}
}

/* ---------- the value line (Jay, round 3: struck, labelled, beside its number) ---------- */
.value{display:grid;gap:3px;justify-items:center;margin:0 0 14px;font-size:14.5px;line-height:1.4;color:var(--ink-soft)}
.value .vl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px}
.value s{color:var(--ink-mute);text-decoration-thickness:1.5px}
.value .save{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ox);background:var(--or-soft);border-radius:var(--r-pill);padding:3px 9px}
.value .micro{font-size:12.5px}
.value.l{justify-items:start}
.value.l .vl{justify-content:flex-start}

/* ---------- product pictures: never blurred, never moved by motion ---------- */
.pp{display:block;width:100%;height:auto}

/* ---------- the swipe gallery ---------- */
.gal{position:relative;min-width:0}
.gal .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--r-l)}
.gal .track::-webkit-scrollbar{display:none}
.gal .slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;border-radius:var(--r-l);background:#fff;box-shadow:inset 0 0 0 1px var(--hair);aspect-ratio:5/4;overflow:hidden;position:relative}
.gal .slide img{width:92%;height:92%;object-fit:contain}
.gal .slide.box{background:var(--bg-sys);box-shadow:none}
.gal .slide.box img{width:80%;height:84%}
.gal .nav2{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--sh-1);transition:transform var(--t-fast) var(--ease),opacity var(--t) var(--ease)}
.gal .nav2:hover{transform:translateY(-50%) scale(1.05)}
.gal .nav2:active{transform:translateY(-50%) scale(.95)}
.gal .nav2[disabled]{opacity:0;pointer-events:none}
.gal .nav2.p{left:14px}.gal .nav2.n{right:14px}
.gal .nav2 svg{width:22px;height:22px}
.gal .dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.gal .dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:width var(--t) var(--ease),background var(--t) var(--ease);padding:0}
.gal .dots button[aria-current="true"]{width:24px;border-radius:4px;background:var(--ink)}
/* round 16: bigger thumbnails, their row spans the main picture's width; with more than five frames it scrolls sideways
   with snap and the active one stays in view (site.js). The dots give way to the thumbnails. */
.gal:has(.thumbs) .dots{display:none}
.gal .thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.gal .thumbs::-webkit-scrollbar{display:none}
.gal .thumbs button{flex:1 0 calc((100% - 40px) / 5);scroll-snap-align:start;aspect-ratio:5/4;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;transition:box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.gal .thumbs button img{width:100%;height:100%;object-fit:contain}
@media (hover:hover){.gal .thumbs button:hover{transform:translateY(-2px)}}
/* round 18: the current thumbnail's ring is two-tone (ink outside, cream inside), so it reads on every ground: the Ink
   guide ground, the System's orange, the navy, the wine and white */
.gal .thumbs button[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #fff4e6}
.gal .thumbs button:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;box-shadow:inset 0 0 0 6px #fff4e6}   /* inside: the row's scroller would clip a ring outside */
@media (max-width:1023px){.gal .nav2{display:none}.gal .thumbs{gap:8px}.gal .thumbs button{flex-basis:calc((100% - 24px) / 4);border-radius:10px}}

/* ---------- lists ---------- */
.ticks{display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;line-height:1.45}
.ticks svg{width:20px;height:20px;margin-top:2px;color:var(--ox)}
.steps{counter-reset:s;display:grid;gap:20px}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:600 16px/1 var(--sans)}
.steps b{display:block;font-weight:600;margin-bottom:2px}
.steps p{color:var(--ink-soft)}

/* ---------- for you / not for you ---------- */
.fit2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fit2 .tile h3{font:600 22px/1.2 var(--sans);letter-spacing:-.02em;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.fit2 .tile h3 i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-style:normal}
.fit2 .yes h3 i{background:var(--ox);color:#fff}
.fit2 .no h3 i{background:var(--cream-2);color:var(--ink-soft)}
.fit2 ul{display:grid;gap:12px}
.fit2 li{display:grid;grid-template-columns:18px 1fr;gap:12px;line-height:1.45}
.fit2 li::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--ox)}
.fit2 .no li::before{background:var(--line)}
@media (max-width:1023px){.fit2{grid-template-columns:1fr;gap:14px}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow var(--t) var(--ease)}
.faq details[open]{box-shadow:var(--sh-1)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font:600 17.5px/1.35 var(--sans);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%232c2030' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");transition:transform var(--t) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 22px;color:var(--ink-soft);max-width:64em}
.faq .a p+p,.faq .a p+ul,.faq .a ul+p{margin-top:10px}
.faq .a ul{list-style:disc;padding-left:20px;display:grid;gap:6px}
.faq .a a{color:var(--ink)}
@media (max-width:1023px){.faq summary{padding:18px 16px;font-size:16.5px}.faq .a{padding:0 16px 18px}}

/* ---------- one-tap question (non-buyers on the result, buyers on the download page) ---------- */
.ask{display:grid;gap:14px}
.ask .opts{display:flex;flex-wrap:wrap;gap:10px}
.ask .opts button{min-height:48px;padding:0 18px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:500 15.5px/1.2 var(--sans);transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.ask .opts button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ask .opts button:active{transform:scale(.97)}
.ask .opts button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.ask .thanks{font-weight:600;min-height:1.4em}

/* ---------- the stage bars (stage things carry the stage colours) ---------- */
.bars{display:grid;gap:14px}
.bars .r{display:grid;grid-template-columns:110px 1fr 44px;gap:14px;align-items:center;font:500 15.5px/1 var(--sans)}
.bars .t{position:relative;height:12px;border-radius:6px;background:rgba(44,32,48,.08)}
.bars .t i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--c);width:var(--w,0%);transition:width 380ms var(--ease)}
.bars .r .p{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:14.5px}
.bars .r.lo{font-weight:700}
.bars .r.lo .t{height:18px;border-radius:9px;box-shadow:0 0 0 2.5px var(--ink)}
.bars .r.lo .t i{border-radius:9px}
.bars.pre .t i{width:0}

/* ---------- motion: fade-rise on scroll (site.js adds .on); still with reduced motion ---------- */
.js [data-rise]{opacity:0;transform:translateY(14px);transition:opacity var(--t-rise) var(--ease),transform var(--t-rise) var(--ease)}
.js [data-rise].on{opacity:1;transform:none}
.js [data-rise="2"]{transition-delay:60ms}
.js [data-rise="3"]{transition-delay:120ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
  .js [data-rise]{opacity:1;transform:none}
  .bar .live i{box-shadow:none}
  .btn:hover,a.card:hover,.card.lift:hover{transform:none}
}

/* ---------- the footer ---------- */
.sfoot{background:linear-gradient(180deg,var(--ox) 0%,var(--ox-lo) 100%);color:rgba(255,244,230,.92);padding:72px 0 40px;font-size:15px}
.sfoot .lockup{color:#fff4e6}
.sfoot a{color:inherit}
.sfoot .ghost{color:#fff4e6}
.sfoot .micro,.sfoot .fh,.sfoot .f-small{color:rgba(255,244,230,.72)}
.sfoot .fe b{color:#fff4e6}
.sfoot .f-small{border-top-color:rgba(255,244,230,.16)!important}
.sfoot .soc a{background:rgba(255,244,230,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,244,230,.22)!important;color:#fff4e6}
.sfoot .soc a:hover{box-shadow:inset 0 0 0 1.5px #fff4e6!important}
.sfoot :focus-visible{outline-color:#fff4e6}
.sfoot .f-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:48px}
.sfoot .f-line{font:600 26px/1.15 var(--sans);letter-spacing:-.025em;margin:22px 0 14px;max-width:14em}
.sfoot .f-go{margin-bottom:6px}
.sfoot .f-go a{font-size:16px}
.sfoot .soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sfoot .soc a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--hair);text-decoration:none;font-weight:600;font-size:14.5px;transition:box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.sfoot .soc a:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-1px)}
.sfoot .soc svg{width:20px;height:20px}
.sfoot .f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sfoot .fh{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.sfoot .fc li+li{margin-top:10px}
.sfoot .fc a{text-decoration:none}
.sfoot .fc a:hover{text-decoration:underline;text-underline-offset:3px}
.sfoot .fc a[aria-current="page"]{font-weight:600}
.sfoot .f-small{display:grid;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.sfoot .f-small a{color:inherit;text-underline-offset:3px}
.sfoot .fe b{color:var(--ink);font-weight:600}
.sfoot .fe a{white-space:nowrap}
@media (max-width:1023px){
  .sfoot{padding:48px 0 32px}
  .sfoot .f-top{grid-template-columns:1fr;gap:36px}
  .sfoot .f-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .sfoot .f-line{font-size:22px}
}

/* ---------- the phone buy bar (a page that has one) ---------- */
.sbar{position:fixed;left:0;right:0;bottom:var(--dbyc-h,0px);z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,244,230,.96);box-shadow:0 -1px 0 var(--hair),0 -10px 30px -18px rgba(44,32,48,.4);transform:translateY(110%);transition:transform var(--t) var(--ease)}
.sbar.on{transform:none}
.sbar .in{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto}
.sbar .btn{flex:1;min-height:50px}
.sbar .pr{font:600 13px/1.2 var(--sans);color:var(--ink-soft)}
.sbar .pr b{display:block;font-size:19px;color:var(--ink);letter-spacing:-.02em}
@media (min-width:1024px){.sbar{display:none}}

/* ---------- a visitor with a result: the diagnostic links wait for their swap (site.js), so the old label never flashes ---------- */
.rs-wait [data-cta="diagnostic"],.rs-wait [data-diag-micro]{visibility:hidden}


/* ================= round 13 (8 Nov 2026) ================= */
/* the mirrored panel (the result's $39: picture right) and the two bundle panels on the shop */
.sys.mir{grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
.sys.mir .pic{order:2;border-radius:0 var(--r-l) var(--r-l) 0}
.sys.mir .txt{order:1}
/* All 29 and Your First 21 Days take the System's geometry (round 18, rule 4: the vars above).
   The canvas's soft shadow runs past the frame: clip it at the frame's sides and bottom, never at the top, so the peek
   over the top edge stays and nothing smudges the white half or widens a phone page */
.sys.k-all29 .pic,.sys.k-first21 .pic{clip-path:inset(-40% 0 0 0)}
/* on a phone the picture's canvas is wider than the screen: its wrapper clips it, padded so the peek and the card's
   shadow keep their room (the negative margins hand that room back, so nothing moves) */
.opw{display:grid}
@media (max-width:1023px){.opw{overflow:hidden;padding:44px 16px 32px;margin:-44px -16px -32px}}
.sys.k-all29 .pic img,.sys.k-first21 .pic img{filter:none}
.offers2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:56px}
.offers2 .sys{grid-template-columns:1fr;aspect-ratio:auto}
.offers2 .sys .pic{border-radius:var(--r-l) var(--r-l) 0 0;height:340px}
.offers2 .sys .txt{padding:28px 28px 26px}
.offers2 .sysT{font-size:28px}
@media (max-width:1023px){
  .sys.mir{grid-template-columns:1fr}
  .sys.mir .pic{order:0;border-radius:20px 20px 0 0}
  .sys.mir .txt{padding-top:26px}
  .offers2{grid-template-columns:1fr;gap:40px;margin-top:44px}
  .offers2 .sys .pic{height:250px;border-radius:20px 20px 0 0}
  .sys.mir .pic,.sys.k-all29 .pic,.sys.k-first21 .pic{height:250px}
  .offers2 .sys .txt{padding:22px 18px}
  .sysT{font-size:28px}
}

/* a product card: the lift, and on a pointer the page mid-turn fades in with a slow zoom (never on touch) */
.pc .well,.pc .pk-v{position:relative;overflow:hidden}
.pc .pp.b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1);transition:opacity 340ms var(--ease),transform 1.6s var(--ease)}
.pc .pp.a{transition:opacity 340ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pc a:hover .pp.b,.pc a:focus-visible .pp.b{opacity:1;transform:scale(1.07)}
  .pc a:hover .pp.a:has(~ .pp.b),.pc a:focus-visible .pp.a:has(~ .pp.b){opacity:0}
}
.gcard .pr.incl{color:var(--ox);font-size:13.5px}

/* the product page (/shop/system, the bundles, the tools, every guide): the picture frame on the product's own ground */
.prod .gal.ground .slide{background:var(--pg,var(--cream-2));box-shadow:none}
.prod .gal.ground .thumbs button{background:var(--pg,var(--cream-2));box-shadow:none}
.prod .gal.ground .thumbs button[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #fff4e6}
.gal .slide.fill img{width:100%;height:100%;object-fit:contain}
.gal .slide.box img{width:74%;height:84%}
.gal .slide.f21 img{width:86%;height:80%}
.gal .slide.page{align-items:start;overflow:hidden}
.gal .slide.page img{width:84%;height:auto;margin-top:6%;box-shadow:0 18px 40px -20px rgba(44,32,48,.45);border-radius:3px}
.gal .slide.tall img{width:auto;height:92%}
.prod .h1.pt{font-size:52px;margin:6px 0 12px}
.rec-top{display:inline-flex;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ox);background:var(--or-soft);box-shadow:inset 0 0 0 1px rgba(90,24,36,.18);border-radius:var(--r-pill);padding:7px 11px}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:6px 0 18px}
.price.big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price.big .now{font:700 54px/1 var(--sans);letter-spacing:-.04em}
.price.big .then{flex-basis:100%}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 13px;border-radius:var(--r-pill);background:var(--or-soft);box-shadow:inset 0 0 0 1px rgba(90,24,36,.16);font:500 13.5px/1 var(--sans);color:var(--ox)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--or-a);box-shadow:0 0 0 3px rgba(239,138,52,.2)}
.chip b{font-weight:700;font-variant-numeric:tabular-nums}
.prod .buy .ticks{margin:0 0 20px}
.prod .buy .prc{font:600 44px/1 var(--sans);letter-spacing:-.04em;margin:8px 0 14px}
.prod .buy .prc small{font-size:14px;font-weight:500;color:var(--ink-soft);margin-left:6px;letter-spacing:0}
.incl{display:flex;align-items:center;gap:10px;font:600 15.5px/1.35 var(--sans);color:var(--ox);background:var(--or-soft);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.incl svg{width:20px;height:20px;flex:none}
.f21-mine{font:600 17px/1.4 var(--sans);margin:-4px 0 10px}
.f21-why{margin:0 0 14px;font-size:15px}
.rel-sys{margin-top:24px;text-align:center;color:var(--ink-soft)}
.rel-sys a{color:var(--ox);font-weight:600}
@media (max-width:1023px){.prod .h1.pt{font-size:38px}.price.big .now{font-size:44px}}

/* the honest worth (a count-up to the true sum) and the items-included list, each item a link */
.worth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.worth .h2 .cu{color:var(--ox-hi);font-variant-numeric:tabular-nums}
.worth .lead{margin:14px 0 20px}
.worth-now{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:600 18px/1.3 var(--sans)}
.worth-now>b{font-size:26px;color:var(--ox-hi)}
/* round 18 (rules 2 and 3): ONE component, one look, on every page that shows it (the result and /shop/system): the
   title bar on the System's orange (its gallery sweep, dark oxblood words, 6:1 or better), the scrolling list white */
.items{background:#fff;border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--hair),0 14px 30px -24px rgba(44,32,48,.35);overflow:hidden}
.items-h{display:grid;gap:2px;text-align:center;padding:16px 18px;background:linear-gradient(90deg,var(--sys-a),var(--sys-m));color:var(--ox-ink);border-bottom:1px solid rgba(120,50,10,.18)}
.items-h b{font:600 18px/1.2 var(--sans)}
.items-h span{font-size:13.5px;color:var(--ox-ink);opacity:.82}
.items-l{max-height:430px;overflow:auto;padding:6px 14px 10px;overscroll-behavior:contain;scrollbar-width:thin}
.items-l li+li{border-top:1px solid var(--hair)}
.items-l a{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:9px 4px;text-decoration:none;border-radius:10px;transition:background var(--t) var(--ease)}
.items-l a:hover{background:var(--cream)}
/* round 18 (rule 2): inside a bundle's own contents list every row's picture takes THAT bundle's ground: the System's
   list on the System's orange (one ground, one light for the Path, the guides and the tools) */
.items-l .it-p{width:52px;height:44px;border-radius:8px;background:var(--bg-sys);overflow:hidden;display:grid;place-items:center;padding:4px}
.items-l .it-p img{width:100%;height:100%;object-fit:contain}
.items-l .it-t b{display:block;font:600 14.5px/1.25 var(--sans)}
.items-l .it-t small{font-size:12.5px;color:var(--ink-soft)}
.items-l .it-v{font:600 14px/1 var(--sans);color:var(--ink-mute)}
.items-l .it-v s{text-decoration-thickness:1.5px}
@media (max-width:1023px){.worth{grid-template-columns:1fr;gap:28px}.items-l{max-height:380px}}

/* the calm moving display: the 29 covers drifting in path order; still on hover, on focus and with reduced motion */
.mqw{padding:40px 0;overflow:hidden}
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-r{display:flex;gap:16px;width:max-content;animation:mq 120s linear infinite}
.mq:hover .mq-r,.mq:focus-within .mq-r{animation-play-state:paused}
.mq li a{display:block;width:190px;border-radius:14px;overflow:hidden;background:var(--bg-guide)}
.mq li img{width:100%;height:auto;aspect-ratio:6/5;object-fit:contain}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:1023px){.mq li a{width:140px}}

/* the shop's filters: one row of chips; on a phone it scrolls sideways */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.filters button{min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--hair);font:600 15px/1 var(--sans);white-space:nowrap;transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.filters button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.filters button[aria-checked="true"]{background:var(--ox);color:#fff;box-shadow:none}
/* round 17: each chip's count, set into the chip as a small round tally (not a raw "(3)") */
.filters button{position:relative;display:inline-flex;align-items:center;gap:9px;padding-right:8px}
.filters .n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:var(--cream);color:var(--ink-soft);font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.filters button:hover .n{background:var(--cream-2);color:var(--ink)}
.filters button[aria-checked="true"] .n{background:rgba(255,255,255,.16);color:var(--gold)}
[data-cat].off{display:none!important}
.ggrid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:8px calc(-1 * var(--g)) 0;padding:2px var(--g) 6px;scrollbar-width:none;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar{display:none}
  .filters button{scroll-snap-align:start;flex:none}
  .ggrid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.mq-r{animation:none}.pc .pp.b{transition:none}}
/* the oxblood footer's small print and headings read on the dark ground (after the footer's own rules) */
.sfoot .fh,.sfoot .micro,.sfoot .f-small,.sfoot .f-small p{color:rgba(255,244,230,.74)}
.sfoot .f-small b{color:#fff4e6}
.sfoot .fc a{color:#fff4e6}

/* ---- J1 (round 18, the cold judge) ---- */
/* a sideways row that snaps starts on its own gutter, not flush to the screen edge (the snap used to eat the padding) */
@media (max-width:1023px){.filters{scroll-padding-inline:var(--g)}}
.gal .thumbs{scroll-padding-inline:2px}
/* round 19: the current thumbnail's ring sits ABOVE its picture (the inset ring was painted under a picture that fills the
   button, so no gallery ever showed which picture is on screen; on Mist's pale ground it matters more) */
.gal .thumbs button{position:relative}
.gal .thumbs button::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow var(--t) var(--ease)}
.gal .thumbs button[aria-current="true"]::after{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #fff4e6}
/* the phone buy bar never sits over the footer's last lines: the footer carries the bar's height below its own */
@media (max-width:1023px){body:has(.sbar) .sfoot{padding-bottom:calc(40px + 72px + env(safe-area-inset-bottom))}}
/* on a touch screen every small text link gets a finger-sized hit area (about 44 px tall), drawn invisibly around it,
   so nothing moves on the page */
@media (pointer:coarse){
  .ghost,.sline a,.crumb a,.gc-more,.sfoot .fc a,.sfoot .f-small a,p.micro a{position:relative}
  .ghost::after,.sline a::after,.crumb a::after,.gc-more::after,.sfoot .fc a::after,.sfoot .f-small a::after,p.micro a::after{content:"";position:absolute;inset:-12px -6px}
}

/* ---- round 19 (rule 8): the header comes back when you scroll up (site.js sets .fl, .in, .nt on .hdr) ----
   .hdr stays in the page at its own height (the placeholder: nothing below it moves); past it, .hb floats, compact (68 px
   on a computer, 60 px on a phone), parked above the screen; scrolling up slides it in, transform only. A hairline and a
   soft shadow only while it floats. The countdown bar never comes back: the chip carries the time left. Anchor jumps
   land below it (scroll-padding). */
html{scroll-padding-top:84px}
.hdr.fl{height:96px}
.hdr .hb{position:relative}
.hdr.fl .hb{position:fixed;left:0;right:0;top:0;z-index:45;background:var(--cream);box-shadow:0 1px 0 var(--hair),0 10px 26px -18px rgba(44,32,48,.42);
  transform:translateY(calc(-100% - 16px));transition:transform 180ms var(--ease);will-change:transform}
.hdr.fl.in .hb{transform:none}
.hdr.nt .hb{transition:none!important}
.hdr.fl .top{height:68px}
.hdr.fl .lockup img{height:36px}
.hdr.fl .nav{margin-left:auto}
.hdr.fl .pill{min-height:40px}
.hchip{display:none}
.hdr.fl .hchip:not([hidden]){display:inline-flex;align-items:center;gap:6px;flex:none;min-height:36px;padding:0 14px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;
  font:500 13.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--gold);background:linear-gradient(180deg,var(--ox-hi),var(--ox) 60%,var(--ox-lo));box-shadow:inset 0 1px 0 rgba(255,214,150,.22);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease)}
.hchip b{font-weight:700;color:#fff4e6}
.hchip .dt{opacity:.6}
.hchip:hover{box-shadow:inset 0 1px 0 rgba(255,214,150,.22),0 8px 18px -10px rgba(90,24,36,.6);transform:translateY(-1px)}
.hchip:focus-visible{outline-color:var(--ox)}
@media (max-width:1023px){
  html{scroll-padding-top:72px}
  .hdr.fl{height:76px}
  .hdr.fl .top{height:60px;gap:10px}
  .hdr.fl .lockup.l46 img{height:32px}
  .hdr.fl .menu{width:42px;height:42px}
  .hdr.fl .hchip:not([hidden]){margin-left:auto;min-height:34px;padding:0 12px;font-size:13px}
  .hdr.fl .mnav:not([hidden]){max-height:calc(100vh - 60px);overflow:auto;overscroll-behavior:contain}
}