/* ══ Tokens ══════════════════════════════════════════════════════════
     The shared site palette: black field, white type, brand blue marks. */
  html:has(.provixon-home) {
    --sc-canvas:     #0D0D0D;
    --sc-surface:    #141414;
    --sc-ink:        #FFFFFF;
    --sc-ink-soft:   #A8A8A4;
    --sc-accent:     #2D6CDF;
    --accent-text:   #4A83EC;
    --sc-accent-ink: #FFFFFF;
    --sc-font-display: "Public Sans", system-ui, sans-serif;
    --sc-font-text:    "Public Sans", system-ui, sans-serif;
    --mono:            "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;

    --muted:  #A8A8A4;
    --hair:   #1F1F1F;
    --hair-2: #292929;
    --pass:   #63C88A;
    --gap:    #D4A84B;

    --lift-1: 0 1px 1px rgba(10,37,88,.06), 0 6px 14px -10px rgba(10,37,88,.22);
    --lift-2: 0 1px 2px rgba(10,37,88,.07), 0 18px 34px -20px rgba(10,37,88,.28);

    /* ══ Motion system ═══════════════════════════════════════════════
       Four durations and one easing family for the whole page. Motion is
       only ever allowed to say one of four things: something responded,
       something changed state, something opened, or the system is
       working. Decoration gets no duration. */
    --dur-feedback: 120ms;   /* it heard you: hover, press, focus      */
    --dur-state:    240ms;   /* it changed: selection, status, colour  */
    --dur-open:     340ms;   /* it opened: drawers, evidence, panels   */
    --dur-system:   8s;      /* it is working: the chamber's own clock */
    --ease:         cubic-bezier(.16, 1, .3, 1);
    --ease-system:  cubic-bezier(.4, 0, .5, 1);
  }

  .provixon-home { background: var(--sc-canvas); color: var(--sc-ink); }

  /* Paper tooth. Faint, but it stops every surface reading as a fill. */
  .provixon-home::before {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: .5; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  }

  /* ══ Chrome — a docket line, not a nav bar ═══════════════════════════ */
  .provixon-home .docket {
    position: fixed; inset: 0 0 auto 0; z-index: 40;
    display: flex; align-items: baseline; gap: 20px;
    padding: 13px 26px 11px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
    color: var(--sc-ink-soft);
    background: linear-gradient(var(--sc-canvas) 62%, transparent);
  }
  .provixon-home .docket__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 14px; letter-spacing: -.02em; color: var(--sc-ink); }
  .provixon-home .docket__name { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; align-self: center; }
  .provixon-home .docket__mark { height: 20px; width: auto; display: block; }
  .provixon-home .docket__nav { display: flex; gap: 16px; }
  .provixon-home .docket__nav a { color: var(--sc-ink-soft); text-decoration: none; transition: color var(--dur-feedback) var(--ease); }
  .provixon-home .docket__nav a:hover, .provixon-home .docket__nav a:focus-visible { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 3px; }
  /* Below this the strip cannot hold the nav. The site footer carries the
     same links at every width, so nothing becomes unreachable. */
  @media (max-width: 820px) { .provixon-home .docket__nav { display: none; } }
  .provixon-home .docket__spec { margin-left: auto; }
  .provixon-home .docket__spec b { font-weight: 400; color: var(--sc-ink); border-bottom: 1px solid var(--sc-accent); padding-bottom: 1px; }

  .provixon-home .footline {
    position: sticky; inset: auto 0 0 0; z-index: 30;
    display: flex; gap: 20px; align-items: baseline;
    padding: 10px 26px 12px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--sc-ink-soft);
    background: linear-gradient(transparent, var(--sc-canvas) 42%);
  }
  .provixon-home .footline .sample { margin-left: auto; color: var(--gap); }


  /* ══ Site footer — the page is not allowed to be a dead end ═════════
     Six acts of scroll used to end in a fixed status strip and nothing
     else: no way out for a reader, no internal links for a crawler. */
  .provixon-home .inlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hair); transition: text-decoration-color var(--dur-feedback) var(--ease); }
  .provixon-home .inlink:hover, .provixon-home .inlink:focus-visible { text-decoration-color: currentColor; }

  .provixon-home .sitefoot {
    position: relative; z-index: 2;
    background: var(--sc-canvas);
    border-top: 1px solid var(--hair);
    padding: 54px 0 64px;          /* the bottom clears the fixed footline */
  }
  .provixon-home .sitefoot__in { display: grid; gap: 32px 26px; grid-template-columns: 1fr; }
  .provixon-home .sitefoot__logo { display: block; width: 260px; max-width: 100%; height: auto; margin-bottom: 4px; }
  .provixon-home .sitefoot__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--sc-ink); }
  .provixon-home .sitefoot__line { margin: 9px 0 11px; max-width: 36ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .provixon-home .sitefoot__mail { font-family: var(--mono); font-size: 12px; }
  .provixon-home .sitefoot h2 { margin: 0 0 11px; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .05em; color: var(--muted); }
  .provixon-home .sitefoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .provixon-home .sitefoot a { color: var(--muted); text-decoration: none; font-size: 13px; transition: color var(--dur-feedback) var(--ease); }
  .provixon-home .sitefoot a:hover, .provixon-home .sitefoot a:focus-visible { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 3px; }
  .provixon-home .sitefoot__legal {
    display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: baseline;
    margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hair-2);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
  }
  .provixon-home .sitefoot__legal a { font-family: var(--mono); font-size: 10.5px; }
  .provixon-home .sitefoot__rights { margin-left: auto; }
  @media (min-width: 620px) { .provixon-home .sitefoot__in { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .provixon-home .sitefoot__in { grid-template-columns: 1.6fr repeat(4, 1fr); } }

  .provixon-home main { position: relative; z-index: 2; padding-top: 0; padding-bottom: 34px; }
  /* a flow act following a pinned one starts immediately: the stage has
     already given the reader a full viewport of travel. */
  .provixon-home [data-sc-act="pin"] + .sc-section, .provixon-home [data-sc-act="pan"] + .sc-section {
    padding-block: 26px 64px;
  }

  /* ══ Shared ═════════════════════════════════════════════════════════ */
  .provixon-home .wrap { width: min(1120px, 100% - 2 * var(--sc-gutter, 26px)); margin-inline: auto; }
  .provixon-home .lede { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
  .provixon-home .prose { font-size: 16px; line-height: 1.65; color: var(--sc-ink-soft); max-width: 56ch; text-wrap: pretty; }
  .provixon-home .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--sc-ink-soft); }


  /* ══ Interaction system ════════════════════════════════════════════
     One focus treatment everywhere, so a keyboard user is never guessing
     which affordance they are on. Never remove an outline without
     replacing it with something at least as visible. */
  .provixon-home :where(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .provixon-home #verdict :where(a, button, input, [tabindex]):focus-visible { outline-color: #FF7A82; }

  /* hover and focus are the same affordance: inspection */
  .provixon-home .gate { cursor: help; }
  .provixon-home .gate:focus-visible .gate__check, .provixon-home .gate:hover .gate__check { opacity: 1; }

  /* the system reports what it is doing */
  html[data-audit="fetching"] .provixon-home .go { opacity: .55; pointer-events: none; }
  html[data-audit="fetching"] .provixon-home .intake__line { border-color: var(--sc-ink-soft); }
  html[data-audit="error"] .provixon-home .intake__line { border-color: var(--sc-accent); }

  /* status is never carried by colour alone */
  .provixon-home .slide__state::before { content: "● "; }
  .provixon-home .slide--ok .slide__state::before   { content: "✓ "; }
  .provixon-home .slide--bad .slide__state::before  { content: "✕ "; }
  .provixon-home .slide--warn .slide__state::before { content: "! "; }
  .provixon-home .slide--unknown .slide__state { color: var(--muted); }
  .provixon-home .slide--unknown .slide__state::before { content: "– "; }
  .provixon-home .slide--unknown .slide__score { color: var(--muted); }

  /* ══ Reduced motion ════════════════════════════════════════════════
     One global stop. Nothing on this page depends on motion to be
     understood, so honouring the preference costs the reader nothing. */
  @media (prefers-reduced-motion: reduce) {
    .provixon-home *, .provixon-home *::before, .provixon-home *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ══ ACT 1 — the bench ══════════════════════════════════════════════ */
  .provixon-home .bench { display: grid; gap: 34px; align-content: center; min-height: 100%; padding-block: 74px 44px; }
  .provixon-home .bench > * { min-width: 0; }
  @media (min-width: 940px) { .provixon-home .bench { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } }
  .provixon-home .bench__title { font-size: clamp(2rem, 1.2rem + 2.7vw, 3.3rem); margin: 14px 0 16px; }
  .provixon-home .bench__title em { font-style: normal; color: var(--accent-text); }

  /* An intake written on the mat: a ruled line, not a field in a box. */
  .provixon-home .intake { margin-top: 30px; max-width: 460px; }
  .provixon-home .intake__line { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.5px solid var(--sc-ink); padding-bottom: 7px; }
  .provixon-home .intake__line:focus-within { border-color: var(--sc-accent); }
  .provixon-home .intake__pre { font-family: var(--mono); font-size: 12px; color: var(--sc-ink-soft); }
  .provixon-home .intake input {
    flex: 1; border: 0; background: transparent; padding: 2px 0;
    font-family: var(--mono); font-size: 18px; color: var(--sc-ink); min-width: 0;
  }
  .provixon-home .intake input::placeholder { color: var(--muted); }
  .provixon-home .intake input:focus { outline: none; }
  .provixon-home .go {
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-text);
    background: none; border: 0; padding: 2px 0; cursor: pointer; white-space: nowrap;
    border-bottom: 1.5px solid transparent;
  }
  .provixon-home .go:hover { border-bottom-color: var(--sc-accent); }
  .provixon-home .go:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
  .provixon-home .intake__note { margin-top: 11px; font-size: 13px; color: var(--sc-ink-soft); }

  /* ══ The diagnostic chamber ═══════════════════════════════════════
     One living object with two modes. Before a URL is submitted it
     demonstrates what the audit checks; after, it becomes the visitor's
     own audit. Never claims a result it has not measured. */
  .provixon-home .chamber {
    background: var(--sc-surface); border-radius: 4px; box-shadow: var(--lift-2);
    overflow: hidden; display: flex; flex-direction: column;
  }
  .provixon-home .chamber__chrome {
    display: flex; align-items: center; gap: 10px; padding: 10px 13px;
    border-bottom: 1px solid var(--hair-2);
    font-family: var(--mono); font-size: 11px; color: var(--sc-ink-soft);
  }
  .provixon-home .chamber__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); flex: none; }
  .provixon-home .chamber__url {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--sc-ink);
  }
  .provixon-home .chamber__url.is-placeholder { color: var(--muted); }
  .provixon-home .chamber__mode { font-size: 10px; letter-spacing: .1em; color: var(--muted); flex: none; }

  .provixon-home .chamber__stage { position: relative; aspect-ratio: 1.42 / 1; }
  .provixon-home .chamber__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  .provixon-home .route-bed  { fill: none; stroke: var(--hair-2); stroke-width: 2.5; }
  .provixon-home .route-live {
    fill: none; stroke: var(--sc-ink); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1;
    animation: routeDraw var(--dur-system) var(--ease-system) infinite;
  }
  @keyframes routeDraw {
    0%      { stroke-dashoffset: 1; }
    28%     { stroke-dashoffset: .56; }   /* reaches the capture gate */
    38%     { stroke-dashoffset: .56; }   /* stalls there */
    62%     { stroke-dashoffset: .56; }
    72%,100%{ stroke-dashoffset: 1; }     /* quiet reset */
  }

  .provixon-home .signal-dot { animation: signalFade var(--dur-system) steps(1) infinite; }
  @keyframes signalFade {
    0%,4%    { opacity: 0; }
    6%,68%   { opacity: 1; }
    70%,100% { opacity: 0; }
  }
  .provixon-home .signal-dot circle { animation: signalState var(--dur-system) var(--ease-system) infinite; }
  @keyframes signalState {
    0%,30%   { fill: #4A83EC; r: 5.5px; }
    36%      { fill: #2D6CDF; r: 7px; }
    52%      { fill: #2D6CDF; r: 5.5px; }
    68%      { fill: #2D6CDF; r: 5.5px; }
    70%,100% { fill: #4A83EC; r: 5.5px; }
  }

  .provixon-home .gate { position: absolute; transform: translate(-50%, -50%); }
  .provixon-home .gate__ring {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--hair); background: var(--sc-surface);
  }
  .provixon-home .gate__label {
    position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
    color: var(--sc-ink-soft); white-space: nowrap;
  }
  .provixon-home .gate__check {
    position: absolute; left: 50%; top: 36px; transform: translateX(-50%);
    font-size: 10.5px; color: var(--muted); white-space: nowrap;
    opacity: 0; transition: opacity var(--dur-feedback) var(--ease);
  }
  .provixon-home .gate:hover .gate__check, .provixon-home .gate:focus-within .gate__check { opacity: 1; }

  /* gates light as the signal reaches them, and the ones after the break
     lose power — that is the whole argument, stated in motion */
  .provixon-home .gate--1 .gate__ring { animation: litOk var(--dur-system) steps(1) infinite; }
  .provixon-home .gate--2 .gate__ring { animation: litOk var(--dur-system) steps(1) infinite .9s; }
  .provixon-home .gate--3 .gate__ring { animation: litBad var(--dur-system) var(--ease-system) infinite; }
  .provixon-home .gate--4 .gate__ring, .provixon-home .gate--5 .gate__ring { animation: dimmed var(--dur-system) steps(1) infinite; }
  @keyframes litOk {
    0%,10%  { border-color: var(--hair); }
    11%,68% { border-color: var(--sc-ink); }
    69%,100%{ border-color: var(--hair); }
  }
  @keyframes litBad {
    0%,32%  { border-color: var(--hair); box-shadow: none; }
    36%     { border-color: var(--sc-accent); box-shadow: 0 0 0 0 rgba(229,57,70,.5); }
    52%     { border-color: var(--sc-accent); box-shadow: 0 0 0 10px rgba(229,57,70,0); }
    68%     { border-color: var(--sc-accent); }
    70%,100%{ border-color: var(--hair); box-shadow: none; }
  }
  @keyframes dimmed {
    0%,35%   { opacity: 1; }
    40%,68%  { opacity: .3; }    /* downstream loses power */
    70%,100% { opacity: 1; }
  }
  .provixon-home .gate--4 .gate__label, .provixon-home .gate--5 .gate__label { animation: dimmed var(--dur-system) steps(1) infinite; }

  .provixon-home .chamber__foot {
    padding: 9px 13px; border-top: 1px solid var(--hair-2);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--muted);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; min-height: 30px; align-items: center;
  }
  .provixon-home .chamber__verdict { color: var(--accent-text); animation: verdictBlink var(--dur-system) steps(1) infinite; }
  @keyframes verdictBlink { 0%,36% { opacity: 0; } 40%,68% { opacity: 1; } 70%,100% { opacity: 0; } }
  .provixon-home .chamber[data-paused] *, .provixon-home .chamber[data-paused] *::before, .provixon-home .chamber[data-paused] *::after {
    animation-play-state: paused !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .provixon-home .route-live, .provixon-home .signal-dot, .provixon-home .signal-dot circle, .provixon-home .gate__ring, .provixon-home .gate__label, .provixon-home .chamber__verdict { animation: none; }
    .provixon-home .signal-dot animateMotion { display: none; }
    .provixon-home .route-live { stroke-dashoffset: .56; }
    .provixon-home .signal-dot circle { fill: #2D6CDF; }
    .provixon-home .gate--3 .gate__ring { border-color: var(--sc-accent); }
    .provixon-home .gate--4 .gate__ring, .provixon-home .gate--5 .gate__ring { opacity: .3; }
    .provixon-home .chamber__verdict { opacity: 1; }
  }


  /* ══ Audit state ═══════════════════════════════════════════════════
     Once a real result lands, the demonstration loop stops and the same
     elements carry measured states. The page must never animate a
     hypothetical break over a real one. */
  html[data-audit="fetching"] .provixon-home .chamber__dot { animation: pulseDot 900ms ease-in-out infinite; }
  @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

  html[data-audit="complete"] .provixon-home .route-live, html[data-audit="partial"] .provixon-home  .route-live, html[data-audit="complete"] .provixon-home .signal-dot, html[data-audit="partial"] .provixon-home  .signal-dot, html[data-audit="complete"] .provixon-home .gate__ring, html[data-audit="partial"] .provixon-home  .gate__ring, html[data-audit="complete"] .provixon-home .gate__label, html[data-audit="partial"] .provixon-home  .gate__label, html[data-audit="complete"] .provixon-home .chamber__verdict, html[data-audit="partial"] .provixon-home  .chamber__verdict { animation: none; }
  html[data-audit="complete"] .provixon-home .route-live, html[data-audit="partial"] .provixon-home  .route-live { stroke-dashoffset: 0; opacity: .35; }
  html[data-audit="complete"] .provixon-home .signal-dot, html[data-audit="partial"] .provixon-home  .signal-dot { opacity: 0; }
  html[data-audit="complete"] .provixon-home .chamber__verdict, html[data-audit="partial"] .provixon-home  .chamber__verdict { opacity: 1; }

  /* measured gate states */
  .provixon-home .gate[data-state="pass"] .gate__ring     { border-color: var(--pass); }
  .provixon-home .gate[data-state="gap"] .gate__ring      { border-color: var(--gap); }
  .provixon-home .gate[data-state="critical"] .gate__ring { border-color: var(--sc-accent); box-shadow: 0 0 0 5px rgba(229,57,70,.14); }
  .provixon-home .gate[data-state="unknown"] .gate__ring  { border-color: var(--hair); border-style: dashed; }
  .provixon-home .gate[data-state="critical"] .gate__label { color: var(--accent-text); }
  .provixon-home .gate[data-state="unknown"] .gate__label  { color: var(--muted); }
  .provixon-home .gate[data-state] .gate__check { opacity: 0; }
  .provixon-home .gate[data-state]:hover .gate__check, .provixon-home .gate[data-state]:focus-within .gate__check { opacity: 1; }
  .provixon-home .gate__state {
    position: absolute; left: 50%; top: 36px; transform: translateX(-50%);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
    color: var(--sc-ink-soft); white-space: nowrap;
  }
  .provixon-home .gate[data-state] .gate__check { top: 52px; }
  .provixon-home .gate[data-state="pass"] .gate__state::before, .provixon-home .layer-row[data-state="pass"] .layer-row__state::before { content: "✓ "; }
  .provixon-home .gate[data-state="gap"] .gate__state::before, .provixon-home .layer-row[data-state="gap"] .layer-row__state::before { content: "! "; }
  .provixon-home .gate[data-state="critical"] .gate__state::before, .provixon-home .layer-row[data-state="critical"] .layer-row__state::before { content: "✕ "; }
  .provixon-home .gate[data-state="unknown"] .gate__state::before, .provixon-home .layer-row[data-state="unknown"] .layer-row__state::before { content: "– "; }

  html[data-audit="error"] .provixon-home .chamber__verdict { opacity: 1; }

  /* ══ ACT 2 — an inspection interface, not a list ═══════════════════
     One layer opens at a time and the others recede, so the reader is
     always looking at one thing. Evidence lives inside the open row: what
     the audit checks, and once a real audit has run, what it actually
     found on their page. */
  .provixon-home .exploded { position: relative; margin-top: 40px; }
  .provixon-home .layer-row {
    display: grid; grid-template-columns: 46px 1fr max-content; gap: 20px; align-items: start;
    padding: 15px 0; border-bottom: 1px solid var(--hair-2);
    background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%;
    text-align: left; font: inherit; color: inherit; cursor: pointer;
    transition: opacity var(--dur-state) var(--ease);
  }
  .provixon-home .layer-row:first-of-type { border-top: 1px solid var(--hair); }
  .provixon-home .layer-row:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
  .provixon-home .exploded[data-open] .layer-row { opacity: .42; }
  .provixon-home .exploded[data-open] .layer-row[aria-expanded="true"] { opacity: 1; }

  .provixon-home .layer-row__n { font-family: var(--mono); font-size: 11px; color: var(--sc-ink-soft); letter-spacing: .08em; padding-top: 3px; }
  .provixon-home .layer-row__t { font-family: var(--sc-font-display); font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; }
  .provixon-home .layer-row__d { font-size: 14.5px; line-height: 1.6; color: var(--sc-ink-soft); margin-top: 6px; max-width: 60ch; }
  .provixon-home .layer-row__status { justify-self: end; margin-top: 3px; }
  .provixon-home .layer-row__state {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
    color: var(--sc-ink-soft); white-space: nowrap;
  }

  /* the evidence drawer */
  .provixon-home .evidence {
    overflow: hidden; height: 0;
    transition: height var(--dur-open) var(--ease);
  }
  .provixon-home .evidence__in { opacity: 0; transition: opacity var(--dur-state) 60ms; }
  .provixon-home .layer-row[aria-expanded="true"] + .evidence .evidence__in { opacity: 1; }
  .provixon-home .evidence__grid { display: grid; gap: 18px 34px; padding: 4px 0 22px; }
  @media (min-width: 820px) { .provixon-home .evidence__grid { grid-template-columns: 1fr 1fr; } }
  .provixon-home .evidence__k {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
    color: var(--sc-ink-soft); margin-bottom: 8px;
  }
  .provixon-home .evidence__list { display: grid; gap: 7px; font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-soft); }
  .provixon-home .evidence__list div { padding-left: 15px; position: relative; }
  .provixon-home .evidence__list div::before {
    content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--hair);
  }
  .provixon-home .evidence__found { color: var(--sc-ink); }
  .provixon-home .evidence__found div::before { background: var(--sc-accent); }
  .provixon-home .evidence__empty { font-size: 13px; color: var(--muted); font-style: italic; }

  @media (prefers-reduced-motion: reduce) {
    .provixon-home .layer-row, .provixon-home .evidence, .provixon-home .evidence__in, .provixon-home .layer-row__mark { transition: none; }
  }

  /* ══ ACT 3 — specimen slides on the rail ════════════════════════════ */
  .provixon-home .rail { display: flex; gap: 30px; align-items: center; min-height: 100%; padding-block: 74px 40px; padding-inline: var(--sc-gutter, 26px); }
  .provixon-home .rail__lead { flex: 0 0 min(330px, 76vw); }
  .provixon-home .slide { flex: 0 0 min(272px, 74vw); position: relative; padding-top: 10px; }
  /* the two failures are physically larger. hierarchy carries the state. */
  .provixon-home .slide--bad { flex-basis: min(348px, 82vw); }
  .provixon-home .slide__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--sc-ink-soft); }
  .provixon-home .slide__t { font-family: var(--sc-font-display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; margin: 7px 0 16px; }
  .provixon-home .slide__score { font-family: var(--mono); font-size: 54px; line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .provixon-home .slide--bad .slide__score { font-size: 78px; color: var(--accent-text); }
  .provixon-home .slide__state { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; margin-top: 10px; color: var(--sc-ink-soft); }
  .provixon-home .slide--bad .slide__state { margin-top: 36px; }
  .provixon-home .slide--bad .slide__state { color: var(--accent-text); }
  .provixon-home .slide--ok .slide__state { color: var(--pass); }
  .provixon-home .slide--warn .slide__state { color: var(--gap); }
  .provixon-home .slide__why { font-size: 14px; line-height: 1.6; color: var(--sc-ink-soft); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
  /* selection reveals the evidence behind the state, not a bigger number */
  .provixon-home .slide__evidence {
    margin-top: 12px; overflow: hidden; height: 0;
    transition: height var(--dur-open) var(--ease);
  }
  .provixon-home .slide__evidence-in { padding-top: 12px; border-top: 1px dashed var(--hair); }
  .provixon-home .slide__evidence-k {
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    color: var(--sc-ink-soft); margin-bottom: 7px;
  }
  .provixon-home .slide__evidence-list { display: grid; gap: 5px; font-size: 12.5px; line-height: 1.5; color: var(--sc-ink-soft); }
  .provixon-home .slide.is-selected .slide__t { color: var(--sc-accent); }
  @media (prefers-reduced-motion: reduce) { .provixon-home .slide__evidence { transition: none; } }
  /* The inspector's ring, drawn by hand, only ever around a failure.
     It is anchored to the NUMBER, not to a fixed offset in the slide: the
     title above it is [data-demo] and disappears the moment a real audit
     lands, which used to slide the whole column up and leave the ring drawn
     around the wrong thing. It was also hard-coded onto the two slides the
     DEMONSTRATION fails, so after a real audit it could sit around a layer
     that had passed — a drawn claim the result did not support. Both are now
     structural: the box owns the ring, the state decides if it shows. */
  /* the padding (cancelled by the margin) is what the ring is drawn around;
     an <svg> is a replaced element, so inset alone will not stretch it */
  .provixon-home .slide__scorebox {
    position: relative; display: inline-block;
    padding: 12px 15px; margin: -12px -15px;
  }
  .provixon-home .ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
    opacity: 0; transition: opacity var(--dur-state) var(--ease);
  }
  .provixon-home .ring path { fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linecap: round; }
  .provixon-home .slide--bad .ring { opacity: .72; }
  @media (prefers-reduced-motion: reduce) { .provixon-home .ring { transition: none; } }

  /* ══ ACT 4 — the verdict, in the navy room ═════════════════════════ */
  .provixon-home #verdict {
    /* painted, not drifted: the drift animates the ground across the act, so
       inverting the type in CSS made light text sit on a still-light ground
       at p=0. A solid fill keeps the room navy from the first frame. */
    background: #0A2558;
    --sc-ink: #EEF2F8;
    --sc-ink-soft: #9BAAC2;
    --accent-text: #FF7A82;      /* red lifted for a dark ground */
    color: var(--sc-ink);
  }
  .provixon-home #verdict .prose { color: var(--sc-ink-soft); }
  .provixon-home #verdict .tag { color: var(--sc-ink-soft); }
  .provixon-home #verdict .route { stroke: #3C5480; }
  .provixon-home #verdict .lane--keep .route { stroke: #FF5A64; }
  .provixon-home #verdict .rowlabel { color: var(--sc-ink-soft); }
  .provixon-home #verdict .rowlabel--keep { color: var(--accent-text); }
  .provixon-home #verdict .cause__k { color: var(--accent-text); }

  /* ══ ACT 4 — the verdict ════════════════════════════════════════════ */
  .provixon-home .verdict { display: grid; place-items: center; height: 100%; padding: 74px 0 44px; }
  .provixon-home .converge { width: min(880px, 100% - 2 * var(--sc-gutter, 26px)); }
  .provixon-home .converge__figure { position: relative; height: 250px; margin-top: 14px; }
  .provixon-home .converge__figure svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

  /* BEAT 2 · The route is infrastructure; the LEADS moving along it are the
     story. This used to be five lines drawing themselves into a point, which
     said "a line stopped" — a subtraction, and easy to miss. Now you watch
     people travel, and on a broken handoff you watch them reach the break,
     queue behind it, and go out. Loss you can see happening.
     Everything is a pure function of --sc-p, so it scrubs in both directions. */
  .provixon-home .lane { --reach: 1; --stall: 1; }
  .provixon-home .lane--keep { --reach: .62; --stall: .62; }

  .provixon-home .route {
    fill: none; stroke: #3C5480; stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 1;
    --t: clamp(0, (var(--sc-p, 0) - var(--start, .15)) / .13, 1);
    stroke-dashoffset: calc(1 - var(--t) * var(--reach));
    /* BEAT 3 · what survived loses its point once the journey fails */
    --dim: clamp(0, (var(--sc-p, 0) - .50) / .10, 1);
    opacity: calc(1 - .68 * var(--dim));
  }
  .provixon-home .lane--keep .route { stroke: #FF5A64; stroke-width: 3.5; opacity: 1; }

  /* the travellers. offset-path puts them ON the route, so the geometry is
     stated once — move the route and they follow it. */
  .provixon-home .lead {
    fill: #8FB0E4;
    offset-path: var(--route); offset-rotate: 0deg;
    --a: calc(var(--sc-p, 0) - var(--start, .15) - var(--d, 0));
    --t: clamp(0, var(--a) / .17, 1);
    offset-distance: calc(var(--t) * var(--stall) * 100%);
    opacity: clamp(0, var(--a) / .015, 1);
    --dim: clamp(0, (var(--sc-p, 0) - .50) / .10, 1);
    fill-opacity: calc(1 - .8 * var(--dim));
  }
  /* on a broken handoff they stop short, each a little further back than the
     last — a queue against the break, not a single dot */
  .provixon-home .lane--keep .lead { fill: #FF5A64; }
  .provixon-home .lane--keep .lead--q2 { --stall: .558; }
  .provixon-home .lane--keep .lead--q3 { --stall: .500; }
  .provixon-home .lane--keep .lead {
    --out: clamp(0, (var(--sc-p, 0) - .50) / .09, 1);
    fill-opacity: calc(1 - .66 * var(--out));
    translate: 0 calc(var(--out) * 5px);
  }

  /* the sever itself, marked exactly where they pile up */
  .provixon-home .brk {
    fill: none; stroke: #FF5A64; stroke-width: 2.5; stroke-linecap: round;
    offset-path: var(--route); offset-rotate: 0deg; offset-distance: 62%;
    opacity: 0;
  }
  .provixon-home .lane--keep .brk {
    --b: clamp(0, (var(--sc-p, 0) - .40) / .05, 1);
    opacity: calc(var(--b) * .9);
  }

  /* BEAT 3 · the endpoint almost lights, then goes dark */
  .provixon-home .endpoint {
    --rise: clamp(0, (var(--sc-p, 0) - .44) / .05, 1);
    --die:  clamp(0, (var(--sc-p, 0) - .53) / .05, 1);
    opacity: calc(var(--rise) * (1 - var(--die)));
  }
  .provixon-home .endpoint-dead {
    --d: clamp(0, (var(--sc-p, 0) - .56) / .05, 1);
    opacity: var(--d);
  }

  /* BEAT 6 · one thin corrective route, so they leave with resolve */
  .provixon-home .flow-fix {
    fill: none; stroke: #63C88A; stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 1;
    --f: clamp(0, (var(--sc-p, 0) - .88) / .09, 1);
    stroke-dashoffset: calc(1 - var(--f));
  }
  .provixon-home .endpoint-fixed {
    --f: clamp(0, (var(--sc-p, 0) - .93) / .05, 1);
    opacity: var(--f);
  }

  /* Anchored to where its own route starts, as a % of the figure. The figure
     is taller on small screens and the SVG stretches to fill it, so pixel tops
     tuned against 250px drifted further out of line with every row down. */
  .provixon-home .rowlabel {
    position: absolute; left: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
    color: var(--sc-ink-soft); white-space: nowrap;
    translate: 0 -50%;
    --in: clamp(0, (var(--sc-p, 0) - var(--start, 0)) / .05, 1);
    --dim: clamp(0, (var(--sc-p, 0) - .50) / .10, 1);
    opacity: calc(var(--in) * (1 - .62 * var(--dim)));
    transform: translateX(calc((1 - var(--in)) * -10px));
  }
  .provixon-home .rowlabel--keep { color: var(--accent-text); }
  .provixon-home .rowlabel--keep { --dimkeep: 0; opacity: var(--in); }

  /* BEAT 4 · hold the absence, THEN produce the verdict from the evidence */
  .provixon-home .cause {
    margin-top: 30px;
    --t2: clamp(0, (var(--sc-p, 0) - .72) / .12, 1);
    opacity: var(--t2);
    transform: translateY(calc((1 - var(--t2)) * 12px));
  }
  .provixon-home .cause__k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent-text); }
  .provixon-home .cause__h { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.6rem, 1rem + 2.1vw, 2.7rem); line-height: 1.05; letter-spacing: -.035em; margin: 12px 0 0; text-wrap: balance; }

  /* Post-result action — appears once a real audit has run (see paint() in
     homepage.js). Never shown against the DEMONSTRATION copy: the audit is
     ungated, so this is the only gate between "we found a gap" and "talk to
     someone about it". */
  .provixon-home .cause__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
  .provixon-home .cause__action {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sc-font-display); font-weight: 600; font-size: 14.5px;
    padding: 11px 22px; border-radius: 2px; text-decoration: none;
    transition: opacity var(--dur-feedback) var(--ease), transform var(--dur-feedback) var(--ease);
  }
  .provixon-home .cause__action:hover { opacity: .86; transform: translateY(-1px); }
  .provixon-home .cause__action--primary { background: var(--accent-text); color: #06101F; }
  .provixon-home .cause__action--secondary { border: 1px solid var(--hair-2); color: var(--sc-ink); }

  /* ══ ACT 5 — the repair ═════════════════════════════════════════════ */
  .provixon-home .repairs { margin-top: 36px; display: grid; gap: 0; }
  .provixon-home .repair {
    display: grid; gap: 8px 26px; padding: 19px 0;
    border-bottom: 1px solid var(--hair-2);
  }
  @media (min-width: 880px) { .provixon-home .repair { grid-template-columns: 170px 1fr; align-items: baseline; } }
  .provixon-home .repair:first-child { border-top: 1px solid var(--hair); }
  .provixon-home .repair__k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--accent-text); }
  .provixon-home .repair--soft .repair__k { color: var(--sc-ink-soft); }
  .provixon-home .repair__h { font-family: var(--sc-font-display); font-size: clamp(1.15rem, .95rem + .8vw, 1.55rem); font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; }
  .provixon-home .creds { display: flex; flex-wrap: wrap; gap: 14px 46px; margin-top: 34px; }
  .provixon-home .creds div { font-size: 13.5px; color: var(--sc-ink-soft); }
  .provixon-home .creds b { font-family: var(--sc-font-display); font-size: 26px; font-weight: 700; letter-spacing: -.035em; color: var(--sc-ink); display: block; margin-bottom: 2px; }

  /* ══ ACT 6 — close ══════════════════════════════════════════════════ */
  .provixon-home .close { display: grid; place-items: center; height: 100%; padding: 74px 0 52px; }
  .provixon-home .close__in { width: min(760px, 100% - 2 * var(--sc-gutter, 26px)); }
  .provixon-home .close__h { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); letter-spacing: -.035em; line-height: 1.06; margin: 12px 0 8px; text-wrap: balance; }

  @media (prefers-reduced-motion: reduce) {
    .provixon-home .rowlabel { opacity: 1; }
    .provixon-home .cause { opacity: 1; transform: none; }
    .provixon-home .route { stroke-dashoffset: 0; opacity: .32; }
    .provixon-home .lane--keep .route { stroke-dashoffset: .38; opacity: 1; }
    .provixon-home .lane--keep .brk { opacity: .9; }
    .provixon-home .endpoint { opacity: 0; }
    .provixon-home .endpoint-dead { opacity: 1; }
    .provixon-home .flow-fix { stroke-dashoffset: 0; }
    .provixon-home .endpoint-fixed { opacity: 0; }
  }
  @media (max-width: 700px) {
    /* the footline wraps to two lines at this width — give it more room */
    .provixon-home .sitefoot { padding-bottom: 88px; }
    .provixon-home .layout { aspect-ratio: 4 / 5; }
    .provixon-home .converge__figure { height: 300px; }
    /* the state word is the whole point of the label; wrap rather than ellipse
       away exactly the part the reader came for */
    .provixon-home .rowlabel {
      max-width: 38%; white-space: normal; overflow: visible;
      font-size: 10px; line-height: 1.3; letter-spacing: .03em;
    }
    .provixon-home .layer-row { grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 4px; }
    .provixon-home .layer-row__status { grid-column: 2; justify-self: start; margin-top: 0; }
    .provixon-home .gate--5 .gate__state { left: auto; right: 0; transform: none; }
    .provixon-home .layer-row:nth-child(n) { padding-left: 0; }
  }