/* ==========================================================================
   ConfirmSafety — site stylesheet
   One file. Every token and component for all pages.
   Sections: 1 fonts · 2 tokens · 3 reset · 4 type · 5 plate · 6 header
             7 footer · 8 buttons · 9 sections · 10 home · 11 product pages
             12 calculators (deferred) · 13 ladder/callout · 14 responsive
             15 product preview
   ========================================================================== */

/* ---------- 1. FONTS (self-hosted; no CDN dependency) --------------------- */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/archivo-var.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/barlow-condensed-800.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/plex-mono-600.woff2") format("woff2");
}

/* ---------- 2. TOKENS ----------------------------------------------------- */
:root{
  /* ground */
  --ink:      #080E1A;   /* page ground                                     */
  --navy:     #0D1626;   /* alternating section                             */
  --plate:    #142034;   /* plate fill                                      */
  --plate-2:  #1B2A44;   /* raised plate                                    */
  --rule:     #26374F;   /* hairline, plate edge                            */
  --rule-2:   #35496A;   /* emphasised rule                                 */

  /* accent — actionable or flagged ONLY. Never a wash, never a gradient.    */
  --yellow:      #FFC20E;
  --yellow-hover:#FFD34D;
  --yellow-d:    #A87C06;

  /* text */
  --paper:    #EDF1F6;
  --grey:     #94A3B6;
  --grey-d:   #5E7086;

  /* state — semantic, separate from the accent */
  --ok:       #3FBF7F;
  --flag:     #E0533B;

  /* faces */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* metrics */
  --gut: clamp(1.15rem, 4vw, 3rem);
  --max: 1180px;
  --hdr: 62px;
}

/* ---------- 3. RESET ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 1rem); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
/* iOS: kill the grey flash on tap, keep our own :active/:focus states instead */
a,button{ -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p,ul,ol{ margin:0; }
a{ color:var(--yellow); text-underline-offset:3px; }

:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:.5rem; top:-4rem; z-index:200;
  background:var(--yellow); color:var(--ink); padding:.6rem 1rem;
  font-family:var(--mono); font-size:.8125rem; font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{ top:.5rem; }

/* ---------- 4. TYPE ------------------------------------------------------- */
/* padding respects the notch / home-bar insets in iOS landscape */
.wrap{
  max-width:var(--max); margin-inline:auto;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.lbl{
  font-family:var(--mono); font-weight:600; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey-d);
}
.lbl--y{ color:var(--yellow); }
.lbl--ok{ color:var(--ok); }

.h-xl{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,4.75rem); line-height:.9; letter-spacing:-.005em;
}
.h-l{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.85rem,3.8vw,2.75rem); line-height:.98;
}
.h-m{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.05; letter-spacing:.005em;
}
.h-s{ font-weight:600; font-size:1.0625rem; line-height:1.4; }

.lead{ font-size:1.0625rem; color:var(--grey); max-width:60ch; }
.muted{ color:var(--grey); }
.dim{ color:var(--grey-d); }
.small{ font-size:.875rem; line-height:1.6; }
.measure{ max-width:64ch; }

/* ---------- 5. PLATE — the signature element ------------------------------ */
.plate{ background:var(--plate); border:1px solid var(--rule); position:relative; }
.plate--raised{ background:var(--plate-2); }

/* two drilled rivets, opposing corners */
.plate--rivet::before,.plate--rivet::after{
  content:""; position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 1px var(--rule-2); pointer-events:none;
}
.plate--rivet::before{ top:7px; left:7px; }
.plate--rivet::after{ bottom:7px; right:7px; }

.plate-hd{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.5rem .8rem; border-bottom:1px solid var(--rule); background:rgba(0,0,0,.22);
}
/* keep header and body clear of the drilled rivets in the corners */
.plate--rivet > .plate-hd{ padding-left:1.2rem; padding-right:1.2rem; }
.plate-bd{ padding:1rem .95rem 1.15rem; }
.plate--rivet > .plate-bd{ padding-right:1.25rem; }

.tag-id{
  font-family:var(--mono); font-weight:600; font-size:1.4rem;
  letter-spacing:.02em; line-height:1.1; color:var(--paper);
}
.tag-sub{
  font-family:var(--mono); font-size:.75rem; color:var(--grey-d);
  letter-spacing:.04em; margin-top:.3rem;
}

