/* =====================================================================
   ProdentHub — Refined design system
   Fibonacci-driven scale. Body 16px is the universal web anchor; every
   other size is a Fibonacci step (F5..F12: 5, 8, 13, 21, 34, 55, 89, 144).
   Consecutive steps are in the golden ratio φ ≈ 1.618.
   Token-first, mobile-first. One accent (brand vermillion #cf4520).
   Pair with Google Fonts: Bricolage Grotesque + Onest + JetBrains Mono.
   ===================================================================== */

:root {
  /* Surfaces */
  --bone:        #FAFAF7;
  --bone-2:      #F2F1ED;
  --bone-3:      #E8E6E0;
  --carbon:      #0E0E10;
  --carbon-2:    #1C1C1F;
  --carbon-3:    #27272A;

  /* Type */
  --mute:        #6E6E72;
  --mute-2:      #9C9C9F;
  --mute-3:      #C7C7C9;

  /* Lines */
  --line:        #E5E4DF;
  --line-strong: #C9C7C0;

  /* Brand vermillion (from logo) */
  --brand:       #cf4520;
  --brand-deep:  #A53618;
  --brand-tint:  #F5B299;
  --brand-soft:  rgba(207, 69, 32, 0.10);
  --brand-glow:  rgba(207, 69, 32, 0.22);
  --brand-faint: rgba(207, 69, 32, 0.04);

  /* Spacing scale — Fibonacci F5..F12, anchored at 8px (F6) */
  --s-1: 5px;     /* F5  · micro gap                              */
  --s-2: 8px;     /* F6  · xs gap, chip padding-y                 */
  --s-3: 13px;    /* F7  · sm gap, nav-actions, btn-small padding */
  --s-4: 21px;    /* F8  · base gap inside components             */
  --s-5: 34px;    /* F9  · md gap, container padding mobile       */
  --s-6: 55px;    /* F10 · card padding, container padding tablet */
  --s-7: 89px;    /* F11 · section padding, card padding desktop  */
  --s-8: 144px;   /* F12 · section desktop max, hero outer        */

  /* Type scale — Fibonacci, with 16px body as universal anchor.
     Above 16: F8 (21) → F9 (34) → F10 (55) → F11 (89).
     Below 16: F7 (13) for meta/UI labels only.            */
  --fs-meta:    13px;   /* F7  — eyebrow, kicker, section-label, tags, mono UI */
  --fs-body:    16px;   /* anchor */
  --fs-h4:      21px;   /* F8  — also brand wordmark, section-intro, lede max */
  --fs-h3:      34px;   /* F9  desktop (clamp 21–34) */
  --fs-h2:      55px;   /* F10 desktop (clamp 34–55) */
  --fs-h1:      89px;   /* F11 desktop (clamp 34–89) */

  --t-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-body:    'Onest', system-ui, -apple-system, sans-serif;
  --t-display: 'Bricolage Grotesque', 'Onest', system-ui, sans-serif;

  /* Radii — Fibonacci F5..F8 */
  --r-sm: 5px;     /* F5 */
  --r-md: 8px;     /* F6 */
  --r-lg: 13px;    /* F7 */
  --r-xl: 21px;    /* F8 */
  --r-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.05);
  --shadow-md: 0 6px 24px -8px rgba(14, 14, 16, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(14, 14, 16, 0.16);
  --shadow-brand: 0 10px 30px -8px var(--brand-glow);

  color-scheme: light;
}

/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--t-body);
  background: var(--bone);
  color: var(--carbon);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--brand); color: var(--bone); }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }

/* Subtle dotted backdrop (atmosphere, not noise) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(14,14,16,0.035) 1px, transparent 1px);
  background-size: 34px 34px;          /* F9 — was 32 */
  pointer-events: none;
  z-index: 0;
}
main, header, footer { position: relative; z-index: 1; }

/* ========== Layout ========== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}
@media (min-width: 768px) { .container { padding: 0 var(--s-7); } }

/* Section padding climbs the Fibonacci scale at each breakpoint:
   55 → 89 → 144 (φ-ratio between consecutive steps). */
.section { padding: var(--s-6) 0; }
@media (min-width: 768px) { .section { padding: var(--s-7) 0; } }
@media (min-width: 1024px) { .section { padding: var(--s-8) 0; } }

.section--tight { padding: var(--s-5) 0; }   /* F9 — 34px (was 48 → 55, now genuinely tighter) */
.section--dark { background: var(--carbon); color: var(--bone); }
.section--dark::before { display: none; }
.section--dark .mute, .section--dark .lede, .section--dark .section-intro { color: var(--mute-2); }

