/* =========================================================================
   StudySmarter — Next Gen Recruiting · Interactive Presentation Deck
   Brand system per Brand.md: six-colour palette, Plus Jakarta Sans / Inter
   Tight / DM Mono, hand-drawn marker highlights, flat colour.
   ========================================================================= */

:root {
  --blue: #1300ff; --blue-dark: #0d00b3;
  --stone: #f6f4f1; --stone-dark: #e9e5df;
  --lime: #c6fa02; --lime-dark: #a8d600;
  --hot: #ff5c41; --white: #fcfcfd;
  --charcoal: #232323; --charcoal-2: #2e2e2e;
  --ink-60: #565656; --ink-40: #6f6f6f;

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 20px; --radius-lg: 30px; --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --z-deck: 1; --z-chrome: 50; --z-overview: 100;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--charcoal); color: var(--charcoal); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; }
html:not(.js) body { overflow: auto; } /* no-JS: scrollable fallback */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
kbd { font-family: var(--font-mono); font-size: 0.82em; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; padding: 0.1em 0.45em; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--blue); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.h-xl { font-size: clamp(2.6rem, 6.2vw, 5rem); letter-spacing: -0.035em; }
.h-1 { font-size: clamp(1.9rem, 4.4vw, 3.3rem); }
.h-2 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-60); max-width: 60ch; text-wrap: pretty; }
.center { text-align: center; }
.center .eyebrow, .center .lead { margin-inline: auto; }
.dim { color: var(--ink-60); }

/* ---------- Schemes ---------- */
.s-white { background: var(--white); color: var(--charcoal); }
.s-stone { background: var(--stone); color: var(--charcoal); }
.s-blue { background: var(--blue); color: var(--white); }
.s-dark { background: var(--charcoal); color: var(--white); }
.s-blue .lead, .s-dark .lead { color: rgba(255,255,255,0.8); }
.s-blue .eyebrow, .s-dark .eyebrow { color: var(--lime); }

