.comparison-page {
  --body: "Onest", "Avenir Next", sans-serif;
  background: oklch(96.8% .012 190);
}

.comparison-page h1,
.comparison-page h2,
.comparison-page h3 { font-family: var(--display); }

.comparison-page a:focus-visible,
.comparison-page button:focus-visible,
.comparison-page input:focus-visible,
.comparison-page summary:focus-visible {
  outline: 3px solid var(--lime-bright);
  outline-offset: 4px;
}

.compare-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid oklch(84% .02 205);
  background: oklch(98% .006 190);
}

.compare-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .7;
  background:
    linear-gradient(90deg, transparent 0 49.9%, oklch(83% .02 205 / .7) 50% 50.05%, transparent 50.15%),
    radial-gradient(circle at 94% 20%, oklch(76% .15 132 / .19), transparent 22%),
    linear-gradient(108deg, transparent 55%, oklch(96% .025 225));
}

.compare-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(500px, 1.07fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  min-height: 690px;
}

.compare-hero-copy { padding: 104px 0 112px; }

.compare-hero-copy h1 {
  max-width: 660px;
  margin: 22px 0 25px;
  font-size: clamp(47px, 5.35vw, 76px);
  line-height: .98;
  letter-spacing: -.078em;
}

.compare-hero-copy h1::after {
  display: block;
  width: 76px;
  height: 6px;
  margin-top: 27px;
  content: "";
  background: var(--lime);
}

.compare-hero-copy > p {
  max-width: 530px;
  color: oklch(45% .035 235);
  font-size: 16px;
  line-height: 1.72;
}

.compare-hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 35px; }
.compare-microcopy { display: flex; align-items: center; gap: 9px; margin-top: 27px; color: oklch(48% .025 222); font-size: 11px; }

.compare-hero-visual {
  position: relative;
  min-height: 570px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, oklch(18% .06 248) 0%, oklch(13% .035 237) 58%, oklch(21% .055 205) 100%);
  box-shadow: 22px 30px 70px oklch(25% .04 235 / .19);
}

.compare-hero-visual::before,
.compare-hero-visual::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.compare-hero-visual::before {
  inset: 17px;
  border: 1px solid oklch(80% .03 185 / .22);
  background-image: linear-gradient(oklch(80% .03 185 / .055) 1px, transparent 1px), linear-gradient(90deg, oklch(80% .03 185 / .055) 1px, transparent 1px);
  background-size: 30px 30px;
}

.compare-hero-visual::after {
  top: -20%;
  right: -17%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid oklch(76% .15 132 / .35);
  border-radius: 50%;
  box-shadow: 0 0 0 42px oklch(76% .15 132 / .045), 0 0 0 86px oklch(76% .15 132 / .03);
}

.compare-hero-visual img {
  position: absolute;
  z-index: 1;
  right: -1%;
  bottom: -7%;
  width: min(108%, 670px);
  height: auto;
  filter: drop-shadow(0 28px 24px oklch(8% .02 240 / .38));
}

.hero-art-label {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  color: oklch(90% .018 190);
  border: 1px solid oklch(83% .03 190 / .22);
  background: oklch(15% .04 238 / .84);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-art-label-top { top: 32px; left: 32px; }
.hero-art-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime-bright); box-shadow: 0 0 0 5px oklch(76% .15 132 / .14); }

.compare-hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 26px;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  color: oklch(88% .018 190);
  border-left: 2px solid var(--lime-bright);
  background: oklch(15% .04 238 / .88);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.compare-hero-visual figcaption strong { color: var(--white); font-size: 13px; letter-spacing: -.02em; text-transform: none; }

