@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(geistmono.684ad5b531.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700 800;font-display:swap;src:url(schibstedgrotesk.4c8b93f431.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(sourcesans3.7a19a7027e.woff2) format('woff2')}
/* Papertern — shared styles. Tokens first; components use tokens only. */
:root {
  --paper: #F3F5F7;
  --sheet: #FFFFFF;
  --sheet-2: #F8FAFB;
  --ink: #111A27;
  --ink-2: #445266;
  --muted: #636F7F;   /* 4.67:1 on the page background: WCAG AA at any size (was #6B7889, 4.11:1) */
  --line: #D8DFE6;
  --line-2: #E7ECF1;
  --accent: #D9472B;          /* tern bill: brand marks and accents */
  --accent-btn: #CE4127;      /* same hue, deep enough for white text: 4.76:1 */
  --accent-ink: #FFFFFF;
  --accent-soft: #FBE9E4;
  --sea: #0F6E78;             /* water under the tern */
  --sea-soft: #E2F1F2;
  --ok: #17784C; --ok-soft: #E3F3EA;
  --warn: #9A6200; --warn-soft: #FDF1DA;
  --bad: #B3261E; --bad-soft: #FBE4E2;
  --focus: #1D5FD1;
  --shadow: 0 1px 2px rgba(17,26,39,.06), 0 12px 32px rgba(17,26,39,.08);
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E131A; --sheet: #161D27; --sheet-2: #1B2330;
    --ink: #E8EDF3; --ink-2: #B2BDCB; --muted: #8894A4;
    --line: #2B3543; --line-2: #222B37;
    --accent: #F0674A; --accent-btn: #F0674A; --accent-ink: #13100F; --accent-soft: #3A1E17;
    --sea: #4FB6BF; --sea-soft: #12303A;
    --ok: #5CC993; --ok-soft: #123326; --warn: #F0B84E; --warn-soft: #3A2C0E; --bad: #F2847A; --bad-soft: #3B1715;
    --focus: #7EA8F7; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E131A; --sheet: #161D27; --sheet-2: #1B2330;
  --ink: #E8EDF3; --ink-2: #B2BDCB; --muted: #8894A4;
  --line: #2B3543; --line-2: #222B37;
  --accent: #F0674A; --accent-btn: #F0674A; --accent-ink: #13100F; --accent-soft: #3A1E17;
  --sea: #4FB6BF; --sea-soft: #12303A;
  --ok: #5CC993; --ok-soft: #123326; --warn: #F0B84E; --warn-soft: #3A2C0E; --bad: #F2847A; --bad-soft: #3B1715;
  --focus: #7EA8F7; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: var(--sea); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; margin: 0 0 12px; }
h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; margin: 0 0 10px; }
h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 760px; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.lead { font-size: 19px; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }
.vh-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--sheet); padding: 8px 12px; z-index: 50; }

/* header */
.site-head { background: var(--sheet); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand:hover { color: var(--ink); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 15px; padding: 6px 10px; border-radius: 8px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--sheet-2); color: var(--ink); }
.country-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; background: var(--sheet); }
.country-pill .cc { font-family: var(--mono); font-size: 11px; background: var(--ink); color: var(--sheet); border-radius: 999px; padding: 2px 7px; }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 64px; padding-block: 32px 48px; background: var(--sheet); font-size: 14px; color: var(--ink-2); }
.site-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.site-foot h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 500; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-foot a { color: var(--ink-2); }

/* buttons */
.btn { font: inherit; font-weight: 700; font-size: 15px; border-radius: 8px; padding: 10px 16px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.primary { background: var(--accent-btn, var(--accent)); border-color: var(--accent-btn, var(--accent)); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); color: var(--accent-ink); }
.btn.small { font-size: 13px; padding: 6px 10px; }
.btn:disabled { opacity: .5; cursor: default; }

/* home */
.hero { padding-block: 44px 24px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero .stamp { display: inline-flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--sea); background: var(--sea-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 14px; }
.hero-sheet { background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow); padding: 22px 24px; font-size: 13px; transform: rotate(-1.2deg); border: 1px solid var(--line-2); }
.hero-sheet .t { font-family: var(--display); font-weight: 800; font-size: 20px; }
.hero-sheet table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.hero-sheet td { padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.hero-sheet td.r { text-align: right; font-family: var(--mono); }
.hero-sheet .tick { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--ok); font-weight: 700; }
.countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ccard { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--ink); display: grid; gap: 6px; }
.ccard:hover { border-color: var(--accent); color: var(--ink); }
.ccard .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ccard .name { font-family: var(--display); font-weight: 800; font-size: 20px; }
.ccard .cc { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ccard .facts { font-size: 14px; color: var(--ink-2); }
.ccard .go { font-weight: 700; color: var(--accent-btn, var(--accent)); font-size: 14px; }
.section { padding-block: 36px 8px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { border-top: 3px solid var(--ink); padding-top: 12px; }
.step b { font-family: var(--mono); font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }

/* generator layout */
.tool-head { padding-block: 28px 16px; }
.tool-head .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); color: var(--ink-2); }
.chip.sea { background: var(--sea-soft); border-color: transparent; color: var(--sea); }
.doc-tabs { display: inline-flex; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; margin-top: 14px; max-width: 100%; overflow-x: auto; }
.doc-tabs button { font: inherit; font-weight: 700; font-size: 15px; border: none; background: transparent; color: var(--ink-2); padding: 7px 16px; border-radius: 8px; cursor: pointer; }
.doc-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.doc-tabs a { font-weight: 700; font-size: 15px; color: var(--ink-2); padding: 7px 16px; border-radius: 8px; text-decoration: none; }
.doc-tabs a:hover { color: var(--ink); background: var(--sheet-2); }
.doc-tabs a[aria-current="page"] { background: var(--ink); color: var(--sheet); }
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
/* Grid items default to a content-based minimum width, so a wide scrollable child (the
   commercial invoice item grid, min-width 940px) would otherwise widen this track past the
   viewport at the mobile breakpoint below, where .tool falls back to a plain 1fr track. min-
   width: 0 lets the item shrink and hands the overflow to .ci-items-wrap's own scrollbar. */
