/* ==========================================================================
   Seazly landing — design tokens
   ========================================================================== */
:root {
  --bg: #15140F; --surface: #1C1A14; --fg: #F5F2EC; --accent: #C2402B;
  --muted: rgba(245,242,236,0.58); --faint: rgba(245,242,236,0.34);
  --line: rgba(245,242,236,0.14); --raised: rgba(245,242,236,0.04);
  --line-solid: color-mix(in srgb, var(--fg) 14%, var(--bg));
}
:root[data-theme="light"] {
  --bg: #F7F4EE; --surface: #FFFDF9; --fg: #1A1813; --accent: #C2402B;
  --muted: rgba(26,24,19,0.62); --faint: rgba(26,24,19,0.40);
  --line: rgba(26,24,19,0.14); --raised: rgba(26,24,19,0.03);
  --line-solid: color-mix(in srgb, var(--fg) 14%, var(--bg));
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 240ms ease, color 240ms ease;
  max-width: 100%;
}
/* The hero orbit ring bleeds past the content column on purpose; without a
   clipping wrapper the document grows sideways and phones can pan. clip (not
   hidden) creates no scrollport, so the sticky header still sticks. */
.page { overflow-x: clip; }

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
::selection { background: var(--accent); color: #FFFDF9; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Shared type roles ------------------------------------------------------- */
.serif { font-family: Newsreader, serif; font-weight: 400; }
em { font-style: italic; }
.em-accent { font-style: italic; color: var(--accent); }

.h1 {
  font-family: Newsreader, serif; font-weight: 400;
  font-size: clamp(44px, 8.4vw, 84px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0; text-wrap: pretty;
}
.h2 {
  font-family: Newsreader, serif; font-weight: 400;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06;
  letter-spacing: -0.025em; margin: 0;
}
.h2-lg {
  font-family: Newsreader, serif; font-weight: 400;
  font-size: clamp(32px, 5.4vw, 60px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0;
}
.eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 20px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
}
.eyebrow .glyph { color: var(--accent); }
.lead { color: var(--muted); font-size: 17px; line-height: 1.6; }

/* Hairline panel grid — the signature treatment ---------------------------
   The 1px hairlines are painted by the cells (box-shadow into the gap) rather
   than by a --line background behind the grid. Same result, except a last row
   that doesn't fill every column leaves empty space instead of a lit panel.
   --line-solid is --line flattened against the panel colour so the two shadows
   meeting in a shared gap don't stack into a darker line. */
.hair { display: grid; gap: 1px; }
.hair > * { background: var(--bg); box-shadow: 0 0 0 1px var(--line-solid); }
.band .hair > * { background: var(--surface); }

/* Section shells ---------------------------------------------------------- */
.wrap { max-width: 1360px; margin: 0 auto; }
.section {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 64px);
  max-width: 1360px; margin: 0 auto;
}
.band {
  background: var(--surface);
  --line-solid: color-mix(in srgb, var(--fg) 14%, var(--surface));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 64px);
}
.rule-top { border-top: 1px solid var(--line); }

/* Orbit rings ------------------------------------------------------------- */
@keyframes seazly-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes seazly-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.orbit { position: absolute; pointer-events: none; color: var(--fg); z-index: 0; aspect-ratio: 1; }
.orbit svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .orbit--hero svg   { animation: seazly-orbit  90s linear infinite; }
  .orbit--season svg { animation: seazly-orbit 110s linear infinite; }
  .orbit--close svg  { animation: seazly-orbit 130s linear infinite; }
}
.orbit--hero   { top: 50%; right: max(-320px, -16vw); transform: translateY(-50%); width: min(720px, 88vw); }
.orbit--season { bottom: -18%; left: max(-300px, -15vw); width: min(620px, 70vw); }
.orbit--close  { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(980px, 120vw); }

/* Phone frames ------------------------------------------------------------
   9/19.5 is the SCREEN's ratio, so it goes on the screen and the bezel padding
   sits outside it. Putting it on the outer frame (as the prototype does) makes
   the body 0.462 wide-to-tall where a real handset is ~0.478 — the frame reads
   as stretched, and object-fit then crops ~3.5% off the screenshot. */
.phone {
  position: relative; width: min(320px, 80vw);
  border-radius: 46px; border: 1px solid var(--line);
  background: var(--surface); padding: 10px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.65);
}
.phone--onband { background: var(--bg); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.55); }
.phone__screen {
  position: relative; width: 100%; aspect-ratio: 9/19.5;
  border-radius: 38px; overflow: hidden; background: var(--bg);
}
.phone--onband .phone__screen { background: var(--surface); }
.phone__screen picture { display: block; width: 100%; height: 100%; }
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-col { display: flex; justify-content: center; }

