/* ============================================================
   FACES
   Archivo carries display and body: a signage grotesque with
   machined character. Martian Mono is the engraved legend and
   every measured figure. Both subset and embedded.
   ============================================================ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(assets/archivo.woff2) format('woff2');
}
@font-face{
  font-family:'Martian Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(assets/martianmono.woff2) format('woff2');
}

/* ============================================================
   TOKENS
   Dark values track the application's dark palette so the site
   and the product read as one object.
   ============================================================ */
:root{
  --void:#0C1514;          /* rack void, page ground; app canvas */
  --face:#16201F;          /* panel face; app card */
  --face-hi:#1B2725;       /* panel face, catching light */
  --recess:#0E1716;        /* recessed field behind ports */
  --strip:#1F2C2A;         /* phenolic label strip */
  --groove:#26332F;        /* engraved groove */
  --bevel:#3A4A46;         /* lit top edge */
  --rule:#3F514D;          /* divider */

  --ink:#E7ECEB;           /* primary text */
  --ink-mute:#A8B5B1;      /* muted text */
  --ink-low:#5C6F6A;       /* decorative only, never body */

  --teal:#2DD4BF;          /* continuity, live, primary fill */
  --teal-hi:#5EEAD4;       /* hover */
  --teal-lo:#14B8A6;       /* pressed */

  --sheet:#E9EFED;         /* as-built ground, app light theme */
  --sheet-hi:#F4F8F7;      /* raised */
  --sheet-rule:#C6D2CE;    /* hairline */
  --sheet-ink:#0C1514;
  --sheet-mute:#4A5B57;
  --teal-ink:#0A6E60;      /* teal at body contrast on light */
  --flag:#E06A57;          /* discrepancy, on dark */
  --flag-ink:#A6402E;      /* discrepancy, at body contrast on light */

  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:82rem;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--display);
  font-size:1.0625rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:1px;
}
.sheet :focus-visible{outline-color:var(--teal-ink)}

/* ============================================================
   PANEL: the signature. An enameled steel face with an engraved
   groove and a top edge that catches the light. Replaces every
   soft-shadow card on the incumbent site.
   ============================================================ */
.panel{
  position:relative;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:linear-gradient(180deg,var(--face-hi) 0%,var(--face) 42%,#131D1C 100%);
  border:1px solid var(--groove);
  border-top-color:var(--bevel);
  border-radius:2px;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  isolation:isolate;
}
/* brushed enamel: a horizontal grain with a fine diagonal tooth over it,
   drawn rather than implied by one 1px highlight */
.panel::before{
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.030) 0 1px, rgba(0,0,0,.045) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
  mix-blend-mode:overlay;
}
.panel > *{position:relative}

/* engraved legend */
.legend{
  font-family:var(--mono);
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  text-shadow:0 1px 0 rgba(255,255,255,.05);
}
.legend.dim{color:var(--ink-low)}
.sheet .legend{color:var(--sheet-mute);text-shadow:0 1px 0 rgba(255,255,255,.7)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.band{padding-block:clamp(4rem,7vw,7rem)}
/* a section carrying one idea does not get the full inter-band air */
.band.tight{padding-block:clamp(2.25rem,4vw,3.5rem)}
.sheet{background:var(--sheet);color:var(--sheet-ink)}

/* section heading: no eyebrow, the heading carries its own weight */
h2{
  font-size:clamp(1.9rem,3.6vw,3.1rem);
  font-weight:650;
  font-stretch:80%;
  letter-spacing:-.018em;
  line-height:1.04;
  text-wrap:balance;
  max-width:26ch;
}
.lede{
  margin-top:1.25rem;
  max-width:62ch;
  text-wrap:pretty;
  color:var(--ink-mute);
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);
}
.sheet .lede{color:var(--sheet-mute)}

/* detail points: bold label, one sentence */
.points{margin:2.5rem 0 0;padding:0;list-style:none;display:grid;gap:1.5rem;max-width:60ch}
.points li{padding-left:1.375rem;position:relative}
.points li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:1px;
  background:var(--teal);
}
.sheet .points li::before{background:var(--teal-ink)}
.points b{display:block;font-weight:650;letter-spacing:-.012em;color:var(--ink)}
.sheet .points b{color:var(--sheet-ink)}
.points span{color:var(--ink-mute)}
.sheet .points span{color:var(--sheet-mute)}

/* ============================================================
   HEADER: a thin rack rail
   ============================================================ */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(12,21,20,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--groove);
}
.rail{display:flex;align-items:center;gap:2rem;height:66px}
.mark{display:flex;align-items:center;flex:0 0 auto;color:var(--ink)}
nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
nav a{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);text-decoration:none;
  transition:color .18s var(--ease);
}
nav a:hover{color:var(--ink)}
.rail .btn{padding:.625rem 1.125rem;font-size:.625rem}