.editor { min-width: 0; }
.form-section + .form-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.form-section h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.full { grid-column: 1 / -1; }
label.f { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
label.f small { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
input.invalid { border-color: var(--bad); background: var(--bad-soft); }
.field-note { font-size: 13px; font-weight: 400; }
.field-note.ok { color: var(--ok); } .field-note.bad { color: var(--bad); }
.toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.items { display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: 1fr 70px 110px 96px 34px; gap: 8px; align-items: end; }
.item .del { border: 1px solid var(--line); background: var(--sheet); border-radius: 8px; height: 38px; cursor: pointer; color: var(--muted); font-size: 18px; }
.item .del:hover { color: var(--bad); border-color: var(--bad); }
.item-head { display: grid; grid-template-columns: 1fr 70px 110px 96px 34px; gap: 8px; font-size: 12px; font-family: var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* work order maker: an extra Parts/Labour column beside the usual description/qty/price/tax/delete */
.wo-item { grid-template-columns: 1fr 90px 70px 110px 96px 34px; }
.wo-item-head { grid-template-columns: 1fr 90px 70px 110px 96px 34px; }
.wo-presets { flex-wrap: wrap; }
/* trade estimate presets (build-trade-invoice-pages): an extra Materials/Labour column on the
   quote engine's items, shown only once a trade preset is chosen, same sizing as the work
   order maker's Parts/Labour column. */
/* Trade fixes (build-trade-fixes-v115): the row was previously `.doc-tabs.trade-presets`, which
   inherited `display: inline-flex` from `.doc-tabs` above. Two adjacent inline-flex boxes flow
   on the same line when there is room, so at wide viewports the trade row sat right beside the
   document tabs instead of below them (the owner's report, 28 Sep 2026 19:56: "not aligned and
   too close to Work Order button"). `.trade-row` below is a block box so it always starts a new
   line, at the same left edge as `.doc-tabs` because both are direct children of the same
   left-aligned container. */
.trade-row { display: block; width: 100%; margin-top: 12px; }
/* Author CSS beats the UA's [hidden]{display:none}, so an unqualified `display: block` above
   would keep the row visible on Receipt (data-for="invoice quote" hides it there via the
   `hidden` attribute) exactly as .trade-only[hidden] already had to guard against. */
.trade-row[hidden] { display: none !important; }
.trade-row-label { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.trade-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trade-chip { font: inherit; font-weight: 700; font-size: 14px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.trade-chip:hover { border-color: var(--ink-2); }
.trade-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.trade-chip .x { font-weight: 800; }
.trade-hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.item.has-type, .item-head.has-type { grid-template-columns: 1fr 90px 70px 110px 96px 34px; }
/* commercial invoice / packing list maker (build-commercial-invoice-maker): per line has more
   fields than any other document (origin, HS code, both weights), so the row scrolls
   horizontally on narrow screens rather than collapsing, to keep every figure legible. */
.ci-items-wrap { overflow-x: auto; }
.ci-item, .ci-item-head { grid-template-columns: 200px 90px 100px 60px 90px 90px 90px 95px 34px; min-width: 940px; }
.ci-item-head { display: grid; gap: 8px; font-size: 12px; font-family: var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ci-presets { flex-wrap: wrap; }
#ci-required-fields ul { margin: 8px 0 0; padding-left: 20px; }
#ci-required-fields li { margin-bottom: 4px; }
#ci-importer-fields { margin-top: 10px; }
/* label.f sets display:grid at a specificity [hidden] alone cannot beat; without this, the
   materials/labour Type field stayed visible (as an empty grid track) on every ordinary quote,
   not only trade estimates, until a preset was chosen (build-trade-invoice-pages QA). */
.trade-only[hidden] { display: none !important; }
/* Trade fixes (build-trade-fixes-v115, steps 6/7): `.trade-only` alone now means only "a trade
   is picked" (e.g. the "Add starter items" button and the "Add <trade> details" tick box, which
   must stay visible so the box CAN be ticked). The materials/labour split, the licence field,
   the item Type column and the payment schedule are trade content, not chrome, so the owner's
   28 Sep 2026 instruction moves them behind this second, narrower gate: trade picked AND its
   details box ticked. Same [hidden]-beats-author-CSS reasoning as `.trade-only[hidden]` above. */
.trade-details-only[hidden] { display: none !important; }
.d-trade-split, .d-payment-schedule { margin-top: 10px; }
.d-payment-schedule h4 { margin: 0 0 5px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.d-trade-details { margin-top: 20px; }
.d-trade-details h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6B7889; }
.d-trade-details table { margin-top: 6px; }
.trade-details-table-wrap { overflow-x: auto; }
.trade-details-row { display: grid; gap: 8px; align-items: end; margin-bottom: 8px; }
.trade-details-row .del { border: 1px solid var(--line); background: var(--sheet); border-radius: 8px; height: 38px; cursor: pointer; color: var(--muted); font-size: 18px; }

/* right column */
.side { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px; }
.check-box { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.check-sum { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.check-sum .badge { font-family: var(--mono); font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--bad-soft); color: var(--bad); }
.checks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 14px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; color: var(--ink-2); }
.checks li .i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.checks li.ok .i { background: var(--ok-soft); color: var(--ok); }
.checks li.bad .i { background: var(--bad-soft); color: var(--bad); }
.checks li.info .i { background: var(--sea-soft); color: var(--sea); }
.checks li.bad { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions .note { font-size: 13px; color: var(--muted); }

/* the document sheet */
.sheet-wrap { overflow-x: auto; }
.doc { background: #FFFFFF; color: #111A27; border-radius: 4px; box-shadow: var(--shadow); padding: 34px 36px 30px; min-width: 520px; font-size: 13px; line-height: 1.45; border: 1px solid #E7ECF1; }
.doc .d-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.doc .d-logo { display: block; max-width: 180px; max-height: 64px; width: auto; height: auto; margin-bottom: 10px; object-fit: contain; }
.doc .d-title { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin: 0; color: #111A27; }
.doc .d-meta { text-align: right; font-size: 12.5px; color: #445266; }
.doc .d-meta b { color: #111A27; font-family: var(--mono); font-weight: 500; }
.doc .d-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.doc .d-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6B7889; margin-bottom: 4px; }
.doc .d-party { white-space: pre-line; }
.doc .d-party strong { font-size: 14px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.doc th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #6B7889; font-weight: 500; border-bottom: 1.5px solid #111A27; padding: 6px 6px 6px 0; }
.doc td { padding: 7px 6px 7px 0; border-bottom: 1px solid #E7ECF1; vertical-align: top; }
.doc th.r, .doc td.r { text-align: right; padding-right: 0; padding-left: 6px; font-variant-numeric: tabular-nums; }
.doc td.r { font-family: var(--mono); font-size: 12.5px; }
.doc .d-totals { margin-left: auto; width: min(300px, 100%); margin-top: 12px; }
.doc .d-totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.doc .d-totals div span:last-child { font-family: var(--mono); }
.doc .d-totals .grand { border-top: 1.5px solid #111A27; margin-top: 4px; padding-top: 8px; font-weight: 800; font-size: 15px; }
.doc .d-statement { margin-top: 14px; font-weight: 700; }
.doc .d-notes { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 12.5px; color: #445266; white-space: pre-line; }
.doc .d-foot { margin-top: 24px; padding-top: 10px; border-top: 1px solid #E7ECF1; font-size: 11px; color: #6B7889; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.doc .placeholder { color: #B3261E; background: #FBE4E2; border-radius: 3px; padding: 0 4px; }
.mobile-tabs { display: none; }

/* guide & prose */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 32px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); margin: 14px 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table-wrap th { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--sheet-2); }
.table-wrap tr:last-child td { border-bottom: none; }
.callout { border-left: 3px solid var(--sea); background: var(--sea-soft); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; }
.callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.sources { font-size: 14px; }
.sources li { word-break: break-word; }
.byline { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
.cta-box { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 24px 0; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 12px; }
.faq summary { font-weight: 700; cursor: pointer; font-family: var(--display); }
.faq details p { margin: 8px 0 0; color: var(--ink-2); }
/* trust */
.trust-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--ink-2); list-style: none; padding: 0; }
.trust-strip li { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.trust-grid > * { grid-column: span 2; }
.trust-grid > :nth-child(n+4) { grid-column: span 3; }
.trust-item { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.trust-item h3 { font-size: 17px; }
.trust-item p { margin: 0; color: var(--ink-2); font-size: 15px; }
.trust-item .big { font-family: var(--mono); font-size: 13px; color: var(--sea); display: block; margin-bottom: 6px; }
.dl-trust { font-size: 13px; color: var(--muted); width: 100%; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } .trust-grid > *, .trust-grid > :nth-child(n+4) { grid-column: auto; } }
/* ad slots: invisible until an ad network is live (html.ads-live) or the preview toggle is on */
.ad-slot { display: none; }
html.ads-live .ad-slot, body.show-ads .ad-slot { display: grid; place-items: center; gap: 4px; margin: 24px auto; width: 100%; max-width: var(--ad-w, 728px); min-height: var(--ad-h, 90px); background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
.ad-slot::before { content: "Advertisement"; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body.show-ads .ad-slot { border: 2px dashed var(--accent); background: var(--accent-soft); color: var(--ink); }
body.show-ads .ad-slot b { font-family: var(--display); font-size: 14px; }
.ad-toggle { font: inherit; font-size: 12px; font-weight: 700; margin-left: 10px; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.preview-note { background: var(--warn-soft); color: var(--warn); font-size: 13px; padding: 6px 20px; text-align: center; }

@media (max-width: 980px) {
  .tool { grid-template-columns: 1fr; }
  .side { position: static; }
  .mobile-tabs { display: inline-flex; margin: 0 0 12px; }
  .tool[data-view="edit"] .side { display: none; }
  .tool[data-view="preview"] .editor { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-sheet { transform: none; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .grid2 { grid-template-columns: 1fr; }
  .item, .item-head { grid-template-columns: 1fr 1fr; }
  .item-head { display: none; }
  .item .desc { grid-column: 1 / -1; }
  /* `.item.has-type`/`.item-head.has-type` (two classes, so a higher specificity than the
     single-class `.item` rule two lines up) kept the six-column desktop grid at 390px even
     after this rule -- invisible before build-trade-fixes-v115 since the Type column needed a
     trade picked AND (now) its details box ticked to ever show, so no QA run had reached this
     state at 390px. Found with the details box ticked on at 390px (t_v115_trade_fixes.py). */
  .item.has-type, .item-head.has-type { grid-template-columns: 1fr 1fr; }
  /* the commercial invoice item row sets its own min-width for the desktop horizontal-scroll
     layout (.ci-items-wrap); that min-width survives the grid-template-columns collapse above
     unless it is reset here too, which otherwise forces the row wide and the whole page to
     scroll sideways (build-commercial-invoice-maker QA, 28 Sep 2026). */
  .ci-item, .ci-item-head { min-width: 0; }
  .steps { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr; }
  .doc { padding: 22px 20px; }
  .nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .site-head, .site-foot, .editor, .check-box, .actions, .tool-head, .mobile-tabs, .below, /* trust */
.trust-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--ink-2); list-style: none; padding: 0; }
.trust-strip li { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.trust-grid > * { grid-column: span 2; }
.trust-grid > :nth-child(n+4) { grid-column: span 3; }
.trust-item { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.trust-item h3 { font-size: 17px; }
.trust-item p { margin: 0; color: var(--ink-2); font-size: 15px; }
.trust-item .big { font-family: var(--mono); font-size: 13px; color: var(--sea); display: block; margin-bottom: 6px; }
.dl-trust { font-size: 13px; color: var(--muted); width: 100%; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } .trust-grid > *, .trust-grid > :nth-child(n+4) { grid-column: auto; } }
/* ad slots: invisible until an ad network is live (html.ads-live) or the preview toggle is on */
.ad-slot { display: none; }
html.ads-live .ad-slot, body.show-ads .ad-slot { display: grid; place-items: center; gap: 4px; margin: 24px auto; width: 100%; max-width: var(--ad-w, 728px); min-height: var(--ad-h, 90px); background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
.ad-slot::before { content: "Advertisement"; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body.show-ads .ad-slot { border: 2px dashed var(--accent); background: var(--accent-soft); color: var(--ink); }
body.show-ads .ad-slot b { font-family: var(--display); font-size: 14px; }
.ad-toggle { font: inherit; font-size: 12px; font-weight: 700; margin-left: 10px; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.preview-note { display: none !important; }
  body { background: #fff; }
  .tool { display: block; }
  .doc { box-shadow: none; border: none; padding: 0; min-width: 0; }
}

/* v1.3 — quote validity picker and the owner's own terms and conditions */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
details.tc { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-2); color: var(--ink); }
details.tc > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 14px; list-style: none; color: var(--ink); }
details.tc > summary::-webkit-details-marker { display: none; }
details.tc > summary::before { content: '+'; display: inline-block; width: 1em; font-weight: 700; color: var(--muted); }
details.tc[open] > summary::before { content: '\2013'; }
details.tc > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
details.tc > label { display: block; padding: 0 14px 14px; }
details.tc textarea { width: 100%; }
.doc .d-validfor { margin-top: 14px; font-size: 12.5px; color: #445266; }
.doc .d-tc { margin-top: 18px; padding-top: 10px; border-top: 1px solid #E7ECF1; }
.doc .d-tc h4 { margin: 0 0 5px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #6B7889; }
.doc .d-tc > div { font-size: 9.5px; line-height: 1.45; color: #6B7889; white-space: pre-line; }
@media (max-width: 720px) { details.tc > summary { padding: 13px 14px; } }

/* commercial invoice maker: below 640px it falls back to the same two-column collapse every
   other item grid uses (.item, .item-head in the media block above) rather than keeping its
   wide fixed columns — a horizontally scrollable row at this width forced the whole page to
   scroll sideways in Chromium (the row's full, unclipped box width reached documentElement's
   scrollWidth even though .ci-items-wrap visually clipped it), which the QA mobile-fit check
   caught on every page (build-commercial-invoice-maker QA, 28 Sep 2026). */

/* Snow removal and lawn care agreement maker (build-snow-lawn-agreement-maker): rows for the
   snowfall bands and the visit log, and the agreement preview's terms table and signature lines. */
.ag-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.ag-row .f { margin: 0; min-width: 0; }
.ag-amt { font-weight: 700; padding-bottom: 10px; text-align: right; }
.ag-h { margin: 16px 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6B7889; }
.doc .ag-terms th { text-align: left; width: 32%; color: #445266; font-weight: 600; vertical-align: top; }
.doc .ag-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; font-size: 12px; }
.doc .ag-line { border-bottom: 1px solid #111A27; height: 34px; margin-bottom: 6px; }
.doc .ag-note { margin-top: 18px; font-size: 11px; color: #6B7889; }
@media (max-width: 560px) { .ag-row { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; } }