/*
 * Cutover Check — plugin stylesheet.
 *
 * A 1:1 port of the reference build (execution-space-proposal/dist/assets/index-CDr1B6PO.css, prettified copy in
 * docs/reference/index.pretty.css). The reference's cascade layers are kept in the same order:
 * reset, tokens, base, layout, components, sections, motion, then the unlayered @font-face rules.
 *
 * Deliberate differences from the reference (everything else is verbatim):
 *  1. Tokens are declared on `:root, body` and read Elementor's global colours/fonts with the reference value as
 *     fallback. Elementor writes `--e-global-color-<id>` / `--e-global-typography-<id>-font-family` on
 *     body.elementor-kit-N, so the body declaration is the one that resolves; :root keeps the literal fallbacks
 *     (html's own background uses it). The ids are seeded by tools/elementor-seed.php:
 *       --ink      cc_ink            #0b0b0a      --paper    cc_paper          #f4f2ea
 *       --ink-2    cc_ink2           #111110      --paper-2  cc_paper2         #e8e5d8
 *       --panel    cc_panel          #171716      --muted    cc_muted          #aba89e
 *       --panel-2  cc_panel2         #20201e      --signal   cc_yellow         #ffcd05
 *       --line     cc_line           #33332f      paper-scheme --fg-2   cc_medium          #55534b
 *       --line-2   cc_line2          #55554e      yellow-scheme --fg-2  cc_olive           #3a3003
 *       paper-scheme --rule  cc_rule_paper  #cfcbbb   paper-scheme --rule-2    cc_rule2_paper    #8e8a7c
 *       paper-scheme --surface cc_surface_paper #ebe8dc  paper-scheme --surface-2 cc_surface2_paper #e2dfd1
 *       code text  cc_code           #d9d6cb
 *       --font-sans  Elementor system typography "Text"   (--e-global-typography-text-font-family,   Figtree)
 *       --font-mono  Elementor system typography "Accent" (--e-global-typography-accent-font-family, DM Mono)
 *     Alpha colours (#0b0b0a4d, #0b0b0a99, #f4f2ea0a, #f4f2ea09) stay literal: they are derived from --ink/--paper.
 *  2. `main>section` selectors also match `main>.elementor>section` (the Elementor document wrapper).
 *  3. Font URLs point at assets/fonts/ (same hashed file names as the reference, so the preloads match).
 *  4. Appended at the end: the 404 page styles (the reference 404 is a standalone file with inline CSS), the
 *     "connect pending" note used by the placeholder windows, a scroll-reveal fallback class for browsers without
 *     scroll-driven animations, and an UNLAYERED WordPress/Elementor adapter. Elementor's own frontend CSS is
 *     unlayered and would otherwise beat every layered rule above; the adapter uses `revert-layer` on elements
 *     carrying the `cc` marker class so the layered port decides again.
 */
