/* ============================================================
   Elstrand — site styles
   ============================================================ */

@font-face{
  font-family:"Schibsted Grotesk";
  src:url("/assets/schibsted.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* THE REGISTER OF NOTICES. Cold limestone, not warm cream; ink, not black.
     One accent, --absent, and it only ever means "not in the answer".
     Light is the default because ink-on-paper reads as a record and a firm;
     dark ships designed, on system preference, for the phone at night. */
  --ground:#E5E7E2;
  --surface:#F1F2EE;
  --band:#DCDFD9;
  --ink:#12161A;
  --soft:#41474C;
  --muted:#5B6267;   /* 4.98:1 on --ground, 4.60:1 on --band; measured, not estimated.
                        The previous #666D72 was annotated 4.8:1 and was actually 4.22:1,
                        which failed AA on every meta line, price caption and footer label. */
  --rule:#C7CBC3;
  --hair:#D5D8D1;
  --hard:#12161A;    /* the register's heavy rule */
  --absent:#A93A28;
  --context:#B3B8B1;
  --ring:rgba(18,22,26,.10);

  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --measure:64ch;
  --page:1180px;
  --e-out:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    --ground:#0E1113; --surface:#161A1D; --band:#1B2023; --ink:#E9EBE7;
    --soft:#A2A9AC; --muted:#828A8E; --rule:#262B2E; --hair:#1F2426;
    --hard:#E9EBE7; --absent:#E0836F; --context:#3A4145;
    --ring:rgba(233,235,231,.12);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1113; --surface:#161A1D; --band:#1B2023; --ink:#E9EBE7;
  --soft:#A2A9AC; --muted:#828A8E; --rule:#262B2E; --hair:#1F2426;
  --hard:#E9EBE7; --absent:#E0836F; --context:#3A4145;
  --ring:rgba(233,235,231,.12);
}
:root[data-theme="light"]{
  --ground:#E5E7E2; --surface:#F1F2EE; --band:#DCDFD9; --ink:#12161A;
  --soft:#41474C; --muted:#5B6267; --rule:#C7CBC3; --hair:#D5D8D1;
  --hard:#12161A; --absent:#A93A28; --context:#B3B8B1;
  --ring:rgba(18,22,26,.10);
}

/* ---------- reset ---------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--absent);outline-offset:3px;border-radius:1px}

/* ---------- layout ---------- */

.page{max-width:var(--page);margin:0 auto;padding:0 24px}
.col{max-width:var(--measure)}
@media (max-width:640px){ .page{padding:0 18px} }

/* ---------- type ---------- */

.eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0;
}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.028em;font-weight:600}
/* Cap height was measured at 46px on the approved comp at 1440 and 66px was
   read off as that size. Set side by side against the comp the headline
   rendered visibly larger and heavier than the comp's, so the measurement was
   over-read: 60px matches the comp's cap. */
