/* TaskBlink Data, Ready search: the page (www/ready.html). Light mode only, mobile first, 16px side gutters,
 * no sideways scroll at any width. Tokens follow taskblinkdemo.com (Geist and JetBrains Mono, magenta #EF06C0,
 * ink #0e1230, soft pink light at the top), kept simpler.
 *
 * This file owns the shared pieces every rd-* module reuses: the tokens, .rd-btn, .rd-chip, .rd-pill, .rd-field,
 * .rd-msg, .rd-link, and the dialog shell (.rd-scrim, .rd-sheet, .rd-sheet__panel, __title, __sub, __close).
 * Other modules keep their own classes under their own prefix (.rd-picker, .rd-filters, .rd-checkout) in
 * rd-sheets.css and rd-checkout.css.
 */

:root {
  color-scheme: light;
  --purple: #EF06C0;
  --purple-bright: #ff59de;
  --purple-dim: #b8068f;
  --purple-deep: #6e0050;
  --purple-ink: #a3047f;
  --purple-wash: rgba(239, 6, 192, 0.07);
  --purple-soft: rgba(239, 6, 192, 0.12);
  --purple-line: rgba(239, 6, 192, 0.32);
  --text: #0e1230;
  --text-2: #566079;
  --text-3: #8a90a6;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5fb;
  --surface-3: #eceef6;
  --border: #e6e8f2;
  --border-2: #d3d7e6;
  --gold: #f5b84a;
  --warn-bg: #fff1e2;
  --warn-ink: #8a4a0f;
  --bad-bg: #fff0f1;
  --bad-ink: #a3122a;
  --ok-bg: #fdeefa;
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --shadow-1: 0 1px 2px rgba(14, 18, 48, 0.05);
  --shadow-2: 0 1px 2px rgba(14, 18, 48, 0.04), 0 10px 30px -14px rgba(14, 18, 48, 0.18);
  --shadow-pink: 0 14px 44px -14px rgba(239, 6, 192, 0.28);
  --ring: 0 0 0 3px rgba(239, 6, 192, 0.22);
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 16px;
  --wide: 1200px;
  --top-h: 60px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; background: var(--bg); }
html.rd-noscroll { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(239, 6, 192, 0.11), transparent 70%),
    radial-gradient(700px 360px at 92% 8%, rgba(255, 89, 222, 0.06), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--purple-ink); text-decoration: none; }
a:hover { color: var(--purple-dim); }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-s); }
::selection { background: rgba(239, 6, 192, 0.18); }

.rd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rd-skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-s);
  background: var(--text); color: #fff; font-weight: 600;
}
.rd-skip:focus { top: 10px; color: #fff; }
.rd-mono { font-family: var(--mono); font-feature-settings: 'zero' 0; letter-spacing: -0.01em; }
.rd-main { flex: 1 0 auto; width: 100%; overflow-x: clip; }   /* the footer sits at the bottom of a short page */

/* ------------------------------------------------------------------ *
 * Buttons, links, chips, pills
 * ------------------------------------------------------------------ */
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.rd-btn:disabled, .rd-btn.is-busy { opacity: 0.6; cursor: default; }
.rd-btn--primary {
  background: var(--purple); color: #fff; border-color: var(--purple);
  box-shadow: 0 2px 0 var(--purple-deep), 0 8px 24px -8px rgba(239, 6, 192, 0.55);
}
.rd-btn--primary:hover:not(:disabled) { background: #f62ccd; border-color: #f62ccd; color: #fff; transform: translateY(-1px); }
.rd-btn--primary:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 0 var(--purple-deep); }
.rd-btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.rd-btn--ghost:hover:not(:disabled) { border-color: var(--purple-line); color: var(--purple-ink); }
.rd-btn--soft { background: var(--purple-soft); color: var(--purple-ink); }
.rd-btn--soft:hover:not(:disabled) { background: rgba(239, 6, 192, 0.18); color: var(--purple-ink); }
.rd-btn--quiet { background: transparent; color: var(--text); border-color: var(--border-2); min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.rd-btn--quiet:hover { border-color: var(--purple-line); color: var(--purple-ink); }
.rd-btn--block { width: 100%; }
.rd-btn--google { background: var(--surface); color: var(--text); border-color: var(--border-2); min-height: 46px; font-size: 15px; }
.rd-btn--google:hover { border-color: var(--text-3); color: var(--text); background: var(--surface-2); }
.rd-btn.is-busy { position: relative; color: transparent !important; }
.rd-btn.is-busy::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) transparent transparent;
  animation: rd-spin 0.7s linear infinite;
}
.rd-btn--ghost.is-busy::after, .rd-btn--google.is-busy::after { border-color: var(--purple) var(--purple) transparent transparent; }
@keyframes rd-spin { to { transform: rotate(360deg); } }

.rd-link {
  background: none; border: 0; padding: 4px 0; color: var(--purple-ink); font-weight: 500; font-size: 14px;
  text-decoration: underline; text-decoration-color: var(--purple-line); text-underline-offset: 3px;
}
.rd-link:hover { color: var(--purple-dim); }

.rd-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.rd-icon-btn:hover { border-color: var(--purple-line); color: var(--purple-ink); background: var(--surface); }
.rd-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rd-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 0 13px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-size: 13.5px; font-weight: 500; line-height: 1.2; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}
button.rd-chip:hover { border-color: var(--purple-line); color: var(--purple-ink); transform: translateY(-1px); }
.rd-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-chip--on { background: var(--purple-wash); border-color: var(--purple-line); color: var(--purple-ink); padding-right: 6px; }
.rd-chip--on:not(:has(.rd-chip__x)) { padding-right: 13px; }
.rd-chip--industry { font-weight: 600; }
.rd-chip--filter, .rd-chip--state { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.rd-chip__x {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent; color: currentColor; opacity: 0.7;
}
.rd-chip__x:hover { opacity: 1; background: rgba(14, 18, 48, 0.07); }
.rd-chip--add { min-height: 30px; padding: 0 11px; border-style: dashed; color: var(--text-2); background: transparent; font-size: 13px; }
.rd-chip--extra { display: none; }
.rd-chip--add .rd-ico { color: var(--purple); }
.rd-chip--more { min-height: 34px; border-style: dashed; color: var(--purple-ink); font-weight: 600; }
/* Round 4 (SPEC 15.5, 15.11): a fully chosen picker group is one chip; "+N more" opens the picker on Picked. Both are
   44 px tall on a touch screen, and a chip never grows wider than the row. */
.rd-chip--group { font-weight: 600; }
/* On a phone more than 2 filter chips are one "N filters" chip that opens the filter sheet (rd-core renderChips) */
.rd-chip--filters { font-weight: 600; cursor: pointer; }
@media (pointer: coarse), (max-width: 759px) {
  .rd-chip--more, .rd-chip--group, .rd-chip--filters { min-height: 44px; }
  .rd-chip--group .rd-chip__x { width: 36px; height: 36px; }
}
/* A touch screen (SPEC 15.11): a chip's remove x keeps its look and gets a 44 px hit area around it. Every other
   touch rule sits at the end of this file, so it wins over the sizes set further down. */
@media (pointer: coarse), (max-width: 759px) {
  .rd-chip__x { position: relative; }
  .rd-chip__x::after { content: ''; position: absolute; inset: -10px; }
}
.rd-chip-note {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 4px; color: var(--text-3); font-size: 12.5px;
}

.rd-pill {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.rd-pill--mobile { height: 21px; padding: 0 8px; background: var(--purple-soft); color: var(--purple-ink); font-size: 11.5px; }

.rd-msg { padding: 10px 12px; border-radius: var(--radius-s); font-size: 14px; line-height: 1.45; background: var(--surface-2); color: var(--text); }
.rd-msg--bad { background: var(--bad-bg); color: var(--bad-ink); }
.rd-msg--warn { background: var(--warn-bg); color: var(--warn-ink); }
.rd-msg--ok { background: var(--ok-bg); color: var(--purple-ink); }

/* ------------------------------------------------------------------ *
 * Top bar
 * ------------------------------------------------------------------ */
.rd-progress {
  position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--purple), var(--purple-bright), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; transition: opacity 0.2s;
}
.rd-progress.is-on { opacity: 1; animation: rd-slide 1s var(--ease) infinite; }
@keyframes rd-slide { from { background-position: -50% 0; } to { background-position: 150% 0; } }

.rd-top { position: relative; z-index: 40; border-bottom: 1px solid transparent; }
.rd-has-results .rd-top {
  position: sticky; top: 0; background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border); box-shadow: 0 6px 24px -18px rgba(14, 18, 48, 0.25);
}
.rd-top__in {
  max-width: var(--wide); margin: 0 auto; padding: 10px var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'logo gap nav' 'slot slot slot';
  align-items: center; column-gap: 16px;
}
.rd-logo { grid-area: logo; display: inline-flex; align-items: baseline; font-size: 21px; font-weight: 700; letter-spacing: -0.035em; line-height: 40px; }
.rd-logo__task { color: var(--text); }
.rd-logo__blink { color: var(--purple); }
.rd-logo__eye { display: block; height: 24px; width: auto; margin-right: 9px; align-self: center; }
.rd-logo__data {
  align-self: center; margin-left: 10px; padding-left: 11px; border-left: 1px solid var(--border-2);
  font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 18px; color: var(--text-3);
}
@media (max-width: 479px) { .rd-logo__data { display: none; } }
.rd-logo:hover .rd-logo__task { color: var(--text); }
.rd-top__nav { grid-area: nav; display: flex; align-items: center; gap: 6px; }
/* Why it's legal (owner 2026-11-04): the article, from the top bar, before the account corner, beside results too */
.rd-why {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.rd-why:hover { color: var(--text); }
.rd-nav-sep { width: 1px; height: 22px; margin: 0 8px; background: var(--border-2); }
@media (max-width: 479px) { .rd-why { font-size: 14px; } .rd-nav-sep { margin: 0 4px; } }
/* Under 900 px the bar is the logo, an empty middle column and the links (the search gets its own row). Two 16 px
   column gaps around that empty column pushed Sign in past the right edge: the page scrolled sideways by 1 px at
   375, 16 px at 360 and 56 px at 320 (found 2026-11-11). One 12 px space between the logo and the links instead,
   tighter links under 400 px and a smaller logo under 360 px, so the row fits from 320 px. 900 px and up keeps
   'logo slot nav' with its gaps. */
@media (max-width: 899px) {
  .rd-top__in { column-gap: 0; }
  .rd-top__nav { margin-left: 12px; }
}
@media (max-width: 399px) {
  .rd-top__nav { gap: 2px; }
  .rd-why { padding: 0 2px; }
  .rd-top__signin { padding: 0 12px; }
  .rd-logo__eye { margin-right: 7px; }
}
@media (max-width: 359px) {
  .rd-logo { font-size: 19px; }
  .rd-logo__eye { height: 21px; }
  .rd-nav-sep { margin: 0 3px; }
}
/* the smallest phones (320 px): Sign in is a bordered button, so the line before it can go, with a plain 8 px space
   in its place; under 320 px (a folded phone's cover screen) the eye steps aside and only the word stays */
@media (max-width: 339px) {
  .rd-logo { font-size: 17px; }
  .rd-logo__eye { height: 19px; margin-right: 6px; }
  .rd-nav-sep { display: none; }
  .rd-top__nav { gap: 8px; }
  .rd-top__signin { padding: 0 10px; }
}
@media (max-width: 319px) {
  .rd-logo__eye { display: none; }
  .rd-top__signin { padding: 0 8px; }
}
.rd-top__slot { grid-area: slot; min-width: 0; }
.rd-has-results .rd-top__slot { padding-top: 8px; }
.rd-account { position: relative; display: flex; align-items: center; gap: 8px; }
.rd-account__own { position: relative; display: inline-flex; align-items: center; }
.rd-account__own:empty { display: none; }
.rd-avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0;
  background: linear-gradient(135deg, var(--purple), #b42cff); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 14px -6px rgba(239, 6, 192, 0.7);
}
.rd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.rd-menu__email { padding: 8px 10px 10px; color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.rd-menu__item {
  display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-s); background: none;
  text-align: left; color: var(--text); font-size: 14px; font-weight: 500;
}
.rd-menu__item:hover { background: var(--surface-2); color: var(--text); }

/* ------------------------------------------------------------------ *
 * Hero and the search card
 * ------------------------------------------------------------------ */
.rd-hero { max-width: 860px; margin: 0 auto; padding: 36px var(--gutter) 28px; text-align: center; }
.rd-has-results .rd-hero { display: none; }
/* How every list is built, one phrase at a time (rd-core startCycle). The phrases share one grid cell, so the
   line is as wide as the longest and never jumps; the one showing fades up into place, the one leaving fades up
   and out. Still and joined (.is-static) for someone who prefers less motion. */
.rd-cycle { margin: 0 auto 16px; min-height: 22px; color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.45; }
.rd-cycle__show { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 7px; max-width: 100%; }
.rd-cycle__badge {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: 50%; background: var(--purple); color: #fff; box-shadow: 0 0 0 3px var(--purple-soft);
}
.rd-cycle__lead { white-space: nowrap; }
.rd-cycle__word { display: inline-grid; justify-items: start; color: var(--purple-ink); font-weight: 600; letter-spacing: -0.005em; }
.rd-cycle__item {
  grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(0.5em);
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
}
.rd-cycle__item.is-on { opacity: 1; transform: none; }
.rd-cycle__item.is-off { opacity: 0; transform: translateY(-0.5em); }
.rd-cycle.is-static .rd-cycle__word { display: inline; text-wrap: balance; }
@media (max-width: 359px) {
  .rd-cycle__word { justify-items: center; }   /* the phrase drops under the lead here: centred under it */
}
.rd-title { font-size: 40px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.rd-title em { display: block; font-style: normal; color: var(--purple); }   /* "in seconds." on its own line */
.rd-lede { max-width: 560px; margin: 14px auto 0; color: var(--text-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.rd-lede__gift { color: var(--purple-ink); font-weight: 600; }   /* the sign-up bonus (owner 2026-11-04) */
.rd-lede__gift[hidden] { display: none; }
.rd-home-slot { margin-top: 26px; text-align: left; }

.rd-search {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-pink); transition: border-color 0.2s, box-shadow 0.2s;
}
.rd-search:focus-within { border-color: var(--purple-line); box-shadow: var(--ring), var(--shadow-pink); }
.rd-search.is-closed { opacity: 0.6; }
.rd-search__word { flex: 0 0 auto; padding-left: 4px; color: var(--text-3); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.rd-search__field { flex: 1 1 160px; min-width: 0; }
.rd-search__input {
  display: block; width: 100%; min-width: 0; height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--border-2);
  border-radius: 0; background: transparent; font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  transition: border-color 0.2s;
}
.rd-search__input::placeholder { color: var(--text-3); font-weight: 500; opacity: 1; }
.rd-search__input:hover { border-bottom-color: var(--purple-line); }
.rd-search__input:focus, .rd-search__input:focus-visible { border-bottom-color: var(--purple); box-shadow: none; border-radius: 0; }
.rd-search__tools { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; }
.rd-search__go { flex: 1 1 auto; min-height: 44px; font-size: 15px; }

/* The suggestions under the box */
.rd-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 45; max-height: min(60vh, 440px);
  overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.rd-opt {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; color: var(--text); font-size: 15px;
}
.rd-opt:hover, .rd-opt.is-active { background: var(--purple-wash); }
.rd-opt.is-active { box-shadow: inset 2px 0 0 var(--purple); }
.rd-opt__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.rd-opt__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-opt__label mark { background: none; color: var(--purple-ink); font-weight: 700; }
.rd-opt__hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12.5px; line-height: 1.3; }
.rd-opt__count { flex: 0 0 auto; color: var(--text-3); font-family: var(--mono); font-size: 12px; }
/* While the industry index is still being built (rd-core drawWaiting): one quiet row, nothing to pick yet */
.rd-opt--wait, .rd-opt--wait:hover { cursor: default; background: none; color: var(--text-3); }

/* Popular and recent */
.rd-quick { display: grid; gap: 16px; margin-top: 22px; }
.rd-quick__row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rd-quick__label { color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rd-chips--quick { justify-content: center; }
.rd-chip--pick, .rd-chip--recent { min-height: 34px; }
.rd-chip--recent { background: var(--surface-2); }

.rd-closed { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; }

/* The card in the top bar, once there are results */
.rd-top .rd-search {
  padding: 6px 6px 6px 12px; gap: 8px; flex-wrap: nowrap; border-radius: 14px; box-shadow: var(--shadow-1);
  background: var(--surface);
}
.rd-top .rd-search__word { display: none; }
.rd-top .rd-search__field { flex: 1 1 auto; }
.rd-top .rd-search__input { height: 40px; font-size: 16px; border-bottom: 0; text-overflow: ellipsis; }
.rd-top .rd-search__tools { flex: 0 0 auto; gap: 6px; }
.rd-top .rd-icon-btn { width: 40px; height: 40px; border-radius: 10px; }
.rd-top .rd-search__go { flex: 0 0 auto; min-height: 40px; padding: 0 12px; }
.rd-top .rd-search__go span { display: none; }
.rd-top .rd-suggest { top: calc(100% + 6px); }

/* ------------------------------------------------------------------ *
 * Results
 * ------------------------------------------------------------------ */
.rd-results { max-width: var(--wide); margin: 0 auto; padding: 18px var(--gutter) 56px; }
.rd-results__head { display: grid; gap: 14px; }
.rd-summary { font-size: 23px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
/* A broad word's search also covers its narrower kinds (rd-core widenedNote): one quiet line, never a list */
.rd-widened { margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.rd-owned { margin-top: 4px; color: var(--purple-ink); font-size: 14px; font-weight: 500; }
/* A state typed in the box that the table does not hold yet (rd-core placeNote) */
.rd-place-note {
  display: inline-block; margin-top: 6px; padding: 5px 11px; border-radius: 12px; background: var(--warn-bg);
  color: var(--warn-ink); font-size: 13px; font-weight: 500; line-height: 1.4;
}
.rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rd-actions .rd-btn { flex: 1 1 auto; }
.rd-qty {
  display: inline-flex; align-items: center; gap: 8px; flex: 1 1 100%; min-height: 42px; padding: 0 6px 0 12px;
  border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface);
}
.rd-qty:focus-within { border-color: var(--purple-line); box-shadow: var(--ring); }
.rd-qty__label { color: var(--text-3); font-size: 13px; font-weight: 500; white-space: nowrap; }
.rd-qty__input {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 38px; border: 0; background: transparent; font-family: var(--mono);
  font-size: 14px; font-weight: 500; -moz-appearance: textfield; appearance: textfield;
}
.rd-qty__input::-webkit-outer-spin-button, .rd-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-qty__input:focus-visible { box-shadow: none; }
.rd-qty__input { text-overflow: ellipsis; }
.rd-qty__input::placeholder { color: var(--text-2); opacity: 1; }
.rd-chips--summary { margin: 16px 0 18px; }

.rd-grid { display: grid; grid-template-columns: 1fr; gap: 14px; transition: opacity 0.2s; }
.rd-grid.is-stale { opacity: 0.5; pointer-events: none; }

/* A card (rd-core cardEl): a photo-led top at a fixed shape, then the name, the industry and place, the masked
   phone, one quiet row of facts and two quiet footer actions. No check dates. */
.rd-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1);
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  animation: rd-card-in 0.38s var(--ease) both;
}
.rd-card:hover { border-color: rgba(239, 6, 192, 0.35); box-shadow: var(--shadow-pink); transform: translateY(-2px); }
.rd-card.is-picked { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple-soft), var(--shadow-pink); }
@keyframes rd-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The top: the photo covers it; underneath, a drawn stand-in in one of six soft tones (RD.util.mediaTone), so a
   business without a photo, or a photo that fails, still looks finished. */
.rd-card__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex: 0 0 auto;
  --tone-a: rgba(239, 6, 192, 0.22); --tone-b: rgba(180, 44, 255, 0.16); --tone-ink: #a3047f; --tone-bg: #fbf3fa;
  background:
    radial-gradient(120% 95% at 12% 8%, var(--tone-a), transparent 62%),
    radial-gradient(95% 95% at 92% 96%, var(--tone-b), transparent 62%),
    var(--tone-bg);
}
.rd-card__media--t1 { --tone-a: rgba(124, 77, 255, 0.22); --tone-b: rgba(59, 130, 246, 0.16); --tone-ink: #5b34c9; --tone-bg: #f5f3fd; }
.rd-card__media--t2 { --tone-a: rgba(244, 63, 94, 0.18); --tone-b: rgba(251, 146, 60, 0.18); --tone-ink: #b4233f; --tone-bg: #fdf4f3; }
.rd-card__media--t3 { --tone-a: rgba(20, 184, 166, 0.2); --tone-b: rgba(56, 189, 248, 0.18); --tone-ink: #0f7a70; --tone-bg: #f1f9f8; }
.rd-card__media--t4 { --tone-a: rgba(245, 158, 11, 0.2); --tone-b: rgba(239, 6, 192, 0.12); --tone-ink: #a35a06; --tone-bg: #fdf8ef; }
.rd-card__media--t5 { --tone-a: rgba(79, 70, 229, 0.2); --tone-b: rgba(6, 182, 212, 0.16); --tone-ink: #4338ca; --tone-bg: #f3f5fd; }
.rd-card__media::before {
  /* a faint dot grid over the stand-in */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(rgba(14, 18, 48, 0.07) 1px, transparent 1.2px); background-size: 14px 14px;
}
.rd-card__media::after {
  /* the photo's shade, so the pills read on any picture */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: linear-gradient(180deg, rgba(14, 18, 48, 0.42) 0%, rgba(14, 18, 48, 0) 36%, rgba(14, 18, 48, 0) 68%, rgba(14, 18, 48, 0.3) 100%);
}
.rd-card__media.is-loaded::after { opacity: 1; }
.rd-card__fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 0 18px; user-select: none;
}
.rd-card__mono {
  display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.92); color: var(--tone-ink); font-size: 25px; font-weight: 700; letter-spacing: -0.04em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 24px -12px rgba(14, 18, 48, 0.35), 0 0 0 1px rgba(14, 18, 48, 0.05);
}
.rd-card__fb-ind {
  /* a long industry ("Handyman/Handywoman/Handyperson") takes a second line instead of an ellipsis */
  max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.3;
  color: var(--tone-ink); opacity: 0.78; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.rd-card__img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 0.35s, transform 0.5s var(--ease);
}
.rd-card__media.is-loaded .rd-card__img { opacity: 1; }
.rd-card:hover .rd-card__img { transform: scale(1.035); }

/* The rating pill on the left, the one status pill on the right */
.rd-card__pills {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px; pointer-events: none;
}
.rd-card__pills .rd-pill {
  background: rgba(14, 18, 48, 0.62); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.rd-card__media.is-nophoto .rd-card__pills .rd-pill { background: rgba(14, 18, 48, 0.74); }
.rd-pill--rating { font-family: var(--mono); font-size: 12px; }
.rd-pill--rating .rd-ico { color: var(--gold); }
.rd-pill__sub { color: rgba(255, 255, 255, 0.7); font-weight: 500; }
.rd-pill__sub::before { content: '('; }
.rd-pill__sub::after { content: ')'; }
.rd-card__pills .rd-pill--status { margin-left: auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.rd-card__pills .rd-pill--warn,
.rd-card__media.is-nophoto .rd-card__pills .rd-pill--warn { background: rgba(255, 228, 191, 0.96); color: #5a2e05; border-color: transparent; }
.rd-card__pills .rd-pill--owned,
.rd-card__media.is-nophoto .rd-card__pills .rd-pill--owned { background: var(--text); color: #fff; border-color: transparent; }

.rd-card__pick {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; width: 36px; height: 36px;
  align-items: center; justify-content: center; cursor: pointer;
}
.rd-card__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rd-check {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.92); border: 1.5px solid rgba(14, 18, 48, 0.18); color: transparent;
  box-shadow: 0 2px 8px -2px rgba(14, 18, 48, 0.35); transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.rd-card__pick:hover .rd-check { border-color: var(--purple); transform: scale(1.06); }
.rd-card__check:checked + .rd-check { background: var(--purple); border-color: var(--purple); color: #fff; }
.rd-card__check:focus-visible + .rd-check { box-shadow: var(--ring); }

/* The words */
.rd-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; padding: 14px 16px 14px; min-width: 0; }
.rd-card__name {
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.rd-card__meta {
  min-width: 0; margin-top: -3px; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;   /* a long industry never hides the city */
  color: var(--text-2); font-size: 13px;
}
.rd-card__ind { color: var(--purple-ink); font-weight: 600; }
.rd-dot { color: var(--text-3); padding: 0 5px; }
.rd-card__phone { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--text); font-size: 14.5px; }
.rd-card__phone .rd-ico { color: var(--text-3); flex: 0 0 auto; }
.rd-card__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.rd-fact {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 8px; border-radius: 7px;
  background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.rd-fact span { overflow: hidden; text-overflow: ellipsis; }
.rd-fact .rd-ico { flex: 0 0 auto; color: var(--text-3); }
/* An estimate's small "est." (SPEC 15.24): it never shrinks, the words before it give way first */
.rd-est { color: var(--text-3); font-size: 0.875em; font-weight: 500; white-space: nowrap; cursor: help; }
.rd-fact .rd-est { flex: 0 0 auto; overflow: visible; margin-left: -2px; }
.rd-fact--rank .rd-ico { color: var(--purple); }

/* Two quiet actions at the foot: Check on Google (every card) and the website (when there is one) */
.rd-card__foot {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  position: relative; top: 2px;
}
.rd-card__act {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 34px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.rd-card__act:hover { border-color: var(--purple-line); background: var(--purple-wash); color: var(--purple-ink); }
.rd-card__act .rd-ico { flex: 0 0 auto; }
.rd-card__google { flex: 1 0 auto; color: var(--purple-ink); }   /* its words always show whole; alone on its row it fills it */
.rd-card__google:only-child { flex: 1 1 auto; }
.rd-card__google .rd-ico { color: var(--purple); }
.rd-card__site { flex: 1 1 auto; max-width: 100%; }   /* too long beside Check on Google: it wraps to its own row */
.rd-card__host { overflow: hidden; text-overflow: ellipsis; }
.rd-card__site .rd-ico { color: var(--text-3); }

/* Loading cards */
.rd-card--skel { cursor: default; animation: none; box-shadow: none; }
.rd-card--skel:hover { transform: none; box-shadow: none; border-color: var(--border); }
.rd-card--skel .rd-card__body { gap: 10px; }
.rd-shimmer {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 45%, var(--surface-2) 90%);
  background-size: 220% 100%; animation: rd-shimmer 1.4s linear infinite;
}
.rd-card--skel .rd-card__media.rd-shimmer { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 45%, var(--surface-2) 90%); background-size: 220% 100%; }
.rd-card--skel .rd-card__media::after, .rd-card--skel .rd-card__media::before { display: none; }
.rd-skel { display: block; height: 12px; width: 70%; border-radius: 6px; }
.rd-skel--title { height: 16px; width: 82%; }
.rd-skel--short { width: 46%; }
.rd-skel--foot { height: 34px; width: 100%; margin-top: 8px; border-radius: 9px; }
@keyframes rd-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Empty and error */
.rd-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 20px; margin-top: 4px;
  text-align: center; border: 1px dashed var(--border-2); border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.7);
}
.rd-empty__text { max-width: 440px; color: var(--text-2); font-size: 15px; }

/* Locked cards: blurred placeholders with the count of the rest and one call to action */
.rd-locked { position: relative; margin-top: 14px; min-height: 300px; }
.rd-locked__ghosts { display: grid; grid-template-columns: 1fr; gap: 14px; filter: blur(5px); opacity: 0.75; pointer-events: none; user-select: none; }
.rd-ghost { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.rd-ghost:nth-child(n + 3) { display: none; }   /* two rows of the grid's columns */
.rd-ghost__photo { display: block; height: 120px; background: linear-gradient(135deg, rgba(239, 6, 192, 0.2), rgba(180, 44, 255, 0.14)); }
.rd-ghost__line { display: block; height: 11px; width: 60%; margin: 0 16px; border-radius: 6px; background: var(--surface-3); }
.rd-ghost__line--w { width: 78%; height: 14px; }
.rd-ghost__line--s { width: 38%; }
.rd-locked__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 8px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 20px; text-align: center;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--purple-line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-pink);
}
.rd-locked__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--purple-soft); color: var(--purple-ink);
}
.rd-locked__title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.rd-locked__line { color: var(--text-2); font-size: 14.5px; text-wrap: pretty; }
.rd-locked__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; width: 100%; }
.rd-locked__actions .rd-btn { flex: 1 1 auto; }

.rd-more { display: flex; justify-content: center; margin-top: 18px; }
.rd-more.is-busy .rd-btn { opacity: 0.6; }

/* The bar for picked cards */
.rd-selbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -20px rgba(14, 18, 48, 0.4);
}
.rd-selbar__in { max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.rd-selbar__count { flex: 1 1 auto; font-weight: 600; font-size: 14.5px; }
.rd-has-sel .rd-results { padding-bottom: 110px; }

/* ------------------------------------------------------------------ *
 * Footer (no prices on this page: the checkout and the account panel show them)
 * ------------------------------------------------------------------ */
.rd-foot { border-top: 1px solid var(--border); }
.rd-foot__in {
  max-width: var(--wide); margin: 0 auto; padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px;
}
.rd-foot__in a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-2); }
@media (pointer: coarse), (max-width: 759px) {
  .rd-foot__in { row-gap: 0; }
  .rd-foot__in a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}