@layer reset {
  *,:before,:after {
    box-sizing:border-box
  }
  html {
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-padding-top:72px
  }
  @media (max-width:79.99rem) {
    html {
      scroll-padding-bottom:4.5rem
    }
  }
  body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,fieldset,legend {
    margin:0;
    padding:0
  }
  ul,ol {
    list-style:none
  }
  fieldset {
    border:0;
    min-inline-size:0
  }
  button,input {
    font:inherit;
    color:inherit
  }
  table {
    border-collapse:collapse;
    border-spacing:0
  }
  canvas,svg {
    display:block
  }
}
@layer tokens {
  :root,body {
    --ink:var(--e-global-color-cc_ink, #0b0b0a);
    --ink-2:var(--e-global-color-cc_ink2, #111110);
    --panel:var(--e-global-color-cc_panel, #171716);
    --panel-2:var(--e-global-color-cc_panel2, #20201e);
    --line:var(--e-global-color-cc_line, #33332f);
    --line-2:var(--e-global-color-cc_line2, #55554e);
    --paper:var(--e-global-color-cc_paper, #f4f2ea);
    --paper-2:var(--e-global-color-cc_paper2, #e8e5d8);
    --muted:var(--e-global-color-cc_muted, #aba89e);
    --signal:var(--e-global-color-cc_yellow, #ffcd05);
    --font-sans:var(--e-global-typography-text-font-family, "Figtree"), "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-mono:var(--e-global-typography-accent-font-family, "DM Mono"), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --text:1.0625rem;
    --text-s:.9375rem;
    --text-xs:.8125rem;
    --gutter:clamp(1rem, 4vw, 3rem);
    --wrap:85rem;
    --header:3.5rem;
    --section:clamp(4.5rem, 10vw, 9.5rem);
    --ease-out:cubic-bezier(.22, 1, .36, 1);
    --ease-in-out:cubic-bezier(.645, .045, .355, 1);
    --fast:.16s;
    --medium:.24s;
    --bg:var(--ink);
    --fg:var(--paper);
    --fg-2:var(--muted);
    --rule:var(--line);
    --rule-2:var(--line-2);
    --accent:var(--signal);
    --on-accent:var(--ink);
    --surface:var(--panel);
    --surface-2:var(--panel-2)
  }
}
@layer base {
  html {
    background:var(--ink);
    --lightningcss-light: ;
    --lightningcss-dark:initial;
    color-scheme:dark
  }
  body {
    font-family:var(--font-sans);
    font-size:var(--text);
    color:var(--paper);
    background:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizelegibility;
    line-height:1.55;
    overflow-x:clip
  }
  a {
    color:inherit;
    text-underline-offset:.2em;
    transition:text-decoration-color var(--fast) var(--ease-out);
    text-decoration-line:underline;
    text-decoration-thickness:1px
  }
  a:hover {
    text-decoration-thickness:2px
  }
  :focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px
  }
  ::selection {
    background:var(--signal);
    color:var(--ink)
  }
  strong {
    font-weight:700
  }
  code,.mono {
    font-family:var(--font-mono);
    font-variant-ligatures:none;
    font-size:.92em
  }
  .num {
    text-align:end;
    font-variant-numeric:tabular-nums
  }
  .count {
    font-variant-numeric:tabular-nums
  }
  .visually-hidden {
    clip-path:inset(50%);
    white-space:nowrap;
    block-size:1px;
    inline-size:1px;
    position:absolute;
    overflow:hidden
  }
}
@layer layout {
  .wrap {
    inline-size:min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline:auto
  }
  main>section,main>.elementor>section,.footer {
    background:var(--bg);
    color:var(--fg)
  }
  .on-paper,.about,.engage {
    --bg:var(--paper);
    --fg:var(--ink);
    --fg-2:var(--e-global-color-cc_medium, #55534b);
    --rule:var(--e-global-color-cc_rule_paper, #cfcbbb);
    --rule-2:var(--e-global-color-cc_rule2_paper, #8e8a7c);
    --accent:var(--ink);
    --on-accent:var(--paper);
    --surface:var(--e-global-color-cc_surface_paper, #ebe8dc);
    --surface-2:var(--e-global-color-cc_surface2_paper, #e2dfd1);
    --lightningcss-light:initial;
    --lightningcss-dark: ;
    color-scheme:light
  }
  .band,.contact {
    --bg:var(--signal);
    --fg:var(--ink);
    --fg-2:var(--e-global-color-cc_olive, #3a3003);
    --rule:#0b0b0a4d;
    --rule-2:#0b0b0a99;
    --accent:var(--ink);
    --on-accent:var(--signal);
    --lightningcss-light:initial;
    --lightningcss-dark: ;
    color-scheme:light
  }
  .section-head {
    gap:1.25rem 2rem;
    margin-block-end:clamp(2.5rem,5vw,4.5rem);
    display:grid
  }
  .section-head__title {
    letter-spacing:-.035em;
    text-wrap:balance;
    max-inline-size:16ch;
    font-size:clamp(2rem,5.2vw,4.5rem);
    font-weight:900;
    line-height:.98
  }
  .section-head__intro {
    max-inline-size:58ch;
    color:var(--fg-2)
  }
  .section-head__intro p+p {
    margin-block-start:1em
  }
  @media (min-width:62rem) {
    .section-head {
      grid-template-columns:minmax(0,7fr) minmax(0,5fr);
      align-items:end
    }
    .section-head>.label {
      grid-column:1/-1
    }
  }
}
@layer components {
  .label {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-2);
    font-weight:500
  }
  .label__row {
    color:var(--fg)
  }
  .button {
    border:1px solid var(--accent);
    background:var(--accent);
    min-block-size:3rem;
    color:var(--on-accent);
    font-size:var(--text-s);
    cursor:pointer;
    transition:background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), translate var(--fast) var(--ease-out);
    border-radius:0;
    justify-content:center;
    align-items:center;
    gap:.6rem;
    padding:.5rem 1.25rem;
    font-weight:700;
    line-height:1.1;
    text-decoration:none;
    display:inline-flex
  }
  .button:hover:not(:disabled,[aria-disabled=true]) {
    background:var(--fg);
    border-color:var(--fg);
    color:var(--bg)
  }
  .button:active:not(:disabled,[aria-disabled=true]) {
    translate:0 1px
  }
  .button:disabled,.button[aria-disabled=true] {
    cursor:default;
    opacity:.45
  }
  .button--small {
    min-block-size:2.75rem;
    padding-inline:1rem
  }
  .button--ghost {
    border-color:var(--rule-2);
    color:var(--fg);
    background:0 0
  }
  .button--ghost:hover:not(:disabled,[aria-disabled=true]) {
    border-color:var(--fg);
    color:var(--fg);
    background:0 0
  }
  .button--ghost[aria-pressed=true] {
    background:var(--fg);
    border-color:var(--fg);
    color:var(--bg)
  }
  .button--ink {
    background:var(--ink);
    border-color:var(--ink);
    color:var(--paper)
  }
  .button--ink:hover:not(:disabled,[aria-disabled=true]) {
    background:var(--paper);
    border-color:var(--ink);
    color:var(--ink)
  }
  .link-button {
    font-size:var(--text-s);
    text-underline-offset:.2em;
    cursor:pointer;
    background:0 0;
    border:0;
    padding:.5rem .25rem;
    font-weight:600;
    text-decoration:underline;
    text-decoration-thickness:1px
  }
  .link-button:hover {
    text-decoration-thickness:2px
  }
  .arrow {
    flex:none
  }
  .chip {
    border:1px solid var(--rule-2);
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--fg-2);
    align-items:center;
    gap:.4rem;
    padding:.1rem .45rem;
    font-weight:500;
    line-height:1.5;
    display:inline-flex
  }
  .chip--block {
    background:var(--signal);
    border-color:var(--signal);
    color:var(--ink)
  }
  .chip--review {
    border-color:var(--signal);
    color:var(--signal)
  }
  .chip--ready {
    background:var(--paper);
    border-color:var(--paper);
    color:var(--ink)
  }
  .chip--mute {
    border-style:dashed
  }
  .chip__count {
    font-variant-numeric:tabular-nums
  }
  .window {
    border:1px solid var(--rule);
    background:var(--surface)
  }
  .window__bar {
    background:var(--surface-2);
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.04em;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    padding:.7rem 1rem;
    display:flex
  }
  .window__title {
    white-space:nowrap;
    flex:none
  }
  .window__title:before {
    content:"";
    background:var(--signal);
    block-size:.5rem;
    inline-size:.5rem;
    margin-inline-end:.65rem;
    display:inline-block
  }
  .window__status {
    color:var(--fg-2);
    text-align:end
  }
  .window__body {
    padding:clamp(1rem,2.4vw,1.75rem)
  }
  .table {
    inline-size:100%;
    font-size:var(--text-s)
  }
  .table th,.table td {
    text-align:start;
    vertical-align:top;
    padding:.75rem
  }
  .table thead th {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-2);
    padding-block:.5rem;
    font-weight:500
  }
  .table tbody th {
    font-weight:600
  }
  .table tbody tr:nth-child(odd) {
    background:#f4f2ea0a
  }
  .table .num {
    text-align:end
  }
  .table .mono {
    overflow-wrap:anywhere
  }
  .fineprint {
    font-size:var(--text-s);
    color:var(--fg-2);
    max-inline-size:70ch
  }
  .check {
    min-block-size:2.75rem;
    font-size:var(--text-s);
    cursor:pointer;
    align-items:center;
    gap:.6rem;
    display:inline-flex
  }
  .check input {
    block-size:1.15rem;
    inline-size:1.15rem;
    accent-color:var(--signal)
  }
  .switch {
    appearance:none;
    border:1px solid var(--signal);
    cursor:pointer;
    block-size:1.5rem;
    inline-size:2.75rem;
    transition:background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
    background:0 0;
    flex:none;
    margin:0;
    position:relative
  }
  .switch:before {
    content:"";
    background:var(--signal);
    block-size:1rem;
    inline-size:1rem;
    transition:translate var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
    position:absolute;
    inset-block-start:.2rem;
    inset-inline-start:.2rem
  }
  .switch:checked {
    background:var(--paper);
    border-color:var(--paper)
  }
  .switch:checked:before {
    background:var(--ink);
    translate:1.25rem
  }
  .stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem 1.5rem;
    margin-block-end:1.5rem;
    display:grid
  }
  .stat {
    align-content:start;
    gap:.35rem;
    display:grid
  }
  .stat__n {
    letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
    font-size:clamp(1.9rem,3.4vw,2.6rem);
    font-weight:900;
    line-height:1
  }
  .stat[data-bad=true] .stat__n {
    color:var(--signal)
  }
  .stat__label {
    font-size:var(--text-s);
    color:var(--fg-2)
  }
  @media (min-width:48rem) {
    .stats {
      grid-template-columns:repeat(4,minmax(0,1fr))
    }
  }
  .filters {
    flex-wrap:wrap;
    gap:.5rem;
    margin-block:1.25rem;
    display:flex
  }
  .filter {
    border:1px solid var(--rule-2);
    min-block-size:2.75rem;
    font-size:var(--text-s);
    cursor:pointer;
    transition:background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
    background:0 0;
    align-items:center;
    gap:.5rem;
    padding:.25rem .8rem;
    font-weight:600;
    display:inline-flex
  }
  .filter:hover {
    border-color:var(--fg)
  }
  .filter[aria-pressed=true] {
    background:var(--fg);
    border-color:var(--fg);
    color:var(--bg)
  }
  .filter__n {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    font-variant-numeric:tabular-nums
  }
  .meter {
    border:1px solid var(--rule-2);
    block-size:.75rem
  }
  .meter__fill {
    background:var(--fg);
    block-size:100%;
    transition:inline-size .6s var(--ease-out);
    display:block
  }
}
@layer sections {
  .site-header {
    z-index:20;
    background:var(--ink);
    transition:translate .2s var(--ease-in-out);
    view-transition-name:site-header;
    position:fixed;
    inset-block-start:0;
    inset-inline:0
  }
  .site-header[data-hidden=true] {
    translate:0 -100%
  }
  .site-header__inner {
    block-size:var(--header);
    inline-size:min(100% - 2 * var(--gutter), var(--wrap));
    align-items:center;
    gap:clamp(.75rem,2vw,1.75rem);
    margin-inline:auto;
    display:flex
  }
  .skip {
    z-index:2;
    background:var(--signal);
    color:var(--ink);
    padding:.6rem .9rem;
    font-weight:700;
    position:absolute;
    inset-block-start:.5rem;
    inset-inline-start:var(--gutter);
    translate:0 -200%
  }
  .skip:focus-visible {
    translate:0
  }
  .site-header__brand {
    min-block-size:2.75rem;
    font-size:var(--text-s);
    white-space:nowrap;
    align-items:center;
    gap:.6rem;
    margin-inline-end:auto;
    text-decoration:none;
    display:inline-flex
  }
  .site-header__name {
    font-weight:700
  }
  .site-header__for {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.04em;
    color:var(--muted);
    display:none
  }
  .site-header__nav {
    font-size:var(--text-s);
    flex:none;
    gap:clamp(.9rem,1.6vw,1.75rem);
    font-weight:600;
    display:none
  }
  .site-header__nav a {
    white-space:nowrap;
    min-block-size:2.75rem;
    color:var(--muted);
    transition:color var(--fast) var(--ease-out);
    align-items:center;
    text-decoration:none;
    display:inline-flex
  }
  .site-header__nav a:hover,.site-header__nav a[aria-current=true] {
    color:var(--paper)
  }
  .site-header__nav a[aria-current=true]:before {
    content:"";
    background:var(--signal);
    block-size:.4rem;
    inline-size:.4rem;
    margin-inline-end:.5rem
  }
  .site-header__gate {
    flex:none;
    align-items:center;
    gap:.6rem;
    min-block-size:2.75rem;
    text-decoration:none;
    display:inline-flex
  }
  .site-header__gate-label {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    display:none
  }
  .site-header__gate .chip {
    view-transition-name:gate-chip
  }
  @media (max-width:29.99rem) {
    .site-header__gate .chip__open {
      clip-path:inset(50%);
      white-space:nowrap;
      block-size:1px;
      inline-size:1px;
      position:absolute;
      overflow:hidden
    }
  }
  main>section:focus-visible,main>.elementor>section:focus-visible {
    outline:none
  }
  .site-header__cta {
    white-space:nowrap;
    flex:none;
    display:none
  }
  .site-header__menu {
    border:1px solid var(--line-2);
    min-block-size:2.75rem;
    font-size:var(--text-s);
    cursor:pointer;
    background:0 0;
    padding:0 .9rem;
    font-weight:700
  }
  @media (min-width:30rem) {
    .site-header__gate-label {
      display:inline
    }
  }
  @media (min-width:64rem) {
    .site-header__cta {
      display:inline-flex
    }
    .site-header__nav {
      display:flex
    }
    .site-header__menu {
      display:none
    }
  }
  @media (min-width:75rem) {
    .site-header__for {
      display:inline-flex
    }
  }
  .menu {
    background:var(--ink);
    block-size:100%;
    max-block-size:none;
    inline-size:100%;
    max-inline-size:none;
    color:var(--paper);
    border:0;
    margin:0;
    padding:0
  }
  .menu::backdrop {
    background:var(--ink)
  }
  .menu__inner {
    min-block-size:100%;
    padding:.5rem var(--gutter) 2rem;
    grid-template-rows:auto 1fr auto;
    gap:2rem;
    display:grid
  }
  .menu__top {
    block-size:var(--header);
    justify-content:space-between;
    align-items:center;
    display:flex
  }
  .menu__close {
    border:1px solid var(--line-2);
    min-block-size:2.75rem;
    font-size:var(--text-s);
    cursor:pointer;
    background:0 0;
    padding:0 .9rem;
    font-weight:700
  }
  .menu__nav {
    align-content:center;
    gap:.25rem;
    display:grid
  }
  .menu__nav a {
    letter-spacing:-.03em;
    align-items:baseline;
    gap:1rem;
    padding-block:.6rem;
    font-size:clamp(2rem,9vw,3.25rem);
    font-weight:900;
    line-height:1.05;
    text-decoration:none;
    display:flex
  }
  .menu__index {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.08em;
    color:var(--signal);
    font-weight:500
  }
  .menu__foot {
    flex-wrap:wrap;
    align-items:center;
    gap:1rem 1.5rem;
    display:flex
  }
  .menu__phone {
    font-family:var(--font-mono);
    font-size:var(--text-s)
  }
  .hero {
    padding-block-start:var(--header);
    padding-block-end:clamp(2.5rem,6vw,5rem)
  }
  .hero__field {
    block-size:clamp(17rem,52svh,36rem);
    position:relative
  }
  .hero__canvas {
    block-size:100%;
    inline-size:100%;
    position:absolute;
    inset:0
  }
  .hero__side,.hero__seam {
    pointer-events:none;
    position:absolute;
    inset-block-start:1.6rem
  }
  .hero__side--source {
    inset-inline-start:var(--gutter)
  }
  .hero__side--target {
    inset-inline-end:var(--gutter)
  }
  .hero__seam {
    color:var(--signal);
    inset-inline-start:var(--seam-x,60.5%);
    translate:-50%
  }
  .hero__tip {
    z-index:2;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    white-space:nowrap;
    pointer-events:none;
    padding:.3rem .55rem;
    position:absolute;
    translate:.9rem -135%
  }
  .hero__body {
    gap:1.75rem;
    display:grid;
    position:relative
  }
  .hero__title {
    letter-spacing:-.04em;
    pointer-events:none;
    margin-block-start:-.56em;
    font-size:clamp(2.25rem,9.6vw,8.4rem);
    font-weight:900;
    line-height:.92
  }
  .hero__line {
    display:block
  }
  .hero__num {
    color:var(--signal);
    view-transition-name:hero-count
  }
  .hero__intro {
    align-content:start;
    gap:1.5rem;
    display:grid
  }
  .hero__sub {
    max-inline-size:34ch;
    font-size:clamp(1.15rem,1.7vw,1.4rem);
    line-height:1.35
  }
  .hero__actions {
    flex-wrap:wrap;
    gap:.75rem;
    display:flex
  }
  .readout {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    color:var(--muted);
    gap:.35rem;
    line-height:1.6;
    display:grid
  }
  .readout li:before {
    content:"> ";
    color:var(--signal)
  }
  .readout strong {
    color:var(--paper);
    font-weight:500
  }
  .readout__verdict--block,.readout__verdict--review {
    color:var(--signal)!important
  }
  .hero__caption {
    max-inline-size:70ch;
    font-size:var(--text-s);
    color:var(--muted)
  }
  @media (max-width:47.99rem) {
    .hero__side {
      font-size:.75rem;
      inset-block:auto 3.6rem
    }
    .hero__seam {
      display:none
    }
  }
  @media (max-width:29.99rem) {
    .hero__platform {
      display:none
    }
  }
  @media (min-width:62rem) {
    .hero__body {
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:2.25rem 1.5rem
    }
    .hero__title {
      grid-column:1/-1
    }
    .hero__intro {
      grid-column:1/span 6
    }
    .hero__readout {
      grid-column:8/-1;
      align-self:start
    }
    .hero__caption {
      grid-column:1/span 8
    }
  }
  .band {
    padding-block:clamp(3.5rem,8vw,7.5rem)
  }
  .band__grid {
    gap:2rem;
    display:grid
  }
  .band__lead {
    align-content:start;
    gap:1.25rem;
    display:grid
  }
  .band__title {
    letter-spacing:-.035em;
    text-wrap:balance;
    font-size:clamp(2rem,5vw,4.25rem);
    font-weight:900;
    line-height:.98
  }
  .band__text {
    align-content:end;
    gap:1rem;
    max-inline-size:52ch;
    font-size:clamp(1.0625rem,1.3vw,1.2rem);
    font-weight:500;
    display:grid
  }
  @media (min-width:62rem) {
    .band__grid {
      grid-template-columns:minmax(0,7fr) minmax(0,5fr);
      column-gap:4rem
    }
  }
  .demo {
    padding-block:var(--section) 0;
    --bg:var(--ink-2);
    position:relative
  }
  .demo>.wrap {
    padding-block-end:var(--section)
  }
  .demo__grid {
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    display:grid
  }
  .demo__flow {
    grid-template-columns:minmax(0,1fr);
    gap:clamp(3rem,6vw,5rem);
    min-inline-size:0;
    display:grid
  }
  .strip {
    border:1px solid var(--rule);
    block-size:5.5rem
  }
  .strip__canvas {
    block-size:100%;
    inline-size:100%
  }
  .step {
    grid-template-columns:minmax(0,1fr);
    gap:.9rem;
    display:grid
  }
  .step__title {
    letter-spacing:-.02em;
    text-wrap:balance;
    font-size:clamp(1.5rem,2.6vw,2.1rem);
    font-weight:800;
    line-height:1.08
  }
  .step__text {
    max-inline-size:62ch;
    color:var(--fg-2);
    margin-block-end:.75rem
  }
  @media (min-width:80rem) {
    .demo__grid {
      grid-template-columns:minmax(19rem,22.5rem) minmax(0,1fr);
      align-items:start;
      gap:clamp(1.5rem,3vw,3rem)
    }
    .demo__rail {
      max-block-size:calc(100svh - var(--header) - 2rem);
      display:flex;
      position:sticky;
      inset-block-start:calc(var(--header) + 1rem)
    }
  }
  .gatebar {
    z-index:10;
    border:1px solid var(--line-2);
    background:var(--panel-2);
    min-block-size:3.25rem;
    font-size:var(--text-s);
    align-items:center;
    gap:.75rem;
    margin:0 .5rem .5rem;
    padding:.4rem .9rem;
    text-decoration:none;
    display:flex;
    position:sticky;
    inset-block-end:.5rem
  }
  .gatebar__text {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    color:var(--muted)
  }
  .gatebar__go {
    text-underline-offset:.2em;
    margin-inline-start:auto;
    font-weight:700;
    text-decoration:underline
  }
  @media (min-width:80rem) {
    .gatebar {
      display:none
    }
  }
  @media (max-width:26rem) {
    .gatebar__text {
      display:none
    }
  }
  .rules-window .window__body {
    gap:1rem;
    padding:1rem;
    display:grid
  }
  @media (min-width:80rem) {
    .rules-window {
      flex-direction:column;
      min-block-size:0;
      inline-size:100%;
      display:flex
    }
    .rules-window .window__body {
      flex-direction:column;
      flex:1;
      min-block-size:0;
      display:flex
    }
    .rules__scroll {
      scrollbar-width:thin;
      scrollbar-color:var(--line-2) transparent;
      flex:1;
      min-block-size:0;
      overflow-y:auto
    }
  }
  @media (min-width:80rem) and (max-height:46rem) {
    .gate__meaning {
      display:none
    }
  }
  .rules {
    gap:.25rem;
    display:grid
  }
  .rule {
    background:#f4f2ea09;
    padding:.7rem .75rem
  }
  .rule__label {
    cursor:pointer;
    align-items:center;
    gap:.75rem;
    min-block-size:1.75rem;
    display:flex
  }
  .rule__name {
    font-size:var(--text-s);
    font-weight:700;
    line-height:1.2
  }
  .rule__count {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    font-variant-numeric:tabular-nums;
    color:var(--signal);
    margin-inline-start:auto
  }
  .rule__effect {
    font-size:var(--text-xs);
    color:var(--fg-2);
    margin-block-start:.4rem;
    padding-inline-start:3.5rem;
    line-height:1.45
  }
  .strategy {
    gap:.6rem;
    margin-block-end:1.75rem;
    display:grid
  }
  .strategy__options {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
    max-inline-size:32rem;
    display:grid
  }
  .strategy__option {
    border:1px solid var(--rule-2);
    min-block-size:2.75rem;
    font-size:var(--text-s);
    text-align:center;
    cursor:pointer;
    transition:background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
    justify-content:center;
    align-items:center;
    padding:.4rem .6rem;
    font-weight:700;
    line-height:1.2;
    display:flex;
    position:relative
  }
  .strategy__option input {
    opacity:0;
    cursor:pointer;
    block-size:100%;
    inline-size:100%;
    margin:0;
    position:absolute;
    inset:0
  }
  .strategy__option[data-checked=true] {
    background:var(--fg);
    border-color:var(--fg);
    color:var(--bg)
  }
  .strategy__option:has(input:focus-visible) {
    outline:2px solid var(--accent);
    outline-offset:3px
  }
  .strategy__note {
    font-size:var(--text-s);
    color:var(--fg-2);
    line-height:1.45
  }
  .gate {
    border:1px solid var(--signal);
    view-transition-name:gate;
    gap:.5rem;
    padding:.9rem 1rem 1rem;
    display:grid
  }
  .gate[data-verdict=BLOCK] {
    background:var(--signal);
    color:var(--ink);
    --fg-2:var(--e-global-color-cc_olive, #3a3003);
    --accent:var(--ink);
    --on-accent:var(--signal);
    --fg:var(--ink);
    --bg:var(--signal);
    --rule-2:#0b0b0a99
  }
  .gate[data-verdict=READY] {
    background:var(--paper);
    border-color:var(--paper);
    color:var(--ink);
    --fg-2:var(--e-global-color-cc_medium, #55534b);
    --accent:var(--ink);
    --on-accent:var(--paper);
    --fg:var(--ink);
    --bg:var(--paper);
    --rule-2:var(--e-global-color-cc_rule2_paper, #8e8a7c)
  }
  .gate[data-verdict=BLOCK] .button:hover:not(:disabled,[aria-disabled=true]),.gate[data-verdict=READY] .button:hover:not(:disabled,[aria-disabled=true]) {
    border-color:var(--ink);
    color:var(--ink);
    background:0 0
  }
  .gate:focus-visible {
    outline-color:var(--paper)
  }
  .gate__label {
    font-variant-numeric:tabular-nums
  }
  .gate__verdict {
    letter-spacing:-.04em;
    font-size:3.25rem;
    font-weight:900;
    line-height:.9
  }
  .gate[data-verdict=REVIEW] .gate__verdict {
    color:var(--signal)
  }
  .gate__meaning {
    font-size:var(--text-xs);
    font-weight:500;
    line-height:1.45
  }
  .gate__why>summary {
    min-block-size:2.75rem;
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    text-underline-offset:.25em;
    cursor:pointer;
    align-items:center;
    gap:.5rem;
    text-decoration:underline;
    text-decoration-thickness:1px;
    list-style:none;
    display:inline-flex
  }
  .gate__why>summary::-webkit-details-marker {
    display:none
  }
  .gate__why>summary:before {
    content:"+";
    text-align:center;
    inline-size:.6rem
  }
  .gate__why[open]>summary:before {
    content:"−"
  }
  @media (min-width:80rem) {
    .gate__why>summary {
      min-block-size:1.75rem
    }
  }
  .gate__lines {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    gap:.2rem;
    margin-block:.25rem .5rem;
    line-height:1.5;
    display:grid
  }
  .gate__lines li {
    grid-template-columns:.8rem 1fr;
    gap:.5rem;
    display:grid
  }
  .gate__lines li:before {
    content:"";
    border:1px solid;
    block-size:.5rem;
    inline-size:.5rem;
    margin-block-start:.42rem
  }
  .gate__lines li[data-severity=block]:before {
    background:currentColor
  }
  .gate__lines li[data-severity=info] {
    opacity:.72
  }
  .gate__lines li[data-severity=info]:before {
    border-style:dashed
  }
  .gate__signoff {
    margin-block-start:.25rem
  }
  .gate__actions {
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    margin-block-start:.25rem;
    display:grid
  }
  .gate__actions .button {
    padding-inline:.5rem
  }
  .trace__head {
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:start;
    gap:1rem;
    margin-block-end:1.25rem;
    display:flex
  }
  .trace__title {
    letter-spacing:-.015em;
    font-size:clamp(1.25rem,2vw,1.6rem);
    font-weight:800;
    line-height:1.15
  }
  .trace__meta {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    color:var(--fg-2);
    margin-block-start:.25rem
  }
  .trace__row {
    font-size:var(--text-s);
    gap:.25rem 1rem;
    padding:.8rem .75rem;
    display:grid
  }
  .trace__row:nth-child(2n) {
    background:#f4f2ea0a
  }
  .trace__row--head {
    display:none
  }
  .trace__field {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--fg-2)
  }
  .trace__value {
    font-family:var(--font-mono);
    overflow-wrap:anywhere;
    font-size:.875rem
  }
  .trace__value:before {
    content:"old · ";
    color:var(--fg-2)
  }
  .trace__value--target:before {
    content:"new · "
  }
  .trace__value--target {
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35rem .6rem;
    display:flex
  }
  .trace__row[data-wrong=true] .trace__now {
    color:var(--signal)
  }
  .trace__ok {
    font-size:var(--text-xs);
    color:var(--fg-2)
  }
  .trace__why {
    font-family:var(--font-sans);
    font-size:var(--text-s);
    color:var(--fg);
    flex-basis:100%;
    line-height:1.45
  }
  .trace__question {
    border:1px dashed var(--signal);
    font-size:var(--text-s);
    margin-block-start:1rem;
    padding:.8rem .9rem
  }
  .trace__next {
    margin-block:1.75rem .75rem
  }
  .trace__effects {
    gap:.75rem;
    display:grid
  }
  .effect {
    border:1px solid var(--rule);
    font-size:var(--text-s);
    align-content:start;
    gap:.6rem;
    padding:1rem;
    display:grid
  }
  .effect[data-bad=true] {
    border-color:var(--signal)
  }
  .effect__title {
    font-size:var(--text-s);
    font-weight:800
  }
  .effect__list {
    gap:.25rem;
    display:grid
  }
  .effect__list>div {
    justify-content:space-between;
    gap:1rem;
    display:flex
  }
  .effect__list dt {
    color:var(--fg-2)
  }
  .effect__list dd {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums
  }
  .effect__text code {
    background:var(--surface-2);
    padding:.05rem .3rem
  }
  .effect__warn {
    color:var(--signal);
    font-weight:600
  }
  .effect__chain {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    overflow-wrap:anywhere;
    counter-reset:hop;
    gap:.3rem;
    line-height:1.5;
    display:grid
  }
  .effect__chain li {
    counter-increment:hop;
    grid-template-columns:1.2rem 1fr;
    display:grid
  }
  .effect__chain li:before {
    content:counter(hop);
    color:var(--fg-2)
  }
  .effect[data-bad=true] .effect__chain li:last-child {
    color:var(--signal)
  }
  @media (min-width:48rem) {
    .trace__row {
      grid-template-columns:8.5rem minmax(0,1fr) minmax(0,1.5fr)
    }
    .trace__row--head {
      font-family:var(--font-mono);
      font-size:var(--text-xs);
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--fg-2);
      padding-block:.4rem;
      display:grid
    }
    .trace__value:before {
      content:none
    }
    .trace__effects {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
  }
  .ledger__summary {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    color:var(--fg-2);
    line-height:1.6
  }
  .ledger__summary strong {
    color:var(--signal);
    font-weight:500
  }
  .ledger__empty {
    border:1px dashed var(--rule-2);
    font-size:var(--text-s);
    padding:1.25rem
  }
  .ledger__name {
    line-height:1.3;
    display:block
  }
  .ledger__sku {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    color:var(--fg-2);
    margin-block-start:.15rem;
    font-weight:400;
    display:block
  }
  .ledger__table tr[data-severity=block] .ledger__target,.ledger__table tr[data-severity=review] .ledger__target {
    color:var(--signal)
  }
  .ledger__more {
    white-space:nowrap;
    text-align:end!important
  }
  .ledger__detail td {
    padding:.25rem .75rem 1.1rem
  }
  .ledger__detail p {
    max-inline-size:70ch;
    margin-block-end:.5rem
  }
  .ledger__actions {
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem 1.25rem;
    margin-block-start:.75rem;
    display:flex
  }
  .ledger__toggle {
    margin-block-start:1rem
  }
  @media (max-width:47.99rem) {
    .table thead {
      clip-path:inset(50%);
      block-size:1px;
      inline-size:1px;
      position:absolute;
      overflow:hidden
    }
    .table,.table tbody,.table tr,.table th,.table td {
      display:block
    }
    .table tbody {
      gap:.6rem;
      display:grid
    }
    .table tbody tr {
      border:1px solid var(--rule);
      padding:.85rem;
      background:0 0!important
    }
    .table tbody tr.ledger__detail {
      border-style:dashed;
      margin-block-start:-.6rem
    }
    .table tbody th,.table tbody td {
      padding:.2rem 0;
      text-align:start!important
    }
    .table tbody td[data-label]:before,.table tbody th[data-label]:before {
      content:attr(data-label);
      font-family:var(--font-mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--fg-2);
      font-size:.75rem;
      font-weight:500;
      display:block
    }
    .table tbody td[data-label=Gate]:before,.table tbody td[data-label=Result]:before,.table tbody td[data-label=Lands\ on]:before {
      content:none
    }
  }
  .map__note {
    max-inline-size:68ch;
    margin-block-end:1.25rem
  }
  .map .fineprint {
    margin-block-start:1.25rem
  }
  .watch__top {
    justify-items:start;
    gap:.9rem;
    margin-block-end:1.5rem;
    display:grid
  }
  .watch__top .meter {
    inline-size:100%
  }
  .watch__coverage {
    flex-wrap:wrap;
    align-items:baseline;
    gap:.5rem 1rem;
    max-inline-size:60ch;
    display:flex
  }
  .watch__pct {
    letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;
    font-size:clamp(2.5rem,5vw,3.75rem);
    font-weight:900;
    line-height:.9
  }
  .watch__hint {
    border:1px solid var(--signal);
    font-size:var(--text-s);
    max-inline-size:68ch;
    padding:.75rem .9rem
  }
  .watch__path {
    min-inline-size:12rem
  }
  .watch__note {
    min-inline-size:14rem;
    color:var(--fg-2)
  }
  .watch__note .mono {
    color:var(--fg)
  }
  .exports__title {
    letter-spacing:-.02em;
    margin-block-end:1.25rem;
    font-size:clamp(1.5rem,2.6vw,2.1rem);
    font-weight:800;
    line-height:1.08
  }
  .exports__list {
    gap:.75rem;
    display:grid
  }
  .export {
    border:1px solid var(--rule);
    background:var(--surface);
    align-items:center;
    gap:1rem;
    padding:1.1rem 1.25rem;
    display:grid
  }
  .export__name {
    font-family:var(--font-mono);
    font-size:var(--text-s);
    font-weight:500
  }
  .export__what {
    max-inline-size:62ch;
    font-size:var(--text-s);
    color:var(--fg-2);
    margin-block-start:.3rem
  }
  @media (min-width:40rem) {
    .export {
      grid-template-columns:minmax(0,1fr) auto
    }
  }
  .decision {
    padding-block:var(--section)
  }
  .options {
    gap:1rem;
    display:grid
  }
  .option {
    border:1px solid var(--rule);
    align-content:start;
    gap:.9rem;
    padding:clamp(1.25rem,2.4vw,2rem);
    display:grid
  }
  .option[data-current=true] {
    border-color:var(--signal)
  }
  .option[data-current=true] .option__tag:after {
    content:" · selected in the demo";
    color:var(--signal)
  }
  .option__title {
    letter-spacing:-.02em;
    font-size:clamp(1.35rem,2vw,1.75rem);
    font-weight:800;
    line-height:1.1
  }
  .option__facts {
    font-size:var(--text-s);
    gap:.75rem;
    margin-block-start:.5rem;
    display:grid
  }
  .option__facts dt {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-2)
  }
  .call {
    gap:2rem;
    margin-block-start:clamp(2.5rem,5vw,4rem);
    display:grid
  }
  .call__main,.call__side {
    align-content:start;
    gap:1rem;
    display:grid
  }
  .call__text {
    letter-spacing:-.015em;
    max-inline-size:30ch;
    font-size:clamp(1.35rem,2.5vw,2.1rem);
    font-weight:700;
    line-height:1.22
  }
  .call__list {
    gap:.75rem;
    max-inline-size:48ch;
    display:grid
  }
  .call__list li {
    grid-template-columns:1rem 1fr;
    gap:.5rem;
    display:grid
  }
  .call__list li:before {
    content:"";
    background:var(--signal);
    block-size:.5rem;
    inline-size:.5rem;
    margin-block-start:.6rem
  }
  @media (min-width:62rem) {
    .options {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .call {
      grid-template-columns:minmax(0,7fr) minmax(0,5fr);
      column-gap:4rem
    }
  }
  .code {
    padding-block:var(--section);
    --bg:var(--ink-2)
  }
  .codebox {
    border:1px solid var(--rule);
    background:var(--surface)
  }
  .codebox__tabs {
    background:var(--surface-2);
    grid-template-columns:repeat(2,minmax(0,1fr));
    display:grid
  }
  @media (min-width:48rem) {
    .codebox__tabs {
      display:flex
    }
  }
  .codebox__tab {
    text-align:start;
    min-block-size:3rem;
    font-size:var(--text-s);
    color:var(--fg-2);
    cursor:pointer;
    transition:background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
    background:0 0;
    border:0;
    flex:none;
    padding:0 1.1rem;
    font-weight:700
  }
  .codebox__tab:hover {
    color:var(--fg)
  }
  .codebox__tab[aria-selected=true] {
    background:var(--surface);
    color:var(--fg)
  }
  .codebox__tab[aria-selected=true]:before {
    content:"";
    background:var(--signal);
    block-size:.45rem;
    inline-size:.45rem;
    margin-inline-end:.55rem;
    display:inline-block
  }
  .codebox__tab:focus-visible {
    outline-offset:-3px
  }
  .codebox__meta {
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:start;
    gap:1rem;
    padding:clamp(1rem,2.4vw,1.75rem);
    display:flex
  }
  .codebox__path {
    font-family:var(--font-mono);
    font-size:var(--text-s);
    overflow-wrap:anywhere;
    font-weight:500
  }
  .codebox__what {
    max-inline-size:64ch;
    margin-block-start:.4rem
  }
  .codebox__checked {
    font-size:var(--text-s);
    color:var(--fg-2);
    margin-block-start:.4rem
  }
  .codebox__pre {
    background:var(--ink);
    max-block-size:30rem;
    font-family:var(--font-mono);
    tab-size:2;
    color:var(--e-global-color-cc_code, #d9d6cb);
    margin:0;
    padding:clamp(1rem,2.4vw,1.75rem);
    font-size:.875rem;
    line-height:1.6;
    overflow:auto
  }
  .codebox__pre:focus-visible {
    outline-offset:-3px
  }
  .code__foot {
    justify-items:start;
    gap:1.25rem;
    margin-block-start:1.75rem;
    display:grid
  }
  .method {
    padding-block:var(--section)
  }
  .quad {
    gap:1rem;
    display:grid
  }
  .quad__cell {
    border:1px solid var(--rule);
    padding:clamp(1.25rem,2.4vw,2rem)
  }
  .quad__title {
    letter-spacing:-.025em;
    font-size:clamp(1.5rem,2.4vw,2rem);
    font-weight:900;
    line-height:1
  }
  .quad__sub {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.04em;
    color:var(--fg-2);
    margin-block:.4rem 1.1rem
  }
  .quad__cell ul {
    font-size:var(--text-s);
    gap:.75rem;
    display:grid
  }
  .quad__cell li {
    grid-template-columns:.9rem 1fr;
    gap:.4rem;
    display:grid
  }
  .quad__cell li:before {
    content:"";
    border:1px solid var(--fg-2);
    block-size:.4rem;
    inline-size:.4rem;
    margin-block-start:.55rem
  }
  .quad__cell li>* {
    grid-column:2
  }
  .blind {
    gap:1.5rem;
    margin-block-start:clamp(2.5rem,5vw,4rem);
    display:grid
  }
  .blind__title {
    letter-spacing:-.02em;
    font-size:clamp(1.5rem,2.6vw,2.1rem);
    font-weight:800;
    line-height:1.08
  }
  .blind__list {
    gap:1rem 2.5rem;
    max-inline-size:70rem;
    display:grid
  }
  @media (min-width:48rem) {
    .quad,.blind__list {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
  }
  @media (min-width:62rem) {
    .blind {
      grid-template-columns:minmax(0,4fr) minmax(0,8fr);
      column-gap:3rem
    }
  }
  .about {
    padding-block:var(--section) clamp(3rem, 6vw, 5rem)
  }
  .about__grid {
    gap:2.5rem;
    display:grid
  }
  .about__lead {
    align-content:start;
    gap:1.25rem;
    display:grid
  }
  .about__title {
    letter-spacing:-.035em;
    text-wrap:balance;
    font-size:clamp(2rem,4.6vw,4rem);
    font-weight:900;
    line-height:.98
  }
  .about__text {
    max-inline-size:54ch
  }
  .proof {
    align-content:start;
    gap:.5rem;
    display:grid
  }
  .proof__row {
    background:var(--surface);
    gap:.3rem 1.5rem;
    padding:1rem 1.1rem;
    display:grid
  }
  .proof__figure {
    letter-spacing:-.02em;
    font-size:1.2rem;
    font-weight:900;
    line-height:1.15
  }
  .proof__text {
    font-size:var(--text-s)
  }
  .proof__link {
    white-space:nowrap;
    align-items:center;
    gap:.25rem;
    font-weight:700;
    display:inline-flex
  }
  .thin {
    border:1px solid var(--rule-2);
    gap:1.25rem;
    margin-block-start:clamp(2.5rem,5vw,4rem);
    padding:clamp(1.25rem,3vw,2.25rem);
    display:grid
  }
  .thin__title {
    letter-spacing:-.02em;
    font-size:clamp(1.35rem,2.2vw,1.75rem);
    font-weight:800
  }
  .thin__list {
    font-size:var(--text-s);
    gap:1rem 2rem;
    display:grid
  }
  @media (min-width:48rem) {
    .proof__row {
      grid-template-columns:11.5rem minmax(0,1fr);
      align-items:baseline
    }
    .thin__list {
      grid-template-columns:repeat(3,minmax(0,1fr))
    }
  }
  @media (min-width:62rem) {
    .about__grid {
      grid-template-columns:minmax(0,5fr) minmax(0,7fr);
      column-gap:4rem
    }
    .thin {
      grid-template-columns:minmax(0,3fr) minmax(0,9fr);
      column-gap:2.5rem
    }
  }
  .engage {
    padding-block:clamp(3rem, 6vw, 5rem) var(--section)
  }
  .terms {
    gap:.5rem;
    display:grid
  }
  .terms__row {
    background:var(--surface);
    gap:.3rem 2rem;
    padding:1.1rem 1.25rem;
    display:grid
  }
  .terms dt {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-2);
    padding-block-start:.25rem;
    font-weight:500
  }
  .terms dd {
    max-inline-size:68ch
  }
  @media (min-width:48rem) {
    .terms__row {
      grid-template-columns:12rem minmax(0,1fr)
    }
  }
  .contact {
    padding-block:clamp(4rem,9vw,8rem)
  }
  .contact__grid {
    gap:3rem;
    display:grid
  }
  .contact__lead {
    align-content:start;
    gap:1.5rem;
    display:grid
  }
  .contact__title {
    letter-spacing:-.04em;
    text-wrap:balance;
    font-size:clamp(2.1rem,5.4vw,4.75rem);
    font-weight:900;
    line-height:.96
  }
  .contact__actions {
    flex-wrap:wrap;
    align-items:center;
    gap:1rem 1.75rem;
    display:flex
  }
  .contact__phone {
    font-size:1.25rem;
    font-weight:800
  }
  .contact__mail {
    font-family:var(--font-mono);
    font-size:var(--text-s);
    overflow-wrap:anywhere
  }
  .files {
    align-content:start;
    gap:.5rem;
    display:grid
  }
  .file {
    border:1px solid var(--rule-2);
    min-block-size:3.5rem;
    transition:background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:baseline;
    gap:.25rem 1.5rem;
    padding:1rem 1.25rem;
    text-decoration:none;
    display:flex
  }
  .file:hover {
    background:var(--ink);
    border-color:var(--ink);
    color:var(--signal)
  }
  .file:hover .file__meta {
    color:var(--paper)
  }
  .file__name {
    font-size:1.15rem;
    font-weight:800
  }
  .file__meta {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.04em;
    color:var(--fg-2)
  }
  @media (min-width:62rem) {
    .contact__grid {
      grid-template-columns:minmax(0,7fr) minmax(0,5fr);
      column-gap:4rem
    }
  }
  .footer {
    font-size:var(--text-s);
    padding-block:clamp(3rem,6vw,5rem)
  }
  .footer__grid {
    gap:2rem;
    display:grid
  }
  .footer__brand {
    align-content:start;
    gap:.4rem;
    display:grid
  }
  .footer__name {
    font-size:1.15rem;
    font-weight:800
  }
  .footer__where {
    color:var(--fg-2)
  }
  .footer__links {
    align-content:start;
    justify-items:start;
    gap:.25rem;
    display:grid
  }
  .footer__links a {
    align-items:center;
    min-block-size:2.75rem;
    font-weight:600;
    display:inline-flex
  }
  .footer__notes {
    max-inline-size:64ch;
    color:var(--fg-2);
    gap:.9rem;
    display:grid
  }
  .footer__colophon {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    line-height:1.6
  }
  @media (min-width:62rem) {
    .footer__grid {
      grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,6fr);
      column-gap:3rem
    }
  }
}
@layer motion {
  ::view-transition-old(root) {
    animation-duration:.2s;
    animation-timing-function:var(--ease-out)
  }
  ::view-transition-new(root) {
    animation-duration:.2s;
    animation-timing-function:var(--ease-out)
  }
  ::view-transition-group(gate) {
    animation-duration:.32s;
    animation-timing-function:var(--ease-out)
  }
  ::view-transition-group(gate-chip) {
    animation-duration:.32s;
    animation-timing-function:var(--ease-out)
  }
  ::view-transition-group(hero-count) {
    animation-duration:.32s;
    animation-timing-function:var(--ease-out)
  }
  ::view-transition-old(site-header) {
    animation:none
  }
  ::view-transition-new(site-header) {
    animation:none
  }
  @media (prefers-reduced-motion:no-preference) {
    html {
      scroll-behavior:smooth
    }
    @supports (animation-timeline:view()) and (animation-range:entry) {
      @keyframes rise {
        0% {
          opacity:0;
          translate:0 1.5rem
        }
      }
      .section-head,.band__lead,.band__text,.option,.call,.quad__cell,.blind,.about__lead,.proof__row,.thin,.terms__row,.contact__lead,.files>li {
        animation:linear backwards rise;
        animation-timeline:view();
        animation-range:cover cover 16%
      }
    }
  }
  @media (prefers-reduced-motion:reduce) {
    *,:before,:after {
      transition-duration:.01ms!important;
      animation-duration:.01ms!important
    }
    ::view-transition-group(*) {
      animation:none!important
    }
    ::view-transition-old(*) {
      animation:none!important
    }
    ::view-transition-new(*) {
      animation:none!important
    }
  }
  @media print {
    .site-header,.gatebar,.hero__field,.strip {
      display:none
    }
  }
}
@font-face {
  font-family:Figtree;
  src:url(fonts/figtree-latin-wght-normal-D_ZTVpCC.woff2)format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:DM Mono;
  src:url(fonts/dm-mono-latin-400-normal-4GdczIuU.woff2)format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:DM Mono;
  src:url(fonts/dm-mono-latin-500-normal-DRMDZjhP.woff2)format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Figtree Fallback;
  src:local(Arial);
  ascent-override:95%;
  descent-override:25%;
  line-gap-override:0%
}


/* ---- Additions for the WordPress build (not in the reference stylesheet) ---------------------------------- */
@layer sections {
  .notfound {
    min-block-size:100svh;
    background:var(--ink);
    color:var(--paper);
    align-content:center;
    gap:1.5rem;
    padding:clamp(1.5rem,6vw,5rem);
    display:grid
  }
  .notfound .label {
    color:var(--muted)
  }
  .notfound .chip {
    margin-inline-end:.5rem
  }
  .notfound__title {
    letter-spacing:-.04em;
    text-wrap:balance;
    max-inline-size:14ch;
    font-size:clamp(2.5rem,9vw,6.5rem);
    font-weight:900;
    line-height:.95
  }
  .notfound__text {
    max-inline-size:52ch;
    color:var(--e-global-color-cc_code, #d9d6cb)
  }
  .notfound .button {
    justify-self:start
  }
  .cc-pending {
    border:1px dashed var(--signal);
    font-size:var(--text-s);
    color:var(--fg-2);
    gap:.35rem;
    padding:.8rem .9rem;
    display:grid
  }
  .cc-pending strong {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--fg);
    font-weight:500
  }
  .hero__field .cc-pending {
    position:absolute;
    inset-block-end:1.5rem;
    inset-inline-start:50%;
    translate:-50%;
    background:var(--ink);
    z-index:1
  }
  .admin-bar .site-header {
    inset-block-start:var(--wp-admin--admin-bar--height,32px)
  }
}
@layer motion {
  @media (prefers-reduced-motion:no-preference) {
    @supports not ((animation-timeline:view()) and (animation-range:entry)) {
      .cc-reveal {
        opacity:0;
        translate:0 1.5rem;
        transition:opacity .5s var(--ease-out), translate .5s var(--ease-out)
      }
      .cc-reveal.is-in {
        opacity:1;
        translate:0
      }
    }
  }
}

/* ---- Pages, navigation and introduction (About page, Introduction page, Sites group) ---------------------------
 * Not in the reference stylesheet. Everything reuses the reference tokens and components: the Sites strip and the
 * Menu dialog group follow the section navigation's type and colours, the page head is the reference `.section-head`,
 * the introduction buttons are `.button` / `.button--ghost`, its panels are `.window`, its empty states `.cc-pending`. */
@layer tokens {
  :root,body {
    --header-bar:3.5rem;
    --header-sites:0rem;
    --header:calc(var(--header-bar) + var(--header-sites))
  }
  @media (min-width:64rem) {
    :root,body {
      --header-sites:2.25rem
    }
  }
}
@layer sections {
  html {
    scroll-padding-top:calc(var(--header) + 1rem)
  }
  .site-header__inner,.menu__top {
    block-size:var(--header-bar)
  }
  /* On very narrow screens the brand gives way so the gate chip and the Menu button always stay on screen: the name
   * is shortened with an ellipsis, then (below 22rem) visually hidden (it stays in the accessible name). */
  .site-header__brand {
    min-inline-size:0
  }
  .site-header__brand .mark {
    flex:none
  }
  .site-header__name {
    min-inline-size:0;
    text-overflow:ellipsis;
    overflow:hidden
  }
  @media (max-width:29.99rem) {
    .site-header__inner {
      gap:.5rem
    }
  }
  @media (max-width:21.99rem) {
    .site-header__name {
      clip-path:inset(50%);
      block-size:1px;
      inline-size:1px;
      position:absolute
    }
  }

  /* Sites strip above the header bar (from 1024px, where the section navigation appears). Below that the three
   * websites are in the Menu dialog and the footer. */
  .site-header__sites {
    border-block-end:1px solid var(--line);
    display:none
  }
  @media (min-width:64rem) {
    .site-header__sites {
      display:block
    }
  }
  .site-header__sites-inner {
    inline-size:min(100% - 2 * var(--gutter), var(--wrap));
    block-size:var(--header-sites);
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.04em;
    white-space:nowrap;
    justify-content:flex-end;
    align-items:center;
    gap:clamp(.9rem,1.6vw,1.75rem);
    margin-inline:auto;
    display:flex
  }
  .site-header__sites-label,.menu__sites .label {
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-inline-end:.25rem
  }
  .site-header__sites a,.menu__sites a {
    white-space:nowrap;
    color:var(--muted);
    transition:color var(--fast) var(--ease-out);
    align-items:center;
    text-decoration:none;
    display:inline-flex
  }
  .site-header__sites a {
    min-block-size:var(--header-sites)
  }
  .site-header__sites a:hover,.site-header__sites a[aria-current=true],.menu__sites a:hover,.menu__sites a[aria-current=true] {
    color:var(--paper)
  }
  .site-header__sites a[aria-current=true]:before,.menu__sites a[aria-current=true]:before {
    content:"";
    background:var(--signal);
    block-size:.4rem;
    inline-size:.4rem;
    margin-inline-end:.5rem
  }
  .menu__inner:has(.menu__sites) {
    grid-template-rows:auto 1fr auto auto
  }
  .menu__sites {
    border-block-start:1px solid var(--line);
    gap:.1rem;
    padding-block-start:1rem;
    display:grid
  }
  .menu__sites .label {
    margin-inline-end:0
  }
  .menu__sites a {
    min-block-size:2.75rem;
    font-size:var(--text);
    justify-self:start;
    font-weight:700
  }

  /* Footer: the Sites links under "Elsewhere". */
  .footer__navs {
    align-content:start;
    gap:1.25rem;
    display:grid
  }

  /* Page head of the About and Introduction pages: the reference section head on the dark scheme, clear of the fixed
   * header; the next section brings its own top padding. */
  .pagehead {
    padding-block:calc(var(--header) + clamp(2.5rem, 6vw, 5rem)) clamp(2rem, 5vw, 4rem)
  }
  .pagehead .section-head {
    margin-block-end:0
  }
  .intro__actions {
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem;
    margin-block-start:clamp(1.75rem, 3.5vw, 3rem);
    display:flex
  }
  .intro-body {
    --bg:var(--ink-2);
    padding-block:clamp(3rem, 6vw, 5rem) var(--section)
  }

  /* Introduction placeholders: panels (.window) in a grid, one row per label, the video in a 16:9 frame. */
  .access {
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:1.25rem;
    display:grid
  }
  @media (min-width:48rem) {
    .access {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
  }
  .access__card--explainer {
    grid-column:1/-1
  }
  .access .window__body {
    gap:1rem;
    display:grid
  }
  .access__list {
    display:grid
  }
  .access__row {
    border-block-start:1px solid var(--rule);
    gap:.25rem 1.5rem;
    padding-block:.75rem;
    display:grid
  }
  .access__row:first-child {
    border-block-start:0;
    padding-block-start:0
  }
  @media (min-width:40rem) {
    .access__row {
      grid-template-columns:minmax(8rem,13rem) minmax(0,1fr)
    }
  }
  .access__list dt {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.04em;
    color:var(--fg-2)
  }
  .access__list dd {
    overflow-wrap:anywhere
  }
  .access__secret {
    font-size:var(--text-s)
  }
  .access__todo {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--fg-2)
  }
  .access__note {
    font-size:var(--text-s);
    color:var(--fg-2)
  }
  .access__text p+p {
    margin-block-start:1em
  }
  .access__video {
    inline-size:min(100%,56rem);
    aspect-ratio:16/9;
    border:1px solid var(--rule);
    background:var(--ink);
    place-items:center;
    display:grid;
    overflow:hidden
  }
  .access__video iframe,.access__video video {
    border:0;
    block-size:100%;
    inline-size:100%
  }
  .access__video--empty {
    border:1px dashed var(--signal)
  }
}
@layer components {
  /* Button labels and their icons never wrap, at any width: narrow screens are handled by layout (rows wrap, tab strips
   * wrap, grids stack), not by breaking a label. `.button`, `.filter` are already inline-flex (icon + label). */
  button,.button,.link-button,.filter,[role=button],[role=tab],summary {
    white-space:nowrap
  }
}
@layer sections {
  /* Code tabs: a strip that wraps onto more rows instead of breaking a tab label (the reference stacks two columns). */
  .codebox__tabs {
    flex-wrap:wrap;
    display:flex
  }
  .codebox__tab {
    flex:1 1 auto
  }
  @media (min-width:48rem) {
    .codebox__tab {
      flex:none
    }
  }
  .gate__actions {
    flex-wrap:wrap;
    display:flex
  }
  .gate__actions .button {
    flex:1 1 calc(50% - .25rem);
    min-inline-size:max-content
  }
}

/* ---- WordPress / Elementor adapter. Deliberately UNLAYERED. --------------------------------------------------
 * Elementor's frontend.css is unlayered, so by the cascade rules it beats every layered declaration above
 * regardless of specificity. These rules win the unlayered contest (higher specificity + later order, this file
 * depends on 'elementor-frontend') and then hand the decision back to the layers with `revert-layer`.
 * The seeder adds the `cc` class to every container and widget it creates; add it yourself to anything new. */

/* 1. Containers and widget wrappers: drop Elementor's box model (display:flex, gap, 10px padding, width, flex,
 *    position, transitions, widget margins, max-width) so the reference layout classes on the same element apply.
 *    Specificity (0,4,0) on purpose: Elementor's strongest wrapper rule is (0,3,1). Elementor's per-element
 *    controls still take effect: values set in the editor are written by the plugin on a higher-specificity twin
 *    selector (includes/elementor/class-containers.php: {{WRAPPER}}.e-con.cc.cc; class-widgets.php:
 *    {{WRAPPER}}.cc.cc.cc for the Advanced tab and native wrapper-level Style controls), and the custom widgets'
 *    Style sections address elements inside the wrapper (includes/elementor/class-widget.php, styleParts()).
 *    Custom properties are never reset by `all`, so token overrides written on a wrapper always reach its content. */
.elementor.elementor .e-con.cc,
.elementor.elementor .elementor-widget.cc {
  all:revert-layer
}
.elementor-editor-active .elementor.elementor .elementor-widget.cc,
.elementor-editor-active .elementor.elementor .e-con.cc {
  position:relative /* the editor's hover/selection handles are positioned against the element */
}

/* 2. Widget inner wrappers become transparent to layout (grid gaps reach the paragraphs of a Text Editor). */
body:not(.elementor-editor-active) .elementor .elementor-widget.cc>.elementor-widget-container,
body:not(.elementor-editor-active) .elementor .elementor-widget.cc .elementor-text-editor {
  display:contents
}
.elementor .elementor-widget.cc .elementor-clearfix:after {
  content:none
}

/* 3. A native Heading widget inherits its type from the wrapper, which carries the reference class
 *    (e.g. `quad__title`); Elementor otherwise forces line-height:1 on .elementor-heading-title. */
.elementor .elementor-widget.cc .elementor-heading-title {
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  text-wrap:inherit;
  color:inherit;
  margin:0;
  padding:0
}

/* 4. Elementor removes link underlines inside .elementor; restore the base rule, keep the reference exceptions. */
.elementor a {
  text-decoration-line:underline;
  text-decoration-thickness:1px
}
.elementor a:hover {
  text-decoration-thickness:2px
}
.elementor :is(.button,.site-header__brand,.site-header__nav a,.site-header__gate,.menu__nav a,.gatebar,.file) {
  text-decoration:none
}

/* 5. In the editor preview the inner .elementor-widget-container of a `cc` widget is a real box (on the front end it
 *    is display:contents, rule 2). The Advanced-tab box properties Elementor writes on it are applied to the wrapper
 *    instead (class-widgets.php), so zero them here: the value lands once, on the wrapper, in the editor and on the
 *    front end alike. Nothing is set on that container by default, so this changes no default rendering. */
.elementor-editor-active .elementor.elementor .elementor-widget.cc.cc>.elementor-widget-container {
  margin:0;
  padding:0;
  border:0 none;
  border-radius:0;
  background:none;
  box-shadow:none
}

/* 6. The new link groups keep the reference's underline-free navigation links under .elementor too. */
.elementor :is(.site-header__sites a,.menu__sites a) {
  text-decoration:none
}