/* Article pages retain the persistent site sidebar; the reading layout lives
   inside the right-hand content area rather than replacing the site shell. */
.article-body { width:100%; min-width:0; padding-bottom:clamp(3rem,8vw,7rem); }
.article-head { position:relative; max-width:900px; margin:0 auto; padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,4vw,3.25rem) clamp(2.5rem,5vw,4.5rem); }
.article-head::after { content:""; display:block; width:min(100%,680px); height:1px; margin-top:clamp(2rem,5vw,4rem); background:linear-gradient(90deg,var(--cyan),rgba(232,191,90,.28),transparent); }
.article-head h1 { max-width:18ch; font-size:clamp(2.45rem,5vw,4.6rem); line-height:1.04; letter-spacing:-.055em; margin-block:1rem 1.35rem; }
.article-head .lede { max-width:58ch; font-size:clamp(1.05rem,1.45vw,1.22rem); line-height:1.7; }
.article-breadcrumb { display:flex; flex-wrap:wrap; gap:.55rem; color:var(--faint); font:10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:2rem; }
.article-breadcrumb a { color:var(--muted); transition:color .16s; }.article-breadcrumb a:hover { color:var(--cyan); }
.article-meta { display:flex; flex-wrap:wrap; gap:.6rem 1.15rem; font:10px/1.5 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:1.7rem; }
.article-meta span + span,.article-meta time + span { padding-left:1.15rem; border-left:1px solid var(--line-2); }
.article-body > .sec { padding-block:clamp(1.45rem,3vw,2.5rem); }
.article-body .sec-inner { max-width:800px; }
.page--article .article-body .sec .sec-inner > p, .article-body .sec-inner > ul, .article-body .sec-inner > ol { max-width:66ch; font-size:1.03rem; line-height:1.9; }
.article-body .sec h2 { max-width:25ch; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.15; letter-spacing:-.035em; margin-bottom:1rem; }
.article-body .sec h3 { margin-block:1.5rem .7rem; }.article-body .sec p + p { margin-top:1.1rem; }.article-body .sec li { margin-bottom:.75rem; }
.article-body .sec--screenshot { padding-block:clamp(2.4rem,5vw,4.5rem); }.article-body .sec--screenshot .sec-inner { max-width:1060px; }
.article-body .sec--cta { margin-top:clamp(2rem,5vw,4rem); padding-block:clamp(3rem,6vw,5rem); background:linear-gradient(100deg,rgba(232,191,90,.08),var(--panel) 48%); border-block:1px solid var(--line); }
.application-shot { margin:0; width:100%; }
.application-shot img { display: block; width: 100%; height: auto; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.application-shot figcaption { max-width:72ch; margin-inline:auto; color:var(--muted); font-size:.84rem; line-height:1.6; text-align:center; padding:.8rem .2rem 0; }
.screenshot-placeholder { min-height: 280px; padding: clamp(1.5rem,4vw,3rem); border: 1px dashed var(--gold); border-radius: 12px; background: linear-gradient(135deg,rgba(232,191,90,.06),rgba(255,255,255,.015)); display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.screenshot-placeholder span { color: var(--gold); font-size: .7rem; letter-spacing: .14em; }
.screenshot-placeholder strong { font-size: 1.2rem; }
.screenshot-placeholder p { max-width: 78ch; color: var(--muted); }
.screenshot-placeholder small { color: var(--faint); }
.resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1rem 0 2.5rem; }
.resource-card { display: block; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.resource-card:hover { border-color: var(--gold); }
.resource-card span { color: var(--gold); font-size: .74rem; }
.resource-card h4 { margin-block: .7rem; font-size: 1.14rem; }
.resource-card p { font-size: .9rem; color: var(--muted); }
.page--landing .sec--hero { min-height: 60vh; }
.page--landing .sec--screenshot .sec-inner { max-width: 1280px; }
@media (max-width:700px) { .article-head { padding-top:3rem; }.article-head h1 { font-size:clamp(2.25rem,10vw,3.2rem); }.article-breadcrumb { gap:.4rem; }.article-meta span + span,.article-meta time + span { padding-left:0; border-left:0; }.article-body .sec-inner { padding-inline:1.25rem; }.resource-grid { grid-template-columns:1fr; }.screenshot-placeholder { min-height:220px; } }

/* ============================================================
   ODDVX — cyberpunk design system
   Black + gold. Pillar accents reused from the app.
   ============================================================ */

:root {
  /* base */
  --bg:        #06070a;
  --bg-2:      #0a0c11;
  --bg-3:      #10131a;
  --panel:     rgba(255, 255, 255, 0.028);
  --panel-2:   rgba(255, 255, 255, 0.05);
  --line:      rgba(232, 191, 90, 0.12);
  --line-2:    rgba(232, 191, 90, 0.24);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* ink */
  --text:   #eef2f6;
  --muted:  #97a3b2;
  --faint:  #5c6675;

  /* accent — gold. --cyan is the historical name for the primary accent,
     kept so every existing rule still resolves; it is now gold. */
  --gold-hi:  #f4d488;   /* highlight / hover / glow core */
  --gold:     #d7b56d;   /* secondary decorative gold — kickers, sheens */
  --gold-deep:#8a6a34;   /* deep gold */
  --cyan:   #e8bf5a;     /* PRIMARY accent — links, buttons, active state, brackets */
  --cyan-dim: #8a6a34;
  --gold-bright: #f4d488;
  --violet: #a78bfa;
  --rose:   #fb7185;

  /* pillars (verbatim from the app) */
  --gtm: #5dcaa5;
  --ga4: #ef9f27;
  --qa:  #a78bfa;

  /* home page: the single "scale" accent, mock-UI surfaces and status hues */
  --scale:          var(--gold-hi);
  --status-ok:      #6fd3ae;
  --status-warn:    #f2a65a;
  --status-bad:     #fb8196;
  --surface-mock:   #0b0e14;
  --surface-mock-2: #10141d;
  --line-mock:      rgba(255, 255, 255, 0.08);
  --ink-on-gold:    #1c1608;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --gutter-phone: 16px;

  --glow-cyan: 0 0 0 1px rgba(232, 191, 90, 0.4), 0 0 24px -4px rgba(232, 191, 90, 0.55);
  --glow-gold: 0 0 0 1px rgba(215, 181, 109, 0.45), 0 0 28px -6px rgba(215, 181, 109, 0.5);

  --rail: 264px;
  --rail-collapsed: 68px;
  --maxw: 1120px;

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;   /* clip sideways bleed on <html> so the viewport stays the scroller */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* ambient background: grid + scanlines + corner glows */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(680px circle at 12% -5%, rgba(232, 191, 90, 0.10), transparent 60%),
    radial-gradient(720px circle at 100% 0%, rgba(215, 181, 109, 0.08), transparent 55%),
    radial-gradient(900px circle at 60% 120%, rgba(167, 139, 250, 0.07), transparent 60%),
    linear-gradient(rgba(232, 191, 90, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 191, 90, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 46px 46px, 46px 46px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.014) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(232, 191, 90, 0.28); color: #fff; }

/* ---------- skip link ---------- */
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--cyan);
  color: #1c1608;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.16s;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.main {
  margin-left: var(--rail);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.25rem);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--rail);
  height: 100vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(15, 19, 26, 0.92), rgba(6, 7, 10, 0.96));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(232, 191, 90, 0.5), transparent);
  opacity: 0.6;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 0.5rem 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(215, 181, 109, 0.35)); }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  line-height: 1;
}
.brand-word b { color: #eef2f6; font-weight: 700; }
.brand-word i { color: var(--gold); font-style: normal; text-shadow: 0 0 18px rgba(215, 181, 109, 0.45); }

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.9rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav a svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.75; }
.nav a:hover { color: var(--text); background: var(--panel-2); }
.nav a[aria-current="page"] {
  color: var(--text);
  background: linear-gradient(90deg, rgba(232, 191, 90, 0.14), transparent);
  border-color: var(--line-2);
}
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.nav .sub {
  margin: 0.1rem 0 0.35rem;
  padding-left: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-left: 1px solid var(--line-soft);
  margin-left: 0.85rem;
}
.nav .sub a {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.6rem;
  text-transform: none;
  font-weight: 500;
}
.nav .sub a .dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 8px currentColor;
}
.nav .group-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--faint);
  padding: 0.9rem 0.7rem 0.35rem;
  text-transform: uppercase;
}

.sidebar-cta {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c1608;
  background: linear-gradient(100deg, var(--cyan), #f4d488);
  border: 1px solid rgba(232, 191, 90, 0.6);
  box-shadow: 0 0 22px -6px rgba(232, 191, 90, 0.7);
  transition: transform 0.14s, box-shadow 0.14s;
}
.sidebar-cta:hover { transform: translateY(-1px); box-shadow: 0 0 30px -4px rgba(232, 191, 90, 0.85); }
.sidebar-cta svg { width: 15px; height: 15px; }

.sidebar-foot {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sidebar-foot .meta {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  line-height: 1.5;
}
.sidebar-foot .socials { display: flex; gap: 0.5rem; }
.sidebar-foot .socials a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-foot .socials a:hover { color: var(--cyan); border-color: var(--line-2); }
.sidebar-foot .socials svg { width: 13px; height: 13px; }

/* ============================================================
   SECTIONS / PRIMITIVES
   ============================================================ */
section { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); }
section + section { border-top: 1px solid var(--line-soft); }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.kicker.gold { color: var(--gold); }
.kicker.gold::before { background: linear-gradient(90deg, var(--gold), transparent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 0.9rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1rem; color: var(--muted); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: #c6cfd9; max-width: 44ch; }
.section-head { max-width: 60ch; margin-bottom: 2.6rem; }
.section-head p { font-size: 1.05rem; }

strong { color: var(--text); font-weight: 600; }
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--cyan);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--line-2);
  color: var(--text);
  background: var(--panel-2);
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s, background 0.14s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--cyan); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  color: #1c1608;
  background: linear-gradient(100deg, var(--cyan), #f4d488);
  border-color: rgba(232, 191, 90, 0.6);
  box-shadow: 0 0 26px -8px rgba(232, 191, 90, 0.75);
}
.btn-primary:hover { box-shadow: 0 0 34px -6px rgba(232, 191, 90, 0.9); }
.btn-gold {
  color: #1c1608;
  background: linear-gradient(100deg, var(--gold), var(--gold-bright));
  border-color: rgba(215, 181, 109, 0.6);
  box-shadow: 0 0 26px -8px rgba(215, 181, 109, 0.7);
}
.btn-ghost { background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* ---------- cards ---------- */
.card {
  position: relative;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); background: var(--panel-2); }
/* HUD corner brackets */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--cyan);
  opacity: 0.55;
}
.card::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.card::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.95rem; margin-bottom: 0; }
.card .card-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}
.card .card-ico svg { width: 19px; height: 19px; color: var(--cyan); }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* pillar-tinted card */
.card[data-pillar="gtm"]::before, .card[data-pillar="gtm"]::after { border-color: var(--gtm); }
.card[data-pillar="ga4"]::before, .card[data-pillar="ga4"]::after { border-color: var(--ga4); }
.card[data-pillar="qa"]::before,  .card[data-pillar="qa"]::after  { border-color: var(--qa); }
.card[data-pillar="gtm"] .card-ico svg { color: var(--gtm); }
.card[data-pillar="ga4"] .card-ico svg { color: var(--ga4); }
.card[data-pillar="qa"] .card-ico svg  { color: var(--qa); }
.card[data-pillar] .card-ico { border-color: currentColor; }

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(4rem, 11vw, 8rem) clamp(3rem, 8vw, 6rem);
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 { max-width: 16ch; }
.hero h1 .glow { color: var(--gold); text-shadow: 0 0 30px rgba(215, 181, 109, 0.45); }
.hero .lede { margin-top: 1.4rem; max-width: 52ch; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.hero-beam {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent);
  opacity: 0.5;
}

/* ---------- app showcase (home screen, halo dissolve) ----------
   Full-bleed: the glow field is NOT inside .wrap, so it spans the whole
   content column edge to edge — no vertical rectangle line beside it.
   Vertically it fades out via mask-image (not a hard overflow clip), with
   generous padding so the blur has room to taper before the section ends. */
.app-halo { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 5.5rem); }
.app-halo-field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.app-halo-field .blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.4; mix-blend-mode: screen; }
.app-halo-copy { position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto 2.6rem; }
.app-halo-copy .kicker { justify-content: center; }
.app-halo-copy .kicker::before { display: none; }
/* the glow behind this copy varies from near-black to a bright bloom, so the
   usual --muted body colour can wash out — force full contrast + a dark
   scrim behind the letters themselves rather than relying on the bg tone */
.app-halo-copy h2 { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65); }
.app-halo-copy p { color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6); }
.app-halo-stage { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.app-halo-mask {
  /* a soft rectangular feather (not a radial crop) — keeps the screenshot
     reading as a full landscape frame, only the outer edge dissolves */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
.app-halo-mask img {
  display: block; width: 100%; height: auto; aspect-ratio: 1280 / 706; object-fit: contain;
  border-radius: 12px; border: 1px solid rgba(232, 191, 90, 0.18);
}
@media (max-width: 720px) {
  .app-halo-field .blob { filter: blur(70px); }
}

/* ---------- stat / trust strip ---------- */
.strip-band { padding-block: 1.3rem 0.4rem; }
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.strip > div { padding: 1.15rem 1.4rem 1.15rem 0; min-width: 0; }
.strip > div + div { border-left: 1px solid var(--line-soft); padding-left: 1.4rem; }
.strip .n { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--text); letter-spacing: -0.01em; }
.strip .l { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); line-height: 1.55; }
@media (max-width: 780px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > div { padding: 1.1rem 1rem; }
  .strip > div + div { border-left: 0; padding-left: 1rem; }
  .strip > div:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* ---------- feature list ---------- */
.flist { display: flex; flex-direction: column; gap: 0; }
.flist .row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.flist .row:last-child { border-bottom: 1px solid var(--line-soft); }
.flist .row .idx { font-family: var(--font-mono); color: var(--cyan); font-size: 0.8rem; padding-top: 0.2rem; }
.flist .row h3 { margin-bottom: 0.35rem; }
.flist .row p { margin: 0; font-size: 0.95rem; }

/* ---------- steps ---------- */
.steps { counter-reset: s; display: grid; gap: 1.1rem; }
.steps .card { padding-left: 3.6rem; }
.steps .card::marker { content: none; }
.steps .card .num {
  counter-increment: s;
  position: absolute;
  left: 1.3rem; top: 1.4rem;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 0.85rem;
}
.steps .card .num::before { content: counter(s, decimal-leading-zero); }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 780px; }
.price-grid > .price { min-width: 0; overflow-wrap: anywhere; }
#pr-bill { max-width: 100%; flex-wrap: wrap; }
.price-grid.tri { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
@media (max-width: 960px) { .price-grid.tri { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } .price-grid.tri .enterprise { grid-column: 1 / -1; } }
@media (max-width: 620px) { .price-grid.tri { grid-template-columns: 1fr; max-width: 480px; } .price-grid.tri .enterprise { grid-column:auto; } }
.price {
  position: relative;
  padding: 2rem 1.8rem;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.price.feat { border-color: rgba(232, 191, 90, 0.45); box-shadow: 0 0 40px -12px rgba(232, 191, 90, 0.4); }
.price .tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.price .amt { font-family: var(--font-display); font-size: 2.6rem; margin: 0.6rem 0 0.2rem; }
.price .amt small { font-size: 0.9rem; color: var(--faint); font-family: var(--font-mono); }
.price ul { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.price li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; color: var(--muted); }
.price li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); }
.price li.off { color: var(--faint); text-decoration: line-through; }
.price .btn { width: 100%; justify-content: center; margin-top: 1.6rem; }
.price.enterprise { border-color: rgba(232, 191, 90, 0.28); background: linear-gradient(160deg, rgba(232,191,90,.07), var(--panel) 48%); }
.price.enterprise .enterprise-amt { font-size: clamp(2rem, 3vw, 2.55rem); letter-spacing: -.04em; color: var(--text); }
.price.enterprise strong { color: var(--text); font-weight: 600; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
table.cmp th, table.cmp td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.cmp thead th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.y { color: var(--cyan); }
table.cmp td.n { color: var(--faint); }

/* ---------- use-case articles ---------- */
.uc-head { position: relative; overflow: hidden; }
.uc-glyph {
  position: absolute; right: clamp(-2rem, -3vw, -0.5rem); bottom: -1.5rem;
  font-size: clamp(9rem, 26vw, 20rem); line-height: 0.8;
  font-weight: 700; font-family: var(--font-display); color: var(--uc, var(--cyan));
  opacity: 0.07; pointer-events: none; user-select: none; z-index: 0;
}
.uc-head > *:not(.uc-glyph) { position: relative; z-index: 1; }
.uc-kicker { color: var(--uc, var(--cyan)); }

.uc-stat { border-left: 2px solid var(--uc, var(--cyan)); padding-left: 1.4rem; margin: 1.9rem 0; }
.uc-stat b { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 0.95; color: var(--uc, var(--cyan)); }
.uc-stat span { display: block; margin-top: 0.6rem; color: var(--muted); max-width: 42ch; font-size: 0.98rem; }

.uc-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; margin: 1.9rem 0; }
@media (max-width: 620px) { .uc-vs { grid-template-columns: 1fr; } }
.uc-vs > div { background: var(--bg-2); padding: 1.3rem 1.4rem; }
.uc-vs h4 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin: 0 0 0.55rem; }
.uc-vs .bad h4 { color: var(--uc, var(--rose)); }
.uc-vs p { margin: 0; font-size: 0.95rem; color: var(--muted); }

