/* Attention Span website. Tokens are copied from the app (Palette, Night, the phase colors); the light muted
   shade is a touch darker than the app's so it reaches 4.5:1 on the cream ground. tests/pages.test.js pins the
   contrast pairs, so keep the dark :root inside the first prefers-color-scheme block. */

:root {
  --ground-top: #F8F4EF;
  --ground: #F7F2EC;
  --ground-bottom: #F1ECF3;
  --card: #FFFFFF;
  --line: #EAE1D6;
  --divider: #F1EBE2;
  --tick-idle: #DFD6C9;
  --ink: #1B2340;
  --muted: #686D81;
  --card-shadow: rgba(27, 35, 64, 0.10);
  --card-border: rgba(27, 35, 64, 0.05);

  /* Phases: the tick and character color, the text shade, the pale fill. */
  --phase-1: #93A0F4; --phase-1-deep: #4F5BC4; --phase-1-pale: #EBD7F2;
  --phase-2: #55C7A2; --phase-2-deep: #1E7D5C; --phase-2-pale: #DDF1EE;
  --phase-3: #FF9C6B; --phase-3-deep: #B85A20; --phase-3-pale: #FBE0D6;
  --phase-4: #EC76B0; --phase-4-deep: #BC3D7B; --phase-4-pale: #F9DDEA;
  --phase-5: #8C6CF8; --phase-5-deep: #5E3FD6; --phase-5-pale: #E9DCF8;
  --phase-6: #4A55D6; --phase-6-deep: #2F3A9E; --phase-6-pale: #D6D7F7;

  --sora: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --figtree: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 22px;
  --radius: 22px;

  color-scheme: light dark;
}

/* Warm night: the app's dark appearance. Character pastels (the --phase-N colors) stay the same. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground-top: #161C31;
    --ground: #12172A;
    --ground-bottom: #17182F;
    --card: #1C2338;
    --line: #2A3249;
    --divider: #232A40;
    --tick-idle: #343C55;
    --ink: #F3EDE4;
    --muted: #A3A8BC;
    --card-shadow: rgba(0, 0, 0, 0.35);
    --card-border: rgba(255, 255, 255, 0.06);

    --phase-1-deep: #B9C1F8; --phase-1-pale: #394165;
    --phase-2-deep: #91DBC3; --phase-2-pale: #2A4A51;
    --phase-3-deep: #FFBF9F; --phase-3-pale: #524044;
    --phase-4-deep: #F3A6CC; --phase-4-pale: #4E3755;
    --phase-5-deep: #B49FFA; --phase-5-pale: #373566;
    --phase-6-deep: #8991E4; --phase-6-pale: #272F5E;
  }
}

/* Fonts: the app's own, as WOFF. */
@font-face { font-family: "Sora"; src: url("fonts/Sora-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/Sora-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

/* Base */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground) linear-gradient(var(--ground-top), var(--ground) 60%, var(--ground-bottom));
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--figtree);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; font-family: var(--sora); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 4.5vw + 1rem, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
p, ol, ul { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

[id] { scroll-margin-top: 16px; }

.wrap { width: 100%; max-width: calc(1080px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 10;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--card); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Pieces shared by every page */

.label {
  font: 700 0.75rem/1.2 var(--figtree);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead { font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem); line-height: 1.5; color: var(--muted); max-width: 36em; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px var(--card-shadow);
  padding: 22px;
}

/* "Coming soon to the App Store": shaped like the app's primary button, but not a control until there's a link. */
.store {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  border-radius: 999px;
  background: var(--ink); color: var(--card);
  font: 600 1.0625rem/1.2 var(--sora);
  text-align: center;
}
@media (max-width: 359px) {
  .store { padding: 0 18px; font-size: 0.9375rem; }
}

.section { padding: 56px 0; }
.section h2 { margin-top: 10px; max-width: 18em; }
.section .lead { margin-top: 16px; }

@media (min-width: 860px) {
  .section { padding: 88px 0; }
}

/* Header */

.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 16px; padding-top: 12px; padding-bottom: 12px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 700 1.0625rem/1 var(--sora); text-decoration: none;
}

/* The mark: The Dot without a face until dot.js draws it. */
.mark {
  flex: none; display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 40% 58%, #93A0F4, #B6BFF6 35%, #D3C9F6 55%, #EBD7F2 75%, #FBF0EC);
}
.mark:has(svg) { background: none; border-radius: 0; }

.nav { display: flex; flex-wrap: wrap; margin-right: -10px; }
.nav a, .footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-weight: 600; text-decoration: none; border-radius: 999px;
}
.nav a:hover, .footer-nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { text-decoration: underline; }

