/* OUTBOX • Comparison V1 — cinematic editorial matrix
   Design limited to #outbox-comparison; no global overrides. */
#outbox-comparison.oc-vs {
  --vs-orange:#FBAF2A;
  --vs-green:#36ce55;
  --vs-red:#fb3a43;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(85px,10vw,160px) 0 clamp(90px,10vw,160px);
  background:
    radial-gradient(ellipse 61% 62% at 17% 24%,rgba(78,78,78,.24),transparent 81%),
    radial-gradient(ellipse 46% 62% at 88% 76%,rgba(251,175,42,.055),transparent 80%),
    #202021;
  color:#f8f7f3;
}
#outbox-comparison *,#outbox-comparison *::before,#outbox-comparison *::after{box-sizing:border-box}
#outbox-comparison .oc-vs-ghost{
  position:absolute;inset:auto -2vw -11vw auto;z-index:-1;
  font:900 clamp(250px,42vw,710px)/.65 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:-.08em;color:rgba(255,255,255,.026);
  user-select:none;pointer-events:none;
}
#outbox-comparison .oc-vs-container{position:relative;max-width:1450px;margin:0 auto}
#outbox-comparison .oc-vs-kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 24px;
  color:var(--vs-orange);
  font:800 11px/1.4 'Space Grotesk',sans-serif;
  letter-spacing:.23em;text-transform:uppercase;
}
#outbox-comparison .oc-vs-kicker::before{content:"";width:29px;height:2px;background:currentColor}
#outbox-comparison .oc-vs-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,3.2vw,49px);
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  background:linear-gradient(125deg,rgba(64,64,64,.45),rgba(30,30,31,.80) 48%,rgba(18,18,19,.95));
  box-shadow:0 40px 85px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.065);
}
#outbox-comparison .oc-vs-panel::before{
  content:"";position:absolute;top:0;left:5%;width:90%;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(251,175,42,.77),transparent);
}
#outbox-comparison .oc-vs-header{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(135px,.66fr) minmax(135px,.66fr);
  align-items:end;gap:clamp(14px,2vw,26px);
  padding:10px clamp(14px,2vw,27px) 30px;
}
#outbox-comparison .oc-vs-heading{
  min-width:0;
  max-width:610px;
  margin:0;
  color:var(--vs-orange);
  font:900 clamp(44px,4.2vw,72px)/.94 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:-.012em;
  text-transform:uppercase;
}
#outbox-comparison .oc-vs-heading span{display:block}
#outbox-comparison .oc-vs-colhead{
  margin:0 0 3px;
  text-align:center;
  font:900 clamp(23px,2.25vw,35px)/1.04 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:.007em;
  text-transform:uppercase;
  white-space:normal;
}
#outbox-comparison .oc-vs-colhead.oc-vs-outbox{color:var(--vs-green)}
#outbox-comparison .oc-vs-colhead.oc-vs-other{color:var(--vs-red)}
#outbox-comparison .oc-vs-track{
  width:100%;height:1px;
  margin-bottom:clamp(22px,2.8vw,42px);
  background:rgba(255,255,255,.13);
  overflow:hidden;
}
#outbox-comparison .oc-vs-track span{
  display:block;width:100%;height:100%;transform:scaleX(1);transform-origin:left center;
  background:var(--vs-orange);
}
#outbox-comparison .oc-vs-rows{
  display:grid;gap:13px;list-style:none;margin:0;padding:0;
}
#outbox-comparison .oc-vs-row{
  --vs-pointer-x:50%;
  --vs-pointer-y:50%;
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(135px,.66fr) minmax(135px,.66fr);
  align-items:center;gap:clamp(14px,2vw,26px);
  min-height:clamp(92px,8vw,114px);
  padding:16px clamp(14px,2vw,27px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:15px;
  background:linear-gradient(103deg,rgba(76,76,76,.82),rgba(58,58,58,.66));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  transition:border-color .32s cubic-bezier(.2,.8,.2,1),background .35s ease,box-shadow .35s ease,transform .36s cubic-bezier(.2,.8,.2,1);
}
#outbox-comparison .oc-vs-row::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(390px circle at var(--vs-pointer-x) var(--vs-pointer-y),rgba(251,175,42,.11),transparent 75%);
  opacity:0;transition:opacity .35s ease;
}
@media(hover:hover) and (pointer:fine){
  #outbox-comparison .oc-vs-row:hover{
    border-color:rgba(251,175,42,.48);
    background:linear-gradient(103deg,rgba(85,83,80,.9),rgba(60,59,58,.78));
    box-shadow:0 13px 28px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.10);
    transform:translateY(-3px);
  }
  #outbox-comparison .oc-vs-row:hover::before{opacity:1}
  #outbox-comparison .oc-vs-row:hover .oc-vs-status-icon{transform:scale(1.13) rotate(-7deg)}
}
#outbox-comparison .oc-vs-feature{
  min-width:0;display:flex;align-items:center;gap:clamp(12px,1.8vw,22px);
  font:500 clamp(14px,1.12vw,18px)/1.45 'DM Sans',sans-serif;
  color:#f5f3ef;
}
#outbox-comparison .oc-vs-number{
  flex:0 0 auto;
  color:rgba(251,175,42,.75);
  font:700 12px/1 'Space Grotesk',sans-serif;
  letter-spacing:.06em;
}
#outbox-comparison .oc-vs-name{display:inline-block;max-width:37ch}
#outbox-comparison .oc-vs-status{
  display:flex;align-items:center;justify-content:center;min-width:0;
}
#outbox-comparison .oc-vs-status-icon{
  width:37px;height:37px;display:block;
  fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .33s cubic-bezier(.2,.75,.2,1);
}
#outbox-comparison .oc-vs-status.yes{color:var(--vs-green)}
#outbox-comparison .oc-vs-status.no{color:var(--vs-red)}
#outbox-comparison .oc-vs-status .oc-vs-mobile-label{display:none}
#outbox-comparison .oc-vs-foot{
  margin:23px 5px 0;
  display:flex;justify-content:space-between;align-items:center;
  color:#a5a4a0;
  font:700 10px/1.4 'Space Grotesk',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
}
#outbox-comparison .oc-vs-foot em{
  display:block;flex:1;height:1px;max-width:120px;margin:0 13px;
  background:linear-gradient(90deg,rgba(251,175,42,.60),transparent);
}
@media(max-width:1050px){
  #outbox-comparison .oc-vs-header,
  #outbox-comparison .oc-vs-row{grid-template-columns:minmax(0,1.3fr) minmax(112px,.60fr) minmax(112px,.60fr)}
  #outbox-comparison .oc-vs-panel{padding:26px}
  #outbox-comparison .oc-vs-heading{font-size:clamp(46px,5vw,63px)}
}
@media(max-width:700px){
  #outbox-comparison{padding:80px 0 92px}
  #outbox-comparison .oc-vs-panel{padding:clamp(17px,4vw,26px);border-radius:17px}
  #outbox-comparison .oc-vs-header{grid-template-columns:1fr;padding:10px 5px 21px}
  #outbox-comparison .oc-vs-heading{font-size:clamp(48px,9vw,72px)}
  #outbox-comparison .oc-vs-colhead{display:none}
  #outbox-comparison .oc-vs-row{
    grid-template-columns:1fr 1fr;
    gap:17px 8px;
    min-height:0;
    padding:19px 20px;
  }
  #outbox-comparison .oc-vs-feature{grid-column:1/-1;gap:11px;font-size:15px}
  #outbox-comparison .oc-vs-number{font-size:11px}
  #outbox-comparison .oc-vs-status{display:flex;flex-direction:row;gap:9px;justify-content:flex-start}
  #outbox-comparison .oc-vs-status.yes{padding-left:5px}
  #outbox-comparison .oc-vs-status.no{padding-left:5px}
  #outbox-comparison .oc-vs-status-icon{width:24px;height:24px;flex:0 0 24px}
  #outbox-comparison .oc-vs-status .oc-vs-mobile-label{
    display:block;
    font:800 11px/1.25 'Space Grotesk',sans-serif;
    letter-spacing:.035em;text-transform:uppercase;
  }
}
@media(max-width:390px){
  #outbox-comparison .oc-vs-row{padding:17px 12px}
  #outbox-comparison .oc-vs-status{gap:6px}
  #outbox-comparison .oc-vs-status .oc-vs-mobile-label{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  #outbox-comparison .oc-vs-row,
  #outbox-comparison .oc-vs-row::before,
  #outbox-comparison .oc-vs-status-icon{transition:none!important;transform:none!important}
  #outbox-comparison .oc-vs-track span{transform:none!important}
}