@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/fonts/golos.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jbmono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ink: #EDF2F7;
  --muted: #90A2B2;
  --muted-bright: #A6B6C4;   /* secondary type sitting on the sky, not on a card */
  --amber: #FFAE3D;
  --amber-deep: #E08A38;
  --card: rgba(237, 242, 247, 0.05);
  --hairline: rgba(237, 242, 247, 0.14);
  --night: #070C12;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: "Golos Text", -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
/* The sky is a fixed canvas behind everything, sized to the large viewport
   (100lvh) rather than to the box iOS Safari gives a fixed element: while the
   toolbars slide in on a scroll up, Safari resizes that box a beat late and
   the body colour showed as a black band above the toolbar. A canvas that
   already reaches under the toolbar has nothing to catch up with. */
#sky { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.landing-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(rgba(7,12,18,0.55), transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.landing-brand { font-family: "Unbounded", "Arial Black", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--ink); text-decoration: none; }
.landing-brand em { font-style: normal; color: var(--amber); }
.landing-header-cta {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--night); background: var(--amber); text-decoration: none;
  padding: 9px 16px; border-radius: 999px;
  transition: background 0.2s ease;
}
.landing-header-cta:hover { background: var(--amber-deep); }

.landing-main { max-width: 1060px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.landing-main section { padding: clamp(56px, 10vh, 120px) 0; }

.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 96px; }
.landing-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 18px;
}
.landing-main h1 {
  font-family: "Unbounded", "Arial Black", sans-serif;
  font-size: clamp(30px, 5.6vw, 62px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 0 20px; max-width: 17ch; text-wrap: balance;
}
.landing-main h1 em { font-style: normal; color: var(--amber); }
.sub { font-size: clamp(16px, 2vw, 20px); color: var(--muted); max-width: 52ch; margin: 0 0 48px; }

/* re-anchoring timeline demo */
.anchor-demo { position: relative; margin: 12px 0 24px; padding: 118px 0 66px; }
.rail { position: relative; height: 2px; background: var(--hairline); border-radius: 2px; }
/* marker/label/chips sit at left:0 and slide via translateX set by JS —
   transform animates on the compositor, no per-frame layout */
.wake-marker {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber); transform: translate(-50%, -50%);
  box-shadow: 0 0 24px 6px rgba(255, 174, 61, 0.45);
  transition: transform 1.3s cubic-bezier(0.22, 1.25, 0.32, 1);
}
.wake-label {
  position: absolute; top: calc(50% + 20px); left: 0; transform: translateX(-50%);
  text-align: center; white-space: nowrap;
  transition: transform 1.3s cubic-bezier(0.22, 1.25, 0.32, 1);
}
.wake-label .t { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 20px; color: var(--amber); display: block; }
.wake-label .c { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.chip {
  position: absolute; bottom: calc(50% + 18px); left: 0; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 6px 13px; white-space: nowrap; font-size: 13px; text-align: center;
  transition: transform 1.3s cubic-bezier(0.22, 1.25, 0.32, 1);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.chip .t { display: block; font-family: "JetBrains Mono", monospace; color: var(--amber); font-size: 12px; margin-top: 1px; }
.chip::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 12px; background: var(--hairline);
}
/* two tiers so neighbouring chips never collide */
.chip[data-off="30"], .chip[data-off="90"] { bottom: calc(50% + 76px); }
.chip[data-off="30"]::after, .chip[data-off="90"]::after { height: 70px; }
@media (max-width: 560px) {
  .chip { font-size: 11px; padding: 4px 9px; }
  .chip .t { font-size: 10px; }
  .chip[data-off="60"] { display: none; }
}
.demo-caption { text-align: center; font-size: 13px; color: var(--muted); margin: 0; }
.demo-caption b { color: var(--ink); font-weight: 600; }

.hero-cta { margin: 34px 0 0; text-align: center; }
.hero-cta .button-big { margin-top: 0; }
.hero-cta-sub { margin: 14px 0 0; font-size: 13px; text-align: center; }

.scroll-hint { margin-top: 28px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.landing-main h2 {
  font-family: "Unbounded", "Arial Black", sans-serif;
  font-size: clamp(22px, 3.4vw, 38px); font-weight: 700; line-height: 1.2;
  margin: 0 0 16px; text-wrap: balance;
}
.landing-main h2 em { font-style: normal; color: var(--amber); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; }
.lead { color: var(--muted); max-width: 58ch; margin: 0 0 36px; }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.compare article { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 22px 24px; }
.compare h3 { margin: 0 0 8px; font-size: 16px; }
.compare .bad h3 { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,174,61,0.6); }
.compare p { margin: 0; font-size: 14.5px; color: var(--muted); }

.how-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 720px) { .how-grid { grid-template-columns: 1fr; } }

