@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..900&family=Inter:wght@400;500;600&family=Instrument+Serif:ital@1&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap');

:root{
  /* Ocean palette — token NAMES kept from the original French system so all
     20 pages restyle from this one file; only VALUES changed. */
  --encre:#00122E;
  --creme:#F4F5FA;
  --rouge:#EE4237;
  --bleu:#2E63F6;
  --vert:#0FA573;  /* functional health-green (data health checks only) */
  --white:#FFFFFF;
  --ink-muted:#5C6577;
  --cream-line:#E4E7F0;
  --on-encre-muted:#B9C1D6;
  --on-encre-line:rgba(255,255,255,0.14);
  --ocean:#0A0F1E;      /* aurora ground for dark blocks — app-navy, matches app.dataassistant-ai.com */
  --sky:#38BDF8;        /* glow-only — NEVER text on white (~2:1 contrast) */
  --cyan:#22D3EE;       /* glow-only — NEVER text on white */
  --sky-soft:#7DD3FC;   /* small accents on dark grounds only */
  --red-ink:#B02E28;    /* red for TEXT on white (accessible) */
  --faint:#9AA3B8;      /* marquee / tertiary text on light */
  --warn:#C77414;       /* needs_human amber */
  /* --serif is the DISPLAY role (headlines, big numerals) — since the 2026-09
     font decision it is a grotesque, not a serif; the token name is kept so
     every display rule keeps working. The logo wordmark alone stays
     Instrument Serif italic (hardcoded in its own rule). */
  --serif:"Schibsted Grotesk","Noto Sans TC","Noto Sans Thai","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter","Noto Sans TC","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--creme);
  color:var(--encre);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2px solid var(--bleu); outline-offset:3px; border-radius:2px;}
img,svg{max-width:100%;}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important;} }

/* ---------- section rhythm ---------- */
.section-dark{ background:var(--encre); }
.section-white{ background:var(--white); }
.section-creme{ background:var(--creme); }

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:56px 44px;
}
@media (max-width:640px){ .wrap{ padding:40px 22px; } }

/* ---------- site nav (sits inside the dark hero) ---------- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:44px;
}
.brand-lockup{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-lockup .mark{ width:30px; height:30px; flex:none; display:block; }
.brand-lockup .wordmark{
  /* the ONLY italic on the site — the logo lockup keeps its slant.
     Hardcoded face: the wordmark is the printed brand lockup and must NOT
     follow --serif when the display face changes. */
  font-family:"Instrument Serif","Noto Serif TC",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:19px;
  color:var(--creme);
  letter-spacing:-.005em;
}
.brand-lockup .wordmark em{ color:var(--rouge); font-style:italic; }
.nav-links{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; row-gap:8px; }
.nav-links a{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--on-encre-muted);
  text-decoration:none;
}
.nav-links a:hover{ color:var(--creme); }
.nav-links a.current{ color:var(--creme); }
select.lang-switch{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--encre);
  background:var(--creme);
  border:none;
  border-radius:6px;
  padding:5px 8px;
  cursor:pointer;
}.nav-links a.cta{
  color:var(--encre);
  background:var(--creme);
  padding:10px 24px;
  border-radius:6px;
  font-size:15px;
}
.nav-links a.cta:hover{ background:var(--white); }

/* ---------- hero type ---------- */
.eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--sky-soft);
  margin:0 0 16px;
}
.section-white .eyebrow, .section-creme .eyebrow{ color:var(--red-ink); }

