/* =========================================================
   Family Office Networks — Dev-Site (v3 · Network + Media)
   ========================================================= */

:root {
  --navy-900:  #0a1530;
  --navy-800:  #101f41;
  --navy-700:  #112349;
  --navy-600:  #1c2c5a;
  --royal-700: #1d3380;
  --royal-600: #254099;
  --royal-500: #4a64ba;
  --royal-400: #6f77ce;
  --royal-200: #a2a7e8;
  --royal-100: #dde1f6;
  --gold-600:  #b08d3f;
  --gold-500:  #c9a961;
  --gold-300:  #e6d39a;

  --ivory:  #f4efe6;
  --cream:  #ebe4d4;
  --paper:  #ffffff;
  --ink:    #0c1430;
  --ink-2:  #2b3554;
  --muted:  #6b7493;
  --line:   rgba(12, 20, 48, 0.10);
  --line-2: rgba(12, 20, 48, 0.18);

  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1260px;
  --container-narrow: 920px;
  --nav-h: 80px;
  --topbar-h: 36px;
  --radius: 4px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(12,20,48,.06), 0 1px 3px rgba(12,20,48,.08);
  --shadow-md: 0 8px 24px rgba(12,20,48,.10), 0 2px 6px rgba(12,20,48,.06);
  --shadow-lg: 0 24px 60px rgba(12,20,48,.18);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--topbar-h)); }
body {
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem); }
h2 { font-size: clamp(2rem, 2.4vw + 1rem, 3.1rem); }
h3 { font-size: clamp(1.4rem, 1vw + 1rem, 1.75rem); }
h4 { font-size: 1.2rem; }
.eyebrow {
  font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: .22em; font-size: .72rem; font-weight: 600;
  color: var(--royal-600);
}
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 60ch; }
p { color: var(--ink-2); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-head { max-width: 720px; margin: 0 0 2.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: .9rem; display: inline-block; }
.section-head h2 { margin-bottom: .9rem; }
.gold-rule { width: 56px; height: 2px; background: var(--gold-500); margin-bottom: 1.4rem; }
.section-head.center .gold-rule { margin-left: auto; margin-right: auto; }
.section-head-row {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 1.5rem; max-width: none; margin-bottom: 2.5rem;
}

.bg-ivory { background: var(--ivory); }
.bg-paper { background: var(--paper); }
.bg-cream { background: var(--cream); }
.bg-navy  { background: var(--navy-900); color: rgba(255,255,255,.86); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy p, .bg-navy .lead { color: rgba(255,255,255,.78); }
.bg-navy .eyebrow { color: var(--gold-300); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: .9rem; letter-spacing: .02em;
  transition: all .25s var(--ease);
  border: 1px solid transparent; line-height: 1; text-align: center; white-space: nowrap;
}
.btn-primary { background: var(--royal-600); color: #fff; }
.btn-primary:hover { background: var(--royal-700); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-800); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn-gold { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { border-color: var(--gold-300); color: var(--gold-300); }
.btn-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--gold-500); padding-bottom: .25rem;
  align-self: flex-start;
}
.btn-link:hover { color: var(--royal-600); }
.btn-link svg { transition: transform .25s var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* FON+ badge */
.fonplus-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .26rem .55rem; border-radius: 4px;
  background: var(--gold-500); color: var(--navy-900);
}
.fonplus-badge svg { width: 10px; height: 10px; }
.fonplus-badge.line { background: transparent; color: var(--gold-600); border: 1px solid var(--gold-500); }

/* Top bar */
.topbar { background: var(--royal-600); color: rgba(255,255,255,.86); font-size: .76rem; letter-spacing: .04em; }
.topbar-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 1.5rem; min-height: var(--topbar-h);
}
.topbar a { color: rgba(255,255,255,.86); }
.topbar a:hover { color: var(--royal-200); }
.topbar-meta, .topbar-right { display: flex; gap: 1.25rem; align-items: center; }

/* Nav */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900); border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.navbar.scrolled { box-shadow: var(--shadow-md); background: rgba(10, 21, 48, .98); backdrop-filter: blur(8px); }
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav-logo { display: inline-flex; align-items: center; line-height: 1; }
.nav-logo img { height: 50px; }
.nav-links { display: flex; gap: 1.85rem; align-items: center; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.85);
  letter-spacing: .04em; text-transform: uppercase; padding: .25rem 0; position: relative;
}
.nav-links > li > a:hover, .nav-links > li > a.active { color: #fff; }
.nav-links > li > a::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px;
  background: var(--gold-500); transition: width .25s var(--ease);
}
.nav-links > li > a:hover::after, .nav-links > li > a.active::after { width: 100%; }
.has-sub > a::before { content: "▾"; display: inline-block; margin-left: .35rem; font-size: .65em; opacity: .7; }
.nav-sub {
  position: absolute; left: -1rem; top: calc(100% + 12px); min-width: 220px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: .5rem; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .25s var(--ease);
}
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub li a {
  display: block; padding: .65rem .85rem; font-size: .85rem; color: var(--ink);
  border-radius: 6px; letter-spacing: .03em;
}
.nav-sub li a:hover { background: var(--ivory); color: var(--royal-600); }

.nav-cta { display: flex; gap: .75rem; align-items: center; }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.hamburger span { width: 22px; height: 2px; background: #fff; transition: .3s var(--ease); }
.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); }

@media (max-width: 1080px) {
  .nav-links, .nav-cta .btn:not(.mobile-keep) { display: none; }
  .hamburger { display: flex; }
  .topbar-meta span:not(.tb-keep) { display: none; }
  .topbar-right { gap: .85rem; }
}
.mobile-drawer {
  position: fixed; inset: 0; background: var(--paper); z-index: 99;
  transform: translateX(100%); transition: transform .35s var(--ease);
  padding: calc(var(--nav-h) + var(--topbar-h) + 1rem) 1.5rem 2rem; overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.mobile-drawer a.sub { padding-left: 1rem; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--muted); }
.mobile-drawer .btn { display: flex; margin-top: 1.5rem; }

/* =========================================================
   ANIMATED HERO (homepage intro)
   ========================================================= */
.anim-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h) - var(--topbar-h));
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(37,64,153,.28), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
  isolation: isolate;
}
.anim-hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.anim-hero .container {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.anim-hero .container > * { pointer-events: auto; }

.anim-hero .intro-eyebrow { color: var(--gold-300); }
.anim-hero h1 {
  font-size: clamp(2.6rem, 5.5vw + 1rem, 5.2rem);
  color: #fff;
  margin: 1.2rem 0 1.6rem;
  max-width: 18ch;
  line-height: 1.08;
}
.anim-hero h1 .h1-line {
  display: block;
  overflow: hidden;
}
.anim-hero h1 .rotating-word {
  display: inline-block;
  font-style: italic;
  color: var(--gold-300);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  min-width: 6ch;
}
.anim-hero h1 .rotating-word.swap {
  opacity: 0;
  transform: translateY(10px);
}
.anim-hero .hero-lead {
  font-size: clamp(1rem, .3vw + 1rem, 1.18rem);
  color: rgba(255,255,255,.82);
  max-width: 56ch;
  margin: 0 0 2rem;
}
.anim-hero .hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.anim-hero .hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.75rem;
  max-width: 620px;
}
.anim-hero .hero-stats .num {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  color: var(--gold-300);
  line-height: 1.05;
}
.anim-hero .hero-stats .lbl {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: .4rem;
}

