/* yachti.org landing — page layer on top of the DS token spine (brief 0028 Session B).
   Everything colour/spacing/motion references tokens.css; this file is layout + composition only. */

/* ---------- Nav (glass, sticky) ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-5); padding: 10px clamp(16px, 4vw, 40px); background: var(--surface-glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.nav__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--brand-emphasis); text-decoration: none; letter-spacing: var(--tracking-tight); }
.dot { color: var(--cta); }
.nav__links { display: flex; gap: var(--space-4); margin-inline: auto; flex-wrap: wrap; }
.nav__links a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: color var(--motion-fast) var(--ease-out); }
.nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; gap: var(--space-2); }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ---------- Shared band layout ---------- */
.band { max-width: 1080px; margin: 0 auto; padding: clamp(56px, 9vw, 104px) clamp(16px, 4vw, 40px); text-align: center; }
.band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.06; letter-spacing: var(--tracking-display); color: var(--brand-emphasis); margin: 0 auto var(--space-4); }
.eyebrow { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--text-xs); color: var(--cta-emphasis); margin: 0 0 var(--space-3); }
.eyebrow--onDark { color: var(--cta-300, var(--cta)); }
.lede { font-size: var(--text-md); color: var(--text-muted); margin: 0 auto var(--space-5); }
.body { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-relaxed); max-width: 62ch; margin: var(--space-5) auto 0; }
.band--tint { max-width: none; background: linear-gradient(180deg, var(--tint-mint), transparent 85%); }
.band--tint > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.band--dark { max-width: none; background: var(--primary-800); }
.band--dark h2 { color: var(--neutral-0); }
.band--dark > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.strike { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--cta); opacity: 0.55; }

/* ---------- Hero ---------- */
.hero { position: relative; max-width: 1120px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px) 0; text-align: center; overflow-x: clip; }
.hero__glow { position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(48% 42% at 50% 30%, var(--brand-soft), transparent 70%), radial-gradient(30% 30% at 68% 20%, var(--cta-soft), transparent 70%); pointer-events: none; z-index: -1; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6.4vw, 64px); line-height: 1.03; letter-spacing: var(--tracking-display); color: var(--brand-emphasis); margin: 0 0 var(--space-4); }
.hero h1 em { font-style: normal; color: var(--cta); }
.hero__sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 2.4vw, 22px); color: var(--brand-emphasis); margin: 0 0 var(--space-5); }
.hero__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero__stage { height: var(--stage-h, 560px); margin-top: var(--space-6); }
@media (max-width: 720px) { .hero__stage { height: 480px; } }

/* Device frame */
.phone { position: relative; width: min(272px, 64vw); margin: 0 auto; border-radius: 44px; background: var(--neutral-900); padding: 10px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-strong); }
.phone img { display: block; width: 100%; border-radius: 36px; }

/* Floating hero cards (clickable) */
.ds-floating-cards__item { text-decoration: none; }
.fcard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); transition: transform var(--motion-fast) var(--ease-spring), box-shadow var(--motion-fast) var(--ease-out); }
.fcard small { color: var(--text-muted); font-size: var(--text-2xs); }
.ds-floating-cards__item:hover .fcard { transform: scale(1.04); box-shadow: var(--shadow-lg); }
@media (max-width: 720px) { .ds-floating-cards__item:nth-of-type(n+5) { display: none; } .fcard small { display: none; } }

/* ---------- Grids + cards ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); text-align: left; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); text-align: left; }
@media (max-width: 960px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.pain h3 { font-size: var(--text-md); margin: 0 0 var(--space-2); font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.pain p, .feat p, .eco p, .darkcard p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; }
.feat h3, .eco h3 { font-size: var(--text-base); margin: var(--space-3) 0 var(--space-1); font-family: var(--font-display); }
.feat__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); font-size: var(--text-lg); }
.darkcard { background: hsl(var(--brand-primary-h) 38% 18%); border: 1px solid hsl(var(--brand-primary-h) 30% 26%); border-radius: var(--radius-xl); padding: var(--space-5); }
.darkcard h3 { color: var(--neutral-0); margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-md); }
.darkcard p { color: var(--primary-200); }

/* ---------- Cascade graphic ---------- */
.cascade { display: grid; justify-items: center; gap: 0; margin-top: var(--space-5); }
.cascade__source { display: grid; gap: 6px; justify-items: center; }
.cascade__source small { color: var(--text-muted); font-size: var(--text-2xs); }
.cascade__lines { display: flex; gap: clamp(24px, 8vw, 90px); height: 44px; align-items: stretch; }
.cascade__lines span { width: 2px; background: linear-gradient(180deg, var(--brand), var(--primary-200)); border-radius: 2px; animation: cascade-pulse 2.2s var(--ease-out) infinite; }
.cascade__lines span:nth-child(2) { animation-delay: .25s; }
.cascade__lines span:nth-child(3) { animation-delay: .5s; }
.cascade__lines span:nth-child(4) { animation-delay: .75s; }
@keyframes cascade-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cascade__targets { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* ---------- Photo band ---------- */
.band--photo { max-width: 1120px; }
.photoband { height: clamp(300px, 42vw, 460px); text-align: left; }
.photoband h2 { color: var(--on-media); margin: 0 0 4px; font-size: clamp(22px, 3.4vw, 34px); }
.photoband p { margin: 0; color: var(--on-media); opacity: .85; }
.credit { color: var(--text-muted); font-size: var(--text-2xs); margin-top: var(--space-2); text-align: right; }

/* ---------- Onboarding steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); text-align: left; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.step__n { color: var(--cta); font-size: var(--text-num-lg); }
.step h3 { font-family: var(--font-display); margin: var(--space-3) 0 var(--space-1); font-size: var(--text-md); }
.step p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; }

/* ---------- Portability ---------- */
.portab { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: var(--space-6); align-items: center; margin-top: var(--space-6); text-align: left; }
@media (max-width: 820px) { .portab { grid-template-columns: 1fr; } }
.portab__ticket { text-align: left; }
.portab__copy .body { margin: 0; }

/* ---------- Trust pills ---------- */
.trust { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }

/* ---------- Video row (shrunken, per the owner) ---------- */
.videorow { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: var(--space-6); align-items: center; text-align: left; }
@media (max-width: 820px) { .videorow { grid-template-columns: 1fr; } }
.videorow h2 { margin-bottom: var(--space-2); }
.videorow .body { margin: 0; }
.videorow__player video { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); display: block; }