.context-section { background: oklch(95.5% .016 190); }
.context-grid { display: grid; grid-template-columns: .75fr .9fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.context-lead h2 { max-width: 410px; margin: 17px 0 0; font-size: clamp(35px, 3.7vw, 51px); line-height: 1.02; letter-spacing: -.07em; }

.context-image { position: relative; margin: 4px 0 0; }
.context-image::before { position: absolute; z-index: 0; top: -16px; left: -16px; width: 80px; height: 80px; content: ""; background: var(--lime-bright); }
.context-image img { position: relative; z-index: 1; display: block; width: 100%; height: clamp(300px, 22vw, 400px); object-fit: cover; object-position: 76% 50%; box-shadow: 14px 17px 0 oklch(83% .035 195); }
.context-image figcaption { position: relative; z-index: 2; max-width: 245px; margin: -44px 0 0 18px; padding: 13px 15px; color: var(--white); background: var(--ink); font-size: 11px; line-height: 1.45; }

.context-copy { padding-top: 7px; }
.context-copy > p { max-width: 495px; margin: 0; color: oklch(45% .035 235); font-size: 15px; line-height: 1.78; }
.context-signals { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid oklch(80% .02 200); }
.context-signals > div { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid oklch(80% .02 200); }
.signal-index { grid-row: span 2; color: var(--blue); font-family: var(--display); font-size: 12px; font-weight: 800; }.signal-index-warm { color: oklch(61% .1 55); }
.context-signals strong { font-family: var(--display); font-size: 16px; letter-spacing: -.03em; }.context-signals small { color: var(--muted); font-size: 12px; line-height: 1.5; }

.comparison-section { position: relative; overflow: hidden; color: var(--white); background: var(--ink); }
.comparison-section::before { position: absolute; top: 0; right: -8%; width: 42%; aspect-ratio: 1; content: ""; border: 1px solid oklch(80% .03 190 / .13); border-radius: 50%; box-shadow: 0 0 0 80px oklch(80% .03 190 / .025); }
.comparison-section .shell { position: relative; }.comparison-section .section-heading h2 { color: var(--white); }.comparison-section .heading-with-aside > p { color: oklch(75% .025 205); }
.comparison-table-wrap { overflow-x: auto; border: 1px solid oklch(80% .03 190 / .24); background: oklch(15% .035 235); }
.comparison-table { width: 100%; min-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.comparison-table th, .comparison-table td { padding: 22px 23px; border-bottom: 1px solid oklch(80% .03 190 / .14); font-size: 12px; line-height: 1.45; text-align: left; vertical-align: top; }
.comparison-table thead th { color: oklch(76% .025 205); background: oklch(22% .03 235); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.comparison-table thead th:nth-child(2) { color: var(--lime-bright); }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }.comparison-table tbody th { width: 20%; color: oklch(91% .012 200); font-weight: 700; }.comparison-table td { width: 40%; color: oklch(76% .025 205); border-left: 1px solid oklch(80% .03 190 / .12); }.comparison-table td:nth-child(2) { color: oklch(94% .012 195); background: oklch(35% .105 248 / .42); }.comparison-table td strong { display: block; color: inherit; font-family: var(--display); font-size: 13px; letter-spacing: -.02em; }.comparison-table td small { display: block; margin-top: 6px; color: oklch(70% .025 205); font-size: 10px; }.table-brand-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--lime-bright); }.comparison-note { margin: 16px 0 0; color: oklch(65% .025 205); font-size: 10px; }

