/* Sales page split test, version "cream" (Marc, 2026-10-19). The founders bar and the hero stay exactly as in the dark
   version; everything after the hero sits on cream. Every rule is scoped to html[data-v="cream"], so the dark version
   (data-v="dark", the control) never changes. The version is picked once in the first script of sales-v1-studio.html
   and kept in localStorage (ccs_v).

   v4, rebuilt from scratch as a warm editorial brochure, not the dark page inverted:
   - the ground is the brand cream itself (#F4EDE0) with a deeper cream band on every second scene for rhythm
   - ink type (#17110C) with two steps of secondary ink, both 7:1 or better on either cream
   - body copy 17.5px / 1.6 on phones, measures of 60 to 70 characters on desktop
   - the documents are the only dark objects on the desk: the call sheet, the notes, the guarantee, the first-100
     ticket, the launch board and the docked bar are deep espresso with cream type and the original bright orange
   - orange stays the light: buttons, prices, marks. On cream it is deepened one stop so it holds 3:1 (display) and
     4.5:1 (small type); inside a dark card it is the brand #FF5B1F again
   - no tilted cards, no glows, no masks fading photos into the dark: stills sit as framed prints with a warm shadow
   - the page's own tokens are flipped only inside <main>, the footer and the dock, so nothing in the hero changes

   Measured (WCAG 2) on ground A #F4EDE0 / band B #EBE1CF:
   ink 17.0 / 15.6     ink-2 10.6 / 9.7     ink-3 6.8 / 6.3     rule #8A7A67 3.2 / 3.0 (hairlines)
   o-hot #DC3F0A 3.8 / 3.5 (display, icons)     o-deep #A8360A 5.6 / 5.2 (small type)
   o-btn #F0480F 3.5 / 3.2 against the ground, ink label on it 4.6
   On the espresso card #1F1712: cream 15.9, card body #DED4C4 12.8, card muted #C9BCAA 9.5, orange #FF5B1F 5.7 */

/* ---------- Tokens ---------- */
html[data-v="cream"] {
  --cr-a: #F4EDE0;              /* the desk */
  --cr-b: #EBE1CF;              /* the deeper band, every second scene */
  --cr-ink: #17110C;
  --cr-ink-2: #3E3229;          /* body and secondary type */
  --cr-ink-3: #5C4E42;          /* muted type, labels, credits */
  --cr-rule: #8A7A67;           /* hairlines: 3:1 on both creams */
  --cr-o-btn: #F0480F;          /* button fill on cream, ink label */
  --cr-o-btn-hover: #F85516;
  --cr-o-press: #D93E0A;
  --cr-o-hot: #DC3F0A;          /* orange for display type, icons, marks */
  --cr-o-deep: #A8360A;         /* burnt orange for small type */
  --cr-print: 0 1px 2px rgba(60, 35, 15, .12), 0 22px 40px -22px rgba(60, 35, 15, .55);
  --cr-print-sm: 0 1px 2px rgba(60, 35, 15, .1), 0 12px 24px -14px rgba(60, 35, 15, .45);
  --cr-ring: 0 0 0 1px rgba(23, 17, 12, .3);
  /* the espresso documents */
  --dk: #1F1712;
  --dk-lift: #2B211A;           /* a lighter strip set into a card */
  --dk-deep: #120C09;           /* a deeper strip (the ChatGPT band) */
  --dk-cream: #F4EDE0;
  --dk-2: #DED4C4;
  --dk-3: #C9BCAA;
  --dk-rule: rgba(244, 237, 224, .22);
  --dk-rule-2: rgba(244, 237, 224, .34);
  --dk-shadow: 0 2px 4px rgba(40, 22, 8, .18), 0 26px 44px -24px rgba(40, 22, 8, .75), inset 0 1px 0 rgba(244, 237, 224, .07);
  --dk-shadow-sm: 0 1px 3px rgba(40, 22, 8, .16), 0 14px 26px -16px rgba(40, 22, 8, .7), inset 0 1px 0 rgba(244, 237, 224, .07);
  scrollbar-color: var(--cr-rule) var(--cr-a);
}
html[data-v="cream"] body { background: var(--cr-a); }

/* The page's own tokens, flipped for a light ground: anything not restyled below lands as ink on cream. */
html[data-v="cream"] main,
html[data-v="cream"] footer,
html[data-v="cream"] .dock {
  --ground: var(--cr-a);
  --black: var(--cr-ink);
  --cream: var(--cr-ink);
  --cream-2: var(--cr-ink-2);
  --taupe: var(--cr-ink-3);
  --line: var(--cr-rule);
  --line-2: var(--cr-rule);
  color: var(--cr-ink);
}
html[data-v="cream"] main { background: var(--cr-a); font-size: 17.5px; line-height: 1.6; }
html[data-v="cream"] main ::selection { background: var(--cr-ink); color: var(--cr-a); }
html[data-v="cream"] main :focus-visible,
html[data-v="cream"] footer :focus-visible { outline-color: var(--cr-ink); }
html[data-v="cream"] main a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--cr-o-hot); }

/* ---------- Scenes: flat cream, every second one a deeper band. More air between scenes. ---------- */
html[data-v="cream"] main .sec { padding: 72px 0; background: var(--cr-a); }
html[data-v="cream"] main .screening,
html[data-v="cream"] main #carousels,
html[data-v="cream"] main .launch,
html[data-v="cream"] main .forwho,
html[data-v="cream"] main .close { background: var(--cr-b); }
html[data-v="cream"] main .close { padding-bottom: 0; }
@media (min-width: 768px) {
  html[data-v="cream"] main .sec { padding: 120px 0; }
  html[data-v="cream"] main .close { padding-bottom: 0; }
}

/* ---------- Type scale ---------- */
html[data-v="cream"] main .h2 { color: var(--cr-ink); text-shadow: none; }
html[data-v="cream"] main .lede { margin-top: 20px; max-width: 32em; color: var(--cr-ink-2); font-size: 19px; line-height: 1.55; }
html[data-v="cream"] main .lede b,
html[data-v="cream"] main .lede strong { color: var(--cr-ink); font-weight: 700; }
html[data-v="cream"] main .mono { font-size: 12px; }
html[data-v="cream"] main .proof { font-size: 19px; line-height: 1.5; color: var(--cr-ink); }
html[data-v="cream"] main .lamp.ready { color: var(--cr-o-deep); font-size: 12.5px; }
html[data-v="cream"] main .lamp.ready::before { background: var(--cr-o-hot); box-shadow: 0 0 0 3px rgba(220, 63, 10, .18); }
html[data-v="cream"] main .lamp.soon { color: var(--cr-ink-3); }
html[data-v="cream"] main .lamp.soon::before { box-shadow: inset 0 0 0 1.5px var(--cr-ink-3); }
html[data-v="cream"] main .job { background: var(--cr-ink); color: var(--cr-a); }
html[data-v="cream"] main .ph { color: var(--cr-ink); outline-color: var(--cr-o-hot); }
@media (min-width: 768px) {
  html[data-v="cream"] main .lede { font-size: 20px; margin-top: 24px; }
}

/* Slate: the scene line that opens each spread. Ink stripes on cream, a firm rule. */
html[data-v="cream"] main .slate { margin-bottom: 26px; }
html[data-v="cream"] main .clap i,
html[data-v="cream"] main .clap::after {
  background: repeating-linear-gradient(-58deg, var(--cr-a) 0 7px, var(--cr-ink) 7px 14px);
  box-shadow: inset 0 0 0 1px var(--cr-ink);
}
html[data-v="cream"] main .clap::after { background: repeating-linear-gradient(58deg, var(--cr-a) 0 7px, var(--cr-ink) 7px 14px); }
html[data-v="cream"] main .slate-f { color: var(--cr-ink-3); border-bottom: 1px solid var(--cr-rule); font-size: 12px; }
html[data-v="cream"] main .slate-f b { color: var(--cr-ink); }
html[data-v="cream"] main .slate-f span + span::before { background: var(--cr-rule); }
@keyframes cr-clapline { 0% { border-bottom-color: var(--cr-o-hot); } 100% { border-bottom-color: var(--cr-rule); } }
html[data-v="cream"] main .slate.clapped .slate-f { animation-name: cr-clapline; }

/* ---------- Buy button: one stop deeper than the brand orange so it holds on cream, ink label ---------- */
html[data-v="cream"] main .btn {
  background: var(--cr-o-btn); color: var(--cr-ink); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(120, 30, 0, .3), 0 14px 28px -14px rgba(160, 45, 5, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
}
html[data-v="cream"] main .btn:hover { background: var(--cr-o-btn-hover); box-shadow: 0 1px 0 rgba(120, 30, 0, .3), 0 18px 34px -14px rgba(160, 45, 5, .7), inset 0 1px 0 rgba(255, 255, 255, .28); }
html[data-v="cream"] main .btn:active { background: var(--cr-o-press); }
html[data-v="cream"] main .btn-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--cr-ink-2); }
html[data-v="cream"] main .cta { margin-top: 44px; }
@media (min-width: 768px) {
  html[data-v="cream"] main .cta { margin-top: 56px; }
}

/* ---------- The documents: espresso cards on the cream desk ----------
   Inside a card the page tokens go back to their dark values, so anything that reads them stays light on dark. */
