/* ============================================================================
   SHIPIFY — css/home.css
   Owned by the HOME cell. Loads AFTER tokens.css + shared.css.
   Tokens only: no literal colours, no literal type sizes, spacing on the 8px grid.

   Contrast notes kept honest in-file:
     - --ink-muted on --kraft is 4.37:1 → FAILS AA. Every kraft surface here
       (.promise) forces text back to --ink.
     - --accent as text is 4.14:1 on --surface → only used at >=31px (large-text
       AA needs 3:1) for .stat__value. On --sy-stock it is 5.1:1 and safe at any
       size (.step__num).
   ========================================================================== */

/* ═══════════════════════════════════════════════════════ 1. HERO / THE DECK */

.hero {
  position: relative;
  padding-block: clamp(var(--sp-400), 6vw, var(--sp-800)) clamp(var(--sp-600), 9vw, var(--sp-1200));
}

/* soft paper glow behind the machine, and a torn perforation into section 2 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 68% at 78% 42%, var(--surface), transparent 72%);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 8px;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 100%, var(--surface) 0 4px, transparent 4.5px);
  background-size: 12px 8px;
  background-repeat: repeat-x;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(var(--sp-400), 5vw, var(--sp-800));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  /* the scene column is the taller of the two; top-aligning and then dropping
     the copy by one step lands the headline against the deck rather than
     stranding it in the middle of a tall empty column */
  .hero__grid { grid-template-columns: 1.02fr .98fr; align-items: start; }
  .hero__copy { padding-top: var(--sp-800); }
}

.hero__copy > * + * { margin-top: var(--sp-300); }
.hero__lede { max-width: 46ch; }
.hero__cta { gap: var(--sp-200); }
.hero__fine { max-width: 46ch; }

/* one thumb, one column: ragged half-width buttons look like a mistake */
@media (max-width: 520px) {
  .hero__cta { display: grid; grid-template-columns: 1fr; }
  .hero__cta .sy-btn { width: 100%; }
}

/* --- the scene: Zip standing on the quote deck ---------------------------- */
.hero__scene {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero__zip {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  width: clamp(112px, 15vw, 152px);
  height: auto;
  margin-left: var(--sp-300);
  margin-bottom: -14px;   /* Zip's feet land on the deck's top shell */
}

.deck {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-sm);
  box-shadow: 0 4px 0 var(--line), 0 26px 44px -30px rgb(var(--sy-shadow) / .9);
  overflow: hidden;
}

.deck__head {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  padding: var(--sp-100) var(--sp-200);
  background: var(--line);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.deck__led {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 8px 1px rgb(var(--sy-shadow) / .2);
}
.deck__status {
  margin-left: auto;
  color: var(--kraft);   /* 8.98:1 on --line */
  font-weight: 500;
}
.deck.is-printing .deck__led { animation: home-led 260ms steps(1, end) infinite; }
@keyframes home-led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }

.deck__fields {
  display: grid;
  gap: var(--sp-300) var(--sp-200);
  grid-template-columns: 1fr;
  padding: var(--sp-300) var(--sp-300) var(--sp-200);
}
@media (min-width: 520px) {
  /* the zone names are the longest strings in the deck, so zone gets the wider
     column; minmax(0,…) stops a long option from blowing the grid out */
  .deck__fields { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .deck__field--wide { grid-column: 1 / -1; }
}
/* shared.css stacks .sy-field siblings; the grid already owns the spacing */
.deck__fields .sy-field + .sy-field { margin-top: 0; }

.deck__weight { position: relative; }
.deck__weight .sy-input { padding-right: var(--sp-600); }
.deck__weight .sy-input::-webkit-outer-spin-button,
.deck__weight .sy-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.deck__weight .sy-input { appearance: textfield; -moz-appearance: textfield; }
.deck__unit {
  position: absolute;
  top: 50%;
  right: var(--sp-200);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  pointer-events: none;
}

.deck__presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-100);
  padding: 0 var(--sp-300) var(--sp-300);
}
.deck__presetlabel {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.deck__preset {
  min-height: 44px;
  padding: var(--sp-050) var(--sp-150);
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-quick) linear, transform var(--dur-quick) var(--ease-stamp);
}
/* narrow: let the chips start on a clean left edge instead of indenting the
   first one behind the "TRY" caption */
