@layer components {

   

   
  .icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: none;
    vertical-align: -0.15em;
    stroke-width: var(--icon-stroke);
  }

   

   
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
     
    padding: 0.75rem 1.5rem;
     
    min-block-size: 2.75rem;
    border: var(--bw) solid transparent;
    border-radius: var(--r-btn);
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-button);
    font-weight: 600;
    font-size: var(--t-sm);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease),
      border-color     var(--dur-fast) var(--ease),
      color            var(--dur-fast) var(--ease);
  }

   
  .btn-primary {
    background: var(--c-blue);
    color: var(--c-on-ink);
  }
  .btn-primary:hover { background: var(--c-blue-hover); color: var(--c-on-ink); }

  .btn-secondary {
    background: transparent;
    color: var(--c-blue);
    border-color: var(--c-line-strong);
  }
  .btn-secondary:hover { border-color: var(--c-blue); background: var(--c-blue-weak); }

   
   
   
  .band .btn-primary,
  .ink .btn-primary,
  .on-ink .btn-primary,
  .cta-band .btn-primary,
  .hero-full-bleed .btn-primary {
    background: var(--c-on-ink);
    color: var(--c-ink);
  }
   
  .band .btn-secondary,
  .ink .btn-secondary,
  .on-ink .btn-secondary,
  .cta-band .btn-secondary,
  .hero-full-bleed .btn-secondary {
    color: var(--c-on-ink);
    border-color: var(--c-ink-line);
  }
  .band .btn-secondary:hover,
  .ink .btn-secondary:hover,
  .on-ink .btn-secondary:hover,
  .cta-band .btn-secondary:hover,
  .hero-full-bleed .btn-secondary:hover { background: var(--c-ink-2); }

   
  .btn-green {
    background: var(--c-green);
    color: #052352;
  }

  .btn-green:hover {
    background: var(--c-green-text);
    color: #FFFFFF;
  }

   
  .band .btn-green,
  .on-ink .btn-green,
  .cta-band .btn-green { background: var(--c-green); color: #052352; }

   

  .logo img, .logo-stacked img { display: block; block-size: 40px; inline-size: auto; }

   
  @media (max-width: 900px) { .logo-stacked img { block-size: 32px; } }

   
  .site-footer .logo img { block-size: 44px; }

   
  .mobile-nav-head .logo img { block-size: 32px; }

  .btn-lg { padding: 0.95rem 1.9rem; font-size: var(--t-base); }

   

   
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: stretch;
    padding-block: 0.55rem;
    background: color-mix(in srgb, var(--c-bg) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 0;
  }

   
  .header-inner > .logo { display: block; }
  .header-inner > .logo-stacked { display: none; }

  @media (max-width: 47.99rem) {
    .header-inner > .logo { display: none; }
    .header-inner > .logo-stacked { display: block; }
  }

  .nav-list { display: flex; gap: var(--stack); align-items: center; }

  .nav-link {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
  }
  .nav-link:hover { color: var(--c-blue); }
  .nav-link[aria-current="page"] {
    color: var(--c-blue);
    box-shadow: inset 0 -2px 0 0 var(--c-blue);
  }

   

   
  .site-footer {
    background-color: var(--c-ink);
    background-image: var(--wash-ink);
    background-repeat: no-repeat;
    color: var(--c-on-ink);
    padding-block: var(--sec);
    margin-block-start: auto;
    border-block-start: var(--eyebrow-rule-h) solid var(--c-green);
  }

  .site-footer a { color: var(--c-on-ink); text-decoration: none; }
  .site-footer a:hover { color: var(--c-green); }
  .site-footer .muted { color: var(--c-on-ink-muted); }

   
  .site-footer .eyebrow { color: var(--c-on-ink-muted); }

   

   
  .hero { padding-block: clamp(2.25rem, 1.6rem + 2.8vw, 4rem) clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }

   
  .hero h1 { font-size: var(--t-4xl); line-height: var(--lead-tight); }
  .hero h1[data-len="medium"] { font-size: var(--t-3xl); }
  .hero h1[data-len="long"]   { font-size: var(--t-2xl); }

  .hero-full-bleed {
    position: relative;
    color: var(--c-on-ink);
    background: var(--c-ink);
  }

   
  .hero-full-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--c-ink) 92%, transparent) 0%,
      color-mix(in srgb, var(--c-ink) 70%, transparent) 58%,
      color-mix(in srgb, var(--c-ink) 62%, transparent) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hero-full-bleed > * { position: relative; z-index: 2; }

   
  .hero-full-bleed .hero-bleed-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero-full-bleed .hero-bleed-media picture,
  .hero-full-bleed .hero-bleed-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }
   
  .hero-full-bleed { min-block-size: clamp(24rem, 52vw, 34rem); display: flex;
    align-items: center; }
   
  .hero-full-bleed .hero-trust { color: var(--c-on-ink); }

   
   
  .hero-plate-eyebrow {
    display: block;
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-on-ink-muted);
  }
  .hero-plate-unit {
    font-size: 0.5em;
    margin-inline-start: 0.35em;
    letter-spacing: 0;
  }

  .hero-full-bleed .hero-plate-bleed {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 3rem;
     
    inset-inline-start: auto;
    z-index: 2;
    margin: 0;
    background: var(--c-ink);
    border-block-start: 3px solid var(--c-green);
    padding: var(--stack) var(--stack);
    max-inline-size: 22rem;
  }
  @media (max-width: 60rem) {
    .hero-full-bleed .hero-plate-bleed {
      position: static;
      inline-size: 100%;
      max-inline-size: none;
      margin-block-start: var(--stack);
    }
  }
  .hero-full-bleed .eyebrow { color: var(--c-on-ink); }

   
  .hero-full-bleed .lede { color: var(--c-on-ink); }

   
  .hero-statement { padding-block: var(--sec) var(--sec-tight); }
  .hero-statement h1 { max-inline-size: 20ch; }
  .hero-statement .lede { max-inline-size: var(--maxw-text); }

   
  .hero-offer { padding-block: var(--sec-tight) var(--sec-tight); }
  .hero-offer h1 { font-size: var(--t-3xl); }
  .hero-offer .lede { max-inline-size: 54ch; }

   
  .hero-plain { padding-block: var(--sec) var(--sec-tight); }

   
  @media (max-width: 55.99rem) {
    .hero-phone-tight,
    .hero-sector,   
    .hero-tight     
      { padding-block: var(--sec-tight) var(--stack); }

     
    .hero-phone-tight .hero-split,
    .hero-sector .hero-split,
    .hero-tight .hero-split { gap: 0.75rem calc(var(--gutter) * 1.5); }

    .hero-phone-tight .hero-split > .stack > * + *,
    .hero-sector .hero-split > .stack > * + *,
    .hero-tight .hero-split > .stack > * + * { margin-block-start: 0.75rem; }
  }

   
  @media (max-width: 55.99rem) {
    .hero-home { padding-block: var(--sec-tight) var(--stack); }
    .hero-home .stack > * + * { margin-block-start: 0.75rem; }
  }

  .hero-trust {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight) var(--stack);
  }

   
  @media (max-width: 28rem) {
    .hero-trust-sep { display: none; }

     
    .hero-trust:has(> :nth-child(4)) {
      row-gap: 0.25rem;
      margin-block-start: 0.5rem;
    }
  }

   
  .hero-loud h1 {
    font-size: var(--t-5xl);
    line-height: 0.94;
  }

   

   
  .band {
    background-color: var(--c-ink);
    background-image: var(--wash-ink);
    background-repeat: no-repeat;
    color: var(--c-on-ink);
    padding-block: var(--sec);
  }

  .band h2, .band h3 { color: var(--c-on-ink); }
  .band .muted, .band .lede { color: var(--c-on-ink-muted); }
  .band .eyebrow { color: var(--c-green); }
  .band .accent  { color: var(--c-green); }

  .band-panel {
    background: var(--c-ink-2);
    border: var(--bw) solid var(--c-ink-line);
    border-radius: var(--r);
    padding: var(--stack);
  }

   

  .comparison-bars { display: grid; gap: var(--stack); }

  .bar-row { display: grid; gap: var(--stack-tight); }

   
  .bar-label {
    font-size: var(--t-sm);
    font-weight: 600;
  }

  .bar-figure {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    inset-inline-start: calc(var(--bar-pct, 0) * 1% + 0.7rem);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-lg);
    line-height: 1;
    white-space: nowrap;
    color: var(--c-text);
  }
  .band .bar-figure, .on-ink .bar-figure { color: var(--c-on-ink); }

   
  .bar-track[data-figure="inside"] .bar-figure {
    inset-inline-start: auto;
    inset-inline-end: calc((100 - var(--bar-pct, 0)) * 1% + 0.7rem);
    padding-inline: 0.4rem;
    padding-block: 0.1rem;
    background: var(--bar-c, var(--c-line-strong));
    color: var(--bar-on-c, var(--c-text));
  }

   
  .comparison-bars.is-gated .bar-figure-solo {
    position: static;
    translate: none;
    font-size: var(--t-2xl, 2rem);
    margin: 0;
  }

   
  .bar-scale {
    inline-size: calc(100% - var(--bar-gutter, 7rem));
    display: flex;
    justify-content: space-between;
    margin-block-start: 0.35rem;
    padding-block-start: 0.4rem;
    border-block-start: var(--bw) solid var(--c-line-strong);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
  }
  .band .bar-scale, .on-ink .bar-scale {
    border-block-start-color: var(--c-ink-line);
    color: var(--c-on-ink-muted);
  }

  .bar-track {
    position: relative;
    inline-size: calc(100% - var(--bar-gutter, 7rem));
    block-size: 1.1rem;
    background: var(--c-surface-2);
     
    border-radius: 0;
    overflow: visible;
  }

  .bar-fill {
    block-size: 100%;
    inline-size: calc(var(--bar-pct, 0) * 1%);
     
    min-inline-size: 3px;
    border-radius: 0;

     
    --bar-split: calc(var(--bar-solid, var(--bar-pct, 0)) / var(--bar-pct, 1) * 100%);
    background-color: transparent;
    background-image:
      linear-gradient(to right,
        var(--bar-c, var(--c-line-strong)) 0 var(--bar-split),
        transparent var(--bar-split) 100%),
      repeating-linear-gradient(135deg,
        var(--bar-c, var(--c-line-strong)) 0 3px,
        transparent 3px 7px);
  }

  .bar-fill[style*="--bar-pct:0"] { min-inline-size: 0; }

   
  .bar-row { --bar-c: var(--c-line-strong); --bar-on-c: var(--c-text); }
  .bar-row[data-tone="good"] { --bar-c: var(--c-green); --bar-on-c: var(--c-text); }
  .bar-row[data-tone="bad"]  { --bar-c: var(--c-warn);  --bar-on-c: #FFFFFF; }

   
  .bar-note {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: var(--maxw-text);
    padding-block-start: var(--stack-tight);
    border-block-start: var(--bw) solid var(--c-line);
  }
  .band .bar-note, .on-ink .bar-note { border-block-start-color: var(--c-ink-line); }
  .band .bar-note { color: var(--c-on-ink-muted); }
  .band .bar-track { background: var(--c-ink-2); }

   

  .temp-scale { display: grid; gap: var(--stack); }

  .temp-row { display: grid; gap: var(--stack-tight); }

   
  @media (max-width: 34rem) {
    .temp-scale .bar-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
    }
    .temp-scale .bar-figure { font-size: var(--t-base); }
  }

  .temp-what {
    font-size: var(--t-xs);
    font-family: var(--font-data);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }
  .band .temp-what { color: var(--c-on-ink-muted); }

  .temp-track {
    position: relative;
    block-size: 1.5rem;
    background: var(--c-surface-2);
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--c-line-strong) 50%, transparent);
  }
  .band .temp-track {
    background: var(--c-ink-2);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--c-ink-line) 90%, transparent);
  }

   
  .temp-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--c-heat) 18%, var(--c-surface-2)) 0%,
      color-mix(in oklab, var(--c-heat) 58%, var(--c-surface-2)) 45%,
      var(--c-heat) 76%,
      color-mix(in oklab, var(--c-heat) 52%, var(--c-warn)) 100%);
    clip-path: inset(0 calc(100% - var(--temp-pct, 0) * 1%) 0 0);
  }
  .band .temp-fill {
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--c-heat) 20%, var(--c-ink-2)) 0%,
      color-mix(in oklab, var(--c-heat) 60%, var(--c-ink-2)) 45%,
      var(--c-heat) 76%,
      color-mix(in oklab, var(--c-heat) 52%, var(--c-warn)) 100%);
  }

   
  .temp-track::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--temp-pct, 0) * 1%);
    inline-size: 2px;
    margin-inline-start: -2px;
    background: var(--c-ink);
    opacity: 0.9;
    box-shadow: -2px 0 0 0 color-mix(in oklab, var(--c-bg) 70%, transparent);
  }
  .band .temp-track::after {
    background: var(--c-on-ink);
    box-shadow: -2px 0 0 0 color-mix(in oklab, var(--c-ink) 70%, transparent);
  }

   
  .temp-row[data-measure="boiler"] .temp-fill {
    background-image:
      repeating-linear-gradient(115deg,
        transparent 0 6px,
        color-mix(in oklab, var(--c-bg) 62%, transparent) 6px 11px),
      linear-gradient(90deg,
        color-mix(in oklab, var(--c-heat) 18%, var(--c-surface-2)) 0%,
        color-mix(in oklab, var(--c-heat) 58%, var(--c-surface-2)) 45%,
        var(--c-heat) 76%,
        color-mix(in oklab, var(--c-heat) 52%, var(--c-warn)) 100%);
  }
  .band .temp-row[data-measure="boiler"] .temp-fill {
    background-image:
      repeating-linear-gradient(115deg,
        transparent 0 6px,
        color-mix(in oklab, var(--c-ink) 62%, transparent) 6px 11px),
      linear-gradient(90deg,
        color-mix(in oklab, var(--c-heat) 20%, var(--c-ink-2)) 0%,
        color-mix(in oklab, var(--c-heat) 60%, var(--c-ink-2)) 45%,
        var(--c-heat) 76%,
        color-mix(in oklab, var(--c-heat) 52%, var(--c-warn)) 100%);
  }

   
  .temp-row[data-claim] .temp-track { block-size: 2rem; }
  .temp-row[data-claim] .bar-figure { color: var(--c-heat-text); }
  .band .temp-row[data-claim] .bar-figure { color: var(--c-green); }
  .band .temp-row[data-claim] .temp-track {
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--c-green) 55%, transparent);
  }

   
   
  [data-js] .temp-scale .temp-fill { clip-path: inset(0 100% 0 0); }
  [data-js] .temp-scale.is-in .temp-fill {
    clip-path: inset(0 calc(100% - var(--temp-pct, 0) * 1%) 0 0);
    transition: clip-path 700ms var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  [data-js] .temp-scale.is-in .temp-row[data-claim] .temp-fill {
    transition-duration: 900ms;
  }

   
  [data-js] .temp-scale .temp-track::after { opacity: 0; }
  [data-js] .temp-scale.is-in .temp-track::after {
    opacity: 0.9;
    transition: opacity 200ms linear;
    transition-delay: calc(var(--reveal-i, 0) * 70ms + 560ms);
  }

   
  @media (prefers-reduced-motion: reduce) {
    [data-js] .temp-scale .temp-fill {
      clip-path: inset(0 calc(100% - var(--temp-pct, 0) * 1%) 0 0);
      transition: none;
    }
    [data-js] .temp-scale .temp-track::after {
      opacity: 0.9;
      transition: none;
    }
  }

   
  .temp-pending {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-sm);
    background: var(--c-warn);
    color: var(--c-on-ink);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
  }

   

  .machine-card {
    display: grid;
     
    align-content: start;
    gap: var(--stack-tight);
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
    inline-size: 100%;
     
    scroll-margin-block-start: calc(var(--header-h) + var(--sec-tight));
  }

   
   
   
  .machine-shot {
    background: var(--c-surface);
    padding: 1rem;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--e-1);
    transition:
      box-shadow var(--dur) var(--ease-out),
      transform  var(--dur) var(--ease-out);
  }

  .machine-card:hover .machine-shot,
  .machine-card:focus-visible .machine-shot {
    box-shadow: var(--e-2), inset 0 3px 0 0 var(--c-green);
    transform: translateY(-2px);
  }

  @media (prefers-reduced-motion: reduce) {
    .machine-shot { transition: none; }
    .machine-card:hover .machine-shot,
    .machine-card:focus-visible .machine-shot { transform: none; }
  }

  .machine-shot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform var(--dur) var(--ease-out);
  }

  .machine-card:hover .machine-shot img { transform: scale(1.03); }

  .machine-brand {
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .machine-name {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    font-variation-settings: "wdth" var(--width-display);
  }

   
  .machine-tag {
    justify-self: start;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-sm);
    background: var(--c-green-weak);
    color: var(--c-green-text);
    font-size: var(--t-2xs);
    font-weight: 600;
  }

  .machine-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight) var(--stack);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-xs);
    color: var(--c-text-muted);
  }

   
  @media (min-width: 56rem) {
    .machine-card[data-size="lead"] { grid-column: span 2; }
     
    .machine-card[data-size="lead"] .machine-shot img { aspect-ratio: 16 / 10; }
    .machine-card[data-size="lead"] .machine-name { font-size: var(--t-xl); }

     
    .machine-card[data-size="lead"] { border-block-start: 3px solid var(--c-green); }

    .machine-card[data-size="lead"] .machine-specs {
      gap: 0;
      border-block-start: var(--bw) solid var(--c-line);
      margin-block-start: var(--stack-tight);
      padding-block-start: var(--stack-tight);
      font-size: var(--t-sm);
      color: var(--c-text);
    }
    .machine-card[data-size="lead"] .machine-specs > span {
      padding-inline: var(--stack);
      border-inline-start: var(--bw) solid var(--c-line);
    }
    .machine-card[data-size="lead"] .machine-specs > span:first-child {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

   

  .machine-modal {
     
    margin: auto;
    inline-size: min(52rem, calc(100vw - var(--gutter) * 2));
    max-block-size: min(46rem, calc(100svh - var(--gutter) * 2));
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--e-2);

     
    opacity: 0;
    transform: scale(0.94);
    transform-origin: var(--modal-origin-x, 50%) var(--modal-origin-y, 50%);
    transition:
      opacity   var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      overlay   var(--dur) var(--ease-out) allow-discrete,
      display   var(--dur) var(--ease-out) allow-discrete;
  }

  .machine-modal[open] { opacity: 1; transform: scale(1); }

   
  @starting-style {
    .machine-modal[open] { opacity: 0; transform: scale(0.94); }
  }

  .machine-modal::backdrop {
    background: color-mix(in srgb, var(--c-ink) 62%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition:
      opacity var(--dur) var(--ease-out),
      overlay var(--dur) var(--ease-out) allow-discrete,
      display var(--dur) var(--ease-out) allow-discrete;
  }

  .machine-modal[open]::backdrop { opacity: 1; }
  @starting-style { .machine-modal[open]::backdrop { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .machine-modal, .machine-modal::backdrop { transition: none; }
  }

  .machine-modal-body { padding: var(--stack); display: grid; gap: var(--stack); }

   

  .spec-table { font-size: var(--t-sm); }

  .spec-table th { inline-size: 45%; }

  .spec-table td.spec-value {
    text-align: end;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
  }

  .spec-table tbody tr:nth-child(even) { background: var(--c-surface); }

   

  .spec-table__group { border-block-end: var(--bw) solid var(--c-line); }

  .spec-table__group summary {
    cursor: pointer;
    padding-block: var(--stack-tight);
    list-style: none;
  }

  .spec-table__group summary::-webkit-details-marker { display: none; }
  .spec-table__group summary h3 { font-size: var(--t-sm); display: inline; }
  .spec-table__group summary::after { content: "+"; float: inline-end; font-family: var(--font-data); }
   
  .spec-table__group[open] summary::after { content: "\2212"; }

  .spec-table__group dl {
    margin: 0;
    padding-block-end: var(--stack-tight);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem var(--stack);
  }

   
  .spec-table__group dt {
    color: var(--c-text-muted);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .spec-table__group dt::after {
    content: "";
    flex: 1 1 auto;
    border-block-end: var(--bw) dotted var(--c-line-strong);
    transform: translateY(-0.3em);
  }

   
  .spec-table__group dt { flex-wrap: wrap; row-gap: 0.125rem; }
  .spec-gloss {
    order: 1;
    flex: 1 0 100%;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--c-text-muted);
  }

   
  .band .spec-table__group dt::after,
  .on-ink .spec-table__group dt::after { border-block-end-color: var(--c-ink-line); }

   
  .spec-table__group dd {
    margin: 0;
    text-align: end;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-display-text);
    font-variant-numeric: tabular-nums lining-nums;
  }

   

  .range-filter { display: none; }
  [data-js] .range-filter { display: block; }

  .facet-list { display: flex; flex-wrap: wrap; gap: var(--stack-tight); }

   
  .facet,
  .chip {
     
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: 0.4rem 0.8rem;
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-pill);
    background: transparent;
    font-size: var(--t-sm);
    cursor: pointer;
  }

  .facet[aria-pressed="true"],
  .chip[aria-pressed="true"] {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-on-ink);
  }

   

   
  .range-filter {
    position: sticky;
    inset-block-start: var(--header-h);
    z-index: var(--z-sticky);
    padding-block: var(--stack);
    background: color-mix(in srgb, var(--c-bg) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: var(--bw) solid var(--c-line);
  }

   
  .range-filter-rows,
  .range-filter-row,
  .range-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack) var(--sec-tight);
    align-items: start;
  }

  .range-filter-legend,
  .range-filter__legend {
    margin-block-end: var(--stack-tight);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
    align-self: center;
    margin-inline-end: var(--stack-tight);
  }

  .range-filter-helper {
    margin-block-start: var(--stack-tight);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
    max-width: 34ch;
  }

  .range-filter-foot { margin-block-start: var(--stack); }

   
  .range-count {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
  }

   
  @media (max-width: 47.99rem) {
    .range-filter { position: static; backdrop-filter: none; }
  }

   

  .variant-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-tight);
  }

  .variant-select .eyebrow { margin-inline-end: var(--stack-tight); }

   
  .spec-note {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: var(--maxw-text);
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-line-strong);
  }

   

  .range-group + .range-group { margin-block-start: var(--sec-tight); }

  .range-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--stack-tight) var(--stack);
    margin-block-end: var(--stack);
    padding-block-end: var(--stack-tight);
    border-block-end: var(--bw) solid var(--c-line);
  }

  .range-group-head h3 {
    font-size: var(--t-lg);
    margin: 0;
  }

  .range-group-note {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: var(--maxw-text);
    margin: 0;
  }

   

   

  .sector-grid {
    display: grid;
    gap: var(--bw);
    background: var(--c-line);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r);
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  .sector-cell {
    background: var(--c-bg);
    padding: var(--stack);
    display: grid;
    gap: var(--stack-tight);
    align-content: start;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur-fast) var(--ease);
     
    scroll-margin-block-start: calc(var(--header-h) + var(--sec));
  }

  .sector-cell:hover { background: var(--c-surface); }

  .sector-cell h3 { font-size: var(--t-lg); }

   
  .sector-constraint {
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    color: var(--c-text-muted);
  }

   

  .sector-cell.link-arrow,
  .sector-cell.link-arrow:hover,
  .sector-cell.link-arrow:focus-visible {
    color: inherit;
    text-decoration: none;
  }

   
  .sector-cell .link-arrow-tail .icon { color: var(--c-blue); }
  .sector-cell.on-ink .link-arrow-tail .icon { color: var(--c-green); }

   
  .sector-cell.link-arrow > .icon,
  .sector-cell.link-arrow .sector-tile-body > .icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    vertical-align: -0.15em;
    margin-inline-start: 0;
    transition: none;
  }
  .sector-cell.link-arrow:hover > .icon,
  .sector-cell.link-arrow:focus-visible > .icon,
  .sector-cell.link-arrow:hover .sector-tile-body > .icon,
  .sector-cell.link-arrow:focus-visible .sector-tile-body > .icon { translate: none; }

   

   
  .argument-statement {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    font-weight: var(--weight-display-text);
    line-height: var(--lead-snug);
    letter-spacing: var(--track-display-text);
    font-variation-settings: "wdth" var(--width-display-text);
    text-wrap: balance;
  }

   
  .proof-band:empty,
  .before-after:empty { display: none; }

  .ba-pair { display: grid; gap: var(--stack-tight); }

  .ba-frame {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--c-surface);
  }

  .ba-caption { font-size: var(--t-sm); color: var(--c-text-muted); }

   

  .matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: 1px;
    background: var(--c-line);
    border: var(--bw) solid var(--c-line);
  }

   
  .matrix__card {
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
    padding: var(--stack);
    background: var(--c-bg);
  }

   
  .matrix__card:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }

   
  .ind-s2 { display: grid; gap: var(--stack); }

  @media (min-width: 56rem) {
    .ind-s2:has(.ind-s2-media > *) {
      grid-template-columns: 1fr 0.8fr;
      gap: calc(var(--gutter) * 1.5);
      align-items: start;
    }
    .ind-s2.is-flipped:has(.ind-s2-media > *) > .stack { order: 2; }
    .ind-s2.is-flipped:has(.ind-s2-media > *) > .ind-s2-media { order: 1; }
  }

  .ind-s2-media:empty { display: none; }
  .ind-s2-media img { inline-size: 100%; block-size: auto; border-radius: var(--r); }

   
  .ind-s5-only {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
    margin-block-end: var(--stack-tight);
  }

   
  .range-filter-disclosure > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack);
    padding-block: var(--stack-tight);
  }
  .range-filter-disclosure > summary::-webkit-details-marker { display: none; }
  .range-filter-resting {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
  }
  .range-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-button);
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--c-blue);
  }
  .range-filter-disclosure[open] > summary .range-filter-toggle .icon { rotate: 180deg; }

  @media (min-width: 48rem) {
     
    .range-filter-disclosure > summary { display: none; }
  }

   
   

   
  .card__index {
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
    letter-spacing: var(--track-eyebrow);
  }

  .card__title {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 104;
    font-weight: 700;
    font-size: var(--t-lg);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--c-text);
    text-wrap: balance;
  }

  .card__body {
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-text-muted);
    margin: 0;
  }

   
  .card__body.mono {
    margin-block-start: auto;
    padding-block-start: var(--stack-tight);
    border-block-start: var(--bw) solid var(--c-line);
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
  }

  .matrix__empty {
    padding: var(--sec-tight) var(--stack);
    text-align: center;
    color: var(--c-text-muted);
    background: var(--c-bg);
    grid-column: 1 / -1;
  }

   
  .svc-card {
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
    background: var(--c-surface);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r);
    padding: var(--stack);
    block-size: 100%;
  }

  .svc-card > :is(picture, img, .img-slot, .img-stock) {
    inline-size: 100%;
    border-radius: var(--r-sm);
    margin-block-end: var(--stack-tight);
  }

  .svc-card h3 {
    font-size: var(--t-lg);
    margin: 0;
  }

  .svc-card p { margin: 0; font-size: var(--t-sm); }
  .svc-card p:last-child { margin-block-start: auto; padding-block-start: var(--stack-tight); }
  .svc-card .muted { color: var(--c-text-muted); }

   

   
  .bar-tick { white-space: nowrap; }

   
  .field-hint {
    display: block;
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--c-text-muted);
    margin-block-start: 0.25rem;
  }

   
  .ground-ink {
    background: var(--c-ink);
    color: var(--c-on-ink);
  }
  .ground-ink :is(h1, h2, h3, h4) { color: var(--c-on-ink); }
  .ground-ink p { color: var(--c-on-ink-muted); }

   
  .card__wrong {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-surface);
    border-inline-start: 3px solid var(--c-line-strong);
    padding: var(--stack-tight) 0.75rem;
    margin: 0;
  }

   

   
   
   
  .img-slot[data-draft] {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 0.6rem;
    padding: var(--stack);
    text-align: start;
    border: 2px dashed var(--c-line-strong);
    border-radius: var(--r);
    background: repeating-linear-gradient(
      45deg,
      var(--c-surface) 0 10px,
      var(--c-surface-2) 10px 20px);
    color: var(--c-text-muted);
    font-family: var(--font-data);
    font-size: var(--t-xs);
  }

   
  .img-slot > strong {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-eyebrow);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: var(--track-eyebrow-display);
    text-transform: uppercase;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .img-slot > strong::before {
    content: "SHOT";
    background: var(--c-warn);
    color: var(--c-on-ink);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    padding: 2px 7px;
    border-radius: var(--r-sm);
  }

   
  .img-slot > span:first-of-type {
    font-family: var(--font-body);
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-text);
    max-inline-size: 46ch;
  }

   
  .img-slot > span:last-of-type {
    border-block-start: var(--bw) solid var(--c-line-strong);
    padding-block-start: 0.5rem;
    inline-size: 100%;
    color: var(--c-text-muted);
  }

   
  .img-stock { position: relative; }

   
   
  .img-stock[data-shot]::after {
    content: "STOCK " attr(data-shot);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 0.2rem 0.55rem;
    background: var(--c-warn);
    color: var(--c-on-ink);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: var(--track-eyebrow);
    border-start-start-radius: inherit;
    border-end-end-radius: var(--r-sm);
    pointer-events: none;
    z-index: 2;
  }

   
  .img-stock[data-brief]::before {
    content: attr(data-brief);
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 0.5rem 0.7rem;
    background: color-mix(in srgb, var(--c-ink) 90%, transparent);
    color: var(--c-on-ink);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    line-height: 1.45;
    text-align: start;
    text-wrap: pretty;
    pointer-events: none;
    z-index: 2;
  }

   

  .es-img {
    border-radius: var(--r-lg);
    overflow: hidden;
  }

   
  .machine-shot .es-img,
  .hero-bleed-media .es-img { border-radius: 0; overflow: visible; }

   
  .img-product {
    object-fit: contain;
    object-position: center;
  }

   

  .field { display: grid; gap: var(--stack-tight); }

  .field label { font-size: var(--t-sm); font-weight: 600; }

  .field input,
  .field textarea,
  .field select {
    padding: 0.7rem 0.85rem;
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r);
    background: var(--c-bg);
  }

  .field input:focus-visible,
  .field textarea:focus-visible,
  .field select:focus-visible { border-color: var(--c-blue); }

  .field-error { color: var(--c-warn); font-size: var(--t-sm); }

   
  .hp-field {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }

   

  .faq-list { border-block-start: var(--bw) solid var(--c-line); }

  .faq-item { border-block-end: var(--bw) solid var(--c-line); }

  .faq-item summary {
    cursor: pointer;
    padding-block: var(--stack);
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--stack);
  }

  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; font-family: var(--font-data); }
  .faq-item[open] summary::after { content: "\2212"; }

  .faq-item > *:not(summary) { padding-block-end: var(--stack); max-width: var(--maxw-text); }

   

  .why-list {
    display: grid;
    gap: var(--stack);
    margin: 0;
    max-width: var(--maxw-text);
  }

  .why-list dt {
    font-family: var(--font-data);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-text);
    letter-spacing: 0.01em;
  }

  .why-list dd {
    margin: 0;
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-green);
    color: var(--c-text-muted);
    line-height: var(--lead-normal);
  }


   

   
   
  .site-header > .wrap { flex: 1 1 auto; inline-size: 100%; }

   
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 2rem);
    inline-size: 100%;
    min-block-size: calc(var(--header-h) - 1.1rem);
    padding-inline: clamp(0.85rem, 2vw, 1.4rem) 0.5rem;
    background: color-mix(in srgb, var(--c-surface) 62%, var(--c-bg));
    border: var(--bw) solid color-mix(in srgb, var(--c-line) 75%, transparent);
    border-radius: var(--r-pill);
    box-shadow: var(--e-1);
  }

   
  .header-cta { padding-inline: 1.2rem; }

   
  .header-end {
    display: flex;
    align-items: center;
    gap: var(--stack);
    flex: none;
  }

   
  .header-inner > .logo,
  .header-inner > .logo-stacked { flex: none; }

  .logo, .logo-stacked {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-lg);
    font-variation-settings: "wdth" var(--width-display);
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
  }

  .site-footer .logo { color: var(--c-on-ink); }

   
  .footer-tagline {
    margin: 0.15rem 0 0;
    font-size: var(--t-sm);
    line-height: var(--lead-normal);
    color: var(--c-green);
  }


   
  @media (max-width: 47.99rem) {
    .header-cta { display: none; }
  }

   

  .nav-toggle, .nav-jump {
    display: none;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 48px;
    padding-inline: 0.75rem;
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  @media (max-width: 74.99rem) {
    .site-header .nav-list { display: none; }
    .nav-jump { display: inline-flex; }
    [data-js] .nav-jump { display: none; }
    [data-js] .nav-toggle { display: inline-flex; }
  }

   
  .mobile-nav {
    margin: 0 0 0 auto;
    inline-size: min(22rem, 88vw);
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    padding: 0;
    border: 0;
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--e-2);
  }

  .mobile-nav::backdrop {
    background: rgb(5 35 82 / 0.45);
    opacity: 0;
    transition:
      opacity var(--dur) var(--ease),
      overlay var(--dur) var(--ease) allow-discrete,
      display var(--dur) var(--ease) allow-discrete;
  }

  .mobile-nav[open]::backdrop { opacity: 1; }
  @starting-style { .mobile-nav[open]::backdrop { opacity: 0; } }

   
  .mobile-nav {
    transform: translateX(100%);
    transition:
      transform var(--dur) var(--ease),
      overlay   var(--dur) var(--ease) allow-discrete,
      display   var(--dur) var(--ease) allow-discrete;
  }

  .mobile-nav[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    transform: translateX(0);
  }

  @starting-style {
    .mobile-nav[open] { transform: translateX(100%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav, .mobile-nav::backdrop { transition: none; }
  }

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack);
    padding: var(--stack-tight) var(--gutter);
    min-block-size: var(--header-h);
    border-block-end: var(--bw) solid var(--c-line);
  }

  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border: 0;
    border-radius: var(--r);
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
  }
  .nav-close:hover { background: var(--c-surface); }

  .mobile-nav-list {
    display: grid;
    align-content: start;
    overflow-y: auto;
    padding: var(--stack) 0;
  }

   
  .mobile-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack);
    padding-inline: var(--gutter);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-variation-settings: "wdth" var(--width-display);
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
  }

  .mobile-nav-list a:hover { background: var(--c-surface); }

  .mobile-nav-list a[aria-current="page"] {
    color: var(--c-blue);
    box-shadow: inset 3px 0 0 0 var(--c-blue);
  }

  .mobile-nav-list a .icon { color: var(--c-line-strong); flex: none; }

  .mobile-nav-foot {
    padding: var(--stack) var(--gutter) calc(var(--stack) + env(safe-area-inset-bottom));
    border-block-start: var(--bw) solid var(--c-line);
  }

  .mobile-nav-foot .btn { inline-size: 100%; justify-content: center; }

   
  .footer-nav-fallback { display: grid; gap: var(--stack-tight); margin-block-end: var(--sec-tight); }
  .footer-nav-fallback a { font-size: var(--t-lg); min-block-size: 48px; display: flex; align-items: center; }
  [data-js] .footer-nav-fallback { display: none; }

   
  @media (min-width: 75rem) {
    .footer-nav-fallback { display: none; }
  }

  .footer-grid { gap: var(--sec-tight) var(--stack); }

  .footer-col a { display: block; font-size: var(--t-sm); }

  .footer-legal {
    margin-block-start: var(--sec-tight);
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-ink-line);
    font-size: var(--t-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--stack-tight) var(--stack);
  }

  .footer-legal p { margin: 0; }

   

  .hero-media { position: relative; }

  .hero-media picture,
  .hero-media img { inline-size: 100%; block-size: auto; border-radius: var(--r); }

  .hero-plate {
    position: absolute;
    inset-block-end: var(--stack);
    inset-inline-start: var(--stack);
    margin: 0;
    padding: var(--stack-tight) var(--stack);
    background: var(--c-ink);
    color: var(--c-on-ink);
    border-radius: var(--r);
    display: grid;
    gap: 0.1rem;
    box-shadow: var(--e-2);
  }

  .hero-plate-figure {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-xl);
    color: var(--c-green);
    line-height: 1.1;
  }

  .hero-plate-note { font-size: var(--t-xs); color: var(--c-on-ink-muted); }

   

  .machine-line {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: 34ch;
  }

   

  .local-route {
    background: var(--c-blue-weak);
    border-block: var(--bw) solid var(--c-line);
  }

  .local-route .wrap > * { padding-block: var(--stack); }

   
  .local-route > .cluster { padding: var(--stack); }

  .local-route p { margin: 0; max-width: var(--maxw-text); }

  .local-route strong { display: block; }

   

   
  .cta-band {
    background-color: var(--c-ink);
    background-image:
      radial-gradient(95% 110% at 8% 4%,
        rgb(0 0 0 / 0.20) 0%, transparent 66%),
      radial-gradient(110% 95% at 98% 104%,
        rgb(0 0 0 / 0.16) 0%, transparent 62%);
    background-repeat: no-repeat;
    color: var(--c-on-ink);
    padding-block: var(--sec);
  }

  .cta-band h2 { color: var(--c-on-ink); }
  .cta-band .lede { color: var(--c-on-ink-muted); }
   
  .cta-band .eyebrow { color: var(--c-green); }

   
  .whatsapp-button {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: var(--z-sticky);
    box-shadow: var(--e-2);
    border-radius: var(--r-pill);
  }

   
  .sticky-mobile-cta { display: none; gap: var(--stack-tight); align-items: center; }
  .sticky-mobile-cta .btn { flex: 1 1 auto; justify-content: center; }
  .sticky-mobile-cta .btn-secondary { flex: 0 1 auto; }

  .sticky-mobile-cta {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-sticky);
    padding: 0.75rem var(--gutter);
    background: color-mix(in srgb, var(--c-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    border-block-start: var(--bw) solid var(--c-line);
    display: none;
  }

  @media (max-width: 47.99rem) {
    .sticky-mobile-cta { display: flex; }
  }

   
  .consent-bar {
    position: fixed;
    inset-inline-start: 1.25rem;
    inset-block-end: 1.25rem;
    z-index: calc(var(--z-sticky) + 5);
    max-inline-size: 26rem;
    padding: 1rem 1.25rem;
    background: var(--c-bg);
    color: var(--c-text);
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--e-2);
  }
  .consent-bar[hidden] { display: none; }
  .consent-text { margin: 0 0 0.35rem; font-size: var(--t-sm); }
  .consent-detail { margin: 0 0 0.85rem; font-size: var(--t-xs); color: var(--c-text-muted); }
  .consent-actions { display: flex; flex-wrap: wrap; gap: var(--stack-tight); }
  .consent-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  .consent-link[hidden] { display: none; }
  @media (max-width: 47.99rem) {
    .consent-bar {
      inset-inline: 0.75rem;
      inset-block-end: calc(var(--consent-lift, 0px) + 0.75rem);
      max-inline-size: none;
    }
  }

   

   
  .jump-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--stack-tight) var(--stack);
    padding-block: var(--stack);
    border-block: var(--bw) solid var(--c-line);
  }

  .jump-list .eyebrow { inline-size: 100%; margin: 0; }
  .jump-list a { font-size: var(--t-sm); font-weight: 500; }

   
  .figure-caption {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
  }

  .source-line { font-size: var(--t-xs); color: var(--c-text-muted); margin: 0; }

   
  .ladder {
    background: var(--c-surface);
    border-radius: var(--r);
    padding: var(--stack);
    display: grid;
    gap: var(--stack-tight);
  }

  .ladder h3 { font-size: var(--t-sm); margin: 0; }

  .ladder dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight) var(--sec-tight);
  }

  .ladder dl > div { display: grid; gap: 0.1rem; }

  .ladder dt {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-lg);
    font-weight: 500;
     
    color: var(--c-heat-text);
  }

  .ladder dd { margin: 0; font-size: var(--t-sm); color: var(--c-text-muted); }

   
  .organism-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    text-align: start;
  }

  .organism-table th,
  .organism-table td {
    padding: var(--stack-tight) var(--stack);
    vertical-align: top;
    text-align: start;
    border-block-end: var(--bw) solid var(--c-line);
  }

  .organism-table thead th {
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
  }

  .organism-table tbody th { inline-size: 22%; }
  .organism-table td:last-child { inline-size: 46%; }
  .organism-table p { margin: 0 0 var(--stack-tight); max-width: none; }
  .organism-table p:last-child { margin-block-end: 0; }

  .organism-name { font-style: italic; font-weight: 600; }

   
  .organism-caveat {
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-warn);
    color: var(--c-text);
  }

   
  .surface-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sec-tight);
  }

  .surface-list > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--stack);
    align-items: start;
    scroll-margin-block-start: calc(var(--header-h) + var(--stack));
  }

  .surface-list h3 { font-size: var(--t-lg); margin: 0; }
  .surface-list p { max-width: var(--maxw-text); }

  .surface-list .num {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-xl);
    color: var(--c-line-strong);
    margin: 0;
    line-height: 1;
  }

   
  a.facet { text-decoration: none; color: var(--c-text); }
  a.facet:hover { border-color: var(--c-blue); color: var(--c-blue); }

   

  .selector { display: grid; gap: var(--stack); }

  .selector-progress {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    margin: 0;
  }

  .selector-screen {
    border: 0;
    padding: 0;
    margin: 0;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--stack);
     
    min-block-size: 0;
    display: grid;
    align-content: start;
    gap: var(--stack);
  }

   

  .selector-screen legend {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 600;
    font-variation-settings: "wdth" var(--width-display);
    padding: 0;
  }

  .selector-options { display: grid; gap: var(--stack-tight); }

   
  .selector-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--stack);
    align-items: start;
    min-block-size: 48px;
    padding: var(--stack-tight) var(--stack);
    background: var(--c-bg);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r);
    cursor: pointer;
  }

  .selector-option:hover { border-color: var(--c-line-strong); }

  .selector-option:has(input:checked) {
    border-color: var(--c-blue);
    box-shadow: inset 0 0 0 1px var(--c-blue);
  }

  .selector-option input { margin-block-start: 0.35rem; accent-color: var(--c-blue); }

  .selector-helper {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: var(--maxw-text);
    margin: 0;
  }

  .selector-controls { margin: 0; }
  .selector-note { font-size: var(--t-sm); color: var(--c-text-muted); margin: 0; }

   

   
  .result-family {
    margin-block-start: var(--stack);
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-line);
  }

  .result-family-head {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin: 0 0 0.25rem;
  }

  .result-family-note {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: var(--maxw-text);
    margin: 0 0 var(--stack-tight);
  }

  .result-family-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
  }

  .result-family-list > li + li { border-block-start: var(--bw) solid var(--c-line); }

  .result-family-list a {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.35rem var(--stack);
    align-items: baseline;
    padding-block: 0.7rem;
    text-decoration: none;
    color: inherit;
  }

  .result-family-list a:hover .rf-name { text-decoration: underline; text-underline-offset: 2px; }

  .rf-name { font-weight: 600; color: var(--c-blue); }
  .rf-diff { font-size: var(--t-sm); color: var(--c-text-muted); }

   
  @media (max-width: 34rem) {
    .result-family-list a { grid-template-columns: minmax(0, 1fr); }
  }

  .selector-board { display: grid; gap: var(--stack); }
  .selector-main { display: grid; gap: var(--stack); align-content: start; }

   
  @media (min-width: 60rem) {
    .selector-board {
      grid-template-columns: minmax(0, 1fr) 17rem;
      align-items: start;
    }
  }

  .selector-rail { display: grid; gap: var(--stack-tight); align-content: start; }

  .sel-steps { list-style: none; margin: 0; padding: 0; display: grid; }

  .sel-step {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding-block: 0.7rem;
    border-block-start: var(--bw) solid var(--c-line);
  }

  .sel-step:first-child { border-block-start: 0; padding-block-start: 0; }

  .sel-step-n {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: var(--bw) solid var(--c-line-strong);
    color: var(--c-text-muted);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    line-height: 1;
  }

  .sel-step-body { display: grid; gap: 0.1rem; min-inline-size: 0; }
  .sel-step-t { font-size: var(--t-sm); color: var(--c-text-muted); }

   
  .sel-step-a {
    font-size: var(--t-sm);
    color: var(--c-ink);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sel-step-a:empty { display: none; }

   
  .sel-step-edit {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--t-sm);
    color: var(--c-blue);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .sel-step-edit:hover { text-decoration-thickness: 2px; }

   
  .sel-step[data-state="current"] .sel-step-n { border-color: var(--c-blue); color: var(--c-blue); }
  .sel-step[data-state="current"] .sel-step-t { color: var(--c-blue); font-weight: 600; }

  .sel-step[data-state="done"] .sel-step-n {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-on-ink);
  }

  .sel-step[data-state="done"] .sel-step-t { color: var(--c-ink); }

   
  .selector-option {
    transition: border-color 140ms ease, background-color 140ms ease;
  }

  .selector-option:has(input:checked) { background: var(--c-surface-2); }

   
  .selector-option:has(input:focus-visible) {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
  }

   
  .selector-screen.is-entering { animation: sel-screen-in 180ms ease both; }

  @keyframes sel-screen-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .selector-option { transition: none; }
    .selector-screen.is-entering { animation: none; }
  }

   

  .selector-result { padding-block: var(--sec-tight); }
  .selector-result:focus { outline: none; }

  .result-head {
    background: var(--c-ink);
    color: var(--c-on-ink);
    padding: var(--stack) var(--gutter);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    display: grid;
    gap: var(--stack-tight);
    justify-items: start;
  }

   
  .result-head .eyebrow,
  .result-alt .eyebrow {
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    font-weight: 500;
    font-variation-settings: normal;
    letter-spacing: var(--track-eyebrow);
    color: var(--c-on-ink-muted);
    margin: 0;
  }

  .result-title {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    font-weight: 700;
    font-variation-settings: "wdth" var(--width-display);
    color: var(--c-on-ink);
    margin: 0;
  }

   
  .result-head .machine-tag {
    background: transparent;
    color: var(--c-green);
    padding: 0;
    font-size: var(--t-sm);
  }

  .result-body {
    background: var(--c-surface);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: var(--stack) var(--gutter) var(--sec-tight);
  }

  .result-grid {
    display: grid;
    gap: var(--stack) var(--sec-tight);
    grid-template-columns: 1fr;
    align-items: start;
  }

  @media (min-width: 56rem) {
    .result-grid { grid-template-columns: 7fr 5fr; }
  }

  .result-body p { max-width: var(--maxw-text); }

   
  .result-caveats {
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-warn);
  }

  .result-caveats h3 { font-size: var(--t-sm); margin: 0 0 var(--stack-tight); }
  .result-caveats ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: var(--stack-tight); }
  .result-caveats li { max-width: var(--maxw-text); }

  .result-alt { font-size: var(--t-sm); }

  .result-standing {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    border-block-start: var(--bw) solid var(--c-line);
    padding-block-start: var(--stack);
  }

   

  .calc { display: grid; gap: var(--sec-tight); }

  .calc-group {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--stack);
  }

  .calc-group legend {
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    font-variation-settings: "wdth" var(--width-display);
    display: flex;
    align-items: baseline;
    gap: var(--stack-tight);
  }

  .calc-group legend .num {
    font-family: var(--font-data);
    font-size: var(--t-sm);
    color: var(--c-line-strong);
  }

  .calc-field label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--stack-tight) var(--stack);
    justify-content: space-between;
  }

   
  .calc-unit {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--c-text-muted);
    white-space: nowrap;
  }

  .calc-field input {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
  }

  .calc-help {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-width: var(--maxw-text);
    margin: 0;
  }

   

  .calc-result {
    margin-block-start: var(--sec-tight);
    background: var(--c-ink);
    color: var(--c-on-ink);
    border-radius: var(--r-lg);
    padding: var(--stack) var(--gutter);
    display: grid;
    gap: var(--stack);
    scroll-margin-block-start: calc(var(--header-h) + var(--stack));
  }

  .calc-result .eyebrow { color: var(--c-on-ink-muted); margin: 0; }
  .calc-empty { color: var(--c-on-ink-muted); margin: 0; }

  .calc-figures {
    margin: 0;
    display: grid;
    gap: var(--stack);
  }

  .calc-figures > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stack-tight) var(--stack);
    padding-block-end: var(--stack-tight);
    border-block-end: var(--bw) solid var(--c-ink-line);
  }

  .calc-figures dt { color: var(--c-on-ink-muted); font-size: var(--t-sm); }

  .calc-figures dd {
    margin: 0;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-lg);
  }

   
  .calc-headline dd {
    font-size: var(--t-3xl);
    color: var(--c-green);
    line-height: var(--lead-tight);
  }

  .calc-note,
  .calc-caveat {
    color: var(--c-on-ink-muted);
    font-size: var(--t-sm);
    max-width: var(--maxw-text);
    margin: 0;
  }

   
  .calc-caveat {
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-green);
  }

  .calc-benchmark,
  .calc-running {
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-ink-line);
  }

  .calc-benchmark p,
  .calc-running p { margin: 0; max-width: var(--maxw-text); }
  .calc-result .source-line { color: var(--c-on-ink-muted); }

  .calc-running dl {
    margin: var(--stack) 0 var(--stack-tight);
    display: grid;
    gap: var(--stack-tight);
  }

  .calc-running dl > div { display: flex; justify-content: space-between; gap: var(--stack); }
  .calc-running dt { color: var(--c-on-ink-muted); font-size: var(--t-sm); }
  .calc-running dd { margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

   
  .form-status { font-size: var(--t-sm); color: var(--c-text-muted); margin: 0; }

  .consent { display: grid; grid-template-columns: auto 1fr; gap: var(--stack-tight) var(--stack); align-items: start; }
  .consent input { margin-block-start: 0.3rem; accent-color: var(--c-blue); }
  .consent span { font-weight: 400; font-size: var(--t-sm); }

  .form { display: grid; gap: var(--stack); max-width: 44rem; }

   
  @media (min-width: 64rem) {
    .wrap > .stack:has(> form.form) {
      max-inline-size: 44rem;
      margin-inline: auto;
    }
  }

   

   
  .honest-block { max-width: var(--maxw-text); }
  .honest-block strong { color: var(--c-blue); }

   
  .reg-list { display: grid; gap: var(--sec-tight); }

  .reg-row {
    display: grid;
    gap: var(--stack-tight);
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-blue);
    max-width: var(--maxw-text);
  }

  .reg-row h3 { font-size: var(--t-lg); margin: 0; }
  .reg-row p { margin: 0; }

   
  .reg-citation {
    font-family: var(--font-data);
    font-size: var(--t-sm);
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    line-height: var(--lead-normal);
  }

   

  .ba-grid {
    display: grid;
    gap: var(--sec-tight);
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  }

  .ba-grid.is-stacked { grid-template-columns: 1fr; gap: var(--sec); }
  .ba-grid .ba-item.is-lead { grid-column: 1 / -1; }
  .ba-item[hidden] { display: none; }

   
  .ba-pair { margin: 0; display: grid; gap: var(--stack); }

  .ba-frames { display: grid; gap: var(--bw); grid-template-columns: 1fr 1fr; background: var(--c-line); }

  .ba-frame { position: relative; background: var(--c-bg); }
  .ba-frame img { inline-size: 100%; block-size: auto; display: block; }

  .ba-label {
    position: absolute;
    inset-block-start: var(--stack-tight);
    inset-inline-start: var(--stack-tight);
    margin: 0;
    padding: 0.1rem 0.45rem;
    background: var(--c-ink);
    color: var(--c-on-ink);
    border-radius: var(--r-sm);
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
  }

   
  .ba-caption { display: grid; gap: 0.15rem; }
  .ba-caption p { margin: 0; max-width: var(--maxw-text); }

  .ba-surface {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    font-variation-settings: "wdth" var(--width-display);
  }

  .ba-where { font-size: var(--t-sm); color: var(--c-text-muted); }
  .ba-caption a { font-size: var(--t-sm); }

   

   
  .contact-rows { margin: 0; display: grid; gap: var(--stack); }

  .contact-rows > div {
    display: grid;
    gap: 0.15rem var(--stack);
    grid-template-columns: 1fr;
    padding-block-end: var(--stack-tight);
    border-block-end: var(--bw) solid var(--c-line);
  }

  @media (min-width: 40rem) {
    .contact-rows > div { grid-template-columns: 10rem 1fr; }
  }

  .contact-rows dt {
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .contact-rows dd { margin: 0; display: grid; gap: 0.15rem; }
  .contact-rows .muted { font-size: var(--t-sm); color: var(--c-text-muted); }

   
  .contact-rows dd a[data-ga="phone_click"] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--width-display);
    font-size: var(--t-display-3);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--weight-figure);
    line-height: var(--lead-display);
    letter-spacing: var(--track-d3);
  }

   
  .map-block { display: grid; gap: var(--stack); }

  .map-placeholder {
    display: grid;
    gap: var(--stack-tight);
    place-content: center;
    justify-items: center;
    text-align: center;
    min-block-size: 18rem;
    padding: var(--stack);
    margin: 0;
    background: var(--c-surface);
    border-radius: var(--r);
  }

  .map-frame { border-radius: var(--r); overflow: hidden; line-height: 0; }
  .map-frame iframe { display: block; inline-size: 100%; border: 0; }

   

  .disclosure {
    margin-block-start: var(--sec-tight);
    padding: var(--stack) var(--stack) var(--stack) var(--sec-tight);
    border-inline-start: 3px solid var(--c-warn);
    background: var(--c-surface);
    border-radius: 0 var(--r) var(--r) 0;
    display: grid;
    gap: var(--stack);
  }

  .disclosure h3 { font-size: var(--t-lg); margin: 0; }
  .disclosure p { margin: 0; max-width: var(--maxw-text); }

  .disclosure dl { margin: 0; display: grid; gap: var(--stack); }
  .disclosure dl > div { display: grid; gap: 0.15rem; }

  .disclosure dt {
    font-weight: 600;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-display);
  }

  .disclosure dd { margin: 0; max-width: var(--maxw-text); color: var(--c-text-muted); }

   

   
  .pending {
    background: var(--c-warn);
    color: var(--c-on-ink);
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 0;
  }


   

  .nav-details { position: relative; flex: none; }

  .nav-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
  }
   
  .nav-summary::-webkit-details-marker { display: none; }
  .nav-summary::marker { content: ''; }

  .nav-summary .icon {
    inline-size: 1em;
    block-size: 1em;
    transition: transform var(--dur-fast) var(--ease);
  }
  .nav-details[open] .nav-summary .icon { transform: rotate(180deg); }

   
  .nav-summary[data-section-current="true"] {
    color: var(--c-blue);
    box-shadow: inset 0 -2px 0 0 var(--c-blue);
  }

   
  .nav-panel {
    position: absolute;
    inset-block-start: calc(100% + 0.85rem);
    inset-inline-start: 0;
    z-index: var(--z-header);
    inline-size: min(30rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--stack);
    background: var(--c-bg);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--e-2);
  }

  .nav-details[data-panel-align="end"] > .nav-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .nav-panel-head { margin-block-end: 0.65rem; color: var(--c-text-muted); }

  .nav-panel-list { display: grid; gap: 0.15rem; }

  .nav-panel-list a {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r);
    text-decoration: none;
    color: var(--c-text);
  }
  .nav-panel-list a:hover { background: var(--c-surface); }
  .nav-panel-list a[aria-current="page"] {
    background: var(--c-blue-weak);
    color: var(--c-blue);
  }

  .nav-panel-label { font-size: var(--t-sm); font-weight: 600; }
  .nav-panel-hint {
    font-size: var(--t-xs);
    color: var(--c-text-muted);
    line-height: var(--lead-normal);
  }

   
  .mobile-nav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 0.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    border-block-end: var(--bw) solid var(--c-line);
  }
  .mobile-nav-group > summary::-webkit-details-marker { display: none; }
  .mobile-nav-group > summary::marker { content: ''; }
  .mobile-nav-group > summary .icon { transition: transform var(--dur-fast) var(--ease); }
  .mobile-nav-group[open] > summary .icon { transform: rotate(180deg); }
  .mobile-nav-group a { padding-inline-start: 1rem; }

   

  .breadcrumbs {
    padding-block: 0.9rem;
    border-block-end: var(--bw) solid var(--c-line);
    background: var(--c-bg);
  }

  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-xs);
    color: var(--c-text-muted);
  }

   
  .breadcrumbs li + li::before {
    content: '/';
    margin-inline-end: 0.5rem;
    color: var(--c-line-strong);
  }

  .breadcrumbs a { color: var(--c-text-muted); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--c-blue); text-decoration: underline; }
  .breadcrumbs [aria-current="page"] { color: var(--c-text); font-weight: 600; }

   

  .where-next {
    padding-block: var(--sec-tight);
    background: var(--c-surface);
    border-block-start: var(--bw) solid var(--c-line);
  }

  .where-next-head {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-display);
    line-height: var(--lead-snug);
    margin-block: 0.35rem var(--stack);
    max-inline-size: var(--maxw-text);
  }

   
  .where-next-list {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--c-line);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  @media (min-width: 48rem) {
    .where-next-list[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
    .where-next-list[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  }

  .where-next-list a {
    display: grid;
    gap: 0.3rem;
    align-content: start;
    block-size: 100%;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    background: var(--c-bg);
    text-decoration: none;
    color: var(--c-text);
    transition: background var(--dur-fast) var(--ease);
  }
  .where-next-list a:hover { background: var(--c-blue-weak); }

   
  .where-next-label {
    display: block;
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--c-blue);
    line-height: var(--lead-snug);
  }
  .where-next-label .icon {
    inline-size: 0.9em;
    block-size: 0.9em;
    transition: transform var(--dur-fast) var(--ease);
  }
  .where-next-list a:hover .where-next-label .icon { transform: translateX(3px); }

  .where-next-body {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    line-height: var(--lead-normal);
  }

   

  .back-to-top-sentinel {
    position: absolute;
    inset-block-start: 150vh;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    pointer-events: none;
  }

  .back-to-top {
    position: fixed;
    inset-block-end: clamp(1rem, 3vw, 2rem);
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 44px;
    padding-inline: 0.85rem;
    background: var(--c-bg);
    color: var(--c-text);
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-pill);
    box-shadow: var(--e-1);
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: none;
  }
  .back-to-top:hover { color: var(--c-blue); border-color: var(--c-blue); }
  .back-to-top .icon { inline-size: 1em; block-size: 1em; }

   
  [data-js] .back-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
  }
  [data-js] .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

   
  @media (max-width: 47.99rem) {
    .back-to-top { padding-inline: 0; inline-size: 44px; }
    .back-to-top-label { position: absolute; clip-path: inset(50%); white-space: nowrap; }

     
    body:has(.sticky-mobile-cta) .back-to-top { inset-block-end: 5.5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-summary .icon,
    .mobile-nav-group > summary .icon,
    .where-next-list a,
    .where-next-label .icon,
    [data-js] .back-to-top { transition: none; }
  }



   

   

   

   
  .ba-pair.is-slider .ba-frames {
    position: relative;
    display: block;
    aspect-ratio: var(--ba-ratio, 4 / 3);
    gap: 0;
    background: var(--c-surface);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .ba-pair.is-slider.is-lead .ba-frames { --ba-ratio: 21 / 9; }

   
  .ba-pair.is-slider .ba-frame {
    position: absolute;
    inset: 0;
    background: none;
  }

  .ba-pair.is-slider .ba-frame-after  { z-index: 1; }
  .ba-pair.is-slider .ba-frame-before { z-index: 2; }

   
  .ba-pair.is-slider .ba-frame > .es-img,
  .ba-pair.is-slider .ba-frame > .img-slot {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .ba-pair.is-slider .ba-frame img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

   
  .ba-pair.is-slider .ba-frame-before > *:not(.ba-label) {
    clip-path: inset(0 calc(100% - var(--ba-pos, 34%)) 0 0);
  }

   
  .ba-pair.is-slider .ba-label { z-index: 3; }

  .ba-pair.is-slider .ba-frame-after .ba-label {
    inset-inline-start: auto;
    inset-inline-end: var(--stack-tight);
  }

   
  .ba-pair.is-slider .ba-frames::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--ba-pos, 34%);
    inline-size: 3px;
    translate: -50% 0;
    background: var(--c-bg);
    z-index: 4;
    pointer-events: none;
  }

   
  .ba-pair.is-slider .ba-frames::before {
    content: "\2194";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--ba-pos, 34%);
    translate: -50% -50%;
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border: 2px solid var(--c-ink);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-data);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--e-1);
    z-index: 5;
    pointer-events: none;
  }

   
  .ba-range { display: none; }

  .ba-pair.is-slider .ba-range {
    display: block;
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: ew-resize;
    touch-action: pan-y;
    z-index: 6;
  }

   
  .ba-pair.is-slider .ba-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 1px;
    block-size: 100%;
    background: none;
    border: 0;
  }

  .ba-pair.is-slider .ba-range::-moz-range-thumb {
    inline-size: 1px;
    block-size: 100%;
    background: none;
    border: 0;
  }

  .ba-pair.is-slider .ba-range::-moz-range-track {
    background: none;
    border: 0;
  }

   
  @supports selector(:has(*)) {
    .ba-pair.is-slider .ba-range:focus-visible { outline: none; }

    .ba-pair.is-slider .ba-frames:has(.ba-range:focus-visible)::before {
      outline: 3px solid var(--c-blue);
      outline-offset: 2px;
    }
  }

   
  @media (max-width: 47.99rem) {
    .ba-pair:not(.is-slider) .ba-frames { grid-template-columns: 1fr; }
  }

   

   


   

  .req {
    color: var(--c-warn);
    font-weight: 700;
  }

   
  .field legend {
    font-size: var(--t-sm);
    font-weight: 600;
    padding-inline: 0;
  }

   
  .field-error {
    border-inline-start: 3px solid var(--c-warn);
    padding-inline-start: 0.5rem;
    margin-block: 0;
  }


   

   
  .map-slot {
    min-block-size: 12rem;
    border: var(--bw) solid var(--c-line-strong);
  }

  .map-slot:has(picture, img, iframe, video) { aspect-ratio: 16 / 9; }


   

  .ty-hero {
    padding-block: var(--sec-loose) var(--sec);
  }

  .ty-grid {
    display: grid;
    gap: var(--stack);
    max-inline-size: 62ch;
  }

   
  .ty-h1 {
    font-size: var(--t-display-2);
    line-height: var(--lead-display);
    letter-spacing: var(--track-d2);
  }

   
  .ty-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--stack-tight);
    margin-block-start: var(--stack);
  }

  .ty-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-button);
    font-weight: 600;
    font-size: var(--t-lg);
    text-decoration: none;
    padding-block: 0.35rem;
  }

  .ty-links a:hover { text-decoration: underline; }

   
  .ty-links a .icon {
    inline-size: 0.875em;
    block-size: 0.875em;
  }


   

   
  @media (min-width: 56rem) {
    .biz-bleed-end .wrap > .offset-grid {
      margin-inline-end: calc(var(--gutter) * -1);
      grid-template-columns:
        minmax(0, calc((100% - (var(--gutter) * 1.5) - var(--gutter)) * 5 / 12))
        minmax(0, 1fr);
    }
  }


   

  .biz-machine-links {
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
    align-self: end;
  }

  @media (min-width: 56rem) {
     
    .biz-machine-grid {
      grid-template-columns: repeat(2, 1fr);
      align-items: stretch;
    }

    .biz-machine-grid .machine-card {
      block-size: 100%;
    }

    .biz-machine-grid .machine-card[data-size="lead"] {
      grid-column: auto;
    }

     
    .biz-machine-links {
      grid-column: 1 / -1;
      align-self: start;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--stack-tight);
    }
  }

   
  @media (min-width: 75rem) {
    .biz-machine-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }


   

   

  .band-split-media {
    border-radius: var(--r-lg);
    overflow: hidden;
     
    background: var(--c-ink-2);
  }

  .band-split-media .img-slot {
    border-color: var(--c-ink-line);
    background: var(--c-ink-2);
    color: var(--c-on-ink-muted);
  }

  .band-split-media .img-slot > strong,
  .band-split-media .img-slot > span:first-of-type { color: var(--c-on-ink); }

  .band-split-media .img-slot > span:last-of-type {
    border-block-start-color: var(--c-ink-line);
    color: var(--c-on-ink-muted);
  }

   
  .band-split-media picture { display: block; }

  .band-split-media img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  @media (min-width: 56rem) {
    .band-split.has-media {
      grid-template-columns: 1.05fr 0.95fr;
      gap: calc(var(--gutter) * 1.3);
      align-items: center;
    }
  }

   

   

   

  @media (min-width: 56rem) {
    .wrap > .offset-grid.is-bleed { grid-column: main-start / full-end; }

     
    .wrap > .offset-grid.is-bleed.is-flipped { grid-column: full-start / main-end; }

     
    .offset-grid.is-bleed > .offset-media { overflow-x: clip; }

     
    .offset-grid.is-bleed > .offset-media > :is(picture, img, .img-slot) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
      border-inline-end: 0;
    }
    .offset-grid.is-bleed.is-flipped > .offset-media > :is(picture, img, .img-slot) {
      border-start-end-radius: var(--r);
      border-end-end-radius: var(--r);
      border-inline-end: 2px dashed var(--c-line-strong);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-inline-start: 0;
    }
  }

   

  .eyebrow-counted::before { display: none; }

  .eyebrow-counted {
    align-items: baseline;
    gap: 1rem;
  }

  .arg-index {
    font-family: var(--font-display);
     
    font-variation-settings: "wdth" var(--width-eyebrow);
    font-weight: 700;
    font-size: var(--t-xl);
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--c-line-strong);
  }

   
  .band .arg-index,
  .on-ink .arg-index { color: var(--c-ink-ornament); }

   

  .temp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--stack);
  }

   
  .temp-head .section-head { margin-block-end: 0; }

  .temp-head-note {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-text-muted);
    text-align: end;
  }

   
  @media (max-width: 44rem) {
    .temp-head-note { text-align: start; }
  }

   

  .temp-scale {
     
    --temp-ramp: linear-gradient(90deg,
      color-mix(in oklab, var(--c-heat) 18%, var(--c-surface-2)) 0%,
      color-mix(in oklab, var(--c-heat) 58%, var(--c-surface-2)) 45%,
      var(--c-heat) 76%,
      color-mix(in oklab, var(--c-heat) 52%, var(--c-warn)) 100%);
  }

  .band .temp-scale {
    --temp-ramp: linear-gradient(90deg,
      color-mix(in oklab, var(--c-heat) 20%, var(--c-ink-2)) 0%,
      color-mix(in oklab, var(--c-heat) 60%, var(--c-ink-2)) 45%,
      var(--c-heat) 76%,
      color-mix(in oklab, var(--c-heat) 52%, var(--c-warn)) 100%);
  }

  .temp-scale[data-hatch="range"] .temp-row[data-measure="boiler"] .temp-fill {
    background-image: var(--temp-ramp);
  }

   
  .temp-hatch {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(115deg,
      transparent 0 6px,
      color-mix(in oklab, var(--c-bg) 62%, transparent) 6px 11px);
    clip-path: inset(0 calc(100% - var(--temp-pct, 0) * 1%) 0 calc(var(--temp-solid, 0) * 1%));
  }

  .band .temp-hatch {
    background-image: repeating-linear-gradient(115deg,
      transparent 0 6px,
      color-mix(in oklab, var(--c-ink) 62%, transparent) 6px 11px);
  }

   
  .temp-row[data-range] .temp-track::after {
    inset-inline-start: calc(var(--temp-solid, 0) * 1%);
  }

   
  [data-js] .temp-scale .temp-hatch {
    clip-path: inset(0 100% 0 calc(var(--temp-solid, 0) * 1%));
  }
  [data-js] .temp-scale.is-in .temp-hatch {
    clip-path: inset(0 calc(100% - var(--temp-pct, 0) * 1%) 0 calc(var(--temp-solid, 0) * 1%));
    transition: clip-path 700ms var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 110ms);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-js] .temp-scale .temp-hatch {
      clip-path: inset(0 calc(100% - var(--temp-pct, 0) * 1%) 0 calc(var(--temp-solid, 0) * 1%));
      transition: none;
    }
  }

   

  .temp-scale .bar-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stack);
  }

   
  @media (max-width: 34rem) {
    .temp-scale .bar-label {
      align-items: flex-start;
      gap: 0.15rem;
    }
  }

  .temp-scale .bar-figure {
    position: static;
    translate: none;
    inset: auto;
    font-size: var(--t-base);
  }

   

  .temp-scale .temp-row[data-claim] {
    background: var(--c-tint-warm);
    padding-block: var(--stack);
  }

   
  .temp-scale .temp-row[data-claim] .temp-track { background: var(--c-tint-warm-2); }

   
  .temp-scale .temp-row[data-claim] .temp-what { color: var(--c-heat-text); }

   
  .temp-scale .temp-row[data-claim] .bar-label > span:first-child {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-lg);
    color: var(--c-text);
  }

  .temp-scale .temp-row[data-claim] .bar-figure { font-size: var(--t-lg); }

   
  .band .temp-scale .temp-row[data-claim] {
    background: none;
    padding-block: 0;
  }
  .band .temp-scale .temp-row[data-claim] .temp-track { background: var(--c-ink-2); }
  .band .temp-scale .temp-row[data-claim] .temp-what { color: var(--c-on-ink-muted); }
  .band .temp-scale .temp-row[data-claim] .bar-label > span:first-child { color: var(--c-on-ink); }

   

   

   

  .machine-plate { display: contents; }

  .range-group .machine-plate {
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
    padding: 0 1rem 1.125rem;
  }

   
  .range-group .machine-plate .machine-tag { align-self: flex-start; }

   
  .range-group .machine-card[data-size="lead"] {
    background: var(--c-surface);
    gap: 0;
  }
  .ground-surface .range-group .machine-card[data-size="lead"] {
    background: var(--c-bg);
  }

   
  .ground-surface .range-group .machine-shot { background: var(--c-bg); }

   
  .range-group .machine-card[data-size="lead"] .machine-shot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    padding: 1.125rem;
    min-block-size: 13.75rem;
    overflow: hidden;
  }

  .range-group .machine-card[data-size="lead"] .machine-shot img {
    aspect-ratio: auto;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: 12.5rem;
  }

  @media (min-width: 56rem) {

    .range-group .machine-card[data-size="lead"] {
      grid-template-columns: 1.1fr 1fr;
      align-content: stretch;
    }

    .range-group .machine-card[data-size="lead"] .machine-shot {
      padding: 1.75rem;
      min-block-size: 21.25rem;
    }
    .range-group .machine-card[data-size="lead"] .machine-shot img {
      max-block-size: 18.75rem;
    }

     
    .ground-surface .range-group .machine-card[data-size="lead"] .machine-shot {
      min-block-size: 20rem;
    }
    .ground-surface .range-group .machine-card[data-size="lead"] .machine-shot img {
      max-block-size: 17.5rem;
    }

    .range-group .machine-plate {
      justify-content: center;
      padding: 1.75rem 1.75rem 1.75rem 0;
    }

     
    .range-group .machine-card--v2[data-size="lead"] {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 0px;
      grid-template-rows: 1fr repeat(6, auto) 1fr;
      row-gap: 0;
      column-gap: 1.75rem;
      align-content: stretch;
    }
     
    .range-group .machine-card--v2[data-size="lead"] > .plate {
      grid-column: 1;
      grid-row: 1 / -1;
      align-self: stretch;
      aspect-ratio: auto;
    }
    .range-group .machine-card--v2[data-size="lead"] > :not(.plate) {
      grid-column: 2;
      margin-block-start: var(--stack-tight);
    }
    .range-group .machine-card--v2[data-size="lead"] > .machine-badge { grid-row: 2; margin-block-start: 1.75rem; }
    .range-group .machine-card--v2[data-size="lead"] > .machine-brand { grid-row: 3; }
    .range-group .machine-card--v2[data-size="lead"] > .machine-name  { grid-row: 4; }
    .range-group .machine-card--v2[data-size="lead"] > .machine-tag   { grid-row: 5; }
    .range-group .machine-card--v2[data-size="lead"] > .machine-line  { grid-row: 6; }
    .range-group .machine-card--v2[data-size="lead"] > .fig-row       { grid-row: 7; grid-column: 2 / -1; padding-inline-end: 1.75rem; margin-block-end: 1.75rem; }

     
    .range-group .machine-card--v2[data-size="lead"] > .plate { container-type: inline-size; }
    .range-group .machine-card--v2[data-size="lead"] > .plate .plate-shadow {
      inset-block-end: auto;
      inset-block-start: calc(50% + 50cqi - 7cqi);
      block-size: 9cqi;
    }
     
    .range-group .machine-card--v2[data-size="lead"] > .plate { container-type: size; }
    .range-group .machine-card--v2[data-size="lead"] > .plate--specimen .plate-shadow {
      inset-block-start: auto;
      inset-block-end: calc(clamp(0.75rem, 3vw, 1.375rem) - 4.5cqi);
      block-size: 9cqi;
    }
  }

   

  .range-group .machine-card:not([data-size="lead"]) .machine-specs {
    margin-block-start: var(--stack-tight);
    padding-block-start: 0.625rem;
    border-block-start: var(--bw) solid var(--c-line);
  }

   

  .range-group-head {
    display: grid;
    gap: var(--stack-tight);
    padding-block-end: 0;
    border-block-end: 0;
  }

  .range-group-head h3 {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-variation-settings: "wdth" 80;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .range-group-head h3::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--c-line-strong);
  }

   

  @media (min-width: 64rem) {
    .range-shelf-small { grid-template-columns: repeat(4, minmax(0, 1fr)); }

     
    .range-shelf-small[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
    .range-shelf-small[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

     

     
    .range-shelf-small[data-count="2"] {
      grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--stack)) / 3)));
      justify-content: start;
    }

     
    .range-shelf-small[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

     
    .grid-3:has(.machine-card):not(.range-shelf-small) {
      --grid-min: 16rem;
    }
  }

   

  .range-filter-rows {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.875rem;
  }

  .range-filter-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem;
  }

  .range-filter-legend {
    flex: 0 0 10.5rem;
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-eyebrow);
    font-weight: 700;
    font-size: var(--t-xs);
    letter-spacing: var(--track-eyebrow-display);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   
  .range-filter .eyebrow::before { display: none; }

  .range-filter-helper { margin: 0; }

   

  .range-filter .facet {
    font-family: var(--font-data);
    padding: 0.5rem 0.875rem;
    border-radius: var(--r-btn);
    border-color: var(--c-line-strong);
  }

   
  .range-filter .facet[data-value="food-grade"]::before {
    content: "";
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    margin-inline-end: 0.5rem;
    vertical-align: -0.08em;
    background: var(--c-green);
  }

   
  @media (max-width: 47.99rem) {
     
    .range-filter-rows { align-items: stretch; }

    .range-filter-row {
      flex-direction: column;
      align-items: stretch;
      gap: var(--stack-tight);
    }
    .range-filter-legend { flex: 0 0 auto; }

     
    .range-filter .facet-list {
      flex-wrap: nowrap;
      min-inline-size: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding-block-end: 0.25rem;
    }
    .range-filter .facet { flex: 0 0 auto; }
  }

   

  .band-split {
    display: grid;
    gap: var(--stack);
  }

  @media (min-width: 56rem) {
    .band-split {
      grid-template-columns: 0.9fr 1.1fr;
      gap: calc(var(--gutter) * 1.6);
      align-items: start;
    }
  }

  .band-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack) 2.25rem;
  }

  .band-figure-label {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-on-ink-muted);
  }

  .band-figure-value {
    margin-block-start: 0.25rem;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--c-on-ink);
  }

  .band-figure-accent { color: var(--c-green); }

   

  @media (max-width: 47.99rem) {

     
    .machine-modal {
      margin: 0;
      inline-size: 100%;
      max-inline-size: 100%;
      block-size: 100svh;
      max-block-size: 100svh;
      border-radius: 0;
      overflow: hidden;
    }

    .machine-modal-body {
      block-size: 100%;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 0;
      padding: 0;
    }

    .machine-modal-head {
      margin: 0;
      padding: var(--stack);
      flex-wrap: nowrap;
      background: var(--c-bg);
      border-block-end: var(--bw) solid var(--c-line);
    }

    .machine-modal-body > [data-modal-content] {
      display: grid;
      gap: var(--stack);
      align-content: start;
      padding: var(--stack);
      overflow-y: auto;
      overscroll-behavior-y: contain;
    }

     
    .machine-modal .variant-select {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
    }
    .machine-modal .variant-select .facet { flex: 0 0 auto; }

    .machine-modal-actions {
      position: sticky;
      inset-block-end: 0;
      z-index: 1;
      display: grid;
      gap: var(--stack-tight);
      margin: 0;
      padding-block: var(--stack);
      background: var(--c-bg);
      box-shadow: 0 -1px 0 var(--c-line);
    }

    .machine-modal-actions .btn { inline-size: 100%; }
  }

   
  .machine-modal .machine-shot { display: block; }
  .machine-modal .machine-shot img { max-block-size: 17.5rem; object-fit: contain; }

   

  .organism-caveat {
    background: var(--c-surface);
    border-inline-start: 3px solid var(--c-text-muted);
    padding: 0.75rem 0.875rem;
    margin-block-end: var(--stack-tight);
    color: var(--c-text);
  }

  .organism-caveat-label {
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   

  .organism-table td.spec-value {
    text-align: end;
    font-size: var(--t-sm);
    white-space: nowrap;
  }

  .organism-table td.spec-value-prose {
    font-family: var(--font-body);
    font-variant-numeric: normal;
    white-space: normal;
  }

   

   
  @media (min-width: 90rem) {
    #what-dry-steam-is .wrap > .stack { margin-inline-end: -3rem; }

    #what-dry-steam-is .offset-grid {
      grid-template-columns:
        minmax(0, calc((100% - (var(--gutter) * 1.5) - 3rem) * 5 / 12))
        minmax(0, 1fr);
    }
  }

   

  .label-short { display: none; }

  @media (max-width: 47.99rem) {
    .label-long  { display: none; }
    .label-short { display: inline; }
  }

   

   

   

  .ind-page .ind-split {
    display: grid;
    gap: var(--stack);
  }

  .ind-page .ind-split > * { align-self: start; }

   
  .ind-page .ind-split-head .section-head { margin-block-end: 0; }

   
  .ind-page .ind-count {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
  }

  @media (min-width: 56rem) {
    .ind-page .ind-split {
      grid-template-columns: var(--ind-split, 0.7fr 1.3fr);
      column-gap: var(--sec-tight);
    }

     
    .ind-page .ind-s4 .ind-split { --ind-split: 0.75fr 1.25fr; }

     
    .ind-page .ind-s4 .ind-split-head {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--stack));
    }
  }

   

  .ind-page .why-list {
    --ind-index: var(--stack);
    max-width: none;
  }

  .ind-page .why-list dt {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-display);
    font-weight: 700;
    font-size: var(--t-lg);
    letter-spacing: var(--track-display);
    color: var(--c-text);
  }

   
  .ind-page .why-list dd {
    padding-inline-start: 0;
    border-inline-start: 0;
    color: var(--c-text);
    max-width: var(--maxw-text);
  }

  .ind-page .why-numbered { counter-reset: es-why; }
  .ind-page .why-numbered > div { counter-increment: es-why; }

  .ind-page .why-numbered dt {
    display: flex;
    align-items: baseline;
    gap: var(--stack-tight);
  }

  .ind-page .why-numbered dt::before {
    content: counter(es-why, decimal-leading-zero);
    flex: 0 0 var(--ind-index);
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--c-text-muted);
  }

   
  .ind-page .why-numbered dd {
    padding-inline-start: calc(var(--ind-index) + var(--stack-tight));
  }

   
  .ind-page .why-rows {
    gap: 0;
    border-block-start: var(--bw) solid var(--c-line-strong);
  }

  .ind-page .why-rows > div {
    padding-block: var(--stack);
    border-block-end: var(--bw) solid var(--c-line);
  }

   

  .ind-page .why-machines {
    border-block-start: 2px solid var(--c-text);
    padding-block-start: var(--stack);
  }

   
  .ind-page .why-machines-one dt { font-size: var(--t-xl); }

  @media (min-width: 56rem) {
     
    .ind-page .why-machines {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--stack);
    }

    .ind-page .why-machines-one { grid-template-columns: 1fr; }
  }

   

  @media (min-width: 56rem) {
    .ind-page .ind-s5-solo {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: var(--sec-tight);
      align-items: center;
    }

     
    .ind-page .ind-s5-card .machine-card {
      grid-template-columns: 1.1fr 1fr;
      grid-template-rows: 1fr auto auto auto auto auto 1fr;
      grid-template-areas:
        "shot ."
        "shot brand"
        "shot name"
        "shot tag"
        "shot line"
        "shot specs"
        "shot .";
      align-content: stretch;
      column-gap: var(--sec-tight);
      padding: var(--stack) var(--stack) var(--stack) 0;
      background: var(--c-surface);
      border-block-start: 3px solid var(--c-green);
    }

     
    .ind-page .ind-s5-card .machine-plate { display: contents; }

    .ind-page .ind-s5-card .machine-shot {
      grid-area: shot;
      align-self: center;
      background: transparent;
    }

     
    .ind-page .ind-s5-card .machine-shot img { aspect-ratio: 16 / 10; }

    .ind-page .ind-s5-card .machine-brand { grid-area: brand; }
    .ind-page .ind-s5-card .machine-name  { grid-area: name; font-size: var(--t-2xl); }
    .ind-page .ind-s5-card .machine-tag   { grid-area: tag; }
    .ind-page .ind-s5-card .machine-line  { grid-area: line; max-width: none; color: var(--c-text); }
    .ind-page .ind-s5-card .machine-specs { grid-area: specs; }

     
    .ind-page .ind-s5-card .machine-specs {
      gap: 0;
      border-block-start: var(--bw) solid var(--c-line);
      margin-block-start: var(--stack-tight);
      padding-block-start: var(--stack-tight);
      font-size: var(--t-sm);
      color: var(--c-text);
    }

    .ind-page .ind-s5-card .machine-specs > span {
      padding-inline: var(--stack);
      border-inline-start: var(--bw) solid var(--c-line);
    }

    .ind-page .ind-s5-card .machine-specs > span:first-child {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

   

  .ind-page .disclosure { border-inline-start-color: var(--c-text-muted); }

  .ind-page .disclosure .eyebrow { color: var(--c-text-muted); }
  .ind-page .disclosure .eyebrow::before { display: none; }

   

   
  .ind-page .band .stack {
    position: relative;
    padding-inline-end: var(--stack);
  }

  .ind-page .band .stack::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 3px;
    background: var(--c-green);
  }

  @media (min-width: 56rem) {
    .ind-page .band .stack {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      column-gap: var(--sec-tight);
      row-gap: var(--stack);
      align-items: start;
       
      padding-inline-end: var(--sec-tight);
    }

     
    .ind-page .band .stack > * { margin-block-start: 0; }

    .ind-page .band .stack > .eyebrow { grid-column: 1 / -1; }
    .ind-page .band .stack > .section-head { margin-block-end: 0; }
  }

   

  .ind-page .reg-list { gap: 0; }

  .ind-page .reg-row {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: var(--bw) solid var(--c-line);
    padding-block: var(--stack);
    max-width: none;
  }

  .ind-page .reg-row:last-child { border-block-end: var(--bw) solid var(--c-line); }

  .ind-page .reg-row h3 {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-display);
    font-weight: 700;
  }

  .ind-page .reg-row p { max-width: var(--maxw-text); }

   

  .ind-page .ind-s8-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--stack);
  }

  .ind-page .ind-s8-head .section-head {
    margin-block-end: 0;
    flex: 1 1 20rem;
  }

  .ind-page .ind-s8-cross { flex: 1 1 18rem; }

  .ind-page .ind-s8-cross a {
    text-decoration: none;
    border-block-end: 2px solid var(--c-green);
    white-space: nowrap;
  }

  @media (min-width: 56rem) {
     
    .ind-page .ind-s8-cross {
      flex: 0 1 52%;
      max-inline-size: 52%;
      text-align: end;
    }

     
    .ind-page .sector-grid { grid-template-columns: repeat(3, 1fr); }
  }

   
  .ind-page .sector-constraint {
    padding-block-start: var(--stack-tight);
    border-block-start: var(--bw) solid var(--c-surface-2);
  }

   

  .ind-page .faq-item summary::after,
  .ind-page .faq-item[open] summary::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    background-color: var(--c-blue);
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
    mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
  }

  .ind-page .faq-item[open] summary::after { transform: rotate(180deg); }

   

  .ind-page .prose blockquote {
    margin-block: calc(var(--stack) * 1.5);
    margin-inline: 0;
    padding-inline-start: var(--stack);
    border-inline-start: 3px solid var(--c-green);
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-display);
    font-weight: 700;
    font-size: var(--t-xl);
    line-height: var(--lead-snug);
    letter-spacing: var(--track-display);
    color: var(--c-text);
    max-width: 34ch;
  }

  .ind-page .prose blockquote p {
    margin: 0;
    max-width: none;
  }

  @media (min-width: 56rem) {
    .ind-page .prose blockquote { margin-inline-start: calc(var(--stack) * -1); }
  }

   

   

   

  [data-register="local"] .service-card {
    background: var(--c-surface);
    border-radius: var(--r);
  }

   
  [data-register="local"] .service-copy {
    display: grid;
    gap: var(--stack-tight);
    align-content: start;
    padding: var(--stack);
    padding-block-start: calc(var(--stack) - var(--stack-tight));
  }

   
  [data-register="local"] .service-card .eyebrow { color: var(--c-text-muted); }
  [data-register="local"] .service-card .eyebrow::before { display: none; }

   
  [data-register="local"] .service-quote {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text);
  }

   

  .svc-hub-grid { grid-template-columns: 1fr 1fr; }

   
  .svc-hub-grid > .service-card:last-child { grid-column: 1 / -1; }

  @media (max-width: 47.99rem) {
    [data-register="local"] .svc-hub-grid > .service-card:last-child {
      grid-template-columns: 1fr 1.2fr;
    }

     
    [data-register="local"] .svc-hub-grid > .service-card:last-child .service-shot {
      block-size: 100%;
      min-block-size: 7.5rem;
    }
  }

   
  @media (min-width: 48rem) {
    .svc-hub-grid { grid-template-columns: repeat(3, 1fr); }
    .svc-hub-grid > .service-card:last-child { grid-column: auto; }
  }

   

  @media (min-width: 48rem) {
    [data-register="local"] .service-card.is-lead {
      grid-template-columns: 1.15fr 1fr;
      align-items: center;
    }

     
    [data-register="local"] .service-card.is-lead .service-copy {
      padding: calc(var(--stack) * 1.5);
      padding-inline-start: calc(var(--stack) * 1.5 - var(--stack-tight));
    }
  }

   

   
  [data-register="local"] .svc-card {
    position: relative;
    border-color: transparent;
  }

   
  .svc-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-block-start: var(--bw) solid var(--c-line);
    padding-block-start: 0.75rem;
  }

  .svc-row-label {
    flex: 0 0 44px;
    font-weight: 600;
    color: var(--c-text-muted);
  }

   
  .svc-card .svc-flag {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;
    margin: 0;
    padding: 0.3rem 0.55rem;
    background: var(--c-ink);
    color: var(--c-on-ink);
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-eyebrow);
    font-weight: 700;
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
  }

   
  .svc-action {
    display: flex;
    align-items: center;
    gap: var(--stack-tight);
    flex-wrap: wrap;
  }

  .svc-btn-pending {
    background: transparent;
    border-style: dashed;
    border-color: var(--c-paper-border);
    color: var(--c-text-muted);
    cursor: default;
  }

   

  [data-register="local"] .map-placeholder {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
     
    min-block-size: 0;
  }

  [data-register="local"] .map-placeholder > :is(picture, .img-slot) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    z-index: 0;
  }

  [data-register="local"] .map-placeholder > picture img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

   
  [data-register="local"] .map-placeholder [data-map-show] {
    position: relative;
    z-index: 1;
     
    background: var(--c-surface);
  }

  [data-register="local"] .map-placeholder [data-map-show]:hover { background: var(--c-blue-weak); }

   

   

   

  .result-grid .machine-shot {
    background: var(--c-surface-2);
    padding: var(--stack);
  }

   
  .result-grid .machine-shot > .img-product { object-position: 50% 100%; }

   

  .record-sheet-meta {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-text-muted);
    margin-block-start: var(--stack-tight);
  }

   

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

       
      .hero-full-bleed .hero-bleed-media img {
        animation: es-hero-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        will-change: transform;
      }

      @keyframes es-hero-drift {
        from { transform: scale(1.12) translateY(-2.5%); }
        to   { transform: scale(1.12) translateY(2.5%); }
      }

       
      .machine-card {
        animation: es-card-settle linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }

      @keyframes es-card-settle {
        from { opacity: 0.4; transform: translateY(1.5rem); }
        to   { opacity: 1;   transform: none; }
      }

       
    }
  }
}

