/* FCB Airlines pitch v2 — editorial + flight-deck aesthetic
   Same text + story as the original; redesigned typography, layout, rhythm. */

:root{
  /* Paper-light (Ch 1-4) */
  --paper: #F6F2EA;
  --paper-2: #FFFFFF;
  --paper-line: #EAE3D5;
  --ink: #0F1419;
  --ink-90: rgba(15,20,25,.90);
  --ink-70: rgba(15,20,25,.70);
  --ink-55: rgba(15,20,25,.55);
  --ink-40: rgba(15,20,25,.40);
  --ink-25: rgba(15,20,25,.25);
  --ink-10: rgba(15,20,25,.10);
  --ink-05: rgba(15,20,25,.05);
  --line: rgba(15,20,25,.10);

  --teal: #0B3B52;
  --teal-deep: #082E40;
  --teal-tint: #E1ECEF;
  --amber: #D69A1F;
  --amber-soft: #F0B848;
  --amber-tint: #F8EBC8;
  --coral: #C53030;
  --coral-tint: #F7DCDB;
  --sky: #0B91D6;
  --sky-tint: #D9EEF9;
  --grass: #1A8C5A;
  --grass-tint: #D9EDDF;

  /* FCB dark (Ch 5-6) */
  --fcb-bg: #0A0414;
  --fcb-surface: #150626;
  --fcb-panel: #1B0B36;
  --fcb-text: #F5F1FF;
  --fcb-muted: #B9AED6;
  --fcb-line: rgba(245,241,255,.10);
  --fcb-line-strong: rgba(245,241,255,.18);
  --fcb-violet: #8A5CFF;
  --fcb-violet-soft: #B48BFF;
  --fcb-blue: #4F7BFF;
  --fcb-pink: #E664C8;
  --fcb-gold: #FFB98A;
  --fcb-gradient: linear-gradient(90deg, #B48BFF 0%, #4F7BFF 30%, #E664C8 65%, #FFB98A 100%);

  --rail-w: 296px;
  --shell-pad-x: clamp(28px, 5vw, 80px);
}

*{box-sizing:border-box}
html, body, #root{height:100%}
html, body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter','Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}
::selection{background: var(--amber-soft); color: var(--ink)}

/* Type primitives */
.font-display{ font-family: 'Inter','Helvetica Neue', system-ui, sans-serif; font-weight: 800; letter-spacing: -.035em; }
.font-display-it{ font-family: 'Newsreader', 'Times New Roman', serif; font-style: italic; font-weight: 500; letter-spacing: -.015em; }
.font-mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; }
.font-body{ font-family: 'Inter', system-ui, sans-serif; }

/* Eyebrow */
.eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
}
.eyebrow.muted{ color: var(--ink-55); }
.eyebrow.amber{ color: var(--amber); }

/* Page transitions — disabled (was opacity:0 → 1 fade) to avoid headless-iframe stalls */
.page-fade{ opacity: 1; }

/* Hairlines */
.hair{ border: 1px solid var(--line) }
.hair-t{ border-top: 1px solid var(--line) }
.hair-b{ border-bottom: 1px solid var(--line) }

/* ---- App shell ---- */
.app{
  min-height: 100vh;
  background: var(--paper);
  padding-left: var(--rail-w);
}
@media (max-width: 900px){
  .app{ padding-left: 0; padding-top: 56px; }
  :root{ --shell-pad-x: 22px; }
}
.canvas{
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.canvas::-webkit-scrollbar{ width: 10px; }
.canvas::-webkit-scrollbar-thumb{ background: var(--ink-10); border-radius: 999px; }
.canvas::-webkit-scrollbar-track{ background: transparent; }
.canvas.dark::-webkit-scrollbar-thumb{ background: rgba(245,241,255,.16); }
.canvas.dark{ background: var(--fcb-bg); }

/* ---- Rail ---- */
.rail{
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--paper-2);
  z-index: 50;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.rail.dark{
  background: var(--fcb-surface);
  border-right-color: var(--fcb-line);
  color: var(--fcb-text);
}
.rail-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
}
.rail.dark .rail-head{ border-bottom-color: var(--fcb-line); }
.rail-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.rail-brand-img{
  display: block;
  height: 32px; width: auto;
  /* Logo PNG has whitespace around the antennas — small negative margin trims it */
  margin: -2px 0 -2px -4px;
}
/* Slight tone adjustment on dark chapters so the navy logo doesn't disappear
   against the FCB-dark surface. */
.rail.dark .rail-brand-img{ filter: brightness(1.6) saturate(.85); }
.rail-brand .tag{ font-size: 10.5px; color: var(--ink-55); line-height: 1.3; max-width: 220px; }
.rail.dark .rail-brand .tag{ color: var(--fcb-muted); }

.lang{
  display: inline-flex; align-items: center; padding: 2px;
  background: var(--ink-05); border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
}
.rail.dark .lang{ background: rgba(245,241,255,.06); }
.lang button{
  border: 0; background: transparent; padding: 4px 9px; border-radius: 999px;
  cursor: pointer; color: var(--ink-55); font: inherit; letter-spacing: .06em; text-transform: uppercase;
}
.rail.dark .lang button{ color: var(--fcb-muted); }
.lang button.on{ background: var(--ink); color: var(--paper-2); }
.rail.dark .lang button.on{ background: var(--fcb-violet); color: var(--fcb-text); }

