/* DueDili brochure. Ripped from the duedili.com prod build (BTA.CPA prod branch, b5f1e83), content as of September 28, 2026.
   Fonts: Fraunces, Hanken Grotesk, Spline Sans Mono (SIL Open Font License, see /assets/fonts/*-OFL.txt),
   self-hosted from Fontsource 5.3.0. No external requests. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/fraunces-latin-opsz-normal.7234ed86.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/hanken-grotesk-latin-400-normal.787b3fdd.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/assets/fonts/hanken-grotesk-latin-500-normal.31f666af.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/assets/fonts/hanken-grotesk-latin-600-normal.58f23b7a.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/assets/fonts/hanken-grotesk-latin-700-normal.d85de6e2.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/spline-sans-mono-latin-400-normal.af7360e1.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/assets/fonts/spline-sans-mono-latin-500-normal.9179bba9.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root { --font-fraunces: 'Fraunces'; --font-hanken: 'Hanken Grotesk'; --font-spline: 'Spline Sans Mono'; }

/* ── From src/app/globals.css, only the rules these pages use ─────── */
/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --paper:     #F3EEE3;
  --paper-2:   #FBF8F1;
  --card:      #FFFFFF;

  --ink:       #1C1A14;
  --ink-soft:  #544E42;
  --ink-faint: #8C8676;

  --line:      #E5DCCB;
  --line-soft: #EFE8D9;

  --forest:    #163E2C;
  --forest-2:  #0D2A1D;
  --forest-3:  #0A2016;

  --green:     #1C4E37;
  --green-700: #163D2B;
  --green-100: #E3EBE3;

  --gold:      #B0883A;
  --gold-2:    #C9A24A;
  --gold-soft: #EFE3C0;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hanken, 'Hanken Grotesk'), ui-sans-serif, system-ui, sans-serif;
  font-size: 19.8px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Layout ────────────────────────────────────────────────────── */
.shell     { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.band      { padding: 64px 16px; }
.band.tight { padding: 46px 16px; }

/* ── Typography ────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-spline, 'Spline Sans Mono'), monospace;
  font-size: 17.6px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}
.eyebrow-green { color: var(--green); }
.eyebrow-gold  { color: var(--gold); }
.eyebrow-cream { color: rgba(243,238,227,.72); }

.page-h {
  font-family: var(--font-fraunces, 'Fraunces'), serif;
  font-weight: 600;
  font-size: clamp(41.8px, 4.6vw, 61.6px);
  letter-spacing: -.018em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.section-h {
  font-family: var(--font-fraunces, 'Fraunces'), serif;
  font-weight: 600;
  font-size: 40.7px;
  letter-spacing: -.012em;
  margin: 8px 0 0;
}
.page-sub {
  color: var(--ink-soft);
  font-size: 22.6px;
  max-width: 680px;
  margin: 0;
  line-height: 1.55;
}

/* ── Brand ─────────────────────────────────────────────────────── */
.brand-logo {
  display: block;
  width: auto;
  height: 30px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--green); color: #F8F5EC;
  border: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 18.2px;
  padding: 14px 24px; border-radius: 12px;
  box-shadow: 0 8px 22px -12px rgba(22,61,43,.7);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn-primary:hover:not(:disabled) { background: var(--green-700); }
.btn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; }
.btn-primary-sm { padding: 11px 18px !important; font-size: 16.5px !important; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1.5px solid var(--green);
  color: var(--green); cursor: pointer;
  font: inherit; font-weight: 600; font-size: 17.1px;
  padding: 12px 20px; border-radius: 12px;
  text-decoration: none;
  transition: background .15s;
}
.btn-outline:hover { background: var(--green-100); }

