/* OA landing pages ("[firm] online assessment practice") — shared template */
.oal { max-width: 880px; margin: 0 auto; padding: 26px 20px 60px; }
.oal-crumb { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.oal-crumb a { color: var(--text-secondary); text-decoration: none; }
.oal-crumb a:hover { color: var(--accent-primary); }
.oal-hero { margin-bottom: 26px; }
.oal-hero__title { font-size: clamp(27px, 5vw, 38px); font-weight: 800; line-height: 1.14; color: var(--text-bright); margin: 0 0 10px; }
.oal-hero__sub { font-size: 17px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 16px; max-width: 720px; }
.oal-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.oal-fact { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-color));
  border-radius: 999px; padding: 7px 14px; color: var(--text-primary); }
.oal-fact b { color: var(--accent-primary); }
.oal h2 { font-size: 23px; font-weight: 800; color: var(--text-bright); margin: 36px 0 12px; }
.oal p { font-size: 16px; line-height: 1.65; color: var(--text-primary); margin: 0 0 14px; }
.oal ul { margin: 0 0 16px; padding-left: 22px; }
.oal li { margin-bottom: 7px; line-height: 1.6; }
.oal a { color: var(--accent-primary); font-weight: 600; text-decoration: none; }
.oal a:hover { text-decoration: underline; }
/* sample question cards */
.oal-try { margin-top: 8px; }
.oal-try__intro { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
.oal-q { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
  padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.oal-q__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.oal-q__tag { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-primary); }
.oal-q__diff { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.oal-q__diff--easy { background: #10b98118; color: #059669; }
.oal-q__diff--medium { background: #f59e0b18; color: #b45309; }
.oal-q__diff--hard { background: #ef444418; color: #b91c1c; }
.oal-q__text { font-size: 16px; line-height: 1.6; color: var(--text-bright); font-weight: 500; margin-bottom: 14px; }
.oal-q__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oal-q__input { flex: 0 1 220px; padding: 10px 14px; font-size: 15px; border: 1.5px solid var(--border-color);
  border-radius: 10px; background: var(--bg-main); color: var(--text-bright); font-family: 'JetBrains Mono', monospace; }
.oal-q__input:focus { outline: none; border-color: var(--accent-primary); }
.oal-q__check { padding: 10px 20px; border-radius: 10px; border: 0; background: var(--accent-primary);
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.oal-q__check:hover { filter: brightness(1.08); }
.oal-q__result { margin-top: 12px; font-size: 14.5px; font-weight: 700; display: none; }
.oal-q__result--ok { color: #059669; display: block; }
.oal-q__result--no { color: #dc2626; display: block; }
.oal-q__sol { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-main));
  border-left: 3px solid var(--accent-primary); border-radius: 0 10px 10px 0; padding: 12px 14px; display: none; }
.oal-q__sol.show { display: block; }
.oal-q__hint { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }
/* full-test CTA */
.oal-cta { margin: 34px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 11%, var(--bg-card)), var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-color)); border-radius: 18px;
  padding: 26px 26px; text-align: center; }
.oal-cta h2 { margin: 0 0 8px; }
.oal-cta p { color: var(--text-secondary); max-width: 560px; margin: 0 auto 18px; }
.oal-cta__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.oal-faq { border-top: 1px solid var(--border-color); margin-top: 38px; padding-top: 10px; }
.oal-faq h3 { font-size: 17px; font-weight: 700; color: var(--text-bright); margin: 20px 0 6px; }
.oal-faq p { color: var(--text-secondary); font-size: 15px; }
.oal-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.oal-more a { display: block; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 14px 16px; font-size: 14.5px; font-weight: 700; color: var(--text-bright); text-decoration: none; }
.oal-more a:hover { border-color: var(--accent-primary); text-decoration: none; }
.oal-more a span { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-top: 4px; }
@media (max-width: 600px) { .oal-q__input { flex-basis: 100%; } .oal-q__check { width: 100%; } }
/* v2 additions: trust line, test chrome, score summary */
.oal-verified { font-size: 13px; color: var(--text-secondary); margin: 12px 0 0; }
.oal-verified a { font-weight: 700; }
.oal-q__meta { display: inline-flex; align-items: center; gap: 10px; }
.oal-q__clock { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-main); border: 1px solid var(--border-color);
  border-radius: 7px; padding: 3px 9px; min-width: 46px; text-align: center; }
.oal-q__clock.run { color: var(--accent-primary); border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color)); }
.oal-score { display: flex; align-items: center; gap: 14px; background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
  border-radius: 14px; padding: 16px 20px; margin-top: 4px; }
