:root {
  --navy: #131c29;
  --navy-light: #1d2b3f;
  --wine: #6e1b26;
  --wine-dark: #3a1015;
  --paper: #faf6f0;
  --paper-light: #fffdf9;
  --gold: #e8963b;
  --gold-light: #f5c377;
  --ink: #3a1015;
  --muted: #7a6a5d;
  --line: #e3d6c6;
  --green: #2e7d5b;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); }
body { margin: 0; min-height: 100%; font-family: "Outfit", system-ui, sans-serif; color: var(--ink); background: radial-gradient(120% 80% at 50% 0%, #24344b 0%, var(--navy) 60%); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; position: relative; overflow: hidden; background: var(--paper); box-shadow: 0 0 70px rgba(0,0,0,.34); }
.screen { display: none; min-height: 100dvh; animation: fade-in .3s ease both; }
.screen.is-active { display: flex; }
.screen--hero { position: relative; color: #fffdf9; background: #2a1218; }
.hero-bg, .hero-shade { position: absolute; inset: 0; }
.hero-bg { background: url("/assets/train-station.webp") center/cover no-repeat; transform: scale(1.02); }
.hero-shade { background: linear-gradient(180deg, rgba(29,43,63,.78), rgba(42,18,24,.62) 44%, rgba(58,16,21,.97)); }
.hero-content { position: relative; min-height: 100dvh; width: 100%; padding: max(38px, env(safe-area-inset-top)) 26px max(34px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; }
.hero-logo { width: 180px; height: auto; filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(-8deg); }
.hero-copy { margin: auto 0; }
.hero-copy h1 { margin: 18px 0 16px; max-width: 350px; font: 700 clamp(2.55rem, 11vw, 3.25rem)/1.01 "Playfair Display", serif; text-shadow: 0 3px 24px rgba(0,0,0,.4); text-wrap: balance; }
.hero-copy > p:last-child { margin: 0; max-width: 320px; color: rgba(255,253,249,.82); font-size: 1rem; line-height: 1.55; }
.eyebrow { margin: 0; color: var(--gold); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
.eyebrow--gold { display: flex; align-items: center; gap: 10px; }
.eyebrow--gold span { width: 26px; height: 1px; background: currentColor; }
.hero-actions { display: grid; gap: 13px; }
.micro-row { display: flex; align-items: center; justify-content: space-between; color: rgba(255,253,249,.62); font-size: .75rem; }
.micro-row img { height: 14px; filter: brightness(0) invert(1); opacity: .9; }
.button { border: 0; border-radius: 4px; padding: 17px 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; font-weight: 700; transition: transform .18s ease, background .18s ease, opacity .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid rgba(232,150,59,.45); outline-offset: 2px; }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.button--gold { background: var(--gold); color: var(--wine-dark); box-shadow: 0 14px 30px rgba(232,150,59,.22); }
.button--gold:hover { background: var(--gold-light); }
.button--wine { background: var(--wine); color: #fffdf9; }
.button--wine:hover { background: #4e1219; }
.button--outline { border: 1px solid var(--wine); background: transparent; color: var(--wine); padding: 12px 14px; font-size: .74rem; }
.button--ghost { border:1px solid rgba(255,253,249,.5); background:rgba(255,255,255,.04); color:#fffdf9; padding:13px 18px; }
.button--full { width: 100%; }
.screen--paper { padding: max(34px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom)); flex-direction: column; gap: 20px; background: var(--paper); }
.screen-header { display: flex; align-items: center; justify-content: space-between; color: #a9885f; text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; font-weight: 600; }
.text-button { padding: 0; border: 0; background: none; cursor: pointer; color: var(--wine); text-transform: none; letter-spacing: 0; font-weight: 600; }
.text-button--static { cursor: default; }
.section-heading { display: grid; gap: 6px; }
.section-heading h2 { margin: 0; max-width: 370px; color: #4e1219; font: 700 2.1rem/1.08 "Playfair Display", serif; text-wrap: balance; }
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.5; }
#checkin-form { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field > span, .instagram-box strong { color: var(--wine); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
.field input { width: 100%; border: 1px solid var(--line); border-bottom: 2px solid var(--wine); border-radius: 3px; padding: 14px; background: var(--paper-light); color: var(--ink); font-size: 1rem; }
.field small, .instagram-box small, .privacy-box small { color: #a51d2d; min-height: 0; font-size: .75rem; }
.field.has-error input { border-color: #a51d2d; }
.instagram-box, .privacy-box { border: 1px solid var(--line); border-radius: 5px; background: var(--paper-light); padding: 15px; }
.instagram-box { display: grid; gap: 12px; }
.instagram-box > div:first-child { display: grid; gap: 4px; }
.instagram-box > div span { color: var(--muted); font-size: .8rem; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: #5f5246; font-size: .8rem; line-height: 1.4; cursor: pointer; }
.check-row input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--wine); }
.privacy-box { padding: 0; overflow: hidden; }
.privacy-box summary { padding: 15px; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; color: var(--wine); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.privacy-box summary::-webkit-details-marker { display: none; }
.privacy-box summary span { letter-spacing: 0; text-transform: none; }
.privacy-copy { border-top: 1px solid #efe6d9; border-bottom: 1px solid #efe6d9; padding: 12px 15px; background: #fdf9f2; color: #5f5246; font-size: .78rem; line-height: 1.5; }
.privacy-copy p { margin: 0 0 8px; }
.privacy-copy p:last-child { margin-bottom: 0; }
.privacy-box > .check-row { padding: 14px 15px; }
.privacy-box > small { display: block; padding: 0 15px 10px; }
.form-message { display: none; padding: 12px 14px; border-radius: 4px; color: #7f1424; background: #fde8e8; font-size: .82rem; line-height: 1.4; }
.form-message.is-visible { display: block; }
.access-form { display:grid; gap:15px; margin-top:6px; }
.access-form[hidden] { display:none; }
.access-sent { padding:13px 14px; border-left:3px solid var(--green); background:#e7f4ed; color:#205d45; font-size:.83rem; line-height:1.4; }
.access-form input[name="code"] { text-align:center; font-size:1.5rem; letter-spacing:.28em; font-weight:700; font-variant-numeric:tabular-nums; }
.access-again { justify-self:center; padding:8px; }
.company-list { display: grid; gap: 11px; }
.company-card { position: relative; display: grid; grid-template-columns: auto 54px minmax(0,1fr); align-items: start; gap: 13px; padding: 16px 20px; border: 1px solid #d8c7b2; border-radius: 2px; background: #f9f0df; background-image: repeating-linear-gradient(45deg,rgba(140,107,63,.035) 0 2px,transparent 2px 6px); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.company-card::before,.company-card::after { content:""; position:absolute; top:50%; width:13px; height:13px; margin-top:-7px; border-radius:50%; background:var(--paper); border:1px solid #d8c7b2; }
.company-card::before { left:-8px; }.company-card::after { right:-8px; }
.company-card:hover { transform: translateY(-1px); }
.company-card.is-selected { border-color: var(--wine); box-shadow: 0 0 0 1px var(--wine), 0 10px 24px rgba(78,18,25,.08); }
.company-card.is-unavailable { cursor: not-allowed; opacity: .58; }
.company-card input { margin: 3px 0 0; width: 19px; height: 19px; accent-color: var(--wine); }
.company-choice { display:contents; cursor:pointer; }
.company-logo { width:54px; height:54px; border:1px solid rgba(140,107,63,.35); border-radius:8px; background:#fffdf9; object-fit:contain; }
.company-logo--fallback { display:grid; place-items:center; color:var(--wine); font:700 1.45rem "Playfair Display",serif; }
.company-copy { display: grid; gap: 4px; min-width: 0; }
.company-category { color: #a9885f; font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }
.company-name { color: var(--ink); font-size: 1rem; font-weight: 600; }
.company-instagram { grid-column:3; justify-self:start; margin-top:2px; color:#7c5d40; font-size:.76rem; font-weight:600; text-decoration:none; }
.company-instagram:hover,.company-instagram:focus-visible { color:var(--wine); text-decoration:underline; }
.company-offer { color: var(--wine); font: 700 1.15rem/1.2 "Playfair Display", serif; }
.company-details { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.company-stock { margin-top: 3px; color: var(--green); font-size: .69rem; font-weight: 600; }
.company-card.is-unavailable .company-stock { color: #8b1e2b; }
.sticky-action { position: sticky; bottom: -1px; padding: 16px 0 0; background: linear-gradient(transparent, var(--paper) 22%); }
.screen--final { padding: max(36px, env(safe-area-inset-top)) 20px max(34px, env(safe-area-inset-bottom)); flex-direction: column; background: linear-gradient(180deg, #241521, var(--navy)); color: #fffdf9; }
.final-wrap { width: 100%; display: grid; gap: 22px; margin: auto 0; }
.ticket { position: relative; padding: 25px 22px 20px; color: var(--ink); background: #f7eedd; background-image: repeating-linear-gradient(45deg, rgba(140,107,63,.05) 0 2px, transparent 2px 6px); box-shadow: 0 25px 48px rgba(0,0,0,.42); }
.ticket::before,.ticket::after { content:""; position:absolute; z-index:2; top:63%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:#211622; }
.ticket::before { left:-10px; }.ticket::after { right:-10px; }
.ticket-border { position: absolute; inset: 5px; border: 1px solid rgba(140,107,63,.6); pointer-events: none; }
.ticket-small { position: relative; margin: 0; color: #a9885f; font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; text-align: center; font-weight: 700; }
.ticket h2 { position: relative; margin: 5px 0 12px; color: var(--wine); text-align: center; font: 800 1.7rem/1.05 "Playfair Display", serif; text-transform: uppercase; }
.ticket-rule { position: relative; height: 5px; margin-bottom: 16px; background: repeating-linear-gradient(90deg, var(--wine) 0 3px, transparent 3px 7px); opacity: .5; }
.ticket-route { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:15px; padding-bottom:14px; border-bottom:1px dashed #a9885f; }
.ticket-route div { display:grid; gap:2px; }.ticket-route div:last-child { text-align:right; }
.ticket-route span { color:#a9885f; font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.ticket-route strong { font-size:.69rem; line-height:1.2; }.ticket-route b { color:var(--wine); font-size:1.1rem; }
.ticket-label, .ticket-grid span, .ticket-code span { position: relative; display: block; margin: 0 0 3px; color: #a9885f; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.ticket-name { position: relative; display: block; padding-bottom: 8px; border-bottom: 1px dotted #a9885f; font: 700 1.45rem "Playfair Display", serif; }
.ticket-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 15px 0; }
.ticket-grid strong { display: block; font-size: .83rem; line-height: 1.25; }
.ticket-code { position: relative; border: 1px dashed var(--wine); padding: 13px; text-align: center; background: rgba(255,253,249,.42); }
.ticket-code strong { color: var(--wine); font-size: 1.3rem; letter-spacing: .07em; }
.ticket-status { position: relative; margin: 10px 0 0; color: var(--green); text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ticket-status.is-redeemed { color: #8b1e2b; }
.ticket-barcode { position:relative; height:23px; margin-top:12px; background:repeating-linear-gradient(90deg,#3a1015 0 2px,transparent 2px 4px,#3a1015 4px 5px,transparent 5px 9px); opacity:.8; }
.final-copy { display: grid; gap: 10px; text-align: center; }
.final-copy h2 { margin: 0; font: 700 2rem/1.08 "Playfair Display", serif; }
.final-copy p { margin: 0 0 6px; color: rgba(255,253,249,.68); font-size: .88rem; line-height: 1.5; }
.loading { position: fixed; inset: 0; z-index: 30; width: min(100%,430px); margin: 0 auto; background: rgba(19,28,41,.92); color: #fffdf9; display: grid; place-content: center; justify-items: center; gap: 15px; }
.loading[hidden] { display: none; }
.loading span { width: 44px; height: 44px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
.loading p { margin: 0; font-family: "Playfair Display", serif; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 700px) { body { padding: 28px 0; } .app-shell, .screen { min-height: calc(100dvh - 56px); } .app-shell { border-radius: 24px; } .hero-content { min-height: calc(100dvh - 56px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }