/* ============================================================
   BVI Formation — modern black / white / navy
   Type  : Instrument Sans (display) · Inter (UI + body)
   ============================================================ */

:root{
  /* ---- core palette ---- */
  --black:#0B0B0C;
  --white:#FFFFFF;
  /* Blue taken from the BVI flag (Blue Ensign field, Pantone 280C). */
  --navy:#012169;
  --navy-800:#011A52;      /* hover / pressed */
  --navy-700:#012B87;
  --navy-600:#1B3FA0;      /* interactive: links, focus, active */
  --navy-50:#E9EDF7;

  /* ---- neutrals ---- */
  --g50:#F7F8FA;
  --g100:#EFF1F5;
  --g200:#E1E5EC;
  --g300:#CBD1DB;
  --g400:#98A1B0;          /* borders, dividers, decorative marks — never text */
  --g450:#666E7E;          /* smallest supporting text (4.8:1 on the sunken ground) */
  --g500:#5C6474;          /* muted body text (5.6:1 on the sunken ground) */
  --g600:#4A515E;
  --g800:#22262E;

  --danger:#B42318;
  /* the field of the BVI coat of arms, sampled from the artwork itself.
     Navy stays the brand and the interactive colour; green is reserved for
     marks that mean satisfied, included or done. 7.7:1 on white. */
  --green:#006129;
  --green-700:#00501F;
  --green-50:#E6EFEA;
  --success:var(--green);

  /* ---- semantic ---- */
  --bg:var(--white);
  --bg-sunken:var(--g50);
  --text:var(--black);
  --text-muted:var(--g500);
  --text-subtle:var(--g450);
  --line:var(--g200);
  --line-strong:var(--g300);

  --f-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Not loaded from anywhere — the system stack is the right answer for the
     little code that appears in a guide, and a fourth webfont is not. */
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --shell:1200px;
  --gutter:clamp(1.25rem,4vw,2.5rem);

  --r-sm:6px;
  --r:10px;
  --r-lg:16px;

  --shadow-sm:0 1px 2px rgba(11,11,12,.05);
  --shadow:0 4px 16px -4px rgba(11,11,12,.08),0 2px 6px -2px rgba(11,11,12,.05);
  --shadow-lg:0 24px 48px -12px rgba(14,33,72,.18);

  --step--1:.8125rem;
  --step-0:1rem;
  --step-1:1.125rem;
  --step-2:clamp(1.375rem,1.2rem + .7vw,1.75rem);
  --step-3:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);
  --step-4:clamp(2.25rem,1.6rem + 2.8vw,3.5rem);
  --step-5:clamp(2.75rem,1.7rem + 4.6vw,5rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 var(--step-0)/1.6 var(--f-sans);
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-600);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--navy)}
::selection{background:var(--navy);color:var(--white)}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:760px}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--sunken{background:var(--bg-sunken)}
.section--navy{background:var(--navy);color:var(--white)}
.section--black{background:var(--black);color:var(--white)}
/* white cards sitting on a dark section must reset the inherited light text */
.section--black .card,.section--black .reqcard,.section--black .note,.section--black .rail,
.section--navy .card,.section--navy .reqcard,.section--navy .note,.section--navy .rail{color:var(--text)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
/* Tighter still, for pages whose sections are short. The default band is set
   for a page with a lot in each section; on About and Requirements, where most
   of the prose has been taken out, the same padding stacks two lots of it
   between a figure and the next heading and the page reads as mostly gap. */
.section--close{padding-block:clamp(1.75rem,3.5vw,3rem)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.1;margin:0 0 .5em;letter-spacing:-.025em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2);letter-spacing:-.02em}
h4{font-size:var(--step-1);letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:66ch}
.display{font-size:var(--step-5);letter-spacing:-.035em;line-height:1.02}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--g600);max-width:56ch}
.section--navy .lede,.section--black .lede{color:rgba(255,255,255,.72)}
.muted{color:var(--text-muted)}
.num{font-variant-numeric:tabular-nums}

.eyebrow{
  font:600 .75rem/1 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-600);margin:0 0 1rem;display:flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor;flex-shrink:0}
.section--navy .eyebrow,.section--black .eyebrow{color:rgba(255,255,255,.6)}
.eyebrow--plain::before{display:none}

.section__head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
/* first section of a page carries the h1 — no separate title band above it */
.section__head h1{font-size:var(--step-4);line-height:1.04;letter-spacing:-.035em;margin:0 0 .5rem}
.section--lead{padding-block:clamp(2.75rem,5vw,4.25rem) clamp(3.5rem,7vw,6.5rem)}
/* A lead section told to sit close to what follows. It needs saying
   explicitly: .section--lead is declared after .section--close, so on its own
   .section--close lost and the page kept a six-rem gap under its opening. */
.section--lead.section--close{padding-block:clamp(2.25rem,4vw,3.25rem) clamp(1.75rem,3.5vw,3rem)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:500 .9375rem/1 var(--f-sans);letter-spacing:-.005em;
  padding:.8125rem 1.375rem;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--navy);color:var(--white);text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s;
  white-space:nowrap;
}
.btn:hover{background:var(--navy-800);color:var(--white);box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.btn--lg{padding:1rem 1.75rem;font-size:1rem}
.btn--sm{padding:.5625rem .875rem;font-size:.8125rem}
.btn--secondary{background:var(--white);color:var(--black);border-color:var(--line-strong)}
.btn--secondary:hover{background:var(--g50);color:var(--black);border-color:var(--g400)}
.btn--ghost{background:transparent;color:var(--black);border-color:transparent}
.btn--ghost:hover{background:var(--g100);color:var(--black);box-shadow:none}
.btn--onDark{background:var(--white);color:var(--navy)}
.btn--onDark:hover{background:var(--g100);color:var(--navy)}
.btn--outlineDark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
.btn--outlineDark:hover{background:rgba(255,255,255,.1);color:var(--white);border-color:rgba(255,255,255,.5)}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn__arrow{transition:transform .16s}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr__inner{display:flex;align-items:center;gap:1.5rem;height:92px}
.hdr__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--black);flex-shrink:0}
.hdr__brand:hover{color:var(--black)}

/* Wordmark — the name is the logo. Weight and colour carry it; no separate icon. */
.wordmark{font-family:var(--f-display);font-size:1.75rem;line-height:1;white-space:nowrap;
  display:inline-block;letter-spacing:-.03em}
.wordmark b{font-weight:700;color:var(--navy);letter-spacing:-.015em}
.wordmark span{font-weight:400;color:var(--black)}
.ftr .wordmark b,.ftr .wordmark span{color:var(--white)}
.section--navy .wordmark b,.section--navy .wordmark span,
.section--black .wordmark b,.section--black .wordmark span{color:var(--white)}
/* tighter horizontal metrics so a seventh link fits: the type size is left
   alone, having been deliberately enlarged earlier */
.hdr__nav{display:flex;align-items:center;gap:.125rem;margin-left:auto;list-style:none;padding:0;margin-block:0}
.hdr__nav a:not(.btn){font-size:.875rem;font-weight:600;color:var(--black);text-decoration:none;
  letter-spacing:-.012em;padding:.5rem .5625rem;border-radius:var(--r-sm);white-space:nowrap;
  transition:color .16s,background .16s}
.hdr__nav a:not(.btn):hover{color:var(--navy);background:var(--g100)}
/* every link is black and bold now, so the current page is marked by the rule
   under it rather than by weight. The rule is a pseudo-element, not an inset
   shadow: a shadow follows the link's corner radius and bows at both ends. */
.hdr__nav a:not(.btn){position:relative}
.hdr__nav a:not(.btn)[aria-current="page"]{color:var(--navy)}
.hdr__nav a:not(.btn)[aria-current="page"]::after{content:"";position:absolute;
  left:.5625rem;right:.5625rem;bottom:.1875rem;height:2px;background:var(--navy);border-radius:0}
.hdr__cta{margin-left:.25rem}
.hdr__cta .btn{padding:.75rem 1.0625rem;font-size:.9375rem;border-radius:var(--r)}
.hdr__burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:.5rem;cursor:pointer;color:var(--black)}
/* the nav is heavier now, so it needs the drawer sooner than it used to:
   the full row stops fitting a little above 1040px */
@media (max-width:1116px){
  .hdr__burger{display:grid;place-items:center}
  .hdr__nav{position:absolute;inset:92px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1rem;margin:0}
  .hdr__nav a:not(.btn){font-size:1rem;padding:.75rem .5rem;border-radius:0}
  .hdr__cta{margin:.75rem .5rem 0}
  .hdr__cta .btn{width:100%}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.25rem,4vw,3.5rem) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
/* The flag fills the whole hero rather than sitting in one corner of it.
   A corner placement had to be cropped, and a cropped flag reads as a mistake:
   the Union canton smeared pink across the top and the shield was cut by the
   viewport edge. Covering the full area means no edge of the image is ever
   visible — what shows is a wash of the ensign's colours, and the scrim over
   it does the work of keeping the copy readable.

   The image is a drawn flag, not a photograph of a cloth one. A photograph
   carries folds and lighting that turn to grey mush at this opacity. */
.hero{isolation:isolate}
.hero>.shell{position:relative;z-index:2}
.hero__flag{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:62% 44%;
  opacity:.34;pointer-events:none;user-select:none;z-index:0}
/* two scrims: one across, lightest where the card sits so the colour survives
   behind it, and one down, so the hero resolves to white at the seam with the
   section below rather than stopping at a line */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 34%,
      rgba(255,255,255,.62) 62%,rgba(255,255,255,.7) 100%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.6) 74%,#fff 100%)}
/* the register's labels are the smallest type in the hero and sat at 4.66:1
   over the wash — passing, but with almost nothing to spare. One step darker
   on this page's copy alone puts them back where they were on plain white. */
.hero .hero__meta dt{color:var(--g500)}
/* on a phone the copy runs the full width, so the wash has to give way to it */
@media (max-width:960px){
  .hero__flag{object-position:70% 38%;opacity:.26}
  .hero::after{background:
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.88) 42%,
      rgba(255,255,255,.94) 72%,#fff 100%)}
}
.hero__grid>*{min-width:0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr;gap:3rem}}
.hero__title{margin-bottom:.35em}
/* One action and one route, not two buttons of near-equal weight. Forming a
   company is a thing you do; seeing what is included is somewhere you go, and a
   link says that more honestly than a second button of the same size. */
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem;margin-top:2rem}
.hero__route{display:inline-flex;align-items:center;gap:.4375rem;text-decoration:none;
  font-size:1rem;font-weight:500;letter-spacing:-.008em;color:var(--navy);
  padding-bottom:.1875rem;border-bottom:1.5px solid var(--navy-50);transition:border-color .16s}
.hero__route:hover{color:var(--navy);border-bottom-color:var(--navy)}
.hero__route:focus-visible{outline:2px solid var(--navy-600);outline-offset:3px;border-radius:2px}
.hero__route .btn__arrow{transition:transform .16s}
.hero__route:hover .btn__arrow{transform:translateX(3px)}

/* Four equal columns, so the rules are evenly spaced and every value sits on one
   baseline. The price leads on colour rather than size — a larger figure in one
   cell would put that value off the common baseline and cost the symmetry. */
.hero__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:2.75rem;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero__meta>div{min-width:0;padding:.875rem 0 .875rem 1rem;border-left:1px solid var(--line)}
.hero__meta>div:first-child{padding-left:0;border-left:0}
.hero__meta dt{font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-subtle);margin-bottom:.375rem;white-space:nowrap}
.hero__meta dd{margin:0;font-family:var(--f-display);font-size:1.125rem;font-weight:600;
  letter-spacing:-.022em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.hero__meta--lead dd{color:var(--navy)}
@media (max-width:640px){
  /* two by two, with the rules drawn so every cell keeps a matching pair of edges */
  .hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__meta>div:nth-child(odd){padding-left:0;border-left:0}
  .hero__meta>div:nth-child(even){border-left:1px solid var(--line)}
  .hero__meta>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* A ruled register line rather than four floating pairs. The Territory runs on
   registers and every one of them is a ruled table, so the divided cells are the
   subject's own vernacular — and they bind the four facts into one object.
   The price leads, because it is the question the reader actually has. */
/* Four equal columns, so the rules are evenly spaced and every value sits on one
   baseline. The price leads on colour rather than size — a larger figure in one
   cell would put that value off the common baseline and cost the symmetry. */
.hero__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:2.75rem;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero__meta>div{min-width:0;padding:.875rem 0 .875rem 1rem;border-left:1px solid var(--line)}
.hero__meta>div:first-child{padding-left:0;border-left:0}
.hero__meta dt{font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-subtle);margin-bottom:.375rem;white-space:nowrap}
.hero__meta dd{margin:0;font-family:var(--f-display);font-size:1.125rem;font-weight:600;
  letter-spacing:-.022em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.hero__meta--lead dd{color:var(--navy)}
@media (max-width:640px){
  /* two by two, with the rules drawn so every cell keeps a matching pair of edges */
  .hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__meta>div:nth-child(odd){padding-left:0;border-left:0}
  .hero__meta>div:nth-child(even){border-left:1px solid var(--line)}
  .hero__meta>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- sequence rail (signature device) ---------- */
.seq{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--white);box-shadow:var(--shadow-lg);color:var(--text)}
.seq__row{display:grid;grid-template-columns:auto 1fr auto;gap:1.125rem;align-items:center;
  padding:1.375rem 1.5rem;border-bottom:1px solid var(--line);position:relative}
.seq__row:last-child{border-bottom:0}
.seq__n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font:600 .8125rem/1 var(--f-sans);font-variant-numeric:tabular-nums;
  background:var(--navy-50);color:var(--navy);border:1px solid var(--navy-50)}
.seq__row--active .seq__n{background:var(--navy);color:var(--white);border-color:var(--navy)}
.seq__t{font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:-.015em;margin:0 0 .15rem}
.seq__d{margin:0;font-size:.8438rem;color:var(--text-muted);max-width:none;line-height:1.5}
.seq__badge{font-size:.75rem;color:var(--text-subtle);font-variant-numeric:tabular-nums}
.seq__head{padding:1.125rem 1.5rem;border-bottom:1px solid var(--line);background:var(--g50);
  font:600 .75rem/1 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--g500)}

/* ---------- global flow stepper ---------- */
.flow{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:92px;z-index:40}
.flow__list{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;gap:0;overflow-x:auto}
.flow__item{flex:1 1 0;min-width:150px}
.flow__link{display:flex;align-items:center;gap:.6875rem;padding:.9375rem .25rem;text-decoration:none;
  color:var(--text-subtle);border-top:2px solid transparent;height:100%;transition:color .16s,border-color .16s}
.flow__link[aria-disabled="true"]{cursor:default;pointer-events:none}
.flow__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font:600 .75rem/1 var(--f-sans);font-variant-numeric:tabular-nums;
  border:1.5px solid currentColor;transition:all .16s}
.flow__label{font-size:.875rem;font-weight:450;letter-spacing:-.005em}
.flow__link:hover{color:var(--g600)}
.flow__item--done .flow__link{color:var(--green-700)}
.flow__item--done .flow__n{background:var(--green);border-color:var(--green);color:var(--white)}
.flow__item--current .flow__link{color:var(--black);border-top-color:var(--navy);font-weight:500}
.flow__item--current .flow__n{background:var(--navy);border-color:var(--navy);color:var(--white)}
@media (max-width:640px){
  .flow__label{display:none}
  .flow__item{min-width:0}
  .flow__link{justify-content:center;padding-inline:0}
}

/* ---------- cards ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.75rem;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card h3{font-size:1.125rem;margin-bottom:.5rem}
.card p{font-size:.9375rem;color:var(--g600);margin:0}
.card__ico{width:34px;height:34px;border-radius:var(--r-sm);background:var(--navy-50);color:var(--navy);
  display:grid;place-items:center;margin-bottom:1.125rem}
.section--sunken .card{background:var(--white)}

/* A card that turns over. The front carries the icon and the heading; the
   paragraph is on the back.

   The back face is the one left in normal flow, so the card is exactly as tall
   as its paragraph — the same height it was before it could turn, and the grid
   keeps the rhythm it had. The front is laid over it. Both faces are in the
   document either way, so a screen reader gets the whole card without having
   to turn anything; the turn is a visual affordance, not a gate on the text.

   There is no button over the card any more. There was one, to give a phone
   something to tap, and it sat on top of everything — including the link on
   the back of the refund card, which could be seen and not clicked. The tap
   is a click handler on the card itself now, which steps aside for a link,
   and a keyboard reaches the back through :focus-within on that same link. */
.card--flip{position:relative;padding:0;background:none;border:0;box-shadow:none;
  perspective:1100px;cursor:pointer}
.card--flip:hover{box-shadow:none;border-color:transparent}
.card__inner{position:relative;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.card--flip:hover .card__inner,
.card--flip:focus-within .card__inner,
.card--flip.is-turned .card__inner{transform:rotateY(180deg)}
.card__face{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.75rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:border-color .18s,box-shadow .18s}
.card--flip:hover .card__face,
.card--flip:focus-within .card__face{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card__face--front{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;z-index:2}
.card__face--front h3{margin-bottom:0}
.card__face--back{position:relative;transform:rotateY(180deg);height:100%}
/* backface-visibility keeps the face that is turned away out of sight, but not
   reliably out of the way of a pointer. Saying so outright means a link on the
   back is never fighting the front of the card for the same click. */
.card--flip:hover .card__face--front,
.card--flip:focus-within .card__face--front,
.card--flip.is-turned .card__face--front{pointer-events:none}
.card__face--back{pointer-events:none}
.card--flip:hover .card__face--back,
.card--flip:focus-within .card__face--back,
.card--flip.is-turned .card__face--back{pointer-events:auto}
.card__face--back a{position:relative;z-index:3}

@media (prefers-reduced-motion:reduce){
  .card__inner{transition:none}
  .card--flip:hover .card__inner,
  .card--flip:focus-within .card__inner,
  .card--flip.is-turned .card__inner{transform:none}
  /* Nothing rotates, so the front is taken out of the way instead. */
  .card--flip:hover .card__face--front,
  .card--flip:focus-within .card__face--front,
  .card--flip.is-turned .card__face--front{opacity:0;pointer-events:none}
  .card__face--back{transform:none;pointer-events:auto}
}

/* ---------- the "which one is yours" picker ----------
 *
 * Four labels, one panel. Nobody forming a company is interested in all four
 * patterns — they are one of them — so the section asks which and answers that,
 * in a third of the height the four stacked paragraphs took.
 *
 * Both faces of every pattern stay in the document whichever tab is showing:
 * the tabs decide what is on screen, not what exists, so a crawler and a
 * screen reader get all four and a browser with no JavaScript gets the first
 * one with the rest below it rather than nothing. */
.pick{display:grid;grid-template-columns:230px 1fr;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--white)}
.pick__list{border-right:1px solid var(--line);background:var(--bg-sunken);
  display:flex;flex-direction:column}
.pick__btn{appearance:none;border:0;background:none;text-align:left;cursor:pointer;
  font:inherit;padding:.95rem 1.1rem;color:var(--g600);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.65rem;transition:background .15s,color .15s}
.pick__btn:last-child{border-bottom:0}
.pick__btn:hover{background:var(--g100);color:var(--g800)}
.pick__btn[aria-selected="true"]{background:var(--white);color:var(--navy);font-weight:600;
  box-shadow:inset 3px 0 0 var(--navy)}
.pick__btn svg{flex:0 0 auto;width:17px;height:17px;opacity:.75}
.pick__btn:focus-visible{outline:2px solid var(--navy-600);outline-offset:-2px}
.pick__panel{padding:1.75rem}
.pick__t{font-size:1.25rem;margin:0 0 .5rem;display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap}
.pick__d{font-size:.9375rem;color:var(--g600);margin:0 0 1.1rem;max-width:58ch}
.pick__facts{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.pick__facts li{display:flex;gap:.55rem;align-items:flex-start;font-size:.875rem;
  color:var(--g600)}
.pick__facts svg{flex:0 0 auto;width:15px;height:15px;color:var(--green);margin-top:.18rem}
.pick__foot{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--g100);
  font-size:.875rem;color:var(--text-muted)}
@media (max-width:720px){
  /* The labels become a scrolling row above the panel rather than a column
     beside it, which is the only shape that fits four of them on a phone. */
  .pick{grid-template-columns:1fr}
  .pick__list{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-right:0;border-bottom:1px solid var(--line)}
  .pick__btn{border-bottom:0;border-right:1px solid var(--line);white-space:nowrap}
  .pick__btn[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--navy)}
  .pick__panel{padding:1.35rem}
}

