/* ============================================================================
   hero-demo.css — "The 92-Second Audit": the long-form animated product film
   that replaces the fake play button in the homepage hero (#demo).

   WHAT THIS IS
   The page has always advertised a 92-second product walkthrough — the caption
   under the letterbox says so — and there has never been a video behind it.
   This is that walkthrough, built as live DOM rather than a screen recording:
   crisp at any size, themed by tokens, translatable, and a few KB instead of
   several MB.

   THE STAGE IS FIXED, NOT RESPONSIVE
   The film is authored on a 1600x900 stage and SCALED to fit the letterbox by
   a single custom property (--hd-fit). It never reflows. That is what lets the
   director address elements by authored coordinates and lets the camera frame
   them by arithmetic instead of measurement guesswork.

   IT FOLLOWS THE PAGE THEME
   The screen used to be pure black in both themes, which forced the film to pin
   data-theme="dark" on itself. The surface is themed now, so the film inherits
   the page like every other section and every colour below is a plain token. If
   something reads wrong in one theme, fix the token choice — do not add a
   [data-theme] override, which is the habit that made the old frame awkward.

   IT MUST NOT TOUCH THE TEN TIMELINE DEMOS
   css/chapter-demos.css and js/chapter-demos.js are not modified. Every rule
   here is scoped under .hd-stage or .hd-surf. Critically, NO element in the
   film carries class="cd" — chapter-demos.js enrols every .cd on the page into
   its own 5.2s replay loop at script eval, which would shred this timeline.
   Leaf .cd-* classes are ancestor-agnostic and are reused freely.
   ========================================================================== */

.hd-root {
  /* One easing vocabulary, shared with the director so JS and CSS motion match
     exactly. There is no fifth curve anywhere in the film. */
  --hd-settle: cubic-bezier(0.16, 0.84, 0.28, 1);
  --hd-push: cubic-bezier(0.32, 0.02, 0.18, 1);
  --hd-pull: cubic-bezier(0.22, 0.68, 0.14, 1);
  --hd-lin: cubic-bezier(0.4, 0, 0.2, 1);
  --hd-stagger: 65ms;
  --hd-dim: 0.3;
  --hd-fit: 1;

  position: absolute;
  inset: 0;
  z-index: 1;
  /* Stops the film's internal z-indexes leaking into the letterbox's stacking
     context, where they would fight the caption and the REC bookend. */
  isolation: isolate;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  pointer-events: none;
}

.hd-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 900px;
  /* cover, not contain: the letterbox inner is not exactly 16/9, and contain
     would leave gutters. All content lives inside a 10px safe margin. */
  transform: translate(-50%, -50%) scale(var(--hd-fit));
  transform-origin: 50% 50%;
}

.hd-cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* The entire depth budget, one element. Moves at 0.35x net against the camera
   so a push-in has parallax without anything looking detached. */
.hd-parallax {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 8%, rgba(124, 92, 252, 0.20), transparent 58%),
    radial-gradient(ellipse at 84% 92%, rgba(217, 70, 168, 0.14), transparent 55%);
}

.hd-shell {
  position: absolute;
  inset: 0;
  display: flex;
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 100%);
}

/* ---- THE APP SHELL, MIRRORED FROM THE PRODUCT --------------------------
   Every value below is taken from css/app.css and dashboard.html rather than
   designed here: the 92 / 248 / 1fr column split, the two sidebar surfaces and
   their gradients, the icon rail's stacked item, the nav item's padding and
   radius, the active item's brand-gradient pill and glow, the account block,
   the topbar's icon buttons, search and credits chip.

   The point of the film is that a viewer recognises the product. An invented
   rail that merely looks tidy defeats that, so this is a copy, not a homage.
   app.css is a design-lint target and is not edited; these are mirrors. */

.hd-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 92px 248px 1fr;
  background: var(--bg);
}

/* -- narrow icon rail (.rail) -- */
.hd-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px;
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.hd-rlogo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  color: var(--purple-bright);
}
.hd-rlogo svg { width: 26px; height: 26px; }
.hd-ritem {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  color: var(--text-3);
  text-align: center;
}
.hd-ritem .hd-ic { width: 20px; height: 20px; }
.hd-rlabel { font-size: 9.5px; font-weight: 600; line-height: 1.15; }
/* The product's active rail item is a brand-gradient tile with a glow, not a
   tinted chip. */
.hd-ritem.is-active {
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  color: var(--on-brand);
}

