/* ================================================================
   VIBES MONEY — Premium Dark Landing Page
   From neo-brutalist to premium coaching.
   Kept: Outfit 900 3D titles, dark mode, identity.
   Changed: soft shadows, rounded corners, emerald accent, no grid BG.
================================================================ */

/* -- RESET -------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:clip;max-width:100vw}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500;font-size:1.1rem;line-height:1.65;
  color:var(--text);background:var(--bg);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
  width:100%;max-width:100vw;position:relative
}
main{overflow-x:clip;width:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
strong{font-weight:700}
::selection{background:var(--accent);color:#000}

/* -- TOKENS ------------------------------------------------------- */
:root{
  --container:1100px;--narrow:740px;
  /* Police des CHIFFRES — identique au titre hero (.h3d).
     Toutes les valeurs numériques visuelles du site utilisent cette font.
     Si tu ajoutes un nombre, mets-lui la classe .font-num ou applique
     directement var(--font-num) — surtout pas de mono ni Space Grotesk. */
  --font-num:'Playfair Display',Georgia,serif;
}

/* Utilitaire global — toute valeur numérique du site doit l'utiliser */
.font-num,
.num,
[data-num]{
  font-family:var(--font-num)!important;
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1
}

/* Dark theme (default) */
:root,[data-theme="dark"]{
  --bg:#0B0F1A;
  --bg-alt:#101520;
  --text:#F1F5F9;
  --text-muted:#94A3B8;
  --accent:#F97316;
  --accent-hover:#FB923C;
  --accent-active:#EA580C;
  --accent-glow:rgba(249,115,22,.15);
  --accent-subtle:rgba(249,115,22,.06);
  --green:#10B981;
  --violet:#A78BFA;
  --blue:#3B82F6;
  --green-phase:#34D399;
  --red:#F87171;
  --card-bg:#111827;
  --card-hover:#1E293B;
  --border:#1E293B;
  --border-hover:rgba(249,115,22,.3);
  --nav-bg:rgba(11,15,26,.88);
  --shadow-card:0 4px 24px rgba(0,0,0,.3);
  --shadow-card-hover:0 8px 32px rgba(0,0,0,.4);
  --shadow-glow:0 0 24px var(--accent-glow);
  --grid-line:rgba(255,255,255,.03);
  --3d-shadow:
    1px 1px 0 #7c2d12,2px 2px 0 #7c2d12,3px 3px 0 #7c2d12,4px 4px 0 #7c2d12,
    5px 5px 0 #7c2d12,6px 6px 0 #7c2d12,7px 7px 0 #7c2d12,8px 8px 0 #7c2d12;
  --3d-shadow-sm:
    1px 1px 0 #7c2d12,2px 2px 0 #7c2d12,3px 3px 0 #7c2d12,4px 4px 0 #7c2d12;
}

/* Light theme — Warm parchment / editorial paper aesthetic */
[data-theme="light"]{
  --bg:#EFE9DB;            /* aged parchment */
  --bg-alt:#F7F2E5;        /* lighter parchment (elevated surfaces) */
  --text:#1F1A14;          /* warm dark brown-black (not cold slate) */
  --text-muted:#6B5E4C;    /* warm sepia gray */
  --accent:#EA580C;
  --accent-hover:#F97316;
  --accent-active:#C2410C;
  --accent-glow:rgba(234,88,12,.14);
  --accent-subtle:rgba(234,88,12,.06);
  --green:#047857;
  --violet:#6D28D9;
  --blue:#1D4ED8;
  --green-phase:#047857;
  --red:#DC2626;
  --card-bg:#FAF5E9;       /* brightest cream for cards */
  --card-hover:#F4EDDB;
  --border:#DFD5BE;        /* beige border, warm */
  --border-hover:rgba(234,88,12,.35);
  --nav-bg:rgba(239,233,219,.9);
  --shadow-card:0 2px 10px rgba(90,60,20,.08);
  --shadow-card-hover:0 8px 24px rgba(90,60,20,.14);
  --shadow-glow:0 0 24px rgba(234,88,12,.14);
  --grid-line:rgba(90,60,20,.07);    /* warm sepia grid */
  --3d-shadow:
    1px 1px 0 #9a3412,2px 2px 0 #9a3412,3px 3px 0 #9a3412,4px 4px 0 #9a3412,
    5px 5px 0 #9a3412,6px 6px 0 #9a3412,7px 7px 0 #9a3412,8px 8px 0 #9a3412;
  --3d-shadow-sm:
    1px 1px 0 #9a3412,2px 2px 0 #9a3412,3px 3px 0 #9a3412,4px 4px 0 #9a3412;
}

/* Subtle parchment grain baked into the light-mode background */
[data-theme="light"] body{
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 25% 30%,rgba(90,60,20,.035) 0.8px,transparent 1.2px),
    radial-gradient(circle at 75% 70%,rgba(120,80,30,.028) 0.8px,transparent 1.2px);
  background-size:5px 5px,7px 7px
}

/* -- VIEW TRANSITION (Telegram circle reveal) ---------------------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:9999;animation:vt-circle .7s ease-in-out}
@keyframes vt-circle{
  from{clip-path:circle(0% at var(--vt-x,50%) var(--vt-y,50%))}
  to{clip-path:circle(150% at var(--vt-x,50%) var(--vt-y,50%))}
}
.theme-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none;clip-path:circle(0% at 50% 50%)}
.theme-overlay.expanding{animation:vt-fb .7s ease-in-out forwards}
@keyframes vt-fb{
  from{clip-path:circle(0% at var(--ol-x,50%) var(--ol-y,50%))}
  to{clip-path:circle(150% at var(--ol-x,50%) var(--ol-y,50%))}
}

/* Theme toggle — matches the site's 3D-push button DA */
.theme-toggle{
  width:38px;height:38px;border-radius:10px;
  background:var(--card-bg);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;cursor:pointer;
  box-shadow:0 2px 0 var(--border),0 3px 8px rgba(0,0,0,.12);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  view-transition-name:theme-toggle;flex-shrink:0
}
.theme-toggle:hover{
  border-color:var(--accent);
  box-shadow:0 4px 0 rgba(249,115,22,.35),0 6px 14px var(--accent-glow);
  transform:translateY(-2px)
}
.theme-toggle:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--border)
}
.theme-toggle .toggle-icon{
  display:inline-block;line-height:1;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1)
}
.theme-toggle:hover .toggle-icon{transform:rotate(-18deg) scale(1.1)}

/* -- LAYOUT ------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.container--narrow{max-width:var(--narrow)}
.text-center{text-align:center}

/* Reusable section header — centers label + title + optional subtitle.
   Use on sections that don't already have a dedicated header wrapper. */
.section-head{
  text-align:center;
  max-width:var(--narrow);
  margin:0 auto 2.5rem
}
.section-head .label{margin-bottom:1rem}
.section-head .body-text{max-width:600px;margin:.6rem auto 0}
.section-head .section-title{margin-left:auto;margin-right:auto}

.section{position:relative;padding:5.5rem 0;z-index:1}
.section--main{background:transparent}      /* grid shows through */
.section--alt{background:var(--bg-alt)}      /* solid, hides grid */

#navbar,main,.footer{position:relative;z-index:1}
.section--accent-bg{
  background:linear-gradient(180deg,rgba(249,115,22,.04) 0%,transparent 100%);
  border-top:1px solid rgba(249,115,22,.1);border-bottom:1px solid rgba(249,115,22,.1)
}

/* ==================================================================
   PERSISTENT BACKGROUND GRID
   Fixed behind everything — single source of truth for grid lines.
   Content scrolls OVER the grid (parallax effect).
   Hero canvas draws ONLY animated cells on top (no lines) to avoid
   doubling up.
================================================================== */
.site-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* Lines offset by 0.5px so they sit exactly on integer pixel boundaries */
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:80px 80px;
  background-position:0 0;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 50%,black 0%,rgba(0,0,0,.8) 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 75% at 50% 50%,black 0%,rgba(0,0,0,.8) 55%,transparent 100%)
}
/* Sparse glowing cells — snapped perfectly to 80px grid squares.
   Sized 79×79, positioned at multiples of 80+1 so the 1px grid lines stay visible. */
.sg-cell{
  position:absolute;
  width:79px;height:79px;
  background:rgba(249,115,22,.09);
  pointer-events:none;opacity:0
}
[data-theme="light"] .sg-cell{background:rgba(234,88,12,.11)}

.sg-cell--1{top:161px;left:241px;   animation:grid-pulse 9s  0s    ease-in-out infinite}
.sg-cell--2{top:481px;left:801px;   animation:grid-pulse 10s 3s    ease-in-out infinite}
.sg-cell--3{top:321px;left:1121px;  animation:grid-pulse 11s 5s    ease-in-out infinite}
.sg-cell--4{top:641px;left:161px;   animation:grid-pulse 9s  1.5s  ease-in-out infinite}
.sg-cell--5{top:241px;left:641px;   animation:grid-pulse 12s 7s    ease-in-out infinite}

@keyframes grid-pulse{
  0%,100%{opacity:0}
  35%,65%{opacity:1}
}

/* ==================================================================
   LUGGAGE-STICKER DECORATIONS
   Opt-in via data-sticker attribute.
   Keeps the site playful + intentional, not noisy.
================================================================== */
[data-sticker]{position:relative}
[data-sticker]::before,
[data-sticker]::after{
  content:'';position:absolute;z-index:2;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);opacity:.18;
  pointer-events:none;transition:opacity .3s ease
}
[data-sticker]:hover::before,
[data-sticker]:hover::after{opacity:.32}

/* Variants */
[data-sticker="top"]::before{top:14px;left:14px}
[data-sticker="top"]::after{top:14px;right:14px}

[data-sticker="bottom"]::before{bottom:14px;left:14px}
[data-sticker="bottom"]::after{bottom:14px;right:14px}

[data-sticker="diag"]::before{top:14px;left:14px}
[data-sticker="diag"]::after{bottom:14px;right:14px}

/* Frame — 4 corner dots (for strong-emphasis cards) */
[data-sticker="frame"]::before{
  top:0;left:0;width:100%;height:100%;
  background:var(--bg-alt);
  background:
    radial-gradient(circle 4.5px at 14px 14px,var(--accent) 99%,transparent 100%),
    radial-gradient(circle 4.5px at calc(100% - 14px) 14px,var(--accent) 99%,transparent 100%),
    radial-gradient(circle 4.5px at 14px calc(100% - 14px),var(--accent) 99%,transparent 100%),
    radial-gradient(circle 4.5px at calc(100% - 14px) calc(100% - 14px),var(--accent) 99%,transparent 100%);
  opacity:.22;border-radius:inherit
}
[data-sticker="frame"]::after{display:none}
[data-sticker="frame"]:hover::before{opacity:.38}

/* -- NAVBAR ------------------------------------------------------- */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:10000;
  background:rgba(11,15,26,.18);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.04);transition:box-shadow .3s ease
}
[data-theme="light"] #navbar{background:rgba(244,242,237,.25);border-bottom-color:rgba(0,0,0,.04)}
#navbar.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.15)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:60px;gap:1rem}
.nav-logo{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:-.02em;color:var(--text);
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none
}
.nav-logo .accent{color:var(--accent)}
.nav-logo-text{display:inline-flex;align-items:baseline}

/* ─── Étoile Polaire — logomark ───────────────────────────────── */
.nav-star{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15em;height:1.15em;flex-shrink:0;
  transform-origin:center;
  animation:nav-star-ambient 9s cubic-bezier(.5,0,.3,1) infinite;
  will-change:transform
}
.nav-star svg{width:100%;height:100%;overflow:visible;display:block}
.nav-star polygon{fill:var(--accent);transition:filter .25s ease}
@keyframes nav-star-ambient{
  0%, 80%   { transform:rotate(0deg) }
  95%, 100% { transform:rotate(360deg) }
}
.nav-logo:hover .nav-star{
  animation:nav-star-hover .7s cubic-bezier(.3,1.15,.5,1)
}
.nav-logo:hover .nav-star polygon{
  filter:drop-shadow(0 0 5px rgba(249,115,22,.6))
}
@keyframes nav-star-hover{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .nav-star{animation:none}
}

/* Accent words in titles — gradient gold-to-orange */
.accent{
  background:linear-gradient(180deg,#FBBF24 0%,var(--accent) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 3px 10px rgba(249,115,22,.25))
}
/* Nav logo accent doesn't need gradient */
.nav-logo .accent{
  background:none;-webkit-text-fill-color:var(--accent);filter:none
}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{
  font-weight:600;font-size:.8rem;letter-spacing:.03em;
  padding:.35rem .1rem;color:var(--text-muted);
  border-bottom:2px solid transparent;
  transition:all .2s ease
}
.nav-links a:hover{color:var(--text);border-bottom-color:var(--text-muted)}
.nav-cta{font-size:.78rem!important}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease,opacity .15s ease}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}
.nav-mobile{display:none;flex-direction:column;gap:.4rem;padding:.8rem 1.5rem 1.2rem;border-top:1px solid var(--border);font-weight:600;font-size:.85rem;letter-spacing:.02em;background:var(--nav-bg)}
.nav-mobile.open{display:flex}
.nav-mobile a{padding:.5rem 0;color:var(--text-muted)}
.nav-mobile a:hover{color:var(--accent)}

/* -- BUTTONS ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.88rem;
  letter-spacing:.01em;padding:1rem 2rem;border-radius:14px;cursor:pointer;
  transition:all .25s ease;white-space:nowrap;position:relative
}

/* Primary CTA — orange coral, 3D elevated */
.btn--accent{
  background:var(--accent);color:#fff;border:none;
  box-shadow:
    0 4px 0 var(--accent-active),
    0 6px 20px var(--accent-glow)
}
.btn--accent:hover{
  background:var(--accent-hover);
  box-shadow:
    0 5px 0 var(--accent-active),
    0 10px 32px rgba(249,115,22,.3);
  transform:translateY(-2px)
}
.btn--accent:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--accent-active),0 2px 8px var(--accent-glow)
}

.btn--outline{
  background:var(--card-bg);color:var(--text);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 3px 0 var(--border),0 4px 12px rgba(0,0,0,.1)
}
.btn--outline:hover{
  border-color:var(--text-muted);color:var(--text);
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.15);
  transform:translateY(-1px)
}
.btn--outline:active{transform:translateY(2px);box-shadow:0 1px 0 var(--border)}

.btn--dark{
  background:var(--card-bg);color:var(--accent);
  border:1px solid var(--accent);border-radius:14px;
  box-shadow:0 3px 0 var(--accent-active),0 4px 12px var(--accent-glow)
}
.btn--dark:hover{
  background:var(--accent);color:#fff;
  box-shadow:0 4px 0 var(--accent-active),0 8px 24px rgba(249,115,22,.25);
  transform:translateY(-1px)
}
.btn--dark:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-active)}

.btn--sm{padding:.6rem 1.2rem;font-size:.78rem}
.btn--lg{padding:1.1rem 2.8rem;font-size:.95rem}

/* -- TYPOGRAPHY --------------------------------------------------- */
/* Display font — Playfair Display, white titles, subtle depth */
.h3d{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;
  font-size:clamp(2.4rem,7.5vw,5rem);line-height:1.05;
  letter-spacing:-.03em;
  color:var(--text);
  text-shadow:0 2px 20px rgba(0,0,0,.4)
}
.h3d-line{display:block}

.h3d-sm,.section-title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:800;
  font-size:clamp(1.6rem,4.2vw,2.7rem);line-height:1.15;
  letter-spacing:-.02em;margin-bottom:1.2rem;
  color:var(--text);
  text-shadow:none
}

.section-sub{font-weight:500;font-size:1.05rem;line-height:1.6;color:var(--text-muted);margin-bottom:1.5rem;max-width:600px}
.body-text{font-weight:500;font-size:1.05rem;line-height:1.65;margin-bottom:1rem;max-width:640px;color:var(--text-muted)}
/* Every bold word in body text gets a subtle orange highlight — consistent design rule */
.body-text strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone
}
[data-theme="light"] .body-text strong{
  background:linear-gradient(180deg,transparent 55%,rgba(234,88,12,.18) 55%,rgba(234,88,12,.18) 90%,transparent 90%)
}
.body-text--strong{font-weight:700;color:var(--text)!important}

/* Labels */
.label{
  display:inline-block;font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--accent);
  border:1px solid var(--accent);
  padding:.3rem .8rem;margin-bottom:1.2rem;border-radius:6px
}

/* Badge (hero eyebrow) */
.badge{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;font-size:.78rem;letter-spacing:.04em;
  border:1px solid var(--border);padding:.5rem 1.2rem;border-radius:999px;
  background:var(--card-bg);color:var(--text-muted)
}

/* Hero kicker — line above the badge, sets SEO context (vibe coding francophone) */
.hero-kicker{
  display:inline-block;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:700;color:var(--accent);
  margin-bottom:.85rem
}

/* Proof chips */
.proof-chip{
  font-weight:600;font-size:.78rem;padding:.4rem .9rem;
  border:1px solid var(--border);background:var(--card-bg);
  color:var(--text-muted);border-radius:999px;
  transition:all .2s ease
}
.proof-chip:hover{border-color:var(--accent);color:var(--accent)}

/* Highlighter (simple underline glow version) */
.highlight{
  display:inline;
  background:linear-gradient(180deg,transparent 60%,rgba(249,115,22,.15) 60%);
  padding:0 .15em
}

/* -- HERO --------------------------------------------------------- */
#hero{min-height:100vh;display:flex;align-items:center;padding:7rem 0 3rem;overflow:hidden;perspective:1200px;position:relative}
.hero-center{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d}
/* Glossy warm glow behind hero content */
.hero-glow{
  position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);
  width:90%;height:80%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%,rgba(249,115,22,.06) 0%,transparent 70%),
    radial-gradient(ellipse 40% 30% at 30% 60%,rgba(249,115,22,.03) 0%,transparent 60%),
    radial-gradient(ellipse 35% 25% at 70% 50%,rgba(251,146,60,.03) 0%,transparent 60%);
  pointer-events:none;z-index:0
}
/* Glossy sheen line across hero (like a light reflection) */
#hero .hero-center::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 70%,transparent 100%);
  pointer-events:none;z-index:0
}
.snake-canvas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 20%,#000 80%,rgba(0,0,0,.3) 92%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 5%,#000 15%,#000 85%,rgba(0,0,0,.3) 95%,transparent 100%);
  -webkit-mask-composite:destination-in;
  mask-image:
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 20%,#000 80%,rgba(0,0,0,.3) 92%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 5%,#000 15%,#000 85%,rgba(0,0,0,.3) 95%,transparent 100%);
  mask-composite:intersect
}
.h3d{margin:1.5rem 0 1.2rem;max-width:900px;transform:translateZ(50px)}
.hero-tagline{font-weight:500;font-size:clamp(.95rem,2vw,1.15rem);color:var(--text-muted);max-width:640px;margin-bottom:1.5rem;line-height:1.65;transform:translateZ(30px)}

.hero-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:12px;
  padding:1.4rem 1.8rem;max-width:680px;margin-bottom:2rem;text-align:left;
  box-shadow:var(--shadow-card);transform:translateZ(15px);
  transition:all .3s ease
}
.hero-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-glow)}
.hero-card p{font-size:1rem;line-height:1.65;color:var(--text-muted)}
.hero-card strong{color:var(--text);background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);padding:0 .1em}

.hero-ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.5rem}
.hero-proof{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}

/* GSAP initial states */
#hero .badge,#hero .h3d-line,#hero .hero-tagline,#hero .hero-card,#hero .hero-ctas .btn,#hero .proof-chip{opacity:0}

/* -- CARD BASE (shared) ------------------------------------------- */
.card-base{
  background:var(--card-bg);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-card);
  transition:all .25s ease
}
.card-base:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card-hover)}

/* -- TWO COL ------------------------------------------------------ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;margin-top:1.5rem}
.placeholder-img{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;min-height:280px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;color:var(--text-muted)}

/* -- PROOF BANNER — Live WhatSetter dashboard ------------------- */
.proof-v2{
  position:relative;padding:5rem 0;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(249,115,22,.04) 0%,transparent 60%),
    var(--bg-alt)
}
/* Proof v2 uses solid bg-alt only — grid hidden. Keeps the WhatSetter block focused. */
.proof-v2 > .container{position:relative;z-index:1}

.proof-head{text-align:center;max-width:720px;margin:0 auto 2.5rem}
.proof-head .label{margin-bottom:1rem}
.hide-mobile{display:inline}

/* Brand card — glassy paper block with logo + live link */
.proof-brand{
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  margin-bottom:3rem
}
.proof-brand-card{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  background:var(--card-bg);
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:1.6rem 2rem;
  box-shadow:0 4px 0 var(--border),0 8px 24px rgba(0,0,0,.12);
  position:relative;
  transition:transform .3s ease,box-shadow .3s ease
}
.proof-brand-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--border),0 12px 32px rgba(0,0,0,.16)
}
/* proof-brand-card now uses [data-sticker="diag"] — dots handled by utility */

.proof-logo{
  height:48px;width:auto;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.08))
}
[data-theme="dark"] .proof-logo{
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))
}
/* Theme-aware logo swap */
.proof-logo--dark{display:none}
[data-theme="dark"] .proof-logo--light{display:none}
[data-theme="dark"] .proof-logo--dark{display:inline-block}

.proof-brand-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center}
.proof-pulse{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.12em;color:#10B981;
  padding:.35rem .75rem;border-radius:6px;
  background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25)
}
.proof-pulse-dot{
  width:6px;height:6px;border-radius:50%;background:#10B981;
  box-shadow:0 0 6px rgba(16,185,129,.6);
  animation:vl-pulse 1.4s ease-in-out infinite
}
.proof-link{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.75rem;
  letter-spacing:.03em;color:var(--accent);
  padding:.35rem .8rem;border-radius:6px;
  background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.25);
  transition:all .2s ease
}
.proof-link:hover{
  background:rgba(249,115,22,.12);border-color:var(--accent);
  transform:translateY(-1px)
}

.proof-tagline{
  font-size:1.02rem;line-height:1.6;color:var(--text-muted);
  max-width:640px;text-align:center
}
.proof-tagline em{color:var(--text-muted);font-style:italic;opacity:.7}
.proof-tagline strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.18) 55%,rgba(249,115,22,.18) 90%,transparent 90%);
  padding:0 .1em
}

/* Dashboard — 4 metric cards */
.proof-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  max-width:var(--container);margin:0 auto 2.5rem
}
.proof-grid--3{grid-template-columns:repeat(3,1fr)}
.proof-card{
  position:relative;overflow:hidden;
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.5rem 1.4rem 1.3rem;
  display:flex;flex-direction:column;gap:.5rem;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.12);
  transition:transform .25s ease,box-shadow .25s ease
}
.proof-card:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 var(--border),0 10px 28px rgba(0,0,0,.18);
  border-color:rgba(249,115,22,.25)
}
.proof-card-lbl{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.12em;color:var(--text-muted)
}
.proof-card-val{
  display:flex;align-items:baseline;gap:.35rem;
  font-family:var(--font-num);font-weight:900;
  color:var(--accent);line-height:1;
  font-feature-settings:"tnum" 1,"lnum" 1
}
.proof-num{
  font-family:var(--font-num);font-weight:900;
  font-size:clamp(2.6rem,4.8vw,3.6rem);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums
}
.proof-card-unit{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--accent);letter-spacing:-.005em;opacity:.85
}
.proof-card-hint{
  font-size:.78rem;color:var(--text-muted);opacity:.75;line-height:1.4
}
/* Progress bar at bottom of each card */
.proof-card-bar{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.03)
}
[data-theme="light"] .proof-card-bar{background:rgba(0,0,0,.04)}
.proof-card-bar-fill{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(249,115,22,.4) 100%);
  border-radius:0 2px 2px 0;
  width:0;
  transition:width 1.4s cubic-bezier(.3,.8,.3,1)
}
.proof-card.revealed .proof-card-bar--1{width:72%}
.proof-card.revealed .proof-card-bar--2{width:85%}
.proof-card.revealed .proof-card-bar--3{width:60%}
.proof-card.revealed .proof-card-bar--4{width:45%}

.proof-bottom{
  text-align:center;font-size:1.05rem;line-height:1.55;color:var(--text-muted);
  max-width:720px;margin:0 auto
}
.proof-bottom strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.18) 55%,rgba(249,115,22,.18) 90%,transparent 90%);
  padding:0 .1em
}

/* -- PROBLEM SECTION — Paper frame + journey ---------------------- */
.pain-paper{
  max-width:var(--container);margin:0 auto;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3.5rem 3rem 2rem;
  box-shadow:0 8px 40px rgba(0,0,0,.25);
  overflow:hidden
}
.pain-paper-header{
  text-align:center;
  max-width:var(--narrow);
  margin:0 auto 3rem
}
.pain-paper-header .label{margin-bottom:1rem}
.pain-paper-header .body-text{max-width:600px;margin:0 auto}

.pain-journey{
  position:relative;
  padding:0 1rem 2rem
}

/* SVG connector behind cards */
.pain-svg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible
}
.draw-line{fill:none;stroke:var(--accent);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;opacity:.4}

/* Cards alternate left/right */
.pain-node{
  position:relative;z-index:1;
  max-width:480px;
  margin-bottom:120px;
  opacity:0
}
.pain-node--right{margin-left:auto;margin-right:0}
.pain-node--solution{max-width:680px;margin-left:auto;margin-right:auto;margin-bottom:0}

/* Card — 3D push style (consistent with hero buttons) */
.pain-card-v{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.5rem 2rem;
  display:flex;align-items:center;gap:1.2rem;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.15);
  transition:transform .25s ease,box-shadow .25s ease
}
.pain-card-v:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--border),0 8px 24px rgba(0,0,0,.2)
}
.pain-card-v:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--border)
}

/* Number */
.pain-num-big{
  font-family:var(--font-num);font-weight:900;
  font-size:2.6rem;color:var(--accent);opacity:.25;line-height:1;flex-shrink:0;
  display:block;min-width:2.5rem;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.015em
}

.pain-card-v p{font-size:1.05rem;line-height:1.65;color:var(--text-muted);font-weight:500}
.pain-card-v p strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em
}

/* Solution card — final destination, prominent 3D + glow */
.pain-card-solution{
  border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(249,115,22,.06) 0%,var(--card-bg) 50%,rgba(249,115,22,.03) 100%);
  flex-direction:column;gap:.8rem;
  text-align:center;padding:2.5rem 3rem;
  box-shadow:0 4px 0 rgba(249,115,22,.3),0 12px 40px var(--accent-glow),0 0 80px rgba(249,115,22,.04)
}
.pain-card-solution:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 rgba(249,115,22,.3),0 16px 48px rgba(249,115,22,.15),0 0 100px rgba(249,115,22,.06)
}
.pain-card-solution p strong{
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.18) 55%,rgba(249,115,22,.18) 90%,transparent 90%)
}

.conclusion-big{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.5rem;color:var(--text)!important;margin-bottom:.5rem;line-height:1.3
}

