/* FDE Quest — landing + upgrade page styles. Loaded AFTER styles.css; extends the v1 system. */

/* ---------- shared page chrome ---------- */

.site-header { border-bottom: 1px solid var(--line); background: rgba(13, 20, 32, .82); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; }
.site-header .header-top { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 16px 24px; }
.header-links { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.header-links a { color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.header-links a:hover { color: var(--ink); }
.header-links a.btn, .header-cta { color: var(--bg); }

/* ---------- hero ---------- */

.hero { max-width: 1060px; margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 42px; line-height: 1.1; margin: 14px 0 14px; }
.hero h1 em { color: var(--amber); font-style: normal; }
.hero .sub { color: var(--ink-2); font-size: 16px; max-width: 56ch; margin-bottom: 26px; }
.hero .sub b { color: var(--ink); font-weight: 600; }
.hero .sub .mono { font-size: 13.5px; color: var(--amber); }

/* mission preview panel — CSS-animated fake pipeline */
.preview-panel { position: relative; overflow: hidden; padding: 18px 18px 14px; }
.preview-panel .eyebrow { margin-bottom: 12px; }
.preview-svg { width: 100%; height: auto; display: block; }
.preview-svg .plabel { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.preview-svg .pnode { fill: var(--surface-2); stroke: var(--line); }
.preview-svg .pnode.hot { stroke: rgba(245, 177, 76, .5); }
.preview-svg .proute { fill: none; stroke: rgba(158, 178, 208, .28); stroke-width: 1.5; stroke-dasharray: 5 5; }
.preview-dot { r: 3.5; }
.preview-dot.d1 { fill: var(--amber-deep); animation: prevflow1 3.6s linear infinite; }
.preview-dot.d2 { fill: var(--cyan); animation: prevflow2 3.6s linear infinite; animation-delay: 1.2s; }
.preview-dot.d3 { fill: var(--violet); animation: prevflow3 3.6s linear infinite; animation-delay: 2.4s; }
@keyframes prevflow1 {
  0% { transform: translate(38px, 75px); opacity: 0; }
  8% { opacity: 1; }
  42% { transform: translate(175px, 75px); }
  58% { transform: translate(215px, 75px); }
  92% { transform: translate(330px, 32px); opacity: 1; }
  100% { transform: translate(340px, 32px); opacity: 0; }
}
@keyframes prevflow2 {
  0% { transform: translate(38px, 75px); opacity: 0; }
  8% { opacity: 1; }
  42% { transform: translate(175px, 75px); }
  58% { transform: translate(215px, 75px); }
  92% { transform: translate(330px, 75px); opacity: 1; }
  100% { transform: translate(340px, 75px); opacity: 0; }
}
@keyframes prevflow3 {
  0% { transform: translate(38px, 75px); opacity: 0; }
  8% { opacity: 1; }
  42% { transform: translate(175px, 75px); }
  58% { transform: translate(215px, 75px); }
  92% { transform: translate(330px, 118px); opacity: 1; }
  100% { transform: translate(340px, 118px); opacity: 0; }
}
.preview-tick { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .06em; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; display: flex; justify-content: space-between; }
.preview-tick em { color: var(--green); font-style: normal; animation: prevpulse 2.4s ease-in-out infinite; }
@keyframes prevpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .preview-dot.d1, .preview-dot.d2, .preview-dot.d3 { animation: none; opacity: 1; transform: translate(175px, 75px); }
  .preview-tick em { animation: none; }
}

/* ---------- how it works — tracking-rail dots ---------- */

.howit { max-width: 1060px; margin: 0 auto; padding: 36px 24px 8px; }
.howit-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 22px; }
.howstep { position: relative; padding: 0 22px 0 0; }
.howstep .dot {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--amber);
  background: var(--surface); margin-bottom: 14px; position: relative; z-index: 1;
}
.howstep::before {
  content: ""; position: absolute; top: 16px; left: 34px; right: 0;
  border-top: 2px dashed rgba(158, 178, 208, .22);
}
.howstep:last-child::before { display: none; }
.howstep h3 { font-size: 17px; margin-bottom: 6px; }
.howstep p { font-size: 13.5px; color: var(--ink-2); max-width: 34ch; }

/* ---------- curriculum strip ---------- */

.curriculum { max-width: 1060px; margin: 0 auto; padding: 46px 24px 8px; }
.mission-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.mcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s ease, border-color .18s ease; }
.mcard:hover { transform: translateY(-2px); border-color: rgba(245, 177, 76, .4); }
.mcard .ord { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .12em; }
.mcard .nm { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.mcard .ind { font-size: 12.5px; color: var(--ink-2); }
.mcard .meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.chip.free { color: var(--green); border-color: rgba(63, 164, 112, .5); }
.chip.pro { color: var(--amber); border-color: rgba(245, 177, 76, .5); }

/* ---------- auth panel ---------- */

.auth-section { max-width: 1060px; margin: 0 auto; padding: 52px 24px 20px; }
.auth-panel { max-width: 480px; margin: 18px auto 0; overflow: hidden; }
.auth-slider { display: flex; width: 200%; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.auth-slider.to-code { transform: translateX(-50%); }
.auth-pane { width: 50%; flex-shrink: 0; padding: 4px; }
.auth-pane h2 { font-size: 20px; margin-bottom: 6px; }
.auth-pane .hint { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.email-row { display: flex; gap: 10px; }
.email-row input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; color: var(--ink); font: inherit;
}
.email-row input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.auth-err { min-height: 18px; font-size: 12.5px; color: var(--crit); margin-top: 10px; }

.code-row { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.code-row input {
  /* flex-basis instead of a fixed width so all six always fit the pane */
  flex: 0 1 46px; width: auto; min-width: 0; height: 56px; text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font-family: var(--font-mono); font-size: 24px; caret-color: var(--amber);
}
.code-row input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.code-row.shake { animation: authshake .4s ease; }
.code-row.shake input { border-color: rgba(217, 106, 94, .7); }
@keyframes authshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-slider { transition: none; }
  .code-row.shake { animation: none; }
}

.demo-chip {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin: 14px auto 8px; padding: 9px 14px; max-width: 320px;
  background: rgba(245, 177, 76, .08); border: 1px solid rgba(245, 177, 76, .45); border-radius: 8px;
}
.demo-chip .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--amber); }
.demo-chip .code { font-family: var(--font-mono); font-size: 17px; letter-spacing: .3em; color: var(--ink); }
.demo-chip .copy { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; }
.demo-chip .copy:hover { color: var(--amber); border-color: rgba(245, 177, 76, .5); }
.demo-caption { font-size: 12px; color: var(--ink-3); text-align: center; max-width: 40ch; margin: 0 auto 16px; }
.code-actions { display: flex; justify-content: center; gap: 14px; align-items: center; }
.linkish { font-size: 12.5px; color: var(--ink-3); text-decoration: underline; }
.linkish:hover { color: var(--ink-2); }

/* ---------- upgrade page ---------- */

