/* ========================================================================
   investor-portal.css — page-unique styles for the tiered DATA ROOM.

   Owner: P7-investor-portal (Phase 1). Consumes the §1 SEMANTIC tokens from
   vc-tokens.css (+ vc-aliases for legacy names) and the shared components
   in vc-components.css / vc-b2b2c.css / vc-charts.css. NO raw hex, no rogue
   :root / [data-theme] palette block (those live ONLY in vc-tokens.css).

   All units rem-first. CSP-clean: classes + custom properties only; the JS
   never writes inline style except the sanctioned setProperty('--w', …) on
   dilution segments (consumed by vc-b2b2c.css width:var(--w)).
   ======================================================================== */

/* ---- Page shell: offset for fixed SHARED_DASHBOARD header + .vc-nav ----- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 4rem); }
.ip-body { padding-top: calc(var(--header-height) + 4rem); }
.vc-nav.ip-nav { top: 4rem; }   /* sits below the 4rem SHARED_DASHBOARD header */

/* skip-link (page-owned; foundation only ships the focus reveal helper) ---- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--header-height) + 4.5rem);
  z-index: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: var(--text-on-brand);
  font-family: var(--font-data);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring), var(--shadow-lg); }

/* small button size used in nav + access banner --------------------------- */
.btn-sm {
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
}

/* ======================================================================== *
   HERO — floating decorative icons (reduced-motion safe)
   ======================================================================== */
.ip-hero { padding-block: calc(var(--header-height) + var(--space-16)) var(--space-16); }

.ip-hero-floats {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ip-float {
  position: absolute;
  font-size: var(--fs-7xl);
  color: var(--text-on-brand);
  opacity: 0.07;
  animation: ip-float-anim 7s var(--ease-standard) infinite;
}
.ip-float:nth-child(1) { top: 14%; left: 7%;  animation-delay: 0s; }
.ip-float:nth-child(2) { top: 22%; right: 9%; animation-delay: 1.4s; }
.ip-float:nth-child(3) { bottom: 18%; left: 11%; animation-delay: 2.8s; }
.ip-float:nth-child(4) { bottom: 26%; right: 13%; animation-delay: 4.2s; }
.ip-float:nth-child(5) { top: 48%; left: 48%; animation-delay: 2s; }
@keyframes ip-float-anim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1.25rem) rotate(5deg); }
}

.ip-btn-outline-hero {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--text-on-brand);
}
.ip-btn-outline-hero:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-brand);
}

/* ======================================================================== *
   Section scaffolding
   ======================================================================== */
.ip-section-alt { background: var(--bg-surface-2); }

.ip-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-6);
}
.ip-section-head h2 { margin: 0; }

.ip-dr-sub,
.ip-block-intro {
  color: var(--text-secondary);
  max-width: var(--max-width-prose);
  line-height: 1.6;
  margin: 0;
}
.ip-block-intro { margin: var(--space-2) 0 var(--space-5); }

.ip-thesis {
  color: var(--text-primary);
  max-width: 52rem;
  margin: 0 0 var(--space-6);
}
.ip-summary-lead { color: var(--text-secondary); max-width: 52rem; margin-top: var(--space-6); }

/* "Illustrative — for discussion" treatments ------------------------------ */
.ip-illustrative-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
}
.ip-illustrative-note i { color: var(--accent-partner); font-style: normal; }

.ip-illustrative-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-partner) 14%, transparent);
  color: var(--accent-partner);
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ======================================================================== *
   Public pillar chips row
   ======================================================================== */
.ip-pillars-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ip-pillar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.ip-pillar-chip i { color: var(--accent-primary); }

/* ======================================================================== *
   Access status banner (driven by /access-check)
   ======================================================================== */
.ip-access-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 0.0625rem solid var(--border-subtle);
  background: var(--bg-inset);
}
.ip-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-partner) 16%, transparent);
  color: var(--accent-partner);
}
.ip-access-text {
  flex: 1 1 16rem;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.ip-access-cta { margin-left: auto; }

/* Unlocked state: green confirmation, hide the CTA */
.ip-access-banner[data-tier="2"],
.ip-access-banner[data-tier="3"] {
  background: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-secondary) 40%, transparent);
}
.ip-access-banner[data-tier="2"] .ip-access-icon,
.ip-access-banner[data-tier="3"] .ip-access-icon {
  background: color-mix(in srgb, var(--accent-secondary) 18%, transparent);
  color: var(--accent-secondary);
}
.ip-access-banner[data-tier="2"] .ip-access-cta,
.ip-access-banner[data-tier="3"] .ip-access-cta { display: none; }

