/* ============================================================
   TUMMI website — Zeegloed v5.1 marketing layer · part 2
   The chapters: experience, profile, pillars, stories, steps,
   comparison, science, pricing. Loads after website.css.
   ============================================================ */

/* ===================== 01 · EXPERIENCE (live app) ===================== */
.exp { --exp-pin: 128px; }
.exp-grid {
  display: grid;
  grid-template-columns: 1fr clamp(284px, 27vw, 348px);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.exp-text { position: relative; height: calc(6 * 66vh + 6vh); }
.exp-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.exp-eyebrow .folio { position: static; margin-left: auto; font-size: 44px; line-height: .8; }

.exp-reel-clip {
  position: sticky; top: var(--exp-pin);
  height: 56vh; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.exp-reel { position: relative; will-change: transform; }
.es-step { height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.es { max-width: 52ch; opacity: .26; transition: opacity var(--d-swap) var(--ease-across); }
.es-step.is-active .es { opacity: 1; }
.es-num {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--raspberry-mark);
}
.es-num::before {
  content: ""; flex: none;
  width: 42px; height: 2px; border-radius: 2px;
  background: var(--grad-horizon);
  transform: scaleX(.43); transform-origin: left;
  transition: transform var(--d-control) var(--ease-settle);
}
.es-step.is-active .es-num::before { transform: scaleX(1); }
.es h3 { font-size: var(--t-h2); }
.es p { margin: var(--s-3) 0 0; color: var(--ink-soft); line-height: 1.6; }

.exp-stage-r {
  position: sticky; top: 104px;
  height: calc(100vh - 104px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4);
}
.exp-device {
  position: relative;
  height: min(660px, calc(100vh - 190px));
  aspect-ratio: 380 / 772;
  padding: 10px;
  border-radius: 44px; /* device-chrome exception: hardware corners sit outside the radius scale */
  background: var(--sink); /* warm sand hardware, no dark plates in the light theme */
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-lg), var(--well-inset);
}
.exp-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 34px; overflow: hidden;
  background: var(--card);
}
.exp-screen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; }
.exp-cap {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.exp-cap .emit { width: 8px; height: 8px; }

/* the start splash: a clean cream card wearing the zonlijn crown */
.exp-start {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px; text-align: center;
  background: var(--card);
  background-image: var(--grad-tint);
  color: var(--ink);
  opacity: 1; visibility: visible;
  transition: opacity var(--d-swap) var(--ease-across), visibility 0s 0s;
}
.exp-start::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--grad-horizon);
}
.exp-start.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, var(--d-swap); }
.es-mascot { width: clamp(96px, 34%, 148px); height: auto; filter: drop-shadow(0 10px 20px rgba(24,35,56,.16)); }
.es-ey { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.es-h { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.1; color: var(--ink); }
.es-h .disp { font-style: italic; color: var(--raspberry-deep); }
.es-hint { font-size: var(--t-caption); color: var(--ink-soft); }

@media (max-width: 920px) {
  .exp-grid { grid-template-columns: 1fr; gap: 0; }
  .exp-stage-r {
    order: -1;
    position: sticky; top: 62px;
    height: auto; gap: 8px;
    padding-block: var(--s-3);
    z-index: 5;
    background: linear-gradient(180deg, var(--paper) 78%, rgba(251,244,233,0) 100%);
  }
  [data-theme="dark"] .exp-stage-r { background: linear-gradient(180deg, var(--paper) 78%, rgba(12,20,40,0) 100%); }
  .exp-device { height: min(44vh, 400px); border-radius: 32px; padding: 6px; }
  .exp-screen { border-radius: 26px; }
  .exp-text { height: auto; padding-bottom: 6vh; }
  .exp-eyebrow { justify-content: center; padding-top: var(--s-3); }
  .exp-eyebrow .folio { display: none; }
  .exp-reel-clip { position: static; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .exp-reel { transform: none !important; }
  .es-step { height: auto; min-height: 54vh; display: block; padding-top: 10vh; }
  .es-step:last-child { min-height: 44vh; }
  .es { max-width: none; }
}

/* ===================== 02 · PROFILE PREVIEW ===================== */
.profiel-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(300px, 5fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.profiel-grid .sec-head { margin-bottom: 0; }
.profile-plate {
  width: 100%; max-width: 440px; justify-self: center;
  padding: var(--s-6);
  border-radius: var(--r-lg);
}
.pp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.pp-kind { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
/* the one cool-blue chip left the palette: "Example" is a neutral label */
.profile-plate .badge-info { background: var(--paper-alt); color: var(--ink-soft); }
.pp-word { padding: var(--s-6) 0 var(--s-5); }
.pp-status {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05;
  padding-bottom: .06em;
}
.pp-trend {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s-3); padding: 4px 13px;
  border-radius: var(--r-pill);
  background: var(--sage-wash); color: var(--sage-text);
  font-size: var(--t-sm); font-weight: 500;
}
.pp-trend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-mark); }
.pp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pp-rows li {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--sink); box-shadow: var(--well-inset);
}
.pp-k { font-size: var(--t-sm); color: var(--ink-soft); }
.pp-val { padding: 3px 12px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; }
.pp-val[data-tone="sage"] { background: var(--sage-wash); color: var(--sage-text); }
.pp-val[data-tone="gold"] { background: var(--gold-wash); color: var(--gold-text); }
.pp-src { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }

/* ===================== 03 · PILLARS (vivid blooms) ===================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.pillar {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 0;
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-radius: var(--r-md);
}
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--grad-horizon);
}
.pillar-mid { margin-top: var(--s-6); }
.pillar-num {
  position: absolute; top: var(--s-3); right: var(--s-5);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5vw, 64px); line-height: 1;
  color: var(--sink);
  pointer-events: none; user-select: none;
}
.pillar h3 {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-h3); margin-bottom: var(--s-3);
}
.pillar-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pillar-dot[data-tone="rose"] { background: var(--raspberry-mark); }
.pillar-dot[data-tone="sage"] { background: var(--sage-mark); }
.pillar-dot[data-tone="gold"] { background: var(--gold-mark); }
.pillar p { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft); }

/* ===================== 04 · STORIES RAIL ===================== */
#verhalen .sec-head { margin-bottom: clamp(20px, 3vw, 36px); }
.stories-rail {
  display: flex; gap: clamp(14px, 2vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  padding: 6px clamp(20px, calc((100vw - 1180px) / 2), calc((100vw - 1180px) / 2)) 14px;
  scrollbar-width: none;
}
.stories-rail::-webkit-scrollbar { display: none; }
.story-card {
  position: relative; flex: 0 0 clamp(264px, 28vw, 352px);
  height: clamp(440px, 58vh, 580px);
  border-radius: var(--r-lg); overflow: hidden;
  isolation: isolate; cursor: pointer;
  scroll-snap-align: center;
  box-shadow: var(--shadow-md);
  /* no flex-basis animation: layout props never tween (motion law) */
}
.story-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-settle);
}
/* the photo breathes inside its frame: pure-CSS scroll drift, progressive
   (Chrome/Safari only; Firefox and reduced-motion keep the clean still).
   `translate` composes with the hover scale, which lives on transform. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .story-card img {
      height: 118%; top: -9%;
      animation: imgDrift linear both;
      animation-timeline: view();
    }
    @keyframes imgDrift {
      from { translate: 0 -3.5%; }
      to   { translate: 0 3.5%; }
    }
  }
}
.story-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,20,40,.06) 0%, rgba(12,20,40,0) 26%, rgba(12,20,40,.74) 100%);
}
.st-chip {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 3;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(255,252,246,.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #182338;
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.st-plus {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 3;
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244,238,225,.55);
  background: rgba(12,20,40,.35);
  cursor: pointer;
  transition: transform var(--d-control) var(--ease-settle);
}
.st-plus:focus-visible {
  outline: 3px solid #FFF6EC;
  outline-offset: 2px;
  box-shadow: none;
}
.st-plus::before, .st-plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: #F4EEE1; border-radius: 2px;
}
.st-plus::before { width: 12px; height: 1.6px; transform: translate(-50%, -50%); }
.st-plus::after { width: 1.6px; height: 12px; transform: translate(-50%, -50%); }
.story-card.is-open .st-plus { transform: rotate(45deg); }
.st-expert {
  position: absolute; top: calc(var(--s-4) + 40px); left: var(--s-4); z-index: 3;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 13px; border-radius: var(--r-sm);
  background: rgba(12,20,40,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #F4EEE1;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--d-enter) var(--ease-settle), transform var(--d-enter) var(--ease-settle);
}
.st-expert strong { font-size: var(--t-caption); font-weight: 600; }
.st-expert span { font-size: 11px; opacity: .8; }
.st-head {
  position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); z-index: 2;
  margin: 0;
  color: #F4EEE1; font-size: var(--t-h3); line-height: 1.15;
  transition: opacity var(--d-swap) var(--ease-across), transform var(--d-swap) var(--ease-across);
}
.st-panel {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  padding: var(--s-4);
  border-radius: calc(var(--r-lg) - 8px);
  background: rgba(12,20,40,.62);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(244,238,225,.16);
  color: #F4EEE1;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--d-enter) var(--ease-settle), transform var(--d-enter) var(--ease-settle);
}
.st-eyb { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.st-panel h4 { font-size: 1.15rem; margin: 7px 0 6px; color: #F4EEE1; }
.st-panel p { margin: 0 0 9px; font-size: var(--t-caption); line-height: 1.5; opacity: .92; }
.st-more {
  font: 600 var(--t-caption) var(--font-sans);
  color: #F4EEE1; /* cream on the panel scrim: fixtured, unlike a -tint stop */
  text-decoration: underline;
  text-decoration-color: var(--gold-tint);
  text-underline-offset: 3px;
}
.st-more:hover { text-decoration-color: #F4EEE1; }
.story-card.is-open img { transform: scale(1.06); }
.story-card.is-open .st-head { opacity: 0; transform: translateY(-8px); }
.story-card.is-open .st-panel,
.story-card.is-open .st-expert { opacity: 1; transform: translateY(0); }
.stories-nav { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.st-bar {
  flex: 1; position: relative; height: 2px;
  border-radius: 2px; background: var(--hairline);
  overflow: hidden;
}
.st-bar i {
  position: absolute; inset: 0; right: auto; width: 22%;
  border-radius: 2px; background: var(--grad-horizon);
  will-change: transform;
}

/* ===================== 05 · STEPS ===================== */
.steps {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-6);
}
.step-spine {
  position: absolute; top: 0; left: 0; right: 16%;
  height: 3px; border-radius: 2px;
  background: var(--grad-horizon);
  transform-origin: left;
}
.stepc { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) var(--s-5) 0 0; }
.step-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 5vw, 4.2rem); line-height: .9;
  color: var(--gold-mark); /* ripe gold: 3.16, clears large-text AA */
  margin-bottom: var(--s-2);
  pointer-events: none; user-select: none;
}
.stepc h3 { font-size: var(--t-h3); }
.stepc p { margin: var(--s-2) 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft); max-width: 34ch; }
.hoe-disclaimer { margin-top: var(--s-7); }