.upgrade-main { max-width: 1060px; margin: 0 auto; padding: 40px 24px 60px; }
.demo-banner {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--warn);
  background: rgba(217, 161, 59, .08); border: 1px solid rgba(217, 161, 59, .4);
  border-radius: 8px; padding: 10px 16px; margin-bottom: 34px;
}
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; align-items: stretch; }
.plancard { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; position: relative; }
.plancard.hot { border-color: rgba(245, 177, 76, .6); box-shadow: 0 0 0 1px rgba(245, 177, 76, .35), 0 14px 40px rgba(0, 0, 0, .35); }
.plancard .pop {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--amber); color: var(--bg); border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.plancard .pname { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.plancard .price { font-family: var(--font-mono); font-size: 30px; color: var(--ink); }
.plancard .price .per { font-size: 13px; color: var(--ink-3); }
.plancard .pdesc { font-size: 13.5px; color: var(--ink-2); flex: 1; }
.plancard .btn { width: 100%; text-align: center; }
.plancard .stripe-note { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: -4px; }
.cap-copy { text-align: center; color: var(--ink-2); font-size: 13.5px; max-width: 62ch; margin: 34px auto 0; }
.cap-copy b { color: var(--amber); font-weight: 600; }

/* payment success takeover */
.pay-takeover {
  position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center; background: rgba(13, 20, 32, .92); backdrop-filter: blur(4px);
}
.pay-takeover.on { display: flex; }
.pay-stamp {
  border: 3px solid var(--green); border-radius: 12px; padding: 26px 40px; text-align: center;
  transform: rotate(-4deg) scale(1.6); opacity: 0;
  animation: stampin .5s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
.pay-stamp .big { font-family: var(--font-mono); font-size: 26px; letter-spacing: .12em; color: var(--green); text-transform: uppercase; }
.pay-stamp .sml { font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; color: var(--ink-2); text-transform: uppercase; margin-top: 8px; }
@keyframes stampin { to { transform: rotate(-4deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pay-stamp { animation: none; transform: rotate(-4deg) scale(1); opacity: 1; }
}

/* ---------- responsive ---------- */

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .hero h1 { font-size: 32px; }
  .howit-rail { grid-template-columns: 1fr; gap: 20px; }
  .howstep::before { display: none; }
  .mission-strip { grid-template-columns: 1fr 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mission-strip { grid-template-columns: 1fr; }
  .email-row { flex-direction: column; }
  .code-row input { flex-basis: 40px; height: 50px; font-size: 20px; }
}

/* ================= v3 landing ================= */

.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ghost-btn {
  background: transparent !important; color: var(--amber) !important;
  border: 1px solid rgba(245, 177, 76, .5);
}
.ghost-btn:hover { border-color: var(--amber); }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: 26px;
  margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--line);
}
.hstat b { display: block; font-size: 26px; color: var(--amber); font-weight: 500; }
.hstat span { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; display: block; max-width: 14ch; }

/* preview ops feed */
.preview-feed { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; min-height: 66px; overflow: hidden; }
.pf-row {
  font-size: 10.5px; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
  animation: feedin .35s ease both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-row .fa { color: var(--green); font-weight: 500; }
.pf-row .fd { color: var(--amber); font-weight: 500; }
.pf-row .fh { color: var(--violet); font-weight: 500; }
@keyframes feedin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-row { animation: none; } }

/* how-it-works: 4 steps */
.howit-rail.four { grid-template-columns: repeat(4, 1fr); }

/* concepts band */
.concepts-band { max-width: 1060px; margin: 0 auto; padding: 46px 24px 8px; }
.concept-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ccloud-chip {
  font-size: 11px; letter-spacing: .08em; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface);
  transition: border-color .2s, color .2s, transform .2s;
}
.ccloud-chip:hover { border-color: rgba(47, 157, 180, .55); color: var(--cyan); transform: translateY(-1px); }
.reveal.in .ccloud-chip { animation: chipin .4s ease both; animation-delay: calc(var(--i) * 28ms); }
@keyframes chipin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.band-note { font-size: 13px; color: var(--ink-3); margin-top: 16px; max-width: 62ch; }

/* curriculum: 20 cards */
.mission-strip { grid-template-columns: repeat(4, 1fr); }
.mcard.reveal-item { opacity: 0; transform: translateY(10px); }
.mcard.reveal-item.in {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: calc(var(--i) * 22ms);
}

/* pricing band */
.pricing-band { max-width: 1060px; margin: 0 auto; padding: 52px 24px 8px; }
.price-duo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; margin-top: 22px; max-width: 780px; }
.pricecard { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; position: relative; }
.pricecard.hot { border-color: rgba(245, 177, 76, .6); box-shadow: 0 0 0 1px rgba(245, 177, 76, .35), 0 14px 40px rgba(0, 0, 0, .35); }
.pricecard .pname { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.pricecard .price { font-size: 34px; color: var(--ink); }
.pricecard .price .per { font-size: 13px; color: var(--ink-3); }
.pricecard .pdesc { font-size: 13.5px; color: var(--ink-2); flex: 1; }
.pricecard .pdesc em { color: var(--amber); font-style: normal; }
.pricecard .btn { text-align: center; }

/* auth clip fix — pane 2 must never leak into the panel padding */
.auth-panel { overflow: visible; }
.auth-clip { overflow: hidden; margin: -4px; padding: 4px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .mcard.reveal-item { opacity: 1; transform: none; transition: none; }
  .reveal.in .ccloud-chip { animation: none; }
}

@media (max-width: 880px) {
  .hero-stats { grid-template-columns: repeat(2, auto); gap: 16px 26px; }
  .howit-rail.four { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mission-strip { grid-template-columns: 1fr 1fr; }
  .price-duo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .howit-rail.four { grid-template-columns: 1fr; }
  .mission-strip { grid-template-columns: 1fr; }
}

/* ---------- v3 upgrade page ---------- */

.upg-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-top: 26px; align-items: start; }
.upg-main-card { gap: 14px; }
.upg-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 8px; }
.upg-list li { font-size: 13.5px; color: var(--ink-2); padding-left: 22px; position: relative; }
.upg-list li::before {
  content: "✓"; position: absolute; left: 2px; color: var(--green);
  font-family: var(--font-mono); font-size: 12px;
}
.upg-list li b { color: var(--ink); font-weight: 600; }
.upg-side { display: flex; flex-direction: column; gap: 14px; }
.upg-note p { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.upg-note b { color: var(--amber); font-weight: 600; }
@media (max-width: 880px) { .upg-duo { grid-template-columns: 1fr; } }

/* ============================================================= */
/* v4 — landing chapters, glyphs, mobile polish                  */
/* ============================================================= */

.mission-strip .course-strip-h { margin: 18px 0 2px; }
.mission-strip .mcard { border-top: 2px solid var(--ch, var(--line)); }
.mission-strip .glyph-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mission-strip .glyph-row .ind-glyph { flex-shrink: 0; }

/* landing + auth mobile pass */
@media (max-width: 560px) {
  .site-header .header-top { padding: 12px 14px; flex-wrap: wrap; }
  .hero { padding: 32px 16px 28px; gap: 24px; }
  .hero h1 { font-size: clamp(28px, 8.5vw, 36px); }
  .hero-stats { flex-wrap: wrap; gap: 14px; }
  section { scroll-margin-top: 70px; }
  .auth-panel { padding: 20px 16px; }
  .code-row input { flex-basis: 42px; height: 52px; font-size: 20px; }
  .pricing-band { padding: 26px 16px; }
  .upgrade-main { padding-left: 14px; padding-right: 14px; }
  .upg-main-card .price { font-size: 38px; }
}

/* inert slider pane: unfocusable (JS) and invisible once the slide ends */
.auth-pane[inert] { visibility: hidden; transition: visibility 0s .5s; }
.auth-pane:not([inert]) { visibility: visible; transition: none; }

/* narrow phones: stack the verify button over the switch-email link */
@media (max-width: 560px) {
  .code-actions { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .code-actions .btn { justify-content: center; white-space: nowrap; }
}

/* breathing room between the code boxes and the verify actions */
.code-actions { margin-top: 20px; }
.code-row { margin-bottom: 8px; }

/* ============================================================= */
/* v16 — subscription landing overhaul                           */
/* ============================================================= */

.band-h { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 8px; }
.hero-feats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px;
  font-size: 10px; letter-spacing: .14em; color: var(--ink-3); }

/* mission control live panel */
.mc-live { padding: 0; overflow: hidden; }
.mcl-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); }
.mcl-bar b { color: var(--amber); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin: 0 4px; animation: livepulse 1.6s ease-in-out infinite; }
.mcl-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; }
.mcl-left { padding: 12px 14px; border-right: 1px solid var(--line); }
.mcl-right { padding: 12px 14px; display: flex; flex-direction: column; }
.mcl-h { display: block; font-size: 8.5px; letter-spacing: .18em; color: var(--ink-3); margin: 8px 0 8px; }
.mcl-h:first-child { margin-top: 0; }
.mcl-h .live-tag { color: var(--green); font-style: normal; float: right; }
.preq { font-size: 8px; fill: var(--amber); }
.mcl-flow { width: 100%; height: 56px; }
.flow-area { fill: rgba(47, 157, 180, .18); }
.flow-line { fill: none; stroke: var(--cyan); stroke-width: 1.6; }
.mcl-feed { display: flex; flex-direction: column; gap: 6px; min-height: 118px; }
.mcl-row { font-size: 9.5px; color: var(--ink-2); line-height: 1.45; animation: stagein .3s ease both; }
.mcl-row i { font-style: normal; color: var(--ink-3); margin-right: 6px; font-size: 8.5px; }
.mcl-row b { margin-right: 5px; font-size: 8.5px; letter-spacing: .08em; }
.mcl-row .fa { color: var(--green); } .mcl-row .fd { color: var(--warn); }
.mcl-row .fh { color: var(--violet); } .mcl-row .fi { color: var(--cyan); }
.mcl-row .fw { color: var(--crit); }
.mcl-metrics { display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.mcl-donut { position: relative; width: 64px; text-align: center; flex-shrink: 0; }
.mcl-donut svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.mcl-donut b { position: absolute; top: 22px; left: 0; right: 0; font-size: 12px; }
.mcl-donut span { font-size: 9px; color: var(--ink-3); }
.mcl-nums { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mcl-nums div { display: flex; justify-content: space-between; font-size: 10px; }
.mcl-nums span { color: var(--ink-3); }
.mcl-nums b { color: var(--ink); }

/* stats band */
.stats-band { max-width: 1060px; margin: 0 auto; padding: 26px 24px 6px; }
.stats-band .hero-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 6px; }
.stats-band .hstat span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; color: var(--ink-3); }
.stats-band .hstat b { font-size: 26px; }

