/* Landing page. Graphite base from design.css; the only light that changes is the day's (--sky). */
.landing {
  --base:#101114; --panel:#17181d; --line:#2a2b33; --silver:#c9ccd6; --mist:#a5a3b2;
  --sky:199 185 243; --gutter:clamp(20px, 5vw, 72px); --measure:62ch;
  --slot-hero:440px; --slot-dial:300px; --slot-side:112px; --slot-final:300px;
  margin:0; background:var(--base); color:var(--ink); font:17px/1.6 var(--text);
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.landing * { box-sizing:border-box; }
/* Resets carry no specificity, so each component's own margins win. */
:where(.landing) :where(h1, h2, h3) { font-family:var(--display); margin:0; letter-spacing:-.035em; }
:where(.landing) :where(p) { margin:0; }
:where(.landing) a { color:inherit; }
.skip { position:absolute; left:16px; top:-60px; z-index:60; background:var(--verde); color:var(--on-verde); padding:10px 14px; border-radius:10px; }
.skip:focus { top:12px; }

/* Buttons: solid for the one thing to do, line for the alternative. */
.btn-solid, .btn-line { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  border-radius:10px; font:600 15px/1 var(--text); text-decoration:none; cursor:pointer; border:1px solid transparent; }
.btn-solid { background:var(--verde); color:var(--on-verde); }
.btn-solid:hover { background:#d6ccf7; }
.btn-line { background:transparent; color:var(--ink); border-color:#3d3e48; }
.btn-line:hover { border-color:var(--silver); }
.big { min-height:52px; padding:0 22px; font-size:16px; }

/* Header */
.top { position:fixed; inset:0 0 auto; z-index:40; display:flex; align-items:center; gap:28px;
  padding:14px var(--gutter); background:#101114c7; -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
.brand { display:flex; align-items:center; gap:10px; font:700 19px var(--display); letter-spacing:-.02em; text-decoration:none; }
.brand .nova-symbol { width:30px; height:30px; }
.top nav { display:flex; gap:24px; margin-left:12px; }
.top nav a, .link { color:var(--mist); text-decoration:none; font-size:15px; }
.top nav a:hover, .link:hover { color:var(--ink); }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:20px; }

/* The one character, moved between slots by landing.js. */
.companion { position:fixed; left:0; top:0; z-index:30; width:440px; height:440px; pointer-events:none;
  will-change:transform, opacity; opacity:0; }
.companion > [data-nova-character] { width:100%; height:100%; }
.companion.ready { opacity:var(--k, 1); animation:fade .8s backwards; }
.companion.away { visibility:hidden; }
.companion.rest { pointer-events:auto; }
.slot { flex:none; border-radius:50%; }

/* Hero */
.hero { overflow-x:clip; min-height:100svh; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); align-items:center;
  gap:24px; padding:120px var(--gutter) 64px; }
.hero h1 { font-size:clamp(2.7rem, 1.1rem + 5.6vw, 6.8rem); line-height:.96; font-weight:600; letter-spacing:-.05em; }
.hero h1 span { display:block; }
.lede { margin-top:clamp(28px, 3vw, 44px); max-width:40ch; font-size:clamp(1.05rem, .95rem + .45vw, 1.3rem); color:#cfcdd9; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hint { margin-top:22px; font-size:14px; color:var(--mist); }
.hero-stage { position:relative; display:grid; place-items:center; min-height:560px; }
.slot-hero { width:var(--slot-hero); height:var(--slot-hero); }
.orbits { position:absolute; width:min(640px, 120%); aspect-ratio:1; pointer-events:none; }
.orbit { fill:none; stroke:var(--silver); stroke-opacity:.22; stroke-width:1.2; stroke-dasharray:1900; stroke-dashoffset:0; }
.orbit.o3 { stroke-opacity:.1; stroke-dasharray:3 9; }

/* Opening: the headline rises line by line and the orbits draw in, once. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 span:nth-child(2) { animation-delay:.08s; } .hero h1 span:nth-child(3) { animation-delay:.16s; }
  .lede, .hero .cta, .hint { animation:fade 1s .45s both; }
  .orbit.o1, .orbit.o2 { animation:draw 2.2s .2s cubic-bezier(.3,.6,.2,1) both; }
}
@keyframes rise { from { opacity:0; transform:translateY(.45em); } }
@keyframes fade { from { opacity:0; } }
@keyframes draw { from { stroke-dashoffset:1900; } }

/* Why */
.why { padding:clamp(80px, 12vw, 160px) var(--gutter); max-width:1180px; }
.why h2 { font-size:clamp(2rem, 1.2rem + 3vw, 3.9rem); line-height:1.02; font-weight:500; max-width:16ch; }
.why p { margin-top:26px; max-width:46ch; font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); color:#cfcdd9; }

/* A day with Nova: a pinned stage; landing.js turns the dial and picks the moment. */
.day { position:relative; height:calc(6 * 85svh + 100svh); }
.day-stage { position:sticky; top:0; height:100svh; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  align-items:center; gap:clamp(24px, 4vw, 72px); padding:84px var(--gutter) 40px; overflow:hidden; }
.day-stage::before { content:""; position:absolute; inset:-20% -10% auto auto; width:90vw; height:90vw; border-radius:50%;
  background:radial-gradient(closest-side, rgb(var(--sky) / .16), transparent); pointer-events:none; }
.dial-wrap { position:relative; width:min(600px, 100%, 74svh); aspect-ratio:1; justify-self:center; }
.dial { width:100%; height:100%; overflow:visible; }
.dial .ring { fill:none; stroke:var(--silver); stroke-opacity:.3; stroke-width:1.4; }
.dial .ring.inner { stroke-opacity:.1; stroke-dasharray:2 8; }
.dial-turn { transition:none; }
.dial-turn line { stroke:var(--silver); stroke-opacity:.35; stroke-width:1.4; }
.mark circle { fill:var(--base); stroke:var(--silver); stroke-width:1.6; }
.mark.is-active circle { fill:var(--verde); stroke:var(--verde); }
/* Sized in dial units: about 13px on screen at each breakpoint's dial width. */
.mark-label { fill:var(--mist); font:600 16px var(--display); text-anchor:middle; dominant-baseline:middle; }
.mark.is-active .mark-label { fill:var(--ink); }
.now { fill:var(--verde); }
.slot-dial { position:absolute; left:50%; top:50%; width:var(--slot-dial); height:var(--slot-dial); transform:translate(-50%, -50%); }

.day-panel { position:relative; display:grid; align-content:center; max-width:520px; }
.day-title { font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--mist); margin-bottom:18px; }
.moments { display:grid; }
.moment { grid-area:1 / 1; opacity:0; transform:translateY(14px); visibility:hidden;
  transition:opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.moment.is-active { opacity:1; transform:none; visibility:visible; transition:opacity .45s ease, transform .45s ease; }
.hour { font:600 clamp(2.4rem, 1.6rem + 2.4vw, 4rem)/1 var(--display); letter-spacing:-.04em; color:var(--verde); }
.moment h3 { margin-top:14px; font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height:1.08; font-weight:600; }
.moment-text { margin-top:12px; color:#cfcdd9; max-width:44ch; }

/* Moment fragments: small pieces of the real product, each shaped for its content. */
.frag { margin-top:22px; font-size:15px; line-height:1.5; }
.frag-title { font-weight:600; color:var(--ink); margin-bottom:6px; }
.brief { border-left:2px solid var(--verde); padding:4px 0 4px 16px; color:#cfcdd9; display:grid; gap:4px; }
.transcript p { color:#cfcdd9; } .transcript b { color:var(--ink); margin-right:8px; }
.takeaways { margin:12px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.takeaways li { padding:6px 12px; border-radius:999px; background:var(--verde-soft); color:var(--ink); font-size:14px; }
.draft { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; color:#cfcdd9; }
.approval { background:var(--panel); border:1px solid #4a3f66; border-radius:14px; padding:16px 18px; }
.approval dl { margin:0; display:grid; gap:4px; } .approval dl div { display:flex; gap:12px; }
.approval dt { color:var(--mist); min-width:64px; } .approval dd { margin:0; }
.demo-actions { display:flex; gap:10px; margin-top:14px; }
.demo-actions button { min-height:40px; font-size:14px; }
.demo-result { margin-top:10px; min-height:1.5em; color:var(--verde); }
.ledger { display:grid; gap:8px; color:#cfcdd9; } .ledger span { color:var(--ink); font-weight:600; margin-right:6px; }
.rest p { color:var(--mist); font-style:italic; }

/* Section heads keep a small seat for the character beside the heading. */
.section-head { display:flex; align-items:center; justify-content:space-between; gap:clamp(16px, 3vw, 48px); }
.section-head > :not(.slot) { flex:1; min-width:0; }
.slot-side { width:var(--slot-side); height:var(--slot-side); }
.section-head h2 { font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height:1.04; font-weight:500; max-width:18ch; }
.section-head p { margin-top:14px; max-width:var(--measure); color:#cfcdd9; }

/* Voice */
.voice { padding:clamp(90px, 12vw, 170px) var(--gutter) clamp(60px, 8vw, 110px); max-width:1240px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:42px; }
.chip { min-height:44px; padding:0 16px; border-radius:999px; border:1px solid #3d3e48; background:transparent;
  color:var(--mist); font:500 15px var(--text); cursor:pointer; }
.chip:hover { color:var(--ink); border-color:var(--silver); }
.chip[aria-pressed="true"] { background:var(--verde); border-color:var(--verde); color:var(--on-verde); }
.exchange { margin:34px 0 0; display:grid; gap:18px; max-width:880px; }
.said { margin:0; font:500 clamp(1.5rem, 1rem + 2vw, 2.7rem)/1.18 var(--display); letter-spacing:-.03em; }
.said::before { content:"“"; color:var(--verde); } .said::after { content:"”"; color:var(--verde); }
.reply { color:#cfcdd9; font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); padding-left:18px; border-left:2px solid var(--verde); }
.reply[dir="rtl"] { padding-left:0; padding-right:18px; border-left:0; border-right:2px solid var(--verde); }
.exchange.swap .said, .exchange.swap .reply { animation:fade .5s both; }
.exchange.swap .reply { animation-delay:.35s; }

/* Memory */
.memory { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 5vw, 80px); align-items:center;
  padding:clamp(60px, 9vw, 130px) var(--gutter); }
.memory .section-head h2 { font-size:clamp(1.8rem, 1rem + 2.1vw, 3rem); }
.memory-copy > p { margin-top:22px; max-width:46ch; color:#cfcdd9; }
.constellation { width:100%; height:auto; overflow:visible; }
.constellation line { stroke:var(--silver); stroke-opacity:.25; stroke-width:1.2; }
.constellation .node circle { fill:var(--base); stroke:var(--silver); stroke-width:1.6; }
.constellation .project circle { fill:var(--verde); stroke:var(--verde); }
.constellation .promise circle { stroke:var(--ochre); }
.constellation text { fill:var(--ink); font:600 17px var(--display); }
.constellation text.sub { fill:var(--mist); font:400 14px var(--text); }
.layer { will-change:transform; }

/* Trust */
.trust { padding:clamp(80px, 11vw, 160px) var(--gutter); max-width:1240px; }
.promises { list-style:none; margin:54px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:34px 64px; }
.promises li { border-top:1px solid var(--line); padding-top:20px; }
.promises li:first-child { grid-column:1 / -1; border-top-color:var(--verde); }
.promises li:first-child h3 { font-size:clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.promises h3 { font-size:1.2rem; font-weight:600; letter-spacing:-.02em; }
.promises p { margin-top:8px; color:#cfcdd9; max-width:52ch; }

/* Apps */
.apps { padding:clamp(60px, 8vw, 120px) var(--gutter); }
.apps h2 { font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--mist); }
.app-list { margin-top:20px; display:flex; flex-wrap:wrap; gap:.2em .9em; max-width:1100px;
  font:500 clamp(1.6rem, 1rem + 2.6vw, 3.3rem)/1.15 var(--display); letter-spacing:-.035em; color:#5c5b66; }
.app-list span:nth-child(odd) { color:var(--ink); }
.apps-note { margin-top:26px; color:var(--mist); max-width:var(--measure); }

/* Final */
.final { display:grid; justify-items:center; text-align:center; padding:clamp(60px, 9vw, 120px) var(--gutter) clamp(90px, 12vw, 160px); }
.slot-final { width:var(--slot-final); height:var(--slot-final); }
.final h2 { margin-top:18px; font-size:clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height:1; font-weight:600; letter-spacing:-.05em; }
.final p { margin-top:18px; max-width:48ch; color:#cfcdd9; }
.final .cta { justify-content:center; }

.foot { display:flex; align-items:center; gap:14px; padding:26px var(--gutter) 40px; border-top:1px solid var(--line); color:var(--mist); font-size:14px; }
.foot .nova-symbol { width:24px; height:24px; }
.foot nav { margin-left:auto; display:flex; gap:20px; } .foot a { text-decoration:none; } .foot a:hover { color:var(--ink); }

/* Tablets and iPads */
@media (max-width:1100px) {
  .landing { --slot-hero:360px; --slot-dial:240px; --slot-side:96px; --slot-final:260px; }
  .top nav { display:none; }
  .hero-stage { min-height:460px; }
  .mark-label { font-size:19px; }
}
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:96px; gap:0; }
  .hero-stage { order:-1; min-height:auto; height:min(400px, 46svh); }
  .landing { --slot-hero:min(340px, 40svh); }
  .orbits { width:min(520px, 110vw); }
  .day-stage { grid-template-columns:1fr; grid-template-rows:auto 1fr; align-content:start; gap:18px; padding-top:76px; }
  .dial-wrap { width:min(440px, 70vw, 40svh); }
  .day-panel { justify-self:center; align-self:start; max-width:560px; align-content:start; }
  .day-title { display:none; }
  .mark-label { font-size:22px; }
  .memory { grid-template-columns:1fr; }
}
/* Phones */
@media (max-width:600px) {
  .landing { font-size:16px; --slot-dial:min(170px, 42vw); --slot-side:72px; --slot-final:210px; }
  .top { gap:12px; padding:12px 18px; }
  .top-actions { gap:14px; } .top-actions .link { font-size:14px; }
  .btn-solid.big, .btn-line.big { width:100%; }
  .dial-wrap { width:min(78vw, 36svh); }
  .mark-label { font-size:28px; }
  .hour { font-size:2.2rem; }
  .moment h3 { margin-top:8px; }
  .frag { margin-top:14px; font-size:14px; }
  .moment-text { font-size:15px; }
  .section-head { align-items:flex-start; }
  .promises { grid-template-columns:1fr; }
  .foot { flex-wrap:wrap; } .foot nav { margin-left:0; width:100%; }
}
/* Short phones: a smaller dial and tighter moments, so the approval card still fits the pinned screen. */
@media (max-height:700px) and (max-width:900px) {
  .landing { --slot-dial:15svh; }
  .day-stage { padding-top:66px; gap:10px; }
  .dial-wrap { width:min(60vw, 28svh); }
  .hour { font-size:1.8rem; }
  .moment-text { font-size:14px; }
  .frag { display:none; }
  .frag.approval { display:block; padding:12px 14px; }
  .demo-actions { margin-top:10px; }
  .demo-result { min-height:0; margin-top:6px; }
}

/* Reduced motion: no pinning or travel; the day reads as a list and the character stays in the hero. */
.still .day { height:auto; }
.still .day-stage { position:static; height:auto; grid-template-columns:1fr; overflow:visible; }
.still .dial-wrap { display:none; }
.still .day-title { display:block; font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); color:var(--ink); font-weight:500; }
.still .moments { gap:56px; }
.still .moment { grid-area:auto; opacity:1; transform:none; visibility:visible; }
.still .companion { position:static; width:100%; height:100%; transform:none !important; opacity:1; }
.still .slot-side, .still .slot-final, .still .slot-dial { display:none; }