/* =============================================================
   KLARHEIT Homepage 2027 — three CALM directions
   All share one coherent funnel order + calm DNA.
   A = Calm (baseline) · B = Editorial/Reduktion · C = Air/Atem
   ============================================================= */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans),sans-serif;
  color:var(--k-black);
  background:#dcdad3;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- STAGE (desktop framing) ---------- */
.stage{min-height:100vh;display:flex;justify-content:center;}
.proto{
  width:100%;max-width:440px;background:var(--page-bg);
  position:relative;overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,0.16);
}
@media(max-width:440px){ .proto{box-shadow:none;} }

/* ---------- THEME VARS PER DIRECTION ---------- */
/* A · Calm — off-white, centered hero, light sans, mint accents */
.proto[data-dir="A"]{
  --page-bg:#F7F8F9; --surface:#FFFFFF;
  --ink:#0A0A0A; --ink-2:#454545; --ink-3:#8A867D;
  --rule:#E6E4DD;
  --hl-weight:300; --hl-track:-0.02em;
  --pad-y:74px; --rc:16px; --rb:25px;
  --soft:#E9F6EF; /* gentle mint wash */
  --card-shadow:0 1px 2px rgba(20,18,15,0.04), 0 10px 26px rgba(20,18,15,0.07);
  --card-shadow-hover:0 2px 4px rgba(20,18,15,0.05), 0 16px 38px rgba(20,18,15,0.10);
}
/* B · Editorial / Reduktion — warm paper, left-aligned, mono, crisp */
.proto[data-dir="B"]{
  --page-bg:#F3F0E8; --surface:#FBF9F4;
  --ink:#1A1813; --ink-2:#5A554B; --ink-3:#A39C8C;
  --rule:#DDD7C9;
  --hl-weight:300; --hl-track:-0.035em;
  --pad-y:62px; --rc:3px; --rb:3px;
  --soft:#EAE6DA;
  --card-shadow:none;
  --card-shadow-hover:none;
}
/* C · Air / Atem — soft sage-white, centered, breathing, rounded */
.proto[data-dir="C"]{
  --page-bg:#F2F5F1; --surface:#FFFFFF;
  --ink:#26302B; --ink-2:#5B635C; --ink-3:#9BA39B;
  --rule:#E2E8E1;
  --hl-weight:300; --hl-track:-0.018em;
  --pad-y:98px; --rc:28px; --rb:999px;
  --soft:#E2F1E8;
  --card-shadow:0 2px 6px rgba(38,48,43,0.05), 0 14px 34px rgba(38,48,43,0.09);
  --card-shadow-hover:0 3px 8px rgba(38,48,43,0.06), 0 20px 46px rgba(38,48,43,0.13);
}

/* ---------- BACKGROUND FLIP (A-Layout, C-Farbwelt) ---------- */
/* keeps direction A's layout/typography, swaps in C's sage-white background tones */
.proto[data-dir="A"][data-bg="c"]{
  --page-bg:#F2F5F1;
  --rule:#E2E8E1;
  --soft:#E2F1E8;
}

.page{display:flex;flex-direction:column;color:var(--ink);background:var(--page-bg);}

/* ---------- SECTION SHELL ---------- */
.sec{padding:var(--pad-y) 26px;position:relative;}
/* B: hairline rule between sections (magazine grid) */
.proto[data-dir="B"] .page > .sec{border-top:1px solid var(--rule);}
.proto[data-dir="B"] .page > .sec.hero{border-top:0;}

.eyebrow{
  font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:0.55;}
