/* Filing Genie — see docs/DESIGN-TOKENS.md, which is the source of truth for
   everything in this :root block. Three rules decide the judgement calls:
   boring in the interface and warm in the copy; colour carries meaning rather
   than decoration; nothing hides. */
:root{
  /* Brand — Marmalade. Never used on a status element: amber reads as
     "due soon", and the logo colour must not be mistaken for a warning. */
  --brand-50:#FDF3EA; --brand-100:#F9E2CC; --brand-200:#F0C795; --brand-300:#E0A268;
  --brand-400:#C9761F; --brand-500:#B2560D; --brand-600:#96470A; --brand-700:#8F4409;
  --brand-800:#5E2C05;

  /* Ink — warm neutral, so the orange sits comfortably. Never pure black. */
  --ink-900:#171512; --ink-800:#2B2823; --ink-700:#4A453D; --ink-600:#6B655B;
  --ink-500:#8C8578; --ink-300:#C9C4BA; --ink-200:#E3DFD7; --ink-100:#F2EFE9;
  --ink-50:#FAF8F5;  --white:#FFFFFF;

  /* Status — filing states, on their own scale away from the brand. */
  --status-neutral-fg:#6B655B; --status-neutral-bg:#F2EFE9; --status-neutral-bd:#E3DFD7;
  --status-info-fg:#1B5FA8;    --status-info-bg:#E8F1FB;    --status-info-bd:#C2DAF2;
  --status-ok-fg:#16653F;      --status-ok-bg:#E6F3EC;      --status-ok-bd:#BFE0CE;
  --status-due-fg:#7A5C00;     --status-due-bg:#FCF4D6;     --status-due-bd:#EDDCA0;
  --status-late-fg:#A32118;    --status-late-bg:#FCEBEA;    --status-late-bd:#F3C9C6;

  /* Type */
  --font-display:"Schibsted Grotesk",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --focus-ring:0 0 0 3px rgba(178,86,13,.32);

  /* Aliases kept because js/ references a handful of these inline. Mapped
     onto the tokens above rather than carrying a second palette. */
  --ink:var(--ink-900); --ink-2:var(--ink-700); --ink-3:var(--ink-600);
  --paper:var(--white); --app:var(--ink-50); --bar:var(--ink-100);
  --rule:var(--ink-200); --rule-soft:var(--ink-200);
  --rail-ink:var(--ink-900);
  --green:var(--status-ok-fg); --green-soft:var(--status-ok-bg);
  --red:var(--status-late-fg); --red-soft:var(--status-late-bg);
  --amber:var(--status-due-fg); --amber-soft:var(--status-due-bg);
  --radius:var(--radius-sm);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink-50);color:var(--ink-700);font-family:var(--font-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Two weights only, 400 and 500. The wordmark is the single exception. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;color:var(--ink-900);
  letter-spacing:-.015em;margin:0}
h3,h4{font-family:var(--font-body);letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
/* Mono is functional, not decorative: reserved for an identifier a user reads
   digit by digit, compares against a letter from HMRC, or types back in — a
   VRN, a UTR, a CRN, a period key, a submission reference. Monospace makes a
   transcription error visible. Money is NOT one of these: figures get tabular
   numerals so columns align, in the body or display face. See
   docs/DESIGN-TOKENS.md §3.1. */
.mono,.acct-code,.boxref{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num,.r,table.led .r,.acct-doc td.r{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-700)}

.shell{display:flex;min-height:100vh}
/* Brand is an accent on white and ink — never a full-bleed coloured sidebar. */
.rail{width:252px;flex:0 0 252px;background:var(--white);color:var(--ink-700);
  border-right:1px solid var(--ink-200);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.brand{padding:20px 20px 18px}
.brand .mark{display:flex;align-items:center;gap:10px}
/* The mark — docs/DESIGN-TOKENS.md §5. Inline in index.html rather than an
   <img> so it costs no request and survives the single-file build, with the
   stroke set here so it reads the brand token instead of carrying a second
   copy of the hex that could drift from it. */
.brand .stripes{display:block;flex:none}
.brand .stripes path{stroke:var(--brand-500);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.brand h1{font-family:var(--font-display);font-weight:600;font-size:19px;
  letter-spacing:-.02em;white-space:nowrap}
.brand .v{font-size:12px;font-weight:500;color:var(--brand-800);background:var(--brand-50);
  border:1px solid var(--brand-200);padding:2px 8px;border-radius:var(--radius-sm);margin-left:2px}
.brand p{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-500)}
.nav{padding:6px 12px 14px;flex:1;overflow-y:auto}
.nav .grp{font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink-500);
  padding:16px 8px 6px}
.nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--ink-700);padding:8px 10px;
  border-radius:var(--radius-sm);font-size:14px;margin-bottom:2px}