h1{font-size:clamp(34px,4.3vw,60px);line-height:1.05;letter-spacing:-.033em;font-weight:630}
h2{font-size:clamp(24px,3.2vw,34px);line-height:1.14;letter-spacing:-.024em}
h3{font-size:19px;line-height:1.3;letter-spacing:-.016em}
p{margin:0}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--soft)}
.num{font-variant-numeric:proportional-nums}
.tab{font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */

.nav{
  position:sticky;top:0;z-index:60;
  background:var(--ground);
  border-bottom:2px solid var(--hard);
}
.nav-in{
  max-width:var(--page);margin:0 auto;padding:0 24px;
  height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
@media (max-width:640px){ .nav-in{padding:0 18px} }
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:22px;height:22px;color:var(--ink);flex:none}
.brand span{font-size:16.5px;font-weight:640;letter-spacing:-.02em}
/* ---------- masthead nav ----------
   The approved comp carries the destinations in the masthead; the build had
   put all five behind a Menu button at every width, which is the right answer
   on a phone and the wrong one at 1440, where there is room and a visitor
   should not have to open a panel to discover that an example check exists.
   Inline from 1000px up, and the Menu button stands down at the same width so
   there are never two ways to reach the same five links. */
.mast-nav{display:none}
@media (min-width:1000px){
  .mast-nav{
    display:flex;gap:28px;align-items:center;
    margin-left:auto;margin-right:4px;
  }
  .mast-nav a{
    font-size:14.5px;font-weight:520;letter-spacing:-.008em;
    color:var(--soft);text-decoration:none;padding:6px 0;
    border-bottom:1px solid transparent;
  }
  .mast-nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
}

.menu-btn{
  display:flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:640;
  color:var(--soft);padding:8px 2px;
}
.menu-btn:hover{color:var(--ink)}
/* Stood down where .mast-nav takes over. Declared after the base rule, not
   before it: same specificity means source order decides. */
@media (min-width:1000px){ .menu-btn{display:none} }
.menu-btn i{display:block;width:19px;height:9px;position:relative}
.menu-btn i::before,.menu-btn i::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .34s var(--e-out);
}
.menu-btn i::before{top:0}
.menu-btn i::after{bottom:0}
body.menu-open .menu-btn i::before{transform:translateY(3.75px) rotate(45deg)}
body.menu-open .menu-btn i::after{transform:translateY(-3.75px) rotate(-45deg)}

/* The menu script toggles ov.hidden, but .overlay's own display:flex and the UA
   sheet's [hidden]{display:none} have equal specificity, so author origin won
   and the attribute did nothing: the panel stayed a full-viewport fixed layer at
   all times. visibility:hidden was doing the real work, so nothing was visibly
   broken -- which is exactly why it would have gone on being wrong. */
.overlay[hidden]{display:none}
.overlay{
  position:fixed;inset:0;z-index:55;background:var(--ground);
  display:flex;flex-direction:column;
  padding:88px 24px 36px;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
body.menu-open .overlay{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
/* margin:auto centres the panel while it fits and top-aligns it once it doesn't.
   justify-content:center would centre the overflow too, pushing the first menu
   item above scroll position zero where no amount of scrolling can reach it. */
.overlay nav{max-width:var(--page);margin:auto;width:100%}

.ov-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .ov-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:76px;align-items:start}
}

.ov-nav > a{
  display:block;text-decoration:none;color:var(--ink);
  padding:11px 0;border-top:1px solid var(--hair);
  opacity:0;transform:translate3d(0,12px,0);
}
.ov-nav > a:first-child{border-top:0;padding-top:0}
.ov-nav > a .t{
  display:block;font-size:clamp(24px,3.4vw,34px);font-weight:600;
  letter-spacing:-.03em;line-height:1.18;
}
.ov-nav > a .d{
  display:block;font-size:13px;line-height:1.45;color:var(--muted);
  letter-spacing:0;margin-top:3px;
}
.ov-nav > a:hover .t{color:var(--absent)}
.ov-nav > a:hover .d{color:var(--soft)}
body.menu-open .ov-nav > a{opacity:1;transform:none}

.overlay .minor{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 26px;
}
.overlay .minor a{
  font-size:14px;font-weight:500;letter-spacing:0;color:var(--soft);
  padding:2px 0;text-decoration:none;
}
.overlay .minor a:hover{color:var(--ink)}
.overlay .mail{
  margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--muted);
}

.ov-cta{
  background:none;border:0;border-top:2px solid var(--hard);border-radius:0;
  padding:22px 0 0;box-shadow:none;
}
.ov-cta-h{
  margin-top:12px;font-size:21px;font-weight:600;
  letter-spacing:-.022em;line-height:1.32;text-wrap:balance;
}
.ov-cta-p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--soft)}
.ov-cta .btn{margin-top:20px}