.scroll-cue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  z-index: 1;
  pointer-events: none;
}
.scroll-cue svg {
  animation: cueBob 2.2s ease-in-out infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* Intro fade-in (staggered) */
.anim-hero .intro-eyebrow,
.anim-hero h1 .h1-line,
.anim-hero .hero-lead,
.anim-hero .hero-actions,
.anim-hero .hero-stats {
  opacity: 0;
  transform: translateY(22px);
  animation: introIn .85s cubic-bezier(.2,.7,.2,1) forwards;
}
.anim-hero .intro-eyebrow            { animation-delay: .12s; }
.anim-hero h1 .h1-line:nth-child(1)  { animation-delay: .30s; }
.anim-hero h1 .h1-line:nth-child(2)  { animation-delay: .48s; }
.anim-hero .hero-lead                { animation-delay: .80s; }
.anim-hero .hero-actions             { animation-delay: 1.00s; }
.anim-hero .hero-stats               { animation-delay: 1.20s; }
@keyframes introIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .anim-hero .intro-eyebrow,
  .anim-hero h1 .h1-line,
  .anim-hero .hero-lead,
  .anim-hero .hero-actions,
  .anim-hero .hero-stats {
    opacity: 1; transform: none; animation: none;
  }
  .scroll-cue svg { animation: none; }
}
@media (max-width: 600px) {
  .anim-hero .hero-stats { grid-template-columns: 1fr; gap: 1rem; }
  .scroll-cue { display: none; }
}

/* --- Magazine HOME --- */
.mag-hero { position: relative; overflow: hidden; background: var(--ivory); }
.mag-hero .container { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.mag-hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
@media (max-width: 960px) { .mag-hero-grid { grid-template-columns: 1fr; } }

.feature-story {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy-900); box-shadow: var(--shadow-lg); display: block;
  aspect-ratio: 4 / 3.1;
}
.feature-story .fs-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.feature-story:hover .fs-img { transform: scale(1.04); }
.feature-story::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,21,48,.05) 0%, rgba(10,21,48,.55) 55%, rgba(10,21,48,.92) 100%);
}
.feature-story .fs-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem); color: #fff; z-index: 1;
}
.feature-story .fs-meta {
  display: flex; gap: .85rem; align-items: center; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.feature-story .fs-meta .cat { color: var(--gold-300); }
.feature-story h2 {
  color: #fff; font-size: clamp(1.6rem, 2.5vw + .5rem, 2.6rem); line-height: 1.12;
  max-width: 28ch; margin-bottom: .8rem;
}
.feature-story p { color: rgba(255,255,255,.86); max-width: 60ch; font-size: 1rem; }
.feature-story .fs-byline { display: flex; align-items: center; gap: .55rem; margin-top: .85rem; font-size: .82rem; color: rgba(255,255,255,.7); }
.feature-story .fs-byline .avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-500); color: var(--navy-900); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: .9rem; }

.mag-rail { display: flex; flex-direction: column; gap: .9rem; }
.mag-rail .rail-eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); font-weight: 700; padding-bottom: .85rem;
  border-bottom: 1px solid var(--line-2);
}
.rail-item {
  display: grid; grid-template-columns: 1fr 96px; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px dashed var(--line); align-items: center;
}
.rail-item:last-child { border-bottom: 0; }
.rail-item .rail-meta { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--royal-600); font-weight: 700; margin-bottom: .35rem; }
.rail-item h4 { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.22; color: var(--ink); font-weight: 500; }
.rail-item img { width: 96px; height: 64px; border-radius: 6px; object-fit: cover; }

/* Category nav strip */
.cat-strip {
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cat-strip-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
  display: flex; gap: 1.85rem; align-items: center; white-space: nowrap;
}
.cat-strip a {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); transition: color .2s var(--ease);
}
.cat-strip a:hover, .cat-strip a.active { color: var(--royal-600); }

/* Article grid */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 960px) { .article-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  display: flex; flex-direction: column; background: var(--paper);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); transition: all .35s var(--ease);
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.article-card.fonplus { background: var(--cream); border-color: var(--gold-300); }
.article-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-700); }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.article-card:hover .article-thumb img { transform: scale(1.05); }
.article-thumb .badge-tl { position: absolute; top: .85rem; left: .85rem; display: inline-flex; gap: .35rem; }
.article-body { padding: 1.35rem 1.6rem 1.65rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.article-meta {
  display: flex; gap: .85rem; align-items: center;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.article-meta .cat { color: var(--royal-600); font-weight: 700; }
.article-card h3 { font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.article-card p { font-size: .92rem; flex: 1; }
.article-byline {
  display: flex; align-items: center; gap: .55rem; margin-top: .55rem;
  font-size: .82rem; color: var(--muted);
}
.article-byline .avatar-sm {
  width: 26px; height: 26px; border-radius: 50%; background: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: .85rem; color: var(--gold-600);
}

/* YouTube embed sections */
.yt-hero {
  background: var(--navy-900); color: #fff; position: relative; overflow: hidden;
}
.yt-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 80% 20%, rgba(176,141,63,.20), transparent 60%);
  pointer-events: none;
}
.yt-hero .container { position: relative; z-index: 1; }
.yt-hero-grid {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 960px) { .yt-hero-grid { grid-template-columns: 1fr; } }
.yt-embed-wrap {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--navy-800); box-shadow: var(--shadow-lg);
}
.yt-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-poster {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: filter .3s var(--ease);
}
.yt-poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,21,48,.1) 0%, rgba(10,21,48,.5) 100%);
}
.yt-poster:hover { filter: brightness(1.05); }
.yt-poster .play {
  width: 72px; height: 72px; border-radius: 50%; background: var(--gold-500);
  color: var(--navy-900); display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .25s var(--ease);
}
.yt-poster:hover .play { transform: scale(1.1); }
.yt-poster .play svg { width: 28px; height: 28px; margin-left: 4px; }

