/* Review Machine pages: "Check your Google listing" widget (js/rm-listing.js), with its step 2, the plan request.
   Everything is scoped to .rml, apart from .rml-to-form (the page's links to the widget); tokens come from
   styles.css with fallbacks. */
.rml {
  --rml-ink: var(--ink, #0B1120);
  --rml-graphite: var(--graphite, #4B5563);
  --rml-fog: var(--fog, #E5E7EB);
  --rml-accent: var(--accent, #059669);
  --rml-accent-hover: var(--accent-hover, #047857);
  --rml-soft: var(--bg-alt, #F3F4F6);
  --rml-error: var(--error, #B91C1C);
  display: grid;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 32px);
  background: var(--white, #FFFFFF);
  border: 1px solid var(--rml-fog);
  border-radius: 14px;
  box-shadow: var(--shadow-card, 0 8px 20px rgba(15, 23, 42, 0.06));
  color: var(--rml-ink);
  font-family: var(--font-family, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  text-align: left;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}
.rml *, .rml *::before, .rml *::after { box-sizing: border-box; }
.rml [hidden] { display: none !important; }

.rml__head { display: grid; gap: 6px; }
.rml__title { margin: 0; font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.2; font-weight: 700; color: var(--rml-ink); }
.rml__lede { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--rml-graphite); }

.rml__form { display: grid; gap: 14px; min-width: 0; }
.rml__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.rml__field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.rml__field--wide { grid-column: 1 / -1; }
.rml__field label { font-size: 0.875rem; font-weight: 600; color: var(--rml-ink); }
.rml__field input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1rem;              /* 16px keeps iOS from zooming into the field */
  line-height: 1.4;
  padding: 11px 12px;
  color: var(--rml-ink);
  background: var(--white, #FFFFFF);
  border: 1px solid #C9CED6;
  border-radius: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.rml__field input::placeholder { color: #8A929E; }
.rml__field input:focus { outline: none; border-color: var(--rml-accent); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.22); }
.rml__field input:focus-visible { outline: 2px solid var(--rml-accent); outline-offset: 1px; }
.rml__field input[aria-invalid="true"] { border-color: var(--rml-error); }
.rml__field-err { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--rml-error); }

/* Hidden from people, visible to form-filling bots. */
.rml__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.rml__notice { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--rml-graphite); }
.rml__notice a { color: var(--rml-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

.rml__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rml__submit { min-height: 46px; }
.rml__submit[disabled] { opacity: 0.7; cursor: progress; }

.rml__error:empty { display: none; }
.rml__error {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid rgba(185, 28, 28, 0.18);
}
.rml__error p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--rml-ink); }

.rml__result { display: grid; gap: 18px; min-width: 0; }
.rml__result:focus { outline: none; }
/* The result is focused by script only (tabindex -1) so screen readers land on it; it is not a control. */
.rml__result:focus-visible { outline: none; }
.rml__found { margin: 0; display: grid; gap: 2px; font-size: 1rem; color: var(--rml-graphite); }
.rml__found strong { color: var(--rml-ink); font-weight: 600; overflow-wrap: anywhere; }
.rml__addr { font-size: 0.8125rem; color: var(--rml-graphite); overflow-wrap: anywhere; }

.rml__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rml__bar {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
  font-size: 0.875rem;
  min-width: 0;
}
.rml__bar-name { display: flex; min-width: 0; color: var(--rml-graphite); white-space: nowrap; }
.rml__bar-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rml__bar--you .rml__bar-label { color: var(--rml-ink); font-weight: 600; }
.rml__you { flex: none; padding-left: 0.3em; }
.rml__bar-track { display: block; height: 14px; background: var(--rml-soft); border-radius: 7px; overflow: hidden; }
.rml__bar-fill { display: block; height: 100%; background: #9CA3AF; border-radius: 7px; transition: width 400ms ease; }
.rml__bar--you .rml__bar-fill { background: var(--rml-accent); }
.rml__bar-val { text-align: right; font-weight: 600; color: var(--rml-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rml__note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--rml-graphite); }

.rml__gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rml__gap { display: grid; gap: 4px; align-content: start; background: var(--rml-soft); border-radius: 10px; padding: 12px 14px; }
.rml__gap b { font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--rml-ink); font-variant-numeric: tabular-nums; }
.rml__gap span { font-size: 0.8125rem; line-height: 1.45; color: var(--rml-graphite); }
.rml__gap--case { background: rgba(5, 150, 105, 0.08); }
.rml__gap--case b { color: var(--rml-accent-hover); }
a.rml__gap--case { text-decoration: none; }
a.rml__gap--case b { font-size: 1rem; }
a.rml__gap--case:hover b, a.rml__gap--case:focus-visible b { text-decoration: underline; }

.rml__rule { margin: 0; font-size: 0.8125rem; color: var(--rml-graphite); }

.rml__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rml__attr { font-size: 0.75rem; color: var(--rml-graphite); border: 1px solid var(--rml-fog); padding: 2px 8px; border-radius: 6px; }
.rml__cta { display: inline-flex; }
.rml__again {
  font: inherit;
  font-size: 0.875rem;
  color: var(--rml-accent-hover);
  background: none;
  border: none;
  padding: 8px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rml__again:focus-visible { outline: 2px solid var(--rml-accent); outline-offset: 2px; border-radius: 4px; }

/* Step 2 (S30): the plan request under the result, and the panels for not found and unavailable. */
.rml__link {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--rml-accent-hover);
  padding: 8px 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rml__link:focus-visible { outline: 2px solid var(--rml-accent); outline-offset: 2px; border-radius: 4px; }

.rml__miss { display: grid; gap: 10px; justify-items: start; }
.rml__miss p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--rml-graphite); }
.rml__miss strong { color: var(--rml-ink); font-weight: 600; }
.rml__miss .btn, .rml__warn .btn { padding: 10px 18px; font-size: 15px; }

.rml__plan { display: grid; gap: 18px; border-top: 1px solid var(--rml-fog); padding-top: 22px; min-width: 0; }
.rml__plan-head { display: grid; gap: 6px; }
.rml__plan-title { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 700; color: var(--rml-ink); overflow-wrap: anywhere; }
.rml__plan-lede { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--rml-graphite); max-width: 60ch; }
.rml__plan-form { display: grid; gap: 18px; min-width: 0; }
.rml__field--short { max-width: 340px; }
.rml__plan-actions { gap: 10px 18px; align-items: center; }

.rml__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.rml__group legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 0.875rem; font-weight: 600; color: var(--rml-ink); }
.rml__group legend + * { clear: both; }
.rml__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rml__chip { position: relative; display: inline-flex; }
.rml__chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.rml__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--rml-ink);
  background: var(--white, #FFFFFF);
  border: 1px solid #C9CED6;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.rml__chip input:hover + span { border-color: #9CA3AF; }
.rml__chip input:checked + span {
  border-color: var(--rml-accent);
  background: rgba(5, 150, 105, 0.1);
  color: var(--rml-accent-hover);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rml-accent);
}
.rml__chip input:focus-visible + span { outline: 2px solid var(--rml-accent); outline-offset: 2px; }
.rml__group[aria-invalid="true"] .rml__chip span { border-color: var(--rml-error); }
.rml__help { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--rml-graphite); max-width: 56ch; }

.rml__done {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.22);
}
.rml__done:focus { outline: none; }
.rml__done p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--rml-ink); overflow-wrap: anywhere; }
.rml__done strong { font-weight: 600; }
.rml__done .rml__link { padding: 2px 0; }
.rml__warn {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(180, 83, 9, 0.07);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
.rml__warn p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--rml-ink); }
.rml__warn-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
a.rml__mail { font-weight: 600; color: var(--rml-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Links to the check elsewhere on the page (after the results, after pricing, in #contact). Like the
   links themselves (rm-interactive.css), the whole line goes while the check has nothing to show. */
.rml-to-form { margin: 24px 0 0; font-size: 1rem; }
.rml-to-form--dark { margin-top: 12px; text-align: center; color: rgba(255, 255, 255, 0.85); }
.rml-to-form--dark a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
html:not(:has([data-rm-listing] *)) .rml-to-form { display: none; }
/* The industry pages' hero button to the check shows from the first paint, so the hero does not shift
   when the script fills the check. */
.cmp-hero__actions .btn[href="#listing-check"] { display: inline-flex; }

.rml__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .rml__fields { grid-template-columns: minmax(0, 1fr); }
  .rml__bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .rml__bar-track { grid-column: 1 / -1; grid-row: 2; }
  .rml__foot .rml__book { flex: 1 1 100%; }
  .rml__submit { width: 100%; }
  .rml__field--short { max-width: none; }
  .rml__plan-actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rml__bar-fill, .rml__field input, .rml__chip span { transition: none; }
}