/* ==========================================================================
   SolarHomeCompare v3: the agreed Zoom-style look, plus the calculator.
   --------------------------------------------------------------------------
   Loads after redesign.css and re-points its tokens, so every existing page
   picks up the new palette without its markup changing. New components use
   the `sx-` prefix and live only here.

   Palette (one blue does the popping, everything else stays quiet):
     Signal blue  #0B5CFF  buttons, links, the one thing to click
     Deep blue    #0848CC  hover, underlines
     Sky          #F3F7FF  hero bands, highlighted panels
     Mist         #EAF1FF  tints, selected states
     Navy         #0A1A3A  dark sections and the footer
     Ink          #0E1726  text

   Sections:
     1. Tokens and colour fixes for the existing design
     2. Top bar
     3. Buttons and fields
     4. Hero
     5. Calculator (estimate bar, result, match form)
     6. State quick calculation
     7. Tabs and cards
     8. State page blocks
     9. Blog template blocks
    10. Footer
   ========================================================================== */

/* -- 1. Tokens ------------------------------------------------------------ */
[data-redesign] {
  /* The site's own palette: sunshine yellow, near-black and white. The
     sx- names are the roles the v3 blocks use; they map onto the v2
     colours so the Zoom layout keeps the original look. */
  --sx-blue: #111111;          /* primary action: black button */
  --sx-blue-dark: #2e2e2e;     /* its hover */
  --sx-sky: #f6f5f1;           /* quiet panels */
  --sx-mist: #f8efdb;          /* tints, selected states, highlights */
  --sx-navy: #111111;          /* dark sections and footer */
  --sx-navy-2: #1c1c1c;
  --sx-navy-line: #333333;
  --sx-on-navy: #d6d6d0;
  --sx-accent-on-navy: #dcaa45;
}
[data-redesign] [hidden] { display: none !important; }
[data-redesign] ::selection { background: var(--sx-blue); color: #fff; }
[data-redesign] :focus-visible { outline-color: var(--sx-blue); }
[data-redesign] a { text-decoration-color: rgba(11, 92, 255, 0.45); }
[data-redesign] a:hover { text-decoration-color: var(--sx-blue); }

/* Buttons from the v2 design, now blue. */
[data-redesign] .rdx-btn { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; border-radius: 10px; }
[data-redesign] .rdx-btn:hover { background: var(--sx-blue-dark); border-color: var(--sx-blue-dark); color: #fff; }
[data-redesign] .rdx-btn--sun { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-btn--sun:hover { background: #fff; border-color: #fff; color: var(--sx-blue-dark); }
[data-redesign] .rdx-btn--outline { background: transparent; color: var(--r-ink); border-color: var(--r-ink); }
[data-redesign] .rdx-btn--outline:hover { background: var(--r-ink); color: #fff; }

/* The v2 heroes and title bands were solid yellow; now a light sky band. */
[data-redesign] .rdx-hero,
[data-redesign] .rdx-posthead { background: var(--sx-sky); border-bottom: 1px solid var(--r-line); }
[data-redesign] .rdx-picker,
[data-redesign] .rdx-quick { box-shadow: 0 1px 0 rgba(14, 23, 38, 0.06), 0 14px 32px rgba(11, 92, 255, 0.10); }

/* Closing bands: solid blue, white text, white button. */
[data-redesign] .rdx-section--sun { background: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-section--sun h2 { color: #fff; }
[data-redesign] .rdx-section--sun p,
[data-redesign] .rdx-closer p,
[data-redesign] .rdx-nearby .rdx-section-head p { color: #E3ECFF; }
[data-redesign] .rdx-section--sun a:not(.rdx-btn) { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }
[data-redesign] .rdx-section--sun .rdx-btn { background: #fff; border-color: #fff; color: var(--sx-blue-dark); }
[data-redesign] .rdx-section--sun .rdx-btn:hover { background: var(--sx-navy); border-color: var(--sx-navy); color: #fff; }

/* Blue on navy is too dark to read as text; use a lighter blue there. */
[data-redesign] .rdx-section--ink { color: var(--sx-on-navy); }
[data-redesign] .rdx-section--ink .rdx-section-head p { color: var(--sx-on-navy); }
[data-redesign] .rdx-bc-specs dd.is-yes,
[data-redesign] .rdx-bc.is-filtered .rdx-bc-card.is-match .rdx-bc-fit,
[data-redesign] .rdx-bpl-state,
[data-redesign] .rdx-section--ink .rdx-card-label,
[data-redesign] .rdx-section--ink .rdx-card-more { color: var(--sx-accent-on-navy); }
[data-redesign] .rdx-bc-chip { border-color: var(--sx-navy-line); }
[data-redesign] .rdx-bc-chip[aria-pressed="true"],
[data-redesign] .rdx-bc-card.is-featured .rdx-bc-tag { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-bc-card.is-featured .rdx-bc-btn { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-bc-card.is-featured .rdx-bc-btn:hover { background: #fff; border-color: #fff; color: var(--sx-blue-dark); }
[data-redesign] .rdx-bc-seller,
[data-redesign] .rdx-bc-price,
[data-redesign] .rdx-bc-specs dt,
[data-redesign] .rdx-bc-foot p { color: #9FB0D0; }

/* State tiles: blue on hover with white text. */
[data-redesign] .rdx-stategrid a:hover,
[data-redesign] .rdx-stategrid a:focus-visible { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-stategrid a:hover .rdx-sg-val { color: #E3ECFF; }

/* End-of-post block: blue panel, white button. */
[data-redesign] .jk-final-cta { background: var(--sx-blue); }
[data-redesign] .jk-final-cta h3 { color: #fff; }
[data-redesign] .jk-final-cta p,
[data-redesign] .jk-final-cta .jk-final-note { color: #E3ECFF; }
[data-redesign] .jk-final-btn { background: #fff; color: var(--sx-blue-dark); }
[data-redesign] .jk-final-btn:hover { background: var(--sx-navy); color: #fff; }
[data-redesign] .article-body .jk-compare thead th { background: var(--sx-navy); }
[data-redesign] .article-body .jk-compare .jk-compare-buy a { background: var(--sx-blue); }
[data-redesign] .article-body .jk-compare .jk-compare-buy a:hover { background: var(--sx-blue-dark); }
[data-redesign] .article-body .jk-compare { border-color: var(--r-line); }
[data-redesign] .rdx-pick { border-color: var(--r-line); border-top-color: var(--sx-blue); }
[data-redesign] .faqs details[open] { border-color: var(--sx-blue); }
[data-redesign] .rdx-guidelist { border-top-color: var(--sx-blue); }

/* -- 2. Top bar ------------------------------------------------------------ */
[data-redesign] .sx-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--r-line);
  padding: 0.7rem 0;
}
[data-redesign] .sx-topbar .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
[data-redesign] .sx-topbar nav { justify-content: center; }
[data-redesign] .sx-topbar nav { gap: 0; }
[data-redesign] .sx-topbar nav a { font-weight: 600; font-size: 0.93rem; color: var(--r-ink-2); white-space: nowrap; padding: 0.45rem 0.5rem; }
[data-redesign] .sx-topbar nav a:hover { background: var(--sx-mist); color: var(--sx-blue-dark); }
[data-redesign] .sx-topbar-actions { display: flex; gap: 0.5rem; align-items: center; }
[data-redesign] .brand-mark circle { fill: #dcaa45; }
@media (max-width: 1180px) {
  [data-redesign] .sx-topbar-actions .sx-hide-sm { display: none; }
}
@media (max-width: 900px) {
  [data-redesign] .sx-topbar .container {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "nav nav";
    gap: 0.45rem 0.75rem;
  }
  [data-redesign] .sx-topbar .brand { grid-area: brand; }
  [data-redesign] .sx-topbar-actions { grid-area: actions; }
  [data-redesign] .sx-topbar nav {
    grid-area: nav;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  [data-redesign] .sx-topbar nav::-webkit-scrollbar { display: none; }
  [data-redesign] .sx-topbar nav a { white-space: nowrap; padding: 0.3rem 0.6rem; font-size: 0.88rem; }
  [data-redesign] .sx-topbar nav a:first-child { padding-left: 0; }
}

/* -- 3. Buttons and fields ------------------------------------------------- */
[data-redesign] .sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.85rem 1.35rem;
  border-radius: 10px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
[data-redesign] .sx-btn:disabled { opacity: 0.65; cursor: progress; }
[data-redesign] .sx-btn--primary { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .sx-btn--primary:hover { background: var(--sx-blue-dark); border-color: var(--sx-blue-dark); color: #fff; }
[data-redesign] .sx-btn--outline { background: #fff; border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .sx-btn--outline:hover { background: var(--r-ink); color: #fff; }
[data-redesign] .sx-btn--ghost { background: transparent; color: var(--sx-blue-dark); padding-inline: 0.9rem; }
[data-redesign] .sx-btn--ghost:hover { background: var(--sx-mist); color: var(--sx-blue-dark); }
[data-redesign] .sx-btn--sm { padding: 0.55rem 1rem; font-size: 0.93rem; }
[data-redesign] .sx-btn--lg { padding: 1rem 1.6rem; font-size: 1.05rem; }

[data-redesign] .sx-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
[data-redesign] .sx-label { font-size: 0.86rem; font-weight: 600; color: var(--r-ink-2); }
[data-redesign] .sx-help { font-size: 0.8rem; color: var(--r-ink-3); }
[data-redesign] .sx-field input,
[data-redesign] .sx-field select,
[data-redesign] .sx-money input {
  font: inherit;
  font-size: 1rem;
  color: var(--r-ink);
  background: #fff;
  border: 1.5px solid #C9D3E3;
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  width: 100%;
  min-width: 0;
}
[data-redesign] .sx-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1726' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 18px;
  cursor: pointer;
}
[data-redesign] .sx-field input:focus,
[data-redesign] .sx-field select:focus,
[data-redesign] .sx-money input:focus { outline: none; border-color: var(--sx-blue); box-shadow: 0 0 0 3px rgba(11, 92, 255, 0.18); }
[data-redesign] .sx-money { position: relative; display: block; }
[data-redesign] .sx-money > span { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--r-ink-3); font-weight: 600; pointer-events: none; }
[data-redesign] .sx-money input { padding-left: 1.8rem; }
[data-redesign] .sx-money--sm { display: inline-block; width: 7rem; }
[data-redesign] .sx-money--sm input { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* -- 4. Hero --------------------------------------------------------------- */
[data-redesign] .sx-hero { background: var(--sx-sky); border-bottom: 1px solid var(--r-line); padding: 3.25rem 0 2.75rem; }
[data-redesign] .sx-hero-copy { max-width: 52rem; margin: 0 0 1.75rem; }
[data-redesign] .sx-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: #000;
  text-wrap: balance;
}
[data-redesign] .sx-hero--state h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.08; }
[data-redesign] .sx-hero-lede { font-size: 1.14rem; line-height: 1.6; color: var(--r-ink-2); margin: 0; max-width: 44rem; }
[data-redesign] .sx-hero--tool { padding: 2rem 0 2.5rem; }
[data-redesign] .rdx-posthead + .sx-hero--tool { border-top: 0; padding-top: 0.5rem; }
[data-redesign] .sx-crumbs { font-size: 0.86rem; color: var(--r-ink-3); margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
[data-redesign] .sx-crumbs a { color: var(--r-ink-2); text-decoration: none; font-weight: 500; }
[data-redesign] .sx-crumbs a:hover { color: var(--sx-blue-dark); text-decoration: underline; }
[data-redesign] .sx-byline { margin: 1.1rem 0 0; font-size: 0.88rem; color: var(--r-ink-3); }
[data-redesign] .sx-byline a { color: var(--r-ink-2); font-weight: 500; }

/* How it works: a real sequence, so it is numbered. */
[data-redesign] .sx-steps {
  list-style: none;
  counter-reset: sx-step;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
[data-redesign] .sx-steps li { counter-increment: sx-step; position: relative; padding-left: 2.6rem; font-size: 0.95rem; line-height: 1.5; color: var(--r-ink-2); }
[data-redesign] .sx-steps li::before {
  content: counter(sx-step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sx-blue);
  color: var(--sx-blue-dark);
  font-weight: 700;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}
[data-redesign] .sx-steps strong { color: var(--r-ink); display: block; }
@media (max-width: 800px) { [data-redesign] .sx-steps { grid-template-columns: 1fr; gap: 0.9rem; } }

/* -- 5. Calculator ---------------------------------------------------------- */
[data-redesign] .sx-est {
  background: #fff;
  border: 1px solid var(--r-line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(14, 23, 38, 0.04), 0 18px 40px rgba(11, 92, 255, 0.10);
  padding: 1.35rem 1.4rem 1.2rem;
  scroll-margin-top: 6rem;
}
[data-redesign] .sx-est-heading { margin: 0 0 0.9rem; font-family: var(--r-serif); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.01em; color: var(--r-ink); }
[data-redesign] .sx-est-row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem auto; gap: 0.75rem; align-items: end; }
[data-redesign] .sx-est-row .sx-btn { height: 3.2rem; }
[data-redesign] .sx-est-note { margin: 0.7rem 0 0; font-size: 0.84rem; color: var(--r-ink-3); }
[data-redesign] .sx-est-error { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 8px; background: #FFF3F0; color: #9A2A12; font-size: 0.92rem; }
[data-redesign] .sx-est-fallback { margin-top: 0.9rem; display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
[data-redesign] .sx-est-fallback .sx-field { flex: 1 1 16rem; }
[data-redesign] .sx-est-fallback .sx-btn { height: 3.2rem; }
[data-redesign] .sx-est--bar { padding: 1.1rem 1.2rem 1rem; }
[data-redesign] .sx-est--bar .sx-est-heading { font-size: 1.08rem; }
@media (max-width: 760px) {
  [data-redesign] .sx-est { padding: 1.1rem 1rem 1rem; border-radius: 14px; }
  [data-redesign] .sx-est-row { grid-template-columns: 1fr; }
  [data-redesign] .sx-est-row .sx-btn,
  [data-redesign] .sx-est-fallback .sx-btn { width: 100%; }
}

/* Result */
[data-redesign] .sx-result { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--r-line); }
[data-redesign] .sx-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.9rem; }
[data-redesign] .sx-result-kicker { margin: 0; font-family: var(--r-serif); font-weight: 800; font-size: 1.15rem; color: var(--r-ink); }
[data-redesign] .sx-result-where { margin: 0; font-size: 0.88rem; color: var(--r-ink-3); }
[data-redesign] .sx-figs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--r-line);
  border: 1px solid var(--r-line);
  border-radius: 12px;
  overflow: hidden;
}
[data-redesign] .sx-figs > div { background: #fff; padding: 0.95rem 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem; }
[data-redesign] .sx-figs dt { font-size: 0.82rem; color: var(--r-ink-3); font-weight: 500; line-height: 1.3; }
[data-redesign] .sx-figs dd { margin: 0; font-family: var(--r-serif); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--r-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-redesign] .sx-figs .is-key { background: var(--sx-mist); }
[data-redesign] .sx-figs .is-key dd { color: var(--sx-blue-dark); }
[data-redesign] .sx-estimate-flag { margin: 0.8rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--r-ink-2); }
[data-redesign] .sx-result-notes { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--r-ink-3); }
[data-redesign] .sx-result-notes li { margin: 0.2rem 0; }
[data-redesign] .sx-rebill { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--r-ink-2); }
[data-redesign] .sx-rebill-hint { color: var(--r-ink-3); font-size: 0.84rem; }
[data-redesign] .sx-how { margin: 1rem 0 0; font-size: 0.9rem; color: var(--r-ink-2); }
[data-redesign] .sx-how summary { cursor: pointer; font-weight: 600; color: var(--sx-blue-dark); }
[data-redesign] .sx-how ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
[data-redesign] .sx-how li { margin: 0.3rem 0; }
@media (max-width: 1000px) {
  [data-redesign] .sx-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-redesign] .sx-figs .is-key { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  [data-redesign] .sx-figs dd { font-size: 1.25rem; }
}

/* Backup picks under a result: the affiliate step. */
[data-redesign] .sx-backup-next { margin: 1.4rem 0 0; padding: 1.25rem 1.3rem 1.1rem; border-radius: 14px; background: var(--sx-sky); border: 1px solid var(--r-line); }
[data-redesign] .sx-backup-title { margin: 0 0 0.35rem; font-size: 1.2rem; }
[data-redesign] .sx-backup-lede { margin: 0 0 1rem; color: var(--r-ink-2); font-size: 0.95rem; max-width: 50rem; }
[data-redesign] .sx-backup-grid { display: flex; gap: 1rem; }
[data-redesign] .sx-bk { flex: 1 1 0; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--r-line); border-radius: 12px; padding: 1.1rem 1.15rem; }
[data-redesign] .sx-bk.is-pick { border-color: var(--sx-blue); box-shadow: 0 10px 24px rgba(11, 92, 255, 0.10); }
[data-redesign] .sx-bk-tag { align-self: flex-start; margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--sx-blue-dark); background: var(--sx-mist); border-radius: 6px; padding: 0.15rem 0.5rem; }
[data-redesign] .sx-bk h4 { margin: 0 0 0.35rem; font-family: var(--r-serif); font-size: 1.12rem; font-weight: 800; }
[data-redesign] .sx-bk-specs { margin: 0 0 0.4rem; font-size: 0.86rem; color: var(--r-ink-3); }
[data-redesign] .sx-bk-fit { margin: 0 0 0.9rem; font-size: 0.93rem; color: var(--r-ink-2); }
[data-redesign] .sx-bk .sx-btn { margin-top: auto; white-space: normal; }
[data-redesign] .sx-bk:not(.is-pick) .sx-btn { background: #fff; color: var(--sx-blue-dark); }
[data-redesign] .sx-bk:not(.is-pick) .sx-btn:hover { background: var(--sx-blue); color: #fff; }
[data-redesign] .sx-bk-fine { margin: 0.85rem 0 0; font-size: 0.8rem; color: var(--r-ink-3); }
@media (max-width: 700px) { [data-redesign] .sx-backup-grid { flex-direction: column; } }

/* -- 6. State quick calculation --------------------------------------------- */
[data-redesign] .sx-quick { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; }
[data-redesign] .sx-quick-form { display: grid; gap: 0.9rem; }
[data-redesign] .sx-quick-out { background: var(--sx-sky); border: 1px solid var(--r-line); border-radius: 14px; padding: 1.25rem 1.3rem; min-height: 100%; }
[data-redesign] .sx-quick-empty { margin: 0; color: var(--r-ink-2); font-size: 0.98rem; }
[data-redesign] .sx-quick-out .sx-result-kicker { margin-bottom: 0.8rem; }
[data-redesign] .sx-figs--compact dd { font-size: 1.25rem; }
[data-redesign] .sx-quick-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
[data-redesign] .sx-panel { background: #fff; border: 1px solid var(--r-line); border-radius: 16px; padding: 1.35rem; box-shadow: 0 18px 40px rgba(11, 92, 255, 0.08); }
[data-redesign] .sx-subhead { font-size: 1.15rem; margin: 2.75rem 0 1rem; }
@media (max-width: 900px) {
  [data-redesign] .sx-quick { grid-template-columns: 1fr; }
  [data-redesign] .sx-quick-actions .sx-btn { flex: 1 1 100%; }
}

/* -- 7. Tabs and cards --------------------------------------------------------- */
[data-redesign] .sx-tablist { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0.3rem; background: #fff; border: 1px solid var(--r-line); border-radius: 12px; width: fit-content; max-width: 100%; }
[data-redesign] .sx-tablist [role="tab"] { font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--r-ink-2); background: transparent; border: 0; border-radius: 9px; padding: 0.6rem 1.1rem; cursor: pointer; }
[data-redesign] .sx-tablist [role="tab"]:hover { background: var(--sx-mist); color: var(--sx-blue-dark); }
[data-redesign] .sx-tablist [role="tab"][aria-selected="true"] { background: var(--sx-blue); color: #fff; }
[data-redesign] .sx-tabpanel + .sx-tabpanel { margin-top: 2.5rem; }
[data-redesign] .sx-tabs.is-tabbed .sx-tabpanel + .sx-tabpanel { margin-top: 0; }
[data-redesign] .sx-tabs.is-tabbed .sx-tabpanel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-redesign] .sx-tabpanel-title { font-size: 1.2rem; margin: 0 0 1rem; }
[data-redesign] .sx-tab-more { margin: 1.25rem 0 0; font-weight: 600; }
[data-redesign] .sx-tab-more a { color: var(--sx-blue-dark); }

[data-redesign] .sx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
[data-redesign] .sx-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid var(--r-line);
  border-radius: 14px;
  padding: 1.25rem 1.3rem 1.3rem;
  text-decoration: none;
  color: var(--r-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-redesign] .sx-card:hover { border-color: var(--sx-blue); box-shadow: 0 10px 24px rgba(11, 92, 255, 0.10); color: var(--r-ink); }
[data-redesign] .sx-card-title { font-family: var(--r-serif); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
[data-redesign] .sx-card:hover .sx-card-title { color: var(--sx-blue-dark); }
[data-redesign] .sx-card-text { font-size: 0.92rem; color: var(--r-ink-2); line-height: 1.5; }
@media (max-width: 960px) { [data-redesign] .sx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { [data-redesign] .sx-cards { grid-template-columns: 1fr; } }

/* Who we are + how we are paid */
[data-redesign] .sx-trust-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
[data-redesign] .sx-lead { font-size: 1.05rem; color: var(--r-ink-2); margin: 0 0 1.25rem; }
[data-redesign] .sx-facts { margin: 0; display: grid; gap: 1px; background: var(--r-line); border: 1px solid var(--r-line); border-radius: 14px; overflow: hidden; }
[data-redesign] .sx-facts > div { background: #fff; padding: 1.1rem 1.25rem; }
[data-redesign] .sx-facts dt { font-weight: 700; color: var(--r-ink); margin: 0 0 0.25rem; }
[data-redesign] .sx-facts dd { margin: 0; color: var(--r-ink-2); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 860px) { [data-redesign] .sx-trust-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* -- 8. State page blocks ----------------------------------------------------- */
[data-redesign] .sx-pagetabs {
  position: sticky;
  top: 3.9rem;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--r-line);
}
[data-redesign] .sx-pagetabs .rdx-wrap { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding-top: 0.45rem; padding-bottom: 0.45rem; }
[data-redesign] .sx-pagetabs .rdx-wrap::-webkit-scrollbar { display: none; }
[data-redesign] .sx-pagetabs a { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.9rem; color: var(--r-ink-2); padding: 0.45rem 0.8rem; border-radius: 8px; }
[data-redesign] .sx-pagetabs a:hover { background: var(--sx-mist); color: var(--sx-blue-dark); }
@media (max-width: 900px) { [data-redesign] .sx-pagetabs { top: 5.6rem; } }
[data-redesign] #costs, [data-redesign] #guide, [data-redesign] #incentives, [data-redesign] #backup, [data-redesign] #faqs, [data-redesign] #nearby { scroll-margin-top: 8rem; }

[data-redesign] .sx-glance-wrap { padding: 3rem 0 2rem; }
[data-redesign] .sx-insights { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2rem; }
[data-redesign] .sx-insights li { position: relative; padding-left: 1.1rem; color: var(--r-ink-2); font-size: 0.97rem; line-height: 1.6; }
[data-redesign] .sx-insights li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-blue); }
@media (max-width: 760px) { [data-redesign] .sx-insights { grid-template-columns: 1fr; } }

[data-redesign] .sx-midcta { margin: 2.75rem 0; padding: 1.5rem 1.6rem; border-radius: 14px; background: var(--sx-sky); border: 1px solid var(--r-line); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
[data-redesign] .sx-midcta h2 { margin: 0 0 0.35rem; font-size: 1.3rem; }
[data-redesign] .sx-midcta p { margin: 0; color: var(--r-ink-2); font-size: 0.95rem; max-width: 34rem; }
[data-redesign] .sx-backup { margin-top: 2.5rem; }
[data-redesign] .sx-backup h2 { font-size: 1.6rem; margin: 0 0 0.6rem; }
[data-redesign] .sx-backup > p { color: var(--r-ink-2); margin: 0 0 1.25rem; }

[data-redesign] .sx-table-wrap { overflow-x: auto; border: 1px solid var(--r-line); border-radius: 14px; background: #fff; }
[data-redesign] .sx-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
[data-redesign] .sx-table th,
[data-redesign] .sx-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--r-line-soft); white-space: nowrap; }
[data-redesign] .sx-table thead th { font-size: 0.82rem; color: var(--r-ink-3); font-weight: 600; background: var(--r-bg-soft); }
[data-redesign] .sx-table tbody tr:last-child > * { border-bottom: 0; }
[data-redesign] .sx-table tbody th { font-weight: 700; }
[data-redesign] .sx-table tbody th a { color: var(--sx-blue-dark); }
[data-redesign] .sx-table .is-current > * { background: var(--sx-mist); }

/* -- 9. Blog template blocks --------------------------------------------------- */
[data-redesign] .sx-inpost-tool { margin: 0 0 2.25rem; }
[data-redesign] .sx-postnext { margin: 3rem 0 0; }
[data-redesign] .sx-postnext h2 { font-size: 1.4rem; margin: 0 0 1rem; }
[data-redesign] .sx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { [data-redesign] .sx-cards--3 { grid-template-columns: 1fr; } }
[data-redesign] .sx-postnext-tool { margin: 1.25rem 0 0; padding: 0.95rem 1.1rem; border-radius: 12px; background: var(--sx-sky); color: var(--r-ink-2); font-size: 0.95rem; }
[data-redesign] .sx-postnext-tool a { font-weight: 600; color: var(--sx-blue-dark); }

/* -- 10. Footer ------------------------------------------------------------------ */
[data-redesign] .site-footer { background: var(--sx-navy); color: var(--sx-on-navy); padding-top: 4rem; }
[data-redesign] .footer-top { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 2rem 1.5rem; border-bottom-color: var(--sx-navy-line); }
[data-redesign] .footer-col-head { color: var(--sx-accent-on-navy); }
[data-redesign] .footer-col a { color: #E6ECF8; }
[data-redesign] .footer-col a:hover { color: #fff; }
[data-redesign] .site-footer .tagline-small,
[data-redesign] .site-footer .legal,
[data-redesign] .site-footer .affiliate-disclosure { color: #A9B7D3; }
[data-redesign] .site-footer .affiliate-disclosure a { text-decoration-color: var(--sx-accent-on-navy); }
@media (max-width: 1000px) {
  [data-redesign] .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-redesign] .footer-brandcol { grid-column: 1 / -1; }
  [data-redesign] .footer-col:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  [data-redesign] .sx-card,
  [data-redesign] .sx-btn { transition: none; }
}

/* -- 11. Zoom reference ----------------------------------------------------
   Matched to the Zoom home page screenshot: serif display headlines set in a
   regular weight and centred, a deep navy-to-blue hero with white text, small
   rectangular buttons, a slim blue announcement strip under the top bar, a
   fixed row of cards in the hero, a framed product shot, centred tabs, three
   cards with their own buttons, and a very dark navy footer. */
[data-redesign] {
  --zx-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --zx-deep: #111111;
  --zx-hero-grad: #dcaa45;
}

/* Headlines: serif, regular weight, as Zoom sets them. */
[data-redesign] h1,
[data-redesign] h2 { font-family: var(--zx-display); font-weight: 500; letter-spacing: -0.015em; }
[data-redesign] .article-body h2,
[data-redesign] .faqs h2,
[data-redesign] .incentives h2 { font-weight: 600; }

/* Buttons: small rectangles with a slight radius. */
[data-redesign] .zx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  padding: 0.75rem 1.25rem; border-radius: 8px; border: 1.5px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
[data-redesign] .zx-btn--sm { padding: 0.5rem 0.95rem; font-size: 0.88rem; }
[data-redesign] .zx-btn--blue { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .zx-btn--blue:hover { background: var(--sx-blue-dark); border-color: var(--sx-blue-dark); color: #fff; }
[data-redesign] .zx-btn--white { background: #fff; border-color: #fff; color: var(--zx-deep); }
[data-redesign] .zx-btn--white:hover { background: #E8EEFF; border-color: #E8EEFF; color: var(--zx-deep); }
[data-redesign] .zx-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.75); color: #fff; }
[data-redesign] .zx-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
[data-redesign] .zx-btn--outline { background: #fff; border-color: var(--sx-blue); color: var(--sx-blue-dark); }
[data-redesign] .zx-btn--outline:hover { background: var(--sx-mist); color: var(--sx-blue-dark); }
[data-redesign] .sx-btn,
[data-redesign] .rdx-btn { border-radius: 8px; }
[data-redesign] .sx-topbar-actions .sx-btn--outline { border-width: 1.5px; border-color: var(--sx-blue); color: var(--sx-blue-dark); }
[data-redesign] .sx-topbar-actions .sx-btn--outline:hover { background: var(--sx-mist); color: var(--sx-blue-dark); }

/* Slim announcement strip under the top bar. */
[data-redesign] .zx-announce { background: linear-gradient(90deg, #00053D, #0B2A9E); color: #DCE4FF; display: flex; justify-content: center; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 0.5rem 1.25rem; font-size: 0.85rem; text-align: center; }
[data-redesign] .zx-announce p { margin: 0; }
[data-redesign] .zx-announce-btn { background: var(--sx-blue); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 6px; white-space: nowrap; }
[data-redesign] .zx-announce-btn:hover { background: #fff; color: var(--zx-deep); }
@media (max-width: 520px) { [data-redesign] .zx-announce p { font-size: 0.8rem; } }

/* Dark hero. */
[data-redesign] .zx-hero { background: var(--zx-hero-grad); color: #DCE4FF; padding: 4.5rem 0 3.5rem; overflow: hidden; }
[data-redesign] .zx-hero-head { text-align: center; max-width: 50rem; margin: 0 auto 2.5rem; }
[data-redesign] .zx-hero h1 { color: #fff; font-size: clamp(2.5rem, 5.4vw, 4.2rem); line-height: 1.06; margin: 0 0 1rem; }
[data-redesign] .zx-hero-head p { font-size: 1.12rem; line-height: 1.6; margin: 0 auto; max-width: 40rem; color: #DCE4FF; }
[data-redesign] .zx-hero-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
[data-redesign] .zx-hero-tool { max-width: 1040px; margin: 0 auto; }
[data-redesign] .zx-hero-tool .sx-est { box-shadow: 0 30px 70px rgba(0, 5, 61, 0.45); border: 0; border-radius: 16px; }

/* Fixed row of cards (Zoom's product row, with no sliding). */
[data-redesign] .zx-cardrow { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }
[data-redesign] .zx-rowcard { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; height: 100%; min-height: 150px; padding: 1rem 1.1rem 1.15rem; border-radius: 14px; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,0.14); transition: transform 0.15s ease, border-color 0.15s ease; }
[data-redesign] .zx-rowcard:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.5); color: #fff; }
[data-redesign] .zx-rowcard-label { align-self: center; font-size: 0.78rem; font-weight: 600; background: rgba(255,255,255,0.16); border-radius: 6px; padding: 0.2rem 0.55rem; }
[data-redesign] .zx-rowcard-title { font-family: var(--zx-display); font-size: 1.15rem; line-height: 1.25; text-align: center; }
[data-redesign] .zx-rowcard--a { background: linear-gradient(160deg, #1B4BD8, #0A1F7A); }
[data-redesign] .zx-rowcard--b { background: linear-gradient(160deg, #3A2E9E, #16145A); }
[data-redesign] .zx-rowcard--c { background: linear-gradient(160deg, #0C6B8C, #0A2E5C); }
[data-redesign] .zx-rowcard--d { background: linear-gradient(160deg, #5B3FC4, #1E1670); }
[data-redesign] .zx-rowcard--e { background: linear-gradient(160deg, #0B5CFF, #0A2E9E); }
@media (max-width: 1000px) { [data-redesign] .zx-cardrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  [data-redesign] .zx-hero { padding: 2.75rem 0 2.5rem; }
  [data-redesign] .zx-cardrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  [data-redesign] .zx-rowcard { min-height: 120px; gap: 1.5rem; }
  [data-redesign] .zx-rowcard-title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { [data-redesign] .zx-rowcard { transition: none; } [data-redesign] .zx-rowcard:hover { transform: none; } }

/* Row of names where Zoom shows customer logos. */
[data-redesign] .zx-trusted { background: #fff; padding: 2.5rem 0; border-bottom: 1px solid var(--r-line); }
[data-redesign] .zx-trusted-head { text-align: center; font-family: var(--zx-display); font-size: 1.2rem; color: var(--r-ink); margin: 0 0 1.25rem; }
[data-redesign] .zx-trusted ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem 2rem; }
[data-redesign] .zx-trusted li { font-weight: 700; font-size: 0.98rem; color: #5F6B80; letter-spacing: -0.01em; }

/* Centred section heads. */
[data-redesign] .zx-center { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
[data-redesign] .zx-center h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin: 0 0 0.8rem; }
[data-redesign] .zx-center p { margin: 0; font-size: 1.05rem; color: var(--r-ink-2); }
[data-redesign] .rdx-section--ink .zx-center p { color: var(--sx-on-navy); }
[data-redesign] .rdx-section--ink { background: var(--zx-deep); }

/* Feature block: two-tone headline left, button right, tool in a frame. */
[data-redesign] .zx-feature { padding: 5rem 0 4rem; background: #fff; }
[data-redesign] .zx-feature-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
[data-redesign] .zx-feature-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #0B5CFF, #7B61FF); margin-bottom: 0.9rem; }
[data-redesign] .zx-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-redesign] .zx-feature-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; margin: 0; max-width: 34rem; }
[data-redesign] .zx-accent { display: block; color: var(--sx-blue); }
[data-redesign] .zx-frame { border-radius: 24px; padding: clamp(1rem, 4vw, 3rem); background: linear-gradient(135deg, #CFE0FF 0%, #E6DEFF 50%, #D6F0FF 100%); }
[data-redesign] .zx-frame-inner { background: #fff; border-radius: 16px; padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: 0 24px 60px rgba(10, 26, 58, 0.16); }
[data-redesign] .zx-frame .sx-quick-out { background: var(--sx-sky); }

/* Tabs: centred, with an outlined selected tab. */
[data-redesign] .zx-tabs-section { padding: 5rem 0; background: #F7F9FC; }
[data-redesign] .zx-tabs-section .sx-tablist { margin: 0 auto 2rem; background: transparent; border: 0; justify-content: center; gap: 0.25rem 1.5rem; }
[data-redesign] .zx-tabs-section .sx-tablist [role="tab"] { background: transparent; color: var(--r-ink-2); border: 1.5px solid transparent; border-radius: 8px; padding: 0.5rem 0.9rem; }
[data-redesign] .zx-tabs-section .sx-tablist [role="tab"][aria-selected="true"] { background: #fff; color: var(--r-ink); border-color: var(--sx-blue); }
[data-redesign] .zx-tabs-section .sx-tabpanel { background: linear-gradient(135deg, #E8F0FF, #F1ECFF); border-radius: 24px; padding: clamp(1rem, 3vw, 2rem); }

/* Three cards, each with its own button underneath. */
[data-redesign] .zx-three { padding: 5rem 0; background: #fff; }
[data-redesign] .zx-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
[data-redesign] .zx-three-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
[data-redesign] .zx-three-card { width: 100%; flex: 1; border-radius: 16px; padding: 1.6rem 1.5rem; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; }
[data-redesign] .zx-three-card--blue { background: linear-gradient(160deg, #1B4BD8, #00053D); color: #fff; }
[data-redesign] .zx-three-card--light { background: #fff; border: 2px solid #D9CCFF; }
[data-redesign] .zx-three-card--shot { padding: 0; overflow: hidden; background: var(--sx-pastel-blue, #E8F0FF); justify-content: center; }
[data-redesign] .zx-three-kicker { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 600; opacity: 0.8; }
[data-redesign] .zx-three-title { margin: 0 0 0.5rem; font-family: var(--zx-display); font-size: 1.45rem; line-height: 1.2; }
[data-redesign] .zx-three-text { margin: 0; font-size: 0.95rem; line-height: 1.55; }
[data-redesign] .zx-three-card--blue .zx-three-text { color: #DCE4FF; }
[data-redesign] .zx-three-card--light .zx-three-text { color: var(--r-ink-2); }
@media (max-width: 900px) { [data-redesign] .zx-three-grid { grid-template-columns: 1fr; } }

/* Sample estimate card (used inside the three-card row). */
[data-redesign] .sx-shot { position: relative; margin: 0; padding: 2.4rem 1.2rem; background: radial-gradient(circle at 80% 10%, #CFE0FF 0%, transparent 55%), radial-gradient(circle at 10% 90%, #E6DEFF 0%, transparent 50%), #E8F0FF; }
[data-redesign] .sx-shot-card { background: #fff; border-radius: 14px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 20px 50px rgba(10, 26, 58, 0.16); max-width: 360px; margin: 0 auto; }
[data-redesign] .sx-shot-top { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.8rem; }
[data-redesign] .sx-shot-dot { width: 8px; height: 8px; border-radius: 50%; background: #D5DCE8; }
[data-redesign] .sx-shot-label { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--sx-blue-dark); background: var(--sx-mist); border-radius: 6px; padding: 0.15rem 0.5rem; }
[data-redesign] .sx-shot-where { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--r-ink-3); }
[data-redesign] .sx-shot-main span { display: block; font-size: 0.8rem; color: var(--r-ink-2); }
[data-redesign] .sx-shot-main strong { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--sx-blue); line-height: 1.1; }
[data-redesign] .sx-shot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0.8rem 0 0.7rem; }
[data-redesign] .sx-shot-row div { background: var(--r-bg-soft); border-radius: 8px; padding: 0.45rem 0.55rem; }
[data-redesign] .sx-shot-row span { display: block; font-size: 0.68rem; color: var(--r-ink-3); }
[data-redesign] .sx-shot-row strong { font-size: 0.9rem; color: var(--r-ink); }
[data-redesign] .sx-shot-bar { height: 6px; border-radius: 999px; background: var(--r-line); overflow: hidden; }
[data-redesign] .sx-shot-bar span { display: block; height: 100%; background: var(--sx-blue); }
[data-redesign] .sx-shot-foot { margin: 0.4rem 0 0; font-size: 0.7rem; color: var(--r-ink-3); }
[data-redesign] .sx-shot-chip { display: none; }

/* Closing: centred serif headline and two buttons. */
[data-redesign] .zx-closer { padding: 5rem 0 5.5rem; background: #fff; border-top: 1px solid var(--r-line); }
[data-redesign] .zx-closer .zx-center { margin-bottom: 0; }

/* State page hero: the same dark gradient, white text, white calculator card. */
[data-redesign] .sx-hero--state { background: var(--zx-hero-grad); border-bottom: 0; padding: 3rem 0 2.75rem; }
[data-redesign] .sx-hero--state h1 { color: #fff; }
[data-redesign] .sx-hero--state .sx-hero-lede,
[data-redesign] .sx-hero--state .sx-byline,
[data-redesign] .sx-hero--state .sx-crumbs { color: #C9D5EE; }
[data-redesign] .sx-hero--state .sx-crumbs a,
[data-redesign] .sx-hero--state .sx-byline a { color: #fff; }
[data-redesign] .sx-hero--state .sx-est { border: 0; box-shadow: 0 30px 70px rgba(0, 5, 61, 0.45); }

/* Page and post title bands: light, with the serif headline. */
[data-redesign] .rdx-posthead,
[data-redesign] .rdx-hero,
[data-redesign] .sx-hero { background: linear-gradient(180deg, #EEF3FF 0%, #F8FAFF 100%); }
[data-redesign] .sx-hero--state { background: var(--zx-hero-grad); }

/* Footer: very dark navy, as Zoom's. */
[data-redesign] .site-footer { background: var(--zx-deep); }
[data-redesign] .footer-col-head { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: #fff; }
[data-redesign] .footer-col a { color: #B9C4E4; }

/* Phone: keep the top bar inside the screen. */
@media (max-width: 520px) {
  [data-redesign] .sx-topbar .brand-text { font-size: 1.1rem; }
  [data-redesign] .sx-topbar .brand-mark { width: 24px; height: 24px; }
  [data-redesign] .sx-topbar-actions .sx-btn--sm { padding: 0.5rem 0.8rem; font-size: 0.86rem; }
}

/* -- 12. Zoom layout on every other page ------------------------------------
   The remaining pages share the v2 building blocks (.rdx-hero, section heads,
   .rdx-card grids, the closing band), so restyling those blocks carries the
   Zoom layout to every page without touching their markup or copy. */

/* Heroes: dark gradient, white serif headline, white buttons. */
[data-redesign] .rdx-hero,
[data-redesign] main > .sx-hero:not(.sx-hero--tool) { background: var(--zx-hero-grad); color: #DCE4FF; border-bottom: 0; padding: 4rem 0 3.5rem; }
[data-redesign] .rdx-hero h1,
[data-redesign] main > .sx-hero:not(.sx-hero--tool) h1 { color: #fff; font-size: clamp(2.3rem, 4.8vw, 3.8rem); line-height: 1.06; }
[data-redesign] .rdx-hero .rdx-hero-lede,
[data-redesign] .rdx-hero p,
[data-redesign] main > .sx-hero:not(.sx-hero--tool) .sx-hero-lede { color: #DCE4FF; }
[data-redesign] .rdx-hero a:not(.rdx-btn):not(.sx-btn) { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }
[data-redesign] .rdx-hero .rdx-btn { background: #fff; border-color: #fff; color: var(--zx-deep); }
[data-redesign] .rdx-hero .rdx-btn:hover { background: #E8EEFF; border-color: #E8EEFF; color: var(--zx-deep); }
[data-redesign] .rdx-hero .rdx-btn--outline { background: transparent; border-color: rgba(255,255,255,0.75); color: #fff; }
[data-redesign] .rdx-hero .rdx-byline,
[data-redesign] .rdx-hero .rdx-byline a,
[data-redesign] .rdx-hero .rdx-btn-note,
[data-redesign] .rdx-hero-note { color: #C9D5EE; }
[data-redesign] .rdx-hero .rdx-picker label,
[data-redesign] .rdx-hero .rdx-quick,
[data-redesign] .rdx-hero .rdx-quick p,
[data-redesign] .rdx-hero .rdx-stats,
[data-redesign] .rdx-hero .rdx-stats * { color: var(--r-ink); }
[data-redesign] .rdx-hero .rdx-picker .rdx-btn { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-hero .rdx-picker,
[data-redesign] .rdx-hero .rdx-quick,
[data-redesign] main > .sx-hero .sx-panel { box-shadow: 0 30px 70px rgba(0, 5, 61, 0.45); border: 0; }
/* A hero with no side panel centres its text, as Zoom's does. */
[data-redesign] .rdx-hero > .rdx-wrap:not(.rdx-hero-grid) { text-align: center; }
[data-redesign] .rdx-hero > .rdx-wrap:not(.rdx-hero-grid) > * { margin-left: auto; margin-right: auto; }
[data-redesign] main > .sx-hero:not(.sx-hero--tool):not(.sx-hero--state) .sx-hero-copy { text-align: center; margin-left: auto; margin-right: auto; }
[data-redesign] main > .sx-hero:not(.sx-hero--tool):not(.sx-hero--state) .sx-hero-lede { margin-left: auto; margin-right: auto; }
[data-redesign] main > .sx-hero .sx-panel { max-width: 1040px; margin: 0 auto; }

/* Section heads: centred serif, one column. */
[data-redesign] .rdx-section-head,
[data-redesign] .rdx-section-head--split { display: block; text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
[data-redesign] .rdx-section-head h2 { margin: 0 0 0.8rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; }
[data-redesign] .rdx-section { padding: 5rem 0; }
@media (max-width: 700px) { [data-redesign] .rdx-section { padding: 3.25rem 0; } }

/* Cards: rounded, soft tint, serif title, blue link line. */
[data-redesign] .rdx-card { border-radius: 16px; padding: 1.5rem 1.5rem 1.4rem; border: 1px solid var(--r-line); background: #fff; box-shadow: none; }
[data-redesign] .rdx-section--white .rdx-card { background: linear-gradient(160deg, #F4F7FF 0%, #FFFFFF 70%); }
[data-redesign] a.rdx-card:hover { border-color: var(--sx-blue); box-shadow: 0 16px 36px rgba(10, 26, 58, 0.10); transform: translateY(-3px); }
[data-redesign] .rdx-card-label { align-self: flex-start; text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--sx-blue-dark); background: var(--sx-mist); border-radius: 6px; padding: 0.2rem 0.55rem; }
[data-redesign] .rdx-card-title { font-family: var(--zx-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; }
[data-redesign] .rdx-card-more { color: var(--sx-blue-dark); font-weight: 700; }
[data-redesign] .rdx-section--ink .rdx-card { background: linear-gradient(160deg, #13256B 0%, #0A1450 100%); border-color: rgba(255,255,255,0.12); }
[data-redesign] .rdx-section--ink .rdx-card-label { background: rgba(255,255,255,0.14); color: #fff; }
[data-redesign] .rdx-section--ink .rdx-card-more { color: #fff; }
@media (prefers-reduced-motion: reduce) { [data-redesign] a.rdx-card:hover { transform: none; } }

/* Closing band: Zoom closes on white with a centred serif line and buttons. */
[data-redesign] .rdx-section--sun.rdx-closer { background: #fff; color: var(--r-ink); border-top: 1px solid var(--r-line); padding: 5rem 0 5.5rem; }
[data-redesign] .rdx-closer-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
[data-redesign] .rdx-section--sun.rdx-closer h2 { color: var(--r-ink); font-size: clamp(2rem, 4vw, 3rem); }
[data-redesign] .rdx-section--sun.rdx-closer p { color: var(--r-ink-2); margin: 0 auto; }
[data-redesign] .rdx-section--sun.rdx-closer .rdx-btn { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-section--sun.rdx-closer .rdx-btn:hover { background: var(--sx-blue-dark); border-color: var(--sx-blue-dark); }

/* Title bands on articles and content pages: light, centred serif. */
[data-redesign] .rdx-posthead { background: linear-gradient(180deg, #EEF3FF 0%, #F8FAFF 100%); border-bottom: 1px solid var(--r-line); }
[data-redesign] .rdx-posthead h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; }
[data-redesign] .rdx-posthead-inner { padding-top: 3rem; padding-bottom: 2.5rem; }

/* Panels that sat on yellow or grey: Zoom's white card with a lilac edge. */
[data-redesign] .rdx-trust { background: #fff; border: 2px solid #D9CCFF; border-radius: 16px; }
[data-redesign] .rdx-toc { background: #F4F7FF; border-radius: 16px; }
[data-redesign] .jk-final-cta { background: linear-gradient(160deg, #1B4BD8 0%, #00053D 100%); border-radius: 16px; }
[data-redesign] .jk-final-btn,
[data-redesign] .article-body .jk-cta a,
[data-redesign] .rdx-bc-btn,
[data-redesign] .article-body .jk-compare .jk-compare-buy a { border-radius: 8px; }
[data-redesign] .rdx-pick { border-radius: 16px; border: 2px solid #D9CCFF; border-top: 2px solid #D9CCFF; }
[data-redesign] .rdx-pick .rdx-btn { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
[data-redesign] .rdx-stategrid a { border-radius: 10px; }
[data-redesign] .rdx-quick { border-radius: 16px; }
[data-redesign] .rdx-quick-head { font-family: var(--zx-display); font-weight: 500; font-size: 1.35rem; }
[data-redesign] .rdx-guidelist { border-top-color: var(--sx-blue); }
[data-redesign] .rdx-gl-title { font-family: var(--zx-display); font-weight: 500; font-size: 1.25rem; }

/* Phones: the first buy button in a post must stay on the first screen (the
   fold budget in README "Where the first CTA lands"), so the announcement
   strip hides and the title band keeps its old, tighter padding. */
@media (max-width: 700px) {
  [data-redesign] .zx-announce { display: none; }
  [data-redesign] .rdx-posthead-inner { padding: 1.35rem 1.25rem 1.25rem; }
  [data-redesign] .rdx-posthead h1 { font-size: 1.7rem; }
}
@media (max-width: 700px) {
  [data-redesign] .rdx-posthead h1 { font-size: 1.5rem; line-height: 1.14; margin-bottom: 0.5rem; }
  [data-redesign] .rdx-posthead .rdx-breadcrumb { margin-bottom: 0.45rem; }
  [data-redesign] .rdx-posthead-inner { padding: 1rem 1.25rem 1rem; }
  [data-redesign] .rdx-posthead + .rdx-article { padding-top: 1rem; }
  [data-redesign] .rdx-article > .rdx-pick { padding: 1.1rem 1.05rem 1.15rem; }
}
@media (max-width: 700px) {
  [data-redesign] .rdx-posthead .rdx-byline { font-size: 0.78rem; line-height: 1.4; }
  [data-redesign] .rdx-article > .affiliate-note { margin-bottom: 0.9rem; font-size: 0.8rem; line-height: 1.45; }
  [data-redesign] .rdx-article > .rdx-pick .rdx-eyebrow { margin-bottom: 0.4rem; }
  [data-redesign] .rdx-article > .rdx-pick .rdx-pick-name { font-size: 1.15rem; margin-bottom: 0.3rem; }
  [data-redesign] .rdx-article > .rdx-pick .rdx-pick-specs { font-size: 0.82rem; margin-bottom: 0.5rem; }
  [data-redesign] .rdx-article > .rdx-pick .rdx-pick-why { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.85rem; }
}


/* -- 13. Original colours on the Zoom layout ---------------------------------
   Rae, 25 Sep 2026: keep the Zoom format, not its colours. Everything above
   sets the layout; this block puts back the yellow, black and white from the
   v2 design wherever a Zoom colour had been used. */
[data-redesign] ::selection { background: var(--r-sun); color: var(--r-ink); }
[data-redesign] :focus-visible { outline-color: var(--r-ink); }
[data-redesign] a { text-decoration-color: var(--r-sun-deep); }
[data-redesign] a:hover { text-decoration-color: var(--r-ink); }
[data-redesign] .sx-field input:focus,
[data-redesign] .sx-field select:focus,
[data-redesign] .sx-money input:focus { border-color: var(--r-ink); box-shadow: 0 0 0 3px rgba(220, 170, 69, 0.45); }

/* Buttons: black by default, yellow on black, outline as the quieter one. */
[data-redesign] .rdx-btn--sun { background: var(--r-sun); border-color: var(--r-sun); color: var(--r-ink); }
[data-redesign] .rdx-btn--sun:hover { background: #c9973a; border-color: #c9973a; color: var(--r-ink); }
[data-redesign] .zx-btn--white { background: var(--r-ink); border-color: var(--r-ink); color: #fff; }
[data-redesign] .zx-btn--white:hover { background: #2e2e2e; border-color: #2e2e2e; color: #fff; }
[data-redesign] .rdx-section--ink .zx-btn--white { background: var(--r-sun); border-color: var(--r-sun); color: var(--r-ink); }
[data-redesign] .rdx-section--ink .zx-btn--white:hover { background: #c9973a; border-color: #c9973a; color: var(--r-ink); }
[data-redesign] .zx-btn--ghost { background: transparent; border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .zx-btn--ghost:hover { background: var(--r-ink); color: #fff; }
[data-redesign] .zx-btn--outline { border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .zx-btn--outline:hover { background: var(--r-ink); color: #fff; }
[data-redesign] .sx-topbar-actions .sx-btn--outline { border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .sx-topbar-actions .sx-btn--outline:hover { background: var(--r-ink); color: #fff; }
[data-redesign] .sx-topbar nav a:hover { background: var(--r-sun-soft); color: var(--r-ink); }

/* Announcement strip: black, with a yellow button. */
[data-redesign] .zx-announce { background: var(--r-black); color: #e8e8e2; }
[data-redesign] .zx-announce-btn { background: var(--r-sun); color: var(--r-ink); }
[data-redesign] .zx-announce-btn:hover { background: #fff; color: var(--r-ink); }

/* Heroes and title bands: solid yellow, black text, as before. */
[data-redesign] .zx-hero,
[data-redesign] .rdx-hero,
[data-redesign] .rdx-posthead,
[data-redesign] main > .sx-hero,
[data-redesign] .sx-hero--state { background: var(--r-sun); color: var(--r-ink); border-bottom: 0; }
[data-redesign] .zx-hero h1,
[data-redesign] .rdx-hero h1,
[data-redesign] .rdx-posthead h1,
[data-redesign] main > .sx-hero h1,
[data-redesign] .sx-hero--state h1 { color: #000; }
[data-redesign] .zx-hero-head p,
[data-redesign] .rdx-hero .rdx-hero-lede,
[data-redesign] .rdx-hero p,
[data-redesign] main > .sx-hero .sx-hero-lede,
[data-redesign] .sx-hero--state .sx-hero-lede { color: #2a2a26; }
[data-redesign] .sx-hero--state .sx-byline,
[data-redesign] .sx-hero--state .sx-crumbs,
[data-redesign] .rdx-hero .rdx-byline,
[data-redesign] .rdx-hero .rdx-btn-note,
[data-redesign] .rdx-hero-note,
[data-redesign] .rdx-posthead .rdx-breadcrumb,
[data-redesign] .rdx-posthead .rdx-byline { color: #3a3a34; }
[data-redesign] .sx-hero--state .sx-crumbs a,
[data-redesign] .sx-hero--state .sx-byline a,
[data-redesign] .rdx-hero a:not(.rdx-btn):not(.sx-btn),
[data-redesign] .rdx-hero .rdx-byline a,
[data-redesign] .rdx-posthead .rdx-breadcrumb a,
[data-redesign] .rdx-posthead .rdx-byline a { color: var(--r-ink); text-decoration-color: var(--r-ink); }
[data-redesign] .rdx-hero .rdx-btn { background: var(--r-ink); border-color: var(--r-ink); color: #fff; }
[data-redesign] .rdx-hero .rdx-btn:hover { background: #2e2e2e; border-color: #2e2e2e; color: #fff; }
[data-redesign] .rdx-hero .rdx-btn--outline { background: transparent; border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .rdx-posthead { border-bottom: 0; }
[data-redesign] .sx-hero--tool { background: var(--r-sun); }
[data-redesign] .zx-hero-tool .sx-est,
[data-redesign] .sx-hero--state .sx-est,
[data-redesign] .rdx-hero .rdx-picker,
[data-redesign] .rdx-hero .rdx-quick,
[data-redesign] main > .sx-hero .sx-panel,
[data-redesign] .sx-est { box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 18px 40px rgba(120, 80, 0, 0.18); }

/* The fixed card row sits on yellow: black cards, yellow label chips. */
[data-redesign] .zx-rowcard,
[data-redesign] .zx-rowcard--a,
[data-redesign] .zx-rowcard--b,
[data-redesign] .zx-rowcard--c,
[data-redesign] .zx-rowcard--d,
[data-redesign] .zx-rowcard--e { background: var(--r-black); border-color: var(--r-black); color: #fff; }
[data-redesign] .zx-rowcard:hover { border-color: #fff; color: #fff; }
[data-redesign] .zx-rowcard-label { background: var(--r-sun); color: var(--r-ink); }

/* Names row and dark sections. */
[data-redesign] .zx-trusted li { color: var(--r-ink-3); }
[data-redesign] .rdx-section--ink { background: var(--r-black); }
[data-redesign] .rdx-bc-seller,
[data-redesign] .rdx-bc-price,
[data-redesign] .rdx-bc-specs dt,
[data-redesign] .rdx-bc-foot p { color: #a8a8a0; }
[data-redesign] .rdx-bc-chip { border-color: #55554f; }
[data-redesign] .rdx-bc-chip:hover { border-color: var(--r-sun); }
[data-redesign] .rdx-bc-chip[aria-pressed="true"],
[data-redesign] .rdx-bc-card.is-featured .rdx-bc-tag { background: var(--r-sun); border-color: var(--r-sun); color: var(--r-ink); }
[data-redesign] .rdx-bc-card.is-featured,
[data-redesign] .rdx-bc.is-filtered .rdx-bc-card.is-match { border-color: var(--r-sun); }
[data-redesign] .rdx-bc-card.is-featured .rdx-bc-btn { background: var(--r-sun); border-color: var(--r-sun); color: var(--r-ink); }
[data-redesign] .rdx-bc-card.is-featured .rdx-bc-btn:hover { background: #c9973a; border-color: #c9973a; color: var(--r-ink); }
[data-redesign] .rdx-section--ink .rdx-card { background: var(--r-black-2); border-color: var(--r-black-line); }
[data-redesign] .rdx-section--ink .rdx-card-label { background: var(--r-sun); color: var(--r-ink); }
[data-redesign] .rdx-section--ink .rdx-card-more { color: var(--r-sun); }
[data-redesign] .rdx-section--ink a.rdx-card:hover { border-color: var(--r-sun); }

/* Feature block: black icon on yellow, the accent line in copper. */
[data-redesign] .zx-feature-icon { background: var(--r-sun); }
[data-redesign] .zx-feature-icon svg { stroke: var(--r-ink); }
[data-redesign] .zx-accent { color: var(--r-copper); }
[data-redesign] .zx-frame { background: var(--r-sun-soft); }
[data-redesign] .zx-frame-inner { box-shadow: 0 18px 40px rgba(120, 80, 0, 0.14); }
[data-redesign] .zx-frame .sx-quick-out,
[data-redesign] .sx-quick-out,
[data-redesign] .sx-backup-next,
[data-redesign] .sx-midcta,
[data-redesign] .sx-postnext-tool { background: var(--r-bg-soft); }

/* Tabs: grey section, black selected tab, soft yellow panel. */
[data-redesign] .zx-tabs-section,
[data-redesign] .rdx-section--soft { background: var(--r-bg-soft); }
[data-redesign] .zx-tabs-section .sx-tablist [role="tab"][aria-selected="true"] { border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .zx-tabs-section .sx-tabpanel,
[data-redesign] .sx-tabpanel { background: var(--r-sun-soft); }
[data-redesign] .sx-tablist [role="tab"]:hover { background: var(--r-sun-soft); color: var(--r-ink); }
[data-redesign] .sx-tab-more a { color: var(--r-ink); }

/* Cards on white. */
[data-redesign] .sx-card:hover,
[data-redesign] a.rdx-card:hover { border-color: var(--r-ink); box-shadow: 0 14px 30px rgba(17, 17, 17, 0.10); }
[data-redesign] .sx-card:hover .sx-card-title { color: var(--r-ink); }
[data-redesign] .rdx-section--white .rdx-card { background: #fff; }
[data-redesign] .rdx-card-label { background: var(--r-sun-soft); color: var(--r-copper); }
[data-redesign] .rdx-card-more { color: var(--r-ink); }

/* Three cards: black, the example estimate, and soft yellow. */
[data-redesign] .zx-three-card--blue { background: var(--r-black); color: #fff; }
[data-redesign] .zx-three-card--blue .zx-three-text { color: #d6d6d0; }
[data-redesign] .zx-three-card--light { background: var(--r-sun-soft); border: 0; }
[data-redesign] .zx-three-card--shot,
[data-redesign] .sx-shot { background: var(--r-sun); }
[data-redesign] .sx-shot-card { box-shadow: 0 18px 40px rgba(120, 80, 0, 0.22); }
[data-redesign] .sx-shot-main strong { color: var(--r-ink); }
[data-redesign] .sx-shot-label { background: var(--r-sun-soft); color: var(--r-copper); }
[data-redesign] .sx-shot-bar span { background: var(--r-sun-deep); }

/* Closing sections: yellow band, centred, black button. */
[data-redesign] .zx-closer,
[data-redesign] .rdx-section--sun.rdx-closer { background: var(--r-sun); border-top: 0; }
[data-redesign] .zx-closer h2,
[data-redesign] .rdx-section--sun.rdx-closer h2 { color: var(--r-ink); }
[data-redesign] .rdx-section--sun.rdx-closer p { color: #2a2a26; }
[data-redesign] .rdx-section--sun.rdx-closer .rdx-btn { background: var(--r-ink); border-color: var(--r-ink); color: #fff; }
[data-redesign] .rdx-section--sun.rdx-closer .rdx-btn:hover { background: #2e2e2e; border-color: #2e2e2e; }
[data-redesign] .zx-closer .zx-btn--outline { background: transparent; }

/* Calculator result and state page details. */
[data-redesign] .sx-figs .is-key { background: var(--r-sun-soft); }
[data-redesign] .sx-figs .is-key dd { color: var(--r-ink); }
[data-redesign] .sx-insights li::before { background: var(--r-sun-deep); }
[data-redesign] .sx-bk.is-pick { border-color: var(--r-ink); box-shadow: 0 12px 26px rgba(17, 17, 17, 0.10); }
[data-redesign] .sx-bk-tag { background: var(--r-sun-soft); color: var(--r-copper); }
[data-redesign] .sx-bk:not(.is-pick) .sx-btn { background: #fff; color: var(--r-ink); border-color: var(--r-ink); }
[data-redesign] .sx-bk:not(.is-pick) .sx-btn:hover { background: var(--r-ink); color: #fff; }
[data-redesign] .sx-steps li::before { border-color: var(--r-ink); color: var(--r-ink); }
[data-redesign] .sx-table tbody th a,
[data-redesign] .sx-how summary,
[data-redesign] .sx-crumbs a:hover { color: var(--r-ink); }
[data-redesign] .rdx-stategrid a:hover,
[data-redesign] .rdx-stategrid a:focus-visible { background: var(--r-sun); border-color: var(--r-sun-deep); color: var(--r-ink); }
[data-redesign] .rdx-stategrid a:hover .rdx-sg-val { color: var(--r-ink); }

/* Panels, product card and end-of-post block, as in v2. */
[data-redesign] .rdx-trust { background: var(--r-sun-soft); border: 0; }
[data-redesign] .rdx-toc { background: var(--r-bg-soft); }
[data-redesign] .rdx-pick { border: 1.5px solid var(--r-ink); border-top: 6px solid var(--r-sun); }
[data-redesign] .rdx-pick .rdx-btn { background: var(--r-ink); border-color: var(--r-ink); color: #fff; }
[data-redesign] .rdx-pick .rdx-eyebrow { color: var(--r-copper); }
[data-redesign] .jk-final-cta { background: var(--r-sun); }
[data-redesign] .jk-final-cta h3 { color: var(--r-ink); }
[data-redesign] .jk-final-cta p,
[data-redesign] .jk-final-cta .jk-final-note { color: #2a2a26; }
[data-redesign] .jk-final-btn { background: var(--r-ink); color: #fff; }
[data-redesign] .jk-final-btn:hover { background: #2e2e2e; color: #fff; }
[data-redesign] .article-body .jk-compare { border-color: var(--r-ink); }
[data-redesign] .article-body .jk-compare thead th { background: var(--r-ink); }
[data-redesign] .article-body .jk-compare .jk-compare-buy a { background: var(--r-ink); }
[data-redesign] .article-body .jk-compare .jk-compare-buy a:hover { background: #2e2e2e; }
[data-redesign] .faqs details[open] { border-color: var(--r-ink); }
[data-redesign] .rdx-guidelist { border-top-color: var(--r-ink); }

/* Footer: black, yellow column heads, as before. */
[data-redesign] .site-footer { background: var(--r-black); color: #d6d6d0; }
[data-redesign] .footer-top { border-bottom-color: var(--r-black-line); }
[data-redesign] .footer-col-head { color: var(--r-sun); }
[data-redesign] .footer-col a { color: #e8e8e2; }
[data-redesign] .footer-col a:hover { color: var(--r-sun); }
[data-redesign] .site-footer .tagline-small,
[data-redesign] .site-footer .legal,
[data-redesign] .site-footer .affiliate-disclosure { color: #a8a8a0; }
[data-redesign] .site-footer .affiliate-disclosure a { text-decoration-color: var(--r-sun); }
[data-redesign] main > .sx-hero:not(.sx-hero--tool) { background: var(--r-sun); color: var(--r-ink); }
[data-redesign] main > .sx-hero:not(.sx-hero--tool) h1 { color: #000; }
[data-redesign] main > .sx-hero:not(.sx-hero--tool) .sx-hero-lede { color: #2a2a26; }
/* State pages: the backup pick sits right under the at-a-glance costs, so the
   first buy link is near the top (it had drifted ~14,000px down on a phone). */
[data-redesign] .sx-backup--top { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--r-line); max-width: 760px; }
[data-redesign] .sx-backup--top h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Tabs in Zoom's format: guide list and a button left, a picture right. */
[data-redesign] .zx-tabsplit { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; }
[data-redesign] .zx-tablist-links { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.9rem; }
[data-redesign] .zx-tablist-links li { position: relative; padding-left: 1.1rem; }
[data-redesign] .zx-tablist-links li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--r-ink); }
[data-redesign] .zx-tablist-links a { color: var(--r-ink); text-decoration: none; }
[data-redesign] .zx-tablist-links a:hover strong { text-decoration: underline; text-decoration-color: var(--r-sun-deep); text-decoration-thickness: 2px; }
[data-redesign] .zx-tablist-links strong { font-weight: 700; }
[data-redesign] .zx-tablist-links span { display: block; font-size: 0.92rem; color: var(--r-ink-2); line-height: 1.5; }
[data-redesign] .zx-tabvisual { background: var(--r-sun); border-radius: 20px; padding: 2.5rem 2rem; display: grid; place-items: center; min-height: 280px; }
[data-redesign] .zx-tabvisual-card { background: #fff; border-radius: 14px; padding: 1.25rem 1.3rem; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 18px 40px rgba(120, 80, 0, 0.22); }
[data-redesign] .zx-tabvisual-label { align-self: flex-start; font-size: 0.75rem; font-weight: 700; background: var(--r-sun-soft); color: var(--r-copper); border-radius: 6px; padding: 0.15rem 0.5rem; }
[data-redesign] .zx-tabvisual-title { font-family: var(--zx-display); font-size: 1.3rem; line-height: 1.25; color: var(--r-ink); }
[data-redesign] .zx-tabvisual-lines { display: grid; gap: 0.4rem; }
[data-redesign] .zx-tabvisual-lines i { display: block; height: 8px; border-radius: 999px; background: var(--r-bg-soft); }
[data-redesign] .zx-tabvisual-lines i:nth-child(2) { width: 85%; }
[data-redesign] .zx-tabvisual-lines i:nth-child(3) { width: 60%; }
[data-redesign] .zx-tabvisual-count { font-size: 0.8rem; color: var(--r-ink-3); }
[data-redesign] .zx-tabs-section .sx-tabpanel { background: #fff; border: 1px solid var(--r-line); }
@media (max-width: 860px) { [data-redesign] .zx-tabsplit { grid-template-columns: 1fr; } [data-redesign] .zx-tabvisual { min-height: 0; padding: 1.5rem; } }

/* Hero cards carry an icon, where Zoom's carry a product picture.
   Chad, task 6299: put the icon above the label rather than beside it. */
[data-redesign] .zx-rowcard-top { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
[data-redesign] .zx-rowcard-icon { width: 34px; height: 34px; fill: none; stroke: var(--r-sun); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 34px; order: -1; }

/* Estimator's neutral backup note (replaces the old product cards) */
[data-redesign] .sx-backup-note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--r-ink-3); }
[data-redesign] .sx-backup-note a { color: var(--r-ink); font-weight: 600; }
[data-redesign] .rdx-bc-foot a { color: #fff; text-decoration-color: var(--r-sun); }
[data-redesign] .rdx-bc-link { margin: 0.9rem 0 0; font-size: 0.9rem; }
[data-redesign] .rdx-bc-link a { color: #fff; font-weight: 650; text-decoration-color: var(--r-sun); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- Backup comparison table (BackupTable.astro), used site-wide ---- */
@media (min-width: 860px) { [data-redesign] .bt:not(.bt--vs) tbody th { min-width: 13rem; } .bt-tag { white-space: nowrap; } }
/* Comparison tables. Desktop: a real table. Phone: each row is a card. */
[data-redesign] .bt-wrap { border: 1px solid var(--r-line); border-radius: 12px; overflow: hidden; background: #fff; }
[data-redesign] .bt { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
[data-redesign] .bt th, [data-redesign] .bt td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--r-line-soft); }
[data-redesign] .bt thead th { background: var(--r-ink); color: #fff; font-size: 0.82rem; font-weight: 650; white-space: nowrap; }
[data-redesign] .bt tbody tr:last-child > * { border-bottom: 0; }
[data-redesign] .bt tbody th { font-weight: 700; color: var(--r-ink); }
[data-redesign] .bt td { color: var(--r-ink-2); font-variant-numeric: tabular-nums; }
[data-redesign] .bt-name { display: block; }
[data-redesign] .bt-tag { display: inline-block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 650; color: var(--r-ink); background: var(--r-sun-soft); border-radius: 6px; padding: 0.1rem 0.45rem; }
[data-redesign] .bt-suits { min-width: 14rem; }
[data-redesign] .bt-go a { font-weight: 650; color: var(--r-ink); text-decoration: underline; text-decoration-color: var(--r-sun); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
[data-redesign] .bt-go a:hover { text-decoration-color: var(--r-ink); }
[data-redesign] .bt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-redesign] .bt--vs tbody th { width: 22%; background: var(--r-bg-soft); }
[data-redesign] .bt--vs td { width: 39%; }
[data-redesign] .bt--vs a { color: var(--r-ink); font-weight: 650; text-decoration-color: var(--r-sun); text-decoration-thickness: 2px; }

[data-redesign] .bt-fine { margin: 0.8rem 0 0; font-size: 0.84rem; color: var(--r-ink-3); line-height: 1.5; }
[data-redesign] .sx-backup-compare { margin: 2.5rem 0; }
[data-redesign] .sx-backup-compare > p { color: var(--r-ink-2); }
[data-redesign] .article-body + .sx-backup-compare .bt, [data-redesign] .sx-backup-compare .bt { font-size: 0.9rem; }
[data-redesign] .rdx-section--soft { background: var(--r-bg-soft); }

/* ---- In-article retailer links: quiet text links, not buttons ---- */
[data-redesign] .jk-cta { margin: 0.6rem 0 1.4rem; }
[data-redesign] .jk-cta a, [data-redesign] .article-body .jk-cta a {
  display: inline; background: none !important; color: var(--r-ink) !important; padding: 0 !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; font-weight: 650; font-size: 1rem;
  text-decoration: underline; text-decoration-color: var(--r-sun); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
[data-redesign] .jk-cta a::after { content: none !important; }
[data-redesign] .article-body .jk-compare .jk-compare-buy a {
  background: none !important; color: var(--r-ink) !important; padding: 0 !important; border-radius: 0 !important;
  font-weight: 650; text-decoration: underline; text-decoration-color: var(--r-sun); text-decoration-thickness: 2px;
}

/* ---- Tighter rhythm site-wide (task 6299: less empty space) ---- */
[data-redesign] .rdx-hero { padding: 2.5rem 0 2.6rem; }
[data-redesign] .rdx-section { padding: 3rem 0; }
[data-redesign] .rdx-section-head { margin-bottom: 1.5rem; }
@media (max-width: 760px) {
  [data-redesign] .rdx-hero { padding: 1.75rem 0 1.9rem; }
  [data-redesign] .rdx-section { padding: 2rem 0; }
  [data-redesign] .rdx-section-head { margin-bottom: 1.1rem; }
}
@media (max-width: 859px) {
  [data-redesign] .bt-wrap { border: 0; background: none; border-radius: 0; }
  [data-redesign] .bt, [data-redesign] .bt tbody, [data-redesign] .bt tr, [data-redesign] .bt th, [data-redesign] .bt td { display: block; width: auto; }
  [data-redesign] .bt thead { display: none; }
  [data-redesign] .bt tbody tr { background: #fff; border: 1px solid var(--r-line); border-radius: 12px; margin: 0 0 0.7rem; padding: 0.3rem 0; }
  [data-redesign] .bt tbody th { border-bottom: 1px solid var(--r-line-soft); padding: 0.7rem 0.9rem; }
  [data-redesign] .bt td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.9rem; border: 0; }
  [data-redesign] .bt td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--r-ink-3); flex: none; }
  [data-redesign] .bt td.bt-suits { display: block; min-width: 0; }
  [data-redesign] .bt td.bt-suits::before { display: block; margin-bottom: 0.15rem; }
  [data-redesign] .bt td.bt-go { padding-bottom: 0.7rem; }
  [data-redesign] .bt--vs tbody th { width: auto; }
  [data-redesign] .bt--vs td { display: block; width: auto; }
  [data-redesign] .bt--vs td::before { display: block; margin-bottom: 0.1rem; }
}
/* Checklist fixes: visible focus on the state picker, balanced headings. */
[data-redesign] .rdx-picker select:focus-visible { box-shadow: 0 0 0 3px rgba(220, 170, 69, 0.55); }
[data-redesign] h1, [data-redesign] h2, [data-redesign] h3 { text-wrap: balance; }
[data-redesign] a, [data-redesign] button { touch-action: manipulation; }