/* Uncoil landing — ElevenLabs-inspired: white, near-black type, tight
   tracking, pill buttons, hairline bento cards, colour only inside cards. */

:root {
  --ink: #0a0a0a;
  --muted: #6b7280;
  --faint: #9ca3af;
  --line: #e7e7e9;
  --card: #ffffff;
  --wash: #f6f6f7;
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The page itself never scrolls — the board does (see .board). */
html, body { height: 100%; overflow: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  /* The gradient is the desk the board sits on: fixed, always framing. */
  background: #3a1c63 url("assets/body-bg.png") center / cover no-repeat fixed;
}

/* A fixed frame with its own scrollport, so the gradient border stays
   visible on all four sides at every scroll position. The sticky nav
   sticks to this scrollport rather than the viewport. */
.board {
  position: fixed;
  inset: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 26px;
  scroll-behavior: smooth;
  /* Slim overlay scrollbar — the default one sits awkwardly against the
     board's rounded corner. */
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 10, 35, 0.18) transparent;
}
.board::-webkit-scrollbar { width: 12px; }
.board::-webkit-scrollbar-track { background: transparent; }
.board::-webkit-scrollbar-thumb {
  background: rgba(20, 10, 35, 0.18);
  border-radius: 999px;
  border: 4px solid transparent;   /* inset from the edge */
  background-clip: content-box;
}
.board::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 10, 35, 0.32);
  background-clip: content-box;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }

/* ---------- Nav ---------- */

/* Floating pill, not a full-width bar */
.nav { position: sticky; z-index: 50; padding: 20px 24px 0; }
.nav .nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 76px; max-width: 1120px; margin: 0 auto;
  padding: 0 16px 0 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.18); */
}
/* Wordmark is part of the logo artwork — no text beside it */
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 22px; margin-left: 8px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  padding: 10px 20px; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:active { transform: scale(0.98); }
/* Gradient-rimmed pill: the dark fill is clipped to the padding box, the
   background artwork to the border box, so the border itself is the image. */
