/*
 * ══════════════════════════════════════════════════════════════
 *  RENTEOPTIMERING.DK — DESIGN SYSTEM
 *  Version 1.0 · Marts 2025
 *
 *  Inkludér denne fil på ALLE sider:
 *  <link rel="stylesheet" href="/design-system.css">
 *
 *  INDHOLD:
 *  1. CSS Custom Properties (tokens)
 *  2. Reset & Base
 *  3. Typografi
 *  4. Layout utilities
 *  5. Komponenter: Knapper
 *  6. Komponenter: Badges & Tags
 *  7. Komponenter: Cards
 *  8. Komponenter: Forms
 *  9. Komponenter: Header & Nav
 *  10. Komponenter: Footer
 *  11. Komponenter: Hero
 *  12. Komponenter: Sections
 *  13. Responsive helpers
 * ══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────
   1. TOKENS — ÉT STED AT ÆNDRE ALT
   ───────────────────────────────────────── */
:root {
  /* Primær palette */
  --navy:          #0f2340;   /* Primær mørk — baggrunde, knapper */
  --navy-light:    #1a3558;   /* Hover-state for navy */
  --navy-dark:     #0a1929;   /* Endnu mørkere – til gradienter */
  --teal:          #0d9e8a;   /* Accent — CTAs, links, highlights */
  --teal-light:    #14b8a0;   /* Hover-state for teal */
  --teal-pale:     rgba(13,158,138,0.10);  /* Subtil baggrund */
  --teal-border:   rgba(13,158,138,0.25);  /* Subtil kant */

  /* Neutrale */
  --cream:         #f8f5ef;   /* Sektion-baggrund (afvekslende) */
  --warm-white:    #fdfcfa;   /* Side-baggrund */
  --white:         #ffffff;

  /* Tekst */
  --text-dark:     #1a1a2e;   /* Overskrifter, primær tekst */
  --text-mid:      #4a5568;   /* Brødtekst */
  --text-light:    #718096;   /* Labels, hints, meta */
  --text-xlight:   #a0aec0;   /* Placeholders, disabled */

  /* Kanter & skygger */
  --border:        #e2ddd5;
  --border-focus:  var(--teal);
  --shadow-xs:     0 1px 4px rgba(15,35,64,0.06);
  --shadow-sm:     0 2px 12px rgba(15,35,64,0.08);
  --shadow-md:     0 8px 32px rgba(15,35,64,0.12);
  --shadow-lg:     0 20px 60px rgba(15,35,64,0.16);
  --shadow-xl:     0 32px 80px rgba(15,35,64,0.22);

  /* Semantiske farver */
  --success:       #0d9e8a;
  --success-bg:    rgba(13,158,138,0.10);
  --warning:       #d97706;
  --warning-bg:    rgba(217,119,6,0.10);
  --danger:        #e53e3e;
  --danger-bg:     rgba(229,62,62,0.08);

  /* Typografi */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  --text-xs:       0.72rem;    /* 11.5px — labels, fine print */
  --text-sm:       0.82rem;    /* 13px   — hints, meta */
  --text-base:     0.95rem;    /* 15px   — brødtekst */
  --text-md:       1.05rem;    /* 17px   — større brødtekst */
  --text-lg:       1.2rem;     /* 19px   — ingress, intro */
  --text-xl:       1.5rem;     /* 24px   — h3 */
  --text-2xl:      1.8rem;     /* 29px   — h2 */
  --text-3xl:      2.2rem;     /* 35px   — h1 sektion */
  --text-hero:     clamp(2.4rem, 4.5vw, 3.6rem);  /* hero h1 */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-base:  1.6;
  --leading-loose: 1.75;

  --weight-light:  300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* Spacing */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Borders */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Max widths */
  --max-w-text:    680px;   /* Artikel-tekst */
  --max-w-content: 860px;   /* Centered content */
  --max-w-page:    1120px;  /* Standard side */
  --max-w-wide:    1320px;  /* Wide layouts */

  /* Transitions */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.2s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.4,0,0.2,1);

  /* Header height (bruges til sticky offset) */
  --header-h: 68px;
}