/* ---------- Marker highlight ---------- */
.mark { position: relative; white-space: nowrap; }
.mark > svg { position: absolute; left: -4%; width: 108%; height: 0.7em; bottom: -0.1em; z-index: 0; overflow: visible; pointer-events: none; }
.mark { z-index: 0; }
.mark > svg { z-index: -1; }
.mark .mk-path { fill: none; stroke: var(--lime); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; }
.mark.is-in .mk-path { animation: draw 0.8s var(--ease-expo) forwards; }
.mark.mk-blue .mk-path { stroke: var(--blue); }
.mark.mk-hot .mk-path { stroke: var(--hot); }
.loop { position: relative; display: inline-block; }
.loop > svg { position: absolute; inset: -34% -16%; width: 132%; height: 168%; z-index: -1; overflow: visible; pointer-events: none; }
.loop .mk-path { fill: none; stroke: var(--lime); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.loop.is-in .mk-path { animation: draw 1s var(--ease-expo) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mark .mk-path, .loop .mk-path { stroke-dashoffset: 0; animation: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; font-size: 1rem; padding: 0.9rem 1.6rem; border-radius: var(--radius-pill); transition: transform 0.25s var(--ease), background 0.2s, color 0.2s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-lime { background: var(--lime); color: var(--charcoal); }
.btn-lime:hover { background: var(--lime-dark); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid currentColor; }
.btn-ghost:hover { transform: translateY(-2px); }
.btn .arr { transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ======================================================================
   DECK SHELL
   ====================================================================== */
.deck { position: fixed; inset: 0; overflow: hidden; z-index: var(--z-deck); }

.slide { position: absolute; inset: 0; padding: clamp(3.8rem, 7vh, 5.5rem) var(--pad) clamp(4.6rem, 9vh, 6rem); overflow-y: auto; overflow-x: hidden; }
.js .slide { display: none; }
.js .slide.active { display: grid; place-items: center; }
.js .slide.slide-top.active { align-items: start; }
html:not(.js) .slide { position: relative; min-height: 100vh; display: grid; place-items: center; } /* fallback */
.slide-inner { width: min(100%, 1180px); margin-inline: auto; }
.slide-inner > .eyebrow { margin-bottom: 1.1rem; }
.slide-inner > .lead { margin-top: 1.35rem; }
.slide-inner > .cta-actions { margin-top: 2rem; }
.slide-head { margin-bottom: clamp(1rem, 2.4vh, 2rem); }
.slide-head .eyebrow { margin-bottom: 0.2rem; }
.slide-head .h-2 { margin-top: 0.6rem; }

/* directional entrance (keyframes play reliably; base state is visible) */
.deck.dir-next .slide.active { animation: inNext 0.5s var(--ease-expo) both; }
.deck.dir-prev .slide.active { animation: inPrev 0.5s var(--ease-expo) both; }
@keyframes inNext { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes inPrev { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .deck.dir-next .slide.active, .deck.dir-prev .slide.active { animation: none; } }

/* content stagger inside active slide */
.js .slide.active .slide-inner > * { animation: rise 0.55s var(--ease-expo) both; }
.js .slide.active .slide-inner > *:nth-child(2) { animation-delay: 0.06s; }
.js .slide.active .slide-inner > *:nth-child(3) { animation-delay: 0.12s; }
.js .slide.active .slide-inner > *:nth-child(4) { animation-delay: 0.18s; }
.js .slide.active .slide-inner > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .slide.active .slide-inner > * { animation: none; } }

/* ---------- Deck chrome ---------- */
.deck-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(127,127,127,0.18); z-index: var(--z-chrome); }
.deck-progress span { display: block; height: 100%; width: 0; background: var(--lime); transition: width 0.5s var(--ease-expo); }

.deck-top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--pad); z-index: var(--z-chrome); pointer-events: none; }
.deck-top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand .mark-icon { width: 30px; height: 30px; flex: none; }
.deck-meta { display: flex; align-items: center; gap: 1rem; }
.deck-counter { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em; }
.deck-counter b { font-weight: 500; }
.deck-ov-btn { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1.5px solid currentColor; opacity: 0.65; transition: opacity 0.2s, background 0.2s; }
.deck-ov-btn:hover { opacity: 1; }

/* contrast of chrome per active scheme */
.deck-top .brand .logo, .deck-counter, .deck-ov-btn { color: var(--chrome-ink, var(--charcoal)); }
body.scheme-blue, body.scheme-dark { --chrome-ink: #fff; }
body.scheme-white, body.scheme-stone { --chrome-ink: var(--charcoal); }
.brand .mark-icon rect { transition: fill 0.3s; }
body.scheme-blue .brand .mark-icon rect, body.scheme-dark .brand .mark-icon rect { fill: transparent; }

.deck-nav { position: fixed; bottom: clamp(1rem, 3vh, 1.8rem); right: var(--pad); display: flex; gap: 0.6rem; z-index: var(--z-chrome); }
.deck-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-family: var(--font-head); border: 1.5px solid var(--chrome-ink, var(--charcoal)); color: var(--chrome-ink, var(--charcoal)); transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, opacity 0.2s; }
.deck-arrow-next { background: var(--lime); color: var(--charcoal); border-color: var(--lime); }
.deck-arrow:hover { transform: translateY(-2px); }
.deck-arrow:disabled { opacity: 0.3; cursor: default; transform: none; }
.kbd-hint { margin-top: 2rem; font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* ---------- Overview ---------- */
.overview { position: fixed; inset: 0; background: rgba(17,17,17,0.94); backdrop-filter: blur(8px); z-index: var(--z-overview); padding: clamp(1.5rem, 4vw, 3rem); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.overview.open { opacity: 1; pointer-events: auto; }
.ov-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }
.ov-head .eyebrow { color: var(--lime); }
.ov-close { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); color: #fff; font-size: 1.1rem; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; max-width: 1100px; margin-inline: auto; }
.ov-item { text-align: left; border-radius: 14px; padding: 1rem; border: 1.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #fff; transition: border-color 0.2s, transform 0.2s; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.ov-item:hover { border-color: var(--lime); transform: translateY(-3px); }
.ov-item.current { border-color: var(--lime); background: rgba(198,250,2,0.1); }
.ov-item .ov-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--lime); }
.ov-item .ov-t { font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; margin-top: 0.6rem; }
.ov-item .ov-sw { width: 22px; height: 6px; border-radius: 3px; margin-top: 0.7rem; }
.ov-sw.s-blue { background: var(--blue); } .ov-sw.s-stone { background: var(--stone-dark); } .ov-sw.s-white { background: #d7d7d7; } .ov-sw.s-dark { background: #555; }

/* ---------- Title swirl ---------- */
.hero-swirl { position: absolute; right: -4%; bottom: -6%; width: min(48vw, 620px); z-index: 0; pointer-events: none; }
.hero-swirl .mk-path { fill: none; stroke: var(--lime); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.slide.active .hero-swirl .mk-path { animation: draw 2s 0.2s var(--ease-expo) forwards; }
@media (prefers-reduced-motion: reduce) { .hero-swirl .mk-path { stroke-dashoffset: 0; animation: none; } }
.slide .slide-inner { position: relative; z-index: 1; }

/* ---------- Slide 2: Zahlen ---------- */
.zahlen { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(2rem, 6vh, 4rem); }
.zahl { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.zahl .loop { padding: 0.4rem 1.2rem; }
.zahl .zn { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1; color: var(--white); }
.zahl .zl { font-size: 1rem; color: rgba(255,255,255,0.78); max-width: 16ch; text-align: center; }

/* ---------- two-col (Reichweite) ---------- */
.two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.counter .n { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; color: var(--blue); }
.counter .l { color: var(--ink-60); margin-top: 0.4rem; }
.seg-list { display: grid; gap: 0.55rem; margin-top: 1.6rem; }
.seg { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 0.9rem; }
.seg .lbl { font-size: 0.9rem; color: var(--ink-60); }
.seg .bar { height: 11px; border-radius: 999px; background: var(--stone-dark); overflow: hidden; }
.seg .fill { height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width 1s var(--ease-expo); }
.seg .val { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
.map-card { background: var(--stone); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--stone-dark); }

/* ---------- Hook cards ---------- */
.hook-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.hook-card { background: var(--white); border: 1px solid var(--stone-dark); border-radius: var(--radius); padding: 1.6rem; }
.hook-card .big { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--blue); line-height: 1; }
.hook-card p { margin-top: 0.6rem; color: var(--ink-60); }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.4rem, 3.5vw, 3rem); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
.calc-controls { display: grid; gap: 1.2rem; align-content: start; }
.field label { display: block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; color: rgba(255,255,255,0.55); margin-bottom: 0.5rem; }
.input { width: 100%; padding: 0.85rem 1.1rem; border-radius: 14px; background: var(--charcoal-2); color: var(--white); border: 1.5px solid rgba(255,255,255,0.16); font-family: var(--font-body); font-size: 1rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c6fa02' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
.input:focus { outline: none; border-color: var(--lime); }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600; border: 1.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s; }
.chip:hover { border-color: var(--lime); }
.chip.on { background: var(--lime); color: var(--charcoal); border-color: var(--lime); }
.chip:active { transform: scale(0.95); }
.toggle { display: inline-flex; background: var(--charcoal-2); border-radius: 999px; padding: 4px; border: 1.5px solid rgba(255,255,255,0.16); }
.toggle button { padding: 0.5rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: rgba(255,255,255,0.7); transition: background 0.2s, color 0.2s; }
.toggle button.on { background: var(--lime); color: var(--charcoal); }
.calc-result { background: var(--charcoal-2); border: 1.5px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; }
.calc-canvas { width: 100%; height: 104px; display: block; margin-bottom: 1.1rem; }
.calc-result .reslabel { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--lime); }
.calc-result .resnum { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 0.98; color: var(--white); margin: 0.35rem 0 0.2rem; letter-spacing: -0.03em; }
.calc-result .ressub { color: rgba(255,255,255,0.7); font-size: 0.95rem; }
.res-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.5rem; }
.res-metric { background: rgba(255,255,255,0.05); border-radius: 14px; padding: 0.9rem; }
.res-metric .rn { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--lime); }
.res-metric .rl { font-size: 0.74rem; color: rgba(255,255,255,0.62); margin-top: 0.25rem; line-height: 1.3; }
.calc-note { font-size: 0.76rem; color: rgba(255,255,255,0.42); margin-top: 1.1rem; }
@media (max-width: 520px) { .res-breakdown { grid-template-columns: 1fr; } }