.nav button:hover{background:var(--ink-100)}
.nav button.on{background:var(--brand-50);color:var(--brand-800);font-weight:500}
.nav button .k{font-family:var(--font-mono);font-size:12px;color:var(--ink-500);width:14px}
.nav button.on .k{color:var(--brand-700)}
.nav button .pip{margin-left:auto;width:7px;height:7px;border-radius:99px;background:var(--status-late-fg)}
.nav button .pip.ok{background:var(--status-ok-fg)}
.railfoot{margin:0 12px;padding:16px 8px 18px;border-top:1px solid var(--ink-200);
  font-size:13px;color:var(--ink-500);line-height:1.5}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--white);border-bottom:1px solid var(--ink-200);padding:14px 32px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.topbar .co{font-weight:500;color:var(--ink-900);font-size:16px}
.topbar .pd{font-size:13px;color:var(--ink-600)}
.spacer{flex:1}
/* Status pills always carry a word — never colour alone. */
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  border:1px solid var(--status-neutral-bd);background:var(--status-neutral-bg);
  color:var(--status-neutral-fg)}
.chip.ok{background:var(--status-ok-bg);border-color:var(--status-ok-bd);color:var(--status-ok-fg)}
.chip.bad{background:var(--status-late-bg);border-color:var(--status-late-bd);color:var(--status-late-fg)}
.chip.warn{background:var(--status-due-bg);border-color:var(--status-due-bd);color:var(--status-due-fg)}
.chip .dot{width:7px;height:7px;border-radius:99px;background:currentColor}

/* 40px high, one primary action per screen. */
.btn{border:1px solid var(--ink-300);background:var(--white);color:var(--ink-900);
  height:40px;padding:0 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  font-family:var(--font-body);transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--ink-500)}
.btn.primary{background:var(--brand-500);border-color:var(--brand-500);color:var(--white)}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.primary:disabled{background:var(--ink-200);border-color:var(--ink-200);
  color:var(--ink-500);cursor:not-allowed}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--ink-100);border-color:transparent}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.lg{height:48px;padding:0 24px;font-size:16px}
/* Destructive. Anything touching a submission also needs a confirm step. */
.btn.danger{color:var(--status-late-fg);border-color:var(--status-late-bd)}
.btn.danger:hover{border-color:var(--status-late-fg)}
/* Never removed. Users filing statutory returns include keyboard-only users. */
.btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,button:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

.content{padding:28px 32px 56px;max-width:1280px;width:100%}
/* One step of contrast is the whole elevation system — no card shadows. */
.panel{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-md);
  margin-bottom:24px;overflow:hidden}