/* Drawings (dot.js). A Dot's box is its body; the drawing overflows it by 25% on every side, as in the app, so
   floats and head turns never clip. Tick colors follow the phase tokens, so the ring follows light and dark. */

[data-dot] { position: relative; display: block; aspect-ratio: 1; }
[data-dot] > svg { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; overflow: visible; }
.mark[data-dot] { display: inline-block; }

[data-ring] > svg { display: block; width: 100%; height: 100%; }
.tick-idle { stroke: var(--tick-idle); }
.tick-done.p1 { stroke: var(--phase-1); }
.tick-done.p2 { stroke: var(--phase-2); }
.tick-done.p3 { stroke: var(--phase-3); }
.tick-done.p4 { stroke: var(--phase-4); }
.tick-done.p5 { stroke: var(--phase-5); }
.tick-done.p6 { stroke: var(--phase-6); }
.tick-today.p1 { stroke: var(--phase-1-deep); }
.tick-today.p2 { stroke: var(--phase-2-deep); }
.tick-today.p3 { stroke: var(--phase-3-deep); }
.tick-today.p4 { stroke: var(--phase-4-deep); }
.tick-today.p5 { stroke: var(--phase-5-deep); }
.tick-today.p6 { stroke: var(--phase-6-deep); }

/* The ring with The Dot inside, as on Home: the ring's 220-unit circle is drawn in a 238-unit box, and the Dot is
   100/230 of the ring's diameter, so 40.2% of the box. */
.stage { position: relative; aspect-ratio: 1; }
.stage > [data-ring] { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The app icon stands in when the drawing doesn't arrive: dot.js removes it as soon as the ring is drawn, so it only
   appears after 1.5 s without a drawing (scripts that failed to load), and at once without JavaScript (<noscript>). */
.stage-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22%;
  opacity: 0; animation: fallback-in 0.01s linear 1.5s forwards;
}
@keyframes fallback-in { to { opacity: 1; } }
.stage-dot { position: absolute; left: 50%; top: 50%; width: 40.2%; transform: translate(-50%, -50%); }

/* Hero */

.hero { padding: 24px 0 64px; text-align: center; }
.stage-hero { width: min(78vw, 360px); margin: 0 auto; }
.hero h1 { margin: 20px auto 0; max-width: 14em; }
.hero .lead { margin: 18px auto 0; }
.hero .store { margin-top: 30px; }
.hero-note { margin-top: 14px; font-size: 0.9375rem; color: var(--muted); }

/* Inner pages */

.page { padding: 32px 0 56px; }
.page h1 { max-width: 16em; }

/* Footer */

.site-footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 0.9375rem; }
.site-footer .wrap { display: grid; gap: 12px; }
.disclaimer { max-width: 40em; }
.footer-nav { display: flex; flex-wrap: wrap; margin-left: -10px; color: var(--ink); }

/* Landing page sections */

.figures { display: grid; gap: 16px; margin-top: 32px; padding: 0; list-style: none; }
@media (min-width: 760px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figure-number { font: 700 clamp(2rem, 1.6vw + 1.5rem, 2.75rem)/1.05 var(--sora); letter-spacing: -0.02em; }
.figure-claim { margin-top: 10px; }
.figure-source { margin-top: 14px; font-size: 0.875rem; color: var(--muted); }

.steps { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 18px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; gap: 2px 14px; align-content: start; }
.steps li::before {
  content: counter(step); grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); border: 1px solid var(--line);
  font: 600 0.9375rem/1 var(--sora);
}
.steps p { color: var(--muted); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .steps li { grid-template-columns: 1fr; gap: 6px; }
  .steps li::before { grid-row: auto; margin-bottom: 8px; }
}
.notes { margin-top: 32px; display: grid; gap: 10px; max-width: 40em; }

