/* ============================================================
   ModLetter — marketing site, v5
   Six sections, not eight. Ground changes every section so the
   page has a rhythm instead of four card grids in a row, and the
   product's own UI does the selling.
   Light only, by design.
   ============================================================ */
:root{
  --white:#FFFFFF;
  --paper:#FDFCFB;
  --peach:#FCF2EB;
  --peach-deep:#F2CDB2;
  --peach-pale:#FEF9F5;
  --ink:#171717;
  --ink-2:#5C5350;
  --ink-3:#736762;
  --rule:#EFE7E1;
  --rule-2:#DFD2C9;
  --coral:#E0203A;
  --coral-deep:#B01128;
  --coral-tint:#FDECEE;
  --teal:#00707F;
  --teal-tint:#E2F1F2;
  --kraft:#8A4B00;
  --letter-brand:#26355C;
  /* Shadows are cast in the brand's own red rather than grey: on a warm
     paper ground a neutral shadow reads as dirt, a tinted one as light. */
  --shade:249,72,90;                    /* #F9485A */
  --lift:0 1px 2px rgba(var(--shade),.10), 0 18px 40px -20px rgba(var(--shade),.42);
  --lift-paper:0 1px 1px rgba(var(--shade),.12), 0 2px 6px rgba(var(--shade),.10), 0 34px 64px -26px rgba(var(--shade),.55);
  /* A pink nav dissolves into the craft bands and reads as a stray pink
     bar over the white sections, so the chip stays neutral — just warm
     enough to belong to the peach, light enough to sit on white. */
  --nav:#EFECEC;
  --lift-app:0 2px 6px rgba(var(--shade),.12), 0 28px 64px -26px rgba(var(--shade),.50);
  /* The parts of the page that belong to the printer, not to you.
     Cyan because it is the one hue nothing else on the sheet uses —
     it can never be mistaken for the letter's own ink or for a warning. */
  --reserved:rgba(63,169,188,.15);
  --reserved-line:#3FA9BC;
  --reserved-ink:#0A6272;
  /* on-ink scale — the page needed a bottom end, not a different hue */
  --ink-surface:#0D0C0C;
  --on-ink:#F6F2F0;
  --on-ink-2:#B9B2AF;
  --on-ink-3:#8E8683;
  --on-ink-kraft:#F0B9A0;
  --ink-line:rgba(255,255,255,.13);
}
*{box-sizing:border-box;}
/* A button or field does not inherit the page's face by default: the browser sets its own
   (Arial on a Mac), so the sector pills, the walkthrough tabs, the brand kits and the
   recipient arrows were all drawn in it until 22 Oct 2026. Every control takes the page's. */
button,input,select,textarea{font-family:inherit;}
html{scroll-behavior:smooth;}
body{
  background:var(--white); color:var(--ink); margin:0;
  font-family:"Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:17.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.024em;}
h1{font-size:clamp(2.5rem,4.2vw,3.8rem); font-weight:800; line-height:.97;}
h2{font-size:clamp(2rem,4.4vw,3.5rem); font-weight:700; line-height:1.02;}
h3{font-size:1.1rem; font-weight:600; letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--coral); outline-offset:3px; border-radius:2px;}

/* Skip to content (29 Oct 2026, site review; WCAG 2.4.1): the first thing Tab reaches on
   every page, out of sight until it is focused. main takes the focus (tabindex="-1"),
   so it draws no ring of its own. */
.skip{position:absolute; left:16px; top:12px; z-index:1000; transform:translateY(-200%);
      background:var(--ink); color:#fff; padding:10px 16px; border-radius:99px;
      font-weight:600; font-size:.95rem; text-decoration:none;}
.skip:focus, .skip:focus-visible{transform:none;}
#main:focus{outline:none;}

.wrap{max-width:1140px; margin:0 auto; padding-left:30px; padding-right:30px;}
.wrap--wide{max-width:1280px;}
.wrap--tight{max-width:940px;}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.lead{font-size:1.19rem; color:var(--ink-2); line-height:1.6; max-width:60ch;}

/* ---------- craft: ambient, animated, pushed back ---------- */
.page{position:relative; overflow-x:clip;}
.craftband{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
/* The craft used to be two page-wide washes at 70% white — an enormous amount
   of machinery for a faint tint. It now runs in two places only, at strength:
   one block behind the letter, and one full-bleed field under the demo. */
.stage-wrap{position:relative; width:100%; max-width:760px; margin:0 auto;}
/* The craft used to stop on a straight line, which read as a photograph
   cropped and pasted onto the page. Both fields are masked out to nothing at
   their edges instead, so the mosaic dissolves into the white rather than
   ending at it — there is no seam to see because there is no edge. */
.craftblock{
  /* The bleed is measured off the VIEWPORT, not off this block's containing box.
     `.stage-wrap` is capped at 760px, so the old `left:-26vw; right:-26vw` made the
     block 760px + 52vw wide — which covers the screen only while 760 + 0.52W >= W,
     i.e. up to a 1583px viewport. Past that the overhang stops keeping up and the
     mosaic ends on a hard line at the block's own edge, where this mask is still
     about 35% opaque, so it cuts instead of dissolving. Measured as white down both
     sides from 1600px up: 100px at 2000, 234px at 2560, 446px at 3440.

     Reported as "the paper pixel craft hero isn't going edge to edge". Note this was
     never a regression — the -26vw below fixed the NARROW end (the 540-870px crop the
     comment further down records) and wide viewports were simply never covered.

     The clamp's upper bound is not cosmetic. A flat 152vw also covers every width, but
     at a 3440px viewport that is a 5229px block, and Craft's backing store is
     min(dpr,2) — a 10,458px canvas, animated. Capping the bleed at 260px holds it to
     3960px and leaves the narrow end identical to what -26vw already gave.
     Verified 540-3440px: >=140px of overhang both sides at every width, and
     document.scrollWidth still equals the viewport at every one, so no sideways scroll
     is introduced. frontend/tools/craft-bleed-check.mjs is that measurement. */
  --craft-bleed:clamp(140px, 26vw, 260px);
  position:absolute; z-index:0; pointer-events:none; overflow:hidden;
  top:-58px; bottom:-64px; border-radius:0;
  left:calc(50% - 50vw - var(--craft-bleed)); right:auto;
  width:calc(100vw + var(--craft-bleed) * 2);
  /* Two masks, intersected. The radial alone left a hard TOP edge: the ellipse is
     53% tall about a centre at 48%, so the block's top row sits at r≈0.91 where the
     ramp is still ~22% opaque, and the mosaic stopped on a straight line across the
     middle 60% of the screen at every width. (The bottom row is at r≈0.98, ~4%,
     which is why only the top was ever seen — reported by Eoin, 24 Sep 2026.) The
     bleed check above measured the sides only; the vertical fade below is what
     brings the top and bottom rows to zero regardless of the ellipse's geometry.
     22% of the block is ~170px, so the mosaic is at full strength by the ruler and
     nothing below the partner switch changes. Measured before/after in
     craft-bleed-check.mjs: mean top-row step 1.5-2.5 luminance units across
     540-3440px before, 0.00 after. */
  -webkit-mask-image:
    radial-gradient(72% 53% at 50% 48%, #000 0%, #000 58%, rgba(0,0,0,.42) 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(72% 53% at 50% 48%, #000 0%, #000 58%, rgba(0,0,0,.42) 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 86%, transparent 100%);
  mask-composite:intersect;
}
.craftblock canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* Nothing but the opaque sheet sits on this block, so it barely needs a scrim —
   just enough to keep the right-hand edge from shouting. */
.scrim-block{position:absolute; inset:0; background:radial-gradient(58% 62% at 50% 46%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.26) 62%, rgba(255,255,255,.42) 100%);}
/* The bleed stays viewport-relative at every width. It used to drop to -8% below
   1059px, which is a percentage of the CONTAINING BLOCK rather than the screen — at a
   700px viewport that is 21px of overhang instead of 182px, so the radial mask finished
   fading while still inside the viewport and the mosaic ended at a visible edge partway
   across the page instead of dissolving past it. Reported as "the paper pixel craft was
   cropped on the left and right at a certain width"; measured as a visible boundary from
   540px to 870px. Keeping -26vw costs nothing: an ancestor clips the overhang, so
   document.scrollWidth still equals the viewport at every width tested and no sideways
   page scroll is introduced. */
.page > header, .page > main, .page > footer{position:relative; z-index:1;}
/* Rubber-band overscroll on a touch device paints the canvas background, and with no
   background on <html> the white from <body> propagates to it. So pulling past the end of
   the page showed WHITE below the black footer, and the footer read as detached from the
   bottom of the screen — invisible on a desktop browser, which does not bounce.
   Stopping the bounce is the fix that does not compromise either end: colouring the canvas
   to match the footer would put black above the hero at the top instead. Browsers without
   support simply ignore it and behave as they do today. */
html{overscroll-behavior-y:none;}
.craftband canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* The halftone is gone — at block scale a dot screen over a mosaic reads as
   Lego, not as print. Grain stays; it is the only thing that still says paper. */
.grain{position:absolute; inset:0; pointer-events:none;}
.grain{background-repeat:repeat; opacity:.13; mix-blend-mode:overlay;}
.scrim-hero{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.34) 0%, rgba(255,255,255,.50) 48%, rgba(255,255,255,.90) 88%, #fff 100%),
    linear-gradient(104deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.76) 40%, rgba(255,255,255,.32) 78%, rgba(255,255,255,.20) 100%);
}
/* The demo band is the page's anchor: the craft is allowed to be loudest here,
   because every piece of text in it sits on an opaque white panel. */
.scrim-band{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,.86) 0%, rgba(255,255,255,.30) 22%, rgba(255,255,255,.26) 78%, rgba(255,255,255,.86) 100%);}
.scrim-close{position:absolute; inset:0; background:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.76) 32%, rgba(255,255,255,.80) 70%, #fff 100%);}

/* ---------- nav ----------
   A floating white card rather than a bar welded to the page. It sits over the
   craft band, so it is translucent with a blur behind it — but only as far as
   the text above it can afford: at .90 the nav links still measure 6.9:1. */
.page > header.navbar{position:sticky; top:16px; z-index:50; margin-top:22px; max-width:870px;}
nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:10px 10px 10px 24px;
  /* Nothing at rest — see the note in the build script. Kept as rgba on the
     chip's own colour rather than `transparent` so the fade has somewhere to
     fade from in browsers that interpolate to transparent-black. */
  background:rgba(239,236,236,0);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  /* no outline, and the same 99px the buttons use — the bar reads as one more
     pill rather than as a panel with buttons parked inside it */
  border:0;
  border-radius:99px;
  box-shadow:none;
  transition:background .3s ease, box-shadow .3s ease,
             -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
@media (prefers-reduced-motion: reduce){ nav{transition:none;} }
/* Scrolled, or holding the phone menu open — either way there is page moving
   underneath and the bar needs its own ground to stay readable. */
.navbar.is-stuck nav,
.navbar.is-open nav{
  background:rgba(239,236,236,.92);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);
  backdrop-filter:saturate(1.5) blur(12px);
  box-shadow:0 1px 2px rgba(var(--shade),.05), 0 12px 32px -20px rgba(var(--shade),.5);
}
@media (prefers-reduced-motion: reduce){ nav{transition:none;} }
/* The lockup: the mark, then the logotype, from Eoin's master files (27 Oct 2026).
   They are two boxes because the mark folds in 3D (landing.js, "THE MARK"), and an
   SVG's insides cannot. So the scale the artwork is drawn at is held by ONE height:
   --lh is both the mark's side and the logotype's height, the logotype's viewBox is
   the master lockup's full height (0 to 132.66), and the gap is the master's own,
   55.37/132.66 of the mark (seo.test.js holds all three). 21px keeps the capitals the
   16px they were in the old lockup. The type stands where the mark's bottom corners
   begin to round, with the mark's weight centred on the capitals: Eoin's alignment. */
.logo{--lh:21px; display:flex; align-items:center; width:max-content; justify-self:start; color:var(--ink); text-decoration:none;}
.logo-svg{display:block; height:var(--lh); width:auto; fill:currentColor; flex:none;}
.mk{position:relative; display:block; flex:none; width:var(--lh); height:var(--lh); --sheen:rgba(255,255,255,.26);}
.logo .mk{margin-right:calc(var(--lh) * .4174);}
.mk svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; fill:currentColor;}
.mk-slide{position:absolute; inset:0; display:block;}
.mk.mk-clip{overflow:hidden;}
/* the footer's mark, white on the coral: its sheen darkens instead. Its ™ (Eoin's footer
   master, 27 Oct 2026) stands off the mark's top right corner, outside the mark's box, so
   the mark stays centred and the ™ does not fold or travel with it: 8.3/132.66 of the mark
   above its top, 14.86/132.66 wide — 2px tall at 38px, the nav lockup's ™ to the pixel. */
.foot-l .logo{--lh:38px; position:relative;}
.foot-l .logo .mk{margin-right:0; --sheen:rgba(0,0,0,.16);}
.mk-tm{position:absolute; display:block; left:100%; top:calc(var(--lh) * -.0626); width:calc(var(--lh) * .112); height:auto; fill:currentColor;}
.navlinks{display:flex; gap:28px; font-size:.94rem; color:var(--ink-2); flex-wrap:wrap;}
.navlinks a{text-decoration:none;}
.navlinks a:hover{color:var(--coral);}
.navbar .btn-primary{padding:10px 20px;}
.navend{display:flex; align-items:center; gap:20px;}
.signin{font-size:.94rem; color:var(--ink-2); text-decoration:none; white-space:nowrap;}
.signin:hover{color:var(--coral);}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
  padding:11px 22px; border-radius:99px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none; font-family:inherit; transition:transform .14s ease, background .14s ease;
}
.btn-primary{background:var(--coral); color:#fff;}
.btn-primary:hover{background:var(--coral-deep); transform:translateY(-1px);}
/* Filled coral is reserved for the one action we are asking for — signing up.
   An in-demo control that wears the same weight competes with it and, worse,
   implies the same kind of commitment. Same colour, outlined: present, clearly
   ours, obviously not the conversion. */
.btn-outline{
  border-color:var(--coral); color:var(--coral-deep); background:transparent;
}
.btn-outline:hover{background:var(--coral-tint); border-color:var(--coral-deep);}
.btn-quiet{border-color:var(--rule-2); color:var(--ink); background:rgba(255,255,255,.78);}
.btn-quiet:hover{background:var(--peach-pale);}
.btn-lg{padding:14px 28px; font-size:1rem;}

/* ---------- the two dark moments ----------
   Not dark mode. Two committed ink surfaces so the page has a bottom end to
   its value range and the white sheets read as paper rather than as holes. */
.sec--ink{ background:var(--ink-surface); color:var(--on-ink); }
.sec--ink h2{ color:#FFFFFF; }
.sec--ink .eyebrow{ color:var(--on-ink-kraft); }
.sec--ink .lead{ color:var(--on-ink-2); }
.sec--ink .btn-quiet{ border-color:rgba(255,255,255,.28); color:var(--on-ink); background:rgba(255,255,255,.06); }
/* light islands inside a dark section reset the whole scale */
.sec--ink .runcard{ color:var(--ink-2); }
.sec--ink .runcard .run-stat b{ color:var(--ink); }
.sec--ink .runcard .run-stat.ok b{ color:var(--teal); }
.sec--ink .runcard .run-stat.bad b{ color:var(--coral); }
.sec--ink .runcard td.who{ color:var(--ink); }
.sec--ink .runcard .run-foot b{ color:var(--ink); }
.sec--ink .runcard .btn-quiet{ border-color:var(--rule-2); color:var(--ink); background:var(--white); }
.sec--ink .runcard .btn-quiet:hover{ background:var(--peach-pale); }
.sec--ink .btn-quiet:hover{ background:rgba(255,255,255,.12); }

/* ---------- centred layout ----------
   The page reads down the middle: heads centred on a 62ch measure, the
   artefact centred under them, and the instruments arranged symmetrically
   around it rather than hanging off one side. */
.mid{text-align:center; margin-left:auto; margin-right:auto;}
.mid .lead{margin-left:auto; margin-right:auto;}
.sec-head.mid{align-items:center; max-width:64ch;}

/* ---------- section shells ---------- */
.sec{position:relative; scroll-margin-top:104px;}
.sec-inner{position:relative; z-index:1;}
.sec-head{display:flex; flex-direction:column; gap:15px;}
.sec-head .lead{color:var(--ink-2);}

/* ============================================================
   1 · HERO — the editor itself, not a picture of a letter
   ============================================================ */
.hero{padding-top:56px; padding-bottom:96px;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:44px; justify-items:center;}
@media (min-width:1060px){ .hero-grid{gap:52px;} }
.hero h1 em{font-style:normal; color:var(--coral);}
.nb{white-space:nowrap;}
.hero .lead{margin-top:22px; margin-left:auto; margin-right:auto;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; align-items:center; justify-content:center;}
.hero-fine{font-size:.87rem; color:var(--ink-3); margin-top:16px;}
.verticals{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--rule-2); max-width:44ch; margin-left:auto; margin-right:auto;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); line-height:2;
}

/* ---------- the sheet IS the frame ----------
   No window chrome, no title bar, no fake application shell. A single sheet of
   A4 sitting on the page, with the product's own instruments floating on and
   around it: a millimetre rule along two edges, the partner's reserved window
   drawn where it really falls, and the pre-flight results pinned into the
   letter's own white space. */
/* The widest stock any partner uses (US Letter, 215.9mm) sets the stage; each
   sheet then takes its own real fraction of that. This is the whole reason the
   partner switch is trustworthy: A4 and US Letter differ in width as well as
   height, so 1cqw is the same physical distance on every sheet and every
   measurement inside the letter stays true without being recalculated. */
.stage{position:relative; padding:26px 0 0 26px; width:100%; max-width:442px; margin:0 auto; --tick:10.4px;}
.paper{position:relative; container-type:inline-size; width:100%; transition:width .35s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion: reduce){ .paper{transition:none;} }
.stage .sheet{box-shadow:var(--lift-paper);}

.stage-rule-h, .stage-rule-v{position:absolute; opacity:.9;}
.stage-rule-h{
  top:12px; left:26px; right:0; height:10px;
  background-image:repeating-linear-gradient(to right, var(--rule-2) 0 1px, transparent 1px var(--tick));
  background-position:bottom; background-repeat:repeat-x;
  border-bottom:1px solid var(--rule-2);
}
.stage-rule-v{
  left:-14px; top:0; bottom:0; width:10px;
  background-image:repeating-linear-gradient(to bottom, var(--rule-2) 0 1px, transparent 1px var(--tick));
  background-position:right; background-repeat:repeat-y;
  border-right:1px solid var(--rule-2);
}
.stage-mm{
  position:absolute; top:0; left:26px; font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--coral-deep);
}

/* floating instruments */
/* The hint that pointed at the letterhead stood in this gap until the hero became the
   letter check (30 Oct 2026); the partners now sit straight over the ruler. */
.tagrow + .stage{margin-top:18px;}
.tagrow{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:14px;
}
/* The partners' own marks, taken to one grey. Optical sizing, not
   mathematical: a wordmark and a stamp block at the same box height do not
   read at the same weight, so each is set to the height it needs. */
.tagrow button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:99px; background:rgba(255,255,255,.94); color:var(--ink-3);
  border:1px solid var(--rule-2); box-shadow:0 2px 10px -4px rgba(var(--shade),.45); backdrop-filter:blur(3px);
  cursor:pointer; --stamp-knockout:#FFFFFF;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.tagrow button:hover{color:var(--ink-2); border-color:var(--ink-3);}
.tagrow button.on{background:var(--ink); border-color:var(--ink); color:#F2EEEC; --stamp-knockout:#171717;}
.plogo{display:block; width:auto; fill:currentColor;}
.pl-docmail{height:11px;}
.pl-lob{height:14px;}
.pl-stannp{height:16px;}
.pl-pingen{height:14px;}
/* Four marks since Pingen (28 Oct 2026): on a phone the row is a few pixels too wide for
   the stage, and the fourth wrapped onto a line of its own. Each mark a little smaller and
   the pills a little tighter, so the four stay one row. */
@media (max-width:480px){
  .tagrow{gap:4px;}
  .tagrow button{padding:7px 10px;}
  .pl-docmail{height:10px;} .pl-lob{height:12px;} .pl-stannp{height:14px;} .pl-pingen{height:12px;}
}
/* 44px to touch (29 Oct 2026, site review; WCAG 2.5.5): the partner buttons are drawn
   30px tall and the recipient arrows 26px square. Each keeps the size it is drawn at; a
   transparent box around it takes the touch — the buttons' height only, so two side by
   side never share one. */
.tagrow button{position:relative;}
.tagrow button::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);}

/* The pre-flight cards: under the sheet, or beside it where there is a gutter (below). */
.tagcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-top:36px;}
/* From 1000px the stack stands in the right gutter, beside the sheet's foot and clear
   of it. It used to overhang the corner on purpose — in front of the paper, not printed
   on it — but in front of the paper was over the footer and the size caption (UI/UX
   review 30 Oct 2026, finding 13). Narrower, there is no gutter wide enough, and it
   follows the sheet. */
@media (min-width:1000px){
  .tagcards{
    position:absolute; left:calc(100% + 28px); right:auto; bottom:0; z-index:4; margin:0;
    width:240px; grid-template-columns:1fr; gap:7px;
  }
  .tagcards .tagcard{
    padding:9px 13px; gap:9px; border-radius:8px; border-color:rgba(23,23,23,.06);
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 1px 2px rgba(var(--shade),.14), 0 16px 34px -14px rgba(var(--shade),.70);
  }
  .tagcards .tagcard b{font-size:.82rem; line-height:1.25;}
  .tagcards .tagcard i{width:7px; height:7px; margin-top:5px;}
  /* Floating over the page, the stack has to stay shorter than the empty part
     of the letter. A passing check earns one line; the one that is failing
     earns the space to say why, and so does any card you point at. */
  .tagcards .tagcard span{font-size:12px; margin-top:3px; display:none;}
  .tagcards .tagcard.warn span,
  .tagcards .tagcard:hover span,
  .tagcards .tagcard:focus-within span{display:block;}
}
.tagcard{
  display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start;
  background:rgba(255,255,255,.95); border:1px solid var(--rule); border-radius:7px;
  padding:9px 12px; box-shadow:0 3px 16px -6px rgba(23,23,23,.34); backdrop-filter:blur(3px);
}
.tagcard i{width:7px; height:7px; border-radius:50%; margin-top:5px; display:block; background:var(--teal);}
.tagcard b{display:block; font-size:.78rem; font-weight:600; line-height:1.3;}
.tagcard span{display:block; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); line-height:1.4; margin-top:2px;}

/* Under 900px the annotations stop overlapping and simply follow the sheet,
   because a card hanging off the edge of a 320px sheet is unreadable. */
@media (max-width:900px){
  .stage{padding-left:20px;}
  .stage-rule-h{left:20px;} .stage-rule-v{left:-12px;} .stage-mm{left:20px;}
  .tagcard{backdrop-filter:none;}
}


/* ---------- the paper reacts ----------
   The sample letter you dragged and typed into is gone (30 Oct 2026): the hero's sheet
   is the letter check's now, its rules at the end of this file. */

.tagcard i.warn{ background:var(--coral); }
.tagcard.warn b{ color:var(--coral-deep); }

