/* Packing Pending home page. Colors, type, forms, the ZIP sign and the plan sign come from
   site.css, which the other pages share; this file holds what only the home page uses. */

[hidden] { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem .9rem; background: var(--charcoal); color: var(--white); border-radius: 4px; font-weight: 600; }
.skip:focus { top: 1rem; color: var(--white); }
#how, #sample, #pricing, #mail, #faq, #contact { scroll-margin-top: 1.25rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Header: logo, the section links and the trial button. On phones the links take a second row,
   and the keyboard follows the rows (reading-flow; browsers without it keep the source order). */
.home-top { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(1rem, 2.4vw, 1.75rem); reading-flow: flex-visual; }
.home-nav { display: flex; gap: clamp(1rem, 2.4vw, 1.75rem); margin-left: auto; font-size: .9375rem; font-weight: 600; }
.home-nav a { color: var(--charcoal); text-decoration: none; }
.home-nav a:hover { color: var(--red); text-decoration: underline; }
.top-start { padding: .62rem 1rem .55rem; background: var(--red); color: var(--white); border-radius: 4px; font: 800 1.2rem/1 var(--condensed); letter-spacing: .02em; text-decoration: none; }
.top-start:hover { background: var(--red-deep); color: var(--white); }
@media (max-width: 47.99rem) {
  .home-top { padding-bottom: 0; }
  .top-start { margin-left: auto; }
  .home-nav { order: 3; flex: 1 0 100%; justify-content: space-between; margin: 1rem 0 0; padding: .7rem 0; border-top: 1px solid var(--tint); border-bottom: 1px solid var(--tint); }
}

/* Hero: the promise on the left, the ZIP sign and the three answers on the right, and a
   customer's review under the promise, beside the sign. On phones one column in that order
   (promise, sign, review), the screen's width, however wide the rider plate's text is. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: clamp(1.5rem, 5vw, 4.25rem); }
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
  .hero:has(> .review) { grid-template-areas: "copy act" "review act"; row-gap: 2.25rem; }
  .hero:has(> .review) .hero-copy { grid-area: copy; align-self: end; }
  .hero:has(> .review) .hero-act { grid-area: act; }
  /* Scoped like the rules above: without :has(), the review keeps its place under the copy. */
  .hero:has(> .review) > .review { grid-area: review; align-self: start; }
}
.hero h1 { max-width: 7.4em; font-size: clamp(2.75rem, 4.6vw + 1.25rem, 5.5rem); line-height: .92; letter-spacing: 0; }
.hero-lead { margin-top: 1.1rem; max-width: 31rem; font-size: clamp(1.125rem, .45vw + 1rem, 1.375rem); line-height: 1.45; }
@media (min-width: 64rem) { .hero-lead { margin-top: 1.6rem; } }
.hero .zip-sign { padding-bottom: 1.4rem; }
.hero-points { margin: .9rem 0 0; padding: 0; list-style: none; font-weight: 600; }
.hero-points li { position: relative; padding-left: 1.85rem; }
.hero-points li + li { margin-top: .3rem; }
.hero-points li::before { content: ""; position: absolute; left: .2rem; top: .42em; width: .78rem; height: .4rem; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }
.hero-area, .hero-mail { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--tint); }
.hero-area { color: var(--muted); }
.hero-mail + .hero-area { margin-top: .3rem; padding-top: 0; border-top: 0; }

/* A customer's review: the quote in a white box under a large quote mark, then the mover's logo,
   the person's name and the company. */
.review { margin: 0; max-width: 34rem; padding: 1.1rem 1.5rem 1.2rem; background: var(--white); border: 1px solid var(--tint); border-radius: 6px; }
.review blockquote { margin: 0; font: 600 clamp(1.25rem, .5vw + 1.1rem, 1.5rem)/1.25 var(--condensed); letter-spacing: .005em; }
.review blockquote::before { content: "“"; content: "“" / ""; display: block; height: 2.1rem; color: var(--red); font: 800 4.25rem/1 var(--condensed); }
.review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--tint); }
.review-logo { flex: none; width: auto; height: 2.4rem; max-width: 10rem; object-fit: contain; object-position: left center; }
.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-name { font-weight: 600; }
.review-company { color: var(--muted); font-size: .9375rem; }
.review-company:only-child { color: var(--charcoal); font-size: 1rem; font-weight: 600; }

