/* ═══════════════════════════════════════════════════════════════
   GTM-OVERHAUL.CSS — GTM Stack
   Visual voice: "trading-desk for AI tooling." Sidebar shell +
   live pricing tape (signature) + dark terminal-screen hero on a
   clean light review-desk body. Indigo #4f46e5 / cyan #0891b2,
   Bricolage Grotesque display, Inter body, JetBrains Mono labels.

   FINAL inherited template — articles + tools reuse these tokens +
   component classes (eyebrow, cred-strip, metric grid, cards,
   badges, mock card, tape). Codified 2026-06-06; calibrated to
   ENTERPRISE-GRADE-STANDARD 10-pattern bar (archetype: Compounding).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0b0d12;          /* near-black terminal */
  --ink-2:#11141c;
  --paper:#f7f7fa;        /* cool review-desk paper */
  --card:#ffffff;
  --line:#e6e6ee;
  --line-2:#eef0f6;
  --text:#2a2c35;
  --text-dim:#71717a;
  --text-faint:#6f6f75;
  --accent:#4f46e5;       /* indigo */
  --accent-light:#eef2ff;
  --accent-hover:#4338ca;
  --cyan:#0891b2;
  --cyan-light:#ecfeff;
  --violet:#7c3aed;
  --up:#16a34a;
  --down:#e11d48;
  --display:'Bricolage Grotesque',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',monospace;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(11,13,18,.05);
  --shadow-md:0 8px 28px rgba(11,13,18,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--paper);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
em{font-style:italic}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}

/* ── TRUST RIBBON ────────────────────────────────────────────── */
.trust-ribbon{background:var(--ink);color:#d4d4dd;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.02em;display:flex;flex-wrap:wrap;gap:1.5rem;
  justify-content:center;align-items:center;padding:.55rem 1.5rem}
.trust-ribbon strong{color:#fff;font-weight:600}
.trust-ribbon .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--up);margin-right:.45rem;vertical-align:middle;
  box-shadow:0 0 0 3px rgba(22,163,74,.20)}

/* ── SHELL ───────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:248px 1fr;max-width:1440px;margin:0 auto;
  align-items:start}
.side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:1.5rem 1.1rem;border-right:1px solid var(--line);background:var(--paper)}
.body{min-width:0;padding:0 0 4rem}

/* brand */
.brand-mark{font-family:var(--display);font-size:1.5rem;font-weight:800;
  text-decoration:none;color:var(--ink);letter-spacing:-.03em;display:inline-flex;align-items:center;gap:.55rem}
.brand-mark span{color:inherit}
.brand-mark:hover .luc-mark i:nth-child(1){transform:translate(-3.5px,-3.5px)}
.brand-mark:hover .luc-mark i:nth-child(2){transform:translate(3.5px,3.5px)}
/* Lucreya split mark (two diagonal halves, staggered + breathing) — shared with engine pages */
.luc-mark{position:relative;width:28px;height:28px;flex:none;display:inline-block;vertical-align:middle}
.luc-mark i{position:absolute;inset:0;border-radius:7px}
.luc-mark i:nth-child(1){background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),transparent 46%),linear-gradient(135deg,#6366f1,#4f46e5);clip-path:polygon(0 0,100% 0,0 100%);box-shadow:0 4px 13px rgba(79,70,229,.5);animation:luc-a 4.6s ease-in-out infinite}
.luc-mark i:nth-child(2){background:radial-gradient(circle at 70% 74%,rgba(255,255,255,.32),transparent 50%),linear-gradient(135deg,#8b5cf6,#7c3aed);clip-path:polygon(100% 0,100% 100%,0 100%);box-shadow:0 6px 15px rgba(124,58,237,.45);animation:luc-b 4.6s ease-in-out infinite}
@keyframes luc-a{0%,100%{transform:translate(-1.5px,-1.5px)}50%{transform:translate(-3px,-3px)}}
@keyframes luc-b{0%,100%{transform:translate(1.5px,1.5px)}50%{transform:translate(3px,3px)}}
@media(prefers-reduced-motion:reduce){.luc-mark i{animation:none}.luc-mark i:nth-child(1){transform:translate(-1.5px,-1.5px)}.luc-mark i:nth-child(2){transform:translate(1.5px,1.5px)}}

/* shared system/legal page wrapper (on-brand, readable) */
.page-narrow{max-width:780px;margin:0 auto;padding:2.8rem 1.5rem 4rem}
.page-narrow .eyebrow{margin-bottom:.6rem}
.page-narrow h1{font-family:var(--display);font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:0 0 .5rem}
.page-narrow h2{font-family:var(--display);font-size:1.32rem;letter-spacing:-.01em;color:var(--ink);margin:2.1rem 0 .6rem}
.page-narrow h3{font-family:var(--display);font-size:1.08rem;color:var(--ink);margin:1.4rem 0 .4rem}
.page-narrow p,.page-narrow li{color:var(--text-dim);line-height:1.72}
.page-narrow .lead{font-size:1.08rem;color:var(--text-dim);max-width:60ch}
.page-narrow ul,.page-narrow ol{margin:.6rem 0 1.1rem 1.25rem}
.page-narrow li{margin:.3rem 0}
.page-narrow a{color:var(--accent);text-decoration:none}
.page-narrow a:hover{text-decoration:underline}
.page-narrow strong{color:var(--ink)}
.page-narrow hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.brand-tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text-faint);margin-top:.35rem}

/* nav */
.nav-section{margin-top:1.6rem}
.nav-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--text-faint);margin-bottom:.6rem;padding-left:.25rem}
.nav-label .count{color:var(--accent)}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.12rem}
.nav-list a{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-dim);
  font-size:.875rem;font-weight:500;padding:.5rem .6rem;border-radius:8px;transition:all .15s}
.nav-list a:hover{color:var(--ink);background:var(--line-2)}
.nav-list a.active{color:var(--accent);background:var(--accent-light);font-weight:600}
.nav-list .ic{width:16px;height:16px;flex:0 0 16px}
.nav-list .tool-item{font-family:var(--mono);font-size:.8rem;color:var(--text-dim)}
.nav-list .tool-item:hover{color:var(--accent)}

/* ── LIVE TAPE (signature component) ─────────────────────────── */
.tape{margin-top:1.7rem;border:1px solid var(--line);border-radius:10px;
  background:var(--card);overflow:hidden;box-shadow:var(--shadow-sm)}
