/* ==========================================================================
   IDW-26 - components.v1.css
   Everything page agents need. Class inventory (grouped):

   0  BASE        body defaults, :focus-visible, ::selection, .skip-link,
                  .wrap (content container), .idw-b/.idw-o (logo fills),
                  .t-amber (the one approved colour utility)
   1  NAV         .nav .nav-logo .nav-links .nav-item .nav-has-drop
                  .nav-link .nav-drop-btn .nav-drop .nd-item .nd-l .nd-d
                  .nav-right .nav-cta .nav-burger
                  .nav-drawer .drw-top .drw-sub .drw-cta  (html.nav-locked)
                  Active page: body[data-active="..."] + a[data-nav="..."]
   2  FOOTER      .footer .footer-grid .footer-brand .footer-col .footer-h
                  .footer-meta .footer-note .footer-tm .footer-bottom
                  .footer-legal
   3  TYPE        .display .h1-sheet .h2-sheet .kicker .kicker-n .annot
                  .lede .measure
   4  SLAB        .slab[data-actor="src|idw|usr|est|crd|acs|vis|aud"]
   5  TITLE BLOCK .title-block .tb-cell .tb-label .tb-fig .tb-unit .tb-cert
                  (count-up target: [data-count] [data-prefix] [data-suffix])
   6  DIMENSION   .dim .dim-line .dim-fig .dim-labels .dim-pair (--len)
   7  STAMP       .stamp .stamp-l .stamp-sub (steps(2,end) slam on .in)
   8  CHIPS+RAILS .chip .chip-dot .chip-grid .spec-rail .sr-row .sr-label
                  .sr-value .rail-layout .sheet-thumb .thumb-no .thumb-title
                  .thumb-d .thumb-grid
   9  CTA         .cta-pill .cta-ghost
   10 ELEVATION   svg.elevation .draw .lbl  (pathLength="1" on every path)
                  stroke utils .st-src .st-idw .st-usr .st-est .st-crd
                  .st-acs .st-vis .st-aud ; fill utils .fl-src .fl-idw
                  .fl-usr .fl-est .fl-crd .fl-acs .fl-vis .fl-aud
   11 PULSE       .pulse-dot (+ .run, fired by reveal.v1.js on [data-pulse]
                  containers; offset-path set inline per use; colour via
                  CSS color, e.g. style="color:var(--c-idw)")
   12 REVEAL      .r (hidden ONLY under html.js) .in fired state,
                  word-rise .line > .w, stagger via --i
   13 LEGAL       body.doc-light .doc-sheet .doc-meta .dm-label .dm-value
                  .clause .clause-n
   14 MOTION      reduced-motion kill-switch (html.no-motion + media query)

   Glass appears ONLY on .nav here; the scenario transport bar is the second
   and final glass surface and is built by the scenarios page agent.
   ========================================================================== */

/* ==========================================================================
   0. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  min-height:100svh;
  background-color:var(--bg);
  /* ambient room lighting: opposing warm/cool radials, all under 10% alpha */
  background-image:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(37,99,235,.08), transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 14%, rgba(245,156,0,.03), transparent 45%),
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(255,255,255,.02), transparent 60%);
  background-repeat:no-repeat;
  color:var(--ink-2);
  font-family:var(--font);
  font-size:15px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink-1)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit}
ul,ol{margin:0;padding:0}
::selection{background:rgba(37,99,235,.45);color:var(--ink-1)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:140;
  padding:10px 16px;background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;border-radius:var(--r-1);
  transform:translateY(-200%);
}
.skip-link:focus{transform:none}

.wrap{
  max-width:1280px;margin:0 auto;
  padding-inline:calc(var(--frame) + 16px);
}