@media (prefers-reduced-motion:no-preference){
  body.menu-open .ov-nav > a{transition:opacity .42s var(--e-out),transform .42s var(--e-out)}
  body.menu-open .ov-nav > a:nth-child(1){transition-delay:.05s}
  body.menu-open .ov-nav > a:nth-child(2){transition-delay:.10s}
  body.menu-open .ov-nav > a:nth-child(3){transition-delay:.15s}
  body.menu-open .ov-nav > a:nth-child(4){transition-delay:.20s}
  body.menu-open .ov-nav > a:nth-child(5){transition-delay:.25s}
}
@media (prefers-reduced-motion:reduce){
  .overlay,.ov-nav > a,.menu-btn i::before,.menu-btn i::after{transition:none}
  .ov-nav > a{opacity:1;transform:none}
}

/* ---------- sections ---------- */

.sec{padding:76px 0;border-top:1px solid var(--rule)}
.sec.hard{border-top:2px solid var(--hard)}
.sec:first-of-type{border-top:0}
@media (max-width:640px){ .sec{padding:56px 0} }
.sec-head{margin-bottom:38px}
.sec-head h2{margin-top:12px}
.sec-head .lede{margin-top:14px;max-width:52ch}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:0;text-decoration:none;
  font-size:15px;font-weight:620;letter-spacing:-.005em;
  background:var(--ink);color:var(--ground);border:2px solid var(--ink);
  transition:background .16s var(--e-out),color .16s var(--e-out);
}
.btn:hover{background:transparent;color:var(--ink)}
/* .prose a is more specific than .btn, so a button inside prose inherited the
   link colour and rendered ink on ink. Restated at prose specificity. */
.prose a.btn{color:var(--ground);text-decoration:none}
.prose a.btn:hover{color:var(--ink);text-decoration:none}
.prose a.btn.ghost{color:var(--ink)}
.prose a.btn.ghost:hover{color:var(--ground)}
.btn.ghost{background:none;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--ground)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* ---------- hero ---------- */

.hero{display:grid;gap:44px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){
  /* The record is the wider column, as in the approved comp. At the previous
     split its meta line wrapped to two rows, which broke the one-line
     header the record depends on to read as a filed entry. */
  .hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:60px;align-items:center}
  .hero .col{max-width:none}
}

/* ---------- the record ----------
   This replaces the leaderboard. The site's own claim is "Not a dashboard",
   and bars, tracks and a ranked scoreboard were exactly a dashboard. What
   Elstrand actually produces is a dated record of what an assistant said, so
   that is what the page shows.

   Two rules carried in from the direction round, both load-bearing:
   - run frequency is RULE WEIGHT, never a bar. A bar invites reading a
     percentage that the sample does not support.
   - scale is mapped to the finding: the lead brand and the absent brand are
     set larger than the rows between them.
   Depth comes from overlap and flat colour. No shadows anywhere. */

.board{
  background:none;border:0;border-top:2px solid var(--hard);
  border-radius:0;padding:18px 0 0;box-shadow:none;
}
.board-q{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:.02em;text-transform:uppercase;
  padding:0;margin:0 0 16px;border:0;
  display:flex;flex-wrap:wrap;gap:6px 14px;
}
.board-q b{color:var(--ink);font-weight:600}

/* the question, verbatim and quoted. it is the thing that was asked. */
.board-asked{
  margin:0 0 20px;font-size:clamp(18px,2vw,25px);line-height:1.34;
  letter-spacing:-.018em;font-weight:500;max-width:30ch;
}
/* Quotation marks live in the markup as HTML entities, not in CSS content:
   the stylesheet is served without a charset and a raw glyph here decodes
   as a replacement character. */