.yt-info h2 { color: #fff; margin: .6rem 0 1rem; }
.yt-info p { color: rgba(255,255,255,.82); margin-bottom: 1.5rem; max-width: 50ch; }
.yt-channel-row {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg); margin-bottom: 1.6rem;
}
.yt-channel-row .yt-icon {
  width: 44px; height: 44px; border-radius: 50%; background: #ff0033;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.yt-channel-row .yt-icon svg { width: 22px; height: 22px; }
.yt-channel-row .yt-name { font-weight: 600; color: #fff; }
.yt-channel-row .yt-handle { font-size: .82rem; color: rgba(255,255,255,.6); }
.yt-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Video grid */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 1100px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .video-grid { grid-template-columns: 1fr; } }
.video-card {
  background: var(--paper); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); transition: all .35s var(--ease); display: flex; flex-direction: column;
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-thumb-yt {
  position: relative; aspect-ratio: 16/9; background: #000;
  background-size: cover; background-position: center;
}
.video-thumb-yt::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4));
}
.video-thumb-yt .play-mini {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,0,51,.92); color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  transition: transform .25s var(--ease);
}
.video-card:hover .play-mini { transform: translate(-50%,-50%) scale(1.1); }
.video-thumb-yt .play-mini svg { width: 18px; height: 18px; margin-left: 3px; }
.video-thumb-yt .dur {
  position: absolute; bottom: .5rem; right: .5rem; z-index: 1;
  background: rgba(0,0,0,.78); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 3px;
}
.video-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.video-body .v-cat { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--royal-600); font-weight: 700; }
.video-body h4 { font-size: 1.05rem; line-height: 1.25; }
.video-body .v-meta { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

/* Categories tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .cat-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .cat-tiles { grid-template-columns: 1fr; } }
.cat-tile {
  background: var(--paper); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem;
  border: 1px solid var(--line); transition: all .3s var(--ease);
  display: flex; flex-direction: column; gap: .75rem; min-height: 180px;
  position: relative; overflow: hidden;
}
.cat-tile::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--gold-500); transition: width .4s var(--ease);
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.cat-tile:hover::before { width: 100%; }
.cat-tile .cat-ico { color: var(--royal-600); }
.cat-tile h3 { font-size: 1.25rem; }
.cat-tile .cat-meta { font-size: .76rem; color: var(--muted); margin-top: auto; letter-spacing: .04em; }

/* Persona / value cards (3-up) */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
@media (max-width: 960px) { .cards-3 { grid-template-columns: 1fr; } }
.persona-card {
  background: var(--paper); padding: 2.2rem 2rem; border-radius: var(--radius-lg);
  border: 1px solid var(--line); transition: all .35s var(--ease);
  display: flex; flex-direction: column; gap: 1rem; min-height: 300px;
  position: relative; overflow: hidden;
}
.persona-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--gold-500); transition: width .4s var(--ease);
}
.persona-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.persona-card:hover::before { width: 100%; }
.persona-card .ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ivory); color: var(--royal-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: .5rem;
}
.persona-card h3 { font-size: 1.5rem; }
.persona-card p { font-size: .96rem; }
.persona-card .btn-link { margin-top: auto; }

/* Newsletter / CTA banner */
.cta-banner {
  background:
    radial-gradient(60% 50% at 80% 30%, rgba(201,169,97,.18), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--royal-700));
  border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4rem); color: #fff;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 760px) { .cta-banner { grid-template-columns: 1fr; } }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,.8); margin-top: .85rem; }
.cta-banner .actions { display: flex; flex-direction: column; gap: .85rem; }

/* Editorial split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }
.split-img {
  border-radius: var(--radius-lg); overflow: hidden; min-height: 460px;
  position: relative; box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--navy-900), var(--royal-700));
}
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,21,48,.65) 100%);
}
.split-img .overlay-quote {
  position: absolute; bottom: 2rem; left: 2rem; right: 2rem;
  color: #fff; font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.4; z-index: 1;
}
.split-img .overlay-quote cite {
  display: block; margin-top: .85rem; font-style: normal; font-family: var(--font-sans);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300);
}

/* Process steps */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 760px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { padding: 2rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); }
.process-step .num { font-family: var(--font-serif); font-size: 3.4rem; color: var(--gold-300); line-height: 1; margin-bottom: 1rem; }
.process-step h3 { color: #fff; margin-bottom: .65rem; }
.process-step p { color: rgba(255,255,255,.72); font-size: .96rem; }

/* Quote */
.quote-block {
  background: var(--paper); padding: clamp(2.5rem, 5vw, 4.5rem); border-radius: var(--radius-lg);
  border-left: 4px solid var(--gold-500); box-shadow: var(--shadow-sm); max-width: 920px; margin: 0 auto;
}
.quote-block blockquote {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 2vw + .4rem, 2rem);
  line-height: 1.4; color: var(--ink); font-style: italic;
}
.quote-block blockquote::before { content: "“"; color: var(--gold-500); font-size: 4rem; line-height: 0; vertical-align: -.4em; margin-right: .25rem; }
.quote-block .attrib { margin-top: 1.75rem; display: flex; align-items: center; gap: 1rem; }
.quote-block .avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); color: var(--gold-600); font-size: 1.3rem;
}
.quote-block .who strong { font-weight: 600; }
.quote-block .who span { display: block; font-size: .85rem; color: var(--muted); }

/* Membership / plan cards */
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 960px; margin: 0 auto; }
@media (max-width: 760px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.1rem;
  position: relative; transition: all .35s var(--ease);
}
.plan-card.featured { background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); border-color: transparent; }
.plan-card.featured h3, .plan-card.featured .price { color: #fff; }
.plan-card.featured p, .plan-card.featured ul li { color: rgba(255,255,255,.78); }
.plan-card .meta { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--royal-600); font-weight: 700; }
.plan-card.featured .meta { color: var(--gold-300); }
.plan-card h3 { font-size: 1.85rem; }
.plan-card .price { font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; }
.plan-card .price small { font-size: .9rem; color: var(--muted); font-family: var(--font-sans); }
.plan-card.featured .price small { color: rgba(255,255,255,.6); }
.plan-card ul { display: flex; flex-direction: column; gap: .65rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.plan-card.featured ul { border-color: rgba(255,255,255,.15); }
.plan-card ul li { display: flex; align-items: flex-start; gap: .55rem; font-size: .94rem; }
.plan-card ul li::before { content: "✓"; color: var(--gold-500); font-weight: 700; }
.plan-card .badge {
  position: absolute; top: -12px; right: 1.5rem;
  background: var(--gold-500); color: var(--navy-900); font-size: .68rem;
  padding: .35rem .85rem; border-radius: 999px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}

/* Events */
.event-list { display: flex; flex-direction: column; gap: 1rem; }
.event-row {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.65rem 2rem; display: grid; grid-template-columns: 110px 1fr auto;
  gap: 2rem; align-items: center; transition: all .25s var(--ease);
}
.event-row:hover { box-shadow: var(--shadow-md); border-color: var(--royal-600); }
.event-date { text-align: center; padding-right: 1.25rem; border-right: 1px solid var(--line); }
.event-date .month { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--royal-600); font-weight: 600; }
.event-date .day { font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; color: var(--ink); }
.event-date .year { font-size: .78rem; color: var(--muted); }
.event-info h4 { font-size: 1.25rem; margin-bottom: .25rem; }
.event-info .where { font-size: .82rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .event-row { grid-template-columns: 1fr; gap: 1rem; }
  .event-date { display: flex; gap: .5rem; align-items: baseline; border-right: 0; padding: 0; text-align: left; }
  .event-date .day { font-size: 1.5rem; }
}

/* Newsletter card */
.nl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 960px) { .nl-grid { grid-template-columns: 1fr; } }
.nl-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
}
.nl-card .nl-eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600); font-weight: 700; }
.nl-card h3 { font-size: 1.5rem; }
.nl-card .nl-stats { display: flex; gap: 1.25rem; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .85rem; margin-top: auto; }
.nl-card .nl-stats strong { color: var(--ink); font-weight: 600; }

