/* ============================================================
   HostMyBlog docs — surface layer, rebuilt to the approved
   RankReady page (rankready.css .rr-item). Hard rules:
     · no divider or hairline lines anywhere. separation is
       spacing and fills, never a drawn line.
     · one card pattern, copied from .rr-item: a single soft
       outline, 13px radius, hover lift + green border + shadow.
       no nested trays, no internal rules.
     · match the approved page, do not invent.
   Loaded after docs.css so it also neutralises the lines that
   sheet drew.
   ============================================================ */

:root{
  --docs-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Accent per section, one variable so a brand or a category recolours
   its whole surface. Hub is neutral coral; RankReady scope is green. */
[data-accent="coral"]{ --a: var(--coral);  --a-12: var(--coral-12); }
[data-accent="blue"] { --a: var(--blue);   --a-12: var(--blue-12); }
[data-accent="gold"] { --a: var(--gold);   --a-12: var(--gold-12); }
[data-accent="teal"] { --a: var(--teal);   --a-12: var(--teal-12); }
.docs-hub, .docs-single, .docs-tax, .docs-search-results{ --a: var(--coral); --a-12: var(--coral-12); }

.docs-brand-rankready{
  --a:    #0B7A57;
  --a-12: rgba(11,122,87,0.11);
  --grad: linear-gradient(110deg, #0B7A57 0%, #12A374 52%, #17C489 100%);
}

/* Kill every line the base docs.css draws. Separation is space now. */
.docs-list li{ border:0 !important; }
.docs-nav-group a{ border:0 !important; }
.docs-section-title{ border:0 !important; }

/* ── Hero ──────────────────────────────────────────────────── */

.docs-hero{
  position:relative;
  padding:clamp(60px,7vh,96px) var(--gutter) var(--space-lg);
  text-align:center;
  isolation:isolate;
}
.docs-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(56% 70% at 50% 0%, var(--a-12), transparent 66%);
  opacity:.6;
  pointer-events:none;
}
.docs-hero-inner{ max-width:720px; margin:0 auto; }
.docs-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--a);
  margin-bottom:12px;
}
.docs-hero .h1{
  font-size:clamp(34px,4.6vw,52px);
  line-height:1.06;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}
.docs-hero-sub{
  font-family:var(--font-sans);
  font-size:clamp(15.5px,1.3vw,17px);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 auto var(--space-md);
}
.docs-hero-meta{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--muted);
}
.docs-hero--product{ padding-top:clamp(40px,5vh,68px); }

/* ── Search field (an input, so it keeps its own outline) ──── */

.docs-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:560px;
  margin:0 auto;
}
.docs-search-ic{
  position:absolute;
  left:18px;
  top:0;
  height:50px;            /* anchor to the input row (input is 50px), so when the
                            field wraps to two rows on mobile the icon stays over
                            the input instead of dropping into the gap */
  display:grid;
  place-items:center;
  pointer-events:none;
  color:var(--muted);
}
.docs-search-ic .ic{ width:17px; height:17px; }
.docs-search input[type="search"]{
  flex:1;
  min-width:0;
  height:50px;
  padding:0 var(--space-sm) 0 44px;
  font-family:var(--font-sans);
  font-size:15.5px;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:999px;
  outline:none;
  -webkit-appearance:none;
  box-shadow:var(--shadow-card);
  transition:border-color .4s var(--docs-ease);
}
.docs-search input[type="search"]::placeholder{ color:var(--muted); }
.docs-search input[type="search"]:focus{ border-color:color-mix(in srgb, var(--a) 44%, transparent); }
.docs-search button{
  flex:none;
  height:50px;
  padding:0 24px;
  font-family:var(--font-sans);
  font-size:14.5px;
  font-weight:600;
  color:#fff;
  background:var(--grad);
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:filter .4s var(--docs-ease), transform .4s var(--docs-ease);
}
.docs-search button:hover{ filter:brightness(1.06); }
.docs-search button:active{ transform:scale(0.97); }

/* ── Wrap + block headers ──────────────────────────────────── */

.docs-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) var(--space-2xl); }
.docs-single.is-product .docs-wrap,
.docs-hub .docs-wrap{ padding-top:0; }

