/*
  FareWatch landing page.

  Compiled from `FareWatch Landing.dc.html` in the Claude Design project
  (perch-design-system-ead3feca). The canvas file is desktop-fixed and styled
  inline; this keeps its proportions, tokens and typography exactly, expands the
  design-system components (Logo, Card, Icon, Badge, Button) into plain markup,
  and adds the responsive behaviour a shipped page needs.

  Token blocks below are copied verbatim from the design system's tokens/*.css.
  Do not hand-tune them — change the design system and recompile.
*/

/* --- tokens/colors.css ------------------------------------------------- */
:root {
  --neutral-000: #FFFFFF; --neutral-050: #FAFAFA; --neutral-100: #F4F4F5; --neutral-200: #E9E9EC;
  --neutral-300: #D4D4D8; --neutral-400: #A1A1AA; --neutral-500: #71717A; --neutral-600: #52525B;
  --neutral-700: #3F3F46; --neutral-800: #27272A; --neutral-900: #18181B; --neutral-950: #09090B;

  --accent-100: #F4F4F5; --accent-200: #E4E4E7; --accent-300: #A1A1AA; --accent-400: #3F3F46;
  --accent-500: #09090B; --accent-600: #1F1F23; --accent-700: #27272A;

  --success-100: #E7F7EF; --success-400: #34C88A; --success-500: #00A96E; --success-600: #008757;
  --warn-100: #FFF6E5; --warn-400: #F5B841; --warn-500: #E09B00; --warn-600: #B37B00;

  --text-strong: var(--neutral-950);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-050);
  --text-inverse-muted: rgba(250, 250, 250, .60);
  --text-link: var(--accent-500);
  --text-price-drop: var(--success-600);

  --surface-page: var(--neutral-050);
  --surface-card: var(--neutral-000);
  --surface-sunken: var(--neutral-100);
  --surface-night: #09090B;
  --surface-night-raised: #18181B;
  --surface-accent-soft: var(--accent-100);
  --surface-success-soft: var(--success-100);
  --surface-warn-soft: var(--warn-100);
  --surface-glass: rgba(255, 255, 255, .72);
  --surface-glass-night: rgba(9, 9, 11, .62);

  --border-hairline: rgba(9, 9, 11, .07);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-inverse: rgba(255, 255, 255, .12);

  --action-primary: var(--accent-500);
  --action-primary-hover: var(--accent-600);
  --action-primary-press: var(--accent-700);
  --action-quiet-hover: var(--neutral-100);
  --focus-ring: var(--accent-500);
}

/* --- tokens/typography.css --------------------------------------------- */
:root {
  --font-core: 'Geist', 'SF Pro Text', system-ui, -apple-system, sans-serif;
  --font-display: 'Geist', 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --text-hero: 52px;      --lh-hero: 1.0;
  --text-display: 38px;   --lh-display: 1.05;
  --text-title-xl: 30px;  --lh-title-xl: 1.1;
  --text-title: 24px;     --lh-title: 1.16;
  --text-subtitle: 19px;  --lh-subtitle: 1.26;
  --text-body-lg: 16px;   --lh-body-lg: 1.5;
  --text-body: 14px;      --lh-body: 1.55;
  --text-caption: 13px;   --lh-caption: 1.42;
  --text-micro: 11px;     --lh-micro: 1.3;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  --track-display: -0.045em; --track-title: -0.03em; --track-tight: -0.015em;
  --track-normal: 0; --track-loose: 0.02em; --track-eyebrow: 0.06em;

  --type-display: var(--weight-semibold) var(--text-display)/var(--lh-display) var(--font-display);
  --type-title: var(--weight-semibold) var(--text-title)/var(--lh-title) var(--font-display);
  --type-subtitle: var(--weight-medium) var(--text-subtitle)/var(--lh-subtitle) var(--font-core);
  --type-body-lg: var(--weight-regular) var(--text-body-lg)/var(--lh-body-lg) var(--font-core);
  --type-body: var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-core);
  --type-eyebrow: var(--weight-medium) var(--text-micro)/1.2 var(--font-mono);
  --type-code: var(--weight-regular) var(--text-caption)/1.25 var(--font-mono);
}

