/* SMOrchestra Academy components.
 * Loaded only on /academy/ and /ar/academy/ pages, after visuals.css and before
 * ar.css. Kept out of components.css on purpose: adding to that file would force
 * a ?v= bump on 77 unrelated pages (L-WEB-037).
 *
 * Tokens only, no new colours. Every box uses logical properties so one rule
 * serves both directions and ar.css needs no academy block. Shapes that carry
 * meaning stay physical (L-WEB-051).
 *
 * No tracked micro-labels and no directional arrows are introduced here, which
 * is why ar.css does not need an academy selector list.
 */

/* ---- shared atoms ------------------------------------------------------- */
.hero.hero-lite { padding-block: clamp(56px, 9vw, 104px) clamp(28px, 4vw, 48px); }
.ac-trust { margin-block-start: 18px; font-size: 13.5px; color: var(--text-dim); line-height: 1.7; }
.ac-src { margin-block-start: 18px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.ac-rule { margin-block-start: 20px; font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }
.ac-note { border-inline-start: 2px solid var(--claude); padding-inline-start: 18px; }
.ac-note p { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.7; }
.ac-note a { color: var(--orange); font-weight: 600; }
.ac-out { margin-block: 14px 0; font-size: 15px; color: var(--text-dim); }
.ac-out strong { color: var(--text); font-size: clamp(17px, 2.4vw, 21px); font-weight: 700; }
.ac-lab { display: block; font-size: 12px; color: var(--text-dim); margin-block-end: 6px; }
.ac-in { inline-size: 100%; min-block-size: 44px; padding: 10px 14px; background: #0b0b0b;
  border: 1px solid var(--border-dark); color: var(--text); font: inherit; font-size: 15px; }
.ac-in:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.ac-num { max-inline-size: 140px; }
.ac-msg { margin-block-start: 8px; font-size: 13px; color: var(--text-dim); min-block-size: 1.2em; }
.ac-msg.err { color: var(--orange); }

.ac-enemy, .ac-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ac-enemy li, .ac-why li { position: relative; padding-inline-start: 26px; font-size: 15.5px;
  color: var(--text-muted); line-height: 1.7; }
.ac-enemy li::before, .ac-why li::before { content: ""; position: absolute; inset-inline-start: 0;
  inset-block-start: 11px; inline-size: 12px; block-size: 2px; background: var(--orange); }

/* ---- belief break ------------------------------------------------------- */
.ac-vs { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ac-vs-col { background: var(--card-deep); border: 1px solid var(--border-dark); padding: 24px; }
.ac-vs-col .te { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-block-end: 14px; }
.ac-vs-win { border-color: var(--orange); }
.ac-vs-win .te { color: var(--orange); }
.ac-vs-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-vs-col li { position: relative; padding-inline-start: 20px; font-size: 14.5px;
  color: var(--text-muted); line-height: 1.6; }
.ac-vs-col li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 9px;
  inline-size: 8px; block-size: 2px; background: currentColor; opacity: .5; }
@media (min-width: 880px) { .ac-vs { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ---- the ladder --------------------------------------------------------- */
.lad-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 28px; }
.lad-tab { min-block-size: 44px; padding: 10px 18px; background: transparent;
  border: 1px solid var(--border-dark); color: var(--text-dim); font: inherit; font-size: 13.5px;
  cursor: pointer; }
.lad-tab[aria-pressed="true"] { border-color: var(--orange); color: var(--text); background: #150c07; }
.lad-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.lad { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 641px) { .lad { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1161px) { .lad { grid-template-columns: repeat(4, 1fr); } }

.lad-card { display: flex; flex-direction: column; gap: 10px; padding: 22px;
  background: var(--card-deep); border: 1px solid var(--border-dark); color: inherit;
  text-decoration: none; transition: transform var(--t, 200ms) var(--ease, ease),
  border-color var(--t, 200ms) var(--ease, ease); }
.lad-card:hover { transform: translateY(-4px); border-color: var(--vz-a, var(--orange)); }
.lad-card:focus-visible { outline: 2px solid var(--vz-a, var(--orange)); outline-offset: 2px; }
.lad-card[hidden] { display: none; }
.lad-face { display: block; block-size: 78px; color: var(--text-dim); }
.lad-mark { inline-size: 100%; block-size: 100%; color: var(--text-dim); }
.lad-out { font-size: clamp(16px, 2vw, 18.5px); font-weight: 700; color: var(--text); line-height: 1.35; }
.lad-name { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.lad-rung { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 26px;
  block-size: 20px; padding-inline: 6px; background: var(--vz-a, var(--orange)); color: #0b0b0b;
  font-size: 11px; font-weight: 800; }
.lad-persona { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.lad-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-block-start: auto; padding-block-start: 12px; border-block-start: 1px solid var(--border-dark); }
.lad-fmt { font-size: 12px; color: var(--text-dim); }
.lad-price { font-size: 15px; font-weight: 800; }
.lad-go { font-size: 12.5px; color: var(--vz-a, var(--orange)); font-weight: 600; }
.lad-mini .lad-card { gap: 8px; }

/* ---- method ------------------------------------------------------------- */
.ac-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 780px) { .ac-steps { grid-template-columns: repeat(5, 1fr); } }
.ac-step { display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--card-deep); border-block-start: 2px solid var(--orange); }
.ac-step-n { font-size: 12px; font-weight: 800; color: var(--orange); }
.ac-step-t { font-size: 16px; font-weight: 700; color: var(--text); }
.ac-step-b { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ---- instructor --------------------------------------------------------- */
.ac-inst p { font-size: 15.5px; color: var(--text-muted); line-height: 1.8; margin: 0 0 16px; }
.ac-quote { margin: 0 0 16px; padding-inline-start: 18px; border-inline-start: 2px solid var(--orange);
  font-size: clamp(17px, 2.4vw, 21px); color: var(--text); font-weight: 600; line-height: 1.5; }

/* ---- cohort box and enrollment ----------------------------------------- */
.cohort-box { max-inline-size: 620px; padding: 26px; background: var(--card-deep);
  border: 1px solid var(--vz-a, var(--orange)); }
.cb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.cb-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.cb-price { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; }
.cb-fmt { margin: 10px 0 18px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.cb-pay { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }
.cb-consent { margin: 12px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.7;
  position: relative; padding-inline-start: 26px; }
.cb-cx { position: absolute; inset-inline-start: 0; inset-block-start: 3px; inline-size: 14px;
  block-size: 14px; border: 1px solid var(--border-dark); }
.cb-consent a { color: var(--orange); }
.ac-soon { padding: 18px; background: #0b0b0b; border: 1px solid var(--border-dark); }
.ac-soon-t { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); }
.ac-wl { display: grid; gap: 10px; }
@media (min-width: 620px) { .ac-wl { grid-template-columns: 1fr auto; align-items: end; }
  .ac-wl .ac-lab { grid-column: 1 / -1; margin-block-end: 0; } .ac-wl .ac-msg { grid-column: 1 / -1; } }

/* ---- replaced seats ----------------------------------------------------- */
.seats-strip { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .seats-strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .seats-strip { grid-template-columns: repeat(3, 1fr); } }
.seat { padding: 18px; background: var(--card-deep); border: 1px solid var(--border-dark);
  display: flex; flex-direction: column; gap: 6px; }
.seat-pct { font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: var(--orange); line-height: 1; }
.seat-u { font-size: .5em; margin-inline-start: 2px; }
.seat-name { font-size: 15px; font-weight: 700; color: var(--text); }
.seat-keeps { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.seat-keeps em { font-style: normal; color: var(--text-dim); }

/* ---- the stack ---------------------------------------------------------- */
.stack-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .stack-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .stack-grid { grid-template-columns: repeat(3, 1fr); } }
.stack-card { padding: 22px; background: var(--card-deep); border: 1px solid var(--border-dark); }
.stack-n { inline-size: 26px; block-size: 26px; display: flex; align-items: center;
  justify-content: center; background: var(--orange); color: #0b0b0b; font-size: 12px; font-weight: 800; }
.stack-card h3 { margin: 12px 0 8px; font-size: 16px; color: var(--text); }
.stack-opt { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.stack-card p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }
.stack-meta { font-size: 12.5px; color: var(--text-dim); }
.stack-meta em { font-style: normal; color: var(--text-muted); }

/* ---- calculator --------------------------------------------------------- */
.calc { max-inline-size: 900px; }
.calc-rows { display: grid; gap: 12px; }
.calc-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px;
  background: var(--card-deep); border: 1px solid var(--border-dark); }
@media (min-width: 720px) { .calc-row { grid-template-columns: 2fr 1fr 1fr; align-items: end; } }
.calc-row-b { grid-template-columns: 1fr; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: 20px; }
@media (min-width: 880px) { .calc-out { grid-template-columns: repeat(4, 1fr); } }
.calc-o { padding: 18px; background: #0b0b0b; border-block-start: 2px solid var(--orange);
  display: flex; flex-direction: column; gap: 6px; }
.calc-v { font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; line-height: 1; }
.calc-k { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.calc-send { margin-block-start: 22px; display: grid; gap: 10px; }
@media (min-width: 620px) { .calc-send { grid-template-columns: 1fr auto; align-items: end; }
  .calc-send .ac-lab, .calc-send .ac-msg { grid-column: 1 / -1; } }

/* ---- guarantee and credit ---------------------------------------------- */
.guar { padding: 26px; background: var(--card-deep); border-inline-start: 3px solid var(--vz-a, var(--orange)); }
.guar-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--vz-a, var(--orange)); }
.guar-t { margin: 12px 0 0; font-size: clamp(15px, 2.1vw, 18px); color: var(--text); line-height: 1.7; }
.guar-f { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }
.guar-f a, .credit-go { color: var(--orange); font-weight: 600; }
.credit { padding: 24px; background: #150c07; border: 1px solid var(--orange); }
.credit-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.credit-t { margin: 10px 0 12px; font-size: clamp(15px, 2.1vw, 18px); color: var(--text); line-height: 1.65; }
.credit-go { font-size: 14px; }

/* ---- proof and receipts ------------------------------------------------- */
.proof-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.proof-card { display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--card-deep); border: 1px solid var(--border-dark); color: inherit; text-decoration: none; }
a.proof-card:hover { border-color: var(--orange); }
a.proof-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pf-seg { font-size: 12px; color: var(--text-dim); }
.pf-art { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.pf-v { font-size: clamp(17px, 2.4vw, 21px); font-weight: 800; color: var(--orange); }
.pf-l { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.pf-s { font-size: 11.5px; color: var(--text-dim); }
.pf-st { margin-block-start: auto; padding-block-start: 10px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lime); }

.shots { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .shots { grid-template-columns: 1fr 1fr; } }
/* A light screenshot is an artifact placed on a dark page, so it gets a window
 * frame rather than an inverted filter. Inverting a UI capture makes muddy false
 * colour and reads as fake, which is the opposite of a receipt. */
.shot { margin: 0; border: 1px solid var(--border-dark); background: var(--card-deep);
  box-shadow: var(--shadow-card); overflow: hidden; }
.shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: #0b0b0b;
  border-block-end: 1px solid var(--border-dark); }
.shot-bar i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--border-dark); }
.shot-img { display: block; inline-size: 100%; block-size: auto; }
.shot-light .shot-img { filter: brightness(.94); }
.shot figcaption { padding: 12px 14px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }

/* ---- journey infographic ------------------------------------------------ */
.journey { margin: 0; }
.journey-img { display: block; inline-size: 100%; block-size: auto;
  border: 1px solid var(--border-dark); }
.journey figcaption { margin-block-start: 12px; font-size: 12.5px; color: var(--text-dim); }

/* ---- quiz --------------------------------------------------------------- */
.quiz { max-inline-size: 720px; }
.quiz-rail { display: flex; align-items: center; gap: 12px; margin-block-end: 24px; }
.quiz-bar { flex: 1; block-size: 3px; background: var(--border-dark); position: relative; }
.quiz-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: var(--p, 12%); background: var(--orange); transition: inline-size 220ms; }
.quiz-count { font-size: 12px; color: var(--text-dim); }
.quiz-q { border: 0; margin: 0; padding: 0; }
.quiz-q legend { font-size: clamp(18px, 2.8vw, 24px); font-weight: 700; color: var(--text);
  margin-block-end: 18px; line-height: 1.4; }
.quiz-a { display: block; inline-size: 100%; min-block-size: 44px; margin-block-end: 10px;
  padding: 14px 18px; text-align: start; background: var(--card-deep);
  border: 1px solid var(--border-dark); color: var(--text-muted); font: inherit; font-size: 15px;
  cursor: pointer; }
.quiz-a:hover { border-color: var(--orange); color: var(--text); }
.quiz-a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.quiz-result { padding: 26px; background: var(--card-deep); border: 1px solid var(--orange); }
.qr-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.qr-name { margin: 10px 0 6px; font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--text); }
.qr-out { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.qr-persona, .qr-credit { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.qr-price { font-size: 18px; font-weight: 800; color: var(--orange); }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 18px; }

/* ---- terms -------------------------------------------------------------- */
.terms { max-inline-size: 760px; }
.terms-s { margin-block-end: 32px; }
.terms-s h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(17px, 2.4vw, 21px);
  color: var(--text); margin: 0 0 10px; }
