/* See ./comparison-chart.md for the layout strategy, typography design-lock, and CTA-height rationale. */

.comparison-chart {
  --cc-toggle-track-bg: rgb(227 227 226 / 50%);
  --cc-save-bg: #e2dbe9;
  --cc-teal-bg: #f5fafa;
  --cc-comprehensive-bg: rgb(232 225 207 / 80%);

  /* Outline-pill hover fill (near-black, matches norton.com). See .md "Component-scoped variables". */
  --cc-hover-fill: #161616;

  /* Brand CTA gradient. Stops track brand-mid → brand-dark (LifeLock blue). See .md "Component-scoped variables". */
  --cc-teal-gradient: linear-gradient(178.9deg, #017a96 14.826%, #00445a 173.29%);

  /* In-card horizontal divider (header -> features rule). Figma renders brand-dark @ 8% opacity; tracked via color-mix so the divider follows --ll-color-text-primary if it ever moves. See .md. */
  --cc-card-divider: color-mix(in srgb, var(--ll-color-text-primary) 8%, transparent);
}

/* Section rhythm baseline (root padding). Non-uniform child margins live below the base declarations of `.__intro`, `.__toggle`, `.__plans`, `.__footer` to satisfy Stylelint no-descending-specificity. See .md "Section rhythm". */
.comparison-chart__root {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--ll-space-9); /* SM: 40 */
}

/* --- Intro --- SM: left-aligned, 12 gap (Figma node 24876:14530). MD+ recenters (see @media 768). */
.comparison-chart__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ll-space-4);
  text-align: left;
}

/* Heading typography + color per .md design-lock (Figma node 23015:12988). */
.comparison-chart__heading {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
}

/* Description typography per .md "Typography design-lock" (Figma node 23015:12990). */
.comparison-chart__description {
  margin: 0;
  max-width: 640px; /* Comfortable measure for supporting copy; heading spans full width. */
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  font-weight: var(--ll-text-body-sm-weight);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
}

/* --- Billing toggle --- Wrapper has 0 padding per Figma (buttons fill the track). */
.comparison-chart__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: var(--ll-radius-pill);
  background: var(--cc-toggle-track-bg);
}

/* Sliding pill. Runtime measures the active chip and adds `--thumb-ready`. See .md. */
.comparison-chart__toggle-thumb {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--ll-radius-pill);
  background: var(--ll-color-bg-inverse);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--ll-motion-interactive-state-duration, 200ms)
      var(--ll-motion-interactive-state-easing, ease),
    width var(--ll-motion-interactive-state-duration, 200ms)
      var(--ll-motion-interactive-state-easing, ease);
}

.comparison-chart__toggle--thumb-ready .comparison-chart__toggle-thumb {
  opacity: 1;
}

/* Chip typography per .md "Typography design-lock" (Figma node 23015:12996). SM: 36h, 16 inline, 12 gap. MD+: 42h, 24 inline, 16 gap. */
.comparison-chart__chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-4);
  min-height: 36px;
  padding: var(--ll-space-3) var(--ll-space-5);
  border: 0;
  border-radius: var(--ll-radius-pill);
  background: transparent;
  color: var(--ll-color-text-primary);
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  cursor: pointer;
  transition: color var(--ll-motion-interactive-state-duration, 200ms)
    var(--ll-motion-interactive-state-easing, ease);
}

/* Save-badge shrinks the trailing padding (badge has its own inner padding). See .md "Billing toggle". */
.comparison-chart__chip:has(.comparison-chart__save) {
  padding-inline-end: var(--ll-space-3);
}

.comparison-chart__chip[aria-pressed="true"] {
  background: var(--ll-color-bg-inverse);
  color: var(--ll-color-text-inverse);
}

/* Drop the per-chip fallback fill once the thumb is driving; avoids doubling during the slide. */
.comparison-chart__toggle--thumb-ready .comparison-chart__chip[aria-pressed="true"] {
  background: transparent;
}

