/* World: the homepage sections. Tokens, type and nav live in base.css. */

/* Hero */
.hero { padding-block: calc(var(--nav-h) + clamp(3rem, 10vw, 7rem)) clamp(4rem, 10vw, 8rem); text-align: center; }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
/* The lede sits under the slogan as one block: never wider than the slogan's second line, lines balanced (no lone
   last word), and a size step below it on phones. */
.hero__lede { margin-top: 1.75rem; max-width: min(30rem, 100%); text-wrap: balance; }
@media (max-width: 599px) { .hero__lede { font-size: 1.0625rem; max-width: 21rem; } }
/* The first screen: slogan, lede and buttons in its upper part, the mountains below them. Exactly one screen tall,
   so the Vessel only appears once you scroll. */
.hero__intro { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;
  min-height: calc(100svh - var(--nav-h) - clamp(3rem, 10vw, 7rem)); padding-bottom: 26svh; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 2.5rem; }

/* Below the fold: a short title for the Vessel, then the Vessel. */
.hero-fill { display: flex; flex-direction: column; align-items: center; margin-top: clamp(4rem, 10vw, 7rem); }
.hero-fill__title { margin: 0.75rem 0 0; }
.hero-fill__lede { margin-top: 1.25rem; max-width: 26rem; text-wrap: balance; }
/* The Vessel (js/vessel.js), the app's hero: it fills as today's steps add up; the number counts beneath. */
.hero-vessel { display: flex; flex-direction: column; align-items: center; margin: clamp(3rem, 7vw, 4.5rem) 0 0; }
.vessel--hero { height: clamp(16rem, 22vw + 10rem, 22.5rem); width: auto; aspect-ratio: 0.36; }
.hero-vessel__read { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
.hero-vessel__num { font-size: clamp(3.5rem, 13vw, 4.75rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; transition: color 600ms var(--ease-out); }
.hero-vessel__sub { color: var(--grey); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.hero-vessel.is-full .hero-vessel__num { color: var(--light-ink); }

/* The mark: scattered dots gather into the colon as you scroll (js/world.js). */
.colon { position: relative; height: 240vh; border-top: 1px solid var(--border); }
.colon__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.colon__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.colon__text { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 8vh, 5rem); margin-inline: auto; }
.colon__text h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); }
.colon__on { color: var(--grey); transition: color 600ms var(--ease-out); }
.colon.is-on .colon__on { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .colon { height: auto; }
  .colon__stage { position: relative; height: auto; min-height: 36rem; padding-block: var(--section); }
  .colon__on { color: var(--ink); }
}

