/* ============================================================
   LANDING — Vale Tudo
   Système typo + grille + 3 signatures (Lostbusters / Moby / Drain)
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Scale multipliers (driven by Tweaks) */
  --t-scale: 1;       /* compact 0.92 · comfort 1 · generous 1.12 */
  --density: 1;       /* tight 0.85 · normal 1 · airy 1.18 */

  /* Grid */
  --maxw: 1240px;
  --gut: 32px;

  /* Spacing scale (8pt, multiplied by density) */
  --s-1: calc(4px  * var(--density));
  --s-2: calc(8px  * var(--density));
  --s-3: calc(12px * var(--density));
  --s-4: calc(16px * var(--density));
  --s-5: calc(24px * var(--density));
  --s-6: calc(32px * var(--density));
  --s-7: calc(48px * var(--density));
  --s-8: calc(64px * var(--density));
  --s-9: calc(96px * var(--density));
  --s-10:calc(128px* var(--density));

  /* Type ramp (px, multiplied by t-scale via calc) */
  --tx-mono: calc(12px * var(--t-scale));
  --tx-body: calc(17px * var(--t-scale));
  --tx-body-l: calc(19px * var(--t-scale));
  --tx-lead: calc(22px * var(--t-scale));
  --tx-promise: clamp(calc(20px * var(--t-scale)), calc(2.2vw * var(--t-scale)), calc(26px * var(--t-scale)));
  --tx-title-s: calc(22px * var(--t-scale));
  --tx-title-m: calc(28px * var(--t-scale));
  --tx-title-l: calc(36px * var(--t-scale));
  /* Display sizes use clamp + scale */
  --tx-display-m: clamp(calc(36px * var(--t-scale)), calc(5vw * var(--t-scale)), calc(56px * var(--t-scale)));
  --tx-display-l: clamp(calc(44px * var(--t-scale)), calc(6vw * var(--t-scale)), calc(76px * var(--t-scale)));
  --tx-hero:    clamp(calc(40px * var(--t-scale)), calc(4.8vw * var(--t-scale)), calc(62px * var(--t-scale)));
}

/* ---------- Variant: Lostbusters ---------- */
body.lostbusters{
  --bg: #F2EDE4;
  --bg2: #E8E2D8;
  --paper:#FBF7EE;
  --ink: #141414;
  --ink2:#5C564E;
  --line:#141414;
  --accent:#CC1C1C;
  --accent2:#0F2F8C;        /* secondary stamp blue */
  --accent-fg:#FBF7EE;
  --rule-w: 2px;
  --shadow: 4px 4px 0 0 #141414;
  --radius: 2px;
  --font-display:'Anton',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --letter-display: 0.5px;
  --letter-body: 0;
}

/* ---------- Variant: Moby Leak ---------- */
body.mobyleak{
  --bg: #0C1A38;
  --bg2: #08132A;
  --paper:#0F2046;
  --ink: #F4ECCF;
  --ink2:#8AA6C4;
  --line:rgba(244,236,207,0.18);
  --accent:#7AAAD4;
  --accent2:#D4B883;        /* warm gold */
  --accent-fg:#0C1A38;
  --rule-w: 1px;
  --shadow:none;
  --radius: 6px;
  --font-display:'Playfair Display',serif;
  --font-body:'Lora',serif;
  --font-mono:'JetBrains Mono',monospace;
  --letter-display: -0.5px;
  --letter-body: 0.01em;
}

/* ---------- Variant: Drainspotting ---------- */
body.drainspotting{
  --bg: #0E0D07;
  --bg2: #181610;
  --paper:#181610;
  --ink: #EFEAD2;
  --ink2:#857c5d;
  --line:rgba(239,234,210,0.14);
  --accent:#E8650A;
  --accent2:#EFEAD2;
  --accent-fg:#0E0D07;
  --rule-w: 1px;
  --shadow:none;
  --radius: 0;
  --font-display:'Anton',sans-serif;
  --font-body:'Barlow Condensed',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --letter-display: 1px;
  --letter-body: 0.005em;
}

/* ============================================================
   BASE
   ============================================================ */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--tx-body);
  line-height:1.55;
  letter-spacing:var(--letter-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.drainspotting{ font-weight:400; }

::selection{ background:var(--accent); color:var(--accent-fg); }

/* Subtle background textures per variant */
body.lostbusters::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image: radial-gradient(rgba(20,20,20,0.12) 1px, transparent 1.2px);
  background-size: 3px 3px;
  mix-blend-mode:multiply;
  mask-image: linear-gradient(180deg, transparent, black 200px, black calc(100% - 200px), transparent);
}
body.mobyleak::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(122,170,212,0.08), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(212,184,131,0.05), transparent 70%);
}
body.drainspotting::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-image:
    repeating-linear-gradient(45deg, rgba(239,234,210,0.012) 0 2px, transparent 2px 5px),
    radial-gradient(rgba(239,234,210,0.025) 1px, transparent 1.2px);
  background-size: auto, 2.5px 2.5px;
}

main, nav, footer{ position:relative; z-index:1; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
}

/* Vertical rhythm helpers */
.section{
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
  position:relative;
}
.section + .section{ border-top: var(--rule-w) solid var(--line); }
body.lostbusters .section + .section{ border-top-width:2px; }

/* Section eyebrow */
.eyebrow{
  font-family:var(--font-mono);
  font-size:calc(11px * var(--t-scale));
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:var(--s-3);
  margin-bottom:var(--s-7);
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:24px; height:1px; background:var(--accent);
}
body.lostbusters .eyebrow::before{ height:2px; background:var(--accent); }

.section-head{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: var(--s-7);
  align-items:end;
  margin-bottom: var(--s-8);
}
@media(max-width:820px){
  .section-head{ grid-template-columns:1fr; gap:var(--s-5); align-items:start; }
}
.section-head h2{ margin:0; }
.section-head .h2-sub{
  color:var(--ink2);
  font-size:var(--tx-body-l);
  max-width:52ch;
  padding-bottom: .35em;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:var(--letter-display); line-height:1; }
body.mobyleak h1, body.mobyleak h2, body.mobyleak h3{
  font-style:italic; font-weight:700; line-height:1.08;
}
body.lostbusters h1, body.lostbusters h2, body.lostbusters h3, body.drainspotting h1, body.drainspotting h2, body.drainspotting h3{
  text-transform:uppercase;
}
body.drainspotting h1, body.drainspotting h2, body.drainspotting h3{ letter-spacing:1px; }

.mono{ font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; font-size:var(--tx-mono); }

/* ============================================================
   NAV
   ============================================================ */
nav.top{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom: var(--rule-w) solid var(--line);
  backdrop-filter: blur(8px);
}
body.lostbusters nav.top{ border-bottom-width:2px; border-bottom-color: var(--ink); }
nav.top .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:calc(22px * var(--t-scale));
  letter-spacing:2px;
  color:var(--ink);
}
body.mobyleak .logo{ font-style:italic; letter-spacing:0; font-size:calc(20px * var(--t-scale)); }
body.lostbusters .logo, body.drainspotting .logo{ text-transform:uppercase; }
.logo-mark{
  width:14px; height:14px;
  background:var(--accent);
  flex-shrink:0;
}
body.lostbusters .logo-mark{ border-radius:50%; box-shadow: 2px 2px 0 0 var(--ink); }
body.mobyleak .logo-mark{ border-radius:50%; box-shadow:0 0 0 1px var(--accent2) inset, 0 0 0 4px var(--bg) inset, 0 0 0 5px var(--accent2) inset; background:var(--bg); }
body.drainspotting .logo-mark{ border-radius:0; transform: rotate(45deg); width:12px; height:12px; }
.nav-meta{
  display:flex; align-items:center; gap:var(--s-5);
  color:var(--ink2);
}
.nav-meta .pill{
  font-family:var(--font-mono); font-size:calc(10px * var(--t-scale));
  letter-spacing:.18em; text-transform:uppercase;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius:99px;
}
body.lostbusters .nav-meta .pill{ border-color:var(--ink); border-width:1.5px; }
.nav-by{ font-family:var(--font-mono); font-size:calc(11px * var(--t-scale)); letter-spacing:.1em; }

/* ============================================================
   HERO  (open layout — no vertical divider)
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-9);
  min-height: 82vh;
  align-items:center;
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
}
@media(max-width:980px){ .hero{ grid-template-columns:1fr; gap: var(--s-7); min-height:auto; padding-top: var(--s-8); padding-bottom: var(--s-8); } }

.hero-left{
  display:flex; flex-direction:column;
  position:relative;
}

.hero-right{
  display:flex; flex-direction:column; justify-content:center;
}

/* Hero left content */
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:calc(11px * var(--t-scale));
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom: var(--s-5);
  width:max-content;
}
.hero-tag .blink{
  width:6px; height:6px; background:var(--accent); border-radius:50%;
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

body.lostbusters .hero-tag{
  background: var(--accent); color: var(--accent-fg);
  padding: 6px 10px;
  border-radius:0;
  box-shadow: 3px 3px 0 0 var(--ink);
  transform: rotate(-1.5deg);
}
body.lostbusters .hero-tag .blink{ background: var(--accent-fg); }
body.mobyleak .hero-tag{ color: var(--accent2); letter-spacing:.18em; font-style:italic; text-transform:none; }
body.mobyleak .hero-tag .blink{ background:var(--accent2); }

h1.hero-h1{
  font-size: var(--tx-hero);
  line-height: 1.02;
  margin-bottom: var(--s-5);
  max-width: 18ch;
}
body.mobyleak h1.hero-h1{ line-height:1.1; max-width:22ch; }
body.drainspotting h1.hero-h1{ line-height: 1; }
h1.hero-h1 em{
  color: var(--accent);
  font-style: normal;
  position: relative;
  display:inline-block;
}
body.mobyleak h1.hero-h1 em{ font-style:italic; color:var(--accent2); }
body.lostbusters h1.hero-h1 em::after{
  /* underscore "scribble" */
  content:""; position:absolute; left:0; right:0; bottom:-.08em; height:.12em;
  background: var(--accent);
  transform: skewX(-12deg);
  opacity:.18;
}
body.drainspotting h1.hero-h1 em{ position:relative; padding: 0 .12em; background: var(--accent); color: var(--accent-fg); }

.hero-sub{
  font-size: var(--tx-promise);
  line-height: 1.4;
  color: var(--ink);
  max-width: 32ch;
  margin-bottom: var(--s-5);
  font-weight: 500;
}
body.mobyleak .hero-sub{ font-style: italic; font-weight: 400; }
body.drainspotting .hero-sub{ font-weight: 500; }

.hero-promise{
  font-size: var(--tx-body-l);
  line-height: 1.55;
  color: var(--ink2);
  max-width: 44ch;
  margin: 0;
}
.hero-promise strong{ color: var(--ink); font-weight: 600; }
body.mobyleak .hero-promise{ font-style: italic; }
body.mobyleak .hero-promise strong{ font-weight: 700; font-style: italic; }
body.drainspotting .hero-promise strong{ font-weight: 600; }
.hero-promise .sep{
  display:inline-block;
  width: 1.2em;
  color: var(--accent);
  text-align:center;
  opacity:.8;
}

/* ============================================================
   FORM (Hero right + CTA repeat) — minimal, no chrome
   ============================================================ */
.form{
  display:flex; flex-direction:column;
  position:relative;
  width: 100%;
  max-width: 460px;
}
.hero-right .form{ margin-left: auto; }
@media(max-width:980px){ .hero-right .form{ margin-left: 0; max-width: 520px; } }

.form-label{
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: var(--s-4);
  display:flex; align-items:center; gap: 10px;
}
.form-label::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--line);
}
body.mobyleak .form-label{ font-style: italic; text-transform: none; letter-spacing: .04em; color: var(--accent2); }
body.mobyleak .form-label::after{ background: var(--accent2); opacity:.4; }

/* Underlined-field stack */
.form-stack{ display:flex; flex-direction:column; gap: var(--s-2); }
.form-stack .field{
  position:relative;
  display:flex; align-items:baseline; gap: 10px;
  border-bottom: 1.5px solid var(--line);
  padding: 12px 0 10px;
  transition: border-color .15s;
}
body.lostbusters .form-stack .field{ border-bottom-color: var(--ink); border-bottom-width: 2px; }
body.drainspotting .form-stack .field{ border-bottom-color: rgba(239,234,210,0.25); }
.form-stack .field:focus-within{ border-bottom-color: var(--accent); }

.field-prefix{
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
  flex-shrink: 0;
  width: 28px;
  user-select: none;
}
.form-stack .field:focus-within .field-prefix{ color: var(--accent); }

.form-stack input{
  flex:1; min-width:0;
  background:transparent;
  border:none; outline:none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(19px * var(--t-scale));
  padding: 0;
  letter-spacing: var(--letter-body);
  line-height: 1.2;
}
body.mobyleak .form-stack input{ font-style: italic; font-size: calc(20px * var(--t-scale)); }
body.drainspotting .form-stack input{ font-weight:500; }
.form-stack input::placeholder{ color: var(--ink2); opacity:.7; }
body.mobyleak .form-stack input::placeholder{ font-style: italic; }

.btn{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  width:100%;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: calc(19px * var(--t-scale));
  letter-spacing: 2px;
  padding: 18px 22px;
  border-radius: var(--radius);
  margin-top: var(--s-5);
  transition: transform .1s, box-shadow .1s, background .15s;
  text-transform: uppercase;
}
body.lostbusters .btn{
  box-shadow: 4px 4px 0 0 var(--ink);
  border: 2px solid var(--ink);
}
body.lostbusters .btn:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--ink); }
body.lostbusters .btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--ink); }
body.mobyleak .btn{
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  text-transform:none;
  letter-spacing: .02em;
  font-size: calc(20px * var(--t-scale));
  font-weight:700;
}
body.mobyleak .btn:hover{ background: var(--accent); color: var(--accent-fg); }
body.drainspotting .btn{
  border: 1px solid var(--accent);
  font-weight:400;
  letter-spacing: 2px;
}
body.drainspotting .btn:hover{ background: var(--accent2); color: var(--accent-fg); }

.btn .arrow{
  display:inline-block;
  transition: transform .15s;
}
.btn:hover .arrow{ transform: translateX(3px); }

.microcopy{
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .12em;
  color: var(--ink2);
  text-align:center;
  margin-top: var(--s-4);
}
.microcopy .sep{ opacity:.4; margin: 0 6px; }
body.mobyleak .microcopy{ font-family: var(--font-body); font-style: italic; text-transform: none; letter-spacing: 0; font-size: calc(13px * var(--t-scale)); }

/* ============================================================
   MODULES
   ============================================================ */
.modules{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--rule-w) solid var(--line);
}
body.lostbusters .modules{ border-color: var(--ink); border-width:2px; }
@media(max-width:780px){ .modules{ grid-template-columns:1fr; } }

.mod{
  padding: var(--s-7) var(--s-6);
  border-right: var(--rule-w) solid var(--line);
  display:flex; flex-direction:column; gap: var(--s-3);
  position:relative;
}
body.lostbusters .mod{ border-right-color: var(--ink); border-right-width:2px; }
.mod:last-child{ border-right:none; }
@media(max-width:780px){
  .mod{ border-right:none; border-bottom: var(--rule-w) solid var(--line); }
  body.lostbusters .mod{ border-right:none; border-bottom-color: var(--ink); border-bottom-width:2px; }
  .mod:last-child{ border-bottom:none; }
}

.mod-num{
  display:flex; align-items:center; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
}
.mod-num::after{ content:""; flex:1; height:1px; background: var(--line); }

.mod h3{
  font-family: var(--font-display);
  font-size: var(--tx-title-l);
  line-height:1.02;
  color: var(--ink);
  letter-spacing: var(--letter-display);
  margin-top: var(--s-2);
}
body.mobyleak .mod h3{ font-style: italic; text-transform: none; line-height:1.15; }
.mod p{ font-size: var(--tx-body); color: var(--ink2); line-height:1.6; }

/* Module ornaments per variant */
.mod-orn{
  position:absolute; top: var(--s-5); right: var(--s-5);
  width: 28px; height: 28px;
  display:grid; place-items:center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  opacity:.6;
}
body.lostbusters .mod-orn{
  background: var(--accent); color: var(--accent-fg);
  border-radius: 50%;
  font-family: var(--font-display);
  opacity:1;
  transform: rotate(-6deg);
  box-shadow: 2px 2px 0 0 var(--ink);
}
body.mobyleak .mod-orn{ background:transparent; opacity:.7; }
body.drainspotting .mod-orn{ color: var(--accent); background:transparent; }

/* ============================================================
   PREVIEW (Dashboard)
   ============================================================ */
.preview-section{
  background: var(--ink);
  color: var(--bg);
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
  position:relative;
  overflow:hidden;
}
body.lostbusters .preview-section{ background: #141414; }
body.mobyleak .preview-section{ background: var(--bg2); color: var(--ink); }
body.drainspotting .preview-section{ background: var(--bg2); color: var(--ink); }

.preview-section .eyebrow{ color: var(--accent); }
.preview-section h2{ color: var(--bg); margin-bottom: var(--s-6); }
body.mobyleak .preview-section h2, body.drainspotting .preview-section h2{ color: var(--ink); }
.preview-section .h2-sub{ color: rgba(255,255,255,0.6); }
body.mobyleak .preview-section .h2-sub, body.drainspotting .preview-section .h2-sub{ color: var(--ink2); }

/* ============================================================
   DASHBOARD (v3 — stacked sections, theme-aware)
   ============================================================ */

/* Theme-specific dashboard color tokens — fully readable inside the dashboard */
.dashboard{
  --db-bg: #FBFAF7;             /* dashboard surface */
  --db-bg-soft: #F1EDE3;        /* subtle inner panel */
  --db-fg: #1B1B1B;             /* primary text */
  --db-fg2: #5C564E;            /* secondary text */
  --db-fg3: #8B8478;            /* tertiary text */
  --db-line: rgba(20,20,20,0.10);
  --db-line-strong: rgba(20,20,20,0.16);
  --db-info: #2F6FB5;
  --db-danger: #C0382C;
  --db-danger-bg: #FCEBEB;
  --db-danger-ink: #A32D2D;
  --db-warn: #BA7517;
  --db-warn-bg: #FAEEDA;
  --db-warn-ink: #633806;
  --db-good: #4A7A1F;
  --db-good-bg: #E7F0DC;
  --db-good-ink: #2E4F12;

  background: var(--db-bg-soft);
  color: var(--db-fg);
  border-radius: 8px;
  padding: 18px;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  position:relative;
}
body.lostbusters .dashboard{
  border-radius:2px;
  padding: 16px;
  box-shadow: 6px 6px 0 0 var(--accent), 12px 12px 0 0 var(--ink);
}
body.mobyleak .dashboard{
  --db-bg:#F5EDD0;
  --db-bg-soft:#EEE5C2;
  --db-fg:#0C1A38;
  --db-fg2:#3A4A6B;
  --db-fg3:#6E7E97;
  --db-line: rgba(12,26,56,0.12);
  --db-line-strong: rgba(12,26,56,0.20);
  --db-info:#7AAAD4;
  border-radius:6px;
}
body.drainspotting .dashboard{
  --db-bg:#0B0A05;
  --db-bg-soft:#15140E;
  --db-fg:#EFEAD2;
  --db-fg2:#B5AE93;
  --db-fg3:#857C5D;
  --db-line: rgba(239,234,210,0.10);
  --db-line-strong: rgba(239,234,210,0.18);
  --db-info:#E8650A;
  --db-danger:#E8650A;
  --db-danger-bg: rgba(232,101,10,0.10);
  --db-danger-ink:#E8650A;
  --db-warn:#D49B3F;
  --db-warn-bg: rgba(212,155,63,0.10);
  --db-warn-ink:#D49B3F;
  --db-good:#9BB44C;
  --db-good-bg: rgba(155,180,76,0.10);
  --db-good-ink:#9BB44C;
  border-radius:0;
  border:1px solid rgba(232,101,10,0.3);
}

/* Inner frame */
.db-frame{
  background: var(--db-bg);
  border: 1px solid var(--db-line);
  border-radius: 6px;
  overflow: hidden;
}
body.lostbusters .db-frame{ border-radius:2px; }
body.drainspotting .db-frame{ border-radius:0; }

/* Title bar — single line: dot + boutique on the left, date on the right */
.db-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--db-line);
}
.db-title-left{ display:flex; align-items:center; gap: 10px; }
.db-title-left .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--db-danger);
}
body.drainspotting .db-title-left .dot{ border-radius:0; transform: rotate(45deg); }
.db-title-left .name{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--db-fg2);
  letter-spacing: 0;
}
body.drainspotting .db-title-left .name{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em; text-transform:uppercase; }
.db-title-right{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--db-fg3);
}

/* Inner section (Vue d'ensemble, Produits invisibles, etc.) */
.db-section{
  padding: 18px;
  border-bottom: 1px solid var(--db-line);
}
.db-section:last-child{ border-bottom: none; }

.db-section-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--db-fg3);
  margin: 0 0 12px;
}

.db-section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.db-section-title{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--db-fg);
  margin: 0;
  letter-spacing: 0;
}
body.drainspotting .db-section-title{ font-weight:500; }
body.mobyleak .db-section-title{ font-weight: 700; }
.db-section-title small{
  font-weight: 400;
  color: var(--db-fg3);
  font-size: 12px;
  margin-left: 4px;
}
.db-link{
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--db-info);
  display:inline-flex; align-items:center; gap:4px;
  cursor: pointer;
  transition: opacity .15s;
}
.db-link:hover{ opacity:.7; }
body.drainspotting .db-link{ font-family: var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

/* KPI cards — auto-fit grid */
.db-kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.kpi{
  background: var(--db-bg-soft);
  border-radius: 6px;
  padding: 14px;
  display:flex; flex-direction:column; gap: 4px;
}
body.lostbusters .kpi{ border-radius:2px; }
body.drainspotting .kpi{ border-radius:0; background: rgba(239,234,210,0.04); border:1px solid var(--db-line); }
.kpi.alert{ background: var(--db-danger-bg); }
.kpi-label{
  font-size: 12px;
  color: var(--db-fg3);
  letter-spacing: 0;
  font-family: var(--font-body);
  margin: 0;
}
body.drainspotting .kpi-label{ font-family: var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.kpi-value{
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--db-fg);
  letter-spacing: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
body.mobyleak .kpi-value{ font-family: var(--font-display); font-style:italic; font-weight:700; font-size: 30px; }
body.drainspotting .kpi-value{ font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing:.5px; }
.kpi.alert .kpi-value{ color: var(--db-danger-ink); }
.kpi.warn .kpi-value{ color: var(--db-warn); }
.kpi.danger .kpi-value{ color: var(--db-danger-ink); }
.kpi-foot{
  font-size: 11px;
  color: var(--db-fg3);
  margin: 4px 0 0;
  font-family: var(--font-body);
}
.kpi.alert .kpi-foot{ color: var(--db-danger-ink); opacity: .85; }

/* Inner table */
.db-table{
  border: 1px solid var(--db-line);
  border-radius: 6px;
  overflow: hidden;
}
body.lostbusters .db-table{ border-radius:2px; }
body.drainspotting .db-table{ border-radius:0; }

.db-row{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  padding: 10px 14px;
  align-items: center;
  border-bottom: 1px solid var(--db-line);
  font-size: 12px;
  color: var(--db-fg2);
}
.db-row:last-child{ border-bottom: none; }
.db-row.head{
  background: var(--db-bg-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--db-fg3);
  padding: 9px 14px;
}
body.drainspotting .db-row.head{ background: rgba(239,234,210,0.03); }
.db-row .ellipsis{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.db-row .path{ font-family: var(--font-mono); font-size: 11.5px; color: var(--db-fg2); }
body.drainspotting .db-row .path{ color: var(--db-fg); }

.db-tag{
  display:inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--db-bg-soft);
  color: var(--db-fg2);
  white-space: nowrap;
}
body.drainspotting .db-tag{ border-radius:0; background: rgba(239,234,210,0.06); color: var(--db-fg); font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; }
.db-tag.danger{ background: var(--db-danger-bg); color: var(--db-danger-ink); }
.db-tag.warn{ background: var(--db-warn-bg); color: var(--db-warn-ink); }
.db-tag.good{ background: var(--db-good-bg); color: var(--db-good-ink); }

.db-status{ display:flex; align-items:center; gap:6px; font-size: 12px; }
.db-status .dot{ width:6px; height:6px; border-radius:50%; }
body.drainspotting .db-status .dot{ border-radius:0; transform: rotate(45deg); }
.db-status.good .dot{ background: var(--db-good); }
.db-status.danger .dot{ background: var(--db-danger); }

.db-pos{ display:flex; align-items:center; gap:6px; }
.db-pos .n{ font-weight:500; color: var(--db-warn); font-variant-numeric: tabular-nums; }
.db-pos .to{
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--db-warn-bg);
  color: var(--db-warn-ink);
}
body.drainspotting .db-pos .to{ border-radius:0; }

.db-num{ font-variant-numeric: tabular-nums; }
.db-num.danger{ color: var(--db-danger-ink); font-weight: 500; }
.db-num.warn{ color: var(--db-warn); font-weight: 500; }

.db-caption{
  text-align:center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--db-fg3);
  margin-top: 14px;
  letter-spacing: .04em;
}

