/* Packing Pending site: brand colors and type from brand/README.md. Fonts are self-hosted. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }

:root {
  --red: #B3242B;
  --red-deep: #8F1C22;
  --charcoal: #221F1E;
  --bone: #F4F0EA;
  --white: #FFFFFF;
  --tint: #DDD3C6;
  --muted: #5A534F;
  --field: #8C8279;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone); color: var(--charcoal); font: 500 1.0625rem/1.55 var(--sans); }
img { max-width: 100%; }
a { color: var(--red); text-underline-offset: .18em; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
h1, h2 { margin: 0; font-family: var(--condensed); font-weight: 800; line-height: 1.02; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 3.6vw + 1.3rem, 3.75rem); }
h2 { font-size: clamp(1.85rem, 1.4vw + 1.35rem, 2.5rem); }
h3 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
.flow > * + * { margin-top: .75rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.wrap { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 2rem; } }
.block { margin-top: clamp(3.25rem, 6vw, 5.5rem); }
.prose { max-width: 40rem; }

/* Header and footer */
.top { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.top a { display: inline-block; }
.top img { display: block; height: 52px; width: auto; }
.foot { margin-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: 3rem; color: var(--muted); font-size: .9375rem; }
.foot > .flow { padding-top: 1.75rem; border-top: 1px solid var(--tint); }
.foot .flow > * + * { margin-top: .35rem; }

/* Intro */
.intro { margin-top: clamp(1.5rem, 4vw, 3rem); }
.intro h1 { max-width: 22ch; }
.lead { margin-top: 1rem; max-width: 38rem; font-size: 1.1875rem; }

/* Postcards on the page */
.cards { display: grid; gap: 1.75rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 64rem) { .cards { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
.cards-large .cards { grid-template-columns: minmax(0, 1fr); max-width: 56rem; gap: 2.5rem; }
.card-figure { margin: 0; min-width: 0; }
.card-figure figcaption { margin-top: .7rem; font-size: .9375rem; color: var(--muted); }
.cards-note { margin-top: 1rem; font-size: .9375rem; color: var(--muted); max-width: 44rem; }

/* Area numbers */
.statement { margin-top: 1rem; max-width: 46rem; font: 600 clamp(1.45rem, 1.3vw + 1.05rem, 2.05rem)/1.22 var(--condensed); letter-spacing: .005em; }
.note { margin-top: 1rem; max-width: 42rem; font-size: .9375rem; color: var(--muted); }

/* Plan: a yard sign with a rider, like the logo's PENDING plate */
.plan-grid { display: grid; gap: 2rem; margin-top: 1.5rem; align-items: start; }
@media (min-width: 46rem) { .plan-grid { grid-template-columns: max-content minmax(0, 36rem); gap: 3.5rem; } }
.sign { display: inline-flex; flex-direction: column; align-items: center; justify-self: start; }
.sign-panel { min-width: 14.5rem; padding: 1.1rem 2.25rem 1rem; background: var(--white); border: 3px solid var(--charcoal); border-radius: 6px; text-align: center; }
.sign-price { display: block; font: 800 4.6rem/.88 var(--condensed); }
.sign-per { display: block; margin-top: .45rem; font: 600 1.05rem/1.1 var(--condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sign-rider { position: relative; margin-top: 15px; padding: .6rem 1.15rem .55rem; background: var(--red); color: var(--white); border-radius: 4px; font: 800 1.4rem/1 var(--condensed); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sign-rider::before, .sign-rider::after { content: ""; position: absolute; top: -15px; width: 3px; height: 15px; background: var(--charcoal); }
.sign-rider::before { left: 24%; }
.sign-rider::after { right: 24%; }

/* The ZIP check, on the home page and /start/, is a yard sign. The field hangs from the arm on
   two chains, and the button is the rider plate hung under it, like PENDING under PACKING. */
.zip-sign { position: relative; max-width: 27rem; margin: 0; padding: 22px 0 1.75rem 30px; }
.zip-sign::before { content: ""; position: absolute; top: 0; left: 0; right: 6%; height: 9px; background: var(--charcoal); border-radius: 2px; }
.zip-sign::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 9px; background: var(--charcoal); border-radius: 2px 2px 0 0; }
.zip-panel { position: relative; padding: 1.05rem 1.25rem 1.25rem; background: var(--white); border: 3px solid var(--charcoal); border-radius: 6px; }
.zip-panel::before, .zip-panel::after { content: ""; position: absolute; top: -16px; width: 3px; height: 13px; background: var(--charcoal); }
.zip-panel::before { left: 16%; }
.zip-panel::after { right: 16%; }
.zip-panel label { display: block; font-weight: 600; font-size: 1.0625rem; }
.zip-panel input { display: block; width: 100%; margin-top: .5rem; padding: .4rem .65rem .3rem; background: var(--bone); color: var(--charcoal); border: 2px solid var(--charcoal); border-radius: 4px; font: 800 2.6rem/1 var(--condensed); letter-spacing: .14em; scroll-margin-top: 5rem; }
.zip-panel input[aria-invalid="true"] { border-color: var(--red); }
.zip-rider { position: relative; display: block; width: max-content; max-width: 100%; margin: 14px auto 0; padding: .8rem 1.5rem .72rem; background: var(--red); color: var(--white); border: 0; border-radius: 4px; font: 800 1.65rem/1 var(--condensed); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.zip-rider::before, .zip-rider::after { content: ""; position: absolute; top: -14px; width: 3px; height: 14px; background: var(--charcoal); }
.zip-rider::before { left: 22%; }
.zip-rider::after { right: 22%; }
.zip-rider:hover { background: var(--red-deep); }
.zip-rider:disabled { cursor: progress; }
/* The narrowest phones: a tighter plate, so "START FREE TRIAL" stays on one line in the gutter. */
@media (max-width: 21rem) { .zip-rider { padding-inline: 1.1rem; letter-spacing: .06em; } }
.zip-error { margin-top: 1rem; color: var(--red-deep); font-weight: 600; }

.start { margin-top: 2.5rem; }
.button { display: inline-block; padding: 1.05rem 1.75rem 1rem; background: var(--red); color: var(--white); border: 0; border-radius: 6px; font: 800 1.6rem/1 var(--condensed); letter-spacing: .015em; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--red-deep); color: var(--white); }
.start .fine { margin-top: .75rem; font-size: .9375rem; color: var(--muted); }
@media (max-width: 30rem) { .button { display: block; text-align: center; } }

/* Smaller asks: each opens a short form */
.asks { margin-top: 2.5rem; max-width: 40rem; border-top: 1px solid var(--tint); }
.ask { border-bottom: 1px solid var(--tint); }
.ask summary { padding: .85rem 0; color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; list-style: none; }
.ask summary::-webkit-details-marker { display: none; }
.ask summary:hover { color: var(--red-deep); }
.ask[open] summary { text-decoration: none; color: var(--charcoal); }
.ask-body { padding-bottom: 1.4rem; }

/* Forms */
.form > h2 + p { margin-top: .4rem; }
.form > p + label { margin-top: 1.1rem; }
.form label { display: block; margin-top: .9rem; font-weight: 600; }
.form > label:first-child, .form > input[type=hidden]:first-child + label { margin-top: .25rem; }
.form .optional { font-weight: 500; color: var(--muted); }
.form input, .form textarea { display: block; width: 100%; margin-top: .35rem; padding: .65rem .75rem; background: var(--white); color: var(--charcoal); border: 1px solid var(--field); border-radius: 4px; font: inherit; font-weight: 500; }
.form textarea { resize: vertical; }
.form-send { margin-top: 1.1rem; padding: .75rem 1.25rem .7rem; background: var(--charcoal); color: var(--white); border: 0; border-radius: 4px; font: 800 1.2rem/1 var(--condensed); letter-spacing: .02em; cursor: pointer; }
.form-send:hover { background: #000; }
.form-send:disabled { opacity: .6; cursor: default; }
.form-error { margin-top: .9rem; color: var(--red-deep); font-weight: 600; }
.form-done { font-weight: 600; }
.form-done:focus { outline: none; }

/* Questions */
.faq-list { display: grid; gap: 1.75rem 3.5rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .faq-list { grid-template-columns: 1fr 1fr; } }
.faq-list p { margin-top: .4rem; }

/* Simple pages */
.page { margin-top: clamp(1.5rem, 4vw, 3rem); max-width: 40rem; }
.page h1 { margin-bottom: 1.25rem; }
.page ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.page li + li { margin-top: .6rem; }
.page h2 { margin-top: 2.25rem; font-size: clamp(1.5rem, .6vw + 1.3rem, 1.85rem); }
.page strong { font-weight: 600; }
.page .form { margin-top: 2rem; }

/* ---------------------------------------------------------------------------------------------
   The mover's postcard, 9 x 6 in. Every size is in cqw (1% of the card's width), so the card
   scales as one piece. Colors come from --pc-* properties set per mover by the build, which
   checks every text color against its background for 4.5:1 contrast.
   --------------------------------------------------------------------------------------------- */
.pc-frame { container-type: inline-size; border-radius: 6px; box-shadow: 0 1px 2px rgba(34, 31, 30, .14), 0 14px 30px -14px rgba(34, 31, 30, .4); }
.pc { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--pc-paper); color: var(--pc-ink); font-family: var(--sans); }

.pc-front { display: grid; grid-template-columns: 61fr 39fr; }
.pc-copy { display: flex; flex-direction: column; min-width: 0; padding: 5.2cqw 4cqw 4.4cqw 5.2cqw; }
.pc-label { font: 600 2.1cqw/1 var(--condensed); letter-spacing: .15em; text-transform: uppercase; color: var(--pc-strong); }
.pc-headline { margin-top: 1.6cqw; font: 800 7.4cqw/.94 var(--condensed); letter-spacing: .005em; text-transform: uppercase; color: var(--pc-ink); }
.pc-plate { align-self: flex-start; margin-top: 2.4cqw; padding: 1.15cqw 1.8cqw 1.05cqw; background: var(--pc-secondary); color: var(--pc-on-secondary); border-radius: .45cqw; font: 800 3.4cqw/1 var(--condensed); letter-spacing: .03em; text-transform: uppercase; }
.pc-body { margin-top: 2.6cqw; max-width: 44cqw; font: 500 2.35cqw/1.35 var(--sans); }
.pc-sign { margin-top: auto; padding-top: 2cqw; border-top: .25cqw solid var(--pc-rule); }
.pc-name { font: 800 3.1cqw/1.05 var(--condensed); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.pc-phone { margin-top: .5cqw; font: 800 6.3cqw/1 var(--condensed); letter-spacing: .01em; color: var(--pc-strong); white-space: nowrap; }

.pc-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; min-width: 0; padding: 4cqw 3.4cqw; border-left: 1.1cqw solid var(--pc-secondary); background-color: var(--pc-primary); background-image: repeating-linear-gradient(135deg, transparent 0 3.2cqw, var(--pc-pattern) 3.2cqw 3.9cqw); }
.pc-logo-plate { display: grid; place-items: center; background: #FFFFFF; box-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .2); }
.pc-logo-plate.is-round { width: 25cqw; aspect-ratio: 1; padding: 4cqw; border-radius: 50%; }
.pc-logo-plate.is-wide { width: 30cqw; padding: 2.6cqw 2.4cqw; border-radius: 1.2cqw; }
.pc-logo-plate img { display: block; max-width: 100%; max-height: 16cqw; object-fit: contain; }
.pc-wordmark { max-width: 100%; color: var(--pc-on-primary); font: 800 var(--wm-size, 6cqw)/.92 var(--condensed); letter-spacing: .01em; text-align: center; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.pc-tagline { max-width: 29cqw; color: var(--pc-on-primary); font: 600 2.15cqw/1.3 var(--sans); text-align: center; text-wrap: balance; }

.pc-back { display: grid; grid-template-columns: 54fr 46fr; border-top: 1.2cqw solid var(--pc-primary); }
.pc-message { display: flex; flex-direction: column; min-width: 0; padding: 3.6cqw 3.4cqw 2.8cqw 4.2cqw; border-right: .25cqw solid var(--pc-rule); }
.pc-back-logo { display: block; max-width: 30cqw; max-height: 8.5cqw; object-fit: contain; object-position: left center; }
.pc-back-wordmark { color: var(--pc-strong); font: 800 4cqw/1 var(--condensed); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.pc-greeting { margin-top: 2.4cqw; font: 600 2.55cqw/1.32 var(--sans); }
.pc-review { margin-top: 2cqw; padding-left: 1.6cqw; border-left: .55cqw solid var(--pc-secondary); color: var(--pc-ink-soft); font: 500 2.05cqw/1.38 var(--sans); }
.pc-reach { display: flex; align-items: center; gap: 2.3cqw; margin-top: auto; padding-top: 2cqw; }
.pc-qr { flex: none; width: 13cqw; aspect-ratio: 1; background: #FFFFFF; }
.pc-qr svg { display: block; width: 100%; height: 100%; }
.pc-qr.is-placeholder { display: grid; place-items: center; border: .25cqw dashed var(--pc-ink-soft); color: var(--pc-ink-soft); font: 600 1.5cqw/1.1 var(--sans); text-align: center; }
.pc-back-phone { font: 800 5.2cqw/1 var(--condensed); letter-spacing: .01em; color: var(--pc-strong); white-space: nowrap; }
.pc-web { margin-top: .8cqw; font: 600 2.05cqw/1.2 var(--sans); overflow-wrap: anywhere; }
.pc-qr-note { margin-top: .7cqw; color: var(--pc-ink-soft); font: 500 1.6cqw/1.2 var(--sans); }
.pc-legal { margin-top: 1.8cqw; font: 600 1.55cqw/1.4 var(--sans); }
.pc-mailed { margin-top: .9cqw; color: var(--pc-ink-soft); font: 500 1.3cqw/1.2 var(--sans); }
.pc-mailing { position: relative; min-width: 0; }
.pc-postage { position: absolute; top: 3cqw; right: 3cqw; display: grid; place-items: center; width: 10.5cqw; height: 9cqw; border: .25cqw dashed var(--pc-ink-soft); color: var(--pc-ink-soft); font: 600 1.35cqw/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.pc-address { position: absolute; left: 6cqw; top: 29cqw; font: 500 2.3cqw/1.42 var(--sans); }