/* ==========================================================================
   H2Structure — h2structure.com marketing site
   Brand: Midnight #071B2B · Deep #04111C · Surface #0C2436
          H2 Blue #009FD4 · Aqua #63D2F2 · Concrete #8B8E91 · Stone #D9D9DA

   Editorial system, not a SaaS landing page. The rules of the house:

   1. Hierarchy is typographic. Scale and space do the work; boxes almost never do.
   2. A hairline rule divides. Card borders are reserved for the two objects that
      genuinely are objects — the sign-in panel and the demo form.
   3. No two consecutive sections share a layout, and bands are deliberately
      unequal in height.
   4. Sections carry a number, figures carry a number, journal style.
   5. One accent (aqua) used rarely enough that it still means something.
   6. No glows, no gradient buttons, no radial washes. Flat printed ground.
   ========================================================================== */

:root{
  --deep:#04111C; --midnight:#071B2B; --surface:#0C2436;
  --blue:#009FD4; --aqua:#63D2F2; --aqua-soft:#7FDDF7;
  --stone:#D9D9DA; --ink:#EDF3F7; --ink2:#BFC9D1; --muted:#98A2AA; --dim:#8B8E91;

  /* hairlines — three weights, all neutral. The accent is never a rule. */
  --hair:rgba(217,217,218,.14);
  --hair-soft:rgba(217,217,218,.085);
  --hair-strong:rgba(217,217,218,.28);

  --font-display:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gutter:clamp(20px, 5vw, 64px);
  --max:1240px;
  --max-wide:1240px;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--deep); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--deep); color:var(--ink);
  font:16px/1.64 var(--font-body); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:900px){body{font-size:17px}}