/* -- section panel (.side) -- */
.hd-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 14px;
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  min-height: 0;
}
.hd-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.hd-wordmark {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
}
.hd-wv { color: var(--magenta-bright); }
.hd-panelhead {
  position: relative;
  height: 34px;
  padding: 2px 8px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
/* Section titles ship as siblings toggled by class, so every one stays visible
   to the i18n extractor. */
.hd-secname {
  position: absolute;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.2s var(--hd-lin);
}
.hd-secname.is-on { opacity: 1; }

/* The real panel scrolls its tool list; here it clips, so the account block
   below it stays pinned instead of being pushed out of the frame. */
.hd-navwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hd-navlist {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: 3px;
}
.hd-navlist.is-on { display: flex; }
.hd-navitem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-xs);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s var(--hd-lin), color 0.15s var(--hd-lin);
}
.hd-navitem .hd-ic { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.9; }
.hd-tx { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.hd-navitem.is-hover { background: rgba(124, 92, 252, 0.08); color: var(--text-2); }
.hd-navitem.is-active {
  background: linear-gradient(135deg, rgba(124, 92, 252, 0.9), rgba(217, 70, 168, 0.85));
  color: var(--on-brand);
}

.hd-sidespace { display: none; }
.hd-acct {
  display: flex;
  flex: none;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(124, 92, 252, 0.06);
}
.hd-av {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  display: grid;
  place-items: center;
  color: var(--on-brand);
  font-size: 13px;
  font-weight: 800;
}
.hd-acctmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-email { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.hd-plan {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--purple-bright);
}

/* -- topbar (.topbar) -- */
.hd-main { display: flex; flex-direction: column; min-width: 0; }
.hd-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  flex: none;
  border-bottom: 1px solid var(--hairline);
}
.hd-icbtn {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: var(--card);
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.hd-icbtn svg { width: 18px; height: 18px; }
.hd-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
}
.hd-search svg { width: 16px; height: 16px; flex: none; }
.hd-credits {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  flex: none;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(124, 92, 252, 0.06);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.hd-pro {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--gradient);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

/* ---- Surfaces ---------------------------------------------------------- */

.hd-viewport { position: relative; flex: 1; min-height: 0; }

.hd-surf {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  padding: 36px 0 40px;
  opacity: 1;
}
.hd-surf.is-on { display: flex; }
.hd-panel {
  width: 1040px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================================
   THE MIRROR BLOCK
   chapter-demos.css gates all its motion on `.cd.is-live`. The film's surfaces
   are `.hd-surf`, never `.cd`, so every activator has to be restated here or
   nothing inside a surface ever animates.
   ========================================================================== */

.hd-surf [data-cd-in] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc(var(--i, 0) * var(--hd-stagger));
}
.hd-surf.is-live [data-cd-in] { opacity: 1; transform: none; }

.hd-surf.is-live .cd-engine .fill { width: var(--w, 0%); }
.hd-surf.is-live .cd-h2h .bar i { width: var(--w, 0%); }
.hd-surf.is-live .cd-bars .col i { height: var(--h, 0%); }
.hd-surf.is-live .cd-ad .track i { width: var(--w, 0%); }
.hd-surf.is-live .cd-spark path.area { opacity: 1; }
.hd-surf.is-live .cd-spark .head { opacity: 1; animation: cdBeat 2s ease-in-out 1.8s infinite; }
.hd-surf.is-live .cd-dot { animation: cdPulse 2.4s ease-out infinite; }
.hd-surf.is-live .cd-engine .fill::after,
.hd-surf.is-live .cd-ad .track i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-100%);
  animation: cdSweep 1.5s ease-out 0.7s;
}

/* THE SUPPRESSION LIST. Every animated property inside a surface must appear
   here or it plays BACKWARDS when the film latches — bars draining, lines
   un-drawing — which reads as a crash rather than a restart. Add to this list
   in the same edit that adds an animated element. */
.hd-surf.is-rewind [data-cd-in],
.hd-surf.is-rewind .cd-engine .fill,
.hd-surf.is-rewind .cd-h2h .bar i,
.hd-surf.is-rewind .cd-bars .col i,
.hd-surf.is-rewind .cd-ad .track i,
.hd-surf.is-rewind .cd-spark path.area,
.hd-surf.is-rewind .cd-spark path.line,
.hd-surf.is-rewind .cd-spark .head,
.hd-surf.is-rewind .cd-ring .val,
.hd-surf.is-rewind .cd-donut .seg,
.hd-surf.is-rewind .cd-blog-step,
.hd-surf.is-rewind .hd-cited,
.hd-surf.is-rewind .hd-citedby,
.hd-surf.is-rewind .hd-fresh,
.hd-surf.is-rewind .hd-scanrow,
.hd-surf.is-rewind .hd-shimmer,
.hd-surf.is-rewind .hd-menu,
.hd-surf.is-rewind .hd-caret,
.hd-surf.is-rewind .hd-later,
.hd-surf.is-rewind .hd-evidenceitem,
.hd-surf.is-rewind .hd-thumb,
.hd-surf.is-rewind .hd-report,
.hd-surf.is-rewind .hd-vsnum { transition: none; animation: none; }