/* ID-ware logo fills (inverse variant: white wordmark + amber D-mark) */
.idw-b{fill:#fafafa}
.idw-o{fill:#f59c00}

.t-amber{color:var(--amber)}

/* ==========================================================================
   1. NAV - the ONE glass surface in this file (bible section 2 recipe)
   Markup contract (copy verbatim from docs/IDW26-TEMPLATE.html):
   <header class="nav">
     <a class="nav-logo" href="index.html">[inline logo svg]</a>
     <ul class="nav-links">
       <li class="nav-item nav-has-drop">
         <a class="nav-link" data-nav="solutions" href="solutions.html">Solutions</a>
         <button class="nav-drop-btn" type="button" aria-expanded="false"
                 aria-controls="drop-solutions" aria-label="Open Solutions menu">[caret]</button>
         <div class="nav-drop" id="drop-solutions">[.nd-item links]</div>
       </li>
       ...
     </ul>
     <div class="nav-right">
       <a class="nav-cta" href="scenarios.html">Interactive demo</a>
       <button class="nav-burger" type="button" aria-expanded="false"
               aria-controls="nav-drawer" aria-label="Open menu">[svg]</button>
     </div>
   </header>
   <nav class="nav-drawer" id="nav-drawer" aria-label="Site menu">...</nav>
   Dropdowns work without JS via :focus-within; with JS via aria-expanded;
   on pointer:fine they also open on hover.
   ========================================================================== */
.nav{
  /* sits INSIDE the drafting frame: the sheet header owns the strip above */
  position:sticky;top:calc(var(--frame) + 1px);z-index:90;
  display:flex;align-items:center;gap:28px;
  height:64px;
  margin-inline:calc(var(--frame) + 1px);
  padding:0 16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  box-shadow:var(--glass-inset);
}
/* opaque floor strip above the sticky nav so scrolled content vanishes
   behind the sheet header band (frame chrome at z110 redraws on top) */
.nav::before{
  content:'';position:absolute;
  left:calc(-1 * var(--frame) - 1px);right:calc(-1 * var(--frame) - 1px);
  bottom:100%;height:calc(var(--frame) + 1px);
  background:var(--floor);
}
.nav-logo{flex:none;display:flex;align-items:center}
.nav-logo svg{height:24px;width:auto}

.nav-links{
  display:flex;align-items:center;gap:2px;
  list-style:none;
}
.nav-item{position:relative;display:flex;align-items:center}
.nav.scrolled{background:rgba(24,24,27,.72)}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;
  padding:8px 10px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--ink-2);
  border-radius:var(--r-1);
  transition:color .2s var(--ease-monument);
}
.nav-link:hover{color:var(--ink-1)}

/* active page state */
body[data-active="solutions"] .nav a[data-nav="solutions"],
body[data-active="sectors"]   .nav a[data-nav="sectors"],
body[data-active="about"]     .nav a[data-nav="about"],
body[data-active="interactive"] .nav a[data-nav="interactive"]{
  color:var(--amber);
}
/* 2px amber underline tick on the active link */
body[data-active="solutions"] .nav a[data-nav="solutions"]::after,
body[data-active="sectors"]   .nav a[data-nav="sectors"]::after,
body[data-active="about"]     .nav a[data-nav="about"]::after,
body[data-active="interactive"] .nav a[data-nav="interactive"]::after{
  content:'';position:absolute;
  left:10px;right:10px;bottom:2px;height:2px;
  background:var(--amber);
}

.nav-drop-btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* 32px box, no negative margin: clears the 24px target-size minimum
     including spacing from the adjacent nav link (Lighthouse target-size) */
  width:32px;height:32px;
  background:none;border:0;cursor:pointer;
  color:var(--ink-3);
  border-radius:var(--r-1);
}
.nav-drop-btn:hover{color:var(--ink-1)}
.nav-drop-btn svg{
  width:10px;height:10px;
  transition:transform .2s var(--ease-monument);
}
.nav-drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-drop{
  position:absolute;top:calc(100% + 10px);left:0;
  z-index:95;
  min-width:300px;
  display:flex;flex-direction:column;gap:2px;
  padding:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    var(--bg-elev);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-2);
  box-shadow:var(--shadow-slab);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:
    opacity .18s var(--ease-monument),
    transform .18s var(--ease-monument),
    visibility 0s linear .18s;
}
/* keyboard + no-JS */
.nav-item:focus-within .nav-drop,
/* JS-toggled (button precedes panel in markup) */
.nav-drop-btn[aria-expanded="true"] ~ .nav-drop{
  opacity:1;visibility:visible;transform:none;
  transition-delay:0s,0s,0s;
}
/* hover for precise pointers only */
@media (hover:hover) and (pointer:fine){
  .nav-has-drop:hover .nav-drop{
    opacity:1;visibility:visible;transform:none;
    transition-delay:0s,0s,0s;
  }
  /* hover bridge so the cursor can cross the 10px gap */
  .nav-has-drop::after{
    content:'';position:absolute;left:0;right:0;top:100%;height:12px;
  }
  .nav-has-drop:not(:hover):not(:focus-within)::after{pointer-events:none}
}

