/* ============================================================
   BCA Prep
   ============================================================ */
body.bca .pg-head h1{ max-width:18ch; }

/* ---------- why now ---------- */
.why-now{ padding:clamp(2.5rem,5vw,4rem) 0 clamp(1rem,3vw,2rem); }
.why-now-grid{
  margin-top:2.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
}
.why-now-card{
  font-family:'Poppins', var(--body);
  padding:2rem 1.9rem 2.2rem; border-radius:20px;
  background:linear-gradient(165deg, color-mix(in srgb, var(--t-accent) 9%, transparent), #fff 55%);
  border:1px solid color-mix(in srgb, var(--t-ink) 11%, transparent);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.why-now-card:hover{
  border-color:color-mix(in srgb, var(--t-accent) 42%, transparent);
  transform:translateY(-3px);
}
.wn-n{
  font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.03em;
  color:color-mix(in srgb, var(--t-accent) 55%, transparent);
}
.why-now-card h3{
  margin-top:.6rem; font-size:1.12rem; letter-spacing:-.02em; color:var(--t-ink);
}
.why-now-card p{
  margin-top:.75rem; font-size:.92rem; line-height:1.6;
  color:color-mix(in srgb, var(--t-ink) 68%, transparent);
}

/* ---------- comparison ---------- */
.cmp{ padding:clamp(3rem,6vw,5rem) 0; }
.cmp .sec-head h2{ font-size:clamp(1.6rem,3vw,2.45rem); color:var(--t-ink); }

/* Poppins, consistently, for every piece of text inside this component —
   headers, list items, the vs divider — so nothing here mixes typefaces. */
.cmp-table{
  font-family:'Poppins', var(--body);
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  border-radius:24px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
  box-shadow:0 30px 60px -40px color-mix(in srgb, var(--t-ink) 35%, transparent);
}
.cmp-col{ padding:2.3rem 2rem 2.4rem; position:relative; }

/* "them" — a flat, deliberately unremarkable neutral, derived from ink so it
   never clashes with whichever page theme it's sitting on */
.cmp-them{ background:color-mix(in srgb, var(--t-ink) 4%, #fff); }

/* "us" — a real highlighted card: a top accent bar, a soft themed wash, and a
   small badge, so the eye lands here first */
.cmp-us{
  background:linear-gradient(165deg, color-mix(in srgb, var(--t-accent) 13%, transparent), #fff 60%);
  box-shadow:inset 0 3px 0 var(--t-accent);
}
.cmp-badge{
  position:absolute; top:1.5rem; right:2rem; padding:.32rem .8rem; border-radius:99px;
  background:var(--t-accent); color:#fff; font-size:.64rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.cmp-col h3{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--t-ink) 52%, transparent); padding-bottom:1.4rem;
  border-bottom:1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
}
.cmp-us h3{ color:var(--t-accent); }
.cmp-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.cmp-col li{
  padding:1.15rem 0; font-size:.94rem; font-weight:400; line-height:1.55;
  border-bottom:1px solid color-mix(in srgb, var(--t-ink) 8%, transparent);
  color:color-mix(in srgb, var(--t-ink) 62%, transparent); position:relative; padding-left:1.7rem;
  cursor:pointer; border-radius:8px;
  transition:opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.cmp-col li:last-child{ border-bottom:0; }
.cmp-col li:focus-visible{ outline:2px solid var(--t-accent); outline-offset:3px; }
.cmp-them li::before{
  content:"✕"; position:absolute; left:0; top:1.15rem; font-size:.7rem;
  color:color-mix(in srgb, var(--t-ink) 34%, transparent);
}
.cmp-us li{ color:var(--t-ink); font-weight:500; }
.cmp-us li::before{ content:"✓"; position:absolute; left:0; top:1.15rem; color:var(--t-accent); font-size:.9rem; }

/* hovering, tapping, or focusing a point highlights it and its match in the
   other column, and quietly dims everything else — so the comparison reads
   as pairs instead of two separate lists */
.cmp-table.paired .cmp-col li{ opacity:.4; }
.cmp-col li.cmp-hit{
  opacity:1 !important;
  background:color-mix(in srgb, var(--t-accent) 10%, transparent);
  padding-left:2rem;
}
.cmp-us li.cmp-hit::before{ transform:scale(1.15); }
.cmp-vs{
  display:grid; place-items:center; width:64px;
  background:color-mix(in srgb, var(--t-ink) 4%, #fff);
  border-inline:1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
}
.cmp-vs span{
  font-family:'Poppins', var(--body); font-weight:600;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--t-ink) 45%, transparent);
  writing-mode:vertical-rl;
}

/* ---------- horizontal run — now carries the section heading too ---------- */
.hrun{ position:relative; }
.hrun-stage{
  position:sticky; top:0; height:100vh; height:100svh; min-height:660px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:1.8rem;
  padding-top:var(--nav-h);
}
.hrun-head{ position:relative; z-index:2; }
.hrun-head h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); color:var(--t-ink); }
.hrun-lede{ margin-top:.9rem; max-width:52ch; }
.hrun-hint{
  margin-top:1.4rem; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:color-mix(in srgb, var(--t-ink) 48%, transparent);
}
.hrun-progress{
  margin-top:1.2rem; height:2px; border-radius:99px; max-width:340px;
  background:color-mix(in srgb, var(--t-ink) 14%, transparent); overflow:hidden;
}
.hrun-progress i{ display:block; height:100%; width:0; background:var(--t-accent); border-radius:99px; }

.hrun-track{
  display:flex; gap:1.2rem; padding-inline:var(--gut);
  will-change:transform;
}
.phase{
  flex:none; width:min(78vw,460px); border-radius:24px; padding:2.2rem 2rem 2.4rem;
  background:#fff;
  background:linear-gradient(160deg, color-mix(in srgb, var(--t-accent) 12%, transparent), #fff);
  border:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  display:flex; flex-direction:column;
}
.phase-n{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t-accent); display:flex; justify-content:space-between;
}
.phase-panel h3{ font-size:clamp(1.25rem,2.1vw,1.6rem); letter-spacing:-.03em; color:var(--t-ink); }

/* English / Math live in the same card, one visible at a time */
.phase-tabs{ display:flex; gap:.4rem; margin-top:1.3rem; }
.phase-tab{
  flex:1; padding:.52rem .4rem; border-radius:99px; text-align:center;
  font-size:.78rem; font-weight:600; letter-spacing:-.01em;
  color:color-mix(in srgb, var(--t-ink) 55%, transparent);
  background:color-mix(in srgb, var(--t-ink) 6%, transparent);
  border:1px solid transparent; cursor:pointer; transition:.3s var(--ease);
}
.phase-tab:hover{ color:var(--t-ink); }
.phase-tab:focus-visible{ outline:2px solid var(--t-accent); outline-offset:2px; }
.phase-tab.active{
  background:#fff; color:var(--t-accent);
  border-color:color-mix(in srgb, var(--t-accent) 45%, transparent);
  box-shadow:0 8px 18px -12px color-mix(in srgb, var(--t-accent) 70%, transparent);
}
.phase-panel{ margin-top:1.3rem; }
.phase-panel[hidden]{ display:none; }
.phase-p{ margin-top:1rem; font-size:.95rem; line-height:1.6;
  color:color-mix(in srgb, var(--t-ink) 72%, transparent); }
.phase ul{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.55rem; }
.phase li{
  font-size:.88rem; padding-left:1.4rem; position:relative;
  color:color-mix(in srgb, var(--t-ink) 66%, transparent);
}
.phase li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  border-radius:50%; background:var(--t-accent); }
.phase-foot{
  margin-top:auto; padding-top:1.6rem; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--t-ink) 45%, transparent);
  border-top:1px solid color-mix(in srgb, var(--t-ink) 12%, transparent); margin-top:1.8rem;
}