/* How it works: four steps in order */
.steps { display: grid; gap: 1.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.25rem; row-gap: 2.25rem; } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 3px solid var(--charcoal); }
.steps li::before { content: counter(step); display: block; margin-bottom: .4rem; color: var(--red); font: 800 2.6rem/1 var(--condensed); }
.steps h3 { font: 800 1.5rem/1.1 var(--condensed); letter-spacing: .005em; }
.steps p { margin-top: .45rem; }
/* On phones the number sits beside the step, so the four steps stay short. */
@media (max-width: 39.99rem) {
  .steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }
  .steps li::before { grid-row: span 2; margin: 0; }
  .steps h3, .steps p { grid-column: 2; }
}

/* What you get: one made-up week on a sheet, with a "Sample" rider plate hung under it. The
   map's pins and the spreadsheet's rows share numbers, and red means occupied in both. */
.sheet { margin: 1.75rem 0 0; }
.sheet-paper { position: relative; margin-bottom: 3.75rem; padding: 1.15rem clamp(.9rem, 2vw, 1.35rem) 1.35rem; background: var(--white); border: 3px solid var(--charcoal); border-radius: 6px; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1.5rem; padding-bottom: .8rem; border-bottom: 1px solid var(--tint); }
.sheet-title { font: 800 1.55rem/1.05 var(--condensed); letter-spacing: .005em; }
.sheet-count { color: var(--muted); font-weight: 600; }

/* The map (sample-map.html): a made-up neighborhood whose streets match the sample addresses,
   wide over the table on wider screens and taller on phones. */
.sheet-map-wrap { position: relative; margin-top: 1.1rem; }
.sheet-map { display: block; width: 100%; height: auto; border: 1px solid var(--tint); border-radius: 4px; }
.map-wide { display: none; }
@media (min-width: 48rem) { .map-wide { display: block; } .map-tall { display: none; } }
.pin { filter: drop-shadow(0 1px 1.5px rgb(34 31 30 / .35)); }
.pin circle { fill: var(--white); stroke: var(--charcoal); stroke-width: 2.5; }
.pin text { fill: var(--charcoal); }
.pin.is-occupied circle { fill: var(--red); stroke: var(--red-deep); }
.pin.is-occupied text { fill: var(--white); }

/* The spreadsheet, with every column the real one has. When it doesn't fit it scrolls sideways
   in its frame, with the home number pinned and a shadow on the side that has more columns. */
.sheet-scroll { margin-top: 1.1rem; overflow-x: auto;
  background: linear-gradient(to left, var(--white) 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgb(34 31 30 / .22), rgb(34 31 30 / 0)) right / .9rem 100% no-repeat scroll; }
.sheet-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; line-height: 1.35; }
.sheet-table th, .sheet-table td { padding: .5rem .6rem; border-right: 1px solid var(--tint); border-bottom: 1px solid var(--tint); text-align: left; vertical-align: top; white-space: nowrap; }
.sheet-table th { border-top: 1px solid var(--tint); background: var(--bone); color: var(--muted); font-weight: 600; }
.sheet-table tr > :first-child { position: sticky; left: 0; z-index: 1; width: 2.2rem; border-left: 1px solid var(--tint); background: var(--white); text-align: center; }
.sheet-table thead th:first-child { background: var(--bone); }
.sheet-table td:first-child { font: 800 1.15rem/1.15 var(--condensed); }
.sheet-table .owner { font-weight: 600; }
.sheet-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-flag { display: inline-flex; align-items: baseline; gap: .45rem; color: var(--muted); }
.sheet-flag::before { content: ""; flex: none; width: .7rem; height: .7rem; border: 2px solid var(--charcoal); border-radius: 50%; }
.is-occupied td:first-child { color: var(--red); }
.is-occupied .sheet-flag { color: var(--charcoal); font-weight: 600; }
.is-occupied .sheet-flag::before { background: var(--red); border-color: var(--red-deep); }
/* A seventh home fades out and the rest of the week is a count, so six homes don't read as a week. */
.sheet-fade td { border-bottom: 0; -webkit-mask-image: linear-gradient(rgb(0 0 0 / .5), transparent); mask-image: linear-gradient(rgb(0 0 0 / .5), transparent); }
.sheet-table .sheet-more td { padding: .15rem .6rem 0; border: 0; color: var(--muted); font: 800 1.1rem/1.2 var(--condensed); text-align: left; }

/* Notes on what each part is for, in red with a bracket over what they describe. Where the whole
   table fits they sit above their columns and on the map; on narrower screens they're a list
   under the table, which screen readers get at every width. A note wraps to its column rather
   than widening it. */