.docs-block{ margin-top:clamp(36px,4.5vw,60px); }
.docs-block:first-child{ margin-top:var(--space-lg); }
.docs-block-head{ margin-bottom:var(--space-md); }
.docs-block-title{
  font-family:var(--font-display);
  font-size:clamp(23px,2.4vw,30px);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.15;
  margin:0 0 5px;
}
.docs-block-sub{ font-size:15px; color:var(--ink-soft); margin:0; }

/* ── The one card, copied from .rr-item ────────────────────── */

.docs-cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.docs-cat-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:22px 22px 18px;
  transition:border-color .26s var(--docs-ease), transform .26s var(--docs-ease), box-shadow .26s var(--docs-ease);
}
.docs-cat-card:hover{
  border-color:color-mix(in srgb, var(--a) 34%, transparent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}
.docs-cat-inner{ display:contents; }
.docs-cat-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.docs-cat-ic{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--a-12);
  color:var(--a);
}
.docs-cat-ic .ic{ width:18px; height:18px; }
.docs-cat-count{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.docs-cat-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 5px;
}
.docs-cat-title a{ color:var(--ink); text-decoration:none; }
.docs-cat-title a:hover{ color:var(--a); }
.docs-cat-blurb{
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.docs-cat-links{
  list-style:none;
  margin:0 0 14px;
  padding:0;
}
.docs-cat-links li + li{ margin-top:1px; }
.docs-cat-links a{
  display:block;
  padding:7px 10px;
  margin:0 -10px;
  font-size:14px;
  line-height:1.4;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:8px;
  transition:background .3s var(--docs-ease), color .3s var(--docs-ease);
}
.docs-cat-links a:hover{ background:var(--a-12); color:var(--ink); }
.docs-cat-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  font-size:14px;
  font-weight:600;
  color:var(--a);
  text-decoration:none;
}
.docs-cat-arrow{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--a-12);
  transition:transform .3s var(--docs-ease);
}
.docs-cat-arrow .ic{ width:12px; height:12px; }
.docs-cat-card:hover .docs-cat-arrow{ transform:translateX(3px); }

/* ── Product cards (hub), same card ────────────────────────── */

.docs-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
}
.docs-product-card{
  display:block;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .26s var(--docs-ease), transform .26s var(--docs-ease), box-shadow .26s var(--docs-ease);
}
.docs-product-card:hover{
  border-color:color-mix(in srgb, var(--a) 34%, transparent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}
.docs-product-inner{ display:flex; gap:16px; padding:22px; }
.docs-product-ic{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--a-12);
  color:var(--a);
}
.docs-product-ic .ic{ width:20px; height:20px; }
.docs-product-body{ display:block; min-width:0; }
.docs-product-name{
  display:block;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:4px;
}
.docs-product-desc{
  display:block;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-bottom:12px;
}
.docs-product-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--a);
}
.docs-arrow{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--a-12);
  transition:transform .3s var(--docs-ease);
}
.docs-arrow .ic{ width:11px; height:11px; }
.docs-product-card:hover .docs-arrow{ transform:translateX(3px); }

/* ── Section archive ───────────────────────────────────────── */

