@charset "utf-8";
/* ==========================================================================
   styles.css — the whole site.
   Loaded as one blocking stylesheet; it gzips to about 9 KB, which is
   cheaper than duplicating a critical subset into every HTML response.
   Anything duplicated there is deliberate; this file is the source of truth.

   1. Tokens and base .......... shared with the critical block
   2. Layout and content
   3. The tool: form, freight lines, action bar
   4. Cards, callouts, FAQ, tables
   5. Footer and consent banner
   6. Print — both the generated document and the bare form
   ========================================================================== */

/* ── 1. Tokens and base ─────────────────────────────────────────────────── */

:root{
  --ink:#14161a; --ink-2:#3d434e; --ink-3:#6a7180;
  --paper:#fafaf8; --paper-2:#f2f1ec; --card:#fefdfa;
  --primary:#1f3864; --primary-2:#16294a; --primary-tint:#e8edf5;
  --accent:#d97706; --accent-2:#b45309; --accent-tint:#fdf3e3;
  --line:#dcd9d0; --line-2:#c4c0b4;
  --err:#b42318; --err-tint:#fdf0ef; --ok:#166534;
  --r:6px; --r-lg:12px;
  /* NO WEBFONT IS LOADED, and that is deliberate rather than an oversight.
     There is no @font-face anywhere and no font file in the repo: the named
     families are used only if a visitor already has them installed, and
     everyone else gets the system stack — SF Pro on Apple, Segoe on Windows,
     Roboto on Android. That costs zero bytes, zero requests and has no FOUT.
     Self-hosting Inter + Inter Tight as subset woff2 would cost roughly 40-60 KB
     across weights; worth doing only if the brand look matters more than that. */
  --sans:"Inter","Söhne",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ui:"Inter Tight","Söhne Schmal","Roboto Condensed",var(--sans);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(20,22,26,.06),0 4px 16px -6px rgba(20,22,26,.10);
  --wrap:1120px; --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;letter-spacing:-.017em;font-weight:650;text-wrap:balance}
h1{font-size:clamp(1.85rem,1.35rem + 2.1vw,2.85rem);letter-spacing:-.025em}
h2{font-size:clamp(1.35rem,1.12rem + .95vw,1.85rem);margin-top:2.1em}
h3{font-size:1.16rem;margin-top:1.8em}
h4{font-size:1.02rem;margin-top:1.5em;font-weight:600}
p,ul,ol{margin:0 0 1.15em}
li{margin-bottom:.42em}
li>ul,li>ol{margin-top:.42em}
strong,b{font-weight:640}
small{font-size:.86em}
hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
a{color:var(--primary);text-underline-offset:.16em;text-decoration-thickness:.07em}
a:hover{color:var(--accent-2)}
img,svg{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-tint)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--primary);color:#fff;
  padding:.7em 1.1em;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 2. Layout and content ──────────────────────────────────────────────── */

.masthead{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:20}
.masthead__in{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:9px;font:650 1.05rem/1 var(--ui);
  color:var(--primary);text-decoration:none;letter-spacing:-.02em;padding:.35em 0}
.brand__mark{width:26px;height:26px;flex:0 0 26px}
.brand:hover{color:var(--primary-2)}
.nav{margin-left:auto;margin-right:clamp(0px,2vw,28px);display:flex;gap:4px;
  flex-wrap:wrap;align-items:center}
.nav a,.nav__here{font:500 .855rem/1 var(--ui);padding:.62em .7em;border-radius:var(--r);
  text-decoration:none;color:var(--ink-2);white-space:nowrap}
.nav a:hover{background:var(--primary-tint);color:var(--primary-2)}
.nav__here{color:var(--primary);background:var(--primary-tint)}

/* Disclosure menus. <details> does the work, so every page stays reachable
   with JavaScript switched off; nav.js only adds close-on-outside-click,
   Escape, and one-menu-at-a-time. */
.navmenu{position:relative}
.navmenu__toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font:500 .855rem/1 var(--ui);color:var(--ink-2);padding:.62em .7em;border-radius:var(--r);
  white-space:nowrap;user-select:none}