@media(max-width:640px){
  .dashboard{ padding: 10px; }
  .db-section{ padding: 14px; }
  .db-row{ grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); padding: 9px 10px; font-size: 11.5px; }
  .db-row.head{ padding: 8px 10px; }
}

/* ============================================================
   STEPS
   ============================================================ */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
@media(max-width:780px){ .steps{ grid-template-columns:1fr; gap: var(--s-6); } }

.step{ display:flex; flex-direction:column; gap: var(--s-3); }
.step-num{
  font-family: var(--font-display);
  font-size: calc(82px * var(--t-scale));
  line-height: 0.85;
  color: var(--accent);
  letter-spacing: var(--letter-display);
  margin-bottom: var(--s-2);
  display:flex; align-items:baseline; gap: 8px;
}
body.mobyleak .step-num{ font-style: italic; }
.step-num .of{
  font-family: var(--font-mono);
  font-size: calc(12px * var(--t-scale));
  letter-spacing: .14em;
  color: var(--ink2);
  text-transform: uppercase;
}
.step h3{
  font-family: var(--font-display);
  font-size: var(--tx-title-m);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
body.mobyleak .step h3{ font-style: italic; text-transform:none; }
.step p{ font-size: var(--tx-body); color: var(--ink2); line-height: 1.65; }

.reassure{
  display:flex; justify-content:center; gap: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: var(--rule-w) solid var(--line);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--t-scale));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink2);
  flex-wrap:wrap;
}
body.lostbusters .reassure{ border-color: var(--ink); border-width:2px; }
.reassure em{ color: var(--accent); font-style: normal; font-weight: 600; }

/* ============================================================
   POUR QUI
   ============================================================ */
.pq{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--s-8);
  align-items:start;
}
@media(max-width:820px){ .pq{ grid-template-columns:1fr; gap: var(--s-6); } }
.pq h2{
  font-size: var(--tx-display-m);
  line-height: 1;
  max-width: 14ch;
}
body.mobyleak .pq h2{ line-height:1.1; max-width:18ch; }

.pq-body{ font-size: var(--tx-lead); line-height: 1.55; color: var(--ink); max-width: 56ch; }
.pq-body p + p{ margin-top: var(--s-4); }
body.mobyleak .pq-body{ font-style: italic; }
.pq-body strong{ color: var(--ink); font-weight: 600; background: linear-gradient(transparent 65%, rgba(204,28,28,0.18) 65%); padding: 0 2px; }
body.mobyleak .pq-body strong{ background: linear-gradient(transparent 65%, rgba(212,184,131,0.25) 65%); }
body.drainspotting .pq-body strong{ background: linear-gradient(transparent 65%, rgba(232,101,10,0.25) 65%); }

.pq-excluded{
  display:block;
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--accent);
  background: var(--bg2);
  font-size: var(--tx-body);
  color: var(--ink2);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--t-scale));
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.mobyleak .pq-excluded{
  border-left:none;
  border-top: 1px solid var(--line);
  padding: var(--s-4) 0 0;
  background: transparent;
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tx-body);
}

/* ============================================================
   VALE TUDO
   ============================================================ */
.vt{
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  border: var(--rule-w) solid var(--line);
  position:relative;
}
body.lostbusters .vt{ border-color: var(--ink); border-width:2px; box-shadow: 6px 6px 0 0 var(--ink); }
@media(max-width:820px){ .vt{ grid-template-columns:1fr; } }

.vt-label{
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-7) var(--s-6);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
  min-height: 280px;
}
body.lostbusters .vt-label{ background: var(--ink); }
body.mobyleak .vt-label{ background: var(--paper); color: var(--ink); border-right: 1px solid var(--line); }
body.drainspotting .vt-label{ background: var(--accent); color: var(--accent-fg); }

.vt-label-mark{
  font-family: var(--font-display);
  font-size: calc(72px * var(--t-scale));
  line-height: .85;
  letter-spacing: 1px;
}
body.mobyleak .vt-label-mark{ font-style: italic; font-size: calc(56px * var(--t-scale)); }
.vt-label-meta{
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}

.vt-body{
  padding: var(--s-7) var(--s-7);
  background: var(--bg);
}
body.mobyleak .vt-body{ background: var(--bg); }
.vt-body h3{
  font-family: var(--font-display);
  font-size: var(--tx-title-l);
  margin-bottom: var(--s-5);
  color: var(--ink);
  line-height: 1.05;
}
body.mobyleak .vt-body h3{ font-style:italic; text-transform:none; }
.vt-body p{
  font-size: var(--tx-body-l);
  line-height: 1.65;
  color: var(--ink2);
  margin-bottom: var(--s-4);
}
.vt-body p:last-of-type{ margin-bottom: var(--s-6); }
.vt-sig{
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
  display:block;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.vt-sig strong{ color: var(--accent); font-weight: 600; }

/* ============================================================
   CTA REPEAT
   ============================================================ */
.cta-repeat{
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
  border-top: var(--rule-w) solid var(--line);
  text-align: center;
  position:relative;
}
body.lostbusters .cta-repeat{ border-top-width:2px; border-top-color:var(--ink); }

.cta-head{
  font-family: var(--font-display);
  font-size: var(--tx-display-m);
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--letter-display);
  margin: 0 auto var(--s-7);
  max-width: 16ch;
}
body.lostbusters .cta-head, body.drainspotting .cta-head{ text-transform: uppercase; }
body.mobyleak .cta-head{ font-style: italic; line-height:1.1; max-width:20ch; }

.cta-repeat .form{ margin: 0 auto; text-align:left; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding: var(--s-5) 0;
  border-top: var(--rule-w) solid var(--line);
}
body.lostbusters footer{ border-top-width:2px; border-top-color:var(--ink); }
footer .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
}
footer a{ color: var(--ink2); }
footer a:hover{ color: var(--accent); }
footer .foot-mark{ display:flex; align-items:center; gap: 10px; }
footer .foot-mark .logo-mark{ width:10px; height:10px; }

/* ============================================================
   ENTRANCE ANIMATIONS (subtle)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0; transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .reveal.in{ opacity:1; transform: translateY(0); }
}

/* ============================================================
   MOBYLEAK WATERMARK (subtle whale)
   ============================================================ */
.moby-watermark{
  display:none;
  position:absolute;
  pointer-events:none;
  opacity:.05;
}
body.mobyleak .moby-watermark{ display:block; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  background: #FFFFFF;
  color: #141414;
  font-family: 'Inter', sans-serif;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
  width: 280px;
  max-width: calc(100vw - 48px);
  padding: 16px;
  display: none;
  font-size: 13px;
}
.tweaks.open{ display:block; }
.tweaks-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tweaks-title{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #141414;
  font-weight: 500;
}
.tweaks-close{
  width:24px; height:24px;
  display:grid; place-items:center;
  border-radius: 6px;
  color: #666;
}
.tweaks-close:hover{ background: rgba(0,0,0,0.05); color:#141414; }

.tweaks-section{ margin-bottom: 14px; }
.tweaks-section:last-child{ margin-bottom: 0; }
.tweaks-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 8px;
}