.docs-tax-head{
  display:flex;
  gap:16px;
  align-items:flex-start;
  max-width:var(--maxw);
  margin:0 auto var(--space-lg);
  padding:var(--space-md) var(--gutter) 0;
}
.docs-tax-ic{
  flex:none;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--a-12);
  color:var(--a);
}
.docs-tax-ic .ic{ width:25px; height:25px; }
.docs-tax-headings{ min-width:0; }
.docs-tax-headings .h1{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 8px;
}
.docs-tax-headings .article-standfirst{
  font-family:var(--font-sans);
  font-size:16.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:62ch;
  margin:0;
  padding:0;
}
.docs-tax-count{
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
/* Rows are cards, spaced apart, no dividers. */
.docs-tax-list{ list-style:none; margin:0; padding:0; max-width:900px; }
.docs-tax-list li + li{ margin-top:10px; }
.docs-tax-list a{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  transition:border-color .26s var(--docs-ease), transform .26s var(--docs-ease), box-shadow .26s var(--docs-ease);
}
.docs-tax-list a:hover{
  border-color:color-mix(in srgb, var(--a) 34%, transparent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}
.docs-tax-body{ flex:1; min-width:0; }
.docs-tax-title{ display:block; font-size:16px; font-weight:600; color:var(--ink); }
.docs-tax-desc{ display:block; font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:3px; }
.docs-tax-arrow{
  flex:none;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:var(--a-12);
  color:var(--a);
  transition:transform .3s var(--docs-ease);
}
.docs-tax-arrow .ic{ width:12px; height:12px; }
.docs-tax-list a:hover .docs-tax-arrow{ transform:translateX(3px); }
.docs-tax-siblings{ padding-top:var(--space-lg); }

/* ── Article layout: sidebar · prose · TOC ─────────────────── */

.docs-single.is-article .docs-layout{
  display:grid;
  grid-template-columns:248px minmax(0,1fr) 196px;
  gap:clamp(28px,3vw,52px);
  align-items:start;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter) var(--space-2xl);
}
.docs-crumbs{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--space-sm) var(--gutter) var(--space-md);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.docs-crumbs a{ color:var(--muted); text-decoration:none; }
.docs-crumbs a:hover{ color:var(--a); }
.docs-crumbs [aria-current]{ color:var(--ink); }
.docs-crumbs span[aria-hidden]{ margin:0 8px; opacity:.5; }

/* Sidebar: white, category-first, no lines. Current item is a green
   fill, not a rail. */
.docs-sidebar{ position:sticky; top:96px; }
.docs-sidebar-inner{ padding:0; }
.docs-sidebar-product{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  margin-bottom:12px;
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  font-family:var(--font-sans);
}
.docs-sidebar-ic{
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--a-12);
  color:var(--a);
}
.docs-sidebar-ic .ic{ width:16px; height:16px; }
.docs-sidebar-product strong{
  display:block;
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
}
.docs-sidebar-product small{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}
.docs-sidebar-product:hover strong{ color:var(--a); }

.docs-sidebar .docs-search{ max-width:none; margin:0 0 12px; }
.docs-sidebar .docs-search input[type="search"]{ height:40px; font-size:13.5px; padding-left:38px; box-shadow:none; }
.docs-sidebar .docs-search-ic{ left:13px; height:40px; }
.docs-sidebar .docs-search-ic .ic{ width:14px; height:14px; }
.docs-sidebar .docs-search button{ display:none; }

.docs-nav-group{ margin:0; }
.docs-nav-group + .docs-nav-group{ margin-top:2px; }
.docs-nav-group > summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  font-family:var(--font-sans);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  border-radius:10px;
  cursor:pointer;
  list-style:none;
  transition:background .3s var(--docs-ease), color .3s var(--docs-ease);
}
.docs-nav-group > summary::-webkit-details-marker{ display:none; }
.docs-nav-group > summary:hover{ background:var(--a-12); color:var(--ink); }
.docs-nav-group[open] > summary{ color:var(--ink); }
.docs-nav-ic{
  flex:none;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:var(--a-12);
  color:var(--a);
}
.docs-nav-ic .ic{ width:13px; height:13px; }
.docs-nav-name{ flex:1; min-width:0; }
.docs-nav-count{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}
.docs-nav-caret{
  flex:none;
  display:grid;
  place-items:center;
  color:var(--muted);
  transition:transform .3s var(--docs-ease);
}
.docs-nav-caret .ic{ width:12px; height:12px; }
.docs-nav-group[open] > summary .docs-nav-caret{ transform:rotate(180deg); }
.docs-nav-group > ul{ margin:2px 0 8px; padding:0 0 0 36px; list-style:none; }
.docs-nav-group a{
  display:block;
  padding:7px 11px;
  margin:1px 0;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
  text-decoration:none;
  border-radius:8px;
  transition:color .3s var(--docs-ease), background .3s var(--docs-ease);
}
.docs-nav-group a:hover{ color:var(--ink); background:var(--a-12); }
.docs-nav-group li.is-current > a{ color:var(--a); font-weight:600; background:var(--a-12); }