@layer components {

 

  .pb {
    --pb-glass:        rgb(255 255 255 / 0.07);
    --pb-glass-strong: rgb(255 255 255 / 0.11);
    --pb-edge:         rgb(255 255 255 / 0.16);
    --pb-edge-lit:     rgb(255 255 255 / 0.28);

    position: relative;
    isolation: isolate;
    padding-block: var(--sec);
    color: var(--c-on-ink);
    background:
      radial-gradient(120% 90% at 8% 0%,  rgb(8 200 32 / 0.16) 0%, transparent 58%),
      radial-gradient(110% 80% at 96% 12%, rgb(0 72 200 / 0.36) 0%, transparent 60%),
      linear-gradient(168deg, var(--c-ink-2) 0%, var(--c-ink) 62%);
  }

  .pb .eyebrow      { color: var(--c-green); }
  .pb .section-head { color: var(--c-on-ink); }
  .pb .lede         { color: var(--c-on-ink-muted); max-inline-size: 52ch; }

   
  .pb-grid {
    display: grid;
    gap: var(--sec-tight);
    align-items: start;
  }

   
  .pb-grid-3 { gap: var(--stack); }

   
  @media (min-width: 60rem) {
    .pb-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr);
      gap: clamp(2rem, 4vw, 3.5rem);
    }
    .pb-grid-3 {
      grid-template-areas:
        "lead  result"
        "spend result";
      column-gap: clamp(2rem, 4vw, 3.5rem);
      row-gap: var(--stack);
    }
    .pb-grid-3 > .pb-inputs-lead  { grid-area: lead; }
    .pb-grid-3 > .pb-inputs-spend { grid-area: spend; }
    .pb-grid-3 > .pb-result       { grid-area: result; }
  }

  .pb-inputs { display: grid; gap: var(--stack); }
  .pb-head   { display: grid; gap: 0.6rem; margin-block-end: var(--stack); }

  .pb-field { border: 0; margin: 0; padding: 0; }

  .pb-field legend,
  .pb-label {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--width-display);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: var(--lead-snug);
    color: var(--c-on-ink);
    padding: 0;
  }

  .pb-help {
    margin: 0.3rem 0 0.85rem;
    font-size: var(--t-sm);
    line-height: var(--lead-normal);
    color: var(--c-on-ink-muted);
    max-inline-size: 56ch;
  }

  .pb-note {
    margin: 0.7rem 0 0;
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-on-ink-muted);
  }

   
  .pb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .pb-chip { position: relative; display: inline-flex; }

  .pb-chip input {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: 0; padding: 0;
    opacity: 0;
    pointer-events: none;
  }

  .pb-chip span {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.95rem;
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r-pill);
    background: var(--pb-glass);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    font-size: var(--t-sm);
    line-height: 1.25;
    color: var(--c-on-ink);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
  }

  .pb-chip span:hover { background: var(--pb-glass-strong); border-color: var(--pb-edge-lit); }
  .pb-chip input:focus-visible + span { outline: 2px solid var(--c-green); outline-offset: 2px; }

  .pb-chip input:checked + span {
     
    background: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-ink);
    font-weight: 600;
  }

   
  .pb-tiers {
    display: grid;
    gap: 0.6rem;
  }

   
  @media (min-width: 48rem) {
    .pb-tiers {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto;
      align-items: start;
    }

    @supports (grid-template-rows: subgrid) {
      .pb-tier {
        grid-row: span 2;
        grid-template-rows: subgrid;
      }
    }
  }

  .pb-tier { display: grid; gap: 0.55rem; }

  .pb-tier-pick { position: relative; display: block; block-size: 100%; }

  .pb-tier-pick input {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: 0; padding: 0;
    opacity: 0;
    pointer-events: none;
  }

  .pb-tier-body {
    display: grid;
    gap: 0.3rem;
    block-size: 100%;
    padding: 0.85rem 1rem;
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r-md, 0.75rem);
    background: var(--pb-glass);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--c-on-ink);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }

  .pb-tier-body:hover { background: var(--pb-glass-strong); border-color: var(--pb-edge-lit); }
  .pb-tier-pick input:focus-visible + .pb-tier-body { outline: 2px solid var(--c-green); outline-offset: 2px; }

  .pb-tier-name {
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.2;
  }

  .pb-tier-suits {
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-ink-muted);
  }

   
  .pb-tier-pick input:checked + .pb-tier-body {
    background: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-ink);
  }
  .pb-tier-pick input:checked + .pb-tier-body .pb-tier-suits { color: rgb(0 0 0 / 0.72); }

   
  .pb-tier-power {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: var(--bw) dashed var(--pb-edge);
    border-radius: var(--r-md, 0.75rem);
  }

  @supports selector(:has(*)) {
    .pb-tier:not(.is-costed):not(:has(> .pb-tier-pick input:checked)) > .pb-tier-power { display: none; }
  }

  .pb-tier-power > legend {
    padding: 0;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-on-ink);
  }

  .pb-subopt { display: grid; gap: 0.3rem; }

   
  .pb-subopt .pb-note {
    margin: 0;
    font-family: inherit;
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
  }

  .pb-chip--sm span { padding: 0.4rem 0.75rem; font-size: var(--t-xs); }

   
  .pb-costed {
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r-md, 0.75rem);
    background: var(--pb-glass);
  }

  .pb-costed > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack);
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--t-sm);
    line-height: var(--lead-snug);
    color: var(--c-on-ink);
  }
  .pb-costed > summary::-webkit-details-marker { display: none; }
  .pb-costed > summary:hover { background: var(--pb-glass-strong); border-radius: var(--r-md, 0.75rem); }
  .pb-costed > summary:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; border-radius: var(--r-md, 0.75rem); }

  .pb-costed-line b { font-weight: 600; }

  .pb-costed-change {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.45rem;
    padding-inline-end: 0.2rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .pb-costed-change::after {
    content: '';
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: -0.2rem;
    border-inline-end: 2px solid var(--c-green);
    border-block-end: 2px solid var(--c-green);
    transform: rotate(45deg);
  }
  .pb-costed[open] .pb-costed-change::after { margin-block-start: 0.2rem; transform: rotate(-135deg); }
  .pb-costed-shut { display: none; }
  .pb-costed[open] .pb-costed-open { display: none; }
  .pb-costed[open] .pb-costed-shut { display: inline; }

  .pb-costed > .pb-tiers-field { padding: 0.25rem 1rem 1rem; }
  .pb-costed .pb-tiers-field legend { font-size: var(--t-base); }
  .pb-costed .pb-tiers-field .pb-help { margin-block-end: 0.7rem; }

   
  .pb-tier.is-costed .pb-tier-body,
  .pb-chip.is-costed span {
    border-color: var(--c-green);
    box-shadow: inset 0 0 0 1px var(--c-green);
  }
   
  .pb-inputs-lead > .pb-head { margin-block-end: 0; }
  .pb-inputs-lead .pb-slider-row { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
  .pb-inputs-lead > .pb-slider + .pb-slider { margin-block-start: 0; }

   
  .pb-slider-row {
    display: grid;
    gap: 0.75rem;
    align-items: center;
  }

  @media (min-width: 34rem) {
    .pb-slider-row { grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; }
  }

  .pb-range {
    --pb-pct: 0%;
    inline-size: 100%;
    block-size: 2.6rem;
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .pb-range:focus-visible { outline: 2px solid var(--c-green); outline-offset: 4px; border-radius: var(--r-pill); }

   
  .pb-range::-webkit-slider-runnable-track {
    block-size: 0.85rem;
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r-pill);
    background:
      linear-gradient(90deg, var(--c-green) 0 var(--pb-pct), transparent var(--pb-pct) 100%),
      var(--pb-glass);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
  }

  .pb-range::-moz-range-track {
    block-size: 0.85rem;
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r-pill);
    background:
      linear-gradient(90deg, var(--c-green) 0 var(--pb-pct), transparent var(--pb-pct) 100%),
      var(--pb-glass);
  }

  .pb-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-block-start: -0.47rem;
    border: var(--bw) solid var(--pb-edge-lit);
    border-radius: 50%;
    background:
      linear-gradient(155deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.12));
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.55),
      inset 0 -1px 0 rgb(5 35 82 / 0.35),
      0 4px 14px rgb(5 35 82 / 0.45);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }

  .pb-range::-moz-range-thumb {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: var(--bw) solid var(--pb-edge-lit);
    border-radius: 50%;
    background: linear-gradient(155deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.12));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.55),
      0 4px 14px rgb(5 35 82 / 0.45);
  }

  .pb-range:active::-webkit-slider-thumb { transform: scale(1.08); }
  .pb-range:active::-moz-range-thumb     { transform: scale(1.08); }

   
  .pb-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.5rem 0.8rem;
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r);
    background: var(--pb-glass);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    font-family: var(--font-data);
  }

  .pb-unit   { color: var(--c-on-ink-muted); font-size: var(--t-sm); }
  .pb-suffix { color: var(--c-on-ink-muted); font-size: var(--t-2xs); white-space: nowrap; }

  .pb-number {
    inline-size: 6ch;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--c-on-ink);
    font: inherit;
    font-size: var(--t-lg);
    font-weight: 600;
    text-align: end;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .pb-number::-webkit-outer-spin-button,
  .pb-number::-webkit-inner-spin-button { appearance: none; margin: 0; }
  .pb-number:focus-visible { outline: 2px solid var(--c-green); outline-offset: 3px; border-radius: var(--r-sm); }

   
  .pb-result {
     
    position: relative;
    display: grid;
    gap: var(--stack);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: var(--bw) solid var(--pb-edge-lit);
    border-radius: var(--r-lg);
    background:
      linear-gradient(165deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05));
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.3),
      0 18px 48px rgb(2 14 34 / 0.42);
  }

  @media (min-width: 60rem) {
    .pb-result { position: sticky; top: calc(var(--header-h) + 1.25rem); }
  }

   
  .pb-result::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    border-start-start-radius: var(--r-lg);
    border-start-end-radius: var(--r-lg);
    background: linear-gradient(90deg, transparent, var(--c-green), transparent);
    opacity: 0;
    transition: opacity 140ms linear;
    pointer-events: none;
  }

  .pb-result.is-updating::after { opacity: 1; transition-delay: 320ms; }

  @media (prefers-reduced-motion: reduce) {
    .pb-result::after { transition-duration: 0s; }
  }

   
  .pb-peek {
    position: fixed;
    inset-inline: 0;
     
    inset-block-start: var(--pb-peek-top, var(--header-h));
    z-index: var(--z-sticky);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
     
    padding-block: 0.5rem 0.6rem;
    padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
    background: var(--c-ink);
    border-block-end: var(--bw) solid rgb(255 255 255 / 0.16);
    box-shadow: 0 10px 26px rgb(2 14 34 / 0.38);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  }

  .pb-peek[hidden] { display: none; }
  .pb-peek.is-on   { opacity: 1; transform: none; }

  .pb-peek-eyebrow {
    flex: 0 1 auto;
    min-inline-size: 0;
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-green);
     
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

   
  .pb-peek-big {
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--width-display);
    font-size: var(--t-lg);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--weight-figure-ink, 500);
    line-height: var(--lead-tight);
    letter-spacing: var(--track-figure);
    color: var(--c-on-ink);
    white-space: nowrap;
  }

   
  @media (prefers-reduced-motion: reduce) {
    .pb-peek { transition: none; transform: none; }
  }

   

  .pb-r-eyebrow {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-green);
  }

   
  .pb-r-big {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--width-display);
    font-size: var(--t-4xl);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--weight-figure-ink, 500);
    line-height: var(--lead-tight);
    letter-spacing: var(--track-figure);
    color: var(--c-on-ink);
  }

   
  .pb-r-big small,
  .pb-peek-big small {
    font-family: var(--font-data);
    font-size: var(--t-label);
    font-weight: 400;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

   
  .pb-r-big--word {
    font-size: var(--t-2xl);
    font-variant-numeric: normal;
    font-weight: var(--weight-display-ink, 450);
    letter-spacing: var(--track-display);
  }

   
  .pb-r-sub { margin: 0; font-size: var(--t-sm); color: var(--c-on-glass-muted); line-height: var(--lead-normal); }

  .pb-bar {
    block-size: 0.5rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.13);
    overflow: hidden;
  }

  .pb-bar span {
    display: block;
    block-size: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--c-green), color-mix(in srgb, var(--c-green) 60%, #FFFFFF));
    transition: inline-size var(--dur) var(--ease-out);
  }

  .pb-bar-ends {
    display: flex;
    justify-content: space-between;
    margin: -0.5rem 0 0;
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    color: var(--c-on-ink-muted);
  }

   
  .pb-caveat {
    margin: 0;
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-ink-muted);
  }
  .pb-caveat b { color: var(--c-on-ink); }

   

   
  .pb .btn.pb-cta {
    inline-size: 100%;
    background: var(--c-green);
    color: #052352;
    border-color: transparent;
  }
  .pb .btn.pb-cta:hover {
    background: var(--c-green-text);
    color: #FFFFFF;
  }
  @media (min-width: 60rem) {
    .pb .btn.pb-cta { inline-size: auto; justify-self: start; }
  }

  .pb-cta-note {
    margin: calc(var(--stack) * -0.55) 0 0;
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-glass-muted);
  }

   
  .pb-how,
  .pb-figures {
    border: var(--bw) solid var(--pb-edge);
    border-radius: var(--r-sm, 0.5rem);
    background: var(--pb-glass);
  }

  .pb-how > summary,
  .pb-figures > summary {
    position: relative;
    padding: 0.95rem 3rem 0.95rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--width-display);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: var(--lead-snug);
    color: var(--c-on-ink);
  }
  .pb-how > summary::-webkit-details-marker,
  .pb-figures > summary::-webkit-details-marker { display: none; }

  .pb-how > summary::after,
  .pb-figures > summary::after {
    content: '+';
    position: absolute;
    inset-inline-end: 1.1rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: var(--font-data);
    font-size: var(--t-lg);
    font-weight: 400;
    line-height: 1;
  }
  .pb-how[open] > summary::after,
  .pb-figures[open] > summary::after { content: '-'; }

  .pb-how > summary:hover,
  .pb-figures > summary:hover { background: var(--pb-glass-strong); border-radius: var(--r-sm, 0.5rem); }
  .pb-how > summary:focus-visible,
  .pb-figures > summary:focus-visible {
    outline: 2px solid var(--c-green);
    outline-offset: 2px;
    border-radius: var(--r-sm, 0.5rem);
  }

   
  .pb-how-rows { display: grid; margin: 0; padding: 0 1.1rem; }

  .pb-how-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stack);
    padding-block: 0.7rem;
    border-block-start: var(--bw) solid rgb(255 255 255 / 0.14);
    font-size: var(--t-sm);
  }

  .pb-how-rows dt { margin: 0; color: var(--c-on-ink); }
  .pb-how-rows dt small {
    display: block;
    margin-block-start: 0.15rem;
    font-size: var(--t-xs);
    font-weight: 400;
    line-height: var(--lead-normal);
    color: var(--c-on-glass-muted);
  }
  .pb-how-rows dd { margin: 0; font-family: var(--font-data); color: var(--c-on-ink); white-space: nowrap; }
  .pb-how-rows dd.is-out { color: #FFB4A2; }
  .pb-how-rows .is-total { font-weight: 600; }
  .pb-how-rows .is-total dd { font-size: var(--t-base); }

  .pb-how-foot {
    margin: 0;
    padding: 0.75rem 1.1rem 1rem;
    border-block-start: var(--bw) solid rgb(255 255 255 / 0.14);
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-glass-muted);
  }

   

  .pb--assess {
    border-block-start: var(--bw) solid rgb(255 255 255 / 0.14);
    background:
      radial-gradient(120% 90% at 92% 0%,  rgb(8 200 32 / 0.14) 0%, transparent 58%),
      radial-gradient(110% 80% at 4% 14%,  rgb(0 72 200 / 0.32) 0%, transparent 60%),
      linear-gradient(192deg, var(--c-ink-2) 0%, var(--c-ink) 62%);
  }

   
  .pb-group {
    display: grid;
    gap: var(--stack);
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid rgb(255 255 255 / 0.14);
  }

  .pb-group > legend {
    float: left;
    inline-size: 100%;
    margin-block-end: calc(var(--stack) * -0.25);
  }

  .pb-group > legend .num {
    font-family: var(--font-data);
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--c-green);
    margin-inline-end: var(--stack-tight);
  }

   
  .pb-group > legend + * { clear: both; }

  .pb-slider + .pb-slider { margin-block-start: var(--stack); }

   

   
  .pb-basis {
    margin: 0;
    padding: 0.85rem 1.1rem 1rem;
    border-block-start: var(--bw) solid var(--pb-edge);
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-ink-muted);
    max-inline-size: 62ch;
  }
  .pb-basis b { color: var(--c-on-ink); }

  .pb-figures-intro {
    margin: 0 1.1rem;
    padding-block: 0.9rem;
    border-block-start: var(--bw) solid var(--pb-edge);
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-ink-muted);
    max-inline-size: 62ch;
  }

  .pb-figures .pb-slider { padding: 0 1.1rem 1.1rem; }
  .pb-figures .pb-slider + .pb-slider { margin-block-start: 0; }

   
  .pb-slider--sm .pb-label { font-size: var(--t-sm); font-weight: 600; }
  .pb-slider--sm .pb-help  { margin-block-end: 0.6rem; }

   
   
  .pb-source {
    margin: 0.55rem 0 0;
    font-size: var(--t-xs);
    line-height: var(--lead-normal);
    color: var(--c-on-glass-muted);
    max-inline-size: 62ch;
  }
  .pb-source-date { white-space: nowrap; }
  .pb-source--foot {
    margin: 0 1.1rem;
    padding-block: 0.9rem 1.1rem;
    border-block-start: var(--bw) solid var(--pb-edge);
  }

   
   

   
  .calc-panel .eyebrow {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-2xs);
    font-weight: 400;
    font-variation-settings: normal;
    letter-spacing: var(--track-eyebrow);
    color: var(--c-green);
  }

  .calc-panel .eyebrow::before { content: none; }

  .calc-panel .calc-figures { gap: 0; }

  .calc-panel .calc-figures > div {
    padding-block: 0.55rem;
    border-block-end-color: rgb(255 255 255 / 0.14);
  }

  .calc-panel .calc-figures > div:last-child { border-block-end: 0; }

   
  .calc-panel .calc-headline {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.85rem;
  }

  .calc-panel .calc-headline dd {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--width-display);
    font-size: var(--t-4xl);
    font-weight: 700;
    letter-spacing: var(--track-display);
  }

  .calc-panel .calc-note,
  .calc-panel .calc-caveat { font-size: var(--t-xs); }

  .calc-panel .calc-caveat { border-inline-start-color: var(--c-green); }

  .calc-panel .calc-benchmark,
  .calc-panel .calc-running { border-block-start-color: rgb(255 255 255 / 0.18); }

   
  @supports not (backdrop-filter: blur(2px)) {
    .pb-chip span,
    .pb-tier-body,
    .pb-readout,
    .pb-result { background: var(--c-ink-2); }
    .pb-result { background: linear-gradient(165deg, #12346F, var(--c-ink-2)); }
  }

}

 

@layer components {

   

   
  .site-header .nav-list {
    position: relative;
    flex: 0 1 auto;
    min-inline-size: 0;
    flex-wrap: nowrap;
    gap: clamp(0.6rem, 1.05vw, 1rem);
  }

   
  .site-header .nav-link {
    white-space: nowrap;
    font-size: var(--t-nav);

     
    letter-spacing: 0.03em;
  }

   
  @media (min-width: 96rem) {
    .site-header .nav-link { letter-spacing: 0.02em; }
  }

   
  .site-header .nav-summary .icon { inline-size: 0.8em; block-size: 0.8em; }

   
  .header-inner { gap: clamp(0.6rem, 1.1vw, 1.25rem); }

   
  .header-inner > .logo img { block-size: clamp(30px, 2.5vw, 40px); }

  .header-cta { padding-inline: clamp(0.7rem, 1.1vw, 1.2rem); }

   
  .nav-details[data-panel-align="row"] { position: static; }

  .nav-details[data-panel-align="row"] > .nav-panel {
    inset-inline: 0;
    inline-size: auto;
  }

   
  .nav-details[data-panel-align="row"] .nav-panel-list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: var(--stack);
  }

   
  .site-header [data-register-item="local"] {
    box-shadow: inset 0 -3px 0 0 var(--c-green-text);
  }

   
  .site-header [data-register-item="local"][aria-current="page"],
  .site-header [data-register-item="local"][data-section-current="true"] {
    box-shadow: inset 0 -2px 0 0 var(--c-blue);
  }

   
  .nav-summary:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

   
  [data-register-preview="local"] {
    --c-bg:          var(--c-paper);
    --c-surface:     var(--c-paper-surface);
    --c-surface-2:   var(--c-paper-surface-2);
    --c-line:        var(--c-paper-line);
    --c-line-strong: var(--c-paper-line-strong);
  }

  .nav-panel[data-register-preview="local"] { background: var(--c-paper); }

   
   
  .mobile-nav-list a,
  .mobile-nav-group > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--stack);
  }

   
  .mobile-nav-label { grid-area: 1 / 1; min-inline-size: 0; min-block-size: 1.75rem; }
  .mobile-nav-hint  { grid-area: 2 / 1; }

  .mobile-nav-list a > .icon,
  .mobile-nav-group > summary > .icon { grid-area: 1 / 2; align-self: center; }

  .mobile-nav-hint {
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-variation-settings: normal;
    font-weight: 400;
    line-height: var(--lead-normal);
    letter-spacing: normal;
    color: var(--c-text-muted);
    text-wrap: pretty;
  }

   
  .mobile-nav-list { align-items: start; }

  .mobile-nav-list a,
  .mobile-nav-group > summary { align-items: start; padding-block: 0.85rem; }

   
  .mobile-nav-list > [data-register-preview="local"] {
    background: var(--c-paper);
    border-block: var(--bw) solid var(--c-paper-line);
  }

}

