.srs-cmp{
  --maxw:1180px;

  --txt:#0b1220;
  --muted:rgba(51,65,85,.92);
  --line:rgba(148,163,184,.35);

  --safeL:env(safe-area-inset-left,0px);
  --safeR:env(safe-area-inset-right,0px);

  width:100%;
  max-width:100vw;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-wrap:anywhere;
  hyphens:none;
  overflow-x:clip;
}

@supports not (overflow-x:clip){
  .srs-cmp{ overflow-x:hidden; }
}

.srs-cmp,
.srs-cmp *{ box-sizing:border-box; }

.srs-cmp__wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-block:clamp(26px,4.2vw,54px);
  padding-inline:calc(clamp(14px,3.2vw,24px) + var(--safeL)) calc(clamp(14px,3.2vw,24px) + var(--safeR));
  min-width:0;
}

.srs-cmp__shell{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(920px 540px at -10% 40%, rgba(139,92,246,.20), transparent 65%),
    radial-gradient(820px 520px at 55% 120%, rgba(236,72,153,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.92));
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}

.srs-cmp__noise{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:.50;
  background-image:
    radial-gradient(2px 2px at 22% 28%, rgba(11,18,32,.04) 0 60%, transparent 61%),
    radial-gradient(2px 2px at 58% 66%, rgba(11,18,32,.03) 0 60%, transparent 61%),
    radial-gradient(2px 2px at 78% 42%, rgba(11,18,32,.03) 0 60%, transparent 61%),
    radial-gradient(2px 2px at 12% 78%, rgba(11,18,32,.03) 0 60%, transparent 61%);
  transform:rotate(6deg);
}

.srs-cmp__head{
  position:relative;
  z-index:1;
  padding:14px;
}

.srs-cmp__headRow{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:stretch;
  min-width:0;
}

@media (min-width:900px){
  .srs-cmp__headRow{
    grid-template-columns:minmax(0, 1fr) minmax(0, 520px);
    gap:16px;
  }
}

.srs-cmp__headInner,
.srs-cmp__imgBox{
  border-radius:20px;
  min-width:0;
}

.srs-cmp__headInner{
  padding:18px 18px 16px;
  border:1px solid rgba(186,230,253,.75);
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(99,102,241,.14), transparent 65%),
    radial-gradient(900px 220px at 90% 0%, rgba(14,165,233,.14), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(248,250,252,.70));
}

.srs-cmp__title{
  margin:0;
  font-size:clamp(18px,4.4vw,34px);
  line-height:1.10;
  letter-spacing:-.02em;
  font-weight:950;
  color:var(--txt);
  text-wrap:balance;
  max-width:100%;
}

.srs-cmp__titleLine{
  display:block;
  height:6px;
  width:min(220px,42%);
  margin:10px 0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(99,102,241,.95), rgba(236,72,153,.85));
}

.srs-cmp__sub{
  margin:0;
  color:var(--muted);
  font-size:clamp(13px,1.35vw,15px);
  line-height:1.65;
  max-width:86ch;
}

.srs-cmp__imgBox{
  border:1px solid rgba(186,230,253,.55);
  background:
    radial-gradient(900px 220px at 85% 0%, rgba(14,165,233,.12), transparent 62%),
    radial-gradient(900px 240px at 10% 100%, rgba(99,102,241,.12), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(248,250,252,.66));
  box-shadow:0 12px 26px rgba(2,6,23,.06);
  overflow:hidden;

  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:16px;
}

.srs-cmp__img{
  width:min(460px,100%);
  max-width:100%;
  height:auto;
  display:block;
  margin-top:6px;
  object-fit:contain;
  object-position:100% 0%;
  filter:drop-shadow(0 18px 28px rgba(2,6,23,.12));
}

@media (min-width:900px){
  .srs-cmp__img{ width:min(520px,100%); }
}

.srs-cmp__tableWrap{
  position:relative;
  z-index:1;
  margin:12px 14px 14px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(255,255,255,.86);
  overflow:hidden;
  min-width:0;
  box-shadow:0 14px 28px rgba(2,6,23,.06);
}