.callout { color: var(--red-deep); font: 600 1.0625rem/1.15 var(--condensed); text-wrap: balance; }
.sheet-table .sheet-callouts td { position: static; padding: 0 .6rem .5rem; border: 0; background: none; vertical-align: bottom; white-space: normal; }
.sheet-callouts .callout { display: block; width: 0; min-width: 100%; }
.sheet-callouts .callout::after { content: ""; display: block; height: .4rem; margin-top: .4rem; border: 2px solid var(--red); border-bottom: 0; }
.row-callout { display: block; width: 0; min-width: 100%; margin-top: .3rem; padding-left: .5rem; border-left: 2px solid var(--red); white-space: normal; }
.map-callout { position: absolute; left: 57%; top: 19%; width: max-content; max-width: 41%; padding: .45rem .7rem .5rem; background: rgb(255 255 255 / .94); border-left: 3px solid var(--red); }
.map-callout span { display: block; }
.callout-key { margin: 1rem 0 0; padding: 0 0 0 .8rem; list-style: none; border-left: 3px solid var(--red); font-size: .9375rem; line-height: 1.4; }
.callout-key li + li { margin-top: .3rem; }
.callout-key strong { color: var(--red-deep); font: 600 1.0625rem/1.2 var(--condensed); }

/* Under a table that scrolls: a hint, and Expand (home.js shows it). */
.table-tools { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; }
.scroll-hint { color: var(--muted); font-size: .8125rem; }
.expand { display: inline-flex; flex: none; align-items: center; gap: .45rem; padding: .5rem .85rem .45rem; background: var(--white); color: var(--charcoal); border: 2px solid var(--charcoal); border-radius: 4px; font: 800 1.1rem/1 var(--condensed); letter-spacing: .02em; cursor: pointer; }
.expand:hover { background: var(--bone); }
/* From 74rem the whole table fits: notes in place, with room above their columns, and no hint
   or Expand. */
