@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Noto Sans"), local("Segoe UI");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 87.07%;
  ascent-override: 114.85%;
  descent-override: 29.86%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2122;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Noto Sans"), local("Segoe UI");
  font-weight: 200 800;
  font-style: normal;
  size-adjust: 101.46%;
  ascent-override: 102.3%;
  descent-override: 21.88%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2122;
}

:root {
  --n950: #0a0a0a;
  --n900: #171717;
  --n800: #262626;
  --n700: #404040;
  --n600: #525252;
  --n500: #737373;
  --n400: #a3a3a3;
  --n300: #d4d4d4;
  --n200: #e5e5e5;
  --n50: #fafafa;
  --money: #39FF14; /* money figures only */
  --soft-red: #e8b4b2;
  --soft-blue: #b4c9e3;
  --soft-yellow: #e2d09a;
  --soft-purple: #cdb8e0;
  --error: #fb7185;
  --card: #141414;
  --font-sans: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", "Outfit Fallback", var(--font-sans);
  --r-card: 20px;
  --r-in: 16px;
  --r-pill: 999px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  /* Today screen, inside the phone only */
  --app-bg: #0b0c0f;
  --app-card: #16181d;
  --app-line: #2e323a;
  --app-text: #f2f3f5;
  --app-muted: #a9b0bb;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

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

body {
  margin: 0;
  background: var(--n950);
  color: var(--n50);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p { margin: 0 }

a { color: var(--n50); text-underline-offset: 3px }

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

.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 {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--n50);
  color: var(--n950);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  z-index: 50;
}

.skip:focus { top: 12px }

[hidden] { display: none !important }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: var(--s7) 0 }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n400);
}

.h2 { font-size: 28px; font-weight: 700 }

.mt-8 { margin-top: 8px }

.muted { color: var(--n400) }

.small { font-size: 14px; line-height: 1.55 }

.card {
  background: var(--card);
  border: 1px solid var(--n800);
  border-radius: var(--r-card);
  padding: 20px;
}

.top { padding: 16px 0 0 }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--n50);
  text-decoration: none;
}

.logo-h, .logo-f { aspect-ratio: 1296.76 / 246.26 }

.logo-h { height: 24px; width: auto; display: block }

.logo-f { height: 22px; width: auto; display: block }

/* Default wordmark is the top-left sheen with ጠ. ?logo=c-m restores the Latin m. ?logo=cur is flat white. ?logo=c-te is the default. */
.logo-h .wm { fill: url(#lg-c-h) }
.logo-f .wm { fill: url(#lg-c-f) }
html[data-logo="cur"] .wm { fill: #ffffff }
.wm-m { display: none }
.wm-te { display: block }
html[data-logo="c-m"] .wm-te { display: none }
html[data-logo="c-m"] .wm-m { display: block }

.nav ul { list-style: none; margin: 0; padding: 0 }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--n700);
  background: var(--n900);
  color: var(--n50);
  font: 700 15px var(--font-sans);
  cursor: pointer;
}

.menu-btn:hover { background: var(--n800); border-color: var(--n600) }

.mb-ico { display: grid; gap: 4px; width: 16px }

.mb-ico i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--n50);
  transition: transform 0.2s, opacity 0.2s;
}

.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(1) { transform: translateY(6px) rotate(45deg) }

.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(2) { opacity: 0 }

.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

.menu {
  position: absolute;
  right: 20px;
  left: 20px;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--n900);
  border: 1px solid var(--n700);
  border-radius: var(--r-card);
  padding: 8px;
  display: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.menu.open { display: grid; gap: 2px }

.menu a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--n50);
  text-decoration: none;
  font-weight: 600;
}

.menu a:not(.btn):hover { background: var(--n800) }

.menu-join { padding: 6px 6px 4px }

.menu-join .btn { width: 100% }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font: 800 16px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn-primary { background: var(--n50); color: var(--n950) }

.btn-primary:hover { background: var(--n200) }

.btn-primary:active, .btn-secondary:active { transform: scale(0.98) }

.btn-secondary {
  background: var(--n800);
  color: var(--n50);
  border-color: var(--n700);
}

.btn-secondary:hover { background: var(--n700) }

.btn:focus-visible { outline: 2px solid var(--n50); outline-offset: 3px; border-radius: var(--r-pill) }

.btn-block { width: 100% }

.hero { position: relative; padding: 20px 0 var(--s6); overflow: hidden }

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 28px;
  grid-template-areas: "title" "sub" "phone" "cta";
}

.hero-title { grid-area: title; position: relative; z-index: 2; min-width: 0 }

.hero-sub { grid-area: sub }

.hero-cta { grid-area: cta }

.phone-slot { position: relative }

.sky { grid-area: phone; position: relative; z-index: 1 }

.hero h1 {
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: min(16ch, 100%);
  min-width: 0;
  text-wrap: balance;
}

.hero .sub {
  margin-top: 10px;
  color: var(--n300);
  font-size: 15.5px;
  max-width: 40ch;
  line-height: 1.5;
}

.hero-actions { margin-top: 22px }

/* Phone frame. No device brand. */
.phone {
  width: min(100%, 340px);
  margin: 0 auto;
  background: #101114;
  border: 1px solid var(--n700);
  border-radius: 36px;
  padding: 14px 12px 16px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.notch {
  width: 92px;
  height: 18px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #050506;
}

.pscreen {
  background: var(--app-bg);
  border-radius: 24px;
  padding: 16px 14px 18px;
  height: 366px;
  overflow: hidden;
}

.phead {
  height: 16px;
  margin: 0 0 14px;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
}

.qlist { display: grid; gap: 10px; height: 302px }

.qcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 68px;
  overflow: hidden;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  border-radius: 16px;
  padding: 12px 14px;
}

.qtext { flex: 1; min-width: 0; display: grid; gap: 8px }

.dist {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.where {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.glyph {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--n300);
}

.qa {
  position: relative;
  width: 4.6ch;
  height: 1.15em;
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  color: var(--money);
  font-variant-numeric: tabular-nums;
}

.qa span {
  position: absolute;
  inset: 0;
  text-align: right;
  opacity: 0;
  animation: tick 7.5s linear infinite;
}

.qa span:nth-child(2) { animation-delay: -2.5s }
.qa span:nth-child(3) { animation-delay: -5s }

@keyframes tick {
  0% { opacity: 0; text-shadow: none }
  8% { opacity: 1; text-shadow: 0 0 10px rgba(57, 255, 20, 0.45) }
  28% { opacity: 1; text-shadow: 0 0 6px rgba(57, 255, 20, 0.25) }
  36%, 100% { opacity: 0; text-shadow: none }
}

.phone { position: relative; z-index: 1 }
.phone-cap { position: relative; z-index: 1; margin: 14px 0 0; text-align: center }

.phone-cap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, #0a0a0a 0%, rgba(10, 10, 10, 0.96) 42%, rgba(10, 10, 10, 0) 72%);
}

/* Hero photo is desktop-only. Phones use .map-strip under the hero. */
.sky-photo,
.hero-scrim { display: none }

.map-strip {
  position: relative;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* The strip shows one fixed slice of the photo: full height, right edge pinned,
   so the tower and dome stay put at every phone width. */
.photo-box {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1586 / 992;
}

.photo-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #0a0a0a 0%, rgba(10, 10, 10, 0.96) 58%, rgba(10, 10, 10, 0.62) 78%, rgba(10, 10, 10, 0.12) 100%);
}

.reveal { padding-top: 28px; padding-bottom: 32px }

.reveal-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 22ch;
  margin: 0 0 10px;
  opacity: 0;
  transform: translateY(18px);
}

html:not(.js) .reveal-line,
.reveal-line.show { opacity: 1; transform: none }

@media (prefers-reduced-motion: no-preference) {
  .reveal-line { transition: opacity 0.7s ease, transform 0.7s ease }
}

.reveal-cta { margin-top: 8px }

.btn-quiet {
  background: transparent;
  color: var(--n200);
  border-color: var(--n700);
  min-height: 48px;
}

.btn-quiet:hover { border-color: var(--n500); color: var(--n50) }

.tiles {
  margin-top: var(--s5);
  display: grid;
  gap: 12px;
}

.tile h3 { font-size: 17px; font-weight: 700 }

.tile p { margin-top: 4px; color: var(--n400); font-size: 15px }

.tile-top { display: flex; gap: 12px; align-items: flex-start }

.ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--n900);
  border: 1px solid var(--n800);
  color: var(--n300);
}

