/* OpenPageRank site, light custom layer on top of Bootstrap 5.3 (Bootswatch Cosmo).
   Brand accents use var(--bs-primary)/(--bs-primary-rgb) so they follow the active theme. */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1d2330; }
.navbar-brand { font-size: 1.25rem; letter-spacing: -.02em; }

.hero { background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%); }
.hero h1 { letter-spacing: -.02em; }
/* Landing hero headline: sized so it wraps to ~3 lines across desktop widths (container caps at 1320). */
.hero-title { font-size: 2.25rem; line-height: 1.15; }
.text-balance { text-wrap: balance; }

/* code blocks + tabs */
.code-block { background: #0f1115; color: #e6e6e6; padding: 1rem 1.25rem; margin: 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; }
.code-block code { color: inherit; background: none; padding: 0; white-space: pre; }
/* Code-sample tabs (opr_code_tabs): a light tab strip whose ACTIVE tab matches the dark code panel (#0f1115)
   with white text, so the tab and the code below read as one connected widget. (hero/steps + docs/mcp) */
.nav-tabs { border: 1px solid var(--bs-border-color); border-bottom: 0; border-radius: .5rem .5rem 0 0;
  background: #eef1f5; padding: .35rem .4rem 0; gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-radius: .4rem .4rem 0 0; color: #5b6472; font-size: .9rem;
  font-weight: 500; padding: .45rem 1rem; margin: 0; }
.nav-tabs .nav-link:hover { color: #0f1115; background: rgba(15, 17, 21, .05); }
.nav-tabs .nav-link.active { background: #0f1115; color: #fff; font-weight: 600; }
.tab-content { border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 .5rem .5rem; overflow: hidden; }
/* Hero/steps: the .code-card already provides a rounded, bordered frame, so drop these inner borders. */
.code-card .nav-tabs, .code-card .tab-content { border: 0; border-radius: 0; }
/* Landing hero/steps tabbed samples: hold the code area at a fixed min-height so switching the
   Request/Response tabs doesn't resize (and reflow) the card. */
.code-card .code-block { min-height: 18.5rem; }
/* Phones: the hero request/response sample has a long base-URL line; shrink the font so the card fits with
   no horizontal scrollbar. Display only (not meant to be read on mobile). Scoped to the hero/steps cards. */
@media (max-width: 575.98px) { .code-card .code-block { font-size: .62rem; } }
code { color: #b5179e; }
.code-inline { background: #f1f3f7; color: #344; padding: .12rem .4rem; border-radius: .25rem; font-size: .85em; }

/* feature cards */
.feature-icon { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .65rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 1.35rem; }
.card-plain { border: 1px solid #e9ecf1; border-radius: .75rem; }

/* endpoint + tables */
.endpoint { font-family: ui-monospace, monospace; }
.badge-method { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .02em; }
.api-table td, .api-table th { font-size: .9rem; vertical-align: top; }

/* pricing */
.price-num { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.plan-popular { border: 2px solid var(--bs-primary); box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), .10); }

/* try-it widget */
#tryit-output, #tryit-curl { background: #0f1115; color: #e6e6e6; border-radius: .5rem; padding: 1rem;
  font-family: ui-monospace, monospace; font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
#tryit-output { max-height: 460px; overflow: auto; }

/* docs side nav */
.docs-toc a { color: #5b6472; text-decoration: none; display: block; padding: .15rem 0; font-size: .92rem; }
.docs-toc a:hover { color: var(--bs-primary); }
h2[id], h3[id] { scroll-margin-top: 5rem; }
.prose p, .prose li { line-height: 1.7; }
.prose h2 { margin-top: 2.5rem; }