/* ---------- tables ---------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x>.table{min-width:400px}
.table{width:100%;border-collapse:collapse;font-size:.9375rem}
.table caption{text-align:left;font:600 .75rem/1 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--g500);padding-bottom:1rem}
.table th,.table td{padding:.9375rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{font-size:.75rem;font-weight:500;color:var(--text-muted);letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid var(--line-strong);padding-block:.75rem}
.table td:last-child,.table th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table__note{font-size:.8125rem;color:var(--text-muted);line-height:1.5}
.table__total td{font-family:var(--f-display);font-weight:600;font-size:1.125rem;
  border-bottom:none;border-top:1px solid var(--line-strong);padding-top:1.125rem}

.tag{display:inline-block;font-size:.6875rem;font-weight:500;letter-spacing:.03em;padding:.1875rem .4375rem;
  border-radius:4px;background:var(--g100);color:var(--g600);white-space:nowrap}
.tag--stat{background:var(--navy-50);color:var(--navy-700)}

/* ---------- footer ---------- */
.ftr{background:var(--black);color:rgba(255,255,255,.74);padding-block:3.5rem 2rem;font-size:.9375rem}
/* The brand block, then however many link columns are showing. The count is
   not fixed: the extra column ships hidden and is unhidden only once somebody
   puts links in it, so a fixed three would leave a gap where it is not and a
   fixed four a gap where it has not been used yet.
   grid-auto-columns rather than repeat(auto-fit, ...): an auto-repeat cannot
   be combined with a flexible track like the 1.6fr brand column — the whole
   declaration is thrown away and the footer collapses into one column. This
   sizes the first column explicitly and lets every column after it be an
   equal share of what is left, however many there turn out to be. */
.ftr__grid{display:grid;grid-template-columns:1.6fr;grid-auto-flow:column;
  grid-auto-columns:minmax(9rem,1fr);gap:2.5rem;padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.18)}
@media (max-width:720px){.ftr__grid{grid-template-columns:1fr;grid-auto-flow:row;
  grid-auto-columns:auto;gap:2rem}}
.ftr h4{color:var(--white);font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.625rem}
.ftr a{color:rgba(255,255,255,.80);text-decoration:none}
.ftr a:hover{color:var(--white)}
.ftr p{max-width:38ch;margin:0}
.ftr__brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1.125rem}
/* social marks: 40px targets, the icon itself smaller inside them. Each link
   is hidden until assets/js/site.js carries a real address for it, so the row
   never points anywhere that does not exist. */
/* .ftr ul is a grid and outranks a lone class, so this has to be qualified */
.ftr .social{display:flex;gap:.375rem;list-style:none;margin:1.125rem 0 0;padding:0}
.social[hidden]{display:none}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:rgba(255,255,255,.86);background:rgba(255,255,255,.07);
  transition:color .16s,background .16s}
.social a:hover{color:var(--white);background:rgba(255,255,255,.18)}
.social a:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}
.social svg{width:19px;height:19px;display:block}

/* Google's preferred-source deeplink. Google publishes its own button artwork
   and an embed script; this is the plain deeplink in the site's own styling
   rather than a hand-drawn copy of their mark. */
.gsrc{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;
  padding:.625rem 1rem;border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.42);color:var(--white);
  font-size:.8125rem;font-weight:500;letter-spacing:-.006em;
  transition:border-color .16s,color .16s,background .16s}
.gsrc[hidden]{display:none}
.gsrc:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.12)}
.gsrc:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}
.gsrc svg{width:17px;height:17px;flex-shrink:0}

.ftr__base{padding-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:.8125rem;color:rgba(255,255,255,.64)}

/* ---------- misc ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.center{text-align:center}
.center .lede,.center p{margin-inline:auto}
.center .eyebrow{justify-content:center}
/* Long button labels must not push the page sideways on small screens. */
@media (max-width:520px){
  .btn{white-space:normal;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   FORM · ADD-ONS · CHECKOUT
   ============================================================ */

.pagehead{padding-block:clamp(2.25rem,5vw,3.25rem) clamp(1.5rem,3vw,2rem);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:var(--step-3);margin-bottom:.3em}
.pagehead p{margin:0;color:var(--g600);max-width:62ch}

/* ---------- schedule sidebar + sheet ---------- */
.form-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:start;padding-block:clamp(2rem,4vw,3rem)}
/* grid items default to min-width:auto, which lets wide children push the page sideways */
.form-layout>*{min-width:0}
@media (max-width:900px){.form-layout{grid-template-columns:minmax(0,1fr)}}

/* The sticky has to sit on the grid item, not on the list inside it: the grid is
   align-items:start, so the wrapper shrink-wraps the list and leaves it no room
   to travel. On the item, the grid area gives it the height of the whole row. */
.form-layout>nav{position:sticky;top:160px}
.schedules{list-style:none;margin:0;padding:0;display:grid;gap:1px}
@media (max-width:900px){
  .form-layout>nav{position:static}
  .schedules{display:flex;overflow-x:auto;gap:.375rem;padding-bottom:.5rem;
    border-bottom:1px solid var(--line);margin-bottom:1.5rem}
}
.schedules__btn{
  display:flex;align-items:center;gap:.625rem;width:100%;text-align:left;background:none;border:0;
  padding:.625rem .75rem;border-radius:var(--r-sm);cursor:pointer;color:var(--g500);
  font:450 .875rem/1.3 var(--f-sans);transition:background .16s,color .16s;white-space:nowrap;
}
.schedules__btn:hover{background:var(--g100);color:var(--black)}
.schedules__btn[aria-current="step"]{background:var(--navy-50);color:var(--navy);font-weight:500}
.schedules__n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font:600 .6875rem/1 var(--f-sans);font-variant-numeric:tabular-nums;
  background:var(--g100);color:var(--g500);transition:all .16s}
.schedules__btn[aria-current="step"] .schedules__n{background:var(--navy);color:var(--white)}
.schedules__btn[data-done="true"]{color:var(--g800)}
.schedules__btn[data-done="true"] .schedules__n{background:var(--green);color:var(--white)}

.sheet{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.5rem)}
.sheet__head{padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--line);scroll-margin-top:178px}
.sheet__kicker{font:600 .75rem/1 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--navy-600);margin-bottom:.625rem}
.sheet__head h2{font-size:var(--step-2);margin-bottom:.4rem}
.sheet__head p{margin:0;color:var(--g600);font-size:.9375rem}
.step[hidden]{display:none}

/* ---------- fields ---------- */
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:span 2}
.span-all{grid-column:1/-1}
@media (max-width:680px){
  .grid--2,.grid--3{grid-template-columns:1fr}
  .span-2,.span-all{grid-column:auto}
}

.field{display:flex;flex-direction:column;gap:.4375rem;min-width:0}
.field>label,.fieldset__legend{font-size:.875rem;font-weight:500;color:var(--g800);letter-spacing:-.005em}
/* A hint written inside its label. Inline, it ran straight on from the label
   text — "First nameIf the beneficial owner is an entity…" — because a span
   inside a label is inline by default and nothing separated the two. */
.field .hint{display:block;margin-top:.1875rem;font-size:.8125rem;font-weight:400;
  color:var(--text-muted);line-height:1.45}
.req{color:var(--danger);font-weight:400}

.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=date],.field input[type=number],.field select,.field textarea{
  font:400 .9375rem/1.5 var(--f-sans);color:var(--text);background:var(--white);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.625rem .75rem;width:100%;
  transition:border-color .16s,box-shadow .16s;
}
.field textarea{min-height:104px;resize:vertical}
.field select{appearance:none;padding-right:2.25rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7484' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center}
.field input::placeholder,.field textarea::placeholder{color:var(--g450)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--g400)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(27,63,160,.16)}
.field input:disabled,.field select:disabled{background:var(--g50);color:var(--text-muted);cursor:not-allowed}

.field--error input,.field--error select,.field--error textarea{border-color:var(--danger)}
.field--error input:focus,.field--error select:focus,.field--error textarea:focus{box-shadow:0 0 0 3px rgba(180,35,24,.14)}
.field__err{font-size:.8125rem;color:var(--danger);display:flex;align-items:center;gap:.3125rem}
.field__err[hidden]{display:none}

/* ---------- choice controls (real, focusable, keyboard-operable) ---------- */
.fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:.625rem}
.choices--stack{flex-direction:column;gap:.5rem}
.choice{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.625rem .875rem;
  background:var(--white);font-size:.9375rem;transition:border-color .16s,background .16s,box-shadow .16s}
.choice:hover{border-color:var(--g400);background:var(--g50)}
.choice:has(input:checked){border-color:var(--navy);background:var(--navy-50);box-shadow:0 0 0 1px var(--navy)}
.choice input{
  appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;
  width:17px;height:17px;border:1.5px solid var(--g400);background:var(--white);
  cursor:pointer;display:grid;place-content:center;transition:border-color .16s,background .16s;
}
.choice input[type=radio]{border-radius:50%}
.choice input[type=checkbox]{border-radius:4px}
.choice input::after{content:"";transition:transform .14s;transform:scale(0)}
.choice input[type=radio]::after{width:7px;height:7px;border-radius:50%;background:var(--white)}
.choice input[type=checkbox]::after{width:10px;height:10px;
  background:var(--white);clip-path:polygon(14% 47%,0 61%,39% 100%,100% 22%,86% 9%,39% 72%)}
.choice input:checked{border-color:var(--navy);background:var(--navy)}
.choice input:checked::after{transform:scale(1)}
.choice input:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.fieldset.field--error .choice{border-color:var(--danger)}

/* locked value */
.locked{display:flex;align-items:flex-start;gap:.75rem;border:1px solid var(--line);background:var(--g50);
  border-radius:var(--r-sm);padding:.875rem 1rem;font-size:.875rem;color:var(--g600)}
.locked strong{color:var(--black);font-weight:500}
.locked svg{flex-shrink:0;color:var(--navy-600);margin-top:1px}

/* notices */
.note{border:1px solid var(--line);border-left:3px solid var(--navy-600);background:var(--g50);
  border-radius:var(--r-sm);padding:.9375rem 1.125rem;font-size:.875rem;color:var(--g600)}
