/* ============================================================
   Shared page components.

   Lifted out of index.html when the home page was split into six.
   Everything here is used by more than one page; anything scoped
   to a single merged page stays inline on that page.
   ============================================================ */

/* ---------------- page-specific ---------------- */

/* Phase spine — the structural device. It mirrors the eight real
   launch phases inside the product, so the page reads like the tool. */
.spine{ position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:40; display:grid; gap:.55rem; }
.spine a{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--muted); }
.spine i{ width:8px; height:8px; border-radius:50%; background:var(--line); display:block; transition:.2s; }
.spine a:hover i, .spine a.on i{ background:var(--grad); transform:scale(1.5); }
.spine a span{ opacity:0; transition:.2s; }
.spine a:hover span, .spine a.on span{ opacity:1; color:var(--ink); }
@media (max-width:1420px){ .spine{ display:none; } }

/* ---------------- hero ---------------- */
.hero{ padding:4.4rem 0 3rem; position:relative; overflow:hidden; }
.hero::after{ content:''; position:absolute; inset:auto -12% -60% 42%; height:520px; background:var(--grad-soft); filter:blur(70px); border-radius:50%; z-index:-1; }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:3.4rem; align-items:center; }
.hero h1 em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lede{ max-width:47ch; }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin:1.8rem 0 1.1rem; }
.hero-fine{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); }

/* the logo, given room to actually be seen */
.hero-logo{ display:block; height:150px; width:auto; margin:0 0 1.6rem -.4rem; }
@media (max-width:820px){ .hero-logo{ height:118px; margin-inline:auto; } .hero{ text-align:center; } .hero .lede{ margin-inline:auto; } .hero-cta{ justify-content:center; } }
@media (max-width:560px){ .hero-logo{ height:92px; } }

/* pricing, stated up front instead of buried */
.hero-price{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:1.6rem 0 1.1rem; background:var(--white); box-shadow:var(--shadow); }
.hero-price div{ flex:1 1 150px; padding:.85rem 1.1rem; border-right:1px solid var(--line); }
.hero-price div:last-child{ border-right:0; }
.hero-price .k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; }
.hero-price .v{ font-family:var(--display); font-size:1.5rem; line-height:1.2; display:block; }
.hero-price .v small{ font-family:var(--body); font-size:.8rem; font-weight:600; color:var(--muted); }

