/* ScrumPass components — marketing layer + product primitives.
   Every value comes from tokens.css (loaded first). Class prefix: sp-. No JS required except the gauge, carousel and rail behaviours documented per component. */

.sp-root{container:sp/inline-size;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text-600);background:var(--canvas);-webkit-font-smoothing:antialiased}
.sp-root :where(h1,h2,h3,h4){color:var(--text-dark);margin:0;text-wrap:balance}
.sp-root :where(p,figure,ul,ol){margin:0}
.sp-root :where(p,li,figcaption,q){text-wrap:pretty}
.sp-root :where(*,*::before,*::after){box-sizing:border-box}
.sp-root :where(img){max-width:100%}
/* Grid/flex children may shrink below their content width (prevents horizontal overflow on phones) */
.sp-root :where(.sp-hero__grid,.sp-cert-hero,.sp-pr,.sp-fit,.sp-stats,.sp-steps,.sp-price-grid,.sp-head,.sp-final__grid,.sp-footer__top,.sp-vs__row) > *{min-width:0}
.sp-root :where(a){color:var(--primary-700);text-decoration:none;transition:color 160ms cubic-bezier(.4,0,.2,1)}
.sp-root :where(a:hover){color:var(--text-dark)}
.sp-root :where(a:active){color:var(--navy)}
.sp-root :focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}
.sp-wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--space-5)}
.sp-num{font-variant-numeric:tabular-nums}
.sp-eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-700)}
.sp-section{padding-block:var(--space-12)}
.sp-section--white{background:var(--surface)}
@container sp (max-width:600px){.sp-section{padding-block:var(--space-10)}.sp-wrap{padding-inline:var(--space-4)}}

/* Button */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 22px;border-radius:var(--radius-lg);font:600 16px/1 var(--font-sans);border:1.5px solid transparent;cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background 160ms cubic-bezier(.4,0,.2,1),border-color 160ms cubic-bezier(.4,0,.2,1),color 160ms cubic-bezier(.4,0,.2,1),transform 80ms}
.sp-btn:active{transform:translateY(1px)}
.sp-btn--primary,.sp-btn--primary:hover{color:var(--text-on-primary)}
.sp-btn--primary{background:var(--cta)}
.sp-btn--primary:hover{background:var(--primary-700)}
.sp-btn--primary:active{background:var(--navy-2)}
.sp-btn--ghost{background:var(--surface);color:var(--primary-700);border-color:var(--blue-divider)}
.sp-btn--ghost:hover{background:var(--indigo-light);color:var(--primary-700);border-color:var(--primary)}
.sp-btn--ghost:active{background:var(--blue-divider)}
.sp-btn--inverse{background:var(--surface);color:var(--cta)}
.sp-btn--inverse:hover{background:var(--indigo-light);color:var(--primary-700)}
.sp-btn--inverse:active{background:var(--blue-divider)}
.sp-btn--outline-inverse{background:transparent;color:var(--text-on-primary);border-color:rgba(255,255,255,.6)}
.sp-btn--outline-inverse:hover{background:rgba(255,255,255,.12);color:var(--text-on-primary);border-color:var(--text-on-primary)}
.sp-btn--outline-inverse:active{background:rgba(255,255,255,.22)}
.sp-btn--sm{min-height:40px;padding:0 16px;font-size:15px}
.sp-btn--block{width:100%}

/* Chip */
.sp-chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-dark);font:500 14px var(--font-sans);cursor:pointer}
.sp-chip:hover{border-color:var(--primary);background:var(--indigo-light);color:var(--text-dark)}
.sp-chip:active{background:var(--blue-divider)}
.sp-chip[aria-pressed="true"],.sp-chip[aria-current="page"],.sp-chip.is-on{background:var(--text-dark);color:var(--text-on-primary);border-color:var(--text-dark)}
.sp-chip--more{color:var(--primary-700);border-style:dashed}
.sp-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Pill / status */
.sp-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill)}
.sp-pill--passed{color:var(--success-ink);background:var(--success-bg)}
.sp-pill--ready{color:var(--lime-ink);background:var(--accent-lime)}
.sp-pill--info{color:var(--primary-700);background:var(--indigo-light)}
.sp-pill--sample{color:var(--warning-dark);background:var(--warning-bg);letter-spacing:.06em}

/* Level badge */
.sp-level{display:inline-flex;align-items:center;gap:var(--space-2);font-size:13px;font-weight:600;color:var(--text-dark)}
.sp-level__bars{display:inline-flex;gap:3px}
.sp-level__bars i{width:14px;height:6px;border-radius:2px;background:var(--blue-divider)}
.sp-level__bars i.on{background:var(--primary)}

/* Card */
.sp-card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-card-soft)}
.sp-card--line{box-shadow:none;border:1px solid var(--border)}

/* Site header */
.sp-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border)}
.sp-header__in{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.sp-header__logo img{display:block;height:26px;width:auto}
.sp-header__nav{display:flex;gap:4px}
.sp-header__nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--radius-pill);color:var(--text-dark);font-weight:500;font-size:15px;text-decoration:none!important;transition:background .16s cubic-bezier(.4,0,.2,1),color .16s cubic-bezier(.4,0,.2,1)}
.sp-header__nav a:hover{background:var(--indigo-light);color:var(--primary-700)}
.sp-header__nav a[aria-current="page"]{background:var(--indigo-light);color:var(--primary-700);font-weight:600}
.sp-header__right .login{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--radius-pill);text-decoration:none!important}
.sp-header__right .login:hover{background:var(--indigo-light);color:var(--primary-700)}
.sp-header__right{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.sp-header__right .login{color:var(--text-dark);font-weight:500;font-size:15px}
@container sp (max-width:960px){.sp-header__nav{display:none}}
.sp-header__menu{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-dark);align-items:center;justify-content:center;cursor:pointer}
@container sp (max-width:600px){.sp-header__right{display:none}.sp-header__menu{display:inline-flex}.sp-header__in{height:60px}.sp-header__logo img{height:22px}}