html[data-v="cream"] main .sheet,
html[data-v="cream"] main .note,
html[data-v="cream"] main .guar,
html[data-v="cream"] main .bonus,
html[data-v="cream"] main .fit-card,
html[data-v="cream"] main .board,
html[data-v="cream"] .dock {
  --ground: var(--dk);
  --cream: var(--dk-cream);
  --cream-2: var(--dk-2);
  --taupe: var(--dk-3);
  --line: var(--dk-rule);
  --line-2: var(--dk-rule-2);
}
html[data-v="cream"] main .sheet,
html[data-v="cream"] main .note,
html[data-v="cream"] main .guar,
html[data-v="cream"] main .bonus,
html[data-v="cream"] main .fit-card,
html[data-v="cream"] main .board {
  background: var(--dk); color: var(--dk-2);
  border: 0; border-radius: 12px; transform: none;
  box-shadow: var(--dk-shadow);
}
html[data-v="cream"] main .note { border-radius: 10px; box-shadow: var(--dk-shadow-sm); }
html[data-v="cream"] main .sheet ::selection,
html[data-v="cream"] main .note ::selection,
html[data-v="cream"] main .guar ::selection,
html[data-v="cream"] main .bonus ::selection,
html[data-v="cream"] main .fit-card ::selection,
html[data-v="cream"] main .board ::selection { background: var(--orange); color: var(--cr-ink); }
html[data-v="cream"] main .sheet :focus-visible,
html[data-v="cream"] main .note :focus-visible,
html[data-v="cream"] main .guar :focus-visible,
html[data-v="cream"] main .bonus :focus-visible,
html[data-v="cream"] main .fit-card :focus-visible,
html[data-v="cream"] main .board :focus-visible { outline-color: var(--dk-cream); }
/* Buttons inside a card: the brand orange, ink label. */
html[data-v="cream"] main .sheet .btn,
html[data-v="cream"] main .note .btn,
html[data-v="cream"] main .guar .btn,
html[data-v="cream"] main .bonus .btn,
html[data-v="cream"] main .fit-card .btn { background: var(--orange); color: var(--cr-ink); }

/* =====================================================================
   WHAT YOU GET: the call sheet
   ===================================================================== */
html[data-v="cream"] main .pack-intro { margin-top: 20px; }
html[data-v="cream"] main .legend { margin-top: 18px; }
html[data-v="cream"] main .sheet { margin-top: 32px; padding: 16px 20px 0; overflow: hidden; }
html[data-v="cream"] main .sheet-h { color: var(--dk-3); border-bottom: 1px dashed var(--dk-rule-2); padding-bottom: 11px; font-size: 12px; }
html[data-v="cream"] main .sheet-h b { color: var(--dk-cream); }
html[data-v="cream"] main .sheet li { padding: 18px 0 19px; border-bottom: 1px solid var(--dk-rule); column-gap: 12px; grid-template-columns: 26px minmax(0, 1fr); }
html[data-v="cream"] main .sheet-n { color: var(--orange); padding-top: 7px; font-size: 12px; }
html[data-v="cream"] main .sheet h3 { color: var(--dk-cream); font-size: 30px; }
html[data-v="cream"] main .sheet li p { margin-top: 9px; color: var(--dk-2); font-size: 17px; line-height: 1.55; }
html[data-v="cream"] main .sheet li p b { color: var(--dk-cream); }
html[data-v="cream"] main .new { background: var(--orange); color: var(--cr-ink); vertical-align: 7px; }
html[data-v="cream"] main .sheet-foot { margin: 0 -20px; padding: 18px 20px 19px; border-top: 1px dashed var(--dk-rule-2); background: var(--dk-lift); }
html[data-v="cream"] main .sheet-foot .t { color: var(--dk-cream); }
html[data-v="cream"] main .sheet-foot p { color: var(--dk-2); font-size: 16.5px; line-height: 1.5; }
html[data-v="cream"] main .sheet-gpt { margin: 0 -20px; padding: 20px 20px 22px; background: var(--dk-deep); color: var(--dk-cream); }
html[data-v="cream"] main .sheet-gpt .t { color: var(--dk-cream); }
html[data-v="cream"] main .sheet-gpt p:last-child { color: var(--dk-2); font-size: 16.5px; line-height: 1.5; }
html[data-v="cream"] main .sheet-gpt p:last-child b { color: var(--dk-cream); }
html[data-v="cream"] main .gpt-chip { color: var(--orange); font-weight: 600; }
html[data-v="cream"] main .gpt-dot { box-shadow: 0 0 0 3px rgba(255, 91, 31, .22); }
@media (min-width: 700px) {
  html[data-v="cream"] main .sheet { padding: 20px 28px 0; }
  html[data-v="cream"] main .sheet ol { column-gap: 40px; }
  html[data-v="cream"] main .sheet li:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--dk-rule); }
  html[data-v="cream"] main .sheet-foot { margin: 0 -28px; padding: 20px 28px 21px; }
  html[data-v="cream"] main .sheet-gpt { margin: 0 -28px; padding: 22px 28px 24px; }
}
@media (min-width: 900px) {
  html[data-v="cream"] main .sheet { margin-top: 44px; padding: 22px 36px 0; }
  html[data-v="cream"] main .sheet ol { column-gap: 44px; }
  html[data-v="cream"] main .sheet li { padding: 22px 0 24px; }
  html[data-v="cream"] main .sheet h3 { font-size: 32px; }
  html[data-v="cream"] main .sheet-foot { margin: 0 -36px; padding: 22px 36px 23px; }
  html[data-v="cream"] main .sheet-gpt { margin: 0 -36px; padding: 24px 36px 26px; }
}