.btn-primary {
  color: #fff;
  border: 3px solid transparent;
  background-image: linear-gradient(180deg, #2c2c30, #141416), url("assets/body-bg.png");
  background-size: auto, 260px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.btn-primary:hover {
  background-image: linear-gradient(180deg, #3a3a40, #1e1e21), url("assets/body-bg.png");
}
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { background: var(--wash); }
.btn-big { padding: 14px 26px; font-size: 15px; }

/* ---------- Hero ---------- */

.hero { padding-top: 84px; padding-bottom: 40px; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.hero .sub {
  max-width: 620px; margin: 24px auto 0;
  font-size: 19px; color: var(--muted); line-height: 1.6;
}
.hero .cta-row { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .fine { margin-top: 18px; font-size: 13px; color: var(--faint); }

/* ---------- Animated gradient ----------
   The well-done artwork as a living background: the bitmap itself drifts
   and breathes on one layer while a soft light sheen wanders over it on a
   blend mode, so the grain and palette stay exactly as designed. */

.anim-grad { position: relative; overflow: hidden; background: #4a3566; }
.anim-grad::before {
  content: ""; position: absolute; inset: -15%; z-index: 0;
  background: url("assets/gradient.png") center / cover;
  animation: grad-drift 30s ease-in-out infinite alternate;
}
.anim-grad::after {
  content: ""; position: absolute; inset: -30%; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 216, 168, 0.6), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
  animation: grad-sheen 17s ease-in-out infinite alternate;
}
.anim-grad > * { position: relative; z-index: 1; }
@keyframes grad-drift {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.18) rotate(3deg); }
}
@keyframes grad-sheen {
  from { transform: translate(-18%, -12%) scale(0.9); }
  to { transform: translate(18%, 14%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .anim-grad::before, .anim-grad::after { animation: none; }
}

/* Word-by-word rise, shared by the celebration scene in "How it works" */
@keyframes rise {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- Sections ---------- */

/* section.container, not bare `section` — .container declares both margin
   and padding shorthands, and as a class it outranks an element selector,
   silently zeroing any vertical rhythm set with lower specificity. */
section.container { margin-top: 96px; }
.section-head { max-width: 860px; margin-bottom: 44px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 650;
  letter-spacing: -0.03em; line-height: 1.12;
}
.section-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }
/* Second sentence drops to gray on its own line: statement, then answer. */
.section-head h2 .dim { display: block; color: #8a8a8f; }

/* Headings balance their lines (no lone trailing word); body copy just
   avoids orphans. */
h1, h2, h3, .card-lede, .step p, .hero .sub { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

/* ---------- Bento grid (2 tall + 4 small, ElevenLabs-style) ---------- */

.bento-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bento-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }

.card {
  background: #f6f6f4; border-radius: 24px; padding: 26px;
  display: flex; flex-direction: column;
}
/* Reference hierarchy: muted title, darker description underneath. */
.card-kicker { font-size: 15px; font-weight: 500; color: var(--muted); }
.card-lede { margin-top: 6px; font-size: 15px; color: #1f2937; line-height: 1.55; }

.card-tall { min-height: 500px; }
.card-tall .visual {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px 0 30px;
}
.card-small { min-height: 280px; }
.card-small .glyph { color: var(--ink); }
.card-small .card-body { margin-top: auto; padding-top: 40px; }

/* White inner panel: the app's counting column, faked in CSS */
.mock {
  background: #fff; border-radius: 18px; padding: 28px;
  width: 100%; max-width: 400px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex; gap: 24px; align-items: center;
}
.mock-left { flex: 1; }
.mock-tone { font-size: 13px; font-weight: 600; color: var(--muted); }
.mock-count {
  margin-top: 10px; font-size: 54px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.mock-count span { font-size: 20px; color: var(--faint); font-weight: 500; }
.mock-hint { margin-top: 10px; font-size: 15px; font-weight: 500; color: #374151; }
.mock-cam {
  width: 116px; height: 148px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
/* The app's calibration outline, floated over the "camera".
   Opacity is baked into the artwork's fill. */
.mock-cam .silhouette { width: 62%; }

/* White inner panel: tone lines as a tagged transcript */
.transcript {
  background: #fff; border-radius: 18px; padding: 28px;
  width: 100%; max-width: 430px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.transcript .line { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.transcript .line + .line { margin-top: 12px; }
.transcript .tag { color: #9ca3af; }
.transcript-row { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.tone-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.tone-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #f97316; }
.transcript-row .play { margin-left: auto; }

/* The app's week strip: one circle per active day, done days filled green */
.week-dots { display: flex; gap: 8px; }
.week-dots .day {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--muted);
  border: 1.5px solid #cbcbc8;
}
.week-dots .day.done { background: #34c759; border-color: #34c759; color: #fff; }

/* ---------- How it works (stage + clickable step tabs) ---------- */

.how-stage {
  position: relative; height: 440px; border-radius: 24px;
  background: #f6f6f4; overflow: hidden;
}
.scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
.scene.active { opacity: 1; }

/* Scene 1: menu bar + dropdown */
.mb-bar {
  width: min(430px, 88%); background: #fff; border-radius: 10px;
  padding: 8px 14px; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; font-size: 12.5px; font-weight: 600; color: #4b5563;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.mb-bar img { height: 16px; }
.mb-bar .dim { color: #c2c2bf; }
.dd-mock {
  width: min(280px, 80%); background: #fff; border-radius: 14px; padding: 18px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.18);
}
.dd-title { font-size: 12px; color: var(--muted); }
.dd-time { margin-top: 3px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.dd-time span { font-size: 13px; font-weight: 500; color: var(--faint); }
.dd-btn {
  margin-top: 14px; background: var(--ink); color: #fff; border-radius: 999px;
  text-align: center; font-size: 13.5px; font-weight: 600; padding: 8px 0;
}

/* Scene 2 reuses .mock. Scene 3: the celebration */
.cele-mock {
  width: min(430px, 88%); height: 280px; border-radius: 18px;
  display: flex; gap: 0.28em; align-items: center; justify-content: center;
}
.cele-mock .w {
  color: #fff; font-size: 2.1rem; font-weight: 500; letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
  opacity: 0; filter: blur(8px); transform: translateY(14px);
}
.scene.active .cele-mock .w {
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards;
  animation-delay: calc(0.2s + var(--i) * 0.13s);
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.step {
  background: #f6f6f4; border: 1px solid transparent; border-radius: 24px;
  padding: 20px 24px 24px; text-align: left; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease;
}
.step:hover { background: #efefec; }
.step.active { background: #fff; border-color: var(--line); }
.bar {
  display: block; height: 3px; border-radius: 2px; overflow: hidden;
  background: #e6e6e3; margin-bottom: 18px;
}
.bar span { display: block; height: 100%; width: 0; background: var(--ink); }
.step.active .bar span { animation: fill 4.5s linear forwards; }
@keyframes fill { to { width: 100%; } }
.step .n { font-size: 13px; font-weight: 700; color: var(--faint); letter-spacing: 0.08em; }
.step h3 { margin-top: 8px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.step p { margin-top: 6px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* ---------- Privacy band ---------- */

/* The artwork carries this section, with a plum scrim over it so white
   text still clears contrast where the gradient goes pale. */
.privacy-band {
  color: #fff; border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(30, 10, 52, 0.2), rgba(40, 14, 60, 0.62)),
    url("assets/body-bg.png") center / cover no-repeat;
  padding: 64px 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
}
.privacy-band h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 650;
  letter-spacing: -0.03em; line-height: 1.12;
}
.privacy-band .lock { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 18px; }
.privacy-band ul { list-style: none; display: grid; gap: 14px; align-content: center; }
.privacy-band li { display: flex; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.9); line-height: 1.55; }
.privacy-band li::before { content: "✓"; color: #86efac; font-weight: 700; }
.privacy-band a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final CTA ---------- */

.final { text-align: center; padding-bottom: 32px; }
.final h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; }
.final p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.final .cta-row { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */

footer { margin-top: 96px; border-top: 1px solid var(--line); padding-bottom: 10px; }
.foot {
  display: flex; align-items: center; gap: 20px;
  padding-top: 28px; padding-bottom: 28px;
  font-size: 13.5px; color: var(--muted); flex-wrap: wrap;
}
.foot .brand img { height: 24px; }
.foot-links { margin-left: auto; display: flex; gap: 18px; }
.foot-links a:hover { color: var(--ink); }

/* ---------- Prose pages (privacy / support) ---------- */

.prose { max-width: 680px; margin: 0 auto; padding: 72px 24px 96px; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 650; letter-spacing: -0.03em; }
.prose .updated { margin-top: 10px; font-size: 13.5px; color: var(--faint); }
.prose h2 { margin-top: 40px; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.prose p, .prose li { margin-top: 12px; font-size: 15.5px; color: #374151; line-height: 1.7; }
.prose ul { padding-left: 22px; }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose .callout {
  margin-top: 28px; border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 24px; background: var(--wash); font-size: 15px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .bento-top { grid-template-columns: 1fr; }
  .bento-bottom { grid-template-columns: 1fr 1fr; }
  .card-tall { min-height: 420px; }
  .privacy-band { grid-template-columns: 1fr; padding: 44px 32px; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .bento-bottom, .steps { grid-template-columns: 1fr; }
  .card-small { min-height: 0; }
  .card-small .card-body { padding-top: 28px; }
  .hero { padding-top: 64px; }
  .how-stage { height: 380px; }
  section.container { margin-top: 72px; }
}