/*
 * hong-cta — Clinic CTA component (v3, post-critique).
 *
 * Used by wp_block ID 16803 ("CTA"), referenced from 440+ posts.
 *
 * v3 changes (from critique 2026-05-27):
 *   - Collapsed from 7 bands → 4 bands (heuristic 8: 1/4 → 3/4)
 *   - Removed glassmorphism backdrop-filter (was a brand-ban violation)
 *   - Dropped treatment + reception photos (perf + simplicity)
 *   - Hero credentials chip-row inline (preserves authority without a separate band)
 *   - Action band now 3-up: phone · WhatsApp · address+map link
 *   - One source of truth for hero gradient (CSS only, no inline overrides)
 *
 * Bands now (top to bottom):
 *   1. HERO        — clinic exterior photo + solid ink panel + credentials chips
 *   2. STEPS       — 01/02/03 process band (the only band that scored well)
 *   3. FAQ         — native <details> accordion
 *   4. ACTION BAND — phone + WhatsApp + footer info, one block
 *
 * Self-contained. Bans honored: no border-left>1px, no gradient text, no glass.
 */

.hong-cta {
  /* Browser perf hints: isolate layout, skip rendering until near viewport.
     contain-intrinsic-size reserves estimated height so layout doesn't shift
     when the CTA scrolls in. Estimated 1180w × ~960h on desktop. */
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 960px;

  --cta-ink:        #0a0a0a;
  --cta-ink-soft:   #1a1a1a;
  --cta-paper:      #ffffff;
  --cta-cream:      #f7f4ed;
  --cta-line:       #d4d4d0;
  --cta-muted:      #6b6b67;
  --cta-text:       #2a2a27;
  --cta-accent:     #cc2518;
  --cta-on-ink:     #ffffff;
  --cta-on-ink-soft: rgba(255, 255, 255, 0.92);
  --cta-on-ink-dim:  rgba(255, 255, 255, 0.62);
  --cta-whatsapp:       #25d366;
  --cta-whatsapp-hover: #1eba59;

  --cta-sans: var(--hong-sans, 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --cta-mono: var(--hong-mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace);

  display: block;
  max-width: 1180px;
  margin: clamp(48px, 7vw, 96px) auto;
  background: var(--cta-paper);
  color: var(--cta-ink);
  font-family: var(--cta-sans);
  font-size: 16px;
  line-height: 1.55;
  border: 1px solid var(--cta-ink);
  overflow: hidden;
}

.hong-cta * { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════
   1. HERO BAND — clinic exterior + solid ink panel + credentials
   ═══════════════════════════════════════════════════════════════════ */
.hong-cta__hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(380px, 46vw, 500px);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 56px);
  color: var(--cta-on-ink);
  background-color: var(--cta-ink);
  overflow: hidden;
  isolation: isolate;
}

/* Responsive hero image — replaces CSS background-image so we can use srcset + WebP + lazy-load.
   The <picture> element sits behind the panel via absolute positioning + z-index. */
.hong-cta__hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.hong-cta__hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Dark gradient scrim sits ABOVE image, BELOW content panel.
   Was previously the first layer of background-image; now a pseudo-element. */
.hong-cta__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(8, 8, 8, 0.78) 0%,
    rgba(8, 8, 8, 0.55) 55%,
    rgba(8, 8, 8, 0.30) 100%
  );
  pointer-events: none;
}

.hong-cta__hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 640px;
  padding: clamp(24px, 3.5vw, 36px);
  background: rgba(8, 8, 8, 0.85);
  /* NO backdrop-filter — solid panel only, per critique */
  /* NO 1px white border — let the ink panel be honestly opaque */
}

.hong-cta__hero-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--cta-accent);
  color: var(--cta-on-ink);
  font-family: var(--cta-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
}

.hong-cta__hero-title {
  margin: 0;
  font-family: var(--cta-sans);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--cta-on-ink);
}

.hong-cta__hero-lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(16px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--cta-on-ink-soft);
}

