/* Self-hosted. The latin-ext face carries U+20B9 (the rupee sign), which the
   latin subset omits — without it every figure loses its currency mark to a
   fallback font. unicode-range keeps it a lazy download. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}  /* latin */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}  /* latin-ext */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}  /* latin */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}  /* latin-ext */
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}  /* latin */
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}  /* latin-ext */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}  /* latin */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}  /* latin-ext */

/* Metric-matched fallbacks. Manrope runs ~2.7-4.6% wider than Helvetica at
   the three weights this site uses, and 11% wider than San Francisco, so the
   fallback wraps the hero lede to a different number of lines and everything
   under it jumps when the real face arrives — measured as a single 0.056 CLS
   shift on `.statusline`, the block directly below the hero text. `size-adjust`
   scales the fallback until its advance widths match, so the swap changes the
   letterforms and not the line breaks. Ratios measured, not estimated: 102.76
   / 104.56 / 102.68 at 400 / 500 / 800. */
@font-face{font-family:'Manrope Fallback';font-weight:400;size-adjust:102.83%;src:local('Helvetica Neue'),local('Helvetica'),local('Arial')}
@font-face{font-family:'Manrope Fallback';font-weight:500;size-adjust:104.73%;src:local('Helvetica Neue'),local('Helvetica'),local('Arial')}
@font-face{font-family:'Manrope Fallback';font-weight:800;size-adjust:102.49%;src:local('Helvetica Neue'),local('Helvetica'),local('Arial')}

:root{
  /* Ground. The reference floats every object on a coloured sky; this is the
     same move on a cool white wash, with clear indigo as the stamp colour —
     finance SaaS energy without the fog dullness. Fixed attachment, so the wash belongs to
     the window rather than to the scroll. */
  --ground-1:#F7F8FC; --ground-2:#F0F2F8; --ground-3:#E8EBF4;
  --surface:#FCFCFE; /* every card, pill and panel */

  --ink:#1A1C21; --body:#5B6069;
  /* Retuned for the warm ground: #6F737A measured 3.84:1 against --ground-3,
     under the 4.5:1 AA floor for small text, and --faint carries every
     column head, step number and footer link. This is 4.87:1. */
  --faint:#63676E;
  --hair:#D0D4E0; --hair-soft:#E0E3EC;

  /* Surfaces. The signature of the reference is a top-inset rim rather than a
     drop shadow: light appears to fall on the object from above and catch its
     lower lip. Everything soft on this page carries one. */
  --rim:inset 0 -3px 4px rgba(55,70,130,.14);
  --rim-raised:inset 0 -3px 4px rgba(55,70,130,.14), 0 2px 4px rgba(35,45,90,.08);
  --rim-hair:rgba(55,70,130,.18);
  /* D8, settled in Chunk 10. `--rim-hair` composites to 1.25:1 against a form
     field's own wash, and WCAG 1.4.11 wants 3:1 for the boundary that
     identifies a control. The fix is scoped rather than site-wide: a control
     has to be found and operated, a card does not, so the solid tone below
     goes on the four form fields and the soft hairline stays everywhere else.
     Same hue as `--rim-hair`, taken down until it clears the floor: 3.03:1
     against the field wash and 3.21:1 against the card behind it. */
  --field-rim:#6B7594;

  /* The accent, promoted. It was the logo colour and nothing else; using the
     brand colour as the brand button beats borrowing the reference's green. */
  --accent:#3B4FD9; --accent-rim:#2A3AB8; --accent-ink:#FDFCFA;
  /* Status green, from the reference's "available for projects" dot. It exists
     only as a 13px dot: a status light must not be the brand indigo, or it
     reads as a bullet rather than a state. The words beside it carry the
     meaning, so this never has to hold text contrast. */
  --live:#17805E;

  /* Primary actions share one fill: clear indigo stamp. Green stays on `--live`
     only (the beta status dot), so a Send or closing CTA cannot be mistaken
     for a different product colour. */
  /* How bright the sweep is allowed to be. The reference runs 0.7 across
     every pill; over indigo with white text that drops the label to
     **1.77:1** mid-sweep. Cap at the highest the white label survives at
     the 4.5:1 floor — measured mid-sweep at 4.77:1. */
  --sheen:.30;

  --r-card:24px; --r-pill:999px;
  --r-inner:18px;    /* Reserved: Chunk 7's inner panels. */
  --max:1200px;   /* Chunk 9. The reference's content column; was 1080. */
  --navh:79px; /* 24 top + 51 pill + 4 bottom. Reserved as body padding: the pill is fixed. */
  --hover-scale:1.05;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* Motion. One entrance curve, three durations. --spring approximates the
     reference site's Framer spring (stiffness 400, damping 26, mass 1); it
     overshoots slightly, which is the whole point of it. */
  --spring:cubic-bezier(.34,1.4,.5,1);
  --dur-enter:420ms;  /* mount only */
  --dur-hover:150ms;  /* hover and focus */
  --dur-panel:280ms;  /* accordion open and close. Reserved: Chunk 6 uses it. */
  /* Type scale. Five text steps plus two fluid headings; mono has three.
     Anchored on --t-body:17px, the body size the design system fixes.
     No half-pixel steps: every size below is a deliberate role. */
  --t-small:14px;   /* nav, captions, table body, secondary detail */
  --t-sub:16px;     /* secondary prose, list items, buttons */
  --t-body:17px;    /* body copy, h3, FAQ questions */
  --t-lede:19px;    /* section ledes. Reference measures 19px/28.5px on every one. */
  --t-head:21px;    /* legal section headings */
  --m-label:11px;   /* column heads, step numbers, legal section numbers */
  --m-meta:12px;    /* footer row, dates, document chrome */
  --m-figure:14px;  /* figures inside the document */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:linear-gradient(180deg,var(--ground-1) 0%,var(--ground-2) 62%,var(--ground-3) 100%);
  background-attachment:fixed;color:var(--ink);min-height:100vh;display:flex;flex-direction:column;padding-top:var(--navh);
  font-family:'Manrope','Manrope Fallback',system-ui,sans-serif;font-weight:400;font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* Reference h1 is 68px / 71.4px, letter-spacing -0.4px. The size and the
   1.05 line-height are taken directly. The tracking is not: -0.4px at 68px is
   -0.0059em, which is near-neutral, and it reads that way on Bricolage
   Grotesque because that face is already tight. Manrope 800 at neutral
   tracking looks slack, so this loosens from munimly's -0.038em toward the
   reference without going all the way. */
h1{font-size:clamp(38px,6.2vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
/* Reference h2 is 54px / 56.7px at wght 730, letter-spacing -0.35px. Weight
   goes to 800 here rather than the 500 every smaller heading settled on:
   Manrope ships nothing between, and at display scale 730 reads far nearer
   800 than 500 - which is the call h1 already makes on the same face. The
   tracking loosens from -0.022em part of the way toward the reference's
   -0.0065em, for the reason set out above h1. */
h2{font-size:clamp(28px,3.9vw,54px);font-weight:800;letter-spacing:-.018em;line-height:1.05}
h3{font-size:var(--t-body);font-weight:500;letter-spacing:-.012em}
p{color:var(--body)}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
/* ---- Section rhythm ----------------------------------------------------
   The reference's shape: a centred heading block whose parts sit 20px apart,
   and 56px from that block to the content below it. The subtitle is held to
   the reference's 448px measure.

   The hairline that used to divide one section from the next goes with it.
   Every section below the hero is now a surface object standing on the
   ground, and a rule drawn between two things that already have edges is a
   third edge.

   Padding is the one number here that does not port. The reference's
   `80px 0` puts 160px between sections, and it can afford that because its
   gaps are full of clouds, stickers and polaroids — the props this port
   rejected on purpose. On an empty ground the same 160px reads as a hole,
   and it reads worst where a section is short: `#about` carries 204px of
   content between two of them, and `.closing` 191px. 64px brings the gap to
   128 without costing the objects their air. */
.sec{padding-top:64px;padding-bottom:64px}
.sechead{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:20px;margin-bottom:56px}
/* A 54px heading run across the full 1200px column reads as a banner rather
   than a heading; the reference never has to solve this because its titles
   are two and three words. Capped at 900px and balanced, so a long one takes
   two even lines instead of one long one plus an orphan. */
.sechead h2{max-width:900px;text-wrap:balance}
.sechead .lede{margin:0;max-width:448px}
.lede{font-size:var(--t-lede);line-height:1.5;max-width:56ch;margin-top:18px}
/* The CTA pill. One recipe, shared with the nav: the reference's hero button
   is `padding 10px 22px; height 44px; radius 40px; inset 0 -4px 4px` and every
   other pill on that page is the same shape at a different fill. Radius 40 and
   999 are indistinguishable at 44px tall, so this uses the pill token. */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:10px 22px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--t-sub);font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 -4px 4px var(--accent-rim);
  /* Chunk 8 is the first to use this on a real <button>, which does not
     inherit the page font and brings a border of its own. */
  border:0;font-family:inherit;cursor:pointer;
  transition:transform var(--dur-hover) var(--ease-out)}
/* The sheen: the reference's own geometry, a 266x50 off-white panel rotated
   45deg and parked at `top: 35px; left: -155px`, clipped by the pill's
   overflow and swept across on hover. Chunk 2 also had the offset wrong
   (`top: -12px`), which parked the band over the label instead of below it,
   so at rest the pill now reads clean and the panel only appears in motion.

   Its opacity is the one number that could not port as a constant — see
   `--sheen`. It moves to ::before because the reference draws the sheen as a
   child div and keeps ::after for the hairline below. */
.btn::before{content:'';position:absolute;top:35px;left:-155px;width:266px;height:50px;
  background:var(--surface);opacity:var(--sheen);pointer-events:none;
  transform:translateX(0) rotate(45deg);
  transition:transform 520ms var(--ease-out)}
/* `2px solid rgba(0,0,0,.06)` at the pill radius, off the reference's rim
   table — the half of the skeuomorphic look that no computed-style sweep
   picks up, because it is only ever drawn as a pseudo-element. */
.btn::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(0,0,0,.06)}

/* `.btn-send` and `.btn-final` keep their class hooks for markup/JS, but
   inherit the indigo `.btn` fill — one primary colour for every ask. */

/* The quiet half of the pair. Same 44px pill geometry as `.btn`, but a
   surface fill and inset rim instead of the accent — proof (sample PDF)
   should read as a real choice next to the primary ask, not a grey text link. */
.btn2{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:10px 22px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);
  font-size:var(--t-sub);font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;
  box-shadow:var(--rim);
  border:0;font-family:inherit;cursor:pointer;
  transition:transform var(--dur-hover) var(--ease-out)}
.btn2::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(0,0,0,.06)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:scale(var(--hover-scale))}
  .btn:hover::before{transform:translateX(360px) rotate(45deg)}
  .btn2:hover{transform:scale(var(--hover-scale))}
}

/* Click-to-copy. The reference's mechanism, not an approximation of it: two
   label rows stacked inside a fixed-height window with overflow:hidden, and
   the swap is a vertical translate of the pair, so glyph and words travel
   together. A cross-fade would let them dissolve through each other.

   Marked up as a real mailto rather than the reference's <button>. Without JS
   the anchor still opens a mail client, which is the same no-JS parity D2
   bought for the nav; the second row simply never comes up. On a clipboard
   rejection the handler falls back to following the href.

   The reference's own numbers disagree here: its prose says the rows slide
   28px (row 20 + the button's 8px gap) but the measured rows sit at y=39 and
   y=69, and the gap that actually separates them is the window's 10px. 30px
   is what the site does, so 30px is what this does. The step is derived from
   the two locals below so the pair cannot drift apart. */
.copy{--copy-row:20px; --copy-gap:10px;
  position:relative;display:inline-flex;flex-direction:column;align-items:center;
  height:36px;padding:2px 0;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--rim);
  color:var(--ink);text-decoration:none;
  transition:transform var(--dur-hover) var(--ease-out)}
/* The clipping window. flex:1 0 0 inside the 36px pill resolves to 32px, as
   the reference measures; the asymmetric 5/6 padding is its own. */
.copywin{flex:1 0 0;display:flex;flex-direction:column;align-items:center;gap:var(--copy-gap);
  padding:5px 14px 6px;border-radius:var(--r-pill);overflow:hidden}
.copyrow{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;
  height:var(--copy-row);white-space:nowrap;
  font-size:var(--t-small);font-weight:500;line-height:var(--copy-row);letter-spacing:-.00714em;
  transition:transform 250ms var(--ease-out)}
.copy[data-copied="true"] .copyrow{transform:translateY(calc(-1 * (var(--copy-row) + var(--copy-gap))))}
.copyglyph{flex:none;display:block}
@media(hover:hover) and (pointer:fine){
  .copy:hover{transform:scale(var(--hover-scale))}
}

/* The status line. The reference floats this pair absolutely across the top of
   its hero and hides it below 1200px. Neither move survives here: munimly's
   nav pill is fixed over that band, and hiding the pair would leave the copy
   affordance to the footer alone on every laptop. So the pair sits in the flow
   where .fineprint used to, keeping its role - quiet chrome under the CTA -
   and gaining an affordance in place of a fact #output already states. */
/* No margin: it is the third child of .heroblock, whose 24px gap spaces it,
   exactly as it spaced the .fineprint it replaces. */
/* ---- The status bar ----------------------------------------------------
   The reference floats a 1100x36 row across the top of its hero at
   `top: 32px`, inset 90px inside a 1280 main, with the two pills pushed to
   its ends by `space-between` and the nav pill floating over the middle of
   it. Chunk 5 put the pair in the flow under the hero CTA instead, on the
   grounds that munimly's nav is `position: fixed` over exactly that band.
   Putting the row inside the fixed header is the same picture with one less
   absolutely-positioned thing on the page, and it reaches every page rather
   than the home page alone.

   It is centred on the nav pill's own midline rather than pinned to the
   reference's `top: 32px`: the pill is 51px tall from y=24, so its centre is
   49.5 against the reference's 50, and centring keeps the two aligned if the
   pill's height ever moves.

   Inset 48px inside the wrap (retuned 2026-09-07 for the longer gmail
   address). Was 78; that left the copy pill under the widened nav.

   `.pillnav` is `pointer-events: none` so the page behind it stays
   clickable. Only the copy pill takes them back, which also reproduces the
   reference's non-interactive left pill for free. */
.statusline{position:absolute;top:50%;left:48px;right:48px;transform:translateY(-50%);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.statusline .copy{pointer-events:auto}
/* Clearance math (wrap locked at 1200): gap ≈ 285.5 − inset − copyWidth.
   With `support@munimly.in` (~186px) and inset 78, gap was fine. After the
   address became `munimlydotin@gmail.com` (~221px) and the nav pill grew
   (16px links + longer CTA), gap went negative (~−13px) at every desktop
   width. Inset 48 restores ~16px clear on each side while the wrap is 1200.
   Hide when the wrap starts shrinking and the right gap would collapse again
   — remeasured: still clear at 1200+, overlaps under that once padding eats
   the column. Below this the beta fact still stands in pricing/FAQ, and every
   page footer still carries the same copy pill. */
@media(max-width:1199px){.statusline{display:none}}
.livepill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--rim);
  font-size:var(--t-small);font-weight:500;line-height:20px;letter-spacing:-.00714em;
  color:var(--ink);white-space:nowrap}
.livedot{width:13px;height:13px;flex:none;border-radius:var(--r-pill);background:var(--live)}

/* Announcement target for the copy. Off-screen rather than display:none, which
   assistive tech skips. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
/* D5: the rule above rounds the focus ring to 4px on objects that are pills. */
.btn:focus-visible,.btn2:focus-visible,.copy:focus-visible{border-radius:var(--r-pill);outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:var(--surface);padding:11px 16px;
  border-radius:12px;z-index:9;box-shadow:var(--rim-raised)}

/* Floating pill nav.
   Geometry is the reference's, measured rather than eyeballed: pill 51px tall
   on 6px padding, 18px between logo / links / CTA and between the links, a
   39px CTA on 0 18px padding, and the hover underline 1px tall sitting 4px off
   the link's bottom edge inside a 36px link box. Reference nav is 439px wide;
   this one computes to 467px, and the whole difference is that "What it
   produces" is a longer word than "Home".

   Three deliberate departures, each forced by content rather than taste:
   - Left padding is 20px, not 6px. The reference's logo is a 39px circle that
     fills the pill's height, so a 6px inset clears the 999px corner. A 20px
     wordmark does not, and at 6px it collides with the curve.
   - No `overflow: hidden` on the pill. The reference's mobile menu is a
     sibling of its nav; ours is a child, and it has to escape.
   - Links were held at 14px when the column was 1080; bumped to the
     reference's 16px (`--t-sub`) now that `--max` is 1200. */
