:root{
  --bg:#f6f1dc;
  --paper:#fffaf0;
  --ink:#14224d;
  --muted:#52607f;
  --line:#d9cfb0;
  --blue:#1238b0;
  --yellow:#ffcc19;
  --deep:#0c1a4c;
  --card:#fff7de;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Work Sans",sans-serif;background:
linear-gradient(180deg,#fff7de 0%,#f7f1d8 28%,#eef2ff 100%);color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit}
.sp-skip{position:absolute;left:-9999px}
.sp-skip:focus{left:1rem;top:1rem;background:#fff;padding:.7rem 1rem;z-index:100}
.sp-shell{width:min(1220px,calc(100% - 2rem));margin:0 auto}
.sp-topbar{position:sticky;top:0;z-index:40;background:rgba(247,243,230,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,34,77,.1)}
.sp-brandline{display:grid;justify-items:center;gap:.55rem;padding:1rem 0 .8rem}
.sp-brandline img{width:min(280px,58vw)}
.sp-brandline small{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sp-mainnav,.sp-footnav{display:flex;gap:.8rem 1rem;justify-content:center;flex-wrap:wrap}
.sp-mainnav{padding:0 0 1rem}
.sp-mainnav a,.sp-footnav a{text-decoration:none;padding:.5rem .82rem;border:1px solid transparent}
.sp-mainnav a:hover,.sp-footnav a:hover{border-color:rgba(18,56,176,.18);background:rgba(18,56,176,.06)}
.sp-hero{position:relative;min-height:86vh;display:grid;align-items:end;background:
linear-gradient(180deg,rgba(9,17,53,.18),rgba(9,17,53,.72)),
url('hero-2.jpg') center/cover no-repeat;color:#fff}
.sp-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:130px;background:linear-gradient(180deg,transparent,rgba(9,17,53,.85))}
.sp-hero-wrap{position:relative;z-index:1;padding:9rem 0 4rem}
.sp-kicker{margin:0 0 .9rem;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.sp-hero-card{width:min(780px,100%);background:rgba(255,250,240,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);padding:1.35rem 1.35rem 1.25rem;clip-path:polygon(0 0,100% 0,100% 78%,94% 100%,0 100%)}
.sp-hero h1,.sp-page h1,.sp-block h2,.sp-band h2{font-family:"Archivo Black",sans-serif;letter-spacing:-.03em;line-height:.96;margin:0}
.sp-hero h1{font-size:clamp(2.6rem,7vw,5.7rem);max-width:10ch}
.sp-hero p{max-width:59ch;line-height:1.72}
.sp-hero-tags{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.sp-hero-tags span{padding:.55rem .8rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.sp-ranking{padding:2.2rem 0 1.2rem}
.sp-ranking-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;align-items:end;margin-bottom:1rem}
.sp-ranking-head h2{font-size:clamp(2rem,5vw,4rem)}
.sp-ranking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sp-card{background:var(--paper);border:1px solid rgba(20,34,77,.11);box-shadow:12px 12px 0 rgba(18,56,176,.08);padding:1.1rem;display:grid;gap:.9rem}
.sp-card-top{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}
.sp-rank{width:44px;height:44px;display:grid;place-items:center;background:var(--yellow);font-weight:800;color:var(--deep)}
.sp-card-top img{height:34px;object-fit:contain;justify-self:start}
.sp-score{font-weight:800;color:var(--blue)}
.sp-card h3{margin:0;font-size:1.36rem}
.sp-pill{display:inline-block;padding:.48rem .7rem;background:rgba(18,56,176,.08);border-left:4px solid var(--yellow);font-size:.95rem}
.sp-card ul{margin:0;padding-left:1.1rem;line-height:1.72;color:var(--muted)}
.sp-pay{font-size:.95rem;line-height:1.68;color:var(--muted)}
.sp-card-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sp-card-actions a,.sp-modal-actions button,.sp-note a{cursor:pointer;text-decoration:none;background:var(--blue);color:#fff;padding:.9rem 1.15rem;border:0;font-weight:700}
.sp-card-actions a:hover,.sp-modal-actions button:hover,.sp-note a:hover{background:#0c2f9b}
.sp-band{padding:1.25rem 0;background:#1238b0;color:#f6f9ff}
.sp-band-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:start}
.sp-band p{line-height:1.72}
.sp-block{padding:2.4rem 0}
.sp-block h2{font-size:clamp(1.8rem,4vw,3.3rem);margin-bottom:.85rem}
.sp-slab{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem}
.sp-photo{min-height:360px;background:url('hero-1.jpg') center/cover no-repeat;clip-path:polygon(0 0,100% 0,100% 85%,86% 100%,0 100%)}
.sp-notes{display:grid;gap:.85rem}
.sp-note{background:var(--card);border:1px solid var(--line);padding:1rem}
.sp-note strong{display:block;margin-bottom:.4rem}
.sp-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.sp-check{background:#fff;border-top:6px solid var(--yellow);padding:1rem;border-right:1px solid rgba(20,34,77,.08);border-bottom:1px solid rgba(20,34,77,.08)}
.sp-check strong{display:block;margin-bottom:.5rem}
.sp-helpline{padding:2rem 0;background:#091135;color:#ecf0ff}
.sp-helpgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;align-items:start}
.sp-helpline h2{font-size:clamp(2rem,5vw,4.2rem);margin:0 0 .4rem}
.sp-helpline a{text-decoration:none;border-bottom:1px solid rgba(236,240,255,.3)}
.sp-rg{padding:1.1rem 0;background:#ffe9e5;border-top:1px solid #f0b4a8;border-bottom:1px solid #f0b4a8}
.sp-rg p{margin:.25rem 0;line-height:1.7}
.sp-footer{background:#0b1441;color:#e6ecff;padding:2rem 0 2.6rem}
.sp-foot-top{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center}
.sp-foot-top img{width:min(260px,52vw)}
.sp-footnav{justify-content:flex-end}
.sp-foot-bottom{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(230,236,255,.14)}
.sp-foot-bottom p{line-height:1.72}
.sp-page{width:min(920px,calc(100% - 2rem));margin:0 auto;padding:2.6rem 0 3rem}
.sp-page h1{font-size:clamp(2.2rem,5vw,4rem)}
.sp-date{margin:.8rem 0 1.3rem;color:var(--muted)}
.sp-page p,.sp-page li{line-height:1.78}
.sp-page ul{padding-left:1.15rem}
.sp-modal{position:fixed;inset:0;background:rgba(7,13,38,.72);display:grid;place-items:center;padding:1rem;z-index:80}
.sp-modal[hidden]{display:none}
.sp-modal-card{width:min(560px,100%);background:#fff6db;border:2px solid #f1cf64;padding:1.4rem;box-shadow:16px 16px 0 rgba(18,56,176,.12)}
.sp-modal-card h2{margin:0 0 .6rem;font-family:"Archivo Black",sans-serif;font-size:1.6rem}
.sp-modal-card p{line-height:1.7}
.sp-modal-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.sp-modal-actions .sp-muted{background:transparent;color:var(--ink);border:1px solid rgba(20,34,77,.18)}
@media (max-width:960px){
  .sp-ranking-head,.sp-band-grid,.sp-slab,.sp-helpgrid,.sp-foot-top,.sp-checks,.sp-ranking-grid{grid-template-columns:1fr}
  .sp-footnav{justify-content:flex-start}
}
@media (max-width:720px){
  .sp-hero{min-height:78vh}
  .sp-hero-wrap{padding-top:7.2rem}
  .sp-card-top{grid-template-columns:auto 1fr}
  .sp-score{grid-column:1/-1}
}