/* --- tokens/spacing.css, radii.css, elevation.css, motion.css ---------- */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --gutter-card: 16px; --gutter-card-lg: 20px;

  --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --radius-card: var(--radius-lg); --radius-control: var(--radius-pill);

  --shadow-1: 0 1px 2px rgba(9, 9, 11, .05);
  --shadow-2: 0 1px 3px rgba(9, 9, 11, .07), 0 6px 14px -10px rgba(9, 9, 11, .10);
  --shadow-3: 0 2px 6px rgba(9, 9, 11, .05), 0 16px 32px -18px rgba(9, 9, 11, .18);
  --shadow-accent: 0 1px 2px rgba(9, 9, 11, .10);
  --ring-focus: 0 0 0 3px rgba(9, 9, 11, .14);
  --blur-glass: saturate(1.2) blur(14px);

  --dur-1: 110ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 420ms;
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-land: cubic-bezier(.32, 1.28, .5, 1);
  --press-scale: .985;

  /* Not a design token: the page's own measure, from the canvas file. */
  --shell: 1140px;
  --gutter: 32px;
}

/* --- tokens/base.css ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  letter-spacing: var(--track-tight);
}

h1, h2, h3, h4, p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--accent-600); }
::selection { background: var(--accent-200); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 0; padding: 10px 16px; background: var(--surface-card); z-index: 40; }
.skip:focus { left: 12px; top: 12px; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

/* --- Icon: a Lucide glyph tinted with a CSS mask so it takes currentColor */
.i {
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.i-13 { width: 13px; height: 13px; }
.i-14 { width: 14px; height: 14px; }
.i-16 { width: 16px; height: 16px; }
.i-20 { width: 20px; height: 20px; }
.i-arrow-up-right { -webkit-mask-image: url(icons/arrow-up-right.svg); mask-image: url(icons/arrow-up-right.svg); }
.i-trending-down  { -webkit-mask-image: url(icons/trending-down.svg);  mask-image: url(icons/trending-down.svg); }
.i-mic            { -webkit-mask-image: url(icons/mic.svg);            mask-image: url(icons/mic.svg); }
.i-radio-tower    { -webkit-mask-image: url(icons/radio-tower.svg);    mask-image: url(icons/radio-tower.svg); }
.i-bell-ring      { -webkit-mask-image: url(icons/bell-ring.svg);      mask-image: url(icons/bell-ring.svg); }
.i-check          { -webkit-mask-image: url(icons/check.svg);          mask-image: url(icons/check.svg); }
.i-signal-high    { -webkit-mask-image: url(icons/signal-high.svg);    mask-image: url(icons/signal-high.svg); }
.i-wifi           { -webkit-mask-image: url(icons/wifi.svg);           mask-image: url(icons/wifi.svg); }
.i-battery-full   { -webkit-mask-image: url(icons/battery-full.svg);   mask-image: url(icons/battery-full.svg); }

/* --- Logo: two sheared fare bars that also read as a swept wing --------- */
.logo { display: inline-flex; align-items: center; }
.logo svg { display: block; flex: 0 0 auto; }
.logo-word { font-weight: var(--weight-semibold); letter-spacing: var(--track-display); }
.logo-22 { gap: 6px; }  .logo-22 .logo-word { font-size: 15px; }
.logo-18 { gap: 5px; }  .logo-18 .logo-word { font-size: 12px; }

/* --- header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border-subtle);
}
.header-inner { display: flex; align-items: center; gap: var(--space-7); padding-block: var(--space-4); }
.site-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.site-nav a { font: var(--type-body); color: var(--text-muted); }
.site-nav a:hover { color: var(--text-strong); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; height: 36px; padding: 0 14px;
  font: var(--type-body); font-size: var(--text-caption);
  font-weight: var(--weight-semibold); letter-spacing: var(--track-tight);
  color: var(--neutral-000); background: var(--action-primary);
  border: 1px solid transparent; border-radius: var(--radius-control);
  box-shadow: var(--shadow-accent); cursor: pointer;
  transition: background var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-out-soft);
}
.btn:hover { background: var(--action-primary-hover); color: var(--neutral-000); }
.btn:active { background: var(--action-primary-press); transform: scale(var(--press-scale)); }

/* --- store buttons ------------------------------------------------------ */
.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px 14px 20px; border-radius: var(--radius-pill);
  transition: background var(--dur-1) var(--ease-out-soft);
}
.store-lines { display: flex; flex-direction: column; line-height: 1.2; }
.store-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.store-name { font-size: 17px; font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.store--ios { background: var(--accent-500); color: var(--text-inverse); }
.store--ios:hover { background: var(--accent-600); color: var(--text-inverse); }
.store--ios .store-kicker { opacity: .68; }
.store--play { background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--border-strong); }
.store--play:hover { background: var(--neutral-100); color: var(--text-strong); }
.store--play .store-kicker { color: var(--text-muted); }
.closing .store--play { background: var(--surface-page); }