.panel-head{padding:15px 20px;border-bottom:1px solid var(--ink-200);background:var(--ink-100);
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.panel-head h2{font-family:var(--font-body);font-size:19px;line-height:1.35;letter-spacing:0}
.panel-head .sub{font-size:13px;color:var(--ink-600);margin-top:3px}
.panel-body{padding:20px}
.panel-body.flush{padding:0}
.exports{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}

/* Tables: ink-100 header, no zebra striping, figures right-aligned with
   tabular numerals so digits line up down the column. */
table.led{width:100%;border-collapse:collapse;font-size:14px}
table.led th{text-align:left;font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-600);padding:12px 20px;background:var(--ink-100);
  border-bottom:1px solid var(--ink-200);white-space:nowrap}
table.led td{padding:13px 20px;border-bottom:1px solid var(--ink-200);vertical-align:top;
  color:var(--ink-700)}
table.led .r{text-align:right;white-space:nowrap;color:var(--ink-900);
  font-variant-numeric:tabular-nums}
table.led tr.head-row td{font-weight:500;background:var(--white);
  border-bottom:1px solid var(--ink-200);font-size:13px;letter-spacing:.01em;
  color:var(--ink-600);padding-top:20px}
table.led tr.total td{font-weight:500;color:var(--ink-900);background:var(--white);
  border-top:1px solid var(--ink-300);border-bottom:none}
table.led tr.grand td{font-weight:500;background:var(--ink-100);color:var(--ink-900);
  border-top:1px solid var(--ink-300);border-bottom:none}
table.led tr.spacer-row td{background:var(--white);border:none;height:8px;padding:0}
.tblwrap{overflow-x:auto}
.neg{color:var(--status-late-fg)}
.muted{color:var(--ink-600)}
.acct-code{font-size:13px;color:var(--ink-500);margin-right:8px}
.boxref{font-size:13px;color:var(--ink-500)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-md);
  padding:18px 20px}
.kpi .lab{font-size:13px;color:var(--ink-600)}
.kpi .val{font-size:26px;font-weight:500;color:var(--ink-900);margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.kpi .note{font-size:13px;color:var(--ink-500);margin-top:4px}
/* A coloured rule on a card is read as a status, so the brand does not get one
   — .accent is deliberately a plain card. Only genuine states are coloured,
   and each of those also carries a word. */
.kpi.due{border-left:3px solid var(--status-due-fg)}
.kpi.late{border-left:3px solid var(--status-late-fg)}

/* Labels sit above the input, never inside it as a placeholder — a
   placeholder-as-label disappears the moment someone starts typing, which is
   the worst possible behaviour on a form where accuracy is legally material. */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-700);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--ink-200);
  background:var(--white);color:var(--ink-900);height:40px;padding:0 12px;
  border-radius:var(--radius-sm);font-size:14px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-500)}
.field textarea{min-height:80px;padding:10px 12px;height:auto;resize:vertical;line-height:1.5}
.field .hint{font-size:13px;color:var(--ink-600);margin-top:5px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--status-late-fg);
  background:var(--status-late-bg)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:14px}
.check input{margin-top:4px;width:16px;height:16px;flex:0 0 16px;accent-color:var(--brand-500)}

/* Banners state the date explicitly, never "soon". */
.notice{background:var(--ink-100);border:1px solid var(--ink-200);
  border-left:3px solid var(--ink-300);padding:14px 18px;border-radius:var(--radius-md);
  font-size:14px;color:var(--ink-700);margin-bottom:16px}
.notice.warn{border-color:var(--status-late-bd);border-left-color:var(--status-late-fg);
  background:var(--status-late-bg);color:var(--status-late-fg)}
.notice.amber{border-color:var(--status-due-bd);border-left-color:var(--status-due-fg);
  background:var(--status-due-bg);color:var(--status-due-fg)}
.notice.good{border-color:var(--status-ok-bd);border-left-color:var(--status-ok-fg);
  background:var(--status-ok-bg);color:var(--status-ok-fg)}
.notice strong{font-weight:500;color:inherit}
ul.plain{margin:8px 0 0;padding-left:20px;color:var(--ink-700);font-size:14px}
ul.plain li{margin-bottom:6px}
.split{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}

