/*
 * CompareAMobile editorial theme
 * Shared by every legacy article so all 67 guides feel like one product.
 */
:root {
  --cam-ink: #171316;
  --cam-muted: #625c62;
  --cam-pink: #ee2f83;
  --cam-pink-dark: #bd1f64;
  --cam-pink-soft: #ffe4ef;
  --cam-peach: #ffead8;
  --cam-cream: #fff9eb;
  --cam-ice: #eaf4ff;
  --cam-mint: #e9f8ef;
  --cam-white: rgba(255, 255, 255, 0.74);
  --cam-white-strong: rgba(255, 255, 255, 0.9);
  --cam-line: rgba(60, 41, 50, 0.11);
  --cam-shadow: 0 14px 40px rgba(112, 62, 83, 0.09);
}

html {
  background: var(--cam-cream);
  scroll-padding-top: 118px;
}

body.article-page {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 224, 173, 0.74), transparent 31rem),
    radial-gradient(circle at 88% 18%, rgba(255, 188, 221, 0.7), transparent 34rem),
    radial-gradient(circle at 50% 58%, rgba(213, 236, 255, 0.7), transparent 42rem),
    linear-gradient(145deg, #fffaf0 0%, #fff5f3 48%, #f4f9ff 100%) !important;
  background-attachment: fixed !important;
  color: var(--cam-ink) !important;
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif !important;
  min-height: 100vh;
}

body.article-page::before {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.56) 0 1px, transparent 1.5px);
  background-size: 20px 20px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
  opacity: 0.24;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.article-page * {
  box-sizing: border-box;
}

.article-page ::selection {
  background: var(--cam-pink) !important;
  color: white !important;
}

.article-page :focus-visible {
  outline: 3px solid var(--cam-pink) !important;
  outline-offset: 4px;
}

.article-page header {
  align-items: center !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 30px rgba(87, 52, 68, 0.06) !important;
  display: flex !important;
  justify-content: space-between !important;
  min-height: 78px;
  padding-inline: max(5vw, calc((100vw - 1180px) / 2)) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.article-page .logo {
  color: var(--cam-ink) !important;
  font-size: 1.2rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em;
}

.article-page .logo::before {
  align-items: center;
  background: var(--cam-ink);
  border-radius: 10px;
  color: #ffd877;
  content: "C";
  display: inline-flex;
  font-family: Georgia, serif;
  font-size: 1rem;
  height: 30px;
  justify-content: center;
  margin-right: 9px;
  vertical-align: -2px;
  width: 30px;
}

.article-page .logo span {
  color: var(--cam-pink) !important;
}

.article-page .nav {
  align-items: center !important;
  display: flex !important;
  gap: clamp(0.75rem, 1.6vw, 1.5rem) !important;
}

.article-page .nav a {
  color: #4e484d !important;
  font-size: 0.82rem !important;
  font-weight: 720 !important;
  padding: 0.48rem 0 !important;
  position: relative;
}

.article-page .nav a::after {
  background: var(--cam-pink);
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) scaleX(0);
  transition: transform 170ms ease;
  width: 100%;
}

.article-page .nav a:hover {
  color: var(--cam-ink) !important;
}

