/* Nuvaro marketing site — shared design system (bilingual EN/DE rebuild, 2026-07-07).
 *
 * Hand-authored (supersedes the old scripts/extract-marketing.py generator output). This file is
 * the SINGLE styling home for both language page sets: the English pages in frontend/marketing/*.html
 * and the German mirror in frontend/marketing/de/*.html reference it identically at /site-assets/site.css.
 * Class names are semantic and language-agnostic — the DE pages reuse them verbatim; only text changes.
 *
 * HARD RULES honoured here (marketing-guard gate): no @import, no external origins, every font url()
 * points at the self-hosted /fonts/* home (EU residency). Inline style= on the pages is allowed; this
 * sheet carries the reusable structure so the two language sets stay identical.
 *
 * Palette: Creme #F7F3EC (bg) · Dunkelbraun #2F2418 (text) · Gold #9B7B4D (accent) · dark #1A1813.
 */

/* ===================================================================== */
/* Reset + tokens                                                        */
/* ===================================================================== */
:root {
  --bg: #F7F3EC;
  --paper: #FBF8F2;
  --cream: #EDE7DB;
  --ink: #2F2418;
  --ink-soft: #4A4339;
  --ink-mute: #6B6357;
  --gold: #9B7B4D;
  --gold-light: #C9A86E;
  --gold-eyebrow: #8A6A3C;
  --line: #E5DDD0;
  --line-cream: #DDD4C4;
  --line-card: #E2DACD;
  --dark: #2F2418;
  --dark-deep: #1A1813;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* ===================================================================== */
/* Self-hosted fonts (EU residency — never a CDN). Keep url() at /fonts/. */
/* ===================================================================== */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/spectral-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/spectral-latin-ext-300.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/spectral-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/spectral-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-italic-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-italic-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/spectral-italic-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/spectral-italic-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================================== */
/* Base                                                                  */
/* ===================================================================== */
.site {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site img { max-width: 100%; }
em, .em { font-style: italic; }

/* ===================================================================== */
/* Layout primitives                                                     */
/* ===================================================================== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.container--narrow { max-width: 720px; }
.container--mid { max-width: 860px; }

.section { padding: 80px 0; }
.section--tight { padding: 64px 0; }
.section--rule > .container { border-top: 1px solid var(--line); padding-top: 72px; }
.section--cream { background: var(--cream); border-top: 1px solid var(--line-cream); border-bottom: 1px solid var(--line-cream); }
.section--paper { background: var(--paper); border-top: 1px solid var(--line); }
.section--dark { background: var(--dark); color: #EDE6D8; }
.section--deep { background: var(--dark-deep); }
.center { text-align: center; }

/* ===================================================================== */
/* Typography                                                            */
/* ===================================================================== */
.eyebrow {
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-eyebrow);
  font-weight: 600;
  margin-bottom: 18px;
}
.eyebrow--icon { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.eyebrow--icon .eyebrow { margin-bottom: 0; }
.eyebrow__mark { display: block; width: 44px; height: 44px; flex: none; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  color: var(--ink);
  text-wrap: balance;
}
.h2--xl { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; }
.h2--lg { font-size: 40px; line-height: 1.1; }
.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.prose { font-size: 18px; line-height: 1.72; color: var(--ink-soft); font-weight: 400; text-wrap: pretty; }
.prose--lg { font-size: 20px; line-height: 1.75; }
.prose + .prose { margin-top: 28px; }
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}

/* ===================================================================== */
/* Buttons                                                               */
/* ===================================================================== */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.btn:hover { opacity: 0.88; }
.btn--dark { background: var(--ink); color: var(--bg); padding: 15px 30px; font-size: 16px; }
.btn--gold { background: var(--gold); color: var(--ink); font-weight: 600; padding: 16px 34px; font-size: 16px; }
.btn--outline { background: transparent; color: var(--ink); border-color: #C3B79F; border-radius: 4px; padding: 9px 18px; font-size: 14.5px; }
.btn--block { display: block; width: 100%; text-align: center; padding: 13px; font-size: 15px; }
.btn--block.btn--outline { border-radius: 5px; }

/* ===================================================================== */
/* Nav + language toggle                                                 */
/* ===================================================================== */
.nav {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
}
.nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 40px;
}
.nav__logo { display: inline-flex; align-items: center; line-height: 0; }
.nav__logo img {
  display: block;
  width: 130px;
  height: 44px;
  max-width: none;
  object-fit: cover;
  object-position: center 50%;
  mix-blend-mode: multiply;
}
.nav__right { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
.nav__menu { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav__link {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { color: var(--ink); }
.nav__link--active { color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

/* Language toggle — plain links, no JS. Current language marked, other links across. */
.lang { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.04em; }
.lang__item { color: var(--ink-mute); text-decoration: none; }
.lang__item:hover { color: var(--ink); }
.lang__item--active { color: var(--gold); font-weight: 700; }
.lang__sep { color: #C3B79F; }

/* ===================================================================== */
/* Footer                                                                */
/* ===================================================================== */
.footer { background: var(--dark-deep); color: #8C8473; padding: 40px 0; }
.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__logo { display: inline-flex; line-height: 0; }
.footer__logo img {
  display: block;
  width: 110px;
  height: 37px;
  max-width: none;
  object-fit: cover;
  object-position: center 50%;
}
.footer__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer__text { font-size: 13.5px; color: #8C8473; font-weight: 400; }
.footer .lang__item { color: #A89C84; }
.footer .lang__item--active { color: #C9A86E; }
.footer .lang__sep { color: #4A4339; }

/* ===================================================================== */
/* Hero                                                                  */
/* ===================================================================== */
.hero { padding: 76px 0 72px; }
.hero .container { text-align: center; }
.hero__title { font-size: 54px; }
.hero__sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-mute);
  margin: 16px auto 32px;
}
.hero__lead { max-width: 64ch; margin: 0 auto 40px; }
.hero__cta { display: flex; gap: 16px; justify-content: center; align-items: center; }

/* Media placeholder (hero image "to be placed") */
.media-placeholder {
  height: 420px;
  border-radius: 8px;
  background: linear-gradient(160deg, #EDE7DB 0%, #C9B79A 50%, #8C7A57 100%);
  display: flex;
  align-items: flex-end;
  padding: 34px;
}
.media-placeholder__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.55);
  font-weight: 600;
}

/* Two-part narrative block (eyebrow + statement, eyebrow + prose) */
.narrative { max-width: 760px; }
.narrative .statement { margin-bottom: 48px; }

/* ===================================================================== */
/* "The System" emblem                                                   */
/* ===================================================================== */
.system__head { text-align: center; margin-bottom: 8px; }
.system__emblem { display: flex; flex-direction: column; align-items: center; }
.system__emblem img { display: block; width: 100%; max-width: 560px; height: auto; }
.system__body { max-width: 82ch; margin: 28px auto 0; text-align: center; }
.system__body .prose { margin: 0 0 24px; line-height: 1.65; }
.system__body .prose:last-of-type { margin-bottom: 40px; }

/* ===================================================================== */
/* Steps grid (home "how it works")                                      */
/* ===================================================================== */
.steps__intro { text-align: center; max-width: 66ch; margin: 0 auto 48px; }
.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.step { padding: 24px 22px; }
.step--highlight { background: #F0EBE2; border-radius: 10px; }
.step__num { font-family: var(--serif); font-size: 22px; color: var(--gold); margin-bottom: 16px; }
.step__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 14px;
  line-height: 1.25;
  min-height: 3.75em;
}
.step__body { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0; font-weight: 400; }

/* ===================================================================== */
/* Pull quote (centered, big italic + attribution)                       */
/* ===================================================================== */
.pullquote { text-align: center; }
.pullquote__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.4;
  margin: 0 auto 28px;
  color: var(--ink);
  text-wrap: pretty;
}
.pullquote__attr { font-size: 14px; letter-spacing: 0.08em; color: var(--gold); font-weight: 600; }

/* ===================================================================== */
/* Closing CTA (dark)                                                    */
/* ===================================================================== */
.closing { padding: 64px 0; }
.closing .container { text-align: center; }
.closing__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  color: var(--bg);
  line-height: 1.12;
}
.closing__sub { font-size: 17px; color: #B7A988; margin: 0 0 36px; }
.closing--quote { padding: 96px 0; }
.closing__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.55;
  color: #CFC6B3;
  margin: 0 0 40px;
  text-wrap: pretty;
}

/* ===================================================================== */
/* Bio box (Why page)                                                    */
/* ===================================================================== */
.bio {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  align-items: start;
}
.bio__img { display: block; width: 64px; height: 64px; margin-top: 2px; }
.bio__label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-eyebrow);
  font-weight: 600;
  margin-bottom: 6px;
}
.bio__name { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin-bottom: 14px; }
.bio__text { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin: 0; font-weight: 400; }

/* Interstitial quote (left border, gold) */
.interstitial { border-left: 3px solid var(--gold-light); padding-left: 32px; }
.interstitial__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.5;
  color: var(--gold);
  margin: 0;
}

/* ===================================================================== */
/* Feature list (Why page advantages / limitations)                      */
/* ===================================================================== */
.feature { margin-bottom: 44px; }
.feature:last-child { margin-bottom: 0; }
.feature__title { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold); margin-bottom: 10px; }
.feature__body { font-size: 18px; line-height: 1.75; color: var(--ink-soft); margin: 0; font-weight: 400; }

/* ===================================================================== */
/* Tips list (Working page)                                              */
/* ===================================================================== */
.tips { display: flex; flex-direction: column; gap: 36px; }
.tip { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.tip__num { font-family: var(--serif); font-size: 18px; color: var(--gold-light); padding-top: 2px; }
.tip__title { font-weight: 600; font-size: 16px; margin-bottom: 8px; color: var(--ink); }
.tip__body { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; font-weight: 400; }

/* ===================================================================== */
/* Transparency (2 columns: strengths / check-my-work)                   */
/* ===================================================================== */
.transparency__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.trust-col__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 24px;
}
.trust-col__label--strong { color: var(--gold); }
.trust-col__label--check { color: #9A9082; }
.trust-list { display: flex; flex-direction: column; gap: 20px; }
.trust-item { padding-left: 16px; border-left: 2px solid var(--gold-light); }
.trust-item--check { border-left-color: #D9D0C4; }
.trust-item__title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.trust-item__body { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 0; font-weight: 400; }

/* Centered closing quote (Working page) */
.quote-close { text-align: center; }
.quote-close__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.55;
  color: var(--gold);
  margin: 0 0 32px;
}

/* ===================================================================== */
/* Subscription plans                                                    */
/* ===================================================================== */
.subs-hero__intro { max-width: 52ch; margin: 0 auto; color: var(--ink-mute); font-size: 18px; line-height: 1.6; }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
  background: #FFFFFF;
  border: 1px solid var(--line-card);
  border-radius: 10px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan--featured { background: var(--dark); border-color: var(--dark); }
.plan__badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
.plan__icon { display: block; width: 60px; height: 60px; margin-bottom: 18px; }
.plan__icon--round { border-radius: 50%; }
.plan__name { font-family: var(--serif); font-weight: 500; font-size: 26px; margin-bottom: 6px; color: var(--ink); }
.plan__tagline { font-size: 13.5px; color: var(--gold-eyebrow); font-weight: 600; margin-bottom: 14px; }
.plan__price { font-family: var(--serif); font-size: 28px; color: var(--ink); margin-bottom: 4px; }
.plan__price-unit { font-size: 16px; color: #9A9082; }
.plan__price-note { font-size: 13px; color: #9A9082; margin-bottom: 20px; }
.plan__body {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.plan__forwho {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  margin: 0 0 16px;
  line-height: 1.55;
}
.plan__para { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 12px; font-weight: 400; }
.plan__para:last-child { margin-bottom: 0; }
.plan__cta { margin-top: 24px; }
/* Featured (dark) card recolours */
.plan--featured .plan__name { color: var(--bg); }
.plan--featured .plan__tagline { color: var(--gold-light); }
.plan--featured .plan__price { color: var(--bg); }
.plan--featured .plan__price-unit { color: #B7A988; }
.plan--featured .plan__price-note { color: #A89C84; }
.plan--featured .plan__body { border-top-color: #4A4339; }
.plan--featured .plan__forwho { color: var(--gold-light); }
.plan--featured .plan__para { color: #D6CDBA; }

.price-note {
  text-align: center;
  font-size: 14.5px;
  color: #857C6E;
  margin: 32px auto 0;
  max-width: 60ch;
  line-height: 1.6;
  font-weight: 400;
}

/* ===================================================================== */
/* Responsive floor                                                      */
/* ===================================================================== */
@media (max-width: 980px) {
  .steps__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .step__title { min-height: 0; }
  .plans__grid { grid-template-columns: 1fr; gap: 28px; max-width: 560px; margin: 0 auto; }
  .plan__badge { position: static; display: inline-block; margin-bottom: 16px; }
  .transparency__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .container { padding: 0 24px; }
  .nav__inner { padding: 18px 24px; flex-wrap: wrap; gap: 14px 20px; }
  .nav__right { gap: 16px 20px; }
  .footer__inner { padding: 0 24px; }
  .display, .hero__title { font-size: 40px; }
  .h2--xl { font-size: 34px; }
  .h2--lg { font-size: 32px; }
  .hero__sub { font-size: 24px; }
  .statement { font-size: 25px; }
  .pullquote__text { font-size: 27px; }
}

@media (max-width: 560px) {
  .steps__grid { grid-template-columns: 1fr; }
  .display, .hero__title { font-size: 34px; line-height: 1.1; }
  .h2 { font-size: 27px; }
  .bio { grid-template-columns: 1fr; gap: 18px; }
  .bio__img { width: 56px; height: 56px; }
  .hero__cta { flex-direction: column; }
  .section { padding: 60px 0; }
}