.tacct{border:1px solid var(--ink-200);border-radius:var(--radius-md);background:var(--white);
  overflow:hidden;position:sticky;top:88px}
.tacct .cap{padding:15px 20px;border-bottom:1px solid var(--ink-200);background:var(--ink-100)}
.tacct .cap h3{font-size:16px;font-weight:500;color:var(--ink-900)}
.tacct .cap p{margin:3px 0 0;font-size:13px;color:var(--ink-600)}
.tacct .tt{display:grid;grid-template-columns:1fr 1fr;position:relative}
.tacct .tt::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ink-300)}
.tacct .side{padding:16px 20px 22px;min-height:112px}
.tacct .side .lab{font-size:13px;font-weight:500;letter-spacing:.01em;padding-bottom:8px;
  border-bottom:1px solid var(--ink-300);margin-bottom:10px;color:var(--ink-600)}
.tacct .side.cr{text-align:right}
.tacct .side.cr .lab{text-align:right}
.tacct .nm{font-size:14px;color:var(--ink-900)}
.tacct .amt{font-family:var(--font-mono);font-size:19px;margin-top:6px;color:var(--ink-900);
  font-variant-numeric:tabular-nums}
.tacct .empty{color:var(--ink-500);font-size:14px}
.tacct .foot{padding:12px 20px;border-top:1px solid var(--ink-200);background:var(--ink-100);
  font-size:13px;color:var(--ink-600)}

/* wizard */
.steps{display:flex;gap:0;border:1px solid var(--ink-200);border-bottom:0;background:var(--white);
  border-radius:var(--radius-md) var(--radius-md) 0 0;overflow-x:auto}
.steps button{flex:1;min-width:140px;background:none;border:0;border-bottom:3px solid transparent;
  padding:14px 16px;text-align:left;color:var(--ink-600)}
.steps button .n{font-family:var(--font-mono);font-size:12px;display:block;color:var(--ink-500)}
.steps button .t{font-size:14px;font-weight:500;display:block;margin-top:3px}
.steps button.on{color:var(--ink-900);border-bottom-color:var(--brand-500)}
.steps button.done{color:var(--status-ok-fg)}
.steps button.done .n{color:var(--status-ok-fg)}
.steps button:disabled{color:var(--ink-500);cursor:not-allowed}

.gate{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--ink-200);
  align-items:flex-start;font-size:14px}
.gate:last-child{border-bottom:0}
.gate .mk{width:20px;height:20px;border-radius:99px;flex:0 0 20px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:500;
  color:var(--white);margin-top:2px}
.gate .mk.ok{background:var(--status-ok-fg)}
.gate .mk.no{background:var(--status-late-fg)}
.gate .mk.warn{background:var(--status-due-fg);color:var(--ink-900)}
.gate .bd{flex:1;color:var(--ink-900)}
.gate .bd strong{font-weight:500}
.gate .bd .why{font-size:13px;color:var(--ink-600);margin-top:2px}
.gate .go{margin-left:auto}

.pack{border:1px solid var(--ink-200);border-radius:var(--radius-md);overflow:hidden;margin-top:8px}
.pack .row{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ink-200);
  align-items:flex-start}
.pack .row:last-child{border-bottom:0}
.pack .fn{font-family:var(--font-mono);font-size:13px;color:var(--brand-700)}
.pack .ds{font-size:13px;color:var(--ink-600);margin-top:3px}
.pack .to{margin-left:auto;font-size:13px;color:var(--ink-500);white-space:nowrap;padding-top:2px}

/* The rendered accounts document. Deliberately plainer than the app chrome —
   it is a statutory document, not an interface. */
.acct-doc{background:var(--white);padding:40px 44px;border:1px solid var(--ink-200);
  border-radius:var(--radius-md);font-size:14px;color:var(--ink-700)}
