/* home-base.css: the homepage's base, header and footer (landing-v3). The homepage does not load
   main.css: its class names (.wrap, .btn, .hero) are the ones main.css styles for the other pages.
   Every color is a tokens.css custom property or a mix of them. The aliases below give the
   section stylesheets short names; each points at its theme.ts token. */
.lp {
  --onDark: var(--fg-on-dark); --onDarkDim: var(--fg-on-dark-dim); --pdark: var(--primary-dark);
  --mintL: var(--mint-light); --sel: var(--selected-bg); --chat: var(--cura-chat-surface);
  --chatLine: var(--cura-chat-surface-line); --emberSoft: var(--ember-soft); --emberFill: var(--ember-fill);
  --curaSurface: var(--cura-surface); --capApp: var(--caption);
  /* Small text on white needs more contrast than --caption gives: a mix of the two text tokens. */
  --cap: color-mix(in srgb, var(--body) 60%, var(--caption));
  --white: var(--surface);
  --glass6: color-mix(in srgb, var(--surface) 6%, transparent);
  --glass8: color-mix(in srgb, var(--surface) 8%, transparent);
  --glass12: color-mix(in srgb, var(--surface) 12%, transparent);
  margin: 0;
  font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Anything scrolled to, a focused control included, lands below the sticky header. */
html { scroll-padding-top: 76px; }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
:where(.lp) :is(h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
:where(.lp) :is(ul, ol) { list-style: none; }
:where(.lp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.lp) img { display: block; max-width: 100%; }
:where(.lp) a { color: var(--primary); }
:where(.lp) a:hover { color: var(--pdark); }
/* Focus: primary on the light page, mint on the dark hero, header, closing card and footer. */
.lp :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.lp :is(.hero, .nav, .fin-c, .ft, .mt-head, .wb, .arc, .prep-hd) :focus-visible { outline-color: var(--mint); }
.ic { display: block; flex: 0 0 auto; }
.nb { white-space: nowrap; }
.sr-only { position: absolute; 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: -100px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: var(--pill); background: var(--ember); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.sec { padding: clamp(56px, 6.5vw, 100px) 0; }
.sec-white { background: var(--white); }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 880px; margin: 0 auto clamp(30px, 3.6vw, 48px); }
.h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.h2 .tm { color: var(--primary); }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--body); max-width: 40em; text-wrap: pretty; }
.em { color: var(--ember); }
/* A yellow underline under key words on light ground (goal titles, Dr. Kahal's line). */
.ul { text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 0.14em; text-underline-offset: 0.2em; text-decoration-skip-ink: none; }

/* Buttons. The store badges between build.py's markers also carry .btn, so .btn-store resets it. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: var(--pill); background: var(--ember); color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 40%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--ember) 80%, transparent); transition: transform 160ms ease, background-color 160ms ease; }
.btn:hover { background: color-mix(in srgb, var(--ember) 82%, var(--surface)); color: var(--ink); transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn .ic { transition: transform 160ms ease; }
.btn:hover .ic { transform: translateX(3px); }
/* The browser mark before "Start your plan, free" (the web app) stays put; only the arrow moves. */
.btn:hover .ic-web { transform: none; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: none; }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 15px; font-weight: 650; text-decoration: none; transition: border-color 160ms ease; }
.ghost:hover { border-color: var(--primary); color: var(--ink); }
/* "Coming very soon": one tag style for the page. */
.soon-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--pill); background: var(--ember); color: var(--ink); font-size: 11.5px; font-weight: 750; white-space: nowrap; line-height: 1.25; letter-spacing: 0; }