/* ========== Header / nav ========== */
.header {
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
  background: rgba(250, 250, 247, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.brand {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 28, "wght" 700;
  font-size: var(--fs-h4);            /* F8 — 21px */
  letter-spacing: -0.025em;
  color: var(--carbon);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);                    /* F6 — 8px */
}
.brand .brand-dot {
  color: var(--brand);
  display: inline-block;
  animation: brandDotPulse 4s ease-in-out infinite;
}
@keyframes brandDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.nav-primary {
  display: none;
  gap: var(--s-5);                    /* F9 — 34px */
  font-size: var(--fs-meta);          /* F7 — 13px (was 14) */
  font-weight: 500;
  letter-spacing: -0.01em;
}
@media (min-width: 900px) { .nav-primary { display: flex; } }
.nav-primary a {
  color: var(--mute);
  text-decoration: none;
  transition: color .15s;
  position: relative;
  padding: var(--s-1) 0;              /* F5 — 5px (was 4) */
}
.nav-primary a:hover { color: var(--carbon); }
.nav-primary a[aria-current="page"] { color: var(--carbon); }
.nav-primary a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--brand);
}

.nav-actions { display: flex; gap: var(--s-3); align-items: center; }
/* On mobile (<900px) the header collapses to brand + hamburger only.
   Sign in + primary CTA move into the .nav-mobile drawer.
   !important defends against page-specific overrides and stale browser cache. */
@media (max-width: 899px) {
  .nav-actions .btn { display: none !important; }
  .nav-actions .nav-toggle { display: inline-flex !important; }
}

/* Mobile menu toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;          /* F9 — was 40 */
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
}
.nav-toggle svg { width: 21px; height: 21px; stroke: var(--carbon); }  /* F8 — was 20 */
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) 0 var(--s-4);
  border-top: 1px solid var(--line);
  margin-top: var(--s-4);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: var(--fs-h4);            /* F8 — 21px (was 22) */
  color: var(--carbon);
  text-decoration: none;
  letter-spacing: -0.02em;
}
/* Primary CTA inside the drawer (carbon pill, visually a button) */
.nav-mobile .nav-mobile-cta {
  margin-top: var(--s-3);             /* F7 — 13px separation from nav links */
  background: var(--carbon);
  color: var(--bone);
  padding: var(--s-3) var(--s-4);     /* F7 13 / F8 21 — same as .btn */
  border-radius: var(--r-md);         /* F6 — 8px */
  font-family: var(--t-body);
  font-size: var(--fs-body);          /* anchor — 16px, same as .btn */
  font-variation-settings: normal;
  text-align: center;
  letter-spacing: -0.005em;
  transition: background .15s, color .15s;
}
.nav-mobile .nav-mobile-cta:hover { background: var(--brand); color: var(--bone); }
@media (min-width: 900px) { .nav-mobile, .nav-toggle { display: none !important; } }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);                    /* F6 — 8px */
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-body);          /* anchor — 16px (was 15) */
  letter-spacing: -0.005em;
  padding: var(--s-3) var(--s-4);     /* F7 13 / F8 21 (was 13 / 22) */
  text-decoration: none;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-small { padding: var(--s-2) var(--s-3); font-size: var(--fs-meta); border-radius: var(--r-sm); }

.btn-primary { background: var(--carbon); color: var(--bone); border-color: var(--carbon); position: relative; overflow: hidden; }
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand);
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-brand); border-color: var(--brand); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.btn-ghost { background: transparent; color: var(--carbon); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--carbon); }
.btn-ghost:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }

.btn-brand { background: var(--brand); color: var(--bone); border-color: var(--brand); }
.btn-brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); transform: translateY(-1px); }

.btn .arrow { font-family: var(--t-mono); font-size: var(--fs-meta); transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ========== Typography helpers ========== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);                    /* F6 — 8px (was 12) */
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 12) */
  font-weight: 500;
  color: var(--mute);
  padding: var(--s-2) var(--s-3);     /* F6 8 / F7 13 (was 6/12) */
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bone-2);
}
.eyebrow .dot-pulse {
  width: 5px; height: 5px;            /* F5 — was 6 */
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; box-shadow: 0 0 0 5px var(--brand-glow); }   /* F5 — was 4 */
}

.kicker {
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 11) */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: var(--s-3);                    /* F7 — 13px */
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 21px;                        /* F8 — was 24 */
  height: 1px;
  background: var(--brand);
}
.section--dark .kicker { color: var(--mute-2); }

h1, .h1 {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 96, "wght" 500;
  font-size: clamp(34px, 8vw, var(--fs-h1));  /* F9 → F11 (34 → 89, was 40 → 88) */
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--carbon);
  text-wrap: balance;
}
h1 .accent, .h1 .accent { color: var(--brand); }
h1 .highlight, .h1 .highlight {
  position: relative;
  display: inline-block;
}
h1 .highlight::after, .h1 .highlight::after {
  content: "";
  position: absolute;
  left: -0.04em; right: -0.04em; bottom: 5%;
  height: 30%;
  background: var(--brand-soft);
  z-index: -1;
  border-radius: 2px;
}