.acct-doc h3{font-size:16px;font-weight:500;color:var(--ink-900);margin:28px 0 4px}
.acct-doc h3:first-child{margin-top:0}
.acct-doc .cohead{text-align:center;margin-bottom:28px;padding-bottom:20px;
  border-bottom:1px solid var(--ink-300)}
.acct-doc .cohead h2{font-size:26px;line-height:1.25}
.acct-doc .cohead p{margin:6px 0 0;font-size:14px;color:var(--ink-600)}
.acct-doc .stmt{font-size:14px;color:var(--ink-700);line-height:1.6;margin:10px 0}
.acct-doc table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.acct-doc td{padding:6px 0;border:0}
.acct-doc td.r{text-align:right;white-space:nowrap;width:130px;color:var(--ink-900);
  font-variant-numeric:tabular-nums}
.acct-doc tr.tot td{border-top:1px solid var(--ink-300);font-weight:500;color:var(--ink-900)}
.acct-doc tr.dbl td{border-top:1px solid var(--ink-300);border-bottom:3px double var(--ink-300);
  font-weight:500;color:var(--ink-900)}
.acct-doc tr.hd td{font-weight:500;color:var(--ink-900);padding-top:14px}
.acct-doc .sig{margin-top:34px;padding-top:18px;border-top:1px solid var(--ink-200);
  font-size:13px;color:var(--ink-600)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink-900);color:var(--white);padding:12px 20px;border-radius:var(--radius-sm);
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  z-index:80;max-width:88vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.drop{border:1px dashed var(--ink-300);border-radius:var(--radius-md);padding:32px 20px;
  text-align:center;background:var(--ink-100);color:var(--ink-600)}
.drop.hot{background:var(--brand-50);border-color:var(--brand-500)}
.modal-bg{position:fixed;inset:0;background:rgba(23,21,18,.5);display:none;
  align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto}
.modal-bg.on{display:flex}
/* The one shadow in the system. */
.modal{background:var(--white);border-radius:var(--radius-lg);max-width:820px;width:100%;
  box-shadow:0 24px 64px -24px rgba(23,21,18,.35)}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--ink-200);display:flex;align-items:center}
.modal-head h2{font-size:19px;font-family:var(--font-body);letter-spacing:0}
.modal-body{padding:24px;max-height:64vh;overflow-y:auto}
.modal-foot{padding:16px 24px;border-top:1px solid var(--ink-200);display:flex;gap:10px;
  justify-content:flex-end}

.code{background:var(--ink-900);color:var(--ink-100);padding:16px 18px;
  border-radius:var(--radius-md);font-family:var(--font-mono);font-size:13px;
  line-height:1.6;overflow-x:auto;margin:0;white-space:pre}

/* route chooser + per-destination blocks */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.routecard{text-align:left;background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:16px 18px;transition:border-color .12s,background .12s}
.routecard:hover:not(:disabled){border-color:var(--ink-300);background:var(--ink-50)}
.routecard.on{border-color:var(--brand-500);border-width:2px;padding:15px 17px;background:var(--brand-50)}
.routecard:disabled{color:var(--ink-500);cursor:not-allowed}
.routecard .rt{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--ink-900)}
.routecard.on .rt{color:var(--brand-800)}
.routecard:disabled .rt{color:var(--ink-500)}
.routecard .rs{font-size:13px;color:var(--ink-600);margin-top:2px}
.routecard .rd{font-size:14px;color:var(--ink-700);margin-top:8px;line-height:1.5}
.routecard .rw{font-size:13px;color:var(--status-late-fg);margin-top:8px}
.destblock{border:1px solid var(--ink-200);border-radius:var(--radius-md);margin-bottom:16px;
  overflow:hidden}
.destblock.done{border-color:var(--status-ok-bd)}
.destblock .dhead{display:flex;align-items:center;gap:12px;padding:15px 20px;
  background:var(--ink-100);border-bottom:1px solid var(--ink-200)}