.rail-nav{ flex: 1; padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.rail-btn{
  text-align: left; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink-55);
  transition: background .18s ease, color .18s ease;
}
.rail-btn:hover{ background: var(--ink-05); color: var(--ink); }
.rail.dark .rail-btn:hover{ background: rgba(245,241,255,.05); color: var(--fcb-text); }
.rail-btn .num{
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  background: var(--ink-05); color: var(--ink-55); flex-shrink: 0;
  border: 1px solid transparent;
  transition: all .18s ease;
}
.rail.dark .rail-btn .num{ background: rgba(245,241,255,.05); color: var(--fcb-muted); }
.rail-btn .body{ flex: 1; min-width: 0; }
.rail-btn .kicker{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); }
.rail.dark .rail-btn .kicker{ color: var(--fcb-muted); opacity: .7; }
.rail-btn .label{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: -.01em; margin-top: 2px; line-height: 1.25; }
.rail-btn.past{ color: var(--ink-70); }
.rail-btn.past .num{ background: transparent; border-color: var(--ink-10); color: var(--ink-70); }
.rail.dark .rail-btn.past{ color: rgba(245,241,255,.82); }
.rail.dark .rail-btn.past .num{ border-color: var(--fcb-line); color: var(--fcb-muted); }
.rail-btn.active{ background: var(--ink); color: var(--paper-2); }
.rail.dark .rail-btn.active{ background: rgba(138,92,255,.18); color: var(--fcb-text); border: 1px solid rgba(138,92,255,.35); }
.rail-btn.active .num{ background: var(--amber); color: var(--ink); border-color: transparent; }
.rail.dark .rail-btn.active .num{ background: var(--fcb-violet); color: var(--fcb-text); }
.rail-btn.active .kicker{ color: rgba(255,255,255,.55); }
.rail.dark .rail-btn.active .kicker{ color: var(--fcb-muted); }
.rail-btn .pulse{ width: 6px; height: 6px; border-radius: 50%; background: var(--amber-soft); animation: pulse 1.8s ease-in-out infinite; }
.rail.dark .rail-btn .pulse{ background: var(--fcb-violet-soft); }
@keyframes pulse{ 0%, 100%{ opacity: 1; transform: scale(1) } 50%{ opacity: .4; transform: scale(.6) } }

.rail-cta{
  margin: 10px 14px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--teal); color: var(--paper-2);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; gap: 10px; cursor: pointer; border: 0;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 8px 24px rgba(11,59,82,.20);
  transition: transform .15s ease, box-shadow .2s ease;
}
.rail-cta:visited{ color: var(--paper-2); }
.rail-cta:hover{ transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 12px 28px rgba(11,59,82,.28); }
.rail.dark .rail-cta{ background: var(--fcb-violet); box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 12px 32px rgba(138,92,255,.40); }
.rail-cta .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--amber-soft); margin-right: 2px; }
.rail-cta .arrow{ margin-left: auto; opacity: .85 }

.rail-foot{
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.rail.dark .rail-foot{ border-top-color: var(--fcb-line); }
.rail-foot .label{
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-40); font-weight: 600;
}
.rail.dark .rail-foot .label{ color: var(--fcb-muted); opacity: .7; }
.rail-foot .body{ font-size: 11.5px; color: var(--ink-55); line-height: 1.45; }
.rail.dark .rail-foot .body{ color: var(--fcb-muted); }

/* Per-chapter progress bar — bottom edge of rail */
.rail-progress{
  height: 2px; background: var(--ink-05); border-radius: 999px;
  margin: 8px 14px 0; overflow: hidden;
}
.rail.dark .rail-progress{ background: rgba(245,241,255,.05); }
.rail-progress .fill{
  height: 100%; background: var(--amber);
  transition: width .25s ease;
}
.rail.dark .rail-progress .fill{ background: var(--fcb-violet); }

/* Mobile rail */
.mobile-rail{
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  align-items: center; gap: 12px;
}
.mobile-rail.dark{ background: var(--fcb-surface); border-bottom-color: var(--fcb-line); color: var(--fcb-text); }
.mobile-rail-img{ display: block; height: 26px; width: auto; margin-left: -4px; }
.mobile-rail.dark .mobile-rail-img{ filter: brightness(1.6) saturate(.85); }
@media (max-width: 900px){ .mobile-rail{ display: flex } .rail{ display: none } }
.mobile-rail .crumbs{ flex:1; display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; }
.mobile-rail .crumbs .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-10); }
.mobile-rail .crumbs .dot.done{ background: var(--ink-25); }
.mobile-rail .crumbs .dot.active{ background: var(--amber); width: 16px; border-radius: 999px; }
.mobile-rail.dark .crumbs .dot{ background: rgba(245,241,255,.10); }
.mobile-rail.dark .crumbs .dot.done{ background: rgba(245,241,255,.25); }
.mobile-rail.dark .crumbs .dot.active{ background: var(--fcb-violet); }

/* ---- Chapter shell ---- */
.chapter{
  padding: 64px var(--shell-pad-x) 96px;
  max-width: 1280px;
  margin: 0 auto;
}
.chapter.full{ max-width: none; padding-left: 0; padding-right: 0; }
.chapter-num{
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  color: var(--ink-40); font-weight: 600; margin-bottom: 28px;
}
.chapter.dark .chapter-num{ color: var(--fcb-muted); opacity: .7; }

/* Footer next button row */
.chapter-foot{
  margin-top: 72px; padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.chapter.dark .chapter-foot{ border-top-color: var(--fcb-line); }

.next-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper-2);
  font: 600 14px/1 'Inter', sans-serif; letter-spacing: -.005em;
  box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 14px 30px rgba(15,20,25,.18);
  transition: transform .15s ease, box-shadow .2s ease;
}
.next-btn:hover{ transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 18px 36px rgba(15,20,25,.24); }
.next-btn.teal{ background: var(--teal); }
.next-btn.fcb{ background: var(--fcb-violet); color: var(--fcb-text); box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 14px 36px rgba(138,92,255,.45); }
.next-btn .arrow{ font-size: 16px; }

.foot-meta{
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  color: var(--ink-40); text-transform: uppercase;
}
.chapter.dark .foot-meta{ color: var(--fcb-muted); opacity: .7; }

/* Chips */
.chip{
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: -.005em;
  border: 1px solid currentColor;
}
.chip .dot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip.teal{ color: var(--teal); background: var(--teal-tint); border-color: transparent; }
.chip.amber{ color: #8a6300; background: var(--amber-tint); border-color: transparent; }
.chip.coral{ color: var(--coral); background: var(--coral-tint); border-color: transparent; }
.chip.sky{ color: #0a6788; background: var(--sky-tint); border-color: transparent; }
.chip.grass{ color: var(--grass); background: var(--grass-tint); border-color: transparent; }
.chip.ink{ color: var(--ink); background: transparent; border: 1px solid var(--ink-10); }
.chip.live{ color: var(--grass); background: var(--paper-2); border-color: var(--grass); }
.chip.live .dot{ background: var(--grass); animation: pulse 1.4s ease-in-out infinite; }

/* Decorative grid background */
.paper-grid{
  background-image:
    linear-gradient(to right, rgba(15,20,25,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,20,25,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Util */
.tabular{ font-variant-numeric: tabular-nums; }

/* === Chapter 1 — Hero === */
.ch1-eye{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px }
.ch1-eye .bar{ height: 1px; background: var(--teal); flex: 0 0 64px; opacity: .55 }
.ch1-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  margin-top: 12px;
}
@media (max-width: 1100px){ .ch1-grid{ grid-template-columns: 1fr; gap: 36px } }
.ch1-h1{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.045em;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1.04;
  margin: 0; color: var(--ink);
  /* `anywhere` was breaking long French words mid-letter ("conversationn / elle").
     `break-word` only breaks at natural word boundaries. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}
.ch1-h1 .it{
  font-family: 'Newsreader','Times New Roman', serif;
  font-style: italic; font-weight: 400;
  color: var(--teal);
  letter-spacing: -.02em;
  line-height: 1.0;
}
.ch1-sub{
  margin-top: 48px;
  font-size: 19px; line-height: 1.55; color: var(--ink-70);
  max-width: 620px;
  text-wrap: pretty;
}
.ch1-toc{
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 16px;
  padding: 22px 24px;
}
.ch1-toc .head{
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-40); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.ch1-toc .row{
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 14px;
}
.ch1-toc .row:first-of-type{ border-top: 0; padding-top: 16px }
.ch1-toc .row .n{ font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-40); width: 22px }
.ch1-toc .row b{ font-weight: 600; }
.ch1-toc .row .sub{ margin-left: auto; color: var(--ink-55); font-size: 12px }

.ch1-strip{
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 800px){ .ch1-strip{ grid-template-columns: repeat(2, 1fr); gap: 16px } }
.ch1-strip .pair{ display: flex; flex-direction: column; gap: 6px; }
.ch1-strip .pair .k{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); font-weight: 600 }
.ch1-strip .pair .v{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.015em; color: var(--ink); }
.ch1-strip .pair .v.serif{ font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; }

.flight-line{
  position: absolute; pointer-events: none;
  right: -4%; top: 12%;
  width: min(60vw, 760px); height: auto;
  opacity: .82;
}

/* === Chapter 2 — Constat (numbered editorial list) === */
.ch2-head{
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 1000px){ .ch2-head{ grid-template-columns: 1fr; gap: 24px } }
.ch2-h2{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(38px, 5vw, 60px); line-height: 1.04; margin: 0; max-width: 12ch;
}
.ch2-h2 .a{ color: var(--teal); }
.ch2-h2 .b{ color: var(--amber); }
.ch2-h2 .c{ color: var(--coral); }
.ch2-h2 .it{ font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; }
.ch2-intro{ font-size: 16.5px; color: var(--ink-70); line-height: 1.6; max-width: 480px }
.ch2-list{ display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink-10); }
.ch2-row{
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr 320px;
  gap: 28px; align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-10);
  transition: background .15s ease;
}
.ch2-row:hover{ background: rgba(15,20,25,.015); }
@media (max-width: 1000px){
  .ch2-row{ grid-template-columns: 56px 1fr; }
  .ch2-row .ch2-row-body{ grid-column: 2; }
  .ch2-row .ch2-row-icon{ display: none; }
}
.ch2-row .num{
  font-family: 'Newsreader', serif; font-style: italic; font-weight: 400;
  font-size: 60px; line-height: 1; letter-spacing: -.02em;
  color: var(--ink); padding-top: 4px;
}
.ch2-row.r2 .num{ color: var(--amber); }
.ch2-row.r3 .num{ color: var(--teal); }
.ch2-row.r4 .num{ color: var(--coral); }
.ch2-row .ch2-row-title{
  font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.025em;
  font-size: 22px; line-height: 1.2; color: var(--ink); text-wrap: balance;
}
.ch2-row .ch2-row-body{ font-size: 14.5px; color: var(--ink-70); line-height: 1.6; }
.ch2-row .ch2-row-icon{
  display: flex; justify-content: flex-end; align-items: flex-start;
}
.ch2-row .vis{
  width: 100%; max-width: 300px; height: 96px;
  border-radius: 12px; background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 12px 14px; position: relative; overflow: hidden;
}
.ch2-row .vis .vis-eyebrow{ font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); font-weight: 600 }

/* Animated "instant" clock */
.ch2-vis-clock{ display: flex; align-items: center; gap: 10px; height: 100%; }
.ch2-vis-clock .face{ width: 56px; height: 56px; border: 2px solid var(--sky); border-radius: 50%; position: relative; }
.ch2-vis-clock .face::before, .ch2-vis-clock .face::after{
  content: ""; position: absolute; left: 50%; top: 50%; transform-origin: 50% 100%; background: var(--sky);
}
.ch2-vis-clock .face::before{ width: 2px; height: 18px; transform: translate(-50%, -100%) rotate(0deg); animation: tick 5s linear infinite; }
.ch2-vis-clock .face::after{ width: 2px; height: 13px; transform: translate(-50%, -100%) rotate(110deg); animation: tick 60s linear infinite; }
@keyframes tick{ from{ transform: translate(-50%, -100%) rotate(0deg) } to{ transform: translate(-50%, -100%) rotate(360deg) } }
.ch2-vis-clock .label .a{ font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 22px; color: var(--sky); }
.ch2-vis-clock .label .b{ font-size: 11px; color: var(--ink-55); margin-top: 2px; }

/* Animated peak chart */
.ch2-vis-peak{ height: 100%; display: flex; align-items: flex-end; gap: 4px; padding-top: 18px; }
.ch2-vis-peak .bar{
  flex: 1; background: var(--amber); border-radius: 3px 3px 0 0;
  animation: peak 2.8s ease-in-out infinite;
}
.ch2-vis-peak .bar:nth-child(1){ height: 22%; animation-delay: 0s }
.ch2-vis-peak .bar:nth-child(2){ height: 32%; animation-delay: .12s }
.ch2-vis-peak .bar:nth-child(3){ height: 28%; animation-delay: .24s }
.ch2-vis-peak .bar:nth-child(4){ height: 86%; animation-delay: .36s; background: var(--coral); }
.ch2-vis-peak .bar:nth-child(5){ height: 74%; animation-delay: .48s; background: var(--coral); }
.ch2-vis-peak .bar:nth-child(6){ height: 36%; animation-delay: .60s }
.ch2-vis-peak .bar:nth-child(7){ height: 26%; animation-delay: .72s }
.ch2-vis-peak .bar:nth-child(8){ height: 30%; animation-delay: .84s }
@keyframes peak{ 0%, 100%{ opacity: 1 } 50%{ opacity: .6 } }

/* 70% pie */
.ch2-vis-pie{ display: flex; align-items: center; gap: 14px; height: 100% }
.ch2-vis-pie .pie{
  width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(var(--teal) 0% 70%, var(--ink-10) 70% 100%);
  position: relative;
}
.ch2-vis-pie .pie::after{
  content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--paper-2);
}
.ch2-vis-pie .label .a{ font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 22px; color: var(--teal); }
.ch2-vis-pie .label .b{ font-size: 11px; color: var(--ink-55); margin-top: 2px; }

/* Cursor lost */
.ch2-vis-cursor{ height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ch2-vis-cursor .scroll{
  height: 8px; background: var(--ink-05); border-radius: 99px; position: relative; overflow: hidden;
}
.ch2-vis-cursor .scroll::before{
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 18px;
  background: var(--coral); border-radius: 99px;
  animation: scroll 3.2s ease-in-out infinite;
}
@keyframes scroll{
  0%, 100%{ left: 0%; width: 22px }
  35%{ left: 60%; width: 18px }
  55%{ left: 65%; width: 16px }
  80%{ left: 20%; width: 20px }
}
.ch2-vis-cursor .row{ display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-40); font-family: 'JetBrains Mono', monospace }

/* Gold mine block */
.gold-mine{
  margin-top: 56px;
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: stretch;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: var(--paper);
  padding: 32px 36px;
  position: relative; overflow: hidden;
}
@media (max-width: 900px){ .gold-mine{ grid-template-columns: 1fr; gap: 16px; padding: 28px } }
.gold-mine::before{
  content: ""; position: absolute; right: -100px; top: -100px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214,154,31,.45), rgba(214,154,31,0) 70%);
  filter: blur(20px);
}
.gold-mine .big{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.05em;
  font-size: 110px; line-height: .9; color: var(--amber-soft);
}
.gold-mine .body{ position: relative; }
.gold-mine .label{
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em;
  color: var(--amber-soft); font-weight: 600; text-transform: uppercase;
}
.gold-mine .text{
  font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -.015em;
  font-size: 22px; line-height: 1.35; margin-top: 14px; max-width: 740px;
}

/* === Chapter 3 === */
.ch3-h2{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.02; margin: 0; max-width: 14ch;
}
.ch3-h2 .it{ font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; color: var(--teal); letter-spacing: -.02em; }
.ch3-intro{ margin-top: 28px; font-size: 17px; color: var(--ink-70); line-height: 1.6; max-width: 720px; }

.camille{
  margin-top: 56px;
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 18px 50px rgba(15,20,25,.06);
}
.camille-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  flex-wrap: wrap; gap: 14px;
}
.camille-head .meta{ display: flex; flex-direction: column; gap: 4px; }
.camille-head h3{ font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 22px; margin: 0; }
.camille-head .sub{ font-size: 12.5px; color: var(--ink-55); }
.camille-stats{
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px;
  background: var(--line);
}
@media (max-width: 900px){ .camille-stats{ grid-template-columns: 1fr } }
.camille-stat-hero{
  background: var(--paper-2); padding: 36px 36px 32px;
  position: relative; overflow: hidden;
}
.camille-stat-hero::before{
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11,59,82,.10), rgba(11,59,82,0) 70%);
}
.camille-stat-hero .num{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.05em;
  font-size: clamp(96px, 14vw, 168px); line-height: .9; color: var(--teal);
  position: relative;
}
.camille-stat-hero .num .suff{ font-size: .55em; vertical-align: top; color: var(--teal); margin-left: 4px }
.camille-stat-hero .label{
  font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.015em;
  font-size: 18px; color: var(--ink); margin-top: 12px; position: relative;
}
.camille-stat-hero .sub{
  font-size: 12.5px; color: var(--ink-55); margin-top: 4px; position: relative;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
}

.camille-stat-side{ display: flex; flex-direction: column; }
.camille-stat-mini{
  background: var(--paper-2); padding: 24px 28px; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.camille-stat-mini + .camille-stat-mini{ border-top: 1px solid var(--line); }
.camille-stat-mini .num{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.04em;
  font-size: 56px; line-height: .9;
}
.camille-stat-mini .num.amber{ color: var(--amber); }
.camille-stat-mini .num.sky{ color: var(--sky); }
.camille-stat-mini .num .suff{ font-size: .55em; margin-left: 2px }
.camille-stat-mini .label{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink); margin-top: 8px; }

.camille-points{
  padding: 26px 28px 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px){ .camille-points{ grid-template-columns: 1fr } }
.camille-points li{
  list-style: none; display: flex; gap: 12px; font-size: 13.5px; color: var(--ink-70); line-height: 1.55;
}
.camille-points li svg{ flex-shrink: 0; margin-top: 4px; color: var(--teal); }

/* Insights / phased irritants */
.insights-head{ margin-top: 88px; max-width: 880px; }
.insights-title{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; margin: 14px 0 0;
}
.insights-sub{ margin-top: 14px; font-size: 15px; color: var(--ink-70); line-height: 1.6; }

.phases{ margin-top: 40px; display: flex; flex-direction: column; gap: 8px; }
.phase{
  display: grid; grid-template-columns: 200px 1fr; gap: 28px;
  align-items: stretch; padding: 22px 0; border-top: 1px solid var(--line);
}
@media (max-width: 900px){ .phase{ grid-template-columns: 1fr; gap: 12px } }
.phase:last-child{ border-bottom: 1px solid var(--line) }
.phase .head{
  display: flex; flex-direction: column; gap: 6px; padding-top: 4px;
}
.phase .head .badge{
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; padding: 5px 10px; border-radius: 999px; align-self: flex-start;
}
.phase.pre .head .badge{ background: var(--sky-tint); color: #0a6788; }
.phase.disrupt .head .badge{ background: var(--coral-tint); color: var(--coral); }
.phase.onboard .head .badge{ background: var(--teal-tint); color: var(--teal); }
.phase .head .meta{ font-size: 11.5px; color: var(--ink-55); line-height: 1.5; padding-right: 18px; }
.phase .head .meta b{ color: var(--ink); font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }

.phase .grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px){ .phase .grid{ grid-template-columns: 1fr } }
.phase.disrupt .grid{ grid-template-columns: repeat(2, 1fr); }
.phase.onboard .grid{ grid-template-columns: 1fr; }

