/* ==========================================================================
   Bârlogul Acasă — v2 cinematic lander · "Drumul cafelei până în bârlogul tău"
   ========================================================================== */

:root {
  --bg: #0E0A07;
  --bg-2: #1A120C;
  --espresso: #3A2817;
  --kraft: #C8A97E;
  --cream: #F2EDE4;
  --cream-70: rgba(242, 237, 228, .7);
  --cream-50: rgba(242, 237, 228, .5);
  --sage: #B5C4A1;
  --orange: #E8722A;
  --border: rgba(242, 237, 228, .14);
  --stack: rgba(200, 169, 126, .12);
  --stack-hero: rgba(200, 169, 126, .07);

  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-edit: "Bitter", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --lh-display: 1.14;
  --h1: clamp(44px, 2.3rem + 3.4vw, 92px);
  --h2: clamp(32px, 1.6rem + 1.95vw, 60px);
  --edit: clamp(19px, 1.05rem + .5vw, 26px);
  --body: clamp(16px, .95rem + .15vw, 18px);
  --price: clamp(40px, 2.2rem + 1.1vw, 56px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);
  --t-micro: 150ms;
  --t-comp: 400ms;
  --t-sect: 600ms;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  --section: clamp(96px, 10vw, 160px);

  /* the light palette (/cumpara, /birouri and every dialog: quiz, B2B configurator, contact) */
  --s-bg: #FAF5EB;
  --s-bg-2: #F2EDE4;
  --s-card: #FFFCF6;
  --s-ink: #302119;
  --s-ink-2: #3A2817;
  --s-hover: #4A3320;
  --s-muted: rgba(48, 33, 25, .72);
  --s-soft: rgba(48, 33, 25, .56);
  --s-line: rgba(48, 33, 25, .12);
  --s-line-2: rgba(48, 33, 25, .2);
  --s-kraft: #C8A97E;
  --s-kraft-tint: #F1E6D3;
  --s-shadow: 0 1px 2px rgba(48, 33, 25, .05), 0 12px 32px -14px rgba(48, 33, 25, .16);
  --s-shadow-lg: 0 2px 4px rgba(48, 33, 25, .05), 0 24px 56px -24px rgba(48, 33, 25, .28);

  /* dotted path strokes (kraft) */
  --dots-v: radial-gradient(circle, var(--kraft) .9px, transparent 1.3px);
  --dots-h: radial-gradient(circle, var(--kraft) .9px, transparent 1.3px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 600; color: var(--cream); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--cream); color: var(--bg); padding: 10px 16px; font-weight: 600;
  text-decoration: none; border-radius: 4px;
}
.skip-link:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
.display, h1, h2, .h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  /* room for Î Â Ă between uppercase lines: in Anton the accents rise to 1.10em (caps .86em),
     so anything under ~1.12 lets them touch the line above (they collided at .92) */
  line-height: var(--lh-display);
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
.editorial { font-family: var(--font-edit); font-style: italic; font-weight: 400; font-size: var(--edit); line-height: 1.35; }
.caption {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kraft);
}
.lead { color: var(--cream-70); max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 26px;
  font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: .01em;
  border-radius: 4px; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cream); color: var(--bg); }
.btn--primary:hover { background: #fff8ea; }
.btn--outline { border: 1px solid var(--kraft); color: var(--cream); }
.btn--outline:hover { background: var(--espresso); border-color: var(--cream); }
.btn--orange { background: var(--orange); color: var(--bg); }
.btn--orange:hover { background: #f5843c; }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }

.link-tertiary {
  color: var(--cream-70); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--border); padding: 4px 0 0;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-tertiary:hover { color: var(--cream); border-color: var(--kraft); }

.badge {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.badge--orange { background: var(--orange); color: var(--bg); }
.badge--tilt { transform: none; }

.doodle { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream); flex: none; }
.doodle--bear { width: 80px; height: 80px; }
.doodle--bear img { width: 64px; height: 64px; }
.doodle--xs { width: 32px; height: 32px; }
.doodle--xs img { width: 24px; height: 24px; }

/* ---------- layout ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- media wrappers ---------- */
.media {
  position: relative; overflow: hidden; width: 100%;
  background: radial-gradient(120% 90% at 30% 30%, #2a1b10 0%, #16100a 55%, #0b0806 100%);
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media > video, .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 14px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
}
.nav.is-scrolled { background: rgba(14, 10, 7, .96); border-color: var(--border); padding: 8px 0; }
.nav__inner {
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
/* Bârlogul Acasă horizontal logo (cream on the dark nav); the emblem replaces it below 360px via <picture> */
.nav__brand picture { display: block; }
.nav__logo { display: block; height: 40px; width: auto; max-width: none; }
.nav__links { display: flex; gap: 32px; }
.nav__links a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--cream-70);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--cream); }
/* „Urmărește comanda” as an icon on mobile, where the text links are hidden */
.nav__track { display: none; }

/* ==========================================================================
   00 HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 120px 0 0;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(70% 90% at 78% 55%, #3a2412 0%, #1c1209 45%, #0b0806 100%);
}
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 10, 7, .75), transparent 60%);
}
.hero__inner {
  flex: 1; display: flex; align-items: center;
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative;
  padding-bottom: 40px;
}
.hero__content { max-width: 720px; }
.hero__badge { margin-bottom: 28px; transform-origin: left center; }
.hero__line { display: block; }
.hero__sub { margin-top: 28px; max-width: 540px; font-size: 18px; color: var(--cream-70); }
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.trust { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--cream-70); }
.trust svg, .trust i { width: 20px; height: 20px; color: var(--kraft); flex: none; }

/* the path begins here */
.hero__cue {
  position: relative; z-index: 1;
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-decoration: none;
}
.hero__cue .caption { color: var(--kraft); font-size: 12px; margin-left: 2px; }
.hero__cue-line {
  display: block; width: 2px; height: 72px; margin-left: 15px;
  background-image: var(--dots-v); background-size: 2px 10px; background-repeat: repeat-y;
}

/* hero entrance (once, on load) */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stamp-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.js .hero__badge { animation: stamp-in var(--t-comp) var(--ease-stamp) both; animation-delay: 120ms; }
.js .hero__line { animation: rise var(--t-sect) var(--ease) both; }
.js .hero__line:nth-child(1) { animation-delay: 180ms; }
.js .hero__line:nth-child(2) { animation-delay: 260ms; }
.js .hero__line:nth-child(3) { animation-delay: 340ms; }
.js .wordstack--hero span { animation: fade 800ms var(--ease) both; }
.js .wordstack--hero span:nth-child(2) { animation-delay: 80ms; }
.js .wordstack--hero span:nth-child(3) { animation-delay: 160ms; }

/* ---------- word stacks ---------- */
.wordstack {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  color: var(--stack); line-height: .86; white-space: nowrap;
}
.wordstack--hero { right: -6vw; top: 50%; transform: translateY(-50%); font-size: clamp(96px, 15vw, 240px); color: var(--stack-hero); }
.wordstack--plans { right: -4vw; top: -40px; font-size: clamp(110px, 14vw, 220px); color: rgba(200, 169, 126, .055); }

/* ==========================================================================
   THE PATH — desktop rail
   ========================================================================== */
.rail {
  position: fixed; left: 48px; top: 50%; z-index: 40;
  width: 24px; height: 420px; transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
  display: none;
}
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail__base, .rail__draw { position: absolute; left: 0; top: 0; overflow: visible; }
.rail__base line, .rail__draw line { stroke: var(--kraft); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.rail__base line { opacity: .35; }
.rail__draw { clip-path: inset(0 0 100% 0); }
.rail__stops { position: absolute; inset: 0; }
.rail__stop { position: absolute; left: 0; top: var(--y, 0px); transform: translateY(-50%); }
.rail__stop a {
  display: flex; align-items: center; gap: 10px; height: 28px; text-decoration: none; padding-left: 7px; margin-left: 0;
}
.rail__dot {
  width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--kraft); background: var(--bg); flex: none;
  transition: background-color .3s var(--ease);
}
.rail__stop.is-passed .rail__dot { background: var(--kraft); }
.rail__stop.is-stamped .rail__dot { animation: stamp 300ms var(--ease-stamp) both; }
@keyframes stamp { from { transform: scale(1.6); } to { transform: scale(1); } }
.rail__num { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--kraft); opacity: .55; transition: opacity .3s var(--ease); }
.rail__stop.is-passed .rail__num, .rail__stop:hover .rail__num { opacity: 1; }
.rail__end {
  position: absolute; left: 12px; top: 420px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kraft); transform: translate(-50%, -50%); opacity: .35;
}
.rail__end.is-passed { opacity: 1; }
.rail__bear {
  position: absolute; left: 12px; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cream); display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  will-change: transform;
}
.rail__bear img { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .rail { display: block; }
  /* the fixed rail is the one and only line: hide the in-flow cue bear/line and the chapter-01 start line */
  .hero__cue .doodle, .hero__cue-line, .path-start { display: none; }
  /* reserve room for the rail: content starts at least --rail-space from the left, stays centred on wide screens */
  :root { --rail-space: 136px; --edge: max(var(--rail-space), (100% - var(--container)) / 2); }
  .container, .hero__content, .hero__cue, .nav__inner {
    width: min(var(--container), 100% - var(--gutter) - var(--rail-space));
    margin-left: max(var(--rail-space), (100% - var(--container)) / 2); margin-right: auto;
  }
}
@media (min-width: 900px) and (max-width: 1099px) { :root { --rail-space: 96px; } }
@media (min-width: 900px) and (max-width: 1099px) {
  .rail { left: 32px; }
  .rail__num { display: none; }
}

/* ==========================================================================
   CHAPTERS
   ========================================================================== */
.ch { position: relative; padding: var(--section) 0; }
.ch--01 { padding-top: 200px; }
.ch--01 .divider-branch {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: min(900px, 70vw); height: auto; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
}
.path-start {
  position: absolute; top: 0; left: calc(var(--edge) + 15px); width: 2px; height: 176px;
  background-image: var(--dots-v); background-size: 2px 10px; background-repeat: repeat-y;
  transform-origin: top; transform: scaleY(0); transition: transform 800ms var(--ease);
}
.path-start.is-drawn { transform: none; }

.ch__head { position: relative; max-width: 720px; }
.ch__caption { margin-bottom: 20px; }
.ch__title--sm { font-size: clamp(32px, 1.6rem + 1.6vw, 52px); }
.ch__lead { margin-top: 22px; color: var(--cream-70); max-width: 34ch; }
.ch__cta { margin-top: clamp(40px, 5vw, 64px); }
/* mobile chapter stamp line (hidden on desktop) */
.ch__line { display: none; }

.handoff {
  margin-top: clamp(48px, 6vw, 80px);
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  font-family: var(--font-edit); font-style: italic; font-size: clamp(19px, 1.05rem + .5vw, 24px); color: var(--kraft); text-align: right;
}
.handoff__bear { display: none; width: 24px; height: 24px; }
.handoff__bear img { width: 18px; height: 18px; }

/* chapter openers (once) */
.js .ch .ch__caption { opacity: 0; transform: translateX(-24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .ch .ch__title { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: 80ms; }
.js .ch .ch__lead { opacity: 0; transition: opacity 600ms var(--ease); transition-delay: 220ms; }
.js .ch.in .ch__caption, .js .ch.in .ch__title, .js .ch.in .ch__lead { opacity: 1; transform: none; }
.js .handoff { opacity: 0; transition: opacity 600ms var(--ease); }
.js .ch.in .handoff { opacity: 1; transition-delay: 500ms; }

/* ---------- 01 origins ---------- */
.origins__grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.origin { margin: 0; }
.origin--offset { margin-top: 64px; }
.origin figcaption { margin-top: 18px; }
.origin__bear { font-family: var(--font-edit); font-style: italic; color: var(--cream-70); font-size: 17px; }
.origin__name { margin-top: 8px; font-size: clamp(22px, 1.1rem + .8vw, 30px); }
.origin__notes { margin-top: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--sage); }
.js .origin { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .ch.in .origin { opacity: 1; transform: none; }
.js .ch.in .origin:nth-child(1) { transition-delay: 200ms; }
.js .ch.in .origin:nth-child(2) { transition-delay: 290ms; }
.js .ch.in .origin:nth-child(3) { transition-delay: 380ms; }
.js .ch--01.in .handoff { transition-delay: 700ms; }

/* ---------- 02 / 03 chess rows ---------- */
.chess {
  display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto auto;
  grid-template-areas: "media head" "media body";
  column-gap: clamp(32px, 6vw, 96px); row-gap: 0; align-items: center;
}
.chess--flip { grid-template-columns: 5fr 7fr; grid-template-areas: "head media" "body media"; }
.chess__media { grid-area: media; }
.chess__head { grid-area: head; align-self: end; max-width: 480px; }
.chess__body { grid-area: body; align-self: start; max-width: 480px; }
.chess--flip .chess__head, .chess--flip .chess__body { justify-self: end; width: 100%; }
.chess__body .lead { margin-top: 22px; }
.chess__body .btn { margin-top: 32px; }

/* video wipes: "the coffee moves toward you" */
.js .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 800ms var(--ease); }
.js .wipe--r { clip-path: inset(0 0 0 100%); }
.js .ch.in .wipe { clip-path: inset(0 0 0 0); }

/* ---------- 03 steps line ---------- */
.steps { position: relative; margin-top: clamp(56px, 7vw, 96px); --sgap: clamp(32px, 4vw, 64px); }
.steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sgap); }
.steps__line {
  position: absolute; top: 23px; left: 48px; right: calc((100% - 2 * var(--sgap)) / 3 - 24px); height: 2px; z-index: 0;
  background-image: var(--dots-h); background-size: 10px 2px; background-repeat: repeat-x;
  transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease);
}
.js .ch.in .steps__line { transform: none; transition-delay: 200ms; }
.step { position: relative; z-index: 1; }
.step__icon {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--kraft); background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; color: var(--kraft);
}
.step__icon svg { width: 22px; height: 22px; }
.step__num { position: absolute; left: 58px; top: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--kraft); opacity: .7; }
.step__title { margin-top: 20px; font-size: clamp(20px, 1rem + .6vw, 26px); }
.step p { margin-top: 10px; color: var(--cream-70); font-size: 16px; max-width: 32ch; }
.js .step__icon { transform: scale(.6); opacity: 0; transition: transform 400ms var(--ease-stamp), opacity 300ms var(--ease); }
.js .ch.in .step__icon { transform: none; opacity: 1; }
.js .ch.in .step:nth-child(1) .step__icon { transition-delay: 800ms; }
.js .ch.in .step:nth-child(2) .step__icon { transition-delay: 860ms; }
.js .ch.in .step:nth-child(3) .step__icon { transition-delay: 920ms; }

/* ---------- 04 plans + versus ---------- */
.ch--04 { overflow: hidden; }
.plans__grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; position: relative; }
.plan {
  position: relative; border: 1px solid var(--border); padding: 40px 32px 32px;
  display: flex; flex-direction: column; min-height: 100%;
  transition: border-color .3s var(--ease);
}
.plan:hover { border-color: var(--kraft); }
.plan--first { border-color: var(--kraft); margin-top: -20px; }
.plan__badge { position: absolute; top: -14px; left: 24px; transform-origin: left center; }
.plan__name { font-size: 26px; color: var(--kraft); }
.plan__price { margin-top: 18px; display: flex; align-items: baseline; gap: 12px; }
.plan__amount { font-size: var(--price); line-height: 1; }
.plan__desc { margin-top: 20px; color: var(--cream-70); flex: 1; }
.plan .btn { margin-top: 32px; }
.js .plan { opacity: 0; transform: scale(.97); transition: opacity 400ms var(--ease), transform 400ms var(--ease-stamp), border-color .3s var(--ease); }
.js .ch.in .plan { opacity: 1; transform: none; }
.js .ch.in .plan:nth-child(1) { transition-delay: 160ms; }
.js .ch.in .plan:nth-child(2) { transition-delay: 240ms; }
.js .ch.in .plan:nth-child(3) { transition-delay: 320ms; }
.js .plan__badge { opacity: 0; transform: scale(.92); transition: opacity 300ms var(--ease), transform 400ms var(--ease-stamp); }
.js .ch.in .plan__badge { opacity: 1; transform: none; transition-delay: 420ms; }

.gift {
  margin-top: 40px; border: 1px solid var(--border); padding: 18px 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  color: var(--cream-70);
}
.gift .caption { color: var(--kraft); }
.gift__link { color: var(--cream); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: .4em; border-bottom: 1px solid var(--kraft); }
.gift__link:hover { color: var(--kraft); }