@media(max-width:768px){
  .pain-paper{padding:2rem 1.1rem 1.6rem;border-radius:14px}
  .pain-paper-header{margin-bottom:2.4rem}

  /* Mobile pain journey — cinematic timeline: line draws, reaches node, reveals card */
  .pain-journey{
    position:relative;
    padding:.6rem 0 1.4rem 2.6rem !important;
    perspective:1200px;
    perspective-origin:50% 0%
  }
  .pain-journey::before{display:none}

  /* SVG strip — slim corridor, path sways alternately between dots */
  .pain-svg{
    display:block !important;
    position:absolute;
    left:13px;top:0;width:20px;height:100%;
    pointer-events:none;z-index:0;overflow:visible
  }
  .pain-svg .draw-line{
    fill:none;stroke-linecap:round;stroke-linejoin:round
  }
  .pain-svg .draw-line--track{
    stroke:color-mix(in srgb,var(--accent) 22%,transparent);
    stroke-width:1.8;
    stroke-dasharray:1 6;
    opacity:.55
  }
  /* Halo — wider, blurred, lower opacity. Draws under the marker stroke
     and gives the "ink bleed on paper" feel. */
  .pain-svg .draw-line--halo{
    stroke:var(--accent);
    stroke-width:9;
    opacity:.18;
    filter:blur(3.5px)
  }
  /* Active path — thinner main marker stroke + soft outer glow */
  .pain-svg .draw-line--active{
    stroke:var(--accent);
    stroke-width:3;
    opacity:1
  }

  /* Node container — handles subtle alternance only (no opacity/transform here).
     Override global .pain-node{opacity:0} (desktop GSAP) with explicit opacity:1
     since the reveal mechanism on mobile lives on .pain-card-v. */
  .pain-node,.pain-node--right{
    max-width:100%;
    margin-bottom:1.5rem;
    position:relative;
    padding-left:0;
    opacity:1
  }
  .pain-node[data-pain-side="left"]{margin-left:0 !important;margin-right:0}
  .pain-node[data-pain-side="right"]{margin-left:8px !important;margin-right:0}

  /* Dot on the rail — sits on the curving path, lights up when active.
     Activation = "stamp" effect: scale punch + tiny rotation + offset shadow
     for that "hand-stamped on paper" feel. */
  .pain-node::before{
    content:'';position:absolute;
    left:-16px;top:28px;
    width:12px;height:12px;border-radius:50%;
    background:var(--bg-alt);
    border:2px solid color-mix(in srgb,var(--accent) 32%,var(--border));
    box-shadow:0 0 0 3px var(--bg-alt);
    z-index:2;
    transition:
      background .5s cubic-bezier(.16,1,.3,1),
      border-color .5s ease,
      box-shadow .55s ease
  }
  .pain-node.is-active::before{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:
      0 0 0 3px var(--bg-alt),
      0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),
      0 0 22px color-mix(in srgb,var(--accent) 55%,transparent),
      1px 1px 0 color-mix(in srgb,var(--accent) 90%,black);
    animation:painDotStamp .65s cubic-bezier(.34,1.56,.64,1) forwards
  }
  /* Two-stage stamp: punch up to 1.45 → settle to 1.22 with a tiny tilt */
  @keyframes painDotStamp{
    0%{transform:scale(.7) rotate(-2deg)}
    35%{transform:scale(1.45) rotate(2deg)}
    70%{transform:scale(1.18) rotate(.5deg)}
    100%{transform:scale(1.22) rotate(1.5deg)}
  }

  /* Two pulse rings — primary fast burst + secondary slower trailing wave */
  .pain-node::after{
    content:'';position:absolute;
    left:-16px;top:28px;
    width:12px;height:12px;border-radius:50%;
    border:2px solid var(--accent);
    opacity:0;pointer-events:none;z-index:2
  }
  .pain-node.is-active::after{animation:painNodePulse 1.15s ease-out}
  @keyframes painNodePulse{
    0%{opacity:.85;transform:scale(.6);border-width:2.5px}
    35%{opacity:.45;transform:scale(1.7);border-width:2px}
    65%{opacity:.18;transform:scale(2.5);border-width:1.5px}
    100%{opacity:0;transform:scale(3.4);border-width:1px}
  }

  /* Card — GSAP owns transform/opacity (page-turn folder reveal).
     CSS only animates border-color + box-shadow on activation, plus the connector. */
  .pain-card-v{
    position:relative;
    padding:1.2rem 1.3rem;gap:1rem;
    backface-visibility:hidden;
    transition:
      border-color .5s ease .25s,
      box-shadow .55s ease .2s,
      background .4s ease
  }

  /* Connector — short bar from rail dot to card edge, slides in after the card lands */
  .pain-card-v::before{
    content:'';position:absolute;
    left:-12px;top:34px;
    width:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--accent) 65%,transparent) 0%,
      var(--accent) 100%);
    box-shadow:0 0 6px color-mix(in srgb,var(--accent) 55%,transparent);
    transition:
      width .5s cubic-bezier(.19,1,.22,1) .55s,
      opacity .3s ease .55s;
    opacity:0;pointer-events:none;z-index:1
  }

  /* REVEALED STATE — only border + shadow + connector are CSS-driven now. */
  .pain-node[data-pain-side].is-revealed .pain-card-v{
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
    box-shadow:
      0 5px 0 color-mix(in srgb,var(--accent) 24%,var(--border)),
      0 12px 26px rgba(0,0,0,.2)
  }
  .pain-node[data-pain-side].is-revealed .pain-card-v::before{width:14px;opacity:1}

  .pain-num-big{
    font-size:2.05rem;
    transition:opacity .55s cubic-bezier(.16,1,.3,1), color .45s ease
  }
  .pain-card-v p{font-size:.96rem;line-height:1.6}

  /* Solution card — final destination, no rail dot/connector. GSAP owns reveal. */
  .pain-card-solution{padding:1.8rem 1.3rem}
  .pain-node--solution::before,
  .pain-node--solution::after,
  .pain-node--solution .pain-card-v::before{display:none}
  .pain-node--solution{margin-top:1.9rem;margin-left:0 !important}
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .pain-node[data-pain-side="left"] .pain-card-v,
  .pain-node[data-pain-side="right"] .pain-card-v,
  .pain-node--solution[data-pain-side] .pain-card-v{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    transition:none
  }
  .pain-node[data-pain-side] .pain-num-big,
  .pain-node[data-pain-side] .pain-card-v p{
    opacity:1 !important;transform:none !important;transition:none
  }
  .pain-card-v,.pain-card-v::before,
  .pain-node::before,.pain-node::after{transition:none;animation:none}
}

/* -- FOUNDERS ----------------------------------------------------- */
.founders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.5rem 0}
.founder-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:12px;
  padding:1.5rem;box-shadow:var(--shadow-card);transition:all .25s ease
}
.founder-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-glow)}
.founder-av{
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#000;border-radius:12px;
  font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:1.2rem;margin-bottom:.8rem
}
.founder-av--blue{background:var(--blue);color:#000}
.founder-card h4{font-weight:700;font-size:1.05rem;margin-bottom:.35rem;color:var(--text)}
.founder-card p{font-size:.9rem;line-height:1.5;color:var(--text-muted)}

.callout{
  background:var(--accent-subtle);border:1px solid var(--border);border-radius:12px;
  padding:1.2rem 1.4rem;margin-top:1.5rem;font-size:1rem;line-height:1.65;
  color:var(--text-muted);font-style:italic
}

/* -- SHOWCASE ----------------------------------------------------- */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem;max-width:1080px;margin-left:auto;margin-right:auto}
.browser-frame{
  background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .2s ease;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative
}
.browser-frame:hover{border-color:var(--border-hover);box-shadow:var(--shadow-glow)}
.browser-bar{display:flex;align-items:center;gap:5px;padding:.5rem .75rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,.18)}
.dot{width:10px;height:10px;border-radius:50%}
.dot--r{background:#FF5F57}.dot--y{background:#FFBD2E}.dot--g{background:#28C840}
.browser-url{margin-left:.5rem;font-weight:500;font-size:.7rem;color:var(--text-muted);letter-spacing:.01em}
.browser-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;letter-spacing:.12em;color:var(--green)}
.browser-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:bp-blink 1.8s ease-in-out infinite}
@keyframes bp-blink{0%,100%{opacity:1}50%{opacity:.35}}
.browser-body{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem;background:var(--accent-subtle);flex:1}
.browser-label{font-weight:700;font-size:.85rem;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);padding:.3rem .8rem;border-radius:6px}
.browser-hint{font-weight:500;font-size:.72rem;color:var(--text-muted);opacity:.4}

/* -- Live preview cards ------------------------------------------ */
.browser-frame--live{cursor:pointer;will-change:transform}
.browser-frame--live:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(249,115,22,.35),0 0 0 1px var(--accent) inset}
.browser-frame--live::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(249,115,22,0) 60%,rgba(249,115,22,.08) 100%);
  opacity:0;transition:opacity .3s ease
}
.browser-frame--live:hover::after{opacity:1}

/* Iframe-based live preview · scaled real site
   flex:none required because parent .browser-frame is display:flex:column,
   and base .browser-body{flex:1} would override height with flex-basis:0 */
.browser-body--iframe{
  position:relative;padding:0;min-height:0;
  flex:none;
  height:340px;overflow:hidden;
  background:#FBF7EA
}
.bp-iframe{
  position:absolute;top:0;left:0;
  width:1280px;height:875px;
  border:0;display:block;
  background:transparent;
  pointer-events:none;
  transform:scale(.42);
  transform-origin:top left;
  transition:transform .45s cubic-bezier(.16,1,.3,1)
}
.browser-frame--live:hover .bp-iframe{transform:scale(.44)}

.bp-cta-overlay{
  position:absolute;
  bottom:14px;right:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:.55rem .9rem;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;
  background:rgba(11,15,26,.92);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:6px;
  z-index:2;
  transition:background .25s ease,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.25);
  pointer-events:none
}
.browser-frame--live:hover .bp-cta-overlay{
  background:var(--accent);color:#0B0F1A;
  transform:translateY(-2px);
  box-shadow:0 8px 18px -4px rgba(249,115,22,.5)
}
.bp-arrow{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.browser-frame--live:hover .bp-arrow{transform:translateX(3px)}

/* Subtle gradient veil at the bottom so the CTA sits cleanly */
.browser-body--iframe::before{
  content:'';position:absolute;inset:auto 0 0 0;height:60px;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.18));
  pointer-events:none;z-index:1;
  opacity:.7;transition:opacity .25s ease
}
.browser-frame--live:hover .browser-body--iframe::before{opacity:1}

/* "Soon" note below the project grid — paper-aphorism style, premium hint */
.projects-soon-note{
  display:flex;align-items:center;gap:.7rem;
  max-width:540px;margin:1.6rem auto 0;
  padding:.7rem 1.05rem;
  border:1px dashed color-mix(in srgb,var(--accent) 36%,var(--border));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  color:var(--text-muted);
  font-size:.78rem;line-height:1.4;letter-spacing:.01em;
  text-align:left
}
.projects-soon-note em{
  font-style:italic;color:var(--text);font-weight:500
}
.projects-soon-note__dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
  animation:bp-blink 2.4s ease-in-out infinite
}

@media (max-width: 980px){
  .browser-body--iframe{height:300px}
  .bp-iframe{transform:scale(.38)}
  .browser-frame--live:hover .bp-iframe{transform:scale(.40)}
}

/* -- PROMISE — Paper frame + 3D cards ------------------------------ */
.promise-paper{
  max-width:var(--container);margin:0 auto;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3.5rem 3rem;
  box-shadow:0 8px 40px rgba(0,0,0,.25)
}
.promise-header{
  text-align:center;
  max-width:var(--narrow);
  margin:0 auto 2.5rem
}
.promise-header .label{margin-bottom:1rem}

.promise-list{
  display:flex;flex-direction:column;gap:1rem;
  max-width:700px;margin:0 auto 2.5rem
}

/* Card — 3D push style (matches btn--outline) */
.promise-card{
  display:flex;align-items:center;gap:1rem;
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.2rem 1.5rem;
  box-shadow:0 3px 0 var(--border),0 4px 12px rgba(0,0,0,.1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  opacity:0
}
.promise-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-hover);
  box-shadow:0 5px 0 var(--border),0 8px 20px rgba(0,0,0,.15)
}
.promise-card:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--border)
}

/* Orange check circle with SVG checkmark */
.promise-check{
  width:28px;height:28px;flex-shrink:0;
  border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px var(--accent-glow)
}

.promise-card p{font-size:1.05rem;line-height:1.6;color:var(--text-muted);font-weight:500}
.promise-card p strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em
}

/* Finale — punchline + CTA */
.promise-finale{text-align:center;padding-top:1rem}
.punchline{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:clamp(1.2rem,3vw,1.6rem);letter-spacing:-.02em;
  color:var(--text);text-shadow:none;margin-bottom:.3rem
}
.punchline--accent{
  color:var(--accent);
  font-size:clamp(1.4rem,3.5vw,1.8rem);
  margin-bottom:2rem
}
.promise-finale .btn{margin-top:0}

@media(max-width:768px){
  .promise-paper{padding:2rem 1.2rem;border-radius:14px}
  .promise-header{margin-bottom:2rem}
  .promise-card{padding:1rem 1.2rem;opacity:1}
}

/* -- STACK — Tool pills in 3-phase flow --------------------------- */
.stack-head{text-align:center;max-width:720px;margin:0 auto 2.5rem}
.stack-head .label{margin-bottom:1rem}

/* Grid: 3 cards with flow arrows between them */
.stack-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:.5rem;align-items:stretch;
  max-width:var(--container);margin:0 auto
}

/* Individual phase card — paper DA, 3D push, sticker dots */
.stack-card{
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:14px;
  padding:1.4rem 1.4rem 1.5rem;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.12);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;gap:1rem
}
.stack-card:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 var(--border),0 10px 28px rgba(0,0,0,.18);
  border-color:rgba(249,115,22,.25)
}

/* Card header */
.stack-card-head{display:flex;align-items:flex-start;gap:.85rem}
.stack-card-step{
  flex-shrink:0;
  font-family:'Playfair Display',Georgia,serif;font-weight:900;font-style:italic;
  font-size:1.6rem;color:var(--accent);line-height:1;
  min-width:2.2rem;opacity:.75
}
.stack-card-head h4{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.15rem;letter-spacing:-.01em;color:var(--text);
  margin-bottom:.25rem
}
.stack-card-head p{
  font-size:.82rem;line-height:1.45;color:var(--text-muted)
}

/* Tool pills — 3D push mini buttons */
.stack-tools{
  display:flex;flex-wrap:wrap;gap:.4rem
}
.stack-pill{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.02em;
  padding:.35rem .7rem;border-radius:7px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:0 2px 0 var(--border);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
  cursor:default
}
.stack-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(249,115,22,.3);
  border-color:var(--accent);
  color:var(--accent)
}
.stack-pill:active{transform:translateY(1px);box-shadow:0 1px 0 var(--border)}

/* Flow arrow between cards */
.stack-flow{
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);opacity:.35;
  padding:0 .3rem
}

.stack-footnote{
  text-align:center;margin-top:2.5rem;
  font-size:1rem;color:var(--text-muted);font-weight:500
}
.stack-footnote strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.18) 55%,rgba(249,115,22,.18) 90%,transparent 90%);
  padding:0 .1em
}

/* ================================================================
   METHOD — MISSION BOARDING PASS V3
   Dual theme (default = midnight parchment / light = cream paper).
   No overflow:hidden (sticky stub preserved).
   Cleaned phase signals (no ribbons, no left borders — only S## badges).
   Foil shimmer ready (--foil-shift).
================================================================ */
#method{padding-top:6rem}
#method .section-head{margin-bottom:2.6rem;text-align:center}

.method-ticket{
  /* Defaults = dark mode (midnight parchment) */
  --paper-1:#1F1812;
  --paper-2:#28201A;
  --ink:#F0E2C4;
  --ink-soft:#D6C29C;
  --muted:#A89578;
  --hairline:rgba(200,165,105,.16);
  --foil-1:#C9A76A;
  --foil-2:#F4D88E;
  --foil-3:#7A5A2C;
  --watermark:rgba(200,165,105,.18);
  --foil-shift:0;

  max-width:var(--container);margin:0 auto;
  position:relative;isolation:isolate;
  /* NO overflow:hidden — sticky stub depends on this */
  background:linear-gradient(180deg,var(--paper-1) 0%,var(--paper-2) 100%);
  color:var(--ink);
  border:1px solid var(--hairline);border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -28px 50px rgba(0,0,0,.18),
    0 4px 0 rgba(154,52,18,.32),
    0 18px 36px rgba(0,0,0,.42);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease
}
[data-theme="light"] .method-ticket{
  --paper-1:#F5ECD3;
  --paper-2:#EBDBB1;
  --ink:#1F140A;
  --ink-soft:#3A2A18;
  --muted:#7A6244;
  --hairline:rgba(120,90,50,.22);
  --foil-3:#9C7A40;
  --watermark:rgba(95,68,30,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -28px 50px rgba(70,44,12,.04),
    0 4px 0 rgba(154,52,18,.26),
    0 14px 28px rgba(80,55,20,.16)
}
.method-ticket:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -28px 50px rgba(0,0,0,.18),
    0 5px 0 rgba(154,52,18,.40),
    0 26px 56px rgba(0,0,0,.50)
}

/* Paper grain (subtle, theme-adaptive) */
.method-ticket::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background-image:
    radial-gradient(circle at 22% 28%,rgba(200,165,105,.05) .6px,transparent 1px),
    radial-gradient(circle at 78% 64%,rgba(200,165,105,.04) .6px,transparent 1px);
  background-size:6px 6px,8px 8px;
  mix-blend-mode:soft-light;opacity:.7
}
[data-theme="light"] .method-ticket::before{
  background-image:
    radial-gradient(circle at 22% 28%,rgba(60,40,15,.045) .6px,transparent 1px),
    radial-gradient(circle at 78% 64%,rgba(90,65,28,.035) .6px,transparent 1px);
  mix-blend-mode:multiply;opacity:.85
}

/* Guilloché watermark — contained inside ticket bounds (no overflow) */
.method-ticket::after{
  content:"";position:absolute;
  right:0;bottom:0;width:340px;height:340px;
  border-radius:inherit;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(
    circle at 100% 100%,
    var(--watermark) 0 1px,
    transparent 1px 11px
  );
  opacity:.45;
  -webkit-mask-image:radial-gradient(circle at 100% 100%,black 0%,transparent 70%);
          mask-image:radial-gradient(circle at 100% 100%,black 0%,transparent 70%)
}

.method-ticket > *:not(.ticket-foil):not(.ticket-edge){position:relative;z-index:1}

/* Foil security strip — top edge with shimmer ready */
.ticket-foil{
  position:absolute;top:0;left:0;right:0;height:7px;z-index:5;pointer-events:none;
  border-radius:14px 14px 0 0;
  background:var(--foil-image,
    linear-gradient(90deg,
      var(--foil-3) 0%,
      var(--foil-2) 22%,
      var(--foil-1) 38%,
      var(--foil-2) 54%,
      var(--foil-3) 72%,
      var(--foil-1) 88%,
      var(--foil-3) 100%
    )
  );
  background-size:200% 100%;
  background-position:calc(var(--foil-shift,0) * 1%) center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(80,55,20,.4);
  transition:background-position .45s cubic-bezier(.2,.8,.2,1)
}
.ticket-foil::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:linear-gradient(90deg,transparent 0,rgba(120,85,40,.55) 8%,rgba(120,85,40,.55) 92%,transparent 100%)
}

/* Hide legacy perforated edges */
.method-ticket .ticket-edge{display:none}

/* === Header strap — left + right (no center, title moved to .section-head above) === */
.ticket-header{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 2.2rem 1.3rem;
  border-bottom:1px solid var(--hairline);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--muted)
}
.ticket-header__left{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--ink-soft);white-space:nowrap
}
.ticket-crest{color:var(--accent);font-size:.85rem;letter-spacing:0;line-height:1}
.ticket-eyebrow{color:var(--ink-soft)}
.ticket-header__right{
  display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;
  white-space:nowrap;color:var(--muted)
}
.ticket-class{color:var(--ink-soft);letter-spacing:.24em}
.ticket-authority{color:var(--muted);font-size:.52rem;letter-spacing:.22em}

/* === Body layout ============================================== */
.ticket-body{
  display:grid;grid-template-columns:1fr 240px;gap:0;
  position:relative;padding:0
}
.ticket-main{grid-column:1;grid-row:1;position:relative;padding:2.5rem 2.5rem 2rem}
.ticket-stub{grid-column:2;grid-row:1}
.ticket-body::after{
  content:"";position:absolute;right:240px;top:1.6rem;bottom:1.6rem;width:1px;
  background-image:linear-gradient(var(--hairline) 50%, transparent 50%);
  background-size:1px 8px;pointer-events:none
}

/* === SVG route — phase colors preserved for orientation ====== */
.ticket-route{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible
}
.ticket-route path{
  fill:none;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:10 12;opacity:.42
}
.ticket-route path[data-seg="1"]{stroke:var(--violet)}
.ticket-route path[data-seg="2"]{stroke:var(--blue)}
.ticket-route path[data-seg="3"]{stroke:var(--green-phase)}

/* === Plane marker — detailed jet ============================= */
.ticket-rocket{
  position:absolute;left:50%;top:0;width:42px;height:52px;
  transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;
  transition:opacity .3s ease
}
.ticket-rocket-bob{
  width:100%;height:100%;
  filter:
    drop-shadow(0 4px 8px rgba(154,52,18,.45))
    drop-shadow(0 1px 2px rgba(40,25,5,.35))
}
.ticket-rocket svg{width:100%;height:100%;display:block}

/* === Phase milestone gates — clean, no ribbon =============== */
.m-milestone[data-gate]{
  position:relative;z-index:2;
  width:min(520px,80%);margin:1.6rem auto 1.5rem;
  padding:1.2rem 1.5rem 1.05rem;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--paper-1) 92%,white) 0%,
    color-mix(in srgb,var(--paper-2) 92%,white) 100%
  );
  border:1px solid var(--hairline);
  border-radius:12px;
  text-align:center;
  display:grid;gap:.45rem;justify-items:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 4px 0 rgba(154,52,18,.22),
    0 10px 22px rgba(0,0,0,.22)
}
[data-theme="light"] .m-milestone[data-gate]{
  background:linear-gradient(180deg,#FAF1D9,#F1E2BD);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 0 rgba(154,52,18,.22),
    0 10px 22px rgba(40,25,5,.16)
}
.m-milestone--violet[data-gate]{color:var(--violet)}
.m-milestone--blue[data-gate]{color:var(--blue)}
.m-milestone--green[data-gate]{color:var(--green-phase)}

/* PHASE 01 pill — small wax-seal style credential mark */
.m-gate-num{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .6rem .3rem;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent);
  background:color-mix(in srgb,currentColor 9%,transparent);
  border-radius:999px;
  color:currentColor;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums
}
.m-gate-num::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.85
}
.m-milestone[data-gate] h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.42rem;line-height:1.1;letter-spacing:.005em;
  color:var(--ink);margin:0
}
.m-range{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.62rem;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums
}

/* Position helpers */
.m-pos--left{margin-right:auto;margin-left:0}
.m-pos--right{margin-left:auto;margin-right:0}

/* === Session cards — pure paper credential, NO colored border === */
.m-card--stamp{
  position:relative;z-index:1;
  width:44%;margin-bottom:1.2rem;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--paper-1) 92%,white) 0%,
    color-mix(in srgb,var(--paper-2) 92%,white) 100%
  );
  color:var(--ink);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:1rem 1.15rem .95rem;
  display:flex;align-items:flex-start;gap:.85rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 3px 0 rgba(154,52,18,.20),
    0 8px 16px rgba(0,0,0,.22);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
[data-theme="light"] .m-card--stamp{
  background:linear-gradient(180deg,#FAF1D9,#F1E2BD);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 3px 0 rgba(154,52,18,.18),
    0 8px 16px rgba(40,25,5,.16)
}
.m-card--stamp:hover,
.m-card--stamp.is-active{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 50%,var(--hairline));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 0 rgba(154,52,18,.28),
    0 14px 26px rgba(0,0,0,.30)
}
[data-theme="light"] .m-card--stamp:hover,
[data-theme="light"] .m-card--stamp.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 0 rgba(154,52,18,.26),
    0 14px 26px rgba(40,25,5,.22)
}

/* Sticker-dot pip in top-right corner */
.m-card--stamp::after{
  content:"";position:absolute;top:8px;right:9px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4),
    0 0 0 3px rgba(249,115,22,.22);
  pointer-events:none
}
.m-card__corner{display:none}

.m-card--stamp h4{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;
  font-size:.98rem;line-height:1.25;letter-spacing:-.005em;
  color:var(--ink);margin-bottom:.32rem
}
.m-card--stamp p{
  font-family:'Space Grotesk',sans-serif;
  font-size:.84rem;line-height:1.5;color:var(--ink-soft);font-weight:500
}

/* Session badges — only phase signal, refined */
.tl-badge{
  display:inline-block;flex-shrink:0;margin-top:.18rem;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.7rem;letter-spacing:.06em;
  padding:.32rem .56rem;border-radius:5px;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums
}
.tl-badge--violet{
  color:var(--violet);
  border:1px solid color-mix(in srgb,var(--violet) 38%,transparent);
  background:color-mix(in srgb,var(--violet) 12%,transparent)
}
.tl-badge--blue{
  color:var(--blue);
  border:1px solid color-mix(in srgb,var(--blue) 38%,transparent);
  background:color-mix(in srgb,var(--blue) 12%,transparent)
}
.tl-badge--green{
  color:var(--green-phase);
  border:1px solid color-mix(in srgb,var(--green-phase) 38%,transparent);
  background:color-mix(in srgb,var(--green-phase) 12%,transparent)
}

