/* ==========================================================================
   Cue & Capture — marketing site
   Tokens mirror brand/BRAND.md and CueCapture/DesignSystem/BrandColor.swift.
   Change them here only; every page reads from this file.

   The site deliberately commits to one visual world — the brand's cream and
   charcoal — rather than offering a dark mode. Full-bleed charcoal bands carry
   the contrast instead.
   ========================================================================== */

/* --- faces ---------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  --cream: #F9F6F1;
  --cream-dark: #F0EBE3;
  --charcoal: #1C1C1C;
  --charcoal-soft: #3A3A3A;
  --gold: #B8965A;
  --gold-light: #D4B483;
  --gold-muted: #E8D5B0;

  /* Brand gold is only 2.6:1 on cream, so it fails WCAG AA as small text.
     This is the same hue (38deg) and saturation, darkened until it clears 4.5:1
     on both cream (5.5:1) and cream-dark (5.0:1). Use it for gold *text* on
     light grounds; keep --gold itself for rules, borders and the mark. */
  --gold-deep: #796034;

  /* neutrals derived from the ink so borders stay warm, never grey */
  --rule: rgba(28, 28, 28, 0.13);
  --rule-soft: rgba(28, 28, 28, 0.07);
  --rule-on-dark: rgba(249, 246, 241, 0.16);

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Jost', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 4pt scale, as in the app */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --measure: 68ch;
  --wide: 1080px;
  --gutter: clamp(20px, 5vw, 40px);

  --radius-card: 12px;
  --radius-button: 8px;
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* --- type ----------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 300; text-wrap: balance; }

h1 { font-size: clamp(2.6rem, 6.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.85rem); line-height: 1.1; }
h3 { font-family: var(--body); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }

p { margin: 0; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gold); }

.eyebrow {
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--s4);
}
.lede { font-size: clamp(1.09rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--charcoal-soft); }
.meta { font: 400 0.8125rem/1.5 var(--mono); color: var(--charcoal-soft); }
.amp { color: var(--gold); font-style: italic; }

/* --- layout --------------------------------------------------------------- */

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

.band { padding-block: clamp(var(--s7), 9vw, var(--s9)); }
.band--tint { background: var(--cream-dark); }
.band--dark { background: var(--charcoal); color: var(--cream); }
.band--dark .lede,
.band--dark .meta { color: #B3AA9C; }
.band--dark .eyebrow { color: var(--gold-light); }
.band--dark a:hover { text-decoration-color: var(--gold-light); }
.band + .band { border-top: 1px solid var(--rule-soft); }
.band--tint + .band, .band--dark + .band, .band + .band--dark { border-top: 0; }

.rule-gold { height: 1px; background: var(--gold); border: 0; margin: 0; opacity: .8; }

/* --- skip link + focus ---------------------------------------------------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--charcoal); color: var(--cream);
  padding: var(--s3) var(--s4); font: 500 0.875rem var(--body);
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* focus rings need 3:1 against the adjacent ground (WCAG 2.2, 1.4.11);
   brand gold is 2.58:1 on cream, so the deep gold does this job too */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 3px; }
.band--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-light); }

/* --- the mark ------------------------------------------------------------- */

/* Strokes are driven by custom properties so the knockout gap always matches
   whatever ground the mark sits on. Set --m-ground per context. */
.cc-mark { width: 44px; flex: none; }
.cc-mark .ink    { stroke: var(--m-ink, var(--charcoal)); }
.cc-mark .ground { stroke: var(--m-ground, var(--cream)); }
.cc-mark .gold   { stroke: var(--m-gold, var(--gold)); }

/* --- header / footer ------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--rule-soft);
  background: var(--cream);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.1) blur(6px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-block: var(--s3);
}
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand .cc-mark { width: 30px; }
.brand-name {
  font-family: var(--display); font-size: 1.35rem; font-weight: 400;
  letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: clamp(var(--s4), 3vw, var(--s6)); }
.nav a {
  font: 400 0.9375rem/1 var(--body); text-decoration: none; color: var(--charcoal-soft);
  padding-block: var(--s2);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--charcoal); }
.nav a[aria-current='page'] { box-shadow: inset 0 -1px 0 var(--gold); }
@media (max-width: 560px) {
  .brand-name { font-size: 1.1rem; }
  .nav { gap: var(--s4); }
  .nav a { font-size: 0.875rem; }
}
/* At phone widths the brand lockup and three nav links only just fit; tighten
   both so the last link keeps its gutter rather than sitting on the edge. */
@media (max-width: 460px) {
  .site-header .wrap { gap: var(--s3); }
  .brand .cc-mark { width: 26px; }
  .brand { gap: var(--s2); }
  .brand-name { font-size: 0.95rem; letter-spacing: 0.03em; }
  .nav { gap: var(--s3); }
  .nav a { font-size: 0.8125rem; }
}

.site-footer { background: var(--charcoal); color: var(--cream); padding-block: var(--s7); }
/* .meta defaults to charcoal-soft, which is invisible on the dark footer */
.site-footer .meta { color: #B3AA9C; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--gold-light); }
.footer-grid {
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
}
.footer-grid h4 {
  font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--s3);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer-links a { font-size: 0.9375rem; color: #B3AA9C; }
.footer-links a:hover { color: var(--cream); }
.colophon {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-dark);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  font: 400 0.8125rem/1.5 var(--mono); color: #8E8577;
}

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(var(--s8), 11vw, 152px) clamp(var(--s7), 8vw, var(--s9)); }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 46ch; margin-top: var(--s5); }
.hero-note {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5);
}
.badge {
  font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal); background: var(--gold-muted);
  padding: var(--s2) var(--s3); border-radius: 999px;
}

