/* ══════════════════════════════════════════════════════════════════════════
   FOUNDRY — core design system
   Loaded by every layout (public, auth, dashboard) as the base layer.

   Two jobs:
   1. Define Foundry's own tokens + components (--fd-*, .fd-*) for native views.
   2. ALIAS the platform's existing token names (--bg, --card, --gold, --text …)
      onto Foundry's palette, so any view that falls back to the default theme
      still renders in the warm Foundry look instead of the stock dark gold one.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette tokens ──────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  /* Foundry-native */
  --fd-cream:   #fbf7f1;
  --fd-cream-2: #f3ece1;
  --fd-card:    #ffffff;
  --fd-ink:     #22302b;
  --fd-ink-2:   #5b6b64;
  --fd-ink-3:   #93a099;
  --fd-sage:    #4a7c62;
  --fd-sage-lt: #e4efe8;
  --fd-sage-dk: #2f5443;
  --fd-clay:    #c9663f;
  --fd-clay-lt: #fbeae2;
  --fd-line:    #e6ddd0;
  /* Deep green SURFACES that always carry white text. Separate from
     --fd-sage-dk, which is a foreground colour and therefore flips LIGHT in
     dark mode — using it as a panel background turned white text onto mint. */
  --fd-deep:    #2f5443;
  --fd-deep-2:  #24463a;
  --fd-sage-hover: #2f5443;
  /* Text placed ON a filled accent. In dark mode --fd-sage and --fd-clay are
     LIGHT, so white lettering on them drops to ~2.6:1 — every filled button,
     pill and badge was failing. Dark ink on the light accent restores it. */
  --fd-on-accent: #ffffff;
  --fd-r:       18px;
  --fd-r-sm:    12px;

  /* Platform aliases → Foundry (so fallback default-theme views stay on-brand) */
  --bg:        var(--fd-cream);
  --bg2:       var(--fd-cream-2);
  --sidebar:   var(--fd-card);
  --card:      var(--fd-card);
  --card2:     var(--fd-cream-2);
  --border:    var(--fd-line);
  --gold:      var(--fd-sage);      /* primary accent */
  --gold2:     var(--fd-sage-dk);
  --teal:      #3c8f77;             /* positive / secondary */
  --teal2:     #4aa88c;
  --red:       #c0533b;
  --green:     #4a7c62;
  --purple:    #8a6ea6;
  --blue:      #4f7a9e;
  --text:      var(--fd-ink);
  --text2:     var(--fd-ink-2);
  --text3:     var(--fd-ink-3);
  --nav-bg:    rgba(251,247,241,0.9);
  --glow-gold: 0 8px 30px rgba(74,124,98,0.12);
  --glow-teal: 0 8px 30px rgba(201,102,63,0.12);
  --shadow:    rgba(34,48,43,0.10);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --fd-cream:   #14100c;
  --fd-cream-2: #1c1712;
  --fd-card:    #221c16;
  --fd-ink:     #f3ede4;
  --fd-ink-2:   #b9ad9d;
  --fd-ink-3:   #9a8d7d;
  --fd-sage:    #6fae8c;
  --fd-sage-lt: #26332b;
  --fd-sage-dk: #8fc7a6;
  --fd-clay:    #e08a63;
  --fd-clay-lt: #33241c;
  --fd-line:    rgba(255,255,255,0.09);
  /* Stay dark here — these are surfaces, not text. */
  --fd-deep:    #1b3529;
  --fd-deep-2:  #14281f;
  --fd-sage-hover: #57997a;
  --fd-on-accent: #14231b;

  --bg:        var(--fd-cream);
  --bg2:       var(--fd-cream-2);
  --sidebar:   var(--fd-card);
  --card:      var(--fd-card);
  --card2:     var(--fd-cream-2);
  --border:    var(--fd-line);
  --gold:      var(--fd-sage);
  --gold2:     var(--fd-sage-dk);
  --teal:      #6cc0a3;
  --teal2:     #7fd0b3;
  --red:       #e77b5f;
  --green:     #6fae8c;
  --purple:    #b499d0;
  --blue:      #7ba6c8;
  --text:      var(--fd-ink);
  --text2:     var(--fd-ink-2);
  --text3:     var(--fd-ink-3);
  --nav-bg:    rgba(20,16,12,0.9);
  --glow-gold: 0 8px 30px rgba(0,0,0,0.4);
  --glow-teal: 0 8px 30px rgba(0,0,0,0.4);
  --shadow:    rgba(0,0,0,0.45);

  color-scheme: dark;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--fd-cream);
  color: var(--fd-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 700;
}
::selection { background: var(--fd-sage-lt); color: var(--fd-sage-dk); }