/* ── Article body ──────────────────────────────────────────── */

.docs-main{ min-width:0; }
.docs-article-head{ margin-bottom:var(--space-md); }
.docs-article-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:14px;
  padding:5px 12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--a);
  text-decoration:none;
  background:var(--a-12);
  border-radius:999px;
}
.docs-article-kicker .ic{ width:13px; height:13px; }
.docs-main .h1{ font-size:clamp(30px,3.4vw,40px); line-height:1.08; letter-spacing:-0.02em; margin:0 0 12px; }
.docs-main .article-standfirst{ font-family:var(--font-sans); font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0; padding:0; max-width:70ch; }
.docs-updated{ margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.docs-prose{ font-size:16.5px; line-height:1.72; padding:0; margin:0; max-width:74ch; }
.docs-prose h2{ font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.01em; margin:34px 0 12px; scroll-margin-top:96px; }
.docs-prose h3{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:26px 0 10px; scroll-margin-top:96px; }
.docs-prose p{ margin:0 0 16px; }
.docs-prose ul, .docs-prose ol{ margin:0 0 16px; padding-left:22px; }
.docs-prose li{ margin:0 0 7px; }
.docs-prose li::marker{ color:var(--a); }
.docs-prose img{ max-width:100%; height:auto; border-radius:var(--radius); margin:20px 0; }
.docs-prose code{ font-family:var(--font-mono); font-size:0.88em; background:var(--paper); padding:0.14em 0.4em; border-radius:5px; overflow-wrap:anywhere; }
.docs-prose pre{ background:var(--night); color:#F4F8F6; padding:18px 20px; border-radius:var(--radius); overflow-x:auto; margin:20px 0; }
.docs-prose pre code{ background:none; padding:0; color:inherit; }
.docs-prose a{ color:var(--a); text-underline-offset:2px; }

.docs-topics{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.docs-topics a{
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:none;
  background:var(--paper);
  padding:6px 13px;
  border-radius:999px;
  transition:color .3s var(--docs-ease), background .3s var(--docs-ease);
}
.docs-topics a:hover{ color:var(--a); background:var(--a-12); }

/* Pager: two cards, no lines. */
.docs-pager{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--space-xl); }
.docs-pager a{
  display:block;
  padding:16px 18px;
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  transition:border-color .26s var(--docs-ease), transform .26s var(--docs-ease), box-shadow .26s var(--docs-ease);
}
.docs-pager a:hover{ border-color:color-mix(in srgb, var(--a) 34%, transparent); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.docs-pager span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.docs-pager strong{ display:block; margin-top:5px; font-size:15px; color:var(--ink); font-weight:600; }
.docs-pager-next{ text-align:right; }

/* On this page: no rail line, active = green text. */
.docs-toc{ position:sticky; top:96px; }
.docs-toc[hidden]{ display:none; }
.docs-toc-title{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.docs-toc-list{ list-style:none; margin:0 0 14px; padding:0; }
.docs-toc-list a{ display:block; padding:5px 0; font-size:13px; line-height:1.45; color:var(--muted); text-decoration:none; transition:color .3s var(--docs-ease); }
.docs-toc-list a:hover{ color:var(--ink); }
.docs-toc-list a.is-active{ color:var(--a); font-weight:600; }
.docs-toc-list .is-h3 a{ padding-left:14px; font-size:12.5px; }
.docs-toc-top{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-decoration:none; }
.docs-toc-top:hover{ color:var(--a); }

/* ── Live search dropdown, no foot line ────────────────────── */

.docs-search-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:40;
  max-height:min(62vh, 460px);
  overflow-y:auto;
  padding:8px;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  text-align:left;
}
.docs-search-panel[hidden]{ display:none; }
.docs-search-empty{ padding:14px 16px; font-size:14px; color:var(--muted); }
.docs-sr{ display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:10px; text-decoration:none; }
.docs-sr:hover, .docs-sr.is-active{ background:var(--a-12); }
.docs-sr-ic{ flex:none; display:grid; place-items:center; width:30px; height:30px; margin-top:1px; border-radius:9px; background:var(--a-12); color:var(--a); }
.docs-sr-ic .ic{ width:15px; height:15px; }
.docs-sr-body{ min-width:0; flex:1; }
.docs-sr-title{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.docs-sr-sec{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); line-height:1.4; }
.docs-sr mark{ background:color-mix(in srgb, var(--a) 22%, transparent); color:inherit; border-radius:2px; padding:0 1px; }
.docs-search-foot{ padding:9px 12px 5px; margin-top:4px; font-size:12px; color:var(--muted); }
.docs-search-foot kbd{ font-family:var(--font-mono); font-size:11px; background:var(--paper); border-radius:5px; padding:1px 5px; }

.docs-empty{ padding:40px 0; text-align:center; color:var(--muted); }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width:1180px){
  .docs-single.is-article .docs-layout{ grid-template-columns:236px minmax(0,1fr); }
  .docs-toc{ display:none; }
}
@media (max-width:900px){
  .docs-single.is-article .docs-layout{ grid-template-columns:1fr; }
  .docs-sidebar{ position:static; }
  .docs-tax-head{ flex-direction:column; gap:14px; }
}
@media (max-width:640px){
  .docs-cat-grid, .docs-product-grid{ grid-template-columns:1fr; }
  .docs-pager{ grid-template-columns:1fr; }
  .docs-pager-next{ text-align:left; }
  .docs-search{ flex-wrap:wrap; }
  .docs-search input[type="search"]{ flex:1 1 100%; }
  .docs-search button{ flex:1 1 100%; border-radius:999px; }
}
@media (prefers-reduced-motion: reduce){
  .docs-cat-card, .docs-product-card, .docs-tax-list a, .docs-pager a,
  .docs-cat-arrow, .docs-arrow, .docs-tax-arrow, .docs-nav-caret{ transition:none; }
  .docs-cat-card:hover, .docs-product-card:hover, .docs-tax-list a:hover, .docs-pager a:hover{ transform:none; }
}

/* ── Docs carousel on the RankReady landing page ───────────── */

.rr-docs-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg); text-align:left; max-width:none; }
.rr-docs-head .lead{ margin-bottom:0; }
.rr-docs-cta{ flex:none; display:inline-flex; align-items:center; gap:10px; }
.rr-docs-cta-ic{ display:grid; place-items:center; width:28px; height:28px; margin-right:-8px; border-radius:999px; background:var(--coral-12); color:var(--coral); transition:transform .3s var(--docs-ease); }
.rr-docs-cta-ic .ic{ width:13px; height:13px; }
.rr-docs-cta:hover .rr-docs-cta-ic{ transform:translateX(3px); }
.rr-docs-rail{ position:relative; margin-top:var(--space-lg); }
.rr-docs-track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(288px, 1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 12px; scrollbar-width:thin; }
.rr-docs-track > *{ scroll-snap-align:start; }
.rr-docs-track::-webkit-scrollbar{ height:6px; }
.rr-docs-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.rr-docs-nav{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.rr-docs-rail.is-static .rr-docs-nav{ display:none; }
.rr-docs-btn{ display:grid; place-items:center; width:38px; height:38px; color:var(--ink-soft); background:var(--card); border:1px solid var(--line-2); border-radius:999px; cursor:pointer; transition:border-color .3s var(--docs-ease), color .3s var(--docs-ease), opacity .3s var(--docs-ease); }
.rr-docs-btn .ic{ width:15px; height:15px; }
.rr-docs-btn[data-rail="prev"] .ic{ transform:rotate(180deg); }
.rr-docs-btn:hover:not(:disabled){ border-color:color-mix(in srgb, var(--coral) 36%, transparent); color:var(--coral); }
.rr-docs-btn:disabled{ opacity:.34; cursor:default; }
@media (max-width:820px){
  .rr-docs-head{ flex-direction:column; align-items:flex-start; gap:var(--space-md); }
  .rr-docs-track{ grid-auto-columns:minmax(264px, 82%); }
}

/* Strict brand: on RankReady surfaces every category card is green, not a
   per-section rainbow. Icons stay distinct for scanning; colour does not. */
.docs-brand-rankready [data-accent],
.docs-brand-rankready[data-accent],
.rr [data-accent]{ --a:#0B7A57 !important; --a-12:rgba(11,122,87,0.11) !important; }

/* Zero the one-sided borders the base docs.css still draws on these
   containers (v1 rules the redefinitions above did not reset per-property). */
.docs-sidebar,
.docs-sidebar-inner,
.docs-updated,
.docs-pager,
.docs-article-head,
.docs-product-head,
.docs-crumbs,
.docs-toc,
.docs-toc-list a{ border:0 !important; }

/* ── v3 corrections ────────────────────────────────────────── */

/* Clear the sticky site header so the breadcrumb and kicker are not
   tucked underneath it on article and taxonomy pages. */
.docs-single.is-article .docs-crumbs,
.docs-tax .docs-crumbs{ padding-top:clamp(34px,5vh,56px); }
.docs-tax-head{ padding-top:clamp(20px,3vh,36px); }

/* The base sheet left these summaries uppercase with tracking, which made
   the longer section names collide with their count. Sentence case, no
   tracking, and the name truncates instead of overrunning. */
.docs-nav-group > summary{ text-transform:none !important; letter-spacing:0 !important; }
.docs-nav-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Product intro is part of the hero, tight and centred, not a floating
   prose block with the theme's 64px top margin. */
.docs-product-intro{
  max-width:62ch;
  margin:0 auto !important;
  padding:0 0 var(--space-xs);
  text-align:center;
  font-family:var(--font-sans);
  font-size:16.5px;
  line-height:1.66;
  color:var(--ink-soft);
}
.docs-product-intro > *{ margin:0; padding:0; }
.docs-product-intro p + p{ margin-top:var(--space-sm); }
.docs-product-intro a{ color:var(--a); }

/* ============================================================
   v3.1 — sidebar as a clean category list, richer cards
   ============================================================ */

/* Any leftover toggle arrow from the base sheet, gone. */
.docs-nav-group > summary::after,
.docs-nav-group > summary::marker{ content:none !important; display:none !important; }

/* Small back link where the boxed product header used to be. */
.docs-sidebar-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}
.docs-back-arrow{ display:grid; place-items:center; color:var(--a); }
.docs-back-arrow .ic{ width:13px; height:13px; transform:rotate(180deg); }
.docs-sidebar-back:hover{ color:var(--a); }

/* Category rows: spacious, one line each, no arrows, no dividers. The
   current category fills green; only it reveals its guides. */
.docs-nav{ display:flex; flex-direction:column; gap:4px; }
.docs-nav-cat{ display:flex; flex-direction:column; }
.docs-nav-cat-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border-radius:11px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  transition:background .3s var(--docs-ease), color .3s var(--docs-ease);
}
a.docs-nav-cat-head:hover{ background:var(--a-12); color:var(--ink); }
.docs-nav-cat-head.is-current{ color:var(--a); }
.docs-nav-cat-head .docs-nav-ic{
  flex:none;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--a-12);
  color:var(--a);
}
.docs-nav-cat-head .docs-nav-ic .ic{ width:15px; height:15px; }
.docs-nav-cat-head .docs-nav-name{ flex:1; min-width:0; }
.docs-nav-cat-head .docs-nav-count{ flex:none; font-family:var(--font-mono); font-size:11px; color:var(--muted); }

/* The current category's guides, indented, no rail line, current guide
   filled green. */
.docs-nav-articles{ list-style:none; margin:2px 0 8px; padding:0 0 0 41px; display:flex; flex-direction:column; gap:1px; }
.docs-nav-articles a{
  display:block;
  padding:7px 11px;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
  text-decoration:none;
  border-radius:8px;
  transition:color .3s var(--docs-ease), background .3s var(--docs-ease);
}
.docs-nav-articles a:hover{ color:var(--ink); background:var(--a-12); }
.docs-nav-articles li.is-current > a{ color:var(--a); font-weight:600; background:var(--a-12); }

/* ── Richer category cards ─────────────────────────────────── */

/* Four categories sit 2 x 2 on the product page: balanced, and each card
   has room for five guide links without going narrow. */
.docs-single.is-product .docs-cat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }

.docs-cat-card{ padding:24px 24px 20px; }
.docs-cat-top{ margin-bottom:16px; }
.docs-cat-ic{ width:44px; height:44px; border-radius:13px; }
.docs-cat-ic .ic{ width:21px; height:21px; }
.docs-cat-count{
  padding:3px 10px;
  border-radius:999px;
  background:var(--a-12);
  color:var(--a);
  font-weight:600;
}
.docs-cat-title{ font-size:20px; }
.docs-cat-links a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
}
.docs-cat-links a::before{
  content:'';
  flex:none;
  width:5px;
  height:5px;
  border-radius:999px;
  background:var(--a);
  opacity:.4;
  transition:opacity .3s var(--docs-ease), transform .3s var(--docs-ease);
}
.docs-cat-links a:hover::before{ opacity:1; transform:scale(1.3); }
.docs-cat-all{
  padding:9px 14px;
  border-radius:999px;
  background:var(--a-12);
}
.docs-cat-all:hover{ filter:brightness(0.97); }