/* Forms */
.form-grid { display: grid; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .82rem; letter-spacing: .04em; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: .85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--royal-600); box-shadow: 0 0 0 3px rgba(37,64,153,.15);
}
.field textarea { min-height: 140px; resize: vertical; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.contact-info dt { font-size: .73rem; letter-spacing: .14em; text-transform: uppercase; color: var(--royal-600); font-weight: 600; margin-top: 1.4rem; }
.contact-info dd { font-size: 1.02rem; margin-top: .35rem; }

/* Filter chips */
.chips { display: flex; gap: .55rem; flex-wrap: wrap; padding: 0 0 2rem; }
.chip {
  padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: .82rem; font-weight: 500; color: var(--ink); background: var(--paper);
  cursor: pointer; transition: all .2s var(--ease);
}
.chip.active, .chip:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.results-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.results-bar .count { color: var(--muted); font-size: .9rem; }

/* Page hero (inner) */
.page-hero {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-700));
  color: #fff; padding: clamp(5rem, 10vw, 8rem) 0 clamp(3.5rem, 5vw, 5rem); text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(176,141,63,.18), transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin: .8rem 0 1rem; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 640px; margin: 0 auto; font-size: 1.08rem; }
.page-hero .gold-rule { margin: 1.4rem auto 0; }
.breadcrumb { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.breadcrumb a { color: var(--gold-300); }

/* Single article */
.article-page { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.article-page .a-eyebrow { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.article-page h1 { font-size: clamp(2.2rem, 3vw + 1rem, 3.6rem); margin-bottom: 1rem; }
.article-page .a-deck { font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); margin-bottom: 1.6rem; font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.article-page .a-byline { display: flex; align-items: center; gap: .85rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; font-size: .9rem; color: var(--muted); }
.article-page .a-byline .avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: var(--cream); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-600); font-family: var(--font-serif); font-size: 1.05rem; }
.article-page .a-byline strong { color: var(--ink); font-weight: 600; }
.article-page .a-hero img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 2.5rem; }
.article-page .a-content { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1.78; color: var(--ink-2); }
.article-page .a-content p { margin-bottom: 1.4rem; color: var(--ink-2); }
.article-page .a-content h2 { font-family: var(--font-serif); font-size: 1.85rem; margin: 2.4rem 0 1rem; color: var(--ink); }
.article-page .a-content blockquote {
  border-left: 3px solid var(--gold-500); padding: .6rem 0 .6rem 1.5rem;
  font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; line-height: 1.45; color: var(--ink); margin: 2rem 0;
}
.article-page .a-content ul, .article-page .a-content ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.article-page .a-content ul li, .article-page .a-content ol li { margin-bottom: .6rem; list-style: disc outside; }
.article-page .a-content ol li { list-style: decimal outside; }
.article-page .a-content a { color: var(--royal-600); border-bottom: 1px solid var(--royal-200); }

/* Footer */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.75); padding: 5rem 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem;
  padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 50px; margin-bottom: 1.25rem; }
.footer-brand p { color: rgba(255,255,255,.7); font-size: .92rem; max-width: 320px; }
.footer-col h4 { color: #fff; font-family: var(--font-sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.25rem; }
.footer-col ul li { margin-bottom: .65rem; }
.footer-col a { color: rgba(255,255,255,.7); font-size: .9rem; }
.footer-col a:hover { color: var(--gold-300); }
.footer-newsletter { display: flex; margin-top: 1rem; }
.footer-newsletter input {
  flex: 1; padding: .85rem 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  color: #fff; border-radius: var(--radius) 0 0 var(--radius); font: inherit; font-size: .9rem;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.4); }
.footer-newsletter button {
  padding: .85rem 1.4rem; background: var(--royal-600); color: #fff;
  border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600; letter-spacing: .04em;
}
.footer-newsletter button:hover { background: var(--royal-500); }
.social-row { display: flex; gap: .65rem; margin-top: 1.5rem; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7);
  transition: all .2s var(--ease);
}
.social-row a:hover { border-color: var(--gold-500); color: var(--gold-300); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 1.6rem 0; font-size: .8rem; color: rgba(255,255,255,.55);
}
.footer-bottom ul { display: flex; gap: 1.5rem; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: .12s; }
.reveal-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   GLASSMORPHISM LAYER
   Applied on top of the base design system.
   Strategy: seed the page with ambient gradient "orbs," then
   convert surfaces to translucent + backdrop-blur so the orbs
   refract through every card, nav, and panel.
   ========================================================= */

:root {
  --glass-bg-light:    rgba(255, 255, 255, .55);
  --glass-bg-lighter:  rgba(255, 255, 255, .70);
  --glass-bg-cream:    rgba(235, 228, 212, .50);
  --glass-bg-dark:     rgba(10,  21,  48,  .55);
  --glass-bg-darker:   rgba(10,  21,  48,  .78);
  --glass-bg-royal:    rgba(37,  64,  153, .85);
  --glass-border:      rgba(255, 255, 255, .42);
  --glass-border-dark: rgba(255, 255, 255, .10);
  --glass-highlight:   inset 0 1px 0 rgba(255, 255, 255, .55);
  --glass-shadow:      0 8px 32px rgba(12, 20, 48, .10);
  --glass-blur:        blur(20px) saturate(160%);
  --glass-blur-soft:   blur(10px) saturate(140%);
  --glass-blur-nav:    blur(18px) saturate(180%);
}

/* 1 — Ambient backdrop: gradient orbs fixed behind everything */
html { background: var(--ivory); }
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 36% at 12% 8%,   rgba(37, 64, 153, .26) 0%, transparent 65%),
    radial-gradient(40% 32% at 92% 22%,  rgba(201,169,97,  .22) 0%, transparent 65%),
    radial-gradient(50% 38% at 50% 88%,  rgba(74,100,186,  .18) 0%, transparent 65%),
    radial-gradient(38% 30% at 82% 68%,  rgba(201,169,97,  .14) 0%, transparent 65%),
    radial-gradient(34% 28% at 15% 60%,  rgba(37, 64, 153, .14) 0%, transparent 65%);
}
/* Lift in-flow content above the fixed orb backdrop.
   IMPORTANT: do NOT touch .mobile-drawer here — it must stay
   `position: fixed` (its own z-index: 99 keeps it on top when open).
   Other fixed overlays in the future should likewise be excluded. */
body > .topbar,
body > .navbar,
body > section,
body > header,
body > footer { position: relative; z-index: 1; }