.nd-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:var(--r-1);
  transition:background .15s var(--ease-monument);
}
.nd-item:hover,
.nd-item:focus-visible{background:rgba(250,250,250,.05)}
.nd-l{font-size:13px;font-weight:600;color:var(--ink-1)}
.nd-d{font-size:11px;color:var(--ink-3);letter-spacing:.02em}

.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;
  border-radius:var(--r-pill);
  background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;
  transition:transform .2s var(--ease-monument),background .2s var(--ease-monument);
}
.nav-cta:hover{transform:translateY(-1px);background:var(--blue-deep)}
.nav-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

.nav-burger{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  color:var(--ink-1);
  border-radius:var(--r-1);
}
.nav-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* mobile: burger + full-screen drawer below 900px (NOT glass - budget) */
.nav-drawer{
  position:fixed;inset:0;z-index:85;
  display:flex;flex-direction:column;gap:0;
  padding:88px calc(var(--frame) + 16px) 48px;
  overflow-y:auto;
  background:rgba(9,9,11,.98);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease-monument),visibility 0s linear .25s;
}
.nav-drawer.open{
  opacity:1;visibility:visible;
  transition-delay:0s,0s;
}
html.nav-locked{overflow:hidden}
.drw-top{
  padding:14px 0 8px;
  font-size:17px;font-weight:700;color:var(--ink-1);
  border-bottom:1px solid var(--hairline);
}
.drw-sub{
  padding:9px 0 9px 18px;
  font-size:14px;color:var(--ink-3);
}
.drw-sub:hover,.drw-top:hover{color:var(--amber)}
.drw-cta{color:var(--amber);border-bottom:0}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:480px){
  .nav-cta{display:none}
}

/* ==========================================================================
   2. FOOTER - static HTML on every page, never JS-injected
   ========================================================================== */
.footer{
  position:relative;
  margin-top:var(--sp-8);
  padding:64px calc(var(--frame) + 16px) 48px;
  border-top:1px solid var(--hairline);
  background:var(--bg-footer);  /* one step darker than ground */
}
/* corner crosshair ticks on the top hairline */
.footer::before,
.footer::after{
  content:'';position:absolute;top:-5px;
  width:9px;height:9px;pointer-events:none;
  background:
    linear-gradient(var(--hairline-strong),var(--hairline-strong)) center/9px 1px no-repeat,
    linear-gradient(var(--hairline-strong),var(--hairline-strong)) center/1px 9px no-repeat;
}
.footer::before{left:calc(var(--frame) + 7px)}
.footer::after{right:calc(var(--frame) + 7px)}
.footer-grid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-brand svg{height:26px;width:auto}
.footer-brand p{font-size:13px;color:var(--ink-3);max-width:300px}
.footer-h{
  margin-bottom:12px;
  font-size:10px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);
}
.footer-col a{
  display:block;padding:4px 0;
  font-size:12.5px;letter-spacing:.01em;color:var(--ink-3);
  transition:color .2s var(--ease-monument);
}
.footer-col a:hover{color:var(--ink-1)}
.footer-meta{
  max-width:1280px;margin:48px auto 0;
  display:flex;flex-direction:column;gap:6px;
}
.footer-note{
  font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.footer-tm{font-size:11px;color:var(--ink-3);max-width:72ch}
.footer-bottom{
  max-width:1280px;margin:20px auto 0;
  padding-top:20px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:12px;color:var(--ink-3);
}
.footer-legal{display:flex;gap:18px}
.footer-legal a{color:var(--ink-3);transition:color .2s var(--ease-monument)}
.footer-legal a:hover{color:var(--ink-1)}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   3. TYPE (bible section 3 - Inter only)
   ========================================================================== */
.display{
  font-size:clamp(2.75rem, 1.1rem + 4.8vw, 5.5rem);
  font-weight:900;line-height:.95;letter-spacing:-.045em;
  color:var(--ink-1);
  text-wrap:balance;
}
.h1-sheet{
  font-size:clamp(2.25rem, 1.2rem + 4vw, 4.5rem);
  font-weight:800;line-height:1;letter-spacing:-.035em;
  color:var(--ink-1);
  text-wrap:balance;
}
.h2-sheet{
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:var(--ink-1);
  text-wrap:balance;
}
.kicker{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);
}
.kicker::before{content:'';width:18px;height:2px;background:var(--amber);flex:none}
.kicker-n{color:var(--amber);font-variant-numeric:tabular-nums}
.annot{
  font-size:11px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--annot);
  font-variant-numeric:tabular-nums;
}
.lede{
  font-size:17px;line-height:1.6;font-weight:400;
  color:var(--ink-lede);
  max-width:min(var(--measure), 56ch);
}
.measure{max-width:var(--measure)}

