/* Plans share a readable comparison grid; GSAP owns each card's entrance. */
.plans {
  --plan-rule: #141c2329;
  position: relative;
  padding-block: clamp(88px, 9vw, 150px);
}

.plans .section-heading { margin: 48px 0 62px; }
.plans .section-heading > p {
  font-size: clamp(16px, 1.3vw, 20px);
  max-width: 270px;
  color: #4d5962;
}
.plans .section-label { font-size: 12px; }
.plans-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  perspective: 1400px;
}
.plan-card {
  --plan-accent: #c9141a;
  --plan-tint: #f400000b;
  --plan-meter: 40%;
  position: relative;
  min-width: 0;
  padding: 27px 23px 24px;
  background: #eeece5;
  border: 1px solid #c7c8c2;
  border-radius: 5px 32px 5px 5px;
  color: var(--ink);
  isolation: isolate;
  transform-origin: 50% 85%;
  transition: border-color .35s, box-shadow .35s;
}
.plan-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 23px;
  right: 36px;
  height: 4px;
  background: var(--plan-accent);
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform .65s var(--ease);
  pointer-events: none;
}
.plan-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--plan-tint), transparent 52%);
  opacity: 0;
  transition: opacity .4s;
  z-index: -1;
  pointer-events: none;
}
.plan-card[data-plan='hogar'] { --plan-meter: 65%; background: #fffdfa; }
.plan-card[data-plan='gamer'] { --plan-meter: 80%; background: #ede5df; }
.plan-card[data-plan='black'] { --plan-meter: 100%; }
.plan-card:hover { transform: none; }
.plan-card:focus-within { border-color: var(--plan-accent); }
.plan-card:focus-within::before { transform: scaleX(1); }
.plan-top {
  gap: 10px;
  min-height: 30px;
  margin-bottom: 27px;
  color: #52606a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
}
.plan-top > span + span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border: 1px solid #141c232b;
  border-radius: 50%;
  color: var(--plan-accent);
  font-size: 21px;
  transition: transform .6s var(--ease), background .3s, color .3s;
}
.plan-card h3 {
  font: 800 clamp(25px, 2.15vw, 34px)/1.05 var(--body);
  letter-spacing: -.06em;
}
.plan-speed {
  position: relative;
  margin-top: 27px;
  font: 800 clamp(58px, 4.8vw, 80px)/1.1 var(--body);
  letter-spacing: -.075em;
  white-space: nowrap;
}
.plan-speed > span {
  display: inline-block;
  margin-left: 8px;
  font: 700 14px/1.2 var(--body);
  letter-spacing: -.02em;
}
.plan-speed::after {
  content: '';
  display: block;
  height: 7px;
  margin-top: 19px;
  background: linear-gradient(to right, var(--plan-accent) var(--plan-meter), #141c2318 var(--plan-meter));
  mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 6px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 6px);
  transform-origin: left;
  transition: filter .4s;
}
.plan-caption {
  min-height: 46px;
  margin: 17px 0 0;
  color: #52606a;
  font-size: 14px;
  line-height: 1.55;
}
.plan-price {
  gap: 6px;
  margin-top: 21px;
  padding: 20px 0;
  border-color: var(--plan-rule);
}
.plan-price strong {
  font: 800 52px/1 var(--body);
  letter-spacing: -.065em;
}
.plan-price > span:first-child { font-size: 20px; font-weight: 600; }
.plan-price > span:last-child { margin-left: 3px; font-size: 14px; color: #52606a; }
.plan-card ul {
  min-height: 202px;
  margin: 25px 0 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
}
.plan-card li { padding-left: 20px; margin-bottom: 10px; }
.plan-card li::before { top: 2px; color: var(--plan-accent); font-size: 12px; font-weight: 800; }
.tv-benefit {
  min-height: 75px;
  padding: 17px 0 20px;
  border-color: var(--plan-rule);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
}
.tv-benefit strong { display: block; font-size: 15px; letter-spacing: -.03em; }
.tv-benefit.muted { display: flex; align-items: center; color: #52606a; }
.plan-button {
  width: 100%;
  min-height: 54px;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #141c234d;
  border-radius: 3px;
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -.02em;
  transition: color .25s, background .25s, border-color .25s;
}
.plan-button:hover { transform: none; border-color: var(--ink); }
.plan-button > span { font-size: 25px; transition: transform .4s var(--ease); }
.plan-button:hover > span, .plan-button:focus-visible > span { transform: translate(3px, -3px); }
.plan-black {
  --plan-accent: #ff6262;
  --plan-rule: #ffffff33;
  --plan-tint: #f4000026;
  background: #141c23;
  border-color: #141c23;
  color: #f8f5ef;
}
.plan-black::before { background: #f40000; transform: scaleX(1); }
.plan-black .plan-top { color: #ff8b8b; }
.plan-black .plan-top > span + span { border-color: #ffffff40; color: #ff6262; }
.plan-black .plan-caption, .plan-black .plan-price > span:last-child { color: #c8d0d5; }
.plan-black .plan-button { background: #c9141a; border-color: #c9141a; color: #fff; }
.plan-black .plan-button:hover { background: #ab1117; border-color: #ab1117; }
.plan-note { margin-top: 28px; max-width: 720px; font-size: 14px; line-height: 1.7; color: #52606a; }

@media (hover: hover) and (pointer: fine) {
  .plan-card:hover { border-color: var(--plan-accent); box-shadow: 0 24px 45px #141c2314; }
  .plan-card:hover::before { transform: scaleX(1); }
  .plan-card:hover::after { opacity: 1; }
  .plan-card:hover .plan-top > span + span { transform: rotate(45deg); background: var(--plan-accent); color: white; border-color: transparent; }
  .plan-card:hover .plan-speed::after { filter: brightness(1.2); }
}

@media (max-width: 1249px) and (min-width: 701px) {
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .plan-card { padding: 32px; }
  .plan-top { font-size: 12px; }
  .plan-card h3 { font-size: 34px; }
  .plan-speed { font-size: clamp(74px, 8vw, 100px); }
  .plan-speed > span { font-size: 16px; }
  .plan-caption { min-height: 24px; font-size: 16px; }
  .plan-card ul { min-height: 202px; font-size: 15px; }
  .tv-benefit { font-size: 15px; }
  .plan-price strong { font-size: 58px; }
}

@media (max-width: 700px) {
  .plans { padding: 80px 6vw; }
  .plans .section-label { font-size: 10px; }
  .plans .section-heading { margin: 35px 0 42px; }
  .plans .section-heading > p { font-size: 16px; max-width: 100%; margin-top: 25px; }
  .plans-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; perspective: none; }
  .plan-card { padding: 28px 25px 26px; border-radius: 4px 30px 4px 4px; }
  .plan-top { font-size: 11px; margin-bottom: 23px; }
  .plan-card h3 { font-size: 32px; }
  .plan-speed { font-size: clamp(64px, 19vw, 84px); margin-top: 23px; }
  .plan-speed > span { font-size: 15px; }
  .plan-caption { min-height: 0; margin-top: 18px; margin-bottom: 0; font-size: 15px; }
  .plan-price { margin-top: 24px; }
  .plan-price strong { font-size: 56px; }
  .plan-price > span:last-child { font-size: 15px; }
  .plan-card ul { min-height: 0; font-size: 15px; margin: 24px 0 20px; }
  .plan-card li { margin-bottom: 9px; }
  .tv-benefit { min-height: 0; font-size: 15px; padding: 18px 0 22px; }
  .plan-button { min-height: 56px; font-size: 15px; padding: 14px 17px; }
  .plan-note { margin-top: 26px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card::before, .plan-card::after, .plan-top > span + span, .plan-speed::after, .plan-button, .plan-button > span { transition: none; }
}