.irritant{
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 18px; position: relative;
}
.irritant .icon{
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-55);
}
.phase.pre .irritant .icon{ background: var(--sky-tint); color: #0a6788; border-color: transparent; }
.phase.disrupt .irritant .icon{ background: var(--coral-tint); color: var(--coral); border-color: transparent; }
.phase.onboard .irritant .icon{ background: var(--teal-tint); color: var(--teal); border-color: transparent; }
.irritant .title{ font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.015em; font-size: 15px; margin-top: 14px }
.irritant .body{ font-size: 13px; color: var(--ink-70); line-height: 1.55; margin-top: 6px; }

.insights-foot{ margin-top: 32px; font-size: 13.5px; color: var(--ink-55); line-height: 1.6; font-style: italic; max-width: 720px; font-family: 'Newsreader', serif; font-weight: 400; }

/* === Chapter 4 — Demo (compact: phone gets the real estate) === */
.ch4-h2{
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; margin: 0; max-width: 22ch;
}
.ch4-h2 .it{ font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; color: var(--teal); }

.tally{
  margin-top: 20px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--paper-2);
}
.tally-bar{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; align-items: stretch;
}
@media (max-width: 900px){ .tally-bar{ grid-template-columns: repeat(2, 1fr) }}
.tally-cell{ padding: 10px 18px; border-right: 1px solid var(--line); }
.tally-cell:last-child{ border-right: 0; }
.tally-cell .k{ font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tally-cell .k .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--grass); animation: pulse 1.4s ease-in-out infinite; }
.tally-cell .v{ font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.025em; font-size: 20px; margin-top: 3px; color: var(--ink); }
.tally-cell .v.teal{ color: var(--teal) }
.tally-cell .v.amber{ color: var(--amber) }
.tally-cell .v.grass{ color: var(--grass) }
.tally-cell .delta{ font-size: 10.5px; color: var(--ink-55); margin-top: 1px; font-family: 'JetBrains Mono', monospace; }
.tally-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px; border-top: 1px solid var(--line);
  background: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); font-weight: 600;
}
.tally-foot .src{ display: flex; align-items: center; gap: 8px; }
.tally-foot .open{ display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }

.demo-frame{
  margin-top: 18px;
  display: grid; grid-template-columns: 1fr 380px; gap: 18px;
}
@media (max-width: 1100px){ .demo-frame{ grid-template-columns: 1fr } }
.demo-screen{
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--paper-2); position: relative;
}
.demo-chrome{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}
.demo-tabs{ display: inline-flex; background: var(--ink-05); padding: 3px; border-radius: 999px; flex-shrink: 0; }
.demo-tabs button{
  border: 0; background: transparent; padding: 7px 14px; border-radius: 999px;
  font: 600 12.5px/1 'Inter', sans-serif; color: var(--ink-55); cursor: pointer; letter-spacing: -.005em;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.demo-tabs button.on{ background: var(--ink); color: var(--paper-2); }
.demo-url{ font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-55); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.demo-status{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
@media (max-width: 720px){
  .demo-chrome{ flex-wrap: wrap; }
  .demo-url{ order: 3; flex-basis: 100%; }
}

.demo-body{
  padding: 20px;
  min-height: min(780px, calc(100vh - 240px));
  display: flex; align-items: center; justify-content: center;
}
/* Dashboard tab — iframe fills edge-to-edge, no padding. */
.demo-body.flush{ padding: 0; align-items: stretch; }
.dash-iframe{
  width: 100%;
  height: min(720px, calc(100vh - 280px));
  min-height: 520px;
  border: 0; display: block; background: var(--paper-2);
}

/* Fake dashboard */
.dash{ width: 100%; max-width: 760px; }
.dash-row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.dash-tile{
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px;
}
.dash-tile .k{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }
.dash-tile .v{ font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.025em; font-size: 26px; color: var(--ink); margin-top: 8px; }
.dash-tile .delta{ font-size: 11px; color: var(--grass); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.dash-tile.alert .v{ color: var(--coral); }
.dash-tile.amber .v{ color: var(--amber); }
.dash-chart{
  margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px;
}
.dash-chart .head{ display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-40); letter-spacing: .12em; font-weight: 600; text-transform: uppercase;}
.dash-chart svg{ display: block; width: 100%; height: 120px; margin-top: 8px; }
.dash-list{ margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.dash-list .head{ font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-40); letter-spacing: .12em; text-transform: uppercase; font-weight: 600 }
.dash-list .row{ display: grid; grid-template-columns: 1fr auto 60px; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; align-items: center; }
.dash-list .row:first-of-type{ border-top: 0; }
.dash-list .row .bar{ height: 6px; background: var(--teal); border-radius: 99px; }
.dash-list .row .v{ font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-70); text-align: right; }

/* Phone — WhatsApp scenario · real iPhone proportions (~9:16) */
.phone-wrap{ display: flex; justify-content: center; }
.phone{
  width: 400px; background: #111;
  border-radius: 40px; padding: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.10);
  position: relative;
}
.phone .screen{
  background: #ECE5DD; border-radius: 30px; overflow: hidden;
  /* Cap at 720px (true iPhone Pro Max ~ 9:16 with 400px wide), shrink on
     shorter viewports so the phone stays fully visible without forcing scroll. */
  height: min(720px, calc(100vh - 280px));
  min-height: 520px;
  background-image:
    radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 14px 14px, 22px 22px;
  background-position: 0 0, 7px 11px;
}
/* When .phone.live → iframe replaces the WA pattern */
.phone.live .screen{
  background: #ECE5DD;
  background-image: none;
}
.phone-iframe{
  width: 100%; height: 100%; border: 0; display: block;
  border-radius: 26px;
}
.wa-bar{
  background: #075E54; color: #fff; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  font: 600 13px/1 'Inter', sans-serif;
}
.wa-bar .avatar{
  width: 30px; height: 30px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}