.tweak-variants{ display:flex; gap:6px; }
.tweak-variants button{
  flex:1;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.tweak-variants button:hover{ border-color: rgba(0,0,0,0.3); }
.tweak-variants button.active{ border-color: #141414; background: #f5f5f5; }
.tweak-variants .swatch{
  width: 100%; height: 28px;
  border-radius: 4px;
  position:relative;
  overflow:hidden;
}
.tweak-variants .swatch::after{
  content:"";
  position:absolute; right:4px; bottom:4px;
  width:8px; height:8px; border-radius:50%;
}
.tweak-variants [data-v="lostbusters"] .swatch{ background:#F2EDE4; border:1px solid rgba(0,0,0,0.08); }
.tweak-variants [data-v="lostbusters"] .swatch::after{ background:#CC1C1C; }
.tweak-variants [data-v="mobyleak"] .swatch{ background:#0C1A38; }
.tweak-variants [data-v="mobyleak"] .swatch::after{ background:#7AAAD4; }
.tweak-variants [data-v="drainspotting"] .swatch{ background:#0E0D07; }
.tweak-variants [data-v="drainspotting"] .swatch::after{ background:#E8650A; }

.tweak-seg{ display:flex; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow:hidden; }
.tweak-seg button{
  flex:1;
  padding: 8px;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #666;
  transition: background .15s;
}
.tweak-seg button:last-child{ border-right: none; }
.tweak-seg button:hover{ background: #f5f5f5; }
.tweak-seg button.active{ background: #141414; color:#fff; }


/* ================================================================
   LOSTBUSTERS — Direction "Éditorial"
   Mise en page magazine. Hero une colonne, modules empilés en lignes,
   pull-quote pour qui, lettre signée Vale Tudo, CTA condensé.
   ================================================================ */
body.lostbusters.lb-editorial {
  --bg: #F2EDE4;
  --paper: #FBF7EE;
  --bg2: #E8E2D8;
  --accent: #C92316;
  --shadow: none;
  --rule-w: 1px;
}

/* ----- Nav: hairline ----- */
body.lostbusters.lb-editorial nav.top { border-bottom-width: 1px; border-bottom-color: var(--ink); }
body.lostbusters.lb-editorial nav.top .pill {
  border-width: 1px; border-radius: 0;
}

/* ----- HERO: single column, H1 spans full width ----- */
body.lostbusters.lb-editorial .hero {
  grid-template-columns: 1fr;
  gap: var(--s-6);
  min-height: auto;
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
  align-items: start;
}
body.lostbusters.lb-editorial .hero-left { max-width: none; }

body.lostbusters.lb-editorial h1.hero-h1 {
  max-width: 16ch;
  font-size: clamp(calc(54px * var(--t-scale)), calc(7vw * var(--t-scale)), calc(96px * var(--t-scale)));
  line-height: 0.94;
  margin-bottom: var(--s-6);
}

/* Sub: serif italic lead — editorial drop after H1 */
body.lostbusters.lb-editorial .hero-sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(calc(22px * var(--t-scale)), calc(2.4vw * var(--t-scale)), calc(30px * var(--t-scale)));
  max-width: 40ch;
  color: var(--ink);
}

body.lostbusters.lb-editorial .hero-tag {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: none;
  padding: 4px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
  border-radius: 0;
  font-family: var(--font-body);
  letter-spacing: .24em;
}

/* Promise: framed editorial block w/ double-rules, bigger */
body.lostbusters.lb-editorial .hero-promise {
  max-width: 64ch;
  margin-top: var(--s-6);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
  font-size: calc(19px * var(--t-scale));
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--ink);
}
body.lostbusters.lb-editorial .hero-promise strong { font-style: italic; color: var(--accent); }
body.lostbusters.lb-editorial .hero-promise .sep { color: var(--ink); opacity: .35; }

/* Hero right: form moves below, centered */
body.lostbusters.lb-editorial .hero-right {
  padding-top: var(--s-7);
  margin-top: var(--s-3);
}
body.lostbusters.lb-editorial .hero-right .form { margin-left: 0; max-width: 580px; }

/* Form layout: email + URL on one row */
body.lostbusters.lb-editorial .form-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media(max-width: 640px) { body.lostbusters.lb-editorial .form-stack { grid-template-columns: 1fr; gap: var(--s-2); } }
body.lostbusters.lb-editorial .form-stack .field { border-bottom-width: 1px; border-bottom-color: var(--ink); }
body.lostbusters.lb-editorial .form-label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(15px * var(--t-scale));
}

/* Button: flat, no shadow, type-heavy */
body.lostbusters.lb-editorial .btn {
  box-shadow: none;
  border: none;
  padding: 18px 22px;
  font-size: calc(15px * var(--t-scale));
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}
body.lostbusters.lb-editorial .btn:hover { transform: none; box-shadow: none; background: #9A1C12; }
body.lostbusters.lb-editorial .btn:active { transform: none; box-shadow: none; }
body.lostbusters.lb-editorial .microcopy {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(13px * var(--t-scale));
}

/* ----- MODULES: stacked rows, big serif numerals on left ----- */
body.lostbusters.lb-editorial .modules {
  display: block;
  border: none;
}
body.lostbusters.lb-editorial .mod {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-7);
  align-items: start;
  padding: var(--s-7) 0;
  border-right: none;
  border-top: 1px solid var(--ink);
}
body.lostbusters.lb-editorial .mod:last-child { border-bottom: 1px solid var(--ink); }
@media(max-width: 640px) {
  body.lostbusters.lb-editorial .mod { grid-template-columns: 80px 1fr; gap: var(--s-5); }
}
body.lostbusters.lb-editorial .mod::before {
  content: attr(data-n);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.82;
  color: var(--accent);
  letter-spacing: -3px;
  grid-row: 1 / span 2;
  grid-column: 1;
}
body.lostbusters.lb-editorial .mod-num { display: none; }
body.lostbusters.lb-editorial .mod-orn { display: none; }
body.lostbusters.lb-editorial .mod h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(calc(28px * var(--t-scale)), calc(2.8vw * var(--t-scale)), calc(38px * var(--t-scale)));
  text-transform: none;
  letter-spacing: -0.5px;
  margin: 0 0 var(--s-3);
  max-width: 18ch;
}
body.lostbusters.lb-editorial .mod p { max-width: 56ch; font-size: calc(17px * var(--t-scale)); }

/* ----- DASHBOARD: clean centerfold ----- */
body.lostbusters.lb-editorial .preview-section { background: var(--bg2); color: var(--ink); }
body.lostbusters.lb-editorial .preview-section h2 { color: var(--ink); }
body.lostbusters.lb-editorial .dashboard {
  box-shadow: none;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0;
  background: var(--paper);
}
body.lostbusters.lb-editorial .db-frame { border: none; border-radius: 0; }

/* ----- STEPS ----- */
body.lostbusters.lb-editorial .step h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
}
body.lostbusters.lb-editorial .step-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--accent);
}
body.lostbusters.lb-editorial .reassure {
  border: none;
  padding: var(--s-4) 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(16px * var(--t-scale));
  position: relative;
}
body.lostbusters.lb-editorial .reassure::before,
body.lostbusters.lb-editorial .reassure::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink);
}
body.lostbusters.lb-editorial .reassure::before { top: 0; }
body.lostbusters.lb-editorial .reassure::after { top: 4px; }
body.lostbusters.lb-editorial .reassure em { color: var(--accent); font-style: italic; }

/* ----- POUR QUI: pull-quote ----- */
body.lostbusters.lb-editorial .pq {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
body.lostbusters.lb-editorial .pq h2 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: clamp(calc(34px * var(--t-scale)), calc(4.4vw * var(--t-scale)), calc(60px * var(--t-scale)));
  letter-spacing: -1px;
  line-height: 1.1;
  max-width: 24ch;
  margin: 0 auto;
  position: relative;
  padding: 0 var(--s-7);
}
body.lostbusters.lb-editorial .pq h2::before,
body.lostbusters.lb-editorial .pq h2::after {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(110px, 14vw, 200px);
  color: var(--accent);
  line-height: 0.6;
  position: absolute;
  opacity: .25;
}
body.lostbusters.lb-editorial .pq h2::before { content: "\201C"; top: -10px; left: -10px; }
body.lostbusters.lb-editorial .pq h2::after { content: "\201D"; bottom: -0.3em; right: -10px; }

body.lostbusters.lb-editorial .pq-body {
  max-width: 56ch;
  margin: var(--s-7) auto 0;
  text-align: left;
  font-family: var(--font-body);
  font-style: normal;
  font-size: calc(18px * var(--t-scale));
}
body.lostbusters.lb-editorial .pq-body p { text-align: left; }
body.lostbusters.lb-editorial .pq-excluded {
  display: inline-block;
  border: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--s-3) var(--s-5);
  background: transparent;
  margin-top: var(--s-5);
  margin-left: 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tx-body);
}

/* ----- VALE TUDO: signed letter ----- */
body.lostbusters.lb-editorial .vt {
  display: block;
  border: none;
  box-shadow: none;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-6);
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  position: relative;
}
body.lostbusters.lb-editorial .vt-label {
  background: transparent;
  color: var(--ink);
  padding: 0 0 var(--s-5);
  border-right: none;
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-6);
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  min-height: 0;
}
body.lostbusters.lb-editorial .vt-label-mark {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(calc(28px * var(--t-scale)), calc(3vw * var(--t-scale)), calc(40px * var(--t-scale)));
  line-height: 1;
  letter-spacing: -1px;
}
body.lostbusters.lb-editorial .vt-label-meta {
  font-family: var(--font-mono);
  text-align: right;
  opacity: 1;
  color: var(--ink2);
}
body.lostbusters.lb-editorial .vt-body { padding: 0; background: transparent; }
body.lostbusters.lb-editorial .vt-body h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.5px;
}
body.lostbusters.lb-editorial .vt-body p { font-family: 'Playfair Display', serif; font-size: calc(17px * var(--t-scale)); }
body.lostbusters.lb-editorial .vt-sig {
  text-align: right;
  border-top: 1px solid var(--ink);
  padding-top: var(--s-4);
}
body.lostbusters.lb-editorial .vt-sig::before {
  content: "Paris, mai 2026 · ";
  font-family: var(--font-mono);
  opacity: .6;
}

/* ----- CTA repeat: condensed banner ----- */
body.lostbusters.lb-editorial .cta-repeat {
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
  border-top: 3px double var(--ink);
}
body.lostbusters.lb-editorial .cta-head {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  text-transform: none;
  letter-spacing: -1px;
  font-size: clamp(calc(30px * var(--t-scale)), calc(3.4vw * var(--t-scale)), calc(52px * var(--t-scale)));
}
body.lostbusters.lb-editorial .cta-repeat .form { max-width: 580px; }
body.lostbusters.lb-editorial .cta-repeat .form-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media(max-width: 640px) {
  body.lostbusters.lb-editorial .cta-repeat .form-stack { grid-template-columns: 1fr; }
}
body.lostbusters.lb-editorial footer { border-top: 3px double var(--ink); }


/* ================================================================
   LOSTBUSTERS — Direction "Dossier"
   Esthétique fiche d'enquête. Form-first hero, modules cartes-index,
   pour qui en checklist, Vale Tudo en badge équipe.
   ================================================================ */
body.lostbusters.lb-dossier {
  --bg: #ECE5D2;
  --bg2: #DFD6BC;
  --paper: #F4EDD8;
  --ink: #141414;
  --accent: #C42119;
  --accent2: #1E3A6E;
  --shadow: 4px 4px 0 0 var(--ink);
  --rule-w: 1.5px;
}

/* ----- HERO: form on LEFT, copy on RIGHT ----- */
body.lostbusters.lb-dossier .hero {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}
body.lostbusters.lb-dossier .hero-right { grid-column: 1; grid-row: 1; }
body.lostbusters.lb-dossier .hero-left  { grid-column: 2; grid-row: 1; padding-top: var(--s-5); }
@media(max-width: 980px) {
  body.lostbusters.lb-dossier .hero { grid-template-columns: 1fr; }
  body.lostbusters.lb-dossier .hero-right, body.lostbusters.lb-dossier .hero-left { grid-column: 1; grid-row: auto; }
  body.lostbusters.lb-dossier .hero-left { padding-top: 0; }
}

/* Form as a "fiche de soumission" with metadata strip & paperclip */
body.lostbusters.lb-dossier .form {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: var(--s-7) var(--s-6) var(--s-6);
  padding-top: calc(var(--s-7) + 16px);
  position: relative;
  margin-left: 0;
  max-width: 100%;
  box-shadow: 6px 6px 0 0 var(--ink);
}
body.lostbusters.lb-dossier .form::before {
  content: "FICHE DE SOUMISSION · N° " counter(item, decimal-leading-zero);
  counter-reset: item 1;
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  padding: 7px 12px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
body.lostbusters.lb-dossier .form::after {
  /* paperclip silhouette */
  content: "";
  position: absolute;
  top: -10px; right: 24px;
  width: 18px; height: 50px;
  border: 2px solid #888;
  border-radius: 12px 12px 4px 4px;
  border-bottom-color: transparent;
  transform: rotate(8deg);
  opacity: 0.6;
}
body.lostbusters.lb-dossier .form-label {
  font-family: var(--font-mono);
  color: var(--ink2);
  letter-spacing: .2em;
}

/* Hero tag stays as a stamp, copy gets a side stamp */
body.lostbusters.lb-dossier .hero-tag {
  background: var(--accent);
  color: var(--accent-fg);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 0 var(--ink);
  padding: 6px 12px;
  font-weight: 600;
  letter-spacing: .22em;
}

body.lostbusters.lb-dossier h1.hero-h1 { max-width: 14ch; line-height: 0.96; }
body.lostbusters.lb-dossier .hero-sub { font-weight: 500; }
body.lostbusters.lb-dossier .hero-promise { font-weight: 400; }
body.lostbusters.lb-dossier .hero-promise strong { color: var(--accent); font-weight: 700; }
body.lostbusters.lb-dossier .hero-promise .sep { color: var(--ink2); opacity: .4; }

/* Form fields with heavier underlines */
body.lostbusters.lb-dossier .form-stack .field { border-bottom-color: var(--ink); border-bottom-width: 2px; }
body.lostbusters.lb-dossier .field-prefix { font-weight: 700; color: var(--ink); }

body.lostbusters.lb-dossier .btn {
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
}
body.lostbusters.lb-dossier .btn:hover { box-shadow: 6px 6px 0 0 var(--ink); transform: translate(-2px, -2px); }
body.lostbusters.lb-dossier .btn:active { box-shadow: 1px 1px 0 0 var(--ink); transform: translate(3px, 3px); }

/* ----- MODULES: as index cards, tilted, with metadata strip & corner fold ----- */
body.lostbusters.lb-dossier .modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  border: none;
  padding-top: var(--s-3);
}
@media(max-width: 780px) {
  body.lostbusters.lb-dossier .modules { grid-template-columns: 1fr; gap: var(--s-6); }
}
body.lostbusters.lb-dossier .mod {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: calc(var(--s-7) + 6px) var(--s-5) var(--s-6);
  position: relative;
  box-shadow: 5px 5px 0 0 var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
body.lostbusters.lb-dossier .mod:nth-child(1) { transform: rotate(-1deg); }
body.lostbusters.lb-dossier .mod:nth-child(2) { transform: rotate(0.6deg); }
body.lostbusters.lb-dossier .mod:nth-child(3) { transform: rotate(-0.4deg); }
body.lostbusters.lb-dossier .mod:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 8px 8px 0 0 var(--ink);
}