h1.headline{
  font-family:var(--serif);
  font-style:normal;
  font-weight:500;
  font-size:clamp(28px,4vw,42px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 20px;
  text-wrap:balance;
  max-width:16ch;
  color:var(--white);
}
.section-white h1.headline, .section-creme h1.headline{ color:var(--encre); }

.sub{
  font-size:17px;
  line-height:1.6;
  max-width:56ch;
  margin:0;
  color:var(--on-encre-muted);
}
.section-white .sub, .section-creme .sub{ color:var(--ink-muted); }

/* ---------- hero top (headline + mascot) ---------- */
.hero-top{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.hero-top .hero-text{ flex:1; min-width:280px; }
.hero-mascot{ flex:none; width:clamp(84px,13vw,140px); height:auto; }
@media (max-width:640px){ .hero-mascot{ width:76px; } }

/* ---------- proof band ---------- */
.proof{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;
  background:var(--on-encre-line);
  border-top:1px solid var(--on-encre-line);
  margin-top:48px;
}
.proof div{ background:var(--encre); padding:20px 8px 6px; text-align:center; }
.proof .k{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:26px; color:var(--white); font-variant-numeric:tabular-nums; display:block;
}
.proof .l{ font-size:11.5px; letter-spacing:.03em; color:var(--on-encre-muted); margin-top:4px; display:block; }

/* ---------- path cards (home) ---------- */
.path-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:40px;
}
.path-card{
  background:var(--white);
  border:1px solid var(--cream-line);
  border-radius:12px;
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.path-card .tag{ font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; }
.path-card h3{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:20px; margin:0; color:var(--encre); }
.path-card .price{ font-size:14px; font-weight:600; color:var(--bleu); font-variant-numeric:tabular-nums; }
.path-card p{ font-size:14.5px; line-height:1.55; color:var(--ink-muted); margin:0; flex:1; }
.path-card .go{ font-size:14px; font-weight:600; color:var(--red-ink); text-decoration:none; margin-top:4px; }
.path-card .go:hover{ text-decoration:underline; }

/* ---------- checklist ---------- */
.checklist{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; max-width:62ch; }
.checklist li{ display:flex; gap:12px; font-size:15.5px; line-height:1.6; color:var(--encre); }
.checklist li::before{ content:""; flex:none; width:9px; height:9px; margin-top:7px; border-radius:2px; background:var(--bleu); }

/* ---------- quote ---------- */
.quote{ border-left:3px solid var(--rouge); padding:4px 0 4px 22px; margin:36px 0 0; max-width:58ch; }
.quote p{ font-family:var(--serif); font-style:normal; font-size:19px; line-height:1.5; color:var(--encre); margin:0; }
.section-dark .quote p{ color:var(--white); }
.section-dark .quote{ border-left-color:var(--sky-soft); }

/* ---------- timeline (genuine sequences only) ---------- */
.timeline{ margin-top:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:20px; }
.timeline .step{ background:var(--white); border:1px solid var(--cream-line); border-radius:10px; padding:20px; }
.timeline .num{ font-family:var(--serif); font-style:normal; font-weight:500; color:var(--red-ink); font-size:22px; display:block; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.timeline .step h4{ margin:0 0 6px; font-size:14.5px; color:var(--encre); }
.timeline .step p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-muted); }
.timeline .step p b.pain{ color:var(--red-ink); }

.steps-list{ margin:28px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:18px; max-width:64ch; }
.steps-list li{ display:flex; gap:16px; }
.steps-list .num{ font-family:var(--serif); font-style:normal; font-weight:500; color:var(--red-ink); font-size:20px; flex:none; width:1.4em; font-variant-numeric:tabular-nums; }
.steps-list .txt{ font-size:15px; line-height:1.6; color:var(--encre); }
.steps-list .txt b{ color:var(--encre); }

/* ---------- pricing ---------- */
.pricing-grid{ margin-top:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; max-width:640px; }
.price-card{ background:var(--white); border:1px solid var(--cream-line); border-radius:12px; padding:24px; position:relative; }
.price-card.hi{ border-color:var(--rouge); border-width:2px; }
.price-card .star{ position:absolute; top:-11px; right:18px; background:var(--rouge); color:var(--white); font-size:11px; font-weight:700; letter-spacing:.05em; padding:3px 10px; border-radius:999px; }
.price-card .plan{ font-size:14.5px; font-weight:700; color:var(--encre); margin:0 0 6px; }
.price-card .amt{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:28px; color:var(--bleu); margin:0 0 10px; font-variant-numeric:tabular-nums; }
.price-card .amt .per{ font-size:14px; font-style:normal; font-weight:600; color:var(--ink-muted); }
.price-card .scope{ font-size:13px; line-height:1.6; color:var(--ink-muted); margin:0; }

.finept{ margin-top:18px; font-size:12.5px; line-height:1.6; color:var(--ink-muted); max-width:64ch; }

/* ---------- cta band ---------- */
.cta-band .wrap{
  padding:40px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cta-band .lead{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:21px; color:var(--white); margin:0 0 4px; }
.cta-band .sub2{ font-size:13.5px; color:var(--on-encre-muted); margin:0; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  border-radius:6px; font-size:14.5px; font-weight:500; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--encre); color:var(--white); }
.btn-primary:hover{ background:#0A2547; box-shadow:0 6px 18px rgba(0,18,46,.25); }

/* ---------- footer ---------- */
.foot-line .wrap{ padding:16px 44px 26px; font-size:12px; color:var(--ink-muted); }

/* ---------- headings ---------- */
h2.h2{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:26px; color:var(--encre); margin:0 0 4px; }
.section-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }

/* ---------- platform tour (platform.html) ---------- */
.impact-quote{ margin-top:18px; font-family:var(--serif); font-style:normal; font-size:15px; color:var(--on-encre-muted); max-width:64ch; }
.chapters{ margin-top:36px; display:flex; flex-direction:column; gap:26px; }
.chapter{ background:var(--white); border:1px solid var(--cream-line); border-radius:12px; padding:30px 28px 30px; }
.chapter.hi{ border-color:var(--rouge); border-width:2px; }
.chapter .head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.chapter .num{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:30px; color:var(--rouge); font-variant-numeric:tabular-nums; }
.chapter h3{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:21px; margin:0; color:var(--encre); }
.chapter .tagline{ font-size:13.5px; font-weight:600; color:var(--bleu); width:100%; margin-top:2px; }
.chapter .cols{ display:grid; grid-template-columns:1fr 220px; gap:26px; margin-top:16px; }
@media (max-width:720px){ .chapter .cols{ grid-template-columns:1fr; } }
.chapter .value{ font-size:15px; line-height:1.65; color:var(--ink-muted); margin:0 0 14px; }
.chapter .checklist{ margin-top:14px; }
.chapter .checklist li{ font-size:14px; }
.chapter .stat{ background:var(--creme); border:1px solid var(--cream-line); border-radius:12px; padding:22px 18px; text-align:center; align-self:start; }
.chapter .stat .k{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:26px; color:var(--bleu); display:block; font-variant-numeric:tabular-nums; }
.chapter .stat .l{ font-size:12px; color:var(--ink-muted); margin-top:4px; display:block; }
.chapter .note{ margin-top:16px; font-size:13px; line-height:1.6; color:var(--ink-muted); background:var(--creme); border-radius:8px; padding:10px 14px; }
.chapter .hi-strip{ margin:22px -30px -32px; background:var(--encre); color:var(--on-encre-muted); border-radius:0 0 10px 10px; padding:16px 30px; font-size:14px; line-height:1.6; }
.chapter .hi-strip b{ color:var(--white); display:block; margin-bottom:2px; }
.loop-grid{ margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.loop-grid .cell{ border:1px solid var(--on-encre-line); border-radius:12px; padding:20px 16px; }
.loop-grid .cell b{ display:block; color:var(--white); font-size:15px; margin-bottom:4px; }
.loop-grid .cell span{ font-size:12.5px; color:var(--on-encre-muted); line-height:1.5; }

/* ---------- platform: chapter accent system ("Three Inks") ---------- */
.chapter{
  --acc:var(--bleu);
  --acc-ink:var(--bleu);
  --acc-soft:rgba(46,99,246,0.07);
  --acc-line:rgba(46,99,246,0.28);
  border-top:3px solid var(--acc);
}
.chapter[data-accent="encre"]{
  --acc:var(--encre);
  --acc-ink:var(--encre);
  --acc-soft:rgba(0,18,46,0.06);
  --acc-line:rgba(0,18,46,0.24);
}
.chapter[data-accent="rouge"]{
  --acc:var(--rouge);
  --acc-ink:#B02E28;
  --acc-ink:color-mix(in srgb, var(--rouge) 72%, var(--encre));
  --acc-soft:rgba(238,66,55,0.06);
  --acc-line:rgba(238,66,55,0.30);
}
.chapter.hi{ border-top-width:3px; }

/* ---------- platform: ghost numerals + accent details ---------- */
.chapter .num{
  font-size:54px;
  line-height:.85;
  font-weight:500;
  color:var(--acc);
  opacity:.30;
}
@media (max-width:640px){ .chapter .num{ font-size:40px; } }
.chapter .checklist li::before{ background:var(--acc); }
.chapter .note{
  background:var(--acc-soft);
  border-left:3px solid var(--acc);
  border-radius:0 8px 8px 0;
}
.chapter .stat{
  background:
    radial-gradient(140% 120% at 50% -20%, var(--acc-soft) 0%, rgba(255,255,255,0) 62%),
    var(--white);
  border-color:var(--acc-line);
}
.chapter .stat .k{ color:var(--acc-ink); }

/* ---------- platform: tagline pill ---------- */
.chapter .tagline{ width:100%; margin-top:4px; }
.chapter .tagline > span{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--acc-ink);
  background:var(--acc-soft);
  border:1px solid var(--acc-line);
  border-radius:999px;
  padding:4px 12px;
}

/* ---------- platform: chapter 08 crescendo ---------- */
.chapter.hi{
  background:
    radial-gradient(90% 65% at 88% 0%, rgba(238,66,55,0.08) 0%, rgba(255,255,255,0) 60%),
    var(--white);
}
.chapter.hi .hi-strip{ border-top:3px solid var(--rouge); }
.chapter.hi .hi-strip b{ color:var(--creme); }

/* ---------- platform: aurora (dark-section glow) ---------- */
.section-dark.aurora{ position:relative; overflow:hidden; }
.section-dark.aurora > .wrap{ position:relative; z-index:1; }
.section-dark.aurora::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(640px 480px at 12% -10%, rgba(46,99,246,0.55), transparent 65%),
    radial-gradient(540px 420px at 88% 4%, rgba(34,211,238,0.28), transparent 60%),
    radial-gradient(820px 560px at 55% 118%, rgba(13,148,136,0.30), transparent 68%);
}
.section-dark.aurora-foot::before{
  background:
    radial-gradient(700px 520px at 85% 115%, rgba(46,99,246,0.50), transparent 66%),
    radial-gradient(520px 420px at 8% 96%, rgba(34,211,238,0.22), transparent 62%);
}
.loop-grid .cell{
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.loop-grid .cell:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.30);
}

/* ---------- platform: chapter pills ---------- */
.chapter-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chapter-pills a{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:8px 16px;
  border:1px solid var(--on-encre-line);
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  color:var(--on-encre-muted);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.chapter-pills a .n{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:12px; color:var(--sky-soft); font-variant-numeric:tabular-nums;
}
.chapter-pills a:hover{
  color:var(--creme);
  border-color:rgba(255,255,255,0.32);
  background:rgba(255,255,255,0.08);
  transform:translateY(-1px);
}
.chapter-pills a.hi{
  border-color:rgba(238,66,55,0.55);
  background:rgba(238,66,55,0.12);
  color:var(--creme);
}
.chapter-pills a.hi:hover{ background:rgba(238,66,55,0.20); border-color:var(--rouge); }
.chapter{ scroll-margin-top:24px; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

/* ---------- platform: reading filament + hover lift ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:80; pointer-events:none; }
.scroll-progress span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--bleu), var(--rouge));
  transform:scaleX(0); transform-origin:0 50%;
}
.chapter{ transition:transform .35s cubic-bezier(.22,.65,.3,1), box-shadow .35s ease; }
.chapter:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px -20px rgba(0,18,46,.4), 0 2px 10px rgba(0,18,46,.07);
}
.chapter.hi:hover{ box-shadow:0 16px 36px -20px rgba(238,66,55,.35), 0 2px 10px rgba(0,18,46,.07); }

/* ---------- platform: animated chapter mini-diagrams ----------
   Shape-first (minimal text) so 5 locales share one layout; all motion is
   opacity/transform on gentle loops, killed globally by the reduced-motion
   rule at the top of this sheet. Accent vars come from the chapter card. */
.chapter .side{ display:flex; flex-direction:column; gap:14px; align-self:start; }
.diagram{ width:100%; }

/* generic chip */
.dg-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.01em;
  padding:5px 10px; border-radius:8px;
  border:1px solid var(--cream-line); background:var(--creme); color:var(--ink-muted);
}

/* 01 connect: inbox chips → animated flow → DB */
.dg-connect{ display:flex; align-items:center; gap:8px; }
.dg-connect .stack{ display:flex; flex-direction:column; gap:6px; }
.dg-connect .flow{ flex:1; height:2px; min-width:28px; background:var(--acc-line); position:relative; border-radius:1px; }
.dg-connect .flow::after{
  content:""; position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--acc); animation:dg-flow 2.2s linear infinite;
}
@keyframes dg-flow{ 0%{ left:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 6px); opacity:0; } }

