/* 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-hero-form { 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 "Join waitlist"
 * 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 "Join waitlist" button — style-active="transform: translate(3px,3px); box-shadow: 0 0 0 var(--shadow-hard)" */
header nav a[href="#waitlist"]:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--shadow-hard) !important;
}

/* hero form button — style-active="transform: translate(3px,3px); box-shadow: 0 0 0 var(--shadow-hard)" */
.so-hero-form button:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--shadow-hard) !important;
}

/* repeat-CTA button — style-active="transform: translate(3px,3px); box-shadow: 0 0 0 var(--border-strong)" */
.so-cta-form button:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--border-strong) !important;
}

/* 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; }