/* 2 — Section surfaces: translucent so orbs refract through */
.bg-ivory {
  background: rgba(244, 239, 230, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bg-paper {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bg-cream {
  background: rgba(235, 228, 212, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bg-navy { background: rgba(10, 21, 48, .82); }

/* 3 — Topbar + Nav: always-on glass (not just on scroll) */
.topbar {
  background: var(--glass-bg-royal);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.navbar {
  background: rgba(10, 21, 48, .60);
  backdrop-filter: var(--glass-blur-nav);
  -webkit-backdrop-filter: var(--glass-blur-nav);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.navbar.scrolled { background: rgba(10, 21, 48, .80); box-shadow: var(--glass-shadow); }
.nav-sub {
  background: var(--glass-bg-lighter);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.mobile-drawer {
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* 4 — All cards become frosted glass */
.persona-card,
.market-card,
.article-card,
.video-card,
.tier,
.plan-card,
.nl-card,
.event-row,
.foa-card,
.insight-card,
.listing-card,
.wp-card,
.quote-block,
.team-card,
.feature-story,
.process-step {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* FON+ premium cards — warmer glass tint */
.article-card.fonplus,
.wp-card .wp-cover { /* covers already have their own gradient */ }
.article-card.fonplus {
  background: var(--glass-bg-cream);
  border-color: rgba(201, 169, 97, .42);
}

/* Cards that sit on dark sections (e.g. process steps) — dark glass */
.process-step {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Featured pricing card — dark gradient glass */
.plan-card.featured,
.tier.featured {
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(201,169,97,.22), transparent 60%),
    rgba(10, 21, 48, .72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark);
}

/* 5 — Forms: glass inputs */
.field input,
.field select,
.field textarea {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(255, 255, 255, .60);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: rgba(255, 255, 255, .80);
  border-color: var(--royal-600);
  box-shadow: 0 0 0 3px rgba(37, 64, 153, .18);
}

/* 6 — Filter chips: glass pills */
.chip {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(255, 255, 255, .60);
}
.chip:hover,
.chip.active {
  background: rgba(10, 21, 48, .82);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-color: rgba(10, 21, 48, .82);
  color: #fff;
}

/* 7 — Ghost buttons get glass */
.btn-ghost {
  background: rgba(255, 255, 255, .35);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-color: rgba(255, 255, 255, .60);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .55); border-color: var(--ink); }
.btn-ghost-light {
  background: rgba(255, 255, 255, .10);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, .18); }

/* 8 — Footer newsletter input */
.footer-newsletter input {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(255, 255, 255, .20);
}

/* 9 — CTA banner + page hero + podcast feature: tinted dark glass */
.cta-banner {
  background:
    radial-gradient(60% 50% at 80% 30%, rgba(201,169,97,.22), transparent 60%),
    linear-gradient(135deg, rgba(10,21,48,.78), rgba(29,51,128,.78));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--glass-shadow);
}
.page-hero {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,.22), transparent 60%),
    linear-gradient(180deg, rgba(10,21,48,.92), rgba(17, 35, 73, .92));
}
.podcast-feature {
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(201,169,97,.22), transparent 60%),
    rgba(10, 21, 48, .72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .10);
}
.yt-channel-row {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(255, 255, 255, .12);
}
.yt-hero {
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(201,169,97,.20), transparent 60%),
    rgba(10, 21, 48, .88);
}

/* 10 — Animated hero canvas (homepage intro) — pass orbs through */
.anim-hero {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(37,64,153,.30), transparent 70%),
    linear-gradient(180deg, rgba(10,21,48,.92) 0%, rgba(17,35,73,.92) 100%);
}

/* 11 — Quote block glass — keep gold accent border */
.quote-block { border-left: 4px solid var(--gold-500); }

/* 12 — Hover lift slightly stronger on glass cards (more drama on translucent surfaces) */
.persona-card:hover,
.market-card:hover,
.article-card:hover,
.video-card:hover,
.tier:hover,
.plan-card:hover:not(.featured),
.nl-card:hover,
.insight-card:hover,
.listing-card:hover,
.wp-card:hover,
.team-card:hover,
.feature-story:hover {
  box-shadow:
    0 18px 40px rgba(12, 20, 48, .16),
    var(--glass-highlight);
}

/* =========================================================
   EDITORIAL REFRESH v4
   Typography pivot to Fraunces + IBM Plex Sans + IBM Plex Mono.
   Tightens geometry, sharpens dividers, restrains gold, and
   layers in additional motion utilities (scroll progress, magnetic
   CTAs, word-split reveals, marquee, link sweep, refined hovers).
   Cascades over the base system via re-declared CSS variables.
   ========================================================= */

:root {
  /* Typography — refreshed pairing */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif:   "Fraunces", "Times New Roman", Georgia, serif; /* back-compat alias */

  /* Tightened geometry — more editorial, less SaaSy */
  --radius:    3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Stronger ink + sharper hairlines */
  --ink-900: #050817;
  --ink:     #0c1430;
  --line:    rgba(12, 20, 48, 0.09);
  --line-2:  rgba(12, 20, 48, 0.16);

  /* Crisper, lower shadows (more editorial, less "card") */
  --shadow-sm: 0 1px 0 rgba(12,20,48,.04), 0 1px 2px rgba(12,20,48,.05);
  --shadow-md: 0 12px 28px -12px rgba(12,20,48,.18), 0 2px 6px rgba(12,20,48,.05);
  --shadow-lg: 0 32px 60px -24px rgba(12,20,48,.24), 0 4px 10px rgba(12,20,48,.06);
}

html, body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv05", "cv11";
  letter-spacing: -0.005em;
  color: var(--ink-900);
}

/* Display headings — Fraunces with optical sizing + softness */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48, "SOFT" 40;
  font-weight: 460;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}
h1 {
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-weight: 440;
  letter-spacing: -0.032em;
  line-height: 1.04;
}
h2 {
  font-variation-settings: "opsz" 96, "SOFT" 40;
  font-weight: 460;
  letter-spacing: -0.026em;
  line-height: 1.06;
}
h3 {
  font-variation-settings: "opsz" 36, "SOFT" 30;
  font-weight: 480;
  letter-spacing: -0.016em;
  line-height: 1.18;
}
h4 {
  font-variation-settings: "opsz" 20, "SOFT" 20;
  font-weight: 500;
  letter-spacing: -0.012em;
}

p, .lead, .field input, .field select, .field textarea, button, .btn {
  font-family: var(--font-sans);
}