/* ==========================================================================
   4. SLAB - feature card (sharp corners, hairline border, actor left rule)
   ========================================================================== */
.slab{
  position:relative;
  padding:26px 26px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%),
    var(--surface);
  border:1px solid var(--hairline);
  border-left:3px solid var(--actor, var(--hairline-strong));
  border-radius:var(--r-0);
  box-shadow:var(--shadow-slab);
  transition:
    transform .3s var(--ease-monument),
    border-color .25s var(--ease-monument);
}
.slab::after{
  content:'';position:absolute;inset:-1px;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(37,99,235,.25), 0 16px 48px -12px var(--glow-blue);
  opacity:0;
  transition:opacity .25s var(--ease-monument);
}
.slab:hover{
  transform:translateY(-2px);
  border-top-color:color-mix(in srgb, var(--actor, var(--hairline-bright)) 35%, var(--hairline));
  border-right-color:color-mix(in srgb, var(--actor, var(--hairline-bright)) 35%, var(--hairline));
  border-bottom-color:color-mix(in srgb, var(--actor, var(--hairline-bright)) 35%, var(--hairline));
}
.slab:hover::after{opacity:1}
.slab[data-actor="src"]{--actor:var(--c-src)}
.slab[data-actor="idw"]{--actor:var(--c-idw)}
.slab[data-actor="usr"]{--actor:var(--c-usr)}
.slab[data-actor="est"]{--actor:var(--c-est)}
.slab[data-actor="crd"]{--actor:var(--c-crd)}
.slab[data-actor="acs"]{--actor:var(--c-acs)}
.slab[data-actor="vis"]{--actor:var(--c-vis)}
.slab[data-actor="aud"]{--actor:var(--c-aud)}
.slab h3{font-size:17px;font-weight:700;margin-bottom:8px}
.slab p{font-size:14px;color:var(--ink-3);line-height:1.55}

/* ==========================================================================
   5. TITLE BLOCK - engineering stat table (bible 5b)
   Figures: <span class="tb-fig" data-count="148" data-suffix="+">148+</span>
   Final value ALWAYS shipped in HTML; reveal.v1.js animates then restores it.
   One cell is always certifications (.tb-cert stamped text).
   ========================================================================== */
.title-block{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:1px;
  background:var(--hairline-strong);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-0);
  box-shadow:var(--edge);
}
.tb-cell{
  display:flex;flex-direction:column;gap:10px;justify-content:space-between;
  min-height:108px;
  padding:20px;
  background:var(--bg);
  transition:background .2s var(--ease-monument);
}
.tb-cell:hover{background:var(--bg-1)}
.tb-fig::after{
  content:'';display:block;
  width:20px;height:1px;margin-top:8px;
  background:var(--amber);
}
.tb-label{
  font-size:10px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);
}
.tb-fig{
  font-size:clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--ink-1);
  font-variant-numeric:tabular-nums;
}
.tb-unit{font-size:.5em;font-weight:700;color:var(--ink-3)}
.tb-cert{
  font-size:12px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--stamp);
  line-height:1.8;
}

/* ==========================================================================
   6. DIMENSION CALLOUT (bible 5d)
   <div class="dim r">
     <span class="dim-line" aria-hidden="true"></span>
     <span class="dim-fig">&lt; 4 MIN</span>
     <span class="dim-line" aria-hidden="true"></span>
   </div>
   Optional endpoint labels: .dim-labels row directly after the .dim.
   .dim-pair stacks two dims of visibly different length via --len
   (e.g. style="--len:95%" vs style="--len:20%").
   ========================================================================== */