/* 08 universe: drifting opportunity bubbles */
.dg-orbit{ position:relative; height:84px; border:1px solid var(--cream-line); border-radius:10px; background:var(--white); overflow:hidden; }
.dg-orbit i{ position:absolute; border-radius:50%; opacity:.55; animation:dg-drift 6s ease-in-out infinite alternate; }
.dg-orbit .o1{ left:16%; top:52%; width:26px; height:26px; background:var(--bleu); }
.dg-orbit .o2{ left:46%; top:22%; width:14px; height:14px; background:var(--encre); animation-delay:1.2s; }
.dg-orbit .o3{ left:68%; top:48%; width:34px; height:34px; background:var(--rouge); opacity:.4; animation-delay:.6s; }
.dg-orbit .o4{ left:34%; top:64%; width:10px; height:10px; background:var(--encre); animation-delay:2s; }
@keyframes dg-drift{ from{ transform:translate(0,0); } to{ transform:translate(6px,-8px); } }

/* ---------- platform: illustrated chapter diagrams (dg2 family) ---------- */
/* 02 dataprep: jumbled cells settle into clean table rows, a green health
   stamp lands, then the capacity + Google Cloud security chips surface.
   One shared 6s loop (opacity/transform only, killed by the global
   reduced-motion rule); base styles ARE the finished tidy state, so with
   animations disabled the static fallback shows aligned rows + stamp + chips. */
.dg2-dataprep{ position:relative; }
.dg2-dataprep-sheet{
  background:var(--white);
  border:1px solid var(--cream-line);
  border-radius:10px;
  padding:8px 10px;
  overflow:hidden;
}
.dg2-dataprep-row{ display:flex; gap:5px; }
.dg2-dataprep-row + .dg2-dataprep-row{ margin-top:4px; }
.dg2-dataprep-row i{
  display:block; flex:none; height:6px; border-radius:3px;
  background:var(--acc-soft, rgba(0,18,46,.06));
  border:1px solid var(--acc-line, rgba(0,18,46,.24));
  animation:dg2-dataprep-settle 6s ease infinite backwards;
}
.dg2-dataprep-row i:first-child{
  background:var(--acc-line, rgba(0,18,46,.24));
  border-color:transparent;
}
/* table shape (cell widths) */
.dg2-dataprep-row:nth-child(1) i:first-child{ width:44%; }
.dg2-dataprep-row:nth-child(1) i:last-child{ width:24%; }
.dg2-dataprep-row:nth-child(2) i:first-child{ width:36%; }
.dg2-dataprep-row:nth-child(2) i:last-child{ width:38%; }
.dg2-dataprep-row:nth-child(3) i:first-child{ width:50%; }
.dg2-dataprep-row:nth-child(3) i:last-child{ width:18%; }
.dg2-dataprep-row:nth-child(4) i:first-child{ width:28%; }
.dg2-dataprep-row:nth-child(4) i:last-child{ width:44%; }
/* scatter pose per cell (chaos at loop start/end, tidy in between) */
.dg2-dataprep-row:nth-child(1) i:first-child{ --dx:12px;  --dy:7px;   --r:8deg; }
.dg2-dataprep-row:nth-child(1) i:last-child{  --dx:-10px; --dy:12px;  --r:-12deg; }
.dg2-dataprep-row:nth-child(2) i:first-child{ --dx:-13px; --dy:-5px;  --r:-7deg; }
.dg2-dataprep-row:nth-child(2) i:last-child{  --dx:9px;   --dy:7px;   --r:10deg; }
.dg2-dataprep-row:nth-child(3) i:first-child{ --dx:8px;   --dy:-9px;  --r:12deg; }
.dg2-dataprep-row:nth-child(3) i:last-child{  --dx:-12px; --dy:-4px;  --r:-9deg; }
.dg2-dataprep-row:nth-child(4) i:first-child{ --dx:-7px;  --dy:-11px; --r:6deg; }
.dg2-dataprep-row:nth-child(4) i:last-child{  --dx:13px;  --dy:-7px;  --r:-11deg; }
.dg2-dataprep-row:nth-child(2) i{ animation-delay:.07s; }
.dg2-dataprep-row:nth-child(3) i{ animation-delay:.14s; }
.dg2-dataprep-row:nth-child(4) i{ animation-delay:.21s; }
@keyframes dg2-dataprep-settle{
  0%, 8%{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:.55; }
  27%, 93%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:.55; }
}
/* green health stamp — functional health-green (--vert) only */
.dg2-dataprep-check{
  position:absolute; top:-8px; right:-5px; width:22px; height:22px;
  animation:dg2-dataprep-stamp 6s ease infinite;
}
.dg2-dataprep-check circle{ fill:var(--white); stroke:var(--vert); stroke-width:1.5; }
.dg2-dataprep-check path{ fill:none; stroke:var(--vert); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@keyframes dg2-dataprep-stamp{
  0%, 33%{ opacity:0; transform:scale(.4) rotate(-10deg); }
  41%{ opacity:1; transform:scale(1.14) rotate(3deg); }
  47%{ transform:scale(1) rotate(0deg); }
  93%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.6) rotate(-6deg); }
}
/* capacity + Google Cloud chips */
.dg2-dataprep-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.dg2-dataprep-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.01em; line-height:1.3;
  padding:4px 9px; border-radius:999px;
  animation:dg2-dataprep-rise 6s ease infinite backwards;
}
.dg2-dataprep-rows{
  color:var(--acc-ink, var(--encre));
  background:var(--acc-soft, rgba(0,18,46,.06));
  border:1px solid var(--acc-line, rgba(0,18,46,.24));
  font-variant-numeric:tabular-nums;
}
.dg2-dataprep-cloud{
  color:var(--ink-muted);
  background:var(--creme);
  border:1px solid var(--cream-line);
  font-weight:600; white-space:nowrap;
  animation-delay:.15s;
}
.dg2-dataprep-cloud svg{ width:10px; height:10px; flex:none; }
.dg2-dataprep-cloud rect, .dg2-dataprep-cloud path{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
@keyframes dg2-dataprep-rise{
  0%, 40%{ opacity:0; transform:translateY(6px); }
  50%{ opacity:1; transform:translateY(0); }
  94%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(6px); }
}

/* 03 campaign: happy marketing manager launching envelopes from the outbox.
   Consumes the chapter card's --acc vars (rouge on ch-03) with rouge fallbacks,
   same pattern as the rest of the dg2 family. Base (non-animated) styles double
   as the reduced-motion still: one envelope frozen mid-flight and one sparkle
   stay visible when animations are killed. */
.dg2-campaign{ position:relative; height:112px; }
.dg2-campaign::after{
  content:""; position:absolute; left:2px; right:30%; bottom:0; height:0;
  border-top:1.5px solid var(--cream-line); border-radius:1px;
}
.dg2-campaign-fig{
  position:absolute; left:8px; bottom:-2px; width:64px; height:88px;
  color:var(--encre);
  animation:dg2-campaign-bob 4.6s ease-in-out infinite;
}
@keyframes dg2-campaign-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
.dg2-campaign-tray{
  position:absolute; left:80px; bottom:1.5px; width:40px; height:25px; border-radius:6px;
  border:1.5px solid var(--acc-line, rgba(238,66,55,.30));
  background:var(--acc-soft, rgba(238,66,55,.06));
}
.dg2-campaign-tray::after{
  content:""; position:absolute; inset:5px 5px auto 5px; height:0;
  border-top:1.5px solid var(--acc-line, rgba(238,66,55,.30));
}
.dg2-campaign-env{
  position:absolute; left:88px; bottom:14px; width:22px; height:15px; border-radius:3px;
  border:1.5px solid var(--acc, var(--rouge)); background:var(--white); opacity:0;
  animation:dg2-campaign-fly 4.5s ease-in infinite;
}
.dg2-campaign-env::after{
  content:""; position:absolute; left:-1px; top:-1px; right:-1px; height:8px;
  border:1.5px solid var(--acc, var(--rouge)); border-top:none; border-radius:0 0 2px 2px;
  transform:perspective(20px) rotateX(28deg); transform-origin:top;
}
.dg2-campaign-env:first-of-type{ opacity:1; transform:translate(40px,-32px) rotate(6deg); }
.dg2-campaign-env:nth-of-type(2){ animation-delay:1.5s; }
.dg2-campaign-env:nth-of-type(3){ animation-delay:3s; }
@keyframes dg2-campaign-fly{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(.85); }
  12%{ opacity:1; }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(92px,-72px) rotate(9deg) scale(1); }
}
.dg2-campaign-spark{
  position:absolute; color:var(--acc, var(--rouge)); opacity:0;
  animation:dg2-campaign-twinkle 3.8s ease-in-out infinite;
}
.dg2-campaign-s1{ left:64px; top:20px; width:12px; height:12px; opacity:.9; }
.dg2-campaign-s2{ left:4px; top:32px; width:9px; height:9px; animation-delay:1.3s; }
.dg2-campaign-s3{ left:42px; top:8px; width:7px; height:7px; animation-delay:2.5s; }
@keyframes dg2-campaign-twinkle{
  0%,100%{ opacity:0; transform:scale(.35) rotate(0deg); }
  30%{ opacity:1; transform:scale(1) rotate(40deg); }
  60%{ opacity:0; transform:scale(.5) rotate(80deg); }
}

