/* Marketing home page ("Night flight"). Screens are rendered with the app's own components inside
   device frames, so they always match the product. Loaded only on /. */

.land { overflow-x: hidden; }
.land section { padding: var(--s-16) var(--s-5); }
.land .inner { max-width: 1120px; margin: 0 auto; }
.land .eyebrow { margin-bottom: var(--s-3); }
.land h2 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; max-width: 22ch; text-wrap: pretty; }
.land .lead { color: var(--fg-2); font-size: var(--fs-16); max-width: 56ch; margin-top: var(--s-4); text-wrap: pretty; }
@media (min-width: 900px) { .land section { padding: 96px var(--s-6); } .land .lead { font-size: var(--fs-20); } }

/* ---- hero -------------------------------------------------------------- */
.land-hero { padding-top: var(--s-10) !important; }
.land-hero .inner { display: grid; gap: var(--s-10); align-items: center; }
.land-hero h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.land-hero h1 em { font-style: normal; color: var(--accent-text); }
.land-hero .lead { font-size: var(--fs-20); margin-top: var(--s-5); }
.land-hero .actions { margin-top: var(--s-8); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.land-hero .trust { margin-top: var(--s-5); display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-12); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.land-hero .trust span { display: inline-flex; align-items: center; gap: 8px; }
.land-hero .trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (min-width: 900px) { .land-hero .inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .land-hero .stage { justify-self: end; } }

/* ---- device frame ------------------------------------------------------ */
.stage { position: relative; display: grid; place-items: center; }
.stage::before { content: ""; position: absolute; inset: 10% 0 -10% 0; background: radial-gradient(60% 55% at 50% 45%, rgba(255, 180, 84, .16), transparent 70%); pointer-events: none; }
.device {
  position: relative; width: 320px; max-width: 100%; padding: 12px; border-radius: 44px;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
:root[data-theme="light"] .device { box-shadow: 0 40px 80px rgba(11, 16, 32, .25); }
.device-screen { position: relative; border-radius: 34px; overflow: hidden; background: var(--bg); background-image: var(--bg-glow); min-height: 600px; padding: 18px 18px 0; display: flex; flex-direction: column; font-size: var(--fs-14); }
.device-screen .hero { margin-bottom: var(--s-5); }
.device-screen .hero-codes { font-size: 2.5rem; }
.device-screen .hero-title { font-size: var(--fs-14); }
.device-screen .hero-sub { font-size: var(--fs-12); }
.device-screen .hero-fact strong { font-size: var(--fs-14); }
.device-screen .trip-card { padding: var(--s-3) 0; gap: var(--s-3); grid-template-columns: 44px minmax(0, 1fr) auto; }
.device-screen .trip-card .trip-date { font-size: var(--fs-20); }
.device-screen .trip-card .trip-title { font-size: var(--fs-14); }
.device-screen .trip-card .trip-dates { font-size: var(--fs-12); }
.device-screen .trip-card .trip-countdown strong { font-size: var(--fs-16); }
.device-screen .seg { gap: var(--s-4); margin-bottom: var(--s-2); }
.device-screen .seg button { min-height: 34px; font-size: var(--fs-11); }
.device-screen .tabbar { position: static; margin: auto -18px 0; height: 60px; padding: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); }
.device-screen .tabbar a { min-height: 60px; font-size: 10px; }
.device-screen .tabbar .icon { width: 20px; height: 20px; }
.device-screen .d-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.device-screen .d-top .brand-name { font-size: var(--fs-12); }
.device-screen .d-top .avatar { width: 28px; height: 28px; font-size: var(--fs-12); }
.device-screen .trip-head h1 { font-size: 1.6rem; }
.device-screen .trip-head { margin-bottom: var(--s-4); }
.device-screen .stat .stat-value { font-size: var(--fs-16); }
.device-screen .tl-item { grid-template-columns: 50px 24px minmax(0, 1fr); }
.device-screen .tl-time { font-size: var(--fs-14); }
.device-screen .seg-title.seg-route { font-size: var(--fs-20); }
.device-screen .seg-sub, .device-screen .seg-right { font-size: var(--fs-12); }
.device-screen .seg-card { padding-bottom: var(--s-4); }
.device-screen .tl-day { margin-top: var(--s-3); }
.device-screen .tl-day-head { position: static; padding: var(--s-1) 0 var(--s-2); }
.device-screen .tl-gap-label { padding: var(--s-1) 0 var(--s-3); }
.device.is-small { width: 260px; padding: 10px; border-radius: 36px; }
.device.is-small .device-screen { min-height: 420px; border-radius: 28px; padding: 14px 14px 0; }

/* ---- how it works ------------------------------------------------------ */
.steps { display: grid; gap: var(--s-8); margin-top: var(--s-10); }
.step { position: relative; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.step .n { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-36); color: var(--accent-text); letter-spacing: -.03em; line-height: 1; }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); letter-spacing: -.01em; margin-top: var(--s-3); }
.step p { color: var(--fg-2); margin-top: var(--s-2); font-size: var(--fs-14); text-wrap: pretty; }
.step .copybox { margin-top: var(--s-3); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mail-mock { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: var(--fs-12); }
.mail-mock .from { display: flex; justify-content: space-between; color: var(--fg-3); }
.mail-mock .subj { font-weight: 600; margin-top: 4px; color: var(--fg); }
.mail-mock .body { margin-top: var(--s-2); color: var(--fg-2); line-height: 1.5; }
.mail-mock .body b { color: var(--fg); font-weight: 600; }
.mini-tl { margin-top: var(--s-4); }
.mini-tl .tl-day-head { position: static; padding: 0 0 var(--s-2); }
.mini-tl .tl-item { grid-template-columns: 50px 24px minmax(0, 1fr); }
.mini-tl .tl-time { font-size: var(--fs-14); }
.mini-tl .seg-card { padding-bottom: var(--s-3); cursor: default; }
.mini-tl .seg-title.seg-route { font-size: var(--fs-20); }
.mini-tl .seg-sub { font-size: var(--fs-12); }
.mini-tl .seg-card:hover .seg-title { color: inherit; }

/* ---- feature showcase (scroll-snap slider) ------------------------------- */
.showcase-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.showcase-nav { display: flex; gap: var(--s-2); }
.feat-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 360px); gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--s-5);
  margin: var(--s-8) calc(-1 * var(--s-5)) 0; padding: var(--s-2) var(--s-5) var(--s-6);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.feat-track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .feat-track { margin-inline: 0; padding-inline: 0; grid-auto-columns: 360px; } }
.feat {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  min-height: 420px;
}
.feat .eyebrow { margin-bottom: 0; color: var(--accent-text); }
.feat h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); letter-spacing: -.02em; line-height: 1.1; }
.feat p { color: var(--fg-2); font-size: var(--fs-14); text-wrap: pretty; }
.feat .visual { margin-top: auto; padding: var(--s-4); border-radius: 14px; background: var(--bg); background-image: var(--bg-glow); border: 1px solid var(--line); font-size: var(--fs-13, .8125rem); }
.notif { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); }
.notif .app-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
.notif .app-ic .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.notif .t { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.notif .h { font-weight: 600; margin-top: 2px; color: var(--fg); }
.notif .b { color: var(--fg-2); margin-top: 1px; }
.notif + .notif { margin-top: 10px; }
.kvrow { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--line); }
.kvrow:last-child { border-bottom: 0; }
.kvrow .k { color: var(--fg-2); }
.kvrow .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.kvrow .v.faded { text-decoration: line-through; color: var(--fg-3); font-weight: 400; }
.kvrow.total { border-top: 1px solid var(--line-strong); border-bottom: 0; margin-top: 4px; padding-top: 10px; }
.kvrow.total .v { font-family: var(--font-display); font-size: var(--fs-16); }
.code { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--fg-2); white-space: pre; overflow-x: auto; }
.code b { color: var(--accent-text); font-weight: 500; }
.code i { color: var(--ok-text); font-style: normal; }
.share-rule { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.share-rule:last-child { border-bottom: 0; }
.share-rule .ic { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: var(--fg-2); }
.share-rule .ic .icon { width: 15px; height: 15px; }
.share-rule .w { font-weight: 600; }
.share-rule .d { font-size: 12px; color: var(--fg-3); }

/* ---- compare ------------------------------------------------------------ */
.compare { margin-top: var(--s-10); border-top: 1px solid var(--line); }
.compare .row3 { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.compare .row3 .them { color: var(--fg-3); font-size: var(--fs-14); }
.compare .row3 .them::before { content: "Before · "; font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase; }
.compare .row3 .us { font-weight: 600; }
.compare .row3 .us::before { content: "Inn Transit · "; font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; }
@media (min-width: 760px) {
  .compare .row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-8); align-items: start; }
  .compare .row3 .them::before, .compare .row3 .us::before { display: block; margin-bottom: 4px; }
}

/* ---- plans -------------------------------------------------------------- */
.plans { display: grid; gap: var(--s-4); margin-top: var(--s-10); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { padding: var(--s-6); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); display: flex; flex-direction: column; gap: var(--s-4); }
.plan.is-featured { border-color: var(--accent); box-shadow: var(--accent-glow); }
.plan .name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); letter-spacing: -.02em; }
.plan .price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-36); letter-spacing: -.03em; line-height: 1; }
.plan .price small { font-family: var(--font); font-weight: 500; font-size: var(--fs-12); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); display: block; margin-top: 6px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-14); color: var(--fg-2); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .icon { width: 16px; height: 16px; color: var(--accent-text); margin-top: 3px; }
.plan .btn { margin-top: auto; }

/* ---- final cta + footer -------------------------------------------------- */
.land-cta { text-align: center; border-top: 1px solid var(--line); }
.land-cta h2 { margin: 0 auto; }
.land-cta .actions { margin-top: var(--s-8); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.land .footer { padding-top: 0; }