.note p{margin:0;max-width:none}
.note p+p{margin-top:.5rem}
.note strong{color:var(--black);font-weight:500}
.note--warn{border-left-color:#B7791F;background:#FFFBEB;border-color:#FDE9C8}
.note--info{border-left-color:var(--navy);background:var(--navy-50);border-color:#DCE5F6}

/* repeatable parties */
.party{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;margin-bottom:1rem;background:var(--white)}
.party__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;margin-bottom:1.375rem;border-bottom:1px solid var(--line)}
.party__name{font-family:var(--f-display);font-weight:600;font-size:.9375rem;letter-spacing:-.01em}
.party__drop{background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--g600);
  cursor:pointer;font:450 .8125rem/1 var(--f-sans);padding:.4375rem .6875rem;transition:all .16s}
.party__drop:hover{background:#FEF2F2;border-color:#FCA5A5;color:var(--danger)}
.subhead{grid-column:1/-1;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g500);padding-top:.75rem;margin-top:.5rem;border-top:1px solid var(--line)}
.subhead:first-child{padding-top:0;margin-top:0;border-top:0}

/* step nav */
.stepnav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.stepnav__count{font-size:.875rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* The way out, set below the step navigation and quieter than it. It is
   deliberately not a primary button: finishing the form is the better path for
   everybody, and this is the one for people who are not going to. */
.stepnav--out{margin-top:1rem;padding-top:1rem;align-items:baseline}
.stepnav__note{font-size:.8125rem;color:var(--g600);margin:0;max-width:46ch;line-height:1.5}
.stepnav__ask{
  margin:1rem 0 0;padding:.875rem 1rem;border:1px solid var(--navy-600);
  border-radius:var(--r);background:var(--navy-50);font-size:.875rem;line-height:1.5;
  flex:1 1 100%
}

/* Shown only on a deployment that is charging a token amount to test a
   payment processor. Loud on purpose: the one thing worse than a site that
   cannot take a test payment is a site quietly selling company formations for
   a dollar. */
.rail__test{
  margin-top:.75rem;padding:.625rem .75rem;border-radius:var(--r-sm,6px);
  background:#FEF3F2;border:1px solid #B42318;color:#7A271A;
  font-size:.8125rem;line-height:1.45
}

/* ---------- settlement ---------- */
/* The processor's element mounts inside .dropin. It brings its own styling —
   it is their iframe — so this only reserves the room and keeps it from
   collapsing to nothing while it loads. */
.dropin{min-height:260px;margin-top:1.5rem}
.dropin__status{font-size:.8125rem;color:var(--g500);margin:.75rem 0 0}
.pay__summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1.75rem;padding:1rem 1.25rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-sunken);font-size:.9375rem
}
.pay__summary b{font-size:1.25rem;font-family:var(--f-display);letter-spacing:-.01em}

/* The reference, in the rail, from the moment the order is recorded — which
   is now when the customer arrives at the checkout rather than when they
   press a button. It is the one thing on the page they may need to write
   down, so it is set in the mono face at a size that survives a photograph. */
.rail__ref{
  margin:.875rem 0 0;padding-top:.875rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--g500)
}
.rail__ref b{display:block;margin-top:.125rem;font-size:1rem;color:var(--text);
  letter-spacing:.02em}

/* The payment form, and the acceptance that unlocks it.

   The processor's element is mounted as soon as the order exists, so the
   customer can see the thing they are about to fill in. Until the terms are
   accepted it is dimmed and inert: pointer-events blocks the mouse, the
   `inert` attribute this file cannot set blocks the keyboard, and the button
   over the top sends anyone who tries back to the tick box. Hiding it instead
   would read as a page that had not finished loading. */
.pay-box{margin-top:1.25rem}
.pay-box__frame{position:relative}
.pay-box.is-locked .dropin{
  opacity:.4;filter:grayscale(.55);pointer-events:none;user-select:none;
  transition:opacity .18s,filter .18s
}
.pay-box__lock{
  position:absolute;inset:0;width:100%;display:flex;align-items:center;
  justify-content:center;border:1px dashed var(--line-strong);
  border-radius:var(--r);background:rgba(255,255,255,.62);
  font:inherit;cursor:pointer;padding:1rem
}
/* The label sits on whatever the processor has drawn underneath, which we do
   not control and which changes with the wallets a browser offers. A solid
   pill is the only way to be sure the one sentence a blocked customer needs
   to read is legible. */
.pay-box__lock span{
  display:inline-block;padding:.5rem 1.125rem;border-radius:999px;
  background:var(--white);border:1px solid var(--line-strong);
  box-shadow:0 1px 2px rgba(11,17,32,.06),0 8px 20px -14px rgba(11,17,32,.4);
  font-size:.9375rem;font-weight:500;color:var(--g800);text-align:center
}
.pay-box__lock:hover span{color:var(--navy-800);border-color:var(--navy-600)}
.pay-box:not(.is-locked) .pay-box__lock{display:none}
@media (prefers-reduced-motion:reduce){.pay-box.is-locked .dropin{transition:none}}

/* ---------- add-ons ---------- */
.addons{display:grid;gap:.75rem}
.addon{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.375rem;background:var(--white);
  transition:border-color .16s,box-shadow .16s,background .16s}
.addon:hover{border-color:var(--g400);box-shadow:var(--shadow-sm)}
.addon:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);background:var(--navy-50)}
.addon input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:18px;height:18px;flex-shrink:0;
  border:1.5px solid var(--g400);border-radius:4px;background:var(--white);cursor:pointer;
  display:grid;place-content:center;transition:all .16s}
.addon input::after{content:"";width:10px;height:10px;background:var(--white);transform:scale(0);
  transition:transform .14s;clip-path:polygon(14% 47%,0 61%,39% 100%,100% 22%,86% 9%,39% 72%)}
.addon input:checked{background:var(--navy);border-color:var(--navy)}
.addon input:checked::after{transform:scale(1)}
.addon input:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.addon__title{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;
  letter-spacing:-.015em;margin-bottom:.25rem}
.addon__desc{display:block;font-size:.875rem;color:var(--g600);line-height:1.5;max-width:58ch}
.addon__price{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.addon__price small{display:block;font-size:.6875rem;font-weight:400;color:var(--text-muted);margin-top:.1875rem}
/* the standalone Registry products carry a list of what each one shows */
.addon--detail{padding:1.375rem 1.5rem}
/* the price column is auto-width, so a long turnaround line used to widen it and
   squeeze the description beside it */
.addon--detail .addon__price{max-width:9rem}
.addon--detail .addon__price small{white-space:normal}
.addon__list{display:grid;gap:.3125rem;margin:.75rem 0 0;max-width:58ch}
.addon__list>span{position:relative;padding-left:1.0625rem;font-size:.8125rem;
  color:var(--g600);line-height:1.45}
.addon__list>span::before{content:"";position:absolute;left:0;top:.4375rem;width:5px;height:5px;
  border-radius:50%;background:var(--green)}
/* guidance under a field: advice, not an error, so it does not use the danger
   colour or set the field's error state */
.field__note{font-size:.8125rem;color:var(--text-muted);line-height:1.45}
.field__note[hidden]{display:none}
.field__note--ok{color:var(--green-700)}
.field__note--warn{color:#7C4A03}
.field__hint{margin:.5rem 0 0;font-size:.8125rem;color:var(--text-muted)}
.field__hint--error{color:var(--danger)}
.field__opt{font-size:.75rem;font-weight:400;color:var(--text-subtle);letter-spacing:0}

@media (max-width:600px){
  .addon{grid-template-columns:auto 1fr}
  .addon__price{grid-column:2;text-align:left;margin-top:.5rem}
}

/* ---------- summary rail ---------- */
.rail-layout{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
.rail-layout>*{min-width:0}
@media (max-width:960px){.rail-layout{grid-template-columns:minmax(0,1fr)}}
.rail{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;
  position:sticky;top:160px;box-shadow:var(--shadow-sm)}
.rail h3{font-size:1rem;margin-bottom:1.125rem;padding-bottom:.875rem;border-bottom:1px solid var(--line)}
.rail dl{margin:0}
.rail__line{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;font-size:.875rem}
.rail__line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--g800)}
.rail__line--total{border-top:1px solid var(--line);margin-top:.375rem;padding-top:.75rem;font-weight:600}
.rail__line--total span:last-child{color:var(--navy);font-size:1.0625rem}
.rail__line--muted{color:var(--text-muted)}
/* the default rail row pairs a label with a figure and keeps the figure on one
   line; these rows carry prose, which has to be allowed to wrap */
.rail__line--stack{display:block;white-space:normal}
.rail__line--stack span:first-child{display:block;font-size:.6875rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:.1875rem}
.rail__line--stack span:last-child{display:block;white-space:normal;
  color:var(--g600);font-size:.875rem;line-height:1.45}

.rail__line--muted span:last-child{color:var(--text-muted)}

/* A rail of facts rather than figures. The default row keeps its value on one
   line, which is right for a price and wrong for "BVI Business Companies Act,
   2004" — that one was being squeezed into a column built for "US$1,500.00"
   and losing. Here the value wraps, sits right, and the column it sits in is
   wider; and each row carries a small mark so the panel reads as a list of
   particulars rather than as nine lines of grey. */
.rail-layout--wide{grid-template-columns:minmax(0,1fr) 392px}
@media (max-width:960px){.rail-layout--wide{grid-template-columns:minmax(0,1fr)}}
.rail--facts .rail__line{align-items:flex-start;gap:1.25rem;padding-block:.5625rem}
.rail--facts .rail__line+.rail__line{border-top:1px solid var(--line)}
.rail--facts .rail__line span:first-child{display:flex;align-items:flex-start;gap:.5rem;
  flex:0 0 auto;color:var(--g600)}
.rail--facts .rail__line span:last-child{white-space:normal;text-align:right;
  font-variant-numeric:normal;color:var(--black);font-weight:500;line-height:1.4}
.rail--facts .rail__line svg{flex:0 0 auto;width:14px;height:14px;margin-top:.1875rem;
  color:var(--navy-600)}
.rail--facts .rail__line--muted span:last-child{color:var(--text-muted);font-weight:400}
.rail--facts .rail__line--muted svg{color:var(--g400)}

/* A mark against each requirement, so the four rows read as a checklist rather
   than as four paragraphs stacked up. The glyph carries the sense the label
   already states — a tick for what is accepted, a bar for what is refused —
   so it is decoration that agrees with the words rather than beside them, and
   aria-hidden because the words are the content. */
.rail__line--mark span:first-child{display:flex;align-items:center;gap:.4375rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--g800);margin-bottom:.3125rem}
.rail__line--mark svg{flex:0 0 auto;width:15px;height:15px;color:var(--navy-600)}
.rail__line--no svg{color:var(--danger)}
.rail__line--muted.rail__line--mark svg{color:var(--g400)}
.rail__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-strong)}
.rail__total dt{font-size:.875rem;font-weight:500}
.rail__total dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.5rem;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.rail .btn{margin-top:1.25rem}
.rail__foot{font-size:.75rem;color:var(--text-muted);margin:.875rem 0 0;line-height:1.5}