/* Kapitel-Nummerierung (wie About) — Nummern setzt reveal.js nach sichtbarer Reihenfolge */
.eyebrow .ch-num{color:var(--k-mint-deep);font-weight:500;letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;text-transform:none;}
.eyebrow:has(.ch-num)::before{display:none;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{display:none;}
/* C centers narrative sections */
.proto[data-dir="C"] .eyebrow{justify-content:center;}
.proto[data-dir="C"] .eyebrow::before{display:none;}

h1,h2,h3,h4{margin:0;letter-spacing:var(--hl-track);font-weight:var(--hl-weight);line-height:1.05;}
.display{font-size:clamp(38px,11vw,52px);}
.h-xl{font-size:clamp(30px,8.5vw,42px);}
.h-lg{font-size:clamp(27px,7.2vw,35px);}
.h-md{font-size:22px;line-height:1.18;font-weight:500;letter-spacing:-0.01em;}
.lede{font-size:18px;line-height:1.58;color:var(--ink-2);margin:18px 0 0;}
.body{font-size:16px;line-height:1.62;color:var(--ink-2);margin:14px 0 0;}
.proto[data-dir="C"] .lede,.proto[data-dir="C"] .body{line-height:1.72;}
em,i{font-style:italic;}
.mk{ /* mint marker highlight on a word */
  background:linear-gradient(transparent 58%, var(--k-mint) 58%);
  padding:0 2px;
}
/* subtle mint → thin underline instead of fill */
.proto[data-mint="subtle"] .mk{background:none;box-shadow:inset 0 -2px 0 var(--k-mint-deep);}
/* B is near-mono: marker becomes a quiet underline regardless */
.proto[data-dir="B"] .mk{background:none;box-shadow:inset 0 -1.5px 0 var(--ink);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:0.01em;
  padding:16px 28px;border-radius:var(--rb);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1;
  transition:transform var(--dur-fast,.12s) var(--ease-out,ease),background .2s,color .2s,border-color .2s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--k-mint);color:#06160F;border-color:var(--k-mint);}
.btn-primary:hover{background:var(--k-mint-deep);border-color:var(--k-mint-deep);}
.btn-ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 32%,transparent);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-block{width:100%;}
/* B = mono: primary is solid ink. Mint subtle = ink for all. */
.proto[data-dir="B"] .btn-primary{background:var(--ink);color:var(--surface);border-color:var(--ink);}
.proto[data-dir="B"] .btn-primary:hover{background:#000;border-color:#000;}
.proto[data-mint="subtle"] .btn-primary{background:var(--ink);color:var(--page-bg);border-color:var(--ink);}
.proto[data-mint="subtle"] .btn-primary:hover{background:#000;border-color:#000;}

/* ---------- STARS / RATING ---------- */
.stars{color:var(--ink);letter-spacing:2px;font-size:15px;}
.proto[data-dir="C"] .stars{color:var(--k-mint-deep);}
.rating-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);}
.proto[data-dir="C"] .rating-row{justify-content:center;}
.rating-row b{color:var(--ink);font-weight:500;}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page-bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;}
.nav-logo{height:19px;width:auto;display:block;}
.nav-ico{display:flex;gap:15px;align-items:center;}
.nav-ico svg{width:20px;height:20px;stroke:var(--ink);}
.nav-burger{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;}
.nav-burger svg{width:23px;height:23px;stroke:var(--ink);}
.ticker{display:flex;gap:0;border-top:1px solid var(--rule);overflow:hidden;}
.ticker .t{flex:1;text-align:center;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-2);padding:9px 4px;border-left:1px solid var(--rule);white-space:nowrap;}
.ticker .t:first-child{border-left:0;}
.ticker .t b{color:var(--ink);font-weight:500;}