.why-grid {
  margin-top: var(--s5);
  display: grid;
  gap: 20px;
  align-items: center;
}

.why-copy { margin-top: 16px; color: var(--n300); font-size: 17px; max-width: 46ch }

.stats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--n800);
  border-radius: var(--r-card);
  padding: 18px;
  min-width: 0;
}

.stat-fig {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--n50);
}

.stat:nth-child(1) .stat-fig { color: var(--soft-red) }
.stat:nth-child(2) .stat-fig { color: var(--soft-blue) }
.stat:nth-child(3) .stat-fig { color: var(--soft-yellow) }
.stat:nth-child(4) .stat-fig { color: var(--soft-purple) }

.stat-line { margin-top: 10px; color: var(--n200); font-size: 15.5px }

.stat-label { margin-top: 8px; font-size: 13px; color: var(--n400) }

.stat-src { margin-top: 6px; font-size: 13px; line-height: 1.45 }

.stat-src a { color: var(--n300) }

.soft { font-weight: 500 }

.illu { width: min(100%, 420px); height: auto; display: block }

.prose { max-width: 64ch; color: var(--n300); font-size: 16.5px }

.prose p + p { margin-top: 12px }

.prose h1 { margin-bottom: var(--s5) }

.prose h2 { margin-top: var(--s5); margin-bottom: 8px }

@media (min-width: 768px) {
  .prose h2 { margin-top: var(--s6) }
}

.privacy { padding-top: 28px }

.field { margin-top: 16px }

.label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--n200);
  margin-bottom: 8px;
}

.input, select.input {
  width: 100%;
  min-height: 52px;
  background: var(--n950);
  color: var(--n50);
  border: 1px solid var(--n700);
  border-radius: var(--r-in);
  padding: 12px 16px;
  font: 500 16px var(--font-sans);
}

.input::placeholder { color: var(--n400); opacity: 1 }

.input:hover { border-color: var(--n600) }

.input:focus {
  outline: none;
  border-color: var(--n300);
  box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.14);
}

.input[aria-invalid="true"] { border-color: var(--error) }

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--n50);
  caret-color: var(--n50);
  box-shadow: 0 0 0 1000px var(--n950) inset;
  transition: background-color 9999s ease-out 0s;
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("../chevron.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.plain-set { border: 0; margin: 0; padding: 0; min-width: 0 }

.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--n950);
  border: 1px solid var(--n800);
  border-radius: var(--r-pill);
}

.seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  color: var(--n300);
  cursor: pointer;
}

.seg input:checked + label { background: var(--n800); color: var(--n50) }

.seg input:focus-visible + label { outline: 2px solid var(--n50); outline-offset: 2px }

.help { margin-top: 6px; font-size: 13.5px; color: var(--n400) }

.help.err { color: var(--error) }

.help:empty { margin: 0 }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--n200);
  cursor: pointer;
}

.check input {
  flex: none;
  margin: 2px 0 0;
  width: 22px;
  height: 22px;
  accent-color: var(--n50);
}

.indent { margin-left: 34px }

.note { margin-top: 8px; font-size: 13.5px; color: var(--n400) }

.err-summary {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--error);
  border-radius: var(--r-in);
  color: var(--n50);
  font-size: 14.5px;
}

.err-summary ul { margin: 6px 0 0; padding-left: 20px }

.err-summary a { color: var(--error) }

.turnstile-host { margin-top: 16px; min-height: 65px }

.submit-row { margin-top: 20px }

.join-card { max-width: 520px }

.thanks .tick {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--n50);
  background: var(--n800);
  border: 1px solid var(--n600);
}

.thanks h2 { margin-top: 14px; font-size: 25px }

.thanks .lede { margin-top: 8px; color: var(--n300) }

.block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--n800) }

.faq { margin-top: var(--s5); border-top: 1px solid var(--n800) }

.faq details { border-bottom: 1px solid var(--n800) }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  font-weight: 700;
  font-size: 17px;
}

.faq summary::-webkit-details-marker { display: none }

.faq summary:focus-visible { outline: 2px solid var(--n50); outline-offset: 2px }

.faq summary .pm {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--n700);
  display: grid;
  place-items: center;
  transition: transform 0.2s;
}

.faq details[open] summary .pm { transform: rotate(45deg) }

