/* GO transit watch · product-led static site */
/* Colors sourced directly from the app's design system: GoTransitTrackerWidgets/Media.xcassets/Colors */
:root {
  --ink: #111114;          /* Theme/ThemePrimaryText (light) */
  --ink-soft: #231f20;     /* Theme/WidgetInk */
  --paper: #f2f4f7;        /* Theme/ThemeCanvas (light) */
  --surface: #ffffff;      /* Theme/ThemeCard, ThemePaper (light) */
  --mist: #f1f1f4;         /* Theme/ThemeField (light) */
  --line: #e9e9ee;         /* Theme/ThemeCardBorder (light) */
  --muted: #6c6c70;        /* Theme/ThemeSecondaryText (light) */
  --muted-soft: #8e8e94;   /* Theme/ThemeTertiaryText (light) */
  --green: #3e8314;        /* Brand/BrandGreen, Theme/ThemeAccent (light) */
  --green-dark: #00853f;   /* Brand/TransitGreen */
  --green-soft: rgba(62, 131, 20, .12); /* Theme/ThemeAccentSoft (light) */
  --lime: #b6dc79;         /* Brand/GOGreen, Theme/WidgetLime, Theme/ThemeAccent (dark) */
  --screens-bg: #f8f9fb;   /* lighter wash behind "The complete system" marquee */
  --maxw: 1180px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

#template-port { color:var(--ink); background:var(--surface); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow:hidden; }
.tp-hero { padding:89px 30px 76px; background:var(--surface); position:relative; }
.tp-nav { position:fixed;top:0;left:0;right:0;z-index:100;height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-inline:max(30px,calc((100% - 1140px)/2))}
.tp-logo{display:flex;align-items:center;gap:10px;min-width:0}.tp-logo-text{font-size:19px;color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap}.tp-logo-icon{padding:0;border:none;background:none;cursor:pointer;border-radius:9px;overflow:hidden;width:36px;height:36px;flex-shrink:0;transition:transform .15s ease}.tp-logo-icon:hover{transform:scale(1.04)}.tp-logo-icon:active{transform:scale(.94)}.tp-logo-icon img{display:block;width:100%;height:100%;object-fit:cover}.tp-nav nav{display:flex;gap:29px}.tp-nav nav a{color:var(--muted);text-decoration:none;transition:color .15s ease}.tp-nav nav a:hover{color:#3E8314}
.tp-button { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:14px 23px; text-decoration:none; font-size:14px; font-weight:650; line-height:1; }.tp-button--dark{background:var(--ink-soft);color:#fff}
/* Official Apple "Download on the App Store" badge, used as-is per Apple's marketing guidelines. */
.tp-badge{display:inline-flex;line-height:0;border-radius:10px;transition:transform .18s ease}
.tp-badge:hover{transform:translateY(-2px)}
.tp-badge img{height:40px;width:auto;display:block}
.tp-badge--large img{height:54px}
.tp-hero-copy { text-align:center; max-width:749px; margin:64px auto 56px; }.tp-tag{display:block;color:var(--green-dark);text-transform:none;font-size:14px;font-weight:750;line-height:1.35}.tp-hero h1,.tp-head h2{margin:16px 0 18px;font-weight:650}.tp-hero h1{font-size:clamp(48px,6.15vw,78px);line-height:.98}.tp-hero p,.tp-head p{font-size:17px;line-height:1.55;color:var(--muted);max-width:550px;margin:0 auto}.tp-hero-copy>div{margin-top:31px;display:flex;gap:24px;justify-content:center;align-items:center}.tp-text-link{font-size:14px;color:var(--green-dark);font-weight:650;text-decoration:none}
.tp-hero-phones{max-width:1140px;margin:auto;display:flex;justify-content:center;align-items:flex-end;gap:40px}
.tp-hero-phones .tp-shot{height:430px}
.tp-hero-phones .tp-shot--large{height:540px}
.tp-hero-phones .tp-shot:first-child{transform:rotate(-7deg) translateY(16px)}
.tp-hero-phones .tp-shot:last-child{transform:rotate(7deg) translateY(16px)}
.tp-brands{padding:54px 0 70px;text-align:center;box-sizing:border-box;overflow:hidden}.tp-brands p{font-size:14px;font-weight:750;line-height:1.35;color:var(--muted-soft);margin:0 0 28px;text-transform:none;padding:0 30px}
/* Ticker of GO line + station chips, each with a GO-logo mark masked into the line's official colour. */
.tp-ticker{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tp-ticker + .tp-ticker{margin-top:14px}
.tp-ticker-track{display:flex;width:max-content;gap:12px;padding:3px 6px;animation:tp-ticker-scroll 46s linear infinite}
.tp-ticker-track--reverse{animation-name:tp-ticker-scroll-reverse;animation-duration:88s}
.tp-chip{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:9px 16px 9px 11px;border-radius:999px;background:color-mix(in srgb, var(--chip-color) 9%, #fff);border:1px solid color-mix(in srgb, var(--chip-color) 28%, var(--line));color:color-mix(in srgb, var(--chip-color) 78%, var(--ink));font-size:14px;font-weight:650;white-space:nowrap}
.tp-chip--line{padding:9px 18px 9px 13px;background:var(--chip-color);border-color:var(--chip-color);color:#fff;font-weight:700}
.tp-chip-logo{display:inline-block;width:16px;height:16px;flex:0 0 auto;background-color:currentColor;-webkit-mask-image:url(/assets/brand/go-logo-mask.png);mask-image:url(/assets/brand/go-logo-mask.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.tp-chip--line .tp-chip-logo{background-color:#fff}
.tp-chip-logo--up{width:24px;height:14px;-webkit-mask-image:url(/assets/brand/up-logo-mask.png);mask-image:url(/assets/brand/up-logo-mask.png)}
@keyframes tp-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tp-ticker-scroll-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion: reduce){.tp-ticker-track,.tp-ticker-track--reverse{animation:none}}
.tp-section{padding:80px 30px;max-width:1200px;margin:auto;box-sizing:border-box}.tp-head{text-align:center;max-width:690px;margin:0 auto 56px}.tp-head h2{font-size:clamp(37px,4.2vw,57px);line-height:1.03}.tp-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1140px;margin:auto}.tp-proof article{border:1px solid var(--line);border-radius:20px;padding:24px;min-height:170px;background:var(--surface)}.tp-proof h3,.tp-work-copy h3{font-size:24px;margin:62px 0 11px}.tp-proof h3{margin-top:0}.tp-proof p,.tp-work-copy p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.tp-work{padding-top:64px;padding-bottom:72px}.tp-work-card{min-height:380px;border-radius:28px;border:1px solid var(--line);background:none;margin:0 auto 40px;max-width:1140px;padding:48px 8%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:56px;overflow:hidden}.tp-work-card:last-child{margin-bottom:0}.tp-work-card--reverse{flex-direction:row-reverse}.tp-work-copy{max-width:365px}.tp-work-copy h3{font-size:38px;margin:0 0 14px}.tp-work-copy p{font-size:17.5px}
/* Real device-frame renders exported straight from Figma (hardware + screen baked in, transparent corners). */
.tp-shot{display:block;width:auto;height:300px;filter:drop-shadow(0 18px 34px rgba(17,17,20,.15))}
.tp-shot-pair{display:flex;align-items:center;gap:26px;flex:0 0 auto}
.tp-shot-pair .tp-shot:first-child{transform:rotate(-6deg)}
.tp-shot-pair .tp-shot:last-child{transform:rotate(6deg) translateY(10px)}
.tp-work-card--reverse .tp-shot-pair .tp-shot:first-child{transform:rotate(-6deg) translateY(10px)}
.tp-work-card--reverse .tp-shot-pair .tp-shot:last-child{transform:rotate(6deg)}
/* App features: same alternating screenshot/copy rows as "How it works". */
.tp-features{padding-top:64px;padding-bottom:72px;background:var(--surface)}
.tp-screens{padding:132px 0;background:var(--screens-bg)}.tp-screens .tp-head{padding:0 30px}.tp-screen-marquee{display:flex;gap:26px;overflow:auto;padding:5px max(30px,calc((100vw - 1140px)/2));scroll-snap-type:x mandatory}.tp-screen-marquee img{height:395px;filter:drop-shadow(0 18px 40px rgba(17,17,20,.14));scroll-snap-align:start}
.tp-faq{padding:96px 30px;background:var(--surface);max-width:none}
.tp-faq .tp-head{max-width:689px;margin-bottom:48px}
.tp-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.tp-faq-item{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 26px;transition:border-color .2s ease,box-shadow .2s ease}
.tp-faq-item[open]{border-color:color-mix(in srgb,var(--green) 35%,var(--line));box-shadow:0 8px 24px rgba(17,17,20,.04)}
.tp-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:17px;font-weight:650;color:var(--ink);cursor:pointer;list-style:none;user-select:none}
.tp-faq-item summary::-webkit-details-marker{display:none}
.tp-faq-icon{flex-shrink:0;color:var(--muted);transition:transform .25s ease,color .2s ease}
.tp-faq-item[open] .tp-faq-icon{transform:rotate(180deg);color:var(--green-dark)}
.tp-faq-item p{margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.62;max-width:96%}
/* Footer: Figma 276:280: lime field, CN tower overlapping into full-bleed train scene, links on a dark-green bar
   (same #006847 as the scene's own base fill, so it reads as one continuous band regardless of text wrapping). */
.tp-footer{position:relative;background:var(--lime);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;padding:0;box-sizing:border-box}
.tp-footer-top{display:flex;justify-content:center;padding:48px 24px 0}
.tp-footer-mark{width:71px;height:auto;display:block;margin:0 0 -3.4vw;flex:0 0 auto;position:relative;z-index:1}
.tp-footer-scene-wrap{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);line-height:0}
.tp-footer-scene{width:100%;height:auto;display:block}
.tp-footer-nav{background:#006847;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;padding:18px 20px;box-sizing:border-box;font-size:13px;font-weight:600;color:#fff;text-align:center}
.tp-footer-nav a{color:#fff;text-decoration:none}
.tp-footer-nav a:hover{text-decoration:underline;opacity:.92}
.tp-footer-nav-sep,.tp-footer-nav>span:not(.tp-footer-nav-sep){color:rgba(255,255,255,.88)}
@media(max-width:700px){.tp-hero{padding-inline:18px}.tp-nav{padding-inline:18px}.tp-nav nav{display:none}.tp-nav .tp-button{padding:11px 15px}.tp-hero-copy{margin-top:40px}.tp-hero h1{font-size:50px}.tp-hero-phones{gap:14px}.tp-hero-phones .tp-shot{height:270px}.tp-hero-phones .tp-shot--large{height:330px}.tp-brands{padding:40px 0}.tp-chip{font-size:12px;padding:7px 13px 7px 9px}.tp-chip--line{padding:7px 15px 7px 11px}.tp-chip-logo{width:13px;height:13px}.tp-chip-logo--up{width:19px;height:11px}.tp-section{padding:72px 20px}.tp-proof{grid-template-columns:1fr}.tp-proof article{min-height:0}.tp-proof h3{margin-top:0}.tp-work-card,.tp-work-card--reverse{padding:32px 24px;min-height:0;display:flex;flex-direction:column;gap:24px;margin-bottom:24px}.tp-shot-pair{gap:16px}.tp-shot{height:230px}.tp-screen-marquee{padding-inline:20px}.tp-screen-marquee img{height:330px}.tp-links a{grid-template-columns:1fr 18px}.tp-links span{grid-column:1}.tp-links i{grid-column:2;grid-row:1}.tp-contact{padding:72px 20px 105px}.tp-contact-bottom{flex-direction:column;padding:44px 0 0}.tp-contact-bottom .tp-phone{transform:translateY(45px)}.tp-footer-top{padding-top:32px}.tp-footer-mark{width:50px;margin-bottom:-3.4vw}.tp-footer-nav{gap:8px 12px;font-size:12px;padding:24px 16px 20px}}

/* Raw-screenshot phone frame: only used for the single untrimmed closing shot. */
.tp-phone{position:relative;border:7px solid var(--ink-soft);border-radius:38px;background:var(--ink-soft);box-shadow:0 24px 50px rgba(17,17,20,.16);overflow:hidden;width:246px;line-height:0}
.tp-phone:before{content:"";position:absolute;z-index:2;left:50%;top:8px;transform:translateX(-50%);width:35%;height:16px;border-radius:12px;background:#101113}
.tp-phone img{width:100%;aspect-ratio:9/19.5;object-fit:cover;display:block;border-radius:30px}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink);  line-height: 1.02; }
.container { width: min(100%, var(--maxw)); margin: auto; padding: 0 28px; }
.eyebrow { color: var(--green-dark); font-size: 12px; font-weight: 750;  text-transform:none; }
.muted { color: var(--muted); }

/* Nav */
.site-header { height: 78px; display: flex; align-items: center; position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid color-mix(in oklch, var(--line) 80%, transparent); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 760;  white-space: nowrap; }
.brand__mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--ink); padding: 6px; }
.brand__mark svg { width: 100%; }
.nav { display: flex; gap: 5px; align-items: center; margin-left: auto; }
.nav a { color: var(--muted); font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: 8px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--ink); background: var(--mist); }
.nav .nav__legal { color: var(--green-dark); }
.btn { align-items: center; border: 0; border-radius: 999px; display: inline-flex; font: inherit; font-size: 14px; font-weight: 700; gap: 8px; justify-content: center; min-height: 44px; padding: 0 19px; transition: transform .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ink); color: white; }
.btn--primary:hover { background: var(--green-dark); }
.btn--accent { background: var(--green); color: white; }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 5px; color: var(--ink); }

/* Hero */
.hero { background: radial-gradient(circle at 18% 25%, oklch(92% .06 142 / .9), transparent 30%), radial-gradient(circle at 80% 80%, oklch(89% .06 130 / .7), transparent 34%), var(--paper); min-height: calc(100svh - 78px); overflow: clip; position: relative; }
.hero__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .88fr); align-items: center; gap: 48px; min-height: calc(100svh - 78px); padding: 72px 28px 0; }
.hero__copy { padding: 0 0 86px; }
.hero h1 { font-size: clamp(54px, 7vw, 92px); max-width: 9.5ch; margin: 18px 0 22px; }
.hero__copy > p:not(.eyebrow) { font-size: 18px; color: var(--muted); max-width: 39ch; margin-bottom: 28px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__note { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 8px; margin: 24px 0 0; }
.hero__note b { color: var(--ink); }
.hero__visual { align-self: end; height: min(770px, calc(100svh - 90px)); min-height: 570px; position: relative; width: 100%; }
.hero__visual::after { content: ""; position: absolute; z-index: 0; left: 12%; right: 12%; bottom: 0; height: 62%; border-radius: 50% 50% 0 0; background: oklch(78% .115 140 / .26); filter: blur(20px); }

/* Device frames */
.device { background: #101113; border: 8px solid #090a0b; border-radius: 46px; box-shadow: 0 34px 80px -28px oklch(19% .03 150 / .48), inset 0 0 0 1px rgb(255 255 255 / .22); overflow: hidden; position: relative; transform: translateZ(0); }
.device::before { background: #050506; border-radius: 999px; content: ""; height: 24px; left: 50%; position: absolute; top: 10px; transform: translateX(-50%); width: 35%; z-index: 2; }
.device::after { background: #080809; border-radius: 3px; box-shadow: 0 42px #080809; content: ""; height: 55px; position: absolute; right: -11px; top: 128px; width: 4px; }
.device img { height: 100%; object-fit: cover; width: 100%; }
.device--hero { bottom: 0; height: 90%; left: 11%; position: absolute; z-index: 2; }
.device--hero-alt { bottom: -12%; height: 77%; position: absolute; right: 4%; transform: rotate(8deg); z-index: 1; }
.device--hero-alt img { object-position: center top; }
.device--screen { aspect-ratio: 390 / 844; width: min(100%, 304px); }
.device--screen::before { display: none; }
.device--screen::after { display: none; }

/* Screens */
.section { padding: 130px 0; }
.section--light { background: var(--surface); }
.section--mist { background: var(--mist); }
.section-head { margin: 0 auto 62px; max-width: 650px; text-align: center; }
.section-head h2 { font-size: clamp(38px, 5vw, 65px); margin: 14px 0 18px; }
.section-head p { color: var(--muted); font-size: 18px; margin: 0 auto; max-width: 41ch; }
.feature-story { align-items: center; display: grid; gap: clamp(44px, 8vw, 120px); grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); margin: 0 auto 150px; max-width: 1030px; }
.feature-story:last-child { margin-bottom: 0; }
.feature-story--reverse .feature-story__copy { order: 2; }
.feature-story__copy h3 { font-size: clamp(34px, 4vw, 54px); margin: 14px 0 18px; }
.feature-story__copy p { color: var(--muted); font-size: 17px; max-width: 38ch; }
.feature-list { display: grid; gap: 13px; list-style: none; margin: 28px 0 0; padding: 0; }
.feature-list li { align-items: start; display: flex; gap: 10px; }
.feature-list li::before { background: var(--green); border-radius: 50%; color: white; content: "✓"; display: grid; flex: 0 0 20px; font-size: 12px; font-weight: 800; height: 20px; line-height: 1; place-items: center; margin-top: 3px; }
.feature-story__screens { align-items: end; display: flex; gap: 18px; justify-content: center; min-height: 550px; position: relative; }
.feature-story__screens .device:nth-child(1) { transform: rotate(-4deg) translateY(18px); }
.feature-story__screens .device:nth-child(2) { transform: rotate(4deg) translateY(-5px); }
.feature-story__screens .device:hover { transform: translateY(-12px) rotate(0deg); transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.feature-story__screens .device { transition: transform .35s cubic-bezier(.2,.9,.2,1); }

/* Gallery */
.screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.screen-card { min-width: 0; }
.screen-card .device { margin: auto; width: min(100%, 230px); }
.screen-card figcaption { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 15px auto 0; max-width: 230px; text-align: center; }
.screen-card strong { color: var(--ink); display: block; font-size: 14px; margin-bottom: 3px; }
.gallery-divider { align-items: center; display: flex; gap: 15px; margin: 94px 0 30px; }
.gallery-divider::after { background: var(--line); content: ""; height: 1px; flex: 1; }
.gallery-divider h3 { font-size: 23px; }

/* Compact capability list */
.capability-strip { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; }
.capability-strip article { padding: 28px 28px 0 0; }
.capability-strip article + article { border-left: 1px solid var(--line); padding-left: 28px; }
.capability-strip h3 { font-size: 20px; margin-bottom: 8px; }
.capability-strip p { color: var(--muted); font-size: 15px; margin: 0; }

/* Closing / footer */
.closing { background: var(--ink); color: white; overflow: hidden; padding: 128px 0 0; position: relative; }
.closing::after { background: radial-gradient(circle, oklch(58% .14 150 / .54), transparent 68%); bottom: -280px; content: ""; height: 650px; position: absolute; right: -120px; width: 650px; }
.closing__grid { align-items: center; display: grid; grid-template-columns: 1fr minmax(260px, .62fr); gap: 60px; position: relative; z-index: 1; }
.closing h2 { color: white; font-size: clamp(45px, 6vw, 74px); max-width: 10ch; }
.closing p { color: rgb(255 255 255 / .68); font-size: 18px; max-width: 34ch; }
.closing .btn--accent { background: var(--lime); color: var(--ink); }
.closing__device { align-self: end; margin: 20px auto 0; width: min(100%, 296px); }
.site-footer { background: var(--ink); color: rgb(255 255 255 / .65); padding: 78px 0 30px; }
.site-footer__inner { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 36px; }
.site-footer .brand { color: white; }
.site-footer .brand__mark { background: white; }
.site-footer__about { font-size: 14px; max-width: 28ch; }
.site-footer__col h4 { color: rgb(255 255 255 / .42); font-size: 11px;  margin: 0 0 13px; text-transform:none; }
.site-footer__col a { color: rgb(255 255 255 / .75); display: block; font-size: 14px; margin: 8px 0; }
.site-footer__fine { border-top: 1px solid rgb(255 255 255 / .12); display: flex; font-size: 12px; gap: 12px 28px; justify-content: space-between; margin-top: 55px; padding-top: 22px; }

/* Legal pages: modern layout matching homepage design system */
.legal { min-height: 70svh; padding: 112px 24px 84px; box-sizing: border-box; }
.legal__inner { max-width: 780px; margin: auto; }
.legal__back { display: inline-flex; align-items: center; gap: 6px; color: var(--green-dark); font-size: 14px; font-weight: 650; text-decoration: none; margin-bottom: 24px; transition: color .15s ease, transform .15s ease; }
.legal__back:hover { color: #3e8314; transform: translateX(-2px); }
.legal .tp-tag { margin-bottom: 8px; }
.legal h1 { font-size: clamp(36px, 5.5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing:normal; margin: 0 0 10px; color: var(--ink); }
.legal__updated { color: var(--muted); font-size: 14px; margin: 0 0 32px; font-weight: 500; }
.legal__card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; display: grid; gap: 32px; padding: clamp(28px, 5vw, 48px); box-shadow: 0 12px 40px rgba(17, 17, 20, 0.04); }
.legal__card section { display: grid; gap: 12px; }
.legal__card h2 { font-size: 20px; font-weight: 700; margin: 0; color: var(--ink); line-height: 1.3; }
.legal__card p { margin: 0; color: #404046; font-size: 15px; line-height: 1.68; }
.legal__card ul { margin: 0; padding-left: 20px; color: #404046; font-size: 15px; line-height: 1.68; display: grid; gap: 10px; }
.legal__card li strong { color: var(--ink); font-weight: 650; }
.legal__card a { color: var(--green-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.legal__card a:hover { color: #3e8314; }
.legal__disclaimer { color: var(--muted); margin: 32px auto 0; font-size: 13px; text-align: center; }

@media (max-width: 700px) {
  .legal { padding-top: 88px; padding-inline: 16px; }
  .legal__card { border-radius: 20px; padding: 24px 18px; gap: 24px; }
}

.trip { min-height: 65svh; padding: 84px 0; }
.trip__inner { max-width: 720px; margin: auto; }
.trip__title { font-size: clamp(40px, 6vw, 64px); }
.trip__date { color: var(--muted); }
.trip__line { display: flex; gap: 10px; align-items: center; }
.trip__swatch { width: 27px; height: 7px; border-radius: 8px; }
.trip__linelabel { font-weight: 700; }
.trip__arrow { color: var(--green); }
.trip__times { border-top: 1px solid var(--line); display: grid; gap: 16px; grid-template-columns: 1fr 40px 1fr; margin-top: 28px; padding-top: 24px; }
.trip__times strong { display: block; font-size: 29px;  }
.trip__times .label, .trip__note, .trip__privacy { color: var(--muted); font-size: 13px; }
.trip__times .mid { align-self: center; text-align: center; }
.trip__status { border-left: 3px solid var(--green); margin: 30px 0; padding-left: 18px; }
.trip__status h2 { font-size: 18px; }
.trip__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .hero__content { grid-template-columns: 1fr; padding-top: 76px; text-align: center; }
  .hero__copy { align-items: center; display: flex; flex-direction: column; padding-bottom: 0; }
  .hero__visual { height: 620px; min-height: 0; }
  .device--hero { left: 20%; }
  .device--hero-alt { right: 7%; }
  .feature-story, .feature-story--reverse { grid-template-columns: 1fr; text-align: center; }
  .feature-story--reverse .feature-story__copy { order: 0; }
  .feature-list { margin-left: auto; margin-right: auto; max-width: 390px; text-align: left; }
  .feature-story__screens { min-height: 500px; }
  .screen-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; }
  .capability-strip { grid-template-columns: 1fr; }
  .capability-strip article, .capability-strip article + article { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .site-header { height: 66px; }
  .nav { display: none; }
  .nav--open { background: var(--paper); border-bottom: 1px solid var(--line); display: grid; gap: 0; left: 0; padding: 10px 20px 20px; position: absolute; right: 0; top: 66px; }
  .nav--open a { padding: 13px 5px; }
  .nav-toggle { display: block; }
  .site-header__inner > .btn { display: none; }
  .hero__content { min-height: auto; padding-top: 55px; }
  .hero h1 { font-size: clamp(48px, 15vw, 67px); }
  .hero__visual { height: 495px; margin: 0 -20px; }
  .device { border-radius: 34px; border-width: 6px; }
  .device--hero { height: 92%; left: 24%; }
  .device--hero-alt { height: 76%; right: -6%; }
  .section { padding: 86px 0; }
  .section-head { margin-bottom: 44px; }
  .feature-story { gap: 35px; margin-bottom: 100px; }
  .feature-story__screens { gap: 10px; min-height: 415px; }
  .feature-story__screens .device { width: min(48%, 225px); }
  .screen-grid { grid-template-columns: 1fr 1fr; }
  .screen-card .device { width: 100%; }
  .closing { padding-top: 85px; }
  .closing__grid { grid-template-columns: 1fr; text-align: center; }
  .closing h2, .closing p { margin-left: auto; margin-right: auto; }
  .closing__device { margin-bottom: -2px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__inner > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Keep the Android waitlist entry points usable on narrow homepages. */
.page-home .tp-hero-copy>div{flex-wrap:wrap;gap:16px 24px}
@media(max-width:1000px){.page-home .tp-nav nav{display:none}}