/* Tokens mirror docs/design/tokens.md and app/lib/core/theme. Dark only. */
:root {
  --base: #1F1F1F;
  --surface: rgba(31, 31, 31, 0.75);
  --white: #FFFFFF;
  --primary: #6600FF;
  --secondary: #A47AFF;
  /* The app's `muted` (#5F5F5F) fails contrast on this ground for running
     text; the web uses a lighter grey for secondary copy. */
  --text-secondary: #D6D6D6;
  --line: rgba(255, 255, 255, 0.12);
  --radius-card: 20px;
  --margin: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--base);
  color: var(--white);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--secondary); }
a:hover { color: var(--white); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.serif { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 400; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.accent-text { color: var(--secondary); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: var(--margin); position: relative; }

/* Background blobs, as in the app: a soft radial smear, blurred, behind the content. */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.blob-top { top: -220px; right: -180px; width: 620px; height: 620px;
  background: radial-gradient(circle, #3D5AFF 0%, var(--primary) 45%, rgba(31,31,31,0) 70%); }
.blob-mid { top: 620px; left: -260px; width: 720px; height: 720px;
  background: radial-gradient(circle, #FF8401 0%, #FD4365 45%, rgba(31,31,31,0) 70%); }

/* Buttons: sharp rectangles, uppercase Inter 11/600, per the tokens. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 28px;
  font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--white); white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; border-radius: 0;
}
.btn:hover { color: var(--white); filter: brightness(1.12); }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-secondary { background: transparent; border-color: var(--white); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }
.btn-small { min-height: 40px; padding: 12px 20px; }
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--secondary); outline-offset: 3px;
}

.card { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-card); padding: 24px; }

/* Nav */
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; }
.wordmark { font-size: 24px; color: var(--white); text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.nav-link { text-decoration: none; color: var(--white); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-link:hover { color: var(--secondary); }
.brand { display: flex; align-items: center; gap: 12px; }
.preview-badge { padding: 4px 8px; border: 1px solid var(--secondary); color: var(--secondary); font-size: 10px; line-height: 1; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; padding-block: 96px 80px; }
.hero-text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: clamp(52px, 7vw, 84px); line-height: 1; max-width: 12ch; }
.lede { font-size: 18px; line-height: 1.5; max-width: 46ch; color: var(--text-secondary); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.tagline { font-size: 16px; color: var(--text-secondary); }

/* Phone mockup: the app's Today tab. Sizes are the app's at ~0.63 scale. */
.phone-wrap { flex: 1 1 380px; display: flex; justify-content: center; }
.phone {
  zoom: 0.85;  /* a bit smaller than the drawn size, so it doesn't crowd the headline */
  width: 380px; height: 800px; padding: 11px; border-radius: 60px;
  background: #0D0D0F; border: 3px solid #3C3C44;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.phone-screen { position: relative; height: 100%; border-radius: 47px; overflow: hidden; background: var(--base); }
.phone-island { position: absolute; top: 11px; left: 50%; width: 100px; height: 28px; margin-left: -50px; border-radius: 16px; background: #000; }

/* Sharper than the page blobs: in the app they sit close behind the cards. */
.phone-blob-purple { top: 300px; left: 180px; width: 320px; height: 320px; filter: blur(4px);
  background: radial-gradient(circle at 80% 50%, #1EA0FF 0%, #3D5AFF 22%, var(--primary) 50%, #5A00E0 69%, rgba(90,0,224,0) 71%); }
.phone-blob-orange { top: 540px; left: -80px; width: 250px; height: 250px; filter: blur(4px);
  background: radial-gradient(circle at 60% 30%, #FF8401 0%, #FE6333 40%, #FA01C9 68%, rgba(250,1,201,0) 71%); }

.phone-content { position: relative; padding: 66px 26px 0; }
.p-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.p-accent { color: var(--secondary); }
.p-headline { margin-top: 14px; font-size: 50px; line-height: 0.98; }
.p-body { margin-top: 12px; font-size: 12px; line-height: 1.4; }

.p-card {
  margin-top: 10px; padding: 14px; border-radius: 18px;
  background: var(--surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.p-body + .p-card { margin-top: 26px; }
.p-card-head { display: flex; justify-content: space-between; align-items: center; }
.p-link { color: var(--secondary); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.p-arrow { font-size: 13px; font-weight: 400; margin-left: 2px; }

.p-five { margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--white); }
.p-five > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; min-width: 0; }
.p-five > div + div { border-left: 1px solid var(--white); }
.p-five .p-eyebrow { font-size: 8px; }
.p-five .serif { font-size: 13px; }
.p-strong { background: radial-gradient(circle at 0% 100%, #FA01C9 0%, #FD4365 35%, #FF8401 75%); }

.p-row { display: flex; align-items: center; gap: 8px; height: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.p-row:last-child { border-bottom: 0; height: 44px; }
.p-date { width: 54px; flex: none; font-size: 16px; }
.p-row-text { flex: 1 1 auto; min-width: 0; font-size: 10px; line-height: 1.3; }

.p-people { margin-top: 14px; display: flex; gap: 10px; }
.p-people > span { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--white); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.p-people .p-add { border-style: dotted; font-size: 18px; font-weight: 300; }

.p-nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px; padding-top: 16px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--base); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
}
.p-nav > span { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; }
.p-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Sections */
.section { padding-block: 40px 80px; display: flex; flex-direction: column; gap: 32px; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; }
.section h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature { display: flex; flex-direction: column; gap: 10px; }
.feature h3 { font-size: 24px; }
.feature p:last-child { color: var(--text-secondary); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.step-number { font-size: 40px; line-height: 1; }
.steps h3 { font-size: 22px; }
.steps p { color: var(--text-secondary); }

.principles { display: flex; flex-wrap: wrap; gap: 32px 48px; padding: 40px; align-items: center; }
.principles-head { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.principles h2 { font-size: clamp(30px, 3.5vw, 40px); }
.principles-list { flex: 1 1 320px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--text-secondary); }
.principles-list li { display: flex; gap: 12px; }

.cta { align-items: center; text-align: center; gap: 20px; padding-bottom: 96px; }
.cta h2 { font-size: clamp(40px, 5vw, 56px); line-height: 1; max-width: 14ch; }
.cta .lede { font-size: 16px; }
.signup { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: 520px; }
.signup input {
  flex: 1 1 260px; min-height: 48px; padding: 0 16px;
  background: transparent; border: 1px solid var(--white); border-radius: 0; color: var(--white);
  font: 400 14px Inter, system-ui, sans-serif;
}
.signup input::placeholder { color: #9A9A9A; }
.signup-thanks { font-size: 16px; min-height: 48px; display: flex; align-items: center; }
.signup[hidden], .signup-thanks[hidden] { display: none; }
.btn-disabled { opacity: 0.55; cursor: default; }
.btn-disabled:hover { filter: none; background: transparent; }

.footer { border-top: 1px solid var(--line); margin-top: auto; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 24px 40px; font-size: 12px; color: var(--text-secondary); }

@media (max-width: 760px) {
  .phone { zoom: 0.72; }
  .hero { padding-block: 64px 56px; }
  .principles { padding: 28px; }
}
@media (max-width: 360px) { .phone { zoom: 0.64; } }
/* Motion. The CSS half; motion.js does the stars, tilt and scroll.
   Everything here stops for people who ask for reduced motion (below). */
.stars { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; }
/* The tallest the window gets on a phone (address bar hidden), so the
   starfield keeps one size while the bar slides in and out on scroll. */
@supports (height: 100lvh) { .stars { height: 100lvh; } }
.footer { position: relative; }
.phone { transform-style: preserve-3d; will-change: transform; }
.phone-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; }

@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-140px, 110px) scale(1.18); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(150px, -90px) scale(1.14); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes glow {
  from { box-shadow: 0 0 0 0 rgba(253, 67, 101, 0); }
  to   { box-shadow: 0 0 22px 4px rgba(253, 67, 101, 0.7); }
}
.blob-top { animation: drift-a 14s ease-in-out infinite alternate; }
.blob-mid { animation: drift-b 17s ease-in-out infinite alternate; }
.phone-blob-purple { animation: drift-b 11s ease-in-out infinite alternate; }
.phone-blob-orange { animation: drift-a 13s ease-in-out infinite alternate; }
.phone-wrap { animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
/* Above its neighbours so the glow spills over the grid lines, not under them. */
.p-strong { position: relative; z-index: 1; animation: glow 2.2s ease-in-out infinite alternate; }

/* Set up by motion.js, so without the script nothing starts hidden. */
.hero h1 .word { display: inline-block; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion .reveal.in { opacity: 1; transform: none; }

/* Phones: lighter motion. Same breakpoint as motion.js. No see-through
   blur on the mockup's cards, because redrawing that behind moving blobs
   is what made phones stutter. Quicker, shorter reveals, so a normal
   scroll never lands on half-faded sections. */
@media (max-width: 760px) {
  .phone-blob-purple, .phone-blob-orange { filter: none; }
  .p-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(31, 31, 31, 0.82); }
  .phone-wrap { animation-duration: 0.8s; animation-delay: 0.3s; }
  .hero h1 .word { animation-duration: 0.6s; }
  .motion .reveal { transform: translateY(16px); transition-duration: 0.5s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob, .phone-wrap, .p-strong { animation: none; }
}