/* Merid marketing — one system, four pages.
   Rebuilt 2026-09-10 against the reference the founder chose.

   Sizes are the reference's own CSS, read out of its stylesheet and markup
   rather than measured off a screenshot. Two earlier passes measured
   displayed pixels and treated them as CSS pixels, which inflated the whole
   system by about 1.35x. Never measure a picture of a website. Fetch it and
   read the values.

   Theirs, verbatim: container max-width 1512px on 64px gutters, 80px above
   the fold; the bar 60px tall on 32px gutters, so it is wider than the
   content; headline 40px/1.12 at -0.04em, weight 400; lede 16px/1.4 in a
   light grey; the hero text column capped at 455px; 16px between headline
   and lede, 20px to the button, 64px to the panel; buttons 14px on 6px/12px
   padding at a 4px radius with line-height 1.

   Shared rather than inlined per page: the site is now home, solutions,
   pricing and security, and four copies of a type scale drift within a
   week. It lives beside the pages because the marketing folder deploys
   standalone, so /site.css resolves the same in production and locally.

   The system is four moves, every one a subtraction:
     1. Warm off-white ground, never pure white
     2. Serif for the wordmark and section display only; Geist for all else
     3. Two-tone headline on section heads; the hero is single ink,
        which is where the reference puts its emphasis instead
     4. No accent colour. Air does the emphasis.                          */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{color-scheme:light}
/* The ground is a near-white with a whisper of warmth left in it, not a
   cream. Taken off the reference's own ramp — its --color-gray-50-ivory is
   #FAFAF9, gray-100 #F2F1F0, gray-200 #E5E5E3, gray-300 #CCCAC6, ink
   #0F0E0D — so the relationships between our surfaces are unchanged and only
   the temperature moves. */
:root{
  --bg:#FAFAF9; --bg-lift:#F2F1F0; --bg-card:#FFFFFF; --bg-ink:#0F0E0D;
  --fg:#0F0E0D; --fg-mid:#8F8B85; --fg-dim:#565350; --fg-mute:#7A766F;
  --fg-inv:#FAFAF9;
  --line:#E5E5E3; --line-soft:#EFEEEC;
  /* One accent, spent in one place: the work. Every mark that says "somebody
     did this" is steel — the biller's margin notes, both pipelines, and the
     exhibit each drafted sentence rests on. Desaturated and slightly cool, so
     it sits on the warm ground without becoming a brand colour. */
  --steel:#4C6885; --steel-dim:#6E829A; --steel-soft:#EBF0F6; --steel-line:#D3DDE9;
  --nav-h:60px;
  --nav-tint:rgba(250,250,249,.72);
  /* One easing curve for the demo: a decisive ease-out, so every
     reveal decelerates into place the same way. */
  --ez:cubic-bezier(.32,.72,0,1);
}
*{-webkit-font-smoothing:antialiased}
html,body{background:var(--bg);color:var(--fg);
  font-family:'Geist',ui-sans-serif,system-ui,sans-serif;
  line-height:1.5;font-size:14px}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
img,svg{display:block;max-width:100%}
.shell{max-width:1512px;margin:0 auto;padding-left:64px;padding-right:64px}
/* The bar is deliberately wider than the content: the reference insets its
   logo 24px and its text 84px, so the masthead reads as a frame around the
   page rather than a row inside it. */
.shell-wide{width:100%;padding-left:32px;padding-right:32px}
@media(max-width:1023.98px){.shell{padding-left:32px;padding-right:32px}
  .shell-wide{padding-left:20px;padding-right:20px}}
@media(max-width:640px){.shell,.shell-wide{padding-left:20px;padding-right:20px}}

/* ── Type ───────────────────────────────────────────────────────── */
.wordmark{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.012em}
/* 32/40px stated outright, not 2/2.5rem. `rem` resolves against the root,
   and the root here is 14px, so the rem form silently rendered the display
   line at 35px — an eighth short of the reference and the single reason the
   hero never matched. */
.h-display{font-size:32px;line-height:1.12;letter-spacing:-.04em;font-weight:400}
.h-display b{font-weight:500}
@media(min-width:640px){.h-display{font-size:40px}}
/* A display line breaks where the sense breaks, not where the measure runs
   out. Left to itself the greedy wrap drops "team" alone onto a second line,
   and a one-word last line at 40px reads as a mistake. One block per phrase
   is deterministic where `text-wrap:balance` is only a preference, and each
   phrase still wraps inside its own line on a narrow screen. */
.h-lines > span{display:block}
/* Their section heads are the display size, not a step down from it. */
.h1{font-size:32px;line-height:1.12;letter-spacing:-.04em;font-weight:400}
@media(min-width:640px){.h1{font-size:40px}}
.h2{font-size:22px;line-height:1.12;letter-spacing:-.04em;font-weight:400}
@media(min-width:1024px){.h2{font-size:24px}}
.dim{color:var(--fg-mid)}
.lede{font-size:16px;line-height:1.4;color:var(--fg-mid);max-width:58ch}
.note{font-size:14px;color:var(--fg-mid);letter-spacing:-.02em}