/* Save-badge typography per .md "Typography design-lock" (Figma node 23015:12998). SM: 2/8 pad + 12/16 (raw px - no --ll-text-* semantic pairs 12 size w/ 16 line-height + semibold). MD+: 4/12 pad + body-sm 14/22. */
.comparison-chart__save {
  padding: var(--ll-space-1) var(--ll-space-3);
  border-radius: var(--ll-radius-pill);
  background: var(--cc-save-bg);
  color: var(--ll-color-text-primary);
  font-size: 12px;
  font-weight: var(--ds-font-weight-semibold);
  line-height: 16px;
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  white-space: nowrap;
}

/* Tighter shimmer for the percent-digit dp-element (pill would blow past the resolved "22%"). See .md. */
.comparison-chart__save .dp-element--loading {
  min-width: 28px;
}

/* --- Plans --- Stacked-gap: 20 SM / 24 MD / 32 LG (horizontal) per Figma. */
.comparison-chart__plans {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-6);
  width: 100%;
}

/* Plan card padding schedule (16 / 24 / 32) + constant chrome. Radius: --ll-radius-card (8) matches Figma border-radius-l. Teal-themed variant overrides border + bg. See .md. */
.comparison-chart__plan {
  display: flex;
  flex-direction: column;
  padding: var(--ll-space-5);
  border: 1px solid var(--ll-color-border-default);
  border-radius: var(--ll-radius-card);
  background: var(--ll-color-bg-default);
  box-shadow: var(--ll-shadow-resting);
  transition:
    border-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    box-shadow var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

/* Teal-themed card border = brand-mid teal (Color/Content/brand), via --ll-color-border-brand. See .md. */
.comparison-chart__plan--teal {
  border: 2px solid var(--ll-color-border-brand);
  background: var(--cc-teal-bg);
}

/* Card hover: brand border + raised shadow. Gated to fine/hover pointers. See .md. */
@media (hover: hover) {
  .comparison-chart__plan:hover {
    border-color: var(--ll-color-border-brand);
    box-shadow: var(--ll-shadow-floating);
  }
}

/* Summary flex-gap: 12 SM / 16 MD+ (product→positioning). __pricing adds a margin-top so the paragraph→pricing gap hits Figma (16 SM / 24 MD+). See .md. */
.comparison-chart__summary {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
}

/* Fallback wrap. See .md "Small-desktop badge wrap". */
.comparison-chart__plan-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-3);
}

/* Plan-name typography per .md "Typography design-lock" (Figma node 23015:13007). */
.comparison-chart__plan-name {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h7-family);
  font-size: var(--ll-text-h7-size);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ll-text-h7-line-height);
  letter-spacing: var(--ll-text-h7-letter-spacing);
}

/* Plan-badge. See .md "Typography design-lock" and "Mobile badge padding". */
.comparison-chart__plan-badge {
  flex: 0 0 auto;
  padding: var(--ll-space-1) var(--ll-space-3);
  border-radius: 4px;
  font-family: var(--ll-text-tagline-sm-family);
  font-size: var(--ll-text-label-size);
  font-weight: var(--ll-text-tagline-sm-weight);
  line-height: var(--ll-text-tagline-sm-line-height);
  letter-spacing: var(--ll-text-label-letter-spacing);
  white-space: nowrap;
}

/* LG-only (small desktop). See .md "Small-desktop badge wrap". */
@media (width >= 1024px) and (width <= 1439px) {
  .comparison-chart__plan-header {
    flex-wrap: nowrap;
  }

  .comparison-chart__plan-name {
    flex-shrink: 0;
  }

  .comparison-chart__plan-badge {
    box-sizing: border-box;
    width: min-content;
    min-width: 0;
    white-space: normal;
  }
}

.comparison-chart__plan-badge--popular {
  background: var(--ll-color-bg-inverse);
  color: var(--ll-color-text-inverse);
}

.comparison-chart__plan-badge--comprehensive {
  background: var(--cc-comprehensive-bg);
  color: var(--ll-color-text-secondary);
}

/* Positioning typography. Color splits per theme: default = iota (Figma node 23015:13011/13102); teal override below. The 2-line reserve is LG-only (see @media 1024) — at SM/MD cards stack so no cross-card price alignment is needed and Figma paragraphs are 1 line. See .md "Positioning 2-line reserve". */
.comparison-chart__positioning {
  margin: 0;
  color: var(--ll-color-highlight-iota);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
}

