/* ============================================================================
   BrodVPN — static document pages (/reviews/, /contacts/, /terms/, /privacy/
   and the 404 page): header, prose typography, cards, footer.
   Loaded AFTER brand.css; uses only brand tokens. No React on these pages.
   ========================================================================== */

/* Shell: header on top, footer pinned to the bottom on short pages */
.doc-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.doc-header {
  width: 100%;
  max-width: var(--bv-w-wide);
  margin: 0 auto;
  padding: var(--bv-sp-5) var(--bv-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bv-sp-4);
}

.doc-main {
  flex: 1;
  width: 100%;
  max-width: var(--bv-w-prose);
  margin: 0 auto;
  padding: var(--bv-sp-6) var(--bv-gutter) var(--bv-section-pad);
}

.doc-main h1 {
  font-size: var(--bv-fs-h2);
  margin-bottom: var(--bv-sp-4);
}

.doc-lead {
  font-size: var(--bv-fs-lg);
  color: var(--bv-ink-soft);
  margin: 0 0 var(--bv-sp-6);
}

.doc-updated {
  color: var(--bv-ink-faint);
  font-size: var(--bv-fs-sm);
  margin: 0 0 var(--bv-sp-6);
}

/* Two-column content layout: article + cross-link sidebar.
   Used by guides, reviews and legal pages so no page is a dead end. */
.doc-layout {
  flex: 1;
  width: 100%;
  max-width: var(--bv-w-wide);
  margin: 0 auto;
  padding: var(--bv-sp-6) var(--bv-gutter) var(--bv-section-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bv-sp-7);
}
/* Sidebar sits beside the article once there's room for both */
@media (min-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
/* Inside the layout the article no longer centers/pads itself — the grid does */
.doc-layout > .doc-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.doc-aside {
  display: flex;
  flex-direction: column;
  gap: var(--bv-sp-4);
}
@media (min-width: 900px) {
  .doc-aside { position: sticky; top: var(--bv-sp-5); }
}

.doc-widget {
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-lg);
  padding: var(--bv-card-pad-sm);
}
.doc-widget--cta { background: var(--bv-ok-bg); border-color: var(--bv-ok-line); }
.doc-widget__cta-text { margin: 0 0 var(--bv-sp-4); color: var(--bv-ink); }
.doc-widget__title {
  margin: 0 0 var(--bv-sp-3);
  font-family: var(--bv-font-display);
  font-weight: 600;
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bv-ink-faint);
}
.doc-widget__links { list-style: none; margin: 0; padding: 0; }
.doc-widget__links li {
  position: relative;
  padding-left: var(--bv-sp-4);
  margin-bottom: var(--bv-sp-3);
}
.doc-widget__links li:last-child { margin-bottom: 0; }
.doc-widget__links li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--bv-r-pill);
  background: var(--bv-accent);
}
.doc-widget__links a { color: var(--bv-ink); text-decoration: none; font-weight: 500; }
.doc-widget__links a:hover { color: var(--bv-accent); }

/* Prose typography for legal/info text */
.doc-prose h2 {
  font-size: var(--bv-fs-h3);
  margin: var(--bv-sp-7) 0 var(--bv-sp-3);
}
.doc-prose p,
.doc-prose li {
  color: var(--bv-ink-soft);
}
.doc-prose p { margin: 0 0 var(--bv-sp-3); }
.doc-prose ul {
  margin: 0 0 var(--bv-sp-3);
  padding-left: var(--bv-sp-6);
}
.doc-prose li { margin-bottom: var(--bv-sp-2); }
.doc-prose strong { color: var(--bv-ink); }

/* White info card (contacts blocks etc.) */
.doc-card {
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-lg);
  padding: var(--bv-card-pad-sm);
  margin: 0 0 var(--bv-sp-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bv-sp-3);
}
.doc-card h2 { margin: 0; font-size: var(--bv-fs-h3); }
.doc-card p { margin: 0; color: var(--bv-ink-soft); }

/* Soft warning panel (e.g. honesty note on the reviews page) */
.doc-note {
  background: var(--bv-warn-bg);
  border: 1px solid var(--bv-warn-line);
  color: var(--bv-warn-ink);
  border-radius: var(--bv-r-md);
  padding: var(--bv-sp-4) var(--bv-sp-5);
  margin: 0 0 var(--bv-sp-6);
}

