/* ==========================================
   SPINERX ADVERTORIAL — SHARED STYLES
   assets/section-adv-spinerx.css
   ========================================== */

/* --- Layout containers --- */
.adv-col-narrow { max-width: 760px; margin: 0 auto; }
.adv-col-medium { max-width: 900px; margin: 0 auto; }

/* --- Section label (eyebrow) --- */
.adv-label {
  display: block;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.45);
  margin-bottom: 1rem;
}

/* --- Horizontal rule --- */
.adv-rule {
  border: none;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  margin: 3.2rem 0;
}

/* ==========================================
   TOPBAR — MAGAZINE HEADER
   ========================================== */
.adv-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.1rem 2rem;
  text-align: left;
}
.adv-topbar-logo {
  flex-shrink: 0;
  line-height: 0;
  overflow: hidden;
}
.adv-topbar-logo--circle {
  border-radius: 50%;
}
.adv-topbar-logo img {
  display: block;
  object-fit: cover;
  width: var(--adv-logo-w, 56px);
  height: var(--adv-logo-w, 56px);
}
.adv-topbar-divider {
  width: 1px;
  height: 3.2rem;
  background: currentColor;
  opacity: 0.25;
  flex-shrink: 0;
}
.adv-topbar-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.adv-topbar-pub-name {
  display: block;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.adv-topbar-meta {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
  line-height: 1.2;
}
.adv-topbar-inner a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================
   HERO
   ========================================== */
.adv-hero-wrap {
  text-align: center;
}
.adv-hero-headline {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 3.0rem;
  line-height: 1.15;
  letter-spacing: var(--font-heading-letter-spacing);
  color: rgb(var(--color-base-text));
  margin: 0 0 1.8rem;
}
.adv-hero-subhead-bridge {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 3.0rem;
  line-height: 1.15;
  letter-spacing: var(--font-heading-letter-spacing);
  /* color applied via inline style from section setting */
  margin: 0 0 1.8rem;
}
.adv-hero-subhead-2 {
  font-size: 1.5rem;
  line-height: 1.65;
  font-weight: 600;
  color: rgb(var(--color-base-text));
  margin: 0 0 3rem;
}
.adv-hero-subhead-2 p { margin: 0 0 0.7em; }
.adv-hero-subhead-2 p:last-child { margin-bottom: 0; }
.adv-hero-subhead-2 em { font-style: italic; }
.adv-hero-subhead-2 strong { font-weight: 700; }
mark.adv-subhead-highlight {
  background-color: #fff176;
  color: inherit;
  padding: 0.06em 0.15em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media screen and (min-width: 750px) {
  .adv-hero-headline       { font-size: 4.2rem; }
  .adv-hero-subhead-bridge { font-size: 4.2rem; }
  .adv-hero-subhead-2      { font-size: 1.75rem; }
}

.adv-hero-media {
  position: relative;
  border-radius: var(--media-radius);
  overflow: hidden;
  margin: 0 auto 3rem;
  background: #000;
  line-height: 0;
}
.adv-hero-media internal-video,
.adv-hero-media video,
.adv-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

.adv-credibility-bar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1.4rem;
  background: rgba(var(--color-base-text), 0.04);
  border-radius: calc(var(--text-boxes-radius) * 0.65);
  border: 1px solid rgba(var(--color-base-text), 0.08);
  margin: 0 auto;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (min-width: 600px) {
  .adv-credibility-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem 2.4rem;
    align-items: center;
  }
}
.adv-credibility-item { flex: 1 1 auto; }
.adv-credibility-role {
  display: inline;
  font-family: inherit;
  font-weight: 400;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(var(--color-base-text), 0.50);
  margin-bottom: 0;
}
.adv-credibility-name {
  display: inline;
  font-family: inherit;
  font-weight: 700;
  font-size: inherit;
  color: rgb(var(--color-base-text));
  margin-bottom: 0;
}
.adv-credibility-bio {
  display: inline;
  font-size: inherit;
  color: rgba(var(--color-base-text), 0.55);
  line-height: inherit;
}

/* ==========================================
   EDITORIAL PROSE (opening + any richtext)
   ========================================== */
.adv-prose {
  font-size: 1.65rem;
  line-height: 1.8;
  color: rgb(var(--color-base-text));
}
.adv-prose p          { margin: 0 0 1.6rem; }
.adv-prose p:last-child { margin-bottom: 0; }
.adv-prose strong     { font-weight: 700; }
.adv-prose em         { font-style: italic; }

/* ==========================================
   TRILOCK CYCLE
   ========================================== */
.adv-trilock-intro {
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgb(var(--color-base-text));
  margin-bottom: 3.2rem;
}

.adv-force-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 3.2rem;
}

.adv-force-card {
  border-left: 4px solid #c0392b;
  padding: 2rem 2.4rem;
  background: rgba(var(--color-base-text), 0.025);
  border-radius: 0 var(--text-boxes-radius) var(--text-boxes-radius) 0;
}
.adv-force-card--dehydration { border-left-color: #c87f0a; }
.adv-force-card--spasm       { border-left-color: #9b2355; }

.adv-force-number {
  display: block;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.42);
  margin-bottom: 0.35rem;
}
.adv-force-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.85rem;
  color: rgb(var(--color-base-text));
  margin: 0 0 1rem;
  line-height: 1.2;
}
.adv-force-body {
  font-size: 1.55rem;
  line-height: 1.72;
  color: rgb(var(--color-base-text));
  margin-bottom: 1.2rem;
}
.adv-force-body p          { margin: 0 0 1rem; }
.adv-force-body p:last-child { margin-bottom: 0; }
.adv-force-lived {
  font-size: 1.4rem;
  line-height: 1.62;
  color: rgba(var(--color-base-text), 0.68);
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  padding-top: 1rem;
  margin-top: 1rem;
}
.adv-force-lived p          { margin: 0 0 0.8rem; }
.adv-force-lived p:last-child { margin-bottom: 0; }