@media (max-width: 520px) {
  .deck__presetlabel { flex: 1 0 100%; }
}
.deck__preset:hover { background: var(--kraft); }
.deck__preset:active { transform: translateY(2px); }
.deck__preset[aria-pressed="true"] { background: var(--line); color: var(--bg); }

/* the paper exit */
.deck__slot {
  display: grid;
  place-items: center;
  height: 26px;
  background: var(--kraft);
  border-top: 2px solid var(--line);
}
.deck__slot span {
  display: block;
  width: min(86%, 380px);
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  box-shadow: inset 0 3px 0 rgb(var(--sy-shadow) / .85);
}

/* the quote, feeding out from under the machine */
.hero__out {
  position: relative;
  z-index: 0;
  margin-top: -12px;
  padding-inline: var(--sp-200);
}
.hero__out .sy-label { border-radius: 0 0 var(--r-md) var(--r-md); }
.hero__out:empty { display: none; }

.hero__notes {
  margin-top: var(--sp-200);
  padding-inline: var(--sp-200);
  max-width: 52ch;
}
.hero__notes:empty { display: none; }

.hero__truth { margin: var(--sp-150) 0 0; padding-inline: var(--sp-100); }
.hero__truth:has(> [hidden]) { display: none; }

.hero__noscript { margin-top: var(--sp-300); }

/* ═══════════════════════════════════════════════════════════════ 2. PROOF */

.proof__intro { max-width: 62ch; }
.proof__intro > * + * { margin-top: var(--sp-200); }

.proof__grid {
  display: grid;
  gap: var(--sp-400);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: var(--sp-600);
}
@media (min-width: 920px) {
  .proof__grid {
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: var(--sp-600);
  }
}
.proof__label:empty { display: none; }
/* the shared tear edge punches its scallops in --bg, which is the right colour
   on paper sections only. This section is manila, so repaint them to match or
   the perforation reads as a row of pale dots. */
.proof .sy-label--tear::after {
  background-image: radial-gradient(circle at 50% 100%, var(--surface) 0 6px, transparent 6.5px);
}

.proof__side > * + * { margin-top: var(--sp-400); }

.proof__stats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-050) var(--sp-200);
  align-items: baseline;
  padding-bottom: var(--sp-300);
}
.stat + .stat {
  margin-top: var(--sp-300);
  padding-top: var(--sp-300);
  border-top: 2px dotted rgb(var(--sy-shadow) / .3);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);   /* >=31px, so large-text AA on --surface */
}
.stat__noun {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.stat__noun em { font-style: normal; font-weight: 700; color: var(--ink); }

.proof__counter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-200);
  padding: var(--sp-300);
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: 0 12px 26px -22px rgb(var(--sy-shadow) / .9);
}
@media (min-width: 620px) {
  .proof__counter { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-300); }
}
.proof__zip { width: 88px; height: auto; }
.proof__counter h3 { margin-bottom: var(--sp-150); }
.proof__counter p { color: var(--ink-muted); }
.proof__counter p + p { margin-top: var(--sp-200); }
.proof__link { font-weight: 700; color: var(--ink); text-decoration-color: var(--accent); }

.proof__source {
  margin-top: var(--sp-600);
  padding-top: var(--sp-300);
  border-top: 2px solid rgb(var(--sy-shadow) / .25);
  max-width: 80ch;
}

/* ════════════════════════════════════════════════════════ 3. HOW IT WORKS */

.how__intro { max-width: 58ch; }
.how__intro > * + * { margin-top: var(--sp-200); }

.how__steps {
  display: grid;
  gap: var(--sp-300);
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  list-style: none;
  margin: var(--sp-600) 0 0;
  padding: 0;
}
.step {
  position: relative;
  padding: var(--sp-400) var(--sp-300) var(--sp-300);
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 12px 26px -22px rgb(var(--sy-shadow) / .9);
}
/* tear-off perforation along the top edge of every ticket */
.step::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 10px;
  background-image: radial-gradient(circle at 50% 0, var(--bg) 0 5px, transparent 5.5px);
  background-size: 14px 10px;
  background-repeat: repeat-x;
}
.step__num {
  display: block;
  margin-bottom: var(--sp-100);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);   /* 5.1:1 on white stock */
}
.step h3 { margin-bottom: var(--sp-150); }
.step p { color: var(--ink-muted); }
.step__chip { margin-top: var(--sp-200); }

