/* The marketing page. Every value comes from tokens.css (design/tokens.json). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: var(--body);
}
img, svg { display: block; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
a { color: var(--hibiscus-text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 720px) { .wrap { padding: 0 var(--space-8); } }

.skip { position: absolute; left: var(--space-4); top: -100px; padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--ink); border-radius: var(--radius-pill); z-index: 1; }
.skip:focus { top: var(--space-4); }

.overline { font: var(--overline); letter-spacing: var(--overline-tracking); text-transform: uppercase; color: var(--hibiscus-text); }

/* Buttons: the one loud colour on the primary action only. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-control); padding: 0 var(--space-6); border-radius: var(--radius-pill); font: var(--label); text-decoration: none; transition: transform 120ms ease-out, background-color 120ms; }
.button:active { transform: scale(0.98); }
.button-primary { background: var(--hibiscus); color: var(--on-hibiscus); }
.button-primary:hover { background: var(--hibiscus-pressed); }
.button-quiet { color: var(--hibiscus-text); padding: 0 var(--space-3); min-height: var(--size-hit); }
.button-quiet:hover { background: var(--hibiscus-soft); }
.button-on-night { color: var(--on-night); box-shadow: inset 0 0 0 1.5px var(--on-night); }
.button-on-night:hover { background: rgba(255, 245, 234, 0.12); }

/* Header */
.top { padding: var(--space-4) 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { color: var(--ink); display: inline-flex; }

/* Hero: the night band with the setting sun. */
.hero { background: var(--night); color: var(--on-night); overflow: hidden; }
.hero-text { padding-top: var(--space-16); padding-bottom: var(--space-12); display: grid; gap: var(--space-5); }
.hero h1 { font: var(--display-xl); letter-spacing: var(--display-xl-tracking); max-width: 14ch; }
@media (min-width: 720px) { .hero h1 { font: var(--display-hero); letter-spacing: var(--display-hero-tracking); } }
.lede { font-size: 18px; line-height: 27px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.sunset { width: 100%; height: 160px; }
@media (min-width: 720px) { .sunset { height: 220px; } }

/* Sections */
.section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section h2 { font: var(--display-lg); letter-spacing: var(--display-lg-tracking); margin-top: var(--space-2); max-width: 22ch; }
.section p + p { margin-top: var(--space-4); }

.steps { list-style: none; padding: 0; margin-top: var(--space-8); display: grid; gap: var(--space-4); }
@media (min-width: 840px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.card h3 { font: var(--display-md); }
.card p { color: var(--ink-muted); }
.step { width: 36px; height: 36px; border-radius: 50%; background: var(--mango); color: var(--on-mango); font: var(--label); display: grid; place-items: center; font-variant-numeric: tabular-nums; }

/* Offline, with the ticket */
.offline { background: var(--surface); }
.split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 840px) { .split { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); } }
.offline p:not(.overline) { margin-top: var(--space-4); color: var(--ink-muted); max-width: 34em; }

.ticket { display: grid; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-lifted); position: relative; }
@media (min-width: 520px) { .ticket { grid-template-columns: 1fr 180px; } }
.ticket-main { padding: var(--space-6); display: grid; gap: var(--space-2); }
.ticket .ticket-eyebrow, .ticket-main p { margin: 0; }
.ticket-title { font: var(--display-md); color: var(--ink); }
.ticket-time { font: var(--numeral); color: var(--ink); font-variant-numeric: tabular-nums; }
.ticket-time span, .ticket-where { font: var(--caption); color: var(--ink-muted); }
.ticket-stub { background: var(--night); color: var(--on-night); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: center; border-top: 2px dashed var(--line-strong); }
@media (min-width: 520px) { .ticket-stub { border-top: 0; border-left: 2px dashed var(--line-strong); } }
.ticket-stub .overline { color: var(--on-night); margin: 0; }
.ticket-code { font: var(--code); font-size: 24px; line-height: 30px; letter-spacing: 0.1em; margin: 0; }
.offline .ticket-stub p, .offline .ticket-main p { color: inherit; margin-top: 0; max-width: none; }
.offline .ticket-time span, .offline .ticket-where { color: var(--ink-muted); }

.points { list-style: none; padding: 0; margin-top: var(--space-8); display: grid; gap: var(--space-5); max-width: 44em; }
.points li { padding-left: var(--space-6); position: relative; color: var(--ink-muted); }
.points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--mango); }
.points strong { color: var(--ink); font-weight: 600; }
.cta { margin-top: var(--space-8); }

/* Footer: night, with the cream wordmark. */
.footer { background: var(--night); color: var(--on-night); padding: var(--space-8) 0; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); font: var(--caption); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:active { transform: none; }
}