.navmenu__toggle::-webkit-details-marker{display:none}
.navmenu__toggle:hover{background:var(--primary-tint);color:var(--primary-2)}
.navmenu[data-has-current]>.navmenu__toggle{color:var(--primary);background:var(--primary-tint)}
.navmenu__chev{transition:transform .15s;flex:0 0 10px}
.navmenu[open]>.navmenu__toggle{background:var(--primary-tint);color:var(--primary-2)}
.navmenu[open] .navmenu__chev{transform:rotate(180deg)}

.navmenu__panel{position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  min-width:250px;display:flex;gap:22px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 2px 4px rgba(20,22,26,.05),0 12px 34px -10px rgba(20,22,26,.24);
  padding:16px 18px}
.navmenu__group{min-width:0}
.navmenu__h{font:650 .66rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .8em;white-space:nowrap}
.navmenu__panel ul{list-style:none;margin:0;padding:0}
.navmenu__panel li{margin:0 0 1px}
.navmenu__panel a,.navmenu__here{display:block;font:500 .875rem/1.3 var(--ui);
  padding:.5em .6em;border-radius:var(--r);text-decoration:none;color:var(--ink-2);white-space:nowrap}
.navmenu__panel a:hover{background:var(--primary-tint);color:var(--primary-2)}
.navmenu__here{color:var(--primary);background:var(--primary-tint)}

@media (max-width:860px){
  .masthead__in{padding-block:8px}
  .nav{margin-left:0;margin-right:0;width:100%;gap:8px}
  .navmenu{position:static;flex:1 1 100%}
  .navmenu__toggle{justify-content:space-between;width:100%;min-height:44px;
    padding:.8em .8em;border:1px solid var(--line);background:var(--paper-2)}
  /* In flow rather than floating, so a long menu scrolls the page instead of
     overflowing a 360px viewport. */
  .navmenu__panel{position:static;flex-direction:column;gap:14px;margin-top:8px;
    min-width:0;box-shadow:none}
  .navmenu__panel a,.navmenu__here{white-space:normal}
  .navmenu__h{white-space:normal}
}

/* Hero and prose share one centred column, so the H1 and the body text line
   up. Centring one without the other is what pulled them apart before.

   Tool pages opt out: there the full-width tool card defines the left edge,
   and a narrower centred hero above it reads as misaligned rather than as
   deliberate. Those pages stay left-aligned to the card, and the card itself
   is centred on screen by .wrap. */
.hero{max-width:var(--measure);margin-inline:auto;padding-block:34px 6px}
/* Only the hero opts out. .prose stays centred everywhere: the old
   margin-inline:0 pinned the reading column to the VIEWPORT edge rather than
   the container, so on a wide screen the body text sat far left of the H1
   above it. That is the misalignment this whole change is fixing. */
body.is-tool .hero{max-width:var(--wrap);margin-inline:auto}
.hero__kicker{font:600 .715rem/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 .95em}
.hero__lede{font-size:1.115rem;color:var(--ink-2);max-width:60ch;margin-bottom:1.1em}
.trustline{display:flex;flex-wrap:wrap;gap:7px 16px;padding:0;margin:0 0 4px;list-style:none;
  font:500 .8rem/1.35 var(--ui);color:var(--ink-3)}
.trustline li{display:flex;align-items:center;gap:6px;margin:0}
.trustline svg{flex:0 0 14px;color:var(--ok)}

/* The long-form body column. Content pages use it directly; tool pages use it
   under the tool. Capped measure, per the brief. */
.prose{max-width:var(--measure);margin-inline:auto;padding-block:8px 40px}
.prose>h2:first-child{margin-top:1.2em}
.prose ul,.prose ol{padding-left:1.25em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.15em}
.prose ul li::before{content:"";position:absolute;left:.15em;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.75}
.prose ol{padding-left:1.35em}
.prose ol li::marker{color:var(--accent-2);font-weight:600}

.answer{font-size:1.115rem;line-height:1.6;color:var(--ink);
  border-left:3px solid var(--accent);padding:2px 0 2px 18px;margin:0 0 1.5em}

.section-lede{color:var(--ink-2)}

