:root{
  --bg:#06080d;
  --panel:#10151d;
  --panel2:#0b1017;
  --line:rgba(255,255,255,.08);
  --text:#f4f6fb;
  --muted:#cdd4df;
  --yellow:#e6cc4b;
  --yellow2:#ffc92a;
  --orange:#ff8d26;
  --red:#db2d27;
  --red2:#ff5448;
  --green:#42c24f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at top, rgba(255,120,40,.08), transparent 28%),
    linear-gradient(180deg,#06080d 0%, #070a10 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.sr-topbar{
  position:sticky;
  top:0;
  z-index:100;

  background:rgba(20,25,35,0.35);

  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);

  border-bottom:1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 30px rgba(0,0,0,0.45);
}
.sr-topbar-inner{
  max-width:760px;
  margin:0 auto;
  min-height:86px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sr-logo{
  height:110px;
  width:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));
}
.sr-top-actions{
  display:flex;
  gap:12px;
}
.sr-top-btn{
  min-width:84px;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
.sr-top-btn-call{
  background:linear-gradient(180deg,#ff6c56 0%,#ee4530 100%);
}
.sr-top-btn-wa{
  background:linear-gradient(180deg,#35d965 0%,#27bc56 100%);
}

.sr-shell{
  max-width:760px;
  margin:0 auto;
  padding:18px 0 34px;
  display:grid;
  gap:16px;
}

.sr-hero-card,
.sr-boost-card,
.sr-result-card,
.sr-brands-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(21,27,38,.96) 0%, rgba(11,16,23,.98) 100%);
  box-shadow:
    0 18px 38px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.sr-hero-card{
  min-height:380px;
  border-radius:18px;
}
.sr-hero-bg{
  position:absolute;
  inset:0;
  background:
    url("/static/site/images/hero/hero_car.png") center center / cover no-repeat;
}
.sr-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(18,22,30,.08) 0%, rgba(18,22,30,.14) 16%, rgba(10,14,20,.34) 54%, rgba(7,10,16,.78) 100%);
}
.sr-hero-content{
  position:relative;
  z-index:2;
  padding:22px 28px 18px;
  background:rgba(10,14,20,.46);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.sr-hero-content h1{
  margin:0 0 10px;
  max-width:430px;
  font-size:clamp(2.1rem, 6vw, 3.5rem);
  line-height:.94;
  letter-spacing:-.03em;
  font-weight:900;
}
.sr-sub{
  margin:0 0 14px;
  font-size:1.05rem;
  color:#eef1f7;
}
.sr-reg-row{
  display:grid;
  grid-template-columns:320px 88px;
  gap:10px;
  margin:0 0 18px;
}
.sr-reg-input{
  height:58px;
  padding:0 18px;
  border:none;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(244,223,103,.95) 0%, rgba(227,198,67,.92) 100%);
  color:#13161b;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}
.sr-reg-btn{
  height:58px;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,#ff7060 0%,#ef4933 100%);
  color:#fff;
  font-size:2rem;
  font-weight:900;
  box-shadow:0 10px 24px rgba(208,52,37,.24);
}
.sr-benefits{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.sr-benefits li{
  position:relative;
  padding-left:28px;
  font-size:1rem;
  font-weight:800;
  color:#f2f4f8;
}
.sr-benefits li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--yellow2);
  font-weight:900;
}