/* How */
.how__lede { margin: -1.5rem 0 4rem; }
.steps { display: grid; gap: 3rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps li { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.steps p { color: var(--grey); }
.steps__n { display: block; margin-bottom: 3rem; font-size: 3rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* Spec: a sheet. Label column, value column, hairlines. */
.spec__list { margin: 0; border-top: 1px solid var(--border); }
.spec__list > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) 2fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.spec__list dt { color: var(--grey); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.spec__list dd { margin: 0; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .spec__list > div { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Price */
.price__num { margin: 0; font-size: clamp(5rem, 22vw, 14rem); line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.price__lede { margin: 2rem 0 3rem; }
.price__table { width: 100%; max-width: 36rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price__table th, .price__table td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; vertical-align: bottom; }
.price__table thead th { color: var(--grey); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.price__table tbody th { color: var(--grey); white-space: nowrap; }
.price__table td:last-child { color: var(--grey); text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* FAQ: native <details>, hairlines. Heading beside the list on wide screens. */
@media (min-width: 1024px) {
  .faq__wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
  .faq__head { position: sticky; top: calc(var(--nav-h) + 1rem); }
}
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3rem;
  padding-block: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: 2px; }
/* A ring that fills to a dot when open. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--grey);
  transition: box-shadow 300ms var(--ease-out);
}
.faq__item[open] summary::after { box-shadow: inset 0 0 0 0.375rem #fff; }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover::after { box-shadow: inset 0 0 0 1.5px #fff; }
  .faq__item[open] summary:hover::after { box-shadow: inset 0 0 0 0.375rem #fff; }
}
.faq__body p { max-width: 40rem; padding-bottom: 1.5rem; color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 320ms var(--ease-out), opacity 240ms var(--ease-out), content-visibility 320ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

/* Waitlist */
.waitlist__lede { margin: -1.5rem 0 3rem; }
.waitlist__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; max-width: 36rem; }
.waitlist__form input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem; /* 16px+: no zoom on iOS */
}
.waitlist__form input[type="email"]:focus { outline: none; border-bottom-color: #fff; }
.waitlist__form input[type="email"]:focus-visible { box-shadow: 0 1px 0 #fff; }
.waitlist__form input::placeholder { color: var(--dim); }
.waitlist__form input[aria-invalid="true"] { border-bottom-color: #ff6961; }
.waitlist__form .btn[disabled] { opacity: 0.6; cursor: progress; }
.waitlist__form.is-done { display: none; }
.waitlist__status { min-height: 1.5em; margin-top: 1.5rem; color: var(--ink); }
.waitlist__status[data-state="error"] { color: #ff6961; }
.waitlist__status a { color: var(--ink); }
.waitlist__fine { margin-top: 0.5rem; color: var(--grey); font-size: 0.875rem; }
.waitlist__fine a { color: var(--grey); }
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.waitlist__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 479px) {
  .waitlist__form .btn { width: 100%; }
}

/* Features: Apple-style statements with IconTiles, in monochrome: graphite squares, white glyphs. */
.tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, var(--graphite-hi), var(--graphite) 45%, var(--graphite-lo));
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 8px 24px -12px rgba(255, 255, 255, 0.12);
}
.tile svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tile--s { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; }
.tile--s svg { stroke-width: 2.5; }

/* Film grain for raised cards: white noise at ~3%, so graphite reads as material, not a flat fill. */
:root { --card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.features h2 { margin-bottom: clamp(3rem, 8vw, 6rem); }
.feat {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: clamp(1.5rem, 5vw, 4rem);
  border-radius: 1.25rem;
  background: var(--card-grain), radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 60%), var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* the machined top edge, as on the hero's glass */
}
@media (min-width: 900px) {
  .feat { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .feat--flip .feat__copy { order: 2; }
}
.feat__copy .tile { margin-bottom: 1.5rem; }
.feat__title { margin: 0; font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
.feat__detail { margin-top: 1.25rem; max-width: 30rem; color: var(--grey); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.45; }

/* The When / If / Then sentence, as in the activation editor. */
.sentence { display: grid; gap: 0.75rem; min-width: 0; }
.sentence__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--card-grain), linear-gradient(180deg, #1f1f21, #1a1a1c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.sentence__row > span:last-child { display: flex; align-items: center; gap: 0.75rem; min-width: 0; overflow-wrap: anywhere; }
.sentence__key { color: var(--light-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* The Vessel, large. */
.feat__vessel { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3rem); margin: 0; padding-block: 1rem; }
.vessel--feat { width: clamp(5rem, 14vw, 7rem); height: clamp(14rem, 36vw, 20rem); }
.feat__vessel figcaption { display: flex; flex-direction: column; gap: 0.5rem; }
.feat__num { font-size: clamp(3.5rem, 9vw, 5.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.feat__status { color: var(--light-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* Challenges: a plain list with small tiles. */
/* Splits: three rounds of ten; the first lit, the others waiting to be earned. */
.rounds { display: grid; gap: 0.75rem; align-content: center; }
.rounds p { margin: 0; }
.rounds__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.rounds__seg { height: 3.5rem; border-radius: 14px; border: 1px dashed var(--border-strong); }
.rounds__seg.is-open { border: 0; background: var(--light); box-shadow: 0 0 28px rgba(223, 230, 244, 0.35); }
.rounds__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; color: var(--grey); font-size: 0.875rem; text-align: center; }
.rounds__labels span:first-child { color: var(--ink); }

/* The rest: a scannable grid of statements. */
.feat-grid { display: grid; gap: 1.5rem; margin: clamp(3rem, 8vw, 5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feat-grid { grid-template-columns: repeat(4, 1fr); } }
.feat-card { padding: 1.5rem 0 0; border-top: 1px solid var(--border); }
.feat-card .tile { margin-bottom: 1.5rem; }
.feat-card h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.feat-card p { color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
  .feat-grid .feat-card:nth-child(4n + 2) { transition-delay: 80ms; }
  .feat-grid .feat-card:nth-child(4n + 3) { transition-delay: 160ms; }
  .feat-grid .feat-card:nth-child(4n + 4) { transition-delay: 240ms; }
}

/* Landscape (js/landscape.js): drawn mountains in the blue-cast light. Ridges are canvases; mist and grain are CSS. */
.landscape { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.landscape > canvas { position: absolute; left: 0; width: 100%; }
.landscape__sky { top: 0; height: 100%; transform: translate3d(0, calc(var(--shift, 0px) * 0.7), 0); }
.landscape__ridge { transform: translate3d(0, calc(var(--shift, 0px) * (0.62 - var(--depth) * 0.5)), 0); }
.landscape__mist {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 22%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(143, 154, 184, 0.13), transparent 70%);
  filter: blur(12px);
  animation: mist-drift 70s ease-in-out infinite alternate;
}
.landscape__mist--1 { top: 58%; }
.landscape__mist--2 { top: 70%; animation-duration: 95s; animation-direction: alternate-reverse; opacity: 0.8; }
[data-landscape="dawn"] .landscape__mist { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 255, 255, 0.4), transparent 70%); }
[data-landscape="dawn"] .landscape__mist--1 { top: 52%; }
[data-landscape="dawn"] .landscape__mist--2 { top: 64%; }
.landscape::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.09; mix-blend-mode: overlay; }
@keyframes mist-drift { from { transform: translate3d(-9%, 0, 0); } to { transform: translate3d(9%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .landscape__mist { animation: none; } }

/* The hero stands in the night range: words in the sky, the Vessel lit in the valley. */
.hero { position: relative; isolation: isolate; }
.hero > .landscape { z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.hero .landscape__mist--1 { top: 60%; }
.hero .landscape__mist--2 { top: 72%; }

/* Templates: the app's Explore tiles. Field as in the app's MonoField (lit top-leading, deep bottom-trailing, a sheen
   at the top-trailing corner, grain), in the site's blue-cast graphite. Line work is white; glows use --light. */
.templates__lede { max-width: 34rem; margin-top: -1.5rem; margin-bottom: 3rem; }
.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.tpl { overflow: hidden; border-radius: 22px; background: #161922; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.tpl__art {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 130;
  background:
    radial-gradient(70% 90% at 92% -6%, rgba(223, 230, 244, 0.14), transparent 70%),
    var(--grain),
    linear-gradient(135deg, #2a2e39, #15171d 55%, #08090c);
  background-size: auto, 220px 220px, auto;
  background-blend-mode: normal, soft-light, normal;
}
.tpl h3 { margin: 0; padding: 0.875rem 1rem 0; font-size: clamp(1rem, 3.6vw, 1.25rem); font-weight: 600; }
.tpl p { margin: 0.25rem 0 0; padding: 0 1rem 1.125rem; color: var(--grey); font-size: 0.875rem; line-height: 1.4; }

.tpl__art * { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tpl__dim { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; }
.tpl__ink { stroke: #fff; stroke-width: 1.6; }
.tpl__thick { stroke-width: 5; }
.tpl__dot, .tpl__stars circle { fill: #fff; stroke: none; }
.tpl__moon, .tpl__sun { fill: #fff; stroke: none; }
.tpl__glow { filter: drop-shadow(0 0 5px rgba(223, 230, 244, 0.55)); }
.tpl__ping { fill: rgba(223, 230, 244, 0.35); stroke: none; }

/* Motion: slow, transform and opacity only. */
.tpl__art g, .tpl__ping, .tpl__pulse { transform-box: fill-box; transform-origin: center; }
.tpl__beat { animation: tpl-beat 2.4s ease-in-out infinite; }
.tpl__pulse { animation: tpl-pop 2.4s ease-in-out infinite; }
.tpl__stars { animation: tpl-twinkle 5s ease-in-out infinite alternate; }
.tpl__breathe { animation: tpl-breathe 8s ease-in-out infinite; }
.tpl__rays { animation: tpl-spin 60s linear infinite; }
.tpl__spin { animation: tpl-spin 40s linear infinite; }
.tpl__ping { animation: tpl-ping 2.8s var(--ease-out) infinite; }
.tpl__art .tpl__hand { transform-box: view-box; transform-origin: 100px 68px; animation: tpl-spin 12s linear infinite; }
.tpl__climb { animation: tpl-climb 6s ease-in-out infinite; }
@keyframes tpl-beat { 0%, 100% { opacity: 0.45; } 35% { opacity: 1; } }
@keyframes tpl-pop { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 35% { transform: scale(1.25); opacity: 1; } }
@keyframes tpl-twinkle { from { opacity: 0.35; } to { opacity: 0.95; } }
@keyframes tpl-breathe { 0%, 100% { transform: scale(0.82); } 50% { transform: scale(1.06); } }
@keyframes tpl-spin { to { transform: rotate(360deg); } }
@keyframes tpl-ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(4.2); opacity: 0; } }
/* Stairs: rest on a tread, arc up to the next (apex above the higher tread), repeat; fade at the top and restart. */
@keyframes tpl-climb {
  0% { transform: translate(0, 0); opacity: 0; }
  4% { opacity: 1; }
  12% { transform: translate(0, 0); animation-timing-function: ease-out; }
  17% { transform: translate(18px, -28px); animation-timing-function: ease-in; }
  22%, 32% { transform: translate(36px, -20px); }
  32% { animation-timing-function: ease-out; }
  37% { transform: translate(54px, -48px); animation-timing-function: ease-in; }
  42%, 52% { transform: translate(72px, -40px); }
  52% { animation-timing-function: ease-out; }
  57% { transform: translate(90px, -68px); animation-timing-function: ease-in; }
  62%, 72% { transform: translate(108px, -60px); }
  72% { animation-timing-function: ease-out; }
  77% { transform: translate(121px, -88px); animation-timing-function: ease-in; }
  82% { transform: translate(134px, -80px); }
  92% { transform: translate(134px, -80px); opacity: 1; }
  100% { transform: translate(134px, -80px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .templates .tpl__art * { animation: none !important; } }

.sentence__or { color: var(--grey); font-style: normal; }

/* The slogan is always exactly two lines, one sentence each. "Deactivate your devices." is about 10.8em of Hedvig, so
   the size is the smaller of 7vw and what fits between the gutters; on phones that's the second. */
.hero h1 { font-size: calc((100vw - 2 * var(--gutter)) / 11.1); white-space: nowrap; text-wrap: nowrap; }
@media (min-width: 900px) { .hero h1 { font-size: min(5.75rem, 7vw); } }

/* How it works: one small diagram per step, joined by a hairline on wide screens. */
.flow { position: relative; display: grid; align-content: center; gap: 0.75rem; height: 11rem; margin-bottom: 2rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
@media (min-width: 768px) {
  .steps li:not(:last-child) .flow::after { content: ""; position: absolute; top: 50%; right: calc(-2rem - 1px); width: 2rem; height: 1px; background: var(--border-strong); }
}
.flow__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; }
.flow__week i { display: grid; place-items: center; height: 1.75rem; border-radius: 999px; font-size: 0.75rem; font-style: normal; font-weight: 600; color: var(--grey); background: rgba(255, 255, 255, 0.04); }
.flow__week i.on { color: #000; background: var(--light); }
.flow__day { position: relative; height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.flow__window { position: absolute; left: 50%; width: 6.25%; top: -0.125rem; bottom: -0.125rem; border-radius: 999px; background: var(--light); box-shadow: 0 0 12px rgba(223, 230, 244, 0.6); }
.flow__ticks { display: flex; justify-content: space-between; color: var(--dim); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.flow__note { margin: 0.25rem 0 0; color: var(--grey); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.flow__note b { color: var(--ink); font-weight: 600; }
.flow__goal { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--grey); }
.flow__goal b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.flow__bar { grid-column: 1 / -1; height: 0.375rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.flow__bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--light); }
.flow__any { justify-self: center; display: inline-flex; padding: 0.1875rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.75rem; font-weight: 600; }
.flow__any span { padding: 0.125rem 0.75rem; border-radius: 999px; color: var(--grey); }
.flow__any span.on { color: #000; background: var(--light); }
.flow--then { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; padding-inline: 1.75rem; }
.vessel--flow { width: 2.5rem; height: 7rem; }
.flow__apps { display: grid; grid-template-columns: repeat(4, 1.75rem); gap: 0.5rem; }
.flow__apps i { height: 1.75rem; border-radius: 0.5rem; background: linear-gradient(160deg, var(--graphite-hi), var(--graphite)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* Join: one white pill. Closed it is the button; open it widens into the email field with a dark Join button
   inside. Solid white either way, so it never blends into the landscape behind it. */
.join { display: flex; align-items: center; width: 13.5rem; max-width: 100%; height: 3.25rem; margin-top: 2rem; border-radius: 999px; background: #fff; overflow: hidden; transition: width 480ms var(--ease-out); }
.join.is-open { width: min(100%, 25rem); }
.join__open { flex: 1; height: 100%; border: 0; border-radius: inherit; background: none; color: #000; font: inherit; font-weight: 600; cursor: pointer; }
.join__open[hidden], .join__form[hidden] { display: none; }
.join__form { flex: 1; display: flex; align-items: center; height: 100%; min-width: 0; animation: join-in 360ms 140ms var(--ease-out) both; }
.join__form input[type="email"] { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 1.25rem; border: 0; background: none; color: #000; font: inherit; }
.join__form input[type="email"]::placeholder { color: #8a8f9c; }
.join__form input[type="email"]:focus { outline: none; }
.join__go { flex: none; height: calc(100% - 0.5rem); margin-right: 0.25rem; padding: 0 1.125rem; border: 0; border-radius: 999px; background: #000; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.join__go[disabled] { opacity: 0.6; }
.join__form.is-done { display: none; }
.join:has(.join__form.is-done) { width: 0; margin: 0; }
@keyframes join-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .join { transition: none; } .join__form { animation: none; } }
.hero__status { margin-top: 1rem; min-height: 1.5em; font-size: 0.9375rem; }
.hero__status:empty { margin-top: 0; }

/* Scroll hint at the foot of the first screen: a hairline with the brand dot gliding down it. */
.hero__intro { position: relative; }
.hero__more { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--grey); font-size: 0.875rem; text-decoration: none; }
.hero__more:hover { color: var(--ink); }
.hero__more i { position: relative; width: 1px; height: 2.75rem; background: linear-gradient(var(--border-strong), transparent); }
.hero__more i::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ink); animation: more-drop 2.2s var(--ease-out) infinite; }
@keyframes more-drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(2.5rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__more i::after { animation: none; top: 50%; } }
/* Phones: no scroll hint (the page is obviously scrollable there) and less room held under the words, so they sit
   centred on the screen instead of being pushed up. */
@media (max-width: 599px) {
  .hero__more { display: none; }
  /* The words high, the Join pill low (in thumb reach, over the mountains). */
  .hero__intro { justify-content: flex-start; padding-top: 7svh; padding-bottom: 11svh; }
  .join { margin-top: auto; }
}

/* Spec: lists as quiet chips instead of runs of dots. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 0.375rem 0.875rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); font-weight: 400; letter-spacing: 0; color: var(--ink); background: rgba(255, 255, 255, 0.03); }

/* Price: one purchase, three plain promises. */
.price__lede { margin: -1.5rem 0 3rem; }
.price__points { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .price__points { grid-template-columns: repeat(2, minmax(0, 20rem)); gap: 2rem; } }
.price__points li { display: grid; gap: 0.375rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.price__points strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.price__points span { color: var(--grey); }