/* ── Nav ───────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(243, 238, 227, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  height: 96px; max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
.nav-brand {
  display: flex; align-items: baseline; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: none;
}

.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-link {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 19.8px; color: var(--ink-soft);
  padding: 9px 14px; border-radius: 9px; font-weight: 500;
  text-decoration: none;
  transition: color .12s, background .12s;
}
.nav-link:hover { color: var(--ink); background: var(--line-soft); }
.nav-link-active { color: var(--green); font-weight: 600; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
  padding: 74px 16px 68px;
  max-width: 1280px;
  margin: 0 auto;
}
.hero-h {
  font-family: var(--font-fraunces, 'Fraunces'), serif;
  font-weight: 600;
  font-size: clamp(46.2px, 5.2vw, 72.6px);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 16px 0 22px;
}
.hero-sub {
  max-width: 500px;
  color: var(--ink-soft);
  font-size: 23.1px;
  line-height: 1.6;
  margin: 0 0 30px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-stats {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; font-size: 20.9px; color: var(--ink-soft);
}
.hero-stats strong {
  font-family: var(--font-fraunces, 'Fraunces'), serif;
  font-size: 24.2px; font-weight: 700; color: var(--ink);
}
.hero-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.hero-orbital {
  height: 400px;
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-3) 100%);
  border-radius: 22px;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 30px 60px -28px rgba(13,42,29,.7);
}
.hv-card {
  position: relative; z-index: 2; width: 78%;
  background: rgba(243,238,227,.07); backdrop-filter: blur(4px);
  border: 1px solid rgba(201,162,74,.3); border-radius: 16px;
  padding: 24px; color: #F3EEE3;
}
.hv-title {
  font-family: var(--font-fraunces, 'Fraunces'), serif;
  font-size: 29.7px; font-weight: 600;
  margin: 0 0 9px; color: #F3EEE3;
}
.hv-desc { font-size: 17.6px; color: rgba(243,238,227,.74); margin: 0 0 14px; }
.hv-meta { display: flex; gap: 16px; font-size: 16px; color: rgba(243,238,227,.62); }
@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-orbital { height: 320px; }
}

/* ── Trust band ─────────────────────────────────────────────────── */
.home-trust { background: var(--forest); color: #F3EEE3; }
.home-trust-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 26px 16px; flex-wrap: nowrap;
  max-width: 1280px; margin: 0 auto;
}
.home-trust-item { display: flex; flex-direction: column; }
.home-trust-n { font-family: var(--font-fraunces, 'Fraunces'), serif; font-weight: 600; font-size: 27px; color: #F3EEE3; }
.home-trust-l { font-size: 15px; white-space: nowrap; color: rgba(243,238,227,.64); }

/* ── Home sections ──────────────────────────────────────────────── */
.home-band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 30px; }

.home-vp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.home-vp {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px;
  box-shadow: 0 1px 2px rgba(28,26,20,.03);
}
.home-vp-ico {
  width: 50px; height: 50px; border-radius: 13px;
  background: var(--green-100); color: var(--green);
  display: grid; place-items: center; margin-bottom: 17px;
}
.home-vp h3 { font-family: var(--font-fraunces, 'Fraunces'), serif; font-weight: 600; font-size: 25.3px; margin: 0 0 8px; }
.home-vp p { color: var(--ink-soft); font-size: 19.8px; margin: 0; }