/* Hero */
.sp-hero{position:relative;padding-block:var(--space-14) var(--space-12);background:linear-gradient(180deg,var(--tint),var(--canvas));overflow:hidden}
.sp-hero--mesh::before{content:"";position:absolute;inset:0;background:var(--sp-mesh) center/cover no-repeat;opacity:var(--sp-mesh-o,.55);pointer-events:none}
.sp-hero--mesh::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,var(--canvas));pointer-events:none}
.sp-hero > *{position:relative;z-index:1}
.sp-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-14);align-items:center}
.sp-hero h1{font-size:clamp(34px,4.6cqi,56px);font-weight:800;line-height:1.06;letter-spacing:-.03em}
.sp-hero h1 em{font-style:normal;color:var(--primary-700)}
.sp-hero__lead{font-size:18px;max-width:660px;margin-top:14px}
.sp-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.sp-ticks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:14px;color:var(--text-dark);font-weight:500}
.sp-ticks span::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;background:var(--success-bg);color:var(--success-ink);font-size:11px;font-weight:800}
@container sp (max-width:960px){.sp-hero__grid{grid-template-columns:1fr;gap:var(--space-10)}}
@container sp (max-width:600px){.sp-hero h1{font-size:clamp(40px,12cqi,48px);line-height:1.08}.sp-hero__lead{font-size:16px}.sp-hero__ctas .sp-btn{flex:1 1 100%}}

/* Readiness gauge (SVG drawn by script, see README) */
.sp-gauge{position:relative;width:190px}
.sp-gauge svg{display:block;width:100%;height:auto}
.sp-gauge .arc{transition:stroke-dasharray .9s cubic-bezier(.4,0,.2,1),stroke .3s}

/* Hero dashboard card */
.sp-dash-stack{position:relative;padding:18px 18px 0 0}
.sp-dash-stack::before,.sp-dash-stack::after{content:"";position:absolute;border-radius:var(--radius-2xl);background:var(--surface);box-shadow:var(--shadow-card-soft)}
.sp-dash-stack::before{inset:0 0 34px 36px;transform:rotate(3deg);opacity:.7}
.sp-dash-stack::after{inset:8px 8px 26px 20px;transform:rotate(1.5deg);opacity:.9}
.sp-dash{position:relative;z-index:1;border-radius:var(--radius-2xl);background:linear-gradient(125deg,var(--hero-from),var(--hero-to));color:var(--text-on-primary);padding:var(--space-6);box-shadow:var(--shadow-hero)}
.sp-dash__top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sp-dash__top h3{color:var(--text-on-primary);font-size:18px}
.sp-dash__top small{font-size:12px;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:var(--radius-pill)}
.sp-dash__body{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-top:16px}
.sp-dash__rows{display:grid;gap:8px;font-size:13px}
.sp-dash__row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:6px}
.sp-dash__row b{font-size:15px}
.sp-dash__ready{justify-self:start;font-weight:700;font-size:12px;padding:4px 11px;border-radius:var(--radius-pill);border:1.5px solid var(--accent-lime);color:var(--accent-lime)}
.sp-dash__ready.go{background:var(--accent-lime);color:var(--lime-ink)}
.sp-dash__doms{margin-top:18px;display:grid;gap:8px}
.sp-dom{display:grid;grid-template-columns:150px 1fr 40px;gap:10px;align-items:center;font-size:13px}
.sp-dom .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.sp-dom .bar i{display:block;height:100%;background:var(--surface)}
.sp-dom b{text-align:right}
@container sp (max-width:600px){.sp-dash__body{grid-template-columns:132px minmax(0,1fr);gap:16px}.sp-dash__body .sp-gauge{width:132px}.sp-dom{grid-template-columns:150px 1fr 36px}.sp-mock__thread .sp-mock__msg:nth-child(3){display:none}.sp-dash-stack::before{display:none}}

/* Org strip */
.sp-orgs{background:var(--surface);border-block:1px solid var(--border)}
.sp-orgs__in{display:flex;align-items:center;gap:16px 32px;padding-block:22px}
.sp-orgs__title{flex:none;font-size:15px;line-height:1.35;color:var(--text-dark);font-weight:700}
.sp-orgs__title b{display:block;font-size:26px;font-weight:800;color:var(--primary-700);letter-spacing:-.02em}
.sp-orgs__track{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sp-orgs ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;width:max-content;animation:sp-marquee 40s linear infinite}
.sp-orgs__track:hover ul{animation-play-state:paused}
.sp-orgs li{flex:none;white-space:nowrap;font-weight:700;color:var(--text-dark);font-size:15px;padding:8px 16px;border-radius:var(--radius-pill);background:var(--canvas);border:1px solid var(--border)}
@keyframes sp-marquee{to{transform:translateX(-50%)}}
.sp-orgs__track:active ul{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sp-orgs ul{animation-duration:80s}}
@container sp (max-width:600px){.sp-orgs__in{flex-direction:column;align-items:flex-start;gap:12px}.sp-orgs__track{width:100%}}