/* iPhone mockup: supplied transparent frame over the existing screen illustration. */
.phone { position: relative; width: 100%; max-width: 260px; aspect-ratio: 735 / 1500; margin: 0 auto; }
.phone-frame {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%;
  pointer-events: none; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.45));
}
/* The app's own home-screen sky (DawnBackground, awake): night indigo at
   the top easing into the sunrise at the bottom, with the sun's glow
   climbing in at the lower right the way DawnSky draws it. Same stops as
   the Swift, so the mock and the phone are one picture. */
.phone .screen {
  position: absolute; inset: 1.7% 3.6%; border-radius: 16% / 7.7%;
  background:
    radial-gradient(circle at 86% 104%, rgba(255,174,61,0.55) 0, rgba(255,174,61,0.18) 22%, rgba(255,174,61,0) 46%),
    linear-gradient(180deg, #141229 0%, #38213D 34%, #85401A 67%, #E89133 100%);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 16% 10%;
}
/* The chain sits on a dark card, as it does in the app: amber hours on the
   sunrise itself would not read. */
.phone .list { width: 100%; background: rgba(5,8,12,0.72); border-radius: 12px; padding: 2px 10px; }
.phone .screen::after {
  content: ""; position: absolute; bottom: 2.3%; left: 34%; width: 32%; height: 3px;
  border-radius: 999px; background: rgba(237,242,247,0.75);
}
.phone .cap { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.phone .ask { font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.phone .ask .mono { color: var(--amber); }
.phone .ask-sub { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin-top: 5px; }
.phone .ask-btns { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 14px 0 16px; }
.phone .ask-btns span { font-size: 11.5px; text-align: center; padding: 7px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); }
.phone .ask-btns .yes { background: var(--amber); border-color: var(--amber); color: var(--night); font-weight: 600; }
.phone .row { display: flex; justify-content: space-between; width: 100%; font-size: 12.5px; padding: 5px 0; border-top: 1px solid rgba(237,242,247,0.08); }
.phone .list .row:first-child { border-top: 0; }
.phone .row .n { color: var(--ink); }
.phone .row .t { font-family: "JetBrains Mono", monospace; color: var(--amber); }

/* watch mockup */
.watch { width: 100%; max-width: 270px; margin: 0 auto; }
.watch .case {
  aspect-ratio: 0.82; border-radius: 26%;
  background: #05080C; border: 1px solid #2A3644;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 0 0 6px #0D131B;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 12% 14%;
  position: relative;
}
.watch .crown { position: absolute; right: -5px; top: 26%; width: 6px; height: 34px; border-radius: 4px; background: #2A3644; }
.watch .cap { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.watch .timer { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); color: var(--ink); }
.watch .since { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.watch .row { display: flex; justify-content: space-between; width: 100%; font-size: 13px; padding: 4px 0; border-top: 1px solid rgba(237,242,247,0.08); }
.watch .row .n { color: var(--ink); }
.watch .row .t { font-family: "JetBrains Mono", monospace; color: var(--amber); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 18px 0 18px 58px; border-top: 1px solid var(--hairline); }
.steps li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 20px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--amber);
}
.steps h3 { margin: 0 0 4px; font-size: 17px; }
.steps p { margin: 0; font-size: 14.5px; color: var(--muted); }
.steps-note { position: relative; margin: 0; padding: 18px 0 0 58px; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--muted); }
.steps-note::before {
  content: "*";
  position: absolute; left: 0; top: 20px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--amber);
}