.pillnav{position:fixed;top:0;left:0;right:0;z-index:8;padding:24px 0 4px;pointer-events:none}
.pillnav .wrap{position:relative;display:flex;justify-content:center}
.pill{pointer-events:auto;position:relative;height:51px;
  display:flex;align-items:center;gap:18px;background:var(--surface);
  border:1px solid var(--hair-soft);border-radius:var(--r-pill);padding:6px 6px 6px 20px;
  box-shadow:var(--rim-raised);max-width:100%;
  animation:rise var(--dur-enter) var(--spring) .1s both}
.pill .mark{display:flex;flex:none;text-decoration:none}
.pill .mark svg{height:20px;width:auto;display:block}

.pilllinks{display:flex;align-items:center;gap:18px;min-width:0}
.pilllinks a{position:relative;display:flex;align-items:center;height:36px;padding:0;
  font-size:var(--t-sub);font-weight:500;line-height:1.4;letter-spacing:.16px;
  color:var(--body);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-hover) ease}
/* The bar spans the label exactly, because the link box has no horizontal
   padding — same as the reference, where bar width equals link width. */
.pilllinks a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--ink);border-radius:10px;opacity:0;
  transition:opacity var(--dur-hover) ease}

/* The one saturated object in the nav: accent fill over a darker inset rim.
   The reference uses -4px on CTA pills and -3px on cards; that distinction is
   real and is kept. */
.pillcta{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;
  height:39px;padding:0 18px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--t-sub);font-weight:500;line-height:1.4;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 -4px 4px var(--accent-rim);
  transition:transform var(--dur-hover) var(--ease-out)}
/* The sheen, on the reference's own terms — see the note above `.btn::before`.
   Parked low and left instead of across the label, which is what lets it run
   at 0.7 rather than the 0.18 Chunk 2 had to damp it to. This pill is 39px
   rather than 44px, so the offset comes down with it. Translate precedes
   rotate so the sweep is horizontal on screen rather than diagonal. */
.pillcta::before{content:'';position:absolute;top:31px;left:-155px;width:266px;height:50px;
  background:var(--surface);opacity:var(--sheen);pointer-events:none;
  transform:translateX(0) rotate(45deg);
  transition:transform 520ms var(--ease-out)}
.pillcta::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(0,0,0,.06)}

@media(hover:hover) and (pointer:fine){
  .pilllinks a:hover{color:var(--ink)}
  .pilllinks a:hover::after{opacity:1}
  .pillcta:hover{transform:scale(var(--hover-scale))}
  .pillcta:hover::before{transform:translateX(330px) rotate(45deg)}
}
.pill a:focus-visible,.pilltoggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Hamburger. The reference stacks 3 bars of 21x3 at gap 4 inside a 42px filled
   circle that echoes its logo circle. munimly's mark is a wordmark with no
   circle to echo, so the button stays bare, and two bars are used because they
   fold into a cross - the same gesture the FAQ toggle makes. The 42px hit area
   is the reference's and is kept: it is also the accessible minimum. */
.pilltoggle{display:none;flex:none;align-items:center;justify-content:center;
  flex-direction:column;width:42px;height:42px;padding:0;
  background:none;border:0;border-radius:var(--r-pill);cursor:pointer}
.pilltoggle span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform var(--dur-hover) var(--ease-out)}
.pilltoggle span+span{margin-top:4px}
.pill[data-open=true] .pilltoggle span:first-child{transform:translateY(2.75px) rotate(45deg)}
.pill[data-open=true] .pilltoggle span:last-child{transform:translateY(-2.75px) rotate(-45deg)}

/* D1. The nav is fixed, so an anchor jump parks its target underneath it.
   Without this, /#output, /#checks and the #main skip link all land behind the
   pill - and the skip link exists for exactly the people who cannot see that
   happen. 12px past the nav so the target's heading clears it. */
[id]{scroll-margin-top:calc(var(--navh) + 12px)}

@media(max-width:760px){
  /* 12 top + 54 pill + 4 = 70, matching the reference's 54px bar at top 12. */
  :root{--navh:70px}
  .pillnav{padding:12px 0 4px}
  .pill{width:100%;height:54px;gap:0;padding:6px 6px 6px 18px}
  /* Reference groups the CTA and the hamburger 5px apart on the right. */
  .pillcta{height:42px;margin-left:auto}
  .pilltoggle{margin-left:5px}
  /* D2. Without JS there is no toggle and no panel, so the links must not stay
     in the flow: at 390px they measure 467px of pill against 334px of room and
     spill straight out of the curve. Hiding them is what the site did before
     the pill was made fixed, so this is parity, not a new loss. */
  .pilllinks{display:none}
  .js .pilltoggle{display:flex}
  .js .pilllinks{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:5px;padding:12px 0;
    background:var(--surface);border-radius:var(--r-card);
    box-shadow:var(--rim),
      0 1px 1px -1px rgba(60,45,25,.08),
      0 2px 5px -2px rgba(60,45,25,.08),
      0 8px 21px -3px rgba(60,45,25,.10);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity var(--dur-hover) ease,transform var(--dur-hover) var(--ease-out),
      visibility var(--dur-hover)}
  .js .pill[data-open=true] .pilllinks{opacity:1;visibility:visible;transform:none}
  /* Reference rows: 40px tall, centred, 5px apart inside 12px 0 padding. */
  .js .pilllinks a{height:40px;justify-content:center;padding:0}
  .js .pilllinks a::after{display:none}
}

