/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --bg:#0D1418;
  --surface:#151E24;
  --deep:#000000;
  --ink:#EDE9E1;
  --muted:#8FA0AB;
  --sec:#C3CDD4;
  --accent:#35B4BE;
  --accent-lt:#63DDE7;
  --accent-solid:#0E7C86;
  --rust:#E2795B;
  --warn:#C64F33;
  --live:#FF6146;
  --paper:#F7F5F0;
  --teal-band:linear-gradient(120deg,#0B515B,#083F48);
  --hair:rgba(237,233,225,.13);
  --hair-15:rgba(237,233,225,.15);
  --hair-17:rgba(237,233,225,.17);
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1200px;
  --pad:28px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--accent)}
h1,h2,h3{margin:0}
p{margin:0}
img{max-width:100%;display:block}
button{font:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:92px 0 96px;scroll-margin-top:72px}
.section--glass{background:rgba(21,30,36,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.section--teal{position:relative;overflow:hidden;background:var(--teal-band);color:#fff}

/* Kicker rule: № 0X ————— label */
.kicker{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.kicker__no{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.kicker__rule{flex:1;height:1px;background:var(--hair-15)}
.kicker__label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.section--teal .kicker__no{color:var(--accent-lt)}
.section--teal .kicker__rule{background:rgba(255,255,255,.2)}
.section--teal .kicker__label{color:rgba(255,255,255,.7)}

.h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,46px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--accent)}
.lede{font-size:16.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}

.pill-btn{display:inline-block;background:var(--accent-solid);color:var(--paper);border-radius:999px;padding:15px 30px;font-size:15.5px;font-weight:600;transition:background .25s ease}
.pill-btn:hover{background:#0B646C;color:var(--paper)}
.pill-btn--ghost{background:none;border:1px solid rgba(237,233,225,.25);color:var(--ink);padding:14px 28px;transition:border-color .25s ease,color .25s ease}
.pill-btn--ghost:hover{background:none;border-color:var(--accent);color:var(--accent)}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes tg-float{from{transform:translateY(-7px)}to{transform:translateY(9px)}}
@keyframes tg-pulse{0%{box-shadow:0 0 0 0 rgba(255,97,70,.5)}70%{box-shadow:0 0 0 9px rgba(255,97,70,0)}100%{box-shadow:0 0 0 0 rgba(255,97,70,0)}}
@keyframes tg-wave{from{transform:scaleY(.22)}to{transform:scaleY(1)}}
@keyframes tg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tg-rule{from{transform:translate3d(0,0,0)}to{transform:translate3d(-72px,-72px,0)}}
@keyframes tg-wash-a{0%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(6%,5%,0) scale(1.18)}100%{transform:translate3d(-3%,-2%,0) scale(1)}}
@keyframes tg-wash-b{0%{transform:translate3d(5%,4%,0) scale(1.14)}50%{transform:translate3d(-6%,-5%,0) scale(1)}100%{transform:translate3d(5%,4%,0) scale(1.14)}}
@keyframes tg-ring{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes tg-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tg-plus{0%{opacity:0;transform:scale(.35) rotate(-14deg)}22%{opacity:1}55%{opacity:.85;transform:scale(1.1) rotate(0deg)}100%{opacity:0;transform:scale(1.55) translateY(-26px) rotate(6deg)}}
/* CE pills: quick fade-in (12%), a long fully-visible hold (to 86%), and 30px of
   rise — roughly 2.5× the travel speed of a slower, subtler earlier pass. */
@keyframes tg-creditp{0%{opacity:0;transform:translateY(16px) scale(.92)}12%{opacity:1;transform:translateY(8px) scale(1)}86%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(1.03)}}
@keyframes tg-scanline{0%{transform:translateY(-12%);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(112%);opacity:0}}

/* ==========================================================================
   Ambient background
   ========================================================================== */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient__grid{position:absolute;top:-72px;left:-72px;right:-72px;bottom:-72px;
  background-image:linear-gradient(rgba(237,233,225,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(237,233,225,.05) 1px,transparent 1px);
  background-size:72px 72px;animation:tg-rule 46s linear infinite}
.ambient__wash-a{position:absolute;top:-18%;left:-14%;width:70vw;height:70vw;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(53,180,190,.13),rgba(53,180,190,0) 66%);filter:blur(14px);
  animation:tg-wash-a 34s ease-in-out infinite}
.ambient__wash-b{position:absolute;bottom:-24%;right:-16%;width:64vw;height:64vw;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(226,121,91,.10),rgba(198,79,51,0) 64%);filter:blur(16px);
  animation:tg-wash-b 44s ease-in-out infinite}

/* ==========================================================================
   Folio + nav
   ========================================================================== */
.folio{border-bottom:1px solid var(--hair-15)}
.folio__inner{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600}

.nav{position:sticky;top:0;z-index:60;background-color:rgba(13,20,24,0);border-bottom:1px solid rgba(237,233,225,0);
  transition:background-color .35s ease,border-color .35s ease}
.nav.is-stuck{background-color:rgba(13,20,24,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(237,233,225,.10)}
.nav__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:13px;padding-bottom:13px}
.lockup{display:inline-flex;align-items:baseline;gap:8px}
.lockup__word{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:-.01em}
.lockup__tag{font-size:10px;letter-spacing:.32em;font-weight:700;color:var(--accent)}
/* Logo runs double size while the nav is transparent at the top, then shrinks
   in step with the sticky bar's .35s background transition. */
.nav__logo{display:block;height:64px;width:auto;transition:height .35s ease}
.nav.is-stuck .nav__logo{height:32px}
.nav__links{display:flex;gap:24px;font-size:13.5px;font-weight:500;white-space:nowrap}
.nav__cta{background:var(--accent-solid);color:var(--paper);border-radius:999px;padding:10px 22px;font-size:14px;font-weight:600;transition:background .25s ease}
.nav__cta:hover{background:#0B646C;color:var(--paper)}
.nav__mobile{display:none;gap:22px;overflow-x:auto;padding:0 20px 11px;font-size:13px;font-weight:500;-webkit-overflow-scrolling:touch}
.nav__mobile a{white-space:nowrap}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 82% -8%,rgba(53,180,190,.07),rgba(53,180,190,0) 62%)}
.hero__ring{position:absolute;top:50%;right:-14%;width:760px;height:760px;margin-top:-380px;border-radius:50%;
  border:1px solid rgba(53,180,190,.16);border-top-color:rgba(53,180,190,.42);border-right-color:rgba(226,121,91,.26);
  pointer-events:none;animation:tg-ring 62s linear infinite}
.hero__ring--2{right:-4%;width:520px;height:520px;margin-top:-260px;border:1px solid rgba(237,233,225,.12);
  border-bottom-color:rgba(53,180,190,.3);animation:tg-ring 94s linear infinite reverse}
.hero__grid{position:relative;z-index:1;padding:88px 28px 84px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,500px);gap:48px;align-items:center}
.hero__eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,5.6vw,78px);line-height:1.04;letter-spacing:-.015em;margin:20px 0 22px;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__sub{margin-bottom:34px;font-size:18px;line-height:1.6;color:var(--muted);max-width:520px;text-wrap:pretty}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.hero-field{position:relative;height:540px}
.field__item{position:absolute;will-change:transform}
.field__card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.5);padding:13px 15px}
.field__dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:tg-pulse 2s infinite}
.wave{display:flex;align-items:flex-end;gap:3px;height:26px;margin-bottom:8px}
.wave span{width:3px;border-radius:2px;background:var(--accent-solid);transform-origin:bottom;animation:tg-wave .9s ease-in-out infinite alternate}