/* ======================================================================== *
   Data-room panels — selected-tab styling + gate/content swap
   ======================================================================== */
.data-room__cat[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}
.ip-doc-grid-tight { margin-top: 0; }

.ip-block-h {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-3);
}

/* proof / reasons / econ lists -------------------------------------------- */
.ip-proof-list,
.ip-econ-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.ip-proof-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: 1.5;
}
.ip-proof-list li i { color: var(--accent-secondary); margin-top: 0.2rem; flex-shrink: 0; }

.ip-econ-list li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-left: 0.25rem solid var(--accent-primary);
}
.ip-econ-list .ip-econ-line {
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
}
.ip-econ-list .ip-econ-detail {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* pilot funnel (ordered, numbered) ---------------------------------------- */
.ip-funnel {
  list-style: none;
  counter-reset: ipfunnel;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.ip-funnel li {
  counter-increment: ipfunnel;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
}
.ip-funnel li::before {
  content: counter(ipfunnel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--text-on-brand);
  font-family: var(--font-data);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ip-funnel .ip-funnel-stage {
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  color: var(--text-primary);
}
.ip-funnel .ip-funnel-detail {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ======================================================================== *
   Team — avatar monogram (canonical roster, cloned from template)
   ======================================================================== */
.ip-team-card { text-align: center; }
.ip-team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  font-family: var(--font-data);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-on-brand);
  background: var(--grad-brand);
}
/* rotate avatar accents per card for visual rhythm */
.ip-team-card:nth-child(3n+2) .ip-team-avatar { background: var(--grad-growth); }
.ip-team-card:nth-child(3n+3) .ip-team-avatar { background: var(--grad-ai); }

.team-card .team-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.team-card .team-role {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-secondary);
  margin: 0 0 var(--space-3);
}
.team-card .team-bio {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* gradient helpers used by the avatar (semantic tokens, not raw hex) ------ */
.grad-brand  { background: var(--grad-brand); }
.grad-growth { background: var(--grad-growth); }
.grad-ai     { background: var(--grad-ai); }

/* ======================================================================== *
   FAQ — the accordion is the shared .vc-faq (vc-learn.css), bound from
   gtm.faq. This page only owns the small "more answers" CTA beneath it.
   ======================================================================== */
/* Rides on .ip-dr-sub for text color + prose width; the accordion's own
   bottom margin supplies the gap above, so this only de-emphasizes the row. */
.ip-faq-more { font-size: var(--fs-sm); }

/* ======================================================================== *
   Contact form
   ======================================================================== */
.ip-form { margin-top: var(--space-2); }
.ip-optional { font-weight: 400; color: var(--text-muted); }
.ip-submit-row { text-align: center; margin-top: var(--space-5); }
.ip-modal-sub {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}

/* form status (page-level, e.g. contact) ---------------------------------- */
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  display: none;
}
.form-status.success {
  display: block;
  background: color-mix(in srgb, var(--status-success) 16%, transparent);
  color: var(--status-success-text);
}
.form-status.error {
  display: block;
  background: color-mix(in srgb, var(--status-error) 16%, transparent);
  color: var(--status-error-text);
}

/* ======================================================================== *
   Reduced motion — pause the hero floating icons
   (foundation supplies the global blanket; this covers page-owned anims;
   the shared .vc-faq handles its own reduced-motion in vc-learn.css)
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ip-float { animation: none; }
}

/* ======================================================================== *
   Print — flatten the hero, hide interactive chrome
   ======================================================================== */
@media print {
  .ip-hero-floats,
  .ip-access-banner,
  .ip-nav-register { display: none !important; }
  .ip-hero { background: none; color: #000; padding-top: var(--space-8); }
  .data-room__gate { page-break-inside: avoid; }
}