.how__peek {
  margin-top: var(--sp-400);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════ 4. FEATURES */

.feats__intro { max-width: 58ch; }
.feats__intro > * + * { margin-top: var(--sp-200); }

.feats__grid {
  display: grid;
  gap: var(--sp-300);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  list-style: none;
  margin: var(--sp-600) 0 0;
  padding: 0;
}
.feat {
  position: relative;
  padding: var(--sp-400) var(--sp-300) var(--sp-300);
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
}
/* a filing tab clipped over the card's top edge */
.feat__tab {
  position: absolute;
  top: -2px;
  left: var(--sp-300);
  padding: var(--sp-050) var(--sp-150);
  background: var(--kraft);
  color: var(--ink);
  border: 2px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.feat h3 { margin-bottom: var(--sp-150); }
.feat p { color: var(--ink-muted); }
.feat__chip { margin-top: var(--sp-200); }

.feats__more { margin-top: var(--sp-400); font-weight: 700; }

/* ════════════════════════════════════════════════════ 5. SUPPORT PROMISE */
/* kraft surface: --ink-muted is only 4.37:1 here, so everything returns to --ink */

.promise {
  background: var(--kraft);
  border-block: 2px solid var(--line);
  padding-block: clamp(var(--sp-600), 8vw, var(--sp-1200));
  color: var(--ink);
}
.promise .sy-eyebrow,
.promise .sy-note,
.promise .sy-lede { color: var(--ink); }

.promise__inner {
  display: grid;
  gap: var(--sp-400);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) {
  .promise__inner { grid-template-columns: auto 1fr; gap: var(--sp-600); }
}
.promise__zip { width: clamp(104px, 14vw, 172px); height: auto; }
.promise__copy > * + * { margin-top: var(--sp-200); }
.promise__copy p { max-width: 62ch; }
.promise__cta { margin-top: var(--sp-300); }

/* ══════════════════════════════════════════════════════════════ 6. FAQ */

.faq__intro > * + * { margin-top: var(--sp-200); }

.faq__list {
  display: grid;
  gap: var(--sp-400);
  grid-template-columns: 1fr;
  margin-top: var(--sp-600);
}
@media (min-width: 880px) {
  .faq__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-400); }
}
.faq__item {
  padding-top: var(--sp-300);
  border-top: 3px solid var(--line);
}
.faq__item h3 { margin-bottom: var(--sp-150); }
.faq__item p { color: var(--ink-muted); }

.faq__more { margin-top: var(--sp-600); font-weight: 700; }

/* ════════════════════════════════════════════════ 7. WAITLIST (money surface) */
/* calm: no jokes, no red, the ask stays visible above the button */

.join__copy > * + * { margin-top: var(--sp-200); }
.join__lede { font-size: var(--fs-lg); color: var(--ink-muted); max-width: 46ch; }

.join__panel {
  margin-top: var(--sp-400);
  padding: var(--sp-400);
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 32px -28px rgb(var(--sy-shadow) / .9);
}
@media (max-width: 520px) {
  .join__panel { padding: var(--sp-300); }
}

.join__opt {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
#join-submit { margin-top: var(--sp-400); }
.join__fine { margin-top: var(--sp-200); }

.join__result:empty { display: none; }
.join__result .sy-label { margin-top: 0; }
/* same tear-edge repaint: the confirmation prints onto the white panel */
.join__result .sy-label--tear::after {
  background-image: radial-gradient(circle at 50% 100%, var(--sy-stock) 0 6px, transparent 6.5px);
}
/* an email address is longer than a price: let the value wrap instead of
   pushing the dotted leader off the label */
.join__result .sy-label__line dd {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ═════════════════════════════════════════════════════ 8. reduced motion */

@media (prefers-reduced-motion: reduce) {
  .deck.is-printing .deck__led { animation: none; opacity: 1; }
  .deck__preset:active { transform: none; }
}