/* ============ PAGE CHROME (used by /pages/*.html) ============ */

/* Page hero */
.page-hero{
  position:relative; padding: 88px 0 56px; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:-20% -10% 30% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 320px at 20% 10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(600px 280px at 90% 0%, rgba(129,140,248,.12), transparent 60%);
}
.page-hero .container{ position:relative; z-index:1 }
.crumbs{
  display:inline-flex; gap:6px; align-items:center; font-size:13px; color: var(--muted);
  margin-bottom: 18px;
}
.crumbs a{ color: var(--muted); padding: 4px 8px; border-radius:7px }
.crumbs a:hover{ background: var(--primary-soft); color: var(--primary-ink) }
.crumbs .sep{ opacity:.5 }
.crumbs .here{ color: var(--ink-2); font-weight:600; padding:4px 8px }

.page-title{
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800; letter-spacing: -.028em; line-height: 1.05;
  margin: 0 0 18px; text-wrap: balance; max-width: 18ch;
}
.page-lede{
  font-size: 19px; color: var(--muted); margin: 0 0 8px; max-width: 60ch;
  text-wrap: pretty;
}
.page-meta{
  margin-top: 22px; display:inline-flex; gap:14px; align-items:center;
  font-size: 13px; color: var(--muted);
}
.page-meta b{ color: var(--ink-2) }

/* ============ ABOUT ============ */
.about-cols{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: 60px;
  padding: 40px 0 80px; align-items:start;
}
.about-cols h2{ font-size: 28px; letter-spacing:-.02em; margin: 0 0 14px }
.about-cols p{ font-size: 16px; color: var(--ink-2); line-height: 1.65; margin: 0 0 14px }
.about-side{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.about-side h3{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); margin: 0 0 16px; font-weight:700 }
.about-side dl{ margin:0; display:grid; gap: 14px }
.about-side dt{ font-size: 12.5px; color: var(--muted); font-weight: 600 }
.about-side dd{ margin: 2px 0 0; font-size: 15.5px; font-weight:600; color: var(--ink) }

.values{ padding: 60px 0 90px; background:#F4F5F9; border-top:1px solid var(--line) }
.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 32px }
.value{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.value-num{
  font-family: var(--mono); font-size: 12px; color: var(--primary);
  background: var(--primary-soft); display:inline-block; padding: 3px 9px; border-radius: 6px;
  margin-bottom: 14px; font-weight: 700; letter-spacing:.04em;
}
.value h3{ font-size: 17px; margin: 0 0 6px; letter-spacing:-.01em }
.value p{ font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.55 }

.team{ padding: 80px 0 100px }
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 32px }
.member{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-align:center;
}
.member-photo{
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
  display:grid; place-items:center; font-weight: 800; font-size: 28px; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-3));
  letter-spacing:-.02em;
}
.member h4{ font-size: 15px; margin: 0 0 2px }
.member small{ font-size: 12.5px; color: var(--muted) }

