:root{
    --paper:#FFFFFF;
    --ink:#212121;          /* brand: "Not actually black" */
    --rule:#DDDDDA;
    --rule-strong:#B7B7B3;
    --muted:#63635F;
    --signal:var(--ink);    /* monochrome for now — brand's Frosty Sky blue held in reserve */
    --measure:640px;
    --wrap:1160px;
    --head:'League Spartan', 'Helvetica Neue', Arial, sans-serif;   /* brand header face */
    --body:'Montserrat', 'Helvetica Neue', Arial, sans-serif;       /* brand body face */
    --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* technical/data labels only — not in brandbook */
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,p,ul,ol,figure{margin:0;}
  ul{padding:0;list-style:none;}
  a{color:inherit;}
  img,svg{display:block;max-width:100%;}

  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
  .measure{max-width:var(--measure);}

  a:focus-visible,button:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:3px;
  }

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

  /* ---------- type ---------- */
  .h-display{
    font-family:var(--head);
    font-weight:600;
    font-size:clamp(38px,5.4vw,60px);
    line-height:1.06;
    letter-spacing:-0.015em;
  }
  .h-section{
    font-family:var(--head);
    font-weight:600;
    font-size:clamp(24px,2.6vw,32px);
    line-height:1.2;
    letter-spacing:-0.01em;
  }
  .h-sub{
    font-family:var(--head);
    font-weight:600;
    font-size:19px;
    line-height:1.35;
  }
  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.02em;
    color:var(--muted);
  }
  .body-l{font-size:19px;line-height:1.6;}
  .body-m{font-size:16.5px;line-height:1.65;color:var(--ink);}
  .small{font-size:14px;color:var(--muted);}
  .mono{font-family:var(--mono);}

  .stat-num{
    font-family:var(--head);
    font-weight:600;
    font-size:clamp(32px,4vw,44px);
    letter-spacing:-0.01em;
  }

  /* ---------- links & buttons ---------- */
  .text-link{
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:var(--rule-strong);
    transition:text-decoration-color .15s ease;
  }
  .text-link:hover{text-decoration-color:var(--ink);}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--body);
    font-weight:600;
    font-size:15.5px;
    padding:13px 22px;
    border:1px solid var(--ink);
    text-decoration:none;
    white-space:nowrap;
  }
  .btn-solid{background:var(--ink);color:var(--paper);}
  .btn-solid:hover{background:#222;}
  .btn-outline{background:transparent;color:var(--ink);}
  .btn-outline:hover{background:var(--ink);color:var(--paper);}

  /* ---------- header ---------- */
  header{
    border-bottom:1px solid var(--rule);
    position:sticky;top:0;background:var(--paper);z-index:10;
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:68px;
  }
  .wordmark{
    display:flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
  }
  /* The built-in mark is 35px tall; a replacement stands the same height. */
  .wordmark img{height:35px;width:auto;flex:none;}
  .wordmark span{
    font-family:var(--head);
    font-weight:800;
    font-size:18px;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  nav{display:flex;align-items:center;gap:28px;}
  .nav-links{display:flex;align-items:center;gap:28px;}
  nav a.nav-link{
    font-size:14.5px;
    text-decoration:none;
    color:var(--ink);
    padding:4px 0;
    margin-right:28px;
    border-bottom:1px solid transparent;
  }
  nav a.nav-link:last-child{margin-right:0;}
  nav a.nav-link:hover,nav a.nav-link.is-current{border-bottom-color:var(--ink);}
  .nav-cta{margin-left:6px;}
  .menu-toggle{display:none;}

  @media (max-width:760px){
    .menu-toggle{display:grid;gap:4px;padding:8px;border:0;background:none;cursor:pointer;}
    .menu-toggle i{display:block;width:20px;height:2px;background:var(--ink);transition:transform .15s ease,opacity .15s ease;}
    header.is-menu-open .menu-toggle i:nth-child(1){transform:translateY(6px) rotate(45deg);}
    header.is-menu-open .menu-toggle i:nth-child(2){opacity:0;}
    header.is-menu-open .menu-toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
    nav .nav-links{
      display:none;position:absolute;left:0;right:0;top:100%;
      flex-direction:column;align-items:stretch;gap:0;
      background:var(--paper);border-bottom:1px solid var(--rule);padding:4px 32px 14px;
    }
    header.is-menu-open nav .nav-links{display:flex;}
    nav a.nav-link{margin-right:0;padding:12px 0;}
    .header-inner{height:60px;}
  }

  /* ---------- hero ---------- */
  .section-split{
    display:grid;
    grid-template-columns:1.25fr 0.75fr;
    gap:64px;
    align-items:start;
  }
  .hero-kicker{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
    margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
  }
  .hero-kicker .dot{width:6px;height:6px;background:var(--signal);flex:none;}
  .section.is-split h1{margin-bottom:20px;}
  .button-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}

  .section-split > *{min-width:0;}
  /* Carousel. Every slide is a screen and its caption; the slides overlay in
     one grid and share its two rows (subgrid), so neither the screen nor the
     caption jumps in height between slides. The active tab's bar is the timer:
     its animation ending is what advances, so pausing the animation pauses the
     carousel, and reduced motion (no animation) leaves it manual. */
  .hero-showcase{
    --hp-interval:8s;
    --review-sunken:#f4f4f5;
    align-self:center;min-width:0;
  }
  .hp-track{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;}
  .hp-panel{
    grid-column:1;grid-row:1 / span 3;min-width:0;
    display:grid;grid-template-rows:subgrid;
    visibility:hidden;opacity:0;
    transition:opacity .3s ease,visibility .3s;
  }
  .hp-panel.is-active{visibility:visible;opacity:1;}

  .hp-screen{
    grid-row:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;
    background:#fff;border:1px solid rgba(17,17,19,.08);border-radius:12px;
    box-shadow:0 2px 6px rgba(17,17,19,.025),0 20px 48px -24px rgba(17,17,19,.16);
  }
  .hp-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px;}
  .hp-label{display:block;margin-bottom:8px;font-size:11px;font-weight:500;color:var(--review-muted);}

  .hp-caption{grid-row:3;}
  .hp-caption h2{font-family:var(--head);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink);}

  .hp-pager{grid-column:1;grid-row:2;position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--slides),minmax(0,1fr));gap:6px;padding-block:8px 10px;}
  .hp-tab{display:block;padding:6px 0;border:0;background:none;cursor:pointer;}
  .hp-tab-track{position:relative;display:block;height:2px;overflow:hidden;background:var(--rule);transition:background .15s ease;}
  .hp-tab:hover .hp-tab-track{background:var(--rule-strong);}
  .hp-tab-track i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;}
  .hp-tab[aria-selected="true"] .hp-tab-track i{transform:scaleX(1);animation:hp-progress var(--hp-interval) linear;}
  .hero-showcase.is-paused .hp-tab-track i{animation-play-state:paused;}
  @keyframes hp-progress{from{transform:scaleX(0);}}

  /* 1 — verdict */

  /* 2 — reproduction */
  .hp-code{
    margin:0;padding:12px 14px;border-radius:7px;background:var(--review-sunken);
    font-family:var(--mono);font-size:10.5px;line-height:1.8;color:var(--review-secondary);
    font-variant-ligatures:none;white-space:pre-wrap;overflow-wrap:anywhere;
  }
  .hp-code code{font:inherit;}
  .hp-code b{font-weight:400;color:var(--review-muted);}
  .hp-code .is-fail,.hp-code .is-fail b{font-weight:600;color:var(--review-ink);}
  .hp-result{font-size:12.5px;line-height:1.5;color:var(--review-secondary);}
  .hp-result strong{font-weight:600;color:var(--review-ink);}

  /* 3 — spec/code audit: the evidence half of SpecDivergenceForm.vue */
  .code, .hp-side, .segments, .entries{min-width:0;}
  .hp-side{border:1px solid var(--review-border);border-radius:7px;overflow:hidden;}
  .hp-side-head{display:flex;padding:7px 12px;border-bottom:1px solid var(--review-border);background:var(--review-sunken);}
  .hp-side-tag{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--review-secondary);}
  .hp-side-code{margin:0;padding:8px 0;font-family:var(--mono);font-size:11px;line-height:1.75;font-variant-ligatures:none;}
  .hp-side-code span{display:grid;grid-template-columns:40px minmax(0,1fr);padding-right:12px;white-space:pre-wrap;overflow-wrap:anywhere;}
  .hp-side-code i{padding-right:12px;text-align:right;font-style:normal;color:#b8b8be;}
  .hp-side-code.is-doc{font-family:var(--review-font, inherit);font-size:12.5px;line-height:1.6;}
  .hp-vs{display:flex;align-items:center;gap:10px;padding-left:12px;}
  .hp-vs span{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--review-ink);}
  .hp-vs::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(17,17,19,.25),transparent);}

  /* 4 — scope */
  .hp-seg{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    padding:3px;border-radius:7px;background:var(--review-sunken);
    font-size:12.5px;font-weight:500;
  }
  .hp-seg span{padding:6px 8px;border-radius:5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--review-secondary);}
  .hp-seg .is-on{background:#fff;color:var(--review-ink);box-shadow:0 1px 2px rgba(17,17,19,.08),0 0 0 1px rgba(17,17,19,.06);}

  @media (max-width:1100px) and (min-width:901px){.section-split{gap:40px;grid-template-columns:1.2fr 0.8fr;}}
  @media (max-width:900px){
    .section-split{grid-template-columns:1fr;gap:40px;}
    .hero-showcase{width:100%;max-width:440px;justify-self:center;}
  }
  @media (max-width:420px){
    .hp-body{padding:16px 14px;}
  }

  /* ---------- proof stats ---------- */
  .stats-grid{display:grid;grid-template-columns:repeat(var(--columns),1fr);}
  /* No rules between the figures: in the design every one of them was the first
     child of its own link, so the divider it declared never once applied. */
  .stat{padding:36px 28px 36px 0;}
  /* Ruled: a line above and below the band, and one between each pair. The first
     figure keeps the left edge of the text column, so nothing is indented past it. */
  .stats-grid.has-border{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
  .stats-grid.has-border .stat{padding:32px 24px;border-left:1px solid var(--rule);}
  .stats-grid.has-border .stat:first-child{border-left:none;padding-left:0;}
  .stat-label{margin-top:8px;}
  a.stat-link{text-decoration:none;display:block;}
  a.stat-link:hover .stat-num{text-decoration:underline;text-decoration-color:var(--rule-strong);}

  @media (max-width:760px){
    .stats-grid{grid-template-columns:1fr;}
    .stats-grid.has-border .stat{border-left:none;padding-left:0;}
    .stats-grid.has-border .stat + .stat{border-top:1px solid var(--rule);}
  }

  /* ---------- section ----------
     One band of the page. What used to be four section types - the plain block, the
     figures band, the call-to-action band and the hero - is this with modifiers. */
  section.section{padding:72px 0;}
  section.section.is-tight{padding:0;}
  section.section.is-airy{padding:64px 0;}
  section.section.is-split{padding:76px 0 64px;}
  section.section.has-divider{border-bottom:1px solid var(--rule);}
  section.section.is-narrow .wrap > *{max-width:760px;}
  section.section.is-narrow .block-head{margin-bottom:0;}
  /* A note the page sets apart: the band still spans the page, the box inside it
     does not, and its heading sits close to the words underneath rather than a
     section's width apart from them. */
  .section-box{border:1px solid var(--rule-strong);padding:28px 32px;max-width:820px;}
  .section-box .block-head{margin-bottom:0;}
  /* A note is a smaller thing than a band of the page, so its heading is the
     sub-heading size rather than the one a section sets across the whole width. */
  .section-box .block-head .h-section{font-size:19px;line-height:1.35;letter-spacing:0;}
  .section-box .block-head .eyebrow + .h-section{margin-top:8px;}
  .section-box .text p{margin-top:12px;}
  .section-box .text.has-label{margin-top:14px;}
  /* The band that opens a page stands off the header by as much as the home page's
     hero does, whatever spacing it was given: a title pressed against the menu reads
     as part of it. */
  section.section.is-title{padding-top:76px;}

  /* The top of a page: the heading is the page's own title rather than the name of
     a band inside it, and the lead under it is a standfirst. */
  /* The standfirst runs into what it introduces, rather than a band's worth of room. */
  .block-head.is-title{max-width:700px;margin-bottom:24px;}
  .block-head.is-title .h-display{font-size:clamp(28px,3.8vw,42px);line-height:1.15;letter-spacing:-0.01em;}
  .block-head.is-title .eyebrow + .h-display{margin-top:10px;}
  .block-head.is-title p{font-size:19px;line-height:1.55;}
  .block-head{margin-bottom:44px;max-width:760px;}
  .block-head p{margin-top:14px;color:var(--muted);}
  .block-head .eyebrow + .h-section{margin-top:10px;}

  /* ---------- columns ---------- */
  .columns-grid{display:grid;grid-template-columns:repeat(var(--columns),1fr);}
  .columns.has-border .columns-grid{gap:1px;background:var(--rule);border:1px solid var(--rule);}
  .columns.has-border .column{background:var(--paper);padding:32px;}
  /* A panel spreads its columns across a bordered box rather than dividing the
     width between them: what sits in it is a message and a way to answer it. */
  .columns.is-panel .columns-grid{
    display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
    border:1px solid var(--ink);padding:40px;
  }
  /* Both at once: the panel keeps its own box and the lines divide the inside of
     it, rather than the grid's background bleeding through the gaps. */
  .columns.is-panel.has-border .columns-grid{background:none;gap:0;padding:0;}
  .columns.is-panel.has-border .column{background:none;flex:1;padding:40px;}
  .columns.is-panel.has-border .column + .column{border-left:1px solid var(--rule);}
  .columns.is-panel .column > h3{margin-bottom:8px;}
  .columns.is-panel .text p{max-width:440px;color:var(--muted);}
  .columns.is-panel .column.is-end{align-items:flex-start;}
  .columns.is-panel .button-row{margin-top:0;}
  .column{min-width:0;}
  .column.is-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;}
  /* A grid, not a flex column: the things put in here still expect justify-self. */
  .column.is-center{display:grid;align-content:center;height:100%;}
  .column-icon{margin-bottom:14px;}
  .column > h3{margin-bottom:14px;}
  @media (max-width:760px){.columns-grid{grid-template-columns:1fr;}}

  /* ---------- image ---------- */
  .image{margin:0;}
  .image img{display:block;width:100%;height:auto;}
  .image.is-narrow{max-width:620px;margin-inline:auto;}
  .image.is-natural img{width:auto;max-width:100%;}
  .image.has-border img{border:1px solid var(--rule);}
  .image figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);}
  /* Only ever seen in the editor: an image block is added before a picture is
     picked, and an empty <figure> would be nothing to click on. */
  .image-waiting{
    display:grid;place-items:center;min-height:180px;
    border:1px dashed var(--rule);color:var(--muted);font-size:13px;
  }

  /* ---------- prose: an article rather than a landing page ---------- */
  /* A heading inside a run of paragraphs sits close to what it introduces. */
  .prose-head.h-section{margin-top:40px;}
  .prose-head.h-sub{margin-top:28px;}
  /* Far enough that the sticky header does not sit on the line you jumped to. */
  .footnote{text-decoration:none;scroll-margin-top:90px;}
  .footnote:hover{text-decoration:underline;}

  .sources{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);}
  .sources ol{padding-left:22px;margin:12px 0 0;}
  .sources li{font-size:14px;color:var(--muted);margin-bottom:8px;line-height:1.5;scroll-margin-top:90px;}
  .sources li:target{color:var(--ink);}
  .sources li a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule-strong);}
  .sources li a:hover{color:var(--ink);}

  /* ---------- a table, a quote, a list ---------- */
  .table{margin:28px 0 0;}
  .table figcaption{margin-bottom:8px;}
  /* The one element allowed to be wider than the words around it: on a narrow
     screen the table scrolls, rather than the page. */
  .table-scroll{overflow-x:auto;}
  .table table{width:100%;border-collapse:collapse;font-size:15px;}
  .table th,.table td{padding:9px 16px 9px 0;text-align:left;border-bottom:1px solid var(--rule);}
  .table thead th{
    font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
    color:var(--muted);border-bottom:1px solid var(--rule-strong);white-space:nowrap;
  }
  .table tbody th{font-weight:500;}
  /* Numbers line up on their last digit or they are not worth setting in columns. */
  .table.is-numbers thead th:not(:first-child),
  .table.is-numbers tbody td{text-align:right;font-variant-numeric:tabular-nums;}
  .table.has-total tbody tr.is-total th,
  .table.has-total tbody tr.is-total td{
    border-top:1px solid var(--rule-strong);border-bottom:0;font-weight:700;
  }

  .quote{margin:28px 0 0;padding-left:18px;border-left:3px solid var(--ink);}
  .quote blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--muted);}
  .quote figcaption{margin-top:8px;font-size:13px;color:var(--muted);}

  .list{margin:24px 0 0;}
  .list ul,.list ol{margin:8px 0 0;padding-left:22px;}
  .list ul{list-style:disc;}
  .list li{font-size:16.5px;line-height:1.65;margin-bottom:6px;}
  .list li::marker{color:var(--rule-strong);}

  /* ---------- a video from somewhere else ---------- */
  .embed-card{padding:22px 0;border-top:1px solid var(--rule);}
  .embed-frame{
    position:relative;width:100%;max-width:720px;aspect-ratio:16/9;
    margin-top:12px;border:1px solid var(--rule-strong);background:#F4F4F2;
  }
  .embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .embed-watch{margin-top:10px;}

  /* ---------- text ---------- */
  .text.has-label{margin-top:16px;}
  .text .k{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-bottom:3px;}
  .text.has-label p{font-size:15px;}
  .section.is-narrow .text p{margin-top:18px;color:var(--ink);}

  /* ---------- grid: the cards, and the steps of a process ---------- */
  .grid{display:grid;grid-template-columns:repeat(var(--columns),1fr);}
  .grid.has-border{gap:1px;background:var(--rule);border:1px solid var(--rule);}
  .grid.has-border .grid-item{background:var(--paper);padding:32px;}
  /* An adjacent-sibling rule rather than :not(:first-child), so that switching the
     dividers off below can match its specificity. It could not, and the room made
     for a divider outlived the divider: stacked, every item but the first sat 20px
     further in than it. */
  .grid:not(.has-border) .grid-item{padding:0 20px 0 0;border-right:1px solid var(--rule);}
  .grid:not(.has-border) .grid-item:last-child{border-right:none;padding-right:0;}
  .grid:not(.has-border) .grid-item + .grid-item{padding-left:20px;}
  .grid-icon{margin-bottom:18px;}
  .grid-item h3{margin-bottom:10px;}
  .grid-number{font-family:var(--mono);color:var(--signal);font-size:13px;margin-bottom:14px;}
  .grid.is-numbered .grid-icon{margin-bottom:12px;}
  .grid.is-numbered .grid-item h3{font-family:var(--head);font-weight:600;font-size:16px;margin-bottom:8px;}
  .grid.is-numbered .grid-item p{font-size:14.5px;color:var(--muted);}
  @media (max-width:900px){
    .grid{grid-template-columns:1fr 1fr;gap:28px;}
    .grid:not(.has-border) .grid-item,
    .grid:not(.has-border) .grid-item:last-child,
    .grid:not(.has-border) .grid-item + .grid-item{border-right:none;padding:0;}
  }
  @media (max-width:760px){.grid.has-border{grid-template-columns:1fr;}}
  @media (max-width:520px){.grid{grid-template-columns:1fr;}}

  /* ---------- entries: one column of detail is a finding, two is a comparison ---- */
  .entry{
    display:grid;grid-template-columns:auto 1fr;gap:18px;
    padding:22px 0;border-top:1px solid var(--rule);
  }
  .entry:first-child{border-top:none;}
  .entries.is-two .entry{grid-template-columns:220px 1fr 1fr;gap:28px;align-items:start;}
  .entry-label{display:flex;align-items:center;gap:12px;}
  .entries:not(.is-two) .entry-label{align-items:flex-start;padding-top:2px;}
  .entry .small-label{
    font-family:var(--mono);font-size:11.5px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;display:block;
  }
  /* The label column stacks when it carries a label of its own, so the eyebrow sits
     over the heading rather than beside it. */
  .entry-title{display:block;}
  .entries.is-two .entry-label:has(.entry-title){align-items:flex-start;}
  .entry-detail h3{margin-bottom:6px;}
  .entries:not(.is-two) .entry-detail p{color:var(--muted);font-size:15px;}
  @media (max-width:820px){.entries.is-two .entry{grid-template-columns:1fr;gap:8px;}}

  /* A label for what comes next, not a heading with room under it. */
  .entries-kicker,.embed-kicker{margin:56px 0 4px;}
  /* Nothing in the label column, so nothing to leave room for. */
  .entry.is-plain{grid-template-columns:1fr;}
  .entry.is-linked{text-decoration:none;color:inherit;}
  /* A card's teaser is a line or two, not the width of the page. */
  .entry.is-linked .entry-detail p{max-width:720px;}
  .entry.is-linked:hover .h-sub{text-decoration:underline;text-decoration-color:var(--rule-strong);}
  .entries-head{padding-left:14px;border-left:3px solid var(--review-ink);}
  .entries-title{
    margin-bottom:2px;font-size:20px;font-weight:600;line-height:1.15;
    letter-spacing:-.02em;color:var(--review-ink);
  }
  .entries-head p{font-size:13px;line-height:1.5;color:var(--review-secondary);}
  .entries.is-compact .entries-list{border-top:1px solid var(--review-border);}
  .entries.is-compact .entry{display:flex;align-items:center;gap:12px;padding:10px 0 0;border-top:none;}
  .entries.is-compact .entry + .entry{margin-top:10px;border-top:1px solid var(--review-border);}
  .entries.is-compact .entry-label{flex:none;}
  .entries.is-compact .entry-detail p{font-size:13px;font-weight:500;line-height:1.4;color:var(--ink);}
  .entries.is-compact .release-severity.critical{color:#fff;background:var(--review-ink);}
  .entries.is-compact .release-severity.high{color:var(--review-ink);background:var(--review-sunken);}

  /* challenge */
  .inline-link-row{margin-top:22px;}

  /* proof not promises */
  .finding{
    display:grid;grid-template-columns:auto 1fr;gap:18px;
    padding:22px 0;border-top:1px solid var(--rule);
  }
  .finding:first-of-type{border-top:none;}
  .finding-icon{padding-top:2px;}
  .finding h3{margin-bottom:6px;}
  .finding p{color:var(--muted);font-size:15px;}

  /* Service preview: VerdictHero.vue, RunFindings.vue and the light theme tokens. */
  .release-example{
    --review-border:#ececef;
    --review-ink:#111113;
    --review-secondary:#52525b;
    --review-muted:#63636d;
    --review-danger:#c4322a;
    --review-danger-soft:#fbecea;
    font-family:'Inter',-apple-system,'Segoe UI Variable','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    color:var(--review-ink);
  }
  .release-preview{max-width:1000px;margin:0 auto;}
  .release-shot{
    border:1px solid rgba(17,17,19,.08);border-radius:12px;overflow:hidden;
    background:#fafafa;
    box-shadow:0 2px 6px rgba(17,17,19,.025),0 20px 48px -24px rgba(17,17,19,.16);
  }
  .release-window-bar{
    display:flex;align-items:center;gap:16px;
    min-height:44px;padding:12px 20px;
    border-bottom:1px solid var(--review-border);background:#fff;
  }
  .release-window-dots{display:flex;gap:6px;flex:none;}
  .release-window-dots i{width:8px;height:8px;border:1px solid #d4d4d8;border-radius:50%;background:#ececef;}
  .release-window-label{font-size:11px;color:var(--review-muted);}
  .release-window-label b{font-weight:600;color:var(--review-ink);}
  .release-window-body{padding:28px;}
  .release-verdict{
    border:1px solid var(--review-border);
    border-left:3px solid var(--review-danger);
    border-radius:10px;
    background:linear-gradient(90deg,var(--review-danger-soft),#fff 46%);
    padding:24px 24px 16px;
  }
  .release-title{
    margin-bottom:8px;font-size:30px;font-weight:600;
    line-height:1.1;letter-spacing:-.02em;
  }
  .release-statement{max-width:68ch;font-size:14px;line-height:1.55;color:var(--review-secondary);}
  .release-findings{margin-top:24px;scroll-margin-top:88px;}
  .release-findings-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
  .release-findings-head h4{margin:0;font-size:14px;font-weight:600;line-height:1.35;}
  .release-bugs{border:1px solid var(--review-border);border-radius:7px;background:#fff;overflow:hidden;}
  .release-bug + .release-bug{border-top:1px solid var(--review-border);}
  .release-bug > summary{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:12px;padding:14px 20px;cursor:pointer;list-style:none;
  }
  .release-bug > summary::-webkit-details-marker{display:none;}
  .release-bug > summary:hover{background:#fafafa;}
  .release-bug > summary:focus-visible{outline:2px solid var(--review-ink);outline-offset:-2px;}
  .release-severity{
    display:inline-flex;align-items:center;justify-content:center;
    width:76px;height:24px;padding:0 8px;border-radius:6px;
    font-family:inherit;font-size:11px;font-weight:600;
    line-height:1;letter-spacing:0;white-space:nowrap;
  }
  .release-severity.critical{color:#b42318;background:#fef0ee;}
  .release-severity.high{color:#934b10;background:#fff4e5;}
  .release-bug-title{font-size:13px;font-weight:500;line-height:1.5;}
  .release-chevron{width:14px;height:14px;color:var(--review-muted);transition:transform .12s;}
  .release-bug[open] .release-chevron{transform:rotate(90deg);}
  .release-bug-body{padding:8px 20px 24px;font-size:13px;line-height:1.65;color:var(--review-secondary);}
  .release-bug-body p + p{margin-top:6px;}
  .release-bug-body b{font-weight:600;color:var(--review-ink);}
  .release-facts{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px 16px;margin:18px 0 20px;}
  .release-facts dt{font-weight:600;color:var(--review-ink);}
  .release-facts dd{margin:0;}
  .release-report{
    display:inline-flex;margin-top:2px;padding:6px 10px;
    border:1px solid var(--review-border);border-radius:5px;
    background:#fff;color:var(--review-ink);font-size:12px;font-weight:500;
    cursor:default;pointer-events:none;user-select:none;
  }
  @media (max-width:720px){
    .release-window-bar{padding:12px 16px;}
    .release-window-body{padding:16px;}
    .release-verdict{padding:20px 16px 12px;}
    .release-title{font-size:24px;}
    .release-bug > summary{gap:8px;padding:14px 16px;}
    .release-bug-body{padding:8px 16px 20px;}
  }

  /* footer */
  footer{padding:36px 0;}
  .footer-inner{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  }
  .footer-links{display:flex;gap:22px;flex-wrap:wrap;}
  .footer-links a{font-size:14px;text-decoration:none;color:var(--muted);margin-right:22px;}
  .footer-links a:last-child{margin-right:0;}
  .footer-links a:hover{color:var(--ink);}
  .footer-inner .text{margin-top:0;}
  .footer-inner .text p{font-size:14px;}
  footer .small{color:var(--muted);}

  .icon{color:var(--ink);}