/* ============================================================================
   THE STAGE-LOCK BLOCK
   chapter-demos.css rewrites .cd-num, .cd-engine, .cd-ring and a dozen others
   inside five viewport media queries, all at bare-class specificity. The stage
   is a fixed canvas that is scaled, not reflowed, so any of those firing would
   silently change the authored layout at some viewport and break every measured
   rect. `.hd-stage X` is (0,2,0) and this file loads after, so it wins at every
   width. The values also up-scale the components for a 1040px column; the
   chapter demos are drawn for a ~560px card.
   ========================================================================== */

.hd-stage .cd-title { font-size: 20px; }
.hd-stage .cd-sub { font-size: 12px; display: block; }
.hd-stage .cd-label { font-size: 12px; }
.hd-stage .cd-num { font-size: 40px; }
.hd-stage .cd-delta { font-size: 16px; }
/* Matches .card in css/app.css: 22px padding on the largest radius. */
.hd-stage .cd-card { padding: 22px; border-radius: var(--radius-lg); }
.hd-stage .cd-kpis { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hd-stage .cd-kpis > :last-child:nth-child(odd) { grid-column: auto; }
.hd-stage .cd-split { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 28px; }
.hd-stage .cd-engines { gap: 18px; }
/* Four columns, not three: the film adds a "who does this engine cite" chip
   after the percentage. In the chapter demos row there is no chip, so a 3-col
   grid there is right and a 3-col grid here would wrap it to its own line. */
.hd-stage .cd-engine { grid-template-columns: 150px 1fr 60px auto; font-size: 16px; }
.hd-stage .cd-engine .track { height: 12px; }
.hd-stage .cd-engine .pct { font-size: 15px; }
.hd-stage .cd-ring { width: 168px; height: 168px; }
.hd-stage .cd-ring text { font-size: 40px; }
.hd-stage .cd-spark { height: 120px; }
.hd-stage .cd-h2h .row { grid-template-columns: 1fr 150px 1fr; }
.hd-stage .cd-h2h .bar { height: 14px; }
.hd-stage .cd-h2h .metric { font-size: 13px; }
.hd-stage .cd-vs { font-size: 18px; }
.hd-stage .cd-link { grid-template-columns: 44px 1fr auto auto; padding: 14px 18px; font-size: 16px; }
.hd-stage .cd-link .host { font-size: 17px; }
.hd-stage .cd-link .tag { display: inline-block; }
.hd-stage .cd-topic { padding: 16px 20px; }
.hd-stage .cd-topic .t { font-size: 18px; }
.hd-stage .cd-topic .m { font-size: 13px; }
.hd-stage .cd-score { width: 48px; height: 48px; font-size: 18px; }
.hd-stage .cd-ad { grid-template-columns: 1fr 96px auto; font-size: 16px; align-items: center; }
.hd-stage .cd-ad .track { height: 12px; }
.hd-stage .cd-msg { font-size: 17px; padding: 14px 18px; max-width: 76%; }
.hd-stage .cd-donut { width: 168px; height: 168px; }
.hd-stage .cd-bars { height: 190px; }
.hd-stage .cd-days { font-size: 12px; }
.hd-stage .cd-legend { font-size: 14px; }
.hd-stage .cd-blog-editor .cd-type { font-size: 20px; }
.hd-stage .cd-blog-step { font-size: 15px; padding: 8px 16px; }
.hd-stage .cd-blog-lang { font-size: 14px; padding: 6px 13px; }

/* The film ships its own gradient ids. The chapter demos define #cdRingGrad and
   #cdAreaGrad inside a demo far below the fold; depending on those from above
   the fold would make the hero silently break if that section ever moved. */
.hd-stage .cd-ring .val { stroke: url(#hdRingGrad); }
.hd-stage .cd-spark path.area { fill: url(#hdAreaGrad); }

/* ---- Surface-local components ------------------------------------------ */

.hd-auditcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
}
.hd-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  transition: border-color 0.2s var(--hd-lin), background 0.2s var(--hd-lin);
}
.hd-field.is-hover { border-color: var(--purple); }
.hd-field.is-focus { border-color: var(--purple); background: rgba(124, 92, 252, 0.10); }
.hd-fieldwrap { flex: 1; min-width: 0; display: flex; align-items: center; font-size: 20px; }
.hd-placeholder { color: var(--muted); font-size: 20px; }
.hd-placeholder.is-off { display: none; }
.hd-fieldtext { color: var(--text); font-size: 20px; font-weight: 600; }
.hd-caret {
  width: 2px;
  height: 24px;
  margin-left: 3px;
  background: var(--purple-bright);
  opacity: 0;
}
.hd-caret.is-on { opacity: 1; animation: hdCaret 0.9s steps(1) infinite; }
@keyframes hdCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.hd-runbtn, .hd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  background: var(--gradient);
  color: var(--on-brand);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
  transition: transform 0.2s var(--hd-settle), filter 0.2s var(--hd-lin);
}
.hd-runbtn.is-hover, .hd-btn.is-hover { transform: translateY(-2px); filter: brightness(1.08); }
.hd-btn { align-self: flex-start; }
/* Two sibling labels, one shown by class — never a textContent swap, so both
   strings stay statically visible to the extractor. */
.hd-lbl { display: none; }
.hd-lbl.is-on { display: inline; }

.hd-scan { display: flex; flex-direction: column; gap: 12px; }
.hd-scanrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 16px;
  color: var(--text-2);
  opacity: 0.45;
  transition: opacity 0.3s var(--hd-lin), border-color 0.3s var(--hd-lin);
}
.hd-scanrow.is-done { opacity: 1; border-color: rgba(20, 184, 127, 0.34); }
.hd-scanrow .hd-tick { display: none; width: 17px; height: 17px; color: var(--green); }
.hd-scanrow .hd-spin { width: 17px; height: 17px; color: var(--muted); animation: hdSpin 0.9s linear infinite; }
.hd-scanrow.is-done .hd-spin { display: none; }
.hd-scanrow.is-done .hd-tick { display: block; }
@keyframes hdSpin { to { transform: rotate(360deg); } }

.hd-scancount {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--muted);
  min-width: 66px;
  text-align: right;
}