.destblock.done .dhead{background:var(--status-ok-bg);border-bottom-color:var(--status-ok-bd)}
.destblock .dhead h4{font-family:var(--font-body);font-size:16px;font-weight:500;
  color:var(--ink-900);margin:0}
.destblock .dsub{font-size:13px;color:var(--ink-600);margin-top:2px}
.destblock .dbody{padding:20px}
@media (max-width:900px){.routes{grid-template-columns:1fr}}

@media (max-width:900px){
  .shell{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--ink-200)}
  .nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px}
  .nav .grp{display:none}
  .nav button{width:auto}
  .railfoot{display:none}
  .split,.grid2,.grid3{grid-template-columns:1fr}
  .content{padding:20px 16px 40px}
  .topbar{padding:12px 16px}
  .acct-doc{padding:24px 20px}
  .tacct{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.rail,.topbar,.exports,.steps{display:none!important}
  .panel{break-inside:avoid}}

/* ==========================================================================
   The landing page — index.html.
   ==========================================================================
   The app is the product and the landing page is an argument for it, so this
   section is allowed more air and larger type than the interface. It is not
   allowed a different palette, a third weight, or a shadow: the four rules in
   docs/DESIGN-TOKENS.md hold here exactly as they do everywhere else, and the
   brand still never lands on anything a reader could take for a filing status.
   Components the app already has — .btn, .chip, .notice, .field, .modal-bg —
   are reused rather than restated, so a change to a button is one change. */

body.lp{background:var(--white);color:var(--ink-700)}
.lp-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.lp section,.lp main>section{padding:72px 0}
.lp-sec-hd{max-width:660px;margin-bottom:36px}
.lp-sec-hd h2{font-size:32px}
.lp-sec-hd p{margin-top:14px;color:var(--ink-600)}
.lp-alt{background:var(--ink-50)}

/* header */
.lp-head{position:sticky;top:0;z-index:30;background:var(--white);
  border-bottom:1px solid var(--ink-200)}
.lp-head-in{display:flex;align-items:center;gap:28px;height:64px}
.lp-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.lp-brand .stripes{display:block;flex:none}
.lp-brand .stripes path{stroke:var(--brand-500);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
/* The wordmark is the one place a weight above 500 is allowed. */
.lp-word{font-family:var(--font-display);font-weight:600;font-size:19px;
  letter-spacing:-.02em;color:var(--ink-900)}
.lp-nav{display:flex;gap:22px;margin-left:8px}
.lp-nav a{color:var(--ink-700);text-decoration:none;font-size:14px}
.lp-nav a:hover{color:var(--ink-900);text-decoration:underline;text-underline-offset:3px}
.lp-head-cta{margin-left:auto;display:flex;align-items:center;gap:8px}
.lp-signed{font-size:13px;color:var(--ink-600)}

/* hero */
.lp-hero{padding:88px 0 56px!important}
.lp-eyebrow{font-size:14px;color:var(--brand-700);margin:0 0 16px}
.lp-hero h1{font-size:56px;line-height:1.05;max-width:15ch}
.lp-lede{margin-top:20px;font-size:19px;line-height:1.55;color:var(--ink-600);max-width:60ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.lp-cta .btn{text-decoration:none;display:inline-flex;align-items:center}
.lp-fine{margin-top:16px;font-size:14px;color:var(--ink-500);max-width:62ch}

/* the filing year — the signature visual, and an example, twice labelled */
.lp-ledger-sec{padding-top:0!important}
.lp-ledger{background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);overflow:hidden}
.lp-ledger-head{padding:22px 26px;border-bottom:1px solid var(--ink-200);background:var(--ink-50)}
.lp-ledger-head h2{font-size:19px;font-family:var(--font-body);letter-spacing:0}
.lp-ledger-head p{margin:4px 0 0;font-size:13px;color:var(--ink-500)}
.lp-year{list-style:none;margin:0;padding:0}
.lp-year li{display:flex;align-items:center;gap:20px;padding:16px 26px;
  border-bottom:1px solid var(--ink-100)}
.lp-year li:last-child{border-bottom:0}
.lp-date{flex:0 0 168px;font-size:14px;color:var(--ink-600);font-variant-numeric:tabular-nums}
.lp-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lp-what strong{font-weight:500;color:var(--ink-900);font-size:15px}
.lp-what em{font-style:normal;font-size:13px;color:var(--ink-500)}

/* cards */
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.lp-card{background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:24px}
.lp-alt .lp-card{background:var(--white)}
.lp-card h3{font-size:16px;font-weight:500;color:var(--ink-900)}
.lp-card p{margin:10px 0 0;font-size:15px;color:var(--ink-600)}

/* pricing */
.lp-toggle{display:inline-flex;align-items:center;gap:4px;background:var(--ink-100);
  border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:4px;margin-bottom:32px}
.lp-toggle button{font-size:14px;font-weight:500;border:1px solid transparent;
  background:transparent;color:var(--ink-600);padding:6px 14px;border-radius:4px;height:auto}
.lp-toggle button[aria-pressed="true"]{background:var(--white);color:var(--ink-900);
  border-color:var(--ink-200)}
/* Green, not brand: this is a saving, and the brand may not be read as a
   status. It is also not a filing state, so it is a plain colour and not a chip. */
.lp-save{font-size:13px;color:var(--status-ok-fg);margin-left:12px;font-weight:500}
.lp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
  align-items:start}