/* ---------- Ecosystem ---------- */
.eco { display: block; text-decoration: none; color: inherit; }
.eco__go { display: inline-block; margin-top: var(--space-3); color: var(--brand); font-weight: var(--weight-semibold); font-size: var(--text-sm); }

/* ---------- Closer + footer ---------- */
.closer h2 { font-size: clamp(24px, 3.8vw, 38px); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; max-width: 1080px; margin: 0 auto; padding: var(--space-6) clamp(16px, 4vw, 40px); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); }
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot > span:first-child { font-family: var(--font-display); font-weight: 800; color: var(--brand-emphasis); }

/* ---------- Scroll reveal (motion bound to entry; stilled by the global reduced-motion rule) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Pain-point picker ---------- */
.picker { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }
.picker .ds-category-chip { text-decoration: none; }
.lede-note { font-size: var(--text-xs); opacity: .8; }

/* ---------- Onboarding loop (8-beat animated SVG storyboard; Duolingo-energy flat vector) ---------- */
.obloop { max-width: 760px; margin: var(--space-6) auto 0; }
.obloop svg { width: 100%; height: auto; display: block; }
.ob-beat { opacity: 0; transform-origin: 450px 200px; animation: ob-cycle 28s infinite; animation-delay: calc(var(--i) * 3.5s); animation-play-state: paused; }
.obloop.in .ob-beat { animation-play-state: running; }
@keyframes ob-cycle {
  0% { opacity: 0; transform: scale(0.94) translateY(8px); }
  1.5% { opacity: 1; transform: scale(1.03) translateY(-2px); }
  3% { transform: scale(1) translateY(0); }
  11% { opacity: 1; transform: scale(1) translateY(0); }
  12.5%, 100% { opacity: 0; transform: scale(0.97) translateY(-6px); }
}
.ob-sea { fill: var(--tint-sky); }
.ob-hull { fill: var(--brand); }
.ob-super { fill: var(--surface); stroke: var(--border-strong); }
.ob-skin { fill: var(--tint-sand-fg); }
.ob-cap { fill: var(--neutral-0); stroke: var(--brand); stroke-width: 2; }
.ob-uniform { fill: var(--brand); }
.ob-crew { fill: var(--cta); }
.ob-phone { fill: var(--neutral-900); }
.ob-notify { fill: var(--cta); stroke: var(--surface); stroke-width: 3; }
.ob-dot { fill: var(--cta); }
.ob-ping circle { animation: ob-ping 1.4s var(--ease-out) infinite; }
.ob-ping circle:nth-child(2) { animation-delay: .2s; } .ob-ping circle:nth-child(3) { animation-delay: .4s; }
@keyframes ob-ping { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.ob-globe { fill: var(--tint-sky); stroke: var(--brand); stroke-width: 2.5; }
.ob-globe-line { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: .5; }
.ob-land { fill: var(--brand); opacity: .55; }
.ob-arc { fill: none; stroke: var(--cta); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; }
.ob-doc { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.ob-doc-line { fill: var(--neutral-300); }
.ob-ai { fill: var(--brand); }
.ob-ai-text { fill: var(--neutral-0); font: 700 18px var(--font-display); text-anchor: middle; }
.ob-check { fill: none; stroke: var(--status-ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ob-gangway { fill: none; stroke: var(--neutral-400); stroke-width: 5; stroke-linecap: round; }
.ob-bag { fill: var(--neutral-700); }
.ob-board { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.ob-row { fill: var(--neutral-200); }
.ob-row--new { fill: var(--cta); }
.ob-badge { fill: var(--status-ok-bg); }
.ob-badge-text { fill: var(--status-ok); font: 700 17px var(--font-display); text-anchor: middle; }
.ob-tile--ok { fill: var(--status-ok-bg); }
.ob-tile--info { fill: var(--status-info-bg); }
.ob-cap-text { fill: var(--text-muted); font: 600 15px var(--font-sans); text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .ob-beat { animation: none; } .ob-beat[style*="--i:0"] { opacity: 1; } }