.wa-bar .name{ display: flex; flex-direction: column; gap: 1px }
.wa-bar .status{ font-size: 10.5px; font-weight: 500; opacity: .8 }
.wa-bar .status::before{ content: "● "; color: #25D366; }
.wa-messages{ padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.bubble{
  max-width: 80%; padding: 8px 11px; border-radius: 14px; line-height: 1.4;
  background: #fff; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.bubble.me{ background: #DCF8C6; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.ai{ align-self: flex-start; border-bottom-left-radius: 4px }
.bubble .t{ font-size: 9.5px; color: rgba(0,0,0,.4); float: right; margin: 6px 0 -4px 6px }
.bubble .ai-link{
  display: inline-block; margin-top: 8px; padding: 6px 10px;
  background: #075E54; color: #fff; border-radius: 8px; font-weight: 600; font-size: 11px;
}

.scenarios{
  margin-top: 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2);
  padding: 16px 18px;
}
.scenarios .head{
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 14px;
}
.scenarios .head .ti{ font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.015em; font-size: 15px; }
.scenarios-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.scenario{
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; cursor: pointer; transition: all .18s ease; text-align: left;
}
.scenario:hover{ border-color: var(--ink-25); transform: translateY(-1px); }
.scenario.on{ background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.scenario .ic{
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink-05); display: flex; align-items: center; justify-content: center;
  color: var(--ink-70);
}
.scenario.on .ic{ background: rgba(255,255,255,.15); color: var(--paper-2); }
.scenario .label{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -.01em; margin-top: 10px; }
.scenario .sub{ font-size: 11px; color: var(--ink-55); margin-top: 2px; line-height: 1.4 }
.scenario.on .sub{ color: rgba(255,255,255,.65); }

.scenario-detail{
  margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line);
}
.scenario-detail .eyebrow{ margin-bottom: 8px; }
.scenario-detail ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.scenario-detail li{ display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-70); line-height: 1.5 }

/* === Chapter 5 — dark === */
.ch5{ background: var(--fcb-bg); color: var(--fcb-text); position: relative; overflow: hidden; }
.ch5 .blob1, .ch5 .blob2, .ch5 .blob3{ position: absolute; pointer-events: none; border-radius: 50%; filter: blur(40px); }
.ch5 .blob1{ right: -180px; top: -120px; width: 700px; height: 700px; background: radial-gradient(circle, var(--fcb-violet) 0%, rgba(138,92,255,0) 70%); opacity: .18 }
.ch5 .blob2{ left: -200px; bottom: 200px; width: 600px; height: 600px; background: radial-gradient(circle, var(--fcb-blue) 0%, rgba(79,123,255,0) 70%); opacity: .14 }
.ch5 .blob3{ right: 100px; bottom: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--fcb-pink) 0%, rgba(230,100,200,0) 70%); opacity: .12 }

.ch5-hero{
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: end;
}
@media (max-width: 1100px){ .ch5-hero{ grid-template-columns: 1fr; gap: 32px } }
.ch5-h1{
  font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; margin: 18px 0 0;
}
.ch5-h1 .grad{
  background: var(--fcb-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ch5-sub{ margin-top: 22px; font-size: 16px; color: var(--fcb-muted); line-height: 1.6; max-width: 620px; }
.ch5-fact{
  background: rgba(245,241,255,.04);
  border: 1px solid var(--fcb-line); border-radius: 16px; padding: 22px 24px;
  position: relative;
}
.ch5-fact .k{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fcb-muted); font-weight: 600 }
.ch5-fact .v{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 36px; letter-spacing: -.025em; line-height: 1; margin-top: 8px; }
.ch5-fact .v.grad{ background: var(--fcb-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ch5-fact .pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 14px; }
.ch5-fact .pair .lbl{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fcb-muted); font-weight: 600 }
.ch5-fact .pair .num{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; color: var(--fcb-text); margin-top: 4px }

.benefits{ margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){ .benefits{ grid-template-columns: 1fr } }
.benefit-col{
  background: rgba(245,241,255,.025); border: 1px solid var(--fcb-line); border-radius: 16px; padding: 26px 28px;
  position: relative; overflow: hidden;
}
.benefit-col::before{
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: .25; filter: blur(20px);
}
.benefit-col.passenger{ --accent: var(--fcb-blue); }
.benefit-col.airline{ --accent: var(--fcb-violet); }
.benefit-col .lbl{
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--accent); background: rgba(255,255,255,.04); position: relative;
}
.benefit-col ul{ margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; position: relative; }
.benefit-col li{ display: flex; gap: 12px; font-size: 14px; color: var(--fcb-text); line-height: 1.5 }
.benefit-col li svg{ flex-shrink: 0; margin-top: 3px; color: var(--accent); }

.reasons{ margin-top: 64px; }
.reasons-head{
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
  margin-bottom: 28px;
}
@media (max-width: 900px){ .reasons-head{ grid-template-columns: 1fr } }
.reasons-title{ font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.025em; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 12px 0 0; }
.reasons-sub{ font-size: 14.5px; color: var(--fcb-muted); line-height: 1.6; }

.reasons-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1000px){ .reasons-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 700px){ .reasons-grid{ grid-template-columns: 1fr } }
.reason{
  background: rgba(245,241,255,.025); border: 1px solid var(--fcb-line); border-radius: 14px;
  padding: 22px 22px; position: relative; overflow: hidden;
}
.reason .top{ display: flex; align-items: center; gap: 10px; }
.reason .icon{
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); color: var(--accent);
  background: rgba(255,255,255,.04);
}
.reason .num{ font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; color: var(--accent); }
.reason .line{ flex: 1; height: 1px; background: var(--fcb-line); }
.reason .title{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -.015em; margin-top: 14px; color: var(--fcb-text) }
.reason .body{ font-size: 13px; color: var(--fcb-muted); line-height: 1.6; margin-top: 8px; }

/* References as a comparison table */
.refs{ margin-top: 64px; }
.refs-table{
  border: 1px solid var(--fcb-line); border-radius: 18px; overflow: hidden;
  background: rgba(245,241,255,.02);
}
.refs-head{
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 2fr;
  padding: 14px 26px; border-bottom: 1px solid var(--fcb-line);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fcb-muted); font-weight: 600;
}
.ref-row{
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 2fr; gap: 16px;
  padding: 24px 26px; border-bottom: 1px solid var(--fcb-line);
  align-items: center;
}
.ref-row:last-child{ border-bottom: 0; }
.ref-row .client{ display: flex; flex-direction: column; gap: 4px; }
.ref-row .client .nm{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.015em; color: var(--fcb-text) }
.ref-row .client .role{ font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fcb-muted); letter-spacing: .04em; }
.ref-row .sector{ font-size: 13.5px; color: var(--fcb-muted); }
.ref-row .kpi{ display: flex; flex-direction: column; gap: 2px; }
.ref-row .kpi .v{ font-family: 'Inter', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.025em; line-height: 1; color: var(--fcb-gold) }
.ref-row .kpi .s{ font-size: 11.5px; color: var(--fcb-muted); line-height: 1.4 }
.ref-row .quote{ font-family: 'Newsreader', serif; font-style: italic; font-size: 14.5px; color: rgba(245,241,255,.85); line-height: 1.5; max-width: 460px; }
.ref-row .quote .who{ display: block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 10.5px; letter-spacing: .1em; color: var(--fcb-muted); text-transform: uppercase; }
@media (max-width: 900px){
  .refs-head{ display: none; }
  .ref-row{ grid-template-columns: 1fr; gap: 8px; }
}