/* ============ ROADMAP ============ */
.roadmap{ padding: 40px 0 100px }
.roadmap-rail{
  position:relative; padding-left: 40px; margin-top: 28px;
}
.roadmap-rail::before{
  content:""; position:absolute; left: 14px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--primary), var(--primary-soft));
  border-radius:2px;
}
.r-quarter{
  position:relative; padding: 14px 0 36px;
}
.r-quarter::before{
  content:""; position:absolute; left:-32px; top: 22px; width: 12px; height: 12px;
  background: var(--primary); border-radius: 50%;
  box-shadow: 0 0 0 5px var(--primary-soft);
}
.r-quarter.done::before{ background: var(--success); box-shadow: 0 0 0 5px #DCFCE7 }
.r-quarter.planned::before{ background:#fff; border:2px solid var(--line); box-shadow: 0 0 0 5px #fff }
.r-head{
  display:flex; gap: 14px; align-items: baseline; margin-bottom: 16px;
}
.r-head h2{ font-size: 28px; font-weight: 800; letter-spacing:-.02em; margin: 0 }
.r-status{
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  font-weight: 700; letter-spacing:.04em; text-transform: uppercase;
}
.r-status.live{ background: #DCFCE7; color:#166534 }
.r-status.now{ background: #FEF3C7; color:#92400E }
.r-status.next{ background: #EDE9FE; color:#5B21B6 }
.r-status.later{ background:#F4F5F9; color: var(--muted) }
.r-items{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px }
.r-item{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display:flex; align-items: flex-start; gap: 12px;
}
.r-item i{
  width: 32px; height: 32px; border-radius: 9px; flex-shrink:0;
  background: var(--primary-soft); color: var(--primary);
  display:grid; place-items:center; font-size: 13px;
}
.r-item b{ display: block; font-size: 14.5px; margin-bottom: 3px }
.r-item small{ font-size: 12.5px; color: var(--muted); line-height: 1.45 }

/* ============ BLOG ============ */
.blog-list{ padding: 40px 0 90px }
.post-featured{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0; margin-bottom: 32px; display:grid; grid-template-columns: 1.1fr 1fr;
  overflow:hidden; box-shadow: var(--shadow-md);
}
.post-featured .post-cover{
  position:relative; min-height: 360px;
  background:
    radial-gradient(400px 200px at 30% 30%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, #4F46E5, #312E81);
  color:#fff; padding: 36px; display:flex; flex-direction:column; justify-content:flex-end;
}
.post-cover .post-eyebrow{
  font-size: 11.5px; letter-spacing:.08em; text-transform: uppercase;
  font-weight: 700; background: rgba(255,255,255,.18); padding: 4px 10px;
  border-radius: 999px; align-self:flex-start; margin-bottom: 16px;
}
.post-cover h2{ font-size: 28px; line-height:1.2; margin: 0 0 12px; letter-spacing:-.02em }
.post-cover p{ font-size: 14.5px; opacity:.85; margin: 0 0 20px }
.post-cover .post-meta{ font-size: 12.5px; opacity:.8; display:flex; gap: 10px; align-items: center }

.post-featured .post-body{ padding: 36px; display:flex; flex-direction:column; gap: 14px; justify-content:center }
.post-featured .post-body h3{ font-size: 22px; margin: 0; line-height:1.25; letter-spacing:-.01em }
.post-featured .post-body p{ margin:0; color: var(--muted); font-size: 15px }
.post-featured .read{ color: var(--primary); font-weight: 700; font-size: 14px; display:inline-flex; align-items:center; gap: 6px }

.posts{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.post{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.post:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #DCDFEB }
.post .cover{
  height: 160px; position:relative;
  display:flex; align-items:flex-end; padding: 16px; color:#fff;
}
.post .cover .tag{
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.85); color: var(--ink); font-weight: 700;
  letter-spacing:.04em; text-transform: uppercase;
}
.post .cover.c1{ background: linear-gradient(135deg, #4F46E5, #818CF8) }
.post .cover.c2{ background: linear-gradient(135deg, #16A34A, #4ADE80) }
.post .cover.c3{ background: linear-gradient(135deg, #D97706, #F59E0B) }
.post .cover.c4{ background: linear-gradient(135deg, #DC2626, #F87171) }
.post .cover.c5{ background: linear-gradient(135deg, #0EA5E9, #38BDF8) }
.post .cover.c6{ background: linear-gradient(135deg, #7C3AED, #A78BFA) }
.post .cover.c7{ background: linear-gradient(135deg, #0891B2, #22D3EE) }
.post .cover.c8{ background: linear-gradient(135deg, #B45309, #D97706) }

.post .body{ padding: 18px }
.post .body h3{ font-size: 16.5px; line-height:1.35; margin: 0 0 8px; letter-spacing:-.005em }
.post .body p{ font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height:1.5 }
.post .meta{ font-size:12px; color: var(--muted); display:flex; gap:8px; align-items:center }
.post .meta .dot{ width:3px; height:3px; background: var(--muted); border-radius:50%; opacity:.5 }

/* ============ PARTNERS ============ */
.partner-types{ padding: 40px 0 80px }
.pt-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 32px }
.pt-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px;
}
.pt-icon{
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--primary-soft); color: var(--primary);
  display:grid; place-items:center; font-size: 22px; margin-bottom: 18px;
}
.pt-card h3{ font-size: 20px; margin: 0 0 10px; letter-spacing:-.01em }
.pt-card > p{ color: var(--muted); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55 }
.pt-card ul{ list-style:none; padding:0; margin: 0 0 24px; display:grid; gap: 8px; font-size: 14px; color: var(--ink-2) }
.pt-card li{ display:flex; gap:9px; align-items:flex-start }
.pt-card li i{ color: var(--success); font-size: 12px; margin-top:5px }

.partner-perks{ padding: 60px 0 90px; background:#F4F5F9; border-top:1px solid var(--line) }
.perks-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px }
.perk{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.perk i{ color: var(--primary); font-size: 18px; margin-bottom: 10px; display:block }
.perk b{ display:block; font-size: 15px; margin-bottom: 4px }
.perk small{ font-size: 13px; color: var(--muted); line-height: 1.5 }

.partner-cta{
  padding: 80px 0; text-align: center;
}
.partner-cta h2{ font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; letter-spacing:-.025em; margin: 0 0 14px }
.partner-cta p{ color: var(--muted); font-size: 17px; max-width: 50ch; margin: 0 auto 28px }

/* ============ LEGAL ============ */
.legal-wrap{ padding: 30px 0 100px }
.legal-grid{
  display:grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start;
}
.legal-toc{
  position: sticky; top: 90px;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.legal-toc h4{
  font-size: 12px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--muted); margin: 0 0 12px; font-weight:700;
}
.legal-toc ol{
  margin: 0; padding-left: 1.2em; display: grid; gap: 8px;
  font-size: 13.5px; color: var(--ink-2);
}
.legal-toc a{ color: var(--ink-2); padding: 2px 0; display:inline-block }
.legal-toc a:hover{ color: var(--primary) }

.prose{
  font-size: 16px; line-height: 1.65; color: var(--ink-2);
  max-width: 70ch;
}
.prose h2{
  font-size: 22px; font-weight: 800; letter-spacing:-.015em;
  margin: 36px 0 12px; color: var(--ink); scroll-margin-top: 90px;
}
.prose h2:first-child{ margin-top: 0 }
.prose h3{ font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--ink) }
.prose p{ margin: 0 0 14px }
.prose ul{ margin: 0 0 14px; padding-left: 1.2em }
.prose ul li{ margin-bottom: 6px }
.prose strong{ color: var(--ink); font-weight: 600 }
.prose a{ color: var(--primary); text-decoration: underline; text-underline-offset: 3px }
.prose code{
  background: var(--primary-soft); color: var(--primary-ink);
  padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 13px;
}
.prose .callout{
  background:#FFF7ED; border:1px solid #FED7AA; color: #7C2D12;
  padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: 14.5px; margin: 18px 0;
}
.prose .callout b{ color: #7C2D12 }

.legal-meta{
  display:flex; gap: 14px; flex-wrap: wrap; font-size: 13px;
  color: var(--muted); margin-top: 10px;
}
.legal-meta b{ color: var(--ink-2) }
.legal-meta .pill{
  background:#fff; border:1px solid var(--line); padding: 4px 10px;
  border-radius: 999px; font-size: 12px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .about-cols, .legal-grid{ grid-template-columns: 1fr; gap: 32px }
  .legal-toc{ position: static }
  .values-grid, .pt-grid, .perks-grid, .team-grid, .posts, .r-items{ grid-template-columns: repeat(2,1fr) }
  .post-featured{ grid-template-columns: 1fr }
}
@media (max-width: 760px){
  .values-grid, .pt-grid, .perks-grid, .team-grid, .posts, .r-items{ grid-template-columns: 1fr }
}