/* Reviews grid (static counterpart of the landing carousel) */
.doc-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--bv-sp-5);
  margin: 0 0 var(--bv-sp-6);
}
.doc-review {
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-lg);
  padding: var(--bv-card-pad-sm);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--bv-sp-4);
}
.doc-review blockquote {
  margin: 0;
  color: var(--bv-ink-soft);
}
.doc-review figcaption {
  display: flex;
  align-items: center;
  gap: var(--bv-sp-3);
}
.doc-review__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--bv-r-pill);
}
.doc-review__who {
  display: flex;
  flex-direction: column;
  font-size: var(--bv-fs-sm);
  color: var(--bv-ink-mute);
}
.doc-review__who strong { color: var(--bv-ink); }

/* CTA block at the end of a doc page */
.doc-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bv-sp-3);
  margin-top: var(--bv-sp-7);
}
.doc-cta__note {
  color: var(--bv-ink-faint);
  font-size: var(--bv-fs-sm);
  margin: 0;
}

/* Footer — shared .site-footer component lives in brand.css (used by the
   landing and content pages alike). No footer rules here. */

/* Guides: article body, callout, steps, related links, hub cards */
.doc-prose h2 + p { margin-top: 0; }

/* Soft "key takeaway" callout inside a guide */
.doc-callout {
  background: var(--bv-ok-bg);
  border: 1px solid var(--bv-ok-line);
  color: var(--bv-ink);
  border-radius: var(--bv-r-md);
  padding: var(--bv-sp-4) var(--bv-sp-5);
  margin: var(--bv-sp-5) 0;
}
.doc-callout strong { color: var(--bv-ink); }

/* Numbered "what to try" steps */
.doc-steps {
  list-style: none;
  counter-reset: doc-step;
  margin: 0 0 var(--bv-sp-5);
  padding: 0;
}
.doc-steps li {
  counter-increment: doc-step;
  position: relative;
  padding-left: calc(var(--bv-sp-7) + var(--bv-sp-1));
  margin-bottom: var(--bv-sp-4);
  color: var(--bv-ink-soft);
}
.doc-steps li::before {
  content: counter(doc-step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: var(--bv-r-pill);
  background: var(--bv-accent);
  color: var(--bv-accent-ink);
  font-family: var(--bv-font-display);
  font-weight: 600;
  font-size: var(--bv-fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline FAQ (visible copy paired with FAQPage schema) */
.doc-faq { margin: var(--bv-sp-6) 0; }
.doc-faq details {
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-md);
  background: var(--bv-surface);
  padding: var(--bv-sp-4) var(--bv-sp-5);
  margin-bottom: var(--bv-sp-3);
}
.doc-faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq p { margin: var(--bv-sp-3) 0 0; color: var(--bv-ink-soft); }

/* "Related guides" link cards + hub grid */
.doc-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--bv-sp-4);
  margin: var(--bv-sp-5) 0;
}
.doc-related a {
  display: block;
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-md);
  padding: var(--bv-sp-4) var(--bv-sp-5);
  text-decoration: none;
  color: var(--bv-ink);
  font-weight: 600;
  transition: border-color var(--bv-dur-fast) ease, transform var(--bv-dur-fast) ease;
}
.doc-related a:hover {
  border-color: var(--bv-accent);
  transform: translateY(-1px);
  color: var(--bv-ink);
}
.doc-related a span {
  display: block;
  margin-top: var(--bv-sp-1);
  font-weight: 400;
  font-size: var(--bv-fs-sm);
  color: var(--bv-ink-faint);
}

/* Breadcrumb above a guide title */
.doc-crumbs {
  font-size: var(--bv-fs-sm);
  color: var(--bv-ink-faint);
  margin: 0 0 var(--bv-sp-3);
}
.doc-crumbs a { color: var(--bv-ink-mute); text-decoration: none; }
.doc-crumbs a:hover { color: var(--bv-accent); }

/* ---------------------------------------------------------------------------
   Guide visuals — keep the landing's warm, playful look on content pages
   (which don't load landing.css, so the drift keyframe is redefined here):
   floating gradient blobs, accent heading ticks, iconed callout + checklist,
   a dark promo band and a glowing sidebar CTA.
   -------------------------------------------------------------------------- */