.hong-cta__hero-credentials {
  margin: 4px 0 0;
  padding: 14px 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hong-cta__hero-credentials li {
  font-family: var(--cta-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cta-on-ink);
}

.hong-cta__hero-address {
  margin: 0;
  font-family: var(--cta-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--cta-on-ink);
}

.hong-cta__hero-cta { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   2. STEPS BAND — 01/02/03 process (the band that worked)
   ═══════════════════════════════════════════════════════════════════ */
.hong-cta__steps {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cta-paper);
  border-top: 1px solid var(--cta-ink);
}

@media (min-width: 720px) {
  .hong-cta__steps { grid-template-columns: repeat(3, 1fr); }
}

.hong-cta__step {
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px);
  border-bottom: 1px solid var(--cta-line);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}

@media (min-width: 720px) {
  .hong-cta__step {
    border-bottom: 0;
    border-right: 1px solid var(--cta-line);
  }
  .hong-cta__step:last-child { border-right: 0; }
}

.hong-cta__step-num {
  font-family: var(--cta-mono);
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 0.95;
  color: var(--cta-accent);
  letter-spacing: -0.02em;
}

/* The uppercase mono labels below sat at 11/11.5px — under the 12.4px floor in
   tools/contrast-gate.mjs, and under the project's hard 13px a11y floor. Nobody
   caught it because none of the gate's 12 default pages renders this CTA. */
.hong-cta__step-label {
  font-family: var(--cta-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cta-ink);
}

.hong-cta__step-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cta-text);
}

/* ═══════════════════════════════════════════════════════════════════
   3. FAQ — native <details>
   ═══════════════════════════════════════════════════════════════════ */
.hong-cta__faq {
  padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 56px);
  background: var(--cta-cream);
  border-top: 1px solid var(--cta-ink);
}

.hong-cta__faq-eyebrow {
  margin: 0 0 10px;
  font-family: var(--cta-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cta-accent);
}

.hong-cta__faq-title {
  margin: 0 0 28px;
  font-family: var(--cta-sans);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--cta-ink);
  text-wrap: balance;
}

.hong-cta__faq-list {
  display: grid;
  border-top: 1px solid var(--cta-ink);
}

.hong-cta__faq-item { border-bottom: 1px solid var(--cta-line); }

.hong-cta__faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--cta-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cta-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.15s ease;
}

.hong-cta__faq-item summary::-webkit-details-marker { display: none; }
.hong-cta__faq-item summary:hover { color: var(--cta-accent); }

.hong-cta__faq-item summary::after {
  content: '+';
  font-family: var(--cta-mono);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--cta-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.hong-cta__faq-item[open] summary::after { content: '–'; color: var(--cta-accent); }

/* 16px, not 15px: these answers are long patient prose and must clear the 15.5px
   floor in tools/font-readability-gate.mjs. On single posts the size came out fine
   by accident — `.entry-content p` outranks this container rule and the <p> children
   never inherited the 15px. Outside .entry-content (portfolio/book detail pages,
   which render the CTA from the template) the inherited 15px showed through and
   failed the gate. */
.hong-cta__faq-body {
  padding: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cta-text);
}

.hong-cta__faq-body p { margin: 0 0 10px; }
.hong-cta__faq-body p:last-child { margin-bottom: 0; }
.hong-cta__faq-body strong { font-weight: 600; color: var(--cta-ink); }

/* ═══════════════════════════════════════════════════════════════════
   4. ACTION BAND — phone + WhatsApp + footer info (one block)
   ═══════════════════════════════════════════════════════════════════ */
.hong-cta__action {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 56px);
  background: var(--cta-ink);
  color: var(--cta-on-ink);
  border-top: 1px solid var(--cta-ink);
}

@media (min-width: 820px) {
  .hong-cta__action {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.hong-cta__action-copy {
  margin: 0 0 18px;
  font-family: var(--cta-sans);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--cta-on-ink);
  max-width: 50ch;
  text-wrap: balance;
}

.hong-cta__action-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-family: var(--cta-mono);
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--cta-on-ink-soft);
}

.hong-cta__action-meta a {
  color: var(--cta-on-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}

.hong-cta__action-meta a:hover {
  color: var(--cta-on-ink);
  text-decoration-color: var(--cta-accent);
}

.hong-cta__action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — WhatsApp (primary green) + Phone (secondary ghost)
   ═══════════════════════════════════════════════════════════════════ */
.hong-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--cta-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hong-cta__button--whatsapp {
  background: var(--cta-whatsapp);
  color: #07301f;
  border-color: var(--cta-whatsapp);
}

.hong-cta__button--whatsapp:hover,
.hong-cta__button--whatsapp:focus-visible {
  background: var(--cta-whatsapp-hover);
  border-color: var(--cta-whatsapp-hover);
  color: #07301f;
  text-decoration: none;
}

.hong-cta__button--phone {
  background: transparent;
  color: var(--cta-on-ink);
  border-color: rgba(255, 255, 255, 0.32);
}

.hong-cta__button--phone:hover,
.hong-cta__button--phone:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--cta-on-ink);
  color: var(--cta-on-ink);
  text-decoration: none;
}

