/* ─────────────────────────────────────────────────────────────
   lvsh-v2.css — Editorial component library
   ---------------------------------------------------------------
   Additive to marketing.css. Uses design-system tokens already
   exposed as CSS custom properties (--gold, --ink, --bg-0, etc).
   Values live in the design system (design-system/design-tokens.json);
   do not hard-code palette or type here.

   TYPOGRAPHY RULE (2026-08 — set by Ryan):
     • Serif (Cormorant Garamond) minimum size = 22px.
       Anything smaller than 22px MUST use sans (Inter).
     • clamp() floors that could resolve below 22px must have
       their first argument raised to 22px.
     • Italic gold ems inside a compliant serif block are fine —
       they inherit the parent's font-size.
   Any new component that adds body copy must clear this floor.
   ───────────────────────────────────────────────────────────── */

/* ── Responsive + iOS-friendly baseline ─────────────────────
   Global guards for every page: no horizontal scroll leakage on
   mobile, safe-area insets respected on notched iPhones, tap
   highlights toned down, and the iOS input-zoom bug avoided
   (see .lg-form input font-size: 16px below). */
html {
  /* Prevent iOS from bumping text size when the device rotates. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  /* Any accidental overflow gets clipped rather than producing a
     phantom horizontal scrollbar on phones. */
  overflow-x: clip;
  max-width: 100%;
}
* {
  /* Soften the default blue flash iOS puts on every link. */
  -webkit-tap-highlight-color: rgba(180,148,80,0.15);
}
/* Media never overflows its container. */
img, video, svg { max-width: 100%; height: auto; }
/* Safe-area padding on notched iPhones — nav sits on the top edge,
   footer near the bottom. Both get an extra safe-area inset so no
   content lives under the notch or home-indicator. */
