/* ==========================================================================
   Hive evidence restyle, sitewide
   ==========================================================================
   The look comes from the warranty evidence dossier: Satoshi for text,
   JetBrains Mono for labels and data, 1px hairlines, flat surfaces, one blue
   accent, and no glow. This file is loaded last on every page so it wins on
   source order.

   How the type swap works. Every page on this site asks for three families:
   Michroma for display, Space Grotesk for text, IBM Plex Mono for data. This
   file redeclares those three family names against self hosted Satoshi and
   JetBrains Mono files. Nothing in the 756 page bodies has to change, and no
   page can fall back to the old face, because a later @font-face for the same
   family and weight wins.
   ========================================================================== */

/* --- the real faces ---------------------------------------------------- */
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* --- the three legacy family names, repointed --------------------------- */
/* Exact single weights, not ranges. A browser picking between two faces of the
   same family prefers the closer weight match, so a 100-900 range loses to an
   exact 400 from any other stylesheet. Declaring the same exact weights, later
   in the cascade, is what actually replaces the old face. */

/* Display. Michroma ships one weight and pages request 400, so 400 has to
   resolve to Satoshi Bold or every headline would render light. */
@font-face { font-family: "Michroma"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Text. */
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Data and labels. */
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --hv-e-accent: #2f80ff;
  --hv-e-accent-hover: #1f68d8;
  --hv-e-live: #34d399;
  --hv-e-hairline: rgba(220, 227, 234, 0.14);
  --hv-e-hairline-strong: rgba(220, 227, 234, 0.22);
  --hv-e-surface: #111820;
  --hv-e-radius: 2px;
}

/* ==========================================================================
   Type discipline
   Michroma is about a third wider than Satoshi, so headings set for Michroma
   carry loose tracking. Tighten them back to the dossier setting.
   ========================================================================== */