/* 04 audience: a crowd of person pictograms; a magnifier sweeps the grid
   and the best-fit contacts light up in rouge with a soft ping. Crowd = muted
   cream-line ink, lens = chapter accent ink, finds = rouge. Only text is the
   localized __ENGAGE__ tag. 6s loop, opacity/transform only; with animations
   killed (reduced motion) the static frame shows the lens resting on the
   first find and all three best-fits lit. */
.dg2-audience{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:236px; }
.dg2-audience svg{ display:block; width:100%; height:auto; }
.dg2-audience-mut{ color:var(--cream-line); }
.dg2-audience-on{
  color:var(--rouge); opacity:1;
  animation:dg2-audience-found 6s ease infinite both;
}
.dg2-audience-h2 .dg2-audience-on{ animation-delay:2s; }
.dg2-audience-h3 .dg2-audience-on{ animation-delay:4s; }
@keyframes dg2-audience-found{
  0%{ opacity:0; } 5%{ opacity:1; } 30%{ opacity:1; } 40%{ opacity:0; } 100%{ opacity:0; }
}
.dg2-audience-hit > circle{
  fill:none; stroke:rgba(238,66,55,.40); stroke-width:1.5;
  opacity:0; transform-box:fill-box; transform-origin:center;
  animation:dg2-audience-ping 6s ease-out infinite both;
}
.dg2-audience-h2 > circle{ animation-delay:2s; }
.dg2-audience-h3 > circle{ animation-delay:4s; }
@keyframes dg2-audience-ping{
  0%{ opacity:0; transform:scale(.55); }
  6%{ opacity:.55; transform:scale(.85); }
  22%{ opacity:0; transform:scale(1.3); }
  100%{ opacity:0; transform:scale(1.3); }
}
.dg2-audience-lens{
  transform:translate(84px,14px);
  animation:dg2-audience-sweep 6s ease-in-out infinite;
}
.dg2-audience-lens circle{ fill:rgba(0,18,46,.04); stroke:var(--acc-ink, var(--encre)); stroke-width:1.5; }
.dg2-audience-lens line{ stroke:var(--acc-ink, var(--encre)); stroke-width:1.5; stroke-linecap:round; }
@keyframes dg2-audience-sweep{
  0%,24%{ transform:translate(84px,14px); }
  33%,57%{ transform:translate(188px,44px); }
  66%,90%{ transform:translate(136px,74px); }
  100%{ transform:translate(84px,14px); }
}
.dg2-audience-tag{
  align-self:flex-end; max-width:100%;
  font-size:10px; font-weight:700; letter-spacing:.03em; line-height:1.3;
  text-align:center;
  color:var(--rouge);
  background:rgba(238,66,55,.07);
  border:1px solid rgba(238,66,55,.30);
  border-radius:999px; padding:3px 9px;
  animation:dg2-audience-cheer 6s ease infinite;
}
@keyframes dg2-audience-cheer{
  0%,100%{ opacity:.75; transform:translateY(0); }
  5%,38%,71%{ opacity:1; transform:translateY(-1px); }
  22%,55%,88%{ opacity:.75; transform:translateY(0); }
}

/* 05 pam — ledger columns: three category columns rise in turn, then the
   account closes on a total under a sum rule with a double-rule beneath
   (classic accounting close). Reduced-motion base state is the finished
   static chart: no opacity:0 / scale(0) outside keyframes. */
.dg2-pam-chart{
  display:flex; align-items:flex-end; justify-content:center; gap:16px;
  height:70px; padding:0 6px;
  border-bottom:1px solid var(--cream-line);
}
.dg2-pam-col{
  flex:1; max-width:54px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px;
}
.dg2-pam-val{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:10px; line-height:1; color:var(--acc-ink, var(--bleu)); white-space:nowrap;
  animation:dg2-pam-val 5s ease infinite;
}
.dg2-pam-bar{
  display:block; width:30px; border-radius:5px 5px 1px 1px;
  background:var(--acc, var(--bleu)); position:relative; overflow:hidden;
  transform-origin:50% 100%;
  animation:dg2-pam-grow 5s cubic-bezier(.3,.7,.3,1) infinite;
}
/* tonal ramp toward the page cream — smaller categories sit lighter */
.dg2-pam-bar::after{ content:""; position:absolute; inset:0; background:var(--creme); }
.dg2-pam-c1 .dg2-pam-bar{ height:20px; } .dg2-pam-c1 .dg2-pam-bar::after{ opacity:.55; }
.dg2-pam-c2 .dg2-pam-bar{ height:38px; } .dg2-pam-c2 .dg2-pam-bar::after{ opacity:.28; }
.dg2-pam-c3 .dg2-pam-bar{ height:50px; } .dg2-pam-c3 .dg2-pam-bar::after{ opacity:0; }
.dg2-pam-c2 .dg2-pam-bar, .dg2-pam-c2 .dg2-pam-val{ animation-delay:.35s; }
.dg2-pam-c3 .dg2-pam-bar, .dg2-pam-c3 .dg2-pam-val{ animation-delay:.7s; }
@keyframes dg2-pam-grow{
  0%{ transform:scaleY(0); opacity:0; }
  6%{ opacity:1; }
  16%{ transform:scaleY(1.04); }
  22%{ transform:scaleY(1); }
  88%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}
@keyframes dg2-pam-val{
  0%,13%{ opacity:0; transform:translateY(3px); }
  23%{ opacity:1; transform:translateY(0); }
  88%{ opacity:1; }
  100%{ opacity:0; }
}
/* accounting close: total under the sum rule, double-ruled beneath */
.dg2-pam-total{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px;
  padding:7px 2px 5px;
  border-bottom:3px double var(--acc-line, rgba(46,99,246,.28));
}
.dg2-pam-lbl{
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); min-width:0;
}
.dg2-pam-sum{
  flex:none; margin-left:auto;
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:15px; line-height:1.1; color:var(--acc-ink, var(--bleu));
  font-variant-numeric:tabular-nums;
}
@keyframes dg2-pam-sum{
  0%,26%{ opacity:0; transform:translateY(2px); }
  38%{ opacity:1; transform:translateY(0); }
  90%{ opacity:1; }
  100%{ opacity:0; }
}
.dg2-pam-sum{ animation:dg2-pam-sum 5s ease infinite; }

/* 07 dashboard (dg2): team-manager view — a crown-marked manager avatar
   (with a soft "keeping watch" ping) sits above three member rows whose
   activity bars tick along at different rhythms; per-member counts roll
   up to the manager's total. Accent vars come from the chapter card
   (bleu on ch-07); motion is opacity/transform only and is killed by the
   global prefers-reduced-motion rule (static fallback: full bars). */
.dg2-dashboard{
  background:var(--white);
  border:1px solid var(--cream-line);
  border-radius:10px;
  padding:8px 10px;
}
.dg2-dashboard-boss{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:7px; margin-bottom:7px;
  border-bottom:1px solid var(--cream-line);
}
.dg2-dashboard-ava{
  position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--creme); border:1px solid var(--cream-line);
  color:var(--ink-muted);
}
.dg2-dashboard-ava svg{ display:block; width:13px; height:13px; }
.dg2-dashboard-mgr{
  width:26px; height:26px;
  background:var(--acc-soft, rgba(46,99,246,.07)); border-color:var(--acc-line, rgba(46,99,246,.28));
  color:var(--acc-ink, var(--bleu));
}
.dg2-dashboard-mgr svg{ width:18px; height:18px; }
.dg2-dashboard-mgr::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--acc, var(--bleu));
  opacity:0; transform:scale(.7);
  animation:dg2-dashboard-ping 4.2s ease-out infinite;
}
@keyframes dg2-dashboard-ping{
  0%{ opacity:0; transform:scale(.7); }
  8%{ opacity:.5; }
  50%{ opacity:0; transform:scale(1.3); }
  100%{ opacity:0; transform:scale(1.3); }
}
.dg2-dashboard-sum{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:12px; color:var(--acc-ink, var(--bleu)); font-variant-numeric:tabular-nums;
}
.dg2-dashboard-mem{ display:flex; align-items:center; gap:8px; height:18px; }
.dg2-dashboard-mem + .dg2-dashboard-mem{ margin-top:6px; }
.dg2-dashboard-mem > b{
  flex:none; min-width:15px; text-align:right;
  font-size:9.5px; font-weight:700; color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
}
.dg2-dashboard-act{ flex:1; display:flex; align-items:flex-end; gap:3px; height:13px; }
.dg2-dashboard-act i{
  flex:1; border-radius:2px 2px 1px 1px;
  background:var(--acc, var(--bleu)); opacity:.7;
  transform-origin:50% 100%;
  animation:dg2-dashboard-tick var(--dg2-dash-spd,3.4s) ease-in-out infinite;
  animation-delay:calc(var(--dg2-dash-r,0s) + var(--dg2-dash-d,0s));
}
.dg2-dashboard-act i:nth-child(1){ height:5px; }
.dg2-dashboard-act i:nth-child(2){ height:9px;  --dg2-dash-d:.18s; }
.dg2-dashboard-act i:nth-child(3){ height:7px;  --dg2-dash-d:.36s; }
.dg2-dashboard-act i:nth-child(4){ height:12px; --dg2-dash-d:.54s; }
.dg2-dashboard-act i:nth-child(5){ height:8px;  --dg2-dash-d:.72s; }
.dg2-dashboard-act i:nth-child(6){ height:10px; --dg2-dash-d:.9s; }
.dg2-dashboard-act i:nth-child(7){ height:6px;  --dg2-dash-d:1.08s; }
.dg2-dashboard-act i:nth-child(8){ height:11px; --dg2-dash-d:1.26s; }
.dg2-dashboard-mem:nth-child(3){ --dg2-dash-spd:4.6s; --dg2-dash-r:-1.9s; }
.dg2-dashboard-mem:nth-child(4){ --dg2-dash-spd:3.9s; --dg2-dash-r:-.8s; }
@keyframes dg2-dashboard-tick{
  0%,100%{ transform:scaleY(.4); opacity:.55; }
  45%{ transform:scaleY(1); opacity:.95; }
  70%{ transform:scaleY(.6); opacity:.75; }
}

/* 06 leads (dg2-leads): contact stream → AI diamond → scored tiers, then the
   payoff on each side. High tier (left, rouge): serif "82" pops over the hot
   shelf and a sales-rep pictogram acts on the winners — phone to the ear
   (wiggle right after the batch lands) beside a steaming coffee cup (call +
   meeting). Low tier (right, muted): serif "31" fades in over the cool shelf
   above the localized __NOTDM__ note (wraps safely for CJK/Thai). Accent vars
   come from the chapter card (encre on ch-06); rouge marks the hot tier and
   the rep's phone only. Fixed 220×148 stage, centered when the column is
   wider (mobile), so all trajectories stay exact. Motion is opacity/transform
   only on a shared 4.8s cycle (steam curls on their own 3.6s loop), killed by
   the global reduced-motion rule — base styles ARE the finished static scene:
   stream row, AI node, sorted tiers, both scores, rep + coffee, note. */
.dg2-leads{ position:relative; height:148px; width:100%; max-width:220px; margin:0 auto; }
.dg2-leads .dg2-leads-guides{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.dg2-leads .dg2-leads-guides path{ stroke:var(--acc-line, rgba(0,18,46,.24)); }
.dg2-leads .dg2-leads-in, .dg2-leads .dg2-leads-out{ position:absolute; inset:0; pointer-events:none; }
.dg2-leads .dg2-leads-in i, .dg2-leads .dg2-leads-out i{ position:absolute; display:block; width:5px; height:5px; border-radius:50%; }

/* incoming stream: many contacts pouring in from a wide top edge */
.dg2-leads .dg2-leads-in i{
  top:4px; background:var(--acc, var(--encre)); opacity:.55;
  animation:dg2-leads-in 4.8s ease-in infinite backwards;
}
.dg2-leads .dg2-leads-in i:nth-child(1){ left:11.5px;  --dg2-leads-dx:96px; }
.dg2-leads .dg2-leads-in i:nth-child(2){ left:43.5px;  --dg2-leads-dx:64px;  animation-delay:2.2s; }
.dg2-leads .dg2-leads-in i:nth-child(3){ left:75.5px;  --dg2-leads-dx:32px;  animation-delay:.9s; }
.dg2-leads .dg2-leads-in i:nth-child(4){ left:107.5px; --dg2-leads-dx:0px;   animation-delay:3.1s; }
.dg2-leads .dg2-leads-in i:nth-child(5){ left:139.5px; --dg2-leads-dx:-32px; animation-delay:1.5s; }
.dg2-leads .dg2-leads-in i:nth-child(6){ left:171.5px; --dg2-leads-dx:-64px; animation-delay:3.8s; }
.dg2-leads .dg2-leads-in i:nth-child(7){ left:203.5px; --dg2-leads-dx:-96px; animation-delay:.4s; }
@keyframes dg2-leads-in{
  0%{ transform:translate(0,0) scale(.9); opacity:0; }
  6%{ opacity:.55; }
  34%{ transform:translate(var(--dg2-leads-dx),44px) scale(.55); opacity:.55; }
  39%{ transform:translate(var(--dg2-leads-dx),44px) scale(.3); opacity:0; }
  100%{ transform:translate(var(--dg2-leads-dx),44px) scale(.3); opacity:0; }
}

/* AI node: diamond chip + ping ring on each scored batch */
.dg2-leads .dg2-leads-node,
.dg2-leads .dg2-leads-ring{
  position:absolute; left:97px; top:37px; width:26px; height:26px;
  border-radius:6px; transform:rotate(45deg);
}
.dg2-leads .dg2-leads-node{
  border:1.5px solid var(--acc, var(--encre));
  background:linear-gradient(var(--acc-soft, rgba(0,18,46,.06)), var(--acc-soft, rgba(0,18,46,.06))), var(--white);
}
.dg2-leads .dg2-leads-node b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform:rotate(-45deg);
  font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--acc-ink, var(--encre));
}
.dg2-leads .dg2-leads-ring{
  border:1.5px solid var(--acc-line, rgba(0,18,46,.24)); opacity:0;
  animation:dg2-leads-ping 4.8s ease-out infinite;
}
@keyframes dg2-leads-ping{
  0%,42%{ transform:rotate(45deg) scale(.7); opacity:0; }
  50%{ transform:rotate(45deg) scale(1.05); opacity:.9; }
  72%,100%{ transform:rotate(45deg) scale(1.65); opacity:0; }
}

/* scored batch: hot (rouge) tier left, muted tier right */
.dg2-leads .dg2-leads-out i{
  left:107.5px; top:47.5px; background:var(--ink-muted);
  --dg2-leads-op:.45; opacity:var(--dg2-leads-op);
  transform:translate(var(--dg2-leads-tx),41px);
  animation:dg2-leads-out 4.8s cubic-bezier(.3,.7,.3,1) infinite backwards;
}
.dg2-leads .dg2-leads-out i.dg2-leads-hot{
  width:7px; height:7px; left:106.5px; top:46.5px;
  background:var(--rouge); --dg2-leads-op:1;
}
.dg2-leads .dg2-leads-out i:nth-child(1){ --dg2-leads-tx:-70px; }
.dg2-leads .dg2-leads-out i:nth-child(2){ --dg2-leads-tx:-52px; animation-delay:.12s; }
.dg2-leads .dg2-leads-out i:nth-child(3){ --dg2-leads-tx:40px;  animation-delay:.06s; }
.dg2-leads .dg2-leads-out i:nth-child(4){ --dg2-leads-tx:58px;  animation-delay:.16s; }
.dg2-leads .dg2-leads-out i:nth-child(5){ --dg2-leads-tx:76px;  animation-delay:.22s; }
@keyframes dg2-leads-out{
  0%,46%{ transform:translate(0,0) scale(.3); opacity:0; }
  53%{ transform:translate(calc(var(--dg2-leads-tx)*.3),14px) scale(1.15); opacity:var(--dg2-leads-op); }
  68%{ transform:translate(var(--dg2-leads-tx),41px) scale(1); opacity:var(--dg2-leads-op); }
  93%{ transform:translate(var(--dg2-leads-tx),41px) scale(1); opacity:var(--dg2-leads-op); }
  100%{ transform:translate(var(--dg2-leads-tx),41px) scale(1); opacity:0; }
}