.fd-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Buttons (native .btn family, reskinned to Foundry) ──────────────────── */
.btn, .fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--fd-sage); color: var(--fd-on-accent);
  border: 2px solid var(--fd-sage); border-radius: 100px;
  padding: 13px 24px; font-size: 0.92rem; font-weight: 600;
  font-family: 'Inter', sans-serif; cursor: pointer; transition: .18s;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn:hover, .fd-btn:hover { background: var(--fd-sage-hover); border-color: var(--fd-sage-hover); color: #fff; transform: translateY(-2px); }
.btn-gold { background: var(--fd-sage); border-color: var(--fd-sage); color: var(--fd-on-accent); }
.btn-gold:hover { background: var(--fd-sage-hover); border-color: var(--fd-sage-hover); }
.btn-teal, .fd-btn.clay, .btn-clay { background: var(--fd-clay); border-color: var(--fd-clay); color: var(--fd-on-accent); }
.btn-teal:hover, .btn-clay:hover { background: #ad5432; border-color: #ad5432; }
.btn-ghost, .fd-btn.ghost {
  background: transparent; color: var(--fd-ink); border-color: var(--fd-line);
}
.btn-ghost:hover, .fd-btn.ghost:hover { background: var(--fd-card); border-color: var(--fd-ink); color: var(--fd-ink); }
.btn-sm { padding: 9px 16px; font-size: 0.82rem; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Forms (native class names) ──────────────────────────────────────────── */
.form-input, .form-select, .form-textarea,
select.form-input, textarea.form-input, input.form-input {
  width: 100%;
  background: var(--fd-cream);
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-r-sm);
  padding: 12px 15px;
  font-size: 0.92rem; color: var(--fd-ink);
  font-family: 'Inter', sans-serif; font-weight: 500;
  outline: none; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--fd-ink-3); font-weight: 400; }
.form-input:focus, .form-select:focus, .form-textarea:focus,
select.form-input:focus, textarea.form-input:focus {
  border-color: var(--fd-sage); box-shadow: 0 0 0 3px rgba(74,124,98,.12);
}
.form-select, select.form-input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2393a099' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px;
  padding-right: 40px; cursor: pointer;
}
.form-textarea, textarea.form-input { min-height: 120px; resize: vertical; line-height: 1.6; }
.form-label, .fd-label {
  display: block; font-size: 0.8rem; color: var(--fd-ink-2);
  margin-bottom: 7px; font-weight: 600;
}
label { color: var(--fd-ink-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fd-sage); }

