/* Melopra marketing site. Brand system ported from docs/design-brief-stitch.md
   Dark, flat, studio-feel. Teal (#29fcf3) is the single accent on navy (#0b1326). */

:root {
  /* Surfaces */
  --bg: #0b1326;
  --surface-low: #141d31;
  --surface: #19233c;
  --surface-high: #232e45;
  --surface-highest: #2e3851;
  /* Text */
  --on-surface: #dae2fd;
  --muted: #c6c6cc;
  --faint: #909096;
  /* Lines */
  --hairline: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.13);
  /* Brand */
  --brand: #29fcf3;
  --on-brand: #003735;
  --brand-tint: rgba(41, 252, 243, 0.10);
  --brand-badge: rgba(41, 252, 243, 0.18);
  /* Reserved state colours (used only for the state-machine visual) */
  --state-not-started: #373a3b;
  --state-working: #3b82f6;
  --state-verify: #8b5cf6;
  --state-solid: #10b981;
  --state-secure: #40f0a8; /* brighter shade of solid — the graduated "Secure" node */
  --ladder: var(--brand);  /* the maintenance-ladder steps in the journey visual */
  /* Fonts */
  --font-head: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  /* Radius */
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;
  --gutter: 20px;
  --maxw: 940px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Typography ── */
h1, h2, h3, .wordmark { font-family: var(--font-head); letter-spacing: -0.02em; line-height: 1.1; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(38px, 6vw, 60px); }
h2 { font-weight: 600; font-size: clamp(26px, 4vw, 34px); }
h3 { font-weight: 600; font-size: 20px; }
.eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ── Nav ── */
header.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 19, 38, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark { font-weight: 700; font-size: 22px; color: var(--brand); letter-spacing: -0.03em; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--on-surface); }
@media (max-width: 720px) { .nav-links a:not(.btn) { display: none; } }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--r-lg);
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--on-surface); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }

/* ── Sections ── */
section { padding: clamp(44px, 5vw, 80px) 0; }
.section-head { margin-bottom: 36px; }
.section-head .lead { max-width: 640px; }
.section-head h2 { margin: 12px 0; }

/* ── Hero ── */
.hero { padding-top: clamp(56px, 10vw, 96px); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% 0 auto 50%; transform: translateX(-50%);
  width: 780px; height: 780px; border-radius: 50%;
  background: radial-gradient(circle, rgba(41,252,243,0.10), transparent 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
/* The hero headline breaks at the comma, and that break lives in the markup
   (`<br class="h1-br">`) rather than here. No width can produce it: `text-wrap:
   balance` (line 62) optimises for equal-length lines, not for meaning, so it
   never picks the comma. Measured 2026-08-02 across the whole clamp range:
     16ch -> "Practise by / the science, / not the clock."
     26ch -> "Practise by the / science, not the clock."   (splits "the science")
     40ch -> one line, which overflows a real .wrap at 60px
   24ch is simply a measure wide enough to never be the binding constraint: the
   first half needs 387px at the 38px clamp floor and 611px at 60px, against 24ch
   of 510px and 806px respectively. */
.hero h1 { margin: 18px 0; max-width: 24ch; }
/* Under 480px the first half no longer fits on one line, so the forced break is
   switched off and the 16ch measure takes back over, giving the three-line stack.
   The cutoff is measured, not guessed: the first half needs 387px and a viewport
   only offers width minus the 40px of gutters, so it stops fitting at about
   440px. Every current phone is below that (the largest iPhone is 430), and 480
   leaves margin for a fallback font measuring wider than Hanken Grotesk. */
@media (max-width: 479px) {
  .hero h1 { max-width: 16ch; }
  .h1-br { display: none; }
}
.hero .lead { max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--faint); }

/* ── Spacing-journey visual (brand hero) ── */
.journey {
  margin-top: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px clamp(16px, 3vw, 32px) 20px;
}
/* Scrolls on narrow screens so the labels stay readable; fits fully on desktop. */
.journey-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -8px; padding: 0 8px 4px; }
.journey svg { display: block; width: 100%; min-width: 720px; height: auto; overflow: visible; }
.jrail { stroke: var(--border); stroke-width: 2; }
.jrail-rest { stroke-dasharray: 3 6; }
.jseg-line { stroke: var(--hairline); stroke-width: 1; }
.jseg-label {
  fill: var(--faint); font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle;
}
.jrest {
  fill: var(--faint); font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.04em; text-anchor: middle;
}
.jnode { fill: var(--muted); font-family: var(--font-body); font-size: 13px; text-anchor: middle; }
.jnode-milestone { fill: var(--on-surface); font-family: var(--font-head); font-weight: 600; }
.jsub { fill: var(--faint); font-family: var(--font-body); font-size: 11px; font-style: italic; text-anchor: middle; }
.jsecure-ring { fill: none; stroke: var(--state-secure); stroke-width: 1.5; opacity: 0.5; }
.journey-cap { margin-top: 16px; font-size: 14px; color: var(--muted); max-width: 60ch; }
.journey-cap strong { color: var(--on-surface); font-weight: 600; }

