/* ---- clock line (full-border callout, replaces the old side stripe) ---- */
.conversion .dg-clockline { position: relative; margin-top: 20px!important; padding: 14px 16px 14px 40px; border: 1px solid #b7c4b8; border-radius: 4px; background: #e4eadc; font-size: 16px; line-height: 1.5; color: #28332d; max-width: 46ch; }
.conversion .dg-clockline::before { content: ''; position: absolute; left: 16px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: #bc452f; box-shadow: 0 0 0 4px rgba(188, 69, 47, .16); }


/* ================= HERO: an account being read ================= */
@media (min-width: 1000px) { .dg-hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; } }
.hx { min-width: 0; }
.hx-photo { position: relative; border-radius: 4px; overflow: hidden; background: #f0eee8; aspect-ratio: 1200 / 849; }
.hx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 0, transparent 72%, rgba(188, 69, 47, .14) 95%, rgba(188, 69, 47, .8) 100%); transform: translateX(-100%); }
.hx-chip { position: absolute; left: var(--x); top: var(--y); transform: translate(-14px, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 12px 2px 2px; border: 1px solid #c9c9bd; border-radius: 999px; background: rgba(245, 243, 237, .97); color: #26352e; font: 600 13px/1 SaddlBody, Arial, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(40, 51, 45, .16); transition: background-color .25s, color .25s, border-color .25s, opacity .25s; }
.hx-chip::after { content: ''; position: absolute; inset: -8px -4px; }
.hx-chip.is-left { transform: translate(calc(-100% + 14px), -50%); flex-direction: row-reverse; padding: 2px 2px 2px 12px; }
.hx-dot { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #bc452f; display: block; }
.hx-dot::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #f5f3ed; }
.hx-dot i { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #bc452f; opacity: 0; }
.hx-chip.is-wait { opacity: .55; }
.hx-chip.is-on { background: #26352e; border-color: #26352e; color: #f5f3ed; }
.hx-chip.is-on .hx-dot { background: #e7b494; }
.hx-chip.is-on .hx-dot::before { background: #26352e; }
.hx-chip:focus-visible { outline: 3px solid #bc452f; outline-offset: 3px; }
.hx-cap { margin-top: 12px; padding: 12px 16px 14px; border: 1px solid #c9c9bd; border-radius: 4px; background: #f5f3ed; display: grid; gap: 3px; min-height: 76px; align-content: start; }
.hx-cap b { font-size: 13px; font-weight: 600; color: #9f3624; }
.hx-cap span { font-size: 17px; line-height: 1.35; color: #26352e; font-weight: 600; }
.hx-note { margin-top: 8px; font-size: 13px; color: #536457; }
.hx-list { list-style: none; margin: 12px 0 0; padding: 0; display: none; }
.hx-list li { padding: 10px 0; border-top: 1px solid #c9c9bd; }
.hx-list b { display: block; font: 600 22px/1.1 SaddlDisplay, Arial, sans-serif; color: #26352e; }
.hx-list span { color: #536457; }
html:not(.dx-js) .hx-list { display: block; }
html:not(.dx-js) .hx-cap { display: none; }
@media (max-width: 480px) { .hx-chip { font-size: 12px; min-height: 28px; gap: 6px; } .hx-dot { width: 22px; height: 22px; } .hx-dot::before { inset: 6px; } .hx-chip { transform: translate(-12px, -50%); } .hx-chip.is-left { transform: translate(calc(-100% + 12px), -50%); } }

/* ================= PROOF: outcomes by marketplace ================= */
.dx-proof { padding: 44px 0 8px; border-top: 1px solid #c9c9bd; }
.dx-proof h2 { font-size: clamp(32px, 4vw, 48px); max-width: 22ch; }
.dx-outcomes { display: grid; margin-top: 24px; }
.dx-outcome { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 24px 0; border-top: 1px solid #c9c9bd; }
.dx-oh { display: flex; align-items: center; gap: 12px; }
.dx-oh img { height: 36px; width: auto; border-radius: 3px; border: 1px solid #d8d6cb; flex: none; }
.dx-oh p { margin: 0; font-size: 13px; line-height: 1.35; color: #536457; }
.dx-oh p b { display: block; font-size: 15px; font-weight: 600; color: #26352e; }
.conversion .dx-outcome h3 { font-size: 27px; line-height: 1.12; align-self: start; }
.dx-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin: 6px 0 0; padding: 0; align-items: start; }
.dx-metrics > div { display: grid; grid-template-rows: auto auto; gap: 6px; min-width: 0; align-content: start; }
.dx-metrics dd { grid-row: 1; margin: 0; font: 600 clamp(34px, 9vw, 44px)/1 SaddlDisplay, Arial, sans-serif; color: #26352e; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-metrics dt { grid-row: 2; font-size: 13px; line-height: 1.3; color: #536457; min-height: 2.6em; }
.dx-proof-note { margin-top: 6px!important; padding-bottom: 32px; font-size: 13px; color: #536457; max-width: 78ch; }
.dx-proof-note a { text-underline-offset: 4px; }
@media (min-width: 900px) {
  .dx-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 44px; }
  .dx-outcome { grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; border-top: 2px solid #26352e; padding-top: 22px; }
}

/* ---- what the audit answers ---- */
.dx-answers { padding: 44px 0 8px; }
.dx-answers h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 20ch; }
.dx-answers-lead { margin-top: 14px; color: #536457; max-width: 56ch; }
.dx-find { list-style: none; margin: 22px 0 0; padding: 0; }
.dx-find li { padding: 16px 0; border-top: 1px solid #c9c9bd; display: grid; gap: 2px; }
.dx-find b { font: 600 26px/1.15 SaddlDisplay, Arial, sans-serif; color: #26352e; }
.dx-find span { color: #536457; }
.dx-find li.dx-always { background: #e4eadc; padding-inline: 16px; border-radius: 4px; border-top: 0; margin-top: 8px; }
.dx-answers .b8-note { margin-top: 12px; font-size: 14px; color: #536457; }

/* ---- founder ---- */
.dx-founder { margin-top: 44px; padding: 44px 0; border-top: 1px solid #c9c9bd; display: grid; gap: 26px; }
.dx-founder h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 18ch; }
.dx-quote { margin: 0; font: italic 500 clamp(18px, 2vw, 22px)/1.5 SaddlBody, Arial, sans-serif; color: #26352e; max-width: 38ch; }
.dx-quote-by { margin-top: 12px; font-size: 14px; color: #536457; }
.dx-founder p { color: #536457; max-width: 60ch; }
.dx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dx-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid #c9c9bd; border-radius: 999px; font-size: 14px; color: #26352e; background: #f5f3ed; }
.dx-facts img { height: 26px; width: auto; border-radius: 999px; }
@media (min-width: 1000px) { .dx-founder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }

/* ---- fit + faq ---- */
.dx-fit-sec { padding-top: 48px; }
@media (min-width: 900px) { .dx-fit-sec { padding-top: 72px; } }
.dx-fit { display: grid; gap: 22px; padding: 8px 0 40px; }
.dx-fit > div { padding: 22px; border-radius: 4px; border: 1px solid #c9c9bd; }
.dx-fit .dx-yes { background: #e4eadc; }
.conversion .dx-fit h3 { font-size: 28px; margin-bottom: 10px; }
.dx-fit ul { margin: 0; padding-left: 20px; color: #28332d; }
.dx-fit li { padding: 3px 0; }
@media (min-width: 768px) { .dx-fit { grid-template-columns: 1fr 1fr; gap: 24px; } }
.dx-faq { padding-bottom: 48px; }
.dx-faq h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.dx-faq details p { padding-bottom: 20px; color: #536457; max-width: 64ch; }

/* ---- sticky CTA (phones/tablets) ---- */
.dx-sticky { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(245, 243, 237, .96); border-top: 1px solid #c9c9bd; transform: translateY(110%); transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.dx-sticky.is-on { transform: translateY(0); }
.dx-sticky .btn { width: 100%; }
@media (min-width: 900px) { .dx-sticky { display: none; } }
@media (max-width: 899px) { body.conversion { padding-bottom: 0; } body.conversion .site-footer { margin-bottom: 0; } }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .dx-tab, .dx-pin, .dx-sticky { transition: none; }
}

/* ---- hero layout override ---- */
.dx-sticky { visibility: hidden; transition: transform .3s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .3s; }
.dx-sticky.is-on { visibility: visible; transition-delay: 0s; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* spacing: the page-wide margin reset out-ranks single-class rules, so restate here */
.conversion .dx-answers-lead { margin-top: 16px; }
.conversion .dx-quote { margin-top: 22px; }
.conversion .dx-quote-by { margin-top: 12px; }
.dx-facts img.dx-noon { height: 22px; border-radius: 3px; }
/* conversion.css hides every [hidden] with !important; without JS the four diagnoses must all stay readable. */

/* the page-wide `.conversion :is(h1,h2,h3,p){margin:0}` reset out-ranks single-class margins; restate them */
.conversion .dx-tabs-label { margin: 28px 0 10px; }
.conversion .dx-howto { margin: 14px 0 0; }
.conversion .sb-group-label { margin: 10px 0 2px; }
.conversion .sb-group-label.is-ok { margin-top: 18px; }
.conversion .sb-first { margin: 18px 0 0; scroll-margin-bottom: 104px; }
.conversion .dx-foot { margin-top: 22px; }
.conversion .hx-cap { margin-top: 12px; }
.conversion .hx-note { margin-top: 8px; }
.conversion .dx-nojs p { margin: 8px 0 0; }
.c-lab { font: 600 10px SaddlBody, Arial, sans-serif; fill: #9fb1a3; }
@media (max-width: 639px) { .c-lab { display: none; } }
/* Small screens: keep the four signal chips clear of each other */
@media (max-width: 700px) {
  .hx-chip[data-k="inv"] { --x: 54% !important; --y: 68% !important; }
  .hx-chip[data-k="econ"] { --y: 81% !important; }
  .hx-chip[data-k="ads"] { --y: 27% !important; }
}

.dx-tab-p { font-size: 15px; font-weight: 600; }
.dx-tab-s { font-size: 13px; font-weight: 400; color: #9fb1a3; line-height: 1.3; }
.dx-tab[aria-selected="true"] .dx-tab-s { color: #536457; }
@media (min-width: 640px) { .dx-tab { min-height: 72px; } }

/* ================= OFFER BAND ================= */
.of { background: #e4eadc; border-block: 1px solid #c9d3c9; margin-block: 8px 0; }
.of-inner { display: grid; gap: 0; padding-block: 8px; }
.of-item { padding: 20px 0; border-top: 1px solid #b7c4b8; display: grid; gap: 4px; }
.of-item:first-child { border-top: 0; }
.of-v { font: 600 clamp(38px, 9vw, 52px)/1 SaddlDisplay, Arial, sans-serif; color: #26352e; letter-spacing: -.01em; }
.conversion .of-t { margin: 0; color: #28332d; font-size: 16px; max-width: 62ch; }
.conversion .of-eq { margin: 0; font-size: 16px; font-weight: 600; color: #536457; font-variant-numeric: tabular-nums; }
.conversion .of-cap { margin: 0; padding: 14px 0 16px; border-top: 1px solid #b7c4b8; font-size: 14px; color: #536457; }
@media (min-width: 800px) {
  .of-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; padding-block: 28px 26px; }
  .of-item { border-top: 0; padding: 0 0 0 0; }
  .of-item + .of-item { border-left: 1px solid #b7c4b8; padding-left: 40px; }
}

/* offer band + shared polish */
.of-item { align-content: start; }
.of + .os, .of + .dx-proof { border-top: 0; }
.conversion .dg-offerline { margin-top: 14px; max-width: 46ch; font-size: 15px; color: #536457; }

/* ---- what audits find ---- */
.fd { margin-top: 44px; padding: 44px 0; border-top: 1px solid #c9c9bd; display: grid; gap: 28px; }
.fd h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; max-width: 18ch; margin: 0; }
.conversion .fd-lead { margin: 14px 0 0; color: #536457; max-width: 58ch; }
.fd-list { list-style: none; margin: 22px 0 0; padding: 0; }
.fd-list li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid #c9c9bd; }
.fd-list li:last-child { border-bottom: 1px solid #c9c9bd; }
.fd-list b { font: 600 24px/1.1 SaddlDisplay, Arial, sans-serif; color: #26352e; }
.fd-list span { color: #28332d; max-width: 60ch; }
.fd-list em { font-style: normal; font-size: 13px; color: #536457; }
.conversion .fd-more { margin: 10px 0 0; }
.fd-more a { display: inline-flex; align-items: center; min-height: 44px; }
.fd-get { padding: 22px; border-radius: 4px; background: #e4eadc; align-self: start; }
.fd-get h3 { margin: 0 0 10px; font-size: 28px; line-height: 1.1; }
.fd-get ul { margin: 0; padding-left: 20px; color: #28332d; }
.fd-get li { padding: 4px 0; }
.conversion .fd-get p { margin: 14px 0 0; font-size: 14px; color: #536457; }
@media (min-width: 1000px) { .fd { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; padding: 64px 0; } .fd-list li { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: baseline; } }