@keyframes doc-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(16px, -14px) scale(1.05); }
}

/* Decorative blobs must never cause horizontal scroll. overflow-x: clip keeps
   the sticky sidebar working (unlike hidden/auto). */
.doc-shell { overflow-x: clip; }

/* Guide header — soft floating blobs behind the intro */
.doc-head { position: relative; }
.doc-guide-hero { isolation: isolate; }
.doc-guide-hero::before,
.doc-guide-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: doc-drift 16s ease-in-out infinite;
}
.doc-guide-hero::before {
  top: -70px; right: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(245, 194, 150, 0.5), transparent 65%);
}
.doc-guide-hero::after {
  top: 30px; left: -90px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(226, 83, 31, 0.12), transparent 65%);
  animation-duration: 20s;
  animation-direction: reverse;
}

/* Topic badge in the guide hero — gradient tile with the topic icon */
.doc-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 40px + 2vw, 60px);
  height: clamp(48px, 40px + 2vw, 60px);
  margin-bottom: var(--bv-sp-4);
  border-radius: var(--bv-r-lg);
  background: linear-gradient(140deg, var(--bv-accent), var(--bv-peach));
  color: var(--bv-accent-ink);
  box-shadow: var(--bv-shadow-cta);
}
.doc-topic-icon svg { width: 56%; height: 56%; }

/* Hub guide cards — topic icon + title + note */
.doc-guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--bv-sp-4);
  margin: 0 0 var(--bv-sp-6);
}
.doc-guide-card {
  display: flex;
  align-items: center;
  gap: var(--bv-sp-4);
  padding: var(--bv-card-pad-sm);
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-lg);
  text-decoration: none;
  color: var(--bv-ink);
  transition:
    border-color var(--bv-dur-fast) ease,
    transform var(--bv-dur-fast) ease,
    box-shadow var(--bv-dur-fast) ease;
}
.doc-guide-card:hover {
  border-color: var(--bv-accent);
  transform: translateY(-2px);
  box-shadow: var(--bv-shadow-lift);
  color: var(--bv-ink);
}
.doc-guide-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--bv-r-md);
  background: linear-gradient(140deg, var(--bv-accent), var(--bv-peach));
  color: var(--bv-accent-ink);
}
.doc-guide-card__icon svg { width: 55%; height: 55%; }
.doc-guide-card__body { display: flex; flex-direction: column; gap: 2px; }
.doc-guide-card__body strong { color: var(--bv-ink); }
.doc-guide-card__body span { font-size: var(--bv-fs-sm); color: var(--bv-ink-faint); }

/* Accent tick before guide section headings, for rhythm */
.doc-main--guide .doc-prose h2 {
  position: relative;
  padding-left: var(--bv-sp-5);
}
.doc-main--guide .doc-prose h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 8px;
  height: 1.05em;
  border-radius: var(--bv-r-2xs);
  background: linear-gradient(var(--bv-accent), var(--bv-peach));
}

/* Callout with an info icon */
.doc-callout {
  position: relative;
  padding-left: calc(var(--bv-sp-5) + 34px);
}
.doc-callout::before {
  content: "";
  position: absolute;
  left: var(--bv-sp-5);
  top: var(--bv-sp-4);
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.6' r='.6' fill='%232E7D32' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Checklist — green check bullets */
.doc-checklist {
  list-style: none;
  margin: 0 0 var(--bv-sp-4);
  padding: 0;
}
.doc-checklist li {
  position: relative;
  padding-left: var(--bv-sp-7);
  margin-bottom: var(--bv-sp-3);
  color: var(--bv-ink-soft);
}
.doc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Sidebar CTA widget — gradient wash + floating glow */
.doc-widget--cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bv-ok-bg), var(--bv-surface) 85%);
}
.doc-widget--cta::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 83, 31, 0.16), transparent 68%);
  pointer-events: none;
  animation: doc-drift 15s ease-in-out infinite;
}
.doc-widget--cta > * { position: relative; }