/* ---------- checkout review ---------- */
.review{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
.review__row{display:grid;grid-template-columns:210px 1fr;gap:1rem;padding:.8125rem 1.125rem;
  border-bottom:1px solid var(--line);font-size:.9375rem}
.review__row:last-child{border-bottom:0}
.review__row:nth-child(odd){background:var(--g50)}
.review__row dt{font-size:.8125rem;color:var(--text-muted)}
.review__row dd{margin:0}
.review__row dd:empty::after{content:"Not provided";color:var(--g450)}
@media (max-width:600px){.review__row{grid-template-columns:1fr;gap:.25rem}}

/* ---------- confirmation ---------- */
.confirm{text-align:center;padding-block:clamp(3rem,7vw,5rem);max-width:600px;margin-inline:auto}
.confirm__tick{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--white);
  display:grid;place-items:center;margin:0 auto 1.75rem;animation:pop .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.confirm__ref{display:inline-block;font-variant-numeric:tabular-nums;font-size:1.0625rem;font-weight:500;
  letter-spacing:.02em;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:.6875rem 1.25rem;background:var(--g50);margin-top:.5rem}

/* ============================================================
   FLAG · PLANS · REQUIREMENTS · GUARANTEE · ABOUT · CONTACT
   ============================================================ */

/* ---------- BVI flag ---------- */
.flag{width:56px;height:28px;border-radius:3px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(11,11,12,.14);display:block}
.ftr .flag{box-shadow:0 0 0 1px rgba(255,255,255,.24)}
.flag--lg{width:64px;height:32px;border-radius:4px}
@media (max-width:520px){
  .flag{width:44px;height:22px}
  .wordmark{font-size:1.4375rem}
}

/* ---------- plan / price cards ---------- */
/* .plan__list is still used by the sidebar checklists; the pricing-card variants
   it belonged to were replaced by the itemised .bill on the renewal page. */
.plan__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.5rem;font-size:.875rem;color:var(--g600)}
.plan__list li{display:flex;gap:.5rem;align-items:flex-start}
.plan__list li::before{content:"";width:14px;height:14px;flex-shrink:0;margin-top:.2rem;
  background:var(--green-50);border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--green)}

/* ---------- numbered requirement documents ---------- */
.docs{display:grid;gap:1rem;counter-reset:doc}
.doc{display:grid;grid-template-columns:auto 1fr;gap:1.375rem;align-items:start;
  border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;background:var(--white)}
/* the numeral is set in the display face and left uncontained: a filled tile
   outweighs the heading beside it, which is the wrong order to read a card in.
   min-width holds the column steady from 1 to 11; the negative top margin sits
   the numeral's cap height on the heading's. */
.doc__n{flex-shrink:0;min-width:1.6ch;text-align:right;margin-top:-.1875rem;
  font:600 1.75rem/1 var(--f-display);letter-spacing:-.04em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.doc h3{font-size:1.0625rem;margin:0 0 .375rem}
.doc p{margin:0 0 .75rem;font-size:.9375rem;color:var(--g600)}
.doc p:last-child{margin-bottom:0}
.doc__meta{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4375rem;font-size:.875rem;color:var(--g600)}
.doc__meta li{display:flex;gap:.5rem}
.doc__meta li::before{content:"—";color:var(--g400);flex-shrink:0}

/* who it applies to */
.applies{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.applies span{font-size:.8125rem;font-weight:500;padding:.375rem .6875rem;border-radius:100px;
  background:var(--navy-50);color:var(--navy-700)}

/* ---------- guarantee ---------- */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
  border:1px solid var(--navy);border-radius:var(--r-lg);padding:1.75rem;background:var(--navy-50)}
.guarantee__ico{width:40px;height:40px;border-radius:10px;background:var(--navy);color:var(--white);
  display:grid;place-items:center;flex-shrink:0}
.guarantee h3{font-size:1.125rem;margin:0 0 .5rem}
.guarantee p{margin:0 0 .625rem;font-size:.9375rem;color:var(--g600);max-width:62ch}
.note--split{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1rem 2.5rem}
.note--split p+p{margin-top:0}
.guarantee p:last-child{margin-bottom:0}
.guarantee--onDark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.guarantee--onDark h3{color:var(--white)}
.guarantee--onDark p{color:rgba(255,255,255,.72)}
/* A link inside the banner has to be readable on navy: the site link colour is
   navy on white and would disappear here. */
.guarantee--onDark a{color:var(--white);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45)}
.guarantee--onDark a:hover{text-decoration-color:var(--white)}
.guarantee--onDark .guarantee__ico{background:var(--white);color:var(--navy)}
@media (max-width:560px){.guarantee{grid-template-columns:1fr}}
/* full-width variant: the icon and the heading share the top row, then the copy
   runs as one column across the whole panel, so its left and right margins are
   the panel's own padding on both sides. display:contents lifts the h3 and the
   paragraphs out of their wrapper and onto this grid, which is the only way to
   put the heading beside the icon while the copy starts at the panel edge. */
.guarantee--wide{column-gap:1.25rem;row-gap:.75rem}
.guarantee--wide>:last-child{display:contents}
.guarantee--wide .guarantee__ico{grid-row:1}
.guarantee--wide h3{grid-column:2;align-self:center;margin:0}
.guarantee--wide p{grid-column:1/-1;max-width:none;margin:0}
@media (max-width:560px){.guarantee--wide{grid-template-columns:auto 1fr}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem;
  padding:2rem 0;border-block:1px solid var(--line)}
.section--navy .stats,.section--black .stats{border-color:rgba(255,255,255,.16)}
.stat dt{font-size:.8125rem;color:var(--text-muted);margin-bottom:.4rem}
.section--navy .stat dt,.section--black .stat dt{color:rgba(255,255,255,.6)}
.stat dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:2rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1}

/* A mark beside each figure's label. Each one names the thing being measured —
   a clock for how long, a pen on paper for a review, an envelope for a reply,
   a currency mark for money back — so it reads before the words do. */
.stats--marked .stat dt{display:flex;align-items:center;gap:.4375rem}
.stats--marked .stat dt svg{flex:0 0 auto;width:17px;height:17px;color:var(--navy-600)}
.section--navy .stats--marked .stat dt svg,
.section--black .stats--marked .stat dt svg{color:rgba(255,255,255,.7)}

/* The statutes, as a list and nothing else. It carried a paragraph and a
   status pill for each one, which made nine entries read as nine sections; a
   reader looking for "which Act is the principal one" had to read all of it.
   Numbered because the order is the order of importance. */
.acts{list-style:none;margin:0;padding:0;counter-reset:act;
  border-top:1px solid var(--line)}
.acts__i{counter-increment:act;position:relative;
  padding:.875rem 0 .875rem 2.5rem;border-bottom:1px solid var(--line);
  font-size:1rem;line-height:1.45;color:var(--g800)}
.acts__i::before{content:counter(act);position:absolute;left:0;top:.9375rem;
  width:1.5rem;text-align:right;font-family:var(--f-mono,var(--f-display));
  font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--g400)}

/* ---------- "same as beneficial owner 1" ---------- */
/* The common case on a small company is one person holding all three roles.
   The tick sits above the block it fills in, not beside it, because what it
   does is to the whole block. */
.mirror{margin-bottom:1.25rem}
.mirror__note{margin:.5rem 0 0;font-size:.8125rem;color:var(--text-muted);line-height:1.45}
/* Copied fields are left legible rather than greyed out: they are correct
   values, not disabled ones, and the tick above says where they came from. */
.party--mirrored input[readonly],
.party--mirrored textarea[readonly]{background:var(--bg-sunken);cursor:default}
.party--mirrored input[readonly]:focus-visible,
.party--mirrored textarea[readonly]:focus-visible{outline-offset:2px}
.party--mirrored .choice input:disabled+span{color:var(--text-muted)}

/* ---------- the people ---------- */
/* A row of faces. Circles rather than cards because the photographs will be
   whatever five people happen to have — different crops, different
   backgrounds, different quality — and a circle of a fixed size is the one
   frame that makes an assorted set look like a set. */
.people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:1.75rem 2rem;justify-content:flex-start}
.person{flex:0 1 auto;width:7rem;text-align:center}
.person__disc{
  display:grid;place-items:center;overflow:hidden;
  width:5.25rem;height:5.25rem;margin:0 auto .75rem;border-radius:50%;
  background:var(--navy-50);border:1px solid var(--line);
}
.person__photo{width:100%;height:100%;object-fit:cover;display:block}
/* No photograph yet. Initials in the brand face, so a half-filled team still
   reads as people rather than as five placeholders waiting for an image. */
.person__initials{font-family:var(--f-display);font-size:1.3125rem;font-weight:600;
  letter-spacing:.02em;color:var(--navy)}
.person__name{display:block;font-weight:600;font-size:.875rem;line-height:1.3;
  color:var(--text)}
.person__title{display:block;margin-top:.125rem;font-size:.78125rem;line-height:1.35;
  color:var(--text-muted)}

@media (max-width:520px){
  .people{gap:1.25rem 1.5rem;justify-content:center}
  .person{width:6rem}
  .person__disc{width:4.5rem;height:4.5rem}
  .person__initials{font-size:1.125rem}
}

/* ---------- principles / prose list ---------- */
.principles{display:grid;gap:0;border-top:1px solid var(--line)}
.principle{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--line)}
.principle__n{font-family:var(--f-display);font-weight:600;font-size:.875rem;color:var(--navy-600);
  font-variant-numeric:tabular-nums;padding-top:.2rem;min-width:2rem}