h2, .h2 {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 60, "wght" 500;
  font-size: clamp(var(--fs-h3), 5vw, var(--fs-h2));  /* F9 → F10 (34 → 55, was 32 → 56) */
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--carbon);
}
.section--dark h2, .section--dark .h2 { color: var(--bone); }

h3, .h3 {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: clamp(var(--fs-h4), 2.6vw, var(--fs-h3));  /* F8 → F9 (21 → 34, was 22 → 30) */
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--carbon);
}
.section--dark h3, .section--dark .h3 { color: var(--bone); }

h4 {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: var(--fs-h4);            /* F8 — 21px (was 18) */
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(var(--fs-body), 1.5vw, var(--fs-h4));  /* 16 → 21 (was 17 → 21) */
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--mute);
  max-width: 60ch;
  text-wrap: pretty;
}

.section-intro {
  font-size: var(--fs-h4);            /* F8 — 21px (was 18) */
  line-height: 1.55;
  color: var(--mute);
  max-width: 56ch;
}

.mono {
  font-family: var(--t-mono);
  font-feature-settings: "tnum", "lnum";
}

/* ========== Hero ========== */
/* Hero outer padding sits one step above .section at each breakpoint. */
.hero { padding: var(--s-6) 0 var(--s-7); }
@media (min-width: 768px) { .hero { padding: var(--s-7) 0 var(--s-8); } }
@media (min-width: 1024px) { .hero { padding: var(--s-7) 0 var(--s-8); } }

.hero h1 { max-width: 18ch; margin-bottom: var(--s-5); }
.hero .lede { margin-bottom: var(--s-6); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-5);
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 12) */
  color: var(--mute);
}
.assurance span { display: inline-flex; align-items: center; gap: var(--s-1); }
.assurance span::before { content: "·"; color: var(--brand); font-weight: 700; }

/* ========== Stats strip ========== */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-6) 0;
  background: var(--bone);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-7);
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 0 var(--s-7); } }
.stat { display: flex; flex-direction: column; gap: var(--s-1); }   /* F5 — 5px (was 6) */
.stat .num {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 60, "wght" 500;
  font-size: clamp(var(--fs-h3), 5vw, var(--fs-h2));  /* F9 → F10 (34 → 55, was 36 → 56) */
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--carbon);
  font-feature-settings: "tnum", "lnum";
}
.stat .label {
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 11) */
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ========== Cards ========== */
/* Card padding climbs one Fibonacci step at the tablet+ breakpoint.
   Card padding sits one step below section padding (φ rhythm). */
.card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-5);                /* F9 — 34px (was 32) */
  display: flex;
  flex-direction: column;
  gap: var(--s-4);                    /* F8 — 21px (was 16) */
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
}
@media (min-width: 768px) { .card { padding: var(--s-6); } }  /* F10 — 55 (was 48) */
.card:hover { transform: translateY(-2px); border-color: var(--carbon-3); box-shadow: var(--shadow-md); }

.card--dark { background: var(--carbon); border-color: var(--carbon); color: var(--bone); }
.card--dark:hover { box-shadow: 0 16px 40px -16px rgba(14,14,16,0.4); }
.card--dark h3 { color: var(--bone); }
.card--dark p, .card--dark .meta { color: var(--mute-2); }
.card--dark .tag { background: rgba(255,255,255,0.08); color: var(--brand-tint); }

.card--featured { border: 1px solid var(--brand); }
.card--featured::after {
  content: "Flagship";
  position: absolute;
  top: -13px;                          /* F7 — was -10 */
  left: var(--s-6);
  background: var(--brand);
  color: var(--bone);
  font-family: var(--t-mono);
  font-size: var(--fs-meta);           /* F7 — 13px (was 10) */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);      /* F5 5 / F7 13 (was 3/10) */
  border-radius: var(--r-sm);
}

.tag {
  font-family: var(--t-mono);
  font-size: var(--fs-meta);           /* F7 — 13px (was 11) */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);      /* F5 5 / F7 13 (was 4/10) */
  border-radius: var(--r-sm);
}

.card .price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);                    /* F6 — 8px */
  font-family: var(--t-display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-feature-settings: "tnum", "lnum";
}
.card .price .num { font-size: clamp(var(--fs-h4), 3vw, var(--fs-h3)); letter-spacing: -0.04em; }  /* F8 → F9 */
.card .price .unit { font-size: var(--fs-meta); color: var(--mute); font-family: var(--t-mono); }
.card--dark .price .unit { color: var(--mute-2); }