img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
figure,blockquote,pre{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:var(--aqua); text-decoration-color:rgba(99,210,242,.38); text-underline-offset:3px}
a:hover{text-decoration-color:var(--aqua)}
code,.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
::selection{background:rgba(99,210,242,.3); color:#fff}
:focus-visible{outline:2px solid var(--aqua); 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{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--aqua); color:var(--deep); font-weight:600;
  padding:12px 18px; text-decoration:none; transition:top .16s ease;
}
.skip:focus{top:0}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
/* kept as a hook: content shares one measure so the marginal section numbers
   line up all the way down the page. Only the header runs wider. */
.wrap-wide{max-width:var(--max-wide)}
section{position:relative}

/* Vertical rhythm is deliberately uneven: four band heights, assigned by how
   much a section actually has to say. */
.band{padding-block:clamp(52px,7vw,104px); border-top:1px solid var(--hair-soft)}
.band-xl{padding-block:clamp(66px,9.5vw,150px)}
.band-lg{padding-block:clamp(58px,8vw,124px)}
.band-sm{padding-block:clamp(38px,4.6vw,66px)}
.band-plain{border-top:0}

/* ---------------------------------------------------------------- section head
   A number, a rule, a headline. That is the whole device. */
.shead{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 clamp(18px,3vw,44px);
  align-items:start;
}
.snum{
  font-family:var(--font-mono); font-size:13px; font-weight:600; line-height:1;
  color:var(--dim); padding-top:.62em; font-variant-numeric:tabular-nums;
}
.shead h2{
  grid-column:2; font-size:clamp(27px,4.3vw,50px); line-height:1.03;
  letter-spacing:-.028em; font-weight:700; max-width:19ch;
}
.shead .lede{
  grid-column:2; margin-top:clamp(16px,1.8vw,22px);
  color:var(--ink2); font-size:clamp(16.5px,1.55vw,19.5px); line-height:1.56; max-width:66ch;
}
.shead .lede code{font-size:.86em}
/* On a phone the marginal number moves above the headline rather than stealing width */
@media (max-width:640px){
  .shead{grid-template-columns:1fr}
  .shead h2,.shead .lede{grid-column:1}
  .snum{padding-top:0; margin-bottom:12px}
}
/* the body of a section starts clear of its head */
.sbody{margin-top:clamp(30px,4.4vw,60px)}
.sbody-tight{margin-top:clamp(22px,2.6vw,34px)}

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(4,17,28,.92); backdrop-filter:blur(12px) saturate(130%);
  border-bottom:1px solid var(--hair);
}
.nav-in{display:flex; align-items:center; gap:20px; min-height:60px; padding-block:9px; flex-wrap:wrap}
.nav-logo{flex:1 1 auto; display:flex; align-items:center; min-height:44px}
.nav-logo img{height:25px; width:auto}
.nav-links{display:none; align-items:center; gap:2px; margin-left:auto; flex-wrap:nowrap; min-width:0}
.nav-links a{
  color:var(--ink2); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:12px 10px; white-space:nowrap; border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav-links a:hover{color:var(--ink); border-bottom-color:var(--hair-strong)}
.nav-cta{display:flex; align-items:center; gap:12px; flex:none}
@media (min-width:1100px){
  .nav-in{flex-wrap:nowrap}
  .nav-logo{flex:none}
  .nav-links{display:flex; flex:1 1 auto; margin-left:0; justify-content:flex-end}
  .nav-cta{margin-left:auto}
  .nav-links+.nav-cta{margin-left:20px}
}
@media (min-width:1100px) and (max-width:1259px){
  .nav-links a{padding:12px 5px; font-size:13px}
  .nav-in{gap:8px}
  .nav-links+.nav-cta{margin-left:10px}
}
@media (min-width:1260px) and (max-width:1399px){
  .nav-links a{padding:12px 7px; font-size:13.5px}
  .nav-in{gap:10px}
  .nav-links+.nav-cta{margin-left:14px}
}
/* Two links drop out below 1400 — each the neighbour of a link that already lands
   you on the same argument — and both keep their place in the footer. The nav
   carries eight names at most; the engineer-in-the-loop section is reached from
   "For firms", from the body copy and from the footer. */
/* The nav-opt escape hatch is gone. The links row is nowrap with min-width:0 inside a
   max-width wrap, so beyond ten items it overflowed leftwards and painted over the
   wordmark at EVERY width — more viewport did not help, because the wrap is capped. It
   was already doing that at 1440 before this section was added. Six links is what fits;
   the rest are in the footer, which is where a long index belongs. */
@media (min-width:1400px){
  .nav .wrap{max-width:1460px; padding-inline:clamp(20px,3vw,44px)}
  .nav-links a{padding:12px 9px; font-size:14px}
}
.lbl-short{display:none}
@media (max-width:480px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
}
@media (max-width:560px){
  .nav-in{gap:10px}
  .nav-logo img{height:22px}
  .nav-cta{gap:6px}
  .nav-cta .btn{min-height:44px}
  .nav-cta .btn-quiet{padding:11px 6px}
  .nav-cta .btn-primary{padding:10px 14px; font-size:14.5px}
}
@media (max-width:370px){
  .nav-cta .btn-primary{font-size:14px; padding:10px 12px}
  .nav-cta .btn-quiet{font-size:14px}
}

/* ---------------------------------------------------------------- buttons
   Quiet by design. One solid accent action per screenful; everything else is a
   hairline outline or an underlined link. No gradients, no shadows, no lift. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 22px; border-radius:0;
  font-family:var(--font-body); font-size:15.5px; font-weight:600; line-height:1.25;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid var(--hair-strong); background:transparent; color:var(--ink);
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.btn:hover{border-color:var(--stone); color:#fff}
.btn-primary{background:var(--aqua); color:var(--deep); border-color:var(--aqua); font-weight:700}
.btn-primary:hover{background:var(--aqua-soft); border-color:var(--aqua-soft); color:var(--deep)}
.btn-quiet{
  border-color:transparent; padding-inline:4px; color:var(--ink2);
  text-decoration:underline; text-decoration-color:var(--hair-strong); text-underline-offset:5px;
}
.btn-quiet:hover{border-color:transparent; color:var(--ink); text-decoration-color:var(--aqua)}
.btn-sm{min-height:44px; padding:11px 16px; font-size:14.5px}
@media (max-width:400px){.btn{padding:12px 16px; font-size:15px}}

.btn-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:clamp(26px,3vw,36px)}

/* ---------------------------------------------------------------- hero
   The masthead is a photograph — the client's own pool with the structural
   wireframe over the near end — and the page's own live type, never the type
   baked into the picture.

   Two regimes, because one does not survive both ends:
   · below 1000px the photograph is a full-bleed plate above the copy, faded
     into the page ground the way every other cropped plate on this page is.
     Nothing is set over it, so nothing has to fight the sunset.
   · at 1000px and up the photograph fills the band and the copy sits on a
     horizontal scrim: flat ground at ~.90 across the copy column, falling away
     to nothing by the right edge so the wireframe and the water stay legible.
     The .90 is measured, not guessed — against the brightest pixels the
     photograph can put behind the smallest type, --muted at 13.5px still
     clears 4.5:1. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-bottom:clamp(46px,6.4vw,92px);
  border-bottom:1px solid var(--hair-soft);
}
.hero-media{position:relative; width:100%; line-height:0; background:var(--midnight)}
.hero-media img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:62% 56%;
}
/* the plate fades into the ground rather than stopping on a hard edge */
.hero-media::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,17,28,0) 0%, rgba(4,17,28,.62) 56%, var(--deep) 100%);
}
.hero-in{display:block; padding-top:clamp(26px,4.4vw,44px)}
@media (max-width:640px){
  /* a phone sees less width, so it gets more of the picture's height back */
  .hero-media img{aspect-ratio:5/4; object-position:64% 58%}
}
@media (min-width:1000px){
  .hero{padding-top:clamp(58px,6.4vw,96px); padding-bottom:clamp(72px,8vw,124px); border-bottom:0}
  .hero-media{position:absolute; inset:0; z-index:-2}
  .hero-media img{height:100%; aspect-ratio:auto; object-position:62% 55%}
  .hero-media::after{display:none}
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(4,17,28,.58) 0%, rgba(4,17,28,.16) 20%,
                              rgba(4,17,28,.16) 66%, rgba(4,17,28,.62) 100%),
      linear-gradient(90deg,  rgba(4,17,28,.93) 0%,  rgba(4,17,28,.92) 42%,
                              rgba(4,17,28,.80) 52%, rgba(4,17,28,.40) 66%,
                              rgba(4,17,28,.10) 80%, rgba(4,17,28,0)   92%);
  }
  .hero-in{padding-top:0}
  .hero-copy{max-width:min(56ch, 54%)}
}
.hero-logo{display:block; width:clamp(210px,24vw,330px); height:auto; margin:0 0 clamp(26px,3.2vw,40px)}
/* The headline is the one place balance is wrong: at six lines it leaves an
   orphan on line one. Let it fill each line and rag naturally. */
