/* ==========================================================================
   AsySandbox — shared stylesheet
   Palette: ink (near-black), paper (white), fog (grays), blue (signal accent)
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (data only)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:        #0E1116;
  --ink-soft:   #1A1F28;
  --paper:      #FFFFFF;
  --fog-100:    #F5F6F8;
  --fog-200:    #ECEEF1;
  --fog-300:    #DEE2E7;
  --fog-500:    #9AA1AC;
  --fog-700:    #565C66;
  --blue-600:   #2451FF;
  --blue-700:   #1938C4;
  --blue-100:   #E9EDFF;

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max-w: 1160px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 700; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--fog-700); max-width: 62ch; }

a{ color: inherit; text-decoration: none; }

ul, ol{ margin: 0; padding: 0; list-style: none; }

img{ max-width: 100%; display: block; }

button{ font-family: inherit; }

:focus-visible{
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--ink{ background: var(--ink); color: var(--paper); }
.section--ink p{ color: var(--fog-300); }
.section--fog{ background: var(--fog-100); padding: 88px 0; }

.eyebrow-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blue-600);
  background: var(--blue-100);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.section--ink .eyebrow-tag,
.hero-photo .eyebrow-tag,
.page-banner .eyebrow-tag{ background: rgba(36,81,255,0.22); color: #A9BAFF; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary{ background: var(--blue-600); color: var(--paper); }
.btn-primary:hover{ background: var(--blue-700); }
.btn-dark{ background: var(--ink); color: var(--paper); }
.btn-dark:hover{ background: var(--ink-soft); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--fog-300); }
.btn-outline:hover{ border-color: var(--ink); }
.section--ink .btn-outline{ color: var(--paper); border-color: rgba(255,255,255,0.3); }
.section--ink .btn-outline:hover{ border-color: var(--paper); }
.btn-ghost{ background: transparent; color: var(--ink); padding: 13px 6px; }
.btn-ghost:hover{ color: var(--blue-600); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }

/* ==========================================================================
   Header / nav — hardcoded identically on every page
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fog-300);
}
.nav{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.nav-logo-mark{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
  flex: none;
}
.nav-logo-mark::before, .nav-logo-mark::after{
  content: "";
  position: absolute;
  border-radius: 2px;
  background: var(--blue-600);
}
.nav-logo-mark::before{ width: 12px; height: 4px; left: 8px; top: 9px; }
.nav-logo-mark::after{ width: 7px; height: 4px; left: 8px; top: 16px; }

.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a{
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fog-700);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color: var(--ink);
  border-bottom-color: var(--blue-600);
}
.nav-actions{ display: flex; align-items: center; gap: 12px; }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span{
  width: 22px; height: 2px; background: var(--ink); display: block;
}

@media (max-width: 900px){
  .nav-links{
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--fog-300);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.is-open{ display: flex; }
  .nav-links a{ width: 100%; padding: 12px 0; border-bottom: 1px solid var(--fog-200); }
  .nav-actions .btn-ghost{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-links .nav-login-mobile{ display: block; font-weight: 600; color: var(--ink); }
}

/* ==========================================================================
   Photo hero / banners — real photography, not decoration
   ========================================================================== */
.hero-photo{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9,11,15,0.55) 0%, rgba(9,11,15,0.78) 55%, rgba(9,11,15,0.94) 100%);
}
.hero-photo-inner{
  position: relative;
  z-index: 1;
  padding: 64px 0 56px;
  width: 100%;
}
.hero-photo h1{ color: var(--paper); }
.hero-photo p{ color: var(--fog-300); }

/* ---------- Hero slider (index) — 7 slides, dots only, no arrows ---------- */
.hero-slider{ position: relative; overflow: hidden; background: var(--ink); }
.hero-track{
  display: flex;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.hero-track.is-jumping{ transition: none; }
.hero-slide{
  position: relative;
  flex: 0 0 100%;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-slide > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9,11,15,0.55) 0%, rgba(9,11,15,0.78) 55%, rgba(9,11,15,0.94) 100%);
}
.hero-slide-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 64px 24px 104px;   /* extra bottom room so the dots never touch the buttons */
}
.hero-title{
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 0.5em;
  max-width: 16ch;
}
.hero-slide p:not(.hero-title){ color: var(--fog-300); font-size: 1.1rem; max-width: 52ch; }
.hero-slide .eyebrow-tag{ background: rgba(36,81,255,0.22); color: #A9BAFF; }
.hero-actions{ display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-slide .btn-outline{ color: var(--paper); border-color: rgba(255,255,255,0.35); }
.hero-slide .btn-outline:hover{ border-color: var(--paper); }

.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
}
.hero-dot{
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero-dot::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  transition: width 0.25s ease, background 0.25s ease;
}
.hero-dot:hover::before{ background: rgba(255,255,255,0.85); }
.hero-dot[aria-current="true"]::before{ width: 28px; background: var(--paper); }
.hero-dot:focus-visible{ outline: 2px solid var(--paper); outline-offset: 0; border-radius: 999px; }

/* no-JS: show slide one only, hide the dots */
.no-js .hero-slide:not(:first-child){ display: none; }
.no-js .hero-dots{ display: none; }

@media (max-width: 620px){
  .hero-slide{ min-height: 640px; }
}

.page-banner{
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.page-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,11,15,0.35) 0%, rgba(9,11,15,0.88) 100%);
}
.page-banner-inner{
  position: relative;
  z-index: 1;
  padding: 40px 0 36px;
  width: 100%;
}
.page-banner h1{ color: var(--paper); }
.page-banner p{ color: var(--fog-300); }

.figure{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--fog-200);
}
.figure img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.figure--tall{ aspect-ratio: 4 / 5; }
.figure--wide{ aspect-ratio: 16 / 9; }
.figure--square{ aspect-ratio: 1 / 1; }

/* ==========================================================================
   Grids & cards
   ========================================================================== */
.grid{ display: grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

.card{
  border: 1px solid var(--fog-300);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--paper);
}
.card h3{ margin-bottom: 8px; }
.card p{ margin-bottom: 0; font-size: 0.94rem; }

.stat{
  border-left: 2px solid var(--blue-600);
  padding-left: 16px;
}
.stat-num{
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--ink);
  display: block;
}
.section--ink .stat-num{ color: var(--paper); }
.stat-label{ font-size: 0.85rem; color: var(--fog-500); }

/* stage list — real numbered sequence, so numbering is earned, not decorative */
.stage-row{
  display: grid;
  grid-template-columns: 56px 1fr 1.3fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--fog-300);
  align-items: baseline;
}
.stage-row:last-child{ border-bottom: 1px solid var(--fog-300); }
.stage-num{
  font-family: var(--font-mono);
  color: var(--blue-600);
  font-size: 0.95rem;
}
.stage-row h3{ margin-bottom: 6px; }
.stage-row p{ margin: 0; font-size: 0.93rem; }
@media (max-width: 720px){
  .stage-row{ grid-template-columns: 1fr; gap: 6px; }
}

/* people cards for investors/mentors listing */
.person-card{
  border: 1px solid var(--fog-300);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.person-card:hover{ border-color: var(--fog-500); transform: translateY(-2px); }
.person-photo{
  aspect-ratio: 1 / 1;
  background: var(--fog-200);
  overflow: hidden;
}
.person-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.person-photo--wide{ aspect-ratio: 4 / 3; }
.person-photo--wide img{ object-position: center; }
.person-body{ padding: 20px; }
.person-role{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--blue-600);
  display: block;
  margin-bottom: 6px;
}
.person-body h3{ margin-bottom: 4px; }
.person-body p{ font-size: 0.88rem; margin-bottom: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field{ margin-bottom: 20px; }
.field label{
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 7px;
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fog-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--blue-600);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px){ .field-row{ grid-template-columns: 1fr; } }
.form-note{ font-size: 0.82rem; color: var(--fog-500); margin-top: -8px; }
.form-card{
  background: var(--paper);
  border: 1px solid var(--fog-300);
  border-radius: var(--radius);
  padding: 36px;
  max-width: 460px;
}

/* FAQ accordion — native <details>, no JS */
.faq-item{
  border-bottom: 1px solid var(--fog-300);
}
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--blue-600);
  flex: none;
}
.faq-item[open] summary::after{ content: "\2212"; }
.faq-item p{ padding-bottom: 22px; margin: 0; max-width: 70ch; }

/* table (legal / policy pages, mentor listing extras) */
table{ width: 100%; border-collapse: collapse; }
th, td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--fog-300); font-size: 0.92rem; }
th{ font-family: var(--font-mono); font-weight: 500; color: var(--fog-500); font-size: 0.78rem; }

/* misc */
.divider{ height: 1px; background: var(--fog-300); border: none; margin: 0; }
.center{ text-align: center; }
.lede{ font-size: 1.1rem; }
.two-col{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

/* ==========================================================================
   CTA — its own standalone section, sits above the footer (never fused to it)
   ========================================================================== */
.cta{ padding: 88px 0; background: var(--paper); }
.cta-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 72px 32px;
  text-align: center;
}
/* Keep real content above the animated glow/grain/sheen layers below. */
.cta-card > *{ position: relative; z-index: 1; }
/* Ambient glow — two soft blurred orbs drifting slowly behind the CTA copy,
   plus a fine grain and a slow diagonal sheen, for a richer/premium feel.
   Pure CSS/DOM, no canvas or images, and it disables itself for reduced-motion users. */
.cta-card::before,
.cta-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
}
.cta-card::before{
  width: 460px; height: 460px;
  top: -180px; left: -140px;
  background: radial-gradient(circle, var(--blue-600) 0%, transparent 70%);
  animation: cta-drift-a 16s ease-in-out infinite;
}
.cta-card::after{
  width: 420px; height: 420px;
  bottom: -190px; right: -120px;
  background: radial-gradient(circle, var(--blue-700) 0%, transparent 70%);
  animation: cta-drift-b 18s ease-in-out infinite;
}
.cta-card-sheen{
  position: absolute;
  z-index: 0;
  inset: -50%;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.05) 45%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.05) 55%,
    transparent 70%);
  animation: cta-sheen-sweep 9s linear infinite;
}
.cta-card-grain{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes cta-drift-a{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  50%{ transform: translate(70px, 50px) scale(1.15); }
}
@keyframes cta-drift-b{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  50%{ transform: translate(-60px, -40px) scale(1.1); }
}
@keyframes cta-sheen-sweep{
  0%{ transform: translateX(-30%) rotate(0deg); }
  100%{ transform: translateX(30%) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .cta-card::before, .cta-card::after, .cta-card-sheen{ animation: none; }
}
.cta-card h2{ color: var(--paper); max-width: 24ch; margin-inline: auto; }
.cta-card p{ color: var(--fog-300); margin-inline: auto; }
.cta-card .btn{ margin-top: 10px; }
@media (max-width: 620px){
  .cta{ padding: 56px 0; }
  .cta-card{ padding: 48px 20px; }
}

/* ==========================================================================
   Footer — gray-white background, black text, hardcoded identically on every page
   ========================================================================== */
.site-footer{
  background: var(--fog-100);
  color: var(--ink);
  border-top: 1px solid var(--fog-300);
  padding: 64px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--fog-300);
}
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-brand .nav-logo{ margin-bottom: 14px; }
.footer-brand p{ color: var(--ink); font-size: 0.9rem; max-width: 30ch; }
.footer-col h4{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fog-300);
}
.footer-col a{
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 6px 0;
  transition: color 0.15s ease;
}
.footer-col a:hover{ color: var(--blue-600); }

@media (max-width: 860px){
  .footer-col{
    border-top: 1px solid var(--fog-300);
    padding-top: 26px;
  }
}
@media (min-width: 861px){
  .footer-col{
    border-left: 1px solid var(--fog-300);
    padding-left: 24px;
  }
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.82rem;
  color: var(--ink);
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   Page skeleton — sits INSIDE the page flow, directly under the header
   (header stays visible, nothing is overlaid). Each page hardcodes its own
   skeleton shaped like that page's real layout. While it shows, <main> and the
   footer are hidden; when the page has loaded the skeleton fades and the real
   content takes its place. Driven by the html.skeleton-active class.
   ========================================================================== */
html.skeleton-active main,
html.skeleton-active .site-footer{ display: none; }
html:not(.skeleton-active) .page-skeleton{ display: none; }
.no-js .page-skeleton{ display: none; }

main{ animation: page-in 0.35s ease both; }
@keyframes page-in{ from{ opacity: 0; } to{ opacity: 1; } }

.page-skeleton{
  min-height: calc(100vh - 68px);
  background: var(--paper);
  transition: opacity 0.25s ease;
}
.page-skeleton.is-hidden{ opacity: 0; pointer-events: none; }

.skel{
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--fog-100) 30%, var(--fog-200) 50%, var(--fog-100) 70%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer{
  0%{ background-position: 140% 0; }
  100%{ background-position: -40% 0; }
}

.skel-wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.skel-section{ padding: 56px 0; }
.skel-stack{ display: flex; flex-direction: column; gap: 14px; }

/* full-width banner, same height as .page-banner / hero */
.skel-banner{
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: var(--fog-200);
}
.skel-banner--hero{ min-height: 600px; }
.skel-banner .skel-wrap{ width: 100%; padding-bottom: 40px; }
.skel-banner .skel{
  background: linear-gradient(100deg, var(--fog-300) 30%, #E9ECF0 50%, var(--fog-300) 70%);
  background-size: 200% 100%;
}
.skel-tag{ width: 200px; height: 16px; border-radius: 999px; }
.skel-title{ width: 52%; height: 34px; }
.skel-title--sm{ width: 34%; }
.skel-line{ width: 60%; height: 14px; }
.skel-bar{ height: 14px; }
.skel-heading{ width: 320px; max-width: 70%; height: 28px; margin-bottom: 8px; }

/* grids */
.skel-grid{ display: grid; gap: 28px; }
.skel-grid--3{ grid-template-columns: repeat(3, 1fr); }
.skel-grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .skel-grid--3, .skel-grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .skel-grid--3, .skel-grid--4{ grid-template-columns: 1fr; } .skel-banner--hero{ min-height: 640px; } }

/* person / winner card */
.skel-person{ border: 1px solid var(--fog-300); border-radius: var(--radius); overflow: hidden; }
.skel-person > .skel{ border-radius: 0; aspect-ratio: 1 / 1; }
.skel-person--wide > .skel{ aspect-ratio: 4 / 3; }
.skel-person-body{ padding: 20px; display: flex; flex-direction: column; gap: 10px; }

/* generic card, stat, rows */
.skel-cardbox{ height: 130px; border-radius: var(--radius); }
.skel-stat{ height: 64px; }
.skel-row{
  display: grid;
  grid-template-columns: 56px 1fr 1.3fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--fog-300);
  align-items: center;
}
.skel-row .skel:first-child{ height: 16px; width: 28px; }
.skel-faq{ height: 26px; margin: 22px 0; }
@media (max-width: 720px){ .skel-row{ grid-template-columns: 1fr; gap: 10px; } }

/* two-column layouts and forms */
.skel-two{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }
@media (max-width: 860px){ .skel-two{ grid-template-columns: 1fr; gap: 32px; } }
.skel-image{ height: 320px; border-radius: var(--radius-lg); }
.skel-label{ width: 110px; height: 12px; margin-bottom: 8px; }
.skel-input{ height: 46px; margin-bottom: 20px; }
.skel-textarea{ height: 120px; margin-bottom: 20px; }
.skel-button{ width: 150px; height: 46px; }
.skel-formcard{ max-width: 460px; margin: 0 auto; border: 1px solid var(--fog-300); border-radius: var(--radius); padding: 36px; }
.skel-tabs{ height: 46px; margin-bottom: 28px; }

@media (prefers-reduced-motion: reduce){
  .skel, .skel-banner .skel{ animation: none; }
}


/* ==========================================================================
   Shared components: skip link, custom-element wrappers, modal, apply bar
   ========================================================================== */
site-header, site-footer{ display: contents; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link{
  position: absolute; left: 12px; top: -64px; z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus{ top: 12px; }
.nav-links .nav-login-mobile{ display: none; }

html.modal-open{ overflow: hidden; }
.modal{
  border: 0; padding: 0; margin: auto;
  width: calc(100% - 32px); max-width: 460px;
  max-height: calc(100vh - 32px); overflow: auto;
  border-radius: var(--radius-lg);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 80px rgba(9,11,15,0.35);
}
.modal::backdrop{ background: rgba(9,11,15,0.6); }
.modal-inner{ position: relative; padding: 36px 32px 32px; }
.modal h2{ font-size: 1.5rem; margin-bottom: 6px; padding-right: 36px; }
.modal-lede{ font-size: 0.95rem; margin-bottom: 20px; }
.modal-close{
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border-radius: 50%; border: 0; background: var(--fog-100); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.modal-close:hover{ background: var(--fog-200); }
.modal-note{ margin: 14px 0 0; text-align: center; }
.modal .btn-block{ margin-top: 4px; }

.tabs--pill{ display: flex; border: 1px solid var(--fog-300); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 24px; }
.tabs--pill[hidden]{ display: none; }
.tabs--pill [role="tab"]{
  flex: 1; padding: 12px; border: 0; border-right: 1px solid var(--fog-300);
  background: none; color: var(--fog-700); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.tabs--pill [role="tab"]:last-child{ border-right: 0; }
.tabs--pill [role="tab"][aria-selected="true"]{ background: var(--ink); color: var(--paper); }

.pw-wrap{ position: relative; }
.pw-wrap input{ padding-right: 68px; }
.pw-toggle{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--blue-600); font-weight: 600; font-size: 0.82rem;
  cursor: pointer; padding: 8px;
}
.strength{ display: flex; gap: 6px; margin-top: 8px; }
.strength span{ flex: 1; height: 4px; border-radius: 2px; background: var(--fog-200); }
.strength span.on.s1{ background: #D64545; }
.strength span.on.s2{ background: #E29A1E; }
.strength span.on.s3{ background: #3B8E5A; }
.strength span.on.s4{ background: #1E7A46; }
.strength-text{ font-size: 0.8rem; color: var(--fog-700); margin: 6px 0 0; }

.check{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; font-size: 0.88rem; margin-bottom: 18px; color: var(--fog-700); }
.check input{ width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--blue-600); }
.check span{ flex: 1; min-width: 0; }
.check a{ color: var(--blue-600); text-decoration: underline; }
.check .field-error{ flex-basis: 100%; margin: 0; }

.pill-options{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pill-option{ position: relative; cursor: pointer; }
.pill-option input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-option span{
  display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--fog-300);
  border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--fog-700);
  background: var(--paper); transition: border-color .15s, background .15s, color .15s; user-select: none;
}
.pill-option:hover span{ border-color: var(--blue-600); }
.pill-option input:checked + span{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill-option input:focus-visible + span{ outline: 2px solid var(--blue-600); outline-offset: 2px; }
.apply-fieldset .field-error{ flex-basis: 100%; margin: 6px 0 0; }
.link-btn{ background: none; border: 0; padding: 0; color: var(--blue-600); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover{ text-decoration: underline; }

.modal--wide{ max-width: 640px; }
.apply-back{ margin-bottom: 10px; }
.apply-type-grid{ display: grid; gap: 12px; margin-bottom: 4px; }
@media (min-width: 560px){ .apply-type-grid{ grid-template-columns: repeat(3, 1fr); } }
.apply-type-card{
  display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%;
  padding: 18px; border: 1px solid var(--fog-300); border-radius: var(--radius-sm);
  background: var(--paper); color: inherit; cursor: pointer; font: inherit;
}
.apply-type-card:hover, .apply-type-card:focus-visible{ border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); outline: none; }
.apply-type-card strong{ font-size: 1.02rem; font-family: var(--font-display); }
.apply-type-card span{ font-size: 0.86rem; color: var(--fog-700); }
.apply-fieldset{ border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.apply-fieldset legend{ font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; padding: 0; width: 100%; }
.apply-fieldset .hint{ font-size: 0.82rem; color: var(--fog-500); margin: -4px 0 10px; }
.apply-scale{ display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.apply-scale label{ display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--fog-700); }
.apply-scale input{ width: 16px; height: 16px; accent-color: var(--blue-600); }

.field-error{ color: #B42318; font-size: 0.82rem; margin: 6px 0 0; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color: #B42318; }
.form-status{ font-size: 0.9rem; margin: 12px 0 0; }
.form-status:empty{ display: none; }
.form-status.is-ok{ color: #1E7A46; }
.form-status.is-error{ color: #B42318; }
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apply-bar{ display: none; }
@media (max-width: 700px){
  .apply-bar{
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--fog-300);
  }
  body.has-apply-bar{ padding-bottom: 72px; }
}

/* footer: newsletter + social */
.newsletter{ margin-top: 20px; max-width: 340px; }
.newsletter label{ display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.newsletter-row{ display: flex; gap: 8px; }
.newsletter input{
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--fog-300);
  border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; background: var(--paper); color: var(--ink);
}
.social{ display: flex; gap: 10px; margin-top: 18px; }
.social a{
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--fog-300); color: var(--ink); transition: border-color 0.15s ease, background 0.15s ease;
}
.social a:hover{ border-color: var(--ink); background: var(--paper); }

/* ==========================================================================
   Home page sections
   ========================================================================== */
.cohort{ border-bottom: 1px solid var(--fog-300); }
.cohort-inner{
  max-width: var(--max-w); margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; align-items: start;
}
.cohort-item small{ display: block; font-family: var(--font-mono); font-size: 0.74rem; color: var(--fog-700); margin-bottom: 4px; }
.cohort-item strong{ display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.cohort-item--main strong{ font-size: 1.35rem; }
.cohort-item--main .count{ display: block; margin-top: 2px; font-weight: 600; font-size: 0.95rem; color: var(--blue-600); }
@media (max-width: 900px){ .cohort-inner{ grid-template-columns: repeat(2, 1fr); } .cohort-item--main{ grid-column: 1 / -1; } }
@media (max-width: 520px){ .cohort-inner{ grid-template-columns: 1fr; gap: 18px; } }

.path-card{ display: flex; flex-direction: column; gap: 6px; }
.path-card .btn{ margin-top: auto; align-self: flex-start; }
.path-card p{ margin-bottom: 18px; }

.section-head{ display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head h2{ margin: 0; max-width: 22ch; }

.results .stat-num{ font-size: 2.4rem; }

.quote-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
@media (max-width: 900px){ .quote-grid{ grid-template-columns: 1fr; gap: 28px; } }
.quote{ margin: 0; border-top: 2px solid var(--ink); padding-top: 20px; }
.quote p{ font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; color: var(--ink); max-width: none; }
.quote footer{ font-size: 0.88rem; color: var(--fog-700); }
.quote footer strong{ color: var(--ink); display: block; }

.logo-row{ display: flex; flex-wrap: wrap; gap: 14px 44px; align-items: center; justify-content: center; }
.logo-mark{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--fog-500); }
.logo-caption{ text-align: center; font-size: 0.85rem; color: var(--fog-700); margin: 0 auto 22px; }

.faq-teaser{ max-width: 820px; }

/* ==========================================================================
   About page
   ========================================================================== */
.team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .team-grid{ grid-template-columns: 1fr; } }
.person-link{ display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--blue-600); position: relative; z-index: 1; }
.person-link:hover{ text-decoration: underline; }
.advisors{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
@media (max-width: 720px){ .advisors{ grid-template-columns: 1fr; } }
.advisor{ padding: 18px 0; border-top: 1px solid var(--fog-300); }
.advisor h3{ font-size: 1.05rem; margin-bottom: 2px; }
.advisor p{ margin: 0; font-size: 0.9rem; }

/* Photo-overlay team cards (about.html "The team" — scoped to .team-photo-*
   so the plain .person-card grid used on mentors/investors/winners is untouched) */
.team-photo-card{
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 20px rgba(14,17,22,0.12); cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
.team-photo-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14,17,22,0.22); }
.team-photo-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.team-photo-card:hover .team-photo-img{ transform: scale(1.06); }
.team-photo-shade{
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(to top, rgba(14,17,22,0.94) 0%, rgba(14,17,22,0.55) 60%, transparent 100%);
  transition: height .4s ease, background .4s ease;
}
.team-photo-card:hover .team-photo-shade{ height: 100%; background: linear-gradient(to top, rgba(14,17,22,0.96) 0%, rgba(14,17,22,0.78) 55%, rgba(14,17,22,0.3) 100%); }
.team-photo-info{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 16px; }
.team-photo-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--paper); margin: 0 0 2px; }
.team-photo-role{ display: block; font-family: var(--font-mono); font-size: 0.72rem; color: #93b4ff; letter-spacing: .03em; }
.team-photo-bio{
  font-size: 0.82rem; color: rgba(255,255,255,.8); line-height: 1.55; margin: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s ease, opacity .35s ease .05s, margin .35s ease;
}
.team-photo-card:hover .team-photo-bio{ max-height: 120px; opacity: 1; margin-top: 8px; }
.team-photo-social{
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25); color: #fff; text-decoration: none;
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition: max-height .4s ease .05s, opacity .35s ease .1s, margin .35s ease, background .2s ease, transform .2s ease;
}
.team-photo-card:hover .team-photo-social{ max-height: 40px; opacity: 1; margin-top: 12px; }
.team-photo-social:hover{ background: #0a66c2; border-color: #0a66c2; transform: scale(1.1); }
.team-photo-social svg{ width: 15px; height: 15px; }
/* touch devices: no real hover, so tap toggles the same reveal via .is-open */
@media (hover: none){
  .team-photo-card:hover{ transform: none; box-shadow: 0 6px 20px rgba(14,17,22,0.12); }
  .team-photo-card:hover .team-photo-img{ transform: none; }
  .team-photo-card:hover .team-photo-shade{ height: 52%; background: linear-gradient(to top, rgba(14,17,22,0.94) 0%, rgba(14,17,22,0.55) 60%, transparent 100%); }
  .team-photo-card:hover .team-photo-bio{ max-height: 0; opacity: 0; margin-top: 0; }
  .team-photo-card:hover .team-photo-social{ max-height: 0; opacity: 0; margin-top: 0; }
  .team-photo-card.is-open{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14,17,22,0.22); }
  .team-photo-card.is-open .team-photo-img{ transform: scale(1.06); }
  .team-photo-card.is-open .team-photo-shade{ height: 100%; background: linear-gradient(to top, rgba(14,17,22,0.96) 0%, rgba(14,17,22,0.78) 55%, rgba(14,17,22,0.3) 100%); }
  .team-photo-card.is-open .team-photo-bio{ max-height: 120px; opacity: 1; margin-top: 8px; }
  .team-photo-card.is-open .team-photo-social{ max-height: 40px; opacity: 1; margin-top: 12px; }
  .team-photo-card:not(.is-open)::after{
    content: "Tap for bio"; position: absolute; left: 18px; bottom: 14px; z-index: 1;
    font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,.9);
    background: rgba(14,17,22,.45); padding: 4px 10px; border-radius: 999px;
  }
}
.values{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px){ .values{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .values{ grid-template-columns: 1fr; } }
.value{ border-top: 2px solid var(--blue-600); padding-top: 16px; }
.value h3{ margin-bottom: 6px; font-size: 1.1rem; }
.value p{ margin: 0; font-size: 0.92rem; }
.mission{ color: var(--ink); font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; font-weight: 600; max-width: 30ch; }

.timeline{ position: relative; padding-left: 28px; border-left: 2px solid var(--fog-300); max-width: 760px; }
.tl-item{ position: relative; padding: 0 0 34px; }
.tl-item:last-child{ padding-bottom: 0; }
.tl-item::before{
  content: ""; position: absolute; left: -38px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blue-600); border: 3px solid var(--paper); box-sizing: content-box;
}
.tl-item--next::before{ background: var(--paper); border-color: var(--blue-600); width: 10px; height: 10px; border-width: 3px; left: -37px; }
.tl-date{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue-600); display: block; margin-bottom: 4px; }
.tl-item h3{ margin-bottom: 4px; }
.tl-item p{ margin: 0; font-size: 0.94rem; }

/* ==========================================================================
   How it works
   ========================================================================== */
.funnel{ display: grid; gap: 14px; max-width: 760px; }
.funnel-bar{
  min-height: 54px; border-radius: var(--radius-sm); background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 18px;
}
.funnel-bar b{ font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; }
.funnel-bar span{ font-size: 0.9rem; color: var(--fog-300); }
.funnel-bar--2{ background: var(--ink-soft); }
.funnel-bar--3{ background: #2A3140; }
.funnel-bar--4{ background: var(--blue-600); }
.funnel-note{ font-size: 0.82rem; color: var(--fog-700); margin: 6px 0 0; }
.tabs--line{ display: flex; gap: 6px; border-bottom: 1px solid var(--fog-300); margin-bottom: 28px; flex-wrap: wrap; }
.tabs--line [role="tab"]{
  border: 0; background: none; padding: 12px 18px; font: inherit; font-weight: 600; font-size: 0.95rem;
  color: var(--fog-700); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs--line [role="tab"][aria-selected="true"]{ color: var(--ink); border-bottom-color: var(--blue-600); }
.tab-panel[hidden]{ display: none; }
.path-list{ display: grid; gap: 0; max-width: 820px; }
.path-list li{ display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--fog-300); }
.path-list li:last-child{ border-bottom: 1px solid var(--fog-300); }
.path-list b{ font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: var(--blue-600); padding-top: 3px; }
.path-list span{ font-size: 0.95rem; }
@media (max-width: 560px){ .path-list li{ grid-template-columns: 1fr; gap: 4px; } }
.stage-time{
  display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--fog-700); background: var(--fog-100); border-radius: 999px; padding: 3px 10px;
}
.table-wrap{ overflow-x: auto; border: 1px solid var(--fog-300); border-radius: var(--radius); }
.table-wrap table{ min-width: 560px; }
.table-wrap tr:last-child td{ border-bottom: 0; }

/* ==========================================================================
   Filters, cards with metrics, tags (winners / investors / mentors)
   ========================================================================== */
.filters{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; }
.filters-label{ font-family: var(--font-mono); font-size: 0.75rem; color: var(--fog-700); margin-right: 2px; }
.chip{
  border: 1px solid var(--fog-300); background: var(--paper); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 0.88rem; font-weight: 500; color: var(--fog-700); cursor: pointer;
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters select{
  padding: 8px 12px; border: 1px solid var(--fog-300); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.88rem; background: var(--paper); color: var(--ink);
}
.filter-count{ margin-left: auto; font-size: 0.85rem; color: var(--fog-700); }
.empty-state{ text-align: center; padding: 48px 0; color: var(--fog-700); }
[data-item][hidden]{ display: none; }

.person-card{ position: relative; }
.person-card .card-link::after{ content: ""; position: absolute; inset: 0; }
.metrics{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--fog-200);
}
.metrics dt{ font-size: 0.7rem; color: var(--fog-500); font-family: var(--font-mono); }
.metrics dd{ margin: 2px 0 0; font-size: 0.85rem; font-weight: 600; }
.meta{ display: grid; gap: 6px; margin: 14px 0 0; font-size: 0.85rem; }
.meta div{ display: grid; grid-template-columns: 82px 1fr; gap: 10px; }
.meta dt{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog-500); padding-top: 2px; }
.meta dd{ margin: 0; }
.tag-list{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag{ font-size: 0.74rem; padding: 3px 10px; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); font-weight: 500; }
.avail{ margin: 12px 0 0; font-size: 0.82rem; color: var(--fog-700); }
.avail strong{ color: var(--ink); }

.steps-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px){ .steps-3{ grid-template-columns: 1fr; } }
.steps-3 .card h3{ display: flex; gap: 10px; align-items: baseline; }
.steps-3 .n{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--blue-600); }