.dim{
  position:relative;
  display:flex;align-items:center;
  width:var(--len, 100%);
  max-width:600px;
  height:32px;
}
.dim::before,
.dim::after{
  content:'';flex:none;
  width:1px;height:18px;
  background:var(--datum);
}
.dim-line{
  flex:1;height:1px;
  background:var(--datum);
  transform-origin:left center;
}
.dim-line:last-of-type{transform-origin:right center}
html.js .dim .dim-line{
  transform:scaleX(0);
  transition:transform .9s var(--ease-draw) calc(var(--i, 0) * .18s);
}
html.js .in .dim .dim-line,
html.js .dim.in .dim-line{transform:scaleX(1)}
.dim-fig{
  flex:none;
  padding:0 14px;
  font-size:13px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-1);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dim-labels{
  display:flex;justify-content:space-between;gap:16px;
  width:var(--len, 100%);max-width:600px;
  margin-top:4px;
  font-size:10px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);
}
.dim-pair{display:grid;gap:20px}

/* ==========================================================================
   7. APPROVAL STAMP (bible 5g) - amber double-ring ellipse, rotated -8deg,
   two-frame steps() slam on .in. Only against true certifications.
   Mark the stamp aria-hidden="true" and put the real text alongside.
   ========================================================================== */
.stamp{
  position:relative;
  display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  width:160px;height:100px;
  padding:12px;
  border:2px solid var(--stamp);
  border-radius:50%;
  color:var(--stamp);
  text-transform:uppercase;text-align:center;
  font-weight:800;letter-spacing:1.3px;font-size:11px;
  transform:rotate(-8deg);
}
.stamp::before{
  content:'';position:absolute;inset:4px;
  border:1px solid var(--stamp);border-radius:50%;
}
.stamp-l{font-size:13px}
.stamp-sub{font-size:10px;font-weight:700}
html.js .stamp{opacity:0}
html.js .in .stamp,
html.js .stamp.in{
  animation:stamp-slam .2s steps(2,end) forwards;
}
@keyframes stamp-slam{
  from{opacity:0;transform:rotate(-8deg) scale(1.6)}
  to{opacity:1;transform:rotate(-8deg) scale(1)}
}
html.js.no-motion .stamp{opacity:1;animation:none}

/* ==========================================================================
   8. CHIPS, SPEC RAIL, SHEET THUMBNAILS
   ========================================================================== */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;
  border:1px solid var(--hairline);
  border-radius:var(--r-1);
  background:var(--surface);
  font-size:11px;font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-2);
  white-space:nowrap;
  transition:border-color .15s var(--ease-monument);
}
.chip:hover{border-color:var(--hairline-bright)}
.chip-dot{
  width:5px;height:5px;flex:none;
  border-radius:50%;
  background:var(--actor, var(--amber));
}
.chip-grid{display:flex;flex-wrap:wrap;gap:8px}

/* left sticky annotation rail (product pages) inside .rail-layout */
.rail-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:clamp(32px, 4vw, 72px);
  align-items:start;
}
.spec-rail{
  position:sticky;top:96px;
  align-self:start;
  display:flex;flex-direction:column;
  border:1px solid var(--hairline);
  background:var(--surface);
}
.sr-row{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;
  border-bottom:1px solid var(--hairline);
}
.sr-row:last-child{border-bottom:0}
.sr-label{
  font-size:10px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);
}
.sr-value{
  font-size:13px;font-weight:600;color:var(--ink-1);
  font-variant-numeric:tabular-nums;
}
@media (max-width:900px){
  .rail-layout{grid-template-columns:1fr}
  .spec-rail{position:static}
}