.hero h1{
  font-size:clamp(33px,4.8vw,58px); line-height:1.03; letter-spacing:-.032em;
  font-weight:700; max-width:none; text-wrap:normal;
}
.hero .lede{margin-top:clamp(20px,2.2vw,28px); color:var(--ink2); font-size:clamp(17px,1.7vw,20.5px); line-height:1.52; max-width:52ch}
/* one step up from --dim: at 13.5px this is the smallest type on the page and,
   from 1000px up, the only small type standing on a photograph. */
.hero-note{
  margin-top:clamp(24px,2.8vw,34px); padding-top:16px; border-top:1px solid var(--hair);
  color:var(--muted); font-size:13.5px; max-width:46ch;
}
.hero-tag{
  margin-top:14px; color:var(--muted); font-family:var(--font-display);
  font-size:14px; font-weight:500; letter-spacing:.005em;
}
/* the creed — three short sentences under the lede, set in display type one step
   below the lede so it reads as a standing statement rather than more prose. */
.hero-creed{
  margin-top:clamp(18px,2vw,24px); color:var(--stone);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(15.5px,1.45vw,18.5px); line-height:1.42; letter-spacing:-.015em;
  max-width:44ch;
}

/* Vanessa, named once in the hero. Set below the creed so it reads as a footnote to
   the standing statement rather than competing with it — the assistant is a reason to
   look, not the reason the product exists. */
.hero-vanessa{
  margin-top:clamp(10px,1.1vw,14px); color:var(--muted);
  font-size:clamp(14px,1.1vw,15.5px); line-height:1.6; max-width:52ch;
}
.hero-vanessa a{color:var(--aqua); text-decoration:none; border-bottom:1px solid rgba(99,210,242,.42)}
.hero-vanessa a:hover{border-bottom-color:var(--aqua)}

/* ---------------------------------------------------------------- figures
   Journal figures: the plate, then a hairline, then a numbered caption. */
.fig{margin-top:0}
.fig-img{position:relative; line-height:0; background:var(--surface); border:1px solid var(--hair-soft)}
.fig-img img{width:100%}
.fig-paper img{background:#fff}
figcaption,.fig figcaption{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--hair-soft);
  color:var(--muted); font-size:14px; line-height:1.5; max-width:58ch;
}
.fig figcaption b,figcaption .fno{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  color:var(--stone); letter-spacing:.02em; white-space:nowrap;
}

/* a plate cut off mid-annotation: the bottom edge fades into the page ground so
   it reads as a drawing running past the frame, not a screenshot that ran out. */
.fig-crop .fig-img{border:0; background:transparent}
.fig-crop .fig-img::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, rgba(4,17,28,0) 0%, rgba(4,17,28,.72) 58%, var(--deep) 100%);
  pointer-events:none;
}
.fig-crop .fig-img img{border:1px solid var(--hair-soft); border-bottom:0}
.fig-crop figcaption{margin-top:-4px}
/* the plate is 744px of real pixels — don't stretch it past the point where its
   own annotation goes soft. Enlarge is there for anyone who wants it bigger. */
.fig-crop{max-width:800px}

/* a figure that runs the full width of the measure with the caption beneath */
.fig-wide{margin-top:clamp(34px,4.4vw,58px)}
.fig-wide figcaption{max-width:72ch}

/* two plates side by side, each with its own caption */
.plates{display:grid; gap:clamp(26px,3.4vw,44px)}
@media (min-width:900px){.plates{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- spreads
   Unequal two-column spreads divided by a vertical hairline. Every one of them
   collapses to a single column below 900px, rule and all. */
.spread{display:grid; gap:clamp(30px,4vw,54px); align-items:start}
@media (min-width:900px){
  .spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spread-a{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .spread-b{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .spread-margin{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:clamp(34px,4.4vw,64px)}
  .spread-rule>*+*{border-left:1px solid var(--hair-soft); padding-left:clamp(26px,3.4vw,48px)}
}
.spread h3{font-size:clamp(18px,1.75vw,21px); line-height:1.28; font-weight:600}
.spread p{color:var(--ink2); font-size:16.5px; line-height:1.64; max-width:66ch}
.spread p+p{margin-top:14px}
.spread h3+p{margin-top:12px}
.spread p+h3,.spread ul+h3{margin-top:clamp(26px,3vw,36px)}

/* a marginal note — the narrow column beside a wide text column */
.marginal{font-size:14.5px; line-height:1.56; color:var(--muted)}
.marginal p{font-size:14.5px; color:var(--muted); max-width:38ch}
.marginal p+p{margin-top:13px}
.marginal strong{color:var(--ink2); font-weight:600}
.marginal .mhead{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); padding-bottom:9px; margin-bottom:14px; border-bottom:1px solid var(--hair);
}

/* ---------------------------------------------------------------- ruled rows
   The workhorse: a list set as a table. Hairline between rows, nothing around
   the outside. Replaces every bordered card grid on the old page. */
.rows{display:grid; border-top:1px solid var(--hair)}
.rows>li{
  padding-block:clamp(15px,1.7vw,21px); border-bottom:1px solid var(--hair-soft);
  display:grid; grid-template-columns:minmax(0,var(--rowcol,13rem)) minmax(0,1fr);
  gap:6px clamp(16px,2.4vw,34px); align-items:baseline;
}
.rows>li>b,.rows>li>.k{
  font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:15.5px;
  line-height:1.35;
}
.rows>li>span,.rows>li>p{color:var(--muted); font-size:15px; line-height:1.55}
@media (max-width:640px){
  .rows>li{grid-template-columns:1fr; gap:5px}
}

/* ---------------------------------------------------------------- ledger
   The problem section. A display figure in the margin, the argument beside it,
   one rule between each. No boxes, no card grid. */
.ledger{border-top:1px solid var(--hair)}
.ledger li{
  padding-block:clamp(24px,3vw,38px); border-bottom:1px solid var(--hair-soft);
  display:grid; gap:10px clamp(24px,4vw,56px); align-items:start;
}
@media (min-width:760px){
  .ledger li{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr)}
}
.ledger .fig-n{
  font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,40px);
  line-height:.95; color:var(--stone); letter-spacing:-.035em;
}
.ledger .fig-n small{
  display:block; margin-top:9px; font-family:var(--font-mono); font-size:11.5px;
  font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
}
.ledger h3{font-size:clamp(17.5px,1.85vw,22px); line-height:1.28; color:var(--ink); max-width:34ch}
.ledger p{margin-top:11px; color:var(--muted); font-size:16px; line-height:1.6; max-width:62ch}
.ledger cite{display:block; margin-top:11px; font-style:normal; font-size:13px; color:var(--dim)}
.ledger-foot{
  margin-top:clamp(26px,3vw,38px); color:var(--ink2);
  font-size:clamp(16.5px,1.7vw,20px); line-height:1.5; max-width:56ch;
}

/* ---------------------------------------------------------------- steps
   Rule-topped columns. The number is set large and quiet above the rule; the
   step reads as a stage in a sequence, not as a tile. */
.steps{display:grid; gap:clamp(26px,3vw,40px) clamp(24px,3vw,44px)}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1120px){.steps-4{grid-template-columns:repeat(4,1fr)}}
.step{border-top:1px solid var(--hair); padding-top:16px}
.step .n{
  display:block; font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  color:var(--aqua); letter-spacing:.06em;
}
.step h3{margin-top:12px; font-size:18.5px; line-height:1.28}
.step p{margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.58}
.step .who{margin-top:14px; font-family:var(--font-mono); font-size:11.5px; color:var(--dim); letter-spacing:.04em}

/* ---------------------------------------------------------------- deliverables */
.deliver{border-top:1px solid var(--hair)}
.deliver li{padding-block:clamp(17px,2vw,24px); border-bottom:1px solid var(--hair-soft)}
@media (min-width:820px){
  .deliver{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(34px,4vw,64px)}
}
.deliver .file{
  font-family:var(--font-mono); font-size:13.5px; color:var(--aqua); font-weight:600;
  display:block; margin-bottom:9px; word-break:break-word; letter-spacing:.01em;
}
.deliver .file.plain{color:var(--stone); font-family:var(--font-display); font-size:16px; letter-spacing:-.01em}
.deliver p{color:var(--muted); font-size:15.5px; line-height:1.58; max-width:56ch}
.deliver p code{color:var(--ink2); font-size:.9em}

