/* Ship Marine AI landing page (Index) - the approved "Landing" layout (design 2026-10-05): hero with the globe,
   the module list and About. Tokens only. */
.sm-band { border-bottom: 1px solid var(--rule); }
.sm-band-inner { max-width: 1200px; margin: 0 auto; padding: clamp(72px, 10vw, 128px) clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }

/* hero */
.sm-hero { position: relative; overflow: hidden; }
.sm-hero .sm-band-inner { padding: clamp(24px, 3.5vw, 48px) clamp(16px, 4vw, 40px) clamp(40px, 5vw, 72px); align-items: center; gap: clamp(24px, 3.5vw, 48px); }
/* desktop: heading and globe side by side, the globe sized to the window height so it shows without scrolling */
@media (min-width: 900px) {
  .sm-hero .sm-band-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); padding-top: 48px; }
  .sm-hero-text { align-self: start; }
  .sm-hero-visual { width: 100%; max-width: min(560px, calc(100vh - 190px)); }
}
.sm-hero-text { position: relative; top: var(--sm-hero-sphere-offset, 0px); flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sm-display-hero { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.025em; max-width: 14ch; }
.sm-hero-lead { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-muted); max-width: 52ch; }
.sm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sm-btn--hero { min-height: 52px; padding: 0 26px; font-size: 16px; }
.sm-hero-link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 6px; color: var(--ink); font-size: 16px; font-weight: 500; text-underline-offset: 5px; }
.sm-hero-visual { flex: 1 1 420px; min-width: 0; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.sm-globe { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.sm-globe canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.sm-zones { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-zone { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted); font-family: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sm-zone[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.sm-zone[aria-pressed="true"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* modules and about */
.sm-band-intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sm-display-section { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
.sm-band-lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-muted); max-width: 40ch; }
.sm-features { flex: 2 1 560px; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.sm-feature { padding: 24px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.sm-feature dt { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; }
.sm-feature dt svg { color: var(--accent); flex-shrink: 0; }
.sm-feature dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.sm-feature-link { font-size: 16px; font-weight: 600; color: var(--accent); text-decoration: none; }
.sm-feature-link:hover { text-decoration: underline; }
.sm-about { flex: 1 1 100%; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.sm-about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 56px); }
.sm-about-col { padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.sm-about-col h3 { margin: 0; font-size: 18px; font-weight: 600; }
.sm-about-col p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }