/* ============================================================
 * dh-v2-sections.css — section components for deinehaut v2
 *   value bento · includes · method protocol · founder ·
 *   reviews · trust · compare · manifesto · offer · faq · drawer
 * ============================================================ */

/* ---------- Value stack (pinned scroll-scrubbed deck) ---------- */
.v2-value { background:var(--sand); }
.v2-value__head {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(.7rem, .5rem + .6vw, 1.05rem); max-width:52rem;
  margin:0 auto clamp(2.4rem, 6vh, 4rem);
}
.v2-value__heading {
  font-size:clamp(1.95rem, 1.1rem + 2.9vw, 3.15rem);
  line-height:1.05; letter-spacing:-.02em;
  /* 30ch is sized against the heading's own (large) font, so it sits on ONE line
     on desktop and wraps to a balanced TWO lines on narrow screens, never three. */
  max-width:30ch; text-wrap:balance; text-wrap:pretty;
}
.v2-value__heading em { font-style:italic; }   /* terra accent inherited from .v2-h2 em */

/* Background scene — atmosphere (centre-lift + glow + grain) and the data-signal layer.
 * The signal SVG is injected by JS only when motion is welcome; the glow + grain
 * remain as a calm, premium backdrop in every mode. */
.v2-value__pin { position:relative; }
.v2-value__frame { position:relative; z-index:1; }
.v2-value__bg {
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(125% 80% at 50% 44%, color-mix(in oklab, var(--paper) 88%, transparent), transparent 62%);
}
.v2-value__glow {
  position:absolute; left:50%; top:47%; width:min(90vw, 1180px); aspect-ratio:1 / 0.62;
  transform:translate(-50%, -50%);
  background:radial-gradient(closest-side, color-mix(in oklab, var(--glow, var(--terra)) 15%, transparent), transparent 70%);
  opacity:.8; filter:blur(8px); transition:background 1s var(--ease); will-change:background;
}
.v2-value__bg::after {   /* fine apothecary grain */
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.v2-value__signal { position:absolute; inset:0; width:100%; height:100%; display:block; }
.v2-value__sig-line { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.14; }

/* Baseline (no-JS / reduced-motion): eyebrow + a clean vertical card list. */
.v2-value__stage { position:relative; }
.v2-value__frame { display:flex; flex-direction:column; }
.v2-value__deck { display:flex; flex-direction:column; gap:1rem; width:100%; max-width:600px; margin-inline:auto; }
.v2-value__card { position:relative; }

/* Visible card surface. */
.v2-value__inner {
  position:relative; display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:clamp(1rem, 1rem + 1.6vw, 1.9rem);
  padding:clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  border-radius:var(--radius-lg); background:var(--paper);
  border:1px solid var(--line-2); box-shadow:var(--shadow-md);
  overflow:hidden;
}
.v2-value__inner::before {   /* accent edge — the strip that peeks when stacked */
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--accent, var(--terra)); z-index:1;
}
.v2-value__inner::after {    /* depth scrim — JS raises --dim as the card is buried (bg stays opaque) */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--ink); opacity:var(--dim, 0); pointer-events:none; z-index:2;
}

.v2-value__index { display:flex; flex-direction:column; align-items:flex-start; gap:.95rem; }
.v2-value__num { font-family:var(--serif); font-weight:480; font-size:clamp(2.3rem, 1.4rem + 3vw, 3.5rem); line-height:.82; color:var(--accent, var(--terra)); }
.v2-value__icon {
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:13px; color:var(--accent, var(--terra));
  background:color-mix(in oklab, var(--accent, var(--terra)) 13%, transparent);
}
.v2-value__icon svg { width:24px; height:24px; }
.v2-value__title { font-family:var(--serif); font-weight:480; font-size:clamp(1.3rem, 1.05rem + 1vw, 1.8rem); line-height:1.1; letter-spacing:-.01em; margin-bottom:.55rem; }
.v2-value__body { color:var(--ink-3); font-size:1.02rem; line-height:1.6; max-width:46ch; }

/* ---- Pinned stacking scene — JS adds .is-stack when motion is welcome ---- */
@media (prefers-reduced-motion:no-preference) {
  .v2-value__stage.is-stack { height:calc(100vh + (var(--cards, 4) - 1) * 64vh); }
  .v2-value__stage.is-stack .v2-value__pin {
    position:sticky; top:0; height:100vh; min-height:580px;
    display:flex; align-items:center;
  }
  .v2-value__stage.is-stack .v2-value__deck { position:relative; }  /* height set by JS to the tallest card */
  .v2-value__stage.is-stack .v2-value__card {
    position:absolute; left:0; right:0; top:0;
    transform-origin:top center; will-change:transform, opacity; backface-visibility:hidden;
  }
}

/* On small screens the index sits in a row above the text. */
@media (max-width:560px) {
  .v2-value__inner { grid-template-columns:1fr; gap:.6rem; }
  .v2-value__index { flex-direction:row; align-items:center; gap:.85rem; }
}

/* ---------- Recognise — pain word-cloud (a dark ember field of recognitions) ----------
 * Sits straight after "So funktioniert Deine Lernreise": a pattern-interrupt where the
 * visitor scans their own felt symptoms before the page returns to the product. Warm
 * ember glow + grain on ink; words drift like embers and light up on scroll. All motion
 * is gated behind prefers-reduced-motion: no-preference (clean static fallback below). */