.terms-n { font-size: 12px; font-weight: 800; color: var(--orange); }
.terms-s p { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.8; }

/* ---- sticky enroll bar -------------------------------------------------- */
.sticky-enroll { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: none; align-items: center; gap: 12px; padding: 12px 16px;
  padding-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #0b0b0b; border-block-start: 1px solid var(--border-dark); }
.sticky-enroll[hidden] { display: none; }
.se-name { flex: 1; font-size: 13px; color: var(--text-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.se-price { font-size: 16px; font-weight: 800; }
.se-go { min-block-size: 44px; display: inline-flex; align-items: center; }
@media (max-width: 879px) {
  .sticky-enroll { display: flex; }
  body.has-sticky { padding-block-end: 78px; }
}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lad-card, .quiz-bar::after { transition: none; }
  .lad-card:hover { transform: none; }
}

/* Injected by academy.js when a quiz result is remembered for this session. */
.lad-tab-yours { text-decoration: none; display: inline-flex; align-items: center;
  border-color: var(--lime); color: var(--text); }

/* The credit window is the clause people get wrong: academy 90 days, audits 60.
   Stated at the point of the claim, not only on the terms page. */
.credit-fine { margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.credit-fine a { color: var(--orange); }

/* WCAG 1.4.1: a link inside a block of text must not rely on colour alone.
   axe flagged the terms link in .credit-fine; every inline prose link here is
   underlined for the same reason. Buttons and card-level links are excluded:
   they are not inside a text block. */
.credit-fine a,
.guar-f a,
.cb-consent a,
.ac-note p a,
.terms-s p a,
.proof-card .pf-s a {
  text-decoration: underline;
  text-underline-offset: 3px;
}