/* The Google Fonts @import that used to open this file was removed in T3276. It was a
   second, DUPLICATE request for the same two families (with a different weight set from
   tokens.css's copy), buried where the preload scanner could not see it, and it fired on
   every page because this file was imported globally. Both families are now self-hosted
   by next/font; this file only reads the variables. See src/app/fonts.ts.

   This file is served from public/hub.css and linked by the hub route, NOT bundled into
   the global stylesheet. It is 52KB for 18 pages. */

/* ============================================================
   WebRTC Tools Guide — hub.css
   Tokens grounded in the BlogGeek.me design system, extended
   with the granular palette steps the hub needs.
   ============================================================ */
:root {
  /* Teal (primary) */
  --teal-darkest: #0A6440;
  --teal-dark:    #1C7E56;
  --teal:         #33926C;
  --teal-light:   #52A986;
  --teal-lightest:#84CAAE;
  --teal-soft:    #e6f1ec;

  /* Steel / blue (knowledge / measured) */
  --steel-dark:    #215178;
  --steel:         #36648A;
  --steel-light:   #547EA1;
  --steel-lightest:#85A7C4;
  --steel-soft:    #d6e0eb;

  /* Amber (caution / paid) */
  --amber:         #D79C4B;
  --amber-light:   #F9C379;
  --amber-lightest:#FFDAA7;
  --amber-soft:    #f5e7d0;

  /* Terra / coral (accent) */
  --terra:      #D7754B;
  --terra-dark: #BA5428;

  /* Neutrals */
  --ink:     #1A1A1A;
  --ink-2:   #555555;
  --surface: #F7F7F7;
  --border:  #E0E0E0;
  --navy:    #1F2D41;
  --navy-deep:#16202f;
  --paper:   #FFFFFF;
  --rule:    rgba(31,45,65,0.12);

  --font-display: var(--font-montserrat), system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;

  --wrap: 1180px;
}

.webrtc-hub, .webrtc-hub *{ box-sizing: border-box; }

.webrtc-hub{ -webkit-text-size-adjust: 100%; }

.webrtc-hub{
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.webrtc-hub a{ color: var(--steel-dark); text-decoration: none; }
.webrtc-hub a:hover{ text-decoration: underline; }

.webrtc-hub .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.webrtc-hub .eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  font-weight: 500;
  margin: 0 0 18px;
}

.webrtc-hub .mono{ font-family: var(--font-mono); }

/* ============================================================
   HUB CHROME — header
   ============================================================ */