/* Cert finder */
.sp-finder{padding:var(--space-6);display:grid;gap:14px}
.sp-finder label{font-weight:600;color:var(--text-dark)}
.sp-search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:0 14px;min-height:50px;background:var(--surface);color:var(--text-500)}
.sp-search:focus-within{border-color:var(--primary)}
.sp-search input{border:0;outline:0;font:16px var(--font-sans);flex:1;min-width:0;color:var(--text-900);background:transparent}
.sp-root .sp-search input:focus-visible{outline:0}
.sp-finder{scroll-margin-top:calc(var(--header-h) + 12px)}
.sp-finder__hits:empty{display:none}
@container sp (max-width:600px){.sp-finder__roles{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);justify-content:start;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px}.sp-finder__roles::-webkit-scrollbar{display:none}.sp-finder__roles .sp-chip{white-space:nowrap}}
.sp-hit{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-lg);background:var(--indigo-light);color:var(--text-dark);font-size:14px;font-weight:600}
.sp-hit small{font-weight:500;color:var(--text-500)}

/* Method rail */
.sp-rail{padding:28px}
.sp-rail__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sp-rail__top strong{color:var(--text-dark);font-size:15px}
.sp-rail__top .val{font-size:30px;font-weight:800;color:var(--text-dark)}
.sp-track{position:relative;height:14px;border-radius:7px;background:var(--gray-100);margin:26px 0 8px}
.sp-track .fill{position:absolute;inset:0 auto 0 0;border-radius:7px;background:var(--primary);transition:width .6s cubic-bezier(.4,0,.2,1)}
.sp-track .fill.ready{background:var(--accent-lime)}
.sp-track .l85{position:absolute;left:85%;top:-10px;bottom:-10px;width:2px;background:var(--text-dark)}
.sp-track .l85::after{content:"85%";position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--text-dark)}
.sp-steps{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sp-step{display:flex;flex-direction:column;align-items:flex-start;text-align:left;font:inherit;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:18px;cursor:pointer;width:100%;height:100%;color:inherit;position:relative;overflow:hidden}
.sp-step[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}
.sp-step .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--indigo-light);color:var(--primary-700);font-weight:700;font-size:13px}
.sp-step[aria-pressed="true"] .n{background:var(--cta);color:var(--text-on-primary)}
.sp-step h3{font-size:16px;margin-top:12px}
.sp-step p{font-size:14px;margin-top:6px}
.sp-step .tool{font-size:12px;color:var(--text-600);margin-top:10px}
@container sp (max-width:960px){.sp-steps{grid-template-columns:1fr 1fr}}
@container sp (max-width:600px){.sp-steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding-bottom:6px;margin-inline:-4px;padding-inline:4px;scrollbar-width:none}.sp-steps::-webkit-scrollbar{display:none}.sp-steps > li{flex:0 0 78%;scroll-snap-align:center}.sp-rail{padding:20px}}
.sp-steps__dots{display:none;justify-content:center;gap:6px;margin-top:12px}
.sp-steps__dots i{width:8px;height:8px;border-radius:50%;background:var(--blue-divider);transition:width .2s,background .2s}
.sp-steps__dots i.on{width:22px;border-radius:4px;background:var(--primary)}
@container sp (max-width:600px){.sp-steps__dots{display:flex}}

/* Product shot */
.sp-shot{margin:0;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:0 20px 40px -24px rgba(38,56,98,.35)}
.sp-shot__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--gray-100);border-bottom:1px solid var(--border)}
.sp-shot__bar i{width:10px;height:10px;border-radius:50%;background:var(--gray-300)}
.sp-shot__bar span{margin-left:10px;font-size:12px;color:var(--text-500);background:var(--surface);padding:2px 12px;border-radius:var(--radius-pill)}
.sp-shot__view{position:relative;aspect-ratio:1342/684;max-width:100%;background:var(--canvas)}
.sp-shot__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.sp-shot figcaption{padding:10px 14px;font-size:13px;color:var(--text-dark);border-top:1px solid var(--border)}

/* Fit checklist */
.sp-fit{display:grid;grid-template-columns:.8fr 1.2fr;overflow:hidden}
.sp-fit__art{background:linear-gradient(160deg,var(--tint),var(--indigo-light));display:grid;align-content:start;gap:20px;padding:28px}
.sp-fit__art img{max-width:340px;justify-self:center}
.sp-fit__art img{width:100%;height:auto;display:block}
.sp-fit__body{padding:28px;display:grid;gap:12px;align-content:start}
.sp-check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer}
.sp-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--cta);flex:none}
.sp-check b{color:var(--text-dark);display:block;font-size:15px}
.sp-check span{font-size:13px}
.sp-check:has(input:checked){border-color:var(--primary);background:var(--tint)}
.sp-verdict{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:14px 16px;border-radius:var(--radius-lg);background:var(--text-dark);color:var(--text-on-primary)}
.sp-verdict .score{font-size:28px;font-weight:800;color:var(--accent-lime);grid-row:span 2}
.sp-verdict span{font-size:13px;color:var(--on-navy)}
.sp-verdict--end{display:none}
@container sp (max-width:960px){.sp-fit{grid-template-columns:1fr}.sp-verdict--side{display:none}.sp-verdict--end{display:grid;margin-top:4px}.sp-fit__art img{max-width:260px}}