/* key/value readout rows */
.kv{
  display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0;
  border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:.78rem;
  font-variant-numeric:tabular-nums;
}
.kv:last-child{ border-bottom:0; }
.kv .k{ color:var(--grey-d); letter-spacing:.05em; }
.kv .v{ color:var(--paper); }
.kv .v.y{ color:var(--yellow); }
.kv .v.ok{ color:var(--ok); }
.kv .v.no{ color:var(--flag); }

/* hazard rule — deployed sparingly, as a hard section break */
.hazard{
  height:9px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 9px, var(--ink) 9px 19px);
  opacity:.85;
}

/* ---------- 6. HEADER ----------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(8,14,26,.94); border-bottom:1px solid var(--rule);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.hdr-in{
  max-width:var(--max); margin-inline:auto;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
  height:var(--hdr); display:flex; align-items:center; gap:1rem;
}
.wordmark{ display:flex; align-items:baseline; gap:.4rem; text-decoration:none; color:var(--paper); flex-shrink:0; }
.wordmark .n{
  font-family:var(--disp); font-weight:800; font-size:1.3rem;
  text-transform:uppercase; letter-spacing:.01em; white-space:nowrap;
}
.wordmark .llc{
  font-family:var(--mono); font-size:.5625rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:var(--yellow); padding:.14rem .32rem;
}

/* two nav items styled as plate tabs, keyed to the page below */
.tabs{ display:flex; align-items:flex-end; gap:0; margin-left:auto; height:100%; }
.tab{
  display:flex; align-items:center; height:calc(100% - 12px); padding:0 1.1rem;
  border:1px solid var(--rule); border-bottom:0; background:transparent;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey);
  text-decoration:none; white-space:nowrap; transition:color .15s, background .15s;
}
.tab + .tab{ border-left:0; }
.tab:hover{ color:var(--paper); background:var(--plate); }
.tab[aria-current="page"]{
  color:var(--ink); background:var(--yellow); border-color:var(--yellow);
}
.hdr-cta{
  margin-left:1rem; padding:.5rem 1rem; border:1px solid var(--rule-2);
  font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper); text-decoration:none;
  transition:border-color .15s, background .15s; white-space:nowrap;
}
.hdr-cta:hover{ border-color:var(--yellow); background:rgba(255,194,14,.08); }

.burger{
  margin-left:auto; width:44px; height:44px; display:none;
  flex-direction:column; justify-content:center; gap:5px; border:1px solid var(--rule);
}
.burger span{ display:block; height:2px; background:var(--paper); margin-inline:auto; width:18px; transition:transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{ display:none; border-top:1px solid var(--rule); background:var(--navy); }
.mnav.open{ display:block; }
.mnav a{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.95rem max(var(--gut), env(safe-area-inset-left)); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper); text-decoration:none;
}
.mnav a:last-child{ border-bottom:0; }
.mnav a[aria-current="page"]{ color:var(--yellow); }
.mnav a .rf{ font-size:.6875rem; color:var(--grey-d); letter-spacing:.1em; }

/* ---------- 7. FOOTER ----------------------------------------------------- */
.ftr{ border-top:1px solid var(--rule); background:var(--navy); }
.ftr-in{
  max-width:var(--max); margin-inline:auto; padding:2.75rem var(--gut) 2rem;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
  display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr)); gap:2.25rem;
}
.ftr h3{ margin-bottom:.9rem; }
.ftr ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.ftr ul a{ font-size:.875rem; color:var(--grey); text-decoration:none; }
.ftr ul a:hover{ color:var(--yellow); }
.ftr-contact{ font-family:var(--mono); font-size:.8125rem; line-height:1.9; color:var(--grey); margin-top:1rem; }
.ftr-contact a{ color:var(--yellow); text-decoration:none; }
.ftr-contact a:hover{ text-decoration:underline; }
.ftr-btm{
  max-width:var(--max); margin-inline:auto; padding:1.25rem var(--gut) 2.25rem;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
  padding-bottom:max(2.25rem, calc(1rem + env(safe-area-inset-bottom)));
  border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between; font-size:.78rem; color:var(--grey-d);
}

/* ---------- 8. BUTTONS ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.5rem; font-family:var(--mono); font-weight:600; font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; transition:background .15s, border-color .15s, color .15s;
}
.btn--y{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.btn--y:hover{ background:var(--yellow-hover); border-color:var(--yellow-hover); }
.btn--o{ border-color:var(--rule-2); color:var(--paper); }
.btn--o:hover{ border-color:var(--yellow); background:rgba(255,194,14,.08); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- 9. SECTIONS --------------------------------------------------- */
.sec{ padding-block:clamp(3rem,6.5vw,5rem); border-top:1px solid var(--rule); }
.sec--alt{ background:var(--navy); }
.sec--tight{ padding-block:clamp(2.25rem,4vw,3rem); }
.sec-hd{ display:flex; flex-direction:column; gap:.65rem; margin-bottom:2.5rem; }
.sec-hd .lbl{ display:flex; align-items:center; gap:.65rem; }
.sec-hd .lbl::before{ content:""; width:18px; height:2px; background:var(--rule-2); flex-shrink:0; }