/* --- feature rows --------------------------------------------------------- */

.rows { display: grid; gap: clamp(var(--s6), 6vw, var(--s8)); }
.row { display: grid; gap: var(--s4) clamp(var(--s5), 5vw, var(--s7)); align-items: start; }
@media (min-width: 720px) {
  .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .row__label { position: sticky; top: 96px; }
}
.row__label .n {
  font: 400 0.75rem/1 var(--mono); color: var(--gold-deep);
  display: block; margin-bottom: var(--s3);
}
.row h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.row p { color: var(--charcoal-soft); }
.band--dark .row p { color: #B3AA9C; }

/* a pulled quote in Pye's voice — the coaching field, rendered as it is in-app */
.tip {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--gold); color: var(--charcoal);
  border-radius: var(--radius-card);
}
.tip .eyebrow { color: rgba(28, 28, 28, 0.9); margin-bottom: var(--s3); }
.tip blockquote {
  margin: 0; font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.38;
}
.tip cite { display: block; margin-top: var(--s3); font: 400 0.75rem/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: rgba(28,28,28,.9); }

/* --- pricing -------------------------------------------------------------- */

.plans { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: var(--s6); }
.plan { border: 1px solid var(--rule-on-dark); border-radius: var(--radius-card); padding: var(--s5); }
.plan--featured { border-color: var(--gold-light); }
.plan .name { font: 500 0.9375rem/1.3 var(--body); }
.plan .price { font-family: var(--mono); font-size: 1.5rem; margin-top: var(--s2); }
.plan .price span { font-size: 0.875rem; color: #8E8577; }
.plan .note { font: 400 0.75rem/1.4 var(--mono); color: var(--gold-light); margin-top: var(--s2); text-transform: uppercase; letter-spacing: .1em; }

/* --- legal + support prose ------------------------------------------------ */

.doc-head { padding-block: clamp(var(--s7), 7vw, var(--s8)) var(--s6); border-bottom: 1px solid var(--rule); }
.doc { padding-block: var(--s7) clamp(var(--s7), 8vw, var(--s9)); }
/* Direct children of .prose, and children of any wrapper block inside it —
   the support page groups its sections in divs. .contact-card manages its own
   spacing with grid gap, so it is excluded. */
.doc .prose > * + *,
.doc .prose > div:not(.contact-card) > * + * { margin-top: var(--s4); }
.doc h2 {
  font-family: var(--body); font-size: 1.0625rem; font-weight: 500;
  letter-spacing: 0.01em; margin-top: var(--s7); scroll-margin-top: 96px;
}
.doc h2:first-child { margin-top: 0; }
.doc h2 .n { font-family: var(--mono); font-size: 0.8125rem; color: var(--gold-deep); margin-right: var(--s2); }
.doc h3 { margin-top: var(--s5); font-size: 0.9375rem; }
.doc p, .doc li { color: var(--charcoal-soft); }
.doc strong { color: var(--charcoal); font-weight: 500; }
.doc ul, .doc ol { margin: 0; padding-left: 1.25em; display: grid; gap: var(--s2); }
.doc a { color: var(--charcoal); text-decoration-color: var(--gold); }

.summary-box {
  border: 1px solid var(--rule); border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--s5); background: var(--cream-dark);
}
.summary-box p { color: var(--charcoal); }

.toc { border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); padding-block: var(--s4); }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2) var(--s5); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); counter-reset: toc; }
.toc a { font: 400 0.875rem/1.4 var(--body); color: var(--charcoal-soft); text-decoration: none; }
.toc a:hover { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--gold-deep); }
.toc a::before { counter-increment: toc; content: counter(toc) '. '; font-family: var(--mono); font-size: .8125rem; color: var(--gold-deep); }

.placeholder {
  background: var(--gold-muted); color: var(--charcoal);
  padding: 1px var(--s1); border-radius: 3px;
  font-family: var(--mono); font-size: 0.9em;
}

/* FAQ — native disclosure, no JS */
.faq { display: grid; gap: 0; margin-top: var(--s5); border-top: 1px solid var(--rule-soft); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding-block: var(--s4);
  font: 500 1rem/1.45 var(--body); display: flex; gap: var(--s4);
  align-items: baseline; justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--gold-deep); font-size: 1.15rem; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding-bottom: var(--s5); max-width: var(--measure); }
.faq details > div > * + * { margin-top: var(--s3); }
.faq p { color: var(--charcoal-soft); }

.contact-card {
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: clamp(var(--s5), 4vw, var(--s6)); background: var(--cream-dark);
  display: grid; gap: var(--s3);
}
.contact-card .email {
  font-family: var(--mono); font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--charcoal); text-decoration-color: var(--gold); word-break: break-word;
}

/* --- print: legal pages should print cleanly ------------------------------ */

@media print {
  .site-header, .site-footer, .toc, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc p, .doc li { color: #000; }
  a { text-decoration: none; }
  .doc a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
  .summary-box { border: 1px solid #999; background: none; }
}