/* tier shelves */
.dg2-leads .dg2-leads-shelf{ position:absolute; top:98px; height:3px; border-radius:2px; }
.dg2-leads .dg2-leads-shelf-hot{ left:27px; width:44px; background:rgba(238,66,55,.4); }
.dg2-leads .dg2-leads-shelf-cool{ left:145px; width:48px; background:var(--cream-line); }

/* high-score readout, centered over the hot shelf — family land bezier */
.dg2-leads .dg2-leads-score{
  position:absolute; left:27px; top:66px; width:44px; text-align:center;
  font-family:var(--serif); font-style:normal; font-weight:500; font-size:12px; line-height:1;
  color:#B02E28; color:color-mix(in srgb, var(--rouge) 72%, var(--encre));
  font-variant-numeric:tabular-nums;
  animation:dg2-leads-score 4.8s cubic-bezier(.3,.7,.3,1) infinite;
}
@keyframes dg2-leads-score{
  0%,70%{ opacity:0; transform:translateY(4px) scale(.85); }
  78%{ opacity:1; transform:translateY(0) scale(1); }
  93%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(0) scale(1); }
}

/* low-score readout, centered over the cool shelf — pops just after the
   high score, same land bezier */
.dg2-leads .dg2-leads-low{
  position:absolute; left:145px; top:66px; width:48px; text-align:center;
  font-family:var(--serif); font-style:normal; font-weight:500; font-size:12px; line-height:1;
  color:var(--ink-muted); font-variant-numeric:tabular-nums;
  animation:dg2-leads-low 4.8s cubic-bezier(.3,.7,.3,1) infinite;
}
@keyframes dg2-leads-low{
  0%,74%{ opacity:0; transform:translateY(4px) scale(.85); }
  82%{ opacity:1; transform:translateY(0) scale(1); }
  93%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(0) scale(1); }
}

/* __NOTDM__ note under the cool shelf — tiny, muted, wraps safely (up to
   three 9.5px lines fit inside the stage for long CJK/Thai strings) */
.dg2-leads .dg2-leads-note{
  position:absolute; left:121px; top:105px; width:96px;
  font-size:9.5px; font-weight:600; line-height:1.3; letter-spacing:.01em;
  text-align:center; overflow-wrap:break-word;
  color:var(--ink-muted); opacity:.85;
}

/* action vignette under the hot shelf: rep on the phone + coffee cup.
   Figure strokes follow the family line style (1.5, round caps); the phone
   carries the only rouge accent. Wiggle fires right after the hot leads land. */
.dg2-leads .dg2-leads-rep{
  position:absolute; left:4px; top:102px; width:84px; height:44px;
  color:var(--acc-ink, var(--encre)); display:block;
}
.dg2-leads .dg2-leads-ground{ stroke:var(--cream-line); }
.dg2-leads .dg2-leads-call{
  transform-box:fill-box; transform-origin:60% 95%;
  animation:dg2-leads-callwiggle 4.8s ease infinite;
}
@keyframes dg2-leads-callwiggle{
  0%,72%{ transform:rotate(0deg); }
  76%{ transform:rotate(-5deg); }
  80%{ transform:rotate(4deg); }
  84%{ transform:rotate(-2deg); }
  88%,100%{ transform:rotate(0deg); }
}
.dg2-leads .dg2-leads-phone{ stroke:var(--rouge); fill:var(--white); }
.dg2-leads .dg2-leads-steam{
  stroke:var(--ink-muted); opacity:.6;
  animation:dg2-leads-steam 3.6s ease-in-out infinite;
}
.dg2-leads .dg2-leads-steam2{ animation-delay:1.8s; }
@keyframes dg2-leads-steam{
  0%{ opacity:0; transform:translateY(2.5px); }
  30%{ opacity:.7; }
  60%,100%{ opacity:0; transform:translateY(-3px); }
}

/* 09 smartreply (dg2): the killer-feature crescendo — facts are pulled out of
   the knowledge base (rows light up, extraction motes ride the dashed guides)
   and stream onto the email sheet as typed lines behind a blinking caret,
   then the localized __READY__ pill lands to close the loop. Accent vars come
   from the chapter card (rouge on ch-09) with rouge fallbacks. One shared 6s
   cycle, opacity/transform only, killed by the global reduced-motion rule —
   base styles are the finished static scene: lit KB rows, one extraction mote
   frozen mid-flight, complete draft, ready pill. */