.anchor-nav{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px;margin:0 0 34px}
.anchor-nav h2{font:650 .74rem/1 var(--ui);letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .85em}
.anchor-nav ul{list-style:none;padding:0;margin:0;columns:2;column-gap:26px}
.anchor-nav li,.prose .anchor-nav li{margin:0 0 .45em;padding:0;break-inside:avoid}
.anchor-nav li::before,.prose .anchor-nav li::before{display:none;content:none}
.anchor-nav a{font-size:.93rem}
@media (max-width:560px){.anchor-nav ul{columns:1}}

/* ── 3. The tool ────────────────────────────────────────────────────────── */

.toolcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin:22px 0 8px}
.toolcard__head{padding:17px 20px 15px;border-bottom:1px solid var(--line);background:var(--paper-2);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.toolcard__title{font:650 1.06rem/1.3 var(--ui);margin:0 0 3px;color:var(--primary)}
.toolcard__sub{margin:0;font-size:.85rem;color:var(--ink-3)}
.toolcard__body{padding:6px 20px 20px}
@media (max-width:560px){
  .toolcard{border-radius:0;border-inline:0;margin-inline:-20px}
  .toolcard__head{border-radius:0}
  .toolcard__body{padding-inline:16px}
  .toolcard__head{padding-inline:16px}
}

fieldset{border:0;border-top:1px solid var(--line);margin:22px 0 0;padding:16px 0 0;min-width:0}
fieldset:first-of-type{border-top:0;margin-top:8px}
legend{font:650 .74rem/1 var(--ui);letter-spacing:.085em;text-transform:uppercase;
  color:var(--primary);padding:0 10px 0 0}
.fieldset-note{margin:-4px 0 14px;font-size:.85rem;color:var(--ink-3);max-width:62ch}

/* Saved parties bar — sits under a legend, above the address grid.
   Only rendered for signed-in paid users, so the layout below it is
   unchanged for everybody else. */
.partybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 14px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-2)}
.partybar__pick{font:400 .85rem/1.3 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.4em .5em;min-height:36px;max-width:100%;flex:1 1 220px}
.partybar__pick:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.partybar .btn{min-height:36px;white-space:nowrap}
.partybar__note{font:500 .78rem/1.3 var(--ui);color:var(--ok)}
.partybar__note--err{color:var(--err)}
@media (max-width:520px){
  .partybar{gap:6px}
  .partybar__pick{flex-basis:100%}
}

.grid{display:grid;gap:12px 14px;grid-template-columns:repeat(12,1fr)}
.field{display:flex;flex-direction:column;gap:5px;grid-column:span 12;min-width:0}
.field>label{font:500 .775rem/1.3 var(--ui);color:var(--ink-2)}
.field__hint{font-size:.76rem;color:var(--ink-3);margin:0}
.field input,.field select,.field textarea{font:400 .95rem/1.4 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.58em .68em;width:100%;min-height:44px;transition:border-color .12s,box-shadow .12s}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-tint)}
.field input::placeholder,.field textarea::placeholder{color:#9aa1ae}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--err);
  background:var(--err-tint)}
.field--invalid>label{color:var(--err)}
.field__err{font:500 .76rem/1.35 var(--ui);color:var(--err);margin:0}
@media (min-width:620px){
  .col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
  .col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}
  .col-8{grid-column:span 8}.col-9{grid-column:span 9}
}

.check{justify-content:flex-end}
.check__label{display:flex;align-items:center;gap:9px;cursor:pointer;
  font:500 .8rem/1.3 var(--ui);color:var(--ink-2);min-height:44px}
.check__label input{width:22px;height:22px;min-height:22px;flex:0 0 22px;accent-color:var(--accent);
  border:1px solid var(--line-2);border-radius:3px}

/* Freight lines. A table on a wide screen, stacked labeled cards at 360px —
   a line item has eight fields and none of them can be dropped. */
.lines{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.line{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:12px}
.line__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.line__no{font:650 .72rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.line__grid{display:grid;gap:10px;grid-template-columns:repeat(12,1fr)}
.line .field{grid-column:span 6}
.line .field--desc{grid-column:span 12}
@media (min-width:760px){
  .line__grid{grid-template-columns:repeat(24,1fr);align-items:end}
  .line .field{grid-column:span 3}
  .line .field--desc{grid-column:span 9}
  .line .field--hm{grid-column:span 2}
}
.line__remove{margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--ink-3);
  border-radius:var(--r);font:500 .78rem/1 var(--ui);padding:.5em .7em;min-height:34px;cursor:pointer}
.line__remove:hover{border-color:var(--err);color:var(--err);background:var(--err-tint)}

.lines__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:6px}
.totals{font:600 .85rem/1.4 var(--ui);color:var(--primary);background:var(--primary-tint);
  border-radius:var(--r);padding:.55em .8em}