/* narrow rail: the links fold into a panel behind a machined button */
.menu-btn{
  display:none;
  width:40px;height:40px;flex:0 0 auto;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--face-hi);border:1px solid var(--groove);border-top-color:var(--bevel);
  border-radius:2px;cursor:pointer;padding:0;
}
.menu-btn span{display:block;width:16px;height:1.5px;background:var(--ink-mute);transition:background .18s var(--ease)}
.menu-btn:hover span{background:var(--ink)}
.menu-btn[aria-expanded="true"] span{background:var(--teal)}
.mobile-menu{
  position:absolute;top:100%;left:0;right:0;
  background:var(--face);border-bottom:1px solid var(--groove);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.9);
  padding:.5rem var(--gut) 1.25rem;
}
.mobile-menu nav{display:block;margin:0}
.mobile-menu nav a{
  display:block;padding:1rem 0;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);text-decoration:none;
  border-bottom:1px solid var(--groove);
}
.mobile-menu nav a:hover{color:var(--ink)}
.mobile-menu-actions{display:grid;gap:.75rem;margin-top:1.25rem}
.mobile-menu-actions .btn{justify-content:center}
@media (max-width:940px){
  nav .hide-sm{display:none}
  .menu-btn{display:inline-flex}
}
/* the rail carries one action at phone width; the hero holds both */
@media (max-width:640px){
  .rail{height:58px;gap:1rem}
  nav .rail-demo{display:none}
  .rail .btn{padding:.5625rem .875rem;letter-spacing:.1em}
  .mark img{height:19px;width:auto}
}

/* ============================================================
   BUTTONS: solid fills only, dark text on teal
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.9375rem 1.5rem;border:0;border-radius:2px;cursor:pointer;
  white-space:nowrap;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
/* Hover restates color and text-decoration on every variant: the buttons are
   dropped into a page that may carry its own a:hover rules, and a bare
   pseudo-class there outbids a single class here. */
