/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * Apple-design pass · custom Sylt light · no fabricated metrics · no fake device chrome
 */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --surface-nav: rgba(255, 255, 255, 0.78);
  --surface-nav-strong: rgba(255, 255, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.84);
  --surface-glass-strong: rgba(255, 255, 255, 0.94);
  --surface-demo: rgba(255, 255, 255, 0.72);
  --surface-demo-edge: rgba(19, 35, 38, 0.12);
  --surface-demo-highlight: rgba(255, 255, 255, 0.72);
  --focus-ring: rgba(10, 119, 110, 0.44);
  --press-shadow: 0 8px 20px rgba(19, 35, 38, 0.12);
  --glass-shadow: 0 24px 70px rgba(39, 63, 59, 0.12);
  --demo-shadow: 0 30px 90px rgba(30, 58, 54, 0.14);
  --hairline: rgba(19, 35, 38, 0.09);
  --hairline-strong: rgba(19, 35, 38, 0.16);
  --white: #ffffff;
}

html,
body {
  overflow-x: clip;
}

body[data-nav-open="true"] {
  overflow-x: clip;
  overflow-y: hidden;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
.footer-statement {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-style: normal;
  font-optical-sizing: auto;
}

h1 {
  letter-spacing: -0.045em;
  line-height: 0.93;
}

h2 {
  letter-spacing: -0.036em;
  line-height: 0.99;
}

h3 {
  letter-spacing: -0.026em;
  line-height: 1.08;
}

.hero h1 em,
.hero h1 .hero-accent {
  color: var(--sea);
  font-style: normal;
}

:focus-visible {
  outline-color: var(--focus-ring);
}

/* Floating chrome: translucent, quiet and legible rather than opaque. */
.site-header:not([data-scrolled="true"]) .nav-shell {
  background: var(--surface-nav);
  border-color: transparent;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.site-header[data-scrolled="true"] .nav-shell {
  background: var(--surface-nav-strong);
  border-color: var(--hairline);
  box-shadow: 0 16px 44px rgba(39, 63, 59, 0.09);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.mobile-nav {
  background: var(--surface-nav-strong);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

/* Apple-style immediate feedback: response begins on press, not after click. */
.button,
.nav-toggle,
.faq-list summary,
.desktop-nav a,
.mobile-nav a {
  -webkit-tap-highlight-color: transparent;
}

.button:active {
  transform: scale(0.975);
  box-shadow: var(--press-shadow);
  transition-duration: 90ms;
}

.nav-toggle:active,
.brand-mark:active {
  transform: scale(0.96);
}

.button:focus-visible,
.nav-toggle:focus-visible,
.desktop-nav a:focus-visible,
.mobile-nav a:focus-visible,
.faq-list summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

/* Hero: calmer scale and cleaner reading measure at laptop widths. */
.hero-grid {
  grid-template-columns: minmax(0, 0.94fr) minmax(440px, 1.06fr);
}

.hero h1 {
  max-width: 9.8ch;
  font-size: clamp(3.75rem, 7.5vw, 7.2rem);
}

.hero-copy {
  max-width: 54ch;
}

.hero-stage {
  border-color: var(--hairline);
  box-shadow: 0 38px 110px rgba(39, 63, 59, 0.15);
}

.glass-card,
.ai-window,
.route-floating-card,
.scan-result,
.scan-canvas-label {
  border-color: var(--surface-demo-highlight);
  background: var(--surface-glass);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

/* Map-marker bug: the previous teardrop transform rotated the glyph with it. */
.poi-pin {
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transform: none;
}

.poi-pin::first-letter {
  transform: none;
}

/* Product preview: content canvas, deliberately not a redrawn iPhone. */
.story-visual {
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 24px;
}

.story-progress {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  bottom: auto;
  align-self: stretch;
  width: 2px;
  height: min(66svh, 570px);
  margin-block: auto;
}

.app-frame {
  width: min(470px, 88vw);
  aspect-ratio: 0.72;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--surface-demo-edge);
  border-radius: 32px;
  background: var(--surface-demo);
  box-shadow: var(--demo-shadow), 0 1px 0 var(--surface-demo-highlight) inset;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.app-frame::before,
.app-frame-top {
  display: none !important;
}

.app-screen-stack {
  height: 100%;
  border-radius: inherit;
  background: var(--paper-soft);
  box-shadow: none;
}

.app-screen {
  padding: 34px 24px 24px;
}

.screen-head {
  margin-bottom: 22px;
}

.screen-head strong {
  font-size: 1.34rem;
}

.search-pill {
  padding: 12px 14px;
}

.map-result {
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 17px;
}

.tour-hero-card {
  min-height: 250px;
}

.radio-card {
  padding: 22px;
}

.stage-card,
.map-result,
.ai-result,
.decision-stack > div,
.route-floating-card,
.event-stack > div,
.weather-facts > div {
  min-width: 0;
}

.stage-card strong,
.stage-card p,
.map-result strong,
.map-result p,
.ai-result strong,
.ai-result small,
.decision-stack strong,
.decision-stack small,
.route-floating-card strong,
.event-stack strong,
.weather-facts strong {
  overflow-wrap: anywhere;
}

.story-chapter[data-active="true"] .chapter-number {
  color: var(--sea);
}

.story-chapter[data-active="true"] h3 {
  color: var(--ink);
}

/* The mode overview becomes a real responsive grid instead of a horizontal-scroll rail. */
.mode-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mode-item b,
.mode-item small {
  overflow-wrap: anywhere;
}

/* Keep section rhythm editorial and avoid oversized copy colliding with visual panels. */
.section-intro > h2,
.copy-column > h2,
.faq-copy > h2,
.cta-shell > h2 {
  min-width: 0;
}

.media-grid,
.context-grid,
.split-grid,
.story-layout,
.hero-grid {
  min-width: 0;
}

.media-grid > *,
.context-grid > *,
.split-grid > *,
.story-layout > *,
.hero-grid > * {
  min-width: 0;
}

/* Static product signals replace decorative infinite animation. */
.wave i {
  transform: none !important;
}

.radio-pulse {
  box-shadow: 0 0 0 7px rgba(19, 35, 38, 0.08);
}

.scan-line,
.scan-canvas-beam {
  opacity: 0.92;
}

/* Laptop-height resilience. */
@media (min-width: 981px) and (max-height: 860px) {
  .hero {
    min-height: 100svh;
    padding-top: calc(var(--header) + 34px);
    padding-bottom: 64px;
  }

  .hero-stage {
    min-height: clamp(500px, 67svh, 565px);
  }

  .stage-card-ai { top: 28%; }
  .stage-card-weather { top: 44%; }
  .stage-card-media { top: 60%; }

  .story-visual {
    min-height: calc(100svh - var(--header) - 24px);
    padding-block: 12px;
  }

  .app-frame {
    width: min(400px, 76vw);
  }

  .story-progress {
    height: min(62svh, 500px);
  }

  .story-chapter {
    min-height: min(76vh, 610px);
    padding-block: clamp(48px, 6vw, 74px);
  }
}

/* Desktop/tablet seam. */
@media (min-width: 981px) and (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(390px, 1.02fr);
    gap: 32px;
  }

  .hero h1 {
    font-size: clamp(3.8rem, 7.1vw, 6.1rem);
  }

  .hero-stage {
    min-height: 570px;
  }

  .stage-card {
    width: min(205px, 44%);
  }

  .story-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(350px, 1.08fr);
    gap: 40px;
  }

  .app-frame {
    width: min(410px, 80vw);
  }
}

/* Hallmark mobile floor: explicit 768 / 414 / 375 / 320 handling. */
@media (max-width: 768px) {
  .container {
    width: min(calc(100% - 32px), var(--max));
  }

  .section {
    padding-block: clamp(76px, 16vw, 96px);
  }

  .hero {
    padding-top: calc(var(--header) + 42px);
  }

  .hero h1 {
    max-width: 10.5ch;
    font-size: clamp(3.15rem, 15vw, 5.25rem);
    line-height: 0.94;
  }

  .hero-copy {
    max-width: 46ch;
  }

  .hero-stage {
    min-height: clamp(470px, 72svh, 540px);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
  }

  .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .mode-item {
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .mode-item:nth-child(2n) {
    border-right: 0;
  }

  .mode-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .mode-item:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .section-intro,
  .section-intro.centered {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .section-intro > p,
  .section-intro.centered > p {
    grid-column: auto;
    margin-inline: 0;
  }

  .section-intro.centered > div {
    justify-content: flex-start;
  }

  .mobile-preview {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }

  .mobile-app-frame {
    width: min(100%, 430px);
    max-height: none;
    aspect-ratio: 0.72;
  }

  .mobile-app-frame .app-screen {
    padding: 30px 20px 20px;
  }

  .media-card,
  .context-card,
  .route-canvas,
  .ai-canvas {
    max-width: 100%;
  }

  .footer-meta nav {
    gap: 14px 18px;
  }
}

@media (max-width: 414px) {
  .container {
    width: min(calc(100% - 24px), var(--max));
  }

  .brand-word {
    max-width: 102px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero {
    padding-top: calc(var(--header) + 34px);
    padding-bottom: 64px;
  }

  .hero h1 {
    font-size: clamp(3rem, 15.8vw, 4.15rem);
  }

  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-actions .button {
    min-height: 48px;
    white-space: nowrap;
  }

  .hero-proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-stage {
    min-height: 460px;
    border-radius: 30px;
  }

  .stage-card {
    width: min(170px, calc(100% - 22px));
  }

  .stage-card-media {
    display: none;
  }

  .stage-caption > strong {
    max-width: 15ch;
  }

  .mode-grid {
    border-radius: 24px;
  }

  .mode-item {
    padding: 15px 14px;
  }

  .mobile-preview {
    border-radius: 26px;
  }

  .mobile-app-frame {
    border-radius: 26px;
  }

  .mobile-app-frame .app-screen {
    padding: 27px 16px 16px;
  }

  .decision-stack > div {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .weather-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }

  .footer-meta nav {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
}

@media (max-width: 375px) {
  .hero h1 {
    font-size: clamp(2.85rem, 15.4vw, 3.7rem);
  }

  .eyebrow {
    letter-spacing: 0.065em;
  }

  .stage-brand {
    max-width: calc(100% - 28px);
  }

  .stage-brand small {
    display: none;
  }

  .stage-card {
    width: min(158px, calc(100% - 20px));
  }

  .section-intro h2,
  .copy-column h2,
  .faq-copy h2,
  .cta-shell h2 {
    font-size: clamp(2.35rem, 12vw, 3.1rem);
  }
}

@media (max-width: 320px) {
  .container {
    width: calc(100% - 20px);
  }

  .brand-word {
    display: none;
  }

  .nav-shell {
    padding-left: 7px;
  }

  .hero h1 {
    font-size: 2.78rem;
  }

  .hero-stage {
    min-height: 440px;
  }

  .stage-card-weather {
    right: 8px;
  }

  .mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mode-item,
  .mode-item:nth-child(2n),
  .mode-item:nth-last-child(-n + 2),
  .mode-item:last-child {
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .mode-item:last-child {
    border-bottom: 0;
  }

  .mobile-preview {
    padding: 8px;
  }

  .mobile-app-frame .app-screen {
    padding: 24px 13px 13px;
  }

  .footer-meta nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-hero-kicker],
  [data-hero-title],
  [data-hero-copy],
  [data-hero-actions],
  [data-hero-proof],
  [data-hero-visual],
  [data-float-card] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .button:active,
  .nav-toggle:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-shell,
  .mobile-nav,
  .glass-card,
  .ai-window,
  .route-floating-card,
  .scan-result,
  .scan-canvas-label,
  .app-frame {
    background: var(--white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  .nav-shell,
  .glass-card,
  .ai-window,
  .route-floating-card,
  .scan-result,
  .scan-canvas-label,
  .app-frame,
  .media-card,
  .context-card {
    border-color: var(--ink) !important;
  }

  .muted,
  .hero-copy,
  .copy-column p,
  .section-intro > p {
    color: var(--ink) !important;
  }
}

@media (forced-colors: active) {
  .brand-mark,
  .button-primary,
  .radio-pulse,
  .poi-pin {
    forced-color-adjust: auto;
  }
}