/* ---------- Ecosystem: connected flow ---------- */
.eco-flow { display: grid; gap: 0.9rem; }
.eco-stages { display: flex; align-items: stretch; gap: 0.5rem; }
@media (max-width: 820px) { .eco-stages { flex-direction: column; } }
.eco-node { flex: 1; border-radius: var(--radius); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; min-width: 0; }
.eco-node.blue { background: var(--blue); color: var(--white); }
.eco-node.stone { background: var(--white); color: var(--charcoal); border: 1px solid var(--stone-dark); }
.eco-node.lime { background: var(--lime); color: var(--charcoal); }
.eco-node.dark { background: var(--charcoal); color: var(--white); }
.en-phase { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; }
.eco-node h3 { font-size: 1.2rem; margin-top: 0.35rem; }
.en-tl { font-size: 0.88rem; opacity: 0.85; margin-top: 0.3rem; }
.en-stat { margin-top: auto; padding-top: 1rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.en-stat b { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; line-height: 1; }
.en-stat span { font-size: 0.76rem; opacity: 0.75; }
.eco-node .eco-demo { margin-top: 0.8rem; font-size: 0.8rem; }
.eco-arrow { align-self: center; flex: none; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--blue); padding: 0 0.1rem; }
@media (max-width: 820px) { .eco-arrow { transform: rotate(90deg); } }
.eco-base { display: flex; align-items: center; gap: 0.8rem; background: var(--white); border: 1px solid var(--stone-dark); border-radius: var(--radius); padding: 1rem 1.3rem; font-size: 0.95rem; color: var(--ink-60); }
.eco-base strong { color: var(--blue); }
.eco-base-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 1.1rem; }
.eco-out { display: flex; align-items: center; gap: 0.8rem; padding: 0 1.3rem; font-size: 0.95rem; color: var(--charcoal); }
.eco-out b { font-weight: 700; }
.eco-out .eco-out-arrow { font-size: 1.5rem; color: var(--blue); }
.eo-tag { display: block; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue); margin-bottom: 0.15rem; }