/* Loop diagram */
.adv-loop-box {
  margin: 0 auto 3.2rem;
  max-width: 560px;
  padding: 3rem 2.4rem;
  background: rgba(var(--color-base-accent-1), 0.04);
  border: 1px solid rgba(var(--color-base-accent-1), 0.14);
  border-radius: var(--text-boxes-radius);
  text-align: center;
}
.adv-loop-nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.adv-loop-node {
  padding: 0.65rem 1.3rem;
  border-radius: 2rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.adv-loop-node--compression { background: #c0392b; color: #fff; }
.adv-loop-node--dehydration { background: #c87f0a; color: #fff; }
.adv-loop-node--spasm       { background: #9b2355; color: #fff; }
.adv-loop-arrow {
  font-size: 1.4rem;
  color: rgba(var(--color-base-text), 0.3);
  line-height: 1;
}
.adv-loop-summary {
  font-size: 1.55rem;
  line-height: 1.72;
  color: rgb(var(--color-base-text));
}
.adv-loop-summary p          { margin: 0 0 1rem; }
.adv-loop-summary p:last-child { margin-bottom: 0; }
.adv-loop-summary strong     { font-weight: 700; }

/* ==========================================
   TOOL VERIFICATION
   ========================================== */
.adv-tool-intro {
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgb(var(--color-base-text));
  margin-bottom: 3.2rem;
}
.adv-tool-intro p          { margin: 0 0 1.2rem; }
.adv-tool-intro p:last-child { margin-bottom: 0; }

.adv-tool-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.adv-tool-card {
  padding: 2.6rem;
  background: rgba(var(--color-base-text), 0.03);
  border-radius: var(--text-boxes-radius);
  border: 1px solid rgba(var(--color-base-text), 0.08);
}
.adv-tool-name {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.0rem;
  color: rgb(var(--color-base-text));
  margin: 0 0 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(var(--color-base-text), 0.1);
}
.adv-tool-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media screen and (min-width: 750px) {
  .adv-tool-layout { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .adv-tool-layout--no-media { grid-template-columns: 1fr 28rem; }
}
.adv-tool-copy { display: flex; flex-direction: column; gap: 1.6rem; }
.adv-tool-section-label {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.48);
  margin-bottom: 0.5rem;
}
.adv-tool-body {
  font-size: 1.5rem;
  line-height: 1.68;
  color: rgb(var(--color-base-text));
}
.adv-tool-body p          { margin: 0 0 0.8rem; }
.adv-tool-body p:last-child { margin-bottom: 0; }

.adv-tool-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  background: rgba(var(--color-base-text), 0.05);
  line-height: 0;
}
.adv-tool-media img,
.adv-tool-media video,
.adv-tool-media internal-video { display: block; width: 100%; height: auto; }

/* Scorecard */
.adv-scorecard {
  margin-top: 1.6rem;
  padding: 1.6rem 1.8rem;
  background: rgb(var(--color-base-background-2));
  border-radius: var(--text-boxes-radius);
}
.adv-scorecard-title {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.0rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.45);
  margin-bottom: 0.8rem;
}
.adv-scorecard-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem 0;
  font-size: 1.4rem;
  border-bottom: 1px solid rgba(var(--color-base-text), 0.07);
}
.adv-scorecard-row:last-child { border-bottom: none; }
.adv-scorecard-icon {
  font-size: 1.4rem;
  line-height: 1;
  min-width: 1.6rem;
  text-align: center;
  font-weight: 700;
}
.adv-scorecard-icon--check   { color: #27ae60; }
.adv-scorecard-icon--cross   { color: #c0392b; }
.adv-scorecard-icon--partial { color: #c87f0a; }
.adv-scorecard-metric {
  font-weight: 600;
  min-width: 9.5rem;
  color: rgb(var(--color-base-text));
}
.adv-scorecard-note {
  color: rgba(var(--color-base-text), 0.58);
  font-size: 1.3rem;
}

/* ==========================================
   PRODUCT PHASES
   ========================================== */
.adv-product-intro {
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgb(var(--color-base-text));
  margin-bottom: 3.2rem;
}
.adv-product-intro p          { margin: 0 0 1.2rem; }
.adv-product-intro p:last-child { margin-bottom: 0; }

.adv-phase-list {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin-bottom: 4.8rem;
}

.adv-phase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: center;
}
@media screen and (min-width: 750px) {
  .adv-phase-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .adv-phase-grid--reverse .adv-phase-media { order: 2; }
  .adv-phase-grid--reverse .adv-phase-text  { order: 1; }
}

.adv-phase-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  background: rgba(var(--color-base-text), 0.04);
  line-height: 0;
}
.adv-phase-media img,
.adv-phase-media video,
.adv-phase-media internal-video { display: block; width: 100%; height: auto; }

.adv-phase-number {
  display: block;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.42);
  margin-bottom: 0.4rem;
}
.adv-phase-name {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.2rem;
  line-height: 1.2;
  color: rgb(var(--color-base-text));
  margin: 0 0 0.5rem;
}
.adv-phase-mechanism {
  display: inline-block;
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 2rem;
  background: rgba(var(--color-base-accent-1), 0.1);
  color: rgb(var(--color-base-accent-1));
  margin-bottom: 1.4rem;
}
.adv-phase-body {
  font-size: 1.55rem;
  line-height: 1.72;
  color: rgb(var(--color-base-text));
  margin-bottom: 1.2rem;
}
.adv-phase-body p          { margin: 0 0 1rem; }
.adv-phase-body p:last-child { margin-bottom: 0; }
.adv-phase-evidence {
  font-size: 1.25rem;
  color: rgba(var(--color-base-text), 0.5);
  border-left: 3px solid rgba(var(--color-base-accent-1), 0.28);
  padding-left: 1rem;
  margin-top: 1rem;
  line-height: 1.5;
}

/* 3-step usage list */
.adv-steps-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.0rem;
  text-align: center;
  margin-bottom: 2rem;
  color: rgb(var(--color-base-text));
}
.adv-steps {
  border: 1px solid rgba(var(--color-base-text), 0.1);
  border-radius: var(--text-boxes-radius);
  overflow: hidden;
  max-width: 680px;
  margin: 0 auto;
}
.adv-step {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 2.4rem;
  border-bottom: 1px solid rgba(var(--color-base-text), 0.08);
}
.adv-step:last-child { border-bottom: none; }
.adv-step-number {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(var(--color-base-accent-1), 0.22);
  min-width: 4rem;
  flex-shrink: 0;
}
.adv-step-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.6rem;
  color: rgb(var(--color-base-text));
  margin-bottom: 0.3rem;
}
.adv-step-body {
  font-size: 1.45rem;
  line-height: 1.62;
  color: rgba(var(--color-base-text), 0.68);
}