/* === Visa stamps (deliverables) =============================== */
.m-deliverable.m-stamp{
  position:relative;z-index:2;
  width:220px;height:220px;border-radius:50%;
  margin:2.5rem auto 3rem;
  border:1.5px solid currentColor;
  color:var(--muted);
  background:transparent;
  transform:rotate(-6deg);
  display:grid;place-items:center;
  overflow:visible;
  transition:box-shadow .4s ease
}
.m-stamp[data-phase="violet"]{color:var(--violet)}
.m-stamp[data-phase="blue"]{color:var(--blue)}
.m-stamp[data-phase="green"]{color:var(--green-phase)}
.m-stamp__ring{
  position:absolute;inset:6px;border-radius:50%;
  border:1px solid currentColor;opacity:.5;pointer-events:none
}
.m-stamp__ring--inner{inset:14px;opacity:.32;border-style:dashed}
.m-stamp__ink{
  position:absolute;inset:0;border-radius:50%;
  background:currentColor;opacity:0;
  filter:url(#stampInk);transform:scale(.3);
  pointer-events:none
}
.m-stamp__content{text-align:center;padding:0 1.2rem;line-height:1.25;position:relative;z-index:2}
.m-stamp__label{
  display:block;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.6rem;letter-spacing:.24em;
  color:currentColor;text-transform:uppercase
}
.m-stamp__title{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.5rem;color:var(--ink);
  display:block;margin:.4rem 0;line-height:1;letter-spacing:.005em
}
.m-stamp__sub{
  font-family:'Space Grotesk',sans-serif;
  font-size:.75rem;color:var(--muted);line-height:1.3
}
.m-stamp--finale{width:240px;height:240px}

.m-stamp.is-filled .m-stamp__ink{
  animation:ink-splat .5s ease-out forwards
}
@keyframes ink-splat{
  0%{opacity:0;transform:scale(.3)}
  40%{opacity:.32}
  100%{opacity:.20;transform:scale(1.05)}
}
.m-stamp.is-filled{
  box-shadow:0 0 36px color-mix(in srgb, currentColor 35%, transparent)
}
.m-stamp .m-fill{display:none}

/* === Stub (right column) — sticky preserved ================== */
.ticket-stub{
  position:sticky;top:90px;align-self:start;
  padding:2rem 1.6rem 1.8rem 1.4rem;
  display:grid;gap:1.3rem;align-content:start;
  max-height:calc(100vh - 100px);
  background:transparent
}
.ticket-stub::before{
  content:"";position:absolute;top:1.2rem;bottom:1.2rem;right:0;width:5px;
  background:linear-gradient(180deg,
    var(--foil-3) 0%,
    var(--foil-2) 22%,
    var(--foil-1) 38%,
    var(--foil-2) 54%,
    var(--foil-3) 72%,
    var(--foil-1) 88%,
    var(--foil-3) 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.4),
    inset -1px 0 0 rgba(80,55,20,.4);
  pointer-events:none
}
.stub-block{display:flex;flex-direction:column;gap:.22rem}
.stub-label{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.58rem;letter-spacing:.24em;
  color:var(--muted);text-transform:uppercase
}
.stub-val{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.2rem;color:var(--ink);line-height:1.1;letter-spacing:0
}
.stub-progress{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.92rem;color:var(--accent);letter-spacing:.04em;
  font-variant-numeric:tabular-nums lining-nums
}
.stub-stamps{display:flex;gap:.55rem}
.stub-stamp{
  width:26px;height:26px;border-radius:50%;
  border:1.5px dashed var(--hairline);opacity:.55;
  background:rgba(255,255,255,.06);
  transition:opacity .4s, background .4s, border-color .4s, transform .4s
}
[data-theme="light"] .stub-stamp{background:rgba(255,255,255,.2)}
.stub-stamp.is-stamped{
  opacity:1;border-style:solid;transform:rotate(-8deg);
  box-shadow:0 0 0 2px rgba(255,255,255,.12)
}
[data-theme="light"] .stub-stamp.is-stamped{
  box-shadow:0 0 0 2px rgba(255,255,255,.55)
}
.stub-stamp.is-stamped[data-phase="violet"]{
  background:color-mix(in srgb,var(--violet) 30%,transparent);
  border-color:var(--violet)
}
.stub-stamp.is-stamped[data-phase="blue"]{
  background:color-mix(in srgb,var(--blue) 30%,transparent);
  border-color:var(--blue)
}
.stub-stamp.is-stamped[data-phase="green"]{
  background:color-mix(in srgb,var(--green-phase) 30%,transparent);
  border-color:var(--green-phase)
}

/* Final validation stamp */
.stub-finale{
  position:relative;
  margin:.8rem 0 .5rem;
  padding:1rem .6rem;
  border:1.5px solid var(--accent);
  border-radius:10px;
  text-align:center;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  transform:scale(0) rotate(-18deg);
  opacity:0;
  pointer-events:none
}
.stub-finale::after{
  content:"";position:absolute;inset:5px;border-radius:7px;
  border:1px dashed var(--accent);opacity:.42;pointer-events:none
}
.stub-finale.is-activated{
  animation:stamp-land .6s cubic-bezier(.2,1.4,.4,1) forwards
}
.stub-finale.is-activated::before{
  content:"";position:absolute;inset:0;border-radius:8px;
  background:var(--accent);opacity:0;
  filter:url(#stampInk);
  animation:ink-splat-finale .7s ease-out forwards;
  pointer-events:none
}
@keyframes stamp-land{
  0%{transform:scale(2) rotate(30deg);opacity:0}
  60%{transform:scale(.85) rotate(-10deg);opacity:1}
  80%{transform:scale(1.05) rotate(-4deg)}
  100%{transform:scale(1) rotate(-6deg);opacity:1}
}
@keyframes ink-splat-finale{
  0%{opacity:0;transform:scale(.4)}
  40%{opacity:.18}
  100%{opacity:.1;transform:scale(1.1)}
}
.stub-finale-label{
  display:block;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.58rem;letter-spacing:.24em;
  color:var(--accent);opacity:.85;text-transform:uppercase
}
.stub-finale-title{
  display:block;margin:.28rem 0;
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:.98rem;line-height:1.05;color:var(--accent);letter-spacing:.005em
}
.stub-finale-date{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:.85rem;letter-spacing:.04em;color:var(--accent);opacity:.85;
  font-variant-numeric:tabular-nums lining-nums
}

.stub-barcode{
  height:46px;margin-top:auto;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 11px, transparent 11px 13px);
  opacity:.5
}
.stub-foot{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.58rem;letter-spacing:.24em;
  color:var(--muted);text-align:center;text-transform:uppercase
}

/* === Footer strip ============================================ */
.ticket-footer{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  padding:1rem 2.2rem 1.2rem;
  border-top:1px solid var(--hairline);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-weight:700;font-size:.62rem;letter-spacing:.24em;
  color:var(--muted);text-transform:uppercase
}
.ticket-footer .dot-sep{
  width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7
}

/* Confetti */
.confetti-particle{position:absolute;pointer-events:none;z-index:10;will-change:transform,opacity}

/* === Mobile-only ticket components — hidden by default ====== */
.flight-column-mobile,
.ticket-progress-mobile{display:none}

/* === Pilot card mobile auto-shimmer (no cursor on touch) ==== */
@media (max-width:768px) and (hover:none){
  @keyframes foilAutoShimmer{
    0%,100%{background-position:0% center}
    50%{background-position:100% center}
  }
  .passport__foil{
    background-size:200% 100%;
    animation:foilAutoShimmer 9s ease-in-out infinite
  }
  .ticket-foil{
    background-size:200% 100%;
    animation:foilAutoShimmer 11s ease-in-out infinite
  }
}

@media (prefers-reduced-motion:reduce){
  .passport__foil,.ticket-foil{animation:none}
  .m-cta{transition:none}
}

/* -- INTERVIEWS / PILLS ------------------------------------------- */
.topic-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.pill{
  font-weight:600;font-size:.78rem;letter-spacing:.03em;
  padding:.4rem .8rem;border:1px solid var(--border);border-radius:999px;
  background:var(--card-bg);color:var(--text-muted);transition:all .2s ease
}
.pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}

/* -- INCLUDED — S-curve tunnel (same pattern as Problem section) -- */
.inc-paper{
  max-width:var(--container);margin:0 auto;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3.5rem 3rem 2rem;
  box-shadow:0 8px 40px rgba(0,0,0,.25);
  overflow:hidden
}
.inc-header{text-align:center;max-width:var(--narrow);margin:0 auto 3rem}
.inc-header .label{margin-bottom:1rem}

/* Journey container (mirrors .pain-journey) */
.inc-journey{position:relative;padding:0 1rem 2rem}
.inc-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.inc-draw-line{fill:none;stroke:var(--accent);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;opacity:.4}

/* Nodes alternate left/right (mirrors .pain-node) */
.inc-node{position:relative;z-index:1;max-width:520px;margin-bottom:100px;opacity:0}
.inc-node--right{margin-left:auto;margin-right:0}
.inc-node--trust{max-width:680px;margin-left:auto;margin-right:auto;margin-bottom:0}

/* Card — 3D push (mirrors .pain-card-v) */
.inc-item{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.8rem 2rem;
  display:flex;align-items:flex-start;gap:1.2rem;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.15);
  transition:transform .25s ease,box-shadow .25s ease
}
.inc-item:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--border),0 8px 24px rgba(0,0,0,.2)}

/* Number */
.inc-num{
  font-family:var(--font-num);font-weight:900;
  font-size:2.6rem;color:var(--accent);opacity:.25;line-height:1;flex-shrink:0;
  display:block;min-width:2.5rem;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.015em
}

/* Content */
.inc-content{flex:1;min-width:0}
.inc-item h4{font-weight:700;font-size:1.05rem;margin-bottom:.4rem;color:var(--text)}
.inc-item p{font-size:.95rem;line-height:1.6;color:var(--text-muted);margin-bottom:.8rem}
.inc-item p strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em
}

/* Tags — color-coded pills */
.inc-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.inc-tag{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.02em;
  padding:.25rem .7rem;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--text-muted);transition:all .2s ease
}
.inc-tag--accent{color:var(--accent);border-color:rgba(249,115,22,.2);background:rgba(249,115,22,.06)}
.inc-tag--violet{color:var(--violet);border-color:rgba(167,139,250,.2);background:rgba(167,139,250,.06)}
.inc-tag--blue{color:var(--blue);border-color:rgba(59,130,246,.2);background:rgba(59,130,246,.06)}
.inc-tag--green{color:var(--green);border-color:rgba(16,185,129,.2);background:rgba(16,185,129,.06)}

/* Trust card — accent glow (mirrors .pain-card-solution) */
.inc-item--trust{
  border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(249,115,22,.06) 0%,var(--card-bg) 50%,rgba(249,115,22,.03) 100%);
  box-shadow:0 4px 0 rgba(249,115,22,.3),0 12px 40px var(--accent-glow);
  gap:1.5rem;align-items:center
}
.inc-item--trust:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(249,115,22,.3),0 16px 48px rgba(249,115,22,.15)}
.inc-trust-icon{flex-shrink:0}

.inc-finale{text-align:center;margin-top:2.5rem}

/* Shield animation */
.shield-check{stroke-dasharray:20;stroke-dashoffset:20;animation:draw-check 2.5s ease-in-out infinite}
@keyframes draw-check{0%{stroke-dashoffset:20}25%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}

/* ── Card micro-animations ─────────────────────────────────────── */
.inc-vis{margin-bottom:.8rem}

/* 01 — Video player */
.vis-player{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:8px
}
.vp-btn{width:0;height:0;border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent;flex-shrink:0}
.vp-track{width:80px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.vp-fill{height:100%;width:0;background:var(--accent);border-radius:2px;animation:vp-progress 4s ease-in-out infinite}
@keyframes vp-progress{0%{width:0}85%,100%{width:100%}}
.vp-time{font-family:'Space Grotesk',sans-serif;font-size:.6rem;color:var(--text-muted);font-weight:600}

/* 02 — Live indicator */
.vis-live{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.15);border-radius:8px
}
.vl-dot{width:7px;height:7px;border-radius:50%;background:#EF4444;box-shadow:0 0 6px rgba(239,68,68,.5);animation:vl-pulse 1.5s ease-in-out infinite}
@keyframes vl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.vl-label{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.6rem;letter-spacing:.1em;color:#EF4444}
.vl-users{font-size:.45rem;color:var(--text-muted);opacity:.4;letter-spacing:2px}

/* 03 — Code lines */
.vis-code{
  display:inline-flex;flex-direction:column;gap:4px;
  padding:8px 12px;background:rgba(0,0,0,.3);
  border:1px solid var(--border);border-radius:8px
}
.vc-ln{height:3px;border-radius:2px}
.vc-v{width:36px;background:var(--violet);opacity:.5}
.vc-b{width:52px;background:var(--blue);opacity:.4}
.vc-a{width:28px;background:var(--accent);opacity:.35;animation:vc-glow 3s ease-in-out infinite}
@keyframes vc-glow{0%,100%{opacity:.25;width:28px}50%{opacity:.6;width:44px}}

/* 04 — Chat bubbles */
.vis-chat{
  display:inline-flex;flex-direction:column;gap:3px;
  padding:6px 12px;background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:8px;
  min-width:100px
}
.vch-msg{height:5px;border-radius:3px;background:var(--border)}
.vch-l{width:60%;animation:vch-in 3s ease-in-out infinite}
.vch-r{width:45%;align-self:flex-end;background:var(--accent);opacity:.25;animation:vch-in 3s ease-in-out .5s infinite}
@keyframes vch-in{0%{opacity:0;transform:translateX(-4px)}15%,85%{opacity:1;transform:translateX(0)}100%{opacity:0}}
.vch-dots{display:flex;gap:3px;padding-top:1px}
.vch-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.3;animation:vch-bounce 1.4s ease-in-out infinite}
.vch-dots i:nth-child(2){animation-delay:.15s}
.vch-dots i:nth-child(3){animation-delay:.3s}
@keyframes vch-bounce{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-4px);opacity:.7}}

/* 05 — Notification */
.vis-notif{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:8px
}
.vn-zap{font-size:.85rem;animation:vn-shake 2s ease-in-out infinite}
@keyframes vn-shake{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(15deg)}90%{transform:rotate(-10deg)}95%{transform:rotate(5deg)}}
.vn-badge{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.6rem;letter-spacing:.04em;color:var(--accent);background:rgba(249,115,22,.1);padding:2px 6px;border-radius:4px}

@media(max-width:768px){
  .inc-paper{padding:1.8rem 1.1rem;border-radius:14px}
  .inc-header{margin-bottom:1.8rem}

  /* Mobile included journey — same cinema as #problem (rail marker + page-turn) */
  .inc-journey{
    padding:.6rem 0 1.4rem 2.6rem !important;
    position:relative;
    perspective:1200px;
    perspective-origin:50% 0%
  }
  .inc-journey::before{display:none}

  /* SVG strip — slim corridor, path sways alternately */
  .inc-svg{
    display:block !important;
    position:absolute;
    left:13px;top:0;width:20px;height:100%;
    pointer-events:none;z-index:0;overflow:visible
  }
  .inc-svg .inc-draw-line{
    fill:none;stroke-linecap:round;stroke-linejoin:round
  }
  .inc-svg .inc-draw-line--track{
    stroke:color-mix(in srgb,var(--accent) 22%,transparent);
    stroke-width:1.8;
    stroke-dasharray:1 6;
    opacity:.55
  }
  .inc-svg .inc-draw-line--halo{
    stroke:var(--accent);
    stroke-width:9;
    opacity:.18;
    filter:blur(3.5px)
  }
  .inc-svg .inc-draw-line--active{
    stroke:var(--accent);
    stroke-width:3;
    opacity:1
  }

  /* Node container — alternance subtle; opacity:1 (override desktop opacity:0) */
  .inc-node,.inc-node--right{
    max-width:100%;
    margin-bottom:1.5rem;
    position:relative;
    padding-left:0;
    opacity:1
  }
  .inc-node[data-inc-side="left"]{margin-left:0 !important;margin-right:0}
  .inc-node[data-inc-side="right"]{margin-left:8px !important;margin-right:0}
  .inc-node[data-inc-side="trust"]{margin-left:0 !important;margin-right:0;margin-top:1.9rem}

  /* Dot on the rail — stamped activation with rotation + offset shadow */
  .inc-node::before{
    content:'';position:absolute;
    left:-16px;top:28px;
    width:12px;height:12px;border-radius:50%;
    background:var(--bg-alt);
    border:2px solid color-mix(in srgb,var(--accent) 32%,var(--border));
    box-shadow:0 0 0 3px var(--bg-alt);
    z-index:2;
    transition:
      background .5s cubic-bezier(.16,1,.3,1),
      border-color .5s ease,
      box-shadow .55s ease
  }
  .inc-node.is-active::before{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:
      0 0 0 3px var(--bg-alt),
      0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),
      0 0 22px color-mix(in srgb,var(--accent) 55%,transparent),
      1px 1px 0 color-mix(in srgb,var(--accent) 90%,black);
    animation:incDotStamp .65s cubic-bezier(.34,1.56,.64,1) forwards
  }
  @keyframes incDotStamp{
    0%{transform:scale(.7) rotate(-2deg)}
    35%{transform:scale(1.45) rotate(2deg)}
    70%{transform:scale(1.18) rotate(.5deg)}
    100%{transform:scale(1.22) rotate(1.5deg)}
  }

  /* Pulse ring — double wave */
  .inc-node::after{
    content:'';position:absolute;
    left:-16px;top:28px;
    width:12px;height:12px;border-radius:50%;
    border:2px solid var(--accent);
    opacity:0;pointer-events:none;z-index:2
  }
  .inc-node.is-active::after{animation:incNodePulse 1.15s ease-out}
  @keyframes incNodePulse{
    0%{opacity:.85;transform:scale(.6);border-width:2.5px}
    35%{opacity:.45;transform:scale(1.7);border-width:2px}
    65%{opacity:.18;transform:scale(2.5);border-width:1.5px}
    100%{opacity:0;transform:scale(3.4);border-width:1px}
  }

  /* Card — GSAP owns transform/opacity (page-turn). CSS handles border + shadow */
  .inc-item{
    position:relative;
    padding:1.3rem 1.2rem;
    backface-visibility:hidden;
    transition:
      border-color .5s ease .25s,
      box-shadow .55s ease .2s,
      background .4s ease
  }

  /* Connector — short bar from rail dot to card edge, slides in after card lands */
  .inc-item::before{
    content:'';position:absolute;
    left:-12px;top:34px;
    width:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--accent) 65%,transparent) 0%,
      var(--accent) 100%);
    box-shadow:0 0 6px color-mix(in srgb,var(--accent) 55%,transparent);
    transition:
      width .5s cubic-bezier(.19,1,.22,1) .55s,
      opacity .3s ease .55s;
    opacity:0;pointer-events:none;z-index:1
  }
  .inc-node[data-inc-side].is-revealed .inc-item{
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
    box-shadow:
      0 5px 0 color-mix(in srgb,var(--accent) 24%,var(--border)),
      0 12px 26px rgba(0,0,0,.2)
  }
  .inc-node[data-inc-side].is-revealed .inc-item::before{width:14px;opacity:1}

  .inc-num{font-size:2.05rem}

  /* Tags wrap-friendly */
  .inc-tags{gap:.32rem !important}
  .inc-tag{font-size:.66rem !important;padding:.22rem .6rem !important}

  /* Trust card — final destination, no rail dot/connector */
  .inc-node--trust{margin-top:1.9rem;margin-left:0 !important}
  .inc-node--trust::before,
  .inc-node--trust::after,
  .inc-node--trust .inc-item::before{display:none}
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .inc-node[data-inc-side] .inc-item,
  .inc-node[data-inc-side] .inc-num,
  .inc-node[data-inc-side] .inc-item h4,
  .inc-node[data-inc-side] .inc-item p,
  .inc-node[data-inc-side] .inc-tags{
    opacity:1 !important;
    transform:none !important;
    transition:none
  }
  .inc-item,.inc-item::before,
  .inc-node::before,.inc-node::after{transition:none;animation:none}

  /* Apply steps — same bypass for reduced motion */
  .apply-step[data-apply-side],
  .apply-step[data-apply-side] .apply-step-num,
  .apply-step[data-apply-side] h4,
  .apply-step[data-apply-side] p{
    opacity:1 !important;
    transform:none !important;
    transition:none
  }
  .apply-step,.apply-step::before,.apply-step::after{transition:none;animation:none}
}

/* -- FOR WHO — Comparison cards (red NO / green YES) ------------- */
.fw-head{
  text-align:center;max-width:var(--narrow);
  margin:0 auto 2.5rem
}
.fw-head .label{margin-bottom:1rem}
.fw-head .body-text{margin:.6rem auto 0;max-width:560px}

.fw-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  max-width:var(--container);margin:0 auto
}

/* Shared card base — paper / 3D push */
.fw-card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.8rem 1.7rem 1.9rem;
  transition:transform .25s ease, box-shadow .25s ease
}

/* — NO card: red — */
.fw-card--no{
  border-color:#E05D44;
  box-shadow:0 4px 0 #E05D44,0 6px 18px rgba(224,93,68,.10)
}
.fw-card--no:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 #E05D44,0 12px 28px rgba(224,93,68,.18)
}

/* — YES card: green — */
.fw-card--yes{
  border-color:#1F9D55;
  box-shadow:0 4px 0 #1F9D55,0 6px 18px rgba(31,157,85,.10)
}
.fw-card--yes:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 #1F9D55,0 12px 28px rgba(31,157,85,.18)
}

/* Card header — pill badge */
.fw-card-head{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.4rem
}
.fw-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;
  padding:.5rem 1rem;border-radius:999px;border:1.5px solid currentColor
}
.fw-pill--no{color:#E05D44;background:rgba(224,93,68,.08)}
.fw-pill--yes{color:#1F9D55;background:rgba(31,157,85,.08)}

/* Items list */
.fw-items{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.85rem
}

/* Each line */
.fw-line{
  display:flex;align-items:flex-start;gap:.9rem;
  font-size:1rem;line-height:1.5;font-weight:500;
  color:var(--text)
}

/* Icon badge (shared) */
.fw-icon{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  margin-top:.15rem
}
.fw-icon--no{
  background:#E05D44;color:#fff
}
.fw-icon--yes{
  background:#1F9D55;color:#fff
}

/* -- TAKEAWAY — Paper bento grid ---------------------------------- */
.tk-paper{
  max-width:var(--container);margin:0 auto;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3.5rem 3rem 2.5rem;
  box-shadow:0 8px 40px rgba(0,0,0,.25)
}
.tk-header{text-align:center;max-width:var(--narrow);margin:0 auto 2.5rem}
.tk-header .label{margin-bottom:1rem}
.tk-header .body-text{margin-top:.6rem}

.tk-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem
}
.tk-card{
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:14px;
  padding:1.6rem 1.5rem;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.15);
  transition:transform .25s ease,box-shadow .25s ease
}
.tk-card:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 var(--border),0 10px 28px rgba(0,0,0,.2)
}
.tk-vis{margin-bottom:1rem;min-height:36px;display:flex;align-items:flex-start}
.tk-card h4{
  font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:.4rem
}
.tk-card p{
  font-size:.88rem;line-height:1.55;color:var(--text-muted)
}
.tk-card p strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em
}
.tk-footer{text-align:center;margin-top:2.5rem}

/* tk — Micro-animations per card (reuses Included section libs) */

/* Browser frame with live dot */
.vis-browser{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:8px
}
.vb-dot{width:6px;height:6px;border-radius:50%}
.vb-r{background:#EF4444}.vb-y{background:#FBBF24}.vb-g{background:#10B981}
.vb-url{
  font-family:'Space Grotesk',sans-serif;font-size:.6rem;font-weight:600;
  color:var(--text-muted);margin-left:4px
}
.vb-live{
  display:inline-flex;align-items:center;gap:4px;margin-left:4px;
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.55rem;
  letter-spacing:.08em;color:#10B981
}
.vb-live-dot{
  width:5px;height:5px;border-radius:50%;background:#10B981;
  box-shadow:0 0 6px rgba(16,185,129,.6);animation:vl-pulse 1.5s ease-in-out infinite
}

/* Flow (method framework) */
.vis-flow{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:8px
}
.vf-step{
  width:14px;height:14px;border-radius:4px;
  background:var(--border)
}
.vf-1{animation:vf-pop 3s ease-in-out 0s infinite}
.vf-2{animation:vf-pop 3s ease-in-out .5s infinite}
.vf-3{animation:vf-pop 3s ease-in-out 1s infinite}
@keyframes vf-pop{
  0%,70%,100%{background:var(--border);transform:scale(1)}
  15%,25%{background:var(--accent);transform:scale(1.15)}
}
.vf-arrow{
  font-size:.7rem;color:var(--text-muted);opacity:.4;font-weight:700
}

/* Team avatars (founders) */
.vis-team{
  display:inline-flex;align-items:center;
  padding:6px 10px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:8px
}
.vt-av{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.6rem;
  color:#fff;border:2px solid var(--card-bg);
  margin-left:-6px;animation:vt-bounce 2.4s ease-in-out infinite
}
.vt-av:first-child{margin-left:0}
.vt-av-1{background:var(--accent);animation-delay:0s}
.vt-av-2{background:var(--blue);animation-delay:.15s}
.vt-av-3{background:var(--violet);animation-delay:.3s}
.vt-av-4{background:var(--green);animation-delay:.45s}
.vt-av-more{
  background:rgba(255,255,255,.08);color:var(--text-muted);
  font-size:.55rem;animation-delay:.6s
}
@keyframes vt-bounce{
  0%,80%,100%{transform:translateY(0)}
  20%{transform:translateY(-3px)}
}

/* Document/Template preview */
.vis-doc{
  display:inline-flex;flex-direction:column;gap:4px;
  padding:6px 8px 7px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:6px;
  width:72px
}
.vd-bar{display:flex;gap:3px;padding-bottom:2px;border-bottom:1px solid var(--border)}
.vd-dot{width:4px;height:4px;border-radius:50%;background:var(--border)}
.vd-body{display:flex;flex-direction:column;gap:3px;padding-top:3px}
.vd-ln{height:3px;border-radius:2px;background:var(--border)}
.vd-ln-1{width:100%;animation:vd-draw 3.2s ease-in-out infinite}
.vd-ln-2{width:70%;animation:vd-draw 3.2s ease-in-out .35s infinite}
.vd-ln-3{width:55%;background:var(--accent);opacity:.5;animation:vd-draw 3.2s ease-in-out .7s infinite}
@keyframes vd-draw{
  0%,88%,100%{transform:scaleX(0);transform-origin:left}
  25%,75%{transform:scaleX(1);transform-origin:left}
}

/* Calendar / 365 days */
.vis-cal{
  display:inline-flex;flex-direction:column;gap:4px;
  padding:6px 10px 7px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:8px
}
.vcal-head{display:flex;align-items:baseline;gap:4px}
.vcal-365{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:.95rem;color:var(--accent);line-height:1
}
.vcal-lbl{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.48rem;
  letter-spacing:.12em;color:var(--text-muted)
}
.vcal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px
}
.vcal-grid span{
  width:5px;height:5px;border-radius:1px;background:var(--border)
}
.vcal-grid span:nth-child(1){animation:vcal-fill 4.2s ease-in-out 0s infinite}
.vcal-grid span:nth-child(2){animation:vcal-fill 4.2s ease-in-out .15s infinite}
.vcal-grid span:nth-child(3){animation:vcal-fill 4.2s ease-in-out .3s infinite}
.vcal-grid span:nth-child(4){animation:vcal-fill 4.2s ease-in-out .45s infinite}
.vcal-grid span:nth-child(5){animation:vcal-fill 4.2s ease-in-out .6s infinite}
.vcal-grid span:nth-child(6){animation:vcal-fill 4.2s ease-in-out .75s infinite}
.vcal-grid span:nth-child(7){animation:vcal-fill 4.2s ease-in-out .9s infinite}
.vcal-grid span:nth-child(8){animation:vcal-fill 4.2s ease-in-out 1.05s infinite}
.vcal-grid span:nth-child(9){animation:vcal-fill 4.2s ease-in-out 1.2s infinite}
.vcal-grid span:nth-child(10){animation:vcal-fill 4.2s ease-in-out 1.35s infinite}
.vcal-grid span:nth-child(11){animation:vcal-fill 4.2s ease-in-out 1.5s infinite}
.vcal-grid span:nth-child(12){animation:vcal-fill 4.2s ease-in-out 1.65s infinite}
.vcal-grid span:nth-child(13){animation:vcal-fill 4.2s ease-in-out 1.8s infinite}
.vcal-grid span:nth-child(14){animation:vcal-fill 4.2s ease-in-out 1.95s infinite}
@keyframes vcal-fill{
  0%,80%,100%{background:var(--border)}
  15%,65%{background:var(--accent);box-shadow:0 0 3px rgba(249,115,22,.4)}
}

/* Growth chart (roadmap +90j) */
.vis-chart{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:8px;
  color:var(--accent)
}
.vis-chart svg{flex-shrink:0;overflow:visible}
.vch-line{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:vch-draw 3.5s ease-in-out infinite
}
.vch-dot{
  opacity:0;animation:vch-pop 3.5s ease-in-out infinite
}
@keyframes vch-draw{
  0%,100%{stroke-dashoffset:120}
  40%,80%{stroke-dashoffset:0}
}
@keyframes vch-pop{
  0%,40%,100%{opacity:0;transform:scale(0)}
  50%,80%{opacity:1;transform:scale(1)}
}
.vch-tag{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.6rem;
  letter-spacing:.04em;color:var(--accent);
  background:rgba(249,115,22,.1);padding:2px 6px;border-radius:4px
}

/* -- GUARANTEE ---------------------------------------------------- */
.guarantee-box{
  background:var(--card-bg);border:1px solid var(--border);border-radius:16px;
  padding:2.5rem 2rem;box-shadow:var(--shadow-card);transition:all .25s ease
}
.guarantee-box:hover{border-color:var(--yellow);box-shadow:0 0 24px rgba(251,191,36,.08)}
.guarantee-icon{font-size:3.5rem;display:block;margin-bottom:1rem}
.guarantee-box .body-text{max-width:none;text-align:left}

/* -- CANDIDATURE — Paper wrapper with 3D step cards --------------- */
.apply-paper{
  max-width:var(--container);margin:0 auto;
  background:var(--bg-alt);
  border:1px solid var(--border);border-radius:20px;
  padding:3.5rem 3rem 2.5rem;
  box-shadow:0 8px 40px rgba(0,0,0,.25)
}
.apply-header{text-align:center;max-width:var(--narrow);margin:0 auto 2.5rem}
.apply-header .label{margin-bottom:1rem}
.apply-header .body-text{margin-top:.6rem}

.apply-steps{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-bottom:2.5rem;flex-wrap:wrap;
  position:relative
}
/* SVG cinema rail — only displayed on mobile (overridden in @media). On desktop,
   the SVG must be hidden so it doesn't inject 300x150 default size into the flex row. */
.apply-svg{
  display:none;
  position:absolute;top:0;left:0;
  pointer-events:none
}
.apply-step{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.8rem 1.5rem;text-align:center;flex:1;min-width:180px;max-width:280px;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.15);
  transition:transform .25s ease,box-shadow .25s ease
}
.apply-step:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 var(--border),0 10px 28px rgba(0,0,0,.2)
}
.apply-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--card-bg);border:2px solid var(--border);
  font-family:var(--font-num);font-weight:900;font-size:1.55rem;
  color:var(--text);margin-bottom:.8rem;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.005em
}
.apply-step-num--accent{
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 16px var(--accent-glow)
}
.apply-step-body h4{font-weight:700;font-size:1rem;margin-bottom:.3rem;color:var(--text)}
.apply-step-body p{font-size:.85rem;color:var(--text-muted);line-height:1.5}

.apply-step-arrow{
  font-size:1.2rem;color:var(--text-muted);opacity:.3;flex-shrink:0
}

.apply-footer{text-align:center}
.apply-note{
  font-weight:600;font-size:.82rem;color:var(--text-muted);opacity:.6;
  margin-top:1.2rem
}

/* -- FAQ — Functional accordion ----------------------------------- */
.faq-head{text-align:center;margin:0 auto 2.5rem;max-width:var(--narrow)}
.faq-head .label{margin-bottom:1rem}
.faq-head .body-text{margin:.6rem auto 0;max-width:560px}
.faq-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.faq-item{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;
  box-shadow:0 3px 0 var(--border),0 4px 12px rgba(0,0,0,.12);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease
}
.faq-item:hover{
  border-color:rgba(249,115,22,.2);
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.15)
}
.faq-item.open{
  border-color:var(--accent);
  box-shadow:0 4px 0 rgba(249,115,22,.25),0 6px 20px rgba(249,115,22,.08)
}

.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 1.4rem;text-align:left;font-weight:700;font-size:1rem;
  color:var(--text);gap:1rem;
  transition:color .2s ease
}
.faq-q:hover .faq-q-text{color:var(--accent)}
.faq-item.open .faq-q-text{color:var(--accent)}
.faq-q-text{flex:1;line-height:1.4;transition:color .2s ease}

/* Plus/minus toggle icon */
.faq-toggle{
  position:relative;flex-shrink:0;
  width:28px;height:28px;border-radius:8px;
  background:var(--bg-alt);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,transform .3s ease
}
.faq-toggle span{
  position:absolute;background:var(--text-muted);border-radius:1px;
  transition:background .25s ease,transform .3s ease,opacity .3s ease
}
.faq-toggle span:nth-child(1){width:12px;height:1.5px}
.faq-toggle span:nth-child(2){width:1.5px;height:12px}
.faq-item.open .faq-toggle{
  background:var(--accent);border-color:var(--accent);
  transform:rotate(180deg)
}
.faq-item.open .faq-toggle span{background:#fff}
.faq-item.open .faq-toggle span:nth-child(2){opacity:0;transform:scaleY(0)}

/* Answer panel */
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1)
}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{
  padding:0 1.4rem 1.2rem;
  border-top:1px solid var(--border);padding-top:1rem
}
.faq-a-inner p{
  font-weight:500;font-size:.95rem;line-height:1.65;color:var(--text-muted)
}
.faq-a-inner p strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em
}

/* ==================================================================
   PRICING TICKET — Boarding-pass style (paper DA)
================================================================== */

/* Comparison row */
.pt-compare{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:var(--container);margin:0 auto 3rem
}
.pt-cmp{
  position:relative;
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.6rem 1.3rem 1.2rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.12);
  transition:transform .25s ease,box-shadow .25s ease
}
.pt-cmp:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 var(--border),0 10px 28px rgba(0,0,0,.18)
}
.pt-cmp-lbl{
  font-size:.82rem;color:var(--text-muted);font-weight:600;
  letter-spacing:.01em
}
.pt-cmp-price{
  font-family:var(--font-num);font-weight:900;
  font-size:2rem;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.015em
}
.pt-cmp-price s{
  opacity:.55;text-decoration-thickness:2px;
  text-decoration-color:var(--red)
}
.pt-cmp-per{
  font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.7rem;
  letter-spacing:.03em;color:var(--text-muted);opacity:.7
}

/* Winning comparison card */
.pt-cmp--win{
  border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(249,115,22,.06) 0%,var(--card-bg) 60%,rgba(249,115,22,.03) 100%);
  box-shadow:0 4px 0 rgba(249,115,22,.3),0 12px 36px var(--accent-glow);
  padding-top:2.1rem
}
.pt-cmp--win:hover{
  box-shadow:0 7px 0 rgba(249,115,22,.3),0 16px 44px rgba(249,115,22,.15)
}
.pt-cmp--win .pt-cmp-price{color:var(--accent)}
.pt-cmp-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.12em;
  padding:.28rem .8rem;border-radius:6px;
  background:var(--accent);color:#fff;
  box-shadow:0 3px 12px var(--accent-glow)
}

/* Ticket — boarding-pass with perforated divider */
.pt-ticket{
  max-width:960px;margin:0 auto;position:relative;
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:20px;
  box-shadow:
    0 8px 0 var(--border),
    0 18px 48px rgba(0,0,0,.22);
  overflow:hidden
}

/* Ticket top bar */
.pt-ticket-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.4rem;
  background:linear-gradient(90deg,
    rgba(249,115,22,.08) 0%,
    rgba(249,115,22,.02) 50%,
    rgba(249,115,22,.08) 100%);
  border-bottom:1.5px dashed var(--border)
}
.pt-ticket-tag{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.12em;color:var(--accent)
}
.pt-ticket-tag--alt{color:var(--text-muted)}
.pt-ticket-dots{
  flex:1;display:flex;gap:5px;justify-content:center;
  opacity:.4
}
.pt-ticket-dots i{
  width:4px;height:4px;border-radius:50%;background:var(--text-muted)
}

/* Body — 2 columns with perforated separator */
.pt-ticket-body{
  display:grid;grid-template-columns:1.25fr auto 1fr;gap:0;
  padding:2.5rem 0
}
.pt-main{padding:0 2.5rem 0 2.5rem}
.pt-stub{padding:0 2.5rem 0 2.5rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}

/* Perforated vertical separator with punch-holes */
.pt-ticket{isolation:isolate}
.pt-ticket-body{position:relative}
.pt-ticket-body > .pt-divider{
  width:1px;position:relative;
  background:repeating-linear-gradient(to bottom,
    var(--border) 0,var(--border) 4px,
    transparent 4px,transparent 9px)
}

/* Circular punch-holes at top & bottom of divider */
.pt-ticket-body > .pt-divider::before,
.pt-ticket-body > .pt-divider::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:28px;height:28px;border-radius:50%;
  background:var(--bg-alt);
  border:1px solid var(--border)
}
.pt-ticket-body > .pt-divider::before{top:-14px}
.pt-ticket-body > .pt-divider::after{bottom:-14px}

/* Price */
.pt-price-wrap{
  display:flex;align-items:baseline;gap:.3rem;margin-bottom:.4rem
}
.pt-price-amount{
  font-family:var(--font-num);font-weight:900;
  font-size:clamp(3.2rem,7.6vw,5.2rem);line-height:.95;
  letter-spacing:-.025em;color:var(--text);
  font-variant-numeric:tabular-nums lining-nums
}
.pt-price-currency{
  font-family:var(--font-num);font-weight:900;
  font-size:clamp(2.2rem,4.4vw,3.2rem);color:var(--text);line-height:.95;
  letter-spacing:-.015em
}
.pt-price-tax{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;
  color:var(--text-muted);letter-spacing:.04em;margin-left:.2rem
}
.pt-split{
  font-size:.92rem;color:var(--text-muted);margin-bottom:1.8rem;
  padding:.55rem .9rem;
  display:inline-block;
  border:1px solid var(--border);border-radius:8px;
  background:rgba(249,115,22,.04)
}
.pt-split strong{color:var(--accent);font-weight:700}

/* Benefits list */
.pt-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.pt-benefits li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.95rem;line-height:1.5;color:var(--text-muted);font-weight:500
}
.pt-benefits li strong{
  color:var(--text);
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.15) 55%,rgba(249,115,22,.15) 90%,transparent 90%);
  padding:0 .1em
}
.pt-check{
  flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:800;margin-top:1px
}

/* Stub cards (right column) */
.pt-stub-card{
  border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.1rem
}
.pt-stub-card--guarantee{
  border-color:rgba(16,185,129,.25);
  background:rgba(16,185,129,.05);
  display:flex;gap:.8rem;align-items:flex-start
}
.pt-stub-icon{font-size:1.4rem;line-height:1;flex-shrink:0}
.pt-stub-card--guarantee h4{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.08em;color:var(--green);text-transform:uppercase;
  margin-bottom:.3rem
}
.pt-stub-card--guarantee p{font-size:.82rem;line-height:1.5;color:var(--text-muted)}
.pt-stub-card--guarantee p strong{color:var(--text);font-weight:700}

.pt-stub-card--value{
  border-color:var(--border);
  background:rgba(249,115,22,.04)
}
.pt-stub-eyebrow{
  display:block;
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.1em;color:var(--accent);margin-bottom:.5rem
}
.pt-stub-calc{font-size:.88rem;line-height:1.55;color:var(--text-muted);margin-bottom:.4rem}
.pt-stub-calc strong{color:var(--accent);font-weight:800;font-size:.95rem}
.pt-stub-hook{font-size:.88rem;line-height:1.5;color:var(--text);font-weight:600}
.pt-stub-hook strong{color:var(--accent);font-weight:800}

/* Footer — CTA */
.pt-ticket-foot{
  position:relative;
  border-top:1.5px dashed var(--border);
  padding:1.8rem 2rem;text-align:center;
  background:linear-gradient(180deg,transparent 0%,rgba(249,115,22,.03) 100%)
}
/* Punch-holes at sides where border meets footer */
.pt-ticket-foot::before,
.pt-ticket-foot::after{
  content:'';position:absolute;top:-14px;
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border)
}
.pt-ticket-foot::before{left:-14px}
.pt-ticket-foot::after{right:-14px}
.pt-cta{
  box-shadow:0 6px 0 rgba(249,115,22,.35),0 10px 28px rgba(249,115,22,.2)!important
}
.pt-foot-note{
  margin-top:.9rem;font-size:.78rem;color:var(--text-muted);opacity:.7
}


/* ==================================================================
   FINAL CTA + FOOTER — Unified editorial closing composition
   No hard cuts. Giant VIBES MONEY watermark flows behind footer.
================================================================== */

/* The stage — one continuous canvas for CTA + footer */
.final-stage{
  position:relative;overflow:hidden;
  background:var(--bg);
  isolation:isolate
}

/* Soft warmth at the bottom — no linear bands, no borders */
.final-stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 70% at 50% 110%,
      rgba(249,115,22,.16) 0%,
      rgba(249,115,22,.06) 42%,
      transparent 78%)
}
[data-theme="light"] .final-stage::before{
  background:
    radial-gradient(ellipse 120% 70% at 50% 110%,
      rgba(234,88,12,.12) 0%,
      rgba(234,88,12,.04) 42%,
      transparent 78%)
}

/* Subtle paper grain overlay for texture */
.final-stage::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 25% 35%,rgba(255,255,255,.01) 1px,transparent 1px),
    radial-gradient(circle at 75% 65%,rgba(0,0,0,.02) 1px,transparent 1px);
  background-size:3px 3px,4px 4px;
  opacity:.6
}

/* CTA area — generous top space, baseline padding before giant text */
.final-section{
  position:relative;z-index:2;
  padding:8rem 0 5rem
}
.final-inner{position:relative;z-index:3}

#final-cta .body-text{max-width:600px;margin:0 auto 0}

/* Meta pills */
.final-meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.6rem;margin:1.8rem 0 2.2rem
}
.final-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.06em;
  padding:.45rem 1rem;border-radius:8px;
  background:var(--card-bg);border:1px solid var(--border);
  color:var(--text-muted);
  box-shadow:0 2px 0 var(--border)
}
.final-pill--accent{
  border-color:rgba(249,115,22,.35);color:var(--accent);
  background:rgba(249,115,22,.08);
  box-shadow:0 2px 0 rgba(249,115,22,.2)
}
.final-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px rgba(249,115,22,.6);
  animation:vl-pulse 1.6s ease-in-out infinite
}

/* Giant VIBES MONEY watermark — full-bleed, edge-to-edge, behind footer */
/* Giant brand watermark — bleeding footer text / full-bleed wordmark.
   Uses pure `vw` sizing so the overflow ratio stays IDENTICAL on every
   screen: the V on the left and Y on the right bleed off the edges
   consistently (~8% each side = 116% total width).
   Pattern used by Linear, Vercel, Framer, Kakiyo. */
.final-giant-wrap{
  position:relative;width:100%;
  overflow:hidden;        /* symmetric horizontal clip */
  padding-top:.5rem;
  pointer-events:none;
  z-index:1;
  display:flex;justify-content:center;align-items:flex-end
}
.final-giant{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-style:normal;
  /* 19vw: "VIBES MONEY" (~6.12em wide) renders at 116% of viewport width.
     Result: consistent ~8% bleed on each side, from mobile to ultrawide. */
  font-size:19vw;
  letter-spacing:-.045em;line-height:.85;
  text-transform:uppercase;white-space:nowrap;
  color:var(--text);opacity:.12;
  user-select:none;margin:0;
  /* Fade: top of letters fully visible, baseline fully transparent */
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.92) 40%,
    rgba(0,0,0,.35) 78%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.92) 40%,
    rgba(0,0,0,.35) 78%,
    transparent 100%)
}
[data-theme="light"] .final-giant{opacity:.1}

/* Footer — sits above the giant watermark, no hard line */
.footer{
  position:relative;z-index:3;
  background:transparent;border-top:none;
  padding:1.4rem 0 1.4rem;
  margin-top:0
}
.footer-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:1rem;
  padding-top:1.4rem;
  border-top:1px dashed rgba(148,163,184,.15)
}
[data-theme="light"] .footer-inner{border-top-color:rgba(100,116,139,.18)}
.footer-links{display:flex;gap:1.2rem}
.footer-links a{
  font-weight:600;font-size:.78rem;letter-spacing:.04em;
  color:var(--text-muted);opacity:.55;transition:all .2s ease
}
.footer-links a:hover{opacity:1;color:var(--accent)}
.footer-copy{font-weight:500;font-size:.72rem;color:var(--text-muted);opacity:.4}
.footer-giant{display:none}

/* -- SCROLL ANIMATIONS -------------------------------------------- */
[data-animate]{opacity:0;transform:translateY(22px);transition:opacity .5s ease-out,transform .5s ease-out}
[data-animate="pop"]{transform:scale(.92)}
[data-animate].visible{opacity:1;transform:translateY(0) scale(1)}

/* -- GRAIN TEXTURE (CSS noise via repeating-conic-gradient) ------- */
body::after{
  content:"";position:fixed;inset:0;
  z-index:9998;pointer-events:none;
  background:repeating-conic-gradient(#fff 0 .0001%,transparent 0 .0004%) 50% 50%/200px 200px,
             repeating-conic-gradient(#fff 0 .0001%,transparent 0 .0005%) 50% 50%/300px 300px;
  opacity:.04
}
[data-theme="light"] body::after{
  background:repeating-conic-gradient(#000 0 .0001%,transparent 0 .0004%) 50% 50%/200px 200px,
             repeating-conic-gradient(#000 0 .0001%,transparent 0 .0005%) 50% 50%/300px 300px;
  opacity:.03
}

/* -- MARKER HIGHLIGHT (clean underline band, no text deformation) - */
.marker-highlight{
  display:inline;
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.2) 55%,rgba(249,115,22,.2) 90%,transparent 90%);
  padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone
}
.marker-highlight--green{
  background:linear-gradient(180deg,transparent 55%,rgba(16,185,129,.2) 55%,rgba(16,185,129,.2) 90%,transparent 90%)
}
[data-theme="light"] .marker-highlight{
  background:linear-gradient(180deg,transparent 55%,rgba(234,88,12,.25) 55%,rgba(234,88,12,.25) 90%,transparent 90%)
}
[data-theme="light"] .marker-highlight--green{
  background:linear-gradient(180deg,transparent 55%,rgba(5,150,105,.25) 55%,rgba(5,150,105,.25) 90%,transparent 90%)
}


/* -- KEYFRAMES ---------------------------------------------------- */
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}

/* -- RESPONSIVE --------------------------------------------------- */
@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .proof-numbers{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .tk-grid{grid-template-columns:repeat(2,1fr)}
}
/* ==================================================================
   MOBILE STICKY CTA — Appears after scrolling past the hero.
   Conversion-focused: always within thumb reach on phones.
================================================================== */
.mobile-sticky-cta{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%) translateY(120%);
  z-index:9500;pointer-events:none;opacity:0;
  display:none;align-items:center;gap:.6rem;
  padding:.85rem 1.2rem;
  background:var(--accent);color:#fff;
  border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.02em;white-space:nowrap;
  box-shadow:
    0 4px 0 rgba(194,65,12,.5),
    0 10px 24px rgba(249,115,22,.4);
  transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .3s ease;
  max-width:calc(100vw - 1.2rem)
}
.mobile-sticky-cta.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;pointer-events:auto
}
.mobile-sticky-cta:hover,.mobile-sticky-cta:active{
  background:var(--accent-active)
}
.msc-dot{
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.6);
  animation:vl-pulse 1.6s ease-in-out infinite;flex-shrink:0
}
.msc-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.msc-arrow{flex-shrink:0;opacity:.9}

/* Only show on mobile viewports */
@media(max-width:768px){
  .mobile-sticky-cta{display:flex}
}

/* ====================================================================
   MOBILE RESPONSIVE — Tablet & phone optimizations
   Mobile-first conversion: big tap targets, clean stacking, reduced
   motion complexity, compact rhythm.
==================================================================== */