/* ---------- Ecosystem tiles (legacy) ---------- */
.eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.eco { border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.4vw, 1.8rem); cursor: pointer; position: relative; overflow: hidden; border: 1px solid transparent; transition: transform 0.3s var(--ease); min-height: 210px; display: flex; flex-direction: column; }
.eco:hover { transform: translateY(-5px); }
.eco.blue { background: var(--blue); color: var(--white); }
.eco.stone { background: var(--white); color: var(--charcoal); border-color: var(--stone-dark); }
.eco.lime { background: var(--lime); color: var(--charcoal); }
.eco.dark { background: var(--charcoal); color: var(--white); }
.eco .eco-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; }
.eco h3 { font-size: 1.35rem; margin-top: 0.4rem; }
.eco .eco-tl { margin-top: 0.35rem; font-weight: 600; opacity: 0.9; font-size: 0.95rem; }
.eco .eco-body { margin-top: 0.8rem; font-size: 0.9rem; opacity: 0.82; max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease), margin 0.4s; }
.eco.open .eco-body { max-height: 220px; }
.eco-foot { margin-top: auto; padding-top: 1.2rem; }
.eco-stats { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.eco-demo { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; font-family: var(--font-head); font-weight: 700; font-size: 0.84rem; padding-bottom: 2px; border-bottom: 2px solid currentColor; transition: gap 0.2s var(--ease), opacity 0.2s; }
.eco-demo:hover { gap: 0.6rem; opacity: 0.78; }
.eco-demo .arr { transition: transform 0.2s var(--ease); }
.eco-demo:hover .arr { transform: translate(2px, -2px); }
.eco-stats .s .v { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; line-height: 1; }
.eco-stats .s .l { font-size: 0.72rem; opacity: 0.72; margin-top: 0.22rem; }
.eco .eco-more { position: absolute; top: 1.2rem; right: 1.2rem; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 1.05rem; transition: transform 0.35s var(--ease); opacity: 0.7; }
.eco.open .eco-more { transform: rotate(45deg); }

/* ---------- Journey ---------- */
.journey-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
@media (max-width: 820px) { .journey-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .journey-track { grid-template-columns: 1fr; } }
.jstep { background: var(--white); border: 1px solid var(--stone-dark); border-radius: var(--radius); padding: 1.3rem 1.1rem; transition: border-color 0.25s, transform 0.25s; }
.jstep:hover, .jstep.active { border-color: var(--blue); transform: translateY(-4px); }
.jstep .jn { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--charcoal); font-family: var(--font-head); font-weight: 800; display: grid; place-items: center; font-size: 0.92rem; }
.jstep .jicon { font-size: 1.5rem; margin: 0.8rem 0 0.45rem; }
.jstep h4 { font-size: 1rem; }
.jstep p { margin-top: 0.45rem; font-size: 0.84rem; color: var(--ink-60); }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.demo-row .demo-lead { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--ink-40); margin-right: 0.3rem; }
.btn-demo { padding: 0.7rem 1.2rem; font-size: 0.92rem; }
.btn-demo .arr { transition: transform 0.2s var(--ease); }
.btn-demo:hover .arr { transform: translate(2px, -2px); }

/* ---------- Interactive chart ---------- */
.chart-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.chart-tab { padding: 0.6rem 1.1rem; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--ink-60); border: 1.5px solid var(--stone-dark); background: var(--white); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.chart-tab:hover { border-color: var(--blue); }
.chart-tab.on { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.chart-area { display: grid; gap: 0.7rem; }
.chart-row { display: grid; grid-template-columns: clamp(120px, 16vw, 190px) 1fr 3.4rem; gap: clamp(0.6rem, 1.5vw, 1.1rem); align-items: center; }
.chart-row:not(.paired) { grid-template-columns: clamp(120px, 16vw, 190px) 1fr; }
.chart-label { font-weight: 600; font-size: 0.92rem; }
.chart-bars { display: grid; gap: 5px; min-width: 0; }
.chart-bar-wrap { display: flex; align-items: center; gap: 0.6rem; }
.cbar { height: 26px; border-radius: 8px; width: var(--w); flex: none; min-width: 5px; animation: chartgrow 0.8s var(--ease-expo) both; }
.cbar.us { background: var(--blue); }
.cbar.base { height: 19px; background: var(--stone-dark); }
@keyframes chartgrow { from { width: 0; } to { width: var(--w); } }
@media (prefers-reduced-motion: reduce) { .cbar { animation: none; } }
.cval { font-family: var(--font-head); font-weight: 800; font-size: 0.88rem; white-space: nowrap; }
.cval.us { color: var(--charcoal); }
.cval.base { color: var(--ink-40); font-weight: 600; font-size: 0.8rem; }
.cmult { font-family: var(--font-head); font-weight: 800; color: var(--blue); font-size: 1.05rem; text-align: right; }
.chart-row:hover .cbar.us { filter: brightness(1.08); }
.chart-note { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-40); }