.lp-plan{background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:26px 22px;display:flex;flex-direction:column;height:100%}
.lp-plan.featured{border:2px solid var(--brand-500);padding:25px 21px}
.lp-badge{display:inline-block;align-self:flex-start;font-size:13px;font-weight:500;
  color:var(--brand-800);background:var(--brand-50);border:1px solid var(--brand-200);
  border-radius:var(--radius-sm);padding:3px 10px;margin-bottom:12px}
.lp-plan h3{font-size:17px;font-weight:500;color:var(--ink-900)}
.lp-who{font-size:14px;color:var(--ink-600);margin:6px 0 0;min-height:42px}
.lp-price{display:flex;align-items:baseline;gap:6px;margin:20px 0 4px}
.lp-amt{font-family:var(--font-display);font-size:38px;font-weight:500;color:var(--ink-900);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp-per{font-size:15px;color:var(--ink-600)}
.lp-exvat{font-size:13px;color:var(--ink-500);margin:0}
.lp-plan .btn{margin:22px 0 20px;width:100%}
.lp-feat-lbl{font-size:13px;font-weight:500;color:var(--ink-600);margin:0;
  padding-top:18px;border-top:1px solid var(--ink-200)}
.lp-plan ul{list-style:none;margin:12px 0 0;padding:0}
.lp-plan li{font-size:15px;color:var(--ink-700);padding-left:24px;position:relative;
  margin-bottom:10px;line-height:1.45}
.lp-plan li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:5px;
  border-left:2px solid var(--brand-500);border-bottom:2px solid var(--brand-500);
  transform:rotate(-45deg)}
#lpTransmit{margin-top:28px}
#lpTransmit p{margin:6px 0 0}
.lp-notes{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;background:var(--ink-50);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:26px}
.lp-notes strong{display:block;font-weight:500;color:var(--ink-900);margin-bottom:4px;font-size:15px}
.lp-notes p{margin:0;font-size:14px;color:var(--ink-600)}
.lp-footnote{font-size:13px;color:var(--ink-500);margin-top:20px;max-width:70ch}

/* questions */
.lp-qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 32px}
.lp-qa h3{font-size:16px;font-weight:500;color:var(--ink-900)}
.lp-qa p{margin:8px 0 0;font-size:15px;color:var(--ink-600)}

