/* One banner component for Home, every trainer and Live. No text-driven height. */
.sst-brand .sst-banner{
 --banner-title:18px;
 box-sizing:border-box;position:relative;isolation:isolate;display:grid;
 grid-template-columns:minmax(0,1fr) 142px;grid-template-rows:minmax(0,1fr);
 align-items:center;gap:8px 18px;height:160px;min-height:160px;
 padding:16px 22px;margin:0 0 12px;border-radius:20px;overflow:hidden;
 background:#eafaff url('/assets/brand/hero-race-v043.webp') center 48%/cover no-repeat;
 color:#071c55;
}
.sst-brand .sst-banner-home{grid-template-rows:minmax(0,1fr) auto}
.sst-brand .sst-banner-identity{display:contents}
.sst-brand .sst-banner-mark{
 grid-column:1;grid-row:1;justify-self:center;align-self:center;
 display:flex;flex-direction:column;align-items:stretch;
 width:430px;max-width:100%;min-width:0;
}
/* Crop the transparent canvas with CSS, preserving the artwork as one unit. */
.sst-brand .sst-banner-logo{
 display:block;position:relative;width:100%;aspect-ratio:2099 / 277;
 overflow:hidden;flex-shrink:0;
}
.sst-brand .sst-banner-logo img{
 position:absolute;width:103.478%;max-width:none;height:auto;
 left:-1.668%;top:-85.921%;
}
.sst-brand .sst-banner-title,.sst-brand .sst-banner-tagline{
 font-family:TrainerRounded,TrainerSans,system-ui,sans-serif!important;
 font-size:var(--banner-title)!important;font-weight:900!important;line-height:1.18!important;
 letter-spacing:-.025em!important;margin:4px 0 0 32%!important;padding:0!important;
 color:#8c6100!important;text-align:left;max-width:30ch;
}
.sst-brand .sst-banner-title{font-style:italic}
.sst-brand .sst-banner-tagline{font-size:20px!important;font-style:italic;white-space:nowrap;color:#c58a00!important}
.sst-brand .sst-banner-badges{
 grid-column:1;grid-row:2;justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;
 gap:5px;max-width:100%;margin:0;
}
.sst-brand .sst-banner-badges>span{
 display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
 border:1px solid #9edcf2;border-radius:999px;background:#ffffffd9;
 color:#061c55;font:800 9px/1.2 TrainerRounded,TrainerSans,system-ui,sans-serif;padding:5px 7px;
}
.sst-brand .sst-banner-badges b{font:inherit}
.sst-brand .sst-banner-cards{
 grid-column:2;grid-row:1;justify-self:center;align-self:center;display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));width:142px;gap:12px 10px;padding:5px 3px;
 box-sizing:border-box;pointer-events:none;
}
.sst-brand .sst-banner-home .sst-banner-cards{grid-row:1 / span 2}
.sst-brand .sst-banner-card{
 display:flex;justify-content:center;align-items:center;gap:3px;box-sizing:border-box;
 height:31px;padding:4px;border-radius:8px;background:#fff;color:#071c55;
 box-shadow:0 3px 8px #006f9814;font:900 11px/1 TrainerRounded,TrainerSans,system-ui,sans-serif;
 white-space:nowrap;
}
.sst-brand .sst-banner-card:nth-child(1){transform:rotate(-10deg) translateY(2px)}
.sst-brand .sst-banner-card:nth-child(2){transform:rotate(8deg) translateY(-3px)}
.sst-brand .sst-banner-card:nth-child(3){transform:rotate(7deg) translateY(3px)}
.sst-brand .sst-banner-card:nth-child(4){transform:rotate(-8deg) translateY(-2px)}
.sst-brand .sst-module-intro{margin:0 0 14px;padding:0 5px;color:#35516b}
.sst-brand .sst-module-intro p,.sst-brand .sst-banner-explanation{font-size:12px;line-height:1.5;margin:0 0 8px;max-width:70ch}
.sst-brand .sst-module-intro .hero-pills,.sst-brand .sst-module-intro .anat-hero-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sst-brand .sst-module-intro .hero-pills span,.sst-brand .sst-module-intro .anat-hero-chips span,
.sst-brand .sst-module-intro .score-rule{color:#35516b;background:#eff8fc;border:1px solid #d7eaf0;border-radius:999px;font-size:10px;padding:5px 8px;margin-top:0}
.sst-brand .start-head h2,.sst-brand .info-bottom>h1{color:#111!important;font-style:italic}
@media(max-width:700px){
 .sst-brand .sst-banner{--banner-title:14px;
  grid-template-columns:minmax(0,1fr) 72px;height:160px;min-height:160px;padding:12px;gap:8px;border-radius:17px}
 .sst-brand .sst-banner-tagline{font-size:clamp(11px,2.8vw,16px)!important;white-space:normal;max-width:22ch}
 .sst-brand .sst-banner-badges{grid-column:1 / -1;gap:4px}
 .sst-brand .sst-banner-badges>span{font-size:8px;padding:4px 6px}
 .sst-brand .sst-banner-cards{width:72px;gap:9px 6px;padding:3px 2px}
 .sst-brand .sst-banner-home .sst-banner-cards{grid-row:1}
 .sst-brand .sst-banner-card{height:24px;font-size:8px;padding:2px;border-radius:6px}
}
@media(max-width:390px){
 .sst-brand .sst-banner{--banner-title:13px;
  grid-template-columns:minmax(0,1fr) 60px;height:170px;min-height:170px;padding:10px;gap:7px}
 .sst-brand .sst-banner-tagline{font-size:11px!important}
 .sst-brand .sst-banner-cards{width:60px;gap:8px 5px;padding:2px}
 .sst-brand .sst-banner-card{height:22px;font-size:7px}
}
/* v044: modest card growth; the approved banner art stays in place. */
.sst-brand .sst-banner-home{grid-template-columns:minmax(0,430px) 156px;justify-content:center;column-gap:24px}
.sst-brand .sst-banner-home .sst-banner-mark{justify-self:center;margin-right:0}
.sst-brand .sst-banner-home .sst-banner-cards{width:156px;justify-self:start}
.sst-brand .sst-banner-home .sst-banner-card{height:35px;font-size:12px}
.sst-brand .sst-banner-hint{margin:7px 0 0;font:700 11px/1.35 TrainerRounded,TrainerSans,system-ui,sans-serif;color:#284b60;text-align:center;text-wrap:pretty}
@media(max-width:700px){
 .sst-brand .sst-banner-home{grid-template-columns:minmax(0,1fr) 80px;column-gap:5px}
 .sst-brand .sst-banner-home .sst-banner-mark{margin-right:2px}
 .sst-brand .sst-banner-home .sst-banner-cards{width:80px}
 .sst-brand .sst-banner-home .sst-banner-card{height:27px;font-size:9px}
 .sst-brand .sst-banner-hint{font-size:10px;margin-top:5px}
}
@media(max-width:390px){
 .sst-brand .sst-banner-home{grid-template-columns:minmax(0,1fr) 66px}
 .sst-brand .sst-banner-home .sst-banner-cards{width:66px}
 .sst-brand .sst-banner-home .sst-banner-card{height:25px;font-size:8px}
}