.guarantee { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.guarantee .editorial { max-width: 30ch; font-size: 22px; }
.js .guarantee { opacity: 0; transition: opacity 600ms var(--ease); }
.js .ch.in .guarantee { opacity: 1; transition-delay: 1020ms; }

.versus { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.versus__col { padding: 24px 28px; }
.versus__col--them { border: 1px solid var(--border); color: var(--cream-50); }
.versus__col--them .versus__name { color: var(--cream-50); }
.versus__col--us { background: var(--bg-2); color: var(--cream); }
.versus__col--us .versus__name { color: var(--kraft); }
.versus__col--us .versus__mark { color: var(--kraft); }
.versus__name { font-size: 20px; }
.versus__list { margin-top: 16px; display: grid; gap: 8px; font-size: 15px; }
.versus__list li { display: flex; gap: 12px; align-items: flex-start; }
.versus__mark { font-weight: 700; flex: none; width: 1.2em; }

/* ---------- 05 reviews ---------- */
.reviews__grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.review { margin: 0; border: 1px solid var(--border); padding: 32px 28px; }
.review--offset { margin-top: 40px; }
.review__stars { position: relative; display: inline-block; color: var(--kraft); letter-spacing: .2em; font-size: 16px; line-height: 1; }
.stars--base { opacity: .25; }
.stars--fill { position: absolute; left: 0; top: 0; }
.js .stars--fill { clip-path: inset(0 100% 0 0); transition: clip-path 500ms var(--ease); }
.js .ch.in .stars--fill { clip-path: inset(0 0 0 0); }
.js .ch.in .review:nth-child(1) .stars--fill { transition-delay: 300ms; }
.js .ch.in .review:nth-child(2) .stars--fill { transition-delay: 360ms; }
.js .ch.in .review:nth-child(3) .stars--fill { transition-delay: 420ms; }
.review__text { margin-top: 18px; font-size: 20px; }
.review__who { margin-top: 20px; font-size: 14px; color: var(--cream-70); font-weight: 500; }
.reviews__ig { margin-top: 40px; color: var(--cream-70); font-size: 15px; }
.reviews__ig a { color: var(--kraft); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.reviews__ig a:hover { color: var(--cream); }
.ugc { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ugc li { aspect-ratio: 1; overflow: hidden; background: #16100a; }
.ugc img { width: 100%; height: 100%; object-fit: cover; }

.divider-beans { padding: clamp(140px, 16vw, 240px) 0 0; }
.divider-beans__video {
  width: min(1100px, 100%); margin-inline: auto; aspect-ratio: 16 / 9;
  mix-blend-mode: screen; object-fit: cover; background: var(--bg);
}
.js .divider-beans { opacity: 0; transition: opacity 800ms var(--ease); }
.js .divider-beans.in { opacity: 1; }

/* the final stop */
.path-end { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(40px, 5vw, 72px) var(--gutter) 0; }
.path-end__line {
  display: block; width: 2px; height: 64px; margin-bottom: 20px;
  background-image: var(--dots-v); background-size: 2px 10px; background-repeat: repeat-y;
}
.path-end__bear { width: 56px; height: 56px; }
.path-end__bear img { width: 40px; height: 40px; }
.path-end__label { margin-top: 16px; }
.path-end__note { margin-top: 10px; color: var(--cream-70); font-size: 20px; max-width: 30ch; }
.js .path-end__bear { transform: scale(.6); opacity: 0; transition: transform 400ms var(--ease-stamp), opacity 300ms var(--ease); }
.js .path-end.in .path-end__bear { transform: none; opacity: 1; }
.js .path-end__line { transform-origin: top; transform: scaleY(0); transition: transform 600ms var(--ease); }
.js .path-end.in .path-end__line { transform: none; }
.js .path-end.in .path-end__bear { transition-delay: 500ms; }

/* ==========================================================================
   SIDE TRAIL (not on the path)
   ========================================================================== */
.b2b { background: var(--bg-2); padding: var(--section) 0; margin-top: var(--section); }
.b2b__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.b2b__media { transform: rotate(-1deg); }
.b2b__text .caption { margin-bottom: 20px; }
.b2b__title { font-size: clamp(36px, 1.8rem + 2.2vw, 64px); }
.b2b__sub { margin-top: 22px; }
.b2b__offers { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.offer { border: 1px solid var(--border); padding: 22px 20px; font-size: 15px; color: var(--cream-70); }
.offer__name { font-size: 18px; color: var(--cream); margin-bottom: 10px; }
.b2b__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.b2b__actions svg { width: 18px; height: 18px; }
.b2b__contact { margin-top: 24px; font-size: 15px; color: var(--cream-70); }
.b2b__contact a { color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.b2b__contact a:hover { color: var(--kraft); }

.faq { padding: var(--section) 0; }
.faq__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 120px; }
.faq__hint { margin-top: 24px; color: var(--cream-70); font-size: 20px; max-width: 28ch; }
.acc { border-top: 1px solid var(--border); }
.acc:last-child { border-bottom: 1px solid var(--border); }
.acc__h { margin: 0; font: inherit; }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  text-align: left; padding: 22px 0; min-height: 64px;
  font-family: var(--font-body); font-size: clamp(17px, 1rem + .3vw, 20px); font-weight: 600; color: var(--cream);
  transition: color .25s var(--ease);
}
.acc__btn:hover { color: var(--kraft); }
.acc__ind { position: relative; flex: none; width: 20px; height: 20px; }
.acc__ind::before, .acc__ind::after { content: ""; position: absolute; background: var(--kraft); transition: transform .3s var(--ease); }
.acc__ind::before { left: 0; top: 9px; width: 20px; height: 2px; }
.acc__ind::after { left: 9px; top: 0; width: 2px; height: 20px; }
.acc__btn[aria-expanded="true"] .acc__ind::after { transform: scaleY(0); }
.acc__panel { padding: 0 48px 24px 0; color: var(--cream-70); }
.acc__panel p { max-width: 60ch; }

.final { position: relative; overflow: hidden; padding: clamp(120px, 14vw, 220px) 0; }
.final__inner { position: relative; }
.final__stack { display: flex; flex-direction: column; }
.final__line, .final__title {
  display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(56px, 3rem + 7vw, 160px); line-height: var(--lh-display); white-space: nowrap;
}
.final__line--tone { color: var(--stack); }
.final__title { color: var(--cream); }
.final__actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.final__reassure { color: var(--cream-70); font-size: 20px; }
.final__bag {
  position: absolute; right: -2%; bottom: -60px; width: clamp(220px, 24vw, 380px); height: auto;
  transform: rotate(4deg); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6));
  pointer-events: none;
}

.footer { border-top: 1px solid var(--border); padding: 72px 0 40px; color: var(--cream-70); font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__logo { width: 168px; height: auto; }
.footer__word { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--cream); }
.footer__tag { font-family: var(--font-edit); font-style: italic; color: var(--cream-70); font-size: 16px; }
.footer__col .caption { margin-bottom: 14px; }
.footer__col p + p { margin-top: 0; }
.footer__col a { color: var(--cream); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer__col a:hover { color: var(--kraft); }
.footer__col .footer__small { color: var(--cream-70); font-size: 14px; gap: .4em; }
.footer__col .footer__small:hover { color: var(--kraft); }
.footer__bottom { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--cream-50); }

/* ---------- sticky bar ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(14, 10, 7, .97); border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform .45s var(--ease);
}
.sticky.is-visible { transform: none; }
.sticky__text { font-size: 13px; color: var(--cream-70); line-height: 1.3; }
.sticky__text strong { color: var(--cream); }
.sticky .btn { flex: none; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .nav__links { display: none; }

  .hero { padding: 96px 0 0; }
  .hero__inner { align-items: flex-end; padding-bottom: 32px; }
  .hero__media { background-position: 72% center; }
  .hero__video { object-position: 72% center; }
  .hero__scrim { background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(14, 10, 7, .55) 55%, rgba(14, 10, 7, .92) 100%); }
  .hero__badge { margin-bottom: 20px; font-size: 11px; letter-spacing: .1em; }
  .hero__line { display: inline; }
  .hero__sub { margin-top: 20px; font-size: 16px; }
  .hero__actions { margin-top: 28px; gap: 14px; }
  .hero__actions .btn--lg { width: 100%; }
  .trust { margin-top: 32px; flex-wrap: nowrap; gap: 8px; justify-content: space-between; }
  .trust li { font-size: 12px; gap: 6px; }
  .trust svg, .trust i { width: 16px; height: 16px; }
  .wordstack--hero { font-size: 84px; right: -10vw; top: 11vh; transform: none; }
  .hero__cue-line { height: 56px; }

  .ch--01 { padding-top: 120px; }
  .ch--01 .divider-branch { width: 60vw; }
  .path-start { height: 104px; }

  /* mobile chapter stamp: short dotted line before the caption */
  .ch__head { padding-top: 60px; }
  .ch--01 .ch__head { padding-top: 0; }
  .ch__line, .ch__head::before {
    content: ""; display: block; position: absolute; left: 15px; top: 0; width: 2px; height: 48px;
    background-image: var(--dots-v); background-size: 2px 10px; background-repeat: repeat-y;
    transform-origin: top; transform: scaleY(0); transition: transform 600ms var(--ease);
  }
  .ch--01 .ch__head::before { display: none; }
  .ch.in .ch__head::before { transform: none; }
  .js .ch .ch__caption { transform: scale(.9); transform-origin: left center; transition: opacity 300ms var(--ease), transform 400ms var(--ease-stamp); transition-delay: 350ms; }
  .js .ch.in .ch__caption { transform: none; }

  .handoff { justify-content: flex-start; text-align: left; margin-top: 48px; }
  .handoff__bear { display: inline-flex; }

  .ch { padding: 64px 0 80px; }
  .chess, .chess--flip { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; row-gap: 0; }
  .chess__head, .chess__body { max-width: none; justify-self: stretch; }
  .chess__media { margin-top: 28px; }
  .chess__body .lead { margin-top: 24px; }
  .media--16x9.chess__media { aspect-ratio: 4 / 3; }

  .steps__list { grid-template-columns: 1fr; gap: 28px; }
  .steps__line { display: none; }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .step__icon { grid-row: 1 / span 3; }
  .step__num { position: static; grid-column: 2; }
  .step__title { grid-column: 2; margin-top: 2px; }
  .step p { grid-column: 2; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; left: 23px; top: 48px; bottom: -28px; width: 2px;
    background-image: var(--dots-v); background-size: 2px 10px; background-repeat: repeat-y;
    transform-origin: top; transform: scaleY(0); transition: transform 500ms var(--ease);
  }
  .ch.in .step:not(:last-child)::after { transform: none; }
  .ch.in .step:nth-child(1)::after { transition-delay: 300ms; }
  .ch.in .step:nth-child(2)::after { transition-delay: 600ms; }
  .js .ch.in .step:nth-child(1) .step__icon { transition-delay: 200ms; }
  .js .ch.in .step:nth-child(2) .step__icon { transition-delay: 500ms; }
  .js .ch.in .step:nth-child(3) .step__icon { transition-delay: 800ms; }
  .ch__cta .btn { width: 100%; }

  .plans__grid { grid-template-columns: 1fr; gap: 24px; }
  .plan--first { margin-top: 0; }
  .plan { padding: 36px 24px 28px; }
  .wordstack--plans { font-size: 88px; top: 8px; right: -14vw; color: rgba(200, 169, 126, .08); }
  .versus { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .review--offset { margin-top: 0; }
  .ugc { grid-template-columns: repeat(3, 1fr); }
  .b2b__grid { grid-template-columns: 1fr; }
  .b2b__offers { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: 40px; }
  .faq__head { position: static; }
  .final { padding-top: 140px; }
  .final__line, .final__title { white-space: nowrap; font-size: clamp(40px, 14.2vw, 96px); }
  .final__bag { width: 150px; right: -28px; bottom: auto; top: -120px; transform: rotate(8deg); }
  .final__actions .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__logo { width: 140px; }
  .sticky { display: flex; }
  body.has-sticky { padding-bottom: 72px; }
}
@media (max-width: 480px) {
  .gift { padding: 16px 18px; }
}

/* ---------- page forms (gift activation, gift waitlist, order lookup); the dialogs restyle them in the QUIZ + DIALOGS block at the end ---------- */
.lead { margin-top: 26px; text-align: left; }
.lead__title { font-size: 22px; }
.lead__sub { margin-top: 6px; color: var(--cream-70); font-size: 15px; }
.lead__grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kraft); }
.field__label small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cream-50); }
.field__input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--cream);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px; outline: 0;
  transition: border-color .2s var(--ease);
}
.field__input::placeholder { color: var(--cream-50); }
.field__input:focus { border-color: var(--kraft); }
.field__input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.field.is-invalid .field__input { border-color: var(--kraft); }
.field__err { font-family: var(--font-edit); font-style: italic; font-size: 14px; color: var(--kraft); min-height: 1.2em; }
.field__err:empty { display: none; }
.field__hint { font-size: 14px; line-height: 1.4; color: var(--cream-70); }
.field__hint[hidden] { display: none; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; color: var(--cream-70); line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid var(--kraft); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--bg); font-size: 14px; font-weight: 700;
  transition: background-color .2s var(--ease);
}
.check input:checked + .check__box { background: var(--kraft); }
.check input:checked + .check__box::after { content: "✓"; }
.check input:focus-visible + .check__box { outline: 3px solid var(--orange); outline-offset: 2px; }
.lead__actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn .btn__cup { display: none; position: relative; width: 14px; height: 16px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; }
.btn .btn__cup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: currentColor; transform: scaleY(0); transform-origin: bottom; animation: cupfill 1.2s var(--ease) infinite; }
@keyframes cupfill { 0% { transform: scaleY(0); } 70% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .btn__cup { display: inline-block; }
.lead__msg { margin-top: 16px; border: 1px solid var(--border); padding: 14px 16px; font-size: 15px; color: var(--cream-70); }
.lead__msg a { color: var(--kraft); font-weight: 600; }
.lead__msg:empty { display: none; }
.done { text-align: center; padding: 24px 0 8px; }
.done__title { margin-top: 18px; font-size: clamp(30px, 1.5rem + 1.4vw, 44px); }
.done__sub { margin-top: 10px; color: var(--cream-70); font-size: 18px; }
.done__actions { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (max-width: 899px) {
  .lead__grid { grid-template-columns: 1fr; }
  .lead__actions .btn { width: 100%; }
}

/* ---------- reduced motion: everything static, path fully drawn ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__badge, .js .hero__line, .js .wordstack--hero span { animation: none; }
  .js .ch .ch__caption, .js .ch .ch__title, .js .ch .ch__lead, .js .handoff, .js .origin, .js .wipe, .js .wipe--r,
  .js .step__icon, .js .plan, .js .plan__badge, .js .guarantee, .js .stars--fill, .js .divider-beans,
  .js .path-end__bear, .js .path-end__line, .path-start, .steps__line, .ch__head::before, .step::after {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; animation: none !important;
  }
  .js .plan__badge { transform: none !important; }
  .rail__draw { clip-path: none !important; }
  .rail__stop .rail__dot { animation: none !important; }
  .btn .btn__cup::after { animation: none !important; transform: scaleY(1) !important; }
  .rail, .sticky, .acc__ind::before, .acc__ind::after, .rail__dot, .rail__num { transition: none !important; animation: none !important; }
}

/* decorative videos: never show native controls (iOS overlays them on a paused video) */
video { pointer-events: none; }
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
/* if autoplay is blocked, show the poster instead of the first frame + controls */
video.is-blocked { visibility: hidden; }
.hero__media.has-blocked, .media.has-blocked { background-size: cover; background-position: center; }


/* ==========================================================================
   MOBILE READABILITY PASS (owner feedback, iPhone) — overrides below 900px
   ========================================================================== */
/* desktop too: persona label as a one-line kraft caption above the name; notes in Bitter italic lowercase */
.origin__bear { font-family: var(--font-body); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kraft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.origin__notes { font-family: var(--font-edit); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--sage); margin-top: 6px; }

@media (max-width: 899px) {
  /* 1. type scale */
  :root { --h1: 40px; --h2: 30px; --edit: 18px; --body: 16px; --price: 40px; --section: 56px; --gutter: 20px; --edge: 20px; --cream-50: rgba(242, 237, 228, .6); }
  body { line-height: 1.65; }
  h1 { line-height: var(--lh-display); }
  h2, .ch__title, .ch__title--sm, .b2b__title { font-size: 30px; line-height: var(--lh-display); }
  .editorial, .ch__lead, .faq__hint, .final__reassure, .guarantee .editorial, .handoff { font-size: 18px; line-height: 1.4; }
  .caption, .ch__caption, .step__num, .rail__num { font-size: 11px; letter-spacing: .14em; }
  .lead { font-size: 16px; }
  /* every secondary title: Archivo 700 uppercase, max 2 lines */
  .origin .origin__name, .plan .plan__name, .step .step__title, .offer .offer__name,
  .lead .lead__title, .versus .versus__name, .footer__word, .done .done__title {
    font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .plan .plan__name, .lead .lead__title, .done .done__title { font-size: 16px; }

  /* hero: tighter copy spacing, cue without the line */
  .hero { padding-top: 84px; }
  .hero__inner { padding-bottom: 20px; }
  .hero__badge { margin-bottom: 14px; }
  .hero__sub { margin-top: 14px; font-size: 16px; line-height: 1.5; max-width: none; }
  .hero__actions { margin-top: 20px; gap: 12px; }
  .trust { margin-top: 22px; }
  .hero__cue { gap: 10px; padding-bottom: 24px; }
  .hero__cue-line { display: none; }

  /* 4. the path: no dotted lines around captions; caption stamp + 24px kraft rule */
  .path-start, .ch__head::before, .step::after, .path-end__line { display: none !important; }
  .ch__head { padding-top: 0; }
  .ch__caption { margin-bottom: 14px; }
  .ch__caption::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 10px; background: var(--kraft); }
  .handoff { margin-top: 32px; gap: 10px; }
  .handoff__bear { width: 24px; height: 24px; }
  .handoff__bear img { width: 18px; height: 18px; }

  /* 5. rhythm: 56px sections, header → content 24px, branch keeps 40px clearance, single 20px gutter */
  .ch { padding: 56px 0; }
  .ch--01 { padding-top: calc(60vw * .558 / 2 + 40px); }
  .ch__lead { margin-top: 12px; max-width: none; }
  .origins__grid, .reviews__grid, .steps { margin-top: 24px; }
  .plans__grid { margin-top: 32px; }
  .chess__media { margin-top: 24px; }
  .chess__body .lead { margin-top: 20px; }
  .chess__body .btn { margin-top: 20px; }
  .ch__cta { margin-top: 24px; }
  .b2b, .faq, .reviews { padding: 56px 0; }
  .b2b { margin-top: 56px; }
  .final { padding: 120px 0 56px; }
  .divider-beans { padding-top: 56px; }
  .path-end { padding: 24px var(--gutter) 0; align-items: flex-start; text-align: left; }
  .path-end__note { font-size: 18px; }
  .guarantee { margin-top: 32px; flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .doodle--bear { width: 56px; height: 56px; }
  .doodle--bear img { width: 44px; height: 44px; }
  .gift { margin-top: 16px; }
  .versus { margin-top: 24px; }
  .ugc { margin-top: 24px; }
  .reviews__ig { margin-top: 24px; }
  .faq__grid { gap: 24px; }
  .b2b__grid { gap: 24px; }
  .b2b__offers, .b2b__actions { margin-top: 20px; }
  .b2b__grid { grid-template-columns: minmax(0, 1fr); }
  .b2b__text, .b2b__media { min-width: 0; }
  .btn { max-width: 100%; }
  .b2b__actions .btn { width: 100%; white-space: normal; text-align: center; padding: 12px 18px; line-height: 1.2; }
  .b2b__contact { margin-top: 16px; }

  /* 2. origins as horizontal rows */
  .origins__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .origin { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: center; margin: 0; }
  .origin--offset { margin-top: 0; }
  .origin .media { width: 112px; aspect-ratio: 1; }
  .origin figcaption { margin-top: 0; min-width: 0; }
  .origin__bear { font-size: 11px; }
  .origin__name { margin-top: 4px; }
  .origin__notes { font-size: 15px; margin-top: 4px; }

  /* 3. testimonials, plans, steps, versus: single column, no stagger, 16px gaps */
  .reviews__grid, .plans__grid, .versus { gap: 16px; }
  .review--offset, .plan--first { margin-top: 0; }
  .review { padding: 20px 20px; }
  .review__stars { font-size: 14px; letter-spacing: .14em; }
  .review__text { font-size: 18px; margin-top: 12px; }
  .review__who { margin-top: 12px; }
  .plan { padding: 28px 20px 20px; }
  .plan__price { flex-wrap: nowrap; align-items: baseline; margin-top: 12px; }
  .plan__amount { font-size: 40px; white-space: nowrap; }
  .plan__desc { margin-top: 12px; font-size: 15px; }
  .plan .btn { margin-top: 20px; }
  .plan__badge { top: -12px; left: 16px; }
  .steps__list { gap: 16px; }
  .step { display: block; padding-top: 0; }
  .step__icon { width: 40px; height: 40px; vertical-align: middle; }
  .step__icon svg { width: 18px; height: 18px; }
  .step__num { display: inline-block; margin-left: 12px; vertical-align: middle; }
  .step .step__title { margin-top: 10px; }
  .step p { margin-top: 6px; font-size: 15px; max-width: none; }
  .versus__col { padding: 18px 20px; }
  .versus__list { margin-top: 10px; gap: 6px; font-size: 15px; }
  .offer { padding: 16px 18px; }
  .offer .offer__name { margin-bottom: 6px; }

  /* 6. nav */
  .nav, .nav.is-scrolled { padding: 10px 0; }
  .nav__logo { height: 32px; }
  .nav .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .nav__brand { min-height: 40px; }
  .nav__inner { gap: 8px; }
  .nav__track {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-left: auto; color: var(--cream-70); border-radius: 4px;
    transition: color .25s var(--ease);
  }
  .nav__track:hover { color: var(--cream); }
  .nav__track svg, .nav__track i { width: 22px; height: 22px; }


  /* misc alignment: everything starts at the 20px gutter */
  .final__inner, .footer__grid { text-align: left; }
  .footer { padding: 48px 0 32px; }
  .footer__bottom { margin-top: 32px; }
  .sticky__text { font-size: 12px; }
  .wordstack--plans { top: 0; }
}
/* „Cumpără acum” (2026-10-23) is longer than „Fă quiz-ul”: on phones the logo steps down so logo + track icon + button fit the gutter */
@media (max-width: 429px) {
  .nav__logo { height: 26px; }
  .nav .btn { padding: 0 12px; }
}
@media (max-width: 374px) {
  .nav__logo { height: 22px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .ch .ch__caption { transition-delay: 150ms; }
}

@media (max-width: 380px) {
  .ch__title--sm { font-size: 26px; }
  .trust li { font-size: 11px; gap: 5px; }
  .trust { gap: 6px; }
}

/* phone hero: animated WebP in place of the video (same cover behaviour) */
img.hero__video--anim { object-fit: cover; object-position: 50% center; }

/* the footer „Scrie-ne” link (opens the contact dialog) */
.footer__link { color: var(--cream); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: .4em; border-bottom: 1px solid var(--kraft); }
.footer__link:hover { color: var(--kraft); }
.lead__msg button, .lead__msg .lead__msg-link { color: var(--kraft); font-weight: 600; text-decoration: underline; min-height: 24px; }

/* the branch is atmosphere, not an object: behind the content, dimmed, slightly soft */
.ch--01 .divider-branch { opacity: .45; z-index: 0; filter: blur(.4px) saturate(.85); pointer-events: none; }
.ch--01 .ch__head, .ch--01 .container { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .ch--01 .divider-branch { opacity: .22; width: 70vw; filter: blur(.8px) saturate(.8); }
}

/* ==========================================================================
   CAMPAIGN PAGES + CONSENT (strategie 5 funneluri) — existing tokens and
   components only; new classes are thin layouts around them
   ========================================================================== */
/* consent banner: same contract as components/CookieBanner.tsx, lander look */
.consent {
  position: fixed; right: 16px; bottom: 16px; z-index: 55; width: min(380px, calc(100% - 32px));
  background: var(--bg-2); border: 1px solid var(--border); padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.consent__title { font-size: 20px; }
.consent__text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--cream-70); }
.consent__text a { color: var(--kraft); }
.consent__actions { margin-top: 16px; display: flex; gap: 10px; }
.consent__actions .btn { flex: 1; padding: 0 12px; }

/* funnel heroes: the offer sits with the button (product, quantity, price, payment type together) */
.hero__offer { margin-top: 24px; }
.hero__offer .plan__price { margin-top: 6px; }
.hero__offer .plan__amount { color: var(--cream); }
.hero__micro { margin-top: 12px; font-size: 13px; color: var(--cream-70); letter-spacing: .04em; }
.hero__label { margin-bottom: 18px; }
.hero__media img.hero__video { position: absolute; inset: 0; }


/* two plan cards (Explorator is not offered) */
@media (min-width: 900px) { .plans__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; } }
.origin .btn { margin-top: 16px; }
.origin.is-unavailable .media { opacity: .45; }
.origin__coffee { margin-top: 8px; font-size: 14px; color: var(--cream-70); }
.review__label { margin-bottom: 4px; }

/* F3 article */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(26px, 1.3rem + 1vw, 36px); margin-top: clamp(40px, 5vw, 56px); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 16px; color: var(--cream-70); }
.prose .lead { color: var(--cream); }

/* F4 calculator */
.calc { margin-top: clamp(32px, 4vw, 48px); max-width: 860px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; }
.calc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__chips .btn[aria-pressed="true"] { background: var(--kraft); border-color: var(--kraft); color: var(--bg); }
.calc__actions { grid-column: 1 / -1; }
.calc__out { margin-top: 32px; max-width: 860px; border: 1px solid var(--kraft); padding: 28px; }
.calc__stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.calc__stats dd { margin: 10px 0 0; font-family: var(--font-display); font-size: var(--price); line-height: 1; color: var(--cream); }
.calc__msg { margin-top: 22px; color: var(--cream); }
.calc__out .lead + .lead, .calc__out .hero__micro { margin-top: 14px; }
.decision { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* gift activation */
.activation { max-width: 640px; }
.activation .lead { margin-top: 28px; }
.activation select.field__input { appearance: auto; }
.activation__schedule { margin-top: 16px; display: grid; gap: 6px; color: var(--cream-70); }

@media (max-width: 899px) {
  .consent { left: 12px; right: 12px; width: auto; bottom: 12px; padding: 16px; }
  .consent__text { font-size: 13px; }
  .consent__actions { margin-top: 12px; }
  .hero__offer { margin-top: 16px; }
  .hero__label { margin-bottom: 12px; }
  .calc { grid-template-columns: 1fr; }
  .calc__out { padding: 20px; }
  .calc__stats { grid-template-columns: 1fr; gap: 14px; }
  .calc__stats dd { font-size: 36px; }
  .decision .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding: 12px 18px; }
  .origin .btn { margin-top: 10px; }
  .prose h2 { font-size: 24px; }
  /* long price CTAs wrap instead of widening the card */
  .plans__grid--2 { grid-template-columns: minmax(0, 1fr); }
  .plan .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 12px 18px; }
}