/* ---------- 10. HOME ------------------------------------------------------ */
.hero-home{ padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,3.5rem); }
.hero-home .h-xl{ margin-top:1.5rem; }
.hero-home .lead{ margin-top:1.5rem; font-size:1.125rem; }

/* (the old rotating-tagline hero was retired with the rebrand; the home hero
   now states one thing and uses the standard hero classes above) */

/* hero process flow — the three-stage story at a glance. Stacks vertically
   with down-arrows on phones, runs horizontally with right-arrows on wider
   screens. An industrial process diagram, not an illustration. */
.flow{
  margin-top:clamp(1.9rem,5vw,2.75rem); display:flex; flex-direction:column;
  gap:.4rem; max-width:430px;
}
.flow-step{
  background:var(--plate); border:1px solid var(--rule-2);
  padding:.9rem 1rem .95rem; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.25rem; text-align:center;
}
.flow-step b{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.1rem,4.5vw,1.3rem); line-height:1.05; letter-spacing:.015em;
}
.flow-step .fx{ color:var(--yellow); }
.flow-step .fx--ok{ color:var(--ok); }
.flow-sub{
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey-d);
}
.flow-arrow{ display:flex; justify-content:center; align-items:center; color:var(--yellow); }
.flow-arrow::before{
  content:"\2193"; font-family:var(--mono); font-weight:600; font-size:1.05rem; line-height:1;
}
@media (min-width:561px){
  .flow{ flex-direction:row; align-items:stretch; max-width:none; gap:.5rem; }
  .flow-step{ flex:1; }
  .flow-arrow::before{ content:"\2192"; }
}

/* mobile/desktop copy variants for the homepage opener */
.m-only{ display:none; }
@media (max-width:560px){
  .m-only{ display:block; }
  .d-only{ display:none !important; }
}

/* faint drafting grid behind hero sections */
.hero-tex{ position:relative; }
.hero-tex::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(148,163,182,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,182,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 0%, black 25%, transparent 100%);
  mask-image:radial-gradient(ellipse 90% 85% at 50% 0%, black 25%, transparent 100%);
}

.paths{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:1.25rem; }
.path{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .18s, background .18s;
}
.path:hover{ border-color:var(--rule-2); background:var(--plate-2); }
.path:hover .path-go{ color:var(--yellow); }
.path .plate-bd{ display:flex; flex-direction:column; gap:1rem; flex:1; padding:1.5rem 1.4rem 1.4rem; }
.path-name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3vw,2rem); line-height:1; }
/* audience first — this is what stops a visitor picking the wrong lane */
.path-who{
  font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  color:var(--yellow); margin-top:-.35rem;
}
.path-desc{ color:var(--grey); font-size:.9375rem; line-height:1.6; }
.path-list{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.path-list li{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey); border:1px solid var(--rule); padding:.22rem .5rem;
}
/* Reads as a real button at rest, not just coloured text. The whole card is the
   link, but on a phone there is no hover to reveal that, so the affordance has
   to be visible before you touch it. */
.path-go{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--mono); font-size:.8125rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--yellow); border:1px solid var(--yellow);
  padding:.75rem 1rem; margin-top:auto;
  transition:background .18s, color .18s;
}
.path-go span{ display:inline-block; transition:transform .18s; }
.path:hover .path-go,
.path:active .path-go,
.path:focus-visible .path-go{ background:var(--yellow); color:var(--ink); }
.path:hover .path-go span{ transform:translateX(4px); }

/* client roster — a grid of tag plates, name first */
.clients{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:1.1rem; }
.client .plate-hd{ gap:.75rem; }
.client .plate-hd .lbl--y{ white-space:nowrap; }
.client{ display:flex; flex-direction:column; transition:border-color .18s, background .18s; }
.client:hover{ border-color:var(--rule-2); background:var(--plate-2); }
.client .plate-bd{ display:flex; flex-direction:column; gap:.55rem; flex:1; padding:1.05rem 1rem 1.2rem; }
.client-name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.45rem; line-height:1; }
.client-desc{ font-size:.8125rem; color:var(--grey-d); line-height:1.55; }