@layer components {

   

  .disclose-group {
    display: grid;
    gap: 0;
    border-block-start: var(--bw) solid var(--c-line-strong);
  }

  .disclose {
    border-block-end: var(--bw) solid var(--c-line);
  }

  .disclose > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--stack);
    min-block-size: 48px;
    padding-block: var(--stack);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-variation-settings: "wdth" var(--width-display-text);
    font-weight: var(--weight-display-text);
    letter-spacing: var(--track-display-text);
    color: var(--c-text);
    text-wrap: pretty;
  }

  .disclose > summary::-webkit-details-marker { display: none; }
  .disclose > summary::marker { content: ''; }

   
  .disclose > summary::after {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    margin-block-start: 0.15em;
    background: currentColor;
    mask: var(--icon-chevron-down) center / contain no-repeat;
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
  }

  .disclose[open] > summary::after { transform: rotate(180deg); }

  .disclose > summary:hover { color: var(--c-blue); }

  .disclose > summary:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
  }

   
   
  .disclose-body {
    display: grid;
    gap: var(--stack);
    padding-block-end: var(--stack);
    max-inline-size: var(--maxw-text);
    color: var(--c-text);
  }

   

   
  .claim {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-tight);
  }
  .claim > .disclose-group { margin-block-start: var(--stack); }

   
  .honest-limit {
    padding-block: var(--stack);
    border-block-start: 2px solid var(--c-text);
  }

  .honest-limit > p { max-inline-size: var(--maxw-text); }


   

  .evidence { font-size: var(--t-sm); }

  .evidence > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-block-size: 44px;
    cursor: pointer;
    list-style: none;
    color: var(--c-blue);
    text-underline-offset: 3px;
  }

  .evidence > summary::-webkit-details-marker { display: none; }
  .evidence > summary::marker { content: ''; }
  .evidence > summary:hover { text-decoration: underline; }

  .evidence > summary::after {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    background: currentColor;
    mask: var(--icon-chevron-down) center / contain no-repeat;
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
  }

  .evidence[open] > summary::after { transform: rotate(180deg); }

   
  .evidence-body {
    display: grid;
    gap: 0.25rem;
    margin-block-end: var(--stack-tight);
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-line-strong);
    font-size: var(--t-sm);
    line-height: var(--lead-normal);
    color: var(--c-text-muted);
    max-inline-size: var(--maxw-text);
  }

  .evidence-source { font-family: var(--font-data); font-size: var(--t-xs); }

   
  .evidence-body a { overflow-wrap: anywhere; }

   
  .band .evidence > summary,
  .on-ink .evidence > summary { color: var(--c-green); }

  .band .evidence-body,
  .on-ink .evidence-body {
    border-inline-start-color: var(--c-ink-line);
    color: var(--c-on-ink-muted);
  }


   

  .stat {
    display: grid;
    gap: 0.15rem;
    max-inline-size: 34ch;
  }

  .stat-what {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   
  .stat-figure {
    font-family: var(--font-display);
    font-size: var(--t-4xl);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-figure);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: var(--lead-tight);
    color: var(--c-text);
  }


  .stat-unit {
    font-family: var(--font-data);
    font-size: var(--t-lg);
    font-weight: 400;
    color: var(--c-text-muted);
  }

  .stat-note {
    font-size: var(--t-sm);
    line-height: var(--lead-normal);
    color: var(--c-text);
    max-inline-size: 32ch;
  }

  .stat-source { margin-block-start: 0.35rem; }

   
  .stat--xl .stat-figure--xl + .stat-note { margin-block-start: 1rem; }

   
  [data-js] .stat[data-reveal] .stat-figure + .stat-note,
  [data-js] .stat[data-reveal] .stat-figure--xl + .stat-note { margin-block-start: 1rem; }

   
  .stat[data-tone="heat"] .stat-figure { color: var(--c-heat-text); }

   
  .band .stat-what,
  .on-ink .stat-what { color: var(--c-on-ink-muted); }

   
  .band .stat-figure,
  .on-ink .stat-figure {
    font-size: var(--t-3xl);
    font-weight: var(--weight-figure-ink, 500);
    color: var(--c-green);
  }

  .band .stat-unit,
  .on-ink .stat-unit { color: var(--c-on-ink-muted); }

  .band .stat-note,
  .on-ink .stat-note { color: var(--c-on-ink); }

   
  .stat-row {
    display: grid;
    gap: var(--sec-tight) var(--stack);
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .stat-row { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  }


   

  .cta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-tight) var(--stack);
    margin-block-start: var(--stack);
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-line);
  }

  .cta-inline p {
    margin: 0;
    flex: 1 1 18rem;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-variation-settings: "wdth" var(--width-display-text);
    font-weight: var(--weight-display-text);
    letter-spacing: var(--track-display-text);
    text-wrap: pretty;
  }

  .cta-inline .btn { flex: 0 1 auto; min-block-size: 48px; }

  @media (max-width: 47.99rem) {
    .cta-inline .btn { inline-size: 100%; max-inline-size: 22rem; justify-content: center; }
  }

  .band .cta-inline,
  .on-ink .cta-inline { border-block-start-color: var(--c-ink-line); }


   

  .empty-state {
    display: grid;
    gap: var(--stack-tight);
    padding: var(--sec-tight) var(--stack);
    background: var(--c-surface);
    border-radius: var(--r);
  }

  .empty-state h3 {
    margin: 0;
    font-size: var(--t-xl);
    max-inline-size: 24ch;
  }

  .empty-state p { margin: 0; max-inline-size: var(--maxw-text); color: var(--c-text-muted); }

  .empty-state .btn { justify-self: start; margin-block-start: var(--stack-tight); }

}