.uc-time { list-style: none; padding: 0; margin: 1.9rem 0; }
.uc-time li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line-soft); }
.uc-time li:first-child { border-top: 1px solid var(--line-soft); }
.uc-time b { font-family: var(--font-mono); font-size: 0.78rem; color: var(--uc, var(--cyan)); }
.uc-time span { color: var(--muted); font-size: 0.95rem; }
.uc-time li:last-child span { color: var(--text); }

.uc-quote { margin: 2.1rem 0; padding-left: 1.5rem; border-left: 3px solid var(--uc, var(--cyan)); }
.uc-quote p { font-family: var(--font-display); font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.32; color: var(--text); margin: 0; }
.uc-quote span { display: block; margin-top: 0.8rem; font-size: 0.8rem; color: var(--faint); font-family: var(--font-mono); }

.uc-drift { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.9rem 0; }
.uc-drift span { font-family: var(--font-mono); font-size: 0.78rem; padding: 0.45rem 0.8rem; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--muted); }
.uc-drift span:nth-child(3n) { transform: rotate(-2.5deg); border-color: var(--line-2); }
.uc-drift span:nth-child(4n) { transform: rotate(2deg); }
.uc-drift span:nth-child(5n) { opacity: 0.5; }

.uc-uses { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.3rem; }
.uc-uses .u { border: 1px solid var(--line-soft); border-left: 2px solid var(--uc, var(--cyan)); border-radius: 10px; padding: 1.05rem 1.3rem; background: var(--bg-2); }
.uc-uses .u b { display: block; color: var(--text); margin-bottom: 0.3rem; }
.uc-uses .u p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* use-case hub groups */
.uc-group + .uc-group { margin-top: 2.6rem; }
.uc-group > h2 { font-size: 1.2rem; margin-bottom: 1.1rem; color: var(--uc, var(--text)); }

/* ---------- legal / long-form pages (terms, privacy) ---------- */
.legal { max-width: 68ch; }
.sec .legal h2, .legal h2 { font-size: 1.15rem; margin: 2.4rem 0 0.7rem; letter-spacing: normal; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--muted); line-height: 1.7; margin: 0 0 1rem; }
.legal ul { color: var(--muted); line-height: 1.7; margin: 0 0 1rem; padding-left: 1.3rem; }
.legal li { margin: 0.35rem 0; }
.legal a { color: var(--cyan); }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.1rem; max-width: 540px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(232, 191, 90, 0.12);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- callout ---------- */
.callout {
  padding: 1.2rem 1.4rem;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: linear-gradient(100deg, rgba(232, 191, 90, 0.07), transparent);
  font-size: 0.92rem;
}
.callout.warn { border-color: rgba(251, 191, 36, 0.4); background: linear-gradient(100deg, rgba(251, 191, 36, 0.08), transparent); }
.callout strong { display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---------- breadcrumb / page head ---------- */
.page-head { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.crumb { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; }
.crumb a:hover { color: var(--cyan); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-footer a { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.site-footer a:hover { color: var(--cyan); }
.site-footer .fine { font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); width: 100%; }

/* ---------- misc ---------- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.tag-pill[data-pillar="gtm"] { color: var(--gtm); border-color: rgba(93, 202, 165, 0.35); }
.tag-pill[data-pillar="ga4"] { color: var(--ga4); border-color: rgba(239, 159, 39, 0.35); }
.tag-pill[data-pillar="qa"]  { color: var(--qa);  border-color: rgba(167, 139, 250, 0.35); }

.mono-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.mono-list li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; color: var(--muted); }
.mono-list li::before { content: "»"; position: absolute; left: 0; color: var(--cyan); font-family: var(--font-mono); }

.glitch:hover { animation: glitch 0.32s steps(2, end) 2; }
@keyframes glitch {
  0% { text-shadow: 2px 0 var(--cyan), -2px 0 var(--rose); }
  50% { text-shadow: -2px 0 var(--cyan), 2px 0 var(--gold); }
  100% { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE — sidebar collapses to an icon rail (no hamburger)
   ============================================================ */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --rail: var(--rail-collapsed); }
  .main { margin-left: var(--rail-collapsed); }

  .sidebar { padding: 1rem 0.5rem; align-items: center; }
  .brand { flex-direction: column; gap: 0.4rem; padding: 0.4rem 0 1rem; border: 0; }
  .brand .brand-word { display: none; }
  .brand img { width: 30px; height: 30px; }

  .nav a { justify-content: center; padding: 0.7rem 0; letter-spacing: 0; }
  .nav a span.lbl { display: none; }
  .nav a[aria-current="page"] { background: var(--panel-2); }
  .nav .group-label { display: none; }
  .nav .sub { margin-left: 0; padding-left: 0; border: 0; align-items: center; }
  .nav .sub a .dot { width: 7px; height: 7px; }
  .nav .sub a { padding: 0.5rem 0; }

  .sidebar-cta { padding: 0.7rem 0; }
  .sidebar-cta span.lbl { display: none; }
  .sidebar-foot .meta { display: none; }
  .sidebar-foot .socials { flex-direction: column; align-items: center; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  section { padding-block: 3rem; }
  .sec { padding-block: var(--sec-pt, 3rem) var(--sec-pb, 3rem); }
  .lede { font-size: 1.02rem; }
}

/* ============================================================
   CMS SECTION MODEL (build/render.js)
   .sec wraps every section; per-section Layout/Style overrides
   arrive as scoped custom properties on the wrapper.
   ============================================================ */
.sec {
  position: relative;
  padding-block: var(--sec-pt, clamp(3.5rem, 8vw, 6rem)) var(--sec-pb, clamp(3.5rem, 8vw, 6rem));
  background: var(--sec-bg, transparent);
  color: var(--sec-text, inherit);
}
.sec + .sec { border-top: none; }
.sec--divider { border-top: 1px solid var(--line-soft); }
.sec--html { padding-block: 0; }

.sec-inner {
  width: 100%;
  max-width: var(--sec-w, 1120px);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.25rem);
}

.sec :is(h1, h2, h3, h4) { color: var(--sec-h-color, inherit); }
.sec h2 { font-size: var(--sec-h-size, clamp(1.7rem, 3.4vw, 2.5rem)); }
.sec h1 { font-size: var(--sec-h-size, clamp(2.3rem, 5.4vw, 3.7rem)); }
.sec p, .sec li { font-size: var(--sec-body-size, inherit); }
.sec .kicker, .sec .kicker::before { color: var(--sec-accent, var(--cyan)); }
.sec .kicker.gold, .sec .kicker.gold::before { color: var(--gold); }

/* centered sections */
.sec--center { text-align: center; }
.sec--center .sec-inner > * { margin-inline: auto; }
.sec--center .kicker { justify-content: center; }
.sec--center .btn-row { justify-content: center; }
.sec--center .lede { max-width: 46ch; }

/* wide measure toggle (style.maxChars = false) */
.sec:not(.sec--wide-measure) .sec-inner > p,
.sec:not(.sec--wide-measure) .cms-col > p { max-width: 65ch; }
.sec--center:not(.sec--wide-measure) .sec-inner > p { max-width: 60ch; }

/* hero */
.sec--hero { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; }
.sec--hero .sec-inner > h1 { max-width: 16ch; }
.sec--hero .sec-inner > h1 .glow { color: var(--gold); text-shadow: 0 0 30px rgba(215, 181, 109, 0.45); }
.sec--hero .lede { margin-top: 1.4rem; max-width: 52ch; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.sec--hero .hero-beam { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent); opacity: 0.5; }

/* columns */
.cms-cols {
  display: grid;
  grid-template-columns: repeat(var(--sec-cols, 1), minmax(0, 1fr));
  gap: var(--sec-gap, 2rem);
}
.cms-col > :first-child { margin-top: 0; }
@media (max-width: 860px) { .cms-cols { grid-template-columns: 1fr; } }

/* blocks */
.sec .fig { margin: 1.5rem 0; }
.sec .fig figcaption { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); margin-top: 0.5rem; }
.sec .codeblock {
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem 1.2rem; overflow-x: auto; color: var(--text); margin: 1.2rem 0;
}
.sec hr.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 2rem 0; }
.sec .stat-item { display: inline-block; margin-right: 2.4rem; }
.sec .stat-item .n { font-family: var(--font-display); font-size: 1.7rem; color: var(--text); }
.sec .stat-item .l { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* ---- mobile typography: placed last so it wins over the .sec rules above ---- */
@media (max-width: 620px) {
  h1, .sec h1 { font-size: var(--sec-h-size, clamp(1.95rem, 8.5vw, 2.7rem)); }
  h2, .sec h2 { font-size: var(--sec-h-size, clamp(1.5rem, 6vw, 2rem)); }
  .sec--hero { min-height: 0; }
  .section-head { margin-bottom: 1.8rem; }
  .sec--hero .lede, .hero .lede { font-size: 1.05rem; }
}

/* ============================================================
   MOTION — lightweight animated touches. GPU-friendly
   (transform / opacity / box-shadow on small elements only).
   Fully neutralised under prefers-reduced-motion at file end.
   ============================================================ */

/* ambient scanline layer: a rare, faint CRT flicker */
body::after { animation: crt-flicker 15s steps(1, end) infinite; }
@keyframes crt-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.5; }
  97% { opacity: 1; }
  97.6% { opacity: 0.72; }
}

/* sidebar: a slow bead of light travelling down the right edge */
.sidebar::after {
  background: linear-gradient(180deg,
    transparent, rgba(232, 191, 90, 0.3) 43%, rgba(255, 244, 214, 0.95) 50%,
    rgba(232, 191, 90, 0.3) 57%, transparent);
  background-size: 100% 260%;
  animation: edge-scan 7.5s linear infinite;
}
@keyframes edge-scan { from { background-position: 0 -80%; } to { background-position: 0 180%; } }

/* brand mark: periodic sheen sweep + one-time boot flicker */
.brand { position: relative; overflow: hidden; }
.brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: brand-glint 9s ease-in-out infinite;
}
@keyframes brand-glint { 0%, 80%, 100% { transform: translateX(-130%); } 88% { transform: translateX(130%); } }
.brand-word.boot b, .brand-word.boot i { animation: boot-flick 0.5s steps(2, end); }
@keyframes boot-flick {
  0% { opacity: 0; transform: translateX(-3px); filter: blur(2px); }
  45% { opacity: 1; transform: translateX(2px); filter: none; }
  75% { transform: translateX(-1px); }
  100% { transform: none; }
}

/* nav icons: RGB-split glitch flick + cyan glow on hover */
.nav a svg { transition: transform 0.18s ease, filter 0.18s ease; }
.nav a:hover svg { filter: drop-shadow(0 0 5px var(--cyan)); animation: ico-glitch 0.4s steps(2, end); }
@keyframes ico-glitch {
  0% { transform: translate(0, 0); filter: none; }
  20% { transform: translate(-1.5px, 1px); filter: drop-shadow(1.5px 0 var(--rose)) drop-shadow(-1.5px 0 var(--cyan)); }
  45% { transform: translate(1.5px, -1px); filter: drop-shadow(-1.5px 0 var(--gold)); }
  70% { transform: translate(-1px, 0); }
  100% { transform: translate(0, 0); filter: drop-shadow(0 0 5px var(--cyan)); }
}

/* active nav item: the neon bar breathes */
.nav a[aria-current="page"]::before { animation: bar-pulse 2.6s ease-in-out infinite; }
@keyframes bar-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--cyan); opacity: 0.85; }
  50% { box-shadow: 0 0 18px var(--cyan), 0 0 3px #fff6df; opacity: 1; }
}

/* pillar dots: staggered breathing */
.nav .sub a .dot { animation: dot-breathe 3.2s ease-in-out infinite; }
.nav .sub a:nth-child(2) .dot { animation-delay: 0.5s; }
.nav .sub a:nth-child(3) .dot { animation-delay: 1s; }
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 5px currentColor; opacity: 0.5; }
  50% { box-shadow: 0 0 11px currentColor; opacity: 1; }
}

/* download CTA: soft breathing glow, paused on hover for the sheen */
.sidebar-cta { animation: cta-breathe 3.6s ease-in-out infinite; }
.sidebar-cta:hover { animation-play-state: paused; }
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 0 18px -6px rgba(232, 191, 90, 0.55); }
  50% { box-shadow: 0 0 28px -4px rgba(232, 191, 90, 0.9); }
}

/* buttons + CTA: a sheen sweep on hover */
.btn, .sidebar-cta { position: relative; overflow: hidden; }
.btn > svg, .sidebar-cta > svg, .btn > .lbl, .sidebar-cta > .lbl { position: relative; z-index: 1; }
.btn::after, .sidebar-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-200%) skewX(-16deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.btn:hover::after, .sidebar-cta:hover::after { transform: translateX(320%) skewX(-16deg); }

/* hero: running beam, flickering accent word */
.sec--hero .sec-inner { position: relative; z-index: 1; }
.sec--hero .hero-beam { overflow: visible; }
.sec--hero .hero-beam::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 140px; height: 3px;
  background: radial-gradient(ellipse at center, #fff, var(--cyan) 45%, transparent 78%);
  filter: blur(0.5px);
  animation: beam-run 5s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
}
@keyframes beam-run {
  0% { left: -18%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.hero .glow, .sec--hero h1 .glow { animation: glow-flicker 7s linear infinite; }
@keyframes glow-flicker {
  0%, 46%, 52%, 100% { text-shadow: 0 0 30px rgba(215, 181, 109, 0.45); opacity: 1; }
  48% { text-shadow: 0 0 7px rgba(215, 181, 109, 0.22); opacity: 0.8; }
  50% { text-shadow: 0 0 36px rgba(215, 181, 109, 0.65); opacity: 1; }
}

/* cards: HUD brackets snap larger, icon buzzes, subtle lift-glow on hover */
.card { transition: border-color 0.16s, transform 0.16s, background 0.16s, box-shadow 0.24s ease; }
.card::before, .card::after {
  transition: width 0.22s cubic-bezier(0.3, 1.4, 0.5, 1), height 0.22s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s ease;
}
.card:hover::before, .card:hover::after { width: 20px; height: 20px; opacity: 0.95; }
.card:hover { box-shadow: 0 0 34px -16px var(--cyan); }
.card .card-ico { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease; }
.card:hover .card-ico { transform: translateY(-3px); box-shadow: 0 0 18px -3px currentColor; }
.card:hover .card-ico svg { animation: ico-buzz 0.42s ease; }
@keyframes ico-buzz {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-7deg) scale(1.07); }
  55% { transform: rotate(5deg) scale(1.02); }
  80% { transform: rotate(-2deg) scale(1); }
  100% { transform: rotate(0) scale(1); }
}

/* pillar tag-pills: a faint colour pulse */
.tag-pill[data-pillar] { animation: pill-pulse 3.4s ease-in-out infinite; }
@keyframes pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 10px -2px currentColor; }
}

/* content links: cyan, with an underline that wipes in */
.sec-inner p a, .callout a { color: var(--cyan); }
.sec-inner p a, .callout a, .crumb a, .site-footer a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.28s ease, color 0.15s ease;
  padding-bottom: 1px;
}
.sec-inner p a:hover, .callout a:hover, .crumb a:hover, .site-footer a:hover { background-size: 100% 1px; }
.site-footer a:hover, .crumb a:hover { color: var(--cyan); }

/* section reveal: the kicker leading line draws in with the section */
[data-reveal] .kicker::before { width: 0; transition: width 0.5s ease 0.15s; }
[data-reveal].in .kicker::before { width: 26px; }

/* one-shot heading glitch on first load */
.glitch-once { animation: glitch 0.34s steps(2, end) 2; }