.tape-head{display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .75rem;border-bottom:1px solid var(--line-2);background:var(--ink);}
.tape-title{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.12em;color:#c7c7d1}
.tape-live{font-family:var(--mono);font-size:9px;font-weight:600;color:#fff;
  background:var(--accent-fill,var(--accent));border-radius:100px;padding:.12rem .45rem;display:flex;
  align-items:center;gap:.3rem}
.tape-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;
  animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tape-row{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;
  padding:.5rem .75rem;font-family:var(--mono);font-size:11.5px;border-bottom:1px solid var(--line-2)}
.tape-row:last-child{border-bottom:0}
.tape-row .t-name{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tape-row .t-px{color:var(--ink);font-weight:600;text-align:right}
.tape-row .t-d{font-size:10px;font-weight:600;text-align:right;min-width:34px}
.t-d.up{color:var(--up)} .t-d.down{color:var(--down)} .t-d.flat{color:var(--text-faint)}
.tape-foot{padding:.5rem .75rem;font-family:var(--mono);font-size:9.5px;color:var(--text-faint);
  border-top:1px solid var(--line-2)}
.tape-foot a{color:var(--accent);text-decoration:none}

/* ── EYEBROW (universal section signature) ───────────────────── */
.eyebrow{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-fill,var(--accent));opacity:.5}
.eyebrow.dot::before{width:7px;height:7px;border-radius:50%;background:var(--accent-fill,var(--accent));opacity:1}
.eyebrow.cyan{color:var(--cyan)} .eyebrow.cyan::before{background:var(--cyan)}

/* ── HERO (dark terminal screen) ─────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:4.5rem 3rem 4rem;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 78% 8%,rgba(79,70,229,.35),transparent 55%),
             radial-gradient(90% 90% at 12% 100%,rgba(8,145,178,.18),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(circle at 60% 30%,#000,transparent 80%)}
.hero-content{position:relative;max-width:780px}
.hero .eyebrow{color:#a5b4fc}
.hero .eyebrow::before{background:#a5b4fc;opacity:.7}
.hero-title{font-size:clamp(2.4rem,5vw,3.5rem);line-height:1.04;font-weight:800;
  color:#fff;margin:1.1rem 0 0;letter-spacing:-.03em}
.hero-title em{color:#a5b4fc;font-style:italic;display:block}
.hero-sub{font-size:1.075rem;line-height:1.6;color:#c7c7d1;max-width:600px;margin:1.4rem 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;
  text-decoration:none;padding:.85rem 1.6rem;border-radius:9px;transition:all .18s;cursor:pointer;border:0}
.btn-primary{background:var(--accent-fill,var(--accent));color:#fff;box-shadow:0 6px 22px rgba(79,70,229,.4)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero-foot{position:relative;font-family:var(--mono);font-size:11px;color:#8b8b97;margin-top:1.8rem}

/* ── CRED STRIP ──────────────────────────────────────────────── */
.cred-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--ink-2);border-bottom:1px solid var(--line)}
.cred-cell{display:flex;align-items:flex-start;gap:.7rem;padding:1.1rem 1.5rem;
  border-right:1px solid rgba(255,255,255,.06)}
.cred-cell:last-child{border-right:0}
.cred-cell .ic{width:20px;height:20px;color:var(--accent);flex:0 0 20px;margin-top:.1rem}
.cred-cell .label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.12em;color:#8b8b97}
.cred-cell .value{font-size:.82rem;color:#e4e4ea;font-weight:500;line-height:1.35;margin-top:.2rem}

/* ── REGION ──────────────────────────────────────────────────── */
.region{padding:3.5rem 3rem 0;max-width:1180px}
.region-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.region-title{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.1;margin-top:.6rem}
.region-title em{color:var(--accent)}
.region-link{font-family:var(--mono);font-size:.8rem;color:var(--accent);text-decoration:none;
  white-space:nowrap;font-weight:600}
.region-link:hover{text-decoration:underline}

/* ── ANCHOR CTA + MOCK ───────────────────────────────────────── */
.anchor-cta{display:grid;grid-template-columns:1.05fr .95fr;gap:0;margin:3.5rem 3rem 0;
  max-width:1180px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-md)}
