/* Overload design tokens — from the Claude Design system (docs/design/). Dark-only. */
:root {
  --surface0: #0b0c0e;
  --surface1: #14161a;
  --surface2: #1c2027;
  --surface3: #262b33;
  --tabbar: #101216;
  --hairline: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f2f4f7;
  --text-2: #a6adba;
  --text-3: #7a828f;
  --text-4: #5a616c;
  --on-accent: #1c0e05;
  --signal: #ff6a2b;
  --signal-pressed: #e85a1f;
  --signal-tint: rgba(255, 106, 43, 0.13);
  --signal-border: rgba(255, 106, 43, 0.4);
  --success: #3dd68c;
  --warning: #e3b341;
  --rest: #7fb2e5;
  --coach: #45d6c2;
  --coach-border: rgba(69, 214, 194, 0.22);
  --danger: #ed5e4d;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --cond: 'IBM Plex Sans Condensed', var(--sans);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface0);
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--signal); text-decoration: none; }
a:hover { color: #ff8a55; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.num { font-variant-numeric: tabular-nums; }

/* ---- micro label (mono kicker) ---- */
.micro {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.micro.signal { color: var(--signal); }
.micro.coach { color: var(--coach); }
.micro.success { color: var(--success); }

/* ---- wordmark ---- */
.wordmark { display: inline-flex; align-items: center; color: var(--text); }
.wordmark span {
  font: 700 clamp(22px, 2.4vw, 26px)/0.9 var(--cond);
  letter-spacing: 0.015em;
}
.wordmark svg { margin: 0 1px; }
.wordmark:hover { color: var(--text); }

/* ---- nav ---- */
header.site {
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 12, 14, 0.85);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
header.site nav { display: flex; gap: 26px; align-items: center; }
header.site nav a { font: 600 14px var(--sans); color: var(--text-2); }
header.site nav a:hover { color: var(--text); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 22px; border-radius: 12px;
  font: 600 16px var(--sans); cursor: pointer; border: none;
  transition: background 120ms ease, transform 120ms ease;
}
.btn.primary { background: var(--signal); color: var(--on-accent); }
.btn.primary:hover { background: var(--signal-pressed); color: var(--on-accent); }
.btn.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface3); color: var(--text); }
.btn:active { transform: scale(0.97); }

/* ---- cards ---- */
.card {
  background: var(--surface1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px;
}
.card.coach { border-color: var(--coach-border); }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; padding: 84px 0 64px; }
.hero .glow {
  position: absolute; left: 50%; top: -420px; transform: translateX(-50%);
  width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 43, 0.16), rgba(255, 106, 43, 0.04) 55%, transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero h1 { font: 700 clamp(40px, 5.4vw, 62px)/1.08 var(--sans); letter-spacing: -0.015em; margin: 18px 0 16px; }
.hero p.sub { font: 400 18px/1.6 var(--sans); color: var(--text-2); max-width: 30em; }
.hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.hero .store-note { font: 500 13px var(--sans); color: var(--text-3); }