/* Compare table */
.sp-compare{overflow-x:auto;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card-soft)}
.sp-compare table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.sp-compare th,.sp-compare td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.sp-compare thead th{color:var(--text-dark);background:var(--gray-100)}
.sp-compare thead th.us{background:var(--cta);color:var(--text-on-primary)}
.sp-compare tbody th{color:var(--text-dark);font-weight:600;width:20%}
.sp-compare td.us{background:var(--tint);color:var(--text-dark);font-weight:500}
.sp-compare tr.dim th,.sp-compare tr.dim td{opacity:.35}
.sp-compare tr.hl th{box-shadow:inset 4px 0 0 var(--primary)}
.sp-compare .y{color:var(--success-ink);font-weight:700}
.sp-compare .n{color:var(--error-ink);font-weight:700}
.sp-compare .m{color:var(--warning-dark);font-weight:700}
@container sp (max-width:600px){
  .sp-compare{overflow:visible;background:transparent;box-shadow:none}
  .sp-compare table{min-width:0}.sp-compare thead{display:none}.sp-compare table,.sp-compare tbody{display:block}
  .sp-compare tr{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:12px}
  .sp-compare tbody th{grid-column:1/-1;width:auto;background:var(--surface);order:-2;border:0}
  .sp-compare td{background:var(--surface);border:0;font-size:13px}
  .sp-compare td::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;color:var(--text-500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
  .sp-compare td.us{order:-1;grid-column:1/-1}
  .sp-compare td:nth-child(4){grid-column:1/-1}
}

/* Pass Rate panel + stat tiles */
.sp-pr{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-areas:"vis head" "vis body";gap:var(--space-6) var(--space-14);align-items:center}
.sp-pr__head{grid-area:head;align-self:end}
.sp-pr__body{grid-area:body;align-self:start}
.sp-pr__vis{grid-area:vis;position:relative;display:grid;justify-items:center;gap:14px;padding:22px 24px 24px;max-width:440px;width:100%;margin-inline:auto}
.sp-pr__top{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
.sp-pr__top small{font-size:12px;color:var(--text-500)}
.sp-pr__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sp-pr__doms{display:grid;gap:8px;width:100%;padding-top:14px;border-top:1px solid var(--border)}
.sp-pr__doms .sp-dom{grid-template-columns:minmax(0,1fr) 90px 38px;color:var(--text-600)}
.sp-pr__doms .sp-dom .bar{background:var(--indigo-light)}
.sp-pr__doms .sp-dom .bar i{background:var(--primary)}
.sp-pr__doms .sp-dom .bar i.ok{background:var(--progress-green)}
.sp-pr__doms .sp-dom b{color:var(--text-dark)}
.sp-pr__vis .sp-toast--tr{top:-46px;right:-36px}
.sp-pr__vis .sp-toast--bl{left:-40px;bottom:-46px}
.sp-pr__vis .sp-gauge{width:100%;max-width:340px}
.sp-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp-stat{padding:18px 20px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card-soft)}
.sp-stat b{display:block;font-size:clamp(24px,2.6cqi,32px);font-weight:800;color:var(--text-dark);line-height:1.1;letter-spacing:-.02em}
.sp-stat span{font-size:13px}
.sp-stat--hero{background:var(--navy)}
.sp-stat--hero b{color:var(--accent-lime)}
.sp-stat--hero span{color:var(--on-navy)}
.sp-footnote{font-size:13px;color:var(--text-500);margin-top:var(--space-4);max-width:760px}
@container sp (max-width:960px){.sp-pr{grid-template-columns:1fr;grid-template-areas:"head" "vis" "body";row-gap:var(--space-8)}.sp-pr__head,.sp-pr__body{align-self:auto}.sp-pr__vis .sp-toast{display:none}}
@container sp (max-width:600px){.sp-stats{grid-template-columns:1fr 1fr}.sp-stat{padding:14px 16px}.sp-pr__vis{padding:24px 20px 20px}}

/* Testimonial */
.sp-testi{padding:20px;display:grid;gap:12px}
.sp-testi__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sp-testi q{quotes:none;color:var(--text-dark);font-size:15px;line-height:1.55}
.sp-testi__facts{display:flex;flex-wrap:wrap;gap:6px}
.sp-testi__facts span{font-size:12px;padding:3px 8px;border-radius:var(--radius-sm);background:var(--indigo-light);color:var(--text-dark)}
.sp-testi__facts span.pr{background:var(--accent-lime);color:var(--lime-ink);font-weight:700}
.sp-testi__who{display:flex;gap:10px;align-items:center;font-size:13px}
.sp-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--text-on-primary);background:var(--primary-700);flex:none;object-fit:cover}
.sp-testi__who b{color:var(--text-dark);display:block;font-size:14px}
.sp-testi-grid{columns:3 300px;column-gap:16px}
.sp-testi-grid > *{break-inside:avoid;margin-bottom:16px}

/* Price card + B2B */
.sp-price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sp-price{padding:22px;display:grid;gap:8px;align-content:start}
.sp-price b.p{font-size:26px;color:var(--text-dark);font-weight:800}
.sp-price small{color:var(--text-500);font-size:13px}
.sp-price .eg{font-size:13px}
.sp-b2b{padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-radius:var(--radius-xl);background:linear-gradient(125deg,var(--hero-from),var(--hero-to));color:var(--text-on-primary)}
.sp-b2b .sp-eyebrow{color:var(--accent-lime)}
.sp-b2b h3{font-size:20px;color:var(--text-on-primary)}
.sp-b2b p{font-size:14px;margin-top:4px}
@container sp (max-width:960px){.sp-price-grid{grid-template-columns:1fr 1fr}}
@container sp (max-width:600px){.sp-price-grid{grid-template-columns:1fr 1fr;gap:10px}.sp-price{padding:16px 14px}.sp-price b.p{font-size:20px}.sp-price .eg{font-size:12px}}

/* FAQ */
.sp-faq{display:grid;gap:8px}
.sp-faq__list{display:grid;gap:8px;align-content:start}
.sp-faq__q{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);font:600 15px/1.45 var(--font-sans);color:var(--text-dark);text-wrap:pretty;cursor:pointer;transition:background 160ms cubic-bezier(.4,0,.2,1),border-color 160ms cubic-bezier(.4,0,.2,1),color 160ms cubic-bezier(.4,0,.2,1)}
.sp-faq__q::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 160ms}
.sp-faq__q:hover{border-color:var(--primary);color:var(--primary-700)}
.sp-faq__q[aria-expanded="true"]{background:var(--indigo-light);border-color:var(--primary);color:var(--primary-700)}
.sp-faq__q[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.sp-faq__a{padding:14px 18px 6px;font-size:15px}
.sp-faq__panel{display:none}
@container sp (min-width:961px){
  .sp-faq.is-js{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:24px;align-items:start}
  .sp-faq.is-js .sp-faq__list{max-height:440px;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}
  .sp-faq.is-js .sp-faq__list .sp-faq__a{display:none}
  .sp-faq.is-js .sp-faq__list.is-more{-webkit-mask-image:linear-gradient(to bottom,var(--surface) 82%,transparent);mask-image:linear-gradient(to bottom,var(--surface) 82%,transparent)}
  .sp-faq.is-js .sp-faq__q::after,.sp-faq.is-js .sp-faq__q[aria-expanded="true"]::after{transform:rotate(-45deg)}
  .sp-faq.is-js .sp-faq__panel{display:block;padding:24px 28px;border-radius:var(--radius-xl);background:var(--tint);border:1px solid var(--blue-divider);font-size:16px}
  .sp-faq.is-js .sp-faq__panel h3{font-size:18px;margin-bottom:10px}
}

/* Final CTA band */
.sp-final{padding-block:var(--space-18);background:linear-gradient(125deg,var(--hero-from),var(--hero-to));color:var(--text-on-primary);text-align:center}
.sp-final h2{color:var(--text-on-primary)}
.sp-final p{max-width:660px;margin:14px auto 0;font-size:18px}
.sp-final .sp-hero__ctas{justify-content:center}

/* Footer */
.sp-footer{background:var(--navy);color:var(--on-navy);font-size:14px}
.sp-footer a{color:var(--on-navy)}
.sp-footer a:hover{color:var(--text-on-primary)}
.sp-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-block:56px 40px}
.sp-footer h4{color:var(--text-on-primary);font-size:14px;margin-bottom:14px}
.sp-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sp-footer__logo img{height:28px;width:auto;display:block}
.sp-footer__chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:var(--radius-lg);background:var(--navy-2);color:var(--text-on-primary)!important;font-weight:600;font-size:13px;transition:background 160ms cubic-bezier(.4,0,.2,1)}
.sp-footer__chip:hover{background:var(--cta)}
.sp-footer__chip:active{background:var(--primary-700)}
.sp-footer__contact small{display:block;font-size:12px}
.sp-footer__contact span{color:var(--text-on-primary)}
.sp-footer__bot{border-top:1px solid rgba(255,255,255,.12);padding-block:22px;display:grid;gap:10px;font-size:12px}
@container sp (max-width:960px){.sp-footer__top{grid-template-columns:1fr 1fr}}
@container sp (max-width:600px){.sp-footer__top{grid-template-columns:1fr}}

/* Cert page */
.sp-cert-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.sp-cert-hero h1{font-size:clamp(30px,4cqi,48px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-top:14px}
.sp-cert-hero h1 small{display:block;font-size:.42em;font-weight:600;color:var(--text-500);letter-spacing:0;margin-top:8px}
.sp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.sp-facts div{background:var(--surface);padding:12px 14px}
.sp-facts small{display:block;font-size:12px;color:var(--text-500)}
.sp-facts b{color:var(--text-dark);font-size:17px}
.sp-buy{padding:24px;display:grid;gap:14px}
.sp-buy .p{font-size:30px;font-weight:800;color:var(--text-dark)}
.sp-buy ul{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}
.sp-buy__proof{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--radius-lg);background:var(--success-bg);color:var(--text-dark);font-size:14px}
.sp-buy__proof b{font-size:24px;color:var(--success-ink)}
.sp-pain{padding:20px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.sp-pain .q{width:34px;height:34px;border-radius:50%;background:var(--error-bg);color:var(--error-ink);display:grid;place-items:center;font-weight:800}
.sp-pain h3{font-size:16px}
.sp-pain p{font-size:14px;margin-top:4px}
.sp-pain .ans{grid-column:2;font-size:14px;color:var(--text-dark);padding-top:10px;border-top:1px dashed var(--border)}
.sp-pain .ans b{color:var(--success-ink)}
.sp-ladder{display:flex;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);flex-wrap:wrap}
.sp-ladder div{flex:1 1 160px;padding:14px 16px;background:var(--surface);border-right:1px solid var(--border);font-size:14px}
.sp-ladder div:last-child{border-right:0}
.sp-ladder div.here{background:var(--indigo-light)}
.sp-ladder b{display:block;color:var(--text-dark)}
.sp-ladder small{color:var(--text-600)}
.sp-note-warn{padding:16px 18px;border-radius:var(--radius-lg);background:var(--warning-bg);color:var(--text-dark);font-size:14px}
.sp-story{padding:22px;display:grid;gap:12px;align-content:start}
.sp-story h3{font-size:17px}
.sp-story .meta{font-size:13px;color:var(--text-500)}
.sp-spark{width:100%;height:84px;display:block}
@container sp (max-width:960px){.sp-cert-hero{grid-template-columns:1fr}}
@container sp (max-width:600px){.sp-facts{grid-template-columns:1fr 1fr}}

/* Product: answer option (6 states, from the Exam Tool) */
.sp-answer{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;font:500 14px/22px var(--font-sans);color:var(--text-900)}
.sp-answer .bar{position:absolute;inset:0 auto 0 0;z-index:0}
.sp-answer > *:not(.bar){position:relative;z-index:1}
.sp-answer .pc{margin-left:auto;font-weight:700}
.sp-answer--selected{border:1.5px solid var(--primary);background:var(--indigo-light)}
.sp-answer--correct{border:1.5px solid var(--success)}
.sp-answer--correct .bar{background:var(--success-bg)}
.sp-answer--correct .pc{color:var(--success-ink)}
.sp-answer--missed{border:1.5px dashed var(--success)}
.sp-answer--missed .bar{background:var(--success-bg)}
.sp-answer--wrong{border:1.5px solid var(--error)}
.sp-answer--wrong .bar{background:var(--error-bg)}
.sp-answer--wrong .pc{color:var(--error-ink)}
.sp-answer--neutral .bar{background:var(--gray-100)}

