/* Tel-Labs modern treatment. Loaded after each page's inline styles.
   Landing and content pages only: lab.html is an operating tool and is
   deliberately excluded, since expression must never obscure the task there. */

@font-face{font-family:Grotesk;src:url(/portal/fonts/spacegrotesk.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Plex;src:url(/portal/fonts/plexmono.woff2) format('woff2');font-weight:400 500;font-display:swap}

:root{
  --mg:Grotesk,system-ui,sans-serif; --mm:Plex,ui-monospace,Menlo,monospace;
  --mbg:#07090c; --ms1:#0e1218; --ms2:#131922;
  --mhair:rgba(255,255,255,.075); --mhair2:rgba(255,255,255,.16);
  --mink:#eef2f7; --mink2:#98a3b2; --mink3:#69737f; --mblue:#4f9bea;
}
body{background:var(--mbg);color:var(--mink)}
::selection{background:rgba(79,155,234,.28)}
:focus-visible{outline:2px solid var(--mblue);outline-offset:3px}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--mbg)}
::-webkit-scrollbar-thumb{background:#1d242e;border:3px solid var(--mbg);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#2a333f}

/* display type */
h1,h2,.section-title{font-family:var(--mg);font-weight:700;letter-spacing:-.042em;line-height:1.06;
  text-wrap:balance}
h3,.path-card h3,.price-tier{font-family:var(--mg);font-weight:600;letter-spacing:-.02em}
.section-title{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.section-sub{color:var(--mink2)}
.section-title,.section-sub{text-align:center;margin-left:auto;margin-right:auto;max-width:52ch}

/* surfaces */
.path-card,.price-card,.lab-card{background:var(--ms1);border:1px solid var(--mhair);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.path-card:hover,.price-card:hover,.lab-card:hover{border-color:var(--mhair2);transform:translateY(-3px)}
.price-card.featured{background:var(--ms2);border-color:rgba(79,155,234,.4)}
.path-card p,.price-features li,.lab-desc{color:var(--mink2)}

/* numerals and identifiers in mono, tabular */
.price-amount,.price-period,.lab-num,.gen-badge,.free-badge{font-family:var(--mm);
  font-variant-numeric:tabular-nums}
.lab-num{color:var(--mink3)}

/* the lab finder keeps its own look; only align it to the palette */
.lf input[type=search]{font-family:var(--mg)}
.lf-chip{font-family:var(--mm)}

/* The hero had THREE stacked textures: a strata plate at .22, a scrim running
   62% -> 93% black over it, and then the drift canvas. The scrim was darkest
   exactly where the drifting identifiers sit, so they were painting at an
   effective 7% alpha into 93% black - the film of darkness.
   The drift IS the hero texture now, so the plate goes and the scrim drops to
   a light bottom fade that only has to protect the copy. */
.hero,header.hero,.masthead{position:relative;isolation:isolate}
.hero::after,header.hero::after,.masthead::after{content:none}
.hero::before,header.hero::before,.masthead::before{content:'';position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(7,9,12,.10) 0%,rgba(7,9,12,.05) 55%,rgba(7,9,12,.55) 100%)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* the hero headline used gradient text fading to #8b949e, so the tail of the
   line sat at poor contrast. Emphasis comes from weight and size, not a fade. */
.hero h1,h1.hero-title,.hero-title{
  background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;
  color:var(--mink)!important}

/* The Anime engine owns reveal motion when it is loaded. main.js still adds .in
   and its CSS transition would smear anime's per-frame inline writes, so stand
   it down here rather than editing main.js (which every page depends on). */
html.mj .rv-in, html.mj .reveal, html.mj .mrv { transition: none; }
/* ==========================================================================
   Canonical typography. Measured 2026-08-13: the display face reached only a
   few homepage-specific selectors, so h2 fell back to Poppins on 10 pages and
   body copy stayed Poppins on all 18 teliq/televerse pages. Body copy is most
   of the pixels on screen, which is why every page still read as unchanged.
   Set here on the element, so it applies whatever classes a page happens to use.
   ========================================================================== */
body,
button, input, select, textarea {
  font-family: Grotesk, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3,
.section-head h2, .rv-head h2, .banner h1, .card h3 {
  font-family: Grotesk, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h2, .h2 { font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
h3, .h3 { font-weight: 600; letter-spacing: -.025em; }
h4, h5  { font-weight: 600; letter-spacing: -.015em; }

/* mono is the technical register: identifiers, counts, eyebrows, code */
code, kbd, samp, pre, .mono, .eyebrow, .pill, .tag,
.rv-chip, .cnt, .price-amt, .lab-id, .stat b {
  font-family: Plex, ui-monospace, Menlo, monospace;
  font-feature-settings: 'tnum' 1;
}
/* The 64x4px rounded brand bar under every section head is the single most
   template-looking element left on the inner pages, and it repeats on both
   sites. Replaced with a full-width hairline and a short brand segment — the
   same rule reads as structure rather than decoration. */
.section-head h2::after {
  width: 100%; max-width: 340px; height: 1px; border-radius: 0;
  background: linear-gradient(90deg,
    var(--brand) 0, var(--brand) 56px,
    rgba(255,255,255,.13) 56px, rgba(255,255,255,.13) 100%);
  margin-top: 20px;
}


/* strips whose children sat flush against the border+fill edge */
.rv-strip,.strip,.lf{padding-left:clamp(16px,3vw,28px);padding-right:clamp(16px,3vw,28px)}
.rv{padding-top:clamp(48px,6vw,88px)}

/* the detector reads the strip itself, whose children are flush to its filled
   edge; the inner container is what actually insets, so state it on the strip */
.rv-strip,.strip,.lf{box-sizing:border-box}
.rv-strip>*,.strip>*,.lf>*{padding-left:clamp(14px,2vw,22px);padding-right:clamp(14px,2vw,22px)}


/* A scaled ::before plate overhangs its box. .plated scaled to 1.08 with no
   clipping, so 4% leaked past the viewport on each side and the page scrolled
   sideways by 58px at 1440. Pseudo-elements are invisible to a DOM overflow
   query, which is why this survived every earlier check. */
/* overflow:hidden establishes a scroll container, which silently demotes any
   position:sticky descendant - it sticks to a box that never scrolls. That is
   what emptied the right half of the Tel-IQ scrollytelling section. clip does
   the same clipping without the scroll container, so sticky survives. */
.plated,.spine.plated,.rv-hero,.cta-strip,.banner,.rv-strip{overflow-x:clip;overflow-y:visible}
/* NOT html,body{overflow-x:hidden}: that clips every positioned child (the
   detector flagged 37) and can break the sticky header. Clipping the scaled
   plates at source is the actual fix. */

/* the drift canvas motion.js injects into .hero on labs */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .bfield{position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;opacity:1}


/* Page-wide identifier drift. Fixed behind everything, on every page.
   For it to be SEEN, no section may paint an opaque ground over it - that is
   what hid it before, so the alt bands go translucent. Nothing dims the canvas
   itself; the alpha in driftField is the only place opacity is decided. */
/* z-index:-1, NOT z-index:0 with the siblings forced to relative - that rule
   overrode position:sticky on the header and dropped it out of the flow.
   A negative-z child paints above the body background and below every sibling
   on its own, so nothing else needs touching. */
.pfield{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}