/*
Theme Name: AI Goth GF
Theme URI: https://aigothgf.com/
Author: AI Goth GF
Author URI: https://aigothgf.com/
Description: Directory-style review publication for AI companion platforms. One committed dark world, one accent, poster display type, instrument score meters and dense ranked listings.
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aigothgf
*/

/* -------------------------------------------------------------
   1. Design system
   ------------------------------------------------------------- */
:root,
:root[data-theme="dark"],
body.theme-dark {
  --void:    #060507;
  --panel:   #0c0b0f;
  --panel-2: #141318;
  --panel-3: #1a1920;
  --rule:    #221a20;
  --rule-hi: #3d141b;

  --ink:   #f0edf2;
  --ink-2: #9c9aa8;
  --ink-3: #6e6b7a;

  /* Goth blood red / crimson primary */
  --hot:      #c5002a;
  --hot-deep: #8b0000;
  --hot-lift: #e60033;
  --hot-ink:  #ffffff;

  --goth-red: #8b0000;
  --goth-glow: rgba(197, 0, 42, 0.3);

  /* Poster display + neutral grotesk */
  --poster: 'Cinzel', Georgia, serif;
  --text: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --shell: 1240px;
  --speed: 0.14s;

  /* Legacy aliases */
  --bg-color: var(--void);
  --bg-elevated: var(--panel);
  --card-bg: var(--panel);
  --card-border: var(--rule);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --accent-orange: var(--hot);
  --accent-orange-hover: var(--hot-lift);
  --success-color: #10b981;
  --danger-color: #f43f5e;
  --max-width: var(--shell);

  color-scheme: dark;
}

:root[data-theme="light"],
body.theme-light {
  --void:    #ffffff;
  --panel:   #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #f1f5f9;
  --rule:    #e2e8f0;
  --rule-hi: #cbd5e1;

  --ink:   #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;

  --hot:      #c5002a;
  --hot-deep: #8b0000;
  --hot-lift: #e60033;
  --hot-ink:  #ffffff;

  --card-bg: var(--panel);
  --card-border: var(--rule);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);

  color-scheme: light;
}

/* -------------------------------------------------------------
   2. Reset & typography
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Film grain. The one texture that stops flat dark reading as a template. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after { opacity: 0.015; }

/* Theme toggle button in header */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  transition: all var(--speed);
  margin-left: 4px;
}
.theme-toggle-btn:hover {
  border-color: var(--hot);
  background: var(--panel-3);
  transform: translateY(-1px);
}
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: inline-block; }
[data-theme="dark"] .theme-icon-sun { display: inline-block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--poster);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
  color: var(--ink);
}

h1 { font-size: clamp(31px, 4.3vw, 52px); }
h2 { font-size: clamp(23px, 3vw, 35px); }
h3 { font-size: 25px; }
h4 { font-size: 20px; }

a { color: inherit; text-decoration: none; transition: color var(--speed); }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

::selection { background: rgba(157, 78, 221, 0.32); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Small caps utility face. Every label, chip, column head and kicker. */
.label,
.hero-eyebrow,
.article-category-badge,
.card-verdict-badge,
.tag-badge,
.meta-tag,
.hub-chip,
.wall-chip {
  font-family: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.num,
.rating-value,
.rating-number,
.wall-stat b { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
}

.main-content { padding-bottom: 0; }

.band {
  padding-top: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--rule);
}
.band.alt { background: var(--panel); }

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rule-hi);
}
.band-head .label { color: var(--ink-3); }

.section-heading { margin: 0; }
.section-subtitle { color: var(--ink-3); margin-top: 8px; }

/* -------------------------------------------------------------
   4. Masthead
   ------------------------------------------------------------- */
.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo {
  font-family: var(--poster);
  font-size: 26px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* One colour per wordmark. The old build split it white/red, which is the
   single most template-looking thing a masthead can do. */
.logo .brand-accent { color: inherit; }
.logo:hover { color: var(--ink); }

.header-search {
  width: 220px;
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--void);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0 10px;
}
.header-search:focus-within { border-color: var(--hot); }
.header-search svg { flex: 0 0 auto; color: var(--ink-3); }
.header-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--text);
  font-size: 13px;
  padding: 7px 0;
}
.header-search input::placeholder { color: var(--ink-3); }