/* =====================================================================
   THE SCREENING: frames as prints, the steps on an espresso note, the menus as ink lists
   ===================================================================== */
html[data-v="cream"] main .frame { box-shadow: var(--cr-ring), var(--cr-print); }
html[data-v="cream"] main .tgl { background: var(--cr-a); color: var(--cr-ink); box-shadow: 0 0 0 1px rgba(23, 17, 12, .25), 0 4px 12px -4px rgba(0, 0, 0, .5); }
html[data-v="cream"] main .dailies-h { color: var(--cr-ink); }
html[data-v="cream"] main .take figcaption { margin-top: 14px; }
html[data-v="cream"] main .take figcaption b { color: var(--cr-ink); }
html[data-v="cream"] main .take figcaption span { color: var(--cr-ink-2); font-size: 16px; line-height: 1.45; }
html[data-v="cream"] main .take--cut figcaption b { color: var(--cr-o-hot); }
html[data-v="cream"] main .cutmark { background: var(--cr-o-btn); color: var(--cr-ink); box-shadow: 0 0 0 4px var(--cr-b), 0 10px 20px -8px rgba(70, 40, 15, .6); }

/* the notes: espresso, orange labels, cream type */
html[data-v="cream"] main .note { padding: 16px 18px 18px; }
html[data-v="cream"] main .note-k { color: var(--orange); font-size: 12px; margin-bottom: 6px; }
html[data-v="cream"] main .note p { color: var(--dk-cream); font-size: 17px; line-height: 1.5; }
html[data-v="cream"] main .say2-l { color: var(--cr-ink); margin-top: 40px; }
html[data-v="cream"] main .steps { margin-top: 16px; padding: 6px 20px 8px; }
html[data-v="cream"] main .steps li { padding: 16px 0 18px; border-bottom: 1px solid var(--dk-rule); grid-template-columns: 34px minmax(0, 1fr); }
html[data-v="cream"] main .steps li::before { color: var(--orange); }
html[data-v="cream"] main .steps .note-k { margin-bottom: 4px; }
html[data-v="cream"] main .steps li p { color: var(--dk-2); font-size: 17px; line-height: 1.5; font-weight: 500; }
html[data-v="cream"] main .steps li p q { color: var(--dk-cream); }
html[data-v="cream"] main .tweak { margin-top: 22px; color: var(--cr-ink-2); font-size: 17px; line-height: 1.6; }
html[data-v="cream"] main .tweak q { color: var(--cr-ink); }
html[data-v="cream"] main .no3 { color: var(--cr-ink); margin-top: 26px; }

/* the quote set in type */
html[data-v="cream"] main .said { margin-top: 36px; }
html[data-v="cream"] main .said::before { color: var(--cr-o-hot); text-shadow: none; }
html[data-v="cream"] main .said-q { color: var(--cr-ink-2); font-size: 19px; line-height: 1.5; }
html[data-v="cream"] main .said-q b { color: var(--cr-ink); }
html[data-v="cream"] main .said--big .said-q { color: var(--cr-ink); font-size: clamp(36px, 10vw, 46px); line-height: .94; }
html[data-v="cream"] main .said--big .said-q b { color: var(--cr-o-hot); text-shadow: none; }
html[data-v="cream"] main .said-by { color: var(--cr-ink-3); font-size: 12px; }
html[data-v="cream"] main .said-by b { color: var(--cr-ink); }