.article-page .nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.article-page .site-ribbon {
  background: rgba(255, 255, 255, 0.46);
  border-bottom: 1px solid rgba(238, 47, 131, 0.1);
  color: var(--cam-pink-dark);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.025em;
  overflow: hidden;
  padding: 0.55rem 5vw;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.article-page .review-status {
  align-items: center;
  background: rgba(255, 255, 255, 0.62);
  border-bottom: 1px solid rgba(73, 53, 61, 0.08);
  color: var(--cam-muted);
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  gap: 0.12rem;
  justify-content: center;
  line-height: 1.45;
  padding: 0.7rem 5vw;
  text-align: center;
}

.article-page .review-status strong {
  color: var(--cam-pink-dark);
  white-space: nowrap;
}

.article-page .brand-model-photo {
  display: block;
  height: 190px;
  margin: 0 auto 1.2rem;
  object-fit: contain;
  width: min(100%, 240px);
}

.article-page .hamburger span {
  background: var(--cam-ink) !important;
}

.article-page .mobile-menu {
  backdrop-filter: blur(24px) !important;
  background:
    radial-gradient(circle at 20% 15%, #fff0ca, transparent 22rem),
    radial-gradient(circle at 82% 24%, #ffd2e5, transparent 26rem),
    rgba(255, 250, 246, 0.96) !important;
}

.article-page .mobile-menu a,
.article-page .mobile-close {
  color: var(--cam-ink) !important;
}

.article-page .mobile-menu a:hover {
  color: var(--cam-pink) !important;
}

@media (max-width: 680px) {
  .article-page .review-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
    padding-inline: 1.25rem;
    text-align: left;
  }
}

.article-page .hero {
  margin: 0 auto !important;
  max-width: 1240px !important;
  padding: clamp(5.4rem, 10vw, 9rem) 5vw clamp(3.6rem, 7vw, 6rem) !important;
  position: relative;
  text-align: center !important;
}

.article-page .hero::before {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  content: "";
  filter: blur(2px);
  inset: 3.6rem 1.5rem 1.2rem;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.article-page .badge,
.article-page .tag,
.article-page .deal-tag {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(238, 47, 131, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 26px rgba(102, 61, 78, 0.06);
  color: var(--cam-pink-dark) !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.055em;
  padding: 0.58rem 0.9rem !important;
  text-transform: uppercase;
}

.article-page .hero h1 {
  color: var(--cam-ink) !important;
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif !important;
  font-size: clamp(2.85rem, 7vw, 6.7rem) !important;
  font-weight: 820 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.93 !important;
  margin: 1.15rem auto 1.55rem !important;
  max-width: 1080px;
  text-wrap: balance;
}

.article-page .hero h1 span {
  background: linear-gradient(100deg, #f4775e, var(--cam-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.article-page .hero p {
  color: var(--cam-muted) !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  line-height: 1.75 !important;
  max-width: 820px !important;
}

.article-page .section {
  margin: 0 auto !important;
  max-width: 1180px !important;
  padding: clamp(1rem, 2.2vw, 1.7rem) 1.25rem !important;
}

.article-page .section-title {
  color: var(--cam-pink-dark) !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  margin: 0 auto 1.15rem !important;
  max-width: 1100px;
}

.article-page :is(
  .phone-card,
  .table-box,
  .comparison-box,
  .info-box,
  .guide-box,
  .faq-box,
  .verdict-box,
  .content-box,
  .cta-box,
  .contact-card,
  .winner-box,
  .brand-card,
  .team-box,
  .response-box,
  .deals-shell
) {
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  background: var(--cam-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 28px !important;
  box-shadow: var(--cam-shadow) !important;
  color: var(--cam-ink) !important;
  margin-bottom: 1.35rem !important;
}

.article-page :is(
  .table-box,
  .comparison-box,
  .info-box,
  .guide-box,
  .faq-box,
  .verdict-box,
  .content-box,
  .cta-box,
  .team-box,
  .response-box,
  .deals-shell
) {
  max-width: 1100px !important;
  padding: clamp(1.3rem, 3.4vw, 2.6rem) !important;
}

.article-page .phone-card {
  max-width: 1100px !important;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease !important;
}

.article-page .phone-card:hover {
  border-color: rgba(238, 47, 131, 0.2) !important;
  box-shadow: 0 18px 48px rgba(117, 66, 86, 0.12) !important;
  transform: translateY(-2px) !important;
}

.article-page .phone-card-inner {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) !important;
  min-height: 260px;
}

.article-page .phone-img-col,
.article-page .phone-image {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.98), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(242,244,247,.88)) !important;
  border-color: rgba(83, 54, 68, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 260px;
  overflow: hidden;
  padding: 1.8rem !important;
  position: relative;
}

.article-page .phone-img-col svg {
  filter: drop-shadow(0 16px 26px rgba(85, 54, 72, 0.17)) !important;
}

.article-page .phone-card-inline-media {
  align-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.98), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(242,244,247,.88));
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 20px;
  display: flex;
  height: 210px;
  justify-content: center;
  margin-bottom: 1.25rem;
  overflow: hidden;
  padding: 1rem;
}

.article-page .real-phone-photo {
  display: block;
  filter: drop-shadow(0 15px 22px rgba(48, 42, 47, 0.15));
  height: 190px;
  max-width: 180px;
  object-fit: contain;
  object-position: center;
  transition: transform 220ms ease;
  width: auto;
}

.article-page .real-phone-photo--cover {
  border-radius: 0;
  object-fit: contain;
}

.article-page .phone-card:hover .real-phone-photo {
  transform: scale(1.02);
}

.article-page .phone-content-col {
  padding: clamp(1.45rem, 3vw, 2rem) !important;
}

.article-page .phone-card h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.08 !important;
}

.article-page h2,
.article-page h3,
.article-page h4,
.article-page strong {
  color: var(--cam-ink) !important;
}

.article-page :is(
  .phone-card,
  .table-box,
  .comparison-box,
  .info-box,
  .guide-box,
  .faq-box,
  .verdict-box,
  .content-box
) h2 {
  font-size: clamp(1.65rem, 3vw, 2.65rem) !important;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-top: 0 !important;
}

.article-page p,
.article-page li {
  color: var(--cam-muted) !important;
}

.article-page a {
  transition:
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.article-page .btn,
.article-page .deal-btn {
  background: var(--cam-pink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 11px 28px rgba(238, 47, 131, 0.2) !important;
  color: white !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.02em;
  padding: 0.78rem 1.1rem !important;
}

.article-page .btn:hover,
.article-page .deal-btn:hover {
  background: var(--cam-pink-dark) !important;
  transform: translateY(-2px) !important;
}

.article-page :is(
  .spec,
  .guide-card,
  .mini-card,
  .card,
  .step,
  .criterion,
  .source,
  .principle,
  .deal-card,
  .stat,
  .contact-card,
  .brand-card
) {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(81, 54, 68, 0.09) !important;
  border-radius: 19px !important;
  box-shadow: 0 12px 34px rgba(99, 64, 78, 0.055);
  color: var(--cam-ink) !important;
}

.article-page .spec-grid {
  display: grid !important;
  gap: 0.65rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 1.1rem !important;
}

.article-page .spec {
  background: rgba(255, 255, 255, 0.68) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  min-width: 0;
  padding: 0.78rem !important;
}

.article-page .decision-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.15rem;
}

.article-page .decision-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(81, 54, 68, 0.08);
  border-radius: 16px;
  padding: 1rem;
}

.article-page .decision-item h3 {
  color: var(--cam-pink-dark) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 0.42rem !important;
}

.article-page .decision-item p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0 !important;
}

