/* ---- tokens: dark-first, so bare :root carries the complete dark palette ---- */
  :root {
    /* festool colorway: RAL 7016 anthracite ground, RAL 7035 light grey ink,
       RAL 6018 yellow-green as the single accent */
    --ground:      #2B3034;
    --raised:      #383E42;
    --sunk:        #23272A;
    --rule:        #4A5257;
    --rule-soft:   #333A3E;
    --ink:         #D7D7D7;
    --ink-dim:     #A5ACAF;
    --ink-faint:   #8A9297;
    --streak:      #57A639;
    --streak-soft: #3E7A28;
    --on-streak:   #17200F;
    --shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -12px rgba(0,0,0,.55);
    --plum:          #7A6AA8;
    --bg-plum:       #252038;
    --bg-plum-soft:  #29263B;
    --band-bg:       var(--ground);

    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;

    --measure: 66ch;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --band: clamp(3.5rem, 9vw, 7rem);
  }

  /* light palette: tokens only, and an explicit dark stamp still wins */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --ground:      #E8E9E9;
      --raised:      #F3F4F4;
      --sunk:        #DCDEDE;
      --rule:        #B8BCBD;
      --rule-soft:   #CFD2D2;
      --ink:         #2B3034;
      --ink-dim:     #545C60;
      --ink-faint:   #7C8589;
      --streak:      #35691F;
      --streak-soft: #8FBF78;
      --on-streak:   #FFFFFF;
      --shadow: 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -14px rgba(43,48,52,.26);
      --plum:          #4C3F6E;
      --bg-plum:       #DDD9E6;
      --bg-plum-soft:  #E5E2EC;
    }
  }
  :root[data-theme="light"] {
    --ground:      #E8E9E9;
    --raised:      #F3F4F4;
    --sunk:        #DCDEDE;
    --rule:        #B8BCBD;
    --rule-soft:   #CFD2D2;
    --ink:         #2B3034;
    --ink-dim:     #545C60;
    --ink-faint:   #7C8589;
    --streak:      #35691F;
    --streak-soft: #8FBF78;
    --on-streak:   #FFFFFF;
    --shadow: 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -14px rgba(43,48,52,.26);
    --plum:          #4C3F6E;
    --bg-plum:       #DDD9E6;
    --bg-plum-soft:  #E5E2EC;
  }

  * { box-sizing: border-box; }

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

  .wrap { max-width: 74rem; margin: 0 auto; padding-inline: var(--gutter); }

  /* ---- type: mono carries display and data, sans carries prose only ---- */
  h1, h2, h3, .eyebrow, .fig, code, pre, .num, .brand, .btn, .pair, .label,
  .attrib, .price, .more-tiers, .foot-col h4, .foot-base, .verified, .tagline {
    font-family: var(--mono);
    font-variant-ligatures: none;
  }
  h1, h2, h3 { font-weight: 500; text-wrap: balance; margin: 0; letter-spacing: -.02em; }
  h1 { font-size: clamp(1.75rem, 4.4vw, 3.1rem); line-height: 1.12; }
  h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; }
  h3 { font-size: 1rem; letter-spacing: -.01em; }
  p  { margin: 0; max-width: var(--measure); }

  .eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); }
  .lede { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--ink-dim); }
  .fig { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  a { color: inherit; }
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--streak); outline-offset: 3px; border-radius: 2px;
  }

  /* ---- nav ---- */
  header.nav {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav-in { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; }
  .brand {
    font-size: .95rem; letter-spacing: -.03em; text-decoration: none;
    display: flex; align-items: center; gap: .5rem; margin-right: auto;
  }
  .brand-mark {
    width: 1.05rem; height: 1.05rem; flex: none;
    background: linear-gradient(160deg, var(--streak), var(--streak-soft));
    border-radius: 1px; transform: rotate(-8deg);
    clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%);
  }
  .nav-links { display: flex; gap: 1.35rem; }
  .nav-links a { font-family: var(--mono); font-size: .8rem; color: var(--ink-dim); text-decoration: none; }
  .nav-links a:hover { color: var(--ink); }
  @media (max-width: 880px) { .nav-links { display: none; } }

  .btn {
    font-size: .8rem; padding: .5rem .9rem;
    border: 1px solid var(--rule);
    background: transparent; color: var(--ink);
    text-decoration: none; border-radius: 2px;
    display: inline-block; cursor: pointer;
  }
  .btn:hover { border-color: var(--streak); }
  .btn-solid { background: var(--streak); border-color: var(--streak); color: var(--on-streak); font-weight: 600; }
  .btn-solid:hover { filter: brightness(1.08); }

  /* ---- section scaffolding ---- */
  section { padding-block: var(--band); border-top: 1px solid var(--rule-soft); }
  .stack { display: flex; flex-direction: column; gap: 1.25rem; align-items: start; }
  .stack-center { align-items: center; text-align: center; }
  .stack-center p { margin-inline: auto; }

  /* ---- hero ---- */
  .hero { padding-block: clamp(3rem, 8vw, 5.5rem) var(--band); border-top: 0; }
  .hero h1 { max-width: 20ch; }
  .taglines { display: flex; gap: 1.5rem; flex-wrap: wrap; }
  .tagline { font-size: .8rem; color: var(--ink-dim); display: flex; align-items: center; gap: .5rem; }
  .tagline::before {
    content: ""; width: 1.5rem; height: 2px; flex: none;
    background: linear-gradient(90deg, var(--streak), transparent);
  }
  .etymology {
    font-family: var(--mono); font-size: .8rem; color: var(--ink-faint);
    border-left: 2px solid var(--streak-soft); padding-left: .9rem;
    max-width: 46ch; line-height: 1.6;
  }
  .etymology b { color: var(--ink-dim); font-weight: 500; }

  /* ---- assay card: the streak-test motif carrying the real result ---- */
  .assay-card {
    margin-top: 2.5rem;
    border: 1px solid var(--rule);
    background: var(--raised);
    border-radius: 3px;
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 3vw, 2rem);
    max-width: 46rem; width: 100%;
  }
  .assay-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1.25rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .streaks { display: flex; flex-direction: column; gap: 1.1rem; }
  .streak-row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem; align-items: center; }
  @media (max-width: 620px) {
    .streak-row { grid-template-columns: 1fr auto; }
    .streak-row .bar { grid-column: 1 / -1; order: 3; }
  }
  .streak-row .label { font-size: .75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
  .bar { height: 10px; border-radius: 1px; position: relative; overflow: hidden; background: var(--sunk); }
  .bar::after {
    content: ""; position: absolute; inset: 0;
    transform-origin: left center;
    animation: draw .9s cubic-bezier(.2,.7,.3,1) both;
  }
  .bar-ref::after {
    background: repeating-linear-gradient(90deg, var(--ink-faint) 0 3px, transparent 3px 6px);
    opacity: .5; animation-delay: .1s;
  }
  .bar-new::after {
    background: repeating-linear-gradient(90deg, var(--streak) 0 4px, var(--streak-soft) 4px 7px);
    animation-delay: .28s;
  }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .bar::after { animation: none; } }
  .streak-row .val { font-size: clamp(1rem, 2.4vw, 1.35rem); font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .val-new { color: var(--streak); }
  .assay-foot {
    margin-top: 1.5rem; padding-top: 1.1rem;
    border-top: 1px solid var(--rule-soft);
    font-size: .8rem; color: var(--ink-dim); line-height: 1.55; max-width: none;
  }
  .verified {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--streak);
  }
  .verified::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--streak); }

  /* ---- numbered sequences, used only where order is real ---- */
  .steps {
    display: grid; gap: 1px; background: var(--rule-soft);
    border: 1px solid var(--rule-soft); border-radius: 3px;
    margin-top: 1.25rem; width: 100%;
  }
  .steps-5 { grid-template-columns: repeat(5, 1fr); }
  .steps-4 { grid-template-columns: repeat(4, 1fr); }
  .steps-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .steps-5, .steps-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .steps-5, .steps-4, .steps-3 { grid-template-columns: 1fr; } }
  .step { background: var(--ground); padding: 1.4rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
  .step .num { font-size: .72rem; color: var(--streak); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
  .step p { font-size: .85rem; color: var(--ink-dim); }
  .step .pair { font-size: .72rem; color: var(--ink-faint); letter-spacing: .04em; }

  /* ---- unnumbered property set: properties, not a sequence ---- */
  .props {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px; background: var(--rule-soft);
    border: 1px solid var(--rule-soft); border-radius: 3px;
    margin-top: 1.25rem; width: 100%;
  }
  .prop { background: var(--ground); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .6rem; }
  .prop h3 { color: var(--streak); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
  .prop p { font-size: .875rem; color: var(--ink-dim); }

  /* ---- code ---- */
  pre {
    margin: 0; padding: .85rem 1rem;
    background: var(--sunk); border: 1px solid var(--rule-soft);
    border-radius: 2px; overflow-x: auto;
    font-size: .78rem; line-height: 1.7; color: var(--ink-dim);
  }
  pre .c { color: var(--streak); }

  /* ---- pricing ---- */
  .plans {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem; margin-top: 1.25rem; max-width: 48rem; width: 100%;
  }
  .plan {
    border: 1px solid var(--rule); border-radius: 3px;
    background: var(--raised); padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
  }
  .plan-feat { border-color: var(--streak-soft); }
  .price { font-size: 1.9rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
  .price span { font-size: .8rem; color: var(--ink-faint); letter-spacing: 0; }
  .plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .84rem; color: var(--ink-dim); }
  .plan li { display: flex; gap: .6rem; }
  .plan li::before { content: "·"; color: var(--streak-soft); flex: none; }
  .plan .btn { text-align: center; margin-top: auto; }
  .more-tiers { font-size: .78rem; color: var(--ink-faint); }

  /* ---- quote ---- */
  blockquote { margin: 0; max-width: 40rem; }
  blockquote p { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.45; color: var(--ink); text-wrap: balance; }
  .attrib { font-size: .78rem; color: var(--ink-faint); margin-top: 1rem; }

  .note {
    font-size: .78rem; color: var(--ink-faint); line-height: 1.6;
    border-left: 2px solid var(--rule); padding-left: 1rem; max-width: 60ch;
  }

  /* ---- footer ---- */
  footer { border-top: 1px solid var(--rule-soft); padding-block: 3rem 2.5rem; }
  .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; }
  .foot-col { display: flex; flex-direction: column; gap: .6rem; }
  .foot-col h4 { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 500; }
  .foot-col a { font-size: .85rem; color: var(--ink-dim); text-decoration: none; }
  .foot-col a:hover { color: var(--ink); }
  .foot-base {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .75rem; color: var(--ink-faint);
  }

  /* ---- subpages ---- */
  .page-hero { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); border-top: 0; }
  .page-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); max-width: 26ch; }
  .prose { display: flex; flex-direction: column; gap: 1rem; max-width: 66ch; }
  .prose h2 { font-size: 1.1rem; margin-top: 1.25rem; }
  .prose p, .prose li { color: var(--ink-dim); font-size: .95rem; }
  .prose ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .45rem; }
  .prose li::marker { color: var(--streak-soft); }
  .prose code { font-family: var(--mono); font-size: .85em; color: var(--ink); background: var(--sunk); padding: .08em .35em; border-radius: 2px; }

  .tablewrap { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: 3px; width: 100%; }
  table.roster { border-collapse: collapse; width: 100%; font-size: .85rem; }
  table.roster th {
    font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-faint); text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--rule);
    font-weight: 500;
  }
  table.roster td { padding: .55rem .9rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
  table.roster tr:last-child td { border-bottom: 0; }
  table.roster td:first-child { font-family: var(--mono); color: var(--streak); white-space: nowrap; }
  table.roster td:nth-child(2) { color: var(--ink); }
  table.roster td:last-child { color: var(--ink-dim); }
  .family { margin-top: 1.5rem; width: 100%; display: flex; flex-direction: column; gap: .8rem; }
  .family h2 { font-size: 1rem; }

  /* ---- mobile nav ---- */
  .nav-mobile { display: none; position: relative; }
  @media (max-width: 880px) { .nav-mobile { display: block; } }
  @media (max-width: 620px) { .nav .btn { display: none; } }
  .nav-mobile summary {
    list-style: none; cursor: pointer; font-family: var(--mono); font-size: .8rem;
    color: var(--ink-dim); padding: .4rem .7rem; border: 1px solid var(--rule); border-radius: 2px;
  }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile[open] summary { border-color: var(--streak); color: var(--ink); }
  .nav-mobile .menu {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
    background: var(--raised); border: 1px solid var(--rule); border-radius: 3px;
    display: flex; flex-direction: column; gap: .1rem; padding: .5rem; min-width: 12rem;
    box-shadow: var(--shadow);
  }
  .nav-mobile .menu a {
    font-family: var(--mono); font-size: .85rem; color: var(--ink-dim);
    text-decoration: none; padding: .45rem .6rem; border-radius: 2px;
  }
  .nav-mobile .menu a:hover { color: var(--ink); background: var(--sunk); }
  .nav-mobile .menu hr { border: 0; border-top: 1px solid var(--rule-soft); margin: .3rem 0; width: 100%; }

  /* ---- console form ---- */
  #auto-form input[type=text], #auto-form select {
    width: 100%; padding: .6rem .75rem; background: var(--sunk);
    border: 1px solid var(--rule); color: var(--ink); border-radius: 2px;
    font-family: var(--mono); font-size: .85rem;
  }
  #auto-form input[type=text]:focus, #auto-form select:focus {
    outline: 2px solid var(--streak); outline-offset: 1px;
  }
  #auto-form label { margin-top: .25rem; }
  #auto-report table { border-collapse: collapse; font-size: .78rem; width: 100%; }
  #auto-report td, #auto-report th {
    border: 1px solid var(--rule-soft); padding: .4rem .7rem; text-align: left;
  }
  #auto-report th {
    color: var(--ink-faint); text-transform: uppercase; font-size: .65rem;
    letter-spacing: .1em; font-family: var(--mono); font-weight: 500;
  }
  #auto-report h2 { font-size: .95rem; margin-top: 1.25rem; }
  #auto-report .ok { color: var(--streak); font-family: var(--mono); }
  #auto-report .bad { color: #E07A5F; font-family: var(--mono); }
  #engine-status.live { border-left-color: var(--streak); color: var(--ink-dim); }

  /* ---- plum ambience and scroll-shifted grounds ---- */
  html { scroll-behavior: smooth; }
  body { transition: background 1s ease; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body { transition: none; }
  }
  ::selection { background: var(--plum); color: #F4F2F8; }
  .etymology { border-left-color: var(--plum); }

  /* ---- hero marquee: scrolling rows of digits and operators ---- */
  .hero { position: relative; overflow: hidden; }
  .hero .wrap { position: relative; z-index: 1; }
  .hero-marquee { position: relative; width: 100%; height: clamp(240px, 36vh, 400px); margin-top: .75rem; }
  .hero-marquee canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ---- band edge resolve: the band's color arrives as staggered bars ---- */
  .band-purple, .band-light { position: relative; }
  .band-purple { --band-bg: #281A70; }
  .band-light { --band-bg: #D7D7D7; }
  .band-edge { position: absolute; left: 0; right: 0; height: 110px; pointer-events: none; z-index: 5; }
  .band-edge-top { top: -110px; }
  .band-edge div { position: absolute; background: var(--band-bg); opacity: 0; }

  /* ---- nav scroll progress and active section ---- */
  .nav-progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--streak), var(--plum));
  }
  .nav-links a.active { color: var(--streak); }

  /* ---- interaction states ---- */
  .prop, .step, .plan { transition: border-color .3s ease, background .3s ease; }
  .prop:hover, .step:hover { background: color-mix(in srgb, var(--raised) 60%, var(--ground)); }
  .plan:hover { border-color: var(--plum); }

  /* ---- proving ground cases ---- */
  .case {
    border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--raised);
    padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: .8rem;
    width: 100%; max-width: 52rem;
  }
  .case h2 { font-size: 1.05rem; }
  .case .stats { display: flex; gap: 2rem; flex-wrap: wrap; }
  .case .stat span { display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .12em; color: var(--ink-faint); font-family: var(--mono); }
  .case .stat b { font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 1.15rem; font-weight: 500; color: var(--streak); }
  .case p { font-size: .9rem; color: var(--ink-dim); max-width: none; }
  .case .how { font-size: .78rem; color: var(--ink-faint); border-left: 2px solid var(--plum);
    padding-left: .9rem; line-height: 1.6; }

  /* ---- monolayer-scale hero ---- */
  .hero h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.08; max-width: 24ch; }
  .taglines { width: 100%; max-width: none; justify-content: space-between; }
  .tagline-c::before { display: none; }
  .tagline-c { color: var(--ink-faint); }

  /* ---- full-bleed color bands with locally inverted tokens ----
     Components inside read the same custom properties, so redefining them on
     the band restyles everything within it without touching a single rule. */
  /* Festool deep blue-purple: RAL 5004 black-blue carried toward its violet reading */
  .band-purple {
    --ground:    #281A70;
    --raised:    #322280;
    --sunk:      #1F1460;
    --rule:      #4A3A9E;
    --rule-soft: #3A2B90;
    --ink:       #EFEBFA;
    --ink-dim:   #CFC7EF;
    --ink-faint: #A79BDF;
    --streak:    #8FE563;
    --streak-soft: #57A639;
    --on-streak: #17200F;
    background: #281A70;
    border-top: 0;
  }
  .band-light {
    --ground:    #D7D7D7;
    --raised:    #E2E4E3;
    --sunk:      #CBCECD;
    --rule:      #B2B6B6;
    --rule-soft: #C4C8C8;
    --ink:       #1A1E1F;
    --ink-dim:   #4E5654;
    --ink-faint: #6E777B;
    --streak:    #35691F;
    --streak-soft: #57A639;
    --on-streak: #FFFFFF;
    background: #D7D7D7;
    border-top: 0;
  }