/* --- hero --------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; padding: 96px var(--gutter) 80px; }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-6); animation: lp-rise var(--dur-4) var(--ease-out-soft) both; }
.eyebrow { font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 60px; line-height: 1.02; letter-spacing: var(--track-display);
  color: var(--text-strong); text-wrap: balance;
}
.hero-lede { font: var(--type-body-lg); line-height: 1.6; color: var(--text-muted); max-width: 46ch; }
.hero-proof { display: flex; flex-direction: column; gap: var(--space-2); font: var(--type-code); color: var(--text-muted); }
.hero-proof .strong { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-strong); }

/* --- phone -------------------------------------------------------------- */
.phone-wrap { display: flex; justify-content: center; animation: lp-rise var(--dur-4) var(--ease-land) both; animation-delay: 90ms; }
.phone-shell { background: var(--surface-night); padding: 10px; border-radius: 48px; box-shadow: var(--shadow-3); }
.phone {
  position: relative; width: 320px; height: 660px; border-radius: 39px; overflow: hidden;
  background: var(--surface-night); display: flex; flex-direction: column; padding: 16px 20px 28px;
}
.status { display: flex; align-items: center; justify-content: space-between; color: var(--text-inverse); }
.status-time { font-family: var(--font-mono); font-size: 12px; font-weight: var(--weight-medium); }
.status-icons { display: inline-flex; gap: 5px; align-items: center; }
.lock { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 44px; }
.lock-date { font: var(--type-body); color: var(--text-inverse-muted); letter-spacing: var(--track-tight); }
.lock-time { font-family: var(--font-mono); font-weight: var(--weight-light); font-size: 74px; line-height: 1; color: var(--text-inverse); letter-spacing: -0.04em; }
.push {
  margin-top: 56px; background: rgba(250, 250, 250, .10); border: 1px solid var(--border-inverse);
  border-radius: var(--radius-card); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  padding: var(--gutter-card); display: flex; flex-direction: column; gap: var(--space-3);
  animation: lp-notif 620ms var(--ease-land) both; animation-delay: 700ms;
}
.push-head { display: flex; align-items: center; gap: var(--space-2); }
.push-app { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-inverse-muted); flex: 1; }
.push-when { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-inverse-muted); }
.push-title { font: var(--type-subtitle); color: var(--text-inverse); letter-spacing: var(--track-tight); }
.push-body { font: var(--type-body); color: var(--text-inverse-muted); }
.phone-foot { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-inverse-muted); }

/* --- how it works ------------------------------------------------------- */
.how { border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.section-pad { padding: 88px var(--gutter); }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 52ch; }
.section-head h2 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 38px; line-height: 1.1; letter-spacing: var(--track-display); color: var(--text-strong);
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); padding-top: 48px; }
.card {
  background: var(--surface-card); color: var(--text-body);
  padding: var(--gutter-card-lg); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1); overflow: hidden;
}
.step-inner { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-eyebrow); color: var(--text-muted); }
.step-title { font: var(--type-subtitle); color: var(--text-strong); letter-spacing: var(--track-tight); }
.step-body { font: var(--type-body); line-height: 1.6; color: var(--text-muted); }
.step-proof { margin-top: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-strong); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }

/* --- the page ----------------------------------------------------------- */
.thepage { background: var(--surface-night); }
.thepage-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 96px var(--gutter); }
.thepage-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.eyebrow--inverse { color: var(--text-inverse-muted); }
.thepage h2 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 42px; line-height: 1.08; letter-spacing: var(--track-display);
  color: var(--text-inverse); text-wrap: balance;
}
.thepage-lede { font: var(--type-body-lg); line-height: 1.6; color: var(--text-inverse-muted); max-width: 44ch; }
.points { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.point { display: flex; align-items: center; gap: var(--space-3); font: var(--type-body); color: var(--text-inverse); }

.fare-card { background: rgba(250, 250, 250, .06); border: 1px solid var(--border-inverse); border-radius: var(--radius-xl); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.fare-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--neutral-050); color: var(--neutral-950);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font: var(--type-eyebrow); letter-spacing: var(--track-loose); text-transform: uppercase; white-space: nowrap;
}
.badge .i { width: 12px; height: 12px; }
.fare-row { display: flex; align-items: baseline; gap: var(--space-4); }
.fare-now { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: 56px; line-height: 1; color: var(--text-inverse); letter-spacing: -0.04em; }
.fare-was { font-family: var(--font-mono); font-size: 18px; color: var(--text-inverse-muted); text-decoration: line-through; }
.fare-chart { width: 100%; height: 110px; overflow: visible; }
.fare-foot { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: 11px; color: var(--text-inverse-muted); border-top: 1px solid var(--border-inverse); padding-top: var(--space-4); }

/* --- pricing ------------------------------------------------------------ */
.pricing { border-top: 1px solid var(--border-subtle); }
.pricing-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; padding: 88px var(--gutter); }
.pricing-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.price-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.price { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: 64px; line-height: 1; color: var(--text-strong); letter-spacing: -0.04em; }
.price-unit { font: var(--type-body-lg); color: var(--text-muted); }
.pricing h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 30px; line-height: 1.14; letter-spacing: var(--track-title); color: var(--text-strong); text-wrap: balance; }
.pricing-body { font: var(--type-body-lg); line-height: 1.6; color: var(--text-muted); max-width: 46ch; }
.faqs { display: flex; flex-direction: column; }
.faq { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) 0; border-top: 1px solid var(--border-subtle); }
.faq-q { font: var(--type-body); font-weight: var(--weight-medium); color: var(--text-strong); }
.faq-a { font: var(--type-body); line-height: 1.6; color: var(--text-muted); }

/* --- closing + footer --------------------------------------------------- */
.closing { border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; padding: 88px var(--gutter); }
.closing h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 44px; line-height: 1.08; letter-spacing: var(--track-display); color: var(--text-strong); max-width: 24ch; text-wrap: balance; }
.closing .stores { justify-content: center; }
.closing-fine { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.site-footer { border-top: 1px solid var(--border-subtle); }
.footer-inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-7) var(--gutter); }
.footer-meta { font: var(--type-code); color: var(--text-muted); margin-left: auto; }
.site-footer a { font: var(--type-code); color: var(--text-muted); }
.site-footer a:hover { color: var(--text-strong); }

/* --- motion ------------------------------------------------------------- */
@keyframes lp-rise  { from { opacity: 0; transform: translateY(14px); }   to { opacity: 1; transform: none; } }
@keyframes lp-notif { from { opacity: 0; transform: translateY(-130%); }  to { opacity: 1; transform: none; } }
@keyframes lp-fade  { from { opacity: 0; }                                to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation-name: lp-fade !important; } }

/*
  Responsive. The canvas is a fixed 1140px desktop artboard, so everything below
  is added here rather than ported: the two-column bands collapse in order, the
  phone scales down, and the display sizes step back so nothing overflows.
*/
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 56px; padding-top: 72px; }
  .hero h1 { font-size: 48px; }
  .thepage-inner, .pricing-inner { grid-template-columns: 1fr; gap: 48px; }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .site-nav { display: none; }
  .hero { padding-top: 56px; padding-bottom: 56px; }
  .hero h1 { font-size: 38px; line-height: 1.06; }
  .section-pad, .thepage-inner, .pricing-inner, .closing-inner { padding-block: 64px; }
  .steps { grid-template-columns: 1fr; padding-top: var(--space-7); }
  .section-head h2 { font-size: 30px; }
  .thepage h2 { font-size: 32px; }
  .closing h2 { font-size: 32px; }
  .price { font-size: 52px; }
  .fare-now { font-size: 44px; }
  .fare-card { padding: var(--space-5); }
  .phone-shell { padding: 8px; border-radius: 42px; }
  .phone { width: 288px; height: 600px; border-radius: 34px; }
  .lock-time { font-size: 64px; }
  .store { flex: 1 1 auto; justify-content: center; }
  .footer-meta { margin-left: 0; width: 100%; order: 3; }
}

@media (max-width: 360px) {
  .phone { width: 100%; max-width: 260px; }
}