.article-page .decision-item a {
  color: var(--cam-pink-dark) !important;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-page .decision-item--alternative {
  grid-column: 1 / -1;
}

.article-page :is(.guide-card, .mini-card, .card, .step, .criterion, .source, .principle, .deal-card) {
  padding: 1.25rem !important;
}

.article-page :is(.guide-card, .mini-card, .card, .step, .criterion, .source) h3,
.article-page :is(.guide-card, .mini-card, .card, .step, .criterion, .source) h4 {
  color: var(--cam-pink-dark) !important;
}

.article-page .spec small,
.article-page .source-desc,
.article-page .updated,
.article-page .note {
  color: #756c72 !important;
}

.article-page .spec strong {
  color: var(--cam-ink) !important;
}

.article-page .grid,
.article-page .guide-grid,
.article-page .info-grid,
.article-page .step-grid,
.article-page .criteria-grid,
.article-page .source-list,
.article-page .compare-grid,
.article-page .cards-grid,
.article-page .contact-grid,
.article-page .deals-grid {
  gap: 0.9rem !important;
}

.article-page .guide-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 1rem 0 !important;
}

.article-page .guide-box h2 {
  font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
  margin-bottom: 1.2rem !important;
}

.article-page .guide-grid {
  display: grid !important;
  gap: 0.8rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.article-page .guide-card {
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 1.05rem !important;
}

.article-page .guide-card h3 {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.55rem !important;
}

.article-page .guide-card p {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin: 0 0 0.9rem !important;
}

.article-page .guide-card .btn {
  align-self: flex-start !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(238, 47, 131, 0.24) !important;
  box-shadow: none !important;
  color: var(--cam-pink-dark) !important;
  font-size: 0.72rem !important;
  margin-top: auto !important;
  padding: 0.55rem 0.76rem !important;
}

.article-page .guide-card .btn:hover {
  background: var(--cam-pink-soft) !important;
  color: var(--cam-pink-dark) !important;
}

.article-page .table-wrapper {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(67, 46, 56, 0.08);
  border-radius: 18px;
  overflow-x: auto;
}

.article-page table {
  border-collapse: collapse !important;
  overflow: hidden;
}

.article-page th {
  background: var(--cam-ink) !important;
  border: 0 !important;
  color: white !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
}

.article-page td {
  background: rgba(255, 255, 255, 0.52) !important;
  border-bottom: 1px solid rgba(71, 49, 59, 0.08) !important;
  color: #514b50 !important;
}

.article-page tr:nth-child(even) td {
  background: rgba(255, 239, 246, 0.5) !important;
}

.article-page .winner,
.article-page .highlight,
.article-page .pct,
.article-page .step-num {
  color: var(--cam-pink-dark) !important;
}

.article-page .verdict,
.article-page .callout {
  background: linear-gradient(135deg, var(--cam-pink-soft), rgba(255,255,255,.66)) !important;
  border: 1px solid rgba(238, 47, 131, 0.14) !important;
  border-radius: 18px !important;
  color: #4e3f47 !important;
  padding: 1.2rem !important;
}

.article-page .pros {
  background: linear-gradient(135deg, var(--cam-mint), rgba(255,255,255,.72)) !important;
  border-color: rgba(46, 142, 92, 0.14) !important;
}

.article-page .editorial-source-note {
  backdrop-filter: blur(16px) !important;
  background: rgba(255, 255, 255, 0.61) !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 38px rgba(93, 57, 73, 0.07);
  color: var(--cam-muted) !important;
  margin: 0 auto 1.4rem !important;
  max-width: 1100px !important;
}

.article-page .editorial-source-note strong {
  color: var(--cam-pink-dark) !important;
}

.article-page .editorial-source-note a,
.article-page .content-box a {
  color: var(--cam-pink-dark) !important;
  font-weight: 700;
}

.article-page .bar-outer {
  background: rgba(58, 42, 51, 0.08) !important;
  border-color: rgba(58, 42, 51, 0.08) !important;
}

.article-page .bar-inner {
  background: linear-gradient(90deg, #f47a63, var(--cam-pink)) !important;
}

.article-page hr,
.article-page .divider,
.article-page .faq-item {
  border-color: rgba(65, 45, 55, 0.1) !important;
}

.article-page footer {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.55) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.84) !important;
  color: #756b71 !important;
  margin-top: clamp(3.5rem, 7vw, 6rem) !important;
  padding: 2.5rem 5vw !important;
}

