/* HostNowStore v1.1: "parcel counter" design system (v1.1 home: intake label, annotated sheet, ledger, ruler, receipt; light footer). Own identity (SPEC 3): kraft paper, ink green, parcel-tape amber,
   postage red; Young Serif display + Golos Text body. Not derived from any sibling site's CSS. */
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("fonts/golos-text-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --paper: #f3ecdf;
  --paper-2: #eadfcb;
  --card: #fffdf8;
  --ink: #173b32;
  --ink-2: #44605a;
  --ink-3: #6d7f78;
  --line: #d9cbb2;
  --line-2: #c6b393;
  --tape: #e8a33a;
  --tape-2: #f6d9a3;
  --stamp: #b83a26;
  --stamp-soft: #f6dcd4;
  --mint: #dfeadf;
  --mint-ink: #245c41;
  --night: #102a24;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 0 rgba(23, 59, 50, .06), 0 12px 32px -18px rgba(23, 59, 50, .35);
  --gut: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); font-feature-settings: "ss01", "tnum" 0; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--tape); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--stamp); }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; border-radius: 4px; }
code { font: 500 .92em/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
.narrow > * { max-width: 860px; }

/* ---------- type ---------- */
.display { font: 400 clamp(2.2rem, 1.2rem + 3.6vw, 4.1rem)/1.04 var(--serif); letter-spacing: -.01em; margin: .2em 0 .35em; text-wrap: balance; }
.display em { font-style: normal; color: var(--stamp); background: linear-gradient(transparent 62%, var(--tape-2) 62%, var(--tape-2) 92%, transparent 92%); padding: 0 .06em; }
.display--md { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); }
.section-title { font: 400 clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem)/1.12 var(--serif); margin: 0 0 .6em; text-wrap: balance; }
.section-title--light { color: #fff; }
.h3 { font: 400 1.45rem/1.2 var(--serif); margin: 0 0 .7em; }
.lede { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--ink-2); max-width: 44rem; margin: 0 0 1.2em; }
.kicker { font: 650 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--stamp); margin: 0; display: inline-flex; align-items: center; gap: .55em; }
.kicker::before { content: ""; width: 22px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--tape) 0 6px, transparent 6px 9px); }
.kicker--light { color: var(--tape); }
.hint { font-size: .9rem; color: var(--ink-3); font-weight: 400; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.35em; border-radius: 3px; border: 2px solid var(--ink); font: 650 1rem/1.1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease, color .12s ease; }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--tape); }
.btn--solid:active { box-shadow: 2px 2px 0 var(--tape); transform: translate(2px, 2px); }
.btn--solid:hover { background: var(--night); color: var(--tape-2); }
.btn--ghost { background: #fff; color: var(--ink); }
.btn--ghost:hover { background: var(--tape-2); color: var(--ink); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-3); text-decoration: underline; padding-inline: .4em; }
.btn--danger { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.btn--danger:hover { background: #8f2b1b; color: #fff; }
.btn--small { min-height: 38px; padding: .45em 1em; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0 1em; }
.link-arrow { font-weight: 650; text-decoration: none; border-bottom: 2px solid var(--tape); }
.link-arrow::after { content: " \2192"; }

/* ---------- header ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(243, 236, 223, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: repeating-linear-gradient(90deg, var(--tape) 0 28px, transparent 28px 34px); opacity: .65; }
.bar__in { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__box { width: 34px; height: 34px; flex: none; }
.brand__name { font: 400 1.42rem/1 var(--serif); letter-spacing: -.01em; }
.brand__name span, .colophon__name span { color: var(--stamp); }
.navlinks { display: flex; gap: 4px; }
.navlinks a { text-decoration: none; font-weight: 550; font-size: .97rem; padding: .55em .85em; border-radius: 999px; color: var(--ink-2); }
.navlinks a:hover { background: var(--card); color: var(--ink); }
.navlinks a[aria-current="page"] { background: var(--ink); color: #fff; }
.drawer { display: none; position: relative; }
.drawer summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 650; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer__icon { width: 16px; height: 2px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }
.drawer nav { position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 300px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; display: grid; }
.drawer nav a { padding: 12px 14px; border-radius: var(--r-sm); text-decoration: none; font-weight: 550; }
.drawer nav a[aria-current="page"] { background: var(--paper); color: var(--stamp); }

/* ---------- home: counter (hero is a working intake label, one column) ---------- */
.counter { padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); background:
  linear-gradient(90deg, rgba(198, 179, 147, .18) 1px, transparent 1px) 0 0 / 48px 48px,
  var(--paper); }
.counter__h { max-width: 15ch; font-size: clamp(2.4rem, 1rem + 5.4vw, 5.6rem); line-height: 1; margin-bottom: .45em; }
.label { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--tape); max-width: 1080px; }
.label__top { display: grid; grid-template-columns: 1fr 1fr auto; border-bottom: 3px solid var(--ink); font: 650 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.label__top span { padding: 12px 18px; border-right: 1px solid var(--line-2); }
.label__top span:last-child { border-right: 0; }
.label__code { background: var(--ink); color: var(--tape-2); }
.label__line { margin: 0; padding: 26px 22px 18px; font: 400 clamp(1.25rem, .95rem + 1.1vw, 1.9rem)/2.1 var(--serif); color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; }
.label__line input, .label__line select { font: inherit; font-size: .9em; line-height: 1.2; color: var(--stamp); background: transparent; border: 0; border-bottom: 3px dashed var(--line-2); border-radius: 0; padding: 0 .1em 2px; min-height: 44px; max-width: 100%; }
.label__line select { width: auto; }
.label__line input { width: 14ch; }
.label__line input.label__num { width: 2.4ch; text-align: center; }
.label__line select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 1.1em; background: linear-gradient(45deg, transparent 50%, var(--stamp) 50%) right .2em top 55% / 7px 7px no-repeat, linear-gradient(-45deg, transparent 50%, var(--stamp) 50%) right -.13em top 55% / 7px 7px no-repeat; }
.label__line input:focus, .label__line select:focus { outline: none; border-bottom-color: var(--tape); background-color: #fff8ea; }
.label__line input::placeholder { color: var(--ink-3); opacity: .8; }
.label__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 16px 22px 20px; border-top: 2px dashed var(--line); }
.label__note { margin: 0; color: var(--ink-3); font-size: .95rem; max-width: 30rem; flex: 1 1 16rem; }
.label__bars { width: 150px; height: 40px; margin-left: auto; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 13px, transparent 13px 14px, var(--ink) 14px 15px, transparent 15px 19px); }
.counter__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 30px; margin-top: 30px; max-width: 1080px; }
.counter__price { margin: 0; color: var(--ink-2); }
.counter__price strong { color: var(--stamp); }

