/* Black Friday 2026 mini-site. Look and tokens from lifehackmethod.com (2026-11-10):
   Bricolage Grotesque 800 headlines, Hanken Grotesk body, Space Mono eyebrows,
   teal pill buttons, yellow highlighter on the key words, soft pastel sections, 20px cards.
   Holiday layer on top: snow, the flip countdown, the gift-tag price, the gold ribbon.
   The explainer scenes sit on a dark teal "stage" so their colors still read. */

:root {
  --ink: oklch(0.21 0.020 195);
  --ink-2: oklch(0.32 0.030 195);
  --paper: oklch(0.985 0.005 195);
  --paper-2: oklch(0.96 0.008 195);
  --rule: oklch(0.86 0.012 195);
  --muted: oklch(0.50 0.012 195);
  --teal-deep: oklch(0.49 0.085 192);
  --teal: oklch(0.66 0.105 192);
  --teal-light: oklch(0.80 0.075 188);
  --teal-wash: oklch(0.93 0.025 188);
  --teal-mist: oklch(0.98 0.012 188);
  --green: oklch(0.65 0.20 135);
  --green-wash: oklch(0.96 0.07 130);
  --gold: oklch(0.86 0.14 95);
  --gold-soft: oklch(0.93 0.10 95);
  --cream: oklch(0.97 0.04 95);
  --hl: oklch(0.90 0.155 100);
  --red: oklch(0.58 0.17 28);
  --shadow: 0 22px 50px -28px oklch(0.49 0.085 192 / .45);
  --shadow-sm: 0 10px 26px -18px oklch(0.49 0.085 192 / .4);
  --display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --r: 20px;
  /* scene stage palette (the explainer animations were drawn for a dark background) */
  --pine: oklch(0.27 0.045 195);
  --pine-2: oklch(0.32 0.05 195);
  --pine-3: oklch(0.38 0.05 195);
  --teal-bright: #15aba5;
  --on-pine: oklch(0.96 0.01 195);
  --on-pine-2: oklch(0.82 0.02 195);
  --up: #7ccf5b;
  --warn: #e07a45;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); }
button { font: inherit; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 32px); }
.stack { display: grid; gap: 16px; align-content: start; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.12; letter-spacing: -0.01em; }
h4 { font-size: 18px; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.fine { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.eyebrow { display: block; font: 700 13px/1.3 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 10px; }

/* the highlighter: any <em> in a headline, or .hl */
h1 em, h2 em, h3 em, h4 em, .hl {
  font-style: normal;
  background-image: linear-gradient(180deg, transparent 56%, var(--hl) 56%, var(--hl) 95%, transparent 95%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em; border-radius: .12em;
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px;
  border-radius: 999px; border: 2px solid transparent; font: 600 16px/1.2 var(--body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--teal-deep); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: oklch(0.43 0.085 192); }
.btn-line { background: var(--paper); color: var(--teal-deep); border-color: var(--teal-deep); }
.btn-line:hover { background: var(--teal-mist); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.in-bag { background: var(--green-wash); color: var(--ink); border-color: var(--green); box-shadow: none; }
.btn:focus-visible, .opt:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--teal-wash); color: var(--teal-deep); font: 600 13px/1.4 var(--body); }
.chip.hot { background: var(--gold-soft); color: var(--ink); }
.pill-badge { justify-self: start; display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--cream); border: 1px solid var(--gold-soft);
  font: 700 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* ---------- announce + header ---------- */
.announce { background: var(--teal-deep); color: var(--paper); text-align: center; padding: 8px 16px; font: 700 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.announce b { color: var(--gold); font-weight: 700; }
.snowflake { display: inline-block; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
header.site { position: sticky; top: 0; z-index: 40; background: oklch(0.985 0.005 195 / .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
header.site .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { height: 30px; width: auto; }
.logo .bf { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--hl); padding: 5px 8px; border-radius: 6px; }
nav.links { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
nav.links::-webkit-scrollbar { display: none; }
nav.links a { padding: 8px 10px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
nav.links a:hover { background: var(--teal-mist); color: var(--teal-deep); }
.bagbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 0;
  background: var(--teal-deep); color: var(--paper); font-weight: 600; cursor: pointer; }
.bagbtn svg { width: 18px; height: 18px; }
.bagbtn .count { min-width: 22px; height: 22px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 12px/22px var(--body); text-align: center; }
.bagbtn.wiggle { animation: wiggle .6s ease; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }

/* ---------- sections ---------- */
.band { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.band-tight { padding: clamp(40px, 6vw, 64px) 0 clamp(16px, 3vw, 24px); }
.sec-paper { background: var(--paper); }
.sec-cream { background: linear-gradient(180deg, var(--cream), var(--paper)); }
.sec-mist { background: linear-gradient(180deg, var(--teal-mist), var(--paper)); }
.sec-ink { background: var(--pine); color: var(--on-pine); overflow: hidden; }
.sec-ink h2, .sec-ink .lede { color: var(--on-pine); }
.sec-ink .eyebrow { color: var(--gold); }
.sec-ink .wrap { position: relative; }
.sechead { display: grid; gap: 4px; margin-bottom: 32px; max-width: 760px; }
.sechead .lede { margin-top: 10px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 88px);
  background: radial-gradient(60% 70% at 92% 0%, var(--cream), transparent 70%), radial-gradient(50% 60% at 0% 100%, var(--teal-mist), transparent 70%), var(--paper); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero .stack { gap: 20px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.rating { font-size: 14px; color: var(--ink-2); }
.stars { color: oklch(0.70 0.16 75); letter-spacing: 2px; }
canvas.snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.notice { padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); font-weight: 600; }

.dealbox { position: relative; background: var(--paper); border-radius: 24px; padding: 30px 28px 26px; box-shadow: var(--shadow); display: grid; gap: 16px; overflow: hidden; border: 1px solid var(--teal-wash); }
.dealbox .ribbon { position: absolute; top: 0; bottom: 0; right: 34px; width: 14px; background: var(--gold); opacity: .55; }
.dealbox .ribbon::before { content: ""; position: absolute; left: -24px; top: 18px; width: 62px; height: 30px; border: 5px solid var(--gold); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.dealbox > * { position: relative; }
.dealbox .big { font: 800 clamp(48px, 6.5vw, 76px)/.95 var(--display); letter-spacing: -.03em; }
.dealbox .big small { display: block; font: 700 13px/1.2 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 8px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.facts li { padding-left: 22px; position: relative; }
.facts li::before { content: "✦"; position: absolute; left: 0; color: var(--teal); }
.facts b { color: var(--ink); }

/* flip countdown */
.countdown { display: flex; align-items: flex-start; gap: 6px; }
.countdown .unit { display: grid; justify-items: center; gap: 4px; }
.countdown .digits { display: flex; gap: 3px; perspective: 300px; }
.countdown .d { display: inline-grid; place-items: center; width: 30px; height: 42px; border-radius: 8px; background: var(--pine); color: var(--paper);
  font: 700 24px/1 var(--mono); box-shadow: inset 0 -21px 0 rgba(255,255,255,.04); transform-origin: 50% 50%; }
.countdown .d.flip { animation: flip .45s ease; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-80deg); } 100% { transform: rotateX(0); } }
.countdown .lab { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.countdown .sep { font: 700 24px/42px var(--mono); color: var(--teal); }

/* ---------- finder ---------- */
.finder { background: linear-gradient(165deg, var(--teal-mist), var(--paper)); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-sm); display: grid; gap: 22px; border: 1px solid var(--teal-wash); }
.finder h2 { font-size: clamp(26px, 3.4vw, 38px); }
.fq { display: grid; gap: 10px; }
.qlab { font-weight: 700; color: var(--ink); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); color: var(--ink); font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.opt:hover { border-color: var(--teal); }
.opt[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); transform: translateY(-1px); }
.fresult { display: grid; gap: 10px; padding: 20px; border-radius: 18px; background: var(--paper); border: 2px dashed var(--teal-light); }
.fresult .rec { font: 800 22px/1.2 var(--display); }
.fresult .rec em { font-style: normal; background-image: linear-gradient(180deg, transparent 56%, var(--hl) 56%, var(--hl) 95%, transparent 95%); }
.fresult .why { color: var(--ink-2); }
.fresult .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fresult.pop { animation: popin .35s ease; }
@keyframes popin { 0% { transform: scale(.97); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* ---------- jump links ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.jump a { padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.jump a:hover { border-color: var(--teal); color: var(--teal-deep); }

/* ---------- a program on the home page ---------- */
.prog { padding: clamp(48px, 7vw, 88px) 0; scroll-margin-top: 70px; }
.tone-mist { background: linear-gradient(170deg, var(--teal-mist), var(--paper) 70%); }
.tone-cream { background: linear-gradient(170deg, var(--cream), var(--paper) 70%); }
.tone-green { background: linear-gradient(170deg, var(--green-wash), var(--paper) 70%); }
.prog-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.prog-grid.flip .prog-copy { order: 2; }
.prog-copy { display: grid; gap: 16px; align-content: start; }
.prog-copy .eyebrow { margin-bottom: 0; }
.prog-copy h2 { font-size: clamp(30px, 4vw, 46px); }
.mini-h { font: 700 13px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); margin-top: 6px; }
.prog-side { display: grid; gap: 16px; position: sticky; top: 84px; }

.stage { background: var(--pine); border-radius: var(--r); padding: 22px 20px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stage > div { position: relative; z-index: 1; }
.stage svg { width: 100%; height: auto; display: block; }

.buybox { background: var(--paper); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); display: grid; gap: 12px; border: 1px solid var(--teal-wash); }
.buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.price { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.price .now { font: 800 40px/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.price .per { font-weight: 600; color: var(--muted); }
.price s { color: var(--muted); font-size: 17px; }
/* the gift tag */
.tag { position: relative; display: inline-grid; gap: 0; padding: 6px 12px 6px 22px; background: var(--hl); color: var(--ink); border-radius: 4px 10px 10px 4px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); font-weight: 700; line-height: 1.2; transform: rotate(-3deg); }
.tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--paper); }
.tag .save { font-size: 14px; }
.tag .pct { font: 700 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tag:empty, .tag .save:empty + .pct:empty { display: none; }

/* seat meter */
.stock { display: grid; gap: 6px; }
.stock .row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.stock .left { font-weight: 700; color: var(--ink); }
.stock .bar { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--rule); }
.stock .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1); border-radius: 999px; }
.stock.low .left { color: var(--red); }
.stock.low .bar i { background: linear-gradient(90deg, oklch(0.75 0.15 60), var(--red)); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.stock.out .left { color: var(--red); }

/* ---------- lists ---------- */
.ticks, .crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li, .crosses li { position: relative; padding-left: 32px; color: var(--ink-2); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-wash); color: var(--teal-deep); font: 700 13px/22px var(--body); text-align: center; }
.crosses li::before { content: "×"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: oklch(0.95 0.03 30); color: var(--red); font: 700 16px/21px var(--body); text-align: center; }

/* ---------- "See everything" toggle ---------- */
details.full { margin-top: 32px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-sm); border: 1px solid var(--teal-wash); overflow: hidden; }
details.full > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 20px 24px; align-items: center; }
details.full > summary::-webkit-details-marker { display: none; }
details.full > summary .t { font: 800 20px/1.2 var(--display); color: var(--ink); }
details.full > summary .s { grid-column: 1; font-size: 14.5px; color: var(--muted); }
details.full > summary .chev { grid-row: 1 / span 2; grid-column: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-deep); position: relative; transition: transform .25s ease; }
details.full > summary .chev::before { content: ""; position: absolute; left: 14px; top: 12px; width: 10px; height: 10px; border-right: 3px solid var(--paper); border-bottom: 3px solid var(--paper); transform: rotate(45deg); }
details.full[open] > summary .chev { transform: rotate(180deg); }
details.full > summary:hover .t { color: var(--teal-deep); }
details.full[open] > summary { border-bottom: 1px solid var(--rule); }
details.full[open] .full-body { animation: open .35s ease; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.full-body { padding: clamp(20px, 4vw, 40px); display: grid; gap: clamp(36px, 5vw, 56px); }
.full-body.page { padding: 0; }
.block { display: grid; gap: 10px; }
.block > h2, .block > h3 { margin-bottom: 6px; }
.block .lede { margin-bottom: 8px; }
.block.story { grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; background: var(--cream); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.full-foot { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding-top: 28px; border-top: 1px dashed var(--rule); }
.full-foot .closer { display: grid; gap: 8px; }
.full-acts { display: flex; flex-wrap: wrap; gap: 10px; }

.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; counter-reset: step; }
.step { counter-increment: step; background: linear-gradient(165deg, var(--teal-mist), var(--paper)); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm); display: grid; gap: 6px; align-content: start; }
.step::before { content: counter(step, decimal-leading-zero); font: 700 13px/1 var(--mono); letter-spacing: .1em; color: var(--teal-deep); }
.step p { color: var(--ink-2); font-size: 15px; }

.inside { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.inside .item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 14px; }
.inside .num { display: grid; place-items: center; min-height: 40px; border-radius: 10px; background: var(--teal-wash); color: var(--teal-deep); font: 700 13px/1.1 var(--mono); text-align: center; padding: 4px; }
.inside h4 { font-size: 16.5px; }
.inside p { font-size: 14.5px; color: var(--ink-2); }

.fit { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fit > div { border-radius: var(--r); padding: 22px; display: grid; gap: 12px; align-content: start; }
.fit .yes { background: var(--green-wash); }
.fit .no { background: var(--paper-2); }

.quotes { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.qcard { margin: 0; background: var(--paper); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-sm); display: grid; gap: 10px; align-content: start; color: var(--ink); }
.qcard .mark { font: 800 46px/.6 var(--display); color: var(--teal); height: 24px; }
.qcard p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.qcard figcaption { font-weight: 700; font-size: 15px; }
.qcard.small { padding: 16px; box-shadow: none; background: var(--teal-mist); }
.qcard.small p { font-size: 15px; }

.faq { display: grid; gap: 10px; margin-top: 8px; }
.faq details { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font: 700 22px/1 var(--body); color: var(--teal-deep); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 16px; color: var(--ink-2); }

/* ---------- Suit Up band ---------- */
.bonus { background: var(--hl); padding: 28px 0; }
.bonus .wrap { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.bonus .gift { width: 58px; height: 58px; color: var(--ink); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.bonus h3 { font-size: clamp(20px, 2.4vw, 26px); }
.bonus .hl { background-image: none; padding: 0; }
.bonus p { color: var(--ink-2); max-width: 70ch; }
.bonus .stack { gap: 4px; }

/* ---------- vault ---------- */
.vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.vcard { background: var(--paper); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); display: grid; gap: 10px; align-content: start; scroll-margin-top: 80px; }
.vcard .ico { width: 40px; height: 40px; color: var(--teal-deep); }
.vcard .ico-a { fill: var(--teal); }
.vcard .ico-b { fill: var(--gold); }
.vcard:hover .ico { animation: wiggle .6s ease; }
.vcard .eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .16em; }
.vcard h2, .vcard h3 { font-size: 22px; }
.vcard p { color: var(--ink-2); font-size: 15px; }
.vcard .note { font-size: 14px; font-weight: 600; color: var(--teal-deep); }
.vcard .price .now { font-size: 30px; }
.vmore { border-top: 1px solid var(--rule); padding-top: 10px; }
.vmore summary { cursor: pointer; font-weight: 700; color: var(--teal-deep); }
.vmore[open] summary { margin-bottom: 10px; }
.vmore .ticks { margin-bottom: 10px; font-size: 14.5px; }
.vmore .fine { display: inline-block; margin-top: 8px; }

/* ---------- program page ---------- */
.phero { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 72px) 0;
  background: radial-gradient(60% 70% at 92% 0%, var(--cream), transparent 70%), radial-gradient(50% 60% at 0% 100%, var(--teal-mist), transparent 70%), var(--paper); }
.phero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.phero .wrap.one { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
.phero.short { padding-bottom: clamp(24px, 4vw, 40px); }
.phero .prog-side { position: static; }
.crumbs { font: 700 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--teal-deep); }
.closer-page { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.closer-page > div { display: grid; gap: 10px; }

.stickybuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: oklch(0.985 0.005 195 / .96); backdrop-filter: blur(10px); border-top: 1px solid var(--rule);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .3s ease; }
.stickybuy.show { transform: none; }
.stickybuy .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stickybuy .name { font: 800 17px/1.2 var(--display); }
.stickybuy .mini { font-size: 14px; color: var(--muted); }

/* ---------- footer ---------- */
footer.site { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }

/* ---------- bag drawer ---------- */
.drawer-back { position: fixed; inset: 0; background: oklch(0.21 0.02 195 / .45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 60; }
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); z-index: 61; display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px -30px oklch(0.21 0.02 195 / .5); }
.drawer.open { transform: none; }
.dhead { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--rule); position: relative; }
.dhead h2 { font-size: 26px; }
.dhead .ribbon-v { display: none; }
.dhead .x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.dbody { overflow-y: auto; padding: 16px 20px; display: grid; gap: 14px; align-content: start; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); }
.lines li.added { animation: popin .4s ease; background: var(--green-wash); }
.lines .nm { font-weight: 700; display: grid; }
.lines .nm small { font-weight: 500; color: var(--teal-deep); font-size: 12.5px; }
.lines .pr { text-align: right; font-weight: 700; display: grid; }
.lines .pr s { font-weight: 400; color: var(--muted); font-size: 13px; }
.lines .rm { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--paper); color: var(--muted); font-size: 18px; cursor: pointer; }
.lines li.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 10px; color: var(--muted); }
.lines li.empty svg { width: 56px; height: 56px; color: var(--teal); }
.bump { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border-radius: 14px; border: 2px dashed var(--gold); background: var(--cream); cursor: pointer; font-size: 14.5px; }
.bump input { width: 20px; height: 20px; accent-color: var(--teal-deep); margin-top: 2px; }
.suggest { display: grid; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--rule); }
.suggest .lab { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.suggest .btn { justify-self: start; min-height: 38px; }
.giftnote { padding: 12px 14px; border-radius: 14px; background: var(--hl); font-size: 14.5px; }
.dfoot { border-top: 1px solid var(--rule); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 14px; background: var(--paper); }
.totals { display: grid; gap: 4px; font-size: 15px; }
.totals > div { display: flex; justify-content: space-between; }
.totals .save { color: var(--green); font-weight: 700; }
.totals .grand { font: 800 22px/1.3 var(--display); }
.totals .then { font-size: 13.5px; color: var(--muted); }
form.who { display: grid; gap: 10px; }
form.who .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.who label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
form.who input { min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule); font: 16px var(--body); background: var(--paper); color: var(--ink); }
form.who input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.err { color: var(--red); font-weight: 600; font-size: 14px; }
.err:empty { display: none; }