/* ==========================================
   TESTIMONIALS
   ========================================== */
.adv-testimonials-sub {
  font-size: 1.6rem;
  line-height: 1.7;
  text-align: center;
  color: rgba(var(--color-base-text), 0.7);
  margin-bottom: 3.2rem;
}
.adv-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}
@media screen and (min-width: 750px) {
  .adv-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
.adv-testimonial-card {
  padding: 2.6rem;
  border: 1px solid rgba(var(--color-base-text), 0.1);
  border-radius: var(--text-boxes-radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgb(var(--color-base-background-1));
}
.adv-testimonial-stars {
  font-size: 1.5rem;
  color: #f0b429;
  letter-spacing: 0.08em;
  line-height: 1;
}
.adv-testimonial-badge {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.48);
}
.adv-testimonial-headline {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.8rem;
  line-height: 1.3;
  color: rgb(var(--color-base-text));
  margin: 0;
}
.adv-testimonial-body {
  font-size: 1.5rem;
  line-height: 1.72;
  color: rgba(var(--color-base-text), 0.78);
  flex: 1;
}
.adv-testimonial-body p          { margin: 0 0 0.8rem; }
.adv-testimonial-body p:last-child { margin-bottom: 0; }
.adv-testimonial-author-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(var(--color-base-text), 0.08);
}
.adv-testimonial-photo {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.adv-testimonial-author {
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(var(--color-base-text), 0.52);
  line-height: 1.4;
}

.adv-athlete-count {
  text-align: center;
  margin-top: 3.6rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.9rem;
  color: rgba(var(--color-base-text), 0.62);
}
.adv-athlete-quote {
  text-align: center;
  font-size: 1.55rem;
  font-style: italic;
  color: rgba(var(--color-base-text), 0.55);
  margin-top: 0.6rem;
}

/* ==========================================
   CLOSE / CTA
   ========================================== */
.adv-price-table-wrap {
  overflow-x: auto;
  margin: 2.4rem 0 3.6rem;
  border-radius: var(--text-boxes-radius);
  border: 1px solid rgba(var(--color-base-text), 0.1);
}
.adv-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  min-width: 580px;
}
.adv-price-table th {
  background: rgba(var(--color-base-text), 0.04);
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.55);
  padding: 1rem 1.6rem;
  text-align: left;
  border-bottom: 1px solid rgba(var(--color-base-text), 0.1);
}
.adv-price-table td {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid rgba(var(--color-base-text), 0.07);
  vertical-align: top;
  line-height: 1.5;
  color: rgb(var(--color-base-text));
}
.adv-price-table tr:last-child td { border-bottom: none; }
.adv-price-table tr.adv-price-row--highlight td {
  background: rgba(var(--color-base-accent-1), 0.06);
  font-weight: 700;
}
.adv-price-table tr.adv-price-row--highlight td:first-child {
  border-left: 3px solid rgb(var(--color-base-accent-1));
  color: rgb(var(--color-base-accent-1));
}

.adv-guarantee-box {
  padding: 3rem 3.2rem;
  background: rgba(var(--color-base-accent-1), 0.05);
  border: 2px solid rgba(var(--color-base-accent-1), 0.18);
  border-radius: var(--text-boxes-radius);
  margin: 3.2rem 0;
  text-align: center;
}
.adv-guarantee-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.4rem;
  color: rgb(var(--color-base-accent-1));
  margin: 0 0 1.2rem;
  line-height: 1.2;
}
.adv-guarantee-body {
  font-size: 1.6rem;
  line-height: 1.72;
  color: rgb(var(--color-base-text));
}
.adv-guarantee-body p          { margin: 0 0 1rem; }
.adv-guarantee-body p:last-child { margin-bottom: 0; }
.adv-guarantee-bold {
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 1.2rem;
  color: rgb(var(--color-base-accent-1));
}

