/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom "Vegas after dark" · design-system: DESIGN.md · designed-as-app */
/* pre-emit critique: P5 H5 E4 S5 R5 V4 · N6 masthead · Ft4 colophon · real captures only */
/* Shared marketing layout. Colors and faces are inherited from /tokens.css. */
* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-lg); }
body { padding-bottom: env(safe-area-inset-bottom); }
.wrap { max-width: calc(var(--page-max) + 2 * var(--page-gutter)); margin-inline: auto; padding-inline: var(--page-gutter); }
.skip { position: absolute; inset-inline-start: var(--space-md); top: -100%; padding: var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); z-index: var(--z-sticky); }
.skip:focus { top: var(--space-md); }
.mast { text-align: center; padding: var(--space-lg) var(--page-gutter) 0; }
.mast__line { max-width: none; margin: 0 0 var(--space-xs); color: var(--color-ink-2); font: var(--text-xs)/1.4 var(--font-mono); }
.mast__name { color: var(--color-ink); font: 700 clamp(2rem, 4vw, 3rem)/1 var(--font-display); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; }
.mast__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-md); padding: 0; margin: var(--space-xs) 0 0; list-style: none; }
.mast__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font: 600 var(--text-base)/1 var(--font-display); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.mast__nav a:hover, .mast__nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: .4em; }
.mast__rule { border: 0; border-top: var(--rule-hairline); border-bottom: 1px solid var(--color-accent); height: 5px; margin: var(--space-xs) 0 0; }
.hero { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.split { display: grid; gap: var(--space-xl); }
.hero__context { color: var(--color-ink-2); margin: 0 0 var(--space-lg); font-size: var(--text-sm); }
h1 { font-size: var(--text-display); max-width: 15ch; }
h1 span, .page-intro h1 span { color: var(--color-accent); }
h2 { font-size: var(--text-display-s); }
h3 { font-size: var(--text-xl); }
p { max-width: var(--measure); }
.lede, .section-lede { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; margin: var(--space-lg) 0; }
.hero__promise { max-width: 43ch; margin-bottom: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.hero__text > p:not(.hero__context) { max-width: 43ch; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-accent-deep); border-radius: var(--radius-sm); background: var(--color-accent-deep); color: var(--color-accent-ink); font: 600 var(--text-md)/1.2 var(--font-display); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out); }
.button:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.button:active { transform: translateY(1px); }
.text-link:active, .mast__nav a:active, .service-rows > a:active { opacity: .7; }
.button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.button--outline { color: var(--color-ink); background: transparent; border: var(--rule-strong); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-base); text-decoration-thickness: 1px; white-space: nowrap; }
.offer-sheet { align-self: start; background: var(--color-paper-2); padding: var(--space-lg); border: var(--rule-strong); }
.offer-sheet__label { margin: 0 0 var(--space-md); color: var(--color-ink-2); font: var(--text-xs)/1.4 var(--font-mono); }
.offer-sheet h2 { font-size: var(--text-xl); max-width: 20ch; }
.offer-sheet__price { display: flex; align-items: baseline; gap: var(--space-sm); margin: var(--space-md) 0; font: 700 var(--text-display)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.offer-sheet__price span { color: var(--color-ink-2); font: var(--text-sm)/1 var(--font-mono); }
.offer-sheet__monthly { margin: 0 0 var(--space-lg); font-size: var(--text-md); color: var(--color-ink); }
.offer-sheet__monthly strong { font: 600 var(--text-2xl)/1 var(--font-display); }
.offer-sheet__monthly > span { font: var(--text-xs)/1 var(--font-mono); color: var(--color-ink-2); }
.offer-sheet__list { margin: var(--space-lg) 0; padding-inline-start: var(--space-md); color: var(--color-ink-2); }
.offer-sheet__list li { margin-top: var(--space-sm); padding-inline-start: var(--space-2xs); }
.offer-sheet__list li::marker { color: var(--color-accent); }
.offer-sheet .button { width: 100%; }
.fine-print { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.55; }
.operator-strip { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); border-block: var(--rule-hairline); }
.operator-strip p { margin: 0; color: var(--color-ink-2); }
.operator-strip strong { display: block; color: var(--color-ink); font: 600 var(--text-2xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.operator-strip span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); }
.section { margin-top: var(--space-2xl); }
.section-lede { max-width: 52ch; }
.repair-list { margin: var(--space-xl) 0 0; }
.repair-list > div { padding-block: var(--space-lg); border-top: var(--rule-hairline); }
.repair-list dt { font: 600 var(--text-xl)/1.2 var(--font-display); }
.repair-list dd { margin: var(--space-sm) 0 0; max-width: 58ch; color: var(--color-ink-2); }
.proof-feature { align-items: center; }
.capture { margin: 0; min-width: 0; }
.capture img { width: 100%; height: auto; border: var(--rule-hairline); }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.service-rows { margin-top: var(--space-xl); }
.service-rows > a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); border-top: var(--rule-hairline); padding-block: var(--space-lg); color: var(--color-ink); text-decoration: none; }
.service-rows > a:hover strong { color: var(--color-accent); }
.service-rows strong { display: block; font: 600 var(--text-xl)/1.15 var(--font-display); }
.service-rows small { display: block; color: var(--color-ink-2); margin-top: var(--space-xs); font-size: var(--text-base); }
.service-rows__price { font: var(--text-sm)/1.5 var(--font-mono); white-space: nowrap; }
.service-rows__price > span { padding-inline-start: var(--space-md); color: var(--color-accent); }
.faq__items { margin-top: var(--space-xl); max-width: 54rem; }
.faq details { border-top: var(--rule-hairline); }
.faq details:last-child { border-bottom: var(--rule-hairline); }
.faq summary { padding: var(--space-lg) var(--space-xs); font-weight: 600; cursor: pointer; }
.faq summary::marker { color: var(--color-accent); }
.faq details[open] summary { color: var(--color-accent); }
.faq details p { margin: 0; padding: 0 var(--space-xs) var(--space-lg); color: var(--color-ink-2); }
.contact { display: grid; gap: var(--space-xl); padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); }
.contact__address { margin: var(--space-lg) 0 0; }
.contact__address a { overflow-wrap: anywhere; }
.contact__send ul { padding-inline-start: var(--space-md); color: var(--color-ink-2); }
.contact__send li { padding-block: var(--space-2xs); }
.lab-note { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: center; justify-content: space-between; margin-block: var(--space-xl); }
.lab-note p { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.colophon { padding-block: var(--space-xl) var(--space-2xl); margin-top: var(--space-xl); border-top: var(--rule-hairline); color: var(--color-ink-2); font: var(--text-sm)/1.7 var(--font-mono); }
.colophon p { margin: 0; }
.colophon nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-block: var(--space-sm); }
.colophon nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.colophon__small { font-size: var(--text-xs); }
.page-intro { padding-top: var(--space-xl); }
.page-intro h1 { max-width: 19ch; }
.page-intro .lede { max-width: 48ch; }
.jump-links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.jump-links a { display: inline-flex; min-height: 44px; align-items: center; white-space: nowrap; }
.case { border-top: var(--rule-hairline); padding-top: var(--space-xl); }
.case__type { font: var(--text-sm)/1.4 var(--font-mono); color: var(--color-ink-2); }
.case__headline { font-size: var(--text-md); margin-block: var(--space-md) var(--space-xl); }
.case__notes { margin: 0; }
.case__notes > div + div { margin-top: var(--space-lg); }
.case__notes dt { font-weight: 600; }
.case__notes dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }
.case > .text-link { margin-top: var(--space-lg); }
.narrow { max-width: 52rem; }
.steps { display: grid; gap: var(--space-xl); padding-inline-start: var(--space-lg); margin-top: var(--space-xl); }
.steps li { padding-inline-start: var(--space-xs); }
.steps li::marker { color: var(--color-accent); font-family: var(--font-mono); }
.steps p { color: var(--color-ink-2); }
.lab-game { display: grid; gap: var(--space-xl); border-top: var(--rule-hairline); padding-top: var(--space-xl); }
.lab-game .button { margin-top: var(--space-lg); }
.phone-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 29rem; }
.phone-shots figure { margin: 0; }
.phone-shots img { width: 100%; border: var(--rule-hairline); }
@media (min-width: 40rem) {
  .mast__nav ul { gap: var(--space-xs) var(--space-xl); }
  .mast__nav a { font-size: var(--text-md); }
  .operator-strip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
  .repair-list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-xl); }
  .repair-list dd { margin: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
  .lab-game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 60rem) {
  .hero__quick { display: none; }
  .hero { padding-block: var(--space-2xl); }
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
  .hero > .offer-sheet { margin-top: var(--space-xs); }
  .offer-sheet { padding: var(--space-xl); }
  .hero__text h1 { font-size: clamp(3.2rem, 4.8vw, 4.5rem); }
  .section { margin-top: var(--space-3xl); }
  .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); padding: var(--space-xl); }
  .contact__send { padding-top: var(--space-xs); }
  .page-intro { padding-top: var(--space-2xl); }
  .case__body { align-items: start; }
  .case:nth-of-type(odd) .capture { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .button, .button:hover, .button:active { transition: none; transform: none; } }