/* ============================================================================
   PromptR — shared styles. Hand-built, mobile-first. ONE type system, HARD palette.
   Palette: navy #121E30 · card-navy #1E2D45 · gold #D4A843 · cream #F5F1E8 · off-white #FAFAF7
   Type:    Playfair Display (headings) · Inter (body) · gold small-caps eyebrows
   ============================================================================ */

/* ---------------------------------------------------------------------------
   HOW TO EDIT (quick ref — full guide in EDITING.md):
   • change a brand color .... edit one value in :root (cascades site-wide)
   • change a font ........... edit --serif / --sans in :root
   • turn pricing ON ......... set --pricing-display to  block  in :root
   • change copy ............. edit text directly in the .html files
   • swap a photo ............ replace the file in /images (same name) or edit src=""
   • edit header/footer ...... identical block in all 5 .html files
   --------------------------------------------------------------------------- */
:root {
  /* ----- BRAND COLORS (one-line edits cascade everywhere) ----- */
  --navy: #121E30;            /* page background / outer cards */
  --card-navy: #1E2D45;       /* lighter card-navy */
  --navy-lift: #243650;       /* gradient top for cards only */
  --gold: #D4A843;            /* primary gold accent */
  --gold-soft: #E0BC6A;       /* lighter gold */
  --gold-deep: #A87C2B;       /* darker gold — legible on cream */
  --cream: #F5F1E8;           /* light section background */
  --offwhite: #FAFAF7;        /* inner "PromptR Response" cards */
  --ink: #121E30;             /* dark text on cream */
  --ink-soft: #36475F;        /* body text on cream */
  --on-navy: #E7E2D4;         /* body text on navy */
  --on-navy-soft: #AEB9CC;    /* muted body on navy */
  --line-gold: rgba(212,168,67,0.30);

  /* ----- BLUEPRINT GRID (whisper texture on navy sections only) -----
     One identical treatment site-wide. Keep alpha very low — texture, not a
     pattern. Cards use opaque fills so the grid never shows behind them. */
  --grid-image: linear-gradient(rgba(212,168,67,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(212,168,67,0.05) 1px, transparent 1px);
  --grid-size: 46px;

  /* ----- FONTS ----- */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;  /* all headings */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* all body */

  /* ----- LAYOUT ----- */
  --maxw: 1140px;             /* max content width */
  --pad: clamp(18px, 5vw, 32px); /* page side padding */

  /* =========================================================================
     PRICING FEATURE FLAG — THE SINGLE SWITCH.
     Pricing is OFF until VLC beta sets the numbers. Anything marked
     class="pricing-only" in the HTML stays hidden while this is "none".
     TO TURN PRICING ON: change the value below to  block  and redeploy.
     ========================================================================= */
  --pricing-display: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--navy);
  color: var(--on-navy);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }

/* ---------- Type system ---------- */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 0.5em; }
h1 { font-size: clamp(40px, 11vw, 88px); }
h2 { font-size: clamp(30px, 7vw, 52px); }
h3 { font-size: clamp(21px, 4.5vw, 28px); }
p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--sans); font-weight: 700;
  font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .6; }