.adv-urgency-box {
  padding: 2.6rem 3rem;
  background: rgba(var(--color-base-text), 0.04);
  border-radius: var(--text-boxes-radius);
  margin: 3.2rem 0;
}
.adv-urgency-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 2.0rem;
  letter-spacing: 0.04em;
  color: rgb(var(--color-base-text));
  margin: 0 0 1.2rem;
}
.adv-urgency-body {
  font-size: 1.55rem;
  line-height: 1.75;
  color: rgb(var(--color-base-text));
}
.adv-urgency-body p          { margin: 0 0 1rem; }
.adv-urgency-body p:last-child { margin-bottom: 0; }

.adv-cta-wrap {
  text-align: center;
  margin: 3.2rem 0;
}
.adv-cta-wrap .button {
  font-size: 1.65rem;
  padding: 0 3.6rem;
  min-height: 5.6rem;
  letter-spacing: 0.02em;
  width: 100%;
  max-width: 480px;
}
@media screen and (min-width: 750px) {
  .adv-cta-wrap .button { width: auto; }
}
.adv-cta-sub {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  color: rgba(var(--color-base-text), 0.52);
}

.adv-ps-block {
  margin-top: 3.6rem;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  padding-top: 2.4rem;
}
.adv-ps-block p {
  font-size: 1.5rem;
  line-height: 1.72;
  color: rgba(var(--color-base-text), 0.72);
  margin: 0 0 1.4rem;
}
.adv-ps-block p:last-child { margin-bottom: 0; }
.adv-ps-block strong { font-weight: 700; color: rgb(var(--color-base-text)); }

/* ==========================================
   HORIZONTAL MEDIA + TEXT
   ========================================== */
.adv-mediatext-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.adv-mediatext-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  background: rgba(var(--color-base-text), 0.04);
  line-height: 0;
}
.adv-mediatext-media--large  { max-width: 900px; margin: 0 auto; }
.adv-mediatext-media--medium { max-width: 680px; margin: 0 auto; }
/* full = no extra constraint */
.adv-mediatext-media img,
.adv-mediatext-media video,
.adv-mediatext-media internal-video { display: block; width: 100%; height: auto; }

.adv-mediatext-text--center { text-align: center; }
.adv-mediatext-text--center .adv-mediatext-cta { justify-content: center; }

.adv-mediatext-caption {
  font-size: 1.2rem;
  color: rgba(var(--color-base-text), 0.5);
  margin-top: 0.6rem;
  text-align: center;
  font-style: italic;
  line-height: 0;  /* sits inside .adv-mediatext-media flow reset */
}
.adv-mediatext-caption-wrap {
  line-height: normal;
  padding: 0.6rem 0.4rem 0;
}
.adv-mediatext-eyebrow {
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.45);
  margin-bottom: 0.8rem;
}
.adv-mediatext-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: var(--font-heading-letter-spacing);
  color: rgb(var(--color-base-text));
  margin: 0 0 1.4rem;
}
.adv-mediatext-heading--small { font-size: clamp(1.6rem, 2vw, 2.2rem); }
.adv-mediatext-heading--large { font-size: clamp(2.8rem, 4.5vw, 5rem); }

/* wrap_media layout: tight gap heading→media, normal gap media→body */
.adv-mediatext-wrap--split { gap: 0; }
.adv-mediatext-wrap--split .adv-mediatext-text { margin-bottom: 1rem; }
.adv-mediatext-wrap--split .adv-mediatext-media { margin-bottom: 2.8rem; }
.adv-mediatext-body {
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgb(var(--color-base-text));
  margin-bottom: 1.4rem;
}
.adv-mediatext-body p          { margin: 0 0 1rem; }
.adv-mediatext-body p:last-child { margin-bottom: 0; }
.adv-mediatext-body strong     { font-weight: 700; }
.adv-mediatext-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ==========================================
   DISCLAIMER
   ========================================== */
.adv-disclaimer {
  font-size: 1.3rem;
  line-height: 1.65;
  color: rgba(var(--color-base-text), 0.48);
  font-style: italic;
}
.adv-disclaimer p          { margin: 0 0 0.8rem; }
.adv-disclaimer p:last-child { margin-bottom: 0; }

/* ==========================================
   STICKY CTA BAR
   ========================================== */
.adv-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 1.1rem 2rem;
  background: rgb(var(--color-base-accent-1));
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.adv-sticky-cta--visible {
  transform: translateY(0);
}
.adv-sticky-cta__text {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.82);
  display: none;
  white-space: nowrap;
}
@media screen and (min-width: 750px) {
  .adv-sticky-cta__text { display: block; }
}
.adv-sticky-cta .button {
  background-color: #ffffff;
  color: rgb(var(--color-base-accent-1));
  font-size: 1.45rem;
  min-height: 4.2rem;
  padding: 0 2.6rem;
  white-space: nowrap;
  border-color: transparent;
}
.adv-sticky-cta .button:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   FAKE COMMENT SECTION
   ========================================== */