.advantages-section { background: var(--white); }.advantages-section .section-heading { margin-bottom: 47px; }.advantages-section .section-heading h2 { max-width: 660px; margin-top: 16px; }
.advantage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }.advantage-item { position: relative; min-height: 295px; padding: 23px 25px 20px 0; border-right: 1px solid var(--line); }.advantage-item:not(:first-child) { padding-left: 25px; }.advantage-item:last-child { border-right: 0; }.advantage-number { color: var(--lime); font-family: var(--display); font-size: 11px; font-weight: 800; }.advantage-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: 29px 0 24px; color: var(--white); background: var(--blue); font-family: var(--display); font-size: 17px; font-weight: 800; }.icon-weather { color: var(--ink); background: var(--lime-bright); }.icon-game { background: var(--ink); }.icon-human { background: oklch(66% .04 210); }.advantage-item h3 { max-width: 210px; margin: 0 0 11px; font-size: 18px; line-height: 1.08; letter-spacing: -.04em; }.advantage-item p { max-width: 230px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.field-note { display: grid; grid-template-columns: minmax(280px, .76fr) 1.24fr; gap: clamp(36px, 7vw, 112px); align-items: center; margin-top: 88px; padding: 34px 0 0; border-top: 1px solid var(--line); }.field-note figure { position: relative; width: min(100%, 410px); height: clamp(300px, 21vw, 390px); margin: 0; overflow: hidden; }.field-note figure::after { position: absolute; z-index: 0; right: -22px; bottom: -22px; width: 38%; height: 38%; content: ""; background: var(--lime-bright); }.field-note img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 48%; }.field-note-copy { max-width: 540px; }.field-note-index { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .14em; }.field-note h3 { max-width: 530px; margin: 17px 0 17px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.03; letter-spacing: -.065em; }.field-note p { max-width: 480px; margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.plans-compare-section { background: oklch(93.5% .018 190); }.plans-compare-section .section-heading { margin-bottom: 45px; }.plans-compare-section .section-heading h2 { max-width: 540px; }.plans-compare-section .heading-with-aside > p { max-width: 350px; }.compare-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.compare-plan { min-height: 360px; display: flex; flex-direction: column; padding: 28px; border: 1px solid oklch(82% .02 195); background: var(--white); }.compare-plan-featured { color: var(--white); border-color: var(--blue); background: var(--blue); box-shadow: 0 22px 50px oklch(38% .11 248 / .25); transform: translateY(-14px); }.compare-plan-tag { width: fit-content; padding: 6px 8px; color: var(--muted); border: 1px solid var(--line); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.compare-plan-featured .compare-plan-tag { color: var(--ink); border-color: var(--lime-bright); background: var(--lime-bright); }.compare-plan h3 { margin: 45px 0 6px; font-size: 58px; line-height: .88; letter-spacing: -.08em; }.compare-plan h3 small { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.compare-plan > p { min-height: 38px; color: var(--muted); font-size: 12px; line-height: 1.5; }.compare-plan-featured > p { color: oklch(85% .04 235); }.compare-price { display: flex; align-items: flex-start; margin: 24px 0; }.compare-price sup { margin: 7px 5px 0 0; font-size: 12px; font-weight: 800; }.compare-price strong { font-family: var(--display); font-size: 43px; line-height: .85; letter-spacing: -.08em; }.compare-price > span { padding-left: 5px; font-size: 16px; font-weight: 700; line-height: .95; }.compare-price small { color: var(--muted); font-size: 9px; font-weight: 500; }.compare-plan-featured .compare-price small { color: oklch(85% .04 235); }.compare-plan .button { width: 100%; margin-top: auto; }.plans-compare-section .plans-footnote { margin-bottom: 0; }

.social-section { background: var(--white); }.social-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }.social-lead h2 { max-width: 450px; margin: 17px 0 35px; font-size: clamp(35px, 4vw, 50px); line-height: 1.03; letter-spacing: -.065em; }.social-rating { display: flex; align-items: center; gap: 13px; }.social-rating strong { font-family: var(--display); font-size: 42px; letter-spacing: -.08em; }.social-rating span { color: var(--lime); font-size: 16px; letter-spacing: .1em; }.social-rating small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: 0; }.quote-list { border-top: 1px solid var(--line); }.quote-list blockquote { margin: 0; padding: 23px 0; border-bottom: 1px solid var(--line); }.quote-list p { max-width: 600px; margin: 0 0 10px; color: var(--ink-soft); font-family: var(--display); font-size: 17px; line-height: 1.35; letter-spacing: -.035em; }.quote-list cite { color: var(--muted); font-size: 10px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

.faq-section { background: oklch(95.5% .016 190); }.faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 105px; }.faq-grid h2 { margin: 17px 0 16px; font-size: clamp(35px, 4vw, 50px); line-height: 1.03; letter-spacing: -.06em; }.faq-grid > div:first-child > p { max-width: 320px; margin-bottom: 27px; color: var(--muted); font-size: 13px; line-height: 1.6; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { padding: 20px 0; border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; color: var(--blue); font-family: var(--body); font-size: 20px; font-weight: 400; }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { max-width: 650px; margin: 14px 38px 3px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.compare-cta-section { position: relative; overflow: hidden; color: var(--white); background: var(--ink); }.compare-cta-section::after { position: absolute; right: -6%; bottom: -62%; width: 510px; aspect-ratio: 1; content: ""; border: 1px solid oklch(82% .035 190 / .25); border-radius: 50%; box-shadow: 0 0 0 50px oklch(82% .035 190 / .04); }.compare-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; padding-top: 75px; padding-bottom: 75px; }.compare-cta-inner h2 { margin: 16px 0 13px; font-size: clamp(34px, 4vw, 50px); line-height: 1.02; letter-spacing: -.06em; }.compare-cta-inner > div > p { max-width: 430px; margin: 0; color: oklch(76% .025 205); font-size: 14px; line-height: 1.6; }.compare-cta-action { justify-self: start; }.compare-cta-action .button { min-width: 255px; }.compare-cta-action p { margin: 15px 0 0; color: oklch(76% .025 205); font-size: 11px; line-height: 1.5; }


@media (max-width: 1040px) {
  .compare-hero-grid { grid-template-columns: .88fr 1.12fr; gap: 36px; }.compare-hero-visual { min-height: 500px; }.context-grid { grid-template-columns: .75fr 1.05fr; }.context-image { order: 3; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, .62fr) 1fr; gap: 24px; align-items: end; max-width: 700px; }.context-image img { height: clamp(250px, 35vw, 360px); object-position: 72% 50%; }.context-image figcaption { margin: 0 0 26px -80px; }.context-copy { grid-column: 2; }
}

@media (max-width: 980px) {
  .compare-hero-grid { grid-template-columns: 1fr; gap: 2px; min-height: auto; }.compare-hero-copy { padding: 78px 0 44px; }.compare-hero-visual { width: min(100%, 700px); min-height: 510px; margin: 0 auto 76px; }.compare-hero-visual img { right: 3%; width: min(100%, 620px); }.context-grid, .social-grid, .faq-grid, .compare-cta-inner { grid-template-columns: 1fr; gap: 48px; }.context-copy { grid-column: auto; }.context-image { grid-column: auto; grid-template-columns: minmax(230px, .7fr) 1fr; max-width: 650px; }.advantage-grid { grid-template-columns: 1fr 1fr; }.advantage-item:nth-child(2) { border-right: 0; }.advantage-item:nth-child(3), .advantage-item:nth-child(4) { border-top: 1px solid var(--line); }.advantage-item:nth-child(3) { padding-left: 0; }.field-note { grid-template-columns: minmax(220px, .7fr) 1fr; gap: 55px; }.compare-plans-grid { grid-template-columns: 1fr; max-width: 510px; margin: 0 auto; }.compare-plan-featured { order: -1; transform: none; }.compare-cta-inner { padding-top: 70px; padding-bottom: 70px; }.compare-cta-action { justify-self: stretch; }.compare-cta-action .button { min-width: 0; }
}

@media (max-width: 560px) {
  .comparison-page .topline { font-size: 9px; }.compare-hero-copy { padding: 62px 0 35px; }.compare-hero-copy h1 { font-size: clamp(42px, 12.5vw, 60px); }.compare-hero-copy > p { font-size: 14px; }.compare-hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.compare-hero-actions .button { width: 100%; }.compare-microcopy { align-items: flex-start; font-size: 10px; line-height: 1.45; }.compare-hero-visual { min-height: 365px; margin-bottom: 58px; }.compare-hero-visual::before { inset: 10px; background-size: 20px 20px; }.compare-hero-visual::after { width: 58%; }.compare-hero-visual img { right: -3%; bottom: -4%; width: 106%; }.hero-art-label-top { top: 19px; left: 19px; }.compare-hero-visual figcaption { right: 14px; bottom: 14px; padding: 10px 12px; font-size: 8px; }.compare-hero-visual figcaption strong { font-size: 11px; }.context-grid { gap: 34px; }.context-lead h2, .section-heading h2, .social-lead h2, .faq-grid h2, .compare-cta-inner h2 { font-size: 37px; }.context-image { display: block; width: calc(100% - 20px); margin-left: 0; }.context-image img { height: clamp(295px, 90vw, 360px); object-position: 76% 50%; }.context-image figcaption { margin: -34px 0 0 14px; }.comparison-table th, .comparison-table td { padding: 16px 13px; font-size: 11px; }.comparison-table tbody th { width: 23%; }.advantage-grid { grid-template-columns: 1fr; }.advantage-item, .advantage-item:not(:first-child) { min-height: 0; padding: 25px 0; border-right: 0; border-top: 1px solid var(--line); }.advantage-item:first-child { border-top: 0; }.advantage-item h3 { max-width: none; }.advantage-item p { max-width: 350px; }.field-note { grid-template-columns: 1fr; gap: 34px; margin-top: 64px; }.field-note figure { max-width: min(100%, 360px); height: clamp(280px, 80vw, 340px); }.field-note h3 { font-size: 34px; }.compare-plan { min-height: 0; padding: 24px; }.compare-plan h3 { margin-top: 34px; font-size: 53px; }.quote-list p { font-size: 15px; }.faq-list summary { font-size: 13px; }.compare-cta-action .button { width: 100%; }.compare-cta-action p { max-width: 270px; }.compare-form, .compare-form-feedback { display: none; }
}