.journey-intro { display: grid; gap: 20px; margin-top: 28px; align-items: center; }
.journey-intro .card { max-width: 30em; }
@media (min-width: 860px) { .journey-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; } }
.phases { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.phase { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; }
.phase-name { margin-top: 4px; font-size: 1.25rem; font-weight: 700; }
.phase-name.p1 { color: var(--phase-1-deep); }
.phase-name.p2 { color: var(--phase-2-deep); }
.phase-name.p3 { color: var(--phase-3-deep); }
.phase-name.p4 { color: var(--phase-4-deep); }
.phase-name.p5 { color: var(--phase-5-deep); }
.phase-name.p6 { color: var(--phase-6-deep); }
.phase-summary { margin-top: 4px; color: var(--muted); }

.progress { display: grid; gap: 48px; align-items: center; }
@media (min-width: 860px) { .progress { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; } }
.points { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 14px; max-width: 32em; }
.points li { position: relative; padding-left: 24px; }
.points li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* The drawn phone: Home on Day 12. Sized in em from one font size so it scales as a whole; each size is the app's
   point size × 0.054 em (the phone's content is about 0.81 of the app's 346 pt), so it keeps Home's proportions. */
.phone {
  --bezel: #1B2340;
  font-size: clamp(11px, 3.3vw, 15px);
  width: 23em; max-width: 100%; margin: 0 auto;
  padding: 0.6em; border-radius: 3.4em;
  background: var(--bezel);
  box-shadow: 0 2em 4em var(--card-shadow);
}
.phone-screen {
  display: grid; gap: 0.9em;
  padding: 1.7em 1.5em 1.5em; border-radius: 2.8em;
  background: linear-gradient(var(--ground-top), var(--ground) 60%, var(--ground-bottom));
}
.phone-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.phone-label { font: 700 0.65em/1.2 var(--figtree); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.phone-buttons { display: flex; gap: 0.45em; }
.phone-buttons span { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--card); border: 1px solid var(--line); box-shadow: 0 0.25em 0.5em var(--card-shadow); }
.phone-title { font: 700 1.85em/1.1 var(--sora); }
.phone-stage { width: 13.5em; margin: 0.2em auto; }
.phone-numbers { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8em; }
.phone-timer { display: block; font: 600 2.17em/1 var(--sora); font-variant-numeric: tabular-nums; }
.phone-caption { display: block; margin-top: 0.25em; font-size: 0.76em; color: var(--muted); white-space: nowrap; }
.phone-growth { display: block; font-size: 0.76em; font-weight: 600; color: var(--phase-2-deep); white-space: nowrap; }
.phone-day { text-align: right; }
.phone-dayline { display: block; margin-top: 0.15em; font: 700 1.3em/1.2 var(--sora); white-space: nowrap; }
.phone-button {
  display: flex; align-items: center; justify-content: center; height: 3.05em; margin-top: 0.3em;
  border-radius: 999px; background: var(--ink); color: var(--card); font: 600 0.92em/1 var(--sora);
}

.pair { display: grid; gap: 16px; }
@media (min-width: 860px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair .card { padding: 28px; }
.pair .card h2 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); margin-top: 10px; }
.pair .card p:not(.label) { margin-top: 14px; color: var(--muted); }
.pair .card a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 600; color: var(--ink); }

.closing { text-align: center; }
.closing-dot { width: 140px; margin: 0 auto 32px; }
.closing h2 { margin: 0 auto; }
.closing .lead { margin: 14px auto 0; }
.closing .store { margin-top: 28px; }