/* Floating toast on the hero visual */
.sp-toast{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card);font-size:13px;color:var(--text-dark);max-width:240px}
.sp-toast b{display:block;font-size:14px}
.sp-toast small{color:var(--text-500);font-size:12px}
.sp-toast__dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800}
.sp-toast__dot--ok{background:var(--success-bg);color:var(--success-ink)}
.sp-toast__dot--up{background:var(--indigo-light);color:var(--primary-700)}
.sp-hero__visual{position:relative}
@container sp (max-width:600px){.sp-toast{display:none}}

/* Section heading with illustration on the right */
.sp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.sp-head__text{flex:1 1 520px;min-width:0}
.sp-head__art{flex:none;width:auto;height:auto;max-width:180px;max-height:140px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(38,56,98,.12))}
@container sp (max-width:600px){.sp-head__art{display:none}}

/* Step icon */
.sp-step__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-lg);background:var(--indigo-light);color:var(--primary-700)}
.sp-step[aria-pressed="true"] .sp-step__icon{background:var(--cta);color:var(--text-on-primary)}
.sp-step__icon svg{width:22px;height:22px}
.sp-step__top{display:flex;align-items:center;justify-content:space-between;width:100%}

/* Light B2B banner with illustration */
.sp-b2b--light{background:var(--surface);color:var(--text-600);box-shadow:var(--shadow-card-soft);padding:0;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr;align-items:center}
.sp-b2b--light > div:first-child{padding:28px}
.sp-b2b--light h3{color:var(--text-dark)}
.sp-b2b--light .sp-eyebrow{color:var(--primary-700)}
.sp-b2b--light img{width:100%;max-width:380px;height:auto;display:block;justify-self:center;padding:20px 24px}
@container sp (max-width:600px){.sp-b2b--light{grid-template-columns:1fr}.sp-b2b--light > div:first-child{padding:24px 20px 0}.sp-b2b--light img{max-width:280px;padding:16px 20px 24px}}

/* Final CTA with mesh + illustration */
.sp-final--mesh{position:relative;overflow:hidden}
.sp-final--mesh::before{content:"";position:absolute;inset:0;background:var(--sp-mesh) center/cover no-repeat;opacity:.35;mix-blend-mode:screen;pointer-events:none}
.sp-final--mesh > *{position:relative}
.sp-final__grid{display:grid;grid-template-columns:1fr auto;gap:var(--space-8);align-items:center;text-align:left}
.sp-final__grid p{margin-inline:0}
.sp-final__grid .sp-hero__ctas{justify-content:flex-start}
.sp-final__art{width:220px;height:auto}
@container sp (max-width:600px){.sp-final__grid{grid-template-columns:1fr;text-align:center}.sp-final__grid .sp-hero__ctas{justify-content:center}.sp-final__art{width:140px;margin:0 auto}}

/* Mobile sticky CTA */
.sp-mcta{display:none}
/* Ngoại lệ dùng @media: thanh nằm ngoài .sp-root (fixed phải bám màn hình, không bám container). Giới hạn đã biết: Safari iOS 26 khi thanh địa chỉ thu gọn để lộ 1 khoảng dưới thanh (Safari tự vẽ nội dung trang vào đó); bản nút nổi đã thử và kém hơn. */
@media (max-width:600px){.sp-mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 16px -10px rgba(38,56,98,.25);transform:translateY(110%);opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .24s}.sp-mcta.is-on{transform:none;opacity:1;pointer-events:auto}.sp-mcta::after{content:"";position:absolute;left:0;right:0;top:100%;height:120px;background:var(--surface)}.sp-mcta .sp-btn{flex:1}}

/* Org strip as pills */

/* Section atmosphere: brand mesh image behind any section (set --sp-mesh; strength --sp-mesh-o) */
.sp-mesh{position:relative;overflow:hidden}
.sp-mesh::before{content:"";position:absolute;inset:0;background:var(--sp-mesh) center/cover no-repeat;opacity:var(--sp-mesh-o,.35);pointer-events:none}
.sp-mesh > *{position:relative;z-index:1}
.sp-mesh--fade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--sp-fade,var(--canvas)) 0,transparent 22%,transparent 78%,var(--sp-fade,var(--canvas)) 100%);pointer-events:none}

