/*
  starvostech.com
  One stylesheet for every page. No web fonts, no images from elsewhere.

  Colour model
  - Every section is a band. A band sets its own colour tokens:
      .day    follows the visitor's light/dark setting (white / black)
      .alt    follows it too, one step off the page colour (#F5F5F7 / #111113)
      .night  is always dark. It carries the moon motif and the hero, and it
              shows the app's dark screenshots in either setting.
    In dark mode the day and night bands meet as black on black, which is
    the point: the page simply goes to night with the visitor.
  - One accent, Offtab's own blue, for links and the main button.
*/

/* ---------- Tokens ---------- */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(22px, 5vw, 48px);
  /* The gutter on each side, never less than the screen's safe area (the
     notch and rounded corners of an iPhone held sideways; zero elsewhere). */
  --gutter-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --wrap: 1180px;
  --measure: 680px;
  --nav-h: 56px;

  --ease: cubic-bezier(0.22, 0.61, 0.18, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --red: #E5243B;

  /* The two page colours, readable from inside any band (a night band
     redefines --bg), so a band can fade into its neighbours. */
  --day-bg: #FFFFFF;
  --alt-bg: #F5F5F7;

  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --day-bg: #000000; --alt-bg: #111113; }
}

/* Day band tokens (also the page default). */
:root,
.day {
  --bg: #FFFFFF;
  --fg: #1D1D1F;
  --fg-2: #6E6E73;
  --line: #D2D2D7;
  --surface: #F5F5F7;
  --surface-2: #E8E8ED;
  --accent: #2069D9;
  --accent-fill: #2069D9;
  --accent-fill-hover: #1A5FC9;
  --focus: #2069D9;
  /* On light bands the moon is line art: a pale lit face, a fine dark
     ring, and the shadow left as the page itself. */
  --moon-lit: #E3E3E8;
  --moon-bg: #FFFFFF;
  --moon-line: #3A3A3C;
  --shadow-phone: 0 40px 70px -40px rgba(0, 0, 0, 0.45);
}

.alt {
  --bg: #F5F5F7;
  --fg: #1D1D1F;
  --fg-2: #6E6E73;
  --line: #D2D2D7;
  --surface: #FFFFFF;
  --surface-2: #E8E8ED;
  --accent: #2069D9;
  --moon-lit: #DCDCE1;
  --moon-bg: #F5F5F7;
  --shadow-phone: 0 40px 70px -40px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root,
  .day {
    --bg: #000000;
    --fg: #F5F5F7;
    --fg-2: #A1A1A6;
    --line: #2E2E32;
    --surface: #161617;
    --surface-2: #232326;
    --accent: #4C8DF6;
    --focus: #4C8DF6;
    --moon-lit: #F5F5F7;
    --moon-bg: #000000;
    --moon-line: #F5F5F7;
    --shadow-phone: 0 0 #0000;
  }
  .alt {
    --bg: #111113;
    --fg: #F5F5F7;
    --fg-2: #A1A1A6;
    --line: #2E2E32;
    --surface: #1D1D1F;
    --surface-2: #2A2A2D;
    --accent: #4C8DF6;
    --moon-lit: #F5F5F7;
    --moon-bg: #111113;
    --moon-line: #F5F5F7;
    --shadow-phone: 0 0 #0000;
  }
}

.night {
  /* Deep ink-navy rather than black: the base the living sky is drawn on. */
  --bg: #080C1E;
  --fg: #F5F5F7;
  --fg-2: #B4B6C1;
  --line: #2A2E3D;
  --surface: #121626;
  --surface-2: #1C2133;
  --accent: #94BBFF;
  --focus: #94BBFF;
  --moon-lit: #F5F5F7;
  --moon-bg: #05070F;
  --moon-line: #F5F5F7;
  --shadow-phone: 0 0 #0000;
  color-scheme: dark;
}