/* Hero rhythm, taken from the reference's `padding: 180px 0 140px`.
   That 180px is measured from the top of the document, and the nav floats over
   it. Here the nav is reserved as body padding instead, so the section's own
   top padding is 180 - 79 = 101px and the content lands at the same 180px from
   the viewport top. The 140px foot is used as-is. */
/* Bottom padding scales with the section rhythm: 140 was 80 + 60, so 112 is
   64 + 48, keeping the hero's extra breathing room proportional. */
.hero{padding-top:101px;padding-bottom:112px;text-align:center}

/* Two nested stacks, as in the reference: an outer content stack at gap 24px
   holding the text block and the CTA, and an inner text block at gap 16px
   holding badge, headline and subtitle. Gaps, not margins - which is why the
   margins those elements carry elsewhere are zeroed here. */
.heroblock{display:flex;flex-direction:column;align-items:center;gap:24px}
.herotext{display:flex;flex-direction:column;align-items:center;gap:16px}
.hero .lede,.hero .cta{margin:0}

/* Reference subtitle: 19px / 28px, letter-spacing -0.3px. */
.hero .lede{font-size:19px;line-height:1.474;letter-spacing:-.0158em;margin:0 auto}

.cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta.start{justify-content:flex-start}
/* Mobile. The spec gives no padding for 390px, only that the section shrinks
   617 -> 506; these are scaled by that ratio rather than measured, and are
   labelled as such. The reference keeps its hero centred at 390px. This one
   does not: its h1 is four words and munimly's subtitle is forty, and forty
   centred words on a 334px column is a wall. Left-aligned below 700px. */
@media(max-width:700px){
  .hero{padding-top:64px;padding-bottom:88px;text-align:left}
  .heroblock,.herotext{align-items:flex-start}
  .hero h1 br{display:none}
  .hero .lede{margin-left:0}
  /* Hero only. The closing block keeps its centred heading at every width —
     it is six words, not forty — so its buttons stay centred under it. */
  .hero .cta{justify-content:flex-start}
  .sec{padding-top:48px;padding-bottom:48px}
  /* Centred headings go left below 700px for the same reason the hero does:
     munimly's ledes run to three and four lines, and four centred lines on a
     334px column is a wall. */
  .sechead{align-items:flex-start;text-align:left;margin-bottom:44px}
  .closing{padding-top:68px;padding-bottom:76px}
}
/* The two hero CTAs fit a 412px viewport with about a pixel to spare, so
   whether they sit on one row or two depends on which font is rendering —
   which is a 68px layout shift the moment Manrope replaces the fallback, and
   the whole of this page's CLS. Stacking them below 480px makes the answer
   the same for every font. */
@media(max-width:480px){
  /* Stretch, not flex-start: two auto-width pills stacked left leave a ragged
     right edge that reads as an accident. Full-column width makes the stack a
     deliberate pair and gives each the whole column as a tap target.

     `align-self` as well as `align-items`: .heroblock switches to
     `align-items:flex-start` below 700px, so without it .cta shrink-wraps to
     its widest child and stretching the buttons inside only squares them up
     against each other, not against the column. */
  .hero .cta{flex-direction:column;align-items:stretch;align-self:stretch;gap:14px}
  /* Same overflow, same answer, for the closing pair — it is the same two
     buttons at the same widths, and flex-wrap alone was breaking them onto
     two centred rows with mismatched widths. No align-self here: .closing is
     text-align:center, not a flex container, so .cta is already a block-level
     box filling the column. */
  .closing .cta{flex-direction:column;align-items:stretch;gap:14px}
}
@media(max-width:640px){.doc{margin-top:44px}.doc table{table-layout:auto}.doc td{padding:11px 14px;font-size:13px}.doc th{padding:12px 14px 10px;font-size:10px}.doc-head{padding:13px 14px;font-size:11px}.docfoot{padding:13px 14px;font-size:11px}}

/* The Form II table is what the page is about, so it gets the fullest
   treatment: raised rim, card radius, and a hairline drawn as ::after so the
   edge reads as a cut rather than a border. */
.doc{position:relative;text-align:left;background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--rim-raised);overflow:hidden;max-width:780px;margin:64px auto 0}
.doc::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--rim-hair)}
.doc-head{display:flex;justify-content:space-between;gap:12px;padding:15px 22px;
  border-bottom:1px solid var(--hair-soft);font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);color:var(--body)}
.doc-head span:last-child{color:var(--faint)}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:var(--m-label);color:var(--faint);
  text-align:right;padding:13px 22px 11px;letter-spacing:.04em}
th:first-child{text-align:left}
td{font-size:var(--m-figure);padding:12px 22px;border-top:1px solid var(--hair-soft)}
.hl td{font-weight:500;color:var(--ink)}
.hl .num{font-weight:400}
.docfoot{padding:15px 22px;border-top:1px solid var(--hair-soft);
  font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);color:var(--faint)}
.docfoot b{color:var(--ink);font-weight:400}

/* The form list, as one surface object rather than a bare hairline table.
   Centred rhythm puts it in the full 1200px column, where a rule per row
   across that width reads as a spreadsheet; the panel gives it the rim and
   radius every other section carries, and holds it to the width of the hero
   document it is describing. */
.list{max-width:780px;margin:0 auto;padding:4px 24px;
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--rim);text-align:left}
.row{display:grid;grid-template-columns:92px 1fr;gap:20px;padding:17px 0;
  border-bottom:1px solid var(--hair-soft);align-items:baseline}
.row:last-child{border-bottom:0}
/* The 92px key column costs a third of a 278px content width, so below 560px
   the key becomes a line of its own above the label. */