/* Tablet (≤ 1024px) */
@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .proof-numbers{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .tk-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile (≤ 768px) — single column, compact padding */
@media(max-width:768px){
  /* ---- Global rhythm ---- */
  .section{padding:3rem 0}
  .container{padding:0 1.1rem}
  .container--narrow{padding:0 1.1rem}

  /* ---- Typography ---- */
  .h3d{font-size:clamp(1.9rem,8vw,3rem);text-shadow:0 2px 12px rgba(0,0,0,.3)}
  .h3d-sm,.section-title{font-size:clamp(1.55rem,5.6vw,2.2rem);line-height:1.15}
  .body-text{font-size:1rem;line-height:1.6}

  /* ---- Hero ---- */
  #hero{padding-top:5rem;min-height:auto}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-ctas .btn{width:100%;justify-content:center;padding:1rem 1.2rem;font-size:.95rem}
  .hero-proof{flex-direction:column;align-items:center;gap:.6rem}
  .hero-card{padding:1rem 1.1rem;margin-left:-.3rem;margin-right:-.3rem}
  .snake-canvas{display:none}

  /* ---- Site grid: tighter pattern on mobile for visual scale ---- */
  .site-grid{background-size:60px 60px}
  .sg-cell{width:59px;height:59px}
  .sg-cell--1{top:121px;left:181px}           /* 2*60+1, 3*60+1 — visible */
  .sg-cell--2{display:none}                    /* too far right — hidden */
  .sg-cell--3{top:241px;left:61px}             /* 4*60+1, 1*60+1 — visible */
  .sg-cell--4{top:421px;left:241px}            /* 7*60+1, 4*60+1 — visible */
  .sg-cell--5{display:none}                    /* too far right — hidden */

  /* ---- Sections: generic grids collapse ---- */
  .pain-grid{grid-template-columns:1fr}
  .tools-grid,.included-grid,.project-grid,.founders-grid{grid-template-columns:1fr}

  /* ---- Proof banner — 1 col stack at ≤768 (3 cards balanced) ---- */
  .proof-v2{padding:3rem 0}
  .proof-brand-card{padding:1.2rem 1.4rem}
  .proof-logo{height:38px}
  .proof-grid{grid-template-columns:1fr;gap:.85rem}
  .proof-card{padding:1.4rem 1.3rem 1.2rem}
  .proof-card-lbl{font-size:.62rem}
  .proof-num{font-size:clamp(2rem,8vw,2.6rem)}
  .proof-tagline{font-size:.95rem}

  /* ---- Projects — single column, iframe scaled for tap-friendly preview ---- */
  .project-grid{grid-template-columns:1fr !important;gap:1rem !important;max-width:none !important}
  .browser-frame{border-radius:10px}
  .browser-body--iframe{height:260px}
  .bp-iframe{transform:scale(.34)}
  .browser-frame--live:hover .bp-iframe{transform:scale(.36)}
  .projects-soon-note{font-size:.74rem;padding:.6rem .9rem;margin-top:1.2rem}

  /* ---- Problem / Promise / Included / Takeaway / Apply — paper wrappers ---- */
  .pain-paper,.promise-paper,.inc-paper,.tk-paper,.apply-paper{
    padding:1.8rem 1.1rem;border-radius:14px
  }

  /* ---- Stack (tools) ---- */
  .stack-grid{grid-template-columns:1fr;gap:.9rem}
  .stack-flow{display:none} /* arrows hidden, stacking is self-explanatory */
  .stack-card{padding:1.2rem 1.2rem 1.3rem}
  .stack-card-step{font-size:1.4rem}
  .stack-card-head h4{font-size:1.05rem}
  .stack-pill{padding:.45rem .8rem;font-size:.75rem} /* bigger tap target */

  /* ---- Mobile activation: show mobile-only components ---- */
  .flight-column-mobile{display:block}
  .ticket-progress-mobile{display:flex}

  /* ============================================================
     METHOD TICKET — MOBILE
     Single rail · clean plane · aerated cards · phase pips cockpit
     Geometry: ticket-main padding-left 2.8rem (44.8px) creates the
     gutter. Rail centered at x=20px (left:18, width:4). Milestone
     dots align ON the rail. Plane sits at x=20px (set by JS).
  ============================================================ */
  .method-ticket{border-radius:14px;margin:0 .2rem}
  .ticket-edge{display:none}
  .ticket-header{
    flex-direction:column;align-items:flex-start;gap:.6rem;
    padding:1.1rem 1.2rem 1rem;text-align:left
  }
  .ticket-header__right{align-items:flex-start;text-align:left}

  .ticket-body{display:block;padding:0;position:relative;grid-template-columns:1fr}
  .ticket-body::after{display:none}
  .ticket-stub{display:none}

  .ticket-main{
    position:relative;
    padding:1.6rem 1.1rem 1.8rem 2.8rem !important;
    min-height:0
  }
  .ticket-main::before{display:none}        /* desktop dashed line off */
  .ticket-route{display:none}                /* desktop SVG route off */

  /* Plane — repositioned via JS at left:20px (rail center) */
  .ticket-rocket{
    width:30px;height:38px;
    left:0;
    transform:translate(-50%,-50%) rotate(0deg)
  }

  /* === Mobile flight rail ============================== */
  .flight-column-mobile{
    display:block;position:absolute;
    left:18px;top:1.4rem;bottom:1.4rem;width:4px;
    z-index:0;pointer-events:none
  }
  .flight-column-mobile__line{
    position:absolute;inset:0;
    border-radius:2px;
    background:color-mix(in srgb,var(--muted) 24%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 12%,transparent)
  }
  .flight-column-mobile__fill{
    position:absolute;left:0;right:0;top:0;
    height:0;border-radius:2px;
    background:var(--phase-color,var(--violet));
    box-shadow:
      0 0 8px color-mix(in srgb,var(--phase-color,var(--violet)) 30%,transparent),
      inset 0 0 0 1px color-mix(in srgb,var(--phase-color,var(--violet)) 60%,transparent);
    transition:box-shadow .5s ease;
    will-change:height
  }

  /* === Mobile sticky cockpit — compact 2-row credential ===== */
  .ticket-progress-mobile{
    display:flex;flex-direction:column;gap:.42rem;
    position:fixed;top:64px;left:.5rem;right:.5rem;z-index:8500;
    margin:0;padding:.65rem .9rem .6rem;
    border-radius:12px;
    background:color-mix(in srgb,var(--paper-1) 96%,transparent);
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid var(--hairline);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 6px 18px rgba(0,0,0,.22);
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    color:var(--ink-soft);
    opacity:0;transform:translateY(-120%);
    transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
    pointer-events:none
  }
  [data-theme="light"] .ticket-progress-mobile{
    background:color-mix(in srgb,var(--paper-1) 94%,transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),
      0 6px 18px rgba(80,55,20,.16)
  }
  .ticket-progress-mobile.is-active{opacity:1;transform:translateY(0);pointer-events:auto}

  /* Row 1: ✈ S04/10 · Phase 02 · Setup & Build */
  .ticket-progress-mobile .tpm__row{
    display:flex;align-items:center;gap:.52rem;
    font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
    white-space:nowrap;min-width:0
  }
  .ticket-progress-mobile .tpm__crest{
    color:var(--accent);font-size:.95rem;letter-spacing:0;
    flex-shrink:0;line-height:1;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 45%,transparent))
  }
  .ticket-progress-mobile .tpm__count{
    color:var(--phase-color,var(--accent));font-weight:800;flex-shrink:0;
    font-variant-numeric:tabular-nums lining-nums;letter-spacing:.08em;
    transition:color .5s ease
  }
  .ticket-progress-mobile .tpm__sep{
    color:var(--muted);opacity:.5;flex-shrink:0;letter-spacing:0
  }
  .ticket-progress-mobile .tpm__phase{
    color:var(--phase-color,var(--accent));flex-shrink:0;letter-spacing:.18em;
    padding:.16rem .44rem;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--phase-color,var(--accent)) 36%,transparent);
    background:color-mix(in srgb,var(--phase-color,var(--accent)) 11%,transparent);
    transition:color .5s ease, border-color .5s ease, background .5s ease
  }
  .ticket-progress-mobile .tpm__phase-name{
    color:var(--ink);font-weight:700;letter-spacing:.02em;text-transform:none;
    font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:.84rem;
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    transition:opacity .35s ease
  }
  @media(max-width:360px){
    .ticket-progress-mobile .tpm__phase-name{display:none}
  }

  /* Row 2: stable progress track + soft session title.
     Keep the track column fixed so title changes never move the pips. */
  .ticket-progress-mobile .tpm__row--2{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(7.2rem,44%);
    column-gap:.7rem;align-items:center
  }
  .ticket-progress-mobile .tpm__bar{
    width:100%;height:5px;border-radius:3px;
    background:color-mix(in srgb,var(--muted) 22%,transparent);
    position:relative;overflow:visible;
    min-width:0;justify-self:stretch
  }
  /* Bar fill — phase-segmented gradient anchored at FIXED pip positions
     (40% violet end, 70% blue end, 96% green end). The fill always covers
     the full bar width but is clipped from the right via --bar-clip (set by
     JS = 100 - progress%). As the user scrolls, the clip recedes and reveals
     each phase color at its rightful position — violet stays violet, blue
     replaces nothing, etc. The 3 pips sit ON these boundaries unchanged. */
  .ticket-progress-mobile .tpm__bar-fill{
    position:absolute;inset:0;width:100%;
    background:linear-gradient(90deg,
      var(--violet) 0,
      var(--violet) 40%,
      var(--blue) 40%,
      var(--blue) 70%,
      var(--green-phase) 70%,
      var(--green-phase) 100%);
    border-radius:inherit;
    box-shadow:0 0 8px color-mix(in srgb,var(--phase-color,var(--accent)) 35%,transparent);
    clip-path:inset(0 var(--bar-clip,100%) 0 0);
    transition:clip-path .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease
  }
  /* 3 phase pips on the bar — positioned dynamically by JS via --pip-pos
     to match the actual milestone Y / journey ratio. Last pip clamped just
     before the end so it never overlaps the title text on the right. */
  .ticket-progress-mobile .tpm__pip{
    position:absolute;top:50%;
    --pip-size:8px;
    width:var(--pip-size);height:var(--pip-size);border-radius:50%;
    left:var(--pip-pos,50%);
    transform:translate(-50%,-50%);
    background:var(--paper-2);
    border:1.5px solid color-mix(in srgb,var(--muted) 45%,transparent);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--paper-1) 95%,transparent);
    transition:background .35s ease, border-color .35s ease, box-shadow .4s ease;
    z-index:2;
    pointer-events:none;
    contain:layout paint
  }
  .ticket-progress-mobile .tpm__pip[data-phase="violet"]{--pip-pos:40%}
  .ticket-progress-mobile .tpm__pip[data-phase="blue"]{--pip-pos:70%}
  .ticket-progress-mobile .tpm__pip[data-phase="green"]{--pip-pos:96%}
  .ticket-progress-mobile .tpm__pip[data-phase="violet"].is-stamped{
    background:var(--violet);border-color:var(--violet);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--paper-1) 92%,transparent),0 0 8px color-mix(in srgb,var(--violet) 60%,transparent);
    transform:translate(-50%,-50%)
  }
  .ticket-progress-mobile .tpm__pip[data-phase="blue"].is-stamped{
    background:var(--blue);border-color:var(--blue);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--paper-1) 92%,transparent),0 0 8px color-mix(in srgb,var(--blue) 60%,transparent);
    transform:translate(-50%,-50%)
  }
  .ticket-progress-mobile .tpm__pip[data-phase="green"].is-stamped{
    background:var(--green-phase);border-color:var(--green-phase);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--paper-1) 92%,transparent),0 0 8px color-mix(in srgb,var(--green-phase) 60%,transparent);
    transform:translate(-50%,-50%)
  }

  .ticket-progress-mobile .tpm__title{
    color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;
    font-family:'Space Grotesk',sans-serif;font-size:.78rem;line-height:1.2;
    width:100%;max-width:none;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    opacity:.78;transition:opacity .35s ease
  }
  /* Subtle fade pulse when title or phase-name changes */
  .ticket-progress-mobile.is-changing .tpm__title,
  .ticket-progress-mobile.is-changing .tpm__phase-name{opacity:.35}

  /* === Phase milestones — dot pinned ON the rail ============= */
  .m-milestone[data-gate]{
    width:100% !important;max-width:none !important;
    margin:2.6rem 0 1.1rem 0 !important;
    padding:1.1rem 1.15rem 1rem !important;
    text-align:left !important;
    display:flex !important;flex-direction:column !important;
    align-items:flex-start !important;justify-items:flex-start !important;
    gap:.45rem !important;position:relative;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 4px 0 rgba(154,52,18,.22),
      0 8px 18px rgba(0,0,0,.25) !important
  }
  /* Phase dot pinned ON rail center (-32px = rail center 20px in card coords) */
  .m-milestone[data-gate]::before{
    content:'';position:absolute;
    left:-32px;top:50%;transform:translateY(-50%);
    width:14px;height:14px;border-radius:50%;
    background:currentColor;
    box-shadow:
      0 0 0 3px var(--paper-1),
      0 0 0 4px currentColor,
      0 0 12px color-mix(in srgb,currentColor 38%,transparent);
    z-index:2
  }
  .m-milestone[data-gate] h3{font-size:1.1rem !important;line-height:1.2}
  .m-range{font-size:.62rem}

  /* === Session cards — aerated, calm inactive, premium active === */
  .m-card--stamp{
    width:100% !important;
    margin:1.8rem 0 !important;
    padding:1.3rem 1.3rem 1.25rem !important;
    position:relative;
    border-radius:11px !important;
    border-left:3px solid transparent !important;
    opacity:.58;
    transition:
      opacity .45s cubic-bezier(.16,1,.3,1),
      transform .5s cubic-bezier(.16,1,.3,1),
      border-color .35s ease,
      box-shadow .5s cubic-bezier(.16,1,.3,1)
  }
  .m-card--stamp.is-active{
    opacity:1;
    transform:translateY(-2px);
    border-left-color:var(--phase-color,var(--accent)) !important;
    border-color:var(--phase-color,var(--accent));
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--paper-1) 84%,white) 0%,
      color-mix(in srgb,var(--paper-2) 84%,white) 100%
    );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 4px 0 color-mix(in srgb,var(--phase-color,var(--accent)) 30%,rgba(154,52,18,.22)),
      0 14px 28px rgba(0,0,0,.30) !important
  }
  [data-theme="light"] .m-card--stamp.is-active{
    background:linear-gradient(180deg,#FCF3DC,#F6E7C0);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      0 4px 0 color-mix(in srgb,var(--phase-color,var(--accent)) 28%,rgba(154,52,18,.20)),
      0 14px 28px rgba(40,25,5,.18) !important
  }
  /* Connector tick — only on active card, bridges card edge to rail */
  .m-card--stamp::before{
    content:'';position:absolute;
    left:-3px;top:50%;transform:translateY(-50%);
    width:0;height:2px;
    background:var(--phase-color,var(--accent));
    border-radius:1px;
    z-index:1;opacity:0;
    transition:width .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, left .45s cubic-bezier(.16,1,.3,1)
  }
  .m-card--stamp.is-active::before{
    left:-22px;width:19px;opacity:1;
    box-shadow:0 0 8px color-mix(in srgb,var(--phase-color,var(--accent)) 60%,transparent)
  }
  /* Sticker pip top-right disabled on mobile — duplicates badge */
  .m-card--stamp::after{display:none !important}
  .m-card__corner{display:none}
  .m-card--stamp h4{font-size:1.02rem !important;line-height:1.3 !important;margin-bottom:.42rem !important}
  .m-card--stamp p{font-size:.86rem !important;line-height:1.55 !important}
  .tl-badge{font-size:.7rem;padding:.28rem .5rem;flex-shrink:0}

  /* Plane — clean. No vertical glow trail (would clutter rail). */
  .ticket-rocket::before{display:none !important}

  /* === Visa stamps — mobile arrival animation ============= */
  .m-deliverable.m-stamp{
    position:relative;
    width:150px !important;height:150px !important;
    margin:2.4rem auto 2rem !important;
    transform:rotate(-3deg) scale(.7) !important;
    left:-1rem;
    opacity:.45;
    transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .5s ease, box-shadow .5s ease
  }
  .m-deliverable.m-stamp.is-filled{
    transform:rotate(-3deg) scale(1) !important;
    opacity:1
  }
  .m-deliverable.m-stamp::before{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    border:2px solid currentColor;opacity:0;
    pointer-events:none
  }
  .m-deliverable.m-stamp.is-filled::before{
    animation:stampPulseRing .9s ease-out forwards
  }
  @keyframes stampPulseRing{
    0%{opacity:.7;transform:scale(.85)}
    100%{opacity:0;transform:scale(1.18)}
  }
  .m-stamp--finale{width:170px !important;height:170px !important}
  .m-stamp__title{font-size:1.2rem !important}
  .m-stamp__sub{font-size:.65rem !important}
  .m-stamp__label{font-size:.52rem !important}

  /* Plane arrival bump — premium feedback at each phase end */
  @keyframes planeArrivalBump{
    0%{transform:translate(-50%,-50%) scale(1)}
    35%{transform:translate(-50%,-50%) scale(1.3) rotate(6deg)}
    65%{transform:translate(-50%,-50%) scale(1.08) rotate(-3deg)}
    100%{transform:translate(-50%,-50%) scale(1) rotate(0)}
  }
  .ticket-rocket.is-arriving{
    animation:planeArrivalBump .7s cubic-bezier(.34,1.56,.64,1) !important
  }

  .ticket-footer{padding:.8rem 1rem;font-size:.6rem;gap:.6rem;flex-wrap:wrap}

  /* === Reduced motion — respect user preferences =========== */
  @media (prefers-reduced-motion:reduce){
    .flight-column-mobile__fill{transition:none}
    .ticket-rocket-bob{animation:none !important}
    .ticket-rocket.is-arriving{animation:none !important}
    .m-card--stamp,
    .m-card--stamp.is-active,
    .m-card--stamp::before{transition:none}
    .m-card--stamp.is-active{transform:none}
    .m-deliverable.m-stamp{transition:opacity .3s ease}
    .m-deliverable.m-stamp.is-filled::before{animation:none}
    .ticket-progress-mobile,
    .ticket-progress-mobile .tpm__bar-fill,
    .ticket-progress-mobile .tpm__pip{transition:opacity .2s ease}
  }

  /* ---- For-who comparison ---- */
  .fw-grid{grid-template-columns:1fr;gap:1rem}
  .fw-card{padding:1.8rem 1.4rem}

  /* ---- Takeaway bento ---- */
  .tk-grid{grid-template-columns:1fr}

  /* ---- Apply steps — mobile cinema timeline (same recipe as #problem / #included) ---- */
  .apply-paper{padding:2.2rem 1.2rem 1.6rem !important;border-radius:14px !important}
  .apply-header{margin-bottom:2rem !important}
  .apply-steps{
    flex-direction:column;align-items:stretch;
    gap:0;
    padding-left:2.6rem !important;position:relative;
    perspective:1200px;
    perspective-origin:50% 0%
  }
  /* Static accent line replaced by SVG strip */
  .apply-steps::before{display:none}

  /* SVG strip — slim corridor, path with sway between dots */
  .apply-svg{
    display:block;
    position:absolute;
    left:13px;top:0;width:20px;height:100%;
    pointer-events:none;z-index:0;overflow:visible
  }
  .apply-svg .apply-draw-line{
    fill:none;stroke-linecap:round;stroke-linejoin:round
  }
  .apply-svg .apply-draw-line--track{
    stroke:color-mix(in srgb,var(--accent) 22%,transparent);
    stroke-width:1.8;
    stroke-dasharray:1 6;
    opacity:.55
  }
  .apply-svg .apply-draw-line--halo{
    stroke:var(--accent);
    stroke-width:9;
    opacity:.18;
    filter:blur(3.5px)
  }
  .apply-svg .apply-draw-line--active{
    stroke:var(--accent);
    stroke-width:3;
    opacity:1
  }

  .apply-step{
    max-width:none;
    padding:1.2rem 1.3rem;
    margin-bottom:1.1rem;
    text-align:left !important;
    position:relative;
    display:flex;align-items:flex-start;gap:.85rem;
    backface-visibility:hidden;
    transition:
      border-color .5s ease .25s,
      box-shadow .55s ease .2s,
      background .4s ease;
    opacity:1
  }
  /* Subtle alternance: steps 1, 3 left / step 2 right */
  .apply-step[data-apply-side="left"]{margin-left:0;margin-right:0}
  .apply-step[data-apply-side="right"]{margin-left:8px;margin-right:0}

  /* Dot on the rail — stamped activation with rotation + offset shadow */
  .apply-step::before{
    content:'';position:absolute;
    left:-25px;top:24px;
    width:12px;height:12px;border-radius:50%;
    background:var(--bg-alt);
    border:2px solid color-mix(in srgb,var(--accent) 32%,var(--border));
    box-shadow:0 0 0 3px var(--bg-alt);
    z-index:2;
    transition:
      background .5s cubic-bezier(.16,1,.3,1),
      border-color .5s ease,
      box-shadow .55s ease
  }
  .apply-step.is-active::before{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:
      0 0 0 3px var(--bg-alt),
      0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent),
      0 0 22px color-mix(in srgb,var(--accent) 55%,transparent),
      1px 1px 0 color-mix(in srgb,var(--accent) 90%,black);
    animation:applyDotStamp .65s cubic-bezier(.34,1.56,.64,1) forwards
  }
  @keyframes applyDotStamp{
    0%{transform:scale(.7) rotate(-2deg)}
    35%{transform:scale(1.45) rotate(2deg)}
    70%{transform:scale(1.18) rotate(.5deg)}
    100%{transform:scale(1.22) rotate(1.5deg)}
  }

  /* Pulse ring — double wave */
  .apply-step::after{
    content:'';position:absolute;
    left:-25px;top:24px;
    width:12px;height:12px;border-radius:50%;
    border:2px solid var(--accent);
    opacity:0;pointer-events:none;z-index:2
  }
  .apply-step.is-active::after{animation:applyNodePulse 1.15s ease-out}
  @keyframes applyNodePulse{
    0%{opacity:.85;transform:scale(.6);border-width:2.5px}
    35%{opacity:.45;transform:scale(1.7);border-width:2px}
    65%{opacity:.18;transform:scale(2.5);border-width:1.5px}
    100%{opacity:0;transform:scale(3.4);border-width:1px}
  }

  /* Revealed border + shadow */
  .apply-step.is-revealed{
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
    box-shadow:
      0 5px 0 color-mix(in srgb,var(--accent) 24%,var(--border)),
      0 12px 26px rgba(0,0,0,.2)
  }

  .apply-step-num{
    width:38px !important;height:38px !important;
    font-size:1.2rem !important;
    margin-bottom:0 !important;flex-shrink:0
  }
  .apply-step-body{flex:1;min-width:0}
  .apply-step-body h4{font-size:1rem !important;margin-bottom:.25rem !important}
  .apply-step-body p{font-size:.84rem !important;line-height:1.5 !important}
  .apply-step-arrow{display:none}

  /* ---- Pricing ticket ---- */
  .pt-compare{grid-template-columns:1fr;gap:1rem}
  .pt-cmp{padding:1.4rem 1.2rem 1.1rem}
  .pt-ticket-body{grid-template-columns:1fr;padding:1.8rem 0}
  .pt-main,.pt-stub{padding:0 1.2rem}
  .pt-divider{
    width:100%!important;height:1px!important;
    margin:1.4rem 0!important;
    background:repeating-linear-gradient(to right,var(--border) 0,var(--border) 4px,transparent 4px,transparent 9px)!important
  }
  .pt-ticket-head{padding:.7rem .9rem}
  .pt-ticket-head .pt-ticket-tag{font-size:.62rem}
  .pt-price-amount{font-size:clamp(2.4rem,11vw,3.4rem)}
  .pt-ticket-foot{padding:1.3rem 1rem}
  .pt-cta{font-size:.82rem;padding:.95rem 1.2rem;width:100%;justify-content:center}
  .pt-benefits li{font-size:.9rem}
  .pt-stub-card{padding:.9rem 1rem}

  /* ---- FAQ ---- */
  .faq-grid{grid-template-columns:1fr}
  .faq-q{padding:1rem 1.1rem;font-size:.95rem;gap:.7rem}
  .faq-toggle{width:32px;height:32px} /* bigger tap target */
  .faq-a-inner{padding:0 1.1rem 1rem;padding-top:.9rem}

  /* ---- Final CTA + footer ---- */
  .final-section{padding:4.5rem 0 2rem}
  /* .final-giant font-size stays at 19vw — consistent bleed across all sizes */
  .final-pill{font-size:.7rem;padding:.35rem .8rem}
  .final-meta{gap:.4rem;margin:1.4rem 0 1.8rem}
  .footer{margin-top:0;padding:1rem 0 1rem}
  .footer-inner{flex-direction:column;gap:1rem;text-align:center;padding-top:1rem}
  .final-giant-wrap{padding-top:.4rem}

  /* ---- Other generic helpers ---- */
  .hide-mobile{display:none}
  .proof-numbers{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .placeholder-img{min-height:200px}

  /* ---- Touch targets globally ---- */
  .btn{min-height:48px}
  .btn--sm{min-height:40px}

  /* ---- Data-sticker dots: smaller on mobile so they don't crowd ---- */
  [data-sticker]::before,
  [data-sticker]::after{width:7px;height:7px}
  [data-sticker="top"]::before,
  [data-sticker="top"]::after{top:10px}
  [data-sticker="top"]::before{left:10px}
  [data-sticker="top"]::after{right:10px}
}

/* Small phones (≤ 480px) — tightest spacing */
@media(max-width:480px){
  .section{padding:2.5rem 0}
  .h3d{font-size:clamp(1.8rem,9vw,2.4rem)}
  .h3d-sm,.section-title{font-size:clamp(1.4rem,6vw,1.8rem)}
  .proof-numbers{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:1fr;gap:.6rem}
  .proof-num{font-size:clamp(1.9rem,7.5vw,2.3rem)}
  .proof-brand-card{padding:1rem 1.1rem}
  .proof-logo{height:32px}
  .num{font-size:2rem}
  .hero-card{margin-left:0;margin-right:0;padding:1rem .9rem}
  .pain-paper,.promise-paper,.inc-paper,.tk-paper,.apply-paper{
    padding:1.4rem .9rem;border-radius:12px
  }
  .stack-card{padding:1.1rem 1rem 1.2rem}
  .fw-card{padding:1.4rem 1.2rem}
  .tk-card{padding:1.3rem 1.1rem}
  .pt-price-amount{font-size:clamp(2.2rem,10vw,3rem)}
  .pt-ticket{border-radius:14px}
  .pt-ticket-head .pt-ticket-dots{display:none}
  .faq-q-text{font-size:.9rem}
  .final-section{padding:3.5rem 0 2rem}
  /* .final-giant stays at 19vw — consistent bleed ratio on all screens */
  .final-pill{font-size:.66rem;padding:.3rem .7rem}

  /* Hide a sticker dot or two on very small screens to avoid clutter */
  [data-sticker="frame"]::before{
    background:
      radial-gradient(circle 4px at 10px 10px,var(--accent) 99%,transparent 100%),
      radial-gradient(circle 4px at calc(100% - 10px) 10px,var(--accent) 99%,transparent 100%),
      radial-gradient(circle 4px at 10px calc(100% - 10px),var(--accent) 99%,transparent 100%),
      radial-gradient(circle 4px at calc(100% - 10px) calc(100% - 10px),var(--accent) 99%,transparent 100%)
  }
}

/* Very small phones (≤ 360px) — last-resort compaction */
@media(max-width:360px){
  .container{padding:0 .9rem}
  .section{padding:2rem 0}
  .h3d{font-size:clamp(1.6rem,9vw,2.2rem)}
  .stack-pill{font-size:.68rem;padding:.35rem .6rem}
  .pt-cta{font-size:.78rem}
}

/* ================================================================
   FOUNDERS — PILOT CREDENTIAL V3
   Editorial mission credential. Premium paper, hairline hierarchy,
   single foil security strip (--foil-image override-ready).
================================================================ */
.founders-intro{
  max-width:720px;margin:0 auto 2.8rem;text-align:center;
  color:var(--text-muted);font-size:1.04rem;line-height:1.6
}
#founders{scroll-margin-top:76px}

.pilot-dossier{
  position:relative;
  max-width:calc(var(--container) - 1rem);
  margin:0 auto;
  isolation:isolate
}
.pilot-dossier__rail{
  display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap;
  max-width:780px;margin:0 auto 1.7rem;padding:.6rem 0;
  border-top:1px dashed var(--border);
  border-bottom:1px dashed var(--border);
  color:var(--text-muted);
  font-family:ui-monospace,"SF Mono","Fira Code",monospace;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700
}
.pilot-dossier__rail span{
  display:inline-flex;align-items:center;gap:.85rem;white-space:nowrap
}
.pilot-dossier__rail span:not(:last-child)::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7
}

.passport-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.4vw,1.8rem);
  margin:0 auto;align-items:start;
  perspective:1400px;perspective-origin:50% 30%
}

/* === The credential ============================================= */
.passport{
  /* Defaults = dark mode (midnight parchment) */
  --paper-1:#1F1812;
  --paper-2:#28201A;
  --ink:#F0E2C4;
  --ink-soft:#D6C29C;
  --muted:#A89578;
  --hairline:rgba(200,165,105,.16);
  --foil-1:#C9A76A;
  --foil-2:#F4D88E;
  --foil-3:#7A5A2C;
  --watermark:rgba(200,165,105,.18);
  --foil-shift:0;
  position:relative;isolation:isolate;overflow:hidden;
  min-width:0;
  background:linear-gradient(180deg,var(--paper-1) 0%,var(--paper-2) 100%);
  color:var(--ink);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:1.7rem 1.7rem 1.4rem;
  transform-style:preserve-3d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -28px 50px rgba(0,0,0,.18),
    0 4px 0 rgba(154,52,18,.32),
    0 14px 28px rgba(0,0,0,.42);
  transition:box-shadow .4s cubic-bezier(.16,1,.3,1)
}
[data-theme="light"] .passport{
  --paper-1:#F5ECD3;
  --paper-2:#EBDBB1;
  --ink:#1F140A;
  --ink-soft:#3A2A18;
  --muted:#7A6244;
  --hairline:rgba(120,85,40,.20);
  --foil-3:#9C7A40;
  --watermark:rgba(95,68,30,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -28px 50px rgba(70,44,12,.04),
    0 4px 0 rgba(154,52,18,.26),
    0 12px 24px rgba(80,55,20,.16)
}
.passport:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -28px 50px rgba(0,0,0,.18),
    0 5px 0 rgba(154,52,18,.40),
    0 24px 50px rgba(0,0,0,.50)
}
[data-theme="light"] .passport:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -28px 50px rgba(70,44,12,.04),
    0 5px 0 rgba(154,52,18,.36),
    0 22px 40px rgba(40,25,5,.30)
}

/* Paper grain — theme-adaptive */
.passport::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 22% 28%,rgba(200,165,105,.05) .6px,transparent 1px),
    radial-gradient(circle at 78% 64%,rgba(200,165,105,.04) .6px,transparent 1px);
  background-size:6px 6px,8px 8px;
  mix-blend-mode:soft-light;opacity:.7
}
[data-theme="light"] .passport::before{
  background-image:
    radial-gradient(circle at 22% 28%,rgba(60,40,15,.045) .6px,transparent 1px),
    radial-gradient(circle at 78% 64%,rgba(90,65,28,.035) .6px,transparent 1px);
  mix-blend-mode:multiply;opacity:.85
}

/* Guilloché watermark — uses --watermark token */
.passport::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:340px;height:340px;border-radius:50%;
  right:-100px;bottom:-120px;
  background:repeating-radial-gradient(
    circle at 50% 50%,
    var(--watermark) 0 1px,
    transparent 1px 9px
  );
  opacity:.4;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,black 0%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%,black 0%,transparent 70%)
}
[data-theme="light"] .passport::after{opacity:.16}
.passport[data-person="alexis"]::after{
  right:auto;bottom:auto;left:-100px;top:-110px
}
.passport > *:not(.passport__foil):not(.passport__edge){position:relative;z-index:1}

/* === Foil security strip ========================================
   Top edge, 7px tall — DEFAULT: CSS metallic gradient.
   To plug a generated holographic asset:
     style="--foil-image:url('assets/foil/pilot-001.webp')"
   Recommended source dimension: 1672 × 56 px AVIF/WebP, iridescent.
================================================================== */
.passport__foil{
  position:absolute;top:0;left:0;right:0;height:6px;z-index:3;pointer-events:none;
  background:var(--foil-image,
    linear-gradient(90deg,
      var(--foil-3) 0%,
      var(--foil-2) 22%,
      var(--foil-1) 38%,
      var(--foil-2) 54%,
      var(--foil-3) 72%,
      var(--foil-1) 88%,
      var(--foil-3) 100%
    )
  );
  background-size:200% 100%;
  background-position:calc(var(--foil-shift, 0) * 1%) center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(80,55,20,.4);
  transition:background-position .45s cubic-bezier(.2,.8,.2,1)
}
.passport__foil::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:linear-gradient(90deg,transparent 0,rgba(120,85,40,.55) 14%,rgba(120,85,40,.55) 86%,transparent 100%)
}