.eyebrow.solo::before, .eyebrow.solo::after { display: none; }
.lede { font-size: clamp(16px, 4vw, 19px); line-height: 1.6; color: var(--on-navy); max-width: 62ch; margin: 0 auto 1.25rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
section { padding: 2.5rem 0; position: relative; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 2.25rem; }
.center { text-align: center; }

/* Alternating bands */
.band-navy { background-color: var(--navy); background-image: var(--grid-image); background-size: var(--grid-size) var(--grid-size); color: var(--on-navy); }
.band-cream { background: var(--cream); color: var(--ink); }
.band-cream h1, .band-cream h2, .band-cream h3 { color: var(--ink); }
.band-cream .lede, .band-cream p { color: var(--ink-soft); }
.band-cream .eyebrow { color: var(--gold-deep); }
.band-cream .eyebrow::before, .band-cream .eyebrow::after { background: var(--gold-deep); }

/* ---------- Header / nav ----------
   2026-05-24: deliberate minimal choice — ONE hamburger dropdown at every
   viewport width. The horizontal `.nav-links` block is kept in markup for
   crawlers / fallbacks but hidden in CSS at all widths. `.site-menu` (was
   `.mobile-menu`) is the universal dropdown panel. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,30,48,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,168,67,0.16);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
/* Logo CUBE (cube-only, no wordmark — the "PromptR" text beside it is the wordmark)
   sits in a cream pill so its navy faces read crisp against the navy bar. */
.brand img { width: 44px; height: 44px; object-fit: contain; background: var(--cream); border-radius: 10px; padding: 5px; box-shadow: 0 3px 10px -3px rgba(0,0,0,0.45); }
.brand span { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--cream); letter-spacing: .3px; }
/* Horizontal nav-links: never shown. Kept for non-JS / screen-reader fallback. */
.nav-links { display: none !important; }
.nav-cta { background: var(--gold); color: var(--navy) !important; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 12.5px; letter-spacing: .8px; text-transform: uppercase; }
.nav-toggle { background: none; border: 0; color: var(--cream); cursor: pointer; padding: 8px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle-label { display: none; color: var(--on-navy-soft); }
.nav-toggle[aria-expanded="true"] .nav-toggle-label { color: var(--cream); }
@media (min-width: 700px) { .nav-toggle-label { display: inline; } }
/* Universal dropdown — closed by default; .open via JS. Full-width strip on
   mobile; constrained right-anchored panel at desktop (still the SAME element,
   just a tidier shape on wider screens). */
.mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 8px var(--pad) 16px; border-top: 1px solid rgba(212,168,67,0.14); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 13px 4px; color: var(--on-navy); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-menu a.active { color: var(--gold); }
.mobile-menu .nav-cta { margin-top: 12px; text-align: center; border-bottom: 0; }
@media (min-width: 720px) {
  /* Desktop dropdown: right-anchored panel under the header — same items,
     same animation, less wall-to-wall. Stays inside the .site-header so the
     blur/border match. */
  .mobile-menu {
    position: absolute; top: 64px; right: var(--pad);
    width: min(340px, calc(100vw - var(--pad) * 2));
    background: rgba(18,30,48,0.96); backdrop-filter: blur(10px);
    border: 1px solid rgba(212,168,67,0.20); border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 12px 18px 18px;
    box-shadow: 0 22px 50px -22px rgba(0,0,0,0.65);
  }
}

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 13.5px; letter-spacing: 1px; text-transform: uppercase; padding: 16px 32px; border-radius: 999px; cursor: pointer; border: 0; transition: transform .2s ease, box-shadow .2s ease; text-align: center; }
.btn-primary { background: var(--gold); color: var(--navy); box-shadow: 0 16px 40px -14px rgba(212,168,67,0.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(212,168,67,0.7); }
.btn-secondary { background: transparent; color: var(--cream); border: 1px solid rgba(212,168,67,0.55); }
.band-cream .btn-secondary { color: var(--ink); border-color: rgba(18,30,48,0.4); }
.btn-secondary:hover { border-color: var(--gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 0; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim — darker at top where headline + sub + lede live so busy photo backgrounds
   (construction overlays, equipment, dust) don't compete with the text. Photo still
   reads in the body, fades to navy at the bottom for the section transition. */
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,30,48,0.72) 0%, rgba(18,30,48,0.68) 45%, rgba(18,30,48,0.94) 100%); }
.hero-inner { position: relative; z-index: 1; text-align: center; padding: 4rem 0 3.5rem; }
.hero-inner h1, .hero-inner .hero-sub, .hero-inner .lede, .hero-inner .eyebrow { text-shadow: 0 2px 18px rgba(8,14,24,0.85), 0 1px 4px rgba(8,14,24,0.8); }
.hero h1 { color: var(--cream); font-style: italic; }
.hero .hero-sub { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 5vw, 30px); color: var(--cream); max-width: 18ch; margin: 0 auto 1rem; line-height: 1.2; }
.hero .lede { color: #D6CDB8; }
.hero-fineprint { font-size: 12.5px; letter-spacing: .4px; color: var(--on-navy-soft); margin-top: 1.5rem; }

/* Iron-triangle hero pills */
.iron-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 1.5rem auto 0; max-width: 640px; }
.iron-pill { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--on-navy); background: rgba(36,54,80,0.7); border: 1px solid var(--line-gold); border-radius: 999px; padding: 9px 15px; }
.iron-pill b { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold); }

/* ---------- CARD-IN-CARD (canonical) ---------- */
.cards { display: grid; gap: 18px; }
.card-outer {
  background: linear-gradient(180deg, var(--card-navy) 0%, var(--navy) 100%);
  border: 1px solid rgba(212,168,67,0.20); border-radius: 16px;
  padding: 34px 26px 28px; position: relative; overflow: hidden;
  box-shadow: 0 26px 56px -28px rgba(0,0,0,0.55);
}
.card-outer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--gold)); }
.card-numeral { font-family: var(--serif); font-weight: 700; font-size: 58px; line-height: 1; color: var(--gold); letter-spacing: -1.5px; margin-bottom: 18px; }
.card-phrase { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--cream); margin-bottom: 10px; line-height: 1.12; }
.card-meta { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-soft); font-weight: 600; margin-bottom: 22px; }
.card-quote { font-style: italic; color: #C9D2E3; font-size: 15.5px; line-height: 1.55; padding-left: 16px; border-left: 4px solid var(--gold); margin: 0 0 24px; }
.card-h3 { font-family: var(--serif); color: var(--cream); margin: 0 0 .5em; }
.card-body { color: var(--on-navy); font-size: 15px; }
/* Outer navy cards ALWAYS get cream/light text — even inside cream sections, where
   the .band-cream h3/p rules would otherwise darken them to navy-on-navy. */
.band-cream .card-outer .card-h3,
.card-outer .card-h3,
.card-outer .card-phrase { color: var(--cream) !important; }
.band-cream .card-outer .card-body,
.card-outer .card-body,
.card-outer .card-meta + .card-quote { color: var(--on-navy) !important; }
.card-outer .card-meta { color: var(--gold-soft) !important; }
.card-outer .card-quote { color: #C9D2E3 !important; }

/* Inner cream "PROMPTR RESPONSE" card */
.card-inner { background: var(--offwhite); border-radius: 12px; padding: 22px 22px 20px; box-shadow: inset 0 0 0 1px rgba(18,30,48,0.05); }
.card-inner-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.card-inner-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.18); }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.pill { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; background: var(--navy); color: var(--gold-soft); padding: 6px 12px; border-radius: 99px; font-weight: 700; }
.card-inner-body { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.card-inner-body b { color: var(--navy); font-weight: 700; }
.card-inner-body i { color: var(--ink); }

/* ---------- Trade grid (home only) ---------- */
/* Mobile-first: one big tile per row so labels never clip; 2-up at 560, 3-up at 900. */
.trade-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1140px; margin: 0 auto; }
.trade-tile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(212,168,67,0.22); box-shadow: 0 22px 46px -24px rgba(0,0,0,0.6); aspect-ratio: 16 / 9; }
.trade-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; filter: brightness(0.74) contrast(1.06) saturate(0.92); }
.trade-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,30,48,0.34) 0%, rgba(18,30,48,0.05) 45%, rgba(18,30,48,0.62) 100%); }
.trade-tile:hover img { transform: scale(1.06); }
.trade-tile span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 14px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cream); white-space: normal; line-height: 1.2; }