/* ===================== 06 · WHY TUMMI ===================== */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
.vs-col { padding: var(--s-6); border-radius: var(--r-md); }
.vs-col.them { border: 1px solid var(--hairline); }
.vs-col.us {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline-warm);
  box-shadow: var(--shadow-md);
}
.vs-col.us::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--grad-horizon);
}
.vs-h { margin-bottom: var(--s-5); font-size: var(--t-h4); }
.them .vs-h {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.us .vs-h { color: var(--raspberry-deep); font-size: var(--t-h3); }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.vs-col li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft);
}
.us li { color: var(--ink); }
.mk {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
}
.mk.ok { background: var(--sage-wash); color: var(--sage-mark); }
.mk.no { background: var(--paper-alt); color: var(--ink-faint); }

/* ===================== 07 · SCIENCE ===================== */
.sci-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.sci-tiers { display: grid; gap: 0; }
.sci-tier { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--hairline); }
.sci-tier:first-child { padding-top: 0; }
.sci-tier p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.sci-disclaimer { margin-top: var(--s-5); }
.sci-example {
  position: relative; margin: 0;
  padding: var(--s-7);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
}
.sci-eyb { display: block; margin-bottom: var(--s-4); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.sci-quote {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-quote); line-height: 1.32;
  padding-bottom: .06em;
}
.sci-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.sci-note {
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft);
}

/* ===================== 08 · PRICING + FAQ ===================== */
.price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}
.price .btn { margin-top: auto; }
.price ul { margin-bottom: var(--s-4); }
/* long reassurance units wrap on their own line, never inside the price row */
.price-amt .u { display: block; margin-top: 4px; }
/* the featured plan glows in daylight, not on the nachtzee: warm card,
   horizon crown, gold bloom shadow (Julia: no dark plates in light) */
.price--feat {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--card);
  background-image: var(--grad-tint);
  color: var(--ink);
  border: 1px solid var(--hairline-warm);
  box-shadow: 0 18px 50px -22px rgba(242,180,76,.5), var(--shadow-md);
}
.price--feat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--grad-horizon);
}
.price--feat .price-plan { color: var(--raspberry-deep); }
.price--feat .price-amt, .price--feat .price-amt .u { color: var(--ink); }
.price--feat .price-amt .u { color: var(--ink-muted); }
.price--feat li { color: var(--ink-soft); }
.price--feat li svg { color: var(--sage-mark); }
.price-foot {
  margin: var(--s-5) 0 0;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.faq-block { max-width: 760px; margin-top: clamp(48px, 8vw, 92px); }
.faq-title { font-size: var(--t-h3); margin-bottom: var(--s-4); }
.acc-panel { max-width: 62ch; line-height: 1.6; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 260px; }
  .pillar-mid { margin-top: 0; }
  .vs-grid { grid-template-columns: 1fr; }
  .vs-col.us { order: -1; }
  .sci-grid, .profiel-grid, .price-grid { grid-template-columns: 1fr; }
  .profile-plate { justify-self: start; }
  .steps { grid-template-columns: 1fr; padding-top: 0; }
  .step-spine { display: none; }
}
@media (max-width: 640px) {
  .story-card { flex-basis: min(80vw, 310px); height: clamp(400px, 62vh, 520px); }
  .stories-rail { padding-inline: 20px; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .story-card, .story-card img, .st-panel, .st-expert, .st-head, .st-plus { transition: none !important; }
  .exp-reel { transform: none !important; transition: none; }
  .es-num::before { transition: none !important; }
  .step-spine { transform: scaleX(1) !important; }
  /* the reel unpins: steps stack and read in flow, no choreography */
  .exp-reel-clip { position: static; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .exp-text { height: auto; padding-bottom: 6vh; }
  .es-step { height: auto; min-height: 44vh; display: block; padding-top: 8vh; }
  .es { opacity: 1; }
}