/* ---------- Interactive distribution channels ---------- */
.dist { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center; }
@media (max-width: 880px) { .dist { grid-template-columns: 1fr; } }
.dist-hub { background: var(--charcoal-2); border: 1.5px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem); text-align: center; }
.dist-job { font-size: 2.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dist-job span { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.dist-count { margin-top: 1.4rem; }
.dist-count b { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--lime); line-height: 1; display: block; }
.dist-count span { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.dist-hint { margin-top: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.5); min-height: 2.4em; }
.dist-channels { display: grid; gap: 0.55rem; }
.dist-ch { display: flex; align-items: center; gap: 0.9rem; background: var(--charcoal-2); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 0.75rem 1rem; opacity: 0.32; transform: translateX(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s; cursor: pointer; }
.dist-ch.on { opacity: 1; transform: none; border-color: rgba(198,250,2,0.4); }
.dc-icon { font-size: 1.4rem; flex: none; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.06); display: grid; place-items: center; }
.dist-ch.on .dc-icon { background: var(--lime); }
.dc-meta { min-width: 0; }
.dc-top { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.dc-top h4 { font-size: 1.02rem; }
.dc-kpi { font-family: var(--font-mono); font-size: 0.74rem; color: var(--lime); }
.dc-meta p { font-size: 0.83rem; color: rgba(255,255,255,0.66); margin-top: 0.15rem; }

/* ---------- Interactive life journey ---------- */
.lj-timeline { position: relative; height: 86px; margin: clamp(0.8rem, 2vh, 1.4rem) 0 1.4rem; }
.lj-line { position: absolute; left: 0; right: 0; top: 40px; height: 4px; background: var(--stone-dark); border-radius: 999px; }
.lj-progress { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width 0.5s var(--ease); }
.lj-nodes { position: absolute; inset: 0; }
.lj-node { position: absolute; top: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; }
.lj-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--stone-dark); transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.lj-node:hover .lj-dot { transform: scale(1.2); }
.lj-node.on .lj-dot { background: var(--blue); border-color: var(--blue); }
.lj-age { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-40); }
.lj-node.on .lj-age { color: var(--blue); font-weight: 500; }
.lj-avatar { position: absolute; top: 0; left: 0; transform: translateX(-50%); font-size: 1.7rem; transition: left 0.5s var(--ease-expo); z-index: 2; filter: drop-shadow(0 4px 6px rgba(35,35,35,0.18)); }
.lj-card { display: flex; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: center; background: var(--stone); border: 1px solid var(--stone-dark); border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.6vw, 1.8rem); animation: fade 0.4s var(--ease); }
.lj-icon { font-size: 2.4rem; width: 68px; height: 68px; border-radius: 18px; background: var(--white); display: grid; place-items: center; flex: none; border: 1px solid var(--stone-dark); }
.lj-phase { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); }
.lj-meta h3 { font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin: 0.3rem 0; }
.lj-meta p { color: var(--ink-60); max-width: 60ch; }
.lj-product { display: inline-block; margin-top: 0.7rem; background: var(--blue); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; padding: 0.35rem 0.9rem; border-radius: 999px; }
.lj-insight { margin-top: 0.8rem; background: var(--charcoal); color: var(--white); border-radius: var(--radius); padding: 0.9rem 1.3rem; font-size: 0.95rem; animation: fade 0.4s var(--ease); }
.lj-insight-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lime); margin-right: 0.6rem; }
.lj-payoff { margin-top: 0.9rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--charcoal); max-width: 72ch; opacity: 0.32; transition: opacity 0.4s; }
.lj-payoff.show { opacity: 1; }
.lj-payoff.show::before { content: "→ "; color: var(--blue); }
.lifejourney-hint, #lifejourney .demo-row, #7 .demo-row { margin-top: 1rem; }

/* ---------- Targeting ---------- */
.target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; }
.tcard { background: var(--charcoal-2); border-radius: var(--radius); padding: 1.3rem; border: 1px solid rgba(255,255,255,0.08); }
.tcard .ti { font-size: 1.6rem; }
.tcard h4 { margin: 0.6rem 0 0.7rem; font-size: 1.05rem; }
.tcard li { font-size: 0.85rem; color: rgba(255,255,255,0.72); padding: 0.16rem 0; }
.tcard .tex { margin-top: 0.8rem; font-size: 0.78rem; color: var(--lime); font-style: italic; }
.target-foot { margin-top: 1.1rem; background: var(--lime); color: var(--charcoal); font-family: var(--font-head); font-weight: 700; text-align: center; padding: 1rem; border-radius: var(--radius-pill); }