.v2-recognise { background:var(--ink); color:var(--sand); position:relative; overflow:hidden; }
.v2-recognise__glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 54% at 50% 40%, rgba(184,85,67,.30), transparent 62%),
    radial-gradient(42% 44% at 80% 86%, rgba(204,171,104,.10), transparent 60%),
    radial-gradient(40% 46% at 14% 88%, rgba(184,85,67,.10), transparent 60%);
}
.v2-recognise::after {   /* fine apothecary grain, matched to the rest of the page */
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.v2-recognise__inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.v2-recognise__eyebrow { color:var(--terra-soft); margin:0 auto clamp(2.2rem, 5vh, 3.6rem); }

/* The cloud — a responsive, overflow-safe tag field; varied size + opacity reads as depth. */
.v2-recognise__cloud {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(.5rem, 1.4vw, 1.1rem) clamp(.8rem, 2.4vw, 2rem);
  max-width:62rem; margin-inline:auto; padding:0;
}
.v2-recognise__word { list-style:none; line-height:1.05; cursor:default; }
.v2-recognise__word--lg {
  font-family:var(--serif); font-style:italic; font-weight:480;
  font-size:clamp(2rem, 1.2rem + 3.6vw, 4.3rem); letter-spacing:-.015em;
  color:var(--terra-soft);
}
.v2-recognise__word--md {
  font-family:var(--serif); font-weight:480;
  font-size:clamp(1.05rem, .9rem + 1vw, 1.65rem); color:rgba(245,240,230,.86);
}
.v2-recognise__word--sm {
  font-family:var(--mono); font-size:clamp(.72rem, .68rem + .3vw, .9rem);
  letter-spacing:.02em; color:rgba(245,240,230,.46);
}
.v2-recognise__float { display:inline-block; }

/* Designed hover/focus: the recognition warms and lifts under the pointer. */
.v2-recognise__word { transition:color .35s var(--ease), text-shadow .35s var(--ease); }
.v2-recognise__word:hover { color:var(--paper); }
.v2-recognise__word--lg:hover { color:#fff; text-shadow:0 0 34px rgba(205,133,118,.45); }

/* The answer: contained and calm, deliberately set apart from the cloud above
 * through generous whitespace (no rule). Lead-in is body sans (prose), punch
 * stays serif (the emotional payoff). */
.v2-recognise__resolve {
  text-align:center; color:var(--sand);
  width:min(100%, 42rem); margin:clamp(3.4rem, 7.5vw, 5.6rem) auto 0;
  display:flex; flex-direction:column; align-items:center; gap:clamp(1rem, 2.6vw, 1.6rem);
  padding:clamp(2.1rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3.2rem);
  border:1px solid var(--line-light); border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 92% at 50% 0%, rgba(184,85,67,.12), transparent 68%),
    rgba(245,240,230,.035);
  box-shadow:0 30px 66px rgba(0,0,0,.30), inset 0 1px 0 rgba(245,240,230,.06);
}
.v2-recognise__lead-in {
  font-family:var(--sans); font-weight:400; font-style:normal;
  font-size:clamp(1.02rem, .95rem + .45vw, 1.26rem); line-height:1.5; letter-spacing:.002em;
  color:rgba(245,240,230,.74); max-width:40ch; text-wrap:pretty;
}
.v2-recognise__punch {
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.55rem, 1.1rem + 2vw, 2.5rem); line-height:1.18; letter-spacing:-.015em;
  color:var(--paper); max-width:24ch; text-wrap:balance;
}
.v2-recognise__resolve em { font-style:italic; color:var(--terra-soft); }

/* Keep-scrolling cue: a thin trail down which an ember descends — echoes the
 * word-cloud above and pulls the eye into the method. Motion gated below. */
.v2-recognise__scroll {
  display:flex; flex-direction:column; align-items:center; gap:clamp(.8rem, 1.8vw, 1.1rem);
  margin-top:clamp(2.8rem, 6vw, 4.6rem);
}
.v2-recognise__scroll-label {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,240,230,.5);
}
.v2-recognise__scroll-track {
  position:relative; width:1px; height:clamp(2.8rem, 6vw, 3.8rem); overflow:hidden;
  background:linear-gradient(180deg, rgba(205,133,118,.38), rgba(205,133,118,.04));
}
.v2-recognise__scroll-spark { position:absolute; inset:0; }
.v2-recognise__scroll-spark::before {
  content:""; position:absolute; left:50%; top:0; transform:translate(-50%, -100%);
  width:3px; height:44%; border-radius:3px;
  background:linear-gradient(180deg, transparent, var(--terra-soft));
  box-shadow:0 0 12px 1px rgba(205,133,118,.55);
}

/* Static, fully legible fallback for no-JS and reduced-motion. */
@media (prefers-reduced-motion:no-preference) {
  .v2-recognise__word {
    opacity:0; transform:translateY(14px); filter:blur(6px);
    transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft),
               filter .7s var(--ease-soft), color .35s var(--ease), text-shadow .35s var(--ease);
    transition-delay:calc(var(--i, 0) * 55ms);
  }
  .v2-recognise.is-lit .v2-recognise__word { opacity:1; transform:none; filter:none; }

  /* Continuous ember drift on the inner layer, so it never fights the entrance transform.
   * Varied vectors + durations + phase keep the field from pulsing in unison. */
  .v2-recognise.is-lit .v2-recognise__float {
    animation:v2-ember-drift var(--dur, 8s) var(--ease) calc(var(--i, 0) * -0.6s) infinite;
    will-change:transform;
  }
  .v2-recognise__word:nth-child(5n+1) .v2-recognise__float { --dx:5px;  --dy:-7px; --dur:7.5s; }
  .v2-recognise__word:nth-child(5n+2) .v2-recognise__float { --dx:-4px; --dy:6px;  --dur:9.2s; }
  .v2-recognise__word:nth-child(5n+3) .v2-recognise__float { --dx:6px;  --dy:5px;  --dur:8.3s; }
  .v2-recognise__word:nth-child(5n+4) .v2-recognise__float { --dx:-6px; --dy:-5px; --dur:10s; }
  .v2-recognise__word:nth-child(5n+5) .v2-recognise__float { --dx:3px;  --dy:8px;  --dur:8.8s; }
  /* Break the row baseline so it reads as a cloud, not a centred list. */
  .v2-recognise__word:nth-child(3n+1) { align-self:flex-start; }
  .v2-recognise__word:nth-child(7n+4) { align-self:flex-end; }

  /* The scroll cue's ember falls down the trail on a loop. */
  .v2-recognise__scroll-spark::before { animation:v2-scroll-ember 2.2s var(--ease) infinite; }
}
@keyframes v2-ember-drift {
  0%, 100% { transform:translate3d(0, 0, 0); }
  50%      { transform:translate3d(var(--dx, 0), var(--dy, -6px), 0); }
}
@keyframes v2-scroll-ember {
  0%   { transform:translate(-50%, -100%); opacity:0; }
  22%  { opacity:1; }
  72%  { opacity:1; }
  100% { transform:translate(-50%, 250%); opacity:0; }
}