/* ---- live animated device (recreated from the design, not a screenshot) ---- */
.live-phone {
  width: min(300px, 80vw); margin: 0 auto; position: relative;
  border-radius: 46px; border: 2px solid rgba(255, 255, 255, 0.12);
  background: #000; padding: 9px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 106, 43, 0.08);
}
.live-scaler { position: relative; width: 100%; overflow: hidden; border-radius: 38px; }
.live-screen {
  position: absolute; top: 0; left: 0; width: 393px; height: 852px;
  transform-origin: top left; background: var(--surface0);
  display: flex; flex-direction: column; overflow: hidden;
}
.ls-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 34px 0; height: 54px; box-sizing: border-box; }
.ls-time { font: 600 16px var(--sans); color: var(--text); }
.ls-island { width: 118px; height: 34px; background: #000; border-radius: 19px; }
.ls-stat { display: inline-flex; align-items: center; gap: 7px; }
.ls-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 0; }
.ls-btn { width: 38px; height: 38px; border-radius: 19px; background: var(--surface1); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: var(--text-2); font: 600 14px var(--sans); }
.ls-btn.coach { border-color: rgba(69, 214, 194, 0.3); }
.ls-diamond { width: 9px; height: 9px; background: var(--coach); border-radius: 2px; transform: rotate(45deg); }
.ls-head .mid { text-align: center; }
.ls-head .exname { display: block; font: 600 18px var(--sans); color: var(--text); }
.ls-head .exsub { display: block; margin-top: 2px; font-size: 9.5px; }
.ls-focus { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; }
.ls-focus .big { font: 700 140px/1 var(--cond); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: 6px 0 2px; color: var(--text); }
.ls-focus .big .x { font-size: 64px; color: var(--text-2); }
.ls-focus .hint { font: 400 12px var(--sans); color: var(--text-3); margin-top: 6px; }
.ls-sets { padding: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.ls-set { display: flex; align-items: center; gap: 12px; height: 44px; border-radius: 12px; background: var(--surface1); border: 1px solid rgba(255, 255, 255, 0.05); padding: 0 12px; transition: background 0.22s, border-color 0.22s, opacity 0.22s, height 0.22s; }
.ls-set .chip { width: 22px; height: 22px; border-radius: 11px; background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: none; }
.ls-set .chip .n { font: 600 11px var(--mono); color: var(--text-3); }
.ls-set .chip .tick { display: none; }
.ls-set .val { font: 700 19px var(--cond); font-variant-numeric: tabular-nums; color: var(--text); }
.ls-set .tag { margin-left: auto; font: 600 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ls-set.active { height: 50px; background: var(--signal-tint); border-color: var(--signal-border); animation: activeBreath 2.4s ease-in-out infinite; }
.ls-set.active .chip { background: var(--signal); }
.ls-set.active .chip .n { color: var(--on-accent); }
.ls-set.active .val { font-size: 22px; }
.ls-set.active .tag { color: var(--signal); }
.ls-set.done { opacity: 0.7; }
.ls-set.done .chip { background: rgba(61, 214, 140, 0.15); }
.ls-set.done .chip .n { display: none; }
.ls-set.done .chip .tick { display: block; animation: tickPop 0.4s cubic-bezier(0.2, 1.6, 0.3, 1) both; }
.ls-set.done .val { color: var(--text-2); }
.ls-segs { display: flex; gap: 5px; padding: 14px 16px 0; }
.ls-segs i { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.ls-segs i.on { background: var(--signal); }
.ls-cta { margin: 12px 16px 20px; height: 64px; border-radius: 16px; background: var(--signal); color: var(--on-accent); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; transition: transform 0.12s, background 0.12s; }
.ls-cta.press { transform: scale(0.97); background: var(--signal-pressed); }
.ls-cta .lbl { font: 600 18px var(--sans); }
.ls-cta .tgt { font: 700 26px var(--cond); font-variant-numeric: tabular-nums; }
@keyframes tickPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes activeBreath { 0%, 100% { box-shadow: 0 0 0 rgba(255, 106, 43, 0); } 50% { box-shadow: 0 0 26px rgba(255, 106, 43, 0.16); } }
@media (prefers-reduced-motion: reduce) { .ls-set { animation: none !important; } .ls-set.done .chip .tick { animation: none; } }

/* ---- sections ---- */
section.feature { padding: 72px 0; border-top: 1px solid var(--hairline); }
section.feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
section.feature h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.2 var(--sans); letter-spacing: -0.01em; margin: 12px 0 12px; }
section.feature p { color: var(--text-2); max-width: 30em; }
section.feature.flip .demo { order: -1; }

/* recreated app fragments */
.demo { display: grid; gap: 10px; }
.row-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.row-line:last-child { border-bottom: none; }
.row-line .name { font: 500 14px var(--sans); }
.row-line .target { font: 700 17px var(--cond); font-variant-numeric: tabular-nums; }
.tag-up { color: var(--signal); font-size: 12px; }
.coach-line { display: flex; gap: 10px; align-items: flex-start; }
.diamond { width: 9px; height: 9px; background: var(--coach); border-radius: 2px; transform: rotate(45deg); flex: none; margin-top: 6px; }
.data-tag {
  display: inline-block; margin-top: 7px; padding: 3px 7px; border-radius: 5px;
  background: var(--surface2); font: 500 9px var(--mono); letter-spacing: 0.06em; color: var(--text-3);
  text-transform: uppercase;
}
.diff-tiles { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.diff-tiles .tile { flex: 1; border-radius: 10px; padding: 10px 12px; }
.diff-tiles .before { background: #0f1114; border: 1px solid var(--hairline); }
.diff-tiles .before .big { color: var(--text-3); text-decoration: line-through; }
.diff-tiles .after { background: rgba(69, 214, 194, 0.08); border: 1px solid rgba(69, 214, 194, 0.3); }
.diff-tiles .big { font: 700 24px var(--cond); font-variant-numeric: tabular-nums; }
.diff-tiles .arrow { color: var(--coach); font: 600 16px var(--sans); }
.diff-line { display: flex; gap: 8px; align-items: center; font: 400 13px var(--sans); color: var(--text-2); padding: 3px 0; }
.diff-line .glyph { width: 14px; text-align: center; font-weight: 600; }
.pill-row { display: flex; gap: 8px; }
.pill-row .accept { flex: 1; text-align: center; padding: 11px 0; border-radius: 10px; background: var(--signal); color: var(--on-accent); font: 600 14px var(--sans); }
.pill-row .decline { flex: 1; text-align: center; padding: 11px 0; border-radius: 10px; border: 1px solid var(--border-strong); font: 600 14px var(--sans); }
.stat-tiles { display: flex; gap: 8px; }
.stat-tiles .tile { flex: 1; background: var(--surface1); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; }
.stat-tiles .big { font: 700 30px/1 var(--cond); font-variant-numeric: tabular-nums; }
.stat-tiles .big.accent { color: var(--signal); }
.stat-tiles .micro { font-size: 8.5px; margin-top: 5px; }

/* ---- pricing ---- */
section.pricing { padding: 72px 0; border-top: 1px solid var(--hairline); text-align: center; }
section.pricing h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.2 var(--sans); margin: 12px 0 8px; }
section.pricing .sub { color: var(--text-2); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 860px; margin: 36px auto 0; text-align: left; }
.tier { position: relative; background: var(--surface1); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; padding: 20px; }
.tier.best { background: rgba(255, 106, 43, 0.08); border: 1.5px solid rgba(255, 106, 43, 0.55); }
.tier .badge {
  position: absolute; top: -10px; left: 16px; background: var(--signal); color: var(--on-accent);
  font: 600 9px var(--mono); letter-spacing: 0.1em; padding: 3px 8px; border-radius: 5px; text-transform: uppercase;
}
.tier h3 { font: 600 16px var(--sans); }
.tier .price { font: 700 34px var(--cond); font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.tier .math { font: 400 13px var(--sans); color: var(--text-3); }
.pricing .fine { margin-top: 26px; font: 400 13px/1.6 var(--sans); color: var(--text-3); max-width: 46em; margin-left: auto; margin-right: auto; }

/* ---- footer ---- */
footer.site { border-top: 1px solid var(--hairline); background: var(--tabbar); padding: 44px 0; margin-top: 72px; }
footer.site .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer.site nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer.site a { font: 500 14px var(--sans); color: var(--text-3); }
footer.site a:hover { color: var(--text); }
footer.site .fine { font: 500 10px var(--mono); letter-spacing: 0.1em; color: var(--text-4); text-transform: uppercase; }

/* ---- legal / doc pages ---- */
main.doc { max-width: 720px; margin: 0 auto; padding: 64px 24px 40px; }
main.doc h1 { font: 700 34px/1.2 var(--sans); letter-spacing: -0.01em; margin: 6px 0 6px; }
main.doc .updated { font: 500 11px var(--mono); letter-spacing: 0.1em; color: var(--text-4); text-transform: uppercase; }
main.doc h2 { font: 600 21px/1.3 var(--sans); margin: 40px 0 10px; }
main.doc p, main.doc li { color: var(--text-2); font-size: 16px; margin-bottom: 12px; }
main.doc ul { padding-left: 22px; }
main.doc .callout { background: var(--surface1); border: 1px solid var(--coach-border); border-radius: 14px; padding: 14px 16px; margin: 18px 0; color: var(--text-2); font-size: 15px; }

@media (max-width: 860px) {
  .hero .wrap, section.feature .wrap { grid-template-columns: 1fr; gap: 36px; }
  section.feature.flip .demo { order: 0; }
  .tiers { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 44px; }
}