@media(max-width:560px){
  .list{padding:4px 18px}
  .row{grid-template-columns:1fr;gap:6px;padding:15px 0}
}
.row .k{font-family:'IBM Plex Mono',monospace;font-size:var(--m-label);color:var(--faint);letter-spacing:.06em}
.row .t{font-size:var(--t-sub);color:var(--ink);font-weight:500}
.row .d{font-size:var(--t-small);color:var(--body);display:block;margin-top:2px;line-height:1.55}


/* ---- The card ----------------------------------------------------------
   The repeating object of the reference, and the thing every section below
   the hero is built from. Measured recipe, reproduced exactly except where
   noted:

     background  #fbf9f8                -> var(--surface)
     padding     20px 20px 24px         -> as measured
     radius      32px                   -> var(--r-card), 24px
     shadow      inset 0 -3px 4px       -> var(--rim), the -3px card variant
     layout      flex column, centred, gap 10px

   The inner blocks are pinned to 260px whatever the card's outer width, so
   the extra width becomes padding. That is the reference's own rule and the
   reason its four differently-sized cards have identical text measure. Below
   its breakpoint the spec relaxes the same blocks to `min(260px, 100%)`,
   which is what `width:100%; max-width:260px` does at every size here. */
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--surface);padding:20px 20px 24px;border-radius:var(--r-card);
  box-shadow:var(--rim)}
.card>*{width:100%;max-width:260px}

/* Header row: 260x36.41, gap 8, icon slot 32x32. */
.card-head{display:flex;align-items:center;gap:8px;min-height:36.41px}
.card-icon{flex:none;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;aspect-ratio:1/1;border-radius:var(--r-pill);
  border:1px solid var(--hair);
  font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--faint)}
/* The slot holds either a two-digit step number or a 17px glyph. */
.card-icon svg{width:17px;height:17px}
/* Reference title is 28px / 36.4px at wght 730. Manrope ships 400, 500 and
   800 here and nothing between, so 730 is not available: 800 is blacker than
   the reference at this size, 500 is the closer read. Size, line-height and
   the -0.25px tracking are exact. */
.card-head h3{flex:1 0 0;margin:0;font-size:28px;font-weight:500;
  line-height:1.3;letter-spacing:-.00893em;color:var(--ink)}

/* The dotted rule. The reference renders an SVG of viewBox 0 0 231 4 into a
   260x4.3 box at 35% opacity - hence the 60.4444/1 ratio, which is kept so the
   rule scales with the card rather than sitting at a fixed height. */
.card-rule{aspect-ratio:60.4444/1;opacity:.35;
  background-image:radial-gradient(circle at 1.5px 50%,var(--ink) 0 1.5px,transparent 1.6px);
  background-size:7.2px 100%;background-repeat:repeat-x}

/* Body: 17px / 25.5px, letter-spacing -0.2px. */
.card-body p{font-size:var(--t-body);line-height:1.5;letter-spacing:-.01176em;color:var(--body)}

/* ---- The card grid -----------------------------------------------------
   Reference stacks rows at gap 18px and sets cards 22px apart within a row,
   centring narrow clusters inside the wide section rather than stretching
   them to the column. Its cards run 300-332px wide and carry a +/-0.5 to 1
   degree tilt; three at 300px plus two 22px gaps is 944px, inside munimly's
   1024px of usable width. */
.cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:18px 22px}
.cards .card{flex:0 1 300px}
.cards .card:nth-child(odd){transform:rotate(-.5deg)}
.cards .card:nth-child(even){transform:rotate(.5deg)}
@media(max-width:820px){
  .cards .card{flex:1 1 100%}
  /* Tilt reads as a wobbling stack once the cards are full-width and edge to
     edge, so it comes off below the breakpoint. */
  .cards .card:nth-child(odd),.cards .card:nth-child(even){transform:none}
}

/* ---- Pricing -----------------------------------------------------------
   The plan card is the Chunk 4 card at a different inner measure: the
   reference pins benefit-card contents to 260px and plan-card contents to
   284px (324px wide less 20px padding either side), so `.plan` reuses `.card`
   whole and moves that one number.

   The footnote card is the reason `--r-inner` has been sitting unused since
   Chunk 1. The reference gives plan cards 32px and the footnote 24px; munimly
   maps 32 to `--r-card` (24px), so the footnote takes the same ratio down to
   `--r-inner` (18px) rather than matching the cards it sits under. */
/* One card, centred at the reference's 324px rather than stretched to the
   column. The 284px inner measure is unchanged. */
.plan{width:324px;max-width:100%;margin:0 auto}
.plan>*{max-width:284px}

.plan-head{display:flex;align-items:center;justify-content:center;gap:10px;min-height:36.41px}
.plan-head h3{margin:0;font-size:28px;font-weight:500;line-height:1.3;
  letter-spacing:-.00893em;color:var(--ink)}
.plan-icon{flex:none;width:30px;height:30px;aspect-ratio:1/1;color:var(--faint)}

/* Price block. 44px at weight 800 is the one place the reference's `zen-fv-800`
   lands on a weight Manrope actually ships, so this is exact rather than the
   500 the 730 headings settle for. */
.plan-price{display:flex;flex-direction:column;align-items:center;padding-bottom:4px}
.plan-amt{font-size:44px;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.plan-amt .cur{font-size:28px;font-weight:500;margin-right:2px;vertical-align:.06em}

.plan-feats{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.plan-feat{display:flex;align-items:flex-start;gap:10px;min-height:25.5px}
.plan-feat svg{flex:none;width:25px;height:25px;color:var(--faint);margin-top:.5px}
.plan-feat span{flex:1;font-size:var(--t-body);line-height:1.5;
  letter-spacing:-.01176em;color:var(--body)}

/* ---- Contact -----------------------------------------------------------
   The reference builds this as a postcard: one wide surface card split by a
   vertical rule, message on the left, address fields on the right, with a
   postage stamp, two clouds and a red rubber stamp that pops in on submit.
   The split card and the rimmed fields port; the theatre does not, and with
   it goes the stamp block that made the reference's right column 460px tall.
   So the card's height is set by the fields alone, and the textarea stretches
   to meet them rather than standing at the reference's 440px, which is most
   of a phone screen.

   There is no backend and no JS here: the form is a native `mailto:` post, so
   the browser validates `required` first and then hands the message to the
   reader's own mail client. Nothing is sent anywhere else, which is the same
   promise `/privacy` makes about analytics. */
.postcard{display:flex;align-items:stretch;gap:24px;
  max-width:840px;margin:0 auto;padding:24px;
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--rim)}
.pc-msg{flex:1 1 0;display:flex}
.pc-rule{flex:none;width:2px;border-radius:10px;background:var(--hair)}
.pc-side{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:12px}

/* Visible labels. The four labels used to be `.sr` spans, clipped to a pixel
   for assistive tech, which left the placeholder doing the visible labelling
   for everyone else — so removing a "redundant" placeholder would have left
   an unlabelled pill. Each label is now a real line above its field, and the
   placeholders that only repeated it are gone. The label sits on the field's
   own 24px text inset rather than its outer edge, so the two line up. */
.fieldrow{display:flex;flex-direction:column;gap:6px;min-width:0}
.flabel{padding-left:24px;font-size:var(--t-small);line-height:1.4;
  letter-spacing:-.00714em;color:var(--body)}
/* The message column is one tall field, so its row and its field both grow. */
.pc-msg .fieldrow,.pc-msg .field{flex:1 1 auto}

/* The field wrapper carries the rim and the state; the control inside is bare.
   That is the reference's own split, and it is why the focus ring can be a
   2px border rather than a browser outline sitting outside a pill. */
.field{position:relative;display:flex;align-items:center;overflow:hidden;
  background:rgba(40,50,100,.03);border-radius:var(--r-pill);box-shadow:var(--rim);
  transition:background var(--dur-hover) var(--ease-out)}
.field::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid var(--field-rim);
  transition:border-color var(--dur-hover) var(--ease-out)}
/* The spec never captured the focused state and says to infer a restrained
   one. This darkens the wash and takes the rim to the accent, so the field
   that has focus is the only accent-coloured object on screen. */
.field:focus-within{background:rgba(40,50,100,.055)}
.field:focus-within::after{border-color:var(--accent)}

.field input,.field textarea,.field select{
  flex:1 1 0;width:100%;min-width:0;margin:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:var(--t-body);line-height:1.53;
  letter-spacing:-.01176em;color:var(--ink)}
.field input,.field select{height:44px;padding:0 24px}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:1}
.field-area{align-items:stretch;border-radius:var(--r-inner)}
.field-area textarea{min-height:212px;padding:16px 24px;resize:vertical}

/* Native select chrome varies by OS, so it is replaced with the same chevron
   the secondary CTA draws. */
/* While the empty placeholder option is the one selected the select is
   :invalid, which is exactly the reference's greyed placeholder state. */
.field-select select{appearance:none;padding-right:46px}
.field-select select:invalid{color:var(--faint)}
.field-select::before{content:'';position:absolute;right:23px;top:50%;z-index:1;
  width:7px;height:7px;margin-top:-6px;pointer-events:none;transform:rotate(45deg);
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint)}
.pc-send{width:100%}

@media(max-width:820px){
  .postcard{flex-direction:column;gap:16px;padding:20px}
  /* The rule turns from a column divider into a horizontal one. */
  .pc-rule{width:auto;height:2px}
  .field-area textarea{min-height:150px}
}

/* FAQ accordion.

   The reference's row is a 52.5px object that grows to fit its answer, and
   that height is not a round number by accident: 12px top padding + a 28.5px
   header + a 6px gap + a 1px answer stub + 5px bottom padding. Opening it
   swaps the bottom padding to 16px and lets the answer take its content
   height, landing row 1 at 113.5px. Both numbers are reproduced here from the
   same parts rather than hard-coded, so a longer answer still behaves.

   The panel animates on `grid-template-rows: 0fr -> 1fr`, which is the only
   way to transition to an unknown content height without measuring it in JS.
   `.ain` carries the `overflow:hidden` that makes the 0fr row actually clip.

   No-JS parity, the same layering D2 established: the base rules leave every
   row open and readable, and the `.js` layer is what collapses them. A reader
   without JS loses the accordion, never the answers. */
.faq{display:flex;flex-direction:column;gap:13px;max-width:664px;margin:0 auto}
.qa{display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px 24px;
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--rim);overflow:hidden;
  transition:padding-bottom var(--dur-panel) var(--ease-out)}
/* The heading is the landmark; the button inside it is the control. */
.qh{margin:0;font:inherit}
.q{display:flex;align-items:center;gap:16px;width:100%;padding:0;
  background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);
  font-family:inherit;font-size:var(--t-lede);font-weight:500;line-height:1.5;letter-spacing:-.01053em}
.qt{flex:1}
/* 26x26 circled plus. 135deg turns the plus into a cross without touching the
   circle, which is the whole reason the reference uses this glyph. */
.qi{flex:none;width:26px;height:26px;color:var(--faint);
  transition:transform var(--dur-panel) var(--ease-out)}
.a{display:grid;grid-template-rows:1fr;min-height:1px;
  transition:grid-template-rows var(--dur-panel) var(--ease-out),opacity var(--dur-panel) var(--ease-out)}
.ain{overflow:hidden}
.a p{font-size:var(--t-body);line-height:1.5;letter-spacing:-.01176em;padding-right:8px}
.a p+p{margin-top:12px}