.principle h3{font-size:1.125rem;margin:0 0 .4rem}
.principle p{margin:0;font-size:.9375rem;color:var(--g600)}
@media (max-width:560px){.principle{grid-template-columns:1fr;gap:.5rem}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem}
.contact-card{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;background:var(--white)}
.contact-card h3{font-size:1rem;margin:0 0 .5rem}
.contact-card p{margin:0;font-size:.9375rem;color:var(--g600)}
.contact-card a{font-weight:500}
.contact-card__ico{width:32px;height:32px;border-radius:var(--r-sm);background:var(--navy-50);color:var(--navy);
  display:grid;place-items:center;margin-bottom:1rem}
address{font-style:normal}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9375rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0;padding-bottom:0}
.hours span:last-child{color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ============================================================
   SPECIMEN DOCUMENT STACK  ·  CORPORATE DOCUMENT GROUPS
   ============================================================ */

/* Overlapping specimen sheets with the body text blurred out.
   Titles stay crisp so the document is identifiable; everything
   that would carry data is rendered as blurred bars, never text. */
.receive{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.receive>*{min-width:0}
@media (max-width:1180px){.receive{grid-template-columns:minmax(0,1fr)}}

/* ---------- specimen documents ---------- */
/* real pages from a real formation set, with every identifying detail removed
   before rasterising -- see the note in the markup */
.sheet-shot{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.sheet-shot img{display:block;width:100%;height:auto}
.sheet-shot figcaption{padding:.8125rem 1rem;border-top:1px solid var(--line);
  background:var(--g50);font-size:.8125rem;color:var(--g600)}
.sheet-shot figcaption b{display:block;color:var(--g800);font-weight:500;
  font-family:var(--f-display);letter-spacing:-.012em;margin-bottom:.0625rem}

/* the package list drives the viewer beside it: rows with a specimen behave as
   links (and are real links, so they still open the page with JS off) */
.corprow--pick{text-decoration:none;color:inherit;cursor:pointer;
  border-radius:var(--r-sm);transition:background .14s}
/* the navy title carries the affordance: a chevron in the right margin lands on
   top of the pill, which already owns that column */
.corprow--pick .corprow__t{color:var(--navy-700)}
.corprow--pick:hover{background:var(--g50)}
.corprow--pick:hover .corprow__t{text-decoration:underline;text-underline-offset:2px}
.corprow--pick:focus-visible{outline:2px solid var(--navy-600);outline-offset:-2px}
.corprow--pick[aria-current="true"]{background:var(--navy-50)}
.corprow--pick[aria-current="true"] .corprow__t{color:var(--navy)}

/* the viewer follows down the list rather than scrolling away from it */
@media (min-width:1181px){.viewer{position:sticky;top:112px}}
.viewer .sheet-shot img{aspect-ratio:4/3;object-fit:contain;object-position:center;
  background:var(--white);padding:.5rem}

/* the panel image is a button that opens the document larger */
.shot__zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;color:inherit;font:inherit}
.shot__zoom:focus-visible{outline:2px solid var(--navy-600);outline-offset:-2px}
.shot__cue{position:absolute;right:.625rem;bottom:.625rem;display:inline-flex;align-items:center;
  gap:.3125rem;padding:.3125rem .5rem;border-radius:var(--r-sm);
  background:rgba(11,11,12,.72);color:var(--white);font-size:.6875rem;font-weight:500;
  letter-spacing:.01em;opacity:0;transition:opacity .14s;pointer-events:none}
.shot__zoom:hover .shot__cue,.shot__zoom:focus-visible .shot__cue{opacity:1}
@media (hover:none){.shot__cue{opacity:1}}

/* ---------- document lightbox ---------- */
/* an explicit height, not min(...,none): "none" is not a length, so the whole
   declaration was thrown away and the dialog grew past the viewport with its
   own toolbar scrolled off the top */
.lightbox{width:min(100vw - 2rem,1400px);height:calc(100vh - 2rem);
  max-width:none;max-height:none;padding:0;border:0;border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-lg);overflow:hidden}
.lightbox::backdrop{background:rgba(11,11,12,.62)}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox__bar{display:flex;align-items:center;gap:.75rem;flex-shrink:0;
  padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--g50)}
.lightbox__title{flex:1;min-width:0;font-family:var(--f-display);font-size:.9375rem;
  font-weight:600;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox__btn{flex-shrink:0;border:1px solid var(--line-strong);background:var(--white);
  color:var(--black);font:500 .8125rem/1 var(--f-sans);padding:.5rem .75rem;
  border-radius:var(--r-sm);cursor:pointer}
.lightbox__btn:hover{background:var(--g100)}
.lightbox__btn:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
.lightbox__btn--close{font-size:1.125rem;line-height:1;padding:.375rem .625rem}
/* flex, not grid: a percentage max-height on a grid item resolves against an
   auto-sized row track, so it was ignored and a portrait page opened at its
   natural height. A flex item resolves it against the container's definite
   height, which this one has from flex:1 in a fixed-height column. */
.lightbox__stage{flex:1;min-height:0;overflow:auto;background:var(--g100);
  display:flex;align-items:center;justify-content:center;padding:1rem}
.lightbox__stage img{display:block;flex:0 0 auto;max-width:100%;max-height:100%;
  width:auto;height:auto;background:var(--white);box-shadow:var(--shadow-sm);cursor:zoom-in}
/* zoomed: the natural pixels, with the stage scrolling around them */
.lightbox__stage.is-zoomed{align-items:flex-start;justify-content:flex-start}
.lightbox__stage.is-zoomed img{max-width:none;max-height:none;margin:auto;
  width:var(--nat-w);height:auto;cursor:zoom-out}
@media (max-width:600px){
  .lightbox{width:100vw;height:100vh;border-radius:0}
  .lightbox__stage{padding:.5rem}
}


/* ============================================================
   REQUIREMENTS — richer document cards
   ============================================================ */

/* ---- key figures, above the switcher ---- */
/* Fits however many figures there are. Four was hard-coded, so taking one out
   left a grey cell where it had been — the cell is the grid's background
   showing through the gap, which is what makes the hairline rules. */
.reqstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:clamp(2rem,4vw,3rem)}
.reqstat{background:var(--white);padding:1.5rem 1.375rem 1.375rem}
.reqstat__n{display:flex;align-items:baseline;gap:.3125rem;margin:0;font-family:var(--f-display);
  font-weight:600;font-size:2.125rem;line-height:1;letter-spacing:-.045em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.reqstat__u{font-size:.9375rem;font-weight:500;letter-spacing:-.01em;color:var(--g600)}
.reqstat__l{font-weight:500;font-size:.9375rem;line-height:1.35;margin:.9375rem 0 .3125rem;color:var(--black)}
.reqstat__d{margin:0;font-size:.8125rem;line-height:1.45;color:var(--text-muted)}
@media (max-width:820px){.reqstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.reqstats{grid-template-columns:minmax(0,1fr)}}

/* ---- party switcher: centred segmented control ----
   Two equal columns rather than two shrink-wrapped buttons: the labels are
   different lengths, and letting them size themselves put the divide off
   centre and moved it every time a label changed. ---- */
.pswitch{display:flex;justify-content:center;margin-bottom:1.75rem}
.pswitch__group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;
  width:min(100%,29rem);padding:.3125rem;background:var(--g100);
  border:1px solid var(--line);border-radius:calc(var(--r) + 5px)}
.pswitch__btn{display:flex;align-items:center;justify-content:center;gap:.5rem;
  border:0;cursor:pointer;background:none;border-radius:var(--r);
  padding:.75rem .625rem;color:var(--g600);
  font:500 .9375rem/1.2 var(--f-sans);letter-spacing:-.012em;white-space:nowrap;
  transition:background .18s,color .18s,box-shadow .18s}
.pswitch__btn svg{flex-shrink:0;opacity:.7;transition:opacity .18s}
.pswitch__btn:hover{color:var(--black)}
.pswitch__btn[aria-selected="true"]{background:var(--navy);color:var(--white);
  box-shadow:0 1px 2px rgba(1,33,105,.3),0 0 0 1px var(--navy)}
.pswitch__btn[aria-selected="true"] svg{opacity:1}
.pswitch__btn:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}
/* the count sits in a fixed-width chip so the two halves stay identical
   whether the number is one digit or two */
.pswitch__n{min-width:1.5rem;padding:.1875rem .3125rem;border-radius:5px;
  background:var(--white);color:var(--navy-700);
  font:600 .75rem/1.2 var(--f-sans);font-variant-numeric:tabular-nums;text-align:center}
.pswitch__btn[aria-selected="true"] .pswitch__n{background:rgba(255,255,255,.22);color:var(--white)}
@media (max-width:520px){
  .pswitch__group{grid-template-columns:minmax(0,1fr);width:100%}
}

/* ---- foldable document cards ---- */
.reqcard[open]{border-color:var(--line-strong);box-shadow:var(--shadow)}
.reqcard>summary{list-style:none;cursor:pointer}
.reqcard>summary::-webkit-details-marker{display:none}
.reqcard>summary:focus-visible{outline:2px solid var(--navy-600);outline-offset:-2px;border-radius:var(--r-lg)}
.reqcard__chev{align-self:start;margin-top:.375rem;width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;color:var(--g600);background:var(--g100);
  transition:transform .2s ease,background .16s,color .16s}
.reqcard>summary:hover .reqcard__chev{background:var(--navy-50);color:var(--navy-700)}
.reqcard[open] .reqcard__chev{transform:rotate(180deg);background:var(--navy);color:var(--white)}
@media (prefers-reduced-motion:reduce){.reqcard__chev{transition:none}}

/* the card itself */
.reqcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  overflow:hidden;transition:border-color .18s,box-shadow .18s}
.reqcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.reqcard+.reqcard{margin-top:1rem}
.reqcard__head{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;
  padding:1.375rem 1.5rem;background:var(--g50)}
