/* Swipeout marketing site — page stylesheet.
 *
 * Links the Trippy/Swipeout design system (tokens + fonts) verbatim from _ds/, then carries
 * the page-level <style> block that shipped in the original Design Component, plus the
 * interactive states (the DC's `style-active` / `style-hover` attributes) ported to real CSS.
 *
 * Everything visual here is a 1:1 port of the approved design — do not restyle. */

@import url("_ds/ds/styles.css");

/* ---- Page-level block, verbatim from the original DC <style> ---- */
html { scroll-behavior: smooth; }
body { margin: 0; }
@keyframes soFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.so-float { animation: soFloat 6s ease-in-out infinite; }
header nav { flex-shrink: 0; }
header nav a { white-space: nowrap; }
.so-hero[data-hl="centered"] .so-hero-grid { grid-template-columns: 1fr; }
.so-hero[data-hl="centered"] .so-hero-copy { align-items: center; text-align: center; margin: 0 auto; }
.so-hero[data-hl="centered"] .so-store-badges { justify-content: center; }
.so-hero[data-hl="centered"] .so-hero-phones { margin-top: 12px; }
@media (max-width: 920px) {
  .so-hero-grid { grid-template-columns: 1fr !important; }
  .so-feat-grid { grid-template-columns: 1fr !important; }
  .so-hero-copy { align-items: flex-start; text-align: left; }
  /* Stack feature sections copy-first on narrow screens (the phone follows the text). */
  .so-feat-phone { order: 1; }
}

/* Small screens: the wordmark + two text links + CTA don't fit the nav, so the "Download"
 * button overflows and gets clipped. Drop the secondary text links and keep the wordmark + CTA
 * (the page is a single anchor-scroll, so the links aren't essential on mobile). */
@media (max-width: 600px) {
  header nav a[href="#features"],
  header nav a[href="#footer"] { display: none; }
}

/* ---- Interactive states (ported from the DC's style-hover / style-active attributes) ----
 * The base styles are inline on each element, so these state rules need !important to take
 * over while hovered/pressed. Values match the original attributes exactly. */

/* nav text links — style-hover="color: var(--primary-text)" */
header nav a[href="#features"]:hover,
header nav a[href="#footer"]:hover { color: var(--primary-text) !important; }

/* nav "Download" button — style-active="transform: translate(3px,3px); box-shadow: 0 0 0 var(--shadow-hard)" */
header nav a[href="#download"]:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--shadow-hard) !important;
}

/* The nav "Download" button targets the coral CTA section; offset the scroll landing so the
 * sticky header doesn't cover the top of it. */
#download { scroll-margin-top: 74px; }

/* ---- App Store / Google Play badges (hero, repeat CTA, footer) ----
 * The badge artwork is the official fixed-aspect store art; size by height and let width
 * follow so both badges line up on a shared baseline. Same press feel as the sticker buttons. */
.so-store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  transition: transform 80ms ease, opacity 80ms ease;
}
.so-store-badge img { height: 54px; width: auto; display: block; }
.so-store-badge:hover { opacity: 0.88; }
.so-store-badge:active { transform: translate(2px, 2px); }
.so-store-badge:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.so-store-badges-sm .so-store-badge img { height: 44px; }
@media (max-width: 420px) {
  .so-store-badge img { height: 48px; }
}

/* footer links — style-hover="color: var(--primary)" */
footer a:hover { color: var(--primary) !important; }

/* ---- Behavioral helpers (added for functionality; no visual change to the design) ---- */

/* `hidden` is authoritative even over inline display:flex on the form/status/success blocks. */
[hidden] { display: none !important; }

/* visually-hidden honeypot — invisible, removed from tab order, zero layout footprint. */
.so-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* loading spinner for the status row's progress_activity glyph. */
@keyframes soSpin { to { transform: rotate(360deg); } }
.so-spin { animation: soSpin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .so-spin { animation: none; }
  .so-float { animation: none; }
}

/* disabled submit button while a request is in flight. */
button[disabled] { opacity: 0.7; cursor: default; }

/* ---- Phone-mockup scroll regions (feature showcases) ---- */
/* Vertical scroll inside the Create Trip mockup: a slim scrollbar with a stable
 * gutter reserved on BOTH edges so content stays symmetric and nothing is clipped. */
.so-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; scrollbar-gutter: stable both-edges; }
.so-scroll::-webkit-scrollbar { width: 6px; }
.so-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.so-scroll::-webkit-scrollbar-track { background: transparent; }

/* Horizontal swipeable tray (confirmed-plan mockup): hide the scrollbar, keep swipe. */
.so-scroll-x { scrollbar-width: none; -ms-overflow-style: none; }
.so-scroll-x::-webkit-scrollbar { display: none; }