/* ── Buttons — the reference's proportions ──────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;line-height:1;font-weight:400;letter-spacing:-.04em;
  padding:6px 12px;border-radius:4px;border:1px solid transparent;
  transition:background .16s,border-color .16s,color .16s;cursor:pointer;
  white-space:nowrap}
.btn-primary{background:var(--fg);color:var(--fg-inv)}
.btn-primary:hover{background:#2C2A26}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn-ghost:hover{background:rgba(22,21,19,.06)}
/* The reference uses one button size everywhere, the hero included. */
.btn-lg{font-size:14px;padding:6px 12px}
.btn-inv{background:var(--fg-inv);color:var(--bg-ink);border-color:var(--fg-inv)}
.btn-inv:hover{background:#fff}

/* ── Masthead — logo left, links centred, actions right ─────────
   No drawers. Every destination in the bar is a page, so hovering a word
   does nothing and clicking it goes there, which is the whole navigation
   model now that the site is four pages instead of fifteen. */
/* Translucent, with the page blurring through it — the reference blurs 16px
   behind a 72% tint of its own ground, and those are the numbers here. The
   rule only arrives once something has scrolled under it. */
.masthead{position:sticky;top:0;z-index:101;
  background:var(--nav-tint);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s}
.masthead.scrolled{border-bottom-color:var(--line)}
@supports not (backdrop-filter:blur(1px)){.masthead{background:var(--bg)}}
/* Flex, not a three-column grid: the destinations no longer sit centred in
   the viewport, they sit against the buttons on the right. The mark is the
   only thing on the left and `margin-right:auto` on it does the pushing. */
.masthead nav{height:var(--nav-h);display:flex;align-items:center}
/* The lockup, built the way a monogram beside a word is supposed to be
   built: the mark is a letter in the line, not a badge parked next to it.

   Two rules make it work, and both were missing before. The mark is set to
   the wordmark's CAP height — 0.667em in Newsreader, so 12px against an 18px
   word — where it had been sized against the word's whole ink height and came
   out 55% too tall. And `align-items:baseline` puts the mark's bottom edge on
   the text baseline, because for a replaced element that edge *is* the
   baseline; centring instead left it hanging four pixels low. Measured after:
   mark 12.0 against a 12.0 cap, flush on the baseline and the cap line.

   The gap is 5px, not the 7 that looked right in isolation: the mark is only
   12px wide-ish, so 7 read as two things standing near each other rather than
   one lockup. */
/* The mark on its own again, a step up from the 14.5px it took when a word
   sat beside it — alone it has the corner to hold. */
/* Mark and name together at the far left. Sized by rendering the four
   plausible pairings side by side rather than by arithmetic: the mark comes
   down from 22 to 18 and the word sits at 21, which is the point where
   neither dominates and the lockup still reads at a glance in a 60px bar. At
   22 the mark starts to crowd the bar; at 15 it stops being the logo. */
/* 21px and -.012em: the app's own `.side-mark`, to the decimal. The two are
   the same wordmark in the same place — top left of the same product — and
   they were a size and a tracking apart, which reads as a rebrand between
   the site and the thing the site is about.

   The paragraph above already specified 21. The code had drifted to 25 and
   the comment stayed behind, which is the ordinary way a design note stops
   describing the design. Matching the app puts both back where that
   paragraph says they belong, mark at 18 against a word at 21.

   `font-variation-settings: 'opsz' 25` goes with it. It pinned Newsreader's
   optical size to a point the type is no longer set at, and the app pins
   nothing — `font-optical-sizing: auto` is the default and lets the face
   choose, which is the whole reason to use a variable font with an opsz
   axis. */
.masthead .wordmark{line-height:1;display:flex;align-items:center;gap:8px;
  color:var(--fg);margin-right:auto;
  font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:21px;
  letter-spacing:-.012em;font-optical-sizing:auto}
.masthead .wordmark svg{height:18px;width:auto}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{display:inline-flex;align-items:center;height:32px;padding:0 12px;
  border-radius:4px;font-size:14px;font-weight:400;letter-spacing:-.04em;
  transition:background-color .15s}
.nav-links a:hover{background:rgba(22,21,19,.05)}
.nav-links a[aria-current="page"]{background:rgba(22,21,19,.05)}
/* 28px here, not 12: the last link already carries 12px of its own padding,
   so 12 put the buttons 25px from "Pricing" while the links sit 42px apart —
   the break between the two groups read tighter than the spacing inside
   either one. 28 makes it 41 and the pair of buttons stays tight at 12. */
.nav-acts{display:flex;align-items:center;gap:12px;margin-left:28px}

/* ── About: the home page's own sections, one word each ─────────────
   The trigger is a <button>, not a link, and deliberately: it goes
   nowhere. Everything under it is on the home page already, so a
   parent link would either duplicate the wordmark or drop the reader
   at the top of a page they are usually already on. Hover opens it on
   a fine pointer, focus-within opens it for the keyboard, and the
   click handler exists for touch, where neither fires. */
.nav-dd{position:relative}
.nav-dd-t{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:0;border-radius:4px;background:none;font:inherit;font-size:14px;font-weight:400;
  letter-spacing:-.04em;color:inherit;cursor:pointer;
  transition:background-color .15s;-webkit-tap-highlight-color:transparent}
.nav-dd-t svg{width:9px;height:auto;opacity:.5;transition:transform .18s ease}
.nav-dd:hover .nav-dd-t,.nav-dd:focus-within .nav-dd-t,
.nav-dd-t[aria-expanded="true"]{background:rgba(22,21,19,.05)}
.nav-dd:hover .nav-dd-t svg,.nav-dd:focus-within .nav-dd-t svg,
.nav-dd-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-dd-p{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:196px;
  display:grid;padding:7px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;box-shadow:0 1px 2px rgba(22,21,19,.04),0 12px 30px rgba(22,21,19,.09);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-dd:hover .nav-dd-p,.nav-dd:focus-within .nav-dd-p,
.nav-dd-p[data-open]{opacity:1;visibility:visible;transform:none}
.nav-dd-p a{display:block;padding:8px 11px;border-radius:5px;font-size:14px;
  font-weight:400;letter-spacing:-.02em;color:var(--fg-mid);white-space:nowrap;
  transition:background-color .13s,color .13s}
.nav-dd-p a:hover{background:rgba(22,21,19,.05);color:var(--fg)}
.dark .nav-dd:hover .nav-dd-t,.dark .nav-dd:focus-within .nav-dd-t,
.dark .nav-dd-t[aria-expanded="true"]{background:rgba(251,250,248,.08)}
.dark .nav-dd-p a:hover{background:rgba(251,250,248,.08)}
@media(prefers-reduced-motion:reduce){
  .nav-dd-t svg,.nav-dd-p{transition:none}}

/* Anchored home sections clear the sticky masthead. Without this the About
   menu lands with the heading tucked under the bar, which reads as a broken
   link rather than a short scroll. */
#what-merid-does,#mechanics,#integrations,#questions{
  scroll-margin-top:calc(var(--nav-h) + 14px)}

/* "What Merid Does" is a header for the three sections that follow, so it sits
   close to the first of them rather than a section-gap away. Same 34px the
   grid under "How Merid Works" uses. */
#what-merid-does + section{padding-top:34px}
/* The Integrations "Learn more" took the caption's place under the diagram. */
.ig-head + .fl + .xp-t{margin-top:26px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:1023px){.nav-links{display:none}.nav-acts .btn-ghost{display:none}}


/* ── Rhythm ─────────────────────────────────────────────────────── */
.sec{padding-block:64px}
@media(min-width:768px){.sec{padding-block:96px}}
.sec-tight{padding-block:48px}
@media(min-width:768px){.sec-tight{padding-block:72px}}
.hero{padding-top:80px;padding-bottom:64px}
/* lg:gap-16 between the hero block and the panel below it.
   Carried by the hero's own padding-bottom rather than the next section's
   padding-top. The previous version set it on the sibling section and it did
   not render; the hero's padding-top plainly does, so the gap now hangs off
   the element that is already known to work. One mechanism, not two. */
.stage-wrap{padding-top:0}
@media(max-width:1024px){.hero{padding-top:64px;padding-bottom:48px}}
@media(max-width:640px){.hero{padding-top:56px;padding-bottom:48px}}
.hero h1{max-width:500px}
/* Headline alone, centred. The forced line break stays — it is what keeps
   "team" off a line of its own — and the measure widens because there is no
   longer a paragraph under it setting the column. */
.hero-mid{text-align:center;padding-bottom:44px}
/* Sized to the reference, read off its own classes rather than its pixels:
   text-4xl / leading-10 at the base, leading-12 at md, then text-5xl with
   leading-13 from xl — 36/40, 44/48, 48/52 — with tracking-display at -.01em
   and font-normal! beating font-semimedium to land on 400. Scoped to the hero
   so .h-display keeps its own scale on the pages that use it. */
/* The reference sets its h1 in "Aside Display", a typeface commissioned from
   Family Type and licensed under their EULA — not shippable here. Inter with
   optical sizing is the nearest face that is: at 48px the browser serves the
   Display optical size, which is what tightens the fit. Weight and tracking
   are the reference's own (font-normal!, tracking-display -.01em). */
.hero-mid h1{max-width:none;margin:0 auto;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;font-optical-sizing:auto;
  font-size:36px;line-height:40px;letter-spacing:-.01em;font-weight:400}
@media(min-width:768px){.hero-mid h1{font-size:44px;line-height:48px}}
@media(min-width:1280px){.hero-mid h1{font-size:48px;line-height:52px}}
@media(max-width:640px){.hero-mid{padding-bottom:32px}}
/* The hero button is Harvey's "Request a Demo", read off harvey.ai's own
   classes and tokens rather than a ruler: h-12 / px-5 / rounded-sm (.25rem)
   / universal-text-2 (1rem, 500, leading-none) on gray-950-ink #0f0e0d with
   gray-50-ivory #fafaf9 text, hover gray-800 #33312c, active gray-700
   #524f49, colours over .3s. Their ink and ivory are our --fg and --fg-inv
   byte for byte, so no new colour enters the palette. Scaled up one step
   from their h-12/px-5/text-base to h-14/px-7/text-lg — our hero runs to
   48px where theirs is smaller, and the button has to hold its own under
   it. The 4px corner is theirs unchanged: the sharp edge is the point. */
.hero-mid .btn-hero{display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 28px;margin-top:36px;border-radius:4px;
  background:var(--fg);color:var(--fg-inv);font-size:18px;line-height:1;font-weight:500;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  transition:background-color .3s var(--ez),color .3s var(--ez)}
.hero-mid .btn-hero:hover{background:#33312C}
.hero-mid .btn-hero:active{background:#524F49}
.hero-mid .btn-hero:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media(max-width:640px){.hero-mid .btn-hero{height:50px;padding:0 22px;font-size:16px;margin-top:26px}}
/* 500px rather than the reference's 455: the lede is now one sentence that
   has to name every stage we touch, and at 455 it ran to five lines. */
.hero .lede{margin-top:16px;max-width:500px}
.hero .cta{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ── The stage — the product shot under the hero ────────────────
   A field again, but a photographed one rather than the flat sage ramp that
   was here before. Three ingredients and no image: a diagonal base, two wide
   radial washes for cloud, and a 3px dot grid at low alpha for grain. The
   grid is the part that matters — the washes alone read as an airbrush, and
   with it they read as a surface.

   The window sits centred in it with equal margin on all four sides. It ran
   off the bottom until 2026-09-11; the bleed said "the screen continues past
   the picture", but it also meant the field never closed under it, and a
   frame that only holds three sides is not a frame. */
/* The field is gone: the shot sits on the page and the shadow alone carries
   the elevation. `overflow:hidden` left with it — it was clipping the very
   shadow that now does all the work, and there is no longer a painted edge
   for it to protect. What remains is bottom room for the shadow to fall into. */
.stage{position:relative;padding:0 0 clamp(20px,3vw,44px)}
.panel{position:relative;background:var(--bg-card);border-radius:12px;
  max-width:1180px;margin:0 auto;overflow:hidden;
  display:grid;grid-template-columns:186px 1fr;
  /* Four layers, not one. A hairline contact edge so the corner is crisp, a
     tight drop for the millimetre right under it, a mid spread, and a wide
     ambient carrying most of the height. A single blurred shadow at this size
     reads as a grey smudge rather than as elevation. */
  /* Back off the field weighting: on the page's own off-white these alphas
     read as elevation, where the mid-tone field's heavier set reads as soot. */
  box-shadow:0 0 0 1px rgba(16,24,22,.07),
             0 2px 4px rgba(16,24,22,.06),
             0 14px 28px -10px rgba(16,24,22,.15),
             0 44px 80px -28px rgba(16,24,22,.26)}

/* The rail, light, matching the product. Its type is a step smaller than the
   app's because the panel is a scaled view of a screen, not the screen. */
/* ── The rail, matched to the reference ──────────────────────────────
   Black again, and this time structured the way the reference structures its
   own: a wordmark with two quiet actions opposite it, destinations carrying
   their icons, group labels in sentence case, and a person at the foot.

   The icons are the product's own, lifted from apps/web/app/queue.html rather
   than drawn for the picture, so the shot and the screen cannot drift.

   On the sizes: the two screenshots are at different scales and the
   reference's rail is a raster with no stylesheet to read, so the absolute
   values here are not measured off it. What is matched is the structure and
   the relationships — pitch against label, label against wordmark, the
   weight of an active row against a resting one. */
.p-rail{background:#141312;color:#B4B3AD;padding:18px 12px 16px;min-width:0;
  display:flex;flex-direction:column}
.p-top{display:flex;align-items:center;gap:10px;padding:0 8px 0 9px}
.p-mark{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;
  letter-spacing:-.012em;color:#F4F3EE;line-height:1}
.p-ico{margin-left:auto;display:flex;gap:10px}
.p-ico svg{width:14px;height:14px;stroke:#8E8C82;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}

.p-nav{display:flex;flex-direction:column;gap:1px;margin-top:22px}
.p-nav a{display:flex;align-items:center;gap:11px;padding:6px 9px;border-radius:7px;
  font-size:12.5px;color:#D3D1C8;white-space:nowrap;overflow:hidden}
.p-nav a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.72}
.p-nav a span{overflow:hidden;text-overflow:ellipsis}
.p-nav a.on{background:rgba(255,255,255,.11);color:#FFF}
.p-nav a.on svg{opacity:1}

.p-rail h4{font-size:11.5px;font-weight:400;color:#8E8C82;padding:0 9px;
  margin:24px 0 8px}
.p-due{display:flex;flex-direction:column;gap:1px}
.p-due a{display:block;padding:6px 9px;border-radius:7px;min-width:0}
.p-due b{display:block;font-weight:400;font-size:12px;color:#D3D1C8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-due span{display:block;font-size:11px;color:#77766F;margin-top:2px}
.p-due i{font-style:normal;color:#C8A06A}

/* A person at the foot, which is what tells you this is somebody's screen. */
.p-you{margin-top:auto;padding:14px 9px 0;display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:#D3D1C8}
.p-you i{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-style:normal;font-size:10px;color:#F4F3EE;
  flex:none}

.p-main{min-width:0;padding:15px 0 14px}
.p-head{display:flex;align-items:center;gap:14px;padding:0 16px;flex-wrap:wrap}
.p-head h3{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;
  letter-spacing:-.016em;line-height:1}
.p-chips{display:flex;gap:5px;margin-left:auto}
.chip{font-size:11.5px;padding:4px 9px;border-radius:999px;color:var(--fg-mute);
  border:1px solid var(--line-soft);white-space:nowrap}
.chip b{font-weight:500;color:var(--fg-mid);margin-left:3px}
.chip.on{background:var(--bg-lift);color:var(--fg);border-color:transparent}
.chip.on b{color:var(--fg)}

/* One grid shared by the header strip and every row, so the columns line up
   the way they do in the product. */
.p-hrow,.p-row{display:grid;grid-template-columns:150px 112px 1fr 96px;
  gap:12px;align-items:center}
.p-hrow{padding:14px 16px 7px;font-size:10.5px;letter-spacing:.04em;
  color:var(--fg-mute);border-bottom:1px solid var(--line-soft)}
.p-hrow .r{text-align:right}
.p-rows{display:flex;flex-direction:column}
.p-row{padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.p-row:last-child{border-bottom:0}
.p-row .c{min-width:0}
.p-row .c b{display:block;font-weight:500;letter-spacing:-.008em}
.p-row .c em,.p-row .a em{display:block;font-style:normal;font-size:11px;
  color:var(--fg-mute);margin-top:2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.p-row .st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--fg-dim);white-space:nowrap}
.p-row .st::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.p-row .st.ok::before{background:#2E6B48}
.p-row .st.wait::before{background:#8A6224}
.p-row .f{color:var(--fg-mute);line-height:1.45;min-width:0}
.p-row .a{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.p-row .a b{font-weight:500;font-size:12.5px}

/* Below the rail's width the panel stops pretending to be a desktop screen:
   the rail goes, and the two narrow columns fold into the claim. */
@media(max-width:900px){
  .panel{grid-template-columns:1fr}
  .p-rail{display:none}
  .p-hrow{display:none}
  .p-row{grid-template-columns:1fr auto;gap:4px 12px}
  .p-row .st{grid-column:1;order:3}
  .p-row .f{grid-column:1/-1;order:4}
  .p-row .a{grid-column:2;grid-row:1}
}

/* ── The ladder ─────────────────────────────────────────────────── */
.ladder{margin-top:40px;border-top:1px solid var(--line);max-width:720px}
.rung{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line-soft)}
.rung dt{font-size:16.5px}
.rung dd{font-variant-numeric:tabular-nums;color:var(--fg-mute);font-size:15px}
.rung.last dt,.rung.last dd{color:var(--fg);font-weight:500}
.rung.last{border-bottom-color:var(--line)}

/* Solutions runs the same figure, with the detail that page owes a reader
   living in the left column beside the panel. 560px rather than the home
   page's 455 because four bullets at 455 wrap into a column of stubs. */
@media(min-width:1024px){
  .flip.detail{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
}
.flip.detail .flip-copy{max-width:560px}

/* Solutions swaps the warm gradient for a dark, mottled field — closer to a
   photographed surface than to a colour ramp. Three ingredients, no image:
   two wide radial washes that give it cloud, one tight repeating dot grid at
   very low alpha that gives it grain, and a flat base under both. The dot
   grid is what stops the washes reading as an airbrush. */
.flip.detail .flip-card{background:none}
.flip.detail .flip-card::before{display:none}
/* Room around the panel. The window wants margin on a field like this, and
   the card grows with its contents rather than holding a fixed height. */
@media(min-width:1024px){
  .flip.detail .flip-card{padding:0;min-height:0}
}

.flip-copy .body > * + *{margin-top:16px}
.flip-copy .body p{font-size:16px;line-height:1.4;color:var(--fg-mid)}
.flip-copy .body ul,.pw-b ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.flip-copy .body li,.pw-b li{display:grid;grid-template-columns:19px minmax(0,1fr);gap:12px;
  font-size:16px;line-height:1.55;color:var(--fg-dim)}
.pw-b li{font-size:15px;line-height:1.5}
.flip-copy .body li svg,.pw-b li svg{width:15px;height:15px;margin-top:5px;stroke:var(--fg-mid);
  stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flip-copy .body li b,.pw-b li b{font-weight:500;color:var(--fg)}
.flip + .flip{margin-top:0;border-top:1px solid var(--line);padding-top:56px}

/* ── Dark pages ──────────────────────────────────────────────────────
   The security page inverts. It is the one page a compliance officer opens
   expecting to be sold to, and a different ground says the register has
   changed before a word is read.

   Only the page tokens flip. `--bg-card` stays white on purpose: the product
   shots are photographs of a light application and inverting them would be a
   lie about what the thing looks like. The same reason the reference keeps
   its screenshots light on a black page. */
.dark{
  --bg:#161513;
  --bg-lift:#221F1C;
  --bg-ink:#FBFAF8;
  --fg:#FBFAF8;
  --fg-dim:#CFCAC2;
  --fg-mid:#9A958C;
  --fg-mute:#807B72;
  --fg-inv:#161513;
  --line:#332F2A;
  --line-soft:#2A2621;
  color-scheme:dark;
}
.dark .masthead{background:transparent}
.dark .masthead.scrolled{background:var(--bg);border-bottom-color:var(--line)}
.dark .btn-primary{background:var(--fg);color:var(--bg)}
.dark .btn-primary:hover{background:#fff}
.dark .btn-ghost{border-color:rgba(251,250,248,.34);color:var(--fg)}
.dark .btn-ghost:hover{background:rgba(251,250,248,.08);border-color:rgba(251,250,248,.5)}
.dark .nav-links a:hover,.dark .nav-links a[aria-current="page"]{background:rgba(251,250,248,.08)}
/* The closing block is ink on every page, so on a dark page it must opt out
   of the inversion rather than ride it. `.dark` flips `--bg-ink` to cream and
   `--fg-inv` to near-black, which turned the footer inside out — a pale block
   closing a black page. Re-declaring the pair here restores the one footer
   the whole site shares, and every rgba() literal inside it is already keyed
   to the cream, so they come right with it. */
.dark .dfoot{--bg-ink:#161513;--fg-inv:#FBFAF8;border-top:1px solid var(--line)}

/* And the product shots keep the light palette entirely. `--bg-card` alone
   was not enough: a screen inherited the page's near-white ink and painted it
   onto its own white ground, so every title inside a shot vanished. The whole
   set is re-declared here rather than patched colour by colour — a shot is a
   picture of a light application and should be lit like one. */
.dark .scr,.dark .panel{
  --bg:#F7F6F3;
  --bg-lift:#F1EFE9;
  --bg-ink:#161513;
  --fg:#161513;
  --fg-dim:#57544E;
  --fg-mid:#8A867E;
  --fg-mute:#757168;
  --fg-inv:#FBFAF8;
  --line:#E3E0DA;
  --line-soft:#EEEBE5;
  color:var(--fg);
}

/* ── Diagram cards ───────────────────────────────────────────────────
   The reference's shape: a dashed cell, a technical drawing sitting in its
   own lighter panel at the top, then a large heading and two lines of prose.
   Everything is line art in one weight with a single accent marking the path
   that matters — the drawing carries the mechanism so the words do not have
   to, which is the whole reason this replaced four paragraphs. */
.dg{display:grid;gap:0;margin-top:56px;
  border:1px dashed var(--line);border-radius:14px;overflow:hidden}
@media(min-width:820px){.dg{grid-template-columns:repeat(2,1fr)}}
.dg-c{padding:0;border-bottom:1px dashed var(--line)}
@media(min-width:820px){
  .dg-c:nth-child(odd){border-right:1px dashed var(--line)}
  .dg-c:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:819px){.dg-c:last-child{border-bottom:0}}
.dg-art{margin:22px 22px 0;border:1px solid var(--line-soft);border-radius:10px;
  background:var(--bg-lift);padding:22px;display:grid;place-items:center;
  min-height:200px}
.dg-art svg{width:100%;height:auto;max-width:330px;display:block}
.dg-t{padding:30px 26px 34px}
.dg-t h3{font-size:26px;line-height:1.14;letter-spacing:-.022em;font-weight:400;
  margin-bottom:12px}
.dg-t p{font-size:16px;line-height:1.5;color:var(--fg-mid);max-width:44ch}

/* One weight for the structure, one accent for the live path. */
.dg-art .ln{stroke:var(--line);stroke-width:1.2;fill:none}
.dg-art .lnd{stroke:var(--line);stroke-width:1.2;fill:none;stroke-dasharray:3 3}
.dg-art .hot{stroke:#5FA8A5;stroke-width:1.6;fill:none}
.dg-art .hotf{fill:#5FA8A5}
.dg-art .box{stroke:var(--line);stroke-width:1.2;fill:var(--bg)}
.dg-art .hotbox{stroke:#5FA8A5;stroke-width:1.4;fill:rgba(95,168,165,.10)}
.dg-art text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:7px;
  fill:var(--fg-mute)}
.dg-art text.h{fill:#5FA8A5}

/* ── Compliance grid ─────────────────────────────────────────────────
   The reference shows earned certifications. We have none, so this shows
   state instead: what the code enforces today, what is built to the proposed
   rule and not yet exercised, and what has not been started. A grid where
   every cell is green is a grid a compliance officer stops reading. */
.cg{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:12px;overflow:hidden;margin-top:48px}
@media(min-width:700px){.cg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cg{grid-template-columns:repeat(3,1fr)}}
.cg-i{background:var(--bg);padding:34px 28px 30px;display:flex;flex-direction:column;
  align-items:flex-start;min-height:224px}
.cg-i svg{width:42px;height:42px;stroke:var(--fg-dim);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto}
.cg-i b{display:block;margin-top:26px;font-size:15px;font-weight:450}
.cg-i span{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;
  color:var(--fg-mute)}
.cg-i span::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:currentColor}
.cg-i.live span{color:#7FB394}
.cg-i.ready span{color:#C9A961}
.cg-i.none span{color:#C08078}
.cg-note{margin-top:22px;font-size:14px;line-height:1.55;color:var(--fg-mid);
  max-width:70ch}

/* ── The flip ────────────────────────────────────────────────────────
   The reference's two-column figure: the words in a 455px column on the
   left, and on the right a gradient card with a product panel floating in
   it. Values are its own — 455px text column, 64px between the columns,
   40px of padding inside the card, an 8px radius on the card — read off its
   stylesheet rather than measured off a screenshot.

   On the home page these are stacked and pinned, so the words and the panel
   beside them flip together while the reader holds still. On solutions they
   are just sections, because that page is read rather than scrolled through.
*/
.flip{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){
  .flip{grid-template-columns:minmax(0,455px) minmax(0,1fr);gap:64px}
}
.flip-copy{display:flex;flex-direction:column;gap:16px;max-width:455px}
.flip-copy h2,.flip-copy h3{font-size:32px;line-height:1.12;letter-spacing:-.04em;
  font-weight:400}
@media(min-width:640px){.flip-copy h2,.flip-copy h3{font-size:40px}}
.flip-copy p{font-size:16px;line-height:1.4;color:var(--fg-mid)}

/* The picture column. This was a four-stop gradient card with a blurred copy
   of itself behind it; the gradient came off with the rest of the grounds on
   2026-09-12. It keeps its clip and its centring, because the screen inside is
   still wider than the column and still meant to run past it. */
.flip-card{position:relative;overflow:hidden;border-radius:8px;
  display:flex;align-items:center;padding:0}
/* 380, not the reference's 500. Their panel is a full application window
   that nearly fills the card; ours is a single focused readout, and at 500 the
   gradient had more area than the thing it was framing. The ratio of panel to
   card is what matters, and this puts it back near theirs. */
@media(min-width:1024px){.flip-card{padding:0}}

/* ── The device frame ────────────────────────────────────────────────
   A wrapper, and nothing else. This carried a dark bezel — two radial washes
   over a dot grid, the screen inset from the top and left and running off the
   right — until 2026-09-12, when the owner asked for the grounds behind every
   picture on the home page to come off. What is left does the one thing the
   bezel was also doing: `overflow:hidden` on a `.scr` that is 126% wide is
   what makes the screen run past the right edge, and the bleed is what still
   says "a window onto a running app" rather than "a picture of one". The
   shadow on `.scr` now carries the separation the bezel used to. */
.dev{position:relative;border-radius:14px;overflow:hidden;padding:0}
@media(max-width:1023px){.dev{padding:26px 0 0 22px;border-radius:10px}}
/* Inside a frame the screen is not cropped by a percentage — it simply runs
   past the edges the padding does not hold it off. */
.dev .scr{width:100%;border-radius:10px 0 0 0;box-shadow:none}
/* And inside the hero panel it is not cropped at all: the 126% is a bleed for
   the section figures, where a glimpse is the point. The hero is a whole
   screen. */
.panel .scr{width:100%;border-radius:0;box-shadow:none}

/* ── The agent run: a case working through the pipeline ──────────────
   Three step states, the way the reference draws them: finished steps struck
   through behind a filled check, the running one live, the rest waiting
   behind a dotted ring. A hairline runs down between the markers so the
   sequence reads as one thread rather than as a list.

   The running step shimmers — a light band travelling across the words via a
   clipped gradient. It is the one piece of motion on the site and it earns
   its place by saying "this is happening now" without a spinner label.
   Both animations stop dead under `prefers-reduced-motion`, which is not
   optional: a moving gradient behind text is exactly what that setting is
   for. */
/* ── The two screen formats, carbon-copied from the reference ────────
   Every screen in this section is one of two things: a grouped table with a
   verdict pill, or a document beside a first-pass review. Standardising on two
   is the point — four bespoke screens read as four products, and a reader who
   has learned one layout reads the next three for free.

   The header is the same on both: a breadcrumb saying where you are, then a
   toolbar of the actions that belong to that view. */
.hv-crumb{display:flex;align-items:center;gap:8px;padding:15px 20px;
  font-size:13px;letter-spacing:-.01em}
.hv-crumb b{font-weight:400;color:var(--fg-mute)}
.hv-crumb i{font-style:normal;color:var(--line);font-size:11px}
.hv-crumb span{font-weight:500;color:var(--fg)}
.hv-bar{display:flex;align-items:center;gap:0;padding:0 8px;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  overflow:hidden}
.hv-bar span{display:inline-flex;align-items:center;gap:7px;padding:11px 12px;
  font-size:12.5px;letter-spacing:-.01em;color:var(--fg-dim);white-space:nowrap}
.hv-bar span + span{box-shadow:-1px 0 0 var(--line-soft)}
.hv-bar svg{width:14px;height:14px;fill:none;stroke:var(--fg-mid);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* The grouped table. A header row of column names, folder rows that carry a
   count, then numbered rows ending in a pill. */
.hv-t{font-size:12.5px}
.hv-th,.hv-tr{display:grid;grid-template-columns:30px 1.45fr 2fr .72fr;
  gap:0 12px;align-items:center;padding:11px 20px}
.hv-th{font-size:11.5px;color:var(--fg-mute);border-bottom:1px solid var(--line-soft);
  letter-spacing:-.005em}
.hv-th span{display:flex;align-items:center;gap:7px}
/* One rule for every icon in the table — a glyph that inherits no size paints
   itself at the SVG default of 300px and swallows the row. */
.hv-t svg,.hv-g svg{width:13px;height:13px;fill:none;stroke:var(--fg-mid);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hv-g svg{stroke:var(--fg-dim)}
.hv-g{display:flex;align-items:center;gap:9px;padding:11px 20px;
  background:var(--bg-lift);font-size:12.5px;font-weight:500;color:var(--fg)}
.hv-g em{font-style:normal;font-weight:400;color:var(--fg-mute);
  font-variant-numeric:tabular-nums}
.hv-g i{margin-left:auto;display:flex}
.hv-g i svg{width:12px;height:12px;stroke:var(--fg-mute)}
.hv-tr{border-bottom:1px solid var(--line-soft);color:var(--fg-dim)}
.hv-tr:last-child{border-bottom:0}
.hv-n{font-variant-numeric:tabular-nums;font-size:11px;color:var(--fg-mute)}
.hv-f{display:flex;align-items:center;gap:9px;min-width:0}
.hv-f b{font-weight:400;color:var(--fg);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hv-c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-dim)}
/* The verdict pill. Three tones and a muted fourth, because a row that is out
   of contention should look it rather than being hidden. */
.hv-p{justify-self:start;font-size:11.5px;line-height:1;padding:6px 11px;
  border-radius:6px;white-space:nowrap}
.hv-p.hi{background:#FBEAE8;color:#A8231C}
.hv-p.mid{background:var(--bg-lift);color:var(--fg-dim)}
.hv-p.lo{background:#E8F2EB;color:#2E6B48}
.hv-p.na{background:transparent;color:var(--fg-mute);padding-left:0}
/* ── The map: what comes in, what goes out ───────────────────────────
   Two columns rather than a table, because the point is the direction of
   travel and a table flattens that. Each row names the artefact, then where
   it comes from or where it goes. */
.io{padding:24px 30px 28px;display:grid;gap:26px}
@media(min-width:600px){.io{grid-template-columns:1fr 1fr;gap:0 34px}}
.io h5{font-size:12px; color:var(--fg-mute); padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.io-row{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.io-row:last-child{border-bottom:0}
.io-row b{display:block;font-size:13px;font-weight:500}
.io-row span{display:block;margin-top:4px;font-size:11.5px;color:var(--fg-mute);
  line-height:1.45}
.io-none{grid-column:1/-1;margin-top:8px;padding:12px 14px;border-radius:8px; background:var(--bg-lift);display:flex;align-items:center;gap:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:var(--fg-mute)}
.io-none b{margin-left:auto;font-weight:500;color:var(--fg)}

/* ── The clocks: two windows on one axis ─────────────────────────────
   Deadlines are the one thing on this page that is genuinely a picture — two
   spans of time from the same origin, one shorter than the other, and the
   shorter one is the one that binds. A table would have shown two dates; a
   bar shows why one of them stops mattering. */
.tl{padding:26px 30px 30px}
.tl-origin{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding-bottom:18px;border-bottom:1px solid var(--line-soft); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px; color:var(--fg-mute)}
.tl-origin b{font-weight:500;color:var(--fg);letter-spacing:.04em}
.tl-bar{margin-top:22px}
.tl-bar:first-of-type{margin-top:24px}
.tl-lab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:9px;font-size:12.5px;color:var(--fg-dim)}
.tl-lab em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.06em;color:var(--fg-mute);white-space:nowrap}
.tl-track{height:8px;border-radius:4px;background:var(--bg-lift);overflow:hidden}
.tl-track i{display:block;height:100%;border-radius:4px;background:var(--fg-mute)}
.tl-bar.rules .tl-lab{color:var(--fg)}
.tl-bar.rules .tl-lab b{font-weight:500}
.tl-bar.rules .tl-track i{background:var(--bg-ink)}
.tl-bar.rules .tl-lab em{color:#8C2F27}
/* The filed marker sits under the governing bar, at the point it was sent. */
.tl-mark{position:relative;height:26px;margin-top:8px}
.tl-mark span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:#2A5F41}
.tl-mark span::before{content:"";display:block;width:1px;height:9px;margin:0 auto 5px;
  background:#2E6B48}
.tl-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft); display:flex;align-items:center;gap:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:var(--fg-mute)}
.tl-foot b{margin-left:auto;font-weight:500;color:var(--fg)}

/* ── The redline: the letter, with what changed and why ──────────────
   The reference shows a document with tracked changes beside a panel that
   says what it thinks. Ours shows the same thing about an appeal: the draft,
   the sentence Merid replaced and what it replaced it with, and a citation
   chip on every factual claim.

   What ours deliberately does not borrow is the confidence percentage. The
   reference prints "18% similarity" and "73% similarity to precedents";
   we have no measured number of that kind and AI_STACK forbids publishing one
   until it comes from real filings. The chips here say what state a sentence
   is in, which is a fact about the draft rather than a score. */
.rl{padding:24px 30px 28px}
.rl-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:20px}
.rl-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  padding:5px 10px;border-radius:6px;background:var(--bg-lift);color:var(--fg-dim);
  white-space:nowrap}
.rl-chip i{width:6px;height:6px;border-radius:50%;background:var(--fg-mute);flex:none}
.rl-chip.good{background:#EAF1EC;color:#2A5F41}.rl-chip.good i{background:#2E6B48}
.rl-chip.need{background:#F7EDEB;color:#8C2F27}.rl-chip.need i{background:#A8231C}
.rl-doc p{font-size:13.5px;line-height:1.75;color:var(--fg-dim);margin:0 0 14px}
.rl-doc p:last-child{margin-bottom:0}
.rl-doc del{color:#A8231C;text-decoration:line-through;text-decoration-thickness:1px}
.rl-doc ins{color:#2A5A8C;text-decoration:none}
.rl-doc sup{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;
  color:var(--fg-mute);padding:0 2px;vertical-align:super}
.rl-src{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rl-src span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  padding:6px 11px;border:1px solid var(--line);border-radius:7px;color:var(--fg-dim)}
.rl-src svg{width:12px;height:12px;stroke:var(--fg-mute);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ── The review: the document, and what was made of it ───────────────
   The reference's shape — a toolbar with the version and the two actions, the
   document on the left, and a card on the right holding the assessment, the
   sources and the next step.

   One thing of theirs is not copied: the percentage. They print "18%
   similarity" and "73% similarity to precedents" beside a meter. We have no
   measured number like that and AI_STACK forbids inventing one, so the meter
   here carries a count that is actually true — criteria met out of criteria
   in the policy — and the label says so in words. A meter is a fine device;
   it just has to be measuring something. */
.rv-bar{display:flex;align-items:center;gap:14px;padding:11px 20px;
  border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--fg-dim)}
.rv-bar b{font-weight:400;color:var(--fg-mute);white-space:nowrap}
.rv-bar .rv-sp{flex:1}
/* flex:none or the button eats the spacer and spans the bar. */
.rv-bar .rv-ex{flex:none;background:var(--fg);color:var(--bg-card);padding:6px 13px;
  border-radius:6px;font-size:11.5px}
.rv-bar .rv-x{color:var(--fg-mute);font-size:13px}
.rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:0;
  background:var(--bg-lift)}
.rv-doc{padding:20px;min-width:0}
.rv-page{background:var(--bg-card);border-radius:6px;padding:20px 22px;min-width:0;
  box-shadow:0 1px 2px rgba(22,21,19,.05)}
.rv-page h6{font-size:11.5px;font-weight:600;margin-bottom:3px}
.rv-page small{display:block;font-size:11px;color:var(--fg-mute);margin-bottom:14px}
.rv-page p{margin:0 0 9px;font-size:11.5px;line-height:1.6;color:var(--fg-dim)}
.rv-page p.hit{background:#E8EAF9;border-left:2px solid #5B63D3;padding:8px 10px;
  color:var(--fg)}
.rv-page del{color:#A8231C;text-decoration:line-through;text-decoration-thickness:1px}
.rv-page ins{color:#2A5A8C;text-decoration:none}

.rv-p{background:var(--bg-card);border-radius:8px;margin:20px 20px 20px 0;
  padding:18px;box-shadow:0 0 0 1px rgba(22,21,19,.05);min-width:0}
.rv-p h5{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  margin-bottom:16px}
.rv-p h5::before{content:"M";display:grid;place-items:center;width:19px;height:19px;
  border-radius:5px;background:var(--fg);color:var(--bg-card);font-size:10px;
  font-weight:500;letter-spacing:-.02em;flex:none}
.rv-lab{font-size:11.5px;color:var(--fg-mute);margin-bottom:8px}
.rv-odds{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.rv-odds b{font-size:27px;font-weight:400;letter-spacing:-.025em;color:var(--fg);
  font-variant-numeric:tabular-nums;line-height:1}
.rv-odds span{font-size:11.5px;color:var(--fg-mute)}
.rv-p > p{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--fg-dim)}
.rv-chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.rv-sug{margin-top:10px;border:1px solid var(--line);border-radius:8px;
  padding:13px 14px;position:relative}
.rv-sug b{display:block;font-size:12.5px;font-weight:500;color:var(--fg);margin-bottom:5px}
.rv-sug p{font-size:11.5px;line-height:1.55;color:var(--fg-mute);margin-bottom:10px}
.rv-sug .rv-radio{position:absolute;right:13px;top:13px;width:15px;height:15px;
  border-radius:50%;border:1.5px solid var(--fg);display:grid;place-items:center}
.rv-sug .rv-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg)}
.rv-v{font-size:11.5px;padding:5px 10px;border-radius:6px;background:#F8E9E7;
  color:#8C2F27;white-space:nowrap}
.rv-meter{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
  color:var(--fg-mute);white-space:nowrap}
.rv-meter i{display:flex;gap:2px}
.rv-meter i em{width:4px;height:12px;border-radius:1px;background:var(--line)}
.rv-meter i em.on{background:var(--steel)}
.rv-meter.good i em.on{background:#2E6B48}
.rv-meter.bad i em.on{background:#A8231C}
.rv-meter b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
.rv-src{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.rv-src span{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  padding:6px 10px;border:1px solid var(--line);border-radius:6px;color:var(--fg-dim)}
.rv-src svg{width:12px;height:12px;stroke:var(--fg-mute);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1023px){.rv{grid-template-columns:1fr}
  .rv-p{margin:0 20px 20px}}

/* ── The drawer: one claim opened over the list ──────────────────────
   The reference dims the table and floats a detail panel over its right-hand
   side. Two things make it read as *over* rather than *beside*: the table
   keeps its full width underneath and is simply covered, and the panel casts
   a shadow leftward across it.

   This is the one screen that does not bleed past the frame. A drawer cut in
   half is a drawer you cannot read, and the whole point of it is the detail. */
.scr.whole{width:100%}
.dw{position:relative;min-height:0}
.dw-bg{opacity:.45;filter:saturate(.65)}
.dw-p{position:absolute;top:14px;right:14px;bottom:0;width:min(56%,330px);
  background:var(--bg-card);border-radius:10px 10px 0 0;overflow:hidden;
  box-shadow:-22px 0 44px -14px rgba(22,21,19,.20),0 0 0 1px rgba(22,21,19,.06)}
.dw-bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);color:var(--fg-mute);
  font-size:13px}
.dw-b{padding:18px 18px 0}
.dw-b h5{font-size:15px;font-weight:500;letter-spacing:-.01em;margin-bottom:16px}
.dw-meta{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:12px;
  align-items:center}
.dw-meta dt{color:var(--fg-mute)}
.dw-meta dd{margin:0;color:var(--fg-dim)}
.dw-meta dd a{color:#414A9B;text-decoration:underline;text-underline-offset:2px}
.dw-who{display:inline-flex;align-items:center;gap:7px}
.dw-who i{width:17px;height:17px;border-radius:50%;background:var(--bg-lift);flex:none;
  display:grid;place-items:center;font-size:9px;font-style:normal;color:var(--fg-mute)}
.dw-tabs{display:flex;gap:4px;margin:18px 0 14px;font-size:12.5px;color:var(--fg-mute)}
.dw-tabs span{padding:6px 11px;border-radius:7px}
.dw-tabs span.on{background:var(--bg-lift);color:var(--fg);font-weight:450}
.dw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dw-t{background:var(--bg-lift);border-radius:8px;padding:11px 12px}
.dw-t b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:22px;line-height:1}
.dw-t span{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10.5px;
  white-space:nowrap}
.dw-t span::after{content:"";width:9px;height:9px;flex:none;background-size:9px 9px}
.dw-t.ok span{color:#2A5F41}
.dw-t.mid span{color:#836420}
.dw-t.bad span{color:#8C2F27}
.dw-sum{margin-top:12px;font-size:12px;line-height:1.5;color:var(--fg-dim)}
.dw-act{margin-top:14px;font-size:12px; color:var(--fg-mute)}
.dw-e{display:flex;align-items:baseline;gap:9px;padding:7px 0;font-size:11.5px;
  color:var(--fg-mute);border-bottom:1px solid var(--line-soft)}
.dw-e b{font-weight:500;color:var(--fg-dim);white-space:nowrap}
.dw-e em{font-style:normal;margin-left:auto;white-space:nowrap;font-size:10.5px}

/* ── The grouped table: a book of claims, not a list ─────────────────
   The reference groups rows under a folder header with a count, numbers them
   continuously across groups, and puts a verdict at the end of each row. The
   numbering across groups is the detail that makes it read as one body of
   work rather than a list of unrelated rows. */
.gt-h,.gt-r{display:grid;grid-template-columns:26px 22px 1.35fr 1.5fr .8fr .9fr;
  gap:0 14px;align-items:center;padding:11px 24px}
.gt-h{font-size:12px;color:var(--fg-mute);border-bottom:1px solid var(--line-soft)}
.gt-box{width:13px;height:13px;border:1.4px solid var(--line);border-radius:3px}
.gt-grp{display:grid;grid-template-columns:26px 22px 1fr;gap:0 14px;align-items:center;
  padding:12px 24px;background:var(--bg-lift);font-size:12.5px}
/* the name, its count and the disclosure sit on one line */
.gt-grp > span:last-child{display:flex;align-items:center;gap:8px;white-space:nowrap}
.gt-grp b{font-weight:500}
.gt-grp span{color:var(--fg-mute)}
.gt-grp svg{width:14px;height:14px;stroke:var(--fg-mid);fill:none;stroke-width:1.6}
.gt-r{font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.gt-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--fg-mute)}
.gt-f{display:flex;align-items:center;gap:9px;min-width:0}
.gt-f i{width:15px;height:15px;flex:none;display:grid;place-items:center}
.gt-f i svg{width:13px;height:13px;stroke:#B33A2E;fill:none;stroke-width:1.6}
.gt-f b{font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-r .t{color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-v{display:inline-flex;align-items:center;font-size:11.5px;padding:4px 9px;
  border-radius:5px;white-space:nowrap;background:var(--bg-lift);color:var(--fg-mute)}
.gt-v.bad{background:#F8E9E7;color:#8C2F27}
.gt-v.ok{background:#E7F1E9;color:#2A5F41}
.gt-need{font-size:11.5px;color:var(--fg-mute);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.gt-need.due{color:#836420}

/* ── The lane: a map, drawn as a map ─────────────────────────────────
   This one is not a screen and should never have been dressed as one. The
   nine moments are a claim about scope, so they get a spine and nodes rather
   than tiles and tabs — nobody opens "the lane" in the product. */
.ln{padding:26px 30px 30px}
.ln-phase{font-size:12px; color:var(--fg-mute); margin:22px 0 10px}
.ln-phase:first-child{margin-top:0}
.ln-n{display:grid;grid-template-columns:16px 1fr auto;gap:0 14px;align-items:center;
  padding:9px 0;position:relative}
.ln-n:not(:last-child)::before{content:"";position:absolute;left:7px;top:26px;
  bottom:-4px;width:1px;background:var(--line-soft)}
/* One colour. The dots used to carry a build tier — green for shipped, amber
   for partial — and the lane is presented as the product now, not a status
   board, so the tier went with the labels. */
.ln-d{width:9px;height:9px;border-radius:50%;margin-left:3px;position:relative;z-index:1;
  box-shadow:0 0 0 3px var(--bg-card);background:#2E6B48}
.ln-t b{display:block;font-size:13px;font-weight:450}
.ln-t em{display:block;font-style:normal;font-size:11px;color:var(--fg-mute);
  margin-top:2px}

/* ── The split: the reading on the left, the document on the right ───
   The reference puts what the system did beside the artefact it did it to,
   and lets the document run off the frame. That is the right shape for a
   denial: the interesting part is not the finding, it is that the finding
   points at a specific paragraph of a specific bulletin at a specific
   version, and you can see the paragraph.

   The left pane is sized to stay inside the crop; the document pane is the
   part that bleeds. */
.sp{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);min-height:0}
.sp-l{padding:24px 26px 26px;border-right:1px solid var(--line-soft);min-width:0}
.sp-l > p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--fg-dim)}
.sp-quote{border-left:2px solid var(--line);padding:2px 0 2px 14px;margin:0 0 18px;
  font-size:13px;line-height:1.6;color:var(--fg-mute)}
.sp-files{font-size:12px;color:var(--fg-mute);margin-bottom:10px}
.sp-files b{color:var(--fg-dim);font-weight:450}
.sp-f{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12.5px;
  color:var(--fg-dim)}
.sp-f i{width:17px;height:17px;border-radius:4px;background:#E8EEF6;flex:none;
  display:grid;place-items:center}
.sp-f i svg{width:10px;height:10px;stroke:#3E6FA8;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sp-src{margin-top:16px;padding:11px 13px;border-radius:8px;background:var(--bg-lift)}
.sp-src b{display:block;font-size:12.5px;font-weight:450;color:var(--fg-dim)}
.sp-src span{display:block;margin-top:3px;font-size:11px;color:var(--fg-mute)}

/* The document pane. A toolbar that names the file and the view, then the
   page, with the governing paragraph marked the way a reader would mark it. */
.sp-r{background:var(--bg-lift);min-width:0}
.sp-bar{padding:16px 22px 0}
.sp-name{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;
  white-space:nowrap}
.sp-name i{width:18px;height:18px;border-radius:4px;background:#E8EEF6;flex:none;
  display:grid;place-items:center}
.sp-name i svg{width:11px;height:11px;stroke:#3E6FA8;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sp-tabs{display:flex;align-items:center;gap:4px;margin-top:14px;font-size:12px;
  color:var(--fg-mute);white-space:nowrap}
.sp-tabs span{padding:5px 10px;border-radius:6px}
.sp-tabs span.on{background:var(--bg-card);color:var(--fg);font-weight:450;
  box-shadow:0 1px 2px rgba(22,21,19,.06)}
.sp-tools{display:flex;align-items:center;gap:12px;margin-top:10px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft);
  font-size:11.5px;color:var(--fg-mute);white-space:nowrap}
.sp-tools b{font-weight:450;color:var(--fg-dim)}
.sp-page{margin:18px 22px 0;background:var(--bg-card);border-radius:6px 6px 0 0;
  padding:20px 22px;box-shadow:0 1px 2px rgba(22,21,19,.05);min-width:0}
.sp-page h6{font-size:11.5px;font-weight:600;letter-spacing:.02em;margin-bottom:3px}
.sp-page small{display:block;font-size:11px;color:var(--fg-mute);margin-bottom:14px}
.sp-page p{margin:0 0 10px;font-size:11.5px;line-height:1.6;color:var(--fg-dim)}
.sp-page p.hit{background:#E8EAF9;border-left:2px solid #5B63D3;padding:8px 10px;
  color:var(--fg);font-weight:450}
@media(max-width:1023px){.sp{grid-template-columns:1fr}.sp-l{border-right:0;
  border-bottom:1px solid var(--line-soft)}}

/* ── The case log: weeks on one screen ───────────────────────────────
   Every other panel shows a moment. This one shows duration, which is the
   only way to make the durable-execution claim visible: a case that stays
   open, wakes on its own timer, and treats a payer's silence as an event
   rather than an absence. Dates in mono on the left so the gaps between them
   are legible as gaps. */
.ev{padding:24px 30px 28px}
.ev-row{display:grid;grid-template-columns:64px 14px 1fr;gap:0 12px;
  padding:10px 0;position:relative}
.ev-row:not(:last-child)::before{content:"";position:absolute;left:70px;top:24px;
  bottom:-4px;width:1px;background:var(--line-soft)}
.ev-d{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  color:var(--fg-mute);padding-top:3px;white-space:nowrap}
.ev-m{width:7px;height:7px;border-radius:50%;background:var(--line);margin-top:6px;
  position:relative;z-index:1;box-shadow:0 0 0 3px var(--bg-card)}
.ev-row.sys .ev-m{background:var(--fg-mute)}
.ev-row.you .ev-m{background:#414A9B}
.ev-row.wake .ev-m{background:#836420}
.ev-row p{margin:0;font-size:13px;line-height:1.45;color:var(--fg-dim)}
.ev-row p b{font-weight:500;color:var(--fg)}
.ev-row p em{display:block;font-style:normal;font-size:11px;color:var(--fg-mute);
  margin-top:3px}
.ev-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft); display:flex;align-items:center;gap:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:var(--fg-mute)}
.ev-foot b{margin-left:auto;font-weight:500;color:var(--fg)}

/* ── Command centre ──────────────────────────────────────────────────
   The hero screen is four cards on a 2x2, in the reference's shape: a header
   carrying either a headline figure or a title, a control or two at its
   right, the plot, and a legend across the foot.

   What the four measure was the real decision. The obvious one — hours saved
   — is not here, and not by oversight: RESEARCH §7 puts the real incumbent at
   an offshore biller on $8/hr and rates "hours saved" low and falling as a
   pitch, and we have no measured baseline to compute it from anyway. So every
   card plots something the system genuinely counts: dollars it surfaced,
   cases it assembled, work by moment, money by payer. */
.cc{background:var(--bg);padding:0 0 4px}
.cc-top{display:flex;align-items:center;gap:14px;padding:22px 26px 0;flex-wrap:wrap}
.cc-top h4{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:23px;
  letter-spacing:-.018em;line-height:1}
.cc-act{margin-left:auto;display:flex;align-items:center;gap:8px}
.cc-act span{font-size:11.5px;padding:6px 11px;border-radius:6px;white-space:nowrap;
  border:1px solid var(--line);color:var(--fg-dim);background:var(--bg-card)}
.cc-act span.solid{background:var(--bg-ink);color:var(--fg-inv);border-color:var(--bg-ink)}
.cc-note{margin:16px 26px 0;padding:11px 14px;border-radius:8px;background:var(--bg-card);
  border:1px solid var(--line-soft);font-size:12.5px;color:var(--fg-dim)}
.cc-note b{font-weight:500;color:var(--fg)}

/* The strip: four numbers the charts have no room for, and the four that a
   sceptic actually wants. Rules between rather than cards around — it is one
   row of related facts, and four boxes would read as four unrelated widgets. */
.cc-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:14px 26px 0;border:1px solid var(--line-soft);border-radius:10px;
  background:var(--bg-card);overflow:hidden}
@media(min-width:760px){.cc-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cc-strip > div{padding:13px 16px;min-width:0;
  border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft)}
/* The first cell of each row and of each column owns no rule, which is what
   keeps the grid from drawing a box inside its own border. */
.cc-strip > div:nth-child(-n+2){border-top:0}
.cc-strip > div:nth-child(odd){border-left:0}
@media(min-width:760px){
  .cc-strip > div{border-top:0}
  .cc-strip > div:nth-child(odd){border-left:1px solid var(--line-soft)}
  .cc-strip > div:first-child{border-left:0}
}
.cc-strip b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:21px;letter-spacing:-.012em;line-height:1.1;color:var(--fg)}
.cc-strip span{display:block;margin-top:4px;font-size:11px;line-height:1.4;
  color:var(--fg-mute)}

/* The proof strip and the ring came back with the dashboard from the product's
   own Home, where they were built. Same four numbers, same three segments. */
.cc-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 26px 0;
  border:1px solid var(--line-soft);border-radius:10px;background:var(--bg-card);overflow:hidden}
@media(min-width:760px){.cc-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cc-strip > div{padding:13px 16px;min-width:0;border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft)}
.cc-strip > div:nth-child(-n+2){border-top:0}
.cc-strip > div:nth-child(odd){border-left:0}
@media(min-width:760px){
  .cc-strip > div{border-top:0}
  .cc-strip > div:nth-child(odd){border-left:1px solid var(--line-soft)}
  .cc-strip > div:first-child{border-left:0}
}
.cc-strip b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:21px;letter-spacing:-.012em;line-height:1.1;color:var(--fg)}
.cc-strip span{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:var(--fg-mute)}
.cc-card h2{font-size:13.5px;font-weight:500;letter-spacing:-.008em}
.cc-big{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:30px;
  line-height:1.05;letter-spacing:-.015em}
.cc-up{font-size:11.5px;color:#2A5F41;margin-left:8px}
.cc-pay{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.cc-pay > div{display:grid;grid-template-columns:118px 1fr auto;align-items:center;
  gap:11px;font-size:11.5px;color:var(--fg-dim)}
.cc-pay .track{height:13px;border-radius:3px;background:var(--fg-dim)}
.cc-pay em{font-style:normal;font-size:11.5px;color:var(--fg)}
.cc-plot.tilt{padding-bottom:20px}

.cc-grid{display:grid;gap:14px;padding:14px 26px 22px}
@media(min-width:700px){.cc-grid{grid-template-columns:1fr 1fr}}
/* A column, so the one card whose content is shorter than its neighbour can
   centre that content in the leftover height instead of leaving it pooled at
   the bottom. Everything else fills naturally and is unaffected. */
.cc-card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:10px;
  padding:16px 18px 12px;min-width:0;display:flex;flex-direction:column}
.cc-h{display:flex;align-items:flex-start;gap:12px;min-height:44px}
.cc-h h5{font-size:13.5px;font-weight:500;letter-spacing:-.008em}
.cc-h p{margin-top:4px;font-size:11.5px;color:var(--fg-mute)}
.cc-stat{display:flex;align-items:baseline;gap:8px}
.cc-stat b{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:30px;
  line-height:1;letter-spacing:-.014em}
.cc-stat em{font-style:normal;font-size:11.5px;color:#2A5F41}
.cc-lab{margin-top:6px;font-size:11.5px;color:var(--fg-mute)}
.cc-sel{margin-left:auto;display:flex;gap:6px;flex:none}
.cc-sel span{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  padding:5px 9px;border-radius:6px;border:1px solid var(--line);color:var(--fg-dim);
  white-space:nowrap}
.cc-sel span::after{content:"";width:0;height:0;border:3px solid transparent;
  border-top-color:var(--fg-mute);margin-top:2px}
.cc-plot{margin-top:10px}
.cc-plot svg{width:100%;height:auto;display:block;overflow:visible}
/* Nine moments will not fit side by side at this width, so their labels are
   angled rather than dropped — the whole point of the card is that the lane
   has nine of them. */
.cc-plot.tilt{padding-bottom:16px}
.cc-foot{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line-soft);font-size:11px;color:var(--fg-mute)}
.cc-foot i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.cc-foot i::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg-dim)}
.cc-foot i.alt::before{background:var(--line)}
.cc-foot i.warn::before{background:#A8231C}

/* Plot furniture, shared by the four. */
.cc-plot .gl{stroke:var(--line-soft);stroke-width:1}
.cc-plot .ax{stroke:var(--line);stroke-width:1}
.cc-plot .ln{stroke:var(--fg-dim);stroke-width:1.4;fill:none}
.cc-plot .bar{fill:var(--fg-dim)}
.cc-plot .bar2{fill:url(#hatch)}
.cc-plot .barw{fill:#A8231C}
/* No y-axis under the bars, so the value sits on each one. At five and at nine
   the labels are the scale rather than clutter laid over one — which is also why
   the gridlines came out: two ways of reading the same height, and the rules
   were the half that needed a second glance. */
.cc-plot .val{fill:var(--fg-dim);font-size:8px}
/* The endpoint of a cumulative line wants marking; without it the curve just
   stops at the frame and the last month reads as a crop. */
.cc-plot .pt{fill:var(--fg);stroke:var(--bg-card);stroke-width:2}

/* ── The ring: a total, and the two halves it is made of ──────────────
   A part-to-whole with exactly two parts, which is the one shape a ring reads
   faster than a bar. It sits beside its key rather than above it because the
   card is wide and a circle alone in a wide box looks stranded. The segments
   are parted by a real gap in the dash array rather than by a stroke in the
   surface colour, so the ring stays honest on any background. */
.cc-ring{margin-top:14px;display:flex;align-items:center;gap:22px;flex:1}
.cc-ring svg{width:104px;height:104px;flex:none}
/* Three steps of one ink, darkest first: the ring is an ordered pipeline,
   not four unrelated categories, so a sequential ramp is the honest encoding
   and a categorical palette would be a lie about the data. */
.cc-ring .s1{stroke:var(--fg-dim)}
.cc-ring .s2{stroke:var(--fg-mid)}
.cc-ring .s3{stroke:var(--line)}
.cc-key{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1}
.cc-key > div{display:flex;align-items:center;gap:8px;font-size:11.5px;
  color:var(--fg-mute);min-width:0}
.cc-key i{width:7px;height:7px;border-radius:50%;flex:none}
.cc-key i.k1{background:var(--fg-dim)}
.cc-key i.k2{background:var(--fg-mid)}
.cc-key i.k3{background:var(--line)}
.cc-key span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-key b{margin-left:auto;font-weight:500;font-size:12.5px;color:var(--fg);flex:none}
.cc-plot text{font-family:'Geist',ui-sans-serif,sans-serif;font-size:7px;
  fill:var(--fg-mute)}

/* ── The trace: an amount being computed, with its sources ───────────
   The deterministic panel is deliberately still. Everything else on the page
   that shows work in progress moves; this one does not, because the claim it
   is illustrating is that the number is arithmetic and arithmetic does not
   have a state you wait for. Mono throughout, figures aligned on the right,
   each input naming where it came from. */
.tr{padding:24px 30px 28px}
.tr-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  padding:9px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.tr-row b{font-weight:400;color:var(--fg-dim)}
.tr-row s{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--fg);
  font-weight:500}
.tr-row em{display:block;font-style:normal;font-size:10px; color:var(--fg-mute);margin-top:4px}
.tr-rule{border-top:1px solid var(--line-soft);margin:6px 0}
.tr-row.sum{border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
.tr-row.sum s{font-size:15px}
.tr-row.out s{color:#8C2F27}
.tr-foot{margin-top:20px;display:flex;align-items:center;gap:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:var(--fg-mute)}
.tr-foot b{margin-left:auto;font-weight:500;color:#2A5F41}

/* ── The criteria match: the rule on one side, the chart on the other ──
   The intellectual middle of the product, and the one screen that shows what
   "reads the chart" actually means. A row is a numbered criterion, the line
   that satisfies it, and a verdict — and the verdict that matters is the one
   that is not a verdict: a missing page named as a question. */
.cr{padding:18px 20px 16px}
.cr-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.cr-h b{font-size:13px;font-weight:500}
.cr-h span{font-size:11px;color:var(--fg-mute)}
.cr-r{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;
  align-items:start;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.cr-n{font-size:11px;color:var(--fg-mid);font-variant-numeric:tabular-nums;
  line-height:1.5}
.cr-b{min-width:0}
.cr-b p{margin:0;font-size:12.5px;line-height:1.45;color:var(--fg)}
/* The source line is the whole claim of the product, so it is set in mono —
   it is a quotation from a document, not prose about one. */
.cr-s{display:block;margin-top:5px;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10.5px;line-height:1.5;color:var(--fg-mute)}
.cr-f{margin-top:13px;font-size:11.5px;line-height:1.5;color:var(--fg-mute)}

/* ── The cite check: a letter resolving sentence by sentence ─────────
   Each factual sentence with the source it claims, and the state of that
   claim. The last one resolves to nothing and holds the draft, which is the
   only interesting frame to draw: a panel where everything passes is a panel
   that proves nothing. */
.ct{padding:24px 30px 28px}
.ct-s{display:grid;grid-template-columns:22px 1fr;gap:0 12px;padding:12px 0;
  border-bottom:1px solid var(--line-soft)}
.ct-s:last-of-type{border-bottom:0}
.ct-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  color:var(--fg-mute);padding-top:3px}
.ct-s p{font-size:13.5px;line-height:1.5;color:var(--fg-dim);margin:0}
.ct-src{grid-column:2;display:flex;align-items:center;gap:8px;margin-top:7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:var(--fg-mute)}
.ct-src i{width:6px;height:6px;border-radius:50%;background:#2E6B48;flex:none}
.ct-s.bad .ct-src{color:#8C2F27}
.ct-s.bad .ct-src i{background:#A8231C}
.ct-s.bad p{color:var(--fg)}
.ct-held{margin-top:20px;display:flex;align-items:center;gap:10px;padding:12px 14px; border-radius:8px;background:#F9F0EE; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; color:#8C2F27}
.ct-held b{margin-left:auto;font-weight:500}

/* ── Screen: a page of the product, cropped ──────────────────────────
   The reference does not put a summary card on a field, it puts a screenshot
   there: a real page with its title, its tiles, its tabs and its table, sat
   slightly off-centre so it runs past the right edge and gets clipped. The
   cropping is what makes it read as a window onto something bigger rather
   than as a graphic drawn to fit.

   So `.scr` is wider than the card that holds it and the card clips it. Every
   feature gets its own page rather than the same card relabelled. */
.flip-card{overflow:hidden}
.scr{position:relative;z-index:1;background:var(--bg-card);border-radius:9px;
  width:126%;min-width:0;overflow:hidden;
  box-shadow:0 2px 4px rgba(22,21,19,.14),0 26px 56px -18px rgba(22,21,19,.42)}
@media(max-width:1023px){.scr{width:100%}}

.scr-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:22px 30px 0}
.scr-tile{background:var(--bg-lift);border-radius:10px;padding:12px 16px 13px}
.scr-tile b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:24px;line-height:1;letter-spacing:-.012em}
.scr-tile span{display:block;margin-top:5px;font-size:11.5px;color:var(--fg-mute)}

.scr-tabs{display:flex;align-items:center;gap:6px;padding:26px 30px 0}
/* Direct children only, and not the control group: an unscoped `span` here
   also caught the filter square, the search field and the action button
   nested inside it, and handed each of them a tab pill's padding and a 999px
   radius. */
/* A box, not a lozenge — the same 6px the status chips take, which is what
   the reference uses for its own selected tab. */
.scr-tabs > span:not(.scr-ctl){font-size:12.5px;padding:7px 12px;
  border-radius:6px;color:var(--fg-mute)}
.scr-tabs span.on{background:var(--bg-lift);color:var(--fg);font-weight:500}
/* The right-hand note was mono, uppercase and letter-spaced, which made a
   quiet aside shout. It is ordinary small text now. */
.scr-tabs .r{margin-left:auto;font-size:12px;color:var(--fg-mute);
  padding-right:2px;white-space:nowrap}

/* The control row the reference puts opposite its tabs: a filter square, a
   search field and one action. They are not wired — this is a picture of a
   screen — but leaving them out was what made ours read as a table rather
   than as an application. */
.scr-ctl{display:flex;align-items:center;gap:9px;margin-left:auto}
.scr-ico{width:32px;height:32px;border:1px solid var(--line);border-radius:7px;
  display:grid;place-items:center;flex:none;background:var(--bg-card)}
.scr-ico svg{width:14px;height:14px;stroke:var(--fg-mid);fill:none;stroke-width:1.7;
  stroke-linecap:round}
.scr-find{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:7px;font-size:12.5px;
  color:var(--fg-mute);min-width:150px}
.scr-find svg{width:13px;height:13px;stroke:var(--fg-mute);fill:none;stroke-width:1.8;
  stroke-linecap:round;flex:none}
.scr-act{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-weight:450;
  color:var(--fg);white-space:nowrap}
.scr-act svg{width:13px;height:13px;stroke:var(--fg-mid);fill:none;stroke-width:1.7;
  stroke-linecap:round}

/* A document icon opens each row, an owner closes it. Both are what turn a
   list of strings into a list of work someone is accountable for. */
.scr-ic{width:19px;height:19px;border-radius:4px;background:#E8EEF6;flex:none;
  display:grid;place-items:center}
.scr-ic svg{width:11px;height:11px;stroke:#3E6FA8;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.scr-who{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:12.5px;color:var(--fg-dim)}
.scr-av{width:20px;height:20px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:9.5px;font-weight:500;background:var(--bg-lift);
  color:var(--fg-mute)}


/* Counts, the reference's way: a coloured dot and a number, three in a row,
   so a reader takes in the shape of a finding before reading a word of it. */
.scr-cnt{display:inline-flex;align-items:center;gap:12px;
  font-variant-numeric:tabular-nums;font-size:12.5px}
.scr-cnt i{display:inline-flex;align-items:center;gap:5px;font-style:normal;
  color:var(--fg-dim)}
/* Glyphs, not plain dots: a filled check, a half-filled ring, a filled
   exclamation. The reference uses shape as well as hue here, which is the
   only reason the three counts are legible to a reader who cannot separate
   green from red — and roughly one man in twelve cannot. */
.scr-cnt i::before{content:"";width:11px;height:11px;flex:none;
  background-repeat:no-repeat;background-size:11px 11px}
.scr-cnt i.ok::before{background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'>\
<circle cx='6' cy='6' r='6' fill='%232E6B48'/>\
<path d='M3.4 6.2l1.7 1.7 3.5-3.6' fill='none' stroke='white' stroke-width='1.5' \
stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.scr-cnt i.part::before{background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'>\
<circle cx='6' cy='6' r='5.25' fill='none' stroke='%23B8862B' stroke-width='1.5'/>\
<path d='M6 0.75a5.25 5.25 0 0 1 0 10.5z' fill='%23B8862B'/></svg>")}
.scr-cnt i.no::before{background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'>\
<circle cx='6' cy='6' r='6' fill='%23A8231C'/>\
<path d='M6 2.9v3.6' stroke='white' stroke-width='1.5' stroke-linecap='round'/>\
<circle cx='6' cy='8.9' r='0.85' fill='white'/></svg>")}

/* The hero screen carries two more columns than the section screens do. */
.scr.wide .scr-h,.scr.wide .scr-r{grid-template-columns:24px 1.5fr .95fr 1.15fr .72fr .82fr}

.scr-h,.scr-r{display:grid;grid-template-columns:1.5fr .85fr 1.45fr .8fr;
  gap:16px;align-items:center;padding:9px 30px}
.scr-h{margin-top:20px;font-size:11.5px;letter-spacing:.04em;color:var(--fg-mute);
  background:var(--bg-lift)}
.scr-r{font-size:13.5px;border-bottom:1px solid var(--line-soft);padding:11px 30px}
.scr-r:last-child{border-bottom:0}
.scr-r .n b{display:block;font-weight:500}
.scr-r .n em{display:block;font-style:normal;font-size:11px;color:var(--fg-mute);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A rounded rectangle, not a stadium. The reference's status box has a corner
   arc of roughly a third of its height — at this size 999px reads as a lozenge
   and 6px reads as a control. Tint only, no border. */
.scr-r .s{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  padding:4px 10px;border-radius:6px;white-space:nowrap;line-height:1.2;
  background:var(--bg-lift);color:var(--fg-dim)}
/* The dot is its own colour, brighter and more saturated than the text beside
   it. It had been `currentColor` at 85% — the same hue as the label, dimmed —
   which is why the pill read muddy next to the reference's. Theirs pairs a
   vivid dot with a darker label: the dot is a marker and wants to be seen,
   the label is text and wants to be read, and one colour cannot do both. */
.scr-r .s::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--fg-mute)}
/* The reference's own hues. Ready is periwinkle rather than green, which
   costs us the convention that green means good — flagged and overruled, so
   it is recorded here rather than argued again: a blue "ready" reads as a
   state the system is in, and an amber "in progress" as work still moving.
   Red stays red, because the one place a colour must not be reinterpreted is
   the one that means stop. */
.scr-r .s.good{background:#E8EAF9;color:#414A9B}
.scr-r .s.good::before{background:#5B63D3}
.scr-r .s.wait{background:#F7F0DC;color:#836420}
.scr-r .s.wait::before{background:#C9971F}
.scr-r .s.need{background:#F7EDEB;color:#8C2F27}
.scr-r .s.need::before{background:#C4362C}


.scr-r .f{color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A row the system is still working shimmers, the same band the agent panel
   uses on its running step. It is the same signal in both places on purpose:
   wherever that light travels, something is happening now. Off under
   `prefers-reduced-motion`, where it falls back to plain muted text rather
   than to a frozen gradient. */
.scr-r .f.live{
  /* The band travels between muted and full ink, not between two greys a
     shade apart. It was too narrow a range to register at all in a still
     frame, which is the frame most people see first. */
  background-image:linear-gradient(100deg,
    var(--fg-mute) 0%, var(--fg-mute) 34%, var(--fg) 50%,
    var(--fg-mute) 66%, var(--fg-mute) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:ag-shim 2.4s linear infinite}
/* Lives here because this sweep is now its only user — the agent stepper it
   was written for is gone. */
@keyframes ag-shim{from{background-position:130% 0}to{background-position:-130% 0}}
@media(prefers-reduced-motion:reduce){
  .scr-r .f.live{animation:none;background-image:none;color:var(--fg-mute)}
}
.scr-r .a{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Pinned variant, home page only. Equal heights for the same reason the
   other stack needs them: a shorter panel sliding over a taller one leaves
   the one underneath showing below its edge.

   The entrance is scroll-driven rather than time-driven: `animation-timeline:
   view()` ties the progress of the fade to the panel's own position in the
   viewport, so it arrives at the speed the reader is scrolling instead of on
   a timer that fires whenever it fires. That is the difference between a
   section that feels attached to the scroll and one that feels like it is
   playing at you.

   The range closes at `entry 70%`, well before the panel pins, because an
   animation still running when an element goes sticky is what produces the
   stutter this is meant to remove. The transform is on the children, not on
   the sticky element — transforming a sticky element makes it a containing
   block and the pin starts fighting the animation.

   Chrome and Edge have this; Safari and Firefox do not yet, so it is behind
   `@supports` and simply does not happen there. And it is off entirely under
   `prefers-reduced-motion`. */
.flip-set{display:grid;gap:96px;margin-top:8px}
@media(min-width:1024px){
  .flip-set > .flip{position:sticky;top:var(--nav-h);background:var(--bg);
    min-height:540px;padding:24px 0}
  /* Every frame the same height, not merely every row. A fixed-height row
     holding frames of different heights still lets the panel underneath show
     below the shorter one's bottom edge — that is the bleed-through that was
     visible under the calibration card. */
  .flip-set .dev{height:454px}
  .flip-set > .flip:nth-child(1){z-index:1}
  .flip-set > .flip:nth-child(2){z-index:2}
  .flip-set > .flip:nth-child(3){z-index:3}
  .flip-set > .flip:nth-child(4){z-index:4}
  .flip-set > .flip:nth-child(5){z-index:5}
}
@supports (animation-timeline: view()) {
  @media (min-width:1024px) and (prefers-reduced-motion: no-preference) {
    .flip-set > .flip > *{animation:flip-in linear both;
      animation-timeline:view();animation-range:entry 8% entry 70%}
    @keyframes flip-in{from{opacity:0;transform:translateY(26px)}
                       to{opacity:1;transform:none}}
  }
}

@media(max-width:1023px){.flip-set{gap:56px}}

/* ── By the numbers ──────────────────────────────────────────────────
   One row under the product shot. The reference sets the figure in a light
   serif at display size, the sentence beneath it at reading size, and the
   attribution in mono small caps — the mono is what makes a source read as a
   citation rather than as more copy. Rules above each cell, not around them. */
.stats{display:grid;gap:40px}
@media(min-width:860px){.stats{grid-template-columns:repeat(3,1fr);gap:48px}}
.stat{border-top:1px solid var(--line);padding-top:26px}
.stat b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:300;
  font-size:clamp(46px,5.2vw,64px);line-height:1;letter-spacing:-.02em}
.stat p{margin-top:20px;font-size:16px;line-height:1.4;color:var(--fg-dim)}
/* The note sits with the figures rather than on another page. It was on
   security until 2026-09-11; moving it here puts the attribution beside the
   numbers it attributes, which is where a reader checking one would look. */
.stat-note{margin-top:34px;font-size:13px;line-height:1.55;color:var(--fg-mute);
  max-width:88ch}

.stat span{display:block;margin-top:16px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px; color:var(--fg-mute)}

/* ── What Merid does — three columns, no cards ───────────────────────
   The reference states the heading once, then sets three columns with an
   outline icon, a heading and a paragraph, and nothing around them. No card,
   no border, no fill: the whitespace does the separating, which is what makes
   it read as a statement rather than as a feature grid. */
.does h2{margin-bottom:64px}
.does-grid{display:grid;gap:52px}
@media(min-width:900px){.does-grid{grid-template-columns:repeat(3,1fr);gap:56px}}
.does-ic{display:block;margin-bottom:30px}
.does-ic svg{width:26px;height:26px;stroke:var(--fg);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.does-col h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:400;
  margin-bottom:16px;max-width:22ch}
.does-col p{font-size:16px;line-height:1.5;color:var(--fg-mid)}

/* ── Prose blocks — solutions, pricing, security ────────────────── */
.split{display:grid;gap:40px}
@media(min-width:1024px){.split{grid-template-columns:minmax(0,455px) minmax(0,1fr);gap:64px}}
.split + .split{margin-top:0;border-top:1px solid var(--line);padding-top:48px}
.split h2{letter-spacing:-.022em}
.split .body > * + *{margin-top:16px}
.split .body p{font-size:16px;line-height:1.4;color:var(--fg-mid);max-width:62ch}
.split .body ul{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:62ch}
.split .body li{display:grid;grid-template-columns:19px 1fr;gap:12px;
  font-size:16px;line-height:1.55;color:var(--fg-dim)}
.split .body li svg{width:15px;height:15px;margin-top:5px;stroke:var(--fg-mid);
  stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.split .body li b{font-weight:500;color:var(--fg)}

/* ── Tables ─────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.tbl th{font-weight:500;font-size:13px; color:var(--fg-mute);border-bottom-color:var(--line)}
.tbl td.n{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.n{text-align:right;padding-right:0}

/* ── Price cards ────────────────────────────────────────────────── */
.plans{display:grid;gap:22px;margin-top:48px}
@media(min-width:880px){.plans{grid-template-columns:1fr 1fr}}
.plan{background:var(--bg-card);border:1px solid var(--line);border-radius:22px;
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.plan .who{font-size:18px;font-weight:500;letter-spacing:-.014em}
.plan .amt{font-family:'Newsreader',Georgia,serif;font-weight:300;
  font-size:clamp(40px,4.5vw,56px);line-height:1;letter-spacing:-.02em;margin-top:20px;
  font-variant-numeric:lining-nums}
.plan .amt small{font-family:'Geist',sans-serif;font-size:15px;font-weight:400;
  color:var(--fg-mute);letter-spacing:0}
.plan .sub{margin-top:12px;font-size:15px;color:var(--fg-dim);line-height:1.55}
.plan ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.plan li{display:grid;grid-template-columns:19px 1fr;gap:12px;font-size:15.5px;
  line-height:1.5;color:var(--fg-dim)}
.plan li svg{width:15px;height:15px;margin-top:4px;stroke:var(--fg-mid);stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto;align-self:flex-start;margin-top:30px}

/* ── Questions ──────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--line-soft);padding:20px 0}
details summary{cursor:pointer;list-style:none;font-size:17px;font-weight:450;
  display:flex;justify-content:space-between;gap:24px;align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--fg-mute);font-size:20px;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin-top:12px;max-width:64ch;font-size:15px;line-height:1.62;color:var(--fg-dim)}
details p a{text-decoration:underline;text-underline-offset:3px}

/* ── The closing band ───────────────────────────────────────────── */
/* ── Get started: the offer beside the request ────────────────────────
   Full bleed rather than inside the shell, because a half-and-half that stops
   at a max-width reads as two cards rather than as one decision. The dark half
   is the same inversion the security page uses, so nothing new is introduced;
   it is here to stop the form competing with the copy for attention. */
/* The whole viewport minus the bar, and nothing below it — a landing page with
   somewhere else to go is a landing page with a leak. `100dvh` rather than
   `100vh` so a mobile browser's collapsing toolbar does not crop the button. */
.gs{display:grid;min-height:calc(100dvh - var(--nav-h))}
@media(min-width:960px){.gs{grid-template-columns:1fr 1fr}}
.gs-copy{padding:clamp(40px,5vw,88px) clamp(24px,5vw,72px);
  display:flex;flex-direction:column;justify-content:center;gap:20px}
.gs-copy .lede{max-width:440px;margin:0}
.gs-proof{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:12px;max-width:440px}
.gs-proof li{position:relative;padding-left:22px;font-size:14px;color:var(--fg-dim);
  line-height:1.5}
.gs-proof li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:1px;
  background:var(--fg-mid)}

/* A column, not a row: the privacy line is a sibling of the form and would
   otherwise take its own place beside it rather than under it. */
.gs-panel{background:var(--bg-ink);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(32px,4vw,64px) clamp(20px,4vw,56px)}
.gs-form{background:var(--bg-card);border-radius:12px;width:100%;max-width:520px;
  margin:0 auto;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px}
.gs-row{display:grid;gap:16px}
@media(min-width:520px){.gs-row{grid-template-columns:1fr 1fr}}
/* The label wraps its field, so the whole block is the hit target and there is
   no `for`/`id` pair to keep in sync as fields are added or renamed. */
.gs-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;
  color:var(--fg-dim);min-width:0}
.gs-form .cap{display:block}
.gs-form .cap i{font-style:normal;color:var(--fg-mid)}
.gs-form input,.gs-form select{font:inherit;font-size:14px;color:var(--fg);
  background:var(--bg-card);border:1px solid var(--line);border-radius:6px;
  padding:0 12px;height:42px;width:100%;transition:border-color .14s,box-shadow .14s}
.gs-form select{appearance:none;cursor:pointer;
  /* the chevron as a data URI, so the control needs no extra element and no
     script to stay in the flow */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23757168' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.gs-form input::placeholder{color:var(--fg-mid)}
.gs-form input:focus,.gs-form select:focus{outline:none;border-color:var(--fg);
  box-shadow:0 0 0 3px rgba(22,21,19,.08)}
.gs-form input[name="_honey"]{display:none}
.gs-fine{font-size:12px;line-height:1.5;color:var(--fg-mute);margin:2px 0 0}
.gs-form button{width:100%;margin-top:2px}
.gs-priv{max-width:520px;margin:16px auto 0;text-align:center;font-size:11.5px;
  line-height:1.5;color:rgba(251,250,248,.5)}
.gs-priv a{color:rgba(251,250,248,.8);text-decoration:underline;
  text-underline-offset:3px}

/* ── The hero showcase: one claim, six product screens ────────────────
   Full-bleed screens with the arrows beside them rather than above, because
   the control belongs where the eye already is. Stepped by hand — a reader
   studying a remittance should not have it taken away. */
.hs{padding-bottom:clamp(28px,3.4vw,52px)}
/* The case switcher. Three worked examples, numbered, with the active one
   filled — the reference's arrangement, and the right one here because the
   cases are not variations on a theme: the second and third never produce a
   denial at all. */
.hs-cases{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.hs-cl{font-size:11.5px;color:var(--fg-mute);margin-right:8px}
.hs-t{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-size:12px;padding:8px 14px;border-radius:999px;color:var(--fg-dim);
  background:var(--bg);white-space:nowrap;transition:background .14s,color .14s}
.hs-t i{font-style:normal;font-variant-numeric:tabular-nums;font-size:11px;
  color:var(--fg-mid)}
.hs-t:hover{background:var(--bg-lift)}
.hs-t.on{background:var(--fg);color:var(--bg)}
.hs-t.on i{color:rgba(251,250,248,.5)}
.hs-dg{display:flex;gap:7px}
.hs-dg[hidden]{display:none}

.hs-wrap{position:relative}
/* A fixed height, not a minimum. With min-height the stage grew to whatever
   screen was showing, so advancing moved everything below it and the page
   appeared to jump under the cursor. Every screen now occupies exactly the
   same box and scrolls inside it. */
.hs-stage{display:grid;height:660px}
@media(max-width:939px){.hs-stage{height:auto;min-height:560px}}
.hs-stage:focus{outline:none}
.hs-s{grid-area:1/1;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 2px rgba(16,24,22,.04),
  0 18px 40px -22px rgba(16,24,22,.16)}
.hs-s[hidden]{display:none}

/* The arrows ride on the edge of the screen, half on and half off, which is
   how a control reads as belonging to the thing it moves. */
.hs-a{all:unset;cursor:pointer;position:absolute;top:50%;z-index:3;
  width:40px;height:40px;margin-top:-20px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(16,24,22,.10);transition:background .14s,border-color .14s}
.hs-a svg{width:17px;height:17px;fill:none;stroke:var(--fg-dim);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hs-a:hover{background:var(--fg);border-color:var(--fg)}
.hs-a:hover svg{stroke:var(--bg)}
.hs-a:disabled{cursor:default;opacity:.3}
.hs-a:disabled:hover{background:var(--bg-card);border-color:var(--line)}
.hs-a:disabled:hover svg{stroke:var(--fg-dim)}
.hs-prev{left:-20px}
.hs-next{right:-20px}
@media(max-width:820px){.hs-prev{left:-8px}.hs-next{right:-8px}}
.hs-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.hs-d{all:unset;cursor:pointer;width:6px;height:6px;border-radius:50%;
  background:var(--line);transition:background .14s,transform .14s}
.hs-d:hover{background:var(--fg-mid)}
.hs-d.on{background:var(--fg);transform:scale(1.3)}

/* Screen furniture: a title bar, a body, and an optional footnote strip. */
.sc-hd{display:flex;align-items:center;gap:10px;padding:13px 20px;
  border-bottom:1px solid var(--line-soft);flex:none}
.sc-hd b{font-size:13px;font-weight:500}
.sc-ic{width:22px;height:22px;border-radius:6px;background:var(--bg-lift);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--fg-mid);flex:none}
.sc-r{margin-left:auto;font-size:11.5px;color:var(--fg-mute)}
.sc-pg{flex:1;overflow:auto;padding:26px 30px;background:var(--bg-card)}
.sc-pg.sc-flat{padding:0;background:var(--bg-card)}
.sc-ft{display:flex;gap:22px;flex-wrap:wrap;padding:12px 20px;flex:none;
  border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--fg-mute)}
.sc-ft b{font-weight:500;color:var(--fg-dim)}

/* Icons, at one size, stroked not filled — the reference's whole UI is line
   work and a solid glyph among them reads as a different system. */
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Status, one component, everywhere ────────────────────────────────
   A dot, a label, a soft ground. The dot is the state and the tint only
   supports it, which is why the tint is barely there: a status that shouts is a
   status nobody reads twice. Rounded rectangle rather than a capsule, because a
   capsule reads as a tag and this is a state.

   Five states and no more. Anything that does not fit one of them is not a
   status and wants a different component. */
.rp-t,.tb-v,.cr-v,.ln-s{display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;line-height:1;padding:5px 10px;border-radius:7px;
  white-space:nowrap;background:#F2F1ED;color:var(--fg-dim);font-family:inherit;
  letter-spacing:normal}
.rp-t::before,.tb-v::before,.cr-v::before,.ln-s::before{content:"";width:6px;
  height:6px;border-radius:50%;flex:none;background:var(--fg-mid)}
.rp-t.met,.tb-v,.cr-v.met,.ln-s.is-done{background:#EDF3EE;color:#3A6B4D}
.rp-t.met::before,.tb-v::before,.cr-v.met::before,.ln-s.is-done::before{background:#4A7B5C}
.cr-v.ask,.ln-s.is-part{background:#F5EEDD;color:#836427}
.cr-v.ask::before,.ln-s.is-part::before{background:#A98430}
.ln-s.is-next{background:#EDF1FA;color:#45539E}
.ln-s.is-next::before{background:#5B68B4}
.rp-t.need,.tb-v.need,.cr-v.no,.ln-s.is-none{background:#FAEFED;color:#9A403A}
.rp-t.need::before,.tb-v.need::before,.cr-v.no::before,.ln-s.is-none::before{background:#B4564E}

/* The header's action bar. Ghost buttons with one filled primary, which is the
   arrangement every one of these products uses and for the same reason: the
   export is the thing you came to do. */
.sc-acts{display:flex;align-items:center;gap:6px;margin-left:14px;flex:none}
.sc-b{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  padding:6px 11px;border-radius:7px;color:var(--fg-dim);white-space:nowrap;
  border:1px solid transparent;transition:background .14s}
.sc-b:hover{background:var(--bg-lift)}
.sc-b.sc-p{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sc-b.sc-p:hover{background:#000}
@media(max-width:860px){.sc-acts .sc-b:not(.sc-p){display:none}}

/* The suggested-action card: bordered, tinted, with the affordance on the right
   so the eye lands on the sentence before it lands on the control. */
.rp-card{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;
  border:1px solid var(--line-soft);border-radius:9px;background:var(--bg)}
.rp-card b{display:block;font-size:12px;font-weight:500}
.rp-card p{margin:5px 0 0;font-size:11.5px;line-height:1.55;color:var(--fg-mute)}
.rp-rad{flex:none;color:var(--fg);margin-top:1px}
.rp-rad .ic{width:16px;height:16px}

/* The table's toolbar: icon and label, thin dividers, the row the reference
   puts above every grid. */
.tb-tools{display:flex;align-items:center;gap:2px;padding:9px 14px;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.tb-tools span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--fg-dim);padding:6px 11px;border-radius:7px;white-space:nowrap;
  transition:background .14s}
.tb-tools span:hover{background:var(--bg-lift)}
.tb-tools i{width:1px;height:15px;background:var(--line-soft);margin:0 4px;flex:none}
/* Column headers carry their own controls, greyed until the row is hovered. */
.th{display:inline-flex;align-items:center;gap:7px}
.th .ic{width:12px;height:12px;color:var(--line);transition:color .14s}
.tb thead tr:hover .th .ic{color:var(--fg-mid)}
.tb-x{width:34px}
.cbx{display:block;width:13px;height:13px;border:1px solid var(--line);border-radius:3.5px}
/* Group rows: the folder, the label, the count, and a chevron — a heading that
   happens to be a row. */
.tb-grp td{background:var(--bg);padding:9px 16px;border-bottom:0}
.tb-grp td:first-child{border-radius:8px 0 0 8px}
.tb-grp td:last-child{border-radius:0 8px 8px 0}
.grp{display:flex;align-items:center;gap:9px}
.tb-grp b{font-size:11.5px;font-weight:500;color:var(--fg-dim)}
.tb-grp span{font-size:11px;color:var(--fg-mute)}
.tb-grp .ic{color:var(--fg-mid)}
.tb-grp .ic:last-child{margin-left:auto}
.tb-grp:hover td{background:var(--bg-lift)}
/* The icon and the label share a line inside the cell, not as the cell:
   `display:flex` on a <td> stops it behaving as a cell and its border
   stops drawing with the row's. */
.tb-s{white-space:nowrap}
/* The sheet sets svg{display:block} globally, so the icon needs putting back
   in the line or it takes a row of its own. */
.tb-s .ic{display:inline-block;color:var(--fg-mid);vertical-align:-3px;margin-right:7px}

/* The remittance, as a payer prints it: fixed pitch, rules drawn in the text
   itself, and the three tokens that decide the case in full ink. */
.eob{margin:0;font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:11px;line-height:1.62;color:var(--fg-dim);white-space:pre;
  background:var(--bg-card);border:1px solid var(--line-soft);border-radius:6px;
  padding:22px 24px;overflow-x:auto}
.eob b{font-weight:500;color:var(--fg)}

/* A letter, on letterhead. */
.ltr{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:6px;
  padding:30px 34px;max-width:720px;margin:0 auto}
.ltr-top{display:flex;align-items:flex-start;gap:14px;padding-bottom:18px;
  border-bottom:1px solid var(--line-soft)}
.ltr-top b{font-family:'Newsreader',Georgia,serif;font-size:21px;font-weight:500}
.ltr-top span{margin-left:auto;text-align:right;font-size:10.5px;line-height:1.55;
  color:var(--fg-mute)}
.ltr-meta{display:flex;flex-wrap:wrap;gap:3px 18px;padding:12px 0 18px;
  font-size:10.5px;color:var(--fg-mute)}
.ltr p{margin:0 0 13px;font-size:12.5px;line-height:1.7;color:var(--fg-dim)}
.ltr-q{border-left:2px solid var(--line);padding-left:15px}
.ltr-sig{margin-top:22px!important;color:var(--fg-mute)!important}
.ltr-sig span{font-size:11px}

/* Document beside review — the reference's shape, and the one that shows what
   "reads the chart" means rather than asserting it. */
.sc-split{flex:1;display:grid;min-height:0}
@media(min-width:940px){.sc-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.sc-l{padding:22px 24px;overflow:auto;background:var(--bg-card);min-width:0}
.sc-rp{padding:22px 24px;overflow:auto;border-left:1px solid var(--line-soft);min-width:0}
.doc{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:6px}
.doc-h{display:flex;align-items:baseline;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--line-soft)}
.doc-h b{font-size:12.5px;font-weight:500}
.doc-h span{margin-left:auto;font-size:10.5px;color:var(--fg-mute)}
.doc-m{display:flex;flex-wrap:wrap;gap:3px 16px;padding:9px 18px;
  background:var(--bg);font-size:11px;color:var(--fg-mute)}
.doc-b{padding:15px 18px 18px}
.doc-b h6{font-size:11.5px;color:var(--fg-mute);font-weight:450;margin:15px 0 6px}
.doc-b h6:first-child{margin-top:0}
.doc-b p{margin:0;font-size:12px;line-height:1.65;color:var(--fg-dim)}
.doc-b p + p{margin-top:10px}
/* A highlight should mark a passage, not shout over it. Two steps softer
   than it was, and warm rather than beige. */
.doc mark{background:#F6F2E4;color:var(--fg);box-shadow:0 0 0 2px #F6F2E4;
  border-radius:2px}
.doc-b.red del{color:#A8231C;text-decoration:line-through;text-decoration-thickness:1px}
.doc-b.red ins{color:#2A5A8C;text-decoration:none}
.doc-b.red sup{font-size:8.5px;color:var(--fg-mid);padding:0 1px}
/* A form's own identifier, and the note under a packet table. */
.doc-sub{display:block;margin-top:3px;font-size:11px;letter-spacing:.02em;
  color:var(--fg-mute);font-variant-numeric:tabular-nums}
.doc-note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--fg-mid)}
.doc-note b{color:var(--fg);font-weight:500}
.doc-t{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:11.5px}
.doc-t th{text-align:left;font-weight:450;color:var(--fg-mute);font-size:11px;
  padding:0 10px 7px 0;border-bottom:1px solid var(--line-soft)}
.doc-t td{padding:6px 10px 6px 0;border-bottom:1px solid var(--line-soft);
  color:var(--fg-dim);font-variant-numeric:tabular-nums}

/* The review panel. */
.rp-h{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.rp-m{width:20px;height:20px;border-radius:5px;background:var(--fg);color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.rp-mk{width:11px;height:auto;display:block}
/* Figure rows: label left, amount right, tabular so a column of money reads as
   a column of money. */
.rp-row{display:flex;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:11.5px;color:var(--fg-mute)}
.rp-row em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--fg);flex:none}
.rp-row.tot em{font-family:'Newsreader',Georgia,serif;font-size:16px;font-weight:500}
/* A document pane holding a page rather than a card keeps its own padding. */
.sc-doc .sc-l{padding:20px 22px}
.rp-s{font-size:12px;color:var(--fg-mute);margin:18px 0 8px}
.rp-p{margin:0;font-size:12.5px;line-height:1.65;color:var(--fg-dim)}
.rp-b{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.rp-q{font-size:11.5px;line-height:1.6;color:var(--fg-dim);padding:11px 13px;
  border-radius:8px;background:var(--bg);border:1px solid var(--line-soft);
  margin-bottom:8px}
.rp-q em{display:block;margin-top:5px;font-style:normal;font-size:10px;color:var(--fg-mute)}
.rp-c{display:flex;gap:7px;flex-wrap:wrap}
.rp-c span{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;
  padding:6px 11px;border-radius:7px;border:1px solid var(--line);color:var(--fg-dim)}
.rp-c .ic{color:var(--fg-mid)}
.rp-n{margin-top:16px;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:11px;line-height:1.6;color:var(--fg-mute)}
.rp-n b{font-weight:500;color:var(--fg-dim)}

/* The cite check rows. */
.ck{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;padding:10px 0;
  border-bottom:1px solid var(--line-soft)}
.ck b{font-size:10px;font-weight:500;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center}
.ck.ok b{background:#EDF3EE;color:#3A6B4D}
.ck.no b{background:#FAEFED;color:#9A403A}
.ck p{margin:0;font-size:11.5px;line-height:1.55;color:var(--fg-dim)}
/* The row is a two-column grid and `em` is its third child, so without this it
   lands back in the 20px number column and wraps one word per line. */
.ck em{grid-column:2;display:block;margin-top:3px;font-style:normal;font-size:10px;
  color:var(--fg-mute)}
.ck.no em{color:#9A403A}

/* The criteria table. */
.tb-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 20px;
  background:var(--bg);border-bottom:1px solid var(--line-soft);
  font-size:11.5px;color:var(--fg-mute)}
.tb-bar b{font-weight:500;color:var(--fg-dim)}
.tb-g{margin-left:auto;color:#3A6B4D}
/* `separate` rather than `collapse`, because the header needs its own rounded
   corners and a collapsed table will not give a cell one. The zero spacing
   keeps it behaving like a collapsed table everywhere else. */
.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
/* The header is a bar rather than a rule: a rounded rectangle, inset from the
   table's edge so it floats inside the card instead of cutting across it, and
   shallow — the reference's sits about a third lower than a body row and that
   restraint is most of why it reads as a label rather than a row. No bottom
   border; the bar is the separation, and a rule under a tint is two answers to
   one question. */
.tb th{text-align:left;font-weight:450;font-size:12px;color:var(--fg-mute);
  padding:9px 16px;background:var(--bg);white-space:nowrap;
  letter-spacing:-.002em}
.tb thead th:first-child{border-radius:8px 0 0 8px}
.tb thead th:last-child{border-radius:0 8px 8px 0}
/* Three cells of padding on the outside of the table keep the bar off the
   card's edge; the body rows inherit the same measure so nothing steps. */
.tb-wrap{padding:4px 14px 0}
.tb td{padding:14px 16px;border-bottom:1px solid var(--line-soft);
  color:var(--fg-dim);vertical-align:top}
.tb tbody tr:last-child td{border-bottom:0}
.tb tr:hover td{background:var(--bg-lift)}
.tb-n{width:26px;color:var(--fg-mid);font-variant-numeric:tabular-nums}
.tb-c{color:var(--fg);font-weight:450;min-width:180px}
.tb-e{font-size:11.5px;line-height:1.5}
.tb-s{font-size:11px;color:var(--fg-mute);white-space:nowrap}
.tb-f{padding:14px 20px 18px;font-size:11.5px;line-height:1.6;color:var(--fg-mute)}
.tb-f b{font-weight:500;color:var(--fg-dim)}

/* What Merid did: the findings list from the reference, used for the work
   rather than for the case. An icon, a claim, and the sentence that supports
   it — no hours figure, because there isn't a measured one and the axis is
   wrong anyway (RESEARCH §12). */
.fn{max-width:860px;margin:0 auto}
.fn-r{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.fn-i{width:26px;height:26px;border-radius:7px;background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;color:var(--fg-mid)}
.fn-i .ic{width:14px;height:14px}
.fn-r b{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.006em}
.fn-r p{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--fg-mute)}
/* The tally: a figure and what it counts, in one bordered strip. The reference
   puts its claim here; ours puts the count, because a count is checkable. */
.fn-f{display:flex;flex-wrap:wrap;gap:0;margin-top:20px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--bg-card)}
.fn-f span{flex:1 1 150px;padding:13px 16px;font-size:11.5px;color:var(--fg-mute);
  border-left:1px solid var(--line-soft);min-width:0}
.fn-f span:first-child{border-left:0}
.fn-f b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:21px;line-height:1.1;color:var(--fg);margin-bottom:3px}
.fn-n{margin-top:16px;font-size:11.5px;line-height:1.65;color:var(--fg-mute);
  max-width:640px}

/* Ready to file. */
.sc-ship .sc-l{background:var(--bg-card)}
.sh-h{font-size:12px;color:var(--fg-mute);margin-bottom:12px}
.sh-i{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.sh-i b{display:block;font-size:12.5px;font-weight:450;color:var(--fg)}
.sh-i span{display:block;margin-top:2px;font-size:11px;color:var(--fg-mute)}
.sh-n{margin-top:14px;font-size:11px;line-height:1.6;color:var(--fg-mute)}
.dlr{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:11px;
  align-items:center;padding:11px 0;font-size:11.5px;color:var(--fg-dim)}
.dlt{display:block;height:7px;border-radius:4px;background:var(--bg-lift);overflow:hidden}
.dlt > i{display:block;height:100%;background:var(--fg-mid);border-radius:4px}
.dlt > i.now{background:#A8231C}
.dlr em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--fg);flex:none}
.sh-ap{margin-top:18px;padding:16px 17px;border-radius:10px;background:var(--bg);
  border:1px solid var(--line-soft)}
.sh-ap b{display:block;font-size:12.5px;font-weight:500}
.sh-ap > span{display:block;margin-top:5px;font-size:11.5px;line-height:1.55;
  color:var(--fg-mute)}
.sh-btn{display:flex;gap:8px;margin-top:13px}
.sh-btn span{font-size:11.5px;padding:8px 14px;border-radius:7px;
  border:1px solid var(--line);color:var(--fg-dim);background:var(--bg-card)}
.sh-btn span.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ── The closing footer ──────────────────────────────────────────────
   The reference's shape, read off its markup: one row with the statement
   left and the button right, a single rule under it, then the brand column
   and the link columns pushed to the right edge. The copyright sits at the
   bottom of the brand column rather than in a band of its own under a second
   rule — `justify-content:space-between` over the column's full height puts
   it level with the last link opposite. */
.dfoot{background:var(--bg-ink);color:var(--fg-inv);padding:80px 0}
.df-cta{display:flex;align-items:center;justify-content:space-between;gap:48px;
  flex-wrap:wrap;padding-bottom:80px;border-bottom:1px solid rgba(251,250,248,.13)}
/* One line at desktop. `text-wrap:balance` was the culprit rather than the
   width — it splits a heading into two even lines whenever it can, which is
   what it is for, and is wrong for a single closing statement. */
.df-cta h2{font-family:'Newsreader',Georgia,serif;
  font-size:clamp(26px,2.6vw,34px);line-height:1.16;letter-spacing:-.018em;
  font-weight:500;margin:0}

/* The button's geometry is the reference's exactly: 48px tall, 20px of
   horizontal padding, a 4px radius and 16px at weight 500 with the line box
   collapsed, which is what makes a 48px box hold 16px type without the label
   drifting off centre. */
.btn-foot{height:48px;padding:0 20px;border-radius:4px;
  font-size:16px;font-weight:500;line-height:1;flex:none;
  background:var(--fg-inv);color:var(--bg-ink);border:1px solid var(--fg-inv)}
.btn-foot:hover{background:#fff;border-color:#fff;color:var(--bg-ink)}

.df-cols{display:flex;gap:48px;padding-top:80px}
/* The wordmark rides above the column headings rather than level with them,
   so the brand reads as the label on the block instead of a fourth column. */
.df-brand{display:flex;flex-direction:column;justify-content:space-between;
  gap:40px;color:var(--fg-inv);margin-top:-24px}
.df-word{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:26px;
  letter-spacing:-.012em;line-height:1}
.df-copy{font-size:14px;line-height:1.35;max-width:224px;
  color:rgba(251,250,248,.5)}
.df-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 56px;
  margin-left:auto}
/* Column headings sit at the reference's 14px in the muted grey, with the
   links beneath them in full-strength ink and 20px apart — the same `gap-sm`
   the reference uses between a heading and its list. */
.df-col{display:flex;flex-direction:column;gap:20px}
.df-col b{font-size:14px;font-weight:500;color:rgba(251,250,248,.5)}
.df-col a{display:block;font-size:16px;line-height:1;color:var(--fg-inv);
  transition:color .14s}
.df-col a:hover{color:rgba(251,250,248,.62)}

@media(max-width:900px){
  .df-cols{flex-direction:column;gap:44px;padding-top:56px}
  .df-brand{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:20px;margin-top:0}
  .df-nav{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0}
}

.df-fine{padding:28px 0 56px;font-size:13px;color:rgba(251,250,248,.48);line-height:1.75}
.df-fine p{max-width:74ch;margin-top:13px}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;scroll-behavior:auto}}

/* ── The lane as an index ─────────────────────────────────────────────
   Harvey's product index: a list on the left where one row is open, the
   screen for that row on the right, bleeding off the plate. Two things
   carry it and both are cheap — the rule above the list is ink-weight
   while the rules between rows are hairlines, and a closed row is grey
   while the open one is not. Everything else is the existing screen
   component, unchanged, which is the point: nine moments, one engine,
   so one frame repeated nine times says it before the copy does. */
.pw{display:grid;gap:48px;align-items:start}
@media(min-width:1024px){
  .pw{grid-template-columns:minmax(0,455px) minmax(0,1fr);gap:80px;align-items:start}
}

/* Ink above the list, hairlines inside it. */
/* The index is the tail of "What Merid Does", not a third answer beside it:
   the three sections above are the ones a biller recognises, this is all of
   them. So it takes .h2 rather than .h1 — at 40px it read as a peer of the
   group header, which is the one thing it is not. */
.pw-list{margin-top:26px}
/* Group labels inside the index. Nineteen rows in one undifferentiated run
   reads as a pile; three named bands read as a scope. The label is a row of
   the list, not a heading above it, so it carries the same hairline. */
.pw-item{border-bottom:1px solid var(--line);padding:22px 0}
/* The toggle is the title alone — "Learn more" is a real link and cannot
   live inside a button. */
.pw-t{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.pw-h{display:block;font-size:22px;line-height:1.2;letter-spacing:-.03em;
  font-weight:500;color:var(--fg-mid);transition:color .18s ease}
.pw-t:hover .pw-h{color:var(--fg-dim)}
.pw-item.is-open .pw-h{color:var(--fg)}
@media(min-width:640px){.pw-h{font-size:25px}}


/* 0fr → 1fr is the one accordion that animates to content height without
   a measured pixel value, so a translated or reflowed row cannot desync. */
.pw-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.pw-item.is-open .pw-b{grid-template-rows:1fr}
.pw-b > div{overflow:hidden;min-height:0}
.pw-b p{font-size:16px;line-height:1.45;color:var(--fg-mid);padding-top:14px;max-width:46ch}
.pw-b p + p{padding-top:12px}
.pw-more{display:inline-block;margin-top:16px;font-size:15px;color:var(--fg);
  border-bottom:1px solid var(--fg); padding-bottom:1px}
.pw-more:hover{color:var(--fg-dim);border-bottom-color:var(--fg-dim)}

/* The plate. Panels stack in one cell so the column never resizes as rows
   change — a jumping right-hand side is what makes these read as cheap. */
/* One cell, four panels, but only the visible one sets the height. The
   hidden panels go absolute so they stop contributing to the row: with all
   four in flow the stage reserved the tallest panel's height whichever one was
   showing, and left ~400px of nothing under Win Probability. The outgoing
   panel goes absolute the moment it loses .is-on, so it overlays the incoming
   one at the top while it fades rather than pushing it down. */
.pw-stage{display:grid;position:relative}
.pw-stage > .pw-p{grid-area:1/1}
.pw-stage > .pw-p:not(.is-on){position:absolute;top:0;left:0;right:0}
.pw-p{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.pw-p.is-on{opacity:1;visibility:visible;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){
  .pw-b,.pw-p{transition:none}
}

/* The plate runs off the right edge, which is the whole gesture of the
   reference: the screen is a thing continuing past the page, not a picture
   sitting on it. `.shell` gutters are 64px, and past 1512 the shell is
   centred — so the breakout is the gutter plus whatever centring added.
   `overflow-x:clip` and not `hidden`: hidden on one axis forces a scroll
   container on the other, and this section has nothing to scroll. */
.pw-sec{overflow-x:clip}

/* ── The explanation under the screen ──────────────────────────────
   A narrow label column and one measure of prose, so the two paragraphs read
   as a statement rather than as a section of the page. */
.ex{display:grid;gap:18px}
/* The label column is empty since the "See a real case" link was removed
   (2026-09-19); the prose is pinned to column 2 so the measure and the indent
   are unchanged rather than collapsing into the 260px track. */
/* Prose left, figures right. The label column the link used to occupy is
   gone; the second column now holds the two charts, and the prose starts at
   the page's own left edge rather than indented past an empty track. */
@media(min-width:960px){.ex{grid-template-columns:minmax(0,560px) minmax(0,520px);
  gap:0 56px;align-items:start;justify-content:start}}
.ex-k{font-size:15px;color:var(--fg);white-space:nowrap;align-self:start;
  border-bottom:1px solid var(--fg);padding-bottom:1px;justify-self:start}
.ex-k:hover{color:var(--fg-dim);border-bottom-color:var(--fg-dim)}
.ex-b{display:grid;gap:26px;max-width:70ch}
.ex-b p{font-size:19px;line-height:1.52;color:var(--fg-mid);margin:0}
.ex-b b{color:var(--fg);font-weight:500}
.ex-b em{font-style:italic}
/* The attribution sits with the figure it attributes rather than in the
   footer, so the claim and its source are read together. */
.ex-src{font-size:13.5px;line-height:1.5;color:var(--fg-mute);margin-top:-14px}
@media(max-width:640px){.ex-b p{font-size:17px}}

/* The full list, on request. Three columns because nineteen names down one
   are a scroll; three across are a scope you can take in. The band labels
   span the row so the grouping survives the columns. */
.fx-t{margin-top:30px;background:none;border:0;padding:0;font:inherit;font-size:15px;
  color:var(--fg);border-bottom:1px solid var(--fg);padding-bottom:1px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.fx-t:hover{color:var(--fg-dim);border-bottom-color:var(--fg-dim)}
#full-list[hidden]{display:none}
.fx{display:grid;gap:26px 44px;padding-top:6px}
@media(min-width:720px){.fx{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.fx{grid-template-columns:repeat(3,1fr)}}
.fx-g{grid-column:1/-1;font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--fg);margin:22px 0 -8px}
.fx-g:first-child{margin-top:16px}
.fx-i b{display:block;font-size:16px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.fx-i span{display:block;font-size:14px;line-height:1.5;color:var(--fg-mid)}
@media(min-width:1024px){
  .pw-stage{margin-right:calc(-1 * (64px + max(0px, (100vw - 1512px) / 2)))}
  /* The index heading answers to the whole lane below it, not to one
     section, so it sits a step above the page's section rule. */
  .pw-copy .h1{font-size:48px}
}

/* ── The hero comparison ──────────────────────────────────────────────
   Two columns carrying the same nine steps, so a reader compares along a
   row instead of between two unlike pictures. The right column recesses
   those nine into a group rather than deleting them: the work does not
   stop happening, it stops being the biller's, and a strike-through would
   say the first thing. 47 + 5 = 52, so all three numbers are on the page
   and the arithmetic is the reader's, not a claim they have to take.

   No bars. At 52 minutes across nine steps the smallest segment is 2,
   which cannot hold its own label, and a chart whose labels sit outside
   it is a list with extra furniture. */
/* ══ The hero demo ═════════════════════════════════════════════════
   One appeal, drafted two ways, in a window. Everything animated here is
   clip-path, opacity or transform — never a layout property — because the
   compositor owns those and the main thread does not have to reflow a pane
   forty times. Every line of text is in the DOM from the first paint, so a
   screen reader reads the finished document and nothing mutates a text node.
   `contain` keeps a repaint inside its own pane. */
.win{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-card);
  box-shadow:0 1px 2px rgba(15,14,13,.05),0 24px 60px -16px rgba(15,14,13,.16)}
.win-bar{display:flex;align-items:center;gap:15px;height:44px;padding:0 17px;
  border-bottom:1px solid var(--line-soft);background:var(--bg-lift)}
.win-dots{display:flex;gap:8px;flex:none}
/* The real macOS window colours, at the size the system draws them. */
.win-dots i{width:12px;height:12px;border-radius:50%}
.win-dots i:nth-child(1){background:#FF5F57}
.win-dots i:nth-child(2){background:#FEBC2E}
.win-dots i:nth-child(3){background:#28C840}
.win-t{font-size:12.5px;color:var(--fg-mute);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dm{display:grid;gap:1px;background:var(--line-soft)}
@media(min-width:880px){.dm{grid-template-columns:1fr 1fr}}
/* Two windows, one clock. The panes keep their classes and the driver keeps
   its one root (#demo wraps both), so the step list and the clocks are
   unchanged; only the frame around each side is its own window now. */
/* Ten beats is a long time to sit through twice by accident, so the demo says
   how to see it again rather than looping on its own. */
.dm-foot{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:2px}
.dm-replay{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:6px 2px;font:inherit;font-size:12.5px;letter-spacing:-.01em;
  color:var(--fg-mid);cursor:pointer;transition:color .2s var(--ez)}
.dm-replay:hover{color:var(--fg)}
.dm-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dm2{display:grid;gap:16px}
@media(min-width:880px){.dm2{grid-template-columns:1fr 1fr}}
.dm-pane{background:var(--bg-card);padding:22px 24px 26px;contain:layout style paint;
  min-width:0}
.dm-hand{background:var(--bg)}
.dm-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line-soft)}
.dm-hd span{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.dm-clk{font-size:26px;font-weight:400;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.dm-clk em{font-style:normal;font-size:12px;color:var(--fg-mute);margin-left:4px;
  letter-spacing:0}

/* ── Left: the sheet ─────────────────────────────────────────────── */
.pg{min-height:296px;font-size:13.5px;line-height:1.75;color:var(--fg-dim)}
.pg-lh{font-size:11.5px;letter-spacing:.02em;color:var(--fg-mute);margin-bottom:14px}
/* The left pane types and the right pane generates, and the timing function is
   where that difference lives: `steps()` advances the reveal in discrete jumps
   of roughly two characters, which reads as a person at a keyboard, against the
   smooth eased sweep on `.ap-l`. It is also slower on purpose — the point of
   this pane is that the work takes a long time. */
.pg-l{margin:0 0 9px;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.05s steps(34,end)}
.pg-l.on{clip-path:inset(0 0 0 0)}
/* Struck through by hand, once the version turns out to be the wrong one. */
/* The rule stops where the sentence does, not where the column does. */
.pg-cut{position:relative;width:fit-content;max-width:100%}
.pg-cut::after{content:"";position:absolute;left:0;top:calc(50% - 1px);height:1.5px;
  width:0;background:var(--fg-dim);opacity:.65;
  transition:width .42s var(--ez) .3s}
.pg-cut.cut::after{width:100%}
/* A note in the margin of a draft, not a different medium: same face, same
   ink, set back from the text it interrupts. */
.pg-note{margin:2px 0 12px;padding-left:15px;font-size:12.5px;line-height:1.6;
  color:var(--steel-dim);border-left:1px solid var(--steel-line);opacity:0;
  transform:translateY(3px);
  transition:opacity .34s var(--ez),transform .34s var(--ez)}
.pg-note.on{opacity:1;transform:none}
/* The cursor sits where the typing stopped, which is mid-sentence. It is an
   inline element inside the paragraph rather than an absolute one beside it, so
   the same clip-path that types the words uncovers the caret last — it appears
   at the exact moment the sentence runs out, and then blinks there. */
.pg-cur i{display:inline-block;width:1.5px;height:1.02em;margin-left:2px;
  vertical-align:-2px;background:var(--fg);animation:cur 1.06s steps(1) infinite}
@keyframes cur{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.pg-todo{margin-top:20px;padding-top:15px;border-top:1px solid var(--line-soft);
  opacity:0;transition:opacity .38s var(--ez)}
.pg-todo.on{opacity:1}
.pg-todo span{display:block;font-size:11px;letter-spacing:.02em;color:var(--fg-mute);
  margin-bottom:10px}
/* Each open item is the document it is waiting on, because "find the policy at
   the right version" is not a task, it is four undated PDFs on a payer's site.
   Naming the artefact and its state is what makes the stopped letter legible:
   the cursor above is blinking *because* of these rows. */
/* The same checklist shape as the right pane's, on purpose: both panes end on
   work that got done. The difference is the clock above it — fifty-two minutes
   of a person's day against five. */
.pg-d{display:grid;grid-template-columns:16px minmax(0,1fr);gap:1px 9px;
  align-items:start;font-style:normal;margin-bottom:11px;position:relative;
  opacity:0;transform:translateY(2px);
  transition:opacity .3s var(--ez),transform .3s var(--ez)}
.pg-d.on{opacity:1;transform:none}
.pg-d:last-child{margin-bottom:0}
/* A tick, drawn, rather than a tick inside a filled pill. Five green lozenges
   down a column read as app chrome; five thin marks read as a list someone kept.
   A hairline runs between them so the column is a sequence and not a stack. */
.pg-d::after{content:"";position:absolute;left:1px;top:4px;width:9px;height:9px;
  border-radius:50%;background:var(--steel);box-sizing:border-box}
.pg-d:not(:last-child)::before{content:"";position:absolute;left:5px;top:15px;
  bottom:-11px;width:1px;background:var(--steel-line)}
/* The tick is drawn absolutely now, so nothing occupies the first track and
   the text would fall into a 16px column. Both lines are pinned to the second. */
.pg-d b{grid-column:2;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--fg)}
.pg-d em{grid-column:2;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--fg-mute)}

/* ── Right: the product ──────────────────────────────────────────── */
/* The pane runs in two acts. While the agents work, the list is the pane and
   the letter is not there; when drafting starts, the list drops below and the
   letter takes the top. One flex order swap does it — no node moves, so nothing
   reflows twice and a screen reader keeps its document order. */
.ap{min-height:296px;display:flex;flex-direction:column}
/* The work list fades out, the flex order swaps behind the fade, and it fades
   back underneath the letter. Swapping in plain sight was a jump. */
.ap-work{order:1;transition:opacity .26s var(--ez)}
.ap-work.moving{opacity:0}
.ap-sheet{order:2}
.ap-status{order:3}
.ap-sum{order:4}
.ap-done{order:5}
.ap.drafting .ap-sheet{order:1}
.ap.drafting .ap-status{order:2}
.ap.drafting .ap-work{order:3}
/* What Merid did, in the order it did it — and the first four rows answer the
   left pane's four open items line for line: the policy it could not date, the
   contract page, the labs, the clock. That symmetry is the argument; the rows
   are not a feature list, they are the same four problems, solved.

   Each row shimmers while it is working and resolves to a check. The shimmer is
   a gradient swept across the label through background-clip, which is the
   familiar generating treatment and costs one animated background rather than
   a repaint. */
.ap-w{display:grid;gap:11px}
/* The receipt sits under the letter, so its heading is what separates them —
   the rule above it does the work the bottom border used to. */
/* The seam, as a pill rather than a line of text: a status that looks like a
   status is read as one, and a sentence in the flow of a letter is not. Steel,
   because it is Merid working — the same accent the pipelines and the
   enclosure marks carry. The icon pulses; the label does not shimmer, because
   the pill already says what the sweep was trying to say. */
.ap-status{margin:16px 0 0;opacity:0;transition:opacity .3s var(--ez)}
.ap-status.on{opacity:1}
.ap.done .ap-status{display:none}
.ap-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;
  border-radius:999px;background:var(--steel-soft);color:var(--steel);
  font-size:12px;font-weight:500;letter-spacing:-.01em;line-height:1}
.ap-pill svg{width:14px;height:14px;fill:currentColor;stroke:none;flex:none;
  animation:appulse 1.6s ease-in-out infinite}
@keyframes appulse{0%,100%{opacity:.55;transform:scale(.93)}50%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ap-pill svg{animation:none;opacity:1}}
/* Enclosures, labelled, at the foot of the letter — the convention every
   appeal-letter guide gives: label all supporting documents as enclosures at
   the end. The lettered marks in the body point into this list, which is what
   makes them mean anything to the reviewer who receives the packet. */
.ap-ix{display:flex;flex-wrap:wrap;gap:3px 14px;margin:13px 0 0;padding-top:11px;
  border-top:1px solid var(--line-soft);font-size:10.5px;line-height:1.6;
  color:var(--fg-mute);opacity:0;transition:opacity .38s var(--ez)}
.ap-ix.on{opacity:1}
.ap-ixh{flex-basis:100%;font-size:10px;letter-spacing:.03em;color:var(--fg-mute);
  margin-bottom:2px}
.ap-ix b{font-weight:500;color:var(--steel);margin-right:5px}
.ap-wh{margin:18px 0 12px;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:11px;letter-spacing:.02em;color:var(--fg-mute);opacity:0;
  transition:opacity .38s var(--ez)}
.ap-wh.on{opacity:1}
/* Every row is on screen from the first frame, greyed and waiting, so a reader
   sees the whole plan before it runs and then watches it complete — the shape
   an agent's progress list takes. Pending shows what the step will do; only a
   finished step shows what it found, because the detail is the result. */
/* `position:relative` is load-bearing: the rail between the dots is an absolute
   pseudo-element on the row, so without it the rail resolved against the pane
   and drew one long line down the whole right side instead of five short
   connectors. The line was the timeline, escaped. */
.ap-wr{display:grid;grid-template-columns:16px minmax(0,1fr);gap:1px 9px;
  align-items:start;position:relative;transition:opacity .3s var(--ez)}
.ap-wr i{grid-row:1/3;width:9px;height:9px;margin-top:5px;margin-left:1px;
  border-radius:50%;background:var(--bg-card);border:1px solid var(--line);
  box-sizing:border-box;position:relative;z-index:1}
.ap-wr:not(:last-child)::before{content:"";position:absolute;left:5px;top:16px;
  bottom:-11px;width:1px;background:var(--steel-line)}
.ap-wr em{display:none}
.ap-wr.on i{background:#E4EFE7;border:0}
.ap-wr.on b{color:var(--fg)}
.ap-wr.on em{display:block}
/* The tick belongs to a finished step only. It used to render on every row and
   be hidden just while spinning, so a step that had not run yet showed a faint
   check — the one state the list must never claim. */
.ap-wr.on i{border-color:var(--steel);background:var(--steel)}
.ap-wr b{font-size:12.5px;font-weight:500;line-height:1.5;color:var(--fg-mute)}
.ap-wr em{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--fg-mute)}
/* Working: no tick yet, a pulsing ring, and the label under the sweep. */
.ap-wr.working i{background:var(--bg-card);border:1.5px solid var(--steel-line);
  border-top-color:var(--steel);animation:apspin .8s linear infinite}
.ap-wr.working em{display:none}
@keyframes apspin{to{transform:rotate(360deg)}}
.ap-wr.working b{background:linear-gradient(90deg,var(--line) 18%,var(--fg) 42%,
  var(--fg) 58%,var(--line) 82%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:apsheen 1.9s linear infinite}
/* The detail line is the result, so a working row shows a sweeping placeholder
   instead — the shape of an answer arriving, with no claim in it. */
.ap-wr.working::after{content:"";grid-column:2;height:8px;width:70%;margin-top:5px;
  border-radius:3px;background:linear-gradient(90deg,var(--bg-lift) 18%,var(--line) 42%,
  var(--line) 58%,var(--bg-lift) 82%);background-size:260% 100%;
  animation:apsheen 1.9s linear infinite}
@keyframes apsheen{0%{background-position:220% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
  .ap-wr.working i{animation:none}
  .ap-wr.working b{animation:none;background:none;color:var(--fg)}
}

/* The draft, as a sheet rather than four loose lines: it is a document being
   written, and the frame is what says so. */
/* Set exactly like the left pane's letter — no card, no border. The two sides
   are the same document, and a frame around one of them said otherwise. */
.ap-sheet{padding:0}
/* The letterhead is part of the letter, and the letter does not exist during
   act one — it was showing under the work list before a word was drafted. */
.ap:not(.drafting) .ap-sheet{display:none}
.ap-lh{font-size:11.5px;letter-spacing:.02em;color:var(--fg-mute);margin-bottom:14px}
.ap-sh{font-size:10px;letter-spacing:.03em;color:var(--fg-mute);
  padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid var(--line-soft)}
.ap-ltr{display:grid;gap:10px}
.ap-l{margin:0;font-size:13px;line-height:1.6;color:var(--fg-dim);position:relative;
  clip-path:inset(0 100% 0 0);transition:clip-path .38s var(--ez)}
.ap-l.on{clip-path:inset(0 0 0 0)}
/* The left pane types and the right pane generates, and the difference has to
   be visible or the demo is two of the same thing. Typing is a hard block
   cursor on an empty line; generating is a soft caret riding the tail of a
   sentence that is still arriving, which leaves the moment the next one does. */
.ap-l.writing::after{content:"";display:inline-block;width:2px;height:.95em;
  margin-left:3px;vertical-align:-1px;border-radius:1px;background:var(--fg-mid);
  animation:apcur .9s ease-in-out infinite}
@keyframes apcur{0%,100%{opacity:.25}50%{opacity:1}}
.ap-x{display:inline-block;margin-left:7px;font-size:9.5px;letter-spacing:.02em;
  color:var(--fg-mute);border:1px solid var(--line);border-radius:3px;padding:1px 5px;
  vertical-align:1px;white-space:nowrap;transition:color .3s,border-color .3s,background .3s}
.ap-l.cited .ap-x{color:var(--steel);border-color:var(--steel-line);background:var(--steel-soft)}
.ap-done{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft);
  opacity:0;transition:opacity .38s var(--ez)}
.ap-done.on{opacity:1}
.ap-sum{margin:14px 0 0;font-size:11.5px;color:var(--fg-mute);opacity:0;
  transition:opacity .38s var(--ez)}
.ap-sum.on{opacity:1}
/* The approval boundary is the product, so the demo ends on it rather than on
   a sentence about it. Same ink and the same 4px corner as the hero's button —
   one primary action on the page, drawn one way. */
.ap-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;
  padding:0 15px;border-radius:4px;background:var(--fg);color:var(--fg-inv);
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}


@media(prefers-reduced-motion:reduce){
  .pg-l,.pg-note,.pg-cur,.pg-todo,.ap-wr,.ap-l,.ap-done,
  .pg-cut::after,.ap-x{transition:none}
  .pg-cur i{animation:none}
}
@media(max-width:879px){.dm-pane{padding:20px 20px 24px}.pg,.ap{min-height:0}}


/* At 430px the shell keeps 20px gutters, the column another 24, and the
   recessed group another 16 plus its border — enough that the minute value
   was landing 4px past the edge, where `overflow-x:clip` hid it rather than
   scrolling to it. Give the small screen its space back. */
}

/* ── The packet ───────────────────────────────────────────────────────
   The product is a finished packet, so the page is a packet: a rail of
   what is in it, a pane showing one document, and under each document
   the sentence that says what we took from it. The rail is grouped as
   arrived / found / produced rather than listed flat, because that
   grouping is the pipeline and it does the explaining for free. */
/* The packet is the first thing on the page now — the hero above it came
   off — so this section owns the top space the hero used to hold. */
.pk-sec{padding-top:64px;padding-bottom:64px}
@media(min-width:768px){.pk-sec{padding-top:80px;padding-bottom:88px}}
.pk-lede{max-width:640px}
.pk-lede p{font-size:16px;line-height:1.45;color:var(--fg-mid);margin-top:14px}

/* Seven stages, stated once, above the thing they produce. */
/* The pipeline strip. Eight cards on one track; a pulse runs the track
   left to right on a 9.6s loop and each card lights for the beat it is
   passed, staggered by --i. The border is a gradient drawn on a pseudo
   element under the card so it can cross-fade to steel without a repaint
   of the box; at rest it is a hairline that catches light at the top. */
.pk-pipe{list-style:none;position:relative;display:grid;gap:12px;margin:36px 0 28px;
  grid-template-columns:repeat(2,minmax(0,1fr));--pk-t:9.6s}
@media(min-width:640px){.pk-pipe{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1100px){.pk-pipe{grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}}
.pk-pipe::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--line);z-index:0}
.pk-pipe::after{content:"";position:absolute;top:calc(50% - 1px);height:3px;width:18%;left:-18%;
  border-radius:3px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--steel) 55%,var(--steel-dim) 80%,transparent);
  animation:pk-run var(--pk-t) linear infinite}
@keyframes pk-run{to{left:100%}}
@media(max-width:1099px){.pk-pipe::before,.pk-pipe::after{display:none}}
.pk-pipe li{position:relative;z-index:1;background:var(--bg-card);border-radius:12px;
  padding:15px 15px 17px;display:grid;gap:4px;align-content:start;isolation:isolate}
.pk-pipe li::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(180deg,rgba(15,14,13,.16),rgba(15,14,13,.07) 45%,rgba(15,14,13,.11));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.pk-pipe li::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(180deg,var(--steel),var(--steel-dim));opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pk-lit var(--pk-t) linear infinite;animation-delay:calc(var(--i) * var(--pk-t) / 8)}
.pk-pipe li{animation:pk-lift var(--pk-t) linear infinite;animation-delay:calc(var(--i) * var(--pk-t) / 8)}
@keyframes pk-lit{0%,3%{opacity:0}7%{opacity:1}13%{opacity:1}22%,100%{opacity:0}}
@keyframes pk-lift{0%,3%{box-shadow:0 1px 2px rgba(15,14,13,.03)}
  8%{box-shadow:0 0 0 4px var(--steel-soft),0 6px 18px -8px rgba(76,104,133,.45)}
  22%,100%{box-shadow:0 1px 2px rgba(15,14,13,.03)}}
.pk-pipe i{font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--fg-mute);
  font-variant-numeric:tabular-nums;transition:color .3s}
.pk-pipe b{font-size:14px;font-weight:500;letter-spacing:-.01em}
.pk-pipe span{font-size:12.5px;line-height:1.35;color:var(--fg-mid)}
.pk-pipe .pk-you{background:var(--steel-soft)}
.pk-pipe .pk-you i{color:var(--steel)}
.pk-pipe .pk-you::before{background:linear-gradient(180deg,var(--steel-line),var(--steel-line))}
@media(prefers-reduced-motion:reduce){
  .pk-pipe::after,.pk-pipe li,.pk-pipe li::after{animation:none}
  .pk-pipe::after{display:none}}

.pk-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:0 2px 12px;font-size:13.5px;color:var(--fg-mid)}
.pk-case{color:var(--fg);font-weight:500}
.pk-facts b{font-weight:500;color:var(--fg-dim)}

.pk{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
  display:grid;overflow:hidden}
@media(min-width:900px){.pk{grid-template-columns:minmax(0,238px) minmax(0,1fr)}}

.pk-rail{padding:14px 10px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px;background:var(--bg)}
@media(min-width:900px){
  .pk{height:min(680px, calc(100vh - 190px))}
  .pk-rail{border-bottom:0;border-right:1px solid var(--line);overflow-y:auto}
}
.pk-grp{display:flex;align-items:baseline;justify-content:space-between;
  padding:16px 10px 7px;font-size:13px;font-weight:500;letter-spacing:-.008em;
  color:var(--fg)}
.pk-grp:first-child{padding-top:6px}
.pk-gn{font-variant-numeric:tabular-nums}
.pk-i{display:grid;gap:1px;width:100%;text-align:left;background:none;border:0;
  padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit;color:inherit;
  -webkit-tap-highlight-color:transparent}
.pk-i:hover{background:var(--line-soft)}
.pk-i.is-on{background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--line)}
.pk-n{font-size:13.5px;line-height:1.3;color:var(--fg-dim)}
.pk-i.is-on .pk-n{color:var(--fg);font-weight:500}
.pk-k{font-size:12px;letter-spacing:-.006em;color:var(--fg-mute)}

/* A fixed frame the document scrolls inside, which is what a document
   viewer is. The first pass stacked every pane in one grid cell so the
   card could not jump — but that makes the card as tall as the LONGEST
   document, and the short ones then sit in a large empty field. A fixed
   height with its own scrollbar fixes both: no jump, and no dead space
   under a two-paragraph manifest. Panes are display-toggled rather than
   faded so the scroll height follows the document actually on screen. */
.pk-pane{padding:18px;overflow-y:auto}
@media(min-width:900px){.pk-pane{padding:26px 26px 28px}}
.pk-d{display:none}
.pk-d.is-on{display:block;animation:pk-in .22s ease both}
@keyframes pk-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.pk-d.is-on{animation:none}}

/* Under the frame: where you are, and how to move without going back to
   the rail. It also gives the card a foot instead of an edge. */
.pk-foot{display:flex;align-items:center;gap:14px;margin-top:12px;
  padding:0 2px;font-size:13px;color:var(--fg-mid)}
.pk-pos{font-variant-numeric:tabular-nums}
.pk-pos b{font-weight:500;color:var(--fg-dim)}
.pk-steps{margin-left:auto;display:flex;gap:8px}
.pk-b{display:inline-flex;align-items:center;gap:6px;background:none;font:inherit;
  color:var(--fg-dim);border:1px solid var(--line);border-radius:6px;
  padding:6px 11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk-b:hover:not(:disabled){border-color:var(--fg-mid);color:var(--fg)}
.pk-b:disabled{color:var(--fg-mute);border-color:var(--line-soft);cursor:default}
.pk-b svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* The remittance is a fixed-width report and has to stay one. */
.doc-pre{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;
  line-height:1.55;color:var(--fg-dim);white-space:pre;overflow-x:auto;
  margin:0;padding-bottom:4px}
.doc-pre b{color:var(--fg);font-weight:500}
.doc-b q{quotes:'\201C' '\201D'}
.doc-b sup{font-size:9px;color:var(--fg-mid);padding-left:2px}

/* What we took from it. Set apart from the document, because it is ours
   and the document above it is not. */
.pk-r{margin-top:14px;padding:16px 18px;background:var(--bg);
  border:1px solid var(--line-soft);border-radius:6px}
.pk-rl{display:block;font-size:13px;font-weight:500;letter-spacing:-.008em;
  color:var(--fg);margin-bottom:8px}
.pk-r p{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-dim)}
.pk-r b{font-weight:500;color:var(--fg)}

.pk-note{margin-top:16px;font-size:13px;line-height:1.45;color:var(--fg-mute);max-width:78ch}

/* The case, before the pipeline that works it. Three lines: what was billed,
   what the record says, what the payer said back. */
/* A definition list, because that is what these are: a label and the fact it
   labels. No bullets — three items do not need marking as a list, and the
   colon already says a value follows. */
.pk-ctx{display:flex;flex-direction:column;gap:11px;margin-top:22px;max-width:72ch}
.pk-ctx dt{display:inline;font-weight:500;color:var(--fg)}
.pk-ctx dd{display:inline;margin:0}
.pk-ctx > div{font-size:15.5px;line-height:1.5;color:var(--fg-mid)}

/* ── Collapsible detail on the feature sections ───────────────────────
   Each section opens with its paragraph and holds its evidence behind one
   link. The same 0fr→1fr grid the lane index uses, for the same reason:
   it animates to content height without a measured pixel value, so a
   reflowed row cannot desync. The toggle is styled as the "Learn more"
   already on the page rather than as a control, because it is the same
   promise — there is more here if you want it. */
.xp-t{display:inline-block;margin-top:4px;background:none;border:0;padding:0;
  font:inherit;cursor:pointer;color:var(--fg);-webkit-tap-highlight-color:transparent}
.xp-t span{font-size:15px;border-bottom:1px solid var(--fg);padding-bottom:1px}
.xp-t:hover span{color:var(--fg-dim);border-bottom-color:var(--fg-dim)}
.xp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.xp-t[aria-expanded="true"] + .xp{grid-template-rows:1fr}
.xp > div{overflow:hidden;min-height:0}
.xp ul{padding-top:18px}

/* The integrations list sits in the section itself, not inside a .flip-copy
   .body, so it inherited none of the checklist styling the other expanders
   get and was rendering as default discs beside its own tick marks. Same
   idiom, wider gap: nine items read as a list to scan rather than prose that
   happens to be broken up. */
.ig-list{list-style:none;display:flex;flex-direction:column;gap:20px;
  max-width:74ch;padding-top:4px}
.ig-list li{display:grid;grid-template-columns:19px minmax(0,1fr);gap:13px;
  font-size:15.5px;line-height:1.6;color:var(--fg-dim)}
.ig-list li svg{width:15px;height:15px;margin-top:5px;stroke:var(--fg-mid);
  stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ig-list li b{font-weight:500;color:var(--fg)}
@media(prefers-reduced-motion:reduce){.xp{transition:none}}

/* A 0fr->1fr row accordion cannot be nested inside another one. The outer
   row's height is resolved while the inner is still collapsed, so the inner
   `1fr` has no free space to grow into and computes to zero — the button
   flips to "Show less" and nothing appears. Inside the feature index the
   expander is therefore a plain show/hide, which needs no free space. */
.pw-b .xp{display:block;grid-template-rows:none;transition:none}
.pw-b .xp > div{display:none}
.pw-b .xp-t[aria-expanded="true"] + .xp > div{display:block}

/* The question that goes out before the service. It is the one artefact prior
   authorisation produces that no other moment does — an instruction to a
   physician, with time left to act on it — so it gets its own block rather
   than another row in the criteria list. */
/* The question that goes out is a quotation, so it is set as one rather than
   parked in a tinted rounded box. A rule above it instead of a border around
   it, the label in the small letterspaced caps the rest of the screens use for
   metadata, the sentence itself in the serif the card's own heading is set in,
   and the opening quote hung into the margin so the first letter still lines
   up with everything above it. */
.ask{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.ask h5{margin-bottom:11px;font-size:12.5px;letter-spacing:-.006em;
  color:var(--fg);font-weight:500}
.ask p{margin:0;font-family:'Newsreader',Georgia,serif;font-size:15px;line-height:1.5;
  letter-spacing:-.005em;color:var(--fg-dim);text-indent:-.36em}
.ask-f{display:block;margin-top:13px;font-size:10.5px;letter-spacing:.02em;
  color:var(--fg-mute)}
.ask-f b{font-weight:500;color:var(--fg-dim)}
.ask-f b{font-weight:500;color:var(--fg-dim)}

/* The systems, named. A logo wall sells reassurance that nothing has to
   change; ours says the same thing in words, and in words it is true of every
   clearinghouse rather than the eight that fit on a slide. Grouped by the
   layer each one sits in, because "which EHR" and "which clearinghouse" are
   different questions with different answers. */
.ig{display:grid;gap:1px;margin-top:26px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media(min-width:720px){.ig{grid-template-columns:1fr 1fr}}
.ig-g{background:var(--bg-card);padding:16px 18px 18px}
.ig-g p{margin:0;font-size:14px;line-height:1.5;color:var(--fg-dim)}
/* The line the logo wall is really for: nothing has to change. It goes under
   the grid rather than above it, because it reads as a conclusion there and
   as a defence above. */
.ig-note{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--fg-dim);max-width:70ch}

/* ── The hero's Merid column, running ─────────────────────────────────
   The nine steps complete one at a time when the hero comes into view, so
   a first-time reader watches the work happen rather than reading a claim
   that it does. States match the lane-index screens on purpose: a filled
   mark and a struck line for done, a turning ring for the one in flight,
   a dashed ring for what has not started.

   The number column is replaced by the mark rather than sitting beside it,
   because two indicators for one row is one too many. Its width is the
   step index width, so nothing reflows when a mark appears. */
}

/* ── Three guarantees, in a row ───────────────────────────────────────
   They were three stacked sections — two thousand pixels of vertical for
   three claims a reader takes in at a glance. Side by side with scroll
   snap they are one screen, and the ones a reader does not care about
   cost a swipe rather than a scroll.

   Snap on the container and `scroll-margin` on nothing: the cards are
   the snap targets and the gutter is padding, so the first card lines up
   with the page's left edge instead of one gutter short of it. */
.sw{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%, 420px);
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;margin-bottom:2px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sw::-webkit-scrollbar{height:6px}
.sw::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.sw::-webkit-scrollbar-track{background:transparent}
@media(min-width:1100px){.sw{grid-auto-columns:minmax(0,1fr);overflow-x:visible}}

.sw-c{scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--line);
  border-radius:10px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px}
.sw-c h3{font-size:20px;line-height:1.18;letter-spacing:-.025em;font-weight:500}
.sw-c .flip-copy{max-width:none;gap:12px}
.sw-c p{font-size:14.5px;line-height:1.5;color:var(--fg-mid)}
/* the screen inside a card is a detail, not the subject */
.sw-c .dev,.sw-c .flip-card{margin-top:2px}
.sw-c .scr{width:100%;box-shadow:0 1px 2px rgba(22,21,19,.10),0 10px 24px -12px rgba(22,21,19,.28)}
.sw-c .ag{padding:16px 18px 18px}
.sw-c .ag h5{margin-bottom:12px}

.sw-hint{margin-top:12px;font-size:13px;color:var(--fg-mute)}
@media(min-width:1100px){.sw-hint{display:none}}
/* A screen inside a guarantee card is evidence, not the subject, so it is
   capped and faded rather than shown whole. The card is then a fixed,
   scannable height and three of them fit a screen. */
.sw-c .scr{max-height:250px;overflow:hidden;position:relative}
.sw-c .dev,.sw-c .flip-card{position:relative}
.sw-c .dev::after,.sw-c .flip-card::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg-card))}
.sw-c{max-height:none}
@media(min-width:1100px){.sw{align-items:start}}

/* ── One door for the mechanism ───────────────────────────────────────
   The three moments a biller recognises stay on the page. Everything that
   explains how the work gets done sits behind one control, because a reader
   who wants it wants all of it, and one who does not should reach the FAQ in
   a scroll rather than seven. */

/* Two groups behind the door, because the sections answer two different
   questions and a flat run of six invites a reader to treat them as a list of
   features rather than a sequence. */

/* ── The integration flow ─────────────────────────────────────────────
   Sources, a bracket, a labelled stage, the engine, and back out. Cards and
   connectors rather than a list, because a reader parses a flow left to right
   and parses a list top to bottom, and this is a flow.

   The bracket is one absolutely-positioned element with a left border and two
   pseudo-element arms, so three cards join one line without three more nodes
   in the markup. */
.fl{display:grid;gap:26px;margin-top:34px;justify-items:center;align-items:center}
@media(min-width:960px){
  .fl{grid-template-columns:auto 1fr auto 1fr auto;gap:0;max-width:1080px;
    margin-left:auto;margin-right:auto}
}
.fl-stack{display:grid;gap:18px;position:relative;width:min(100%,232px)}
.fl-b{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:14.5px;font-weight:500;line-height:1.25;text-align:center;
  box-shadow:0 1px 2px rgba(22,21,19,.05)}

/* the bracket: a vertical spine with an arm at each end */
@media(min-width:960px){
  .fl-br{position:absolute;top:26px;bottom:26px;right:-30px;width:30px;
    border-right:1px solid var(--line)}
  .fl-br::before,.fl-br::after{content:"";position:absolute;left:0;width:30px;height:1px;
    background:var(--line)}
  .fl-br::before{top:0}
  .fl-br::after{bottom:0}
  .fl-right .fl-br{right:auto;left:-30px;border-right:0;border-left:1px solid var(--line)}
}
@media(max-width:959.98px){.fl-br{display:none}}

/* The tag sits on a rail that spans its whole cell, so the bracket on one side
   and the hub on the other are joined by one continuous line rather than by two
   stubs that nearly meet. The tag's own background is what breaks the line. */
.fl-seg{display:grid;place-items:center;width:100%;position:relative}
@media(min-width:960px){
  .fl-seg::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
    background:var(--line)}
}
.fl-tag{position:relative;font-size:12.5px;letter-spacing:-.008em;
  color:var(--fg-mute);background:var(--bg);border:1px solid var(--line);border-radius:7px;
  padding:9px 16px;white-space:nowrap}
.fl-hub{width:74px;height:74px;border-radius:16px;background:var(--bg-card);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--fg);
  box-shadow:0 2px 10px rgba(22,21,19,.10)}
.fl-hub svg{width:30px;height:24px}
.pw-sub{font-size:16px;line-height:1.45;color:var(--fg-mid);margin-top:16px;max-width:52ch}
/* Integrations leads with the heading and the claim, then gives the diagram the
   whole width. It was a two-column section with the diagram squeezed into the
   copy side, which is the one place a diagram cannot work. */
.ig-head{display:grid;gap:20px;margin-bottom:8px}
@media(min-width:900px){.ig-head{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0 64px;align-items:start}}
.ig-copy p{font-size:16px;line-height:1.45;color:var(--fg-mid)}
.ig-copy p + p{margin-top:14px}
/* The mechanism grid borrows the security register's shape — same cells, same
   rhythm — but its second line is a sentence rather than a status, so it drops
   the status dot and takes body colour. */
.cg-work .cg-i span{display:block;gap:0;font-size:13.5px;line-height:1.5;
  color:var(--fg-mid);letter-spacing:0;text-transform:none}
.cg-work .cg-i span::before{display:none}
.cg-work .cg-i b{font-size:16px;font-weight:500}
.cg-work{margin-top:34px}

/* ── Every insurer reason ──────────────────────────────────────────
   Centred statement over a three-plane stage: what arrived (left), the file
   it arrived on (behind), and what Merid made of it (front, overlapping).
   The overlap is the point — the card is reading the panel it sits on.

   Static, and deliberately so. The hero already runs an animated explanation;
   a second timeline on the same page competes with it for the same attention
   and neither wins. Rows here are rendered in their resolved state, which is
   why they do not reuse .ap-wr — that component's dot, label and detail are
   all keyed off .on and .working, and a permanently-on variant of an
   animation component is a trap for whoever edits the animation next. */
.rz-head{max-width:760px;margin:0 auto;text-align:center}
.rz-head p{font-size:19px;line-height:1.52;color:var(--fg-mid);margin:18px 0 0}
.rz-head .ex-k{display:inline;white-space:normal;font-size:inherit;
  color:var(--fg);border-bottom-width:1px}





/* Same visual language as the hero's receipt — a 9px pip, a connector down to
   the next row, label over detail — so the two read as one system. */

/* Above 900 the three planes overlap the way they are meant to be read: the
   ask at top-left, the file behind and below it, the card crossing both. The
   card is given a column of its own so the overlap is a negative margin on one
   element rather than absolute positioning that would not reflow. */

/* ── Three cases, under the stage ──────────────────────────────────
   The reference tiles a tinted panel over a caption whose first clause is the
   claim and whose rest is the mechanism. Same structure, our palette: the
   tints are the steel accent and the ground at low saturation rather than the
   reference's yellow/blue/green, because one accent spent on the work is the
   rule the rest of this page follows.

   The fragment inside each tile is real screen vocabulary — a code, a remark,
   two claim rows, a struck-through wrong answer — at a size that reads as an
   illustration rather than as a screenshot competing with the stage above. */
.rz-cards{display:grid;gap:32px 26px;margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rz-c p{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--fg-mid)}
.rz-c p b{color:var(--fg);font-weight:500}

.rz-cv{aspect-ratio:16/10;border-radius:14px;padding:26px;display:grid;
  place-items:center;overflow:hidden}
.rz-v1{background:linear-gradient(145deg,#EEF1F5 0%,#E3E9F1 100%)}
.rz-v2{background:linear-gradient(145deg,#F2F1EE 0%,#E8E6E1 100%)}
.rz-v3{background:linear-gradient(145deg,#EAF0EC 0%,#DFE9E2 100%)}

.rz-mini{width:100%;max-width:250px;background:var(--bg-card);border-radius:10px;
  padding:13px 14px;box-shadow:0 1px 2px rgba(15,14,13,.05),0 8px 20px rgba(15,14,13,.07)}
.rz-mh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.rz-mh b{font-size:13px;font-weight:500;color:var(--fg)}
.rz-mh span{font-size:11.5px;color:var(--fg-mute)}
.rz-ml,.rz-mr,.rz-mx{display:flex;align-items:center;gap:8px;padding:7px 0;
  font-size:11.5px;line-height:1.4}
.rz-ml em,.rz-mr em,.rz-mx em{font-style:normal;color:var(--fg-mute)}
.rz-ml em{min-width:44px;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.rz-ml span{color:var(--fg-mute)}
.rz-mr span{flex:1;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.rz-mr em{margin-left:auto}
/* A pip rather than a tick: the row is stating what the history shows, not
   grading it, and a green check would read as "we approve of this claim". */
.rz-mr i{width:7px;height:7px;border-radius:50%;flex:none}
.rz-mr i.ok{background:var(--steel)}
.rz-mr i.no{background:var(--line);border:1px solid var(--steel-line)}
.rz-mx s{color:var(--fg-mute);text-decoration-color:var(--steel-dim)}
.rz-mx em{margin-left:auto}
.rz-mq{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.4;color:var(--fg);font-weight:500}

/* ── Root Cause: one denial, coming apart ──────────────────────────
   The other three panels behind What Merid Does are ranked lists, and a third
   list here read as the same screenshot with different column headings. This
   feature's claim is not "here are your denials sorted" — it is that a code is
   a category and a remark is the specific, and that the two decide different
   documents. So the screen shows one denial separating into those two parts
   and the strip at the foot holds the code still while the remark moves. */
.rc{padding:18px 20px 22px;display:grid;gap:0}
.rc-hd{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;
  border-bottom:1px solid var(--line-soft)}
.rc-hd b{font-size:13.5px;font-weight:500;color:var(--fg)}
.rc-hd span{font-size:12.5px;color:var(--fg-mute)}
.rc-tag{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:500;
  color:var(--steel);background:var(--steel-soft);border-radius:5px;padding:4px 9px}

.rc-lbl{margin:16px 0 9px;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-mute)}

/* The raw segments, monospaced-by-tabular rather than by family: the site has
   no mono face and introducing one for four rows is not worth a webfont. */
.rc-wire{display:grid;gap:5px}
.rc-wire div{display:flex;gap:14px;font-size:12px;line-height:1.5}
.rc-wire b{min-width:34px;font-weight:500;color:var(--fg-mute)}
.rc-wire span{color:var(--fg-dim);font-variant-numeric:tabular-nums}

.rc-split{margin-top:16px;border:1px solid var(--line);border-radius:9px;
  overflow:hidden}
.rc-sr{display:flex;align-items:baseline;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--line-soft)}
.rc-sr em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--fg);
  min-width:52px}
.rc-sr span{flex:1;font-size:12px;color:var(--fg-dim)}
.rc-sr i{font-style:normal;font-size:11px;color:var(--fg-mute)}
/* The remark is the row that decides it, so it is the row that carries the
   accent — the same steel every "somebody did this" mark on the page uses. */
.rc-key{background:var(--steel-soft);border-bottom-color:var(--steel-line)}
.rc-key em{color:var(--steel)}
.rc-eq{padding:11px 14px;font-size:12px;line-height:1.5;color:var(--fg)}

.rc-alt{display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:9px;overflow:hidden}
.rc-alt div{display:flex;align-items:baseline;gap:12px;padding:10px 14px;
  background:var(--bg-card);font-size:12px;line-height:1.45}
.rc-alt b{min-width:44px;font-weight:500;color:var(--fg)}
.rc-alt span{flex:1;color:var(--fg-mute)}
.rc-alt em{font-style:normal;font-weight:500;color:var(--fg-dim);min-width:112px}
.rc-alt i{font-style:normal;color:var(--fg-mute);min-width:118px;text-align:right}
/* The no-remark row is the one the standards call non-compliant, and it is the
   only one whose answer is a letter to the payer rather than a claim action. */
.rc-none em{color:var(--steel)}
@media(max-width:760px){
  .rc-alt div{flex-wrap:wrap;gap:4px 12px}
  .rc-alt i{text-align:left}
}

/* ── Deadlines & Filing: two clocks on one axis ────────────────────
   The fourth panel was a list of due dates, which hides the only fact worth
   showing. Both clocks apply, they start on different events and they are
   different lengths — so the appeal window opens two weeks later than timely
   filing and closes six months earlier, and the shorter bar is the one that
   kills the claim. On a sorted list that is two numbers in a column; here it
   is the shape of the picture.

   Offsets are real rather than decorative: the axis is 18 Mar 2026 to 16 Mar
   2027, the denial lands 15 days in (4%) and the appeal dies at day 195 (54%).
   If the dates in the markup change, --a and --b have to change with them. */
.dl{padding:18px 20px 22px}
.dl-hd{display:flex;align-items:baseline;gap:10px;padding-bottom:16px;
  border-bottom:1px solid var(--line-soft)}
.dl-hd b{font-size:13.5px;font-weight:500;color:var(--fg)}
.dl-hd span{font-size:12.5px;color:var(--fg-mute)}
.dl-tag{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:500;
  color:var(--steel);background:var(--steel-soft);border-radius:5px;padding:4px 9px}

.dl-axis{margin:22px 0 6px}
.dl-row{display:grid;gap:7px;margin-bottom:16px}
.dl-bar{position:relative;height:7px;border-radius:4px;background:var(--line-soft)}
.dl-bar i{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));
  border-radius:4px}
.dl-tf i{background:var(--line)}
/* The appeal window is the clock that actually decides, so it is the one that
   gets the accent. The long grey bar behind it is the generous deadline
   nobody should be relying on. */
.dl-ap i{background:var(--steel)}
.dl-cap{font-size:11.5px;line-height:1.45;color:var(--fg-dim)}
.dl-cap em{font-style:normal;color:var(--fg-mute)}
.dl-cap em::before{content:" · "}

/* Service and denial are fifteen days apart on a twelve-month axis, so their
   labels overlap at any readable size. The denial drops to a second row rather
   than losing its label — it is the event the appeal clock runs from and the
   picture does not work without it. */
.dl-ticks{position:relative;height:70px;margin-top:2px;
  border-top:1px solid var(--line-soft)}
.dl-lo{top:38px!important}
.dl-ticks span{position:absolute;top:7px;transform:translateX(-50%);
  display:grid;gap:1px;text-align:center;font-size:11px;color:var(--fg-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-ticks em{font-style:normal;font-size:10px;color:var(--fg-mute)}
/* The first and last ticks would hang off the card; pin them inside it. */
.dl-ticks span:first-child{transform:none;text-align:left}
.dl-last{transform:translateX(-100%)!important;text-align:right!important}
.dl-die{color:var(--steel)}
.dl-die em{color:var(--steel-dim)}

.dl-rule{display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;margin-top:14px}
.dl-rule div{display:flex;gap:12px;padding:10px 14px;background:var(--bg-card);
  font-size:12px;line-height:1.45}
.dl-rule b{min-width:96px;font-weight:500;color:var(--fg)}
.dl-rule span{flex:1;color:var(--fg-mute)}
.dl-unk b{color:var(--steel)}

.dl-lbl{margin:0 0 9px;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-mute)}
.dl-file{margin-top:18px}
.dl-file div{display:flex;gap:12px;padding:5px 0;font-size:12px;line-height:1.5}
.dl-file b{min-width:66px;font-weight:500;color:var(--fg-mute)}
.dl-file span{flex:1;color:var(--fg-dim)}
@media(max-width:760px){
  .dl-rule div,.dl-file div{flex-wrap:wrap;gap:2px 12px}
  .dl-ticks span em{display:none}
}

/* ── Win Probability: the number becomes the subject ───────────────
   This panel stays a ranked list, because that is the right form for it — it
   is a queue, sorted. What was wrong is that the thing doing the sorting was
   the quietest mark on the row: a small pill the eye reached last, after the
   claim number and the reason. A meter reads as a ranking before it reads as a
   value, so the order is legible down the column without anyone parsing five
   percentages.

   Scoped to #pwp-rank. The other panels have left the table template and only
   this one still uses .hv-*, but the override is scoped anyway so that rebuild
   does not reach back into a screen it no longer shares. */
#pwp-rank .hv-th,#pwp-rank .hv-tr{grid-template-columns:30px 1.45fr 2fr 1.05fr}

.hv-sc{justify-self:stretch;display:flex;align-items:center;gap:9px}
.hv-sc i{flex:1;height:5px;border-radius:3px;background:var(--line-soft);
  position:relative;overflow:hidden}
.hv-sc i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);
  border-radius:3px;background:var(--fg-mid)}
.hv-sc b{font-size:11.5px;font-weight:500;min-width:30px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--fg-dim)}
/* The tones are the ones the pills carried: green reads as worth working, red
   as a long shot. They stay muted — this is a rank, not a traffic light, and
   six saturated bars would fight the rest of the screen. */
#pwp-rank .hv-sc.lo i::after{background:#4E8A66}
#pwp-rank .hv-sc.lo b{color:#2E6B48}
#pwp-rank .hv-sc.hi i::after{background:#C4645D}
#pwp-rank .hv-sc.hi b{color:#A8231C}
/* A contractual write-off scores zero, which is how a legitimate adjustment
   leaves the queue without anyone deciding it should. An empty track says that
   more plainly than the words "not a denial" did. */
#pwp-rank .hv-sc.na i::after{width:0}
#pwp-rank .hv-sc.na b{color:var(--fg-mute)}

.rk-f{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;
  padding:10px 20px;border-bottom:1px solid var(--line-soft);
  font-size:11.5px;color:var(--fg-mute)}
.rk-f b{font-weight:500;color:var(--fg-dim)}
.rk-f b::after{content:" ="}
.rk-f i{font-style:normal;color:var(--line)}

/* ── The splash ────────────────────────────────────────────────────
   One viewport that holds the page shut. The masthead is withheld until the
   reader has scrolled past it, so the first screen is the statement and
   nothing else; after that the site behaves exactly as it did.

   The rule this screen has to earn: every word on it is true and checkable.
   The corner annotations are the engine's actual rules — the six inputs, the
   two clocks, the conservative default — not atmosphere. A screen this
   decorative is only defensible on this site if the decoration is carrying
   facts. */
/* Flex, not grid. As a centred grid item the inner block sized to its own
   max-content and width:100% then resolved against that narrow column, so the
   whole statement sat left of centre with the headline wrapped onto four
   lines. In a column flex container width:100% resolves against the viewport,
   which is what centring this actually needs. */
/* The negative margin is the header's own box — its height plus the hairline
   border it always carries — so the splash starts at the true top of the
   document and the sticky bar overlays it rather than displacing it. */
.sp{position:relative;height:100svh;min-height:560px;overflow:hidden;
  margin-top:calc(-1 * (var(--nav-h) + 1px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(#dcdfe4 0%,#e6e8ec 42%,#edeef1 78%);
  isolation:isolate}

/* The light. The reference's box and mask are kept — inset-x-0 at top 21%,
   height 58%, faded to nothing at both ends — because that box is what makes a
   band of light rather than a haze. What sits inside it is ours.

   Five soft curtains, each a wide elliptical gradient in one hue, rotated
   slightly and drifting on its own period. The periods are deliberately not
   multiples of each other (37s, 43s, 53s, 61s, 71s) so the pattern never
   visibly repeats: the curtains slide through one another and the colour where
   they overlap keeps changing, which is what an aurora does and what a single
   animated gradient cannot fake.

   `plus-lighter` is the trick that makes it read as light. On a pale ground,
   overlapping translucent colour normally muddies toward grey; plus-lighter
   adds the channels instead, so two curtains crossing make a brighter, warmer
   band and the crossings look like luminance rather than paint. */
.sp-light{position:absolute;left:0;right:0;top:21%;height:58%;z-index:-2;
  pointer-events:none;isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  filter:saturate(1.25)}
.au{position:absolute;display:block;border-radius:50%;
  mix-blend-mode:plus-lighter;will-change:transform;
  transform-origin:50% 50%;filter:blur(32px)}
/* Each curtain starts somewhere different. The first version put all five at
   50%/50% and they piled up into one pastel smudge — an aurora is several
   bands at different heights crossing at angles, and the offsets are what
   produce the crossings. Wider than the viewport so an edge never enters
   frame, and short relative to their width so each reads as a stratum. */
.au1{width:135%;height:30%;left:-30%;top:14%;
  background:radial-gradient(closest-side,rgba(243,150,58,.72),rgba(243,150,58,0) 70%);
  animation:au-a 37s ease-in-out infinite alternate}
.au2{width:115%;height:26%;left:-8%;top:34%;
  background:radial-gradient(closest-side,rgba(233,96,133,.62),rgba(233,96,133,0) 70%);
  animation:au-b 43s ease-in-out infinite alternate}
/* The white core is narrow and sits mid-band. At .90 across a wide ellipse it
   blew the middle out to paper and took the colour with it. */
.au3{width:78%;height:16%;left:14%;top:40%;
  background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,0) 66%);
  animation:au-c 53s ease-in-out infinite alternate}
.au4{width:125%;height:28%;left:6%;top:24%;
  background:radial-gradient(closest-side,rgba(78,150,225,.70),rgba(78,150,225,0) 70%);
  animation:au-d 61s ease-in-out infinite alternate}
.au5{width:100%;height:20%;left:24%;top:50%;
  background:radial-gradient(closest-side,rgba(150,112,232,.55),rgba(150,112,232,0) 70%);
  animation:au-e 71s ease-in-out infinite alternate}

/* Transforms only. Animating filter or background-position repaints the whole
   layer every frame, and this runs as long as the tab is open. */
@keyframes au-a{from{transform:translate3d(-12%,-18%,0) rotate(-7deg) scaleY(1)}
  to{transform:translate3d(10%,12%,0) rotate(-2deg) scaleY(1.5)}}
@keyframes au-b{from{transform:translate3d(14%,10%,0) rotate(4deg) scaleY(1.2)}
  to{transform:translate3d(-10%,-14%,0) rotate(-3deg) scaleY(.85)}}
@keyframes au-c{from{transform:translate3d(-8%,4%,0) rotate(-3deg) scaleY(.9)}
  to{transform:translate3d(12%,-6%,0) rotate(2deg) scaleY(1.35)}}
@keyframes au-d{from{transform:translate3d(16%,-10%,0) rotate(5deg) scaleY(1.1)}
  to{transform:translate3d(-14%,14%,0) rotate(-4deg) scaleY(.8)}}
@keyframes au-e{from{transform:translate3d(-16%,12%,0) rotate(-6deg) scaleY(1.3)}
  to{transform:translate3d(14%,-8%,0) rotate(3deg) scaleY(.95)}}


/* Their column, to the number: max-w-[840px], mx-auto, items-center,
   text-center, px-12 and pt-24, with the h1 on mt-auto so the mark sits at the
   top of the column and everything from the line down is pushed to the foot of
   it. That mt-auto is the whole of the positioning — it is why the mark reads
   as a header and the statement sits low rather than dead centre. The bottom
   padding stands in for the scroll cue that used to hold that space open. */
.sp-in{position:relative;z-index:1;height:100%;width:100%;max-width:1040px;box-sizing:border-box;
  margin:0 auto;padding:96px 48px 64px;display:flex;flex-direction:column;
  align-items:center;text-align:center}
/* Sizes and spacing are the reference's own, read off octolane.com's
   stylesheet rather than measured off a picture of it: clamp(44px,8vw,84px)
   is one of its display steps and the only one whose cap height matches the
   screenshot at that window width; 1.02 and -.025em are both in its type
   scale. Its exact face is not — see below.

   Sans, not serif. The reference's display line is a light humanist sans set
   very large and tracked in tight — read as a serif at thumbnail size, which
   it is not. The exact face is Aside Display, licensed from Family Type and
   not shippable here (CONTEXT records this against the hero), so this is Geist
   at 300, which the site already loads and which is the closest thing we can
   ship: same humanist skeleton, same open apertures, a touch more geometric.

   Two things carry the reference's feel more than the family does — the weight
   is light enough that the strokes stay hairline at 130px, and the tracking is
   pulled well negative, because a sans set this large looks loose at the
   spacing it needs at text size.

   2026-09-22: Geist gave way to Lato 300. Against the reference the
   geometric skeleton read as mechanical at this size; Lato is a humanist
   sans, light and slightly rounded, closest in feel to the reference's
   licensed face of twenty-two Google faces rendered side by side. Rosario
   was tried first and read as too calligraphic in place. */
.sp-h{font-family:'Lato','Geist',system-ui,sans-serif;font-weight:300;
  font-size:clamp(48px,7.3vw,82px);line-height:1.05;letter-spacing:-.03em;
  color:var(--fg);display:grid;gap:0;max-width:100%;
  /* Their h1 is on mt-auto, which only lands where it does because the block
     under it — two actions, a mail link, two subhead lines and a scroll cue —
     holds the bottom open. Ours carries less, so mt-auto dropped the statement
     to the floor. This puts its cap where theirs sits instead: 32% of the
     viewport, measured off the reference, minus the 96px of column padding
     above it. It was 156 while the mark sat there; the mark was 60 of that. Same result, and it does not
     drift when the content under it changes. */
  margin:max(40px,calc(32vh - 96px)) 0 0}
/* One action under the line and nothing else. The white pill is the "Sign in"
   treatment, which is the quieter of the two the site has — a solid black
   button under a statement this large reads as a demand rather than an
   invitation. */
.sp-btn{height:52px;padding:0 32px;border-radius:999px;font-size:15.5px;
  margin-top:56px;background:transparent;box-shadow:none;
  border:1px solid rgba(15,14,13,.22);color:var(--fg);
  transition:background-color .2s,border-color .2s}
.sp-btn:hover{background:rgba(255,255,255,.55);border-color:rgba(15,14,13,.38)}



/* The masthead is withheld for exactly one viewport. It is translated rather
   than display:none so the arrival is a movement and not a flash, and
   pointer-events are dropped so the hidden bar cannot swallow a click on the
   splash's own buttons. */
/* The bar is always there. Over the splash it is glass — no tint, no blur, no
   hairline — so the aurora runs behind the wordmark instead of under a panel;
   past the splash it takes its ordinary surface. Only paint changes, never
   `position` and never the box: an earlier version toggled sticky/fixed and
   the whole document jumped by the header's height on every handover.

   `sp-on` now means "over the hero" rather than "hidden", which is why the
   class name outlived its first meaning. */
/* 2026-10-05: over the hero the bar is glass that still holds its own
   place — a faint wash that fades to nothing at its lower edge, and a blur
   that fades the same way, so the aurora shows through but the headline
   scrolling up under the bar softens and dims instead of colliding with the
   links. The bar stays in front (z-index above), the box never changes. */
body.sp-on .masthead{border-bottom-color:transparent;
  background:linear-gradient(to bottom,rgba(247,246,243,.62) 0%,rgba(247,246,243,.28) 55%,rgba(247,246,243,0) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.55) 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.55) 80%,transparent 100%)}
body:not(.sp-on) .masthead{-webkit-mask-image:none;mask-image:none}
/* Dark ink on a pale aurora reads fine; the links only need their hover
   surface softened so it does not appear as a grey chip on the gradient. */
body.sp-on .nav-links a:hover{background:rgba(255,255,255,.45)}
/* Long enough that the handover reads as a fade rather than a switch. */
.masthead{transition:background-color .45s ease,border-color .45s ease,
  -webkit-backdrop-filter .45s ease,backdrop-filter .45s ease}

@media(max-width:760px){
  .sp-in{padding:64px 24px 96px}
}
@media(prefers-reduced-motion:reduce){
  .au{animation:none}
  body.sp-on .masthead{transition:none}
}

/* Both ways out of the splash aim here, and both land the hero under the bar
   rather than behind it — the header arrives on the same scroll, so without
   the offset the first thing the reader sees on entering the site is its own
   heading tucked under a bar that has only just appeared. html already carries
   scroll-behavior:smooth, so the handover is a glide and not a jump. */
#top{scroll-margin-top:var(--nav-h)}

/* Their subhead block, to the number: mt-8 under the actions, 17px at
   leading-relaxed, the second line 4px under the first. It is also the slot
   that carries the claim an investor reads — the reference puts its whole
   flywheel argument here and nowhere else — so restoring it fixes the
   composition and the substance in the same move. Without content here the
   h1's mt-auto drops the statement to the floor, which is what the first
   attempt at this layout did. */
.sp-sub{margin-top:32px;max-width:640px}
.sp-sub p{margin:0;font-size:17px;line-height:1.625;color:var(--fg)}
.sp-sub p + p{margin-top:4px;color:var(--fg-mid)}
@media(max-width:760px){.sp-sub p{font-size:15px}}

/* ── The two figures ───────────────────────────────────────────────────
   Hand-built SVG, in the site's palette, with no plotting runtime: eleven
   data points do not justify shipping a library, and a library's defaults
   would not sit in this palette anyway.

   One accent. "Today" is an outline rather than a second colour because the
   two-fill version failed the palette check — steel against this site's warm
   grey is ΔE 14.7 for normal vision, under the 15 floor — and outline-versus-
   solid is a secondary encoding that survives colourblindness and print. Every
   mark is directly labelled, which is also why neither chart needs a tooltip:
   there is no value here you would have to hover to read. */
.ch{margin:0}
/* Set like the prose it sits beside rather than like a chart label — it is
   the figure's sentence, not its axis. */
.ch figcaption{font-size:19px;line-height:1.45;font-weight:500;color:var(--fg);
  margin-bottom:16px;letter-spacing:-.01em}
.ch svg{display:block;width:100%;height:auto;overflow:visible}

.ch-grid line{stroke:var(--line);stroke-width:1}
.ch-grid line:first-child{stroke:var(--line-soft)}
.ch-tick text{fill:var(--fg-mute);font-size:10px;text-anchor:end;
  font-variant-numeric:tabular-nums}
.ch-cat text{fill:var(--fg-mute);font-size:11px;text-anchor:middle}



.ch-src{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--fg-mute)}
.ch-src b{font-weight:500;color:var(--fg-dim)}

/* The threshold figure. Two series, so a legend is present and each line also
   carries a dash pattern — identity is never colour alone.

   The pair is steel and clay. The palette checker passes them on CVD
   separation (ΔE 14.4 protan, 20.3 tritan) and on normal vision (18.9, well
   over the 15 floor) and fails only its chroma floor, which both colours miss
   because this site's whole palette is low-chroma — steel itself is 0.057, and
   raising it to clear that check would mean abandoning the accent the rest of
   the page uses. Recorded rather than silently ignored. */
.ch-lg{display:flex;gap:18px;margin:0 0 10px}
.ch-lg span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--fg-mid)}
.ch-lg i{width:14px;height:0;border-top-width:2px;flex:none}
.ch-k1{border-top-style:dashed;border-top-color:#B0805A}
.ch-k2{border-top-style:solid;border-top-color:var(--steel)}

.ch-band{fill:var(--steel-soft);opacity:.75}
.ch-band-t{fill:var(--steel);font-size:10px;text-anchor:middle;letter-spacing:.02em}
.ch-zero{stroke:var(--fg-dim);stroke-width:1.25;stroke-dasharray:5 4}
.ch-l1{fill:none;stroke:#B0805A;stroke-width:2;stroke-dasharray:6 4;
  stroke-linecap:round}
.ch-l2{fill:none;stroke:var(--steel);stroke-width:2;stroke-linecap:round}
.ch-mark line{stroke:var(--fg-dim);stroke-width:1.25}
.ch-cross text{fill:var(--fg);font-size:11px;font-weight:500;
  font-variant-numeric:tabular-nums}
.ch-ax{fill:var(--fg-mute);font-size:10.5px;text-anchor:middle}
.ch-src i{font-style:italic}

/* The line under the three tiles: the verbs that did not get a card. */
.rz-foot{max-width:760px;margin:36px auto 0;text-align:center;
  font-size:15px;line-height:1.55;color:var(--fg-mid)}

/* How Merid Works: the same shape in every cell.

   The cells were flex columns with the icon on margin-bottom:auto, which
   pushed each title and paragraph to the *bottom* of its cell. Rows stretch
   to the tallest cell, so a 25-word paragraph's title floated a hundred
   pixels lower than its 90-word neighbour's — six cells, six baselines. Now
   the icon sits at the top, the title at one fixed distance under it, and
   the paragraph under that, in every cell; the paragraphs are written to
   within a few words of each other so the rows are level as well. */
.cg-work .cg-i{justify-content:flex-start;min-height:0}
.cg-work .cg-i svg{margin-bottom:0}
.cg-work .cg-i b{margin-top:22px}
.cg-work .cg-i span{margin-top:9px}

/* What makes Merid different: eyebrow, centred headline, four even columns. */
.df4-sec{text-align:center}
.df4-kick{margin:0;font-size:15px;color:var(--steel);letter-spacing:-.01em}
.df4-h{margin:0 auto;max-width:20ch;font-size:clamp(28px,3.6vw,42px);line-height:1.12;
  letter-spacing:-.035em;font-weight:400}
.df4{display:grid;gap:36px 28px;margin-top:64px}
@media(min-width:640px){.df4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.df4{grid-template-columns:repeat(4,1fr);gap:0 40px}}
.df4-i{display:flex;flex-direction:column;align-items:center;padding:0 6px}
.df4-i svg{width:52px;height:52px;stroke:var(--fg-dim);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.df4-i svg .a{stroke:var(--steel)}
.df4-i b{display:block;margin-top:30px;font-size:16px;font-weight:500;line-height:1.3;max-width:26ch}
.df4-i span{display:block;margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--fg-mute);
  max-width:30ch}


/* The statement band: the site's ink, the splash face, and the words lit
   in scroll order. `.st-js` is added by the script, so the unlit state only
   exists when something will light it. */
.st{background:var(--bg);color:var(--fg);padding:110px 0 100px;text-align:center}
.st-kick{margin:0;font-size:15px;color:var(--steel);letter-spacing:-.01em}
.st-h{margin:0 auto;max-width:24ch;font-family:'Geist',system-ui,sans-serif;font-weight:300;
  font-size:clamp(34px,5.1vw,66px);line-height:1.1;letter-spacing:-.025em}
.st-h span{transition:opacity .35s ease}
.st-js .st-h span{opacity:.22}
.st-js .st-h span.on{opacity:1}
@media(max-width:640px){.st{padding:72px 0 64px}}

/* The figures under the statement: label left, serif number right, one
   hairline per row. Newsreader at display size, tabular so rows align. */
.kp{margin:96px auto 0;max-width:1080px;text-align:left;border-top:1px solid var(--line-soft)}
.kp > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:24px;padding:30px 0;border-bottom:1px solid var(--line-soft)}
.kp dt{font-size:16px;color:var(--fg-dim);letter-spacing:-.01em}
.kp dd{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:clamp(44px,5.2vw,72px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.kp dd small{font-family:'Geist',system-ui,sans-serif;font-size:.3em;font-weight:400;
  letter-spacing:0;color:var(--fg-mute);margin:0 .35em 0 .3em;vertical-align:.35em}
@media(max-width:640px){
  .kp{margin-top:64px}
  .kp > div{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .kp dd{font-size:40px}}
.sp-h span{display:block}
@media(min-width:900px){.sp-h span{white-space:nowrap}}
@media(max-width:600px){.sp-h{font-size:clamp(38px,11vw,48px)}}

/* One icon language for every icon-over-title on the site: a 40-unit grid,
   glyph inside 6..34, 1.4 stroke, round caps and joins, ink for the object
   and one steel stroke (.a) for the part that is the point of the icon. */
.cg-i svg,.df4-i svg{stroke-linecap:round;stroke-linejoin:round}
.cg-i svg .a,.df4-i svg .a{stroke:var(--steel)}

.src-note p{margin-top:14px;max-width:74ch;font-size:15px;line-height:1.55;color:var(--fg-mid)}
.src-note h2 + p{margin-top:22px}

/* Phone only. Desktop rules above are untouched.
   1. The hero heading's two spans are desktop line breaks; on a narrow
      column they split a sentence mid-phrase, so they flow as one line of
      text and wrap where the column says.
   2. The "What Merid Does" column was sized by the product mock-up's
      max-content width and ran 140px past a 390px screen, cutting the prose.
      The column is capped at the viewport and the mock-up scrolls sideways
      inside its own box instead. */
@media(max-width:760px){.h-lines > span{display:inline}.h-lines > span + span::before{content:" ";white-space:pre}}
@media(max-width:1023px){
  .pw{grid-template-columns:minmax(0,1fr)}
  .pw-copy,.pw-list{max-width:100%;min-width:0}
  .pw-stage{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* On the dark page the status icons are pure white, accent included. */
.dark .cg-i svg,.dark .cg-i svg .a{stroke:#fff}
.src-note h1{margin-bottom:6px}