.article-page .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: center;
  margin-top: 1rem !important;
}

.article-page .footer-links a {
  color: #50484e !important;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 !important;
}

.article-page .footer-links a:hover {
  color: var(--cam-pink) !important;
}

@media (max-width: 900px) {
  .article-page .nav {
    display: none !important;
  }

  .article-page .hamburger {
    display: flex !important;
  }

  .article-page .site-ribbon {
    font-size: 0.6rem;
  }

  .article-page .phone-card-inner {
    grid-template-columns: minmax(180px, 205px) minmax(0, 1fr) !important;
  }

  .article-page .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .article-page .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .article-page header {
    min-height: 68px;
    padding: 0 5vw !important;
  }

  .article-page .hero {
    padding: 4.4rem 5vw 2.6rem !important;
  }

  .article-page .hero::before {
    inset: 2.2rem 0.5rem 0.3rem;
  }

  .article-page .hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.8rem) !important;
    letter-spacing: -0.065em !important;
  }

  .article-page .phone-card-inner {
    grid-template-columns: 1fr !important;
  }

  .article-page .phone-img-col {
    border-bottom: 1px solid rgba(83, 54, 68, 0.08) !important;
    border-right: 0 !important;
    min-height: 210px;
  }

  .article-page .real-phone-photo {
    height: 170px;
    max-width: 170px;
  }

  .article-page .phone-card-inline-media {
    height: 195px;
  }

  .article-page .guide-grid {
    grid-template-columns: 1fr !important;
  }

  .article-page .decision-grid {
    grid-template-columns: 1fr;
  }

  .article-page .decision-item--alternative {
    grid-column: auto;
  }

  .article-page :is(
    .table-box,
    .comparison-box,
    .info-box,
    .faq-box,
    .verdict-box,
    .content-box
  ) {
    padding: 1.15rem !important;
  }

  .article-page .editorial-source-note {
    margin: 0 5vw 1rem !important;
  }

  .article-page .guide-box {
    padding: 0.8rem 0 !important;
  }
}