/* Metadata strip top */
body.lostbusters.lb-dossier .mod::before {
  content: "FILE " attr(data-n) " / 03  ·  STATUS: INVISIBLE";
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  padding: 6px 12px;
  text-transform: uppercase;
}
body.lostbusters.lb-dossier .mod:nth-child(2)::before {
  content: "FILE 02 / 03  ·  STATUS: ORPHELIN";
}
body.lostbusters.lb-dossier .mod:nth-child(3)::before {
  content: "FILE 03 / 03  ·  STATUS: QUICK WIN";
}

/* Corner fold detail */
body.lostbusters.lb-dossier .mod::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  background: linear-gradient(225deg, var(--bg2) 0 50%, transparent 50%);
  border-left: 1.5px solid var(--ink);
  border-top: 1.5px solid var(--ink);
}
body.lostbusters.lb-dossier .mod-num { display: none; }
body.lostbusters.lb-dossier .mod-orn { display: none; }
body.lostbusters.lb-dossier .mod h3 {
  font-size: clamp(calc(20px * var(--t-scale)), calc(2vw * var(--t-scale)), calc(26px * var(--t-scale)));
  margin: 0 0 var(--s-3);
}
body.lostbusters.lb-dossier .mod p { font-size: calc(15px * var(--t-scale)); }

/* ----- PREVIEW header: "CONFIDENTIEL" red strip ----- */
body.lostbusters.lb-dossier .dashboard {
  position: relative;
  box-shadow: 6px 6px 0 0 var(--ink);
  border: 1.5px solid var(--ink);
  padding: 0;
  background: var(--bg);
  border-radius: 0;
}
body.lostbusters.lb-dossier .dashboard::before {
  content: "CONFIDENTIEL · USAGE INTERNE · DOSSIER N° 0312";
  display: block;
  background: var(--accent);
  color: var(--accent-fg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .32em;
  padding: 7px;
  text-transform: uppercase;
}
body.lostbusters.lb-dossier .db-frame {
  border: none;
  border-top: 1.5px solid var(--ink);
  border-radius: 0;
}

/* ----- POUR QUI: ✓ / ✗ checklist ----- */
body.lostbusters.lb-dossier .pq {
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-8);
}
@media(max-width: 820px) {
  body.lostbusters.lb-dossier .pq { grid-template-columns: 1fr; gap: var(--s-5); }
}
body.lostbusters.lb-dossier .pq h2 {
  font-size: clamp(calc(28px * var(--t-scale)), calc(3vw * var(--t-scale)), calc(42px * var(--t-scale)));
  max-width: 16ch;
}
body.lostbusters.lb-dossier .pq-body p {
  position: relative;
  padding-left: 32px;
  font-size: var(--tx-body-l);
}
body.lostbusters.lb-dossier .pq-body p::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  color: var(--accent);
  font-weight: 700;
  font-size: 20px;
  font-family: var(--font-body);
  line-height: 1.4;
}
body.lostbusters.lb-dossier .pq-body strong { background: none; padding: 0; font-weight: 600; }
body.lostbusters.lb-dossier .pq-excluded {
  position: relative;
  padding: var(--s-4) 0 0 32px;
  background: transparent;
  border-left: none;
  border-top: 1.5px solid var(--ink);
  margin-top: var(--s-5);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--tx-body-l);
}
body.lostbusters.lb-dossier .pq-excluded::before {
  content: "✗";
  position: absolute; left: 0; top: var(--s-4);
  color: var(--ink2);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
}

/* ----- VALE TUDO: ID badge / team card ----- */
body.lostbusters.lb-dossier .vt {
  grid-template-columns: 240px 1fr;
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--ink);
  position: relative;
}
@media(max-width: 820px) {
  body.lostbusters.lb-dossier .vt { grid-template-columns: 1fr; }
}
body.lostbusters.lb-dossier .vt-label {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-6);
  border-right: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  justify-content: flex-start;
  min-height: 260px;
  position: relative;
}
/* "ID PHOTO" placeholder */
body.lostbusters.lb-dossier .vt-label::before {
  content: "";
  width: 84px; height: 84px;
  background:
    linear-gradient(135deg, transparent 45%, rgba(0,0,0,0.06) 45% 55%, transparent 55%),
    repeating-linear-gradient(45deg, var(--bg2) 0 5px, var(--bg) 5px 10px);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  margin-bottom: var(--s-2);
  flex-shrink: 0;
}
body.lostbusters.lb-dossier .vt-label::after {
  content: "ID · 001";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink2);
  border-top: 1px solid var(--ink);
  padding-top: var(--s-3);
  margin-top: auto;
  width: 100%;
}
body.lostbusters.lb-dossier .vt-label-mark {
  font-size: calc(22px * var(--t-scale));
  letter-spacing: 1.5px;
  line-height: 1;
}
body.lostbusters.lb-dossier .vt-label-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: .9;
  letter-spacing: .14em;
  margin-bottom: var(--s-3);
}

/* ----- CTA repeat ----- */
body.lostbusters.lb-dossier .cta-head { font-size: clamp(calc(28px * var(--t-scale)), calc(3.4vw * var(--t-scale)), calc(46px * var(--t-scale))); }
body.lostbusters.lb-dossier .cta-repeat .form {
  padding-top: calc(var(--s-7) + 16px);
}


/* ================================================================
   LOSTBUSTERS — Refinements (merged from explorations)
   Scoped to body.lostbusters (Affiche default direction)
   ================================================================ */

/* ----- Logo: ghost icon ----- */
.logo-mark svg { display: none; }
body.lostbusters .logo-mark {
  width: 28px; height: 28px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--accent);
  flex-shrink: 0;
}
body.lostbusters .logo-mark svg.mark-ghost {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 2px 0 var(--ink));
}

/* ----- "par Vale Tudo" anchor ----- */
body.lostbusters .nav-by {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--t-scale));
  letter-spacing: .1em;
  color: var(--ink2);
  text-decoration: none;
  transition: color .15s;
}
body.lostbusters .nav-by:hover { color: var(--accent); }
.nav-by:not(span):hover { color: var(--accent); }

/* ----- HERO: lift up, watermark, bigger promise ----- */
body.lostbusters .hero {
  min-height: 0;
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
  position: relative;
  align-items: center;
  gap: var(--s-8);
}

/* Ghost watermark — large, behind, low opacity */
.hero-ghost {
  position: absolute;
  right: 38%;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  width: clamp(240px, 26vw, 360px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s;
}
body.lostbusters .hero-ghost {
  opacity: 0.14;
  color: var(--accent);
}
.hero-ghost svg { width: 100%; height: auto; display: block; }
@media (max-width: 980px) {
  .hero-ghost { right: 0; top: auto; bottom: -10%; opacity: 0.08 !important; transform: rotate(-4deg); }
}

/* Make sure hero text & form sit above the watermark */
body.lostbusters .hero-left,
body.lostbusters .hero-right { position: relative; z-index: 1; }

/* Eyebrow tag — keep the stamp feel from mockup */
body.lostbusters .hero-tag {
  font-size: calc(12px * var(--t-scale));
  padding: 7px 14px;
  font-weight: 600;
}

/* H1 — slightly leaner */
body.lostbusters h1.hero-h1 {
  margin-bottom: var(--s-5);
  max-width: 16ch;
}

/* SUB-PROMISE — make it count: the main benefit */
body.lostbusters .hero-sub {
  font-size: clamp(calc(22px * var(--t-scale)), calc(2.4vw * var(--t-scale)), calc(30px * var(--t-scale)));
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  max-width: 32ch;
  margin-bottom: var(--s-6);
}

/* PROMISE LIST — bullet list with red action verbs */
body.lostbusters .hero-promise {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 38ch;
}
body.lostbusters .hero-promise li {
  position: relative;
  padding-left: 28px;
  font-size: calc(18px * var(--t-scale));
  line-height: 1.5;
  color: var(--ink);
}
body.lostbusters .hero-promise li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 14px; height: 3px;
  background: var(--accent);
  transform: skewX(-15deg);
}
body.lostbusters .hero-promise strong {
  color: var(--accent);
  font-weight: 700;
}

/* Other variants still get the inline promise treatment */
body.mobyleak .hero-promise,
body.drainspotting .hero-promise {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  font-size: var(--tx-body-l);
  line-height: 1.55;
  color: var(--ink2);
  max-width: 44ch;
}
body.mobyleak .hero-promise li,
body.drainspotting .hero-promise li {
  display: inline;
}
body.mobyleak .hero-promise li:not(:last-child)::after,
body.drainspotting .hero-promise li:not(:last-child)::after {
  content: " · ";
  color: var(--accent);
  opacity: .7;
  margin: 0 4px;
}
body.mobyleak .hero-promise strong { color: var(--ink); font-weight: 700; font-style: italic; }
body.drainspotting .hero-promise strong { color: var(--ink); font-weight: 600; }

/* ----- FORM: cartouche treatment ----- */
body.lostbusters .form {
  background: #FBF7EE;
  padding: var(--s-6);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(20,20,20,0.08),
    8px 8px 0 -1px rgba(20,20,20,0.92);
  position: relative;
}
body.lostbusters .form::before {
  /* subtle tape-corner cue, top-left */
  content: "";
  position: absolute;
  top: -8px; left: 24px;
  width: 56px; height: 16px;
  background: rgba(204,28,28,0.18);
  border: 1px dashed rgba(204,28,28,0.35);
  transform: rotate(-3deg);
  pointer-events: none;
}

body.lostbusters .form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
}
body.lostbusters .form-label {
  margin-bottom: 0;
  flex-shrink: 0;
}
body.lostbusters .form-label::after {
  display: none;
}

/* 100% gratuit badge */
.free-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--t-scale));
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
  transform: rotate(2deg);
  flex-shrink: 0;
}

/* Field underlines on cartouche background */
body.lostbusters .form-stack .field {
  border-bottom-color: var(--ink);
  border-bottom-width: 1.5px;
}

/* Microcopy more present */
body.lostbusters .microcopy {
  font-weight: 500;
  color: var(--ink);
  opacity: .7;
}

/* Form-head on the CTA-repeat form: same treatment */
body.lostbusters .cta-repeat .form { background: #FBF7EE; }
body.lostbusters .cta-repeat .form-head { display: flex; }

/* For other variants, keep form-head simple (no shadow / no badge) */
body.mobyleak .free-badge {
  background: transparent;
  color: var(--accent2);
  border: 1px solid var(--accent2);
  box-shadow: none;
  transform: none;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: none;
  font-family: var(--font-body);
}
body.drainspotting .free-badge {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  box-shadow: none;
  transform: none;
}
body.mobyleak .form-head,
body.drainspotting .form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
}
body.mobyleak .form-head .form-label,
body.drainspotting .form-head .form-label {
  margin-bottom: 0;
  flex-shrink: 0;
}
body.mobyleak .form-head .form-label::after,
body.drainspotting .form-head .form-label::after {
  display: none;
}