/* ---------- Includes — "Zwei Teile, ein Protokoll" ---------- */
.v2-includes { background:var(--bone); }
.v2-includes__head { text-align:center; display:flex; flex-direction:column; gap:1.1rem; align-items:center; margin-bottom:clamp(2.6rem,5vw,4rem); }
.v2-includes__rows { display:flex; flex-direction:column; gap:clamp(1.4rem,3vw,2.2rem); }
.v2-include {
  display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center;
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-2); box-shadow:var(--shadow-md);
}
.v2-include__media { position:relative; overflow:hidden; background:var(--sand-2); aspect-ratio:16/11; }
/* Top-down flatlay reads best whole — show the full square instead of cropping the grid. */
.v2-include__media--square { aspect-ratio:1/1; }
.v2-include__media img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.v2-include:hover .v2-include__media img { transform:scale(1.04); }
.v2-include__text { padding:clamp(1.6rem,3vw,2.8rem) clamp(1.5rem,3vw,2.6rem); }
.v2-include__num { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--terra); display:inline-flex; align-items:center; gap:.6em; margin-bottom:1rem; }
.v2-include__num::before { content:""; width:1.6rem; height:1px; background:var(--terra); opacity:.5; }
.v2-include__title { font-size:clamp(1.5rem,1.1rem+1.4vw,2.1rem); margin-bottom:.8rem; }
.v2-include__body { color:var(--ink-3); font-size:1.02rem; line-height:1.6; max-width:46ch; }
@media (min-width:760px){
  .v2-include { grid-template-columns:1fr 1fr; gap:0; }
  .v2-include--reverse .v2-include__media { order:2; }
}

/* ---------- Method protocol (sticky reader) ---------- */
.v2-method { background:var(--sand); }
.v2-method__head { max-width:24ch; margin-bottom:clamp(2.6rem,5vw,4rem); }
.v2-method__layout { display:grid; grid-template-columns:1fr; gap:2rem; }
.v2-method__aside { display:none; }
.v2-method__rail { position:sticky; top:160px; display:flex; flex-direction:column; gap:.2rem; }
.v2-method__rail-item { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:12px; color:var(--ink-3); transition:background .3s var(--ease), color .3s var(--ease); }
.v2-method__rail-item.is-active { background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm); }
.v2-method__rail-dot { width:12px; height:12px; border-radius:50%; background:var(--dot,var(--terra)); flex-shrink:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--dot,var(--terra)) 18%, transparent); }
.v2-method__rail-week { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.v2-method__rail-name { font-family:var(--serif); font-size:1.05rem; }
.v2-method__steps { display:flex; flex-direction:column; gap:1.2rem; }
.v2-step {
  position:relative; padding:clamp(1.6rem,3vw,2.4rem); border-radius:var(--radius);
  background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  border-left:4px solid var(--accent,var(--terra)); overflow:hidden;
}
.v2-step__bg { position:absolute; top:-30%; right:-10%; width:240px; height:240px; border-radius:50%; background:var(--accent,var(--terra)); opacity:.06; pointer-events:none; }
.v2-step__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.v2-step__label { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent,var(--terra)); font-weight:600; }
.v2-step__week { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-3); padding:.3rem .7rem; border:1px solid var(--line); border-radius:999px; }
.v2-step__headline { font-size:clamp(1.4rem,1.1rem+1vw,1.9rem); margin-bottom:.7rem; }
.v2-step__body { color:var(--ink-2); }
.v2-step__body p { margin-bottom:1rem; }
.v2-step__ingredients { display:flex; flex-direction:column; gap:.6rem; margin-top:1.1rem; }
.v2-ingredient { display:flex; gap:.7rem; align-items:baseline; font-size:.96rem; color:var(--ink-2); }
.v2-ingredient__pct { font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--accent,var(--terra)); padding:.25rem .55rem; border-radius:7px; background:color-mix(in srgb,var(--accent,var(--terra)) 12%, transparent); white-space:nowrap; flex-shrink:0; }
@media (min-width:900px){
  .v2-method__layout { grid-template-columns:280px 1fr; gap:clamp(2rem,4vw,4rem); }
  .v2-method__aside { display:block; }
  .v2-method__steps { gap:clamp(1.2rem,3vw,2rem); }
}

/* ---------- Founder ---------- */
.v2-founder { background:var(--bone); }
.v2-founder__inner { display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.v2-founder__media { position:relative; }
.v2-founder__portrait { margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.v2-founder__portrait img { width:100%; }
.v2-founder__quote { position:absolute; right:-.5rem; bottom:-1.4rem; max-width:15rem; padding:1.1rem 1.3rem; background:var(--terra); color:var(--paper); border-radius:16px; box-shadow:var(--shadow-md); font-family:var(--serif); font-style:italic; font-size:1.02rem; line-height:1.35; }
.v2-founder__content { display:flex; flex-direction:column; gap:1.4rem; }
.v2-founder__headline { font-size:var(--fs-h2); line-height:1.08; }
.v2-founder__story { display:flex; flex-direction:column; gap:1.1rem; }
.v2-founder__para { color:var(--ink-2); font-size:1.04rem; line-height:1.66; }
.v2-founder__para:first-of-type::first-letter { font-family:var(--serif); font-size:3.4em; line-height:.72; float:left; padding:.05em .12em 0 0; color:var(--terra); font-weight:500; }
.v2-founder__sign { display:flex; flex-direction:column; margin-top:.8rem; }
.v2-founder__sign-name { font-family:var(--script); font-size:2.2rem; line-height:1; color:var(--ink); }
.v2-founder__sign-role { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:.3rem; }
@media (min-width:880px){
  .v2-founder__inner { grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,5vw,5rem); }
  .v2-founder__media { position:sticky; top:150px; }
}

/* ---------- Journal banner — "Lenas Journal" (trust + curiosity, follows founder) ----------
 * A light send-off card on the bone field before the dark Trust section. It is a
 * window into the real /blog/ Journal: it borrows the journal's own visual grammar
 * (accent-dot categories, draw-on-hover title underline) and implies a body of work
 * through real, substantial article teasers rather than a vanity count. */
.v2-journal { background:var(--bone); position:relative; z-index:2; padding-block:0 clamp(3.5rem,3rem + 3.5vw,5.75rem); }

/* Stack wrapper carries a layered-paper depth: a journal of pages, sensed not stated */
.v2-journal__stack { position:relative; }
.v2-journal__stack::before,
.v2-journal__stack::after {
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; pointer-events:none;
  border-radius:var(--radius-lg); background:var(--sand-2); border:1px solid var(--line-2);
}
.v2-journal__stack::before { transform:translateY(9px) scaleX(.975); opacity:.7; }
.v2-journal__stack::after  { transform:translateY(18px) scaleX(.945); opacity:.42; }

.v2-journal__card {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.6rem,1.25rem + 1.6vw,2.9rem);
}

