/* ----- Compare page (scoped) ----- */
:root{
  --spec-sep-light:rgba(0,0,0,.10);
  --spec-sep-dark:rgba(255,255,255,.12);
}

.page-compare{ background:#f5f5f7; }
@media (prefers-color-scheme: dark){
  .page-compare{ background:#000; color:#e8e9ec; }
}

.page-compare .subtitle{ color:#5e6572; }
@media (prefers-color-scheme: dark){
  .page-compare .subtitle{ color:#a7acb7; }
}

.page-compare .page-hero-card{
  --hero-a:53 211 208;
  --hero-b:225 106 143;
  --hero-c:102 132 255;
}

.compare-surface{ background:transparent; padding:16px 0 24px; }

.compare-grid{
  display:block;
  min-width:0;
}

.compare-state{
  border:1px solid var(--nav-border);
  border-radius:var(--banner-radius);
  padding:18px;
  text-align:center;
  margin:2px 0;
}
@media (prefers-color-scheme: dark){
  .compare-state{ border-color:#56596466; }
}

.compare-card{
  background:#fff;
  color:#111317;
  border:0;
  border-radius: var(--banner-radius);
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .compare-card{ background:var(--surface-dark); color:#e8e9ec; }
}

.compare-stack{
  display:grid;
  gap:20px;
}

.compare-head{
  padding:16px 18px 12px;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}

/* gradient lives on the whole photo/version area (not inside version label) */
#compare-card-head{
  position:relative;
}

/* bottom-only fade (light: slightly brighter than before, not pure white) */
#compare-card-head::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 66%,
    rgba(247,248,250,.70) 84%,
    rgba(247,248,250,1) 100%
  );
}
@media (prefers-color-scheme: dark){
  #compare-card-head::before{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 58%,
      rgba(10,11,12,.46) 82%,
      rgba(10,11,12,.90) 100%
    );
  }
}

#compare-card-head > *{
  position:relative;
  z-index:1;
}

.compare-picker{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 0 4px 0;
  border-top:0;
  border-radius:14px;
  background: transparent;
  overflow:visible;
}

.compare-select-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
  padding:0 2px 2px 2px;
}

.compare-select{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font: inherit;
  font-weight:700;
  font-size:clamp(18px, 4.8vw, 22px);
  line-height:1.32;
  padding:0 34px 3px 0;
  margin:0;
  width:100%;
  cursor:pointer;
  min-width:0;
  outline:none;
}

.compare-select:disabled{
  cursor:default;
  opacity:.65;
}

.compare-select-wrap::after{
  content:"";
  width:22px;
  height:22px;
  flex:0 0 auto;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  opacity:.85;
  background: currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  pointer-events:none;
}

.compare-hero{
  display:flex;
  justify-content:center;
  padding-top:2px;
  padding-bottom:8px;
}

.compare-hero img{
  width: clamp(170px, 46vw, 300px);
  height:auto;
  filter: drop-shadow(0 10px 36px rgba(0,0,0,.18));
  border-radius: 14px;
}

@media (min-width:900px){
  .compare-hero{
    padding-top:10px;
    padding-bottom:14px;
  }
  .compare-hero img{
    width: clamp(280px, 19vw, 460px);
  }
}

.compare-body{ padding:18px; }

.spec-table{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:18px;
}

.spec-item{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap:22px;
  row-gap:10px;
  align-items:start;
  padding-bottom:18px;
  border-bottom:1px solid var(--spec-sep-light);
}
@media (prefers-color-scheme: dark){
  .spec-item{ border-bottom-color:var(--spec-sep-dark); }
}
.spec-item:last-child{ border-bottom:0; padding-bottom:0; }

.spec-k{
  grid-column:1 / -1;
  font-weight:700;
  opacity:.92;
  letter-spacing:-.01em;
  font-size:clamp(19px, 4.3vw, 22px);
  padding-top:2px;
}

.spec-v{
  color:#5e6572;
  min-width:0;
  line-height:1.55;
}

.spec-v .line{
  display:block;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.spec-v .line + .line{ margin-top:6px; }

@media (prefers-color-scheme: dark){
  .spec-v{ color:#a7acb7; }
}

@media (max-width:520px){
  .spec-item{
    column-gap:18px;
    row-gap:10px;
  }
}

.page-compare .footer{
  background:#f5f5f7;
  color:#5e6572;
}
@media (prefers-color-scheme: dark){
  .page-compare .footer{
    background:#000;
    color:#a7acb7;
  }
}

.page-compare main{ margin-bottom:0; padding-bottom:0 }