/* ==========================================================================
   SHARED KIT — Bârlogul Acasă landers (plan §6). Class names are fixed: page
   agents use them as documented; page-specific CSS goes below this kit,
   each page in its own "=== page: <name> ===" … "=== end page: <name> ===" comment pair.
   Existing tokens only. Posters, not cards: only .offer-stack is boxed.
   Reveals run once inside a .ch section (main.js adds .in); outside a .ch
   everything is simply visible. Reduced motion: static, same layout.
   ========================================================================== */

/* --- .proof-strip — 3–4 short TRUE facts, under a hero or a section head.
   <ul class="proof-strip" aria-label="Pe scurt">
     <li class="proof-strip__item"><i data-lucide="flame" aria-hidden="true"></i><span>Proaspăt prăjită</span></li>
     <li class="proof-strip__item"><i data-lucide="calendar" aria-hidden="true"></i><span>Data prăjirii pe etichetă</span></li>
     …
   </ul>
   The icon is optional. Desktop: one row split by hairlines. Phone: 2 × 2 grid. */
.proof-strip {
  margin-top: 32px; display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.proof-strip__item {
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 16px;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--cream-70);
}
.proof-strip__item:first-child { padding-left: 0; }
.proof-strip__item + .proof-strip__item { border-left: 1px solid var(--border); }
.proof-strip__item svg, .proof-strip__item i { width: 18px; height: 18px; flex: none; color: var(--kraft); }
.js .hero .proof-strip { animation: fade var(--t-sect) var(--ease) both; animation-delay: 520ms; }