/* ─────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text-dark);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--teal-light); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }


/* ─────────────────────────────────────────
   3. TYPOGRAFI
   ───────────────────────────────────────── */

/* Display / headlines — brug font-display */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--text-dark);
  font-weight: var(--weight-bold);
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-medium); }
h5 { font-size: var(--text-base); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* Section eyebrow tag */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: var(--space-3);
}

/* Ingress / lead text */
.lead {
  font-size: var(--text-lg);
  color: var(--text-mid);
  line-height: var(--leading-loose);
  max-width: var(--max-w-text);
}

/* Artikel-brødtekst — bruges i .prose-wrap */
.prose { max-width: var(--max-w-text); }
.prose h2 { font-size: var(--text-2xl); margin: var(--space-10) 0 var(--space-4); }
.prose h3 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); }
.prose p  { font-size: var(--text-md); color: var(--text-mid); line-height: var(--leading-loose); margin-bottom: var(--space-6); }
.prose ul { margin: 0 0 var(--space-6) var(--space-6); list-style: disc; }
.prose ol { margin: 0 0 var(--space-6) var(--space-6); list-style: decimal; }
.prose li { font-size: var(--text-md); color: var(--text-mid); margin-bottom: var(--space-2); line-height: var(--leading-loose); }
.prose a  { color: var(--teal); border-bottom: 1px solid var(--teal-border); }
.prose a:hover { border-color: var(--teal); }
.prose strong { color: var(--text-dark); font-weight: var(--weight-bold); }
.prose blockquote {
  border-left: 3px solid var(--teal);
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  background: var(--teal-pale);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--text-mid);
}
.prose hr { border: none; border-top: 1.5px solid var(--border); margin: var(--space-10) 0; }


/* ─────────────────────────────────────────
   4. LAYOUT UTILITIES
   ───────────────────────────────────────── */
.container        { max-width: var(--max-w-page);    margin: 0 auto; padding: 0 var(--space-8); }
.container--text  { max-width: var(--max-w-text);    margin: 0 auto; padding: 0 var(--space-8); }
.container--wide  { max-width: var(--max-w-wide);    margin: 0 auto; padding: 0 var(--space-8); }

.section          { padding: var(--space-20) var(--space-8); }
.section--sm      { padding: var(--space-12) var(--space-8); }
.section--lg      { padding: calc(var(--space-20) * 1.4) var(--space-8); }
.section--cream   { background: var(--cream); }
.section--navy    { background: var(--navy); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }


/* ─────────────────────────────────────────
   5. KNAPPER
   ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-medium);
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition-base); text-decoration: none;
  white-space: nowrap; line-height: 1;
}
.btn--sm   { padding: 0.5rem 1rem;   font-size: var(--text-sm); }
.btn--md   { padding: 0.75rem 1.5rem; font-size: var(--text-base); }
.btn--lg   { padding: 1rem 2rem;     font-size: var(--text-md); }
.btn--xl   { padding: 1.1rem 2.5rem; font-size: 1.05rem; }
.btn--full { width: 100%; }

/* Primær — Teal */
.btn--primary {
  background: var(--teal); color: var(--white);
  box-shadow: 0 4px 20px rgba(13,158,138,0.35);
}
.btn--primary:hover { background: var(--teal-light); transform: translateY(-1px); color: var(--white); box-shadow: 0 6px 24px rgba(13,158,138,0.45); }
.btn--primary:active { transform: translateY(0); }

/* Sekundær — Navy */
.btn--navy {
  background: var(--navy); color: var(--white);
}
.btn--navy:hover { background: var(--navy-light); color: var(--white); }

/* Outline — Navy */
.btn--outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--border);
}
.btn--outline:hover { border-color: var(--navy); color: var(--navy); }

/* Ghost — hvid (på mørk baggrund) */
.btn--ghost {
  background: transparent; color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }

/* Hvid (på teal/farvet baggrund) */
.btn--white {
  background: var(--white); color: var(--teal);
  box-shadow: var(--shadow-sm);
}
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--teal-light); }


/* ─────────────────────────────────────────
   6. BADGES & TAGS
   ───────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.badge--teal    { background: var(--teal-pale);   color: var(--teal); border: 1px solid var(--teal-border); }
.badge--navy    { background: rgba(15,35,64,0.07); color: var(--navy); }
.badge--danger  { background: var(--danger-bg);   color: var(--danger); }
.badge--warning { background: var(--warning-bg);  color: var(--warning); }
.badge--neutral { background: rgba(0,0,0,0.05);   color: var(--text-mid); }

/* Hero label chip */
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(13,158,138,0.15); border: 1px solid rgba(13,158,138,0.3);
  color: var(--teal-light); padding: 0.3rem 0.9rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em;
}


/* ─────────────────────────────────────────
   7. CARDS
   ───────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card--navy { background: var(--navy); border-color: transparent; }
.card--cream { background: var(--cream); border-color: transparent; }

/* Stat / KPI card */
.stat-card { text-align: center; }
.stat-card__val {
  font-family: var(--font-display);
  font-size: var(--text-3xl); font-weight: var(--weight-bold);
  color: var(--navy); line-height: 1;
}
.stat-card__val--teal { color: var(--teal); }
.stat-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-top: var(--space-2); }
.stat-card__sub   { font-size: var(--text-xs); color: var(--text-xlight); margin-top: var(--space-1); }

/* Article / blog card */
.article-card { overflow: hidden; }
.article-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--cream); }
.article-card__body { padding: var(--space-5); }
.article-card__tag { font-size: var(--text-xs); color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.article-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--navy); margin-bottom: var(--space-3); line-height: var(--leading-snug); }
.article-card__excerpt { font-size: var(--text-sm); color: var(--text-mid); line-height: var(--leading-base); }
.article-card__meta { font-size: var(--text-xs); color: var(--text-light); margin-top: var(--space-4); }


/* ─────────────────────────────────────────
   8. FORMS
   ───────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-mid);
}
.field__wrap { position: relative; }
.field__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-dark); background: var(--warm-white);
  transition: var(--transition-fast); outline: none;
}
.field__input:focus { border-color: var(--teal); background: var(--white); }
.field__input::placeholder { color: var(--text-xlight); }
.field__unit {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm); color: var(--text-light); pointer-events: none;
}
.field__hint { font-size: var(--text-xs); color: var(--text-light); }


/* ─────────────────────────────────────────
   9. HEADER & NAV
   ───────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  height: var(--header-h);
  background: rgba(253,252,250,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--max-w-page); margin: 0 auto;
  padding: 0 var(--space-8); height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.site-logo {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: var(--weight-bold);
  color: var(--navy); text-decoration: none;
  display: flex; align-items: center; gap: var(--space-2);
  transition: var(--transition-fast);
}
.site-logo:hover { color: var(--navy-light); }
.site-logo__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0;
}
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__link {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-mid); text-decoration: none;
  transition: var(--transition-fast);
}
.site-nav__link:hover { color: var(--navy); }
.site-nav__link--active { color: var(--navy); }


/* ─────────────────────────────────────────
   10. FOOTER
   ───────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: var(--space-16) var(--space-8) var(--space-8);
}
.site-footer__grid {
  max-width: var(--max-w-page); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-10);
  margin-bottom: var(--space-12);
}
.site-footer__logo {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: var(--weight-bold);
  color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.site-footer__tagline { font-size: var(--text-sm); color: rgba(255,255,255,0.4); line-height: var(--leading-loose); }
.site-footer__col-title {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3); font-weight: 600;
  margin-bottom: var(--space-4);
}
.site-footer__link {
  display: block; font-size: var(--text-sm);
  color: rgba(255,255,255,0.55); text-decoration: none;
  margin-bottom: var(--space-3); transition: var(--transition-fast);
}
.site-footer__link:hover { color: var(--white); }
.site-footer__bottom {
  max-width: var(--max-w-page); margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: var(--space-6);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-6); flex-wrap: wrap;
}
.site-footer__copy      { font-size: var(--text-xs); color: rgba(255,255,255,0.3); }
.site-footer__disclaimer { font-size: var(--text-xs); color: rgba(255,255,255,0.2); line-height: 1.6; max-width: 560px; }


/* ─────────────────────────────────────────
   11. HERO
   ───────────────────────────────────────── */