.day, .alt, .night {
  background: var(--bg);
  color: var(--fg);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

strong { font-weight: 600; color: var(--fg); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent-fill);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { top: 12px; text-decoration: none; }

.wrap {
  /* Centred at most --wrap wide, with at least the gutter (or the safe
     area) on each side. */
  max-width: var(--wrap);
  margin-left: max(var(--gutter-l), (100% - var(--wrap)) / 2);
  margin-right: max(var(--gutter-r), (100% - var(--wrap)) / 2);
}

/* ---------- Type ---------- */

.display,
.h2,
.h3,
.title {
  font-family: var(--font-display);
  color: var(--fg);
  text-wrap: balance;
}

.display {
  font-size: clamp(46px, 7.4vw, 104px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.034em;
}

.h2 {
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.h3 {
  font-size: clamp(21px, 1.7vw, 24px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.lede {
  font-size: clamp(19px, 1.65vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--fg-2);
  text-wrap: pretty;
}
.lede strong { font-weight: 600; }

.small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  letter-spacing: -0.006em;
}

/* ---------- Links and buttons ---------- */

.more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 19px;
  letter-spacing: -0.016em;
  min-height: 44px;
}
.more svg { width: 9px; height: 14px; flex: none; transition: transform 0.3s var(--ease); }
.more:hover svg { transform: translateX(3px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--accent-fill, #2069D9);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: background-color 0.2s, transform 0.2s var(--ease);
}
.btn:hover { background: var(--accent-fill-hover, #1A5FC9); text-decoration: none; }
.btn:active { transform: scale(0.98); }

/*
  The App Store button works without any script:
  - .store-live is the real link. Its href is the APP_STORE_URL marker until
    site/fill-placeholders.sh fills it in. While the href still starts with
    "{{" it is display:none, which also takes it out of the tab order and
    the accessibility tree, so nobody can follow a broken link.
  - .store-soon is the "Coming soon to the App Store" line, shown until then.
*/
.store { display: inline-flex; align-items: center; }
.store-live[href^="{{"] { display: none; }
.store-live:not([href^="{{"]) + .store-soon { display: none; }
body:has(.store-live:not([href^="{{"])) .soon-only { display: none; }

.store-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 22px 8px 18px;
  border-radius: 999px;
  background: var(--accent-fill, #2069D9);
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  transition: background-color 0.2s, transform 0.2s var(--ease);
}
.store-live:hover { background: #1A5FC9; text-decoration: none; }
.store-live:active { transform: scale(0.98); }
.store-live svg { width: 20px; height: 20px; }

.store-soon {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

/* ---------- The Starvos Tech logo ----------
   Geometry is the brand logo's own; colours are its two variants:
   logo-light on light bands, logo-dark on dark ones. */

:root,
.day,
.alt {
  --lg-lit: #0B0B0C;
  --lg-ring: #CFC9BC;
  --lg-red: #A3101F;
  --lg-word: #0B0B0C;
  --lg-sub: #8A8478;
}
@media (prefers-color-scheme: dark) {
  :root,
  .day,
  .alt {
    --lg-lit: #ECE7DC;
    --lg-ring: #4A4952;
    --lg-red: #D0182B;
    --lg-word: #ECE7DC;
    --lg-sub: #8F8B96;
  }
}
.night {
  --lg-lit: #ECE7DC;
  --lg-ring: #4A4952;
  --lg-red: #D0182B;
  --lg-word: #ECE7DC;
  --lg-sub: #8F8B96;
}
.lg-ring { fill: none; stroke: var(--lg-ring); }
.lg-lit { fill: var(--lg-lit); }
.lg-redring { fill: none; stroke: var(--lg-red); }
.lg-dot { fill: var(--lg-red); }
.lg-line { fill: none; stroke: var(--lg-red); }
.lg-arrow { fill: var(--lg-red); }
.lg-word { fill: var(--lg-word); }
.lg-sub { fill: var(--lg-sub); }

.lockup { display: block; width: auto; height: auto; overflow: visible; }
.lockup-compact { height: 34px; }
/* In the bar the compact lockup is as large as the bar allows, so the
   wordmark stays readable. */
.nav .lockup-compact { height: 38px; }
.lockup-full { width: 100%; }

/* Logo rows: at rest they are exactly the logo. On first view the signal
   line sweeps out from the centre, then the arrowheads and moons arrive. */
.lgrow { display: block; width: 100%; height: auto; overflow: visible; }
.lg-arrow, .lg-moon { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .lgrow.draw .lg-line { stroke-dasharray: 282; animation: lg-sweep 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
  .lgrow.draw .lg-arrow-l { animation: lg-arrow-l 0.7s var(--ease-out) 1.15s both; }
  .lgrow.draw .lg-arrow-r { animation: lg-arrow-r 0.7s var(--ease-out) 1.15s both; }
  .lgrow.draw .lg-moon { animation: lg-moon 0.9s var(--ease-out) both; }
  .lgrow.draw .lg-moon:nth-of-type(5) { animation-delay: 0.05s; }
  .lgrow.draw .lg-moon:nth-of-type(4),
  .lgrow.draw .lg-moon:nth-of-type(6) { animation-delay: 0.38s; }
  .lgrow.draw .lg-moon:nth-of-type(3),
  .lgrow.draw .lg-moon:nth-of-type(7) { animation-delay: 0.56s; }
  .lgrow.draw .lg-moon:nth-of-type(2),
  .lgrow.draw .lg-moon:nth-of-type(8) { animation-delay: 0.74s; }
  .lgrow.draw .lg-moon:nth-of-type(1),
  .lgrow.draw .lg-moon:nth-of-type(9) { animation-delay: 0.92s; }
  /* The full lockup: the wordmark fades in after the row, then the subline.
     (Opacity only: the letters are placed by their own transform attribute.) */
  .lgrow.draw .lg-word { animation: lg-word 1s var(--ease-out) 1.05s both; }
  .lgrow.draw .lg-sub { animation: lg-word 1s var(--ease-out) 1.35s both; }
  html.js .lgrow.draw:not(.is-seen) :is(.lg-line, .lg-arrow, .lg-moon, .lg-word, .lg-sub) { animation-play-state: paused; }
}
@keyframes lg-sweep { from { stroke-dashoffset: 282; } to { stroke-dashoffset: 0; } }
@keyframes lg-arrow-l { from { opacity: 0; transform: translateX(14px); } }
@keyframes lg-arrow-r { from { opacity: 0; transform: translateX(-14px); } }
@keyframes lg-moon { from { opacity: 0; transform: scale(0.82); } }
@keyframes lg-word { from { opacity: 0; } }

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  flex: none;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 32px);
}
.nav li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
  font-size: 14px;
  letter-spacing: -0.01em;
  opacity: 0.82;
  transition: opacity 0.2s;
}
.nav li a:hover { opacity: 1; text-decoration: none; }
.nav li a[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav li a.nav-get {
  min-height: 30px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--accent-fill, #2069D9);
  color: #fff;
  opacity: 1;
  font-weight: 500;
}
.nav li a.nav-get:hover { background: #1A5FC9; }

@media (max-width: 600px) {
  .nav .wide { display: none; }
  .nav-in { gap: 12px; }
  .nav .lockup-compact { height: 30px; }
}
@media (max-width: 480px) {
  .nav .narrow-hide { display: none; }
}

/* ---------- Sections ---------- */

.sec {
  padding-block: clamp(96px, 12vw, 168px);
}
.sec-tight {
  padding-block: clamp(72px, 9vw, 120px);
}

.head {
  max-width: 860px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.head .lede { margin-top: 22px; max-width: 680px; }
.head.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: end;
  max-width: none;
}
.head.split .lede { margin-top: 0; max-width: 30em; }
.head.split .themes-copy { margin-bottom: 0; }
@media (max-width: 860px) {
  .head.split { grid-template-columns: 1fr; gap: 22px; }
}
.head-center {
  margin-inline: auto;
  text-align: center;
}
.head-center .lede { margin-inline: auto; }

/* ---------- iPhone frame ----------
   Drawn to the iPhone 17 Pro Max's proportions: the screenshots are
   1320 x 2868. Lengths are in container-query units of the phone's own
   width, so the frame stays exact at every size. */

.phone {
  container-type: inline-size;
  width: 100%;
}
.phone-body {
  position: relative;
  padding: 2.3cqw;
  border-radius: 16.4cqw;
  background: #000;
  box-shadow:
    inset 0 0 0 0.42cqw #3A3A3D,
    inset 0 0 0 0.62cqw #121214,
    var(--shadow-phone);
}
.phone-body::before,
.phone-body::after {
  content: "";
  position: absolute;
  width: 0.7cqw;
  border-radius: 0.4cqw;
  background: #2C2C2F;
}
.phone-body::before { left: -0.55cqw; top: 22%; height: 13cqw; }
.phone-body::after { right: -0.55cqw; top: 29%; height: 20cqw; }
.screen {
  position: relative;
  overflow: hidden;
  border-radius: 13.6cqw;
  background: #000;
  aspect-ratio: 1320 / 2868;
  transform: translateZ(0);
}
.screen img,
.screen picture {
  display: block;
  width: 100%;
  height: 100%;
}
.screen img { object-fit: cover; }
.island {
  position: absolute;
  z-index: 2;
  top: 3.08cqw;
  left: 35.6%;
  width: 28.8%;
  height: 8.2cqw;
  border-radius: 999px;
  background: #000;
}

/* ---------- The waning moon ----------
   One large moon: a lit half-disc plus a terminator ellipse whose width
   follows |cos(phase)|, clipped to the disc. At new moon it becomes the
   logo's centre moon: a red ring and a red dot. */

.mn-o { fill: none; stroke: var(--moon-line); stroke-width: var(--stroke, 1); }
.mn-r, .mn-l, .mn-t { fill: var(--moon-lit); }
.mn-b { fill: var(--moon-bg); }
.mn-t { transform-box: fill-box; transform-origin: center; }
.mn-d { fill: var(--lg-red); opacity: 0; }
.mn-rr { fill: none; stroke: var(--lg-red); opacity: 0; }

/* ---------- One-time reveals (only when the script is running) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .rv {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  }
  html.js .rv.rv-scale { transform: translate3d(0, 40px, 0) scale(0.96); }
  html.js .rv.in { opacity: 1; transform: none; }
  html.js .rv.d1 { transition-delay: 0.08s; }
  html.js .rv.d2 { transition-delay: 0.16s; }
  html.js .rv.d3 { transition-delay: 0.24s; }

  /* Page-load entrance for what's above the fold. */
  .load { animation: load-in 1.1s var(--ease-out) both; }
  .load.d1 { animation-delay: 0.1s; }
  .load.d2 { animation-delay: 0.2s; }
  .load.d3 { animation-delay: 0.3s; }
  .load-rise { animation: load-rise 1.6s var(--ease-out) 0.25s both; }
}
@keyframes load-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes load-rise { from { opacity: 0; transform: translate3d(0, 120px, 0); } }

/* ======================================================================
   Offtab page
   ====================================================================== */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* clip, not hidden: hidden would make the band a scroll container and
     stop the sky's canvas from staying with the screen. */
  overflow: hidden;
  overflow: clip;
  view-timeline: --hero block;
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 29vw, 420px);
  /* One row exactly the band's height: the phone runs off the bottom (clipped)
     instead of stretching the row and pushing the copy below the fold. */
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  height: clamp(560px, calc(100svh - var(--nav-h)), 920px);
}
.hero-copy {
  align-self: center;
  padding-bottom: 40px;
}
.hero-icon {
  width: clamp(72px, 7vw, 96px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: clamp(24px, 3vw, 36px);
  border-radius: 22.4%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -18px rgba(76, 141, 246, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-icon { animation: icon-in 1.3s cubic-bezier(0.2, 0.9, 0.25, 1.06) 0.05s both; }
}
@keyframes icon-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.84); filter: blur(6px); }
  60% { filter: blur(0); }
}
.hero-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-name span { color: var(--fg-2); font-weight: 400; }
.hero .display { max-width: 11ch; }
.hero .lede { margin-top: 28px; max-width: 30em; }
.hero .actions { margin-top: 40px; }
/* On desktop the hero is one screen tall, so the headline also scales with
   the screen's height: the whole block always fits, even in short windows. */
@media (min-width: 961px) {
  .hero .display { font-size: min(clamp(46px, 7.4vw, 104px), 11svh); }
  .hero-icon { width: clamp(64px, 9svh, 96px); margin-bottom: clamp(18px, 3.4svh, 36px); }
  .hero .lede { margin-top: clamp(16px, 3.4svh, 28px); }
  .hero .actions { margin-top: clamp(24px, 4.6svh, 40px); }
}
.hero-phone {
  align-self: start;
  margin-top: clamp(48px, 7vw, 96px);
}

@media (max-width: 960px) {
  .hero-in {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 56px;
  }
  .hero-copy { padding-top: 56px; padding-bottom: 0; }
  .hero-phone {
    width: min(76vw, 340px);
    margin: 0 auto;
    height: calc(min(76vw, 340px) * 1.22);
  }
}

/* ---------- Typing demo ---------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 16px);
  padding: clamp(12px, 1.4vw, 16px);
  border-radius: clamp(26px, 3vw, 40px);
  background: var(--surface);
}
.demo-field {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.4vw, 48px);
  min-height: clamp(300px, 30vw, 420px);
}
.demo-label {
  font-size: 15px;
  color: var(--fg-2);
  margin-bottom: 14px;
}
.demo-input { flex: 1; min-width: 0; }
.demo-text {
  min-height: 2.36em;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 50px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: pretty;
}
.caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
}
.demo-wrap.is-typing .caret,
.demo-wrap.is-waiting .caret { opacity: 1; }
.demo-wrap.is-waiting .caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-send {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 24px;
  border-radius: 50%;
  background: var(--accent-fill, #2069D9);
  color: #fff;
  transition: transform 0.25s var(--ease), opacity 0.25s;
}
.demo-send svg { width: 46%; height: 46%; }
.demo-wrap.is-sent .demo-send { transform: scale(0.86); }

.demo-result {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 40px);
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--bg);
}
.demo-result { position: relative; }
.demo-empty { display: none; }
html.js .demo-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--fg-2);
  font-size: 15px;
  transition: opacity 0.4s var(--ease);
}
html.js .demo-wrap.is-sent .demo-empty,
html.js .demo-wrap.is-filed .demo-empty { opacity: 0; }
.demo-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
}
.demo-status svg { width: 22px; height: 22px; color: #1F9D55; flex: none; }
.demo-rows li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.demo-rows li:first-child { border-top: 1px solid var(--line); }
.demo-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.cat {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #fff;
}
.cat svg { width: 24px; height: 24px; }
.cat-dining { background: #E8742A; }
.cat-groceries { background: #22A06B; }
.demo-what {
  display: flex;
  flex-direction: column;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.demo-what small {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--fg-2);
}
.demo-amt {
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.demo-replay {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.demo-replay svg { width: 16px; height: 16px; }
.demo-replay:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* The demo's hidden states exist only while the script runs it. */
html.js .demo-wrap .demo-status,
html.js .demo-wrap .demo-rows li {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
html.js .demo-wrap.is-filed .demo-status,
html.js .demo-wrap.is-filed .demo-rows li { opacity: 1; transform: none; }
html.js .demo-wrap.is-filed .demo-rows li:nth-child(1) { transition-delay: 0.12s; }
html.js .demo-wrap.is-filed .demo-rows li:nth-child(2) { transition-delay: 0.24s; }
.demo-replay[hidden] { display: none; }

.points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(32px, 5vw, 80px);
  margin-top: clamp(72px, 9vw, 120px);
}
.points li { padding-top: 22px; border-top: 1px solid var(--line); }
.points .h3 { margin-bottom: 10px; }
.points p { color: var(--fg-2); font-size: 17px; max-width: 34em; }
.points q { color: var(--fg); quotes: "\201C" "\201D"; }

@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .demo-field { min-height: 0; }
}
@media (max-width: 720px) {
  .points { grid-template-columns: 1fr; }
  .demo-rows li { gap: 14px; }
  .cat { width: 40px; height: 40px; border-radius: 11px; }
  .cat svg { width: 21px; height: 21px; }
}

/* ---------- Tour: a sticky iPhone whose screen follows the copy ---------- */

.tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 112px);
}
.tour-stage { display: none; }
.step {
  display: grid;
  gap: 36px;
  padding-block: 28px;
}
.step + .step { margin-top: 72px; }
.step .h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.026em; line-height: 1.1; margin-bottom: 14px; }
.step p { color: var(--fg-2); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; letter-spacing: -0.016em; max-width: 26em; }
.step-phone { width: min(70vw, 320px); }
.tour-grid { grid-template-columns: 1fr; }
/* Without the script, wide screens show each step beside its own phone. */
@media (min-width: 900px) {
  html:not(.js) .step { grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 80px; }
  html:not(.js) .step + .step { margin-top: 120px; }
}

/* With the script, on wide screens: one phone stays put and the screens change. */
@media (min-width: 900px) {
  html.js .tour-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html.js .tour-stage {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + max(24px, (100svh - var(--nav-h) - min(78svh, 860px) - 44px) / 2));
    align-self: start;
  }
  /* Outer height of the frame is 2.119 x its width. */
  html.js .tour-stage .phone {
    width: calc(min(78svh, 860px) / 2.119);
    margin-inline: auto;
  }
  html.js .tour-steps { padding-block: 10svh 20svh; }
  html.js .step {
    min-height: 72svh;
    align-content: center;
    padding-block: 0;
  }
  html.js .step + .step { margin-top: 0; }
  html.js .step-phone { display: none; }
  html.js .step .step-copy { transition: opacity 0.5s var(--ease); }
  html.js .tour.is-live .step:not(.is-on) .step-copy { opacity: 0.28; }
}
.shots { position: relative; width: 100%; height: 100%; }
.shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease-out);
}
.shot.is-on { opacity: 1; transform: none; }
.shot:first-child { position: relative; }

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.tour-dots li {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fg-2);
  opacity: 0.3;
  transition: width 0.5s var(--ease-out), opacity 0.4s var(--ease);
}
.tour-dots li.is-on { opacity: 0.55; }
.tour-dots li.is-cur { width: 28px; opacity: 1; background: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .shot { transition: none; transform: none; }
}

/* ---------- Privacy ---------- */

.privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 120px);
}
/* Offtab's App Store privacy label, held beside the promises as you read. */
.plabel-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 12svh);
  align-self: start;
}
.plabel {
  max-width: 400px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.plabel-icon { width: 64px; height: 64px; border-radius: 22.4%; margin-bottom: 28px; }
.plabel-kicker { font-size: 15px; color: var(--fg-2); letter-spacing: -0.008em; }
.plabel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.1;
}
.plabel-title svg { width: 30px; height: 30px; flex: none; color: #5FD39A; }
.plabel-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fg-2);
  font-size: 16px;
  line-height: 1.5;
}
.promises li {
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.promises li:last-child { border-bottom: 1px solid var(--line); }
.promises .h3 { margin-bottom: 8px; }
.promises p { color: var(--fg-2); max-width: 36em; }
.privacy .fine { margin-top: 36px; }

@media (max-width: 860px) {
  .privacy-grid { grid-template-columns: 1fr; }
  .plabel-wrap { position: static; }
}

/* The moon wanes as you read. Scroll-driven where the browser can do it;
   site.js drives the same keyframes through --p where it can't, over the
   same range (the band's data-scroll attribute). */
@media (prefers-reduced-motion: no-preference) {
  html.js .wmoon .mn-t {
    animation: mn-t-wane 1s linear both, mn-fill-wane 1s step-end both;
    animation-play-state: paused;
    animation-delay: calc(var(--p, 0) * -0.999s);
  }
  html.js .wmoon :is(.mn-d, .mn-rr) {
    animation: mn-d-wane 1s linear both;
    animation-play-state: paused;
    animation-delay: calc(var(--p, 0) * -0.999s);
  }
  @supports (animation-timeline: view()) {
    .wmoon .mn-t,
    html.js .wmoon .mn-t {
      animation: mn-t-wane linear both, mn-fill-wane step-end both;
      animation-timeline: --wane, --wane;
      animation-range: cover 20% cover 78%;
      animation-delay: 0s;
      animation-play-state: running;
    }
    .wmoon :is(.mn-d, .mn-rr),
    html.js .wmoon :is(.mn-d, .mn-rr) {
      animation: mn-d-wane linear both;
      animation-timeline: --wane;
      animation-range: cover 20% cover 78%;
      animation-delay: 0s;
      animation-play-state: running;
    }
  }
}
@keyframes mn-t-wane {
  0% { transform: scaleX(1.0000); }
  5% { transform: scaleX(0.9877); }
  10% { transform: scaleX(0.9511); }
  15% { transform: scaleX(0.8910); }
  20% { transform: scaleX(0.8090); }
  25% { transform: scaleX(0.7071); }
  30% { transform: scaleX(0.5878); }
  35% { transform: scaleX(0.4540); }
  40% { transform: scaleX(0.3090); }
  45% { transform: scaleX(0.1564); }
  50% { transform: scaleX(0.0000); }
  55% { transform: scaleX(0.1564); }
  60% { transform: scaleX(0.3090); }
  65% { transform: scaleX(0.4540); }
  70% { transform: scaleX(0.5878); }
  75% { transform: scaleX(0.7071); }
  80% { transform: scaleX(0.8090); }
  85% { transform: scaleX(0.8910); }
  90% { transform: scaleX(0.9511); }
  95% { transform: scaleX(0.9877); }
  100% { transform: scaleX(1.0000); }
}
@keyframes mn-fill-wane {
  0% { fill: var(--moon-lit); }
  50% { fill: var(--moon-bg); }
  100% { fill: var(--moon-bg); }
}
@keyframes mn-d-wane { 0%, 92% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- Details ---------- */

.themes-row {
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}
.themes-copy { max-width: 560px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.themes-copy .h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.026em; line-height: 1.1; margin-bottom: 14px; }
.themes-copy p { color: var(--fg-2); font-size: clamp(17px, 1.5vw, 19px); }
.themes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.themes li p {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  color: var(--fg-2);
  letter-spacing: -0.008em;
}
.themes:focus-visible { outline-offset: 8px; }
@media (prefers-color-scheme: light) {
  .themes { --shadow-phone: 0 22px 36px -22px rgba(0, 0, 0, 0.42); }
}

/* iPhone 17 Pro screenshots (1206 x 2622): the island sits proportionally wider. */
.phone-pro .screen { aspect-ratio: 1206 / 2622; }
.phone-pro .island { top: 3.32cqw; left: 34.5%; width: 31%; height: 8.7cqw; }

.details-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(32px, 4vw, 64px);
  margin-top: clamp(48px, 6vw, 80px);
}
.details-list .h3 { margin-bottom: 10px; }
.details-list p { color: var(--fg-2); }

@media (max-width: 860px) {
  .details-list { grid-template-columns: 1fr; gap: 36px; }
  /* Phones scroll sideways inside the band, edge to edge; the page itself never does. */
  .themes {
    display: flex;
    gap: 16px;
    margin-left: calc(-1 * var(--gutter-l));
    margin-right: calc(-1 * var(--gutter-r));
    padding: 4px var(--gutter-r) 28px var(--gutter-l);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter-l) var(--gutter-r);
    scrollbar-width: none;
  }
  .themes::-webkit-scrollbar { display: none; }
  .themes li { flex: 0 0 min(40vw, 190px); scroll-snap-align: start; }
}

/* ---------- Pricing ---------- */

.plans-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.plan {
  padding: clamp(28px, 3.6vw, 48px);
  border-radius: clamp(22px, 2.4vw, 30px);
  background: var(--surface);
}
.plan-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.plan-price {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.plan-price small { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--fg-2); margin-left: 6px; }
.plan-sub { margin-top: 14px; color: var(--fg-2); font-size: 19px; line-height: 1.4; letter-spacing: -0.016em; }
.plan-sub strong { color: var(--fg); font-weight: 600; }
.plan-list { margin-top: 28px; display: grid; gap: 14px; }
.plan-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}
.plan-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.plan-list small { display: block; color: var(--fg-2); font-size: 15px; margin-top: 2px; }
.plan-limits {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 15px;
}
.options { margin-top: 32px; display: grid; gap: 10px; }
.option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.option.best { box-shadow: inset 0 0 0 2px var(--accent); }
.option-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-weight: 600; font-size: 19px; letter-spacing: -0.018em; }
.option-tag { white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: -0.008em; }
.option-desc { grid-column: 1; color: var(--fg-2); font-size: 15px; line-height: 1.4; }
.option-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.option-price small { display: block; font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--fg-2); letter-spacing: -0.006em; }
.fine {
  margin-top: 32px;
  max-width: 820px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}

@media (max-width: 860px) {
  .plans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .option { padding: 16px 18px; }
  .option-price { grid-row: 1; }
  .option-desc { grid-column: 1 / -1; }
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
}
.faq-grid .head { margin-bottom: 0; }
.faq-grid .more { margin-top: 18px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-2);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq .answer { padding: 0 40px 26px 0; color: var(--fg-2); max-width: 40em; }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq .answer { padding-right: 0; }
}

/* ---------- Closing ---------- */