nav.top {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
}
footer {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ── Local aliases (map to existing marketing.css vars) ────── */
:root {
  /* Editorial palette — canonical values from design-tokens.json.
     These are safe fallbacks; marketing.css should own the source. */
  --lvsh-bg:            #0E1F12;
  --lvsh-bg-soft:       #14281A;
  --lvsh-bg-card:       #1C3A26;
  --lvsh-ink:           #F5F0E8;
  --lvsh-ink-soft:      #E5DECC;
  --lvsh-gold:          #B49450;
  --lvsh-gold-bright:   #C9A96E;
  --lvsh-gold-soft:     #8A7340;
  --lvsh-line:          rgba(245,240,232,0.09);
  --lvsh-line-strong:   rgba(180,148,80,0.45);

  /* Font-family aliases for the imported editorial articles, which reference
     --lg-serif and --lg-sans from the design-system tokens file. Kept here so
     the marketing site can host those articles without also pulling
     lg-react/tokens.css. */
  --lg-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --lg-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Warm-glow removal — Ryan asked for a flat forest across the site.
     Neutralizing these two tokens (originally defined by marketing.css)
     kills every radial-gradient halo across every section that references
     them: hero backgrounds, philosophy pull-quote, CTA bands, founding
     cohort, investors page, etc. The gradients themselves stay in place
     as fallback in case we ever want to reintroduce a subtle warmth. */
  --glow-warm: transparent;
  --glow-deep: transparent;
}

/* ── Editorial eyebrow chip (used by imported articles) ───── */
.ed-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9A7E40;
  white-space: nowrap;
}
.ed-eyebrow--muted { color: #6E6A5F; }
article.editorial-body[data-theme="dark"] .ed-eyebrow { color: #C9A96E; }
article.editorial-body[data-theme="dark"] .ed-eyebrow--muted { color: #9A968C; }

/* Give the .btn-gold CTA at the end of an editorial article the right rhythm
   even when the site's marketing.css button styles do not apply. */
article.editorial-body .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #B49450;
  color: #0E1F12;
  border: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease;
}
article.editorial-body .btn-gold:hover { background: #C9A96E; }
article.editorial-body .btn-gold .arrow { font-family: var(--lg-serif); font-size: 14px; }

/* ── Per-surface pages under /for-members/ ─────────────────
   Each surface page shares the same skeleton: eyebrow row,
   split hero, 4-column info strip, numbered sections, gold-bar
   quote, ✦ divider, closing CTA. The style below is dark-forest
   to match the site chrome (contrast with the imported cream
   editorial articles). */
.surface-page {
  padding: 88px 56px 72px;
  background: var(--bg-0);
  position: relative;
  overflow: hidden;
}
.surface-page::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 8%, var(--glow-warm), transparent 65%);
  pointer-events: none;
  opacity: 0.6;
}
.surface-container {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

/* Eyebrow row */
.surface-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.surface-eyebrow-row .ed-divider {
  width: 1px;
  height: 14px;
  background: var(--line-strong);
}
.surface-eyebrow-row .ed-eyebrow { color: var(--gold-bright, #C9A96E); }
.surface-eyebrow-row .ed-eyebrow--muted { color: var(--muted, #9A968C); }
.surface-eyebrow-row a.ed-eyebrow { text-decoration: none; }
.surface-eyebrow-row a.ed-eyebrow:hover { color: var(--gold); }

/* Hero split */
.surface-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 48px;
}
.surface-hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.03;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.surface-hero-copy h1 em { color: var(--gold); font-style: italic; }
.surface-hero-copy .lede {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 32px;
  font-style: italic;
}
.surface-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.surface-hero-media { margin: 0; }
.phone-frame {
  aspect-ratio: 9/17;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 34px;
  border: 1px solid var(--line-strong);
  background: #000;
  overflow: hidden;
  position: relative;
}
.phone-frame img {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 4-column info strip */
.info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  margin: 16px 0 48px;
}
.info-cell {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.info-cell:last-child { border-right: none; }
.info-cell:first-child { padding-left: 0; }
.info-cell:last-child  { padding-right: 0; }
.info-cell-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.info-cell-value {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}

/* Intro serif paragraph */
.surface-intro {
  max-width: 68ch;
  margin: 0 auto 56px;
}
.surface-intro p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* Numbered sections — 3-up grid at desktop so all three sit in view
   without a long scroll. Falls to 2-up at medium widths and 1-up on
   phones. Each section is now a compact detail card, not a chapter. */
.surface-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.surface-section {
  max-width: none;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.surface-section-mark {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.surface-section-mark .num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.surface-section h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.surface-section h2 em { color: var(--gold); font-style: italic; }
.surface-section p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* Gold-bar quote — tightened vertical margins */
.surface-quote {
  max-width: 60ch;
  margin: 64px auto;
  padding: 0 0 0 32px;
  border-left: 2px solid var(--gold);
}
.surface-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(23px, 3.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.surface-quote footer {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Outro */
.surface-outro {
  text-align: center;
  margin-top: 64px;
}
.gold-star {
  color: var(--gold);
  font-size: 22px;
  margin-bottom: 20px;
}
.outro-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 30px;
}
.surface-outro-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.surface-back {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.surface-back:hover { color: var(--gold); border-color: var(--gold); }

/* Responsive */
@media (max-width: 1080px) {
  .surface-page { padding: 72px 28px 56px; }
  .surface-hero { grid-template-columns: 1fr; gap: 40px; }
  .phone-frame { max-width: 320px; }
  .info-strip { grid-template-columns: repeat(2, 1fr); }
  .info-cell { padding: 18px 18px; }
  .info-cell:nth-child(2) { border-right: none; }
  .info-cell:nth-child(1), .info-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .surface-sections { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .surface-sections { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .surface-page { padding: 72px 20px 56px; }
  .info-strip { grid-template-columns: 1fr; }
  .info-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .info-cell:last-child { border-bottom: none; }
  .surface-hero-actions { flex-direction: column; align-items: stretch; }
  .surface-hero-actions .btn-gold, .surface-hero-actions .btn-ghost { justify-content: center; }
}

/* ── Section rhythm ────────────────────────────────────────── */
.lvsh-section {
  padding: 120px 56px;
  background: var(--bg-0, var(--lvsh-bg));
}
.lvsh-section + .lvsh-section { border-top: 1px solid var(--line, var(--lvsh-line)); }
.lvsh-section .container { max-width: 1320px; margin: 0 auto; }

/* ── Section head (centered, editorial) ────────────────────── */
.section-head-centered {
  max-width: 820px;
  margin: 0 auto 24px;
  text-align: center;
}
.section-head-centered .eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold, var(--lvsh-gold));
  margin-bottom: 24px;
}
.section-head-centered h2 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink, var(--lvsh-ink));
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.section-head-centered h2 em {
  color: var(--gold, var(--lvsh-gold));
  font-style: italic;
}
.section-head-centered .meta {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft, var(--lvsh-ink-soft));
  font-style: italic;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Three-pillar grid (Learn / Discover / Connect) ────────── */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 72px;
}
.pillar-card {
  border-top: 1px solid var(--line-strong, var(--lvsh-line-strong));
  padding: 40px 4px 8px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.pillar-card:hover {
  border-top-color: var(--gold, var(--lvsh-gold));
  transform: translateY(-4px);
}
.pillar-card .pillar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong, var(--lvsh-line-strong));
  border-radius: 999px;
  color: var(--gold, var(--lvsh-gold));
  margin-bottom: 28px;
}
.pillar-card .pillar-mark svg { width: 20px; height: 20px; }
.pillar-card h3 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink, var(--lvsh-ink));
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.pillar-card .pillar-tagline {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold, var(--lvsh-gold));
  margin-bottom: 18px;
}
.pillar-card p {
  color: var(--muted, var(--lvsh-ink-soft));
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
  flex: 1;
}
.pillar-card .pillar-more {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink, var(--lvsh-ink));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  border-bottom: 1px solid var(--line-strong, var(--lvsh-line-strong));
  padding-bottom: 6px;
}
.pillar-card .pillar-more:hover { color: var(--gold, var(--lvsh-gold)); border-color: var(--gold, var(--lvsh-gold)); }

/* ── Pillar tag — small chip on feature blocks ────────────── */
.pillar-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold, var(--lvsh-gold));
  margin-bottom: 20px;
}
.pillar-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold, var(--lvsh-gold));
}

