/* ==========================================================================
   Tempdrop Guide — navy / pink premium editorial theme
   Visual direction taken from the user-supplied screenshots of Tempdrop's
   current interface. This is an ORIGINAL independent-publication treatment:
   no official logo, photography, screenshots, certification marks, countdown
   timers, or merchant-only UI assets are copied.
   ========================================================================== */

:root {
  /* Preserve legacy variable names while replacing the old plum palette. */
  --plum-deep: #142044;
  --plum: #1D2A55;
  --plum-mid: #304171;
  --plum-line: rgba(255, 255, 255, 0.16);

  --warm-white: #F7F8FC;
  --paper: #FFFFFF;
  --rose-surface: #FFF0F6;
  --gray-surface: #F0F2F8;
  --teal-surface: #EDF0FC;

  --berry: #F50065;
  --berry-dark: #D70057;
  --berry-ink: #B9004A;
  --coral: #F50065;

  --teal: #697CC5;
  --teal-dark: #3F548F;

  --slate: #25304D;
  --slate-soft: #536079;
  --slate-faint: #707B90;

  --border: #DFE3EE;
  --border-strong: #C8CFDF;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 4px 16px rgba(20, 32, 68, 0.06);
  --shadow-md: 0 16px 44px rgba(20, 32, 68, 0.11);
  --header-h: 84px;
}

html { scroll-padding-top: 102px; }

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(105, 124, 197, 0.08), transparent 24rem),
    var(--warm-white);
  color: var(--slate);
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  color: var(--plum-deep);
  letter-spacing: -0.025em;
}

h1 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 { font-weight: 750; }

strong { color: var(--plum-deep); }

a { color: var(--berry-ink); }
a:hover { color: var(--berry-dark); }

.wrap { max-width: 1240px; }