/* Compare as tabs: one alternative vs ScrumPass */
.sp-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--radius-xl);background:var(--indigo-light);max-width:100%}
.sp-tabs button{font:600 14px var(--font-sans);white-space:nowrap;min-height:40px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-dark);cursor:pointer}
.sp-tabs button[aria-selected="true"]{background:var(--surface);color:var(--primary-700);box-shadow:var(--shadow-sm)}
.sp-vs{border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card-soft);overflow:hidden}
.sp-vs__row{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;border-top:1px solid var(--border)}
.sp-vs__row:first-child{border-top:0}
.sp-vs__row > *{padding:14px 18px;font-size:14px;text-wrap:pretty}
.sp-vs__row > b{color:var(--text-dark);font-weight:600;background:var(--indigo-light)}
.sp-vs__row .us{background:var(--tint);color:var(--text-dark);font-weight:500}
.sp-vs__head > *{font-weight:700;color:var(--text-on-primary);background:var(--text-dark)}
.sp-vs__head .us{background:var(--cta);color:var(--text-on-primary)}
.sp-vs--all{display:none}
.sp-vs--all .sp-vs__row{grid-template-columns:.85fr repeat(3,minmax(0,1fr)) minmax(0,1.15fr)}
.sp-vs--all .sp-vs__head > span + span:not(.us){border-left:1px solid rgba(255,255,255,.16)}
.sp-vs--all .sp-vs__row:not(.sp-vs__head) > span + span:not(.us){border-left:1px solid var(--border)}
@container sp (min-width:961px){.sp-vs--all{display:block}.sp-vs-tabs{display:none}}
.sp-vs .y{color:var(--success-ink);font-weight:700}
.sp-vs .n{color:var(--error-ink);font-weight:700}
.sp-vs .m{color:var(--warning-dark);font-weight:700}
@container sp (max-width:600px){
  .sp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .sp-tabs button{border-radius:var(--radius-lg);white-space:normal;line-height:1.25;padding:6px 8px;font-size:13px;min-height:44px}
  .sp-vs__row{grid-template-columns:1fr 1fr}
  .sp-vs__row > b{grid-column:1/-1;background:var(--blue-divider);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dark);padding-block:8px}
  .sp-vs__head > b{display:none}
  .sp-vs__row > *{padding:10px 14px;font-size:13px}
}

/* Hero stack: several product cards stacked, auto-rotating (front card on top, the next two peek behind) */
.sp-stack{display:grid;position:relative;padding:28px 36px 0 0}
.sp-stack__slide{grid-area:1/1;align-self:stretch;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1);transform-origin:top right;will-change:transform}
.sp-stack__slide[data-pos="0"]{z-index:4;transform:none;opacity:1}
.sp-stack__slide[data-pos="1"]{z-index:3;transform:translate(18px,-16px) scale(.95);opacity:.92;pointer-events:none}
.sp-stack__slide[data-pos="2"]{z-index:2;transform:translate(36px,-30px) scale(.9);opacity:.7;pointer-events:none}
.sp-stack__slide[data-pos="3"]{z-index:1;transform:translate(36px,-30px) scale(.9);opacity:0;pointer-events:none}
.sp-stack .sp-shot{box-shadow:var(--shadow-hero)}
.sp-stack .sp-shot__view{aspect-ratio:1342/760}
.sp-stack__nav{display:flex;flex-wrap:nowrap;gap:6px;margin-top:36px;overflow-x:auto;scrollbar-width:none}
.sp-stack__nav::-webkit-scrollbar{display:none}
.sp-stack__nav button{flex:none;white-space:nowrap;font:600 13px var(--font-sans);display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--text-dark);cursor:pointer}
.sp-stack__nav button i{width:8px;height:8px;border-radius:50%;background:var(--blue-divider)}
.sp-stack__nav button[aria-pressed="true"]{border-color:var(--primary);background:var(--indigo-light);color:var(--primary-700)}
.sp-stack__nav button[aria-pressed="true"] i{background:var(--primary)}
@container sp (max-width:600px){.sp-stack{padding:18px 18px 0 0}.sp-stack__slide[data-pos="1"]{transform:translate(9px,-9px) scale(.96)}.sp-stack__slide[data-pos="2"],.sp-stack__slide[data-pos="3"]{transform:translate(18px,-18px) scale(.92)}}