/* ---------- toast + flyer ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 140%); display: flex; gap: 14px; align-items: center; justify-content: space-between; width: max-content; max-width: min(440px, calc(100% - 32px));
  padding: 12px 14px 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2,.8,.2,1); font-size: 14.5px; }
.toast.show { transform: translate(-50%, 0); }
.toast > span { flex: 1; min-width: 0; }
.toast button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--gold); color: var(--ink); font-weight: 700; cursor: pointer; }
.flyer { position: fixed; z-index: 80; width: 18px; height: 18px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 0 3px var(--teal-deep); pointer-events: none;
  transition: transform .7s cubic-bezier(.5,-0.3,.6,1), opacity .7s ease; }

/* ---------- thank-you ---------- */
.ty { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0; background: radial-gradient(60% 70% at 92% 0%, var(--cream), transparent 70%), var(--paper); }
.ty .wrap { position: relative; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tybox { background: var(--paper); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-sm); border: 1px solid var(--teal-wash); }

/* ---------- explainer scenes (drawn for the dark stage) ---------- */
svg text { fill: var(--on-pine-2); font-family: var(--mono); font-size: 11px; }
svg .lbl { fill: var(--on-pine); font-family: var(--body); font-size: 12px; font-weight: 600; }
svg .ttl { fill: var(--gold); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.wk-cell { fill: var(--pine-3); stroke: none; }
.blk { fill: var(--teal-bright); animation: snap 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.blk.b2 { fill: var(--cream); }
.blk.b3 { fill: var(--gold); }
@keyframes snap { 0%,12% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } 38%,82% { transform: none; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.cheers { animation: pop 6s ease-in-out infinite; fill: var(--gold) !important; }
@keyframes pop { 0%,35% { opacity: .15; } 45%,82% { opacity: 1; } 100% { opacity: .15; } }
.coach { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; fill: none; animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.dot-gold { fill: var(--gold); }
.track { fill: var(--pine-3); }
.fillbar { fill: var(--teal-bright); transform-box: fill-box; transform-origin: left; animation: grow 7s ease-in-out infinite; }
@keyframes grow { 0%,8% { transform: scaleX(.04); } 80%,100% { transform: scaleX(1); } }
.call { fill: var(--pine-2); stroke: var(--gold); stroke-width: 2; }
.flowline { stroke: var(--pine-3); stroke-width: 2; fill: none; }
.packet { fill: var(--gold); animation: travel 3.2s linear infinite; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.brain { fill: var(--teal-bright); }
.brain-t { fill: var(--pine) !important; font-weight: 700; }
.bucket { fill: none; stroke: var(--on-pine-2); stroke-width: 1.5; }
.water { fill: var(--teal-bright); transform-box: fill-box; transform-origin: bottom; animation: fill 8s ease-in-out infinite; }
.water.w2 { fill: var(--cream); animation-delay: 1.4s; }
.water.w3 { fill: var(--up); animation-delay: 2.8s; }
.water.w4 { fill: var(--gold); animation-delay: 4.2s; }
@keyframes fill { 0%,5% { transform: scaleY(0); } 30%,85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.drip { fill: var(--teal-bright); animation: drip 1.2s ease-in infinite; }
@keyframes drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
.gauge-bg { fill: none; stroke: var(--pine-3); stroke-width: 16; }
.gauge { fill: none; stroke: var(--warn); stroke-width: 16; stroke-dasharray: 226; animation: calm 6s ease-in-out infinite; }
@keyframes calm { 0%,15% { stroke-dashoffset: 20; stroke: #e07a45; } 60%,90% { stroke-dashoffset: 170; stroke: var(--up); } 100% { stroke-dashoffset: 20; stroke: #e07a45; } }
/* Ideal Week: the four Time Puzzle pieces drop into the week */
.piece { transform-box: fill-box; animation: drop 7s cubic-bezier(.3,1.4,.5,1) infinite; }
.piece.p1 { fill: var(--teal-bright); }
.piece.p2 { fill: var(--cream); }
.piece.p3 { fill: var(--gold); }
.piece.p4 { fill: oklch(0.55 0.06 260); }
@keyframes drop { 0% { transform: translateY(-140px); opacity: 0; } 8% { opacity: 1; } 22%,85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.scene-paused * { animation-play-state: paused !important; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap, .prog-grid, .phero .wrap, .closer-page { grid-template-columns: 1fr; }
  .prog-grid.flip .prog-copy { order: 0; }
  .prog-side { position: static; }
  nav.links { display: none; }
  .logo { margin-right: auto; }
}
@media (max-width: 720px) {
  .block.story, .fit, .full-foot { grid-template-columns: 1fr; }
  .bonus .wrap { grid-template-columns: 1fr; }
  .bonus .gift { width: 46px; height: 46px; }
  .countdown .d { width: 26px; height: 38px; font-size: 21px; }
  .countdown .sep { line-height: 38px; font-size: 20px; }
  .price .now { font-size: 34px; }
  details.full > summary { padding: 16px 18px; }
  details.full > summary .t { font-size: 18px; }
  .inside .item { grid-template-columns: 54px 1fr; }
  .logo .bf { display: none; }
}

/* ---------- reduced motion: every scene rests on a finished frame ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .fillbar { transform: scaleX(1); } .water { transform: scaleY(1); } .gauge { stroke-dashoffset: 170; stroke: var(--up); }
  .blk, .piece { transform: none; opacity: 1; }
  .snowflake, .bonus .gift { animation: none; }
}

/* ---------- self-paced courses (summary row + "See everything") ---------- */
.courses { display: grid; gap: 20px; }
.course { background: var(--paper); border-radius: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--teal-wash); overflow: hidden; scroll-margin-top: 80px; }
.course-top { display: grid; grid-template-columns: 1fr 280px; gap: clamp(20px, 4vw, 40px); padding: clamp(20px, 3vw, 32px); align-items: start; }
.course-copy { display: grid; gap: 12px; }
.course-copy .eyebrow { margin: 0; font-size: 12px; letter-spacing: .16em; }
.course-copy h2, .course-copy h3 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; }
.course-copy p { color: var(--ink-2); }
.course-copy .note { font-size: 14.5px; font-weight: 600; color: var(--teal-deep); }
.course-buy { display: grid; gap: 12px; background: linear-gradient(165deg, var(--cream), var(--paper)); border-radius: var(--r); padding: 20px; }
.course-buy .ico { width: 40px; height: 40px; color: var(--teal-deep); }
.course-buy .ico-a { fill: var(--teal); }
.course-buy .ico-b { fill: var(--gold); }
.course:hover .ico { animation: wiggle .6s ease; }
.course-buy .price .now { font-size: 34px; }
details.full.small { margin: 0; border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--rule); background: var(--paper-2); }
details.full.small > summary { padding: 16px clamp(20px, 3vw, 32px); }
details.full.small > summary .t { font-size: 17px; }
details.full.small[open] { background: var(--paper); }
.ticks.cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hat { transform-box: fill-box; }
@media (max-width: 760px) {
  .course-top { grid-template-columns: 1fr; }
}

/* ---------- product identity: logo / wordmark, offer name above the price ---------- */
.prog-brand { display: flex; align-items: center; min-height: 64px; }
.plogo { width: auto; height: clamp(64px, 8vw, 96px); max-width: min(100%, 420px); object-fit: contain; object-position: left center; }
.prog-brand.small .plogo { height: clamp(48px, 6vw, 64px); max-width: min(100%, 300px); }
.wordmark { display: inline-block; font: 800 clamp(30px, 4vw, 44px)/1 var(--display); letter-spacing: -.02em; color: var(--teal-deep);
  padding: 10px 16px; border: 3px solid var(--teal-deep); border-radius: 14px; background: var(--paper); }
.prog-brand.small .wordmark { font-size: clamp(22px, 2.6vw, 28px); padding: 8px 12px; border-width: 2px; }
.offer-name { font: 800 18px/1.25 var(--display); color: var(--ink); padding-bottom: 10px; border-bottom: 1px dashed var(--rule); }
.course-buy .offer-name { font-size: 16px; }

/* "What's on sale": a logo tile per program */
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 22px; }
.lineup .tile { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--teal-wash);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform .15s ease, border-color .15s ease; }
.lineup .tile:hover { transform: translateY(-3px); border-color: var(--teal); }
.lineup .tile-logo.plogo { height: 54px; max-width: 100%; }
.lineup .tile-logo.wordmark { font-size: 22px; padding: 8px 12px; border-width: 2px; justify-self: start; }
.lineup .tile-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.lineup .tile-price b { font: 800 20px/1 var(--display); }
.lineup .tile-price span { color: var(--muted); font-weight: 600; font-size: 13px; }
.lineup .tile-price s { color: var(--muted); font-size: 13px; }
.lineup .vault-tile { background: var(--cream); }
@media (max-width: 520px) { .lineup { grid-template-columns: 1fr 1fr; } .lineup .tile-logo.plogo { height: 40px; } .lineup .tile-logo.wordmark { font-size: 17px; } }

/* Type-set logos, rebuilt from each product's own sales page. Sized in em, so the
   context sets the size: big in a section header, small in a lineup tile. */
.lockup { display: inline-flex; align-items: center; font-size: clamp(30px, 4vw, 44px); line-height: 1; }
.prog-brand.small .lockup { font-size: 28px; }
.lineup .lockup { font-size: 22px; justify-self: start; }
.lockup-suitup { flex-direction: column; align-items: flex-start; gap: .18em; padding: .32em .5em .36em; border-radius: .3em; background: oklch(0.18 0.020 195); }
.lockup-suitup .su-main { font-family: "Newsreader", serif; font-weight: 700; letter-spacing: -.04em; color: oklch(0.99 0.003 195); font-size: 1.25em; line-height: .92; }
.lockup-suitup .su-main i { font-style: italic; background: linear-gradient(135deg, oklch(0.86 0.14 95), oklch(0.66 0.105 192)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.lockup-suitup .su-sub { font: 700 .3em/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: oklch(0.86 0.14 95); }
.lockup-ballin { gap: .25em; font-family: "Fraunces", serif; font-weight: 700; color: oklch(0.30 0.035 350); letter-spacing: -.01em; }
.lockup-ballin img { height: 2em; width: auto; }
.lockup-ballin b { color: oklch(0.54 0.14 158); }

/* highlighted words on the dark band: dark text on the yellow, so it stays readable */
.sec-ink h2 em { color: var(--ink); }

/* Bigger logos on phones (Carey, 2026-11-11) */
@media (max-width: 720px) {
  .prog-brand { min-height: 0; }
  .plogo { height: auto; width: 100%; max-width: 360px; max-height: 120px; }
  .prog-brand.small .plogo { width: 88%; max-width: 320px; max-height: 100px; }
  .lockup { font-size: 46px; }
  .prog-brand.small .lockup { font-size: 34px; }
  .wordmark { font-size: 34px; }
  .lineup { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lineup .tile { padding: 12px; }
  .lineup .tile-logo.plogo { width: 100%; height: auto; max-height: 70px; }
  .lineup .lockup { font-size: 24px; }
  .lineup .tile-name { font-size: 13px; }
}

/* All Sides Solved bonus explainer */
.bonus.asb { padding: clamp(36px, 6vw, 64px) 0; }
.bonus.asb .wrap { display: grid; gap: 24px; grid-template-columns: 1fr; }
.asb-head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.asb-head .eyebrow { color: var(--ink); margin: 0; }
.asb-sub { font: 700 18px/1.4 var(--body); color: var(--ink); }
.asb-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: start; }
.asb-what { display: grid; gap: 16px; }
.asb-what > p { color: var(--ink); font-size: 16.5px; line-height: 1.6; max-width: none; }
.asb-facts { list-style: none; margin: 0; padding: 16px 18px; display: grid; gap: 8px; background: oklch(1 0 0 / .55); border-radius: 16px; }
.asb-facts b { display: inline-block; min-width: 64px; font: 700 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.asb-days { display: grid; gap: 12px; }
.asb-day, .asb-take { background: var(--paper); border-radius: 16px; padding: 16px 18px; display: grid; gap: 6px; }
.asb-n { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.asb-day p { color: var(--ink-2); font-size: 15px; }
.asb-take .ticks { font-size: 15px; gap: 8px; margin-top: 4px; }
@media (max-width: 760px) { .asb-grid, .asb-head { grid-template-columns: 1fr; } }
.asb-was { color: var(--muted); font-weight: 600; }
.asb-yours { font-weight: 800; color: var(--ink); background: var(--hl); padding: 1px 8px; border-radius: 6px; }

/* Bag on phones: one scrolling sheet (items, add-on, totals, form) instead of a squeezed item box
   above a half-screen form. dvh keeps it inside the browser's toolbars. */
.drawer { height: 100vh; height: 100dvh; }
@media (max-width: 720px) {
  .drawer { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .dhead { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 12px 16px; }
  .dhead h2 { font-size: 22px; }
  .dbody { overflow: visible; padding: 14px 16px 4px; }
  .dfoot { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  .lines li { padding: 10px 12px; grid-template-columns: 1fr auto auto; gap: 8px; }
  .lines .nm { font-size: 15px; }
  .lines .pr { font-size: 15px; }
  .bump { font-size: 14px; padding: 12px; }
  .totals .grand { font-size: 20px; }
}

/* Sticky section menu on phones and tablets: lives inside the sticky header, scrolls sideways */
.subnav { display: none; }
@media (max-width: 960px) {
  .subnav { display: block; border-top: 1px solid var(--rule); }
  .subnav-in { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subnav-in::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; padding: 7px 13px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink); font: 600 14px/1.2 var(--body); text-decoration: none; }
  .subnav a.on { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }
  header.site .wrap { min-height: 56px; }
  .prog, .group-head, #faq, .course { scroll-margin-top: 112px; }
}

/* form fields must shrink to their column (inputs have a wide built-in minimum) */
form.who label { min-width: 0; }
form.who input { width: 100%; min-width: 0; }
.dfoot, .dbody { min-width: 0; }