.hong-cta__button--large {
  padding: 18px 30px;
  font-size: 17px;
}

.hong-cta__button--whatsapp::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.34 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.85 9.85 0 0 0 1.515 5.26l-.999 3.648 3.973-.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.hong-cta__button--phone::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CASCADE ARMOR — ONE block, valid wherever the CTA renders.
   ─────────────────────────────────────────────────────────────────────
   Two hostile bases fight this component for its own colors:
     legacy-content-base  `.entry-content p|li|a`            (0,1,1)
     swiss-modern         `.hong-swiss-modern .entry-content a` (0,2,1)
                          `.hong-swiss-modern a`               (0,1,1)
   The component's natural rules sit at (0,1,0) and lose to all of them,
   so dark bands render black-on-black.

   This used to be TWO parallel blocks — one prefixed `.entry-content`
   (which only fired inside a post body) and one prefixed `.hong-cta`
   (added when the portfolio/book pages started rendering the CTA from a
   template, outside .entry-content). Keeping them in sync by hand was a
   standing bug factory: the phone button and address link shipped
   invisible on 120 pages precisely because only one of the two was
   updated.

   Now there is one block. `.hong-cta.hong-cta` repeats the component root
   to buy a class without inventing a fake ancestor, landing every rule at
   (0,3,0) — or (0,3,1) for anchors — which strictly exceeds every base
   above in BOTH contexts, so load order can never decide the outcome.
   The @media print block at the end of this file is prefixed the same way
   so it can still override these rules.

   Edit here and nowhere else.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero — dark photo + ink panel, all text MUST be white */
.hong-cta.hong-cta .hong-cta__hero-eyebrow,
.hong-cta.hong-cta .hong-cta__hero-title,
.hong-cta.hong-cta .hong-cta__hero-address,
.hong-cta.hong-cta .hong-cta__hero-credentials li {
  color: #ffffff;
}

.hong-cta.hong-cta .hong-cta__hero-lead {
  color: rgba(255, 255, 255, 0.92);
}

/* Action band — ink black bg, text MUST be white */
.hong-cta.hong-cta .hong-cta__action-copy,
.hong-cta.hong-cta .hong-cta__action-text {
  color: #ffffff;
}

.hong-cta.hong-cta .hong-cta__action-meta,
.hong-cta.hong-cta .hong-cta__action-meta li,
.hong-cta.hong-cta .hong-cta__action-meta a {
  color: rgba(255, 255, 255, 0.92);
}

.hong-cta.hong-cta .hong-cta__action-meta a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}

.hong-cta.hong-cta .hong-cta__action-meta a:hover {
  color: #ffffff;
  text-decoration-color: var(--cta-accent);
}

/* Anchors on the two dark bands — white, and no inherited link underline.
   FAQ-body links are deliberately NOT included: they sit on the light cream
   band and should keep normal in-prose link treatment. */
.hong-cta.hong-cta .hong-cta__hero a,
.hong-cta.hong-cta .hong-cta__action a {
  color: #ffffff;
  border-bottom: 0;
}

/* Buttons must never carry the legacy underline, and keep their own border */
.hong-cta.hong-cta a.hong-cta__button,
.hong-cta.hong-cta a.hong-cta__button:hover,
.hong-cta.hong-cta a.hong-cta__button:focus-visible {
  text-decoration: none;
}

.hong-cta.hong-cta a.hong-cta__button--whatsapp,
.hong-cta.hong-cta a.hong-cta__button--whatsapp:hover {
  color: #ffffff;
  border: 1px solid var(--cta-whatsapp);
}