.phone--md {
  width: min(300px, 78vw); border-radius: 44px;
  border: 1px solid var(--line); background: var(--surface); padding: 9px;
  position: relative;
}
.phone--md .phone__screen { border-radius: 36px; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { display: block; height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); font-size: 14px; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--accent); }
.nav__wide { display: none; }
@media (min-width: 780px) { .nav__wide { display: inline; } }

.theme-toggle {
  position: relative; cursor: pointer; background: transparent;
  border: 1px solid var(--line); color: var(--fg);
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 14px; line-height: 1; display: grid; place-items: center;
  font-family: inherit;
  transition: border-color 160ms ease, color 160ms ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* keep the visual at 34px while giving it a 44px hit target */
.theme-toggle::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }

.btn-get {
  border: 1px solid var(--fg); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-get:hover { background: var(--accent); border-color: var(--accent); color: #FFFDF9; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center; gap: clamp(36px, 6vw, 72px);
  padding: clamp(52px, 8vw, 110px) clamp(20px, 5vw, 64px) clamp(60px, 8vw, 120px);
  max-width: 1360px; margin: 0 auto; position: relative;
}
.hero__text { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero__text { animation: seazly-rise 700ms ease both; }
}
.hero .phone-col { position: relative; z-index: 1; }
.hero__eyebrow { margin: 0 0 22px; }
.hero__sub {
  margin: 26px 0 0; max-width: 34ch;
  font-size: clamp(16px, 2.1vw, 19px); line-height: 1.6;
  color: var(--muted); text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }

/* Store badges ------------------------------------------------------------ */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.badges--stack { flex-direction: column; align-items: flex-start; gap: 12px; }
.badge { display: block; border-radius: 8px; transition: opacity 160ms ease; }
.badge:hover { opacity: 0.82; }
.badge img { display: block; height: 38px; width: auto; }

/* ==========================================================================
   The inversion (#how)
   ========================================================================== */
.how__sub { margin: 12px 0 clamp(38px, 5vw, 64px); max-width: 46ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.steps > li { padding: clamp(28px, 3.4vw, 40px); }
.steps img { display: block; width: 100%; aspect-ratio: 5/4; object-fit: contain; margin: 0 0 18px; }
.steps .num { font-family: Newsreader, serif; font-size: 15px; letter-spacing: 0.1em; color: var(--accent); }
.steps h3 {
  font-family: Newsreader, serif; font-weight: 400;
  font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em;
  margin: 16px 0 10px; line-height: 1.1;
}
.steps p { margin: 0; color: var(--muted); line-height: 1.62; font-size: 16px; }

/* ==========================================================================
   Season-first (#seasons)
   ========================================================================== */
.seasons { position: relative; overflow: hidden; }
.seasons__grid {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 6vw, 80px); align-items: center;
  position: relative; z-index: 1;
}
.seasons__lead { margin: 22px 0 0; max-width: 44ch; color: var(--muted); font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.scores { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 34px; }
.scores > div { padding: 24px; }
.scores__label { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.scores__num {
  font-family: Newsreader, serif; font-size: 56px; line-height: 1;
  letter-spacing: -0.03em; margin: 14px 0 0;
}
.scores__num--accent { color: var(--accent); }
.scores__note { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.pull { margin-top: 26px; border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; }
.pull p:first-child {
  margin: 0; font-family: Newsreader, serif;
  font-size: clamp(19px, 2.4vw, 23px); line-height: 1.35; letter-spacing: -0.015em;
}
.pull p:last-child { margin: 10px 0 0; font-size: 14px; color: var(--faint); }

/* ==========================================================================
   Real places (#real)
   ========================================================================== */
.real__top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.real__intro { max-width: 52ch; }
.real__intro .lead { margin: 22px 0 0; line-height: 1.62; text-wrap: pretty; }
.real__world { display: block; width: 100%; max-width: 560px; justify-self: center; object-fit: contain; }
.checks { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: clamp(38px, 5vw, 60px); }
.checks > div { padding: clamp(26px, 3vw, 36px); }
.checks .glyph { color: var(--accent); font-size: 18px; }
.checks h3 {
  font-family: Newsreader, serif; font-weight: 400; font-size: 23px;
  letter-spacing: -0.02em; margin: 14px 0 8px;
}
.checks p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 56px); margin-top: clamp(44px, 6vw, 72px);
  align-items: start; justify-items: center;
}
.figs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.figs figcaption { font-size: 14px; color: var(--faint); text-align: center; }

/* ==========================================================================
   The dossier (#dossier)
   ========================================================================== */
.dossier__grid {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 6vw, 80px); align-items: center;
}
.dossier__phone { order: 2; }
.receive { margin: 32px 0 0; }
.receive > div { padding: 18px 22px; }
.receive dt { font-family: Newsreader, serif; font-size: 19px; letter-spacing: -0.015em; }
.receive dd { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.dossier__seat { display: block; width: min(320px, 70%); margin: 30px auto 0; object-fit: contain; }

/* ==========================================================================
   Pricing (#pricing)
   ========================================================================== */
.pricing__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(34px, 4vw, 52px);
}
.pricing__head .lead { margin: 18px 0 0; max-width: 40ch; }
.pricing__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-left: auto; }
.pricing__aside img { display: block; width: min(340px, 60vw); object-fit: contain; }
.pricing__aside p { margin: 0; font-size: 13px; color: var(--faint); letter-spacing: 0.06em; }
.tiers { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.tier {
  padding: clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
}
.tier h3 { font-family: Newsreader, serif; font-weight: 400; font-size: 22px; margin: 0; letter-spacing: -0.015em; }
.tier__price {
  font-family: Newsreader, serif; font-size: 40px; letter-spacing: -0.03em;
  margin: 12px 0 0; line-height: 1;
}
.tier ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  font-size: 15px; color: var(--muted); line-height: 1.5;
}
.tier li.strong { color: var(--fg); }
.tier__cta {
  margin-top: auto; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; text-align: center; font-size: 14px; font-weight: 500;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.tier__cta:hover { border-color: var(--accent); color: var(--accent); }
.tier--popular {
  background: var(--surface);
  outline: 1px solid var(--accent); outline-offset: -1px; position: relative;
}
.tier--popular .tier__price { color: var(--accent); }
.tier__tag {
  position: absolute; top: 0; right: 0; background: var(--accent); color: #FFFDF9;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px;
}
.tier__cta--solid {
  background: var(--accent); color: #FFFDF9; border: 0; border-radius: 999px;
  padding: 11px 18px;
}
.tier__cta--solid:hover { background: var(--fg); color: var(--bg); }

/* ==========================================================================
   Inside the app — marquee
   ========================================================================== */
.inside { padding: 0 0 clamp(64px, 8vw, 110px); }
.inside__head {
  max-width: 1360px; margin: 0 auto clamp(26px, 3vw, 40px);
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px;
}
.inside__hint {
  margin: 0; font-size: 13px; color: var(--faint); letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 8px;
}
.inside__hint .glyph { color: var(--accent); }
.marquee {
  display: flex; gap: clamp(14px, 2vw, 22px);
  overflow-x: auto; scrollbar-width: none;
  padding: 4px clamp(20px, 5vw, 64px) 8px;
  cursor: grab; user-select: none; -webkit-overflow-scrolling: touch;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; }
.marquee figure { margin: 0; flex: 0 0 auto; width: clamp(190px, 24vw, 236px); }
.marquee .shot {
  border-radius: 32px; border: 1px solid var(--line);
  background: var(--surface); padding: 7px;
}
.marquee picture { display: block; }
.marquee img {
  display: block; width: 100%; height: auto; aspect-ratio: 9/19.5;
  object-fit: cover; border-radius: 26px; pointer-events: none;
}
.marquee figcaption {
  margin-top: 10px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); text-align: center;
}