@media (max-width:720px){
  .docs-single.is-product .docs-cat-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   v3.2 — clear the 74px fixed nav, full-width images
   ============================================================ */

/* The site nav is position:fixed, 74px. Every docs page must start below
   it or the first row (hero eyebrow, or the breadcrumb) hides behind it. */
.docs-hero{ padding-top:clamp(92px,10vh,124px); }
.docs-hero--product{ padding-top:clamp(84px,8vh,108px); }
.docs-single.is-article .docs-crumbs,
.docs-tax .docs-crumbs{ padding-top:clamp(98px,11vh,120px) !important; }
.docs-tax-head{ padding-top:0; }

/* Screenshots read as full-width figures the width of the prose column,
   not thumbnails. width:100% forces the column width; the soft outline
   keeps a light-background screenshot from bleeding into the page. */
.docs-prose img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  margin:22px 0;
}

/* Product page carries a breadcrumb before its hero, so it needs the same
   nav clearance; the hero top then shrinks since the crumb already spaces it. */
.docs-single.is-product .docs-crumbs{ padding-top:clamp(96px,10vh,116px) !important; }
.docs-hero--product{ padding-top:var(--space-sm); }

/* ============================================================
   v3.3 — wider content, real pagination
   ============================================================ */

/* The 1200px cap left the reading column narrow with a lot of empty
   right margin. Widen the docs shell and the prose measure. */