/* In-article promo band — dark gradient, floating blob, decorative shield */
.promo-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: var(--bv-sp-8) 0;
  padding: var(--bv-card-pad);
  border-radius: var(--bv-r-xl);
  background: radial-gradient(900px 380px at 82% -25%, var(--bv-dark-raise) 0%, var(--bv-ink) 60%);
  color: var(--bv-bg);
  display: flex;
  flex-direction: column;
  gap: var(--bv-sp-3);
}
.promo-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -130px;
  left: -70px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 83, 31, 0.30), transparent 65%);
  animation: doc-drift 18s ease-in-out infinite reverse;
}
.promo-band__mark {
  position: absolute;
  top: var(--bv-sp-5);
  right: var(--bv-sp-5);
  width: 54px;
  height: 54px;
  color: var(--bv-peach);
  opacity: 0.55;
  pointer-events: none;
}
.promo-band__kicker {
  font-family: var(--bv-font-display);
  font-weight: 600;
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bv-peach);
}
.promo-band h2 {
  color: var(--bv-bg);
  font-size: var(--bv-fs-h3);
  margin: 0;
  max-width: 22ch;
}
.promo-band p {
  color: var(--bv-dark-soft);
  margin: 0;
  max-width: 46ch;
}
.promo-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bv-sp-3) var(--bv-sp-5);
  margin-top: var(--bv-sp-2);
}
.promo-band__secondary {
  color: var(--bv-peach);
  text-decoration: none;
  font-weight: 600;
}
.promo-band__secondary:hover { color: var(--bv-bg); }

@media (prefers-reduced-motion: reduce) {
  .doc-guide-hero::before,
  .doc-guide-hero::after,
  .doc-widget--cta::before,
  .promo-band::before { animation: none; }
}

/* 404 */
.doc-404 {
  text-align: center;
  align-self: center;
  max-width: var(--bv-w-col);
  padding-top: var(--bv-section-pad);
}
.doc-404__code {
  font-family: var(--bv-font-display);
  font-weight: 700;
  font-size: var(--bv-fs-h1);
  color: var(--bv-accent);
  margin: 0 0 var(--bv-sp-3);
}
.doc-404 h1 { margin-bottom: var(--bv-sp-3); }
.doc-404 p { color: var(--bv-ink-soft); margin: 0 0 var(--bv-sp-6); }
.doc-404__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--bv-sp-3);
}

/* ---------------------------------------------------------------------------
   Platform pages (/windows/): download card, spec list, feature grid.
   Built from the same tokens as the guides — the download card is the light
   counterpart of the dark .promo-band, so a page can open and close with a CTA
   without the two blocks looking identical.
--------------------------------------------------------------------------- */
.plat-download {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--bv-sp-6);
  margin: var(--bv-sp-7) 0 var(--bv-sp-8);
  padding: var(--bv-card-pad);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  background: var(--bv-surface);
  box-shadow: var(--bv-shadow-lift);
}
@media (min-width: 720px) {
  .plat-download { grid-template-columns: minmax(0, 1.55fr) minmax(200px, 0.85fr); align-items: center; }
}
.plat-download::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -160px;
  right: -110px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 83, 31, 0.16), transparent 68%);
  animation: doc-drift 20s ease-in-out infinite;
}
.plat-download__kicker {
  margin: 0 0 var(--bv-sp-2);
  font-family: var(--bv-font-display);
  font-weight: 600;
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bv-accent);
}
.plat-download h2 { margin: 0 0 var(--bv-sp-3); font-size: var(--bv-fs-h3); }
.plat-download__text { margin: 0 0 var(--bv-sp-5); color: var(--bv-ink-soft); max-width: 46ch; }
.plat-download__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bv-sp-3) var(--bv-sp-5);
}
.plat-download__secondary { color: var(--bv-accent); text-decoration: none; font-weight: 600; }
.plat-download__secondary:hover { color: var(--bv-accent-strong); }
.plat-download__note {
  margin: var(--bv-sp-4) 0 0;
  font-size: var(--bv-fs-sm);
  color: var(--bv-ink-faint);
}

.plat-specs {
  list-style: none;
  margin: 0;
  padding: var(--bv-card-pad-sm);
  display: grid;
  gap: var(--bv-sp-3);
  border-radius: var(--bv-r-lg);
  background: var(--bv-ok-bg-alt);
  border: 1px solid var(--bv-ok-line);
}
.plat-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bv-sp-3);
  font-size: var(--bv-fs-sm);
}
.plat-specs span { color: var(--bv-ink-mute); }
.plat-specs strong { color: var(--bv-ink); text-align: right; }