/* ── Flash / alerts / notices (native class names) ───────────────────────── */
.alert, .notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--fd-r-sm);
  font-size: 0.88rem; margin-bottom: 1rem; border: 1px solid var(--fd-line);
  background: var(--fd-card); color: var(--fd-ink-2); line-height: 1.55;
}
.alert-success, .notice-success { background: var(--fd-sage-lt); border-color: #bcd9c8; color: var(--fd-sage-dk); }
.alert-error, .alert-danger, .notice-danger, .notice-red { background: #fbe7e1; border-color: #f0c4b5; color: #a24328; }
.alert-warning, .notice-warn { background: #fdf1dd; border-color: #f0dcae; color: #916a1f; }
.alert-info, .notice-info { background: #e7eff5; border-color: #c4d7e6; color: #3c5a72; }
:root[data-theme="dark"] .alert-success, :root[data-theme="dark"] .notice-success { background: #23342a; border-color: #35543f; color: #8fc7a6; }
:root[data-theme="dark"] .alert-error, :root[data-theme="dark"] .alert-danger, :root[data-theme="dark"] .notice-danger { background: #35231c; border-color: #5a382c; color: #e08a63; }

/* ── Tags / badges (native) ──────────────────────────────────────────────── */
.tag, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 100px;
  background: var(--fd-cream-2); color: var(--fd-ink-2); border: 1px solid var(--fd-line);
}
.tag-gold, .badge-warning { background: #fdf1dd; color: #916a1f; border-color: #f0dcae; }
.tag-green, .badge-success { background: var(--fd-sage-lt); color: var(--fd-sage-dk); border-color: #bcd9c8; }
.tag-red, .badge-danger { background: #fbe7e1; color: #a24328; border-color: #f0c4b5; }
.tag-blue, .badge-info { background: #e7eff5; color: #3c5a72; border-color: #c4d7e6; }
.tag-teal { background: var(--fd-clay-lt); color: var(--fd-clay); border-color: #f0d5c6; }
.tag-muted, .badge-muted { background: var(--fd-cream-2); color: var(--fd-ink-3); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--fd-ink-3); }
.empty-state-icon { font-size: 2.4rem; opacity: .4; margin-bottom: .8rem; }
.empty-state-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--fd-ink); margin-bottom: .4rem; }
.empty-state-text { font-size: .9rem; max-width: 32em; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC SITE
   ══════════════════════════════════════════════════════════════════════════ */

/* Ticker */
/* The widget arrives asynchronously in an iframe. Without a reserved height
   the strip is 0px until it loads (a visible jump), and stays 0px forever if
   the script is blocked — which is the "goes off entirely" case. min-height
   holds the space open regardless. */
.tv-public-ticker {
  border-bottom: 1px solid var(--fd-line); background: var(--fd-card);
  min-height: 46px; overflow: hidden;
}
.tv-public-ticker iframe { display: block; }
@media (max-width: 600px) { .tv-public-ticker { min-height: 44px; } }

/* Nav */
#mainNav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg); backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 74px; max-width: 1400px; margin: 0 auto;
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
#mainNav.scrolled { border-color: var(--fd-line); box-shadow: 0 6px 24px rgba(34,48,43,.05); }
#mainNav .logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.28rem;
  letter-spacing: -.03em; color: var(--fd-ink);
}
#mainNav .logo-icon {
  width: 34px; height: 34px; border-radius: 11px; background: var(--fd-sage);
  display: grid; place-items: center; color: #fff; font-size: .95rem;
}
.nav-links { display: flex; gap: 26px; list-style: none; margin-left: 12px; }
.nav-links a { font-size: .92rem; font-weight: 500; color: var(--fd-ink-2); padding: 6px 0; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--fd-sage); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--fd-sage); border-radius: 2px;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Theme toggle pill */
/* Colour-mode switch. A bare pill reads as a generic on/off switch and nothing
   tells you what it toggles, so the knob carries the CURRENT mode as a glyph
   (sun in light, moon in dark) and the track shows the mode you'd switch to,
   faintly, on the opposite side. */
.theme-toggle {
  width: 46px; height: 26px; border-radius: 100px; border: 1px solid var(--fd-line);
  background-color: var(--fd-cream-2); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background-color .3s, border-color .3s; padding: 0;
}
/* The "other" mode, sitting on the track where the knob is about to travel. */
.theme-toggle::before {
  content: ''; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px;
  opacity: .42; transition: opacity .3s;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6b64'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}
.theme-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background-color: var(--fd-sage);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%23fff' stroke='none'/%3E%3Cpath d='M12 1.6v2.2M12 20.2v2.2M4.3 4.3l1.6 1.6M18.1 18.1l1.6 1.6M1.6 12h2.2M20.2 12h2.2M4.3 19.7l1.6-1.6M18.1 5.9l1.6-1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
  transition: transform .3s cubic-bezier(.4, 1.6, .6, 1), background-color .3s;
}
:root[data-theme="dark"] .theme-toggle::before {
  right: auto; left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9ad9d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%23b9ad9d' stroke='none'/%3E%3Cpath d='M12 1.6v2.2M12 20.2v2.2M4.3 4.3l1.6 1.6M18.1 18.1l1.6 1.6M1.6 12h2.2M20.2 12h2.2M4.3 19.7l1.6-1.6M18.1 5.9l1.6-1.6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-toggle::after {
  transform: translateX(20px); background-color: var(--fd-clay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  background-size: 12px;
}
.theme-toggle:active::after { width: 24px; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.hamburger span { width: 22px; height: 2px; background: var(--fd-ink); border-radius: 2px; transition: .25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Closed state must collapse to exactly 0. max-height:0 clips the CONTENT but
   padding and border still occupy space — 12 + 20 + 1 = 33px of white was
   showing as a band between the header and the hero. Pad and border belong to
   the open state only. */
.mobile-nav {
  display: none; flex-direction: column; gap: 2px; padding: 0 18px;
  background: var(--fd-card); border-bottom: 0 solid var(--fd-line);
  position: sticky; top: 74px; z-index: 39;
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease, border-width .3s ease;
}
.mobile-nav.open { max-height: 520px; padding: 12px 18px 20px; border-bottom-width: 1px; }
.mobile-nav a { padding: 12px 10px; border-radius: 10px; color: var(--fd-ink-2); font-weight: 500; display: flex; align-items: center; gap: 12px; }
.mobile-nav a:hover { background: var(--fd-sage-lt); color: var(--fd-sage-dk); }
.mobile-nav a i { width: 20px; text-align: center; }
.mobile-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* Footer */
footer { border-top: 1px solid var(--fd-line); margin-top: 40px; background: var(--fd-cream-2); }
.footer-top {
  max-width: 1200px; margin: 0 auto; padding: 54px 24px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand .logo { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.24rem; color: var(--fd-ink); }
.footer-brand .logo-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--fd-sage); display: grid; place-items: center; color: #fff; }
.footer-desc { color: var(--fd-ink-2); font-size: .9rem; margin: 14px 0 16px; max-width: 26em; line-height: 1.7; }
.footer-socials { display: flex; gap: 10px; }
.social-btn {
  width: 38px; height: 38px; border-radius: 11px; background: var(--fd-card);
  border: 1px solid var(--fd-line); display: grid; place-items: center; color: var(--fd-ink-2); transition: .18s;
}
.social-btn:hover { background: var(--fd-sage); color: #fff; border-color: var(--fd-sage); transform: translateY(-2px); }
.footer-col h4 { font-size: .9rem; font-weight: 700; margin-bottom: 14px; color: var(--fd-ink); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--fd-ink-2); font-size: .87rem; }
.footer-col a:hover { color: var(--fd-sage); }
footer .divider { height: 1px; background: var(--fd-line); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding: 22px 24px 34px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: .78rem; color: var(--fd-ink-3);
}
.footer-badges { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-badges .fb { display: inline-flex; align-items: center; gap: 6px; }

#backToTop {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--fd-sage); color: #fff; font-size: 1.1rem;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s;
  box-shadow: 0 8px 24px rgba(74,124,98,.35);
}
#backToTop.visible { opacity: 1; visibility: visible; transform: none; }

/* ── Public building blocks (Foundry-native, .fd-*) ──────────────────────── */
.fd-section { padding: 76px 0; }
.fd-section.tight { padding: 40px 0; }
.fd-badge {
  display: inline-flex; align-items: center; gap: 9px; background: var(--fd-sage-lt);
  color: var(--fd-sage-dk); border-radius: 100px; padding: 8px 16px;
  font-size: .82rem; font-weight: 600; margin-bottom: 22px;
}
.fd-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fd-sage); }
.fd-h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); font-weight: 800; }
.fd-h1 mark { background: linear-gradient(180deg, transparent 62%, var(--fd-clay-lt) 62%); color: inherit; padding: 0 .06em; }
.fd-lede { font-size: 1.1rem; color: var(--fd-ink-2); max-width: 33em; margin-top: 20px; line-height: 1.75; }
.fd-sec-head { text-align: center; max-width: 40em; margin: 0 auto 44px; }
.fd-sec-head.left { text-align: left; margin-left: 0; }
.fd-h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 800; }
.fd-sec-sub { color: var(--fd-ink-2); margin-top: 13px; font-size: 1.02rem; }
.fd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fd-cta-row.hero { margin-top: 32px; }

.fd-card {
  background: var(--fd-card); border: 1px solid var(--fd-line);
  border-radius: var(--fd-r); padding: 26px; transition: .2s;
}
.fd-card.hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(34,48,43,.09); }

/* Hero */
.fd-hero { padding: 52px 0 68px; }
.fd-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.fd-hero-note { font-size: .85rem; color: var(--fd-ink-3); margin-top: 18px; }

/* Illustrated growth scene (pure CSS, no assets) */
.fd-scene { position: relative; aspect-ratio: 1 / .92; border-radius: 26px; overflow: hidden;
  background: linear-gradient(170deg, #dce9e0, #f0e6d8); border: 1px solid var(--fd-line); padding: 34px; }
:root[data-theme="dark"] .fd-scene { background: linear-gradient(170deg, #1e2a22, #2a231a); }
.fd-sun { position: absolute; top: 11%; right: 13%; width: 82px; height: 82px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #f7d8a8, #e9b374); }
.fd-scene .baseline { position: absolute; left: 9%; right: 9%; bottom: 20%; height: 2px; background: rgba(34,48,43,.14); }
.fd-bars { position: absolute; left: 9%; right: 9%; bottom: 20%; height: 52%; display: flex; align-items: flex-end; gap: 5%; }
.fd-bars i { flex: 1; border-radius: 7px 7px 0 0; display: block; }
.fd-bars i:nth-child(1) { height: 34%; background: #bcd4c2; }
.fd-bars i:nth-child(2) { height: 48%; background: #a8c6b1; }
.fd-bars i:nth-child(3) { height: 59%; background: #8fb59c; }
.fd-bars i:nth-child(4) { height: 73%; background: var(--fd-sage); }
.fd-bars i:nth-child(5) { height: 92%; background: var(--fd-clay); }
.fd-float { position: absolute; background: var(--fd-card); border-radius: 14px; padding: 13px 16px;
  box-shadow: 0 14px 34px rgba(34,48,43,.13); border: 1px solid var(--fd-line); }
.fd-float.tl { top: 8%; left: 5%; } .fd-float.br { bottom: 6%; right: 5%; }
.fd-float b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.16rem; font-weight: 700; }
.fd-float span { font-size: .72rem; color: var(--fd-ink-3); }
.fd-float .up { color: var(--fd-sage); }

/* Trust strip */
.fd-trust { background: var(--fd-cream-2); border-top: 1px solid var(--fd-line); border-bottom: 1px solid var(--fd-line); }
.fd-trust-row { max-width: 1160px; margin: 0 auto; padding: 26px 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: center; }
.fd-trust-row div b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.fd-trust-row div span { font-size: .8rem; color: var(--fd-ink-3); }

/* Steps */
.fd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fd-step { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: var(--fd-r); padding: 28px 24px; transition: .2s; }
.fd-step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(34,48,43,.09); }
.fd-step-n { width: 44px; height: 44px; border-radius: 13px; background: var(--fd-sage-lt); color: var(--fd-sage-dk);
  display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.14rem; margin-bottom: 17px; }
.fd-step:nth-child(2) .fd-step-n { background: var(--fd-clay-lt); color: var(--fd-clay); }
.fd-step h3 { font-size: 1.14rem; margin-bottom: 9px; }
.fd-step p { color: var(--fd-ink-2); font-size: .93rem; }

/* Plans ──────────────────────────────────────────────────────────────────
   Cards are equal height by construction: the grid stretches them, the card is
   a flex column, the spec table has a fixed five rows for every plan, and the
   CTA is pushed to the bottom with margin-top:auto. Nothing here depends on how
   much copy a particular plan happens to have. */
.fd-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.fd-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: var(--fd-r);
  padding: 26px 22px 22px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
@media (hover: hover) {
  .fd-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(34,48,43,.1); border-color: var(--fd-sage); }
}
/* The featured card is marked by colour and a tag, NOT by a thicker border —
   a 2px border made it a different size from its neighbours. */
.fd-plan.hot { border-color: var(--fd-sage); box-shadow: 0 0 0 3px var(--fd-sage-lt); }
.fd-plan-tag {
  position: absolute; top: -11px; left: 22px; background: var(--fd-sage); color: var(--fd-on-accent);
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px;
}

.fd-plan-head { display: flex; align-items: center; gap: 12px; }
.fd-plan-ico { width: 42px; height: 42px; border-radius: 13px; background: var(--fd-sage-lt); color: var(--fd-sage-dk); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; }
.fd-plan.hot .fd-plan-ico { background: var(--fd-sage); color: var(--fd-on-accent); }
.fd-plan-headings { display: flex; flex-direction: column; min-width: 0; }
.fd-plan-n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.14rem; font-weight: 700; letter-spacing: -.02em; }
.fd-plan-t { font-size: .78rem; color: var(--fd-ink-3); }

/* The rate used to render as "1.5%aday" — number and unit were jammed
   together. They are separate boxes now with real spacing. */
.fd-plan-rate { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.fd-plan-rate b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--fd-sage); letter-spacing: -.04em; line-height: 1; }
.fd-plan-rate span { font-size: .86rem; font-weight: 600; color: var(--fd-ink-3); }
.fd-plan-total { font-size: .82rem; color: var(--fd-ink-2); margin-top: 7px; }

.fd-plan-eg { background: var(--fd-cream-2); border-radius: 14px; padding: 13px 15px; margin-top: 18px; }
.fd-plan-eg-lab { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fd-ink-3); }
.fd-plan-eg-row { display: flex; gap: 14px; margin-top: 8px; }
.fd-plan-eg-row > span { display: flex; flex-direction: column; min-width: 0; }
.fd-plan-eg-row b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.04rem; font-weight: 700; white-space: nowrap; }
.fd-plan-eg-row em { font-style: normal; font-size: .68rem; color: var(--fd-ink-3); }

.fd-plan-specs { margin: 18px 0 20px; border-top: 1px solid var(--fd-line); }
.fd-plan-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fd-line); }
.fd-plan-specs dt { font-size: .8rem; color: var(--fd-ink-3); }
.fd-plan-specs dd { font-size: .84rem; font-weight: 600; text-align: right; }

.fd-plan-cta { margin-top: auto; width: 100%; }

/* Split (dark sage) */
.fd-split { background: var(--fd-deep); color: #fff; border-radius: 28px; padding: 52px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.fd-split h2 { color: #fff; }
.fd-split p { color: #c3d6cb; margin-top: 14px; font-size: 1.02rem; }
.fd-alloc { display: flex; flex-direction: column; gap: 11px; }
.fd-al { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 18px; }
.fd-al-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.fd-al-h b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.06rem; font-weight: 700; }
.fd-al-h em { font-style: normal; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.2rem; font-weight: 800; }
.fd-al p { font-size: .82rem; color: #a9c2b3; margin-top: 6px; line-height: 1.6; }
.fd-al-bar { height: 5px; background: rgba(255,255,255,.14); border-radius: 3px; margin-top: 11px; overflow: hidden; }
.fd-al-bar i { display: block; height: 100%; border-radius: 3px; background: #a8d8bb; }

/* FAQ accordion */
.fd-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
.fd-faq details { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 14px; padding: 19px 22px; }
.fd-faq details[open] { border-color: var(--fd-sage); }
.fd-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 1rem; color: var(--fd-ink); }
.fd-faq summary::-webkit-details-marker { display: none; }
.fd-faq summary::after { content: '+'; color: var(--fd-sage); font-size: 1.4rem; line-height: 1; font-weight: 400; }
.fd-faq details[open] summary::after { content: '−'; }
.fd-faq details p { color: var(--fd-ink-2); margin-top: 13px; font-size: .95rem; }
.fd-faq-cat { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.1rem; font-weight: 700; margin: 26px 0 10px; color: var(--fd-ink); }

/* Testimonials — real quote cards. These used to borrow .fd-steps, the
   numbered how-it-works grid, which is why they looked like empty step boxes. */
.fd-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.fd-quote { display: flex; flex-direction: column; background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: var(--fd-r); padding: 26px 24px; margin: 0; }
.fd-quote-stars { color: var(--fd-clay); font-size: .88rem; letter-spacing: .1em; margin-bottom: 14px; }
.fd-quote blockquote {
  font-size: 1rem; line-height: 1.7; color: var(--fd-ink); margin: 0 0 20px; flex: 1;
  quotes: 'C' 'D';
}
.fd-quote blockquote::before { content: open-quote; color: var(--fd-sage); font-family: 'Bricolage Grotesque', serif; font-size: 1.6rem; line-height: 0; vertical-align: -.25em; margin-right: 2px; }
.fd-quote blockquote::after { content: close-quote; color: var(--fd-sage); font-family: 'Bricolage Grotesque', serif; font-size: 1.6rem; line-height: 0; vertical-align: -.4em; margin-left: 1px; }
.fd-quote figcaption { display: flex; align-items: center; gap: 11px; padding-top: 16px; border-top: 1px solid var(--fd-line); }
.fd-quote-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--fd-sage-lt); color: var(--fd-sage-dk); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.fd-quote-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fd-quote-who b { font-size: .9rem; font-weight: 600; }
.fd-quote-who em { font-style: normal; font-size: .76rem; color: var(--fd-ink-3); }
.fd-quote-amt { display: flex; flex-direction: column; align-items: flex-end; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: .95rem; color: var(--fd-sage); white-space: nowrap; }
.fd-quote-amt small { font-family: 'Inter', sans-serif; font-size: .64rem; font-weight: 500; color: var(--fd-ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* CTA band */
.fd-cta { text-align: center; background: var(--fd-cream-2); border: 1px solid var(--fd-line); border-radius: 28px; padding: 66px 34px; }
.fd-cta h2 { max-width: 16em; margin: 0 auto 15px; }
.fd-cta p { color: var(--fd-ink-2); max-width: 34em; margin: 0 auto 28px; font-size: 1.03rem; }

/* Contact */
.fd-contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.fd-contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--fd-line); }
.fd-contact-item i { width: 42px; height: 42px; border-radius: 12px; background: var(--fd-sage-lt); color: var(--fd-sage-dk); display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; }
.fd-contact-item b { display: block; font-weight: 600; font-size: .95rem; }
.fd-contact-item span { font-size: .86rem; color: var(--fd-ink-2); }

.fd-risk { font-size: .78rem; color: var(--fd-ink-3); line-height: 1.75; max-width: 72em; margin: 0 auto; }

/* ── Section rhythm ──────────────────────────────────────────────────────
   Every section used to sit on the same cream, so the page read as one long
   scroll with no structure. An alternating surface plus a small eyebrow label
   gives each block a beginning. */
.fd-section-alt { background: var(--fd-cream-2); border-top: 1px solid var(--fd-line); border-bottom: 1px solid var(--fd-line); }
.fd-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fd-sage); margin-bottom: 12px;
}

/* Safeguards grid */
.fd-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fd-trust-card { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: var(--fd-r); padding: 26px 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.fd-trust-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--fd-sage-lt); color: var(--fd-sage-dk); display: grid; place-items: center; font-size: 1.1rem; margin-bottom: 15px; }
.fd-trust-ico.clay { background: var(--fd-clay-lt); color: var(--fd-clay); }
.fd-trust-ico.blue { background: #e8eef6; color: #3c5a80; }
:root[data-theme="dark"] .fd-trust-ico.blue { background: #1e2a38; color: #7ba6c8; }
.fd-trust-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.fd-trust-card p { color: var(--fd-ink-2); font-size: .9rem; }
@media (hover: hover) {
  .fd-trust-card:hover { transform: translateY(-4px); border-color: var(--fd-sage); box-shadow: 0 18px 40px rgba(34,48,43,.09); }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────
   Applied by foundry.js via IntersectionObserver. The no-js / no-observer
   path leaves content visible, so nothing depends on the script running. */
.fd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.fd-reveal.fd-in { opacity: 1; transform: none; }

/* ── Earnings calculator ─────────────────────────────────────────────────
   Two panels: controls on the left, the result on a dark sage slab so the
   number people came for is the highest-contrast thing on the page. */
.fd-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.fd-calc-controls { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 22px; padding: 26px; }
.fd-calc-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 24px; }
.fd-calc-tab {
  background: var(--fd-cream-2); border: 1px solid transparent; border-radius: 100px;
  padding: 9px 16px; font-family: inherit; font-size: .84rem; font-weight: 600;
  color: var(--fd-ink-2); cursor: pointer; transition: .15s; min-height: 40px;
}
.fd-calc-tab:hover { border-color: var(--fd-sage); color: var(--fd-ink); }
.fd-calc-tab.on { background: var(--fd-sage); border-color: var(--fd-sage); color: var(--fd-on-accent); }
.fd-calc-amount-lab { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fd-ink-3); }
.fd-calc-amount { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 4px 0 14px; }

/* Slider — styled in both engines so it does not fall back to the OS blue. */
.fd-calc-range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 34px; cursor: pointer; }
.fd-calc-range::-webkit-slider-runnable-track { height: 8px; border-radius: 5px; background: var(--fd-cream-2); border: 1px solid var(--fd-line); }
.fd-calc-range::-moz-range-track { height: 8px; border-radius: 5px; background: var(--fd-cream-2); border: 1px solid var(--fd-line); }
.fd-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px;
  border-radius: 50%; background: var(--fd-sage); border: 3px solid var(--fd-card);
  box-shadow: 0 3px 10px rgba(34,48,43,.28); transition: transform .12s;
}
.fd-calc-range::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--fd-sage);
  border: 3px solid var(--fd-card); box-shadow: 0 3px 10px rgba(34,48,43,.28);
}
.fd-calc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.fd-calc-range:focus-visible { outline: 2px solid var(--fd-sage); outline-offset: 4px; border-radius: 6px; }
.fd-calc-range-ends { display: flex; justify-content: space-between; font-size: .75rem; color: var(--fd-ink-3); margin-top: -2px; }
.fd-calc-note { font-size: .82rem; color: var(--fd-ink-2); margin-top: 16px; }

.fd-calc-out { background: var(--fd-deep); color: #fff; border-radius: 22px; padding: 26px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.fd-calc-out::after { content: ''; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.05); }
.fd-calc-big { position: relative; z-index: 1; }
.fd-calc-big span { font-size: .8rem; color: #b6cdc0; }
.fd-calc-big b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-top: 6px; }
.fd-calc-rows { margin: 22px 0; position: relative; z-index: 1; }
.fd-calc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.13); font-size: .88rem; }
.fd-calc-rows > div span { color: #b6cdc0; }
.fd-calc-rows > div b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.06rem; white-space: nowrap; }
.fd-calc-rows > div.total { border-bottom: 0; }
.fd-calc-rows > div.total b { color: #a8d8bb; font-size: 1.3rem; }
.fd-calc-cta { margin-top: auto; width: 100%; position: relative; z-index: 1; }
.fd-calc-disclaim { font-size: .7rem; color: #93ac9f; margin-top: 14px; line-height: 1.55; position: relative; z-index: 1; }

/* ── Comparison ─────────────────────────────────────────────────────────── */
.fd-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.fd-vs-col { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: var(--fd-r); padding: 26px 24px; height: 100%; }
.fd-vs-col.muted { background: var(--fd-cream-2); }
.fd-vs-head { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.06rem; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--fd-line); }
.fd-vs-col.muted .fd-vs-head { color: var(--fd-ink-3); }
.fd-vs-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fd-vs-col li { display: flex; gap: 11px; font-size: .92rem; color: var(--fd-ink-2); line-height: 1.5; }
.fd-vs-col li i { flex-shrink: 0; margin-top: 4px; font-size: .82rem; color: var(--fd-sage); }
.fd-vs-col.muted li i { color: var(--fd-ink-3); }
.fd-vs-sep span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fd-clay); color: var(--fd-on-accent); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: .84rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .fd-hero-grid, .fd-split, .fd-contact-grid { grid-template-columns: 1fr; gap: 36px; }

  /* Hero on one column: slot the graphic between the badge and the headline.
     The scene is a sibling of the TEXT COLUMN, not of the badge, so `order`
     alone cannot interleave them — they live in different formatting contexts.
     `display: contents` dissolves that unstyled wrapper so its children become
     direct flex items of .fd-hero-grid and can be ordered alongside the scene.
     The wrapper carries no styling and no semantics, so nothing is lost.
     Everything is scoped under .fd-hero-grid: .fd-hero is a different
     component on the dashboard and must not inherit any of this. */
  /* align-items must be reset: the desktop rule centres items, and on a column
     flexbox that shrinks each one to its content width. The scene has no
     in-flow children, so it collapsed to ~60px and the graphic vanished again. */
  .fd-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .fd-hero-grid > div:first-child { display: contents; }
  .fd-hero-grid .fd-badge     { order: 1; }
  .fd-hero-grid .fd-scene     { order: 2; margin: 20px 0 4px; aspect-ratio: 1 / .75; }
  .fd-hero-grid .fd-h1        { order: 3; }
  .fd-hero-grid .fd-lede      { order: 4; }
  .fd-hero-grid .fd-cta-row   { order: 5; }
  .fd-hero-grid .fd-hero-note { order: 6; }
  .fd-steps, .fd-plans, .fd-trust-grid, .fd-quotes { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .fd-split { padding: 38px 26px; }
  .fd-calc { grid-template-columns: 1fr; }
  .fd-vs { grid-template-columns: 1fr; gap: 14px; }
  .fd-vs-sep { display: flex; justify-content: center; }
}
@media (max-width: 600px) {
  .fd-wrap { padding: 0 18px; }
  .fd-steps, .fd-plans, .fd-trust-grid, .fd-quotes { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .nav-right .btn-ghost { display: none; }
  .fd-section { padding: 56px 0; }
  .fd-calc-controls, .fd-calc-out { padding: 20px 18px; border-radius: 18px; }
  .fd-calc-amount { font-size: 2.2rem; }
  .fd-calc-big b { font-size: 2.4rem; }
  .fd-calc-tab { flex: 1 1 calc(50% - 4px); }

  /* The trust strip used to wrap into a ragged 2-2-1 block. On a phone it now
     scrolls horizontally with snap points, so each figure gets its own beat. */
  .fd-trust-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 42%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    padding: 20px 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .fd-trust-row::-webkit-scrollbar { display: none; }
  .fd-trust-row div { scroll-snap-align: center; }
  .fd-trust-row div b { font-size: 1.35rem; }

  /* Hero. The scene has NO in-flow children — sun, baseline, bars and the
     floating cards are all absolutely positioned — so its height comes purely
     from aspect-ratio. An earlier `aspect-ratio:auto` override here collapsed
     it to 2px and the graphic vanished on phones. Keep the ratio; only trim
     the padding and the decoration sizes. */
  .fd-hero { padding: 28px 0 44px; }
  .fd-scene { aspect-ratio: 1 / .82; padding: 22px; }
  .fd-sun { width: 62px; height: 62px; top: 9%; right: 11%; }
  .fd-float { padding: 10px 13px; }
  .fd-float b { font-size: 1rem; }
  .fd-float span { font-size: .66rem; }
  .fd-h1 { font-size: clamp(2rem, 8.5vw, 2.7rem); }
  .fd-cta { padding: 44px 22px; border-radius: 22px; }
  /* Hero fold budget. On a 375x812 phone the ticker + nav already consume
     119px, so the hero has roughly 600px of usable height before the CTAs drop
     out of view. The graphic is the largest single item, so it is trimmed
     hardest; the rest comes from gaps and a side-by-side button row. */
  .fd-hero { padding: 20px 0 40px; }
  .fd-hero-grid .fd-badge   { margin-bottom: 14px; }
  .fd-hero-grid .fd-scene   { aspect-ratio: 1 / .6; margin: 14px 0 2px; padding: 18px; }
  .fd-hero-grid .fd-lede    { margin-top: 14px; font-size: 1.02rem; }
  .fd-hero-grid .fd-cta-row { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fd-hero-grid .fd-cta-row .btn { width: auto; }
  .fd-hero-grid .fd-hero-note { margin-top: 14px; }
  .btn-lg { padding: 14px 18px; font-size: .92rem; }
  /* Everything outside the hero keeps full-width stacked buttons. */
  .fd-cta-row .btn { width: 100%; justify-content: center; }
}

/* Touch feedback on public CTAs, matching the dashboard. */
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .fd-reveal { opacity: 1; transform: none; transition: none; }
}