.docs-wrap,
.docs-crumbs,
.docs-tax-head,
.docs-single.is-article .docs-layout{ max-width:1320px; }
.docs-single.is-article .docs-layout{ grid-template-columns:244px minmax(0,1fr) 184px; gap:clamp(30px,3.2vw,60px); }
.docs-prose{ max-width:84ch; }
.docs-main .article-standfirst{ max-width:80ch; }
.docs-tax-list{ max-width:1000px; }

/* Pagination as pill buttons, centred, brand-green current page. Prev and
   Next carry arrows; the ellipsis is plain. No lines. */
.docs-pagination{ margin-top:var(--space-xl); }
.docs-pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.docs-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 15px;
  font-family:var(--font-sans);
  font-size:14.5px;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:12px;
  text-decoration:none;
  transition:border-color .26s var(--docs-ease), color .26s var(--docs-ease), transform .26s var(--docs-ease);
}
.docs-pagination a.page-numbers:hover{
  border-color:color-mix(in srgb, var(--a) 40%, transparent);
  color:var(--a);
  transform:translateY(-2px);
}
.docs-pagination .page-numbers.current{
  color:#fff;
  background:var(--grad);
  border-color:transparent;
}
.docs-pagination .page-numbers.dots{
  border:0;
  background:none;
  min-width:auto;
  padding:0 4px;
  color:var(--muted);
}
.docs-pagination .prev,
.docs-pagination .next{ padding:0 20px; }

/* ============================================================
   v3.4 — widen the reading column, clean full-width images
   ============================================================ */

/* The wide 64px gutters plus a 196px TOC squeezed the middle column to
   ~664px. Trim the gutters and the side rails so the reading column and
   its images get real width. */