.oal-score__num { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 800; color: var(--accent-primary); }
.oal-score__txt { font-size: 14.5px; color: var(--text-primary); line-height: 1.5; }
.oal-cta__fine { font-size: 12.5px; color: var(--text-secondary); margin: 14px 0 0 !important; }
/* v3: difficulty strip, family chips, candidate quote, mobile title balance */
.oal-hero__title { text-wrap: balance; }
.oal-strip { margin: 16px 0 4px; max-width: 640px; }
.oal-strip__segs { display: flex; gap: 3px; }
.oal-strip__seg { flex: 1; height: 12px; border-radius: 3px; }
.oal-strip__seg--fast { background: #10b981; opacity: .85; }
.oal-strip__seg--deep { background: #f59e0b; }
.oal-strip__labels { display: flex; justify-content: space-between; gap: 18px; font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary); margin-top: 8px; letter-spacing: .01em; }
.oal-strip__labels b { font-weight: 800; color: var(--text-bright); }
.oal-strip__labels span:last-child { text-align: right; }
.oal-strip__cap { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); }
.oal-fams { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.oal-fam { font-size: 13px; font-weight: 700; color: var(--text-bright);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 12px; }
.oal-fam i { display: block; font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.oal-quote { margin: 0 0 8px; padding: 14px 18px; border-left: 3px solid var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card));
  border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.6; color: var(--text-primary); }
.oal-quote__src { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; }
@media (max-width: 600px) { .oal-strip__labels { font-size: 10px; } }
.oal-score[hidden] { display: none; }
/* v4: test-surface chrome, progress rail, family table, methodology */
.oal-q { border: 1.5px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-color));
  box-shadow: 0 2px 8px rgba(15,23,42,.05); position: relative; overflow: hidden; }
.oal-q::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 40%, transparent)); }
.oal-q__top { background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-main));
  margin: -20px -22px 14px; padding: 11px 22px; border-bottom: 1px solid var(--border-color); }