.dl-card{ display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dl-card h3{ margin-bottom: 2px; }
.dl-card p{ margin: 0; font-size: 0.9rem; }

/* ==========================================================================
   Case study pages (winner-*.html)
   ========================================================================== */
.case-grid{ display: grid; grid-template-columns: 1.5fr 0.7fr; gap: 64px; align-items: start; }
@media (max-width: 900px){ .case-grid{ grid-template-columns: 1fr; gap: 36px; } }
.case-body h2{ margin-top: 40px; font-size: 1.5rem; }
.case-body h2:first-child{ margin-top: 0; }
.case-body p{ max-width: 64ch; }
.case-facts{ border: 1px solid var(--fog-300); border-radius: var(--radius); padding: 24px; position: sticky; top: 92px; }
.case-facts h3{ font-size: 1rem; margin-bottom: 14px; }
.case-facts dl{ margin: 0; display: grid; gap: 14px; }
.case-facts dt{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog-500); }
.case-facts dd{ margin: 2px 0 0; font-weight: 600; }
.team-list li{ padding: 12px 0; border-top: 1px solid var(--fog-300); display: flex; justify-content: space-between; gap: 16px; }
.team-list li:last-child{ border-bottom: 1px solid var(--fog-300); }
.team-list span{ color: var(--fog-700); font-size: 0.9rem; }
.case-nav{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; }
.crumb{ font-size: 0.85rem; color: #A9BAFF; margin-bottom: 14px; display: inline-block; }
.crumb:hover{ text-decoration: underline; }

/* ==========================================================================
   FAQ tools, contact, apply
   ========================================================================== */
.faq-tools{ max-width: 820px; margin-bottom: 8px; }
.search{ position: relative; margin-bottom: 16px; }
.search input{
  width: 100%; padding: 13px 16px 13px 44px; border: 1px solid var(--fog-300); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.95rem; background: var(--paper); color: var(--ink);
}
.search input:focus{ border-color: var(--blue-600); outline: none; box-shadow: 0 0 0 3px var(--blue-100); }
.search svg{ position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--fog-500); }
.faq-list{ max-width: 820px; }
.helpful{ display: flex; align-items: center; gap: 10px; padding-bottom: 22px; font-size: 0.85rem; color: var(--fog-700); flex-wrap: wrap; }
.helpful .chip{ padding: 4px 12px; font-size: 0.8rem; }