/* Intro column */
.v2-journal__intro { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.v2-journal__headline { font-size:clamp(1.5rem,1.16rem + 1.5vw,2.2rem); line-height:1.12; letter-spacing:-.018em; max-width:18ch; }
.v2-journal__headline em { font-style:italic; color:var(--terra); }
.v2-journal__lede { color:var(--ink-3); font-size:1.01rem; line-height:1.58; max-width:44ch; }
.v2-journal__cta {
  display:inline-flex; align-items:center; gap:.5em; margin-top:.15rem;
  font-weight:600; color:var(--terra);
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--terra) 32%, transparent);
  transition:gap .25s var(--ease), text-decoration-color .25s var(--ease), color .2s var(--ease);
}
.v2-journal__cta:hover { gap:.8em; color:var(--terra-deep); text-decoration-color:var(--terra); }
.v2-journal__cta-arrow { transition:transform .3s var(--ease); }
.v2-journal__cta:hover .v2-journal__cta-arrow { transform:translateX(3px); }

/* Feed column */
.v2-journal__feed { display:flex; flex-direction:column; }
.v2-journal__feed-label {
  margin-bottom:.55rem;
  font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); line-height:1.5;
}
.v2-journal__feed-count { color:var(--terra); white-space:nowrap; }
.v2-journal__list { display:flex; flex-direction:column; }
.v2-journal__list li { border-top:1px solid var(--line-2); }
.v2-journal__list li:first-child { border-top:0; }

.v2-journal__post {
  position:relative; display:grid; gap:.4rem; padding:.95rem .85rem; border-radius:12px;
}
.v2-journal__post::before {
  content:""; position:absolute; inset:0; z-index:0; border-radius:12px;
  background:color-mix(in srgb, var(--accent,var(--terra)) 7%, transparent);
  opacity:0; transition:opacity .3s var(--ease);
}
.v2-journal__post > * { position:relative; z-index:1; }
.v2-journal__post:hover::before,
.v2-journal__post:focus-visible::before { opacity:1; }
.v2-journal__post:focus-visible { outline:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,var(--terra)) 55%, transparent); }

.v2-journal__cat {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent,var(--terra));
}
.v2-journal__cat::before { content:""; width:.5em; height:.5em; border-radius:50%; background:var(--accent,var(--terra)); flex:none; }
.v2-journal__post-title {
  font-family:var(--serif); font-size:1.08rem; line-height:1.26; color:var(--ink); letter-spacing:-.01em;
  background-image:linear-gradient(var(--accent,var(--terra)),var(--accent,var(--terra)));
  background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--ease);
}
.v2-journal__post:hover .v2-journal__post-title,
.v2-journal__post:focus-visible .v2-journal__post-title { background-size:100% 1.5px; }
.v2-journal__post-meta {
  display:inline-flex; align-items:center; gap:.55em; margin-top:.1rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--ink-3);
}
.v2-journal__post-arrow { color:var(--accent,var(--terra)); transition:transform .3s var(--ease); }
.v2-journal__post:hover .v2-journal__post-arrow,
.v2-journal__post:focus-visible .v2-journal__post-arrow { transform:translateX(4px); }

@media (min-width:860px){
  .v2-journal__card { grid-template-columns:0.9fr 1.1fr; align-items:stretch; gap:0; padding:clamp(2.4rem,1.7rem + 1.7vw,3.4rem); }
  .v2-journal__intro { padding-right:clamp(2.2rem,3.5vw,3.6rem); }
  .v2-journal__feed { padding-left:clamp(2.2rem,3.5vw,3.6rem); border-left:1px solid var(--line-2); }
}

@media (prefers-reduced-motion:reduce){
  .v2-journal__cta, .v2-journal__cta-arrow,
  .v2-journal__post-title, .v2-journal__post-arrow, .v2-journal__post::before { transition:none; }
}

/* ---------- Reviews ---------- */
.v2-reviews { background:var(--sand); }
.v2-reviews__head { display:flex; flex-direction:column; gap:1rem; margin-bottom:2.6rem; }
.v2-reviews__summary { display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center; padding:clamp(1.6rem,3vw,2.4rem); border-radius:var(--radius-lg); background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--shadow-md); margin-bottom:2.4rem; }
.v2-reviews__score { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; }
.v2-reviews__score-num { font-family:var(--serif); font-size:4rem; line-height:.9; }
.v2-reviews__score .v2-stars { font-size:1.2rem; }
.v2-reviews__score-count { font-size:.86rem; color:var(--ink-3); }
.v2-reviews__bars { display:flex; flex-direction:column; gap:.55rem; }
.v2-reviews__bar { display:grid; grid-template-columns:2.4rem 1fr 1.6rem; align-items:center; gap:.8rem; font-size:.84rem; color:var(--ink-3); }
.v2-reviews__bar-track { display:block; height:8px; border-radius:999px; background:rgba(31,29,26,.08); overflow:hidden; }
.v2-reviews__bar-fill { display:block; height:100%; border-radius:999px; background:var(--gold); width:0; transition:width 1s var(--ease); }
.v2-reviews__bar-num { text-align:right; font-variant-numeric:tabular-nums; }
.v2-reviews__list { display:grid; grid-template-columns:1fr; gap:1rem; }
.v2-review { padding:1.6rem; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.9rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.v2-review:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.v2-review__top { display:flex; align-items:center; gap:.8rem; }
.v2-review__avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.1rem; color:var(--paper); background:var(--tan); flex-shrink:0; }
.v2-review__meta { display:flex; flex-direction:column; line-height:1.2; }
.v2-review__name { font-weight:650; font-size:.95rem; }
.v2-review__verified { font-size:.74rem; color:var(--c-tone); display:inline-flex; align-items:center; gap:.3em; }
.v2-review__time { margin-left:auto; font-size:.76rem; color:var(--ink-3); }
.v2-review__stars { color:#e0a93c; letter-spacing:.08em; font-size:.9rem; }
.v2-review__text { color:var(--ink-2); font-size:.98rem; line-height:1.55; }
.v2-reviews__actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; margin-top:2rem; }
@media (min-width:680px){
  .v2-reviews__summary { grid-template-columns:auto 1fr; gap:3rem; }
  .v2-reviews__list { grid-template-columns:1fr 1fr; }
}
@media (min-width:1000px){ .v2-reviews__list { grid-template-columns:repeat(3,1fr); } }

/* Hidden extra reviews — explicit so the [hidden] attr beats .v2-review's display:flex */
.v2-review[hidden] { display:none; }
/* Newly-revealed reviews fade + rise into place */
.v2-review--more { animation:v2-review-in .5s var(--ease) both; }
@keyframes v2-review-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .v2-review--more { animation:none; } }