.locations{ margin-top: 56px; }
.locations .list{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.location{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,241,255,.04); border: 1px solid var(--fcb-line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; color: var(--fcb-text);
}
.location .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--fcb-blue); }

/* === Chapter 6 === */
.ch6{ background: var(--fcb-bg); color: var(--fcb-text); position: relative; overflow: hidden; min-height: 100vh; }
.ch6 .blob1, .ch6 .blob2{ position: absolute; pointer-events: none; border-radius: 50%; filter: blur(40px); }
.ch6 .blob1{ right: -200px; top: -200px; width: 800px; height: 800px; background: radial-gradient(circle, var(--fcb-violet) 0%, rgba(138,92,255,0) 70%); opacity: .18 }
.ch6 .blob2{ left: -200px; bottom: -100px; width: 600px; height: 600px; background: radial-gradient(circle, var(--fcb-pink) 0%, rgba(230,100,200,0) 70%); opacity: .12 }
.ch6-vision{ position: relative; padding: 36px 0 0; }
.ch6-h2{
  font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(42px, 6vw, 72px); line-height: 1.02; margin: 18px 0 0; max-width: 14ch;
}
.ch6-h2 .grad{ background: var(--fcb-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ch6-lead{ margin-top: 28px; font-size: 19px; color: var(--fcb-text); line-height: 1.5; font-weight: 500; max-width: 760px; }
.ch6-body{ margin-top: 14px; font-size: 16px; color: var(--fcb-muted); line-height: 1.65; max-width: 720px; }

.ch6-contact{
  margin-top: 64px;
  border: 1px solid var(--fcb-line); border-radius: 24px;
  background: var(--fcb-panel); padding: 44px 48px; position: relative; overflow: hidden;
}
@media (max-width: 700px){ .ch6-contact{ padding: 32px 24px } }
.ch6-contact::before{
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, var(--fcb-violet) 0%, rgba(138,92,255,0) 65%);
  opacity: .35;
}
.ch6-contact > *{ position: relative; }
.ch6-contact h3{
  font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; margin: 12px 0 0;
  max-width: 18ch;
}
.ch6-contact .body{ margin-top: 20px; font-size: 16px; color: var(--fcb-muted); line-height: 1.65; max-width: 680px; }
.contact-grid{ margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{
  background: rgba(245,241,255,.04); border: 1px solid var(--fcb-line); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--fcb-text);
  transition: background .18s ease, transform .15s ease;
}
.contact-card:hover{ background: rgba(245,241,255,.07); transform: translateY(-1px); }
.contact-card .k{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fcb-muted); font-weight: 600 }
.contact-card .v{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.ch6-cta-row{ margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ch6-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--fcb-violet); color: var(--fcb-text);
  font: 700 15px/1 'Inter', sans-serif; letter-spacing: -.005em;
  box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 16px 40px rgba(138,92,255,.45);
  transition: transform .15s ease, box-shadow .2s ease;
}
.ch6-cta:hover{ transform: translateY(-1px); }
.ch6-byline{ font-size: 14px; color: var(--fcb-muted); }
.ch6-byline b{ color: var(--fcb-text); font-weight: 600; }


/* ---- Gate (homepage email capture) ---- */
.gate{
  min-height: 100vh;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.gate-arc{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
.gate-shell{
  position: relative; z-index: 1;
  width: 100%; max-width: 620px;
  display: flex; flex-direction: column; gap: 28px;
}
.gate-rail-top{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.gate-brand{
  display: flex; align-items: center; gap: 12px;
}
.gate-brand-img{
  display: block;
  height: 44px; width: auto;
  margin: -3px 0 -3px -6px;
}
.gate-lang{ font-size: 11px; }
.gate-card{
  padding: 44px 48px 36px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(15,20,25,.08),
    0 12px 28px rgba(15,20,25,.05),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.gate-kicker{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--teal);
  margin-bottom: 18px;
}
.gate-h1{
  font-family: 'Inter', sans-serif; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.04;
  font-size: clamp(32px, 4.4vw, 48px);
  color: var(--ink); margin: 0 0 18px;
}
.gate-h1 .it{
  font-family: 'Newsreader', 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  color: var(--teal); letter-spacing: -.02em;
}
.gate-sub{
  font-size: 15px; color: var(--ink-70); line-height: 1.6;
  margin: 0 0 28px;
  max-width: 480px;
}
.gate-form{
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
}
.gate-form input{
  flex: 1; min-width: 240px;
  padding: 14px 16px;
  /* font-size MUST be >=16px to prevent iOS Safari auto-zooming on focus
     (that zoom persists across the rest of the deck and breaks layout). */
  font: 500 16px/1 'Inter', sans-serif; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
  letter-spacing: -.005em;
}
.gate-form input::placeholder{ color: var(--ink-40); }
.gate-form input:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(11,59,82,.10);
}
.gate-form input:disabled{ opacity: .65; cursor: not-allowed; }
.gate-form button{
  padding: 14px 22px;
  font: 700 14px/1 'Inter', sans-serif;
  color: var(--paper-2);
  background: var(--ink);
  border: 0; border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: -.005em;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 14px 30px rgba(15,20,25,.18);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.gate-form button:hover:not(:disabled){
  transform: translateY(-1px);
  background: var(--teal);
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 18px 36px rgba(11,59,82,.28);
}
.gate-form button:disabled{ opacity: .65; cursor: not-allowed; }
.gate-err{
  margin-top: 12px;
  font-size: 13px; color: var(--coral); font-weight: 600;
}
.gate-foot{
  margin-top: 20px;
  font-size: 12.5px; color: var(--ink-55);
  font-family: 'Newsreader', 'Times New Roman', serif; font-style: italic;
  line-height: 1.5;
}
.gate-meta{
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-55); font-weight: 600;
}
.gate-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.gate-meta .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grass);
  animation: pulse 1.6s ease-in-out infinite;
}
@media (max-width: 600px){
  .gate{ padding: 16px; }
  .gate-card{ padding: 32px 24px; }
  .gate-h1{ font-size: 28px; }
}