.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.btn-store { min-height: 48px; gap: 10px; padding: 0 16px 0 14px; border-radius: 14px; font-size: 15px; font-weight: 650; box-shadow: none; transform: none; }
.btn.btn-store .download-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.btn.btn-store .store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn.btn-store small { font-size: 11px; font-weight: 600; opacity: 0.8; }
.btn.btn-store.soon { cursor: default; }
/* Yellow "Coming soon": the store that is not out yet reads as a label, not a link. */
.btn.btn-store.soon small { color: var(--ember); opacity: 1; }
.hero .btn.btn-store, .fin .btn.btn-store { background: var(--glass8); color: var(--onDark); border: 1px solid var(--glass12); }
.hero a.btn.btn-store:hover, .fin a.btn.btn-store:hover { background: var(--glass12); }
/* A store that is out glows like the web button, so the badges that work stand out from Coming soon. */
.hero a.btn.btn-store, .fin a.btn.btn-store { box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ember) 80%, transparent); }

/* The web app's doors (the nav pill, the menu button, the hero button and its note, the goals
   buttons, the closing button, the footer link) show on phones and tablets only; from 900 px the
   page offers the store badges alone, as production does. */
@media (min-width: 900px) { .lp .app-door { display: none !important; } }

/* Header */
.nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--hero-bottom) 92%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--glass8); }
.nav-in { height: 68px; display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--onDark); text-decoration: none; font-size: 20px; font-weight: 750; letter-spacing: -0.015em; }
.lp .logo:hover { color: var(--white); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.lp .nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--onDarkDim); text-decoration: none; font-size: 15px; font-weight: 550; padding: 0 12px; border-radius: var(--pill); transition: color 150ms ease, background-color 150ms ease; }
.lp .nav-links a:hover { color: var(--white); background: color-mix(in srgb, var(--surface) 7%, transparent); }
.menu-d { display: none; }
.menu-d > summary { list-style: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--onDark); cursor: pointer; }
.menu-d > summary::-webkit-details-marker { display: none; }
.menu-d > summary:hover { background: var(--glass8); }
.menu { position: absolute; left: 0; right: 0; top: 68px; display: flex; flex-direction: column; padding: 4px clamp(16px, 4vw, 40px) 20px; background: color-mix(in srgb, var(--hero-bottom) 97%, transparent); border-top: 1px solid var(--glass8); border-bottom: 1px solid var(--glass8); animation: fadeIn 180ms ease both; }
.lp .menu a { display: flex; align-items: center; min-height: 52px; color: var(--onDark); text-decoration: none; font-size: 17px; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--surface) 6%, transparent); }
.lp .menu .btn { margin-top: 16px; border-bottom: 0; color: var(--ink); justify-content: center; }
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .menu-d { display: block; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 520px) {
  .nav-cta { display: none; }
  .menu-d { margin-left: auto; }
}

/* Footer */
.ft { padding: 64px 0 40px; background: var(--ink-deep); color: var(--onDarkDim); }
.ft-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; padding-bottom: 32px; border-bottom: 1px solid var(--glass8); }
.ft-brand p { max-width: 26em; margin-top: 12px; font-size: 15px; line-height: 1.5; }
.ft-links { display: flex; flex-wrap: wrap; gap: 4px 24px; max-width: 600px; }
.lp .ft-links a { min-height: 40px; display: inline-flex; align-items: center; color: var(--onDark); font-size: 14.5px; font-weight: 550; text-decoration: none; }
.lp .ft-links a:hover { color: var(--ember); }
.ft-legal { display: flex; flex-direction: column; gap: 10px; max-width: 72em; padding-top: 28px; font-size: 13.5px; line-height: 1.65; }
.ft-copy { margin-top: 8px; color: color-mix(in srgb, var(--onDarkDim) 82%, var(--caption)); }

/* The in-view player (home-play.js). A rewind draws its first frame without animating back. */
.hp-reset, .hp-reset *, .hp-reset *::before, .hp-reset *::after { transition: none !important; animation: none !important; }
.hp-paused *, .hp-paused *::before, .hp-paused *::after { animation-play-state: paused !important; }

@keyframes fadeIn { from { opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(0.94); } }
@keyframes dotPop { from { transform: scale(0); } }
@keyframes ckIn { from { opacity: 0; transform: scale(0) rotate(-20deg); } }

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