/* ============================================================================
   gethawser.com homepage: page styles.
   Tokens first (the brand is twelve values), then the chrome, then one block
   per section in scroll order, then the footer, then phones, then reduced
   motion. The engine (scrollcraft.css) owns .sc-stage, [data-sc-*] and the
   floor; nothing here restyles those.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas: #0B0E14;
  --sc-surface: #13171F;
  --sc-ink: #F5F7FA;
  --sc-ink-soft: #AEB7C6;
  --sc-accent: #18C8C8;
  --sc-accent-ink: #0F1115;

  --sc-font-display: "Instrument Sans", "Inter", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --sc-r-sm: 8px;   /* controls  */
  --sc-r-md: 12px;  /* windows   */
  --sc-r-lg: 16px;  /* capsule   */
  --sc-shadow-color: 222 34% 3%;

  /* The day's five grounds, morning to night. Painted per section AND drifted. */
  --g1: #0E1320; --g2: #0C1019; --g3: #0B0E14; --g4: #090B10; --g5: #07080C;

  --bar-h: 64px;              /* the fixed bar */
  --tb-h: 44px;               /* the drawn taskbar */
  --accent-hover: #2ED8D8;
  --accent-press: #0FA8A8;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/home/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/home/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* Light on dark: one step more weight, a touch more air. */
body { font-weight: 430; }
.sc-display { font-weight: 560; }
.sc-display--lg, .sc-display--md { letter-spacing: var(--sc-track-snug); }
h2.sc-display, h1.sc-display { text-wrap: balance; }
p { margin: 0; }

/* layout.js inserts an empty glow div on every page; this page has its own ground. */
.bg-glow-tl { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: var(--sc-t-sm); line-height: 1;
  padding: 11px 16px; min-height: 40px;
  border-radius: var(--sc-r-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--sc-ink);
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out),
              color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }
.btn--ghost {
  background: color-mix(in oklab, var(--sc-ink) 6%, transparent);
  border-color: var(--sc-hairline-strong);
}
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 11%, transparent); border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.btn--lg { padding: 14px 20px; min-height: 48px; font-size: var(--sc-t-base); }
.link {
  color: var(--sc-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: color 140ms var(--sc-ease-out);
}
.link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.link:active { color: var(--accent-press); }

/* ------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px);
  padding: 0 var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 80%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sc-hairline);
}
.bar__mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em;
  color: var(--sc-ink); text-decoration: none; border-radius: var(--sc-r-sm);
}
.bar__mark img { width: 28px; height: 28px; border-radius: 7px; }
.bar__links { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 24px); margin-left: var(--sc-3); font-size: var(--sc-t-sm); }
.bar__links a {
  color: var(--sc-ink-soft); text-decoration: none; padding: 6px 4px; border-radius: 6px;
  transition: color 140ms var(--sc-ease-out);
}
.bar__links a:hover { color: var(--sc-ink); }
.bar__links a:active { transform: translateY(1px); }
.bar__cta { margin-left: auto; }

/* --------------------------------------------------------------- sections -- */
.act { position: relative; scroll-margin-top: var(--bar-h); }

/* ═══ the drawn desktop: shared pieces ═══ */
.win {
  position: absolute;
  background: #12161E;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--sc-r-md);
  overflow: hidden;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.win__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 38px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Window controls sit top right, the way a Windows app draws them: minimize,
   maximize, close. Generic glyphs, no vendor iconography. */
.win__controls { display: flex; gap: 4px; margin-left: auto; flex: none; }
.wc { position: relative; display: block; width: 26px; height: 22px; border-radius: 4px; color: rgba(255,255,255,0.42); }
.wc::before, .wc::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.wc--min::before { width: 10px; height: 1px; background: currentColor; }
.wc--max::before { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 1px; }
.wc--close::before, .wc--close::after { width: 12px; height: 1px; background: currentColor; }
.wc--close::before { rotate: 45deg; }
.wc--close::after { rotate: -45deg; }
.win__title { font-size: 12.5px; color: #8E97A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ligatures off: Cascadia joins "--" into one long dash, which reads as an em dash. */
.code, .capsule__focus, .capsule__time, .taskbar__clock, .mini__bar, .mini__meta, .verdict--blocker, .price__amount {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}
.code { padding: 16px 20px; font-family: var(--sc-font-mono); font-size: 13px; line-height: 1.9; color: #8E97A6; }
.code div { white-space: nowrap; }
.code .c { color: #5C6A7D; }
.code .s { color: #B7C2D3; }
.code .p { color: #8FA2BD; }
.code .v { color: #7FBFA5; }
.caret { display: inline-block; width: 0.5em; height: 1.05em; background: #8FA2BD; vertical-align: -0.18em; opacity: 0.9; }

.capsule {
  background: linear-gradient(180deg, rgba(30,36,48,0.97) 0%, rgba(19,23,31,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3), var(--sc-edge);
  padding: 14px 16px 16px;
  color: var(--sc-ink);
}
.capsule__head {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--sc-ink-soft);
}
.capsule__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-accent); flex: none; }
.capsule__time { margin-left: auto; font-family: var(--sc-font-mono); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 12px; }
.capsule__mission { margin: 10px 0 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.capsule__focus { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-family: var(--sc-font-mono); font-size: 12.5px; color: var(--sc-ink-soft); }
/* The focus ring, two half discs and one rotate(). */
.capsule__ring {
  position: relative; flex: none; overflow: hidden; display: block;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.capsule__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, transparent 0 50%, var(--sc-accent) 50% 100%); }
.capsule__ring > i { display: block; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, transparent 0 50%, rgba(36,42,54,1) 50% 100%); transform: rotate(calc(var(--fill, 0) * 3.6deg)); }
.capsule__ring::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: #1B2130; }

.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: rgba(8,10,14,0.84);
  border-top: 1px solid rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.taskbar__launcher { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); flex: none; }
.taskbar__apps { display: flex; gap: 8px; }
.taskbar__apps i { width: 24px; height: 24px; border-radius: 6px; display: block; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.06); }
.taskbar__apps i.on { background: rgba(24,200,200,0.16); border-color: rgba(24,200,200,0.35); }
.taskbar__clock { margin-left: auto; font-family: var(--sc-font-mono); font-size: 12.5px; color: var(--sc-ink-soft); letter-spacing: 0.02em; }

/* Idle loops. A frozen desktop looks broken. Gated to no-preference. */
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: blink 1400ms ease-in-out infinite; }
  .capsule__dot, .hero__pill-dot { animation: breathe 1400ms ease-in-out infinite; }
}
@keyframes blink { 0%, 45% { opacity: 0.9; } 55%, 100% { opacity: 0.12; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.55; } }

/* ═══ 1 · the hero ═══ */
.act--hero {
  min-height: 120svh;
  background: linear-gradient(to bottom, var(--g1) 0, var(--g1) calc(100% - 200px), var(--g2) 100%);
}
.hero { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; background: var(--g1); }
.hero__wall { position: absolute; inset: -90px 0; z-index: 1; }
.hero__wall picture, .hero__wall img { display: block; width: 100%; height: 100%; }
.hero__wall img { object-fit: cover; object-position: 62% 46%; max-width: none; }
.hero__scrim { z-index: 2; }
.hero__scrim--band { opacity: 0.82; }
.hero__copy {
  position: absolute; z-index: 3;
  left: var(--sc-gutter); bottom: calc(var(--tb-h) + 7vh);
  /* never let the copy run under the editor plane (left: 51%) */
  width: min(50rem, calc(51% - var(--sc-gutter) - 0.75rem));
}
.hero__pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: var(--sc-4);
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 42%, transparent);
  background: color-mix(in oklab, var(--sc-accent) 12%, rgba(11,14,20,0.72));
  font-size: var(--sc-t-sm); font-weight: 560; color: var(--sc-ink);
}
.hero__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); flex: none; }
.hero__h1 {
  font-size: clamp(2.3rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.02; letter-spacing: var(--sc-track-tight);
  max-width: 24ch; margin: 0;
}
/* The positioning line, one rung under the headline. It appears nowhere else. */
.hero__claim {
  margin-top: var(--sc-4); max-width: 34ch;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: 1.25rem; line-height: 1.3; letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); text-wrap: pretty;
}
.hero__lede { margin-top: var(--sc-4); max-width: 46ch; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-5); }
/* The second ask: an email, for the visitor who is not at their Windows box.
   Collapsed behind a text link on a desktop so it never competes with the
   primary button; open by default on phones, where it is the only path. */
