/* ==========================================================================
   RailPass — public site styles
   Self-contained: no build step, no Tailwind/Bootstrap dependency.
   Brand palette taken from the official logo SVGs:
     navy   #011E45   orange #FE6701
     slate  #2C385E   muted  #536889   peach #FFBB84
   ========================================================================== */

:root {
  --navy: #011E45;
  --navy-700: #0a2b58;
  --slate: #2C385E;
  --muted: #536889;
  --orange: #FE6701;
  --orange-600: #e65c00;
  --peach: #FFBB84;
  --cream: #FFF6F0;

  --ink: #0f1b30;
  --body: #4a5875;
  --line: #e4e8f0;
  --bg: #ffffff;
  --bg-soft: #f6f8fc;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(1, 30, 69, .06), 0 2px 8px rgba(1, 30, 69, .05);
  --shadow-md: 0 6px 24px rgba(1, 30, 69, .09);
  --shadow-lg: 0 18px 50px rgba(1, 30, 69, .16);
  --wrap: 1160px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so an anchor jump would otherwise land the target
     section underneath it. Reserve the header height plus a little breathing
     room above each heading. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
a { color: var(--orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Accessibility ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1.5px solid transparent; cursor: pointer; transition: .18s ease;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(254,103,1,.32); }
.btn-primary:hover { background: var(--orange-600); color: #fff; box-shadow: 0 10px 26px rgba(254,103,1,.42); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(1,30,69,.22); }
.btn-ghost:hover { border-color: var(--navy); background: rgba(1,30,69,.04); color: var(--navy); }
.btn-on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-on-dark:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; max-width: 190px; display: block; }

.site-nav { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.site-nav a {
  color: var(--slate); font-weight: 500; font-size: .93rem;
  padding: .5rem .8rem; border-radius: 8px; text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--navy); background: var(--bg-soft); text-decoration: none; }
.header-cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--line);
  border-radius: 10px; padding: .5rem .6rem; cursor: pointer; color: var(--navy);
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(254,103,1,.16), transparent 60%),
    radial-gradient(760px 440px at 4% 104%, rgba(1,30,69,.07), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(254,103,1,.1); color: var(--orange-600);
  border: 1px solid rgba(254,103,1,.24);
  padding: .38rem .9rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.hero p.lead { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 34rem; color: var(--body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-note { margin-top: 1.4rem; font-size: .88rem; color: var(--muted); }

/* Hero side card — a stylised ticket */
.ticket {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; border: 1px solid rgba(1,30,69,.07);
}
.ticket-top {
  background: linear-gradient(135deg, var(--navy) 0%, #052f63 100%);
  color: #fff; padding: 1.4rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ticket-top .t-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--peach); margin-bottom: .15rem; }
.ticket-top .t-city { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.ticket-arrow { color: var(--orange); font-size: 1.3rem; flex-shrink: 0; }
.ticket-perf {
  height: 0; border-top: 2px dashed var(--line);
  position: relative; margin: 0 1.5rem;
}
.ticket-perf::before, .ticket-perf::after {
  content: ''; position: absolute; top: -11px; width: 20px; height: 20px;
  background: var(--cream); border-radius: 50%;
}
.ticket-perf::before { left: -26px; }
.ticket-perf::after { right: -26px; }
.ticket-body { padding: 1.3rem 1.5rem 1.5rem; }
.ticket-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.ticket-rows .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ticket-rows .v { font-weight: 600; color: var(--ink); font-size: .96rem; }
.ticket-total {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between;
}
.ticket-total .amt { font-size: 1.6rem; font-weight: 700; color: var(--navy); }
.ticket-total .cur { font-size: .85rem; color: var(--muted); font-weight: 500; }

/* Stat band -------------------------------------------------------------- */
.stat-band { background: var(--navy); color: #fff; padding: 2.4rem 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat .n { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; color: #fff; line-height: 1.1; }
.stat .n .plus { color: var(--orange); }
.stat .l { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.66); margin-top: .3rem; }

/* Sections --------------------------------------------------------------- */
.section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head .kicker {
  color: var(--orange-600); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .5rem;
}
.section-head p { color: var(--body); margin-bottom: 0; }

/* Cards / steps ---------------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Grid/flex children default to min-width:auto, which lets wide content (such
   as the min-width tables below) push the whole page wider than the viewport.
   Resetting to 0 lets the scroll containers actually scroll instead. */
.grid > *, .split > *, .hero-grid > *, .stat-grid > *, .footer-grid > *, .app-split > * { min-width: 0; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm); transition: .2s ease; height: 100%;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(254,103,1,.3); }
.card h3 { margin-bottom: .35rem; }
.card p:last-child { margin-bottom: 0; }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(254,103,1,.1); color: var(--orange-600); margin-bottom: 1rem; font-size: 1.25rem;
}

.step { position: relative; }
.step .num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem; margin-bottom: .9rem;
}

/* Chip list -------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; font-size: .88rem; color: var(--slate); font-weight: 500;
}
.chip-solid { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Mobile app section ----------------------------------------------------- */
.app-section {
  background:
    radial-gradient(820px 420px at 90% 6%, rgba(254,103,1,.13), transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, #fff 100%);
}
.app-split { display: grid; grid-template-columns: 1fr .86fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.store-badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.store-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--navy); color: #fff; border-radius: 12px;
  padding: .65rem 1.15rem; text-decoration: none; transition: .18s ease;
}
.store-badge:hover { background: var(--navy-700); color: #fff; text-decoration: none; transform: translateY(-1px); }
.store-badge svg { flex-shrink: 0; }
.store-badge .sb-small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; opacity: .72; line-height: 1.3; }
.store-badge .sb-big { display: block; font-size: .95rem; font-weight: 600; line-height: 1.2; }
.store-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

/* Pure-CSS phone mockup */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 288px; max-width: 100%; flex-shrink: 0;
  background: #0b1220; border-radius: 40px; padding: 11px;
  box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(1,30,69,.14);
}
.phone-screen {
  background: #fff; border-radius: 30px; overflow: hidden; position: relative;
}
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 20px; background: #0b1220; border-radius: 999px; z-index: 3;
}
.ph-top {
  background: linear-gradient(140deg, var(--navy) 0%, #06305f 100%);
  color: #fff; padding: 2.5rem 1.15rem 1.15rem;
}
.ph-greet { font-size: .7rem; color: var(--peach); letter-spacing: .04em; }
.ph-title { font-size: 1.05rem; font-weight: 700; line-height: 1.25; margin-top: .1rem; }
.ph-search {
  background: #fff; border-radius: 12px; margin-top: .95rem; padding: .7rem .85rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.ph-row { display: flex; align-items: center; gap: .55rem; }
.ph-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ph-dot.from { background: var(--orange); }
.ph-dot.to { background: var(--navy); }
.ph-city { font-size: .82rem; font-weight: 600; color: var(--ink); }
.ph-sep { border-top: 1px dashed var(--line); margin: .5rem 0 .5rem 1rem; }
.ph-body { padding: 1rem 1.15rem 1.3rem; background: var(--bg-soft); }
.ph-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; }
.ph-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem .8rem; margin-bottom: .55rem; box-shadow: var(--shadow-sm);
}
.ph-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ph-train { font-size: .8rem; font-weight: 600; color: var(--ink); }
.ph-price { font-size: .8rem; font-weight: 700; color: var(--orange-600); white-space: nowrap; }
.ph-meta { font-size: .66rem; color: var(--muted); margin-top: .2rem; }
.ph-cta {
  background: var(--orange); color: #fff; text-align: center; border-radius: 10px;
  padding: .6rem; font-size: .8rem; font-weight: 600; margin-top: .3rem;
}
.ph-nav {
  display: flex; justify-content: space-around; padding: .6rem .4rem .75rem;
  background: #fff; border-top: 1px solid var(--line);
}
.ph-nav span { width: 20px; height: 20px; border-radius: 5px; background: var(--line); }
.ph-nav span.on { background: var(--orange); }

/* Table ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.info { width: 100%; border-collapse: collapse; min-width: 26rem; }
table.info th, table.info td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; }
table.info thead th { background: var(--bg-soft); color: var(--navy); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
table.info tbody tr:last-child td { border-bottom: 0; }
table.info td strong { color: var(--ink); }

/* Callout ---------------------------------------------------------------- */
.callout {
  border-left: 4px solid var(--orange); background: var(--cream);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem; color: var(--slate);
}
.callout strong { color: var(--ink); }

/* Split feature ---------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.check-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.check-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; color: var(--body); }
.check-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%; background: rgba(254,103,1,.14);
  color: var(--orange-600); font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}

/* FAQ -------------------------------------------------------------------- */
.faq { max-width: 50rem; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 1.3rem; margin-bottom: .8rem; box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer; padding: 1.1rem 0; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--orange); font-size: 1.4rem; font-weight: 400; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq details > p { padding-bottom: 1.1rem; margin: 0; font-size: .95rem; }

/* CTA -------------------------------------------------------------------- */
.cta {
  background:
    radial-gradient(700px 340px at 82% 0%, rgba(254,103,1,.28), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, #062a57 100%);
  color: #fff; text-align: center; padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.8); max-width: 34rem; margin: 0 auto 1.8rem; }
.cta .hero-actions { justify-content: center; }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: #01162f; color: rgba(255,255,255,.62); padding: 3.2rem 0 1.6rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer img.f-logo { height: 40px; margin-bottom: 1rem; }
.site-footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: rgba(255,255,255,.62); }
.site-footer a:hover { color: var(--orange); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.4rem; padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem;
}

/* Reveal on scroll (progressive: visible by default, JS opts in) --------- */
.reveal { opacity: 1; }
body.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
body.js .reveal.in { opacity: 1; transform: none; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .app-split { grid-template-columns: 1fr; }
  .app-split .phone-wrap { order: -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero .ticket { max-width: 440px; }
}

/* Header width budget (measured at 1440px, single-line nav):
     brand 128 + nav 689 + both CTA buttons + gaps + 48 padding = ~1189px.
   Both CTA buttons duplicate nav links ("Mobile app" -> #app, "How it works"
   -> #how), so they are the first things to drop on narrower screens: nothing
   becomes unreachable, since the nav (and below 1080px the hamburger menu)
   still carries both destinations. .nav-toggle is not a .btn, so it stays.
   Measured: the header needs ~1200px exactly with both buttons shown, so this
   breakpoint sits well above that rather than at the boundary — at 1201px the
   slack was only 1.4px, which any font-metric difference would overflow. */
@media (max-width: 1260px) {
  .header-cta .btn { display: none; }
}

/* Once even the trimmed header no longer fits, collapse the links into the
   hamburger rather than letting the header push the page wider than the
   viewport. Keep this above the measured requirement of the trimmed header. */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    /* top:100% rather than var(--header-h) — the header is 1px taller than the
       bar because of its bottom border, so the variable would leave a seam. */
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: .8rem 24px 1.2rem;
    box-shadow: var(--shadow-md); display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .75rem .5rem; }
}

@media (max-width: 760px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  /* Only the logo and hamburger remain up here, so 76px is wasted vertical
     space on the smallest screens. Driving this through the variable keeps the
     mobile menu offset and scroll-padding-top in step automatically. */
  :root { --header-h: 64px; }
  .grid-4 { grid-template-columns: 1fr; }
  .ticket-rows { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .card:hover, .btn:hover { transform: none; }
  body.js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .cta, .nav-toggle { display: none; }
  body { color: #000; }
}