/* ---------- Funnel ---------- */
.funnel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .funnel-grid { grid-template-columns: 1fr; } }
.fcard { background: var(--white); border-radius: var(--radius); padding: 1.6rem; border: 1px solid var(--stone-dark); display: flex; flex-direction: column; }
.fcard h4 { font-size: 1.2rem; }
.fcard .fbody { color: var(--ink-60); margin: 0.5rem 0 0.9rem; font-size: 0.92rem; }
.fcard li { padding: 0.3rem 0; padding-left: 1.4rem; position: relative; font-size: 0.9rem; }
.fcard li::before { content: "→"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.fcard .fstep { margin-top: 1.2rem; background: var(--lime); color: var(--charcoal); font-family: var(--font-head); font-weight: 700; text-align: center; padding: 0.65rem; border-radius: var(--radius-pill); font-size: 0.9rem; }

/* ---------- Products ---------- */
.prod { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.4rem, 3.5vw, 2.6rem); }
@media (max-width: 880px) { .prod { grid-template-columns: 1fr; } }
.prod-tabs { display: flex; flex-direction: column; gap: 0.35rem; }
@media (max-width: 880px) { .prod-tabs { flex-direction: row; flex-wrap: wrap; } }
.ptab { text-align: left; padding: 0.8rem 1.1rem; border-radius: 12px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--ink-60); border: 1px solid transparent; transition: all 0.2s; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ptab:hover { color: var(--charcoal); background: var(--stone); }
.ptab.on { background: var(--charcoal); color: var(--white); }
.ptab .pstage { font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.55; }
.prod-panel { background: var(--stone); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--stone-dark); }
.prod-panel .pstat { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.prod-panel .pstat .pv { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--blue); line-height: 1; }
.prod-panel .pstat .pl { font-weight: 700; }
.prod-panel .pvs { display: inline-block; margin-top: 0.35rem; font-size: 0.8rem; font-family: var(--font-mono); color: var(--ink-60); background: var(--white); border: 1px solid var(--stone-dark); padding: 0.28rem 0.7rem; border-radius: 999px; }
.prod-panel h3 { font-size: 1.5rem; margin: 1rem 0 0.5rem; }
.prod-panel .pbody { color: var(--ink-60); max-width: 56ch; font-size: 0.95rem; }
.prod-panel .pbullets { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.prod-panel .pbullets li { background: var(--white); border: 1px solid var(--stone-dark); border-radius: 999px; padding: 0.45rem 0.95rem; font-size: 0.85rem; font-weight: 600; }
.prod-anim { animation: fade 0.4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Comparison ---------- */
.cmp { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stone-dark); }
.cmp th, .cmp td { padding: 0.5rem 1rem; text-align: center; border-bottom: 1px solid var(--stone); }
.cmp thead th { font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; background: var(--stone); }
.cmp thead th:first-child { text-align: left; }
.cmp thead th.me { background: var(--blue); color: var(--white); }
.cmp td:first-child { text-align: left; font-weight: 600; font-size: 0.9rem; }
.cmp td.me { background: rgba(19,0,255,0.04); }
.cmp .ico { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.8rem; font-weight: 800; color: var(--white); }
.cmp .full { background: var(--blue); } .cmp .part { background: #6f6f6f; } .cmp .none { background: var(--hot); }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .cmp th, .cmp td { padding: 0.5rem 0.55rem; font-size: 0.8rem; } .cmp { min-width: 560px; } }

/* ---------- Builder ---------- */
.builder { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.4rem, 3.5vw, 2.6rem); }
@media (max-width: 960px) { .builder { grid-template-columns: 1fr; } }
.bmode { display: inline-flex; background: var(--white); border-radius: 999px; padding: 5px; margin-bottom: 1.1rem; border: 1px solid var(--stone-dark); }
.bmode button { padding: 0.55rem 1.2rem; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--ink-60); transition: all 0.2s; }
.bmode button.on { background: var(--blue); color: var(--white); }
.bgroup { margin-bottom: 0.85rem; }
.bgroup > .blabel { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; color: var(--ink-40); margin-bottom: 0.5rem; }
.opt-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opt { padding: 0.55rem 0.95rem; border-radius: 12px; border: 1.5px solid var(--stone-dark); background: var(--white); font-weight: 600; font-size: 0.88rem; transition: all 0.18s; }
.opt:hover { border-color: var(--blue); }
.opt.on { background: var(--blue); color: var(--white); border-color: var(--blue); }
.opt-fil.on { background: var(--lime); color: var(--charcoal); border-color: var(--lime); }
.opt[disabled] { opacity: 0.5; cursor: not-allowed; }
.qty { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--white); border: 1.5px solid var(--stone-dark); border-radius: 12px; padding: 0.25rem; }
.qty button { width: 32px; height: 32px; border-radius: 9px; background: var(--stone); font-size: 1.2rem; font-weight: 700; color: var(--blue); }
.qty input { width: 46px; text-align: center; border: none; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; background: none; }
.qty input:focus { outline: none; }
.receipt { background: var(--charcoal); color: var(--white); border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.4vw, 1.9rem); align-self: start; }
.receipt .rtag { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; color: var(--lime); }
.receipt .price { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1; margin: 0.3rem 0 0.1rem; }
.receipt .price small { font-size: 1rem; font-weight: 600; opacity: 0.7; }
.receipt .pricesub { color: rgba(255,255,255,0.62); font-size: 0.86rem; }
.receipt .surcharge { color: var(--lime); font-size: 0.83rem; margin-top: 0.45rem; min-height: 1.1em; }
.rline { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.rline:last-of-type { border-bottom: none; }
.rline .rl { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.rline .rv { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; }
.rline .rv.lime { color: var(--lime); }
.receipt .cpa { background: rgba(198,250,2,0.12); border: 1px solid rgba(198,250,2,0.3); border-radius: 14px; padding: 0.7rem 1rem; margin: 0.85rem 0; display: flex; align-items: center; gap: 0.9rem; }
.receipt .cpa .cn { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.1rem); color: var(--lime); line-height: 1; flex: none; }
.receipt .cpa .cl { font-size: 0.82rem; color: rgba(255,255,255,0.78); text-align: left; line-height: 1.25; }
.receipt .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
.flash { animation: flash 0.5s var(--ease); }
@keyframes flash { 0% { color: var(--lime); } 100% { color: inherit; } }

/* ---------- Google for Jobs reality check (#2) ---------- */
.gstats { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 2.8rem); margin-top: 2rem; }
.gstat b { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--blue); display: block; line-height: 1; }
.gstat span { font-size: 0.88rem; color: var(--ink-60); margin-top: 0.3rem; display: block; }
.gmock { background: var(--white); border: 1px solid var(--stone-dark); border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: 0 18px 50px rgba(35,35,35,0.1); }
.gmock-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; background: var(--stone); border-radius: 999px; margin-bottom: 0.9rem; }
.gmock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--stone-dark); }
.gmock-q { margin-left: 0.5rem; font-size: 0.9rem; color: var(--ink-60); font-family: var(--font-body); }
.gmock-list { display: grid; gap: 0.5rem; }
.gres { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 14px; border: 1px solid var(--stone); }
.gres-rank { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; background: var(--stone-dark); color: var(--ink-60); }
.gres b { font-family: var(--font-head); font-size: 1rem; display: block; }
.gres span { font-size: 0.8rem; color: var(--ink-60); }
.gres.us { background: rgba(19,0,255,0.05); border-color: rgba(19,0,255,0.25); }
.gres.us .gres-rank { background: var(--blue); color: var(--white); }
.gres.dim { opacity: 0.55; }
.gres.dim .gres-rank { background: var(--hot); color: var(--white); }

/* ---------- Quality funnel (#3) ---------- */
.qfunnel { display: grid; gap: 0.7rem; max-width: 920px; }
.qstage { display: grid; grid-template-columns: minmax(0, 52%) 1fr; gap: clamp(0.9rem, 2vw, 1.6rem); align-items: center; }
.qtrack { width: 100%; }
.qbar { height: clamp(44px, 6.5vh, 60px); border-radius: 14px; background: var(--white); border: 1px solid var(--stone-dark); display: flex; align-items: center; padding: 0 1.2rem; width: var(--w, 100%); }
.slide.active .qbar { animation: qgrow 0.9s var(--ease-expo) both; }
@keyframes qgrow { from { width: 0; } to { width: var(--w, 100%); } }
@media (prefers-reduced-motion: reduce) { .slide.active .qbar { animation: none; } }
.qbar .qn { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--blue); }
.qmeta { display: flex; flex-direction: column; gap: 0.15rem; }
.qmeta .ql { font-size: 0.95rem; color: var(--charcoal); font-weight: 600; }
.qmeta .qnote { font-size: 0.8rem; color: var(--ink-40); }
.qstage.win .qbar { background: var(--lime); border-color: var(--lime); }
.qstage.win .qbar .qn { color: var(--charcoal); }
.qstage.win .qmeta .ql { color: var(--blue); }
.qstage.win .qmeta .qnote { color: var(--blue); font-weight: 600; }
.qfunnel-foot { margin-top: clamp(1.2rem, 3vh, 1.8rem); color: var(--ink-60); max-width: 64ch; }
.qfunnel-foot strong { color: var(--charcoal); }

/* ---------- Package recommendation banner (#9) ---------- */
.builder-rec { display: flex; align-items: center; gap: 0.7rem; background: var(--lime); color: var(--charcoal); border-radius: 14px; padding: 0.8rem 1.1rem; margin-bottom: 1.1rem; font-size: 0.95rem; font-weight: 600; }
.builder-rec b { font-family: var(--font-head); font-weight: 800; }
.builder-rec .rec-ic { flex: none; font-size: 1.1rem; }

/* ---------- Always-on brand calendar (#5) ---------- */
.brand-cal { display: grid; gap: 0.5rem; }
.bc-row { display: grid; grid-template-columns: clamp(120px, 14vw, 170px) repeat(12, 1fr); gap: 5px; align-items: center; }
.bc-label { font-family: var(--font-head); font-weight: 700; font-size: 0.88rem; color: rgba(255,255,255,0.9); }
.bc-months .bc-m { font-family: var(--font-mono); font-size: 0.62rem; text-align: center; color: rgba(255,255,255,0.45); text-transform: uppercase; }
.bc-cell { height: 24px; border-radius: 6px; background: rgba(255,255,255,0.07); transition: background 0.4s var(--ease); }
.bc-cell.on { background: var(--lime); }
.slide.active .bc-cell.on { animation: cellIn 0.5s var(--ease-expo) both; }
@keyframes cellIn { from { background: rgba(198,250,2,0); transform: scaleY(0.3); } to { background: var(--lime); transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide.active .bc-cell.on { animation: none; } }
.brand-cal-foot { margin-top: clamp(1.2rem, 3vh, 2rem); color: rgba(255,255,255,0.78); font-size: 1rem; max-width: 64ch; }
.brand-cal-foot strong { color: var(--lime); }
@media (max-width: 640px) { .bc-row { grid-template-columns: 90px repeat(12, 1fr); gap: 3px; } .bc-label { font-size: 0.7rem; } .bc-cell { height: 16px; } }

/* ---------- Active sourcing (#10) ---------- */
.src { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: stretch; }
@media (max-width: 880px) { .src { grid-template-columns: 1fr; } }
.src-pool { background: var(--charcoal-2); border: 1.5px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; }
.src-pool .reslabel { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--lime); }
.src-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; color: var(--white); margin: 0.35rem 0 0.4rem; letter-spacing: -0.03em; }
.src-sub { color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.src-pool-note { color: rgba(255,255,255,0.5); font-size: 0.82rem; margin-top: 1rem; }
.src-channels { display: grid; gap: 0.8rem; }
.src-channel { background: var(--charcoal-2); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.src-channel .sc-stat { display: flex; align-items: baseline; gap: 0.5rem; }
.src-channel .sc-stat b { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--lime); line-height: 1; }
.src-channel .sc-stat span { font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.src-channel h4 { font-size: 1.1rem; margin: 0.5rem 0 0.3rem; }
.src-channel p { font-size: 0.88rem; color: rgba(255,255,255,0.72); }

/* ---------- Cost of the open role (#8) ---------- */
.vac { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 860px) { .vac { grid-template-columns: 1fr; } }
.vac-controls { display: grid; gap: 1.8rem; align-content: start; }
.vac-field > label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--ink-40); margin-bottom: 0.7rem; }
.vac-field output { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--blue); letter-spacing: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border-radius: 999px; background: var(--stone-dark); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); cursor: pointer; border: 3px solid var(--white); box-shadow: 0 2px 6px rgba(35,35,35,0.2); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--white); border-radius: 50%; background: var(--blue); cursor: pointer; }
.vac-cost { display: flex; align-items: center; gap: 0.6rem; }
.vac-cost input { width: 130px; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1.5px solid var(--stone-dark); background: var(--white); font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--charcoal); }
.vac-cost input:focus { outline: none; border-color: var(--blue); }
.vac-cost span { color: var(--ink-60); font-weight: 600; }
.vac-result { background: var(--charcoal); color: var(--white); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); }
.vac-result .reslabel { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--lime); }
.vac-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1; margin: 0.35rem 0 0.9rem; letter-spacing: -0.03em; }
.vac-cmp { color: rgba(255,255,255,0.82); font-size: 0.98rem; line-height: 1.5; }
.vac-cmp b { color: var(--lime); }
.vac-note { margin-top: 1.3rem; font-size: 0.8rem; color: var(--ink-40); max-width: 70ch; }