/* course cards */
.courses-band { max-width: 1060px; margin: 0 auto; padding: 44px 24px 8px; }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.course-card { padding: 0; overflow: hidden; border-top: 2px solid var(--cc, var(--line));
  display: flex; flex-direction: column; }
.cc-art { position: relative; }
.cc-art img { display: block; width: 100%; height: 130px; object-fit: cover; }
.cc-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,20,32,.1), rgba(13,20,32,.6) 85%, var(--surface)); }
.cc-art .cc-no { position: absolute; left: 12px; top: 10px; z-index: 1; font-size: 22px; font-weight: 600;
  color: var(--cc, var(--amber)); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.cc-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cc-kicker { font-size: 9px; letter-spacing: .2em; color: var(--cc, var(--amber)); }
.cc-body h3 { font-size: 19px; margin: 0; }
.cc-body p { font-size: 12.5px; color: var(--ink-2); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip { font-size: 9px; letter-spacing: .06em; color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; }
.cc-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3);
  letter-spacing: .08em; margin-top: auto; padding-top: 8px; }
.cc-cta { justify-content: center; margin-top: 10px; padding: 10px 16px; font-size: 14px; }

/* pricing feature lists + final CTA */
.price-head { text-align: center; max-width: 60ch; margin: 0 auto 22px; }
.pfeat { list-style: none; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--ink-2); }
.final-cta { text-align: center; padding: 64px 24px; margin-top: 50px;
  background: linear-gradient(180deg, transparent, rgba(245,177,76,.06));
  border-top: 1px solid var(--line); }
.final-cta h2 { font-size: clamp(24px, 3.6vw, 34px); }
.final-cta p { color: var(--ink-3); margin: 8px 0 20px; }

@media (max-width: 880px) { .course-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .mcl-grid { grid-template-columns: 1fr; }
  .mcl-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-band .hstat { flex: 1 1 40%; text-align: center; }
}

/* mobile landing header: logo + single CTA (nav links live in the page anchors) */
@media (max-width: 720px) {
  .site-header .waybill-no { display: none; }

  .site-header .header-top { padding: 12px 14px; gap: 10px; }
  .header-links { margin-left: auto; }
  .header-cta { padding: 9px 13px; font-size: 13px; }
  .hero-feats { gap: 10px 14px; font-size: 9px; }
  .price-duo { grid-template-columns: 1fr; }
}

/* ============================================================= */
/* v17 — MissionStack: typography, aurora, motion & wow           */
/* ============================================================= */

/* ---- brand mark ---- */
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; }
.logo-mark { width: 26px; height: 26px; flex-shrink: 0; display: block;
  filter: drop-shadow(0 3px 10px rgba(47, 157, 180, .45)); animation: markfloat 5s ease-in-out infinite; }
@keyframes markfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.logo-txt { white-space: nowrap; }
.logo em { color: var(--amber); font-style: normal; }

/* ---- landing eyebrows: clean small-caps, no borders ---- */
.hero .eyebrow, .howit .eyebrow, .concepts-band .eyebrow, .curriculum .eyebrow, .upgrade-main .eyebrow {
  border: 0; background: none; padding: 0 0 0 22px; color: var(--cyan);
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; position: relative;
}
.hero .eyebrow::before, .howit .eyebrow::before, .concepts-band .eyebrow::before,
.curriculum .eyebrow::before, .upgrade-main .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--cyan);
  box-shadow: 0 0 8px rgba(47, 157, 180, .8);
}

/* ---- aurora hero background ---- */
.hero { position: relative; }
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(90px); opacity: .5;
}
.hero::before { width: 620px; height: 620px; top: -180px; left: -160px;
  background: radial-gradient(circle, rgba(245,177,76,.28), transparent 68%);
  animation: aurora1 18s ease-in-out infinite; }
.hero::after { width: 720px; height: 720px; top: -60px; right: -220px;
  background: radial-gradient(circle, rgba(47,157,180,.30), transparent 68%);
  animation: aurora2 22s ease-in-out infinite; }
@keyframes aurora1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,60px) scale(1.15); } }
@keyframes aurora2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-80px,80px) scale(.92); } }

/* ---- headline: staggered word reveal + gradient emphasis ---- */
.hero h1 { letter-spacing: -.025em; line-height: 1.06; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(24px) rotateX(-40deg);
  filter: blur(6px); animation: wordin .8s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes wordin { to { opacity: 1; transform: none; filter: blur(0); } }
.hero h1 em, .hero h1 em .w { font-style: normal;
  background: linear-gradient(100deg, #F5B14C, #FFD98E 35%, #F5B14C 60%, #C98120);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite; }
@keyframes shimmer { to { background-position: 220% 0; } }
.hero .sub, .hero-ctas, .hero-feats { opacity: 0; animation: fadeup .9s cubic-bezier(.2,.9,.3,1) forwards; }
.hero .sub { animation-delay: .55s; } .hero-ctas { animation-delay: .7s; } .hero-feats { animation-delay: .85s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- mission-control panel entrance + spotlight ---- */
.mc-live { opacity: 0; animation: panelin 1s cubic-bezier(.2,.9,.3,1) .35s forwards;
  position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
@keyframes panelin { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.mc-live::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(245,177,76,.10), transparent 60%);
  opacity: 0; transition: opacity .35s; }
.mc-live:hover::after { opacity: 1; }

/* ---- scroll progress ---- */
.scroll-prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--cyan), var(--amber)); box-shadow: 0 0 12px rgba(245,177,76,.6); }

/* ---- richer scroll reveals ---- */
.reveal, .reveal-item { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(4px);
  transition: opacity .8s cubic-bezier(.2,.9,.3,1), transform .8s cubic-bezier(.2,.9,.3,1), filter .8s; }
.reveal.in, .reveal-item.in { opacity: 1; transform: none; filter: blur(0); }
.reveal-item { transition-delay: calc(var(--i, 0) * 70ms); }

/* ---- section headings with drawn underline ---- */
.band-h { position: relative; display: inline-block; padding-bottom: 10px; }
.band-h::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--amber), transparent); transition: width 1s ease .2s; }
.reveal.in .band-h::after, .band-h.in::after { width: 78px; }

/* ---- cards: lift, glow, sheen ---- */
.course-card { transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s, border-color .35s;
  position: relative; }
.course-card:hover { transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--cc) 45%, transparent); }
.course-card .cc-art img { transition: transform .7s cubic-bezier(.2,.9,.3,1); }
.course-card:hover .cc-art img { transform: scale(1.08); }
.course-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 200% 0; transition: background-position .9s ease; }
.course-card:hover::after { background-position: -60% 0; }
.pricecard { transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s; }
.pricecard:hover { transform: translateY(-6px); box-shadow: 0 22px 54px rgba(0,0,0,.45); }
.pricecard.hot { position: relative; overflow: hidden; }
.pricecard.hot::before { content: ""; position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from 0deg, transparent, rgba(245,177,76,.16), transparent 30%);
  animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- stat counters ---- */
.hstat b { transition: text-shadow .6s; }
.hstat.done b { text-shadow: 0 0 22px rgba(245,177,76,.55); }

/* ---- concept marquee ---- */
.concept-cloud { display: flex; flex-wrap: nowrap; gap: 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cc-track { display: flex; gap: 10px; flex: 0 0 auto; animation: marquee 42s linear infinite; }
.concept-cloud:hover .cc-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ccloud-chip { white-space: nowrap; transition: color .25s, border-color .25s, transform .25s; }
.ccloud-chip:hover { color: var(--amber); border-color: rgba(245,177,76,.6); transform: translateY(-2px); }

/* ---- final CTA glow pulse ---- */
.final-cta .btn { animation: ctaglow 3s ease-in-out infinite; }
@keyframes ctaglow { 0%,100% { box-shadow: 0 8px 26px rgba(245,177,76,.25); }
  50% { box-shadow: 0 10px 40px rgba(245,177,76,.55); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .logo-mark, .cc-track, .pricecard.hot::before,
  .final-cta .btn, .hero h1 em { animation: none !important; }
  .hero h1 .w, .hero .sub, .hero-ctas, .hero-feats, .mc-live { opacity: 1; transform: none; filter: none; animation: none; }
  .reveal, .reveal-item { opacity: 1; transform: none; filter: none; }
}
/* emphasized headline words need BOTH the entrance and the shimmer
   (the gradient rule was overriding wordin, leaving them at opacity 0) */
.hero h1 em .w { opacity: 0;
  animation: wordin .8s cubic-bezier(.2,.9,.3,1) var(--d, 0s) forwards, shimmer 5s linear infinite; }

/* ---- account page ---- */
.account-main { max-width: 720px; margin: 0 auto; padding: 42px 20px 80px; }
.acc-h1 { font-size: 34px; margin: 6px 0 26px; }
.acc-card { padding: 22px; margin-bottom: 16px; }
.acc-h { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 10px; }
.acc-plan {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 8px;
}
.acc-plan em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.acc-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--ink-3);
}
.acc-tag.warn { border-color: var(--crit); color: var(--crit); }
.acc-p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; max-width: 60ch; }
.acc-p b { color: var(--ink); }
.acc-warn {
  font-size: 14px; line-height: 1.55; color: var(--crit); margin-bottom: 14px;
  background: rgba(217,106,94,.1); border: 1px solid rgba(217,106,94,.4);
  border-radius: 8px; padding: 11px 14px; max-width: 60ch;
}
.acc-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; max-width: 62ch; }
.acc-note b { color: var(--ink-2); }
.acc-email { font-size: 14px; color: var(--ink); margin-bottom: 14px; }
.acc-loading { font-size: 13px; color: var(--ink-3); }

