/* /products (pages/products.md, PRODUCTS-BRAND.md, R38 to R46). Page chrome stays SevenTrain (black, gold, Instrument
   Serif, Inter). Inside each card the product owns ground, type, buttons, focus ring and figure, through the
   data-brand scopes below; no product token is defined outside them. Over 60 lines on purpose: two brand worlds.
   Rules kept: hover lifts use `translate`, never `transform`; nothing GSAP animates has a CSS transition. */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../../fonts/geist-latin-wght-normal.woff2') format('woff2')}

/* ---------- brand tokens (PRODUCTS-BRAND section 5; R44 silver accent, flame only in the figure) ---------- */
body[data-page="products"] [data-brand="dos"]{--b-ground:#07090D;--b-raised:#0D1117;--b-sunken:#151A23;--b-ink:#EEF1F5;--b-muted:#A7B0BD;
  --b-line:#232529;--b-line-strong:#5F6165;--b-who:#EEF1F5;--b-quiet:#A7B0BD;--b-btn:#EEF1F5;--b-btn-ink:#07090D;--b-btn-hover:#FFFFFF;
  --b-radius:6px;--b-font:'Geist',ui-sans-serif,system-ui,sans-serif;--b-focus:#EEF1F5;--b-rule:#EEF1F5}
body[data-page="products"] [data-brand="tb"]{--b-ground:#FFFFFF;--b-ink:#0D0D0D;--b-text-2:#5D5D66;--b-text-3:#6A6A73;--b-line:#FFFFFF;
  --b-who:#5D5D66;--b-quiet:#6A6A73;--b-btn:#0D0D0D;--b-btn-ink:#FFFFFF;--b-btn-hover:#2A2A2E;--b-radius:24px;
  --b-font:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;--b-mono:'JetBrains Mono',ui-monospace,monospace;--b-focus:#2457FF;--b-rule:#2457FF;color-scheme:light}

/* ---------- hero: H1 across the wide grid, each definition directly over its own card ---------- */
body[data-page="products"] .crumb{max-width:var(--wide)}
body[data-page="products"] .hero--prod{padding-bottom:32px}
body[data-page="products"] .hero--prod h1 em{display:block}
body[data-page="products"] .hero--prod .hero__inner .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);max-width:none}
body[data-page="products"] .duo .a{max-width:44ch}   /* R52: the definitions take the lead text role, so the hero ends near 450 px and both cards start on a 1280x720 first screen */

/* ---------- the two cards: same size, same slots, two worlds ---------- */
body[data-page="products"] #products{padding-top:0;padding-bottom:max(64px,calc(var(--train-h) / 2 + 16px))}   /* R52: the black above the close is only the Train's room (it runs centred on the seam) */
/* R52: the close is sized to its content (no empty gold band). Its top clears the Train's lower half; nothing is pinned. */
body[data-page="products"] #contact{min-height:0;align-items:center;padding-block:calc(var(--train-h) / 2 + clamp(40px,5vw,72px)) var(--space-section)}
body[data-page="products"] .prods{grid-auto-rows:1fr}
body[data-page="products"] .prod{--pad:32px;position:relative;display:flex;flex-direction:column;min-width:0;height:100%;padding:var(--pad);
  background:var(--b-ground);color:var(--b-ink);font-family:var(--b-font);border:1px solid var(--b-line);border-radius:var(--b-radius);
  container:prod/inline-size;translate:0 0;transition:translate .36s var(--ease)}