@layer components {

   

  .route-panels {
    display: grid;
    gap: var(--stack);
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .route-panels {
      grid-template-columns: 1.6fr 1fr;
      grid-template-rows: auto auto;
    }
    .route-panels > .route-panel:first-child {
      grid-row: 1 / span 2;
    }
  }

  .route-panel {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--stack-tight);
    padding: var(--stack);
    background: var(--c-bg);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r-lg);
  }

   
  .route-panel::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: var(--stack);
    block-size: 4px;
    background: var(--c-line-strong);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
  }

  .route-panel[data-route="equipment"]::before { background: var(--c-blue); }
  .route-panel[data-route="local"]::before     { background: var(--c-green-text); }

  .route-panel h2,
  .route-panel h3 { margin: 0; text-wrap: balance; }

  .route-panel p { margin: 0; max-inline-size: 34ch; color: var(--c-text-muted); }

   
  .route-panel a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
     
    z-index: 1;
  }

  .route-panel a { text-decoration: none; color: var(--c-text); }

  .route-panel:hover { border-color: var(--c-line-strong); }

  .route-panel:has(a:focus-visible) {
    outline: 3px solid var(--c-blue);
    outline-offset: 3px;
  }

   
  .route-panel[data-route="equipment"] { gap: var(--stack); }

  .route-panel[data-route="equipment"] h2 { font-size: var(--t-2xl); }

   
  .route-panel[data-route="third"] { background: var(--c-surface); }

   
  @media (max-width: 55.99rem) {
    .route-panels > .route-panel:first-child { max-block-size: 62svh; overflow: clip; }
  }


   

  .tier-card {
    display: grid;
    align-content: start;
    gap: var(--stack-tight);
  }

  .tier-card h3 {
    margin: 0;
    font-size: var(--t-xl);
    font-variation-settings: "wdth" var(--width-display);
  }

   
  .tier-card h3 a { color: inherit; text-decoration: none; }
  .tier-card h3 a:hover,
  .tier-card h3 a:focus-visible { text-decoration: underline; }

  .tier-card p { margin: 0; max-inline-size: 34ch; }

  .tier-card .machine-specs { margin-block-start: var(--stack-tight); }

  .tier-card[aria-current="true"],
  .tier-card.is-selected { border-block-start: 3px solid var(--c-green); padding-block-start: var(--stack-tight); }

   
  @media (max-width: 55.99rem) {
    .tier-card + .tier-card:not(.is-selected):not([aria-current="true"]) {
      border-block-start: var(--bw) solid var(--c-line);
      padding-block-start: var(--stack);
    }
  }

   
  @media (max-width: 33.99rem) {
    .tier-card .machine-shot { max-block-size: 200px; overflow: clip; }
  }


   

  .section-rail { display: none; }

  @media (min-width: 64rem) {
    .section-rail {
      display: grid;
      gap: 0.35rem;
      align-content: start;
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--stack));
      font-size: var(--t-sm);
    }

    .section-rail a {
      padding: 0.3rem 0 0.3rem var(--stack-tight);
      border-inline-start: 3px solid transparent;
      color: var(--c-text-muted);
      text-decoration: none;
      text-wrap: pretty;
    }

    .section-rail a:hover { color: var(--c-text); }

    .section-rail a[aria-current="true"] {
      border-inline-start-color: var(--c-green);
      color: var(--c-text);
      font-weight: 600;
    }
  }

}