/* Teal card promotes positioning to Color/Content/secondary (Figma node 23015:13036) since the tint bg gives it AA-safe contrast; default cards on white stay at iota per Figma. */
.comparison-chart__plan--teal .comparison-chart__positioning {
  color: var(--ll-color-text-secondary);
}

/* --- Pricing --- margin-top adds +4 SM / +8 MD+ so paragraph→pricing = 16 SM / 24 MD+ (see .md "Card summary spacing"). */
.comparison-chart__pricing {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
  margin-top: var(--ll-space-2);
}

.comparison-chart__price {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
}

.comparison-chart__price--monthly {
  display: none;
}

.comparison-chart__root[data-billing="monthly"] .comparison-chart__price--annual {
  display: none;
}

.comparison-chart__root[data-billing="monthly"] .comparison-chart__price--monthly {
  display: flex;
}

/* Price-block container. Typography per .md "Typography design-lock" (Figma node 23015:13018). */
.comparison-chart__price-value {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h3-family);
  font-size: 32px;
  font-weight: var(--ds-font-weight-semibold);
  line-height: 40px;
  letter-spacing: var(--ll-text-h3-letter-spacing);
}

.comparison-chart__price-value p {
  display: inline;
  margin: 0;
}

/* Currency vs. suffix + the two authoring shapes (static <sub>, dynamic dp-*). See .md "Price block DOM contract". */
.comparison-chart__price-value :is(.dp-currency, .dp-suffix),
.comparison-chart__price-value > p > sub {
  margin: 0 var(--ll-space-1);
  vertical-align: baseline;
  color: var(--ll-color-text-muted);
  font-family: var(--ll-text-body-sm-family);
  font-weight: var(--ll-text-body-sm-weight);
  letter-spacing: normal;
}

/* Currency typography per .md "Typography design-lock" (Figma node 23015:13016). */
.comparison-chart__price-value .dp-currency,
.comparison-chart__price-value > p > sub:first-of-type {
  font-size: var(--ll-text-body-lg-size);
  line-height: var(--ll-text-body-lg-line-height);
}

/* Suffix typography per .md "Typography design-lock" (Figma node 23015:13020). */
.comparison-chart__price-value .dp-suffix,
.comparison-chart__price-value > p > sub:not(:first-of-type) {
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
}

/* Authored MSRP (struck through, right of the price). Typography per .md "Typography design-lock". */
.comparison-chart__price-value :is(del, s, strike) {
  margin-left: var(--ll-space-3);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ll-text-body-xs-weight);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: normal;
  text-decoration: line-through;
}

/* Pre-hydration dp-link anchors take the surrounding price text's look so
 * the initial paint matches the post-hydration dp-element render.
 * text-decoration is pinned to none explicitly (price text is never
 * underlined) so the global :where(a:any-link) underline default can't
 * leak in. See .md. */
.comparison-chart__price a {
  color: inherit;
  text-decoration: none;
}

/* Pay-today + renewal lines in both swap variants (annualPrice P2 for the
 * default variant; annualPriceSaleLt P2 + P3 for the has-promo variant).
 * Both stack under the mep-annual `__price-value` in whichever variant
 * wins. Typography per .md "Typography design-lock" (Figma nodes
 * 23015:13021 / 23015:13046 / 23015:13112 -> Color/Highlight/iota-base;
 * body-xs at SM/MD, body-sm at LG+). Pay-today and renewal share the same
 * muted treatment so the lines read as a paired secondary message under
 * the mep-annual emphasis. */
.comparison-chart__price-pay-today,
.comparison-chart__renewal {
  margin: 0;
  color: var(--ll-color-highlight-iota);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
}

.comparison-chart__price-pay-today p,
.comparison-chart__renewal p {
  margin: 0;
}

/* Inline currency/suffix inside the muted pay-today + renewal lines inherit
 * the parent's body-xs treatment (no separate typography bump). Kept
 * separate from `.__price-value` currency rules so the big-price emphasis
 * doesn't leak in. */
.comparison-chart__price-pay-today :is(.dp-currency, .dp-suffix),
.comparison-chart__renewal :is(.dp-currency, .dp-suffix) {
  font: inherit;
  color: inherit;
  vertical-align: baseline;
}

/* Pre-hydration dp-link anchors take the surrounding price text's look so
 * the initial paint matches the post-hydration dp-element render. Underline
 * pinned to none explicitly (price text is never underlined) to shield against
 * the global :where(a:any-link) underline default. */