.row{
  display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:baseline;
  padding:11px 0;margin:0;border-radius:0;
  border-bottom:1px solid var(--rule);
  transition:none;
}
.row + .row{border-top:0}
.board .row:hover{background:none}
.rname{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:17px;font-weight:520}
.rname b{font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.012em}
.rval{
  font-family:var(--mono);font-size:14px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.rval b{color:var(--ink);font-weight:600;font-size:18px}

/* rule weight IS the run frequency. r3 held in every run, r2 in most. */
.row.r3{border-bottom-width:3px}
.row.r2{border-bottom-width:2px}

/* scale mapped to the finding */
.row.lead .rname{font-size:20px;font-weight:600}
.row.lead .rval b{font-size:22px}

/* the one accent, and the page's single focal moment */
.row.is-you{border-bottom-color:var(--absent)}
.row.is-you .rname{color:var(--absent);font-weight:620}
.row.is-you .rname s{text-decoration:line-through;text-decoration-thickness:1.5px}
.row.is-you .rval,.row.is-you .rval b{color:var(--absent)}
.you{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--absent);border:1px solid var(--absent);border-radius:0;
  padding:1px 5px 2px;flex:none;
}

/* the verdict, borrowed from comp B: the finding in one plain sentence */
.board-verdict{
  margin-top:20px;padding-top:14px;border-top:2px solid var(--absent);
  font-size:16.5px;line-height:1.5;color:var(--soft);max-width:38ch;
}
.board-verdict b{color:var(--absent);font-weight:620}

.track,.bar{display:none}

/* ---------- check form ---------- */

.check{
  display:flex;gap:0;flex-wrap:wrap;align-items:stretch;
  background:var(--surface);border:2px solid var(--ink);border-radius:0;
  padding:0;max-width:460px;
}
.check input{
  flex:1 1 200px;min-width:0;border:0;background:none;color:var(--ink);
  font-family:var(--sans);font-size:15.5px;padding:13px 15px;
}
.check input::placeholder{color:var(--muted)}
.check input:focus{outline:none}
.check .btn{padding:13px 20px;font-size:14.5px;border:0}
.check .btn:hover{background:var(--soft);color:var(--ground)}
.check-note{margin-top:12px;font-size:13.5px;color:var(--muted)}

/* ---------- two-column band ----------
   The aside carries content aimed at a different reader, so it is a genuine
   second column rather than a paragraph parked beside a headline. It collapses
   below the main column on narrow screens, where reading order is what matters. */

.split{display:grid;gap:56px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:72px;align-items:start}
}
.switch-note{border-top:2px solid var(--hard);padding-top:20px}
.switch-note h3{font-size:16px;letter-spacing:-.01em}
.switch-note p{margin-top:12px;color:var(--soft);font-size:14.5px;line-height:1.65}
.switch-note a{
  display:inline-block;margin-top:16px;font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.switch-note a:hover{border-bottom-color:var(--ink)}

/* ---------- what arrives ----------
   A numbered contents list, not a card grid. The numbers are the report's own
   section order, so they carry information rather than decorate; the rule
   between rows does the grouping a card border would, at a fraction of the
   weight. Deliberately a different layout family from .tiers below — reusing
   the card grid for both would make two unrelated things look alike. */

.arrives{list-style:none;margin:0;padding:0;border-top:2px solid var(--hard)}
.arrives li{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 20px;
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.arrives .n{
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.arrives h3{font-size:18px;letter-spacing:-.015em}
.arrives p{color:var(--soft);font-size:14.5px;line-height:1.65;grid-column:2}

/* Three columns once there is room: number, name, description. The rule then
   ends where the content ends instead of running well past it, and the row
   reads as a contents table rather than a stack with a wide empty margin. */
@media (min-width:900px){
  .arrives li{grid-template-columns:44px minmax(0,272px) minmax(0,1fr);gap:0 32px}
  .arrives p{grid-column:3;max-width:58ch}
}
@media (max-width:640px){
  .arrives li{grid-template-columns:34px minmax(0,1fr);gap:4px 14px;padding:22px 0}
  .arrives h3{font-size:17px}
}

/* ---------- pricing, as a ledger ----------
   Cards inside a card inside a section was three nested boxes doing the work
   one rule does. A firm publishes a schedule of fees; that is a table. */

.tiers{
  display:grid;gap:0;grid-template-columns:minmax(0,1fr);
  border-top:2px solid var(--hard);
}
@media (min-width:900px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:0} }

.tier{
  background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:26px 0 30px;display:flex;flex-direction:column;box-shadow:none;
}
@media (min-width:900px){
  .tier{padding:28px 30px 32px 0}
  .tier + .tier{border-left:1px solid var(--rule);padding-left:30px}
}
.tier h3{margin-bottom:4px;font-size:21px;letter-spacing:-.022em;font-weight:640}
.tier.featured{border-color:var(--rule);box-shadow:none;background:none}
.tier .tier-badge{
  align-self:flex-start;margin:0 0 12px;padding:2px 7px 3px;border-radius:0;
  background:none;color:var(--ink);border:1px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;
}
.tier .tier-who{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.tier .tier-note{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--muted);
}
.tier .price{
  font-size:36px;font-weight:640;letter-spacing:-.035em;margin:18px 0 2px;
  font-variant-numeric:proportional-nums;
}
.tier .per{font-size:13px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.tier .tier-gain{
  margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--soft);
  padding-top:16px;border-top:1px solid var(--rule);
}
.tier .tier-gain + ul{margin-top:18px}
.tier ul{list-style:none;margin:20px 0 26px;padding:0;display:flex;flex-direction:column;gap:8px}
.tier li{font-size:14px;color:var(--soft);position:relative;padding-left:14px;line-height:1.5}
.tier li::before{
  content:"";position:absolute;left:0;top:.66em;width:6px;height:1px;background:var(--context);
}
.tier li b{color:var(--ink);font-weight:600}
.tier .btn{margin-top:auto;justify-content:center}

/* the one-off leads the section: heavier rule, not a heavier box */
.oneoff{
  margin-top:0;background:none;border-radius:0;box-shadow:none;
  border-top:2px solid var(--hard);border-bottom:2px solid var(--hard);
  padding:30px 0 34px;display:flex;flex-wrap:wrap;gap:24px 56px;
  align-items:flex-start;justify-content:space-between;
}
/* The four things every Full Check answers, whatever the category. A promise
   with a fixed count is a schedule, so it is ruled and numbered like one
   rather than bulleted. Same family as .arrives, one step quieter, because it
   sits inside a block rather than carrying a section of its own. */
.oneoff-promise{
  list-style:none;margin:14px 0 18px;padding:0;
  border-top:1px solid var(--rule);counter-reset:promise;
}
.oneoff-promise li{
  counter-increment:promise;
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 14px;
  padding:11px 0;border-bottom:1px solid var(--hair);
  font-size:15px;line-height:1.5;color:var(--soft);
}
.oneoff-promise li::before{
  content:counter(promise,decimal-leading-zero);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
  padding-top:3px;font-variant-numeric:tabular-nums;
}

/* ---------- the firm, not the offer ----------
   "There is a person on the other end" is the one claim in the pricing section
   that is about how the firm is run rather than about what you buy. Given the
   same bordered strip and button as the offers around it, three unrelated
   things read as three of the same thing. It is a statement, so it is set as
   one: a label column and a paragraph, no box, no control. */
.hand{
  border-top:1px solid var(--rule);padding:38px 0 40px;
  display:grid;gap:18px 64px;grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .hand{grid-template-columns:minmax(0,20ch) minmax(0,1fr);align-items:start}
}
.hand-h{
  font-size:clamp(20px,2.5vw,26px);font-weight:640;letter-spacing:-.028em;
  line-height:1.18;text-wrap:balance;
}
.hand p{color:var(--soft);font-size:15.5px;line-height:1.68;max-width:60ch}
.hand p + p{margin-top:12px}
.oneoff-eyebrow{
  margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--muted);
}
.start-free{
  margin-top:0;background:none;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:28px 0 30px;display:flex;flex-wrap:wrap;gap:20px 48px;
  align-items:center;justify-content:space-between;
}
.start-free-h{margin-top:0;font-size:20px;font-weight:640;letter-spacing:-.022em}
.start-free-p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--soft);max-width:60ch}
.start-free .btn{flex:none}