@layer components {

   

   
  .s2-head {
    font-family: var(--font-display);
    font-size: var(--t-display-3);
    font-weight: var(--weight-display);
    font-variation-settings: "wdth" var(--width-display-text);
    letter-spacing: var(--track-d3);
    line-height: var(--lead-display);
  }

   
  .surface-walk { display: grid; gap: var(--stack); }

  @media (min-width: 56rem) {
    .surface-walk { grid-template-columns: 0.85fr 1.15fr; column-gap: var(--sec-tight); }
    .surface-walk > * { align-self: start; }
  }

   
  .s2-place { display: grid; gap: var(--stack); }

  .s2-place-notes {
    display: grid;
    gap: var(--stack);
    counter-reset: es-place;
  }

  .s2-place-notes > p {
    margin: 0;
    counter-increment: es-place;
    max-inline-size: 34ch;
  }

  .s2-place-notes > p::before {
    content: counter(es-place, decimal-leading-zero) " ";
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-text-muted);
  }

  @media (min-width: 56rem) {
    .s2-place { grid-template-columns: 1.4fr 1fr; column-gap: var(--sec-tight); }
    .s2-place-figure { grid-column: 1; }
    .s2-place-notes  { grid-column: 2; align-self: center; }
  }

   
  .s2-contrast {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    border-block-start: var(--bw) solid var(--c-line-strong);
  }

   
  .s2-contrast-col { display: contents; }

  .s2-contrast-row {
    padding-block: var(--stack);
    border-block-end: var(--bw) solid var(--c-line);
  }

  .s2-contrast-row h3 {
    margin: 0 0 0.2rem;
    font-size: var(--t-sm);
    font-family: var(--font-data);
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .s2-contrast-row p { margin: 0; max-inline-size: var(--maxw-text); }

   
  .s2-contrast-row[data-side="after"] { padding-inline: var(--stack); background: var(--c-surface); }

  @media (min-width: 56rem) {
    .s2-contrast { grid-template-columns: 1fr 1fr; column-gap: var(--sec-tight); }
     
    .s2-contrast-row[data-side="before"] { grid-column: 1; }
    .s2-contrast-row[data-side="after"] { grid-column: 2; padding-inline: 0; background: none; border-inline-start: var(--bw) solid var(--c-line); padding-inline-start: var(--sec-tight); }
  }

   
  .s2-clock {
    display: grid;
    gap: var(--stack);
    grid-template-columns: 1fr;
    counter-reset: es-step;
  }

  .s2-clock-step {
    position: relative;
    padding-block-start: var(--stack);
    border-block-start: 3px solid var(--c-line-strong);
  }

  .s2-clock[data-tone="heat"] .s2-clock-step { border-block-start-color: var(--c-heat); }

  .s2-clock-time {
    display: block;
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .s2-clock-step h3 {
    margin: 0.2rem 0 0.3rem;
    font-size: var(--t-lg);
    text-wrap: balance;
  }

  .s2-clock-step p { margin: 0; max-inline-size: 34ch; }

  @media (min-width: 56rem) {
    .s2-clock { grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: var(--stack); }
  }

   
  .s2-limit { display: grid; gap: var(--sec-tight); }

   
  .s2-limit-statement {
    margin: 0;
    max-inline-size: 26ch;
    font-family: var(--font-display);
    font-size: var(--t-display-4);
    font-weight: var(--weight-display);
    line-height: var(--lead-tight);
    letter-spacing: var(--track-d4);
    font-variation-settings: "wdth" var(--width-display-text);
    text-wrap: balance;
  }

  .s2-limit-rows { display: grid; gap: var(--stack); }

   
  .s2-limit-row {
    position: relative;
    padding-inline-start: var(--stack);
    border-inline-start: var(--bw) solid var(--c-line-strong);
  }

  .s2-limit-row::before {
    content: "";
    position: absolute;
    inset-block-start: 0.5em;
    inset-inline-start: calc(-0.1875rem - (var(--bw) / 2));
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: var(--c-green);
  }

  .s2-limit-row h3 {
    margin: 0 0 0.25rem;
    font-size: var(--t-lg);
    text-wrap: balance;
  }

  .s2-limit-row p { margin: 0; max-inline-size: 38ch; }

  @media (min-width: 56rem) {
    .s2-limit-statement { max-inline-size: 30ch; }
    .s2-limit-rows { grid-template-columns: 1fr 1fr; column-gap: var(--sec-tight); }
  }

   
  .ind-s4-surfaces { margin-block-end: var(--sec-tight); }

   
  .ind-s4-media {
    margin-block-end: var(--sec-tight);
     
    max-inline-size: 60rem;
    margin-inline: auto;
  }
  .ind-s4-media picture,
  .ind-s4-media img { inline-size: 100%; block-size: auto; border-radius: var(--r); display: block; }

   
  .ind-s4-media:not(:has(img[src*="/real/"])),
  .s2-place-figure:not(:has(img[src*="/real/"])) {
    max-inline-size: 48rem;
    margin-inline: auto;
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r);
  }

   
  .surface-roll {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem var(--stack-tight);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-variation-settings: "wdth" var(--width-display);
    font-weight: 600;
    letter-spacing: var(--track-display);
  }

  .surface-roll > li + li::before {
    content: "";
    display: inline-block;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    margin-inline-end: var(--stack-tight);
    border-radius: 50%;
    background: var(--c-green);
    vertical-align: 0.15em;
  }

   
  .cross-route {
    display: block;
    margin-block-start: var(--sec-tight);
    padding: var(--stack);
    background: var(--c-paper-surface);
    border-radius: var(--r);
    font-size: var(--t-sm);
    color: var(--c-text);
    max-inline-size: 46ch;
  }

  .cross-route a { font-weight: 600; }

   
  [data-register="local"] .cross-route { background: var(--c-surface-2); }


   

   
  [data-js] .comparison-bars .bar-fill { clip-path: inset(0 100% 0 0); }

  [data-js] .comparison-bars.is-in .bar-fill {
    clip-path: inset(0 0 0 0);
    transition: clip-path 700ms var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }

  [data-js] .comparison-bars .bar-track .bar-figure { opacity: 0; }

  [data-js] .comparison-bars.is-in .bar-track .bar-figure {
    opacity: 1;
    transition: opacity var(--dur) var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 70ms + 560ms);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-js] .comparison-bars .bar-fill { clip-path: inset(0 0 0 0); transition: none; }
    [data-js] .comparison-bars .bar-track .bar-figure { opacity: 1; transition: none; }
  }

   
  [data-js] .hero [data-hero-in] {
    opacity: 1;
    transform: translateY(0.5rem);
    animation: es-hero-in var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--hero-i, 0) * var(--stagger-hero));
  }

  @keyframes es-hero-in {
    from { transform: translateY(0.5rem); }
    to   { transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-js] .hero [data-hero-in] { animation: none; transform: none; }
  }

   
  @keyframes es-changed {
    from { opacity: 0.35; transform: translateY(6px); }
    to   { opacity: 1;    transform: none; }
  }

  [data-js] .is-changed .pb-r-big,
  [data-js] .stat.is-changed .stat-figure {
    animation: es-changed 180ms var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-js] .is-changed .pb-r-big,
    [data-js] .stat.is-changed .stat-figure { animation: none; opacity: 1; transform: none; }
  }

   
  [data-js] .stat[data-reveal] .stat-figure { position: relative; }

  [data-js] .stat[data-reveal] .stat-figure::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -0.15em;
    block-size: 3px;
    inline-size: 100%;
    background: var(--c-heat-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out);
  }

   
  [data-js] .band .stat[data-reveal] .stat-figure::after,
  [data-js] .on-ink .stat[data-reveal] .stat-figure::after,
  [data-js] .ink .stat[data-reveal] .stat-figure::after { background: var(--c-green); }

  [data-js] .stat[data-reveal].is-in .stat-figure::after { transform: scaleX(1); }

  @media (prefers-reduced-motion: reduce) {
    [data-js] .stat[data-reveal] .stat-figure::after {
      transform: none;
      transition: none;
    }
  }

}

@layer components {

   

   

  .link-arrow {
    font-weight: 600;
    color: var(--c-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease);
  }

   
  .link-arrow-tail { white-space: nowrap; }

  .link-arrow .icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.125em;
    margin-inline-start: 0.2em;
    transition: translate var(--dur-fast) var(--ease-out);
  }

  .link-arrow:hover,
  .link-arrow:focus-visible { text-decoration-color: currentColor; }

  .link-arrow:hover .icon,
  .link-arrow:focus-visible .icon { translate: 3px 0; }

   
  .link-arrow.is-cue {
    display: inline-block;
    align-self: start;
    text-decoration: none;
     
    margin-block-start: auto;
  }
  .has-card-link:hover .link-arrow.is-cue .icon { translate: 3px 0; }

   
  .link-arrow.is-card { font-weight: inherit; }

   

  @media (prefers-reduced-motion: reduce) {
    .link-arrow,
    .link-arrow .icon { transition: none; }
    .link-arrow:hover .icon,
    .link-arrow:focus-visible .icon,
    .has-card-link:hover .link-arrow.is-cue .icon { translate: none; }
  }

   

  .has-card-link {
    position: relative;
    isolation: isolate;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease),
      box-shadow var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out);
  }

  .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
  }

   
  .card-link:focus-visible { outline: none; }

  .has-card-link:has(.card-link:focus-visible) {
    outline: 3px solid var(--c-blue);
    outline-offset: 3px;
  }

   
  .has-card-link.on-ink:has(.card-link:focus-visible) { outline-color: var(--c-green); }

  .has-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--e-2);
  }

   
  .has-card-link > :is(button, input, select, textarea, a:not(.card-link)) {
    position: relative;
    z-index: 2;
  }

  @media (prefers-reduced-motion: reduce) {
    .has-card-link { transition: none; }
    .has-card-link:hover { transform: none; }
  }

   

  .tier-card {
    --tier-accent: var(--c-blue);
    background: var(--c-blue-weak);
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-lg);
    padding: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
    box-shadow: var(--e-1);
     
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
  }

   
  .tier-card::before {
    content: "";
    display: block;
    block-size: 3px;
    border-radius: var(--r-sm);
    background: var(--tier-accent);
    margin-block-end: var(--stack-tight);
  }

  .tier-card h3 a { color: inherit; text-decoration: none; }
  .tier-card h3 a:hover { color: inherit; }

  .tier-card .machine-specs { color: var(--c-text-muted); }

  .tier-card:hover { background: var(--c-blue-weak-2); }

   
  .tier-card[data-tier="professional"] {
    --tier-accent: var(--c-on-ink);
    background: var(--c-blue);
    border-color: var(--c-blue-hover);
    color: var(--c-on-ink);
  }
  .tier-card[data-tier="professional"] p { color: var(--c-on-blue-muted); }
  .tier-card[data-tier="professional"] .machine-specs { color: var(--c-on-blue-muted); }
  .tier-card[data-tier="professional"] .link-arrow { color: var(--c-on-ink); }
  .tier-card[data-tier="professional"]:hover { background: var(--c-blue-hover); }
  .tier-card[data-tier="professional"]:has(.card-link:focus-visible) { outline-color: var(--c-on-ink); }

   
  .tier-card[data-tier="industrial"] {
    --tier-accent: var(--c-green);
    background-color: var(--c-ink);
    background-image: var(--wash-ink);
    border-color: var(--c-ink-line);
    color: var(--c-on-ink);
  }
  .tier-card[data-tier="industrial"] p { color: var(--c-on-ink-muted); }
  .tier-card[data-tier="industrial"] .machine-specs { color: var(--c-on-ink-muted); }
  .tier-card[data-tier="industrial"] .link-arrow { color: var(--c-green); }
  .tier-card[data-tier="industrial"]:hover { background-color: var(--c-ink-2); }

   
  .tier-card .machine-shot { box-shadow: none; }

   
  .tier-card.is-selected {
    box-shadow: var(--e-1), inset 0 0 0 3px var(--tier-accent);
  }
   
  .tier-card .selector-tick {
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.125em;
    margin-inline-end: 0.3em;
    display: inline-block;
    color: var(--tier-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .tier-card { transition: none; }
  }

   

  .sector-bento { background: var(--c-line-strong); }

  .sector-tile {
    padding: 0;
    gap: 0;
    background: transparent;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    overflow: hidden;
  }

  .sector-tile .sector-tile-media {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 0;
    overflow: hidden;
    background: var(--c-surface);
  }
  .sector-tile .sector-tile-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--dur-slow) var(--ease-out);
  }

  .sector-tile .sector-tile-body {
    display: grid;
    gap: var(--stack-tight);
    align-content: start;
    padding: var(--stack);
    background: var(--c-bg);
    transition: background-color var(--dur-fast) var(--ease);
  }

  .sector-tile:hover { background: transparent; }
  .sector-tile:hover .sector-tile-body { background: var(--c-surface); }
  .sector-tile:hover .sector-tile-media img { scale: 1.03; }

   
  .sector-tile:hover .sector-tile-body,
  .sector-tile:focus-visible .sector-tile-body {
    box-shadow: inset 0 3px 0 0 var(--c-green);
  }

   
  .sector-bento .is-lead .sector-tile-body {
    background-color: var(--c-ink);
    background-image: var(--wash-ink);
    color: var(--c-on-ink);
  }
  .sector-bento .is-lead .sector-tile-body p { color: var(--c-on-ink-muted); }
  .sector-bento .is-lead .sector-tile-body .icon { color: var(--c-green); }
  .sector-bento .is-lead:hover .sector-tile-body { background-color: var(--c-ink-2); }
  .sector-bento .is-lead h3 { font-size: var(--t-xl); }

   
  @media (max-width: 39.99rem) {
    .sector-bento { grid-template-columns: 1fr; }
    .sector-tile {
      grid-template-columns: 5.5rem 1fr;
      grid-template-rows: auto;
      align-items: stretch;
    }
    .sector-tile .sector-tile-media {
      aspect-ratio: 1;
      block-size: 100%;
    }
    .sector-tile .sector-tile-body { padding: var(--stack-tight) var(--stack); }
    .sector-bento .is-lead h3 { font-size: var(--t-lg); }
  }

   
  @media (min-width: 40rem) {
    .sector-bento { grid-template-columns: repeat(2, 1fr); }
    .sector-bento .is-lead { grid-column: 1 / -1; }
  }

  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .sector-bento .is-lead {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
    }
    .sector-bento .is-lead .sector-tile-media { block-size: 100%; aspect-ratio: auto; }
  }

   
  @media (min-width: 64rem) {
    .sector-bento {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    .sector-bento .is-lead {
      grid-column: 1;
      grid-row: 1 / 3;
      grid-template-rows: 1fr auto;
    }
    .sector-bento .is-lead .sector-tile-media { block-size: 100%; aspect-ratio: auto; }
  }

   
   
  .sector-grid:not(.sector-bento)[data-count="4"],
  .sector-grid:not(.sector-bento):has(> :last-child:nth-child(4)),
  .sector-grid:not(.sector-bento)[data-count="6"],
  .sector-grid:not(.sector-bento):has(> :last-child:nth-child(6)) { grid-template-columns: 1fr; }

  @media (min-width: 40rem) {
    .sector-grid:not(.sector-bento)[data-count="4"],
    .sector-grid:not(.sector-bento):has(> :last-child:nth-child(4)),
    .sector-grid:not(.sector-bento)[data-count="6"],
    .sector-grid:not(.sector-bento):has(> :last-child:nth-child(6)) { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 64rem) {
    .sector-grid:not(.sector-bento)[data-count="4"],
    .sector-grid:not(.sector-bento):has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
    .sector-grid:not(.sector-bento)[data-count="6"],
    .sector-grid:not(.sector-bento):has(> :last-child:nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
  }

  @media (prefers-reduced-motion: reduce) {
    .sector-tile .sector-tile-media img,
    .sector-tile .sector-tile-body { transition: none; }
    .sector-tile:hover .sector-tile-media img { scale: none; }
  }

   

  .surface-cards {
    display: grid;
    gap: var(--stack);
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  @media (min-width: 40rem) {
    .surface-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 64rem) {
    .surface-cards { grid-template-columns: repeat(4, 1fr); }
  }

  .surface-card {
     
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
    background: var(--c-surface);
    border-radius: var(--r);
    padding: var(--stack);
    box-shadow: var(--e-1);
  }

   
  .surface-cards > li {
    display: flex;
    flex-direction: column;
    gap: var(--stack-tight);
    align-items: stretch;
    grid-template-columns: none;
  }

  .surface-card:hover { background: var(--c-blue-weak); }

  .surface-card .num {
    font-size: var(--t-2xl);
    line-height: 1;
    color: var(--c-blue);
  }

  .surface-card h3 { font-size: var(--t-lg); }
  .surface-card h3 a { color: inherit; text-decoration: none; }
  .surface-card h3 a:hover { color: inherit; }
  .surface-card p { font-size: var(--t-sm); color: var(--c-text-muted); }

   

   

  .machine-strip {
    display: grid;
    gap: var(--stack);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 40rem) {
    .machine-strip[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .machine-strip[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .machine-strip[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 56rem) {
    .machine-strip[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .machine-tile {
    display: grid;
    gap: var(--stack-tight);
    align-content: start;
    text-decoration: none;
    color: inherit;
    min-block-size: 44px;
  }

  .machine-tile-plate {
    display: block;
    background: var(--c-surface);
    border-radius: var(--r);
    padding: 0.75rem;
     
    aspect-ratio: 16 / 10;
    isolation: isolate;
    box-shadow: var(--e-1);
    transition:
      box-shadow var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out);
  }

  @media (min-width: 40rem) {
    .machine-tile-plate { aspect-ratio: 1; }
  }

  .machine-tile-plate img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .machine-tile-name {
    font-family: var(--font-data);
    font-size: var(--t-sm);
    text-align: center;
    color: var(--c-on-ink);
    transition: color var(--dur-fast) var(--ease);
  }

  .machine-tile:hover .machine-tile-plate,
  .machine-tile:focus-visible .machine-tile-plate {
    box-shadow: var(--e-2), inset 0 3px 0 0 var(--c-green);
    transform: translateY(-2px);
  }
  .machine-tile:hover .machine-tile-name { color: var(--c-green); }

   
  .machine-tile .link-arrow-tail .icon { color: var(--c-green); }

  @media (prefers-reduced-motion: reduce) {
    .machine-tile-plate,
    .machine-tile-name { transition: none; }
    .machine-tile:hover .machine-tile-plate,
    .machine-tile:focus-visible .machine-tile-plate { transform: none; }
  }

   

  .cross-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack);
    margin-block-start: var(--sec-tight);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background: var(--c-blue-weak);
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-lg);
    font-size: var(--t-sm);
    color: var(--c-text);
    max-inline-size: none;
  }

   
  .bridge-card-icon {
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    color: var(--c-blue);
    stroke-width: var(--icon-stroke);
  }

  .cross-route > .btn {
    flex: none;
    margin-inline-start: auto;
    box-shadow: none;
  }

   
  .cross-route > .btn-secondary {
    color: var(--c-blue);
    border-color: var(--c-blue);
    background: transparent;
  }
  .cross-route > .btn-secondary:hover {
    background: var(--c-blue-weak-2);
    color: var(--c-blue-hover);
    border-color: var(--c-blue-hover);
  }

   
  [data-register="local"] .cross-route {
    background: var(--c-blue-weak);
    border-color: var(--c-line-strong);
  }

  @media (max-width: 39.99rem) {
    .cross-route > .btn { margin-inline-start: 0; }
  }

   

  .has-edge { border-block-start: var(--bw) solid var(--c-line); }
  .band + .has-edge,
  .on-ink .has-edge { border-block-start-color: var(--c-ink-line); }
  [data-register="local"] .has-edge { border-block-start-color: var(--c-paper-line); }

}

@layer components {

   

   

  .tech-open {
    background-color: var(--c-surface);
    background-image: var(--wash-surface);
    background-repeat: no-repeat;
  }

   
  .tech-open-head { padding-block-end: var(--sec-tight); }

  .tech-open-foot {
     
    border-block-end: var(--bw) solid var(--c-line-strong);
     
    background-image: none;
    padding-block-start: var(--stack);
  }

   

  .dirt-block {
    background-color: var(--c-surface);
    background-image: var(--wash-surface);
    background-repeat: no-repeat;
    border-block: var(--bw) solid var(--c-line);
    padding-block: var(--sec-tight);
    margin-block: var(--sec-tight);
  }

  .dirt-inner {
     
    max-inline-size: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

   
  .is-section-weight { font-size: var(--t-2xl); }

  .dirt-inner > .eyebrow { margin-block-end: var(--stack-tight); }

  .dirt-grid {
    display: grid;
    gap: var(--stack);
    grid-template-columns: 1fr;
  }

  @media (min-width: 64rem) {
    .dirt-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sec-tight); }
  }

   
  .dirt-item > * + * { margin-block-start: var(--stack-tight); }
  .dirt-item > .argument-statement { margin-block-start: 0.25rem; }
  .dirt-item > :is(picture, .img-slot, .dirt-plate) { margin-block-end: var(--stack); }

   
  .dirt-item .argument-statement { font-size: var(--t-xl); }

  .dirt-media,
  .dirt-item .dirt-plate {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r);
    overflow: hidden;
  }

  .dirt-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

   
  .dirt-item .dirt-plate {
    display: grid;
    place-items: center;
    background: var(--c-blue-weak);
     
    margin-block-start: 0;
    margin-inline: 0;
  }

  .dirt-item .dirt-plate > span {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-eyebrow);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
    color: var(--c-blue);
  }

   

  .surface-list-route { margin-block-start: var(--stack); }

   

}

@layer components {

   

   

  .chip-field { border: 0; padding: 0; margin: 0; }

  .chip-field legend {
    padding: 0;
    font-size: var(--t-sm);
    font-weight: 600;
    margin-block-end: var(--stack-tight);
  }

  .chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight);
  }

  .chip-option {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0.7rem 0.95rem;
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: var(--t-sm);
    line-height: 1.2;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
  }

   
  .chip-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .chip-option:hover { border-color: var(--c-blue); color: var(--c-blue); }

  .chip-option:has(input:checked) {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-on-ink);
    font-weight: 600;
  }

  .chip-option:has(input:focus-visible) {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .chip-option { transition: none; }
  }

   
  .field-group {
    display: grid;
    gap: var(--stack);
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-line);
  }

   

  .trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.55rem;
    margin: 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
  }

  .trust-row-sep { color: var(--c-line-strong); }

  .trust-row-tight { margin-block-start: var(--stack-tight); }

   
  .band .trust-row,
  .on-ink .trust-row { color: var(--c-on-ink-muted); }

   

  .accessories {
    display: grid;
    gap: var(--stack);
    margin-block-start: var(--stack);
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-line);
  }

  .accessories-group { display: grid; gap: 0.35rem; }

  @media (min-width: 34rem) {
    .accessories[data-count="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--stack);
    }
     
    .accessories-note,
    .accessories-fact { grid-column: 1 / -1; }
  }

  .accessories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-size: var(--t-sm);
  }

  .accessories-list li {
    padding-inline-start: 0.9rem;
    position: relative;
  }

   
  .accessories-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    inline-size: 0.45rem;
    block-size: var(--bw);
    background: var(--c-blue);
  }

  .accessories-note {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-inline-size: var(--maxw-text);
  }

   
  .accessories-fact {
    margin: 0;
    font-size: var(--t-sm);
    max-inline-size: var(--maxw-text);
  }

   

  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--stack);
  }

  @media (min-width: 40rem) {
    .timeline[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .timeline[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .timeline[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .timeline-step {
    display: grid;
    gap: 0.3rem;
    padding-block-start: 0.9rem;
    position: relative;
  }

   
  .timeline-step::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--bw);
    background: var(--c-line);
  }

  .timeline-tick {
    position: absolute;
    inset-block-start: -3px;
    inset-inline-start: 0;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--c-blue);
  }

  .timeline-year {
    font-family: var(--font-data);
    font-size: var(--t-lg);
    font-variant-numeric: tabular-nums;
    color: var(--c-blue);
    line-height: 1;
  }

  .timeline-label {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
    max-inline-size: 22ch;
  }

   

   
  .vision-mission {
    display: grid;
    gap: var(--stack);
    margin-block-start: var(--stack);
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--r-lg);
    background-color: var(--c-ink);
    background-image: var(--wash-ink);
  }

  @media (min-width: 48rem) {
     
    .vision-mission[data-count="2"] {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: start;
    }
  }

  .vision-mission-block {
    display: grid;
    gap: 0.4rem;
    padding-inline-start: var(--stack);
    border-inline-start: 2px solid var(--c-green);
  }

   
  .vision-mission-head {
    font-family: var(--font-display);
    font-size: var(--t-eyebrow);
    font-weight: 700;
    font-variation-settings: "wdth" var(--width-eyebrow);
    letter-spacing: var(--track-eyebrow-display);
    text-transform: uppercase;
    margin: 0;
  }

   
  .vision-mission-body {
    margin: 0;
    font-size: var(--t-lg);
    line-height: 1.55;
    max-inline-size: var(--maxw-text);
  }

   
  .vision-mission-block:first-child .vision-mission-body {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-display);
    font-size: var(--t-display-4);
    font-weight: var(--weight-display-ink, 450);
    line-height: var(--lead-display);
    letter-spacing: var(--track-d4);
    max-inline-size: 34ch;
  }

   

  .arg-after { margin-block-start: var(--sec-tight); }

   
  .arg-after.stack > * + * { margin-block-start: var(--sec-tight); }

  .arg-after .claim-line {
    padding-block-start: var(--stack);
    border-block-start: var(--bw) solid var(--c-line-strong);
  }

   
  @media (min-width: 48rem) {
    #company .arg-after {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
      column-gap: calc(var(--gutter) * 1.5);
      align-items: start;
    }
    #company .arg-after > .lede {
      grid-column: 1;
      grid-row: 1;
      margin-block-start: 0;
    }
    #company .arg-after > .timeline {
      grid-column: 2;
      grid-row: 1;
      grid-template-columns: minmax(0, 1fr);
      margin-block-start: 0;
    }
    #company .arg-after > .claim-line,
    #company .arg-after > .vision-mission { grid-column: 1 / -1; }
  }

  .claim-line {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-sm);
    letter-spacing: var(--track-eyebrow);
    color: var(--c-blue);
  }

}

