/* Chimney Drop product page
   Mobile first, judged at 390 px. All text centered and inside a card.
   Three themes share ONE structure: [data-theme="a|b|c"] only swaps tokens (colors, fonts, radii, textures).
   b = Evergreen and walnut (the chosen design), a = Hearth, c = Snow day. */

/* ---------------------------------------------------------------- tokens */
/* self-hosted static faces for theme b (page.js loads no Google stylesheet for b) */
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/big-800.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/big-900.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/fig-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/fig-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/fig-800.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/fig-900.woff2") format("woff2"); }

/* theme b, iPhone overhaul (2026-11-05): evergreen ground, cream paper cards with deep walnut ink,
   walnut bands for price and dates, Santa red only on the buy button. Every text pair is AA or better */
:root,
:root[data-theme="b"] {
  --bg: #0E2B22;
  --bg-img:
    radial-gradient(80% 26% at 85% 1%, rgba(242, 196, 106, .16) 0%, rgba(242, 196, 106, 0) 70%),
    radial-gradient(90% 20% at 10% 38%, rgba(203, 50, 38, .12) 0%, rgba(203, 50, 38, 0) 70%),
    linear-gradient(180deg, #0B241C 0, #0E2B22 900px, #123628 2600px, #15402F 100%);
  --bg-size: 100% 100%;
  --card-bg: linear-gradient(180deg, #FFFCF6 0%, #FBF3E6 100%);
  --card-solid: #FFFAF2;
  --card-line: #E3CFAF;
  --card-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55), inset 0 1px 0 #FFFFFF;
  --ink: #24160F;
  --ink-2: #5C4535;
  --accent: #1F5A3A;
  --accent-2: #C9963A;
  --accent-ink: #FFF8EC;
  --gold: #E3A92B;
  --tint: #EEF4EC;
  --tint-line: #CFE0D2;
  --cta-bg: linear-gradient(180deg, #DE4433 0%, #C22F23 52%, #9C2119 100%);
  --cta-line: #8E1C15;
  --cta-ink: #FFF8EC;
  --cta-shadow: 0 12px 22px -8px rgba(110, 18, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
  --band-bg:
    repeating-linear-gradient(176deg, rgba(255, 220, 170, 0) 0 9px, rgba(255, 220, 170, .05) 9px 11px, rgba(40, 18, 6, 0) 11px 23px, rgba(40, 18, 6, .09) 23px 24px),
    linear-gradient(180deg, #8A5230 0%, #6E3E22 55%, #55301A 100%);
  --band-line: #4A2915;
  --band-ink: #FFF5E2;
  --band-ink-2: #F7E3C4;
  --art-bg: radial-gradient(60% 70% at 50% 40%, rgba(242, 196, 106, .25) 0%, rgba(242, 196, 106, 0) 70%), linear-gradient(180deg, #F6EBD9 0%, #EADBC2 100%);
  --frame-bg: transparent;
  --frame-pad: 0px;
  --r-card: 24px;
  --r-media: 18px;
  --r-pic: 16px;
  --display: "Big Shoulders Display", "Figtree", system-ui, sans-serif;
  --display-w: 900;
  --display-vs: normal;
  --display-lh: .98;
  --display-track: .005em;
  --h1: 40px;
  --h2: 38px;
  --h3: 30px;
  --big: 32px;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --focus: #1F5A3A;
  --flake: rgba(255, 245, 226, .6);
  --shelf: #8A5230;
  --dash: #C9963A;
  --wire: #2E4A3C;
  --sheet-dark: #0B241C;
}

:root[data-theme="a"] {
  --bg: #7A1813;
  --bg-img:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cpath d='M0 .5h56M0 14.5h56M.5 0v14M28.5 14v14' stroke='%23FFE6CC' stroke-opacity='.075' fill='none'/%3E%3C/svg%3E"),
    radial-gradient(120% 40% at 50% 0%, #A52A20 0%, rgba(165, 42, 32, 0) 70%),
    linear-gradient(180deg, #7A1813 0%, #94221A 48%, #5E120F 100%);
  --bg-size: 56px 28px, 100% 100%, 100% 100%;
  --card-bg: linear-gradient(180deg, #FFFBF3 0%, #FFF7E9 100%);
  --card-line: #E8CFA6;
  --card-shadow: 0 14px 30px rgba(30, 4, 2, .35);
  --ink: #3E120D;
  --ink-2: #6E3A2C;
  --accent: #1F6340;
  --accent-2: #154B30;
  --accent-ink: #FFF8EC;
  --cta-bg: linear-gradient(180deg, #2E7F53 0%, #1F6340 55%, #154B30 100%);
  --cta-line: #154B30;
  --cta-ink: #FFF8EC;
  --cta-shadow: 0 10px 22px rgba(10, 30, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  --band-bg: linear-gradient(180deg, rgba(40, 6, 4, .34), rgba(40, 6, 4, .22));
  --band-line: rgba(255, 230, 204, .35);
  --band-ink: #FFF7E9;
  --band-ink-2: #F3D9B8;
  --art-bg: radial-gradient(60% 70% at 50% 40%, #FFF3DD 0%, rgba(255, 243, 221, 0) 70%), linear-gradient(180deg, #FBEBD0 0%, #F1D7AE 100%);
  --frame-bg: #F4E3C6;
  --frame-pad: 6px;
  --r-card: 26px;
  --r-media: 200px 200px 20px 20px;
  --r-pic: 16px;
  --display: "Fraunces", Georgia, serif;
  --display-w: 900;
  --display-vs: "SOFT" 100, "opsz" 96;
  --display-lh: 1.04;
  --display-track: -.02em;
  --h1: 31px;
  --h2: 30px;
  --h3: 24px;
  --big: 26px;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --focus: #F2B33D;
  --flake: rgba(255, 240, 225, .5);
  --shelf: #8A5230;
  --dash: #C9963A;
  --wire: #5E120F;
  --sheet-dark: #5E120F;
}

:root[data-theme="c"] {
  --bg: #EAF2F9;
  --bg-img:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0 1.6px, rgba(255, 255, 255, 0) 2.2px),
    radial-gradient(circle at 50% 50%, rgba(160, 190, 220, .45) 0 1.2px, rgba(160, 190, 220, 0) 1.8px),
    linear-gradient(180deg, #FFFFFF 0%, #EAF2F9 45%, #DCE9F4 100%);
  --bg-size: 34px 34px, 52px 52px, 100% 100%;
  --card-bg: #FFFFFF;
  --card-line: #D6E5F1;
  --card-shadow: 0 14px 30px rgba(40, 70, 110, .14);
  --ink: #15284A;
  --ink-2: #4A5E7D;
  --accent: #D9262F;
  --accent-2: #A9161F;
  --accent-ink: #FFFFFF;
  --cta-bg: linear-gradient(180deg, #EA3C43 0%, #D9262F 50%, #A9161F 100%);
  --cta-line: #A9161F;
  --cta-ink: #FFFFFF;
  --cta-shadow: 0 10px 22px rgba(169, 22, 31, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  --band-bg: #FFFFFF;
  --band-line: #D6E5F1;
  --band-ink: #15284A;
  --band-ink-2: #4A5E7D;
  --art-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 1.5px, rgba(255, 255, 255, 0) 2.1px) 0 0 / 22px 22px, linear-gradient(180deg, #DDEBF6 0%, #C9DCEC 100%);
  --frame-bg: repeating-linear-gradient(-45deg, #D9262F 0 11px, #FFFFFF 11px 22px);
  --frame-pad: 7px;
  --r-card: 28px;
  --r-media: 27px;
  --r-pic: 18px;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --display-w: 700;
  --display-vs: normal;
  --display-lh: 1.06;
  --display-track: -.01em;
  --h1: 31px;
  --h2: 30px;
  --h3: 24px;
  --big: 26px;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --focus: #2F7FD1;
  --flake: rgba(150, 182, 214, .8);
  --shelf: #C7DAEA;
  --dash: #D9262F;
  --wire: #9FB6CC;
  --sheet-dark: #15284A;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background-color: var(--bg); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--body); font-weight: 600; font-size: 17px; line-height: 1.4;
  color: var(--ink); text-align: center;
  background-color: var(--bg); background-image: var(--bg-img); background-size: var(--bg-size);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ico { width: 20px; height: 20px; flex: none; }

/* dated lines: page.js sets [hidden] on [data-until] lines after their date (US Eastern) */
.past-2026-11-17 [data-until="2026-11-17"] { display: none !important; }
/* selling phases: page.js puts phase-<id> on <html> before first paint; anything tagged for other phases stays out */
.phase-dec1 [data-phase]:not([data-phase~="dec1"]),
.phase-dec1Prio [data-phase]:not([data-phase~="dec1Prio"]),
.phase-xmas [data-phase]:not([data-phase~="xmas"]),
.phase-xmasPrio [data-phase]:not([data-phase~="xmasPrio"]),
.phase-closed [data-phase]:not([data-phase~="closed"]) { display: none !important; }

.page { position: relative; z-index: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px; }
.screen { position: relative; }
.screen > * + * { margin-top: 14px; }

.card {
  position: relative; display: block; width: 100%;
  padding: 22px 18px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-line);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  color: var(--ink);
}

h1, h2, h3, .big, .pain-a, .offer-name, .foot-name, blockquote p, .yours, .wordmark {
  font-family: var(--display); font-weight: var(--display-w);
  font-variation-settings: var(--display-vs);
  line-height: var(--display-lh); letter-spacing: var(--display-track);
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { text-wrap: balance; }

.head-card { padding: 22px 18px 20px; }
.head-card p { margin-top: 10px; font-size: 17px; font-weight: 700; color: var(--ink-2); line-height: 1.35; }

/* ---------------------------------------------------------------- buttons */
.btn-buy {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 60px; padding: 0 18px;
  border: 2px solid var(--cta-line); border-radius: 999px;
  background: var(--cta-bg); color: var(--cta-ink);
  font-family: var(--body); font-weight: 800; font-size: 20px; letter-spacing: -.005em;
  box-shadow: var(--cta-shadow);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease;
}
.btn-buy:hover { filter: brightness(1.06) saturate(1.05); }
.btn-buy:active { transform: scale(.965); transition-duration: .08s; }
.btn-xl { min-height: 68px; font-size: 22px; }
.btn-ghost {
  min-height: 46px; padding: 0 26px; border-radius: 999px;
  border: 2px solid var(--card-line); background: transparent; color: var(--ink);
  font-weight: 800; font-size: 16px;
}
.btn-ghost:active { transform: scale(.96); }

.price-line { margin-top: 10px; font-size: 19px; font-weight: 800; color: var(--ink); }
.price-line span, .bb-from span { font-variant-numeric: tabular-nums; }
.date-line { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--ink-2); text-wrap: balance; }
.date-line .ico { display: inline-block; vertical-align: -4px; margin-right: 6px; color: var(--accent); }
[data-price]:empty::before { content: "$"; opacity: 0; }

/* ---------------------------------------------------------------- snow and lights */
.snow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.flake {
  position: absolute; top: -12px; border-radius: 50%; background: var(--flake);
  animation: fall linear infinite;
}
@keyframes fall {
  from { transform: translate3d(0, -20px, 0); }
  to { transform: translate3d(var(--drift, 10px), 105vh, 0); }
}

.lights { position: relative; z-index: 1; height: 44px; margin: 30px auto 26px; max-width: 480px; }
.lights svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lights .wire { fill: none; stroke: var(--wire); stroke-width: 2; }
.lights .bulb { animation: twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------------------------------------------------------- reveal */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- screen 1: hero */
.s-hero { padding-top: 10px; }
.brand { display: flex; justify-content: center; }
.wordmark {
  display: inline-block; padding: 7px 20px 8px;
  font-size: 22px; letter-spacing: .01em;
  color: var(--ink); background: var(--card-bg);
  border: 1.5px solid var(--card-line); border-radius: 999px; box-shadow: var(--card-shadow);
}
.screen > .brand + * { margin-top: 10px; }
.media-card { padding: 8px 8px 0; overflow: hidden; }
.frame {
  position: relative; overflow: hidden;
  padding: var(--frame-pad); background: var(--frame-bg);
  border-radius: var(--r-media);
}
.frame video { width: 100%; object-fit: cover; border-radius: calc(var(--r-media) - var(--frame-pad)); background: #0B241C; }
:root[data-theme="a"] .frame video { border-radius: 194px 194px 14px 14px; }
.hero-video { object-position: 50% 50%; } /* height: one rule, see "round 1 of v2" at the end */
.cap { padding: 10px 8px 12px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.title-card { padding: 18px 16px 16px; }
.title-card .lead { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.32; color: var(--ink-2); }
.title-card .btn-buy { margin-top: 14px; }


/* ---------------------------------------------------------------- screen 2: how it works */
.shots { display: grid; gap: 14px; }
.photo-card { padding: 8px; }
.photo-card img { width: 100%; height: auto; border-radius: var(--r-pic); }
.shots .photo-card img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.day25 { padding: 18px 18px 22px; overflow: hidden; }
.day25-pic {
  position: relative; width: 190px; margin: 0 auto 16px;
  border-radius: 20px; padding: 4px; background: var(--accent);
  animation: glow 2.8s ease-in-out infinite;
}
.day25-pic img { width: 100%; height: auto; border-radius: 16px; }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 196, 106, .0), 0 10px 26px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 10px rgba(242, 196, 106, .18), 0 10px 26px rgba(0, 0, 0, .35); }
}
.big { font-size: var(--big); }

/* ---------------------------------------------------------------- screen 2b: maker */
.maker-media { padding: 8px; }
.maker-video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.play {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 0; border: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .25) 100%);
  border-radius: var(--r-media);
}
.play-ring {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.play-ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--accent); animation: ring 2.2s ease-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.play-ring svg { width: 32px; height: 32px; margin-left: 5px; }
.play:active .play-ring { transform: scale(.92); }
.maker-text { padding: 18px 10px 14px; }
.maker-text h2 { font-size: var(--h3); }
.maker-text p { margin-top: 10px; font-size: 17px; font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------------- screen 3: pains */
.pains { display: grid; gap: 22px; }
.pain { padding: 10px 10px 22px; }
.pain-art { height: 178px; border-radius: 20px; overflow: hidden; background: var(--art-bg); }
.pain-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 50%); }
.shelf { fill: var(--shelf); }
.pain-q { margin: 18px 8px 0; font-size: 16px; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.pain-a { margin: 8px 6px 0; font-size: var(--h3); }

/* ---------------------------------------------------------------- screen 4: homes and reviews */
.s-homes { padding-top: 0; }
.homes { display: grid; gap: 12px; }
.review { padding: 8px 8px 16px; }
.review-pic {
  display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: var(--r-pic);
  background: rgba(0, 0, 0, .22); overflow: hidden; cursor: zoom-in;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.review-pic:active { transform: scale(.97); }
.review-pic img { width: auto; height: auto; max-width: 100%; border-radius: var(--r-pic); }
.review-big .review-pic img { max-height: 62svh; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.home-grid .review-pic { aspect-ratio: 3 / 4; }
.home-grid .review-pic img { max-height: 100%; }
.stars { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.star-row { display: flex; gap: 2px; width: max-content; color: var(--ink-2); }
.star-row svg { width: 18px; height: 18px; }
.home-grid .star-row svg { width: 14px; height: 14px; }
.review-text { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.review-who { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.home-grid .review-text { font-size: 14.5px; }
.cta-card { padding: 18px 18px 16px; }

/* placeholders (content the owner will send): visibly unfinished on purpose */
.ph { display: inline-block; padding: 1px 8px; border-radius: 6px; border: 1.5px dashed currentColor; font-family: var(--body); font-weight: 800; font-size: .8em; letter-spacing: .04em; opacity: .75; }
[data-placeholder] .ph { vertical-align: middle; }
.ph-photo { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--r-pic); border: 2px dashed var(--card-line); background: var(--art-bg); color: var(--ink-2); font-size: 28px; }
.cap-card { padding: 16px 18px; }
.cap-line { font-size: 16px; font-weight: 800; }
.cap-left { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--accent); }

/* ---------------------------------------------------------------- screen 5: every year */
.quote-card { padding: 26px 22px 22px; margin-top: 30px !important; }
.quote-mark { width: 46px; height: 34px; margin: 0 auto 14px; color: var(--accent); }
blockquote p { font-size: 27px; line-height: 1.12; }
cite { display: block; margin-top: 16px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------------- screen 6: configurator */
.offer-card { padding: 18px 18px 18px; }
.offer-name { font-size: 25px; }
.offer-when { margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--accent); }
.offer-price { display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 800; }
.cfg-mount { margin-left: -16px !important; margin-right: -16px !important; }
.reset-card { padding: 14px; }

/* the configurator bar only while the configurator is on screen; the page bar the rest of the time */
.cd-bar { transition: transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s; }
html:not(.in-build) .cd-bar { transform: translateY(120%); visibility: hidden; }
html:not(.in-build) .cd-mini { visibility: hidden; opacity: 0 !important; }

/* one bar look: both bars are the same solid cream card with deep ink (iPhone overhaul 2026-11-05).
   The configurator reads these: --cd-bar-bg, --cd-bar-line, --cd-bar-ink, --cd-bar-muted */
.cd-config { --cd-bar-bg: #FFFAF2; --cd-bar-line: #E3CFAF; --cd-bar-ink: #24160F; --cd-bar-muted: #1F5A3A; }
.cd-config .cd-bar-note { color: #5C4535; }
.cd-config .cd-buy { background: var(--cta-bg); border: 2px solid var(--cta-line); color: var(--cta-ink); border-radius: 999px; font-family: var(--body); font-size: 17px; padding: 0 10px; line-height: 1.1; }

/* theme the configurator through its own variables (its files are not edited) */
.cd-config { --cd-font: var(--body); }
:root[data-theme="a"] .cd-config {
  --cd-pine-950: #3A0907; --cd-pine-900: #5E120F; --cd-pine-800: #7A1813; --cd-pine-700: #94221A; --cd-pine-600: #A52A20;
  --cd-candy: #1F6340; --cd-candy-2: #154B30; --cd-gold: #F2B33D;
  background: radial-gradient(120% 50% at 50% 0%, rgba(165, 42, 32, .9) 0%, rgba(165, 42, 32, 0) 70%), linear-gradient(180deg, #7A1813 0%, #5E120F 45%, #3A0907 100%);
}
:root[data-theme="c"] .cd-config {
  --cd-pine-950: #0E1B33; --cd-pine-900: #15284A; --cd-pine-800: #1D3560; --cd-pine-700: #284676; --cd-pine-600: #36598F;
  --cd-candy: #D9262F; --cd-candy-2: #A9161F;
  background: radial-gradient(120% 50% at 50% 0%, rgba(54, 89, 143, .9) 0%, rgba(54, 89, 143, 0) 70%), linear-gradient(180deg, #1D3560 0%, #15284A 45%, #0E1B33 100%);
}

/* ---------------------------------------------------------------- screen 6b: the stack */
.s-box { padding-top: 56px; }
.stack-card { padding: 24px 18px 22px; border: 2.5px dashed var(--dash); }
.stack { margin-top: 18px; display: grid; gap: 4px; }
.stack li { padding: 12px 6px; }
.stack li + li { border-top: 1.5px solid var(--card-line); }
.row { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.row .name { font-size: 18px; font-weight: 800; }
.row .val { padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stack .note { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.stack-total { margin-top: 14px; padding: 16px 12px; border-radius: 20px; background: var(--band-bg); color: var(--band-ink); }
.worth { font-size: 16px; font-weight: 800; color: var(--band-ink-2); }
.yours { margin-top: 4px; font-size: 34px; }

/* ---------------------------------------------------------------- screen 6c: promises */
.s-promise { padding-top: 22px; }
.promises { display: grid; gap: 14px; }
.promise { padding: 20px 18px 22px; }
.promise-art { width: 120px; height: 90px; margin: 0 auto 10px; color: var(--accent); overflow: visible; }
.promise h3 { font-size: var(--h3); }
.promise-when { margin-top: 10px; font-size: 17px; font-weight: 800; line-height: 1.32; }
.promise-back { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.twinkle { animation: twinkle 2s ease-in-out infinite; }
.tab-pull { animation: pull 3s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes pull { 0%, 20% { transform: none; } 45%, 80% { transform: translateX(10px); } 100% { transform: none; } }
.candy-drop { animation: candy 3s ease-in infinite; }
@keyframes candy { 0%, 35% { transform: translateY(-14px); opacity: 0; } 50% { opacity: 1; } 62%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- screens 7 and 8: accordions */
.acc-card { padding: 6px 14px; }
.acc + .acc { border-top: 1.5px solid var(--card-line); }
.acc summary {
  display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 6px;
  min-height: 60px; padding: 10px 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 800; line-height: 1.25;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary span { grid-column: 2; }
.acc .chev { grid-column: 3; width: 22px; height: 22px; color: var(--accent); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.acc[open] .chev { transform: rotate(180deg); }
.acc-body { padding: 0 8px 18px; }
.acc-body p { font-size: 16px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.acc-body p + p { margin-top: 6px; }
.acc[open] .acc-body { animation: open .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.s-details { padding-top: 0; }
.s-faq { padding-top: 56px; }
.s-faq .head-card { padding: 20px 18px; }

/* ---------------------------------------------------------------- screen 9: close */
.close-pic img { max-height: 76svh; width: auto; margin: 0 auto; }
.close-card h2 { font-size: min(var(--h2), 9.3vw); }
.close-card .btn-buy { margin-top: 18px; }

/* ---------------------------------------------------------------- screen 10: footer */
.foot { margin-top: 48px; padding-bottom: 130px; }
.foot-card { padding: 22px 18px; }
.foot-name { font-size: 26px; }
.foot-sub { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 16px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink); font-size: 15px; font-weight: 700; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.foot-copy { margin-top: 10px; font-size: 13px; color: var(--ink-2); }

/* ---------------------------------------------------------------- page sticky bar */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 45%);
  pointer-events: none;
  transform: translateY(120%); visibility: hidden;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s;
}
.show-bar .buybar { transform: none; visibility: visible; }
.cdp-open .buybar { visibility: hidden; }
.buybar-in {
  pointer-events: auto; max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(104px, auto) 1fr; gap: 10px; align-items: center;
  padding: 8px; border-radius: 24px;
  background: var(--card-bg); border: 1.5px solid var(--card-line);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
}
.buybar .btn-buy { min-height: 58px; font-size: 18px; }
.bb-from { font-size: 21px; font-weight: 900; line-height: 1.05; }
.bb-ship { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------------- lightbox */
.zoom {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; overflow: auto;
}
.zoom::backdrop { background: rgba(5, 12, 9, .92); }
.zoom[open] { display: grid; place-items: center; }
.zoom img { max-width: 94vw; max-height: 88dvh; width: auto; height: auto; border-radius: 14px; }
.zoom-close {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 2;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .55); color: #fff;
}
.zoom-close svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- policy overlay */
.policy { width: min(92vw, 460px); max-height: 86dvh; padding: 0; border: 0; background: transparent; overflow: visible; }
.policy::backdrop { background: rgba(5, 12, 9, .8); }
.policy-card { padding: 54px 20px 26px; max-height: 86dvh; overflow-y: auto; }
.policy-card h2 { font-size: var(--h3); }
.policy-body { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.policy-body p { margin-top: 10px; line-height: 1.45; }
.policy-body a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.policy-close { position: absolute; top: 8px; right: 8px; }

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 880px) {
  .page { max-width: 520px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
  .js .reveal { transform: none; transition: opacity .3s linear; }
  *, *::before, *::after { animation: none !important; }
  .btn-buy, .home, .strip-pic, .play-ring { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------- proof placeholders: rating, families, breakdown, video */
.rating-sum { color: inherit; text-decoration: none; min-height: 44px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; font-size: 15px; font-weight: 800; }
.rs-count { color: var(--ink-2); }
.families { margin-top: 4px; font-size: 14.5px; font-weight: 800; color: var(--accent); }
.breakdown { padding: 20px 18px; }
.bd-avg { font-family: var(--display); font-weight: var(--display-w); font-size: 44px; line-height: 1; }
.bd-stars { display: flex; justify-content: center; margin-top: 8px; }
.bd-stars .star-row svg { width: 22px; height: 22px; }
.bd-total { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.bd-list { display: grid; gap: 8px; margin-top: 16px; }
.bd-list li { display: grid; grid-template-columns: 14px 16px 1fr auto; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.bd-star { width: 15px; height: 15px; color: var(--accent); opacity: .5; }
.bd-bar { height: 10px; border-radius: 99px; background: rgba(127, 127, 127, .25); overflow: hidden; }
.bd-fill { display: block; width: 0; height: 100%; background: var(--accent); }
.bd-list .ph { font-size: 11px; }
.review-text-only { padding: 20px 18px; }
.review-text-only .stars { margin-top: 0; }
.ph-video { display: grid; place-items: center; align-content: center; gap: 12px; aspect-ratio: 9 / 12; border-radius: calc(var(--r-media) - var(--frame-pad)); background: var(--art-bg); color: var(--ink-2); font-size: 26px; border: 2px dashed var(--card-line); }
.ph-play { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); opacity: .6; }
.ph-play svg { width: 28px; height: 28px; margin-left: 4px; }

/* ---------------------------------------------------------------- round 1 of the experts */
/* stars fill to the real rating (data-rating, set by page.js); grey until there is one */
.stars-fill { position: relative; display: inline-flex; }
.stars-fill > .star-row { opacity: .35; }
.stars-on { position: absolute; top: 0; left: 0; bottom: 0; width: var(--fill, 0%); overflow: hidden; }
.stars-on .star-row { color: var(--accent); opacity: 1; }
.rating-sum .star-row svg { width: 17px; height: 17px; }
.rating-sum { margin-top: 6px; border-radius: 12px; }
.title-card .lead + .rating-sum + .btn-buy { margin-top: 8px; }
.maker-who { margin-top: 10px; font-size: 15px; font-weight: 800; color: var(--accent); }
.maker-count { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.maker-text .maker-count + p { margin-top: 12px; }
.bd-list li { display: block; }
.bd-row {
  display: grid; grid-template-columns: 14px 16px 1fr auto; align-items: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 4px 8px; border: 1.5px solid transparent; border-radius: 12px;
  background: transparent; font-size: 14px; font-weight: 800;
}
.bd-row:hover { border-color: var(--card-line); }
.bd-row[aria-pressed="true"] { border-color: var(--accent); background: rgba(242, 196, 106, .12); }
.bd-list { gap: 8px; }
.bd-all { margin-top: 12px; }
.review[hidden] { display: none !important; }

/* ---------------------------------------------------------------- selling phases */
.phase-lines { margin-top: 12px; padding: 12px 12px; border-radius: 18px; background: var(--band-bg); border: 1.5px solid var(--band-line); color: var(--band-ink); }
.pl-line { font-size: 16px; font-weight: 800; line-height: 1.3; }
.pl-sub { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.phase-lines .pl-sub { color: var(--band-ink-2); }
.closed-box { margin-top: 14px; }
.closed-box > .pl-line { font-family: var(--display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); font-size: var(--h3); line-height: var(--display-lh); }
.closed-box > .pl-sub { margin-top: 8px; font-size: 16px; }
.waitlist { display: grid; gap: 10px; margin-top: 16px; }
.waitlist label { font-size: 15px; font-weight: 800; }
.waitlist input {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 16px; text-align: center;
  border: 2px solid var(--card-line); background: rgba(255, 255, 255, .96); color: #1B1B1B;
  font: 700 17px/1.2 var(--body);
}
.waitlist input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.waitlist input[aria-invalid="true"] { border-color: #E24A39; }
.waitlist .btn-buy:disabled { filter: saturate(.5) brightness(.9); cursor: default; }
.wl-msg { font-size: 15px; font-weight: 800; }
/* closed: browse the configurator, never order from it */
.phase-closed .cd-buy, .phase-closed .cd-bar, .phase-closed .cd-mini, .phase-closed .cd-extras, .phase-closed .cd-order { display: none !important; }

/* the ship line stays on the 390 first screen in every phase: the longer phase lines take height from the hero clip */
.phase-xmasPrio .s-hero .phase-lines { margin-top: 8px; padding: 8px 10px; }
.phase-xmasPrio .s-hero .pl-line { font-size: 15px; line-height: 1.25; }
.phase-xmasPrio .s-hero .pl-sub { margin-top: 3px; font-size: 13px; line-height: 1.3; }

.phase-xmasPrio .yours { font-size: 27px; }

/* ---------------------------------------------------------------- audit 3 */
/* configurator stays centred: its own overflow clip must not cancel the page's full-bleed margins */
.cfg-mount.cd-config { max-width: none; }
/* order bar lines on the page's surface: readable colours the configurator can take (or override) */
.cd-config { --page-bar-ink: #24160F; --page-bar-ink-2: #5C4535; --page-bar-accent: #1F5A3A; --page-bar-bg: #FFFAF2; }
.cd-config .cd-bar-promise { color: var(--page-bar-ink-2); }
.cd-config .cd-bar-save { color: var(--page-bar-accent); }
/* closed: the head line asks for a button that is not there, and the waitlist comes up to the first screen */
.phase-closed .title-card .lead, .phase-closed .title-card .rating-sum { display: none; }
/* short phones (375x667): button, price and ship line on the first screen in every phase */
@media (max-height: 700px) {
  .phase-closed .s-hero .hero-media { padding-bottom: 8px; }
  :root[data-theme="b"] { --h1: 34px; }
  .s-hero { padding-top: 6px; }
  .screen > .brand + * { margin-top: 6px; }
  .s-hero .cap { padding: 7px 8px 8px; }
  .title-card { padding: 12px 14px 12px; }
  .title-card .lead { margin-top: 4px; }
  .rating-sum { min-height: 44px; margin-top: 2px; }
  .title-card .lead + .rating-sum + .btn-buy { margin-top: 4px; }
  .title-card .btn-buy { min-height: 54px; }
  .s-hero .price-line { margin-top: 6px; }
}

/* ---------------------------------------------------------------- v2: $49 ladder, countdown, batch, offer images */
/* gallery strip under the hero clip: each photo at its own shape, tap opens it whole */
.thumbs { display: flex; justify-content: center; gap: 8px; padding: 2px 4px 10px; }
.thumb {
  flex: 0 1 auto; height: 52px; padding: 0; border: 2px solid var(--card-line); border-radius: 10px; overflow: hidden;
  background: #000; cursor: zoom-in; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.thumb:active { transform: scale(.94); }
.thumb img { height: 100%; width: auto; }
.tni { font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 0 8px 4px; }
.tni-sub { font-size: 14px; font-weight: 800; color: var(--ink); padding: 0 8px 12px; }
.photo-card .tni, .close-pic .tni { padding: 8px 8px 4px; }
.pain .tni { padding: 8px 8px 0; }
.day25 .tni { margin-top: -6px; margin-bottom: 8px; }
.ship-free { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
/* date card and batch card (Hormozi 3b): real countdown, spots from the server */
.when-card, .batch-card {
  margin-top: 12px; padding: 10px 12px; border-radius: 18px;
  background: var(--band-bg); border: 1.5px solid var(--band-line); color: var(--band-ink);
}
.when-top { font-size: 16px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.when-top .ico { display: inline-block; vertical-align: -4px; margin-right: 6px; color: var(--accent); }
.when-count { margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.batch-card { margin-top: 8px; }
.batch-line { font-size: 14.5px; font-weight: 800; }
.batch-spots { margin-top: 2px; font-size: 14px; font-weight: 800; color: var(--accent); }
.bb-count { margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.bb-ship { margin-top: 2px; }
/* value stack on the default bundle */
.stack-sub { margin-top: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
.stack li { padding: 9px 6px; }
.box-pic img { aspect-ratio: 4 / 5; object-fit: cover; }
.size-pic { display: block; width: 72%; margin: 0 auto 12px; padding: 0; border: 2px solid var(--card-line); border-radius: 16px; overflow: hidden; background: #000; cursor: zoom-in; }
.size-pic img { width: 100%; height: auto; }
.day25-pic img { aspect-ratio: 4 / 5; object-fit: cover; }
.s-hero .rating-sum { margin-top: 12px; }
/* v2 first screen: the clip, the strip, the headline, the button, the price and the date card all on the 390 first screen */
.s-hero h1 { font-size: min(var(--h1), 36px); }
.s-hero .price-line, .s-hero .ship-free { display: inline-block; margin-top: 8px; vertical-align: baseline; }
.s-hero .ship-free { margin-left: 10px; }
.s-hero .when-card { margin-top: 8px; padding: 8px 12px; }
.hero-media .tni { padding-bottom: 2px; }
.hero-media .tni-sub { padding-bottom: 10px; }
.h1-line { display: block; }
.s-build .cfg-mount { margin-top: 0 !important; }
/* short phones (375x667): the date card joins the button and the price on the first screen */
@media (max-height: 700px) {
  .s-hero h1 { font-size: 29px; }
  .hero-media .tni { font-size: 11.5px; padding-bottom: 0; }
  .hero-media .tni-sub { font-size: 13px; padding-bottom: 6px; }
  .s-hero .lead { font-size: 15.5px; }
  .s-hero .when-card { margin-top: 6px; padding: 6px 10px; }
  .s-hero .when-top { font-size: 14.5px; }
  .s-hero .when-count { font-size: 14px; margin-top: 2px; }
}
/* owner: TEST slots stay visible in the hero; the date card still fits the first screen */
.s-hero .rating-sum { min-height: 34px; margin-top: 4px; }
.s-hero .families { margin-top: 8px; }
@media (max-height: 700px) {
  .s-hero h1 { font-size: 27px; }
  .s-hero .rating-sum { min-height: 30px; }
}

/* ---------------------------------------------------------------- round 1 of v2 (2026-11-05) */
/* rows 4 and 5 (Luke decides the phone): ONE height rule for the drop clip. The crop lives inside the file (iPhone round: 720x480, ONE panel, see the v3c block at the end) */
.hero-video { height: 220px; }
@media (max-height: 700px) {
  .hero-video { height: 200px; }
}
/* row 6: the five photo strip lives under How It Works in its own card */
.thumbs-card { padding: 14px 10px; }
.thumbs-card .thumbs { padding: 0; flex-wrap: wrap; }
/* row 11: the stack comes before the configurator */
.s-box { padding-top: 0; }
.s-box + .s-build { margin-top: 30px; }
/* row 35: the two printed cards are our gift */
.stack .gift { margin-top: 4px; font-size: 14.5px; font-weight: 800; color: var(--accent); }
/* row 37: the rating summary is plain text now, not a link */
.rating-sum { cursor: default; }
/* row 33: the sticky bar countdown carries its date («Order in 8d 20h for Nov 30»): it takes two balanced lines, the button stays on one */
.buybar-in { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
.bb-count { text-wrap: balance; line-height: 1.2; }
.buybar .btn-buy { padding: 0 12px; white-space: nowrap; }

/* ================================================================ iPhone overhaul (2026-11-05)
   Judged only on WebKit at iPhone 15 Pro (393) and iPhone SE (375). Cream paper cards on the evergreen ground,
   deep walnut ink, walnut bands for prices and dates, evergreen for small accents, Santa red only on the buy button.
   Luke: one eyeball and one thumb, big targets. Baymard PDP-110: the price stands apart. Oli O-284: one hue family, the CTA alone pops */

/* cards: a warm paper edge and a softer lift */
:root[data-theme="b"] .card { border-color: var(--card-line); }
.screen > * + * { margin-top: 16px; }
.head-card { padding: 24px 20px 22px; }
.head-card p { color: var(--ink-2); font-size: 17px; }
.head-card h2 + p { margin-top: 12px; }
h1, h2, h3 { color: var(--ink); }

/* stars: gold, never green */
.stars-on .star-row { color: var(--gold, #E3A92B); }
.star-row { color: #B9A48C; }

/* hero */
.wordmark { color: var(--ink); background: var(--card-solid, #FFFAF2); font-size: 23px; padding: 8px 22px 9px; }
.hero-media { padding: 8px 8px 0; }
.hero-media .frame { border-radius: 16px; }
.s-hero .cap { color: var(--ink); font-weight: 800; font-size: 15.5px; padding: 11px 8px 4px; }
.hero-media .tni { color: var(--ink-2); }
.hero-media .tni-sub { color: var(--ink); }
.title-card { padding: 20px 16px 18px; }
.s-hero h1 { font-size: min(var(--h1), 10.2vw); letter-spacing: .004em; }
.title-card .lead { color: var(--ink-2); font-size: 17px; margin-top: 10px; }
.btn-buy { font-size: 20px; min-height: 60px; text-shadow: 0 1px 0 rgba(90, 14, 10, .35); }
.price-line { color: var(--ink); }
.s-hero .price-line { font-size: 20px; font-weight: 900; }
.s-hero .ship-free { color: var(--accent); font-weight: 800; font-size: 15px; }
.when-card, .batch-card { border-radius: 16px; padding: 10px 12px; box-shadow: inset 0 1px 0 rgba(255, 230, 190, .25); }
.when-top { color: var(--band-ink); }
.when-top .ico { color: #F2C46A; }
.when-count, .batch-spots { color: var(--band-ink-2); font-size: 15.5px; }
.families { color: var(--accent); font-size: 15px; }
.rating-sum { color: var(--ink); }
.rs-count { color: var(--ink-2); }

/* how it works */
.photo-card { padding: 8px; }
.photo-card img { border-radius: 16px; }
.tni { color: var(--ink-2); font-size: 13px; }
.day25 { padding: 20px 18px 24px; }
.day25-pic { width: 220px; background: var(--gold, #E3A92B); padding: 5px; border-radius: 22px; }
.day25-pic img { border-radius: 17px; }
.big { color: var(--ink); }
.thumbs-card { padding: 14px 10px; }
.thumb { height: 64px; border: 2px solid var(--card-line); border-radius: 12px; }

/* maker */
.maker-text h3 { color: var(--ink); }
.maker-who { color: var(--accent); }
.maker-text p { color: var(--ink-2); }
.play-ring { background: var(--cta-bg); color: #FFF8EC; box-shadow: 0 14px 28px rgba(80, 10, 6, .45); }
.play-ring::after { border-color: #FFF8EC; }

/* in every box: the value stack reads like a receipt, every value on its own pill, the total on walnut */
.box-pic img { aspect-ratio: 4 / 5; object-fit: cover; }
.stack-card { padding: 24px 16px 18px; border: 2.5px dashed var(--dash); background: var(--card-bg); }
.stack-sub { color: var(--ink-2); font-size: 16px; }
.stack { margin-top: 16px; gap: 0; }
.stack li { padding: 11px 4px; }
.stack li + li { border-top: 1.5px solid #EADBC4; }
.row { gap: 6px 10px; }
.row .name { font-size: 17.5px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.row .val { padding: 3px 12px; background: var(--accent); color: #FFF8EC; font-size: 16px; font-weight: 900; }
.stack .gift { color: var(--accent); font-size: 14.5px; }
.stack-total { margin-top: 12px; padding: 16px 12px 18px; border-radius: 18px; border: 1.5px solid var(--band-line); box-shadow: inset 0 1px 0 rgba(255, 230, 190, .25); }
.worth { color: var(--band-ink-2); font-size: 17px; }
.yours { color: #FFF5E2; font-size: 40px; margin-top: 6px; }

/* the builder section sits on its own darker field */
.s-box + .s-build { margin-top: 34px; }

/* promises */
.promise { padding: 22px 18px 24px; }
.promise h3 { color: var(--ink); }
.promise-when { color: var(--ink); font-size: 17.5px; }
.promise-back { color: var(--ink-2); font-size: 16px; font-weight: 700; }
.promise-art { color: var(--gold, #E3A92B); }

/* reviews */
.review-pic { background: #EFE3CF; }
.review-text { color: var(--ink); }
.review-who { color: var(--ink-2); }
.bd-avg { color: var(--ink); }
.bd-total { color: var(--ink-2); }
.bd-star { color: var(--gold, #E3A92B); opacity: 1; }
.bd-bar { background: #EADBC4; }
.bd-fill { background: var(--gold, #E3A92B); }
.bd-row[aria-pressed="true"] { border-color: var(--accent); background: var(--tint, #EEF4EC); }
.ph-video { background: var(--art-bg); color: var(--ink-2); }
.ph-play { background: var(--accent); color: #FFF8EC; }

/* details and questions */
.acc summary { color: var(--ink); font-size: 18px; }
.acc-body p { color: var(--ink-2); font-size: 16.5px; font-weight: 650; }
.acc + .acc { border-top-color: #EADBC4; }
.size-pic { border-color: var(--card-line); }

/* close and footer */
.close-card h2 { color: var(--ink); }
.foot-name { color: var(--ink); }
.foot-sub, .foot-copy { color: var(--ink-2); }
.foot-links a { color: var(--ink); text-decoration-color: var(--accent); }
.closed-box > .pl-line { color: var(--ink); }
.pl-sub { color: var(--ink-2); }

/* the page sticky bar: solid cream card, the price big and dark, the countdown in evergreen, one red button */
.buybar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(5, 18, 13, 0) 0%, rgba(5, 18, 13, .45) 55%); }
.buybar-in {
  grid-template-columns: minmax(0, 1fr) 184px; gap: 10px;
  min-height: 74px; padding: 8px 8px 8px 12px; border-radius: 22px;
  background: #FFFAF2; border: 1.5px solid #E3CFAF;
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .12);
}
.buybar-price { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.bb-from { display: flex; align-items: baseline; justify-content: center; gap: 5px; color: #24160F; font-size: 15px; font-weight: 800; line-height: 1; }
.bb-from span { font-size: 31px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bb-count { margin-top: 0; color: #1F5A3A; font-size: 13.5px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.buybar .btn-buy { min-height: 56px; font-size: 17px; padding: 0 10px; }
@media (max-width: 360px) {
  .buybar-in { grid-template-columns: minmax(0, 1fr) 164px; }
  .buybar .btn-buy { font-size: 15.5px; }
}

/* lights between sections stay quiet on the dark field */
.lights { margin: 26px auto 22px; }

/* the builder speaks in the page's face: the configurator's own default (Bricolage, never loaded) fell back to a
   different system face on each phone, so lines measured on one phone wrapped on another */
.cd-config.cd-v2 { --cd-font: var(--body); }
.cd-config .cd-step-title { font-size: 28px; margin-top: 2px; }
.cd-config .cd-step-sub { font-size: 14.5px; font-weight: 700; color: #5C4535; margin-top: 4px; }
/* the photo strip keeps one row on a 375 phone */
.thumbs-card .thumbs { flex-wrap: nowrap; gap: 6px; }
.thumb { height: 60px; border-radius: 10px; }
@media (max-width: 380px) { .thumb { height: 54px; } }
/* press feedback settles without overshoot (Apple: bounce only after a flick) */
.btn-buy { transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .2s ease; }
.btn-buy:active { transform: scale(.97); transition-duration: .1s; }

/* real Safari heights (393x659 with the URL bar, SE 375x667): the button, the price and the ship line stay on the first screen */
@media (max-height: 700px) {
  .s-hero { padding-top: 6px; }
  .wordmark { font-size: 20px; padding: 5px 18px 6px; }
  .screen > .brand + * { margin-top: 6px; }
  .hero-video { height: 188px; }
  .s-hero .cap { padding: 7px 8px 2px; font-size: 14.5px; }
  .hero-media .tni { font-size: 12px; padding-bottom: 0; }
  .hero-media .tni-sub { font-size: 13px; padding-bottom: 6px; }
  .s-hero .screen > * + *, .s-hero > * + * { margin-top: 10px; }
  .title-card { padding: 12px 14px 12px; }
  .s-hero h1 { font-size: 30px; }
  .title-card .lead { margin-top: 4px; font-size: 15.5px; }
  .s-hero .rating-sum { min-height: 28px; margin-top: 2px; }
  .title-card .lead + .rating-sum + .btn-buy { margin-top: 4px; }
  .title-card .btn-buy { min-height: 54px; margin-top: 6px; }
  .s-hero .price-line { margin-top: 6px; font-size: 18px; }
  .s-hero .ship-free { margin-top: 6px; font-size: 14px; }
}

/* ================================================================ v3c: iPhone round, Builder C (2026-11-05)
   Designer rows 1 to 22, Oli 2 4 5 7, Cialdini 1 2 3 5 8, Hormozi 1 2 5 6 7 11, Baymard 1 10 11 12.
   Rhythm: 12px inside a section, 56px between sections, the string lights only between three big blocks.
   Every heading lives inside the card of its content. Judged on WebKit at 393x659 and 375x667. */

/* ---- rhythm */
.screen > * + * { margin-top: 12px; }
.screen + .screen { margin-top: 56px; }
.lights + .screen { margin-top: 0; }
.lights { margin: 40px auto 36px; }
.s-box, .s-details, .s-promise, .s-homes, .s-faq { padding-top: 0; }
.s-box + .s-build { margin-top: 56px; }
.card > .head-card, .card > .head-card p { text-align: center; }
.card > .head-card { padding: 0; margin-bottom: 14px; }
.head-card h2 + p { margin-top: 10px; }
.eyebrow { display: block; margin: 0 0 6px; padding: 0; background: none; border: 0; color: var(--accent); font: 800 17px/1.2 var(--body); letter-spacing: 0; text-transform: none; }

/* ---- hero: one panel, one badge, one caption */
.hero-video { height: 214px; width: 100%; object-fit: cover; object-position: 50% 52%; }
.hero-media { padding: 8px 8px 0; }
.hero-media .frame { position: relative; }
.tni-badge {
  position: absolute; right: 8px; bottom: 8px; padding: 4px 11px; border-radius: 999px;
  background: #FFFAF2; color: var(--ink); font: 800 12.5px/1.2 var(--body);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.s-hero .cap { padding: 8px 6px 9px; font-size: 14.5px; font-weight: 800; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.s-hero h1 { font-size: 37px; line-height: .98; letter-spacing: .004em; }
.title-card { padding: 14px 14px 14px; }
.s-hero .title-card .lead { margin-top: 6px; font-size: 16px; line-height: 1.28; }
.s-hero .rating-sum { min-height: 28px; margin-top: 6px; }
.s-hero .families { margin-top: 2px; font-size: 14px; }
.title-card .btn-buy { margin-top: 8px; min-height: 56px; }
.s-hero .price-line { margin-top: 8px; font-size: 19px; }
.s-hero .ship-free { margin-top: 8px; font-size: 14.5px; }
.s-hero .when-card { margin-top: 8px; padding: 8px 12px; }
.when-card .batch-spots { margin-top: 4px; font-size: 14.5px; font-weight: 800; color: #F2C46A; }
.when-card .batch-spots[hidden] { display: none; }
.when-card .batch-line { margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--band-ink-2); text-wrap: balance; }
.when-card .batch-line[hidden] { display: none; }

/* ---- how it works: heading + lines + the picture in ONE card, then a two photo card, then day 25, then a swipe strip */
.how-card { padding: 22px 16px 14px; }
.how-card .head-card p { font-size: 17px; font-weight: 700; color: var(--ink-2); margin-top: 8px; }
.how-card .head-card p.eyebrow { margin: 0 0 6px; color: var(--accent); font: 800 17px/1.2 var(--body); }
.how-card .head-card h2 { margin-top: 2px; }
.how-pic { margin-top: 6px; }
.how-pic img { width: 100%; height: auto; aspect-ratio: 6 / 7; object-fit: cover; object-position: 50% 0%; border-radius: var(--r-pic); }
.tni { padding: 8px 8px 0; }
.duo { padding: 8px 8px 0; }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duo-grid img { width: 100%; height: auto; aspect-ratio: 7 / 8; object-fit: cover; object-position: 50% 0%; border-radius: var(--r-pic); }
.duo .tni { padding: 9px 8px 10px; }
.day25 { padding: 22px 14px 6px; overflow: hidden; }
.day25 .big { margin: 0 6px 14px; }
.day25-pic { width: 100%; margin: 0; padding: 0; background: none; border-radius: var(--r-pic); animation: none; }
.day25-pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-pic); }
.day25 .tni { margin: 0; padding: 9px 8px 10px; }
.thumbs-card { padding: 14px 0 14px 12px; overflow: hidden; }
.thumbs-card .thumbs {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; padding: 0 22px 2px 0; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.thumbs-card .thumbs::-webkit-scrollbar { display: none; }
.thumbs-card .thumb { flex: 0 0 128px; height: auto; aspect-ratio: 3 / 4; border-radius: 14px; scroll-snap-align: start; }
.thumbs-card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---- printed by hand: heading, maker lines, clip and caption in one card */
.maker-media { padding: 22px 8px 0; }
.maker-media .head-card { padding: 0 8px; margin-bottom: 14px; }
.maker-media .head-card h3 { margin-top: 10px; font-size: 25px; line-height: 1.02; }
.maker-media .head-card .maker-who { margin-top: 10px; font-size: 15px; }
.maker-media .head-card .maker-count { margin-top: 3px; font-size: 14px; }
.maker-text { padding: 14px 10px 16px; }
.maker-text p { margin-top: 0; }

/* ---- value stack: a receipt, no lines, alternating fills, the name and its value on one line */
.stack-card { padding: 24px 12px 16px; }
.stack { margin-top: 14px; gap: 0; }
.stack li { padding: 9px 8px; border-radius: 14px; }
.stack li + li { border-top: 0; }
.stack li:nth-child(even) { background: #F6EBDA; }
.row { flex-wrap: nowrap; align-items: center; gap: 6px 8px; }
.row .name { flex: 0 1 auto; font-size: 16.5px; line-height: 1.22; }
.row .val { flex: none; padding: 0; background: none; color: var(--accent); font-size: 17px; font-weight: 900; }
.stack li:first-child .row { justify-content: center; flex-wrap: nowrap; gap: 10px; }
.stack li:first-child .name { font-size: 16.5px; }
.stack .gift.sub { color: var(--ink-2); }
.stack li:first-child .gift { color: var(--ink-2); } /* round 2 (design N5): 25 mornings sits under the name like the gift rows' small line, so the first row is one line like the others */
.stack li:first-child .val { padding: 2px 11px; background: var(--accent); color: #FFF8EC; border-radius: 999px; }
.row .val-free { padding: 2px 10px; background: var(--gold, #E3A92B); color: #3A2208; border-radius: 999px; font-size: 14px; }
.stack .gift { margin-top: 2px; font-size: 14px; }
.stack-alt { margin-top: 12px; font-size: 15.5px; font-weight: 800; color: var(--ink-2); }
.stack-alt span { color: var(--ink); font-weight: 900; }

/* ---- promises: real photo crops, one frame shape */
.promise { padding: 10px 10px 22px; }
.promise-pic { margin-bottom: 14px; }
.promise-pic img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-pic); }
.promise h3, .promise-when, .promise-back { margin-left: 8px; margin-right: 8px; }

/* ---- homes: heading + rating summary in one card, compact bars, who lines one per row */
.breakdown { padding: 22px 16px 16px; }
.bd-row { min-height: 32px; padding: 2px 6px; }
.bd-list { gap: 4px; margin-top: 12px; }
.bd-bar { height: 8px; }
.bd-list .ph { font-size: 11px; }
.review-who { display: grid; gap: 1px; font-size: 14px; line-height: 1.3; }
.review-who span { display: block; }
.home-grid .review-who { font-size: 13px; }

/* ---- accordions: steps of tone, not hairlines */
.acc-card { padding: 22px 12px 10px; }
.acc-card > .head-card { margin-bottom: 8px; }
.acc + .acc { border-top: 0; margin-top: 6px; }
.acc summary { background: #F8EEDD; border-radius: 14px; padding: 10px 12px; min-height: 58px; }
.acc[open] summary { background: #F3E6CE; }
.acc-body { padding: 10px 10px 12px; }

/* ---- close: the photo is the width of its card, the caption burned into the clip is cropped away */
.close-pic img { width: 100%; height: auto; max-height: none; aspect-ratio: 1 / 1.14; object-fit: cover; object-position: 50% 0%; margin: 0; }
.close-pic .tni { padding: 9px 8px 6px; }
.close-card .lead + .lead { margin-top: 6px; font-size: 16px; font-weight: 600; }
.close-card .when-card { margin-top: 12px; }

/* ---- snow: softer (never a hard 3px grey dot on a still) */
.flake { filter: blur(1px); background: #FFFFFF; }

/* ---- the sticky bar: «Starts at» over the price, the counter with its date, «Free shipping», one red button.
   The order screen wears the same look (classes: .bb-top .bb-amt .bb-ship .bb-count, button .btn-buy) */
.buybar-in { grid-template-columns: minmax(0, 1fr) 176px; gap: 8px; min-height: 0; padding: 8px 8px 8px 10px; }
.buybar-price { gap: 3px; }
.bb-top { font-size: 12.5px; font-weight: 800; line-height: 1; color: var(--ink-2); }
.buybar .bb-from { display: flex; align-items: baseline; justify-content: center; gap: 7px; line-height: 1; font-size: 15px; }
.buybar .bb-from .bb-amt { font-size: 31px; font-weight: 900; letter-spacing: -.02em; }
.buybar .bb-from .bb-ship { font-size: 12px; font-weight: 800; letter-spacing: 0; color: #1F5A3A; }
.bb-count { font-size: 12.5px; line-height: 1.15; }
.buybar .btn-buy { min-height: 54px; font-size: 16px; padding: 0 6px; }

/* ---- photo viewer: swipe through a set, with a counter */
.zoom-count {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2;
  padding: 6px 16px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font: 800 15px/1.2 var(--body);
}
.zoom-count[hidden] { display: none; }

@media (max-height: 700px) {
  .hero-video { height: 188px; }
  .s-hero h1 { font-size: 33px; }
  .s-hero .title-card .lead { font-size: 15px; }
  .s-hero .cap { padding: 6px 6px 7px; font-size: 13.5px; }
  .title-card .btn-buy { min-height: 52px; }
  .s-hero .when-card { padding: 6px 10px; margin-top: 6px; }
  /* round 2 (Cialdini item 9): the batch line joins the card, so the card gets tighter to stay inside the first screen */
  .s-hero .when-card .when-count { margin-top: 1px; }
  .s-hero .when-card .batch-spots { margin-top: 2px; }
  .s-hero .when-card .batch-line { margin-top: 0; font-size: 12.5px; }
  .s-hero .price-line { margin-top: 6px; }
  .s-hero .title-card .btn-buy { margin-top: 6px; }
}

.rs-num { font-weight: 900; margin: 0 4px; }
.bd-c { font-size: 12px; font-weight: 800; }
.review-text { font-weight: 800; }