/* ---------- HERO ---------- */
.hero{padding:54px 26px 60px;}
/* A: centered */
.proto[data-dir="A"] .hero{text-align:center;padding-top:46px;padding-bottom:58px;}
.proto[data-dir="A"] .hero .display{font-size:clamp(36px,10vw,48px);line-height:1.08;}
.proto[data-dir="A"] .hero .lede{max-width:33ch;margin-left:auto;margin-right:auto;}
.proto[data-dir="A"] .hero .hero-cta,.proto[data-dir="A"] .hero .rating-row{justify-content:center;}
/* B: left-aligned editorial, oversized light display */
.proto[data-dir="B"] .hero{text-align:left;padding-top:52px;padding-bottom:58px;}
.proto[data-dir="B"] .hero .display{font-size:clamp(42px,12.5vw,58px);line-height:0.98;}
.proto[data-dir="B"] .hero .lede{max-width:40ch;}
/* C: centered, airy */
.proto[data-dir="C"] .hero{text-align:center;padding-top:72px;padding-bottom:80px;}
.proto[data-dir="C"] .hero .display{font-size:clamp(36px,10vw,48px);line-height:1.08;}
.proto[data-dir="C"] .hero .lede{max-width:32ch;margin-left:auto;margin-right:auto;}
.proto[data-dir="C"] .hero .hero-cta,.proto[data-dir="C"] .hero .rating-row{justify-content:center;}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.hero-rating{display:flex;align-items:center;gap:9px;margin-top:18px;flex-wrap:wrap;}
.hero-rating .stars{font-size:13px;letter-spacing:1.5px;}
.hero-rating .hr-text{font-size:13px;color:var(--ink-3);letter-spacing:0.01em;}
.hero-rating .hr-text b{color:var(--ink-2);font-weight:500;}
.proto[data-dir="A"] .hero-rating,.proto[data-dir="C"] .hero-rating{justify-content:center;}
.proto[data-dir="C"] .hero-rating .stars{color:var(--k-mint-deep);}
.hero-sub{margin-top:18px;}
.hero-media{margin-top:36px;border-radius:var(--rc);overflow:hidden;box-shadow:var(--card-shadow);}
.hero-media img{width:100%;display:block;}
.proto[data-dir="C"] .hero-media{margin-top:44px;}
.proto[data-dir="B"] .hero-media{margin-top:30px;}
.proto[data-dir="B"] .hero-media img{filter:grayscale(0.18) contrast(1.02);}
/* legacy product card unused in calm set */
.hero-prod{display:none !important;}

/* ---------- PROOF BAR ---------- */
.proofbar{padding:26px 22px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.proto[data-dir="C"] .proofbar{background:var(--soft);border-color:transparent;}
.proofbar .pb-lab{text-align:center;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;color:var(--ink-3);}
.proofbar .pb-top{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;flex-wrap:wrap;}
.proofbar .pb-top b{font-weight:500;color:var(--ink);}
.press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;margin-top:16px;}
.press span{font-size:14px;font-weight:400;letter-spacing:0.02em;color:var(--ink-3);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;}
/* echte Presse-Logos (CDN) */
.press img{height:18px;width:auto;display:block;opacity:0.55;filter:grayscale(1);}

