/* ============================================================
   HostMyBlog - RankReady product page
   Loaded only on page-templates/template-rankready.php.

   RankReady keeps its own palette (signal green on near-black)
   and its own product identity. Everything else is HostMyBlog:
   the type scale from styles.css, the .section / .wrap rhythm,
   .eyebrow / .lead / .btn / .feature-card / .step / .qa
   components, and the --space-* tokens.

   The .rr wrapper remaps the HostMyBlog signature tokens
   (--coral, --grad) to RankReady green, so every shared
   component picks the product colour up automatically. The
   wrapper sits inside <main>, so the nav and footer keep
   HostMyBlog coral.
   ============================================================ */

.rr {
  /* RankReady product identity, sampled from the product page */
  --rr-ink:       #050607;   /* product ground */
  --rr-surface:   #0B100E;
  --rr-surface-2: #131C19;
  --rr-green:     #38E59B;   /* signal green, dark grounds only */
  --rr-mint:      #7DF7C6;
  --rr-fg:        #F4F8F6;
  --rr-muted:     #A7B5AF;
  --rr-subtle:    #6F7E78;
  --rr-hairline:  rgba(125, 247, 198, 0.14);
  --rr-hairline-2: rgba(125, 247, 198, 0.07);

  /* the same green pulled down to pass contrast on warm paper */
  --rr-green-ink: #0B7A57;
  --rr-green-deep: #086145;
  --rr-green-12:  rgba(11, 122, 87, 0.11);

  /* HostMyBlog signature tokens, remapped for this page only */
  --coral: var(--rr-green-ink);
  --coral-deep: var(--rr-green-deep);
  --coral-12: var(--rr-green-12);
  --grad: linear-gradient(110deg, #0B7A57 0%, #12A374 52%, #17C489 100%);
  --grad-soft: linear-gradient(110deg, rgba(11,122,87,0.10), rgba(23,196,137,0.09) 52%, rgba(56,229,155,0.12));

  --rr-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- shared bits ---- */
.rr .eyebrow .ic { color: var(--rr-green-ink); }
.rr .feature-ico.i-rr { background: var(--rr-green-12); color: var(--rr-green-ink); }
.rr .tag--rr { background: var(--rr-green-12); color: var(--rr-green-deep); }

.rr-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--rr-fg);
}
.rr-wordmark .dot { color: var(--rr-green); }

/* ============================================================
   HERO  (RankReady ground)
   ============================================================ */
.rr-hero {
  background: var(--rr-ink);
  color: var(--rr-fg);
  padding-top: clamp(118px, 16vh, 176px);
  padding-bottom: clamp(48px, 6vw, 84px);
  position: relative;
  overflow: hidden;
}
/* One soft field of product colour behind the type. Fixed size, no
   animation, no blur on a scrolling container. */
.rr-hero::before {
  content: "";
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(56,229,155,0.16) 0%, rgba(56,229,155,0.05) 42%, transparent 68%);
  pointer-events: none;
}
.rr-hero > * { position: relative; z-index: 1; }

.rr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(30px, 4vw, 54px);
  align-items: center;
}

.rr-hero .eyebrow { color: var(--rr-muted); }
.rr-hero .eyebrow::before { background: var(--rr-green); }
.rr-hero .eyebrow .ic { color: var(--rr-green); }

/* Sized so the three authored lines fit the left column without re-wrapping.
   The cap is rem, not vw, because .wrap stops growing at --maxw while the
   viewport does not. */
.rr-hero h1 {
  color: var(--rr-fg);
  margin-top: 22px;
  line-height: 1.04;
  font-size: clamp(2.05rem, 3.4vw, 2.8rem);
  letter-spacing: -0.025em;
  text-wrap: normal;
}
.rr-hero h1 .rr-accent {
  background: linear-gradient(104deg, var(--rr-green) 0%, var(--rr-mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}
.rr-hero .lead { color: var(--rr-muted); margin-top: 28px; max-width: 52ch; }
.rr-hero .lead b { color: var(--rr-fg); font-weight: 500; }
.rr-hero .lead code {
  background: rgba(56,229,155,0.12);
  color: var(--rr-mint);
  overflow-wrap: anywhere;
}

.rr-hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.rr-btn-green {
  background: var(--rr-green);
  color: #04140D;
  font-weight: 600;
  box-shadow: 0 10px 30px -14px rgba(56,229,155,0.75);
}
.rr-btn-green:hover { background: var(--rr-mint); transform: translateY(-1px); }
.rr-btn-ghost { border: 1.5px solid rgba(244,248,246,0.26); color: var(--rr-fg); }
.rr-btn-ghost:hover { background: rgba(244,248,246,0.08); border-color: rgba(244,248,246,0.44); }

.rr-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--rr-subtle);
}
.rr-fine b { color: var(--rr-muted); font-weight: 500; }
.rr-fine .sep { color: var(--rr-green); opacity: 0.5; }