.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1.25rem; align-items:stretch; }
.team > article{ display:flex; flex-direction:column; }
.team .plate-bd{ padding:1.1rem 1.05rem 1.25rem; flex:1; }
.team-photo-wrap{ position:relative; aspect-ratio:1; overflow:hidden; border-bottom:1px solid var(--rule); background:var(--plate-2); }
/* duotone is baked into the JPEGs — see README */
.team-photo{ width:100%; height:100%; object-fit:cover; }
.team-name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.3rem; line-height:1.05; }
.team-role{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); margin-top:.35rem; }
.team-bio{ font-size:.875rem; color:var(--grey); line-height:1.6; margin-top:.75rem; }

/* ---------- 11. PRODUCT PAGES --------------------------------------------- */
.hero-tg{ padding-block:clamp(3rem,6vw,4.5rem) clamp(2.5rem,5vw,3.5rem); }
.hero-tg-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(2rem,4vw,3.5rem); align-items:center; }
/* grid items default to min-content width, which stops the nowrap mockup tabs
   from ever scrolling and blows out narrow phones. min-width:0 lets them shrink
   so .mock-tabs scrolls horizontally as intended. */
.hero-tg-grid > *,.thread-grid > *{ min-width:0; }
.hero-tg .h-xl{ margin-block:1.25rem .75rem; }
.brandline{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.brandline .pd{ width:22px; height:1px; background:var(--rule-2); }

.trust{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:1.5rem; font-family:var(--mono); font-size:.6875rem; letter-spacing:.05em; text-transform:uppercase; color:var(--grey-d); }
.trust span::before{ content:"✓ "; color:var(--ok); }

/* tabbed workflow mockups */
.mock-tabs{ display:flex; border-bottom:1px solid var(--rule); background:rgba(0,0,0,.22); overflow-x:auto; }
.mock-tab{
  flex:1 0 auto; padding:.7rem .85rem; font-family:var(--mono); font-size:.6875rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-d);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s;
}
.mock-tab:hover{ color:var(--grey); }
.mock-tab[aria-selected="true"]{ color:var(--yellow); border-bottom-color:var(--yellow); }
.mock-panel[hidden]{ display:none; }
.mock-panel{ padding:1.1rem 1rem 1.25rem; }
.mock-title{ font-weight:600; font-size:.9375rem; margin-block:.75rem .8rem; }
.checks{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; color:var(--grey); }
.checks li{ display:flex; align-items:flex-start; gap:.6rem; }
.checks .bx{
  flex-shrink:0; width:15px; height:15px; border:1px solid var(--ok); margin-top:.2rem;
  display:grid; place-items:center; font-size:9px; color:var(--ok); font-family:var(--mono);
}
.checks .bx::after{ content:"✓"; }
.checks .bx--no{ border-color:var(--flag); color:var(--flag); }
.checks .bx--no::after{ content:"!"; }
.mock-foot{ margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--rule); font-family:var(--mono); font-size:.6875rem; color:var(--grey-d); letter-spacing:.03em; }

/* two intake channels */
.channels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1.25rem; }
.chan .plate-bd{ padding:1.4rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:1.1rem; }
.chan-name{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1; }
/* module plates sit 2x2; the command center spans both as the capstone */
.modules{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.module--wide{ grid-column:1/-1; }
.module--wide .chan-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  flex-direction:row;
}
@media (max-width:760px){
  .modules{ grid-template-columns:1fr; }
  .module--wide .chan-list{ grid-template-columns:1fr; }
}

/* integration note — a footnote, deliberately not another plate */
.integrates{
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:baseline;
  margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--rule);
}
.integrates p{ flex:1; min-width:260px; font-size:.9375rem; color:var(--grey); line-height:1.6; }
/* a lone client plate shouldn't stretch the full width */
.clients--one{ grid-template-columns:minmax(0,520px); }

/* the three doors — same list component, labels promoted to the accent
   because who each view belongs to is the point of the section */
.egs--doors li{ font-size:.9375rem; padding:1.05rem 1.05rem 1.15rem; }
.egs--doors li b{ font-size:.6875rem; color:var(--yellow); margin-bottom:.55rem; }
.doors-note{
  margin-top:1.1rem; font-size:.8125rem; line-height:1.6; color:var(--grey-d);
}