/* ---------- Review modal ---------- */
.v2-rmodal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,2rem); }
.v2-rmodal[hidden] { display:none; }
.v2-rmodal__overlay { position:absolute; inset:0; background:rgba(31,29,26,.52); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s var(--ease); }
.v2-rmodal.is-open .v2-rmodal__overlay { opacity:1; }
.v2-rmodal__panel {
  position:relative; width:100%; max-width:460px; max-height:calc(100dvh - 2rem); overflow-y:auto;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:clamp(1.6rem,4vw,2.4rem);
  transform:translateY(16px) scale(.985); opacity:0; transition:transform .38s var(--ease), opacity .38s var(--ease);
}
.v2-rmodal.is-open .v2-rmodal__panel { transform:none; opacity:1; }
.v2-rmodal__close { position:absolute; top:1rem; right:1rem; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--ink-3); cursor:pointer; border-radius:50%; transition:background .25s var(--ease), color .25s var(--ease); }
.v2-rmodal__close:hover { background:var(--sand-2); color:var(--ink); }
.v2-rmodal__close svg { width:20px; height:20px; }
.v2-rmodal__title { font-family:var(--serif); font-size:clamp(1.6rem,1.2rem+1.4vw,2.1rem); line-height:1.05; margin:.4rem 0 .6rem; }
.v2-rmodal__note { color:var(--ink-3); font-size:.9rem; line-height:1.5; margin-bottom:1.4rem; }
@media (prefers-reduced-motion:reduce){
  .v2-rmodal__overlay, .v2-rmodal__panel { transition:none; }
  .v2-rmodal__panel { transform:none; opacity:1; }
}

/* ---------- Review form ---------- */
.v2-rform { display:flex; flex-direction:column; gap:1.05rem; }
.v2-rform__stars { border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.v2-rform__star-label, .v2-rform__field > span { font-size:.8rem; font-weight:600; letter-spacing:.01em; color:var(--ink-2); }
.v2-rform__star-row { display:flex; gap:.25rem; }
.v2-rform__star { background:none; border:none; padding:.1rem; font-size:1.7rem; line-height:1; cursor:pointer; color:rgba(31,29,26,.18); transition:color .15s var(--ease), transform .15s var(--ease); }
.v2-rform__star:hover { transform:scale(1.12); }
.v2-rform__star.is-on { color:#e0a93c; }
.v2-rform__field { display:flex; flex-direction:column; gap:.4rem; }
.v2-rform__field input, .v2-rform__field textarea {
  font:inherit; font-size:.96rem; color:var(--ink); background:var(--sand); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.7rem .85rem; width:100%; resize:vertical;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.v2-rform__field input::placeholder, .v2-rform__field textarea::placeholder { color:var(--ink-3); opacity:.65; }
.v2-rform__field input:focus, .v2-rform__field textarea:focus { outline:none; background:var(--paper); border-color:var(--terra); box-shadow:0 0 0 3px color-mix(in srgb,var(--terra) 16%, transparent); }
.v2-rform__field.has-error input, .v2-rform__field.has-error textarea { border-color:var(--terra); box-shadow:0 0 0 3px color-mix(in srgb,var(--terra) 14%, transparent); }
.v2-rform__error {
  display:flex; gap:.55rem; align-items:flex-start; margin:0; padding:.8rem .9rem;
  background:color-mix(in srgb,var(--terra) 10%, var(--paper)); border:1px solid color-mix(in srgb,var(--terra) 35%, transparent);
  border-radius:var(--radius-sm); color:var(--terra-deep); font-size:.86rem; line-height:1.45;
}
.v2-rform__error[hidden] { display:none; }
.v2-rform__error::before { content:"!"; flex-shrink:0; width:1.15rem; height:1.15rem; margin-top:.05rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--terra); color:var(--paper); font-weight:700; font-size:.74rem; }
.v2-rform__submit { margin-top:.2rem; justify-content:center; width:100%; }
.v2-rform__submit[aria-busy="true"] { opacity:.7; pointer-events:none; }

/* ---------- Trust — compact 2x2 reassurance band ----------
   Four EQUAL tiles on --ink and nothing else: no header, no hairline, just the grid.
   The page's dark visual break between two light --bone sections. Each tile is a mono
   micro-label + terse serif title + one line of copy. Two equal columns at every width
   (never stacks to one). Layered ink surfaces + terra glow + apothecary grain. Tiles are
   informational (not links); hover/focus is polish that warms + lifts the surface in place.
   Compositor-friendly motion only (transform/opacity). */
/* Light apothecary band — a warm cream break between the two sand sections. */
.v2-trust { background:var(--bone); color:var(--ink); position:relative; overflow:hidden; }
/* Tightened vertical rhythm: this band is a break, not a content section. */
.v2-trust.v2-section { padding-block:clamp(2.4rem, 1.9rem + 2.2vw, 4rem); }

/* Atmosphere: faint warm terra glow, tuned for a light ground. */
.v2-trust__glow {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 58% at 15% 16%, rgba(184,85,67,.10), transparent 62%),
    radial-gradient(40% 50% at 88% 90%, rgba(204,171,104,.12), transparent 60%),
    radial-gradient(38% 44% at 6% 92%, rgba(184,85,67,.05), transparent 60%);
}
/* Fine apothecary grain — identical technique to the rest of the page. */
.v2-trust::after {
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.05; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.v2-trust__inner { position:relative; z-index:2; }

/* Compact 2x2 — two equal columns at EVERY width (never collapses to one). */
.v2-trust__grid {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch; gap:clamp(.6rem, .35rem + 1vw, 1.2rem);
}
.v2-trust__tile { display:flex; min-width:0; }

/* Denoised tile: a calm paper surface that lets the serif title lead. No icon,
   no index, no spine, no wash — the restraint is the point. Depth comes from the
   lifted paper face over the bone band, a hairline border and a soft shadow. */
.v2-trust__face {
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  width:100%; height:100%; min-width:0;
  padding:clamp(1.15rem, .85rem + 1.4vw, 1.9rem);
  border-radius:var(--radius); background:var(--paper);
  border:1px solid var(--line-2); color:inherit;
  box-shadow:var(--shadow-sm);
  transition:border-color .4s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}

/* Mono micro-label — the single kicker, now the top line of each tile. */
.v2-trust__label {
  font-family:var(--mono); font-size:clamp(.58rem, .54rem + .15vw, .66rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--terra);
  margin:0 0 clamp(.7rem, .55rem + .5vw, 1rem);
  display:inline-flex; align-items:center; gap:.6em;
}
.v2-trust__label::before { content:""; width:1.4rem; height:1px; background:var(--terra); opacity:.7; }

/* Title — serif, the focus of each tile. A touch larger now nothing sits above it. */
.v2-trust__title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.12rem, .98rem + .7vw, 1.5rem);
  line-height:1.14; letter-spacing:-.012em; color:var(--ink); margin:0 0 .55rem;
  text-wrap:balance; hyphens:auto; overflow-wrap:break-word;
}
.v2-trust__copy {
  font-family:var(--sans); font-size:clamp(.8rem, .73rem + .3vw, .94rem);
  line-height:1.5; color:var(--ink-3); max-width:34ch;
  margin:0; text-wrap:pretty;
}