/* ---------- Stat tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,67,0.18); border-radius: 14px; padding: 24px; text-align: center; }
.band-cream .tile { background: var(--offwhite); border-color: rgba(18,30,48,0.08); }
.tile .big { font-family: var(--serif); font-weight: 700; font-size: 34px; color: var(--gold); margin-bottom: 4px; line-height: 1; }
.band-cream .tile .big { color: var(--gold-deep); }
.tile h3 { color: var(--cream); margin-bottom: 6px; }
.band-cream .tile h3 { color: var(--ink); }
.tile p { font-size: 14px; color: var(--on-navy-soft); margin: 0; }
.band-cream .tile p { color: var(--ink-soft); }

/* ---------- Enforcement spectrum ---------- */
.tier-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto; max-width: 760px; justify-content: center; }
.tier { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; background: var(--navy); color: var(--gold-soft); padding: 8px 14px; border-radius: 99px; font-weight: 600; border: 1px solid var(--line-gold); }
.band-cream .tier { background: var(--card-navy); }
.tier b { color: var(--cream); margin-right: 6px; opacity: .85; }

/* ---------- Differentiator ---------- */
.diff-trades { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.diff-trade { font-size: 13px; font-weight: 600; color: var(--on-navy); background: transparent; border: 1px solid var(--line-gold); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: all .2s; }
.diff-trade:hover { color: var(--cream); border-color: var(--gold); }
.diff-trade.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.diff-cols { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
.diff-col { padding: 16px 18px; border-radius: 10px; }
.diff-generic { background: rgba(18,30,48,0.05); border: 1px solid rgba(18,30,48,0.1); }
.diff-promptr { background: rgba(212,168,67,0.10); border: 1px solid rgba(212,168,67,0.32); }
.diff-col-title { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.diff-generic .diff-col-title { color: #8893a8; }
.diff-promptr .diff-col-title { color: var(--gold-deep); }
.diff-col p { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.diff-promptr p b { color: var(--navy); }

/* ---------- Conversation / voice blocks ---------- */
/* Voice cards are navy-themed; inside a band-cream the .band-cream p rule would
   otherwise darken the quote/body text to ink-soft (dark-on-navy, unreadable).
   !important wins over .band-cream p without needing extra selectors. */
.voice { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.voice-card { background: var(--card-navy); border: 1px solid rgba(212,168,67,0.18); border-radius: 14px; padding: 22px; }
.voice-meta { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold) !important; margin-bottom: 12px; font-weight: 700; }
.voice-op { color: var(--cream) !important; padding-left: 14px; border-left: 2px solid var(--gold); margin: 0 0 10px; }
.voice-pr { color: var(--on-navy) !important; padding-left: 14px; border-left: 2px solid var(--gold-soft); margin: 0; font-size: 15px; }

/* ---------- Lifecycle steps — navy cards (on the site's card theme), legible text,
   balanced fixed-width numeral column. (Use !important so the band-cream text rules
   don't darken them when the section is a cream band.) */
.steps { display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center;
  background: var(--card-navy); border: 1px solid var(--line-gold); border-radius: 12px;
  padding: 18px 20px; box-shadow: 0 14px 34px -20px rgba(0,0,0,0.5); }
.step .num { font-family: var(--serif); font-weight: 700; color: var(--gold) !important; font-size: 30px; line-height: 1; text-align: center; }
.step h3 { color: var(--cream) !important; font-size: 17px; margin: 0 0 4px; font-family: var(--serif); }
.step p { color: var(--on-navy) !important; font-size: 14px; margin: 0; line-height: 1.5; }

/* ---------- Comparison table ---------- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 13.5px; }
table.cmp th, table.cmp td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(212,168,67,0.14); vertical-align: top; }
table.cmp thead th { color: var(--gold); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
table.cmp thead th:last-child { color: var(--gold); }
table.cmp td:first-child { color: var(--cream); font-weight: 600; }
table.cmp td { color: var(--on-navy-soft); }
table.cmp td:last-child { color: var(--cream); }
table.cmp tr:last-child td { border-bottom: 0; }

/* ---------- Cost calculator ---------- */
.calc { max-width: 720px; margin: 0 auto; }
.calc-row { border: 1px solid var(--line-gold); border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: var(--card-navy); }
.calc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--cream); font-family: var(--sans); }
.calc-head .label { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--cream); }
.calc-head .arrow { color: var(--gold); transition: transform .2s; font-size: 13px; }
.calc-row.open .calc-head .arrow { transform: rotate(90deg); }
.calc-head .val { font-family: var(--sans); font-weight: 700; color: var(--gold); font-size: 15px; white-space: nowrap; }
.calc-head .val .per { color: var(--on-navy-soft); font-weight: 400; font-size: 12px; margin-left: 1px; }
.calc-body { display: none; padding: 4px 18px 18px; border-top: 1px solid rgba(212,168,67,0.14); }
.calc-row.open .calc-body { display: block; }
.calc-formula { font-size: 13.5px; color: var(--gold); font-style: italic; margin: 12px 0 4px; line-height: 1.5; }

.calc-field { margin: 14px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.calc-field label { font-size: 13.5px; color: #C9D2E3; }

/* +/- stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-gold); border-radius: 9px; overflow: hidden; background: var(--navy); }
.step-btn { width: 38px; border: 0; background: rgba(212,168,67,0.10); color: var(--gold); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; font-family: var(--sans); transition: background .15s; }
.step-btn:hover { background: rgba(212,168,67,0.24); }
.step-affix { display: inline-flex; align-items: center; padding: 0 2px 0 9px; color: var(--on-navy-soft); font-size: 13px; }
.step-affix.suf { padding: 0 9px 0 2px; }
.step-input { width: 64px; background: transparent; color: var(--cream); border: 0; padding: 9px 4px; font-family: var(--sans); font-size: 15px; font-weight: 600; text-align: center; -moz-appearance: textfield; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input:focus { outline: none; }

/* protocol toggle */
.toggle-group { display: inline-flex; gap: 6px; }
.tg { border: 1px solid var(--line-gold); background: var(--navy); color: #C9D2E3; border-radius: 8px; padding: 8px 16px; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tg:hover { border-color: var(--gold); }
.tg.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }

.calc-note { font-size: 12.5px; color: var(--on-navy-soft); margin: 10px 0 0; line-height: 1.55; }
.calc-cat { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(212,168,67,0.14); font-size: 13.5px; color: #C9D2E3; }
.calc-cat .cat-val { font-family: var(--sans); font-weight: 700; color: var(--gold); font-size: 15px; }

.calc-total { background: linear-gradient(180deg, var(--card-navy), var(--navy)); border: 1px solid var(--line-gold); border-radius: 14px; padding: 22px; margin-top: 14px; text-align: center; }
.calc-total .label { font-family: var(--serif); font-size: 18px; color: var(--cream); }
.calc-total .amount { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 9vw, 52px); color: var(--gold); line-height: 1.1; margin: 6px 0; }
.calc-total .note { font-size: 13px; color: var(--on-navy-soft); line-height: 1.6; max-width: 540px; margin: 0 auto; }
.calc-total .note b { color: var(--cream); }

/* ---------- Lists ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.checklist .mk { flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.checklist.bad .mk { color: #C98B6B; }
.checklist.good .mk { color: var(--gold); }

/* ---------- Founder / about ---------- */
.about-hero-photo { border-radius: 18px; border: 1px solid rgba(212,168,67,0.22); box-shadow: 0 40px 90px -42px rgba(0,0,0,0.7); }
.cred-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 18px var(--pad); background: var(--card-navy); border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); text-align: center; }
.cred-bar span { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.cred-bar i { color: rgba(212,168,67,0.4); font-style: normal; }
.founder-card { max-width: 640px; margin: 0 auto; text-align: center; }
.founder-photo { max-width: 480px; margin: 0 auto 1.5rem; border-radius: 16px; border: 3px solid var(--gold); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6); }
.founder-cap { font-style: italic; font-size: 14px; color: var(--ink-soft); margin-bottom: 2rem; }
.band-cream .founder-cap { color: var(--ink-soft); }

/* ---------- Story sections ---------- */
.story { max-width: 720px; margin: 0 auto; }
.story p { font-size: 16px; line-height: 1.7; }

/* Founder journey: photo + text blocks, alternating sides on desktop, stacked on mobile. */
.story-block { display: grid; gap: 22px; align-items: center; max-width: 1040px; margin: 0 auto; }
.story-block .media img { width: 100%; border-radius: 16px; border: 1px solid var(--line-gold); box-shadow: 0 30px 70px -34px rgba(0,0,0,0.6); display: block; }
.story-block .media.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.story-block .copy h2 { margin-bottom: .4em; }
.story-block .copy p { font-size: 16px; line-height: 1.7; }
@media (min-width: 780px) {
  .story-block { grid-template-columns: 1fr 1fr; gap: 44px; }
  .story-block.reverse .media { order: 2; }
}
.principles { display: grid; gap: 16px; }
.principle { background: var(--card-navy); border: 1px solid rgba(212,168,67,0.18); border-radius: 12px; padding: 22px; }
.principle h3 { color: var(--cream); font-size: 19px; }
.principle p { color: var(--on-navy-soft); font-size: 14.5px; margin: 0; }
.trade-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 0 auto; }
.trade-chips span { font-size: 13px; font-weight: 600; color: var(--ink); background: var(--offwhite); border: 1px solid rgba(18,30,48,0.1); border-radius: 999px; padding: 8px 16px; }

/* ---------- CTA band ---------- */
.cta-band { background-color: var(--card-navy); background-image: var(--grid-image); background-size: var(--grid-size) var(--grid-size); text-align: center; }
.cta-band h2 { color: var(--cream); }
.cta-band .lede { color: var(--on-navy); }
.cta-tag { font-family: var(--sans); color: var(--gold); font-size: 13px; letter-spacing: 1px; margin-bottom: 1.5rem; }

/* On-brand promo banner */
.promo { background: radial-gradient(120% 140% at 12% 0%, rgba(212,168,67,0.16), transparent 55%), linear-gradient(180deg, var(--card-navy), var(--navy)); }
.promo-inner { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; background: linear-gradient(180deg, rgba(36,54,80,0.6), rgba(18,30,48,0.6)); border: 1px solid var(--line-gold); border-radius: 20px; padding: 36px 26px; }
.promo-inner img { width: 76px; height: 76px; }
.promo-inner h2 { color: var(--cream); }
.promo-inner h2 em { color: var(--gold-soft); }

/* ---------- Founding form ---------- */
.pform { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.pform label { font-size: 13px; color: var(--on-navy); font-weight: 600; }
.pform input, .pform select { width: 100%; background: var(--card-navy); color: var(--cream); border: 1px solid var(--line-gold); border-radius: 8px; padding: 12px; font-family: var(--sans); font-size: 15px; }
.faq { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: var(--card-navy); border: 1px solid rgba(212,168,67,0.16); border-radius: 12px; padding: 20px 22px; }
.faq-item h3 { color: var(--cream); font-size: 18px; margin: 0 0 8px; }
.faq-item p { color: var(--on-navy-soft); margin: 0; font-size: 14.5px; }

/* ---------- Simulation page (custom conversation UI + honest opt-ins) ---------- */
.mic-btn { display: inline-flex; align-items: center; gap: 10px; }
.mic-ic { display: inline-flex; width: 20px; height: 20px; }
.mic-ic svg { width: 100%; height: 100%; }

.sim-stage { max-width: 720px; margin: 0 auto; }

/* navy "stage" card — same card-in-card language as the rest of the site.
   Lives inside a band-cream section, so text colors are set explicitly (and the
   status <p> uses !important to beat the band-cream p rule → navy-on-navy bug). */
.sim-convo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; background: linear-gradient(180deg, var(--card-navy) 0%, var(--navy) 100%); border: 1px solid var(--line-gold); border-radius: 20px; padding: 26px 22px 28px; box-shadow: 0 30px 70px -34px rgba(0,0,0,0.55); overflow: hidden; }
.sim-convo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--gold)); }