.custom-strip{
  margin-top:0;background:none;border:0;border-bottom:2px solid var(--hard);
  border-radius:0;padding:28px 0 30px;display:flex;flex-wrap:wrap;gap:20px 48px;
  align-items:center;justify-content:space-between;
}
.custom-from{
  margin-top:2px;font-size:28px;font-weight:640;letter-spacing:-.032em;
  font-variant-numeric:proportional-nums;white-space:nowrap;
}
.custom-from span{
  display:block;font-family:var(--mono);font-size:12px;font-weight:400;
  color:var(--muted);letter-spacing:.02em;margin-top:3px;
}

/* ---------- faq ---------- */

/* Heading anchors a left column and the questions take the width. A single
   64ch column parked in a 1120px section reads as a missing column rather than
   as a chosen measure. Stacks back to heading-then-questions on narrow screens,
   which is also the correct reading order. */
.qa{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .qa{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:64px;align-items:start}
}
.qa-note{margin-top:14px;color:var(--muted);font-size:14px;max-width:34ch}

.faq{border-top:2px solid var(--hard);padding-top:6px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 0;
  font-size:16.5px;font-weight:600;letter-spacing:-.012em;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:20px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 22px;color:var(--soft);font-size:15px;max-width:60ch}
.faq .a p + p{margin-top:11px}

/* ---------- reading pages ---------- */

/* A 64ch measure is right for reading, but left-aligned inside the 1120px page
   it leaves half a wide screen empty and reads as a missing column rather than
   as a chosen measure. Centring the column keeps the line length and makes the
   whitespace look deliberate. Nav and footer stay full width, which is the
   normal shape for a documentation page. */
.doc{padding:64px 0 40px;max-width:var(--measure);margin-inline:auto}
.doc .updated{margin-top:16px;font-size:13.5px;color:var(--muted)}
.prose{max-width:var(--measure);margin-inline:auto;padding:8px 0 72px;font-size:16px;line-height:1.72}
.prose > * + *{margin-top:20px}
.prose h2{
  font-size:22px;margin-top:52px;padding-top:24px;border-top:2px solid var(--hard);
  letter-spacing:-.018em;
}
.prose h3{margin-top:34px;font-size:17px}
.prose p{color:var(--soft)}
.prose strong{color:var(--ink);font-weight:620}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.prose a:hover{text-decoration-color:var(--absent)}
.prose ul,.prose ol{margin-left:0;padding-left:22px;color:var(--soft);display:flex;flex-direction:column;gap:9px}
.prose li::marker{color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--hair);margin:38px 0}
/* A thick coloured rail down the left of a block is the most recognisable tell
   of a generated interface, and the report pages in this same project already
   rejected it in favour of a full rule. These two were the last places it
   survived. A quotation is set apart the way the register sets anything apart:
   a rule above it and a measure of its own. */
.prose blockquote{
  /* The rule belongs to the quotation below it, not the sentence above it.
     Without the extra space above, it reads as an underline of the lead-in. */
  margin:26px 0 0;padding:16px 0 0;background:none;border-radius:0;border:0;
  border-top:2px solid var(--hard);color:var(--ink);font-size:15.5px;max-width:56ch;
}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{color:var(--muted);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.09em;text-transform:uppercase;border-bottom:2px solid var(--hard)}
.prose td{color:var(--soft)}
.tablewrap{overflow-x:auto}
.summary-box{
  background:var(--band);border:0;border-top:2px solid var(--hard);border-radius:0;
  padding:20px 24px 22px;
}
.summary-box ul{margin:0;padding-left:20px;gap:11px}

/* ---------- footer ---------- */

.foot{border-top:2px solid var(--hard);padding:48px 0 56px;font-size:14px}
.foot-grid{display:flex;flex-wrap:wrap;gap:34px 60px;justify-content:space-between}
/* Column labels, not document structure. As <h4> after a page's <h2> they
   skipped a heading level in the outline of every page on the site, which is
   what a screen reader navigates by. */