/* label-only cards — the header carries the whole title, so the body reads up */
.chan--plain .plate-hd{ flex-wrap:wrap; gap:.35rem .9rem; }
.chan--plain .plate-hd .lbl--y{ text-align:right; }
.chan--plain .chan-desc{ font-size:1rem; line-height:1.65; }

/* a considered aside, not fine print — this one earns being readable */
.closing-note{
  margin-top:1.75rem; max-width:64ch; font-size:.9375rem; line-height:1.7;
  color:var(--grey); border-left:2px solid var(--rule-2); padding-left:1.1rem;
}

.chan-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.25rem; }
.chan-glyph{ width:64px; height:64px; color:var(--grey-d); flex-shrink:0; }
.chan-qr{ shape-rendering:crispEdges; }
.chan-what{ font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--yellow); }
.chan-desc{ color:var(--grey); font-size:.9375rem; line-height:1.6; }
.chan-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.chan-list li{ background:var(--plate-2); padding:.55rem .75rem; font-size:.875rem; display:flex; gap:.7rem; align-items:baseline; }
.chan-list li .ix{ font-family:var(--mono); font-size:.6875rem; color:var(--grey-d); }

/* how it works */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.step{ background:var(--plate); padding:1.75rem 1.4rem 1.9rem; }
.step-n{ font-family:var(--mono); font-weight:600; font-size:.75rem; color:var(--yellow); letter-spacing:.1em; }
.step h3{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.35rem; line-height:1.05; margin-block:.9rem .6rem; }
.step p{ font-size:.9375rem; color:var(--grey); line-height:1.6; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.stat{ background:var(--plate); padding:1.4rem 1.1rem; }
.stat-v{ font-family:var(--disp); font-weight:800; font-size:2rem; line-height:1; color:var(--yellow); text-transform:uppercase; }
.stat-l{ font-size:.8125rem; color:var(--grey); margin-top:.5rem; line-height:1.45; }

/* safety records */
.safety-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1.25rem; }
.record{ display:flex; flex-direction:column; gap:.5rem; }
.record .plate-bd{ padding:1.1rem 1.05rem 1.2rem; }

/* text thread mockup */
.thread-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.phone{ max-width:260px; margin-inline:auto; width:100%; border:1px solid var(--rule-2); background:#05080F; padding:.5rem; }
.phone-bar{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.625rem; color:var(--grey-d); padding:.35rem .5rem .6rem; }
.thread{ display:flex; flex-direction:column; gap:.5rem; padding:.35rem .25rem .5rem; min-height:240px; }
.bub{ max-width:86%; padding:.5rem .7rem; font-size:.78rem; line-height:1.45; }
.bub--in{ align-self:flex-start; background:var(--plate-2); color:var(--paper); }
.bub--out{ align-self:flex-end; background:var(--yellow); color:var(--ink); font-weight:500; }
.bub .mono{ font-size:.72rem; }
/* tappable link inside an inbound text */
.bub-link{
  display:block; margin-top:.35rem; padding:.3rem .5rem;
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--yellow); background:rgba(0,0,0,.28); border:1px solid var(--rule-2);
  text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere;
}
.bub .ok-mark{ color:var(--ok); font-weight:700; }

/* ---------- 12. CALCULATORS ----------------------------------------------- */
.calc-tabs{ display:flex; gap:0; border-bottom:1px solid var(--rule); overflow-x:auto; margin-bottom:2rem; }
.calc-tab{
  padding:.75rem 1.25rem; font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--grey-d);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.calc-tab:hover{ color:var(--grey); }
.calc-tab[aria-selected="true"]{ color:var(--yellow); border-bottom-color:var(--yellow); }
.calc-panel[hidden]{ display:none; }

/* full-width band across the top of each model */
.calc-note{
  border:1px solid var(--rule); border-left:2px solid var(--yellow);
  background:var(--plate); padding:.9rem 1.1rem;
  font-size:.9375rem; color:var(--grey); line-height:1.6; margin-bottom:1.5rem;
}
.calc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:1.25rem; align-items:start; }

.field{ margin-bottom:1.4rem; }
.field:last-child{ margin-bottom:0; }
.field-lbl{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.55rem; }
.field-lbl span{ font-size:.875rem; color:var(--grey); }
.field-in{ display:flex; align-items:center; gap:.15rem; }
.field-in .cur{ font-family:var(--mono); font-size:.8125rem; color:var(--grey-d); }
.field-in input[type=number]{
  width:74px; background:var(--ink); border:1px solid var(--rule); color:var(--yellow);
  font-family:var(--mono); font-weight:600; font-size:.875rem; padding:.3rem .45rem;
  text-align:right; font-variant-numeric:tabular-nums;
}
.field-in input[type=number]:focus{ border-color:var(--yellow); outline-offset:1px; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  background:var(--rule-2); border-radius:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; background:var(--yellow);
  border:2px solid var(--ink); cursor:pointer; border-radius:0;
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; background:var(--yellow); border:2px solid var(--ink);
  cursor:pointer; border-radius:0;
}

