/* =====================================================================
   Inner pages: page hero (photo, breadcrumbs, h1, lede, CTAs), article
   with a sticky paper price card, prose, bands, demos grid, legal pages.
   Stacked pages (no stage): sections reveal with data-rise / data-light.
   ===================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  min-height: 68svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-offset) + 2rem) var(--sec-y);
}
.page-hero--short { min-height: 0; padding-bottom: var(--sp-8); }
.page-hero .hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-bg); }
.page-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.04); }
html.js:not(.rm) .page-hero .hero-bg img { animation: page-drift var(--kb-dur) cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes page-drift { from { transform: scale(1.1); } to { transform: scale(1.03); } }
.page-hero .hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 16, 13, 0.98) 0%, rgba(20, 16, 13, 0.8) 40%, rgba(20, 16, 13, 0.45) 100%);
}
.page-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-width: 58rem; }
.page-hero-inner .sub { max-width: 40em; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-fg-3); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); opacity: 0.6; }
.crumbs a { color: var(--c-fg-2); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.crumbs li { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- Article + side card ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.side { position: sticky; top: var(--nav-offset); display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--card-pad-lg) var(--card-pad); }
.side-price { font-family: var(--font-serif); font-variation-settings: "opsz" 144; font-size: var(--fs-5xl); line-height: 1; letter-spacing: -0.02em; }
.side-price small { font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: 0; color: var(--c-ink-2); margin-left: 0.4em; }
.side p { color: var(--c-ink-2); text-wrap: pretty; }
.side .btn { width: 100%; }
.side-fine { font-size: var(--fs-xs); color: var(--c-ink-3); }

.prose { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 66ch; font-size: var(--fs-lg); }
.prose h2 {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 96;
  font-size: var(--fs-4xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-top: var(--sp-8);
  text-wrap: balance;
}
.prose h3 { font-family: var(--font-serif); font-variation-settings: "opsz" 48; font-size: var(--fs-2xl); line-height: 1.2; margin-top: var(--sp-4); }
.prose p, .prose li { color: var(--c-fg-2); text-wrap: pretty; }
.prose strong { color: var(--c-fg); font-weight: var(--fw-medium); }
.prose .answer { font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--c-fg); padding-left: var(--sp-5); border-left: 2px solid var(--c-brass); }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--c-brass); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.8em 0.6em 0.8em 0; border-bottom: 1px solid var(--c-hair); }
.prose th { font-weight: var(--fw-medium); color: var(--c-fg); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.prose td:first-child { color: var(--c-fg); font-weight: var(--fw-medium); white-space: nowrap; }
.prose td { color: var(--c-fg-2); }
.prose .faq { margin-top: var(--sp-2); }
.prose .cta-row { margin-top: var(--sp-4); }

/* Live menu sample */
.lm { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--card-pad-lg) var(--card-pad); }
.lm-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.lm-tab { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-hair-ink); background: none; color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.lm-tab[aria-selected="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.lm-panel { display: none; }
.lm-panel.on { display: block; }
html.no-js .lm-panel { display: block; }
.lm-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.lm-panel li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 0.75em 0; border-bottom: 1px dotted var(--c-hair-ink); font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--c-ink); }
.lm-panel li span:last-child { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-ink-3); white-space: nowrap; }
.lm-foot { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- Band: photo + CTA ---------- */
.band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.band--flip .band-img { order: 2; }
.band-img { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.8); }
.band-img img { width: 100%; height: 100%; object-fit: cover; }
.band-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.band-copy p { color: var(--c-fg-2); max-width: 36em; text-wrap: pretty; }

/* ---------- Demos page ---------- */
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.demo-grid .shot { display: flex; flex-direction: column; overflow: hidden; }
.demo-grid .shot-frame { display: block; margin: var(--card-pad) var(--card-pad) 0; padding: 10px; border-radius: 28px; background: #0d0a08; border: 1px solid rgba(244, 236, 223, 0.12); aspect-ratio: 390 / 560; overflow: hidden; max-width: 17rem; width: 100%; align-self: center; }
.demo-grid .shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 20px; }
.demo-grid .shot-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--card-pad); }
.demo-grid .shot-body p:not(.tag) { color: var(--c-fg-2); }

/* ---------- Legal and 404 ---------- */
.legal .prose { max-width: 70ch; }
.lost { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-5); padding-top: var(--nav-offset); }

/* ---------- Phone ---------- */
@media (max-width: 1023px) {
  .cols { grid-template-columns: 1fr; }
  .side { position: static; }
  .band { grid-template-columns: 1fr; }
  .band--flip .band-img { order: 0; }
  .demo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .page-hero { min-height: 60svh; }
  .page-hero-inner .cta-row .btn { width: 100%; }
  .prose { font-size: var(--fs-base); }
  .prose td:first-child { white-space: normal; }
  .prose table, .prose tbody, .prose tr { display: block; }
  .prose thead { display: none; }
  .prose td { display: block; padding: 0.2em 0; border: 0; }
  .prose tr { padding: 0.8em 0; border-bottom: 1px solid var(--c-hair); }
  .demo-grid { grid-template-columns: 1fr; }
  .band-img { aspect-ratio: 16 / 10; }
}

/* =====================================================================
   Clean inner pages (DFW restaurants, restaurant websites), 2026-10-19.
   No photos. Text anchored left, edge to edge with the site's small
   desktop gutters. Each section: a numbered heading on the left, short
   copy on the right, hairline between sections. Ends on one CTA card.
   ===================================================================== */