.hero__wl { margin-top: var(--sc-4); }
.hero__wl-toggle {
  font: inherit; font-size: var(--sc-t-sm); font-weight: 500;
  color: var(--sc-accent); background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: color 140ms var(--sc-ease-out);
}
.hero__wl-toggle:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.hero__wl-body { display: none; margin-top: 10px; max-width: 27rem; }
.hero__wl.is-open .hero__wl-body { display: block; }
.hero__wl-phone { display: none; margin-bottom: 9px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hero__fine { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hero__fine-phone { display: none; }

/* ------------------------------------------------ the waitlist forms (2) -- */
.wl-form { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-input {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: var(--sc-t-sm); color: var(--sc-ink);
  padding: 11px 13px; border-radius: var(--sc-r-sm);
  background: rgba(9,11,16,0.82); border: 1px solid rgba(255,255,255,0.14);
  transition: border-color 140ms var(--sc-ease-out);
}
.wl-input:hover { border-color: rgba(255,255,255,0.24); }
.wl-input:focus-visible { border-color: var(--sc-accent); outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.wl-input::placeholder { color: #7B838F; }
.wl-status { margin-top: 8px; min-height: 1.4em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ---------------------------------------- the in-flow ask, used twice --
   Once after the blocker argument lands, once after the receipts answer the
   "is this spyware" question. Same label, same fine print, both times. */
.cta-row { margin-top: var(--sc-8); }
.cta-fine { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hero__shot {
  position: absolute; z-index: 4;
  left: 51%; right: 3.5%; top: calc(var(--bar-h) + 5vh);
}
.hero__shot img {
  width: 100%; height: auto; max-width: 640px; margin-left: auto;
  border-radius: 14px; box-shadow: var(--sc-e3);
}
.hero__capsule { position: absolute; z-index: 5; right: 3.5%; bottom: calc(var(--tb-h) + 34px); width: 300px; }
.hero__mist {
  position: absolute; z-index: 6; pointer-events: none;
  left: -5%; right: 26%; bottom: -60px; height: 44%;
  background: linear-gradient(to top, rgba(14,19,32,0.42) 0%, rgba(14,19,32,0.15) 45%, rgba(14,19,32,0) 100%);
}
.hero .taskbar { z-index: 7; }
/* Short laptop screens. The hero copy is a block taller than it used to be
   (the claim line and the email capture), so at 720p it would push the beta
   pill up under the bar. Anchor it below the bar instead of above the taskbar
   and let it run down the full height. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero__copy { top: calc(var(--bar-h) + 3vh); bottom: auto; }
  .hero__claim { font-size: 1.14rem; }
  .hero__lede { font-size: var(--sc-t-sm); }
  .hero__actions { margin-top: var(--sc-4); }
}
/* Narrow laptops and tablets in landscape: push the editor right so the two line headline keeps its width. */
@media (min-width: 861px) and (max-width: 1180px) {
  .hero__shot { left: 56%; }
  .hero__copy { width: min(50rem, calc(56% - var(--sc-gutter) - 0.75rem)); }
  .hero__h1 { font-size: clamp(2.1rem, 1rem + 3.2vw, 3.5rem); }
}

/* ═══ 3 · what Hawser does ═══ */
.act--feat { background: var(--g3); padding-block: var(--sc-8) var(--sc-section); }
.feat__head { max-width: 34rem; }
.feat__intro { color: var(--sc-ink-soft); }
.feat__fig { margin: var(--sc-8) 0 0; }
.feat__frame {
  border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e3);
  background: var(--sc-surface);
  max-width: 62rem;
}
.feat__frame img { width: 100%; height: auto; display: block; }
.feat__fig figcaption { margin-top: 12px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.feat__list {
  margin-top: var(--sc-8);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 6rem);
}
.feat__row { padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); }
.feat__row:first-child, .feat__row:nth-child(2) { border-top: 0; padding-top: 0; }
.feat__row h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15;
  margin: 0 0 var(--sc-3);
}
.feat__row p { color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty; }

/* ═══ 2 · why not just a blocker ═══ */
/* ═══ The name, a dictionary entry between the hero and the argument ═══ */
.act--name { background: var(--g2); padding-block: 0; }
.name { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--sc-hairline); }
.name__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.8em; margin: 0; }
.name__term { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1; color: var(--sc-ink); }
.name__pron { color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
.name__pos { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.name__def { margin: var(--sc-3) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); max-width: 46ch; text-wrap: pretty; }
.name__more { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); }
.act--why { background: var(--g2); padding-block: var(--sc-section); }
.why { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.why__h {
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.7rem);
  line-height: 1.08; letter-spacing: var(--sc-track-snug);
  max-width: 20ch; margin: 0;
}
.why__p { margin-top: var(--sc-5); max-width: 46ch; }
.why__mission {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sc-hairline);
  background: var(--sc-surface); font-size: var(--sc-t-sm); color: var(--sc-ink);
}
.why__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); flex: none; }
/* Loop is a stand in, and nobody can be expected to know that. */
.why__note { margin: 9px 0 var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.why__days { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-5); }
.daycard, .mini { min-width: 0; }
.mini__bar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daycard__name { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); margin-bottom: 8px; }
.mini {
  background: #12161E; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden;
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.mini__bar {
  display: flex; align-items: center; height: 30px; padding: 0 10px;
  font-family: var(--sc-font-mono); font-size: 11px; color: #8E97A6;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mini__bar .wc { width: 20px; height: 18px; }
.mini__body { padding: 12px; }
.mini__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(135deg, #1B2230, #141A25); }
.mini__thumb i {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 0; height: 0;
  border-left: 12px solid rgba(255,255,255,0.55); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.mini__title { margin: 10px 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink); line-height: 1.35; }
.mini__meta { margin: 4px 0 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.verdicts { margin-top: 14px; display: grid; gap: 9px; }
.verdict { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--sc-t-sm); line-height: 1.4; }
.verdict--blocker { color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); }
.verdict--blocker svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.verdict--me { color: var(--sc-ink); }
.verdict__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 0.42em; background: var(--sc-ink-soft); }
.verdict--asked .verdict__dot { background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 22%, transparent); }