.webrtc-hub .hub-header{
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid var(--navy-deep);
}
.webrtc-hub .hub-header .wrap{
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}
.webrtc-hub .hub-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
}
.webrtc-hub .hub-brand:hover{ text-decoration: none; }
/* three-dot divergence glyph */
.webrtc-hub .glyph{
  width: 38px; height: 38px;
  flex: none;
  display: block;
}
.webrtc-hub .hub-brand-text{ display: flex; flex-direction: column; line-height: 1.1; }
.webrtc-hub .hub-brand-title{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.webrtc-hub .hub-brand-sub{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-lightest);
  margin-top: 3px;
}
.webrtc-hub .hub-nav{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.webrtc-hub .hub-nav a{
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.webrtc-hub .hub-nav a:hover{ color: #fff; text-decoration: none; }
.webrtc-hub .hub-nav a.home-link{ color: var(--teal-lightest); }
.webrtc-hub .hub-nav-toggle{ display: none; }

/* ============================================================
   HERO
   ============================================================ */
.webrtc-hub .hero{ padding: 76px 0 12px; }
.webrtc-hub .hero h1{
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0 0 22px;
}
.webrtc-hub .hero .subhead{
  font-size: 18px;
  color: var(--ink-2);
  max-width: 760px;
  margin: 0;
}

/* Pick-your-stack CTA card (navy).
   NOTE: the bloggeek theme ships its OWN .cta-card (flex-direction:column +
   4px teal border-top accent). It collides by name with this component, and
   leaks any property this rule does not set. So lock flex-direction + border
   explicitly here. The editorial .take-card.cta-card (below) re-asserts
   column at higher specificity, so its stacked layout is unaffected.
   min-height:0 kills the theme's leaked .cta-card min-height, which was
   padding the box ~75px taller than its content. */
.webrtc-hub .cta-card{
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  padding: 34px 38px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  border-top: 0;
  min-height: 0;
  box-shadow: 0 24px 50px -28px rgba(31,45,65,0.55);
}
.webrtc-hub .cta-card .cta-body{ flex: 1; min-width: 0; }
.webrtc-hub .cta-card h3{
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.webrtc-hub .cta-card p{
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 15.5px;
  max-width: 540px;
}
.webrtc-hub .hero-cta-wrap{ margin-top: 44px; }

.webrtc-hub .btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background .15s ease;
}
.webrtc-hub .btn:hover{ text-decoration: none; }
.webrtc-hub .btn-teal{ background: var(--teal); color: #fff; }
.webrtc-hub .btn-teal:hover{ background: var(--teal-dark); transform: translateY(-1px); }
.webrtc-hub .btn-amber{ background: var(--amber); color: var(--navy-deep); }
.webrtc-hub .btn-amber:hover{ background: var(--amber-light); transform: translateY(-1px); }
.webrtc-hub .btn-light{ background: #fff; color: var(--navy); }
.webrtc-hub .btn-light:hover{ background: var(--surface); transform: translateY(-1px); }
.webrtc-hub .btn .arrow{ font-size: 16px; line-height: 1; }

/* ============================================================
   INTRO BAND + methodology line
   ============================================================ */
.webrtc-hub .band{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 64px;
  padding: 52px 0;
}
.webrtc-hub .band p{
  font-size: 19px;
  line-height: 1.55;
  max-width: 820px;
  margin: 0;
  color: var(--ink);
}
.webrtc-hub .band .lead-q{ font-weight: 600; }

.webrtc-hub .method-line{
  padding: 40px 0 8px;
}
.webrtc-hub .method-line p{
  max-width: 760px;
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 0;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.webrtc-hub .section{ padding: 64px 0; }
.webrtc-hub .section-head{ margin-bottom: 34px; }
.webrtc-hub .section-head h2{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.webrtc-hub .cat-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.webrtc-hub .cat-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 26px 24px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
  min-height: 130px;
}
.webrtc-hub .cat-card.scored:hover{
  border-color: var(--teal-light);
  box-shadow: 0 18px 40px -26px rgba(10,100,64,0.5);
  transform: translateY(-2px);
  text-decoration: none;
}
.webrtc-hub .cat-card.soon{
  background: var(--surface);
  border-style: dashed;
  cursor: default;
}
.webrtc-hub .cat-tag{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.webrtc-hub .cat-tag.scored-tag{ background: var(--teal-soft); color: var(--teal-darkest); }
.webrtc-hub .cat-tag.soon-tag{ background: #ececec; color: var(--ink-2); }
.webrtc-hub .cat-card h3{
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.webrtc-hub .cat-card .cat-meta{
  margin-top: auto;
  padding-top: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  gap: 7px;
}
.webrtc-hub .cat-card.soon .cat-meta{ color: var(--ink-2); font-weight: 500; }

/* ============================================================
   TOOL LANDSCAPE (infographic)
   ============================================================ */
.webrtc-hub .section-caption{
  max-width: 780px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 14px 0 0;
}
/* ---- the market map board ------------------------------------ */
.webrtc-hub .mapboard{
  margin-top: 46px;
  column-count: 2;
  column-gap: 22px;
}
@media (max-width: 900px) { .webrtc-hub .mapboard{ column-count: 1; } }

/* one bordered region per call stage */
.webrtc-hub .region{
  break-inside: avoid;
  margin-bottom: 22px;
  border: 1.5px solid var(--region-edge, var(--border));
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}
.webrtc-hub .region.steel{ --region-edge: var(--steel-lightest); --region-ink: var(--steel-dark); --region-tint: var(--steel-soft); }
.webrtc-hub .region.teal{ --region-edge: var(--teal-lightest);  --region-ink: var(--teal-darkest); --region-tint: var(--teal-soft); }
.webrtc-hub .region.amber{ --region-edge: var(--amber-light);    --region-ink: #9a6a1f;             --region-tint: var(--amber-soft); }
.webrtc-hub .region.terra{ --region-edge: #e6a98e;               --region-ink: var(--terra-dark);   --region-tint: #f6ddd2; }
.webrtc-hub .region.slate{ --region-edge: #c3cdd9;               --region-ink: var(--navy);         --region-tint: #eceff4; }
/* plum: the observe-everything layer (testing & monitoring). Purple reads as
   observability in dev tooling; .webrtc-hub distinct from the five call-stage accents. */
.region.plum{ --region-edge: #b7add6;               --region-ink: #4c4070;             --region-tint: #ece9f3; }

.webrtc-hub .region-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 20px;
  background: var(--region-tint);
  border-bottom: 1.5px solid var(--region-edge);
}
.webrtc-hub .region-htext{ display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.webrtc-hub .region-verb{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--region-ink);
  white-space: nowrap;
}
.webrtc-hub .region-role{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.webrtc-hub .region-cats{ padding: 6px 20px 18px; }

.webrtc-hub /* a category = a labelled sub-block of tool tiles, .webrtc-hub clickable */
.mcat{
  display: block;
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.webrtc-hub .region-cats .mcat:last-child{ border-bottom: none; }
.webrtc-hub .mcat-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.webrtc-hub .mcat-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.webrtc-hub .mcat-scored{
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--region-tint);
  color: var(--region-ink);
}
.webrtc-hub .mcat-open{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease, color .16s ease;
  white-space: nowrap;
}
.webrtc-hub .mcat:hover .mcat-open{ opacity: 1; transform: translateX(0); color: var(--region-ink); }
.webrtc-hub .mcat:hover .mcat-label{ color: var(--region-ink); }

/* the tool wordmark / logo tiles */
.webrtc-hub .mcat-tiles{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.webrtc-hub .wm{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.webrtc-hub .mcat:hover .wm{ border-color: var(--region-edge); }
.webrtc-hub .wm:hover{ box-shadow: 0 8px 18px -10px rgba(31,45,65,0.4); transform: translateY(-1px); }
.webrtc-hub .wm-img{ max-height: 22px; max-width: 124px; object-fit: contain; display: block; }
.webrtc-hub .wm.more-wm{
  background: transparent;
  border-style: dashed;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-2);
}

/* ============================================================
   GET-UPDATES CAPTURE
   ============================================================ */
.webrtc-hub .capture{
  background: var(--mint, #eef7f2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 64px 0;
}
.webrtc-hub .capture-inner{
  max-width: 720px;
}
.webrtc-hub .capture h2{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.webrtc-hub .capture p{ color: var(--ink-2); font-size: 16.5px; margin: 0 0 26px; max-width: 540px; }
.webrtc-hub .capture-form{ display: flex; gap: 10px; flex-wrap: wrap; }
.webrtc-hub .capture-form input{
  flex: 1;
  min-width: 220px;
  font-family: var(--font-display);
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.webrtc-hub .capture-form input:focus{ outline: 2px solid var(--teal-light); outline-offset: 0; border-color: var(--teal); }

/* Kit inline embed (.capture-kit): minimal overrides only. Visual styling
   (colors, radius, padding, layout) is set in the Kit form designer; .webrtc-hub Kit's
   container queries handle responsive stacking. Match the lead-magnet pattern. */
.capture-kit [data-style="clean"]{ padding: 0 !important; }
.webrtc-hub .capture-kit .formkit-field,
.webrtc-hub .capture-kit .formkit-submit{ margin-bottom: 0 !important; }
.webrtc-hub .capture-kit .formkit-input{ font-family: inherit !important; }
.webrtc-hub .capture-kit .formkit-submit span{ font-family: inherit !important; }
.webrtc-hub .capture-kit .formkit-powered-by-convertkit-container{ display: none !important; }

/* ============================================================
   HUB FOOTER (navy)
   ============================================================ */
.webrtc-hub .review-bar{
  background: var(--navy-deep);
  color: rgba(255,255,255,0.85);
  border-top: 2px solid var(--teal-dark);
}
.webrtc-hub .review-bar .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}
.webrtc-hub .review-bar .rb-text{ font-size: 14.5px; }
.webrtc-hub .review-bar .rb-text strong{ color: #fff; font-weight: 600; }

.webrtc-hub .hub-footer{
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 56px 0 40px;
}
.webrtc-hub .hub-footer .wrap{
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.webrtc-hub .hub-footer .foot-brand{ max-width: 320px; }
.webrtc-hub .hub-footer .glyph{ margin-bottom: 16px; }
.webrtc-hub .hub-footer .foot-tag{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}
.webrtc-hub .hub-footer .foot-cols{ margin-left: auto; display: flex; gap: 56px; flex-wrap: wrap; }
.webrtc-hub .hub-footer .foot-col h4{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-lightest);
  margin: 0 0 16px;
  font-weight: 600;
}
.webrtc-hub .hub-footer .foot-col a{
  display: block;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  margin-bottom: 11px;
}
.webrtc-hub .hub-footer .foot-col a:hover{ color: #fff; text-decoration: none; }
.webrtc-hub .hub-footer .foot-base{
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 44px;
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   CATEGORY PAGE — category bar + take
   ============================================================ */
.webrtc-hub .cat-bar{ padding: 64px 0 8px; }
.webrtc-hub .cat-bar h1{
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 22px;
}
.webrtc-hub .cat-bar .intro{
  font-size: 18px;
  color: var(--ink-2);
  max-width: 880px;
  margin: 0;
  line-height: 1.6;
}

.webrtc-hub .take-row{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 26px;
  align-items: stretch;
  padding: 48px 0 8px;
}
.webrtc-hub .take-card{
  background: var(--teal-soft);
  border: 1px solid var(--teal-lightest);
  border-radius: 14px;
  padding: 30px 34px;
}
.webrtc-hub .take-card .take-label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-darkest);
  font-weight: 600;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.webrtc-hub .take-card p{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
}
.webrtc-hub .take-card .byline{
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--teal-darkest);
  font-weight: 600;
}
.webrtc-hub .take-card.cta-card{ background: var(--navy); border-color: var(--navy-deep); flex-direction: column; align-items: flex-start; justify-content: center; }
.webrtc-hub .take-card.cta-card h3{ color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.webrtc-hub .take-card.cta-card p{ color: rgba(255,255,255,0.82); font-size: 15.5px; }

/* ============================================================
   DIVERGENCE MAP
   ============================================================ */
.webrtc-hub .map-section{ padding: 70px 0 56px; }
.webrtc-hub .map-section .section-head h2{ font-size: 30px; }
.webrtc-hub .map-caption{
  max-width: 760px;
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 10px 0 0;
  line-height: 1.6;
}

.webrtc-hub .map-frame{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 22px 38px 1fr;
  grid-template-rows: 1fr 44px;
  gap: 0;
}
.webrtc-hub .y-axis-title{
  grid-column: 1; grid-row: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.webrtc-hub .plot{
  grid-column: 3; grid-row: 1;
  position: relative;
  height: 480px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background:
    linear-gradient(to right, transparent 0 calc(100% - 1px), var(--border) calc(100% - 1px)) ,
    repeating-linear-gradient(to right, transparent 0 9.9%, rgba(0,0,0,0.04) 9.9% 10%),
    repeating-linear-gradient(to top, transparent 0 19.9%, rgba(0,0,0,0.04) 19.9% 20%);
}
/* a subtle diagonal "parity" reference */
.webrtc-hub .plot .parity{
  position: absolute; inset: 0;
  pointer-events: none;
}
.webrtc-hub .x-axis-title{
  grid-column: 3; grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 22px;
}
/* axis ticks */
.webrtc-hub .axis-tick{
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
}
.webrtc-hub .tick-x{ bottom: -22px; transform: translateX(-50%); }
.webrtc-hub .tick-y{ left: -30px; transform: translateY(50%); text-align: right; width: 24px; }

.webrtc-hub .dot{
  position: absolute;
  transform: translate(-50%, 50%);
}
.webrtc-hub .dot .pt{
  display: block;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #b6b6b6;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.webrtc-hub .dot.badged .pt{ width: 19px; height: 19px; }
.webrtc-hub .dot.teal  .pt{ background: var(--teal); }
.webrtc-hub .dot.steel .pt{ background: var(--steel); }
.webrtc-hub .dot.amber .pt{ background: var(--amber); }

.webrtc-hub .dot .dot-label{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}
.webrtc-hub .dot.plain .dot-label{
  bottom: auto;
  top: calc(100% + 8px);
  font-family: var(--font-display);
  font-size: 12.5px;
  color: #9a9a9a;
  font-weight: 500;
}
/* keep edge labels inside the plot */
.webrtc-hub .dot.edge-left .dot-label{ left: 0; transform: none; text-align: left; }
.webrtc-hub .dot.edge-right .dot-label{ left: auto; right: 0; transform: none; text-align: right; }
.webrtc-hub .dot .name{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  display: block;
}
.webrtc-hub .dot.teal  .name{ color: var(--teal-darkest); }
.webrtc-hub .dot.steel .name{ color: var(--steel-dark); }
.webrtc-hub .dot.amber .name{ color: #9a6a1f; }
.webrtc-hub .dot .badge-mini{
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.webrtc-hub .dot.teal  .badge-mini{ background: var(--teal-soft); color: var(--teal-darkest); }
.webrtc-hub .dot.steel .badge-mini{ background: var(--steel-soft); color: var(--steel-dark); }
.webrtc-hub .dot.amber .badge-mini{ background: var(--amber-soft); color: #9a6a1f; }

.webrtc-hub .map-method-link{ margin-top: 26px; font-size: 14.5px; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.webrtc-hub .table-section{ padding: 56px 0; }
.webrtc-hub .table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.webrtc-hub .cmp{
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 14px;
}
.webrtc-hub .cmp thead th{
  text-align: left;
  vertical-align: bottom;
  padding: 14px 16px;
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.webrtc-hub .cmp thead th .sort-ind{ color: var(--steel); font-size: 11px; margin-left: 5px; opacity: 0; }
.webrtc-hub .cmp thead th.sorted .sort-ind{ opacity: 1; }
.webrtc-hub .cmp thead th:hover{ color: var(--steel-dark); }
.webrtc-hub .cmp thead th .col-sub{
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
/* header info tooltip */
.webrtc-hub .cmp thead th .th-info{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  margin: 0 3px;
  cursor: help;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.webrtc-hub .cmp thead th .th-info:hover{ border-color: var(--steel); color: var(--steel-dark); }
.webrtc-hub .th-tip{
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 12px;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.55);
  z-index: 6;
  white-space: normal;
}
.webrtc-hub .th-tip::after{
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--navy);
}
.webrtc-hub .th-info:hover .th-tip, .webrtc-hub .th-info:focus .th-tip{ opacity: 1; }
/* quiet context columns */
.webrtc-hub .cmp th.quiet{
  font-weight: 600;
  color: var(--ink-2);
  border-bottom-color: var(--border);
}
.webrtc-hub .cmp td.quiet{ color: var(--ink-2); font-size: 13px; }
.webrtc-hub .cmp td.quiet .ctx-main{ display: block; }

.webrtc-hub .cmp tbody td{
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.webrtc-hub .cmp tbody tr:hover{ background: var(--surface); }

/* Tool identity cell */
.webrtc-hub .tool-id{ display: flex; align-items: center; gap: 13px; min-width: 180px; }
.webrtc-hub /* When the tool has a website, .webrtc-hub the identity cell becomes a link (opens new tab) */
a.tool-id{ text-decoration: none; color: inherit; cursor: pointer; border-radius: 7px; }
.webrtc-hub a.tool-id:hover .ti-name{ text-decoration: underline; text-underline-offset: 2px; color: var(--teal-dark); }
.webrtc-hub a.tool-id:focus-visible{ outline: 2px solid var(--teal-dark); outline-offset: 3px; }
.webrtc-hub .tool-logo{
  width: 34px; height: 34px;
  flex: none;
  object-fit: contain;
  border-radius: 6px;
}
.webrtc-hub .tool-logo-fallback{
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.webrtc-hub .tool-id .ti-text{ display: flex; flex-direction: column; gap: 4px; }
.webrtc-hub .tool-id .ti-name{ font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.webrtc-hub .traj{
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}
.webrtc-hub .traj.rising{ background: var(--teal-soft); color: var(--teal-darkest); }
.webrtc-hub .traj.stable{ background: var(--steel-soft); color: var(--steel-dark); }
.webrtc-hub .traj.fading{ background: var(--amber-soft); color: #9a6a1f; }
.webrtc-hub .traj.niche{ background: #ececec; color: var(--ink-2); }

/* AI Visibility cell */
.webrtc-hub .ai-cell{ min-width: 160px; }
.webrtc-hub .ai-avg{ font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1; color: var(--ink); }
.webrtc-hub .ai-avg small{ font-size: 12px; color: var(--ink-2); font-weight: 400; margin-left: 3px; }
.webrtc-hub .ai-models{ display: flex; gap: 12px; margin-top: 11px; }
.webrtc-hub .ai-model{ display: flex; align-items: center; gap: 5px; }
.webrtc-hub .ai-model .m-logo{
  width: 18px; height: 18px;
  object-fit: contain;
  border-radius: 4px;
}
.webrtc-hub .ai-model .m-chip{
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
}
.webrtc-hub .ai-model .m-chip.chip-claude{ background: var(--terra); }
.webrtc-hub .ai-model .m-chip.chip-gemini{ background: var(--steel); }
.webrtc-hub .ai-model .m-chip.chip-gpt{ background: var(--teal-dark); }
.webrtc-hub .ai-model .m-score{ font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.webrtc-hub .ai-model.zero{ opacity: 0.32; filter: grayscale(1); }

/* Quality cell */
.webrtc-hub .q-cell{ min-width: 132px; }
.webrtc-hub .q-score{ font-family: var(--font-mono); font-size: 24px; font-weight: 600; line-height: 1; }
.webrtc-hub .q-sub{ display: flex; gap: 14px; margin-top: 9px; }
.webrtc-hub .q-metric{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.webrtc-hub .qi{ flex: none; color: var(--ink-2); }

/* Agent-ready cell */
.webrtc-hub .agent-cell{ min-width: 150px; }
.webrtc-hub .agent-line{ display: flex; align-items: center; gap: 8px; }
.webrtc-hub .agent-mark{
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex: none;
}
.webrtc-hub .agent-mark.t2{ background: var(--teal); color: #fff; }
.webrtc-hub .agent-mark.t1{ background: var(--amber-soft); color: #9a6a1f; }
.webrtc-hub .agent-text{ font-size: 13px; }
.webrtc-hub .agent-cell .none{ color: var(--ink-2); font-weight: 500; }

/* Tsahi's note cell */
.webrtc-hub .note-cell{ min-width: 130px; }
.webrtc-hub .note-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
}
.webrtc-hub .note-badge.teal{ background: var(--teal-soft); color: var(--teal-darkest); }
.webrtc-hub .note-badge.steel{ background: var(--steel-soft); color: var(--steel-dark); }
.webrtc-hub .note-badge.amber{ background: var(--amber-soft); color: #9a6a1f; }
/* deliberate dash */
.webrtc-hub .no-call{
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: help;
}
.webrtc-hub .no-call .dash{
  width: 18px;
  height: 2.5px;
  background: var(--border);
  border-radius: 2px;
}
.webrtc-hub .no-call:hover .dash{ background: var(--ink-2); }
.webrtc-hub .no-call .tip{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 11px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5);
  z-index: 5;
}
.webrtc-hub .no-call .tip::after{
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.webrtc-hub .no-call:hover .tip{ opacity: 1; }

/* table footnotes */
.webrtc-hub .table-notes{ margin-top: 26px; max-width: 880px; }
.webrtc-hub .table-legend{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 22px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.webrtc-hub .lg-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.webrtc-hub .lg-item b{ color: var(--ink); font-weight: 600; }
.webrtc-hub .lg-item .qi{ color: var(--ink-2); }
.webrtc-hub .lg-model{ width: 16px; height: 16px; object-fit: contain; flex: none; }
.webrtc-hub .lg-sep{ width: 1px; height: 16px; background: var(--border); }
.webrtc-hub .table-notes p{
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.webrtc-hub .table-notes .verify-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--terra-dark);
  margin-right: 7px;
}

/* ============================================================
   PAGE-FOOTER KICKER
   ============================================================ */
.webrtc-hub .kicker-band{
  border-top: 2px solid var(--navy);
  padding: 64px 0;
  background: var(--paper);
}
.webrtc-hub .kicker-band p{
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 960px;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.webrtc-hub .kicker-band p .quiet-em{ color: var(--ink-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .webrtc-hub .cta-card{ flex-direction: column; align-items: flex-start; gap: 22px; }
  .webrtc-hub .take-row{ grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .webrtc-hub .hub-nav{
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 28px 18px;
    border-bottom: 1px solid var(--navy-deep);
    z-index: 40;
  }
  .webrtc-hub .hub-nav.open{ display: flex; }
  .webrtc-hub .hub-nav a{ padding: 11px 0; width: 100%; }
  .webrtc-hub .hub-header{ position: relative; }
  .webrtc-hub .hub-nav-toggle{
    display: inline-flex;
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 7px;
    width: 40px; height: 38px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
  }
  .webrtc-hub .cat-grid{ grid-template-columns: 1fr; }
  .webrtc-hub .hero{ padding: 52px 0 8px; }
  .webrtc-hub .plot{ height: 400px; }
}
@media (max-width: 480px) {
  .webrtc-hub .wrap{ padding: 0 18px; }
  .webrtc-hub .cta-card{ padding: 26px 24px; }
  .webrtc-hub .map-frame{ grid-template-columns: 16px 28px 1fr; }
  .webrtc-hub .y-axis-title{ font-size: 9px; }
  .webrtc-hub .tick-y{ left: -26px; width: 22px; }
  .webrtc-hub .plot{ height: 340px; }
  .webrtc-hub .hub-footer .foot-cols{ gap: 32px; }
}

.webrtc-hub /* ============================================================
   HEALTH-SIGNAL COLUMN FAMILY (OSS categories)
   Additive. Used by media-servers-oss + future OSS pages.
   Measured columns - carry visual weight like AI/Quality, .webrtc-hub NOT
   quiet like the NAT price/coverage context columns. Raw figures,
   .webrtc-hub never composited into a 0-10.
   ============================================================ */
.health-cell{ min-width: 150px; }
.webrtc-hub .health-cell .h-main{
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.webrtc-hub .health-cell .h-main small{
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 400;
  margin-left: 4px;
}
.webrtc-hub .health-cell .h-sub{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.webrtc-hub .health-cell .h-dot{
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--border);
  margin: 0 6px;
  vertical-align: middle;
}
.webrtc-hub .live-cell .h-main{ font-size: 17px; }

/* agent tier 0.5 - "adjacent" (boilerplate/in-call AI, not real operability) */
.webrtc-hub .agent-mark.t05{
  background: transparent;
  color: var(--ink-2);
  border: 1px dashed var(--border);
}
.webrtc-hub .agent-text.agent-faint{ color: var(--ink-2); }

/* thank-you page (get-updates success) */
.webrtc-hub .thanks{ padding: 90px 0 116px; text-align: center; }
.webrtc-hub .thanks .wrap{ max-width: 680px; }
.webrtc-hub .thanks .eyebrow{ color: var(--teal-dark); }
.webrtc-hub .thanks-mark{
  width: 64px; height: 64px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--teal-soft);
  border: 1px solid var(--teal-lightest);
  display: flex; align-items: center; justify-content: center;
}
.webrtc-hub .thanks h1{
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0 0 20px;
}
.webrtc-hub .thanks .intro{
  font-size: 17.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 560px;
}
.webrtc-hub .thanks-actions{
  margin-top: 34px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.webrtc-hub .thanks-actions .btn-light{ border: 1px solid var(--border); }

/* badged-dot label flipped below the dot (for tightly-stacked tools on
   the map, so adjacent labels don't overlap). Additive; .webrtc-hub NAT unaffected. */
.dot.label-below .dot-label{
  bottom: auto;
  top: calc(100% + 10px);
}

/* per-category analysis dateline (under the category H1) */
.webrtc-hub .cat-dateline{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin: -8px 0 20px;
}

.webrtc-hub /* transient (daily-moving) measured headers: gray underline, .webrtc-hub not the
   black 2px rule used by the stable scored columns. Same treatment NAT
   gives its quiet context headers. */
.cmp th.transient{ border-bottom-color: var(--border); }

/* measured (vs VERIFY) footnote tag */
.webrtc-hub .table-notes .measured-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--teal-dark);
  margin-right: 7px;
}
.webrtc-hub .table-notes .held-note{ margin-top: 10px; font-style: italic; }
/* bulleted MEASURED / VERIFY footnotes */
.webrtc-hub .table-notes .note-head{ margin-top: 12px; }
.webrtc-hub .table-notes .note-head:first-of-type{ margin-top: 0; }
.webrtc-hub .table-notes .note-list{
  margin: 4px 0 0;
  padding-left: 18px;
  list-style: disc;
}
.webrtc-hub .table-notes .note-list li{
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 3px 0;
}

/* ============================================================
   COMMERCIAL media-server columns (additive, scoped).
   Quiet VERIFY-gated pricing context column with a sub-line.
   Scoped to .price-cell so the locked NAT/OSS pages are untouched.
   ============================================================ */
.webrtc-hub .cmp td.quiet.price-cell{ min-width: 132px; }
.webrtc-hub .cmp td.quiet.price-cell .ctx-main{ font-weight: 600; }
.webrtc-hub .cmp td.quiet.price-cell .ctx-sub{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  opacity: 0.85;
  margin-top: 5px;
}

.webrtc-hub /* ============================================================
   TEMPORARY: hide the divergence-map chart on internal (category)
   pages. Tsahi's call 2026-06-19 - the comparison table reads
   better than the scatter plot for now. The table is unaffected.
   TO RESTORE: delete this single rule. The map markup + its
   renderMap() JS are still in place on every page, .webrtc-hub so removing
   this brings the chart straight back.
   (Does not touch the index/landing page, which has no map.)
   ============================================================ */
.map-section{ display: none; }

/* ============================================================
   WP integration (added 2026-06-25): break the embedded hub out
   of the theme's constrained content column so it uses its own
   --wrap width (1180px), and harden against theme styles leaking
   into the hub (link underlines/borders on the tool cell, etc.).
   ============================================================ */
.webrtc-hub.webrtc-hub-category,
.webrtc-hub.webrtc-hub-index{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* The 50vw full-bleed breakout above counts the vertical scrollbar, so each
   band overshoots the viewport by the scrollbar width -> a persistent
   horizontal scroll at every resolution (4K included). Clip that sliver at the
   page root. Scoped to hub pages only (body.webrtc-hub-page is set by
   wrtc_hub_body_class), so it never touches other theme pages. Both html and
   body are needed; clip on either alone leaves the sliver. */
html:has(body.webrtc-hub-page){ overflow-x: clip; }
body.webrtc-hub-page{ overflow-x: clip; }
/* theme resets inside the hub */
/* Kill the theme's link-underline border on hub links. EXCLUDE .btn: buttons
   are <a> too, and btn-light/btn-ghost carry an intentional 1px border whose
   bottom edge this !important rule was silently stripping. */
.webrtc-hub a{ box-shadow: none !important; }
.webrtc-hub a:not(.btn){ border-bottom: 0 !important; }
.webrtc-hub a.tool-id,
.webrtc-hub a.tool-id:hover{ border-bottom: 0 !important; background: none !important; }
/* review-bar button: theme forces link color to white inside the dark bar,
   which made btn-light white-on-white. Force the hub's own colors. */
.webrtc-hub .review-bar a.btn-light,
.webrtc-hub a.btn-light{ background:#fff !important; color: var(--navy) !important; }
.webrtc-hub a.btn-teal{ background: var(--teal) !important; color:#fff !important; }
/* WP page hosting the hub: hide the theme page-title block, drop the body
   padding (hub sits flush to the footer) and the narrow content cap. */
body.webrtc-hub-page .simple-head{ display:none !important; }
body.webrtc-hub-page .simple-body{ padding:0 !important; }
body.webrtc-hub-page .simple-body .inner{ max-width:none !important; padding:0 !important; }
/* Hub sub-nav bar (section header under the bloggeek site header). */
.webrtc-hub .hub-subnav{ background:#fff; border-bottom:1px solid var(--border); }
.webrtc-hub .hub-subnav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:54px; padding-top:0; padding-bottom:0; }
.webrtc-hub .hub-subnav-brand{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:700; font-size:15px; letter-spacing:-0.01em; }
.webrtc-hub .hub-subnav-brand:hover{ color:var(--ink); }
.webrtc-hub .hub-subnav-glyph{ width:24px; height:24px; flex:0 0 auto; }
.webrtc-hub .hub-subnav-links{ display:flex; gap:26px; align-items:center; }
.webrtc-hub .hub-subnav-links a{ color:var(--ink-2); font-size:14px; font-weight:500; }
.webrtc-hub .hub-subnav-links a:hover{ color:var(--teal-dark); }
@media (max-width:600px){ .webrtc-hub .hub-subnav-links{ gap:16px; } .webrtc-hub .hub-subnav-brand span{ display:none; } }
/* editorial doc pages (methodology etc.): full-bleed like the others + readable prose */
.webrtc-hub.webrtc-hub-doc{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.webrtc-hub .hub-prose{ max-width: 760px; }
.webrtc-hub .hub-prose h2{ font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 38px 0 12px; }
.webrtc-hub .hub-prose h2:first-child{ margin-top: 0; }
.webrtc-hub .hub-prose p{ font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.webrtc-hub .hub-prose ul{ margin: 0 0 16px; padding-left: 22px; }
.webrtc-hub .hub-prose li{ font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 6px; }
.webrtc-hub .hub-prose code{ font-family: var(--mono, ui-monospace, monospace); font-size: 0.9em; background: var(--surface); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
/* Editorial CTA box aligns to the prose column (760px), not the full hub width,
   so it doesn't overhang the text column to the right. */
.webrtc-hub-doc .take-card.cta-card{ max-width: 760px; }

/* ---- Hub inquiry forms (pick-your-stack, review-your-tool) ----
   Posts to n8n via hub-enhance.js, same flow as the site contact/insights
   forms. Aligns to the 760px prose column. */
.webrtc-hub .hub-form-card{ max-width: 760px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 30px; }
.webrtc-hub .hub-form{ display: flex; flex-direction: column; gap: 16px; }
.webrtc-hub .hub-form-lead{ font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.webrtc-hub .hf-row.split{ display: flex; gap: 16px; }
.webrtc-hub .hf-row.split .hf-field{ flex: 1; min-width: 0; }
.webrtc-hub .hf-field{ display: flex; flex-direction: column; gap: 6px; }
.webrtc-hub .hf-field > span{ font-size: 13px; font-weight: 600; color: var(--ink-2); }
.webrtc-hub .hf-field input,
.webrtc-hub .hf-field textarea{ font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; width: 100%; box-sizing: border-box; }
.webrtc-hub .hf-field input:focus,
.webrtc-hub .hf-field textarea:focus{ outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.webrtc-hub .hf-field textarea{ resize: vertical; }
.webrtc-hub .hf-error{ color: #b42318; font-size: 14px; font-weight: 500; }
.webrtc-hub .hf-actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 640px){ .webrtc-hub .hf-row.split{ flex-direction: column; gap: 16px; } }
.webrtc-hub .hub-prose .measured-tag,
.webrtc-hub .hub-prose .verify-tag{ font-weight: 700; }
.webrtc-hub .hub-prose .method-close{ margin-top: 32px; font-size: 17px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--border); padding-top: 24px; }

/* ============================================================
   Methodology page components (design handoff 2026-06-25).
   ============================================================ */
.webrtc-hub .method-kicker{ margin-top:14px; font-size:14.5px; font-weight:600; color:var(--teal-dark); }

/* 2. the 3-step process cards */
.webrtc-hub .method-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.webrtc-hub .step-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:26px; }
.webrtc-hub .step-num{ font-family:var(--mono,ui-monospace,monospace); font-size:30px; font-weight:600; color:var(--teal); opacity:0.85; margin-bottom:10px; line-height:1; }
.webrtc-hub .step-title{ font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; margin-bottom:8px; }
.webrtc-hub .step-body{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }

/* 3. premise pull-quote + model marks row */
.webrtc-hub .method-quote{ font-size:24px !important; line-height:1.4; color:var(--ink) !important; font-weight:600; padding-left:20px; border-left:3px solid var(--teal); margin:28px 0 !important; }
.webrtc-hub .method-models{ margin:8px 0 20px; }

/* 4. metric blocks (full-width: token+name header, then the copy) */
.webrtc-hub .metric-list{ display:flex; flex-direction:column; gap:18px; }
.webrtc-hub .metric-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:28px 30px; }
.webrtc-hub .metric-card.quiet{ background:var(--surface); }
.webrtc-hub .metric-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
/* 3-class selector intentionally out-specifies the theme's .simple-body .prose
   h3 rule (font-size:22px; margin-top:32px) that leaks into the hub because it
   renders inside .simple-body .prose. Without this the margin pushed the title
   down inside the flex row and broke alignment with the scale chip. */
.webrtc-hub .metric-head .metric-name{ font-size:19px; font-weight:700; line-height:1.25; color:var(--ink); margin:0; letter-spacing:-0.01em; }
.webrtc-hub .metric-scale{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono,ui-monospace,monospace); font-size:13px; font-weight:600; color:var(--ink-2); background:#fff; border:1px solid var(--border); padding:3px 10px; border-radius:6px; letter-spacing:-0.01em; }
.webrtc-hub .metric-scale .agent-mark{ position:static; }
.webrtc-hub .metric-copy p{ font-size:15px; line-height:1.7; color:var(--ink-2); margin:0 0 14px; }
.webrtc-hub .metric-copy p:last-child{ margin-bottom:0; }
.webrtc-hub .method-models{ display:flex; gap:14px; align-items:center; margin:6px 0 20px; }
.webrtc-hub .method-models .lg-model{ width:26px; height:26px; }

/* 5. divergence thesis band */
.webrtc-hub .diverge-band{ background:var(--navy); color:#fff; padding:56px 0; margin:8px 0; }
.webrtc-hub .diverge-band .wrap{ max-width:840px; }
.webrtc-hub .diverge-band .eyebrow{ color:rgba(255,255,255,0.6); }
.webrtc-hub .diverge-band h2{ color:#fff; font-size:30px; font-weight:700; letter-spacing:-0.01em; margin:6px 0 16px; }
.webrtc-hub .diverge-band p{ font-size:20px; line-height:1.5; color:rgba(255,255,255,0.88); margin:0; }
.webrtc-hub .diverge-link{ margin-top:18px !important; font-size:15px !important; }
.webrtc-hub .diverge-band .diverge-link a{ color:var(--teal); font-weight:600; }

/* 6. close */
.webrtc-hub .not-leaderboard{ font-size:22px; font-weight:700; color:var(--ink); margin:0 0 16px; letter-spacing:-0.01em; }
.webrtc-hub .method-cta{ margin-top:32px; }

@media (max-width:780px){
  .webrtc-hub .method-steps{ grid-template-columns:1fr; }
  .webrtc-hub .metric-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .webrtc-hub .method-quote{ font-size:20px !important; }
  .webrtc-hub .diverge-band{ padding:40px 0; }
  .webrtc-hub .diverge-band h2{ font-size:24px; }
  .webrtc-hub .diverge-band p{ font-size:18px; }
}

/* Function column (testing-monitoring category) */
.webrtc-hub .fn-cell{ white-space:nowrap; }
.webrtc-hub .fn-chip{ display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600; letter-spacing:.03em; }
.webrtc-hub .fn-testing   { background:#dbeafe; color:#1e40af; }
.webrtc-hub .fn-monitoring{ background:#dcfce7; color:#166534; }
.webrtc-hub .fn-both      { background:#fef3c7; color:#92400e; }
.webrtc-hub .fn-disclosure{ font-size:10px; color:var(--ink-3); margin-top:3px; max-width:120px; white-space:normal; line-height:1.3; }
.webrtc-hub .fn-oss       { font-size:10px; color:var(--ink-3); margin-top:3px; }

/* ============================================================
   FAQ accordion (methodology page) - additive, 2026-07-10
   ============================================================ */
.webrtc-hub .faq-list { max-width: 780px; margin: 0 auto; }
.webrtc-hub .faq-item { border-bottom: 1px solid var(--line, #e3e3e3); }
.webrtc-hub .faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 40px 18px 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: 16.5px; line-height: 1.4; color: var(--ink);
}
.webrtc-hub .faq-item summary::-webkit-details-marker { display: none; }
.webrtc-hub .faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 20px; color: var(--teal-dark);
}
.webrtc-hub .faq-item[open] summary::after { content: "\2212"; }
.webrtc-hub .faq-a { padding: 0 0 22px; }
.webrtc-hub .faq-a p, .webrtc-hub .faq-a li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.webrtc-hub .faq-a p { margin: 0 0 12px; }
.webrtc-hub .faq-a p:last-child { margin-bottom: 0; }
.webrtc-hub .faq-a ol { margin: 0 0 12px 22px; padding: 0; }
.webrtc-hub .faq-a a { color: var(--teal-dark); }