/* ----- SECTION SPACING & H2 ----- */
/* Reduce top padding of first section after hero so the next block peeks */
body.lostbusters main > section:first-of-type { padding-top: var(--s-7); }

/* Bigger section heads on Lostbusters */
body.lostbusters .section h2 {
  font-size: clamp(calc(48px * var(--t-scale)), calc(6.8vw * var(--t-scale)), calc(92px * var(--t-scale)));
  letter-spacing: 0.5px;
  line-height: 0.95;
}
body.lostbusters .cta-head {
  font-size: clamp(calc(40px * var(--t-scale)), calc(5.4vw * var(--t-scale)), calc(76px * var(--t-scale)));
}

/* ----- MODULES: big red number, no target circle ----- */
body.lostbusters .mod-orn { display: none !important; }
body.lostbusters .mod {
  padding-top: var(--s-6);
}
body.lostbusters .mod-num {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: var(--s-2);
  line-height: 0.85;
  text-shadow: 3px 3px 0 var(--ink);
}
body.lostbusters .mod-num::after { display: none; }
body.lostbusters .mod h3 {
  font-size: clamp(calc(24px * var(--t-scale)), calc(2.4vw * var(--t-scale)), calc(34px * var(--t-scale)));
  margin-top: var(--s-1);
}


/* ================================================================
   LOSTBUSTERS — Pass 2 refinements
   ================================================================ */

/* 1. Remove the red tape detail on the form ----------------- */
body.lostbusters .form::before { display: none !important; }

/* 2. H2 sizes: bring back to reasonable, big but not monumental */
body.lostbusters .section h2,
body.lostbusters .preview-section h2 {
  font-size: clamp(calc(36px * var(--t-scale)), calc(4.6vw * var(--t-scale)), calc(64px * var(--t-scale)));
  letter-spacing: 0.5px;
  line-height: 0.98;
}
body.lostbusters .cta-head {
  font-size: clamp(calc(30px * var(--t-scale)), calc(3.8vw * var(--t-scale)), calc(52px * var(--t-scale)));
  letter-spacing: 0.5px;
}

/* 3. Visual separation: alternate section backgrounds --------- */
body.lostbusters main > section:nth-of-type(1) { background: var(--bg2); }  /* Modules */
body.lostbusters main > section:nth-of-type(4) { background: var(--bg2); }  /* Pour qui */

/* Drop the section+section ruled border on Lostbusters — bg shift carries it */
body.lostbusters .section + .section { border-top: none; }
body.lostbusters .cta-repeat { border-top: none; }
body.lostbusters footer { border-top: 1.5px solid var(--ink); }

/* Inner-section module border (the 3-cell box) gets a touch of contrast on bg2 */
body.lostbusters main > section:nth-of-type(1) .modules { border-color: var(--ink); }

/* 4. STEPS — remove "/03" already done in HTML. Reassure stamp style */
body.lostbusters .reassure {
  border: none !important;
  background: transparent;
  padding: var(--s-5) 0 0;
  font-family: var(--font-display);
  font-size: clamp(calc(22px * var(--t-scale)), calc(2.6vw * var(--t-scale)), calc(36px * var(--t-scale)));
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-7);
}
body.lostbusters .reassure em {
  font-style: normal;
  color: var(--ink);
  font-weight: 400;
}
body.lostbusters .reassure span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
}
body.lostbusters .reassure span:not(:last-child)::after {
  content: "✱";
  color: var(--accent);
  font-size: 0.75em;
  font-family: var(--font-body);
  line-height: 1;
}

/* 5. POUR QUI — unify into single title with "Pour qui :" prefix */
body.lostbusters main > section:nth-of-type(4) > .wrap > .eyebrow { display: none; }
body.lostbusters .pq h2::before {
  content: "Pour qui : ";
  color: var(--accent);
}
body.lostbusters .pq h2 {
  max-width: 26ch;
  line-height: 1;
}

/* 6. VALE TUDO — discrete editorial block ------------------- */
/* Hide the redundant eyebrow */
body.lostbusters main > section:nth-of-type(5) > .wrap > .eyebrow { display: none; }

/* Section less prominent */
body.lostbusters main > section:nth-of-type(5) {
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

/* Drop the big Vale Tudo brand box + shadow + border */
body.lostbusters .vt {
  display: block;
  border: none !important;
  box-shadow: none !important;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
body.lostbusters .vt-label { display: none; }

body.lostbusters .vt-body {
  padding: 0;
  background: transparent;
}
body.lostbusters .vt-body h3 {
  font-size: clamp(calc(22px * var(--t-scale)), calc(2.2vw * var(--t-scale)), calc(30px * var(--t-scale)));
  margin-bottom: var(--s-4);
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--ink);
}
body.lostbusters .vt-body p {
  font-size: calc(15px * var(--t-scale));
  line-height: 1.65;
  color: var(--ink2);
  margin-bottom: var(--s-3);
  max-width: 56ch;
}
body.lostbusters .vt-body p:last-of-type { margin-bottom: var(--s-5); }
body.lostbusters .vt-sig {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  font-size: calc(10px * var(--t-scale));
  opacity: 0.85;
}


/* ================================================================
   LOSTBUSTERS — Pass 3 refinements
   ================================================================ */

/* ----- 1. Stronger section background contrast ----- */
/* Custom alt-cream, more pronounced than --bg2 */
body.lostbusters main > section:nth-of-type(1),
body.lostbusters main > section:nth-of-type(4) {
  background: #DCCFB1;
}
/* CTA repeat ends with the same alt-cream for separation */
body.lostbusters .cta-repeat {
  background: #DCCFB1;
  border-top: none;
}

/* Module box border stays on the lighter ink for legibility on alt bg */
body.lostbusters main > section:nth-of-type(1) .modules { border-color: var(--ink); }

/* ----- 2. 100% GRATUIT badge — much more present ----- */
body.lostbusters .free-badge {
  background: var(--accent);
  color: var(--accent-fg);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  transform: rotate(3deg);
  font-family: var(--font-display);
  font-size: calc(14px * var(--t-scale));
  font-weight: 400;
  letter-spacing: .14em;
  padding: 5px 12px 4px;
  line-height: 1;
}

/* ----- 3. Reassure line: less display-y, smaller, more discrete ----- */
body.lostbusters .reassure {
  font-family: var(--font-body);
  font-size: calc(13px * var(--t-scale));
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink2);
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-3) 0 0;
}
body.lostbusters .reassure em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
body.lostbusters .reassure span:not(:last-child)::after {
  content: "✱";
  color: var(--accent);
  font-size: 1em;
  margin-left: var(--s-4);
  letter-spacing: 0;
}

/* ----- 4. Pour qui ? (with question mark) ----- */
body.lostbusters .pq h2::before {
  content: "Pour qui ? ";
  color: var(--accent);
}

/* ----- 5. Vale Tudo — h3 styled as h2, graphic flourish ----- */
/* Show the eyebrow back (we'll style discreetly) */
body.lostbusters main > section:nth-of-type(5) > .wrap > .eyebrow { display: flex; }

/* Section back to wider — give it section-head presence */
body.lostbusters .vt {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* h3 in vt-body becomes the section title */
body.lostbusters .vt-body { padding: 0; background: transparent; }
body.lostbusters .vt-body h3 {
  font-family: var(--font-display);
  font-size: clamp(calc(36px * var(--t-scale)), calc(4.6vw * var(--t-scale)), calc(64px * var(--t-scale)));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 0.98;
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  margin: 0 0 var(--s-6);
  max-width: 18ch;
  font-style: normal;
}

/* Body in 2-column layout for breathing room; keep reading width tight */
body.lostbusters .vt-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-7);
  align-items: start;
}
body.lostbusters .vt-body h3 { grid-column: 1; grid-row: 1 / span 6; padding-right: var(--s-5); }
body.lostbusters .vt-body p {
  grid-column: 2;
  font-size: calc(16px * var(--t-scale));
  line-height: 1.65;
  color: var(--ink2);
  margin-bottom: var(--s-4);
  max-width: 60ch;
}
body.lostbusters .vt-body p:last-of-type { margin-bottom: var(--s-5); }
body.lostbusters .vt-sig {
  grid-column: 2;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  font-size: calc(10px * var(--t-scale));
  opacity: 0.85;
  margin-top: 0;
}
@media (max-width: 820px) {
  body.lostbusters .vt-body { grid-template-columns: 1fr; gap: var(--s-5); }
  body.lostbusters .vt-body h3 { grid-column: 1; grid-row: auto; padding-right: 0; }
  body.lostbusters .vt-body p,
  body.lostbusters .vt-sig { grid-column: 1; }
}

/* Graphic flourish: discreet ghost watermark in section corner */
.vt-ghost {
  position: absolute;
  right: 0;
  bottom: -10%;
  width: clamp(180px, 18vw, 240px);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transform: rotate(-8deg);
  transition: opacity .4s;
}
body.lostbusters .vt-ghost {
  opacity: 0.06;
  color: var(--ink);
}
.vt-ghost svg { width: 100%; height: auto; display: block; }
body.lostbusters .vt-body, body.lostbusters .vt-body h3 { position: relative; z-index: 1; }
body.lostbusters main > section:nth-of-type(5) { position: relative; overflow: hidden; }

/* Restore the Vale Tudo eyebrow but reroute it to be section eyebrow only */
body.lostbusters main > section:nth-of-type(5) > .wrap > .eyebrow {
  margin-bottom: var(--s-6);
}

/* ----- 6. CTA final — alt-cream bg + button still red ----- */
/* (Background is handled above with .cta-repeat) */
body.lostbusters .cta-repeat .form {
  background: #FBF7EE;
}

/* Dashboard h2 wraps cleanly without hard break */
body.lostbusters .preview-section h2 { text-wrap: balance; }


/* ================================================================
   LOSTBUSTERS — Pass 4 refinements
   ================================================================ */

/* ----- 1. Hero: more breathing room ----- */
body.lostbusters .hero {
  padding-top: var(--s-8);
  padding-bottom: var(--s-9);
  gap: var(--s-9);
}
body.lostbusters .hero-tag { margin-bottom: var(--s-6); }
body.lostbusters h1.hero-h1 { margin-bottom: var(--s-6); }
body.lostbusters .hero-sub { margin-bottom: var(--s-7); }
body.lostbusters .hero-promise { gap: var(--s-4); }

/* ----- 2. Reassure line: a notch bigger ----- */
body.lostbusters .reassure {
  font-size: calc(15px * var(--t-scale));
  gap: var(--s-5);
}

/* ----- 3. Vale Tudo: hide eyebrow, tighter paragraphs, bigger body ----- */
body.lostbusters main > section:nth-of-type(5) > .wrap > .eyebrow {
  display: none !important;
}
body.lostbusters .vt-body p {
  font-size: calc(17px * var(--t-scale));
  line-height: 1.55;
  margin-bottom: var(--s-3);
}
body.lostbusters .vt-body p:last-of-type { margin-bottom: var(--s-4); }

/* ----- 4. CTA action sub-line ----- */
.cta-action {
  font-family: var(--font-body);
  font-size: clamp(calc(17px * var(--t-scale)), calc(1.6vw * var(--t-scale)), calc(20px * var(--t-scale)));
  line-height: 1.5;
  color: var(--ink2);
  margin: calc(0px - var(--s-5)) auto var(--s-6);
  max-width: 56ch;
}
body.lostbusters .cta-action {
  color: var(--ink);
  font-weight: 500;
}
body.mobyleak .cta-action { font-style: italic; }

/* ----- 5. Footer: anchor styling ----- */
.foot-mark {
  text-decoration: none;
  transition: color .15s;
}
body.lostbusters footer .foot-mark .logo-mark { width: 14px; height: 14px; }
body.lostbusters footer .foot-mark:hover { color: var(--accent); }
body.lostbusters footer .foot-mark:hover .logo-mark { filter: drop-shadow(2px 2px 0 var(--ink)); }