.btn-primary{background:var(--teal);color:#0C1514}
.btn-primary:hover{background:var(--teal-hi);color:#0C1514;text-decoration:none}
.btn-primary:active{background:var(--teal-lo);color:#0C1514}
.btn-secondary{background:var(--ink-mute);color:#0C1514}
.btn-secondary:hover{background:var(--ink);color:#0C1514;text-decoration:none}
/* Third tier. Still a solid fill, never an outline: the ramp is brightness,
   teal to light graphite to dark graphite, so three actions read as three
   levels of commitment instead of three equal asks. */
.btn-quiet{background:var(--bevel);color:var(--ink)}
.btn-quiet:hover{background:var(--rule);color:var(--ink);text-decoration:none}
.sheet .btn-primary{background:var(--teal-ink);color:var(--sheet-hi)}
.sheet .btn-primary:hover{background:#0C8676;color:var(--sheet-hi);text-decoration:none}
.sheet .btn-quiet{background:var(--sheet-rule);color:var(--sheet-ink)}
.sheet .btn-quiet:hover{background:#B4C3BE;color:var(--sheet-ink);text-decoration:none}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-block:clamp(3rem,6vw,6rem) clamp(4rem,7vw,7rem);overflow:hidden}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,26rem) minmax(0,1fr);
  gap:clamp(2.5rem,3.5vw,4rem);
  align-items:stretch;
}
/* The rack is taller than the copy, so the copy spreads instead of leaving
   400px of dead column under it: the hook stays at the headline, and the line
   that names the product settles onto the same baseline as the proof line. */
.hero-copy{display:flex;flex-direction:column;gap:2rem}
.hero-tail{margin-top:clamp(2.5rem,6vw,5.5rem)}
h1{
  font-size:clamp(2.15rem,4.6vw,4rem);
  font-weight:700;
  font-stretch:78%;
  letter-spacing:-.02em;
  line-height:1.0;
  text-wrap:balance;
  max-width:30ch;
}
.hero-top{margin-bottom:clamp(2.25rem,4vw,3.25rem)}

/* the exposure list, then the turn. The turn is the argument, so it
   carries the weight rather than sitting in the same grey as the list. */
.hero-list{font-size:clamp(1.0625rem,1.25vw,1.1875rem);color:var(--ink-mute);max-width:46ch}
.hero-turn{
  margin-top:1.125rem;
  font-size:clamp(1.0625rem,1.25vw,1.1875rem);
  color:var(--ink);max-width:46ch;
}
.hero-turn b{font-weight:650;color:var(--teal)}
/* the product sentence is the hero's second beat, not a footnote */
.hero-feat{
  margin-top:1.25rem;
  font-size:clamp(1.375rem,2vw,1.75rem);font-weight:650;font-stretch:84%;
  letter-spacing:-.016em;line-height:1.22;text-wrap:balance;
  color:var(--ink);max-width:24ch;
}
.hero-cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1.5rem 2.5rem;
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:clamp(2rem,3vw,2.5rem);border-top:1px solid var(--groove);
}
.hero-cta .actions{margin-top:0}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-list,.hero-turn{max-width:54ch}
  .hero-feat{max-width:none}
  /* stacked, the rack has to arrive right after the three-beat hook, not
     below a paragraph and two buttons */
  .hero-copy{display:contents}
  .hero-lead{order:1}
  .hero-vis{order:2}
  .hero-tail{order:3}
  .hero-feat{margin-top:0}
  .hero-cta{flex-direction:column;align-items:stretch;gap:1.5rem}
}
@media (max-width:560px){
  .actions .btn{flex:1 1 11rem;justify-content:center}
}

/* ============================================================
   RACK DIAGRAM (authored SVG)
   ============================================================ */
.rack{width:100%;height:auto;overflow:visible}
/* rack furniture */
.rack .upright{fill:url(#uprightGrad);stroke:#2E3C38;stroke-width:1}
.rack .mount{fill:#070C0B;stroke:#33423E;stroke-width:.75}
/* panels: enameled steel, lit top edge, black bottom shadow line */
.rack .panel-face{fill:url(#faceGrad);stroke:#2C3A36;stroke-width:1}
.rack .panel-bevel{stroke:#4A5F59;stroke-width:1.25}
.rack .panel-shadow{stroke:#050908;stroke-width:1.5}
.rack .brushed{fill:url(#brushPat);opacity:.55}
/* ports: recessed field, machined openings */
.rack .port-recess{fill:#0A1211;stroke:#050A09;stroke-width:1.5}
.rack .port-recess-lip{stroke:#3D4E4A;stroke-width:1}
.rack .port{fill:#121D1C;stroke:#31403B;stroke-width:1}
.rack .port-live{fill:var(--teal);stroke:#7BF0DE;stroke-width:1}
/* legends, sized to be read */
.rack .legend-t{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2.1px;fill:#D2DBD8}
.rack .legend-s{font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:1.4px;fill:#7E9490}
/* a total is neutral graphite; a count of something wrong is never teal,
   because teal means continuity everywhere else on this page */
.rack .legend-c{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.3px;fill:#B6C3BF}
.rack .legend-c.bad{fill:#F08878}
.rack .callout-t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.3px;fill:#E7ECEB}
.rack .callout-s{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.1px;fill:var(--teal)}
.rack .callout-x{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.1px;fill:#F08878}
.rack .leader{stroke:#4E605B;stroke-width:1;stroke-dasharray:3 3}
.rack .leader-bad{stroke:#8C4E45;stroke-width:1.25}
/* continuity trace */
.rack .trace{stroke:var(--teal);stroke-width:3.5;fill:none;stroke-linecap:butt}
.rack .trace-dead{stroke:#6B4A42;stroke-width:3;fill:none;stroke-dasharray:3 5;stroke-linecap:butt}
.rack .node{fill:var(--teal);stroke:var(--void);stroke-width:1.5}
.rack .portnum{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.6px;fill:#8FA5A0}
/* the gap: the loudest annotation in the frame */
.rack .gap-port{fill:url(#hatchPat)}
.rack .gap-ring{fill:none;stroke:#E06A57;stroke-width:2}
.rack .gap-detail{fill:none;stroke:#8C4E45;stroke-width:1.25;stroke-dasharray:4 3}
.rack .gap-chip{fill:#2A1613;stroke:#8C4E45;stroke-width:1}
.rack .term{stroke:#E06A57;stroke-width:3.5;stroke-linecap:butt}
.rack .proof{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1.6px;fill:#D2DBD8}
.rack .proof-s{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:1.4px;fill:#A8B5B1}

/* the one authored moment: the trace draws, the nodes land */
@media (prefers-reduced-motion:no-preference){
  /* One orchestrated moment: the trace draws down the rack, each landing
     lights as the trace reaches that port, and the dead terminus arrives
     last. Delays are the draw's own fractions (0.218 / 0.639 / 1.0 of a
     1.5s draw starting at 0.2s), not round numbers. */
  .rack .trace{
    stroke-dasharray:var(--len,240);
    stroke-dashoffset:var(--len,240);
    animation:draw 1.5s var(--ease) .2s forwards;
  }
  .rack .device{opacity:0;animation:land .45s var(--ease) .05s forwards}
  .rack .node{opacity:0;animation:land .45s var(--ease) forwards}
  .rack .node.n1{animation-delay:.53s}
  .rack .node.n2{animation-delay:1.16s}
  .rack .term-group{opacity:0;animation:land .55s var(--ease) 1.7s forwards}
  .rack .callout{opacity:0;animation:land .55s var(--ease) forwards}
  .rack .callout.c1{animation-delay:.65s}
  .rack .callout.c2{animation-delay:1.28s}
  .rack .callout.c3{animation-delay:1.82s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes land{from{opacity:0}to{opacity:1}}


/* the rack's proof line lives in HTML, not in the SVG: inside a viewBox that
   scales to 0.45 on a phone it rendered at about 4px, which put the
   demonstration-data disclosure below legibility on mobile */
.proofline{
  margin-top:1.5rem;padding-top:1.125rem;border-top:1px solid var(--groove);
  font-family:var(--mono);line-height:1.6;
}
.proofline b{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}

/* the practice section: the category term set as a real heading, and the
   three reasons the work actually gets done */
.practice{border-top:1px solid var(--groove);border-bottom:1px solid var(--groove)}
.practice h2{max-width:34ch}
.points.tight{margin-top:1.5rem;gap:1rem;max-width:52ch}
.points.tight span{font-size:.9375rem}
.points.wide{
  max-width:none;margin-top:2.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:2rem;
}

/* ============================================================
   DATA PLATES
   Stylized product graphics for the marketing pages. Real
   full-fidelity captures live on /tour, where detail is the point.

   The medium is HTML and CSS at absolute px, never an SVG viewBox
   with text in it. That is the whole point: 11px is 11px at 588,
   at 865 and at 350, and the plate reflows instead of shrinking.
   Downscaling a viewBox reproduces exactly the illegibility that
   cropping real screenshots produced.

   A plate never wears browser chrome. It is not claiming to be a
   screenshot; it is a machined record of what the product read.
   ============================================================ */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
caption{caption-side:top;height:0;padding:0;font-size:0;line-height:0}
.plate{
  position:relative;
  width:100%;
  max-width:492px;
  border:1px solid var(--groove);
  border-top-color:var(--bevel);
  border-radius:2px;
  background:linear-gradient(180deg,var(--face-hi) 0%,var(--face) 42%,#131D1C 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  isolation:isolate;
  font-variant-numeric:tabular-nums;
}
/* the same metal as the copy panel beside it, byte for byte */
.plate::before{
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.030) 0 1px, rgba(0,0,0,.045) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
  mix-blend-mode:overlay;
}
.plate > *{position:relative}

/* --- engraved legend: the floor is 11px, never lower --- */
.pl-leg{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  text-shadow:0 1px 0 rgba(255,255,255,.05);
}
.pl-leg b{font-weight:500;color:var(--ink)}

/* --- head and foot sit on the face; the body is cut into it --- */
.pl-head{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;align-items:baseline;
  min-height:32px;padding:9px 14px;border-bottom:1px solid var(--groove);
}
.pl-body{
  background:var(--recess);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  border-bottom:1px solid var(--groove);
}
.pl-foot{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  min-height:38px;
}
.pl-foot > div{padding:9px 14px;border-right:1px solid var(--groove)}
.pl-foot > div:last-child{border-right:0}
.pl-foot dt{margin:0 0 4px}
.pl-foot dd{
  margin:0;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.05em;color:var(--ink);
}
.pl-foot dd.bad{color:#F08878}

/* --- FORM A: the named-findings field --- */
.pl-rows{display:block;width:100%}
.pl-rows tbody{display:block}
.pl-rows caption{display:block;height:0}
.pl-row{
  display:grid;grid-template-columns:minmax(0,1fr) 96px;
  gap:0 14px;align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--groove);
}
.pl-row:last-child{border-bottom:0}
.pl-name{
  display:block;
  font-family:var(--display);font-size:14px;font-weight:650;font-stretch:84%;
  letter-spacing:-.008em;line-height:1.3;color:var(--ink);
}
.pl-chip{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#F08878;
  background:#2A1613;border:1px solid #8C4E45;border-radius:2px;padding:2px 6px;
  white-space:nowrap;
}
.pl-also{display:block;margin-top:5px}
/* an asset identifier is printed as the product prints it */
.pl-also.asset{text-transform:none;letter-spacing:.04em}
.pl-count{text-align:right}
.pl-count b{
  display:block;font-family:var(--mono);font-size:23px;font-weight:600;
  letter-spacing:-.01em;line-height:1;color:#F08878;
}
.pl-count span{display:block;margin-top:5px}
/* form A variant: a status word rather than a figure */
.pl-row.stat-row{grid-template-columns:minmax(0,1fr) 108px}

/* two equal blocks side by side: audience panels, paired arguments */
.two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,2.5vw,2.25rem);margin-top:3rem;align-items:stretch;
}
.two .panel{display:flex;flex-direction:column}
.two h3{
  font-size:clamp(1.25rem,1.9vw,1.55rem);font-weight:650;font-stretch:84%;
  letter-spacing:-.014em;line-height:1.16;text-wrap:balance;
}
.two .panel p{max-width:52ch}
.two h3 + p{margin-top:.875rem}
.two .points{margin-top:auto;padding-top:1.5rem}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.pl-stat{text-align:right}

/* --- FORM B and C: source strips, ports, traces --- */
.pl-band{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;
  min-height:30px;padding:8px 14px;border-bottom:1px solid var(--groove);
}
.pl-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.pl-cols > div{padding:15px 14px;border-right:1px solid var(--groove)}
.pl-cols > div:last-child{border-right:0}
.pl-cols dt{margin:0 0 7px}
.pl-cols dd{margin:0}
.pl-callout{
  font-family:var(--mono);font-size:18px;font-weight:600;
  letter-spacing:.02em;line-height:1;color:var(--teal);
}
.pl-val{
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.02em;line-height:1.2;color:var(--ink);
}
.pl-val.bad{color:#F08878}
.pl-val.gone{
  display:inline-block;color:#F08878;
  background:#1E100E;border:1px solid #8C4E45;border-radius:2px;padding:4px 8px;
}
.pl-vall{
  font-family:var(--mono);font-size:15px;font-weight:600;
  letter-spacing:.02em;line-height:1.2;color:var(--ink);
}

/* the port strip: a recessed sub-field holding real ports */
.pl-ports{
  position:relative;height:30px;
  background:#1E100E;
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
}
.pl-ports.ok{background:#0A1211}
.pl-ports i{
  justify-self:center;
  width:13px;height:16px;border-radius:1px;
  background:#101A19;border:1px solid #28352F;
}
.pl-ports i.live{background:var(--teal);border-color:#7BF0DE}
.pl-ports i.empty{
  background:repeating-linear-gradient(45deg,#1E100E 0 1.7px,#8C4E45 1.7px 3.4px);
  border:0;outline:2px solid #E06A57;outline-offset:2px;
}
.pl-trace{position:absolute;inset:0;width:100%;height:30px;pointer-events:none}

/* --- FORM C: the field grid --- */
.pl-grid{display:grid;grid-template-columns:1fr 1fr}
.pl-grid > div{
  padding:12px 14px;min-height:64px;
  border-right:1px solid var(--groove);border-bottom:1px solid var(--groove);
}
.pl-grid > div:nth-child(2n){border-right:0}
.pl-grid > div:nth-last-child(-n+2){border-bottom:0}
.pl-grid dt{margin:0 0 7px}
.pl-grid dd{margin:0}
.pl-subject{
  display:flex;flex-wrap:wrap;gap:.375rem .625rem;align-items:baseline;
  min-height:48px;padding:11px 14px;border-bottom:1px solid var(--groove);
}
.pl-asset{
  font-family:var(--display);font-size:16px;font-weight:650;font-stretch:84%;
  letter-spacing:-.01em;color:var(--ink);
}
/* on asset detail the tag is bare coral text with no chip ground */
.pl-bare{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#F08878;
}

/* --- FORM C: a user opened. The tab strip is the payload: every
   connected object type this person reaches. --- */
.pl-facts{
  display:flex;flex-wrap:wrap;gap:4px 18px;
  padding:10px 14px;border-bottom:1px solid var(--groove);
}
.pl-facts > div{display:flex;gap:6px;align-items:baseline}
.pl-facts dt{margin:0;white-space:nowrap}
.pl-facts dd{
  margin:0;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.05em;color:var(--ink);white-space:nowrap;
}
.pl-facts dd.bad{color:#F08878}
.pl-tabs{
  display:flex;flex-wrap:wrap;gap:3px 12px;
  padding:10px 14px;border-bottom:1px solid var(--groove);
}
.pl-tab{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-low);white-space:nowrap;
}
.pl-tab.on{
  color:var(--teal);font-weight:600;
  box-shadow:0 3px 0 -1px var(--teal);
}
.pl-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.pl-tbl th{text-align:left;padding:8px 14px;border-bottom:1px solid var(--groove);font-weight:500}
.pl-tbl td{
  padding:9px 14px;border-bottom:1px solid var(--groove);
  font-family:var(--display);font-size:13px;font-weight:400;color:var(--ink-mute);
}
.pl-tbl td:first-child{color:var(--ink);font-weight:650;font-stretch:84%}
.pl-tbl tr:last-child td{border-bottom:0}

/* --- FORM D: the record sheet, light because a decision is a document --- */
.plate-light{
  background:var(--sheet-hi);
  border:1px solid var(--sheet-rule);border-top-color:#D8E2DF;
  box-shadow:0 1px 0 #fff inset,0 10px 30px -20px rgba(11,19,18,.4);
}
.plate-light::before{content:none}
.plate-light .pl-leg{color:var(--sheet-mute);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.plate-light .pl-leg b{color:var(--sheet-ink)}
.plate-light .pl-head,
.plate-light .pl-subject,
.plate-light .pl-body{border-bottom-color:var(--sheet-rule);background:none;box-shadow:none}
.plate-light .pl-foot > div{border-right-color:var(--sheet-rule)}
.plate-light .pl-foot dd{color:var(--sheet-ink)}
.plate-light .pl-asset{color:var(--sheet-ink)}
.pl-trans{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;
  min-height:56px;padding:12px 14px;border-bottom:1px solid var(--sheet-rule);
}
.pl-st{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sheet-mute);
  border:1px solid var(--sheet-rule);border-radius:2px;padding:5px 8px;white-space:nowrap;
}
.pl-st.now{font-weight:600;color:var(--flag-ink);border-color:var(--flag-ink)}
.pl-arrow{width:40px;height:1px;background:var(--sheet-rule);flex:0 0 auto}
.pl-applies{margin-left:auto}
.pl-note{padding:17px 14px;border-bottom:1px solid var(--sheet-rule)}
.pl-note blockquote{
  margin:0;padding-left:16px;border-left:2px solid var(--teal-ink);
  font-family:var(--display);font-size:15px;font-weight:400;line-height:1.55;
  color:var(--sheet-ink);max-width:62ch;
}

/* --- phone: reflow, never shrink. No type size changes anywhere. --- */
@media (max-width:640px){
  .pl-cols,.pl-ports{grid-template-columns:1fr}
  .pl-cols > div{
    display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 12px;align-items:baseline;
    border-right:0;border-bottom:1px solid var(--groove);padding:14px 18px;
  }
  .pl-cols > div:last-child{border-bottom:0}
  .pl-cols dt{margin:0;min-height:0}
  .pl-ports{height:auto;padding:12px 18px;gap:10px;justify-items:start}
  .pl-trace{display:none}
  .pl-row{grid-template-columns:minmax(0,1fr) 74px}
  .pl-trans .pl-arrow{display:none}
  .pl-applies{margin-left:0;flex-basis:100%}
}
@media (max-width:420px){
  .pl-grid{grid-template-columns:1fr}
  .pl-grid > div{border-right:0}
  .pl-grid > div:nth-last-child(-n+2){border-bottom:1px solid var(--groove)}
  .pl-grid > div:last-child{border-bottom:0}
  .pl-foot{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr)}
  .pl-foot > div{border-right:0;border-bottom:1px solid var(--groove)}
  .pl-foot > div:last-child{border-bottom:0}
  .plate-light .pl-foot > div{border-bottom-color:var(--sheet-rule)}
}

/* ============================================================
   AS-BUILT SHEET: the light region. A drafting document, in the
   app's light theme. Not paper.
   ============================================================ */
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media (max-width:940px){.sheet-grid{grid-template-columns:1fr}}
/* two documents stacked in one column, so the column ends with the copy
   beside it instead of running several hundred pixels empty */
.doc-stack{display:grid;gap:clamp(1.5rem,2.5vw,2.25rem)}
/* a sentence that closes a bullet list is not part of the last bullet */
.after-points{margin-top:2rem}

.doc{
  background:var(--sheet-hi);
  border:1px solid var(--sheet-rule);
  border-radius:2px;
  box-shadow:0 1px 0 #fff inset,0 10px 30px -20px rgba(11,19,18,.4);
}
.doc-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.875rem 1.125rem;border-bottom:1px solid var(--sheet-rule);
}
/* colour is set explicitly rather than inherited: this file ships as a
   fragment, and a host that wraps it without a doctype puts tables in
   quirks mode, where they stop inheriting colour from their ancestors */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;color:var(--sheet-ink)}
.tbl th{
  text-align:left;padding:.6875rem 1.125rem;
  font-family:var(--mono);font-size:.5625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sheet-mute);
  border-bottom:1px solid var(--sheet-rule);font-weight:500;
}
.tbl th.num,.tbl td.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.tbl td.val{text-align:right;white-space:nowrap;vertical-align:top}
/* A key-value document table carries row headers, not a column head. They must
   read as the cell they replaced, not as the tiny engraved legend above it. */
.tbl th[scope=row]{
  font-family:inherit;font-size:.9375rem;font-weight:500;
  letter-spacing:normal;text-transform:none;line-height:1.35;
  color:var(--sheet-ink);padding:.8125rem 1.125rem;border-bottom:1px solid #DCE5E2;
}
.tbl tr:last-child th[scope=row]{border-bottom:0}
.tbl td{
  padding:.8125rem 1.125rem;border-bottom:1px solid #DCE5E2;
  font-size:.9375rem;line-height:1.35;
}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.tbl .flag{color:var(--flag-ink);font-weight:600}
.tbl .note{
  display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sheet-mute);margin-top:.25rem;
}

.doc-foot{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--sheet-rule);
}
.doc-foot div{padding:.875rem 1.125rem;border-right:1px solid var(--sheet-rule)}
.doc-foot div:last-child{border-right:0}
.doc-foot dt{
  font-family:var(--mono);font-size:.5rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sheet-mute);margin:0 0 .375rem;
}
.doc-foot dd{margin:0;font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--sheet-ink)}


/* ============================================================
   PRODUCT CAPTURES
   One frame, used identically everywhere. The window chrome is
   drawn here rather than baked into the images, so four captures
   taken on different days still frame the same way. Every shot
   opens full size, because a screenshot nobody can read is not
   evidence.
   ============================================================ */
.frame{margin:0}
.frame-open{
  display:block;width:100%;padding:0;cursor:default;
  background:var(--face);border:1px solid var(--groove);border-top-color:var(--bevel);
  border-radius:3px;overflow:hidden;text-align:left;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 20px 44px -22px rgba(0,0,0,.9);
  transition:border-color .18s var(--ease);
}
.frame-open:hover{border-color:var(--rule)}
.chrome{
  display:flex;align-items:center;gap:.4375rem;
  padding:.625rem .75rem;border-bottom:1px solid var(--groove);
  background:linear-gradient(180deg,#1F2C2A,#18231F);
}
.chrome i{width:8px;height:8px;border-radius:50%;background:#31403B;flex:0 0 auto}
.chrome em{
  margin-inline:auto;font-family:var(--mono);font-size:.625rem;font-style:normal;
  letter-spacing:.06em;color:var(--ink-low);
}
.frame-open img{width:100%;height:auto;display:block}
figure{margin:0}
figcaption{
  margin-top:.875rem;font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.1em;color:var(--ink-mute);
}
figcaption.on-sheet{color:var(--sheet-mute)}

/* full size, on demand */
.sheet .frame-open{
  background:var(--sheet-hi);border-color:var(--sheet-rule);border-top-color:#D8E2DF;
  box-shadow:0 1px 2px rgba(11,19,18,.10),0 18px 40px -24px rgba(11,19,18,.45);
}
.sheet .chrome{background:linear-gradient(180deg,#E4EBE8,#DCE5E2);border-bottom-color:var(--sheet-rule)}
.sheet .chrome i{background:#BECAC6}
.sheet .chrome em{color:var(--sheet-mute)}
.sheet .frame-open:hover{border-color:var(--teal-ink)}



/* two-column split for the audiences */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.5rem;margin-top:3.5rem}
.split .panel{padding:clamp(1.75rem,3vw,2.25rem)}
.split h3{font-size:1.3rem;font-weight:650;font-stretch:84%;letter-spacing:-.014em;margin-bottom:.625rem}
.split .who{margin-bottom:1.5rem;color:var(--ink-mute);font-size:.9375rem}

/* stack of rack bays: a copy panel mounted beside its equipment.
   The captures sit on the void, never inside a panel, because their
   mat is lighter than the void and darker than the panel face. */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,4vw,3.75rem);margin-top:3.5rem}
.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,3.5vw,3.25rem);
  align-items:center;
}
.row > *,.two > *,.stack > *{min-width:0}
@media (max-width:940px){.row{grid-template-columns:1fr}}
.panel p{color:var(--ink-mute);max-width:72ch}
.panel p + p{margin-top:1rem}
/* A panel that is not in a grid is a block of prose. Size it by the measure,
   or it runs the full 1200px with 500px of empty metal beside the text. */
.wrap > .panel{max-width:48rem}
.wrap > .panel > p{max-width:none}
/* prose that follows the lede is a new paragraph, not a continuation */
.lede + p{margin-top:1.25rem}
.wrap > p{max-width:68ch}
.wrap > p + p{margin-top:1rem}
h2 + p,h1 + p{margin-top:1.25rem}
.lede + .panel,p + .panel,h2 + .panel{margin-top:1.75rem}
.panel + .panel{margin-top:1.5rem}
.split .panel + .panel,.two .panel + .panel,.stack .panel + .panel,.row .panel + .panel{margin-top:0}
.row .panel p{margin-top:1rem}
/* the shot sits at its natural size rather than being stretched to the
   column: these are details cropped to be read, not pages scaled down */
.frame{max-width:100%}
.frame-open{max-width:100%;width:auto}
.row h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:650;font-stretch:84%;letter-spacing:-.016em;line-height:1.14;text-wrap:balance}
.row h2 + p{margin-top:1rem}
.row h3{font-size:clamp(1.4rem,2.3vw,1.8rem);font-weight:650;font-stretch:84%;letter-spacing:-.016em;line-height:1.14;text-wrap:balance}
.row p{margin-top:1rem;color:var(--ink-mute);max-width:46ch}


/* status legend, verbatim names */
.statuses{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;max-width:31rem}
.statuses span{
  font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:.5rem .75rem;border-radius:2px;
  border:1px solid var(--sheet-rule);color:var(--sheet-mute);background:var(--sheet-hi);
}
/* Flagged is a discrepancy, not continuity: teal may never mark it */
.statuses span.on{border-color:var(--flag-ink);color:var(--flag-ink);font-weight:600}

/* the recorded note, quoted from the product */
.record{
  margin-top:2rem;padding:1.375rem 1.5rem;
  background:var(--sheet-hi);border:1px solid var(--sheet-rule);border-radius:2px;
}
.record blockquote{margin:0;font-size:.9375rem;line-height:1.55;color:var(--sheet-ink)}
.record .sig{
  margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--sheet-rule);
  display:flex;flex-wrap:wrap;gap:1.5rem;
}
.record .sig div{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sheet-mute)}
.record .sig b{display:block;margin-top:.3125rem;color:var(--sheet-ink);font-weight:600;letter-spacing:.1em}

/* closing panel */
.close-band{padding-block:clamp(5rem,9vw,8rem);border-top:1px solid var(--groove)}
.close-band h2{max-width:20ch;font-size:clamp(2rem,4.4vw,3.5rem)}
/* the cross-link line some close bands carry, below the actions */
.close-band .actions + p{margin-top:2.25rem;color:var(--ink-mute);max-width:64ch;font-size:.9375rem}
.close-band .actions + p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.close-band .actions + p a:hover{color:var(--teal);border-color:var(--teal)}

footer{border-top:1px solid var(--groove);background:#0A1110}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.75rem;padding:1.5rem 0}
.foot-nav a{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);text-decoration:none}
.foot-nav a:hover{color:var(--teal)}
/* the legal line: quiet, one row, below the wayfinding */
.foot-legal{
  display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:baseline;
  padding:0 0 1.5rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--ink-low);
}
.foot-legal a,.foot-cookies{
  font:inherit;letter-spacing:inherit;color:var(--ink-low);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none;
}
.foot-legal a:hover,.foot-cookies:hover{color:var(--teal)}
.synthetic{
  padding:1.25rem 0 2.5rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:none;color:var(--ink-mute);line-height:1.7;max-width:78ch;
}

.shot-frame{
  margin:0;border:1px solid var(--groove);border-top-color:var(--bevel);
  border-radius:3px;background:var(--recess);overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 18px 40px -22px rgba(0,0,0,.85);
}
.sheet .shot-frame{
  border-color:var(--sheet-rule);border-top-color:#D8E2DF;background:var(--sheet-hi);
  box-shadow:0 1px 2px rgba(11,19,18,.10),0 18px 40px -24px rgba(11,19,18,.45);
}
.shot{display:block;width:100%;height:auto}
/* Below the capture's own width a phone would render this as an unreadable
   thumbnail, which is the exact failure the plates exist to avoid. /tour is
   where detail is the point, so the shot holds native size and pans inside
   its own frame. The page body still never scrolls sideways. */
@media (max-width:1300px){
  .tourc-shots .shot-frame{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tourc-shots .shot{width:1200px;max-width:none}
}

/* the audience qualifier line, one sentence under a heading, never a chip */
.qual{margin-top:.75rem;color:var(--ink-mute);font-size:.9375rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:0;margin-top:2.5rem;max-width:64rem;border-top:1px solid var(--groove)}
.faq details{border-bottom:1px solid var(--groove)}
.faq summary{
  padding:1.125rem 0;cursor:pointer;list-style:none;
  font-weight:650;letter-spacing:-.012em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--ink-mute);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 1.25rem;color:var(--ink-mute);max-width:68ch}
.legal p{color:var(--ink-mute);max-width:70ch;margin-top:1rem}

/* ============================================================
   TOUR CAROUSEL
   One slide at a time, like the production /tour: heading and
   prose centred, controls, then the full-width capture. The
   stage cross-fades; the shot below swaps with it.
   ============================================================ */
.tourc{margin-top:0}
.tourc-stage{position:relative;text-align:center;min-height:7.5rem}
.tourc-slide{
  position:absolute;inset:0;margin:0 auto;max-width:56rem;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s .28s;
}
.tourc-slide.is-on{
  position:relative;opacity:1;visibility:visible;transition:opacity .28s var(--ease);
}
.tourc-slide h2{font-size:clamp(1.5rem,2.6vw,2.1rem);text-wrap:balance;max-width:none;margin-inline:auto}
.tourc-slide p{margin:.75rem auto 0;color:var(--ink-mute);max-width:88ch;text-wrap:pretty}
.tourc-controls{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  margin-top:1.125rem;
}
.tourc-prev,.tourc-next{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);background:none;border:0;cursor:pointer;
  padding:.625rem .75rem;border-radius:2px;
  transition:color .18s var(--ease);
}
.tourc-prev:hover,.tourc-next:hover{color:var(--teal)}
.tourc-dots{display:flex;align-items:center;gap:.4375rem}
.tourc-dots button{
  width:.5rem;height:.5rem;padding:0;border:0;border-radius:999px;
  background:var(--bevel);cursor:pointer;
  transition:background .18s var(--ease),width .2s var(--ease);
}
.tourc-dots button:hover{background:var(--ink-mute)}
.tourc-dots button[aria-selected="true"]{width:1.5rem;background:var(--teal)}
.tourc-shots{position:relative;margin-top:clamp(1rem,1.8vw,1.5rem)}
.tourc-shots .shot-frame{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s .28s;
  /* the capture carries its own window chrome; adding a frame double-boxes it,
     which the production tour does not do */
  border:0;border-radius:0;background:none;box-shadow:none;
}
.tourc-shots .shot-frame.is-on{
  position:relative;opacity:1;visibility:visible;transition:opacity .28s var(--ease);
}
/* the shots are all 1200x1211, so the stage keeps one aspect and never jumps */
@media (max-width:640px){
  .tourc-controls{gap:.5rem}
  .tourc-slide{min-height:0}
}

/* a figure caption under a full-width report shot */
.shot-cap{
  margin-top:.875rem;
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-low);
}
.sheet .shot-cap{color:var(--sheet-mute)}

/* a full-width section figure: heading, prose, then the capture */
.shot-block{margin:2.5rem 0 0}

/* single-column key-value table: the row header carries everything.
   Its notes are full sentences, not three-word asides, so they read in
   normal case at body scale instead of the engraved 9px legend. */
.tbl.tbl-list th[scope=row]{width:100%}
.tbl.tbl-list .note{
  font-family:inherit;font-size:.8125rem;letter-spacing:normal;
  text-transform:none;line-height:1.5;margin-top:.3125rem;max-width:75ch;
}

/* ============================================================
   CENTERED SECTIONS
   The production MSP pages compose center-axis: heading, lede
   and buttons centred, bullet columns centred as a block with
   the text inside them still left-aligned.
   ============================================================ */
.center{text-align:center}
.center .lede{margin-inline:auto}
.center > p{margin-inline:auto;max-width:68ch}
.center .points{margin-inline:auto;text-align:left}
.center .actions{justify-content:center}
.center .two{text-align:left}
.center h1,.center h2{margin-inline:auto}
/* modules inside a stack pace themselves with the stack's own gap */
.stack > .two,.stack > .center .points{margin-top:0}
.stack > .center .points{margin-top:2rem}

/* a row that pairs copy with a captioned figure, production-style */
.row .shot-cap{text-align:center}
.row .shot-block{margin-top:0}

/* the View full report affordance over an evidence figure */
.shot-wrap{position:relative}
.shot-open{
  position:absolute;right:.75rem;bottom:.75rem;
  font-family:var(--mono);font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(12,21,20,.88);
  border:1px solid var(--rule);border-radius:2px;
  padding:.5rem .75rem;cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.shot-open:hover{color:var(--teal);border-color:var(--teal)}
.lightbox{
  width:min(96vw,1500px);max-width:none;padding:0;margin:auto;
  background:var(--face);border:1px solid var(--groove);border-radius:3px;
}
.lightbox::backdrop{background:rgba(7,12,11,.82)}
.lightbox img{display:block;width:100%;height:auto}
.lightbox-close{
  position:absolute;top:.625rem;right:.625rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(12,21,20,.88);
  border:1px solid var(--rule);border-radius:2px;
  padding:.5rem .75rem;cursor:pointer;
}
.lightbox-close:hover{color:var(--teal);border-color:var(--teal)}