.compare-hero{
  position:relative;
  min-height:720px;
  padding-top:calc(var(--header-height) + 76px);
  padding-bottom:96px;
  background:
    radial-gradient(circle at 18% 22%,var(--cyan-glow-strong),transparent 34%),
    radial-gradient(circle at 82% 68%,var(--white-glow),transparent 30%),
    linear-gradient(145deg,var(--deep-top),var(--deep-bottom));
  color:var(--hero-text);
  overflow:hidden;
}
.compare-hero::before{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--hero-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,var(--text),transparent);
  opacity:.18;
  content:"";
  pointer-events:none;
}
.compare-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:clamp(48px,8vw,110px);
  align-items:center;
}
.compare-intro{
  min-width:0;
}
.compare-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  padding:7px 13px;
  border:1px solid var(--hero-chip-border);
  border-radius:var(--radius-pill);
  background:var(--hero-chip);
  color:var(--hero-text-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
}
.compare-eyebrow .status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px var(--cyan-glow-strong);
}
.compare-hero h1{
  max-width:730px;
  margin-bottom:24px;
  color:var(--hero-text);
  font-size:clamp(34px,4.2vw,48px);
  font-weight:880;
  letter-spacing:-.04em;
}
.compare-lead{
  max-width:680px;
  margin-bottom:28px;
  color:var(--hero-text-soft);
  font-size:18px;
}
.compare-hero-secondary{
  border-color:var(--hero-chip-border);
  background:var(--hero-chip);
  color:var(--hero-text);
}
.compare-hero-secondary:hover{
  border-color:var(--accent);
  background:var(--glass);
  color:var(--hero-text);
}
.compare-facts{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:28px;
}
.compare-facts span{
  padding:7px 11px;
  border:1px solid var(--hero-chip-border);
  border-radius:var(--radius-pill);
  color:var(--hero-text-soft);
  font-family:var(--font-mono);
  font-size:11px;
}
.compare-device{
  position:relative;
  min-height:470px;
  perspective:1100px;
}
.compare-card{
  position:absolute;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  background:var(--glass);
  color:var(--hero-text);
  box-shadow:0 28px 70px var(--deep-shadow);
  backdrop-filter:blur(14px);
}
.compare-card-back{
  top:26px;
  left:0;
  width:68%;
  min-height:180px;
  padding:24px;
  transform:rotate(-7deg) translateZ(-30px);
  opacity:.62;
}
.compare-card-back span,
.compare-card-front span{
  display:block;
  color:var(--hero-text-faint);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
}
.compare-card-back strong,
.compare-card-front strong{
  display:block;
  margin-top:10px;
  font-family:var(--font-display);
  font-size:18px;
}
.compare-card-back i{
  display:block;
  width:78%;
  height:8px;
  margin-top:24px;
  border-radius:var(--radius-pill);
  background:var(--white-dim);
}
.compare-card-back i+i{
  width:52%;
  margin-top:10px;
}
.compare-card-main{
  top:58px;
  right:8px;
  width:82%;
  min-height:350px;
  padding:24px;
  background:linear-gradient(155deg,var(--glass),var(--hero-chip));
  transform:rotate(3deg);
}
.compare-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
  color:var(--hero-text-faint);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
}
.compare-card-head b{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 18px var(--panel-halo);
}
.compare-choice{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 10px;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:15px 16px;
  border:1px solid var(--hero-chip-border);
  border-radius:var(--radius-md);
  color:var(--hero-text-soft);
}
.compare-choice span{
  font-family:var(--font-mono);
  font-size:11px;
}
.compare-choice strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compare-choice i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--white-dim);
}
.compare-choice.is-selected{
  border-color:var(--accent);
  background:var(--panel-on);
  color:var(--hero-text);
}
.compare-choice.is-selected i{
  background:var(--accent);
  box-shadow:0 0 14px var(--cyan-glow-strong);
}
.compare-axis{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:24px;
  color:var(--hero-text-faint);
  font-family:var(--font-mono);
  font-size:10px;
}
.compare-card-front{
  right:0;
  bottom:10px;
  width:54%;
  padding:20px 22px;
  transform:rotate(-4deg);
}
.decision-panel{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,7vw,90px);
  padding:clamp(30px,5vw,60px);
  border-radius:var(--radius-xl);
  background:var(--deep);
  color:var(--hero-text);
  box-shadow:0 26px 68px var(--deep-shadow);
}
.decision-panel h2{
  color:var(--hero-text);
}
.decision-copy p{
  color:var(--hero-text-soft);
}
.decision-link{
  color:var(--accent);
  font-weight:760;
  text-decoration:none;
}
.decision-link:hover{
  color:var(--hero-text);
}
.compare-table-wrap{
  background:var(--bg);
  box-shadow:0 20px 54px var(--soft-shadow);
}
.compare-table{
  min-width:1180px;
}
.compare-table th:first-child{
  position:sticky;
  left:0;
  z-index:2;
  min-width:190px;
  background:var(--bg);
  color:var(--text);
  box-shadow:8px 0 18px var(--soft-shadow);
}
.compare-table thead th:first-child{
  z-index:3;
  background:var(--bg-panel-strong);
}
.compare-table thead th{
  background:var(--bg-panel-strong);
  white-space:nowrap;
}
.compare-table td{
  min-width:150px;
}
.compare-table td:nth-child(6),
.compare-table td:nth-child(7){
  min-width:230px;
}
.compare-table .badge{
  margin-right:7px;
  vertical-align:middle;
}
.compare-featured-row th,
.compare-featured-row td{
  background:var(--panel-on);
}
.compare-featured-row th:first-child{
  background:var(--bg-panel-strong);
}
.maintain-active,
.maintain-stopped{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:720;
  white-space:nowrap;
}
.maintain-active{
  color:var(--success);
}
.maintain-stopped{
  color:var(--text-muted);
}
.maintain-active::before,
.maintain-stopped::before{
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:50%;
  background:currentColor;
  content:"";
}
.compare-table-note{
  margin-top:24px;
  margin-bottom:0;
}
.client-review-list{
  display:grid;
  gap:20px;
}
.client-review{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:28px;
  padding:clamp(24px,4vw,42px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg);
  box-shadow:0 18px 46px var(--soft-shadow);
}
.client-review.is-recommended{
  border-color:var(--accent);
}
.client-review.is-archived{
  background:var(--bg-panel);
  box-shadow:none;
}
.client-review-index{
  display:grid;
  width:64px;
  height:64px;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--deep);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:760;
}
.client-review-body{
  min-width:0;
}
.client-review-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.client-review-title h3{
  margin-top:4px;
  margin-bottom:0;
}
.client-review-title > h3{
  margin-top:0;
}
.client-scope{
  flex-shrink:0;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:11px;
}
.client-review p{
  max-width:900px;
  color:var(--text-muted);
}
.client-review-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.scenario-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.scenario-grid .callout{
  height:100%;
  margin:0;
}
.scenario-grid .callout p{
  margin-bottom:0;
  color:var(--text-muted);
}
.kernel-layout{
  display:grid;
  grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);
  gap:clamp(40px,7vw,90px);
}
.kernel-heading{
  position:sticky;
  top:32px;
  align-self:start;
}
.kernel-notes{
  display:grid;
  gap:16px;
}
.kernel-notes article{
  padding:30px;
  border-left:5px solid var(--accent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:var(--bg-panel);
}
.kernel-notes article:nth-child(2){
  border-left-color:var(--accent-dark);
  background:var(--bg-panel-strong);
}
.kernel-notes article:nth-child(3){
  border-left-color:var(--success);
}
.kernel-notes span{
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:760;
  letter-spacing:.12em;
}
.kernel-notes h3{
  margin-top:8px;
}
.kernel-notes p{
  margin-bottom:0;
  color:var(--text-muted);
}
.final-choice{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:clamp(30px,6vw,72px);
  align-items:start;
}
.choice-steps{
  display:grid;
  gap:18px;
  margin:32px 0 0;
  padding:0;
  counter-reset:choice-step;
  list-style:none;
}
.choice-steps li{
  position:relative;
  min-height:70px;
  padding:0 0 20px 72px;
  border-bottom:1px solid var(--border);
  counter-increment:choice-step;
}
.choice-steps li::before{
  position:absolute;
  top:0;
  left:0;
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:50%;
  background:var(--deep);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:760;
  content:counter(choice-step,decimal-leading-zero);
}
.choice-steps strong{
  display:block;
  margin-bottom:5px;
  font-size:18px;
}
.choice-steps p{
  margin-bottom:0;
  color:var(--text-muted);
}
.final-recommendation{
  padding:clamp(26px,4vw,38px);
  border-radius:var(--radius-lg);
  background:var(--deep);
  color:var(--hero-text);
  box-shadow:0 24px 58px var(--deep-shadow);
}
.final-recommendation h3{
  margin-top:18px;
  color:var(--hero-text);
}
.final-recommendation p{
  color:var(--hero-text-soft);
}
.final-recommendation .btn{
  width:100%;
  margin-top:10px;
}
.final-text-link{
  display:block;
  margin-top:18px;
  color:var(--accent);
  font-weight:720;
  text-align:center;
  text-decoration:none;
}
.final-text-link:hover{
  color:var(--hero-text);
}
@media (max-width:980px){
  .compare-hero{
    min-height:0;
  }
  .compare-hero-grid{
    grid-template-columns:1fr;
  }
  .compare-device{
    width:min(100%,560px);
    min-height:430px;
    margin-inline:auto;
  }
  .decision-panel,
  .kernel-layout{
    grid-template-columns:1fr;
  }
  .kernel-heading{
    position:static;
  }
}
@media (max-width:768px){
  .compare-hero{
    padding-top:calc(var(--header-height) + 48px);
    padding-bottom:72px;
  }
  .compare-hero h1{
    font-size:clamp(24px,7.5vw,30px);
  }
  .compare-lead{
    font-size:16px;
  }
  .decision-panel,
  .final-choice{
    grid-template-columns:1fr;
  }
  .client-review{
    grid-template-columns:1fr;
  }
  .client-review-index{
    width:52px;
    height:52px;
  }
  .scenario-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .compare-hero{
    padding-top:calc(var(--header-height) + 30px);
  }
  .compare-hero h1{
    margin-bottom:18px;
    letter-spacing:-.02em;
  }
  .compare-device{
    min-height:355px;
  }
  .compare-card-back{
    width:74%;
    padding:18px;
  }
  .compare-card-main{
    top:44px;
    right:0;
    width:90%;
    min-height:292px;
    padding:18px;
  }
  .compare-choice{
    grid-template-columns:26px minmax(0,1fr) 8px;
    padding:11px 12px;
  }
  .compare-axis{
    margin-top:18px;
  }
  .compare-card-front{
    width:62%;
    padding:15px 17px;
  }
  .compare-facts span{
    max-width:100%;
    overflow:hidden;
  }
  .client-review-title{
    flex-direction:column;
  }
  .client-scope{
    max-width:100%;
    flex-shrink:1;
    white-space:normal;
  }
  .client-review{
    gap:18px;
  }
  .kernel-notes article{
    padding:23px;
  }
  .choice-steps li{
    padding-left:60px;
  }
  .choice-steps li::before{
    width:42px;
    height:42px;
  }
}