/* related-page sheet thumbnails */
.thumb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.sheet-thumb{
  display:flex;flex-direction:column;gap:6px;
  padding:18px;
  border:1px solid var(--hairline);
  background:var(--surface);
  border-radius:var(--r-0);
  transition:transform .3s var(--ease-monument),border-color .3s var(--ease-monument);
}
.sheet-thumb:hover{transform:translateY(-2px);border-color:var(--hairline-strong)}
.thumb-no{
  font-size:10px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.thumb-title{font-size:15px;font-weight:700;color:var(--ink-1)}
.thumb-d{font-size:12px;color:var(--ink-3)}

/* ==========================================================================
   9. CTA PILLS - the ONLY pill radius in the system (plus .nav-cta)
   ========================================================================== */
.cta-pill{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  border-radius:var(--r-pill);
  background:var(--blue);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  border:0;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);  /* machined top edge */
  transition:
    transform .2s var(--ease-monument),
    background .2s var(--ease-monument),
    filter .2s var(--ease-monument);
}
.cta-pill::after{
  content:'';position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  box-shadow:0 0 24px -6px rgba(37,99,235,.5);
  opacity:0;
  transition:opacity .2s var(--ease-monument);
}
.cta-pill:hover{transform:translateY(-1px);filter:brightness(1.12)}
.cta-pill:hover::after{opacity:1}
.cta-pill:active{transform:translateY(1px)}
.cta-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 27px;
  border-radius:var(--r-pill);
  border:1px solid var(--hairline-strong);
  background:transparent;color:var(--ink-1);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;
  transition:
    transform .2s var(--ease-monument),
    border-color .2s var(--ease-monument),
    background .2s var(--ease-monument);
}
.cta-ghost:hover{
  transform:translateY(-1px);
  border-color:var(--ink-3);
  background:rgba(250,250,250,.04);
}
.cta-ghost:active{transform:translateY(1px)}

/* ==========================================================================
   10. ELEVATION CONTRACT - self-drawing diagrams (bible 5c)
   Diagrams come ONLY from docs/IDW26-DIAGRAMS.html. Every drawable path:
   class="draw", pathLength="1". Labels: class="lbl". Stagger with --i on
   the path (180ms steps). Reveal: .in on the svg or any ancestor.
   ========================================================================== */
svg.elevation{
  width:100%;height:auto;max-width:880px;
  margin-inline:auto;
  /* faint dot-grid backdrop panel, faded at the edges */
  background-image:
    radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0,0,0,0) 55%, var(--bg) 100%),
    radial-gradient(rgba(250,250,250,.05) 1px, transparent 1.4px);
  background-size:100% 100%, 20px 20px;
  background-position:center, center;
}
svg.elevation .draw{
  fill:none;
  stroke-width:var(--stroke-w);
  stroke-dasharray:1;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.2s var(--ease-draw) calc(var(--i, 0) * .18s);
}
.in svg.elevation .draw,
svg.elevation.in .draw{stroke-dashoffset:0}
svg.elevation .lbl{
  fill:var(--annot);
  font-family:var(--font);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.3px;
  opacity:0;
  transition:opacity .6s var(--ease-monument) .9s;
}
svg.elevation .lbl.dim-fig{fill:var(--amber);font-weight:800}
.in svg.elevation .lbl,
svg.elevation.in .lbl{opacity:1}
/* dashed strokes (fences, routes, datum feeds): pathLength-normalised dasharray
   cannot both dash and draw, so .dash keeps its dashes and fades in on its beat */
svg.elevation .draw.dash{
  stroke-dasharray:.018 .014;
  stroke-dashoffset:0;
  opacity:0;
  transition:opacity .7s var(--ease-draw) calc(var(--i, 0) * .18s);
}
.in svg.elevation .draw.dash,
svg.elevation.in .draw.dash{opacity:1}
/* no-JS and reduced motion render the finished drawing */
html.no-motion svg.elevation .draw,
html:not(.js) svg.elevation .draw{stroke-dashoffset:0;transition:none}
html.no-motion svg.elevation .lbl,
html:not(.js) svg.elevation .lbl{opacity:1;transition:none}
html.no-motion svg.elevation .draw.dash,
html:not(.js) svg.elevation .draw.dash{opacity:1;transition:none}

/* actor colour utilities - stroke */
.st-src{stroke:var(--c-src)}
.st-idw{stroke:var(--c-idw)}
.st-usr{stroke:var(--c-usr)}
.st-est{stroke:var(--c-est)}
.st-crd{stroke:var(--c-crd)}
.st-acs{stroke:var(--c-acs)}
.st-vis{stroke:var(--c-vis)}
.st-aud{stroke:var(--c-aud)}
/* actor colour utilities - fill */
.fl-src{fill:var(--c-src)}
.fl-idw{fill:var(--c-idw)}
.fl-usr{fill:var(--c-usr)}
.fl-est{fill:var(--c-est)}
.fl-crd{fill:var(--c-crd)}
.fl-acs{fill:var(--c-acs)}
.fl-vis{fill:var(--c-vis)}
.fl-aud{fill:var(--c-aud)}