/* --- .inside — "Ce primești": product photo left, checklist right (stacked on phones).
   <div class="inside">
     <div class="inside__media media media--4x3"><img src="…" width="…" height="…" alt="…" loading="lazy" decoding="async"></div>
     <div class="inside__body">
       <p class="caption">Ce primești</p>
       <h2 class="ch__title ch__title--sm">…</h2>                  (optional head)
       <ul class="inside__list">
         <li><strong>250 g de cafea</strong> aleasă după răspunsurile tale</li>
         …
       </ul>
     </div>
   </div>
   .inside__media can also hold a transparent cut-out (drop .media, add .inside__media--cutout). */
.inside {
  display: grid; grid-template-columns: 6fr 5fr; column-gap: clamp(32px, 6vw, 96px); align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
}
.inside__media--cutout { background: none; display: flex; justify-content: center; }
.inside__media--cutout img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.inside__body > .caption { margin-bottom: 16px; }
.inside__list { margin-top: 24px; }
.inside__list li {
  position: relative; padding: 14px 0 14px 36px; border-top: 1px solid var(--border);
  color: var(--cream-70); line-height: 1.45;
}
.inside__list li:last-child { border-bottom: 1px solid var(--border); }
.inside__list li strong { color: var(--cream); }
/* check mark drawn in CSS (no icon dependency) */
.inside__list li::before {
  content: ""; position: absolute; left: 4px; top: 20px; width: 14px; height: 8px;
  border-left: 2px solid var(--kraft); border-bottom: 2px solid var(--kraft); transform: rotate(-45deg);
}
.js .ch .inside__list li { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.js .ch.in .inside__list li { opacity: 1; transform: none; }
.js .ch.in .inside__list li:nth-child(2) { transition-delay: 80ms; }
.js .ch.in .inside__list li:nth-child(3) { transition-delay: 160ms; }
.js .ch.in .inside__list li:nth-child(4) { transition-delay: 240ms; }
.js .ch.in .inside__list li:nth-child(n+5) { transition-delay: 320ms; }

/* --- .trust-line — one small reassurance line right under a CTA.
   <p class="trust-line"><i data-lucide="lock" aria-hidden="true"></i><span>Plata e procesată prin Stripe. Nu vedem și nu stocăm datele cardului.</span></p>
   The icon is optional (lock / shield-check). */
.trust-line {
  margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; max-width: 52ch;
  font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--cream-70);
}
.trust-line svg, .trust-line i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--kraft); }
.final__actions .trust-line, .hero__actions .trust-line { flex-basis: 100%; max-width: none; margin-top: 0; }

/* --- .decide-map — quiz-to-profile map: taste words → profile (Clasic / Echilibrat / Fructat).
   <ol class="decide-map" aria-label="Cum alegem profilul">
     <li class="decide-map__row">
       <span class="decide-map__taste">ciocolată, alune, gust rotund</span>
       <span class="decide-map__arrow" aria-hidden="true">→</span>
       <span class="decide-map__profile">Clasic</span>
       <span class="decide-map__note">Blend</span>                   (optional)
     </li>
     …
   </ol> */
.decide-map { margin-top: clamp(32px, 4vw, 48px); max-width: 860px; }
.decide-map__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 14ch); grid-template-areas: "taste arrow profile" "note note note";
  column-gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.decide-map__row:last-child { border-bottom: 1px solid var(--border); }
.decide-map__taste { grid-area: taste; font-family: var(--font-edit); font-style: italic; font-size: var(--edit); line-height: 1.3; color: var(--cream); }
.decide-map__arrow { grid-area: arrow; color: var(--kraft); font-size: 20px; line-height: 1; }
.decide-map__profile {
  grid-area: profile; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(22px, 1.1rem + .8vw, 30px); line-height: 1; color: var(--kraft);
}
.decide-map__note { grid-area: note; margin-top: 6px; font-size: 14px; color: var(--cream-70); }
.decide-map__note:empty { display: none; }
.js .ch .decide-map__arrow { opacity: 0; transform: translateX(-8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.js .ch.in .decide-map__arrow { opacity: 1; transform: none; }
.js .ch.in .decide-map__row:nth-child(1) .decide-map__arrow { transition-delay: 200ms; }
.js .ch.in .decide-map__row:nth-child(2) .decide-map__arrow { transition-delay: 300ms; }
.js .ch.in .decide-map__row:nth-child(3) .decide-map__arrow { transition-delay: 400ms; }

/* --- .bridge — "După Prima Cutie, decizi tu" + the per-bag math. A dark panel, not a card.
   <div class="bridge">
     <div class="bridge__text">
       <p class="caption">După Prima Cutie</p>
       <h3 class="bridge__title display">Decizi tu.</h3>
       <p class="bridge__body">… Nimic nu pornește singur.</p>
     </div>
     <dl class="bridge__math">
       <div class="bridge__row"><dt>Descoperire, lunar</dt><dd><span data-price="descoperire">109 lei</span></dd></div>
       <div class="bridge__row"><dt>în cutie</dt><dd>2 × 250 g</dd></div>
       <div class="bridge__row bridge__row--total"><dt>pe pungă</dt><dd>…</dd></div>
     </dl>
     <p class="bridge__note">…</p>                                   (optional, full width)
   </div>
   NB: tests/static-pages.test.ts accepts only catalog prices and delivery fees as "N lei" in page text. */
.bridge {
  margin-top: clamp(40px, 5vw, 64px); background: var(--bg-2);
  padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 6fr 5fr; gap: 24px clamp(32px, 5vw, 80px); align-items: center;
}
.bridge__text > .caption { margin-bottom: 14px; }
.bridge__title { font-size: clamp(30px, 1.5rem + 1.6vw, 48px); }
.bridge__body { margin-top: 18px; color: var(--cream-70); max-width: 46ch; }
.bridge__math { margin: 0; }
.bridge__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.bridge__row dt { color: var(--cream-70); font-size: 15px; }
.bridge__row dd { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: .02em; color: var(--cream); white-space: nowrap; }
.bridge__row--total { border-top: 2px solid var(--kraft); }
.bridge__row--total dt { color: var(--kraft); font-weight: 600; }
.bridge__row--total dd { font-size: var(--price); color: var(--cream); }
.bridge__note { grid-column: 1 / -1; font-size: 13px; color: var(--cream-70); letter-spacing: .02em; }

/* --- .offer-stack — what the box holds, stacked, ending in the price line. The only boxed kit piece.
   <div class="offer-stack">
     <p class="caption offer-stack__head">Prima Cutie</p>                              (optional)
     <ul>
       <li class="offer-stack__item"><span class="offer-stack__name">250 g de cafea</span><span class="offer-stack__desc">aleasă după răspunsurile tale</span></li>
       …
     </ul>
     <p class="offer-stack__price">
       <span class="offer-stack__amount display" data-price="prima-cutie">54 lei</span>
       <span class="caption">plată unică cu cardul</span>
     </p>
     <button class="btn btn--primary btn--block …">…</button>                        (optional CTA)
     <p class="trust-line">…</p>                                                      (optional)
   </div> */
.offer-stack { margin-top: clamp(32px, 4vw, 48px); max-width: 560px; border: 1px solid var(--kraft); padding: clamp(24px, 3vw, 36px); }
.offer-stack__head { margin-bottom: 8px; }
.offer-stack__item {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 0 14px 32px; border-bottom: 1px solid var(--border);
}
.offer-stack__item::before {
  content: ""; position: absolute; left: 2px; top: 21px; width: 13px; height: 7px;
  border-left: 2px solid var(--kraft); border-bottom: 2px solid var(--kraft); transform: rotate(-45deg);
}
.offer-stack__name { font-weight: 600; color: var(--cream); line-height: 1.35; }
.offer-stack__desc { font-size: 15px; color: var(--cream-70); line-height: 1.45; }
.offer-stack__price {
  margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--kraft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.offer-stack__amount { font-size: var(--price); line-height: 1; color: var(--cream); white-space: nowrap; }
.offer-stack .btn { margin-top: 24px; }
.js .ch .offer-stack__item { opacity: 0; transform: translateX(-12px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.js .ch.in .offer-stack__item { opacity: 1; transform: none; }
.js .ch.in .offer-stack__item:nth-child(2) { transition-delay: 90ms; }
.js .ch.in .offer-stack__item:nth-child(3) { transition-delay: 180ms; }
.js .ch.in .offer-stack__item:nth-child(4) { transition-delay: 270ms; }
.js .ch.in .offer-stack__item:nth-child(n+5) { transition-delay: 360ms; }
.js .ch .offer-stack__price { opacity: 0; transform: scale(.97); transform-origin: left center; transition: opacity 400ms var(--ease), transform 400ms var(--ease-stamp); }
.js .ch.in .offer-stack__price { opacity: 1; transform: none; transition-delay: 460ms; }

/* kit: phones */
@media (max-width: 899px) {
  .proof-strip { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0; }
  .proof-strip__item { min-height: 48px; padding: 10px 12px 10px 0; font-size: 13px; gap: 8px; border-bottom: 1px solid var(--border); }
  .proof-strip__item + .proof-strip__item { border-left: 0; }
  .proof-strip__item:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--border); }
  .proof-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .proof-strip__item svg, .proof-strip__item i { width: 16px; height: 16px; }

  .inside { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 24px; }
  .inside__list { margin-top: 16px; }
  .inside__list li { padding: 12px 0 12px 32px; font-size: 15px; }
  .inside__list li::before { top: 17px; }

  .decide-map { margin-top: 24px; }
  .decide-map__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "taste taste" "arrow profile" "note note"; row-gap: 6px; column-gap: 10px; padding: 16px 0; }
  .decide-map__taste { font-size: 18px; }
  .decide-map__arrow { font-size: 16px; }
  .decide-map__profile { font-size: 22px; }

  .bridge { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; margin-top: 32px; margin-inline: calc(-1 * var(--gutter)); }
  .bridge__title { font-size: 26px; }
  .bridge__body { margin-top: 12px; font-size: 15px; }
  .bridge__row dd { font-size: 22px; }
  .bridge__row--total dd { font-size: 36px; }

  .offer-stack { margin-top: 24px; max-width: none; padding: 20px; }
  .offer-stack__item { padding: 12px 0 12px 28px; }
  .offer-stack__item::before { top: 19px; }
  .offer-stack__desc { font-size: 14px; }
  .offer-stack .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 12px 18px; }
}

/* kit: reduced motion — static, same layout */
@media (prefers-reduced-motion: reduce) {
  .js .hero .proof-strip, .js .ch .inside__list li, .js .ch .decide-map__arrow,
  .js .ch .offer-stack__item, .js .ch .offer-stack__price {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
  }
}
/* ========================== end SHARED KIT ========================== */

/* ---------------------------------------------------------------------------------------------
   Simple layout (owner 2026-10-22: every lander follows /birouri): a shorter, text-led hero with
   no background photo/video (keep .hero__media empty), small chapter titles (.ch__title--sm),
   one photo block at most, 3-step rows, proof cards, FAQ, a plain final CTA without product image.
   Markup: <section class="hero hero--simple">…</section> · <section class="final final--simple">
   --------------------------------------------------------------------------------------------- */
.hero--simple { min-height: 72vh; min-height: 72svh; }
.hero--simple .hero__inner { padding-bottom: 64px; }
.hero--simple .hero__media { background: none; }
@media (max-width: 899px) {
  .hero--simple { min-height: auto; }
  .hero--simple .hero__inner { padding: 48px 0 40px; }
  /* long CTAs wrap inside the gutter instead of running to the edge */
  .hero--simple .btn, .final--simple .btn, .ch__cta .btn { width: 100%; max-width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding-inline: 18px; }
}

/* === page: ritualul-de-dimineata === */
/* uses the shared simple layout (.hero--simple / .final--simple) */
.ritual-lead { max-width: 60ch; }
/* profiles: /birouri-style bordered text cards with the CTA pinned to the bottom */
.ritual-profiles { align-items: stretch; }
.ritual-profile { display: flex; flex-direction: column; }
.ritual-profile__name { margin-top: 8px; font-size: clamp(26px, 1.2rem + 1vw, 36px); }
.ritual-profile .review__text { margin-top: 10px; }
.ritual-profile__coffee { margin-top: 10px; font-size: 14px; color: var(--cream-70); }
/* the live lot line (filled by main.js from the catalog) gets a short label */
.ritual-profile__coffee[data-profile-coffee]::before { content: "Acum în pungă: "; color: var(--kraft); }
/* a flexible spacer (min 28px) keeps the three buttons on one line whatever main.js fills in */
.ritual-profile::after { content: ""; order: 1; flex: 1 0 28px; }
.ritual-profile .btn { order: 2; }
.ritual-profile.is-unavailable .ritual-profile__name,
.ritual-profile.is-unavailable .review__text { opacity: .45; }
.ritual-help { margin-top: 32px; }
/* what you get: the bag cut-out + offer stack, then the per-bag math */
.ritual-offer .offer-stack { margin-top: 0; }
.ritual-link { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kraft); }
.ritual-link:hover { text-decoration-color: var(--cream); }
/* control: four account actions in the shared step row */
@media (min-width: 1100px) {
  .ritual-steps .steps__list { grid-template-columns: repeat(4, 1fr); }
  .ritual-steps .steps__line { right: calc((100% - 3 * var(--sgap)) / 4 - 24px); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .ritual-steps .steps__list { grid-template-columns: repeat(2, 1fr); }
  .ritual-steps .steps__line { display: none; }
}
.js .ch.in .ritual-steps .step:nth-child(4) .step__icon { transition-delay: 980ms; }
.ritual-notes { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 48px); }
.ritual-notes .trust-line { margin-top: 0; }
@media (max-width: 899px) {
  .ritual-notes { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 12px; }
  .ritual-offer .inside__media--cutout img { width: min(100%, 240px); }
  .ch.in .ritual-steps .step:nth-child(3)::after { transition-delay: 900ms; }
  .js .ch.in .ritual-steps .step:nth-child(4) .step__icon { transition-delay: 1100ms; }
}
/* === end page: ritualul-de-dimineata === */

/* === page: costul-pe-ceasca === */
/* uses the shared simple layout (.hero--simple / .final--simple) */
/* the calculator is the main block: one clean bordered panel like /birouri's cards; results sit under a hairline */
.cost-calc { margin-top: clamp(32px, 4vw, 48px); max-width: 960px; border: 1px solid var(--border); padding: clamp(24px, 3.5vw, 44px); }
.cost-calc .calc { margin-top: 0; max-width: none; }
.cost-calc .calc__out { margin-top: clamp(28px, 3vw, 40px); max-width: none; border: 0; border-top: 1px solid var(--border); padding: clamp(24px, 3vw, 36px) 0 0; }
.calc-verdict { margin-top: 24px; padding-top: 24px; border-top: 2px solid var(--kraft); }
/* main.js shows the „falls short” block; while it is visible the „fits” block steps aside */
.calc-verdict[data-calc-insufficient]:not([hidden]) ~ .calc-verdict--fits { display: none; }
.calc-verdict__title { font-size: clamp(26px, 1.3rem + 1.2vw, 40px); line-height: 1.05; color: var(--cream); }
.calc-verdict__body { margin-top: 12px; max-width: 60ch; color: var(--cream-70); }
.calc-verdict .decision { margin-top: 20px; }
/* the page's one photo block: the bag next to „Descoperire, pe scurt” */
.cost-offer { margin-top: 0; }
.cost-offer .inside__media--cutout img { width: min(100%, 380px); }
.cost-offer .offer-stack { max-width: none; }
@media (max-width: 899px) {
  .cost-calc { padding: 20px; }
  .cost-calc .calc__out { padding: 24px 0 0; }
  .calc-verdict__title { font-size: 26px; }
  .cost-offer .inside__media--cutout img { width: min(100%, 220px); }
}
/* === end page: costul-pe-ceasca === */
/* === page: cadou === */
/* uses the shared simple layout (.hero--simple / .final--simple); the waitlist sits in the hero while the
   gift is not sold (data-gift-soon) and main.js swaps in the [data-gift-live] blocks once the catalog publishes it */
.gift-wait { margin-top: 32px; max-width: 620px; }
.gift-wait__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.gift-wait__row .field { flex: 1 1 260px; min-width: 0; }
.gift-wait__btn { flex: none; margin-top: 24px; min-height: 48px; }
.gift-wait__consent { margin-top: 18px; }
.gift-wait .lead__msg { margin-top: 14px; }
.gift-wait .trust-line { margin-top: 16px; }
.gift-wait__done { padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); outline: 0; }
.gift-wait__done-title { font-family: var(--font-display); font-size: clamp(24px, 1.2rem + 1vw, 34px); line-height: 1.1; text-transform: uppercase; color: var(--cream); }
.gift-wait__done-sub { margin-top: 8px; color: var(--cream-70); }
.gift-for__note { margin-top: 24px; }
.gift-final__note { font-size: 17px; max-width: 40ch; }
.gift-how__note { margin-top: 20px; max-width: 62ch; color: var(--cream-70); }
.steps + .gift-how__note { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 899px) {
  .gift-wait__btn { width: 100%; justify-content: center; margin-top: 0; }
}
/* === end page: cadou === */
/* === page: gustul-tau === */
/* uses the shared simple layout (.hero--simple / .final--simple); „Ce primești” is the one photo block,
   on the same raised panel as /birouri's office block */
