/* Tokens from docs/DESIGN.md. Keep in step with the YAML there. */
:root {
  --primary: #47263B;
  --primary-pressed: #361B2C;
  --on-primary: #FFFFFF;
  --primary-container: #F6ECEF;
  --secondary: #DDF27D;
  --on-secondary: #211E23;
  --secondary-container: #EEF7C5;
  --tertiary: #E9CFD5;
  --surface: #F7F4EE;
  --surface-container: #FFFFFF;
  --surface-container-high: #EFEBE3;
  --on-surface: #211E23;
  --on-surface-variant: #67616B;
  --outline: #D9D3C8;
  --outline-variant: #ECE7DE;
  --error: #B3261E;
  --error-container: #FBE4E2;
  --on-error-container: #7A1A14;

  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-xl: 24px;
  --rounded-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --gutter: 12px;
  --margin: 20px;

  --font-head: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 500 15px/1.45 var(--font-body);
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--margin); }
.narrow { max-width: 720px; }

/* typography.* */
.display-lg { font: 800 40px/1.05 var(--font-head); letter-spacing: -0.02em; margin: 0; }
.headline-lg { font: 800 32px/1.1 var(--font-head); letter-spacing: -0.02em; margin: 0; }
.headline-md { font: 800 22px/1.2 var(--font-head); letter-spacing: -0.01em; margin: 0; }
.title-md { font: 700 17px/1.3 var(--font-body); margin: 0; }
.body-lg { font: 500 16px/1.45 var(--font-body); }
.body-sm { font: 500 13px/1.4 var(--font-body); }
.label-md { font: 700 15px/1.2 var(--font-body); }
.label-sm { font: 700 12px/1.2 var(--font-body); }
.muted { color: var(--on-surface-variant); }
@media (min-width: 760px) {
  .display-lg { font-size: 56px; }
}

/* Header */
.header { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--outline-variant); }
.header .wrap { display: flex; align-items: center; gap: var(--space-lg); height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.brand img { height: 28px; width: auto; }
.nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav a { color: var(--on-surface); text-decoration: none; white-space: nowrap; font: 700 15px/1.2 var(--font-body); }
.header .play { margin-left: var(--space-md); }
@media (max-width: 759px) {
  .nav { gap: var(--space-md); }
  .brand img:first-child { display: none; }
  .header .play { display: none; }
}

/* button-primary, button-highlight */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 48px; padding: 14px 20px; border-radius: var(--rounded-md);
  font: 700 15px/1.2 var(--font-body); text-decoration: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); min-height: 52px; }
.btn-primary:hover { background: var(--primary-pressed); }
.btn-highlight { background: var(--secondary); color: var(--on-secondary); }
.btn-secondary { background: var(--surface-container); color: var(--on-surface); border: 1px solid var(--outline); }
.play svg { width: 20px; height: 20px; flex: none; }

.pill { display: inline-block; background: var(--secondary); color: var(--on-secondary); border-radius: var(--rounded-full); padding: 6px 14px; font: 700 12px/1.2 var(--font-body); }

section { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: var(--space-xl); display: grid; gap: var(--space-md); }

/* Hero */
.hero { padding-top: 40px; }
.hero-grid { display: grid; gap: var(--space-xl); align-items: center; }
.hero-copy { display: grid; gap: var(--space-lg); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.before-after { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.before-after figure { margin: 0; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--rounded-xl); padding: var(--gutter); }
.before-after img { border-radius: var(--rounded-lg); aspect-ratio: 2 / 3; object-fit: cover; object-position: top; width: 100%; height: auto; }
.before-after figcaption { padding-top: var(--space-sm); }
.before-after .pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
}

/* Cards */
.card { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--rounded-lg); padding: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; }
.grid-3 { display: grid; gap: var(--space-md); }
.grid-2 { display: grid; gap: var(--space-md); }
@media (min-width: 760px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
.step-num { width: 36px; height: 36px; border-radius: var(--rounded-full); background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 700 15px/1 var(--font-body); }
.card img.illustration { width: 100%; max-width: 240px; height: auto; border-radius: var(--rounded-lg); margin-bottom: var(--space-sm); }

.problem { background: var(--primary-container); }

/* Pricing */
.price-card { max-width: 480px; background: var(--surface-container); border: 2px solid var(--primary); border-radius: var(--rounded-xl); padding: var(--space-xl); display: grid; gap: var(--space-md); }
.price { font: 800 40px/1.05 var(--font-head); letter-spacing: -0.02em; }
.price-card ul { margin: 0; padding-left: 20px; display: grid; gap: var(--space-xs); }

/* FAQ */
details { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--rounded-md); padding: var(--space-md) var(--space-lg); }
details + details { margin-top: var(--space-sm); }
summary { cursor: pointer; font: 700 17px/1.3 var(--font-body); }
details p { margin: var(--space-sm) 0 0; }

.final { background: var(--primary); color: var(--on-primary); text-align: center; }
.final .hero-cta { justify-content: center; }
.final .muted { color: var(--tertiary); }

/* Footer */
.footer { padding: var(--space-xl) 0 96px; border-top: 1px solid var(--outline-variant); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; }
.footer a { color: var(--on-surface-variant); text-decoration: none; font: 500 13px/1.4 var(--font-body); }
.footer .muted { margin-left: auto; }

/* Phones: the badge lives in a bottom bar */
.bottom-bar { display: none; }
@media (max-width: 759px) {
  .bottom-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: var(--space-sm) var(--margin) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--outline-variant); }
  .bottom-bar .btn { width: 100%; }
}

/* Policy pages */
.doc { padding: 40px 0 64px; }
.doc h1 { margin-bottom: var(--space-sm); }
.doc h2 { font: 800 22px/1.2 var(--font-head); letter-spacing: -0.01em; margin: var(--space-xl) 0 var(--space-sm); }
.doc p, .doc li { font: 500 16px/1.55 var(--font-body); }
.doc ul, .doc ol { padding-left: 22px; }
.notice { background: var(--secondary-container); border-radius: var(--rounded-md); padding: var(--space-md); }