/* ═══ 5 · the spotlights ═══
   The screenshots run off the edge of the page rather than sitting politely
   inside the measure. Two reasons: a 1200px capture shrunk into half a column
   is a picture of text nobody can read, and one element crossing the frame's
   boundary buys more depth than any shadow. --edge is the page's own text
   margin, so the copy still lines up with every other section. */
.spot {
  padding-block: var(--sc-section); background: var(--g2);
  overflow-x: clip;
  --edge: calc(max(0px, (100vw - var(--sc-maxw)) / 2) + var(--sc-gutter));
}
.spot--flip, .spot--wide { background: var(--g3); }
.spot__in {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-left: var(--edge); padding-right: 0;
}
.spot--flip .spot__in {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  padding-left: 0; padding-right: var(--edge);
}
.spot--flip .spot__text { order: 2; }
.spot--flip .spot__fig { order: 1; }
.spot--flip .spot__fig figcaption { padding-left: var(--sc-gutter); }
.spot__text { max-width: 36rem; }
/* One rung down from the section headings: this column is half the width they
   get, and --sc-t-2xl wraps a spotlight title to three lines in it. */
.spot__text h2 { font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.6rem); line-height: 1.08; }
.spot__text .sc-lede { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.55; max-width: 42ch; }
/* Dots and space, not rules: the features list and the pricing plans already
   carry the hairlines on this page, and a third one would make every section
   the same object. */