/* Hide the watermark SVG drop-shadow on the small footer ghost */
body.lostbusters footer .logo-mark svg { filter: none; }


/* ================================================================
   LOSTBUSTERS — Pass 5 refinements
   ================================================================ */

/* 1. Vale Tudo: tighter paragraphs + team illustration */
body.lostbusters .vt-body p {
  margin-bottom: var(--s-2);
  font-size: calc(17px * var(--t-scale));
  line-height: 1.5;
}
body.lostbusters .vt-body p:last-of-type { margin-bottom: var(--s-4); }

/* Team illustration: poster mark in the left column */
.vt-illustration { display: none; }
body.lostbusters .vt-illustration {
  display: block;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-top: var(--s-5);
  max-width: 340px;
}
body.lostbusters .vt-body h3 {
  grid-row: 1;
  padding-right: var(--s-5);
}
body.lostbusters .vt-body { row-gap: 0; }
.vt-illustration svg { width: 100%; height: auto; display: block; }

@media (max-width: 820px) {
  body.lostbusters .vt-illustration {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--s-5);
    max-width: 300px;
  }
}

/* 2. CTA final: alignement avec le formulaire (max-width = form width) */
body.lostbusters .cta-head {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(calc(28px * var(--t-scale)), calc(3.4vw * var(--t-scale)), calc(46px * var(--t-scale)));
  line-height: 1;
}
body.lostbusters .cta-action {
  max-width: 460px;
  font-size: calc(17px * var(--t-scale));
}

/* Cta-name keeps the brand visible but stays inline */
#cta-name { font-weight: 600; }


/* ================================================================
   LOSTBUSTERS — Pass 6 refinements
   ================================================================ */

/* 1. Vale Tudo: clean 2x2 grid layout (title TL, illustration BL, text spans right col) */
body.lostbusters .vt-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--s-7);
  row-gap: var(--s-5);
  align-items: start;
}
body.lostbusters .vt-body > h3 {
  grid-column: 1;
  grid-row: 1;
  padding-right: var(--s-4);
}
body.lostbusters .vt-body > .vt-text {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}
body.lostbusters .vt-body > .vt-illustration {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0;
  padding-top: var(--s-5);
  max-width: 340px;
}

/* Paragraphs inside .vt-text */
body.lostbusters .vt-text p {
  margin-bottom: var(--s-3);
}
body.lostbusters .vt-text p:last-of-type { margin-bottom: var(--s-4); }
body.lostbusters .vt-text .vt-sig { margin-top: auto; }

@media (max-width: 820px) {
  body.lostbusters .vt-body {
    display: block;
  }
  body.lostbusters .vt-body > h3 { padding-right: 0; margin-bottom: var(--s-5); }
  body.lostbusters .vt-body > .vt-illustration { max-width: 300px; margin-top: var(--s-5); }
}

/* For other variants the .vt-text wrapper is invisible (flow as before) */
body.mobyleak .vt-text,
body.drainspotting .vt-text { display: contents; }

/* 2. CTA action: bigger text */
body.lostbusters .cta-action {
  max-width: 480px;
  font-size: calc(20px * var(--t-scale));
  line-height: 1.4;
  font-weight: 500;
}


/* ================================================================
   MOBY LEAK + DRAINSPOTTING — Apply the refinements done on Lostbusters
   (visual signature stays variant-specific)
   ================================================================ */

/* ===== HERO: same breathing room, bigger sub-promise ===== */
body.mobyleak .hero, body.drainspotting .hero {
  padding-top: var(--s-8);
  padding-bottom: var(--s-9);
  gap: var(--s-9);
  min-height: 0;
  position: relative;
}
body.mobyleak .hero-tag, body.drainspotting .hero-tag { margin-bottom: var(--s-6); }
body.mobyleak h1.hero-h1, body.drainspotting h1.hero-h1 { margin-bottom: var(--s-6); }
body.mobyleak .hero-sub, body.drainspotting .hero-sub { margin-bottom: var(--s-7); }

body.mobyleak .hero-sub {
  font-size: clamp(calc(22px * var(--t-scale)), calc(2.4vw * var(--t-scale)), calc(30px * var(--t-scale)));
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
  max-width: 32ch;
}
body.drainspotting .hero-sub {
  font-size: clamp(calc(22px * var(--t-scale)), calc(2.4vw * var(--t-scale)), calc(30px * var(--t-scale)));
  font-weight: 600;
  color: var(--ink);
  max-width: 30ch;
}

/* Promise list — bullets per variant */
body.mobyleak .hero-promise,
body.drainspotting .hero-promise {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 42ch;
  font-size: calc(18px * var(--t-scale));
  line-height: 1.5;
}
body.mobyleak .hero-promise li,
body.drainspotting .hero-promise li {
  position: relative;
  padding-left: 28px;
  display: list-item;
  list-style: none;
}
body.mobyleak .hero-promise li::after,
body.drainspotting .hero-promise li::after { display: none; }
body.mobyleak .hero-promise li::before {
  content: "⁘";
  position: absolute;
  left: 0; top: 0.05em;
  color: var(--accent2);
  font-size: 1.1em;
}
body.mobyleak .hero-promise li { font-style: italic; color: var(--ink); }
body.mobyleak .hero-promise strong { color: var(--accent); font-style: italic; font-weight: 700; }

body.drainspotting .hero-promise li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05em;
}
body.drainspotting .hero-promise li { color: var(--ink); }
body.drainspotting .hero-promise strong { color: var(--accent); font-weight: 700; }

/* ===== FORM CARTOUCHE per variant ===== */
body.mobyleak .form {
  background: rgba(245,237,208,0.04);
  border: 1px solid var(--line);
  padding: var(--s-6);
  border-radius: 6px;
  box-shadow: none;
  position: relative;
}
body.mobyleak .form::before { display: none; }

body.drainspotting .form {
  background: #1A1810;
  border: 1.5px solid var(--accent);
  padding: var(--s-6);
  border-radius: 0;
  box-shadow: 5px 5px 0 0 var(--accent);
  position: relative;
}
body.drainspotting .form::before { display: none; }

/* form-head row with title + 100% gratuit badge */
body.mobyleak .form-head, body.drainspotting .form-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
body.mobyleak .form-head .form-label,
body.drainspotting .form-head .form-label { margin-bottom: 0; flex-shrink: 0; }
body.mobyleak .form-head .form-label::after,
body.drainspotting .form-head .form-label::after { display: none; }

body.mobyleak .free-badge {
  background: transparent;
  color: var(--accent2);
  border: 1px solid var(--accent2);
  box-shadow: none;
  transform: none;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
  font-size: calc(12px * var(--t-scale));
  padding: 4px 10px;
}
body.drainspotting .free-badge {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1.5px solid var(--accent);
  box-shadow: none;
  transform: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: calc(13px * var(--t-scale));
  font-weight: 400;
  padding: 5px 10px;
}

body.mobyleak .form-stack .field {
  border-bottom: 1px solid var(--line);
}
body.mobyleak .form-stack .field:focus-within { border-bottom-color: var(--accent); }
body.drainspotting .form-stack .field {
  border-bottom: 1.5px solid rgba(239,234,210,0.25);
}
body.drainspotting .form-stack .field:focus-within { border-bottom-color: var(--accent); }

/* Microcopy: more present */
body.mobyleak .microcopy { color: var(--ink2); }
body.drainspotting .microcopy { color: var(--ink); opacity: .7; }

/* ===== SECTION ALT BG per variant ===== */
body.mobyleak main > section:nth-of-type(1),
body.mobyleak main > section:nth-of-type(4) {
  background: #142B5C;          /* clearly lighter navy than --bg */
}
body.mobyleak .cta-repeat {
  background: #142B5C;
  border-top: none;
}

body.drainspotting main > section:nth-of-type(1),
body.drainspotting main > section:nth-of-type(4) {
  background: #221F15;          /* warmer/lighter brown-black */
}
body.drainspotting .cta-repeat {
  background: #221F15;
  border-top: none;
}

/* Drop section+section ruled borders (bg shift carries it) */
body.mobyleak .section + .section,
body.drainspotting .section + .section { border-top: none; }

/* ===== H2 sizes — reasonable ===== */
body.mobyleak .section h2, body.mobyleak .preview-section h2 {
  font-size: clamp(calc(34px * var(--t-scale)), calc(4.4vw * var(--t-scale)), calc(60px * var(--t-scale)));
  line-height: 1.1;
}
body.drainspotting .section h2, body.drainspotting .preview-section h2 {
  font-size: clamp(calc(36px * var(--t-scale)), calc(4.6vw * var(--t-scale)), calc(64px * var(--t-scale)));
  line-height: 1;
}
body.mobyleak .cta-head {
  font-size: clamp(calc(30px * var(--t-scale)), calc(3.6vw * var(--t-scale)), calc(48px * var(--t-scale)));
  line-height: 1.1;
}
body.drainspotting .cta-head {
  font-size: clamp(calc(30px * var(--t-scale)), calc(3.6vw * var(--t-scale)), calc(48px * var(--t-scale)));
  line-height: 1;
}

/* ===== MODULES: no orn, no "Module" word, big numbers per variant ===== */
body.mobyleak .mod-orn, body.drainspotting .mod-orn { display: none !important; }
body.mobyleak .mod-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 5.5vw, 84px);
  font-style: italic;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -1px;
  line-height: 0.85;
  margin-bottom: var(--s-3);
  display: block;
}
body.mobyleak .mod-num::after { display: none; }
body.drainspotting .mod-num {
  font-family: var(--font-display);
  font-size: clamp(60px, 6.4vw, 88px);
  color: var(--accent);
  letter-spacing: 1.5px;
  line-height: 0.85;
  margin-bottom: var(--s-2);
  display: block;
  text-transform: uppercase;
}
body.drainspotting .mod-num::after { display: none; }

/* ===== REASSURE: typographic banner, no frame ===== */
body.mobyleak .reassure, body.drainspotting .reassure {
  border: none !important;
  background: transparent;
  padding: var(--s-3) 0 0;
  margin-top: var(--s-7);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
body.mobyleak .reassure {
  font-family: var(--font-body);
  font-size: calc(15px * var(--t-scale));
  font-style: italic;
  color: var(--ink2);
}
body.mobyleak .reassure em { color: var(--ink); font-style: italic; font-weight: 700; }
body.mobyleak .reassure span:not(:last-child)::after {
  content: "✦"; color: var(--accent2);
  font-size: 1em; margin-left: var(--s-4);
}
body.drainspotting .reassure {
  font-family: var(--font-body);
  font-size: calc(14px * var(--t-scale));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink2);
  font-weight: 500;
}
body.drainspotting .reassure em { color: var(--ink); font-style: normal; font-weight: 700; }
body.drainspotting .reassure span:not(:last-child)::after {
  content: "→"; color: var(--accent);
  font-size: 1.1em; margin-left: var(--s-4); font-weight: 700;
}

/* ===== POUR QUI: hide eyebrow, prefix in accent color ===== */
body.mobyleak main > section:nth-of-type(4) > .wrap > .eyebrow,
body.drainspotting main > section:nth-of-type(4) > .wrap > .eyebrow { display: none; }

body.mobyleak .pq h2::before {
  content: "Pour qui ? ";
  color: var(--accent2);
  font-style: italic;
}
body.drainspotting .pq h2::before {
  content: "Pour qui ? ";
  color: var(--accent);
}

/* ===== VALE TUDO: same restructure — h3 promoted, body in right col ===== */
body.mobyleak main > section:nth-of-type(5) > .wrap > .eyebrow,
body.drainspotting main > section:nth-of-type(5) > .wrap > .eyebrow { display: none; }