.adv-comments-shell {
  border: 1px solid rgba(var(--color-base-text), 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  color: #1c1e21;
}
.adv-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(var(--color-base-text), 0.1);
  background: #f0f2f5;
}
.adv-comments-header-count {
  font-weight: 700;
  font-size: 1.5rem;
}
.adv-comments-header-sort {
  font-size: 1.3rem;
  color: #65676b;
}
.adv-comments-header-sort span {
  font-weight: 600;
  color: #1c1e21;
}
.adv-comments-list {
  padding: 0.6rem 0;
}
.adv-comment {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.4rem;
}
.adv-comment + .adv-comment {
  border-top: 1px solid rgba(var(--color-base-text), 0.06);
}
.adv-comment-avatar {
  flex-shrink: 0;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: rgba(var(--color-base-accent-1), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: rgb(var(--color-base-accent-1));
  text-transform: uppercase;
  overflow: hidden;
}
.adv-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.adv-comment-body {
  flex: 1;
}
.adv-comment-bubble {
  display: inline-block;
  background: #f0f2f5;
  border-radius: 0 18px 18px 18px;
  padding: 0.75rem 1.1rem;
  max-width: 100%;
}
.adv-comment-name {
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
  display: block;
  color: #050505;
}
.adv-comment-text {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #1c1e21;
  white-space: pre-wrap;
}
.adv-comment-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.45rem;
  font-size: 1.2rem;
  color: #65676b;
  padding-left: 0.4rem;
}
.adv-comment-action {
  font-weight: 700;
  cursor: default;
  color: #65676b;
}
.adv-comment-likes {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: 1.2rem;
  color: #65676b;
}
.adv-comment-likes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: #1877f2;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}
.adv-comment--reply {
  padding-left: 5.4rem;
  padding-top: 0.6rem;
  border-top: none !important;
}
.adv-comment--reply .adv-comment-avatar {
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.3rem;
}
.adv-comment--reply .adv-comment-bubble {
  background: #e4e6eb;
}
.adv-comments-more {
  padding: 0.8rem 1.4rem 1.2rem;
  text-align: center;
  font-size: 1.3rem;
  color: #65676b;
  border-top: 1px solid rgba(var(--color-base-text), 0.07);
}
.adv-comments-disabled-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  background: #f0f2f5;
}
.adv-comments-disabled-input {
  flex: 1;
  background: #e4e6eb;
  border-radius: 20px;
  padding: 0.9rem 1.4rem;
  font-size: 1.4rem;
  color: #65676b;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

/* ==========================================
   ADV FOOTER
   ========================================== */
.adv-footer {
  padding: 2.4rem 2rem 8rem;  /* extra bottom clears sticky CTA bar */
  text-align: center;
  font-size: 1.3rem;
  color: rgba(var(--color-base-text), 0.5);
  line-height: 1.8;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
}
.adv-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin-bottom: 0.8rem;
}
.adv-footer-links a {
  color: rgba(var(--color-base-text), 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 1.3rem;
}
.adv-footer-links a:hover {
  color: rgb(var(--color-base-text));
}
.adv-footer-copy {
  font-size: 1.2rem;
  color: rgba(var(--color-base-text), 0.4);
}

/* ==========================================
   HERO — BREADCRUMB
   ========================================== */
.adv-hero-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin-bottom: 1.8rem;
  font-size: 1.25rem;
  line-height: 1;
}
.adv-hero-crumb {
  color: rgba(var(--color-base-text), 0.4);
  text-decoration: none;
}
.adv-hero-crumb:hover { color: rgba(var(--color-base-text), 0.7); text-decoration: underline; }
.adv-hero-crumb--current { color: rgba(var(--color-base-text), 0.65); }
.adv-hero-crumb-sep { color: rgba(var(--color-base-text), 0.25); font-size: 1.1rem; }

/* ==========================================
   HERO — BYLINE (simplified author block)
   ========================================== */
.adv-byline {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
}
.adv-byline-avatar {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  overflow: hidden;
  background: rgba(var(--color-base-text), 0.08);
  border-radius: 4px;
}
.adv-byline-avatar--circle { border-radius: 50%; }
.adv-byline-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adv-byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.15rem;
}
.adv-byline-label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.4);
  line-height: 1;
}
.adv-byline-name {
  font-weight: 700;
  font-size: 1.5rem;
  color: rgb(var(--color-base-text));
  line-height: 1.2;
}
.adv-byline-bio {
  font-size: 1.25rem;
  color: rgba(var(--color-base-text), 0.5);
  line-height: 1.45;
}

/* ==========================================
   PULL QUOTE
   ========================================== */
.adv-pull-quote {
  position: relative;
  border-left: 4px solid rgb(var(--color-base-accent-1));
  padding: 1.4rem 1.8rem 1.4rem 2.4rem;
  margin: 2.4rem 0;
  background: rgba(var(--color-base-accent-1), 0.05);
  border-radius: 0 6px 6px 0;
}
.adv-pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.6rem;
  left: 0.55rem;
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(var(--color-base-accent-1), 0.2);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}
.adv-pull-quote-text {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  line-height: 1.4;
  color: rgb(var(--color-base-text));
}
.adv-pull-quote-attribution {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.3rem;
  color: rgba(var(--color-base-text), 0.5);
}

/* ==========================================
   TRILOCK — ANIMATED SVG DIAGRAM
   ========================================== */