/* ---------------------------------------------------------------- note
   A caveat set as a marginal note: hairline on the left, smaller type, never a
   tinted panel. */
.note{
  margin-top:clamp(24px,3vw,36px); padding-left:clamp(16px,2vw,24px);
  border-left:1px solid var(--hair-strong);
  color:var(--muted); font-size:15px; line-height:1.62; max-width:64ch;
}
.note strong{color:var(--ink2); font-weight:600}
.marginal .note{margin-top:0; border-left:0; padding-left:0}

/* ---------------------------------------------------------------- pull quote
   Two of them on the page, both lifted verbatim from the body copy beside them,
   as a magazine does. aria-hidden, so nothing is read twice. */
.pull{
  border-block:1px solid var(--hair); padding-block:clamp(40px,5.6vw,84px);
  background:var(--midnight);
}
.pull blockquote{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px,3.9vw,44px); line-height:1.14; letter-spacing:-.028em;
  color:var(--stone); max-width:20ch;
}
.pull blockquote em{font-style:normal; color:var(--aqua)}

/* ---------------------------------------------------------------- inline lists
   The old pill "chips" become a set list: names separated by hairlines, read as
   a legend under a drawing. */
.set{
  display:flex; flex-wrap:wrap; gap:0 0; margin-top:20px;
  border-top:1px solid var(--hair-soft); padding-top:14px;
}
.set li{
  font-size:14.5px; color:var(--muted); line-height:1.5; padding-right:12px; margin-right:12px;
  border-right:1px solid var(--hair-soft); margin-bottom:6px; white-space:nowrap;
}
.set li:last-child{border-right:0; margin-right:0; padding-right:0}
.set li.on{color:var(--aqua)}

/* the seventeen features: a plain name list in columns, nothing more */
.features{
  margin-top:clamp(24px,3vw,36px); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  column-gap:clamp(20px,3vw,48px);
}
.features li{
  padding-block:11px; border-bottom:1px solid var(--hair-soft);
  font-size:15.5px; color:var(--ink2); line-height:1.4;
}
@media (max-width:400px){.features{grid-template-columns:1fr 1fr}.features li{font-size:14.5px}}

/* ---------------------------------------------------------------- facts
   A ruled list with a lead-in phrase in bold and the explanation beneath. The
   old check-mark bullets are gone. */
.facts{border-top:1px solid var(--hair)}
.facts li{padding-block:clamp(14px,1.6vw,19px); border-bottom:1px solid var(--hair-soft)}
.facts b{font-weight:600; color:var(--ink); display:block; font-size:15.5px; font-family:var(--font-display)}
.facts span{display:block; color:var(--muted); font-size:14.8px; line-height:1.56; margin-top:6px; max-width:52ch}
.facts span span{display:inline; margin:0; font-size:.96em; color:var(--ink2)}
@media (min-width:1080px){
  .facts-2{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(34px,4vw,64px)}
}

/* ---------------------------------------------------------------- table
   Printed table: hairlines only, no enclosing box, no rounded corners. */
.table-scroll{margin-top:clamp(22px,2.8vw,32px); overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:15px; min-width:620px}
/* The caption is prose and must stay readable when the table itself scrolls
   sideways on a phone: it sticks to the left edge of the scroller and wraps to
   the viewport rather than riding off with the columns. */
caption{
  text-align:left; padding:0 0 14px; color:var(--muted); font-size:14px;
  line-height:1.5; caption-side:top;
  position:sticky; left:0; box-sizing:border-box;
  width:max-content; max-width:min(76ch, calc(100vw - 2 * var(--gutter)));
}
th,td{text-align:left; padding:12px 18px 12px 0; border-bottom:1px solid var(--hair-soft); vertical-align:top}
th:last-child,td:last-child{padding-right:0}
thead th{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.07em;
  color:var(--dim); text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid var(--hair-strong); padding-bottom:10px;
}
tbody th{font-weight:600; color:var(--ink); white-space:nowrap; font-family:var(--font-display)}
td{color:var(--ink2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:1px solid var(--hair)}
td.final{color:var(--aqua); font-weight:600}
td .mono,th .mono{font-size:14px}

/* ---------------------------------------------------------------- provenance */
.provenance{max-width:60ch}
.provenance p{color:var(--ink2); font-size:clamp(17px,1.9vw,21px); line-height:1.52; letter-spacing:-.008em}
.provenance p+p{margin-top:18px; font-size:15.5px; line-height:1.62; color:var(--muted); letter-spacing:0}

/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--hair); max-width:80ch}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq summary{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer; list-style:none;
  padding-block:19px; min-height:46px;
  font-family:var(--font-display); font-weight:600; font-size:clamp(17px,1.7vw,20.5px);
  line-height:1.36; letter-spacing:-.015em; color:var(--ink); transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--aqua)}