/* ==========================================================================
   Floating capsule navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 0;
  background: rgba(20, 32, 68, 0.96);
  border: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 60px;
  padding: 6px 10px 6px 16px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(8, 16, 45, 0.22);
}

.brand,
.site-footer .brand {
  color: var(--plum-deep);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--plum); }

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: 0;
  background: var(--berry);
  color: #FFFFFF;
  font-family: var(--serif);
  box-shadow: 0 5px 14px rgba(245, 0, 101, 0.27);
}

.brand-text small {
  color: var(--slate-faint);
  font-size: 0.625rem;
}

.nav-list { gap: 0.1rem; }
.nav-list a {
  color: #34405D;
  border-radius: 999px;
  font-size: 0.875rem;
  padding: 0.58rem 0.7rem;
}
.nav-list a:hover {
  color: var(--plum-deep);
  background: #F1F3F9;
}
.nav-list a[aria-current="page"] {
  color: var(--plum-deep);
  background: #E9ECF7;
  box-shadow: none;
}

.header-cta,
.site-nav a.header-cta {
  color: #FFFFFF;
  background: var(--berry);
  border-color: var(--berry);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(245, 0, 101, 0.24);
}
.header-cta:hover,
.site-nav a.header-cta:hover {
  color: #FFFFFF;
  background: var(--berry-dark);
}

/* Homepage's distinct header CTA wrapper. */
.header-inner > .header-cta {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.header-inner > .header-cta .btn {
  background: var(--berry);
  border-color: var(--berry);
  color: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(245, 0, 101, 0.24);
}

.nav-toggle {
  color: var(--plum-deep);
  border-color: #D9DEEA;
  background: #F3F5FA;
  border-radius: 999px;
}
.nav-toggle:hover { background: #E9ECF6; }
.nav-toggle-bars span,
.nav-toggle-bars::before,
.nav-toggle-bars::after { background: currentColor; }

/* ==========================================================================
   Homepage hero — light, editorial, commerce-forward
   ========================================================================== */
.hero {
  min-height: 540px;
  padding: 4.6rem 0 4.2rem;
  background:
    radial-gradient(circle at 76% 18%, rgba(105, 124, 197, 0.18), transparent 25rem),
    radial-gradient(circle at 12% 85%, rgba(245, 0, 101, 0.08), transparent 24rem),
    linear-gradient(140deg, #FFFFFF 0%, #F3F5FB 58%, #EDF0F9 100%);
  color: var(--slate);
}

.hero::before {
  background: radial-gradient(600px 310px at 20% 8%, rgba(245, 0, 101, 0.08), transparent 64%);
}

.hero h1 {
  color: var(--plum-deep);
  font-size: clamp(2.2rem, 5vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 14ch;
}

.hero .eyebrow,
.page-head .eyebrow {
  color: var(--berry-ink);
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hero-lede,
.hero-verdict {
  color: #43506D;
  font-size: 1.15rem;
  line-height: 1.65;
}
.hero-lede strong,
.hero-verdict strong,
.hero strong { color: var(--plum-deep); }
.hero-meta { color: var(--slate-faint); }
.hero-note { color: var(--slate-faint); }

.hero-motif {
  opacity: 0.16;
  filter: saturate(0.75);
}

.hero .btn-ghost-light,
.hero .btn--outline-light {
  color: var(--plum-deep);
  border-color: #C8CFDF;
  background: rgba(255, 255, 255, 0.72);
}
.hero .btn-ghost-light:hover,
.hero .btn--outline-light:hover {
  color: var(--plum-deep);
  background: #FFFFFF;
  border-color: var(--teal);
}

.hero .disclosure-inline,
.disclosure--hero {
  color: #5E6980;
  border-color: #DDE1EB;
  background: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Offer summary
   ========================================================================== */
.offer-card {
  padding: 1.75rem;
  border: 1px solid rgba(105, 124, 197, 0.24);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(20, 32, 68, 0.16);
}
.offer-card h2 {
  color: var(--plum-deep);
  letter-spacing: 0.09em;
}
.price-now,
.offer-price-now {
  color: var(--plum-deep);
  font-size: 2.7rem;
}
.price-tag,
.offer-price-tag {
  color: #FFFFFF;
  background: var(--berry);
  border-color: var(--berry);
  border-radius: 999px;
}
.offer-facts li,
.offer-list li { border-color: #E6E9F1; }
.offer-facts .fact-value,
.offer-list .offer-val { color: var(--plum-deep); }

/* Gradient edge follows the new color system. */
.js-anim .offer-card::after {
  background: linear-gradient(130deg, rgba(245, 0, 101, 0.58), rgba(105, 124, 197, 0.46), rgba(245, 0, 101, 0.58));
  background-size: 220% 220%;
}

/* ==========================================================================
   User-provided product and lifestyle imagery
   ========================================================================== */
.merchant-snapshot,
.visual-break {
  background: var(--warm-white);
}

.merchant-snapshot { padding: 2.25rem 0 0; }
.visual-break { padding: 2.25rem 0 0; }

.feature-media {
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #D6DCEA;
  border-radius: 26px;
  background: #FFFFFF;
  box-shadow: 0 22px 54px rgba(20, 32, 68, 0.12);
}

.feature-media--wide { max-width: 1160px; }
.feature-media--landscape { max-width: 960px; }
.feature-media--portrait {
  display: grid;
  grid-template-columns: minmax(0, 430px) 1fr;
  max-width: 760px;
}

.feature-media img {
  display: block;
  width: 100%;
  margin: 0;
  background: #ECEFF6;
}

.feature-media--wide img {
  aspect-ratio: 1024 / 488;
  object-fit: cover;
}

.feature-media--landscape img {
  aspect-ratio: 1024 / 647;
  object-fit: cover;
}

.feature-media--portrait img {
  height: 100%;
  min-height: 460px;
  max-height: 560px;
  object-fit: cover;
}

.feature-media figcaption {
  padding: 0.9rem 1.15rem 1rem;
  color: var(--slate-soft);
  font-size: 0.82rem;
  line-height: 1.55;
  background: #FFFFFF;
  border-top: 1px solid #E3E7F0;
}

.feature-media--portrait figcaption {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  font-size: 0.9rem;
  border-top: 0;
  border-left: 4px solid var(--berry);
}

.feature-media figcaption strong { color: var(--plum-deep); }

/* ==========================================================================
   Guide page mastheads
   ========================================================================== */
.breadcrumbs {
  padding: 1rem 0;
  background: #FFFFFF;
  border-bottom: 1px solid #E8EAF1;
}
.breadcrumbs a { color: var(--teal-dark); }

.page-head {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3.8rem;
  background:
    radial-gradient(circle at 82% 20%, rgba(105, 124, 197, 0.18), transparent 24rem),
    linear-gradient(145deg, #FFFFFF, #F0F3FB);
  border-bottom: 1px solid #E1E5EF;
}
.page-head::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: -70px;
  width: 300px;
  height: 180px;
  border-radius: 50%;
  border: 34px solid rgba(245, 0, 101, 0.06);
  pointer-events: none;
}
.page-head-inner {
  position: relative;
  z-index: 2;
  padding-right: min(46vw, 580px);
}

.page-head h1 {
  color: var(--plum-deep);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  max-width: 19ch;
}

.page-head-media {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(1.25rem, calc((100vw - 1240px) / 2 + 1.25rem));
  width: min(42vw, 520px);
  height: 340px;
  margin: 0;
  overflow: hidden;
  transform: translateY(-50%);
  border: 7px solid rgba(255, 255, 255, 0.94);
  border-radius: 30px;
  background: #E9ECF5;
  box-shadow: 0 28px 64px rgba(20, 32, 68, 0.20);
}

.page-head-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(20, 32, 68, 0.08);
  pointer-events: none;
}

.page-head-media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.page-head-media--portrait img { object-position: center 48%; }
.page-head-media--landscape img { object-position: center; }

.page-head-media figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 0.58rem 0.8rem;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  background: rgba(20, 32, 68, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-dek { color: #4F5C76; font-size: 1.1rem; }
.page-head .hero-meta { color: var(--slate-faint); }

.rating-badge {
  color: #FFFFFF;
  background: var(--plum-deep);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  box-shadow: 0 10px 24px rgba(20, 32, 68, 0.18);
}
.rating-badge .rating-score,
.rating-badge .rating-num { color: #FFFFFF; }
.rating-badge .rating-label,
.rating-badge .rating-den { color: #CAD3F1; }

/* ==========================================================================
   Article shell and content rhythm
   ========================================================================== */
.article-shell,
.main-area { padding-top: 3rem; }

.article-col,
.measure { max-width: 830px; }

.article-body { color: #33405B; }
.article-body h2 {
  color: var(--plum-deep);
  margin-top: 3rem;
  padding-top: 0.25rem;
}
.article-body h3 { color: #334777; }
.article-body li::marker { color: var(--berry); }

/* ==========================================================================
   Premium cards
   ========================================================================== */
.card {
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: 0 18px 44px rgba(20, 32, 68, 0.10); }

.card-title {
  color: var(--plum-deep);
  letter-spacing: 0.08em;
}
.card-title .card-icon {
  border-radius: 9px;
  background: var(--plum-deep);
}

.card-verdict,
.card--verdict,
.card--offer {
  background: linear-gradient(145deg, #FFF3F8, #FFFFFF);
  border-color: #F3CADA;
}
.card-verdict .card-title,
.card--verdict .card-title,
.card--offer .card-title { color: var(--berry-ink); }

.card-research,
.card--research {
  background: linear-gradient(145deg, #EBEFFC, #F8F9FD);
  border-color: #C9D2EE;
}
.card-research .card-title,
.card--research .card-title,
.card-research strong,
.card--research strong { color: var(--teal-dark); }

.card-caution,
.card--caution {
  background: #FFF9EC;
  border-color: #EFDCAB;
}

.card-neutral,
.card--checklist { background: #F2F4F9; border-color: #DDE2ED; }

.card-pros,
.card--pros { background: #F1F7F5; border-color: #CFE3DC; }
.card-cons,
.card--cons { background: #FFF2F4; border-color: #F1CDD4; }

.card--decision,
.cta-block,
.cta-band {
  color: #F5F7FF;
  background:
    radial-gradient(circle at 82% 10%, rgba(105, 124, 197, 0.38), transparent 19rem),
    var(--plum-deep);
  border: 1px solid #2F4177;
  border-radius: 26px;
  box-shadow: 0 24px 54px rgba(20, 32, 68, 0.18);
}
.card--decision h2,
.card--decision h3,
.cta-block h2,
.cta-band h2,
.card--decision strong,
.cta-block strong,
.cta-band strong { color: #FFFFFF; }

/* ==========================================================================
   Buttons — capsule conversion treatment
   ========================================================================== */
.btn {
  min-height: 48px;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.btn-primary,
.btn--primary {
  color: #FFFFFF;
  background: var(--berry);
  border-color: var(--berry);
  box-shadow: 0 10px 25px rgba(245, 0, 101, 0.24);
}
.btn-primary:hover,
.btn--primary:hover {
  color: #FFFFFF;
  background: var(--berry-dark);
  box-shadow: 0 14px 30px rgba(245, 0, 101, 0.32);
}
.btn-secondary,
.btn--outline {
  color: var(--plum-deep);
  background: #FFFFFF;
  border-color: #C8CFDF;
}
.btn-ghost-light {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.42);
}

/* ==========================================================================
   Disclosures, notices, facts and stats
   ========================================================================== */
.disclosure,
.disclosure-inline,
.notice,
.notice-medical {
  border-radius: 14px;
  border-color: #DCE1ED;
  background: #F3F5FA;
}
.disclosure,
.disclosure-inline { border-left-color: var(--berry); }
.notice-medical { border-left-color: var(--teal); }
.disclosure .disclosure-tag {
  color: var(--berry-ink);
  border-color: #F1C7D8;
  background: #FFFFFF;
}

.facts li { border-color: #DDE2EC; }
.facts .facts-key { color: var(--plum-deep); }
.facts .facts-val { color: var(--slate-soft); }

.stat-strip li,
.metric {
  border-radius: 18px;
  border-color: #CBD4EF;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(20, 32, 68, 0.07);
}
.stat-strip .stat-num,
.metric-value { color: var(--teal-dark); }
.stat-strip--berry .stat-num { color: var(--berry-ink); }

.tick-list li::before,
.check-list li::before { color: var(--berry); }

/* ==========================================================================
   TOC
   ========================================================================== */
.toc {
  padding: 1.35rem 1.5rem;
  border-radius: 20px;
  border-color: #D8DDEA;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(20, 32, 68, 0.08);
}
.toc h2 {
  margin: 0;
  color: var(--plum-deep);
}
.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--plum-deep);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.toc-toggle-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin-left: 1rem;
  border-radius: 50%;
  background: #FFF0F6;
  color: var(--berry);
  font-size: 1.25rem;
  line-height: 1;
}
.toc-toggle:hover .toc-toggle-icon { background: #FFE0EC; }
.toc-toggle[aria-expanded="true"] { padding-bottom: 1rem; }
.toc-list[hidden] { display: none; }
.toc a { color: #59657C; border-left-color: transparent; }
.toc a:hover { color: var(--berry-ink); }
.toc a.is-active {
  color: var(--plum-deep);
  border-left-color: var(--berry);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-scroll {
  border-radius: 22px;
  border-color: #D8DDEA;
  box-shadow: 0 12px 34px rgba(20, 32, 68, 0.07);
}
thead th {
  color: #FFFFFF;
  background: var(--plum-deep);
}
tbody th { color: var(--plum-deep); background: #F1F3FA; }
tbody tr:nth-child(even) td { background: #F8F9FC; }
tbody tr:hover td { background: #F1F3FA; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq details.faq-item {
  border-radius: 16px;
  border-color: #DCE1EB;
  background: #FFFFFF;
}
.faq details.faq-item > summary { color: var(--plum-deep); }
.faq details.faq-item > summary::after {
  border-color: var(--berry);
}
.faq details.faq-item[open] > summary {
  color: var(--berry-ink);
  background: #FFF1F6;
}

/* ==========================================================================
   Publisher box
   ========================================================================== */
.pub-box {
  padding: 1.7rem;
  border-radius: 24px;
  border: 1px solid #CDD5EA;
  border-top: 5px solid var(--berry);
  box-shadow: 0 18px 46px rgba(20, 32, 68, 0.10);
}
.pub-mark {
  border: 0;
  border-radius: 50%;
  background: var(--plum-deep);
  box-shadow: 0 10px 24px rgba(20, 32, 68, 0.22);
}
.pub-name { color: var(--plum-deep); }
.pub-role { color: var(--berry-ink); font-weight: 750; }
.pub-points li::before { border-color: var(--berry); }

/* ==========================================================================
   Related guides
   ========================================================================== */
.related {
  padding: 4rem 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(105, 124, 197, 0.10), transparent 25rem),
    #EEF1F8;
  border-top-color: #DDE2EE;
}
.related h2 { color: var(--plum-deep); }
.related-card {
  padding: 1.35rem;
  border-radius: 22px;
  border-color: #D8DDEA;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(20, 32, 68, 0.07);
}
.related-card:hover {
  border-color: var(--berry);
  box-shadow: 0 20px 42px rgba(20, 32, 68, 0.13);
}
.related-card .related-kicker,
.related-card .rc-kicker { color: var(--berry-ink); font-weight: 800; }
.related-card .related-title,
.related-card .rc-title { color: var(--plum-deep); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 2rem;
  color: #D8DFF4;
  background:
    radial-gradient(circle at 88% 14%, rgba(105, 124, 197, 0.22), transparent 25rem),
    radial-gradient(circle at 8% 90%, rgba(245, 0, 101, 0.11), transparent 22rem),
    var(--plum-deep);
  border-top: 4px solid var(--berry);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 2.3rem;
  right: 4%;
  width: 210px;
  height: 110px;
  border: 24px solid rgba(255, 255, 255, 0.025);
  border-radius: 50%;
  pointer-events: none;
}

.footer-top,
.footer-grid {
  position: relative;
  z-index: 1;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 24px 54px rgba(6, 13, 36, 0.18);
}
.footer-top { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr); }
.footer-grid { grid-template-columns: minmax(240px, 1.15fr) minmax(150px, 0.75fr) minmax(150px, 0.75fr); }

.site-footer .brand {
  display: inline-flex;
  margin-bottom: 1rem;
  color: #FFFFFF;
  font-size: 1.05rem;
}
.site-footer .brand-mark {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  background: var(--berry);
}
.site-footer .brand-text small { color: #AEB9DE; }

.footer-brand p,
.footer-grid > div > p {
  max-width: 42ch;
  margin: 0;
  color: #C4CCE5;
  font-size: 0.92rem;
  line-height: 1.7;
}

.site-footer h2,
.footer-grid h2,
.footer-nav h2 {
  margin-bottom: 1rem;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.footer-nav ul { gap: 0.35rem 1.4rem; }
.footer-nav a,
.footer-grid a {
  position: relative;
  display: block;
  padding: 0.48rem 0;
  color: #E9EDFA;
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, padding-left 0.2s ease, border-color 0.2s ease;
}
.footer-nav a:hover,
.footer-grid a:hover {
  padding-left: 0.4rem;
  color: #FFFFFF;
  text-decoration: none;
  border-color: var(--berry);
}

.footer-legal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding-top: 0;
}
.footer-legal p,
.footer-legal p:last-child {
  max-width: none;
  min-height: 100%;
  margin: 0;
  padding: 1rem 1.1rem;
  color: #BFC8E3;
  font-size: 0.78rem;
  line-height: 1.65;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(4, 11, 32, 0.18);
}
.footer-legal strong { color: #FFFFFF; }
.footer-legal strong { color: #FFFFFF; }

/* ==========================================================================
   Motion colors
   ========================================================================== */
.read-progress span {
  background: linear-gradient(90deg, var(--berry), #FF77AB);
  box-shadow: 0 0 12px rgba(245, 0, 101, 0.52);
}
.sticky-offer {
  background: rgba(20, 32, 68, 0.97);
  border-top-color: rgba(255, 255, 255, 0.15);
}
.sticky-offer .so-label { color: #AEB9DE; }

.js-anim [data-spotlight]::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(245, 0, 101, 0.09), transparent 62%);
}
.js-anim .card-research[data-spotlight]::before,
.js-anim .card--research[data-spotlight]::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(105, 124, 197, 0.14), transparent 62%);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .site-header { padding: 8px 0; }
  .header-inner {
    min-height: 58px;
    padding: 6px 8px 6px 12px;
  }
  .site-nav {
    top: calc(100% + 7px);
    left: 1rem;
    right: 1rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid #D9DEEA;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 24px 54px rgba(8, 16, 45, 0.24);
  }
  .nav-list a {
    color: var(--plum-deep);
    border-bottom-color: #E4E7EF;
    border-radius: 10px;
  }
  .nav-list a:hover { background: #F0F2F8; }
  .nav-list a[aria-current="page"] { background: #E9ECF7; }
  .site-nav a.header-cta { border-radius: 999px; }
}

@media (max-width: 899px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  .page-head {
    display: block;
    padding-bottom: 2rem;
  }
  .page-head-inner { padding-right: 1.25rem; }
  .page-head h1 { max-width: 20ch; }
  .page-head-media {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 2.5rem);
    max-width: 720px;
    height: 320px;
    margin: 2rem auto 0;
    transform: none;
  }
}

@media (max-width: 719px) {
  :root { --header-h: 74px; }
  .wrap { padding-left: 1rem; padding-right: 1rem; }

  .site-footer { padding: 3rem 0 1.5rem; }
  .footer-top,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.7rem;
    padding: 1.35rem;
    border-radius: 22px;
  }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-legal { grid-template-columns: 1fr; }
  .footer-legal p,
  .footer-legal p:last-child { padding: 0.9rem 1rem; }
  .footer-nav ul { grid-template-columns: 1fr; }

  .brand { font-size: 0.95rem; }
  .brand { font-size: 0.95rem; }
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }

  .hero {
    min-height: auto;
    padding: 3.1rem 0 3rem;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.2rem, 12vw, 3.25rem);
  }
  .hero-lede,
  .hero-verdict { font-size: 1.06rem; }

  .page-head { padding: 2.8rem 0 1.5rem; }
  .page-head h1 { max-width: 100%; font-size: clamp(2rem, 10vw, 2.8rem); }
  .page-head-media {
    width: calc(100% - 2rem);
    height: 250px;
    margin-top: 1.5rem;
    border-width: 5px;
    border-radius: 22px;
  }
  .page-head-media figcaption {
    right: 9px;
    bottom: 9px;
    left: 9px;
    font-size: 0.69rem;
  }

  .merchant-snapshot,
  .visual-break { padding-top: 1.25rem; }
  .feature-media { border-radius: 18px; }
  .feature-media--portrait { display: block; }
  .feature-media--portrait img {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .feature-media--portrait figcaption {
    padding: 0.9rem 1rem 1rem;
    font-size: 0.82rem;
    border-top: 1px solid #E3E7F0;
    border-left: 0;
  }

  .offer-card { padding: 1.3rem; border-radius: 22px; }
  .card { padding: 1.25rem; border-radius: 18px; }
  .cta-block,
  .cta-band { border-radius: 22px; }
  .related { padding: 3rem 0; }
  .related-card { border-radius: 18px; }
  .pub-box { padding: 1.3rem; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media print {
  body { background: #FFFFFF; }
  .page-head,
  .hero { background: #FFFFFF; }
}