@layer components {

   

  @media (min-width: 64rem) {

     
    .ind-page .ind-s5 .grid-3 .machine-card[data-size="lead"] {
      grid-column: span 1;
    }
    .ind-page .ind-s5 .grid-3 .machine-card[data-size="lead"] .machine-shot img {
      aspect-ratio: 4 / 3;
    }
    .ind-page .ind-s5 .grid-3 .machine-card[data-size="lead"] .machine-name {
      font-size: var(--t-lg);
    }

     
    .ind-page .ind-s5 .grid-3:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ind-page .ind-s5 .grid-3:has(> :nth-child(5)):not(:has(> :nth-child(6))),
    .ind-page .why-machines:has(> :nth-child(5)):not(:has(> :nth-child(6))),
    .range-shelf-small[data-count="5"] {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .ind-page .ind-s5 .grid-3:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *,
    .ind-page .why-machines:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *,
    .range-shelf-small[data-count="5"] > * {
      grid-column: span 2;
    }
    .ind-page .ind-s5 .grid-3:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(n+4),
    .ind-page .why-machines:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(n+4),
    .range-shelf-small[data-count="5"] > :nth-child(n+4) {
      grid-column: span 3;
    }

     
    .ind-page .why-machines:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ind-page .why-machines:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .ind-page .why-machines:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

     
    .range-group .machine-card:not([data-size="lead"]),
    .ind-page .ind-s5 .grid-3 .machine-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .range-group .machine-card:not([data-size="lead"]) .machine-tag,
    .ind-page .ind-s5 .grid-3 .machine-card .machine-tag {
      align-self: flex-start;
    }
    .range-group .machine-card:not([data-size="lead"]) .machine-specs,
    .ind-page .ind-s5 .grid-3 .machine-card .machine-specs {
      margin-block-start: auto;
    }

     
    .s2-limit-rows:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

   
  html:has(.pb-peek:not([hidden])) {
    scroll-padding-top: calc(var(--header-h) + 3rem + 1rem);
  }

}

 

@layer components {

   
  .vh-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: 0;
    overflow: clip;
    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

   
  .plate {
    position: relative;
    display: grid;
     
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: stretch;
    aspect-ratio: var(--plate-ratio, 4 / 3);
    min-block-size: 9rem;
    padding: clamp(0.75rem, 3vw, 1.375rem);
    background: var(--c-surface);
    border-radius: var(--r);
    overflow: clip;
  }

   
  .plate > .img-product {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
    min-block-size: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

   
  .plate--cutout > .img-product { mix-blend-mode: normal; }

   
  .plate-shadow {
    position: absolute;
    inset-inline: 12%;
    inset-block-end: 7%;
    block-size: 9%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(5 35 82 / 0.22), rgb(5 35 82 / 0));
    pointer-events: none;
  }

   
  .band .plate,
  .band--ink .plate,
  .cta-band .plate,
  .on-ink .plate {
    background: var(--c-surface);
  }
  .band .plate-shadow,
  .band--ink .plate-shadow,
  .on-ink .plate-shadow {
    background: radial-gradient(closest-side, rgb(5 35 82 / 0.26), rgb(5 35 82 / 0));
  }

   
  [data-register="local"] .plate { background: var(--c-paper-surface); }

   
  .stat--xl .stat-figure--xl {
    font-family: var(--font-display);
    font-size: var(--t-figure-xl);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-figure);
    line-height: var(--lead-tight);
    font-variant-numeric: tabular-nums lining-nums;
  }

   
  .band .stat--xl .stat-figure--xl,
  .band--ink .stat--xl .stat-figure--xl,
  .on-ink .stat--xl .stat-figure--xl {
    font-weight: var(--weight-figure-ink);
  }

   
  .stat--xl .stat-unit {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-text-muted);
  }

  .stat--xl .stat-what {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   
  .fig-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--stack-tight) var(--stack);
  }

  @media (min-width: 40rem) {
    .fig-grid { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  }

  .fig { display: grid; gap: 0.125rem; align-content: start; min-inline-size: 0; }

  .fig .stat-figure--xl {
    font-family: var(--font-display);
    font-size: var(--t-figure-xl);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-figure);
    line-height: var(--lead-tight);
    font-variant-numeric: tabular-nums lining-nums;
    margin: 0;
  }

   
  .fig-grid--range .fig .stat-figure--xl { font-size: calc(var(--t-figure-xl) * 0.6); }
  @media (max-width: 39.99rem) {
    .fig-grid > .fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }

  .fig .stat-unit {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-text-muted);
  }

  .fig .stat-what {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin: 0;
  }

   
  .fig--plain .stat-what {
    text-transform: none;
    letter-spacing: normal;
    color: var(--c-text);
    font-size: var(--t-sm);
  }

   
  .sheet-fig-source {
    margin: 0;
    padding-inline-start: 0.625rem;
    border-inline-start: 2px solid var(--c-source-rule);
    font-family: var(--font-data);
    font-size: var(--t-xs);
  }

   
  .sheet-fig-source a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

   
  .machine-card--v2 {
    display: grid;
    gap: var(--stack-tight);
    align-content: start;
    text-decoration: none;
    color: inherit;
    padding: 0;
    background: none;
    border: 0;
    text-align: start;
    transition: transform var(--dur) var(--ease-out);
  }

  .machine-card--v2 .plate {
    box-shadow: var(--e-1);
    transition: box-shadow var(--dur) var(--ease-out);
  }

  .machine-card--v2:hover,
  .machine-card--v2:focus-visible { transform: translateY(-2px); }

  .machine-card--v2:hover .plate,
  .machine-card--v2:focus-visible .plate {
    box-shadow: var(--e-2), inset 0 3px 0 0 var(--c-green);
  }

  @media (prefers-reduced-motion: reduce) {
    .machine-card--v2 { transition: none; }
    .machine-card--v2:hover,
    .machine-card--v2:focus-visible { transform: none; }
  }

   
  .machine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    inline-size: fit-content;
    padding: 0.25rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--c-surface-2);
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text);
  }

  .machine-badge-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--c-status-live);
  }

   
  .fig-row {
    display: grid;
    gap: 0.125rem;
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--c-text-muted);
  }

  @media (min-width: 40rem) {
    .fig-row {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: var(--stack-tight);
    }
  }

  .fig-row-i {
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.25rem;
  }

   
  .fig-row-v {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-figure);
    line-height: var(--lead-tight);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--c-text);
  }

  .band .fig-row-v,
  .on-ink .fig-row-v { font-weight: var(--weight-figure-ink); }

   
  .fig-row-i--plain { display: block; }

   
   
   
  :root { --sticky-h: calc(var(--header-h) + 5.625rem); }           

  @media (min-width: 48rem) {
    :root { --sticky-h: calc(var(--header-h) + 5.75rem); }          
  }

  :root:has(.chip-filter-disclosure[open]) {
    --sticky-h: calc(var(--header-h) + 15.5rem);                    
  }

  @media (min-width: 48rem) {
    :root:has(.chip-filter-disclosure[open]) {
      --sticky-h: calc(var(--header-h) + 19rem);                    
    }
  }

  .chip-filter {
    position: sticky;
    inset-block-start: var(--header-h);
    z-index: var(--z-sticky);
    display: grid;
    gap: var(--stack-tight);
    padding-block: var(--stack-tight);
    background: color-mix(in srgb, var(--c-bg) 92%, transparent);
    backdrop-filter: blur(6px);
    border-block-end: var(--bw) solid var(--c-line);
  }

   
   
  .chip-filter > .wrap {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [main-start] minmax(0, min(var(--maxw), 100% - (var(--gutter) * 2)))
      [main-end]   minmax(var(--gutter), 1fr)
      [full-end];
    gap: var(--stack-tight) 0;
  }
  .chip-filter-disclosure { min-inline-size: 0; }

   
  .section:has(> #machines-register > .ground-surface:last-child) { padding-block-end: 0; }

  .chip-axis { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .chip-axis > legend { padding: 0; margin-block-end: 0.25rem; }

   
  .chip-row {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 2px;
  }

   
  @media (min-width: 48rem) {
    .chip-row {
      flex-wrap: wrap;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-block-end: 0;
    }

    .chip { scroll-snap-align: none; }
  }

  .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 2.75rem;
    padding-inline: 0.75rem;
    border: var(--bw) solid var(--c-line-strong);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .chip:hover { border-color: var(--c-text-muted); }

   
  .chip-tick,
  .chip-x {
    display: inline-flex;
    align-items: center;
    inline-size: 0;
    overflow: clip;
    opacity: 0;
    transition: inline-size var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }

   
  #f-power-diesel:checked        ~ .chip-row label[for="f-power-diesel"],
  #f-power-electric-1ph:checked  ~ .chip-row label[for="f-power-electric-1ph"],
  #f-power-electric-3ph:checked  ~ .chip-row label[for="f-power-electric-3ph"],
  #f-sector-commercial-kitchens:checked      ~ .chip-row label[for="f-sector-commercial-kitchens"],
  #f-sector-butcheries-and-cold-rooms:checked ~ .chip-row label[for="f-sector-butcheries-and-cold-rooms"],
  #f-sector-bakeries:checked                 ~ .chip-row label[for="f-sector-bakeries"],
  #f-sector-hospitality:checked              ~ .chip-row label[for="f-sector-hospitality"],
  #f-sector-healthcare-and-childcare:checked ~ .chip-row label[for="f-sector-healthcare-and-childcare"],
  #f-sector-industrial:checked               ~ .chip-row label[for="f-sector-industrial"],
  #f-sector-automotive-and-fleet:checked     ~ .chip-row label[for="f-sector-automotive-and-fleet"] {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-on-ink);
  }

  #f-power-diesel:checked        ~ .chip-row label[for="f-power-diesel"] .chip-tick,
  #f-power-electric-1ph:checked  ~ .chip-row label[for="f-power-electric-1ph"] .chip-tick,
  #f-power-electric-3ph:checked  ~ .chip-row label[for="f-power-electric-3ph"] .chip-tick,
  #f-sector-commercial-kitchens:checked      ~ .chip-row label[for="f-sector-commercial-kitchens"] .chip-tick,
  #f-sector-butcheries-and-cold-rooms:checked ~ .chip-row label[for="f-sector-butcheries-and-cold-rooms"] .chip-tick,
  #f-sector-bakeries:checked                 ~ .chip-row label[for="f-sector-bakeries"] .chip-tick,
  #f-sector-hospitality:checked              ~ .chip-row label[for="f-sector-hospitality"] .chip-tick,
  #f-sector-healthcare-and-childcare:checked ~ .chip-row label[for="f-sector-healthcare-and-childcare"] .chip-tick,
  #f-sector-industrial:checked               ~ .chip-row label[for="f-sector-industrial"] .chip-tick,
  #f-sector-automotive-and-fleet:checked     ~ .chip-row label[for="f-sector-automotive-and-fleet"] .chip-tick,
  #f-power-diesel:checked        ~ .chip-row label[for="f-power-diesel"] .chip-x,
  #f-power-electric-1ph:checked  ~ .chip-row label[for="f-power-electric-1ph"] .chip-x,
  #f-power-electric-3ph:checked  ~ .chip-row label[for="f-power-electric-3ph"] .chip-x,
  #f-sector-commercial-kitchens:checked      ~ .chip-row label[for="f-sector-commercial-kitchens"] .chip-x,
  #f-sector-butcheries-and-cold-rooms:checked ~ .chip-row label[for="f-sector-butcheries-and-cold-rooms"] .chip-x,
  #f-sector-bakeries:checked                 ~ .chip-row label[for="f-sector-bakeries"] .chip-x,
  #f-sector-hospitality:checked              ~ .chip-row label[for="f-sector-hospitality"] .chip-x,
  #f-sector-healthcare-and-childcare:checked ~ .chip-row label[for="f-sector-healthcare-and-childcare"] .chip-x,
  #f-sector-industrial:checked               ~ .chip-row label[for="f-sector-industrial"] .chip-x,
  #f-sector-automotive-and-fleet:checked     ~ .chip-row label[for="f-sector-automotive-and-fleet"] .chip-x {
    inline-size: 0.8125rem;
    opacity: 1;
  }

   
  #f-power-diesel:focus-visible        ~ .chip-row label[for="f-power-diesel"],
  #f-power-electric-1ph:focus-visible  ~ .chip-row label[for="f-power-electric-1ph"],
  #f-power-electric-3ph:focus-visible  ~ .chip-row label[for="f-power-electric-3ph"],
  #f-sector-commercial-kitchens:focus-visible      ~ .chip-row label[for="f-sector-commercial-kitchens"],
  #f-sector-butcheries-and-cold-rooms:focus-visible ~ .chip-row label[for="f-sector-butcheries-and-cold-rooms"],
  #f-sector-bakeries:focus-visible                 ~ .chip-row label[for="f-sector-bakeries"],
  #f-sector-hospitality:focus-visible              ~ .chip-row label[for="f-sector-hospitality"],
  #f-sector-healthcare-and-childcare:focus-visible ~ .chip-row label[for="f-sector-healthcare-and-childcare"],
  #f-sector-industrial:focus-visible               ~ .chip-row label[for="f-sector-industrial"],
  #f-sector-automotive-and-fleet:focus-visible     ~ .chip-row label[for="f-sector-automotive-and-fleet"] {
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
  }

  .chip-filter-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-tight);
    margin: 0;
  }

  .chip-filter .range-count {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--c-text-muted);
  }

   
  .chip-empty {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-sm);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   
  .machine-card[id] { scroll-margin-block-start: calc(var(--sticky-h, 12rem) + var(--sec-tight)); }

}