.sr-boost-card{
  min-height:220px;
  border-radius:16px;
}
.sr-boost-road{
  position:absolute;
  inset:0;
  background:
    url("/static/site/images/hero/hero_car.png") center 88% / cover no-repeat;
  opacity:.13;
}
.sr-boost-glow{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(15,20,30,.52) 0%, rgba(8,12,18,.84) 100%),
    radial-gradient(circle at 58% 44%, rgba(255,120,30,.08), transparent 26%);
}
.sr-boost-inner{
  position:relative;
  z-index:2;
  padding:14px 24px 14px;
}
.sr-boost-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 -2px;
}
.sr-boost-title{
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  line-height:.95;
  font-weight:900;
}
.sr-boost-percent{
  font-size:1.2rem;
  font-weight:900;
  color:var(--yellow2);
}
.sr-boost-bar-wrap{
  position:relative;
  margin:0 0 6px;
}
.sr-boost-overlay{
  width:82%;
  margin-left:2%;
  position:relative;
  z-index:2;
  opacity:.98;
  filter:drop-shadow(0 0 10px rgba(255,140,40,.22));
}
.sr-boost-fill{
  position:absolute;
  left:27%;
  top:52%;
  transform:translateY(-50%);
  width:0%;
  height:8%;
  max-width:52%;
  background:linear-gradient(90deg,#ffe97f 0%, #ffd642 38%, #ffb12f 70%, #ff7a1f 100%);
  opacity:.60;
  box-shadow:
    0 0 10px rgba(255,210,70,.18),
    0 0 18px rgba(255,135,35,.12);
  z-index:3;
  transition:width .12s linear;
}
.sr-boost-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.sr-boost-steps li{
  position:relative;
  padding-left:16px;
  font-size:.98rem;
  color:#dbe0e8;
  opacity:.62;
  transition:opacity .2s ease,color .2s ease;
}
.sr-boost-steps li::before{
  content:"|";
  position:absolute;
  left:0;
  top:0;
  color:#bf8f59;
}
.sr-boost-steps li.is-on{
  opacity:1;
  color:#fff;
}

.sr-result-card{
  border-radius:16px;
}
.sr-result-collapsed{
  max-height:0;
  opacity:0;
  border-color:transparent;
}
.sr-result-expanded{
  max-height:1400px;
  opacity:1;
}
.sr-result-bg{
  position:absolute;
  inset:0;
  background:
    url("/static/site/images/hero/hero_car.png") center 90% / cover no-repeat;
  opacity:.08;
}
.sr-result-inner{
  position:relative;
  z-index:2;
  padding:22px 24px 24px;
}
.sr-result-inner h2{
  margin:0 0 4px;
  font-size:2rem;
  font-weight:900;
}
.sr-variant{
  margin:0 0 14px;
  color:var(--muted);
  font-size:1.05rem;
}
.sr-meta-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:0 0 14px;
}
.sr-meta{
  min-height:54px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  display:grid;
  gap:4px;
  border-radius:12px;
}
.sr-meta-k{
  font-size:.72rem;
  font-weight:800;
  color:#b8c2d3;
  text-transform:uppercase;
}
.sr-meta-v{
  font-size:1rem;
  font-weight:900;
}
.sr-stat-row{
  display:grid;
  gap:8px;
  padding:12px 14px;
  margin-bottom:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.sr-stat-label{
  font-weight:900;
  font-size:1.08rem;
}
.sr-stat-line{
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  align-items:stretch;
  gap:10px;
}
.sr-stat-line > span{
  display:flex;
  align-items:center;
  font-size:1rem;
  font-weight:900;
}
.sr-arrow{
  font-size:1.2rem;
}
.sr-gain{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 14px;
  border-radius:10px;
  color:#fff;
  font-weight:900;
}
.sr-gain-green{
  background:linear-gradient(90deg,#386f34,#51bc50);
}
.sr-gain-red{
  background:linear-gradient(90deg,#97292a,#df352d);
}
.sr-price-block{
  margin:18px 0 14px;
}
.sr-price-title{
  text-align:center;
  margin:0 0 8px;
  font-size:1rem;
}
.sr-price-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
}
.sr-price-old,
.sr-price-now{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.sr-price-old{
  background:rgba(255,255,255,.03);
  font-size:1.15rem;
}
.sr-price-now{
  background:linear-gradient(180deg,#d53b2d 0%, #ab211c 100%);
  font-size:1.5rem;
}
.sr-book-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:62px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--red2) 0%, var(--red) 100%);
  color:#fff;
  font-size:1.55rem;
  font-weight:900;
  box-shadow:0 12px 24px rgba(198,40,28,.22);
}

.sr-brands-card{
  padding:18px 20px 20px;
  border-radius:16px;
}
.sr-brands-card h3{
  margin:0 0 14px;
  text-align:center;
  font-size:1rem;
  letter-spacing:.04em;
}
.sr-brand-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.sr-brand-item{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  font-size:.92rem;
  font-weight:900;
  color:#f3f5fa;
}

.sr-hidden{display:none!important}

@media (max-width:900px){
  .sr-topbar-inner{
    padding:0 16px;
    min-height:82px;
  }
  .sr-logo{
    height:90px;
  }
  .sr-top-btn{
    min-width:72px;
    min-height:40px;
    padding:0 16px;
    font-size:.95rem;
  }
  .sr-shell{
    gap:14px;
    padding:14px 0 24px;
  }
  .sr-hero-card,
  .sr-boost-card,
  .sr-result-card,
  .sr-brands-card{
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  .sr-hero-card{
    min-height:350px;
  }
  .sr-hero-content{
    padding:18px 16px 14px;
    margin:10px 12px 0;
    background:rgba(10,14,20,.52);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .sr-hero-content h1{
    max-width:none;
    width:100%;
    font-size:clamp(2.35rem, 11.5vw, 3.55rem);
    line-height:.9;
    text-shadow:0 4px 18px rgba(0,0,0,.34);
  }
  .sr-sub{
    max-width:92%;
    font-size:1rem;
    line-height:1.22;
    text-shadow:0 2px 10px rgba(0,0,0,.28);
  }
  .sr-reg-row{
    grid-template-columns:1fr 74px;
    gap:8px;
    margin-bottom:14px;
  }
  .sr-reg-input{
    height:54px;
    font-size:1rem;
    border-radius:10px;
  }
  .sr-reg-btn{
    height:54px;
    font-size:1.7rem;
    border-radius:10px;
  }
  .sr-benefits{
    gap:7px;
  }
  .sr-benefits li{
    font-size:.92rem;
    padding-left:24px;
  }

  .sr-boost-card{
    min-height:188px;
  }
  .sr-boost-inner{
    padding:10px 16px 10px;
  }
  .sr-boost-head{
    margin-bottom:-4px;
  }
  .sr-boost-title{
    font-size:clamp(1.25rem, 9vw, 2rem);
  }
  .sr-boost-percent{
    font-size:1rem;
  }
  .sr-boost-overlay{
    width:94%;
    margin-left:0%;
  }
  .sr-boost-fill{
    left:26%;
    top:52%;
    height:7%;
    max-width:56%;
    opacity:.58;
  }
  .sr-boost-steps{
    gap:2px;
  }
  .sr-boost-steps li{
    font-size:.9rem;
  }

  .sr-result-inner{
    padding:18px 16px 18px;
  }
  .sr-result-inner h2{
    font-size:1.3rem;
  }
  .sr-variant{
    font-size:.92rem;
  }
  .sr-meta-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .sr-stat-line{
    grid-template-columns:auto auto auto 1fr;
    gap:8px;
  }
  .sr-stat-line > span{
    font-size:.94rem;
  }
  .sr-gain{
    min-height:42px;
    font-size:.88rem;
  }
  .sr-price-old{
    font-size:1rem;
  }
  .sr-price-now{
    font-size:1.2rem;
  }
  .sr-book-btn{
    min-height:44px;
    font-size:1.3rem;
  }
  .sr-brand-grid{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ROAD TEXTURE FOR RESULT TILES */

.sr-result-card,
.sr-stat-row,
.sr-price-strip{
    background:
        linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
        url("/static/site/images/bg/road-tile.webp");
    background-size:cover;
    background-position:center;
}


/* ROAD BACKGROUND OVERRIDES */
.sr-boost-road,
.sr-result-bg{
  background-image:url("/static/site/images/bg/road-tile.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  opacity:.22 !important;
}

.sr-result-card,
.sr-stat-row,
.sr-price-strip{
  background:
    linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.68)),
    url("/static/site/images/bg/road-tile.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.sr-boost-card{
  background:
    linear-gradient(180deg, rgba(16,22,34,.72) 0%, rgba(8,12,18,.88) 100%),
    url("/static/site/images/bg/road-tile.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


/* BOOST BAR ORANGE PULSE */
@keyframes srBoostPulse{
  0%{
    opacity:.55;
    box-shadow:
      0 0 8px rgba(255,200,60,.18),
      0 0 16px rgba(255,120,20,.10);
    filter:saturate(1) brightness(1);
  }
  50%{
    opacity:.9;
    box-shadow:
      0 0 14px rgba(255,210,70,.35),
      0 0 28px rgba(255,110,20,.22),
      0 0 42px rgba(255,90,10,.12);
    filter:saturate(1.18) brightness(1.08);
  }
  100%{
    opacity:.55;
    box-shadow:
      0 0 8px rgba(255,200,60,.18),
      0 0 16px rgba(255,120,20,.10);
    filter:saturate(1) brightness(1);
  }
}

.sr-boost-fill{
  animation:srBoostPulse 1.35s ease-in-out infinite;
}


/* ALWAYS-ON TURBO GLOW */
@keyframes srTurboGlow{
  0%{
    opacity:.88;
    filter:
      drop-shadow(0 0 4px rgba(255,165,55,.08))
      drop-shadow(0 0 10px rgba(255,120,25,.06));
  }
  25%{
    opacity:.94;
    filter:
      drop-shadow(0 0 8px rgba(255,185,70,.14))
      drop-shadow(0 0 18px rgba(255,125,25,.10));
  }
  50%{
    opacity:1;
    filter:
      drop-shadow(0 0 12px rgba(255,205,90,.22))
      drop-shadow(0 0 28px rgba(255,130,25,.16))
      drop-shadow(0 0 42px rgba(255,95,10,.10));
  }
  75%{
    opacity:.94;
    filter:
      drop-shadow(0 0 8px rgba(255,185,70,.14))
      drop-shadow(0 0 18px rgba(255,125,25,.10));
  }
  100%{
    opacity:.88;
    filter:
      drop-shadow(0 0 4px rgba(255,165,55,.08))
      drop-shadow(0 0 10px rgba(255,120,25,.06));
  }
}

.sr-boost-overlay{
  animation:srTurboGlow 3.6s ease-in-out infinite;
  will-change:filter, opacity;
}

/* BRAND LOGO SIZE FIX */
.sr-brand-item{
  overflow:hidden;
  padding:10px;
}

.sr-brand-item img{
  display:block;
  width:auto;
  height:auto;
  max-width:78%;
  max-height:54px;
  object-fit:contain;
  margin:0 auto;
}

@media (max-width:900px){
  .sr-brand-item img{
    max-width:74%;
    max-height:48px;
  }
}

.sr-brand-text{
  font-size:.95rem;
  font-weight:900;
  letter-spacing:.04em;
  color:#f3f5fa;
}

/* RESULT OPTIONS PILLS */
.sr-options-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 16px;
}

.sr-option-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#f2f5fb;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
}

.sr-option-pill.is-on{
  border-color:rgba(255,176,64,.30);
  background:linear-gradient(180deg, rgba(255,168,48,.18), rgba(255,110,24,.10));
  box-shadow:0 0 14px rgba(255,120,20,.08);
}

.sr-option-pill.is-off{
  opacity:.78;
}

@media (max-width:900px){
  .sr-options-row{
    gap:6px;
    margin:10px 0 14px;
  }
  .sr-option-pill{
    min-height:28px;
    padding:0 9px;
    font-size:.76rem;
  }
}

/* VARIANT PICKER */
.sr-variant-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}

.sr-variant-pill{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
}

.sr-variant-pill:hover{
  border-color:rgba(255,176,64,.34);
  background:linear-gradient(180deg, rgba(255,168,48,.18), rgba(255,110,24,.10));
}

.sr-variant-pill.is-loading,
.sr-variant-pill:disabled{
  opacity:.6;
}

@media (max-width:900px){
  .sr-variant-picker{
    gap:6px;
    margin:10px 0 14px;
  }

  .sr-variant-pill{
    min-height:32px;
    padding:0 10px;
    font-size:.76rem;
  }
}


/* HOMEPAGE OPTIONS TILE */
.sr-options-card{
  margin:12px 0 16px;
  padding:14px;
  border-radius:14px;
  background:rgba(12,18,27,.72);
  border:1px solid rgba(255,255,255,.08);
}

.sr-options-title{
  font-weight:800;
  margin-bottom:8px;
  color:#f4f6fb;
}

.sr-options-row{
  display:none;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}

@media (max-width:900px){
  .sr-options-card{
    margin:10px 0 14px;
    padding:12px;
    border-radius:12px;
  }
}


/* OPTION ACTIVE GLOW */
.sr-options-row .sr-option-pill.is-on{
  border-color: rgba(255,190,70,.78) !important;
  background: linear-gradient(180deg, rgba(255,175,45,.22), rgba(255,120,30,.16)) !important;
  box-shadow:
    0 0 12px rgba(255,155,40,.30),
    0 0 24px rgba(255,120,20,.16),
    inset 0 0 8px rgba(255,215,120,.16) !important;
}



/* AUTOTUNER COMPATIBILITY CARD */
.sr-compat-card{
  margin:12px 0 16px;
  padding:14px;
  border-radius:14px;
  background:rgba(12,18,27,.72);
  border:1px solid rgba(255,255,255,.08);
}

.sr-compat-topline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.sr-compat-title{
  font-weight:900;
  font-size:1.05rem;
  color:#f4f6fb;
}

.sr-compat-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  flex:0 0 56px;
}

.sr-compat-head{
  margin-bottom:10px;
}

.sr-compat-make{
  font-size:1.2rem;
  font-weight:900;
  line-height:1.05;
  margin-bottom:4px;
}

.sr-compat-ecu{
  color:#d8deea;
  font-weight:800;
}

.sr-compat-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:10px;
}

.sr-compat-kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.sr-compat-kv span{
  color:#aeb8c8;
  font-weight:700;
}

.sr-compat-kv strong{
  color:#fff;
  font-weight:900;
  text-align:right;
}

.sr-compat-methods{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.sr-method-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,190,70,.50);
  background:linear-gradient(180deg, rgba(255,175,45,.18), rgba(255,120,30,.10));
  color:#fff;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.03em;
}

@media (max-width:900px){
  .sr-compat-card{
    margin:10px 0 14px;
    padding:12px;
    border-radius:12px;
  }

  .sr-compat-logo{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .sr-compat-title{
    font-size:1rem;
  }

  .sr-compat-make{
    font-size:1.08rem;
  }

  .sr-compat-kv{
    padding:8px 9px;
  }

  .sr-method-pill{
    min-height:28px;
    padding:0 9px;
    font-size:.76rem;
  }
}


/* ECU DETAILS COLLAPSIBLE */
.sr-compat-card{
  margin:12px 0 16px;
  padding:0;
  border-radius:14px;
  background:rgba(12,18,27,.72);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.sr-compat-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
}

.sr-compat-summary::-webkit-details-marker{
  display:none;
}

.sr-compat-summary-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sr-compat-toggle{
  color:#aeb8c8;
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}

.sr-compat-card[open] .sr-compat-toggle{
  color:#ffd27a;
}

.sr-compat-head,
.sr-compat-meta,
.sr-compat-methods{
  padding-left:14px;
  padding-right:14px;
}

.sr-compat-head{
  padding-top:2px;
  padding-bottom:10px;
}

.sr-compat-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding-bottom:10px;
}

.sr-compat-methods{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:14px;
}

@media (max-width:900px){
  .sr-compat-card{
    margin:10px 0 14px;
    border-radius:12px;
  }

  .sr-compat-summary{
    padding:11px 12px;
  }

  .sr-compat-head,
  .sr-compat-meta,
  .sr-compat-methods{
    padding-left:12px;
    padding-right:12px;
  }

  .sr-compat-methods{
    padding-bottom:12px;
  }
}


/* TITLE ROW LOGO */
.sr-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.sr-title-row h2{
  order:1;
}

.sr-title-logo{
  order:2;
}

.sr-title-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 58px;
  display:none;
}

.sr-title-logo[src]{
  display:block;
}

@media (max-width:900px){
  .sr-title-row{
    gap:8px;
  }

  .sr-title-logo{
    width:56px;
    height:56px;
    flex-basis:56px;
  }
}