.foot .foot-h{
  margin:0 0 13px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{color:var(--soft);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .fine{
  margin-top:42px;padding-top:22px;border-top:1px solid var(--hair);
  color:var(--muted);font-size:13px;max-width:64ch;
}
.foot .fine p + p{margin-top:8px}

/* ---------- trend chart ---------- */

.chart .dot{fill:var(--absent)}
.chart .hit{fill:transparent}
.chart .endlabel{
  fill:var(--ink);font-size:13px;font-weight:650;
  font-family:system-ui,sans-serif;transition:opacity .15s;
}
.chart:hover .endlabel{opacity:0}
.chart .tip{opacity:0;transition:opacity .15s var(--e-out)}
.chart .tip rect{fill:var(--ink)}
.chart .tip text{
  fill:var(--ground);font-size:12px;font-weight:600;
  font-family:system-ui,sans-serif;text-anchor:middle;
}
.chart .pt:hover .tip{opacity:1}
.chart .pt:hover .dot{r:5.5}
@media (prefers-reduced-motion:reduce){
  .chart .tip,.chart .endlabel{transition:none}
}

/* ---------- band section (breaks the page rhythm) ---------- */

.sec.band{background:var(--band);border-top:2px solid var(--hard)}

/* ---------- sticky context bar (example page) ---------- */

.ctx{
  position:sticky;top:62px;z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .24s var(--e-out),transform .24s var(--e-out),visibility .24s;
}
.ctx.is-on{opacity:1;visibility:visible;transform:none}
.ctx-in{
  max-width:var(--page);margin:0 auto;padding:11px 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
@media (max-width:640px){ .ctx-in{padding:10px 18px} }
.ctx-in .who{font-size:14px;font-weight:640;letter-spacing:-.015em}
.ctx-in .what{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
@media (prefers-reduced-motion:reduce){ .ctx{transition:none} }

/* ---------- misc ---------- */

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);
  padding:11px 16px;z-index:100;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

/* ---------- the one authored moment ----------
   The page's argument is sequential: you read the brands an assistant named,
   and only then notice yours is not among them. The record is written in that
   order on load — head, question, rows in turn, and the struck-through row and
   its verdict last, so the finding lands after the evidence rather than with it.

   One moment, on the hero only. Everything else on the site is a state change
   (hover, open, focus), not an entrance. Rules:
   - opacity and transform only, so it composites and never reflows;
   - the initial hidden state is declared INSIDE the no-preference query, so a
     browser that ignores the animation still renders the record, visible;
   - it runs once, forwards, and nothing loops. */
/* Scoped to the hero record, and to nothing else. .board is also the shell for
   the example check, the portal summary, the welcome and thanks panels and two
   forms; unscoped, this put 27 elements of the example page (including its
   tables and prose, far below the fold) at opacity:0 on load, and put the
   sign-in and lead-capture form bodies there too.

   The row delays are declared per row rather than by :nth-of-type. On the
   example page the record head is itself a <div>, so nth-of-type counted it as
   row one: every row picked up the delay meant for the row above it and the
   struck-through row, being the sixth div, matched no rule at all and arrived
   at 0s — ahead of every brand above it, which is precisely backwards. The
   sequence exists so the finding lands after the evidence, so the order is
   stated in the markup it belongs to instead of being inferred from tag names. */
@media (prefers-reduced-motion:no-preference){
  .hero .board > *{
    opacity:0;transform:translate3d(0,10px,0);
    animation:enter .58s var(--e-out) forwards;
    animation-delay:var(--d,0s);
  }
}
@keyframes enter{ to{opacity:1;transform:none} }

/* The record quotes one real question and says plainly that the counts span
   six. It used to quote a summary sentence nobody asked, which is the one
   thing a page selling checkable findings cannot do. */
.board-more{
  display:block;margin-top:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--muted);font-weight:500;
}