/* Editorial labels — Plex Sans with tracking + caps (not mono, less "code") */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--royal-600);
}
.article-meta,
.article-meta .cat,
.article-meta .read,
.article-meta span,
.insight-meta,
.insight-meta .cat,
.news-rail-item .rail-meta,
.rail-item .rail-meta,
.mag-rail .rail-eyebrow,
.video-body .v-cat,
.video-body .v-meta,
.cat-strip a,
.episode-row .ep-num,
.event-date .month,
.event-date .year,
.feature-story .fs-meta,
.feature-story .fs-meta span,
.feature-story .fs-byline,
.article-byline,
.tier .meta,
.plan-card .meta,
.scroll-cue,
.breadcrumb,
.contact-info dt,
.listing-tag,
.market-card .meta,
.market-card ul.tags li,
.results-bar .count,
.foa-card .region,
.event-info .where,
.event-info .where span,
.wp-card .wp-meta,
.wp-cover .wp-eyebrow,
.nl-card .nl-eyebrow,
.nl-card .nl-stats,
.podcast-info .ep-meta,
.subscribe-on,
.topbar,
.topbar-meta span,
.topbar-right a,
.trust-label,
.fonplus-badge {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Tabular-aligned numerics where mono used to help alignment */
.video-thumb-yt .dur {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.process-step .num,
.event-date .day,
.hero-stats .num,
.plan-card .price,
.tier .price,
.feature-story h2,
.podcast-art .pc-mark,
.podcast-info h3,
.team-photo,
.quote-block blockquote,
.quote-block .avatar,
.split-img .overlay-quote {
  font-family: var(--font-display);
}

/* Nav typography */
.nav-links > li > a,
.mobile-drawer a {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .14em;
  font-size: .78rem;
}

/* Trust-logo cities — keep editorial italic display */
.trust-logos span {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  font-weight: 400;
  letter-spacing: .02em;
  font-size: 1.35rem;
  text-transform: none;
}

/* Rotating word in animated hero — Fraunces italic, softness maxed */
.anim-hero h1 .rotating-word {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 460;
  letter-spacing: -0.022em;
}

/* Editorial italic emphasis */
.anim-hero h1 em,
h1 em, h2 em, h3 em {
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-style: italic;
}

/* Article body text — keep serif for long-form readability */
.article-page .a-content {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "SOFT" 20;
  font-weight: 420;
  font-size: 1.18rem;
  line-height: 1.72;
  letter-spacing: -0.005em;
}

/* =========================================================
   GOLD RESTRAINT — pull gold back to focused accent moments
   ========================================================= */

/* Eyebrows: royal blue, not gold (gold reserved for major moments) */
.eyebrow { color: var(--royal-600); }
.bg-navy .eyebrow,
.anim-hero .intro-eyebrow,
.page-hero .eyebrow { color: var(--gold-300); } /* keep on dark for legibility */

/* btn-link: ink line by default, gold sweep on hover */
.btn-link {
  border-bottom: none;
  padding-bottom: 4px;
  position: relative;
  color: var(--ink-900);
}
.btn-link::before,
.btn-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  transition: transform .6s cubic-bezier(.7,0,.2,1);
}
.btn-link::after  { background: var(--ink-900); transform: scaleX(1); transform-origin: right; }
.btn-link::before { background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition-delay: .08s; }
.btn-link:hover::after  { transform: scaleX(0); }
.btn-link:hover::before { transform: scaleX(1); }
.btn-link:hover { color: var(--ink-900); }

/* Gold rule — slightly thinner, more refined */
.gold-rule { height: 1px; width: 48px; background: var(--gold-500); }

/* =========================================================
   CARDS — sharper geometry, refined hover with gold ring
   ========================================================= */
.persona-card,
.market-card,
.article-card,
.video-card,
.tier,
.plan-card,
.nl-card,
.event-row,
.foa-card,
.insight-card,
.listing-card,
.wp-card,
.quote-block,
.team-card,
.feature-story,
.process-step {
  border-radius: var(--radius-lg);
}
.article-thumb,
.insight-thumb,
.listing-thumb,
.video-thumb-yt,
.wp-cover,
.article-page .a-hero img,
.split-img,
.podcast-art,
.podcast-feature {
  border-radius: var(--radius-md);
}
.article-thumb,
.insight-thumb,
.listing-thumb,
.video-thumb-yt,
.feature-story .feature-thumb,
.article-page .a-hero img,
.split-img,
.feature-story img.fs-img { overflow: hidden; }

/* Crisper card-hover state — lift + gold ring + image scale */
.article-card,
.video-card,
.insight-card,
.listing-card,
.wp-card,
.feature-story,
.nl-card,
.team-card,
.market-card,
.persona-card,
.tier:not(.featured),
.plan-card:not(.featured) {
  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s cubic-bezier(.16,1,.3,1),
    border-color .3s var(--ease);
}
.article-card:hover,
.video-card:hover,
.insight-card:hover,
.listing-card:hover,
.wp-card:hover,
.feature-story:hover,
.nl-card:hover,
.team-card:hover,
.market-card:hover,
.persona-card:hover,
.tier:not(.featured):hover,
.plan-card:not(.featured):hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 56px -20px rgba(12,20,48,.22),
    0 0 0 1px rgba(201,169,97,.40);
}

/* Image inside cards — slow scale on hover */
.article-thumb img,
.insight-thumb img,
.video-thumb-yt,
.feature-story .fs-img,
.split-img img,
.article-page .a-hero img {
  transition: transform 1.4s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.article-card:hover .article-thumb img,
.insight-card:hover .insight-thumb img,
.feature-story:hover .fs-img,
.split-img:hover img { transform: scale(1.06); }
.video-card:hover .video-thumb-yt { transform: scale(1.04); }

/* =========================================================
   MOTION UTILITIES
   ========================================================= */

/* Scroll progress bar (injected by JS) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--royal-600) 0%, var(--royal-500) 40%, var(--gold-500) 100%);
  z-index: 200;
  pointer-events: none;
  will-change: width;
  transition: opacity .3s var(--ease);
}

/* Magnetic CTA (transform applied inline by JS, .magnetic just smooths) */
.magnetic {
  transition: transform .45s cubic-bezier(.22,1,.36,1), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
@media (hover: none) { .magnetic { transition: none; } }

/* Word-split reveal — wraps each word in .word, intersection adds .in.
   IMPORTANT: do NOT change the parent's display. h2/h3 must stay block
   so the section eyebrow above stacks correctly. */
.motion-split .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(1.5deg);
  transform-origin: 0 100%;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.motion-split.in .word { opacity: 1; transform: none; }
.motion-split .word.em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--gold-600);
}

/* Marquee — JS wraps .trust-logos into .marquee > .marquee-track */
.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  width: max-content;
  animation: fon-marquee 34s linear infinite;
  white-space: nowrap;
  padding-left: 3.5rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes fon-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Nav link underline — smoother, thicker */
.nav-links > li > a::after { height: 1px; background: var(--gold-500); }

/* Buttons: refined press */
.btn { border-radius: 2px; font-family: var(--font-sans); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; padding: 1rem 1.6rem; }
.btn-link { font-family: var(--font-sans); font-weight: 600; letter-spacing: .14em; font-size: .72rem; text-transform: uppercase; }
.btn:active { transform: translateY(1px); }

/* Topbar — sharper type */
.topbar-inner { font-size: .7rem; letter-spacing: .08em; }

/* Hero stats — mono labels with refined nums */
.hero-stats .num,
.anim-hero .hero-stats .num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-weight: 460;
  letter-spacing: -0.02em;
}
.hero-stats .lbl,
.anim-hero .hero-stats .lbl {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
}

/* Event date — tighten */
.event-date .day { font-variation-settings: "opsz" 72, "SOFT" 30; font-weight: 460; }

/* Section heads — refined editorial hierarchy */
.section-head { max-width: 760px; }
.section-head .eyebrow {
  display: block;          /* always stack above h2 */
  margin: 0 0 1rem;
  font-size: .68rem;
  font-weight: 600;
}
.section-head h2 {
  display: block;
  font-size: clamp(1.8rem, 1.6vw + 1rem, 2.6rem);  /* slightly smaller for cleaner subhead */
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0;
}
.section-head .gold-rule { margin: 1.4rem 0 0; }
.section-head.center .gold-rule { margin-left: auto; margin-right: auto; }
.section-head p, .section-head .lead { margin-top: 1.4rem; }
.section-head-row { margin-bottom: 2.8rem; }
.section-head-row > div .eyebrow { display: block; }
.section-head-row > div h2 { display: block; }
.section-head-row > div .gold-rule { margin: 1.2rem 0 0; }

/* Page hero refinements */
.page-hero .eyebrow { display: block; margin: 0 auto .9rem; }
.page-hero .gold-rule { margin-top: 1.6rem; }

/* Animated hero refinement */
.anim-hero .intro-eyebrow { font-weight: 600; letter-spacing: .22em; }

/* Refined topbar/nav heights */
.topbar-inner { padding-top: .55rem; padding-bottom: .55rem; }