.faq .ans { padding: 0 4px 22px; color: var(--n300); font-size: 15.5px; max-width: 62ch }

section[id], #join { scroll-margin-top: 16px }

footer {
  border-top: 1px solid var(--n800);
  padding: var(--s7) 0;
  margin-top: var(--s6);
}

.foot-grid { display: grid; gap: var(--s5) }

.tagline { margin-top: 8px; max-width: 32ch }

.foot-grid h3 {
  font: 700 13px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n400);
  margin-bottom: 8px;
}

.foot-grid p { font-size: 15px; color: var(--n300) }

.foot-legal { margin-top: var(--s6); font-size: 13.5px; color: var(--n400) }

@media (min-width: 768px) {
  .menu-btn { display: none }

  .menu {
    display: flex !important;
    position: static;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
  }

  .menu a:not(.btn) {
    min-height: 44px;
    padding: 0 12px;
    font-size: 15px;
    color: var(--n300);
  }

  .menu a:not(.btn):hover { color: var(--n50); background: var(--n900) }

  .menu-join { padding: 0 0 0 8px }

  .menu-join .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; width: auto }

  .logo-h { height: 28px }

  .wrap { padding: 0 40px }

  section { padding: var(--s8) 0 }

  .top { padding-top: 24px }

  .hero { padding: var(--s7) 0 var(--s8) }

  .hero h1 { font-size: 52px }

  .hero .sub { font-size: 19px; margin-top: 18px }

  .h2 { font-size: 36px }

  .card { padding: 28px }

  .tiles { grid-template-columns: 1fr 1fr; gap: 16px }

  .why-grid { grid-template-columns: 1.2fr 0.8fr; gap: 48px }

  .stats { grid-template-columns: 1fr 1fr; gap: 16px }

  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr }

  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--s8);
    align-items: start;
  }

  .faq-grid .faq { margin-top: 0 }
}

@media (min-width: 1024px) {
  /* The photo and the phone share one box at the photo's own ratio.
     The phone is a percentage of that box, left of the tower and the dome. */
  .hero {
    padding-top: 28px;
    padding-bottom: 36px;
    min-height: calc(28px + clamp(520px, 46vw, 840px) * 992 / 1586 + 24px);
  }
  .hero-grid { position: static }
  .hero-title,
  .hero-sub,
  .hero-cta { position: relative; z-index: 3 }
  .hero-scrim { display: block }
  .map-strip { display: none }
  .sky {
    position: absolute;
    right: 0;
    top: 20px;
    width: clamp(520px, 46vw, 840px);
    aspect-ratio: 1586 / 992;
    z-index: 1;
  }
  .sky-photo {
    display: block;
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0.9;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  }
  .sky-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .phone-slot {
    position: absolute;
    left: 3%;
    bottom: 4%;
    width: 36%;
    height: 78%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    container-type: size;
  }
  .sky .phone {
    width: 100%;
    height: auto;
    max-height: calc(100% - 28px);
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    padding: 8px 7px 10px;
  }
  .sky .notch { width: 34%; height: 12px; margin-bottom: 6px }
  .sky .pscreen {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 7px 8px;
    border-radius: 16px;
  }
  .sky .phead { margin-bottom: 6px; font-size: 11px }
  .sky .qlist {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    gap: 5px;
  }
  .sky .qcard {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 5px 7px;
    gap: 6px;
    border-radius: 12px;
  }
  .sky .glyph { width: 16px; height: 16px }
  .sky .dist { font-size: 12px }
  .sky .where { margin-top: 1px; font-size: 10.5px }
  .sky .qa { font-size: 14px; width: 4.4ch }
  .sky .phone-cap {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    padding: 0;
  }

  .hero h1 { font-size: 62px }

  .hero-scrim {
    background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 34%, rgba(10, 10, 10, 0.92) 46%, rgba(10, 10, 10, 0) 58%);
  }
  .reveal { padding-top: 32px; padding-bottom: 36px }
  .reveal-line { font-size: 40px; margin-bottom: 12px; max-width: 28ch }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero h1 { font-size: 50px }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .qa span { animation: none; opacity: 0 }
  .qa span:first-child { opacity: 1; text-shadow: none }
  .reveal-line { opacity: 1 !important; transform: none !important }
}