body[data-page="gustul-tau"] .ch > .container > .inside:first-child { margin-top: 0; }
.gt-product { background: var(--bg-2); }
/* the F1 headline is two sentences: a step smaller so the simple hero stays shorter than the screen */
body[data-page="gustul-tau"] .hero__title { font-size: max(40px, calc(var(--h1) * .78)); }
.gt-method { margin-top: 24px; max-width: 62ch; color: var(--cream-70); line-height: 1.55; }
.gt-note { margin-top: 16px; max-width: 52ch; font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--cream-70); }
/* === end page: gustul-tau === */

/* === page: cafeaua-din-aparat === */
/* uses the shared simple layout (.hero--simple / .final--simple); the bag in #incepe is the one photo block */
body[data-page="cafeaua-din-aparat"] .ch > .container > .inside:first-child { margin-top: 0; }
.ga-method { margin-top: 24px; max-width: 62ch; color: var(--cream-70); line-height: 1.55; }
.ga-map .decide-map__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 18ch); }
/* the buying guide stays a plain reading column */
.prose .ga-guide__lead { margin-top: 20px; }
@media (max-width: 899px) {
  .ga-map .decide-map__row { grid-template-columns: auto minmax(0, 1fr); }
  /* the machine-owner CTA is long: let the hero column shrink so it wraps */
  body[data-page="cafeaua-din-aparat"] .hero__content { min-width: 0; }
}
/* === end page: cafeaua-din-aparat === */
/* === page: index === */
/* uses the shared simple layout (.hero--simple / .final--simple) */
/* the owner's day-led line, above the hero title (also used by /birouri) */
.hero__eyebrow { margin-bottom: 14px; color: var(--kraft); max-width: 34ch; }
.js .hero__eyebrow { animation: fade var(--t-sect) var(--ease) both; animation-delay: 140ms; }
.hero .proof-strip { max-width: 720px; }
/* „Ce primești” is the page's one photo block: a bg-2 panel like /birouri's office block */
body[data-page="lander"] .ch--inside { background: var(--bg-2); }
body[data-page="lander"] .ch--inside .inside { margin-top: 0; }
.ch--inside .ch__cta { margin-top: 28px; }
/* the three profiles' origins, as one compact text line under the plans */
.ix-origins { margin-top: 32px; max-width: 860px; font-size: 14px; line-height: 1.6; color: var(--cream-70); }
.ix-origins .caption { margin-right: 10px; color: var(--kraft); }
.ix-promise { margin-top: 24px; }
/* the one small office link on the consumer lander */
.faq__office { margin-top: 20px; font-size: 15px; color: var(--cream-70); }
.faq__office a { color: var(--kraft); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.faq__office a:hover, .faq__office a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) {
  .hero__eyebrow { margin-bottom: 10px; font-size: 17px; }
  .faq__office { margin-top: 12px; }
  .ch--inside .inside__media--cutout img { width: min(100%, 240px); }
  .ix-origins { margin-top: 24px; font-size: 13px; }
  .ix-origins .caption { display: block; margin: 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .js .hero__eyebrow { animation: none; } }
/* === end page: index === */

/* === page: birouri === */
/* uses the shared simple layout (.hero--simple / .final--simple) */
.hero--simple + .b2b { margin-top: 0; }
/* === end page: birouri === */

/* === page: urmareste-comanda === */
/* moved to /urmareste-comanda.css (2026-10-31: the page is on the light shop layout, shop.css) */
/* === end page: urmareste-comanda === */

/* ==========================================================================
   QUIZ + DIALOGS — light, in /cumpara's design (2026-10-24, owner: „fă quiz-ul în style-ul nou de design”).
   One source for every dialog on every page that carries them: the consumer quiz (#quiz), the B2B configurator
   (#quiz-b2b) and the contact form (#contact). Cream sheet, white cards with a 1px line, espresso ink, kraft tints,
   Anton titles, Bitter italic hints, Archivo UI. Everything is scoped to .quiz so the dark pages keep their own
   forms (gift activation, waitlist, order lookup). Tokens: --s-* in :root above.
   ========================================================================== */
.quiz {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px;
  color: var(--s-ink); font-size: 16px; line-height: 1.55;
}
.quiz strong { color: inherit; font-weight: 600; }
.quiz :focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; }
.quiz .caption { color: var(--s-soft); font-size: 12px; letter-spacing: .12em; }
.quiz__backdrop { position: absolute; inset: 0; background: rgba(48, 33, 25, .55); }
.quiz__panel {
  position: relative; width: 100%; max-width: 880px; max-height: min(92vh, 900px); max-height: min(92dvh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--s-bg); border: 1px solid var(--s-line); border-radius: 22px; box-shadow: var(--s-shadow-lg), 0 30px 80px -30px rgba(48, 33, 25, .45);
  animation: quiz-in .4s var(--ease);
}
.quiz__panel:focus { outline: none; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* header: step counter + answers trail + close, the progress bar along its bottom edge */
.quiz__top {
  position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 10px 14px 10px 32px; border-bottom: 1px solid var(--s-line); background: var(--s-bg);
}
.quiz__progress { flex: 1; min-width: 0; }
.quiz__progress-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.quiz__step-label { white-space: nowrap; }
.quiz__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; overflow: hidden; }
.quiz__fill { display: block; width: 0; height: 100%; background: var(--s-ink); border-radius: 0 3px 3px 0; transition: width .45s var(--ease); }
.quiz__trail { display: flex; gap: 2px; min-width: 0; }
.quiz__trail:empty { display: none; }
.quiz__thumb { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 10px; }
.quiz__thumb::before { content: ""; position: absolute; inset: 6px; border-radius: 8px; background: var(--s-bg-2); border: 1px solid var(--s-line-2); transition: border-color .2s var(--ease); }
.quiz__thumb img { position: absolute; inset: 7px; width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.quiz__thumb img.is-broken { display: none; }
.quiz__thumb:hover::before { border-color: var(--s-ink); }
.quiz__close {
  width: 44px; height: 44px; margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--s-ink); transition: background-color .2s var(--ease);
}
.quiz__close:hover { background: var(--s-bg-2); }
.quiz__close svg { width: 22px; height: 22px; }

.quiz__body { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px 40px 36px; overscroll-behavior: contain; }
.quiz__title { font-size: clamp(28px, 1.3rem + 1.2vw, 40px); color: var(--s-ink); max-width: 24ch; }
.quiz__hint { margin-top: 8px; font-size: 18px; line-height: 1.4; color: var(--s-muted); }

/* screens slide: next enters from the right, old exits left (reverse on back) */
.qscreen { transition: transform 300ms var(--ease), opacity 300ms var(--ease); }
.qscreen.is-enter { transform: translateX(40px); opacity: 0; }
.qscreen.is-enter.is-back { transform: translateX(-40px); }
.qscreen.is-exit { position: absolute; left: 40px; right: 40px; top: 28px; pointer-events: none; transform: translateX(-40px); opacity: 0; }
.qscreen.is-exit.is-back { transform: translateX(40px); }

/* answer cards: the square poster on top, label + note under — /cumpara's radio cards */
.qcards { margin-top: 24px; display: grid; gap: 14px; }
.qcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 540px; }
.qcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* five or more methods: four to a row so two rows fit the screen; a short last row sits centred */
.qcards--5 { display: flex; flex-wrap: wrap; justify-content: center; }
.qcards--5 > .qcard { width: calc((100% - 3 * 14px) / 4); }
.qcard {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 44px; text-align: left;
  padding: 8px 8px 14px; border-radius: 16px; background: var(--s-card); border: 1px solid var(--s-line-2); color: var(--s-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) {
  .qcard:hover { border-color: var(--s-ink); box-shadow: var(--s-shadow); transform: translateY(-2px); }
  .qcard:hover .qcard__media img { transform: scale(1.03); }
  .qcard.is-unavailable:hover { border-color: var(--s-line-2); box-shadow: none; transform: none; }
  .qcard.is-unavailable:hover .qcard__media img { transform: none; }
}
.qcard.is-selected, .qcard.is-picked { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink), var(--s-shadow); }
.qcard:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; }
.qcard__media {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1;
  overflow: hidden; border-radius: 10px; background: var(--s-kraft-tint);
}
.qcard__icon, .qcard__media svg { width: 34%; height: 34%; color: var(--s-ink); opacity: .55; }
.qcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .2s var(--ease), filter .2s var(--ease); }
.qcard__media img.is-broken { display: none; }
/* the check badge of the chosen card */
.qcard__media::after {
  content: ""; position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  background: var(--s-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF5EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 0 2px var(--s-card); transform: scale(0); transition: transform .2s var(--ease-stamp);
}
.qcard.is-selected .qcard__media::after, .qcard.is-picked .qcard__media::after { transform: scale(1); }
.qcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 6px 0; }
.qcard__label { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--s-ink); }
.qcard__note { font-size: 13.5px; line-height: 1.35; color: var(--s-muted); }
.qcard__note:empty { display: none; }
@keyframes qstamp { 0% { transform: scale(.98); } 100% { transform: scale(1); } }
.qcard.is-picked { animation: qstamp 180ms var(--ease-stamp) both; }
/* an option we cannot serve stays visible, quieter, with its reason */
.qcard.is-unavailable { background: var(--s-bg); border-style: dashed; }
.qcard.is-unavailable .qcard__media img { filter: grayscale(.8); }
.qcard.is-unavailable .qcard__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(250, 245, 235, .55); }
.qcard.is-unavailable .qcard__label { color: var(--s-muted); }
.qcard.is-unavailable .qcard__note {
  align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--s-bg-2); font-size: 12.5px; font-weight: 600; color: var(--s-muted);
}