/* Built on the real row geometry, not a generic grey pill — a stock skeleton is
   the fastest way to make a real product look like a template. */
.hd-shimmer { display: flex; flex-direction: column; gap: 12px; }
.hd-shimmer.is-off { display: none; }
.hd-shimrow {
  height: 58px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(100deg, transparent 20%, rgba(124, 92, 252, 0.16) 42%, transparent 64%) 0 0 / 220% 100% no-repeat,
    var(--card);
  animation: hdShim 1.5s var(--hd-lin) infinite;
}
@keyframes hdShim { to { background-position: 220% 0; } }

/* Chips that say who an AI answer or a source actually credits. */
.hd-cited, .hd-citedby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s var(--hd-lin), transform 0.3s var(--hd-settle);
}
.hd-cited.is-in, .hd-citedby.is-in { opacity: 1; transform: none; }
.hd-cited.is-rival { border-color: rgba(217, 70, 168, 0.42); color: var(--magenta-bright); }
.hd-brand { font-family: var(--font-mono); font-size: 12px; }

/* "Found while you were watching." The meaning is carried by the length of the
   pause before it, so it needs no label. */
.hd-fresh { animation: hdFresh 0.9s var(--hd-settle) 1; }
@keyframes hdFresh {
  0% { background: rgba(124, 92, 252, 0.26); }
  100% { background: var(--card); }
}

.hd-filter {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color 0.2s var(--hd-lin);
}
.hd-filter.is-hover { border-color: var(--purple); }
.hd-filter svg { width: 13px; height: 13px; transition: transform 0.2s var(--hd-lin); }
.hd-filter.is-open svg { transform: rotate(180deg); }

.hd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  padding: 7px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: 100% 0;
  pointer-events: none;
  transition: opacity 0.22s var(--hd-lin), transform 0.22s var(--hd-settle);
}
.hd-menu.is-open { opacity: 1; transform: none; }
.hd-menuitem {
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-2);
  transition: background 0.15s var(--hd-lin);
}
.hd-menuitem.is-hover { background: rgba(124, 92, 252, 0.16); color: var(--text); }

/* The match-cut numeral. It lives OUTSIDE the surfaces, pinned to one authored
   rect that both Domain Overview and Competitor Battle are composed around, so
   the cut can swap everything behind it while it does not move by one pixel.
   Aligning two different real elements across a view swap is not achievable by
   tuning; this is the only way it lands. */
.hd-fixed { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; }
.hd-fixedcol { position: relative; width: 1040px; }
.hd-matchnum {
  position: absolute;
  left: 0;
  top: 78px;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.24s var(--hd-lin);
}
.hd-matchnum.is-on { opacity: 1; }
.hd-matchval {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hd-scorepair { display: flex; align-items: center; gap: 22px; min-height: 168px; }
.hd-numslot { width: 168px; height: 168px; flex: none; }
.hd-vsnum {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--magenta-bright);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.38s var(--hd-lin), transform 0.38s var(--hd-pull);
}
.hd-vsnum.is-in { opacity: 1; transform: none; }
.hd-scorelabels { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--muted); }

.hd-evidence { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-evidenceitem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--hd-lin), transform 0.3s var(--hd-settle);
}
.hd-evidenceitem.is-in { opacity: 1; transform: none; }
.hd-evidenceitem svg { width: 14px; height: 14px; color: var(--purple-bright); }

/* The deliverable. The one thing no dashboard can show: what you hand a client. */
.hd-report {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 26px;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--hd-pull);
}
.hd-report.is-open { clip-path: inset(0 0 0 0); }
.hd-reportcover { display: flex; flex-direction: column; gap: 12px; }
.hd-reporttitle { font-family: var(--font-heading); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.hd-reportlogo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
}
.hd-reportlogo svg { width: 20px; height: 20px; color: var(--purple-bright); }
.hd-thumbs { display: flex; flex-direction: column; gap: 12px; }
.hd-thumb {
  height: 74px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 13.5px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.34s var(--hd-lin), transform 0.34s var(--hd-settle);
}
.hd-thumb.is-in { opacity: 1; transform: none; }
.hd-reportcard {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--green);
  color: var(--green-bright);
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s var(--hd-lin);
}
.hd-reportcard.is-in { opacity: 1; }
.hd-reportcard svg { width: 16px; height: 16px; }