/* gated readout */
.readout{ position:relative; }
.readout .plate-bd{ padding:1.5rem 1.35rem 1.6rem; }
.readout-total{
  font-family:var(--disp); font-weight:800; font-size:clamp(2.75rem,7vw,4rem);
  line-height:1; color:var(--yellow); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.locked{ filter:blur(9px); opacity:.5; user-select:none; }
.gate{
  border-top:1px solid var(--rule); margin-top:1.35rem; padding-top:1.35rem;
  display:flex; flex-direction:column; gap:.85rem;
}
.gate p{ font-size:.875rem; color:var(--grey); line-height:1.55; }
.gate .btn{ width:100%; }
.disclaimer{ font-size:.6875rem; color:var(--grey-d); line-height:1.5; margin-top:1rem; max-width:70ch; }

/* ---------- 13. LADDER & CALLOUT (kept for reuse) -------------------------- */
.hero-ai{ padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem); }
.hero-ai .h-xl{ margin-block:1.25rem 1.25rem; }

/* the ladder — stages stacked in order, threaded by one vertical rail.
   The rail sits behind the stage plates, so it shows only in the gaps. */
.ladder{ display:flex; flex-direction:column; position:relative; }
.ladder::before{
  content:""; position:absolute; top:0; bottom:0; left:94px; width:1px;
  background:var(--rule-2); z-index:0;
}
.rung-mark .plate{ z-index:1; }
.rung{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--rule);
}
.rung:first-child{ border-top:0; padding-top:0; }
.rung-mark{ position:relative; }
.rung-mark .plate{ position:sticky; top:calc(var(--hdr) + 1.25rem); }
.rung-mark .tag-id{ font-size:2.2rem; }
.rung-bd{ display:flex; flex-direction:column; gap:1.1rem; }
.rung-bd h2{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3.2vw,2.1rem); line-height:1; }
.rung-bd p{ color:var(--grey); font-size:1rem; line-height:1.7; max-width:62ch; }
.rung-bd p strong{ color:var(--paper); font-weight:600; }
.egs{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.egs li{ background:var(--plate); padding:.85rem .9rem; font-size:.875rem; color:var(--grey); line-height:1.5; }
.egs li b{ display:block; font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-d); font-weight:600; margin-bottom:.4rem; }
.stop{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--grey-d);
  border-left:2px solid var(--rule-2); padding:.4rem 0 .4rem .85rem;
}
.stop b{ color:var(--yellow); font-weight:600; }

/* security checkpoint — a solid-bodied plate the ladder rail passes behind */
.rung-break{
  position:relative; z-index:1;
  border-top:1px solid var(--rule);
  padding-block:clamp(2rem,4vw,2.75rem);
}
.callout{ border:1px solid var(--yellow-d); background:var(--plate); }
.callout .plate-bd{ padding:1.6rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:1rem; }
.callout h2{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.5rem,3vw,2rem); line-height:1; }
.callout ul{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:1px; background:var(--yellow-d); border:1px solid var(--yellow-d); }
.callout ul li{ background:var(--navy); padding:.9rem .95rem; font-size:.9375rem; color:var(--paper); line-height:1.5; }
.callout ul li b{ display:block; font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); font-weight:600; margin-bottom:.4rem; }