/* input-mode selector (segmented control) */
.sim-modes { display: inline-flex; gap: 4px; background: rgba(18,30,48,0.6); border: 1px solid var(--line-gold); border-radius: 999px; padding: 4px; flex-wrap: wrap; justify-content: center; }
.sim-mode { border: 0; background: transparent; color: var(--on-navy-soft); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.sim-mode:hover { color: var(--cream); }
.sim-mode.active { background: var(--gold); color: var(--navy); }

/* ===== Animated PromptR logo = conversation centerpiece + control =====
   The pristine canonical cube with layered glowing gold halos that intensify per state. */
.sim-logo { position: relative; width: clamp(190px, 52vw, 244px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin: 4px auto 0; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; }
.sim-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 50%; }

/* soft radial glow behind the cube — always alive; intensifies per state */
.sim-glow { position: absolute; top: 50%; left: 50%; width: 98%; aspect-ratio: 1/1; margin: -49% 0 0 -49%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(212,168,67,0.5) 0%, rgba(212,168,67,0.16) 36%, transparent 68%); opacity: .45; filter: blur(3px); animation: simglow 4.5s ease-in-out infinite; }

/* radiating gold ring halos (sound-wave ripples) */
.sim-ring { position: absolute; top: 50%; left: 50%; width: 70%; aspect-ratio: 1/1; margin: -35% 0 0 -35%; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }

/* the pristine canonical cube (gentle breath always; gold glow while speaking) */
.sim-cube { position: relative; z-index: 2; width: 80%; display: block; line-height: 0; transition: transform .25s ease; }
/* Filter is NOT transitioned: Chrome interpolates filter lists of different
   length as "discrete" and gets stuck mid-transition for getComputedStyle,
   which made the speaking-state halo silently fail to apply. State changes
   snap; the simglow/simradiate animations carry the motion. */
.sim-cube img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45)); animation: simbreath 5s ease-in-out infinite; }
.sim-logo:hover .sim-cube { transform: scale(1.04); }
.sim-logo:active .sim-cube { transform: scale(0.98); }

/* ---- themed states (richer, layered halos) ---- */
/* idle = soft ambient glow + slow breath only (set above); calm but alive. */
/* connecting: glow lifts */
.sim-convo[data-state="connecting"] .sim-glow { opacity: .6; }
/* listening (visitor speaking): brighter glow + responsive expanding rings */
.sim-convo[data-state="listening"] .sim-glow { animation-duration: 1.8s; opacity: .68; }
.sim-convo[data-state="listening"] .sim-ring.r1 { animation: simradiate 1.9s ease-out infinite; }
.sim-convo[data-state="listening"] .sim-ring.r2 { animation: simradiate 1.9s ease-out infinite; animation-delay: .95s; }
/* thinking: layered shimmer */
.sim-convo[data-state="thinking"] .sim-glow { animation: simglow 1.1s ease-in-out infinite; opacity: .6; }
.sim-convo[data-state="thinking"] .sim-ring.r1 { animation: simshimmer 1.6s ease-in-out infinite; }
.sim-convo[data-state="thinking"] .sim-ring.r2 { animation: simshimmer 1.6s ease-in-out infinite; animation-delay: .4s; }
/* speaking (agent talking): intense multi-layered radiating halos + gold cube glow.
   Brighter, thicker, more luminous than listening — the cube is alive with sound.
   Uses the speaking-specific keyframe so the glow stays bright through the whole
   pulse instead of falling back to the calm idle range. */