.adv-tl-diagram-wrap {
  margin: 2.8rem 0;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.adv-tl-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Default hidden states */
.adv-tl-node   { opacity: 0; }
.adv-tl-desc   { opacity: 0; }
.adv-tl-arrow  { opacity: 0; }
.adv-tl-center { opacity: 0; }

/* ── REVEAL SEQUENCE (.is-animated added by IntersectionObserver) ── */
.adv-tl-svg.is-animated .adv-tl-node--1 { animation: tlNodeIn 0.5s ease 0s      forwards; }
.adv-tl-svg.is-animated .adv-tl-node--2 { animation: tlNodeIn 0.5s ease 0.55s   forwards; }
.adv-tl-svg.is-animated .adv-tl-node--3 { animation: tlNodeIn 0.5s ease 1.1s    forwards; }

.adv-tl-svg.is-animated .adv-tl-desc--1 { animation: tlDescReveal 4.5s ease 0.3s  forwards; }
.adv-tl-svg.is-animated .adv-tl-desc--2 { animation: tlDescReveal 4.5s ease 0.85s forwards; }
.adv-tl-svg.is-animated .adv-tl-desc--3 { animation: tlDescReveal 4.5s ease 1.4s  forwards; }

.adv-tl-svg.is-animated .adv-tl-arrow--1 { animation: tlReveal1 0.65s ease 1.8s forwards; }
.adv-tl-svg.is-animated .adv-tl-arrow--2 { animation: tlReveal2 0.65s ease 2.5s forwards; }
.adv-tl-svg.is-animated .adv-tl-arrow--3 { animation: tlReveal3 0.65s ease 3.2s forwards; }

.adv-tl-svg.is-animated .adv-tl-center  { animation: tlFadeIn  0.8s ease 3.8s forwards; }

/* ── LOOP PHASE (.is-looping added by JS after reveal) ── */
.adv-tl-svg.is-looping .adv-tl-arrow--1 { opacity: 1; animation: tlCycleArrow 3.6s ease-in-out 0s   infinite; }
.adv-tl-svg.is-looping .adv-tl-arrow--2 { opacity: 1; animation: tlCycleArrow 3.6s ease-in-out 1.2s infinite; }
.adv-tl-svg.is-looping .adv-tl-arrow--3 { opacity: 1; animation: tlCycleArrow 3.6s ease-in-out 2.4s infinite; }
.adv-tl-svg.is-looping .adv-tl-node--1  { opacity: 1; animation: tlCycleNode  3.6s ease-in-out 0s   infinite; }
.adv-tl-svg.is-looping .adv-tl-node--2  { opacity: 1; animation: tlCycleNode  3.6s ease-in-out 1.2s infinite; }
.adv-tl-svg.is-looping .adv-tl-node--3  { opacity: 1; animation: tlCycleNode  3.6s ease-in-out 2.4s infinite; }

/* ── KEYFRAMES ── */
@keyframes tlNodeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes tlFadeIn     { from { opacity: 0; } to { opacity: 0.35; } }
@keyframes tlDescReveal {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tlReveal1 { from { opacity: 1; stroke-dashoffset: 268; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes tlReveal2 { from { opacity: 1; stroke-dashoffset: 342; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes tlReveal3 { from { opacity: 1; stroke-dashoffset: 268; } to { opacity: 1; stroke-dashoffset: 0; } }

@keyframes tlCycleArrow {
  0%   { opacity: 0.25; }
  8%   { opacity: 1; }
  28%, 100% { opacity: 0.25; }
}
@keyframes tlCycleNode {
  0%   { opacity: 0.6; }
  8%   { opacity: 1; }
  28%, 100% { opacity: 0.6; }
}

/* ==========================================
   TRILOCK STANDALONE DIAGRAM
   ========================================== */
.adv-tld-wrap {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.adv-tld-svg {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes tlContinuousLoop {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1043; }
}

/* ==========================================
   SALE CTA BLOCK
   ========================================== */
.adv-salecta-inner {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(var(--color-base-accent-1), 0.15);
}
.adv-salecta-body-wrap {
  padding: 2.8rem 2.4rem 2.2rem;
}
.adv-salecta-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 750px) {
  .adv-salecta-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.8rem;
  }
  .adv-salecta-text { flex: 1 1 0; }
  .adv-salecta-media {
    flex: 0 0 38%;
    max-width: 38%;
  }
}
.adv-salecta-headline {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  line-height: 1.15;
  color: rgb(var(--color-base-text));
  margin: 0 0 1.4rem;
}
.adv-salecta-update {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.adv-salecta-update-label {
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: #c0392b;
}
.adv-salecta-update-date {
  font-weight: 700;
  color: rgb(var(--color-base-text));
}
.adv-salecta-copy {
  font-size: 1.55rem;
  line-height: 1.7;
  color: rgb(var(--color-base-text));
  margin-bottom: 1.2rem;
}
.adv-salecta-copy p { margin: 0 0 0.9rem; }
.adv-salecta-copy p:last-child { margin-bottom: 0; }
.adv-salecta-copy strong { font-weight: 700; }
.adv-salecta-lockin {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.5;
  color: rgb(var(--color-base-text));
  margin-bottom: 0.9rem;
}
.adv-salecta-note {
  font-size: 1.4rem;
  line-height: 1.5;
  color: rgb(var(--color-base-text));
}
.adv-salecta-note-label {
  font-weight: 800;
  color: #c0392b;
}
.adv-salecta-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  line-height: 0;
  background: rgba(var(--color-base-text), 0.04);
}
.adv-salecta-media img,
.adv-salecta-media video,
.adv-salecta-media internal-video {
  display: block;
  width: 100%;
  height: auto;
}

/* Trust badges */
.adv-salecta-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.6rem;
  padding: 2rem 2.4rem;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
}
@media screen and (min-width: 600px) {
  .adv-salecta-badges {
    grid-template-columns: repeat(4, 1fr);
  }
}
.adv-salecta-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.adv-salecta-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.adv-salecta-badge-icon img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.adv-salecta-badge-label {
  font-size: 1.2rem;
  line-height: 1.35;
  color: rgba(var(--color-base-text), 0.7);
  font-weight: 600;
}

/* CTA strip */
.adv-salecta-cta-strip {
  padding: 1.6rem 2.4rem 2rem;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.adv-salecta-cta-strip .button {
  width: 100%;
  max-width: 560px;
  font-size: 1.7rem;
  min-height: 5.6rem;
  letter-spacing: 0.02em;
}
.adv-salecta-cta-sub {
  font-size: 1.25rem;
  color: rgba(var(--color-base-text), 0.5);
  text-align: center;
}

/* ==========================================
   HERO — CATEGORY TAG
   ========================================== */
.adv-hero-category-tag {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

/* ==========================================
   MEDIA + TEXT — INLINE CALLOUT BLOCK
   ========================================== */
.adv-inline-callout {
  background: rgba(var(--color-base-accent-1), 0.06);
  border-left: 3px solid rgb(var(--color-base-accent-1));
  border-radius: 0 6px 6px 0;
  padding: 1.5rem 2rem;
  margin: 2.2rem 0;
  font-size: 1.6rem;
  line-height: 1.65;
  color: rgba(var(--color-base-text), 0.8);
}
.adv-inline-callout strong {
  color: rgb(var(--color-base-text));
  font-weight: 700;
}
.adv-inline-callout p { margin: 0; }
.adv-inline-callout p + p { margin-top: 0.8rem; }

/* ==========================================
   COMMENTS — FB-STYLE PLATFORM HEADER
   ========================================== */
.adv-comments-fb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid rgba(var(--color-base-text), 0.1);
}
.adv-comments-fb-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.adv-fb-logo {
  width: 3.2rem;
  height: 3.2rem;
  background: #1877f2;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.8rem;
  font-family: var(--font-heading-family);
  flex-shrink: 0;
}
.adv-comments-fb-title {
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  color: rgba(var(--color-base-text), 0.7);
  line-height: 1.4;
}
.adv-comments-fb-title strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgb(var(--color-base-text));
}
.adv-comments-fb-sort {
  font-size: 1.2rem;
  color: rgba(var(--color-base-text), 0.5);
}
.adv-fb-logo-img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
}

/* ==========================================
   LISTICLE ITEM — NUMBER ROW
   ========================================== */
.adv-listicle-numrow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
  grid-area: numrow;
}
.adv-item-num {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color-base-accent-1));
  white-space: nowrap;
}
.adv-item-rule {
  display: block !important;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--color-base-accent-1), 0.22);
}