.oal-rail { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.oal-rail__step { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  border: 2px solid var(--border-color); color: var(--text-secondary); background: var(--bg-card); }
.oal-rail__step.done { border-color: #10b981; background: #10b98115; color: #059669; }
.oal-rail__step.miss { border-color: #ef4444; background: #ef444412; color: #b91c1c; }
.oal-rail__bar { flex: 0 0 26px; height: 2px; background: var(--border-color); }
.oal-rail__lbl { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-left: 6px; }
.oal-famtable { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 14.5px; }
.oal-famtable th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); padding: 8px 12px; border-bottom: 2px solid var(--border-color); }
.oal-famtable td { padding: 9px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.oal-famtable td:first-child { font-weight: 700; color: var(--text-bright); white-space: nowrap; }
.oal-famtable td:nth-child(2) { color: var(--text-secondary); }
.oal-method { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
  padding: 18px 22px; margin-top: 34px; }
.oal-method h2 { margin-top: 0 !important; font-size: 19px !important; }
.oal-method p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 0; }
/* bigger annotated difficulty strip */
.oal-strip__seg { height: 16px; border-radius: 4px; }
.oal-strip__labels { font-size: 12.5px; }
@media (max-width: 600px) {
  .oal-famtable { font-size: 13px; }
  .oal-famtable td:first-child { white-space: normal; }
  .oal-rail__lbl { display: none; }
}
/* v5: family try-links, methodology changelog, back-half banding */
.oal-strip { position: relative; }
.oal-famtry { font-size: 11.5px; font-weight: 800; margin-left: 8px; white-space: nowrap; }
.oal-famtable tbody tr:hover { background: color-mix(in srgb, var(--accent-primary) 4%, transparent); }
.oal-method__log { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--border-color); }
.oal-method__log li { font-size: 13.5px; color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.oal-method__log b { color: var(--text-bright); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; margin-right: 8px; }
/* back-half banding: card-group the prep + tracks sections */
.oal-band { background: color-mix(in srgb, var(--accent-primary) 3%, var(--bg-card));
  border: 1px solid var(--border-color); border-radius: 16px; padding: 6px 22px 18px; margin-top: 30px; }
.oal-band h2 { margin-top: 18px; }
/* v6: dark CTA register + simulator miniature + track/step cards + mobile chips grid */
.oal-cta--dark { background: linear-gradient(135deg, #0d1320, #131c31); border-color: #283557; text-align: left; }
.oal-cta--dark h2 { color: #fff; }
.oal-cta--dark p { color: #aab4cc; margin-left: 0; }
.oal-cta--dark .oal-cta__fine { color: #7c89a8; }
.oal-cta__cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; }
.oal-cta--dark .oal-cta__btns { justify-content: flex-start; }
.btn--ghostlight { border: 1px solid #3b4a73; color: #d6ddf0 !important; background: transparent; }
.btn--ghostlight:hover { border-color: #6366f1; }
.oal-sim { background: #0a0f1a; border: 1px solid #283557; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.4); font-size: 13px; }
.oal-sim__bar { display: flex; align-items: center; gap: 10px; background: #111a2e; padding: 9px 12px; border-bottom: 1px solid #283557; }
.oal-sim__dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2c3a5e; margin-right: 5px; }
.oal-sim__title { color: #93a1c4; font-weight: 700; font-size: 12px; }
.oal-sim__hud { display: flex; justify-content: space-between; padding: 10px 14px 0; color: #8fa0c8; font-weight: 700; font-size: 12px; }
.oal-sim__clock { font-family: 'JetBrains Mono', monospace; color: #f59e0b; }
.oal-sim__q { color: #e3e9f7; padding: 10px 14px 12px; line-height: 1.55; }
.oal-sim__input { display: flex; justify-content: space-between; align-items: center; margin: 0 14px 12px;
  background: #131c31; border: 1px solid #32426b; border-radius: 9px; padding: 9px 12px;
  font-family: 'JetBrains Mono', monospace; color: #fff; }
.oal-sim__ok { color: #34d399; font-weight: 800; font-size: 12px; }
.oal-sim__progress { height: 5px; background: #1a2440; }
.oal-sim__progress span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.oal-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.oal-track { display: block; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 14px 16px; text-decoration: none !important; }
.oal-track:hover { border-color: var(--accent-primary); }
.oal-track b { display: block; color: var(--text-bright); font-size: 14.5px; margin-bottom: 4px; }
.oal-track span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.oal-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.oal-step { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; position: relative; }
.oal-step i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-primary);
  font-weight: 800; font-family: 'JetBrains Mono', monospace; font-size: 13px; margin-bottom: 8px; }
.oal-step b { display: block; color: var(--text-bright); font-size: 14.5px; margin-bottom: 4px; }
.oal-step span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 760px) {
  .oal-cta__cols { grid-template-columns: 1fr; }
  .oal-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .oal-fact { justify-content: center; }
}
/* v7: REAL FIX — .oal a{accent} was repainting CTA button text (blue-on-blue, invisible).
   Buttons inside .oal get explicit, defensive colors that no link rule can break. */
.oal .btn { text-decoration: none !important; }
.oal .btn--primary, .oal .btn--primary:hover { color: #fff !important; background: var(--accent-primary, #6366f1); }
.oal-cta--dark .btn--primary { background: #6366f1 !important; color: #fff !important; border: 0; }
.oal-cta--dark .btn--primary:hover { background: #7c7ff2 !important; }
/* step grid balanced 2x2 + card language matching the homepage feature row */
@media (min-width: 761px) { .oal-steps { grid-template-columns: repeat(2, 1fr); } }
.oal-step, .oal-track { box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .15s ease, transform .15s ease; }
.oal-step:hover, .oal-track:hover { border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)); transform: translateY(-1px); }
/* mobile overflow guards */
.oal { overflow-wrap: break-word; }
.oal-facts { grid-auto-rows: minmax(0, auto); }
.oal-facts .oal-fact { min-width: 0; }
/* v8: homepage-register visuals — gradient hero, stat cards, framed sim, zebra table, banding */
.oal-kicker { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-primary); margin-bottom: 10px; }
.oal-hero__accent { background: linear-gradient(135deg, #4c8bf5 0%, #8b5cf6 50%, #d946ef 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.oal-hero { background: radial-gradient(120% 60% at 50% -10%, rgba(99,102,241,.07), transparent 60%);
  border-radius: 18px; padding-top: 8px; }
.oal-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 640px; }
.oal-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 13px;
  padding: 12px 8px; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.oal-stat b { display: block; font-size: 21px; font-weight: 800; color: var(--text-bright);
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.02em; }
.oal-stat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-secondary); margin-top: 3px; }
/* FIX 3: family table -> designed list */
.oal-famtable { border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
  border-collapse: separate; border-spacing: 0; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.oal-famtable thead th { background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-card));
  border-bottom: 1.5px solid var(--border-color); }
.oal-famtable tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent-primary) 2.5%, transparent); }
.oal-famtable td:first-child::before { content: "\25C8"; color: var(--accent-primary); margin-right: 8px; font-size: 11px; }
/* FIX 4: device frame for the sim mock */
.oal-sim--framed { transform: perspective(1100px) rotateY(-4deg) rotateX(1.5deg);
  border: 1px solid #34427009; outline: 6px solid #131c31; outline-offset: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); }
/* FIX 5: banding rhythm */
.oal-band--plain { background: var(--bg-card); margin-top: 26px; }
@media (max-width: 600px) {
  .oal-stats { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .oal-sim--framed { transform: none; }
}