/* Trust strip refinement */
.trust { padding: 1.6rem 0; }
.trust-inner { gap: 2rem; }
.trust-label { color: rgba(255,255,255,.5); white-space: nowrap; }
@media (max-width: 760px) {
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .trust-label { font-size: .65rem; }
}

/* Hide scrollbar artifact on horizontal lists */
.cat-strip-inner { scrollbar-width: none; }
.cat-strip-inner::-webkit-scrollbar { display: none; }

/* Quote — sharper accent */
.quote-block { border-left-width: 2px; border-radius: 0; padding-left: clamp(2rem, 5vw, 4rem); }

/* Article meta separators — thin vertical bars */
.article-meta { gap: 1rem; align-items: baseline; }
.article-meta > span + span { position: relative; padding-left: 1rem; }
.article-meta > span + span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 9px; background: var(--line-2);
  transform: translateY(-50%);
}

/* Counter — slight monospaced tabular alignment */
[data-count] { font-variant-numeric: tabular-nums; }

/* Refined link tap target on the anchor card variants — disable outer underline */
.article-card, .video-card, .insight-card, .listing-card, .wp-card, .feature-story, .nl-card, .rail-item, .episode-row, .event-row { text-decoration: none; }

/* =========================================================
   TYPOGRAPHY v5 — OPTION 04: DM Serif Display + DM Sans
   Picked from font-options.html.
   Cascades over v4 by redeclaring tokens and resetting
   Fraunces-specific font-variation-settings (DM Serif Display
   ships in 400 + italic only, no opsz/SOFT axes).
   ========================================================= */

:root {
  --font-display: "DM Serif Display", "Times New Roman", Georgia, serif;
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   "DM Serif Display", "Times New Roman", Georgia, serif; /* back-compat alias */
}

/* Base */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: normal;
  letter-spacing: -0.005em;
}

/* Headings — DM Serif Display for H1/H2 (display-only, single weight).
   H3/H4 drop to DM Sans bold for legibility at smaller sizes. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: normal;
  font-style: normal;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}
h1 {
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.04;
}
h2 {
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: -0.016em;
  line-height: 1.18;
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: -0.008em;
}

/* Italic emphasis (uses DM Serif Display italic — gorgeous & dramatic) */
h1 em, h2 em, h3 em,
.anim-hero h1 em,
.anim-hero h1 .rotating-word {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: normal;
  font-weight: 400;
}
.anim-hero h1 .rotating-word { letter-spacing: -0.022em; }

/* Article body — DM Sans 400 for clean modern long-form reading */
.article-page .a-content {
  font-family: var(--font-sans);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.72;
  letter-spacing: -0.003em;
}
.article-page .a-deck {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-style: italic;
  font-weight: 400;
}

/* Editorial labels / metadata — DM Sans, slightly heavier for caps */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
}

/* Re-route everywhere we previously set Fraunces or Plex Mono */
.feature-story h2,
.podcast-info h3,
.team-photo,
.quote-block blockquote,
.podcast-art .pc-mark {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-weight: 400;
  font-style: normal;
}
.quote-block blockquote { font-style: italic; }
.split-img .overlay-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: normal;
  font-weight: 400;
}

/* Hero stats — display-serif numerals */
.hero-stats .num,
.anim-hero .hero-stats .num,
.plan-card .price,
.tier .price,
.process-step .num,
.event-date .day {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Trust strip cities — DM Serif Display italic (still elegant) */
.trust-logos span {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .005em;
}

/* Section heads — keep the v4 spacing pattern */
.section-head h2 {
  font-size: clamp(1.85rem, 1.7vw + 1rem, 2.7rem);
  letter-spacing: -0.026em;
}

/* Avatar circles — display serif initials read better in DM Serif */
.avatar-sm, .quote-block .avatar, .team-photo {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: normal;
}

/* Buttons + btn-link stay sans (already updated in v4) */
.btn { font-family: var(--font-sans); font-weight: 600; }
.btn-link { font-family: var(--font-sans); font-weight: 600; }

/* Nav links — DM Sans 600 */
.nav-links > li > a,
.mobile-drawer a {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .14em;
}

/* =========================================================
   FON+ HOMEPAGE PROMO BLOCK
   Premium dark gradient panel with floating price tile.
   Drops in on index.html between Events and Newsletters.
   ========================================================= */
.fonplus-promo {
  position: relative;
  background:
    radial-gradient(50% 40% at 82% 10%, rgba(201,169,97,.28), transparent 65%),
    radial-gradient(40% 35% at 18% 95%, rgba(37,64,153,.32), transparent 65%),
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #fff;
  border-radius: 16px;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  box-shadow: 0 32px 60px -20px rgba(12,20,48,.40);
  overflow: hidden;
  isolation: isolate;
}
.fonplus-promo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 96px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  pointer-events: none;
}
.fonplus-promo > * { position: relative; }
@media (max-width: 880px) {
  .fonplus-promo { grid-template-columns: 1fr; }
}

.fonplus-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .85rem .4rem .55rem;
  background: rgba(201,169,97,.15);
  border: 1px solid rgba(201,169,97,.40);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.2rem;
}
.fonplus-promo-pill .lock {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-900);
  display: inline-flex; align-items: center; justify-content: center;
}
.fonplus-promo-pill .lock svg { width: 10px; height: 10px; }

.fonplus-promo h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.8vw + .8rem, 3.2rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin-bottom: 1.2rem;
  max-width: 16ch;
}
.fonplus-promo h2 em { font-style: italic; color: var(--gold-300); }

.fonplus-promo .lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  max-width: 52ch;
  margin-bottom: 1.7rem;
}
.fonplus-promo .perks {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.2rem;
}
@media (max-width: 560px) { .fonplus-promo .perks { grid-template-columns: 1fr; } }
.fonplus-promo .perks li {
  font-size: .92rem;
  color: rgba(255,255,255,.85);
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.45;
}
.fonplus-promo .perks li::before {
  content: "✓";
  color: var(--gold-300);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

.fonplus-promo .actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.fonplus-promo .actions .meta {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
}

/* Price tile */
.fonplus-promo-tile {
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(201,169,97,.25), transparent 70%),
    rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 2.25rem 1.85rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fonplus-promo-tile .tile-label {
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.1rem;
}
.fonplus-promo-tile .tile-amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 4vw + 1rem, 4.2rem);
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
  gap: .15rem;
}
.fonplus-promo-tile .tile-amount .cur {
  font-size: .35em;
  color: rgba(255,255,255,.65);
  margin-top: .45em;
}
.fonplus-promo-tile .tile-per {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin: .85rem 0 1.5rem;
}
.fonplus-promo-tile .tile-list {
  list-style: none;
  padding: 1.1rem 0;
  margin: 0 0 1.3rem;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fonplus-promo-tile .tile-list li {
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  display: flex;
  gap: .55rem;
  align-items: baseline;
  justify-content: center;
}
.fonplus-promo-tile .tile-list li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--gold-500);
  border-radius: 50%;
  transform: translateY(-3px);
}
.fonplus-promo-tile .btn { width: 100%; }
.fonplus-promo-tile .tile-fine {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  margin-top: .85rem;
}