/* Vertical spacing journey — sits beside the copy on the methodology page (no scroll) */
.schedule-viz { display: flex; gap: clamp(20px, 4vw, 44px); align-items: flex-start; margin: 30px 0; }
.journey-v {
  flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 22px 18px;
}
.journey-v svg { display: block; width: 220px; height: auto; overflow: visible; }
.jnode-v { fill: var(--muted); font-family: var(--font-body); font-size: 13px; text-anchor: start; }
.jsub-v { fill: var(--faint); font-family: var(--font-body); font-size: 11px; font-style: italic; text-anchor: start; }
.jrest-v { fill: var(--faint); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; text-anchor: start; }
.schedule-copy { flex: 1 1 0; min-width: 0; }
.schedule-copy > :first-child { margin-top: 0; }
@media (max-width: 620px) {
  .schedule-viz { flex-direction: column; align-items: stretch; }
  .journey-v { align-self: flex-start; }
}

/* ── Cards / grids ── */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--muted); }
.card .kicker { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.card .science { display: block; margin-top: 14px; font-size: 13px; color: var(--faint); font-style: italic; }

/* ── Theme showcase ── */
/* Each card paints itself from its OWN app palette (from packages/core/src/palettes.ts)
   via scoped --tc-* custom properties set inline, so the section demonstrates the choice
   rather than describing it. Structure is shared here; only the values differ per card. */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .theme-grid { grid-template-columns: 1fr; } }
.tc {
  background: var(--tc-bg); border: 1px solid var(--tc-border);
  border-radius: var(--r-xl); padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tc-name { font-family: var(--tc-head); font-weight: 600; font-size: 23px; color: var(--tc-on); letter-spacing: -0.01em; }
.tc-tag {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-brand);
  border: 1px solid var(--tc-border); border-radius: var(--r-full); padding: 3px 9px; white-space: nowrap;
}
.tc-desc { color: var(--tc-onvar); font-size: 14px; line-height: 1.5; min-height: 42px; }
.tc-preview {
  background: var(--tc-surface); border: 1px solid var(--tc-border);
  border-radius: var(--r-lg); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.tc-piece { display: flex; gap: 10px; align-items: flex-start; }
.tc-rule { width: 3px; align-self: stretch; border-radius: 2px; background: var(--tc-brand); }
.tc-piece-name { font-family: var(--tc-head); font-weight: 600; font-size: 16px; color: var(--tc-on); line-height: 1.2; }
.tc-piece-sub { font-family: var(--font-body); font-size: 12.5px; color: var(--tc-onvar); font-style: var(--tc-sub-style, normal); margin-top: 2px; }
.tc-row { display: flex; align-items: center; gap: 10px; padding-top: 11px; border-top: 1px solid var(--tc-border); }
.tc-check {
  width: 20px; height: 20px; flex-shrink: 0; background: var(--tc-brand);
  border-radius: var(--tc-check-radius); display: grid; place-items: center;
  color: var(--tc-check-mark); font-size: 12px; font-weight: 700;
}
.tc-section { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--tc-on); flex: 1; }
.tc-pill {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  color: var(--tc-verify); background: var(--tc-verify-bg);
  border-radius: var(--r-full); padding: 3px 9px; white-space: nowrap;
}
.tc-bpm { font-family: var(--font-body); font-size: 12.5px; color: var(--tc-onvar); font-variant-numeric: tabular-nums; }

/* ── How it works (numbered) ── */
.steps { counter-reset: step; }
.step { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--hairline); }
.step:first-child { border-top: none; }
.step-num {
  counter-increment: step; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--brand); color: var(--brand);
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 600;
}
.step-num::before { content: counter(step); }
.step h3 { margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 15px; }

/* ── Quote / credibility ── */
/* Narrower than the grid above it on purpose. The paragraph is capped at a 60ch
   reading measure, so a full-width panel left ~200px of dead space inside its own
   border. Widening the measure instead would push the line length past 75
   characters, which fixes the gap by making the block harder to read. The cap
   never binds below ~720px, so mobile is unaffected. */
.credit { background: var(--surface-low); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 48px); max-width: 720px; margin-inline: auto; }
.credit .book { font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 3vw, 26px); font-style: italic; }
.credit p { color: var(--muted); margin-top: 14px; max-width: 60ch; }
/* Byline under the title. Hugs it (4px, not the 14px every other .credit p gets)
   so the two read as one citation rather than two separate lines. */