.comparison-chart__price-pay-today a,
.comparison-chart__renewal a {
  color: inherit;
  text-decoration: none;
}

/* Annual price swap wrapper. See .md "Annual price swap block". `display:
 * contents` keeps the flex layout flat - the wrapper (and each
 * `__price-variant` child) is transparent to `.__price`'s flex column so
 * each variant's `__price-value` + `__price-pay-today` (+ optional
 * `__renewal`) stack in the parent's flow. `[hidden]` on the losing
 * variant removes it per the HTML spec; dp-pipe#applyPriceConditions
 * toggles exactly one winner per wrapper. */
.comparison-chart__price-conditions,
.comparison-chart__price-variant {
  display: contents;
}

.comparison-chart__price-variant[hidden] {
  display: none;
}

/* --- Disclosure (accordion control, <1024 only) --- Typography per .md (Figma nodes 23015:13024 / 23015:13115 -> Color/Highlight/theta-base). */
.comparison-chart__disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-3);
  width: 100%;

  /* +4 SM on top of the 12 summary flex-gap = 16 pricing→link (Figma 24876:14566). MD bumps to +8 (=24). Mirrors __pricing's margin-top offset. */
  margin-top: var(--ll-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ll-color-text-muted);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  cursor: pointer;
}

.comparison-chart__disclosure-label {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

/* 16 SM (Figma 24876:14569) / 20 MD (Figma 24876:13240). */
.comparison-chart__disclosure-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask: var(--comparison-chart-arrow-url) center / contain no-repeat;
  transition: transform var(--ll-motion-interactive-state-duration) var(--ll-motion-interactive-state-easing);
}

.comparison-chart__disclosure-arrow img {
  display: none;
}

.comparison-chart__plan[data-state="expanded"] .comparison-chart__disclosure-arrow {
  transform: rotate(90deg);
}

/* --- Panel (collapses on accordion) --- 1fr <-> 0fr grid; inner wrapper clips. See .md. */
.comparison-chart__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--ll-motion-interactive-state-duration) var(--ll-motion-interactive-state-easing);
}

/* Panel-inner padding-top (pricing→divider) + gap (list→cta) schedule: SM 16/32, MD 24/32, LG 20/32. Divider→list gap is tightened at SM/MD via the divider's negative margin (see .__divider). See .md "Expanded-card divider". */
.comparison-chart__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-8);
  min-height: 0;
  padding-top: var(--ll-space-5);
  overflow: hidden;
  transition: padding-top var(--ll-motion-interactive-state-duration) var(--ll-motion-interactive-state-easing);
}

.comparison-chart__plan[data-state="collapsed"] .comparison-chart__panel {
  grid-template-rows: 0fr;
}

/* Zero the padding-top when collapsed: overflow:hidden lives on __panel-inner
 * itself, and an element can't clip its own padding, so the summary→features
 * padding-top otherwise leaks below "See what's included" on the accordion's
 * closed cards (SM/MD). LG re-opens every card and restores it. See .md. */
.comparison-chart__plan[data-state="collapsed"] .comparison-chart__panel-inner {
  padding-top: 0;
  visibility: hidden;
  transition:
    padding-top var(--ll-motion-interactive-state-duration) var(--ll-motion-interactive-state-easing),
    visibility 0s var(--ll-motion-interactive-state-duration);
}

/* In-card horizontal rule between pricing and the features list. Figma shows it
 * on the *expanded* card at EVERY breakpoint (SM 24876:14571 / MD 24876:13242 /
 * LG), so it's visible by default; collapsed accordion cards hide the whole
 * panel, so it only appears when a card is open. divider->list gap = 20 SM /
 * 24 MD / 32 LG. The panel-inner flex gap is the 32 list->cta rhythm, so SM/MD
 * pull the list up with a negative margin to hit the tighter divider->list gap
 * (MD/LG reset below). See .md "Expanded-card divider". */
.comparison-chart__divider {
  width: 100%;
  border-top: 1px solid var(--cc-card-divider);
  margin-bottom: calc(var(--ll-space-4) * -1); /* 32 flex gap - 12 = 20 (SM) */
}