.hong-cta.hong-cta a.hong-cta__button--phone,
.hong-cta.hong-cta a.hong-cta__button--phone:hover {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

/* Light bands (steps + FAQ) — explicit colors so they don't drift to the
   legacy ink/link palette. */
.hong-cta.hong-cta .hong-cta__step-body { color: var(--cta-text); }
.hong-cta.hong-cta .hong-cta__step-num { color: var(--cta-accent); }
.hong-cta.hong-cta .hong-cta__step-label { color: var(--cta-ink); }
.hong-cta.hong-cta .hong-cta__faq-title { color: var(--cta-ink); }
.hong-cta.hong-cta .hong-cta__faq-eyebrow { color: var(--cta-accent); }
.hong-cta.hong-cta .hong-cta__faq-item summary { color: var(--cta-ink); }
.hong-cta.hong-cta .hong-cta__faq-item summary:hover { color: var(--cta-accent); }
.hong-cta.hong-cta .hong-cta__faq-body,
.hong-cta.hong-cta .hong-cta__faq-body p { color: var(--cta-text); }
.hong-cta.hong-cta .hong-cta__faq-body strong { color: var(--cta-ink); }

/* Defeat legacy `.entry-content li::marker { color: red }` — our lists are
   list-style:none so no marker should show anyway. */
.hong-cta.hong-cta li::marker { color: transparent; }

/* ───────────────────────────────────────────────────────────────────
   AUTHORED CTA BUTTONS — some posts hand-roll <a class="cta-button"> with
   their own colored (blue/red) background but no text color, so
   swiss-modern's `.entry-content a` (#a01d13 dark red, specificity 0,2,1)
   bleeds in → dark-red on blue (~1.5:1, unreadable). Match it at (0,3,1)
   via the body class so white wins regardless of load order, and drop the
   stray red underline. Scoped to `.cta-button` only (a primary action that
   always carries a colored bg); the generic `.btn` is NOT included here —
   it varies (some are white/outline buttons where dark text is correct),
   so those are handled per-post. Pre-existing authored content. */
.hong-swiss-modern .entry-content a.cta-button {
  color: #ffffff;
  border-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   PRINT — keep the info, lose the buttons
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .hong-cta__button { display: none; }
  /* `.hong-cta.hong-cta` mirrors the cascade armor's specificity (0,3,0). Without
     it these (0,1,0) rules lose to the armor and print keeps the white-on-ink
     treatment — invisible on paper. */
  .hong-cta.hong-cta .hong-cta__action { background: var(--cta-paper); color: var(--cta-ink); }
  .hong-cta.hong-cta .hong-cta__action-copy,
  .hong-cta.hong-cta .hong-cta__action-meta,
  .hong-cta.hong-cta .hong-cta__action-meta li,
  .hong-cta.hong-cta .hong-cta__action-meta a,
  .hong-cta.hong-cta .hong-cta__action a { color: var(--cta-ink); }
  /* The hero has THREE separate dark layers and print has to clear all three,
     or the ink text below lands on ink. `background-image: none` alone was
     written for the era when the photo WAS a CSS background; today the darkness
     comes from `background-color`, from the ::after scrim, and from a real
     <picture>. An <img> is content, not background, so it prints even when the
     browser's "background graphics" option is off — which is the default. */
  .hong-cta.hong-cta .hong-cta__hero {
    background-image: none;
    background-color: var(--cta-paper);
    color: var(--cta-ink);
    /* clamp(380px, 46vw, 500px) resolves against the PAGE width on paper and
       reserves half a sheet of empty band. Let the copy size it. */
    min-height: 0;
    padding: 0;
  }
  .hong-cta.hong-cta .hong-cta__hero-image { display: none; }
  .hong-cta.hong-cta .hong-cta__hero::after { content: none; }
  .hong-cta.hong-cta .hong-cta__hero-title,
  .hong-cta.hong-cta .hong-cta__hero-lead,
  .hong-cta.hong-cta .hong-cta__hero-address,
  .hong-cta.hong-cta .hong-cta__hero a,
  .hong-cta.hong-cta .hong-cta__hero-credentials li { color: var(--cta-ink); }
  /* Red chip: its white text is invisible on paper the moment background
     graphics are off. Ink on paper, with the accent kept as a rule. */
  .hong-cta.hong-cta .hong-cta__hero-eyebrow {
    background: transparent;
    color: var(--cta-ink);
    padding: 0 0 6px;
    border-bottom: 2px solid var(--cta-accent);
  }
  .hong-cta.hong-cta .hong-cta__hero-inner {
    background: transparent;
    padding: 0;
  }
}