:root{
  --bg:#0f0f10;
  --bg-2:#141416;
  --card:#ffffff;
  --muted:#a7a7ad;
  --text:#111114;
  --text-invert:#ffffff;
  --border:rgba(0,0,0,0.12);
  --border-invert:rgba(255,255,255,0.14);
  --shadow:0 18px 55px rgba(0,0,0,0.25);
  --radius:28px;
  --radius-lg:42px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text-invert);
  line-height:1.5;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Header */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:linear-gradient(to bottom, rgba(15,15,16,0.96), rgba(15,15,16,0.82), rgba(15,15,16,0));
  backdrop-filter:saturate(140%) blur(6px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand img{height:30px; width:auto}
.nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-weight:600;
}
.nav a{opacity:0.9; text-decoration:none}
.nav a:hover{opacity:1}
.nav .btn{
  padding:10px 14px;
  border:1px solid var(--border-invert);
  border-radius:14px;
}
.menu-btn{
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  padding:10px;
  color:var(--text-invert);
  cursor:pointer;
}
.menu-btn .bars{
  width:26px;height:18px; position:relative;
}
.menu-btn .bars span{
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background:rgba(255,255,255,0.9);
}
.menu-btn .bars span:nth-child(1){top:0}
.menu-btn .bars span:nth-child(2){top:8px; opacity:0.9}
.menu-btn .bars span:nth-child(3){top:16px; opacity:0.8}

.mobile-menu{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,0.68);
  z-index:60;
}
.mobile-menu[aria-hidden="false"]{display:block}
.mobile-menu-panel{
  position:absolute;
  top:0; right:0;
  width:min(420px, 92vw);
  height:100%;
  background:var(--bg);
  border-left:1px solid var(--border-invert);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.mobile-menu-top{
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-menu a{
  text-decoration:none;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid var(--border-invert);
  font-weight:700;
}
.mobile-menu a:hover{background:rgba(255,255,255,0.05)}
.close-btn{
  appearance:none;
  border:1px solid var(--border-invert);
  background:transparent;
  color:var(--text-invert);
  width:40px;height:40px;
  border-radius:999px;
  cursor:pointer;
}

/* Layout */
main{padding-top:72px}
.section{padding:56px 0}
.section.section-tight{padding:34px 0}
.panel{
  background:var(--card);
  color:var(--text);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,0.04);
  padding:28px;
}
.panel.panel-soft{
  background:#f3f3f3;
}
.panel.panel-dark{
  background: rgba(255,255,255,0.02);
  color: #ffffff;
  border: 1px solid var(--border-invert);
  box-shadow: none;
}
.panel.panel-dark h2,
.panel.panel-dark h3{
  color:#ffffff;
}
.panel.panel-dark p{
  color: rgba(255,255,255,0.78);
}
.panel.panel-dark .mini-card{
  background:#2a2a2a;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.12);
}
.panel.panel-dark .mini-card h3{
  color:#ffffff;
}
.panel.panel-dark .mini-card p{
  color: rgba(255,255,255,0.82);
}

.page-hero{
  position:relative;
  min-height:280px;
  padding:56px 0 10px;
}
.page-hero-bg{
  position:absolute;
  inset:0;
  background:#000;
}
.page-hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:0.82;
  filter:saturate(0.85) contrast(1.02);
}
.page-hero-bg:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle, rgba(15,15,16,0) 30%, rgba(15,15,16,0.98) 120%),
    linear-gradient(to bottom, rgba(15,15,16,0.2), rgba(15,15,16,1));
}
.page-hero-content{position:relative}

h1,h2,h3{line-height:1.1; letter-spacing:-0.02em}
h1{font-size:clamp(34px, 5vw, 64px); margin:0 0 10px}
h2{font-size:clamp(26px, 3.2vw, 44px); margin:0 0 10px}
h3{font-size:clamp(18px, 2vw, 26px); margin:0 0 8px}
p{margin:0 0 12px}
.lead{font-size:clamp(16px, 1.55vw, 20px); color:rgba(255,255,255,0.82)}
.sublead{font-size:clamp(14px, 1.35vw, 18px); color:rgba(255,255,255,0.78)}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:0;
  background:#ffffff;
  color:#111114;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn-primary:hover{background:rgba(255,255,255,0.92)}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border-invert);
  background:transparent;
  color:#ffffff;
  font-weight:800;
  text-decoration:none;
}
.btn-ghost:hover{background:rgba(255,255,255,0.06)}