.quick-links{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.quick-links a{ font-size: 0.88rem; font-weight: 500; padding: 7px 14px; border: 1px solid var(--fog-300); border-radius: 999px; color: var(--fog-700); }
.quick-links a:hover{ border-color: var(--ink); color: var(--ink); }
.contact-card{ display: grid; gap: 4px; }
.contact-card .meta-line{ font-size: 0.85rem; color: var(--fog-700); }
.hours{ font-size: 0.9rem; }
.hours div{ display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--fog-300); }
.hours div:last-child{ border-bottom: 1px solid var(--fog-300); }

.confirm{ border: 1px solid var(--fog-300); border-radius: var(--radius-lg); padding: 40px; }
.confirm[hidden]{ display: none; }
.confirm-icon{ width: 48px; height: 48px; border-radius: 50%; background: #E3F4EA; color: #1E7A46; display: grid; place-items: center; margin-bottom: 18px; }
.confirm h3{ font-size: 1.5rem; }

.progress-wrap{ margin-bottom: 28px; }
.progress-label{ display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--fog-700); margin-bottom: 8px; }
.progress{ height: 6px; background: var(--fog-200); border-radius: 3px; overflow: hidden; }
.progress span{ display: block; height: 100%; width: 0; background: var(--blue-600); transition: width 0.3s ease; }
.form-actions{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.field textarea{ resize: vertical; min-height: 110px; }
.field input[type="file"]{ padding: 10px; }
.opt{ font-weight: 400; color: var(--fog-500); }

/* ==========================================================================
   404
   ========================================================================== */
.notfound{ text-align: center; padding: 120px 0; }
.notfound .code{ font-family: var(--font-mono); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--fog-300); margin: 0 0 12px; }
.notfound p{ margin-inline: auto; }
.notfound .links{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ==========================================================================
   Dashboard preview
   ========================================================================== */
.dash-banner{ background: #FFF6DB; border-bottom: 1px solid #F1DE9B; color: #6B5300; font-size: 0.88rem; padding: 10px 24px; text-align: center; }
.dash{ display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 68px - 41px); }
@media (max-width: 860px){ .dash{ grid-template-columns: 1fr; } }
.dash-side{ background: var(--fog-100); border-right: 1px solid var(--fog-300); padding: 28px 20px; }
@media (max-width: 860px){ .dash-side{ border-right: 0; border-bottom: 1px solid var(--fog-300); } }
.dash-side h2{ font-size: 0.75rem; font-family: var(--font-mono); font-weight: 500; color: var(--fog-700); margin-bottom: 10px; }
.dash-roles{ display: grid; gap: 4px; }
.dash-roles button{
  text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: var(--radius-xs);
  font: inherit; font-weight: 500; font-size: 0.92rem; color: var(--fog-700); cursor: pointer;
}
.dash-roles button:hover{ background: var(--fog-200); color: var(--ink); }
.dash-roles button[aria-selected="true"]{ background: var(--ink); color: var(--paper); }
.dash-user{ margin-top: 28px; font-size: 0.85rem; color: var(--fog-700); }
.dash-user strong{ display: block; color: var(--ink); }
.dash-main{ padding: 36px 32px 64px; max-width: 980px; }
@media (max-width: 560px){ .dash-main{ padding: 28px 20px 56px; } }
.dash-main h1{ font-size: 1.8rem; margin-bottom: 4px; }
.dash-main .sub{ margin-bottom: 28px; }
.dash-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 720px){ .dash-grid{ grid-template-columns: 1fr; } }
.dash-card{ border: 1px solid var(--fog-300); border-radius: var(--radius); padding: 20px; }
.dash-card small{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog-500); display: block; margin-bottom: 6px; }
.dash-card strong{ font-family: var(--font-display); font-size: 1.4rem; }
.dash-section{ margin-bottom: 36px; }
.dash-section h2{ font-size: 1.2rem; margin-bottom: 14px; }
.dash-panel[hidden]{ display: none; }
.track{ display: grid; gap: 0; }
.track li{ display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--fog-200); font-size: 0.93rem; }
.track li:last-child{ border-bottom: 1px solid var(--fog-200); }
.track .dot{ width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fog-300); }
.track .done .dot{ background: #1E7A46; border-color: #1E7A46; }
.track .now .dot{ border-color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100); }
.track .todo{ color: var(--fog-500); }
.pill{ display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--fog-200); color: var(--fog-700); white-space: nowrap; }
.pill--ok{ background: #E3F4EA; color: #1E7A46; }
.pill--blue{ background: var(--blue-100); color: var(--blue-700); }
.pill--warn{ background: #FFF0D1; color: #8A5A00; }
.inline-form{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.inline-form input, .inline-form select{ flex: 1; min-width: 180px; padding: 10px 12px; border: 1px solid var(--fog-300); border-radius: var(--radius-sm); font: inherit; font-size: 0.92rem; }

/* ==========================================================================
   Legal page layout, notices, misc
   ========================================================================== */
.legal-layout{ display: grid; grid-template-columns: 220px minmax(0, 780px); gap: 64px; }
@media (max-width: 900px){ .legal-layout{ grid-template-columns: 1fr; gap: 24px; } }
.toc{ position: sticky; top: 92px; align-self: start; }
@media (max-width: 900px){ .toc{ position: static; } .toc nav{ display: flex; flex-wrap: wrap; gap: 8px; } }
.toc a{ display: block; padding: 8px 14px; border-left: 2px solid var(--fog-300); font-size: 0.9rem; color: var(--fog-700); }
.toc a:hover{ color: var(--ink); }
.toc a.is-active{ border-left-color: var(--blue-600); color: var(--ink); font-weight: 600; }
@media (max-width: 900px){ .toc a{ border: 1px solid var(--fog-300); border-radius: 999px; padding: 6px 14px; } .toc a.is-active{ border-color: var(--ink); } }
.legal-body section{ scroll-margin-top: 96px; }
.legal-body h2{ margin-bottom: 18px; }
.legal-body h3{ margin-top: 26px; margin-bottom: 6px; font-size: 1.1rem; }
.legal-body .divider{ margin: 44px 0; }

.notice{
  background: var(--blue-100); color: var(--blue-700); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 0.88rem; font-weight: 500; margin: 0 0 24px; max-width: none;
}
.stage-row .stage-time{ display: block; width: fit-content; }
[id]{ scroll-margin-top: 88px; }

/* mobile menu: show the Log in link (declared last so it wins over the default hide) */
@media (max-width: 900px){
  .nav-links .nav-login-mobile{ display: block; font-weight: 600; color: var(--ink); }
}

.two-col--top{ align-items: start; }


/* ---- Interactive controls always show the hand cursor (and a "not allowed" one when disabled) ---- */
button, [role="button"], summary, select, label[for], input[type="submit"], input[type="button"],
input[type="checkbox"], input[type="radio"], input[type="file"], a[href]{ cursor: pointer; }
button:disabled, [aria-disabled="true"], input:disabled, select:disabled{ cursor: not-allowed; }