@media (max-width: 73.99rem) { .sheet-callouts, .map-callout { display: none; } }
@media (min-width: 74rem) {
  .sheet-table .col-owner { min-width: 10.5rem; }
  .sheet-table .col-flag { min-width: 8.5rem; }
  .callout-key { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .table-tools { display: none; }
}
.sheet-note { margin-top: .9rem; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.sheet figcaption { max-width: 40rem; color: var(--muted); font-size: .9375rem; }
.sample-start { margin-top: 1.5rem; }

/* Expand: the spreadsheet alone over the whole screen. Held upright, a phone shows it turned on
   its side, so the mover turns the phone to read it; once the screen is wider than tall it sits
   straight. Android also goes full screen and locks to landscape where the browser allows. */
html:has(.viewer[open]) { overflow: hidden; }
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--charcoal); overflow: hidden; }
.viewer::backdrop { background: rgb(34 31 30 / .6); }
.viewer-turn { display: flex; flex-direction: column; gap: .7rem; width: 100%; height: 100%;
  padding: max(.75rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(.75rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
@media (orientation: portrait) and (pointer: coarse) {
  .viewer-turn { position: absolute; top: 0; left: 100%; width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; transform-origin: top left; transform: rotate(90deg); }
}
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.viewer-title { font: 800 1.4rem/1.05 var(--condensed); letter-spacing: .005em; }
.viewer-close { flex: none; padding: .55rem 1.1rem .5rem; background: var(--charcoal); color: var(--white); border: 0; border-radius: 4px; font: 800 1.15rem/1 var(--condensed); letter-spacing: .02em; cursor: pointer; }
.viewer-close:hover { background: var(--red); }
.viewer .sheet-scroll { flex: 1; min-height: 0; margin-top: 0; overflow: auto; }
.viewer .sheet-callouts { display: none; }
.viewer .sheet-note { margin-top: 0; }

/* Pricing: each plan is a small sign; founding prices hang a rider plate under it */
.plans { display: grid; gap: 1.5rem 2rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
@media (min-width: 50rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { position: relative; display: grid; grid-template-rows: auto minmax(1.9rem, auto) auto auto; align-content: start; margin-bottom: 3.1rem; padding: 1.15rem 1.35rem 1.25rem; background: var(--white); border: 3px solid var(--charcoal); border-radius: 6px; }
/* Fixed rows keep the prices level whether or not a plan has a scope line. */
.plan-name { grid-row: 1; font: 800 1.55rem/1.05 var(--condensed); letter-spacing: .005em; }
.plan-scope { grid-row: 2; margin-top: .3rem; color: var(--muted); font-size: .9375rem; }
.plan-price { grid-row: 3; margin-top: .75rem; }
.plan-amount { font: 800 4.2rem/.9 var(--condensed); }
.plan-per { font: 600 1.05rem/1 var(--condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plan-regular { grid-row: 4; margin-top: .35rem; color: var(--muted); font-size: .9375rem; }
.plan-rider, .sheet-rider { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); padding: .55rem 1rem .5rem; background: var(--red); color: var(--white); border-radius: 4px; font: 800 1.15rem/1 var(--condensed); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.plan-rider::before, .plan-rider::after, .sheet-rider::before, .sheet-rider::after { content: ""; position: absolute; top: -15px; width: 3px; height: 15px; background: var(--charcoal); }
.plan-rider::before, .sheet-rider::before { left: 22%; }
.plan-rider::after, .sheet-rider::after { right: 22%; }
/* One plan per row on phones: no level rows to keep, and no rider gap under the plain plan. */
@media (max-width: 49.99rem) { .plan { grid-template-rows: none; } .plan:not(.is-founding) { margin-bottom: 0; } }
.terms { margin: 1.25rem 0 0; padding-left: 1.2rem; max-width: 40rem; }
.terms li + li { margin-top: .4rem; }

/* The mail add-on: priced per card, on top of a list plan. "Add mail" opens the waitlist. */
/* Drawn like a fourth plan sign. On wider screens its copy lines up with the second plan. */
.addon { display: grid; margin-top: clamp(2.25rem, 4vw, 3rem); padding: 1.15rem 1.35rem 1.4rem; background: var(--white); border: 3px solid var(--charcoal); border-radius: 6px; }
.addon-name { font: 800 1.55rem/1.05 var(--condensed); letter-spacing: .005em; }
.addon-price { margin-top: .6rem; white-space: nowrap; }
.addon-amount { font: 800 4.2rem/.9 var(--condensed); }
.addon-per { font: 600 1.05rem/1 var(--condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.addon-copy { margin-top: .9rem; max-width: 36rem; }
.addon-act { margin-top: 1.1rem; }
.addon-add { padding: .75rem 1.4rem .7rem; background: var(--charcoal); color: var(--white); border: 0; border-radius: 4px; font: 800 1.3rem/1 var(--condensed); letter-spacing: .02em; cursor: pointer; }
.addon-add:hover { background: #000; }
.addon-panel { max-width: 30rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--tint); }
.addon-panel h4 { margin: 0; font: 800 1.35rem/1.1 var(--condensed); letter-spacing: .005em; }
.addon-panel h4:focus { outline: none; }
.addon-panel > p { margin-top: .35rem; }
.addon-panel .form { margin-top: .5rem; }
.addon-panel .form-done { margin-top: 1rem; }
@media (min-width: 50rem) {
  /* With this gap the copy starts where the second plan's text does. */
  .addon { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: calc(1rem + 1.35rem + 3px); align-content: start; }
  .addon-name, .addon-price { grid-column: 1; }
  .addon-price { margin-top: .75rem; }
  .addon-copy, .addon-act, .addon-panel { grid-column: 2; }
  .addon-copy { grid-row: 1 / span 2; margin-top: 0; }
  .addon-panel { margin-top: 1.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .addon-panel:not([hidden]) { animation: panel-in .25s ease-out; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(4px); } }
}
/* The sample postcard under the add-on's copy, across the whole sign. */
.addon-cards { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--tint); }
.addon-cards .cards { margin-top: 0; }
@media (min-width: 50rem) { .addon-cards { grid-column: 1 / -1; } }
.pricing-start { margin-top: 2rem; }

/* Who it's for: the page's last word before the contact form, with the trial button again */
.fit-start { margin-top: 1.5rem; }

/* FAQ: each question, in bold condensed type, beside its answer on wider screens */
.faq { margin-top: 1.75rem; border-top: 3px solid var(--charcoal); }
.faq-item { padding: 1.2rem 0 1.35rem; border-bottom: 1px solid var(--tint); }
.faq-item h3 { max-width: 26rem; font: 800 clamp(1.35rem, .4vw + 1.2rem, 1.55rem)/1.1 var(--condensed); letter-spacing: .005em; }
.faq-item p { max-width: 36rem; margin-top: .5rem; }
@media (min-width: 52rem) {
  .faq-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: baseline; padding: 1.5rem 0 1.6rem; }
  .faq-item p { margin-top: 0; }
}

/* Contact us */
.contact-grid { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 4.5rem); } }
.contact .flow { max-width: 26rem; }
.contact .form { max-width: 34rem; }
.contact .form > label:first-child { margin-top: 0; }

/* Avoid one-word last lines in headings and short paragraphs; older browsers ignore this. */
.steps h3, .plan-name, .faq-item h3, .review blockquote { text-wrap: balance; }
main p, main li { text-wrap: pretty; }