.docs-single.is-article .docs-layout{
  max-width:1380px;
  grid-template-columns:228px minmax(0,1fr) 164px;
  gap:40px;
  padding-left:clamp(20px,3.5vw,44px);
  padding-right:clamp(20px,3.5vw,44px);
}
.docs-prose{ max-width:none; }

/* Images fill the column, clean: no frame, just a squircle and a soft
   shadow so a light screenshot still reads as a distinct object. */
.docs-prose img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(23,19,31,0.04), 0 18px 40px -24px rgba(23,19,31,0.28);
  margin:24px 0;
}
.docs-prose figure{ margin:24px 0; }
.docs-prose figure img{ margin:0; }
.docs-prose figcaption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* Must come last: the v3.4 desktop grid above would otherwise override the
   earlier mobile media query and force 3 columns onto a phone. */
@media (max-width:900px){
  .docs-single.is-article .docs-layout{
    grid-template-columns:1fr;
    gap:var(--space-lg);
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }
}

/* Live search on the RankReady landing docs section */
.rr-docs-search{ max-width:560px; margin:var(--space-lg) 0 4px; position:relative; z-index:5; }
.rr-docs-search .docs-search{ margin:0; }

/* ============================================================
   RankReady landing, product bento grid
   ============================================================ */
.rr-bento{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:214px;
  gap:16px;
  margin-top:var(--space-lg);
}
.rr-bento-card{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--docs-ease), box-shadow .3s var(--docs-ease);
}
.rr-bento-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.rr-bento-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
  display:block;
}
.rr-bento-card figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:1;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  background:rgba(5,6,7,0.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:6px 12px;
  border-radius:999px;
}
/* dashboard = the big tile; robots and webmcp = wide tiles */
.rr-bento-card:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.rr-bento-card:nth-child(2){ grid-column:span 2; }
.rr-bento-card:nth-child(5){ grid-column:span 2; }
.rr-bento-card:nth-child(6){ grid-column:span 2; }

@media (max-width:900px){
  .rr-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:176px; }
  .rr-bento-card{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .rr-bento-card:nth-child(1){ grid-column:span 2 !important; }
}
@media (max-width:560px){
  .rr-bento{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .rr-bento-card{ grid-column:span 1 !important; }
}

/* RankReady landing, product shot inside each feature layer aside */
.rr-layer-shot{
  margin:20px 0 0;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  background:var(--card);
  line-height:0;
}
.rr-layer-shot img{ display:block; width:100%; height:auto; }
@media (max-width:900px){
  .rr-layer-shot{ max-width:520px; }
}

/* ============================================================
   RankReady landing, feature bento (image on top of each card)
   ============================================================ */
.rr-feat-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
  margin-top:var(--space-lg);
}
.rr-feat{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--docs-ease), box-shadow .3s var(--docs-ease);
}
.rr-feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.rr-feat-shot{ margin:0; line-height:0; background:var(--paper); }
.rr-feat-shot img{
  display:block;
  width:100%;
  height:210px;
  object-fit:cover;
  object-position:top left;
}
.rr-feat-body{ padding:20px 22px 22px; }
.rr-feat-body h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 8px;
  color:var(--ink);
}
.rr-feat-body p{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0; }
.rr-feat.span3{ grid-column:span 3; }
.rr-feat.span2{ grid-column:span 2; }

@media (max-width:900px){
  .rr-feat-grid{ grid-template-columns:repeat(2,1fr); }
  .rr-feat.span3, .rr-feat.span2{ grid-column:span 1; }
  .rr-feat:first-child{ grid-column:span 2; }
}
@media (max-width:560px){
  .rr-feat-grid{ grid-template-columns:1fr; }
  .rr-feat{ grid-column:span 1 !important; }
  .rr-feat-shot img{ height:180px; }
}

/* Clear zoomed product image at the top of each feature layer */
.rr-layer-hero{
  grid-column:1 / -1;
  margin:0 0 6px;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  background:var(--card);
  line-height:0;
}
.rr-layer-hero img{ display:block; width:100%; height:auto; }