/* ---- Restrained hover/focus: one gesture — the surface warms and lifts a hair ---- */
.v2-trust__tile:hover .v2-trust__face,
.v2-trust__tile:focus-within .v2-trust__face {
  border-color:color-mix(in oklab, var(--terra) 40%, var(--line));
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* ---- Roomier rhythm once tiles widen ---- */
@media (min-width:768px) {
  .v2-trust__grid { gap:clamp(1rem, .6rem + .9vw, 1.4rem); }
  .v2-trust__copy { max-width:30ch; }
}

/* Respect reduced motion: drop the lift, keep the colour affordance. */
@media (prefers-reduced-motion:reduce) {
  .v2-trust__face { transition:border-color .3s ease, box-shadow .3s ease; }
  .v2-trust__tile:hover .v2-trust__face,
  .v2-trust__tile:focus-within .v2-trust__face { transform:none; }
}

/* ---------- Compare ---------- */
.v2-compare { background:var(--sand); }
.v2-compare__head { text-align:center; margin-bottom:clamp(2.4rem,4vw,3.4rem); display:flex; flex-direction:column; gap:1rem; align-items:center; }
.v2-compare__table { max-width:920px; margin-inline:auto; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line-2); }
.v2-compare__row { display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:stretch; }
.v2-compare__row + .v2-compare__row .v2-compare__cell { border-top:1px solid var(--line-2); }
.v2-compare__cell { padding:1.15rem 1.2rem; display:flex; align-items:center; font-size:.97rem; line-height:1.4; }
.v2-compare__label { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:var(--bone); }
.v2-compare__cell--us { background:var(--paper); color:var(--ink); font-weight:600; position:relative; }
.v2-compare__cell--them { background:rgba(184,85,67,.14); color:var(--ink-3); }
.v2-compare__row--head .v2-compare__cell { padding-block:1.1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; justify-content:center; text-align:center; }
.v2-compare__row--head .v2-compare__cell--us { color:var(--terra); box-shadow:inset 0 -2px 0 var(--terra); }
.v2-compare__cell--us::before { content:"✓"; color:var(--c-tone); font-weight:700; margin-right:.6em; }
.v2-compare__row--head .v2-compare__cell--us::before { display:none; }
@media (max-width:620px){ .v2-compare__cell { font-size:.86rem; padding:.9rem .8rem; } .v2-compare__label{ font-size:.6rem; } }

/* ---------- Manifesto (dark "why") ---------- */
.v2-manifesto { background:var(--ink); color:var(--sand); position:relative; overflow:hidden; }
.v2-manifesto__glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 85% 10%, rgba(184,85,67,.22), transparent 60%); }
.v2-manifesto__inner { position:relative; z-index:2; }
.v2-manifesto__head { display:grid; grid-template-columns:1fr; gap:1.4rem; max-width:60rem; margin-bottom:clamp(2.6rem,5vw,4rem); }
.v2-manifesto__title { font-size:var(--fs-h2); line-height:1.06; color:var(--sand); }
.v2-manifesto__title em { font-style:italic; color:var(--terra-soft); }
.v2-manifesto__lede { color:rgba(245,240,230,.7); font-size:var(--fs-lead); max-width:48ch; }
.v2-manifesto__grid { display:grid; grid-template-columns:1fr; gap:2rem 2.4rem; }
.v2-manifesto__item { position:relative; padding-top:1.6rem; }
.v2-manifesto__item::before { content:""; position:absolute; top:0; left:0; width:2.2rem; height:2px; background:var(--terra); }
.v2-manifesto__item-num { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:rgba(245,240,230,.45); }
.v2-manifesto__item-title { font-size:1.3rem; margin:.6rem 0 .6rem; color:var(--sand); }
.v2-manifesto__item-body { color:rgba(245,240,230,.66); font-size:.97rem; line-height:1.55; }
@media (min-width:640px){ .v2-manifesto__grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .v2-manifesto__grid { grid-template-columns:repeat(4,1fr); } }

/* ---------- Final offer / close ---------- */
.v2-offer { background:linear-gradient(165deg, var(--bone), var(--sand-2)); }
.v2-offer__card {
  position:relative; max-width:1000px; margin-inline:auto; overflow:hidden;
  display:grid; grid-template-columns:1fr; border-radius:var(--radius-lg);
  background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--shadow-lg);
}
.v2-offer__media { position:relative; background:var(--sand-2); min-height:240px; }
.v2-offer__media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.v2-offer__media-badge { position:absolute; top:1.1rem; left:1.1rem; z-index:2; display:inline-flex; align-items:center; gap:.4em; padding:.45rem .9rem; border-radius:999px; background:var(--terra); color:var(--paper); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.v2-offer__body { padding:clamp(1.8rem,4vw,3rem); display:flex; flex-direction:column; gap:1.3rem; }
.v2-offer__title { font-size:clamp(1.8rem,1.3rem+1.6vw,2.6rem); line-height:1.05; }
.v2-offer__title em { font-style:italic; color:var(--terra); }
.v2-offer__list { display:flex; flex-direction:column; gap:.7rem; }
.v2-offer__list li { display:flex; gap:.7rem; align-items:baseline; color:var(--ink-2); font-size:1rem; }
.v2-offer__list li::before { content:"✓"; color:var(--c-tone); font-weight:700; flex-shrink:0; }
.v2-offer__cta { display:flex; flex-direction:column; gap:.8rem; }
.v2-offer__cta .v2-btn { width:100%; }
.v2-offer__reassure { display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; }
.v2-offer__reassure span { font-size:.84rem; color:var(--ink-3); display:inline-flex; gap:.4em; align-items:center; }
.v2-offer__reassure span::before { content:"✓"; color:var(--terra); }
.v2-offer__pay { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; opacity:.85; }
.v2-offer__pay svg { height:24px; width:auto; border-radius:4px; box-shadow:var(--shadow-sm); }
@media (min-width:820px){ .v2-offer__card { grid-template-columns:.85fr 1.15fr; } .v2-offer__media { min-height:100%; } }

/* ---------- FAQ ---------- */
.v2-faq { background:var(--sand); }
.v2-faq__inner { max-width:var(--maxw-narrow); margin-inline:auto; }
.v2-faq__head { text-align:center; display:flex; flex-direction:column; gap:1rem; align-items:center; margin-bottom:clamp(2.4rem,4vw,3.4rem); }
.v2-faq__list { display:flex; flex-direction:column; gap:.7rem; }
.v2-faq__item { border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--paper); overflow:hidden; transition:box-shadow .3s var(--ease), border-color .3s var(--ease); }
.v2-faq__item[open] { box-shadow:var(--shadow-sm); border-color:var(--line); }
.v2-faq__summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; cursor:pointer; list-style:none; font-weight:600; font-size:1.04rem; color:var(--ink); }
.v2-faq__summary::-webkit-details-marker { display:none; }
.v2-faq__icon { position:relative; flex-shrink:0; width:22px; height:22px; }
.v2-faq__icon::before, .v2-faq__icon::after { content:""; position:absolute; top:50%; left:50%; width:12px; height:2px; background:var(--terra); border-radius:2px; transform:translate(-50%,-50%); transition:transform .3s var(--ease); }
.v2-faq__icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.v2-faq__item[open] .v2-faq__icon::after { transform:translate(-50%,-50%) rotate(0); }
.v2-faq__answer { padding:0 1.4rem 1.3rem; color:var(--ink-2); line-height:1.6; max-width:64ch; }
.v2-faq__cta { text-align:center; margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem; align-items:center; }
.v2-faq__cta p { color:var(--ink-3); }