/* ---------- PROBLEM (dark — the villain beat) ---------- */
.problem{background:#15140F;color:#F1EEE6;}
.proto[data-dir="B"] .page > .sec.problem{border-top:0;}
.problem .eyebrow{color:#8E887A;}
.proto[data-dir="C"] .problem{text-align:center;}
.problem .stack{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.problem .frag{font-size:clamp(25px,7vw,33px);font-weight:300;line-height:1.12;color:rgba(241,238,230,0.30);letter-spacing:-0.015em;}
.problem .frag.on{color:#F1EEE6;}
.problem .punch{margin-top:28px;font-size:18px;line-height:1.55;color:rgba(241,238,230,0.72);}
.proto[data-dir="C"] .problem .punch{max-width:32ch;margin-left:auto;margin-right:auto;}
.problem .punch b{color:#fff;font-weight:500;}

/* ---------- SHIFT (counter-movement statement) ---------- */
.shift{text-align:center;}
.proto[data-dir="A"] .shift{background:var(--surface);}
.proto[data-dir="B"] .shift{background:var(--surface);}
.proto[data-dir="C"] .shift{background:var(--soft);}
.shift .big{font-size:clamp(30px,9vw,44px);line-height:1.08;font-weight:var(--hl-weight);letter-spacing:-0.025em;max-width:18ch;margin:0 auto;}
.shift .neg{display:flex;flex-direction:column;gap:7px;margin-top:26px;font-size:16px;color:var(--ink-2);}
.shift .neg .x{color:var(--ink);}
.shift .body{max-width:36ch;margin-left:auto;margin-right:auto;}

/* ---------- METHOD (90-day) ---------- */
.proto[data-dir="C"] .method{text-align:center;}
.method .steps{display:flex;flex-direction:column;gap:12px;margin-top:30px;text-align:left;}
.step{display:flex;gap:18px;align-items:flex-start;padding:22px;border-radius:var(--rc);
  border:1px solid var(--rule);background:var(--surface);box-shadow:var(--card-shadow);}
.step .num{font-size:36px;line-height:0.9;font-weight:300;color:var(--ink);min-width:56px;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;display:flex;flex-direction:column;align-items:flex-start;}
.step .num .unit{font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;}
.proto[data-dir="C"] .step .num .unit{color:var(--k-mint-deep);opacity:0.8;}
.proto[data-dir="C"] .step .num{color:var(--k-mint-deep);}
.step .st-t{font-size:18px;font-weight:500;}
.step .st-b{font-size:14.5px;color:var(--ink-2);margin-top:6px;line-height:1.5;}
.method .mnote{margin-top:24px;font-size:15px;color:var(--ink-2);line-height:1.55;}
.proto[data-dir="C"] .method .mnote{max-width:40ch;margin-left:auto;margin-right:auto;}
.method .mnote b{color:var(--ink);font-weight:500;}
.method .m-cta{margin-top:26px;}
.proto[data-dir="C"] .method .m-cta{display:flex;justify-content:center;}

/* ---------- PRODUCT SPOTLIGHT ---------- */
.proto[data-dir="C"] .product{text-align:center;}
.product-range{display:flex;flex-direction:column;gap:30px;margin-top:28px;}
.product-card{border-radius:var(--rc);overflow:hidden;border:1px solid var(--rule);background:var(--surface);text-align:left;box-shadow:var(--card-shadow);transition:box-shadow .3s var(--ease-out,ease),transform .3s var(--ease-out,ease);}
.product-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-3px);}
.product-card img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;background:#eee;}
.product-meta{padding:22px;}
.product-meta .pm-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.product-meta .pm-name{font-size:22px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;}
.product-meta .pm-price{font-size:16px;color:var(--ink);font-weight:500;white-space:nowrap;}
.product-meta .pm-tag{font-size:13px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:7px 0 0;}
.product-meta .pm-colornote{font-size:14px;color:var(--ink-2);margin:6px 0 0;}
.product-meta .pm-desc{font-size:15px;color:var(--ink-2);line-height:1.55;margin-top:12px;}
.product-meta .pm-feat{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.product-meta .pm-cta{margin-top:20px;}
.product-all{margin-top:22px;text-align:center;}
.proto[data-dir="B"] .product-all{text-align:left;}
.feat{font-size:12px;letter-spacing:0.03em;padding:6px 12px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2);font-weight:500;}
.proto[data-dir="C"] .feat{background:var(--soft);border-color:transparent;color:#0a3d2a;}
/* C centers the product meta text */
.proto[data-dir="C"] .product-meta{text-align:center;}
.proto[data-dir="C"] .product-meta .pm-row{justify-content:center;gap:14px;}

/* ---------- BEFORE / AFTER ---------- */
.ba{display:flex;flex-direction:column;gap:0;margin-top:28px;border-radius:var(--rc);overflow:hidden;border:1px solid var(--rule);text-align:left;box-shadow:var(--card-shadow);}
.ba .ba-col{padding:26px 24px;}
.ba .ba-before{background:#262320;color:#EDE9E2;}
.ba .ba-after{background:var(--k-mint-bg);color:#06301f;}
.ba .ba-lab{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;opacity:0.7;}
.ba .ba-h{font-size:24px;font-weight:300;letter-spacing:-0.015em;margin-top:10px;line-height:1.12;}
.ba .ba-list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.ba .ba-list li{font-size:14.5px;line-height:1.4;padding-left:22px;position:relative;opacity:0.94;}
.ba .ba-before .ba-list li::before{content:"\2014";position:absolute;left:0;opacity:0.5;}
.ba .ba-after .ba-list li::before{content:"\2713";position:absolute;left:0;font-weight:600;}

/* ---------- REVIEWS (Loox widget placeholder) ---------- */
.reviews{overflow:hidden;}
.loox-agg{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;}
.loox-agg-stars{color:var(--k-mint-deep);letter-spacing:2px;font-size:18px;}
.proto[data-dir="B"] .loox-agg-stars{color:var(--ink);}
.loox-agg-score{font-size:18px;font-weight:600;color:var(--ink);}
.loox-agg-count{font-size:14px;color:var(--ink-2);}
.loox-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;}
.loox-card{margin:0;border-radius:var(--rc);overflow:hidden;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--card-shadow);display:flex;flex-direction:column;}
.loox-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--soft);}
.loox-body{padding:15px 15px 17px;text-align:left;}
.loox-stars{color:var(--k-mint-deep);letter-spacing:1.5px;font-size:13px;}
.proto[data-dir="B"] .loox-stars{color:var(--ink);}
.loox-quote{font-size:14px;line-height:1.45;margin:9px 0 0;color:var(--ink);letter-spacing:-0.005em;}
.loox-who{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:12.5px;color:var(--ink-2);}
.loox-who b{font-weight:500;color:var(--ink);}
.loox-verified{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;letter-spacing:0.04em;color:var(--k-mint-deep);font-weight:500;}
.loox-verified::before{content:"✓";font-size:11px;}
.proto[data-dir="B"] .loox-verified{color:var(--ink-3);}
.loox-foot{margin-top:24px;text-align:center;}

/* ---------- TEAMS ---------- */
.teams{text-align:center;}
.team-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 28px;margin-top:24px;}
.team-logos span{font-size:18px;font-weight:600;letter-spacing:0.02em;color:var(--ink-3);opacity:0.8;}
.teams .punch{margin-top:26px;font-size:18px;line-height:1.5;color:var(--ink-2);max-width:34ch;margin-left:auto;margin-right:auto;}
.teams .punch b{color:var(--ink);font-weight:500;}

/* ---------- STORY ---------- */
.proto[data-dir="A"] .story{background:var(--surface);}
.proto[data-dir="C"] .story{text-align:center;}
.story-media{margin-top:26px;border-radius:var(--rc);overflow:hidden;box-shadow:var(--card-shadow);}
.story-media img{width:100%;display:block;}
.story .claim{font-size:clamp(25px,7vw,33px);font-weight:var(--hl-weight);line-height:1.12;letter-spacing:-0.02em;margin-top:6px;}
.proto[data-dir="C"] .story .claim{max-width:18ch;margin-left:auto;margin-right:auto;}
.story .sig{margin-top:24px;font-size:15px;color:var(--ink-2);line-height:1.6;}
.proto[data-dir="C"] .story .sig{max-width:42ch;margin-left:auto;margin-right:auto;}
.story .sig b{color:var(--ink);font-weight:500;}

/* ---------- QUIZ ---------- */
.quiz-card{border-radius:var(--rc);padding:38px 28px;text-align:center;background:var(--soft);color:var(--ink);}
.proto[data-dir="A"] .quiz-card{background:var(--surface);border:1px solid var(--rule);}
.proto[data-dir="A"][data-mint="bold"] .quiz-card{background:var(--k-mint);border:none;color:#06160F;}
.proto[data-dir="C"] .quiz-card{background:var(--k-mint);color:#06160F;}
.quiz-card .qz-eye{font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;color:var(--ink-3);}
.proto[data-dir="C"] .quiz-card .qz-eye,.proto[data-dir="A"][data-mint="bold"] .quiz-card .qz-eye{color:#0a3d2a;}
.quiz-card .qz-h{font-size:clamp(27px,7.5vw,35px);font-weight:var(--hl-weight);letter-spacing:-0.02em;margin-top:12px;line-height:1.08;}
.quiz-card .qz-b{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:13px;max-width:34ch;margin-left:auto;margin-right:auto;}
.proto[data-dir="C"] .quiz-card .qz-b,.proto[data-dir="A"][data-mint="bold"] .quiz-card .qz-b{color:#0a3d2a;}
.quiz-card .btn{margin-top:24px;}
/* quiz button: dark on mint card so it reads */
.quiz-card .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink);}
.quiz-card .btn-primary:hover{background:#000;border-color:#000;}
.quiz-card .qz-meta{margin-top:15px;font-size:12.5px;color:var(--ink-3);}
.proto[data-dir="C"] .quiz-card .qz-meta,.proto[data-dir="A"][data-mint="bold"] .quiz-card .qz-meta{color:#0a3d2a;opacity:0.85;}

/* ---------- RISK REVERSAL ---------- */
.risk-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--rc);overflow:hidden;margin-top:10px;}
.risk-cell{background:var(--surface);padding:24px 14px;text-align:center;}
.risk-cell .ri-ic{width:30px;height:30px;margin:0 auto 13px;stroke:var(--ink);fill:none;}
.proto[data-dir="C"] .risk-cell .ri-ic{stroke:var(--k-mint-deep);}
.risk-cell .ri-t{font-size:15px;font-weight:500;line-height:1.2;}
.risk-cell .ri-b{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.4;}

/* ---------- FINAL CTA ---------- */
.final{text-align:center;position:relative;overflow:hidden;padding:0;}
.final .final-media{position:relative;}
.final .final-media img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;}
.final .final-over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.72));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:50px 30px 46px;color:#fff;}
.final .final-claim{font-size:clamp(30px,9vw,42px);font-weight:300;letter-spacing:-0.025em;line-height:1.06;max-width:16ch;}
.final .final-sub{font-size:15px;color:rgba(255,255,255,0.85);margin-top:15px;font-style:italic;}
.final .final-cta{display:flex;flex-direction:column;gap:10px;margin-top:28px;width:100%;max-width:300px;}
.final .final-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.5);}
.final .final-cta .btn-ghost:hover{border-color:#fff;}

/* ---------- FOOTER ---------- */
.footer{background:#16140F;color:#EDE9E2;padding:52px 26px 42px;}
.proto[data-dir="C"] .footer{background:#1C2420;}
.proto[data-dir="A"] .footer{background:#141414;}
.footer-logo{height:16px;margin-bottom:28px;opacity:0.95;}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px 16px;}
.footer-col h5{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#928C7E;margin:0 0 13px;font-weight:500;}
.proto[data-dir="C"] .footer-col h5{color:#8AA396;}
.footer-col a{display:block;color:#CFC9BE;text-decoration:none;font-size:14px;margin-bottom:10px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.12);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12px;color:#8B857A;}
.footer-soc{display:flex;gap:14px;}

/* ---------- MOMENT (aspirational full-bleed) ---------- */
.moment{position:relative;overflow:hidden;}
.moment-img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;}
.moment-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 30px;color:#fff;
  background:linear-gradient(180deg,rgba(18,17,13,0.30),rgba(18,17,13,0.62));}
.moment-eye{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,0.82);margin-bottom:18px;white-space:nowrap;}
.moment-claim{font-size:clamp(28px,8vw,40px);font-weight:300;letter-spacing:-0.025em;line-height:1.1;max-width:15ch;}
.moment-sub{font-size:16px;line-height:1.6;color:rgba(255,255,255,0.88);margin-top:18px;max-width:34ch;}
.moment-cta{margin-top:28px;}
/* B keeps it editorial: flatter overlay, sharp */
.proto[data-dir="B"] .moment-img{filter:grayscale(0.2) contrast(1.02);}

/* ---------- FLOATING CTA ---------- */
.floatcta{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,18px);
  z-index:120;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:999px;text-decoration:none;
  font-family:var(--font-sans),sans-serif;font-size:15.5px;font-weight:500;letter-spacing:0.01em;
  background:var(--k-mint);color:#06160F;
  box-shadow:0 10px 34px rgba(0,0,0,0.22),0 2px 8px rgba(0,0,0,0.12);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease-out,ease),transform .35s var(--ease-out,ease),background .2s;
}
.floatcta.show{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.floatcta:hover{background:var(--k-mint-deep);}
.floatcta:active{transform:translate(-50%,2px);}
.floatcta .fc-arrow{transition:transform .2s var(--ease-out,ease);}
.floatcta:hover .fc-arrow{transform:translateX(3px);}
/* B = editorial: solid ink pill, square-ish */
body:has(.proto[data-dir="B"]) .floatcta{background:#1A1813;color:#FBF9F4;border-radius:6px;}
body:has(.proto[data-dir="B"]) .floatcta:hover{background:#000;}
/* subtle mint pref → ink pill everywhere */
body:has(.proto[data-mint="subtle"]) .floatcta{background:#141414;color:#fff;}
body:has(.proto[data-mint="subtle"]) .floatcta:hover{background:#000;}
@media(min-width:1000px){
  .floatcta{left:auto;right:30px;transform:translate(0,18px);}
  .floatcta.show{transform:translate(0,0);}
  .floatcta:active{transform:translate(0,2px);}
}

/* ---------- SECTION ORDER (shared across all three) ---------- */
/* every section carries an explicit .s-* order; flex column sorts by it. */
.s-nav{order:0;}
.s-hero{order:1;}
.s-proof{order:2;}
.s-problem{order:3;}
.s-shift{order:4;}
.s-method{order:5;}
.s-product{order:6;}
.s-ba{order:7;}
.s-moment{order:8;}
.s-reviews{order:9;}
.s-teams{order:10;}
.s-story{order:11;}
.s-quiz{order:12;}
.s-risk{order:13;}
.s-final{order:14;}
.s-footer{order:15;}
.s-sticky{order:16;}

/* ---------- CONTROL BAR (prototype chrome) ---------- */
.ctrlbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:6px;background:rgba(20,20,20,0.92);backdrop-filter:blur(12px);
  border-radius:999px;padding:6px;box-shadow:0 10px 40px rgba(0,0,0,0.35);}
.ctrlbar .seg{display:flex;background:rgba(255,255,255,0.07);border-radius:999px;padding:3px;}
.ctrlbar .seg button{border:none;background:transparent;color:rgba(255,255,255,0.65);
  font-family:var(--font-sans),sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0.01em;
  padding:8px 13px;border-radius:999px;cursor:pointer;transition:all 0.18s;white-space:nowrap;}
.ctrlbar .seg button.on{background:var(--k-mint);color:#000;}
.ctrlbar .gear{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,0.07);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ctrlbar .gear svg{width:17px;height:17px;stroke:#fff;fill:none;}
.ctrlbar .gear.on{background:var(--k-mint);}
.ctrlbar .gear.on svg{stroke:#000;}

.dirname{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:190;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;
  background:rgba(20,20,20,0.7);padding:4px 12px;border-radius:999px;pointer-events:none;
  transition:opacity 0.4s;white-space:nowrap;}

/* options popover */
.opts{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:199;width:min(380px,92vw);
  background:#161616;color:#fff;border-radius:18px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,0.5);
  display:none;}
.opts.open{display:block;}
.opts .opt-row{margin-bottom:16px;}
.opts .opt-row:last-child{margin-bottom:0;}
.opts .opt-lab{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#888;margin-bottom:8px;}
.opts .opt-seg{display:flex;gap:6px;flex-wrap:wrap;}
.opts .opt-seg button{flex:1;min-width:fit-content;border:1px solid #333;background:#0e0e0e;color:#bbb;
  font-family:inherit;font-size:12.5px;font-weight:500;padding:9px 10px;border-radius:9px;cursor:pointer;transition:all 0.16s;}
.opts .opt-seg button.on{background:var(--k-mint);color:#000;border-color:var(--k-mint);}
.opts .opt-note{font-size:11.5px;color:#777;margin-top:14px;line-height:1.45;}

@media(min-width:1000px){
  .ctrlbar{left:auto;right:24px;transform:none;}
  .dirname{left:auto;right:24px;transform:none;}
  .opts{left:auto;right:24px;transform:none;}
}