.source-note { margin-top: 12px; max-width: 48em; color: var(--muted); font-size: 0.9375rem; }
.source-list { margin-top: 20px; padding-left: 1.4em; display: grid; gap: 12px; max-width: 48em; color: var(--muted); font-size: 0.9375rem; }
.source-list strong { color: var(--ink); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .phone { --bezel: #070A14; }
}

/* Long-form text: the privacy policy */

.page h1 + .card { margin-top: 24px; }
.prose { max-width: 46rem; padding: 28px; }
.prose > * + * { margin-top: 12px; }
.prose h2 { margin-top: 32px; font-size: 1.375rem; line-height: 1.25; }
.prose ul { padding-left: 1.3em; display: grid; gap: 8px; }
.prose .updated { color: var(--muted); font-size: 0.9375rem; }
.site-note { margin-top: 16px; }
.site-note h2 { margin-top: 0; font-size: 1.125rem; }
.site-note p { color: var(--muted); }
@media (max-width: 480px) { .prose { padding: 22px; } }

/* Support: questions in <details>, no JavaScript needed */

.page h1 + .lead { margin-top: 14px; }
.faq-groups { display: grid; gap: 20px; margin-top: 32px; max-width: 46rem; }
.faq { padding: 8px 24px 4px; }
.faq h2 { padding: 18px 0 6px; font-size: 1.25rem; }
.faq details + details { border-top: 1px solid var(--divider); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that turns into a cross when the answer is open. */
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 40em; }
.faq details p a { color: var(--ink); }
.contact-line { padding: 4px 0 20px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Landing v2: split hero with the real app, trust strip, three steps, features, screenshot gallery, Meet Dot, FAQ */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font: 600 0.875rem/1.2 var(--figtree); color: var(--phase-1-deep);
}

.hero-split { text-align: left; padding: 24px 0 48px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-split h1 { margin: 18px 0 0; max-width: 12em; }
.hero-split .lead { margin: 18px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.hero-actions .store { margin: 0; }
.button-quiet {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font: 600 1rem/1 var(--sora); text-decoration: none;
}
.hero-split .hero-note { margin-top: 16px; }
.hero-visual { position: relative; justify-self: center; width: min(72vw, 300px); }
.hero-dot { position: absolute; width: 30%; left: -20%; bottom: 12%; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
  .hero-visual { width: 320px; }
}

/* A phone frame around a real screenshot. */
.device {
  margin: 0; padding: 8px; border-radius: 44px; background: #1B2340;
  box-shadow: 0 24px 60px var(--card-shadow), 0 2px 6px var(--card-shadow);
}
.device img { display: block; width: 100%; height: auto; border-radius: 36px; }
@media (prefers-color-scheme: dark) { .device { background: #070A14; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line); } }

.trust { padding: 8px 0 8px; }
.trust-list {
  list-style: none; margin: 0; padding: 18px 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 8px 28px var(--card-shadow);
  font-weight: 600; font-size: 0.9375rem;
}
.trust-list li { display: inline-flex; align-items: center; gap: 8px; }
.trust-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--phase-2); }

.three-steps { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 860px) { .three-steps { grid-template-columns: repeat(3, 1fr); } }
.three-steps .card { padding: 26px; }
.step-number {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--phase-1-pale); color: var(--phase-1-deep); font: 700 1.0625rem/1 var(--sora);
}
.three-steps h3 { margin-top: 16px; font-size: 1.25rem; }
.three-steps p { margin-top: 8px; color: var(--muted); }

.feature-grid { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.feature { padding: 24px; }
.feature-icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--phase-1-pale);
  fill: none; stroke: var(--phase-1-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.feature h3 { margin-top: 14px; font-size: 1.125rem; }
.feature p { margin-top: 6px; color: var(--muted); }

/* Screens: a row that scrolls sideways on phones and wraps into a grid on wide screens. */
.gallery-scroll { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery {
  list-style: none; margin: 32px auto 0; padding: 8px var(--gutter) 24px; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(62vw, 240px); gap: 20px; width: max-content;
}
.gallery li { scroll-snap-align: center; }
.gallery h3 { margin-top: 18px; font-size: 1.0625rem; }
.gallery p { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 1100px) {
  .gallery-scroll { overflow: visible; }
  .gallery { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; width: auto; max-width: calc(1080px + 2 * var(--gutter)); gap: 36px 28px; }
}

.meet { display: grid; gap: 40px; align-items: center; }
.meet .stage { width: min(72vw, 340px); margin: 0 auto; }
@media (min-width: 860px) { .meet { grid-template-columns: 380px 1fr; gap: 64px; } }

#faq .faq-groups { margin-top: 28px; }
.more { margin-top: 20px; }
.more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 600px) {
  .nav a[href="#screens"], .nav a[href="#how"] { display: none; }
}