/* ==========================================================================
   RevSurge Digital — Free Tools design system
   Scoped under .rsd so it can never leak into the host WordPress theme.
   ========================================================================== */

.rsd {
  --rsd-brand: #1f4cee;
  --rsd-brand-dark: #1539b8;
  --rsd-brand-light: #eef2ff;
  --rsd-accent: #0256ff;
  --rsd-ink: #0d0f30;
  --rsd-body: #313548;
  --rsd-muted: #6b7091;
  --rsd-line: #e3e6f0;
  --rsd-line-soft: #eef0f7;
  --rsd-bg: #ffffff;
  --rsd-bg-soft: #f7f8fc;
  --rsd-bg-sunk: #f1f3fa;

  --rsd-good: #0f9d58;
  --rsd-good-bg: #e8f7ee;
  --rsd-warn: #c77700;
  --rsd-warn-bg: #fff5e5;
  --rsd-bad: #d93025;
  --rsd-bad-bg: #fdecea;
  --rsd-info: #1f4cee;
  --rsd-info-bg: #eef2ff;

  --rsd-radius: 14px;
  --rsd-radius-sm: 9px;
  --rsd-shadow: 0 1px 2px rgba(13, 15, 48, .05), 0 8px 24px -12px rgba(13, 15, 48, .16);
  --rsd-shadow-lg: 0 2px 4px rgba(13, 15, 48, .05), 0 24px 48px -20px rgba(13, 15, 48, .26);

  /* Inherit the host theme's typography. On revsurgedigital.com (Avada) this
     resolves to Inter for body and Sora for headings automatically. */
  --rsd-font: var(--body_typography-font-family, inherit);
  --rsd-heading-font: var(--h2_typography-font-family, var(--rsd-font));
  --rsd-heading-weight: var(--h2_typography-font-weight, 700);
  --rsd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  font-family: var(--rsd-font);
  color: var(--rsd-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  box-sizing: border-box;
}

.rsd *, .rsd *::before, .rsd *::after { box-sizing: border-box; }
.rsd img { max-width: 100%; height: auto; }

/* Reset the bits WordPress themes commonly impose */
.rsd p { margin: 0 0 1em; color: var(--rsd-body); }
.rsd p:last-child { margin-bottom: 0; }
.rsd h1, .rsd h2, .rsd h3, .rsd h4, .rsd h5 {
  color: var(--rsd-ink); margin: 0 0 .5em; line-height: 1.25; letter-spacing: -.01em;
  text-transform: none;
  font-family: var(--rsd-heading-font);
  font-weight: var(--rsd-heading-weight);
}
.rsd ul, .rsd ol { margin: 0 0 1em; padding-left: 1.25em; }
.rsd li { margin: .25em 0; }
.rsd a { color: var(--rsd-brand); text-decoration: underline; text-underline-offset: 2px; }
.rsd a:hover { color: var(--rsd-brand-dark); }
.rsd table { border-collapse: collapse; width: 100%; margin: 0; }
.rsd hr { border: 0; border-top: 1px solid var(--rsd-line); margin: 1.5rem 0; }

/* ---------- Layout ---------- */
.rsd-app { display: block; width: 100%; }
.rsd-card {
  background: var(--rsd-bg);
  border: 1px solid var(--rsd-line);
  border-radius: var(--rsd-radius);
  box-shadow: var(--rsd-shadow);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.rsd-card--flush { padding: 0; overflow: hidden; }
.rsd-card--soft { background: var(--rsd-bg-soft); box-shadow: none; }
.rsd-card__head {
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--rsd-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.rsd-card__head h3 { margin: 0; font-size: 1.05rem; }
.rsd-card__body { padding: 1.5rem; }

.rsd-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) {
  .rsd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rsd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
}
.rsd-stack > * + * { margin-top: 1rem; }
.rsd-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.rsd-spacer { flex: 1 1 auto; }

/* ---------- Forms ---------- */
.rsd-form { display: flex; flex-direction: column; gap: .85rem; }
.rsd-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.rsd-label {
  font-size: .8rem; font-weight: 700; color: var(--rsd-ink);
  letter-spacing: .02em; text-transform: uppercase;
}
.rsd-hint { font-size: .82rem; color: var(--rsd-muted); }
.rsd-input, .rsd-textarea, .rsd-select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--rsd-ink);
  background: var(--rsd-bg); border: 1.5px solid var(--rsd-line);
  border-radius: var(--rsd-radius-sm); padding: .7rem .85rem;
  transition: border-color .15s, box-shadow .15s; appearance: none;
}
.rsd-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7091' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem;
}
.rsd-textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.rsd-input:focus, .rsd-textarea:focus, .rsd-select:focus {
  outline: none; border-color: var(--rsd-brand); box-shadow: 0 0 0 3px rgba(31, 76, 238, .15);
}
.rsd-input::placeholder, .rsd-textarea::placeholder { color: #a3a7c0; }
.rsd-input[aria-invalid="true"] { border-color: var(--rsd-bad); }

.rsd-inline-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.rsd-inline-form .rsd-field { flex: 1 1 260px; }

/* ---------- Buttons ---------- */
.rsd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2;
  padding: .78rem 1.35rem; border-radius: var(--rsd-radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.rsd-btn:active { transform: translateY(1px); }
.rsd-btn:focus-visible { outline: 3px solid rgba(31, 76, 238, .4); outline-offset: 2px; }
.rsd-btn--primary { background: var(--rsd-brand); color: #fff; }
.rsd-btn--primary:hover { background: var(--rsd-brand-dark); color: #fff; }
.rsd-btn--ghost { background: var(--rsd-bg); color: var(--rsd-ink); border-color: var(--rsd-line); }
.rsd-btn--ghost:hover { border-color: var(--rsd-brand); color: var(--rsd-brand); }
.rsd-btn--sm { padding: .45rem .8rem; font-size: .82rem; }
.rsd-btn[disabled] { opacity: .55; cursor: not-allowed; }
.rsd-btn__spin {
  width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff; border-radius: 50%; animation: rsd-spin .7s linear infinite;
}
.rsd-btn--ghost .rsd-btn__spin { border-color: rgba(31, 76, 238, .3); border-top-color: var(--rsd-brand); }
@keyframes rsd-spin { to { transform: rotate(360deg); } }

/* ---------- Tabs / segmented control ---------- */
.rsd-tabs {
  display: inline-flex; padding: 4px; gap: 2px; background: var(--rsd-bg-sunk);
  border-radius: 10px; margin-bottom: 1rem; flex-wrap: wrap;
}
.rsd-tab {
  font: inherit; font-size: .87rem; font-weight: 600; color: var(--rsd-muted);
  background: transparent; border: 0; border-radius: 7px; padding: .45rem .95rem;
  cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
}
.rsd-tab[aria-selected="true"] { background: var(--rsd-bg); color: var(--rsd-ink); box-shadow: 0 1px 3px rgba(13, 15, 48, .1); }
.rsd-tab:focus-visible { outline: 2px solid var(--rsd-brand); outline-offset: 1px; }

/* ---------- Score dial ---------- */
.rsd-score { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.rsd-dial { position: relative; width: 118px; height: 118px; flex: 0 0 auto; }
.rsd-dial svg { transform: rotate(-90deg); display: block; }
.rsd-dial__track { stroke: var(--rsd-line-soft); }
.rsd-dial__value { transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1); }
.rsd-dial__label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
}
.rsd-dial__num { font-size: 2rem; font-weight: 800; color: var(--rsd-ink); line-height: 1; }
.rsd-dial__grade { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rsd-muted); }
.rsd-score__text { flex: 1 1 260px; min-width: 0; }
.rsd-score__text h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.rsd-score__text p { color: var(--rsd-muted); font-size: .95rem; margin: 0; }

/* ---------- Stat tiles ---------- */
.rsd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.rsd-stat {
  background: var(--rsd-bg-soft); border: 1px solid var(--rsd-line-soft);
  border-radius: var(--rsd-radius-sm); padding: .85rem 1rem;
}
.rsd-stat__num { font-size: 1.5rem; font-weight: 800; color: var(--rsd-ink); line-height: 1.15; }
.rsd-stat__num--good { color: var(--rsd-good); }
.rsd-stat__num--warn { color: var(--rsd-warn); }
.rsd-stat__num--bad { color: var(--rsd-bad); }
.rsd-stat__label { font-size: .76rem; color: var(--rsd-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: .15rem; }

/* ---------- Check list ---------- */
.rsd-checks { list-style: none; margin: 0; padding: 0; }
.rsd-check {
  display: flex; gap: .8rem; padding: .9rem 0; border-top: 1px solid var(--rsd-line-soft);
  align-items: flex-start;
}
.rsd-check:first-child { border-top: 0; padding-top: 0; }
.rsd-icon {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; margin-top: 1px;
}
.rsd-icon--pass { background: var(--rsd-good); }
.rsd-icon--warn { background: var(--rsd-warn); }
.rsd-icon--fail, .rsd-icon--critical { background: var(--rsd-bad); }
.rsd-icon--info { background: var(--rsd-info); }
.rsd-check__body { min-width: 0; flex: 1; }
.rsd-check__title { font-weight: 700; color: var(--rsd-ink); font-size: .96rem; }
.rsd-check__detail { font-size: .9rem; color: var(--rsd-muted); margin-top: .18rem; }
.rsd-check__fix {
  font-size: .87rem; margin-top: .45rem; padding: .55rem .75rem;
  background: var(--rsd-brand-light); border-left: 3px solid var(--rsd-brand);
  border-radius: 0 6px 6px 0; color: var(--rsd-ink);
}
.rsd-check__fix strong { color: var(--rsd-brand-dark); }

/* ---------- Badges ---------- */
.rsd-badge {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700;
  padding: .22rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.rsd-badge--good { background: var(--rsd-good-bg); color: var(--rsd-good); }
.rsd-badge--warn { background: var(--rsd-warn-bg); color: var(--rsd-warn); }
.rsd-badge--bad { background: var(--rsd-bad-bg); color: var(--rsd-bad); }
.rsd-badge--info { background: var(--rsd-info-bg); color: var(--rsd-info); }
.rsd-badge--neutral { background: var(--rsd-bg-sunk); color: var(--rsd-muted); }

/* ---------- Meter ---------- */
.rsd-meter { height: 7px; border-radius: 999px; background: var(--rsd-line-soft); overflow: hidden; }
.rsd-meter__fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.rsd-meter__fill--good { background: var(--rsd-good); }
.rsd-meter__fill--warn { background: var(--rsd-warn); }
.rsd-meter__fill--bad { background: var(--rsd-bad); }
.rsd-counter { display: flex; justify-content: space-between; font-size: .8rem; color: var(--rsd-muted); margin-top: .3rem; }
.rsd-counter b { color: var(--rsd-ink); font-variant-numeric: tabular-nums; }
.rsd-counter b.is-over { color: var(--rsd-bad); }
.rsd-counter b.is-near { color: var(--rsd-warn); }

/* ---------- Tables ---------- */
.rsd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rsd-table { font-size: .9rem; min-width: 440px; }
.rsd-table th, .rsd-table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--rsd-line-soft); vertical-align: top; }
.rsd-table th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rsd-muted);
  font-weight: 700; background: var(--rsd-bg-soft); position: sticky; top: 0; white-space: nowrap;
}
.rsd-table tbody tr:hover { background: var(--rsd-bg-soft); }
.rsd-table td.rsd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsd-table .rsd-band-safe { color: var(--rsd-good); font-weight: 700; }
.rsd-table .rsd-band-watch { color: var(--rsd-warn); font-weight: 700; }
.rsd-table .rsd-band-risk { color: var(--rsd-bad); font-weight: 700; }
.rsd-vs-you { background: rgba(31, 76, 238, .06); }

/* ---------- Code blocks ---------- */
.rsd-code {
  position: relative; background: #0d0f30; color: #e8ebff; border-radius: var(--rsd-radius-sm);
  padding: 1rem 1.1rem; font-family: var(--rsd-mono); font-size: .82rem; line-height: 1.6;
  overflow-x: auto; white-space: pre; margin: 0; tab-size: 2;
}
.rsd-code--wrap { white-space: pre-wrap; word-break: break-word; }
.rsd-code-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--rsd-bg-sunk); border: 1px solid var(--rsd-line); border-bottom: 0;
  border-radius: var(--rsd-radius-sm) var(--rsd-radius-sm) 0 0; padding: .5rem .75rem;
  font-size: .78rem; font-weight: 700; color: var(--rsd-muted); text-transform: uppercase; letter-spacing: .05em;
}
.rsd-code-head + .rsd-code { border-radius: 0 0 var(--rsd-radius-sm) var(--rsd-radius-sm); }
.rsd-editor {
  width: 100%; min-height: 320px; font-family: var(--rsd-mono); font-size: .84rem; line-height: 1.6;
  border: 1px solid var(--rsd-line); border-top: 0; border-radius: 0 0 var(--rsd-radius-sm) var(--rsd-radius-sm);
  padding: 1rem; resize: vertical; color: var(--rsd-ink); background: var(--rsd-bg);
}
.rsd-editor:focus { outline: none; border-color: var(--rsd-brand); }