.dg2-smartreply{ display:flex; flex-direction:column; gap:7px; width:100%; }
.dg2-smartreply-scene{ position:relative; height:96px; width:100%; max-width:220px; margin:0 auto; }
.dg2-smartreply-guides{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.dg2-smartreply-guides path{
  fill:none; stroke:var(--acc-line, rgba(238,66,55,.30)); stroke-width:1.5;
  stroke-linecap:round; stroke-dasharray:2 4;
}

/* knowledge base sheet (left): neutral stacked rows under a little cylinder */
.dg2-smartreply-kb{
  position:absolute; left:0; top:8px; width:76px; height:72px;
  background:var(--white); border:1px solid var(--cream-line); border-radius:10px;
  padding:7px 8px;
}
.dg2-smartreply-kbhead{ display:flex; align-items:center; gap:5px; margin-bottom:7px; }
.dg2-smartreply-kbhead svg{ width:11px; height:11px; flex:none; }
.dg2-smartreply-kbhead svg ellipse, .dg2-smartreply-kbhead svg path{
  fill:none; stroke:var(--ink-muted); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.dg2-smartreply-kbhead i{ display:block; width:26px; height:4px; border-radius:2px; background:var(--cream-line); }
.dg2-smartreply-kbrow{ position:relative; display:flex; gap:4px; }
.dg2-smartreply-kbrow + .dg2-smartreply-kbrow{ margin-top:6px; }
.dg2-smartreply-kbrow i{ display:block; flex:none; height:5px; border-radius:3px; background:var(--cream-line); }
.dg2-smartreply-kbrow i:first-child{ background:rgba(0,18,46,.24); }
.dg2-smartreply-kbrow:nth-child(2) i:first-child{ width:42%; }
.dg2-smartreply-kbrow:nth-child(2) i:last-child{ width:30%; }
.dg2-smartreply-kbrow:nth-child(3) i:first-child{ width:34%; }
.dg2-smartreply-kbrow:nth-child(3) i:last-child{ width:46%; }
.dg2-smartreply-kbrow:nth-child(4) i:first-child{ width:48%; }
.dg2-smartreply-kbrow:nth-child(4) i:last-child{ width:24%; }
.dg2-smartreply-kbrow:nth-child(5) i:first-child{ width:30%; }
.dg2-smartreply-kbrow:nth-child(5) i:last-child{ width:42%; }
/* the rows the AI is quoting from light up (a real element, not a pseudo,
   so the global reduced-motion kill reaches it; base = lit) */
.dg2-smartreply-glow{
  position:absolute; inset:-3px -4px; border-radius:6px;
  background:var(--acc-soft, rgba(238,66,55,.06));
  border:1px solid var(--acc-line, rgba(238,66,55,.30));
}
.dg2-smartreply-hl1 .dg2-smartreply-glow{ animation:dg2-smartreply-hl1 6s cubic-bezier(.3,.7,.3,1) infinite; }
.dg2-smartreply-hl2 .dg2-smartreply-glow{ animation:dg2-smartreply-hl2 6s cubic-bezier(.3,.7,.3,1) infinite; }
@keyframes dg2-smartreply-hl1{
  0%,3%{ opacity:0; transform:scale(.85); }
  9%{ opacity:1; transform:scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; transform:scale(1); }
}
@keyframes dg2-smartreply-hl2{
  0%,10%{ opacity:0; transform:scale(.85); }
  16%{ opacity:1; transform:scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; transform:scale(1); }
}

/* extraction motes: facts flying from the lit rows onto the draft */
.dg2-smartreply-mote{
  position:absolute; left:70px; width:5px; height:5px; border-radius:50%;
  background:var(--acc, var(--rouge)); opacity:0;
  animation:dg2-smartreply-mote 6s ease-in-out infinite backwards;
}
.dg2-smartreply-m1{ top:44px; --dg2-smartreply-my:-8px; opacity:.85; transform:translate(14px,-4px); animation-delay:.15s; }
.dg2-smartreply-m2{ top:66px; --dg2-smartreply-my:-24px; animation-delay:.55s; }
.dg2-smartreply-m3{ top:44px; --dg2-smartreply-my:6px; width:4px; height:4px; animation-delay:.95s; }
@keyframes dg2-smartreply-mote{
  0%,10%{ opacity:0; transform:translate(0,0) scale(.4); }
  14%{ opacity:1; transform:translate(10px,calc(var(--dg2-smartreply-my)*.35 - 4px)) scale(1); }
  22%{ opacity:.9; transform:translate(30px,var(--dg2-smartreply-my)) scale(.85); }
  26%,100%{ opacity:0; transform:translate(33px,var(--dg2-smartreply-my)) scale(.3); }
}

/* email sheet (right): the draft types itself in behind a blinking caret */
.dg2-smartreply-mail{
  position:absolute; left:96px; top:8px; width:124px; height:80px;
  background:var(--white); border:1px solid var(--acc-line, rgba(238,66,55,.30));
  border-radius:10px; padding:8px 9px;
}
.dg2-smartreply-mailhead{
  display:flex; align-items:center; gap:5px;
  padding-bottom:5px; margin-bottom:6px;
  border-bottom:1px solid var(--cream-line);
}
.dg2-smartreply-mailhead svg{ width:12px; height:10px; flex:none; }
.dg2-smartreply-mailhead svg rect, .dg2-smartreply-mailhead svg path{
  fill:none; stroke:var(--acc-ink, #B02E28); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.dg2-smartreply-mailhead i{ display:block; flex:1; max-width:56px; height:4px; border-radius:2px; background:var(--cream-line); }
.dg2-smartreply-line{
  display:block; height:5px; border-radius:3px;
  background:var(--acc-line, rgba(238,66,55,.30));
  transform-origin:0 50%;
}
.dg2-smartreply-line + .dg2-smartreply-line{ margin-top:4px; }
.dg2-smartreply-t1{ width:100%; animation:dg2-smartreply-t1 6s linear infinite; }
.dg2-smartreply-t2{ width:84%;  animation:dg2-smartreply-t2 6s linear infinite; }
.dg2-smartreply-t3{ width:92%;  animation:dg2-smartreply-t3 6s linear infinite; }
.dg2-smartreply-t4{ width:58%;  animation:dg2-smartreply-t4 6s linear infinite; }
@keyframes dg2-smartreply-t1{
  0%,20%{ transform:scaleX(0); opacity:0; }
  22%{ opacity:1; }
  32%{ transform:scaleX(1); }
  94%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes dg2-smartreply-t2{
  0%,33%{ transform:scaleX(0); opacity:0; }
  35%{ opacity:1; }
  44%{ transform:scaleX(1); }
  94%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes dg2-smartreply-t3{
  0%,45%{ transform:scaleX(0); opacity:0; }
  47%{ opacity:1; }
  56%{ transform:scaleX(1); }
  94%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes dg2-smartreply-t4{
  0%,57%{ transform:scaleX(0); opacity:0; }
  59%{ opacity:1; }
  64%{ transform:scaleX(1); }
  94%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
/* caret riding the leading edge of each typed line */
.dg2-smartreply-caret{
  position:absolute; left:9px; top:28.5px; width:2px; height:8px; border-radius:1px;
  background:var(--acc, var(--rouge)); opacity:0;
  animation:dg2-smartreply-caret 6s linear infinite, dg2-smartreply-blink 6s linear infinite;
}
@keyframes dg2-smartreply-caret{
  0%,20%{ transform:translate(0,0); }
  32%{ transform:translate(102px,0); }
  33%{ transform:translate(0,9px); }
  44%{ transform:translate(86px,9px); }
  45%{ transform:translate(0,18px); }
  56%{ transform:translate(94px,18px); }
  57%{ transform:translate(0,27px); }
  64%,100%{ transform:translate(59px,27px); }
}
@keyframes dg2-smartreply-blink{
  0%,18%{ opacity:0; }
  20%,28%{ opacity:1; }
  30%{ opacity:.15; }
  32%,40%{ opacity:1; }
  42%{ opacity:.15; }
  44%,52%{ opacity:1; }
  54%{ opacity:.15; }
  56%,64%{ opacity:1; }
  68%,100%{ opacity:0; }
}

/* status pill: localized, wrap-safe for CJK/Thai lengths */
.dg2-smartreply-ready{
  align-self:center; max-width:100%;
  font-size:10px; font-weight:700; letter-spacing:.03em; line-height:1.3;
  text-align:center;
  color:var(--acc-ink, #B02E28);
  background:var(--acc-soft, rgba(238,66,55,.06));
  border:1px solid var(--acc-line, rgba(238,66,55,.30));
  border-radius:999px; padding:3px 10px;
  animation:dg2-smartreply-ready 6s cubic-bezier(.3,.7,.3,1) infinite;
}
@keyframes dg2-smartreply-ready{
  0%,68%{ opacity:0; transform:translateY(6px) scale(.95); }
  78%{ opacity:1; transform:translateY(0) scale(1); }
  95%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(0); }
}

/* ============ Ocean shell: sticky topbar, aurora hero, aurora band ============
   (index.html first; platform/services/enterprise adopt these in later steps) */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cream-line);
}
.topbar .wrap-nav{ max-width:1180px; margin:0 auto; padding:11px 24px; }
.topbar .site-nav{ margin-bottom:0; }
.topbar .brand-lockup .wordmark{ color:var(--encre); }
.topbar .nav-links a{ color:var(--ink-muted); }
.topbar .nav-links a:hover, .topbar .nav-links a.current{ color:var(--encre); }
.topbar select.lang-switch{ background:var(--white); color:var(--encre); border:1px solid var(--cream-line); }
.topbar .nav-links a.cta{ color:var(--white); background:var(--encre); }
.topbar .nav-links a.cta:hover{ background:#0A2547; }

.hero-ocean{
  position:relative; margin:8px 10px 0; border-radius:18px; overflow:hidden;
  background:var(--ocean); color:var(--white);
  min-height:min(88vh,720px);
  display:flex; align-items:center; justify-content:center;
}
.hero-ocean::before{ /* static wash: pre-JS / no-JS / reduced-data fallback */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(640px 480px at 15% 0%, rgba(46,99,246,.5), transparent 65%),
    radial-gradient(600px 460px at 85% 20%, rgba(34,211,238,.3), transparent 62%),
    radial-gradient(820px 560px at 50% 115%, rgba(13,148,136,.32), transparent 68%);
}
.aurora-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-ocean .aurora-canvas{ filter:blur(46px) saturate(1.25); transform:scale(1.18); }
.hero-ocean .veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(6,9,22,.45), transparent 75%),
    radial-gradient(120% 90% at 50% 110%, rgba(4,7,18,0) 40%, rgba(4,7,18,.5) 100%);
}
.hero-ocean .hero-in{
  position:relative; z-index:2; text-align:center;
  padding:96px 24px 140px; max-width:880px;
}
.kicker{
  font-size:14px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.78); margin:0 0 24px;
}
h1.display{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(40px,6.2vw,72px); line-height:1.06; letter-spacing:-.02em;
  margin:0 0 22px; text-wrap:balance; color:var(--white);
}
.hero-ocean .sub{ margin:0 auto 26px; color:rgba(255,255,255,.82); }
.chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 32px; padding:0; list-style:none; }
.chip{
  font-size:12.5px; font-weight:500; letter-spacing:.03em; color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.26); border-radius:999px; padding:6px 14px;
  display:inline-flex; align-items:baseline; gap:8px;
}
.chip b{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:15px; }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-white{ background:var(--white); color:var(--encre); }
.btn-white:hover{ background:var(--creme); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.btn-outline{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.38); }
.btn-outline:hover{ border-color:rgba(255,255,255,.75); }

.demo-card{
  position:absolute; right:24px; bottom:24px; z-index:3;
  background:var(--white); color:var(--encre); border-radius:10px; padding:12px 16px;
  display:flex; align-items:center; gap:13px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  text-decoration:none; text-align:left;
  transition:transform .2s ease;
}
.demo-card:hover{ transform:translateY(-2px); }
.demo-card > svg{
  width:44px; height:44px; flex:none;
  animation:mascot-bob 4s ease-in-out infinite alternate;
  transform-origin:50% 80%;
}
@keyframes mascot-bob{
  from{ transform:rotate(-4deg) translateY(1px); }
  to{ transform:rotate(5deg) translateY(-2px); }
}
.demo-card .txt b{ display:block; font-size:13.5px; font-weight:600; }
.demo-card .txt span{ display:block; font-size:12px; color:var(--ink-muted); margin-top:2px; }

.band-ocean{
  position:relative; margin:0 10px; border-radius:18px; overflow:hidden;
  background:var(--ocean); color:var(--white); text-align:center;
}
.band-ocean .aurora-canvas{ filter:blur(50px) saturate(1.2); transform:scale(1.2); }
.band-ocean::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 480px at 70% 10%, rgba(56,189,248,.35), transparent 65%),
    radial-gradient(600px 460px at 20% 100%, rgba(13,148,136,.3), transparent 62%);
}
.band-ocean .band-in{ position:relative; z-index:2; padding:84px 24px 88px; max-width:780px; margin:0 auto; }
.band-ocean .eyebrow{ color:var(--sky-soft); }
.hero-ocean :focus-visible, .band-ocean :focus-visible{ outline-color:var(--white); }
.section-dark .btn-primary{ background:var(--white); color:var(--encre); }
.section-dark .btn-primary:hover{ background:var(--creme); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.band-ocean h2{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(38px,5.6vw,64px); line-height:1.12; letter-spacing:-.015em;
  margin:0 0 18px; color:var(--white); text-wrap:balance;
}
.band-ocean .band-sub{
  color:rgba(255,255,255,.8); max-width:540px; margin:0 auto 30px;
  font-size:15px; line-height:1.8;
}
/* block-size rhythm — each page's dark blocks get their own scale:
   index = tall anchor (default), services = medium hero + inset band card,
   enterprise/platform = compact hero; enterprise band = slim */
.hero-ocean--compact{ min-height:0; }
.hero-ocean--compact .hero-in{ padding:72px 24px 92px; }
.hero-ocean--medium{ min-height:min(64vh,540px); }
.hero-ocean--medium .hero-in{ padding:80px 24px 100px; }
.band-ocean--inset{ width:min(1080px,calc(100% - 20px)); margin-left:auto; margin-right:auto; border-radius:22px; }
.band-ocean--inset .band-in{ padding:64px 24px 68px; }
.band-ocean--slim .band-in{ padding:56px 24px 62px; }

/* platform hero/band variants (generated page — keeps the generator free of inline styles) */
.hero-ocean .impact-quote{ margin-left:auto; margin-right:auto; }
.hero-ocean .chapter-pills{ justify-content:center; }
.band-ocean .loop-grid{ text-align:left; }

/* ============ Ocean components: rotator, marquee, case cards, studio tabs ============ */
/* hero headline rotator ([data-rotate] > .rot spans crossfade; no-JS shows the first) */
.rotator{ display:grid; }
.rotator .rot{ grid-area:1/1; opacity:0; transition:opacity .8s ease; }
.rotator .rot.on{ opacity:1; }

/* industry marquee */
.marq{ padding:46px 0 6px; text-align:center; }
.marq .cap{ font-size:12px; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; margin:0 0 24px; }
.marq-win{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marq-track{ display:flex; gap:64px; width:max-content; animation:marq 30s linear infinite; padding:4px 0; }
.marq-track span{ font-size:15px; font-weight:600; letter-spacing:.03em; color:var(--faint); white-space:nowrap; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* case cards */
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.case{
  background:var(--creme); border:1px solid var(--cream-line); border-radius:16px;
  padding:26px 24px 22px; display:flex; flex-direction:column; gap:18px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.case:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,18,46,.08); }
.case q{ font-size:15px; line-height:1.8; quotes:'\201C' '\201D'; color:var(--encre); }
.case .meta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.case .who{ font-size:12px; color:var(--ink-muted); }
.badge{
  font-size:11.5px; font-weight:600; color:var(--bleu); background:rgba(46,99,246,.09);
  border-radius:999px; padding:4px 11px; white-space:nowrap;
}

/* studio tabs + floating mock panels */
.tabs-bar{
  display:inline-flex; background:var(--white); border:1px solid var(--cream-line);
  border-radius:9px; padding:4px; gap:2px; flex-wrap:wrap; margin-top:30px;
}
.tab{
  border:0; background:transparent; font-family:var(--sans); font-size:13.5px; font-weight:500;
  color:var(--ink-muted); border-radius:6px; padding:8px 16px; cursor:pointer; transition:all .15s ease;
}
.tab.on{ background:var(--encre); color:var(--white); box-shadow:0 2px 8px rgba(0,18,46,.18); }
.panel{
  margin-top:22px; border:1px solid #D6E3FB; border-radius:16px; padding:32px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center;
  background:#EDF3FE; /* theme light-blue — echoes the app's brand blue */
}
.panel.flash{ animation:panel-pop .55s ease; }
@keyframes panel-pop{ from{ background:#D9E7FD; } to{ background:#EDF3FE; } }
.panel h3{ font-family:var(--sans); font-size:19px; font-weight:600; margin:0 0 10px; color:var(--encre); }
.panel p{ color:var(--ink-muted); margin:0; font-size:14px; line-height:1.7; }
.panel p b.pain{ color:var(--red-ink); }
.mock{
  background:rgba(46,99,246,.06); border:1px solid #D6E3FB; border-radius:12px; padding:18px;
  display:flex; flex-direction:column; gap:10px; min-height:200px; justify-content:center;
}
.mrow{
  background:var(--white); border:1px solid var(--cream-line); border-radius:9px; padding:11px 14px;
  display:flex; align-items:center; gap:12px; font-size:13px; color:var(--encre);
}
.mrow .grow{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow small{ color:var(--ink-muted); font-size:12px; }
.dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.dot.g{ background:var(--vert); } .dot.b{ background:var(--bleu); } .dot.o{ background:var(--warn); }
.pill{ font-size:11px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.pill.ok{ color:var(--vert); background:rgba(15,165,115,.1); }
.pill.warn{ color:var(--warn); background:rgba(199,116,20,.12); }
.pill.blue{ color:var(--bleu); background:rgba(46,99,246,.1); }
.bar{ height:6px; border-radius:99px; background:var(--cream-line); overflow:hidden; flex:1; }
.bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--bleu),#2FD3B5); }

.tour-link{ font-size:14px; font-weight:600; color:var(--red-ink); text-decoration:none; }
.tour-link:hover{ text-decoration:underline; }

/* mascot card: excited on hover — wiggle, wink, beret pop */
.demo-card > svg .m-wink,
.demo-card > svg .m-beret{ transform-box:fill-box; transform-origin:center; transition:transform .18s ease; }
.demo-card:hover > svg{ animation:mascot-excite .7s ease-in-out infinite; }
.demo-card:hover .m-wink{ transform:scaleY(.12); }
.demo-card:hover .m-beret{ transform:translateY(-1.6px) rotate(-5deg); }
@keyframes mascot-excite{
  0%,100%{ transform:rotate(-6deg); }
  50%{ transform:rotate(7deg) translateY(-2.5px) scale(1.07); }
}

/* platform: chapter pills pulled out of the hero into a floating light card */
.pills-float{ position:relative; z-index:3; margin:26px 10px 0; }
.pills-float .in{
  max-width:1040px; margin:0 auto; background:var(--creme);
  border:1px solid var(--cream-line); border-radius:16px;
  padding:20px 24px; box-shadow:0 14px 40px rgba(0,18,46,.1);
}
.pills-float .chapter-pills{ margin-top:0; justify-content:center; gap:12px; }
.pills-float .chapter-pills a{
  border-color:var(--cream-line); background:var(--white); color:var(--encre);
  font-size:14.5px; padding:10px 18px;
}
.pills-float .chapter-pills a .n{ font-size:13px; }
.pills-float .chapter-pills a:hover{ color:var(--encre); border-color:var(--faint); background:var(--white); }
.pills-float .chapter-pills a .n{ color:var(--red-ink); }
.pills-float .chapter-pills a.hi{ border-color:rgba(238,66,55,.45); background:rgba(238,66,55,.07); color:var(--encre); }
.pills-float .chapter-pills a.hi:hover{ background:rgba(238,66,55,.12); border-color:var(--rouge); }

@media (max-width:920px){
  .cards3{ grid-template-columns:1fr; }
  .panel{ grid-template-columns:1fr; gap:26px; padding:24px; }
}

@media (max-width:720px){
  .topbar{ position:static; }
  .hero-ocean{ flex-direction:column; min-height:0; }
  .hero-ocean .hero-in{ padding:64px 20px 36px; }
  .demo-card{ position:static; margin:0 auto 34px; max-width:320px; }
}