/* ---- legal pages ---- */
.legal-main { max-width: 720px; margin: 0 auto; padding: 42px 20px 70px; }
.legal-h1 { font-size: 34px; margin: 6px 0 8px; }
.legal-updated { font-size: 11.5px; color: var(--ink-3); margin-bottom: 26px; }
.legal-lede {
  font-size: 16px; line-height: 1.65; color: var(--ink); margin-bottom: 30px;
  padding: 16px 18px; border-left: 3px solid var(--amber);
  background: var(--surface); border-radius: 0 8px 8px 0;
}
.legal-main h2 {
  font-size: 19px; margin: 30px 0 10px; padding-top: 4px;
}
.legal-main p { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); margin-bottom: 12px; }
.legal-main p b, .legal-list b { color: var(--ink); }
/* Buttons keep their own colours — this page shell is shared with /programs.html,
   where an amber link rule painted amber text onto an amber button. */
.legal-main a:not([class*="btn"]) { color: var(--amber); }
.legal-list { margin: 0 0 14px 0; padding-left: 20px; }
.legal-list li { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); margin-bottom: 8px; }

/* footer links, shared with the landing page */

/* ---- learning paths (home) ---- */
.hero-avail { font-size: 11px; letter-spacing: .1em; color: var(--ink-3); margin-top: 14px; }
.paths-band { max-width: 1120px; margin: 0 auto; padding: 62px 20px 10px; }
.path-list { display: grid; gap: 16px; margin-top: 26px; }
.path-card { padding: 24px; border-left: 3px solid var(--pc, var(--amber)); }
.pc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-state {
  font-size: 10px; letter-spacing: .14em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; display: inline-block;
}
.pc-state.now { color: var(--pc); border-color: var(--pc); }
.pc-meta { font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3); }
.pc-name { font-size: 26px; margin: 12px 0 8px; }
.pc-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; margin-bottom: 16px; }
.pc-levels { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.pc-levels li {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
}
.pc-levels span { font-size: 11px; color: var(--ink-3); }
.pc-levels b { font-size: 14px; }
.pc-levels em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: auto; }
.pc-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.path-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.path-card.soon { padding: 20px; opacity: .92; }
.path-card.soon .pc-name { font-size: 19px; margin: 10px 0 8px; }
.path-card.soon .pc-desc { font-size: 13.5px; margin-bottom: 14px; }
.pc-inc { font-size: 10px; letter-spacing: .12em; color: var(--pc); }
.paths-foot { font-size: 12.5px; color: var(--ink-3); margin-top: 20px; text-align: center; max-width: 70ch; margin-inline: auto; }

/* ---- what membership unlocks ---- */
.unlocks { max-width: 800px; margin: 0 auto; padding: 62px 20px 10px; text-align: center; }
.unlock-list { list-style: none; padding: 0; margin: 22px 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; text-align: left; }
.unlock-list li {
  font-size: 14px; color: var(--ink-2); padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.unlock-list li::before { content: "✓ "; color: var(--green); font-weight: 700; }

/* ---- programs page ---- */
.prog-sec { margin: 34px 0 10px; }
.prog-sec.next { margin-top: 54px; }
.prog-state { font-size: 10px; letter-spacing: .14em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; display: inline-block; }
.prog-state.now { color: var(--cyan); border-color: var(--cyan); }
.prog-name { font-size: 30px; margin: 12px 0 10px; }
.prog-h2 { font-size: 24px; margin: 0 0 10px; }
.prog-h3 { font-size: 19px; margin: 44px 0 14px; }
.prog-desc { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; margin-bottom: 16px; }
.prog-note { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; max-width: 64ch; }
.prog-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; font-size: 12px; color: var(--ink-3); }
.prog-stats b { color: var(--amber); font-size: 15px; margin-right: 4px; }
.prog-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.prog-next { padding: 20px; border-left: 3px solid var(--pc, var(--amber)); }
.prog-next h3 { font-size: 19px; margin: 10px 0 8px; }
.prog-next p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 12px; }
.prog-next ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; }
.prog-next li { font-size: 12.5px; color: var(--ink-3); }
.prog-next li::before { content: "· "; color: var(--pc); }
.prog-cta { margin: 56px 0 10px; padding-top: 30px; border-top: 1px solid var(--line); }
.prog-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* the programs page is wider than a legal page — it carries the mission grid */
body:has(.prog-missions) .legal-main { max-width: 1120px; }
/* .live is a global utility that sets inline-flex for the ● LIVE badges — do not
   reuse it as a state modifier on a block-level card. */
.path-card { display: block; }

/* ---- header: live badge, sign-in, and a shrink on scroll ---- */
.live-training { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px;
  letter-spacing: .14em; color: var(--ink-3); }
.lt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(47,157,180,.6); animation: ltPulse 3s ease-out infinite; flex: none; }
@keyframes ltPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,157,180,.55); }
  60%  { box-shadow: 0 0 0 7px rgba(47,157,180,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,157,180,0); }
}
.hl-signin { font-size: 14px; color: var(--ink-2); }
.hl-signin:hover { color: var(--amber); }

/* the shrink is deliberately small — it should register without being noticed */
.site-header { transition: padding .25s ease, background .25s ease, box-shadow .25s ease; }
.site-header .header-top { transition: padding .25s ease; }
.site-header.shrunk .header-top { padding-top: 9px; padding-bottom: 9px; }
.site-header.shrunk { background: rgba(13, 20, 32, .94); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.site-header.shrunk .live-training { opacity: 0; pointer-events: none; }
.live-training { transition: opacity .2s ease; }

/* ---- nav: which section you are actually in ---- */
.header-links a { position: relative; }
.header-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
}
.header-links a:not(.btn).here::after { transform: scaleX(1); }
.header-links a:not(.btn).here { color: var(--ink); }

/* ---- the CTA arrow travels on hover ---- */
.btn-arw { font-style: normal; display: inline-block; transition: transform .2s ease; }
.btn:hover .btn-arw { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

/* ---- how a mission works, as a progression ---- */
.howit-rail .dot { transition: color .3s ease, border-color .3s ease, background .3s ease,
  box-shadow .3s ease; transition-delay: calc(var(--s, 0) * 220ms); }
.howit-rail.running .dot {
  color: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(245,177,76,.10);
}
.howstep::before { transform: scaleX(0); transform-origin: left;
  transition: transform .5s ease calc(var(--s, 0) * 220ms); }
.howit-rail.running .howstep::before { transform: scaleX(1); }

/* ---- the path that is genuinely next ---- */
.pc-state.next { color: var(--pc); border-color: var(--pc); display: inline-flex;
  align-items: center; gap: 7px; }
.pc-state.next .lt-dot { background: var(--pc); animation: ltPulse 3s ease-out infinite; }
.path-card.soon { transition: transform .25s ease, border-color .25s ease; }
.path-card.soon:hover { transform: translateY(-2px); }
.path-card.is-now { transition: transform .25s ease, box-shadow .25s ease; }
.path-card.is-now:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.35); }

@media (prefers-reduced-motion: reduce) {
  .lt-dot, .pc-state.next .lt-dot { animation: none; }
  .site-header, .site-header .header-top, .header-links a:not(.btn)::after,
  .btn-arw, .howit-rail .dot, .howstep::before, .path-card.soon, .path-card.is-now
    { transition: none; }
  .howstep::before { transform: scaleX(1); }
}

/* ---- consent bar (shown to European visitors only) ---- */
.consent-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 720px; margin: 0 auto; display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.consent-bar.in { opacity: 1; transform: translateY(0); }
.consent-bar p { font-size: 13px; line-height: 1.55; color: var(--ink-2); flex: 1 1 320px; margin: 0; }
.consent-bar a { color: var(--amber); }
.cb-btns { display: flex; gap: 8px; margin-left: auto; }
.cb-btns .btn { padding: 9px 18px; font-size: 14px; }
@media (max-width: 560px) { .cb-btns { width: 100%; } .cb-btns .btn { flex: 1; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .consent-bar { transition: none; opacity: 1; transform: none; } }

/* ============================================================= */
/* v18 — phone: cut the page down to what earns its scroll        */
/* ============================================================= */
/* The landing page ran 7,270px on a 390px screen — eleven full
   screens of thumb. Nothing below is a redesign; it is the same
   page with the parts that only work at desk width folded away.
   Desktop is untouched: every rule here is behind 720px. */
@media (max-width: 720px) {

  /* Mission Control keeps the two things a phone can actually read —
     the topology and the live feed. The traffic sparkline is 380px of
     detail squeezed into 360, and the metrics donut repeats the stats
     band sitting directly beneath it. */
  .mcl-left span.mcl-h:nth-of-type(2),
  .mcl-flow,
  .mcl-right span.mcl-h:nth-of-type(2),
  .mcl-metrics { display: none; }
  .mcl-feed { min-height: 0; }
  .mcl-row:nth-child(n+4) { display: none; }
  .mcl-left { padding: 10px 12px; }
  .mcl-right { padding: 10px 12px 14px; }

  /* Planned paths are roadmap, not product. On a phone the name and
     the badge carry the whole message; the paragraph underneath is
     three cards' worth of scrolling for something nobody can buy.
     The footnote below the group already states they are not included
     yet, so the per-card repeat of that line goes too. */
  .path-next { grid-template-columns: 1fr; gap: 8px; }
  .path-card.soon { display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px 10px; padding: 12px 14px; }
  .path-card.soon .pc-name { font-size: 15px; margin: 0; }
  .path-card.soon .pc-desc, .path-card.soon .pc-inc { display: none; }
  .paths-foot { margin-top: 14px; }

  /* Desk-width breathing room, at phone width */
  .paths-band { padding: 34px 16px 8px; }
  .howit { padding: 30px 16px 6px; }
  .concepts-band { padding: 28px 16px 6px; }
  .unlocks { padding: 34px 16px 8px; }
  .howit-rail.four { gap: 14px; }
  .howstep { padding: 0; }
  .howstep p { max-width: none; }

  /* The headline and its paragraph are the message, so the words stay —
     they just stop being set at billboard size on a 390px screen. */
  .hero h1 { font-size: clamp(27px, 7.6vw, 33px); margin: 10px 0 12px; }
  .hero .sub { font-size: 15px; line-height: 1.55; margin-bottom: 20px; }

  /* Two calls to action stacked back to back. The sign-up form directly
     below says the same thing and can actually be filled in, so the
     banner above it earns nothing on a phone. */
  .final-cta { display: none; }
}

/* ============================================================= */
/* v19 — the mobile menu                                          */
/* ============================================================= */
/* Below 768px the header used to hide every link except the CTA,
   which left Sign in, Pricing, Programs and the Leaderboard with no
   route on the device most visitors arrive on. A returning member
   literally could not log in from a phone. */

.nav-toggle { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; flex-shrink: 0;      /* 44px: the accessible tap floor */
    background: none; border: 1px solid var(--line); border-radius: 10px;
    cursor: pointer; padding: 0;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .nt-bars { display: grid; gap: 4px; }
  .nt-bars i { display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--ink-2); transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The panel hangs off the sticky header, so it follows the page. */
  /* The bar was allowed to wrap so the old nav could flow onto a second
     line. With a menu button there is nothing to wrap, and wrapping just
     dropped the button onto a row of its own. */
  .site-header .header-top { flex-wrap: nowrap; }
  .logo-txt { font-size: 15px; }
  .header-cta { white-space: nowrap; }

  .header-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 4px 14px 10px;
    /* Fully opaque: at 98% the hero headline still ghosted through,
       because white text at 2% is plainly visible on a dark ground. */
    background: #0d1420;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
  }
  .header-links.open { display: flex; }
  .header-links a {
    display: flex; align-items: center; min-height: 44px;
    padding: 11px 4px; font-size: 15px;
    border-top: 1px solid var(--line);
  }
  .header-links a:first-child { border-top: 0; }
  .hl-signin { font-size: 15px; color: var(--amber); }

  /* The primary action stays in the bar — the menu never hides it. */
  .header-cta { margin-left: auto; }
}

@media (max-width: 400px) {
  .header-cta { padding: 8px 11px; font-size: 12px; }
  .header-cta .btn-arw { display: none; }
  .logo-txt { font-size: 14px; }
  .site-header .header-top { gap: 8px; padding: 10px 12px; }
}

/* ---- Google Sign-In ---- */
/* Hidden until /api/config confirms the feature is on, so a switched-off
   deployment shows the email form alone rather than a dead button. */
.sso-block { margin: 4px 0 18px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 46px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
  font-weight: 600; font-size: 14.5px;
}
.sso-btn:hover { background: #f7f8f8; }
.sso-g { flex-shrink: 0; }
.sso-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px; color: var(--ink-3); font-size: 12px;
}
.sso-or::before, .sso-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---- what you can do afterwards ---- */
/* Capability claims, not testimonials. Every line here is something the
   twenty missions actually train, so it can be defended. */
.outcomes {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.outcomes li {
  font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; background: var(--surface-2);
}
.outcomes b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .outcomes { gap: 6px; margin-bottom: 20px; }
  .outcomes li { font-size: 12px; padding: 6px 11px; }
}

/* ============================================================= */
/* The 60-second taste                                            */
/* ============================================================= */
/* This replaced the pair of hero buttons. A cold visitor from an advert was
   being asked to commit to a seven-stage simulation before seeing anything;
   now the first thing on the page is a decision they can answer in one tap. */
.taste {
  margin: 22px 0 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 14px;
  max-width: 620px;
}
.t-eyebrow { display: block; font-size: 9.5px; letter-spacing: .18em; color: var(--amber); }
.t-setup { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 10px 0 0; }
.t-q { font-size: 16.5px; line-height: 1.5; color: var(--ink); margin: 12px 0 14px; font-weight: 600; }
.t-opts { display: flex; flex-direction: column; gap: 9px; }
.t-opt {
  text-align: left; cursor: pointer; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 15px; line-height: 1.45;
  transition: border-color .15s ease, background .15s ease;
}
.t-opt:hover:not(:disabled) { border-color: var(--amber); background: rgba(245, 177, 76, .06); }
.t-opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.t-opt:disabled { cursor: default; opacity: .8; }
.t-opt.is-right { border-color: var(--green); background: rgba(63, 164, 112, .09); opacity: 1; }
.t-opt.is-wrong { border-color: var(--crit); background: rgba(224, 90, 90, .07); opacity: 1; }

.t-out { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.to-head { font-size: 16px; font-weight: 700; margin-bottom: 7px; }
.t-out.good .to-head { color: var(--green); }
.t-out.bad .to-head { color: var(--warn); }
.to-body { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.to-more { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin-top: 10px; }
.to-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.to-mail { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.to-mail input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}
.to-mail input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.to-fine, .to-sent { flex-basis: 100%; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.to-sent { color: var(--green); font-size: 14px; }

@media (max-width: 720px) {
  /* One job above the fold: the decision. Everything else waits. */
  .taste { margin: 18px 0 14px; padding: 15px; }
  .t-q { font-size: 15.5px; }
  .t-opt { font-size: 14px; padding: 14px; }
  .to-acts .btn { width: 100%; justify-content: center; min-height: 48px; }
  .hero-feats, .hero-avail { display: none; }
}

/* One headline, one value line, one decision — that is the whole job of the
   first phone screen. The rest of the sentence is still here for anyone
   reading on a laptop, where there is room for it. */
@media (max-width: 720px) {
  .hero h1 { font-size: 27px; line-height: 1.2; }
  .hero .sub { font-size: 14.5px; }
  .hero .sub-more { display: none; }
}

/* 64px of padding above the headline is a third of a small phone screen spent
   on nothing. The decision has to be reachable without a scroll, so everything
   above it gets tighter as the screen gets shorter. */
@media (max-width: 720px) {
  .hero { padding-top: 22px; padding-bottom: 24px; gap: 22px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .taste { margin-top: 16px; }
}
@media (max-width: 400px), (max-height: 700px) {
  .hero { padding-top: 14px; }
  .hero h1 { font-size: 23px; }
  .hero .eyebrow { display: none; }
  .hero .sub { font-size: 14px; margin-bottom: 4px; }
  .taste { margin-top: 12px; padding: 14px; }
  .t-setup { font-size: 13.5px; }
}