/* ---- Double-bezel product artifact ---- */
.rr-shell {
  background: rgba(244,248,246,0.045);
  border: 1px solid var(--rr-hairline);
  border-radius: 22px;
  padding: 7px;
  box-shadow: 0 40px 90px -46px rgba(0,0,0,0.9);
}
.rr-core {
  background: var(--rr-surface);
  border: 1px solid var(--rr-hairline-2);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.rr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--rr-hairline-2);
  background: rgba(255,255,255,0.02);
}
.rr-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,248,246,0.16);
  flex-shrink: 0;
}
.rr-bar .rr-url {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--rr-subtle);
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rr-bar .rr-url b { color: var(--rr-mint); font-weight: 500; }

.rr-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--rr-hairline-2);
  flex-wrap: wrap;
}
.rr-score .k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-subtle);
}
.rr-score .t { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--rr-fg); margin-top: 3px; }
.rr-score .n {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--rr-green);
  letter-spacing: -0.03em;
}
.rr-score .n span { display: block; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--rr-subtle); margin-top: 7px; text-transform: uppercase; }

.rr-signals { padding: 6px 22px 16px; }
.rr-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rr-hairline-2);
  font-size: 0.9rem;
  color: var(--rr-muted);
}
.rr-signal:first-child { border-top: none; }
.rr-signal .ic { color: var(--rr-green); font-size: 1.15rem; flex-shrink: 0; }
.rr-signal .t { flex: 1; min-width: 0; }
.rr-signal .s {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rr-green);
  background: rgba(56,229,155,0.1);
  border: 1px solid rgba(56,229,155,0.2);
  border-radius: 999px;
  padding: 0.32em 0.7em;
  white-space: nowrap;
  flex-shrink: 0;
}

.rr-bots { border-top: 1px solid var(--rr-hairline-2); background: rgba(0,0,0,0.28); padding: 15px 22px 18px; }
.rr-bots-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rr-subtle);
}
.rr-bots-head .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rr-green);
  box-shadow: 0 0 0 3px rgba(56,229,155,0.16);
}
.rr-bot {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 0.82rem;
  color: var(--rr-muted);
}
.rr-bot:first-of-type { margin-top: 6px; }
.rr-bot .av {
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  background: rgba(56,229,155,0.11); color: var(--rr-mint);
  flex-shrink: 0;
}
.rr-bot .t { flex: 1; min-width: 0; }
.rr-bot .t b { color: var(--rr-fg); font-weight: 500; }
.rr-bot .ago { font-family: var(--font-mono); font-size: 0.68rem; color: var(--rr-subtle); flex-shrink: 0; }

/* One entrance, on load, never scroll-dependent: it always completes,
   so content can never be stranded invisible. */
@media (prefers-reduced-motion: no-preference) {
  .rr-rise { animation: rr-rise 760ms var(--rr-ease) both; }
  .rr-rise-2 { animation-delay: 90ms; }
}
@keyframes rr-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   STAT STRIP  (continues the product ground)
   ============================================================ */
.rr-stats {
  background: var(--rr-ink);
  border-top: 1px solid var(--rr-hairline-2);
  padding-block: clamp(30px, 4vw, 46px);
}
.rr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rr-hairline-2);
  border: 1px solid var(--rr-hairline-2);
  border-radius: 16px;
  overflow: hidden;
}
.rr-stat { background: var(--rr-ink); padding: 26px 24px; }
.rr-stat .n {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rr-green);
}
.rr-stat .k { color: var(--rr-muted); font-size: 0.88rem; margin-top: 11px; line-height: 1.45; }

/* ============================================================
   LAYERS  (editorial split: sticky label left, items right)
   ============================================================ */
.rr-layer {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  padding-block: clamp(40px, 5vw, 68px);
  border-top: 1px solid var(--line);
}
.rr-layer:first-child { border-top: none; padding-top: 0; }

.rr-layer-aside { position: sticky; top: 104px; align-self: start; }
.rr-layer-aside .rr-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-green-deep);
  font-weight: 600;
}
.rr-layer-aside h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  margin-top: 12px;
  line-height: 1.14;
}
.rr-layer-aside p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 13px; line-height: 1.55; }

.rr-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rr-item {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 20px 21px;
  transition: border-color 260ms var(--rr-ease), transform 260ms var(--rr-ease), box-shadow 260ms var(--rr-ease);
}
.rr-item:hover {
  border-color: rgba(11,122,87,0.34);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.rr-item h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.rr-item p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin-top: 8px; }
.rr-item p a { color: var(--rr-green-deep); text-decoration: underline; text-underline-offset: 2px; }
.rr-item p code { overflow-wrap: anywhere; }
.rr-flag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: var(--rr-green-12);
  color: var(--rr-green-deep);
  white-space: nowrap;
}

/* Layer 06: shipping next, compact */
.rr-soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rr-soon-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 17px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
}
.rr-soon-item .ic { color: var(--muted); font-size: 1.05rem; margin-top: 2px; flex-shrink: 0; }
.rr-soon-item b { font-weight: 600; color: var(--ink); font-size: 0.94rem; }
.rr-soon-item span { display: block; color: var(--ink-soft); font-size: 0.87rem; margin-top: 4px; line-height: 1.5; }

/* ============================================================
   VALIDATORS  (dark band)
   ============================================================ */
.rr-band {
  background: var(--rr-ink);
  color: var(--rr-fg);
  position: relative;
  overflow: hidden;
}
.rr-band h2, .rr-band h3 { color: var(--rr-fg); }
.rr-band .eyebrow { color: var(--rr-muted); }
.rr-band .eyebrow::before { background: var(--rr-green); }
.rr-band .lead { color: var(--rr-muted); }

.rr-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.rr-check {
  background: rgba(244,248,246,0.04);
  border: 1px solid var(--rr-hairline);
  border-radius: 20px;
  padding: 7px;
}
.rr-check-core {
  background: var(--rr-surface);
  border: 1px solid var(--rr-hairline-2);
  border-radius: 14px;
  padding: 26px 26px 24px;
  height: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.rr-check .host {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--rr-green);
  overflow-wrap: anywhere;
}
.rr-check h3 { font-size: 1.35rem; margin-top: 9px; }
.rr-check ul { margin-top: 20px; }
.rr-check li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--rr-hairline-2);
  font-size: 0.9rem;
  color: var(--rr-muted);
}
.rr-check li:first-child { border-top: none; }
.rr-check li .ic { color: var(--rr-green); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.rr-check li b { display: block; color: var(--rr-fg); font-weight: 500; }
.rr-check .out { color: var(--rr-muted); font-size: 0.92rem; margin-top: 20px; line-height: 1.55; }
.rr-check .out b { color: var(--rr-fg); font-weight: 600; }
.rr-check .link-arrow { color: var(--rr-green); margin-top: 18px; }
.rr-check .link-arrow .ic { color: var(--rr-green); }
.rr-check .link-arrow:hover { color: var(--rr-mint); }

.rr-band-note {
  margin-top: 34px;
  padding: 22px 26px;
  border: 1px solid var(--rr-hairline);
  border-radius: 16px;
  background: rgba(56,229,155,0.05);
  color: var(--rr-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rr-band-note .ic { color: var(--rr-green); font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.rr-band-note b { color: var(--rr-fg); font-weight: 600; }

/* ============================================================
   CLOSING NOTE under the "why" grid
   ============================================================ */
.rr-note {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.rr-note .ic { color: var(--rr-green-ink); font-size: 1.45rem; flex-shrink: 0; margin-top: 1px; }
.rr-note b { color: var(--ink); font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .rr-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .rr-hero .lead { max-width: none; }
  .rr-layer { grid-template-columns: minmax(0, 1fr); }
  .rr-layer-aside { position: static; }
}
@media (max-width: 860px) {
  .rr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-check-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .rr-items, .rr-soon { grid-template-columns: minmax(0, 1fr); }
  .rr-hero-ctas .btn { width: 100%; }
  .rr-score { gap: 12px; }
  .rr-score .n { font-size: 2rem; }
  .rr-signal { flex-wrap: wrap; }
  .rr-signal .s { margin-left: 28px; }
}
@media (max-width: 460px) {
  .rr-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .rr-shell { padding: 5px; border-radius: 18px; }
  .rr-core { border-radius: 13px; }
  .rr-signals, .rr-score, .rr-bots { padding-inline: 16px; }
  .rr-bar { padding-inline: 13px; }
}

/* T9 — audit CTA in the VALIDATORS section (home page) */
.rr-audit-cta{max-width:680px;margin:32px auto 0;padding:22px 26px;border:1px solid var(--rr-hairline);border-radius:20px;background:rgba(56,229,155,0.05)}
.rr-audit-cta-copy{font-weight:600;color:var(--rr-fg);margin:0 0 14px}
.rr-audit-cta-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rr-audit-cta-form .field{flex:0 1 360px;margin:0}
.rr-audit-cta-form button{flex:none}

/* Feature-title links: new-tab arrow + hover underline, both inherit title color */
.rr-item h4 a{display:inline-flex;align-items:center;gap:0.35em;text-decoration:none}
.rr-item h4 a:hover{text-decoration:underline}
.rr-item h4 a .ic{width:0.7em;height:0.7em}