/* ==========================================
   LISTICLE ITEM — GRID LAYOUT
   ========================================== */
.adv-listicle-grid {
  display: grid;
  gap: 0 4rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "numrow  numrow"
    "media   heading"
    "media   body";
  align-items: start;
}
.adv-listicle-grid--reverse {
  grid-template-areas:
    "numrow  numrow"
    "heading media"
    "body    media";
}
.adv-listicle-grid--small  { grid-template-columns: 2fr 3fr; }
.adv-listicle-grid--large  { grid-template-columns: 3fr 2fr; }
.adv-listicle-grid--reverse.adv-listicle-grid--small { grid-template-columns: 3fr 2fr; }
.adv-listicle-grid--reverse.adv-listicle-grid--large { grid-template-columns: 2fr 3fr; }

.adv-listicle-media-col { grid-area: media; }
.adv-listicle-heading   { grid-area: heading; }
.adv-listicle-body-wrap { grid-area: body; }

.adv-listicle-media-col img,
.adv-listicle-media-col video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.adv-listicle-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 1.3rem;
  color: rgb(var(--color-base-text));
}
.adv-listicle-heading.h1 { font-size: clamp(2.4rem, 3.5vw, 3.6rem); }
.adv-listicle-heading.h0 { font-size: clamp(3rem, 4.5vw, 4.8rem); }

.adv-listicle-body {
  font-size: 1.65rem;
  line-height: 1.75;
  color: rgba(var(--color-base-text), 0.8);
  margin-bottom: 1.8rem;
}
.adv-listicle-body p { margin: 0 0 1rem; }
.adv-listicle-body p:last-child { margin-bottom: 0; }
.adv-listicle-body strong { color: rgb(var(--color-base-text)); font-weight: 700; }

/* ==========================================
   LISTICLE ITEM — TESTIMONIAL
   ========================================== */
.adv-listicle-testi {
  background: rgb(var(--color-base-background-1));
  border: 1px solid rgba(var(--color-base-text), 0.1);
  border-radius: 8px;
  padding: 1.8rem 2rem;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}
