:root {
  --bg0:#0a0d16; 
  --bg1:#0f1320; 
  --bg2:#1a2138;
  --glass: rgba(255,255,255,.06); 
  --border: rgba(255,255,255,.12);
  --text:#fff; 
  --dim:rgba(255,255,255,.72); 
  --accent:#6e8bff;
}

html, body {
  height:100%; 
  background: radial-gradient(1200px 600px at 10% 10%, #1e2642 0%, #0f1320 50%, #0a0d16 100%); 
  color:var(--text); 
  margin:0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

.wrap {min-height:100svh; display:grid; place-items:center; padding:3.5rem 1.25rem;}
.card {max-width:960px; width:100%; border:1px solid var(--border); background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.04)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.45); padding: min(5vw,3rem);}
.row {display:grid; gap:1rem;}
.top {display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.brand {display:flex; align-items:center; gap:.75rem;}
.wordmark {letter-spacing:.18em; font-weight:600;}
.wordmark sup {font-size:0.5em; vertical-align:super;}
.badge {border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; background:rgba(255,255,255,.08); color:#cbd5ff; font-size:.85rem;}
.tagline {font-size:clamp(1.6rem,1.1rem + 1.6vw,2.2rem); line-height:1.2; margin:.75rem 0 0;}
.mini {color:var(--dim); font-size:1rem; margin:.75rem 0 1.25rem;}
.btns {display:flex; gap:.75rem; flex-wrap:wrap;}
.btn {appearance:none; border:none; border-radius:12px; padding:.9rem 1.2rem; font-weight:600; cursor:pointer; transition:.2s transform ease, .2s opacity ease;}
.btn.primary {background:var(--accent); color:#fff;}
.btn.ghost {background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5);}
.btn:hover {transform:translateY(-1px);}
.bullets {display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1.5rem;}
.bullet {display:flex; gap:.75rem;}
.glyph {width:36px; height:36px;}
hr {border:none; border-top:1px solid rgba(255,255,255,.15); margin:1.5rem 0;}
.foot {display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--dim); font-size:.95rem; flex-wrap:wrap;}
a {color:#cbd5ff; text-decoration:none;}
a:hover {text-decoration:underline;}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.logo {
  height: 48px; 
  width: auto; 
  filter: brightness(0) invert(1); /* turns dark logo white */
}
/* Collapsible animation */
/* Collapsible animation */
.collapsible {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms ease, opacity 240ms ease;
  will-change: max-height, opacity;
}
.collapsible.is-open { opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .collapsible { transition: none; }
}  /* ← THIS was missing */

/* TM microtype helpers */
.tm { font-size: 0.6em; vertical-align: super; line-height: 0; margin-left: 0.08em; }
.nowrap { white-space: nowrap; }

/* Branded tooltip using a data attribute (no extra markup) */
.has-tip { position: relative; display: inline-flex; align-items: center; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 6px 10px;
  font-size: 0.85rem; line-height: 1.2; color: var(--dim);
  background: rgba(255,255,255,0.10); border:1px solid var(--border); border-radius:8px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); white-space: normal; text-align: center; z-index: 100;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease;
}
.has-tip::before {
  content: ""; position: absolute; bottom:115%; left:50%; transform: translateX(-50%);
  border-width:6px; border-style:solid;
  border-color: rgba(255,255,255,0.10) transparent transparent transparent;
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease;
}
.has-tip:hover::after, .has-tip:hover::before,
.has-tip:focus-visible::after, .has-tip:focus-visible::before { opacity:1; visibility:visible; }
@media (hover:none){ .has-tip::after, .has-tip::before { display:none; } }

/* Investor Portal layout */
.portal-hero{
  display:flex; align-items:center; gap:2rem; margin:2rem 0; flex-wrap:wrap;
}
.portal-hero .poster{
  max-width:380px; width:100%; height:auto; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); flex:0 0 320px;
}
.portal-hero .intro-text{ flex:1 1 420px; max-width:520px; }
.portal-hero .intro-text h1{ font-size:2rem; margin:.25rem 0 1rem; }
.portal-hero .intro-text p{ color:var(--dim); font-size:1.1rem; margin:0 0 1.25rem; }

/* Lockbox cards */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:.5rem; }
.doc-card{ border:1px solid var(--border); background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.04)); border-radius:14px; padding:1rem; }
.doc-head{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.5rem; }
.doc-name{ font-weight:600; }
.doc-meta{ color:var(--dim); font-size:.9rem; }
.doc-desc{ color:var(--dim); margin:.25rem 0 .75rem; }
.doc-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Logout button tweak (optional) */
.logout-btn{ padding:.5rem 1rem; font-size:.9rem; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.05); margin-left:.5rem; }
.logout-btn:hover{ background:rgba(255,255,255,.15); text-decoration:none; }
/* --- Lockbox presentation --- */
.lockbox { margin-top: 1rem; }