/* ---- reduced motion: neutralise everything above ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .brand::after, .btn::after, .sidebar-cta::after { display: none !important; }
  .sidebar::after { background: linear-gradient(180deg, transparent, rgba(232, 191, 90, 0.5), transparent); }
}

/* ---- WhatsApp card: revealed on the contact page after a successful send ---- */
.whatsapp-card {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  cursor: pointer;
  text-decoration: none;
}
.whatsapp-card:hover { transform: translateY(-2px); border-color: #25d366; }
.whatsapp-card h3 { margin-bottom: 0.35rem; }
.whatsapp-card p { margin-bottom: 0; color: var(--muted); }
.whatsapp-icon-link {
  flex: none;
  display: grid;
  place-items: center;
  color: #25d366;
}
.whatsapp-icon-link svg { width: 60px; height: 60px; }
@media (max-width: 640px) {
  .whatsapp-card { flex-direction: column; text-align: center; }
}

/* ---- pillar showcase: 2-col screenshot + copy, on each pillar page ----
   Geometric treatment: a cut-corner frame (not a soft photo fade) holding
   the screenshot, an orbiting dashed ring + node dots behind it, and a
   diamond accent at the cut corner — echoing the node-diagram look already
   used inside the ODDVX app itself, in that pillar's accent colour. */
.pillar-showcase {
  --pillar-color: var(--cyan);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.pillar-showcase[data-pillar="gtm"] { --pillar-color: var(--gtm); }
.pillar-showcase[data-pillar="ga4"] { --pillar-color: var(--ga4); }
.pillar-showcase[data-pillar="qa"] { --pillar-color: var(--qa); }
.pillar-showcase--reverse { grid-template-columns: 0.95fr 1.05fr; }
.pillar-showcase--reverse .pillar-showcase-media { order: 2; }
.pillar-showcase--reverse .pillar-showcase-copy { order: 1; }

.pillar-showcase-media { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.2rem); }
.pillar-showcase-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--pillar-color);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.pillar-showcase-geo .ring { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.55; }
.pillar-showcase-geo .node { fill: currentColor; stroke: none; opacity: 0.9; }
.pillar-showcase-geo line { stroke: currentColor; stroke-width: 1; opacity: 0.4; }

.pillar-showcase-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.55));
}
.pillar-showcase-frame::after {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  width: 15px; height: 15px;
  background: var(--bg);
  border: 1.5px solid var(--pillar-color);
  transform: rotate(45deg);
  z-index: 2;
}
.pillar-showcase-frame img { display: block; width: 100%; height: auto; }

.pillar-showcase-copy { position: relative; }
.pillar-showcase-copy .kicker::before { display: none; }
.pillar-showcase-copy .kicker-mark {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  background: var(--pillar-color);
  transform: rotate(45deg);
  vertical-align: 1px;
}
.pillar-showcase-copy h2 { margin-bottom: 0.7rem; }