/* Features list item gap: 12 SM / 16 MD+. */
.comparison-chart__features {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon aligns to the first text line (not centered across wrapped lines). */
.comparison-chart__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ll-space-3);
}

/* Check icon: 16 SM / 24 MD+ per Figma. margin-top centers the 16px icon in
 * the 22px first line at SM; MD+ icon (24) matches the 24px line so it resets. */
.comparison-chart__check-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background-color: var(--ll-color-signal-success);
  mask: var(--comparison-chart-check-url) center / contain no-repeat;
}

.comparison-chart__check-icon img {
  display: none;
}

/* Feature-text typography per .md "Typography design-lock" (Figma node 23015:13053). */
.comparison-chart__feature-text {
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
}

/* Footnote superscripts. See .md "Footnote superscript alignment". */
.comparison-chart__feature-text sup {
  position: relative;
  top: -6px;
  line-height: 0;
  vertical-align: baseline;
}

/* --- CTA group --- See ./comparison-chart.md "Disclaimer spacing (WEBEXP-110877)". */
.comparison-chart__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ll-space-4);
}

.comparison-chart__disclaimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ll-space-3);
}

/* Shared pill-button chrome (__cta + __view-all). Outer height, outline-vs-border, and typography schedule per .md "CTA height parity" + "CTA / view-all chrome". Icon-and-label gap: 8. */
.comparison-chart__cta,
.comparison-chart__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ll-space-3);
  padding: var(--ll-space-4) var(--ll-space-7);
  border: 0;
  border-radius: var(--ll-radius-pill);
  outline: 1px solid var(--ll-color-border-on-brand);
  outline-offset: -1px;
  color: var(--ll-color-text-primary);
  font-family: var(--ll-text-button-lg-family);
  font-size: 16px;
  font-weight: var(--ll-text-button-lg-weight);
  line-height: 20px;
  letter-spacing: var(--ll-text-button-lg-letter-spacing);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    outline-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    filter var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.comparison-chart__cta {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

/* View-all is full-bleed inside the footer at SM (matches card width per Figma); MD+ hugs content. */
.comparison-chart__view-all {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

/* Outline pills fill with --cc-hover-fill (#161616) + white text on hover/focus. See .md "Hover treatment". */
.comparison-chart__cta:hover,
.comparison-chart__cta:focus-visible,
.comparison-chart__view-all:hover,
.comparison-chart__view-all:focus-visible {
  outline-color: var(--cc-hover-fill);
  background: var(--cc-hover-fill);
  color: var(--ll-color-text-inverse);
}

.comparison-chart__cta--teal {
  outline: 0;
  background: var(--cc-teal-gradient);
  color: var(--ll-color-text-inverse);
}

/* Teal-themed CTA keeps its gradient on hover and brightens via filter(1.06). See .md "Hover treatment". */
.comparison-chart__cta--teal:hover,
.comparison-chart__cta--teal:focus-visible {
  background: var(--cc-teal-gradient);
  color: var(--ll-color-text-inverse);
  filter: brightness(1.06);
}

/* Per-cycle CTAs (dp-pipe.js wiring). Visibility tracks [data-billing]. See .md "Per-cycle CTAs". */
.comparison-chart__cta--monthly {
  display: none;
}

.comparison-chart__root[data-billing="monthly"] .comparison-chart__cta--annual {
  display: none;
}

.comparison-chart__root[data-billing="monthly"] .comparison-chart__cta--monthly {
  display: flex;
}

/* Money-back / pricing-details typography per .md "Typography design-lock". */
.comparison-chart__money-back,
.comparison-chart__pricing-details {
  margin: 0;
  color: var(--ll-color-highlight-beta);
  font-family: var(--ll-text-label-family);
  font-size: var(--ll-text-label-size);
  font-weight: var(--ll-text-label-weight);
  line-height: var(--ll-text-label-line-height);
  letter-spacing: var(--ll-text-label-letter-spacing);
  text-align: center;
}

/* --- Footer (View all features) --- */
.comparison-chart__footer {
  display: flex;
  justify-content: center;
}

/* Uniform section rhythm across all breakpoints per Figma nodes 24876:12001 (LG/XL) + 24876:13195 (MD/SM): intro→next 56, toggle→plans 40, plans→footer 56. Adjacent-sibling margins declared after each target's base rule to satisfy Stylelint no-descending-specificity. See .md "Section rhythm". */
.comparison-chart__intro + * {
  margin-block-start: var(--ll-space-12);
}

.comparison-chart__toggle + .comparison-chart__plans {
  margin-block-start: var(--ll-space-9);
}

.comparison-chart__plans + .comparison-chart__footer {
  margin-block-start: var(--ll-space-12);
}

/* --- Focus visibility (WCAG 2.4.7) --- */
.comparison-chart__chip:focus-visible,
.comparison-chart__disclosure:focus-visible,
.comparison-chart__cta:focus-visible,
.comparison-chart__view-all:focus-visible {
  outline: 2px solid var(--ll-color-focus-ring);
  outline-offset: 2px;
}

/* --- Accordion affordance: collapsed summary is tappable on small screens --- */
@media (width <= 1023px) {
  .comparison-chart__plan[data-state="collapsed"] .comparison-chart__summary {
    cursor: pointer;
  }

  /* Expanded card hides its disclosure (one always stays open). See .md "Accordion affordance". */
  .comparison-chart__plan[data-state="expanded"] .comparison-chart__disclosure {
    display: none;
  }
}

/* --- Tablet (>= 768): promotes typography + card padding + section rhythm to the MD ladder; pay-today stays 12/18. See .md. --- */
@media (width >= 768px) {
  /* Section rhythm baseline (root padding 80). Compound sibling rules live at the end of this block to satisfy no-descending-specificity. */
  .comparison-chart__root {
    padding-block: var(--ll-space-15);
  }

  /* Plans stacked-gap (24 MD). LG+ switches to horizontal 32. */
  .comparison-chart__plans {
    gap: var(--ll-space-7);
  }

  .comparison-chart__plan {
    padding: var(--ll-space-7);
  }

  /* Summary + pricing spacing (16 product→paragraph, 24 paragraph→pricing). */
  .comparison-chart__summary {
    gap: var(--ll-space-5);
  }

  .comparison-chart__pricing {
    margin-top: var(--ll-space-3);
  }

  /* Panel-inner: list→CTA gap 32; pricing→divider padding-top 24. */
  .comparison-chart__panel-inner {
    gap: var(--ll-space-8);
    padding-top: var(--ll-space-7);
  }

  /* Divider→list gap tightens to 24 at MD (32 flex gap − 8). Figma 24876:13242. */
  .comparison-chart__divider {
    margin-bottom: calc(var(--ll-space-3) * -1);
  }

  /* Features list item gap: 16 MD+. */
  .comparison-chart__features {
    gap: var(--ll-space-5);
  }

  /* Check icon: 24 MD+. Icon height matches the 24px line so no top offset. */
  .comparison-chart__check-icon {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  /* 20px button→disclaimer; the disclaimer wrapper keeps its own 12px line-to-line gap. */
  .comparison-chart__cta-group {
    gap: var(--ll-space-6);
  }

  .comparison-chart__disclaimer {
    gap: var(--ll-space-4);
  }

  /* Intro recenters at MD+ (Figma nodes 24876:13202 MD / 24876:12003 LG): centered, 20 gap. */
  .comparison-chart__intro {
    align-items: center;
    gap: var(--ll-space-6);
    text-align: center;
  }

  .comparison-chart__heading {
    font-family: var(--ll-text-h3-family);
    font-size: var(--ll-text-h3-size);
    font-weight: var(--ll-text-h3-weight);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
  }

  .comparison-chart__description {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    font-weight: var(--ll-text-body-lg-weight);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }

  /* Toggle chip: 42h, 24 inline, 16 gap + body-base typography. */
  .comparison-chart__chip {
    min-height: 42px;
    padding: var(--ll-space-3) var(--ll-space-7);
    gap: var(--ll-space-5);
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }

  /* Save-badge: 4/12 pad + body-sm 14/22 typography. */
  .comparison-chart__save {
    padding: var(--ll-space-2) var(--ll-space-4);
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
  }

  .comparison-chart__plan-name {
    font-family: var(--ll-text-h5-family);
    font-size: var(--ll-text-h5-size);
    font-weight: var(--ll-text-h5-weight);
    line-height: var(--ll-text-h5-line-height);
    letter-spacing: var(--ll-text-h5-letter-spacing);
  }

  .comparison-chart__plan-badge {
    padding: var(--ll-space-2) var(--ll-space-4);
    font-size: var(--ll-text-tagline-sm-size);
    line-height: var(--ll-text-button-sm-line-height);
  }

  .comparison-chart__positioning {
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    font-weight: var(--ll-text-body-sm-weight);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
  }

  .comparison-chart__price-value {
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
  }

  .comparison-chart__price-value .dp-currency,
  .comparison-chart__price-value > p > sub:first-of-type {
    font-size: var(--ll-text-body-2xl-size);
    line-height: var(--ll-text-body-2xl-line-height);
  }

  .comparison-chart__price-value .dp-suffix,
  .comparison-chart__price-value > p > sub:not(:first-of-type) {
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
  }

  .comparison-chart__price-value :is(del, s, strike) {
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    font-weight: var(--ll-text-body-sm-weight);
    line-height: var(--ll-text-body-sm-line-height);
  }

  .comparison-chart__disclosure {
    /* +8 on top of the 16 summary flex-gap = 24 pricing→link (Figma 24876:13237). */
    margin-top: var(--ll-space-3);
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
  }

  /* Disclosure arrow: 20 MD (Figma 24876:13240). */
  .comparison-chart__disclosure-arrow {
    width: 20px;
    height: 20px;
  }

  .comparison-chart__feature-text {
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }

  /* MD+ CTA padding back to 16/24; outer height hits Figma's 56px. See .md "CTA height parity". */
  .comparison-chart__cta,
  .comparison-chart__view-all {
    padding: var(--ll-space-5) var(--ll-space-7);
    font-size: var(--ll-text-button-lg-size);
    line-height: var(--ll-text-button-lg-line-height);
  }

  /* View-all at MD+: 17/25 padding — 17 hits Figma's 58px outer height; 25 inline matches Figma's 25-pixel side pad. Neither maps to a --ll-space-* token (no 17 / no 25). See .md. Also hugs content (drops the SM full-bleed). */
  .comparison-chart__view-all {
    width: auto;
    padding: 17px 25px;
  }
}

/* --- Desktop: three columns, all panels open, no disclosure --- */
@media (width >= 1024px) {
  .comparison-chart__heading {
    white-space: nowrap;
  }

  /* Cards sit in a row here, so reserve 2 lines to keep every card's pricing block at the same Y (Figma desktop paragraphs are all 2 lines: 24876:12024 h44). SM/MD stack, so the reserve is dropped there. */
  .comparison-chart__positioning {
    min-height: calc(var(--ll-text-body-sm-line-height) * 2);
  }

  .comparison-chart__plans {
    flex-direction: row;
    gap: var(--ll-space-8);
    align-items: stretch;
  }

  .comparison-chart__plan {
    flex: 1 1 0;
    min-width: 0;
  }

  .comparison-chart__panel {
    flex: 1 1 auto;
  }

  .comparison-chart__panel-inner {
    gap: var(--ll-space-8);
    padding-top: var(--ll-space-6);
  }

  /* Divider→list gap is the full 32 flex gap at LG (no negative pull). Divider styling lives in the base rule now. Color: --cc-card-divider (brand-dark @ 8%, per Figma rgba(1,54,56,0.08)). */
  .comparison-chart__divider {
    margin-bottom: 0;
  }

  .comparison-chart__cta-group {
    margin-top: auto;
  }

  .comparison-chart__disclosure {
    display: none;
  }

  /* Has-promo pay-today + renewal lines: only LG/XL bumps to body-sm (14/22); SM+MD stay at body-xs. See .md. */
  .comparison-chart__price-pay-today,
  .comparison-chart__renewal {
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
  }

  /* Desktop forces all panels open regardless of baked data-state. See .md "Accordion affordance". */
  .comparison-chart__plan[data-state="collapsed"] .comparison-chart__panel {
    grid-template-rows: 1fr;
  }

  .comparison-chart__plan[data-state="collapsed"] .comparison-chart__panel-inner {
    padding-top: var(--ll-space-6);
    visibility: visible;
    transition: none;
  }
}

@media (width >= 1440px) {
    .comparison-chart__plan {
        padding: var(--ll-space-8);
    }
}