/* ==========================================================================
   RemoveMyMugshot.org — theme stylesheet
   The single CSS file for the site. Everything that repeats lives here:
   type scale, colour, buttons, cards, nav, footer, motion, breakpoints.
   Pages should carry almost no inline style — only genuine one-offs
   (a specific grid ratio, a decorative blob, a max-width on one paragraph).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --rmm-ink:        #0B1B33;   /* headings, primary text */
  --rmm-body:       #47597A;   /* body copy */
  --rmm-muted:      #5A6B85;   /* secondary copy inside cards */
  --rmm-soft:       #6C7E9B;   /* captions, meta, breadcrumbs */
  --rmm-faint:      #93A2BA;   /* placeholders */
  --rmm-blue:       #1668E3;   /* primary accent */
  --rmm-blue-dark:  #0F4FB0;   /* accent hover / accent text */
  --rmm-blue-tint:  #E8F0FE;   /* accent wash */
  --rmm-blue-tint2: #D9E7FD;   /* accent wash, pressed */
  --rmm-sky:        #43B8F5;   /* gradient partner */
  --rmm-line:       #E9EFF9;   /* borders */
  --rmm-line-soft:  #EDF2FB;   /* hairlines */
  --rmm-field:      #F7FAFF;   /* input fill */
  --rmm-field-line: #E1E9F7;   /* input border */
  --rmm-surface:    #FBFCFF;   /* card fill */
  --rmm-onDark:     #B9CCE6;   /* body copy on navy */
  --rmm-onDark-dim: #94ACCC;
  --rmm-onDark-faint: #7E96B8;
  --rmm-onDark-label: #6E86A8;

  --rmm-shell: 1200px;         /* content max-width */
  --rmm-gutter: 32px;
  --rmm-section: 88px;         /* vertical rhythm between sections */

  --rmm-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Reset -------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--rmm-ink);
  font-family: var(--rmm-font);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--rmm-blue); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--rmm-blue-tint2); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--rmm-ink); margin: 0; text-wrap: balance; }

h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.14; letter-spacing: -0.032em; font-weight: 800; }
h3 { font-size: 18px; line-height: 1.4; letter-spacing: -0.015em; font-weight: 700; }

/* Smaller H2 for panel headings that sit inside a card rather than open page */
h2.rmm-h2-sm { font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; }
h3.rmm-h3-lg { font-size: 22px; letter-spacing: -0.02em; }

p { margin: 0; color: var(--rmm-body); }
p + p { margin-top: 16px; }

a { color: var(--rmm-blue); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--rmm-blue-dark); }

/* Text roles */
.rmm-lede    { font-size: 18.5px; line-height: 1.65; }
.rmm-prose   { font-size: 17px; line-height: 1.75; }
.rmm-small   { font-size: 15.5px; line-height: 1.7; color: var(--rmm-muted); }
.rmm-meta    { font-size: 14px; line-height: 1.6; color: var(--rmm-soft); }
.rmm-fine    { font-size: 13.5px; line-height: 1.7; color: var(--rmm-soft); }
.rmm-measure { max-width: 62ch; }
.rmm-measure-sm { max-width: 52ch; }
.rmm-measure-lg { max-width: 72ch; }

/* Eyebrow pill above a section heading */
.rmm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--rmm-blue-tint); color: var(--rmm-blue-dark);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px;
}
.rmm-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rmm-blue);
}
.rmm-eyebrow + h1, .rmm-eyebrow + h2 { margin-top: 22px; }
h1 + .rmm-lede, h2 + .rmm-lede, h2 + .rmm-prose { margin-top: 22px; }

/* --- Layout ------------------------------------------------------------- */
.rmm-shell { max-width: var(--rmm-shell); margin: 0 auto; padding-left: var(--rmm-gutter); padding-right: var(--rmm-gutter); }
.rmm-section { padding-top: var(--rmm-section); }
.rmm-stack   { display: flex; flex-direction: column; gap: 22px; }
.rmm-row     { display: flex; gap: 14px; flex-wrap: wrap; }

.rmm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rmm-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rmm-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rmm-split  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }

/* Tinted band with hairlines, used for the stat strip */
.rmm-band {
  border-top: 1px solid var(--rmm-line-soft);
  border-bottom: 1px solid var(--rmm-line-soft);
  background: var(--rmm-surface);
}

/* Hero with the soft sky wash and a decorative glow */
.rmm-hero { position: relative; background: linear-gradient(180deg, #F4F8FF 0%, #FFF 100%); overflow: hidden; }
.rmm-hero > .rmm-shell { position: relative; }
.rmm-glow {
  position: absolute; top: -200px; right: -160px; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(67,184,245,0.26), rgba(67,184,245,0) 68%);
}

/* --- Breadcrumb --------------------------------------------------------- */
.rmm-crumb { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--rmm-soft); }
.rmm-crumb a { color: var(--rmm-soft); }
.rmm-crumb a:hover { color: var(--rmm-blue); }
.rmm-crumb [aria-current] { color: var(--rmm-ink); font-weight: 600; }

/* --- Buttons ------------------------------------------------------------ */
.rmm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  padding: 16px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.rmm-btn-sm { font-size: 15px; padding: 12px 22px; }

.rmm-btn-primary { background: var(--rmm-blue); color: #fff; box-shadow: 0 14px 30px -12px rgba(22,104,227,0.7); }
.rmm-btn-primary:hover { background: var(--rmm-blue-dark); color: #fff; }

.rmm-btn-ghost { background: #fff; color: var(--rmm-ink); border-color: #DCE5F4; }
.rmm-btn-ghost:hover { border-color: var(--rmm-blue); color: var(--rmm-blue-dark); }

.rmm-btn-light { background: #fff; color: var(--rmm-ink); font-weight: 700; }
.rmm-btn-light:hover { background: var(--rmm-blue-tint); color: var(--rmm-ink); }

.rmm-btn-onDark { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.28); }
.rmm-btn-onDark:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Inline text link that ends in an arrow */
.rmm-link-arrow { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }

/* --- Cards -------------------------------------------------------------- */
.rmm-card {
  background: var(--rmm-surface); border: 1px solid var(--rmm-line);
  border-radius: 22px; padding: 28px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.rmm-card-lg { border-radius: 26px; padding: 40px; }
a.rmm-card:hover, .rmm-card-hover:hover { border-color: #C6DAF7; background: #F7FAFF; }
.rmm-card h3 { margin-top: 18px; }
.rmm-card h3:first-child { margin-top: 0; }
.rmm-card p { margin-top: 8px; }

/* Round tinted icon tile that sits at the top of a card */
.rmm-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; background: var(--rmm-blue-tint); color: var(--rmm-blue);
}
.rmm-icon svg { display: block; }

/* --- Stats -------------------------------------------------------------- */
.rmm-stat { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--rmm-ink); }
.rmm-stat-accent { color: var(--rmm-blue); }
.rmm-stat + p { margin-top: 6px; font-size: 14px; color: var(--rmm-soft); }

/* --- Announcement bar + header ------------------------------------------ */
.rmm-topbar {
  background: var(--rmm-ink); color: #C8D6EC; font-size: 13.5px; line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 11px 24px; flex-wrap: wrap;
}
.rmm-topbar a { color: #fff; font-weight: 600; }
.rmm-topbar a:hover { color: #fff; text-decoration: underline; }
.rmm-dot { width: 4px; height: 4px; border-radius: 50%; background: #3E5772; }

.rmm-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rmm-line);
}
.rmm-header > .rmm-shell {
  min-height: 76px; padding-top: 12px; padding-bottom: 12px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.rmm-brand { display: flex; align-items: center; gap: 10px; color: var(--rmm-ink); font-weight: 800; font-size: 17.5px; letter-spacing: -0.02em; }
.rmm-brand:hover { color: var(--rmm-ink); }
.rmm-brand svg { display: block; }

.rmm-nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.rmm-nav a { color: var(--rmm-body); font-size: 15px; font-weight: 500; }
.rmm-nav a:hover, .rmm-nav a[aria-current] { color: var(--rmm-blue); font-weight: 600; }
.rmm-spacer { flex: 1; }
.rmm-phone { color: var(--rmm-ink); font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.rmm-phone:hover { color: var(--rmm-blue-dark); }

/* WordPress Navigation block, so a real menu inherits the design */
.wp-block-navigation a { color: var(--rmm-body); font-size: 15px; font-weight: 500; text-decoration: none; }
.wp-block-navigation a:hover { color: var(--rmm-blue); }
.wp-block-navigation .current-menu-item a { color: var(--rmm-blue); font-weight: 600; }

/* --- Closing CTA panel -------------------------------------------------- */
.rmm-cta {
  position: relative; overflow: hidden; border-radius: 30px; padding: 64px;
  background: linear-gradient(120deg, #0B1B33 0%, #123563 62%, #17518F 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
}
.rmm-cta > :not(.rmm-glow) { position: relative; }
.rmm-cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; letter-spacing: -0.03em; max-width: 26ch; }
.rmm-cta p { color: var(--rmm-onDark); margin-top: 18px; }
.rmm-cta .rmm-glow { top: -160px; right: -80px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(67,184,245,0.34), rgba(67,184,245,0) 68%); }

/* --- Footer ------------------------------------------------------------- */
.rmm-footer { margin-top: var(--rmm-section); background: var(--rmm-ink); color: var(--rmm-onDark); }
.rmm-footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px; padding-top: 72px; padding-bottom: 40px;
}
.rmm-footer .rmm-brand { color: #fff; }
.rmm-footer .rmm-brand:hover { color: #fff; }
.rmm-footer p { color: var(--rmm-onDark-dim); font-size: 15px; }
.rmm-footer h3 {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rmm-onDark-label); font-weight: 700; margin-bottom: 16px;
}
.rmm-footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.rmm-footer a { color: var(--rmm-onDark); }
.rmm-footer a:hover, .rmm-footer a[aria-current] { color: #fff; }
.rmm-footer-phone { display: inline-block; margin-top: 20px; font-size: 19px; font-weight: 700; color: #fff; }
.rmm-footer-base { border-top: 1px solid rgba(255,255,255,0.1); }
.rmm-footer-base > .rmm-shell { padding-top: 28px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 14px; }
.rmm-footer-base p, .rmm-footer-base a, .rmm-footer-base span { font-size: 13.5px; line-height: 1.7; color: var(--rmm-onDark-faint); }
.rmm-footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }

/* --- Forms -------------------------------------------------------------- */
.rmm-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rmm-field > span { font-size: 13px; font-weight: 600; color: var(--rmm-ink); }
.rmm-input, .rmm-field input, .rmm-field textarea {
  width: 100%; min-width: 0; height: 48px; padding: 0 15px;
  font: inherit; font-size: 15px; color: var(--rmm-ink);
  background: var(--rmm-field); border: 1px solid var(--rmm-field-line); border-radius: 12px;
}
.rmm-field textarea { height: auto; padding: 13px 15px; line-height: 1.6; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--rmm-faint); }

/* Fluent Forms, so the real form matches the design */
.fluentform input[type=text], .fluentform input[type=email], .fluentform input[type=tel], .fluentform select {
  height: 48px; padding: 0 15px; font-size: 15px; color: var(--rmm-ink);
  background: var(--rmm-field); border: 1px solid var(--rmm-field-line); border-radius: 12px;
}
.fluentform label { font-size: 13px; font-weight: 600; color: var(--rmm-ink); }
.fluentform button[type=submit] {
  width: 100%; height: 52px; border: 0; border-radius: 999px;
  background: var(--rmm-blue); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.fluentform button[type=submit]:hover { background: var(--rmm-blue-dark); }

/* --- Accordion ---------------------------------------------------------- */
details.rmm-faq { background: var(--rmm-surface); border: 1px solid var(--rmm-line); border-radius: 18px; padding: 4px 26px; }
details.rmm-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; }
details.rmm-faq > summary::-webkit-details-marker { display: none; }
details.rmm-faq > p { margin: 0 0 22px; max-width: 66ch; font-size: 16px; line-height: 1.72; color: var(--rmm-muted); }
.rmm-plus {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--rmm-blue-tint); color: var(--rmm-blue);
  transition: transform 0.2s ease;
}
details[open] > summary .rmm-plus { transform: rotate(45deg); }

/* --- Long-form document with a sticky sidebar --------------------------- */
.rmm-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.rmm-doc { max-width: 72ch; }
.rmm-doc > section { scroll-margin-top: 108px; }
.rmm-doc h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.16; letter-spacing: -0.03em; margin-top: 44px; }
.rmm-doc > section:first-child h2 { margin-top: 36px; }
.rmm-doc > h2:first-child { margin-top: 0; }
.rmm-doc p { font-size: 17.5px; line-height: 1.8; margin-top: 18px; }
.rmm-doc .rmm-card p { font-size: 16px; line-height: 1.72; color: var(--rmm-muted); margin-top: 10px; }

.rmm-toc { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 20px; }
.rmm-toc-links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.rmm-toc-title { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rmm-soft); font-weight: 700; margin-bottom: 14px; }

/* Navy sidebar panel */
.rmm-panel { background: linear-gradient(140deg, #0B1B33, #17518F); border-radius: 20px; padding: 26px; }
.rmm-panel h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.rmm-panel p { font-size: 15px; line-height: 1.7; color: var(--rmm-onDark); margin-top: 10px; }
.rmm-panel .rmm-btn { width: 100%; margin-top: 18px; }
.rmm-panel .rmm-panel-phone { display: block; text-align: center; margin-top: 10px; color: #fff; font-size: 15.5px; font-weight: 600; }

/* Tinted callout */
.rmm-note { display: flex; gap: 16px; align-items: flex-start; background: var(--rmm-blue-tint); border-radius: 20px; padding: 22px 26px; }
.rmm-note p { color: #0B3C6B; margin: 0; font-size: 16.5px; line-height: 1.7; }
.rmm-note svg { flex: none; margin-top: 3px; }

/* Numbered step row */
.rmm-step { display: flex; gap: 16px; background: var(--rmm-surface); border: 1px solid var(--rmm-line); border-radius: 18px; padding: 24px; }
.rmm-step > span { flex: none; font-size: 15px; font-weight: 800; color: var(--rmm-blue); }
.rmm-step h3 { font-size: 17.5px; }
.rmm-step p { font-size: 15.5px; line-height: 1.7; color: var(--rmm-muted); margin-top: 6px; }

/* Contributor row */
.rmm-person { display: flex; gap: 18px; align-items: flex-start; }
.rmm-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--rmm-blue-tint); color: var(--rmm-blue-dark); display: grid; place-items: center; font-size: 17px; font-weight: 800; }

/* Pill chip, for county / publisher lists */
.rmm-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.rmm-chip-tag {
  font-size: 15px; font-weight: 600; color: #22344F;
  background: #F4F7FE; border: 1px solid #E4EBF7; border-radius: 999px; padding: 11px 20px;
}

/* Testimonial */
.rmm-quote {
  margin: 0; background: #fff; border: 1px solid var(--rmm-line); border-radius: 22px;
  padding: 30px; box-shadow: 0 24px 44px -34px rgba(11,27,51,0.28);
}
.rmm-quote blockquote { margin: 0; font-size: 17px; line-height: 1.72; color: #22344F; }
.rmm-quote figcaption { font-size: 14px; color: #7386A3; margin-top: 20px; font-weight: 600; }
.rmm-quote figcaption span { font-weight: 400; color: var(--rmm-faint); }

/* --- Post cards and category filters ------------------------------------ */
.rmm-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rmm-blue-dark); }
.rmm-kicker-row { display: inline-flex; align-items: center; gap: 8px; }
.rmm-kicker-row .rmm-dot { background: var(--rmm-blue); }

.rmm-post {
  display: flex; flex-direction: column; color: inherit;
  background: #fff; border: 1px solid var(--rmm-line); border-radius: 22px; padding: 30px;
  box-shadow: 0 24px 44px -38px rgba(11,27,51,0.3);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.rmm-post:hover { border-color: #C6DAF7; color: inherit; }
.rmm-post h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; margin-top: 14px; }
.rmm-post p { font-size: 15.5px; line-height: 1.7; color: var(--rmm-muted); margin-top: 12px; }

.rmm-post-feature {
  display: block; color: inherit;
  background: var(--rmm-surface); border: 1px solid var(--rmm-line); border-radius: 26px; padding: 44px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.rmm-post-feature:hover { border-color: #C6DAF7; background: #F7FAFF; color: inherit; }
.rmm-post-feature h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.16; letter-spacing: -0.03em; margin-top: 18px; max-width: 30ch; }
.rmm-post-feature > p { font-size: 17px; line-height: 1.72; margin-top: 16px; max-width: 68ch; }

/* Date / read-time byline row */
.rmm-postmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: #7386A3; margin-top: 20px; }
.rmm-postmeta .rmm-dot { background: #C3D0E4; }
.rmm-postmeta .rmm-cue { color: var(--rmm-blue); font-weight: 600; }

/* Category filter row */
.rmm-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.rmm-filter {
  font-size: 14.5px; font-weight: 600; color: #22344F;
  background: #F4F7FE; border: 1px solid #E4EBF7; border-radius: 999px; padding: 10px 18px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.rmm-filter:hover { border-color: var(--rmm-blue); color: var(--rmm-blue-dark); }
.rmm-filter[aria-current] { background: var(--rmm-blue); border-color: var(--rmm-blue); color: #fff; }
.rmm-filter[aria-current]:hover { color: #fff; }

/* --- Article byline and author block ------------------------------------ */
.rmm-byline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.rmm-byline-group { display: flex; align-items: center; gap: 14px; }
.rmm-byline-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rmm-soft); }
.rmm-byline-rule { width: 1px; height: 34px; background: #DCE5F4; }
.rmm-byline-person { display: flex; align-items: center; gap: 12px; color: inherit; }
.rmm-byline-person:hover { color: inherit; }
.rmm-byline-person > span:last-child { display: flex; flex-direction: column; }
.rmm-byline-name { font-size: 16px; font-weight: 700; color: var(--rmm-ink); }
.rmm-byline-role { font-size: 13.5px; color: var(--rmm-soft); }
.rmm-avatar-sm { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--rmm-blue-tint); color: var(--rmm-blue-dark); display: grid; place-items: center; font-size: 16px; font-weight: 800; }

.rmm-authorbox { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; background: var(--rmm-surface); border: 1px solid var(--rmm-line); border-radius: 24px; padding: 34px; }
.rmm-authorbox h3 { font-size: 22px; letter-spacing: -0.02em; margin-top: 10px; }
.rmm-authorbox h3 a { color: var(--rmm-ink); }
.rmm-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: 8px; background: var(--rmm-blue-tint); color: var(--rmm-blue-dark);
  font-size: 13.5px; font-weight: 600; transition: background 0.18s ease;
}
.rmm-badge:hover { background: var(--rmm-blue-tint2); color: var(--rmm-blue-dark); }
.rmm-badge-icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; }

/* Superscript citation marker */
.rmm-cite { font-size: 12px; font-weight: 700; vertical-align: super; }
.rmm-citations { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; }
.rmm-citations li { font-size: 15px; line-height: 1.7; color: var(--rmm-muted); }

/* --- Commerce ----------------------------------------------------------- */
.rmm-buybox { background: #fff; border: 1px solid #E6EDF9; border-radius: 26px; padding: 32px; box-shadow: 0 40px 70px -34px rgba(11,27,51,0.22); }
.rmm-price { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.rmm-price-figure { font-size: 42px; font-weight: 800; letter-spacing: -0.035em; color: var(--rmm-ink); }
.rmm-price-currency { font-size: 15px; color: var(--rmm-soft); }
.rmm-buy-cta { display: block; text-align: center; height: 54px; line-height: 54px; border-radius: 999px; font-size: 16.5px; font-weight: 700; padding: 0; }
.rmm-buy-alt { display: block; text-align: center; height: 54px; line-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 600; padding: 0; }
.rmm-qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--rmm-field); border: 1px solid var(--rmm-field-line); border-radius: 14px; }
.rmm-qty-btn { width: 32px; height: 32px; display: grid; place-items: center; font: inherit; font-size: 18px; color: var(--rmm-blue-dark); background: var(--rmm-blue-tint); border: 0; border-radius: 9px; cursor: pointer; transition: background 0.18s ease; }
.rmm-qty-btn:hover { background: var(--rmm-blue-tint2); }
.rmm-trust { display: flex; flex-direction: column; gap: 10px; }
.rmm-trust span { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--rmm-muted); }
.rmm-trust svg { flex: none; }
.rmm-checklist span { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; line-height: 1.6; color: #22344F; }
.rmm-checklist svg { flex: none; margin-top: 3px; }

/* Card with a large ghosted step number */
.rmm-numcard { position: relative; overflow: hidden; }
.rmm-numcard > span[data-num] { position: absolute; top: 12px; right: 20px; font-size: 58px; font-weight: 800; letter-spacing: -0.04em; color: #EBF1FC; }
.rmm-numcard > h3, .rmm-numcard > p { position: relative; }

/* Star rating row */
.rmm-stars { display: flex; gap: 3px; }
.rmm-stars svg { display: block; }

/* Checkout: numbered step section + summary rows */
.rmm-step-head { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 22px; }
.rmm-step-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--rmm-blue-tint); color: var(--rmm-blue-dark); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.rmm-panel-white { background: #fff; border: 1px solid var(--rmm-line); border-radius: 22px; padding: 30px; }
.rmm-summary-row { display: flex; justify-content: space-between; font-size: 15px; color: var(--rmm-muted); }
.rmm-paytab { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--rmm-muted); background: var(--rmm-field); border: 1px solid var(--rmm-field-line); border-radius: 12px; padding: 12px 18px; }
.rmm-paytab[aria-current] { color: var(--rmm-blue-dark); background: var(--rmm-blue-tint); border-color: #C6DAF7; }

/* --- Motion ------------------------------------------------------------- */
/* Hidden state is gated on BOTH html[data-anim-ready] (set by theme-base.js)
   and [data-obs] (set on each element the script has actually claimed). So an
   element the script never reaches — JS blocked, late render, editor preview —
   renders visible instead of being pinned invisible. */
html[data-anim-ready] [data-anim][data-obs] { opacity: 0; transform: translateY(18px); }
html[data-anim-ready] [data-anim][data-obs][data-shown] { opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
html[data-anim-ready] [data-anim-group][data-obs] > * { opacity: 0; transform: translateY(18px); }
html[data-anim-ready] [data-anim-group][data-obs][data-shown] > * { opacity: 1; transform: none;
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1), transform 0.65s cubic-bezier(0.22,0.61,0.36,1); }
html[data-anim-ready] [data-anim-group][data-obs][data-shown] > :nth-child(2) { transition-delay: 0.08s; }
html[data-anim-ready] [data-anim-group][data-obs][data-shown] > :nth-child(3) { transition-delay: 0.16s; }
html[data-anim-ready] [data-anim-group][data-obs][data-shown] > :nth-child(4) { transition-delay: 0.24s; }
html[data-anim-ready] [data-anim-group][data-obs][data-shown] > :nth-child(5) { transition-delay: 0.32s; }
html[data-anim-ready] [data-anim-group][data-obs][data-shown] > :nth-child(6) { transition-delay: 0.4s; }

/* --- Breakpoints -------------------------------------------------------- */
@media (max-width: 1180px) {
  .rmm-split, .rmm-cta { grid-template-columns: 1fr; }
  .rmm-split { gap: 40px; }
  .rmm-cta { padding: 48px; }
  .rmm-aside { grid-template-columns: 1fr; gap: 48px; }
  .rmm-toc { position: static; }
}
@media (max-width: 960px) {
  .rmm-grid-3, .rmm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rmm-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
/* The nav never disappears. Below the desktop width it drops to its own row
   and scrolls horizontally rather than being hidden — every link stays
   reachable without a hamburger. */
@media (max-width: 1060px) {
  .rmm-header > .rmm-shell { gap: 14px 18px; }
  .rmm-nav {
    order: 3; width: 100%; margin-left: 0; gap: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .rmm-nav::-webkit-scrollbar { display: none; }
  .rmm-nav a { white-space: nowrap; }
  .rmm-spacer { display: none; }
}
@media (max-width: 720px) {
  :root { --rmm-gutter: 20px; --rmm-section: 64px; }
  .rmm-grid-2, .rmm-grid-3, .rmm-grid-4, .rmm-footer-grid { grid-template-columns: 1fr; }
  .rmm-cta { padding: 34px; border-radius: 22px; }
  .rmm-card-lg { padding: 28px; }
}


/* --- WordPress post content defaults ------------------------------------ */
.entry-content { margin-top: 18px; }
.entry-content h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -0.028em; font-weight: 800; margin: 44px 0 0; }
.entry-content h3 { margin-top: 32px; }
.entry-content p { font-size: 17.5px; line-height: 1.8; color: var(--rmm-body); margin-top: 18px; }
.entry-content ul, .entry-content ol { color: var(--rmm-body); font-size: 17.5px; line-height: 1.8; margin: 18px 0 0; padding-left: 24px; }
.entry-content img { border-radius: 18px; }
.entry-content blockquote { margin: 24px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--rmm-blue); color: #22344F; font-size: 18px; }