.bridge{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
.bridge p{ font-size:1.0625rem; color:var(--grey); max-width:60ch; line-height:1.7; }

/* ---------- CONTACT BAND (shared) ----------------------------------------- */
.contact-band .plate-bd{ padding:clamp(1.75rem,4vw,2.75rem) clamp(1.4rem,3vw,2.5rem); display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; }
.contact-band h2{ max-width:22ch; }
.contact-lines{ font-family:var(--mono); font-size:.8125rem; color:var(--grey); line-height:1.9; }
.contact-lines a{ color:var(--yellow); text-decoration:none; }
.contact-lines a:hover{ text-decoration:underline; }

/* ---------- 15. PRODUCT PREVIEW ------------------------------------------- */
/* An honest, replaceable product-preview frame. The body holds either a
   stylized illustration built from kv/checks rows (today) or a real product
   capture (<img class="appframe-img">) when one exists. The caption keeps us
   honest: never label an illustration as a screenshot. */
.appframe{ background:var(--plate); border:1px solid var(--rule); }
.appframe-bar{
  display:flex; align-items:center; gap:.45rem; padding:.5rem .8rem;
  border-bottom:1px solid var(--rule); background:rgba(0,0,0,.28);
}
.appframe-bar i{
  width:7px; height:7px; border-radius:50%; background:var(--rule-2); flex-shrink:0;
}
.appframe-bar .lbl{ margin-left:.45rem; }
.appframe-bd{ padding:1rem .95rem 1.1rem; }
.appframe-img{ width:100%; height:auto; display:block; }
.appframe-cap{
  margin-top:.55rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.04em; color:var(--grey);
}

/* large application frame — the office-side structure on /teams/.
   Groups mirror the real product's tab structure; module rows are sized to
   read, not to decorate. */
.appframe--lg .appframe-bd{ padding:0; }
.appframe--lg .appframe-bar{ padding:.6rem .95rem; }
.appframe-bar .lbl--y{ margin-left:auto; }
.office-groups{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--rule);
}
.office-group{
  background:var(--plate); padding:1.35rem 1.2rem 1.5rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.office-group-name{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:1.35rem; line-height:1;
}
.office-group-desc{ font-size:.8125rem; color:var(--grey); line-height:1.5; margin-bottom:.45rem; }
.office-mods{
  list-style:none; padding:0; display:flex; flex-direction:column;
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.office-mods li{ background:var(--plate-2); padding:.6rem .75rem .65rem; font-size:.9375rem; font-weight:500; }
.office-mods .sub{
  display:block; font-size:.75rem; font-weight:400; color:var(--grey-d);
  line-height:1.45; margin-top:.2rem;
}
@media (max-width:980px){ .office-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .office-groups{ grid-template-columns:1fr; } }
@media (max-width:480px){ .appframe-bar .lbl--y{ display:none; } }

/* documentation use-case panels — "The record is already there." on both
   buyer pages. Three substantial cards; big identifiers, short copy. */
.doccases{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.doccase{ display:flex; flex-direction:column; }
.doccase .plate-bd{
  flex:1; padding:1.6rem 1.4rem 1.75rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.doccase-n{
  font-family:var(--mono); font-weight:600; font-size:2.3rem; line-height:1;
  color:var(--paper); padding-bottom:.75rem; border-bottom:1px solid var(--rule-2);
}
.doccase-t{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.35rem,2.2vw,1.6rem); line-height:1.02;
}
.doccase-s{
  font-family:var(--mono); font-weight:600; font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--yellow);
}
.doccase-d{ font-size:.9375rem; color:var(--grey); line-height:1.65; }
.doccase .path-list{ margin-top:auto; padding-top:.35rem; }
.doccase .chan-list{ margin-top:auto; }
/* two-up variant — capability areas get a full editorial half-row each */
.doccases--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
@media (max-width:900px){ .doccases, .doccases--2{ grid-template-columns:1fr; } }

/* consultant application window — the /consultants/ platform preview.
   A widescreen app frame: dark left navigation (mirrors the real product's
   structure) beside a dashboard area. Green is the product's active/nav
   state — semantic, not the site accent. Primary text stays high-contrast. */
.appwin{ background:var(--plate); border:1px solid var(--rule); }
.appwin-body{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:1px; background:var(--rule); }
.appnav{ background:#0A1322; padding:1rem 0 1.3rem; display:flex; flex-direction:column; }
.appnav-brand{ display:flex; align-items:baseline; gap:.35rem; padding:.15rem 1.1rem 1rem; border-bottom:1px solid var(--rule); margin-bottom:.75rem; }
.appnav-brand .n{ font-family:var(--disp); font-weight:800; font-size:1.1rem; letter-spacing:.01em; text-transform:uppercase; color:var(--paper); }
.appnav-brand .tag{
  font-family:var(--mono); font-size:.5rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:var(--yellow); padding:.12rem .3rem;
}
.appnav-cat{
  font-family:var(--mono); font-weight:600; font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); padding:.9rem 1.1rem .4rem;
}
.appnav-item{
  display:flex; align-items:center; gap:.7rem; padding:.5rem 1.1rem;
  font-size:.9375rem; font-weight:500; color:var(--grey);
  border-left:3px solid transparent;
}
.appnav-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.appnav-item.on{
  color:#EAF6EF; background:rgba(63,191,127,.16); border-left-color:var(--ok);
}
.appnav-item.on svg{ opacity:1; }
.appmain{ background:var(--navy); padding:1.35rem 1.5rem 1.6rem; min-width:0; }
.appmain-hd{ margin-bottom:1.15rem; }
.appmain-hd h3{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:1.7rem; line-height:1; color:var(--paper);
}
.appmain-hd p{ color:var(--grey); font-size:.9375rem; margin-top:.4rem; }
.apppanels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.apppanel{ background:var(--plate); border:1px solid var(--rule); }
.apppanel-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding:.65rem .9rem; border-bottom:1px solid var(--rule-2);
  font-weight:600; font-size:.9375rem; color:var(--paper);
}
.approw{
  display:flex; align-items:baseline; gap:.6rem; padding:.55rem .9rem;
  border-bottom:1px solid var(--rule); font-size:.875rem; color:var(--paper); line-height:1.45;
}
.approw:last-child{ border-bottom:0; }
.approw .who{ color:var(--grey); }
.appchip{
  margin-left:auto; font-family:var(--mono); font-size:.625rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:.14rem .4rem;
  border:1px solid currentColor; white-space:nowrap; align-self:center;
}
.appchip--open{ color:var(--flag); }
.appchip--due{ color:var(--yellow); }
.appchip--ok{ color:var(--ok); }
.appchip--sched{ color:var(--grey); }
@media (max-width:900px){
  .appwin-body{ grid-template-columns:1fr; }
  .appnav{ flex-direction:row; align-items:center; overflow-x:auto; gap:.35rem; padding:.65rem .65rem; }
  .appnav-brand{ border-bottom:0; margin:0; padding:0 .5rem 0 .25rem; }
  .appnav-brand .n{ font-size:.95rem; }
  .appnav-cat{ display:none; }
  .appnav-item{ border-left:0; border:1px solid var(--rule); padding:.45rem .7rem; white-space:nowrap; }
  .appnav-item.on{ border-color:var(--ok); }
  .apppanels{ grid-template-columns:1fr; }
  .appmain{ padding:1.1rem 1rem 1.25rem; }
}

/* ---------- 14. RESPONSIVE ------------------------------------------------ */
/* three nav tabs need more room than two — collapse to the hamburger sooner */
@media (max-width:940px){
  .tabs,.hdr-cta{ display:none; }
  .burger{ display:flex; }
  .ftr-in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .hero-tg-grid,.thread-grid{ grid-template-columns:1fr; }
  .thread-grid .phone-col{ order:-1; }
}

@media (max-width:760px){
  .ladder::before{ display:none; }          /* no rail once the rungs stack */
  .rung{ grid-template-columns:1fr; gap:1.1rem; }
  .rung-mark .plate{ position:static; }
  .rung-mark{ max-width:200px; }
}

@media (max-width:560px){
  .ftr-in{ grid-template-columns:1fr; gap:1.75rem; }
  .ftr-btm{ flex-direction:column; }
  .btn{ width:100%; }
  .btn-row .btn{ width:100%; }
  .stat-v{ font-size:1.6rem; }
  .calc-grid{ grid-template-columns:1fr; }
  .readout{ order:-1; }
  /* small phones: let long headlines wrap at a friendlier size, and give the
     mono trust row a touch more presence */
  .h-xl{ font-size:clamp(2rem, 9vw, 2.6rem); }
  .trust{ font-size:.75rem; }
}

/* ---------- 16. TOUCH ----------------------------------------------------- */
/* iOS Safari / touch-first refinements. Hover never gates content anywhere on
   the site; these rules only grow tap targets and prevent focus zoom. */
@media (pointer:coarse){
  /* Safari zooms the page when focusing inputs below 16px */
  input[type=number], input[type=text], input[type=email], select, textarea{ font-size:16px; }
  /* inline phone/email links get a real thumb target without shifting layout */
  p a[href^="tel:"], p a[href^="mailto:"]{
    display:inline-block; padding-block:.7rem; margin-block:-.7rem;
  }
  /* footer link lists become full-width tappable rows */
  .ftr ul{ gap:.15rem; }
  .ftr ul a{ display:block; padding-block:.55rem; }
  /* workflow mockup tabs reach comfortable tap height */
  .mock-tab{ min-height:44px; }
  /* header wordmark: taller target inside the fixed-height bar */
  .wordmark{ padding-block:.35rem; margin-block:-.35rem; }
}