.faq summary::after{
  content:""; margin-left:auto; flex:none; width:10px; height:10px; margin-top:8px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); transition:transform .18s ease, border-color .15s;
}
.faq summary:hover::after{border-color:var(--aqua)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .a{padding:0 0 24px; color:var(--ink2); font-size:16px; line-height:1.66; max-width:68ch}
.faq .a p+p{margin-top:13px}

/* ---------------------------------------------------------------- demo / form
   The form is one of the two places on the page that is genuinely a discrete
   object, so it keeps an enclosing edge. */
.demo-copy p{color:var(--ink2); font-size:16.5px; line-height:1.64; max-width:56ch}
.demo-copy p+p{margin-top:14px}
.agenda{margin-top:clamp(24px,3vw,32px); border-top:1px solid var(--hair)}
.agenda li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 18px;
  padding-block:13px; border-bottom:1px solid var(--hair-soft);
  color:var(--muted); font-size:15.5px; line-height:1.5;
}
.agenda b{color:var(--stone); font-family:var(--font-mono); font-size:13px; font-weight:600; white-space:nowrap}
@media (max-width:480px){.agenda li{grid-template-columns:1fr}}
.direct{margin-top:24px; color:var(--muted); font-size:15.5px}

.panel{
  border:1px solid var(--hair-strong); background:var(--surface);
  padding:clamp(22px,2.8vw,34px);
}
.panel-label{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); padding-bottom:12px;
  border-bottom:1px solid var(--hair); margin-bottom:clamp(18px,2.2vw,26px);
}
.portal-url{font-size:clamp(18px,2vw,23px); color:var(--aqua); word-break:break-word; letter-spacing:-.01em}
.portal-note{margin-top:14px; color:var(--muted); font-size:15px; line-height:1.58}
.panel .btn-row{margin-top:24px}
.panel .btn-row .btn{width:100%}
.portal-invite{margin-top:26px; padding-top:20px; border-top:1px solid var(--hair-soft)}
.portal-invite p{color:var(--ink2); font-size:15px; line-height:1.6}
.portal-invite p+p{margin-top:12px; color:var(--muted)}
.portal-invite b{color:var(--ink); font-weight:600}