.perks { list-style: none; margin: 0; padding: 0; }
.perks li { position: relative; padding: 18px 0 18px 58px; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--muted); }
.perks li::before {
  content: "→";
  position: absolute; left: 0; top: 18px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--amber);
}
.perks b { color: var(--ink); font-weight: 600; }

/* Type that sits straight on the sky: a dark halo costs nothing against
   night and saves the rare line the risen sun passes behind, and the tone
   is a step brighter than type on cards — the sky ends the page far
   lighter than they do. */
.lead, .demo-caption, .steps h3, .steps p, .steps-note, .perks li,
.plans-note, .cta-note, .hero-cta-sub a, .cta-alt a {
  text-shadow: 0 1px 10px rgba(7, 12, 18, 0.75);
}
.lead, .demo-caption, .steps p, .steps-note, .perks li, .plans-note {
  color: var(--muted-bright);
}

.privacy-band {
  border: 1px solid var(--hairline); border-radius: 20px; padding: 26px 28px;
  background: var(--card); display: flex; gap: 18px; align-items: flex-start; max-width: 720px;
}
.privacy-band .dot { font-size: 26px; line-height: 1; }
.privacy-band p { margin: 0; font-size: 15px; color: var(--muted); }
.privacy-band b { color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: 980px; }
.plan { position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 26px 28px; }
.plan.pro { border-color: rgba(255, 174, 61, 0.55); }
.plan .badge {
  position: absolute; top: -11px; left: 24px; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--night); background: var(--amber); padding: 3px 10px; border-radius: 999px;
}
.plan .name { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.plan .price { font-family: "JetBrains Mono", monospace; color: var(--amber); font-size: 19px; margin: 0 0 16px; }
.plan .price .per { color: var(--muted); font-size: 13px; }
.plan ul { margin: 0; padding: 0 0 0 18px; font-size: 14.5px; color: var(--muted); }
.plan li { margin-bottom: 6px; }
.plan-cta {
  display: inline-block; margin-top: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--night); background: var(--amber); text-decoration: none;
  padding: 9px 16px; border-radius: 999px;
  transition: background 0.2s ease;
}
.plan-cta:hover { background: var(--amber-deep); }
.plans-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }

.cta-final { text-align: center; padding-bottom: 140px; }
.cta-final h2 { max-width: 22ch; margin-left: auto; margin-right: auto; text-shadow: 0 2px 26px rgba(7, 12, 18, 0.35); }
.cta-final .kicker { color: var(--amber); }
.button-big {
  display: inline-block; margin-top: 26px;
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--night); background: var(--amber); text-decoration: none;
  padding: 18px 34px; border-radius: 999px;
  box-shadow: 0 12px 44px rgba(255, 174, 61, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.button-big:hover { transform: translateY(-2px); box-shadow: 0 18px 56px rgba(255, 174, 61, 0.5); }
/* The risen sun sits behind this block on narrow screens, so the two
   smallest lines here carry ink instead of muted grey. */
.cta-note { font-size: 13px; color: var(--ink); font-weight: 500; margin-top: 14px; }
.cta-alt { margin: 18px 0 0; font-size: 14px; }
.notify-link {
  color: var(--muted); text-decoration: underline;
  text-decoration-color: var(--hairline); text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.notify-link:hover { color: var(--amber); }
.cta-alt .notify-link { color: var(--ink); }

.landing-footer { text-align: center; font-size: 13px; color: var(--muted); padding: 14px 16px 18px; background: rgba(7, 12, 18, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.landing-footer p { margin: 3px 0; }
.landing-footer a { color: var(--muted); }

/* reveal animations are gated on the .js class (set by landing JS) —
   without JavaScript everything stays visible */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.on { opacity: 1; transform: none; }

/* visible keyboard focus on the amber-heavy palette */
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px;
}
.landing-header-cta:focus-visible, .button-big:focus-visible, .plan-cta:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .wake-marker, .wake-label, .chip { transition: none; }
  html { scroll-behavior: auto; }
}

/* ----- feature mockups ----- */
/* 1 column → 2 columns with the Live Activity card spanning the top row →
   3 weighted columns; no orphan card at any width */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat-grid .feat:first-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .feat-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .feat-grid .feat:first-child { grid-column: auto; }
}
.feat { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px 22px; }
/* Three rows shared across a row of cards — mock, title, text — so the titles
   sit on one line however tall the mock above them. Each card used to stack
   on its own, and with mocks of three different heights the titles landed up
   to 40px apart. The mock rests on its title (align-self: end), keeping the
   mock-to-title distance the same in every card; the slack goes to the top.
   row-gap 0 because a subgrid inherits the parent's 16px gutters otherwise.
   Browsers without subgrid simply keep the old stacking. */
.feat { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.feat > :first-child { align-self: end; }
.feat h3 { font-size: 16px; margin: 16px 0 6px; }
.feat p { margin: 0; font-size: 14px; color: var(--muted); }
.feat p em { color: var(--amber); font-style: normal; font-weight: 600; }

.la-mock { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 6px 0 2px; max-width: 420px; margin: 0 auto; }
.la-pill { display: flex; align-items: center; gap: 10px; background: #000; border: 1px solid #222B36; border-radius: 999px; padding: 7px 16px; font-size: 13px; }
.la-ico { color: var(--amber); }
.la-next { color: var(--amber); }
.la-card { width: 100%; background: #05080C; border: 1px solid #222B36; border-radius: 16px; padding: 12px 14px; }
.la-row1 { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.la-row1 .mono { color: var(--amber); }
.la-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.la-dots i { width: 22%; height: 4px; border-radius: 2px; background: var(--hairline); }
.la-dots i.on { background: var(--amber); }
.la-sub { font-size: 11.5px; color: var(--muted); }

.check-mock { background: #05080C; border: 1px solid #222B36; border-radius: 16px; padding: 8px 14px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(237,242,247,0.07); font-size: 14px; }
.check-row:last-child { border-bottom: none; }
.check-row .c { color: var(--muted); }
.check-row .c.on { color: #5CBF8A; }
.check-row .t { margin-left: auto; color: var(--muted); font-size: 12px; }

.notif-mock { background: #05080C; border: 1px solid #222B36; border-radius: 16px; padding: 12px 14px; }
.notif-head { display: flex; gap: 10px; font-size: 13px; }
.notif-head span { color: var(--muted); font-size: 12px; }
.notif-ico { color: var(--amber); font-size: 18px; }
/* The actions sit under the notification the way iOS shows them once the
   banner is held: a second card of full-width rows. Never buttons inside the
   banner itself — which is what this mock used to draw, and what no iOS
   notification has ever looked like. */
.notif-actions { display: flex; flex-direction: column; margin-top: 8px; background: #05080C; border: 1px solid #222B36; border-radius: 16px; overflow: hidden; }
.notif-actions span { text-align: center; font-size: 13px; padding: 9px 0; }
.notif-actions span + span { border-top: 1px solid #222B36; }

/* FAQ, shared by the landing and the support page */
.faq details {
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--card); margin-bottom: 10px; padding: 0 18px;
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--amber); font-family: "JetBrains Mono", monospace; }
.faq details[open] summary::before { content: "− "; }
.faq details p { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); }
/* The site has no global link colour — every block sets its own, and a
   link left unstyled comes out browser-blue against the night palette. */
.faq a { color: var(--amber); }

/* Phones: the text column runs to the edge, so the rising sun passes behind the
   cards. Glass that is 5% white lets the disc through and it reads as sitting on
   top of the card; a darker, blurred pane keeps the sun behind the surface while
   the sky still tints it. */
@media (max-width: 720px) {
  .compare article, .plan, .privacy-band, .faq details {
    background: rgba(11, 17, 24, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}