/* ── Showcase ── */
.home-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 22px; padding: 38px;
}
.home-sc-list { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.home-sc-item { display: flex; gap: 14px; }
.home-sc-num {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--green-100); color: var(--green);
  font-family: var(--font-spline, 'Spline Sans Mono'), monospace;
  font-weight: 700; font-size: 16.5px; display: grid; place-items: center;
}
.home-sc-item h4 { margin: 3px 0 4px; font-size: 19.2px; font-weight: 600; }
.home-sc-item p  { margin: 0; color: var(--ink-soft); font-size: 17.6px; }
.home-sc-mock { background: linear-gradient(150deg, var(--forest), var(--forest-3)); border-radius: 16px; padding: 24px; color: #F3EEE3; }
.home-sc-vid  { aspect-ratio: 16/9; border-radius: 11px; background: rgba(243,238,227,.08); display: grid; place-items: center; margin-bottom: 15px; }
.home-sc-ln   { height: 10px; border-radius: 99px; background: rgba(243,238,227,.14); margin-bottom: 10px; }
.home-sc-file { display: flex; align-items: center; gap: 10px; background: rgba(243,238,227,.06); border: 1px solid rgba(243,238,227,.12); border-radius: 9px; padding: 10px 12px; margin-top: 10px; font-size: 16.5px; color: rgba(243,238,227,.85); }

/* ── CTA band ── */
.home-cta-band { background: linear-gradient(150deg, var(--forest), var(--forest-3)); color: #F3EEE3; border-radius: 24px; padding: 58px; text-align: center; position: relative; overflow: hidden; }
.home-cta-band h2 { font-family: var(--font-fraunces, 'Fraunces'), serif; font-weight: 600; font-size: clamp(33px,3.8vw,46.2px); margin: 0 0 14px; letter-spacing: -.01em; position: relative; z-index: 2; }
.home-cta-band p  { color: rgba(243,238,227,.8); font-size: 19.8px; margin: 0 auto 28px; max-width: 500px; position: relative; z-index: 2; }
.btn-cream-home { display: inline-flex; align-items: center; gap: 8px; background: #F4EFE3; color: var(--green); border: none; font: inherit; font-weight: 600; font-size: 17.1px; padding: 12px 20px; border-radius: 11px; cursor: pointer; text-decoration: none; position: relative; z-index: 2; transition: background .15s; }
.btn-cream-home:hover { background: #fff; }

/* ── Category card ──────────────────────────────────────────────── */
.cat-card {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: 20px; padding: 20px; aspect-ratio: 16 / 9; min-height: min-content;
  display: flex; flex-direction: column;
  background: linear-gradient(150deg, var(--forest), var(--forest-3));
  color: #F3EEE3; text-align: left;
  box-shadow: 0 18px 40px -24px rgba(13,42,29,.8), inset 0 0 0 1px rgba(243,238,227,.14);
  transition: box-shadow .2s; text-decoration: none;
}
.cat-card:hover { box-shadow: 0 26px 50px -22px rgba(13,42,29,.9), inset 0 0 0 1px rgba(243,238,227,.14); }
.cat-motif { position: absolute; right: -30px; top: -20px; opacity: .5; pointer-events: none; }
.cat-card .name { font-family: var(--font-fraunces, 'Fraunces'), serif; font-weight: 600; font-size: 26px; line-height: 1.15; margin: 0 0 6px; position: relative; z-index: 2; flex-shrink: 0; }
.cat-card .desc { color: rgba(243,238,227,.76); font-size: 16.5px; line-height: 1.4; margin: 0 0 auto; position: relative; z-index: 2; max-width: 82%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card .tags { display: flex; flex-wrap: wrap; gap: 6px; -webkit-line-clamp: unset; flex-shrink: 0; overflow: visible; }
.cat-card .tag { display: inline-block; font-size: 13.5px; line-height: 1.4; padding: 2px 10px; border: 1px solid rgba(243,238,227,.32); border-radius: 99px; }
.cat-divider { display: flex; align-items: center; gap: 8px; margin: 10px 0; position: relative; z-index: 2; color: rgba(201,162,74,.7); }
.cat-divider-line { flex: 1; height: 1px; background: rgba(201,162,74,.4); }
.cat-foot { display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 2; }
.btn-cream-sm { display: inline-flex; align-items: center; gap: 8px; background: #F4EFE3; color: var(--green); border: none; font: inherit; font-weight: 600; font-size: 15.4px; padding: 10px 16px; border-radius: 11px; cursor: pointer; transition: background .15s; text-decoration: none; }
.btn-cream-sm:hover { background: #fff; }
@media (max-width: 620px) { .cat-card .name { font-size: 24px; } }
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 920px) { .cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }

/* ── Spectate banner ─────────────────────────────────────────────── */
.spectate { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, var(--green-100), var(--paper-2)); border: 1px solid #cfe0d2; border-radius: 14px; padding: 16px 20px; margin-bottom: 28px; }
.spectate-ico { width: 44px; height: 44px; border-radius: 11px; background: var(--green); color: #F3EEE3; display: grid; place-items: center; flex: none; }
.spectate-tx { flex: 1; }
.spectate-tx b { font-weight: 700; }
.spectate-tx p { margin: 3px 0 0; font-size: 19.2px; color: var(--ink-soft); }

/* ── Pricing ─────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; max-width: 780px; margin: 0 auto; padding-top: 14px; align-items: stretch; }
.price-grid[data-count="3"] { max-width: 1060px; }
.price-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(28,26,20,.03); transition: box-shadow 0.14s, border-color 0.14s; }
.price-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.price-card.featured { border-color: var(--gold); }
.price-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; background: var(--green); color: #F3EEE3; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.price-name { font-family: var(--font-spline, 'Spline Sans Mono'), monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.price-amt  { font-family: var(--font-fraunces, 'Fraunces'), serif; font-weight: 600; font-size: 33px; line-height: 1; margin: 0 0 5px; }
.price-cur  { font-size: 18px; vertical-align: super; }
.price-per  { font-family: var(--font-hanken, 'Hanken Grotesk'), sans-serif; font-size: 14px; font-weight: 500; color: var(--ink-faint); }
.price-blurb { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 13px; min-height: 36px; }
.price-perks { list-style: none; margin: 0 0 15px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.price-perks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); }
.price-perks li svg { margin-top: 2px; flex: none; color: var(--green); }
.price-cta { display: block; text-align: center; padding: 10px; border-radius: 9px; font-weight: 600; font-size: 13.5px; border: none; cursor: pointer; font-family: inherit; width: 100%; transition: background 0.14s, border-color 0.14s; }
.price-cta-fill { background: var(--green); color: #fff; }
.price-cta-fill:hover { background: var(--green-700); }
.price-cta-out { background: var(--card); color: var(--green); border: 1.5px solid var(--line); }
.price-cta-out:hover { border-color: var(--green); }
@media (max-width: 860px) { .price-grid[data-count="3"] { grid-template-columns: repeat(2,1fr); max-width: 780px; } }
@media (max-width: 620px) { .price-grid { grid-template-columns: 1fr !important; } }

/* ── Footer ────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--paper-2); margin-top: auto; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 36px 16px; max-width: 1280px; margin: 0 auto; }
.footer-note { color: var(--ink-soft); font-size: 18.7px; margin: 9px 0 0; max-width: 360px; }
.footer-fine { color: var(--ink-faint); font-size: 15.4px; margin: 0; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .home-trust-inner { flex-wrap: wrap; }
  .home-vp-grid { grid-template-columns: 1fr 1fr; }
  .home-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .home-vp-grid { grid-template-columns: 1fr; }
  .home-cta-band { padding: 40px 24px; }
}

/* ── Inline styles from the React components, moved here so the CSP needs no 'unsafe-inline' ── */
.x1 { height: 60px !important; }
.x2 { padding: 10px 18px !important; font-size: 16.5px !important; }
.x3 { position: absolute !important; pointer-events: none !important; }
.x4 { max-width: 520px !important; }
.x5 { margin-bottom: 9px !important; }
.x6 { font-family: var(--font-fraunces, Fraunces, serif) !important; font-size: 24px !important; line-height: 1.3 !important; }
.x7 { text-decoration: none !important; }
.x8 { margin-bottom: 6px !important; }
.x9 { width: 58px !important; height: 58px !important; border-radius: 50% !important; background: rgba(243, 238, 227, 0.92) !important; color: var(--green) !important; display: grid !important; place-items: center !important; }
.x10 { width: 60% !important; }
.x11 { margin: 0px auto !important; }
.x12 { display: inline-flex !important; }
.x13 { height: 26px !important; }
.x14 { margin-bottom: 30px !important; }
.x15 { margin-bottom: 28px !important; }
.x16 { text-decoration: none !important; background-color: var(--forest) !important; background-image: linear-gradient(150deg, rgba(13, 42, 29, 0.72), rgba(13, 42, 29, 0.82)), url("/assets/categories/charitable-lead-trust.27ecf840.jpg") !important; background-size: auto, contain !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; }
.x17 { display: flex !important; flex-direction: column !important; min-height: 100vh !important; }
.x18 { flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 32px 16px !important; }
.x19 { text-align: center !important; max-width: 680px !important; margin: 0px auto 28px !important; }
.x20 { flex: 1 1 0% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 80px 24px !important; }
.x21 { text-align: center !important; max-width: 560px !important; }
.x22 { margin-bottom: 20px !important; }
.x23 { margin: 0px auto 40px !important; text-align: center !important; }

/* ── Plan buttons are links now (no JavaScript); keep the button metrics ── */
a.price-cta { line-height: normal; text-decoration: none; }

/* ── Phone nav. Added for the brochure: the live nav runs off the right edge below about 680px ── */
@media (max-width: 720px) {
  .nav-inner { height: auto; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px 4px; }
  .nav .brand-logo { height: 36px !important; }
  .nav-right { gap: 8px; }
  .nav .btn-primary-sm, .nav .btn-outline { padding: 9px 14px !important; font-size: 15px !important; }
  .nav-links { order: 3; width: 100%; margin-left: -14px; }
  .nav-link { font-size: 17px; line-height: 24px; padding: 8px 14px; }
  .spectate { flex-wrap: wrap; }
}

/* Private preview line under the Get started and plan buttons. */
.preview-note { font-size: 16px; color: var(--ink-soft); margin: -18px 0 28px; }
.preview-note a { color: var(--green); }
.plans-note { font-size: 16px; color: var(--ink-soft); text-align: center; max-width: 680px; margin: 24px auto 0; }
.plans-note + .preview-note { text-align: center; margin: 10px auto 0; }