/* Home page: hero floats, marquee, pinned introduction, conclusion topic list. */

/* Hero */
.home-hero { min-height: 100vh; padding-top: clamp(112px, 15vh, 180px); }
.home-hero .hero-copy { position: relative; z-index: 5; max-width: 1400px; display: flex; flex-direction: column; gap: var(--space-6); }
.home-hero .byline { order: -1; margin-bottom: calc(var(--space-6) * -1 + var(--space-4)); }
.home-hero h1 { font-size: clamp(64px, min(12.5vw, 24vh), 232px); font-weight: 700; letter-spacing: -.04em; }
.home-hero h1 .amp { font-style: italic; font-weight: 400; color: var(--color-accent); }
@media (min-width: 761px) { .home-hero .hero-copy { max-width: min(1400px, 70vw); } }
.home-hero h1 .mask > span { text-wrap: balance; }
.home-hero .cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.home-hero .mag { display: inline-block; }
/* The buttons sit near the fold, where a scroll reveal would leave them hidden, so they enter on load */
.js .home-hero .cta { animation: cta-in .9s cubic-bezier(.2,.7,.2,1) .9s both; }
@keyframes cta-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .js .home-hero .cta { animation: none; } }
.home-hero .btn { font-size: 15px; padding: 12px 18px; }

.home-hero .float { z-index: 2; font-size: 13px; line-height: 1.45; }
.home-hero .receipt { width: 220px; padding: var(--space-4); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.receipt .r-head { text-align: center; font-weight: 600; letter-spacing: .08em; margin-bottom: var(--space-2); }
.receipt .r-row { display: flex; justify-content: space-between; gap: var(--space-2); }
.receipt .r-total { margin-top: var(--space-2); font-weight: 600; }
.receipt .barcode {
  height: 34px; margin-top: var(--space-3);
  background: repeating-linear-gradient(90deg, var(--color-text) 0 2px, transparent 2px 4px, var(--color-text) 4px 5px, transparent 5px 8px, var(--color-text) 8px 11px, transparent 11px 12px);
}
.home-hero .sku { width: 200px; padding: var(--space-3) var(--space-4); background: var(--color-accent-100); color: var(--color-accent-900); display: flex; flex-direction: column; z-index: 3; }
.sku .sku-id { color: var(--color-accent-800); font-weight: 600; }
.sku .sku-name { font-size: 17px; margin: 2px 0 var(--space-2); color: var(--color-text); }
.home-hero .stamp {
  width: 132px; height: 132px; padding: 0; border-radius: 50%; background: none; box-shadow: none;
  border: 2px solid var(--color-accent-2); color: var(--color-accent-2-700);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; letter-spacing: .12em; line-height: 1.3; z-index: 1;
}
.stamp .st-a { font-weight: 600; }
.stamp .st-b { font-size: 20px; letter-spacing: 0; font-style: italic; }
.home-hero .note {
  width: 168px; padding: var(--space-4); font-style: italic; font-size: 17px; line-height: 1.3; z-index: 3;
  background: color-mix(in srgb, var(--color-process-yellow) 32%, var(--color-bg));
}
.home-hero .sheet {
  padding: 0; display: grid; grid-template-columns: repeat(3, auto); font-size: 12px;
  background: var(--color-bg); box-shadow: var(--shadow-sm); z-index: 0;
}
.sheet span { padding: 6px; }
.sheet .hd { background: var(--color-surface); min-height: 24px; }
.sheet .err { color: var(--color-accent-2-700); font-weight: 600; }
.home-hero .ink { background: var(--color-text); color: var(--color-bg); font-size: 14px; z-index: 4; }

/* Marquee */
.marquee { overflow: hidden; padding: var(--space-6) 0; font-size: clamp(28px, 4vw, 56px); white-space: nowrap; }
.marquee .track { display: inline-flex; gap: var(--space-8); will-change: transform; }
.marquee i { font-style: normal; color: var(--color-accent); }
.marquee i.m { color: var(--color-accent-2); }

/* Introduction: pinned three-step ladder */
.ladder { position: relative; height: 360vh; }
.ladder .stage {
  position: sticky; top: 0; height: 100vh;
  padding-top: clamp(90px, 12vh, 120px); padding-bottom: var(--space-8);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 80px); align-items: center;
}
.ladder .side { display: flex; flex-direction: column; gap: var(--space-6); }
.ladder h2 { margin: 0; font-size: clamp(40px, 6vw, 96px); line-height: 1; letter-spacing: -.02em; }
.ladder .rungs { display: flex; flex-direction: column-reverse; gap: var(--space-2); max-width: 300px; }
.ladder .rungs > span { display: block; height: 6px; background: var(--color-neutral-200); overflow: hidden; }
.ladder .rungs > span > span { display: block; height: 100%; background: var(--color-accent); transform-origin: left; }
.js .ladder .rungs > span > span { transform: scaleX(0); }
.ladder .board { position: relative; height: min(76vh, 620px); }
.ladder .numeral { position: absolute; top: 0; left: 0; font-size: clamp(100px, 13vw, 200px); font-weight: 600; }
.ladder .steps { position: absolute; inset: 0; }
.ladder .step {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  max-width: 46ch; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; text-wrap: pretty;
}
.js .ladder .step { opacity: 0; }

/* Desktop: the numeral sits in flow above the steps, and the steps share one
   grid cell, so a long paragraph can never run up under the numeral. */
@media (min-width: 761px) {
  .ladder .board { height: auto; display: flex; flex-direction: column; gap: var(--space-4); }
  .ladder .numeral { position: static; font-size: clamp(72px, min(13vw, 20vh), 200px); line-height: 1; }
  .ladder .steps { position: relative; inset: auto; display: grid; }
  .ladder .step { position: relative; grid-area: 1 / 1; bottom: auto; }
}
/* Short desktop windows: the paragraphs no longer fit beside a pinned numeral */
@media (min-width: 761px) and (max-height: 600px) {
  .ladder { height: auto; }
  .ladder .stage { position: static; height: auto; grid-template-columns: minmax(0, 1fr); }
  .ladder .numeral, .ladder .rungs { display: none; }
  .ladder .steps { display: flex; flex-direction: column; gap: var(--space-6); }
  .ladder .step, .js .ladder .step { grid-area: auto; opacity: 1 !important; transform: none !important; }
}

/* Conclusion and topic list */
.topics { padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(60px, 10vh, 120px); display: flex; flex-direction: column; gap: var(--space-8); }
.topics .section-head { max-width: 820px; }
.topics .section-head h2 { font-size: clamp(40px, 5vw, 72px); }
.topics .section-head p { max-width: 60ch; }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.topic-list li { display: grid; grid-template-columns: minmax(28px, 64px) minmax(0, 1fr); align-items: baseline; gap: var(--space-4); }
.topic-list .dot { font-size: clamp(28px, 4vw, 56px); line-height: 1; color: var(--color-accent); }
.topic-list .body { display: block; }
.topic-list .title { display: block; font-size: clamp(28px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; margin-bottom: var(--space-3); }
.topic-list .title a { color: var(--color-text); transition: color .3s; }
.topic-list .title a:hover, .topic-list .title a:focus-visible { color: var(--color-accent-700); }
.topic-list .desc { display: block; max-width: 60ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--color-neutral-800); text-wrap: pretty; }

.closing { display: flex; flex-direction: column; gap: var(--space-6); padding-top: clamp(48px, 8vh, 96px); }
.closing .big { margin: 0; font-size: clamp(40px, 6.6vw, 112px); line-height: .96; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.closing .rest { margin: 0; max-width: 56ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; text-wrap: pretty; }

/* Hover preview that follows the pointer over the topic list (built by home.js) */
.preview {
  position: fixed; left: 0; top: 0; width: 300px; pointer-events: none; z-index: 60; opacity: 0;
  background: var(--color-text); color: var(--color-bg); padding: var(--space-4);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.preview .pk { font-size: 13px; color: var(--color-accent-300); }
.preview ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; }

/* Phones */
@media (max-width: 760px) {
  .home-hero .receipt, .home-hero .sheet, .home-hero .sku { display: none; }
  .home-hero .stamp { right: 8vw !important; width: 104px; height: 104px; font-size: 11px; }
  .home-hero .note { right: auto !important; left: 6vw; --top: 15vh !important; width: 150px; font-size: 15px; }
  .home-hero .ink { right: 6vw !important; --top: 38vh !important; font-size: 13px; max-width: 70vw; white-space: normal; }
  .home-hero h1 { font-size: clamp(48px, 17vw, 96px); }

  .ladder .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: var(--space-4); padding-top: 112px; padding-bottom: var(--space-4); }
  .ladder .side { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .ladder h2 { font-size: 44px; }
  .ladder .rungs { width: 110px; }
  .ladder .board { height: 100%; }
  .ladder .numeral { font-size: 84px; }
  .ladder .step { top: 110px; bottom: auto; font-size: 17px; line-height: 1.5; }

  .topic-list { gap: var(--space-6); }
  .topic-list li { grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2); }
  .topic-list .title { font-size: 27px; }
}

/* Short phones: the paragraphs no longer fit a pinned stage, so stack them */
@media (max-width: 760px) and (max-height: 720px) {
  .ladder { height: auto; }
  .ladder .stage { position: static; height: auto; padding-bottom: var(--space-8); }
  .ladder .board { height: auto; }
  .ladder .numeral, .ladder .rungs { display: none; }
  .ladder .steps { position: static; display: flex; flex-direction: column; gap: var(--space-6); }
  .ladder .step, .js .ladder .step { position: static; opacity: 1 !important; transform: none !important; }
}

/* Scripts off: un-pin and stack the introduction */
html:not(.js) .ladder { height: auto; }
html:not(.js) .ladder .stage { position: static; height: auto; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-8); }
html:not(.js) .ladder .board { height: auto; }
html:not(.js) .ladder .numeral, html:not(.js) .ladder .rungs, html:not(.js) .marquee { display: none; }
html:not(.js) .ladder .steps { position: static; display: flex; flex-direction: column; gap: var(--space-6); }
html:not(.js) .ladder .step { position: static; }