/* close */
.lp-final{background:var(--ink-50);text-align:center}
.lp-final h2{font-size:30px}
.lp-final p{margin:14px auto 0;max-width:56ch;color:var(--ink-600)}
.lp-final .lp-cta{justify-content:center}
.lp-foot{border-top:1px solid var(--ink-200);padding:28px 0;background:var(--white)}
.lp-foot-in{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;
  font-size:13px;color:var(--ink-500)}
.lp-foot-note{max-width:70ch}

/* the auth panel */
.lp-auth{max-width:460px}
.lp-auth .field{margin-bottom:14px}
.lp-auth-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.lp-auth-actions .btn{text-decoration:none;display:inline-flex;align-items:center}
.lp-auth .hint{font-size:13px;color:var(--ink-600);margin:5px 0 0}
.lp-auth .notice{margin-bottom:16px}
.lp-cos{margin:12px 0 16px;padding:0}
.lp-co{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ink-200)}
.lp-co-add summary{cursor:pointer;font-weight:500;margin:6px 0 12px}

@media (max-width:900px){
  .lp-nav{display:none}
  .lp section,.lp main>section{padding:48px 0}
  .lp-hero{padding:56px 0 40px!important}
  .lp-hero h1{font-size:36px}
  .lp-lede{font-size:17px}
  .lp-sec-hd h2{font-size:26px}
  .lp-amt{font-size:32px}
  .lp-who{min-height:0}
  .lp-year li{flex-direction:column;align-items:flex-start;gap:6px}
  .lp-date{flex:none}
}

/* The plan choice at the filing gate — js/38-plans.js.
   A panel beside the download buttons, never in front of them. It is
   deliberately not styled as a checkout: no seals, no reassurance badges, no
   green tick on the chosen plan. Choosing a plan takes no payment and files
   nothing, and the panel should not look like it did either. */
.plangate{border:1px solid var(--ink-200);border-radius:var(--radius-md);
  padding:22px;margin:18px 0;background:var(--white)}
.pg-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pg-head h3{font-size:16px;font-weight:500;color:var(--ink-900)}
.pg-head .chip{margin-left:auto}
.pg-why{margin:0;font-size:14px;color:var(--ink-600)}
.pg-covers{margin-top:8px;font-size:13px;color:var(--ink-500)}
.pg-toggle{display:inline-flex;align-items:center;gap:4px;background:var(--ink-100);
  border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:4px;margin:18px 0 14px}
.pg-toggle button{font-size:13px;font-weight:500;border:1px solid transparent;
  background:transparent;color:var(--ink-600);padding:5px 12px;border-radius:4px;height:auto}
.pg-toggle button[aria-pressed="true"]{background:var(--white);color:var(--ink-900);
  border-color:var(--ink-200)}
.pg-save{font-size:13px;color:var(--status-ok-fg);margin-left:10px;font-weight:500}
.pg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin-bottom:16px}
.planopt{display:flex;flex-direction:column;gap:4px;text-align:left;height:auto;
  padding:16px;border:1px solid var(--ink-200);background:var(--white);
  border-radius:var(--radius-sm)}
.planopt:hover{border-color:var(--ink-500)}
/* The chosen plan is outlined, not ticked and not coloured in. A chosen plan
   is not a completed step. */
.planopt.on{border:2px solid var(--brand-500);padding:15px}
.planopt .pn{font-size:15px;font-weight:500;color:var(--ink-900)}
.planopt .pp{font-size:14px;color:var(--ink-700);font-variant-numeric:tabular-nums}
.planopt .pp strong{font-weight:500;font-size:17px}
.planopt .pw{font-size:13px;color:var(--ink-500);line-height:1.45}
.pg-fine{font-size:13px;color:var(--ink-500);margin:12px 0 0}
/* Parked pricing (core/src/config.ts: BILLING_ENABLED). The hidden attribute
   alone loses to any rule that sets display, so it is made to win here. */
[data-billing][hidden]{display:none !important}