/* ==========================================================================
   Close
   ========================================================================== */
.close {
  border-top: 1px solid var(--line);
  padding: clamp(70px, 10vw, 140px) clamp(20px, 5vw, 64px);
  text-align: center; position: relative; overflow: hidden;
}
.close__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.close__illus {
  display: block; width: min(520px, 86vw); aspect-ratio: 3/2; object-fit: contain;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.close h2 {
  font-family: Newsreader, serif; font-weight: 400;
  font-size: clamp(40px, 9vw, 88px); line-height: 1.04;
  letter-spacing: -0.03em; margin: 0;
}
.close__sub { margin: 24px auto 0; max-width: 38ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.close__cta { display: flex; justify-content: center; margin-top: 34px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 64px) clamp(24px, 3vw, 34px);
}
.ftr__grid {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(34px, 4vw, 56px);
}
.ftr__brand { max-width: 30ch; }
.ftr__brand img { display: block; height: 48px; width: auto; margin-left: -10px; }
.ftr__brand p { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.social { display: flex; gap: 10px; margin-top: 26px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
  transition: border-color 160ms ease, color 160ms ease;
}
.social a:hover { border-color: var(--accent); color: var(--accent); }
.ftr h2 {
  margin: 0 0 18px; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; font-size: 15px; }
.ftr ul a { color: var(--muted); }
.ftr ul a:hover { color: var(--accent); }
.ftr__bar {
  max-width: 1360px; margin: clamp(38px, 5vw, 64px) auto 0;
  padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; font-size: 13px; color: var(--faint);
}
.ftr__bar p { margin: 0; }