/* the console: a working piece of the product, not a screenshot */
.console{ background:var(--ink); border-radius:20px; padding:1.35rem; box-shadow:var(--shadow-l); color:#F2E4E7; }
.console-top{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink-3); padding-bottom:.85rem; margin-bottom:1rem; }
.console-top b{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#A88E96; font-weight:600; }
.dot-row{ display:flex; gap:.35rem; }
.dot-row i{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); }
.dot-row i:first-child{ background:var(--gold); }
.ring-row{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.1rem; }
.ring{ width:96px; height:96px; flex:0 0 auto; position:relative; }
.ring svg{ transform:rotate(-90deg); }
.ring b{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:1.5rem; color:var(--white); }
.ring-copy strong{ display:block; font-family:var(--display); font-size:1.06rem; color:var(--white); }
.ring-copy span{ font-size:.86rem; color:#B39AA1; }
.phase-list{ display:grid; gap:.3rem; max-height:246px; overflow:auto; padding-right:.3rem; }
.phase-list::-webkit-scrollbar{ width:5px; } .phase-list::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:9px; }
.ph{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; background:var(--ink-2); border:1px solid transparent; color:#E3D2D6; border-radius:9px; padding:.55rem .7rem; font-family:var(--body); font-size:.87rem; cursor:pointer; transition:.15s; }
.ph:hover{ border-color:var(--ink-3); }
.ph em{ font-family:var(--mono); font-size:.66rem; color:#9A7E88; font-style:normal; }
.ph i{ margin-left:auto; width:17px; height:17px; border-radius:50%; border:1.5px solid var(--ink-3); flex:0 0 auto; display:grid; place-items:center; font-size:.6rem; color:transparent; }
.ph.done{ color:var(--white); }
.ph.done i{ background:var(--grad); border-color:transparent; color:var(--white); }
.console-foot{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:#9A7E88; text-align:center; margin-top:.95rem; }

/* ---------------- generic sections ---------------- */
section{ padding:4.2rem 0; }
.sec-head{ max-width:60ch; margin-bottom:2.2rem; }
.ink-band{ background:var(--ink); color:#E3D2D6; }
.ink-band h2, .ink-band h3{ color:var(--white); }
.ink-band .card{ background:var(--ink-2); border-color:var(--ink-3); color:#E3D2D6; box-shadow:none; }

/* pain list */
.pain{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem; }
.pain li{ display:flex; gap:.9rem; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:1.01rem; }
.pain li::before{ content:'×'; font-family:var(--mono); color:var(--ember); font-size:1.2rem; line-height:1.2; }

/* module cards */
.mod{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.45rem; }
.mod .n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--crimson); display:block; margin-bottom:.55rem; }
.mod h3{ font-size:1.12rem; margin-bottom:.4rem; }
.mod p{ font-size:.94rem; color:#3A2229; margin:0 0 .7rem; }
.mod ul{ margin:0; padding-left:1.05rem; font-size:.88rem; color:var(--muted); }
.mod ul li{ margin-bottom:.22rem; }

/* phase table */
.phase-row{ display:grid; grid-template-columns:74px 1fr 1.5fr; gap:1.4rem; padding:1.15rem 0; border-top:1px solid rgba(255,255,255,.11); align-items:baseline; }
.phase-row:last-child{ border-bottom:1px solid rgba(255,255,255,.11); }
.phase-row .code{ font-family:var(--mono); font-size:.78rem; color:var(--gold); letter-spacing:.06em; }
.phase-row h4{ color:var(--white); margin:0; font-size:1.06rem; }
.phase-row p{ margin:0; font-size:.93rem; color:#B39AA1; }
@media (max-width:700px){ .phase-row{ grid-template-columns:56px 1fr; } .phase-row p{ grid-column:2; } }

/* pricing */
.price-main{ border-radius:20px; overflow:hidden; box-shadow:var(--shadow-l); margin-bottom:1.2rem; }
.price-a{ background:var(--ink); color:var(--on-ink); padding:2.6rem 2.4rem; display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:center; }
.price-a-right{ border-left:1px solid var(--ink-3); padding-left:2.4rem; }
.price-a .name{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:.7rem; color:var(--gold); }
.figure{ font-family:var(--display); font-size:3.9rem; line-height:.95; letter-spacing:-.03em; }
.price-a .figure{ color:var(--white); }
.figure sup{ font-size:1.35rem; top:-1.5rem; position:relative; }
.figure em{ font-style:normal; font-family:var(--body); font-size:1rem; font-weight:600; letter-spacing:0; color:var(--muted); }
.price-a .figure em{ color:var(--on-ink-2); }
.price-a p{ font-size:.95rem; color:var(--on-ink-2); }
.price-note{ font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; }
@media (max-width:860px){ .price-a{ grid-template-columns:1fr; gap:1.6rem; padding:2rem 1.5rem; } .price-a-right{ border-left:0; border-top:1px solid var(--ink-3); padding-left:0; padding-top:1.6rem; } }

.pay-opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-bottom:2.4rem; }
.opt{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.6rem; }
.opt h4{ margin:0 0 .3rem; font-size:1.05rem; }
.opt .amt{ font-family:var(--display); font-size:1.9rem; line-height:1.1; }
.opt p{ margin:.4rem 0 1rem; font-size:.9rem; color:var(--muted); }
.opt .btn{ width:100%; }
@media (max-width:700px){ .pay-opts{ grid-template-columns:1fr; } }

.inc{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:1.7rem; }
.inc h3{ margin-bottom:.25rem; }
.inc .sub{ font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; display:block; }
.inc ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.94rem; }
.inc ul li{ display:flex; gap:.6rem; align-items:flex-start; }
.inc ul li::before{ content:'✓'; color:var(--crimson); font-weight:700; flex:0 0 auto; }

.cancel{ background:var(--ink); color:var(--on-ink); border-radius:18px; padding:2rem 2.2rem; margin-top:1.2rem; }
.cancel h3{ color:var(--white); }
.cancel .two{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.1rem; }
.cancel h4{ color:var(--white); font-size:.95rem; margin:0 0 .6rem; }
.cancel ul{ list-style:none; padding:0; margin:0; display:grid; gap:.42rem; font-size:.92rem; }
.cancel ul li{ display:flex; gap:.6rem; }
.keep li::before{ content:'✓'; color:var(--gold); flex:0 0 auto; }
.lose li::before{ content:'×'; color:var(--ember); flex:0 0 auto; font-size:1.05rem; line-height:1.2; }
@media (max-width:700px){ .cancel .two{ grid-template-columns:1fr; gap:1.4rem; } }

/* steps */
.steps{ counter-reset:s; display:grid; gap:1.15rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; }
.step .num{ counter-increment:s; width:42px; height:42px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:.9rem; }
.step .num::before{ content:counter(s,decimal-leading-zero); }
.step h4{ margin:.3rem 0 .25rem; }
.step p{ margin:0; color:#3A2229; font-size:.95rem; }

/* faq */
details{ border-bottom:1px solid var(--line); padding:1.05rem 0; }
details summary{ cursor:pointer; font-weight:700; font-size:1.03rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:'+'; font-family:var(--mono); color:var(--crimson); font-size:1.3rem; line-height:1; }
details[open] summary::after{ content:'–'; }
details p{ margin:.8rem 0 0; color:#3A2229; font-size:.96rem; max-width:75ch; }

/* founder */
.founder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:center; }
.founder-plate{ background:var(--grad); border-radius:20px; padding:2.2rem; color:#fff; }
.founder-plate .big{ font-family:var(--display); font-size:3.4rem; line-height:1; }
.founder-plate .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.92; margin-bottom:1.5rem; display:block; }
.founder-plate hr{ border:0; border-top:1px solid rgba(255,255,255,.3); margin:1.2rem 0; }
@media (max-width:820px){ .founder{ grid-template-columns:1fr; } .hero-grid{ grid-template-columns:1fr; gap:2.4rem; } }

/* closing */
.close-band{ background:var(--ink); color:#fff; border-radius:22px; padding:3.4rem 2.4rem; text-align:center; }
.close-band h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.close-band p{ color:#B39AA1; max-width:56ch; margin-inline:auto; }


/* ================================================================
   MERGED PAGES — Services, Mentorship, Apply.
   Each block below is scoped to its wrapper id (#svc-root, #mnt-root,
   #app-root). These pages each defined their own .btn, .lede, .hero and
   .step, which would otherwise fight the rules above. Their element ids
   are prefixed for the same reason. Do not unscope or unprefix them.
   ================================================================ */

/* ---------- Campus LMS enquiry form ---------- */
.lms-ask{ margin-top:2.4rem; display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:2rem; }
.lms-ask-intro h3{ margin:0 0 .6rem; }
.lms-ask-intro p{ color:var(--ink-2); font-size:.96rem; margin:0 0 .8rem; }
.lms-ask-alt a{ color:var(--crimson); font-weight:600; text-decoration:none; }
.lms-ask-alt a:hover{ text-decoration:underline; }
.lms-form label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.lms-form input, .lms-form select, .lms-form textarea{
  display:block; width:100%; margin-top:.35rem; padding:.6rem .7rem; font:inherit; font-size:.95rem;
  color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:9px; }
.lms-form input:focus, .lms-form select:focus, .lms-form textarea:focus{
  outline:2px solid var(--crimson); outline-offset:1px; border-color:transparent; }
.lms-form textarea{ resize:vertical; }
.lms-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.lms-full{ margin-bottom:1rem; }
.lms-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.lms-msg{ margin:0; font-size:.9rem; color:var(--ink-2); }
.lms-msg.ok{ color:#1b7f4d; font-weight:600; }
.lms-msg.bad{ color:var(--crimson); font-weight:600; }
.lms-form[data-sending] button{ opacity:.6; pointer-events:none; }
@media (max-width:900px){
  .lms-ask{ grid-template-columns:1fr; gap:1.6rem; padding:1.5rem; }
}
@media (max-width:560px){
  .lms-row{ grid-template-columns:1fr; }
}


/* ---------- Apply form status ---------- */
.apply-msg,
.contact-msg{ margin:.9rem 0 0; font-size:.95rem; color:var(--ink-2); }
.apply-msg.ok,
.contact-msg.ok{ color:#1b7f4d; font-weight:600; }
.apply-msg.bad,
.contact-msg.bad{ color:var(--crimson); font-weight:600; }
form[data-sending] button[type=submit]{ opacity:.6; pointer-events:none; }

/* The current page in the header nav. */
.site-nav a[aria-current="page"],
.site-menu a[aria-current="page"]{ color:var(--crimson); }
.site-nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }

/* A page whose content began life as a section opens with an h1 inside
   .sec-head. It is the page heading, but it is not a hero, so it keeps
   the section scale rather than jumping to the home page's. */
.sec-head h1{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }