/* Shared content and accessibility rules. Each template owns its visual system. */
body[data-template] { min-width: 0; }
body[data-template] .hero-package-panel:focus-within { outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) {
  body[data-template] *, body[data-template] *::before, body[data-template] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep the offer emphasis native to each reference palette. */
body[data-template="cliplab"]{--offer-surface:#081b30;--offer-border:#23567f;--offer-ink:#e6f3ff;--offer-accent:#4cabff}
body[data-template="tradelab"]{--offer-surface:#22160f;--offer-border:#9a4822;--offer-ink:#ffe9de;--offer-accent:#ff9157}
body[data-template="prolingo"]{--offer-surface:#dcefe4;--offer-border:#91b9a3;--offer-ink:#284d3d;--offer-accent:#347452}
body[data-template="skillflow"]{--offer-surface:#f0e5fc;--offer-border:#c7a4e2;--offer-ink:#57316f;--offer-accent:#8548aa}


/* Keep the Career hook separate from its outcome in the two approved designs. */
body:is([data-template="cliplab"], [data-template="prolingo"])[data-angle="career"] #hero-title > .outcome-emphasis { display: block; }

/* Compact branded pathway, with the same promises in both experiment variants. */
.hero-copy .hero-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:850px; margin:24px auto 0; padding:0; text-align:left; list-style:none; font-weight:400; }
.hero-copy .hero-steps li { display:flex; align-items:flex-start; gap:10px; min-width:0; margin:0; padding:10px 0; }
.hero-steps .hero-step-number { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:8px; font:600 11px/1 Inter,Arial,sans-serif; }
.hero-steps li>div { min-width:0; }
.hero-steps strong { display:block; font-size:15px; line-height:1.25; margin:0 0 5px; color:var(--ink); }
.hero-steps li>div>span { display:block; font-size:12px; line-height:1.5; color:var(--muted); }
body[data-template="cliplab"] .hero-step-number { background:#09263d; border:1px solid #18537c; color:#4cabff; }
body[data-template="cliplab"] .hero-steps strong { color:#f5f9fc; }
body[data-template="cliplab"] .hero-steps li>div>span { color:#aebac2; }
body[data-template="prolingo"] .hero-copy .hero-steps { gap:12px; }
body[data-template="prolingo"] .hero-steps li { display:block; padding:14px 16px; border-radius:12px; background:#f1f6f9; }
body[data-template="prolingo"] .hero-steps li:nth-child(2) { background:#edf6f0; }
body[data-template="prolingo"] .hero-steps li:nth-child(3) { background:#fff2e9; }
body[data-template="prolingo"] .hero-step-number { display:flex; align-items:center; gap:8px; height:14px; width:auto; margin-bottom:7px; background:none; color:#596b63; border-radius:0; font-size:10px; letter-spacing:.08em; }
body[data-template="prolingo"] .hero-step-number::after { content:""; display:block; width:24px; height:1px; background:currentColor; opacity:.3; }
body[data-template="prolingo"] .hero-steps strong { font-family:var(--serif); font-size:16px; }
.hero-copy .hero-interview-note { max-width:590px; margin:10px auto 0; font-size:11px; line-height:1.5; opacity:.75; }
@media(max-width:640px) {
 .hero-copy .hero-steps { grid-template-columns:1fr; gap:8px; max-width:420px; margin-top:20px; padding:0; }
 .hero-copy .hero-steps li { padding:4px 0; gap:10px; }
 .hero-steps strong { margin-bottom:2px; }
 body[data-template="prolingo"] .hero-copy .hero-steps { gap:7px; }
 body[data-template="prolingo"] .hero-steps li { display:grid; grid-template-columns:23px 1fr; align-items:start; gap:8px; padding:11px 13px; }
 body[data-template="prolingo"] .hero-step-number { margin:4px 0 0; }
 body[data-template="prolingo"] .hero-step-number::after { display:none; }
 .hero-copy .hero-interview-note { font-size:10px; margin-top:10px; }
}

.hero-steps strong sup { font-size:.65em; line-height:0; vertical-align:super; margin-left:1px; }

body[data-template="cliplab"] .hero-steps li:last-child strong { color:#79c1ff; }

/* A quiet footer rather than an oversized decorative wordmark. */
body[data-template] .site-footer.compact-footer { padding:20px 0; }
body[data-template] .site-footer.compact-footer::after { content:none; display:none; }
.compact-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; }
body[data-template] .compact-footer .brand img { width:110px; height:auto; }
.compact-footer-inner>span,.compact-footer-inner>a:last-child { color:#aebac2; }
@media(max-width:480px) { .compact-footer-inner { flex-wrap:wrap; gap:12px; font-size:11px; } .compact-footer-inner>a:last-child { margin-left:auto; } }