/* Final CTA: a lifted gradient card with proof and a live gauge */
.sp-cta{padding-block:var(--space-12)}
/* Khối trước có nền canvas (cùng màu) thì CTA cuối lên nền trắng để 2 khối tách nhau */
.sp-section:not(.sp-section--white) + .sp-cta,.sp-hub + .sp-cta{background:var(--surface)}
.sp-cta__card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-8);align-items:center;padding:48px 56px;border-radius:var(--radius-2xl);background:linear-gradient(125deg,var(--hero-from),var(--hero-to));color:var(--text-on-primary);box-shadow:var(--shadow-hero)}
.sp-cta__card::before{content:"";position:absolute;inset:0;background:var(--sp-mesh) center/cover no-repeat;opacity:.35;mix-blend-mode:screen;pointer-events:none}
.sp-cta__card > *{position:relative;min-width:0}
.sp-cta__card .sp-eyebrow{color:var(--accent-lime)}
.sp-cta__card h2{color:var(--text-on-primary);font-size:clamp(28px,3.6cqi,44px);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-top:10px}
.sp-cta__card p{font-size:18px;margin-top:14px;max-width:560px;color:var(--text-on-primary)}
.sp-cta__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;font-size:15px}
.sp-cta__list li{display:flex;gap:10px;align-items:flex-start}
.sp-cta__list li::before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-lime);color:var(--lime-ink);font-size:12px;font-weight:800}
.sp-cta__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.sp-cta__btns .sp-btn--inverse{min-height:56px;padding:0 28px;font-size:17px;box-shadow:0 10px 24px -10px rgba(17,25,40,.45)}
.sp-cta__visual{display:grid;justify-items:center;gap:12px;padding:24px;border-radius:var(--radius-xl);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.sp-cta__visual .sp-gauge{width:100%;max-width:240px}
.sp-cta__proof{font-size:14px;text-align:center}
.sp-cta__proof b{display:block;font-size:30px;font-weight:800;color:var(--accent-lime);line-height:1.1}
@container sp (max-width:960px){.sp-cta__card{grid-template-columns:1fr;padding:36px 28px}}
@container sp (max-width:600px){.sp-cta__card{padding:28px 20px;border-radius:var(--radius-xl)}.sp-cta__card p{font-size:16px}.sp-cta__btns .sp-btn{flex:1 1 100%}.sp-cta__visual{display:none}}

/* Feature mock slides (hero stack): product UI drawn in markup on the hero gradient */
.sp-mock{position:relative;border-radius:var(--radius-2xl);background:linear-gradient(125deg,var(--hero-from),var(--hero-to));color:var(--text-on-primary);padding:var(--space-6);box-shadow:var(--shadow-hero);display:flex;flex-direction:column;gap:14px;align-self:stretch}
.sp-mock .sp-dash__body{margin-top:2px}
.sp-mock .sp-dash__doms{margin-top:4px}
.sp-mock__tag{font-size:12px;font-weight:600;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:var(--radius-pill)}
.sp-mock__timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;background:var(--warning-bg);color:var(--warning-dark);padding:4px 10px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
.sp-mock__progress{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;font-size:13px;font-weight:600}
.sp-mock__progress .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.sp-mock__progress .bar i{display:block;height:100%;background:var(--surface)}
.sp-mock__panel{background:var(--surface);color:var(--text-900);border-radius:var(--radius-xl);padding:14px;display:grid;gap:8px}
.sp-mock__q{font-size:13px;font-weight:600;line-height:1.45;color:var(--text-dark);margin:0 0 2px}
.sp-mock__opt{font-size:13px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-900)}
.sp-mock__opt.is-sel{border:1.5px solid var(--primary);background:var(--indigo-light);font-weight:600}
.sp-mock .sp-answer{font-size:13px;padding:7px 12px}
.sp-mock__grid{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:4px}
.sp-mock__grid i{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.22)}
.sp-mock__grid i.done{background:rgba(255,255,255,.85)}
.sp-mock__grid i.flag{background:var(--warning)}
.sp-mock__grid i.cur{background:transparent;box-shadow:inset 0 0 0 2px var(--accent-lime)}
.sp-mock__ai{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-xl);padding:12px 14px;font-size:13px}
.sp-mock__ai b{display:inline-flex;align-items:center;gap:6px;color:var(--accent-lime)}
.sp-mock__ai p{margin:6px 0 0;line-height:1.5}
.sp-mock__thread{gap:12px}
.sp-mock__msg{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13px}
.sp-mock__msg .sp-avatar{width:30px;height:30px;font-size:12px}
.sp-mock__msg b{color:var(--text-dark);display:inline-flex;align-items:center;gap:6px}
.sp-mock__msg p{margin:2px 0;line-height:1.45;color:var(--text-600)}
.sp-mock__msg small{color:var(--text-500);font-size:12px}
.sp-mock__msg.is-reply{margin-left:22px;padding-left:12px;border-left:2px solid var(--blue-divider)}
.sp-mock__badge{font-size:11px;font-weight:700;padding:1px 8px;border-radius:var(--radius-pill);background:var(--success-bg);color:var(--success-ink)}
.sp-toast__dot--warn{background:var(--warning-bg);color:var(--warning-dark)}
.sp-toast__dot .sp-icon{width:16px;height:16px}
/* Each slide carries its own toasts; they show only while that slide is in front */
.sp-mock .sp-toast{opacity:0;transform:translateY(6px);transition:opacity .35s ease .25s,transform .35s ease .25s}
.sp-stack__slide[data-pos="0"] .sp-toast{opacity:1;transform:none}
.sp-toast--tl{left:-36px;top:-46px}
.sp-toast--tr{right:-24px;top:-46px}
.sp-toast--bl{left:-40px;bottom:-22px}
.sp-toast--br{right:-28px;bottom:-22px}
.sp-toast--ml{left:-76px;top:52%;max-width:200px}
@container sp (max-width:600px){.sp-mock .sp-toast{display:none}.sp-mock{padding:18px}.sp-mock__grid{grid-template-columns:repeat(10,minmax(0,1fr))}.sp-mock__grid i:nth-child(n+21){display:none}}
/* HeroDashboard: biểu đồ điểm thi thử ở đáy thẻ (margin-top:auto), chứng chỉ ít domain không bị trống */
.sp-dash__chart{margin-top:auto;background:rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:10px 14px 8px;display:grid;gap:6px;font-size:12px}
.sp-dash__chart-head{display:flex;justify-content:space-between;gap:8px}
.sp-dash__chart-head b{font-size:13px}
.sp-dash__chart svg{width:100%;height:auto;display:block;overflow:visible}
.sp-dash__chart polyline{fill:none;stroke:var(--surface);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.sp-dash__chart .l85{stroke:var(--accent-lime);stroke-width:1;stroke-dasharray:4 4;opacity:.8}
.sp-dash__chart circle{fill:var(--surface)}
.sp-dash__chart circle.go{fill:var(--accent-lime)}
/* Dải chọn tính năng: 1 hàng; hẹp quá thì thu gọn, rồi mới cuộn ngang (site.js giữ nút đang chọn trong khung) */
.sp-hero__visual{container:hv/inline-size}
.sp-stack__nav{scroll-snap-type:x proximity;scroll-padding-inline:8px}
.sp-stack__nav button{scroll-snap-align:start}
@container hv (max-width:560px){.sp-stack__nav{gap:5px}.sp-stack__nav button{padding:0 10px;gap:6px;font-size:12.5px}}
@container hv (max-width:480px){.sp-stack__nav{gap:4px}.sp-stack__nav button{padding:0 8px;font-size:12px;min-height:34px}.sp-stack__nav button i{display:none}}
@container hv (max-width:420px){.sp-stack__nav{gap:3px}.sp-stack__nav button{padding:0 7px}}
@container hv (max-width:400px){.sp-stack__nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
.sp-dash__row b{white-space:nowrap}
.sp-mock__reply{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border-radius:var(--radius-lg);padding:6px 6px 6px 14px;font-size:13px;color:var(--text-500)}
.sp-mock__reply b{background:var(--cta);color:var(--text-on-primary);font-size:12px;padding:6px 14px;border-radius:var(--radius-md)}