/* ---------- SERP preview ---------- */
.rsd-serp {
  background: #fff; border: 1px solid var(--rsd-line); border-radius: var(--rsd-radius-sm);
  padding: 1.25rem; font-family: arial, sans-serif;
}
.rsd-serp--mobile { max-width: 400px; }
.rsd-serp__crumbs { display: flex; align-items: center; gap: .55rem; margin-bottom: .2rem; }
.rsd-serp__favicon {
  width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 12px; font-weight: 700; color: #5f6368;
}
.rsd-serp__site { font-size: 14px; color: #202124; line-height: 1.3; }
.rsd-serp__url { font-size: 12px; color: #4d5156; line-height: 1.3; word-break: break-all; }
.rsd-serp__title {
  font-size: 20px; line-height: 1.3; color: #1a0dab; margin: .1rem 0 .15rem;
  font-weight: 400; cursor: pointer;
}
.rsd-serp--mobile .rsd-serp__title { font-size: 18px; }
.rsd-serp__title:hover { text-decoration: underline; }
.rsd-serp__desc { font-size: 14px; line-height: 1.58; color: #4d5156; }
.rsd-serp__desc b { font-weight: 700; color: #4d5156; }
.rsd-serp__meta { font-size: 14px; color: #70757a; }
.rsd-serp__stars { color: #fabb05; letter-spacing: -1px; }
.rsd-serp__sponsored { font-size: 12px; font-weight: 700; color: #202124; margin-bottom: .1rem; }
.rsd-serp__aio {
  border: 1px solid var(--rsd-line); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem;
  background: linear-gradient(180deg, #f8f9ff, #fff); font-size: 13px; color: #5f6368;
}

/* ---------- Alerts ---------- */
.rsd-alert {
  display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: var(--rsd-radius-sm);
  font-size: .9rem; border: 1px solid transparent; align-items: flex-start;
}
.rsd-alert--error { background: var(--rsd-bad-bg); border-color: #f5c6c2; color: #8c1d16; }
.rsd-alert--warn { background: var(--rsd-warn-bg); border-color: #f3d9ab; color: #7a4b00; }
.rsd-alert--info { background: var(--rsd-info-bg); border-color: #c9d5ff; color: #17318f; }
.rsd-alert--good { background: var(--rsd-good-bg); border-color: #b8e3c8; color: #0a6b3c; }
.rsd-alert strong { display: block; margin-bottom: .1rem; }

/* ---------- Loading ---------- */
.rsd-loading { text-align: center; padding: 2.5rem 1rem; }
.rsd-loading__bar {
  height: 6px; background: var(--rsd-line-soft); border-radius: 999px; overflow: hidden;
  max-width: 340px; margin: 1rem auto 0;
}
.rsd-loading__bar span {
  display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--rsd-brand);
  animation: rsd-slide 1.3s ease-in-out infinite;
}
@keyframes rsd-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.rsd-loading__step { font-size: .9rem; color: var(--rsd-muted); margin-top: .8rem; min-height: 1.4em; }
.rsd-skel { background: linear-gradient(90deg, #eef0f7 25%, #f7f8fc 50%, #eef0f7 75%); background-size: 200% 100%; animation: rsd-shimmer 1.4s infinite; border-radius: 6px; }
@keyframes rsd-shimmer { to { background-position: -200% 0; } }

/* ---------- Accordion ---------- */
.rsd-acc { border: 1px solid var(--rsd-line); border-radius: var(--rsd-radius-sm); overflow: hidden; }
.rsd-acc + .rsd-acc { margin-top: .6rem; }
.rsd-acc__btn {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left;
  font: inherit; font-weight: 700; color: var(--rsd-ink); background: var(--rsd-bg);
  border: 0; padding: .9rem 1rem; cursor: pointer; font-size: .95rem;
}
.rsd-acc__btn:hover { background: var(--rsd-bg-soft); }
.rsd-acc__chev { margin-left: auto; transition: transform .2s; color: var(--rsd-muted); flex: 0 0 auto; }
.rsd-acc[open] .rsd-acc__chev { transform: rotate(180deg); }
.rsd-acc__panel { padding: 0 1rem 1rem; border-top: 1px solid var(--rsd-line-soft); }

/* ---------- CTA ---------- */
.rsd-cta {
  background: linear-gradient(135deg, #0d0f30 0%, #1f2a6b 55%, #1f4cee 100%);
  color: #fff; border-radius: var(--rsd-radius); padding: 1.75rem;
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem;
}
.rsd-cta h3 { color: #fff; font-size: 1.3rem; margin-bottom: .35rem; }
.rsd-cta p { color: rgba(255, 255, 255, .82); margin: 0; font-size: .95rem; }
.rsd-cta__text { flex: 1 1 320px; min-width: 0; }
.rsd-cta__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.rsd-cta .rsd-btn--primary { background: #fff; color: var(--rsd-ink); }
.rsd-cta .rsd-btn--primary:hover { background: #eef2ff; color: var(--rsd-brand-dark); }
.rsd-cta .rsd-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.rsd-cta .rsd-btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .1); }

/* ---------- Email capture ---------- */
.rsd-capture {
  border: 1px dashed var(--rsd-line); border-radius: var(--rsd-radius-sm);
  padding: 1rem 1.15rem; background: var(--rsd-bg-soft); margin-top: 1rem;
}
.rsd-capture__title { font-weight: 700; color: var(--rsd-ink); font-size: .95rem; margin-bottom: .15rem; }
.rsd-capture__sub { font-size: .85rem; color: var(--rsd-muted); margin-bottom: .7rem; }

/* ---------- Related tools ---------- */
.rsd-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .75rem; }
.rsd-related__item {
  display: block; padding: .85rem 1rem; border: 1px solid var(--rsd-line);
  border-radius: var(--rsd-radius-sm); text-decoration: none; background: var(--rsd-bg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rsd-related__item, .rsd-related__item:hover { text-decoration: none; }
.rsd-related__item:hover { border-color: var(--rsd-brand); box-shadow: var(--rsd-shadow); transform: translateY(-1px); }
.rsd-related__name { font-weight: 700; color: var(--rsd-ink); font-size: .92rem; display: block; }
.rsd-related__desc { font-size: .82rem; color: var(--rsd-muted); margin-top: .1rem; display: block; }

/* ---------- Misc ---------- */
.rsd-mono { font-family: var(--rsd-mono); font-size: .85em; }
.rsd-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
.rsd-muted { color: var(--rsd-muted); }
.rsd-small { font-size: .85rem; }
.rsd-xs { font-size: .78rem; }
.rsd-center { text-align: center; }
.rsd-nowrap { white-space: nowrap; }
.rsd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rsd-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--rsd-ink); color: #fff; padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; z-index: 99999; opacity: 0;
  transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: var(--rsd-shadow-lg);
}
.rsd-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .rsd-card { padding: 1.15rem; }
  .rsd-card__body, .rsd-card__head { padding: 1.15rem; }
  .rsd-cta { padding: 1.35rem; }
  .rsd-dial { width: 96px; height: 96px; }
  .rsd-dial__num { font-size: 1.6rem; }
}

@media print {
  .rsd-cta, .rsd-capture, .rsd-brandcta, .rsd-modal, .rsd-btn, .rsd-tabs { display: none !important; }
  .rsd-card { box-shadow: none; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .rsd * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Page chrome for /free-tools/* — hero, benefit cards, step cards, FAQ.
   Inherits the host theme's fonts and colors, so it reads as native Avada.
   ========================================================================== */

.rsd-page {
  --rsd-measure: 1100px; color: var(--rsd-body);
  /* Centre the whole column here rather than on each child: the type rules
     below use the `margin` shorthand, which silently resets a child's auto
     side-margins and left-aligned every section under the hero. */
  max-width: var(--rsd-measure); margin-left: auto !important; margin-right: auto !important;
}
.rsd-page > * { max-width: var(--rsd-measure); margin-left: auto; margin-right: auto; }
.rsd-page p { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.1em; }
.rsd-page h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.4rem 0 .9rem; color: var(--rsd-ink);
  font-family: var(--rsd-heading-font); font-weight: var(--rsd-heading-weight); letter-spacing: -.015em;
}
.rsd-page h3 {
  font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: var(--rsd-ink);
  font-family: var(--rsd-heading-font); font-weight: var(--rsd-heading-weight);
}
.rsd-page ul, .rsd-page ol { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.4em; padding-left: 1.3em; }
.rsd-page li { margin: .45em 0; }
.rsd-page code {
  background: var(--rsd-bg-sunk); padding: .1em .4em; border-radius: 4px;
  font-family: var(--rsd-mono); font-size: .9em; color: var(--rsd-ink);
}

/* Hero */
.rsd-hero { text-align: center; padding: .5rem 0 1.75rem; }
.rsd-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12; margin: 0 0 .6rem; color: var(--rsd-ink);
  font-family: var(--rsd-heading-font); font-weight: var(--rsd-heading-weight); letter-spacing: -.02em;
}
.rsd-hero p { font-size: 1.15rem; color: var(--rsd-muted); max-width: 46em; margin: 0 auto; }
.rsd-hero__pills { display: flex; gap: .45rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
.rsd-pill {
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; background: var(--rsd-brand-light); color: var(--rsd-brand-dark);
}

/* Benefit + step cards */
.rsd-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.25rem 0 1.75rem; }
.rsd-cards > * { max-width: none; }
.rsd-cardlet {
  background: var(--rsd-bg); border: 1px solid var(--rsd-line); border-radius: var(--rsd-radius);
  padding: 1.25rem 1.35rem; box-shadow: var(--rsd-shadow);
}
.rsd-cardlet h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.rsd-cardlet p { margin: 0; font-size: .95rem; color: var(--rsd-muted); line-height: 1.6; }
.rsd-cardlet__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--rsd-brand); color: #fff;
  font-size: .8rem; font-weight: 800; margin-bottom: .6rem;
}

/* Page-level CTA band */
.rsd-band {
  background: linear-gradient(135deg, #0d0f30 0%, #1f2a6b 55%, #1f4cee 100%);
  color: #fff; border-radius: var(--rsd-radius); padding: 2rem 2.25rem; margin: 2.5rem auto;
  text-align: center;
}
.rsd-band h2 { color: #fff; margin: 0 0 .5rem; }
.rsd-band p { color: rgba(255,255,255,.85); max-width: 44em; margin: 0 auto 1.25rem; }
.rsd-band .rsd-btn--primary { background: #fff; color: var(--rsd-ink); }
.rsd-band .rsd-btn--primary:hover { background: #eef2ff; color: var(--rsd-brand-dark); }
.rsd-band .rsd-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.rsd-band .rsd-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.rsd-band__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* FAQ */
.rsd-faq { margin: 1rem 0 2rem; }
.rsd-faq details {
  border: 1px solid var(--rsd-line); border-radius: var(--rsd-radius-sm);
  padding: 0; margin-bottom: .6rem; background: var(--rsd-bg);
}
.rsd-faq summary {
  cursor: pointer; padding: 1rem 1.15rem; font-weight: 700; color: var(--rsd-ink);
  font-size: 1.02rem; list-style: none; display: flex; align-items: center; gap: .75rem;
  font-family: var(--rsd-heading-font);
}
.rsd-faq summary::-webkit-details-marker { display: none; }
.rsd-faq summary::after {
  content: '+'; margin-left: auto; font-size: 1.3rem; color: var(--rsd-brand);
  font-weight: 400; line-height: 1; flex: 0 0 auto;
}
.rsd-faq details[open] summary::after { content: '−'; }
.rsd-faq details > p { padding: 0 1.15rem 1.1rem; margin: 0; color: var(--rsd-body); }

/* Tool grid on the hub page */
.rsd-toolgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 1.25rem 0 2rem; }
.rsd-toolgrid > * { max-width: none; }
.rsd-toolcard {
  background: var(--rsd-bg); border: 1px solid var(--rsd-line);
  border-radius: var(--rsd-radius); padding: 1.35rem;
  box-shadow: var(--rsd-shadow); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.rsd-toolcard:hover { border-color: var(--rsd-brand); transform: translateY(-2px); box-shadow: var(--rsd-shadow-lg); }
.rsd-toolcard h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.rsd-toolcard h3 a { color: var(--rsd-ink); text-decoration: none; }
.rsd-toolcard:hover h3 a { color: var(--rsd-brand); }
.rsd-toolcard p { margin: 0; font-size: .93rem; color: var(--rsd-muted); line-height: 1.6; }
.rsd-toolcard p.rsd-toolcard__go { margin-top: .7rem; }
.rsd-toolcard p.rsd-toolcard__go a { font-size: .85rem; font-weight: 700; color: var(--rsd-brand); text-decoration: none; }
.rsd-toolcard p.rsd-toolcard__go a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .rsd-band { padding: 1.5rem 1.25rem; }
  .rsd-hero { padding-bottom: 1.25rem; }
}

/* ==========================================================================
   Host-theme overrides. Avada styles content links with high specificity, so
   card and button links need to win explicitly.
   ========================================================================== */
.rsd .rsd-toolcard h3 a,
.rsd .rsd-toolcard p.rsd-toolcard__go a,
.rsd .rsd-btn,
.rsd .rsd-related__item,
.rsd-page .rsd-toolcard h3 a,
.rsd-page .rsd-toolcard p.rsd-toolcard__go a,
.rsd-page .rsd-btn { text-decoration: none !important; border-bottom: 0 !important; }

.rsd .rsd-toolcard h3 a:hover,
.rsd-page .rsd-toolcard p.rsd-toolcard__go a:hover { text-decoration: underline !important; }

/* Avada resets list styling inside content areas; keep ours readable. */
.rsd-page ul { list-style: disc; }
.rsd-page ol { list-style: decimal; }
.rsd-page .rsd-toolgrid, .rsd-page .rsd-cards { list-style: none; }

/* The theme's content wrapper can impose its own max-width; ours should win. */
.rsd-page > .rsd-toolgrid, .rsd-page > .rsd-cards { max-width: var(--rsd-measure); }

/* ==========================================================================
   Full-screen run overlay — the staged "we're working" state shown between
   submitting a URL and rendering the report.
   ========================================================================== */

.rsd-run {
  /* top is set at runtime to sit below the site header — see topChromeOffset() */
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem; overflow-y: auto;
  background:
    radial-gradient(120% 90% at 50% 0%, #1b2560 0%, #0d0f30 45%, #07081c 100%);
  color: #fff; opacity: 0; animation: rsd-run-in .45s ease forwards;
  font-family: var(--rsd-font, inherit);
}
@keyframes rsd-run-in { to { opacity: 1; } }
.rsd-run.is-closing { animation: rsd-run-out .3s ease forwards; }
@keyframes rsd-run-out { to { opacity: 0; } }

.rsd-run::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 12%, rgba(31,76,238,.35), transparent 70%);
  animation: rsd-run-glow 5s ease-in-out infinite;
}
@keyframes rsd-run-glow { 0%,100% { opacity:.55 } 50% { opacity:1 } }

.rsd-run__inner { position: relative; text-align: center; max-width: 640px; width: 100%; }

.rsd-run__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 1.1rem;
}
.rsd-run__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rsd-brand, #1f4cee);
  box-shadow: 0 0 0 0 rgba(31,76,238,.7); animation: rsd-pulse 1.6s ease-out infinite;
}
@keyframes rsd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,76,238,.65); }
  70%  { box-shadow: 0 0 0 12px rgba(31,76,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,76,238,0); }
}

.rsd-run__stage {
  font-family: var(--rsd-heading-font, inherit);
  font-size: clamp(1.9rem, 5.2vw, 3.1rem); font-weight: 700; font-style: italic;
  line-height: 1.14; letter-spacing: -.02em; color: #fff; margin: 0 0 1.9rem;
  min-height: 1.2em;
}
.rsd-run__stage span { display: inline-block; animation: rsd-stage-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes rsd-stage-in { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.rsd-run__stage b { color: var(--rsd-brand, #1f4cee); font-weight: 700; }

/* Skeleton card */
.rsd-run__card {
  width: min(340px, 88%); margin: 0 auto 1.9rem; padding: 1.1rem 1.15rem;
  border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
  animation: rsd-card-float 6s ease-in-out infinite;
}
@keyframes rsd-card-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

.rsd-run__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.rsd-run__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--rsd-brand, #1f4cee); flex: 0 0 auto; }
.rsd-run__row { display: flex; align-items: center; gap: .7rem; margin-top: .75rem; }
.rsd-run__ico {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45); transition: background .4s, color .4s, box-shadow .4s;
}
.rsd-run__ico svg { width: 13px; height: 13px; }
.rsd-run__ico.is-active {
  background: var(--rsd-brand, #1f4cee); color: #fff;
  box-shadow: 0 0 0 4px rgba(31,76,238,.22);
}
.rsd-run__lines { flex: 1; min-width: 0; }
.rsd-run__bar {
  height: 7px; border-radius: 999px; background: rgba(255,255,255,.1);
  overflow: hidden; position: relative;
}
.rsd-run__bar + .rsd-run__bar { margin-top: .38rem; }
.rsd-run__bar--accent { background: rgba(31,76,238,.35); }
.rsd-run__bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%); animation: rsd-sweep 1.9s ease-in-out infinite;
}
.rsd-run__bar:nth-child(2)::after { animation-delay: .25s; }
@keyframes rsd-sweep { to { transform: translateX(100%); } }

.rsd-run__note {
  font-style: italic; font-size: .92rem; color: rgba(255,255,255,.55); margin: 0 0 1.9rem;
}

/* Inline email capture */
.rsd-run__capture-label { font-size: .93rem; color: rgba(255,255,255,.8); margin-bottom: .7rem; }
.rsd-run__form {
  display: flex; align-items: center; gap: .5rem; margin: 0 auto; max-width: 460px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .35rem .35rem .35rem .9rem;
}
.rsd-run__form input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: #fff; font: inherit; font-size: .95rem; padding: .55rem 0;
}
.rsd-run__form input::placeholder { color: rgba(255,255,255,.42); }
.rsd-run__form button {
  flex: 0 0 auto; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--rsd-brand, #1f4cee); border: 0;
  border-radius: 9px; padding: .6rem 1.05rem; transition: background .15s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.rsd-run__form button:hover { background: var(--rsd-brand-dark, #1539b8); }
.rsd-run__form button[disabled] { opacity: .6; cursor: not-allowed; }
.rsd-run__msg { font-size: .85rem; color: rgba(255,255,255,.65); margin-top: .7rem; min-height: 1.2em; }

.rsd-run__hide {
  display: inline-block; margin-top: 1.6rem; font-size: .84rem;
  color: rgba(255,255,255,.45); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; font: inherit;
}
.rsd-run__hide:hover { color: rgba(255,255,255,.8); }

.rsd-run__progress {
  height: 3px; border-radius: 999px; background: rgba(255,255,255,.1);
  max-width: 340px; margin: 0 auto 1.6rem; overflow: hidden;
}
.rsd-run__progress i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rsd-brand, #1f4cee), #63a4ff);
  transition: width .8s cubic-bezier(.22,1,.36,1);
}

body.rsd-run-open { overflow: hidden; }

/* ==========================================================================
   Report chrome — bordered results card, eyebrow labels, sticky CTA
   ========================================================================== */

.rsd-report {
  border: 1.5px solid var(--rsd-brand, #1f4cee);
  border-radius: 18px; padding: 1.5rem; margin-bottom: 1.5rem;
  background: var(--rsd-bg, #fff);
  animation: rsd-report-in .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rsd-report-in { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }

.rsd-report__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.rsd-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rsd-muted); margin-bottom: .4rem;
}
.rsd-eyebrow::before {
  content: ''; width: 16px; height: 2px; border-radius: 2px;
  background: var(--rsd-brand); flex: 0 0 auto;
}
.rsd-eyebrow--dot::before { width: 7px; height: 7px; border-radius: 50%; background: var(--rsd-good); }
.rsd-report__title {
  font-size: clamp(1.4rem, 3.2vw, 2rem); margin: 0; color: var(--rsd-ink);
  font-family: var(--rsd-heading-font); font-weight: var(--rsd-heading-weight);
  letter-spacing: -.02em; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.rsd-report__fav {
  width: 30px; height: 30px; border-radius: 8px; background: var(--rsd-bg-sunk);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: var(--rsd-muted); flex: 0 0 auto;
}

.rsd-section {
  border: 1px solid var(--rsd-line); border-radius: var(--rsd-radius);
  padding: 1.35rem; margin-bottom: 1rem; background: var(--rsd-bg);
}
.rsd-section > h3 {
  font-size: 1.3rem; margin: 0 0 1rem; color: var(--rsd-ink);
  font-family: var(--rsd-heading-font); font-weight: var(--rsd-heading-weight);
}
.rsd-scoregrid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rsd-scoregrid { grid-template-columns: minmax(0,.9fr) minmax(0,1.6fr); } }
.rsd-scorebox, .rsd-meanbox {
  border: 1px solid var(--rsd-line-soft); border-radius: var(--rsd-radius-sm);
  padding: 1.2rem 1.25rem; background: var(--rsd-bg-soft);
}
.rsd-scorebox__num {
  font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 800; line-height: 1;
  color: var(--rsd-ink); font-family: var(--rsd-heading-font); letter-spacing: -.03em;
}
.rsd-scorebox__verdict { font-size: .9rem; font-weight: 600; margin-top: .8rem; }
.rsd-meanbox p { font-size: .95rem; line-height: 1.65; margin: 0; }

/* ==========================================================================
   Closing brand CTA on a report (replaces the old skinny sticky bar)
   ========================================================================== */
.rsd-brandcta {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 2rem 0 0; padding: 2.75rem 1.75rem 2.5rem;
  border-radius: 22px; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #1b2456 0%, #101334 45%, #0a0c26 100%);
  box-shadow: 0 30px 60px -30px rgba(13, 15, 48, .75);
}
.rsd-brandcta__glow {
  position: absolute; inset: -40% 20% auto 20%; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgba(31, 76, 238, .55), transparent 72%);
  filter: blur(8px); pointer-events: none;
}
.rsd-brandcta__inner { position: relative; max-width: 46em; margin: 0 auto; }
.rsd-brandcta__pill {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(120, 155, 255, .45); background: rgba(31, 76, 238, .12);
  color: #b9c8ff !important; font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.rsd-brandcta__title {
  margin: 1.2rem 0 0 !important; color: #fff !important;
  font-family: var(--rsd-heading-font); font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.03em;
}
.rsd-brandcta__title span { display: block; color: #5b86ff !important; }
.rsd-brandcta__ticks {
  list-style: none !important; margin: 1.4rem 0 0 !important; padding: 0 !important;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem;
}
.rsd-brandcta__ticks li {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 !important;
  color: rgba(255, 255, 255, .88) !important; font-size: .96rem;
}
.rsd-brandcta__tick { color: #5b86ff; font-weight: 900; }
.rsd-brandcta__btn {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.9rem;
  padding: 1rem 2.1rem; border-radius: 999px;
  background: linear-gradient(180deg, #2f5cff, #1230c4);
  color: #fff !important; font-weight: 800; font-size: 1.05rem;
  text-decoration: none !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(120, 155, 255, .35), 0 16px 38px -12px rgba(47, 92, 255, .85);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.rsd-brandcta__btn:hover {
  color: #fff !important; transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(150, 180, 255, .5), 0 22px 46px -12px rgba(47, 92, 255, .95);
}
.rsd-brandcta__kicker {
  margin: 1.5rem auto 0 !important; max-width: 40em;
  font-size: .92rem !important; line-height: 1.6 !important;
  color: rgba(255, 255, 255, .68) !important;
}
.rsd-brandcta__kicker strong { color: rgba(255, 255, 255, .92) !important; }
.rsd-brandcta__alt {
  display: inline-block; margin-top: .85rem; font-size: .88rem; font-weight: 700;
  color: #9db3ff !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(157, 179, 255, .4) !important;
}
.rsd-brandcta__alt:hover { color: #fff !important; border-bottom-color: #fff !important; }

/* ==========================================================================
   Share-this-report modal
   ========================================================================== */
body.rsd-modal-open { overflow: hidden; }
.rsd-modal {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(9, 11, 33, .62); backdrop-filter: blur(3px);
  animation: rsd-fade .18s ease both;
}
@keyframes rsd-fade { from { opacity: 0; } to { opacity: 1; } }
.rsd-modal__box {
  position: relative; width: min(30rem, 100%);
  background: #fff; border-radius: 18px; padding: 1.9rem 1.75rem 1.75rem;
  box-shadow: 0 40px 90px -30px rgba(13, 15, 48, .7);
  animation: rsd-pop .22s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rsd-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.rsd-modal__x {
  position: absolute; top: .7rem; right: .8rem; width: 32px; height: 32px;
  border: 0; background: transparent; border-radius: 50%; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--rsd-muted);
}
.rsd-modal__x:hover { background: var(--rsd-bg-sunk); color: var(--rsd-ink); }
.rsd-modal__title {
  margin: 0 0 .4rem !important; font-size: 1.35rem; color: var(--rsd-ink) !important;
  font-family: var(--rsd-heading-font); font-weight: var(--rsd-heading-weight); letter-spacing: -.02em;
}
.rsd-modal__sub { margin: 0 0 1.1rem !important; font-size: .92rem !important; line-height: 1.6 !important; color: var(--rsd-muted) !important; }
.rsd-modal__form { display: flex; flex-direction: column; gap: .6rem; }
.rsd-modal__form .rsd-field { width: 100%; }
.rsd-modal__form .rsd-btn { width: 100%; justify-content: center; }
.rsd-modal__msg { font-size: .85rem; margin-top: .6rem; min-height: 1.1em; }
.rsd-modal__msg.is-error { color: var(--rsd-bad); }
.rsd-modal__msg.is-ok { color: var(--rsd-good); }
.rsd-modal__fine {
  margin: .9rem 0 0 !important; font-size: .78rem !important; line-height: 1.55 !important;
  color: var(--rsd-muted) !important;
}

.rsd-btn--share { flex: 0 0 auto; }

/* Share bar pinned above a tool's results */
.rsd-sharebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem;
}
.rsd-sharebar__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rsd-muted);
}

@media (max-width: 640px) {
  .rsd-brandcta { padding: 2rem 1.15rem 1.9rem; border-radius: 18px; }
  .rsd-brandcta__ticks { gap: .45rem 1rem; }
  .rsd-brandcta__btn { width: 100%; justify-content: center; padding: .95rem 1.2rem; font-size: 1rem; }
  .rsd-report { padding: 1.1rem; }
}

/* Guide copy hidden while a report is on screen (see collapseGuide()). */
.rsd-guide-hidden { display: none !important; }
.rsd-guide-restore { text-align: center; margin: 2rem auto 0; }

/* ==========================================================================
   Host-theme hardening for /free-tools/* pages.
   Avada styles headings and boxes with high specificity, and gives page content
   no bottom spacing, so the last section collides with the footer.
   ========================================================================== */

/* Breathing room before the site footer. */
.rsd-page { padding-bottom: 3.5rem; }
.rsd-page > *:last-child { margin-bottom: 0; }

/* Every card keeps its outline, whatever the theme does to div borders. */
.rsd-page .rsd-toolcard,
.rsd-page .rsd-cardlet,
.rsd .rsd-toolcard,
.rsd .rsd-cardlet,
.rsd .rsd-card,
.rsd .rsd-section,
.rsd .rsd-scorebox,
.rsd .rsd-meanbox,
.rsd .rsd-faq details {
  border: 1px solid var(--rsd-line) !important;
  border-radius: var(--rsd-radius);
  background-clip: padding-box;
}
.rsd .rsd-scorebox, .rsd .rsd-meanbox { border-color: var(--rsd-line-soft) !important; }
.rsd .rsd-report { border: 1.5px solid var(--rsd-brand) !important; }

/* Card grids must not clip their own shadows or hover lift. */
.rsd-page .rsd-toolgrid,
.rsd-page .rsd-cards { overflow: visible; padding-bottom: 2px; }

/* Keep light-on-dark blocks readable — Avada colors h2/h3 globally. */
.rsd .rsd-band h2, .rsd .rsd-band p { color: #fff !important; }
.rsd .rsd-band p { color: rgba(255, 255, 255, .85) !important; }

/* ==========================================================================
   Mobile

   Phones are most of the traffic these tools will get, so this is not a
   shrink-to-fit afterthought: tap targets clear 44px, nothing sits below
   12.5px, every two-up row stacks, and the modal becomes a bottom sheet.
   ========================================================================== */

/* A long URL or token must never widen the page. */
.rsd, .rsd-page, .rsd-app { overflow-wrap: anywhere; }
.rsd table { overflow-wrap: normal; }

@media (max-width: 700px) {
  /* --- tap targets --- */
  .rsd .rsd-btn { min-height: 46px; padding: .7rem 1.15rem; }
  .rsd .rsd-btn--sm { min-height: 44px; padding: .6rem 1rem; font-size: .88rem; }
  .rsd .rsd-tab { min-height: 44px; padding: .55rem 1rem; font-size: .9rem; }
  .rsd .rsd-faq summary { min-height: 48px; display: flex; align-items: center; }
  .rsd-modal__x { width: 44px; height: 44px; }

  /* --- nothing unreadably small --- */
  .rsd .rsd-pill { font-size: .82rem; }
  /* Category badges sit inline inside check titles. At phone width a long one
     ("Trust & Authority Signals") is wider than the column it lives in, and
     nowrap made it push the whole row out. Let it wrap onto a second line. */
  .rsd .rsd-badge { font-size: .8rem; white-space: normal; }
  .rsd .rsd-xs, .rsd .rsd-small { font-size: .85rem; }
  .rsd .rsd-icon { font-size: .8rem; width: 1.35rem; height: 1.35rem; }
  .rsd .rsd-hint, .rsd .rsd-stat__label { font-size: .8rem; }

  /* --- stacking --- */
  .rsd .rsd-inline-form { flex-direction: column; align-items: stretch; }
  .rsd .rsd-inline-form .rsd-field { flex: 1 1 auto; width: 100%; }
  .rsd .rsd-inline-form .rsd-btn { width: 100%; justify-content: center; }
  .rsd .rsd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .rsd .rsd-score { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .rsd .rsd-report__top { flex-direction: column; align-items: stretch; gap: .8rem; }
  .rsd .rsd-report__top .rsd-btn--share { width: 100%; justify-content: center; }
  .rsd .rsd-sharebar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .rsd .rsd-sharebar .rsd-btn--share { width: 100%; justify-content: center; }
  .rsd .rsd-row { flex-wrap: wrap; }
  .rsd .rsd-cta__actions .rsd-btn, .rsd .rsd-band__actions .rsd-btn { width: 100%; justify-content: center; }

  /* --- headings and rhythm --- */
  .rsd-page h2 { font-size: 1.55rem; }
  .rsd-page h3 { font-size: 1.15rem; }
  .rsd-page p, .rsd-page ul, .rsd-page ol { font-size: 1rem; }
  .rsd-page { padding-bottom: 2.5rem; }
  .rsd-hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.6rem); }

  /* --- scrollable tables get a visible affordance --- */
  .rsd-table-wrap {
    background:
      linear-gradient(90deg, var(--rsd-bg) 30%, rgba(255, 255, 255, 0)) left / 34px 100% no-repeat,
      linear-gradient(270deg, var(--rsd-bg) 30%, rgba(255, 255, 255, 0)) right / 34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(13, 15, 48, .16), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(13, 15, 48, .16), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* --- the run overlay --- */
  .rsd-run__stage { font-size: clamp(1.3rem, 6.5vw, 1.9rem); }
  .rsd-run__card { display: none; }
  .rsd-run__form { flex-direction: column; align-items: stretch; }
  .rsd-run__form .rsd-btn { width: 100%; justify-content: center; }
}

/* The share modal reads better as a bottom sheet on a phone. */
@media (max-width: 560px) {
  .rsd-modal { align-items: flex-end; padding: 0; }
  .rsd-modal__box {
    width: 100%; border-radius: 20px 20px 0 0;
    padding: 1.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
    max-height: 92vh; overflow-y: auto;
  }
  @keyframes rsd-pop { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 420px) {
  .rsd .rsd-stats { grid-template-columns: 1fr 1fr; }
  .rsd-brandcta__ticks { flex-direction: column; align-items: center; gap: .5rem; }
  .rsd-scorebox__num { font-size: 2.4rem; }
}

/* ==========================================================================
   Phone type scale — overriding the site's blanket heading rule

   Customizer -> Additional CSS carries

     @media only screen and (max-width: 425px) {
       h1, h2, h3, h4, h5 { font-size: 33px !important; line-height: 36px !important; }
     }

   which flattens every heading on the site to one size on phones: card titles
   end up as large as the page title, and the footer column headings balloon
   from 16px to 33px. Until that rule is scoped at source, these have to answer
   it in kind — hence the !important, which is deliberate here and nowhere else.
   ========================================================================== */

@media only screen and (max-width: 425px) {
  .rsd h1, .rsd h2, .rsd h3, .rsd h4, .rsd h5,
  .rsd-page h1, .rsd-page h2, .rsd-page h3, .rsd-page h4, .rsd-page h5 {
    line-height: 1.3 !important;
  }

  .rsd-hero h1, .rsd-page h1 { font-size: 1.95rem !important; line-height: 1.14 !important; }
  .rsd-page h2, .rsd .rsd-band h2 { font-size: 1.5rem !important; }
  .rsd-page h4, .rsd-page h5 { font-size: 1.05rem !important; }

  .rsd-page h3,
  .rsd .rsd-cardlet h3,
  .rsd .rsd-toolcard h3,
  .rsd .rsd-card__head h3,
  .rsd .rsd-score__text h3 { font-size: 1.12rem !important; }

  .rsd .rsd-section > h3 { font-size: 1.2rem !important; }
  .rsd .rsd-report__title { font-size: 1.45rem !important; line-height: 1.2 !important; }
  .rsd .rsd-brandcta__title { font-size: 2rem !important; line-height: 1.08 !important; }
  .rsd-modal__title { font-size: 1.25rem !important; }
}

/* ==========================================================================
   Form field colour

   Avada styles form fields for its own light-on-dark comment forms
   (--form_text_color is #e2e2e2). Inside the page that loses to our own rules,
   but the share modal is appended to <body>, outside the page wrapper, where
   Avada's selector wins — typed text came out near-white on white. Pin the
   colour with enough weight that no host theme can take it back, and pin
   -webkit-text-fill-color too, which overrides `color` in WebKit when set.
   ========================================================================== */

.rsd input.rsd-input, .rsd textarea.rsd-textarea, .rsd select.rsd-select,
.rsd-page input.rsd-input, .rsd-page textarea.rsd-textarea, .rsd-page select.rsd-select,
.rsd-modal input.rsd-input, .rsd-modal textarea.rsd-textarea {
  color: var(--rsd-ink) !important;
  -webkit-text-fill-color: var(--rsd-ink) !important;
  background-color: var(--rsd-bg) !important;
  opacity: 1 !important;
}

.rsd input.rsd-input::placeholder, .rsd textarea.rsd-textarea::placeholder,
.rsd-page input.rsd-input::placeholder, .rsd-page textarea.rsd-textarea::placeholder,
.rsd-modal input.rsd-input::placeholder {
  color: #8b90ad !important;
  -webkit-text-fill-color: #8b90ad !important;
  opacity: 1 !important;
}

/* Chrome's autofill repaints the field; keep it legible. */
.rsd input.rsd-input:-webkit-autofill,
.rsd-modal input.rsd-input:-webkit-autofill {
  -webkit-text-fill-color: var(--rsd-ink) !important;
  box-shadow: 0 0 0 40px var(--rsd-bg) inset !important;
}

/* ==========================================================================
   Hero block — headline, promise and input as one object

   The title, the sub-line and the URL field are one thought: "here is what
   this does, now use it". Presenting them as three unrelated things stacked
   on white makes the visitor hunt for where to start. Wrapping them in one
   panel, with the input card sitting white on a tinted ground, gives the top
   of the page a single obvious focal point.
   ========================================================================== */

.rsd-page .rsd-heroblock {
  position: relative;
  border: 1px solid var(--rsd-line);
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(31, 76, 238, .05), rgba(31, 76, 238, 0) 60%),
    linear-gradient(180deg, var(--rsd-bg-soft) 0%, var(--rsd-bg) 62%);
  padding: 2.75rem 2.25rem 2.25rem;
  margin: 0 auto 2.75rem;
  box-shadow: 0 1px 2px rgba(13, 15, 48, .04), 0 22px 44px -30px rgba(13, 15, 48, .28);
}

/* The hero no longer needs its own bottom spacing — the panel supplies it. */
.rsd-page .rsd-heroblock .rsd-hero { padding-bottom: 1.6rem; margin-bottom: 0; }
.rsd-page .rsd-heroblock .rsd-hero h1 { margin-bottom: .5rem; }

/* The input card floats white on the tinted ground rather than nesting one
   outline directly inside another. */
.rsd-page .rsd-heroblock .rsd-app .rsd-card {
  background: var(--rsd-bg);
  border: 1px solid var(--rsd-line);
  box-shadow: 0 1px 2px rgba(13, 15, 48, .05), 0 14px 30px -22px rgba(13, 15, 48, .3);
}
.rsd-page .rsd-heroblock .rsd-app { margin: 0; }
.rsd-page .rsd-heroblock > *:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .rsd-page .rsd-heroblock {
    padding: 1.9rem 1.1rem 1.4rem;
    border-radius: 18px;
    margin-bottom: 2rem;
  }
  .rsd-page .rsd-heroblock .rsd-hero { padding-bottom: 1.2rem; }
  /* Two nested cards at phone width is too much chrome. The input card goes
     full-bleed and keeps only its top edge, which reads as a divider between
     "what this is" and "use it"; the panel's own rounding clips the bottom. */
  .rsd-page .rsd-heroblock { padding-bottom: 0; overflow: hidden; }
  /* Direct child only: the input card. Report cards live inside .rsd-results
     and were being dragged 17.6px wider than their column on both sides. */
  .rsd-page .rsd-heroblock .rsd-app > .rsd-card {
    border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0;
    margin-left: -1.1rem; margin-right: -1.1rem; margin-bottom: 0;
    padding-bottom: 1.6rem;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Once a report is on screen, the hero panel stands down.

   The panel frames "headline + promise + input". The results render inside the
   same mount element, so without this the whole report ends up boxed in a
   tinted container with its own cards nested inside that border — heavy on
   desktop and cramped on a phone. When .rsd-results has content, the framing
   is dropped and the report gets the full column.

   :has() is the mechanism; where it is unsupported the panel simply stays,
   which is the previous behaviour rather than a broken one.
   -------------------------------------------------------------------------- */

.rsd-page .rsd-heroblock:has(.rsd-results > *) {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  margin-bottom: 2rem;
}
.rsd-page .rsd-heroblock:has(.rsd-results > *) .rsd-hero { padding-bottom: 1.25rem; }

/* …and the input card goes back to being an ordinary card. */
.rsd-page .rsd-heroblock:has(.rsd-results > *) .rsd-app > .rsd-card {
  border: 1px solid var(--rsd-line);
  border-radius: var(--rsd-radius);
  margin-left: 0;
  margin-right: 0;
  box-shadow: var(--rsd-shadow);
}

/* --------------------------------------------------------------------------
   CTA band — links and button edges on the dark ground

   The band body now carries internal links to the service pages. Those were
   inheriting the default brand blue, which on a navy-to-blue gradient is close
   to invisible. Underlined white is the only treatment that stays legible
   across the whole gradient. The two buttons also get a solid white edge
   rather than a half-transparent one, so both read as deliberate at any point
   on the background.
   -------------------------------------------------------------------------- */

.rsd .rsd-band a:not(.rsd-btn),
.rsd-page .rsd-band a:not(.rsd-btn) {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, .55);
  text-underline-offset: 3px;
  border-bottom: 0 !important;
  transition: text-decoration-color .15s;
}
.rsd .rsd-band a:not(.rsd-btn):hover,
.rsd .rsd-band a:not(.rsd-btn):focus-visible,
.rsd-page .rsd-band a:not(.rsd-btn):hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
}

.rsd .rsd-band .rsd-btn,
.rsd-page .rsd-band .rsd-btn {
  border: 1.5px solid #ffffff !important;
}
.rsd .rsd-band .rsd-btn--ghost,
.rsd-page .rsd-band .rsd-btn--ghost {
  background: transparent;
  color: #ffffff !important;
}
.rsd .rsd-band .rsd-btn--ghost:hover,
.rsd-page .rsd-band .rsd-btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  color: #ffffff !important;
}
.rsd .rsd-band .rsd-btn--primary,
.rsd-page .rsd-band .rsd-btn--primary {
  background: #ffffff;
  color: var(--rsd-ink) !important;
}
.rsd .rsd-band .rsd-btn--primary:hover,
.rsd-page .rsd-band .rsd-btn--primary:hover {
  background: #eef2ff;
  color: var(--rsd-brand-dark) !important;
}