.closing { text-align: center; }
.closing .h2 { font-size: clamp(44px, 6.4vw, 88px); }
.closing .lede { margin: 22px auto 0; max-width: 30em; }
.closing .actions { justify-content: center; margin-top: 40px; }
.app-icon {
  width: clamp(72px, 7vw, 92px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.4%;
  margin: 0 auto clamp(28px, 3.4vw, 40px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -18px rgba(142, 121, 228, 0.6);
}

/* ---------- Scroll-linked motion (browsers that support it) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-copy-inner {
      animation: hero-copy-out linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 70%;
    }
    .hero-phone .phone {
      animation: hero-phone-up linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    .tour-stage .phone {
      animation: tour-in linear both;
      animation-timeline: --tour;
      animation-range: entry 10% entry 90%;
    }
    .feature-phone .phone {
      animation: feature-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .statement span {
      animation: lit-up linear both;
      animation-timeline: view();
      animation-range: cover 18% cover 42%;
    }
  }
}
.tour { view-timeline: --tour block; }
@keyframes hero-copy-out { to { opacity: 0.15; transform: translate3d(0, -60px, 0); } }
@keyframes hero-phone-up { to { transform: translate3d(0, -14%, 0); } }
@keyframes tour-in { from { transform: scale(0.9); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes feature-up { from { transform: translate3d(0, 18%, 0); } to { transform: none; } }
@keyframes lit-up { from { opacity: 0.2; } to { opacity: 1; } }

/* ======================================================================
   Starvos Tech home
   ====================================================================== */

/* The starfield behind the Starvos home hero (drawn by site.js in dark mode). */
[data-stars] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
[data-stars] > :not(.stars) { position: relative; z-index: 1; }
.stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.stars canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.stars canvas.on { opacity: 1; }

.home-hero {
  display: grid;
  align-items: center;
  /* The logo, the headline and the whole introduction fit the first screen,
     with the first light of the night band just below. */
  min-height: clamp(520px, calc(100svh - var(--nav-h)), 980px);
  padding-block: clamp(40px, 8svh, 120px) clamp(56px, 10svh, 140px);
}
.home-hero-in { text-align: center; }
.home-mark { width: min(100%, 860px, 72svh); margin: 0 auto clamp(28px, 6.4svh, 96px); }
.home-hero .display { max-width: 16ch; margin-inline: auto; font-size: min(clamp(46px, 7vw, 112px), 10.5svh); }
.home-hero .lede { margin: clamp(16px, 3svh, 28px) auto 0; max-width: 36em; }
@media (max-width: 600px) {
  .home-hero { min-height: 0; }
  .home-hero .display { font-size: clamp(40px, 11vw, 56px); }
}

.feature { overflow: hidden; overflow: clip; }
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 420px);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
  padding-top: clamp(96px, 11vw, 160px);
}
.feature-copy { align-self: center; padding-bottom: clamp(64px, 8vw, 120px); }
.feature-app {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.feature-app img { width: 64px; height: 64px; border-radius: 22.4%; }
.feature-app p { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.feature-app span { display: block; font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--fg-2); letter-spacing: -0.008em; }
.feature .lede { margin-top: 24px; max-width: 30em; }
.feature .actions { margin-top: 36px; }
.feature-phone {
  height: clamp(560px, 50vw, 700px);
}

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; gap: 48px; }
  .feature-copy { padding-bottom: 0; }
  .feature-phone { width: min(76vw, 340px); margin: 0 auto; height: calc(min(76vw, 340px) * 1.25); }
}

/* How we work: the principles, beside the waning moon. The moon goes
   from full to new as you read, and ends as the logo's centre moon. */
.wane {
  view-timeline: --wane block;
  padding-block: clamp(96px, 14svh, 180px);
  /* The moon in the logo's own colours: a dark face by day, a pale one by night. */
  --moon-lit: var(--lg-lit);
  --moon-bg: var(--bg);
  --moon-line: var(--lg-ring);
}
.wane-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.wmoon-wrap {
  position: sticky;
  top: calc(var(--nav-h) + max(32px, (100svh - var(--nav-h) - min(36vw, 400px)) / 2));
}
.wmoon { width: min(100%, 400px); overflow: visible; }
.wmoon .mn-o { stroke-width: 0.11; }
.wmoon .mn-rr { stroke-width: 0.24; }
.wmoon .mn-r { opacity: 0; }
.wmoon .mn-l { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .wmoon { filter: drop-shadow(0 0 48px rgba(236, 231, 220, 0.08)); }
}
.statement {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.028em;
  max-width: none;
  text-wrap: pretty;
}
.statement span { display: block; }
.statement span + span { margin-top: 0.7em; }
@media (max-width: 860px) {
  .wane-grid { grid-template-columns: 1fr; gap: 48px; }
  .wmoon-wrap { position: static; }
  .wmoon { width: 168px; }
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(40px, 6vw, 96px);
  align-items: end;
}
.contact .lede { max-width: 30em; }
/* Picks up the page colour of the band above and settles into the footer's. */
.contact.alt { background: linear-gradient(var(--day-bg), var(--alt-bg) 70%); }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact .email {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  word-break: break-word;
}

/* ======================================================================
   Documents: privacy, terms, support
   ====================================================================== */

.doc-head {
  padding-block: clamp(64px, 9vw, 128px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
/* Breadcrumb: which hub and which app a document belongs to. */
.crumbs { margin-bottom: clamp(20px, 3vw, 36px); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  letter-spacing: -0.008em;
  color: var(--fg-2);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 12px 0 10px;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current] { color: var(--fg); }

/* The app a document belongs to, above its title. */
.doc-app {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.doc-app img { width: 40px; height: 40px; border-radius: 22.4%; flex: none; }
.doc-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: end;
}
.doc-head .display { font-size: clamp(44px, 6.4vw, 88px); }
.doc-head .lede { max-width: 30em; }
@media (max-width: 860px) {
  .doc-head { grid-template-columns: 1fr; }
}
.doc-meta span + span::before { content: "\00B7"; margin-right: 10px; }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 28px;
  font-size: 15px;
  color: var(--fg-2);
}

.doc-grid {
  display: grid;
  /* The text column takes the width the table of contents leaves, up to a
     comfortable reading measure, so the page reads edge to edge. */
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: space-between;
  gap: clamp(48px, 8vw, 128px);
  padding-block: clamp(48px, 6vw, 88px) clamp(96px, 10vw, 144px);
}
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  align-self: start;
}
.toc h2 { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 12px; letter-spacing: -0.006em; }
.toc ol { display: grid; }
.toc a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-block: 4px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.008em;
}
.toc a:hover { color: var(--fg); text-decoration: none; }

.doc { font-size: 18px; line-height: 1.65; letter-spacing: -0.014em; }
.doc p + p { margin-top: 1em; }
.summary {
  padding-bottom: 40px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.summary h2 { font-size: 15px; font-weight: 600; color: var(--fg-2); margin-bottom: 10px; letter-spacing: -0.008em; }
.summary p {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.doc section { padding-top: 40px; }
.doc section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.doc section p { color: var(--fg); }
.doc section p + p { margin-top: 1em; }
.doc-foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 16px;
}
.doc-foot p + p { margin-top: 10px; }
.doc .help {
  margin-top: 56px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: var(--surface);
}
.doc .help h2 { margin-bottom: 10px; }
.doc .help p { color: var(--fg-2); }
.doc .help .btn { margin-top: 22px; }

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; gap: 0; }
  .toc {
    position: static;
    padding-bottom: 28px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .doc { font-size: 17px; }
}

/* ---------- Hubs: Legal and Support, one row per app ---------- */