/* ---------- Final slide ---------- */
.recap { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); margin: clamp(1.3rem, 3vh, 2.2rem) 0; }
.recap-i { display: flex; flex-direction: column; gap: 0.3rem; }
.recap-i b { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: var(--lime); line-height: 1; }
.recap-i span { font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.hl-lime { color: var(--lime); }
#closeHead { font-size: clamp(1.7rem, 3.8vw, 2.8rem); }
.slide-hero, .slide-close { overflow: hidden; } /* clip the decorative swirl bleed */
.slide-close { padding-top: clamp(3rem, 5vh, 4rem); padding-bottom: clamp(3.4rem, 6vh, 4.6rem); }
.slide-close .slide-inner > .cta-actions { margin-top: 1.5rem; }
.slide-close .slide-inner > .lead { margin-top: 1rem; }

/* ---------- Personalization: hero chip ---------- */
.brief-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.3rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--charcoal); background: var(--lime); padding: 0.5rem 1rem; border-radius: 999px; }

/* ---------- Briefing modal ---------- */
.brief { display: grid; place-items: center; }
.brief-card { width: min(100%, 620px); background: var(--charcoal); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); color: var(--white); }
.brief-card .ov-head { margin-bottom: 0.8rem; }
.brief-card .eyebrow { color: var(--lime); }
.brief-intro { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.6rem; max-width: 52ch; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .brief-grid { grid-template-columns: 1fr; } }
.bf { display: flex; flex-direction: column; gap: 0.45rem; }
.bf span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; color: rgba(255,255,255,0.6); }
.bf span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.bf input, .bf select { width: 100%; padding: 0.8rem 1rem; border-radius: 12px; background: var(--charcoal-2); color: var(--white); border: 1.5px solid rgba(255,255,255,0.16); font-family: var(--font-body); font-size: 1rem; appearance: none; }
.bf select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c6fa02' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.bf input:focus, .bf select:focus { outline: none; border-color: var(--lime); }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1.6rem; }
.btn-text { color: rgba(255,255,255,0.6); font-weight: 600; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }
.btn-text:hover { color: #fff; }
.bf-copied { color: var(--lime); font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------- Printable plan ---------- */
.plan-print { display: none; }
@media print {
  body { overflow: visible !important; background: #fff !important; }
  body > *:not(.plan-print) { display: none !important; }
  .plan-print { display: block !important; position: static; color: #232323; }
  .plan-doc { padding: 2rem; max-width: 760px; margin: 0 auto; font-family: "Inter Tight", sans-serif; }
  .plan-h { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1300ff; padding-bottom: 0.8rem; }
  .plan-logo { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.3rem; }
  .plan-tag { font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: #1300ff; }
  .plan-doc h1 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 2.2rem; margin: 1.4rem 0 0.3rem; }
  .plan-sub { color: #565656; font-size: 1.05rem; margin-bottom: 1.6rem; }
  .plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.8rem; }
  .plan-stats div { background: #f6f4f1; border-radius: 12px; padding: 1.1rem 1.3rem; }
  .plan-stats b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.8rem; color: #1300ff; display: block; }
  .plan-stats span { font-size: 0.9rem; color: #565656; }
  .plan-doc h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; margin: 1.4rem 0 0.5rem; }
  .plan-doc p { line-height: 1.6; margin-bottom: 0.6rem; }
  .plan-foot { color: #6f6f6f; font-size: 0.82rem; margin-top: 2rem; border-top: 1px solid #e9e5df; padding-top: 0.8rem; }
}