.plat-features {
  display: grid;
  gap: var(--bv-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin: var(--bv-sp-6) 0 var(--bv-sp-8);
}
.plat-feature {
  display: flex;
  flex-direction: column;
  gap: var(--bv-sp-2);
  padding: var(--bv-card-pad-sm);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-lg);
  background: var(--bv-surface);
  transition: transform var(--bv-dur) var(--bv-ease-out), box-shadow var(--bv-dur) var(--bv-ease-out);
}
.plat-feature:hover { transform: translateY(-2px); box-shadow: var(--bv-shadow-lift); }
.plat-feature__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--bv-sp-1);
  border-radius: var(--bv-r-sm);
  background: linear-gradient(140deg, var(--bv-peach), var(--bv-accent));
  color: var(--bv-accent-ink);
}
.plat-feature__icon svg { width: 55%; height: 55%; }
.plat-feature strong { color: var(--bv-ink); }
.plat-feature > span:last-child { font-size: var(--bv-fs-sm); color: var(--bv-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .plat-download::before { animation: none; }
  .plat-feature { transition: none; }
  .plat-feature:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   "What is my IP" tool (/tools/my-ip/): the IP result card. State lives in
   is-loading / is-ok / is-error classes set by the inline widget script — the
   card never receives inline colours from JS (see brand regламент).
--------------------------------------------------------------------------- */
.tool-ip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: var(--bv-sp-7) 0 var(--bv-sp-8);
  padding: var(--bv-card-pad);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  background: var(--bv-surface);
  box-shadow: var(--bv-shadow-lift);
  text-align: center;
}
.tool-ip::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bv-peach), var(--bv-accent));
  transition: background var(--bv-dur) var(--bv-ease-out);
}
.tool-ip.is-ok::before { background: linear-gradient(90deg, var(--bv-ok-bright), var(--bv-ok)); }
.tool-ip.is-error::before { background: var(--bv-danger-line); }
.tool-ip__label {
  display: block;
  margin-bottom: var(--bv-sp-3);
  font-size: var(--bv-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bv-ink-mute);
}
.tool-ip__value {
  display: block;
  font-family: var(--bv-font-mono);
  font-size: var(--bv-fs-stat);
  font-weight: 600;
  line-height: var(--bv-lh-tight);
  color: var(--bv-ink);
  word-break: break-all;
}
.tool-ip.is-loading .tool-ip__value { color: var(--bv-ink-faint); animation: tool-ip-pulse 1.1s ease-in-out infinite; }
.tool-ip.is-ok .tool-ip__value { color: var(--bv-ok); }
.tool-ip.is-error .tool-ip__value { color: var(--bv-danger-ink); font-family: var(--bv-font-body); font-size: var(--bv-fs-lg); }
@keyframes tool-ip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Fact rows under the IP value — two groups (Network / Device), each a list of
   label→value rows (2ip-style). */