.sim-convo[data-state="speaking"] .sim-glow {
  animation: simglow-speaking 1.1s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255,212,120,0.5) 0%, rgba(224,188,106,0.3) 30%, rgba(212,168,67,0.13) 55%, transparent 78%);
  filter: blur(5px);
}
.sim-convo[data-state="speaking"] .sim-cube img {
  filter:
    drop-shadow(0 0 34px rgba(255,212,120,0.85))
    drop-shadow(0 0 18px rgba(224,188,106,0.7))
    drop-shadow(0 0 8px rgba(212,168,67,0.55))
    drop-shadow(0 6px 16px rgba(0,0,0,0.4));
}
.sim-convo[data-state="speaking"] .sim-ring {
  border-width: 5px;
  box-shadow:
    0 0 22px rgba(255,212,120,0.6),
    0 0 44px rgba(212,168,67,0.32),
    inset 0 0 14px rgba(255,212,120,0.45);
  animation: simradiate-speaking 1.5s ease-out infinite;
}
.sim-convo[data-state="speaking"] .sim-ring.r2 { animation-delay: .375s; }
.sim-convo[data-state="speaking"] .sim-ring.r3 { animation-delay: .75s; }
.sim-convo[data-state="speaking"] .sim-ring.r4 { animation-delay: 1.125s; }

@keyframes simglow { 0%,100% { opacity: .4; transform: scale(.96); } 50% { opacity: .62; transform: scale(1.05); } }
@keyframes simglow-speaking { 0%,100% { opacity: .9; transform: scale(1.04); } 50% { opacity: 1; transform: scale(1.16); } }
@keyframes simbreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes simradiate {
  0%   { opacity: 0;   transform: scale(1.15); }
  16%  { opacity: .8;                          }
  70%  { opacity: .32;                         }
  100% { opacity: 0;   transform: scale(2.25); }
}
@keyframes simradiate-speaking {
  0%   { opacity: 0;   transform: scale(1.12); border-width: 6px; }
  14%  { opacity: 1;   border-width: 6px; }
  60%  { opacity: .6;  border-width: 4px; }
  100% { opacity: 0;   transform: scale(2.5);  border-width: 2px; }
}
@keyframes simshimmer { 0%,100% { opacity: .15; transform: scale(.7); } 50% { opacity: .45; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .sim-glow, .sim-cube img, .sim-ring { animation: none !important; }
  .sim-glow { opacity: .5; }
  .sim-convo[data-state="listening"] .sim-ring.r1, .sim-convo[data-state="speaking"] .sim-ring.r1 { opacity: .55; }
  .sim-convo[data-state="speaking"] .sim-ring { border-width: 4px; opacity: .55; }
}

/* status line + transcript (light text on the navy card) */
.sim-convo .sim-status { color: var(--on-navy) !important; font-size: 14px; margin: 0; text-align: center; min-height: 1.2em; }
.sim-transcript { width: 100%; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.sim-transcript:empty { display: none; }
.sim-line { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.sim-line.from-user { align-self: flex-end; align-items: flex-end; }
.sim-line.from-agent { align-self: flex-start; align-items: flex-start; }
.sim-who { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
.sim-msg { font-size: 14.5px; line-height: 1.5; color: var(--cream); background: rgba(18,30,48,0.55); border: 1px solid rgba(212,168,67,0.16); border-radius: 12px; padding: 9px 13px; }
.sim-line.from-user .sim-msg { background: rgba(212,168,67,0.14); }

/* text-mode input bar */
.sim-textbar { width: 100%; max-width: 520px; display: flex; gap: 8px; }
.sim-textbar[hidden] { display: none; }
.sim-textinput { flex: 1; min-width: 0; background: var(--navy); color: var(--cream); border: 1px solid var(--line-gold); border-radius: 10px; padding: 12px 14px; font-family: var(--sans); font-size: 15px; }
.sim-textinput::placeholder { color: var(--on-navy-soft); }
.sim-textsend { padding: 11px 18px; }

.sim-end { background: none; border: 0; color: var(--on-navy-soft); font-family: var(--sans); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.sim-end[hidden] { display: none; }
.sim-end:hover { color: var(--cream); }

/* conversation starters — role + question chips (sit on the navy card) */
.sim-starters { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.sim-startgroup { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.sim-startlabel { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
.sim-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sim-chip { background: rgba(18,30,48,0.5); border: 1px solid var(--line-gold); color: var(--on-navy); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sim-chip:hover { background: rgba(212,168,67,0.16); color: var(--cream); border-color: var(--gold); }
.sim-chip.q { font-weight: 500; color: var(--on-navy-soft); }
.sim-chip.q:hover { color: var(--cream); }
.sim-chip.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }

.sim-mic-note { text-align: center; color: var(--ink-soft); font-size: 12.5px; margin: 14px auto 0; max-width: 520px; }

/* honest opt-in checkboxes (never pre-checked) */
.optins { border: 1px solid var(--line-gold); border-radius: 12px; padding: 14px 18px 6px; margin: 4px 0 0; }
.optins legend { font-size: 13px; color: var(--on-navy); font-weight: 600; padding: 0 6px; }
.optins legend span { color: var(--on-navy-soft); font-weight: 400; }
.optin { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 14.5px; color: var(--on-navy); font-weight: 400; cursor: pointer; }
.optin input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gold); flex: none; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); border-top: 1px solid rgba(212,168,67,0.14); padding: 3rem 0 2rem; }
.footer-grid { display: grid; gap: 28px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-brand img { width: 44px; height: 44px; object-fit: contain; background: var(--cream); border-radius: 10px; padding: 5px; box-shadow: 0 3px 10px -3px rgba(0,0,0,0.45); }
.footer-brand span { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--gold); }
.footer-tag { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 15px; margin-top: 8px; }
.footer-col h4 { font-size: 14px; color: var(--cream); margin: 0 0 12px; }
.footer-col nav { display: flex; flex-direction: column; gap: 8px; }
.footer-col nav a { color: var(--on-navy-soft); font-size: 14px; }
.footer-col nav a:hover { color: var(--cream); }
.footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); text-align: center; color: var(--on-navy-soft); font-size: 13px; }

/* Pricing elements: hidden until the --pricing-display flag (in :root) is flipped to "block". */
.pricing-only { display: var(--pricing-display); }

/* ============================================================================
   BREAKPOINTS (mobile-first scale-up)
   ============================================================================ */
@media (min-width: 560px) {
  .trade-grid { grid-template-columns: repeat(2, 1fr); }
  .trade-tile { aspect-ratio: 3 / 2; }
}
@media (min-width: 640px) {
  section { padding: 3.25rem 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .diff-cols { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr; }
  .hero-inner { padding: 5rem 0 4.25rem; }
}
@media (min-width: 900px) {
  section { padding: 4.25rem 0; }
  /* Nav unified to a single hamburger at all widths — desktop overrides removed. */
  .cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .trade-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tiles.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .steps.cols-2 { grid-template-columns: 1fr 1fr; }
  .hero-inner { padding: 6.5rem 0 5.5rem; }
  .promo-inner { flex-direction: row; text-align: left; gap: 36px; }
  .promo-inner .promo-copy { flex: 1; }
}
@media (min-width: 1100px) {
  section { padding: 4.75rem 0; }
}

/* ============================================================================
   PORTAL — gated investor / design-partner pages, login screen, and the
   discreet footer "Investor / Partner Login" link added across the site.
   Same card-in-card language; the login screen is a centered navy card.
   ============================================================================ */

/* Footer login link — discreet on the public marketing site, not a CTA. */
.footer-login { margin-top: 18px; }
.footer-login a {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--on-navy-soft); font-weight: 600;
  border: 1px solid rgba(212,168,67,0.18); border-radius: 999px;
  padding: 7px 13px; display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, border-color .15s, background .15s;
}
.footer-login a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: .7;
}
.footer-login a:hover { color: var(--cream); border-color: var(--gold); background: rgba(212,168,67,0.06); }

/* Login screen — single centered card on the whisper-grid navy. The min-height
   subtracts header + the slim footer so the page fits one viewport without
   creating a second scroll just for the footer strip. */
.login-shell { min-height: calc(100vh - 64px - 80px); display: flex; align-items: center; justify-content: center; padding: 3rem var(--pad); }
.login-card {
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, var(--card-navy) 0%, var(--navy) 100%);
  border: 1px solid var(--line-gold); border-radius: 18px;
  padding: 36px 30px 30px; position: relative; overflow: hidden;
  box-shadow: 0 40px 90px -42px rgba(0,0,0,0.7);
}
.login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--gold)); }
.login-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-mark img { width: 44px; height: 44px; object-fit: contain; background: var(--cream); border-radius: 10px; padding: 5px; }
.login-mark span { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--cream); }
.login-card h1 { font-size: clamp(26px, 6vw, 34px); color: var(--cream); margin: 0 0 6px; }
.login-card .login-sub { color: var(--on-navy-soft); font-size: 14.5px; margin: 0 0 22px; }
.login-form { display: grid; gap: 14px; }
.login-form label { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; margin-bottom: 6px; display: block; }
.login-form input {
  width: 100%; background: var(--navy); color: var(--cream);
  border: 1px solid var(--line-gold); border-radius: 10px;
  padding: 13px 14px; font-family: var(--sans); font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.18); }
.login-form .field { display: block; }
.login-form .login-submit { margin-top: 8px; width: 100%; }
.login-msg { font-size: 13px; min-height: 1.2em; margin: 0; }
.login-msg.err { color: #E68A6A; }
.login-msg.ok { color: var(--gold-soft); }
.login-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(212,168,67,0.16);
  font-size: 12.5px; color: var(--on-navy-soft); line-height: 1.55; text-align: center; }
.login-foot a { color: var(--gold-soft); }

/* Portal page chrome — sub-header strip with role badge + logout. */
.portal-strip {
  background: rgba(18,30,48,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,168,67,0.16);
  font-size: 13px;
}
.portal-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.portal-role { display: inline-flex; align-items: center; gap: 9px; color: var(--on-navy); font-weight: 600; }
.portal-role::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.22);
}
.portal-strip .portal-logout {
  background: none; border: 1px solid var(--line-gold); color: var(--on-navy-soft);
  font-family: var(--sans); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.portal-strip .portal-logout:hover { color: var(--cream); border-color: var(--gold); }

/* Portal section slots — clearly marked "placeholder" containers. */
.portal-slot {
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(212,168,67,0.32);
  border-radius: 14px;
  padding: 22px; min-height: 180px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--on-navy-soft); font-size: 14px;
}
.portal-slot .slot-label {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 700;
}
.portal-slot .slot-hint { color: var(--on-navy-soft); font-size: 13.5px; line-height: 1.55; margin: 0; }
.portal-slot.is-embed { aspect-ratio: 16 / 9; min-height: 0; padding: 0; align-items: center; justify-content: center; text-align: center; }
.portal-slot.is-embed .slot-body { padding: 22px; }

/* Live media frame — used when a real iframe replaces the placeholder slot.
   16:9 ratio matches the slot it replaces so cards stay the same height. */
.video-embed { aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid var(--line-gold); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6); }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.portal-grid-2 { display: grid; gap: 18px; }
@media (min-width: 800px) { .portal-grid-2 { grid-template-columns: 1fr 1fr; } }

.portal-section h2 { color: var(--cream); }
.portal-section .lede { color: var(--on-navy); }
.portal-section { padding: 2rem 0; }

/* Access cards — shared layout for the LOGIN + REQUEST card on both the
   Investor and Partner public pages. Same family, same typography, same
   two-button rhythm — so the two pages feel structurally parallel without
   any inline font overrides leaking into the markup. */
.access-card { text-align: center; padding: 38px 30px 32px; }
.access-card .eyebrow { display: block; margin: 0 0 14px; }
.access-card-h2 {
  font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -.3px;
  font-size: clamp(24px, 5vw, 32px);
  color: var(--cream) !important;
  margin: 0 0 .55em;
}
.access-card-body {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.6;
  color: var(--on-navy) !important;
  max-width: 56ch; margin: 0 auto 1.6rem;
}
.access-card .btn-row { justify-content: center; }
.access-card-foot {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .3px; line-height: 1.55;
  color: var(--on-navy-soft) !important;
  max-width: 56ch; margin: 1.3rem auto 0;
}
.access-card-foot a { color: var(--gold-soft); }

/* Design-partner request form — matches the founding form styling. */
.dp-form { max-width: 620px; margin: 0 auto; display: grid; gap: 14px; }
.dp-form label { font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
.dp-form input, .dp-form select, .dp-form textarea {
  width: 100%; background: var(--card-navy); color: var(--cream);
  border: 1px solid var(--line-gold); border-radius: 10px;
  padding: 12px 14px; font-family: var(--sans); font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.dp-form textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.dp-form input:focus, .dp-form select:focus, .dp-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.18);
}
.dp-form .row-2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .dp-form .row-2 { grid-template-columns: 1fr 1fr; } }
.dp-form .form-status { font-size: 13px; margin: 0; min-height: 1.2em; }
.dp-form .form-status.err { color: #E68A6A; }
.dp-form .fo