/* ---------- home: cutting mat with an annotated sheet ---------- */
.mat { background: var(--paper-2); padding: clamp(52px, 7vw, 100px) 0; border-block: 1px solid var(--line-2);
  background-image: linear-gradient(rgba(23, 59, 50, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 59, 50, .06) 1px, transparent 1px); background-size: 24px 24px; }
.mat__head { text-align: center; max-width: 46rem; margin: 0 auto 40px; }
.mat__head p { color: var(--ink-2); margin: 0; }
.mat__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sheet { background: #fff; padding: 36px 36px 30px 44px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 22px 40px -26px rgba(16, 42, 36, .45); position: relative; border-top: 8px solid var(--ink); }
.sheet__title { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 14px; }
.sheet__h { font-weight: 700; margin: 18px 0 6px; }
.sheet__p { margin: 0 0 10px; color: var(--ink-2); position: relative; }
.sheet__more { margin: 18px 0 0; color: var(--ink-3); font-style: italic; font-size: .95rem; }
.pin { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tape); color: var(--ink); font: 700 .8rem/1 var(--sans); flex: none; }
.pin--in { position: absolute; left: -34px; top: 1px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; font-size: .97rem; color: var(--ink-2); }
.notes li { position: relative; padding-left: 36px; }
.notes li > .pin { position: absolute; left: 0; top: 0; }
.notes strong { display: block; color: var(--ink); font-weight: 650; }
.notes--left { padding-top: 70px; text-align: left; }
.notes--right { padding-top: 120px; }
.notes--right li { border-left: 3px solid var(--line-2); padding-left: 14px; }
.flag { display: table; margin-bottom: 6px; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; background: var(--tape-2); color: #6a4310; }
.flag--fix { background: var(--stamp); color: #fff; }

/* ---------- home: manifest ledger ---------- */
.manifest { padding: clamp(52px, 7vw, 96px) 0 clamp(30px, 4vw, 50px); }
.ledger { width: 100%; border-collapse: collapse; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ledger thead th { font: 650 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 14px 16px 12px 0; border-bottom: 1px solid var(--ink); }
.ledger tbody th, .ledger td { text-align: left; vertical-align: top; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.ledger tbody tr:last-child > * { border-bottom: 0; }
.ledger tbody th { font: 400 1.35rem/1.2 var(--serif); width: 20%; }
.ledger tbody th a { text-decoration: none; color: var(--ink); }
.ledger tbody th a:hover { color: var(--stamp); }
.ledger td { width: 32%; }
.ledger__cost { width: 12% !important; text-align: right !important; padding-right: 0 !important; font: 400 1.3rem/1.2 var(--serif); color: var(--mint-ink) !important; white-space: nowrap; }
.ledger__cost small { display: block; font: 650 .78rem/1.3 var(--sans); color: var(--stamp); white-space: normal; margin-top: 4px; }
.ledger tr.is-pass { background: linear-gradient(90deg, transparent, rgba(246, 217, 163, .55)); }
.ledger tr.is-pass .ledger__cost { color: var(--ink) !important; }

/* ---------- home: ruler (proportional horizontal timeline) ---------- */
.ruler { padding: clamp(40px, 5vw, 70px) 0 clamp(56px, 7vw, 96px); }
.ruler__head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 48px; align-items: start; margin-bottom: 40px; }
.ruler__head p { margin: .3em 0 0; color: var(--ink-2); }
.track { list-style: none; margin: 0 0 30px; padding: 0; position: relative; height: 300px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 46)) 0 50% / calc(100% - 2px) 14px no-repeat; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; background: var(--ink); }
.track li { position: absolute; width: 200px; transform: translateX(-12px); }
/* worked example: Oct 9 = 0, ship-by Oct 14 = day 5, new date Oct 28 = day 19, 30-day line Nov 13 = day 35 (= 84%), refund stop at the end */
.track li:nth-child(1) { left: 0; }
.track li:nth-child(2) { left: 12%; }
.track li:nth-child(3) { left: 45.6%; }
.track li:nth-child(4) { left: 84%; }
.track li:nth-child(5) { left: 100%; }
.track li:nth-child(odd) { bottom: calc(50% + 18px); }
.track li:nth-child(even) { top: calc(50% + 18px); }
.track li::before { content: ""; position: absolute; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.track li:nth-child(odd)::before { bottom: -27px; }
.track li:nth-child(even)::before { top: -27px; }
.track li:last-child { transform: translateX(calc(-100% + 12px)); text-align: right; }
.track li:last-child::before { left: auto; right: 4px; }
.track li:nth-last-child(2) { transform: translateX(-50%); }
.track li:nth-last-child(2)::before { left: calc(50% - 8px); }
.track li.is-key::before { background: var(--tape); }
.track li.is-stamp::before { background: var(--stamp); border-color: var(--stamp); }
.track__date { display: block; font: 400 1.15rem/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }
.track__what { display: block; font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
.track__what strong { color: var(--stamp); }
.ruler__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }

/* ---------- home: till receipt ---------- */
.till { padding: clamp(52px, 7vw, 96px) 0; background: var(--mint); border-block: 1px solid #c4d6c6; }
.till__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 30px 60px; align-items: center; }
.till .section-title { color: var(--ink); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); max-width: 12ch; }
.receipt { --edge: radial-gradient(circle at 8px 0, transparent 7px, #fffdf8 7.5px); background: #fffdf8; color: var(--ink); padding: 34px 30px 30px; position: relative; transform: rotate(1deg); font-variant-numeric: tabular-nums; }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: linear-gradient(-45deg, transparent 6px, #fffdf8 6px) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 6px, #fffdf8 6px) 0 0 / 14px 10px repeat-x; }
.receipt::before { top: -10px; transform: scaleY(-1); }
.receipt::after { bottom: -10px; }
.receipt__shop { text-align: center; font: 400 1.4rem/1 var(--serif); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px dashed var(--line-2); }
.receipt__rows { margin: 0 0 14px; display: grid; gap: 9px; }
.receipt__rows div { display: flex; align-items: baseline; gap: 8px; }
.receipt__rows dt { flex: 0 1 auto; }
.receipt__rows dd { margin: 0 0 0 auto; font-weight: 650; }
.receipt__rows div:not(.receipt__inc)::after { content: ""; order: 1; flex: 1 1 20px; border-bottom: 2px dotted var(--line-2); transform: translateY(-4px); }
.receipt__rows dd { order: 2; }
.receipt__rows .is-rule { border-top: 2px dashed var(--line-2); padding-top: 11px; margin-top: 4px; }
.receipt__inc dt { font-size: .88rem; color: var(--ink-3); }
.receipt__total { display: flex; justify-content: space-between; font: 400 1.35rem/1.2 var(--serif); color: var(--stamp); border-top: 3px double var(--ink); padding-top: 12px; margin: 0 0 8px; }
.receipt__fine { font-size: .88rem; color: var(--ink-2); margin: 0 0 14px; }

/* ---------- home: fine print strip ---------- */
.fine { padding: clamp(44px, 6vw, 72px) 0; }
.fine .kicker { margin-bottom: 22px; }
.fine__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.fine__list li { padding: 18px 22px 4px 0; margin-right: 22px; color: var(--ink-2); font-size: .95rem; border-right: 1px solid var(--line); }
.fine__list li:last-child { border-right: 0; margin-right: 0; }
.fine__list strong { display: block; color: var(--ink); font: 400 1.12rem/1.25 var(--serif); margin-bottom: 6px; }

/* ---------- inner pages ---------- */
.pagehead { padding: clamp(36px, 5vw, 70px) 0 clamp(20px, 3vw, 34px); }
.pagehead--tight { padding-bottom: 12px; }
.pricetag { display: inline-block; background: var(--card); border: 2px dashed var(--tape); border-radius: 999px; padding: .5em 1.1em; font-weight: 550; }
.pricetag strong { color: var(--stamp); }
.keyline { display: inline-block; background: var(--card); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; word-break: break-all; color: var(--ink); }
.workbench { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; padding-bottom: 80px; }
.workbench__side { position: sticky; top: 96px; display: grid; gap: 18px; }
.steps { display: grid; gap: 4px; border-left: 2px solid var(--line); padding-left: 4px; }
.steps a { text-decoration: none; padding: 9px 12px; border-radius: var(--r-sm); font-weight: 550; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.steps a:hover { background: var(--card); color: var(--ink); }
.steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font: 400 .9rem/1 var(--serif); color: var(--ink); }
.sidecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; font-size: .95rem; }
.sidecard p { margin: 0 0 10px; color: var(--ink-2); }
.sidecard__h { font: 400 1.15rem/1.2 var(--serif) !important; color: var(--ink) !important; }
.sidecard__price { font-weight: 550; }
.sidecard__price strong { color: var(--stamp); }
.sidecard--rule { background: var(--ink); border-color: var(--ink); color: #e6efe9; }
.sidecard--rule .sidecard__h { color: #fff !important; }
.sidecard--rule .link-arrow { color: #fff; }
.mini { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 8px; }

/* ---------- forms ---------- */
.qform { display: grid; gap: 22px; }
.qset { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 22px 24px 8px; margin: 0; min-width: 0; }
.qset legend { font: 400 1.3rem/1 var(--serif); padding: 0 10px; margin-left: -10px; display: flex; align-items: center; gap: 10px; }
.qset__no { width: 30px; height: 30px; border-radius: 8px; background: var(--tape); color: var(--ink); display: grid; place-items: center; font: 400 1rem/1 var(--serif); }
.field { margin: 0 0 18px; min-width: 0; }
.field label, .field__label { display: block; font-weight: 650; margin-bottom: 7px; }
.field label .hint { display: block; font-weight: 400; margin-top: 2px; }
.field input:not([type=radio]):not([type=checkbox]), .field select, select { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: 400 1rem/1.3 var(--sans); }
.field input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px rgba(232, 163, 58, .35); }
.field--short input { max-width: 220px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex !important; align-items: center; margin: 0 !important; font-weight: 500 !important; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-block; padding: 10px 15px; border: 2px solid var(--line-2); border-radius: 999px; background: #fff; line-height: 1.25; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--tape); outline-offset: 2px; }
.choice--wide span { border-radius: var(--r-sm); }
.choice--wide input:checked + span::before { content: "\2713  "; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.row3 .field--short input { max-width: none; }
.qform__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.qform__go .hint { margin: 0; max-width: 32rem; }
.qform--late, .qform--start { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.alert { background: var(--stamp-soft); border: 2px solid var(--stamp); border-radius: var(--r); padding: 16px 20px; margin-bottom: 20px; }
.alert__h { font-weight: 700; margin: 0 0 6px; color: var(--stamp); }
.alert ul { margin: 0; padding-left: 1.2em; }

/* ---------- results ---------- */
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 80px; }
.checklist { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-top: 1px dashed var(--line); }
.check:first-child { border-top: 0; }
.check__tag { font: 700 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; text-align: center; }
.check--fix .check__tag { background: var(--stamp); color: #fff; }
.check--consider .check__tag { background: var(--tape-2); color: #6a4310; }
.check--good .check__tag { background: var(--mint); color: var(--mint-ink); }
.doc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 22px; align-items: start; }
.doc__paper { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 4vw, 42px); box-shadow: var(--shadow); font-family: Georgia, "Times New Roman", serif; font-size: 1.04rem; position: relative; }
.doc__paper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--tape) 0 22px, var(--ink) 22px 30px); border-radius: 6px 6px 0 0; }
.doc__paper h2 { font: 400 1.6rem/1.2 var(--serif); margin: .2em 0 .6em; }
.doc__paper h3 { font: 700 1.02rem/1.3 var(--sans); margin: 1.3em 0 .35em; }
.doc__paper p { margin: 0 0 .7em; }
.doc__tools { position: sticky; top: 96px; display: grid; gap: 10px; }
.doc__tools-h { font-weight: 700; margin: 0; }
.copybox { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
.copybox summary { cursor: pointer; padding: 12px 14px; font-weight: 600; }
.copybox textarea, .letter textarea { display: block; width: calc(100% - 24px); margin: 0 12px 10px; border: 1px solid var(--line-2); border-radius: 6px; padding: 10px; font: 400 .86rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--paper); resize: vertical; }
.copybox .btn { margin: 0 12px 12px; }
.download { display: grid; gap: 8px; justify-items: start; }

/* ---------- late plan ---------- */
.passline { margin: 0; color: var(--ink-2); }
.passline__tag { display: inline-block; font-weight: 650; color: var(--ink); background: var(--tape-2); border: 1px dashed var(--tape); border-radius: 4px; padding: 3px 10px; margin-right: 6px; }
.passline__tag strong { color: var(--stamp); }
.plan { display: grid; gap: 20px; margin-bottom: 30px; }
.plan__status { border-radius: var(--r); padding: 22px 24px; background: var(--card); border: 2px solid var(--line); }
.plan__status p { margin: 0 0 6px; }
.plan__status--before { border-color: var(--mint-ink); }
.plan__status--due { border-color: var(--tape); background: #fff6e6; }
.plan__status--past { border-color: var(--stamp); background: var(--stamp-soft); }
.plan__big { font: 400 1.6rem/1.2 var(--serif); }
.datelist { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.datelist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px dashed var(--line); }
.datelist li:first-child { border-top: 0; }
.datelist__v { font: 400 1.08rem/1.25 var(--serif); text-align: right; white-space: nowrap; }
.datelist li.is-key { background: #fff6e6; }
.datelist li.is-key .datelist__v { color: #8a5410; }
.datelist li.is-stamp .datelist__v { color: var(--stamp); }
.plan__case { margin: 0; padding: 16px 20px; border-left: 4px solid var(--tape); background: var(--card); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.notices { display: grid; gap: 18px; padding-bottom: 80px; }
.letter { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 8px 14px; box-shadow: var(--shadow); }
.letter__h { font: 400 1.2rem/1.25 var(--serif); margin: 0 12px 6px; }
.letter__subj { margin: 0 12px 10px; font-weight: 600; }
.letter__subj span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.letter .btn { margin-left: 12px; }
.lockcard { background: var(--card); border: 2px dashed var(--tape); border-radius: var(--r); padding: 20px; }

/* ---------- shelf ---------- */
.shelf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-bottom: 80px; }
.shelf__block { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; min-width: 0; }
.shelf__block--danger { border-color: var(--stamp-soft); }
.shelf__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.shelf__head .h3 { margin: 0; }
.empty { color: var(--ink-3); margin: 0 0 10px; }
.versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.version { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; background: var(--paper); }
.version__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.version__no { font: 400 1.1rem/1.2 var(--serif); }
.version time { color: var(--ink-3); font-size: .9rem; }
.version__note { margin: 6px 0 0; font-style: italic; }
.version__ch { margin: 6px 0 0; color: var(--ink-3); font-size: .95rem; }
.changes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; }
.changes__k { font-weight: 650; }
.changes del { color: var(--stamp); text-decoration-thickness: 2px; }
.changes ins { text-decoration: none; background: var(--mint); color: var(--mint-ink); padding: 0 4px; border-radius: 3px; }
.tablewrap { overflow-x: auto; margin: 0 -6px 16px; }
.orders { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.orders th, .orders td { text-align: left; padding: 10px 6px; border-bottom: 1px dashed var(--line); vertical-align: middle; }
.orders thead th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.orders tr.is-late th a { color: var(--stamp); }
.orders select { min-height: 38px; padding: 4px 8px; width: auto; }
.inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.addorder summary { cursor: pointer; font-weight: 650; padding: 10px 0; }
.addorder .qform--late { padding: 0; border: 0; background: none; }

/* ---------- pricing ---------- */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: 40px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.tier--pass { border: 2px solid var(--ink); position: relative; }
.tier__name { font: 400 1.5rem/1.2 var(--serif); margin: 0; }
.tier__price { font: 400 3rem/1 var(--serif); margin: 14px 0 4px; }
.tier__price span { font: 500 1rem/1 var(--sans); color: var(--ink-2); }
.tier__alt { margin: 0 0 18px; color: var(--ink-2); }
.tier__preview { display: inline-block; font-weight: 700; color: var(--stamp); border: 2px solid var(--stamp); border-radius: 6px; padding: 4px 10px; transform: rotate(-2deg); margin: 0 12px 12px 0; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }

/* ---------- prose ---------- */
.prose { max-width: 820px; padding-bottom: 80px; }
.prose--narrow { padding-top: 10px; }
.prose h2 { font: 400 1.45rem/1.25 var(--serif); margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.2em; display: grid; gap: 8px; }
.msgbox { padding: clamp(48px, 8vw, 110px) var(--gut); max-width: 820px; }

/* ---------- footer (light kraft, tape edge) ---------- */
.colophon { background: var(--paper-2); color: var(--ink-2); padding: 0 0 26px; font-size: .95rem; border-top: 1px solid var(--line-2); position: relative; }
.colophon::before { content: ""; display: block; height: 12px; background: repeating-linear-gradient(-45deg, var(--tape) 0 14px, var(--tape-2) 14px 28px); margin-bottom: 44px; }
.colophon a { color: var(--ink); }
.colophon__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); gap: 36px; }
.colophon__name { font: 400 1.6rem/1 var(--serif); color: var(--ink); margin: 0 0 12px; }
.colophon__name span { color: var(--stamp); }
.colophon h2 { font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--stamp); margin: 6px 0 14px; }
.colophon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.colophon__fine { color: var(--ink-3); font-size: .88rem; }
.colophon__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 2px solid var(--ink); margin-top: 34px; padding-top: 16px; color: var(--ink-3); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .navlinks { display: none; }
  .drawer { display: block; }
  .doc { grid-template-columns: 1fr; }
  .doc__tools { position: static; }
  .workbench { grid-template-columns: 1fr; }
  .workbench__side { position: static; order: 2; }
  .workbench__side .steps { display: none; }
}
@media (max-width: 860px) {
  .ruler__head, .till__wrap { grid-template-columns: 1fr; }
  .mat__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .notes--left, .notes--right { padding-top: 0; }
  .notes--left { order: 2; }
  .notes--right { order: 3; }
  .sheet { order: 1; }
  .track { height: auto; background: none; padding-left: 34px; display: grid; gap: 18px; }
  .track::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; margin: 0; }
  .track li, .track li:nth-child(odd), .track li:nth-child(even), .track li:last-child, .track li:nth-last-child(2) { position: relative; left: auto; top: auto; bottom: auto; width: auto; transform: none; text-align: left; }
  .track li::before, .track li:nth-child(odd)::before, .track li:nth-child(even)::before, .track li:last-child::before, .track li:nth-last-child(2)::before { left: -32px; right: auto; top: 3px; bottom: auto; }
  .fine__list { grid-template-columns: 1fr 1fr; }
  .fine__list li:nth-child(2) { border-right: 0; margin-right: 0; }
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto !important; }
  .ledger tbody tr { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
  .ledger tbody tr:last-child { border-bottom: 0; }
  .ledger tbody th, .ledger td { border: 0; padding: 4px 0; }
  .ledger td[data-k]::before { content: attr(data-k) ": "; font-weight: 650; color: var(--ink); }
  .ledger__cost { text-align: left !important; }
  .ledger__cost small { display: inline; margin-left: 8px; }
  .tiers { grid-template-columns: 1fr; }
  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__lead { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .qset { padding: 18px 16px 4px; }
  .label__top { grid-template-columns: 1fr 1fr; }
  .label__code { display: none; }
  .label__line { padding: 18px 16px 12px; }
  .label__go { padding: 14px 16px 18px; }
  .label__bars { display: none; }
  .label { box-shadow: 5px 5px 0 var(--tape); }
  .sheet { padding: 28px 18px 24px 40px; }
  .pin--in { left: -32px; }
  .fine__list { grid-template-columns: 1fr; }
  .fine__list li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .receipt { transform: none; padding: 30px 18px 24px; }
  .check { grid-template-columns: 1fr; gap: 6px; }
  .check__tag { justify-self: start; }
  .orders { min-width: 0; }
  .orders thead { display: none; }
  .orders, .orders tbody, .orders tr, .orders th, .orders td { display: block; }
  .orders tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; background: var(--paper); }
  .orders th, .orders td { border: 0; padding: 4px 0; }
  .orders td[data-k]::before { content: attr(data-k) ": "; color: var(--ink-3); font-size: .85rem; }
  .datelist li { grid-template-columns: 1fr; gap: 2px; }
  .datelist__v { text-align: left; white-space: normal; }
  .brand__name { font-size: 1.22rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
@media print {
  .bar, .colophon, .doc__tools, .download, .checklist, .actions, .btn { display: none !important; }
  body { background: #fff; }
  .doc { display: block; }
  .doc__paper { box-shadow: none; border: 0; }
}

/* ---------- v1.2.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the colophon, on the public pages only (the controllers opt in). The
   label and the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill, the label,
   the reserved space and the space below go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones
   (300x250). Every ad page ends with its own bottom padding on the paper, and the colophon has no top margin, so the
   space below the slot sits on the <ins>. display stays in this file and is never !important: tag.js hides a slot with
   style.display='none'. */
.ae-slot { padding: 0 var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto clamp(40px, 6vw, 56px); text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 650 11px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; } }
@media print { .ae-slot { display: none; } }