/* ==========================================================================
   Logo ticker
   ========================================================================== */
.logos{background:var(--deep)}
.logos__inner{padding:44px 28px 46px}
.logos__label{text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:30px}
/* Vertical padding clears the hovered chip — 46px mark + 15px plate, scaled 1.18
   — so `overflow:hidden` (needed for the marquee) never clips it. */
.ticker{overflow:hidden;padding:23px 0;margin-bottom:8px;background:var(--deep);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker__track{display:flex;width:max-content;animation:tg-marquee linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;gap:56px;padding-right:56px}
/* Source logos are dark artwork on an opaque white plate. grayscale+invert turns
   them into the single-colour white marks the design calls for; `screen` then
   drops the inverted (now black) plate into the band so no box shows. Add class
   `is-plain` to any logo that is already light artwork on transparency. */
.ticker__logo{position:relative;flex:none;display:block;transform:scale(1);opacity:.72;mix-blend-mode:screen;
  transition:transform .1s cubic-bezier(.34,1.3,.64,1),opacity .1s ease}
/* The 15px white surround is a pseudo-element rather than real padding: it paints
   outside the layout box, so neighbouring logos never shift on hover, and its
   corner radius is exact (a box-shadow spread would add 15px to the radius). */
.ticker__logo::before{content:"";position:absolute;inset:-15px;border-radius:5px;background:#fff;
  opacity:0;transition:opacity .1s ease;pointer-events:none}
/* Hover: drop the monochrome treatment so the mark returns to full brand colour
   on its own white plate, and lift it above its neighbours. */
.ticker__logo:hover{transform:scale(1.18);opacity:1;mix-blend-mode:normal;z-index:1}
.ticker__logo:hover::before{opacity:1}
.ticker__logo:hover img{filter:none}
/* brightness() runs before invert(), so the plate and the JPEG ringing around the
   glyphs clip to pure white first — and therefore to pure black after the invert,
   which `screen` then drops out entirely. */
.ticker__logo img{position:relative;z-index:1;height:46px;width:auto;filter:grayscale(1) brightness(1.2) invert(1)}
.ticker__logo.is-plain{mix-blend-mode:normal}
.ticker__logo.is-plain img{filter:none}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{border-top:1px solid var(--hair-15);border-bottom:1px solid var(--hair-15)}
.stats__inner{padding:50px 28px 46px}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 34px}
.stats__cell + .stats__cell{border-left:1px solid var(--hair-15);padding-left:30px}
.stats__num{font-family:var(--serif);font-size:clamp(42px,4.4vw,62px);font-weight:500;line-height:1}
.stats__label{margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ==========================================================================
   Content formats
   ========================================================================== */
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:26px 24px 24px;position:relative;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
/* Rollover: the card fills with the solid accent (the flashcard/CTA surface),
   and the contents flip to light-on-teal in the same 350ms. */
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.55);border-color:rgba(53,180,190,.55);background:var(--accent-solid)}
.card h3,.card p,.card__no{transition:color .35s ease}
.card svg,.card svg *{transition:stroke .35s ease,fill .35s ease}
.card:hover h3{color:#FFFFFF}
.card:hover p{color:rgba(255,255,255,.85)}
.card:hover .card__no{color:rgba(255,255,255,.55)}
.card:hover svg{stroke:#F7F5F0}
.card:hover svg [fill="#35B4BE"]{fill:#F7F5F0}
.card:hover svg [fill="#151E24"]{fill:var(--accent-solid)}
.card__no{position:absolute;top:20px;right:22px;font-size:11px;letter-spacing:.12em;color:rgba(237,233,225,.38);font-weight:600}
.card h3{font-family:var(--serif);font-size:21px;font-weight:600;margin:16px 0 8px}
.card p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(53,180,190,.3);background:rgba(53,180,190,.08);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.chip b{font-size:10px;font-weight:700;color:var(--accent)}
.chip--solid{background:var(--accent);border-color:var(--accent);color:#0D1418;font-weight:700;padding:8px 16px}

/* §02 (continued) — hybrid course builder (variant B). Left: the course being
   assembled; right: a library covering all eight formats. Scrolling auto-builds
   a sample course until the user steps in — from then on it's theirs: drag
   across, reorder, click ✕ to drop a module. Numbering-wise this is part of
   the Content-formats section, so it carries no kicker and sits tight under
   the formats grid. */
#formats{padding-bottom:56px}
#hybrid{overflow:hidden;padding-top:0}
.builder{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:36px;align-items:start}
.board{background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:18px}
.board__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;min-height:28px}
.board__label{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.board__tag{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair);
  color:var(--muted);border-radius:999px;padding:5px 11px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.board__tag.is-on{background:var(--accent);border-color:var(--accent);color:#0D1418}
.course{position:relative;display:flex;align-items:center;gap:11px;background:var(--bg);border:1px solid var(--hair);
  border-radius:12px;padding:11px 12px;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab}
.course:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.course__icon{flex:none}
.course__body{min-width:0;flex:1}
.course__title{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.course__meta{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.course__meta b{color:var(--accent);font-size:10px;letter-spacing:.08em}
.course__grip{flex:none;color:rgba(237,233,225,.3);font-size:12px;cursor:grab;touch-action:none;padding:4px 2px 4px 0}
.course__x{all:unset;flex:none;width:22px;height:22px;border:1px solid rgba(237,233,225,.2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);cursor:pointer}
.course__x:hover{border-color:var(--rust);color:var(--rust)}
.course__x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lib__list,.build__list{display:flex;flex-direction:column;gap:8px}
.lib__list .course__grip,.lib__list .course__x{display:none}
.lib__list .course:hover{border-color:rgba(53,180,190,.4)}
/* Quiz items carry the layout's rust — the same family §03's quiz feedback
   uses — so they read as their own category. The tint is painted over the
   solid card colour (not translucent), so it holds up on the teal board and
   on the floating clone too. */
.course--quiz{background:linear-gradient(0deg,rgba(226,121,91,.13),rgba(226,121,91,.13)) var(--bg);
  border-color:rgba(226,121,91,.35)}
.course--quiz .course__meta b{color:var(--rust)}
.course--quiz:focus-visible{outline-color:var(--rust)}
.lib__list .course--quiz:hover{border-color:rgba(226,121,91,.6)}
.build__list{counter-reset:module}
.build__list .course{counter-increment:module}
.build__list .course::before{content:counter(module,decimal-leading-zero);flex:none;width:18px;font-size:10px;
  font-weight:700;letter-spacing:.08em;color:rgba(237,233,225,.38)}
.course.is-ghost{opacity:.3}
.course--clone{position:fixed;z-index:80;pointer-events:none;margin:0;box-shadow:0 24px 50px rgba(0,0,0,.55);
  border-color:rgba(53,180,190,.5)}
/* The clone hangs off <body>, so the .lib__list scoping that hides these no
   longer applies — hide them on the clone itself. */
.course--clone .course__grip,.course--clone .course__x{display:none}
.course--clone.course--quiz{border-color:rgba(226,121,91,.6)}
.course.is-flying{z-index:60}
.drop-slot{flex:none;height:50px;border:1.5px dashed rgba(53,180,190,.55);border-radius:12px;background:rgba(53,180,190,.06)}
.build__hint{margin-top:8px;border:1.5px dashed rgba(237,233,225,.2);border-radius:12px;padding:14px;text-align:center;
  font-size:12px;color:var(--muted);transition:border-color .25s ease,color .25s ease}
.build__hint.is-target{border-color:rgba(53,180,190,.55);color:var(--accent)}
.build__totals{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.build__totals b{color:var(--ink)}
/* The course board carries the accent (same family as the flashcard front and
   the CTA card), so it reads as the product being built — not another list.
   Everything sitting directly on the teal switches to light-on-teal. */
.board--course{background:linear-gradient(135deg,#0E7C86,#0A5560);border-color:rgba(53,180,190,.5)}
.board--course .board__label{color:rgba(255,255,255,.78)}
.board--course .board__tag{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
.board--course .board__tag.is-on{background:var(--paper);border-color:var(--paper);color:#0A4E56}
.board--course .build__list .course::before{color:rgba(255,255,255,.55)}
.board--course .course{border-color:rgba(13,20,24,.35);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.board--course .course--quiz{border-color:rgba(226,121,91,.45)}
.board--course .build__hint{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
.board--course .build__hint.is-target{border-color:#F7F5F0;color:#F7F5F0}
.board--course .drop-slot{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.09)}
.board--course .build__totals{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.8)}
.board--course .build__totals b{color:#FFFFFF}
@media (max-width:980px){.builder{grid-template-columns:1fr}}

/* ==========================================================================
   Interactivity demo
   ========================================================================== */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.bullets-rule > div{padding:24px 0;border-bottom:1px solid var(--hair-15);display:flex;gap:18px;align-items:flex-start}
.bullets-rule > div:last-child{border-bottom:none}
.bullets-rule h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:6px}
.bullets-rule p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.diamond{width:10px;height:10px;background:var(--accent-solid);transform:rotate(45deg);margin-top:9px;flex:none}

.demo{background:var(--bg);border:1px solid var(--hair-15);border-radius:20px;padding:26px}
.demo__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.demo__badge{background:var(--accent-solid);color:#fff;border-radius:999px;padding:6px 13px;font-size:10px;font-weight:800;letter-spacing:.16em}
.demo__xp{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--bg);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700}
.demo__streak{background:rgba(53,180,190,.14);color:var(--accent);border:1px solid rgba(53,180,190,.3);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700}
.flip{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;perspective:1200px}
.flip__inner{position:relative;display:block;height:172px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.25,1)}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:16px;
  padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between}
.flip__face--front{background:var(--accent-solid)}
.flip__face--back{transform:rotateY(180deg);background:var(--surface);border:1.5px solid var(--accent)}
.flip__eyebrow{font-size:10.5px;letter-spacing:.16em;font-weight:700}
.flip__q{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.3;color:#fff}
.flip__a{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.demo__rule{height:1px;background:var(--hair-15);margin:22px 0}
.demo__label{font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--muted);margin-bottom:10px}
.demo__q{font-family:var(--serif);font-size:18.5px;font-weight:600;margin-bottom:14px}
.opt{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:12px 16px;border:1.5px solid #2C3841;background-color:var(--surface);border-radius:12px;
  font-size:14.5px;font-weight:600;cursor:pointer;transition:border-color .25s ease,background-color .25s ease;margin-bottom:8px}
.opt__mark{font-size:13px;font-weight:800}
.opt.is-correct{border-color:var(--accent);background-color:rgba(53,180,190,.13)}
.opt.is-correct .opt__mark{color:var(--accent)}
.opt.is-wrong{border-color:var(--rust);background-color:rgba(226,121,91,.13)}
.opt.is-wrong .opt__mark{color:var(--rust)}
.demo__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:22px;margin-top:4px}
.demo__fb{font-size:13.5px;font-weight:600}
.demo__reset{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:underline}
.demo__reset[hidden]{display:none} /* `all:unset` would otherwise beat the UA [hidden] rule */

/* ==========================================================================
   CE band
   ========================================================================== */
.band-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plus{position:absolute;animation:tg-plus ease-in-out infinite}
.plus::before,.plus::after{content:"";position:absolute;border-radius:2px;background:currentColor}
.plus::before{left:0;top:calc(50% - 1.5px);width:100%;height:3px}
.plus::after{top:0;left:calc(50% - 1.5px);height:100%;width:3px}
.credit{position:absolute;font-size:12px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);white-space:nowrap;
  animation:tg-creditp ease-in-out infinite}

/* Analytics band: a single trend line along the foot of the section, drawn and
   retracted by scroll position. Anchored to the bottom at a fixed height so the
   curve keeps its proportions no matter how tall the band gets. */
/* 27vw ≈ the viewBox's own 1200:320 ratio, so the curve keeps its proportions
   instead of being stretched vertically on narrow screens. */
.graph{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(130px,27vw,380px);pointer-events:none}
.graph__area{fill:url(#graphFill)}
.graph__line{fill:none;stroke:#63DDE7;stroke-opacity:.45;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(99,221,231,.25))}

/* Instrument dial behind the analytics headline: outline only — a dashed
   construction ring, a tick dial counter-rotating inside it, a crosshair, and
   four nested arcs whose sweeps are the section's own 42/26/19/13 split. */
.dial{position:absolute;top:40px;left:-10px;width:clamp(240px,26vw,380px);aspect-ratio:1;pointer-events:none}
.dial__ring,.dial__ticks{transform-box:fill-box;transform-origin:center}
.dial__ring{animation:tg-ring 90s linear infinite}
.dial__ticks{animation:tg-ring 140s linear infinite reverse}
.dial__cross line{stroke:rgba(255,255,255,.10);stroke-width:1}
.dial__hub{fill:rgba(99,221,231,.6)}
.dial__arc{fill:none;stroke:#63DDE7;stroke-opacity:.5;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--c);stroke-dashoffset:var(--c)}
.dial.is-drawn .dial__arc{animation:tg-arc 1.5s cubic-bezier(.22,.61,.21,1) both}
@keyframes tg-arc{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:var(--to)}}
.ce__inner{position:relative;z-index:1;padding:88px 28px}
.ce h2{color:#fff;line-height:1.12;margin-bottom:14px}
.ce__sub{font-size:16px;line-height:1.6;color:rgba(255,255,255,.75);max-width:48ch;text-wrap:pretty}
.ce__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.ce__list{display:flex;flex-direction:column;gap:16px;padding-top:6px}
.ce__item{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.tick{width:20px;height:20px;border-radius:50%;background:#fff;color:#0B515B;font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ce__badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}
/* No fixed width — each card shrink-wraps its mark, so the row reads as three
   differently-proportioned badges rather than three identical slots. Heights
   still match, since every mark is capped at the same 52px. */
.ce__badge{background:var(--paper);border-radius:14px;padding:18px 24px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.22);
  color:#0B515B;font-size:12px;font-weight:700;letter-spacing:.08em}
/* Accreditation artwork must stay unaltered, so the marks keep their brand
   colour; `multiply` only drops the white JPEG plate into the card (multiply
   against white leaves the backdrop untouched). */
.ce__badge img{max-width:150px;max-height:52px;width:auto;height:auto;mix-blend-mode:multiply}
.ce__local{margin-top:16px;font-size:13px;font-weight:500;letter-spacing:normal;color:rgba(255,255,255,.6)}

/* ==========================================================================
   Audiences
   ========================================================================== */
/* §05 — "the whole dental world": a wireframe globe. The meridians are ellipses
   whose rx sweeps R → 0 → R on staggered phases, which reads as a slow turn.
   With animation disabled they simply hold the static rx in the markup. */
.audiences{position:relative;overflow:hidden}
.audiences > .wrap{position:relative;z-index:1}
.globe{position:absolute;top:56px;right:-60px;width:clamp(230px,26vw,360px);aspect-ratio:1;pointer-events:none}
.globe circle,.globe ellipse{fill:none;stroke:rgba(53,180,190,.16);stroke-width:1}
.globe__m{stroke:rgba(53,180,190,.22);animation:tg-meridian 30s cubic-bezier(.37,0,.63,1) infinite}
@keyframes tg-meridian{0%{rx:120px}25%{rx:0px}50%{rx:120px}75%{rx:0px}100%{rx:120px}}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.tab{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid rgba(237,233,225,.2);border-radius:999px;
  padding:11px 22px;font-size:14px;font-weight:600;color:var(--ink);transition:background-color .25s ease,color .25s ease}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.aud{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.aud[hidden]{display:none}
.aud h3{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.15;margin-bottom:22px;text-wrap:balance}
.aud__bullets{display:flex;flex-direction:column;gap:15px}
.aud__bullet{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--sec)}
.tick--soft{background:rgba(53,180,190,.16);color:var(--accent);font-size:11px}
.aud__stat{background:var(--surface);border:1px solid var(--hair-15);border-radius:20px;padding:44px 36px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.aud__big{font-family:var(--serif);font-size:clamp(52px,5vw,72px);font-weight:500;line-height:1;color:var(--accent)}
.aud__cap{margin:14px auto 0;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:26ch}

/* ==========================================================================
   Analytics
   ========================================================================== */
.analytics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:start}
.analytics h2{font-size:clamp(34px,4vw,54px);line-height:1.03;letter-spacing:-.015em;margin-bottom:18px}
.analytics h2 em{color:var(--accent-lt)}
.analytics__sub{margin-bottom:34px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.7);max-width:46ch;text-wrap:pretty}
.analytics__label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding-bottom:6px}
.analytics__row{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:16px;line-height:1.45;color:#fff}
.analytics__row b{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--accent-lt);flex:none}
.dash{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash__card{background:#fff;border:1px solid rgba(13,20,24,.10);border-radius:18px;padding:22px 24px;box-shadow:0 20px 44px rgba(0,0,0,.32);color:#0D1418}
.dash__card--wide{grid-column:1 / -1}
.dash__title{font-size:13px;font-weight:700;color:#0D1418}
.dash__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.dash__legend{display:flex;gap:14px;font-size:11px;color:#5A6B78}
.dash__legend span{display:inline-flex;align-items:center;gap:6px}
.dash__swatch{width:9px;height:9px;border-radius:2px}
.chart{display:flex;align-items:flex-end;gap:6px}
.chart__col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.chart__bars{display:flex;align-items:flex-end;gap:2px;height:118px}
.chart__bars span{width:8px;border-radius:3px 3px 0 0;transform-origin:bottom;animation:tg-grow .8s cubic-bezier(.22,.61,.21,1) both}
.chart__month{font-size:10px;font-weight:600;color:#5A6B78}
.donut{position:relative;width:132px;height:132px;border-radius:50%;background:conic-gradient(#0E7C86 0deg 284deg,rgba(13,20,24,.09) 284deg 360deg)}
.donut__hole{position:absolute;inset:15px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut__num{font-family:var(--serif);font-size:34px;font-weight:500;line-height:1}
.stack{display:flex;height:9px;border-radius:99px;overflow:hidden;margin-bottom:16px}
.legend-list{display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:#5A6B78}
.legend-list span{display:flex;justify-content:space-between}
.legend-list b{color:#0D1418}
.site{display:flex;align-items:center;gap:12px}
.site__name{font-size:12.5px;width:104px;flex:none}
.site__bar{flex:1;height:6px;border-radius:99px;background:rgba(13,20,24,.09);overflow:hidden}
.site__bar i{display:block;height:100%;border-radius:99px;background:#0E7C86}
.site__pct{font-size:12px;font-weight:700;color:#0E7C86;width:34px;text-align:right;flex:none}
.site.is-low .site__bar i{background:#C64F33}
.site.is-low .site__pct{color:#C64F33}
.dash__note{grid-column:1 / -1;font-size:11px;font-style:italic;color:rgba(255,255,255,.5)}

/* ==========================================================================
   Comparison
   ========================================================================== */
.compare-scroll{overflow-x:auto}
.compare{min-width:720px;display:grid;grid-template-columns:minmax(0,1fr) 168px 208px;align-items:stretch}
.compare__cap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:18px 12px;
  border-radius:14px 14px 0 0;background:rgba(237,233,225,.05);font-size:13.5px;font-weight:700;color:var(--muted);text-align:center}
.compare__cap--ours{gap:4px;background:var(--accent-solid);color:#fff;box-shadow:0 -10px 30px rgba(53,180,190,.18)}
.compare__cap--ours small{font-size:10px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.8)}
.compare__cap--ours b{font-size:14.5px;font-weight:700}
.compare__label{display:flex;align-items:center;padding:15px 22px 15px 0;border-bottom:1px solid var(--hair);
  font-size:15px;line-height:1.4;color:var(--ink)}
.compare__mark{display:flex;align-items:center;justify-content:center;padding:15px 0;border-bottom:1px solid var(--hair)}
.compare__mark--ours{background:rgba(53,180,190,.06)}
.compare > .compare__mark--ours:last-child{border-bottom:none;border-radius:0 0 14px 14px}
.compare__dash{width:14px;height:2px;border-radius:2px;background:rgba(237,233,225,.22)}
/* §07 — our column's ticks land one after another down the table, so the eye is
   walked through the gap rather than shown it all at once. */
@keyframes tg-pop{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:1}}
.compare__tick{width:24px;height:24px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;
  animation:tg-pop .5s cubic-bezier(.34,1.3,.64,1) both}
.compare__note{margin-top:34px;background:rgba(53,180,190,.09);border:1px solid rgba(53,180,190,.28);border-radius:16px;padding:24px 28px}
.compare__note p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,23px);line-height:1.45;color:var(--ink);text-wrap:pretty}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step__no{font-family:var(--serif);font-size:84px;font-weight:500;line-height:1;color:rgba(53,180,190,.28)}
.step__rule{height:1px;background:var(--hair-15);margin:18px 0 16px}
/* §08 — each step's rule draws and its numeral brightens in turn, so the three
   steps arrive as a sequence rather than as a row. */
@keyframes tg-rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tg-step-lit{0%,100%{color:rgba(53,180,190,.28)}45%{color:rgba(53,180,190,.62)}}
.step__rule{transform-origin:left;animation:tg-rule-draw .8s cubic-bezier(.22,.61,.21,1) both}
.step__no{animation:tg-step-lit 1.7s ease-in-out both}
.steps .step:nth-child(2) .step__rule,.steps .step:nth-child(2) .step__no{animation-delay:.18s}
.steps .step:nth-child(3) .step__rule,.steps .step:nth-child(3) .step__no{animation-delay:.36s}
.step h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:780px;margin:0 auto;padding:92px 28px 84px}
.faq__item{border-bottom:1px solid var(--hair-17)}
.faq__q{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:20px;
  width:100%;padding:22px 2px;cursor:pointer}
.faq__q > span{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3}
.faq__plus{width:30px;height:30px;border:1px solid rgba(237,233,225,.25);border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;font-size:16px;color:var(--accent);flex:none;transition:transform .3s ease}
.faq__q[aria-expanded="true"] .faq__plus{transform:rotate(45deg)}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.61,.21,1)}
.faq__panel.is-open{grid-template-rows:1fr}
.faq__panel > div{overflow:hidden;min-height:0}
.faq__panel p{margin-bottom:22px;font-size:15px;line-height:1.65;color:var(--muted);max-width:62ch;text-wrap:pretty;white-space:pre-line}

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.cta__inner{padding:24px 28px 96px}
.cta__card{position:relative;overflow:hidden;background:linear-gradient(130deg,#0E7C86 0%,#0A5560 55%,#093F49 100%);
  border-radius:30px;padding:88px 32px;text-align:center}
.cta__sweep{position:absolute;top:50%;left:50%;width:1200px;height:1200px;margin:-600px 0 0 -600px;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.10) 46deg,rgba(255,255,255,0) 96deg,rgba(255,255,255,0) 190deg,rgba(80,214,225,.14) 240deg,rgba(255,255,255,0) 300deg);
  animation:tg-ring 40s linear infinite}
.cta__scan{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0));
  animation:tg-scanline 9s cubic-bezier(.5,0,.5,1) infinite}
.cta__card > *:not([aria-hidden]){position:relative;z-index:1}
.cta__card h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,58px);line-height:1.08;letter-spacing:-.01em;color:#fff;margin-bottom:16px;text-wrap:balance}
.cta__sub{margin:0 auto 34px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:44ch;text-wrap:pretty}
.cta__btn{display:inline-block;background:var(--paper);color:#0A4E56;border-radius:999px;padding:16px 36px;font-size:16px;font-weight:700;
  transition:transform .25s ease,box-shadow .25s ease}
.cta__btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2);color:#0A4E56}
.cta__meta{margin-top:20px;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.55)}

.foot{border-top:1px solid var(--hair-15)}
.foot__inner{padding:64px 28px 30px}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
.foot__col{border-left:1px solid var(--hair);padding-left:32px}
.foot__head{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot__links{display:flex;flex-direction:column;gap:11px;font-size:14px}
.foot__links a{color:var(--muted)}
.foot__links a:hover{color:var(--accent)}
.foot__blurb{font-size:14px;line-height:1.6;color:var(--muted);max-width:34ch;text-wrap:pretty}
.foot__bar{border-top:1px solid var(--hair);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

/* ==========================================================================
   Reveal
   ========================================================================== */
[data-reveal].is-hidden{opacity:0;transform:translateY(28px)}
[data-reveal]{transition:opacity .75s cubic-bezier(.22,.61,.21,1),transform .75s cubic-bezier(.22,.61,.21,1)}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1080px){.formats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1000px){.analytics{grid-template-columns:1fr;gap:36px}}
@media (max-width:980px){
  .hero-field{display:none}
  .hero__grid{grid-template-columns:1fr;padding-top:64px}
  .cols-2,.ce__grid,.aud{grid-template-columns:1fr}
}
@media (max-width:960px){
  .nav__links{display:none}
  .nav__mobile{display:flex}
  .folio__right{display:none}
}
@media (max-width:900px){.compare{min-width:0;grid-template-columns:minmax(0,1fr) 120px 150px}}
@media (max-width:760px){
  .stats__grid,.foot__grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .stats__cell + .stats__cell{border-left:none;padding-left:0}
  .foot__col{border-left:none;padding-left:0}
}
@media (max-width:700px){
  .compare{grid-template-columns:minmax(0,1fr) 78px 96px}
  .compare__label{font-size:13.5px;line-height:1.35;padding-right:8px}
  .compare__cap{font-size:12px}
}
@media (max-width:560px){.formats{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal].is-hidden{opacity:1;transform:none}
  /* The arcs are drawn *by* their animation, so without it they'd be invisible —
     hold them at their finished sweep instead. */
  .dial.is-drawn .dial__arc{stroke-dashoffset:var(--to)}
}