/* the styles and the full menu of effects: ink lists on firm rules */
html[data-v="cream"] main .shots-h { color: var(--cr-ink); margin-top: 72px; }
html[data-v="cream"] main .shots-h + p { margin-top: 14px; color: var(--cr-ink-2); font-size: 17.5px; line-height: 1.6; max-width: 34em; }
html[data-v="cream"] main .shots-h + p q { color: var(--cr-ink); }
html[data-v="cream"] main .fxmenu { border-top-color: var(--cr-ink); margin-top: 24px; }
html[data-v="cream"] main .fxg { border-bottom-color: var(--cr-rule); }
html[data-v="cream"] main .fxg summary b { color: var(--cr-ink); }
html[data-v="cream"] main .fxg summary::before,
html[data-v="cream"] main .fxg summary::after { background: var(--cr-o-hot); }
html[data-v="cream"] main .fxg li { border-top-color: var(--cr-rule); color: var(--cr-ink-2); font-size: 17px; line-height: 1.5; padding: 11px 0 12px; }
html[data-v="cream"] main .fxg li b { color: var(--cr-ink); }
html[data-v="cream"] main .stylemenu .own { margin-top: 24px; padding: 20px 22px 22px; transform: none; }
html[data-v="cream"] main .stylemenu .own-h { color: var(--dk-cream); margin: 4px 0 10px; }
html[data-v="cream"] main .stylemenu .own p:not(.own-h) { color: var(--dk-2); font-size: 17px; line-height: 1.5; }
html[data-v="cream"] main .shots { margin-top: 32px; }
html[data-v="cream"] main .shot h4 { color: var(--cr-ink); }
html[data-v="cream"] main .shot .note { padding: 14px 16px 15px; }
html[data-v="cream"] main .shot .note p { font-size: 16.5px; }
html[data-v="cream"] main .more-h { color: var(--cr-ink); margin-top: 72px; }
html[data-v="cream"] main .more-h + p { margin-top: 12px; color: var(--cr-ink-2); font-size: 17.5px; line-height: 1.6; }
html[data-v="cream"] main .fxflat { border-top: 2px solid var(--cr-ink); margin-top: 24px; }
html[data-v="cream"] main .fxflat li { border-bottom-color: var(--cr-rule); color: var(--cr-ink-2); font-size: 17px; line-height: 1.5; padding: 11px 0 12px; }
html[data-v="cream"] main .fxflat li b { color: var(--cr-ink); }
@media (min-width: 700px) {
  html[data-v="cream"] main .fxg { border-top-color: var(--cr-ink); }
  html[data-v="cream"] main .stylemenu .own { margin-top: 0; }
}
@media (min-width: 1000px) {
  html[data-v="cream"] main .stylemenu .own { padding: 24px 26px 26px; transform: none; }
  html[data-v="cream"] main .shots-h { margin-top: 96px; }
  html[data-v="cream"] main .more-h { margin-top: 88px; }
}

/* =====================================================================
   TRIAL REELS + CAROUSEL STUDIO
   ===================================================================== */
html[data-v="cream"] main .trial figcaption { margin-top: 14px; }
html[data-v="cream"] main .trial figcaption b { color: var(--cr-ink); }
html[data-v="cream"] main .trial--posted figcaption b { color: var(--cr-o-hot); }
html[data-v="cream"] main .trial figcaption span { color: var(--cr-ink-2); font-size: 16px; line-height: 1.45; }
html[data-v="cream"] main .swipe-hint { color: var(--cr-ink-3); font-size: 12px; margin-top: 14px; }
html[data-v="cream"] main .trials-how { margin-top: 44px; }

html[data-v="cream"] main .cs-stack img { filter: brightness(.85) saturate(.92); box-shadow: 0 0 0 1px rgba(23, 17, 12, .25), 0 12px 22px -14px rgba(40, 22, 8, .5); }
html[data-v="cream"] main .cs-cover { box-shadow: var(--cr-ring), var(--cr-print); }
html[data-v="cream"] main .cs-look { color: var(--cr-ink); }
html[data-v="cream"] main .cs-how { color: var(--cr-ink-2); font-size: 12px; line-height: 1.5; }
html[data-v="cream"] main .cs-card--mine .cs-look { color: var(--cr-o-hot); }
html[data-v="cream"] main .cs-card--mine .cs-cover { box-shadow: 0 0 0 2px var(--cr-o-hot), var(--cr-print); }
html[data-v="cream"] main .cs-note { color: var(--cr-ink-3); font-size: 13.5px; line-height: 1.55; margin-top: 26px; text-transform: none; letter-spacing: 0; max-width: 60ch; }
html[data-v="cream"] main .cs-looks { border-top: 2px solid var(--cr-ink); margin-top: 36px; padding-top: 18px; }
html[data-v="cream"] main .cs-looks-h { color: var(--cr-ink-2); font-size: 12px; }
html[data-v="cream"] main .cs-looks-h b { color: var(--cr-o-deep); }
html[data-v="cream"] main .cs-looks li { border: 1.5px solid var(--cr-ink); color: var(--cr-ink); padding: 8px 14px 7px; }
html[data-v="cream"] main .cs-ways { margin-top: 40px; }
html[data-v="cream"] main .cs-ways .note { padding: 20px 22px 22px; transform: none; }
html[data-v="cream"] main .cs-ways .note p { color: var(--dk-2); font-size: 17px; line-height: 1.5; }
html[data-v="cream"] main .cs-ways .note q { color: var(--dk-cream); }
html[data-v="cream"] main .cs-ways .note p.t { color: var(--dk-cream); margin: 4px 0 10px; }
html[data-v="cream"] main .cs-ways .cs-paste { box-shadow: inset 0 0 0 2px var(--orange), var(--dk-shadow-sm); }

/* =====================================================================
   REPLIES: white screenshots sit as prints on the desk
   ===================================================================== */
html[data-v="cream"] main .replies-grid img { box-shadow: var(--cr-ring), var(--cr-print-sm); }
html[data-v="cream"] main .replies-grid figcaption { color: var(--cr-ink-2); }
html[data-v="cream"] main .replies-grid .reply-wide figcaption { color: var(--cr-ink); font-size: 17.5px; line-height: 1.55; margin-top: 14px; }
html[data-v="cream"] main .replies-grid .reply-wide figcaption span { color: var(--cr-ink-3); font-size: 12px; margin-top: 8px; }
html[data-v="cream"] main .replies-note { color: var(--cr-ink-3); margin-top: 24px; }