/* Right-edge engraved security stripe (CSS micro-texture) */
.passport__edge{
  position:absolute;top:7px;right:0;bottom:0;width:14px;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0,rgba(120,90,50,.06) 50%,transparent 100%),
    repeating-linear-gradient(0deg,transparent 0 9px,rgba(120,90,50,.18) 9px 10px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,black 18%,black 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,black 18%,black 82%,transparent 100%);
  opacity:.55
}

/* === Eyebrow strap — single-line credential ===================== */
.passport__eyebrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.4rem 0 1.2rem;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--muted)
}
.passport__credential{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--ink-soft)
}
.passport__crest{color:var(--accent);font-size:.85rem;letter-spacing:0;line-height:1}
.passport__authority{
  color:var(--muted);font-size:.55rem;letter-spacing:.22em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* === Body — portrait + identity ================================ */
.passport__body{
  display:grid;grid-template-columns:140px minmax(0,1fr);
  gap:1.5rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--hairline);
  align-items:start
}
.passport__photo{
  position:relative;aspect-ratio:4/5;margin:0;
  background:color-mix(in srgb,var(--paper-1) 92%,white);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:5px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 6px 16px rgba(0,0,0,.32)
}
[data-theme="light"] .passport__photo{
  background:#F0E1BD;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 6px 16px rgba(40,25,5,.16)
}
.passport__photo::after{
  content:"";position:absolute;top:9px;right:9px;z-index:2;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.85),
    0 0 0 4px rgba(249,115,22,.18)
}
.passport__photo picture{display:block;width:100%;height:100%}
.passport__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:3px;
  filter:contrast(1.02) saturate(.94)
}
.passport[data-person="alexis"] .passport__photo img{object-position:center 12%}
.passport[data-person="pierre"] .passport__photo img{object-position:center 28%}

.passport__identity{min-width:0;padding-top:.18rem}
.passport__role{
  margin:0 0 .75rem;
  color:var(--accent);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700
}
.passport__name{
  margin:0 0 .9rem;
  color:var(--ink);
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-size:clamp(1.95rem,3.4vw,2.5rem);
  line-height:.94;letter-spacing:-.012em
}
.passport__name span{display:block}
.passport__name span:first-child{
  font-weight:400;font-style:italic;font-size:.74em;
  color:var(--ink-soft);letter-spacing:0;line-height:1.05;
  margin-bottom:.05em
}
.passport__mission{
  margin:0;color:var(--ink-soft);
  font-size:.94rem;line-height:1.5;max-width:34ch
}
.passport__proofs{
  display:flex;flex-wrap:wrap;gap:.42rem;
  margin:.95rem 0 0;padding:0;list-style:none;
  max-width:36ch
}
.passport__proofs li{
  display:inline-flex;align-items:center;gap:.36rem;
  min-height:24px;padding:.28rem .5rem;
  color:var(--ink-soft);
  background:rgba(255,255,255,.045);
  border:1px solid var(--hairline);
  border-radius:999px;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  line-height:1.1
}
[data-theme="light"] .passport__proofs li{background:rgba(255,255,255,.34)}
.passport__proofs li::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--accent);flex:0 0 auto
}

/* === Footer — credit + minimal icon links ====================== */
.passport__footer{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.1rem;flex-wrap:wrap
}
.passport__credit{
  display:flex;flex-direction:column;gap:.2rem;min-width:0
}
.passport__org{
  color:var(--ink);
  font-family:'Playfair Display',Georgia,serif;
  font-weight:800;font-size:1rem;line-height:1.1;letter-spacing:.005em
}
.passport__since{
  color:var(--muted);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  line-height:1.4
}

.passport__links{display:flex;gap:.45rem;align-items:center}
.passport__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  color:var(--ink-soft);
  background:rgba(255,255,255,.06);
  border:1px solid var(--hairline);
  border-radius:50%;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease
}
[data-theme="light"] .passport__link{background:rgba(255,255,255,.28)}
.passport__link svg{width:14px;height:14px;display:block}
.passport__link:hover{
  transform:translateY(-1px);
  background:var(--ink);color:var(--paper-1);
  border-color:var(--ink)
}
.passport__link--site:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.passport__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* === Callout under cards (kept simple, hairline only) =========== */
.founders-callout{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;
  max-width:880px;margin:2rem auto 0;padding:1.15rem 0 0;
  border:0;border-top:1px dashed var(--border);border-radius:0;
  background:transparent;box-shadow:none;text-align:left;
  color:var(--text-muted);font-size:1rem;line-height:1.6
}
.founders-callout::before{display:none}
.founders-callout:hover{transform:none;box-shadow:none}
.founders-callout-kicker{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:.34rem .62rem;
  border:1px solid rgba(249,115,22,.28);
  border-radius:999px;
  color:var(--accent);background:var(--accent-subtle);
  font-family:ui-monospace,"SF Mono","Fira Code",monospace;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  white-space:nowrap
}
.founders-callout p{margin:0}
.founders-callout strong{color:var(--text);font-weight:700}
.founders-callout-brand{
  background:none;border:0;padding:0;
  color:var(--accent);
  font-family:'Playfair Display',Georgia,serif;font-weight:900;font-style:italic
}
.founders-callout-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
  min-height:38px;padding:.52rem .78rem;
  border:1px solid rgba(249,115,22,.34);
  border-radius:999px;
  color:var(--accent);
  background:var(--accent-subtle);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  white-space:nowrap;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease
}
.founders-callout-cta:hover{
  transform:translateY(-1px);
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.founders-callout-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* === Responsive ================================================= */
@media (max-width:960px){
  .pilot-dossier{max-width:680px}
  .passport-grid{grid-template-columns:1fr;gap:1.1rem}
}
@media (max-width:640px){
  .founders-intro{margin-bottom:2rem}
  .pilot-dossier__rail{
    justify-content:flex-start;flex-wrap:nowrap;overflow:hidden;
    font-size:.55rem;letter-spacing:.18em;gap:.65rem
  }
  .pilot-dossier__rail span{flex:0 0 auto}
  .passport{padding:1.3rem 1.15rem 1.1rem;border-radius:12px}
  .passport__edge{width:10px}
  .passport__body{grid-template-columns:104px minmax(0,1fr);gap:1rem;padding-bottom:1rem}
  .passport__eyebrow{font-size:.55rem;letter-spacing:.18em;padding:.3rem 0 .9rem}
  .passport__authority{font-size:.5rem}
  .passport__role{font-size:.6rem;letter-spacing:.2em;margin-bottom:.55rem}
  .passport__name{font-size:1.65rem;margin-bottom:.7rem}
  .passport__mission{font-size:.85rem}
  .passport__proofs{gap:.34rem;margin-top:.72rem}
  .passport__proofs li{font-size:.47rem;letter-spacing:.1em;padding:.24rem .42rem}
  .passport__org{font-size:.92rem}
  .passport__footer{gap:.7rem;padding-top:.9rem}
  .passport__link{width:30px;height:30px}
  .founders-callout{grid-template-columns:1fr;gap:.75rem;font-size:.94rem}
  .founders-callout-kicker{width:fit-content}
  .founders-callout-cta{width:fit-content}
}


/* -- A11Y --------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-animate]{opacity:1;transform:none}
  #hero .badge,#hero .h3d-line,#hero .hero-tagline,#hero .hero-card,#hero .hero-ctas .btn,#hero .proof-chip{opacity:1}
  .m-node{opacity:1!important;transform:none!important}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}


/* ==================================================================
   BLOG — expérience de lecture éditoriale
   Système : grille 3 colonnes (retour · prose 680px · ToC sticky)
================================================================== */

/* ── Blog hero (common to index + article) ───────────────────── */
.blog-body{padding-top:60px}
.blog-hero{padding:5rem 2rem 3rem;border-bottom:1px solid var(--border);position:relative}
.blog-hero-inner{max-width:var(--container);margin:0 auto}
.blog-breadcrumb{
  display:flex;align-items:center;gap:.5rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:1.5rem
}
.blog-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .15s ease}
.blog-breadcrumb a:hover{color:var(--accent)}
.blog-breadcrumb span{opacity:.5}

.blog-hero h1{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1;letter-spacing:-.02em;
  max-width:900px
}
.blog-hero h1 em{font-style:italic;color:var(--accent)}
.blog-hero-sub{
  margin-top:1.2rem;max-width:720px;font-size:1.15rem;
  color:var(--text-muted);line-height:1.55
}

/* ── Blog list (index) ───────────────────────────────────────── */
.blog-list{
  max-width:var(--container);margin:0 auto;padding:4rem 2rem 6rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem
}
.blog-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  padding:1.8rem 1.8rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease
}
.blog-card:hover{
  transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 16px 40px rgba(0,0,0,.12)
}
.blog-card-media{
  position:relative;aspect-ratio:1200/630;margin:-.6rem -.6rem .8rem;
  overflow:hidden;border:1px solid var(--border);background:var(--bg-alt);
  box-shadow:5px 5px 0 rgba(154,52,18,.28)
}
.blog-card-media picture,.blog-card-media img{display:block;width:100%;height:100%}
.blog-card-media img{object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.blog-card:hover .blog-card-media img{transform:scale(1.035)}
.blog-card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(255,255,255,.18)
}
.blog-card-meta{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-num);font-weight:700;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--text-muted);font-weight:600
}
.blog-card-meta .cat{color:var(--accent);font-weight:700}
.blog-card-meta .dot{opacity:.4}
.blog-card h2,
.blog-card h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;
  font-size:1.5rem;line-height:1.15;letter-spacing:-.015em;color:var(--text);
  margin:.2rem 0
}
.blog-card p{font-size:.95rem;color:var(--text-muted);line-height:1.55;flex:1}
.blog-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1rem;border-top:1px dashed var(--border);
  font-size:.82rem;color:var(--text-muted)
}
.blog-card-footer .read-more{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;
  color:var(--accent)
}
.blog-card-footer .read-more::after{content:" →";transition:margin-left .2s ease}
.blog-card:hover .read-more::after{margin-left:.2em}

/* Featured card (larger, spans 2 cols) */
.blog-card--featured{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);
  align-items:stretch;
  padding:0;
  overflow:hidden
}
.blog-card--featured .featured-side{
  position:relative;background:var(--accent);color:#fff;
  padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
  min-height:280px
}
.blog-card--featured .featured-side::after{
  content:"★";position:absolute;right:-.1em;bottom:-.3em;
  font-family:'Playfair Display',serif;font-size:12rem;opacity:.08;
  font-style:italic;line-height:1
}
.blog-card--featured .featured-side strong{
  position:absolute;left:1.6rem;top:1.6rem;z-index:2;
  background:rgba(11,15,26,.86);color:#fff;padding:.65rem .8rem;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;opacity:.9
}
.blog-card--featured .blog-card-media{
  width:100%;height:100%;min-height:300px;margin:0;border-color:rgba(255,255,255,.22);
  box-shadow:none
}
.blog-card--featured .featured-content{
  min-width:0;
  padding:2.4rem 2.2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  justify-content:flex-start
}
.blog-card--featured h2,
.blog-card--featured h3{font-size:clamp(1.55rem,2.35vw,2rem);line-height:1.08}
@media (max-width: 720px){
  .blog-card--featured{display:flex;flex-direction:column}
  .blog-card--featured .featured-side{padding:2rem 1.5rem;min-height:auto}
  .blog-card--featured .blog-card-media{min-height:auto}
  .blog-card--featured .featured-content{padding:2rem 1.5rem}
  .blog-card--featured h2,
  .blog-card--featured h3{font-size:1.5rem}
}

/* ── Article layout ──────────────────────────────────────────── */
.article-layout{
  max-width:1500px;margin:0 auto;padding:3rem clamp(1.5rem,3vw,3rem) 5rem;
  display:grid;
  grid-template-columns:minmax(120px,160px) minmax(0,780px) minmax(260px,320px);
  column-gap:clamp(3rem,5vw,5.5rem);
  align-items:start;justify-content:center
}
@media (max-width:1180px){
  .article-layout{
    grid-template-columns:1fr;
    gap:2rem;
    padding:2rem clamp(1rem,4vw,2.5rem) 4rem;
    /* Constrain wrapper so header, cover, prose et TOC s'alignent à la même largeur lecture */
    max-width:840px
  }
  /* Hide the desktop left sidebar entirely on mobile/tablet: back is already in
     the breadcrumb above, share moves to a footer block injected at the end of
     the prose (cf. JS initArticleShareFooter) — the title becomes the first
     visible content under the breadcrumb. */
  .article-aside-left{display:none!important}
  /* Hide the desktop TOC on mobile: the FAB + bottom-sheet replace it.
     Otherwise we'd have two TOCs (one inline at the bottom, one floating). */
  .article-toc{display:none!important}
  .article-toc-dot{display:none!important}
}

/* Bottom share/back footer — injected by JS, visible UNIQUEMENT sur les
   layouts collapsed (≤1180px) où la sidebar sticky de gauche est cachée.
   Sur desktop, on garde la sidebar sticky et ce footer reste hidden. */
.article-share-footer{display:none}
@media (max-width:1180px){
  .article-share-footer{
    display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
    margin:3rem 0 0;padding:1.6rem 0 0;
    border-top:1px dashed var(--border);
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700
  }
}
.article-share-footer-label{color:var(--text-muted);opacity:.8}
.article-share-footer-links{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.article-share-footer-links a{
  color:var(--text);text-decoration:none;
  padding:.45rem .8rem;
  border:1px solid var(--border);border-radius:999px;
  transition:color .15s ease,border-color .15s ease,background .15s ease
}
.article-share-footer-links a:hover,
.article-share-footer-links a:focus-visible{
  color:var(--accent);border-color:var(--accent);background:rgba(249,115,22,.06)
}
.article-share-footer-back{
  margin-left:auto;color:var(--text-muted);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .15s ease
}
.article-share-footer-back:hover{color:var(--accent)}
.article-share-footer-back::before{content:"←"}
@media (max-width:540px){
  .article-share-footer{flex-direction:column;align-items:flex-start;gap:.9rem}
  .article-share-footer-back{margin-left:0}
}

/* Left sticky: back to blog + share */
.article-aside-left{
  position:sticky;top:100px;align-self:start;
  display:flex;flex-direction:column;gap:1.5rem;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:700
}
.article-back{
  color:var(--text-muted);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .15s ease
}
.article-back:hover{color:var(--accent)}
.article-back::before{content:"←"}
.article-share{display:flex;flex-direction:column;gap:.5rem}
.article-share-label{color:var(--text-muted);font-size:.62rem;opacity:.7}
.article-share a{
  color:var(--text);text-decoration:none;padding:.4rem 0;
  border-bottom:1px dashed var(--border);
  display:flex;align-items:center;gap:.5rem;
  transition:color .15s ease,border-color .15s ease
}
.article-share a:hover{color:var(--accent);border-color:var(--accent)}

/* Article main (prose) */
.article-main{min-width:0;width:100%}
.article-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.article-category{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;color:var(--accent-deep,var(--accent));
  padding:.3rem .7rem;border:1px solid var(--accent);border-radius:2px;
  background:rgba(249,115,22,.05);margin-bottom:1.2rem
}
.article-title{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:clamp(2.25rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:1rem
}
.article-title em{font-style:italic;color:var(--accent)}
.article-subtitle{
  font-size:1.24rem;color:var(--text-muted);line-height:1.55;max-width:760px;
  font-weight:400
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;margin-top:2rem;
  font-family:var(--font-num);font-size:.92rem;letter-spacing:.02em;
  color:var(--text-muted);font-weight:700;
  font-variant-numeric:tabular-nums lining-nums
}
.article-meta .author{display:flex;align-items:center;gap:.5rem}
.article-meta .author-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.article-meta time{text-transform:none;letter-spacing:.08em}

.article-cover{
  position:relative;
  aspect-ratio:1200/630;
  margin:0 0 3.2rem;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-alt);
  box-shadow:7px 7px 0 rgba(154,52,18,.24),0 18px 46px rgba(0,0,0,.12)
}
.article-cover picture,
.article-cover img{
  display:block;
  width:100%;
  height:100%
}
.article-cover img{object-fit:cover}
.article-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.18)
}
@media (max-width:720px){
  .article-cover{margin-bottom:2.2rem;box-shadow:5px 5px 0 rgba(154,52,18,.22)}
}

/* ── In-article static visuals ───────────── */
.vm-article-visual{
  max-width:760px;
  margin:2.5rem 0;
}
.vm-article-visual picture,
.vm-article-visual img{
  display:block;
  width:100%;
}
.vm-article-visual img{
  height:auto;
  border-radius:0;
  object-fit:contain
}
.vm-article-visual figcaption{
  margin:.6rem 0 0;
  max-width:620px;
  color:var(--text-muted);
  font-size:.84rem;
  line-height:1.55;
}
@media (max-width:720px){
  .vm-article-visual{margin:2.1rem 0}
  .vm-article-visual figcaption{font-size:.82rem}
}

/* Prose typography */
.prose{max-width:760px;font-size:1.12rem;line-height:1.78;color:var(--text)}
.prose > * + *{margin-top:1.4em}
.prose h2{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;
  font-size:1.85rem;line-height:1.15;letter-spacing:-.01em;
  margin-top:3rem;margin-bottom:.8rem;color:var(--text);scroll-margin-top:100px;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1
}
.prose h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:1.35rem;line-height:1.25;
  margin-top:2.4rem;margin-bottom:.5rem;color:var(--text);scroll-margin-top:100px;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1
}
.prose p{margin:1em 0}
/* Lead paragraph — premier paragraphe légèrement plus dense pour scannabilité.
   Pas de drop-cap : on lit un blog en diagonale, le ::first-letter géant casse le scan. */
.prose p:first-of-type{
  font-size:1.08em;line-height:1.7;
  color:var(--text);font-weight:500
}
/* Strong — bold + surlignage orange comme la landing (.pain-card-v p strong).
   Cohérence avec le hero "10 sessions live". Pas d'italique, pas de couleur orange,
   juste un highlight crème/orange en background derrière le mot. */
.prose strong{
  color:var(--text);
  font-weight:700;
  background:linear-gradient(180deg,transparent 55%,rgba(249,115,22,.18) 55%,rgba(249,115,22,.18) 92%,transparent 92%);
  padding:0 .12em;
  border-radius:1px
}
[data-theme="light"] .prose strong{
  background:linear-gradient(180deg,transparent 55%,rgba(234,88,12,.18) 55%,rgba(234,88,12,.18) 92%,transparent 92%)
}
/* Em — italique simple, pas d'orange. Sert au stress emphasis sans concurrencer le strong. */
.prose em{font-style:italic;color:inherit}
/* Chiffres — Playfair Display avec lining figures strict pour cohérence avec
   les chiffres des titres. Wrappés automatiquement par initBlogNumbers().
   Réglages : 0.96em compense la cap-height de Playfair, weight 700, et
   color:inherit pour que le chiffre matche TOUJOURS la couleur du contexte
   (texte muted dans la meta, accent dans un lien, var(--text) dans le body). */
.article-main .prose-num{
  font-family:var(--font-num);
  font-weight:700;
  font-style:normal;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  font-size:.96em;
  letter-spacing:-.005em;
  color:inherit
}
.article-main strong .prose-num{font-weight:800}
.article-main em .prose-num{font-style:italic}
/* Dans les titres et callouts qui sont déjà en Playfair, on garde un weight
   cohérent avec leur poids natif (h2: 800, h3: 700) — la classe ne s'y applique
   pas (skip dans le wrapper JS) mais lining-nums est forcé via les règles h2/h3. */
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--accent-deep,var(--accent-active))}
.prose ul,.prose ol{margin:1.2em 0;padding-left:1.5em}
.prose ul li,.prose ol li{margin:.4em 0;padding-left:.3em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{padding-left:1.5em;position:relative}
.prose ul li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
.prose ol{counter-reset:item}
.prose ol li{counter-increment:item;padding-left:2em;position:relative;list-style:none}
.prose ol li::before{
  content:counter(item,decimal-leading-zero);position:absolute;left:0;
  font-family:var(--font-num);font-weight:800;color:var(--accent);font-size:1em;
  font-variant-numeric:tabular-nums lining-nums
}
.prose blockquote{
  margin:2rem 0;padding:1.3rem 1.5rem;
  border-left:3px solid var(--accent);background:var(--card-bg);
  font-family:'Playfair Display',Georgia,serif;font-size:1.35rem;font-style:italic;
  line-height:1.4;color:var(--text)
}
.prose blockquote cite{
  display:block;margin-top:.8rem;font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);font-style:normal;font-weight:600
}
/* Inline code — token chip dans la palette accent */
.prose code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.86em;
  background:var(--accent-subtle);
  padding:.18em .42em;border-radius:5px;
  border:1px solid var(--border);
  color:var(--accent-deep,var(--accent));
  font-weight:600
}
/* Code blocks — paper/cream theme-aware, 3D push, header avec dot accent */
.prose pre{
  margin:2rem 0;
  padding:1.5rem 1.7rem 1.4rem;
  background:var(--bg-alt);
  color:var(--text);
  border:1px solid var(--border);border-radius:14px;
  overflow-x:auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.84rem;line-height:1.7;
  box-shadow:0 4px 0 var(--border),0 4px 14px rgba(0,0,0,.08);
  position:relative
}
[data-theme="light"] .prose pre{
  background:#F4EDDB;
  box-shadow:0 4px 0 var(--border),0 4px 14px rgba(90,60,20,.08)
}
/* Petit accent en haut à gauche — signe distinctif VibesMoney */
.prose pre::before{
  content:'';position:absolute;
  top:14px;left:14px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);opacity:.45
}
.prose pre::after{
  content:'';position:absolute;
  top:14px;left:30px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);opacity:.18
}
/* Le code lui-même neutralise les styles de l'inline code */
.prose pre code{
  background:transparent;border:none;padding:0;
  color:inherit;font-size:inherit;font-weight:inherit;
  display:block;padding-top:.6rem
}
.prose hr{border:none;border-top:1px dashed var(--border);margin:3rem 0}
.prose img{border-radius:10px;margin:2rem 0;max-width:100%}

/* Callouts — paper/3D-push consistent avec .pain-card-v de la landing */
.prose .callout{
  margin:2.5rem 0;padding:1.5rem 1.8rem;
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:14px;
  position:relative;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.12);
  transition:transform .25s ease,box-shadow .25s ease;
  font-style:normal
}
.prose .callout:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--border),0 8px 22px rgba(0,0,0,.18)
}
.prose .callout p{margin:0}
.prose .callout p + p{margin-top:.7rem}
.prose .callout-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;margin-bottom:.65rem;display:block
}
/* Tip — accent orange (default callout) */
.prose .callout--tip{
  border-color:rgba(249,115,22,.32);
  box-shadow:0 4px 0 rgba(249,115,22,.22),0 6px 16px rgba(249,115,22,.08)
}
.prose .callout--tip:hover{
  box-shadow:0 6px 0 rgba(249,115,22,.28),0 8px 22px rgba(249,115,22,.13)
}
.prose .callout--tip .callout-label{color:var(--accent-deep,var(--accent))}
/* Warn — orange profond (variant "attention", reste dans la palette brand) */
.prose .callout--warn{
  border-color:rgba(194,65,12,.42);
  box-shadow:0 4px 0 rgba(194,65,12,.28),0 6px 16px rgba(194,65,12,.10)
}
.prose .callout--warn:hover{
  box-shadow:0 6px 0 rgba(194,65,12,.34),0 8px 22px rgba(194,65,12,.14)
}
.prose .callout--warn .callout-label{color:#9A3412}
[data-theme="dark"] .prose .callout--warn .callout-label{color:#FB923C}
/* Note — neutre (gris/sépia, pas de couleur étrangère à la DA) */
.prose .callout--note{
  border-color:var(--border);
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.08)
}
.prose .callout--note:hover{
  box-shadow:0 6px 0 var(--border),0 8px 22px rgba(0,0,0,.14)
}
.prose .callout--note .callout-label{color:var(--text-muted)}

/* Pull quote */
.pullquote{
  margin:3rem -1rem;padding:2rem 2rem;text-align:center;
  font-family:'Playfair Display',Georgia,serif;font-weight:900;font-style:italic;
  font-size:1.8rem;line-height:1.2;color:var(--text);
  position:relative
}
.pullquote::before,.pullquote::after{
  content:'"';position:absolute;font-family:'Playfair Display',serif;
  font-size:5rem;color:var(--accent);opacity:.25;font-style:italic;line-height:1
}
.pullquote::before{top:-1rem;left:-.5rem}
.pullquote::after{bottom:-3.5rem;right:-.5rem}

/* ── T2.1  Reading Progress Bar (sticky top) ─────────────────── */
.vm-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:transparent;z-index:200;
  pointer-events:none
}
.vm-progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover,var(--accent)));
  transition:width .12s linear;
  box-shadow:0 0 8px rgba(249,115,22,.45)
}

/* ── T2.2  Section reveal (fade-up on scroll) ───────────────── */
.vm-reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform
}
.vm-reveal.is-visible{opacity:1;transform:none}
.vm-reveal--delay-1{transition-delay:.08s}
.vm-reveal--delay-2{transition-delay:.16s}
.vm-reveal--delay-3{transition-delay:.24s}

/* ── T2.3  Animated SVG line chart ──────────────────────────── */
.vm-chart{
  margin:2.5rem 0;padding:1.5rem 1.7rem 1.2rem;
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.08);
  position:relative
}
.vm-chart-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:1rem
}
.vm-chart-title{
  font-family:'Playfair Display',serif;font-weight:800;font-size:1.05rem;
  color:var(--text);margin:0
}
.vm-chart-legend{
  display:flex;gap:1rem;font-family:'JetBrains Mono',monospace;
  font-size:.72rem;color:var(--text-muted)
}
.vm-chart-legend span{display:inline-flex;align-items:center;gap:.4rem}
.vm-chart-legend i{
  width:14px;height:2px;display:inline-block;border-radius:1px
}
.vm-chart-legend i.is-without{background:#94A3B8}
.vm-chart-legend i.is-with{background:var(--accent)}
.vm-chart svg{width:100%;height:auto;display:block}
.vm-chart-axis{stroke:var(--border);stroke-width:1}
.vm-chart-grid{stroke:var(--border);stroke-width:.5;stroke-dasharray:2 4;opacity:.55}
.vm-chart-line{
  fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1)
}
.vm-chart.is-visible .vm-chart-line{stroke-dashoffset:0}
.vm-chart-line--without{stroke:#94A3B8}
.vm-chart-line--with{stroke:var(--accent);filter:drop-shadow(0 1px 4px rgba(249,115,22,.35))}
.vm-chart-dot{
  r:4;fill:var(--card-bg);stroke-width:2;
  opacity:0;transition:opacity .35s ease
}
.vm-chart.is-visible .vm-chart-dot{opacity:1;transition-delay:1.2s}
.vm-chart-dot--without{stroke:#94A3B8}
.vm-chart-dot--with{stroke:var(--accent)}
.vm-chart-tick{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  fill:var(--text-muted);font-weight:600
}
.vm-chart-foot{
  margin-top:.8rem;font-size:.78rem;color:var(--text-muted);font-style:italic
}

/* ── T2.4  Stepper (active step on scroll) ──────────────────── */
.vm-stepper{
  margin:2.5rem 0;display:flex;flex-direction:column;gap:.7rem;
  position:relative;padding-left:38px
}
/* Timeline pointillée verticale qui relie les steps (à gauche) */
.vm-stepper::before{
  content:"";position:absolute;
  left:14px;top:30px;bottom:30px;width:1.5px;
  background:repeating-linear-gradient(to bottom,var(--border) 0 5px,transparent 5px 11px);
  opacity:.6;pointer-events:none
}
.vm-step{
  display:grid;grid-template-columns:60px 1fr;gap:1.4rem;
  align-items:start;
  padding:1.05rem 1.2rem;
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:12px;
  position:relative;
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease
}
/* Petit bullet brand sur la timeline gauche, 1 par step */
.vm-step::before{
  content:"";position:absolute;
  left:-28px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;
  background:var(--card-bg);
  border:2px solid var(--border);
  transition:border-color .35s ease,background .35s ease,transform .35s ease;
  z-index:1
}
.vm-step:hover{border-color:rgba(249,115,22,.22)}
.vm-step:hover::before{border-color:rgba(249,115,22,.45)}
.vm-step.is-active{
  border-color:rgba(249,115,22,.4);
  box-shadow:0 4px 14px rgba(249,115,22,.10);
  transform:translateX(2px)
}
.vm-step.is-active::before{
  background:var(--accent);border-color:var(--accent);
  transform:translateY(-50%) scale(1.2);
  box-shadow:0 0 0 3px rgba(249,115,22,.18)
}
/* Numéro outline → filled à l'activation (effet letterpress éditorial) */
.vm-step-num{
  font-family:var(--font-num);font-weight:900;font-size:2rem;
  text-align:center;line-height:1;
  -webkit-text-stroke:1.5px var(--accent);
  color:transparent;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.02em;
  transition:color .35s ease,-webkit-text-stroke-color .35s ease,transform .35s ease
}
.vm-step.is-active .vm-step-num{
  color:var(--accent);
  -webkit-text-stroke-color:transparent;
  transform:scale(1.06)
}
.vm-step-content{display:flex;flex-direction:column;gap:.2rem}
.vm-step-title{
  font-family:'Playfair Display',serif;font-weight:800;font-size:1.08rem;
  color:var(--text);line-height:1.2
}
.vm-step-time{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  color:var(--accent-deep,var(--accent));font-weight:700;
  margin-left:.6rem;display:inline-block
}
.vm-step-desc{font-size:.9rem;color:var(--text-muted);line-height:1.55}
@media (max-width:680px){
  .vm-stepper{padding-left:30px}
  .vm-stepper::before{left:10px}
  .vm-step::before{left:-23px;width:9px;height:9px}
  .vm-step{grid-template-columns:48px 1fr;gap:1rem}
  .vm-step-num{font-size:1.7rem}
}

/* ── T2.5  Diff slider (drag-to-reveal before/after) ───────── */
.vm-diff{
  margin:2.5rem 0;
  border:1px solid var(--border);border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.08);
  position:relative;
  user-select:none;
  background:var(--bg-alt)
}
[data-theme="light"] .vm-diff{background:#F4EDDB}
/* Frame en grid : les 2 sides occupent la même cellule, hauteur auto = max
   du contenu le plus long. Plus de coupure, l'utilisateur voit toute la spec. */
.vm-diff-frame{
  position:relative;
  display:grid;
  overflow:hidden;
  cursor:ew-resize
}
.vm-diff-side{
  grid-column:1;grid-row:1;
  width:100%;
  padding:1.5rem 1.7rem 1.7rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.84rem;line-height:1.7;
  color:var(--text)
}
.vm-diff-side h4{
  font-family:'Space Grotesk',sans-serif;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  margin:0 0 .8rem
}
.vm-diff-side--bad{background:var(--bg-alt)}
[data-theme="light"] .vm-diff-side--bad{background:#F4EDDB}
.vm-diff-side--bad h4{color:#9A3412}
.vm-diff-side--bad code{color:var(--text-muted);font-style:italic}
.vm-diff-side--good{
  background:var(--card-bg);
  clip-path:inset(0 0 0 50%);
  transition:clip-path .04s linear
}
.vm-diff-side--good h4{color:var(--accent-deep,var(--accent))}
.vm-diff-side--good code{color:var(--text);font-weight:500}
.vm-diff-side pre{margin:0;font-size:.8rem;line-height:1.65;white-space:pre-wrap}
.vm-diff-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;
  background:var(--accent);
  transform:translateX(-50%);
  z-index:3;pointer-events:none;
  box-shadow:0 0 8px rgba(249,115,22,.5)
}
.vm-diff-handle::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 4px 14px rgba(249,115,22,.5);
  display:flex;align-items:center;justify-content:center
}
.vm-diff-handle::after{
  content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#fff;font-size:14px;font-weight:900;z-index:1
}
.vm-diff-foot{
  display:flex;justify-content:space-between;
  padding:.8rem 1.4rem;
  background:var(--card-bg);
  border-top:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  color:var(--text-muted)
}
.vm-diff-foot strong{color:var(--text);font-weight:700;background:none;padding:0}

/* ── T3.1  CSS Loop animation card (mini "GIF" en code) ────── */
.vm-loop{
  display:flex;align-items:center;gap:1.2rem;
  padding:1rem 1.4rem;
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:12px;
  margin:1.6rem 0;
  font-family:'JetBrains Mono',monospace;font-size:.86rem;
  color:var(--text)
}
.vm-loop-vis{
  flex-shrink:0;width:60px;height:60px;
  border-radius:8px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  display:grid;place-items:center;
  position:relative;overflow:hidden
}
[data-theme="light"] .vm-loop-vis{background:#F4EDDB}

/* Variant : typing dots */
.vm-loop-typing{display:flex;gap:5px}
.vm-loop-typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  animation:vmLoopTyping 1.4s ease-in-out infinite
}
.vm-loop-typing span:nth-child(2){animation-delay:.2s}
.vm-loop-typing span:nth-child(3){animation-delay:.4s}
@keyframes vmLoopTyping{
  0%,80%,100%{transform:translateY(0);opacity:.3}
  40%{transform:translateY(-4px);opacity:1}
}

/* Variant : pulse check */
.vm-loop-check{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:18px;
  animation:vmLoopPulse 2.2s cubic-bezier(.4,0,.2,1) infinite
}
@keyframes vmLoopPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.5)}
  60%{box-shadow:0 0 0 14px rgba(249,115,22,0)}
}

/* Variant : bounce arrow */
.vm-loop-arrow{
  font-family:var(--font-num);font-weight:900;color:var(--accent);font-size:24px;
  animation:vmLoopArrow 1.6s ease-in-out infinite
}
@keyframes vmLoopArrow{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(8px)}
}

.vm-loop-text{flex:1;line-height:1.55}
.vm-loop-text strong{color:var(--text);font-weight:700;background:none;padding:0}

/* ── T3.2  Magnetic CTA (subtle pull toward cursor) ────────── */
.vm-magnetic{
  display:inline-block;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  will-change:transform
}

/* ── Reduce motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .vm-progress-bar{transition:none}
  .vm-reveal{opacity:1;transform:none;transition:none}
  .vm-chart-line{stroke-dashoffset:0;transition:none}
  .vm-chart-dot{opacity:1;transition:none}
  .vm-step{transition:none}
  .vm-diff-side--good{transition:none}
  .vm-loop-typing span,.vm-loop-check,.vm-loop-arrow{animation:none}
  .vm-magnetic{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   COMPOSANTS BLOG VISUELS — pure HTML/CSS/SVG, zéro lib externe
   T1: vm-terminal, vm-anatomy, vm-stat-flow  (typewriter, cascade, count-up)
   T2: vm-progress, vm-reveal, vm-chart-line, vm-stepper, vm-diff
   T3: vm-loop, vm-magnetic
   Tous theme-aware, scroll-triggered via IntersectionObserver,
   reduce-motion safe.
══════════════════════════════════════════════════════════════════ */

/* 1. TERMINAL DEMO ───────────────────────────────────────────── */
.vm-terminal{
  margin:2.5rem 0;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-alt);
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.10);
  overflow:hidden;
  font-family:'JetBrains Mono',ui-monospace,monospace
}
[data-theme="light"] .vm-terminal{background:#F4EDDB}
.vm-terminal-bar{
  display:flex;align-items:center;gap:6px;
  padding:.55rem .9rem;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.04)
}
[data-theme="dark"] .vm-terminal-bar{background:rgba(255,255,255,.025)}
.vm-tdot{width:11px;height:11px;border-radius:50%;display:inline-block;opacity:.7}
.vm-tdot--r{background:#FF5F57}
.vm-tdot--y{background:#FFBD2E}
.vm-tdot--g{background:#28C840}
.vm-tbar-title{margin-left:.7rem;font-size:.72rem;color:var(--text-muted);font-weight:600;letter-spacing:.04em}
.vm-terminal-body{padding:1.1rem 1.3rem;font-size:.85rem;line-height:1.85;color:var(--text)}
.vm-tline{display:block}
.vm-tline--cmd{margin-bottom:.6rem;display:flex;align-items:baseline;flex-wrap:wrap}
.vm-tprompt{color:var(--accent);font-weight:700;margin-right:.6em;flex-shrink:0}
.vm-tcmd{color:var(--text);font-weight:500}
.vm-tcursor{display:inline-block;color:var(--accent);font-weight:700;margin-left:.05em;animation:vmTblink 1s step-end infinite}
@keyframes vmTblink{50%{opacity:0}}
.vm-tline--out{opacity:0;transform:translateY(3px);transition:opacity .4s ease,transform .4s ease;color:var(--text-muted);font-weight:500}
.vm-tline--out.is-visible{opacity:1;transform:none}
.vm-tarrow{color:var(--accent);font-weight:700;margin-right:.5em}
.vm-tline--success{color:var(--text);font-weight:600}
.vm-tcheck{color:#10B981;font-weight:800;margin-right:.5em}
[data-theme="light"] .vm-tcheck{color:#047857}
.vm-terminal code{background:none;border:none;padding:0;color:var(--accent-deep,var(--accent));font-weight:600;font-size:inherit}

/* 2. ANATOMY STACK ─────────────────────────────────────────── */
.vm-anatomy{
  display:grid;grid-template-columns:1fr;gap:.65rem;
  margin:2.5rem 0
}
.vm-anatomy-card{
  display:grid;grid-template-columns:64px 1fr;align-items:center;gap:1.2rem;
  padding:1.05rem 1.4rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 3px 0 var(--border),0 4px 10px rgba(0,0,0,.06);
  opacity:0;transform:translateX(-10px);
  transition:opacity .55s ease,transform .55s ease,box-shadow .3s ease,border-color .3s ease;
  position:relative
}
.vm-anatomy-card.is-visible{opacity:1;transform:none}
.vm-anatomy-card:hover{
  border-color:rgba(249,115,22,.32);
  box-shadow:0 4px 0 rgba(249,115,22,.22),0 6px 14px rgba(249,115,22,.10)
}
.vm-anatomy-card:hover .vm-asection-num{color:var(--accent-deep,var(--accent))}
.vm-asection-num{
  font-family:var(--font-num);font-weight:900;font-size:1.85rem;
  color:var(--accent);opacity:.85;
  letter-spacing:-.02em;text-align:center;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
  transition:color .25s ease
}
.vm-asection-content{display:flex;flex-direction:column;gap:.15rem}
.vm-asection-title{
  font-family:'Playfair Display',serif;font-weight:800;font-size:1.12rem;
  color:var(--text);line-height:1.2
}
.vm-asection-desc{font-size:.9rem;color:var(--text-muted);line-height:1.5}

/* 3. STATS FLOW ─────────────────────────────────────────── */
.vm-stat-flow{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;
  margin:2.5rem 0;padding:1.7rem 1.5rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.10)
}
.vm-stat-cell{text-align:center;padding:.5rem}
.vm-stat-num{
  font-family:var(--font-num);font-weight:900;
  font-size:clamp(2.6rem,5.5vw,3.8rem);
  color:var(--text);line-height:1;display:block;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em
}
.vm-stat-cell--win .vm-stat-num{color:var(--accent)}
.vm-stat-unit{
  display:block;
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.25rem;font-weight:700;
  color:var(--text-muted);margin-top:.2rem
}
.vm-stat-cell--win .vm-stat-unit{color:var(--accent-deep,var(--accent))}
.vm-stat-label{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--text-muted);margin-top:.6rem
}
.vm-stat-arrow{color:var(--accent);width:64px;height:24px;opacity:0}
.vm-stat-arrow svg{width:100%;height:100%;display:block}
.vm-stat-arrow.is-visible{animation:vmArrowSlide .9s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes vmArrowSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (max-width:680px){
  .vm-stat-flow{grid-template-columns:1fr;gap:.4rem;padding:1.4rem 1rem}
  .vm-stat-arrow{transform:rotate(90deg);width:40px;justify-self:center}
  .vm-stat-arrow.is-visible{animation:none;opacity:1}
}

/* Reduce-motion : on désactive les animations, contenu visible direct */
@media (prefers-reduced-motion:reduce){
  .vm-tcursor{animation:none}
  .vm-tline--out{opacity:1;transform:none;transition:none}
  .vm-anatomy-card{opacity:1;transform:none;transition:none}
  .vm-stat-arrow{opacity:1;animation:none}
}

/* ── Tables (SEO-friendly, paper/3D-push DA) ─────────────────── */
.prose .prose-table-wrap{
  margin:2.5rem 0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--card-bg);
  box-shadow:0 4px 0 var(--border),0 6px 16px rgba(0,0,0,.10)
}
.prose table{
  width:100%;
  border-collapse:collapse;
  font-size:.94em;line-height:1.55;
  margin:0
}
.prose .prose-table-wrap > table{margin:0}
.prose thead{
  background:var(--accent-subtle);
  border-bottom:2px solid rgba(249,115,22,.28)
}
.prose th{
  padding:1rem 1.15rem;
  text-align:left;
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--accent-deep,var(--accent));
  vertical-align:middle
}
.prose td{
  padding:.9rem 1.15rem;
  border-top:1px solid var(--border);
  color:var(--text);vertical-align:top
}
.prose tbody tr:first-child td{border-top:none}
.prose tbody tr{transition:background .2s ease}
.prose tbody tr:hover{background:var(--accent-subtle)}
.prose td strong{color:var(--text);font-weight:700}
@media (max-width:680px){
  .prose .prose-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose table{min-width:560px}
}

/* ── ToC (right sticky, active-item tracker) ─────────────────── */
.article-toc{
  position:sticky;top:100px;align-self:start;
  font-size:.72rem;
  min-width:260px
}
.article-toc-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--text-muted);margin-bottom:1.2rem;display:block
}
/* Active indicator — VibesMoney star, glued to the right of the active link */
.article-toc-dot{
  position:absolute;right:-6px;left:auto;top:0;
  width:22px;height:22px;
  background:var(--accent);
  clip-path:polygon(50% 0%,58.333% 41.667%,100% 50%,58.333% 58.333%,50% 100%,41.667% 58.333%,0% 50%,41.667% 41.667%);
  filter:drop-shadow(0 1px 3px rgba(249,115,22,.45)) drop-shadow(0 8px 14px rgba(249,115,22,.22));
  pointer-events:none;z-index:3;opacity:0;
  transform:translate3d(0,0,0);
  transition:opacity .35s ease,transform .55s cubic-bezier(.34,1.56,.64,1);
  will-change:transform
}
.article-toc-dot.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){
  .article-toc-dot{transition:none}
}
.article-toc ol{list-style:none;padding:0;position:relative;z-index:1}
.article-toc ol li{margin:.2rem 0}
.article-toc ol li a{
  color:var(--text-muted);text-decoration:none;line-height:1.45;
  display:block;padding:.55rem .7rem .55rem 1.1rem;position:relative;
  font-family:'Space Grotesk',sans-serif;
  font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:500;
  border-radius:8px;
  transition:color .3s ease,background .3s ease;
  will-change:transform
}
.article-toc ol li a:hover{color:var(--text);background:rgba(249,115,22,.06)}
.article-toc ol li a.is-active{
  color:var(--text);font-weight:700;background:rgba(249,115,22,.13);
  box-shadow:inset 0 0 0 1px rgba(249,115,22,.18)
}
.article-toc ol li a.is-just-selected{
  animation:tocSelectPulse .55s cubic-bezier(.34,1.56,.64,1)
}
@keyframes tocSelectPulse{
  0%  { transform:scale(1);     background:rgba(249,115,22,.13) }
  35% { transform:scale(1.028); background:rgba(249,115,22,.22) }
  100%{ transform:scale(1);     background:rgba(249,115,22,.13) }
}
@media (prefers-reduced-motion:reduce){
  .article-toc ol li a.is-just-selected{animation:none}
}

/* ── Mobile TOC FAB + bottom-sheet ──────────────────────────────
   Visible only when the desktop TOC collapses (cf. .article-layout
   collapse à 1180px). Patte VibesMoney : papier crème, sticker-dot
   orange, JetBrains Mono uppercase. */
.article-toc-fab,
.article-toc-sheet,
.article-toc-backdrop{display:none}

@media (max-width:1180px){
  .article-toc-fab{
    display:inline-flex;align-items:center;gap:.6rem;
    position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;
    padding:.7rem .95rem .7rem 1rem;
    background:var(--bg);
    border:1.5px solid var(--text);
    border-radius:999px;
    color:var(--text);
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
    cursor:pointer;
    box-shadow:
      0 6px 0 -1px rgba(154,52,18,.85),
      0 14px 32px rgba(0,0,0,.18);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;
    -webkit-tap-highlight-color:transparent;
    will-change:transform
  }
  .article-toc-fab:active{
    transform:translateY(2px);
    box-shadow:
      0 4px 0 -1px rgba(154,52,18,.85),
      0 8px 18px rgba(0,0,0,.18)
  }
  /* Open state — squished cap, dot pulses, label slightly tilted */
  .article-toc-fab[aria-expanded="true"]{
    transform:translateY(3px) scale(.97);
    box-shadow:0 3px 0 -1px rgba(154,52,18,.85),0 5px 12px rgba(0,0,0,.18)
  }
  .article-toc-fab[aria-expanded="true"] .article-toc-fab-dot{
    animation:vmFabDotPulse 1.2s cubic-bezier(.4,0,.6,1) infinite
  }
  /* Press animation — fired via JS .is-pressing class for crisp tactile feedback */
  .article-toc-fab.is-pressing{
    animation:vmFabPress .42s cubic-bezier(.34,1.56,.64,1)
  }
  @keyframes vmFabPress{
    0%   { transform:translateY(0)    scale(1) }
    22%  { transform:translateY(5px)  scale(.92) }
    55%  { transform:translateY(-2px) scale(1.04) }
    78%  { transform:translateY(1px)  scale(.99) }
    100% { transform:translateY(0)    scale(1) }
  }
  @keyframes vmFabDotPulse{
    0%,100% { transform:scale(1);   box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text),0 0 0 0 rgba(249,115,22,.5) }
    50%     { transform:scale(1.18); box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text),0 0 0 6px rgba(249,115,22,0) }
  }
  .article-toc-fab-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text);
    transition:transform .25s cubic-bezier(.2,.8,.2,1)
  }
  .article-toc-fab-label{line-height:1}
  .article-toc-fab-counter{
    display:inline-flex;align-items:baseline;
    padding:.18rem .5rem;
    background:var(--text);color:var(--bg);
    border-radius:999px;
    font-family:var(--font-num),'JetBrains Mono',monospace;
    font-size:.72rem;font-weight:800;letter-spacing:.04em;
    font-variant-numeric:tabular-nums lining-nums
  }
  .article-toc-fab-counter-cur{color:var(--accent)}
  .article-toc-fab-counter-sep{opacity:.55;margin:0 .12rem}

  .article-toc-backdrop{
    display:block;
    position:fixed;inset:0;z-index:99;
    background:rgba(11,15,26,.42);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .25s ease
  }
  /* Enforce the [hidden] attribute over our display:block — sinon le backdrop
     reste à inset:0 en opacity:0 et capture tous les clics, y compris le FAB. */
  .article-toc-backdrop[hidden]{display:none}
  .article-toc-backdrop.is-open{opacity:1}

  .article-toc-sheet{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    max-height:78vh;
    padding:.6rem 1.2rem 1.6rem;
    background:var(--bg);
    border-top:1.5px solid var(--text);
    border-radius:22px 22px 0 0;
    box-shadow:0 -16px 50px rgba(0,0,0,.22);
    transform:translateY(102%);
    transition:transform .42s cubic-bezier(.18,1.04,.32,1.04);
    will-change:transform
  }
  .article-toc-sheet[hidden]{display:none}
  .article-toc-sheet.is-open{transform:translateY(0)}
  .article-toc-sheet.is-closing{
    transition:transform .26s cubic-bezier(.55,0,.6,.55);
    transform:translateY(102%)
  }
  .article-toc-sheet-handle{
    align-self:center;width:42px;height:4px;border-radius:999px;
    background:var(--text);opacity:.18;margin:.35rem 0 .9rem
  }
  .article-toc-sheet-header{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:0 .2rem .9rem;
    border-bottom:1px dashed var(--border)
  }
  .article-toc-sheet-label{
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
    color:var(--text-muted)
  }
  .article-toc-sheet-close{
    width:34px;height:34px;border-radius:50%;
    background:transparent;border:1.5px solid var(--border);
    color:var(--text);font-size:1.35rem;line-height:1;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    transition:border-color .15s ease,color .15s ease
  }
  .article-toc-sheet-close:hover,
  .article-toc-sheet-close:focus-visible{border-color:var(--accent);color:var(--accent)}

  .article-toc-sheet-list{
    list-style:none;margin:0;padding:.4rem 0 0;
    overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  .article-toc-sheet-list li{
    margin:0;padding:0;
    /* Stagger entry — replays every time the sheet opens via .is-open trigger */
    opacity:0;transform:translateY(14px)
  }
  .article-toc-sheet.is-open .article-toc-sheet-list li{
    animation:vmTocItemIn .48s cubic-bezier(.2,.9,.3,1.1) both;
    animation-delay:calc(80ms + var(--i,0) * 38ms)
  }
  @keyframes vmTocItemIn{
    0%   { opacity:0; transform:translateY(14px) }
    60%  { opacity:1; transform:translateY(-1px) }
    100% { opacity:1; transform:translateY(0) }
  }
  .article-toc-sheet-list li a{
    display:flex;align-items:baseline;gap:.85rem;
    padding:.85rem .25rem;
    color:var(--text);text-decoration:none;
    border-bottom:1px solid var(--border);
    transition:background .15s ease,color .15s ease,padding-left .22s cubic-bezier(.2,.8,.2,1)
  }
  .article-toc-sheet-list li:last-child a{border-bottom:none}
  .article-toc-sheet-list li a:hover{background:rgba(249,115,22,.05)}
  .article-toc-sheet-list li a.is-active{
    background:rgba(249,115,22,.10);
    color:var(--accent-deep,var(--accent));
    padding-left:.7rem;
    font-weight:600;
    position:relative
  }
  .article-toc-sheet-list li a.is-active::before{
    content:"";position:absolute;left:0;top:.85rem;bottom:.85rem;width:3px;
    background:var(--accent);border-radius:0 2px 2px 0;
    animation:vmTocActiveBar .42s cubic-bezier(.34,1.56,.64,1) backwards
  }
  @keyframes vmTocActiveBar{
    0%   { transform:scaleY(0);   transform-origin:top }
    100% { transform:scaleY(1);   transform-origin:top }
  }
  .article-toc-sheet-num{
    font-family:var(--font-num),'JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.06em;font-weight:700;
    color:var(--text-muted);min-width:1.6em;
    font-variant-numeric:tabular-nums lining-nums
  }
  .article-toc-sheet-list li a.is-active .article-toc-sheet-num{color:var(--accent)}
  .article-toc-sheet-text{
    flex:1;font-size:1rem;line-height:1.4
  }
  /* Reduced motion — disable all animations, keep functional state */
  @media (prefers-reduced-motion:reduce){
    .article-toc-fab,.article-toc-backdrop,.article-toc-sheet,
    .article-toc-fab.is-pressing,
    .article-toc-fab[aria-expanded="true"] .article-toc-fab-dot,
    .article-toc-sheet.is-open .article-toc-sheet-list li,
    .article-toc-sheet-list li a.is-active::before
    { animation:none!important;transition:none!important }
    .article-toc-sheet-list li{opacity:1;transform:none}
  }
}

/* ── Author bio ──────────────────────────────────────────────── */
.article-authors{
  max-width:760px;margin:4rem 0 0;padding:2rem 0;
  border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap
}
.article-author-card{display:flex;gap:1rem;align-items:center;flex:1;min-width:260px}
/* Author avatar — mini-passport style (rappelle la DA des cartes Fondateurs) */
.article-author-avatar{
  width:54px;aspect-ratio:3/4;
  background:#E8D4A8;
  padding:2px;
  border:1px solid #A8906A;
  box-shadow:
    0 0 0 3px #F3E6C6,
    0 0 0 4px #A8906A,
    0 3px 8px rgba(40,25,10,.22);
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);font-family:'Playfair Display',serif;font-weight:900;font-size:1.3rem;
  margin:4px 5px
}
.article-author-avatar picture{display:block;width:100%;height:100%}
.article-author-avatar img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02) saturate(.96);
  display:block
}
.article-author-card h4{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;
  margin-bottom:.15rem;color:var(--text)
}
.article-author-card p{font-size:.82rem;color:var(--text-muted);line-height:1.45;margin:0}

/* ── Related articles ────────────────────────────────────────── */
.article-related{
  max-width:var(--container);margin:0 auto;padding:4rem 2rem 5rem;
  border-top:1px solid var(--border)
}
.article-related h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.6rem;margin-bottom:2rem;letter-spacing:-.01em
}
.article-related-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem
}
/* Match the article-layout collapse for trailing sections so tablets/mobiles
   ne s'étalent pas edge-to-edge. Doit venir après la règle de base ci-dessus. */
@media (max-width:1180px){
  .article-related{max-width:840px;padding:3rem clamp(1rem,4vw,2.5rem) 4rem}
}
@media (max-width:720px){
  .article-layout{padding:1.5rem 1rem 3rem;gap:1.5rem}
  .article-related{padding:2.5rem 1rem 3rem}
}