.section-title {
  text-align: center;
  margin: .25rem 0 .25rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}
.section-title .stamp {
  display: block;
  font-size: .95rem;
  color: var(--dim);
  margin-top: .25rem;
}

.section-note { text-align: center; }

.lockbox-category { margin: 1.25rem 0; }

.cat-title {
  text-align: center;
  margin: .5rem 0 .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  position: relative;
}
.cat-title::after {
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  background: var(--accent);
  opacity: .9;
  margin: .4rem auto 0;
  border-radius: 3px;
}

.doc-list { 
  list-style: none; 
  padding: 0; 
  margin: 0;
  display: grid;
  gap: .6rem;
}
.doc-list.two-col {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.doc-list li {
  border: 1px solid var(--border);
  background: var(--glass);
  border-radius: 10px;
  padding: .75rem 1rem;
}
.doc-list a { color: #fff; text-decoration: none; font-weight: 600; }
.doc-list a:hover { text-decoration: underline; }
.doc-list .meta { color: var(--dim); font-weight: 500; }

/* --- Maya Thought (from earlier) --- */
.card-fragment {
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.04));
  border-radius:14px;
  padding:1.25rem 1.25rem 1rem;
  margin:2rem 0;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.maya-quote-glyph{ width:24px; height:24px; opacity:.6; display:block; margin:0 auto .5rem; }
.maya-thought-text{
  margin:0; font-style:italic;
  font-size:clamp(1.05rem, 1rem + .6vw, 1.35rem);
  line-height:1.45; text-align:center; color:var(--dim);
  opacity:0; transform:translateY(6px); animation:thoughtFade .5s ease forwards;
}
.maya-thought-signoff{ text-align:center; margin-top:.35rem; color:#cbd5ff; letter-spacing:.04em; font-weight:600; opacity:.85; }
@keyframes thoughtFade{ to{ opacity:1; transform:translateY(0); } }
/* ==== Lockbox polish overrides ==== */
.lockbox { margin-top: 1.25rem; }

/* Title + stamp */
.section-title{
  text-align:center;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  margin: .5rem 0 .25rem;
}
.section-title .stamp{
  display:block; margin-top:.25rem; color:var(--dim); font-size:.95rem;
}

/* Each category separated a bit */
.lockbox-category + .lockbox-category {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

/* Category headers – bigger + accent underline */
.cat-title{
  text-align:center; margin:.5rem 0 .75rem; font-weight:800;
  letter-spacing:.02em; font-size:1.2rem;
  position:relative;
}
.cat-title::after{
  content:""; display:block; width:88px; height:3px; margin:.45rem auto 0;
  background:var(--accent); border-radius:3px; opacity:.95;
}

/* Two fixed columns on wide view, one on mobile */
.doc-list{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.doc-list.two-col{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
@media (max-width: 760px){
  .doc-list.two-col{ grid-template-columns: 1fr; }
}

/* File pills: narrower, centered, hover lift */
.doc-list li{
  justify-self: center;                 /* center each pill in its column */
  width: min(520px, 100%);              /* keep pills from stretching too wide */
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.04));
  border-radius:12px; padding:.85rem 1rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.doc-list li:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  background: rgba(255,255,255,.08);
}

.doc-list a{ color:#fff; text-decoration:none; font-weight:700; }
.doc-list a:hover{ text-decoration:underline; }
.doc-list .meta{ color:var(--dim); font-weight:500; }
/* --- Lockbox pills overlap fix --- */
.doc-list.two-col{
  /* let columns flex correctly with no overflow */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* make each pill fill its grid cell (no fixed width) */
.doc-list li{
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Optional: contain overall lockbox width so lines don’t feel too long */
.lockbox {
  max-width: 1100px;
  margin-inline: auto;
}
/* keep single-column on small screens */
@media (max-width: 760px){
  .doc-list.two-col{ grid-template-columns: 1fr; }
}
/* --- Request form polish --- */
.request-form { 
  margin-top: .75rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg,var(--glass),rgba(255,255,255,.04));
  border-radius: 12px;
  padding: 1rem;
}

.request-form label { display:block; }
.request-form label span { display:block; margin: .25rem 0 .35rem; color: var(--dim); font-size:.95rem; }

.request-form input,
.request-form select,
.request-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #fff;
  padding: .7rem .8rem;
  font: inherit;
  outline: none;
}

.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus {
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(110,139,255,.25);
}

.grid2 { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

.alert { margin-top: .6rem; padding:.6rem .8rem; border-radius:8px; font-size:.95rem; }
.alert.success { background: rgba(56, 178, 172, 0.16); border:1px solid rgba(56, 178, 172, .35); }
.alert.error   { background: rgba(239, 68, 68, 0.16);  border:1px solid rgba(239, 68, 68, .35); }

/* Make the Investor Portal button not wrap weirdly next to long text above */
.btns .btn { white-space: nowrap; }