/* ============================================================
   MOBILE FIXES (added after a deep review at 390px iPhone width)
   All rules below are appended last so they win the cascade
   against base styles defined earlier in the file.
   ============================================================ */

/* (1) Ch1 — hide decorative flight-path arc on narrow screens
   (the origin/dest dots were overlapping the headline text). */
@media (max-width: 720px){
  .flight-line{ display: none; }
}

/* (2) Ch2 — properly hide the per-row visualization mini-cards on mobile.
   The media-query rule earlier in the file lost the cascade to the base
   .ch2-row-icon { display: flex } definition that came after it. */
@media (max-width: 1000px){
  .ch2-row .ch2-row-icon{ display: none !important; }
  .ch2-row{ grid-template-columns: 56px 1fr !important; }
  .ch2-row .ch2-row-body{ grid-column: 2 !important; }
}

/* (3) Ch4 — phone responsive (was 400px fixed, overflowed 390px viewports). */
@media (max-width: 720px){
  .phone{ width: 100%; max-width: 400px; }
  .phone .screen{ height: min(620px, calc(100vh - 360px)); }
  .demo-body{ padding: 16px; min-height: auto; }
  .demo-screen{ min-height: 0; }
}

/* (4) Ch4 — compact tally on mobile so cells fit better. */
@media (max-width: 480px){
  .tally-cell{ padding: 10px 12px; }
  .tally-cell .k{ font-size: 9px; letter-spacing: .08em; }
  .tally-cell .v{ font-size: 18px; }
  .tally-cell .delta{ font-size: 9.5px; }
}

/* (5) Ch4 — demo chrome stacks cleanly on small screens. */
@media (max-width: 560px){
  .demo-chrome{ flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .demo-tabs button{ padding: 6px 10px; font-size: 11.5px; }
  .demo-url{ font-size: 10px; }
  .scenarios-grid{ grid-template-columns: 1fr; }
}

/* (6) Mobile rail — lang toggle FR/EN visibility on dark chapters
   (FR was visible, EN was nearly invisible against the dark surface). */
.mobile-rail.dark .lang{ background: rgba(245,241,255,.10); }
.mobile-rail.dark .lang button{ color: var(--fcb-muted); }
.mobile-rail.dark .lang button.on{
  background: var(--fcb-violet); color: var(--fcb-text);
}

/* (7) Gate — full-width CTA button on narrow screens
   (was only ~70% width and looked unfinished). */
@media (max-width: 560px){
  .gate-form{ flex-direction: column; }
  .gate-form input,
  .gate-form button{ width: 100%; justify-content: center; }
  .gate-card{ padding: 28px 22px 24px; }
  .gate-h1{ font-size: clamp(26px, 7vw, 34px); }
  .gate-sub{ font-size: 14px; }
  .gate-meta{ gap: 14px; font-size: 9.5px; letter-spacing: .10em; }
}

/* (8) Sticky bottom "Book" CTA on mobile — the rail CTA only shows in the
   desktop side rail; mobile loses it. Add a small floating chip so the
   conversion path stays available. */
.mobile-cta{
  display: none;
  position: fixed; bottom: 14px; right: 14px; z-index: 60;
  padding: 11px 16px; border-radius: 999px;
  background: var(--teal); color: var(--paper-2);
  font: 700 13px/1 'Inter', sans-serif; letter-spacing: -.005em;
  text-decoration: none;
  align-items: center; gap: 8px;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 12px 28px rgba(11,59,82,.30);
}
.mobile-cta .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber-soft);
  animation: pulse 1.6s ease-in-out infinite;
}
.app.dark .mobile-cta{ background: var(--fcb-violet); box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 12px 32px rgba(138,92,255,.40); }
@media (max-width: 900px){
  .mobile-cta{ display: inline-flex; }
}

/* ============================================================
   MOBILE SCROLL-BOTTOM FIX
   On mobile Safari/Chrome the URL bar is dynamic and `100vh`
   reports the static, pre-chrome height. When the user scrolls
   to the bottom of a chapter, the browser chrome appears and
   covers ~80px of content — the "next" button sits just under it.
   Fix: use 100dvh where supported and pad the chapter bottom on
   small screens so the button is always above the chrome AND
   above the floating Réserver CTA.
   ============================================================ */

/* Use dynamic viewport height where the browser supports it. */
@supports (height: 100dvh) {
  .canvas{ height: 100dvh; }
  .app{ min-height: 100dvh; }
}

/* Extra breathing room at the bottom of each chapter on mobile,
   plus iOS safe-area inset so the button never falls under the
   home indicator or the bottom URL bar. */
@media (max-width: 900px){
  .chapter{
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}

/* Floating CTA also respects iOS safe area so it doesn't sit
   under the home indicator / bottom Safari chrome. */
.mobile-cta{
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   Ch4 right-block variant — Dashboard tab
   (WhatsApp tab keeps the existing .scenarios styling)
   ============================================================ */
.scenarios.dashboard-info{
  display: flex; flex-direction: column; gap: 14px;
}
.scenarios.dashboard-info .head{ margin-bottom: 4px; }
.dashboard-info-title{
  font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em;
  font-size: 19px; line-height: 1.25; margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.dashboard-info-list{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.dashboard-info-list li{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--ink-70); line-height: 1.55;
}
.dashboard-info-list li svg{
  flex-shrink: 0; margin-top: 4px; color: var(--teal);
}

/* Highlight quote card — strategic-impact statement */
.dashboard-highlight{
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-tint) 0%, var(--amber-tint) 140%);
  border: 1px solid rgba(11,59,82,.14);
  position: relative;
  overflow: hidden;
}
.dashboard-highlight::before{
  content: "";
  position: absolute; left: 14px; top: 4px;
  font-family: 'Newsreader', serif; font-size: 60px; line-height: 1;
  color: rgba(11,59,82,.16); pointer-events: none;
  content: "";
}
.dashboard-highlight .hl-label{
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
  margin-bottom: 6px;
}
.dashboard-highlight .hl-body{
  margin: 0;
  font-family: 'Newsreader', 'Times New Roman', serif;
  font-style: italic; font-weight: 500;
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
  letter-spacing: -.005em;
}