/*
 * Landing-page styling for the CoolMS product site.
 *
 * Ported verbatim from `docs/overview/landing.html`, which was authored as a
 * standalone page. Only the surrounding <style> tag was dropped; every rule,
 * custom property and media query below is the designer's.
 *
 * ⚠️ This sheet OWNS the home page and is not loaded anywhere else. It defines
 * its own `body`, `.btn`, `.lead`, `.eyebrow` and `.wrap`, all of which the
 * theme's `partials/styles.html.dtmpl` also defines with a different palette
 * (indigo/violet against this sheet's navy/amber). Loading both would leave the
 * winner to source order rather than to a decision, so `pages/home.html.dtmpl`
 * fills the base layout's `styles` slot with THIS sheet instead of the theme's.
 */

/* Palette sourced from the product itself: navy #1A2332 is the admin sidebar
     background; amber #F5A623 is the admin's existing accent. --brand is the
     bright amber for FILLS on dark/coloured grounds; --accent is the deepened
     amber that stays legible as TEXT on light grounds. */
  :root{
    --band-bg:#1A2332; --band-ink:#EEF2F8; --band-muted:#95A3B8; --band-hair:#2E3B4D;
  }
  /* Guarded, so an explicit light choice wins on a dark system without needing
     a later block to out-order the media query -- the shape the shared token
     set uses, applied to the band tokens that stayed behind. The
      block this replaces existed only to compensate for
     an unguarded query, and with the guard it has nothing to do. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --band-bg:#070C13; --band-ink:#EEF2F8; --band-muted:#8B99AD; --band-hair:#1C2531;
    }
  }
  :root[data-theme="dark"]{
    --band-bg:#070C13; --band-ink:#EEF2F8; --band-muted:#8B99AD; --band-hair:#1C2531;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  /* The header is sticky and 67px tall, so an un-offset anchor jump parks the
     target's top rule underneath it. Clear the header plus a little air. */
  [id]{scroll-margin-top:84px}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  /* ⚠️ NO `overflow-x` HERE, and it is the sticky header that pays if one comes
     back. This rule carried `overflow-x:hidden` and it was inert for as long as
     nothing else clipped: overflow on `body` alone PROPAGATES to the viewport
     instead of acting locally. `pages/landing.html.dtmpl` then added
     `html{overflow-x:clip}` to kill the full-bleed scrollbar -- correctly, and
     its comment even says `hidden` would "make a scroll container and break the
     sticky header".

     Adding it to the root is what ENDED the propagation. From that commit on,
     `body`'s own rule started acting locally, and because a non-visible axis
     forces the other from `visible` to `auto`, `body` computed
     `overflow:hidden auto` -- a scroll container. `.site-header` then stuck to
     THAT scrollport rather than the viewport, so it scrolled away: measured
     y=-846 at scrollY=846 while `position` still read `sticky`.

     ⚠️ And REMOVING it outright is wrong too -- measured, after trying it. The
     root rule alone did not hold: the full-bleed band still escaped to
     `left:-16` and the page became scrollable by 8px. `body` was doing real
     clipping; it was the SCROLL CONTAINER that came with `hidden` that broke
     the header, not the clipping.

     `clip` is the value that separates the two. It clips exactly as `hidden`
     does, creates no scroll container, and -- unlike `hidden` -- does not force
     the other axis from `visible` to `auto`. So `body` computes `clip visible`,
     the header sticks to the viewport, and the band is still cut at the edge.
     Same reasoning `pages/landing.html.dtmpl` gives for the root rule, applied
     to the element that actually contains the overflow. */
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:clip;
  }
  a{color:inherit; text-decoration:none}
  ::selection{background:var(--accent-soft)}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
  .eyebrow{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent); margin:0 0 18px; font-weight:600;
  }
  .eyebrow .dim{color:var(--faint)}

  /* ---------- header ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--hair);
  }
  .nav{display:flex; align-items:center; gap:28px; height:66px}
  .brand{display:flex; flex-direction:column; line-height:1; margin-right:6px}
  .wordmark{font-weight:800; font-size:1.28rem; letter-spacing:-.03em}
  .wordmark .bang{color:var(--accent); padding:0 .01em}
  .brand small{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint); margin-top:5px}
  .nav-links{display:flex; gap:22px; margin-left:auto}
  .nav-links a{font-family:var(--mono); font-size:.82rem; color:var(--muted);
    padding:6px 0; border-bottom:1px solid transparent; transition:color .18s,border-color .18s}
  .nav-links a:hover{color:var(--ink); border-color:var(--accent)}
  .btn{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
    font-size:.82rem; font-weight:600; letter-spacing:.01em; line-height:1.6;
    padding:10px 16px; border-radius:9px; cursor:pointer; border:1px solid transparent;
    transition:transform .15s, background .18s, border-color .18s, color .18s;
  }
  /* ⚠️ THE BOOTSTRAP VARIABLES, NOT JUST `background`. `.btn-primary` is
     BOOTSTRAP's class, and Bootstrap 5.3 drives every state through custom
     properties: `.btn:active` reads `--bs-btn-active-bg`, the focus ring reads
     `--bs-btn-focus-shadow-rgb`. Overriding only `background` and `:hover`
     leaves those pointing at Bootstrap's own palette, so the button was amber
     at rest and #0a58ca the moment it was pressed. Measured on the live button:
     `--bs-btn-active-bg: #0a58ca`, `--bs-btn-bg: #0d6efd`,
     `--bs-btn-focus-shadow-rgb: 49,132,253`.

     Setting the variables fixes every state at once -- hover, active, focus and
     disabled -- instead of chasing them one selector at a time, which is also
     why the `:hover` rule below can stay a one-liner rather than growing a
     `:active` twin. `.btn-ghost` needs none of this: it is the design's own
     class, not a Bootstrap variant, so it carries no `--bs-btn-*` at all.

     ⚠️ The focus ring is an rgb TRIPLE because that is the shape Bootstrap
     wants, so it cannot be `var(--brand)`. It must track `--brand` by hand. */
  .btn-primary{
    --bs-btn-bg:var(--brand); --bs-btn-color:var(--navy); --bs-btn-border-color:transparent;
    --bs-btn-hover-bg:var(--brand-deep); --bs-btn-hover-color:var(--navy);
    --bs-btn-hover-border-color:transparent;
    --bs-btn-active-bg:var(--brand-deep); --bs-btn-active-color:var(--navy);
    --bs-btn-active-border-color:transparent;
    --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-color:var(--navy);
    --bs-btn-disabled-border-color:transparent;
    /* #F5A623 -- keep in step with `--brand`. */
    --bs-btn-focus-shadow-rgb:245,166,35;
    background:var(--brand); color:var(--navy);
  }
  .btn-primary:hover{background:var(--brand-deep); transform:translateY(-1px)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--hair)}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
  .nav .btn{padding:9px 15px}
  .nav-cta{margin-left:4px}

  /* ---------- mobile menu ---------- */
  .nav-toggle{
    display:none; margin-left:6px; width:40px; height:40px; padding:0;
    align-items:center; justify-content:center; flex-direction:column; gap:4px;
    background:transparent; border:1px solid var(--hair); border-radius:9px; cursor:pointer;
  }
  .nav-toggle i{display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px;
    transition:transform .2s, opacity .15s}
  .nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .mobile-nav{display:none; border-top:1px solid var(--hair); background:var(--bg)}
  .mobile-nav a{
    display:block; padding:13px 0; font-family:var(--mono); font-size:.9rem; color:var(--muted);
    border-bottom:1px solid var(--hair);
  }
  .mobile-nav a:last-child{border-bottom:none}
  .mobile-nav a:hover{color:var(--accent)}

  /* ---------- hero ---------- */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--hair)}
  .hero::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:radial-gradient(var(--grid) 1.2px, transparent 1.2px);
    background-size:26px 26px; mask-image:linear-gradient(180deg,#000 40%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);
  }

  /* ⚠️ The landing-block system's own rules are NOT here. The dotted texture
     the block page draws, and the suppression of the hero block's copy of it,
     are declared in {css} blocks inside the templates that own them --
     pages/landing.html.dtmpl and partials/blocks/hero.html.dtmpl. They were
     here for two commits and it was the wrong place: a rule that exists only
     because of one template belongs in that template, where deleting the
     template deletes the rule.

     What stays in this file is the design LANGUAGE -- .band, .cap, .window,
     the buttons -- which the hand-written pages/home.html.dtmpl and the block
     partials both spend. A shared vocabulary is a theme asset; a single
     template's layout is not. */
  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.02fr 1fr; gap:56px; align-items:center;
    /* padding-block, NOT the padding shorthand: this element also carries
       .wrap, whose `padding:0 28px` a shorthand here would silently reset to
       zero — the gutter then vanishes between 561px and 1236px (below 561 the
       max-width:560 block re-declares .wrap and accidentally restores it). */
    padding-block:76px 84px;
  }
  h1{
    font-size:clamp(2.4rem,5.1vw,3.95rem); line-height:1.02; font-weight:800;
    letter-spacing:-.025em; margin:0 0 22px; text-wrap:balance;
  }
  h1 .run{color:var(--accent)}
  .lead{font-size:1.16rem; font-weight:400; color:var(--muted); margin:0 0 30px; max-width:36em}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px}
  .meta-line{font-family:var(--mono); font-size:.74rem; color:var(--faint); letter-spacing:.04em; margin:.74rem 0}
  .meta-line b{color:var(--muted); font-weight:600}

  /* ---------- designer window ---------- */
  .window{
    background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius);
    box-shadow:0 24px 60px -30px rgba(22,32,46,.30), 0 2px 0 var(--hair);
    overflow:hidden;
  }
  .win-bar{
    display:flex; align-items:center; gap:12px; padding:11px 14px;
    border-bottom:1px solid var(--hair); background:var(--panel-2);
  }
  .dots{display:flex; gap:7px}
  .dots i{width:11px; height:11px; border-radius:50%; background:var(--wire); opacity:.55}
  .win-file{font-family:var(--mono); font-size:.76rem; color:var(--muted)}
  .win-badge{margin-left:auto; font-family:var(--mono); font-size:.68rem;
    color:var(--good); display:flex; align-items:center; gap:6px; letter-spacing:.04em}
  .win-badge i{width:7px; height:7px; border-radius:50%; background:var(--good);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%, transparent)}
  .win-canvas{
    position:relative; padding:8px 10px 4px;
    background-image:radial-gradient(var(--grid) 1px, transparent 1px);
    background-size:22px 22px; background-position:6px 6px;
  }
  .win-canvas svg{display:block; width:100%; height:auto}

  /* ---------- browser-style tabs in the designer window ----------
     ⚠️ CSS-only: three radios sit as the FIRST children of `.window`, the
     labels live in the title bar, and `:checked ~` reaches the panels and the
     footers. The radios must be siblings of `.win-canvas` for that to work —
     moving them inside `.win-bar` silently breaks every panel, because `~`
     does not cross a parent. No script, so nothing here can be stopped by a CSP
     or by a bundle failing to load. */
  .flow-radio{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
  .win-tab{
    font-family:var(--mono); font-size:.72rem; color:var(--faint); cursor:pointer;
    padding:5px 11px 6px; border-radius:8px 8px 0 0; border:1px solid transparent;
    border-bottom:none; margin-bottom:-12px; user-select:none; white-space:nowrap;
    transition:color .15s ease, background .15s ease;
  }
  .win-tab:hover{color:var(--muted)}
  /* The selected tab joins the canvas below it — the whole point of the metaphor. */
  #hero-flow-docs:checked ~ .win-bar label[for="hero-flow-docs"],
  #hero-flow-reg:checked  ~ .win-bar label[for="hero-flow-reg"],
  #hero-flow-lead:checked ~ .win-bar label[for="hero-flow-lead"]{
    color:var(--ink); background:var(--panel); border-color:var(--hair);
  }
  /* ⚠️ `.window > .win-foot`, not `.win-foot`. The original `.win-foot{display:flex}`
     is declared LATER in this file, so at equal specificity it wins and all three
     footers render at once — which is exactly what happened. The child combinator
     buys the one point needed, and the `:checked` rules carry an id so they still
     beat it. */
  .flow-panel{display:none}
  .window > .win-foot{display:none}
  /* ⚠️ `display:flex` + `height:100%`, NOT `display:block`. The height chain is
     `.win-canvas` → `.flow-panel` → `svg`, and a percentage height resolves only
     against a parent with a definite height. Setting it on the canvas and the
     svg while leaving the panel at `auto` breaks the chain in the middle: the
     svg falls back to its own intrinsic sizing, so the diagram rendered small
     AND at a different size on every tab — which looked like two separate bugs
     (too small, width jitter) and was one. */
  #hero-flow-docs:checked ~ .win-canvas .flow-docs,
  #hero-flow-reg:checked  ~ .win-canvas .flow-reg,
  #hero-flow-lead:checked ~ .win-canvas .flow-lead{display:flex; flex:1 1 auto; min-width:0; height:100%}
  #hero-flow-docs:checked ~ .foot-docs,
  #hero-flow-reg:checked  ~ .foot-reg,
  #hero-flow-lead:checked ~ .foot-lead{display:flex}
  /* ⚠️ Keyboard reachability is not optional here: the label is the only thing
     a pointer can hit, so without this the tabs are invisible to focus. */
  .flow-radio:focus-visible ~ .win-bar label[for="hero-flow-docs"],
  .flow-radio:focus-visible ~ .win-bar label[for="hero-flow-reg"],
  .flow-radio:focus-visible ~ .win-bar label[for="hero-flow-lead"]{outline:2px solid var(--brand); outline-offset:2px}

  /* ⚠️ THE WHOLE WINDOW IS A FIXED HEIGHT, not just the canvas.
     Pinning the SVG alone was not enough: the footers carry different numbers of
     facts, so the `identity.verify` one wrapped to two lines while the others sat
     on one, and the box grew by a line on that tab. Both halves have to be fixed
     or switching tabs still jitters — the canvas because the three diagrams have
     different aspect ratios, the footer because it has different content. */
  /* ⚠️ SCOPED to the tabbed panel. Unscoped it matched every window on
     the page, including the single-diagram block, which then rendered its
     canvas at 18px/14px against the 8px/10px/4px the design uses, and grew
     the window by 25px. The fixed height is a TAB requirement -- three
     diagrams with different aspect ratios must not resize the box when the
     tab changes -- and a block showing one diagram has no such problem to
     solve. */
  .ptabs .win-canvas{height:330px; padding:18px 14px; display:flex; align-items:stretch}
  /* `align-items:stretch` on the canvas and `height:100%` here, so every tab's
     drawing area is the SAME box — the diagrams then differ only by how their
     own aspect ratio fits inside it, never by how big the box is. */
  .ptabs .win-canvas .bpmn-capture{display:block; width:100%; height:100%}
  /* Room to breathe above and below the two-row diagram, which is the tallest. */
  /* ⚠️ `min-width:0` IS THE WIDTH FIX, and it belongs on the GRID ITEM.
     A grid item defaults to `min-width:auto`, meaning it refuses to shrink below
     its own min-content width -- and `white-space:nowrap` below makes the footer
     one unbreakable string. So the tab with the longest footer widened the whole
     hero column, and switching tabs moved the window's WIDTH. `min-width:0` lets
     the column follow the `1.02fr 1fr` ratio instead of the current tab's text.
     ⚠️ It was invisible in a fixed-width harness, which is why the first
     measurement said zero jitter: the harness could not express the constraint
     that was broken. */
  .hero-grid > .hero-visual, .hero-grid > .hero-copy{min-width:0}
  /* nowrap keeps the footer on ONE line (its wrapping was the height jitter);
     overflow:hidden stops that same nowrap from dictating the window's width. */
  .window > .win-foot{min-height:40px; white-space:nowrap; overflow:hidden; gap:14px}

  /* ---------- the BPMN capture ----------
     ⚠️ These class names belong to the ADMIN's designer, not to this site. The
     hero markup is the designer's own output taken verbatim from a running
     admin, so its classes come with it; only the colours are re-bound here.

     Why re-bound at all: the designer's palette is fixed light (white fills,
     #16a34a / #dc2626 events, #1f2937 strokes) and this page themes light AND
     dark. A verbatim paste would put a white diagram on a #141C27 panel. The
     SHAPES are untouched — geometry, ids, labels and layout are exactly what
     the designer drew.

     Light values below are the designer's own, read from getComputedStyle on
     the running canvas rather than eyeballed. */
  .bpmn-capture{--bpmn-fill:#fff; --bpmn-line:#374151; --bpmn-node:#1f2937;
    --bpmn-start:#16a34a; --bpmn-end:#dc2626; --bpmn-ink:#111827}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .bpmn-capture{
      --bpmn-fill:var(--panel-2); --bpmn-line:var(--muted); --bpmn-node:var(--faint);
      --bpmn-start:var(--good); --bpmn-end:#f0716b; --bpmn-ink:var(--ink)}
  }
  /* ⚠️ Repeated for the explicit toggle, because a `prefers-color-scheme` block
     alone leaves the diagram light when someone picks dark on a light OS —
     the two selectors match different conditions and neither implies the other. */
  :root[data-theme="dark"] .bpmn-capture{
    --bpmn-fill:var(--panel-2); --bpmn-line:var(--muted); --bpmn-node:var(--faint);
    --bpmn-start:var(--good); --bpmn-end:#f0716b; --bpmn-ink:var(--ink)}

  .bpmn-capture .coolms-designer__bpmn-flow-path{fill:none; stroke:var(--bpmn-line); stroke-width:2}
  .bpmn-capture .coolms-designer__bpmn-arrowhead path{fill:var(--bpmn-line); stroke:none}
  .bpmn-capture .coolms-designer__bpmn-task rect{fill:var(--bpmn-fill); stroke:var(--bpmn-node); stroke-width:2}
  .bpmn-capture .coolms-designer__bpmn-start-event circle{fill:var(--bpmn-fill); stroke:var(--bpmn-start); stroke-width:2}
  .bpmn-capture .coolms-designer__bpmn-end-event circle{fill:var(--bpmn-fill); stroke:var(--bpmn-end); stroke-width:4}
  .bpmn-capture .coolms-designer__bpmn-label{fill:var(--bpmn-ink); font-size:12px; font-weight:500;
    font-family:inherit}
  /* The gateway: diamond, its X marker, and the condition expression on the
     outgoing flow — all shapes the designer draws, none of them invented. */
  .bpmn-capture .coolms-designer__bpmn-gateway polygon{fill:var(--bpmn-fill); stroke:var(--brand); stroke-width:2}
  .bpmn-capture .coolms-designer__bpmn-gateway-marker{fill:none; stroke:var(--brand); stroke-width:2}
  .bpmn-capture .coolms-designer__bpmn-flow-condition{fill:var(--bpmn-line); font-family:var(--mono); font-size:10px}
  .win-foot{display:flex; align-items:center; gap:16px; padding:9px 14px;
    border-top:1px solid var(--hair); font-family:var(--mono); font-size:.7rem; color:var(--faint)}
  .win-foot .sp{margin-left:auto}

  /* svg diagram theming */
  .node{fill:var(--panel); stroke:var(--wire); stroke-width:1.5}
  .ev-thin{fill:var(--panel); stroke:var(--wire); stroke-width:1.6}
  .ev-thick{fill:var(--panel); stroke:var(--ink); stroke-width:3}
  .gw{fill:var(--panel); stroke:var(--wire); stroke-width:1.6}
  .wire{fill:none; stroke:var(--wire); stroke-width:1.5}
  .wire-dash{fill:none; stroke:var(--wire); stroke-width:1.4; stroke-dasharray:4 4}
  .arw{fill:var(--wire)}
  .glyph{fill:none; stroke:var(--muted); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
  .glyph-f{fill:var(--muted)}
  .nlabel{fill:var(--ink); font-family:var(--mono); font-size:11px; font-weight:500}
  .ntype{fill:var(--faint); font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase}
  .token{fill:var(--brand); stroke:var(--panel); stroke-width:2}
  .token-halo{fill:var(--brand); opacity:.18}
  .token-rest{display:none}
  @media (prefers-reduced-motion:reduce){
    .token-run{display:none} .token-rest{display:block}
  }

  /* ---------- reposition band ---------- */
  /* ⚠️ FULL-BLEED ESCAPE. The landing page puts every block inside `.wrap`,
     because most blocks want the page's measure -- but a band is a band
     BECAUSE it runs edge to edge, and inside a 1180px container it reads as a
     dark card with margins. Measured after the conversion: 1124px wide at
     x=454 in a 2048px viewport, where the hand-written page went to both
     edges.

     `margin-inline: calc(50% - 50vw)` widens it to the viewport; the matching
     padding puts the TEXT back on the container's measure, so the colour
     bleeds and the words do not. This is the block-level answer to "some
     sections are contained and some are not" -- the container stays one
     decision, and a section that wants out says so. */
  .band{
    background:var(--band-bg); color:var(--band-ink); position:relative;
    /* ⚠️ The escape, and NO padding-inline with it. The band has to reach both
       edges from inside `.landing-page.wrap`, and the inner element restores
       the container itself by carrying `.wrap` -- which is what the
       hand-written page does and what this stylesheet was written for.
       Re-padding here instead put the band's content at x=90 w=1084 against
       the design's x=42 w=1180: measured, and visible as a heading that starts
       further in than every other section on the page. */
    margin-inline:calc(50% - 50vw);
  }
  .band .eyebrow{color:var(--brand)}
  .band-inner{padding-block:82px 78px}   /* also .wrap — see .hero-grid note */
  /* ⚠️ `color` is DECLARED here, not inherited from `.band`, and it has to be.
     This stylesheet was written for `pages/home.html.dtmpl`, which is a
     standalone page loading nothing else. The block-rendered landing page goes
     through `layouts/site.html.dtmpl`, which also carries the theme's inline
     base -- and that base has `h1,h2,h3,h4,h5,h6{color:var(--cms-ink)}`.
     Inheritance loses to ANY matching rule, however weak, so `.band`'s own
     foreground never reached its heading and the title rendered near-black on
     the near-black band. Measured: rgb(15,23,42) on rgb(26,35,50).
     Every dark surface below declares its foreground for the same reason. */
  .band h2{
    color:var(--band-ink);
    font-size:clamp(1.8rem,3.4vw,2.85rem); line-height:1.12; font-weight:780;
    letter-spacing:-.02em; margin:0 0 20px; max-width:20ch; text-wrap:balance;
  }
  .band h2 .legacy{
    font-family:var(--mono); font-size:.8em; font-weight:600; letter-spacing:-.01em;
    color:var(--band-ink); white-space:nowrap;
    border:1px solid var(--band-hair); border-radius:var(--cms-radius-md, 8px); padding:.12em .4em;
    background:color-mix(in srgb, var(--band-ink) 6%, transparent);
  }
  .band h2 .legacy .sfx{color:var(--brand)}
  /* ⚠️ The ghost button is defined for a LIGHT surface -- the inline base gives
     it `color:var(--cms-ink)`, which is correct in the hero and invisible here.
     Measured on the band before this rule: 1.04:1. The block-rendered call to
     action puts a secondary button on the dark band, which the hand-written
     page never did, so this pairing is new and needed saying. */
  .band .btn-ghost{color:var(--band-ink); border:1px solid var(--band-hair)}
  .band .btn-ghost:hover{background:color-mix(in srgb, var(--band-ink) 12%, transparent); color:var(--band-ink)}
  .band p{color:var(--band-muted); font-size:1.1rem; max-width:44em; margin:0 0 34px}
  .band p b{color:var(--band-ink); font-weight:600}
  .chips{display:flex; flex-wrap:wrap; gap:10px}
  .chip{
    font-family:var(--mono); font-size:.76rem; color:var(--band-ink);
    border:1px solid var(--band-hair); border-radius:7px; padding:7px 12px;
    background:color-mix(in srgb,var(--band-ink) 5%, transparent);
  }
  .chip::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--brand); margin-right:8px; vertical-align:middle}

  /* ---------- section frame ---------- */
  .section{padding:88px 0; border-bottom:1px solid var(--hair)}
  /* The measure lives on the TEXT, not on the block — otherwise anything else
     placed in the head (the audience picker) inherits a ~52ch cap and wraps.
     `ch` resolves against the rendered font, so that cap lands in a different
     place per browser: it fit in one render and wrapped in another. */
  .section-head{margin-bottom:44px}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.1; font-weight:780;
    letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
  .section-head p{color:var(--muted); font-size:1.08rem; margin:0; max-width:44em}
  .section-head h2, .section-head > p{max-width:52ch}

  /* ---------- lanes ---------- */
  .lanes{display:flex; flex-direction:column; gap:0; border:1px solid var(--hair);
    border-radius:var(--radius); overflow:hidden}
  .lane{display:grid; grid-template-columns:64px 1fr; align-items:stretch}
  .lane+.lane{border-top:1px solid var(--hair)}
  .lane-tab{
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-2); border-right:1px solid var(--hair);
  }
  .lane-tab span{
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); font-weight:600;
  }
  .lane-body{padding:30px 32px; display:grid; grid-template-columns:1fr 1.35fr; gap:28px; align-items:start}
  .lane-lead h3{font-size:1.34rem; font-weight:750; letter-spacing:-.015em; margin:0 0 8px; text-wrap:balance}
  .lane-lead .who{font-family:var(--mono); font-size:.72rem; color:var(--accent);
    text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px}
  .lane-lead a{font-family:var(--mono); font-size:.82rem; color:var(--accent); font-weight:600;
    display:inline-flex; gap:6px; align-items:center; margin-top:6px}
  .lane-lead a:hover{gap:10px}
  .lane-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
  .lane-list li{position:relative; padding-left:22px; color:var(--muted); font-size:.98rem}
  .lane-list li::before{content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px;
    border:1.5px solid var(--wire); border-radius:2px; transform:rotate(45deg)}
  .lane-list li b{color:var(--ink); font-weight:650}

  /* ---------- per-lane proof panels ---------- */
  /* Grid and flex children default to min-width:auto, i.e. they refuse to
     shrink below their min-content width. The proof panels hold a 440px table,
     a 460px list and white-space:pre blocks, so that floor propagated up and
     forced the whole lane wider than a phone viewport — every line of prose in
     the lane laid out off-screen and got clipped by body{overflow-x:hidden}.
     min-width:0 lets the track shrink again so .proof-body's own
     overflow-x:auto is what actually absorbs the wide content. */
  .lane-body, .lane-body > *, .lane-list, .lane-list li,
  .cap-group, .caps-grid, .cap, .proof, .proof-body{min-width:0}
  .lane-proof{grid-column:1 / -1}
  .proof{border:1px solid var(--hair); border-radius:11px; overflow:hidden; background:var(--panel)}
  .proof-bar{
    display:flex; align-items:center; gap:10px; padding:9px 13px;
    border-bottom:1px solid var(--hair); background:var(--panel-2);
    font-family:var(--mono); font-size:.72rem; color:var(--muted);
  }
  .proof-bar .tag{margin-left:auto; color:var(--faint)}
  .proof-body{padding:14px 16px; overflow-x:auto}

  /* vfs listing */
  pre.vfs{
    margin:0; font-family:var(--mono); font-size:.79rem; line-height:1.85;
    color:var(--muted); white-space:pre;
  }
  pre.vfs .m{color:var(--accent)}
  pre.vfs .n{color:var(--ink); font-weight:600}

  /* dmn decision table */
  table.dmn{border-collapse:collapse; font-size:.84rem; min-width:440px; width:100%}
  table.dmn th, table.dmn td{padding:7px 12px; text-align:left; border-bottom:1px solid var(--hair)}
  table.dmn thead tr:first-child th{
    font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
    color:var(--faint); font-weight:600; padding-bottom:4px; border-bottom:none;
  }
  table.dmn thead tr:first-child th.out{color:var(--accent)}
  table.dmn thead tr:last-child th{font-size:.78rem; font-weight:650; color:var(--ink)}
  table.dmn td{color:var(--muted); font-variant-numeric:tabular-nums}
  table.dmn tbody tr:last-child td{border-bottom:none}
  table.dmn tr.hit td{background:var(--accent-soft); color:var(--ink)}
  table.dmn tr.hit td:first-child{box-shadow:inset 3px 0 0 var(--brand)}

  /* omnichannel lead queue */
  ul.leadq{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; min-width:460px}
  ul.leadq li{display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--hair); font-size:.87rem}
  ul.leadq li:last-child{border-bottom:none}
  .ch{
    font-family:var(--mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
    padding:3px 7px; border-radius:5px; border:1px solid var(--hair); color:var(--muted);
    min-width:52px; text-align:center; flex:none;
  }
  ul.leadq b{color:var(--ink); font-weight:650; flex:none}
  .snip{color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
  .pill{
    font-family:var(--mono); font-size:.65rem; padding:3px 8px; border-radius:20px; flex:none;
    background:var(--panel-2); color:var(--muted); border:1px solid var(--hair);
  }
  .pill.new{background:var(--accent-soft); color:var(--accent); border-color:transparent; font-weight:600}

  /* ---------- capabilities ---------- */
  .caps-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px}
  .cap{
    background:var(--panel); border:1px solid var(--hair); border-radius:11px;
    padding:18px 18px 20px; transition:border-color .18s, transform .18s, box-shadow .18s;
  }
  .cap:hover{border-color:var(--brand); transform:translateY(-3px);
    box-shadow:0 16px 34px -22px rgba(22,32,46,.42)}
  .cap .id{font-family:var(--mono); font-size:.7rem; color:var(--accent);
    letter-spacing:.08em; text-transform:uppercase; font-weight:600}
  .cap h4{margin:9px 0 7px; font-size:1.04rem; font-weight:700; letter-spacing:-.01em}
  .cap p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.5}

  /* ---------- audience picker ---------- */
  .picker{display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:26px}
  .picker .lbl{font-family:var(--mono); font-size:.76rem; color:var(--faint); margin-right:4px}
  .picker a{
    font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--muted);
    border:1px solid var(--hair); border-radius:var(--cms-radius-md, 8px); padding:8px 14px; background:var(--panel);
    transition:color .18s, border-color .18s, background .18s, transform .15s;
  }
  .picker a:hover{color:var(--navy); background:var(--brand); border-color:var(--brand); transform:translateY(-1px)}
  @media (prefers-color-scheme:dark){ .picker a:hover{color:var(--navy)} }

  /* ---------- capability groups ---------- */
  .cap-group+.cap-group{margin-top:38px}
  .cap-group-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px}
  .cap-group-head h3{
    font-size:1.06rem; font-weight:750; letter-spacing:-.01em; margin:0; flex:none;
  }
  .cap-group-head .rule{flex:1; height:1px; background:var(--hair)}
  .cap-group-head .note{font-family:var(--mono); font-size:.72rem; color:var(--faint); flex:none}
  .cap-group.substrate .cap-group-head h3{color:var(--accent)}

  /* ---------- terminal proof ---------- */
  pre.term{
    margin:0; font-family:var(--mono); font-size:.78rem; line-height:1.8;
    color:var(--muted); white-space:pre;
  }
  pre.term .cmd{color:var(--ink); font-weight:600}
  pre.term .ok{color:var(--good)}
  pre.term .bad{color:var(--accent-strong); font-weight:600}
  pre.term .idf{color:var(--accent)}
  pre.term .dim{color:var(--faint)}

  /* ---------- dogfood ---------- */
  .dogfood{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
  .dogfood h2{font-size:clamp(1.6rem,2.7vw,2.3rem); font-weight:770; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
  .dogfood p{color:var(--muted); font-size:1.05rem; margin:0 0 10px; max-width:40em}
  .dogfood code{font-family:var(--mono); font-size:.88em; color:var(--ink);
    background:var(--panel-2); border:1px solid var(--hair); padding:1px 6px; border-radius:5px}
  .signup{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius); padding:26px}
  .signup .id{font-family:var(--mono); font-size:.68rem; color:var(--faint);
    letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px}
  .field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
  .field label{font-family:var(--mono); font-size:.74rem; color:var(--muted)}
  .field input{
    font:inherit; font-size:.95rem; padding:12px 14px; border-radius:9px;
    border:1px solid var(--hair); background:var(--bg); color:var(--ink);
  }
  .field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--accent-soft)}
  .signup .btn-primary{width:100%; justify-content:center; padding:13px}
  .signup .fine{font-family:var(--mono); font-size:.7rem; color:var(--faint); margin:14px 0 0; text-align:center}

  /* ---------- lead form, wearing the dogfood layout ----------
     The design's proof section is copy on the left and a panel on the right,
     and the platform's `lead_form` block emits eyebrow, h2, .lead and the form
     as four siblings in one column. Placing them on a grid here rather than
     overriding the partial keeps ONE copy of the form markup and its submit
     script: a theme override would have had to carry both, and the script is
     the half that rots silently when the platform's changes.

     The panel is `.signup`'s look and the inputs are `.field`'s, restated
     against Bootstrap's `.form-control` because that is what the partial
     renders. Both sets of rules above are still spent by pages/home.html.dtmpl.

     `.col-lg-8.mx-auto` is unwound rather than removed -- the class is the
     platform partial's and this sheet does not get to edit it. */
  .block-lead-form{padding:76px 0; border-top:1px solid var(--hair)}
  .block-lead-form > .col-lg-8{
    width:100%; max-width:none; margin:0;
    display:grid; grid-template-columns:1.1fr .9fr; gap:0 48px;
    grid-template-rows:min-content min-content 1fr;
  }
  /* -- ROWS ARE ASSIGNED, not left to auto-placement, and the third one takes
     the slack. The design's `.dogfood` centres two children; here the copy is
     THREE siblings of the form, so a form spanning all three rows makes the
     grid distribute its extra height between them -- the eyebrow stayed at the
     top, the heading landed below the panel, and the section read as two
     broken halves. Measured: heading at y=358 against an eyebrow at y=101.

     A `1fr` final row absorbs that height instead, so the copy packs against
     the top and only the empty remainder stretches. An absent eyebrow costs
     nothing: `min-content` of no box is 0. */
  .block-lead-form > .col-lg-8 > .eyebrow{grid-column:1; grid-row:1}
  .block-lead-form > .col-lg-8 > h2{grid-column:1; grid-row:2}
  .block-lead-form > .col-lg-8 > .lead{grid-column:1; grid-row:3; align-self:start}
  .block-lead-form h2{font-size:clamp(1.6rem,2.7vw,2.3rem); font-weight:770;
    letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
  .block-lead-form .lead{color:var(--muted); font-size:1.05rem; margin:0; max-width:40em}
  /* Spans every row the copy occupies, so the panel stays centred against it
     whether or not the eyebrow is set. */
  .block-lead-form .lead-form{
    grid-column:2; grid-row:1 / 4; align-self:center;
    background:var(--panel); border:1px solid var(--hair);
    border-radius:var(--radius); padding:26px;
  }
  .block-lead-form .form-label{
    display:flex; flex-direction:column; gap:7px;
    font-family:var(--mono); font-size:.74rem; color:var(--muted);
  }
  .block-lead-form .form-control{
    font:inherit; font-size:.95rem; padding:12px 14px; border-radius:9px; width:100%;
    border:1px solid var(--hair); background:var(--bg); color:var(--ink);
  }
  .block-lead-form .form-control:focus{
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--accent-soft);
  }
  .block-lead-form .btn-primary{width:100%; justify-content:center; padding:13px}
  .block-lead-form .fine{font-family:var(--mono); font-size:.7rem; color:var(--faint);
    margin:14px 0 0; text-align:center}

  /* ---------- auth pages ----------
     The sign-in, register and password-reset pages. They render inside the
     site's own layout rather than theme-bootstrap's `layouts/auth.html.dtmpl`,
     so they need the panel this sheet already draws elsewhere: it is `.signup`'s
     look, restated against the classes the form widget emits.

     !! These exist because `coolms-site` extends `coolms-bootstrap`, and the
     `auth/*.html.dtmpl` templates live only in `theme-default` -- which is NOT
     in this theme's chain. The navigation nodes for /login, /register and
     /forgot-password are contributed by the Identity module and resolve fine;
     it was the templates that were missing, so every one of those paths
     answered 404 on this host while working on a section themed by
     theme-default. */
  .auth-page{padding:76px 0 96px; display:grid; place-items:center}
  .auth-card{
    width:100%; max-width:420px;
    background:var(--panel); border:1px solid var(--hair);
    border-radius:var(--radius); padding:30px;
  }
  .auth-card .eyebrow{margin:0 0 10px}
  .auth-card h1{font-size:1.55rem; line-height:1.15; font-weight:780;
    letter-spacing:-.02em; margin:0 0 22px; text-wrap:balance}
  .auth-card .form-label{
    display:flex; flex-direction:column; gap:7px; margin:0 0 16px;
    font-family:var(--mono); font-size:.74rem; color:var(--muted);
  }
  .auth-card .form-control{
    font:inherit; font-size:.95rem; padding:12px 14px; border-radius:9px; width:100%;
    border:1px solid var(--hair); background:var(--bg); color:var(--ink);
  }
  .auth-card .form-control:focus{
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--accent-soft);
  }
  .auth-card .btn{width:100%; justify-content:center; padding:13px}
  .auth-card .alert{font-size:.9rem; margin-bottom:16px}
  .auth-alt{font-family:var(--mono); font-size:.76rem; color:var(--faint);
    text-align:center; margin:14px 0 0}
  .auth-alt a{color:var(--accent); font-weight:600}

  /* ---------- final cta ---------- */
  /* -- NO `border-bottom`. The design put the closing rule here because its
     `footer` drew none. `.cms-footer` now draws its own `border-top` on every
     page -- which the docs pages need, having no `.final` at all -- and the two
     sat at the same y with a 0px gap, so the landing page rendered a 1.6px line
     where every other page rendered 0.8px. One separator, owned by the element
     that appears on every page. */
  .final{text-align:center; padding:96px 0}
  .final h2{font-size:clamp(2rem,4vw,3.1rem); line-height:1.6; font-weight:800; letter-spacing:-.025em; margin:0 0 6px; text-wrap:balance}
  .final h2 .run{color:var(--accent)}
  .final p{color:var(--muted); font-size:1.15rem; margin:0 0 30px}
  .final .hero-cta{justify-content:center}

  /* ---------- footer ---------- */
  footer{padding:56px 0 46px; color:var(--muted)}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px}
  .foot-brand .wordmark{font-size:1.15rem}
  .foot-brand p{font-family:var(--mono); font-size:.74rem; color:var(--faint); margin:14px 0 0; max-width:26ch; line-height:1.7}
  .foot-col h5{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
    color:var(--faint); margin:0 0 14px; font-weight:600}
  .foot-col a{display:block; font-size:.9rem; color:var(--muted); padding:5px 0}
  .foot-col a:hover{color:var(--accent)}
  .foot-base{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    padding-top:26px; border-top:1px solid var(--hair); font-family:var(--mono); font-size:.72rem; color:var(--faint)}

  /* ---------- the shared footer, in this sheet's palette ----------
     `partials/footer.html.dtmpl` is the SITE's footer and carries no colour of
     its own -- see the note in that file. This sheet replaces
     `partials/styles.html.dtmpl`, so the dark `.cms-footer` declared there
     never loads here and the footer sits on the page background, muted, the
     way the design's own footer does.

     Measured before this existed: a transparent footer with `rgb(255,255,255)`
     brand text on a `rgb(251,252,253)` page. */
  /* ⚠️ STATES ITS OWN FONT, and that is not belt-and-braces. This markup is
     shared across every page, so it must not inherit whatever a page sheet
     happens to say about the `footer` ELEMENT -- which is exactly how it came
     to render mono on the docs pages and sans on the landing page. Children
     that want mono ask for it by name below. */
  .cms-footer{
    background:none; color:var(--muted); padding:56px 0 46px;
    font-family:var(--sans); font-size:1rem;
    border-top:1px solid var(--hair);
  }
  .cms-footer-brand{color:var(--ink); text-decoration:none}
  .cms-footer-brand .bang{color:var(--accent)}
  .cms-footer-tagline{font-family:var(--mono); font-size:.74rem; color:var(--faint); line-height:1.7}
  .cms-footer-head{font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
    letter-spacing:.12em; color:var(--faint); font-weight:600; margin:0 0 14px}
  .cms-footer-links{list-style:none; padding:0; margin:0}
  .cms-footer-links a{display:block; font-size:.9rem; color:var(--muted); padding:5px 0; text-decoration:none}
  .cms-footer-links a:hover{color:var(--accent)}
  .cms-footer-rule{border:0; border-top:1px solid var(--hair); opacity:1}
  .cms-footer-legal{font-family:var(--mono); font-size:.72rem; color:var(--faint)}
  .cms-social{
    display:inline-grid; place-items:center; width:36px; height:36px; border-radius:9px;
    border:1px solid var(--hair); font-family:var(--mono); font-size:.72rem;
    color:var(--muted); text-decoration:none;
  }
  .cms-social:hover{border-color:var(--accent); color:var(--accent)}

  .foot-base .locale{border:1px solid var(--hair); border-radius:var(--cms-radius, 6px); padding:4px 9px; color:var(--muted)}

  /* ---------- reveal ---------- */
  .reveal{opacity:1}
  .js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1; transform:none; transition:none} }

  /* ---------- responsive ---------- */
  @media (max-width:940px){
    .hero-grid{grid-template-columns:1fr; gap:44px; padding-block:56px 64px}
    .hero-visual{order:2}
    .dogfood{grid-template-columns:1fr; gap:32px}
    .block-lead-form > .col-lg-8{grid-template-columns:1fr; grid-template-rows:none; gap:32px}
    .block-lead-form > .col-lg-8 > .eyebrow,
    .block-lead-form > .col-lg-8 > h2,
    .block-lead-form > .col-lg-8 > .lead{grid-column:1; grid-row:auto}
    .block-lead-form .lead-form{grid-column:1; grid-row:auto}
    .lane-body{grid-template-columns:1fr; gap:18px}
    .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
    /* The desktop links are replaced, not merely removed — see .nav-toggle. */
    .nav-links{display:none}
    .nav-toggle{display:flex}
    .mobile-nav[data-open="true"]{display:block}
  }
  @media (max-width:700px){
    /* Desktop section rhythm is far too airy once the column is one-up. */
    .section{padding:56px 0}
    .band-inner{padding-block:56px 52px}
    .final{padding:64px 0}
    .section-head{margin-bottom:30px}

    /* The rotated lane tab costs a fixed 64px — ~17% of a 375px screen — to
       show one word. Lay it flat as a header strip and give the width back. */
    .lane{grid-template-columns:1fr}
    .lane-tab{
      border-right:none; border-bottom:1px solid var(--hair);
      justify-content:flex-start; padding:9px 20px;
    }
    .lane-tab span{writing-mode:horizontal-tb; transform:none; letter-spacing:.16em}
    .lane-body{padding:22px 20px; gap:20px}

    /* Two mono strings sharing a flex row have nowhere to go on a phone. */
    .proof-bar{flex-wrap:wrap; row-gap:4px}
    .proof-bar .tag{margin-left:0}
    .cap-group-head .note{display:none}
    .cap-group+.cap-group{margin-top:28px}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px}
    .nav{gap:14px}
    .foot-grid{grid-template-columns:1fr}
    .band h2{max-width:none}
  }