/* =====================================================================
   LAUNCH WEEK: the rig as a print, the board as one espresso card, the first-100 ticket
   ===================================================================== */
html[data-v="cream"] main .rig {
  margin: 0 0 32px; border-radius: 10px; box-shadow: var(--cr-ring), var(--cr-print);
  -webkit-mask-image: none; mask-image: none;
}
html[data-v="cream"] main .ready .no { color: var(--cr-o-hot); text-shadow: none; }
html[data-v="cream"] main .ready-p { color: var(--cr-ink-2); font-size: 18px; line-height: 1.6; margin-top: 22px; }
html[data-v="cream"] main .board { margin-top: 32px; border-top: 0; overflow: hidden; }
html[data-v="cream"] main .board li,
html[data-v="cream"] main .board li.later { padding: 17px 18px 16px; border-bottom: 1px solid var(--dk-rule); background: none; }
html[data-v="cream"] main .board li:last-child { border-bottom: 0; }
html[data-v="cream"] main .board li:not(.later) { background: var(--dk-lift); }
html[data-v="cream"] main .board li:not(.later) .lamp::before { box-shadow: 0 0 0 3px rgba(255, 91, 31, .25), 0 0 18px 5px rgba(255, 91, 31, .55); }
html[data-v="cream"] main .board b { color: var(--dk-cream); }
html[data-v="cream"] main .board .when { color: var(--dk-2); font-size: 12px; }
html[data-v="cream"] main .board .here { color: var(--orange); }
html[data-v="cream"] main .board .pr { color: var(--orange); text-shadow: none; }
html[data-v="cream"] main .board li.later b,
html[data-v="cream"] main .board li.later .pr,
html[data-v="cream"] main .board li.later .when,
html[data-v="cream"] main .board .lamp.soon { color: var(--dk-3); text-shadow: none; }
html[data-v="cream"] main .board .lamp.soon::before { box-shadow: inset 0 0 0 1.5px var(--dk-3); }
html[data-v="cream"] main .board li.gone b,
html[data-v="cream"] main .board li.gone .pr { text-decoration-color: var(--orange); }
html[data-v="cream"] main .bonus { margin-top: 36px; padding: 24px 22px 26px; }
html[data-v="cream"] main .bonus::before,
html[data-v="cream"] main .bonus::after { background: var(--cr-b); box-shadow: none; }
html[data-v="cream"] main .bonus-k { background: var(--orange); color: var(--cr-ink); }
html[data-v="cream"] main .bonus h3 { color: var(--dk-cream); margin-top: 16px; }
html[data-v="cream"] main .bonus h3 em { color: var(--orange); }
html[data-v="cream"] main .bonus p { color: var(--dk-2); font-size: 17px; line-height: 1.55; margin-top: 14px; }
html[data-v="cream"] main .bonus p b { color: var(--dk-cream); }
html[data-v="cream"] main .bonus dl { border-top: 1px dashed var(--dk-rule-2); font-size: 16.5px; line-height: 1.5; margin-top: 20px; padding-top: 18px; }
html[data-v="cream"] main .bonus dt { color: var(--orange); font-size: 12px; }
html[data-v="cream"] main .bonus dd { color: var(--dk-cream); }
html[data-v="cream"] main .bonus dd s { color: var(--dk-3); text-decoration-color: var(--orange); }
html[data-v="cream"] main .spots-l { color: var(--dk-cream); }
html[data-v="cream"] main .spots-l b { color: var(--orange); }
html[data-v="cream"] main .spots-bar { background: rgba(244, 237, 224, .14); }
html[data-v="cream"] main .spots-bar i { background: var(--orange); }
@media (min-width: 768px) {
  html[data-v="cream"] main .rig { margin: 0 0 44px; }
}
@media (min-width: 900px) {
  html[data-v="cream"] main .board { margin-top: 8px; }
  html[data-v="cream"] main .board li,
  html[data-v="cream"] main .board li.later { padding: 20px 24px 19px; }
  html[data-v="cream"] main .bonus { padding: 36px 40px 38px; }
  html[data-v="cream"] main .bonus .bonus-r { padding-top: 36px; }
  html[data-v="cream"] main .bonus dl { border-top: 0; margin-top: 0; padding-top: 0; }
}

/* =====================================================================
   PRICE + GUARANTEE: the night plate comes down, the figure is the light, the guarantee is an espresso card
   ===================================================================== */
