/* Extra pieces for the new guides, in the site's own palette (site.css is dialbridge.ai's stylesheet).
   Only what the site does not have yet: an in-article call to action, a calculator, fit lists and a note. */
.prose{font-size:17px}
.prose h2{scroll-margin-top:24px}
.prose table{width:100%}

/* in-article call to action: one sentence, one button, where it actually helps */
.g-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:center;margin:34px 0;padding:22px 24px;border-radius:12px;background:#252c25;color:#eef2e8}
.g-cta p{margin:0!important;color:#eef2e8!important;font-size:16.5px!important;line-height:1.55!important}
.g-cta p b{color:#fff}
.g-cta .button{min-width:0;min-height:50px;padding:14px 20px;font-size:14px;text-decoration:none!important;color:#fff!important}
@media (max-width:640px){.g-cta{grid-template-columns:1fr}.g-cta .button{width:100%}}

/* calculator */
.g-calc{margin:26px 0 30px;border:1px solid #dadfcf;border-radius:12px;background:#fbfbf7;overflow:hidden}
.g-calc-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:22px 22px 18px}
.g-calc label{display:block;font-size:13.5px;font-weight:700;color:#20251f;margin-bottom:6px}
.g-calc label small{display:block;font-weight:500;color:#64675d;font-size:12.5px;margin-top:2px}
.g-calc .in{display:flex;align-items:center;height:48px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px #d6d8cc;padding:0 12px;font-size:16px;font-weight:650}
.g-calc .in:focus-within{box-shadow:inset 0 0 0 1.5px #f35427,0 0 0 4px rgba(243,84,39,.12)}
.g-calc .in span{color:#64675d;font-weight:600}
.g-calc input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;color:#20251f;outline:none;padding:0 4px}
.g-calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dadfcf;background:#252c25;color:#eef2e8}
.g-calc-out div{padding:18px 20px}
.g-calc-out div+div{border-left:1px solid rgba(255,255,255,.12)}
.g-calc-out b{display:block;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.g-calc-out div>span{display:block;margin-top:6px;font-size:13px;color:#b9c0b1}
.g-calc-note{margin:0!important;padding:12px 22px 14px;font-size:13.5px!important;color:#64675d!important;border-top:1px solid #dadfcf;background:#fbfbf7}
@media (max-width:640px){.g-calc-in{grid-template-columns:1fr}.g-calc-out{grid-template-columns:1fr}.g-calc-out div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}}

/* "worth it if" / "skip it if" */
.g-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 8px}
.g-fit .card h3{margin:0 0 8px;font-size:17px}
.g-fit ul{margin:0;padding:0!important;list-style:none}
.g-fit li{position:relative;margin:8px 0!important;padding-left:26px;font-size:15.5px;line-height:1.5}
.g-fit li:before{content:"\2713";position:absolute;left:0;top:0;font-weight:800;color:#3f7a3a}
.g-fit .no li:before{content:"\2715";color:#c43d17}
@media (max-width:640px){.g-fit{grid-template-columns:1fr}}

/* a short note that stands apart from the text */
.g-note{margin:22px 0;padding:14px 18px;border-left:3px solid #f35427;background:#fbfbf7;border-radius:0 10px 10px 0;font-size:15.5px;line-height:1.55}
.g-note b{color:#20251f}

/* preview banner (staging builds only) */
.g-stage{background:#20251f;color:#eef2e8;font-size:13px;text-align:center;padding:8px 16px}
.g-stage b{color:#fff}
.g-calc-out i{font-style:normal;color:#fff}

/* reading layout: article plus a sticky sidebar (on this page + report card) on wide screens */
.g-side{display:none}
@media (min-width:1100px){
  .g-read{display:grid;grid-template-columns:minmax(0,740px) 300px;column-gap:clamp(56px,7vw,120px);align-items:start}
  .g-side{display:block;position:sticky;top:24px}
}
.g-toc ol{list-style:none;margin:14px 0 0;padding:0;border-left:1px solid #dadfcf}
.g-toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:#5d6255;text-decoration:none;transition:color .15s,border-color .15s}
.g-toc a:hover{color:#20251f}
.g-toc a.on{color:#20251f;font-weight:650;border-left-color:#f35427}
.g-side-cta{margin-top:30px;padding:22px 22px 18px;border-radius:12px;background:#252c25;color:#eef2e8}
.g-side-cta b{display:block;font-size:18px;letter-spacing:-.01em;color:#fff}
.g-side-cta p{margin:8px 0 16px;font-size:14.5px;line-height:1.55;color:#c9d0c1}
.g-side-cta .button{width:100%;min-height:48px;font-size:14px}
.g-side-cta span:not(.button-dot){display:block;margin-top:10px;font-size:12.5px;color:#9aa391;text-align:center}

/* ---------- graphics (HTML + inline SVG, so the words stay readable to Google and AI answers) ---------- */
.g-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.g-ver{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:#e6f1e3;color:#2f6a2a;font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.g-ver .g-ico{width:16px;height:16px;padding:2px;border-radius:50%;background:#3f7a3a;color:#fff;stroke-width:3}
.prose figure{margin:26px 0 30px}
.prose figcaption,.g-hero-fig figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:#686e5d}

/* hero: text left, illustration right */
@media (min-width:1100px){.g-hero{display:grid;grid-template-columns:minmax(0,820px) 380px;column-gap:clamp(48px,6vw,110px);align-items:center}}
.g-hero-fig{margin:34px 0 0;max-width:420px}
@media (min-width:1100px){.g-hero-fig{margin:0}}
.g-ad{padding:18px;border-radius:16px;background:#fff;border:1px solid #dadfcf;box-shadow:0 30px 60px -30px rgba(32,37,31,.28)}
.g-ad-top{display:flex;align-items:baseline;gap:10px;padding:0 4px 12px;border-bottom:1px solid #eceee6}
.g-ad-top b{font-size:15px;color:#20251f}
.g-ad-top span{font-size:11.5px;font-weight:700;color:#5d6255;letter-spacing:.04em;text-transform:uppercase}
.g-ad-card{padding:14px 4px 4px}
.g-ad-card+.g-ad-card{border-top:1px solid #eceee6;margin-top:12px;opacity:.55}
.g-ad-name{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.g-ad-name b{font-size:16.5px;color:#20251f}
.g-ad-rate{font-size:13px;color:#5d6255;white-space:nowrap}
.g-ad-rate i{font-style:normal;color:#e8a317;letter-spacing:1px}
.g-ad-card .g-ver{margin:8px 0 6px}
.g-ad-card p{margin:0;font-size:13px;color:#5d6255}
.g-ad-btns{display:flex;gap:8px;margin-top:12px}
.g-ad-btns span{flex:1;text-align:center;padding:9px 0;border-radius:999px;border:1px solid #d6d8cc;font-size:13px;font-weight:650;color:#20251f}
.g-ad-btns .call{background:#20251f;border-color:#20251f;color:#fff}

/* three badges become one */
.g-merge{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;padding:24px;border-radius:12px;background:#fbfbf7;border:1px solid #dadfcf}
.g-merge-old{display:grid;gap:8px}
.g-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:9px;background:#fff;border:1px solid #dadfcf;font-size:14px;font-weight:650;color:#3b4036}
.g-pill.x{color:#9a9e92;text-decoration:line-through;background:transparent;border-style:dashed}
.g-pill.x em{margin-left:auto;font-style:normal;text-decoration:none;font-size:11.5px;font-weight:700;color:#c43d17;letter-spacing:.04em;text-transform:uppercase}
.g-merge-arrow{display:grid;justify-items:center;gap:6px;color:#f35427}
.g-merge-arrow svg{width:100%;height:150px}
.g-merge-arrow small{font-size:12px;font-weight:700;color:#20251f;white-space:nowrap}
.g-merge-new{display:grid;justify-items:start;gap:10px}
.g-merge-new .g-ver{font-size:17px;padding:8px 16px 8px 9px}
.g-merge-new .g-ver .g-ico{width:22px;height:22px}
.g-merge-new p{margin:0!important;font-size:14.5px!important;line-height:1.5!important;color:#4a5043}
@media (max-width:700px){.g-merge{grid-template-columns:1fr;gap:12px;padding:18px}.g-merge-arrow svg{display:none}.g-merge-arrow{grid-auto-flow:column;justify-content:start;align-items:center;gap:10px}.g-merge-arrow:before{content:"\2193";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f35427;color:#fff;font-size:17px;font-weight:700}}

/* verification timeline */
.g-time{padding:22px 22px 18px;border-radius:12px;background:#252c25;color:#eef2e8}
.g-time ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0!important;list-style:none;position:relative}
.g-time ol:before{content:"";position:absolute;left:12%;right:12%;top:13px;height:2px;background:repeating-linear-gradient(90deg,#f35427 0 8px,transparent 8px 14px)}
.g-time li{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;margin:0!important;padding:0!important}
.g-time li:before{content:"";width:28px;height:28px;border-radius:50%;background:#252c25;border:2px solid #f35427;box-sizing:border-box;margin-bottom:8px}
.g-time li:last-child:before{background:#3f7a3a;border-color:#3f7a3a}
.g-time b{font-size:14.5px;color:#fff}
.g-time span{font-size:12.5px;color:#b9c0b1}
.g-time-span{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:14px;color:#eef2e8}
.g-time-span b{color:#fff}
@media (max-width:560px){.g-time ol{grid-template-columns:1fr;row-gap:16px}.g-time ol:before{left:13px;right:auto;top:14px;bottom:30px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#f35427 0 6px,transparent 6px 11px)}.g-time li{grid-template-columns:28px 1fr;justify-items:start;text-align:left;column-gap:14px;row-gap:0}.g-time li:before{grid-row:1/3;margin:0}.g-time-span{text-align:left}}

/* what counts as a lead */
.g-leads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 24px}
.g-lead{display:grid;align-content:start;gap:6px;padding:16px;border-radius:11px;background:#fff;border:1px solid #dadfcf}
.g-lead .g-ico{color:#20251f;margin-bottom:4px}
.g-lead b{font-size:15px;line-height:1.35;color:#20251f}
.g-lead span{font-size:13.5px;line-height:1.45;color:#5d6255}
.g-lead em{justify-self:start;margin-top:6px;padding:3px 9px;border-radius:999px;background:#eeeee6;font-style:normal;font-size:12px;font-weight:700;color:#3b4036}
.g-lead.hot{border-color:#f35427;box-shadow:inset 0 0 0 1px #f35427;background:#fff8f4}
.g-lead.hot .g-ico,.g-lead.hot em{color:#c43d17}
.g-lead.hot em{background:#fde4da}
.g-lead.free .g-ico{color:#3f7a3a}
.g-lead.free em{background:#e6f1e3;color:#2f6a2a}
@media (max-width:760px){.g-leads{grid-template-columns:1fr 1fr}}
@media (max-width:350px){.g-leads{grid-template-columns:1fr}}

/* the three ranking inputs */
.g-rank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 22px;counter-reset:r}
.g-rank div{padding:18px;border-radius:11px;background:#eeeee6;border:1px solid #dedfd4}
.g-rank div:before{counter-increment:r;content:counter(r);display:grid;place-items:center;width:28px;height:28px;margin-bottom:12px;border-radius:50%;background:#20251f;color:#fff;font-size:13px;font-weight:700}
.g-rank div.win{background:#252c25;border-color:#252c25}
.g-rank div.win:before{background:#f35427}
.g-rank b{display:block;font-size:16px;color:#20251f}
.g-rank div.win b{color:#fff}
.g-rank p{margin:6px 0 0!important;font-size:14px!important;line-height:1.5!important;color:#4a5043}
.g-rank div.win p{color:#c9d0c1}
@media (max-width:640px){.g-rank{grid-template-columns:1fr}}

/* calculator: one dot per lead */
.g-dots{padding:16px 22px 18px;border-top:1px solid #dadfcf;background:#fff}
.g-dots-row{display:flex;flex-wrap:wrap;gap:6px}
.g-dots-row i{width:16px;height:16px;border-radius:50%;background:#e3e5da}
.g-dots-row i.on{background:#f35427}
.g-dots p{margin:10px 0 0!important;font-size:13px!important;color:#64675d!important}
.g-dots p b{color:#c43d17}