/* the paper itself — grain, so it reads as stock rather than a white div */
.sheet{ background-blend-mode:multiply; background-size:150px 150px; }
.s-conf{
  position:absolute; right:9.52%; font-family:"Source Sans 3",sans-serif; font-size:1.05cqw;
  letter-spacing:.14em; text-transform:uppercase; color:#6B615C;
}
.s-page{
  position:absolute; left:9.52%; bottom:2.6cqw; font-family:"Source Sans 3",sans-serif;
  font-size:1.02cqw; color:#6B615C; letter-spacing:.05em;
}

/* ---------- the A4 sheet (shared by hero, demo and diagram) ---------- */
.sheet-stage{position:relative; container-type:inline-size;}
.sheet{
  position:relative; aspect-ratio:210/297; background:var(--paper);
  border:1px solid #E6DED8; border-radius:2px; box-shadow:var(--lift-paper);
  font-family:Georgia,"Times New Roman",serif; color:#1D1B1A; overflow:hidden;
}
.sheet--flat{box-shadow:0 1px 2px rgba(23,23,23,.06);}
/* Every letter used to wear the same rule above the letterhead, which made
   six templates look like one template with the words changed. The rule is a
   per-template choice now: heavy, hairline, or absent. --rule-h:0 removes it. */
.sheet::before{
  content:""; position:absolute; top:5.4cqw; left:9.52cqw; right:9.52cqw;
  height:var(--rule-h,.62cqw); background:var(--letter-brand);
}
.sheet::after{
  content:""; position:absolute; left:0; right:0; top:33.33%; height:1px;
  background:linear-gradient(to right, rgba(23,23,23,0), rgba(23,23,23,.055) 12%, rgba(23,23,23,.055) 88%, rgba(23,23,23,0));
}
.s-head{position:absolute; top:7.2cqw; left:9.52cqw; right:9.52cqw; display:flex; justify-content:space-between; align-items:flex-start; gap:4cqw; box-sizing:border-box;}
/* a US letterhead sits top-right with the address beneath it, which happens to
   be exactly the shape that clears Lob's window */