.rd-foot__in a:hover { color: var(--text); }
.rd-foot__entity { margin-left: auto; color: var(--text-3); }

/* ------------------------------------------------------------------ *
 * Dialogs: the scrim and the sheet shell (shared by every module)
 * ------------------------------------------------------------------ */
.rd-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(14, 18, 48, 0.42); opacity: 0; transition: opacity 0.2s;
}
.rd-scrim.is-open { opacity: 1; }
.rd-sheet {
  position: fixed; inset: 0; z-index: 71; display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.rd-sheet__panel {
  position: relative; width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
  overscroll-behavior: contain; padding: 26px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px -20px rgba(14, 18, 48, 0.45);
  transform: translateY(24px); opacity: 0; transition: transform 0.24s var(--ease), opacity 0.2s; pointer-events: auto;
}
.rd-sheet.is-open .rd-sheet__panel { transform: none; opacity: 1; }
.rd-sheet__close {
  position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2);
}
.rd-sheet__close:hover { background: var(--surface-3); color: var(--text); }
@media (pointer: coarse), (max-width: 759px) {
  .rd-sheet__close { right: 8px; top: 8px; width: 44px; height: 44px; }
  .rd-field__show { top: 1px; right: 1px; height: 44px; }
}
.rd-sheet__title { padding-right: 40px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.rd-sheet__sub { margin-top: 8px; color: var(--text-2); font-size: 14.5px; text-wrap: pretty; }
.rd-sheet__sub b { color: var(--text); overflow-wrap: anywhere; }

.rd-field { display: grid; gap: 6px; }
.rd-field__label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.rd-field__input {
  width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--surface); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s;
}
.rd-field__input:hover { border-color: var(--text-3); }
.rd-field__input:focus, .rd-field__input:focus-visible { border-color: var(--purple); box-shadow: var(--ring); border-radius: 10px; }
.rd-field__input[aria-invalid='true'] { border-color: var(--bad-ink); }
.rd-field__row { position: relative; }
.rd-field__row .rd-field__input { padding-right: 64px; }
.rd-field__show {
  position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600;
}

