/*
 * Topic hub editorial system v6
 *
 * The hero photographs establish each page's palette. This layer carries the
 * same colours into long-form content through small, repeatable details rather
 * than filling every section with a tinted box.
 */

.nuguna-topic-hub {
  --hub-paper: #fff;
  --hub-ink-v6: #102b3f;
  --hub-copy-v6: #3d566a;
  --hub-line-v6: #e4ebee;
  --hub-accent-wash: color-mix(in srgb, var(--hub-accent) 8%, #fff);
  --hub-secondary-wash: color-mix(in srgb, var(--hub-accent-2) 8%, #fff);
}

.topic-hub-body,
.topic-hub-content {
  background: var(--hub-paper);
}

.topic-hub-section {
  isolation: isolate;
  overflow: visible;
  position: relative;
}

.topic-hub-section-heading-row {
  align-items: center;
  display: flex;
  gap: 13px;
  margin-bottom: 21px;
}

.topic-hub-section-heading-row .topic-hub-section-icon {
  align-items: center;
  background: var(--hub-accent-wash);
  border: 1px solid color-mix(in srgb, var(--hub-accent) 20%, #e7edef);
  border-radius: 12px;
  box-shadow: inset 0 0 0 4px #fff;
  color: var(--hub-accent-ink);
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 17px;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  line-height: 1;
}

.topic-hub-section-heading-row h2 {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  padding-bottom: 12px;
}

.topic-hub-section-heading-row + p,
.topic-hub-section-eyebrow + .topic-hub-section-heading-row + p {
  color: #304e63;
  font-size: 16.5px;
}

.topic-hub-section h3 {
  align-items: center;
  display: flex;
  gap: 9px;
}

.topic-hub-section h3::before {
  background: var(--hub-accent);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--hub-accent-wash);
  content: "";
  flex: 0 0 8px;
  height: 8px;
}

.topic-hub-section strong,
.topic-hub-section b,
.topic-hub-posts strong,
.topic-hub-faq strong {
  color: var(--hub-deep);
}

.topic-hub-section a:not(.topic-hub-button),
.topic-hub-posts a:not(.topic-hub-button) {
  color: var(--hub-accent-ink);
  text-decoration-color: color-mix(in srgb, var(--hub-accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* One calm photo break per topic page. Product clusters keep their real pack
   photography; service clusters use the matching editorial scene. */
.topic-hub-editorial-visual {
  background: var(--hub-accent-wash);
  border: 1px solid color-mix(in srgb, var(--hub-accent) 18%, #e3eaed);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(16, 43, 63, .08);
  height: clamp(238px, 26vw, 340px);
  margin: 8px 0 clamp(44px, 5vw, 66px);
  overflow: hidden;
  position: relative;
}

.topic-hub-editorial-visual::before {
  background: var(--hub-accent);
  border-radius: 999px;
  content: "";
  height: 5px;
  left: 22px;
  position: absolute;
  top: 20px;
  width: 52px;
  z-index: 2;
}

.topic-hub-editorial-visual::after {
  background: var(--hub-accent-2);
  border: 6px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  bottom: 18px;
  box-shadow: 0 8px 20px rgba(16, 43, 63, .13);
  content: "";
  height: 30px;
  position: absolute;
  right: 20px;
  width: 30px;
  z-index: 2;
}

.topic-hub-editorial-visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.topic-hub-editorial-visual[data-cluster="convenience-usim"] img {
  object-fit: cover;
  padding: 0;
}

.topic-hub-editorial-visual figcaption {
  background: rgba(255, 255, 255, .94);
  border-left: 3px solid var(--hub-accent);
  bottom: 18px;
  color: var(--hub-copy-v6);
  font-size: 12.5px;
  left: 22px;
  line-height: 1.5;
  max-width: min(520px, calc(100% - 92px));
  padding: 8px 11px;
  position: absolute;
  z-index: 2;
}

/* Product guidance is staged as one editorial photograph: a full-bleed store
   scene, an optional exact pack cutout, and copy placed in the scene's natural
   negative space. */
.topic-hub-editorial-visual.is-scene {
  background: #f8fbfb;
  border-color: rgba(25, 74, 90, .14);
  box-shadow: 0 22px 52px rgba(16, 43, 63, .11);
  height: clamp(276px, 27vw, 340px);
}

.topic-hub-editorial-visual.is-scene::before {
  display: none;
}

.topic-hub-editorial-visual.is-scene::after {
  display: none;
}

.topic-hub-editorial-visual.is-scene .topic-hub-editorial-backdrop {
  background-image: var(--topic-editorial-backdrop, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.topic-hub-editorial-visual.is-composed .topic-hub-editorial-product {
  bottom: 1.5%;
  filter: drop-shadow(0 18px 15px rgba(18, 51, 65, .2));
  height: 92% !important;
  left: auto;
  object-fit: contain;
  position: absolute;
  right: 14%;
  top: auto;
  width: auto !important;
  z-index: 2;
}

.topic-hub-editorial-visual.is-scene figcaption {
  align-items: flex-start;
  background: transparent;
  border: 0;
  bottom: auto;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  left: clamp(24px, 4vw, 48px);
  line-height: 1.5;
  max-width: min(350px, 38%);
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.topic-hub-editorial-label {
  background: #087fa8;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(8, 127, 168, .18);
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 8px 11px;
  width: max-content;
}

.topic-hub-editorial-visual.is-scene figcaption strong {
  color: #102b3f;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.5;
  text-wrap: balance;
}

.topic-hub-editorial-visual[data-cluster="kt-prepaid"] {
  border-color: rgba(8, 127, 168, .2);
}

.topic-hub-editorial-visual[data-cluster="kt-prepaid"] .topic-hub-editorial-backdrop {
  object-position: 58% center;
}

.topic-hub-editorial-visual[data-cluster="convenience-usim"] .topic-hub-editorial-product {
  bottom: 2.5%;
  height: 82% !important;
}

.topic-hub-editorial-visual[data-cluster="convenience-usim"] .topic-hub-editorial-product.is-kt {
  left: auto;
  right: calc(50% + 10px);
}

.topic-hub-editorial-visual[data-cluster="convenience-usim"] .topic-hub-editorial-product.is-lg {
  left: calc(50% + 10px);
  right: auto;
}

.topic-hub-editorial-visual[data-cluster="daiso-usim"] {
  border-color: rgba(210, 58, 51, .2);
}

.topic-hub-editorial-visual[data-cluster="daiso-usim"] .topic-hub-editorial-product {
  bottom: 2%;
  height: 88% !important;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.topic-hub-editorial-visual[data-cluster="daiso-usim"] .topic-hub-editorial-label {
  background: #d43f38;
  box-shadow: 0 8px 18px rgba(190, 48, 43, .18);
}

/* Structured information gets colour only where it explains hierarchy. */
.topic-hub-section--facts .topic-hub-cards,
.topic-hub-section--steps .topic-hub-cards,
.topic-hub-section--step .topic-hub-cards,
.topic-hub-section--checklist .topic-hub-cards {
  gap: 14px;
}

.topic-hub-section--facts .topic-hub-card,
.topic-hub-section--steps .topic-hub-card,
.topic-hub-section--step .topic-hub-card,
.topic-hub-section--checklist .topic-hub-card {
  background: #fff;
  border: 1px solid var(--hub-line-v6);
  border-radius: 16px;
  box-shadow: 0 9px 24px rgba(16, 43, 63, .055);
  padding: 21px 20px;
}

.topic-hub-section--facts .topic-hub-card:nth-child(3n + 1),
.topic-hub-section--steps .topic-hub-card:nth-child(3n + 1),
.topic-hub-section--step .topic-hub-card:nth-child(3n + 1) {
  border-top: 3px solid var(--hub-accent);
}

.topic-hub-section--facts .topic-hub-card:nth-child(3n + 2),
.topic-hub-section--steps .topic-hub-card:nth-child(3n + 2),
.topic-hub-section--step .topic-hub-card:nth-child(3n + 2) {
  border-top: 3px solid var(--hub-accent-2);
}

.topic-hub-section--facts .topic-hub-card:nth-child(3n),
.topic-hub-section--steps .topic-hub-card:nth-child(3n),
.topic-hub-section--step .topic-hub-card:nth-child(3n) {
  border-top: 3px solid color-mix(in srgb, var(--hub-accent) 54%, var(--hub-accent-2));
}

.topic-hub-section--steps .topic-hub-card::before,
.topic-hub-section--step .topic-hub-card::before {
  border-radius: 10px;
  box-shadow: none;
}

.topic-hub-section--comparison .topic-hub-cards,
.topic-hub-section--compare .topic-hub-cards {
  background: color-mix(in srgb, var(--hub-accent) 3%, #fff);
  border: 1px solid var(--hub-line-v6);
  border-top: 3px solid var(--hub-accent);
  border-radius: 18px;
  gap: 0;
  overflow: hidden;
}

.topic-hub-section--comparison .topic-hub-card,
.topic-hub-section--compare .topic-hub-card {
  background: #fff;
  border: 0;
  border-right: 1px solid var(--hub-line-v6);
  border-top: 0;
  padding: 24px;
}

.topic-hub-section--comparison .topic-hub-card:nth-child(even),
.topic-hub-section--compare .topic-hub-card:nth-child(even) {
  background: var(--hub-secondary-wash);
}

.topic-hub-section--comparison .topic-hub-card:last-child,
.topic-hub-section--compare .topic-hub-card:last-child {
  border-right: 0;
}

.topic-hub-section--notice,
.topic-hub-note {
  background: var(--hub-secondary-wash);
  border: 1px solid color-mix(in srgb, var(--hub-accent-2) 16%, #e7ebed);
  border-left: 4px solid var(--hub-accent-2);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(16, 43, 63, .045);
}

.topic-hub-list li::before {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--hub-accent) 19%, #e4eaed);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.topic-hub-table-wrap {
  border: 1px solid var(--hub-line-v6);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(16, 43, 63, .055);
  overflow: auto;
}

.topic-hub-table th {
  background: var(--hub-accent-wash);
  border-bottom: 2px solid color-mix(in srgb, var(--hub-accent) 28%, #e1e8eb);
  color: var(--hub-deep);
}

.topic-hub-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--hub-accent) 2.8%, #fff);
}

.topic-hub-posts {
  box-shadow: 0 14px 34px rgba(16, 43, 63, .065);
}

.topic-hub-posts .topic-hub-section-eyebrow::before {
  content: "\270E";
  font-size: 12px;
  margin-right: 6px;
}

.topic-hub-faq details[open] {
  background: var(--hub-accent-wash);
  border-color: color-mix(in srgb, var(--hub-accent) 22%, #e4eaed);
}

.topic-hub-faq summary::marker {
  color: var(--hub-accent);
}

@media (max-width: 700px) {
  .topic-hub-section-heading-row {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 17px;
  }

  .topic-hub-section-heading-row .topic-hub-section-icon {
    border-radius: 10px;
    flex-basis: 34px;
    font-size: 14px;
    height: 34px;
    margin-top: 1px;
  }

  .topic-hub-section-heading-row h2 {
    padding-bottom: 10px;
  }

  .topic-hub-editorial-visual {
    border-radius: 17px;
    height: clamp(210px, 62vw, 260px);
    margin: 2px 0 40px;
  }

  .topic-hub-editorial-visual::before {
    left: 15px;
    top: 14px;
    width: 42px;
  }

  .topic-hub-editorial-visual::after {
    border-width: 4px;
    bottom: 13px;
    height: 23px;
    right: 13px;
    width: 23px;
  }

  .topic-hub-editorial-visual figcaption {
    bottom: 13px;
    font-size: 12.5px;
    left: 15px;
    max-width: calc(100% - 68px);
    padding: 6px 8px;
  }

  .topic-hub-editorial-visual.is-scene {
    height: clamp(244px, 69vw, 270px);
  }

  .topic-hub-editorial-visual.is-scene figcaption {
    gap: 9px;
    left: 15px;
    max-width: 46%;
    padding: 0;
    top: 50%;
  }

  .topic-hub-editorial-label {
    font-size: 10.5px;
    padding: 7px 9px;
  }

  .topic-hub-editorial-visual.is-scene figcaption strong {
    font-size: 14.5px;
    letter-spacing: -.025em;
    line-height: 1.5;
  }

  .topic-hub-editorial-visual.is-composed .topic-hub-editorial-product {
    bottom: 1.5%;
    height: 87% !important;
    right: 5%;
  }

  .topic-hub-editorial-visual[data-cluster="convenience-usim"] .topic-hub-editorial-product {
    bottom: 2.5%;
    height: 70% !important;
  }

  .topic-hub-editorial-visual[data-cluster="convenience-usim"] .topic-hub-editorial-product.is-kt {
    right: calc(50% + 6px);
  }

  .topic-hub-editorial-visual[data-cluster="convenience-usim"] .topic-hub-editorial-product.is-lg {
    left: calc(50% + 6px);
  }

  .topic-hub-editorial-visual[data-cluster="daiso-usim"] .topic-hub-editorial-product {
    bottom: 2%;
    height: 84% !important;
    left: 50%;
    right: auto;
  }

  .topic-hub-editorial-visual[data-cluster="kt-prepaid"] .topic-hub-editorial-backdrop {
    object-position: 55% center;
  }

  .topic-hub-editorial-visual[data-cluster="daiso-usim"] .topic-hub-editorial-backdrop {
    object-position: 50% center;
  }

  .topic-hub-editorial-visual[data-cluster="credit-phone"] img {
    object-position: 72% center;
  }

  .topic-hub-section--facts .topic-hub-card,
  .topic-hub-section--steps .topic-hub-card,
  .topic-hub-section--step .topic-hub-card,
  .topic-hub-section--checklist .topic-hub-card {
    padding: 18px 16px;
  }

  .topic-hub-section--comparison .topic-hub-card,
  .topic-hub-section--compare .topic-hub-card {
    border-bottom: 1px solid var(--hub-line-v6);
    border-right: 0;
    padding: 20px 16px;
  }

  .topic-hub-section--comparison .topic-hub-card:last-child,
  .topic-hub-section--compare .topic-hub-card:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-hub-editorial-visual,
  .topic-hub-section-heading-row .topic-hub-section-icon {
    scroll-behavior: auto;
  }
}

/*
 * Semantic body palette
 *
 * The hero still owns the page identity. Long-form content uses a restrained
 * set of contrasting role colours so answers, actions and checklists do not
 * collapse into one monochrome accent. Repeated components keep the same role
 * colour throughout a page and every fill remains flat (no gradients).
 */
.nuguna-topic-hub {
  --hub-answer-accent: #bb4d65;
  --hub-answer-ink: #7d263a;
  --hub-answer-soft: #fff4f6;
  --hub-cta-surface: #2e467f;
  --hub-cta-button: #5268bf;
  --hub-cta-hover: #4055a5;
  --hub-check-accent: #148171;
  --hub-check-ink: #0f6558;
  --hub-check-soft: #ecf8f5;
  --hub-info-accent: #356da2;
  --hub-info-ink: #254f78;
  --hub-info-soft: #eef6fc;
  --hub-detail-accent: #9b6118;
  --hub-detail-ink: #71450e;
  --hub-detail-soft: #fff7e8;
}

.nuguna-topic-hub[data-cluster="kt-prepaid"] {
  --hub-answer-accent: #b74655;
  --hub-answer-ink: #792733;
  --hub-answer-soft: #fff3f4;
  --hub-cta-surface: #244f8c;
  --hub-cta-button: #3d69b3;
  --hub-cta-hover: #2f5798;
  --hub-check-accent: #118276;
  --hub-check-ink: #0c6259;
  --hub-check-soft: #eaf8f5;
  --hub-info-accent: #3972ad;
  --hub-info-ink: #275582;
  --hub-info-soft: #edf5fd;
  --hub-detail-accent: #9c6219;
  --hub-detail-ink: #70440c;
  --hub-detail-soft: #fff7e7;
}

.nuguna-topic-hub[data-cluster="lg-prepaid"] {
  --hub-answer-accent: #7752a5;
  --hub-answer-ink: #543778;
  --hub-answer-soft: #f8f4fd;
  --hub-cta-surface: #155e68;
  --hub-cta-button: #1e7e86;
  --hub-cta-hover: #176a72;
  --hub-check-accent: #ba4e66;
  --hub-check-ink: #7d2e41;
  --hub-check-soft: #fff1f4;
  --hub-info-accent: #35759b;
  --hub-info-ink: #245571;
  --hub-info-soft: #eef7fb;
  --hub-detail-accent: #95601c;
  --hub-detail-ink: #6d450f;
  --hub-detail-soft: #fff7e9;
}

.nuguna-topic-hub[data-cluster="convenience-usim"] {
  --hub-answer-accent: #286f9d;
  --hub-answer-ink: #1b4e70;
  --hub-answer-soft: #eff8fc;
  --hub-cta-surface: #5a467d;
  --hub-cta-button: #7860a1;
  --hub-cta-hover: #644d8b;
  --hub-check-accent: #be5465;
  --hub-check-ink: #803340;
  --hub-check-soft: #fff2f4;
  --hub-info-accent: #197e72;
  --hub-info-ink: #105f56;
  --hub-info-soft: #edf8f5;
  --hub-detail-accent: #96611d;
  --hub-detail-ink: #6c450f;
  --hub-detail-soft: #fff7e8;
}

.nuguna-topic-hub[data-cluster="daiso-usim"] {
  --hub-answer-accent: #b43d51;
  --hub-answer-ink: #792332;
  --hub-answer-soft: #fff2f4;
  --hub-cta-surface: #2f4e85;
  --hub-cta-button: #4968a3;
  --hub-cta-hover: #39578f;
  --hub-check-accent: #147d71;
  --hub-check-ink: #0d5f56;
  --hub-check-soft: #ecf8f5;
  --hub-info-accent: #3476a0;
  --hub-info-ink: #245574;
  --hub-info-soft: #edf7fb;
  --hub-detail-accent: #98601a;
  --hub-detail-ink: #70450d;
  --hub-detail-soft: #fff7e7;
}

.nuguna-topic-hub[data-cluster="ntelecom-activation"] {
  --hub-answer-accent: #2d6594;
  --hub-answer-ink: #1f496d;
  --hub-answer-soft: #eef6fb;
  --hub-cta-surface: #5c467c;
  --hub-cta-button: #78619a;
  --hub-cta-hover: #654f86;
  --hub-check-accent: #147f72;
  --hub-check-ink: #0d6057;
  --hub-check-soft: #ecf8f5;
  --hub-info-accent: #a84b60;
  --hub-info-ink: #773143;
  --hub-info-soft: #fff2f5;
  --hub-detail-accent: #98621e;
  --hub-detail-ink: #6e470f;
  --hub-detail-soft: #fff7e9;
}

.nuguna-topic-hub[data-cluster="credit-phone"] {
  --hub-answer-accent: #396b8d;
  --hub-answer-ink: #284c67;
  --hub-answer-soft: #eff7fa;
  --hub-cta-surface: #6c405b;
  --hub-cta-button: #8b5575;
  --hub-cta-hover: #754461;
  --hub-check-accent: #197f6c;
  --hub-check-ink: #115f51;
  --hub-check-soft: #edf8f4;
  --hub-info-accent: #5267a2;
  --hub-info-ink: #394a78;
  --hub-info-soft: #f1f3fb;
  --hub-detail-accent: #98601a;
  --hub-detail-ink: #6e440d;
  --hub-detail-soft: #fff7e7;
}

/* Answer role: warm or photo-related accent, repeated consistently. */
.topic-hub-body .topic-hub-answer:not(.topic-hub-section--notice) {
  background: var(--hub-answer-soft);
  border-color: color-mix(in srgb, var(--hub-answer-accent) 18%, #e5eaed);
  border-left-color: var(--hub-answer-accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--hub-answer-accent) 7%, transparent);
}

.topic-hub-body .topic-hub-answer:not(.topic-hub-section--notice) > b:first-child,
.topic-hub-body .topic-hub-section--answer > .topic-hub-section-eyebrow {
  align-items: center;
  background: var(--hub-answer-accent);
  border: 1px solid var(--hub-answer-accent);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.2;
  margin-bottom: 13px;
  min-height: 29px;
  padding: 6px 11px;
}

.topic-hub-body .topic-hub-answer:not(.topic-hub-section--notice) h2,
.topic-hub-body .topic-hub-answer:not(.topic-hub-section--notice) strong,
.topic-hub-body .topic-hub-answer:not(.topic-hub-section--notice) b:not(:first-child) {
  color: var(--hub-answer-ink);
}

.topic-hub-body .topic-hub-section--answer .topic-hub-section-button {
  background: var(--hub-answer-accent);
  border-color: var(--hub-answer-accent);
  color: #fff;
}

/* Conversion role: one flat, clearly separate colour for both repeated bars. */
.topic-hub-inline-cta,
.topic-hub-bottom {
  background: var(--hub-cta-surface);
}

.topic-hub-inline-cta {
  border: 1px solid color-mix(in srgb, var(--hub-cta-button) 42%, var(--hub-cta-surface));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--hub-cta-surface) 20%, transparent);
}

.topic-hub-inline-cta .topic-hub-button.is-primary,
.topic-hub-bottom .topic-hub-button.is-primary {
  background: var(--hub-cta-button);
  border-color: var(--hub-cta-button);
  box-shadow: 0 8px 18px rgba(10, 24, 48, .2);
  color: #fff;
}

.topic-hub-inline-cta .topic-hub-button.is-primary:hover,
.topic-hub-inline-cta .topic-hub-button.is-primary:focus-visible,
.topic-hub-bottom .topic-hub-button.is-primary:hover,
.topic-hub-bottom .topic-hub-button.is-primary:focus-visible {
  background: var(--hub-cta-hover);
  border-color: var(--hub-cta-hover);
}

.topic-hub-bottom .topic-hub-button.is-secondary {
  border-color: rgba(255, 255, 255, .72);
  color: var(--hub-cta-surface);
}

/* Checklist role: a strong major mark and a lighter related minor mark. */
.topic-hub-section--checklist .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--facts .topic-hub-section-heading-row .topic-hub-section-icon {
  background: var(--hub-check-accent);
  border-color: var(--hub-check-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--hub-check-accent) 18%, transparent);
  color: #fff;
}

.topic-hub-section--checklist .topic-hub-section-heading-row h2::after,
.topic-hub-section--facts .topic-hub-section-heading-row h2::after {
  background: var(--hub-check-accent);
}

.topic-hub-section--checklist .topic-hub-list li::before,
.topic-hub-section--facts .topic-hub-list li::before {
  background: var(--hub-check-soft);
  border-color: color-mix(in srgb, var(--hub-check-accent) 28%, #dce7e4);
  color: var(--hub-check-ink);
}

.topic-hub-section--checklist .topic-hub-list li:nth-child(even),
.topic-hub-section--facts .topic-hub-list li:nth-child(even) {
  background: color-mix(in srgb, var(--hub-check-soft) 48%, #fff);
}

/* Supporting information roles keep the rest of the article lively but calm. */
.topic-hub-section--steps .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--step .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--table .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--plan-listing .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--dynamic-plans .topic-hub-section-heading-row .topic-hub-section-icon {
  background: var(--hub-info-soft);
  border-color: color-mix(in srgb, var(--hub-info-accent) 28%, #dfe8ee);
  color: var(--hub-info-ink);
}

.topic-hub-section--steps .topic-hub-section-heading-row h2::after,
.topic-hub-section--step .topic-hub-section-heading-row h2::after,
.topic-hub-section--table .topic-hub-section-heading-row h2::after,
.topic-hub-section--plan-listing .topic-hub-section-heading-row h2::after,
.topic-hub-section--dynamic-plans .topic-hub-section-heading-row h2::after {
  background: var(--hub-info-accent);
}

.topic-hub-section--comparison .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--compare .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--cards .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--links .topic-hub-section-heading-row .topic-hub-section-icon,
.topic-hub-section--notice .topic-hub-section-heading-row .topic-hub-section-icon {
  background: var(--hub-detail-soft);
  border-color: color-mix(in srgb, var(--hub-detail-accent) 30%, #e8e2d8);
  color: var(--hub-detail-ink);
}

.topic-hub-section--comparison .topic-hub-section-heading-row h2::after,
.topic-hub-section--compare .topic-hub-section-heading-row h2::after,
.topic-hub-section--cards .topic-hub-section-heading-row h2::after,
.topic-hub-section--links .topic-hub-section-heading-row h2::after,
.topic-hub-section--notice .topic-hub-section-heading-row h2::after {
  background: var(--hub-detail-accent);
}

.topic-hub-body .topic-hub-section.topic-hub-answer.topic-hub-section--notice,
.topic-hub-note {
  background: var(--hub-detail-soft);
  border-color: color-mix(in srgb, var(--hub-detail-accent) 18%, #e8e3da);
  border-left-color: var(--hub-detail-accent);
  color: #534a3d;
}

.topic-hub-body .topic-hub-section.topic-hub-answer.topic-hub-section--notice h2,
.topic-hub-body .topic-hub-section.topic-hub-answer.topic-hub-section--notice strong,
.topic-hub-note strong {
  color: var(--hub-detail-ink);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n + 1)::before,
.topic-hub-section--step .topic-hub-card:nth-child(4n + 1)::before {
  background: var(--hub-answer-accent);
  box-shadow: 0 0 0 5px var(--hub-answer-soft);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n + 1),
.topic-hub-section--step .topic-hub-card:nth-child(4n + 1) {
  border-top-color: var(--hub-answer-accent);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n + 2)::before,
.topic-hub-section--step .topic-hub-card:nth-child(4n + 2)::before {
  background: var(--hub-info-accent);
  box-shadow: 0 0 0 5px var(--hub-info-soft);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n + 2),
.topic-hub-section--step .topic-hub-card:nth-child(4n + 2) {
  border-top-color: var(--hub-info-accent);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n + 3)::before,
.topic-hub-section--step .topic-hub-card:nth-child(4n + 3)::before {
  background: var(--hub-check-accent);
  box-shadow: 0 0 0 5px var(--hub-check-soft);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n + 3),
.topic-hub-section--step .topic-hub-card:nth-child(4n + 3) {
  border-top-color: var(--hub-check-accent);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n)::before,
.topic-hub-section--step .topic-hub-card:nth-child(4n)::before {
  background: var(--hub-detail-accent);
  box-shadow: 0 0 0 5px var(--hub-detail-soft);
}

.topic-hub-section--steps .topic-hub-card:nth-child(4n),
.topic-hub-section--step .topic-hub-card:nth-child(4n) {
  border-top-color: var(--hub-detail-accent);
}

.topic-hub-section--facts .topic-hub-card:nth-child(3n + 1) {
  border-top-color: var(--hub-check-accent);
}

.topic-hub-section--facts .topic-hub-card:nth-child(3n + 2) {
  border-top-color: var(--hub-info-accent);
}

.topic-hub-section--facts .topic-hub-card:nth-child(3n) {
  border-top-color: var(--hub-detail-accent);
}

.topic-hub-section--comparison .topic-hub-cards,
.topic-hub-section--compare .topic-hub-cards {
  border-top-color: var(--hub-info-accent);
}

.topic-hub-section--comparison .topic-hub-card:nth-child(even),
.topic-hub-section--compare .topic-hub-card:nth-child(even) {
  background: var(--hub-info-soft);
}

.topic-hub-section--comparison .topic-hub-card:nth-child(odd) b::before,
.topic-hub-section--compare .topic-hub-card:nth-child(odd) b::before {
  background: var(--hub-answer-accent);
  box-shadow: 0 0 0 4px var(--hub-answer-soft);
}

.topic-hub-section--comparison .topic-hub-card:nth-child(even) b::before,
.topic-hub-section--compare .topic-hub-card:nth-child(even) b::before {
  background: var(--hub-check-accent);
  box-shadow: 0 0 0 4px var(--hub-check-soft);
}

.topic-hub-section--cards .topic-hub-card:nth-child(3n + 1) b::before {
  background: var(--hub-answer-accent);
  box-shadow: 0 0 0 4px var(--hub-answer-soft);
}

.topic-hub-section--cards .topic-hub-card:nth-child(3n + 2) b::before {
  background: var(--hub-info-accent);
  box-shadow: 0 0 0 4px var(--hub-info-soft);
}

.topic-hub-section--cards .topic-hub-card:nth-child(3n) b::before {
  background: var(--hub-check-accent);
  box-shadow: 0 0 0 4px var(--hub-check-soft);
}

.topic-hub-section--table .topic-hub-table th,
.topic-hub-section--plan-listing .topic-hub-table th,
.topic-hub-section--dynamic-plans .topic-hub-table th {
  background: var(--hub-info-soft);
  border-bottom-color: color-mix(in srgb, var(--hub-info-accent) 26%, #dfe7eb);
  color: var(--hub-info-ink);
}

.topic-hub-section--table .topic-hub-table tbody tr:nth-child(even),
.topic-hub-section--plan-listing .topic-hub-table tbody tr:nth-child(even),
.topic-hub-section--dynamic-plans .topic-hub-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--hub-info-soft) 52%, #fff);
}

.topic-hub-body .topic-hub-section-button {
  border-color: color-mix(in srgb, var(--hub-info-accent) 48%, #d6e0e7);
  color: var(--hub-info-ink);
}

.topic-hub-body .topic-hub-section-button:hover,
.topic-hub-body .topic-hub-section-button:focus-visible {
  background: var(--hub-info-soft);
  border-color: var(--hub-info-accent);
}

.topic-hub-posts {
  background: color-mix(in srgb, var(--hub-info-soft) 54%, #fff);
  border-color: color-mix(in srgb, var(--hub-info-accent) 20%, #e4e9eb);
  border-left-color: var(--hub-info-accent);
}

.topic-hub-post-list,
.topic-hub-post-table {
  border-top-color: var(--hub-info-accent);
}

.topic-hub-post-head {
  background: var(--hub-info-soft);
}

.topic-hub-post-type,
.topic-hub-posts .topic-hub-section-eyebrow {
  color: var(--hub-info-ink);
}

/* The two-column process cards are wider than their mobile counterparts.
   Reduce only the desktop sprite zoom so the complete handset—including its
   bottom edge and shadow—sits naturally inside every card. */
@media (min-width: 701px) {
  .topic-hub-activation-phone-crop img {
    --activation-scale: 430% !important;
  }
}

.topic-hub-posts .topic-hub-section-eyebrow {
  background: var(--hub-info-soft);
  border-color: color-mix(in srgb, var(--hub-info-accent) 24%, #e4e9ed);
}

.topic-hub-faq details[open] {
  background: var(--hub-info-soft);
  border-color: color-mix(in srgb, var(--hub-info-accent) 24%, #e1e8ec);
}

.topic-hub-faq summary::marker {
  color: var(--hub-info-accent);
}

@media (max-width: 700px) {
  .topic-hub-body .topic-hub-answer:not(.topic-hub-section--notice) > b:first-child,
  .topic-hub-body .topic-hub-section--answer > .topic-hub-section-eyebrow {
    font-size: 11.5px;
  }

  /* Keep the complete phone frame visible across the whole mobile range.
     The source crop and its four calibrated horizontal positions stay intact;
     only the phone column is capped and the card height follows it. */
  .topic-hub-activation-card {
    --activation-mobile-phone-column: clamp(178px, 42vw, 205px);
    grid-template-columns: minmax(0, 1fr) var(--activation-mobile-phone-column);
    height: clamp(380px, 88vw, 430px);
    margin-inline: auto;
    max-width: 520px;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .topic-hub-activation-card {
    height: 380px;
  }
}