.reqcard[open] .reqcard__head{border-bottom:1px solid var(--line)}
.reqcard__n{flex-shrink:0;min-width:1.6ch;text-align:right;margin-top:-.125rem;
  font:600 1.625rem/1 var(--f-display);letter-spacing:-.04em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.reqcard__t{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em;
  margin:0 0 .3125rem;line-height:1.25}
.reqcard__d{margin:0;font-size:.9375rem;color:var(--g600);max-width:64ch}
.reqcard__pills{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.75rem}
.pill{display:inline-flex;align-items:center;gap:.3125rem;font-size:.6875rem;font-weight:500;
  letter-spacing:.02em;padding:.25rem .5rem;border-radius:5px;background:var(--navy-50);
  color:var(--navy-700);white-space:nowrap}
.pill--warn{background:#FFF6E5;color:#7C4A03}
.pill--off{background:var(--g100);color:var(--g600)}
.pill svg{flex-shrink:0}

/* accepted / not accepted split */
.reqcard__body{padding:1.375rem 1.5rem}
.reqsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem 2rem}
.reqlist{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.reqlist__h{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g500);margin:0 0 .625rem}
.reqlist li{position:relative;padding-left:1.4375rem;font-size:.875rem;
  color:var(--g600);line-height:1.5}
.reqlist li::before{content:"";position:absolute;left:0;top:.1875rem;width:15px;height:15px;border-radius:50%;
  background:var(--green-50) no-repeat center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath d='M1.5 4.8 3.5 6.8 7.5 2.3' stroke='%23006129' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.reqlist--no li::before{background-color:#FDECEC;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath d='M2.2 2.2 6.8 6.8M6.8 2.2 2.2 6.8' stroke='%23B42318' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.reqlist strong{color:var(--g800);font-weight:500}

/* compact corporate rows */
.corprow{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;
  padding:.9375rem 0;border-bottom:1px solid var(--line)}
.corprow:last-child{border-bottom:0}
.corprow__n{font:600 1.0625rem/1.25 var(--f-display);letter-spacing:-.03em;color:var(--navy);
  font-variant-numeric:tabular-nums;min-width:1.6ch;text-align:right}
.corprow__t{font-weight:500;font-size:.9375rem;margin:0 0 .1875rem;color:var(--black)}
.corprow__d{margin:0;font-size:.875rem;color:var(--g600);max-width:70ch}
@media (max-width:640px){
  .corprow{grid-template-columns:auto 1fr}
  .corprow .pill{grid-column:2}
}

/* anchored section headings clear the sticky header */
[id="package"],[id="specimens"]{scroll-margin-top:112px}

/* ============================================================
   ANNUAL BILL — recurring obligations as one itemised total
   ============================================================ */
.bill{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.bill__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;
  padding:.9375rem 1.5rem;background:var(--g50);border-bottom:1px solid var(--line);
  font:600 .6875rem/1 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--g500)}
.bill__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 1.5rem;
  padding:1.5rem;border-bottom:1px solid var(--line)}
.bill__n{flex-shrink:0;min-width:1.6ch;text-align:right;margin-top:-.125rem;
  font:600 1.625rem/1 var(--f-display);letter-spacing:-.04em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.bill__t{font-family:var(--f-display);font-weight:600;font-size:1.125rem;letter-spacing:-.02em;
  margin:0 0 .5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.625rem}
.bill__d{margin:0 0 .875rem;font-size:.9375rem;color:var(--g600);max-width:62ch}
.bill__due{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start;
  margin:0 0 1rem;font-size:.8125rem;color:var(--text-muted);max-width:62ch}
.bill__due svg{margin-top:.15rem;color:var(--navy-600);flex-shrink:0}
.bill__inc{margin:0;padding:0;list-style:none;display:grid;gap:.4375rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));max-width:70ch}
.bill__inc li{position:relative;padding-left:1.25rem;font-size:.8125rem;color:var(--g600);line-height:1.45}
.bill__inc li::before{content:"";position:absolute;left:0;top:.4375rem;width:5px;height:5px;
  border-radius:50%;background:var(--green)}
.bill__amt{text-align:right;white-space:nowrap}
.bill__amt b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.5rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.bill__amt small{display:block;margin-top:.25rem;font-size:.75rem;color:var(--text-muted)}
.bill__total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 1.5rem;
  padding:1.375rem 1.5rem;background:var(--navy);color:var(--white)}
.bill__total p{margin:0}
.bill__total .bill__tl{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em}
.bill__total .bill__td{font-size:.8125rem;color:rgba(255,255,255,.75);margin-top:.25rem;max-width:52ch}
.bill__total .bill__amt b{color:var(--white);font-size:1.75rem}
.bill__total .bill__amt small{color:rgba(255,255,255,.75)}
@media (max-width:720px){
  .bill__row{grid-template-columns:auto minmax(0,1fr);row-gap:.875rem}
  .bill__amt{grid-column:2;text-align:left}
  .bill__amt b{font-size:1.375rem}
  .bill__head{grid-template-columns:1fr}
  .bill__head span:last-child{display:none}
}

/* ============================================================
   CREST — the arms of the Territory, set behind a section
   Decorative only: aria-hidden, and a veil keeps the text legible.
   ============================================================ */
.section--crest{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,8vw,7.5rem)}
.section--crest>.shell{position:relative;z-index:2}
/* sized to the section, so the whole shield and its motto stay in frame */
.crest{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:min(88%,700px);width:auto;max-width:none;
  opacity:.38;pointer-events:none;user-select:none;z-index:0}
/* the white robe and gold ribbon sit right where the copy does, so a soft
   veil of the section colour goes over the arms and under the text */
.section--crest::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 66% at 50% 48%,
    rgba(1,33,105,.88) 0%,rgba(1,33,105,.74) 42%,rgba(1,33,105,.28) 72%,rgba(1,33,105,0) 92%)}
@media (max-width:720px){
  .crest{height:min(84%,520px);opacity:.32}
  .section--crest::after{background:radial-gradient(ellipse 96% 74% at 50% 50%,
    rgba(1,33,105,.86) 0%,rgba(1,33,105,.7) 50%,rgba(1,33,105,0) 88%)}
}

/* ============================================================
   APPLICATION DEMO — a looping capture of the real form
   ============================================================ */
/* the clip and the steps share one card: two bordered blocks stacked with a gap
   between them cost a border, two paddings and a caption strip for nothing */
.herocard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.herocard .demo{margin:0;border:0;border-radius:0;box-shadow:none}
.herocard .seq{border:0;border-radius:0;box-shadow:none}
.herocard .seq__head{border-top:1px solid var(--line);padding:.75rem 1.25rem}
.herocard .seq__row{padding:.8125rem 1.25rem;gap:.875rem}
.herocard .seq__n{width:26px;height:26px;font-size:.8125rem}
.herocard .seq__t{font-size:.9375rem;margin-bottom:.0625rem}
.herocard .seq__d{font-size:.8125rem;line-height:1.45}

.demo{margin:0;background:var(--white);overflow:hidden}
.demo img{display:block;width:100%;height:auto}

/* ============================================================
   FAQ — a list of disclosures, one question per row
   ============================================================ */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.faq__item+.faq__item{border-top:1px solid var(--line)}
.faq__item>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem;
  align-items:center;padding:1.125rem 1.375rem;cursor:pointer;list-style:none;
  transition:background .16s}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary:hover{background:var(--g50)}
.faq__item>summary:focus-visible{outline:2px solid var(--navy-600);outline-offset:-2px}
.faq__q{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.018em;
  line-height:1.35}
.faq__ico{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--g100);color:var(--g600);transition:transform .2s ease,background .16s,color .16s}
.faq__ico svg{width:11px;height:7px}
.faq__item>summary:hover .faq__ico{background:var(--navy-50);color:var(--navy-700)}
.faq__item[open] .faq__ico{transform:rotate(180deg);background:var(--navy);color:var(--white)}
.faq__item[open]>summary{background:var(--g50)}
/* the answer runs the panel's full width, like the question above it — a
   measure cap here left a third of a 1200px panel empty on every open item */
.faq__a{padding:.375rem 1.375rem 1.375rem}
/* the cap that was actually doing the narrowing is the global p{max-width:66ch},
   not anything in this component */
.faq__a p{margin:0;max-width:none;color:var(--g600);font-size:.9375rem;line-height:1.6}
.faq__a p+p{margin-top:.75rem}
@media (prefers-reduced-motion:reduce){.faq__ico{transition:background .16s,color .16s}}
@media (max-width:520px){
  .faq__item>summary{padding:1rem 1.125rem;gap:.875rem}
  .faq__q{font-size:1rem}
  .faq__a{padding:.25rem 1.125rem 1.125rem}
}

/* ============================================================
   FOOTER — accepted payment methods
   Card-scheme marks must be the schemes' own artwork, so this holds a
   named list until those files exist; .pay__marks takes them as images.
   ============================================================ */
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem 1.125rem;
  padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.18)}
.pay__label{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;
  font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92)}
.pay__label svg{width:17px;height:14px;flex-shrink:0}
.ftr .pay__list{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;
  flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none}
.ftr .pay__list li{font-size:.875rem;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:.75rem}
.ftr .pay__list li:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.3)}
/* when the schemes' own artwork is dropped in, each goes on a white tile */
.ftr .pay__marks{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0;padding:0;list-style:none}
.ftr .pay__marks img{display:block;height:26px;width:auto;border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
@media (max-width:560px){
  .pay{gap:.5rem}
  .pay__label{width:100%}
}

/* ============================================================
   STAGES — what the fee covers, grouped by when it happens
   Three panels rather than three columns in one box: the groups are
   different lengths, and a shared box makes the shortest look unfinished.
   ============================================================ */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  gap:1.25rem;margin:0;padding:0;list-style:none}
.stage{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.stage:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.stage__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;
  align-items:center;padding:.9375rem 1.25rem;background:var(--g50);
  border-bottom:1px solid var(--line)}
.stage__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--white);font:600 .75rem/1 var(--f-sans);
  font-variant-numeric:tabular-nums}