.card .arrow-link {
  margin-top: auto;
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-meta);          /* F7 — 13px (was 14) */
  color: var(--carbon);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);                    /* F6 — 8px */
  align-self: flex-start;
}
.card--dark .arrow-link { color: var(--bone); }
.card .arrow-link::after { content: "→"; font-family: var(--t-mono); transition: transform .2s; }
.card:hover .arrow-link::after { transform: translateX(5px); color: var(--brand); }   /* F5 — was 4 */
.card--dark:hover .arrow-link::after { color: var(--brand-tint); }

/* ========== Grid helpers ========== */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ========== Section label (small kicker on dark sections) ========== */
.section-label {
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 11) */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.section-label::before {
  content: "";
  width: 21px;                        /* F8 — was 24 */
  height: 1px;
  background: var(--brand);
}

/* ========== Honest block ========== */
.honest-callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  padding: var(--s-5);                /* F9 — 34px (was 32, matches .card mobile) */
  background: var(--brand-faint);
  border-radius: var(--r-md);
}
@media (min-width: 768px) { .honest-callout { padding: var(--s-6); } }  /* F10 — 55 (was 48) */
.honest-callout h3 { margin-bottom: var(--s-3); }
.honest-callout ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.honest-callout li { padding-left: var(--s-4); position: relative; color: var(--carbon); font-size: var(--fs-body); line-height: 1.5; }
.honest-callout li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--brand);
  font-family: var(--t-mono);
  font-weight: 700;
}

/* ========== Footer ========== */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--s-7) 0 var(--s-6);
  background: var(--bone);
  color: var(--carbon);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); } }

.footer h6 {
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 11) */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-4);
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }   /* F6 — 8px (was 10) */
.footer a {
  font-size: var(--fs-meta);          /* F7 — 13px (was 14) */
  color: var(--carbon);
  text-decoration: none;
  transition: color .15s;
}
.footer a:hover { color: var(--brand); }
.footer .footer-brand-line {
  font-size: var(--fs-meta);          /* F7 — 13px (was 14) */
  color: var(--mute);
  line-height: 1.6;
  max-width: 38ch;
  margin: var(--s-3) 0 var(--s-5);
}
.footer-social { display: flex; gap: var(--s-3); }
.footer-social a {
  width: 34px;                        /* F9 — was 36 */
  height: 34px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bone-2);
  border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.footer-social a:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

.footer-base {
  margin-top: var(--s-6);             /* F10 — 55 (was s-7 89) tighten the bottom strip */
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 11) */
  color: var(--mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ========== Decorative micro-elements ========== */
.hr-decoration {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-7) 0;
  font-family: var(--t-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.hr-decoration::before, .hr-decoration::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ========== Accordion (FAQ) ========== */
.accordion { border-top: 1px solid var(--line); }
.accordion details {
  border-bottom: 1px solid var(--line);
  padding: var(--s-5) 0;
}
.accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  font-family: var(--t-display);
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: var(--fs-h4);            /* F8 — 21px (was 18) */
  letter-spacing: -0.015em;
  padding-right: var(--s-4);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-family: var(--t-mono);
  font-weight: 500;
  color: var(--brand);
  transition: transform .2s;
  flex-shrink: 0;
  font-size: var(--fs-h4);            /* F8 — 21px (was 22) */
  line-height: 1;
}
.accordion details[open] summary::after { content: "−"; }
.accordion details > div {
  padding-top: var(--s-4);
  font-size: var(--fs-body);          /* anchor — 16px (was 15) */
  line-height: 1.6;
  color: var(--mute);
  max-width: 70ch;
}

/* ========== Compact tile grid (for tier comparison) ========== */
.tile {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);                /* F8 — 21px (was 34) tile is denser than card */
  text-decoration: none;
  color: var(--carbon);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);                    /* F5 — 5px (was 6) */
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--carbon-3); box-shadow: var(--shadow-sm); }
.tile .tile-tag {
  font-family: var(--t-mono);
  font-size: var(--fs-meta);          /* F7 — 13px (was 10) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.tile .tile-name {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: var(--fs-h4);            /* F8 — 21px (was 17) */
  letter-spacing: -0.015em;
}
.tile .tile-price {
  font-family: var(--t-display);
  font-variation-settings: "opsz" 36, "wght" 600;
  font-size: var(--fs-h4);            /* F8 — 21px (was 22) */
  letter-spacing: -0.03em;
  color: var(--carbon);
  font-feature-settings: "tnum", "lnum";
}
.tile .tile-meta {
  font-size: var(--fs-meta);          /* F7 — 13px (was 12) */
  color: var(--mute);
}

/* ========== Utilities ========== */
.text-center { text-align: center; }
.text-pretty { text-wrap: pretty; }
.text-balance { text-wrap: balance; }
.mute { color: var(--mute); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }

.translate-no { /* mark brand tokens that auto-translators should NOT mangle */ }