/* =========================================================
   MOBILE + RESPONSIVE AUDIT (v8)
   - Mobile drawer: sticky header w/ FON logo + × close button
     (injected by JS in main.js)
   - Hide topbar on mobile so only the brand notice + nav show
     (single piece of top-of-page chrome)
   - Zero out --topbar-h on mobile so hero height calc stays right
   - Drawer z-index above brand notice so it can take over screen
   - Various small-screen spacing + tap-target fixes
   ========================================================= */

@media (max-width: 720px) {
  :root { --topbar-h: 0; }
  .topbar { display: none !important; }
}

/* Mobile drawer — restructured around an injected header */
.mobile-drawer {
  padding: 0 1.5rem 2rem;
  z-index: 115;   /* above brand notice (110) + nav (100) — full screen takeover */
}
.mobile-drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -1.5rem 1.25rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.mobile-drawer-header .md-brand {
  display: inline-flex; align-items: center;
  padding: 0; margin: 0; border: 0;
  text-transform: none; letter-spacing: 0; font-size: inherit;
}
.mobile-drawer-header .md-brand img {
  height: 44px; width: auto; display: block;
}
.mobile-drawer-header .md-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
  transition: all .2s var(--ease);
}
.mobile-drawer-header .md-close:hover {
  background: var(--navy-900); color: #fff; border-color: transparent;
}
.mobile-drawer-header + a { margin-top: .5rem; }

/* Hamburger tap target (was tight) */
.hamburger {
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}

/* Fix double-border on fp-week label cells when stacked */
@media (max-width: 760px) {
  .fp-week .fp-week-day:nth-child(odd) {
    padding-bottom: .5rem;
    border-bottom: 0;
    margin-bottom: .5rem;
  }
}

/* Small-screen niceties */
@media (max-width: 600px) {
  section { padding: clamp(2.5rem, 8vw, 4rem) 0; }
  .hero-actions .btn,
  .fp-hero .ctas .btn,
  .mag-hero .ctas .btn { flex: 1 1 auto; min-width: 0; }
  .article-body, .video-body, .insight-body { padding: 1.2rem 1.3rem 1.4rem; }
  .mag-cover.feature { transform: rotate(0); }
  .hero-card { padding: 1.5rem 1.4rem; }
}
@media (max-width: 540px) {
  .fp-stats-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .fp-stat { padding-left: 1rem; }
}

/* =========================================================
   BRAND / COPYRIGHT NOTICE (v7)
   Slim sticky banner at top of page; clicks open a lightbox
   modal detailing imitation sites + verification cues.
   ========================================================= */

.fon-notice {
  background: var(--gold-500);
  color: var(--navy-900);
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.45;
  position: relative;
  z-index: 110;
  box-shadow: 0 1px 0 rgba(10,21,48,.08);
  animation: fon-notice-slide .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes fon-notice-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.fon-notice-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.fon-notice .icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(10,21,48,.12);
  color: var(--navy-900);
}
.fon-notice .icon svg { width: 12px; height: 12px; }
.fon-notice .text { flex: 1; min-width: 0; }
.fon-notice .text strong {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .68rem;
  background: var(--navy-900);
  color: var(--gold-300);
  padding: .15rem .5rem;
  border-radius: 2px;
  margin-right: .55rem;
  vertical-align: 1px;
}
.fon-notice .text a {
  font-weight: 600;
  color: var(--navy-900);
  border-bottom: 1px solid rgba(10,21,48,.35);
  padding-bottom: 1px;
  margin-left: .25rem;
  transition: border-color .2s ease;
  white-space: nowrap;
}
.fon-notice .text a:hover { border-color: var(--navy-900); }
.fon-notice .close {
  background: rgba(10,21,48,.08);
  border: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--navy-900);
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .2s ease;
}
.fon-notice .close:hover { background: rgba(10,21,48,.18); }
.fon-notice.dismissed { display: none; }
@media (max-width: 640px) {
  .fon-notice .text { font-size: .76rem; }
  .fon-notice .text a { display: block; margin: .25rem 0 0; }
  .fon-notice .text strong { display: inline-block; margin-bottom: .15rem; }
}

/* MODAL (lightbox) ----------------------------------------------- */
.fon-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.fon-modal.open { opacity: 1; visibility: visible; }
.fon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,8,23,.70);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.fon-modal-card {
  position: relative;
  background: var(--paper);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.85rem, 3vw, 2.75rem);
  box-shadow:
    0 60px 100px -20px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(24px) scale(.98);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.fon-modal.open .fon-modal-card { transform: translateY(0) scale(1); }
.fon-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.fon-modal-close:hover { background: var(--cream); border-color: transparent; }

.fon-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-600);
  padding: .35rem .7rem .35rem .55rem;
  background: rgba(201,169,97,.12);
  border: 1px solid rgba(201,169,97,.35);
  border-radius: 999px;
  margin-bottom: 1.3rem;
}
.fon-modal-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold-500);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(201,169,97,.20);
}
.fon-modal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.6vw + .65rem, 2rem);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 1.4rem;
}
.fon-modal h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin: 1.6rem 0 .7rem;
  color: var(--ink-900);
}
.fon-modal p {
  font-family: var(--font-sans);
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: .9rem;
}
.fon-modal-item {
  background:
    linear-gradient(180deg, rgba(201,169,97,.06), rgba(201,169,97,.02));
  border-left: 3px solid var(--gold-500);
  padding: 1.1rem 1.25rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.fon-modal-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin-bottom: .35rem;
}
.fon-modal-item p {
  font-size: .9rem;
  margin: 0;
  color: var(--ink-2);
}
.fon-modal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.fon-modal ul li {
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--ink-2);
  padding: .4rem 0 .4rem 1.5rem;
  position: relative;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.fon-modal ul li:last-child { border-bottom: 0; }
.fon-modal ul li::before {
  content: "✓";
  color: var(--gold-600);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: .4rem;
}
.fon-modal ul li strong { color: var(--ink-900); font-weight: 600; }
.fon-modal-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* =========================================================
   NAV REFINEMENTS — v6
   Solid menu (no glass), bigger logo, taller bar so the logo
   has room to breathe. Cascades over the v3 glass layer.
   ========================================================= */
:root {
  --nav-h: 100px;   /* was 80px */
}
.navbar {
  background: var(--navy-900);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.navbar.scrolled {
  background: var(--navy-900);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.nav-logo img {
  height: 72px;   /* was 50px */
  width: auto;
  transition: height .3s var(--ease);
}
@media (max-width: 720px) {
  :root { --nav-h: 84px; }
  .nav-logo img { height: 56px; }
}

/* 13 — Fallback for browsers without backdrop-filter (kept simple) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body::before { display: none; }
  .bg-ivory { background: var(--ivory); }
  .bg-paper { background: var(--paper); }
  .bg-cream { background: var(--cream); }
  .topbar   { background: var(--royal-600); }
  .navbar   { background: var(--navy-900); }
  .mobile-drawer { background: var(--paper); }
  .persona-card, .market-card, .article-card, .video-card, .tier,
  .plan-card, .nl-card, .event-row, .foa-card, .insight-card,
  .listing-card, .wp-card, .quote-block, .team-card, .feature-story {
    background: rgba(255, 255, 255, .96);
  }
  .plan-card.featured, .tier.featured { background: var(--navy-900); }
  .field input, .field select, .field textarea { background: var(--paper); }
  .chip { background: var(--paper); }
}