.field-grid{display:grid; gap:16px}
@media (min-width:560px){.field-grid{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field-full{grid-column:1/-1}
.field label{font-size:13.5px; font-weight:600; color:var(--ink2)}
.field label .opt{font-weight:400; color:var(--dim)}
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; color:var(--ink);
  background:var(--deep); border:1px solid var(--hair); border-radius:0;
  padding:12px 13px; min-height:46px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:112px; resize:vertical; line-height:1.55}
.field select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2398A2AA' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--hair-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--aqua); box-shadow:0 0 0 2px rgba(99,210,242,.16);
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field .hint{font-size:13px; color:var(--dim)}

/* honeypot — visually hidden but not display:none, so bots still fill it */
.hp{position:absolute!important; left:-9999px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important}

.form-foot{margin-top:24px; padding-top:20px; border-top:1px solid var(--hair-soft); display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.form-foot .btn{flex:none}
.form-alt{color:var(--muted); font-size:15px}
.form-legal{margin-top:16px; color:var(--dim); font-size:13px; line-height:1.55}

.form-error{
  margin-bottom:20px; padding:14px 16px;
  border:1px solid rgba(255,120,120,.4); background:rgba(255,92,92,.08);
  color:#FFC9C9; font-size:15px; line-height:1.55;
}
.form-ok{padding-block:clamp(8px,1.4vw,16px)}
.form-ok .mark{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--hair-strong); color:var(--aqua);
}
.form-ok h3{margin-top:18px; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.02em}
.form-ok p{margin-top:12px; color:var(--ink2); font-size:16.5px; line-height:1.6}
.form-ok .ref{margin-top:16px; font-family:var(--font-mono); font-size:13px; color:var(--dim); word-break:break-all}
.form-busy{opacity:.6; pointer-events:none}

/* ---------------------------------------------------------------- footer */
.footer{border-top:1px solid var(--hair); background:var(--deep); padding-block:clamp(46px,5.4vw,74px)}
.footer-top{display:grid; gap:clamp(30px,4vw,52px)}
@media (min-width:820px){.footer-top{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
@media (min-width:1100px){.footer-top{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}}
.footer-brand img{height:28px; width:auto}
.footer-brand p{margin-top:18px; color:var(--muted); font-size:15px; line-height:1.6; max-width:40ch}
.footer .footer-top h2{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.11em;
  color:var(--dim); text-transform:uppercase; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid var(--hair-soft);
}
.footer nav ul{display:grid}
.footer nav a{color:var(--ink2); text-decoration:none; font-size:15px; display:inline-flex; align-items:center; min-height:42px}
.footer nav a:hover{color:var(--aqua)}
.footer-legal{margin-top:clamp(36px,4vw,54px); padding-top:26px; border-top:1px solid var(--hair-soft); display:grid; gap:14px}
.footer-legal p{color:var(--dim); font-size:12.5px; line-height:1.68; max-width:96ch}
.footer-legal .disclaimer{color:var(--muted)}
.footer-legal .copy{color:var(--muted); font-size:13px}

/* ---------------------------------------------------------------- doc pages
   Privacy, terms and the export convention run on the same system: hairline
   heads, one measure, no cards. */
.doc-hero{padding-block:clamp(36px,4.6vw,68px) clamp(24px,3vw,38px); border-bottom:1px solid var(--hair)}
.back{
  display:inline-flex; align-items:center; gap:9px; color:var(--muted); text-decoration:none;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  min-height:44px;
}
.back:hover{color:var(--aqua)}
.back svg{width:13px; height:13px}
.doc-hero h1{
  margin-top:6px; font-size:clamp(30px,5vw,54px); line-height:1.02;
  letter-spacing:-.032em; font-weight:700; max-width:20ch;
}
.doc-hero .lede{margin-top:20px; color:var(--ink2); font-size:clamp(16.5px,1.6vw,19px); line-height:1.58; max-width:68ch}
.doc{padding-block:clamp(36px,4.5vw,64px) clamp(56px,7vw,96px)}
.doc-body{max-width:74ch}
.doc-body h2{
  margin-top:clamp(42px,5vw,68px); font-size:clamp(22px,2.7vw,32px); line-height:1.12;
  letter-spacing:-.026em; font-weight:700; padding-top:14px; border-top:1px solid var(--hair);
}
.doc-body h2:first-child{margin-top:0; border-top:0; padding-top:0}
.doc-body h3{margin-top:34px; font-size:clamp(17.5px,1.7vw,20px)}
.doc-body p{margin-top:16px; color:var(--ink2); line-height:1.7}
.doc-body ul{margin-top:18px; display:grid}
.doc-body ul li{
  position:relative; padding:9px 0 9px 26px; color:var(--ink2); line-height:1.62;
  border-bottom:1px solid var(--hair-soft);
}
.doc-body ul li::before{
  content:""; position:absolute; left:2px; top:1.36em; width:12px; height:1px; background:var(--hair-strong);
}
.doc-body ul ul{margin-top:8px; margin-bottom:2px}
.doc-body ul ul li:last-child{border-bottom:0; padding-bottom:0}
.doc-body strong{color:var(--ink); font-weight:600}
.doc-body code{font-size:.88em; color:var(--aqua-soft); word-break:break-word}
.doc-body pre{
  margin-top:20px; padding:18px 20px; overflow-x:auto;
  background:var(--midnight); border-left:1px solid var(--hair-strong);
}
.doc-body pre code{color:var(--ink2); font-size:13px; line-height:1.7; white-space:pre}
.doc-body .table-scroll{margin-top:22px}
.doc-body table{font-size:14.5px; min-width:500px}
.doc-body blockquote{
  margin:24px 0 0; padding-left:22px; border-left:1px solid var(--hair-strong);
  color:var(--muted); line-height:1.64; font-size:15.5px;
}
.doc-body blockquote p:first-child{margin-top:0}
.doc-body hr{margin:clamp(36px,4vw,52px) 0 0; border:0; border-top:1px solid var(--hair-soft)}
.doc-toc{margin-top:30px; padding-top:16px; border-top:1px solid var(--hair); max-width:44ch}
.doc-toc h2{
  margin:0 0 6px; font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--dim); border:0; padding:0;
}
.doc-toc ol{display:grid}
.doc-toc a{
  font-size:15px; text-decoration:none; color:var(--ink2); display:flex; align-items:center;
  min-height:42px; border-bottom:1px solid var(--hair-soft);
}
.doc-toc li:last-child a{border-bottom:0}
.doc-toc a:hover{color:var(--aqua)}

/* ---------------------------------------------------------------- 404 */
.oops{min-height:64vh; display:grid; align-content:center; padding-block:clamp(56px,8vw,110px)}
.oops .code{font-family:var(--font-mono); font-size:12px; color:var(--dim); letter-spacing:.11em; text-transform:uppercase}
.oops h1{margin-top:16px; font-size:clamp(32px,5.4vw,58px); line-height:1.02; letter-spacing:-.032em; font-weight:700; max-width:18ch}
.oops p{margin-top:20px; color:var(--ink2); font-size:clamp(16.5px,1.7vw,19px); line-height:1.56; max-width:52ch}
.oops-links{display:flex; flex-wrap:wrap; gap:2px 24px; margin-top:24px; padding-top:8px; border-top:1px solid var(--hair-soft)}
.oops-links a{display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--ink2); text-decoration:none}
.oops-links a:hover{color:var(--aqua); text-decoration:underline}

/* ---------------------------------------------------------------- click to enlarge
   main.js wraps every img[data-zoom] in this button at runtime, so with JS off the
   screenshots are plain images and nothing announces an action that cannot happen. */
.zoom{
  display:block; width:100%; padding:0; margin:0; border:0; background:none;
  position:relative; cursor:zoom-in; color:inherit; font:inherit; line-height:0;
}
.zoom-badge{
  position:absolute; right:0; bottom:0; z-index:2;
  display:inline-flex; align-items:center; gap:7px; line-height:1;
  padding:8px 12px;
  border-left:1px solid var(--hair); border-top:1px solid var(--hair);
  background:rgba(4,17,28,.9); color:var(--ink2);
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.9; transition:opacity .16s ease, color .16s ease;
}
.zoom-badge svg{width:12px; height:12px}
.zoom:hover .zoom-badge,.zoom:focus-visible .zoom-badge{opacity:1; color:var(--aqua)}
@media (max-width:520px){.zoom-badge span{display:none}.zoom-badge{padding:9px}}

/* the lightbox itself */
.lb{position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; padding:clamp(8px,2vw,24px)}
/* a class beats the UA's [hidden] rule, so the closed dialog has to be hidden here or it
   sits invisibly over the whole page and swallows every click */
.lb[hidden]{display:none}
.lb-back{position:absolute; inset:0; background:rgba(2,9,15,.9); backdrop-filter:blur(4px)}
.lb-panel{
  position:relative; margin:auto; display:flex; flex-direction:column; min-height:0;
  width:100%; max-width:1500px; max-height:100%;
  border:1px solid var(--hair-strong); background:var(--surface); overflow:hidden;
  opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}
.lb.in .lb-panel{opacity:1; transform:none}
.lb-bar{
  display:flex; align-items:center; gap:14px; flex:none;
  padding:10px 10px 10px 16px; border-bottom:1px solid var(--hair); background:var(--midnight);
}
.lb-cap{color:var(--ink2); font-size:14px; line-height:1.4; min-width:0}
.lb-tools{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}
.lb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:9px 14px; cursor:pointer; border-radius:0;
  border:1px solid var(--hair); background:transparent; color:var(--ink2);
  font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
}
.lb-btn:hover{border-color:var(--stone); color:var(--ink)}
.lb-btn svg{width:14px; height:14px}
.lb-close{padding:9px 11px}
.lb-body{flex:1 1 auto; min-height:0; overflow:auto; background:var(--deep); display:grid}
.lb-fig{display:block; padding:0; margin:auto; border:0; background:none; cursor:zoom-in; line-height:0; max-width:100%}
.lb-fig img{width:auto; max-width:100%; max-height:calc(100vh - 150px); background:#fff}
/* actual size: the image stops fitting and the body scrolls, which is the only way an
   11×17 sheet is readable on a phone */
.lb.at-size .lb-body{display:block}
.lb.at-size .lb-fig{margin:0; max-width:none; cursor:zoom-out}
.lb.at-size .lb-fig img{max-width:none; max-height:none; width:auto}
@media (max-width:520px){.lb-cap{display:none}.lb-tools{margin-left:0; width:100%; justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.lb-panel{opacity:1; transform:none; transition:none}}

/* ---------------------------------------------------------------- reveal on scroll
   Hidden only once JS has added .js to <html>, so a no-JS visitor sees everything.
   Smaller travel than before: an editorial page should not bounce. */
.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important; transform:none!important; transition:none!important}
  *,*::before,*::after{animation-duration:.001s!important; transition-duration:.001s!important}
}
/* The qualifying paragraphs under a document lede: same measure, quieter, so the scope limits read
   as part of the claim rather than as a footnote to it. */
.lede-sub{margin-top:16px; color:var(--muted); font-size:clamp(15px,1.15vw,16.5px); line-height:1.65; max-width:66ch}
.lede-sub strong{color:var(--ink)}
/* The live-figures line under the testing table. Quiet when it succeeds, visible when it cannot. */
.q-live{margin:0 0 14px; font-family:var(--font-mono,ui-monospace,monospace); font-size:12.5px;
  color:var(--muted); letter-spacing:.01em}
.q-live.q-stale{color:var(--stone)}
.q-live.q-bad{color:#E0736A}
/* A second-level heading inside a section body, above a table that answers a different question
   from the list preceding it. Ruled, so it reads as a new part rather than a louder list item. */
.sub-h3{margin:clamp(36px,4vw,56px) 0 18px; padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--hair); font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,1.7vw,23px); letter-spacing:-.015em; color:var(--ink)}