.hub { padding-block: clamp(24px, 3vw, 40px) clamp(96px, 10vw, 144px); }
.hub-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 24px clamp(40px, 6vw, 96px);
  padding-block: clamp(36px, 4.4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.hub-id { display: flex; align-items: center; gap: 18px; align-self: start; }
.hub-id img { width: 64px; height: 64px; border-radius: 22.4%; flex: none; }
.hub-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.15;
}
.hub-desc { margin-top: 4px; font-size: 15px; color: var(--fg-2); letter-spacing: -0.008em; }
.hub-links li + li { border-top: 1px solid var(--line); }
.hub-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 20px;
  color: var(--fg);
}
.hub-links li:first-child a { padding-top: 6px; }
.hub-links a:hover { text-decoration: none; }
.hub-links a:hover .hub-link-title { color: var(--accent); }
.hub-link-text { display: grid; gap: 4px; }
.hub-link-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  transition: color 0.2s;
}
.hub-link-desc { font-size: 16px; color: var(--fg-2); line-height: 1.45; max-width: 34em; }
.hub-chev { width: 9px; height: 14px; flex: none; color: var(--fg-2); transition: transform 0.3s var(--ease); }
.hub-links a:hover .hub-chev { transform: translateX(3px); color: var(--accent); }
.hub-text { max-width: 40em; }
.hub-text p { color: var(--fg-2); font-size: 18px; line-height: 1.55; letter-spacing: -0.014em; }
.hub-text p + p { margin-top: 1em; }
.hub-email {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  word-break: break-word;
}
@media (max-width: 760px) {
  .hub-row { grid-template-columns: 1fr; }
  .hub-id img { width: 52px; height: 52px; }
}

/* ---------- 404 ---------- */

.lost { padding-block: clamp(96px, 13vw, 200px); text-align: center; }
.lost .lgrow { width: min(100%, 560px); margin: 0 auto 64px; }
.lost .display { max-width: 14ch; margin-inline: auto; }
.lost .lede { margin: 22px auto 0; max-width: 30em; }
.lost .actions { margin-top: 36px; }
.actions-center { justify-content: center; }

/* ---------- Footer ---------- */

.footer {
  padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.006em;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer .lockup-compact { height: 38px; }
.footer-brand p { margin-top: 8px; color: var(--fg-2); max-width: 22em; }
.footer h2 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--fg-2);
}
.footer li a:hover { color: var(--fg); }
.footer li a[aria-current="page"] { color: var(--fg); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 22px;
  color: var(--fg-2);
}
@media (max-width: 760px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Reduced motion: everything still and complete ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================================
   The living night sky
   Night bands carry a slow aurora in Offtab's own glow colours, drawn by
   site.js with WebGL and capped at 30fps. These gradients are the same
   moods held still: what you see without the script, with Reduce Motion,
   and for the moment before the sky fades in.
   ====================================================================== */

[data-sky] {
  position: relative;
  isolation: isolate;
}
[data-sky] > :not(.sky) { position: relative; z-index: 2; }
.feature[data-sky] > .wrap,
.hero[data-sky] > .wrap { z-index: 2; }

/* Soft seams. A night band can fade in from the band above it and out into
   the band below (fade-top-day, fade-top-alt, fade-bottom-day,
   fade-bottom-alt): over the sky, under the copy, on an eased curve so no
   line shows where the fade begins or ends. */
.fade-top-day { --seam-top: var(--day-bg); }
.fade-top-alt { --seam-top: var(--alt-bg); }
.fade-bottom-day { --seam-bottom: var(--day-bg); }
.fade-bottom-alt { --seam-bottom: var(--alt-bg); }
:is(.fade-top-day, .fade-top-alt)::before,
:is(.fade-bottom-day, .fade-bottom-alt)::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: var(--seam-h, clamp(140px, 22svh, 260px));
  pointer-events: none;
}
:is(.fade-top-day, .fade-top-alt)::before {
  top: -1px;
  background: linear-gradient(to bottom,
    var(--seam-top) 0%,
    color-mix(in srgb, var(--seam-top) 74%, transparent) 19%,
    color-mix(in srgb, var(--seam-top) 54%, transparent) 34%,
    color-mix(in srgb, var(--seam-top) 38%, transparent) 47%,
    color-mix(in srgb, var(--seam-top) 25%, transparent) 59%,
    color-mix(in srgb, var(--seam-top) 15%, transparent) 70%,
    color-mix(in srgb, var(--seam-top) 7%, transparent) 81%,
    color-mix(in srgb, var(--seam-top) 2%, transparent) 91%,
    transparent 100%);
}
:is(.fade-bottom-day, .fade-bottom-alt)::after {
  bottom: -1px;
  background: linear-gradient(to top,
    var(--seam-bottom) 0%,
    color-mix(in srgb, var(--seam-bottom) 74%, transparent) 19%,
    color-mix(in srgb, var(--seam-bottom) 54%, transparent) 34%,
    color-mix(in srgb, var(--seam-bottom) 38%, transparent) 47%,
    color-mix(in srgb, var(--seam-bottom) 25%, transparent) 59%,
    color-mix(in srgb, var(--seam-bottom) 15%, transparent) 70%,
    color-mix(in srgb, var(--seam-bottom) 7%, transparent) 81%,
    color-mix(in srgb, var(--seam-bottom) 2%, transparent) 91%,
    transparent 100%);
}
/* By day, a plain white-to-navy fade would pass through grey. Instead the
   light goes the way a real sky does at dusk: white, a pale blue, then night. */
@media (prefers-color-scheme: light) {
  :is(.fade-top-day, .fade-top-alt)::before {
    background: linear-gradient(to bottom,
      var(--seam-top) 0%,
      color-mix(in srgb, var(--seam-top) 70%, #C9D8F6) 14%,
      rgba(178, 198, 242, 0.80) 30%,
      rgba(128, 152, 226, 0.52) 50%,
      rgba(84, 106, 200, 0.26) 70%,
      rgba(50, 66, 160, 0.08) 87%,
      transparent 100%);
  }
  :is(.fade-bottom-day, .fade-bottom-alt)::after {
    background: linear-gradient(to top,
      var(--seam-bottom) 0%,
      color-mix(in srgb, var(--seam-bottom) 70%, #C9D8F6) 14%,
      rgba(178, 198, 242, 0.80) 30%,
      rgba(128, 152, 226, 0.52) 50%,
      rgba(84, 106, 200, 0.26) 70%,
      rgba(50, 66, 160, 0.08) 87%,
      transparent 100%);
  }
}
/* An iPhone cropped by the band's bottom edge fades out with it. */
:is(.fade-bottom-day, .fade-bottom-alt) .feature-phone {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--seam-h, clamp(140px, 22svh, 260px))), transparent calc(100% - 12px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--seam-h, clamp(140px, 22svh, 260px))), transparent calc(100% - 12px));
}
.hero.fade-bottom-day .hero-phone {
  /* The band's bottom edge, measured from the top of the phone. */
  --band-end: calc(clamp(560px, calc(100svh - var(--nav-h)), 920px) - clamp(48px, 7vw, 96px));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--band-end) - var(--seam-h, clamp(140px, 22svh, 260px))), transparent calc(var(--band-end) - 12px));
  mask-image: linear-gradient(to bottom, #000 calc(var(--band-end) - var(--seam-h, clamp(140px, 22svh, 260px))), transparent calc(var(--band-end) - 12px));
}
@media (max-width: 960px) {
  .hero.fade-bottom-day .hero-phone {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent calc(100% - 8px));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent calc(100% - 8px));
  }
}
/* The home starfield thins out towards the band below. */
.stars {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
}

