/* ---------------------------------------------------------------------------
   Norquin — the shared page system for every static page.

   Until 2026-08-30 each static page carried its own copy of the stylesheet, on
   the retired cream/wine palette with Newsreader and Plex, while the home page
   had moved to white/blue and Inter. Seven copies is why they drifted. This is
   the one file now; it holds the palette and type of `app/src/index.css`, and
   the pages carry nothing of their own.

   Palette and type are the ones recorded in design-rules §5¾. The report page
   is NOT styled from here: it keeps its own sheet, because a licensed broker
   reviewed that document and its status colours mean something.
   ------------------------------------------------------------------------- */

@font-face{font-family:"Inter";src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
/* the wordmark only — the logo and the footer name, nowhere in running text */
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --paper:#FFFFFF; --ink:#101418; --brand:#1552C4; --dark:#0F1B2D;
  --rule:#E2E7ED; --mute:#5A6472; --faint:#9AA4B2;
  --parch:#F5F6F8; --band:#F5F6F8;
  --col:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Inter",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit}
::selection{background:var(--brand);color:#fff}

/* paper grain, same as the home page: no colour, no motion, ~5%. It is what
   makes a flat white page read as printed rather than as a browser default. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print{body::before{display:none}}

.wrap{max-width:var(--col);margin:0 auto;padding:0 44px}

/* ---------- masthead ---------- */
nav{display:flex;align-items:center;justify-content:space-between;padding:34px 0;gap:26px 56px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo .mark{width:74px;height:26.6px;flex:none;overflow:visible}
.logo span{font-family:"Newsreader",Georgia,serif;font-size:27px;letter-spacing:.055em;line-height:1}
.nav,.navr{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.nav a,.navr a{font-size:16px;text-decoration:none;color:rgba(23,22,18,.86)}
.nav a:hover,.navr a:hover{color:var(--ink)}
.nav a.here,.navr a.here{color:var(--faint);pointer-events:none}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-size:15.5px;
  font-weight:500;padding:15px 30px;border-radius:999px;border:0;cursor:pointer}
.btn.sm{padding:11px 22px;font-size:14.5px}
.nav a.btn,.navr a.btn{color:#fff}
@keyframes drawloop{
  0%    {stroke-dashoffset:1;  animation-timing-function:cubic-bezier(.32,0,.16,1)}
  17.2% {stroke-dashoffset:0;  animation-timing-function:linear}
  69%   {stroke-dashoffset:0;  animation-timing-function:cubic-bezier(.7,0,.55,1)}
  86.2% {stroke-dashoffset:-1}
  100%  {stroke-dashoffset:-1}
}
@media (prefers-reduced-motion:no-preference){
  .logo .mark path{stroke-dasharray:1;stroke-dashoffset:1;
    animation:drawloop 8.7s infinite;animation-delay:calc(var(--i) * .13s)}
}
@media print{.logo .mark path{stroke-dashoffset:0!important;animation:none!important}}

/* ---------- type ----------
   One family, two weights. The section label is Apple's mechanism as recorded in
   §5¾: a coloured word at headline size inside an otherwise black sentence, on
   the same line — not an eyebrow sitting above it. */
h1{font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;
  font-size:clamp(38px,4.6vw,60px);line-height:1.07;letter-spacing:-.028em;
  margin-top:26px;max-width:20ch;text-wrap:balance}
h2{font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;font-size:40px;line-height:1.08;
  letter-spacing:-.014em;margin:0 0 20px;max-width:22ch}
h2 .lbl{color:var(--brand)}
h3{font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;font-size:21px;line-height:1.25;
  letter-spacing:-.012em;margin:0 0 9px}
.kicker{font-size:15.5px;color:var(--mute);padding-top:44px}
.stand{font-size:19px;line-height:1.5;color:var(--mute);margin-top:22px;max-width:52ch}
.cta{display:flex;align-items:center;gap:28px;margin-top:38px;flex-wrap:wrap}
.lnk{font-size:15.5px;text-decoration:none;color:var(--brand);
  border-bottom:1px solid rgba(21,82,196,.35);padding-bottom:2px}
.lnk:hover{border-bottom-color:var(--brand)}
section{padding:70px 0 0}
p{margin:0 0 16px;max-width:66ch;color:var(--mute);font-size:17px;line-height:1.47}
p.lead{color:var(--ink);font-size:19px;line-height:1.5}
p b{color:var(--ink);font-weight:600}
.rule{border-top:1px solid var(--rule);margin-top:70px}

/* ---------- tables: the report's own column language ---------- */
table.f{width:100%;border-collapse:collapse;margin:26px 0 10px;max-width:900px}
table.f th{font-size:13px;color:var(--mute);text-align:left;font-weight:500;
  padding:0 20px 10px 0;border-bottom:1.5px solid var(--ink)}
table.f td{padding:14px 20px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;
  font-size:16px;line-height:1.5;color:var(--mute)}
table.f td.m{font-weight:600;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.f td.w{color:var(--brand);font-weight:500}

/* ---------- sources: the citations stay visible, that is the brand ---------- */
ol.srcs{list-style:none;counter-reset:s;margin:22px 0 0;max-width:900px}
/* A citation is one sentence with a quote and a link inside it, so the li stays
   a normal block: display:flex made every text run, <i> and <a> its own column
   and tore each source into ragged strips. The number hangs in the margin. */
ol.srcs li{counter-increment:s;position:relative;padding:12px 0 12px 34px;
  border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.5;color:var(--mute)}
ol.srcs li::before{content:counter(s);position:absolute;left:0;top:12px;width:18px;
  text-align:right;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums;
  line-height:inherit}
ol.srcs a{color:var(--brand);word-break:break-word}

/* ---------- grounds. two flat tones and one dark, never a ramp ---------- */
.band{background:var(--parch);margin-top:70px}
.band .in{max-width:var(--col);margin:0 auto;padding:6px 44px 70px}
.dark{background:var(--dark);color:#fff;margin-top:70px}
.dark .in{max-width:var(--col);margin:0 auto;padding:64px 44px;display:grid;
  grid-template-columns:1fr auto;gap:40px;align-items:end}
.dark .k{font-size:15.5px;color:rgba(255,255,255,.66);margin-bottom:18px}
.dark .big{font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;font-size:38px;
  line-height:1.12;letter-spacing:-.018em;max-width:26ch}
.dark .btn{background:#fff;color:var(--dark);white-space:nowrap}
.dark p{color:rgba(255,255,255,.72)}

/* ---------- footer: the home page's, so every page closes the same way ---------- */
footer{background:#101418;color:rgba(255,255,255,.55);margin-top:80px}
footer .in{max-width:var(--col);margin:0 auto;padding:96px 44px 34px}
.footmark{display:block;width:100%;height:auto;border-top:1px solid rgba(255,255,255,.16);
  padding-top:44px}
.footmark text{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:280px;fill:#fff}
.footrow{display:flex;justify-content:space-between;align-items:center;gap:18px 40px;
  flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);margin-top:40px;padding-top:26px;
  font-size:13.5px}
footer a{color:rgba(255,255,255,.82);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px}
footer a:hover{color:#fff;border-bottom-color:#fff}
footer nav{display:flex;gap:26px;flex-wrap:wrap;padding:0}

@media (max-width:900px){
  .wrap,.band .in,.dark .in{padding-left:22px;padding-right:22px}
  h2{font-size:28px}
  .nav a:not(.btn){display:none}
  .dark .in{grid-template-columns:1fr}
  table.f td,table.f th{font-size:15px}
}
@media (max-width:700px){
  footer .in{padding:56px 24px 28px}
  .footmark{padding-top:30px}
  .footrow{justify-content:flex-start;gap:14px 26px;margin-top:26px}
}
@page{size:Letter;margin:14mm}
@media print{body{background:#fff}.nav,.navr,.cta,.dark .btn{display:none}
  .dark{background:#fff;color:var(--ink)}.dark .big,.dark p{color:var(--ink)}}

/* ---------- the legal and utility pages ----------
   A narrower measure than the marketing pages, because these are read, not
   scanned, and clause headings that carry a number keep it in its own column.
   Scoped on <body class="legal"> so the wide pages are untouched. */
.legal .wrap{max-width:760px}
/* on these pages the masthead is a direct child of <body>, not inside .wrap, so it
   has to carry the column itself or it spans the whole viewport */
.legal nav{max-width:var(--col);margin:0 auto;padding-left:44px;padding-right:44px}
.legal h1{font-size:clamp(34px,3.6vw,42px);max-width:none}
.legal h2{font-size:25px;line-height:1.3;letter-spacing:-.012em;margin:46px 0 12px;
  display:flex;gap:16px;align-items:baseline;max-width:none}
.legal h2 .cl{color:var(--faint);font-size:14px;font-weight:500;min-width:34px;
  font-variant-numeric:tabular-nums}
.legal p{margin:0 0 13px;max-width:none}
.legal p a{color:var(--brand)}
.legal footer{margin-top:0}
.intro{font-size:19px;line-height:1.5;color:var(--mute);margin-top:26px;max-width:60ch}
.stamp{font-size:14px;color:var(--faint);margin-top:22px}
.back{font-size:15.5px;text-decoration:none;color:var(--mute);
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.back:hover{color:var(--ink)}
@media print{.back{display:none}.legal h2{break-after:avoid}.legal p{orphans:3;widows:3}}

/* ---------- the header band (2026-09-03) ----------
   Every page that is not the home page now opens the same way: the site's
   shader on a dark ground, the masthead over it, and on the two marketing
   pages the headline too. Colours come off the canvas per page and the shader
   itself is web/wash.js, one copy for the whole site — the same reason this
   stylesheet exists at all.

   This was added because /updates/ and /answers/ shipped with a band and these
   pages did not, which made three designs on one domain.

   Named .masthead, not .band: site.css line 119 already owns .band for a light
   grey section, and the first version of this collided with it — every existing
   .band section on /entry-check and /surtax-refund was silently repainted with
   white type on light grey.

   The scrim is not decoration. The wave's light stops climb past #9169BF,
   where white type falls under 4.5:1, and the field moves, so the worst case
   is not a fixed pixel. Contrast is measured on the rendered canvas. */
.masthead{position:relative;overflow:hidden;isolation:isolate;color:#fff}
.masthead .wash{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.masthead .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,12,.66),rgba(3,4,12,.52) 46%,rgba(3,4,12,.72))}
.masthead .wrap,.masthead nav{position:relative;z-index:2}
.masthead .wrap{padding-bottom:clamp(48px,6vw,88px)}
.masthead.slim nav{padding-bottom:32px}

/* the masthead, inverted onto the band */
.masthead .logo span{color:#fff}
.masthead .logo .mark{stroke:#fff}
.masthead .nav a,.masthead .navr a,.masthead .back{color:rgba(255,255,255,.82)}
.masthead .back{border-bottom-color:rgba(255,255,255,.3)}
.masthead .nav a:hover,.masthead .navr a:hover,.masthead .back:hover{color:#fff}
.masthead .nav a.here,.masthead .navr a.here{color:rgba(255,255,255,.52)}
/* a brand-blue pill on a blue band disappears; the inverse is the same button.
   Specificity matters here: .nav a.btn is (0,2,1), so .masthead .btn at (0,2,0)
   loses and the pill renders white on white. .masthead a.btn ties and wins on
   source order, and it also catches the hero button, which .nav never did. */
.masthead a.btn{background:#fff;color:var(--ink)}
.masthead a.btn:hover{background:rgba(255,255,255,.88)}

/* the hero, on the band */
.masthead .kicker{color:rgba(255,255,255,.78)}
.masthead h1{color:#fff}
.masthead .stand{color:rgba(255,255,255,.86)}
.masthead .stand b,.masthead .kicker b{color:#fff}
.masthead .lnk{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.masthead .lnk:hover{border-bottom-color:#fff}