/* ── Alternating feature block (Section 5.4) ──────────────── */
.feature-stack { display: flex; flex-direction: column; }
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
  padding: 96px 0;
  border-bottom: 1px solid var(--line, var(--lvsh-line));
}
.feature-block:last-child { border-bottom: none; }
.feature-block.reverse .feature-media { order: 2; }
.feature-block .feature-media {
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-1, var(--lvsh-bg-soft)), var(--bg-0, var(--lvsh-bg)));
  border: 1px solid var(--line, var(--lvsh-line));
}
.feature-block .feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.feature-block .feature-media img.contain {
  object-fit: contain;
  padding: 8%;
}
.feature-block:hover .feature-media img { transform: scale(1.02); }
.feature-block .feature-copy h3 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink, var(--lvsh-ink));
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.feature-block .feature-copy h3 em {
  color: var(--gold, var(--lvsh-gold));
  font-style: italic;
}
.feature-block .feature-copy .lede {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft, var(--lvsh-ink-soft));
  font-style: italic;
  margin-bottom: 22px;
}
.feature-block .feature-copy p {
  color: var(--muted, var(--lvsh-ink-soft));
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}
.feature-block .feature-copy .feature-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink, var(--lvsh-ink));
  border-bottom: 1px solid var(--line-strong, var(--lvsh-line-strong));
  padding-bottom: 6px;
}
.feature-block .feature-copy .feature-more:hover {
  color: var(--gold, var(--lvsh-gold));
  border-color: var(--gold, var(--lvsh-gold));
}

/* ── Founding partner grid ────────────────────────────────── */
.partner-block { text-align: center; }
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: center;
  margin: 56px 0 16px;
}
.partner-grid .partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 8px;
  opacity: 0.72;
  transition: opacity 0.3s ease;
}
.partner-grid .partner:hover { opacity: 1; }
.partner-grid .partner img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(0.92);
}
[data-theme="light"] .partner-grid .partner img { filter: brightness(0); }
.partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink, var(--lvsh-ink));
  border-bottom: 1px solid var(--line-strong, var(--lvsh-line-strong));
  padding-bottom: 6px;
}

/* ── CTA band (full-width, centered) ──────────────────────── */
.cta-band {
  border-top: 1px solid var(--line, var(--lvsh-line));
  border-bottom: 1px solid var(--line, var(--lvsh-line));
  padding: 140px 56px;
  text-align: center;
  background: var(--bg-0, var(--lvsh-bg));
  position: relative;
  overflow: hidden;
}
.cta-band .cta-inner { max-width: 720px; margin: 0 auto; position: relative; }
.cta-band .eyebrow { margin-bottom: 24px; }
.cta-band h2 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.08;
  font-weight: 300;
  color: var(--ink, var(--lvsh-ink));
  margin-bottom: 22px;
}
.cta-band h2 em {
  color: var(--gold, var(--lvsh-gold));
  font-style: italic;
}
.cta-band .subhead {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft, var(--lvsh-ink-soft));
  font-style: italic;
  margin-bottom: 44px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .lvsh-section { padding: 88px 28px; }
  .pillar-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .feature-block { grid-template-columns: 1fr; gap: 40px; padding: 64px 0; }
  .feature-block.reverse .feature-media { order: 0; }
  .feature-block .feature-media { aspect-ratio: 4/5; }
  .partner-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .cta-band { padding: 96px 28px; }
}
@media (max-width: 560px) {
  .lvsh-section { padding: 64px 20px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cta-band { padding: 72px 20px; }
}

/* subfeature-card sf-more link, added by for-members.html per-surface wiring */
a.subfeature-card { text-decoration: none; color: inherit; }
.subfeature-card .sf-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}
a.subfeature-card:hover .sf-more { color: var(--gold); border-color: var(--gold); }

/* ── Buttons — Apple-liquid-glass treatment ─────────────────
   Overrides the flat .btn-gold / .btn-ghost from marketing.css
   with a frosted, multi-layer glass pill. Keeps the same visual
   hierarchy (gold = primary, ghost = secondary) but adds:
     • semi-transparent tinted fill + backdrop blur → glass
     • top-edge inner highlight → the "lens" sheen
     • warm halo shadow that intensifies on hover
     • gentle rise on hover + press-down on active
   The `.btn-gold` selector wins over marketing.css because
   this stylesheet loads after it (see <head> link order). */

.btn-gold,
.lg-form button[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  min-height: 52px;
  color: #0E1F12;
  font-family: var(--sans, "Inter", -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(201, 169, 110, 0.75);
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(224, 195, 138, 0.72) 0%,
      rgba(201, 169, 110, 0.78) 45%,
      rgba(154, 126, 64, 0.82) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 220, 0.55),   /* top sheen */
    inset 0 -1px 0 rgba(38, 24, 8, 0.18),      /* bottom shade */
    0 6px 24px rgba(180, 148, 80, 0.32),       /* warm halo */
    0 1px 3px rgba(0, 0, 0, 0.20);             /* contact shadow */
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.18s ease,
    border-color 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}
/* The lens sheen — a translucent gradient across the top half that
   makes the glass read as a curved surface, not a flat fill. */
.btn-gold::before,
.lg-form button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(180deg,
    rgba(255, 250, 232, 0.38),
    rgba(255, 250, 232, 0) 100%);
  border-radius: 999px 999px 999px 999px / 999px 999px 0 0;
  pointer-events: none;
  z-index: -1;
}

.btn-gold:hover,
.lg-form button[type="submit"]:hover {
  background:
    linear-gradient(180deg,
      rgba(232, 205, 152, 0.85) 0%,
      rgba(214, 182, 122, 0.9) 45%,
      rgba(168, 138, 74, 0.92) 100%);
  border-color: rgba(224, 195, 138, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.7),
    inset 0 -1px 0 rgba(38, 24, 8, 0.22),
    0 10px 30px rgba(180, 148, 80, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}
.btn-gold:active,
.lg-form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.35),
    inset 0 2px 4px rgba(38, 24, 8, 0.16),
    0 3px 10px rgba(180, 148, 80, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.20);
}
.btn-gold:focus-visible,
.lg-form button[type="submit"]:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 220, 0.55),
    inset 0 -1px 0 rgba(38, 24, 8, 0.18),
    0 6px 24px rgba(180, 148, 80, 0.32),
    0 0 0 3px rgba(201, 169, 110, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.20);
}
.btn-gold .arrow,
.lg-form button[type="submit"] .arrow {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}