.srs-cmp__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.srs-cmp__table colgroup col:first-child{ width:48%; }
.srs-cmp__table colgroup col:nth-child(2),
.srs-cmp__table colgroup col:nth-child(3){ width:26%; }

.srs-cmp__table thead th{
  padding:14px;
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.96));
  border-bottom:1px solid rgba(148,163,184,.25);
  font-weight:950;
  letter-spacing:-.01em;
  text-align:center;
}

.srs-cmp__table thead th:first-child{
  text-align:left;
  padding-left:18px;
}

.srs-cmp__table tbody td{
  padding:14px;
  border-bottom:1px solid rgba(226,232,240,.78);
  vertical-align:top;
}

.srs-cmp__table tbody tr:last-child td{ border-bottom:none; }

.srs-cmp__table tbody td:first-child{
  padding-left:18px;
  font-weight:800;
  color:rgba(15,23,42,.92);
  background:linear-gradient(180deg, rgba(248,250,252,.65), rgba(255,255,255,.40));
}

.srs-cmp__table tbody td:nth-child(2){
  background:linear-gradient(180deg, rgba(236,253,245,.44), rgba(255,255,255,0));
}

.srs-cmp__table tbody td:nth-child(3){
  background:linear-gradient(180deg, rgba(255,247,237,.42), rgba(255,255,255,0));
}

.srs-cmp__center{ text-align:center; }

.srs-cmp__ok,
.srs-cmp__no{ font-weight:950; }

.srs-cmp__ok{ color:#16a34a; }
.srs-cmp__no{ color:#ef4444; }

.srs-cmp__muted{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:rgba(100,116,139,.92);
}

.srs-cmp__price{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid;
  font-weight:950;
  line-height:1.1;
  white-space:nowrap;
}

.srs-cmp__price--srs{
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.30);
  color:#065f46;
}

.srs-cmp__price--custom{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.30);
  color:#7c2d12;
}

@media (hover:hover){
  .srs-cmp__table tbody tr{ transition:background-color .18s ease; }
  .srs-cmp__table tbody tr:hover{ background:rgba(2,132,199,.035); }
}

@media (max-width:680px){
  .srs-cmp__head{ padding:12px; }
  .srs-cmp__headInner{ padding:16px; }
  .srs-cmp__imgBox{ padding:12px; }
  .srs-cmp__tableWrap{ margin:12px; }
  .srs-cmp__table thead th,
  .srs-cmp__table tbody td{ padding:12px; }
  .srs-cmp__table thead th:first-child,
  .srs-cmp__table tbody td:first-child{ padding-left:14px; }
}

@media (max-width:420px){
  .srs-cmp__title{ font-size:18px; }

  .srs-cmp__table,
  .srs-cmp__table thead,
  .srs-cmp__table tbody,
  .srs-cmp__table th,
  .srs-cmp__table td,
  .srs-cmp__table tr{ display:block; }

  .srs-cmp__table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }

  .srs-cmp__table tbody tr{
    padding:12px 10px;
    border-bottom:1px solid rgba(226,232,240,.7);
    background:rgba(255,255,255,.60);
  }

  .srs-cmp__table tbody tr:last-child{ border-bottom:none; }

  .srs-cmp__table tbody td{
    border:none;
    padding:6px 0;
    background:transparent !important;
    text-align:left !important;
  }

  .srs-cmp__table tbody td:first-child{
    padding:0 0 8px;
    font-weight:900;
  }

  .srs-cmp__table tbody td[data-label]::before{
    content:attr(data-label);
    display:inline-block;
    margin-right:10px;
    min-width:4.5ch;
    font-weight:900;
    color:rgba(100,116,139,.95);
  }

  .srs-cmp__price{
    white-space:normal;
    text-align:center;
    overflow-wrap:anywhere;
  }
}

@media (max-width:360px){
  .srs-cmp__wrap{
    padding-inline:calc(12px + var(--safeL)) calc(12px + var(--safeR));
    padding-block:26px;
  }
  .srs-cmp__tableWrap{ margin:10px; }
}

@media (prefers-reduced-motion:reduce){
  .srs-cmp__table tbody tr{ transition:none; }
}