@layer components {

   
  .compare-tray {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    background: var(--c-ink);
    color: var(--c-on-ink);
    box-shadow: var(--e-2);
    padding-block: var(--stack-tight);
    padding-block-end: calc(var(--stack-tight) + env(safe-area-inset-bottom, 0px));
    border-block-start: var(--bw) solid var(--c-line);
  }

  .compare-tray[hidden] { display: none; }

  html[data-compare-tray] .sticky-mobile-cta { display: none; }

  .compare-tray-inner {
    display: grid;
    gap: var(--stack-tight);
    align-items: center;
  }

  @media (min-width: 48rem) {
    .compare-tray-inner {
      grid-template-columns: 1fr auto;
      gap: var(--stack);
    }
  }

  .compare-slots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight);
  }

  .compare-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0;
    background: var(--c-ink-2);
    border-radius: var(--r-sm);
    overflow: clip;
  }

  .compare-slot-thumb {
    display: block;
    inline-size: 3.5rem;
    block-size: 2.625rem;
    background: var(--c-surface);
    overflow: clip;
  }

  .compare-slot-thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .compare-slot-name {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: var(--weight-display-ink);
    color: var(--c-on-ink);
    white-space: nowrap;
  }

   
  .compare-remove {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: inline-grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--c-on-ink-muted);
    cursor: pointer;
  }

  .compare-remove:hover { color: var(--c-on-ink); }

  .compare-actions {
    display: flex;
    gap: var(--stack-tight);
    margin: 0;
  }

  @media (max-width: 29.99rem) {
    .compare-actions { display: grid; }
    .compare-actions .btn { inline-size: 100%; }
  }

   
  .compare-cell {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }
  .compare-cell > .machine-card { flex: 1 1 auto; }
  .compare-cell:has(> .machine-card[hidden]) { display: none; }
  @media (min-width: 56rem) {
    .compare-cell:has(> .machine-card[data-size="lead"]) { grid-column: span 2; }
  }

  .compare-add-holder { display: block; margin-block-start: 0.25rem; }

  .compare-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding-inline: 0.5rem;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .compare-add-box {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border: 2px solid var(--c-line-strong);
    border-radius: var(--r-sm);
  }

  .compare-add[aria-pressed="true"] { color: var(--c-text); }
  .compare-add[aria-pressed="true"] .compare-add-box {
    background: var(--c-blue);
    border-color: var(--c-blue);
  }

  .compare-add[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* =======================================================================
   * ATTRIBUTION, C6. THIS PATTERN IS SOMEBODY ELSE'S AND IS CREDITED HERE.
   *
   * Reference: "Radio card selection", Saief Al Emon,
   * https://codepen.io/iamsaief/pen/eYNZzmY, used under CodePen's published
   * default licence, MIT.
   *
   * What we took: the selection technique. A real radio input followed by a
   * sibling box that carries the border, the ground and the tick, so the
   * checked look is a plain sibling selector on a native control. No
   * declaration is copied verbatim, the colours and the sizes are this
   * build's own measured tokens, and the drawn mockup's :has() dependency was
   * removed.
   *
   * Accessibility floor: "Cards", Inclusive Components, Heydon Pickering,
   * https://inclusive-components.design/cards/. That is a written article
   * with no stated code licence. It was read for its rules and nothing was
   * copied from it.
   *
   * Proposed and licence-checked in out/reports/eco-ux-craft-V1a.md, C6.
   * ===================================================================== */

   
  .choice { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .choice > legend { padding: 0; margin-block-end: 0.375rem; }

   
  .selector-screen.choice { padding: var(--stack); }
  .selector-screen.choice > legend { float: left; inline-size: 100%; }

  .choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .choice--one .choice-grid { grid-template-columns: minmax(0, 1fr); }

  @media (min-width: 48rem) {
    .choice-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
    .choice--one .choice-grid { grid-template-columns: minmax(0, 1fr); }
  }

  .cc {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.125rem 0.625rem;
    min-block-size: 2.75rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
  }

  .cc-box {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgb(5 35 82 / 0.2);
    border-radius: var(--r);
    background: var(--c-bg);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
    pointer-events: none;
  }

  .cc > :not(.cc-box) { position: relative; }

  .cc-ic {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-grid;
    place-items: center;
    color: var(--c-blue);
  }

  .cc-ic--thumb {
    inline-size: 3.625rem;
    block-size: 2.75rem;
    background: var(--c-surface);
    border-radius: var(--r-sm);
    overflow: clip;
  }

  .cc-ic--thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .cc-t {
    grid-column: 2;
    font-family: var(--font-display);
    font-size: var(--t-base);
    font-weight: 600;
  }

  .cc-s {
    grid-column: 2;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
  }

  .cc-tick {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: inline-grid;
    place-items: center;
    color: var(--c-green-text);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .cc:hover .cc-box { border-color: rgb(5 35 82 / 0.42); }

  .cc input:checked ~ .cc-box {
    border-width: 2.5px;
    border-color: var(--c-blue);
    background: var(--c-blue-weak);
  }

  .cc input:checked ~ .cc-tick { opacity: 1; }

  .cc input:focus-visible ~ .cc-box {
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
  }

   
  @media (max-width: 29.99rem) {
    .choice-grid:has(.cc--thumb) { grid-template-columns: minmax(0, 1fr); }
  }

   
  .field input,
  .field textarea,
  .field select,
  .choice input { font-size: 1rem; }

   
  .consent input[type="checkbox"] {
    inline-size: 1.375rem;
    block-size: 1.375rem;
    accent-color: var(--c-blue);
    flex: 0 0 auto;
  }

  .consent {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-block-size: 2.75rem;
  }

   
  .steplist-wrap { container-type: inline-size; }

  .steplist {
    counter-reset: es-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  .steplist-i {
    counter-increment: es-step;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .steplist-i::before {
    content: counter(es-step, decimal-leading-zero);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--c-text-muted);
  }

  .steplist-i.is-done { color: var(--c-green-text); }
  .steplist-i.is-done::before { color: var(--c-green-text); }

  .steplist-i.is-on {
    color: var(--c-text);
    border-block-end: 2px solid var(--c-blue);
  }

   
  .steplist-i a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: inherit;
  }

  /* =======================================================================
   * ATTRIBUTION, C8. THIS PATTERN IS SOMEBODY ELSE'S AND IS CREDITED HERE.
   *
   * Reference: "Building a dialog component", Adam Argyle, web.dev,
   * https://web.dev/articles/building/a-dialog-component, Apache Licence 2.0.
   *
   * What we took: the native <dialog> approach as that article sets it out.
   * The close control as a submit inside <form method="dialog">, the
   * ::backdrop transition, and @starting-style for the entry so the opening
   * state is declarative rather than scripted.
   *
   * What we did NOT take: the article's three Open Props keyframes. They are
   * written by hand here, so no third-party file ships and there is no
   * dependency to vendor. The sizing, the flow-root scroll fix and every
   * token are this build's own.
   *
   * Proposed and licence-checked in out/reports/eco-ux-craft-V1a.md, C8.
   * ===================================================================== */

   
  .sheet {
    margin: auto;
    inline-size: min(72rem, calc(100vw - var(--gutter) * 2));
    max-block-size: min(52rem, calc(100svh - var(--gutter) * 2));
    block-size: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--e-2);
    overflow: clip;

    opacity: 0;
    transform: scale(0.94);
    transform-origin: var(--modal-origin-x, 50%) var(--modal-origin-y, 50%);
    transition:
      opacity   var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      overlay   var(--dur) var(--ease-out) allow-discrete,
      display   var(--dur) var(--ease-out) allow-discrete;
  }

  .sheet[open] { opacity: 1; transform: scale(1); }
  @starting-style { .sheet[open] { opacity: 0; transform: scale(0.94); } }

  .sheet::backdrop {
    background: color-mix(in srgb, var(--c-ink) 62%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition:
      opacity var(--dur) var(--ease-out),
      overlay var(--dur) var(--ease-out) allow-discrete,
      display var(--dur) var(--ease-out) allow-discrete;
  }
  .sheet[open]::backdrop { opacity: 1; }
  @starting-style { .sheet[open]::backdrop { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .sheet, .sheet::backdrop { transition: none; }
  }

  .sheet-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    block-size: 100%;
    max-block-size: inherit;
  }

  .sheet-hd {
    background: var(--c-ink);
    color: var(--c-on-ink);
    padding: var(--stack-tight) var(--stack);
  }

  .sheet-hd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-tight);
    margin: 0;
  }

  .sheet-hd .machine-name {
    font-size: var(--t-display-4);
    font-weight: var(--weight-display-ink);
    color: var(--c-on-ink);
  }

  .sheet-close {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: inline-grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--c-on-ink-muted);
    cursor: pointer;
  }
  .sheet-close:hover { color: var(--c-on-ink); }

   
  .sheet-grab { display: none; }

   
  .sheet-scroll {
    display: flow-root;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    min-block-size: 0;
    padding: var(--stack);
  }

   
  .sheet-scroll > :not(:last-child) { margin-block-end: var(--stack); }

  .sheet-sub {
    position: sticky;
    inset-block-start: calc(var(--stack) * -1);
    z-index: 1;
    margin-inline: calc(var(--stack) * -1);
    margin-block-start: calc(var(--stack) * -1);
    padding: 0.5rem var(--stack);
    background: var(--c-ink-2);
    color: var(--c-on-ink-muted);
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label-ink, var(--track-label));
    text-transform: uppercase;
  }

  .sheet-cols { display: grid; gap: var(--stack); }

  @media (min-width: 64rem) {
    .sheet-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  }

  .sheet-left,
  .sheet-right { display: grid; gap: var(--stack-tight); align-content: start; min-inline-size: 0; }

  .sheet-spec { display: grid; gap: var(--stack-tight); }

   
  .sheet-ft {
    position: sticky;
    inset-block-end: calc(var(--stack) * -1);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight);
    margin-inline: calc(var(--stack) * -1);
    margin-block-end: calc(var(--stack) * -1);
    padding: var(--stack-tight) var(--stack);
    padding-block-end: calc(var(--stack-tight) + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg);
    box-shadow: 0 -1px 0 var(--c-line);
  }

  .sheet-ft form { margin: 0; }

   
  .sheet-spec .spec-table__group > summary {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

   
  @media (max-width: 63.99rem) {
    .sheet {
      margin: 0;
      margin-block-start: auto;
      inline-size: 100%;
      max-inline-size: 100%;
      block-size: 100svh;
      max-block-size: 100svh;
      border-radius: 0;
    }

    .sheet-grab {
      display: block;
      inline-size: 2.25rem;
      block-size: 0.25rem;
      margin: 0 auto 0.5rem;
      border-radius: var(--r-pill);
      background: var(--c-on-ink-muted);
      opacity: 0.6;
    }

    .sheet-ft { display: grid; }
    .sheet-ft .btn { inline-size: 100%; }
    .sheet-ft form .btn { inline-size: 100%; }
  }

   
  @media (max-width: 47.99rem) {
    .machine-modal { overflow: clip; }

    .machine-modal-body > [data-modal-content] {
      display: flow-root;
      min-block-size: 0;
    }

    .machine-modal-body > [data-modal-content] > :not(:last-child) { margin-block-end: var(--stack); }

     
    .machine-modal .machine-shot { overflow: clip; }

     
    .machine-modal .scroll-x { min-block-size: min-content; }
  }

   
  .numbered-story {
    counter-reset: ns;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--stack);
  }

  .ns-i {
    counter-increment: ns;
    display: grid;
    gap: 0.25rem;
    padding-block-start: var(--stack-tight);
    border-block-start: var(--bw) solid var(--c-line);
  }

  .ns-i::before {
    content: counter(ns, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--t-figure);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-figure);
    line-height: var(--lead-tight);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--c-text-muted);
  }

  .band .ns-i::before,
  .band--ink .ns-i::before,
  .on-ink .ns-i::before { font-weight: var(--weight-figure-ink); }

  .ns-t {
    font-size: var(--t-display-4);
    font-weight: var(--weight-display);
    line-height: var(--lead-tight);
    margin: 0;
  }

  .band .ns-t,
  .band--ink .ns-t,
  .on-ink .ns-t { font-weight: var(--weight-display-ink); }

  .ns-p { margin: 0; color: var(--c-text-muted); max-inline-size: var(--maxw-text); }

  @media (min-width: 48rem) {
    .ns-i { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 var(--stack); }
    .ns-i::before { grid-row: 1 / span 2; }
  }

   
  .closing-band {
    background: var(--c-ink);
    color: var(--c-on-ink);
    padding-block: var(--sec);
  }

  .closing-band-inner {
    display: grid;
    gap: var(--stack-tight);
    max-inline-size: var(--maxw-text);
  }

   
  .closing-line {
    font-family: var(--font-display);
    font-size: var(--t-display-4);
    font-weight: var(--weight-display-ink);
    font-variation-settings: "wdth" var(--width-display-text);
    letter-spacing: var(--track-d4);
    line-height: var(--lead-display);
    color: var(--c-on-ink);
    margin: 0;
    text-wrap: balance;
  }

  .closing-sub { margin: 0; color: var(--c-on-ink-muted); text-wrap: pretty; }

   
  .closing-actions { margin-block-start: var(--stack-tight); margin-block-end: 0; }

  @media (max-width: 29.99rem) {
     
    .closing-actions .btn { inline-size: 100%; }
  }

   
  body[data-path="/technology"] .closing-band {
    --c-text:        var(--c-text-light);
    --c-text-muted:  var(--c-text-muted-light);
    --c-line:        var(--c-line-light);
    --c-line-strong: var(--c-line-strong-light);
    --c-link:        var(--c-blue);
    --c-link-hover:  var(--c-blue-hover);
    --track-label:   0.06em;

    background: var(--c-surface);
    color: var(--c-text);

     
    border-block: var(--bw) solid var(--c-line-strong-light);
  }

  body[data-path="/technology"] .closing-band .eyebrow { color: var(--c-text); }
  body[data-path="/technology"] .closing-band .closing-line { color: var(--c-text); }
  body[data-path="/technology"] .closing-band .closing-sub { color: var(--c-text-muted); }

   
  body[data-path="/technology"] .closing-band .btn-primary {
    background: var(--c-blue);
    color: var(--c-on-ink);
  }
  body[data-path="/technology"] .closing-band .btn-primary:hover {
    background: var(--c-blue-hover);
    color: var(--c-on-ink);
  }
  body[data-path="/technology"] .closing-band .btn-secondary {
    color: var(--c-blue);
    border-color: var(--c-line-strong-light);
  }
  body[data-path="/technology"] .closing-band .btn-secondary:hover {
    background: var(--c-blue-weak);
    border-color: var(--c-blue);
  }

  /* =======================================================================
   * ATTRIBUTION, C12. THIS PATTERN IS SOMEBODY ELSE'S AND IS CREDITED HERE.
   *
   * Reference: "Building a settings component", Adam Argyle, web.dev,
   * https://web.dev/articles/building/a-settings-component,
   * Apache Licence 2.0.
   *
   * What we took: the range control's track fill driven by a custom property
   * written onto the input, rather than by a script repainting a background,
   * and the <output for> pairing that gives the slider a named, addressable
   * value. Both are that article's technique.
   *
   * What we did NOT take: any Open Props dependency, and no declaration is
   * copied verbatim. accent-color, the 44px band around the track, the mono
   * label and the tabular figures are this build's own decisions and are
   * recorded in the block below.
   *
   * Proposed and licence-checked in out/reports/eco-ux-craft-V1a.md, C12.
   * ===================================================================== */

   
  .field-slider { display: grid; gap: 0.25rem; }

  .field-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stack-tight);
  }

  .field-slider-label {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .field-slider-out {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    font-variant-numeric: tabular-nums lining-nums;
    min-inline-size: 7ch;
    text-align: end;
  }

  .field-slider-input {
    inline-size: 100%;
    block-size: 2.75rem;
    accent-color: var(--c-blue);
    background: transparent;
    cursor: pointer;
  }

  [data-js] .field-slider-input {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right,
      var(--c-blue) calc(var(--pct, 0) * 1%),
      var(--c-surface-2) 0);
    background-size: 100% 0.375rem;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--r-pill);
  }

  [data-js] .field-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    background: var(--c-blue);
    border: 3px solid var(--c-bg);
    box-shadow: var(--e-1);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  [data-js] .field-slider-input::-moz-range-thumb {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    background: var(--c-blue);
    border: 3px solid var(--c-bg);
    box-shadow: var(--e-1);
  }

  [data-js] .field-slider-input:hover::-webkit-slider-thumb { transform: scale(1.1); }

  @media (prefers-reduced-motion: reduce) {
    [data-js] .field-slider-input::-webkit-slider-thumb { transition: none; }
    [data-js] .field-slider-input:hover::-webkit-slider-thumb { transform: none; }
  }

   
  .field-slider-input:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 3px;
  }

   
  .error-summary {
    border: 2px solid var(--c-heat);
    border-radius: var(--r-sm);
    background: var(--c-tint-warm);
    padding: var(--stack-tight) var(--stack);
    display: grid;
    gap: 0.375rem;
  }

  .error-summary:focus { outline: 3px solid var(--c-blue); outline-offset: 2px; }
  .error-summary:focus:not(:focus-visible) { outline: 0; }

  .error-summary-h {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--c-warn);
    margin: 0;
  }

  .error-summary-l { margin: 0; padding-inline-start: 1.125rem; display: grid; gap: 0.125rem; }

  .error-summary-l a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--c-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .error-summary-l a:hover { text-decoration-thickness: 2px; }

   
   
  .cutaway { margin: 0; display: grid; gap: var(--stack-tight); min-inline-size: 0; }

   
  .cut-svg { inline-size: 100%; block-size: auto; overflow: clip; min-inline-size: 0; }

  .cut-at-end { text-anchor: end; }

  .cut-stroke,
  .cut-hot {
    fill: none;
    stroke-width: var(--icon-stroke, 1.25);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .cut-stroke { stroke: var(--c-ink-ornament); }
  .cut-hot    { stroke: url(#cut-heat); stroke-width: calc(var(--icon-stroke, 1.25) * 2.4); }
  .cut-node   { fill: var(--c-heat); stroke: none; }

  .cut-marker {
    fill: var(--c-on-ink-muted);
    font-family: var(--font-data);
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  .cut-label {
    fill: var(--c-on-ink);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
  }

  .cut-note,
  .cut-scope,
  .cut-src {
    fill: var(--c-on-ink-muted);
    font-family: var(--font-data);
    font-size: 13px;
  }

  .cut-src { font-size: 11px; }

  .cut-fig {
    fill: var(--c-on-ink);
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 500;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .cut-unit {
    fill: var(--c-on-ink-muted);
    font-family: var(--font-data);
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .cut-key { display: block; }
  .cut-key-l, .cut-key-figs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
  .cut-key-l { counter-reset: cutk; }
  .cut-key-l li { counter-increment: cutk; display: grid; gap: 0.0625rem; }
  .cut-key-l li::before {
    content: counter(cutk, decimal-leading-zero);
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    color: var(--c-text-muted);
  }
  .cut-key-t { font-family: var(--font-display); font-weight: 600; }
  .cut-key-n, .cut-key-scope, .cut-key-src { color: var(--c-text-muted); font-size: var(--t-sm); }
  .cut-key-src {
    font-family: var(--font-data);
    font-size: var(--t-xs);
     
    overflow-wrap: anywhere;
  }
  .cut-key-l li, .cut-key-figs li { min-inline-size: 0; }
  .cut-key-figs li {
    display: grid;
    gap: 0.0625rem;
    padding-inline-start: 0.625rem;
    border-inline-start: 2px solid var(--c-source-rule);
  }
  .cut-key-fig {
    font-family: var(--font-display);
    font-size: var(--t-figure);
    font-weight: var(--weight-figure);
    font-variation-settings: "wdth" var(--width-display);
    letter-spacing: var(--track-figure);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .cut-key-unit {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   
  @media (min-width: 40rem) { .cut-key-l { display: none; } }
  @media (max-width: 39.99rem) { .cut-labels { display: none; } }

   
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .cut-l {
        animation: es-cut-in linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 45%;
      }
    }
  }

  @keyframes es-cut-in {
    from { transform: translateY(10px); }
    to   { transform: none; }
  }

}

@layer components {

   
  .chip-filter-disclosure > summary,
  .matrix-filter-disclosure > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--stack-tight);
    min-block-size: 2.75rem;
  }

  .chip-filter-disclosure > summary::-webkit-details-marker,
  .matrix-filter-disclosure > summary::-webkit-details-marker { display: none; }

  .chip-filter-summary {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-blue);
  }

  .chip-filter-summary::after {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-start: 0.5rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.125rem;
    transition: rotate var(--dur-fast) var(--ease-out);
  }

  .chip-filter-disclosure[open] > summary .chip-filter-summary::after,
  .matrix-filter-disclosure[open] > summary .chip-filter-summary::after { rotate: -135deg; translate: 0 0.125rem; }

  @media (prefers-reduced-motion: reduce) {
    .chip-filter-summary::after { transition: none; }
  }

  .chip-filter-disclosure > .chip-axis { margin-block-start: var(--stack-tight); }

   
  .range-filter.matrix-filter {
    background: var(--c-bg);
    backdrop-filter: none;
    padding-block: var(--stack-tight);
  }
  .matrix-filter-disclosure > .range-filter__row { margin-block-start: var(--stack-tight); }
  .matrix-filter .range-count { margin-block: var(--stack-tight) 0; }

}

@layer components {

   

   
  .enq-step {
    max-inline-size: 40rem;
    display: grid;
    gap: var(--stack);
  }

   
  .legend-h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

   
  .choice-more {
    margin-block-start: var(--stack-tight);
    border-block-start: var(--bw) solid var(--c-line);
    padding-block-start: var(--stack-tight);
  }

  .choice-more > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  .choice-more > summary::-webkit-details-marker { display: none; }

  .choice-more-summary {
    font-family: var(--font-data);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-link);
  }

  .choice-more-summary::after {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-start: 0.5rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.125rem;
    transition: rotate var(--dur-fast) var(--ease-out);
  }

  .choice-more[open] > summary .choice-more-summary::after { rotate: -135deg; translate: 0 0.125rem; }

  .choice-more > .choice-grid { margin-block-start: var(--stack-tight); }

   
   
  .enq-optional {
    border-block-start: var(--bw) solid var(--c-line);
    padding-block-start: var(--stack-tight);
  }

  .enq-optional > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  .enq-optional > summary::-webkit-details-marker { display: none; }

  .enq-optional > summary .eyebrow { margin: 0; }

  .enq-optional > summary .eyebrow::after {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-start: 0.5rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.125rem;
    transition: rotate var(--dur-fast) var(--ease-out);
  }

  .enq-optional[open] > summary .eyebrow::after { rotate: -135deg; translate: 0 0.125rem; }

  .enq-optional > *:not(summary) { margin-block-start: var(--stack); }

   
  .enq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight);
    align-items: center;
    justify-content: space-between;
  }

  .enq-nav .btn { min-block-size: 2.75rem; }

   
  .steplist-back {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  }

  .steplist-back:hover { text-decoration-color: currentColor; }

  @media (prefers-reduced-motion: reduce) {
    .choice-more-summary::after,
    .enq-optional > summary .eyebrow::after { transition: none; }
  }

}

 