/* Ghost variant — the clear-glass counterpart. Same shape, no fill,
   subtle warm border that lifts on hover. */
.btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  min-height: 52px;
  color: var(--ink, #F5F0E8);
  font-family: var(--sans, "Inter", -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(245, 240, 232, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(245, 240, 232, 0.06) 0%,
      rgba(245, 240, 232, 0.03) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(245, 240, 232, 0.12),
    0 4px 18px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.15);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.18s ease,
    color 0.25s ease;
  isolation: isolate;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(180deg,
    rgba(245, 240, 232, 0.10),
    rgba(245, 240, 232, 0) 100%);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: -1;
}
.btn-ghost:hover {
  color: var(--gold-bright, #C9A96E);
  border-color: rgba(201, 169, 110, 0.5);
  background:
    linear-gradient(180deg,
      rgba(201, 169, 110, 0.10) 0%,
      rgba(201, 169, 110, 0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 220, 0.2),
    0 6px 22px rgba(180, 148, 80, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.btn-ghost:active {
  transform: translateY(0);
}
.btn-ghost:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(245, 240, 232, 0.12),
    0 0 0 3px rgba(201, 169, 110, 0.35),
    0 4px 18px rgba(0, 0, 0, 0.18);
}

/* Cream-page context — buttons on the cream editorial tier section,
   founding-ten grid, etc. Slightly heavier tint so the glass reads
   against paper instead of forest. */
.fm-tiers .btn-gold,
.fb-founding-ten .btn-gold {
  color: #0E1F12;
  border-color: rgba(154, 126, 64, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.65),
    inset 0 -1px 0 rgba(38, 24, 8, 0.22),
    0 6px 24px rgba(154, 126, 64, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.10);
}

/* Reduce-motion: kill the hover lift and transitions. */
@media (prefers-reduced-motion: reduce) {
  .btn-gold,
  .btn-ghost,
  .lg-form button[type="submit"] {
    transition: none;
  }
  .btn-gold:hover,
  .btn-ghost:hover,
  .lg-form button[type="submit"]:hover {
    transform: none;
  }
}

/* ── Form component — .lg-form ────────────────────────────
   Editorial-styled form fields used by every application form
   on the site (For Members invitation form, For Brands partner
   form, About "Contact" if we add one). Renders on the site's
   dark forest surface; input text is cream, placeholders are
   italic serif in muted cream, borders are gold-tinted hairlines
   that warm into --gold on focus. */
.lg-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.lg-form input[type="text"],
.lg-form input[type="email"],
.lg-form input[type="tel"],
.lg-form input[type="url"],
.lg-form textarea,
.lg-form select {
  width: 100%;
  padding: 16px 18px;
  background: rgba(14,31,18,0.35);
  border: 1px solid rgba(180,148,80,0.28);
  color: var(--ink, #F5F0E8);
  font-family: var(--sans, "Inter", -apple-system, sans-serif);
  /* iOS Safari zooms into any input under 16px on focus — hold at 16px
     minimum on every text-entry field. */
  font-size: 16px;
  line-height: 1.4;
  border-radius: 2px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lg-form input:hover,
.lg-form textarea:hover,
.lg-form select:hover {
  border-color: rgba(180,148,80,0.5);
}
.lg-form input:focus,
.lg-form textarea:focus,
.lg-form select:focus {
  outline: none;
  border-color: var(--gold, #B49450);
  background: rgba(14,31,18,0.55);
  box-shadow: 0 0 0 3px rgba(180,148,80,0.12);
}
.lg-form input::placeholder,
.lg-form textarea::placeholder {
  color: var(--muted, #9A968C);
  font-family: var(--sans);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  opacity: 1;
}

/* Textarea + button always span the full width; individual fields can
   opt into full-width with a .full class if the copy needs the room. */
.lg-form textarea {
  grid-column: 1 / -1;
  min-height: 128px;
  resize: vertical;
  line-height: 1.55;
}
.lg-form .full { grid-column: 1 / -1; }

/* Chrome autofill bleeds a bright blue background into the input; this
   masks it with our own colors instead. */
.lg-form input:-webkit-autofill,
.lg-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink, #F5F0E8);
  -webkit-box-shadow: 0 0 0 100px rgba(14,31,18,0.85) inset;
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* Grid placement only — visual styling comes from the shared
   liquid-glass rules for .btn-gold / button[type="submit"] above. */
.lg-form button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
}

.lg-form .form-status {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--muted);
  min-height: 1.2em;
}

/* Hidden honeypot — keeps the anti-spam trap invisible but leaves the
   grid layout of the visible fields intact. */
.lg-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .lg-form { grid-template-columns: 1fr; }
}

/* Cream-editorial variant — for the day we drop a .lg-form onto a
   light section. Not used yet, but keeps the component future-proof. */
.lg-form--light input,
.lg-form--light textarea,
.lg-form--light select {
  background: rgba(255,255,255,0.65);
  border-color: rgba(14,31,18,0.18);
  color: #0E1F12;
}
.lg-form--light input::placeholder,
.lg-form--light textarea::placeholder {
  color: #6E6A5F;
}
.lg-form--light input:focus,
.lg-form--light textarea:focus {
  border-color: #9A7E40;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(154,126,64,0.15);
}
.lg-form--light button[type="submit"] {
  background: #9A7E40;
  color: #F5F0E8;
}
.lg-form--light button[type="submit"]:hover { background: #B49450; }

/* ── Founding badge — wax-seal-style crest ────────────────────
   Reusable inline-SVG mark that appears anywhere the site talks
   about the founding cohort (houses or members). Colored by
   currentColor so it inherits the surrounding text color; sized
   via width/height on the .founding-badge element.
   Two variants share the same crest and swap the top-arc label
   ("FOUNDING · MEMBER" vs "FOUNDING · HOUSE"). */
.founding-badge {
  display: inline-block;
  width: 96px;
  height: 96px;
  color: var(--gold);
  flex-shrink: 0;
}
.founding-badge--sm { width: 64px; height: 64px; }
.founding-badge--md { width: 96px; height: 96px; }
.founding-badge--lg { width: 128px; height: 128px; }

/* When the badge sits in a cohort card corner, absolute-position
   it top-right without disturbing the card's flow. */
.cohort-side { position: relative; }
.cohort-side .founding-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  color: var(--gold);
  opacity: 0.9;
}

/* ── Founding Cohort — home + shared callouts ────────────────
   Two-column card set that reinforces "10 founding houses" and
   "5,000 founding members" as the two sides of the launch story. */
.founding-cohort .cohort-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: stretch;
  margin-top: 56px;
}
.cohort-side {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
}
.cohort-side .cohort-num {
  font-family: var(--serif);
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
}
.cohort-side .cohort-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
  display: block;
}
.cohort-side h3 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.cohort-side h3 em { color: var(--gold); font-style: italic; }
.cohort-side p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 24px;
  flex: 1;
}
.cohort-side .cohort-stat {
  font-family: var(--sans, "Inter", -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.cohort-side .cohort-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  align-self: flex-start;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cohort-side .cohort-cta:hover { color: var(--gold); border-color: var(--gold); }
.cohort-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* ── Founding-member benefits — For Members hub callout ───── */
.fm-founding {
  padding: 120px 56px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fm-founding .container { max-width: 1120px; margin: 0 auto; }
.fm-founding .head { text-align: center; margin-bottom: 56px; }
.fm-founding .eyebrow {
  font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px;
}
.fm-founding h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.08;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 22px;
}
.fm-founding h2 em { color: var(--gold); font-style: italic; }
.fm-founding .lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 640px;
  margin: 0 auto;
}
.fm-founding .benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fm-founding .benefit {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.fm-founding .benefit .n {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.fm-founding .benefit h4 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
}
.fm-founding .benefit h4 em { color: var(--gold); font-style: italic; }
.fm-founding .benefit p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 1080px) {
  .founding-cohort .cohort-grid { grid-template-columns: 1fr; gap: 24px; }
  .cohort-divider { display: none; }
  .fm-founding { padding: 88px 28px; }
  .fm-founding .benefits { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .fm-founding { padding: 64px 20px; }
}