/* ---------- Disclaimer ---------- */
.v2-disclaimer { background:var(--sand); padding-block:2.6rem; }
.v2-disclaimer p { max-width:70ch; margin-inline:auto; text-align:center; font-style:italic; font-size:.84rem; color:var(--ink-3); line-height:1.6; }

/* ---------- Buy drawer ---------- */
.dh-drawer[hidden] { display:none; }
.dh-drawer { position:fixed; inset:0; z-index:90; }
.dh-drawer__overlay { position:absolute; inset:0; background:rgba(31,29,26,.5); opacity:0; transition:opacity .4s var(--ease); backdrop-filter:blur(2px); }
.dh-drawer[data-open="true"] .dh-drawer__overlay { opacity:1; }
.dh-drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(440px,100%); display:flex; flex-direction:column; background:var(--paper); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .45s var(--ease); }
.dh-drawer[data-open="true"] .dh-drawer__panel { transform:none; }
.dh-drawer__head { position:relative; padding:1.5rem 1.6rem 1.2rem; border-bottom:1px solid var(--line-2); }
.dh-drawer__eyebrow { font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terra); }
.dh-drawer__title { font-size:1.5rem; margin-top:.3rem; }
.dh-drawer__close { position:absolute; top:1.3rem; right:1.3rem; width:38px; height:38px; border:none; background:rgba(31,29,26,.05); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dh-drawer__close svg { width:20px; height:20px; }
.dh-drawer__close:hover { background:rgba(31,29,26,.1); }
.dh-drawer__body { flex:1; overflow-y:auto; padding:1.4rem 1.6rem; display:flex; flex-direction:column; gap:1.6rem; }
.dh-drawer__product { display:flex; gap:1rem; align-items:center; }
.dh-drawer__thumb { width:74px; height:74px; border-radius:13px; object-fit:cover; box-shadow:var(--shadow-sm); }
.dh-drawer__product-name { font-family:var(--serif); font-size:1.2rem; }
.dh-drawer__product-caption { font-size:.85rem; color:var(--ink-3); margin:.2rem 0; }
.dh-drawer__rating { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--ink-2); }
.dh-drawer__stars { display:inline-flex; color:#e0a93c; }
.dh-drawer__stars svg { width:14px; height:14px; fill:currentColor; }
.dh-drawer__block-label, .dh-drawer__app-title { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.9rem; display:block; }
.dh-drawer__cremes, .dh-drawer__extras, .dh-drawer__usps, .dh-drawer__steps { display:flex; flex-direction:column; gap:.7rem; }
.dh-drawer__creme-row { display:flex; align-items:center; gap:.8rem; padding-bottom:.7rem; border-bottom:1px solid var(--line-2); }
.dh-drawer__creme-icon { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--sand-2); color:var(--terra); }
.dh-drawer__creme-icon svg { width:20px; height:20px; }
.dh-drawer__creme-icon--foundation { color:var(--c-foundation); } .dh-drawer__creme-icon--tone { color:var(--c-tone); }
.dh-drawer__creme-icon--clear { color:var(--c-clear); } .dh-drawer__creme-icon--biome { color:var(--c-biome); }
.dh-drawer__creme-text { display:flex; flex-direction:column; line-height:1.3; }
.dh-drawer__creme-name { font-weight:650; }
.dh-drawer__creme-desc { font-size:.8rem; color:var(--ink-3); }
.dh-drawer__creme-size { margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--ink-3); }
.dh-drawer__extras li, .dh-drawer__usp { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.dh-drawer__usp-check { color:var(--c-tone); font-weight:700; }
.dh-drawer__extra-icon { color:var(--terra); } .dh-drawer__extra-icon svg { width:18px; height:18px; }
.dh-drawer__app { background:var(--sand); border-radius:var(--radius); padding:1.3rem; }
.dh-drawer__app-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.dh-drawer__app-icon { color:var(--terra); } .dh-drawer__app-icon svg { width:20px; height:20px; }
.dh-drawer__app-title { margin:0; }
.dh-drawer__step { display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--ink-2); }
.dh-drawer__step-icon { color:var(--terra); flex-shrink:0; } .dh-drawer__step-icon svg { width:18px; height:18px; }
.dh-drawer__step-text strong { display:block; color:var(--ink); }
.dh-drawer__app-privacy { display:flex; gap:.6rem; align-items:flex-start; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-2); font-size:.78rem; color:var(--ink-3); }
.dh-drawer__foot { padding:1.3rem 1.6rem; border-top:1px solid var(--line-2); background:var(--paper); display:flex; flex-direction:column; gap:.9rem; }
.dh-drawer__guarantee { display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--ink-2); }
.dh-drawer__guarantee-icon { color:var(--c-tone); } .dh-drawer__guarantee-icon svg { width:18px; height:18px; }
.dh-drawer__price-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.dh-drawer__price-label { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.dh-drawer__price-figures { display:flex; flex-direction:column; align-items:flex-end; }
.dh-drawer__price { font-family:var(--serif); font-size:1.9rem; line-height:1; }
.dh-drawer__price-sub { font-size:.74rem; color:var(--ink-3); }
.dh-drawer__checkout { display:flex; align-items:center; justify-content:center; gap:.6rem; padding:1.15rem; border-radius:999px; background:var(--terra); color:var(--paper); font-weight:650; box-shadow:var(--shadow-terra); transition:background .25s var(--ease), transform .25s var(--ease); }
.dh-drawer__checkout:hover { background:var(--terra-deep); transform:translateY(-2px); }
.dh-drawer__checkout-arrow { transition:transform .3s var(--ease); }
.dh-drawer__checkout:hover .dh-drawer__checkout-arrow { transform:translateX(4px); }
.dh-drawer__cta-note { text-align:center; font-size:.76rem; color:var(--ink-3); }
.dh-drawer__pay { display:flex; gap:.4rem; justify-content:center; }
.dh-drawer__pay svg { height:22px; width:auto; }
.dh-drawer__foot-note { text-align:center; font-size:.72rem; color:var(--ink-3); }
html.dh-drawer-open { overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .dh-drawer__panel, .dh-drawer__overlay { transition:none; } }

/* ============================================================
   Drawer — expandable creme ingredients + rich app-tagebuch
   ============================================================ */

/* --- Expandable creme rows (native <details>) --- */
.dh-drawer__creme { border-bottom:1px solid var(--line-2); }
.dh-drawer__cremes > li:last-child .dh-drawer__creme { border-bottom:none; }
.dh-drawer__creme > summary.dh-drawer__creme-row {
  border-bottom:none; padding:.75rem 0; cursor:pointer; list-style:none;
  -webkit-tap-highlight-color:transparent; transition:opacity .2s var(--ease);
}
.dh-drawer__creme > summary::-webkit-details-marker { display:none; }
.dh-drawer__creme > summary:focus-visible { outline:2px solid var(--terra); outline-offset:3px; border-radius:10px; }
.dh-drawer__creme > summary:hover .dh-drawer__creme-name { color:var(--terra); }
.dh-drawer__creme-meta { margin-left:auto; display:flex; align-items:center; gap:.55rem; }
.dh-drawer__creme-size { margin-left:0; white-space:nowrap; }
.dh-drawer__creme-chevron { color:var(--ink-3); display:flex; transition:transform .3s var(--ease), color .2s var(--ease); }
.dh-drawer__creme-chevron svg { width:17px; height:17px; }
.dh-drawer__creme[open] > summary .dh-drawer__creme-chevron { transform:rotate(180deg); color:var(--terra); }
.dh-drawer__creme[open] > summary .dh-drawer__creme-name { color:var(--creme, var(--terra)); }

/* --- Ingredient detail panel --- */
.dh-drawer__creme-detail { padding:.1rem 0 1rem 2.9rem; }
.dh-drawer__creme[open] > .dh-drawer__creme-detail { animation:dhInciReveal .42s var(--ease) both; }
@keyframes dhInciReveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.dh-drawer__inci-label { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.5rem; }
.dh-drawer__inci { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dh-drawer__inci-row {
  display:grid; grid-template-columns:1fr auto; column-gap:.7rem; row-gap:.3rem;
  align-items:baseline; padding:.5rem 0; border-bottom:1px solid var(--line-2);
}
.dh-drawer__inci-row:last-child { border-bottom:none; }
.dh-drawer__inci-main { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.dh-drawer__inci-name { font-size:.86rem; font-weight:600; color:var(--ink); }
.dh-drawer__inci-role { font-size:.74rem; color:var(--ink-3); margin-top:.05rem; }
.dh-drawer__inci-pct {
  font-family:var(--mono); font-size:.76rem; font-weight:600; white-space:nowrap;
  color:color-mix(in srgb, var(--creme, var(--terra)) 72%, var(--ink));
  background:color-mix(in srgb, var(--creme, var(--terra)) 13%, transparent);
  padding:.16rem .46rem; border-radius:7px; align-self:center;
}
.dh-drawer__inci-bar { grid-column:1 / -1; height:3px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.dh-drawer__inci-bar i { display:block; height:100%; min-width:5px; border-radius:2px; background:var(--creme, var(--terra)); transform-origin:left; }
.dh-drawer__inci-base { font-size:.78rem; color:var(--ink-3); margin:.85rem 0 0; line-height:1.45; }
.dh-drawer__inci-base span { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:.35rem; }
.dh-drawer__inci-foot { font-family:var(--mono); font-size:.66rem; color:var(--ink-3); margin:.5rem 0 0; line-height:1.5; }
.dh-drawer__cremes-hint { font-size:.74rem; color:var(--ink-3); text-align:center; margin:.9rem 0 0; font-style:italic; }

/* --- App-Tagebuch card --- */
.dh-drawer__app { background:linear-gradient(160deg, var(--sand) 0%, var(--sand-2) 100%); border:1px solid var(--line-2); border-radius:var(--radius); padding:1.3rem; }
.dh-drawer__app-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
.dh-drawer__app-icon { color:var(--terra); display:flex; } .dh-drawer__app-icon svg { width:20px; height:20px; }
.dh-drawer__app-title { font-family:var(--serif); font-size:1.18rem; margin:0; letter-spacing:0; text-transform:none; color:var(--ink); white-space:nowrap; }
.dh-drawer__app-tag { margin-left:auto; font-family:var(--mono); font-size:.57rem; letter-spacing:.08em; text-transform:uppercase; color:var(--terra); background:rgba(184,85,67,.1); padding:.28rem .58rem; border-radius:999px; white-space:nowrap; }
.dh-drawer__app-lead { font-size:.92rem; line-height:1.5; color:var(--ink-2); margin:0 0 1.15rem; }
.dh-drawer__app-lead strong { color:var(--ink); font-weight:650; }
.dh-drawer__steps { list-style:none; margin:0; padding:0; counter-reset:dhstep; }
.dh-drawer__step { position:relative; }
.dh-drawer__step-icon { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--paper); color:var(--terra); box-shadow:var(--shadow-sm); }
.dh-drawer__step-icon svg { width:17px; height:17px; }
.dh-drawer__step-text { font-size:.84rem; color:var(--ink-2); line-height:1.45; }
.dh-drawer__step-text strong { display:block; color:var(--ink); font-weight:650; margin-bottom:.05rem; }

.dh-drawer__app-privacy-icon { color:var(--c-tone); display:flex; flex-shrink:0; } .dh-drawer__app-privacy-icon svg { width:17px; height:17px; }

@media (prefers-reduced-motion:reduce){ .dh-drawer__creme[open] > .dh-drawer__creme-detail { animation:none; } }