/* Pizzaverse — tasteskill v2 ("Sera a Trastevere" Editorial System)
   Direction: nocturnal-chapters
   Type: Self-hosted Hanken Grotesk 400 / 500 (strictly 5 type steps, CSP 'self' safe)
   Palette: Smoked Espresso (#160f0c), Sourdough Crema (#faf0df), Neutral Stone (#ffffff / #f4f3f1), Olive Sage (#dce3dc), Burnished Brass (#e5a94e) */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
}

:root {
  --bg: #f6f4f0;
  --surface: #ece8e1;
  --ink: #170f0a;
  --muted: #5e4c3e;
  --accent: #e8a23e;
  --accent-ink: #170f0a;

  --field-1: #19110d;
  --field-1-ink: #f6efe4;
  --field-2: #e5ddd2;
  --field-2-ink: #170f0a;
  --field-3: #e8a23e;
  --field-3-ink: #170f0a;
  --field-4: #241610;
  --field-4-ink: #f6efe4;

  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Strictly 5 type sizes across the entire site */
  --step-small: 0.9375rem;
  --step-body: 1.125rem;
  --step-lead: clamp(1.25rem, 1.1rem + 0.35vw, 1.375rem);
  --step-head: clamp(1.85rem, 1.3rem + 2.2vw, 3.125rem);
  --step-display: clamp(2.4rem, 1.3rem + 4.8vw, 5.5rem);

  --margin: clamp(1.125rem, 2.6vw, 2.5rem);
  --gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 720ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--step-body);
  line-height: 1.48;
  letter-spacing: -0.005em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
strong, b { font-weight: 500; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); border-radius: var(--radius); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--field-3); color: var(--ink); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.94;
  hyphens: none;
}
.display {
  font-size: var(--step-display);
  line-height: 0.9;
  letter-spacing: -0.048em;
}
.head {
  font-size: var(--step-head);
  line-height: 0.95;
  letter-spacing: -0.042em;
}
.lead {
  font-size: var(--step-lead);
  line-height: 1.38;
  max-width: 42ch;
}
.small {
  font-size: var(--step-small);
  line-height: 1.45;
}
.muted { color: var(--muted); }
.mt-sm { margin-top: 0.65rem; }
.mt-md { margin-top: 1rem; }
p { max-width: 58ch; text-wrap: pretty; }
p + p { margin-top: 0.85em; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Chapters & Grid ---------- */
.chapter {
  position: relative;
  width: 100%;
  padding-inline: var(--margin);
  padding-block: clamp(4.25rem, 7.5vw, 6.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.25rem);
}
.chapter-compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.chapter-orange { background: var(--field-1); color: var(--field-1-ink); }
.chapter-white { background: var(--bg); color: var(--ink); transition: background-color 320ms var(--ease-out); }
.chapter-white.is-ananas { background: var(--field-3); color: var(--field-3-ink); }
.chapter-sage { background: var(--field-2); color: var(--field-2-ink); }
.chapter-acid { background: var(--field-3); color: var(--field-3-ink); }
.chapter-surface { background: var(--surface); color: var(--ink); }
.chapter-black { background: var(--field-4); color: var(--field-4-ink); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
}

/* ---------- Top Navigation ---------- */
.site-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  font-size: var(--step-small);
  font-weight: 500;
}
.wordmark {
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.025em;
  font-size: var(--step-body);
}
.top-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  flex-wrap: wrap;
}
.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
  transition: text-decoration-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.link-plain {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
  font-weight: 500;
  transition: opacity var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .link-plain:hover { opacity: 0.72; }
}

/* ---------- Controls ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  font-size: var(--step-body);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.button-ink {
  background: var(--ink);
  color: var(--field-4-ink);
}
.chapter-orange .button-ink {
  background: var(--field-1-ink);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
  .button-ink:hover { background: #291c16; }
  .chapter-orange .button-ink:hover { background: var(--accent); color: var(--ink); }
  .button:not(.button-ink):hover { background: #f2be6b; color: var(--ink); }
}
.button:active { transform: scale(0.97); }

/* ---------- Hero Chapter (Fits cleanly inside 1440x900 fold) ---------- */
.hero-chapter {
  min-height: 92svh;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}