@media (max-width: 860px) {
  .pillar-showcase, .pillar-showcase--reverse { grid-template-columns: 1fr; }
  .pillar-showcase--reverse .pillar-showcase-media, .pillar-showcase--reverse .pillar-showcase-copy { order: initial; }
}
/* Use-case directory: deliberately scoped to its two CMS section types. */
.sec--workflowHero, .sec--workflowPillar { padding-block: 0; }
.wf-hero { padding: clamp(46px,6vw,82px) 0 32px; }
.wf-eyebrow { display: flex; align-items: center; gap: 12px; font: 500 10px/1.5 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--wf-accent,var(--gold-hi)); margin: 0 0 24px; }
.wf-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 15px #e8bf5a55; }
.wf-hero-copy { max-width: 800px; }
.sec .wf-hero h1 { font-size: clamp(42px,5.1vw,76px); line-height: 1.04; font-weight: 500; letter-spacing: -.06em; margin: 0 0 24px; }
.wf-hero h1 span { color: #c8beaa; }
.sec .wf-hero-copy > p { max-width: 570px; color: #a9b2bf; font-size: 16px; line-height: 1.8; margin: 0; }
[data-tone="gtm"] { --wf-accent: #79d8b7; --wf-tint: 93,202,165; }
[data-tone="ga4"] { --wf-accent: #efb658; --wf-tint: 239,159,39; }
[data-tone="qa"] { --wf-accent: #baa1fa; --wf-tint: 167,139,250; }
.wf-pillar-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 42px; }
.wf-pillar-link { display: flex; flex-direction: column; gap: 22px; padding: 24px; border: 1px solid rgba(var(--wf-tint),.22); border-radius: 14px; background: linear-gradient(145deg,rgba(var(--wf-tint),.09),#0c0e13 70%); text-decoration: none; color: var(--text); transition: border-color .2s,transform .2s; }
.wf-pillar-link:hover { border-color: var(--wf-accent); transform: translateY(-3px); color: var(--text); }
.wf-nav-top, .wf-nav-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wf-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--wf-tint),.09); color: var(--wf-accent); }
.wf-icon svg { width: 22px; height: 22px; }
.wf-index { font: 9px var(--font-mono); letter-spacing: .08em; color: var(--wf-accent); }
.wf-pillar-link strong { font: 500 clamp(18px,2vw,25px)/1.2 var(--font-display); letter-spacing: -.025em; }
.wf-nav-bottom { color: #a9b2bf; font-size: 12px; line-height: 1.6; margin-top: -10px; }
.wf-nav-bottom svg, .wf-case-footer svg, .wf-hero-foot svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--wf-accent,var(--gold-hi)); }
.wf-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-bottom: 20px; font-size: 11px; color: #909ba9; }
.wf-hero-foot a { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-hi); text-decoration: none; }
.wf-pillar { padding: 52px 0 30px; scroll-margin-top: 26px; border-top: 1px solid #ffffff12; }
.wf-pillar-head { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; margin-bottom: 26px; }
.wf-pillar .wf-eyebrow { margin-bottom: 14px; }
.wf-pillar .wf-eyebrow > span { border: 1px solid rgba(var(--wf-tint),.3); border-radius: 6px; padding: 3px 7px; }
.sec .wf-pillar h2 { font-size: clamp(26px,2.8vw,38px); line-height: 1.16; letter-spacing: -.04em; font-weight: 500; margin: 0; max-width: 17ch; }
.sec .wf-pillar-intro { color: #a9b2bf; font-size: 13px; line-height: 1.8; margin: 0; max-width: 44ch; }
.wf-cases { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
.wf-case { min-width: 0; display: flex; flex-direction: column; text-decoration: none; border: 1px solid #ffffff12; border-radius: 14px; padding: 23px; background: #0d1016; color: var(--text); transition: border-color .2s,background .2s,transform .2s; }
.wf-case:hover { color: var(--text); border-color: rgba(var(--wf-tint),.6); background: #12171e; transform: translateY(-2px); }
.wf-case-tag { display: block; font: 9px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--wf-accent); margin-bottom: 14px; }
.wf-case h3 { font: 500 18px/1.3 var(--font-display); letter-spacing: -.025em; margin: 0 0 12px; }
.sec .wf-case p { color: #a9b2bf; font-size: 12px; line-height: 1.8; margin: 0 0 20px; }
.wf-case-footer { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff0d; color: var(--wf-accent); font-size: 10px; font-weight: 500; }
.wf-case--featured { grid-row: span 2; background: radial-gradient(ellipse at top left,rgba(var(--wf-tint),.12),transparent 70%),#0e1217; border-color: rgba(var(--wf-tint),.28); padding: 26px; }
.wf-case--featured h3 { font-size: clamp(24px,2.4vw,30px); line-height: 1.15; }
.sec .wf-case--featured p { font-size: 13px; }
.wf-product-frame { margin: auto -10px 24px; border: 1px solid rgba(var(--wf-tint),.2); border-radius: 8px; overflow: hidden; background: #080b10; box-shadow: 0 18px 35px #0005; transform: perspective(1000px) rotateY(-3deg); }
.wf-frame-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid #ffffff10; font: 7px/1.5 var(--font-mono); color: #a9b2bf; text-transform: uppercase; letter-spacing: .08em; }
.wf-frame-dots { font-size: 7px; color: var(--wf-accent); letter-spacing: 2px; }
.wf-product-frame img { display: block; width: 100%; height: auto; }
.wf-cases--three { grid-template-columns: 1.15fr 2fr; }
.wf-cases--three .wf-case--featured { grid-column: 1; }
.wf-pillar-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: #909ba9; font: 10px/1.6 var(--font-mono); }
.wf-pillar-foot a { color: #a9b2bf; text-decoration: none; }
.wf-pillar-link:focus-visible, .wf-case:focus-visible, .wf-hero-foot a:focus-visible, .wf-pillar-foot a:focus-visible { outline: 2px solid var(--wf-accent,var(--gold-hi)); outline-offset: 5px; }
@media (max-width: 1100px) and (min-width: 651px) {
  .wf-cases { grid-template-columns: 1fr 1fr; }
  .wf-case--featured { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .wf-case--featured .wf-product-frame { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .wf-case--featured .wf-case-footer { grid-column: 1; }
  .wf-cases--three .wf-case--featured { grid-column: 1 / -1; }
  .wf-pillar-link { padding: 18px; }
}
@media (max-width: 650px) {
  .wf-hero { padding-top: 40px; }
  .sec .wf-hero h1 { font-size: clamp(36px,9.3vw,58px); }
  .sec .wf-hero-copy > p { font-size: 14px; }
  .wf-pillar-nav { grid-template-columns: 1fr; gap: 9px; margin-top: 28px; }
  .wf-pillar-link { display: grid; grid-template-columns: 40px 1fr; padding: 17px; gap: 5px 14px; }
  .wf-nav-top { grid-row: 1 / 3; }
  .wf-index { display: none; }
  .wf-pillar-link strong { font-size: 19px; }
  .wf-nav-bottom { margin-top: 0; grid-column: 2; font-size: 11px; }
  .wf-hero-foot { align-items: flex-start; flex-direction: column; gap: 10px; font-size: 10px; }
  .wf-pillar { padding-top: 34px; }
  .wf-pillar-head { grid-template-columns: 1fr; gap: 16px; }
  .sec .wf-pillar h2 { max-width: 21ch; font-size: 30px; }
  .wf-cases, .wf-cases--three { grid-template-columns: 1fr; }
  .wf-case--featured { grid-row: auto; }
  .wf-case { padding: 23px; }
  .wf-product-frame { margin-top: 8px; transform: none; }
  .wf-pillar-foot { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-case, .wf-pillar-link { transition: none; }
  .wf-case:hover, .wf-pillar-link:hover { transform: none; }
}

/* Academy: an editorial field-guide system, deliberately distinct from the
   product pages while retaining the ODDVX grid, typography and restrained glow. */
.academy-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(260px,.65fr); align-items: center; gap: clamp(2rem,8vw,9rem); min-height: min(65vh,700px); padding-block: clamp(5rem,11vw,10rem); overflow: hidden; }
.academy-hero::before { content:""; position:absolute; inset:0 -9vw; background: radial-gradient(circle at 80% 43%,rgba(232,191,90,.12),transparent 20%), linear-gradient(90deg,transparent 49.9%,rgba(255,255,255,.05) 50%,transparent 50.1%); pointer-events:none; }
.academy-hero-copy,.academy-orbit { position:relative; z-index:1; }
.academy-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--gold-hi); font:500 10px/1.4 var(--font-mono); letter-spacing:.15em; }
.academy-eyebrow span { width:24px; height:1px; background:currentColor; box-shadow:8px 0 0 rgba(232,191,90,.28); }
.academy-hero h1 { max-width:10ch; margin:0; font:500 clamp(3.2rem,7vw,6.8rem)/.93 var(--font-display); letter-spacing:-.075em; }
.academy-hero .lede { max-width:47ch; margin:28px 0 0; color:#aeb7c4; font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.75; }
.academy-hero-notes { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.academy-hero-notes span { padding:7px 9px; border:1px solid #ffffff18; color:#909ba9; font:9px var(--font-mono); letter-spacing:.08em; }
.academy-orbit { width:min(31vw,390px); aspect-ratio:1; justify-self:center; display:grid; place-items:center; border:1px solid rgba(232,191,90,.4); border-radius:50%; color:var(--gold-hi); }
.academy-orbit::before,.academy-orbit::after,.academy-orbit i { content:""; position:absolute; border:1px solid rgba(232,191,90,.2); border-radius:50%; }
.academy-orbit::before { inset:11%; }.academy-orbit::after { inset:25%; }.academy-orbit i:nth-child(1){ width:9px;height:9px;background:var(--gold-hi);border:0;top:12%;right:24%;box-shadow:0 0 24px var(--gold-hi); }.academy-orbit i:nth-child(2){ width:6px;height:6px;background:#fff; border:0;bottom:18%;left:9%; }.academy-orbit i:nth-child(3){ width:3px;height:3px;background:var(--gold-hi);border:0;bottom:10%;right:31%; }
.academy-orbit b { font:500 clamp(4rem,9vw,7rem)/1 var(--font-display); letter-spacing:-.08em; }.academy-orbit em { position:absolute; bottom:18%; left:50%; transform:translateX(-50%); width:max-content; color:#8f98a5; font:9px/1.4 var(--font-mono); letter-spacing:.14em; font-style:normal; text-align:center; }
.resource-library { padding-block:clamp(3rem,8vw,7rem) !important; border-top:1px solid #ffffff10; }
.academy-library-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:clamp(3rem,7vw,6rem); }.academy-library-head h2 { max-width:16ch; margin:0; font:500 clamp(2.1rem,4vw,4.4rem)/1 var(--font-display); letter-spacing:-.06em; }.academy-library-head > p { margin:0; color:#909ba9; font-size:12px; line-height:1.65; text-align:right; }.academy-library-head b { color:var(--gold-hi); font:500 2rem/1 var(--font-display); }
.academy-library-groups { display:grid; gap:clamp(3rem,7vw,6rem); }.academy-library-group > header { display:flex; align-items:baseline; gap:15px; padding-bottom:13px; border-bottom:1px solid #ffffff16; }.academy-library-group > header span { color:var(--gold-hi); font:10px var(--font-mono); }.academy-library-group h3 { margin:0; font:500 clamp(1.25rem,2vw,1.8rem)/1.2 var(--font-display); letter-spacing:-.035em; }
.resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; background:#ffffff12; border:1px solid #ffffff12; }.resource-card { position:relative; min-height:250px; padding:clamp(1.3rem,2.3vw,2.1rem); border:0; border-radius:0; background:#090b10; transition:background .25s,transform .25s; }.resource-card:hover { border:0; background:linear-gradient(145deg,rgba(232,191,90,.12),#10131a 70%); transform:translateY(-4px); }.resource-card-index,.resource-card-format { display:block; font:10px var(--font-mono); letter-spacing:.09em; }.resource-card-index { color:#5b6472; }.resource-card-format { margin-top:26px; color:var(--gold-hi); }.resource-card h4 { max-width:17ch; margin:13px 0; font:500 clamp(1.1rem,1.65vw,1.45rem)/1.22 var(--font-display); letter-spacing:-.035em; }.resource-card p { margin:0; color:#9da6b4; font-size:12px; line-height:1.7; }.resource-card i { position:absolute; right:1.6rem; bottom:1.5rem; color:var(--gold-hi); font-size:1.25rem; font-style:normal; }
.enterprise-offer { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); padding:clamp(2rem,5vw,4.5rem); border:1px solid rgba(232,191,90,.34); background:radial-gradient(circle at 8% 0,rgba(232,191,90,.14),transparent 38%),#0b0d12; }.enterprise-offer h2 { max-width:14ch; margin:.6rem 0 1rem; font:500 clamp(2rem,3.6vw,3.6rem)/1.02 var(--font-display); letter-spacing:-.055em; }.enterprise-offer-copy > p:not(.kicker) { max-width:43ch; color:#aeb7c4; line-height:1.7; }.enterprise-offer-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:0; margin:0; list-style:none; background:#ffffff12; border:1px solid #ffffff12; }.enterprise-offer-list li { min-height:130px; padding:1.3rem; margin:0; background:#0d1016; }.enterprise-offer-list strong,.enterprise-offer-list span { display:block; }.enterprise-offer-list strong { margin-bottom:.55rem; color:var(--gold-hi); font:500 1rem var(--font-display); }.enterprise-offer-list span { color:#9ba5b2; font-size:12px; line-height:1.6; }
@media (max-width:800px) { .academy-hero,.enterprise-offer { grid-template-columns:1fr; }.academy-hero { min-height:0; }.academy-orbit { width:min(70vw,330px); }.academy-library-head { align-items:start; flex-direction:column; }.academy-library-head > p { text-align:left; }.resource-grid { grid-template-columns:1fr 1fr; }.resource-card { min-height:220px; } }
@media (max-width:520px) { .academy-hero { padding-block:4rem; }.academy-hero h1 { font-size:3.1rem; }.academy-orbit { width:260px; }.resource-grid,.enterprise-offer-list { grid-template-columns:1fr; }.resource-card { min-height:0; }.enterprise-offer { padding:1.4rem; } }

/* ============================================================
   HOME — sections rendered by build/home-render.js
   (homeHero, homeFeatures, homeTable, homeModes, homeFlow,
   homePillars, homePlans). Mock UI is decorative; motion is
   additive only, so every element's resting style is its final
   state and prefers-reduced-motion shows it without animating.
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[class*="sec--home"] a:focus-visible, .sec--cta a:focus-visible { outline:2px solid var(--scale); outline-offset:4px; }
.hm-ico { width:20px; height:20px; flex:none; color:var(--scale); }
.hm-head { max-width:62ch; }

/* shared mock window chrome */
.hm-window, .hm-table { position:relative; border:1px solid var(--line-2); border-radius:var(--radius-lg); background:linear-gradient(180deg, var(--surface-mock-2), var(--surface-mock)); box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 70px -40px rgba(232,191,90,.35); overflow:hidden; }
.hm-window-bar { display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; border-bottom:1px solid var(--line-mock); font:500 .66rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hm-dots { display:inline-flex; gap:5px; }
.hm-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.16); }
.hm-fan-wrap, .hm-table-wrap { margin:0; min-width:0; }

/* ---- 1. hero ---- */
.hm-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.hm-hero h1 { max-width:15ch; margin:0; font-size:var(--sec-h-size, clamp(2.3rem,4.4vw,3.8rem)); line-height:1.04; letter-spacing:-.035em; }
.hm-hero h1 .glow { display:block; color:var(--gold); text-shadow:0 0 30px rgba(215,181,109,.45); }
.hm-hero .lede { margin-top:1.3rem; max-width:50ch; }
.hm-hero-meta { margin:1.1rem 0 0; font:.72rem/1.5 var(--font-mono); letter-spacing:.05em; color:var(--muted); }

.hm-window { container:fan / inline-size; }
.hm-fan { display:grid; grid-template-columns:minmax(0,.95fr) 56px minmax(0,1.15fr); padding:1.3rem 1.2rem 1.3rem 1.1rem; }
.hm-group { display:contents; --p:var(--gtm); }
.hm-group[data-pillar="ga4"] { --p:var(--ga4); }
.hm-action { grid-column:1; position:relative; align-self:center; display:flex; flex-direction:column; gap:.45rem; padding:1rem 1.05rem; border:1px solid color-mix(in srgb, var(--p) 55%, transparent); border-radius:var(--radius-md); background:radial-gradient(circle at 0 0, color-mix(in srgb, var(--p) 16%, transparent), transparent 70%), var(--panel-2); box-shadow:0 0 44px -18px color-mix(in srgb, var(--p) 70%, transparent); }
.hm-action-kind { font:600 .64rem/1.3 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--p); }
.hm-action-kind::before { content:"+ "; }
.hm-action .hm-action-name { padding:0; border:0; background:none; font:500 .84rem/1.35 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.hm-action-meta { font:.68rem/1.4 var(--font-mono); color:var(--muted); }
.hm-action-port { position:absolute; right:-5px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--scale); box-shadow:0 0 12px var(--scale); }
.hm-wires { grid-column:2; grid-row:1 / -1; width:100%; height:100%; overflow:visible; }
.hm-wire { fill:none; stroke:rgba(93,202,165,.4); stroke-width:1.2; }
.hm-wire[data-pillar="ga4"] { stroke:rgba(239,159,39,.42); }
.hm-pulse { fill:none; stroke:var(--scale); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:14 200; stroke-dashoffset:14; opacity:0; animation:hm-pulse 4.2s cubic-bezier(.45,0,.2,1) calc(var(--i) * .11s + .5s) infinite; }
.hm-chips { list-style:none; margin:0; padding:0; display:contents; }
.hm-chip { grid-column:3; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id state" "label state"; align-items:center; column-gap:.6rem; margin-block:4px; padding:.42rem .7rem; border:1px solid rgba(232,191,90,.26); border-radius:8px; background:rgba(255,255,255,.028); animation:hm-lit 1s ease-out calc(var(--i) * .11s + .95s) both; }
.hm-chip::before { content:""; position:absolute; left:-4px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--surface-mock); border:1px solid var(--p); }
.hm-chip-id { grid-area:id; font:500 .74rem/1.3 var(--font-mono); color:var(--text); }
.hm-chip-label { grid-area:label; font-size:.72rem; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-chip-state { grid-area:state; padding:.2rem .5rem; border:1px solid rgba(232,191,90,.45); border-radius:999px; background:rgba(232,191,90,.1); font:600 .58rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--scale); animation:hm-pop .45s cubic-bezier(.2,.7,.3,1.3) calc(var(--i) * .11s + 1.05s) both; }
.hm-window-foot { display:flex; align-items:center; gap:.55rem; padding:.7rem 1rem; border-top:1px solid var(--line-mock); font:.68rem/1.4 var(--font-mono); color:var(--muted); }
.hm-window-foot .hm-ico { width:15px; height:15px; }

/* narrow window: one-to-many becomes a tree (card on top, bus line down the left) */
@container fan (max-width: 470px) {
  .hm-fan { display:block; padding:1rem; }
  .hm-group { display:block; }
  .hm-group + .hm-group { margin-top:1.3rem; }
  .hm-wires { display:none; }
  .hm-action-port { right:auto; top:auto; left:17px; bottom:-5px; margin-top:0; }
  .hm-chip { grid-row:auto !important; }
  .hm-chips { display:block; position:relative; margin-left:21px; padding:.9rem 0 0 14px; border-left:1px solid color-mix(in srgb, var(--p) 55%, transparent); overflow:hidden; }
  .hm-chips::before { content:""; position:absolute; left:-1px; top:0; width:1px; height:48px; background:linear-gradient(transparent, var(--scale), transparent); opacity:0; animation:hm-bus 4.2s ease-in-out .5s infinite; }
  .hm-chip::before { left:-15px; width:14px; height:1px; margin-top:0; border:0; border-radius:0; background:color-mix(in srgb, var(--p) 55%, transparent); }
}

/* ---- 2 + 7. icon strip / cards ---- */
.hm-features { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); }
.hm-features li { display:flex; gap:.9rem; min-width:0; }
.hm-features h3 { margin:0 0 .3rem; font-size:1rem; line-height:1.3; }
.hm-features p { margin:0; font-size:.88rem; line-height:1.55; }
.hm-tag { display:inline-block; margin-top:.55rem; padding:.18rem .5rem; border:1px solid rgba(232,191,90,.4); border-radius:999px; font:600 .58rem/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--scale); }
.hm-features--strip { border-block:1px solid var(--line-soft); }
.hm-features--strip li { padding:1.4rem 1.4rem 1.4rem 0; }
.hm-features--strip li + li { padding-left:1.4rem; border-left:1px solid var(--line-soft); }
.hm-features--strip .hm-ico { margin-top:.15rem; }
.hm-features--cards { gap:1rem; }
.hm-features--cards li { flex-direction:column; gap:.9rem; padding:1.6rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); }
.hm-features--cards .hm-ico { width:26px; height:26px; }
.hm-features--cards h3 { font-size:1.12rem; }
@media (max-width: 1100px) {
  .hm-features--strip { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hm-features--strip li:nth-child(odd) { padding-left:0; border-left:0; }
  .hm-features--strip li:nth-child(n+3) { border-top:1px solid var(--line-soft); }
}
@media (max-width: 920px) { .hm-features--cards { grid-template-columns:1fr; } }
@media (max-width: 560px) {
  .hm-features--strip { grid-template-columns:1fr; }
  .hm-features--strip li, .hm-features--strip li + li { padding:1.1rem 0; border-left:0; }
  .hm-features--strip li + li { border-top:1px solid var(--line-soft); }
}

/* ---- 3. results table mock ---- */
.hm-steps { list-style:none; margin:0 0 2rem; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
.hm-steps li { display:flex; flex-direction:column; gap:.2rem; padding-top:.85rem; border-top:1px solid var(--line-2); min-width:0; }
.hm-step-n { font:600 .66rem/1 var(--font-mono); letter-spacing:.12em; color:var(--scale); margin-bottom:.35rem; }
.hm-steps strong { font-family:var(--font-display); font-size:1.05rem; }
.hm-steps li > span:last-child:not(.hm-step-n) { font-size:.86rem; color:var(--muted); line-height:1.5; }
.hm-table { container:tbl / inline-size; }
.hm-panel { --p:var(--gtm); outline:none; }
.hm-panel[data-pillar="ga4"], .hm-tab[data-pillar="ga4"] { --p:var(--ga4); }
.hm-panel[data-pillar="qa"], .hm-tab[data-pillar="qa"] { --p:var(--qa); }
.hm-panel + .hm-panel { margin-top:2.2rem; }
.hm-panel .hm-table { border-color:color-mix(in srgb, var(--p) 38%, transparent); }
.hm-panel:focus-visible .hm-table { outline:2px solid var(--scale); outline-offset:3px; }
.hm-panel-caption { display:flex; align-items:baseline; gap:.6rem; max-width:80ch; margin:0 0 1rem; font-size:.92rem; }
.hm-panel-caption .hm-pillar-dot { flex:none; position:relative; top:-1px; }
.hm-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.1rem; padding:.3rem; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:999px; background:var(--panel); }
.hm-tab { --p:var(--gtm); display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:1px solid transparent; border-radius:999px; background:transparent; font:600 .7rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:color .15s, background .15s, border-color .15s; }
.hm-tab:hover { color:var(--text); }
.hm-tab[aria-selected="true"] { color:var(--text); border-color:color-mix(in srgb, var(--p) 60%, transparent); background:color-mix(in srgb, var(--p) 14%, transparent); }
.hm-tab:focus-visible { outline:2px solid var(--scale); outline-offset:2px; }
.hm-tab .hm-pillar-dot, .hm-panel-caption .hm-pillar-dot { width:8px; height:8px; border-radius:50%; background:var(--p); box-shadow:0 0 10px var(--p); }
.hm-tabset:not(.is-ready) .hm-tabs { display:none; }
.hm-tabset.is-ready .hm-panel + .hm-panel { margin-top:0; }
.hm-tabset.is-ready .hm-panel[hidden] { display:none; }
@media (max-width: 560px) { .hm-tabs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.25rem; width:100%; border-radius:14px; } .hm-tab { justify-content:center; padding:.6rem .25rem; font-size:.62rem; letter-spacing:.05em; text-align:center; } .hm-tab .hm-pillar-dot { display:none; } .hm-tab[aria-selected="true"] { box-shadow:inset 0 -2px 0 var(--p); } }
.hm-filters { display:flex; flex-wrap:wrap; gap:.4rem; padding:.8rem 1rem; border-bottom:1px solid var(--line-mock); }
.hm-filter { padding:.28rem .6rem; border:1px solid var(--line-mock); border-radius:999px; background:rgba(255,255,255,.025); font:.66rem/1.3 var(--font-mono); color:var(--muted); }
.hm-row { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.6fr) minmax(0,2fr) minmax(0,.75fr) minmax(0,.8fr); gap:.8rem; align-items:center; padding:.62rem 1rem; border-bottom:1px solid var(--line-mock); }
.hm-row--head .hm-cell { font:inherit; color:inherit; }
.hm-row--head { padding-block:.55rem; background:rgba(255,255,255,.018); font:600 .6rem/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hm-row.is-staged { background:linear-gradient(90deg, rgba(232,191,90,.1), transparent 70%); box-shadow:inset 2px 0 0 var(--scale); }
.hm-cell { min-width:0; }
.hm-c-container { font:.72rem/1.35 var(--font-mono); color:var(--muted); }
.hm-c-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .45rem; font:.78rem/1.4 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.hm-old { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(242,166,90,.8); }
.hm-to { color:var(--scale); }
.hm-type { display:inline-block; padding:.14rem .42rem; border:1px solid var(--line-mock); border-radius:4px; font:500 .6rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:#c6cfd9; }
.hm-badge { display:inline-block; padding:.17rem .5rem; border:1px solid; border-radius:999px; font:600 .6rem/1.3 var(--font-mono); white-space:nowrap; }
.hm-badge[data-tone="ok"] { color:var(--status-ok); border-color:rgba(111,211,174,.35); background:rgba(111,211,174,.08); }
.hm-badge[data-tone="warn"] { color:var(--status-warn); border-color:rgba(242,166,90,.4); background:rgba(242,166,90,.08); }
.hm-badge[data-tone="bad"] { color:var(--status-bad); border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.1); }
.hm-badge[data-tone="info"] { color:var(--muted); border-color:var(--line-mock); }
.hm-note-cell { display:block; font:.66rem/1.4 var(--font-mono); color:var(--muted); }
.hm-row.is-bad { background:linear-gradient(90deg, rgba(251,113,133,.1), transparent 70%); box-shadow:inset 2px 0 0 var(--status-bad); }
.hm-panel[data-pillar="ga4"] .hm-stage { background:rgba(239,159,39,.12); border:1px solid rgba(239,159,39,.55); color:var(--ga4); }
.hm-panel[data-pillar="ga4"] .hm-row.is-staged { background:linear-gradient(90deg, rgba(239,159,39,.09), transparent 70%); box-shadow:inset 2px 0 0 var(--ga4); }
.hm-stage { display:inline-block; padding:.2rem .5rem; border-radius:999px; background:var(--scale); font:700 .6rem/1.3 var(--font-mono); color:var(--ink-on-gold); white-space:nowrap; }
.hm-dash { color:var(--faint); }
.hm-table-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.8rem 1rem; padding:.85rem 1rem; font:.7rem/1.4 var(--font-mono); color:var(--muted); }
.hm-fake-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .9rem; border-radius:8px; background:linear-gradient(100deg, var(--cyan), var(--gold-hi)); font:700 .66rem/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-on-gold); }
.hm-fake-btn .hm-ico { width:13px; height:13px; color:currentColor; }
.hm-tabset.in .hm-row:not(.hm-row--head) { animation:hm-row .5s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 70ms + 150ms) both; }
.hm-tabset.in .is-staged .hm-stage { animation:hm-pop .45s cubic-bezier(.2,.7,.3,1.3) calc(var(--i) * 70ms + 650ms) both; }
@container tbl (max-width: 640px) {
  .hm-row--head { display:none; }
  .hm-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"container type" "name name" "usage staged"; gap:.4rem .6rem; padding:.8rem .9rem; }
  .hm-c-container { grid-area:container; } .hm-c-type { grid-area:type; justify-self:end; }
  .hm-c-name { grid-area:name; } .hm-c-usage { grid-area:usage; } .hm-c-staged { grid-area:staged; justify-self:end; }
}
@media (max-width: 860px) { .hm-steps { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---- 4. manual vs AI ---- */
.hm-modes { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1.1rem; align-items:stretch; }
.hm-mode { display:flex; flex-direction:column; min-width:0; padding:clamp(1.4rem,2.6vw,2.2rem); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); }
.hm-mode--ai { background:radial-gradient(circle at 100% 0, rgba(167,139,250,.11), transparent 55%), var(--panel); }
.hm-mode-kicker { display:flex; align-items:center; gap:.55rem; margin:0 0 .9rem; font:600 .68rem/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--scale); }
.hm-mode--ai .hm-mode-kicker, .hm-mode--ai .hm-mode-kicker .hm-ico { color:#c4b5fd; }
.hm-mode-kicker .hm-ico { width:16px; height:16px; }
.hm-mode h3 { font-size:clamp(1.25rem,2vw,1.55rem); margin-bottom:.5rem; }
.hm-soon { display:inline-block; position:relative; top:-3px; margin-left:.3rem; padding:.28rem .6rem; border:1px solid rgba(167,139,250,.55); border-radius:999px; background:rgba(167,139,250,.12); font:600 .58rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#d4c8ff; white-space:nowrap; }
.hm-demo { margin:.4rem 0 1.2rem; padding:.9rem 1rem; border:1px solid var(--line-mock); border-radius:var(--radius-md); background:var(--surface-mock); font:.74rem/1.5 var(--font-mono); }
.hm-demo-query { margin-bottom:.5rem; padding-bottom:.6rem; border-bottom:1px dashed var(--line-mock); color:var(--scale); overflow-wrap:anywhere; }
.hm-demo-query::before { content:"› "; color:var(--muted); }
.hm-demo-row { display:flex; align-items:center; gap:.6rem; padding:.2rem 0; color:var(--text); overflow-wrap:anywhere; }
.hm-box { flex:none; width:12px; height:12px; border:1px solid var(--scale); border-radius:3px; background:rgba(232,191,90,.3); }
.hm-bubble { padding:.7rem .85rem; border:1px solid rgba(167,139,250,.3); border-radius:12px 12px 12px 4px; background:rgba(167,139,250,.09); font:.86rem/1.5 var(--font-body); color:var(--text); }
.hm-draft { display:flex; align-items:center; gap:.5rem; margin-top:.65rem; color:var(--muted); }
.hm-draft .hm-ico { width:14px; height:14px; color:#c4b5fd; }
.hm-points { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.hm-points li { display:flex; gap:.6rem; font-size:.92rem; line-height:1.5; color:#c6cfd9; }
.hm-points .hm-ico { width:16px; height:16px; margin-top:.2rem; }
.hm-mode--ai .hm-points .hm-ico { color:#c4b5fd; }
.hm-live { display:flex; gap:.8rem; margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line-soft); }
.hm-mode--ai .hm-points { margin-bottom:1.4rem; }
.hm-live strong { font-size:.94rem; }
.hm-live p { margin:.2rem 0 0; font-size:.86rem; }
.hm-live-dot { flex:none; width:9px; height:9px; margin-top:.45rem; border-radius:50%; background:var(--status-ok); box-shadow:0 0 0 4px rgba(111,211,174,.16); animation:hm-live 2.6s ease-in-out infinite; }
.hm-or { position:relative; display:flex; align-items:center; justify-content:center; }
.hm-or::before { content:""; position:absolute; top:8%; bottom:8%; left:50%; width:1px; background:linear-gradient(transparent, var(--line-2), transparent); }
.hm-or span { position:relative; padding:.45rem .55rem; border:1px solid var(--line-2); border-radius:999px; background:var(--bg); font:600 .62rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hm-note { display:flex; align-items:center; justify-content:center; gap:.6rem; margin:1.9rem 0 0; font-family:var(--font-display); font-size:1.12rem; color:var(--text); text-align:center; }
@media (max-width: 900px) {
  .hm-modes { grid-template-columns:minmax(0,1fr); gap:.7rem; }
  .hm-or::before { top:50%; bottom:auto; left:8%; right:8%; width:auto; height:1px; background:linear-gradient(90deg, transparent, var(--line-2), transparent); }
  .hm-note { justify-content:flex-start; text-align:left; }
}

/* ---- 5. safe-at-scale flow ---- */
.hm-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); }
.hm-flow-step { position:relative; min-width:0; padding-right:1.1rem; }
.hm-flow-step::before { content:""; position:absolute; top:18px; left:44px; right:8px; height:1px; background:linear-gradient(90deg, var(--line-2), rgba(232,191,90,.55)); transform-origin:left center; }
.hm-flow-step:last-child::before { display:none; }
.hm-flow-n { position:relative; z-index:1; display:grid; place-items:center; width:36px; height:36px; margin-bottom:1rem; border:1px solid var(--line-2); border-radius:50%; background:var(--bg-2); font:600 .72rem/1 var(--font-mono); color:var(--scale); }
.hm-flow-step h3 { margin-bottom:.35rem; font-size:1.05rem; }
.hm-flow-step p { margin:0; font-size:.88rem; line-height:1.55; }
.hm-flow-step.is-you .hm-flow-n { border-color:transparent; background:linear-gradient(100deg, var(--cyan), var(--gold-hi)); color:var(--ink-on-gold); box-shadow:0 0 26px -4px rgba(232,191,90,.75); }
.hm-flow-step.is-you h3 { color:var(--scale); }
.hm-flow.in .hm-flow-step { animation:hm-rise .5s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 110ms) both; }
.hm-flow.in .hm-flow-step::before { animation:hm-draw .6s ease-out calc(var(--i) * 110ms + 250ms) both; }
.hm-flow-note { display:flex; align-items:center; gap:.75rem; margin:2.4rem 0 0; padding:1rem 1.25rem; border:1px solid rgba(232,191,90,.4); border-radius:var(--radius-md); background:linear-gradient(100deg, rgba(232,191,90,.09), transparent 70%); }
.hm-flow-note .hm-ico { width:22px; height:22px; }
.hm-flow-note strong { font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.hm-fine-list { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.8rem; }
.hm-fine-list li { position:relative; padding-left:1rem; font-size:.86rem; color:var(--muted); }
.hm-fine-list li::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
@media (max-width: 900px) {
  .hm-flow { grid-template-columns:minmax(0,1fr); }
  .hm-flow-step { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:1rem; padding:0 0 1.4rem; }
  .hm-flow-n { grid-row:span 2; margin:0; }
  .hm-flow-step h3 { margin-top:.4rem; }
  .hm-flow-step::before { top:40px; bottom:4px; left:18px; right:auto; width:1px; height:auto; background:linear-gradient(180deg, var(--line-2), rgba(232,191,90,.45)); }
  .hm-flow.in .hm-flow-step::before { animation:none; }
}

/* ---- 6. pillars ---- */
.hm-pillars { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; }
.hm-pillar { --p:var(--gtm); position:relative; display:flex; flex-direction:column; min-width:0; padding:1.6rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg, color-mix(in srgb, var(--p) 8%, transparent), transparent 45%), var(--panel); }
.hm-pillar::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, var(--p), transparent 80%); }
.hm-pillar[data-pillar="ga4"] { --p:var(--ga4); }
.hm-pillar[data-pillar="qa"] { --p:var(--qa); }
.hm-pillar-label { display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; font:600 .66rem/1.2 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--p, var(--muted)); }
.hm-pillar-dot { width:8px; height:8px; border-radius:50%; background:var(--p); box-shadow:0 0 10px var(--p); }
.hm-pillar h3 { font-size:1.2rem; line-height:1.3; }
.hm-pillar-note { font-size:.86rem; }
.hm-modules { list-style:none; margin:.5rem 0 1.3rem; padding:0; }
.hm-modules li { display:flex; flex-direction:column; padding:.6rem 0; border-top:1px solid var(--line-soft); }
.hm-modules strong { font-size:.93rem; }
.hm-modules span { font-size:.82rem; line-height:1.5; color:var(--muted); }
.hm-link { display:inline-flex; align-items:center; gap:.45rem; margin-top:auto; font:600 .72rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--scale); }
.hm-link .hm-ico { width:14px; height:14px; transition:transform .16s; }
.hm-link:hover .hm-ico { transform:translateX(3px); }
.hm-bridge { display:flex; align-items:center; gap:1.4rem; margin-top:1rem; padding:1.3rem 1.6rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(90deg, rgba(93,202,165,.08), rgba(239,159,39,.08)), var(--panel); }
.hm-bridge .hm-pillar-label { margin-bottom:.35rem; color:var(--muted); }
.hm-bridge h3 { margin-bottom:.2rem; font-size:1.12rem; }
.hm-bridge p { margin:0; font-size:.9rem; }
.hm-bridge-ends { flex:none; display:flex; align-items:center; }
.hm-bridge-ends i { position:relative; width:14px; height:14px; border-radius:50%; background:var(--gtm); box-shadow:0 0 12px var(--gtm); }
.hm-bridge-ends i + i { margin-left:34px; background:var(--ga4); box-shadow:0 0 12px var(--ga4); }
.hm-bridge-ends i + i::before { content:""; position:absolute; right:14px; top:6.5px; width:34px; height:1px; background:linear-gradient(90deg, var(--gtm), var(--ga4)); }
@media (max-width: 1000px) { .hm-pillars { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 560px) { .hm-bridge { flex-direction:column; align-items:flex-start; gap:.9rem; } }

/* ---- 8. plans teaser ---- */
.hm-plans { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; max-width:900px; }
.hm-plan { display:flex; flex-direction:column; min-width:0; padding:1.7rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); }
.hm-plan.is-featured { border-color:rgba(232,191,90,.45); background:radial-gradient(circle at 100% 0, rgba(232,191,90,.13), transparent 55%), var(--panel-2); box-shadow:0 0 70px -34px rgba(232,191,90,.65); }
.hm-plan-name { margin:0 0 .6rem; font:600 .7rem/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--scale); }
.hm-plan-price { margin:0 0 .5rem; font-family:var(--font-display); font-size:2.5rem; line-height:1; color:var(--text); }
.hm-plan-price small { font:.85rem var(--font-mono); color:var(--muted); }
.hm-plan-note { font-size:.88rem; }
.hm-plan-list { list-style:none; margin:.3rem 0 1.5rem; padding:0; display:grid; gap:.5rem; }
.hm-plan-list li { display:flex; gap:.55rem; font-size:.9rem; line-height:1.5; color:#c6cfd9; }
.hm-plan-list .hm-ico { width:16px; height:16px; margin-top:.2rem; }
.hm-plan-list li.is-off { color:var(--muted); }
.hm-plan-list li.is-off .hm-ico { color:var(--muted); }
.hm-plan .btn { margin-top:auto; justify-content:center; }
.hm-plans-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:1rem 2rem; max-width:900px; margin-top:1.3rem; }
.hm-plans-foot p { max-width:62ch; margin:0; font-size:.85rem; }
@media (max-width: 720px) { .hm-plans { grid-template-columns:minmax(0,1fr); } }

/* ---- layout breakpoints + phone gutters ---- */
@media (max-width: 1239px) {
  .hm-hero { grid-template-columns:minmax(0,1fr); }
  .hm-fan-wrap { max-width:680px; }
}
@media (max-width: 620px) {
  [class*="sec--home"] .sec-inner { padding-inline:var(--gutter-phone); }
  .hm-hero h1 { font-size:var(--sec-h-size, clamp(2rem,9vw,2.6rem)); }
  .hm-steps { grid-template-columns:minmax(0,1fr); gap:.8rem; }
}

/* ---- motion ---- */
@keyframes hm-pulse { 0% { stroke-dashoffset:14; opacity:0; } 6% { opacity:1; } 36% { stroke-dashoffset:-100; opacity:1; } 40%, 100% { stroke-dashoffset:-100; opacity:0; } }
@keyframes hm-bus { 0% { top:-48px; opacity:0; } 8% { opacity:1; } 45% { top:100%; opacity:1; } 50%, 100% { top:100%; opacity:0; } }
@keyframes hm-lit { 0% { border-color:var(--line-mock); } 40% { border-color:rgba(232,191,90,.85); box-shadow:0 0 22px -8px var(--scale); } }
@keyframes hm-pop { from { opacity:0; transform:scale(.8); } }
@keyframes hm-row { from { opacity:0; transform:translateX(-10px); } }
@keyframes hm-rise { from { opacity:0; transform:translateY(10px); } }
@keyframes hm-draw { from { transform:scaleX(0); } }
@keyframes hm-live { 50% { box-shadow:0 0 0 7px rgba(111,211,174,0); } }
@media (prefers-reduced-motion: reduce) {
  .hm-pulse, .hm-chips::before { display:none; }
  .hm-chip, .hm-chip-state, .hm-row, .hm-stage, .hm-flow-step, .hm-flow-step::before, .hm-live-dot { animation:none !important; }
  .hm-link .hm-ico { transition:none; }
}

/* ============================================================
   ILLUSTRATIONS — animated scenes rendered by build/illustrations.js
   (the "illustration" and "seriesNav" CMS sections). Placeholder data
   only. Animated elements carry data-a="<kind>-<phase>"; every
   element's resting style is its final state, so reduced motion shows
   the finished picture. Off-screen scenes get .is-idle (oddvx.js).
   ============================================================ */
@property --il-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.article-body .sec--illustration { padding-block:clamp(1.4rem,3.5vw,2.8rem); }
.article-body .sec--illustration .sec-inner { max-width:1060px; }
.il { --d:9s; margin:0; min-width:0; }
.il-win { position:relative; border:1px solid var(--line-2); border-radius:var(--radius-lg); background:linear-gradient(180deg, var(--surface-mock-2), var(--surface-mock)); box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 70px -40px rgba(232,191,90,.3); overflow:hidden; container:il / inline-size; }
.il-demo { margin-left:auto; color:var(--faint); letter-spacing:.06em; font-size:.56rem; white-space:nowrap; }
.il-body { padding:1.1rem 1.2rem; }
.il-cap { max-width:72ch; margin:.9rem auto 0; color:var(--muted); font-size:.84rem; line-height:1.6; text-align:center; }
.il-ico { width:14px; height:14px; flex:none; }
:where(.il) code { background:none; border:0; padding:0; border-radius:0; font-size:inherit; color:inherit; }
.sec .il li, .sec .il-series li { margin:0; }
.sec .il p { margin:0; }
.il-foot { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1rem; margin:1rem -1.2rem -1.1rem; padding:.75rem 1.2rem; border-top:1px solid var(--line-mock); font:.66rem/1.45 var(--font-mono); color:var(--muted); }
.il-foot > .il-ico { color:var(--scale); }
.il-foot .hm-fake-btn { margin-left:auto; }
.hm-fake-btn.is-danger { background:linear-gradient(100deg,#fb7185,#f9a8b4); color:#1b0a0e; }
.hm-badge[data-tone="gold"] { color:var(--scale); border-color:rgba(232,191,90,.45); background:rgba(232,191,90,.1); }
.il .hm-badge { font-size:.56rem; }
.il-ico.t-ok { color:var(--status-ok); } .il-ico.t-warn { color:var(--status-warn); } .il-ico.t-bad { color:var(--status-bad); } .il-ico.t-gold { color:var(--scale); }
.il-input { display:inline-flex; align-items:center; min-width:8ch; min-height:1.9em; padding:.3rem .55rem; border:1px solid var(--line-2); border-radius:6px; background:rgba(0,0,0,.25); font:.7rem/1.2 var(--font-mono); color:var(--text); }
.il-typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:calc(var(--n) * 1ch + 1ch); font-family:var(--font-mono); }
.il-box { display:inline-grid; place-items:center; width:14px; height:14px; flex:none; border:1px solid var(--line-2); border-radius:4px; }
.il-box.is-on { border-color:var(--scale); background:rgba(232,191,90,.15); }
.il-box i { display:grid; place-items:center; color:var(--scale); }
.il-box .il-ico { width:11px; height:11px; }

/* -- table -- */
.il-kpis { display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:.5rem; margin-bottom:.8rem; }
.il-kpi { position:relative; padding:.55rem .7rem; border:1px solid var(--line-mock); border-radius:8px; background:rgba(255,255,255,.02); min-width:0; }
.il-kpi span { display:block; font:600 .5rem/1.25 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.il-kpi b { display:block; margin-top:.3rem; font:600 1.15rem/1 var(--font-display); color:var(--text); }
.il-kpi[data-tone="bad"] b { color:var(--status-bad); } .il-kpi[data-tone="warn"] b { color:var(--status-warn); }
.il-kpi.is-on { border-color:var(--scale); background:rgba(232,191,90,.08); }
.il-kpi .il-kpi-was { position:absolute; left:.7rem; bottom:.55rem; margin:0; color:var(--faint); opacity:0; }
.il-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; }
.il-chip { position:relative; display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .6rem; border:1px solid var(--line-mock); border-radius:999px; background:rgba(255,255,255,.025); font:.62rem/1.3 var(--font-mono); color:var(--muted); }
.il-chip.is-on { border-color:var(--scale); color:var(--text); background:rgba(232,191,90,.1); }
.il-click { position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:1px solid var(--scale); opacity:0; pointer-events:none; }
.il-finder { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem; margin-bottom:.8rem; }
.il-field { display:flex; flex-direction:column; gap:.25rem; padding:.4rem .6rem; border:1px solid var(--line-mock); border-radius:8px; background:rgba(255,255,255,.02); }
.il-field small { font:600 .5rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.il-field code { font:.7rem/1.3 var(--font-mono); color:var(--text); }
.il-field.is-on { border-color:var(--scale); }
.il-finder-note { padding:.4rem 0; font:.64rem/1.3 var(--font-mono); color:var(--scale); }
.il-selbar { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; margin-bottom:.7rem; padding:.5rem .7rem; border:1px solid var(--line-mock); border-radius:8px; background:rgba(255,255,255,.02); font:.64rem/1.3 var(--font-mono); color:var(--muted); }
.il-selbar > span:first-child { color:var(--text); font-weight:600; }
.il-sb-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .5rem; border:1px solid var(--line-mock); border-radius:6px; color:var(--text); }
.il-sb-btn.is-on { border-color:var(--scale); color:var(--scale); background:rgba(232,191,90,.08); }
.il-table { border:1px solid var(--line-mock); border-radius:8px; overflow:hidden; }
.il-row { --rowmax:5rem; position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.55fr) minmax(0,2fr) minmax(0,1fr) minmax(0,.75fr); gap:.7rem; align-items:center; padding:.5rem .8rem; border-bottom:1px solid var(--line-mock); max-height:var(--rowmax); }
.il-table.has-check .il-row { grid-template-columns:16px minmax(0,1.2fr) minmax(0,.55fr) minmax(0,2fr) minmax(0,1fr) minmax(0,.75fr); }
.il-row:last-child { border-bottom:0; }
.il-row--head { background:rgba(255,255,255,.02); font:600 .52rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-block:.45rem; }
.il-c { min-width:0; }
.il-c-scope { font:.62rem/1.35 var(--font-mono); color:var(--muted); }
.il-c-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .45rem; font:.68rem/1.4 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.il-c-usage { display:flex; flex-wrap:wrap; gap:.3rem; }
.il-row.is-staged { background:linear-gradient(90deg, rgba(232,191,90,.08), transparent 70%); }
.il-row.is-hl { background:rgba(232,191,90,.06); }
.il-row.is-out { max-height:0; padding-block:0; border-bottom-width:0; opacity:0; overflow:hidden; }
.il-row.is-dim { opacity:.38; }
.il-old { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(251,129,150,.8); }
.il-pill { display:inline-block; padding:.16rem .45rem; border-radius:999px; background:var(--scale); font:700 .54rem/1.3 var(--font-mono); color:var(--ink-on-gold); white-space:nowrap; }
.il-pill[data-tone="bad"] { background:rgba(251,129,150,.14); border:1px solid rgba(251,129,150,.5); color:var(--status-bad); }
.il-pill[data-tone="warn"] { background:rgba(242,166,90,.12); border:1px solid rgba(242,166,90,.5); color:var(--status-warn); }
.il-pill[data-tone="ok"] { background:rgba(111,211,174,.12); border:1px solid rgba(111,211,174,.45); color:var(--status-ok); }
.il-pill[data-tone="info"] { background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--text); }
.il-note { font:.6rem/1.35 var(--font-mono); color:var(--muted); }
.il-tip { position:absolute; right:.8rem; top:calc(100% - .4rem); z-index:2; display:flex; flex-direction:column; gap:.2rem; padding:.55rem .7rem; border:1px solid var(--line-2); border-radius:8px; background:#141821; box-shadow:0 18px 40px -18px #000; font:.6rem/1.4 var(--font-mono); color:var(--muted); }
.il-tip b { color:var(--text); }
.il-table:has(.il-tip) { overflow:visible; }

/* -- fan -- */
.il-fan { display:grid; grid-template-columns:minmax(0,.9fr) 48px minmax(0,1.15fr); align-items:stretch; }
.il-src { --p:var(--gtm); grid-column:1; align-self:center; position:relative; display:flex; flex-direction:column; gap:.4rem; padding:.9rem 1rem; border:1px solid color-mix(in srgb, var(--p) 55%, transparent); border-radius:var(--radius-md); background:radial-gradient(circle at 0 0, color-mix(in srgb, var(--p) 15%, transparent), transparent 70%), var(--panel-2); box-shadow:0 0 44px -18px color-mix(in srgb, var(--p) 65%, transparent); }
.il-src[data-tone="gold"] { --p:var(--scale); }
.il-src-kind { display:flex; align-items:center; gap:.4rem; font:600 .58rem/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--p); }
.il-src-name { font:500 .76rem/1.35 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.il-src-meta { font:.62rem/1.4 var(--font-mono); color:var(--muted); }
.il-port { position:absolute; right:-5px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--scale); box-shadow:0 0 12px var(--scale); }
.il-wires { grid-column:2; width:100%; height:100%; overflow:visible; }
.il-wire { fill:none; stroke:rgba(232,191,90,.35); stroke-width:1.2; }
.il-wire.is-warn { stroke:rgba(242,166,90,.45); stroke-dasharray:3 4; }
.il-pulse { fill:none; stroke:var(--scale); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:14 200; stroke-dashoffset:14; opacity:0; animation:hm-pulse 4.2s cubic-bezier(.45,0,.2,1) calc(var(--i) * .13s + .3s) infinite; }
.il-targets { grid-column:3; list-style:none; margin:0; padding:0; display:grid; grid-auto-rows:1fr; }
.il-target { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id state" "label state" "sub sub"; align-items:center; column-gap:.6rem; margin-block:3px; padding:.36rem .65rem; border:1px solid rgba(232,191,90,.26); border-radius:8px; background:rgba(255,255,255,.028); }
.il-target::before { content:""; position:absolute; left:-4px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--surface-mock); border:1px solid var(--scale); }
.il-target-id { grid-area:id; font:500 .68rem/1.3 var(--font-mono); color:var(--text); }
.il-target-label { grid-area:label; font-size:.66rem; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.il-target-state { grid-area:state; display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .5rem; border:1px solid rgba(232,191,90,.45); border-radius:999px; background:rgba(232,191,90,.1); font:600 .52rem/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--scale); white-space:nowrap; }
.il-target-state .il-ico { width:11px; height:11px; }
.il-target-sub { grid-area:sub; margin-top:.15rem; font:.58rem/1.35 var(--font-mono); color:var(--muted); }
.il-target[data-tone="ok"] .il-target-state { color:var(--status-ok); border-color:rgba(111,211,174,.4); background:rgba(111,211,174,.08); }
.il-target[data-tone="warn"] { border-color:rgba(242,166,90,.4); }
.il-target[data-tone="warn"] .il-target-state { color:var(--status-warn); border-color:rgba(242,166,90,.45); background:rgba(242,166,90,.08); }
.il-target[data-tone="info"] .il-target-state { color:var(--muted); border-color:var(--line-mock); background:rgba(255,255,255,.03); }

/* -- flow -- */
.il-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:.6rem; }
.il-step { position:relative; display:flex; flex-direction:column; gap:.3rem; min-width:0; padding:.8rem .85rem; border:1px solid var(--line-mock); border-radius:10px; background:rgba(255,255,255,.02); }
.il-step + .il-step::before { content:""; position:absolute; left:calc(-.6rem - 1px); top:1.45rem; width:.6rem; height:1px; background:var(--line-2); }
.il-step-n { display:inline-grid; place-items:center; width:26px; height:26px; border:1px solid var(--line-2); border-radius:50%; font:600 .58rem/1 var(--font-mono); color:var(--scale); }
.il-step strong { font:600 .84rem/1.3 var(--font-display); color:var(--text); }
.il-step-d { font:.62rem/1.45 var(--font-mono); color:var(--muted); }
.il-step.is-gate { border-color:rgba(232,191,90,.6); background:radial-gradient(circle at 50% 0, rgba(232,191,90,.16), transparent 70%), var(--panel-2); }
.il-step.is-gate .il-step-n { background:var(--scale); border-color:var(--scale); color:var(--ink-on-gold); }
.il-step.is-ok .il-step-n { color:var(--status-ok); border-color:rgba(111,211,174,.45); }
.il-step.is-warn .il-step-n { color:var(--status-warn); border-color:rgba(242,166,90,.45); }
.il-step.is-bad .il-step-n { color:var(--status-bad); border-color:rgba(251,129,150,.45); }
.il-step-items { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.il-mini { padding:.14rem .42rem; border:1px solid var(--line-mock); border-radius:5px; font:.56rem/1.3 var(--font-mono); color:#c6cfd9; }
.il-mini[data-tone="ok"] { color:var(--status-ok); border-color:rgba(111,211,174,.35); }
.il-mini[data-tone="warn"] { color:var(--status-warn); border-color:rgba(242,166,90,.4); }
.il-mini[data-tone="bad"] { color:var(--status-bad); border-color:rgba(251,129,150,.4); }
.il-mini[data-tone="gold"] { color:var(--scale); border-color:rgba(232,191,90,.45); }

/* -- graph -- */
.il-graph { position:relative; aspect-ratio:var(--ar); min-height:250px; margin:.2rem 0; }
.il-edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.il-edge { fill:none; stroke-width:1.3; stroke:rgba(255,255,255,.14); }
.il-edge[data-tone="live"] { stroke:rgba(111,211,174,.55); }
.il-edge[data-tone="inactive"] { stroke:rgba(242,166,90,.55); }
.il-edge[data-tone="orphan"] { stroke:rgba(251,129,150,.42); }
.il-edge[data-tone="gold"] { stroke:rgba(232,191,90,.5); }
.il-node { position:absolute; translate:-50% -50%; z-index:1; width:max-content; max-width:var(--w, 23%); display:flex; flex-direction:column; align-items:flex-start; gap:.22rem; padding:.42rem .58rem; border:1px solid var(--line-mock); border-radius:8px; background:#0f131b; box-shadow:0 10px 30px -18px #000; }
.il-node-k { display:flex; align-items:center; gap:.3rem; font:600 .48rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.il-node-k .il-ico { width:11px; height:11px; }
.il-node-n { font:.64rem/1.35 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.il-node[data-tone="live"] { border-color:rgba(111,211,174,.5); } .il-node[data-tone="live"] .il-node-k { color:var(--status-ok); }
.il-node[data-tone="inactive"] { border-color:rgba(242,166,90,.55); border-style:dashed; } .il-node[data-tone="inactive"] .il-node-k { color:var(--status-warn); }
.il-node[data-tone="orphan"] { border-color:rgba(251,129,150,.55); } .il-node[data-tone="orphan"] .il-node-k { color:var(--status-bad); }
.il-node[data-tone="gold"] { border-color:rgba(232,191,90,.65); box-shadow:0 0 34px -14px var(--scale); } .il-node[data-tone="gold"] .il-node-k { color:var(--scale); }
.il-node[data-tone="src"] { border-color:var(--line-2); }
.il-node[data-tone="muted"] { opacity:.72; }
.il-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.7rem; font:.58rem/1.3 var(--font-mono); color:var(--muted); }
.il-legend i { display:inline-block; width:16px; height:2px; margin-right:.45rem; vertical-align:middle; background:rgba(255,255,255,.2); }
.il-legend [data-tone="live"] i { background:var(--status-ok); } .il-legend [data-tone="inactive"] i { background:var(--status-warn); } .il-legend [data-tone="orphan"] i { background:var(--status-bad); }

/* -- review -- */
.il-review { display:flex; flex-direction:column; gap:.7rem; }
.il-rv-title { display:flex; align-items:flex-start; gap:.7rem; }
.il-rv-title > .il-ico { width:30px; height:30px; padding:7px; border:1px solid rgba(242,166,90,.35); border-radius:8px; background:rgba(242,166,90,.12); color:#f4aa66; }
.il-rv-title strong { font:600 .88rem/1.3 var(--font-display); color:var(--text); }
.il-rv-title p { margin-top:.2rem; font-size:.68rem; line-height:1.5; color:var(--muted); }
.il-rv-totals { display:flex; flex-wrap:wrap; gap:.35rem; }
.il-rv-list { border:1px solid var(--line-mock); border-radius:8px; overflow:hidden; }
.il-rv { border-bottom:1px solid var(--line-mock); }
.il-rv:last-child { border-bottom:0; }
.il-rv-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem; padding:.5rem .75rem; font:.6rem/1.4 var(--font-mono); color:var(--faint); }
.il-rv-head code { font:600 .68rem/1.4 var(--font-mono); color:var(--text); }
.il-rv-ws { color:var(--muted); }
.il-rv-note { padding:0 .75rem .4rem 1.9rem; font:.6rem/1.4 var(--font-mono); color:var(--status-warn); }
.il-rv-ops { display:flex; flex-direction:column; gap:.32rem; padding:0 .75rem .6rem 1.9rem; }
.il-rv-op { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .55rem; font:.62rem/1.4 var(--font-mono); color:var(--text); }
.il-rv-x { font-size:.58rem; color:var(--muted); }
.il-rv-fix { display:inline-flex; align-items:center; gap:.3rem; font-size:.58rem; color:var(--scale); }
.il-rv-fix .il-ico { width:11px; height:11px; }
.il-rv-ws-opts { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; }
.il-radio { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.45rem; padding:.25rem .45rem; border:1px solid transparent; border-radius:6px; font:.64rem/1.3 var(--font-mono); color:var(--muted); }
.il-radio > i { width:12px; height:12px; border:1px solid var(--line-2); border-radius:50%; }
.il-radio.is-on { color:var(--text); }
.il-radio.is-on > i { border-color:var(--scale); background:var(--scale); box-shadow:inset 0 0 0 3px var(--surface-mock); }
.il-radio code { padding:.15rem .4rem; border:1px solid var(--line-2); border-radius:5px; color:var(--text); }
.il-typed-gate { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.6rem .75rem; border:1px solid rgba(251,129,150,.4); border-radius:8px; background:rgba(251,129,150,.07); font:.62rem/1.4 var(--font-mono); color:var(--status-bad); }

/* -- form -- */
.il-form { display:flex; flex-direction:column; gap:.75rem; }
.il-form-title { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font:600 .9rem/1.3 var(--font-display); color:var(--text); }
.il-form-title .il-ico { color:var(--scale); }
.il-form-cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem 1.1rem; }
.il-form-cols > div { display:flex; flex-direction:column; gap:.75rem; min-width:0; }
.il-f { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.il-f > small { font:600 .52rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.il-f .il-input { width:100%; }
.il-select i { margin-left:auto; padding-left:.6rem; font-style:normal; color:var(--faint); }
.il-opts { display:flex; flex-direction:column; gap:.45rem; padding:.6rem; border:1px solid var(--line-mock); border-radius:8px; background:rgba(255,255,255,.015); }
.il-opt-g { display:flex; flex-direction:column; gap:.2rem; }
.il-opt-g > span:first-child { font:600 .5rem/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.il-opt { padding:.28rem .5rem; border:1px solid transparent; border-radius:6px; font:.66rem/1.3 var(--font-mono); color:#c6cfd9; }
.il-opt.is-pick { border-color:var(--scale); background:rgba(232,191,90,.1); color:var(--text); }
.il-f-check { flex-direction:row; align-items:flex-start; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--line-mock); border-radius:8px; }
.il-f-check b { display:block; font:600 .72rem/1.3 var(--font-display); color:var(--text); }
.il-f-check em { display:block; margin-top:.15rem; font-style:normal; font-size:.62rem; line-height:1.45; color:var(--muted); }
.il-f-check.is-off { opacity:.6; }
.il-pick { display:flex; flex-wrap:wrap; gap:.35rem; padding:.45rem; border:1px solid var(--line-2); border-radius:8px; background:rgba(0,0,0,.2); }
.il-pchip { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:.25rem .5rem; border:1px solid var(--line-mock); border-radius:6px; font:.64rem/1.3 var(--font-mono); color:var(--muted); }
.il-pchip.is-on { border-color:var(--scale); background:rgba(232,191,90,.1); color:var(--text); }
.il-pchip em { font-style:normal; font-size:.56rem; color:var(--status-warn); }
.il-pchip em[data-tone="ok"] { color:var(--status-ok); }
.il-boxes { display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin-bottom:.4rem; padding:.55rem .7rem; border:1px solid var(--line-mock); border-radius:8px; }
.il-boxes-g { flex-basis:100%; display:flex; align-items:center; gap:.35rem; font:.56rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.il-boxes-g em { font-style:normal; color:var(--scale); }
.il-boxes.is-locked { opacity:.5; }
.il-cbox { display:inline-flex; align-items:center; gap:.4rem; font:.64rem/1.3 var(--font-mono); color:#c6cfd9; }
.il-f-note { flex-direction:row; align-items:flex-start; gap:.5rem; padding:.5rem .7rem; border:1px solid var(--line-mock); border-radius:8px; font:.62rem/1.45 var(--font-mono); color:var(--muted); }
.il-f-note[data-tone="warn"] { border-color:rgba(242,166,90,.4); color:var(--status-warn); }
.il-f-note[data-tone="gold"] { border-color:rgba(232,191,90,.45); color:var(--scale); }

/* -- compare -- */
.il-compare { display:flex; gap:.8rem; align-items:stretch; }
.il-vs { align-self:center; flex:none; font:600 .62rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.il-cmp { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.5rem; padding:.85rem .95rem; border:1px solid var(--line-mock); border-radius:10px; background:rgba(255,255,255,.02); }
.il-cmp.is-hl { border-color:rgba(232,191,90,.55); background:radial-gradient(circle at 100% 0, rgba(232,191,90,.12), transparent 60%), var(--panel-2); }
.il-cmp[data-tone="ok"]:not(.is-hl) { border-color:rgba(111,211,174,.3); }
.il-cmp[data-tone="warn"]:not(.is-hl) { border-color:rgba(242,166,90,.35); }
.il-cmp-h { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.il-cmp-h strong { font:600 .84rem/1.3 var(--font-display); color:var(--text); }
.il-cmp-h .il-ico { color:var(--scale); }
.il-cmp[data-tone="ok"] .il-cmp-h .il-ico { color:var(--status-ok); } .il-cmp[data-tone="warn"] .il-cmp-h .il-ico { color:var(--status-warn); }
.il-cmp-sub { font:.6rem/1.4 var(--font-mono); color:var(--faint); }
.il-cmp ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.il-cmp li { display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border:1px solid var(--line-mock); border-radius:7px; background:rgba(0,0,0,.15); }
.il-cmp li.is-muted { opacity:.45; }
.il-cmp-t { flex:1; min-width:0; font:.66rem/1.35 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.il-cmp-t em { display:block; font-style:normal; font-size:.58rem; color:var(--muted); }
.il-cmp-foot { margin-top:auto; padding-top:.2rem; font:.6rem/1.45 var(--font-mono); color:var(--muted); }
.il-dots { display:inline-flex; gap:3px; flex:none; }
.il-dots i { width:7px; height:7px; border-radius:2px; border:1px solid rgba(232,191,90,.5); background:rgba(232,191,90,calc(.08 + .8 * clamp(0, var(--il-p) - var(--i), 1))); }

/* -- grid -- */
.il-grid { display:grid; grid-template-columns:minmax(0,1.35fr) repeat(var(--cols), minmax(0,1fr)); border:1px solid var(--line-mock); border-radius:8px; overflow:hidden; }
.il-grid > span { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.25rem; min-width:0; padding:.5rem .55rem; border-bottom:1px solid var(--line-mock); border-left:1px solid var(--line-mock); }
.il-gh { font:600 .52rem/1.25 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:center; background:rgba(255,255,255,.02); }
.il-grid > .il-gh:first-child, .il-grid > .il-gr { border-left:0; }
.il-grid > .il-gr { flex-direction:column; align-items:flex-start; justify-content:center; gap:.1rem; font:600 .7rem/1.3 var(--font-display); color:var(--text); }
.il-gr em { font:.54rem/1.3 var(--font-mono); font-style:normal; color:var(--faint); }
.il-gc.is-y { color:var(--status-ok); } .il-gc.is-n, .il-gc.is-dash { color:var(--faint); }
.il-gc.is-t { font:.6rem/1.3 var(--font-mono); color:var(--muted); }
.il-gc .hm-badge { white-space:normal; text-align:center; }

/* -- checklist -- */
.il-list { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.il-list.is-cols { grid-template-columns:repeat(2, minmax(0,1fr)); }
.il-list > li { display:flex; align-items:center; gap:.6rem; min-width:0; padding:.5rem .7rem; border:1px solid var(--line-mock); border-radius:8px; background:rgba(255,255,255,.02); }
.il-li-ico { display:grid; place-items:center; width:24px; height:24px; flex:none; border:1px solid var(--line-2); border-radius:50%; color:var(--muted); }
.il-li-ico .il-ico { width:12px; height:12px; }
.il-list > li[data-tone="ok"] .il-li-ico { color:var(--status-ok); border-color:rgba(111,211,174,.4); background:rgba(111,211,174,.08); }
.il-list > li[data-tone="warn"] .il-li-ico { color:var(--status-warn); border-color:rgba(242,166,90,.45); background:rgba(242,166,90,.08); }
.il-list > li[data-tone="bad"] .il-li-ico { color:var(--status-bad); border-color:rgba(251,129,150,.45); background:rgba(251,129,150,.08); }
.il-list > li[data-tone="gold"] .il-li-ico { color:var(--scale); border-color:rgba(232,191,90,.45); background:rgba(232,191,90,.08); }
.il-li-t { flex:1; min-width:0; }
.il-li-t b { display:block; font:600 .72rem/1.3 var(--font-display); color:var(--text); }
.il-li-t em { display:block; font:.6rem/1.4 var(--font-mono); font-style:normal; color:var(--muted); }
.il-li-to { display:inline-flex; align-items:center; gap:.3rem; font:.58rem/1.3 var(--font-mono); color:var(--scale); white-space:nowrap; }
.il-li-to .il-ico { width:11px; height:11px; }

/* -- schedule -- */
.il-sched { display:flex; flex-direction:column; gap:.9rem; }
.il-days { display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr)); gap:.4rem; }
.il-day { display:flex; flex-direction:column; align-items:center; gap:.3rem; min-height:76px; padding:.6rem .3rem; border:1px solid var(--line-mock); border-radius:8px; background:rgba(255,255,255,.02); text-align:center; }
.il-day small { font:600 .54rem/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.il-day .il-ico { width:16px; height:16px; color:var(--scale); }
.il-day em { font:.54rem/1.3 var(--font-mono); font-style:normal; color:var(--scale); }
.il-day.is-run { border-color:rgba(232,191,90,.5); background:rgba(232,191,90,.05); }
.il-day.is-skip { border-color:rgba(242,166,90,.35); }
.il-day.is-skip .il-ico, .il-day.is-skip em { color:var(--status-warn); }
.il-sched-out { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:.5rem; }
.il-out { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .75rem; border:1px solid var(--line-mock); border-radius:8px; }
.il-out .il-ico { width:18px; height:18px; color:var(--scale); }
.il-out b { display:block; font:600 .72rem/1.3 var(--font-display); color:var(--text); }
.il-out em { display:block; font:.6rem/1.4 var(--font-mono); font-style:normal; color:var(--muted); }
.il-out[data-tone="ok"] .il-ico { color:var(--status-ok); }
.il-out[data-tone="warn"] .il-ico { color:var(--status-warn); }
.il-out[data-tone="bad"] { border-color:rgba(251,129,150,.35); } .il-out[data-tone="bad"] .il-ico { color:var(--status-bad); }
.il-out[data-tone="gold"] { border-color:rgba(232,191,90,.45); }

/* -- series navigation -- */
.article-body .sec--seriesNav .sec-inner { max-width:800px; }
.il-series { padding:1.4rem 1.5rem; border:1px solid var(--line-2); border-radius:var(--radius-lg); background:radial-gradient(circle at 0 0, rgba(232,191,90,.1), transparent 50%), var(--panel); }
.il-series header { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin-bottom:1rem; }
.il-series .kicker { flex-basis:100%; margin:0; }
.sec .il-series .il-series-title { margin:0; font:600 1.3rem/1.2 var(--font-display); letter-spacing:-.01em; color:var(--text); }
.il-series header > span { font:.6rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.il-series ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.3rem .6rem; }
.il-series li { display:flex; align-items:baseline; gap:.6rem; padding:.48rem .65rem; border:1px solid transparent; border-radius:8px; font-size:.86rem; line-height:1.35; color:var(--muted); transition:border-color .15s, background .15s; }
.il-series li a { display:contents; color:var(--text); }
.il-series li:has(a):hover { border-color:var(--line-2); background:rgba(255,255,255,.02); }
.il-series li span { font:.58rem/1.6 var(--font-mono); color:var(--faint); }
.il-series li b { font-weight:500; }
.il-series li em { margin-left:auto; padding-left:.5rem; font:.52rem/1.8 var(--font-mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--scale); white-space:nowrap; }
.il-series li.is-here { border-color:rgba(232,191,90,.5); background:rgba(232,191,90,.08); }
.il-series li.is-here span { color:var(--scale); }

/* -- narrow windows -- */
@container il (max-width: 820px) {
  .il-flow { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .il-step + .il-step::before { display:none; }
}
@container il (max-width: 620px) {
  .il-body { padding:.9rem; }
  .il-foot { margin:.9rem -.9rem -.9rem; padding:.7rem .9rem; }
  .il-demo { display:none; }
  .il-kpis { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .il-row--head { display:none; }
  .il-row, .il-table.has-check .il-row { --rowmax:9rem; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"scope type" "name name" "usage change"; gap:.3rem .6rem; padding:.6rem .7rem; }
  .il-table.has-check .il-row { padding-left:2rem; }
  .il-table.has-check .il-row > .il-box { position:absolute; left:.7rem; top:.68rem; }
  .il-c-scope { grid-area:scope; } .il-c-type { grid-area:type; justify-self:end; } .il-c-name { grid-area:name; } .il-c-usage { grid-area:usage; } .il-c-change { grid-area:change; justify-self:end; }
  .il-tip { position:static; margin-top:.4rem; grid-column:1 / -1; }
  .il-fan { display:block; }
  .il-wires, .il-port { display:none; }
  .il-src { margin-bottom:.8rem; }
  .il-targets { margin-left:14px; padding-left:12px; border-left:1px solid rgba(232,191,90,.35); }
  .il-target::before { left:-17px; width:12px; height:1px; margin-top:0; border:0; border-radius:0; background:rgba(232,191,90,.4); }
  .il-flow { grid-template-columns:minmax(0,1fr); }
  .il-graph { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.45rem; aspect-ratio:auto; min-height:0; }
  .il-edges { display:none; }
  .il-node .hm-badge { white-space:normal; }
  .il-targets { grid-auto-rows:auto; }
  .il-node { position:relative; left:auto !important; top:auto !important; translate:none; width:auto; max-width:none; order:var(--o); }
  .il-node[data-first] { grid-column-start:1; margin-top:1.1rem; }
  .il-node[data-first]::before { content:"↓"; position:absolute; left:.6rem; top:-1.05rem; font:.7rem/1 var(--font-mono); color:var(--scale); }
  .il-form-cols { grid-template-columns:minmax(0,1fr); }
  .il-compare { flex-direction:column; }
  .il-vs { align-self:flex-start; }
  .il-list.is-cols { grid-template-columns:minmax(0,1fr); }
  .il-grid > span { padding:.4rem .3rem; }
  .il-grid > .il-gr { font-size:.6rem; }
  .il-gh { font-size:.44rem; letter-spacing:.04em; }
}
@media (max-width: 620px) { .il-series ol { grid-template-columns:minmax(0,1fr); } .il-series { padding:1.1rem; } }

/* -- motion: data-a="<kind>-<phase>" -- */
.il [data-a] { animation-duration:var(--d); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.7,.3,1); animation-delay:calc(var(--i, 0) * .12s); }
.il [data-a="in-a"] { animation-name:il-in-a; } .il [data-a="in-b"] { animation-name:il-in-b; } .il [data-a="in-c"] { animation-name:il-in-c; }
.il [data-a="pop-a"] { animation-name:il-pop-a; } .il [data-a="pop-b"] { animation-name:il-pop-b; } .il [data-a="pop-c"] { animation-name:il-pop-c; }
.il [data-a="out-b"] { animation-name:il-out-b; } .il [data-a="dim-b"] { animation-name:il-dim-b; }
.il [data-a="glow-a"] { animation-name:il-glow-a; } .il [data-a="glow-b"] { animation-name:il-glow-b; } .il [data-a="glow-c"] { animation-name:il-glow-c; }
.il .hm-fake-btn[data-a] { animation-name:il-btn; }
.il [data-a="strike-b"] { animation-name:il-strike-b; } .il [data-a="strike-c"] { animation-name:il-strike-c; }
.il [data-a="hide-b"] { animation-name:il-hide-b; } .il [data-a="hide-c"] { animation-name:il-hide-c; }
.il [data-a="ping-a"] { animation-name:il-ping-a; } .il [data-a="ping-b"] { animation-name:il-ping-b; } .il [data-a="ping-c"] { animation-name:il-ping-c; }
.il [data-a="lit-b"] { animation-name:il-lit-b; animation-delay:calc(var(--i, 0) * .13s); }
.il [data-a^="type-"] { animation-timing-function:steps(var(--n), end); animation-delay:0s; border-right:1px solid transparent; }
.il [data-a="type-a"] { animation-name:il-type-a; } .il [data-a="type-b"] { animation-name:il-type-b; } .il [data-a="type-c"] { animation-name:il-type-c; }
.il [data-a="sweep"] { animation-name:il-sweep; animation-timing-function:ease; animation-delay:calc(var(--i) * var(--d) / var(--n)); }
.il [data-a="drop"] { animation-name:il-drop; animation-delay:calc(var(--i) * var(--d) / var(--n) + var(--k, 0) * .15s); }
.il [data-a="blink"] { animation:il-blink 2.4s ease-in-out infinite; }
.il [data-a="progress"] { animation:il-progress var(--d) linear infinite; }
.il.is-idle [data-a], .il.is-idle .il-pulse { animation-play-state:paused; }

@keyframes il-in-a { 0% { opacity:0; transform:translateY(6px); } 7%, 90% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes il-in-b { 0%, 30% { opacity:0; transform:translateY(6px); } 37%, 90% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes il-in-c { 0%, 58% { opacity:0; transform:translateY(6px); } 65%, 90% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes il-pop-a { 0% { opacity:0; transform:scale(.7); } 7%, 90% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes il-pop-b { 0%, 32% { opacity:0; transform:scale(.7); } 38%, 90% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes il-pop-c { 0%, 60% { opacity:0; transform:scale(.7); } 66%, 90% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes il-out-b { 0%, 30% { max-height:var(--rowmax, 5rem); opacity:1; padding-block:.5rem; border-bottom-width:1px; } 38%, 90% { max-height:0; opacity:0; padding-block:0; border-bottom-width:0; } 97%, 100% { max-height:var(--rowmax, 5rem); opacity:1; padding-block:.5rem; border-bottom-width:1px; } }
@keyframes il-dim-b { 0%, 30% { opacity:1; } 37%, 90% { opacity:.38; } 97%, 100% { opacity:1; } }
@keyframes il-glow-a { 0% { border-color:var(--line-mock); background-color:rgba(255,255,255,.02); box-shadow:none; } 6%, 90% { border-color:var(--scale); background-color:rgba(232,191,90,.1); box-shadow:0 0 18px -8px var(--scale); } 97%, 100% { border-color:var(--line-mock); background-color:rgba(255,255,255,.02); box-shadow:none; } }
@keyframes il-glow-b { 0%, 30% { border-color:var(--line-mock); background-color:rgba(255,255,255,.02); box-shadow:none; } 36%, 90% { border-color:var(--scale); background-color:rgba(232,191,90,.1); box-shadow:0 0 18px -8px var(--scale); } 97%, 100% { border-color:var(--line-mock); background-color:rgba(255,255,255,.02); box-shadow:none; } }
@keyframes il-glow-c { 0%, 58% { border-color:var(--line-mock); background-color:rgba(255,255,255,.02); box-shadow:none; } 64%, 90% { border-color:var(--scale); background-color:rgba(232,191,90,.1); box-shadow:0 0 18px -8px var(--scale); } 97%, 100% { border-color:var(--line-mock); background-color:rgba(255,255,255,.02); box-shadow:none; } }
@keyframes il-btn { 0%, 60% { filter:saturate(.35) brightness(.72); box-shadow:none; } 66%, 90% { filter:none; box-shadow:0 0 26px -6px var(--scale); } 97%, 100% { filter:saturate(.35) brightness(.72); box-shadow:none; } }
@keyframes il-strike-b { 0%, 30% { text-decoration-color:transparent; color:var(--text); } 36%, 90% { text-decoration-color:rgba(251,129,150,.8); color:var(--muted); } 97%, 100% { text-decoration-color:transparent; color:var(--text); } }
@keyframes il-strike-c { 0%, 58% { text-decoration-color:transparent; color:var(--text); } 64%, 90% { text-decoration-color:rgba(251,129,150,.8); color:var(--muted); } 97%, 100% { text-decoration-color:transparent; color:var(--text); } }
@keyframes il-hide-b { 0%, 31% { opacity:1; } 35%, 92% { opacity:0; } 97%, 100% { opacity:1; } }
@keyframes il-hide-c { 0%, 59% { opacity:1; } 63%, 92% { opacity:0; } 97%, 100% { opacity:1; } }
@keyframes il-ping-a { 0% { opacity:.8; transform:scale(.4); } 8%, 100% { opacity:0; transform:scale(2.4); } }
@keyframes il-ping-b { 0%, 31% { opacity:0; transform:scale(.4); } 32% { opacity:.8; transform:scale(.4); } 40%, 100% { opacity:0; transform:scale(2.4); } }
@keyframes il-ping-c { 0%, 59% { opacity:0; transform:scale(.4); } 60% { opacity:.8; transform:scale(.4); } 68%, 100% { opacity:0; transform:scale(2.4); } }
@keyframes il-lit-b { 0%, 30% { border-color:var(--line-mock); box-shadow:none; } 36%, 90% { border-color:rgba(232,191,90,.75); box-shadow:0 0 20px -8px var(--scale); } 97%, 100% { border-color:var(--line-mock); box-shadow:none; } }
@keyframes il-type-a { 0%, 3% { max-width:0; border-right-color:var(--scale); } 22% { max-width:calc(var(--n) * 1ch + 1ch); border-right-color:var(--scale); } 24%, 90% { max-width:calc(var(--n) * 1ch + 1ch); border-right-color:transparent; } 96%, 100% { max-width:0; } }
@keyframes il-type-b { 0%, 28% { max-width:0; border-right-color:var(--scale); } 46% { max-width:calc(var(--n) * 1ch + 1ch); border-right-color:var(--scale); } 48%, 90% { max-width:calc(var(--n) * 1ch + 1ch); border-right-color:transparent; } 96%, 100% { max-width:0; } }
@keyframes il-type-c { 0%, 56% { max-width:0; border-right-color:var(--scale); } 72% { max-width:calc(var(--n) * 1ch + 1ch); border-right-color:var(--scale); } 74%, 90% { max-width:calc(var(--n) * 1ch + 1ch); border-right-color:transparent; } 96%, 100% { max-width:0; } }
@keyframes il-sweep { 0% { box-shadow:0 0 0 0 transparent; transform:none; } 5%, 17% { box-shadow:0 0 0 1px rgba(232,191,90,.75), 0 0 28px -10px var(--scale); transform:translateY(-2px); } 25%, 100% { box-shadow:0 0 0 0 transparent; transform:none; } }
@keyframes il-drop { 0% { opacity:0; transform:translateY(-4px); } 6%, 85% { opacity:1; transform:none; } 95%, 100% { opacity:0; transform:none; } }
@keyframes il-blink { 50% { opacity:.5; } }
@keyframes il-progress { 0% { --il-p:0; } 88%, 100% { --il-p:var(--n); } }

@media (prefers-reduced-motion: reduce) {
  .il [data-a] { animation:none !important; }
  .il .il-pulse { display:none; }
  .il [data-a="progress"] { --il-p:999; }
}
.sec .il .il-cmp-sub { font-size:.6rem; }
.sec .il .il-rv-title p { font-size:.68rem; }

/* ============================================================
   ACADEMY HUB — the "stackHub" section (build/academy-render.js).
   One tab per Ultimate Stack: pillar card first, then the child
   guides as a numbered path grouped by stage. Without JS every
   panel shows, stacked; motion is additive and off under
   prefers-reduced-motion.
   ============================================================ */
.sec--stackHub { --c:var(--gtm); }
.sec--stackHub .sec-inner { max-width:1240px; }
[data-stack="ga4"] { --c:var(--ga4); } [data-stack="qa"] { --c:var(--qa); } [data-stack="sgtm"] { --c:#60a5fa; } [data-stack="gtm"] { --c:var(--gtm); }

/* hero */
.ah-hero { position:relative; overflow-x:clip; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); align-items:center; gap:clamp(2rem,6vw,6rem); padding-block:clamp(4rem,9vw,7.5rem) clamp(2.5rem,5vw,4rem); }
.ah-hero::before { content:""; position:absolute; inset:0 -8vw; z-index:-1; background:radial-gradient(circle at 78% 45%, rgba(232,191,90,.12), transparent 26%), radial-gradient(circle at 70% 60%, rgba(93,202,165,.08), transparent 30%); pointer-events:none; }
.ah-hero h1 { max-width:12ch; margin:0; font:500 clamp(3rem,6.4vw,6rem)/.95 var(--font-display); letter-spacing:-.07em; }
.ah-hero h1 .glow { display:block; color:var(--gold); text-shadow:0 0 34px rgba(215,181,109,.42); }
.ah-hero .lede { max-width:52ch; margin:1.6rem 0 0; color:#aeb7c4; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.75; }
.ah-stats { display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 0; }
.ah-stats span { padding:.45rem .7rem; border:1px solid #ffffff18; border-radius:8px; font:.64rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:#909ba9; }
.ah-stats b { margin-right:.35rem; color:var(--gold-hi); font:600 .9rem var(--font-display); }

/* hero art: four stacked slabs, the live one lit */
.ah-tower { position:relative; display:grid; gap:14px; justify-self:end; width:min(100%,380px); perspective:900px; }
.ah-slab { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px; padding:0 1.2rem; border:1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius:16px; background:linear-gradient(100deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255,255,255,.015)); margin-left:calc(var(--i) * 14px); transform:rotateX(18deg); animation:ah-float 6s ease-in-out calc(var(--i) * -1.4s) infinite; opacity:.5; }
.ah-slab span { font:600 .95rem var(--font-display); color:var(--text); }
.ah-slab em { font:600 .58rem var(--font-mono); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.ah-slab.is-live { opacity:1; border-color:color-mix(in srgb, var(--c) 75%, transparent); background:radial-gradient(circle at 0 50%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%), #0d1117; box-shadow:0 0 60px -14px var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.ah-slab.is-live::after { content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%) no-repeat; background-size:250% 100%; animation:ah-sheen 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes ah-float { 50% { transform:rotateX(18deg) translateY(-6px); } }
@keyframes ah-sheen { 0%, 40% { background-position:150% 0; } 80%, 100% { background-position:-60% 0; } }

/* tabs */
.ah-tabs { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:2rem; }
.ah-tab { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; padding:1rem 1.1rem; border:1px solid var(--line-soft); border-radius:14px; background:var(--panel); color:var(--muted); text-align:left; cursor:pointer; overflow:hidden; transition:border-color .2s, background .2s, transform .2s; }
.ah-tab:hover { border-color:color-mix(in srgb, var(--c) 45%, transparent); transform:translateY(-2px); }
.ah-tab:focus-visible { outline:2px solid var(--scale); outline-offset:3px; }
.ah-tab-k { font:600 .6rem var(--font-mono); letter-spacing:.14em; color:var(--c); }
.ah-tab strong { font:600 1rem/1.25 var(--font-display); color:var(--text); }
.ah-tab-s { font:.66rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.ah-tab.is-soon .ah-tab-s { padding:.12rem .45rem; border:1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius:999px; color:var(--c); font-weight:600; font-size:.56rem; }
.ah-tab.is-soon { opacity:.72; }
.ah-tab[aria-selected="true"] { opacity:1; border-color:color-mix(in srgb, var(--c) 70%, transparent); background:radial-gradient(circle at 0 0, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--panel-2); }
.ah-tab[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--c), transparent); animation:ah-scan 3s linear infinite; }
@keyframes ah-scan { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.ah-set:not(.is-ready) .ah-tabs { display:none; }
.ah-set:not(.is-ready) .ah-panel + .ah-panel { margin-top:4rem; }
.ah-set.is-ready .ah-panel[hidden] { display:none; }

/* panel */
.ah-panel { outline:none; }
.ah-panel-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 2rem; margin-bottom:1.6rem; }
.sec .ah-panel-head h2 { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:0; font:500 clamp(1.8rem,3vw,2.6rem)/1.05 var(--font-display); letter-spacing:-.045em; }
.ah-panel-head p { max-width:52ch; margin:0; color:var(--muted); }
.ah-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(1.4rem,3vw,2.4rem); align-items:start; }

/* pillar card */
.ah-pillar { position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:.9rem; padding:clamp(1.4rem,2.4vw,2rem); border:1px solid rgba(232,191,90,.55); border-radius:22px; background:radial-gradient(circle at 100% 0, rgba(232,191,90,.16), transparent 55%), radial-gradient(circle at 0 100%, color-mix(in srgb, var(--c) 12%, transparent), transparent 50%), #0c0f15; box-shadow:0 40px 90px -50px #000, 0 0 70px -40px rgba(232,191,90,.45); }
.ah-pillar-k { display:flex; align-items:center; gap:.5rem; margin:0; font:600 .62rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.ah-dot { width:8px; height:8px; border-radius:50%; background:var(--gold-hi); box-shadow:0 0 0 0 rgba(244,212,136,.6); animation:ah-ping 2.4s ease-out infinite; }
@keyframes ah-ping { 0% { box-shadow:0 0 0 0 rgba(244,212,136,.6); } 70%, 100% { box-shadow:0 0 0 10px rgba(244,212,136,0); } }
.sec .ah-pillar h3 { margin:0; font:600 clamp(1.4rem,2.2vw,1.9rem)/1.12 var(--font-display); letter-spacing:-.035em; }
.ah-pillar h3 a { color:var(--text); }
.ah-pillar h3 a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.ah-pillar h3 a:hover { color:var(--gold-hi); }
.ah-pillar-d { margin:0; color:var(--muted); font-size:.92rem; line-height:1.65; }
.ah-pillar-art { position:relative; margin-top:.3rem; }
.ah-pillar-art .il-win { box-shadow:none; }
.ah-pillar-art .il-body { padding:.8rem; }
.ah-pillar-art .il-src-name { font-size:.7rem; }
.ah-pillar-btn { align-self:flex-start; position:relative; z-index:1; pointer-events:none; }

/* learning path */
.ah-path { position:relative; padding-left:1.7rem; }
.ah-path::before { content:""; position:absolute; left:.45rem; top:.6rem; bottom:.6rem; width:1px; background:linear-gradient(var(--line-2), var(--line-2) 92%, transparent); }
.ah-path::after { content:""; position:absolute; left:calc(.45rem - 1px); top:0; width:3px; height:90px; border-radius:3px; background:linear-gradient(transparent, var(--gold-hi), transparent); animation:ah-beam 7s linear infinite; }
@keyframes ah-beam { from { top:0; } to { top:calc(100% - 90px); } }
.ah-stage + .ah-stage { margin-top:1.4rem; }
.sec .ah-stage-h { margin:0 0 .6rem -1.7rem; font:600 .62rem/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); }
.ah-stage-h span { display:inline-block; padding:.35rem .7rem; border:1px solid var(--line-2); border-radius:999px; background:var(--bg); }
.ah-guides { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.sec .ah-guides li { margin:0; }
.ah-guide { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--line-soft); border-radius:12px; background:var(--panel); color:var(--text); transition:border-color .2s, background .2s, transform .2s; }
.ah-guide::before { content:""; position:absolute; left:calc(-1.25rem - 4px); top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--bg); border:1px solid var(--c); transition:background .2s; }
a.ah-guide:hover { border-color:color-mix(in srgb, var(--c) 55%, transparent); background:linear-gradient(100deg, color-mix(in srgb, var(--c) 9%, transparent), var(--panel)); transform:translateX(4px); }
a.ah-guide:hover::before { background:var(--c); box-shadow:0 0 10px var(--c); }
.ah-guide-n { font:600 .64rem var(--font-mono); color:var(--faint); }
.ah-guide-t b { display:block; font:500 .98rem/1.3 var(--font-display); }
.ah-guide-t em { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.15rem; font-style:normal; font-size:.78rem; line-height:1.45; color:var(--muted); }
.ah-guide-f { font:600 .54rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.ah-set.is-ready .ah-panel:not([hidden]) .ah-guides li { animation:ah-rise .5s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 45ms) both; }
@keyframes ah-rise { from { opacity:0; transform:translateY(8px); } }

/* coming soon */
.ah-soon { display:inline-block; padding:.3rem .65rem; border:1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius:999px; font:600 .6rem/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--c); vertical-align:middle; }
.ah-panel--soon .ah-pillar { border-color:color-mix(in srgb, var(--c) 40%, transparent); background:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c) 12%, transparent), transparent 55%), #0c0f15; box-shadow:none; position:relative; top:auto; }
.ah-skel i, .ah-skel-chip { display:block; height:10px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size:200% 100%; animation:ah-shimmer 1.8s linear infinite; }
.ah-skel i.h { height:20px; } .w40 { width:40%; } .w60 { width:60%; } .w70 { width:70%; } .w80 { width:80%; } .w90 { width:90%; } .w100 { width:100%; }
.ah-skel-art { height:140px; border:1px dashed color-mix(in srgb, var(--c) 40%, transparent); border-radius:14px; background:repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--c) 6%, transparent) 12px 24px); }
.ah-skel-chip { width:90px; height:22px; margin:0 0 .6rem -1.7rem; border-radius:999px; }
.ah-skel-row { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; margin-bottom:.45rem; }
.ah-skel-row i { display:block; height:9px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size:200% 100%; animation:ah-shimmer 1.8s linear infinite; }
@keyframes ah-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.ah-soon-note { max-width:64ch; margin:1.4rem 0 0; font:.72rem/1.6 var(--font-mono); color:var(--muted); }
.ah-panel--soon .ah-path::after { animation-duration:3.5s; background:linear-gradient(transparent, var(--c), transparent); }

@media (max-width: 980px) {
  .ah-hero { grid-template-columns:minmax(0,1fr); padding-top:3.5rem; }
  .ah-tower { width:min(100%,340px); justify-self:start; }
  .ah-tabs { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ah-grid { grid-template-columns:minmax(0,1fr); }
  .ah-pillar { position:relative; top:auto; }
}
@media (max-width: 560px) {
  .sec--stackHub .sec-inner { padding-inline:var(--gutter-phone, 16px); }
  .ah-hero h1 { font-size:clamp(2.5rem,12vw,3.2rem); }
  .ah-slab { height:56px; transform:none; animation:none; }
  .ah-tab { padding:.8rem; }
  .ah-guide { grid-template-columns:auto minmax(0,1fr); }
  .ah-guide-f { display:none; }
}
/* the pillar card is narrower than the scene's phone breakpoint: keep the wired fan */
@container il (min-width: 300px) {
  .ah-pillar-art .il-fan { display:grid; }
  .ah-pillar-art .il-wires, .ah-pillar-art .il-port { display:block; }
  .ah-pillar-art .il-src { margin-bottom:0; }
  .ah-pillar-art .il-targets { margin-left:0; padding-left:0; border-left:0; grid-auto-rows:1fr; }
  .ah-pillar-art .il-target::before { left:-4px; width:7px; height:7px; margin-top:-3.5px; border:1px solid var(--scale); border-radius:50%; background:var(--surface-mock); }
}
@media (prefers-reduced-motion: reduce) {
  .ah-slab, .ah-slab.is-live::after, .ah-tab::after, .ah-dot, .ah-path::after, .ah-guides li, .ah-skel i, .ah-skel-chip, .ah-skel-row i { animation:none !important; }
}

/* -- bars (build/illustrations.js "bars" primitive) -- */
.il-src[data-tone="ga4"] { --p:var(--ga4); }
.il-bars-set { display:flex; flex-direction:column; gap:1rem; }
.il-bars-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; margin-bottom:.45rem; }
.il-bars-h b { font:600 .74rem/1.3 var(--font-display); color:var(--text); }
.il-bars-h em { font:.6rem/1.3 var(--font-mono); font-style:normal; color:var(--muted); }
.il-bars { position:relative; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); align-items:end; gap:3px; height:110px; padding:18px 6px 0; border:1px solid var(--line-mock); border-radius:8px; background:linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 25%; }
.il-bars i { display:block; height:var(--h); min-height:2px; border-radius:3px 3px 0 0; background:linear-gradient(180deg, var(--ga4), color-mix(in srgb, var(--ga4) 35%, transparent)); transform-origin:bottom; }
.il-bars i[data-tone="bad"] { background:linear-gradient(180deg, var(--status-bad), rgba(251,129,150,.25)); }
.il-bars i[data-tone="warn"] { background:linear-gradient(180deg, var(--status-warn), rgba(242,166,90,.25)); }
.il-bars i[data-tone="ok"] { background:linear-gradient(180deg, var(--status-ok), rgba(111,211,174,.25)); }
.il-bars-flag { position:absolute; top:3px; padding:.08rem .35rem; border-radius:4px; font:600 .5rem/1.3 var(--font-mono); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,.55); border-top:2px solid currentColor; }
.il-bars-flag[data-tone="bad"] { color:var(--status-bad); } .il-bars-flag[data-tone="warn"] { color:var(--status-warn); } .il-bars-flag[data-tone="ok"] { color:var(--status-ok); }
.il-bars-line { position:absolute; left:6px; right:6px; border-top:1px dashed rgba(232,191,90,.6); }
.il-bars-line em { position:absolute; right:0; top:-1.1em; font:.5rem var(--font-mono); font-style:normal; color:var(--gold); }
.il-bars-axis { display:flex; justify-content:space-between; margin-top:.35rem; font:.54rem var(--font-mono); color:var(--faint); }
.il [data-a="grow"] { animation-name:il-grow; animation-delay:calc(var(--i, 0) * 45ms); }
@keyframes il-grow { 0% { transform:scaleY(0); } 10%, 92% { transform:scaleY(1); } 100% { transform:scaleY(0); } }