.hmflag{font:600 .78rem/1.4 var(--ui);color:var(--accent-2);background:var(--accent-tint);
  border:1px solid #f0d9ae;border-radius:var(--r);padding:.5em .75em}

/* Errors and status */
.errors{border:1px solid var(--err);background:var(--err-tint);border-radius:var(--r);
  padding:14px 16px;margin:16px 0}
.errors__lead{font:600 .93rem/1.4 var(--ui);color:var(--err);margin:0 0 .5em}
.errors ul{margin:0;padding-left:1.15em}
.errors li{margin:0 0 .3em;font-size:.9rem}
.errors a{color:var(--err)}
.toolstatus{font:500 .88rem/1.45 var(--ui);margin:10px 0 0;padding:.6em .8em;border-radius:var(--r)}
.toolstatus--ok{color:var(--ok);background:#eef6ef;border:1px solid #cfe4d3}
.toolstatus--error{color:var(--err);background:var(--err-tint);border:1px solid #f2d3d0}
.toolstatus--busy{color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line)}

/* Actions. Sticky at the bottom on phones so Generate is always one thumb
   away, even fifteen fields down the form. */
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.actions__note{font-size:.8rem;color:var(--ink-3);margin:0;flex:1 1 220px;min-width:0}
@media (max-width:719px){
  .actions{position:sticky;bottom:0;z-index:15;margin:20px -16px 0;padding:12px 16px;
    background:var(--card);border-top:1px solid var(--line-2);
    box-shadow:0 -6px 18px -10px rgba(20,22,26,.28);
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .actions .btn{flex:1 1 auto}
  .actions__note{flex-basis:100%;order:-1;margin-bottom:2px}
  /* Lift the sticky action bar clear of the cookie banner. consent.js measures
     the banner and publishes --consent-h; the fallback keeps the old behaviour
     if the script has not run yet. This used to read bottom:0 — the value it
     already had — so it lifted nothing and the banner covered Generate. */
  body.has-consent-banner .actions{bottom:var(--consent-h, 0px)}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 .93rem/1 var(--ui);padding:.85em 1.25em;min-height:46px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent-2)}
.btn--primary:hover{background:var(--accent-2);color:#fff}
.btn--ghost{background:var(--card);color:var(--primary);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--primary-tint);color:var(--primary-2)}
.btn--small{min-height:38px;padding:.6em .9em;font-size:.85rem}
.btn[disabled]{opacity:.6;cursor:progress}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--primary);
  text-decoration:underline;text-underline-offset:.16em;cursor:pointer}
.linkbtn:hover{color:var(--accent-2)}

/* ── 4. Cards, callouts, FAQ, tables ────────────────────────────────────── */

.cardgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  list-style:none;padding:0;margin:0 0 8px}
.cardgrid li,.prose .cardgrid li{margin:0;padding:0}
.cardgrid li::before,.prose .cardgrid li::before{display:none;content:none}
.doccard{display:flex;flex-direction:column;height:100%;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 17px;
  text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
a.doccard:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-1px)}
.doccard__kind{font:600 .68rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 .8em}
.doccard__title{font:650 1.02rem/1.3 var(--ui);color:var(--primary);margin:0 0 .35em}
.doccard__desc{font-size:.885rem;line-height:1.5;color:var(--ink-2);margin:0}
.doccard--soon{opacity:.72;cursor:default}
.doccard--soon .doccard__kind{color:var(--ink-3)}

.callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:1.8em 0}
.callout>:last-child{margin-bottom:0}
.callout h3,.callout h4{margin-top:0;font-size:1rem;color:var(--primary)}
.callout--warn{border-left-color:var(--accent);background:var(--accent-tint);border-color:#f0d9ae}
.callout--warn h3,.callout--warn h4{color:var(--accent-2)}
.callout--limits{border-left-color:var(--ink-3);background:var(--paper-2)}

/* A compact tool card dropped into the middle of a content page. */
.toolpitch{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;margin:2em 0;box-shadow:var(--shadow)}
.toolpitch__text{flex:1 1 300px;min-width:0}
.toolpitch h3{margin:0 0 .3em;font-size:1.05rem;color:var(--primary)}
.toolpitch p{margin:0;font-size:.9rem;color:var(--ink-2)}

.faq{margin:1.4em 0 0}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__q{font:650 1rem/1.45 var(--ui);color:var(--primary);cursor:pointer;
  padding:16px 34px 16px 0;position:relative;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .16s}
.faq__item[open] .faq__q::after{transform:rotate(-135deg);margin-top:-2px}
.faq__a{padding:0 0 16px;color:var(--ink-2)}
.faq__a>:last-child{margin-bottom:0}

.tablewrap{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:var(--r)}
table.data{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem;background:var(--card)}
table.data th,table.data td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
table.data thead th{background:var(--paper-2);font:650 .74rem/1.3 var(--ui);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:0}
table.data td code{font:500 .86em/1.4 var(--mono);background:var(--paper-2);padding:.1em .35em;
  border-radius:3px}

.figure{margin:2em 0}
.figure img{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card)}
/* A diagram whose labels stop being legible below ~560px scrolls sideways
   inside its own box rather than shrinking into illegibility. */
.figure__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figure--wide .figure__scroll img{min-width:520px}
.figure figcaption{font-size:.83rem;color:var(--ink-3);margin-top:.7em;line-height:1.5}

/* ── 5. Footer and consent banner ───────────────────────────────────────── */

.sitefoot{border-top:1px solid var(--line);background:var(--paper-2);margin-top:48px;
  padding:36px 0 22px}
.sitefoot__in{display:grid;gap:26px 30px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.sitefoot__brand{grid-column:span 1}
.sitefoot__name{font:650 1rem/1 var(--ui);color:var(--primary);margin:0 0 .6em}
.sitefoot__blurb{font-size:.86rem;color:var(--ink-2);margin:0;max-width:34ch}
.sitefoot__h{font:650 .7rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .9em}
.sitefoot__nav ul{list-style:none;padding:0;margin:0}
.sitefoot__nav li{margin:0 0 .5em}
.sitefoot__nav a{font-size:.88rem;color:var(--ink-2);text-decoration:none}
.sitefoot__nav a:hover{color:var(--primary);text-decoration:underline}
.sitefoot__here{font-size:.88rem;color:var(--primary);font-weight:600}
.sitefoot__legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:flex-start}
.sitefoot__legal p{font-size:.79rem;color:var(--ink-3);margin:0;max-width:78ch;line-height:1.55}
.sitefoot__legal .linkbtn{font-size:.79rem}

.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);
  border-top:1px solid var(--line-2);box-shadow:0 -8px 26px -14px rgba(20,22,26,.4);
  padding-bottom:env(safe-area-inset-bottom)}
.consent__in{max-width:var(--wrap);margin-inline:auto;padding:16px 20px;
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between}
.consent__title{font:650 .95rem/1.3 var(--ui);margin:0 0 .3em;color:var(--primary)}
.consent__body{font-size:.86rem;line-height:1.55;color:var(--ink-2);margin:0;max-width:72ch}
.consent__actions{display:flex;gap:10px;flex:0 0 auto}
@media (max-width:600px){.consent__actions{width:100%}.consent__actions .btn{flex:1}}

/* The printable mirror is built by the engine and only exists during print. */
#doc-print-view{display:none}

/* ── 6. Print ───────────────────────────────────────────────────────────── */