.hero-stage {
  align-items: center;
  flex: 1;
}
.hero-copy {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: clamp(1.35rem, 2.4vw, 2rem);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.hero-media {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}
.hero-media-single {
  grid-column: 8 / 13;
  display: flex;
  justify-content: flex-end;
}
.phone-frame {
  width: 100%;
  background: #241913;
  padding: 8px;
  overflow: hidden;
}
.hero-media-single .phone-frame {
  max-width: 340px;
}
.phone-frame-offset {
  margin-top: 1.75rem;
}
.phone-frame img {
  width: 100%;
  max-height: 64svh;
  aspect-ratio: 496 / 1080;
  object-fit: cover;
  object-position: top center;
}
.phone-caption {
  padding: 8px 4px 2px;
  color: var(--field-4-ink);
  font-size: var(--step-small);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ---------- Showcase: Live Kitchen Pass Control (data-ui) ---------- */
.showcase-chapter {
  overflow: hidden;
}
.showcase-head {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.showcase-shot {
  grid-column: 1 / 5;
  align-self: stretch;
}
.showcase-shot img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
}
.pass-rig {
  grid-column: 5 / 13;
  background: var(--ink);
  color: var(--field-4-ink);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.pass-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.pass-rate {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.042em;
  color: var(--field-3);
}
.pass-stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.station-btn {
  background: #251a14;
  color: var(--field-4-ink);
  padding: 1rem 1.15rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.station-btn.is-bottleneck {
  background: var(--accent);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .station-btn:hover { transform: translateY(-2px); }
}
.station-btn:active { transform: scale(0.98); }
.station-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
}
.station-name { font-weight: 500; font-size: var(--step-body); }
.station-lvl { font-size: var(--step-small); opacity: 0.88; }
.station-meter {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.station-btn.is-bottleneck .station-meter {
  background: rgba(0, 0, 0, 0.2);
}
.station-fill {
  height: 100%;
  background: var(--field-3);
  width: 45%;
  transition: width var(--t-ui) var(--ease-out);
}
.station-btn.is-bottleneck .station-fill {
  background: var(--ink);
}
.ananas-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ananas-toggle {
  background: var(--surface);
  color: var(--ink);
  padding: 0.85rem 1.35rem;
  font-weight: 500;
  font-size: var(--step-body);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.ananas-toggle[aria-pressed="true"] {
  background: var(--field-3);
  color: var(--ink);
}

/* ---------- List Chapter: Five Franchise Venues ---------- */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.venue-layout {
  align-items: stretch;
}
.venue-tabs {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.venue-tab {
  width: 100%;
  min-height: 64px;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.venue-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--field-4-ink);
}
.venue-tab-city { font-weight: 500; font-size: var(--step-body); }
.venue-tab-mult { font-size: var(--step-small); opacity: 0.82; }

.venue-bands {
  grid-column: 3 / 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.venue-band {
  min-height: 82px;
  padding: 1rem 1.25rem;
  background: var(--bg);
  color: var(--ink);
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.venue-band:nth-child(even) {
  background: var(--surface);
}
.band-metric {
  font-size: var(--step-lead);
  font-weight: 500;
}
.band-title {
  font-weight: 500;
  font-size: var(--step-body);
}
.band-note {
  font-size: var(--step-small);
  color: var(--muted);
}
.band-role {
  font-size: var(--step-small);
  font-weight: 500;
  text-align: right;
}
.venue-art {
  grid-column: 10 / 13;
}
.venue-art img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
}

/* ---------- Features Chapter: Asymmetric Mosaic of Unlike Tiles ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.tile {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 240px;
  overflow: hidden;
}
.tile-photo {
  padding: 0;
  min-height: 280px;
}
.tile-photo img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
}
.tile-white { background: var(--bg); color: var(--ink); }
.tile-surface { background: var(--surface); color: var(--ink); }
.tile-orange { background: var(--field-1); color: var(--field-1-ink); }
.tile-sage { background: var(--field-2); color: var(--field-2-ink); }
.tile-black { background: var(--field-4); color: var(--field-4-ink); }

.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-3 { grid-column: span 3; }

.tile-figure {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.042em;
}
.tile-statement {
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1.3;
  max-width: 30ch;
}
.tile-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--step-body);
  font-weight: 500;
}

/* ---------- Pricing Chapter: Two Plans, Two Fields ---------- */
.pricing-split {
  padding: 0;
  min-height: 82svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.plan-field {
  min-height: 82svh;
  padding: clamp(2.5rem, 4.5vw, 4rem) var(--margin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}
.plan-left {
  grid-column: 1 / 6;
  background: var(--field-1);
  color: var(--field-1-ink);
}
.plan-right {
  grid-column: 6 / 13;
  background: var(--field-3);
  color: var(--field-3-ink);
}
.plan-top {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.plan-who {
  font-size: var(--step-lead);
  max-width: 28ch;
}
.plan-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.plan-price {
  font-size: var(--step-display);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.048em;
}
.plan-period {
  font-size: var(--step-body);
  margin-left: 0.35rem;
}

/* ---------- FAQ Chapter: Filled-Tile Accordion ---------- */
.faq-heading-col {
  grid-column: 1 / 5;
}
.faq-sticky {
  position: sticky;
  top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-list-col {
  grid-column: 5 / 13;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-tile {
  background: var(--bg);
  color: var(--ink);
  transition: background-color var(--t-ui) var(--ease-out);
}
.faq-tile[open] {
  background: var(--accent);
  color: var(--accent-ink);
}
.faq-tile summary {
  list-style: none;
  min-height: 72px;
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--step-body);
}
.faq-tile summary::-webkit-details-marker { display: none; }
.faq-plus {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.faq-bar-h, .faq-bar-v {
  position: absolute;
  background: currentColor;
  transition: transform var(--t-ui) var(--ease-out);
}
.faq-bar-h {
  top: 6.5px;
  left: 0;
  width: 16px;
  height: 3px;
}
.faq-bar-v {
  top: 0;
  left: 6.5px;
  width: 3px;
  height: 16px;
}
.faq-tile[open] .faq-bar-v {
  transform: rotate(90deg);
}
.faq-answer {
  padding: 0 1.5rem 1.5rem;
  max-width: 52ch;
}

/* ---------- Footer Chapter: Contact as the Headline ---------- */
.footer-chapter {
  padding-block: clamp(3.5rem, 6.5vw, 5.5rem);
  gap: clamp(3rem, 6vw, 5rem);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-notes {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  font-size: var(--step-small);
}
.footer-contact-wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.footer-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-display);
  line-height: 0.9;
  letter-spacing: -0.048em;
  text-decoration: none;
  transition: color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-mail:hover { color: var(--field-3); }
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--step-small);
}
.footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ---------- Direct Web Shop Modules ---------- */
.status-banner {
  padding: 1.15rem 1.5rem;
  font-weight: 500;
}
.status-ok { background: var(--field-3); color: var(--ink); }
.status-warn { background: var(--field-4); color: var(--field-4-ink); }

.chef-id-panel {
  background: var(--surface);
  color: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 8px;
}
.chef-input-col {
  grid-column: 6 / 13;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.chef-head-col {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.chef-label { font-weight: 500; }
.chef-input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-size: var(--step-body);
  font-variant-numeric: tabular-nums;
}
.sku-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}
.sku-wide-7 { grid-column: span 7; }
.sku-wide-5 { grid-column: span 5; }
.sku-block {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.sku-art {
  padding: 0;
  overflow: hidden;
  min-height: 300px;
}
.sku-art img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
}
.sku-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.sku-price {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.042em;
}

.calc-grid {
  align-items: stretch;
}
.calc-box {
  grid-column: 1 / 8;
  background: var(--ink);
  color: var(--field-4-ink);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.calc-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.calc-tier-btn {
  background: #251a14;
  color: var(--field-4-ink);
  padding: 1rem 1.15rem;
  text-align: left;
  font-weight: 500;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.calc-tier-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--ink);
}
.calc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.calc-num {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 0.95;
  color: var(--field-3);
}
.calc-side {
  grid-column: 8 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.calc-side img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
}

/* ---------- Legal / Support Subpages ---------- */
.doc-body {
  grid-column: 5 / 12;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.doc-head-col {
  grid-column: 1 / 5;
}

/* ---------- Motion Layer (CSP-clean, never leaves images blank) ---------- */
.lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.lines [data-line] { display: block; }
.drift-wrap { overflow: hidden; }
.drift-wrap img {
  transform: translate3d(0, var(--drift-y, 0px), 0) scale(1.04);
  transition: transform 220ms linear;
  will-change: transform;
}

.d-1 { --d: 1; }
.d-2 { --d: 2; }
.d-3 { --d: 3; }
.i-1 { --i: 1; }
.i-2 { --i: 2; }
.i-3 { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(18px);
    animation: pv-rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 85ms + 90ms);
  }
  .js .lines [data-line] {
    transform: translateY(108%);
    animation: pv-line 820ms var(--ease-expo) forwards;
    animation-delay: calc(var(--i, 0) * 105ms + 80ms);
  }
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 70ms);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}
@keyframes pv-rise { to { opacity: 1; transform: none; } }
@keyframes pv-line { to { transform: none; } }

/* ---------- Responsive: Tablet & Phone ---------- */
@media (max-width: 64em) {
  .hero-copy { grid-column: 1 / 7; }
  .hero-media { grid-column: 7 / 13; }
  .hero-media-single { grid-column: 7 / 13; }
  .showcase-head { grid-column: 1 / 13; }
  .showcase-shot { grid-column: 1 / 5; }
  .pass-rig { grid-column: 5 / 13; }
  .venue-tabs { grid-column: 1 / 4; }
  .venue-bands { grid-column: 4 / 13; }
  .venue-art { grid-column: 1 / 13; }
  .venue-art img { max-height: 280px; }
  .span-7, .span-8 { grid-column: span 7; }
  .span-5, .span-4 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-3 { grid-column: span 6; }
  .plan-left { grid-column: 1 / 7; }
  .plan-right { grid-column: 7 / 13; }
  .chef-head-col, .chef-input-col { grid-column: 1 / 13; }
  .calc-box, .calc-side { grid-column: 1 / 13; }
}

@media (max-width: 47.99em) {
  .chapter { padding-block: 3.25rem; }
  .hero-chapter { min-height: auto; padding-bottom: 3rem; }
  .hero-copy, .hero-media, .hero-media-single { grid-column: 1 / 13; }
  .hero-media-single { justify-content: flex-start; }
  .phone-frame-offset { margin-top: 0; }
  .phone-frame img { max-height: 440px; }

  .showcase-shot, .pass-rig { grid-column: 1 / 13; }
  .pass-stations { grid-template-columns: 1fr; }

  .venue-tabs {
    grid-column: 1 / 13;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .venue-tab {
    flex: 1 1 calc(50% - 6px);
    min-height: 58px;
  }
  .venue-bands { grid-column: 1 / 13; }
  .venue-band {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .band-role { text-align: left; }

  .mosaic {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .span-7, .span-5, .span-4, .span-8, .span-6, .span-3 { grid-column: 1 / -1; }
  .tile { min-height: auto; }
  .tile-photo { min-height: 240px; }

  .pricing-split { display: flex; flex-direction: column; min-height: auto; }
  .plan-field { min-height: auto; width: 100%; padding-block: 3rem; }
  .plan-bottom .button { width: 100%; }

  .faq-heading-col, .faq-list-col, .doc-head-col, .doc-body { grid-column: 1 / 13; }
  .faq-sticky { position: static; }

  .sku-wide-7, .sku-wide-5 { grid-column: 1 / 13; }
  .calc-tiers, .calc-stats { grid-template-columns: 1fr; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
}