body[data-page="products"] .prod::before{content:'';position:absolute;left:var(--b-radius);right:var(--b-radius);top:-1px;height:2px;background:var(--b-rule);transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
body[data-page="products"] .prod:hover,body[data-page="products"] .prod:focus-within{translate:0 -2px}
body[data-page="products"] .prod:hover::before,body[data-page="products"] .prod:focus-within::before{transform:scaleX(1)}
body[data-page="products"] .prod__who{font:500 15px/1.4 var(--b-font);color:var(--b-who);max-width:none;margin-bottom:10px}
body[data-page="products"] [data-brand="dos"] .prod__who::after{content:'';display:inline-block;vertical-align:middle;width:32px;height:1px;margin:0 0 2px 12px;background:var(--b-line-strong)}
body[data-page="products"] .prod__name{display:flex;align-items:center;gap:.3em;min-height:1.2em;font-family:var(--b-font);font-size:clamp(2rem,1.4rem + 1.2vw,2.625rem);line-height:1.02;color:var(--b-ink);max-width:none}
body[data-page="products"] [data-brand="dos"] .prod__name{font-weight:600;letter-spacing:-.038em}
body[data-page="products"] [data-brand="tb"] .prod__name{font-weight:500;letter-spacing:-.035em;gap:.24em}
body[data-page="products"] .prod__mark{width:.8em;height:.8em;flex:0 0 auto}
body[data-page="products"] .nb{display:inline-flex;flex:0 0 auto}
body[data-page="products"] .nb-svg{height:.7em;width:auto;overflow:visible;transform-origin:50% 12%}
body[data-page="products"] .prod__stage{position:relative;width:100%;aspect-ratio:4/5;margin:22px 0 24px}
body[data-page="products"] .pf{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body[data-page="products"] .pf--w,body[data-page="products"] .pl-set--w{display:none}
body[data-page="products"] .pl-set{position:absolute;inset:0;pointer-events:none}
@container prod (min-width: 440px){
  body[data-page="products"] .prod__stage{aspect-ratio:4/3}
  body[data-page="products"] .pf--w,body[data-page="products"] .pl-set--w{display:block}
  body[data-page="products"] .pf--n,body[data-page="products"] .pl-set--n{display:none}
}
body[data-page="products"] .prod__what{margin:0;max-width:44ch;color:var(--b-ink)}
body[data-page="products"] [data-brand="dos"] .prod__what{font:500 clamp(1.125rem,1rem + .4vw,1.375rem)/1.32 var(--b-font);letter-spacing:-.018em}
body[data-page="products"] [data-brand="tb"] .prod__what{font:500 17px/1.5 var(--b-font);color:var(--b-text-2)}
body[data-page="products"] [data-brand="tb"] .prod__what strong{display:block;margin-bottom:4px;font-weight:600;font-size:clamp(1.375rem,1.1rem + .7vw,1.75rem);line-height:1.15;letter-spacing:-.036em;color:var(--b-ink)}
body[data-page="products"] .prod__act,body[data-page="products"] .dr__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
body[data-page="products"] .prod__act{margin-top:auto;padding-top:24px}
body[data-page="products"] .prod__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font:500 15px/1 var(--b-font);background:var(--b-btn);color:var(--b-btn-ink);transition:background-color .18s linear}
body[data-page="products"] .prod__btn:hover{background:var(--b-btn-hover)}
body[data-page="products"] [data-brand="dos"] .prod__btn:active{translate:0 1px}
body[data-page="products"] [data-brand="tb"] .prod__btn{font-size:16px}
body[data-page="products"] [data-brand="tb"] .prod__btn:active{scale:.98}
body[data-page="products"] .prod__trig{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--b-font);color:var(--b-ink);transition:background-color .18s linear,border-color .18s linear}
body[data-page="products"] [data-brand="dos"] .prod__trig{border:1px solid var(--b-line-strong)}
body[data-page="products"] [data-brand="dos"] .prod__trig:hover{border-color:var(--b-ink);background:var(--b-sunken)}
body[data-page="products"] [data-brand="tb"] .prod__trig{background:#F7F7F8;font-size:16px}
body[data-page="products"] [data-brand="tb"] .prod__trig:hover{background:#EDEDEF}
body[data-page="products"] .prod__quiet{display:flex;align-items:center;min-height:44px;margin-top:8px;font:500 14px/1.4 var(--b-font);color:var(--b-quiet);max-width:none}
body[data-page="products"] .prod__quiet a,body[data-page="products"] .dr__quiet{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1.4 var(--b-font);color:var(--b-muted);text-decoration:underline;text-decoration-color:var(--b-line-strong);text-underline-offset:5px;transition:color .18s linear}
body[data-page="products"] .prod__quiet a:hover,body[data-page="products"] .dr__quiet:hover{color:var(--b-ink);text-decoration-color:var(--b-ink)}
body[data-page="products"] [data-brand] :focus-visible{outline:2px solid var(--b-focus);outline-offset:2px;border-radius:999px}
body[data-page="products"] [data-brand="tb"] :focus-visible{outline-offset:3px}
body[data-page="products"] [data-brand="dos"] ::selection{background:#EEF1F5;color:#07090D}
body[data-page="products"] [data-brand="tb"] ::selection{background:#EAEFFF;color:#0D0D0D}

/* ---------- Decision OS figure: Lithium's material (1 px silver on near-black, flame only at the human and the Act boundary) */
/* butt caps everywhere: a DrawSVG stroke at 0 length must paint nothing (a round cap would leave a dot) */
body[data-page="products"] .pf path{stroke-linecap:butt}
body[data-page="products"] .d-bound{fill:#181010;stroke:#FF6B3D;stroke-width:1}
body[data-page="products"] .d-line,body[data-page="products"] .d-route{fill:none;stroke:#31343A;stroke-width:1}
body[data-page="products"] .d-rail,body[data-page="products"] .d-ticks{fill:none;stroke:#5C626A;stroke-width:1}
body[data-page="products"] .d-block{fill:#07090D;stroke:#5F6165;stroke-width:1}
body[data-page="products"] .d-path{fill:none;stroke:none}
body[data-page="products"] .pf .d-ov{fill:none;stroke:#C5CEDB;stroke-width:1;opacity:0}
body[data-page="products"] .pf .d-ov.d-ov--flame{stroke:#FF6B3D;stroke-width:1.4}
body[data-page="products"] .pf .d-ov.d-ov--dim{stroke:#A7B0BD}
body[data-page="products"] .d-ring{fill:#07090D;stroke:#8F3F27;stroke-width:1;vector-effect:non-scaling-stroke}
body[data-page="products"] .d-disc{fill:#FF6B3D}
body[data-page="products"] .d-glyph{fill:#1A0B05}
body[data-page="products"] .d-pulse{fill:none;stroke:#FF6B3D;stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
body[data-page="products"] .d-dot{fill:#C5CEDB}
body[data-page="products"] .d-dot--flame{fill:#FF6B3D}
body[data-page="products"] .d-dot--gov{fill:#A7B0BD;opacity:0}
body[data-page="products"] .pl{position:absolute;font:600 15px/1.2 var(--b-font);letter-spacing:-.005em;color:var(--b-ink);white-space:nowrap;transform:translateY(calc(-100% - 6px))}
body[data-page="products"] .pl--sys{font-weight:500;font-size:14px;transform:translate(-50%,-50%)}
body[data-page="products"] .pl--human{color:#FF8257;transform:none}
body[data-page="products"] .pl--govern{color:var(--b-muted);transform:translate(-50%,-50%) rotate(-90deg)}
body[data-page="products"] .pl-set--w .pl--connect{left:2.667%;top:73.333%}
body[data-page="products"] .pl-set--w .pl--context{left:2.667%;top:58.222%}
body[data-page="products"] .pl-set--w .pl--decide{left:2.667%;top:43.111%}
body[data-page="products"] .pl-set--w .pl--act{left:4%;top:20.889%}
body[data-page="products"] .pl-set--w .pl--human{right:13%;top:26.667%}
body[data-page="products"] .pl-set--w .pl--govern{left:96.667%;top:62.222%}
body[data-page="products"] .pl-set--w .pl--sys{top:86%}
body[data-page="products"] .pl-set--w .pl--crm{left:12.5%}
body[data-page="products"] .pl-set--w .pl--custody{left:34.167%}
body[data-page="products"] .pl-set--w .pl--core{left:55.833%}
body[data-page="products"] .pl-set--w .pl--ledger{left:77.5%}
body[data-page="products"] .pl-set--n .pl{font-size:14px}
body[data-page="products"] .pl-set--n .pl--connect{left:2.5%;top:74%}
body[data-page="products"] .pl-set--n .pl--context{left:2.5%;top:60%}
body[data-page="products"] .pl-set--n .pl--decide{left:2.5%;top:46%}
body[data-page="products"] .pl-set--n .pl--act{left:6.875%;top:19%}
body[data-page="products"] .pl-set--n .pl--human{right:15.625%;top:24%}
body[data-page="products"] .pl-set--n .pl--govern{left:97.5%;top:52.5%}
body[data-page="products"] .pl-set--n .pl--sys{top:86%}
body[data-page="products"] .pl-set--n .pl--crm{left:12.5%}
body[data-page="products"] .pl-set--n .pl--custody{left:34.375%}
body[data-page="products"] .pl-set--n .pl--core{left:56.25%}
body[data-page="products"] .pl-set--n .pl--ledger{left:78.125%}

/* ---------- twelvebell figure: a website as a wireframe, wet blue ink drying to its own colour, flat (no shadow, no glow) */
body[data-page="products"] .t-guide{fill:none;stroke:#CFDAFF;stroke-width:1}
body[data-page="products"] .t-box{fill:none;stroke:#7797FF;stroke-width:1}
body[data-page="products"] .t-sel{fill:none;stroke:#2457FF;stroke-width:1.5}
body[data-page="products"] .t-handles{fill:#FFFFFF;stroke:#2457FF;stroke-width:1.5}
body[data-page="products"] .t-caret{fill:#2457FF}
body[data-page="products"] .t-head{fill:none;stroke:#2457FF;stroke-width:1.5}
body[data-page="products"] .t-draw > *,body[data-page="products"] .t-head,body[data-page="products"] .t-typing{opacity:0}
body[data-page="products"] .tl{position:absolute;white-space:nowrap;line-height:1}
body[data-page="products"] .tl--addr{font:400 12px/1 var(--b-mono);color:var(--b-text-3);transform:translate(-50%,-50%)}
body[data-page="products"] .tl--asleep{font:400 12px/1 var(--b-mono);color:var(--b-text-3);background:#F7F7F8;border-radius:999px;padding:6px 10px}
body[data-page="products"] .tl--booked{font:500 14px/1 var(--b-font);color:#0B7A4B;background:#E6F7EF;border-radius:999px;padding:6px 12px}
body[data-page="products"] .pl-set--w .tl--addr{left:50%;top:4.556%}
body[data-page="products"] .pl-set--w .tl--asleep{left:4.667%;top:89.778%}
body[data-page="products"] .pl-set--w .tl--booked{right:6%;top:84.444%}
body[data-page="products"] .pl-set--n .tl--addr{left:53.75%;top:4.625%}
body[data-page="products"] .pl-set--n .tl--asleep{left:6.25%;top:52%}
body[data-page="products"] .pl-set--n .tl--booked{right:6.25%;top:87.5%}

/* ---------- drawers: the card's world carries into the panel (site.js moves the node; :has reads its brand) ---------- */
body[data-page="products"] #drawer:has(.dr[data-brand="dos"]) .drawer__panel{background:#0D1117;border-left-color:#232529}
body[data-page="products"] #drawer:has(.dr[data-brand="tb"]) .drawer__panel{background:#FFFFFF;border-left-color:#E6E6E8;color-scheme:light}
body[data-page="products"] #drawer:has(.dr[data-brand="dos"]) .drawer__x{font-family:'Geist',ui-sans-serif,system-ui,sans-serif;color:#EEF1F5;border-color:#5F6165;border-radius:999px}
body[data-page="products"] #drawer:has(.dr[data-brand="tb"]) .drawer__x{color:#0D0D0D;background:#F7F7F8;border-color:#F7F7F8;border-radius:999px}
body[data-page="products"] #drawer:has(.dr[data-brand="dos"]) .drawer__x:hover{border-color:#EEF1F5}
body[data-page="products"] #drawer:has(.dr[data-brand="tb"]) .drawer__x:hover{background:#EDEDEF;border-color:#EDEDEF}
/* R52: a lighter ring in the drawers (1 px, the brand's own focus colour; the heading that takes focus on open is quieter still) */
body[data-page="products"] #drawer:has(.dr[data-brand="dos"]) :focus-visible{outline:1px solid #EEF1F5;outline-offset:3px}
body[data-page="products"] #drawer:has(.dr[data-brand="tb"]) :focus-visible{outline:1px solid #2457FF;outline-offset:3px}
body[data-page="products"] .drawer .dr{font-family:var(--b-font);color:var(--b-ink)}
body[data-page="products"] .drawer .dr > h2{font-family:var(--b-font);font-size:clamp(2rem,1.6rem + 1.4vw,2.75rem);line-height:1.04;color:var(--b-ink);margin-bottom:16px}
body[data-page="products"] .drawer .dr[data-brand="dos"] > h2{font-weight:600;letter-spacing:-.038em}
body[data-page="products"] .drawer .dr[data-brand="tb"] > h2{font-weight:600;letter-spacing:-.036em}
body[data-page="products"] #drawer .dr[data-brand="dos"] > h2:focus-visible{outline:1px solid #A7B0BD;outline-offset:8px}
body[data-page="products"] #drawer .dr[data-brand="tb"] > h2:focus-visible{outline:1px solid #2457FF;outline-offset:8px}
body[data-page="products"] .drawer .dr p{color:var(--b-muted,#5D5D66);font-size:1rem;line-height:1.6;font-weight:400}
body[data-page="products"] .drawer .dr[data-brand="tb"] p{color:var(--b-text-2);font-weight:500}
body[data-page="products"] .drawer .dr .dr__lead{color:var(--b-ink);font-size:1.125rem;font-weight:600;letter-spacing:-.018em}
body[data-page="products"] .drawer .dr h3{font-family:var(--b-font);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;color:var(--b-ink);margin:28px 0 8px}
body[data-page="products"] .drawer .dr strong{color:var(--b-ink);font-weight:600}
body[data-page="products"] .dr__list,body[data-page="products"] .dr__steps{margin:20px 0;border-top:1px solid var(--b-line)}
body[data-page="products"] .dr[data-brand="tb"] :is(.dr__list,.dr__steps),body[data-page="products"] .dr[data-brand="tb"] :is(.dr__list,.dr__steps) li{border-color:#E6E6E8}
body[data-page="products"] :is(.dr__list,.dr__steps) li{padding:12px 0;border-bottom:1px solid var(--b-line);font-size:1rem;line-height:1.5;color:var(--b-muted,#5D5D66)}
body[data-page="products"] .dr[data-brand="tb"] :is(.dr__list,.dr__steps) li{color:var(--b-text-2);font-weight:500}
body[data-page="products"] .dr h3 + :is(.dr__list,.dr__steps){margin-top:12px}
body[data-page="products"] .dr__steps{counter-reset:st}
body[data-page="products"] .dr__steps li{counter-increment:st;position:relative;padding-left:32px}
body[data-page="products"] .dr__steps li::before{content:counter(st);position:absolute;left:0;top:15px;font:400 12px/1.5 var(--b-mono);color:#2457FF}
body[data-page="products"] .dr__steps li strong{display:block}
body[data-page="products"] .drawer .dr .dr__fine{font-size:.875rem;margin-top:16px}
body[data-page="products"] .drawer .dr .dr__next{font-size:.875rem;color:var(--b-text-3);margin:0}
body[data-page="products"] .dr__act{margin-top:28px}

/* ---------- stacked below 900 px: centred, up to 640 px, still the same size as each other ---------- */
@media(max-width:900px){
  body[data-page="products"] .hero--prod > .wrap,body[data-page="products"] #products > .wrap,body[data-page="products"] #contact > .wrap,body[data-page="products"] .crumb{max-width:calc(640px + 2 * var(--gutter))}
  body[data-page="products"] .hero--prod .hero__inner .duo{grid-template-columns:minmax(0,1fr);gap:28px}
  body[data-page="products"] .prods{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  body[data-page="products"] .prods{grid-auto-rows:1fr}
  body[data-page="products"] .prod{--pad:20px}
  body[data-page="products"] .prod__who{font-size:14px}
  body[data-page="products"] .prod__name{font-size:2rem}
  body[data-page="products"] .prod__act .prod__btn,body[data-page="products"] .prod__act .prod__trig{flex:1 1 auto}
}