.adv-listicle-testi::before {
  content: '\201C';
  position: absolute;
  top: -4px;
  right: 1.4rem;
  font-family: var(--font-heading-family);
  font-size: 4.8rem;
  color: rgb(var(--color-base-accent-1));
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}
.adv-testi-stars {
  color: #f59e0b;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
}
.adv-testi-text {
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.65;
  color: rgba(var(--color-base-text), 0.75);
  margin: 0 0 0.9rem;
}
.adv-testi-text strong {
  font-style: normal;
  color: rgb(var(--color-base-text));
  font-weight: 700;
}
.adv-testi-attr {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgb(var(--color-base-accent-1));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================
   LISTICLE ITEM — MOBILE LAYOUT
   ========================================== */
@media screen and (max-width: 749px) {
  .adv-listicle-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .adv-listicle-numrow    { order: 0; margin-bottom: 1.6rem; width: 100%; }
  .adv-listicle-media-col { order: 1; margin-bottom: 2rem; }
  .adv-listicle-heading   { order: 2; margin-bottom: 1.2rem; }
  .adv-listicle-body-wrap { order: 3; }

  /* Heading above image on mobile */
  .adv-listicle--heading-above .adv-listicle-numrow    { order: 0; }
  .adv-listicle--heading-above .adv-listicle-heading   { order: 1; margin-bottom: 1.6rem; }
  .adv-listicle--heading-above .adv-listicle-media-col { order: 2; margin-bottom: 2rem; }
  .adv-listicle--heading-above .adv-listicle-body-wrap { order: 3; }
}

/* ==========================================
   INTERLUDE — MECHANISM BLOCK
   ========================================== */
.adv-interlude-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: rgb(var(--color-base-accent-1));
  margin-bottom: 1.2rem;
}
.adv-interlude-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  line-height: 1.3;
  margin: 0 0 2.2rem;
}
.adv-phase-row {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.adv-phase-badge {
  background: rgba(var(--color-base-accent-1), 0.08);
  border: 1px solid rgba(var(--color-base-accent-1), 0.25);
  color: rgb(var(--color-base-accent-1));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.adv-phase-body {
  font-size: 1.5rem;
  line-height: 1.6;
}
.adv-phase-body strong { font-weight: 600; }
.adv-phase-body p { margin: 0; }
.adv-interlude-media {
  margin: 0 0 2.4rem;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.adv-interlude-media img,
.adv-interlude-media video {
  display: block;
  width: 100%;
  height: auto;
}
.adv-interlude-body {
  font-size: 1.6rem;
  line-height: 1.75;
  margin-bottom: 2.4rem;
}
.adv-interlude-body p { margin: 0 0 1rem; }
.adv-interlude-body p:last-child { margin-bottom: 0; }
.adv-interlude-body strong { font-weight: 700; }
.adv-interlude-cta {
  text-align: center;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  padding-top: 1.8rem;
  margin-top: 2rem;
}
.adv-interlude-cta-link {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgb(var(--color-base-accent-1));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--color-base-accent-1), 0.3);
  padding-bottom: 2px;
  letter-spacing: 0.05em;
  transition: border-color 0.2s;
}
.adv-interlude-cta-link:hover { border-color: rgb(var(--color-base-accent-1)); }
.adv-interlude-cta-sub {
  font-size: 1.2rem;
  color: rgba(var(--color-base-text), 0.4);
  margin-top: 0.5rem;
}

/* ==========================================
   COST COMPARISON TABLE (SIMPLE 2-COL)
   ========================================== */
.adv-cost-simple-heading {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
  line-height: 1.3;
  color: rgb(var(--color-base-text));
  margin: 0 0 1.6rem;
}
.adv-cost-simple-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.45rem;
}
.adv-cost-simple-table thead tr {
  border-bottom: 2px solid rgba(var(--color-base-text), 0.12);
}
.adv-cost-simple-table thead th {
  text-align: left;
  padding: 0.8rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--color-base-text), 0.5);
}
.adv-cost-simple-table thead th:last-child { text-align: right; }
.adv-cost-simple-table tbody tr {
  border-bottom: 1px solid rgba(var(--color-base-text), 0.08);
}
.adv-cost-simple-table tbody tr:last-child { border-bottom: none; }
.adv-cost-simple-table td {
  padding: 1.1rem 0.8rem;
  color: rgba(var(--color-base-text), 0.75);
  vertical-align: middle;
}
.adv-cost-simple-table td:first-child {
  font-weight: 600;
  color: rgb(var(--color-base-text));
  width: 62%;
}
.adv-cost-simple-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: rgba(var(--color-base-text), 0.5);
}
.adv-cost-row--highlight { background: rgba(var(--color-base-accent-1), 0.06); }
.adv-cost-row--highlight td {
  color: rgb(var(--color-base-accent-1)) !important;
  font-weight: 800 !important;
}
.adv-cost-row--highlight td:last-child { font-size: 1.7rem; }
.adv-cost-note {
  font-size: 1.5rem;
  color: rgba(var(--color-base-text), 0.75);
  line-height: 1.7;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  padding-top: 1.6rem;
}
.adv-cost-note strong { color: rgb(var(--color-base-text)); }
.adv-cost-note p { margin: 0 0 0.8rem; }
.adv-cost-note p:last-child { margin-bottom: 0; }

@media screen and (max-width: 520px) {
  .adv-cost-simple-table td { font-size: 1.3rem; padding: 0.9rem 0.6rem; }
  .adv-cost-row--highlight td:last-child { font-size: 1.5rem; }
}

/* ==========================================
   CLOSER — FINAL LINE + DISCLAIMER
   ========================================== */
.adv-closer-text {
  font-family: var(--font-heading-family);
  font-style: italic;
  font-size: clamp(1.7rem, 2vw, 2rem);
  color: rgba(var(--color-base-text), 0.55);
  line-height: 1.75;
  text-align: center;
  margin-bottom: 0;
}
.adv-closer-text p { margin: 0; }
.adv-closer-attr {
  display: block;
  font-family: var(--font-body-family);
  font-style: normal;
  font-size: 1.35rem;
  font-weight: 700;
  color: rgba(var(--color-base-text), 0.7);
  margin-top: 1rem;
  letter-spacing: 0.03em;
}
.adv-closer-disclaimer {
  font-size: 1.15rem;
  color: rgba(var(--color-base-text), 0.45);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid rgba(var(--color-base-text), 0.1);
  padding-top: 2rem;
  margin-top: 3.2rem;
}
.adv-closer-disclaimer p { margin: 0; }