/* ---- Direction layers: scrim, ring, callout, cursor -------------------- */

.hd-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--mv-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--hd-lin);
}
.hd-scrim.is-on { opacity: 1; }

.hd-ringlayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* One ring, repositioned. Ten rings would be ten things to keep in sync. */
.hd-ring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--radius);
  border: 2px solid var(--purple-bright);
  box-shadow: 0 0 0 6px rgba(124, 92, 252, 0.16);
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.28s var(--hd-lin), transform 0.28s var(--hd-settle);
}
.hd-ring.is-on { opacity: 1; }

/* Exactly one element may be emphasised at a time. Two competing highlights
   read as a page that does not know what it is about. */
.hd-dimmed { opacity: var(--hd-dim); transition: opacity 0.24s var(--hd-lin); }

.hd-calloutlayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hd-calloutsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hd-leader {
  fill: none;
  stroke: var(--purple-bright);
  stroke-width: 2;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 0.34s var(--hd-lin);
}
.hd-leader.is-on { stroke-dashoffset: 0; }
.hd-callout {
  position: absolute;
  left: 0;
  top: 0;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: var(--on-brand);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 14px 34px -12px rgba(124, 92, 252, 0.8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.26s var(--hd-lin), transform 0.26s var(--hd-settle);
}
.hd-callout.is-on { opacity: 1; transform: none; }
.hd-calloutlabel { display: none; }
.hd-calloutlabel.is-on { display: inline; }

/* The synthetic pointer.
   It lives outside .hd-cam, so it is scaled only by --hd-fit, not by the
   camera. At a 1008px-wide letterbox that fit is 0.63, so the 24px arrow it
   started as rendered about 15 real pixels with a 1px outline: technically
   present, practically invisible. It is authored at 46 stage px, which lands
   around 29 real pixels at desktop, with a heavier outline and a shadow so it
   holds against both the pale cards and the gradient buttons it clicks.

   The negative margin keeps the ARROW TIP on the anchor point. The transform
   positions the element's top-left corner, and the tip sits at (5,3) in the
   24-unit viewBox, which is (9.6, 5.75) once scaled to 46. Without the offset
   a bigger cursor would click progressively further from where it points. */
.hd-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 46px;
  height: 46px;
  margin: -5.75px 0 0 -9.6px;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.2s var(--hd-lin);
}
.hd-cursor.is-on { opacity: 1; }
.hd-cursor svg {
  width: 46px;
  height: 46px;
  display: block;
  /* Fill and outline are both tokens, so the pointer inverts with the theme
     instead of vanishing on whichever surface it happens to be over. */
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 1.9;
  paint-order: stroke fill;
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.34))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.26));
}
/* A soft brand halo under the arrow. Small, and only enough to separate it from
   a busy panel; the outline does the real work. */
.hd-cursor::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 252, 0.30), transparent 68%);
  pointer-events: none;
}
.hd-ripple {
  position: absolute;
  left: 9.6px;
  top: 5.75px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2.5px solid var(--purple-bright);
  opacity: 0;
}
.hd-ripple.is-go { animation: hdRipple 0.5s var(--hd-pull) 1; }
@keyframes hdRipple {
  0% { opacity: 0.95; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(3.6); }
}

/* ---- Responsive: the stage scales, the CHOREOGRAPHY changes ------------
   Keyed off the measured letterbox width in JS, not a viewport media query —
   the letterbox width is not monotonic with the viewport. At phone size the
   frame is about 346x195 CSS px; a 1600px stage scaled into that puts body text
   near 5px. So mobile does not run the film: it runs a legible short cut with
   the camera parked and the cursor switched off entirely. */

.hd-root.is-compact { --hd-stagger: 78ms; }
.hd-root.is-compact .hd-rail { width: 176px; }
.hd-root.is-compact .hd-railpill { width: 160px; }
.hd-root.is-compact .hd-search { display: none; }
.hd-root.is-compact .hd-panel { width: 1180px; }

/* MOBILE IS A DIFFERENT EDIT, NOT A SMALLER ONE.
   At a 334x183 frame the 1600x900 stage renders at about 21 per cent, so a
   16px caption would need to be authored at 76px and a dashboard's worth of
   rows simply cannot be read. The phone cut therefore: parks the camera (in
   JS), drops the cursor, ring, callout and scrim, drops the rail, thread and
   search, keeps AT MOST three blocks per surface, and sets type large enough
   that what survives is actually legible. It shows less on purpose. */