@media (max-width:900px){
  .why-now-grid{ grid-template-columns:1fr; }
  .cmp-table{ grid-template-columns:1fr; }
  .cmp-vs{ width:auto; height:48px; border-inline:0;
    border-block:1px solid color-mix(in srgb, var(--t-ink) 13%, transparent); }
  .cmp-vs span{ writing-mode:horizontal-tb; }
  .hrun-stage{ position:static; height:auto; min-height:0; padding:clamp(3rem,7vw,5rem) 0; }
  .hrun-track{ overflow-x:auto; transform:none !important; scroll-snap-type:x proximity;
    padding-bottom:1rem; }
  .phase{ scroll-snap-align:center; }
  .hrun-hint{ display:none; }
}

/* ---------- story treatment ---------- */
.write{ min-height:2.1em; }
.write-caret{
  display:inline-block; width:.045em; height:.78em; margin-left:.05em;
  background:var(--t-accent); vertical-align:-.04em; border-radius:2px;
  animation:bcaBlink .95s steps(1) infinite;
}
.write-caret.done{ opacity:.45; }
@keyframes bcaBlink{ 50%{ opacity:0 } }

/* headings draw their own rule */
.underline-draw{ position:relative; display:inline-block; padding-bottom:.34em; }
.underline-draw::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--t-accent); border-radius:3px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out) .15s;
}
.underline-draw.drawn::after{ transform:scaleX(1); }

/* phase cards settle as they enter the frame */
.phase{
  opacity:.32; transform:translateY(26px) scale(.97);
  transition:opacity .7s var(--ease), transform .9s var(--ease-out);
}
.phase.lit{ opacity:1; transform:none; }

.hrun-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.6em;
  background:var(--t-accent); vertical-align:middle;
  animation:hrunPulse 2.2s var(--ease) infinite;
}
@keyframes hrunPulse{ 0%,100%{ opacity:.35; transform:scale(.8) } 50%{ opacity:1; transform:scale(1) } }

/* phase numbers read as chapter marks */
.phase-n{ align-items:baseline; }
.phase-n span:first-child{
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.03em; text-transform:none; color:var(--t-accent);
}