body.mobyleak main > section:nth-of-type(5),
body.drainspotting main > section:nth-of-type(5) {
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
  position: relative;
}

body.mobyleak .vt, body.drainspotting .vt {
  display: block;
  border: none !important;
  box-shadow: none !important;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body.mobyleak .vt-label, body.drainspotting .vt-label { display: none; }

body.mobyleak .vt-body, body.drainspotting .vt-body {
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--s-7);
  row-gap: var(--s-5);
  align-items: start;
}
body.mobyleak .vt-body > h3, body.drainspotting .vt-body > h3 {
  grid-column: 1;
  grid-row: 1;
  padding-right: var(--s-4);
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(calc(34px * var(--t-scale)), calc(4.4vw * var(--t-scale)), calc(60px * var(--t-scale)));
  max-width: 18ch;
}
body.mobyleak .vt-body > h3 {
  font-style: italic; font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
body.drainspotting .vt-body > h3 {
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.5px;
}
body.mobyleak .vt-body > .vt-text, body.drainspotting .vt-body > .vt-text {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}
body.mobyleak .vt-text p {
  font-style: italic;
  font-size: calc(17px * var(--t-scale));
  line-height: 1.55;
  margin-bottom: var(--s-3);
  color: var(--ink2);
}
body.drainspotting .vt-text p {
  font-size: calc(17px * var(--t-scale));
  line-height: 1.55;
  margin-bottom: var(--s-3);
  color: var(--ink2);
}
body.mobyleak .vt-text p:last-of-type,
body.drainspotting .vt-text p:last-of-type { margin-bottom: var(--s-4); }
body.mobyleak .vt-text .vt-sig, body.drainspotting .vt-text .vt-sig { margin-top: auto; }

/* Hide the Lostbusters-specific illustration on non-Lost variants */
body.mobyleak .vt-illustration,
body.drainspotting .vt-illustration { display: none; }

@media (max-width: 820px) {
  body.mobyleak .vt-body, body.drainspotting .vt-body { display: block; }
  body.mobyleak .vt-body > h3, body.drainspotting .vt-body > h3 {
    padding-right: 0;
    margin-bottom: var(--s-5);
  }
}

/* ===== CTA final: head + action centered with form width ===== */
body.mobyleak .cta-head, body.drainspotting .cta-head {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
body.mobyleak .cta-action {
  max-width: 460px;
  font-size: calc(19px * var(--t-scale));
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
body.drainspotting .cta-action {
  max-width: 460px;
  font-size: calc(20px * var(--t-scale));
  font-weight: 500;
  color: var(--ink);
}

/* Nav anchor for "par Vale Tudo" */
body.mobyleak .nav-by, body.drainspotting .nav-by {
  text-decoration: none;
  transition: color .15s;
}
body.mobyleak .nav-by:hover { color: var(--accent); }
body.drainspotting .nav-by:hover { color: var(--accent); }

/* Footer link */
body.mobyleak footer .foot-mark, body.drainspotting footer .foot-mark {
  text-decoration: none;
  transition: color .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.mobyleak footer .foot-mark:hover { color: var(--accent); }
body.drainspotting footer .foot-mark:hover { color: var(--accent); }
body.mobyleak footer .logo-mark, body.drainspotting footer .logo-mark { width: 12px; height: 12px; }


/* ================================================================
   MOBY LEAK — Pass 6 retouches (whale identity, form, dashboard, sailors)
   ================================================================ */

/* --- Whale logo / ghost toggle --- */
.logo-mark .mark-whale { display: none; }
body.mobyleak .logo-mark {
  width: 34px; height: 22px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--accent);
  display: flex;
  align-items: center;
}
body.mobyleak .logo-mark .mark-ghost { display: none !important; }
body.mobyleak .logo-mark .mark-whale { display: block !important; width: 100%; height: auto; }
body.mobyleak footer .logo-mark { width: 30px; height: 20px; }

/* --- Hero illustration grid isolation (belt + suspenders) --- */
.hero-whale { display: none !important; }
.hero-drain { display: none !important; }
body.mobyleak    .hero-whale { display: block !important; }
body.drainspotting .hero-drain { display: block !important; }

/* --- 1. Whale watermark near the form (hero) --- */
.hero-whale { display: none; }
body.mobyleak .hero-whale {
  display: block;
  position: absolute;
  right: 34%;
  top: 52%;
  transform: translateY(-50%) rotate(-6deg);
  width: clamp(280px, 30vw, 420px);
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0.13;
}
.hero-whale svg { width: 100%; height: auto; display: block; }
@media (max-width: 980px) {
  body.mobyleak .hero-whale { right: -4%; top: auto; bottom: -8%; opacity: 0.08; }
}
/* Make sure ghost stays hidden on moby */
body.mobyleak .hero-ghost { display: none; }
/* keep hero text + form above the whale watermark */
body.mobyleak .hero-left,
body.mobyleak .hero-right { position: relative; z-index: 1; }

/* --- 2 + 8. Button: distinct steel-blue fill, dark text (both forms) --- */
body.mobyleak .btn {
  background: var(--accent);
  color: #0A1730;
  border: 1px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  font-size: calc(20px * var(--t-scale));
  box-shadow: 0 6px 22px rgba(122,170,212,0.22);
}
body.mobyleak .btn:hover {
  background: #A6CBE8;
  border-color: #A6CBE8;
  color: #0A1730;
}
body.mobyleak .btn .arrow { color: #0A1730; }

/* --- 6. 100% gratuit badge: filled gold, more present --- */
body.mobyleak .free-badge {
  background: var(--accent2);
  color: #0A1730;
  border: none;
  box-shadow: 0 3px 10px rgba(212,184,131,0.28);
  transform: none;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: calc(11px * var(--t-scale));
  padding: 6px 11px;
  border-radius: 3px;
}

/* --- 7. "Réservez votre accès" — light blue, present but soft (both forms) --- */
body.mobyleak .form-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  font-size: calc(22px * var(--t-scale));
}
/* bottom (cta) form: label sits alone — give it breathing room + match */
body.mobyleak .cta-repeat .form > .form-label {
  display: block;
  margin-bottom: var(--s-4);
}
body.mobyleak .cta-repeat .form > .form-label::after { display: none; }

/* --- 3 (rev). Dashboard: LIGHT cool surface, navy text, clear sections --- */
body.mobyleak .dashboard {
  --db-bg:        #F4F7FB;   /* card surface — cool near-white */
  --db-bg-soft:   #E6ECF4;   /* headers / inner panels */
  --db-fg:        #14264A;   /* deep navy text */
  --db-fg2:       #475a76;
  --db-fg3:       #8190a4;
  --db-line:      rgba(20,38,74,0.10);
  --db-line-strong: rgba(20,38,74,0.18);
  --db-info:      #2F6FB5;
  /* alerts: brick-coral / amber / green — no pink, no yellow */
  --db-danger:    #C0473A;
  --db-danger-bg: rgba(192,71,58,0.10);
  --db-danger-ink:#A8392E;
  --db-warn:      #B9822A;
  --db-warn-bg:   rgba(185,130,42,0.12);
  --db-warn-ink:  #8A5E16;
  --db-good:      #3E7D52;
  --db-good-bg:   rgba(62,125,82,0.12);
  --db-good-ink:  #2E5E3D;
  background: #E6ECF4;
  border: 1px solid rgba(244,236,207,0.10);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  border-radius: 8px;
}
body.mobyleak .dashboard .db-title-left .dot { background: var(--db-danger); }

/* --- 4. Pour qui title: cleaner wrapping / alignment --- */
body.mobyleak .pq {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-8);
  align-items: start;
}
body.mobyleak .pq h2 {
  text-wrap: balance;
  line-height: 1.12;
  max-width: 16ch;
}
@media (max-width: 820px) {
  body.mobyleak .pq { grid-template-columns: 1fr; }
}

/* --- 5. Sailors illustration (Moby) --- */
.vt-illustration-moby { display: none; }
body.mobyleak .vt-illustration-moby {
  display: block;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-top: var(--s-5);
  max-width: 340px;
  position: relative;
  z-index: 1;
}
.vt-illustration-moby svg { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  body.mobyleak .vt-illustration-moby {
    grid-row: auto;
    margin-top: var(--s-5);
    max-width: 300px;
  }
}


/* ================================================================
   DRAINSPOTTING — Pass 7 (light dashboard surface)
   ================================================================ */
body.drainspotting .dashboard {
  --db-bg:        #F4F0E2;   /* warm off-white card */
  --db-bg-soft:   #E7E1CC;   /* beige headers / inner */
  --db-fg:        #1A1810;   /* warm near-black text */
  --db-fg2:       #5A5240;
  --db-fg3:       #8A8068;
  --db-line:      rgba(26,24,16,0.12);
  --db-line-strong: rgba(26,24,16,0.22);
  --db-info:      #C8540A;
  /* burnt-orange / ochre / olive — warm, on-brand, no pink, no yellow card */
  --db-danger:    #C8540A;
  --db-danger-bg: rgba(200,84,10,0.10);
  --db-danger-ink:#9E4208;
  --db-warn:      #A9781A;
  --db-warn-bg:   rgba(169,120,26,0.12);
  --db-warn-ink:  #7A5510;
  --db-good:      #5E7A22;
  --db-good-bg:   rgba(94,122,34,0.12);
  --db-good-ink:  #46591A;
  background: #E7E1CC;
  border: 1px solid var(--accent);
  border-radius: 0;
  box-shadow: 8px 8px 0 0 var(--accent);
}
body.drainspotting .dashboard .db-title-left .dot { background: var(--db-danger); }


/* ================================================================
   DRAINSPOTTING — Pass 8 (manhole logo + watermark + sewer crew)
   ================================================================ */

/* --- Manhole logo toggle --- */
.logo-mark .mark-drain { display: none; }
body.drainspotting .logo-mark {
  width: 30px; height: 30px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
body.drainspotting .logo-mark .mark-ghost,
body.drainspotting .logo-mark .mark-whale { display: none !important; }
body.drainspotting .logo-mark .mark-drain { display: block !important; width: 100%; height: 100%; }
body.drainspotting footer .logo-mark { width: 24px; height: 24px; }

/* --- Manhole watermark in hero --- */
.hero-drain { display: none; }
body.drainspotting .hero-drain {
  display: block;
  position: absolute;
  right: 33%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 28vw, 380px);
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0.12;
}
.hero-drain svg { width: 100%; height: auto; display: block; }
@media (max-width: 980px) {
  body.drainspotting .hero-drain { right: -2%; top: auto; bottom: -6%; opacity: 0.08; }
}
body.drainspotting .hero-ghost,
body.drainspotting .hero-whale { display: none; }
body.drainspotting .hero-left,
body.drainspotting .hero-right { position: relative; z-index: 1; }

/* --- Sewer crew illustration --- */
.vt-illustration-drain { display: none; }
body.drainspotting .vt-illustration-drain {
  display: block;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-top: var(--s-5);
  max-width: 340px;
  position: relative;
  z-index: 1;
}
.vt-illustration-drain svg { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  body.drainspotting .vt-illustration-drain {
    grid-row: auto;
    margin-top: var(--s-5);
    max-width: 300px;
  }
}

/* ================================================================
   OVERRIDES — illustration isolation + missing utilities
   ================================================================ */

/* VT section: hide non-active variant illustrations */
.vt-illustration-moby  { display: none !important; }
.vt-illustration-drain { display: none !important; }
body.mobyleak      .vt-illustration-moby  { display: block !important; }
body.drainspotting .vt-illustration-drain { display: block !important; }
body.mobyleak      .vt-illustration       { display: none  !important; }
body.drainspotting .vt-illustration       { display: none  !important; }

/* Form error message */
.form-error {
  color: var(--accent);
  font-size: 13px;
  margin-top: 8px;
  font-family: var(--font-body);
}