/* The sign-in sheet */
.rd-signin__view { display: flex; flex-direction: column; gap: 14px; }
.rd-signin__mark { font-size: 18px; font-weight: 700; letter-spacing: -0.035em; display: inline-flex; }
.rd-signin .rd-sheet__sub { margin-top: -6px; }
.rd-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; }
.rd-or::before, .rd-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
.rd-form { display: flex; flex-direction: column; gap: 12px; }
.rd-pw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-signin__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.rd-fine { color: var(--text-3); font-size: 12.5px; }
.rd-fine a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.rd-signin__sent-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--purple-soft); color: var(--purple-ink);
}
.rd-signin__sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* The sign-up bonus (owner 2026-11-04): the gift under the sheet's title, "Get 100 free credits" */
.rd-gift {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 6, 192, 0.1), rgba(239, 6, 192, 0.04));
  border: 1px solid var(--purple-line);
}
.rd-gift[hidden] { display: none; }
.rd-gift__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--purple); color: #fff; box-shadow: 0 8px 18px -10px rgba(239, 6, 192, 0.8);
}
.rd-gift__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-gift__title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--purple-ink); }
.rd-gift__sub { font-size: 14px; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.rd-signin .rd-gift + .rd-sheet__sub { margin-top: -4px; }

/* Toasts */
.rd-toasts {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.rd-has-sel .rd-toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
.rd-toast {
  display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 11px 14px; border-radius: 12px;
  background: var(--text); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s var(--ease); pointer-events: auto;
}
.rd-toast.is-in { opacity: 1; transform: none; }
.rd-toast--error { background: #3a0d1c; }
.rd-toast--ok .rd-ico { color: var(--purple-bright); flex: 0 0 auto; }
.rd-toast__text { flex: 1 1 auto; }
.rd-toast__btn { border: 0; background: none; color: var(--purple-bright); font-weight: 700; font-size: 14px; padding: 4px 2px; }

/* ------------------------------------------------------------------ *
 * Wider screens
 * ------------------------------------------------------------------ */
@media (min-width: 560px) {
  .rd-chip--extra { display: inline-flex; }
  .rd-grid, .rd-locked__ghosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-ghost:nth-child(n + 3) { display: flex; }
  .rd-ghost:nth-child(n + 5) { display: none; }
  .rd-qty { flex: 0 1 220px; }
  /* 220 px holds "All 999,999" at 16 px; a million or more gets 240 px (a wider box for every count pushed Send to
     GoHighLevel onto a row of its own at 560 to 570 px) */
  .rd-qty:has(.rd-qty__input[data-rd-qty-long]) { flex-basis: 240px; }
  .rd-actions .rd-btn { flex: 0 0 auto; }
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .rd-hero { padding-top: 64px; }
  /* The owner 2026-11-04: a bigger headline, and the line under it on one line. The line's size follows the width
     (about 0.9 x the viewport at most, so it always fits beside the gutters); under 720 px it wraps. */
  .rd-title { font-size: clamp(56px, 7.4vw, 84px); }
  .rd-lede { max-width: none; margin-top: 18px; font-size: clamp(16px, 2.3vw, 19px); white-space: nowrap; }
  .rd-search { flex-wrap: nowrap; padding: 14px 14px 14px 22px; gap: 14px; }
  .rd-search__word { font-size: 22px; padding-left: 0; }
  .rd-search__input { font-size: 22px; height: 48px; }
  .rd-search__tools { flex: 0 0 auto; }
  .rd-search__go { flex: 0 0 auto; padding: 0 22px; min-height: 48px; }
  .rd-icon-btn { width: 48px; height: 48px; }
  .rd-sheet { align-items: center; padding: 24px; }
  .rd-sheet__panel { width: 440px; max-width: 100%; border-radius: 20px; padding: 30px 28px 26px; transform: translateY(10px) scale(0.98); box-shadow: 0 30px 80px -24px rgba(14, 18, 48, 0.5); }
  .rd-results__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .rd-actions { flex-wrap: nowrap; }
  /* The field is as wide as its count in its own monospace font, at 14 px or the 16 px a touch screen gets (ch is one
     character there, plus the field's padding), and the box follows it. A fixed 176 px box cut "All 12,430" to
     "All 12,43" (found 2026-11-11). rd-core marks the count's length: data-rd-qty-short up to "All 9,999" (about the
     old box), none up to "All 999,999", data-rd-qty-long for a million or more. Short counts stay short so the
     results heading beside the box keeps its room. */
  .rd-actions .rd-qty { flex: 0 0 auto; }
  .rd-actions .rd-qty__input { flex: 0 0 auto; width: 12ch; }
  .rd-actions .rd-qty__input[data-rd-qty-short] { width: 10ch; }
  .rd-actions .rd-qty__input[data-rd-qty-long] { width: 14ch; }
  .rd-summary { font-size: 27px; }
  .rd-toasts { align-items: flex-end; right: 24px; left: auto; }
}

@media (min-width: 900px) {
  /* three or more columns: beside a website, Check on Google is its pin alone (its words in aria-label and title),
     so the host reads whole instead of six letters */
  .rd-card__foot { flex-wrap: nowrap; }
  .rd-card__google:not(:only-child) { flex: 0 0 auto; width: 34px; padding: 0; }
  .rd-card__google:not(:only-child) .rd-card__google-l { display: none; }
  .rd-top__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logo slot nav'; }
  .rd-has-results .rd-top__slot { padding-top: 0; max-width: 640px; }
  .rd-grid, .rd-locked__ghosts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-ghost:nth-child(n + 5) { display: flex; }
  .rd-ghost:nth-child(n + 7) { display: none; }
}

@media (min-width: 1180px) {
  .rd-grid, .rd-locked__ghosts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rd-ghost:nth-child(n + 7) { display: flex; }
}

@media (max-width: 380px) {
  .rd-title { font-size: 36px; }
}

@media (hover: none) {
  .rd-card:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }
  .rd-card:hover .rd-card__img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------------ *
 * Phones, last so they win (SPEC 15.11): a coarse pointer, or a window under 760 px with a mouse (the query
 * rd-checkout.css uses). The compact top bar, the card's actions and pick box, the How many box, every control
 * 44 px; no word under 14 px, and the small uppercase labels read as plain words, as in Settings and the checkout.
 * Only the numeric badges (the filter count, the rating) stay at 12 px. A fine pointer on a wide screen keeps the
 * compact sizes above.
 * ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 759px) {
  .rd-btn, .rd-btn--quiet, .rd-top__signin { min-height: 44px; }
  .rd-chip, .rd-chip--pick, .rd-chip--recent, .rd-chip--add, .rd-chip--more, .rd-chip-note { min-height: 44px; }
  .rd-link { display: inline-flex; align-items: center; min-height: 44px; }
  .rd-logo { line-height: 44px; }
  .rd-icon-btn { width: 44px; height: 44px; }
  .rd-avatar { width: 44px; height: 44px; }
  .rd-opt { min-height: 44px; }
  .rd-menu__item { min-height: 44px; }
  .rd-toast__btn { min-height: 44px; padding: 0 6px; }
  .rd-top .rd-icon-btn { width: 44px; height: 44px; }
  .rd-top .rd-search__go { min-height: 44px; }
  .rd-top .rd-search__input { height: 44px; }
  .rd-card__act { height: 44px; min-height: 44px; font-size: 14px; }
  .rd-card__pick { width: 44px; height: 44px; right: 6px; bottom: 6px; }
  .rd-sheet__close { width: 44px; height: 44px; }
  .rd-qty { min-height: 44px; }
  /* the field itself is 44 px: it reaches over the box's 1 px border lines, so the box stays 44 px too; 16 px words,
     since iOS Safari zooms the page into a field under 16 px when it takes the focus (and the page pans sideways) */
  .rd-qty__input { height: 44px; min-height: 44px; margin: -1px 0; font-size: 16px; }
  .rd-foot__in { min-height: 44px; }
  .rd-card__meta, .rd-widened, .rd-place-note, .rd-chip, .rd-chip--add, .rd-chip-note, .rd-qty__label, .rd-opt__hint,
  .rd-opt__count, .rd-fine, .rd-or, .rd-foot__in, .rd-btn--quiet, .rd-field__label, .rd-field__show, .rd-menu__email,
  .rd-cycle { font-size: 14px; }
  .rd-fact { height: 28px; font-size: 14px; }
  .rd-est { font-size: 14px; }
  /* the words on the photo (the website's type, Yours) and beside the phone (Mobile) */
  .rd-pill { height: 26px; font-size: 14px; }
  .rd-pill--mobile { height: 24px; font-size: 14px; }
  .rd-pill--rating, .rd-badge { font-size: 12px; }
  /* Popular, Recent and the stand-in's industry: plain words, no small capitals */
  .rd-quick__label, .rd-card__fb-ind {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
}
@media (pointer: coarse) and (min-width: 900px) {
  .rd-card__google:not(:only-child) { width: 44px; }
}

/* ------------------------------------------------------------------ *
 * Any touch screen, whatever its width and whatever its main pointer (a touch laptop, a tablet with a trackpad, a
 * phone whose browser reports a fine pointer): every primary control is 44 px to tap, as on a phone (round 4's
 * last polish). Sizes only, the words keep theirs; last in the file, so it wins. A mouse alone on a wide screen keeps
 * the compact sizes above (SPEC 15.11).
 * ------------------------------------------------------------------ */
@media (any-pointer: coarse) {
  .rd-btn, .rd-btn--quiet, .rd-top__signin { min-height: 44px; }
  .rd-chip, .rd-chip--pick, .rd-chip--recent, .rd-chip--add, .rd-chip--more, .rd-chip--group, .rd-chip--filters,
  .rd-chip-note { min-height: 44px; }
  .rd-chip__x { position: relative; }
  .rd-chip__x::after { content: ''; position: absolute; inset: -10px; }
  .rd-top .rd-icon-btn { width: 44px; height: 44px; }
  .rd-top .rd-search__go { min-height: 44px; }
  .rd-top .rd-search__input { height: 44px; }
  .rd-avatar { width: 44px; height: 44px; }
  .rd-card__act { height: 44px; min-height: 44px; }
  .rd-card__pick { width: 44px; height: 44px; right: 6px; bottom: 6px; }
  .rd-qty { min-height: 44px; }
  .rd-qty__input { height: 44px; min-height: 44px; margin: -1px 0; }
  .rd-sheet__close { width: 44px; height: 44px; }
  .rd-link { display: inline-flex; align-items: center; min-height: 44px; }
  .rd-opt, .rd-menu__item, .rd-toast__btn { min-height: 44px; }
  .rd-foot__in a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}
@media (any-pointer: coarse) and (min-width: 900px) {
  .rd-card__google:not(:only-child) { width: 44px; }
}