.anchor-pitch{padding:2.2rem 2.2rem;background:linear-gradient(160deg,var(--accent),#6d28d9)}
.anchor-pitch .eyebrow{color:rgba(255,255,255,.85)}
.anchor-pitch .eyebrow::before{background:rgba(255,255,255,.7)}
.anchor-pitch h3{color:#fff;font-size:1.55rem;line-height:1.12;margin:.9rem 0}
.anchor-pitch h3 em{color:#e9d5ff}
.anchor-pitch p{color:rgba(255,255,255,.85);font-size:.92rem;margin:0 0 1.2rem}
.anchor-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.anchor-meta span{font-family:var(--mono);font-size:10.5px;color:#fff;
  background:rgba(255,255,255,.14);border-radius:100px;padding:.28rem .6rem}
.anchor-pitch .btn-primary{background:#fff;color:var(--accent);box-shadow:none}
.anchor-pitch .btn-primary:hover{background:#f1f1ff;transform:translateY(-2px)}
.anchor-mock{padding:1.8rem;background:var(--ink);display:flex;flex-direction:column;justify-content:center}
.mock-head{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:#8b8b97;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.mock-head::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cyan)}
.mock-row{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);
  font-size:12.5px;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.07);color:#d4d4dd}
.mock-row .v{color:var(--cyan);font-weight:600;white-space:nowrap}
.mock-row.total{border-bottom:0;border-top:1px solid rgba(255,255,255,.18);margin-top:.3rem;
  padding-top:.8rem;color:#fff;font-weight:600}
.mock-row.total .v{color:#a5b4fc}
.mock-note{font-family:var(--mono);font-size:10px;color:#8b8b97;margin-top:.9rem;line-height:1.5}

/* ── CATEGORY GRID ───────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cat{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--c,var(--accent));border-radius:var(--radius);padding:1.3rem 1.35rem;
  transition:all .2s;box-shadow:var(--shadow-sm)}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line)}
.cat-eye{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-dim);display:flex;align-items:center;gap:.45rem}
.cat-eye-dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent))}
.cat h4{font-size:1.08rem;margin:.6rem 0 .5rem;line-height:1.25;color:var(--ink)}
.cat p{font-size:.85rem;color:var(--text-dim);line-height:1.5;margin:0}
.cat-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;
  font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.cat-foot .arrow{color:var(--accent);font-weight:600}

/* ── METHOD / METRIC GRID ────────────────────────────────────── */
.method{margin:4rem 3rem 0;max-width:1180px;background:var(--ink);border-radius:18px;
  padding:2.6rem 2.6rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:2.5rem;
  align-items:center;color:#fff}
.method-pitch .eyebrow{color:#a5b4fc} .method-pitch .eyebrow::before{background:#a5b4fc}
.method-pitch h3{color:#fff;font-size:1.7rem;line-height:1.12;margin:.8rem 0}
.method-pitch h3 em{color:#a5b4fc}
.method-pitch p{color:#c7c7d1;font-size:.92rem;line-height:1.6;margin:0 0 1.1rem}
.method-pitch .read-link{font-family:var(--mono);font-size:.82rem;color:#a5b4fc;
  text-decoration:none;font-weight:600}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:1rem .95rem}
.metric-num{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:#fff;line-height:1}
.metric-num em{font-size:.7rem;color:#8b8b97;font-style:normal}
.metric-name{font-family:var(--display);font-weight:700;font-size:.98rem;margin:.45rem 0 .25rem;color:#fff}
.metric-desc{font-size:.78rem;color:#9b9ba7;line-height:1.4}

/* ── REVIEW GRID ─────────────────────────────────────────────── */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.review{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:all .2s;box-shadow:var(--shadow-sm)}
.review:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.review.featured{grid-row:span 2}
.review-top{height:6px;background:linear-gradient(90deg,var(--accent),var(--cyan))}
.review-body{padding:1.3rem 1.35rem}
.review-eye{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:.6rem}
.score-badge{background:var(--accent-fill,var(--accent));color:#fff;font-weight:600;border-radius:6px;
  padding:.12rem .45rem;letter-spacing:0}
.type-badge{border-radius:6px;padding:.12rem .45rem;font-weight:600;letter-spacing:.04em}
.type-badge.roundup{background:var(--accent-light);color:var(--accent)}
.type-badge.comparison{background:var(--cyan-light);color:var(--cyan)}
.type-badge.guide{background:#f3e8ff;color:var(--violet)}
.review h4{font-size:1.12rem;line-height:1.22;margin:0 0 .5rem;color:var(--ink)}
.review.featured h4{font-size:1.35rem}
.review p{font-size:.86rem;color:var(--text-dim);line-height:1.5;margin:0}
.review-meta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1rem;font-family:var(--mono);
  font-size:10.5px;color:var(--text-faint)}

/* ── ADVISORY / METHODOLOGY CARDS ────────────────────────────── */
.advisory{margin:4rem 3rem 0;max-width:1180px}
.advisory-lede{font-size:1rem;color:var(--text-dim);line-height:1.65;max-width:760px;margin:1rem 0 1.8rem}
.adv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.adv{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;display:flex;gap:.9rem}
.adv-badge{flex:0 0 46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--violet))}
.adv-name{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink)}
.adv-cred{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--cyan);margin:.2rem 0 .4rem}
.adv-bio{font-size:.8rem;color:var(--text-dim);line-height:1.5}

/* ── NEWSLETTER ──────────────────────────────────────────────── */
.newsletter{margin:4rem 3rem 0;max-width:1180px;background:var(--ink);border-radius:18px;
  padding:2.6rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;color:#fff}
.newsletter h3{color:#fff;font-size:1.5rem;line-height:1.15;margin:0 0 .6rem}
.newsletter h3 em{color:#a5b4fc}
.newsletter p{color:#c7c7d1;font-size:.9rem;line-height:1.6;margin:0}
.news-form{display:flex;gap:.6rem;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:9px;padding:.8rem 1rem;color:#fff;font-family:var(--body);font-size:.92rem}
.news-form input::placeholder{color:#8b8b97}
.news-form button{background:var(--accent-fill,var(--accent));color:#fff;border:0;border-radius:9px;padding:.8rem 1.4rem;
  font-weight:600;font-size:.92rem;cursor:pointer;font-family:var(--body)}
.news-form button:hover{background:var(--accent-hover)}
.news-meta{font-family:var(--mono);font-size:10.5px;color:#8b8b97;margin-top:.9rem}

/* ── AD ZONE ─────────────────────────────────────────────────── */
.ad-zone{margin:3rem auto 0;max-width:1180px;padding:0 3rem}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1080px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}
  .tape{grid-column:1/-1}
  .cred-strip{grid-template-columns:repeat(2,1fr)}
  .cred-cell:nth-child(2){border-right:0}
  .anchor-cta,.method,.newsletter{grid-template-columns:1fr}
  .cat-grid,.review-grid,.method-grid,.adv-cards{grid-template-columns:repeat(2,1fr)}
  .review.featured{grid-row:auto}
}
@media(max-width:640px){
  .hero{padding:3rem 1.5rem}
  .region,.anchor-cta,.method,.advisory,.newsletter,.ad-zone{margin-left:1.25rem;margin-right:1.25rem;
    padding-left:0;padding-right:0}
  .region{padding-left:0;padding-right:0}
  .cred-strip{grid-template-columns:1fr}.cred-cell{border-right:0}
  .cat-grid,.review-grid,.method-grid,.adv-cards{grid-template-columns:1fr}
  .side{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   DEPTH + MOTION LAYER — eye-gravity engineered onto capture / ROI
   / CTR surfaces. Restraint everywhere else: motion lives only here.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOP STOCK TICKER (CTR / impressions magnet) ─────────────── */
.ticker{background:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;position:relative;white-space:nowrap;display:flex;align-items:center}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink-2),transparent 6%,transparent 94%,var(--ink-2))}
.ticker-label{flex:0 0 auto;z-index:2;background:var(--accent-fill,var(--accent));color:#fff;font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem .8rem;display:flex;align-items:center;gap:.4rem}
.ticker-label::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.ticker-track{display:inline-flex;align-items:center;gap:2.2rem;padding-left:2.2rem;
  animation:ticker-scroll 38s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{font-family:var(--mono);font-size:11.5px;color:#c7c7d1;display:inline-flex;
  align-items:center;gap:.5rem}
.ticker-item .tk{color:#fff;font-weight:500}
.ticker-item .px{color:#a5b4fc}
.ticker-item .up{color:var(--up)} .ticker-item .down{color:var(--down)} .ticker-item .flat{color:#71717a}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── HERO aurora drift + isolated CTA shimmer (ROI) ──────────── */
.hero::before{animation:aurora 14s ease-in-out infinite alternate}
@keyframes aurora{
  0%{background:radial-gradient(120% 120% at 78% 8%,rgba(79,70,229,.38),transparent 55%),radial-gradient(90% 90% at 12% 100%,rgba(8,145,178,.18),transparent 60%)}
  100%{background:radial-gradient(120% 120% at 62% 22%,rgba(79,70,229,.30),transparent 58%),radial-gradient(95% 95% at 24% 92%,rgba(124,58,237,.22),transparent 62%)}
}
.btn-glow{position:relative;overflow:hidden;
  box-shadow:0 6px 22px rgba(79,70,229,.45),0 0 0 0 rgba(79,70,229,.5);
  animation:cta-pulse 2.8s ease-in-out infinite}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 6px 22px rgba(79,70,229,.40),0 0 0 0 rgba(79,70,229,.45)}
  50%{box-shadow:0 8px 30px rgba(79,70,229,.60),0 0 0 6px rgba(79,70,229,0)}
}
.btn-glow::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:shimmer 3.4s ease-in-out infinite}
@keyframes shimmer{0%{left:-120%}55%{left:130%}100%{left:130%}}

/* ── COUNT-UP STAT (life on the numbers) ─────────────────────── */
.cred-cell .value[data-count]{font-variant-numeric:tabular-nums}

/* ── DELTA PULSE on the tape ─────────────────────────────────── */
.t-d.up,.t-d.down{animation:delta-flash 4s ease-in-out infinite}
@keyframes delta-flash{0%,92%,100%{opacity:1}96%{opacity:.25}}

/* ── FEATURED-SHELF SHOWCASE (forked launchkits picker → ROI) ── */
.showcase{margin:3.5rem 3rem 0;max-width:1180px}
.showcase-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  margin-bottom:1.3rem;flex-wrap:wrap}
.showcase-title{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.1;margin-top:.6rem}
.showcase-title em{color:var(--accent)}
.picker{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.chip{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--text-dim);
  background:var(--card);border:1px solid var(--line);border-radius:100px;padding:.45rem .9rem;
  cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:.4rem}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-selected="true"]{background:var(--accent-fill,var(--accent));border-color:var(--accent);color:#fff}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink);box-shadow:var(--shadow-md);min-height:340px}
.stage-top{height:5px;background:linear-gradient(90deg,var(--accent),var(--cyan),var(--violet));background-size:200% 100%;animation:slide-grad 6s linear infinite}
@keyframes slide-grad{to{background-position:200% 0}}
.slide{display:none;grid-template-columns:1.15fr .85fr;gap:0}
.slide.active{display:grid;animation:fade-in .5s ease}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slide-info{padding:2.2rem 2.3rem;position:relative;z-index:2}
.slide-info .eyebrow{color:#a5b4fc}.slide-info .eyebrow::before{background:#a5b4fc}
.slide-badges{display:flex;align-items:center;gap:.5rem;margin:1rem 0 .2rem}
.slide-score{background:var(--accent-fill,var(--accent));color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;border-radius:7px;padding:.2rem .55rem}
.slide-info h3{color:#fff;font-size:1.7rem;line-height:1.14;margin:.7rem 0 .8rem}
.slide-info p{color:#c7c7d1;font-size:.92rem;line-height:1.6;margin:0 0 1.2rem;max-width:46ch}
.slide-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.slide-tools span{font-family:var(--mono);font-size:10.5px;color:#d4d4dd;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.25rem .55rem}
.slide-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.slide-actions .btn-primary{box-shadow:0 6px 20px rgba(79,70,229,.4)}
.slot-pill{font-family:var(--mono);font-size:10.5px;color:#fff;border:1px dashed rgba(165,180,252,.6);
  border-radius:100px;padding:.35rem .7rem;display:inline-flex;align-items:center;gap:.4rem}
.slot-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 1.8s infinite}
.slide-visual{position:relative;background:linear-gradient(160deg,rgba(79,70,229,.22),rgba(8,145,178,.12));
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.slide-visual::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px;mask-image:radial-gradient(circle at 60% 50%,#000,transparent 75%)}
.mini-tape{position:relative;z-index:2;width:78%;background:rgba(11,13,18,.72);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.5rem .3rem;backdrop-filter:blur(4px)}
.mini-tape .mt-row{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;padding:.4rem .7rem;
  font-family:var(--mono);font-size:11px;color:#d4d4dd;border-bottom:1px solid rgba(255,255,255,.06)}
.mini-tape .mt-row:last-child{border-bottom:0}
.mini-tape .mt-row .v{color:#a5b4fc;font-weight:600;text-align:right}
.mini-tape .mt-row .b{color:var(--cyan);font-weight:600;text-align:right}
.picker-dots{display:flex;gap:.4rem;justify-content:center;margin-top:1rem}
.picker-dots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:all .2s}
.picker-dots button[aria-selected="true"]{background:var(--accent-fill,var(--accent));width:20px;border-radius:100px}

/* ── INLINE CAPTURE BAR (capture surface, mid-page) ──────────── */
.capture-bar{margin:3.5rem 3rem 0;max-width:1180px;position:relative;border-radius:16px;
  padding:1.6rem 1.8rem;background:linear-gradient(120deg,#1b1840,#0b0d12 60%);overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center}
.capture-bar::before{content:"";position:absolute;inset:-1px;border-radius:17px;padding:1px;
  background:linear-gradient(120deg,var(--accent),var(--cyan),var(--accent));background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:slide-grad 5s linear infinite;opacity:.9}
.capture-copy{position:relative;z-index:2}
.capture-copy .eyebrow{color:#a5b4fc}.capture-copy .eyebrow::before{background:#a5b4fc}
.capture-copy h3{color:#fff;font-size:1.25rem;line-height:1.2;margin:.5rem 0 .25rem}
.capture-copy p{color:#b9b9c6;font-size:.85rem;margin:0}
.capture-form{position:relative;z-index:2;display:flex;gap:.5rem;flex-wrap:wrap}
.capture-form input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:9px;
  padding:.75rem .95rem;color:#fff;font-family:var(--body);font-size:.9rem;min-width:210px}
.capture-form input::placeholder{color:#8b8b97}

/* ── card hover glow rings (CTR on browse + review cards) ─────── */
.cat:hover,.review:hover{box-shadow:0 12px 34px rgba(79,70,229,.18),0 0 0 1px rgba(79,70,229,.25)}
.cat .arrow,.region-link{transition:transform .18s}
.cat:hover .arrow{transform:translateX(4px)}

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}

@media(max-width:1080px){
  .showcase,.capture-bar{margin-left:1.25rem;margin-right:1.25rem}
  .slide{grid-template-columns:1fr}
  .slide-visual{min-height:200px;padding:1.5rem 0}
  .capture-bar{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track,.hero::before,.btn-glow,.btn-glow::after,.t-d.up,.t-d.down,
  .stage-top,.capture-bar::before,.slot-pill::before,.ticker-label::before,.tape-live::before{animation:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   STRUCTURAL VARIANCE LAYER — each section its own geometry + "room".
   Full-bleed bands alternate light/dark; grids give way to triptychs,
   process scales, manifestos, and frame-breaking objects. Density down,
   focal contrast up.
   ═══════════════════════════════════════════════════════════════ */

/* full-bleed band primitive (spans the content column edge to edge) */
.band{margin:0;padding:5rem 3rem}
.band-inner{max-width:1180px;margin:0 auto}
.band.dark{background:var(--ink);color:#fff}
.band.dark .region-title,.band.dark h2,.band.dark h3{color:#fff}
.band.ink-soft{background:linear-gradient(180deg,#0e1018,#0b0d12)}
.band-lead{font-size:1.05rem;line-height:1.65;color:var(--text-dim);max-width:680px}
.band.dark .band-lead{color:#b9b9c6}

/* give breathing room: larger gaps between major moments */
.region,.anchor-cta,.showcase,.method,.advisory,.newsletter,.capture-bar{margin-top:5rem}

/* ── ANCHOR: frame-breaking floating tilted mock ─────────────── */
.anchor-cta{overflow:visible;border:0;background:transparent;box-shadow:none;
  grid-template-columns:1.02fr .98fr;align-items:center;gap:0;position:relative}
.anchor-pitch{border-radius:18px;padding:2.6rem 2.4rem;box-shadow:0 20px 50px rgba(79,70,229,.28);position:relative;z-index:1}
.anchor-mock{position:relative;z-index:3;margin-left:-3.5rem;border-radius:16px;
  transform:rotate(-2.2deg);box-shadow:0 30px 70px rgba(11,13,18,.45);border:1px solid rgba(255,255,255,.1);
  transition:transform .35s ease}
.anchor-mock:hover{transform:rotate(0deg) translateY(-4px)}
.anchor-mock::after{content:"OPTIMIZER OUTPUT";position:absolute;top:-10px;right:14px;font-family:var(--mono);
  font-size:9px;letter-spacing:.14em;color:#fff;background:var(--cyan);border-radius:100px;padding:.2rem .6rem}
@media(max-width:1080px){.anchor-mock{margin-left:0;transform:none}.anchor-cta{gap:1rem}}

/* ── BROWSE: full-bleed triptych of vertical "doors" ─────────── */
.doors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.door{position:relative;min-height:300px;border-radius:16px;overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.8rem;color:#fff;
  transition:transform .35s ease,box-shadow .35s ease;isolation:isolate}
.door::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--g)}
.door::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,18,.05) 0%,rgba(11,13,18,.55) 70%,rgba(11,13,18,.8) 100%)}
.door-grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 70% 25%,#000,transparent 78%)}
.door:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(11,13,18,.4)}
.door-tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.85);position:absolute;top:1.6rem;left:1.8rem;display:flex;align-items:center;gap:.5rem}
.door-num{position:absolute;top:1.2rem;right:1.7rem;font-family:var(--mono);font-size:3.4rem;font-weight:700;
  color:rgba(255,255,255,.14);line-height:1}
.door h3{font-size:1.45rem;line-height:1.12;margin:0 0 .5rem;color:#fff}
.door p{font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.5;margin:0 0 1rem;max-width:34ch}
.door-foot{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.9)}
.door-foot .chev{transition:transform .25s}.door:hover .door-foot .chev{transform:translateX(5px)}
.door-stat{font-weight:600}
@media(max-width:880px){.doors{grid-template-columns:1fr}.door{min-height:220px}}

/* ── METHOD: horizontal process scale (1 -> 6) ───────────────── */
.scale{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:2.5rem}
.scale::before{content:"";position:absolute;top:22px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--cyan));opacity:.55}
.scale-node{position:relative;padding:0 .8rem;text-align:center}
.scale-num{width:46px;height:46px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:1.05rem;color:#fff;background:var(--ink);
  border:2px solid var(--accent);position:relative;z-index:2}
.scale-node:nth-child(n+4) .scale-num{border-color:var(--cyan)}
.scale-name{font-family:var(--display);font-weight:700;font-size:.98rem;color:#fff;margin:.9rem 0 .3rem}
.scale-desc{font-size:.76rem;color:#9b9ba7;line-height:1.4}
.scale-head{max-width:620px}
@media(max-width:880px){.scale{grid-template-columns:repeat(2,1fr);gap:1.6rem 0}.scale::before{display:none}}

/* ── ADVISORY: asymmetric manifesto ──────────────────────────── */
.manifesto{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start}
.manifesto-statement{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
.manifesto-statement em{color:var(--accent)}
.manifesto-sub{font-size:.95rem;color:var(--text-dim);line-height:1.65;margin-top:1.2rem;max-width:46ch}
.manifesto-sub a{color:var(--accent);font-weight:600;text-decoration:none}
.manifesto-list{display:flex;flex-direction:column;gap:0}
.mf-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.mf-item:last-child{border-bottom:1px solid var(--line)}
.mf-num{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--accent)}
.mf-name{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.mf-cred{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);margin:.15rem 0 .35rem}
.mf-body{font-size:.84rem;color:var(--text-dim);line-height:1.5}
@media(max-width:880px){.manifesto{grid-template-columns:1fr;gap:1.8rem}}

/* slim single-line capture seam (low density) */
.capture-seam{margin-top:5rem;padding:1.5rem 3rem;background:linear-gradient(120deg,#1b1840,#0b0d12 70%);
  position:relative;overflow:hidden}
.capture-seam::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),var(--cyan))}
.capture-seam-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.capture-seam .cs-copy{color:#fff;font-size:1rem;font-weight:500}
.capture-seam .cs-copy span{color:#a5b4fc;font-family:var(--mono);font-size:11px;display:block;margin-top:.2rem;text-transform:uppercase;letter-spacing:.1em}
.capture-seam .capture-form{flex:0 0 auto}

/* trust strip relocated into the footer (injected by gtm-extras on every page) */
.trust-footer{flex-basis:100%;order:-1;display:flex;flex-wrap:wrap;gap:1.25rem 1.75rem;justify-content:center;
  padding:0 0 1.1rem;margin-bottom:.4rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--text-dim)}
.trust-footer strong{color:var(--ink);font-weight:600}
.trust-footer .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);
  margin-right:.4rem;vertical-align:middle;box-shadow:0 0 0 3px rgba(22,163,74,.18)}

/* ── RELATED ARTICLES (engine-rendered into #related-articles) ── */
.related-articles{max-width:760px;margin:3.25rem auto 0;padding:1.75rem 1.25rem 0;border-top:1px solid var(--line)}
.related-articles h2{font-family:var(--display);font-size:1.3rem;margin:0 0 1rem;color:var(--ink)}
.related-articles-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:.7rem}
.related-articles-list li{margin:0}
.related-articles-list a{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:600;font-size:.94rem;line-height:1.3;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.related-articles-list a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.related-articles-list img{border-radius:6px;flex:none}

/* ══════════════════════════════════════════════════════════════════════
   DIGESTIBILITY / VISUAL-ENGAGEMENT LAYER  (canonized 2026-06-30)
   Universal premium-article (#lc-art) reading-experience system.
   Per-article bespoke graphics (hero illustration, concept graphics,
   pull-quotes) add the CONTENT; this provides the shared STYLE + motion.
   ══════════════════════════════════════════════════════════════════════ */
#lc-art .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
#lc-art .reveal.in{opacity:1;transform:none}
#lc-art .lc-illus{position:relative;z-index:1;max-width:560px;margin:1.5rem auto .4rem;display:block}
#lc-art .lc-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(79,70,229,.22))}
#lc-art .lc-illus .wb{transform-origin:center bottom;animation:wbPulse 2.6s ease-in-out infinite}
@keyframes wbPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
#lc-art .lc-body p.lede{font-size:1.13rem;line-height:1.74;color:var(--tx)}
#lc-art .lc-body p.lede strong{color:#fff}
#lc-art .lc-body h2{position:relative;padding-left:1.05rem}
#lc-art .lc-body h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:3px;background:linear-gradient(180deg,#4f46e5,#06b6d4)}
#lc-art .lc-body #faq-h2::before,#lc-art .lc-body #bottom-line-h2::before{background:linear-gradient(180deg,#8b5cf6,#4f46e5)}
#lc-art .pq{margin:2.1rem 0;padding:.3rem 0 .3rem 1.5rem;border-left:4px solid var(--ac);font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2.5vw,1.62rem);line-height:1.36;color:#fff;letter-spacing:-.012em}
#lc-art .pq .hl{background:linear-gradient(90deg,#a5b4fc,#67e8f9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#lc-art .pq .src{display:block;margin-top:.55rem;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--txf)}
#lc-art .key{display:flex;gap:.9rem;align-items:flex-start;margin:1.7rem 0;padding:1.05rem 1.2rem;background:linear-gradient(135deg,rgba(79,70,229,.13),rgba(6,182,212,.06));border:1px solid rgba(79,70,229,.32);border-radius:13px}
#lc-art .key .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#06b6d4);font-family:var(--disp);font-weight:800;color:#fff;font-size:1rem;box-shadow:0 4px 14px -4px rgba(79,70,229,.7)}
#lc-art .key .kt{margin:0;color:var(--tx);font-size:.93rem;line-height:1.62}
#lc-art .key .kt b{color:#fff;font-family:var(--disp)}
#lc-art .lc-split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:1.6rem 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
#lc-art .lc-split figcaption{grid-column:1/-1;order:2;font-size:.76rem;color:var(--txf);line-height:1.5;padding:.85rem 1.2rem;background:var(--deep);border-top:1px solid var(--line)}
#lc-art .lc-split .pane{padding:1.25rem 1.3rem;position:relative}
#lc-art .lc-split .ent{background:linear-gradient(160deg,#1c1316,#150e11)}
#lc-art .lc-split .ss{background:linear-gradient(160deg,#141528,#0f1320);border-left:1px solid var(--line)}
#lc-art .lc-split .ph{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .2rem;font-weight:600}
#lc-art .lc-split .ent .ph{color:#fbbf24}
#lc-art .lc-split .ss .ph{color:#67e8f9}
#lc-art .lc-split .sub{font-size:.74rem;color:var(--txf);margin:0 0 .8rem}
#lc-art .lc-split .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
#lc-art .lc-split .chip{font-family:var(--mono);font-size:10px;color:var(--tx);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:5px;padding:.22rem .52rem}
#lc-art .lc-split .pr{font-family:var(--disp);font-weight:800;font-size:1.4rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
#lc-art .lc-split .ent .pr{color:#fcd9a0}
#lc-art .lc-split .ss .pr{color:#a5b4fc}
#lc-art .lc-split .tags{margin:0;font-size:.81rem;color:var(--txd);line-height:1.8}
#lc-art .lc-split .tags .t{display:flex;align-items:center;gap:.4rem}
#lc-art .lc-split .tags .t::before{content:"";width:5px;height:5px;border-radius:50%;flex:none}
#lc-art .lc-split .ent .tags .t::before{background:#f59e0b}
#lc-art .lc-split .ss .tags .t::before{background:#22d3ee}
#lc-art .shot{margin:1.7rem 0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--card)}
#lc-art .shot .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;background:var(--deep);border-bottom:1px solid var(--line)}
#lc-art .shot .bar i{width:9px;height:9px;border-radius:50%;background:#3a3a44;display:inline-block}
#lc-art .shot .bar .u{margin-left:.6rem;font-family:var(--mono);font-size:11px;color:var(--txf)}
#lc-art .shot img{display:block;width:100%;height:auto}
#lc-art .shot figcaption{font-size:.78rem;color:var(--txf);line-height:1.5;padding:.7rem .95rem;border-top:1px solid var(--line)}
#lc-art .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
#lc-art .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#lc-art .reveal,#lc-art .rv{opacity:1;transform:none;transition:none}#lc-art .lc-illus .wb{animation:none}}
@media(max-width:680px){#lc-art .lc-split{grid-template-columns:1fr}#lc-art .lc-split .ss{border-left:0;border-top:1px solid var(--line)}}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT-THEME DIGESTIBILITY LAYER  (.article-wrap, canonized 2026-06-30)
   Mirror of the dark #lc-art system in the light template's native palette
   (violet #7c3aed / indigo #4f46e5 / cyan #0891b2 on paper). Per-article
   bespoke graphics (dashboard hero, concept graphics, pull-quotes) add the
   CONTENT; this provides the shared STYLE + motion + grid components.
   ══════════════════════════════════════════════════════════════════════ */
.article-wrap .lc-illus{max-width:560px;margin:1.7rem auto .7rem;display:block}
.article-wrap .lc-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px rgba(124,58,237,.16))}
.article-wrap h2{position:relative;padding-left:1.05rem}
.article-wrap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,#7c3aed,#0891b2)}
.article-wrap .article-intro,.article-wrap p.lede{font-size:1.14rem;line-height:1.75;color:var(--text,#2a2c35)}
.article-wrap .pq{margin:2.2rem 0;padding:.3rem 0 .3rem 1.5rem;border-left:4px solid #7c3aed;font-family:var(--display),Georgia,serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.38;color:var(--ink,#0b0d12);letter-spacing:-.01em}
.article-wrap .pq .hl{background:linear-gradient(90deg,#7c3aed,#0891b2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.article-wrap .pq .src{display:block;margin-top:.55rem;font-family:var(--mono),monospace;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint,#6f6f75)}
.article-wrap .lc-split{display:grid;grid-template-columns:1fr 1fr;margin:1.7rem 0;border:1px solid var(--line,#e6e6ee);border-radius:14px;overflow:hidden;background:var(--card,#fff)}
.article-wrap .lc-split figcaption{grid-column:1/-1;order:2;font-size:.79rem;color:var(--text-dim,#71717a);line-height:1.55;padding:.85rem 1.2rem;background:var(--paper,#f7f7fa);border-top:1px solid var(--line,#e6e6ee)}
.article-wrap .lc-split .pane{padding:1.3rem 1.35rem}
.article-wrap .lc-split .a{background:linear-gradient(160deg,#faf5ff,#fff)}
.article-wrap .lc-split .b{background:linear-gradient(160deg,#f0f9ff,#fff);border-left:1px solid var(--line,#e6e6ee)}
.article-wrap .lc-split .ph{font-family:var(--mono),monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .2rem;font-weight:700}
.article-wrap .lc-split .a .ph{color:#6d28d9}
.article-wrap .lc-split .b .ph{color:#0369a1}
.article-wrap .lc-split .sub{font-size:.76rem;color:var(--text-dim,#71717a);margin:0 0 .85rem}
.article-wrap .lc-split .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.article-wrap .lc-split .chip{font-family:var(--mono),monospace;font-size:10px;color:var(--text,#2a2c35);background:#fff;border:1px solid var(--line,#e6e6ee);border-radius:5px;padding:.22rem .52rem}
.article-wrap .lc-split .big{font-family:var(--display),Georgia,serif;font-weight:800;font-size:1.16rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
.article-wrap .lc-split .a .big{color:#6d28d9}
.article-wrap .lc-split .b .big{color:#0369a1}
.article-wrap .lc-split .tags{margin:0;font-size:.84rem;color:var(--text,#2a2c35);line-height:1.85}
.article-wrap .lc-split .tags .t{display:flex;align-items:flex-start;gap:.45rem}
.article-wrap .lc-split .tags .t::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:.5em}
.article-wrap .lc-split .a .tags .t::before{background:#7c3aed}
.article-wrap .lc-split .b .tags .t::before{background:#0891b2}
.article-wrap .key{display:flex;gap:.9rem;align-items:flex-start;margin:1.8rem 0;padding:1.05rem 1.2rem;background:linear-gradient(135deg,#faf5ff,#f0f9ff);border:1px solid #e9d5ff;border-radius:13px}
.article-wrap .key .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed,#4f46e5);font-family:var(--display),Georgia,serif;font-weight:800;color:#fff;font-size:1rem}
.article-wrap .key .kt{margin:0;color:var(--text,#2a2c35);font-size:.94rem;line-height:1.62}
.article-wrap .key .kt b{color:var(--ink,#0b0d12)}
.article-wrap .shot{margin:1.8rem 0;border:1px solid var(--line,#e6e6ee);border-radius:13px;overflow:hidden;background:var(--card,#fff);box-shadow:0 8px 28px rgba(11,13,18,.08)}
.article-wrap .shot .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;background:var(--paper,#f7f7fa);border-bottom:1px solid var(--line,#e6e6ee)}
.article-wrap .shot .bar i{width:9px;height:9px;border-radius:50%;background:#d4d4dd;display:inline-block}
.article-wrap .shot .bar .u{margin-left:.6rem;font-family:var(--mono),monospace;font-size:11px;color:var(--text-faint,#6f6f75)}
.article-wrap .shot img{display:block;width:100%;height:auto}
.article-wrap .shot figcaption{font-size:.8rem;color:var(--text-dim,#71717a);line-height:1.5;padding:.7rem .95rem;border-top:1px solid var(--line,#e6e6ee)}
.article-wrap .crm-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0 .6rem}
.article-wrap .crm-dash .dcard{background:var(--card,#fff);border:1px solid var(--line,#e6e6ee);border-radius:14px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(11,13,18,.06);display:flex;flex-direction:column}
.article-wrap .crm-dash .dh{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint,#6f6f75);margin:0 0 .7rem}
.article-wrap .crm-dash .dsub{font-size:.73rem;color:var(--text-dim,#71717a);margin:.7rem 0 0;line-height:1.4}
.article-wrap .gauge{position:relative;width:104px;height:104px;margin:.1rem auto .1rem}
.article-wrap .gauge svg{transform:rotate(-90deg)}
.article-wrap .gauge .ring{fill:none;stroke:#ece9f5;stroke-width:10}
.article-wrap .gauge .prog{fill:none;stroke:url(#gaugeg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:gFill 1.9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gFill{to{stroke-dashoffset:23}}
.article-wrap .gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.article-wrap .gauge .num b{font-family:var(--display),Georgia,serif;font-size:1.75rem;font-weight:800;color:#6d28d9;line-height:1}
.article-wrap .gauge .num em{font-family:var(--mono),monospace;font-size:7.5px;letter-spacing:.12em;color:var(--text-faint,#6f6f75);text-transform:uppercase;font-style:normal;margin-top:.15rem}
.article-wrap .pbars{display:flex;flex-direction:column;gap:.5rem;padding:.55rem 0;flex:1;justify-content:center}
.article-wrap .pbar{height:13px;border-radius:7px;background:linear-gradient(90deg,#7c3aed,#0891b2);transform-origin:left;transform:scaleX(0);animation:pGrow 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pGrow{to{transform:scaleX(1)}}
.article-wrap .echips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;flex:1;align-content:center}
.article-wrap .echip{font-family:var(--mono),monospace;font-size:10px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:.26rem .55rem;display:flex;align-items:center;gap:.32rem;opacity:0;animation:eIn .5s ease forwards}
.article-wrap .echip::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;flex:none}
@keyframes eIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.article-wrap .verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0}
.article-wrap .vcard{background:var(--card,#fff);border:1px solid var(--line,#e6e6ee);border-radius:13px;padding:1.1rem 1.15rem;border-top:3px solid #7c3aed;transition:transform .2s,box-shadow .2s}
.article-wrap .vcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(124,58,237,.4)}
.article-wrap .vcard.top{background:linear-gradient(160deg,#faf5ff,#fff)}
.article-wrap .vcard .vt{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint,#6f6f75);margin-bottom:.4rem}
.article-wrap .vcard .vn{font-family:var(--display),Georgia,serif;font-weight:800;font-size:1.18rem;color:#6d28d9;letter-spacing:-.02em;margin-bottom:.35rem}
.article-wrap .vcard .vd{font-size:.85rem;color:var(--text,#2a2c35);line-height:1.5}
.article-wrap .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.article-wrap .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.article-wrap .reveal{opacity:1;transform:none;transition:none}}
@media(max-width:760px){.article-wrap .crm-dash,.article-wrap .verdict-grid{grid-template-columns:1fr}}
@media(max-width:680px){.article-wrap .lc-split{grid-template-columns:1fr}.article-wrap .lc-split .b{border-left:0;border-top:1px solid var(--line,#e6e6ee)}}

/* ══ FLOATING CHAPTER-RAIL / SCROLL-SPY INDEX (canonized 2026-06-30) ══
   Lives in the page-margin whitespace; shows all sections, highlights the
   one you are in while scrolling, click to jump. The light .article-wrap
   template already ships this inline; this styles the JS-built rail that
   gtm-extras.js adds to the dark #lc-art articles (and any article missing one). */
.chapter-rail{position:fixed;top:50%;right:1.6rem;transform:translateY(-50%);width:210px;max-height:72vh;overflow-y:auto;z-index:50;padding:.5rem 0;border-left:2px solid var(--line,#e6e6ee)}
.chapter-rail-title{font-family:var(--mono,monospace);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint,#6f6f75);padding:0 .95rem .55rem;font-weight:600}
.chapter-rail-list{list-style:none;padding:0;margin:0}
.chapter-rail-list li{margin:0}
.chapter-rail-list a{display:block;padding:.34rem .95rem;color:var(--text-dim,#71717a);text-decoration:none;border-left:2px solid transparent;margin-left:-2px;transition:color .15s,border-color .15s;line-height:1.35;font-size:.82rem}
.chapter-rail-list a:hover{color:var(--ink,#0b0d12)}
.chapter-rail-list a.active{color:var(--accent,#4f46e5);border-left-color:var(--accent,#4f46e5);font-weight:600}
@media(max-width:1340px){.chapter-rail{display:none}}


/* === RESPONSIVE TABLES (network heal 2026-07-30) === */
/* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at
   390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the
   PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse
   and the table remains readable. Both rules are required; the first alone destroys the layout. */
table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table,
.article-body table, main table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
  display: table;
  width: 100%;
  min-width: max-content;
}


/* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}


/* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}


/* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration — used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}


/* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration — used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}

/* Long unbroken links. On LensPOV the widest element on four pages was an <a> at 547-678px against
   a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the
   browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign
   adds MORE external links, so this gets worse as the network gets better sourced unless it is
   fixed at the stylesheet. */
a, code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ══ LUCREYA MOBILE OVERFLOW HEAL (2026-08-14) ══════════════════════════════════════════════
   lucreya.com measured 427px against a 390px viewport. The responsive rules for this section
   ALREADY EXISTED higher up (.anchor-cta{grid-template-columns:1fr} and .anchor-mock{margin-left:0;
   transform:none}), but the later frame-breaking tilted-mock block re-sets grid-template-columns
   and margin-left with no media guard, so it overrode the mobile stack at every width.

       A LATER UNCONDITIONAL RULE SILENTLY REPEALS AN EARLIER RESPONSIVE ONE. The mobile
       behaviour was written, reviewed, shipped and never ran, and nothing in the file reads as
       broken - the override is simply further down.

   Kept at the END of the file deliberately: this is the last word in source order, which is the
   only reason it takes effect.

   Also note: the first attempt at this fix was applied to styles.css, which IS deployed and DOES
   contain it - but this page loads gtm-overhaul.css and never requests styles.css. Verifying that
   a file shipped is not the same as verifying the page uses it. ══════════════════════════════ */
@media(max-width:820px){
  .anchor-cta{grid-template-columns:1fr;overflow-x:hidden}
  .anchor-mock{margin-left:0;transform:none;min-width:0;max-width:100%}
}