html[data-v="cream"] main .price-plate { display: none; }
html[data-v="cream"] main .price::after { display: none; }
html[data-v="cream"] main .price .wrap { padding-top: 0; }
html[data-v="cream"] main .deal { gap: 32px; }
html[data-v="cream"] main .figure { margin-top: 22px; }
html[data-v="cream"] main .figure .now { color: var(--cr-o-hot); text-shadow: none; }
/* Phones: the figure is sized so "$97 after Oct 22" fits inside the gutter. */
@media (max-width: 699px) {
  html[data-v="cream"] main .figure { gap: 10px; }
  html[data-v="cream"] main .figure .now { font-size: clamp(120px, 39vw, 260px); }
  html[data-v="cream"] main .figure .side { letter-spacing: .03em; }
}
html[data-v="cream"] main .figure .side { color: var(--cr-ink-2); font-size: 12.5px; line-height: 1.6; }
html[data-v="cream"] main .figure .side s { color: var(--cr-ink); }
html[data-v="cream"] main .was { color: var(--cr-ink-3); text-decoration-color: var(--cr-o-hot); }
html[data-v="cream"] main .terms { color: var(--cr-ink); font-size: 19px; line-height: 1.5; margin-top: 22px; }
html[data-v="cream"] main .stack { border-top: 2px solid var(--cr-ink); margin-top: 28px; }
html[data-v="cream"] main .stack li { border-bottom-color: var(--cr-rule); color: var(--cr-ink-2); font-size: 17px; line-height: 1.5; padding: 12px 0 13px; }
html[data-v="cream"] main .stack li b { color: var(--cr-ink); }
html[data-v="cream"] main .stack svg { color: var(--cr-o-hot); }
html[data-v="cream"] main .stack li.st-bonus { color: var(--cr-ink); }
html[data-v="cream"] main .stack li.st-bonus b { color: var(--cr-o-deep); }
html[data-v="cream"] main .timer { border-top: 1px solid var(--cr-ink); border-bottom: 1px solid var(--cr-ink); padding: 18px 0 17px; }
html[data-v="cream"] main .timer-l { color: var(--cr-ink-2); font-size: 12.5px; }
html[data-v="cream"] main .timer-l b { color: var(--cr-ink); font-weight: 700; }
html[data-v="cream"] main .cells b { color: var(--cr-ink); }
html[data-v="cream"] main .cells i { color: var(--cr-ink-3); }
html[data-v="cream"] main .cells em { color: var(--cr-o-hot); }
html[data-v="cream"] main .why { color: var(--cr-ink-2); font-size: 17.5px; line-height: 1.6; }
html[data-v="cream"] main .need { color: var(--cr-ink); font-size: 17.5px; line-height: 1.6; margin-top: 18px; }
html[data-v="cream"] main .guar { padding: 28px 24px 30px; }
html[data-v="cream"] main .guar h2 { color: var(--dk-cream); }
html[data-v="cream"] main .guar p { color: var(--dk-2); font-size: 17.5px; line-height: 1.55; margin-top: 16px; }
html[data-v="cream"] main .guar p b { color: var(--dk-cream); }
html[data-v="cream"] main .guar .guar-s { color: var(--dk-3); font-size: 15.5px; border-top: 1px dashed var(--dk-rule-2); margin-top: 20px; padding-top: 16px; }
html[data-v="cream"] main .guar a { color: var(--dk-cream); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
html[data-v="cream"] main .guar a:hover { color: var(--orange); }
html[data-v="cream"] main .guar a:focus-visible { outline-color: var(--dk-cream); }
@media (min-width: 960px) {
  html[data-v="cream"] main .deal { row-gap: 34px; }
  html[data-v="cream"] main .guar { margin-top: 128px; padding: 40px 38px 42px; transform: none; }
  html[data-v="cream"] main .terms { font-size: 21px; }
}

/* =====================================================================
   WHO IT IS FOR: the empty chair as a print above the headline, the "not for you" list on espresso
   ===================================================================== */
html[data-v="cream"] main .chair {
  margin: 0; height: 230px; border-radius: 10px; box-shadow: var(--cr-ring), var(--cr-print);
  -webkit-mask-image: none; mask-image: none;
}
html[data-v="cream"] main .chair img { object-position: 74% 60%; }
html[data-v="cream"] main .forwho .h2 { margin-top: 32px; text-shadow: none; }
html[data-v="cream"] main .forh-sub { color: var(--cr-ink-2); }
html[data-v="cream"] main .fits { margin-top: 36px; gap: 36px; }
html[data-v="cream"] main .fit-l { color: var(--cr-ink-3); border-bottom: 1px solid var(--cr-ink); font-size: 12px; font-weight: 700; }
html[data-v="cream"] main .fit li { border-bottom-color: var(--cr-rule); color: var(--cr-ink-2); font-size: 17.5px; line-height: 1.55; padding: 16px 0 16px 38px; }
html[data-v="cream"] main .fit li b { color: var(--cr-ink); font-size: 17.5px; }
html[data-v="cream"] main .fit li svg { top: 18px; }
html[data-v="cream"] main .fit--yes li { color: var(--cr-ink); }
html[data-v="cream"] main .fit--yes svg { color: var(--cr-o-hot); }
html[data-v="cream"] main .fit-card { padding: 22px 22px 8px; }
html[data-v="cream"] main .fit-card .fit-l { color: var(--dk-3); border-bottom: 1px dashed var(--dk-rule-2); }
html[data-v="cream"] main .fit-card .fit li { color: var(--dk-2); border-bottom-color: var(--dk-rule); }
html[data-v="cream"] main .fit-card .fit li b { color: var(--dk-cream); }
html[data-v="cream"] main .fit-card .fit svg { color: var(--orange); }
@media (min-width: 700px) {
  html[data-v="cream"] main .forwho { overflow: visible; }
  html[data-v="cream"] main .forwho-top { display: block; min-height: 0; }
  html[data-v="cream"] main .chair {
    position: relative; z-index: 0; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 1800 / 600;
    -webkit-mask-image: none; mask-image: none;
  }
  html[data-v="cream"] main .chair img { object-position: 50% 62%; transform: scale(1.5); transform-origin: 82% 64%; filter: brightness(1.1); }
  html[data-v="cream"] main .forwho .h2 { margin-top: 48px; max-width: 11em; }
}
@media (min-width: 900px) {
  html[data-v="cream"] main .fits { margin-top: 52px; }
  html[data-v="cream"] main .fit-card { padding: 28px 30px 12px; transform: none; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
html[data-v="cream"] main .faq { border-top: 2px solid var(--cr-ink); margin-top: 28px; }
html[data-v="cream"] main .faq details { border-bottom-color: var(--cr-rule); }
html[data-v="cream"] main .faq details[open] { background: none; }
html[data-v="cream"] main .faq summary { color: var(--cr-ink); padding: 20px 44px 18px 0; }
html[data-v="cream"] main .faq summary::before,
html[data-v="cream"] main .faq summary::after { background: var(--cr-o-hot); }
html[data-v="cream"] main .faq details p { color: var(--cr-ink-2); font-size: 17.5px; line-height: 1.6; padding: 0 0 24px; max-width: 36em; }
html[data-v="cream"] main .faq details p q { color: var(--cr-ink); }
@media (min-width: 900px) {
  html[data-v="cream"] main .faqs { background: var(--cr-a); }
  html[data-v="cream"] main .faq { margin-top: 0; }
}

/* =====================================================================
   LAST SHOT: Marc's frame stays a lit print of the night set, the ask in ink
   ===================================================================== */
html[data-v="cream"] main .set {
  margin: 0; border-radius: 12px; background: #0B0A09; box-shadow: var(--cr-ring), var(--cr-print);
  -webkit-mask-image: none; mask-image: none;
}
html[data-v="cream"] main .set-plate { -webkit-mask-image: none; mask-image: none; }
html[data-v="cream"] main .set-words { color: #F4EDE0; text-shadow: none; }
html[data-v="cream"] main .about p { color: var(--cr-ink-2); font-size: 17.5px; line-height: 1.6; }
html[data-v="cream"] main .about p + p { margin-top: 14px; }
html[data-v="cream"] main .about p:first-child { color: var(--cr-ink); font-size: 19px; }
html[data-v="cream"] main .ask { margin-top: 56px; padding-bottom: 72px; }
html[data-v="cream"] main .ask .h2 span:last-child { color: var(--cr-o-hot); }
html[data-v="cream"] main .ask-p { color: var(--cr-ink); font-size: 18.5px; line-height: 1.55; margin-top: 22px; }
html[data-v="cream"] main .credits { border-top: 1px solid var(--cr-ink); color: var(--cr-ink-3); font-size: 12px; }
html[data-v="cream"] main .credits b { color: var(--cr-ink); }
@media (min-width: 900px) {
  html[data-v="cream"] main .ask { padding-bottom: 104px; }
}

/* ---------- Footer: a deeper cream strip under an ink rule ---------- */
html[data-v="cream"] footer { background: #E3D8C4; border-top: 1px solid var(--cr-ink); color: var(--cr-ink-3); font-size: 13.5px; }
html[data-v="cream"] footer a { color: var(--cr-ink); text-decoration-color: var(--cr-o-hot); }
html[data-v="cream"] footer .ph { color: var(--cr-ink); outline-color: var(--cr-o-hot); }

/* ---------- Docked buy bar: the same espresso as the documents ---------- */
html[data-v="cream"] .dock {
  background: rgba(31, 23, 18, .97); color: var(--dk-cream);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--dk-rule);
  box-shadow: 0 -12px 28px -18px rgba(40, 22, 8, .6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-v="cream"] .dock { background: var(--dk); }
}
html[data-v="cream"] .dock .btn { background: var(--orange); color: var(--cr-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
html[data-v="cream"] .dock .btn:hover { background: #FF6A33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
html[data-v="cream"] .dock .btn:active { background: var(--orange-press); }
html[data-v="cream"] .dock .btn:focus-visible { outline-color: var(--dk-cream); }
html[data-v="cream"] .dock-p b { color: var(--orange); }
html[data-v="cream"] .dock-k { color: var(--orange); }
html[data-v="cream"] .dock-cd { color: var(--dk-cream); }