h1, h2, h3,
.hero h1, .hero h2,
.hive-hero h1, .hive-hero h2 {
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1, .hero h1, .hive-hero h1 { letter-spacing: -0.05em; }

/* No glow on text, anywhere. */
h1, h2, h3, h4, h5, h6,
.hero p, .lede, .eyebrow,
.hive-shared-header *,
.h-brand-word, .brand, .mark, .wordmark {
  text-shadow: none !important;
}

p, li { text-wrap: pretty; }

/* ==========================================================================
   Flat surfaces, hairlines, no glow
   ========================================================================== */
.btn, .cta, .btn-primary, .btn-secondary,
.hero-cta-btn, .carnac-cta a, .mm-btn, .mm-handoff-cta,
.rap-btn, .h-btn, .pill, .chip, .tag, .badge, .card, .panel, .tile {
  border-radius: var(--hv-e-radius) !important;
}

/* Kill the blurry coloured halos under buttons and cards. */
.btn, .cta, .btn-primary, .btn-secondary,
.hero-cta-btn, .carnac-cta a, .mm-btn, .mm-handoff-cta, .rap-btn, .h-btn {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Primary action: one flat blue, no gradient. */
.btn-primary, .hero-cta-btn.primary, .rap-btn.primary,
.mm-btn, .mm-handoff-cta, .carnac-cta a:first-child {
  background: var(--hv-e-accent) !important;
  background-image: none !important;
  border: 1px solid var(--hv-e-accent) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .hero-cta-btn.primary:hover, .rap-btn.primary:hover,
.mm-btn:hover, .mm-handoff-cta:hover, .carnac-cta a:first-child:hover {
  background: var(--hv-e-accent-hover) !important;
  border-color: var(--hv-e-accent-hover) !important;
  transform: none !important;
}

/* Secondary action: hairline box, no fill. */
.btn-secondary, .hero-cta-btn.secondary, .rap-btn.secondary {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--hv-e-hairline-strong) !important;
}

/* Focus stays visible and square. */
:focus-visible {
  outline: 2px solid var(--hv-e-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Chrome normalization
   The site grew 172 different corner radii and 77 gradient fills across its
   pages. This layer settles them on one set of rules so every page reads as
   the same product. It works by role, not by page, so pages added later
   inherit it without another sweep.

   Two things are deliberately left alone. Atmospheric art keeps its radial
   gradients: the starfield, the page glow, the radar instrument. And gradient
   text keeps its fill, because the gradient IS the letterform there.
   ========================================================================== */

/* --- corners ------------------------------------------------------------- */
/* Anything that reads as a control, a container, or a code block squares off. */
button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
fieldset,
pre,
code,
table,
img:not([class*="mark"]):not([class*="logo"]):not([class*="avatar"]),
[class*="btn"],
[class*="cta"],
[class*="chip"],
[class*="pill"],
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="shell"],
[class*="tag"],
[class*="badge"],
[class*="box"],
[class*="-note"],
[class*="callout"],
[class*="toast"],
[class*="matrix"],
[class*="lane"],
[class*="detail"],
.glass,
.step,
.stp,
.node,
.field,
.core,
.layer,
.explain,
.console,
.toggle,
.curl,
.curve,
.door,
.bridge,
.wcard,
.oc,
.num,
.own,
.owns,
.regime,
.product,
.guarantee,
.receipted,
.checkline,
.tablewrap,
.imgblock,
.answer-card,
.answer-block,
.qr-box,
.profile-band,
.profile-item,
.lattice-area,
.pending-strip,
.usage-receipt,
.workflow-meta,
.result-pill,
.spin-panel,
.sym-card,
.pcard,
.fcard,
.fn,
.rlabel,
.side-card,
.mini-field,
.mini-chip,
.diff-note,
.pipe-lane,
.pipe-side,
.art-shot,
.otherhalf,
.closing-box,
.cta-band,
.v-vs,
.v-card,
.vtag,
.vprice,
.lab,
.lbadge,
.synthtag,
.r-box,
.beam,
.flow-step,
.flow-cta,
.had-item,
.had-tag,
.hive-star-tip,
.step-badge,
.step-num,
.step-n,
.layer-n,
.copy-btn,
.help-toggle,
.orbit-node,
.route-card,
.kit-card,
.ask-card,
.four-card,
.four-card > *,
.delivery-art,
.art-band,
.u-card,
.receipt-status,
.g-tag,
.hmx-scroll,
.winput,
.hv-tip,
.hv-replay,
.hv-node,
.hv-input,
.hv-send,
.hv-privacy-note,
.cs-embed,
.cs-verify,
.cs-pill,
.cs-copy { border-radius: var(--hv-e-radius) !important; }

/* Round things that are meant to be round stay round. */
.h-radar-scope, [class*="scope"], [class*="dial"], [class*="gauge"],
[class*="avatar"], .scene-floor, .star, [class*="twinkle"],
svg, svg *, [class*="dot"]:not([class*="docket"]) { border-radius: revert !important; }

/* --- fills --------------------------------------------------------------- */
/* Primary actions are one flat blue. Nothing on this site needs a sheen to
   say it is clickable. */
.btn-gold,
.btn-primary,
.btn.primary,
.sa-cta,
.flow-cta,
.btn-spin,
.btn-emit,
.btn-pay,
.sku-cta.primary,
.hv-btn,
.cbtn,
.hmx-getbtn,
.hv-send {
  background-image: none !important;
  background-color: var(--hv-e-accent) !important;
  color: #fff !important;
  border-color: var(--hv-e-accent) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-gold:hover,
.btn-primary:hover,
.btn.primary:hover,
.sa-cta:hover,
.flow-cta:hover,
.btn-spin:hover,
.btn-emit:hover,
.btn-pay:hover,
.sku-cta.primary:hover,
.hv-btn:hover,
.cbtn:hover,
.hmx-getbtn:hover,
.hv-send:hover { background-color: var(--hv-e-accent-hover) !important; }

/* Secondary actions are a hairline and nothing else. */
.btn-outline,
.btn-secondary,
.btn-tertiary,
.btn-quiet,
.sku-cta.outline,
.btn-spin-secondary {
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid var(--hv-e-hairline-strong) !important;
  box-shadow: none !important;
}
.btn-outline:hover,
.btn-secondary:hover,
.btn-tertiary:hover,
.btn-quiet:hover,
.sku-cta.outline:hover,
.btn-spin-secondary:hover { border-color: var(--hv-e-accent) !important; }

/* Glass cards become plain surfaces with a hairline. The blur was doing the
   work that a single rule and some whitespace can do better. */
.glass,
[class*="shell"].glass,
article.panel.glass,
article.metric.glass,
article.path-card.glass,
article.regime.glass,
article.q-card.glass,
article.receipt-panel.glass,
article.contrast-panel.glass,
.evidence-matrix.glass,
.estate-wrap.glass {
  background-image: none !important;
  background-color: var(--hv-e-surface) !important;
  border: 1px solid var(--hv-e-hairline) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- motion and glow ----------------------------------------------------- */
/* No lift, no glow, on anything that is a control. */
button:hover, a[class*="btn"]:hover, a[class*="cta"]:hover,
[class*="chip"]:hover, [class*="pill"]:hover, [class*="card"]:hover {
  transform: none !important;
}
[class*="btn"], [class*="cta"], [class*="chip"], [class*="pill"],
[class*="badge"], [class*="tag"]:not([class*="tagline"]) { box-shadow: none !important; }

/* ==========================================================================
   Specificity backstop
   Some pages set their button fills with their own !important, at a higher
   specificity than a single class. Repeating the class raises this layer above
   them without resorting to inline styles. Same rules as above, nothing new.
   ========================================================================== */

.btn-gold.btn-gold.btn-gold,
.btn-primary.btn-primary.btn-primary,
.primary.primary.primary,
.sa-cta.sa-cta.sa-cta,
.flow-cta.flow-cta.flow-cta,
.btn-spin.btn-spin.btn-spin,
.btn-emit.btn-emit.btn-emit,
.btn-pay.btn-pay.btn-pay,
.sku-cta.primary.primary,
.hv-btn.hv-btn.hv-btn,
.cbtn.cbtn.cbtn,
.hmx-getbtn.hmx-getbtn.hmx-getbtn,
.hv-send.hv-send.hv-send,
.v-chip.active.active {
  background: var(--hv-e-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--hv-e-accent) !important;
  border-radius: var(--hv-e-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-gold.btn-gold.btn-gold:hover,
.btn-primary.btn-primary.btn-primary:hover,
.primary.primary.primary:hover,
.sa-cta.sa-cta.sa-cta:hover,
.flow-cta.flow-cta.flow-cta:hover,
.btn-spin.btn-spin.btn-spin:hover,
.btn-emit.btn-emit.btn-emit:hover,
.btn-pay.btn-pay.btn-pay:hover,
.hv-btn.hv-btn.hv-btn:hover,
.cbtn.cbtn.cbtn:hover,
.hmx-getbtn.hmx-getbtn.hmx-getbtn:hover,
.hv-send.hv-send.hv-send:hover {
  background: var(--hv-e-accent-hover) !important;
  border-color: var(--hv-e-accent-hover) !important;
}

.btn-outline.btn-outline.btn-outline,
.btn-secondary.btn-secondary.btn-secondary,
.btn-tertiary.btn-tertiary.btn-tertiary,
.btn-quiet.btn-quiet.btn-quiet,
.btn-spin-secondary.btn-spin-secondary.btn-spin-secondary,
.sku-cta.outline.outline {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--hv-e-hairline-strong) !important;
  border-radius: var(--hv-e-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-outline.btn-outline.btn-outline:hover,
.btn-secondary.btn-secondary.btn-secondary:hover,
.btn-tertiary.btn-tertiary.btn-tertiary:hover,
.btn-quiet.btn-quiet.btn-quiet:hover,
.btn-spin-secondary.btn-spin-secondary.btn-spin-secondary:hover,
.sku-cta.outline.outline:hover { border-color: var(--hv-e-accent) !important; }

/* Cards and panels that were still carrying a fill. */
.pay-card.pay-card.pay-card,
.sku-card.sku-card.sku-card,
.spin-panel.spin-panel.spin-panel,
.spin-badge.spin-badge.spin-badge,
.step-num.step-num.step-num,
.cta-band.cta-band.cta-band,
.bridge.bridge.bridge,
.hrb-verdict.hrb-verdict.hrb-verdict,
.receipt-card.receipt-card.receipt-card,
.check3.check3.check3,
.v-chip.v-chip.v-chip:not(.active) {
  background-image: none !important;
  background-color: var(--hv-e-surface) !important;
  border-radius: var(--hv-e-radius) !important;
  box-shadow: none !important;
}

/* Pills that stayed round. */
.flow-step.flow-step.flow-step,
.had-item.had-item.had-item,
.had-tag.had-tag.had-tag,
.hv-chip.hv-chip.hv-chip,
.hmx-chip.hmx-chip.hmx-chip,
.hv-pill.hv-pill.hv-pill,
.step-badge.step-badge.step-badge,
.vprice.vprice.vprice,
.result-pill.result-pill.result-pill,
.g-tag.g-tag.g-tag,
.receipt-status.receipt-status.receipt-status,
.workflow-meta.workflow-meta.workflow-meta,
.receipted.receipted.receipted,
.fn.fn.fn,
.lab.lab.lab { border-radius: var(--hv-e-radius) !important; }

/* The ICE illustration is drawn geometry, not chrome. It keeps its shape. */
.ice-tower, .ice-side, .portal, .scene-floor, .beam,
.ice-tower *, .ice-side *, .portal * { border-radius: revert !important; }

/* ==========================================================================
   Floating controls
   The agent docket ticker is pinned to the bottom of the viewport and stands
   34px tall. The two floating launchers were sitting at 24px and 48px, so the
   onboarding launcher was landing on top of the ticker. Both now clear it.
   ========================================================================== */

.hive-star-wrap { bottom: 54px !important; }
.hive-star-wrap > *,
.hive-star-btn { border-radius: var(--hv-e-radius) !important; }

#hc-launch {
  bottom: 54px !important;
  border-radius: var(--hv-e-radius) !important;
  background-image: none !important;
  background-color: var(--hv-e-surface) !important;
  border: 1px solid var(--hv-e-hairline-strong) !important;
  box-shadow: none !important;
}
#hc-launch:hover { border-color: var(--hv-e-accent) !important; }

/* On a phone the ticker is the only thing down there, so give the launchers
   more room and keep them off each other. */
@media (max-width: 640px) {
  .hive-star-wrap { bottom: 50px !important; }
  #hc-launch { bottom: 50px !important; }
}

/* ==========================================================================
   LAYER 4: the aiSure system, applied for real.
   The private dossier at /private/warranty-evidence/ is the reference. This
   layer brings the public site onto that same surface, type scale, and
   spacing. Flat background, hairline rules, one blue accent, calm greys.
   This sheet is the LAST stylesheet on every page, so it wins on order.
   ========================================================================== */

:root{
  /* the dossier palette, dark side */
  --hv-a-bg:#0c1117;
  --hv-a-surface:#111820;
  --hv-a-surface-2:#161d26;
  --hv-a-text:#dce3ea;
  --hv-a-dim:#abb7c3;
  --hv-a-muted:#95a3b2;
  --hv-a-line:rgba(220,227,234,0.13);
  --hv-a-line-strong:rgba(220,227,234,0.20);
  --hv-a-accent:#2f80ff;
  --hv-a-live:#34d399;
  --hv-a-shell:1180px;
}

/* --- 4.1 flat surface. no glow, no starfield, no twinkle. --------------- */
html,body{background:var(--hv-a-bg) !important;background-image:none !important}
body{color:var(--hv-a-text) !important}
.hive-starfield,.hp-twinkle-a,.hp-twinkle-b,.page-bg,
.hv-aurora,.hv-glow,.hero-glow,[class*="twinkle"],[class*="starfield"],
[class*="nebula"],[class*="aurora-bg"]{display:none !important}
main,.hv-home,section,.hv-sec{background-image:none !important}

/* --- 4.2 type scale from the dossier ----------------------------------- */
body{
  font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem) !important;
  line-height:1.62 !important;
  -webkit-font-smoothing:antialiased;
}
h1{letter-spacing:-0.062em !important;line-height:1.06 !important}
h2{letter-spacing:-0.035em !important;line-height:1.1 !important}
h3{letter-spacing:-0.025em !important;line-height:1.15 !important}
h1,h2,h3{text-wrap:balance}
.hv-sec > p,.hv-sec > .prose p,.prose p,.prose li,.hv-lede,.lede{text-wrap:pretty}
.hv-sec > p,.prose p,.prose li{max-width:72ch}
.lede,.hv-lede{
  font-size:clamp(1.2rem,1rem + 0.8vw,1.6rem) !important;
  line-height:1.45 !important;letter-spacing:-0.015em !important;
}

/* eyebrows and small labels: mono, uppercase, wide tracking, muted */
.eyebrow,.hv-eyebrow,.section-number,.datum-label,.hv-kicker,.kicker,
.hv-label,.hrs-label,[class*="eyebrow"],[class*="kicker"]{
  font:500 0.75rem/1.35 "JetBrains Mono",ui-monospace,monospace !important;
  letter-spacing:0.11em !important;text-transform:uppercase !important;
  color:var(--hv-a-muted) !important;
}

/* --- 4.3 sections: hairline rule, generous air ------------------------- */
.hv-sec,section.hv-sec{
  padding-block:clamp(3.5rem,7vw,7rem) !important;
  border-top:1px solid var(--hv-a-line) !important;
  border-bottom:0 !important;
}
.hv-sec:first-of-type{border-top:0 !important}

/* --- 4.4 surfaces: flat panel + hairline, never a glass slab ----------- */
.glass,.hv-card,.card,.panel,.hv-panel,.hrb-instrument,.hrb-telemetry,
.hrs-reading-key,.pay-card,.sku-card,.spin-panel,.receipt-card,.bridge,
[class*="-card"],[class*="-panel"],[class*="callout"],[class*="-box"]{
  background:var(--hv-a-surface) !important;
  background-image:none !important;
  border:1px solid var(--hv-a-line) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* --- 4.5 muted secondary text ----------------------------------------- */
.hv-sub,.hv-muted,.muted,.sub,.hv-note,.note,.source-tag,.hv-meta,
.hrs-live-return em,.hv-foot,figcaption,small{color:var(--hv-a-muted) !important}

/* --- 4.6 keep green for live status only, never for body copy ---------- */
.hv-live,.live,[class*="status"] b,.hrs-pulse b,.had-tag{color:var(--hv-a-live) !important}

/* --- 4.7 shell width matches the dossier ------------------------------ */
.hv-wrap,.wrap,.shell,.hrb-inner,.hv-sec > .inner{
  width:min(100% - 2rem,var(--hv-a-shell));margin-inline:auto;
}

/* ==========================================================================
   LAYER 5: two layout breaks fixed.
   ========================================================================== */

/* 5.1 The radar band was a 2 column grid with a 657px left column beside a
   2644px right column, which left about 2000px of empty background on the
   left as you scrolled. .hrb-stage is a bare transparent wrapper, so it can
   be dissolved and its two children placed directly. Copy and telemetry now
   share the left column and the instrument spans both rows on the right. */
@media (min-width:1000px){
  .hrb-inner > .hrb-stage{display:contents}
  .hrb-inner > .hrb-copy{grid-column:1;grid-row:1;align-self:start}
  .hrb-inner > .hrb-stage > .hrb-instrument{grid-column:2;grid-row:1 / span 2}
  .hrb-inner > .hrb-stage > .hrb-telemetry{grid-column:1;grid-row:2}
  .hrb-inner > .hrb-marquee{grid-column:1 / -1;grid-row:3}
  .hrb-inner > .hrb-boundary{grid-column:1 / -1;grid-row:4}
}

/* 5.2 The live return cards were a 3 column grid. The wider mono face pushed
   the provider name column out and left about 88px for the status text, so it
   wrapped into six one word lines and spilled past the card edge. Stacking
   the status under the name gives it the full card width. */
.hrs-live-return{
  grid-template-columns:26px minmax(0,1fr) !important;
  gap:4px 9px !important;align-items:start !important;
  padding:10px 12px !important;min-height:0 !important;
}
.hrs-live-return > i{grid-area:1 / 1;align-self:center}
.hrs-live-return > b{grid-area:1 / 2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrs-live-return > em{
  grid-area:2 / 2;white-space:normal !important;font-style:normal;
  font-size:0.7rem;line-height:1.45;letter-spacing:0.04em;
}

/* ==========================================================================
   LAYER 6: seams and cramped columns.
   ========================================================================== */

/* 6.1 Three containers painted their own near black fill, which showed as hard
   horizontal seams against the dossier surface. Let the page surface show. */
.hv-home,.hv-hero,.hrb,.hv-sec,.carnac-stage,[class*="carnac-sec"]{
  background-color:transparent !important;background-image:none !important;
}

/* 6.2 Status and lane strips were fixed four and five column grids about 90 to
   110px wide, so every label wrapped or clipped to an ellipsis. Let them wrap
   into as many columns as actually fit. */
.hrs-status-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important}
.hrs-lanes{grid-template-columns:repeat(auto-fit,minmax(124px,1fr)) !important}
.hrs-status-grid > *,.hrs-lanes > *{min-width:0 !important}
.hrs-lanes *{text-overflow:clip !important;overflow:visible !important}

/* 6.3 Live return status text reads left to right like the rest of the page. */
.hrs-live-return > em,.hrs-live-return > b{text-align:left !important}

/* 6.4 Panel headers on the instrument get the eyebrow treatment. */
.hrs-reading-key > .hrs-label,.hrb-instrument .hrs-label{color:var(--hv-a-muted) !important}

/* ==========================================================================
   LAYER 7: alignment and the last of the neon.

   Two things were still wrong after layer 6.

   The first was the left gap. Three different shells were in use on the home
   page at the same time: the radar band ran 1180px wide starting at x130, the
   prose sections ran 720px centred which pushed their left edge out to x360,
   and the card sections ran 1120px starting at x160. Reading down the page the
   text jumped left and right and left a wide empty strip beside the prose. The
   720px and 1120px numbers live in an inline style block on the page itself,
   so they are fixed there rather than fought with here. This layer only holds
   the line for anything that sets its own shell.

   The second was the aurora headline. One heading class ran an animated
   gradient through blue, green, white and violet. Violet is not a Hive colour
   and an animated headline is not what the dossier does, so the gradient is
   removed and the headline is set solid.
   ========================================================================== */

/* 7.1 one shell everywhere */
.hv-wrap,.hv-wide,.wrap,.shell,.hrb-inner,.hvx-wrap,.hv-sec > .inner{
  width:min(100% - 2rem,var(--hv-a-shell));
  max-width:var(--hv-a-shell);
  margin-inline:auto;
}

/* 7.2 readable measure, the dossier way: constrain the paragraph, not the
   container, so headings and rules still run the full shell width. */
.hv-wrap p,.hv-wide p,.hv-body p,.hvx-wrap p,.lede{max-width:72ch}

/* 7.3 the aurora headline goes solid. background-clip and text-fill-color both
   have to be reset or the text stays transparent and the heading disappears. */
.hv-live-head,.hv-live-head *{
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--hv-a-text) !important;
  animation:none !important;
  filter:none !important;
}
.hv-live-head::after{display:none !important}

/* ==========================================================================
   LAYER 8: the phone.

   On a narrow screen the radar band collapses to one column, and the stage
   that holds the instrument carries order:-1. On two columns that is right,
   because it puts the instrument on the reading side. On one column it moves
   a 2283px tall instrument above the headline, so the first thing you saw on
   a phone was a dark panel with a small dial in it and no words at all. The
   headline sat 2585px down the page. Resetting order on one column lets the
   document order stand: headline, then instrument.

   The radar dial also sat in a 305px tall box with most of it empty at 375px
   wide, so the box is tightened to the dial.
   ========================================================================== */

@media (max-width:900px){
  .hrb-stage{order:0 !important}
  .hrb-copy{order:0 !important}
  .hrb-inner{row-gap:clamp(1.75rem,6vw,2.75rem)}
}

@media (max-width:640px){
  /* tighten the dial box so the instrument opens with the reading, not with
     200px of empty dark above it */
  .hrs-frame > svg{max-height:210px;height:auto}
  .hrs-frame{row-gap:0.75rem}
  /* the fixed help button sits bottom left, so keep the last band clear of it */
  body{padding-bottom:4.5rem}
}

/* ==========================================================================
   LAYER 9: light and dark, sitewide.

   The dossier at /private/warranty-evidence/ was the only page on the site
   that could render light, because its palette lived in its own style block
   with a [data-theme="dark"] override beside every value. Everywhere else the
   palette was dark literals, so there was nothing to flip.

   theme_light_dark_migration.py retargeted the palette variables that the
   756 pages already shared, --obsidian, --carbon, --fog, --white, --ink,
   --void, --hull and the rest, onto the --hvt-* tokens defined here, and
   rewrote the colours that were written straight onto a declaration. Both
   passes kept every brand and semantic colour untouched, so blue stays blue,
   green stays green, and the Hive gold is never reachable by either pass.

   Light is the default because that is the surface Steve approved. The dark
   values are exactly the ones the dossier already used, so the two pages
   agree to the hex.
   ========================================================================== */

:root{
  color-scheme:light;

  --hvt-bg:#eef1f4;
  --hvt-surface:#f7f9fa;
  --hvt-surface-2:#ffffff;
  --hvt-text:#18202b;
  --hvt-muted:#667281;
  --hvt-dim:#53606e;
  --hvt-line:rgba(24,32,43,0.12);
  --hvt-line-strong:rgba(24,32,43,0.18);
  --hvt-accent:#2f80ff;
  --hvt-accent-quiet:#1f68d8;
  --hvt-live:#168a62;
  --hvt-on-accent:#ffffff;
  --hvt-warn:#8a5000;
  --hvt-danger:#b3261e;
  /* a black scrim stays black when the page turns light, so the panel it
     covers goes mid grey and the muted label on top lands at about 2:1 */
  /* corner keys sit outside the painted plate, so they need a blue that the
     plate scope never rewrites */
  --hvt-key:#1f68d8;
  --hvt-scrim:rgba(24,32,43,0.05);
  --hvt-scrim-strong:rgba(24,32,43,0.09);
}

html[data-theme="dark"]{
  color-scheme:dark;

  --hvt-bg:#0c1117;
  --hvt-surface:#111820;
  --hvt-surface-2:#161d26;
  --hvt-text:#dce3ea;
  --hvt-muted:#95a3b2;
  --hvt-dim:#a3afbb;
  --hvt-line:rgba(220,227,234,0.13);
  --hvt-line-strong:rgba(220,227,234,0.20);
  --hvt-accent:#2f80ff;
  --hvt-accent-quiet:#4da6ff;
  --hvt-live:#34d399;
  --hvt-warn:#ffc46b;
  --hvt-danger:#f4ced5;
  --hvt-key:#4da6ff;
  --hvt-scrim:rgba(0,0,0,0.30);
  --hvt-scrim-strong:rgba(0,0,0,0.45);
  --hvt-on-accent:#ffffff;
}

/* --- 9.1 layer 4 tokens now follow the theme ----------------------------
   The --hv-e-* family below was missed on the first pass and it is the one
   the card rule actually reads, so every pay card, sku card and spin panel
   kept a #111820 plate on the light page while its text turned dark. */
:root{
  --hv-e-surface:var(--hvt-surface);
  --hv-e-hairline:var(--hvt-line);
  --hv-e-hairline-strong:var(--hvt-line-strong);
  --hv-e-accent:var(--hvt-accent);
  --hv-e-accent-hover:var(--hvt-accent-quiet);
  --hv-e-live:var(--hvt-live);
  --hv-a-bg:var(--hvt-bg);
  --hv-a-surface:var(--hvt-surface);
  --hv-a-surface-2:var(--hvt-surface-2);
  --hv-a-text:var(--hvt-text);
  --hv-a-dim:var(--hvt-dim);
  --hv-a-muted:var(--hvt-muted);
  --hv-a-line:var(--hvt-line);
  --hv-a-line-strong:var(--hvt-line-strong);
  --hv-a-accent:var(--hvt-accent);
  --hv-a-live:var(--hvt-live);
}

/* --- 9.2 the pale blues and greens that only worked on a dark page -------
   These are high chroma, so the migration protected them on purpose. On a
   dark surface a pale blue reads as a glow; on a light surface it drops to
   about 1.9:1 and disappears. This sheet is the last on every page, so
   redefining the shared names here wins on source order without touching
   the 700 pages that use them. */
:root{
  --blue-soft:var(--hvt-accent-quiet);
  --accent-glow:var(--hvt-accent-quiet);
  --glow:var(--hvt-accent-quiet);
  --blue-glow:var(--hvt-accent-quiet);
  --accent-2:var(--hvt-accent-quiet);
  --cyan:#0b7f96;
  --green:var(--hvt-live);
  --hv-green:var(--hvt-live);
  --blue-soft:var(--hvt-accent-quiet);
  --hv-blue-soft:var(--hvt-accent-quiet);
  --blue-hi:var(--hvt-accent-quiet);
  /* --blue is read both as a label colour and as a button fill, so it points
     at the quiet accent: dark enough to read on the light page, light enough
     to read on the dark one, and white still clears it as a fill. */
  --blue:var(--hvt-accent-quiet);
  --cs-blue:var(--hvt-accent-quiet);
  --cs-green:var(--hvt-live);
  --link:var(--hvt-accent-quiet);
  --link-hover:var(--hvt-accent);
  --live:var(--hvt-live);
}
html[data-theme="dark"]{
  --cyan:#7ee8ff;
}

/* --- 9.3 hairlines and dividers ---------------------------------------- */
hr,.hv-rule,.rule,.divider{border:0;border-top:1px solid var(--hvt-line)}

/* --- 9.4 form controls inherit the surface ------------------------------ */
input,select,textarea{
  background:var(--hvt-surface-2);color:var(--hvt-text);
  border:1px solid var(--hvt-line);
}
input::placeholder,textarea::placeholder{color:var(--hvt-muted)}

/* --- 9.5 images and dials tuned for a dark canvas ----------------------
   Screenshots, diagrams and the radar dial are drawn light-on-dark. On the
   light surface they become a dark rectangle in the middle of the page, so
   they keep a dark plate of their own rather than being inverted. */
:root .hrs-frame,:root .hrb-instrument,:root .hive-radar-dial,
:root .hv-convert,
:root [data-dark-plate]{
  background:#0c1117;
  border:1px solid rgba(24,32,43,0.14);
  border-radius:12px;
}
html[data-theme="dark"] .hrs-frame,
html[data-theme="dark"] .hrb-instrument,
html[data-theme="dark"] .hive-radar-dial,
html[data-theme="dark"] .hv-convert,
html[data-theme="dark"] [data-dark-plate]{
  background:transparent;border-color:var(--hvt-line);
}

/* --- 9.6 the toggle in the shared header -------------------------------- */
.hv-theme-toggle{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--hvt-line-strong);border-radius:50%;
  background:transparent;cursor:pointer;color:var(--hvt-text);
  transition:border-color 180ms ease,color 180ms ease;
}
.hv-theme-toggle:hover{border-color:var(--hvt-accent);color:var(--hvt-accent)}
.hv-theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hv-theme-toggle .i-sun{display:none}
.hv-theme-toggle .i-moon{display:block}
html[data-theme="dark"] .hv-theme-toggle .i-sun{display:block}
html[data-theme="dark"] .hv-theme-toggle .i-moon{display:none}
@media (prefers-reduced-motion:reduce){
  .hv-theme-toggle{transition:none}
}

/* --- 9.7 colours that only existed for a dark page ----------------------
   Both of these are high chroma, so the migration protected them by design.
   Protection is right for a brand colour and wrong for a colour that was only
   ever legible against #0c1117, so they get a light value here instead. */

/* Patent Pending marker. #5BFFA2 on the light surface measures about 1.2:1. */
/* hive-deepspace.css pins these on html.hive-deepspace and is injected at
   runtime, so it lands after every <link> and wins any tie. Matching :root
   ties on specificity and loses on order, so these are written one step
   heavier and win outright regardless of load order. */
html:root:not([data-theme="dark"]){
  --hive-pp-green:#0f7a4f;
  --hive-pp-green-dim:rgba(15,122,79,0.10);
  --hive-pp-green-line:rgba(15,122,79,0.38);
}
html:root[data-theme="dark"]{
  --hive-pp-green:#5BFFA2;
  --hive-pp-green-dim:rgba(91,255,162,0.16);
  --hive-pp-green-line:rgba(91,255,162,0.45);
}

/* Agent docket status tag. Layer 4 forced the label to the live green while the
   tag kept a green tinted plate, so it was green on green in both themes. The
   label now takes the page text colour and the state stays readable as the
   plate and the hairline. */
.had-tag{
  color:var(--hvt-text) !important;
  background:var(--hvt-surface-2) !important;
  border:1px solid var(--hvt-line-strong) !important;
}
.had-tag[data-state],.had-tag{
  letter-spacing:.08em;
}

/* --- 9.8 text sitting on a plate that stays dark ------------------------
   9.5 keeps the instrument plates dark on the light page because inverting a
   screenshot or a radar dial looks worse than leaving it alone. The text
   inside them was migrated with the rest of the page, so on the light theme it
   turned dark and disappeared into its own plate. Anything on one of these
   plates keeps the dark-theme text colours in both themes. */
:root .hrs-frame,:root .hrb-instrument,:root .hive-radar-dial,
:root .hive-star-tip,:root .hv-convert,:root [data-dark-plate]{
  --hvt-text:#dce3ea;
  --hvt-muted:#95a3b2;
  --hvt-dim:#a3afbb;
  --hvt-surface:#111820;
  --hvt-surface-2:#161d26;
  --hvt-bg:#0c1117;
  --hvt-line:rgba(220,227,234,0.13);
  --hvt-line-strong:rgba(220,227,234,0.20);
  --hvt-accent-quiet:#4da6ff;
  --hvt-live:#34d399;
  --hvt-warn:#ffc46b;
  --hvt-danger:#f4ced5;
  color:var(--hvt-text);
  /* The tokens above only make sense over a dark surface. On radar the frame
     was left unpainted, so its labels took the dark palette and sat on the
     light page at about 2.3:1. Painting the plate here keeps the two in step
     wherever the rule applies. */
  background-color:var(--hvt-bg);
}


/* --- 9.9 corner keys ----------------------------------------------------
   .hrs-corner-key labels the frame from outside it, so it inherits the
   plate's dark tokens while sitting on the light page. It reads a key colour
   that the plate scope leaves alone. */
.hrs-corner-key{color:var(--hvt-key) !important}


/* --- 9.10 plate surfaces ------------------------------------------------
   The instrument keeps the dark palette in both themes because its dial and
   its readouts are drawn for a dark surface. On the light page a later rule
   was repainting the card itself pale while its labels stayed near white, so
   the surface is pinned here to match the palette it hands down. */
:root .hrb-instrument,
:root .hrs-frame,
:root .hive-radar-dial,
:root .hrs-reading-key{background-color:#0c1117 !important}

/* --- 9.11 pill and status greens ---------------------------------------
   These are declared inside page level style blocks that load after this
   sheet, so they need the extra html qualifier to win the cascade. */
html:root:not([data-theme="dark"]){--cs-green:#168a62;--hv-ok:#168a62;--ok:#168a62}
html:root[data-theme="dark"]{--cs-green:#34d399;--hv-ok:#34d399;--ok:#34d399}


/* --- 9.12 last three contrast holds -------------------------------------
   .cs-pill reads a green declared on a nearer ancestor than :root, so the
   variable is overridden where it is read instead. The primary button fill
   moves to the full accent because white over the quiet accent lands at
   about 2.6:1 on the dark theme. */
/* These page level blocks sit in the body, so they load after this sheet and
   win any tie. The repeated class raises specificity enough to settle it. */
.cs-pill.cs-pill.cs-pill{color:var(--hvt-live)}
.hv-bench-num.hv-bench-num.hv-bench-num{color:var(--hvt-live)}
html[data-theme="dark"] .cs-verify.cs-verify.cs-verify,
html[data-theme="dark"] .cs-copy.cs-copy.cs-copy{background-color:#1f68d8}
.button.button-primary,.btn-primary,.hv-btn-primary{
  background-color:var(--hvt-accent);
  color:var(--hvt-on-accent);
}
html[data-theme="dark"] .button.button-primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .hv-btn-primary{background-color:#1f68d8}


/* --- 9.13 terminal comments and status pills ----------------------------
   Code comments sat at #4b5563 on the terminal black, which is 2.5:1 and too
   faint to read. The status pills used the full accent on a pale blue chip,
   which lands just under the line, so they take the quiet accent. */
.comment.comment.comment,.term-comment.term-comment.term-comment,
.tok-comment.tok-comment.tok-comment,.hljs-comment.hljs-comment.hljs-comment{color:#8b98a8}
html:not([data-theme="dark"]) .comment.comment.comment,
html:not([data-theme="dark"]) .term-comment.term-comment.term-comment,
html:not([data-theme="dark"]) .tok-comment.tok-comment.tok-comment,
html:not([data-theme="dark"]) .hljs-comment.hljs-comment.hljs-comment{color:#5b6775}
.status-pill.status-pill.status-pill,.receipt-tag.receipt-tag.receipt-tag{color:var(--hvt-accent-quiet)}
.hv-convert .hv-convert__sub,.hv-convert .hv-convert__sub.hv-convert__sub,
.hv-convert p,.hv-convert li,
.hv-convert .hv-convert-cta__name,.hv-convert .hv-convert-cta__what,
.hv-convert-cta__name.hv-convert-cta__name,.hv-convert-cta__what.hv-convert-cta__what{color:var(--hvt-text)}


/* --- 9.14 gold call to action buttons -----------------------------------
   Gold belongs to the Hive mark and the patent pending badge. These buttons
   had taken it, which both breaks that rule and leaves white text on a pale
   fill. They become product blue like every other call to action. */
.h-btn-gold,.btn-gold,.hv-btn-gold,.cta-gold{
  background:var(--hvt-accent) !important;
  background-color:var(--hvt-accent) !important;
  border-color:var(--hvt-accent) !important;
  color:var(--hvt-on-accent) !important;
}
.h-btn-gold:hover,.btn-gold:hover,.hv-btn-gold:hover,.cta-gold:hover{
  background:var(--hvt-accent-quiet) !important;
  background-color:var(--hvt-accent-quiet) !important;
}
.skip,.cec-btn.cec-primary{background-color:var(--hvt-accent);color:var(--hvt-on-accent)}


/* --- 9.15 the spin badge -------------------------------------------------
   This badge carried near black ink meant for a bright fill. The fill is now
   product blue, so the ink goes white to stay readable in both themes. */
.spin-badge.spin-badge.spin-badge{
  background:var(--hvt-accent);color:var(--hvt-on-accent);border-color:var(--hvt-accent);
}


/* --- 9.16 last three readability holds ----------------------------------
   The badge fill was being reset by a page level rule, the arrow kept the
   dark theme blue on a light page, and the price chip sat one notch under
   the line on its pale blue background. */
/* A later sheet owns this badge's fill, so rather than fight it the badge
   reads as accent text on the panel surface with a matching outline. */
html:not([data-theme="dark"]) .spin-badge{
  color:var(--hvt-accent-quiet) !important;
  border:1px solid var(--hvt-accent-quiet) !important;
}
html:not([data-theme="dark"]) .arw,
html:not([data-theme="dark"]) .tp{color:var(--hvt-accent-quiet) !important}


/* --- 9.17 the concierge launcher ----------------------------------------
   This floating button kept white ink from the old dark page, which left it
   unreadable on the light surface. It becomes a solid blue call to action. */
#hc-launch{
  background:var(--hvt-accent) !important;
  color:var(--hvt-on-accent) !important;
  border:1px solid var(--hvt-accent) !important;
}
#hc-launch:hover{background:var(--hvt-accent-quiet) !important;border-color:var(--hvt-accent-quiet) !important}


/* --- 9.18 two last light mode holds -------------------------------------
   The info marker kept the dark theme green on its pale mint chip, and the
   try link kept the dark theme blue on a light card. */
html:not([data-theme="dark"]) .hv-optinfo{color:var(--hvt-live) !important}
html:not([data-theme="dark"]) .try-link,
html:not([data-theme="dark"]) .whitepaper-badge{color:var(--hvt-accent-quiet) !important}