.spot__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; max-width: 42ch; display: grid; gap: 11px; }
.spot__list li {
  position: relative; padding-left: 22px;
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; text-wrap: pretty;
}
.spot__list li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-accent) 70%, transparent);
}
.spot__list b { color: var(--sc-ink); font-weight: 600; }
.spot__fig { margin: 0; }
.spot__frame {
  border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e3);
  background: var(--sc-surface);
}
.spot__frame img { width: 100%; height: auto; display: block; }
.spot__fig figcaption { margin-top: 12px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
/* The nudge card is a 707px capture. Let it sit at its own size against the
   edge rather than upscaling it into mush on a wide monitor. */
.spot__fig--card .spot__frame { max-width: 707px; }

/* The learning spotlight is a different shape on purpose: copy across the top,
   the list beside the review card, and the rhythm panel full width under both.
   Three zigzags in a row is a page that reads as one block repeated. */
.spot--wide { overflow-x: visible; }
.spot__wide-head { max-width: 46rem; }
.spot__wide-head .sc-lede { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.55; }
.spot__wide-body {
  margin-top: var(--sc-7);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.spot__list--two { max-width: 46ch; margin-top: 0; }
.spot__small { margin: 0; }
.spot__small figcaption { margin-top: 12px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.spot__surface {
  border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e3);
  background: linear-gradient(180deg, #151A24 0%, #10141C 100%);
  padding: clamp(20px, 3vw, 40px); display: grid; place-items: center;
}
.spot__surface img { width: 360px; max-width: 100%; height: auto; display: block; border-radius: 10px; }
/* The rhythm panel is a second subject inside this act, so it says so. */
.spot__rhythm-h {
  margin: var(--sc-8) 0 0;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15;
}
.spot__rhythm { margin: var(--sc-5) 0 0; }
.spot__rhythm .spot__frame { max-width: 1200px; }

/* ═══ 6 · everything else in the box ═══ */
.act--box { background: var(--g4); padding-block: var(--sc-section) var(--sc-7); }
.box__head { max-width: 40rem; }
.box__grid {
  margin-top: var(--sc-8);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-7) clamp(1.5rem, 4vw, 4rem);
}
.box__col h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-base); letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-3); padding-bottom: var(--sc-3);
  border-bottom: 1px solid var(--sc-hairline);
}
.box__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.box__col li { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; text-wrap: pretty; }
.box__col b { color: var(--sc-ink); font-weight: 600; }
.box__more { margin-top: var(--sc-7); }

/* ═══ 6 · the receipts ═══ */
.act--receipts { background: var(--g2); padding-block: var(--sc-section); }
.receipts__cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--sc-7); }
.receipts__col:first-child { padding-right: clamp(1.5rem, 4vw, 4rem); }
.receipts__col + .receipts__col { border-left: 1px solid var(--sc-hairline); padding-left: clamp(1.5rem, 4vw, 4rem); }
.receipts__col h3 { font-family: var(--sc-font-display); font-weight: 560; font-size: var(--sc-t-lg); letter-spacing: -0.01em; margin: 0 0 var(--sc-4); }
.receipts__col ul { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.receipts__col li { padding: 9px 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); text-wrap: pretty; }
.receipts__col li:first-child { border-top: 0; padding-top: 0; }
/* A name and a door under the promises: the receipts are somebody's word, so
   the page says whose, and where to take a question about them. */
.receipts__who {
  margin-top: var(--sc-6); max-width: 46rem;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6; text-wrap: pretty;
}

/* ═══ 10 · simple pricing ═══
   The yearly column is the pick, so it is the one wearing a border. The
   monthly column keeps the page's own left edge and no box, which is what
   makes the difference read at a glance. No glow anywhere. */
.act--price { background: var(--g5); padding-block: var(--sc-section); }
.price__head { max-width: 40rem; }
/* Both columns carry the same button, so the head says where the choice is
   actually made rather than leaving the reader to guess. */
.price__when { font-size: var(--sc-t-sm); }
.price__cols {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--sc-8); max-width: 64rem;
}
.price__col { padding: clamp(1.15rem, 2.2vw, 1.9rem); border: 1px solid transparent; border-radius: var(--sc-r-md); }
.price__col:first-child { padding-left: 0; }
.price__col--pick {
  border-color: color-mix(in oklab, var(--sc-accent) 44%, transparent);
  background: color-mix(in oklab, var(--sc-ink) 3%, transparent);
}
.price__pick {
  display: inline-block; margin-bottom: var(--sc-3);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 42%, transparent);
  background: color-mix(in oklab, var(--sc-accent) 13%, transparent);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--sc-ink);
}
.price__fine { margin-top: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.price__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
.price__amount {
  font-family: var(--sc-font-display); font-weight: 560;
  font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.05;
  margin-top: var(--sc-3); font-variant-numeric: tabular-nums;
}
.price__period { margin-top: 6px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.price__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.price__list li { padding: 9px 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; text-wrap: pretty; }
.price__cta { margin-top: var(--sc-6); }

/* ═══ 11 · questions people ask ═══ */
.act--faq { background: var(--g5); padding-block: var(--sc-section); border-top: 1px solid var(--sc-hairline); }
.faq__head { max-width: 40rem; }
.faq__list { margin-top: var(--sc-7); max-width: 48rem; }
.faq__item { padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); }
.faq__item:first-child { border-top: 0; padding-top: 0; }
.faq__item h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15;
  margin: 0 0 var(--sc-3);
}
.faq__item p { color: var(--sc-ink-soft); max-width: 56ch; text-wrap: pretty; }