@media print{
  :root{--paper:#fff;--card:#fff;--paper-2:#fff}
  @page{size:letter portrait;margin:12mm}

  .masthead,.sitefoot,.consent,.skip,.anchor-nav,.actions,.toolpitch,
  .trustline,.hero__kicker,.line__remove,[data-add-row],
  .toolstatus,.errors{display:none!important}

  body{font-size:10.5pt;line-height:1.45;background:#fff;color:#000}
  a{color:#000;text-decoration:none}
  .wrap{max-width:none;padding-inline:0}
  .prose{max-width:none}
  h2,h3{page-break-after:avoid}
  p,li,tr,.line,.doccard{page-break-inside:avoid}
  .faq__item{page-break-inside:avoid}
  .faq__a{display:block!important}

  /* No JavaScript, no PDF — but the form still prints as a usable blank BOL
     with ruled lines to write on. That is the whole no-JS story. */
  .toolcard{border:1.2pt solid #000;border-radius:0;box-shadow:none;margin:0 0 8pt}
  .toolcard__head{background:#eee;border-bottom:1pt solid #000;padding:6pt 8pt}
  .toolcard__body{padding:0 8pt 8pt}
  fieldset{border-top:1pt solid #000;margin-top:8pt;padding-top:6pt}
  legend{font-size:8pt}
  .field>label{font-size:7pt;color:#000}
  .field input,.field select,.field textarea{border:0;border-bottom:.7pt solid #000;
    border-radius:0;min-height:0;padding:1pt 2pt;background:#fff;font-size:9pt}
  .field textarea{border:.7pt solid #000;min-height:36pt}
  .line{border:.7pt solid #000;padding:4pt}

  /* When the Print button was used, show only the rendered document. */
  body.is-printing-doc>*:not(#doc-print-view){display:none!important}
  body.is-printing-doc #doc-print-view{display:block}
}

/* ── The printable document mirror (engine output as HTML) ──────────────── */

#doc-print-view .pd{font:9pt/1.3 var(--sans);color:#000}
.pd-head{display:flex;align-items:center;justify-content:space-between;gap:12pt;border:1.2pt solid #000;padding:7pt 9pt}
.pd-head>div:first-of-type{margin-right:auto}
.pd-logo{flex:0 0 auto;max-width:116pt;max-height:40pt;width:auto;height:auto;object-fit:contain}
.pd-title{font-size:15pt;margin:0;letter-spacing:-.02em}
.pd-sub{font-size:7.5pt;margin:2pt 0 0;color:#333;letter-spacing:.04em}
.pd-head__meta{display:flex;gap:16pt;flex:0 0 auto}
.pd-strip{display:flex;border:.8pt solid #000;border-top:0}
.pd-strip .pd-cell{flex:1;border-right:.5pt solid #000;padding:4pt 6pt}
.pd-strip .pd-cell:last-child{border-right:0}
.pd-row{display:flex;gap:6pt;margin-top:6pt}
.pd-row>*{flex:1;min-width:0}
.pd-box{border:.8pt solid #000;margin-top:6pt;page-break-inside:avoid}
.pd-row .pd-box{margin-top:0}
.pd-box__title{font:bold 7.5pt/1.2 var(--ui);letter-spacing:.06em;background:#eee;
  border-bottom:.8pt solid #000;margin:0;padding:4pt 6pt}
.pd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3pt 6pt;padding:5pt 6pt}
.pd-cell{display:flex;flex-direction:column;min-width:0}
.pd-label{font:6pt/1.2 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:#444}
.pd-value{font:bold 9pt/1.25 var(--sans);min-height:11pt;word-break:break-word}
.pd-freetext{padding:5pt 6pt;margin:0;min-height:26pt;font-size:9pt}
.pd-table{width:100%;border-collapse:collapse;font-size:8pt}
.pd-table th,.pd-table td{border:.5pt solid #000;padding:3pt 4pt;text-align:left;vertical-align:top}
.pd-table th{background:#eee;font:bold 6pt/1.15 var(--ui);text-transform:uppercase}
.pd-table .is-right{text-align:right}
.pd-table tbody tr.is-blank td{height:14pt}
.pd-table tfoot td{background:#eee;font-weight:bold}
.pd-terms{margin-top:7pt;columns:2;column-gap:14pt;font-size:6pt;line-height:1.35;color:#333}
.pd-terms .pd-box__title{background:none;border:0;padding:0 0 3pt;column-span:all}
.pd-terms p{margin:0 0 4pt}
.pd-sig{flex:1}
.pd-signote{font-size:5.8pt;line-height:1.3;color:#444;margin:0;padding:4pt 6pt 2pt}
.pd-sigline{border-bottom:.6pt solid #000;margin:10pt 6pt 0}
.pd-sigline .pd-label{font-size:5.5pt}
.pd-foot{display:flex;justify-content:space-between;font-size:6pt;color:#444;
  border-top:.5pt solid #000;margin-top:8pt;padding-top:3pt}

/* ── IFTA calculator ────────────────────────────────────────────────────── */

.ifta-rowout{font:500 .78rem/1.4 var(--ui);color:var(--ink-3);align-self:end;padding-bottom:.5em}
.ifta-summary{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:4px 0 14px}
.ifta-stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.ifta-stat__label{display:block;font:600 .68rem/1 var(--ui);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.55em}
.ifta-stat__value{display:block;font:650 1.35rem/1.1 var(--ui);color:var(--primary);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ifta-verdict{font:650 1.05rem/1.4 var(--ui);color:var(--ink-2);margin:0;
  padding:.7em .9em;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line)}
.ifta-verdict--due{color:var(--accent-2);background:var(--accent-tint);border-color:#f0d9ae}
.ifta-verdict--credit{color:var(--ok);background:#eef6ef;border-color:#cfe4d3}
@media (min-width:760px){
  #ifta-form .line__grid{grid-template-columns:repeat(24,1fr);align-items:end}
  #ifta-form .line .field{grid-column:span 4}
  #ifta-form .line .field--desc{grid-column:span 8}
}
@media print{
  #ifta-form .line__remove,#ifta-form [data-ifta-add]{display:none!important}
  .ifta-stat{border:1pt solid #000}
}

/* ── Accounts: auth forms and the account area ──────────────────────────── */

/* A narrow centred column for signup, login and the token flows. */
.authwrap{max-width:440px;margin-inline:auto;padding:38px 0 56px}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:26px 26px 24px}
.authcard h1{font-size:1.5rem;margin:0 0 .35em;letter-spacing:-.02em}
.authcard__lede{color:var(--ink-2);font-size:.95rem;margin:0 0 22px}
.authcard .field{margin-bottom:14px}
.authcard .btn{width:100%;margin-top:6px}
.authfoot{text-align:center;font-size:.9rem;color:var(--ink-3);margin:18px 0 0}
.authfoot a{font-weight:500}
.authaside{font-size:.83rem;color:var(--ink-3);margin:22px auto 0;max-width:440px;
  text-align:center;line-height:1.55}

/* Form-level feedback. .notice is neutral, the modifiers carry the meaning. */
.notice{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r);
  padding:12px 14px;margin:0 0 18px;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.notice--error{border-color:#f2d3d0;background:var(--err-tint);color:var(--err)}
.notice--ok{border-color:#cfe4d3;background:#eef6ef;color:var(--ok)}
.notice--warn{border-color:#f0d9ae;background:var(--accent-tint);color:var(--accent-2)}
.notice p{margin:0 0 .5em}
.notice p:last-child{margin:0}
.notice a{color:inherit;font-weight:600}

/* Sitewide strip prompting an unverified user. */
.verifybar{background:var(--accent-tint);border-bottom:1px solid #f0d9ae}
.verifybar__in{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  padding-block:10px;font:500 .86rem/1.45 var(--ui);color:var(--accent-2)}
.verifybar form{margin-left:auto}
.verifybar button{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer}

/* Account area */
.accountgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:0 0 22px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.panel h2{font:650 .74rem/1 var(--ui);letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.panel h3{margin-top:0}
.panel__row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.92rem}
.panel__row:last-of-type{border-bottom:0}
.panel__row dt{color:var(--ink-3);margin:0}
.panel__row dd{margin:0;font-weight:550;text-align:right;word-break:break-word}

.pill{display:inline-block;font:600 .7rem/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;padding:.42em .6em;border-radius:100px}
.pill--free{background:var(--paper-2);color:var(--ink-3);border:1px solid var(--line)}
.pill--paid{background:#eef6ef;color:var(--ok);border:1px solid #cfe4d3}
.pill--owner{background:var(--primary-tint);color:var(--primary);border:1px solid #cfd8e8}

.teamlist{list-style:none;margin:0;padding:0}
.teamlist li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.teamlist li:last-child{border-bottom:0}
.teamlist__name{font-weight:550}
.teamlist__email{color:var(--ink-3);font-size:.86rem;word-break:break-all}
.teamlist__meta{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Saved parties and document history — list pages inside the account. */
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.panel__count{display:inline-block;margin-left:8px;font:600 .7rem/1 var(--ui);
  letter-spacing:.04em;color:var(--ink-3);background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:.36em .6em;vertical-align:middle}

.filterbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font:500 .78rem/1 var(--ui);color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:.5em .75em}
.chip span{color:var(--ink-3);font-size:.9em}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip--on{background:var(--primary);border-color:var(--primary);color:#fff}
.chip--on span{color:rgba(255,255,255,.72)}

.filterform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 16px}
.filterform .field{flex:1 1 200px;gap:0}
.filterform input,.filterform select{min-height:38px;font-size:.9rem}

.data--account{font-size:.9rem}
.data--account td{vertical-align:top}
.data--account .num{text-align:right;font-variant-numeric:tabular-nums}
.rowmeta{color:var(--ink-3);font-size:.82rem}
.rowactions{white-space:nowrap;text-align:right}
.rowactions>*{margin-left:6px}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}

.emptystate{border:1px dashed var(--line-2);border-radius:var(--r);
  padding:22px;background:var(--paper-2);color:var(--ink-2)}
.emptystate p{margin:0 0 .6em;max-width:62ch}
.emptystate p:last-child{margin-bottom:0}

.pager{display:flex;align-items:center;gap:12px;margin-top:16px}
.pager__where{font:500 .82rem/1 var(--ui);color:var(--ink-3)}

/* Logo preview. Shown against the sheet it prints on, not the card, so what
   the owner approves is what the consignee receives. */
.logopreview{display:flex;align-items:center;justify-content:center;min-height:96px;
  padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.logopreview img{max-width:100%;height:auto;image-rendering:auto}
.logopreview__note{margin:10px 0 0;font-size:.82rem;color:var(--ink-3)}

.btn--danger{color:var(--err);border-color:#f2d3d0;background:var(--card)}
.btn--danger:hover{background:var(--err-tint);border-color:var(--err)}

/* A fieldset used only to disable everything inside it in one attribute, so it
   must not bring the fieldset border and spacing along with it. */
.formlock{border:0;margin:0;padding:0;min-width:0}
.formlock[disabled] input,.formlock[disabled] select,.formlock[disabled] textarea{
  background:var(--paper-2);color:var(--ink-2);cursor:default}

@media (max-width:620px){
  .rowactions{white-space:normal;text-align:left}
  .rowactions>*{margin:4px 6px 0 0}
}

/* Signed-in state in the masthead. */
.nav__account{display:flex;align-items:center;gap:6px;margin-left:6px;padding-left:10px;
  border-left:1px solid var(--line)}
.nav__you{font:500 .8rem/1.2 var(--ui);color:var(--ink-3);max-width:15ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  .nav__account{margin-left:0;padding-left:0;border-left:0;width:100%;
    justify-content:space-between;padding-top:6px}
  .nav__you{max-width:none}
}

/* --- scroll to top ---------------------------------------------------------
   Hidden until there is something to scroll back over, and it animates in
   rather than appearing. Sits clear of the sticky action bar on phones, and
   honours prefers-reduced-motion via the global rule at the top of this file. */
.totop{position:fixed;right:22px;bottom:22px;z-index:40;
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--primary);color:#fff;border:0;border-radius:50%;cursor:pointer;
  box-shadow:0 2px 6px rgba(20,22,26,.18),0 10px 24px -8px rgba(20,22,26,.34);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.92);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s,background-color .15s}
.totop.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s,0s}
.totop:hover{background:var(--primary-2)}
.totop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.totop svg{display:block}
@media (max-width:719px){
  /* Clear of the sticky Generate bar on tool pages. */
  .totop{right:14px;bottom:calc(76px + env(safe-area-inset-bottom));width:42px;height:42px}
}
@media print{ .totop{display:none} }

/* --- footer legal line -----------------------------------------------------
   Centred, and the measure centred with it — a 78ch block left-aligned under a
   centred footer read as a mistake. */
.sitefoot__legal{text-align:center}
.sitefoot__legal p{margin-inline:auto}