/* Home */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:26px;
  align-items:center;
}
.hero-card{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-invert);
  border-radius:var(--radius-lg);
  padding:26px;
}
.hero-questions-label{
  margin:0 0 10px 0;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-weight:800;
  font-size:0.72rem;
  color:rgba(255,255,255,0.7);
}
.hero-question{
  margin:0 0 26px 0;
  font-size:clamp(32px, 2.2vw, 36px);
  line-height:1.05;
  font-weight:650;
  color:rgba(255,255,255,0.92);
  letter-spacing:-0.01em;
}
.hero-question span{
  display:inline-block;
  will-change:opacity, transform;
  transition: opacity 260ms ease, transform 130ms ease;
}
.hero-question span.is-fading{
  opacity:0;
  transform:translateY(6px);
}
.hero-headline{
  margin:14px 0 16px 0;
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.2;
  font-weight:800;
  color:rgba(255,255,255,0.95);
  letter-spacing:-0.01em;
}
.hero-supporting{
  margin:0 0 22px 0;
  max-width:58ch;
  color:rgba(255,255,255,0.75);
  font-size:clamp(18px, 1.2vw, 24px);
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.link-text{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:750;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color 160ms ease, opacity 160ms ease;
  opacity:0.92;
}
.link-text:hover{
  border-color:rgba(255,255,255,0.5);
  opacity:1;
}
.hero-phrase{
  font-size:clamp(26px, 3.4vw, 50px);
  font-weight:300;
  opacity:0.92;
  margin:0 0 10px;
}
.hero-phrase strong{font-weight:700}
.hero-person{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:center;
  justify-items:center;
  text-align:center;
}
.hero-person img{
  width:min(380px, 92%);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,0.55));
}
.hero-person .name{
  font-size:22px;
  font-weight:700;
  margin:0;
}
.hero-person .role{margin:0; color:rgba(255,255,255,0.72)}
.hero-bottom{
  margin-top:18px;
  text-align:center;
  font-size:clamp(18px, 2.1vw, 32px);
  opacity:0.92;
}

.image-split{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-invert);
  background:#0c0c0d;
}
.image-split-bg{
  position:absolute; inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  filter:saturate(0.95) contrast(1.03);
  pointer-events:none;
}
.image-split:after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(to bottom, rgba(15,15,16,0.05) 0%, rgba(15,15,16,0.96) 75%);
  pointer-events:none;
}
.image-split-content{
  position:relative;
  z-index:2;
  padding:28px;
}

/* Safeguards: Built for Trust (text-only) */
.trust-box{
  background:#f3f3f3;
  border:1px solid rgba(18,18,18,0.12);
  border-radius:22px;
  padding:18px;
}