[data-sky="hero"] {
  background:
    radial-gradient(38% 52% at 84% 50%, rgba(76, 141, 246, 0.42), rgba(76, 141, 246, 0) 72%),
    radial-gradient(40% 46% at 56% -6%, rgba(142, 121, 228, 0.34), rgba(142, 121, 228, 0) 72%),
    radial-gradient(34% 40% at 98% 104%, rgba(34, 169, 124, 0.22), rgba(34, 169, 124, 0) 72%),
    radial-gradient(34% 42% at 10% 4%, rgba(91, 108, 240, 0.16), rgba(91, 108, 240, 0) 72%),
    linear-gradient(#0C1232, #05081A);
}
[data-sky="feature"] {
  background:
    radial-gradient(38% 52% at 84% 54%, rgba(76, 141, 246, 0.38), rgba(76, 141, 246, 0) 72%),
    radial-gradient(40% 46% at 50% -6%, rgba(142, 121, 228, 0.28), rgba(142, 121, 228, 0) 72%),
    radial-gradient(34% 40% at 96% 106%, rgba(34, 169, 124, 0.20), rgba(34, 169, 124, 0) 72%),
    linear-gradient(#0B1130, #05081A);
}
[data-sky="privacy"] {
  background:
    radial-gradient(40% 44% at 20% 38%, rgba(76, 141, 246, 0.24), rgba(76, 141, 246, 0) 72%),
    radial-gradient(38% 44% at 94% 88%, rgba(34, 169, 124, 0.16), rgba(34, 169, 124, 0) 72%),
    radial-gradient(38% 44% at 74% -4%, rgba(91, 108, 240, 0.14), rgba(91, 108, 240, 0) 72%),
    linear-gradient(#080C21, #04060F);
}
[data-sky="closing"] {
  background:
    radial-gradient(44% 50% at 50% 8%, rgba(142, 121, 228, 0.34), rgba(142, 121, 228, 0) 72%),
    radial-gradient(40% 46% at 10% 94%, rgba(201, 110, 160, 0.22), rgba(201, 110, 160, 0) 72%),
    radial-gradient(38% 44% at 92% 88%, rgba(76, 141, 246, 0.22), rgba(76, 141, 246, 0) 72%),
    linear-gradient(#110C2A, #0A0718);
}
[data-sky="lost"] {
  background:
    radial-gradient(40% 46% at 20% 18%, rgba(76, 141, 246, 0.26), rgba(76, 141, 246, 0) 72%),
    radial-gradient(40% 46% at 84% 72%, rgba(142, 121, 228, 0.24), rgba(142, 121, 228, 0) 72%),
    linear-gradient(#0B1130, #05081A);
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sky canvas {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: min(100vh, 100%);
  /* The large viewport, so the sky doesn't resize as Safari's bars come and go. */
  height: min(100lvh, 100%);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.sky canvas.on { opacity: 1; }

/* The moons catch a little of that light. */
[data-sky] .lgrow {
  font-size: 14px;
  filter: drop-shadow(0 0 0.35em rgba(120, 150, 255, 0.28)) drop-shadow(0 0 1.4em rgba(142, 121, 228, 0.16));
}

/* ======================================================================
   Products menu
   A <details> disclosure, so the links work without the script; site.js
   adds the animation, outside-click, Escape and focus handling.
   ====================================================================== */

.pd { position: relative; }
.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
  cursor: pointer;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.01em;
  opacity: 0.82;
  transition: opacity 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.pd-btn::-webkit-details-marker { display: none; }
.pd-btn::marker { content: ""; }
.pd-btn:hover,
.pd[open] > .pd-btn,
.pd-btn[aria-expanded="true"] { opacity: 1; }
.pd-chev { width: 11px; height: 11px; transition: transform 0.3s var(--ease); }
.pd[open] .pd-chev,
.pd-btn[aria-expanded="true"] .pd-chev { transform: rotate(180deg); }
.pd-panel[hidden] { display: none; }

.pd-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 50%;
  width: 288px;
  margin-left: -144px;
  padding: 8px 8px 10px;
  border-radius: 20px;
  background: var(--panel-bg, #FFFFFF);
  color: var(--fg);
  box-shadow:
    0 0 0 1px var(--panel-edge, rgba(0, 0, 0, 0.08)),
    0 24px 60px -18px rgba(0, 0, 0, 0.28),
    0 8px 20px -10px rgba(0, 0, 0, 0.14);
  transform-origin: 50% 0;
}
.nav.day { --panel-bg: #FFFFFF; --panel-edge: rgba(0, 0, 0, 0.08); --panel-hover: #F5F5F7; }
.nav.night { --panel-bg: #11152A; --panel-edge: rgba(255, 255, 255, 0.10); --panel-hover: #1A2038; }
@media (prefers-color-scheme: dark) {
  .nav.day { --panel-bg: #1C1C1E; --panel-edge: rgba(255, 255, 255, 0.10); --panel-hover: #2A2A2D; }
}

.nav .pd-panel ul { display: block; }
.pd-app {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 14px;
  color: var(--fg);
  transition: background-color 0.2s;
}
.nav .pd-panel a { opacity: 1; min-height: 0; font-size: inherit; }
.pd-app:hover,
.pd-app:focus-visible { background: var(--panel-hover); text-decoration: none; }
.pd-app:focus-visible { outline-offset: 0; }
.pd-app img { width: 44px; height: 44px; border-radius: 22.4%; flex: none; }
.pd-app-text { display: grid; gap: 1px; }
.pd-app-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pd-app-desc { font-size: 13px; color: var(--fg-2); letter-spacing: -0.004em; line-height: 1.3; }
.pd-more {
  margin: 6px 10px 2px;
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: -0.002em;
}

/* Script-driven open and close. */
html.js .pd-panel {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.97);
  transition: opacity 0.2s var(--ease), transform 0.32s var(--ease-out);
}
html.js .pd.is-open .pd-panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .pd-panel,
  html.js .pd.is-open .pd-panel { transform: none; transition: opacity 0.15s linear !important; }
  .pd-chev { transition: none; }
}

/* Phones: a full-width sheet that drops from the bar. */
@media (max-width: 600px) {
  .pd { position: static; }
  .pd-panel {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    padding: 12px calc(var(--gutter-r) - 10px) calc(18px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter-l) - 10px);
    border-radius: 0 0 24px 24px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html.js .pd-panel { transform: translate3d(0, -14px, 0); }
  /* The page dims behind the sheet; a tap on it closes the menu. */
  html.js .pd::before {
    content: "";
    position: fixed;
    z-index: 59;
    inset: var(--nav-h) 0 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  html.js .pd.is-open::before { opacity: 1; pointer-events: auto; }
}

/* ======================================================================
   Phones and tablets
   Everything here applies below the desktop layout (most of it at 600px
   and under), so the desktop page is untouched.
   ====================================================================== */

/* ---------- The bar on phones ----------
   The bar keeps the logo, Offtab's "Get" on its own page, and one menu
   button. The menu is the Products panel, dropped as a sheet, with the
   site's own links under the apps. On wider screens those links are in
   the bar itself, so the sheet's copies and the menu icon are hidden. */
.pd-label-m,
.pd-menu,
.nav .pd-panel .pd-links { display: none; }

@media (max-width: 600px) {
  .nav ul { gap: 4px; }
  .nav li.pd-item { order: 2; }
  .nav .pd-label,
  .nav .pd-chev { display: none; }
  .nav .pd-label-m {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .nav .pd-btn {
    position: relative;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* The icon's lines end on the gutter. */
    margin-right: -12px;
    opacity: 1;
  }
  .nav .pd-menu { display: block; width: 22px; height: 22px; }
  .pd-menu path { transition: transform 0.4s var(--ease-out); }
  .pd-menu-a { transform-origin: 10px 7px; }
  .pd-menu-b { transform-origin: 10px 13px; }
  .pd[open] .pd-menu-a,
  .pd-btn[aria-expanded="true"] .pd-menu-a { transform: translateY(3px) rotate(45deg); }
  .pd[open] .pd-menu-b,
  .pd-btn[aria-expanded="true"] .pd-menu-b { transform: translateY(-3px) rotate(-45deg); }

  /* Offtab's own page: "Get", the App Store's word, as a compact pill.
     The link is a full 44pt tall; only the middle of it is painted. */
  .nav .nav-get-app { display: none; }
  .nav li a.nav-get {
    min-height: 44px;
    padding: 0 15px;
    border-block: 6px solid transparent;
    background-clip: padding-box;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* The sheet. */
  .pd-panel { padding-top: 8px; }
  .pd-app { min-height: 64px; }
  .pd-app-desc { font-size: 14px; }
  .pd-more { margin: 6px 10px 4px; font-size: 14px; }
  .nav .pd-panel .pd-links {
    display: block;
    margin: 12px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--panel-edge, var(--line));
  }
  .nav .pd-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: background-color 0.2s;
  }
  .nav .pd-links a:hover,
  .nav .pd-links a:focus-visible { background: var(--panel-hover); text-decoration: none; }
  .nav .pd-links a:focus-visible { outline-offset: 0; }
  .nav .pd-links a[aria-current="page"] { color: var(--accent); }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .pd-menu path { transition: none; }
}
@media (max-width: 359px) {
  .nav .lockup-compact { height: 26px; }
}

/* ---------- Sections ---------- */

@media (max-width: 600px) {
  /* Day bands breathe a little less on a small screen. Night bands keep
     their room, which their soft seams fade through. */
  .sec:not(.night) { padding-block: 80px; }
  .head { margin-bottom: 40px; }
  .head .lede { margin-top: 18px; }
}

/* Buttons stack, full width, on phones. */
@media (max-width: 600px) {
  :is(.hero, .feature, .closing) .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  :is(.hero, .feature, .closing) .actions > :is(.btn, .store) {
    width: 100%;
    max-width: 420px;
  }
  :is(.hero, .feature, .closing) .actions :is(.store-live, .store-soon) {
    width: 100%;
    justify-content: center;
    padding-inline: 16px;
    text-align: center;
  }
  .closing .actions { align-items: center; }
  .hero .actions .more { align-self: flex-start; margin-top: 2px; }
}

/* ---------- The Offtab hero on phones ---------- */

@media (max-width: 600px) {
  .hero-in { gap: 48px; }
  .hero-copy { padding-top: 40px; }
  .hero-icon { width: 64px; margin-bottom: 22px; }
  .hero-name { margin-bottom: 12px; font-size: 19px; }
  .hero .lede { margin-top: 20px; }
  .hero .actions { margin-top: 32px; }
}

/* ---------- Typing demo on phones ---------- */

@media (max-width: 600px) {
  .demo { padding: 10px; gap: 10px; border-radius: 28px; }
  .demo-field { padding: 22px 20px 20px; }
  .demo-label { margin-bottom: 10px; }
  .demo-send { width: 48px; height: 48px; margin-top: 18px; }
  .demo-result { padding: 20px 18px; border-radius: 20px; }
  .demo-rows li { gap: 12px; padding-block: 16px; }
  .demo-what,
  .demo-amt { font-size: 18px; }
  .demo-what small { font-size: 14px; }
}

/* ---------- The tour without its sticky phone ----------
   Below 900px each step shows its own phone: beside the copy on a tablet,
   centred under it on a phone. */
@media (min-width: 601px) and (max-width: 899px) {
  .step {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 48px;
  }
  .step-phone { width: 100%; }
  .step + .step { margin-top: 56px; }
}
@media (max-width: 600px) {
  .step { gap: 28px; padding-block: 0; }
  .step .h3 { font-size: 28px; }
  .step-phone { width: min(66vw, 280px); margin-inline: auto; }
  .step + .step { margin-top: 64px; }
}

/* ---------- Pricing on phones: each plan's name and badge on one line ---------- */

@media (max-width: 600px) {
  .plan { padding: 28px 22px; border-radius: 24px; }
  .plan-sub { font-size: 18px; }
  .plan-list { margin-top: 24px; }
  .options { margin-top: 28px; }
  .option { padding: 16px; column-gap: 12px; border-radius: 14px; }
  .option-name { font-size: 18px; }
  .option-tag { font-size: 14px; }
  .option-price { font-size: 22px; }
}

/* ---------- FAQ on phones ---------- */

@media (max-width: 600px) {
  .faq summary { padding-block: 18px; gap: 20px; }
  .faq .answer { padding-bottom: 22px; }
}

/* ---------- The waning moon on smaller screens ----------
   The moon stays at the top of the screen while the principles pass
   beneath it, so it can be seen to wane as you read. A soft band of the
   page colour under it lets each line slip away instead of colliding. */
@media (max-width: 860px) {
  .wane-grid { gap: 0; }
  .wmoon-wrap {
    position: sticky;
    top: var(--nav-h);
    z-index: 2;
    margin-left: calc(-1 * var(--gutter-l));
    margin-right: calc(-1 * var(--gutter-r));
    padding: 20px var(--gutter-r) 44px var(--gutter-l);
    background: linear-gradient(to bottom,
      var(--bg) 0%,
      var(--bg) 58%,
      color-mix(in srgb, var(--bg) 78%, transparent) 70%,
      color-mix(in srgb, var(--bg) 46%, transparent) 82%,
      color-mix(in srgb, var(--bg) 16%, transparent) 93%,
      transparent 100%);
  }
  .wmoon { width: 132px; }
}
@media (max-width: 600px) {
  .sec.wane { padding-block: 64px 96px; }
  .wmoon-wrap { padding-top: 16px; padding-bottom: 36px; }
  .wmoon { width: 104px; }
  .statement span + span { margin-top: 0.8em; }
}

/* ---------- Documents and hubs on smaller screens ---------- */

@media (max-width: 900px) {
  .toc a { min-height: 44px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 600px) {
  .doc-head { padding-block: 48px 36px; }
  .crumbs { margin-bottom: 12px; }
  .summary { padding-bottom: 32px; }
  .summary p { font-size: 20px; }
  .doc section { padding-top: 36px; }
  .doc .help { padding: 26px 22px; }
  .hub-row { gap: 18px; }
  .hub-links li:first-child a { padding-top: 14px; }
}

/* ---------- 404 on phones ---------- */

@media (max-width: 600px) {
  .lost .lgrow { margin-bottom: 44px; }
}

/* ---------- Footer: links big enough to tap ---------- */

@media (max-width: 600px) {
  /* The big email addresses: a full 44pt to tap, same place on the page. */
  .contact .email,
  .hub-email { padding-block: 8px; }
  .contact .email { margin-top: 28px; }
  .hub-email { margin-top: 14px; }
}

/* Tablets are touch screens too: the same 44pt targets, looking as before. */
@media (min-width: 601px) and (max-width: 1023px) {
  .nav li a.nav-get {
    min-height: 44px;
    border-block: 7px solid transparent;
    background-clip: padding-box;
  }
  .footer li a { min-height: 44px; min-width: 44px; }
  .footer h2 { margin-bottom: 2px; }
  .contact .email { padding-block: 5px; margin-top: 31px; }
  .hub-email { padding-block: 8px; margin-top: 14px; }
}

@media (max-width: 760px) {
  .footer h2 { margin-bottom: 2px; }
  .footer li a { min-height: 44px; min-width: 44px; }
  .footer-top { row-gap: 28px; }
}