/* Inter (SIL OFL 1.1), inlined because the artifact CSP blocks font CDNs
     and a blocked webfont does not error -- it silently falls back to Segoe
     UI, which is precisely how a page stops looking designed. One variable
     file carries 100-900, so every weight here costs 47 KB once.

     The second face is a 1.2 KB carve-out holding U+20B9 alone: the rupee
     sign lives in Inter's latin-ext subset, and shipping all 83 KB of that
     to render one glyph in one headline is not a trade worth making. */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-rupee.woff2) format("woff2");
    unicode-range: U+20B9;
  }

  /* ------------------------------------------------------------------
     RedForge v2.

     Deliberately single-theme. This is an instrument panel, not a
     document, so every colour is painted explicitly and the page never
     borrows a ground from its host.

     Two colour families, and they must not blend: the ember reds are
     brand, the semantic four (confirmed / lead / untested / skipped)
     encode meaning in a security report. A semantic colour used as
     decoration makes a real signal unreadable.
     ------------------------------------------------------------------ */
  :root {
    --ground:      #05060a;
    --ground-2:    #0a0b11;
    --panel:       #0e0f16;
    --hairline:    rgba(244, 22, 47, 0.16);
    --hairline-2:  rgba(255, 255, 255, 0.08);

    /* Crimson, not scarlet. The previous #ff2d4b carried enough blue to read
       pink against this ground, which is what made the page look loud rather
       than expensive. Everything here stays on the dark-red side of the hue
       wheel; --ember-lit is held at 4.8:1 on --ground so small accent text
       still passes AA. */
    --ember:       #c40d26;
    --ember-lit:   #f4162f;
    --ember-deep:  #8b0616;
    --ember-dark:  #4a0010;

    /* The display gradient: bright crimson into oxblood, never into black --
       a gradient that bottoms out at black reads as a shadow, not a colour. */
    --ember-grad:  linear-gradient(125deg, #ff2338 0%, #d20f28 44%, #8b0616 100%);

    /* Wine: the surface gradient for cards and panels. Kept at low alpha and
       raked across the box so it behaves as a tint over the ground rather
       than a fill -- a saturated wine panel at full strength would fight the
       text sitting on it. The -hot variant is the hover state only. */
    --wine-grad:     linear-gradient(150deg, rgba(112,16,44,0.30) 0%,
                                     rgba(74,0,16,0.17) 48%, rgba(10,11,17,0.24) 100%);
    --wine-grad-hot: linear-gradient(150deg, rgba(152,22,58,0.42) 0%,
                                     rgba(100,4,26,0.25) 48%, rgba(14,15,22,0.28) 100%);

    --confirmed:   #3ddc97;
    --untested:    #f0a202;
    --lead:        #7aa2f7;
    --skipped:     #8b8fa3;

    --ink:         #f2f3f7;
    --ink-2:       #b8bcc9;
    --ink-3:       #7c8195;

    --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    --sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --shell: 88rem;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ---------- the scrollbar, as glass ----------
     A scrollbar cannot take backdrop-filter, so the glass read is built
     the only way available: a translucent pill inset from the track by a
     transparent border, with a bright inner top edge for the lit rim and
     a soft ember glow underneath. */
  ::-webkit-scrollbar { width: 14px; height: 14px; }
  ::-webkit-scrollbar-track {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    border-left: 1px solid rgba(255,255,255,0.05);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 4px solid transparent;
    background-clip: padding-box;
    background-color: rgba(244, 22, 47, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 0 0 1px rgba(255,255,255,0.14),
      0 0 12px -2px rgba(244, 22, 47, 0.55);
    transition: background-color 0.2s;
  }
  ::-webkit-scrollbar-thumb:hover  { background-color: rgba(244, 22, 47, 0.52); }
  ::-webkit-scrollbar-thumb:active { background-color: rgba(244, 22, 47, 0.7); }
  ::-webkit-scrollbar-corner { background: transparent; }
  html { scrollbar-width: thin; scrollbar-color: rgba(244,22,47,0.42) rgba(255,255,255,0.03); }

  /* ---------- atmosphere ----------
     THE BLUR IS GONE AND THE LOOK IS NOT. `filter: blur(140px)` on three
     boxes up to 46rem across is one of the most expensive things a page can
     ask for: the compositor allocates a layer the size of the element plus
     three blur radii and re-runs a separable convolution over it whenever
     anything above it repaints -- and above it sits a sticky header with
     `backdrop-filter`, which repaints on every scroll frame. That pairing is
     what made scrolling feel heavy.

     Nothing is lost, because the shapes being blurred were already radial
     gradients: a gradient is smooth by construction, so the blur was paying
     compositor time to soften something with no edges. Widening each
     gradient's falloff and easing the stops reproduces it at zero cost.
     `contain: paint` keeps the layer out of the rest of the page's repaints. */
  .atmosphere {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden; contain: strict;
  }
  .orb { position: absolute; border-radius: 50%; }
  .orb-a { width: 64rem; height: 64rem; top: -27rem; right: -21rem; opacity: 0.34;
           background: radial-gradient(closest-side, var(--ember) 0%,
                       rgba(196,13,38,0.42) 32%, transparent 78%); }
  .orb-b { width: 54rem; height: 54rem; top: 86rem; left: -24rem; opacity: 0.30;
           background: radial-gradient(closest-side, var(--ember-deep) 0%,
                       rgba(139,6,22,0.40) 34%, transparent 80%); }
  .orb-c { width: 46rem; height: 46rem; bottom: -16rem; right: -12rem; opacity: 0.44;
           background: radial-gradient(closest-side, var(--ember-dark) 0%,
                       rgba(74,0,16,0.46) 36%, transparent 82%); }

  .grain {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 15%, transparent 75%);
  }

  .shell { position: relative; z-index: 1; width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

  /* ---------- type ---------- */
  .eyebrow {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ember-lit);
    display: flex; align-items: center; gap: 0.7rem;
  }
  .eyebrow .ico { width: 0.95rem; height: 0.95rem; }

  /* Weight 700, not 900. Black weight at display size closes up the counters
     -- the eye of an "e", the bowl of an "a" -- and a headline with no air
     inside its letterforms reads as loud rather than expensive. The reference
     sits at Bold, and the difference is most of what "premium" meant here.
     Tracking eased off for the same reason: -0.045em was crushing it. */
  h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.022em; }
  h2, h3 { text-wrap: balance; }

  h1 {
    font-size: clamp(2.1rem, 4.8vw, 4.4rem);
    line-height: 0.99; letter-spacing: -0.028em; font-weight: 700;
  }
  /* Three deliberate lines. Left to find its own breaks at the hero column
     width, this headline split into four ragged ones. */
  h1 span { display: block; }
  h1 .h1-b { color: var(--ember-lit); }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    h1 .h1-b {
      background: var(--ember-grad);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
  }
  h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08; }
  h3 { font-size: 1.02rem; letter-spacing: -0.01em; font-weight: 650; }
  p  { margin: 0; color: var(--ink-2); }
  .lede { font-size: 1.12rem; line-height: 1.68; max-width: 48ch; }

  /* ---------- pill badge ---------- */
  .pill {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 1rem 0.45rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--hairline);
    background: rgba(255,255,255,0.045);
    backdrop-filter: blur(12px);
    font-size: 0.82rem; color: var(--ink-2);
  }
  .pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--ember-lit); box-shadow: 0 0 10px var(--ember-lit);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

  /* ---------- icon tiles ---------- */
  .ico { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
         stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .tile {
    width: 3.1rem; height: 3.1rem; border-radius: 15px; flex-shrink: 0;
    display: grid; place-items: center;
    border: 1px solid rgba(244, 22, 47, 0.3);
    background: linear-gradient(160deg, rgba(192,0,31,0.24), rgba(74,0,16,0.1));
    color: var(--ember-lit);
  }
  .tile .ico { width: 1.4rem; height: 1.4rem; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.5rem; border-radius: 12px;
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    font-family: var(--sans);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  }
  .btn .ico { width: 1.05rem; height: 1.05rem; transition: transform 0.2s; }
  .btn:hover .ico { transform: translateX(3px); }
  /* Wine, not scarlet. Deep enough that white sits on it at well past AA,
     with a lit top edge so the button still reads as raised rather than as a
     dark hole punched in the panel. */
  .btn-primary {
    background: linear-gradient(140deg, #a8102f 0%, #7d0a20 46%, #520614 100%);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 30px -10px rgba(168, 16, 47, 0.9);
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(140deg, #c21437 0%, #920d26 46%, #630818 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0 46px -10px rgba(194, 20, 55, 1);
  }
  .btn-ghost {
    border-color: var(--hairline-2); color: var(--ink-2);
    background: rgba(255,255,255,0.03); backdrop-filter: blur(10px);
  }
  .btn-ghost:hover { border-color: var(--ember-lit); color: var(--ink); }
  .btn-nav { padding: 0.68rem 1.3rem; border-radius: 999px; font-size: 0.875rem; }

  a:focus-visible, button:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--ember-lit); outline-offset: 3px;
  }

  /* ---------- nav ---------- */
  header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(5, 6, 10, 0.7);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline-2);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; gap: 2rem; }
  .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
  /* .brand-mark is defined once, further down under "brand mark". It used to
     be styled here as well and the two rule sets fought over the background
     and the glow. */
  .brand-word { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  .brand-word span { color: var(--ember-lit); }
  .nav-links { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
  .nav-links a {
    font-size: 0.9rem; color: var(--ink-2); text-decoration: none; transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--ember-lit); }
  @media (max-width: 1100px) { .nav-links { display: none; } }

  /* ---------- sections ---------- */
  section { padding: 6.5rem 0; position: relative; z-index: 1; }
  .sec-head { display: flex; flex-direction: column; gap: 1.05rem; max-width: 58ch; margin-bottom: 3rem; }

  /* ---------- hero ---------- */
  .hero { padding: 6rem 0 5rem; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
    opacity: 0.42;
    /* Defocused on purpose: a sharp photograph behind display type competes
       with it for the same attention. Blurred, it becomes depth instead.
       The scale hides the soft transparent rim a filter leaves at the edges. */
    filter: blur(4px) saturate(112%);
    transform: scale(1.06);
  }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--ground) 6%, rgba(5,6,10,0.82) 40%, rgba(5,6,10,0.46) 100%),
      linear-gradient(180deg, var(--ground) 0%, transparent 20%, transparent 55%, var(--ground) 98%);
  }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
  @media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; gap: 3rem; } }
  .hero-copy { display: flex; flex-direction: column; gap: 1.7rem; align-items: flex-start; }
  .hero-cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

  .statline { display: grid; grid-template-columns: repeat(3, auto); gap: 2.75rem;
              justify-content: start; margin-top: 0.6rem; width: 100%; }
  @media (max-width: 560px) { .statline { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } }
  .stat { padding-top: 1.2rem; border-top: 1px solid var(--hairline); min-width: 7rem; }
  .stat-n {
    font-size: 1.7rem; font-weight: 700; color: var(--ember-lit);
    font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.03em;
  }
  .stat-l { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.5rem; line-height: 1.4; }

  /* ---------- coverage panel ---------- */
  /* Real glass. The previous fill sat at 88-92% alpha, which made the
     backdrop-filter behind it decorative -- nothing could show through an
     almost-opaque panel. A white sheen over a translucent dark base gives the
     frosted rim, while the base keeps the mono text legible over whatever
     part of the photograph lands behind it. */
  .panel {
    border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.018) 100%),
      rgba(8, 9, 14, 0.44);
    backdrop-filter: blur(32px) saturate(150%);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.17),
      0 40px 100px -45px rgba(0, 0, 0, 0.95),
      0 0 70px -40px rgba(244, 22, 47, 0.5);
    overflow: hidden;
  }
  .panel-bar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .panel-name {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--confirmed);
  }
  .live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--confirmed); box-shadow: 0 0 8px var(--confirmed);
    animation: pulse 2s ease-in-out infinite;
  }
  .panel-body { padding: 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .cov-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 0.9rem; align-items: center;
    padding: 0.8rem 1rem; border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.05);
    font-family: var(--mono); font-size: 0.8rem;
  }
  .cov-mod { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cov-n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
  .tag {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 5px; font-weight: 600; white-space: nowrap;
  }
  .t-ok       { color: var(--confirmed); background: rgba(61,220,151,0.12);  border: 1px solid rgba(61,220,151,0.3); }
  .t-partial  { color: var(--lead);      background: rgba(122,162,247,0.12); border: 1px solid rgba(122,162,247,0.32); }
  .t-untested { color: var(--untested);  background: rgba(240,162,2,0.12);   border: 1px solid rgba(240,162,2,0.32); }
  .t-skipped  { color: var(--skipped);   background: rgba(139,143,163,0.11); border: 1px solid rgba(139,143,163,0.28); }

  .panel-note {
    margin: 0.35rem 0.35rem 0.2rem; padding-top: 0.95rem;
    border-top: 1px solid var(--hairline-2);
    font-family: var(--mono); font-size: 0.7rem; line-height: 1.7; color: var(--ink-3);
  }
  .panel-note b { color: var(--untested); font-weight: 600; }

  /* ---------- ticker ---------- */
  .ticker {
    border-block: 1px solid var(--hairline-2); overflow: hidden;
    padding: 1.15rem 0; position: relative; z-index: 1;
    background: rgba(255,255,255,0.014);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .ticker-track { display: flex; width: max-content; animation: slide 52s linear infinite; }
  .ticker-set { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; }
  .ticker-item {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--ink-3);
    display: flex; align-items: center; gap: 1.1rem; white-space: nowrap;
  }
  .ticker-item::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--ember); flex-shrink: 0;
  }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* ---------- coverage states ---------- */
  .states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  @media (max-width: 900px) { .states { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .states { grid-template-columns: 1fr; } }
  .state {
    border-radius: 16px; padding: 1.5rem; border: 1px solid var(--hairline-2);
    background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 0.7rem;
    border-top-width: 2px;
  }
  .state-name { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; }
  .state p { font-size: 0.85rem; line-height: 1.6; color: var(--ink-3); }
  .s-ok       { border-top-color: var(--confirmed); }
  .s-partial  { border-top-color: var(--lead); }
  .s-untested { border-top-color: var(--untested); }
  .s-skipped  { border-top-color: var(--skipped); }
  .s-ok .state-name       { color: var(--confirmed); }
  .s-partial .state-name  { color: var(--lead); }
  .s-untested .state-name { color: var(--untested); }
  .s-skipped .state-name  { color: var(--skipped); }

  .quote {
    padding: 1.75rem 2rem; border-radius: 16px;
    border: 1px solid var(--hairline-2); border-left: 3px solid var(--ember);
    background: rgba(192, 0, 31, 0.06);
    font-size: 1rem; line-height: 1.75; color: var(--ink-2);
  }
  .quote b { color: var(--ink); font-weight: 600; }
  .quote-stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }

  /* ---------- benchmark ---------- */
  .bench { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  @media (max-width: 780px) { .bench { grid-template-columns: 1fr 1fr; } }
  .bench-cell {
    border: 1px solid var(--hairline-2); border-radius: 16px; padding: 1.6rem;
    background: var(--wine-grad);
  }
  .bench-n { font-size: 2.1rem; font-weight: 700; line-height: 1;
             font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
  .bench-l { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.6rem; line-height: 1.4; }

  /* ---------- split with photo ---------- */
  .split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 3.5rem; align-items: center; }
  @media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }
  .shot {
    border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline);
    box-shadow: 0 40px 100px -55px rgba(244, 22, 47, 0.75);
  }
  .shot img { display: block; width: 100%; height: auto; }

  .num-list { display: flex; flex-direction: column; gap: 0.85rem; }
  .num-item {
    display: flex; gap: 1.1rem; padding: 1.4rem 1.55rem; border-radius: 16px;
    border: 1px solid var(--hairline-2); background: var(--wine-grad);
  }
  .num-item .ico { width: 1.3rem; height: 1.3rem; color: var(--ember-lit); flex-shrink: 0; margin-top: 0.15rem; }
  .num-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
  .num {
    font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
    color: var(--ember-lit); letter-spacing: 0.08em;
  }
  .num-item p { font-size: 0.89rem; line-height: 1.65; }

  /* ---------- deliverable cards ---------- */
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  @media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }
  .card {
    border: 1px solid var(--hairline-2); border-radius: 18px; padding: 1.85rem;
    background: var(--wine-grad);
    backdrop-filter: blur(12px);
    display: flex; flex-direction: column; gap: 0.9rem;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background 0.3s;
  }
  .card p { font-size: 0.89rem; line-height: 1.68; }
  .card .tile { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
  .card .tile .ico { width: 1.2rem; height: 1.2rem; }

  /* ---------- dpdp ---------- */
  /* Caution treatment in the ember family, deliberately NOT in amber: amber is
     the `untested` state colour, and a marketing warning wearing it would blunt
     a signal that has to stay readable in a report. */
  .warn-pill {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.95rem; border-radius: 999px;
    border: 1px solid rgba(244, 22, 47, 0.42);
    background: rgba(192, 0, 31, 0.14);
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ember-lit);
  }
  .warn-pill .ico { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
  .cite { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); line-height: 1.75; }
  .dpdp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  @media (max-width: 560px) { .dpdp-cards { grid-template-columns: 1fr; } }
  .dpdp-card {
    padding: 1.4rem; border-radius: 15px; border: 1px solid var(--hairline-2);
    background: linear-gradient(150deg, rgba(112,16,44,0.34) 0%, rgba(5,6,10,0.5) 100%);
    display: flex; flex-direction: column; gap: 0.6rem;
  }
  .dpdp-card .ico { width: 1.2rem; height: 1.2rem; color: var(--ember-lit); }
  .dpdp-card h3 { font-size: 0.98rem; }
  .dpdp-card p { font-size: 0.83rem; line-height: 1.6; color: var(--ink-3); }

  /* ---------- process ---------- */
  .proc {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--hairline-2); border-radius: 20px; overflow: hidden;
    background: rgba(255,255,255,0.016);
  }
  @media (max-width: 900px) { .proc { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .proc { grid-template-columns: 1fr; } }
  .proc-cell {
    padding: 2rem 1.7rem; display: flex; flex-direction: column; gap: 0.9rem;
    border-right: 1px solid var(--hairline-2);
  }
  .proc-cell:last-child { border-right: 0; }
  @media (max-width: 900px) {
    .proc-cell:nth-child(2n) { border-right: 0; }
    .proc-cell:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-2); }
  }
  @media (max-width: 560px) {
    .proc-cell { border-right: 0; border-bottom: 1px solid var(--hairline-2); }
    .proc-cell:last-child { border-bottom: 0; }
  }
  .proc-when {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ember-lit);
  }
  .proc-cell p { font-size: 0.86rem; line-height: 1.6; color: var(--ink-3); }

  /* ---------- limits ---------- */
  .limits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  @media (max-width: 780px) { .limits { grid-template-columns: 1fr; } }
  .limit {
    display: flex; gap: 0.9rem; align-items: flex-start;
    padding: 1.15rem 1.35rem; border-radius: 14px;
    border: 1px solid var(--hairline-2); background: var(--wine-grad);
    font-size: 0.89rem; color: var(--ink-2); line-height: 1.6;
  }
  .limit .ico { width: 1.15rem; height: 1.15rem; color: var(--ember); flex-shrink: 0; margin-top: 0.15rem; }

  /* ---------- legal panel ---------- */
  .legal {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center;
    padding: 3rem; border-radius: 24px; margin-top: 1.5rem;
    border: 1px solid var(--hairline-2);
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.006) 100%);
    backdrop-filter: blur(14px);
  }
  @media (max-width: 940px) { .legal { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; } }
  .legal h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
  .legal-copy { display: flex; flex-direction: column; gap: 1.2rem; }

  /* ---------- faq ----------
     Built on the native details/summary element rather than JS: keyboard
     operable and screen-reader announced for free, survives with scripting
     disabled, and find-in-page can open a closed answer. */
  .faq { display: flex; flex-direction: column; gap: 0.8rem; }
  .faq details {
    border: 1px solid var(--hairline-2); border-radius: 16px;
    background: var(--wine-grad);
    transition: border-color 0.25s, background 0.3s;
  }
  .faq details[open] { border-color: var(--hairline); background: var(--wine-grad-hot); }
  .faq summary {
    display: flex; align-items: center; gap: 1rem; cursor: pointer;
    padding: 1.25rem 1.5rem; list-style: none;
    font-size: 1rem; font-weight: 650; color: var(--ink); letter-spacing: -0.01em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:focus-visible { outline: 2px solid var(--ember-lit); outline-offset: -2px; border-radius: 16px; }
  .faq-mark {
    margin-left: auto; flex-shrink: 0; width: 1.6rem; height: 1.6rem;
    display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--hairline); color: var(--ember-lit);
    font-family: var(--mono); font-size: 1.05rem; line-height: 1;
    transition: transform 0.25s, background 0.25s;
  }
  .faq details[open] .faq-mark { transform: rotate(45deg); background: rgba(244,22,47,0.14); }
  .faq-body { padding: 0 1.5rem 1.4rem; }
  .faq-body p { font-size: 0.92rem; line-height: 1.72; max-width: 74ch; }
  .faq-body p + p { margin-top: 0.7rem; }
  .faq-more {
    margin-top: 1.5rem; padding: 1.6rem 1.85rem; border-radius: 18px;
    border: 1px solid var(--hairline); background: var(--wine-grad);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
  }
  .faq-more p { font-size: 0.95rem; }
  .faq-more b { color: var(--ink); font-weight: 650; }

  /* ---------- contact ---------- */
  .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; }
  @media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
  .contact-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.5rem; }
  .contact-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.92rem; color: var(--ink-2); }
  .contact-item .ico { width: 1.15rem; height: 1.15rem; color: var(--ember-lit); flex-shrink: 0; }

  .form-card {
    /* The nav's "Free report" button targets this card by id, and the header
       is position:sticky -- without the margin the browser scrolls the card's
       top edge to y=0, where the header is already sitting, and the first
       field lands underneath it. */
    scroll-margin-top: 6rem;
    padding: 2.25rem; border-radius: 22px;
    border: 1px solid var(--hairline-2);
    background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.008) 100%);
    backdrop-filter: blur(16px);
  }
  @media (max-width: 560px) { .form-card { padding: 1.5rem; } }
  form { display: flex; flex-direction: column; gap: 1.1rem; }
  .field { display: flex; flex-direction: column; gap: 0.45rem; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
  label {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3);
  }
  input, textarea, select {
    background: rgba(5,6,10,0.45); border: 1px solid var(--hairline-2);
    border-radius: 11px; padding: 0.8rem 0.95rem; color: var(--ink);
    font-family: var(--sans); font-size: 0.92rem; width: 100%;
    transition: border-color 0.2s;
  }
  input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 0.7; }
  input:focus, textarea:focus, select:focus { border-color: var(--ember); }
  select option { background: var(--panel); color: var(--ink); }
  textarea { resize: vertical; min-height: 7rem; }
  .consent {
    display: flex; gap: 0.8rem; align-items: flex-start;
    padding: 1rem 1.15rem; border-radius: 12px;
    border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
    font-size: 0.85rem; color: var(--ink-2); line-height: 1.55;
    font-family: var(--sans); letter-spacing: normal; text-transform: none;
  }
  .consent input { width: auto; margin-top: 0.2rem; accent-color: var(--ember); flex-shrink: 0; }
  .btn-submit { justify-content: center; width: 100%; padding: 1rem; }

  /* ---------- footer ---------- */
  footer { padding: 4.5rem 0 2.5rem; border-top: 1px solid var(--hairline-2); position: relative; z-index: 1; }
  .foot-cols {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3.5rem;
    padding-bottom: 3rem;
  }
  @media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
  @media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr; gap: 2rem; } }
  .foot-brand { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
  .foot-brand p { font-size: 0.87rem; color: var(--ink-3); max-width: 42ch; line-height: 1.7; }
  .foot-contact { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
  .foot-contact .ico { width: 1.05rem; height: 1.05rem; color: var(--ember-lit); flex-shrink: 0; }
  .foot-contact a { color: var(--ink-2); text-decoration: none; }
  .foot-contact a:hover { color: var(--ember-lit); }

  .foot-col h2 {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink); font-weight: 600;
    margin: 0 0 1.15rem;
  }
  .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
  .foot-col a { font-size: 0.88rem; color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
  .foot-col a:hover { color: var(--ember-lit); }

  .foot-bar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1.5rem; flex-wrap: wrap;
    padding-top: 1.85rem; border-top: 1px solid var(--hairline-2);
  }
  .foot-legal {
    font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3);
    letter-spacing: 0.06em; line-height: 1.7;
  }

  /* ---------- frameworks / compliance ---------- */
  .frameworks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  @media (max-width: 900px) { .frameworks { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .frameworks { grid-template-columns: 1fr; } }
  .fw {
    border: 1px solid var(--hairline-2); border-radius: 18px; padding: 1.65rem;
    background: var(--wine-grad); display: flex; flex-direction: column; gap: 0.75rem;
    transition: border-color 0.25s, background 0.3s;
  }
  .fw-name {
    font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
    color: var(--ember-lit); letter-spacing: 0.02em;
  }
  .fw h3 { font-size: 0.98rem; }
  .fw p { font-size: 0.85rem; line-height: 1.65; color: var(--ink-3); }

  /* ---------- reveal ----------
     WHY THE JS SETS A CUSTOM PROPERTY AND NOT transitionDelay DIRECTLY. JS
     passes a number; CSS keeps the meaning. Written straight to
     el.style.transitionDelay it would also outrank the reduced-motion block
     below, which is the one place the delay must not apply. (Both forms go
     through the CSSOM, which CSP does not police either way -- the CSP rule
     is about style attributes in markup, and neither of these is that.)

     0.55s, down from 0.7s. Combined with the old stagger the last card in a
     row finished 0.94s after it entered the viewport, which at scrolling
     speed means the reader is looking at a blank panel and then it fades in
     under them. That lateness was the complaint. */
  .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,.8,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* Already on screen at first paint. It cannot be "revealed on scroll" --
     there is no scroll -- so it is simply visible, with no transition to sit
     through. The hero runs its own entrance sequence instead. */
  .reveal.at-load { opacity: 1; transform: none; transition: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .live::before, .pill::before { animation: none; }
    .ticker-track { animation: none; }
    .btn:hover, .card:hover { transform: none; }
    .btn:hover .ico { transform: none; }
    html { scroll-behavior: auto; }
  }

  /* ---------- multi-page additions ---------- */
  .nav-links a.is-active { color: var(--ink); }
  .nav-links a.is-active::after {
    content: ""; display: block; height: 2px; margin-top: 5px; border-radius: 2px;
    background: var(--ember-grad);
  }

  /* Interior page hero. Deliberately quieter than the home hero: a visitor
     who lands here already clicked something, so the job is orientation, not
     persuasion. */
  .page-hero { padding: 4.5rem 0 3.5rem; }
  .page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
  .page-hero .lede { max-width: 60ch; font-size: 1.08rem; }
  .page-hero-inner { display: flex; flex-direction: column; gap: 1.35rem; align-items: flex-start; }
  .crumb {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .crumb a { color: var(--ink-3); text-decoration: none; }
  .crumb a:hover { color: var(--ember-lit); }

  /* A service told as the old site told it: what we do, then what it buys you.
     The two-column body is the whole point -- "how it works" is for the
     engineer in the room and "how it helps" is for whoever signs. */
  .detail-list { display: flex; flex-direction: column; gap: 1.15rem; }
  .detail {
    border: 1px solid var(--hairline-2); border-radius: 20px; padding: 2.1rem;
    background: var(--wine-grad); backdrop-filter: blur(14px);
    transition: border-color 0.25s, background 0.3s;
  }
  @media (max-width: 720px) { .detail { padding: 1.5rem; } }
  .detail-head { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 1.1rem; }
  .detail h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 700; }
  .detail-lede { font-size: 0.97rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 78ch; }
  .detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  @media (max-width: 800px) { .detail-split { grid-template-columns: 1fr; gap: 1.1rem; } }
  .detail-col h4 {
    margin: 0 0 0.55rem; font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-lit);
    font-weight: 600;
  }
  .detail-col p { font-size: 0.89rem; line-height: 1.68; }

  /* ---------- tables ---------- */
  .table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--hairline-2); }
  table { border-collapse: collapse; width: 100%; min-width: 40rem; }
  thead th {
    text-align: left; padding: 1rem 1.35rem;
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-3); font-weight: 600;
    border-bottom: 1px solid var(--hairline-2); background: rgba(255,255,255,0.02);
  }
  tbody td {
    padding: 1.15rem 1.35rem; font-size: 0.91rem; color: var(--ink-2);
    border-bottom: 1px solid rgba(255,255,255,0.055); vertical-align: top;
  }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr { transition: background 0.2s; }
  tbody tr:hover { background: rgba(255,255,255,0.022); }
  .t-name { color: var(--ink); font-weight: 650; white-space: nowrap; }
  .t-price {
    font-family: var(--mono); color: var(--ember-lit); font-weight: 600;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .t-free { color: var(--confirmed); }

  /* ---------- dpdp timeline ---------- */
  .dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 760px) { .dates { grid-template-columns: 1fr; } }
  .date-cell {
    border: 1px solid var(--hairline-2); border-radius: 16px; padding: 1.5rem;
    background: var(--wine-grad);
  }
  .date-n {
    font-size: 1.5rem; font-weight: 700; color: var(--ember-lit);
    letter-spacing: -0.02em; line-height: 1.15;
  }
  .date-l { font-size: 0.83rem; color: var(--ink-3); margin-top: 0.5rem; line-height: 1.5; }

  /* ---------- cross-page CTA ---------- */
  .endcap {
    margin-top: 1rem; padding: 2.5rem; border-radius: 22px;
    border: 1px solid var(--hairline); background: var(--wine-grad);
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
  }
  .endcap h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 0.5rem; }
  .endcap p { font-size: 0.93rem; max-width: 56ch; }

  /* ---------- long-form legal documents ----------
     A policy is read differently from a landing page: one column, generous
     leading, and a measure that stops around 72 characters so the eye can
     find the next line without hunting. */
  .doc { max-width: 46rem; }
  .doc h2 {
    font-size: 1.28rem; margin: 3rem 0 1rem; letter-spacing: -0.015em;
    padding-top: 1.75rem; border-top: 1px solid var(--hairline-2);
  }
  .doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2.25rem; }
  .doc p { font-size: 0.97rem; line-height: 1.78; margin-bottom: 1rem; max-width: 72ch; }
  .doc ul { margin: 0 0 1.25rem; padding: 0; list-style: none;
            display: flex; flex-direction: column; gap: 0.7rem; }
  .doc li {
    position: relative; padding-left: 1.5rem; font-size: 0.95rem;
    line-height: 1.72; color: var(--ink-2); max-width: 72ch;
  }
  .doc li::before {
    content: ""; position: absolute; left: 0.25rem; top: 0.72em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--ember);
  }
  .doc .table-wrap { margin-bottom: 1.5rem; }
  .doc-stamp {
    font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3);
    letter-spacing: 0.06em;
  }
  /* The one paragraph in each document that must not be skimmed past. */
  .doc-key {
    padding: 1.5rem 1.75rem; border-radius: 16px; margin: 1.75rem 0 0;
    border: 1px solid var(--hairline); border-left: 3px solid var(--ember);
    background: var(--wine-grad);
  }
  .doc-key p { margin: 0; }
  .doc-key b { color: var(--ink); font-weight: 650; }

  /* ---------- one hover treatment, every panel, every page ----------
     Previously only .card and one other panel glowed, which made every box look
     inert next to them -- a reader notices the panel that does NOT respond
     far more than the one that does. Defined as a single selector list so a
     new panel cannot quietly ship without it.

     Split into two groups: small panels lift, large ones only glow. A 700px
     service panel sliding up 3px reads as a layout jump rather than a hover. */
  .card, .detail, .fw, .bench-cell, .dpdp-card, .date-cell, .limit,
  .num-item, .endcap, .panel, .form-card, .table-wrap,
  .faq details, .quote, .doc-key, .shot, .state, .proc-cell {
    transition: border-color 0.25s, box-shadow 0.3s, transform 0.25s,
                background 0.3s;
  }

  .card:hover, .detail:hover, .fw:hover, .bench-cell:hover, .dpdp-card:hover,
  .date-cell:hover, .limit:hover, .num-item:hover, .endcap:hover {
    border-color: var(--hairline);
    background: var(--wine-grad-hot);
    transform: translateY(-3px);
    box-shadow: 0 0 46px -14px rgba(244, 22, 47, 0.55);
  }

  .panel:hover, .form-card:hover, .table-wrap:hover,
  .faq details:hover, .quote:hover, .doc-key:hover, .shot:hover {
    border-color: var(--hairline);
    box-shadow: 0 0 60px -20px rgba(244, 22, 47, 0.5);
  }
  .faq details:hover { background: var(--wine-grad-hot); }
  .faq details[open] { border-color: var(--hairline); background: var(--wine-grad-hot); }

  /* Process cells are grid children divided by borders rather than boxed, so
     an outer glow would float free of anything. Lit from inside instead. */
  .proc-cell:hover {
    background: linear-gradient(160deg, rgba(112,16,44,0.26), rgba(255,255,255,0.012));
    box-shadow: inset 0 0 40px -12px rgba(244, 22, 47, 0.4);
  }

  /* The four coverage states glow in their OWN colour. These boxes exist to
     teach what ok / partial / untested / skipped mean; flooding them with the
     brand red on hover would work against the one job they have. */
  .s-ok:hover       { border-color: rgba(61,220,151,0.5);  box-shadow: 0 0 42px -14px rgba(61,220,151,0.5); }
  .s-partial:hover  { border-color: rgba(122,162,247,0.5); box-shadow: 0 0 42px -14px rgba(122,162,247,0.5); }
  .s-untested:hover { border-color: rgba(240,162,2,0.5);   box-shadow: 0 0 42px -14px rgba(240,162,2,0.5); }
  .s-skipped:hover  { border-color: rgba(139,143,163,0.45);box-shadow: 0 0 42px -14px rgba(139,143,163,0.45); }
  .state:hover { transform: translateY(-3px); }

  @media (prefers-reduced-motion: reduce) {
    .card:hover, .detail:hover, .fw:hover, .bench-cell:hover, .dpdp-card:hover,
    .date-cell:hover, .limit:hover, .num-item:hover, .endcap:hover,
    .state:hover { transform: none; }
  }

  /* ---------- the small stuff ----------
     A page where the big panels respond and the small ones do not reads as
     half-finished: the eye learns "things here react", then hits a chip that
     does nothing and reads it as broken rather than as static. */

  /* hero eyebrow badge */
  .pill { transition: border-color .25s, background .3s, box-shadow .3s, transform .25s; }
  .pill:hover {
    border-color: rgba(244,22,47,.5); background: rgba(192,0,31,.16);
    box-shadow: 0 0 30px -10px rgba(244,22,47,.75); transform: translateY(-2px);
  }

  /* hero stat figures */
  .stat { transition: border-color .25s, transform .25s; }
  .stat-n { transition: text-shadow .3s; }
  .stat-l { transition: color .25s; }
  .stat:hover { border-top-color: var(--ember-lit); transform: translateY(-3px); }
  .stat:hover .stat-n { text-shadow: 0 0 28px rgba(244,22,47,.65); }
  .stat:hover .stat-l { color: var(--ink-2); }

  /* The marquee pauses under the cursor. It scrolls to be noticed, but a
     reader who wants to actually read an item should not have to chase it. */
  .ticker { transition: background .3s; }
  .ticker:hover { background: rgba(192,0,31,.06); }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .ticker-item { transition: color .25s, text-shadow .3s; cursor: default; }
  .ticker-item:hover { color: var(--ember-lit); text-shadow: 0 0 18px rgba(244,22,47,.6); }

  /* coverage panel rows */
  .cov-row { transition: border-color .25s, background .25s, transform .25s; }
  .cov-row:hover {
    border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08);
    transform: translateX(4px);
  }
  .tag { transition: box-shadow .25s; }
  .cov-row:hover .tag { box-shadow: 0 0 16px -5px currentColor; }


  /* contact list */
  .contact-item { transition: color .25s, transform .25s; }
  .contact-item .ico { transition: filter .25s; }
  .contact-item:hover { color: var(--ink); transform: translateX(4px); }
  .contact-item:hover .ico { filter: drop-shadow(0 0 9px rgba(244,22,47,.95)); }

  /* Icon tiles light with their parent panel, not only on their own hover --
     the tile is inside the box the cursor is already over. */
  .tile { transition: border-color .3s, box-shadow .3s, transform .3s; }
  .card:hover .tile, .detail:hover .tile, .dpdp-card:hover .tile,
  .endcap:hover .tile, .fw:hover .tile, .proc-cell:hover .tile, .tile:hover {
    border-color: rgba(244,22,47,.65);
    box-shadow: 0 0 28px -8px rgba(244,22,47,.8);
    transform: scale(1.06);
  }

  /* dpdp caution pill */
  .warn-pill { transition: border-color .25s, background .3s, box-shadow .3s; }
  .warn-pill:hover {
    border-color: rgba(244,22,47,.75); background: rgba(192,0,31,.24);
    box-shadow: 0 0 32px -10px rgba(244,22,47,.85);
  }


  /* faq rows */
  .faq summary { transition: background .25s, color .2s; border-radius: 16px; }
  .faq summary:hover { background: rgba(255,255,255,.035); }
  .faq-mark { transition: transform .25s, background .25s, border-color .25s, box-shadow .3s; }
  .faq summary:hover .faq-mark {
    border-color: var(--ember-lit); box-shadow: 0 0 20px -4px rgba(244,22,47,.85);
  }

  /* ---------- semantic quote panels ----------
     These carry meaning in their colour, so the glow has to match it. A green
     "we will not claim zero false positives" panel flashing brand red on hover
     reads as an alert, which is the opposite of what it says. The colour
     blooms out of the left edge rather than sitting as a hard rule. */
  .quote { position: relative; overflow: hidden; }
  .quote > * { position: relative; z-index: 1; }
  .quote::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity .35s;
    background: radial-gradient(ellipse 65% 120% at 0% 50%,
                rgba(244,22,47,.20), transparent 72%);
  }
  .quote:hover::after { opacity: 1; }

  .quote-ok   { border-left-color: var(--confirmed); background: rgba(61,220,151,.05); }
  .quote-lead { border-left-color: var(--lead);      background: rgba(122,162,247,.05); }
  .quote-ok::after {
    background: radial-gradient(ellipse 65% 120% at 0% 50%,
                rgba(61,220,151,.18), transparent 72%);
  }
  .quote-lead::after {
    background: radial-gradient(ellipse 65% 120% at 0% 50%,
                rgba(122,162,247,.18), transparent 72%);
  }
  /* No border-left-color here on purpose: the shorthand above fades all four
     sides so the strip dissolves into the glow, matching the red panel. */
  .quote-ok:hover {
    border-color: rgba(61,220,151,.18);
    box-shadow: 0 0 60px -20px rgba(61,220,151,.45);
  }
  .quote-lead:hover {
    border-color: rgba(122,162,247,.18);
    box-shadow: 0 0 60px -20px rgba(122,162,247,.45);
  }

  @media (prefers-reduced-motion: reduce) {
    .pill:hover, .stat:hover, .cov-row:hover,
    .contact-item:hover, .brand:hover .brand-mark { transform: none; }
    .card:hover .tile, .detail:hover .tile,
    .dpdp-card:hover .tile, .endcap:hover .tile, .fw:hover .tile,
    .proc-cell:hover .tile, .tile:hover { transform: none; }
    .ticker:hover .ticker-track { animation-play-state: running; }
  }

  /* ---------- brand mark ---------- */
  /* The artwork is a finished badge -- a red ring stroked on a dark disc with
     the monogram inside it -- so this rule set is deliberately free of chrome.
     The previous logo was a bare monogram and the stylesheet drew the ring;
     re-adding a border or a background here now paints a second ring a few
     pixels outside the artwork's own, which reads as a rendering fault. The
     disc is cut out of its square in build/encode_logo.py, not here.

     border-radius survives that removal for one reason: it is what makes the
     hover glow follow the disc instead of haloing a square. */
  .brand {
    --wordmark: 1.3rem;
    align-items: center; gap: 0.6rem;
  }
  .brand-word { font-size: var(--wordmark); line-height: 1; }
  .brand-mark {
    width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
    display: block;
    transition: box-shadow .3s, transform .3s;
  }
  .brand-logo { width: 100%; height: 100%; display: block; }
  .brand:hover .brand-mark {
    transform: scale(1.07);
    box-shadow: 0 0 22px -4px rgba(244, 22, 47, .95);
  }
  .foot-brand .brand { --wordmark: 1.45rem; }
  .foot-brand .brand-mark { width: 2.35rem; height: 2.35rem; }

  /* Legal lead-in: the callout without the box. A thin accent rule and a
     coloured lead-in carry the emphasis; a filled panel was pulling the eye
     before the headline above it. */
  .doc-lead {
    font-size: 1rem; line-height: 1.8; color: var(--ink-2); max-width: 72ch;
    margin: 0 0 2.5rem; padding-left: 1.15rem;
    border-left: 2px solid rgba(244, 22, 47, .5);
  }
  .doc-lead b { color: var(--ember-lit); font-weight: 650; }


  /* ---------- cursor spotlight ----------
     The glow already reads as the site's signature, so it follows the cursor
     inside a panel rather than sitting in a fixed spot. Positions come from
     --mx/--my, set in JS; the fallback keeps it centred if JS never runs. */
  .card, .detail, .fw, .dpdp-card, .bench-cell, .date-cell, .endcap,
  .limit, .num-item { position: relative; overflow: hidden; }
  .card::after, .detail::after, .fw::after, .dpdp-card::after,
  .bench-cell::after, .date-cell::after, .endcap::after,
  .limit::after, .num-item::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
                rgba(244, 22, 47, .16), transparent 62%);
  }
  .card:hover::after, .detail:hover::after, .fw:hover::after,
  .dpdp-card:hover::after, .bench-cell:hover::after, .date-cell:hover::after,
  .endcap:hover::after, .limit:hover::after,
  .num-item:hover::after { opacity: 1; }
  .card > *, .detail > *, .fw > *, .dpdp-card > *, .bench-cell > *,
  .date-cell > *, .endcap > *, .limit > *, .num-item > * {
    position: relative; z-index: 1;
  }

  /* ---------- hero entrance ----------
     One orchestrated sequence on load rather than effects scattered about. */
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hero-copy > *, .hero .panel { animation: rise .7s cubic-bezier(.22,.8,.3,1) backwards; }
  .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero-copy > *:nth-child(2) { animation-delay: .14s; }
  .hero-copy > *:nth-child(3) { animation-delay: .23s; }
  .hero-copy > *:nth-child(4) { animation-delay: .32s; }
  .hero-copy > *:nth-child(5) { animation-delay: .41s; }
  .hero .panel { animation-delay: .3s; }
  .hero .cov-row { animation: rise .6s cubic-bezier(.22,.8,.3,1) backwards; }
  .hero .cov-row:nth-child(1) { animation-delay: .46s; }
  .hero .cov-row:nth-child(2) { animation-delay: .54s; }
  .hero .cov-row:nth-child(3) { animation-delay: .62s; }
  .hero .cov-row:nth-child(4) { animation-delay: .70s; }
  .hero .cov-row:nth-child(5) { animation-delay: .78s; }

  /* Figures animate up to their value once scrolled into view. Tabular
     numerals stop the box twitching as digit widths change. */
  .stat-n, .bench-n { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    .hero-copy > *, .hero .panel, .hero .cov-row { animation: none; }
    .brand:hover .brand-mark { transform: none; }
    .card::after, .detail::after, .fw::after, .dpdp-card::after,
    .bench-cell::after, .date-cell::after, .endcap::after,
    .limit::after, .num-item::after { display: none; }
  }

  /* The closing call-to-action panel was left out of both the hover and the
     spotlight groups -- the one panel on the page most worth clicking. */
  .faq-more { position: relative; overflow: hidden; }
  .faq-more::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
                rgba(244, 22, 47, .16), transparent 62%);
  }
  .faq-more > * { position: relative; z-index: 1; }
  .faq-more:hover::after { opacity: 1; }
  .faq-more {
    transition: border-color .25s, box-shadow .3s, transform .25s, background .3s;
  }
  .faq-more:hover {
    border-color: var(--hairline); background: var(--wine-grad-hot);
    transform: translateY(-3px);
    box-shadow: 0 0 46px -14px rgba(244, 22, 47, .55);
  }

  /* A callout in a hero was reading louder than the headline above it: full
     card saturation, and wider than the lede so the left-aligned stack had a
     ragged right edge. Matched to the lede measure and dropped to a wash. */
  .doc-key {
    background: linear-gradient(150deg, rgba(112,16,44,.17) 0%, rgba(10,11,17,.14) 100%);
  }
  .page-hero .doc-key { max-width: 60ch; }

  @media (prefers-reduced-motion: reduce) {
    .faq-more:hover { transform: none; }
    .faq-more::after { display: none; }
  }

  /* The CERT-In panel is the largest box on the home page and was the only
     one that never responded -- and it is the one carrying the disclosure we
     most want read. */
  .legal { position: relative; overflow: hidden; }
  .legal > * { position: relative; z-index: 1; }
  .legal::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
                rgba(244, 22, 47, .15), transparent 62%);
  }
  .legal:hover::after { opacity: 1; }
  .legal {
    transition: border-color .25s, box-shadow .3s, background .3s;
  }
  .legal:hover {
    border-color: var(--hairline); background: var(--wine-grad-hot);
    box-shadow: 0 0 60px -20px rgba(244, 22, 47, .5);
  }

  @media (prefers-reduced-motion: reduce) { .legal::after { display: none; } }

  /* ---------- the DPDP handbook ----------
     One long-form document, brought back from the artifact host it used to
     live on. Its markup keeps the structure it was written with -- obligation
     cards, a statutory timeline, penalty tables -- and every class is
     hb-prefixed, because `note`, `row`, `check`, `date`, `scroll` and `lede`
     all already mean something else on this site and a silent collision would
     restyle whichever definition the cascade saw last.

     It reads as a document, not as a landing page: a single measured column,
     generous leading, and colour used only where it carries meaning (a
     deadline that has teeth, a penalty figure, the evidence row on a card).
     The site's ember stays for structure and emphasis and nothing else. */
  .hb-masthead {
    border-bottom: 1px solid var(--hairline-2);
    background: var(--wine-grad);
    padding: 4.5rem 0 3.25rem; margin-bottom: 1rem;
  }
  .hb-kicker {
    font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ember-lit); margin: 0 0 1.25rem;
    display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
  }
  .hb-kicker::before {
    content: ""; width: 26px; height: 2px; background: var(--ember-lit);
  }
  .hb-masthead h1 {
    font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.08; margin: 0 0 1rem;
  }
  .hb-standfirst {
    font-size: 1.18rem; line-height: 1.6; color: var(--ink-2);
    max-width: 60ch; margin: 0 0 2rem;
  }

  /* The three numbers that decide whether the reader keeps reading. */
  .hb-clock {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; background: var(--hairline-2);
    border: 1px solid var(--hairline-2); border-radius: 4px; overflow: hidden;
  }
  .hb-clock > div { background: var(--panel); padding: 1rem 1.15rem; }
  .hb-lbl {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
    display: block; margin-bottom: 0.35rem;
  }
  .hb-val {
    font-family: var(--mono); font-size: 1.18rem; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .hb-val.hb-hot { color: var(--ember-lit); }

  .hb-toc { margin: 3rem 0 0.5rem; }
  .hb-toc h2 {
    font-size: 0.8rem; font-family: var(--mono); font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
    margin: 0 0 1.1rem;
  }
  .hb-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
  .hb-toc li { counter-increment: toc; border-top: 1px solid var(--hairline-2); }
  .hb-toc li:last-child { border-bottom: 1px solid var(--hairline-2); }
  .hb-toc a {
    display: flex; gap: 1rem; align-items: baseline; padding: 0.7rem 0.25rem;
    text-decoration: none; color: var(--ink); transition: background .2s, color .2s;
  }
  .hb-toc a:hover, .hb-toc a:focus-visible {
    background: rgba(244, 22, 47, 0.06); color: var(--ember-lit);
  }
  .hb-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--mono); font-size: 0.75rem; color: var(--ember-lit);
    min-width: 22px; font-variant-numeric: tabular-nums;
  }
  .hb-t { flex: 1; }
  .hb-sub { color: var(--ink-3); font-size: 0.9rem; display: block; }

  .hb-chap {
    border-top: 2px solid var(--ember); padding-top: 0.9rem; margin-bottom: 1.6rem;
  }
  .hb-cn {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ember-lit);
    display: block; margin-bottom: 0.6rem;
  }
  .hb-chap h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 0 0 0.5rem; }
  .hb-chap p { font-size: 1.05rem; color: var(--ink-2); margin: 0; max-width: 60ch; }
  .hb-lede { font-size: 1.08rem; color: var(--ink-2); }

  /* Callouts. Three meanings, three colours, and they are the SEMANTIC four
     from the report -- not decoration. Plain is context, risk is a number
     with teeth, ok is the commercial upside. */
  .hb-note {
    border-left: 3px solid var(--ember); background: rgba(244, 22, 47, 0.055);
    padding: 1rem 1.25rem; margin: 1.6rem 0; border-radius: 0 4px 4px 0;
  }
  .hb-note.hb-risk {
    border-left-color: var(--untested); background: rgba(240, 162, 2, 0.06);
  }
  .hb-note.hb-ok {
    border-left-color: var(--confirmed); background: rgba(61, 220, 151, 0.06);
  }
  .hb-note p { margin: 0; color: var(--ink-2); }
  .hb-note p + p { margin-top: 0.7rem; }
  .hb-note strong { color: var(--ink); }

  /* Obligation cards: the duty, what it means, what to do, and how you would
     prove it. The proof row is the one the rest of the market omits, so it is
     the one row given its own colour. */
  .hb-ob {
    background: var(--panel); border: 1px solid var(--hairline-2);
    border-radius: 6px; margin: 1.4rem 0; overflow: hidden;
  }
  .hb-ob > header {
    padding: 1rem 1.35rem; border-bottom: 1px solid var(--hairline-2);
    display: flex; gap: 0.9rem; align-items: baseline; flex-wrap: wrap;
    background: var(--wine-grad);
  }
  .hb-sec {
    font-family: var(--mono); font-size: 0.72rem; color: var(--ember-lit);
    letter-spacing: 0.08em; white-space: nowrap;
  }
  .hb-ob > header h3 { margin: 0; font-size: 1.1rem; flex: 1 1 260px; }
  .hb-ob dl { margin: 0; }
  .hb-row {
    display: grid; grid-template-columns: 132px 1fr;
    border-top: 1px solid var(--hairline-2);
  }
  .hb-row:first-of-type { border-top: none; }
  .hb-row dt {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3); padding: 0.95rem 0 0.95rem 1.35rem;
  }
  .hb-row dd { margin: 0; padding: 0.95rem 1.35rem 0.95rem 0.5rem; }
  .hb-row dd p { margin: 0; max-width: 58ch; color: var(--ink-2); }
  .hb-row.hb-proof dt { color: var(--confirmed); }
  .hb-row.hb-proof dd p { color: var(--ink); }
  @media (max-width: 620px) {
    .hb-row { grid-template-columns: 1fr; }
    .hb-row dt { padding: 0.9rem 1.35rem 0; }
    .hb-row dd { padding: 0.25rem 1.35rem 0.9rem; }
  }

  .hb-tl {
    list-style: none; margin: 1.6rem 0; padding: 0 0 0 1.6rem;
    border-left: 2px solid var(--hairline-2);
  }
  .hb-tl li { position: relative; padding: 0 0 1.6rem 1.35rem; color: var(--ink-2); }
  .hb-tl li::before {
    content: ""; position: absolute; left: -2.06rem; top: 0.35rem;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--ground); border: 2px solid var(--ink-3);
  }
  .hb-tl li.hb-now::before { border-color: var(--ember-lit); background: var(--ember-lit); }
  .hb-tl li.hb-hot::before { border-color: var(--untested); background: var(--untested); }
  .hb-date {
    font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em; color: var(--ink-3); display: block;
  }
  .hb-tl li.hb-hot .hb-date { color: var(--untested); }
  .hb-tl li.hb-now .hb-date { color: var(--ember-lit); }
  .hb-what { font-weight: 650; color: var(--ink); }

  .hb-scroll {
    overflow-x: auto; margin: 1.5rem 0;
    border: 1px solid var(--hairline-2); border-radius: 6px;
  }
  .hb-scroll table {
    border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 520px;
  }
  .hb-scroll th, .hb-scroll td {
    text-align: left; padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--hairline-2); vertical-align: top;
    color: var(--ink-2);
  }
  .hb-scroll th {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3);
    background: var(--ground-2); font-weight: 400;
  }
  .hb-scroll tbody tr:last-child td { border-bottom: none; }
  .hb-money {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    color: var(--ember-lit); white-space: nowrap;
  }

  .hb-check {
    list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1px;
    background: var(--hairline-2); border: 1px solid var(--hairline-2);
    border-radius: 6px; overflow: hidden;
  }
  .hb-check li {
    background: var(--panel); padding: 0.9rem 1.15rem 0.9rem 2.9rem;
    position: relative; color: var(--ink-2);
  }
  .hb-check li::before {
    content: ""; position: absolute; left: 1.15rem; top: 1.2rem;
    width: 13px; height: 13px;
    border: 1.5px solid var(--ink-3); border-radius: 3px;
  }
  .hb-wk {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ember-lit);
    display: block; margin-bottom: 0.15rem;
  }

  .hb-disclaim {
    margin-top: 4rem; padding: 1.4rem; border: 1px dashed var(--hairline-2);
    border-radius: 6px; font-size: 0.92rem; color: var(--ink-2);
    background: var(--ground-2);
  }
  .hb-disclaim strong { color: var(--ink); }
  .hb-colophon {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--hairline-2);
    font-size: 0.88rem; color: var(--ink-3);
  }

  /* One measured column for the whole document. The site's shell is 88rem,
     which is right for a landing page laid out in panels and much too wide
     for continuous prose -- past about 75 characters the eye loses the start
     of the next line. */
  .hb-doc { max-width: 52rem; margin-inline: auto; padding-bottom: 5rem; }
  .hb-doc section { padding-top: 3.5rem; scroll-margin-top: 5rem; }
  .hb-doc h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
  .hb-doc p, .hb-doc li { color: var(--ink-2); }
  .hb-doc > .shell p { max-width: 66ch; }
  .hb-doc strong { color: var(--ink); }
  .hb-doc a { color: var(--ember-lit); }

  /* ---------- utilities ----------
     These replace 67 inline style= attributes. That was not a tidiness
     exercise: an inline style cannot be hashed, so a single style="" anywhere
     on the site forces `style-src 'unsafe-inline'` into the CSP, and shipping
     the weak directive is a poor look on the site of a company that will tell
     a client to remove theirs. With these classes the site's own CSP has no
     'unsafe-inline' in either direction.

     WHY EVERY SELECTOR IS DOUBLED. An inline style beats every class selector
     in the cascade, so swapping one for a normal single-class rule silently
     loses wherever a more specific rule already sets the same property --
     which shows up as a spacing regression on one page and nowhere else.
     Repeating the class raises specificity to (0,2,0), which beats the
     single-class and element rules above and ties with the compound ones,
     where source order settles it in this block's favour. It is the standard
     way to get inline-style precedence without !important, which cannot be
     overridden later at all. */
  .u-ember.u-ember          { color: var(--ember-lit); }
  .u-ink.u-ink              { color: var(--ink); }
  .u-ink3.u-ink3            { color: var(--ink-3); }
  .u-untested.u-untested    { color: var(--untested); }
  .u-lead.u-lead            { color: var(--lead); }
  .u-confirmed.u-confirmed  { color: var(--confirmed); }
  .u-mono.u-mono            { font-family: var(--mono); }
  .u-fs-095.u-fs-095        { font-size: 0.95rem; }
  .u-abs.u-abs              { position: absolute; }

  .u-pt-1.u-pt-1            { padding-top: 1rem; }
  .u-pt-15.u-pt-15          { padding-top: 1.5rem; }
  .u-pt-35.u-pt-35          { padding-top: 3.5rem; }
  .u-pb-15.u-pb-15          { padding-bottom: 1.5rem; }
  .u-mt-135.u-mt-135        { margin-top: 1.35rem; }
  .u-mt-15.u-mt-15          { margin-top: 1.5rem; }
  .u-mt-16.u-mt-16          { margin-top: 1.6rem; }
  .u-mt-175.u-mt-175        { margin-top: 1.75rem; }
  .u-mt-2.u-mt-2            { margin-top: 2rem; }
  .u-mt-5.u-mt-5            { margin-top: 5rem; }
  .u-mb-15.u-mb-15          { margin-bottom: 1.5rem; }
  .u-mb-2.u-mb-2            { margin-bottom: 2rem; }
  .u-ml-05.u-ml-05          { margin-left: 0.5rem; }

  .u-selfstart.u-selfstart  { align-self: flex-start; margin-top: 0.35rem; }