/* Go train watch — product-led static site */
:root {
  --ink: oklch(17% 0.015 152);
  --ink-soft: oklch(25% 0.015 152);
  --paper: oklch(98% 0.008 128);
  --surface: oklch(100% 0 0);
  --mist: oklch(95% 0.014 142);
  --line: oklch(90% 0.012 142);
  --muted: oklch(49% 0.018 150);
  --green: oklch(54% 0.135 151);
  --green-dark: oklch(37% 0.10 151);
  --lime: oklch(84% 0.12 125);
  --maxw: 1180px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* The former gallery shell remains in the source temporarily, but is not part of the port. */
body > .site-header { display: none; }

/* Faithful structure port of the App Via Framer project; content and media are Go train watch's. */
body > main:not(#template-port), body > footer:not(#template-footer) { display: none; }
#template-port { color:#161616; background:#fff; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow:hidden; }
.tp-hero { min-height:1244px; padding:25px 30px 54px; background:radial-gradient(70% 44% at 50% 16%,#eaf5ef 0%,#fbfdfc 54%,#fff 75%); position:relative; }
.tp-nav { height:64px; max-width:1140px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; }
.tp-logo { letter-spacing:-.045em; font-size:19px; color:#171717; text-decoration:none; }.tp-nav nav{display:flex;gap:29px}.tp-nav nav a{color:#4e514f;text-decoration:none}
.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:#17211b;color:#fff}
.tp-hero-copy { text-align:center; max-width:749px; margin:110px auto 53px; }.tp-tag{color:#538167;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:750}.tp-hero h1,.tp-head h2{letter-spacing:-.065em;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:#686d69;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:#334f3e;font-weight:650;text-decoration:none}
.tp-hero-phones{height:676px;max-width:1140px;margin:auto;display:flex;justify-content:center;align-items:flex-end;gap:63px;overflow:hidden}.tp-phone{position:relative;border:7px solid #171817;border-radius:38px;background:#171817;box-shadow:0 24px 50px #15221c28;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:#161716}.tp-phone img{width:100%;aspect-ratio:9/19.5;object-fit:cover;display:block;border-radius:30px}.tp-hero-phones .tp-phone--small{width:262px;transform:translateY(103px)}.tp-hero-phones .tp-phone--large{width:332px}.tp-hero-phones .tp-phone--large img{aspect-ratio:9/19.5}
.tp-brands{height:220px;padding:54px 30px 80px;text-align:center;box-sizing:border-box}.tp-brands p{font-size:13px;color:#7a807b;margin:0 0 31px}.tp-brands div{max-width:1000px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:30px;color:#313a34;text-transform:uppercase;font-size:18px;letter-spacing:.07em;font-weight:700}
.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 #e4eae5;border-radius:20px;padding:31px;min-height:250px;background:#fbfdfb}.tp-proof b{color:#628b70;font-size:13px}.tp-proof h3,.tp-feature-grid h3,.tp-work-copy h3{letter-spacing:-.045em;font-size:24px;margin:62px 0 11px}.tp-proof p,.tp-feature-grid p,.tp-work-copy p{color:#686d69;font-size:15px;line-height:1.55;margin:0}
.tp-work{padding-top:64px;padding-bottom:72px}.tp-work-card{min-height:440px;border-radius:28px;border:1px solid #e4eae5;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}.tp-work-card .tp-phone{width:218px;transform:rotate(-5deg)}.tp-work-card--reverse .tp-phone{transform:rotate(5deg)}.tp-phone-pair{display:flex;align-items:center;gap:22px}.tp-phone-pair .tp-phone:first-child{transform:rotate(-6deg)}.tp-phone-pair .tp-phone:last-child{transform:rotate(6deg) translateY(10px)}.tp-work-card--reverse .tp-phone-pair .tp-phone:first-child{transform:rotate(-6deg) translateY(10px)}.tp-work-card--reverse .tp-phone-pair .tp-phone:last-child{transform:rotate(6deg)}
.tp-features{max-width:none;background:#18251d;color:#fff;padding:112px 30px}.tp-features .tp-head h2{color:#fff}.tp-features .tp-head p{color:#b9c9bd}.tp-features .tp-tag{color:#9dd0a8}.tp-feature-grid{max-width:1140px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tp-feature-grid article{padding:20px 20px 28px;background:#213028;border:1px solid #33443a;border-radius:20px}.tp-feature-grid .tp-phone{width:100%;border-width:5px;border-radius:25px;box-shadow:none}.tp-feature-grid .tp-phone img{border-radius:19px}.tp-feature-grid h3{font-size:21px;margin:27px 0 9px}.tp-feature-grid p{color:#b4c0b7}.tp-feature-grid .tp-phone-pair--grid{display:flex;gap:10px}.tp-feature-grid .tp-phone-pair--grid .tp-phone{width:50%;border-width:4px}
.tp-screens{padding:132px 0;background:#f7f8f6}.tp-screens .tp-head{padding:0 30px}.tp-screen-marquee{display:flex;gap:20px;overflow:auto;padding:5px max(30px,calc((100vw - 1140px)/2));scroll-snap-type:x mandatory}.tp-screen-marquee img{height:395px;border:6px solid #171817;border-radius:30px;box-shadow:0 18px 40px #17211b22;scroll-snap-align:start}
.tp-faq{padding-top:160px;padding-bottom:80px;background:#f1f7f2;max-width:none}.tp-faq .tp-head{max-width:689px}.tp-links{max-width:884px;margin:auto;border-top:1px solid #d7e1d9}.tp-links a{min-height:84px;padding:23px 0;display:grid;grid-template-columns:240px 1fr 20px;align-items:center;gap:16px;color:#1e2821;text-decoration:none;border-bottom:1px solid #d7e1d9}.tp-links strong{font-size:16px}.tp-links span{font-size:14px;color:#68746b}.tp-links i{font-style:normal;font-size:20px}
.tp-contact{padding:80px 30px 160px;background:#f1f7f2}.tp-contact-bottom{max-width:1140px;margin:0 auto;min-height:390px;border-radius:28px;background:#dbeee0;display:flex;align-items:center;justify-content:space-around;overflow:hidden}.tp-contact-bottom .tp-phone{width:210px;transform:translateY(60px)}
#template-footer{padding:26px 30px;display:flex;gap:22px;align-items:center;justify-content:center;font-size:12px;color:#68746b;background:#f1f7f2;border-top:1px solid #d7e1d9}#template-footer a{color:#314c3a;text-decoration:none;font-weight:600}
@media(max-width:700px){.tp-hero{min-height:940px;padding-inline:18px}.tp-nav nav{display:none}.tp-nav .tp-button{padding:11px 15px}.tp-hero-copy{margin-top:70px}.tp-hero h1{font-size:50px}.tp-hero-phones{gap:18px;height:455px}.tp-hero-phones .tp-phone--small{width:150px;transform:translateY(76px)}.tp-hero-phones .tp-phone--large{width:192px}.tp-brands{height:auto;padding:45px 20px}.tp-brands div{font-size:11px;gap:16px;flex-wrap:wrap;justify-content:center}.tp-section{padding:72px 20px}.tp-proof,.tp-feature-grid{grid-template-columns:1fr}.tp-proof article{min-height:0}.tp-proof h3{margin-top:34px}.tp-work-card,.tp-work-card--reverse{padding:32px 24px;min-height:0;display:flex;flex-direction:column;gap:24px;margin-bottom:24px}.tp-work-card .tp-phone{width:200px}.tp-phone-pair{gap:14px}.tp-phone-pair .tp-phone{width:150px}.tp-features{padding-inline:20px}.tp-feature-grid{max-width:300px}.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)}#template-footer{flex-wrap:wrap;gap:13px}}

/* CSS 3D device treatment from mockup-device-3d, adapted to this light Framer port. */
#template-port { --device-titanium: #a8a8ad; }
.tp-hero-phones { perspective: 1700px; transform-style: preserve-3d; }
.tp-phone {
  border: 4px solid var(--device-titanium);
  border-radius: 43px;
  background: linear-gradient(125deg, #f0f0f2 0%, #8e8f95 42%, #d8d8dc 69%, #72737a 100%);
  padding: 4px;
  box-shadow: 0 3px 0 #686970, 0 18px 20px #17211b22, 18px 30px 46px #17211b23;
  transform-style: preserve-3d;
}
.tp-phone::after {
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  border-radius:38px;
  background:
    radial-gradient(ellipse 42% 15% at 25% 3%, rgba(255,255,255,.76), transparent 68%),
    linear-gradient(112deg, rgba(255,255,255,.27), transparent 20%, transparent 78%, rgba(255,255,255,.17));
}
.tp-phone img { border-radius:34px; }
.tp-phone:before { top:11px; height:19px; background:#101113; box-shadow:0 1px 2px #ffffff1f inset; }
.tp-hero-phones .tp-phone--small { transform:translateY(103px) rotateY(10deg) rotateX(3deg); }
.tp-hero-phones .tp-phone--large { transform:translateZ(42px) rotateX(2deg); }
.tp-hero-phones .tp-phone--small:last-child { transform:translateY(103px) rotateY(-10deg) rotateX(3deg); }
.tp-work-card .tp-phone { transform:rotateY(-12deg) rotateX(4deg) rotateZ(-4deg); }
.tp-work-card--reverse .tp-phone { transform:rotateY(12deg) rotateX(4deg) rotateZ(4deg); }
.tp-feature-grid .tp-phone { border-width:3px; padding:3px; border-radius:28px; }
.tp-feature-grid .tp-phone img { border-radius:21px; }
@media (prefers-reduced-motion: no-preference) {
  .tp-hero-phones .tp-phone--large { animation: device-turntable 8s ease-in-out infinite alternate; }
}
@keyframes device-turntable {
  from { transform: translateZ(42px) rotateY(-4deg) rotateX(2deg); }
  to { transform: translateZ(42px) rotateY(4deg) rotateX(2deg); }
}
@media(max-width:700px) {
  .tp-hero-phones .tp-phone--small { transform:translateY(76px) rotateY(8deg) rotateX(3deg); }
  .tp-hero-phones .tp-phone--small:last-child { transform:translateY(76px) rotateY(-8deg) rotateX(3deg); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
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); letter-spacing: -.055em; 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; letter-spacing: .12em; text-transform: uppercase; }
.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; letter-spacing: -.035em; 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; letter-spacing: .12em; margin: 0 0 13px; text-transform: uppercase; }
.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/trip shared pages */
.legal, .trip { min-height: 65svh; padding: 84px 0; }
.legal__inner, .trip__inner { max-width: 720px; margin: auto; }
.legal h1, .trip__title { font-size: clamp(40px, 6vw, 64px); }
.legal__updated, .trip__date { color: var(--muted); }
.legal__card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 30px; padding: clamp(26px, 5vw, 46px); }
.legal__card h2 { font-size: 22px; }
.legal__card p, .legal__card ul { color: var(--muted); }
.legal__card a { color: var(--green-dark); font-weight: 700; }
.legal__back { color: var(--green-dark); font-size: 14px; font-weight: 700; }
.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; letter-spacing: -.04em; }
.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; } }