.tool-ip__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--bv-sp-5) var(--bv-sp-7);
  margin: var(--bv-sp-5) 0 0;
  padding: var(--bv-sp-5) 0 0;
  border-top: 1px solid var(--bv-line);
  text-align: left;
}
.tool-ip__facts[hidden] { display: none; }
.tool-ip__grouphead {
  display: flex;
  align-items: center;
  gap: var(--bv-sp-2);
  margin: 0 0 var(--bv-sp-3);
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bv-accent);
}
.tool-ip__grouphead svg { width: 16px; height: 16px; }
.tool-ip__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bv-sp-4);
  padding: var(--bv-sp-2) 0;
  border-bottom: 1px solid var(--bv-line);
}
.tool-ip__rows > div:last-child { border-bottom: 0; }
.tool-ip__rows dt { font-size: var(--bv-fs-sm); color: var(--bv-ink-mute); flex-shrink: 0; }
.tool-ip__rows dd {
  margin: 0;
  font-weight: 600;
  color: var(--bv-ink);
  text-align: right;
  overflow-wrap: anywhere;
}
.tool-ip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bv-sp-3) var(--bv-sp-5);
  margin-top: var(--bv-sp-5);
}
.tool-ip__hint { font-size: var(--bv-fs-sm); color: var(--bv-ink-faint); }
.tool-ip__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bv-sp-2);
  padding: var(--bv-sp-2) var(--bv-sp-4);
  font: inherit;
  font-size: var(--bv-fs-sm);
  font-weight: 600;
  color: var(--bv-accent);
  background: var(--bv-surface);
  border: 1px solid var(--bv-line-strong);
  border-radius: var(--bv-r-pill);
  cursor: pointer;
  transition: border-color var(--bv-dur) var(--bv-ease-out), color var(--bv-dur) var(--bv-ease-out), transform var(--bv-dur) var(--bv-ease-out);
}
.tool-ip__btn svg { width: 18px; height: 18px; }
.tool-ip__btn:hover { border-color: var(--bv-accent); color: var(--bv-accent-strong); transform: translateY(-1px); }
.tool-ip__btn:active { transform: translateY(0); }
.tool-ip.is-loading .tool-ip__btn { pointer-events: none; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .tool-ip.is-loading .tool-ip__value { animation: none; }
  .tool-ip__btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   Speed test tool (/tools/speedtest/): metric tiles + run button. States
   (is-running / is-done / is-error) set by the inline widget script — no inline
   colours from JS. Built from the same tokens as the IP tool card.
--------------------------------------------------------------------------- */
.tool-speed {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: var(--bv-sp-7) 0 var(--bv-sp-8);
  padding: var(--bv-card-pad);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  background: var(--bv-surface);
  box-shadow: var(--bv-shadow-lift);
  text-align: center;
}
.tool-speed::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bv-peach), var(--bv-accent));
  transition: background var(--bv-dur) var(--bv-ease-out);
}
.tool-speed.is-done::before { background: linear-gradient(90deg, var(--bv-ok-bright), var(--bv-ok)); }
.tool-speed.is-error::before { background: var(--bv-danger-line); }
/* Big live gauge (speedtest.net style) */
.tool-speed__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--bv-sp-6);
}
.tool-speed__big {
  font-family: var(--bv-font-display);
  font-weight: 700;
  font-size: clamp(48px, 30px + 8vw, 88px);
  line-height: 1;
  color: var(--bv-ink);
  font-variant-numeric: tabular-nums;
}
.tool-speed.is-running .tool-speed__big { color: var(--bv-accent); }
.tool-speed.is-done .tool-speed__big { color: var(--bv-ok); }
.tool-speed__biglabel {
  font-size: var(--bv-fs-md);
  font-weight: 600;
  color: var(--bv-ink-mute);
}
.tool-speed__phase {
  margin-top: var(--bv-sp-3);
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bv-ink-faint);
}
.tool-speed__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--bv-sp-4) var(--bv-sp-6);
  margin-bottom: var(--bv-sp-6);
}
.tool-speed__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--bv-card-pad-sm) var(--bv-sp-4);
  border-radius: var(--bv-r-lg);
  background: var(--bv-ok-bg-alt);
  border: 1px solid var(--bv-ok-line);
}
.tool-speed__num {
  font-family: var(--bv-font-display);
  font-weight: 700;
  font-size: var(--bv-fs-stat);
  line-height: 1;
  color: var(--bv-ink);
}
.tool-speed.is-running .tool-speed__num { color: var(--bv-ink-faint); animation: tool-ip-pulse 1.1s ease-in-out infinite; }
.tool-speed.is-done .tool-speed__num { color: var(--bv-ok); }
.tool-speed__unit { font-size: var(--bv-fs-sm); color: var(--bv-ink-mute); font-weight: 600; }
.tool-speed__cap {
  display: inline-flex;
  align-items: center;
  gap: var(--bv-sp-2);
  margin-top: var(--bv-sp-2);
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bv-ink-faint);
}
.tool-speed__cap svg { width: 15px; height: 15px; }
.tool-speed__btn { min-width: 200px; }
.tool-speed__btn[disabled] { opacity: 0.65; cursor: default; }
.tool-speed__status {
  margin: var(--bv-sp-4) 0 0;
  font-size: var(--bv-fs-sm);
  color: var(--bv-ink-faint);
  min-height: 1.4em;
}
@media (prefers-reduced-motion: reduce) {
  .tool-speed::before { transition: none; }
  .tool-speed.is-running .tool-speed__num { animation: none; }
}