/* ═══ 12 · the close, on the night harbor ═══ */
.act--ready { background: var(--g5); overflow: clip; isolation: isolate; }
.ready__wall { position: absolute; inset: 0; z-index: 1; }
.ready__wall picture, .ready__wall img { display: block; width: 100%; height: 100%; }
.ready__wall img { object-fit: cover; object-position: 50% 54%; max-width: none; }
.ready__scrim { z-index: 2; }
.ready__scrim--band { opacity: 0.72; }
.ready__in {
  position: relative; z-index: 3;
  padding-block: clamp(5rem, 12vw, 11rem) clamp(4rem, 9vw, 8rem);
  max-width: min(var(--sc-maxw), 100%);
}
.ready__h { margin: 0; max-width: 16ch; }
.ready__line { margin-top: var(--sc-4); max-width: 42ch; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.ready__cta { margin-top: var(--sc-6); }
/* The name, folded in as one quiet line rather than a section of its own. */
.ready__name { margin-top: var(--sc-5); max-width: 48ch; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty; }
.ready__wait { margin-top: var(--sc-8); max-width: 32rem; }
.ready__waitline { font-size: var(--sc-t-sm); color: var(--sc-ink); margin: 0 0 10px; }

/* ------------------------------------------------------------------ footer -- */
.foot {
  position: relative; z-index: 2;
  background: var(--g5); border-top: 1px solid var(--sc-hairline);
  padding-block: var(--sc-7) var(--sc-6);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot__links { display: grid; gap: 10px; }
.foot__group { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.foot__group a { color: var(--sc-ink-soft); text-decoration: none; border-radius: 4px; transition: color 140ms var(--sc-ease-out); }
.foot__group a:hover { color: var(--sc-ink); text-decoration: underline; }
.foot__group a:active { color: var(--sc-accent); }
.foot__k { opacity: 0.55; }
.foot__copy { margin-top: var(--sc-6); }

/* ------------------------------------------------------------------ phones -- */
@media (max-width: 1024px) {
  .spot__wide-body { grid-template-columns: 1fr; gap: var(--sc-6); }
  .spot__list--two { max-width: none; }
  .box__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --bar-h: 56px; --tb-h: 40px; }
  .bar { gap: 10px; }
  .bar__links { display: none; }
  .bar__mark span { font-size: 1rem; }
  /* The only persistent action left once the nav links go: a real tap target. */
  .bar__cta { padding: 12px 14px; min-height: 44px; }
  .btn--lg { padding: 13px 18px; min-height: 46px; }

  /* Hero: recomposed, not shrunk. Copy first, the editor cropped to its left
     70 percent below it, the capsule above the taskbar. */
  .act--hero { min-height: 0; }
  .hero { display: flex; flex-direction: column; min-height: 100svh; }
  .hero__scrim {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--g1) 92%, transparent) 0%,
      color-mix(in oklab, var(--g1) 74%, transparent) 36%,
      color-mix(in oklab, var(--g1) 34%, transparent) 60%,
      transparent 80%);
  }
  .hero__scrim--band { display: none; }
  .hero__copy { position: relative; left: auto; bottom: auto; width: auto; padding: calc(var(--bar-h) + 20px) var(--sc-gutter) 0; display: flex; flex-direction: column; }
  /* A flex column stretches its children, and the pill is a pill. */
  .hero__pill { align-self: flex-start; }
  .hero__h1 { font-size: var(--sc-t-2xl); max-width: none; }
  .hero__claim { font-size: 1.1rem; max-width: none; }
  .hero__lede { margin-top: var(--sc-4); font-size: var(--sc-t-sm); }
  /* Windows only is read before the tap: on a phone the fine print sits above
     the buttons, and the email capture goes last. */
  .hero__fine { order: 1; margin-top: var(--sc-5); }
  .hero__actions { order: 2; margin-top: var(--sc-4); }
  .hero__wl { order: 3; }
  .hero__actions .btn { flex: 1 1 auto; }
  /* On a phone there is no installer to run, so the email is the path: open. */
  .hero__wl-toggle { display: none; }
  .hero__wl-body { display: block; margin-top: 0; max-width: none; }
  .hero__wl-phone { display: block; }
  .hero__fine-desk { display: none; }
  .hero__fine-phone { display: inline; }
  .hero__shot { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; overflow: visible; margin: 20px var(--sc-gutter) 0; }
  .hero__shot img { max-width: 100%; width: 100%; height: auto; margin: 0; border-radius: 12px; }
  .hero__wall { inset: -40px 0 auto 0; height: 78%; }
  .hero__wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to bottom, transparent, var(--g1)); }
  .hero__wall img { object-position: 100% 50%; }
  .hero__capsule { position: relative; right: auto; bottom: auto; align-self: flex-end; width: min(300px, calc(100% - 2 * var(--sc-gutter))); margin: 18px var(--sc-gutter) 18px; }
  .hero__mist { right: 0; height: 30%; }
  .hero .taskbar { position: relative; margin-top: auto; }

  .act--feat { padding-block: var(--sc-7) var(--sc-section); }
  .feat__fig { margin-top: var(--sc-6); }
  .feat__list { grid-template-columns: 1fr; margin-top: var(--sc-6); }
  .feat__row:nth-child(2) { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5); }

  .why { grid-template-columns: 1fr; gap: var(--sc-6); }
  .why__days { gap: var(--sc-4); }
  .mini__body { padding: 9px; }
  .mini__title { font-size: var(--sc-t-xs); }

  /* Phones: the bleed becomes the whole width, so the copy goes back inside the
     gutter and only the screenshots run to the edges. */
  .spot__in, .spot--flip .spot__in {
    grid-template-columns: 1fr; gap: var(--sc-6);
    padding-left: 0; padding-right: 0;
  }
  .spot--flip .spot__text { order: 0; }
  .spot--flip .spot__fig { order: 0; }
  .spot__text { max-width: none; padding-inline: var(--sc-gutter); }
  .spot__fig figcaption, .spot--flip .spot__fig figcaption { padding-inline: var(--sc-gutter); }
  .spot__fig--card .spot__frame { max-width: none; }
  .spot__in .spot__frame { border-inline: 0; border-radius: 0; }
  .spot__rhythm { margin-top: var(--sc-6); }

  /* The art directed phone crops are all 4:3 and the desktop captures are not,
     so the frame reserves the phone crop's own box. Without this the browser
     reserves the desktop ratio from the img's width and height attributes and
     the page jumps when the phone image lands. */
  .frame--phone { aspect-ratio: 4 / 3; }
  .frame--phone img { height: auto; }

  .box__grid { grid-template-columns: 1fr; gap: var(--sc-6); margin-top: var(--sc-6); }

  .receipts__cols { grid-template-columns: 1fr; gap: var(--sc-6); }
  .receipts__col:first-child { padding-right: 0; }
  .receipts__col + .receipts__col { border-left: 0; border-top: 1px solid var(--sc-hairline); padding-left: 0; padding-top: var(--sc-6); }

  .price__cols { grid-template-columns: 1fr; gap: var(--sc-6); margin-top: var(--sc-6); }
  .price__col { padding: 0; }
  .price__col--pick { padding: var(--sc-5); }
  .price__col--pick { order: -1; }

  .act--faq { padding-block: var(--sc-7); }
  .faq__list { margin-top: var(--sc-6); }

  .ready__wall img { object-position: 50% 40%; }
  .ready__in { padding-block: clamp(3.5rem, 14vw, 6rem) clamp(3rem, 10vw, 5rem); }
  /* The phone crop of the night harbour is brighter, and this line crosses the
     lit hull: ink-soft measured 3.3:1 there. Full ink, same size, clears AA. */
  .ready__line { color: var(--sc-ink); }
}

@media (max-width: 400px) {
  /* Keep "when you drift." on its own line rather than letting it break again. */
  .hero__h1 { font-size: 1.95rem; }
  .hero__shot { margin-top: 14px; }
}

/* ---------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .btn, .link, .bar__links a, .foot__group a, .wl-input, .hero__wl-toggle { transition: none; }
  .btn:active, .bar__links a:active { transform: none; }
}