/* Safeguards grid (2 × 3 on desktop) */
.safeguards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.safeguard-tile{
  background:#f3f3f3;
  color:#121212;
  border-radius:var(--radius-lg);
  border:1px solid rgba(18,18,18,0.12);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.safeguard-head{
  display:flex;
  align-items:center;
  gap:14px;
}
.safeguard-icon{
  width:54px;
  height:54px;
  object-fit:contain;
  flex:0 0 auto;
}
.safeguard-title{
  margin:0;
  font-size:clamp(18px, 2vw, 26px);
  line-height:1.15;
}
.safeguard-media{
  border-radius:22px;
  overflow:hidden;
  height:220px;
  background:#ddd;
}
.safeguard-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.safeguard-text{
  margin:0;
  color:#1a1a1a;
  font-size:16px;
  line-height:1.55;
}
.image-split-content h2{margin-top:0}

.cards-3{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.card{
  background:#f1f1f1;
  color:#121212;
  border-radius:var(--radius);
  border:1px solid rgba(18,18,18,0.12);
  padding:18px;
}
.card .meta{
  font-weight:300;
  font-size:32px;
  margin:0 0 10px;
}
.card .thumb{
  border-radius:22px;
  overflow:hidden;
  height:180px;
  background:#ddd;
  margin-bottom:12px;
}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card p{color:#1a1a1a}

.hscroll{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.mini-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.mini-card{
  background:#ffffff;
  color:#121212;
  border-radius:26px;
  border:1px solid rgba(18,18,18,0.12);
  padding:16px;
}
.mini-card .thumb{
  border-radius:18px;
  overflow:hidden;
  height:120px;
  background:#ddd;
  margin-bottom:10px;
}
.mini-card .thumb img{width:100%; height:100%; object-fit:cover}
.mini-card h3{margin:0 0 6px; font-size:18px}
.mini-card p{margin:0; color:#202022}

/* Safeguards + Journey cards */
.feature-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.feature{
  background:#f3f3f3;
  border-radius:var(--radius-lg);
  border:1px solid rgba(18,18,18,0.12);
  padding:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.feature .iconline{
  display:flex;
  align-items:center;
  gap:14px;
}
.feature .iconline img{width:54px; height:54px}
.feature .media{
  border-radius:22px;
  overflow:hidden;
  height:220px;
  background:#ddd;
}
.feature .media img{width:100%; height:100%; object-fit:cover}
.feature .copy p{margin:0; font-size:16px}

.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.step{
  background:#ffffff;
  color:#121212;
  border-radius:var(--radius-lg);
  border:1px solid rgba(18,18,18,0.12);
  padding:18px;
}
.step-title{
  margin:0 0 12px 0;
  font-size:clamp(18px, 1.55vw, 22px);
  line-height:1.2;
  font-weight:800;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:12px;
  letter-spacing:-0.01em;
}
.step-num{
  font-weight:900;
  font-size:clamp(22px, 2.2vw, 30px);
  letter-spacing:-0.02em;
  line-height:1;
}
.step-title > span:last-child{
  /* Force consistent 3-line titles so image + body align across cards */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-height:3.6em; /* ~ 3 lines @ line-height 1.2 */
}
.step .kicker{
  font-weight:800;
  font-size:42px;
  letter-spacing:-0.03em;
  color:#121212;
}
.step .kicker small{
  font-weight:600;
  font-size:14px;
  opacity:0.55;
  margin-left:10px;
}
.step .media{
  margin-top:12px;
  border-radius:22px;
  overflow:hidden;
  height:210px;
  background:#ddd;
}
.step .media img{width:100%; height:100%; object-fit:cover}
.step h3{margin-top:12px}
.step p{margin:12px 0 0; color:#222}

.three-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

/* "What is Included" (3 cards): titles + subtitles + images + bullets */
.included-cards .dark-card ul{
  margin:0;
  padding-left:20px;
}
.included-cards .dark-card li{
  margin:8px 0;
  line-height:1.45;
  font-size:clamp(15px, 1.1vw, 18px);
  font-weight:500;
}
.included-cards .dark-card > div:first-child{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.included-cards .dark-card > div:first-child h3{
  margin:0;
  line-height:1.15;
  font-size:clamp(22px, 2vw, 30px);
  font-weight:800;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1; /* title = one line */
  overflow:hidden;
  min-height:1.15em;
}
.included-cards .dark-card > div:first-child p{
  margin:0;
  line-height:1.5;
  opacity:0.85;
  font-size:clamp(14px, 1.15vw, 18px);
  font-weight:500;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; /* subtitle = two lines */
  overflow:hidden;
  min-height:3em;
}
.included-cards .dark-card .media{
  height:190px; /* same image size across cards */
}
.dark-card{
  background:#2a2a2a;
  color:#ffffff;
  border-radius:var(--radius-lg);
  padding:18px;
  border:1px solid rgba(255,255,255,0.08);
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.dark-card > div:first-child{
  /* Normalize header height so media + bullet list align across the 3 cards */
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dark-card > div:first-child h3{
  margin:0;
  line-height:1.15;
}
.dark-card > div:first-child p{
  margin:0;
  line-height:1.5;
}
.dark-card .media{
  border-radius:18px;
  overflow:hidden;
  height:190px;
  background:#1a1a1a;
}
.dark-card .media img{width:100%; height:100%; object-fit:cover}
.dark-card ul{margin:0; padding-left:18px}
.dark-card li{margin:6px 0}

/* Join cohort block */
.cta{
  background:var(--bg-2);
  border-radius:54px 54px 0 0;
  overflow:hidden;
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:center;
}
.cta-media{
  position:relative;
  min-height:260px;
}
.cta-media img{width:100%; height:100%; object-fit:cover}
.cta-media:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,16,1), rgba(15,15,16,0) 45%);
}
.cta-copy{
  padding:26px 0 40px;
  text-align:center;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(203,203,203,0.2);
  border:1px solid rgba(255,255,255,0.12);
  font-weight:800;
  font-size:13px;
}
.cta-copy h2{margin:10px 0 8px}
.cta-copy p{margin:0 0 16px; color:rgba(255,255,255,0.85)}
.cta-copy .note{margin-top:10px; font-size:14px; opacity:0.76}

/* Footer */
.site-footer{
  padding:22px 0 34px;
  background:var(--bg);
}
.footer-line{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 12%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 88%);
  opacity:0.75;
}
.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:16px;
  font-size:14px;
  color:rgba(255,255,255,0.8);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.footer-links a{opacity:0.9; text-decoration:none}
.footer-links a:hover{opacity:1; text-decoration:underline}
.footer-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.footer-legal .sep{
  opacity:0.55;
  user-select:none;
}
.footer-designer{
  display:flex;
  justify-content:center;
}

/* Waitlist modal */
body.modal-open{overflow:hidden}
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.modal[aria-hidden="false"]{display:block}
.modal-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
}
.modal-dialog{
  position:relative;
  margin: clamp(14px, 3vw, 30px) auto;
  width:min(980px, 94vw);
  max-height:calc(100vh - 2*clamp(14px, 3vw, 30px));
  overflow:auto;
  background:#ffffff;
  color:#111114;
  border-radius:30px;
  box-shadow:0 26px 80px rgba(0,0,0,0.35);
  padding:18px;
}
.modal-close{
  position:sticky;
  top:10px;
  float:right;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  background:#ffffff;
  cursor:pointer;
}
.modal-body{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:6px 6px 18px;
}
.modal-brand img{height:30px; width:auto}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
label{font-weight:700; font-size:13px}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.18);
  font-family:inherit;
  font-size:15px;
}
textarea{resize:vertical}
.form-row{display:grid; grid-template-columns:1fr; gap:12px}
.form-actions{margin-top:6px}
.checkbox-fieldset{
  border:0;
  padding:0;
  margin:0;
}
.checkbox-fieldset legend{
  font-weight:700;
  font-size:13px;
  margin-bottom:8px;
}
.checkbox-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.checkbox-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.14);
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.checkbox-item input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#121212;
}
.checkbox-item span{
  font-size:15px;
  color:#111114;
}
.checkbox-item:hover{
  border-color:rgba(0,0,0,0.22);
}
.submit{
  width:100%;
  border:0;
  background:#121212;
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}
.submit:hover{background:#000}
.fineprint{margin:10px 0 0; color:#666; font-size:13px}

/* Responsive */
@media (max-width: 899px){
  /* Mobile/tablet nav: smaller typography + tailor which links appear per page */
  .nav{gap:12px}
  .nav a{font-size:13px}
  .nav .btn{font-size:13px; padding:8px 10px; border-radius:12px}

  /* On Home page: show Safeguards + Join Waitlist (hide Home) */
  body.page-home .nav a[href$="index.html"]{display:none}

  /* On Safeguards page: show Home + Join Waitlist (hide Safeguards) */
  body.page-safeguards .nav a[href$="safeguards.html"]{display:none}
}

@media (min-width: 900px){
  .nav{display:flex}
  .menu-btn{display:none}
  .hero-grid{grid-template-columns: 1.1fr 0.9fr}
  .hero-person{justify-items:end; text-align:right}
  .cards-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .mini-cards{grid-template-columns:repeat(5, minmax(0, 1fr))}
  .feature{grid-template-columns:1.2fr 1fr; align-items:center}
  .feature .media{height:280px}
  .steps{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .three-cols{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .safeguards-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cta-grid{grid-template-columns:1fr 1fr}
  .cta-copy{text-align:left; padding:0 0 0 26px}
  .modal-body{grid-template-columns: 0.9fr 1.1fr; align-items:start; padding:8px 10px 18px}
  .form-row{grid-template-columns:1fr 1fr}
  .checkbox-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .footer-bottom{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:18px;
  }
  .footer-bottom > :first-child{justify-self:start}
  .footer-legal{justify-self:center}
  .footer-designer{justify-self:end; justify-content:flex-end}
}