.credit .book-by { margin-top: 4px; color: var(--faint); font-size: 14px; }

/* ── CTA band ── */
.cta-band { text-align: center; }
.cta-band .card { padding: clamp(36px, 6vw, 64px); background: var(--surface); }
.cta-band h2 { margin-bottom: 12px; }
.cta-band .hero-cta { justify-content: center; }

/* ── Footer ── */
footer { border-top: 1px solid var(--hairline); padding: 48px 0; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 56px; }
.foot-col h4 { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.foot-col a { display: block; font-size: 14px; color: var(--muted); padding: 4px 0; }
.foot-col a:hover { color: var(--on-surface); }
.foot-legal { font-size: 13px; color: var(--faint); margin-top: 28px; }

/* ── Docs / long-form pages ── */
.page-head { padding-top: clamp(48px, 9vw, 88px); padding-bottom: 0; }
.page-head .lead { max-width: 60ch; }
.back-link { display: flex; width: fit-content; align-items: center; gap: 6px; color: var(--faint); font-size: 14px; margin-bottom: 20px; }
.back-link:hover { color: var(--on-surface); }
.docs-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.docs-subnav a { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--muted); padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-full); }
.docs-subnav a:hover { color: var(--on-surface); background: var(--surface); }
.docs-subnav a[aria-current="page"] { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.doc { max-width: 720px; margin: 0 auto; padding: clamp(32px, 5vw, 48px) 0 clamp(56px, 9vw, 96px); }
.doc > *:first-child { margin-top: 0; }
.doc h2 { font-size: clamp(22px, 3vw, 26px); margin: 44px 0 14px; }
.doc h3 { font-size: 18px; margin: 30px 0 8px; }
.doc p { color: var(--muted); margin: 0 0 16px; }
.doc ul, .doc ol { color: var(--muted); margin: 0 0 18px; padding-left: 22px; }
.doc li { margin: 7px 0; }
.doc li::marker { color: var(--faint); }
.doc a { color: var(--brand); }
.doc a:hover { text-decoration: underline; }
.doc strong { color: var(--on-surface); font-weight: 600; }
.doc .lead { color: var(--muted); font-size: clamp(17px, 2.2vw, 19px); }
.doc hr { border: none; border-top: 1px solid var(--hairline); margin: 40px 0; }
.doc-note { background: var(--surface-low); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--r-md); padding: 16px 18px; margin: 24px 0; font-size: 14px; color: var(--muted); }
.doc-note strong { color: var(--on-surface); }
/* ── Pricing ── */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; }
.plan.featured { border-color: var(--brand); }
.plan .badge { align-self: flex-start; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); background: var(--brand-badge); border-radius: var(--r-full); padding: 4px 12px; margin-bottom: 14px; }
.plan .plan-name { font-family: var(--font-head); font-weight: 600; font-size: 18px; }
.plan .price { margin: 6px 0 2px; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
.plan .price .amount { font-size: 44px; }
.plan .price .per { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--muted); }
.plan .price-sub { font-size: 14px; color: var(--faint); min-height: 20px; }
.plan .plan-trial { font-size: 14px; color: var(--muted); margin: 14px 0 20px; }
.plan .btn { margin-top: auto; width: 100%; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 12px; font-size: 15px; color: var(--muted); padding: 9px 0; border-top: 1px solid var(--hairline); }
.checklist li:first-child { border-top: none; }
.checklist li::before { content: '\2713'; color: var(--brand); font-weight: 700; flex-shrink: 0; }

/* FAQ accordion */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; padding: 18px 0; font-family: var(--font-head); font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brand); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq details[open] summary { padding-bottom: 8px; }
.faq p { color: var(--muted); margin: 0 0 18px; }

/* Request-access form (invite-only tester intake) */
.request-card { text-align: center; }
.request-card .eyebrow { display: block; margin-bottom: 12px; }
.request-card .lead { margin: 0 auto 24px; }
.request-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; text-align: left; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.field {
  font-family: var(--font-body); font-size: 15px; color: var(--on-surface);
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px; width: 100%;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--brand); }
textarea.field { resize: vertical; min-height: 76px; }
.request-form .btn { width: 100%; margin-top: 4px; }
/* Honeypot: off-screen, unfocusable, invisible to people. Not display:none, so a
   bot that only skips hidden inputs still fills it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.request-status { font-size: 14px; min-height: 20px; margin: 4px 0 0; }
.request-status.ok { color: var(--brand); }
.request-status.err { color: #ff6b6b; }
@media (max-width: 480px) { .field-row { flex-direction: column; } }