.page-hero {
  background: var(--navy);
  padding: var(--space-20) var(--space-8) var(--space-16);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 60%; height: 100%;
  background: radial-gradient(ellipse at top right, rgba(13,158,138,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero__inner { max-width: var(--max-w-page); margin: 0 auto; position: relative; }
.page-hero__title { color: var(--white); font-size: var(--text-hero); margin-bottom: var(--space-5); }
.page-hero__title em { font-style: italic; color: var(--teal-light); }
.page-hero__sub { font-size: var(--text-md); color: rgba(255,255,255,0.65); max-width: 520px; line-height: var(--leading-loose); margin-bottom: var(--space-8); }

/* Artikel hero (narrowere, centreret) */
.article-hero { padding: var(--space-16) var(--space-8) var(--space-12); }
.article-hero__inner { max-width: var(--max-w-content); margin: 0 auto; }
.article-hero__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.article-hero__category { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-light); }
.article-hero__date { font-size: var(--text-xs); color: rgba(255,255,255,0.4); }
.article-hero__read-time { font-size: var(--text-xs); color: rgba(255,255,255,0.4); }
.article-hero__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.article-hero__title { color: var(--white); font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: var(--space-5); }
.article-hero__ingress { font-size: var(--text-lg); color: rgba(255,255,255,0.7); line-height: var(--leading-loose); max-width: var(--max-w-text); }


/* ─────────────────────────────────────────
   12. SECTIONS — GENANVENDELIGE MØNSTRE
   ───────────────────────────────────────── */

/* Section header */
.section-header { margin-bottom: var(--space-12); }
.section-header--center { text-align: center; }
.section-header--center .lead { margin-left: auto; margin-right: auto; }
.section-title { font-size: var(--text-3xl); color: var(--navy); margin-bottom: var(--space-4); }

/* Affiliate strip */
.affiliate-strip {
  background: linear-gradient(135deg, var(--teal-pale), rgba(15,35,64,0.04));
  border: 1px solid var(--teal-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.affiliate-strip__text { font-size: var(--text-base); color: var(--text-dark); }
.affiliate-strip__text strong { color: var(--navy); }
.affiliate-strip__btns { display: flex; gap: var(--space-3); flex-shrink: 0; }

/* Breakeven / info note */
.info-note {
  background: var(--teal-pale);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); color: var(--text-dark);
}
.info-note strong { color: var(--teal); }
.warning-note {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); color: var(--text-dark);
}

/* FAQ item */
.faq-item { background: var(--cream); border-radius: var(--radius-lg); padding: var(--space-6); }
.faq-item__q { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; color: var(--navy); margin-bottom: var(--space-3); }
.faq-item__a { font-size: var(--text-sm); color: var(--text-mid); line-height: var(--leading-loose); }


/* ─────────────────────────────────────────
   13. RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --space-8: 1.5rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
  h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .section { padding: var(--space-12) var(--space-6); }
  .page-hero { padding: var(--space-12) var(--space-6) var(--space-10); }
  .site-nav { gap: var(--space-4); }
  .site-nav__link { font-size: var(--text-xs); }
  .affiliate-strip { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  :root { --space-8: 1rem; }
  body { font-size: 0.9rem; }
  .container, .container--text, .container--wide { padding: 0 var(--space-4); }
  .btn--xl { padding: 0.9rem 1.75rem; font-size: var(--text-base); }
  .section { padding: var(--space-10) var(--space-4); }
}