@layer components {

   
  .band-inline {
    background-repeat: no-repeat;
    padding-block: var(--sec-tight);
    margin-block: var(--sec-tight);
  }

  .band-inline-inner {
    max-inline-size: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

   
  .hero-specimen {
    position: relative;
    isolation: isolate;
  }

   
  .hero-specimen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      repeating-linear-gradient(to right, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 4.5rem),
      repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 4.5rem);
    background-position: center;
    pointer-events: none;
  }

  .hero-specimen-grid {
    display: grid;
    gap: var(--stack);
    align-items: center;
  }

  @media (min-width: 56rem) {
     
    .hero-specimen-grid {
      grid-template-columns: 55fr 45fr;
      gap: var(--sec-tight);
    }

     
    .hero-specimen-grid { row-gap: var(--stack); }
    .hero-specimen-grid > .stack { grid-column: 1; grid-row: 1; }
    .hero-specimen-grid > .hero-specimen-object { grid-column: 2; grid-row: 1 / span 2; }
    .hero-specimen-grid > .hero-trust { grid-column: 1; grid-row: 2; }
  }

   
  .hero-specimen-object {
    display: grid;
    grid-template-columns: min(60%, 100% - var(--stack-tight) - 8rem) 1fr;
    align-items: center;
    gap: var(--stack-tight);
    margin: 0;
  }

  @media (min-width: 56rem) {
    .hero-specimen-object {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: var(--stack-tight);
    }
  }

  .hero-specimen-link {
    grid-column: 1;
    display: block;
    text-decoration: none;
    border-radius: 50%;
  }

  @media (min-width: 56rem) {
    .hero-specimen-link {
      inline-size: min(20rem, 100%);
    }
  }

  .hero-specimen-link:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 3px;
  }

   
  .plate--round {
    border-radius: 50%;
    padding: clamp(0.875rem, 4vw, 1.75rem);
  }

   
  .hero-specimen-object > figcaption {
    grid-column: 1;
    margin-block-start: var(--stack-tight);
    font-family: var(--font-data);
    font-size: var(--t-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-on-ink-muted);
  }

  .hero-specimen-figs {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  @media (min-width: 56rem) {
    .hero-specimen-figs {
      grid-column: 1;
      grid-row: auto;
      justify-self: center;
    }
  }

   
  .hero-plate-specimen {
    position: static;
    margin: 0;
    inset: auto;
    max-inline-size: 14rem;
  }

   
  .hero-plate-specimen .hero-plate-figure { white-space: nowrap; }
  @media (max-width: 47.99rem) {
    .hero-plate-specimen .hero-plate-unit {
      display: block;
      margin-inline-start: 0;
    }
  }

   

   
  .hero-rotating { background-image: none; }

   
  @media (min-width: 56rem) {
    .hero-rotating .hero-specimen-grid {
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }
    .hero-specimen-grid > .hr { grid-column: 2; grid-row: 1 / span 2; }
  }

  .hr {
    container: hr / inline-size;
    min-inline-size: 0;
  }

   
  .hr-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "stage stage"
      "cap   ctrl"
      "figs  water";
    column-gap: var(--stack);
    row-gap: var(--stack-tight);
    align-items: start;
  }

  .hr-frame {
    display: contents;
    --hr-sh: 80cqi;
    --hr-c:  clamp(150px, 27cqi, 190px);
    --hr-g:  44px;
    --hr-bw: min(100cqi - var(--hr-c) - var(--hr-g), 76.8cqi * var(--w) / var(--h), var(--w) * 1px);
    --hr-bh: calc(var(--hr-bw) * var(--h) / var(--w));
    --hr-gx: calc((100cqi - var(--hr-bw) - var(--hr-c) - var(--hr-g)) / 2);
    --hr-bx: var(--hr-gx);
    --hr-by: calc(var(--hr-sh) * 0.96 - var(--hr-bh));
  }
  .hr-frame[data-side="left"] { --hr-bx: calc(var(--hr-gx) + var(--hr-c) + var(--hr-g)); }

   
  .hr--plain .hr-frame { --hr-c: 0px; --hr-g: 0px; }
  .hr--plain .hr-figblock, .hr--plain .hr-water { display: none; }

   
  .hr-stage {
    transition: opacity 0.5s var(--ease), visibility 0s linear 0s;
  }
  .hr-frame:not(.is-on) .hr-stage {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .hr-cap, .hr-labels, .hr-figblock, .hr-water {
    transition: opacity 0.3s var(--ease) 0.2s, visibility 0s linear 0.2s;
  }
  .hr-frame:not(.is-on) :is(.hr-cap, .hr-labels, .hr-figblock, .hr-water) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .hr-dot, .hr-seg { transition: opacity 0.2s var(--ease); }
  .hr-frame:not(.is-on) :is(.hr-dot, .hr-seg) { opacity: 0; }

  .hr-meta { display: contents; }

   
  .hr-figblock {
    grid-area: figs;
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }

  .hr-stage {
    grid-area: stage;
    position: relative;
    block-size: var(--hr-sh);
  }

   
  .hr-disc {
    --hr-d: min(max(var(--hr-bw), var(--hr-bh)), var(--hr-bw) + 72px, var(--hr-sh));
    position: absolute;
    inset-inline-start: calc(var(--hr-bx) + var(--hr-bw) / 2 - var(--hr-d) / 2);
    inset-block-start: clamp(0px, var(--hr-by) + var(--hr-bh) / 2 - var(--hr-d) / 2, var(--hr-sh) - var(--hr-d));
    inline-size: var(--hr-d);
    block-size: var(--hr-d);
    border-radius: 50%;
    background: var(--c-ink-2);
    box-shadow: inset 0 0 0 1px var(--c-ink-line);
  }

  .hr-box {
    position: absolute;
    inset-inline-start: var(--hr-bx);
    inset-block-start: var(--hr-by);
    inline-size: var(--hr-bw);
    block-size: var(--hr-bh);
    display: block;
    text-decoration: none;
    border-radius: var(--r-sm);
  }
  .hr-box:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 6px;
  }

   
  .hr-box > .plate {
    position: absolute;
    inset: 0;
    display: block;
    aspect-ratio: auto;
    min-block-size: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
  }
  .hr-box > .plate > .img-product {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
  }
   
  .hr-box > .plate > .plate-shadow {
    z-index: 0;
    inset-inline: 8%;
    inset-block-start: auto;
    inset-block-end: calc(var(--hr-sh) * -0.035);
    block-size: calc(var(--hr-sh) * 0.07);
    background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
    filter: blur(2px);
  }

   
  .hr-dot {
    position: absolute;
    z-index: 3;
    inset-inline-start: calc(var(--x) * 1%);
    inset-block-start: calc(var(--y) * 1%);
    inline-size: 14px;
    block-size: 14px;
    margin: -7px 0 0 -7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--c-ink);
    border: 1.5px solid var(--c-green);
    box-shadow: 0 0 0 1.5px var(--c-on-ink), 0 0 0 6px rgb(8 200 32 / 0.14);
  }
  .hr-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--c-green);
  }
  .hr-dot-n { display: none; }

   
  .hr-seg {
    position: absolute;
    z-index: 2;
    inset-block-start: calc(var(--y) * 1%);
    block-size: 3.5px;
    margin-block-start: -1.75px;
    border-radius: 1.75px;
    background: var(--c-ink);
    pointer-events: none;
  }
  .hr-seg::before {
    content: "";
    position: absolute;
    inset-inline: 1.125px;
    inset-block-start: 1.125px;
    block-size: 1.25px;
    border-radius: 0.625px;
    background: var(--c-on-ink);
  }
  .hr-frame[data-side="right"] .hr-seg--a {
    inset-inline-start: calc(var(--x) * 1%);
    inset-inline-end: -14px;
    transform-origin: 0 50%;
  }
  .hr-frame[data-side="left"] .hr-seg--a {
    inset-inline-start: -14px;
    inset-inline-end: calc((100 - var(--x)) * 1%);
    transform-origin: 100% 50%;
  }
  .hr-frame[data-side="right"] .hr-seg--b {
    inset-inline-start: calc(100% + 14px);
    inline-size: 24px;
    transform-origin: 0 50%;
  }
  .hr-frame[data-side="left"] .hr-seg--b {
    inset-inline-end: calc(100% + 14px);
    inline-size: 24px;
    transform-origin: 100% 50%;
  }
   
  @supports (inline-size: hypot(3px, 4px)) and (rotate: atan2(1px, 1px)) {
    .hr-frame[data-side="right"] .hr-seg--b {
      inline-size: hypot(24px, var(--shift, 0px));
      rotate: atan2(var(--shift, 0px), 24px);
    }
    .hr-frame[data-side="left"] .hr-seg--b {
      inline-size: hypot(24px, var(--shift, 0px));
      rotate: calc(-1 * atan2(var(--shift, 0px), 24px));
    }
  }

   
  .hr-labels {
    grid-area: stage;
    position: relative;
    block-size: var(--hr-sh);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }
  .hr-label {
    position: absolute;
    margin: 0;
    inline-size: var(--hr-c);
    inset-block-start: calc(var(--hr-by) + var(--y) * var(--hr-bh) / 100);
    inset-inline-start: calc(var(--hr-bx) + var(--hr-bw) + var(--hr-g));
    translate: 0 calc(-50% + var(--shift, 0px));
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--c-on-ink);
    text-wrap: pretty;
  }
  .hr-frame[data-side="left"] .hr-label {
    inset-inline-start: var(--hr-gx);
    text-align: end;
  }
  .hr-n { display: none; }

   
  .hr-cap {
    grid-area: cap;
    align-self: center;
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-sm);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-on-ink);
  }

  .hr-ctrl {
    grid-area: ctrl;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .hr:not([data-ready]) .hr-ctrl { visibility: hidden; }

  .hr-count {
    margin: 0 0.5rem 0 0;
    font-family: var(--font-data);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-label);
    color: var(--c-on-ink-muted);
    white-space: nowrap;
  }

   
  .hr-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--c-ink-ornament);
    border-radius: 50%;
    background: transparent;
    color: var(--c-on-ink);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .hr-btn:hover { background: var(--c-ink-2); border-color: var(--c-on-ink); }
  .hr-btn:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 2px;
  }
  .hr-btn[hidden] { display: none; }
  .hr-btn .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    stroke-width: 1.75;
  }
  .hr-btn[data-state="playing"] .hr-ic-play,
  .hr-btn[data-state="paused"] .hr-ic-pause { display: none; }

   
  .hr-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin: 0;
  }
  .hr-fig { min-inline-size: 0; }
  .hr-figs dt {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-on-ink-muted);
  }
  .hr-figs dd { margin: 0.25rem 0 0; }
  .hr-fig-v {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--c-on-ink);
    white-space: nowrap;
  }
  .hr-fig-u {
    font-family: var(--font-data);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--c-green);
    white-space: nowrap;
  }
  .hr-fig-n {
    display: inline;
    font-size: var(--t-xs);
    color: var(--c-on-ink-muted);
  }

  .hr-src {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-xs);
    color: var(--c-on-ink-muted);
  }

   
  .hr-water { grid-area: water; align-self: start; }

   
  @container hr (max-width: 35.99rem) {
    .hr-in {
      grid-template-areas:
        "stage stage"
        "cap   ctrl"
        "figs  figs"
        "water water";
    }
  }

   
  @media (prefers-reduced-motion: no-preference) {
    .hr[data-anim] .hr-frame.is-on .hr-dot {
      animation: hr-pop 150ms var(--ease-out) both;
      animation-delay: calc(var(--k, 0) * 100ms);
    }
    .hr[data-anim] .hr-frame.is-on .hr-seg--a {
      animation: hr-draw 150ms linear both;
      animation-delay: calc(var(--k, 0) * 100ms + 100ms);
    }
    .hr[data-anim] .hr-frame.is-on .hr-seg--b {
      animation: hr-draw 150ms linear both;
      animation-delay: calc(var(--k, 0) * 100ms + 250ms);
    }
    .hr[data-anim] .hr-frame.is-on .hr-label {
      animation: hr-fade 100ms linear both;
      animation-delay: calc(var(--k, 0) * 100ms + 300ms);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hr-stage, .hr-cap, .hr-labels, .hr-figblock, .hr-figs, .hr-src, .hr-water, .hr-dot, .hr-seg,
    .hr-frame:not(.is-on) :is(.hr-stage, .hr-cap, .hr-labels, .hr-figblock, .hr-figs, .hr-src, .hr-water, .hr-dot, .hr-seg) { transition: none; }
  }
  @keyframes hr-pop  { from { scale: 0; }   to { scale: 1; } }
  @keyframes hr-draw { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes hr-fade { from { opacity: 0; } to { opacity: 1; } }

   
  @container hr (max-width: 25.99rem) {
    .hr-in {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "stage"
        "ctrl"
        "meta";
      row-gap: 0.5rem;
    }
    .hr-meta {
      grid-area: meta;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      gap: 0.75rem;
    }
    .hr-meta > * { grid-area: auto; }
    .hr-figblock { display: contents; }
     
    .hr-figs, .hr-src { transition: opacity 0.3s var(--ease) 0.2s; }
    .hr-frame:not(.is-on) :is(.hr-figs, .hr-src) { opacity: 0; transition: opacity 0.2s var(--ease); }
    @media (prefers-reduced-motion: reduce) {
      .hr-figs, .hr-src,
      .hr-frame:not(.is-on) :is(.hr-figs, .hr-src) { transition: none; }
    }

     
    .hr-in { position: relative; }
    .hr-frame:not(.is-on) .hr-meta {
      position: absolute;
      inset-inline: 0;
    }
    .hr-frame,
    .hr-frame[data-side="left"] {
      --hr-sh: 100cqi;
      --hr-bw: min(84cqi, 94cqi * var(--w) / var(--h), var(--w) * 1px);
      --hr-bx: calc((100cqi - var(--hr-bw)) / 2);
      --hr-by: calc(var(--hr-sh) * 0.97 - var(--hr-bh));
    }
    .hr-disc { --hr-d: min(max(var(--hr-bw), var(--hr-bh)), 80cqi); }

    .hr-seg { display: none; }

     
    .hr-dot {
      inline-size: 22px;
      block-size: 22px;
      margin: -11px 0 0 -11px;
      display: grid;
      place-items: center;
      background: var(--c-green);
      border: 2px solid var(--c-ink);
      box-shadow: 0 0 0 1.5px var(--c-on-ink);
    }
    .hr-dot::after { content: none; }
    .hr-dot-n {
      display: block;
      font-family: var(--font-data);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      color: var(--c-ink);
    }

    .hr-cap { min-block-size: 0; display: block; }
    .hr-ctrl { justify-content: flex-end; }
    .hr-count { margin-inline-end: auto; }

    .hr-labels {
      position: static;
      block-size: auto;
      display: grid;
      gap: 0.5rem;
    }
    .hr-label,
    .hr-frame[data-side="left"] .hr-label {
      position: static;
      inline-size: auto;
      translate: none;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 0.625rem;
      align-items: start;
      text-align: start;
    }
    .hr-n {
      display: grid;
      place-items: center;
      inline-size: 22px;
      block-size: 22px;
      margin-block-start: -1px;
      border-radius: 50%;
      background: var(--c-green);
      font-family: var(--font-data);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      color: var(--c-ink);
    }

     
    .hr-figs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.625rem 1rem;
    }
    .hr-fig-v { font-size: var(--t-lg); }

    .hr--phone-nodots .hr-dot,
    .hr--phone-nodots .hr-labels { display: none; }
  }

   
  @supports (grid-template-columns: subgrid) {
    @container hr (max-width: 25.99rem) {
      .hr-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
      .hr-meta > .hr-cap    { grid-column: 1 / -1; grid-row: 1; }
      .hr-meta > .hr-labels { grid-column: 1 / -1; grid-row: 2; }
      .hr-meta .hr-figs {
        grid-column: 1 / -1;
        grid-row: 3 / span 2;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
      .hr-meta .hr-src      { grid-column: 1 / -1; grid-row: 5; }
      .hr-meta > .hr-water {
        grid-column: 2;
        grid-row: 4;
        align-self: start;
        max-inline-size: none;
        margin: 0;
        padding: 0 0 0 0.625rem;
        background: none;
        box-shadow: none;
        border-radius: 0;
        border-inline-start: 2px solid var(--c-green);
      }
      .hr-meta > .hr-water .hero-plate-figure { font-size: var(--t-lg); line-height: 1.15; }
      .hr-meta > .hr-water .hero-plate-unit   { display: inline; margin-inline-start: 0.35em; }
       
      .hr-meta .hr-figs:not(:has(> :nth-child(3))) { grid-row: 3; }
      .hr-meta .hr-figs:not(:has(> :nth-child(3))) ~ .hr-src { grid-row: 4; }
       
      .hr--phone-nodots .hr-meta .hr-figs { grid-row: 2 / span 2; }
      .hr--phone-nodots .hr-meta .hr-src { grid-row: 4; }
      .hr--phone-nodots .hr-meta > .hr-water { grid-row: 3; }
      .hr--phone-nodots .hr-meta .hr-figs:not(:has(> :nth-child(3))) { grid-row: 2; }
      .hr--phone-nodots .hr-meta .hr-figs:not(:has(> :nth-child(3))) ~ .hr-src { grid-row: 3; }
    }
  }

   
  @media (min-width: 56rem) {
    .hero-rotating { padding-block: var(--sec-tight) var(--sec-tight); }
  }

   
  .hero-rotating :focus-visible { outline-color: var(--c-green); }

   
  @container hr (min-width: 26rem) {
    [data-js] .hr:not([data-ready]) :is(.hr-labels, .hr-seg) {
      visibility: hidden;
      animation: hr-late 0s linear 3s forwards;
    }

    html:not([data-js]) .hr-seg { display: none; }
    html:not([data-js]) .hr-dot {
      inline-size: 22px;
      block-size: 22px;
      margin: -11px 0 0 -11px;
      display: grid;
      place-items: center;
      background: var(--c-green);
      border: 2px solid var(--c-ink);
      box-shadow: 0 0 0 1.5px var(--c-on-ink);
    }
    html:not([data-js]) .hr-dot::after { content: none; }
    html:not([data-js]) .hr-dot-n {
      display: block;
      font-family: var(--font-data);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      color: var(--c-ink);
    }
    html:not([data-js]) .hr-labels {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }
    html:not([data-js]) .hr-label {
      position: static;
      translate: none;
      margin-inline-start: calc(var(--hr-bx) + var(--hr-bw) + var(--hr-g));
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 0.625rem;
      align-items: start;
      text-align: start;
    }
    html:not([data-js]) .hr-frame[data-side="left"] .hr-label {
      margin-inline-start: var(--hr-gx);
      text-align: start;
    }
    html:not([data-js]) .hr-n {
      display: grid;
      place-items: center;
      inline-size: 22px;
      block-size: 22px;
      margin-block-start: -1px;
      border-radius: 50%;
      background: var(--c-green);
      font-family: var(--font-data);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      color: var(--c-ink);
    }
  }
  @keyframes hr-late { to { visibility: visible; } }

   
  .plate--specimen > .img-product {
    position: relative;
    z-index: 1;
    object-position: 50% 100%;
  }
  .plate--specimen > .plate-shadow {
    inset-block-end: 3%;
    block-size: 8%;
  }

   
  .machine-shot > .plate {
    background: none;
    padding: 0;
    min-block-size: 0;
    border-radius: 0;
  }
  .machine-modal .machine-shot > .plate {
    max-block-size: min(17.5rem, 32vh);
    max-block-size: min(17.5rem, 32svh);
  }

   
  .cc-ic--thumb > .plate {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    min-block-size: 0;
    padding: 0.1875rem;
    border-radius: var(--r-sm);
  }

   
  .route-panel.ink {
    background-color: var(--c-ink);
    background-image: var(--wash-ink);
    background-repeat: no-repeat;
  }

   
  .route-panel[data-route="equipment"].ink::before { background: var(--c-on-ink); }

   
  .tier-badge {
    margin: 0;
    font-family: var(--font-data);
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

   
  .tier-name {
    font-family: var(--font-display);
    font-size: var(--t-display-4);
    font-weight: var(--weight-display);
    font-variation-settings: "wdth" var(--width-display-text);
    letter-spacing: var(--track-d4);
    line-height: var(--lead-display);
  }

   
  .sector-bento .sector-tile.is-lead h3 {
    font-family: var(--font-display);
    font-size: var(--t-display-3);
    font-weight: var(--weight-display);
    font-variation-settings: "wdth" var(--width-display-text);
    letter-spacing: var(--track-d3);
    line-height: var(--lead-display);
  }

   
  @media (min-width: 64rem) {
    .sector-bento .sector-tile.is-lead h3 {
      font-size: var(--t-display-4);
      letter-spacing: var(--track-d4);
    }
  }

   
   
  .bar-figure-v {
    font-family: var(--font-display);
    font-size: inherit;
    font-weight: var(--weight-figure, 500);
    font-variation-settings: "wdth" var(--width-display-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-d3);
    line-height: 1;
  }

  .on-ink .bar-figure-v,
  .band .bar-figure-v { font-weight: var(--weight-figure-ink, 500); }

   
  .bar-figure-u {
    display: inline;
    margin-inline-start: 0.15rem;
    font-family: var(--font-data);
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: inherit;
  }

   
  .temp-scale--lead .temp-row[data-claim] .bar-figure {
    display: block;
    text-align: end;
  }

  @media (max-width: 34rem) {
    .temp-scale--lead .temp-row[data-claim] .bar-figure { text-align: start; }
  }

  .temp-scale--lead .temp-row[data-claim] .bar-figure-v { font-size: var(--t-figure-xl); }

   
  .temp-scale--lead .temp-row[data-claim] .bar-figure-u {
    display: block;
    margin-block-start: 0.25rem;
    margin-inline-start: 0;
    color: var(--c-on-ink-muted);
  }

   
  .bar-figure-lead {
    position: static;
    inset: auto;
    translate: none;
    margin: 0;
    white-space: normal;
  }

  .bar-figure-lead .bar-figure-v { font-size: var(--t-figure-xl); }
  .bar-figure-lead .bar-figure-u {
    display: inline;
    margin-inline-start: 0.2rem;
    color: var(--c-on-ink-muted);
  }

  /* =======================================================================
   * 7. THE THREE KINDS OF DIRT BECOME ICON CARDS. /technology, V2 4.4.
   *
   * What went: the .dirt-plate stand-in for a photograph that was never
   * sourced, the 01/02/03 numerals, and the two stock photographs on cards
   * two and three. What arrived: one literal icon per card.
   *
   * MEASURED BY INJECTION AND IT IS THE LARGEST SINGLE SAVING IN THE PASS:
   * the .dirt-block goes from 1,779px to 1,020 at 390 and from 831 to 562 at
   * 1440, so the document loses 760px on a phone and 269 on a laptop.
   *
   * IT ALSO CLOSES A PROBLEM THE PAGE RECORDS AGAINST ITSELF. technology.php
   * had a note saying item one has no photograph and is not getting one. With
   * three icons there is nothing missing from card one.
   *
   * --c-blue on --c-surface measures 6.95:1. The icons are aria-hidden
   * decoration, so the floor that applies is the 3:1 for a meaningful
   * graphic and they are not even that, but the number is recorded because
   * the pairing is new in this position.
   *
   * tech-protein AND tech-carbon STOP RENDERING ANYWHERE. They stay
   * registered in data/images.php, nobody runs php bin/images.php, and
   * eco-imagery is told: two licensed stock frames now render on no page.
   * ===================================================================== */
  .dirt-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    margin: 0 0 var(--stack-tight);
    border-radius: var(--r);
    background: var(--c-blue-weak);
    color: var(--c-blue);
  }

  .dirt-icon .icon { inline-size: 1.75rem; block-size: 1.75rem; }

   
  .next-steps {
    display: grid;
    gap: 0.5rem;
    margin-block: var(--sec-tight);
  }

  @media (min-width: 48rem) {
    .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .cc-link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.75rem;
    padding: 0.875rem 1rem;
    color: var(--c-text);
    text-decoration: none;
  }

  .cc-link > :not(.cc-box) { position: relative; }

  .cc-link:hover .cc-box { border-color: rgb(5 35 82 / 0.42); }

  .cc-link:focus-visible { outline: none; }

  .cc-link:focus-visible .cc-box {
    outline: 3px solid var(--c-blue);
    outline-offset: 2px;
  }

  .cc-link .cc-t { grid-column: 1 / -1; }

   
  .cc-link.link-arrow {
    color: var(--c-text);
    font-weight: inherit;
    text-decoration: none;
  }

  .cc-link.link-arrow .icon { color: var(--c-blue); }

   
  .selector-option.cc {
    border: 0;
    background: none;
  }

  .selector-option.cc .cc-t {
    font-family: var(--font-display);
    font-weight: 600;
    text-wrap: pretty;
  }

   
  .selector-option.cc { align-items: start; }
  .selector-option.cc .cc-ic,
  .selector-option.cc .cc-tick { align-self: start; }

}

@layer components {

   
   
  @media (min-width: 48rem) {
    body[data-path="/"] main section.band > .wrap > .stack {
      columns: 2;
      column-gap: var(--sec-tight);
    }

     
    body[data-path="/"] main section.band > .wrap > .stack > .band-close {
      column-span: all;
      margin-block-start: 2.5rem;
    }

    body[data-path="/"] main section.band > .wrap > .stack > * {
      break-inside: avoid;
    }

    body[data-path="/"] main section.band > .wrap > .stack > .eyebrow,
    body[data-path="/"] main section.band > .wrap > .stack > .section-head {
      column-span: all;
    }

    body[data-path="/"] main section.band > .wrap > .stack > h3 {
      margin-block-start: 0;
    }

    body[data-path="/"] main section.band > .wrap > .stack > h3:nth-of-type(n+2) {
      break-before: column;
    }

     
    body[data-path="/"] main section.band > .wrap > .stack > .section-head {
      max-width: none;
    }

     
    body[data-path="/"] main section.band
      .comparison-bars:not(:has(.bar-track[data-figure="after"] .bar-figure)) {
      --bar-gutter: 0rem;
    }
  }

   
  @media (min-width: 48rem) and (max-width: 63.99rem) {
    body[data-path="/"] main section.band .temp-scale .bar-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
    }
  }

   

  @media (min-width: 48rem) {
     
    body[data-path="/"] main section.band > .wrap > .stack > .band-paper {
      display: contents;
    }

     
    body[data-path="/"] main section.band > .wrap > .stack > .band-paper > * {
      break-inside: avoid;
    }

    body[data-path="/"] main section.band > .wrap > .stack > .band-paper > h3 {
      margin-block-start: 0;
    }

     
    body[data-path="/"] main section.band > .wrap > .stack > .band-paper > h3:first-child,
    body[data-path="/"] main section.band > .wrap > .stack > .band-paper ~ h3 {
      break-before: column;
    }
  }

  @media (max-width: 47.99rem) {

     
    body[data-path="/"] main section.band:has(> .wrap > .stack > .band-paper:last-child) {
      padding-block-end: 0;
    }

    body[data-path="/"] main section.band > .wrap > .stack > .band-paper {

       
      background-color: var(--c-bg);

       
      box-shadow: 0 0 0 var(--gutter) var(--c-bg);

       
      padding-block: calc(var(--sec-tight) - var(--gutter));
      margin-block-start: var(--sec-tight);

       
      --c-text:        var(--c-text-light);
      --c-text-muted:  var(--c-text-muted-light);
      --c-line:        var(--c-line-light);
      --c-line-strong: var(--c-line-strong-light);
      --c-link:        var(--c-blue);
      --c-link-hover:  var(--c-blue-hover);
      --track-label:   0.06em;

      color: var(--c-text);

       
      --c-on-ink:       var(--c-text-light);
      --c-on-ink-muted: var(--c-text-muted-light);
      --c-ink:          var(--c-bg);
      --c-ink-2:        var(--c-surface-2);
      --c-ink-line:     var(--c-line-strong-light);

       
      --weight-figure-ink:  var(--weight-figure);
      --weight-display-ink: var(--weight-display);
    }

     
    body[data-path="/"] main section.band > .wrap > .stack > .band-paper > :first-child {
      margin-block-start: 0;
    }

     
    body[data-path="/"] main section.band > .wrap > .stack > .band-paper + * {
      margin-block-start: var(--sec-tight);
    }

     

     
    .band-paper .temp-scale .temp-row[data-claim] {
      background: var(--c-tint-warm);
      padding-block: var(--stack);
    }

     
    .band-paper .temp-scale .temp-row[data-claim] .temp-track {
      background: var(--c-tint-warm-2);
    }

     
    .band-paper .temp-scale .temp-row[data-claim] .temp-what,
    .band-paper .temp-row[data-claim] .bar-figure {
      color: var(--c-heat-text);
    }

     
    .band-paper .temp-track,
    .band-paper .temp-row[data-claim] .temp-track {
      box-shadow: inset 0 0 0 1px
        color-mix(in oklab, var(--c-line-strong) 50%, transparent);
    }

     
    .band-paper .temp-pending {
      color: var(--c-bg);
    }
  }


}

 
.range-tabs { display: grid; gap: var(--stack-tight); }
.range-tabs-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.range-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 2.75rem;
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.range-tab:hover { border-color: var(--c-blue); color: var(--c-blue); }
.range-tab:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }
.range-tab.is-on, .range-tab.is-on:hover {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}
.range-tab-n {
  min-inline-size: 1.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.range-tab.is-on .range-tab-n { background: rgb(255 255 255 / 0.22); color: #fff; }
.range-tabs-note { margin: 0; color: var(--c-text-muted); }
.range-tabs-note a { margin-inline-start: 0.5rem; white-space: nowrap; }
@media (max-width: 47.99rem) {
   
  .range-tab { padding-inline: 0.85rem; gap: 0.45rem; }
}

 
#machines-register[data-class-filter="domestic"] [data-machine][data-class]:not([data-class="domestic"]),
#machines-register[data-class-filter="professional"] [data-machine][data-class]:not([data-class="professional"]),
#machines-register[data-class-filter="industrial"] [data-machine][data-class]:not([data-class="industrial"]),
#machines-register[data-class-filter="domestic"] :is([data-range-group], [data-range-shelf]):not(:has([data-machine][data-class="domestic"])),
#machines-register[data-class-filter="professional"] :is([data-range-group], [data-range-shelf]):not(:has([data-machine][data-class="professional"])),
#machines-register[data-class-filter="industrial"] :is([data-range-group], [data-range-shelf]):not(:has([data-machine][data-class="industrial"])) {
  display: none;
}

 
.offset-media--specimen { display: grid; place-items: center; }
.spec-disc {
  position: relative;
  display: block;
  inline-size: min(100%, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-ink-2, #0A2E63);
  box-shadow: inset 0 0 0 1px var(--c-ink-line, #1B4180);
}
.spec-disc-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 8%;
  object-fit: contain;
  box-sizing: border-box;
}

 
.contact-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
.contact-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 12px 32px rgb(5 35 82 / 0.08);
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
.cl-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--c-line-strong);
  color: var(--c-blue);
}
.cl-ic .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.cl-tx { display: grid; gap: 0.1rem; min-inline-size: 0; padding-block-start: 0.1rem; }
.cl-k {
  font-size: var(--t-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cl-tx a { font-size: var(--t-lg, 1.125rem); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cl-tx .muted { font-size: var(--t-sm); color: var(--c-text-muted); }

.choice--one .door {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  inline-size: 100%;
  min-block-size: 4.25rem;
  padding: 0.8rem 1.1rem;
  text-align: start;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1.5px solid var(--c-line-strong);
  border-radius: 14px;
  box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.choice--one .door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-blue);
  transform: translateX(-101%);
  transition: transform 0.35s var(--ease-out);
}
.choice--one .door:hover, .choice--one .door:focus-visible { color: #fff; border-color: var(--c-blue); }
.choice--one .door:hover::before, .choice--one .door:focus-visible::before { transform: none; }
.choice--one .door:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }
.door-ic {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--c-blue-weak);
  color: var(--c-blue);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.door-ic .icon { inline-size: 1.15rem; block-size: 1.15rem; }
.choice--one .door:hover .door-ic, .choice--one .door:focus-visible .door-ic { background: rgb(255 255 255 / 0.2); color: #fff; }
.door-tx { display: grid; gap: 0.1rem; }
.door-t { font-weight: 700; font-size: var(--t-base, 1rem); line-height: 1.25; }
.choice--one .door small { font-size: var(--t-sm); font-weight: 400; color: var(--c-text-muted); transition: color var(--dur-fast) var(--ease-out); }
.choice--one .door:hover small, .choice--one .door:focus-visible small { color: rgb(255 255 255 / 0.92); }
.door-go { display: grid; place-items: center; transition: transform 0.3s var(--ease-out); }
.door-go .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.choice--one .door:hover .door-go, .choice--one .door:focus-visible .door-go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .choice--one .door::before, .door-go, .door-ic, .choice--one .door { transition: none; }
}

 
.hero-photo-object { margin: 0; display: grid; justify-items: center; }
.hero-photo-object .img-slot, .hero-photo-object picture, .hero-photo-object img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: min(34rem, 70vh);
  border-radius: 28px;
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.35);
  object-fit: contain;
}
@media (min-width: 56rem) {
  .hero-specimen-grid > .hero-photo-object { grid-column: 2; grid-row: 1 / span 2; }
}

 
.ba-pair.is-slider { perspective: 1200px; max-inline-size: 56rem; margin-inline: auto; }
.ba-pair.is-slider .ba-frames {
  --ba-ratio: var(--ba-pair-ratio, 4 / 3);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgb(5 35 82 / 0.22);
  transform: rotateX(var(--ba-rx, 0deg)) rotateY(var(--ba-ry, 0deg));
  transition: transform 0.25s var(--ease-out);
  will-change: transform;
}
.ba-pair.is-slider.is-lead .ba-frames { --ba-ratio: var(--ba-pair-ratio, 4 / 3); }
.ba-pair.is-slider .ba-frames::after {
  inline-size: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(5 35 82 / 0.35), 0 0 14px rgb(255 255 255 / 0.7);
}
.ba-pair.is-slider .ba-frames::before {
  inline-size: 52px;
  block-size: 52px;
  border: 0;
  background: #fff;
  color: var(--c-blue);
  font-size: 1.25rem;
  box-shadow: 0 4px 18px rgb(5 35 82 / 0.4), 0 0 0 4px rgb(255 255 255 / 0.35);
}
.ba-pair.is-slider .ba-label {
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgb(5 35 82 / 0.82);
  color: #fff;
  transition: opacity 0.2s var(--ease-out);
}
.ba-pair.is-slider[data-hide-before] .ba-frame-before .ba-label,
.ba-pair.is-slider[data-hide-after] .ba-frame-after .ba-label { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ba-pair.is-slider .ba-frames { transition: none; transform: none; }
  .ba-pair.is-slider .ba-label { transition: none; }
}

 
#machines-register:is([data-class-filter="domestic"], [data-class-filter="professional"], [data-class-filter="industrial"]) > .wrap[data-range-shelf] > .stack > .lede { display: none; }
.range-tabs { margin-block-end: 0.5rem; }
@media (max-width: 47.99rem) {
  .range-tabs-note a { display: block; margin-inline-start: 0; }
}
 
@media (max-width: 55.99rem) {
  .contact-card { order: -1; }
}

 
.ba-pair.is-slider { perspective: none; }
.ba-pair.is-slider .ba-frames {
  transform: none;
  transition: none;
  will-change: auto;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ba-pair.is-slider .ba-frames img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ba-pair.is-slider .ba-range { pointer-events: none; }
.ba-pair.is-slider .ba-frames.is-dragging::before { box-shadow: 0 4px 18px rgb(5 35 82 / 0.5), 0 0 0 7px rgb(255 255 255 / 0.45); }
@media (max-width: 47.99rem) {
  .ba-pair.is-slider { margin-inline: calc(var(--gutter) * -0.5); max-inline-size: none; }
  .ba-pair.is-slider .ba-frames { border-radius: 14px; }
  .ba-pair.is-slider .ba-frames::before { inline-size: 48px; block-size: 48px; font-size: 1.1rem; }
  .ba-pair.is-slider .ba-label { padding: 0.2rem 0.6rem; font-size: 0.65rem; }
}

 
.offset-media--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.3rem + 1vw, 1rem);
  align-items: start;
}
.offset-media--pair > :is(picture, .es-clip) {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  min-inline-size: 0;
}
.offset-media--pair > picture > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.es-clip {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink);
}
.es-clip > video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

 
.hero-offer-media .hero-media { margin-block-start: var(--stack); }
@media (min-width: 56rem) {
  .hero-offer-media > .wrap > .stack {
    display: grid;
    grid-template-columns: 6fr 5fr;
    column-gap: calc(var(--gutter) * 1.5);
    align-items: start;
  }
  .hero-offer-media > .wrap > .stack > * { grid-column: 1; }
  .hero-offer-media > .wrap > .stack > .hero-media {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: center;
    margin-block-start: 0;
  }
}
.offset-media--pair > .pair-pos-right > img { object-position: 88% 50%; }

 
.hero-media > picture.es-img,
.offset-media:not(.offset-media--specimen):not(.offset-media--pair) > picture.es-img {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgb(5 35 82 / 0.08),
    0 14px 28px -12px rgb(5 35 82 / 0.28),
    0 34px 60px -30px rgb(5 35 82 / 0.30);
}
.hero-media > picture.es-img > img,
.offset-media:not(.offset-media--specimen):not(.offset-media--pair) > picture.es-img > img {
  display: block;
  border-radius: inherit;
  filter: saturate(1.06) contrast(1.03);
}
@media (min-width: 56rem) {
  .hero-media > picture.es-img::before,
  .offset-media:not(.offset-media--specimen):not(.offset-media--pair) > picture.es-img::before {
    content: "";
    position: absolute;
    inset: 18px 18px -18px -18px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgb(8 200 32 / 0.22), rgb(0 72 200 / 0.20));
  }
}