.pg-hero { padding-block: calc(var(--nav-offset) + clamp(2rem, 7vh, 5rem)) var(--sec-y); }
.pg-hero-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.pg-h1 { font-size: var(--fs-7xl); max-width: 15em; }
.pg-hero .sub { max-width: 36em; }
.pg-hero .cta-row { margin-top: var(--sp-2); }
.pg-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); width: 100%; margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--c-hair); font-size: var(--fs-sm); color: var(--c-fg-2); }
.pg-facts li { display: inline-flex; align-items: center; gap: 0.55em; }
.pg-facts .ic, .pg-checks .ic { color: var(--c-brass); }

.pg-sec { padding-block: calc(var(--sec-y) / 2); }
.pg-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-6) clamp(2rem, 5vw, 6rem);
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
  border-top: 1px solid var(--c-hair);
}
.pg-head { display: flex; flex-direction: column; gap: var(--sp-3); align-self: start; }
.pg-n { font-size: var(--fs-sm); color: var(--c-brass); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.pg-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-head);
  font-variation-settings: "opsz" 96;
  font-size: var(--fs-4xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--c-fg);
  max-width: 13em;
}
.pg-h3 { font-family: var(--font-serif); font-weight: var(--fw-head); font-variation-settings: "opsz" 48; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-fg); }
.pg-body { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.pg-lede { font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--c-fg); max-width: 34em; text-wrap: pretty; }
.pg-text { font-size: var(--fs-lg); color: var(--c-fg-2); max-width: 62ch; text-wrap: pretty; }
.pg-text--fine { font-size: var(--fs-base); color: var(--c-fg-3); }
.pg-body a:not(.btn) { color: var(--c-fg); text-decoration: underline; text-decoration-color: var(--c-brass-dim); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.pg-body a:not(.btn):hover { text-decoration-color: var(--c-brass); }

/* Feature grid: 2 across (3 for --3), hairline over each item */
.pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) clamp(1.5rem, 3vw, 3rem); }
.pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--c-hair); }
.pg-item .chip { width: 42px; height: 42px; margin-bottom: var(--sp-1); }
.pg-item p, .pg-step p, .pg-defs p { color: var(--c-fg-2); max-width: 42ch; text-wrap: pretty; }

/* Steps */
.pg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8) clamp(1.25rem, 2.5vw, 2.5rem); counter-reset: none; }
.pg-step { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--c-brass-dim); }
.pg-step-n { font-family: var(--font-serif); font-variation-settings: "opsz" 144; font-size: var(--fs-5xl); line-height: 1; color: var(--c-brass); }

/* Service area */
.pg-cities { columns: 4 10rem; column-gap: clamp(1.5rem, 3vw, 3rem); }
.pg-cities li { break-inside: avoid; padding: 0.7em 0; border-bottom: 1px solid var(--c-hair); font-size: var(--fs-lg); color: var(--c-fg); }

/* Menu styles + live sample */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8) clamp(2rem, 4vw, 4rem); align-items: start; }
.pg-defs { display: flex; flex-direction: column; gap: var(--sp-6); }
.pg-defs li { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--c-hair); }
.pg-split .lm { margin: 0; }

/* Checklist */
.pg-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.pg-checks li { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.85em 0; border-bottom: 1px solid var(--c-hair); font-size: var(--fs-lg); color: var(--c-fg); text-wrap: pretty; }
.pg-checks .ic { margin-top: 0.3em; }

/* Terms */
.pg-terms { display: flex; flex-direction: column; max-width: 52rem; }
.pg-terms > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-4); padding: 0.9em 0; border-bottom: 1px solid var(--c-hair); }
.pg-terms dt { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-fg-3); padding-top: 0.2em; }
.pg-terms dd { font-size: var(--fs-lg); color: var(--c-fg); }

/* FAQ inside a row */
.pg-body .faq { max-width: 60rem; }

/* CTA card */
.pg-cta { padding-bottom: clamp(4rem, 8vw, 7rem); }
.pg-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8) clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding: clamp(2rem, 4.5vw, 4.5rem);
}
.pg-cta-copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.pg-cta-card .pg-h2 { color: var(--c-ink); font-size: var(--fs-5xl); max-width: 14em; }
.pg-cta-copy p { color: var(--c-ink-2); font-size: var(--fs-lg); max-width: 40em; text-wrap: pretty; }
.pg-cta-copy .pg-cta-fine { font-size: var(--fs-sm); color: var(--c-ink-3); }
.pg-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); min-width: 16rem; }

@media (max-width: 1279px) {
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .pg-row { grid-template-columns: 1fr; }
  .pg-split { grid-template-columns: 1fr; }
  .pg-cta-card { grid-template-columns: 1fr; align-items: start; }
  .pg-cta-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 768px) {
  .pg-h1 { font-size: var(--fs-6xl); }
  .pg-hero .cta-row .btn { width: 100%; }
  .pg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
  .pg-grid, .pg-grid--3, .pg-steps, .pg-checks { grid-template-columns: 1fr; }
  .pg-cities { columns: 2; }
  .pg-cities li { font-size: var(--fs-base); }
  .pg-terms > div { grid-template-columns: 1fr; gap: var(--sp-1); }
  .pg-cta-actions { flex-direction: column; align-items: stretch; }
  .pg-cta-actions .btn { width: 100%; }
}