.hd-root.is-mobile { --hd-stagger: 0ms; }
/* Both sidebars go: at 21 per cent the 92px rail is 19 real pixels and the
   248px panel is 52. Neither is readable, and together they take a third of
   a phone frame. The phone cut shows the tool, not the shell. */
.hd-root.is-mobile .hd-rail,
.hd-root.is-mobile .hd-side,
.hd-root.is-mobile .hd-icbtn,
.hd-root.is-mobile .hd-search,
.hd-root.is-mobile .hd-cursor,
.hd-root.is-mobile .hd-calloutlayer,
.hd-root.is-mobile .hd-ringlayer,
.hd-root.is-mobile .hd-scrim,
.hd-root.is-mobile .hd-parallax,
.hd-root.is-mobile .hd-fixed,
.hd-root.is-mobile .hd-shimmer { display: none; }

/* Only the head and the one thing each surface is about. */
.hd-root.is-mobile .hd-panel > :nth-child(n + 4) { display: none; }
.hd-root.is-mobile .hd-panel { width: 1420px; gap: 22px; }
.hd-root.is-mobile .hd-surf { padding: 34px 0; align-items: flex-start; }
.hd-root.is-mobile .hd-shell { grid-template-columns: 1fr; }
.hd-root.is-mobile .hd-topbar { height: 128px; padding: 0 40px; gap: 30px; }
.hd-root.is-mobile .hd-credits { height: 76px; font-size: 34px; padding: 0 30px; }
.hd-root.is-mobile .hd-pro { font-size: 24px; padding: 6px 16px; }
.hd-root.is-mobile .hd-crumbs { min-width: 0; flex: 1; }
.hd-root.is-mobile .hd-crumb { font-size: 60px; }
.hd-root.is-mobile .hd-host { font-size: 40px; padding: 16px 30px; border-radius: 999px; }

.hd-root.is-mobile .hd-stage .cd-title { font-size: 62px; }
.hd-root.is-mobile .hd-stage .cd-sub { display: none; }
.hd-root.is-mobile .hd-stage .cd-dot { width: 20px; height: 20px; }
.hd-root.is-mobile .hd-stage .cd-label { font-size: 40px; letter-spacing: 0.06em; }
.hd-root.is-mobile .hd-stage .cd-num { font-size: 132px; }
.hd-root.is-mobile .hd-stage .cd-delta { font-size: 54px; }
.hd-root.is-mobile .hd-stage .cd-card { padding: 30px 40px; }
.hd-root.is-mobile .hd-stage .cd-engines { gap: 24px; }
.hd-root.is-mobile .hd-stage .cd-engine { grid-template-columns: 420px 1fr 150px; font-size: 46px; gap: 30px; }
.hd-root.is-mobile .hd-stage .cd-engine .pct { font-size: 46px; }
.hd-root.is-mobile .hd-stage .cd-engine .track { height: 30px; }
.hd-root.is-mobile .hd-stage .hd-cited { display: none; }
.hd-root.is-mobile .hd-stage .cd-h2h .row { grid-template-columns: 1fr 300px 1fr; }
.hd-root.is-mobile .hd-stage .cd-h2h .bar { height: 30px; }
.hd-root.is-mobile .hd-stage .cd-h2h .metric { font-size: 34px; }
.hd-root.is-mobile .hd-stage .cd-kpis { gap: 34px; }
.hd-root.is-mobile .hd-stage .cd-link { grid-template-columns: 1fr auto; font-size: 42px; padding: 30px 36px; }
.hd-root.is-mobile .hd-stage .cd-link .host { font-size: 44px; }
.hd-root.is-mobile .hd-stage .cd-link .fav, .hd-root.is-mobile .hd-stage .hd-citedby { display: none; }
.hd-root.is-mobile .hd-stage .cd-topic { padding: 30px 36px; }
.hd-root.is-mobile .hd-stage .cd-topic .t { font-size: 44px; }
.hd-root.is-mobile .hd-stage .cd-topic .m { font-size: 30px; }
.hd-root.is-mobile .hd-stage .cd-score { width: 96px; height: 96px; font-size: 40px; }
.hd-root.is-mobile .hd-stage .cd-msg { font-size: 44px; padding: 30px 36px; max-width: 92%; }
.hd-root.is-mobile .hd-stage .cd-ring, .hd-root.is-mobile .hd-stage .cd-donut { width: 300px; height: 300px; }
.hd-root.is-mobile .hd-stage .cd-ad { grid-template-columns: 1fr 200px; font-size: 42px; }
.hd-root.is-mobile .hd-stage .cd-ad .track { height: 26px; }
.hd-root.is-mobile .hd-stage .cd-blog-step { font-size: 40px; padding: 20px 36px; }
.hd-root.is-mobile .hd-stage .cd-blog-editor .cd-type { font-size: 48px; }
.hd-root.is-mobile .hd-stage .cd-spark { height: 240px; }
.hd-root.is-mobile .hd-stage .cd-bars { height: 380px; }
.hd-root.is-mobile .hd-field { padding: 32px 40px; }
.hd-root.is-mobile .hd-placeholder, .hd-root.is-mobile .hd-fieldtext { font-size: 52px; }
.hd-root.is-mobile .hd-runbtn, .hd-root.is-mobile .hd-btn { font-size: 42px; padding: 28px 52px; }
.hd-root.is-mobile .hd-scanrow { font-size: 42px; padding: 30px 36px; }
.hd-root.is-mobile .hd-scancount { font-size: 40px; min-width: 180px; }
.hd-root.is-mobile .hd-reporttitle { font-size: 76px; }
.hd-root.is-mobile .hd-reportlogo { font-size: 44px; padding: 26px 40px; }
.hd-root.is-mobile .hd-report { grid-template-columns: 1fr; }
.hd-root.is-mobile .hd-thumbs { display: none; }

/* ---- Motion off: the film becomes a still ------------------------------
   Not a paused film — a composed final frame, plus the five things the film
   would have said, as real text. The director never starts. */

.hd-rmnotes { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* A blanket stop, not a list. The static frame calls the same activator the
     film does (.is-live), which restarts every ambient keyframe — the pulsing
     dot, the bar sweep, the caret. Enumerating them is how one gets missed,
     and "reduced motion" that still moves is worse than not offering it. */
  .hd-root,
  .hd-root *,
  .hd-root *::before,
  .hd-root *::after {
    animation: none !important;
    transition: none !important;
  }
  .hd-cam, .hd-parallax { transform: none !important; }
  .hd-cursor, .hd-ringlayer, .hd-calloutlayer, .hd-scrim, .hd-progress { display: none; }
  .hd-surf [data-cd-in] { opacity: 1; transform: none; transition: none; }
  .hd-surf .cd-engine .fill,
  .hd-surf .cd-h2h .bar i,
  .hd-surf .cd-ad .track i { width: var(--w, 0%); transition: none; }
  .hd-surf .cd-bars .col i { height: var(--h, 0%); transition: none; }
  .hd-surf .cd-spark path.area,
  .hd-surf .cd-spark .head { opacity: 1; transition: none; animation: none; }
  .hd-surf .cd-ring .val, .hd-surf .cd-spark path.line, .hd-surf .cd-donut .seg { transition: none; }
  .hd-cited, .hd-citedby, .hd-evidenceitem, .hd-thumb, .hd-vsnum { opacity: 1; transform: none; transition: none; }
  .hd-shimmer, .hd-caret { display: none; }
  /* a spinner that never resolves is worse than no spinner */
  .hd-scanrow .hd-spin { display: none; }
  .hd-scanrow .hd-tick { display: block; }
  .hd-report { clip-path: none; transition: none; }
  .hd-shimrow { animation: none; }

  .hd-rmnotes {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 18px 22px;
    background: linear-gradient(0deg, var(--bg) 40%, transparent);
    font-size: 13px;
    color: var(--text-2);
  }
  .hd-rmtitle { width: 100%; font-weight: 800; color: var(--text); }
  .hd-rmnote { display: inline-flex; align-items: center; gap: 7px; }
  .hd-rmnote::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--purple-bright);
  }
}

/* ---- Small pieces used by the surfaces ---------------------------------- */

.hd-numrow { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.hd-ringside { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.hd-raillabel { overflow: hidden; text-overflow: ellipsis; }

/* The donut's segment colours come from tokens, not the inline hex the chapter
   demo ships — the film contains no hardcoded colour of any kind. */
.hd-stage .cd-donut circle { fill: none; stroke-width: 12; }
.hd-seg-track { stroke: var(--bg-2); }
.hd-seg-pos { stroke: var(--green); }
.hd-seg-neu { stroke: var(--amber); }
.hd-seg-neg { stroke: var(--red); }
.hd-key-pos, .hd-key-neu, .hd-key-neg { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.hd-key-pos { background: var(--green); }
.hd-key-neu { background: var(--amber); }
.hd-key-neg { background: var(--red); }

/* Rows that arrive after the filter recalculates. Hidden until the director
   shows them, so the count falling from 48,204 to 9 has something to land on. */
.hd-later { display: none; }

/* The REC badge is authored in CSS px while everything behind it is stage px
   scaled to ~21%. On a phone frame that makes it enormous relative to the film
   and it lands on whichever title is underneath. Shrink it with the frame. */
@media (max-width: 620px) {
  .cinema-bookend { top: 12px; left: 14px; gap: 6px; padding: 4px 9px; }
  .cinema-bookend .live-text { font-size: 8px; letter-spacing: 0.1em; }
  .cinema-bookend .live-dot { width: 6px; height: 6px; }
}

/* On a phone the REC badge already names the current view, and the breadcrumb
   names it again — the surface's own header would be a third label for one
   thing, sitting exactly where the badge lands. Dropping it removes the
   collision and buys back the vertical space the last row was losing. */
.hd-root.is-mobile .hd-stage .cd-head { display: none; }

/* KPI numerals sit three-up, so they cannot take the same size as a surface's
   single hero number without pushing the last row out of a phone frame. */
.hd-root.is-mobile .hd-stage .cd-kpis .cd-num { font-size: 80px; }
.hd-root.is-mobile .hd-stage .cd-kpis .cd-card { padding: 24px 26px; }
.hd-root.is-mobile .hd-stage .cd-kpis .cd-label { font-size: 30px; }

/* ---------- S0 Get Started: the Intelligence Overview command center ----------
   Rebuilt to mirror the real dashboard (status strip + 8-second quick preview +
   Intelligence Overview + KPI cards). Generic class names (.kl/.kv/.eyebrow/…)
   are all scoped under .hd-gs* so nothing leaks into the other demos. */
.hd-gs { display: flex; flex-direction: column; gap: 16px; }
.hd-gsstrip { display: flex; align-items: center; gap: 18px; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: .05em; color: var(--muted); padding: 11px 18px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); flex-wrap: wrap; }
.hd-gsstrip .tag { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 700; letter-spacing: .12em; }
.hd-gsstrip .tag svg { flex: none; }
.hd-gsstrip .live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.hd-gsstrip .live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.hd-gsstrip .upd { margin-left: auto; }
.hd-gsqp { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.hd-gsqp .qphead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hd-gsqp .eyebrow { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; color: var(--green-bright); }
.hd-gsqp .eyebrow svg, .hd-gsqp .verified svg { flex: none; }
.hd-gsqp .verified { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 9px; letter-spacing: .1em; padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-bright); display: inline-flex; align-items: center; gap: 5px; }
.hd-gsqp h3 { font-family: var(--font-heading, "Inter Tight", sans-serif); font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--text); line-height: 1.3; }
.hd-gshead h2 { font-family: var(--font-heading, "Inter Tight", sans-serif); font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 2px 2px 0; color: var(--text); }
.hd-gshead h2 em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, var(--purple-bright), var(--magenta-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hd-gskpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hd-gskpi { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
.hd-gskpi .kl { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.hd-gskpi .kv { font-family: var(--font-heading, "Inter Tight", sans-serif); font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--text); margin-top: 8px; }
.hd-gskpi .kv small { font-size: 18px; color: var(--text-3); font-weight: 600; }
.hd-gskpi .ksub { font-size: 12px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.hd-gskpi .ksub svg { width: 13px; height: 13px; color: var(--purple-bright); flex: none; }
/* The quick-preview field is the film’s type target; keep it a touch smaller than the old full-width paste field so it sits right inside the card. */
.hd-gs .hd-field { margin-top: 14px; padding: 7px 8px 7px 18px; border-radius: 12px; gap: 8px; }
.hd-gs .hd-fieldwrap, .hd-gs .hd-placeholder, .hd-gs .hd-fieldtext { font-size: 15px; }
.hd-gs .hd-caret { height: 18px; }
.hd-gs .hd-runbtn { padding: 9px 16px; font-size: 13px; border-radius: 9px; white-space: nowrap; }
/* the probe's live snapshot result, revealed after Probe is pressed */
.hd-gsresult { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 16px 18px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--hd-lin), transform .5s var(--hd-lin); }
.hd-gsresult.is-on { opacity: 1; transform: none; }
.hd-gsr-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hd-gsr-hero .fav { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--purple), var(--magenta)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; letter-spacing: .02em; }
.hd-gsr-hero .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-gsr-hero .dom { font-family: var(--font-heading, "Inter Tight", sans-serif); font-weight: 700; font-size: 16px; color: var(--text); }
.hd-gsr-hero .meta { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hd-gsr-hero .ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-bright); background: color-mix(in srgb, var(--green) 13%, transparent); padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.hd-gsr-hero .ok svg { width: 11px; height: 11px; flex: none; }
.hd-gsr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.hd-gsr-kpis .t { border: 1px solid var(--hairline); border-radius: 11px; padding: 12px 14px; background: var(--card); }
.hd-gsr-kpis .l { display: block; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hd-gsr-kpis .v { font-family: var(--font-heading, "Inter Tight", sans-serif); font-weight: 800; font-size: 23px; color: var(--text); }
.hd-gsr-top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; background: color-mix(in srgb, var(--purple) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--purple) 16%, var(--border)); font-size: 13px; flex-wrap: wrap; }
.hd-gsr-top .tl { font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hd-gsr-top b { color: var(--text); font-weight: 700; }
.hd-gsr-top .pos { color: var(--purple-bright); font-weight: 700; }
.hd-gsr-top .vol { margin-left: auto; color: var(--text-3); font-family: var(--font-mono, monospace); font-size: 11.5px; }
@media (max-width: 720px) { .hd-gskpis { grid-template-columns: repeat(2, 1fr); } }