/* ==========================================================================
   11. TRAVELLING PULSE (bible 5e) - the only organic motion.
   Place inside a container with [data-pulse] (optional value = delay in ms,
   default 1500 to let the diagram draw first). Set the path inline:
     <span class="pulse-dot" style="offset-path:path('M0 0 ...');
           color:var(--c-idw)"></span>
   reveal.v1.js adds .run after the container fires .in plus the delay.
   Loop with --pulse-iter, retime with --pulse-dur / --pulse-delay.
   ========================================================================== */
.pulse-dot{
  position:absolute;top:0;left:0;
  width:18px;height:18px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  color:var(--sky);
  offset-rotate:0deg;
  offset-distance:0%;
  background:
    radial-gradient(circle, currentColor 0 2.6px, rgba(0,0,0,0) 3.4px),
    radial-gradient(circle, var(--glow-pulse) 0 2px, rgba(0,0,0,0) 8.6px);
}
.pulse-dot.run{
  animation:pulse-travel var(--pulse-dur, 2.4s) var(--ease-draw)
    var(--pulse-delay, 0s) var(--pulse-iter, 1) both;
}
@keyframes pulse-travel{
  0%{opacity:0;offset-distance:0%}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;offset-distance:100%}
}
html.no-motion .pulse-dot{display:none}

/* ==========================================================================
   12. REVEAL STATES - hidden ONLY under html.js (crawlers/no-JS see all)
   .r          base reveal target (IO adds .in once, threshold .25)
   --i         sibling stagger index (120ms slabs, 60ms words)
   .line > .w  masked word-rise for the monument headline:
     <span class="line"><span class="w" style="--i:0">One</span> ...</span>
   ========================================================================== */
html.js .r{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
  transition:
    opacity .8s var(--ease-monument) calc(var(--i, 0) * 120ms),
    transform .8s var(--ease-monument) calc(var(--i, 0) * 120ms),
    filter .8s var(--ease-monument) calc(var(--i, 0) * 120ms);
}
html.js .r.in{opacity:1;transform:none;filter:none}
html.js.no-motion .r{opacity:1;transform:none;filter:none;transition:none}

.line{display:block;overflow:hidden}
.line>.w{display:inline-block}
html.js .line>.w{
  transform:translateY(115%);
  transition:transform .8s var(--ease-monument) calc(var(--i, 0) * 60ms);
}
html.js .in .line>.w,
html.js .r.in .line>.w{transform:none}
html.js.no-motion .line>.w{transform:none;transition:none}

/* ==========================================================================
   13. LEGAL DOCUMENT REGISTER (body.doc-light - tokens remap in tokens.v1)
   Light paper sheet centered on the dark floor, metadata header table,
   marginal clause numbers. No canvas, no hero, no video.
   ========================================================================== */
body.doc-light{background:var(--floor)}
.doc-sheet{
  max-width:860px;
  margin:48px auto 96px;
  padding:clamp(28px, 6vw, 76px);
  background:var(--bg);          /* remapped to #fafaf9 under doc-light */
  color:var(--ink-2);
  border:1px solid var(--hairline);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.7);
}
.doc-sheet h1{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.doc-sheet h2{font-size:18px;font-weight:800;margin:2.2em 0 .7em}
.doc-sheet p{font-size:15px;line-height:1.7;margin-bottom:1.1em}
.doc-sheet a{color:var(--blue);text-decoration:underline}
.doc-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1px;
  background:var(--hairline-strong);
  border:1px solid var(--hairline-strong);
  margin:24px 0 40px;
}
.doc-meta>div{background:var(--surface);padding:12px 14px}
.dm-label{
  display:block;
  font-size:10px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:3px;
}
.dm-value{
  display:block;
  font-size:12px;font-weight:600;color:var(--ink-1);
  font-variant-numeric:tabular-nums;
}
.clause{position:relative}
.clause-n{
  position:absolute;left:-58px;top:.25em;
  font-size:11px;font-weight:700;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
@media (max-width:1020px){
  .clause-n{position:static;display:block;margin-bottom:4px}
}

/* ==========================================================================
   14. REDUCED-MOTION KILL-SWITCH (first-class mode, mirrored by JS gates)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after{
  animation-duration:.01ms !important;
  animation-delay:0ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  transition-delay:0ms !important;
}