.stage__t{margin:0;font:600 .75rem/1 var(--f-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--g600)}
.stage__c{font-size:.75rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.stage__list{flex:1;margin:0;padding:1.375rem 1.375rem 1.5rem;list-style:none;
  display:grid;gap:1.25rem;align-content:start}
.stage__list li{position:relative;padding-left:1.75rem}
.stage__list li::before{content:"";position:absolute;left:0;top:.0625rem;
  width:18px;height:18px;border-radius:50%;background:var(--green-50) no-repeat center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath d='M2 5.3 4.2 7.5 8.4 2.6' stroke='%23006129' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* the lead takes its own line — in a column this narrow, an inline dash
   leaves the name and its explanation fighting for the same line */
.stage__list strong{display:block;margin-bottom:.1875rem;font-weight:600;
  font-size:.9375rem;line-height:1.35;letter-spacing:-.012em;color:var(--black)}
.stage__list span{display:block;font-size:.875rem;line-height:1.55;color:var(--g600)}
@media (max-width:640px){
  .stage__list{padding:1.125rem 1.125rem 1.25rem;gap:1.125rem}
}

/* ============================================================
   GUIDES — the index and one article
   ============================================================
   A reading column, not a magazine. The measure is set in ch so
   it tracks the font rather than the viewport: prose that runs
   past about 70 characters costs the reader the start of the
   next line, and this is the one part of the site people are
   expected to read straight through.
   ============================================================ */

.guides{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--line)}
.guide{border-bottom:1px solid var(--line)}
.guide__link{display:block;padding:1.5rem 0;text-decoration:none;color:inherit}
.guide__link:hover .guide__title{color:var(--navy)}
.guide__link:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.guide__title{font-size:var(--step-2);line-height:1.25;letter-spacing:-.018em;
  margin:0;color:var(--black);transition:color .12s ease}
.guide__sum{margin:.5rem 0 0;color:var(--g600);line-height:1.6;max-width:64ch}
.guide__when{margin:.625rem 0 0;font-size:.8125rem;color:var(--g500);
  font-variant-numeric:tabular-nums}

/* Centred, because the page has no rail: an off-centre reading column with a
   full-width header above it reads as a layout that lost something. */
.article{max-width:52rem;margin-inline:auto}
.article .eyebrow a{color:inherit;text-decoration:none}
.article .eyebrow a:hover{text-decoration:underline}
.article h1{max-width:22ch}
.article__meta{margin:1rem 0 0;font-size:.8125rem;color:var(--g500);
  font-variant-numeric:tabular-nums}
.article__hero{margin:2rem 0 0;padding:0}
.article__hero img{width:100%;height:auto;border-radius:8px;display:block}

/* the reading column */
.prose{max-width:70ch;margin-top:2rem;font-size:1.0625rem;line-height:1.7;color:var(--g800)}
.prose>*+*{margin-top:1.125rem}
.prose h2{font-size:var(--step-2);line-height:1.3;letter-spacing:-.016em;
  color:var(--black);margin-top:2.5rem}
.prose h3{font-size:1.25rem;line-height:1.4;letter-spacing:-.012em;
  color:var(--black);margin-top:2rem}
.prose h4{font-size:1.0625rem;font-weight:600;color:var(--black);margin-top:1.75rem}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--navy-700)}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li+li{margin-top:.375rem}
.prose img{max-width:100%;height:auto;border-radius:8px;display:block}
.prose code{font-family:var(--f-mono);font-size:.875em;background:var(--g50);
  padding:.125em .375em;border-radius:3px}
.prose pre{background:var(--g50);border:1px solid var(--line);border-radius:8px;
  padding:1rem 1.125rem;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:.8125rem;line-height:1.6}
/* A quotation is set off by a rule, not by italics — a long italic
   passage is measurably slower to read. */
.prose blockquote{border-left:2px solid var(--navy);padding-left:1.125rem;
  margin-left:0;color:var(--g600)}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.25rem}
/* A wide table must scroll inside itself; the page must never scroll
   sideways because one article has six columns. */
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;display:block;
  overflow-x:auto}
.prose th,.prose td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.prose th{font-weight:600;color:var(--black);white-space:nowrap}

.article__foot{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--line);
  max-width:70ch}
.article__foot p{color:var(--g600)}
.article__foot p+p{margin-top:1.25rem}

@media (max-width:640px){
  .guide__link{padding:1.25rem 0}
  .prose{font-size:1rem;margin-top:1.5rem}
}

/* ============================================================
   PHONE LAYER — everything below is 640px and under
   ============================================================
   The site was responsive before this block: nothing overflowed
   and every grid collapsed. What it was not was *designed* for a
   phone. This layer is the difference between the two — it
   reclaims the header's vertical space, rebuilds the one
   component that genuinely broke (the fee tables), drops a
   desktop screenshot that is unreadable at this width, brings
   every tap target up to size, and keeps the primary action in
   reach on pages that run to fifteen screens.

   It is placed last on purpose. Several rules here restate a
   property another 640px block already sets; equal specificity
   means source order decides, and this block is meant to win.
   ============================================================ */

.mobar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  align-items:center;gap:.625rem;
  padding:.625rem var(--gutter);
  padding-bottom:calc(.625rem + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  transform:translateY(115%);transition:transform .22s ease}
/* it stays off-screen until scrolled for, and goes away again over the
   footer so it never sits on top of the closing call to action */
.mobar[data-shown]{transform:none}
.mobar__alt{flex-shrink:0;padding:.6875rem .1875rem;text-decoration:none;
  font-size:.875rem;font-weight:600;letter-spacing:-.008em;color:var(--navy)}
.mobar__cta{flex:1;justify-content:center;padding:.8125rem 1rem;font-size:.9375rem}
@media (prefers-reduced-motion:reduce){.mobar{transition:none}}
/* phones only — on a laptop the header CTA is always in view */
@media (min-width:641px){.mobar{display:none}}

/* anchors land clear of the sticky header everywhere, rather than
   each component carrying its own scroll-margin guess */
html{scroll-padding-top:108px}

@media (max-width:640px){
  html{scroll-padding-top:80px}

  /* ---------- header: 92px is a tenth of the screen ---------- */
  .hdr__inner{height:64px}
  .hdr__nav{inset:64px 0 auto}          /* the drawer hangs off the shorter bar */
  .flow{top:64px}                        /* and the step bar sits under it */
  .hdr__brand .wordmark{font-size:1.0625rem}
  .hdr__brand .flag{width:36px;height:18px}
  /* 36px was below the 44px touch minimum in every direction */
  .hdr__burger{width:44px;height:44px;padding:0}

  /* the drawer is a layer over the page, so it says so, and its rows clear
     the 44px minimum rather than landing just under it */
  .hdr__nav{box-shadow:var(--shadow)}
  .hdr__nav a:not(.btn){padding:.8125rem .5rem;border-bottom:1px solid var(--g100)}
  .hdr__nav a:not(.btn):last-of-type{border-bottom:0}

  /* offsets that were measured against the 92px bar */
  .sheet__head{scroll-margin-top:137px}  /* 64 header + 57 step bar + 16 */
  [id="package"],[id="specimens"]{scroll-margin-top:80px}

  /* ---------- fee tables become rows, not a scrolling grid ----
     Three columns in 390px left the amount — the one number the
     reader came for — cut off outside a scroll box they had no
     reason to know was there. Every table on the site is the same
     shape (item, basis, amount), so one rule restacks all of them
     with no change to the markup or to the JS that builds them. */
  .scroll-x{overflow-x:visible}
  .scroll-x>.table{min-width:0}
  .table thead{display:none}
  .table,.table tbody{display:block}
  .table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:.1875rem .875rem;align-items:baseline;
    padding:.9375rem 0;border-bottom:1px solid var(--line)}
  .table td{display:block;border:0;padding:0}
  .table td:nth-child(1){grid-column:1;grid-row:1;font-weight:500;line-height:1.35}
  .table td:nth-child(3){grid-column:2;grid-row:1;text-align:right;font-weight:500}
  .table td:nth-child(2){grid-column:1/-1;grid-row:2;font-size:.8125rem}
  .table td:empty{display:none}
  .table tr:last-child{border-bottom:0}
  .table__total td{padding:0;border:0;font-size:1.0625rem}
  .table__total{border-top:1px solid var(--line-strong);border-bottom:0;
    margin-top:.25rem;padding-top:1.0625rem}
  /* a table-caption box inside a display:block table is wrapped in an
     anonymous table and shrink-wraps to a five-line column */
  .table caption{display:block;padding-bottom:.75rem}

  /* ---------- hero ---------- */
  /* the clip is a 900px-wide capture of the desktop form: at 350px
     its field labels are about four pixels tall, so it reads as
     texture rather than as evidence. The steps below it carry the
     same point in words. */
  .herocard .demo{display:none}
  .herocard .seq__head{border-top:0}
  .hero{padding-block:1.75rem 2.5rem}
  .hero h1{font-size:clamp(2.125rem,9vw,2.75rem)}
  /* 10px is below the floor for a supporting label on a phone */
  .hero__meta dt{font-size:.6875rem}
  .hero__meta{margin-top:2rem}

  /* the badge column ("~20 min", "Optional") was taking a third of the row
     and squeezing every description to about 200px. Below the text it costs
     one short line and gives the prose the full width. */
  .seq__row{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .seq__badge{grid-column:2;justify-self:start;
    padding:.125rem .4375rem;border-radius:4px;background:var(--g100);
    color:var(--g600);font-size:.6875rem;font-weight:500}

  /* ---------- form fields ----------
     iOS Safari zooms the whole page in whenever a focused field is under
     16px, and does not zoom back out — the user is left on a magnified,
     sideways-scrolling page. 15px was the site's field size everywhere,
     which is 86 fields on the questionnaire alone. */
  .field input[type=text],.field input[type=email],.field input[type=tel],
  .field input[type=date],.field input[type=number],.field select,.field textarea{
    font-size:1rem}

  /* ---------- tap targets ---------- */
  /* footer link lists are navigation, not prose: 19px rows are a
     coin toss between two of them */
  .ftr ul{gap:.125rem}
  .ftr ul a{display:inline-block;padding-block:.5rem}
  /* the brand mark's own box is only as tall as the flag beside the wordmark */
  .hdr__brand{min-height:44px}
  /* every real button clears 44px: several landed at 39 */
  .btn{min-height:44px}
  .hero__route{padding-block:.5625rem .4375rem}
  .choice{padding:.75rem .9375rem}
  /* the email and telephone on the contact page are the page's whole point */
  a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding-block:.375rem}
  /* the payment strip stacks here, so pushing the button right leaves it
     hanging off on its own instead of lining up with everything else */
  .gsrc{margin-left:0}

  /* ---------- the standing action bar ---------- */
  /* index, services, requirements, renewal and the BVI page run to
     between eight and eighteen screens on a phone. Without this the
     only way back to the form is a scroll to the top or the drawer.
     The component itself is defined below the query. */
}