/* ── Blog CTA (bottom) — floating + reveal ─────────────────── */
.blog-cta{
  max-width:860px;margin:6rem auto;padding:2.8rem 2rem 2.4rem;
  background:var(--accent);color:#fff;border-radius:18px;text-align:center;
  display:flex;flex-direction:column;gap:1rem;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:
    0 10px 0 -2px #9A3412,
    0 28px 60px rgba(154,52,18,.32),
    0 18px 40px rgba(0,0,0,.14);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform
}
.blog-cta:hover{
  transform:translateY(-4px);
  box-shadow:
    0 14px 0 -2px #9A3412,
    0 38px 80px rgba(154,52,18,.38),
    0 22px 48px rgba(0,0,0,.18)
}
/* When marked vm-reveal, blog-cta shares the entrance transition.
   Combine slight scale-in for "floats up from page" feel. */
.blog-cta.vm-reveal{
  opacity:0;
  transform:translateY(28px) scale(.985);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1)
}
.blog-cta.vm-reveal.is-visible{
  opacity:1;
  transform:translateY(0) scale(1)
}
.blog-cta.vm-reveal.is-visible:hover{
  transform:translateY(-4px) scale(1)
}
@media (prefers-reduced-motion:reduce){
  .blog-cta,.blog-cta.vm-reveal{transition:none;transform:none;opacity:1}
  .blog-cta:hover{transform:none}
}
.blog-cta::before{
  content:"★";position:absolute;right:-.15em;top:-.2em;
  font-family:'Playfair Display',serif;font-size:14rem;opacity:.1;
  font-style:italic;line-height:1
}
.blog-cta h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:1.8rem;letter-spacing:-.01em;position:relative;z-index:1
}
.blog-cta p{opacity:.9;max-width:540px;line-height:1.55;position:relative;z-index:1}
.blog-cta .btn{
  background:#fff;color:var(--accent);padding:.8rem 1.6rem;
  font-weight:700;border-radius:8px;text-decoration:none;
  box-shadow:0 4px 0 #9A3412;transition:transform .15s ease;position:relative;z-index:1
}
.blog-cta .btn:hover{transform:translateY(-2px)}

/* ─────────────────────────────────────────────────────────────
   Blog hub refonte — nav cats, piliers, sections, CTA inline
   Réutilise les tokens existants. Aucun nouveau token.
   ───────────────────────────────────────────────────────────── */

/* Hero compact (variante du hero existant, padding réduit) */
.blog-hero--compact{padding:3.5rem 2rem 2rem}
.blog-hero--compact h1{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.blog-hero--compact .blog-hero-sub{font-size:1.05rem;max-width:680px;margin-top:.9rem}

/* ─── Journal shell — 2-col aside sticky + main grid ─────────── */
.blog-list-section .blog-section-head{
  max-width:1320px
}
.blog-journal-shell{
  max-width:1320px;
  margin:0 auto;
  padding:0 2rem;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:clamp(2rem,3vw,3.2rem);
  align-items:start
}
.blog-journal-main{min-width:0}
.blog-journal-main .blog-list{
  max-width:none;
  margin:0;
  padding:0;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:clamp(1.4rem,2vw,2rem)
}
/* Inner sections lose their own container/padding when inside journal-main */
.blog-journal-main .blog-section-head{
  max-width:none;
  margin:0;
  padding:0 0 1.4rem
}
.blog-journal-main .blog-cat-intro{
  padding:0 0 .8rem
}
.blog-journal-main .blog-cat-intro-inner{
  max-width:none;
  margin:0;
  padding:0
}
.blog-journal-main .blog-cat-explore{
  padding:2rem 0 0
}
.blog-journal-main .blog-cat-explore .article-related-grid{
  max-width:none;
  margin:0;
  padding:0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1rem,1.6vw,1.4rem)
}
.blog-journal-main .blog-cta-inline{
  margin:1.6rem 0 0;
  padding:1.6rem 1.6rem
}
/* Category page list: 1fr tracks share space equally (no empty grey cells).
   Cards capped via max-width to avoid huge stretch when alone. */
.blog-journal-main:has(.blog-cat-intro) .blog-list{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))
}
.blog-journal-main:has(.blog-cat-intro) .blog-list > .blog-card{
  max-width:540px;
  width:100%;
  justify-self:start
}
/* Orange CTA when inside main column: full column width, vertical breath */
.blog-journal-main > .blog-cta{
  margin:3rem 0;
  max-width:none;
  width:100%
}
.blog-rubrique-aside{
  position:sticky;
  top:96px;
  align-self:start;
  z-index:5
}
.blog-rubrique-aside-inner{
  display:flex;flex-direction:column;gap:1.25rem
}
.blog-rubrique-aside-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-muted);font-weight:700
}
.blog-rubrique-nav{
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.blog-rubrique-chip{
  position:relative;
  display:grid;
  grid-template-columns:18px 1fr auto;
  align-items:center;
  gap:.7rem;
  padding:.7rem .85rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
  text-decoration:none;
  color:var(--text-muted);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;
  line-height:1.2;
  transition:
    border-color .25s ease,
    color .25s ease,
    background .25s ease,
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .25s ease
}
.blog-rubrique-chip:hover{
  border-color:var(--accent);
  color:var(--text);
  transform:translateX(3px);
  box-shadow:4px 4px 0 rgba(154,52,18,.15)
}
.blog-rubrique-chip[aria-current="page"]{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
  box-shadow:4px 4px 0 rgba(0,0,0,.18)
}
.blog-rubrique-chip[aria-current="page"]:hover{
  transform:translateX(3px);
  box-shadow:6px 6px 0 rgba(0,0,0,.22)
}
.blog-rubrique-star{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:14px;height:14px;
  opacity:0;
  transform:rotate(-180deg) scale(.4);
  transition:
    opacity .35s ease,
    transform .55s cubic-bezier(.34,1.56,.64,1)
}
.blog-rubrique-star svg{
  width:100%;height:100%;
  fill:var(--accent);
  display:block
}
.blog-rubrique-chip:hover .blog-rubrique-star,
.blog-rubrique-chip[aria-current="page"] .blog-rubrique-star{
  opacity:1;
  transform:rotate(0deg) scale(1)
}
.blog-rubrique-chip[aria-current="page"] .blog-rubrique-star{
  animation:vmStarSpin 6s linear infinite
}
@keyframes vmStarSpin{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1)}
}
.blog-rubrique-name{
  line-height:1.25;
  min-width:0
}
/* In aside (vertical): allow wrapping over 2 lines, no ellipsis */
.blog-rubrique-aside .blog-rubrique-name{
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word
}
/* In horizontal bar (category pages): stay on one line */
.blog-rubrique-bar .blog-rubrique-name{
  white-space:nowrap
}
.blog-rubrique-count{
  font-size:.6rem;
  letter-spacing:.08em;
  padding:.18rem .5rem;
  border-radius:999px;
  background:rgba(249,115,22,.14);
  color:var(--accent);
  font-variant-numeric:tabular-nums lining-nums
}
.blog-rubrique-chip[aria-current="page"] .blog-rubrique-count{
  background:var(--accent);
  color:#fff
}
.blog-rubrique-aside-inner .blog-list-sort{
  padding-top:1rem;
  border-top:1px dashed var(--border);
  align-self:flex-start
}

/* Laptop étroit / petit desktop : aside reste mais plus compact */
@media (max-width:1180px){
  .blog-journal-shell{
    grid-template-columns:200px minmax(0,1fr);
    gap:clamp(1.4rem,2vw,2.2rem)
  }
  .blog-journal-main .blog-list{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr))
  }
}

/* Tablette : aside collapse en bandeau horizontal scrollable, grid 1-2 col */
@media (max-width:980px){
  .blog-list-section .blog-section-head{
    max-width:var(--container)
  }
  .blog-journal-shell{
    max-width:var(--container);
    grid-template-columns:1fr;
    gap:1.2rem;
    padding:0 1.5rem
  }
  .blog-rubrique-aside{position:static;top:auto;z-index:1}
  .blog-rubrique-aside-kicker{display:none}
  .blog-rubrique-aside-inner{gap:.6rem}
  .blog-rubrique-nav{
    flex-direction:row;
    overflow-x:auto;
    gap:.5rem;
    padding:.1rem .1rem .35rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch
  }
  .blog-rubrique-nav::-webkit-scrollbar{display:none}
  .blog-rubrique-chip{
    flex:0 0 auto;
    grid-template-columns:14px auto auto;
    border-radius:999px;
    padding:.55rem .9rem;
    font-size:.6rem
  }
  .blog-rubrique-chip:hover{transform:translateY(-1px)}
  .blog-rubrique-aside-inner .blog-list-sort{
    border-top:0;
    padding-top:.4rem;
    align-self:flex-start
  }
  .blog-journal-main .blog-list{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.2rem
  }
}

/* Mobile */
@media (max-width:720px){
  .blog-journal-shell{padding:0 1rem;gap:1rem}
  .blog-rubrique-chip{padding:.45rem .75rem;font-size:.56rem}
  .blog-journal-main .blog-list{
    grid-template-columns:1fr;
    gap:1rem
  }
}

/* ─── Rubrique bar — horizontal version for category pages ─── */
.blog-rubrique-bar{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem 2rem 1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
  border-bottom:1px dashed var(--border)
}
.blog-rubrique-bar .blog-rubrique-nav{
  flex-direction:row;
  flex-wrap:wrap;
  gap:.55rem
}
.blog-rubrique-bar .blog-rubrique-chip{
  grid-template-columns:14px auto auto;
  border-radius:999px;
  padding:.5rem .85rem
}
.blog-rubrique-bar .blog-rubrique-chip:hover{
  transform:translateY(-1px)
}
@media (max-width:720px){
  .blog-rubrique-bar{
    padding:.6rem 1.5rem 1.2rem
  }
  .blog-rubrique-bar .blog-rubrique-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    width:100%;
    padding-bottom:.2rem
  }
  .blog-rubrique-bar .blog-rubrique-nav::-webkit-scrollbar{display:none}
  .blog-rubrique-bar .blog-rubrique-chip{flex:0 0 auto;font-size:.55rem;padding:.42rem .7rem}
}

/* ─── Star on article cards (top-right, rotates on hover) ───── */
.blog-card{position:relative}
.blog-card-star{
  position:absolute;
  top:.85rem;right:.85rem;
  width:24px;height:24px;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transform:rotate(-90deg) scale(.5);
  transition:
    opacity .4s ease,
    transform .7s cubic-bezier(.34,1.56,.64,1)
}
.blog-card-star svg{
  width:100%;height:100%;
  fill:var(--accent);
  filter:drop-shadow(0 2px 6px rgba(11,15,26,.35));
  display:block
}
.blog-card:hover .blog-card-star{
  opacity:1;
  transform:rotate(360deg) scale(1)
}
@media (prefers-reduced-motion:reduce){
  .blog-rubrique-star,
  .blog-card-star{transition:none;animation:none}
  .blog-rubrique-chip[aria-current="page"] .blog-rubrique-star{animation:none}
  .blog-rubrique-chip:hover{transform:none}
}

/* ─── Hero meta — "Dernière entrée publiée le 28 avril 2026 — Claude Skills 2026" ─── */
.blog-hero-meta{
  margin:1.4rem 0 0;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:1.05rem;
  line-height:1.5;
  color:var(--text-muted);
  letter-spacing:0
}
.blog-hero-meta strong{
  color:var(--text);
  font-style:normal;
  font-weight:700
}
.blog-hero-meta em{
  color:var(--accent);
  font-style:italic;
  font-weight:700
}

/* ─── Featured card meta — pill catégorie + date lisible ─────── */
.blog-card-meta--featured{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  font-family:'Playfair Display',Georgia,serif;
  font-size:.95rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--text-muted);
  font-weight:400
}
.blog-card-meta--featured .cat-pill{
  display:inline-block;
  padding:.32rem .7rem;
  border:1px solid rgba(249,115,22,.4);
  border-radius:999px;
  background:rgba(249,115,22,.08);
  color:var(--accent);
  font-weight:700;
  font-style:italic;
  font-size:.88rem;
  line-height:1.2
}
.blog-card-meta--featured .date{
  font-style:italic;
  color:var(--text-muted)
}

/* ─── FAQ + Explorer aussi : constrain to container width ─── */
.blog-faq{
  max-width:var(--container);
  margin:0 auto;
  padding:0 2rem
}
.blog-faq .blog-faq-list{
  max-width:var(--narrow);
  margin:1rem auto 0
}
.blog-cat-explore .article-related-grid{
  max-width:var(--container);
  margin:0 auto;
  padding:0 2rem
}
@media (max-width:720px){
  .blog-faq{padding:0 1.5rem}
  .blog-cat-explore .article-related-grid{padding:0 1.5rem}
}

/* ─── Tri date sur la liste — bandeau mono inline ─────────── */
.blog-list-sort{
  display:inline-flex;align-items:baseline;gap:.42rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;
  color:var(--text-muted);
  user-select:none
}
.blog-list-sort-label{opacity:.6}
.blog-list-sort-btn{
  background:transparent;
  border:0;
  padding:.18rem 0;
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  position:relative;
  transition:color .15s ease
}
.blog-list-sort-btn:hover{color:var(--text)}
.blog-list-sort-btn[aria-pressed="true"]{color:var(--accent)}
.blog-list-sort-btn[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:1.5px;
  background:var(--accent)
}
.blog-list-sort-sep{opacity:.32}
.blog-list-sort-arrow{
  margin-right:.22em;
  font-weight:900
}

/* Section heads (réutilisable: Commencer ici, À la une, Tous les articles) */
.blog-section-head{
  max-width:var(--container);margin:0 auto;
  padding:3.5rem 2rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem
}
.blog-section-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-weight:700
}
.blog-section-title{
  font-family:'Playfair Display',Georgia,serif;font-weight:900;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.05;letter-spacing:-.015em;
  color:var(--text);margin:0
}
.blog-section-sub{
  color:var(--text-muted);font-size:1rem;line-height:1.55;
  max-width:600px;margin:.2rem 0 0
}

/* Wrappers de sections */
.blog-pillars,
.blog-featured-section,
.blog-list-section{position:relative}
.blog-featured-section{margin-bottom:1rem}

/* "Commencer ici" — 3 piliers */
.blog-pillars-grid{
  list-style:none;padding:0;margin:0;
  max-width:var(--container);
  margin-left:auto;margin-right:auto;
  padding:0 2rem 1rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
  align-items:stretch
}
.blog-pillars-grid > li{
  margin:0;padding:0;
  display:flex
}
.blog-card--pillar{
  position:relative;
  width:100%;
  /* hérite du .blog-card (display:flex, flex-direction:column) via la classe combinée */
}
.blog-card--pillar .pillar-step{
  position:absolute;top:1rem;right:1rem;z-index:3;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:700;font-size:.78rem;letter-spacing:.18em;
  color:#fff;background:var(--accent);
  padding:.35rem .55rem;border-radius:4px;
  box-shadow:2px 2px 0 rgba(11,15,26,.35);
  font-variant-numeric:tabular-nums lining-nums
}
.blog-card--pillar h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;
  font-size:1.35rem;line-height:1.15;letter-spacing:-.015em;color:var(--text);
  margin:.2rem 0
}
.blog-card--pillar .pillar-intent{
  font-style:italic;color:var(--text-muted);font-size:.95rem;
  line-height:1.5;flex:1;margin:0;
  /* Hauteur stable: 2 lignes réservées même si une seule ligne suffit
     pour que les footers s'alignent visuellement entre les 3 cards. */
  min-height:calc(.95rem * 1.5 * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden
}
.blog-card--pillar .read-more{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--accent);
  padding-top:.9rem;border-top:1px dashed var(--border);
  margin-top:.6rem
}
@media (max-width:920px){
  .blog-pillars-grid{grid-template-columns:1fr;gap:1.2rem}
}

/* Featured section: la card .blog-card--featured existe déjà.
   On supprime juste le margin auto qu'on hérite de .blog-list */
.blog-featured-section .blog-card--featured{
  max-width:var(--container);
  margin:0 auto 1rem;
}
/* La grille existante .blog-list garde son padding et son layout.
   La section wrapper ne lui ajoute rien — on s'appuie sur le CSS existant. */

/* CTA inline — bloc papier doux après les cards */
.blog-cta-inline{
  max-width:var(--container);
  margin:2.5rem auto 0;
  padding:2rem 2rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  display:grid;grid-template-columns:1fr auto;gap:1.5rem 2rem;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:6px 6px 0 rgba(154,52,18,.18)
}
.blog-cta-inline-body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.blog-cta-inline-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-weight:700
}
.blog-cta-inline h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;letter-spacing:-.01em;
  color:var(--text);margin:0
}
.blog-cta-inline p{
  color:var(--text-muted);font-size:.98rem;line-height:1.55;margin:0;
  max-width:580px
}
.blog-cta-inline .btn{
  flex:0 0 auto;
  background:var(--accent);color:#fff;
  padding:.85rem 1.4rem;border-radius:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 0 #9A3412;
  transition:transform .15s ease
}
.blog-cta-inline .btn:hover{transform:translateY(-2px)}
@media (max-width:720px){
  .blog-cta-inline{
    grid-template-columns:1fr;gap:1.2rem;
    padding:1.6rem 1.4rem
  }
  .blog-cta-inline .btn{justify-self:start}
}

/* La section "Tous les articles" : on retire le padding-top massif
   (.blog-list a déjà 4rem 2rem 6rem — c'était fait pour être seul) */
.blog-list-section .blog-list{padding-top:1rem}
@media (max-width:720px){
  .blog-section-head{padding:2.4rem 1.5rem 1rem}
  .blog-pillars-grid{padding:0 1.5rem 1rem}
}

/* ─────────────────────────────────────────────────────────────
   Pages catégories — intro éditoriale + bloc "Explorer aussi"
   ───────────────────────────────────────────────────────────── */
.blog-cat-intro{
  padding:1rem 0 .5rem;
  position:relative
}
.blog-cat-intro-inner{
  max-width:760px;margin:0 auto;
  padding:2.5rem 2rem 1rem
}
.blog-cat-intro h2.blog-section-title{
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  margin-bottom:1rem
}
.blog-cat-intro p{
  color:var(--text-muted);font-size:1.02rem;line-height:1.65;
  margin:0 0 1rem
}
.blog-cat-intro p strong{color:var(--text);font-weight:700}

.blog-cat-explore{padding:1rem 0 3rem}
.blog-cat-explore-grid{
  max-width:var(--container);margin:0 auto;
  padding:0 2rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem
}
.blog-cat-explore-card{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.2rem 1.4rem;
  background:var(--card-bg);border:1px solid var(--border);border-radius:10px;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .2s ease,box-shadow .2s ease
}
.blog-cat-explore-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:4px 4px 0 rgba(154,52,18,.18)
}
.blog-cat-explore-card strong{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--accent)
}
.blog-cat-explore-card span{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  color:var(--text);font-size:1rem;line-height:1.35
}
@media (max-width:720px){
  .blog-cat-intro-inner{padding:1.8rem 1.5rem .5rem}
  .blog-cat-explore-grid{padding:0 1.5rem}
}

/* ════════════════════════════════════════════════════════════════════
   BLOG HUB / CATEGORY — Mobile & tablet polish (≤980px)
   Desktop (≥981px) untouched. Replaces the cramped horizontal-scroll
   rubrique bar with a styled grid (stars always visible on touch),
   gives cards real breathing room, fixes featured-card stacking.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width:980px){
  /* Rubrique aside — restore kicker + rebuild as wrap grid (no hidden scroll) */
  .blog-rubrique-aside .blog-rubrique-aside-kicker{
    display:block;
    margin-bottom:.65rem;
    font-size:.6rem;letter-spacing:.26em;
    color:var(--text-muted);font-weight:700
  }
  .blog-rubrique-aside .blog-rubrique-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.55rem;
    overflow:visible;
    padding:0
  }
  .blog-rubrique-aside .blog-rubrique-chip{
    flex:none;
    grid-template-columns:14px minmax(0,1fr) auto;
    border-radius:10px;
    padding:.6rem .7rem;
    font-size:.58rem;letter-spacing:.14em;
    gap:.5rem;
    min-height:46px;
    align-items:center;
    background:var(--card-bg);
    box-shadow:2px 2px 0 rgba(154,52,18,.1)
  }
  /* Stars ALWAYS visible on touch — no hover, no surprise */
  .blog-rubrique-aside .blog-rubrique-chip .blog-rubrique-star{
    opacity:.6;
    transform:rotate(0deg) scale(1)
  }
  .blog-rubrique-aside .blog-rubrique-chip[aria-current="page"]{
    background:var(--text);
    border-color:var(--text);
    color:var(--bg);
    box-shadow:3px 3px 0 rgba(0,0,0,.24)
  }
  .blog-rubrique-aside .blog-rubrique-chip[aria-current="page"] .blog-rubrique-star{
    opacity:1
  }
  .blog-rubrique-aside .blog-rubrique-chip:hover{transform:none}
  .blog-rubrique-aside .blog-rubrique-name{
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:break-word;
    line-height:1.2
  }
  .blog-rubrique-aside .blog-rubrique-count{
    font-size:.55rem;
    padding:.16rem .42rem
  }
  /* Sort line — full width row with restored separator */
  .blog-rubrique-aside .blog-rubrique-aside-inner .blog-list-sort{
    margin-top:.85rem;
    padding-top:.7rem;
    border-top:1px dashed var(--border);
    align-self:stretch;
    display:flex;justify-content:flex-start;gap:.55rem
  }
  /* Card top-right star: visible on touch */
  .blog-card .blog-card-star{opacity:.4}
}

/* Phones (≤720px) — breathing room, edge-to-edge covers, readable type */
@media (max-width:720px){
  /* Hero compact — tighter padding, balanced typography */
  .blog-hero--compact{padding:2.2rem 1.25rem 1.4rem}
  .blog-hero--compact h1{font-size:clamp(1.85rem,7vw,2.4rem);line-height:1.05}
  .blog-hero--compact .blog-hero-sub{font-size:.95rem;line-height:1.55;margin-top:.75rem}
  .blog-hero-meta{font-size:.78rem;margin-top:1rem}

  /* Section heads */
  .blog-section-head{padding:1.8rem 1.25rem .55rem;gap:.4rem}
  .blog-section-kicker{font-size:.6rem;letter-spacing:.22em}
  .blog-section-title{font-size:1.55rem;line-height:1.1}
  .blog-section-sub{font-size:.92rem;line-height:1.5}

  /* Featured "À la une" — cover edge-to-edge with ribbon label */
  .blog-featured-section{padding:0 1.25rem;margin-bottom:.4rem}
  .blog-featured-section .blog-card--featured{
    margin:0;
    border-radius:14px;
    box-shadow:5px 5px 0 rgba(154,52,18,.22);
    overflow:hidden
  }
  .blog-card--featured .featured-side{
    order:1;
    padding:0;
    background:transparent;
    min-height:0
  }
  .blog-card--featured .featured-side::after{display:none}
  .blog-card--featured .featured-side strong{
    position:absolute;
    left:.85rem;top:.85rem;
    background:var(--accent);color:#fff;
    padding:.45rem .65rem;
    font-size:.6rem;letter-spacing:.22em;
    box-shadow:2px 2px 0 rgba(11,15,26,.32);
    z-index:3;opacity:1
  }
  .blog-card--featured .blog-card-media{
    margin:0;
    border-radius:0;
    border:0;
    border-bottom:1px solid var(--border);
    box-shadow:none;
    min-height:0
  }
  .blog-card--featured .featured-content{
    order:2;
    padding:1.4rem 1.25rem 1.5rem;
    gap:.85rem
  }
  .blog-card--featured h2,
  .blog-card--featured h3{font-size:1.35rem;line-height:1.12}
  .blog-card--featured p{font-size:.93rem;line-height:1.55}
  .blog-card--featured .blog-card-footer{padding-top:.85rem}

  /* Pillars — compact, no fixed-line clamping */
  .blog-pillars-grid{padding:0 1.25rem 0;gap:1rem}
  .blog-card--pillar{padding:1.4rem 1.4rem 1.3rem}
  .blog-card--pillar .blog-card-media{margin:-.4rem -.4rem .65rem}
  .blog-card--pillar h3{font-size:1.15rem}
  .blog-card--pillar .pillar-intent{
    font-size:.9rem;
    min-height:auto;
    -webkit-line-clamp:none;
    display:block
  }
  .blog-card--pillar .pillar-step{font-size:.7rem;padding:.3rem .5rem}

  /* Journal shell — refresh paddings */
  .blog-list-section .blog-section-head{padding:1.6rem 1.25rem .5rem}
  .blog-journal-shell{padding:0 1.25rem;gap:1.4rem}

  /* Rubrique grid — 2 cols below 720 */
  .blog-rubrique-aside .blog-rubrique-nav{grid-template-columns:1fr 1fr}
  .blog-rubrique-aside .blog-rubrique-aside-kicker{font-size:.58rem;letter-spacing:.24em}

  /* Article cards — 1 column, generous breathing */
  .blog-journal-main .blog-list{
    grid-template-columns:1fr;
    gap:1.5rem;
    padding:0
  }
  .blog-card{
    padding:1.5rem 1.5rem 1.4rem;
    gap:.7rem;
    border-radius:14px;
    box-shadow:4px 4px 0 rgba(154,52,18,.14)
  }
  .blog-card-media{
    margin:-.4rem -.4rem .7rem;
    box-shadow:4px 4px 0 rgba(154,52,18,.22)
  }
  .blog-card h2,
  .blog-card h3{font-size:1.25rem;line-height:1.18}
  .blog-card p{font-size:.92rem;line-height:1.55}
  .blog-card-meta{font-size:.66rem;letter-spacing:.06em;gap:.45rem}
  .blog-card-footer{padding-top:.85rem;font-size:.74rem}
  .blog-card-footer .read-more{font-size:.66rem;letter-spacing:.16em}
}

/* Phones larges & paysage / petites tablettes — 2 articles par ligne */
@media (min-width:560px) and (max-width:720px){
  .blog-rubrique-aside .blog-rubrique-nav{grid-template-columns:1fr 1fr 1fr}
  .blog-journal-main .blog-list{
    grid-template-columns:1fr 1fr;
    gap:1rem
  }
  .blog-card{padding:1.1rem 1.1rem 1rem;gap:.55rem}
  .blog-card-media{margin:-.35rem -.35rem .55rem}
  .blog-card h2,
  .blog-card h3{font-size:1rem;line-height:1.2}
  .blog-card p{
    font-size:.82rem;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden
  }
  .blog-card-meta{font-size:.6rem;gap:.35rem}
  .blog-card-footer{
    flex-direction:column;align-items:flex-start;gap:.4rem;
    padding-top:.7rem
  }
  .blog-card-footer > span:last-child{display:none}
}

/* Très petits écrans (≤380px) — sécurise le rendu sur SE/petits Android */
@media (max-width:380px){
  .blog-section-title{font-size:1.4rem}
  .blog-card{padding:1.3rem;gap:.65rem}
  .blog-card h2,
  .blog-card h3{font-size:1.15rem}
  .blog-rubrique-aside .blog-rubrique-chip{padding:.55rem .6rem;font-size:.55rem}
}