/* The .js layer: collapsed until asked. `visibility` is what keeps a collapsed
   answer out of the tab order (one of them carries a link); it flips instantly
   on open and only after the panel has finished closing. */
.js .qa{padding-bottom:5px}
.js .a{grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows var(--dur-panel) var(--ease-out),
             opacity var(--dur-panel) var(--ease-out),
             visibility 0s linear var(--dur-panel)}
.js .qa[data-open="true"]{padding-bottom:16px}
.js .qa[data-open="true"] .a{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows var(--dur-panel) var(--ease-out),
             opacity var(--dur-panel) var(--ease-out),
             visibility 0s}
.js .qa[data-open="true"] .qi{transform:rotate(135deg)}
.q:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* Same scaling as the hero: 120/128 against a 80px section becomes 96/104
   against a 64px one, so the closing keeps its extra weight without
   reopening the gap the rhythm just closed. */
.closing{text-align:center;padding-top:96px;padding-bottom:104px}
.closing h2{max-width:18ch;margin:0 auto}
.closing .cta{margin-top:34px}

main{flex:1 0 auto}
footer{padding:32px 0 60px;border-top:1px solid var(--hair-soft)}
/* align-items:center so the 36px copy pill sits on the mono row's midline
   rather than stretching to it. The :not(.copy) on both link rules matters:
   `.footrow a` outweighs `.copy`, so without it the pill would inherit the
   footer's colour transition and lose its own transform transition. */
.footrow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);color:var(--faint)}
.footrow a:not(.copy){text-decoration:none;transition:color .15s ease}
.footrow a:not(.copy):hover{color:var(--body)}
/* The pill carries the site's own font, not the footer's mono. */
.footrow .copy{font-family:'Manrope','Manrope Fallback',system-ui,sans-serif}

.legal{max-width:70ch}
.legal h2{font-size:var(--t-head);font-weight:500;letter-spacing:-.016em;line-height:1.3;margin:56px 0 4px}
.legal h2:first-of-type{margin-top:40px}
.legal h3{margin:26px 0 4px}
.legal p{font-size:var(--t-sub);line-height:1.75;margin-bottom:13px}
.legal ul,.legal ol{margin:0 0 13px 21px;color:var(--body);font-size:var(--t-sub);line-height:1.75}
.legal li{margin-bottom:6px}
.legal strong{color:var(--ink);font-weight:500}
.legal .n{font-family:'IBM Plex Mono',monospace;font-size:var(--m-label);color:var(--faint);
  letter-spacing:.1em;display:block;margin-top:56px}
.legal .n+h2{margin-top:4px}
.legal .sum{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:22px 0;margin:34px 0 0}
.legal .sum p{margin-bottom:8px}
.legal .sum p:last-child{margin-bottom:0}
.todo{font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);color:var(--body);
  background:var(--hair-soft);border:1px solid var(--hair);border-radius:4px;padding:1px 7px}
.legal .updated{font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);color:var(--faint);margin-top:18px}

.log{border-top:1px solid var(--hair);margin-top:44px;max-width:70ch}
.log .e{display:grid;grid-template-columns:112px 1fr;gap:22px;padding:17px 0;
  border-bottom:1px solid var(--hair-soft);align-items:baseline}
.log .d{font-family:'IBM Plex Mono',monospace;font-size:var(--m-meta);color:var(--faint);letter-spacing:.04em}
.log .t{font-size:var(--t-sub);color:var(--ink)}
@media(max-width:560px){.log .e{grid-template-columns:1fr;gap:3px}}

/* Entrance. Fires once on mount and never again: no parallax, no
   reveal-on-scroll, no header state change on scroll. The reference site
   animates eight elements at load and nothing thereafter, which is the
   restraint this page wants. Fill mode is `both`, so an element whose
   animation is switched off simply renders at its resting state. */
/* The nav pill keeps its fade: it is 467px of chrome, never an LCP candidate,
   and it is the one element the reference fades in over the page's own edge. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* The hero pair is transform only, no opacity — measured, not stylistic. Chrome does not treat
   an element painted at `opacity: 0` as a Largest Contentful Paint candidate,
   and does not reconsider it when the animation later makes it opaque. With
   the fade in place this page reported **no LCP at all** over a 2s window and
   Lighthouse could not compute a performance score; with the same animations
   run on transform alone, the h1 registers as LCP at 40ms. The hero is the
   largest thing on the page, so fading it in costs the metric that describes
   how fast the page feels. The scale and the travel carry the entrance. */
@keyframes lift{from{transform:translateY(24px)}to{transform:none}}
/* Reference entrance scales its whole content stack from 0.9. */
@keyframes settle{from{transform:scale(.9)}to{transform:none}}
.en-lift{animation:lift var(--dur-enter) var(--spring) both}
.en-settle{animation:settle var(--dur-enter) var(--spring) both}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Must out-specify `.js .qa[data-open] .a` (0,3,1), or the open row keeps
     its transition. Same weight, declared later, so it wins. */
  .js .qa[data-open="true"] .a,.js .a,.qa,.qi{transition:none}
  .pilllinks a,.pillcta,.pillcta::before,.btn,.btn::before,.btn2,.btn2::after{transition:none}
  /* .copyrow keeps its transform, loses only the travel: the swapped row is
     the only feedback a copy gives, so it must still land. */
  .copy,.copyrow{transition:none}
  .pillcta:hover,.btn:hover,.btn2:hover,.copy:hover{transform:none}
  .pillcta:hover::before,.btn:hover::before{transform:translateX(0) rotate(45deg)}
  .en-lift,.en-settle,.pill{animation:none}
  .pilltoggle span,.js .pilllinks{transition:none}
}