.s-head.is-stack{flex-direction:column; align-items:flex-end; gap:1.4cqw; text-align:right;}
.s-head.is-stack .s-contact{text-align:right;}
.s-head.is-stack .s-org{text-align:right;}
.sheet--live .s-head{padding-bottom:1.6cqw; border-bottom:1px solid #DCD3CD;}
.sheet--live > .s-hr{display:none;}
.s-org{font-family:Georgia,serif; font-weight:700; font-size:2.45cqw; line-height:1.1; color:var(--letter-brand);}
/* The kit's mark, inside the org lockup. currentColor, so it takes
   --letter-brand from .s-org above and needs no second variable — which is also
   what makes a kit change one property rather than two. */
.s-org .s-mark{display:inline-block; width:2.5cqw; height:2.5cqw; margin-right:.75cqw; vertical-align:-.28cqw;}
.s-org .s-mark:empty{display:none;}
.s-org .s-mark svg{display:block; width:100%; height:100%;}
.s-org small{display:block; font-family:"Source Sans 3",sans-serif; font-weight:400; font-size:1.28cqw; letter-spacing:.09em; text-transform:uppercase; color:#6E635E; margin-top:.45cqw;}
.s-contact{font-family:"Source Sans 3",sans-serif; font-size:1.34cqw; line-height:1.62; color:#6C625E; text-align:right; white-space:nowrap;}
.s-hr{position:absolute; left:9.52cqw; right:9.52cqw; top:15.1cqw; height:1px; background:#DCD3CD;}
.s-win{position:absolute; font-size:1.82cqw; line-height:1.52; color:#1D1B1A;}
.s-win .nm{font-weight:600;}
.s-doc{position:absolute; left:9.52cqw; right:9.52cqw; top:45.5cqw;}
.s-meta{font-family:"Source Sans 3",sans-serif; display:flex; justify-content:space-between; gap:3cqw; font-size:1.42cqw; line-height:1.6; color:#6C625E;}
.s-meta b{color:#2A2624; font-weight:600;}
.s-subj{font-family:Georgia,serif; font-size:1.9cqw; font-weight:700; color:#141414; margin:3.4cqw 0 2.6cqw; line-height:1.35;}
.s-body{font-size:1.82cqw; line-height:1.62; color:#232120; display:flex; flex-direction:column; gap:1.7cqw;}
/* A merge field drawn as the editor draws it (.fchip in styles.css): its name in words, ink
   on the chip ground, square-ended — a field is state, not the coral (UI/UX review 30 Oct
   2026, finding 8: the hero said {{first_name}} in red, which the editor no longer shows). */
.s-tok{background:#e6ded8; color:inherit; border-radius:1px; padding:0 .12em; white-space:nowrap;}
.s-sign{margin-top:3cqw; font-size:1.82cqw; line-height:1.6; color:#232120;}
.s-scribble{width:20cqw; height:6cqw; margin:.6cqw 0 .3cqw -.6cqw; color:#2B3F66;}
.s-scribble svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.s-foot{
  font-family:"Source Sans 3",sans-serif; position:absolute; left:9.52cqw; right:9.52cqw; bottom:5.7cqw;
  padding-top:var(--foot-pad,1.5cqw); border-top:var(--foot-rule,1px solid #E4DBD5);
  font-size:1.12cqw; line-height:1.55; color:#6C625E; text-align:var(--foot-align,left);
}
.sheet--foot-none{--foot-rule:0; --foot-pad:0;}
.sheet--foot-centre{--foot-align:center;}

/* the provider's reserved window, drawn over the sheet */
.zone{
  position:absolute; border:1px dashed var(--reserved-line); background:var(--reserved);
  border-radius:1px; transition:left .35s cubic-bezier(.22,1,.36,1), top .35s cubic-bezier(.22,1,.36,1),
              width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1);
}
.zone em{
  position:absolute; top:1.6cqw; left:2.2cqw; font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:1.5cqw; line-height:1.5; color:var(--reserved-line); opacity:.55; letter-spacing:-.05em;
}
.zone b{
  position:absolute; top:-1.9cqw; left:0; font-family:"IBM Plex Mono",monospace; font-size:1.05cqw;
  letter-spacing:.08em; color:var(--reserved-ink); white-space:nowrap; font-weight:500;
}
.zone-bar{position:absolute; background:var(--reserved); box-shadow:inset 1px 0 0 var(--reserved-line), inset -1px 0 0 var(--reserved-line);
  transition:all .35s cubic-bezier(.22,1,.36,1);}
/* a collision is the only thing on the sheet allowed to go red */
.zone.is-hit{border-color:var(--coral); border-style:solid; background:rgba(224,32,58,.09);}
.zone.is-hit b, .zone.is-hit em{color:var(--coral);}
/* Coral all round once ink is in it: Pingen's corner is a box, not a column. */
.zone-bar.is-hit{background:rgba(224,32,58,.09); box-shadow:inset 0 0 0 1.5px var(--coral);}
.zone-bar.is-hit b{color:var(--coral);}
.zone-bar b{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-90deg);
  font-family:"IBM Plex Mono",monospace; font-size:1.05cqw; letter-spacing:.1em; color:var(--reserved-ink); white-space:nowrap;
}
/* Lob fills its whole box (24 Oct 2026): return address at the top, recipient and postal
   barcode lower, drawn by landing.js fillSvg() in page millimetres. The blacked-out lines
   are the other partners' specimen (.zone em) in shapes; the labels are the zone label's. */
.zone.is-fill em{display:none;}
/* over the zone's 1px dashed border, so the drawing is the box itself, edge to edge */
.zone .zfill{position:absolute; left:-1px; top:-1px; width:calc(100% + 2px); height:calc(100% + 2px); overflow:visible; color:var(--reserved-line);}
.zone .zfill .zf-ln, .zone .zfill .zf-bar{fill:currentColor; opacity:.55;}
.zone .zfill .zf-stars{fill:currentColor; opacity:.55; font:2.822px Helvetica, Arial, sans-serif;}
.zone .zfill .zf-lbl{fill:var(--reserved-ink); font:500 2.27px "IBM Plex Mono", monospace; letter-spacing:.08em; text-anchor:end;}
.zone.is-hit .zfill{color:var(--coral);}
.zone.is-hit .zfill .zf-lbl{fill:var(--coral);}
@media (prefers-reduced-motion: reduce){ .zone, .zone-bar{transition:none;} }

/* ============================================================
   2 · THE DEMO — the page's anchor. Full bleed, craft at full
   strength, white panels floating on it.
   ============================================================ */
.band{padding-top:96px; padding-bottom:96px;}
.demo-head{max-width:64ch; margin:0 auto 44px; text-align:center;}
.demo-head .lead{margin-inline:auto;}
.run-head.mid{margin-left:auto; margin-right:auto;}
/* Every section below the hero used to be a two-column split, which is why
   the page went heavy the moment you left the fold. One centred column, the
   same measure throughout, and the mobile layout is the desktop layout with
   less width — not a second design. */

/* ---------- the sector switch ---------- */
.sectorrow{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px;
  max-width:920px; margin:0 auto 26px;   /* five sectors, each with its letter, on one row from 1024 up */
}
.sect{
  font-size:.86rem; font-weight:500; color:var(--ink-2); cursor:pointer;
  background:var(--white); border:1px solid var(--rule-2); border-radius:99px;
  padding:8px 16px; white-space:nowrap;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.sect:hover{color:var(--ink); border-color:var(--ink-3);}
.sect.on{background:var(--ink); border-color:var(--ink); color:var(--white);}
.sect:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}
/* Each sector names the letter it shows, quieter than the sector itself. The words
   are in the HTML (landing.html's sector row), so crawlers read them too. */
.sect small{font-size:.78rem; font-weight:400; color:var(--ink-3); margin-left:3px;}
.sect:hover small{color:var(--ink-2);}
.sect.on small{color:var(--on-ink-2);}

/* ---------- the editor's blocks, on the page ----------
   Every one of these is a real block type from the editor's registry, drawn at
   the same scale the letter is: a statement genuinely needs an itemised table
   and a summons genuinely needs a side label, which is the honest reason six
   sectors is six templates rather than six pieces of copy. */
.s-rows{
  margin-top:2.6cqw; border-top:1px solid #DCD3CD; border-bottom:1px solid #DCD3CD;
  font-family:"Source Sans 3",sans-serif;
}
.s-rows > div{
  display:flex; justify-content:space-between; gap:3cqw; align-items:baseline;
  padding:1.15cqw 0; border-bottom:1px solid #EFE9E4; font-size:1.5cqw;
}
.s-rows > div:last-child{border-bottom:none;}
.s-rows span{color:#6C625E;}
.s-rows b{font-weight:600; color:#1D1B1A;}

.s-table{
  width:100%; border-collapse:collapse; margin-top:2.6cqw;
  font-family:"Source Sans 3",sans-serif; font-size:1.5cqw;
}
.s-table td{padding:1.1cqw 0; border-bottom:1px solid #EFE9E4; color:#3A3330;}
.s-table td:last-child{text-align:right; font-variant-numeric:tabular-nums; color:#1D1B1A;}
.s-table tr:first-child td{border-top:1px solid #DCD3CD;}
.s-table .tot td{border-top:1.5px solid #B9AEA6; border-bottom:none; font-weight:700; padding-top:1.3cqw;}

.s-bar{margin-top:3cqw; display:flex; flex-direction:column; gap:.9cqw; align-items:flex-start;}
.s-bar .bx{width:46cqw;}
.s-bar--qr .bx{width:15cqw;}
.s-bar .bx svg{display:block; width:100%; height:auto;}
/* The encoders paint the quiet zone white, as the product's render does, so a code
   on a tinted panel still scans. On paper that white is invisible; on this page's
   warm, grained "paper" it drew a white box (Eoin, 24 Oct 2026). Here only, the
   quiet zone is clear space rather than white — the space itself is unchanged. */
.s-bar .bx svg > rect:first-child{fill:transparent;}
.s-bar span{font-family:"Source Sans 3",sans-serif; font-size:1.12cqw; color:#6C625E; letter-spacing:.04em;}
.bx-empty{
  display:block; font-family:"Source Sans 3",sans-serif; font-size:1.3cqw; color:var(--coral);
  border:1px dashed var(--coral); padding:1.2cqw 1.6cqw; border-radius:.4cqw;
}

.s-side{
  position:absolute; right:3.1cqw; top:30%; writing-mode:vertical-rl;
  font-family:"Source Sans 3",sans-serif; font-size:1.25cqw; letter-spacing:.22em;
  text-transform:uppercase; color:#8A7F79;
}
.s-return{
  font-family:"Source Sans 3",sans-serif; font-size:1.28cqw; line-height:1.6; color:#6C625E;
  margin-bottom:2cqw;
}
[data-v].is-empty{color:var(--coral);}

/* ---------- five companies, five templates (24 Oct 2026) ----------
   Eoin: "the different companies should visually change". They were one
   template with the words changed — one Georgia letterhead, one mark, the
   colour on a rule. Each company is its own template now: its face, its
   letterhead's shape, its mark, and where it puts its colour. Within a company
   nothing moves from recipient to recipient, as in the product.

   Every face is one the product prints — Arial, Times New Roman and Open Sans
   are built-ins; Source Sans 3, Bricolage Grotesque and Geist are Google faces,
   served from /fonts — and site-claims.test.js holds each to that. Nothing here
   enters the printer's zones: the letterheads end above the 45.4mm window and
   right of the 13mm column. */
.sheet[class*="look-"] .s-org,
.sheet[class*="look-"] .s-org small,
.sheet[class*="look-"] .s-contact,
.sheet[class*="look-"] .s-meta,
.sheet[class*="look-"] .s-subj,
.sheet[class*="look-"] .s-rows,
.sheet[class*="look-"] .s-table,
.sheet[class*="look-"] .s-bar span,
.sheet[class*="look-"] .s-return,
.sheet[class*="look-"] .s-foot,
.sheet[class*="look-"] .s-side,
.sheet[class*="look-"] .s-sign{font-family:inherit;}
.sheet[class*="look-"] .s-org{display:flex; align-items:center; gap:1.4cqw;}
.sheet[class*="look-"] .s-org .s-mark{flex:none; margin:0; vertical-align:0;}
.sheet[class*="look-"] .s-name{display:block;}
.s-table .hd td{font-size:1.25cqw; letter-spacing:.06em; text-transform:uppercase; color:#6C625E; border-top:0; padding-bottom:.8cqw;}

/* Insurance — Quillon Mutual. Arial. A corporate lockup: the seal reversed out
   of a navy disc, the name in spaced capitals, a heavy navy rule above; the
   premium table under a navy header row. */
.sheet.look-insurance{font-family:Arial,"Liberation Sans",Helvetica,sans-serif;}
.sheet.look-insurance .s-org{font-size:2.15cqw; letter-spacing:.14em; text-transform:uppercase;}
.sheet.look-insurance .s-org .s-mark{width:5.2cqw; height:5.2cqw; padding:1.1cqw; border-radius:50%; background:var(--letter-brand); color:#fff;}
.sheet.look-insurance .s-org small{letter-spacing:.02em; text-transform:none; font-size:1.3cqw; color:#5B6676; margin-top:.5cqw;}
.sheet.look-insurance .s-subj{font-size:2.05cqw; color:var(--letter-brand);}
.sheet.look-insurance .s-body{font-size:1.72cqw;}
.sheet.look-insurance .s-table tr:first-child td{border-top:0;}
.sheet.look-insurance .s-table .hd td{background:var(--letter-brand); color:#fff; padding:1cqw 1.4cqw;}
.sheet.look-insurance .s-table td{padding-left:1.4cqw; padding-right:1.4cqw;}
.sheet.look-insurance .s-table .tot td{background:#E9EEF4; border-top:0; color:var(--letter-brand);}

/* Lending — Brightwater Credit. Open Sans. The contact block top left and a
   lowercase wordmark top right; the subject reversed out of a berry band, the
   sums in a tinted panel with a berry edge, the payment barcode boxed. */
.sheet.look-lending{font-family:"Open Sans","Liberation Sans",Arial,sans-serif;}
.sheet.look-lending > .s-hr{display:none;}
.sheet.look-lending .s-contact{text-align:left;}
.sheet.look-lending .s-org{font-size:3.1cqw; font-weight:400; letter-spacing:-.02em; color:#5C5350; gap:1cqw;}
.sheet.look-lending .s-org b{color:var(--letter-brand); font-weight:700;}
.sheet.look-lending .s-org .s-mark{width:4.4cqw; height:4.4cqw; color:var(--letter-brand);}
.sheet.look-lending .s-org small{text-align:right; letter-spacing:.04em; text-transform:none; font-size:1.25cqw; margin-top:.3cqw;}
.sheet.look-lending .s-subj{background:var(--letter-brand); color:#fff; padding:.9cqw 2cqw; font-size:1.85cqw; margin:2.6cqw 0 2.2cqw;}
.sheet.look-lending .s-body{font-size:1.7cqw;}
.sheet.look-lending .s-rows{background:#F8EEF2; border:0; border-left:.8cqw solid var(--letter-brand); padding:.2cqw 2.2cqw;}
.sheet.look-lending .s-rows > div{padding:.85cqw 0;}
.sheet.look-lending .s-rows > div{border-bottom-color:#EBD7DF;}
.sheet.look-lending .s-bar{border:1px solid #E2CBD4; padding:.9cqw 1.4cqw; display:inline-flex;}
.sheet.look-lending .s-bar .bx{width:38cqw;}
.sheet.look-lending .s-foot{border-top:.3cqw solid var(--letter-brand);}

/* Housing — Harbourline Homes. Source Sans 3, the name in Bricolage Grotesque.
   A friendly lockup — the roof mark and the name stacked large — with the
   contact details in a green-tinted panel; the rent table on tinted rows. */
.sheet.look-housing{font-family:"Source Sans 3","Liberation Sans",Arial,sans-serif;}
.sheet.look-housing > .s-hr{display:none;}
.sheet.look-housing .s-org{font-family:"Bricolage Grotesque","Liberation Sans",Arial,sans-serif; font-size:3.3cqw; font-weight:800; line-height:.92; letter-spacing:-.03em; gap:1.6cqw;}
.sheet.look-housing .s-org .s-mark{width:7.4cqw; height:7.4cqw;}
.sheet.look-housing .s-org small{font-family:"Source Sans 3",sans-serif; letter-spacing:.12em; font-size:1.15cqw; margin-top:1cqw; color:var(--letter-brand); font-weight:600;}
.sheet.look-housing .s-contact{background:#EAF3EC; color:#2E4436; padding:1.4cqw 2cqw; text-align:left; line-height:1.55;}
.sheet.look-housing .s-subj{font-family:"Bricolage Grotesque","Liberation Sans",Arial,sans-serif; font-size:2.5cqw; font-weight:800; letter-spacing:-.02em; color:var(--letter-brand);}
.sheet.look-housing .s-body{font-size:1.86cqw;}
.sheet.look-housing .s-table td{padding:1.1cqw 1.6cqw; border-bottom:2px solid #fff;}
.sheet.look-housing .s-table tr:not(.hd) td{background:#F1F7F2;}
.sheet.look-housing .s-table tr:first-child td{border-top:0;}
.sheet.look-housing .s-table .tot td{background:#DCEBDF; border-top:0; color:var(--letter-brand); font-size:1.7cqw;}
.sheet.look-housing .s-foot{color:var(--letter-brand);}

/* Legal — Ashdown Pryce Solicitors. Times New Roman. A centred letterhead in
   spaced capitals over a double rule, no mark; the subject in capitals,
   underlined, as a letter before claim is headed. */
.sheet.look-legal{font-family:"Times New Roman","Liberation Serif",Times,serif;}
.sheet.look-legal > .s-hr{display:none;}
.sheet.look-legal .s-head{flex-direction:column; align-items:center; text-align:center; gap:1.2cqw; padding-bottom:1.6cqw; border-bottom:.6cqw double #2A2420;}
.sheet.look-legal .s-org{font-size:2.9cqw; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:#1D1B1A; justify-content:center;}
.sheet.look-legal .s-org small{font-size:1.2cqw; letter-spacing:.42em; color:var(--letter-brand); margin-top:.8cqw;}
.sheet.look-legal .s-contact{text-align:center; font-size:1.3cqw; color:#5C5350;}
.sheet.look-legal .s-subj{text-transform:uppercase; letter-spacing:.06em; text-decoration:underline; text-underline-offset:.4cqw; font-size:1.75cqw;}
.sheet.look-legal .s-body{font-size:1.92cqw; line-height:1.55;}
.sheet.look-legal .s-side{letter-spacing:.3em; color:#5C5350;}
.sheet.look-legal .s-bar span{font-style:italic; letter-spacing:0;}
.sheet.look-legal .s-foot{font-style:italic;}

/* Pensions — Hollinmere. Geist. A lowercase wordmark beside an amber dot, a
   short amber bar where the others have a rule, a large plain subject, and the
   value the statement exists to give, set large in amber. */
.sheet.look-pensions{font-family:"Geist","Liberation Sans",Arial,sans-serif;}
.sheet.look-pensions::before{right:auto; width:9cqw;}
.sheet.look-pensions > .s-hr{display:none;}
.sheet.look-pensions .s-org{font-size:3.6cqw; font-weight:800; letter-spacing:-.05em; color:#141414; gap:1.1cqw;}
.sheet.look-pensions .s-org .s-mark{width:4cqw; height:4cqw; color:var(--letter-brand);}
.sheet.look-pensions .s-org small{font-size:1.2cqw; font-weight:500; letter-spacing:.02em; text-transform:none; margin-top:.5cqw;}
.sheet.look-pensions .s-subj{font-size:2.6cqw; font-weight:600; letter-spacing:-.03em; line-height:1.15;}
.sheet.look-pensions .s-body{font-size:1.7cqw;}
.sheet.look-pensions .s-table tr:first-child td{border-top:0;}
.sheet.look-pensions .s-table td{border-bottom-color:#ECE6E1;}
.sheet.look-pensions .s-table .tot td{border-top:1px solid #141414; font-size:1.55cqw; vertical-align:baseline;}
.sheet.look-pensions .s-table .tot td:last-child{font-size:3.1cqw; color:var(--letter-brand); letter-spacing:-.03em;}
.sheet.look-pensions .s-bar--qr .bx{width:12cqw;}
.sheet.look-pensions .s-foot{color:#857B76;}
.demo-grid{display:grid; grid-template-columns:1fr; gap:26px; align-items:start; max-width:840px; margin-inline:auto;}
.demo-letter{display:flex; justify-content:center;}
/* The hero's size (Eoin, 24 Oct 2026: "the letter size used for the Write section
   is huge"). At 560px it was 792px tall — more than a laptop's window — and 40%
   larger than every other sheet on the page. 405px is the hero's sheet, which is
   clicked and typed into at that size too. */
.demo-letter .sheet-stage{width:100%; max-width:405px; position:relative;}
.demo-inputs{display:grid; grid-template-columns:1fr; gap:18px;}
@media (min-width:720px){ .demo-inputs{grid-template-columns:1fr 1fr; align-items:start;} }
.demo-inputs .panel + .panel{margin-top:0;}

/* The pager is navigation, so it sits above the page. The checks are about
   the page, so they sit ON it — as a strip across the bottom, which is the
   one direction a letter has room in. */
#tvPager{
  margin:0 auto 14px; gap:4px; align-items:center; width:max-content;
  padding:4px 6px; border-radius:99px; background:var(--white);
  box-shadow:0 2px 10px -6px rgba(var(--shade),.55);
}
#tvPager .pg-btn{width:26px; height:26px; border:0; background:transparent; position:relative;}
#tvPager .pg-btn::after{content:""; position:absolute; inset:-9px;}   /* 26 + 2 × 9 = 44 to touch */
#tvPager .pg-lbl{font-size:12px; padding:0 4px;}
/* ---------- the fields ARE the interface ----------
   A merge field on the page is a small object you can see, move and remove.
   It shows the token, never a plausible-looking value, when nothing is behind
   it — the same rule the product ships. */
.mf{
  display:inline; border-radius:2px; padding:0 .18cqw; background:rgba(38,53,92,.10);
  box-shadow:0 0 0 .16cqw rgba(38,53,92,.10); color:#1B2748; font-weight:600;
  cursor:default; transition:background .15s ease, box-shadow .15s ease;
}
.mf:hover, .mf:focus-visible{ background:rgba(38,53,92,.19); box-shadow:0 0 0 .3cqw rgba(38,53,92,.19); outline:none; }
.mf.is-empty{ background:var(--coral-tint); box-shadow:0 0 0 .16cqw var(--coral-tint); color:var(--coral-deep); }
.mf.just-in{ animation:mfin .7s ease-out; }
@keyframes mfin{ from{ background:rgba(224,32,58,.34); box-shadow:0 0 0 .7cqw rgba(224,32,58,.20); } }
.s-body.is-target{ box-shadow:inset 0 0 0 2px var(--coral); border-radius:3px; }

/* The tray rode the bottom of the viewport (position: sticky) while the page
   was 790px tall, because the letter and the tray could not both be on screen
   and a field could not be dragged from one to the other. At the hero's size
   they can: the letter's body to the tray's foot is 586px, inside a
   779px laptop window under the nav. And riding there it sat on the bottom
   146px of the letter and on every check card (driven at 1440x779, 24 Oct
   2026). So it stays under the letter now. */
.fieldtray{
  position:relative; z-index:6;
  margin:26px auto 0; max-width:540px; text-align:center; scroll-margin-top:120px;
  padding:14px 20px 16px; border-radius:14px;
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 1px 2px rgba(var(--shade),.12), 0 18px 40px -18px rgba(var(--shade),.60);
}
.fieldtray .eyebrow{margin-bottom:8px;}
.tray-sub{margin-top:6px; font-size:.86rem; color:var(--ink-3); line-height:1.5;}
.tray-sub code{font-family:"IBM Plex Mono",monospace; font-size:.92em; color:var(--kraft);}
.tray-h{font-size:.98rem; font-weight:600; color:var(--ink); margin-bottom:13px; letter-spacing:-.01em;}
.tray-note{margin-top:14px; font-size:.83rem; color:var(--ink-2); max-width:46ch; margin-inline:auto; text-align:center;}
@media (max-width:900px){
  .fieldtray{position:static; background:none; box-shadow:none; backdrop-filter:none; padding:0;}
}
.tray-row{display:flex; flex-wrap:wrap; gap:9px; justify-content:center;}
.tchip{
  display:inline-flex; align-items:center; gap:8px; cursor:grab;
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink);
  background:var(--white); border:1px solid var(--rule-2); border-radius:99px;
  padding:8px 15px; box-shadow:0 2px 10px -6px rgba(var(--shade),.55);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.tchip i{width:6px; height:6px; border-radius:50%; background:#26355C; flex:none;}
.tchip.is-unknown i{background:var(--coral);}
.tchip em{font-style:normal; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.tchip:hover:not(:disabled){transform:translateY(-2px); border-color:var(--ink-3); box-shadow:0 6px 16px -8px rgba(var(--shade),.75);}
.tchip:active:not(:disabled){cursor:grabbing;}
.tchip:disabled{opacity:.5; cursor:default; box-shadow:none;}
.tchip:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

/* The checks stand beside the letter's foot, in the gutter, as the hero's do (30 Oct
   2026, after UI/UX review finding 13; Eoin's rule for the boards, 15 Sep: nothing drawn
   covers anything else). Floating over the page they sat on Insurance's footer at 560px,
   and at the hero's size on Lending's footer and its barcode too; from 24 Oct they hung
   out from the lower right corner over the 20mm right margin, still over the sheet's
   edge. Below 1000px there is no gutter wide enough, and they follow the sheet. */
.demo-letter.is-dragging .checks{pointer-events:none;}
.demo-letter .checks{
  position:absolute; z-index:4; left:calc(100% + 28px); bottom:0; width:240px;
  margin:0; padding:0; background:none; border:0; box-shadow:none;
  display:grid; gap:7px;
}
.demo-letter .chk{
  display:grid; grid-template-columns:auto 1fr; align-items:start; gap:9px;
  padding:9px 13px; border:0; border-radius:8px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(var(--shade),.14), 0 16px 34px -14px rgba(var(--shade),.70);
}
.demo-letter .chk-dot{width:7px; height:7px; margin-top:5px;}
.demo-letter .chk-t{font-size:.82rem; line-height:1.25;}
.demo-letter .chk-n{font-size:12px; line-height:1.4; display:none; margin-top:3px;}
/* only a check that is failing spends the space to explain itself */
.demo-letter .chk.is-warn .chk-n, .demo-letter .chk:hover .chk-n{display:block;}
@media (max-width:999px){
  .demo-letter .checks{position:static; width:auto; margin-top:16px;}
  .demo-letter .chk-n{display:block;}
}
.panel{background:var(--white); border:1px solid var(--rule); border-radius:6px; overflow:hidden; box-shadow:0 1px 2px rgba(23,23,23,.04);}
.panel + .panel{margin-top:22px;}
.panel-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 17px 9px; border-bottom:1px solid var(--rule); background:transparent;
}
.panel-h .t{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--kraft);}
.panel-h .n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums;}

.ed{position:relative; height:206px;}
.ed-hl, .ed-ta{
  margin:0; padding:15px 17px; border:0; box-sizing:border-box;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; line-height:1.66;
  letter-spacing:0; white-space:pre-wrap; overflow-wrap:break-word; tab-size:2;
}
.ed-hl{position:absolute; inset:0; overflow:hidden; pointer-events:none; color:var(--ink-2);}
.ed-ta{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; color:transparent; caret-color:var(--coral); resize:none; overflow:auto;}
.ed-ta:focus{outline:none;}
.ed:focus-within{box-shadow:inset 0 0 0 2px var(--ink-3);}
.fld{border-radius:2px; padding:1px 0;}
.fld.ok{background:var(--teal-tint); color:#00545F; box-shadow:0 0 0 2px var(--teal-tint);}
.fld.bad{background:var(--coral-tint); color:var(--coral-deep); box-shadow:0 0 0 2px var(--coral-tint); text-decoration:underline wavy var(--coral); text-underline-offset:3px;}
.chips{display:flex; flex-wrap:wrap; gap:7px; padding:13px 17px; border-top:1px solid var(--rule);}
.chip{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:5px 10px; border-radius:99px; border:1px solid var(--rule-2); color:var(--ink-2); background:var(--white);}
.chip.ok{border-color:#9CCBD1; background:var(--teal-tint); color:#00545F;}
.chip.bad{border-color:#F0A8B2; background:var(--coral-tint); color:var(--coral-deep);}
.chip.dim{color:var(--ink-3);}
.csv-ta{
  display:block; width:100%; height:132px; margin:0; padding:15px 17px; border:0; resize:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; line-height:1.72;
  color:var(--ink-2); background:var(--white); white-space:pre; overflow:auto;
}
.csv-ta:focus{outline:none; box-shadow:inset 0 0 0 2px var(--coral);}

.stagebar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.pg-btn{width:32px; height:32px; border-radius:99px; border:1.5px solid var(--rule-2); background:var(--white); color:var(--ink); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.pg-btn:hover:not(:disabled){background:var(--peach-pale); border-color:var(--ink-3);}
.pg-btn:disabled{opacity:.38; cursor:not-allowed;}
.pg-lbl{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.pg-lbl b{color:var(--ink);}
.prov-row{display:flex; gap:7px; flex-wrap:wrap; margin-left:auto;}
@media (max-width:620px){ .prov-row{margin-left:0; width:100%;} }
.prov{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  padding:7px 12px; border-radius:99px; border:1.5px solid var(--rule-2); background:var(--white);
  color:var(--ink-2); cursor:pointer; font-weight:500;
}
.prov[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--white);}
.checks{background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:4px 17px; margin-top:22px; box-shadow:0 1px 2px rgba(23,23,23,.04);}
.chk{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule); align-items:start;}
.chk:last-child{border-bottom:none;}
.chk-dot{width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none;}
.chk-dot.ok{background:var(--teal);} .chk-dot.warn{background:var(--coral);} .chk-dot.info{background:var(--kraft);}
.chk-t{font-weight:600; font-size:.92rem;}
.chk-n{font-size:.85rem; color:var(--ink-2); line-height:1.5; margin-top:2px;}
.chk-n b{color:var(--coral-deep);}
.chk-n code{font-family:"IBM Plex Mono",monospace; font-size:.92em; background:var(--peach-pale); padding:1px 4px; border-radius:2px;}
.nudge{margin-top:2px; font-size:.88rem; color:var(--kraft); text-align:center;}
.nudge code{font-family:"IBM Plex Mono",monospace; font-size:.9em; background:var(--white); border:1px solid var(--peach-deep); padding:2px 6px; border-radius:3px; color:var(--ink);}

/* ============================================================
   3 · WHAT IT CATCHES — an annotated sheet and a numbered
   sequence. Deliberately not four boxes.
   ============================================================ */
.catch-sec{padding-top:104px; padding-bottom:104px;}
/* Promise, then the annotated letter, then the four points — the diagram is
   evidence for a claim, so it cannot arrive before the claim. */
.catch-grid{display:contents;}
.catch-sec .sec-inner{display:flex; flex-direction:column; gap:36px; max-width:840px; margin-inline:auto;}
.catch-figure{order:2;}
.catch-head{order:1;}
.catch-list{order:3;}
.catch-head{text-align:center;}
.catch-head .lead{margin-inline:auto;}
.catch-grid .sheet-stage{max-width:392px; margin-inline:auto;}
.diagram-note{text-align:center;}
.catch-list{max-width:640px; margin-inline:auto; width:100%;}
.catch-head h2{font-size:clamp(2.2rem,5vw,3.9rem);}
.catch-list{display:flex; flex-direction:column; border-top:1px solid var(--rule);}
.catch-item{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--rule); align-items:start;}
.catch-item .n{
  width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--coral-tint); color:var(--coral-deep); margin-top:2px;
}
.catch-item .n svg{width:19px; height:19px; display:block; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.catch-item h3{font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:700; line-height:1.16; letter-spacing:-.02em;}
.catch-item p{margin-top:9px; color:var(--ink-2); font-size:.98rem; line-height:1.55;}
.pin{
  position:absolute; width:20px; height:20px; border-radius:50%; background:var(--coral); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(224,32,58,.4); z-index:3;
}
.diagram-note{margin-top:16px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); line-height:1.7;}

/* ============================================================
   4 · REVIEW — the round between the page and the post. The
   reviewer page, reduced: the PDF on the left, the outline and
   the comments on the right. Same card language as the run.
   ============================================================ */
.review-sec{padding-top:96px; padding-bottom:96px;}
.review-sec .sec-head{margin-inline:auto; margin-bottom:38px;}
.rvcard{
  max-width:960px; margin-inline:auto;
  background:var(--white); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:var(--lift);
}
.rv-top{
  display:flex; align-items:baseline; gap:8px 18px; flex-wrap:wrap; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--rule); background:var(--peach-pale);
}
.rv-name{font-weight:700; color:var(--ink); letter-spacing:-.01em;}
.rv-meta{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--kraft);}
.rv-cols{display:grid; grid-template-columns:1fr;}
@media (min-width:760px){ .rv-cols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);} .rv-paper{border-right:1px solid var(--rule); border-bottom:none;} }
/* The paper: a sheet in a grey viewer, the way a browser shows a PDF. */
.rv-paper{padding:22px; background:#E9E4E0; border-bottom:1px solid var(--rule);}
.rv-sheet{
  background:var(--white); padding:26px 28px 30px; margin-inline:auto; max-width:400px;
  box-shadow:0 1px 2px rgba(var(--shade),.14), 0 14px 30px -18px rgba(var(--shade),.55);
  font-family:Georgia,"Times New Roman",serif; color:#2B2522; font-size:12.5px; line-height:1.5;
}
.rv-lh{font-family:"Source Sans 3",sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#6C625E; margin-bottom:16px;}
.rv-h{font-weight:700; font-size:14px; margin-bottom:10px; letter-spacing:-.01em;}
.rv-p{margin:0 0 9px;}
/* The block a thread points at, marked on the paper the moment it is posted. */
.rv-p.is-anchored{
  box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--coral); border-radius:2px;
  transition:box-shadow .3s ease;
}
.rv-p.is-resolved{ box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--teal); }
.rv-side{padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px;}
.rv-you{font-size:.9rem; color:var(--ink-2);}
.rv-you b{color:var(--ink);}
.rv-hint{color:var(--ink-3); font-size:.82rem;}
.rv-new{display:flex; flex-direction:column; gap:10px;}
.rv-field{display:flex; flex-direction:column; gap:5px;}
.rv-field > span{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--kraft);
}
.rv-field select, .rv-field textarea{
  font-family:inherit; font-size:.92rem; color:var(--ink); line-height:1.45;
  padding:9px 11px; border:1px solid var(--rule-2); border-radius:8px; background:var(--white); width:100%;
}
.rv-field textarea{resize:vertical; min-height:72px;}
.rv-field select:focus-visible, .rv-field textarea:focus-visible{outline:2px solid var(--coral); outline-offset:1px;}
.btn-sm{padding:8px 16px; font-size:.86rem; align-self:flex-start;}
#rvPost[disabled]{opacity:.5; cursor:default;}
.rv-threads{display:flex; flex-direction:column; gap:10px;}
.rv-empty{font-size:.86rem; color:var(--ink-3); line-height:1.5;}
.rv-band{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--kraft);
  display:flex; align-items:center; gap:8px; margin-top:4px;
}
.rv-band b{
  font-family:"Bricolage Grotesque",sans-serif; font-size:12px; letter-spacing:0; color:var(--ink);
  background:var(--peach); border-radius:99px; padding:1px 8px;
}
.rv-thread{
  border:1px solid var(--rule); border-radius:10px; padding:12px 14px 12px; background:var(--white);
  display:flex; flex-direction:column; gap:8px; animation:settle .5s ease;
}
.rv-thread.resolved{background:var(--peach-pale);}
.rv-anchor{
  font-size:.82rem; color:var(--ink-2); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.rv-anchor b{color:var(--ink);}
.rv-anchor .badge{margin-left:auto;}
.rv-who{display:flex; align-items:baseline; gap:8px; font-size:.86rem;}
.rv-who b{color:var(--ink);}
.rv-who time{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3);}
.rv-body{font-size:.92rem; color:var(--ink); line-height:1.5;}
.rv-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.rv-actions .who{font-size:.78rem; color:var(--ink-3);}
@media (prefers-reduced-motion: reduce){ .rv-thread{animation:none;} .rv-p.is-anchored{transition:none;} }

/* ============================================================
   5 · A RUN — the send lifecycle, which was invisible before
   ============================================================ */
.run-sec{
  padding-top:96px; padding-bottom:96px;
  background:linear-gradient(to bottom, var(--white) 0%, var(--peach) 8%, var(--peach) 92%, var(--white) 100%);
}
.run-head{display:flex; flex-direction:column; gap:14px; max-width:62ch; margin-bottom:38px;}
/* The one photograph on the page. Full measure, generous ratio, and a caption
   that says what it is rather than describing it — the picture is doing the
   describing. */
.shot{margin:0 0 34px; max-width:720px; margin-inline:auto;}
.shot img{
  display:block; width:100%; height:auto; border-radius:10px;
  box-shadow:0 1px 2px rgba(var(--shade),.12), 0 26px 54px -26px rgba(var(--shade),.60);
}
.runcard{background:var(--white); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:var(--lift);}
.run-top{display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rule);}
.run-line{font-size:1.02rem; color:var(--ink-2); line-height:1.5;}
.run-line b{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.28rem; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.run-line #rSent{color:var(--teal);}
.run-bad{display:block; margin-top:2px;}
.run-bad b{color:var(--coral);}
.tablewrap{overflow-x:auto;}
table.run{border-collapse:collapse; width:100%; min-width:520px; font-size:14px;}
table.run th{
  text-align:left; padding:10px 22px; background:var(--peach-pale); border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--kraft); font-weight:500; white-space:nowrap;
}
table.run td{padding:12px 22px; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2);}
table.run tr:last-child td{border-bottom:none;}
table.run td.who{color:var(--ink); font-weight:600; white-space:nowrap;}
table.run td.addr{font-family:"IBM Plex Mono",monospace; font-size:12px; white-space:nowrap;}
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:99px; white-space:nowrap;
}
.badge i{width:6px; height:6px; border-radius:50%; display:block;}
.badge.sent{background:var(--teal-tint); color:#00545F;} .badge.sent i{background:var(--teal);}
.badge.failed{background:var(--coral-tint); color:var(--coral-deep);} .badge.failed i{background:var(--coral);}
.badge.not{background:var(--peach-pale); color:var(--kraft); border:1px solid var(--peach-deep);} .badge.not i{background:var(--kraft);}
.badge.busy{background:var(--peach); color:var(--kraft);} .badge.busy i{background:var(--kraft); animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}
tr.settled{animation:settle .5s ease;}
@keyframes settle{from{background:var(--teal-tint);} to{background:transparent;}}
@media (prefers-reduced-motion: reduce){ .badge.busy i{animation:none;} tr.settled{animation:none;} }
#rRetry[disabled]{opacity:.5; cursor:default;}
.run-why{font-size:12.5px; color:var(--ink-3); line-height:1.45;}
.run-foot{padding:18px 22px; border-top:1px solid var(--rule); background:var(--peach-pale); font-size:.9rem; color:var(--ink-2); text-align:center;}
.run-foot b{color:var(--ink);}

/* ============================================================
   6b · WALKTHROUGHS — one player, ten tabs in two rows
   The tabs are the sector pills (.sect), because they are the same kind of
   control as the sector switch in "Write". The first row is the demo and the
   features, the second the letters; both are one tablist (landing.html), so the
   rows are only spacing here. The facade is the thumbnail served
   from here; the YouTube iframe that replaces it on play fills the same 16:9
   box, so pressing play moves nothing on the page. The Play pill sits under the
   thumbnail's title, on its left edge, rather than over the words.
   ============================================================ */
.walk-sec{padding-top:96px; padding-bottom:96px;}
.walk-head{margin-bottom:30px;}
.walk-tabs{margin-bottom:22px; scroll-margin-top:104px;}   /* a /#legal link lands with both rows under the nav (landing.js) */
.walk-tabs .sect{scroll-margin-top:104px;}
.walk-row{margin:0 auto; max-width:none;}
.walk-row + .walk-row{margin-top:7px;}
/* No tab is left on a line by itself. From 420px both rows are grids, a column as wide as
   its widest pill: the features two to a line, three from 600px and all six from 1200px,
   where the tabs stand wider than the column (1080px at most) so the six fit; the letters
   two to a line, all four from 800px. Below 420px they wrap as the sector row does. Below
   600px the pills are 8px narrower, so two go to a line on a phone. */
@media (max-width:599px){
  .walk-tabs .sect{padding-left:12px; padding-right:12px;}
}
@media (min-width:420px){
  .walk-row--features, .walk-row--letters{display:grid; grid-template-columns:repeat(2, auto); justify-content:center;}
}
@media (min-width:600px){
  .walk-row--features{grid-template-columns:repeat(3, auto);}
}
@media (min-width:800px){
  .walk-row--letters{grid-template-columns:repeat(4, auto);}
}
@media (min-width:1200px){
  .walk-tabs{--walk-w:min(1080px, calc(100vw - 60px)); width:var(--walk-w); margin-left:calc((100% - var(--walk-w)) / 2);}
  .walk-row--features{grid-template-columns:repeat(6, auto);}
}
.walk-frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--rule); border-radius:12px;
  background:var(--peach); box-shadow:var(--lift);
}
.walk-frame img, .walk-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.walk-frame img{object-fit:cover;}
.walk-facade{position:absolute; inset:0; display:block; border-radius:12px;}
.walk-facade:focus-visible{outline:3px solid var(--coral); outline-offset:-3px;}
.walk-play{
  position:absolute; left:5.6%; bottom:9%;
  display:inline-flex; align-items:center; gap:9px;
  height:48px; padding:0 22px 0 17px; border-radius:99px;
  background:var(--coral); color:var(--white);
  font-size:1rem; font-weight:600; letter-spacing:.01em;
  box-shadow:0 12px 28px -12px rgba(var(--shade),.95);
  transition:background .15s ease, transform .15s ease;
}
.walk-play svg{width:17px; height:17px; flex:none;}
.walk-facade:hover .walk-play{background:var(--coral-deep); transform:translateY(-1px);}
.walk-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:14px 2px 0; font-size:.98rem; line-height:1.45;}
.walk-title{font-weight:600; color:var(--ink);}
.walk-dur{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.walk-yt{margin-left:auto; font-size:.92rem; color:var(--coral-deep); text-decoration:underline; text-underline-offset:3px;}
.walk-yt:hover{color:var(--ink);}
.walk-note{margin:6px 2px 0; font-size:.84rem; color:var(--ink-3);}
@media (max-width:759px){
  .walk-sec{padding-top:70px; padding-bottom:70px;}
  .walk-frame, .walk-facade{border-radius:9px;}
  .walk-play{height:38px; padding:0 15px 0 12px; gap:7px; font-size:.9rem; left:4.5%; bottom:7%;}
  .walk-play svg{width:14px; height:14px;}
  .walk-yt{margin-left:0;}
}
@media (prefers-reduced-motion: reduce){ .walk-play{transition:none;} }

/* ============================================================
   6 · PRICING — one compact block, not three tall cards
   ============================================================ */
.price-sec{padding-top:96px; padding-bottom:96px;}
.price-head{display:flex; flex-direction:column; gap:14px; margin-bottom:36px;}
.tiers{display:grid; grid-template-columns:1fr; border:1px solid var(--rule); border-radius:10px; overflow:hidden;}
@media (min-width:800px){ .tiers{grid-template-columns:repeat(3,1fr);} }
.tier{padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--rule); background:var(--white);}
@media (min-width:800px){ .tier{border-bottom:none; border-right:1px solid var(--rule);} .tier:last-child{border-right:none;} }
.tier.feature{background:var(--peach-pale);}
.tier .nm{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--kraft);}
/* min-height, so one card wrapping to two lines does not drop its price off the
   baseline the other two share — the prices are what the eye compares. */
.tier .who{margin-top:-6px; min-height:2.8em; /* two lines exactly, so a one-line subtitle holds the price level with a two-line one */ font-size:.88rem; line-height:1.4;
           color:var(--ink-3);}
.tier .pr{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:2.3rem; line-height:1; letter-spacing:-.03em;}
.tier .pr small{font-size:.85rem; font-weight:400; color:var(--ink-3); letter-spacing:0;}
.tier .plus{margin:0 0 -4px; font-size:.8rem; font-weight:600; color:var(--ink-3);}
.tier ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-size:.9rem; color:var(--ink-2);}
/* Every point is the same shape (3 Oct 2026): a bold line saying what, a quiet line saying
   how much or what it means — one line each, so the three cards read as one grid.
   A hairline between points, none after the last (Eoin, 5 Oct 2026): 12px either side of
   it, the gap the points had before; the rows still line up across the three cards.
   28px from the last point to the button, the card's own bottom padding, so the button
   sits in even space. */
.tier ul{gap:0; margin-bottom:16px;}
.tier li{padding:12px 0;}
.tier li:first-child{padding-top:0;}
.tier li:last-child{padding-bottom:0;}
.tier li + li{border-top:1px solid var(--rule-2);}
.tier li{display:grid; grid-template-columns:5px 1fr; column-gap:10px; align-items:start;}
.tier li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--coral); margin-top:8px; grid-row:1 / span 2;}
.tier li b{font-weight:600; color:var(--ink); line-height:1.35; white-space:nowrap;}
.tier li span{font-size:.8rem; line-height:1.35; color:var(--ink-3);}
.tier .btn{margin-top:auto;}

.price-note{margin-top:20px; font-size:.9rem; color:var(--ink-3); max-width:62ch; margin-inline:auto; text-align:center;}


/* Scan tracking, under the record of what was posted (29 Oct 2026: moved here, word for
   word, when the "What happens next" section was cut). The pill says "Now on Pro" and sits
   above the sentence, with the privacy link on its own line — a claim, what it costs the
   recipient, and where that is written down. */
.run-qr{max-width:58ch; margin:30px auto 0; font-size:.9rem; color:var(--ink-3);
        display:flex; flex-direction:column; align-items:center; gap:12px;
        text-align:center; line-height:1.6;}
.run-qr b{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.13em;
          text-transform:uppercase; color:var(--coral-deep); flex:none; line-height:1.3;
          border:1px solid var(--rule-2); border-radius:99px; padding:3px 9px;}
.run-qr a{color:var(--coral-deep);}

/* ---------- FAQ ----------
   The disclosure element rather than scripted accordions: it opens without
   JavaScript, it
   is in the accessibility tree already, and browser find-in-page can reach a
   closed answer. */
.faq-sec{padding-top:96px; padding-bottom:104px;}
.faq{max-width:760px; margin:44px auto 0;}
.faq-item{border-bottom:1px solid var(--rule);}
/* the first question needs no rule above it — the heading is the rule */
.faq-item:first-child summary{padding-top:0;}
.faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:22px 2px; cursor:pointer; list-style:none;
  font-size:clamp(1.05rem,1.7vw,1.24rem); font-weight:700; letter-spacing:-.015em; line-height:1.3;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--coral-deep);}
.faq-item summary:focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:4px;}
.faq-item summary i{
  flex:none; width:20px; height:20px; margin-top:3px; position:relative;
}
.faq-item summary i::before,
.faq-item summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--coral);
  transform:translate(-50%,-50%); transition:transform .22s ease, opacity .22s ease;
}
.faq-item summary i::before{width:14px; height:2px;}
.faq-item summary i::after{width:2px; height:14px;}
.faq-item[open] summary i::after{transform:translate(-50%,-50%) scaleY(0); opacity:0;}
.faq-a{padding:0 2px 24px; max-width:64ch;}
.faq-a p{color:var(--ink-2); line-height:1.65;}
.faq-more{margin-top:26px; text-align:center; font-size:.92rem; color:var(--ink-3);}
.faq-more a{color:var(--coral-deep);}
@media (prefers-reduced-motion: reduce){ .faq-item summary i::before, .faq-item summary i::after{transition:none;} }
@media (max-width:759px){ .faq-sec{padding-top:70px; padding-bottom:76px;} }

/* ============================================================
   8 · CLOSE
   ============================================================ */
.close-sec{padding-top:120px; padding-bottom:128px; text-align:center; background:var(--ink-surface); position:relative; overflow:hidden;}
.close-sec::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:120%; background:radial-gradient(58% 52% at 50% 20%, rgba(255,214,218,.13), rgba(255,214,218,0) 70%); pointer-events:none;}
.close-in{display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; z-index:1;}
.close-in h2{max-width:18ch;}
.close-in p{max-width:52ch; color:var(--on-ink-2);}
.close-nums{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; margin-top:8px;
}
.close-nums span{
  display:flex; align-items:baseline; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-ink-3);
}
.close-nums b{
  font-family:"Bricolage Grotesque",sans-serif; font-size:2rem; font-weight:800;
  letter-spacing:-.03em; color:var(--on-ink); font-variant-numeric:tabular-nums;
}
.close-fine{font-size:.84rem; color:var(--on-ink-3) !important;}

/* ---------- footer ---------- */
/* The footer used to continue the closing panel, and the two read as one
   black slab with a hairline through it. It is the brand red now — the only
   full-bleed coral on the page, spent once, at the end, under the mark. No
   border-top: the colour change is the edge.
   White on #E0203A is 4.73:1, and that is the whole budget. White at 95%
   already fails AA (4.38:1), so the three on-ink tiers collapse to one here
   and hierarchy comes from size alone. The mark folds open and shut down
   here on a slow loop, as before. */
footer{background:var(--coral); color:#fff; --on-ink:#fff; --on-ink-2:#fff; --on-ink-3:#fff;}
/* The page-wide focus ring is coral. On a coral ground it vanishes. */
footer :focus-visible{outline-color:#fff;}
.foot-grid{display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; padding:56px 0 60px;}
.foot-l{display:flex; flex-direction:column; align-items:center; gap:14px;}
.foot-l .logo{color:var(--on-ink);}
.foot-l p{font-size:.9rem; color:var(--on-ink-2); max-width:40ch;}
.foot-r{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:.87rem; color:var(--on-ink-2);}
.foot-tm{max-width:64ch; margin:8px auto 0; text-align:center; line-height:1.55;
         font-size:.78rem; color:var(--on-ink-3);}
.foot-fine{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;
  font-size:.82rem; color:var(--on-ink-3); margin-top:-4px;
}
.foot-r a{text-decoration:none;}
/* Hover was a pink shift, which is invisible on red. Underline instead. */
.foot-r a:hover{text-decoration:underline; text-underline-offset:3px;}

/* The menu button exists only on narrow screens. */
.navtoggle{display:none; align-items:center; justify-content:center; width:40px; height:40px;
  padding:0; border:0; border-radius:11px; background:transparent; color:var(--ink); cursor:pointer;}
.navtoggle svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;}
.navtoggle svg path{transition:transform .18s ease, opacity .14s ease; transform-origin:center;}
.navtoggle[aria-expanded="true"] .t{transform:translateY(5px) rotate(45deg);}
.navtoggle[aria-expanded="true"] .m{opacity:0;}
.navtoggle[aria-expanded="true"] .b{transform:translateY(-5px) rotate(-45deg);}
.navtoggle:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
.navlinks-signin, .navsep{display:none;}

/* 809, not 759. Measured: the desktop bar fits on one row from 810px up; between 760 and
   800 the five links wrapped and the pill went from 67px to 119px, which is the same
   two-row mess the phone had. The menu button covers that band too. */
@media (max-width:809px){
  .navbar{top:10px; margin-top:14px;}
  /* Three things on one row: the mark, the one action, and the way to everything else. */
  /* The same 99px pill as desktop and as every button on the page. It was 14px, which
     is a rectangle with its corners taken off — a different shape language from the rest
     of the site, and obvious the moment the two are seen side by side. The left padding
     goes up with it so the mark is not sitting in the curve. */
  nav{position:relative; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:0 8px; padding:10px 10px 10px 22px; border-radius:99px;}
  /* The phone's bar (Eoin, 27 Oct 2026: "the logo feels too small or the CTA too big").
     The logo is 20px — capitals 15.2px — and Book a demo is 40px tall, the menu button's
     own height. The button took the body's 1.62 line height, so 14px words stood in a
     43px pill, as wide as the lockup and two and a half times its height. */
  .logo{--lh:20px;}
  .navbar .btn-primary{padding:9px 16px; font-size:.9rem; line-height:20px;}
  /* Both pinned to row 1. DOM order is logo, toggle, panel, navend — so by the time
     auto-placement reached .navend the cursor had already passed column 4, and the CTA
     was pushed onto a second row inside the pill. The explicit row is the whole fix. */
  .navtoggle{display:inline-flex; grid-row:1; grid-column:4; border-radius:99px;}
  .navend{grid-row:1; grid-column:3; justify-self:end; gap:14px;}
  /* Sign in moves into the panel — on a 360px screen it was competing with the CTA for
     the same few millimetres, and it is habitual traffic that will go looking for it. */
  .navend .signin{display:none;}
  .navsep{display:block; height:1px; margin:8px 16px; background:rgba(0,0,0,.10);}
  .navlinks-signin{display:block; color:var(--ink-2);}

  /* The panel. Hidden rather than merely collapsed, so its links are out of the tab order
     and out of a screen reader's path until the button opens it. */
  .navlinks{display:none; position:absolute; z-index:60; top:calc(100% + 8px); left:0; right:0;
    flex-direction:column; gap:0; padding:12px 10px; border-radius:26px;
    background:#EFECEC; box-shadow:0 14px 34px rgba(23,23,23,.18);}
  .navlinks.is-open{display:flex;}
  .navlinks a{padding:12px 16px; border-radius:99px; font-size:1rem; white-space:nowrap;}
  .navlinks a:active{background:rgba(0,0,0,.05);}
  /* The run table was three columns inside a horizontal scroller. It scrolled, and it
     was labelled, but the third column — the reason, which is the entire evidence the
     section is about — was clipped mid-word at every phone width, so it read as broken
     rather than as scrollable. One card per recipient instead: name, state, reason, each
     on its own line, nothing cut off and nothing to swipe. */
  .tablewrap{overflow-x:visible;}
  table.run{display:block; min-width:0; width:100%;}
  table.run thead{display:none;}
  table.run tbody, table.run tr, table.run td{display:block; width:auto;}
  table.run tr{padding:14px 20px; border-bottom:1px solid var(--rule);}
  table.run tr:last-child{border-bottom:none;}
  table.run td{padding:0; border:none; white-space:normal;}
  table.run td.who{font-size:15px; margin-bottom:8px; white-space:normal;}
  table.run td.run-why{margin-top:8px; font-size:13px; line-height:1.5;}

  .band, .run-sec, .review-sec, .price-sec{padding-top:70px; padding-bottom:70px;}
  .catch-sec{padding-top:74px; padding-bottom:74px;}
  .close-sec{padding-top:80px; padding-bottom:88px;}
}
/* Under 410 the bar's own padding gives way first, so the logo keeps 16px or more of
   air before the button (measured: with the roomy padding, 402 — an iPhone Pro — had
   16 to 393's 25). */
@media (max-width:409px){
  nav{padding:10px 8px 10px 14px; gap:0 6px;}
  .navend .btn{padding:9px 13px; font-size:.9rem;}
}
@media (max-width:383px){
  /* the mark alone: the logotype is cropped off by the logo's own width. Only where the
     whole lockup would come within 16px of the button (measured): every iPhone from 390
     wide keeps the logotype; it was cut under 400, the old lockup's width. */
  .navbar .logo{width:var(--lh); overflow:hidden; flex:none;}
  .navbar .logo-svg{flex:none; max-width:none;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }


.close-fine a{color:var(--on-ink-2); text-decoration:underline; text-underline-offset:2px;}
.close-fine a:hover{color:#fff;}
@media (max-width:900px){ .zgrid{grid-template-columns:1fr;} }

.hero-fine a{color:var(--ink-2); text-underline-offset:2px;}

/* ---------- legal pages: /privacy, /terms, /security, 404 ----------
   The home page's nav, type and footer (6 Oct 2026: they had their own
   sheet, legal-style.css, and looked like a different site). A document
   on the 12-column grid: the text runs columns 3–10, a measure of about
   70 characters; one column below 900px. */
.doc-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; padding-top:72px; padding-bottom:120px;}
.doc{grid-column:3 / span 8; min-width:0;}
.doc h1{font-size:clamp(2.4rem,4.2vw,3.4rem); margin:0 0 18px;}
.doc .meta{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.02em; line-height:1.7; color:var(--ink-3); padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid var(--rule);}
.doc h2{font-size:clamp(1.35rem,2.2vw,1.6rem); font-weight:700; line-height:1.15; letter-spacing:-.018em; margin:48px 0 14px;}
.doc h3{margin:28px 0 10px;}
.doc p, .doc li{color:var(--ink-2); line-height:1.65;}
.doc p{margin:0 0 14px;}
.doc ul, .doc ol{margin:0 0 16px; padding-left:22px;}
.doc li{margin:0 0 8px;}
.doc strong{color:var(--ink); font-weight:600;}
.doc a{color:var(--coral-deep); text-decoration:underline; text-underline-offset:2px;}
.doc a:hover{color:var(--coral);}
.doc code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.9em; color:var(--ink);}
.doc table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.95rem;}
.doc th, .doc td{text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2);}
.doc th{color:var(--ink); font-weight:600;}
@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr; padding-top:40px; padding-bottom:80px;}
  .doc{grid-column:1 / -1;}
}


/* ---------- the letter check, in the hero (30 Oct 2026) ----------
   The hero's sheet is blank paper (no letterhead rule, no fold) with the partner's areas
   on it, and takes a visitor's letter as a PDF: public/letter-check.js draws it on the
   paper and makes the cards beside it its checks. Coral where there is ink in an area,
   amber for Pingen's window (only the address may be there — the page cannot tell what
   the ink is), the reserved cyan everywhere else. One mark per finding (Eoin, 30 Oct
   2026: a ring round the ink, inside an area already coral, under a coral frame, looked
   messy): an area with ink in it turns coral, and where ink crosses the safe line, that
   stretch of the line does. Nothing else is drawn over the visitor's words: the areas'
   labels and specimens are for the blank paper only. */
.sheet--check::before{display:none;}
.sheet--check.has-letter::after{display:none;}
.sheet--check{outline:2px dashed transparent; outline-offset:8px; transition:outline-color .15s ease;}
.sheet--check.is-over{outline-color:var(--coral);}
/* A file dragged over a letter: the sheet goes pale and says what letting go does, in the
   prompt's own headline (Eoin, 30 Oct 2026). Only the headline: the button and its lines are
   no use mid-drag. The veil takes no pointer, so the drag's enter and leave stay the
   sheet's. */
.sheet--check.has-letter.is-over .lc-drop[hidden]{display:flex; inset:0; justify-content:center; background:rgba(253,252,251,.9); pointer-events:none;}
.sheet--check.has-letter.is-over .lc-pick, .sheet--check.has-letter.is-over .lc-drop-fine{display:none;}
.lc-pic canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* A letter not the partner's size, drawn whole inside its page: its own edge shows. */
.lc-pic canvas.lc-other{box-shadow:0 0 0 1px var(--rule-2), 0 6px 18px -10px rgba(var(--shade),.5);}
.has-letter .zone b, .has-letter .zone em, .has-letter .zone .zfill, .has-letter .zone-bar b{display:none;}
.zone.is-off, .zone-bar.is-off{display:none !important;}
.zone.is-check{border-color:#C27A00; border-style:solid; background:rgba(194,122,0,.09);}
.lc-marks{position:absolute; inset:0; pointer-events:none; z-index:2;}
.lc-edge{position:absolute; border:1px dashed rgba(63,169,188,.7);}
.lc-cross{position:absolute; border-radius:1px; background:var(--coral);}
.lc-cross.h{height:2px; margin-top:-1px;}
.lc-cross.v{width:2px; margin-left:-1px;}

/* The empty paper's prompt stands below every partner's address area (Docmail's and
   Stannp's end at 87mm, 29% down; Lob's at 72mm of 279, 26%), so nothing covers anything. */
.lc-drop{position:absolute; left:10%; right:10%; top:44%; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;}
.lc-drop[hidden]{display:none;}
/* One lockup, one ink: the headline, then the button that carries the file icon, then the
   two lines in the button's own face. Ink, not coral: coral filled is the sign-up alone, and
   a coral outline under a black headline with a darker coral icon above was three colours
   for one action (Eoin, 30 Oct 2026). */
.lc-drop-h{margin:0; font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:-.015em; color:var(--ink); line-height:1.2;}
.lc-pick{margin-top:16px; background:var(--ink); color:#fff; padding:10px 20px 10px 16px;}
.lc-pick:hover{background:#000; transform:translateY(-1px);}
.lc-pick svg, .lc-again svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.lc-drop-fine{margin:12px 0 0; font-size:.86rem; color:var(--ink-3); line-height:1.5;}
@media (max-width:480px){ .lc-drop-h{font-size:1.05rem;} }
.lc-busy{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(253,252,251,.92); font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif; font-size:.98rem; color:var(--ink-2);}
.lc-busy[hidden]{display:none;}
.lc-spin{width:26px; height:26px; border-radius:50%; border:2.5px solid var(--rule-2); border-top-color:var(--coral); animation:lc-spin .8s linear infinite;}
@keyframes lc-spin{to{transform:rotate(360deg);}}

/* Under the sheet, once a letter is on it: the sheets, and another letter, straight under it. */
.lc-under{display:flex; align-items:center; justify-content:center; gap:12px 28px; flex-wrap:wrap; margin-top:18px; width:var(--paper-w, 100%); transition:width .35s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion: reduce){ .lc-under{transition:none;} }
.lc-under[hidden]{display:none;}
.lc-pager{display:flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--ink-2);}
.lc-pager[hidden]{display:none;}
.lc-pg{width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--rule-2); background:var(--white); color:var(--ink); cursor:pointer; position:relative;}
.lc-pg::after{content:""; position:absolute; inset:-7px;}
.lc-pg svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.lc-pg:disabled{opacity:.4; cursor:default;}
/* A link, not a third button: after a check the one button is Start free. Its file icon is
   the prompt's, the same action. 44px to touch, round the size it is drawn at. */
.lc-again{display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer; position:relative;
  font:400 .92rem/1.3 "Source Sans 3",ui-sans-serif,system-ui,sans-serif; color:var(--ink-2);}
.lc-again svg{width:16px; height:16px; stroke-width:1.75;}
.lc-again:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.lc-again::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);}
.lc-err{margin-top:34px; padding:12px 14px; border-radius:8px; background:var(--coral-tint); color:var(--coral-deep); font-weight:600; font-size:.95rem; line-height:1.45;}
.lc-err[hidden]{display:none;}
.lc-under:not([hidden]) + .lc-err{margin-top:12px;}
.lc-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* The cards: idle (grey ring) before a letter, then teal, coral or amber. Amber, like
   coral, says why without a hover. */
.tagcard i.idle{background:transparent; box-shadow:inset 0 0 0 1.5px var(--rule-2);}
.tagcard i.check{background:#C27A00;}
.tagcard.check b{color:var(--kraft);}
@media (min-width:1000px){ .tagcards .tagcard.check span{display:block;} }
/* What was found is a short line in words, not a measurement: the body face, not mono. */
.tagcards .tagcard.warn span, .tagcards .tagcard.check span{font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif; font-size:13px; color:var(--ink-2); line-height:1.35;}
/* The ask after a result: the one coral on it is Start free. */
/* The next step is set apart from the checks by scale, not colour (Eoin, 30 Oct 2026: it
   was lost among them; a dark card, then a peach one, were tried and dropped): the same
   card as the checks, with its heading in the display face, the walkthrough frame's lift,
   more room, and space above it. Written against .tagcards .tagcard, the wide hero's. */
.lc-cta{grid-template-columns:1fr;}
.lc-cta[hidden]{display:none;}
.tagcards .tagcard.lc-cta, .tagcard.lc-cta{margin-top:10px; padding:16px 18px; box-shadow:var(--lift);}
.tagcards .tagcard.lc-cta b, .tagcard.lc-cta b{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; font-size:1.05rem; font-weight:700; letter-spacing:-.015em; line-height:1.25; color:var(--ink);}
.lc-cta span{font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;}
.tagcards .tagcard.lc-cta span, .tagcard.lc-cta span{display:block; margin-top:6px; font-size:.86rem; line-height:1.45; color:var(--ink-2);}
.lc-cta-btns{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px;}
.lc-cta-btns .btn{padding:8px 18px; font-size:.88rem;}
.lc-link{position:relative; font-weight:600; font-size:.88rem; color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:3px;}
.lc-link:hover{color:var(--coral-deep); text-decoration-color:currentColor;}
.lc-link::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);}
/* "Email me this check" (30 Oct 2026): under the card's two actions, behind a hairline.
   Start free stays the one button after a check (Eoin, 30 Oct 2026: three buttons fought
   each other), so Send is link-weight, inside the field's right end, like Book a demo
   beside Start free. Divs and paragraphs, not spans: the card's spans are its notes, which
   the narrow layout hides until hover. The field is 44px; Send's target is too.
   check-email.js sends the result only, never the letter. */
.lc-mail{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--rule); font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;}
.lc-mail-h{display:block; font-weight:600; font-size:.88rem; color:var(--ink);}
.lc-mail-row{position:relative; margin-top:8px;}
.lc-mail-row input{display:block; width:100%; height:44px; padding:0 72px 0 14px; font:inherit; font-size:.92rem; color:var(--ink); background:var(--white); border:1px solid var(--rule-2); border-radius:99px;}
.lc-mail-row input:focus{outline:2.5px solid var(--ink); outline-offset:1px; border-color:var(--ink);}
.lc-mail-send{position:absolute; right:6px; top:50%; transform:translateY(-50%); height:44px; padding:0 14px; border:0; background:none; cursor:pointer; font:inherit; font-weight:600; font-size:.88rem; color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:3px;}
.lc-mail-send:hover{color:var(--coral-deep); text-decoration-color:currentColor;}
.lc-mail-send:focus-visible{outline:2.5px solid var(--ink); outline-offset:-6px; border-radius:99px;}
.lc-mail-send:disabled{opacity:.6; cursor:default;}
.lc-mail-fine{margin:8px 0 0; font-size:.8rem; line-height:1.45; color:var(--ink-3);}
.lc-mail-msg{margin:8px 0 0; font-size:.86rem; line-height:1.45; font-weight:600; color:var(--ink);}
.lc-mail-msg.is-bad{color:var(--coral-deep);}
.lc-mail-msg[hidden]{display:none;}
.lc-mail-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.lc-mail.is-sent .lc-mail-row, .lc-mail.is-sent .lc-mail-fine{display:none;}

/* A dot on each partner's button once a letter is checked: its result at a glance. */
.lc-dot{display:none; width:8px; height:8px; border-radius:50%; margin-left:8px; flex:none;}
.tagrow button[data-status] .lc-dot{display:block;}
.tagrow button[data-status="fits"] .lc-dot{background:var(--teal);}
.tagrow button.on[data-status="fits"] .lc-dot{background:#5FC3CF;}
.tagrow button[data-status="problems"] .lc-dot{background:var(--coral);}
.tagrow button[data-status="check"] .lc-dot{background:#C27A00;}
/* On a phone the four with their dots would wrap the last: a 2 × 2 grid on purpose. */
@media (max-width:480px){
  .tagrow.has-status{display:grid; grid-template-columns:1fr 1fr; max-width:320px; margin-inline:auto;}
}