.nav-menu {
  display: flex;
  list-style: none;
  gap: 4px;
  align-items: center;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.nav-menu a {
  display: block;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-bottom: 2px solid transparent;
  transition: color var(--speed), border-color var(--speed);
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu .current-menu-item a,
.nav-menu .is-active a {
  color: var(--ink);
  border-bottom-color: var(--hot);
}
.nav-menu .nav-item-uncensored a {
  color: var(--hot) !important;
  font-weight: 800;
}

.header-age {
  border: 1px solid var(--rule-hi);
  color: var(--ink-2);
  padding: 5px 8px;
  line-height: 1;
  font-size: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 200;
}
.menu-toggle .bar {
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform var(--speed) ease, opacity var(--speed) ease;
}
.menu-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2) { opacity: 0; }
.menu-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------
   5. Ticker & tag rail
   ------------------------------------------------------------- */
.ticker-strip {
  background: var(--panel);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: cc-slide 64s linear infinite;
}
.ticker-strip:hover .ticker-track { animation-play-state: paused; }
.ticker-track > span {
  display: flex;
  align-items: center;
  padding: 7px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-track a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 26px;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.ticker-track a:hover { color: var(--ink); }
.ticker-track b {
  background: var(--hot);
  color: var(--hot-ink);
  padding: 3px 6px;
  line-height: 1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@keyframes cc-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tag-rail {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.tag-rail .container {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding-top: 9px;
  padding-bottom: 9px;
  scrollbar-width: none;
}
.tag-rail .container::-webkit-scrollbar {
  display: none;
}
.tag-rail a {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-2);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 5px 12px;
  line-height: 1.2;
  transition: all var(--speed);
  text-decoration: none;
}
.tag-rail a:hover {
  color: var(--ink);
  border-color: var(--rule-hi);
  background: var(--panel-3);
}
.tag-rail a.on {
  background: var(--hot);
  border-color: var(--hot);
  color: #fff;
}

/* -------------------------------------------------------------
   6. Affiliate banner slots
   ------------------------------------------------------------- */
.ad {
  padding-top: 22px;
  padding-bottom: 22px;
}
.ad:empty,
.ad-inner:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}
.ad-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule-hi);
  background: #08060a;
  color: var(--ink-3);
  text-align: center;
}
.ad-inner > img,
.ad-inner > a,
.ad-inner > iframe { max-width: 100%; }
/* A slot holding a real creative drops the placeholder chrome. */
.ad-inner.is-filled {
  border: 0;
  background: none;
  padding: 0;
}
.ad-inner.is-filled .ad-tag { display: none; }
.ad-970 .ad-inner { aspect-ratio: 970 / 90; }
.ad-728 .ad-inner {
  aspect-ratio: 728 / 90;
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
.ad-300 .ad-inner { aspect-ratio: 300 / 250; }
/* Admin-only empty-slot outline. Quiet on purpose — it marks a position, it
   does not advertise one. Readers never see this. */
.ad-inner.is-empty {
  border-style: dashed;
  border-color: var(--rule);
  background: none;
  min-height: 54px;
}
.ad-inner b { color: var(--hot); }
.ad-tag {
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px dashed var(--rule-hi);
  border-bottom: 1px dashed var(--rule-hi);
  padding: 4px 8px;
  line-height: 1;
  color: var(--ink-3);
}

/* -------------------------------------------------------------
   Candy AI Editorial Banners & Conversion Cards
   ------------------------------------------------------------- */
.cc-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
  background: #0f0b12;
  border: 1px solid #3b141d;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.cc-banner-top:hover {
  border-color: var(--hot);
  background: #160e19;
  transform: translateY(-1px);
}
.cc-banner-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cc-banner-badge {
  background: var(--hot);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.cc-banner-tagline {
  font-size: 14px;
  color: #f4f4f5;
  line-height: 1.3;
}
.cc-banner-tagline strong {
  color: #fff;
  font-weight: 700;
}
.cc-banner-btn {
  background: var(--hot);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.cc-banner-top:hover .cc-banner-btn {
  opacity: 0.92;
}

.cc-banner-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 28px;
  background: #0d0a11;
  border: 1px solid #3b141d;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  gap: 24px;
  transition: all 0.2s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.cc-banner-mid:hover {
  border-color: var(--hot);
  transform: translateY(-2px);
}
.cc-banner-mid-content {
  flex: 1;
}
.cc-banner-pill {
  display: inline-block;
  background: rgba(157, 78, 221, 0.15);
  color: var(--hot);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.cc-banner-title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.cc-banner-desc {
  margin: 0;
  font-size: 14px;
  color: #a1a1aa;
  line-height: 1.4;
}
.cc-banner-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cc-banner-cta-button {
  background: var(--hot);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.cc-banner-subtext {
  font-size: 11px;
  color: #71717a;
}

.cc-context-banner {
  background: var(--panel-2);
  border: 1.5px solid rgba(157, 78, 221, 0.45);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(157, 78, 221, 0.08);
}
[data-theme="dark"] .cc-context-banner {
  background: #141117;
  border: 2px solid rgba(157, 78, 221, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.cc-context-badge {
  background: var(--hot);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-bottom: 6px;
}
.cc-context-title {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.25;
}
.cc-context-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.cc-context-btn {
  background: var(--hot);
  color: #fff !important;
  padding: 10px 20px;
  font-weight: 700;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(157, 78, 221, 0.3);
  transition: transform var(--speed), background var(--speed);
}
.cc-context-btn:hover {
  background: var(--hot-lift);
  transform: translateY(-1px);
}

.cc-sidebar-alt-card {
  margin-top: 18px;
  background: var(--panel);
  border: 1.5px solid rgba(157, 78, 221, 0.4);
  padding: 18px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(157, 78, 221, 0.07);
}
[data-theme="dark"] .cc-sidebar-alt-card {
  background: #100b14;
  border: 1px solid #3b141d;
}
.cc-sidebar-alt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cc-sidebar-alt-tag {
  background: var(--hot);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.cc-sidebar-alt-score {
  font-size: 14px;
  font-weight: 900;
  color: #10b981;
}
.cc-sidebar-alt-title {
  margin: 0 0 6px 0;
  font-size: 17px;
  color: var(--ink);
}
.cc-sidebar-alt-desc {
  margin: 0 0 14px 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.cc-sidebar-alt-btn {
  background: var(--hot);
  color: #fff !important;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  display: block;
  box-shadow: 0 2px 8px rgba(157, 78, 221, 0.25);
  transition: transform var(--speed), background var(--speed);
}
.cc-sidebar-alt-btn:hover {
  background: var(--hot-lift);
  transform: translateY(-1px);
}

.cc-bottom-cta-box {
  margin-top: 36px;
  background: var(--panel-2);
  border: 1.5px solid rgba(157, 78, 221, 0.35);
  padding: 28px 24px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(157, 78, 221, 0.08);
}
[data-theme="dark"] .cc-bottom-cta-box {
  background: #181219;
  border: 1px solid rgba(157, 78, 221, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.cc-bottom-cta-box h3 {
  color: var(--ink);
  margin: 10px auto 6px;
  font-size: 22px;
}
.cc-bottom-cta-box p {
  color: var(--ink-2);
  font-size: 14px;
  margin: 0 auto 18px;
  max-width: 520px;
}

/* Floating bottom bar for desktop and mobile */
.cc-floating-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  padding: 10px 20px;
  z-index: 99999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}
[data-theme="dark"] .cc-floating-bar {
  background: rgba(18, 18, 22, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
.cc-fl-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cc-fl-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cc-fl-badge {
  background: var(--hot);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.cc-fl-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-fl-subtitle {
  font-size: 12px;
  color: var(--ink-3);
  display: none;
}
@media (min-width: 768px) {
  .cc-fl-subtitle { display: inline; }
}
.cc-fl-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cc-fl-sec-btn {
  background: var(--panel-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--speed);
}
.cc-fl-sec-btn:hover {
  border-color: var(--rule-hi);
  color: var(--ink);
}
.cc-fl-btn {
  background: var(--hot);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background var(--speed), transform var(--speed);
  box-shadow: 0 2px 8px rgba(157, 78, 221, 0.3);
  white-space: nowrap;
}
.cc-fl-btn:hover {
  background: var(--hot-lift);
  transform: translateY(-1px);
}

/* Hot tag rail pill */
.tag-rail .tag-rail-hot-link {
  margin-left: auto;
  background: rgba(157, 78, 221, 0.16);
  border: 1px solid var(--hot);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.tag-rail .tag-rail-hot-link:hover {
  background: var(--hot);
  color: #fff;
  transform: translateY(-1px);
}

/* In-Content Callout Box */
.cc-in-content-box {
  margin: 32px 0;
  padding: 20px 24px;
  background: #0f0b12;
  border: 1px solid #3b141d;
  border-left: 4px solid var(--hot);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.cc-in-content-left {
  flex: 1;
}
.cc-in-content-badge {
  background: var(--hot);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  display: inline-block;
  margin-bottom: 6px;
}
.cc-in-content-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.cc-in-content-desc {
  margin: 0;
  font-size: 13px;
  color: #a1a1aa;
  line-height: 1.4;
}
.cc-in-content-action {
  flex-shrink: 0;
}
.cc-in-content-btn {
  background: var(--hot);
  color: #fff;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

@media (max-width: 768px) {
  .cc-in-content-box {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -------------------------------------------------------------
   7. Buttons, chips, meters
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--hot);
  color: var(--hot-ink);
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 24px;
  line-height: 1;
  border: 0;
  border-bottom: 3px solid var(--hot-deep);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--speed), transform var(--speed);
}
.btn:hover { background: var(--hot-lift); color: var(--hot-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); border-bottom-width: 1px; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-hi);
  border-bottom: 1px solid var(--rule-hi);
}
.btn-secondary:hover {
  background: var(--panel-2);
  color: var(--ink);
  border-color: var(--hot);
}
.btn-sm { padding: 9px 15px; font-size: 11px; }
.btn-block { display: block; width: 100%; }

/* The quiet secondary action. Not a button — a link with a rule under it. */
.btn-review-link,
.ghost {
  display: inline-block;
  color: var(--ink-3);
  font-size: 14px;
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 2px;
}
.btn-review-link:hover,
.ghost:hover { color: var(--ink); border-bottom-color: var(--hot); }

.chip,
.tag-badge,
.meta-tag {
  display: inline-block;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 4px 8px;
  line-height: 1;
}
.meta-tag strong { color: var(--ink); }

.article-category-badge,
.card-verdict-badge {
  display: inline-block;
  color: var(--ink-3);
}

/* Ten-cell instrument meter. Whole cells fill; the fractional cell part-fills,
   so 9.2 and 8.4 are visibly different — which five gold stars never were. */
.meter { display: flex; gap: 3px; margin-top: 9px; }
.meter .cell {
  width: 14px;
  height: 8px;
  background: var(--panel-3);
  display: block;
  overflow: hidden;
}
.meter .cell i { display: block; height: 100%; background: var(--ink-2); }
.meter-sm { gap: 2px; }
.meter-sm .cell { width: 100%; height: 7px; }
.meter-block { width: 100%; }

.score-big {
  font-family: var(--poster);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  color: var(--ink);
}
.score-big span { font-size: 0.4em; color: var(--ink-3); }

/* -------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  max-width: none;
  padding: 0;
  text-align: left;
}
.hero::before {
  display: none;
}
.hero .container,
.hero-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 32px;
  padding-bottom: 28px;
}
.hero h1 { max-width: 19ch; margin-bottom: 12px; }
.hero p {
  margin: 0;
  color: var(--ink-2);
  max-width: 60ch;
  font-size: 15px;
}
/* The uppercase letterspaced eyebrow above a centred headline is the single
   most template-looking element a hero can carry. The dateline in the trust
   row already says what it said. */
.hero-eyebrow { display: none; }

.hero-trust {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  color: var(--ink-3);
}
.hero-trust-item { display: block; }
.hero-trust-item strong {
  display: block;
  color: var(--ink);
  font-family: var(--poster);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.hero-trust-item .dot { display: none; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

/* -------------------------------------------------------------
   9. Editor's pick slot
   ------------------------------------------------------------- */
.pick {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.pick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}
.pick-shot {
  position: relative;
  display: block;
  min-height: 330px;
  overflow: hidden;
}
.pick-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-shot::after {
  display: none;
}
.pick-spotlight .pick-shot::after {
  display: none;
}
.pick-flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--hot);
  color: var(--hot-ink);
  padding: 9px 15px 8px;
}
.pick-body {
  padding: 34px 0 34px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pick-body > .label { color: var(--ink-3); }
.pick-name {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 4px;
}
.pick-name h2 { font-size: 54px; }
.pick-name .score-big { font-size: 40px; }
.pick-verdict {
  color: var(--ink-2);
  margin-top: 14px;
  margin-bottom: 20px;
  max-width: 46ch;
}
.pick-meta {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pick-meta > span { color: var(--ink-3); }
.pick-meta b {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.pick-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* -------------------------------------------------------------
   10. Ranked entries (leaderboard + review rows)
   ------------------------------------------------------------- */
.leaderboard { padding-top: 0; }

.leaderboard-item,
.post-row-card {
  display: grid;
  /* rank · brand · score · verdict · action — the verdict takes the slack,
     which is the column a reader actually stops on. */
  grid-template-columns: 54px 300px 130px minmax(0, 1fr) 186px;
  gap: 24px;
  align-items: start;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  background: none;
  transition: background var(--speed);
}
.leaderboard-item:hover,
.post-row-card:hover { background: var(--panel-2); }
/* The old build outlined rank 1 in red. The flag says it already. */
.featured-winner { border-bottom-color: var(--rule); }

.leaderboard-rank {
  font-family: var(--poster);
  font-size: 50px;
  line-height: 0.8;
  color: var(--rule-hi);
  text-align: right;
}

.leaderboard-ribbon {
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--hot);
  color: var(--hot-ink);
  padding: 5px 10px;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: -8px;
}

.leaderboard-shot,
.brand-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--rule);
  transition: transform 0.3s;
}
.leaderboard-meta a:hover .leaderboard-shot,
.card-col-brand a:hover .brand-shot { transform: scale(1.03); }

.thumb-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  font-family: var(--poster);
  font-size: 44px;
  color: var(--rule-hi);
}

/* Shot beside the name, not above it. Stacked, the brand cell ran twice the
   height of every other column and each row grew a dead band under it. */
.leaderboard-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.leaderboard-meta > a { flex: 0 0 118px; }
.leaderboard-meta > div { min-width: 0; }
/* Impact's glyphs overrun a line box tighter than ~1.05, which pulled the
   brand name down into the chips underneath it. */
.leaderboard-name { margin-top: 0; line-height: 1.05; }
.leaderboard-name a {
  display: block;
  font-family: var(--poster);
  font-size: 22px;
  text-transform: uppercase;
  line-height: 1.05;
}
.leaderboard-name a:hover { color: var(--hot); }
.leaderboard-tags,
.card-meta-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.leaderboard-rating,
.brand-rating { display: block; }
/* Impact overshoots any line box under ~1.05; at 0.9 the numeral climbed into
   the meter printed above it on the rankings template. */
.rating-value,
.rating-number {
  display: block;
  font-family: var(--poster);
  font-size: 35px;
  line-height: 1.05;
  color: var(--ink);
}
.leaderboard-rating .meter,
.brand-rating .meter { margin-top: 4px; }

.leaderboard-verdict { color: var(--ink-2); max-width: 52ch; }

.leaderboard-action,
.card-col-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.leaderboard-action .btn,
.card-col-actions .btn {
  width: 100%;
  display: inline-block !important;
  text-align: center;
  background: var(--hot) !important;
  color: var(--hot-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  padding: 12px 14px;
}
.leaderboard-action .btn-review-link,
.card-col-actions .btn-review-link {
  display: inline-block;
  text-align: center;
  width: 100%;
  font-size: 13px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 2px;
}
.leaderboard-action .btn-review-link:hover,
.card-col-actions .btn-review-link:hover {
  color: var(--hot);
  border-bottom-color: var(--hot);
}

/* Review row card — same skeleton, extra highlights column. */
.post-row-card { grid-template-columns: 168px minmax(0, 1fr) minmax(0, 0.8fr) 186px; }
/* The reviews hub prepends a rank badge, so it carries one column more. */
.post-row-card.ranked { grid-template-columns: 54px 168px minmax(0, 1fr) minmax(0, 0.8fr) 186px; }
.post-row-card.ranked .rank-badge {
  font-size: 50px;
  line-height: 0.8;
  text-align: right;
  color: var(--rule-hi);
}
.card-col-brand { display: block; }
.card-col-brand .brand-rating { margin-top: 10px; }
.card-title {
  margin-top: 9px;
  font-size: 22px;
}
.card-title a:hover { color: var(--hot); }
.card-excerpt { color: var(--ink-2); margin-top: 10px; max-width: 52ch; }
.card-excerpt p { margin: 0; }
.quick-pros strong {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.quick-pros ul { list-style: none; }
.quick-pros li {
  color: var(--ink-2);
  padding-left: 14px;
  position: relative;
  margin-bottom: 5px;
}
.quick-pros li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--hot);
}

/* Editorial article row — guides and comparisons. */
.posts-list { display: block; }
.post-article-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 70px;
  gap: 22px;
  align-items: baseline;
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  transition: background var(--speed);
}
.post-article-card:hover { background: var(--panel-2); }
.post-article-card .article-card-thumb { display: none; }
.post-article-card .article-card-details { grid-column: 2; }
.post-article-card .card-title { margin-top: 0; font-family: var(--text); font-weight: 700; text-transform: none; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.post-article-card:hover .card-title a { color: var(--hot); }
.post-article-card .card-excerpt { color: var(--ink-3); margin-top: 5px; max-width: 62ch; }
.post-article-card .article-category-badge {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
}
.post-article-card .article-meta {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-article-card .article-card-actions { display: none; }

/* -------------------------------------------------------------
   11. Platform tile grid
   ------------------------------------------------------------- */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.tile { display: block; }
.tile-art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--panel-2);
  border: 1px solid var(--rule);
}
.tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.tile:hover .tile-art img { transform: scale(1.06); }
.tile-void {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--poster);
  font-size: 52px;
  color: var(--rule-hi);
}
.tile-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(15, 15, 17, 0.82);
  color: var(--ink-2);
  padding: 4px 7px;
  line-height: 1;
}
.tile-score {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--hot);
  color: var(--hot-ink);
  font-family: var(--poster);
  font-size: 17px;
  line-height: 1;
  padding: 6px 8px 5px;
}
.tile-hover {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 15, 17, 0.9);
  color: var(--ink);
  padding: 10px;
  text-align: center;
  transform: translateY(101%);
  transition: transform 0.22s;
}
.tile:hover .tile-hover,
.tile:focus-visible .tile-hover { transform: translateY(0); }
.tile-bar { display: block; height: 3px; background: var(--panel-3); }
.tile-bar i { display: block; height: 100%; background: var(--hot); }
.tile-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}
.tile-meta b { font-size: 16px; }
.tile-meta .label { color: var(--ink-3); flex: 0 0 auto; }
.tile:hover .tile-meta b { color: var(--hot); }
.tile-price { display: block; margin-top: 3px; color: var(--ink-3); font-size: 13px; }

/* -------------------------------------------------------------
   12. Score breakdown & protocol
   ------------------------------------------------------------- */
.break-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.break-grid > div > p { color: var(--ink-2); margin-bottom: 13px; max-width: 44ch; }

.sub {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 44px;
  gap: 18px;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.sub-label { color: var(--ink-2); }
.sub-n {
  text-align: right;
  font-family: var(--poster);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
/* The weak leg is the only place the accent enters a data display. */
.sub.weak .meter .cell i { background: var(--hot); }
.sub.weak .sub-n { color: var(--hot); }
.sub.weak .sub-label { color: var(--ink); }

.protocol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}
.protocol div {
  padding: 22px 26px 22px 0;
  border-bottom: 1px solid var(--rule);
}
.protocol b {
  display: block;
  font-family: var(--poster);
  font-size: 46px;
  font-weight: 400;
  line-height: 0.85;
  color: var(--ink);
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.protocol span { color: var(--ink-3); }

/* -------------------------------------------------------------
   13. Single review
   ------------------------------------------------------------- */
.review-header {
  padding-top: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.review-header h1 { margin-top: 14px; max-width: 22ch; }

.breadcrumbs { color: var(--ink-3); font-size: 13px; }
.breadcrumbs a:hover { color: var(--hot); }

.review-byline {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.byline-rating { color: var(--ink); }

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
  padding-bottom: 56px;
  width: 100%;
}
.review-layout.no-sidebar {
  grid-template-columns: minmax(0, 1fr) 340px;
  max-width: 100%;
}
@media (max-width: 960px) {
  .review-layout,
  .review-layout.no-sidebar {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.featured-media { margin-bottom: 28px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.featured-media img { display: block; width: 100%; }
/* A post whose thumbnail attachment has gone missing still renders the
   wrapper; without this it draws an empty framed box above the article. */
.featured-media:empty { display: none; border: 0; margin: 0; }

/* Running prose is the one place the neutral grotesk gets room to breathe. */
.entry-content { font-size: 17px; line-height: 1.68; color: var(--ink-2); }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content h2 {
  margin-top: 1.8em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.entry-content h3 { margin-top: 1.5em; color: var(--ink); }
.entry-content strong { color: var(--ink); }
.entry-content a { color: var(--hot); border-bottom: 1px solid rgba(157, 78, 221, 0.4); text-decoration: none; font-weight: 600; }
.entry-content a:hover { color: var(--hot-lift); border-bottom-color: var(--hot); }
.entry-content ul,
.entry-content ol { padding-left: 20px; }
.entry-content li { margin-bottom: 8px; }
.entry-content img { display: block; border: 1px solid var(--rule); border-radius: 8px; }
.entry-content blockquote {
  border-left: 3px solid var(--hot);
  padding: 14px 18px;
  background: var(--panel-2);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-style: italic;
  margin: 1.5em 0;
}
.entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.8em 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.entry-content th {
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule-hi);
  text-align: left;
}
.entry-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  background: var(--panel);
}
.entry-content tr:last-child td {
  border-bottom: none;
}
.entry-content tbody tr:nth-child(even) td {
  background: var(--panel-2);
}
.entry-content tbody tr:hover td {
  background: rgba(157, 78, 221, 0.05);
}

.section-title {
  margin-top: 2em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-hi);
}

.pros-cons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 22px;
}
.pros-cons-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--text);
  color: var(--ink-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}
.pros-cons-list { list-style: none; }
.pros-cons-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
  color: var(--ink-2);
}
.pros-cons-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--ink-3);
}
.cons-box .pros-cons-list li::before { background: var(--hot); }

.final-cta-box {
  margin-top: 40px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.final-cta-box h3 { margin: 0; font-size: 26px; }

.quick-verdict-box {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  margin: 28px 0;
  background: var(--panel);
  border-left: 3px solid var(--hot);
}
.quick-verdict-score {
  font-family: var(--poster);
  font-size: 44px;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.quick-verdict-body { color: var(--ink-2); }
.quick-verdict-body strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* Sidebar */
.widget-sticky { position: sticky; top: 22px; display: grid; gap: 22px; }
.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 22px;
}
.review-summary-card { padding: 0; border: 0; background: none; }
/* The circular score badge is gone — a numeral plus a meter says more. */
.score-circle { display: flex; align-items: baseline; gap: 10px; }
.score-num {
  font-family: var(--poster);
  font-size: 58px;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.score-lbl { color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
/* The sidebar used to repeat the H1 verbatim directly beneath it. */
.summary-title { display: none; }
.summary-verdict { color: var(--ink-2); margin-top: 14px; }

.features-list {
  margin-top: 18px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.feature-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.feature-name { color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.feature-value { color: var(--ink); text-align: right; }

.review-summary-card .btn { margin-top: 20px; }
.affiliate-note {
  margin-top: 9px;
  text-align: center;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sidebar-links-card strong {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sidebar-links { list-style: none; }
.sidebar-links li { border-top: 1px solid var(--rule); }
.sidebar-links a { display: block; padding: 10px 0; color: var(--ink-2); }
.sidebar-links a:hover { color: var(--hot); }

.author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.author-avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  font-family: var(--poster);
  font-size: 24px;
  color: var(--ink-2);
}
.author-bio { color: var(--ink-3); }
.author-bio strong { display: block; color: var(--ink); margin-bottom: 5px; }

.related-section { padding: 44px 0; border-top: 1px solid var(--rule); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.related-card {
  display: block;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--rule);
  transition: border-color var(--speed), background var(--speed);
}
.related-card:hover { border-color: var(--rule-hi); background: var(--panel-2); }
.related-title {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.related-card:hover .related-title { color: var(--hot); }
.related-meta {
  display: block;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   14. Hub pages, comparison wall, static pages
   ------------------------------------------------------------- */
.hub-header { padding: 36px 0 26px; border-bottom: 1px solid var(--rule); }
.hub-title { max-width: 20ch; }
.hub-subtitle { color: var(--ink-2); margin-top: 14px; max-width: 60ch; }
.hub-intro { color: var(--ink-2); margin-top: 14px; max-width: 68ch; }
.hub-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.hub-chip {
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 7px 12px;
  line-height: 1;
}
.hub-chip:hover { color: var(--ink); border-color: var(--rule-hi); }
.hub-chip.active {
  background: var(--hot);
  border-color: var(--hot);
  color: var(--hot-ink);
}
.hub-cta { margin-top: 22px; }

.wall { padding-bottom: 56px; }
.wall-essay { color: var(--ink-2); max-width: 68ch; }
.wall-essay p + p { margin-top: 1em; }
.wall-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 26px;
  border-top: 1px solid var(--rule);
}
.wall-stat { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.wall-stat b {
  display: block;
  font-family: var(--poster);
  font-size: 40px;
  font-weight: 400;
  line-height: 0.85;
  color: var(--ink);
  margin-bottom: 8px;
}

.wall-controls-wrap { margin-top: 30px; }
.wall-controls {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wall-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.wall-chip {
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 7px 12px;
  line-height: 1;
  cursor: pointer;
}
.wall-chip:hover { color: var(--ink); border-color: var(--rule-hi); }
.wall-chip.is-active,
.wall-chip[aria-pressed="true"] {
  background: var(--hot);
  border-color: var(--hot);
  color: var(--hot-ink);
}
.wall-sort {
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--text);
  font-size: 13px;
  padding: 8px 10px;
}

.wall-table-wrap,
.vs-table-wrap { overflow-x: auto; margin-top: 26px; }
.wall-table,
.vs-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  text-align: left;
}
/* Column heads only. The comparison wall uses <th scope="row"> for the platform
   cell, and an unscoped `th` rule dropped that cell to the bottom of a very
   tall row and shrank the brand name to caption size. */
.wall-table thead th,
.vs-table thead th {
  color: var(--ink-3);
  font-family: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--rule-hi);
  vertical-align: bottom;
}
.wall-table td,
.vs-table td,
.wall-table tbody th,
.vs-table tbody th {
  padding: 16px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
  color: var(--ink-2);
}
.wall-table tbody tr:hover,
.vs-table tbody tr:hover { background: var(--panel-2); }
.wall-brand { display: flex; align-items: center; gap: 12px; }
.wall-shot { width: 68px; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); }
.wall-name { color: var(--ink); font-size: 17px; font-weight: 700; }
.wall-name:hover { color: var(--hot); }
.wall-note-row td { color: var(--ink-3); padding-top: 0; }
.wall-note-label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 8px;
}
.cell-unknown,
.flag-unknown,
.flag-unstated { color: var(--ink-3); }
.flag-yes { color: var(--ink); }
.wall-checked,
.wall-disclosure { color: var(--ink-3); font-size: 13px; margin-top: 18px; }
.wall-sources { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule); }
.wall-source-list { list-style: none; color: var(--ink-3); font-size: 13px; }
.wall-source-list li { padding: 5px 0; }
.wall-source-list a:hover { color: var(--hot); }

.static-page,
.page-body {
  max-width: 74ch;
  padding-top: 32px;
  padding-bottom: 56px;
}
.page-body { font-size: 17px; line-height: 1.66; color: var(--ink-2); }
.page-body > * + * { margin-top: 1.15em; }
.page-body h2 { margin-top: 1.8em; color: var(--ink); }
.page-body a { color: var(--ink); border-bottom: 1px solid var(--rule-hi); }
.page-body a:hover { color: var(--hot); border-bottom-color: var(--hot); }
.page-links { margin-top: 26px; }

.rank-badge {
  display: inline-block;
  font-family: var(--poster);
  font-size: 20px;
  color: var(--rule-hi);
}
.ranked .rank-badge { color: var(--ink-2); }

/* -------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------- */
.site-footer {
  padding-top: 40px;
  padding-bottom: 56px;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.footer-title {
  font-family: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.footer-grid > div:first-child .footer-title {
  font-family: var(--poster);
  font-size: 23px;
  letter-spacing: -0.01em;
}
.footer-blurb { margin-top: 12px; max-width: 36ch; }
.footer-links { list-style: none; }
.footer-links a { display: block; padding: 4px 0; }
.footer-links a:hover { color: var(--hot); }

.disclaimer-box { padding-top: 20px; max-width: 84ch; font-size: 13px; line-height: 1.6; }
.disclaimer-box strong { color: var(--ink-2); }
.disclaimer-box a { color: var(--ink-2); border-bottom: 1px solid var(--rule-hi); }
.disclaimer-box a:hover { color: var(--hot); }

.copyright {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
}

/* -------------------------------------------------------------
   16. Pagination
   ------------------------------------------------------------- */
.posts-navigation,
.pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
}
.posts-navigation a,
.pagination a {
  display: inline-block;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.posts-navigation a:hover,
.pagination a:hover { color: var(--ink); border-color: var(--hot); }

/* -------------------------------------------------------------
   17. Motion & responsive
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
}

@media (max-width: 1080px) {
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leaderboard-item { grid-template-columns: 44px 250px 110px minmax(0, 1fr); }
  .leaderboard-action { grid-column: 2 / -1; }
  .post-row-card { grid-template-columns: 140px minmax(0, 1fr) 170px; }
  .post-row-card.ranked { grid-template-columns: 44px 140px minmax(0, 1fr) 170px; }
  .card-col-proscons { display: none; }
  .leaderboard-action,
  .card-col-actions {
    grid-column: 2 / -1;
    flex-direction: row;
    align-items: center;
  }
  .leaderboard-action .btn,
  .card-col-actions .btn { width: auto; }
  .review-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .widget-sticky { position: static; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .menu-toggle { display: flex; }
  .site-navigation { order: 4; width: 100%; }
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
  }
  .nav-menu.active { display: flex; }
  .nav-menu a { padding: 11px 0; border-bottom: 1px solid var(--rule); }
  .nav-menu a:hover { border-bottom-color: var(--rule); color: var(--hot); }

  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .pick-body { padding: 28px 0 32px; }
  .pick-name h2 { font-size: 40px; }
  .break-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .protocol,
  .wall-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pros-cons-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub { grid-template-columns: 118px minmax(0, 1fr) 38px; gap: 13px; }

  .leaderboard-item,
  .post-row-card.ranked { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .post-row-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .post-row-card.ranked .rank-badge { font-size: 34px; }
  .leaderboard-meta { display: block; }
  .leaderboard-meta > a { display: block; max-width: 200px; margin-bottom: 10px; }
  .leaderboard-shot,
  .brand-shot { max-width: 220px; }
  .leaderboard-meta,
  .leaderboard-rating,
  .leaderboard-verdict,
  .leaderboard-action,
  .post-row-card.ranked .card-col-details,
  .post-row-card.ranked .card-col-actions { grid-column: 2; }
  .post-row-card.ranked .card-col-brand { grid-column: 2; max-width: 220px; }

  .post-article-card { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .post-article-card .article-card-details,
  .post-article-card .article-category-badge,
  .post-article-card .article-meta { grid-column: 1; }
  .post-article-card .article-meta { text-align: left; }

  .final-cta-box { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------
   Post Navigation Crawl Ring & Related Thumbnails
   ------------------------------------------------------------- */
.post-navigation-ring {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 36px 0;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.post-nav-card {
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition: border-color var(--speed), background var(--speed);
}
.post-nav-card:hover {
  border-color: var(--rule-hi);
  background: var(--panel-2);
}
.post-nav-card.is-empty {
  visibility: hidden;
}
.post-nav-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.post-nav-link {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  text-decoration: none;
}
.post-nav-link:hover {
  color: var(--hot);
}
@media (max-width: 640px) {
  .post-navigation-ring {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

.related-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 12px;
  background: var(--panel-2);
}
.related-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.related-card:hover .related-thumb {
  transform: scale(1.03);
}
.related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =============================================================
   20. Upgraded Landing Page & A/B Mode Styles (Compact Masthead)
   ============================================================= */
.front-hero {
  padding-top: 10px;
  padding-bottom: 12px;
}
.front-hero .hero-inner {
  padding-top: 10px;
  padding-bottom: 8px;
  gap: 20px;
  align-items: center;
}
.hero-text-block {
  flex: 1 1 560px;
  max-width: 760px;
}
.hero-mode-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.hero-switcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.switcher-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.segmented-control {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  transition: all var(--speed);
}
.segment-btn:hover {
  color: var(--ink);
}
.segment-btn.active {
  background: var(--panel-3);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.segment-tag {
  background: rgba(157, 78, 221, 0.16);
  color: var(--hot);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.front-hero .hero-h1 {
  font-size: clamp(23px, 2.4vw, 32px);
  max-width: none !important;
  margin-bottom: 6px !important;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.front-hero .hero-sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 65ch;
  margin: 0;
}

.front-hero .hero-trust {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.front-hero .hero-trust-item {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 80px;
}
.front-hero .hero-trust-item strong.num,
.front-hero .hero-trust-item strong {
  font-family: var(--poster);
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 2px;
}
.front-hero .hero-trust-item span {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .front-hero .hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .front-hero .hero-trust {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Variant Switching Rules */
.main-content.is-mode-girlfriend .variant-porn {
  display: none !important;
}
.main-content.is-mode-girlfriend .variant-gf {
  display: block !important;
}
.main-content.is-mode-girlfriend .pick-shot.variant-gf {
  display: block !important;
}
.main-content.is-mode-girlfriend .pick-shot.variant-porn {
  display: none !important;
}

.main-content.is-mode-porn .variant-gf {
  display: none !important;
}
.main-content.is-mode-porn .variant-porn {
  display: block !important;
}
.main-content.is-mode-porn .pick-shot.variant-gf {
  display: none !important;
}
.main-content.is-mode-porn .pick-shot.variant-porn {
  display: block !important;
}

/* Spotlight Card (.pick-spotlight) */
.pick-spotlight {
  padding: 6px 0 22px 0;
  background: var(--panel);
}
.pick-shot-wrap {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  background: var(--panel-2);
}
.pick-shot-badges {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.shot-chip {
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}
.shot-chip.glow-hot {
  background: var(--hot);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(157, 78, 221, 0.5);
}
.shot-chip.glow-red {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}
.pick-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pick-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--hot);
  text-transform: uppercase;
}
.pick-rank-badge {
  font-size: 11px;
  font-weight: 800;
  background: rgba(157, 78, 221, 0.12);
  color: var(--hot);
  padding: 3px 8px;
  border-radius: 4px;
}
.pick-score-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pick-score-box .score-big {
  font-size: 38px;
  font-weight: 900;
  color: var(--hot);
}
.pick-score-box .score-max {
  font-size: 18px;
  color: var(--ink-3);
  font-weight: 700;
}
.pick-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 768px) {
  .pick-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pick-spec-pill {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
}
.spec-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.spec-val {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.btn-spotlight {
  padding: 14px 28px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 24px rgba(157, 78, 221, 0.35) !important;
}
.pick-sub-niches {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.niches-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-3);
}
.niches-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.niche-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.niche-pill:hover {
  border-color: var(--hot);
  color: var(--hot);
  transform: translateY(-1px);
}

/* Leaderboard */
.leaderboard-card-box {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.leaderboard-item {
  display: grid;
  grid-template-columns: 50px 280px 130px minmax(0, 1fr) 180px;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s ease;
}
.leaderboard-item:last-child {
  border-bottom: none;
}
.leaderboard-item:hover {
  background: var(--panel-2);
}
@media (max-width: 992px) {
  .leaderboard-item {
    grid-template-columns: 40px minmax(0, 1fr) 140px;
    gap: 14px;
  }
  .leaderboard-rating,
  .leaderboard-verdict {
    display: none;
  }
}
@media (max-width: 640px) {
  .leaderboard-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .leaderboard-rating,
  .leaderboard-verdict {
    display: block;
  }
}
.leaderboard-shot {
  width: 100px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rule);
  display: block;
}
.leaderboard-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.leaderboard-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.leaderboard-name a {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.leaderboard-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-sm {
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Trending Personas */
.home-personas-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .home-personas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .home-personas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.home-persona-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease;
  display: block;
}
.home-persona-card:hover {
  transform: translateY(-3px);
  border-color: var(--hot);
}
.persona-img-box {
  position: relative;
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: var(--panel-2);
}
.persona-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.persona-img-box img[src*="candy-goth-darkangel"] {
  object-position: 85% center;
}
.home-persona-card:hover .persona-img-box img {
  transform: scale(1.05);
}
.persona-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.persona-info {
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.persona-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.persona-cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--hot);
}

/* =============================================================
   21. Research Hub & Topic Directory (Clean Editorial Index)
   ============================================================= */
.topic-hub-section {
  background: var(--void);
  border-top: 1px solid var(--rule);
  padding: 44px 0 54px;
}
.topic-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 1120px) {
  .topic-hub-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .topic-hub-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.topic-box {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px 20px;
  transition: border-color var(--speed);
}
.topic-box:hover {
  border-color: var(--rule-hi);
}
.topic-box-title {
  font-family: var(--poster);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.topic-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topic-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.topic-link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 500;
  transition: color var(--speed);
}
.topic-link::before {
  content: "›";
  color: var(--hot);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  flex-shrink: 0;
}
.topic-link:hover {
  color: var(--hot);
}

/* -------------------------------------------------------------
   21. FAQ Accordion & Single H1 Variant Styles
   ------------------------------------------------------------- */
.hero-h1 .hero-title-text.variant-porn { display: none; }
.hero-sub-wrap .hero-sub.variant-porn { display: none; }

.main-content.is-mode-porn .hero-h1 .hero-title-text.variant-gf { display: none !important; }
.main-content.is-mode-porn .hero-h1 .hero-title-text.variant-porn { display: inline !important; }
.main-content.is-mode-porn .hero-sub-wrap .hero-sub.variant-gf { display: none !important; }
.main-content.is-mode-porn .hero-sub-wrap .hero-sub.variant-porn { display: block !important; }

.main-content.is-mode-girlfriend .hero-h1 .hero-title-text.variant-porn { display: none !important; }
.main-content.is-mode-girlfriend .hero-h1 .hero-title-text.variant-gf { display: inline !important; }
.main-content.is-mode-girlfriend .hero-sub-wrap .hero-sub.variant-porn { display: none !important; }
.main-content.is-mode-girlfriend .hero-sub-wrap .hero-sub.variant-gf { display: block !important; }

/* FAQ Section */
.faq-section {
  padding: 48px 0 56px;
  border-top: 1px solid var(--rule);
  background: var(--void);
}
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin-top: 24px;
}
.faq-item {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--speed);
}
.faq-item[open] {
  border-color: var(--rule-hi);
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-icon {
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-3);
  transition: transform var(--speed), color var(--speed);
  line-height: 1;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--hot);
}
.faq-answer {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.faq-answer p {
  margin: 0;
}
.faq-answer strong {
  color: var(--ink);
}

/* =========================================================
   Cinematic High-Converting Hero Banner & Interactive 4K Slider
   ========================================================= */
.cinematic-hero {
  background: #050406;
  border-bottom: 1px solid #1f1822;
  padding: 38px 0 34px;
  position: relative;
  overflow: hidden;
}
.cinematic-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: #3b141d;
}
.hero-container {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 36px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-verified-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #c5002a;
  background: rgba(197, 0, 42, 0.12);
  border: 1px solid rgba(197, 0, 42, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.hero-score-badge {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 5px 12px;
  border-radius: 999px;
}
.hero-headline {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero-lede {
  font-size: clamp(14px, 1.5vw, 16px);
  color: #a1a1aa;
  line-height: 1.55;
  margin: 0;
}
.hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(20, 20, 28, 0.65);
  border: 1px solid #232330;
  padding: 13px 16px;
  border-radius: 10px;
}
.hero-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #d4d4dc;
  line-height: 1.4;
}
.hero-highlight-item .chk {
  color: #10b981;
  font-weight: 900;
  flex-shrink: 0;
}
.hero-highlight-item strong {
  color: #fff;
}
.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.btn-hero-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #8b0000;
  border: 1px solid #c5002a;
  color: #fff !important;
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 900;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 24px rgba(139, 0, 0, 0.45);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.btn-hero-primary:hover {
  background: #c5002a;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(197, 0, 42, 0.65);
  color: #fff !important;
}
.btn-hero-primary small {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.92;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.9);
}
.hero-secondary-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.hero-link-sec {
  color: #9ca3af;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.15s;
}
.hero-link-sec:hover {
  color: #c5002a;
}
.hero-secondary-links .sep {
  color: #4b5563;
}
.hero-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-top: 1px solid #1f1f28;
  padding-top: 14px;
  margin-top: 2px;
}
.trust-stat {
  font-size: 11px;
  color: #71717a;
  text-align: center;
}
.trust-stat strong {
  display: block;
  color: #c5002a;
  font-size: 14px;
  font-weight: 800;
}

/* 4K Persona Slider */
.hero-slider-wrap {
  background: #121218;
  border: 1px solid #262634;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
}
.slider-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.slider-tab {
  background: #181822;
  border: 1px solid #282836;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 4px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slider-tab:hover {
  color: #fff;
  border-color: #3b3b4f;
}
.slider-tab.active {
  background: #8b0000;
  color: #fff;
  border-color: #c5002a;
  box-shadow: 0 2px 10px rgba(197, 0, 42, 0.4);
}
.slider-viewport {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0b0b0f;
}
.slider-slide {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.slider-slide.active {
  display: block;
  animation: heroSlideFade 0.3s ease-in-out;
}
@keyframes heroSlideFade {
  from { opacity: 0.5; transform: scale(1.01); }
  to { opacity: 1; transform: scale(1); }
}
.slide-media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.slide-media-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.slide-overlay-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.slide-tag {
  font-size: 10px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.slide-tag.tag-pink {
  background: rgba(157, 78, 221, 0.85);
  color: #fff;
}
.slide-tag.tag-blue {
  background: rgba(59, 130, 246, 0.85);
  color: #fff;
}
.slide-tag.tag-purple {
  background: rgba(168, 85, 247, 0.85);
  color: #fff;
}
.slide-tag.tag-red {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
}
.slide-tag.tag-gold {
  background: rgba(20, 20, 26, 0.85);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.slide-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 8, 13, 0.95);
  padding: 36px 16px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
}
.caption-info {
  flex: 1;
  min-width: 0;
}
.caption-name {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 2px;
}
.caption-desc {
  font-size: 11.5px;
  color: #d1d5db;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slide-action-btn {
  background: #8b0000;
  border: 1px solid #c5002a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 7px 13px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.45);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.slide-media-link:hover .slide-action-btn {
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 640px) {
  .cinematic-hero {
    padding: 24px 0 24px;
  }
  .slider-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .slide-caption-bar {
    padding: 24px 12px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .slide-action-btn {
    width: 100%;
    text-align: center;
  }
}

/* -------------------------------------------------------------
   30. Candy AI Chat Request Simulator, Persona Avatars & Mobile CTA
   ------------------------------------------------------------- */

/* --- Persona Avatar in Header Banner --- */
.cc-context-avatar-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.cc-context-avatar-box {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid var(--hot);
  box-shadow: 0 0 16px rgba(157, 78, 221, 0.45);
  overflow: hidden;
  background: #111;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-context-avatar-wrap:hover .cc-context-avatar-box {
  transform: scale(1.06);
  box-shadow: 0 0 24px rgba(157, 78, 221, 0.7);
}
.cc-context-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-context-avatar-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #10b981;
  border: 2px solid #141117;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
}
.cc-context-avatar-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 5px;
  text-align: center;
  max-width: 90px;
  line-height: 1.2;
}

/* --- Chat Request Simulator Box --- */
.cc-chat-simulator {
  background: #121217;
  border: 1px solid rgba(157, 78, 221, 0.4);
  border-radius: 12px;
  margin: 32px 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 1px rgba(157, 78, 221, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cc-chat-sim-header {
  background: #181820;
  border-bottom: 1px solid #282834;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-chat-sim-companion {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-chat-sim-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--hot);
  overflow: hidden;
  flex-shrink: 0;
}
.cc-chat-sim-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-chat-sim-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  background: #10b981;
  border: 2px solid #181820;
  border-radius: 50%;
}
.cc-chat-sim-info h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cc-chat-sim-status {
  font-size: 11px;
  color: #10b981;
  font-weight: 600;
}
.cc-chat-sim-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c5002a;
  background: rgba(197, 0, 42, 0.12);
  border: 1px solid rgba(197, 0, 42, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}
.cc-chat-sim-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0e0e12;
}
.cc-chat-bubble {
  max-width: 85%;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.45;
}
.cc-chat-bubble.user {
  align-self: flex-end;
  background: #252836;
  border: 1px solid #373b4d;
  color: #e2e8f0;
  border-bottom-right-radius: 2px;
}
.cc-chat-bubble.user strong {
  color: #93c5fd;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.05em;
}
.cc-chat-bubble.companion {
  align-self: flex-start;
  background: #141117;
  border: 1px solid rgba(197, 0, 42, 0.35);
  color: #f2eff4;
  border-bottom-left-radius: 2px;
}
.cc-chat-bubble.companion strong {
  color: #c5002a;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.05em;
}
.cc-chat-media-attachment {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
  position: relative;
}
.cc-chat-media-attachment img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.cc-chat-media-attachment:hover img {
  transform: scale(1.02);
}
.cc-chat-media-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.cc-chat-audio-bar {
  margin-top: 10px;
  background: rgba(197, 0, 42, 0.12);
  border: 1px solid rgba(197, 0, 42, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-chat-audio-btn {
  width: 28px;
  height: 28px;
  background: var(--hot);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.cc-chat-waveform {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
}
.cc-chat-waveform span {
  display: block;
  width: 3px;
  background: #c5002a;
  border-radius: 2px;
  opacity: 0.85;
}
.cc-chat-audio-duration {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
}
.cc-chat-sim-footer {
  background: #14141a;
  border-top: 1px solid #23232c;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cc-chat-sim-footer-note {
  font-size: 11.5px;
  color: #94a3b8;
}
.cc-chat-sim-footer-note span {
  color: #10b981;
  font-weight: 700;
}

/* --- Mobile Floating Quick-CTA Drawer --- */
.cc-mobile-float-cta {
  display: none;
}
@media (max-width: 768px) {
  .cc-mobile-float-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(10, 9, 13, 0.96);
    border-top: 1.5px solid rgba(197, 0, 42, 0.6);
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: ccSlideUp 0.25s ease-out;
  }
  @keyframes ccSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .cc-mobile-cta-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
  }
  .cc-mobile-cta-thumb {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--hot);
    overflow: hidden;
    flex-shrink: 0;
  }
  .cc-mobile-cta-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cc-mobile-cta-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #10b981;
    border: 1.5px solid #141117;
    border-radius: 50%;
  }
  .cc-mobile-cta-info {
    min-width: 0;
  }
  .cc-mobile-cta-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cc-mobile-cta-sub {
    font-size: 10.5px;
    color: #a1a1aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cc-mobile-cta-btn {
    flex-shrink: 0;
    background: #8b0000;
    border: 1px solid #c5002a;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(139, 0, 0, 0.45);
    white-space: nowrap;
  }
  .cc-mobile-cta-close {
    background: none;
    border: none;
    color: #71717a;
    font-size: 18px;
    padding: 0 4px;
    cursor: pointer;
    line-height: 1;
    margin-left: -4px;
  }
}