/* back / skip */
.quiz__nav { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quiz__nav:not(:has(button)) { display: none; }
.quiz__back {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--s-line-2); background: var(--s-card); color: var(--s-ink);
  font-size: 15px; font-weight: 600; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.quiz__back:hover { border-color: var(--s-ink); }
.quiz__back[data-skip] { margin-left: auto; }

/* buttons inside a dialog: /cumpara's espresso button; outline = the quiet secondary */
.quiz .btn {
  min-height: 52px; padding: 0 26px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.2;
  white-space: normal; text-align: center;
}
.quiz .btn--lg { min-height: 58px; font-size: 17px; padding: 8px 30px; }
.quiz .btn--primary {
  background: var(--s-ink); color: var(--s-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 10px 24px -12px rgba(48, 33, 25, .6);
}
.quiz .btn--primary:hover { background: var(--s-hover); }
.quiz .btn--outline { background: var(--s-card); color: var(--s-ink); border: 1px solid var(--s-line-2); }
.quiz .btn--outline:hover { background: var(--s-card); border-color: var(--s-ink); }
/* secondary actions are text links */
.result__redo {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px;
  color: var(--s-muted); font-size: 15px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.result__redo:hover { color: var(--s-ink); text-decoration-thickness: 2px; }
.result__micro { font-size: 13.5px; line-height: 1.45; color: var(--s-muted); }

/* the bear on the done / unavailable screens: on a kraft disc */
.quiz .doodle { background: var(--s-kraft-tint); }

/* ---------- consumer result: recommendation card | offer box + „Cumpără acum” ---------- */
.result { text-align: left; }
.result--rec { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.result__card { padding: 22px; border-radius: 18px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); }
.result__head { display: flex; gap: 20px; align-items: center; }
.result__media {
  flex: none; width: 128px; aspect-ratio: 4 / 5; display: grid; place-items: center;
  border-radius: 14px; background: var(--s-kraft-tint);
}
.result__bag { width: 86%; height: auto; filter: drop-shadow(0 12px 16px rgba(48, 33, 25, .22)); }
.result__bear { width: 72px; height: 72px; background: var(--s-card); }
.result__bear img { width: 56px; height: 56px; }
.result__names { min-width: 0; }
.result__persona { font-size: clamp(28px, 1.3rem + 1vw, 36px); color: var(--s-ink); margin-top: 4px; }
.result__tag { margin-top: 2px; font-size: 17px; line-height: 1.35; color: var(--s-muted); }
.result__coffee { margin-top: 12px; font-weight: 600; font-size: 18px; line-height: 1.3; }
.result__chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.result__chip { padding: 4px 10px; border-radius: 999px; background: var(--s-kraft-tint); font-size: 13px; font-weight: 600; line-height: 1.35; }
.result__reason { margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--s-muted); }
.result__profile {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--s-line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.result__pitem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.result__pthumb { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--s-bg-2); }
.result__pthumb svg { width: 18px; height: 18px; color: var(--s-ink); }
.result__plabel { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.result__pcap { font-size: 10.5px; letter-spacing: .12em; margin-bottom: 1px; }
.result__grinder { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--s-kraft-tint); color: var(--s-ink); font-size: 14px; }
.result__buy { display: flex; flex-direction: column; gap: 12px; }
.result__buy .result__redo { align-self: center; }

/* the offer box (Prima Cutie / Descoperire, price from the catalog) — also the B2B recommendation */
.quiz .rec { padding: 18px 20px; border-radius: 16px; background: var(--s-card); border: 1px solid var(--s-line); }
.quiz .result__offer .rec__kg { margin-top: 0; }
.quiz .result__offer { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink), var(--s-shadow); }
.rec__kg { margin-top: 6px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--s-ink); }
.quiz .plan__price { margin-top: 8px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.quiz .plan__amount { font-size: 42px; line-height: 1.1; color: var(--s-ink); letter-spacing: .01em; }
.quiz .plan__price .caption { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--s-muted); }
.rec__why { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--s-muted); }
.rec__name { font-size: clamp(26px, 1.2rem + 1vw, 32px); color: var(--s-ink); }
.quiz .rec .rec__why.editorial { font-size: 17px; line-height: 1.4; }
.rec__picked { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--s-muted); }
.rec__picked strong { color: var(--s-ink); }

/* unavailable */
.result--unavailable { padding: 16px 0 8px; text-align: center; }
.result--unavailable .doodle { margin-inline: auto; }
.result--unavailable .quiz__title { margin: 18px auto 0; }
.result--unavailable .result__reason { max-width: 46ch; margin-inline: auto; font-size: 18px; }

/* ---------- B2B result: recommendation + lead form; contact form — checkout-like fields ---------- */
.quiz .result > .caption + .quiz__title { margin-top: 6px; }
.quiz .result > .rec { margin-top: 20px; }
.quiz .lead { margin-top: 28px; max-width: none; color: var(--s-ink); text-align: left; }
/* display titles inside dialogs keep Anton at every width (the phone type pass turns page form titles into Archivo caps) */
.quiz .lead__title, .quiz .done__title {
  display: block; overflow: visible; -webkit-line-clamp: unset;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; line-height: var(--lh-display); text-transform: uppercase;
}
.quiz .lead__title { font-size: 24px; color: var(--s-ink); }
.quiz .lead__sub { margin-top: 6px; font-size: 15px; color: var(--s-muted); }
.quiz .lead__grid { margin-top: 18px; gap: 16px; }
.quiz .field { gap: 6px; }
.quiz .field__label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--s-ink); }
.quiz .field__label small { font-size: 13px; font-weight: 500; color: var(--s-soft); }
.quiz .field__input {
  min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--s-ink);
  background: var(--s-card); border: 1px solid var(--s-line-2); border-radius: 10px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.quiz .field__input::placeholder { color: var(--s-soft); }
.quiz .field__input:hover { border-color: rgba(48, 33, 25, .4); }
.quiz .field__input:focus { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.quiz .field__input:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 2px; }
.quiz .field.is-invalid .field__input { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); background: var(--s-kraft-tint); }
.quiz .field__err { font-size: 14px; color: var(--s-ink); }
.quiz .check { gap: 12px; font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.quiz .check__box {
  width: 22px; height: 22px; border: 1.5px solid var(--s-line-2); border-radius: 6px; background: var(--s-card); color: var(--s-bg);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.quiz .check:hover .check__box { border-color: var(--s-ink); }
.quiz .check input:checked + .check__box { background: var(--s-ink); border-color: var(--s-ink); }
.quiz .check input:focus-visible + .check__box { outline: 3px solid var(--s-ink); outline-offset: 2px; }
.quiz .field.is-invalid .check__box { border-color: var(--s-ink); }
.quiz .lead__actions { margin-top: 22px; gap: 10px 18px; }
.lead__or { margin: 0; }
.quiz .lead__msg { margin-top: 14px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--s-kraft-tint); color: var(--s-ink); font-size: 15px; }
.quiz .lead__msg button, .quiz .lead__msg .lead__msg-link { color: var(--s-ink); }
.quiz .result > .result__redo { margin-top: 10px; }

/* done (B2B lead sent, contact sent) */
.quiz .done { padding: 28px 0 12px; text-align: center; }
.quiz .done__title { margin: 18px auto 0; max-width: 20ch; font-size: clamp(28px, 1.3rem + 1.2vw, 38px); color: var(--s-ink); }
.quiz .done__sub { margin: 10px auto 0; max-width: 44ch; font-size: 18px; color: var(--s-muted); }
.quiz .done__actions { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quiz .done__actions .btn { min-width: min(240px, 100%); }

/* ---------- contact dialog ---------- */
.quiz--contact .quiz__panel { max-width: 580px; }
.contact__topic { margin: 0; }
.contact__sub { margin-top: 8px; font-size: 15px; color: var(--s-muted); }
.contact .lead { margin-top: 20px; }
.contact .lead__grid { grid-template-columns: minmax(0, 1fr); }
.contact .field__input--area { min-height: 128px; resize: vertical; line-height: 1.5; }

body.quiz-open { overflow: hidden; }

/* ---------- tablet / phone: full-screen sheet, two-column options, sticky bottom actions ---------- */
@media (max-width: 899px) {
  .quiz { padding: 0; align-items: stretch; }
  .quiz__panel { max-width: none; max-height: none; height: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .quiz--contact .quiz__panel { max-width: none; }
  .quiz__top { min-height: 60px; padding: 8px 8px 8px 20px; padding-top: max(8px, env(safe-area-inset-top)); }
  .quiz__body { padding: 20px 20px 28px; }
  .qscreen.is-exit { left: 20px; right: 20px; top: 20px; }
  .quiz__title { font-size: 28px; max-width: none; }
  .quiz__hint { font-size: 16px; }
  .qcards { margin-top: 18px; gap: 10px; }
  .qcards--2, .qcards--3, .qcards--4, .qcards--5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .qcards--5 > .qcard { width: auto; }
  .qcard { padding: 6px 6px 12px; border-radius: 14px; }
  .qcard__media { border-radius: 9px; }
  .qcard__text { padding: 10px 4px 0; }
  .qcard__label { font-size: 15px; }
  .qcard__note { font-size: 12.5px; }
  .qcard__media::after { top: 6px; right: 6px; width: 26px; height: 26px; background-size: 14px; }
  /* back / skip stay reachable at the bottom of the sheet */
  .quiz__body > .qscreen { min-height: 100%; display: flex; flex-direction: column; }
  .qcards { margin-bottom: 20px; }
  .quiz__nav {
    position: sticky; bottom: -28px; z-index: 2; margin: auto -20px -28px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--s-bg); border-top: 1px solid var(--s-line);
  }
  .result--rec { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .result__card { padding: 16px; }
  .result__head { gap: 14px; align-items: flex-start; }
  .result__media { width: 96px; }
  .result__persona { font-size: 26px; }
  .result__tag { font-size: 16px; }
  .result__coffee { margin-top: 8px; font-size: 17px; }
  .result__reason { font-size: 15px; }
  .result__profile { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .quiz .plan__amount { font-size: 38px; }
  .quiz .lead__grid { grid-template-columns: minmax(0, 1fr); }
  .quiz .lead__actions .btn { width: 100%; }
  .lead__or { width: 100%; text-align: center; }
  .quiz .done__title { font-size: 28px; }
}
@media (max-width: 374px) {
  .quiz__progress-row { gap: 8px; }
  .quiz__thumb { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz__panel, .quiz__fill, .qscreen, .qcard, .qcard__media img, .qcard__media::after, .quiz__thumb::before,
  .quiz .field__input, .quiz .check__box, .quiz .btn { transition: none !important; animation: none !important; }
  .qscreen.is-enter, .qscreen.is-exit { transform: none !important; opacity: 1 !important; }
  .qcard:hover, .qcard:hover .qcard__media img { transform: none !important; }
}