/* The skip-link is deliberately the very first element in .wp-site-blocks
   (so it's the first Tab stop), but that means it — not the header — is
   what WP core's automatic block-gap rule treats as :first-child. The
   header's wrapping .wp-block-template-part, now the *second* child,
   silently inherited a full block-gap margin-block-start (24px) above the
   header, pushing every section on every page down by that amount. */
.wp-site-blocks > .smartbeam-skip-link + .wp-block-template-part,
.wp-site-blocks > .smartbeam-skip-link ~ #main {
  margin-block-start: 0;
}

/* Page-hero lede (pagehero-resources/contact/lab.php). The kicker and h1
   are direct children of an align:full section; WP core's
   ".is-layout-constrained > :where(...)" rule caps each at max-width:1136px
   and centers that box within the wider full-bleed section, which is what
   actually produces their left edge (not "no centering effect" — the box
   really is narrower than its container here, so the auto-margins are real
   pixels, not zero). The lede needs to cap narrower still (600px, matching
   the source's .mk-pagehero p) but *left-aligned with that same edge*, not
   centered within the section on its own. margin-left:0 was wrong here — it
   flushes to the section's raw edge, a good ~200px left of where the
   heading actually sits. Replicating WP's own centering formula (half the
   section-vs-content leftover) as a fixed left margin lines the two up. */
.smartbeam-pagehero-lede {
  max-width: 600px;
  margin-left: max(0px, calc((100% - 1136px) / 2)) !important;
}

/* Same root cause, one level down: .smartbeam-hero__beam is a decorative,
   absolutely-positioned overlay placed as the first child of a
   layout:constrained group (hero-home.php, hero-applications.php,
   hero-solutions.php — and, nested again, inside hero-home.php's own
   pump-visual panel) purely so the section has position:relative to anchor
   it to. Being first-child, WP zeroes ITS margin correctly, which pushes
   the real content that follows into the "not first" bucket and gives it
   an unwanted margin-block-start instead. One rule fixes it at every
   nesting depth, since it doesn't matter what the actual next block is. */
.smartbeam-hero__beam + * {
  margin-block-start: 0 !important;
}
/* ============================================================
   SmartBeam AI — supplemental base layer
   theme.json handles colors, type, spacing, shadows, element
   styling and fonts. This file is only for the small set of
   things theme.json can't express. Keep it minimal on purpose —
   this is what replaces the old 100KB site.css.
   ============================================================ */

/* Universal border-box reset — the theme had no box-sizing reset at all,
   so any element combining a percentage/100% width with its own padding
   silently overflowed its container by the padding amount (content-box is
   the browser default). That's a whole class of layout bug waiting to
   happen wherever a pattern author adds padding to a width:100% element;
   border-box everywhere removes it at the root instead of patching each
   occurrence. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Chromium's UA stylesheet defaults headings to text-wrap:balance, which
   reflows for even line-length rather than filling the available width —
   invisible on a short 2-3-word heading (it only ever needed 1-2 lines
   anyway) but dramatic on a long one: a 720px-capped h2 that should read
   as 3-4 full-width lines instead balances into 6 short, ragged ones,
   looking like the width constraint itself is broken when it isn't.
   Restore normal greedy wrapping so the width design actually shows. */
h1, h2, h3, h4, h5, h6 {
  text-wrap: wrap;
}

/* Industrial legibility tuning (font-feature-settings isn't a theme.json field). */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01", "ss01";
}

/* Accessible, on-brand focus ring (quality floor). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wp--custom--ramp--beam-200, #c6c8f1);
  border-radius: var(--wp--custom--radius--sm, 4px);
}

::selection { background: var(--wp--custom--ramp--beam-200, #c6c8f1); color: var(--wp--custom--ramp--beam-900, #242765); }

/* --- Block style: "Kicker" (the Monaspace technical eyebrow) ---
   Registered on core/paragraph in functions.php; selectable from the editor. */
.is-style-kicker {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--xs, 12px);
  letter-spacing: var(--wp--custom--tracking--kicker, 0.14em);
  text-transform: uppercase;
  color: var(--wp--preset--color--beam);
}
/* On dark backgrounds the kicker lightens to the source's "light" variant
   instead of the brand-blue used on light/white sections. */
.has-abyss-background-color .is-style-kicker,
.has-ink-background-color .is-style-kicker,
.smartbeam-hero-panel .is-style-kicker {
  color: var(--wp--custom--ramp--beam-300, #a3a6e8);
}

/* Resource-card type tag ("White paper", "// Featured", …) — the source's
   .mk-res__type: same Monaspace eyebrow treatment as .is-style-kicker but
   smaller (10px) and scoped to resource cards. Brand blue by default,
   lightens to beam-300 on dark card backgrounds (the featured card). */
.smartbeam-restype {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--beam);
}
.has-ink-background-color .smartbeam-restype,
.has-abyss-background-color .smartbeam-restype {
  color: var(--wp--custom--ramp--beam-300, #a3a6e8);
}

/* Section heads (kicker + h2 + lede) read best capped narrower than the
   1200px content column, and the h2 itself is set in display size (the
   source's --type-h1, not the generic h2 default) — matches every section
   on every page in the source design. Scoped via adjacency so hero h1s
   (which follow a kicker too) are never affected.

   Deliberately NOT done via max-width + margin-left:0: the core theme.json
   layout rule (.is-layout-constrained > :where(...)) sets max-width:1200
   + margin auto !important on every direct child of a constrained section,
   and that "1200, centered" box lands in a different place depending on
   context — a plain section is itself already centered at 1200 (so
   margin-left:0 correctly means "flush with the section"), but an
   align:full section is NOT pre-centered, so its own unconstrained children
   are instead individually centered at 1200 within the full-bleed width —
   a different reference point. Overriding margin fights that per-context
   math and only matches one of the two cases.
   Constraining the *content* width via padding-right sidesteps this
   entirely: the box keeps its normal max-width:1136 + auto margin (so it
   lands wherever the core rule already correctly places it, in either
   context) and only the text reflows narrower inside it — same visual
   result, zero position fighting. max() guards against negative padding
   once the column itself is already narrower than 720px (small viewports).

   The percentage in that padding-right is still relative to this
   element's *containing block* (its DOM parent), not to its own
   max-width:1136-capped rendered width — those two are only the same
   number on a plain section. On an align:full section the parent is the
   full-bleed width (e.g. 1440px+), so "100%" there overshoots 1136 and
   the resulting padding over-narrows the text to well under 720px — the
   exact mismatch this fixes: a plain-section heading (2nd home section)
   read correctly while an align:full one right after it (3rd home
   section) read narrower. min() caps the padding at the plain-section
   value (contentSize - 720) so both contexts produce the same 720px
   column, while still degrading to 0 on small viewports where 100% is
   genuinely less than 720px. */
.is-style-kicker + h2 {
  padding-right: max(0px, min(calc(100% - 720px), calc(var(--wp--style--global--content-size, 1136px) - 720px)));
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 14px;
}
.is-style-kicker + h2 + p {
  padding-right: max(0px, min(calc(100% - 720px), calc(var(--wp--style--global--content-size, 1136px) - 720px)));
}
/* CTA banners (kicker+h2+lede inside a colored, already width-capped,
   centered call-to-action group) opt out of the section-head narrowing —
   they have their own contentSize on the group itself, and the 720px
   padding-right would fight text-align:center by leaving space on one
   side only. */
.has-beam-background-color .is-style-kicker + h2,
.has-beam-background-color .is-style-kicker + h2 + p,
.has-abyss-background-color .is-style-kicker + h2,
.has-abyss-background-color .is-style-kicker + h2 + p {
  padding-right: 0;
}

/* --- Block style: "Blueprint" (subtle technical grid backdrop for hero/panels) ---
   Registered on core/group in functions.php. */
.is-style-blueprint {
  background-image:
    linear-gradient(to right, rgba(107, 118, 137, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(107, 118, 137, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.is-style-blueprint.has-abyss-background-color,
.is-style-blueprint.has-ink-background-color {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Footer link columns: unbulleted, muted, brighten on hover/focus. */
.smartbeam-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.smartbeam-footer-links a {
  display: block;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  padding: 5px 0;
  text-decoration: none;
}
/* Footer column headings ("SOLUTIONS", "USE CASES", "COMPANY") — the
   source's .mk-footer__col h5 is a 10px mono eyebrow, not the theme's
   generic heading scale (no preset that small exists, hence the explicit
   px value rather than a fontSize slug). */
.smartbeam-footer-h5 {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--custom--ramp--graphite-500, #6b7689);
  margin: 0 0 14px;
}
.smartbeam-footer-links a:hover,
.smartbeam-footer-links a:focus-visible {
  color: var(--wp--preset--color--surface);
  text-decoration: underline;
}

.smartbeam-footer a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.smartbeam-footer a:hover,
.smartbeam-footer a:focus-visible {
  color: var(--wp--preset--color--surface);
  text-decoration: underline;
}

/* Contact form (assets: patterns/contact-form.php posts to admin-post.php). */
.smartbeam-contact-form .smartbeam-field {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--1);
  margin: 0 0 var(--wp--preset--spacing--4);
}
/* Name+email and company+fleet-size pair up side by side (source: Contact.jsx's
   two nested `gridTemplateColumns: "1fr 1fr"` rows), not stacked full-width. */
.smartbeam-contact-form .smartbeam-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--4);
  margin: 0 0 var(--wp--preset--spacing--4);
}
.smartbeam-contact-form .smartbeam-field-row .smartbeam-field {
  margin-bottom: 0;
}
.smartbeam-contact-form label {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink);
}
.smartbeam-contact-form input,
.smartbeam-contact-form textarea {
  font: inherit;
  font-size: var(--wp--preset--font-size--base);
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--sm, 4px);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  width: 100%;
}
.smartbeam-contact-form textarea {
  resize: vertical;
}
/* "PD pumps in fleet" carries a fixed "units" affix inside the box, like the
   source's Input suffix prop. */
.smartbeam-contact-form .smartbeam-input-wrap {
  position: relative;
  display: block;
}
.smartbeam-contact-form .smartbeam-input-wrap input {
  padding-right: 52px;
  font-family: var(--wp--preset--font-family--data);
}
.smartbeam-contact-form .smartbeam-input-suffix {
  position: absolute;
  top: 50%;
  right: var(--wp--preset--spacing--4);
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  pointer-events: none;
}
/* Sidebar contact rows (icon + text) — Contact.jsx renders these as flex
   rows with a Lucide icon, not a bulleted list. */
.smartbeam-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wp--preset--color--body);
  font-size: var(--wp--preset--font-size--sm);
}
.smartbeam-contact-row svg {
  flex: none;
  color: var(--wp--preset--color--beam);
}
.smartbeam-contact-form .smartbeam-submit {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--2);
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
  border: none;
  border-radius: var(--wp--custom--radius--sm, 6px);
  background: var(--wp--preset--color--beam);
  color: #fff;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--sm);
  cursor: pointer;
}
.smartbeam-contact-form .smartbeam-submit:hover {
  background: var(--wp--preset--color--beam-strong);
}

/* Skip link: visually hidden until keyboard focus. */
.smartbeam-skip-link {
  position: absolute;
  top: -1000px;
  left: 0;
  z-index: 100000;
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-radius: 0 0 var(--wp--custom--radius--sm, 4px) 0;
}
.smartbeam-skip-link:focus-visible {
  top: 0;
  left: 0;
}

/* --- Hero diagonal light beam. A relatively-positioned hero section gets
   this absolutely-positioned overlay for the signature blue light streak;
   the section needs position:relative, which is-style-blueprint provides. */
.is-style-blueprint { position: relative; }
.smartbeam-hero__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 32%, rgba(90, 94, 212, 0.30) 52%, transparent 74%);
  filter: blur(7px);
  pointer-events: none;
}

/* Real content siblings of a .smartbeam-hero__beam must be explicitly
   stacked above it — position:absolute content always paints above plain
   static content regardless of DOM order, so without this the beam's
   semi-transparent wash sits ON TOP of and dulls whatever it's meant to
   glow behind (most visible over the SVG panels, which have no opaque
   tile of their own to protect them). */
.smartbeam-hero__content {
  position: relative;
  z-index: 1;
}

/* A visual panel darker than the "ink" theme color, matching the source's
   dedicated hero-panel background (distinct from the abyss/ink palette). */
.smartbeam-hero-panel {
  background: #0e131d;
}

/* --- Home hero: animated twin-screw pump schematic. --- */
.smartbeam-pump { width: 100%; height: auto; display: block; color: var(--wp--custom--ramp--beam-300, #a3a6e8); }
.smartbeam-pump__lbl { fill: var(--wp--custom--ramp--graphite-400, #94a0b3); font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.14em; }
.smartbeam-pump__lbl--r { text-anchor: end; }
.smartbeam-pump__flowlbl { fill: var(--wp--custom--ramp--graphite-500, #6b7689); font-family: var(--wp--preset--font-family--mono); font-size: 9px; letter-spacing: 0.12em; text-anchor: middle; text-transform: uppercase; }
.smartbeam-pump__pipe { stroke: rgba(255, 255, 255, 0.26); stroke-width: 6; stroke-linecap: round; fill: none; }
.smartbeam-pump__casing { fill: rgba(255, 255, 255, 0.02); stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }
.smartbeam-pump__rotor { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; }
.smartbeam-pump__flights { color: var(--wp--custom--ramp--beam-400, #7c80dd); opacity: 0.6; }
.smartbeam-pump__fluidband { opacity: 0.9; }
.smartbeam-pump__drop {
  fill: var(--wp--preset--color--signal);
  filter: drop-shadow(0 0 4px rgba(14, 147, 184, 0.6));
  animation: smartbeamPumpFluid 2.8s linear infinite;
}
.smartbeam-pump__shaft { stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; }
.smartbeam-pump__hub { fill: var(--wp--preset--color--beam); stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.smartbeam-pump__arrow { stroke: var(--wp--custom--ramp--beam-300, #a3a6e8); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.smartbeam-screw { animation: smartbeamPumpScrew 1.7s linear infinite; }
.smartbeam-screw--b { animation-duration: 1.95s; }
@keyframes smartbeamPumpScrew { to { transform: translateX(26px); } }
@keyframes smartbeamPumpFluid {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 0.95; }
  88% { opacity: 0.95; }
  100% { transform: translateX(284px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .smartbeam-screw, .smartbeam-pump__drop { animation: none; }
  .smartbeam-pump__drop { opacity: 0.85; }
}

/* --- Applications hero: "control room" — six live monitor readouts. ---
   Numbers are set server-side as static values; enhance.js drifts them via
   [data-drift] once loaded. Pure-CSS animations (ping/screw/bars/blink)
   degrade to their resting frame under the reduced-motion rule below. */
.smartbeam-ctrl {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--xl, 12px);
  background: #0b0f17;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--wp--preset--shadow--lg);
  padding: 22px 22px 0;
}
.smartbeam-ctrl__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(120% 100% at 50% 0%, black, transparent 82%);
}
.smartbeam-ctrl__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(90, 94, 212, 0.22) 54%, transparent 74%);
  filter: blur(8px);
  pointer-events: none;
}
.smartbeam-ctrl__topline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--wp--custom--ramp--graphite-400, #94a0b3);
  padding-bottom: 16px;
}
.smartbeam-ctrl__ping {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--signal);
  animation: smartbeamCtrlPing 1.8s infinite;
}
@keyframes smartbeamCtrlPing {
  0% { box-shadow: 0 0 0 0 rgba(14, 147, 184, 0.5); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.smartbeam-ctrl__wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  padding-bottom: 22px;
}
.smartbeam-ctrl__mon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 11px 12px;
  border-radius: var(--wp--custom--radius--md, 6px);
  background: linear-gradient(180deg, #10151f, #0c1017);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 18px 30px -24px rgba(90, 94, 212, 0.5);
  overflow: hidden;
}
.smartbeam-ctrl__mon--tall { grid-row: span 2; }
.smartbeam-ctrl__lbl {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--wp--custom--ramp--graphite-500, #6b7689);
}
.smartbeam-ctrl__foot {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  color: var(--wp--custom--ramp--graphite-400, #94a0b3);
  margin-top: auto;
}
.smartbeam-ctrl__foot b {
  font-family: var(--wp--preset--font-family--data);
  color: var(--wp--preset--color--signal);
  font-variant-numeric: tabular-nums;
}
.smartbeam-ctrl__foot--adv { color: var(--wp--preset--color--advisory); }
.smartbeam-ctrl__big {
  font-family: var(--wp--preset--font-family--data);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.smartbeam-ctrl__big i {
  font-style: normal;
  font-size: 12px;
  color: var(--wp--custom--ramp--graphite-400, #94a0b3);
}
.smartbeam-ctrl__mon--rul .smartbeam-ctrl__big { color: var(--wp--preset--color--advisory); }

.smartbeam-ctrl__pump { width: 100%; flex: 1; min-height: 0; }
.smartbeam-ctrl__case { fill: rgba(255, 255, 255, 0.02); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; }
.smartbeam-ctrl__pipe { stroke: rgba(255, 255, 255, 0.24); stroke-width: 4; stroke-linecap: round; fill: none; }
.smartbeam-ctrl__hub { fill: var(--wp--preset--color--beam); }
.smartbeam-ctrl__screw { clip-path: inset(0 round 18px); }
.smartbeam-ctrl__screw line {
  stroke: var(--wp--custom--ramp--beam-300, #a3a6e8);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.6;
  animation: smartbeamCtrlScrew 1.8s linear infinite;
}
@keyframes smartbeamCtrlScrew { to { transform: translateX(13px); } }

.smartbeam-ctrl__trend { width: 100%; height: 34px; }
.smartbeam-ctrl__trend polyline {
  fill: none;
  stroke: var(--wp--custom--ramp--beam-300, #a3a6e8);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: smartbeamCtrlDraw 2.6s ease-out forwards;
}
@keyframes smartbeamCtrlDraw { to { stroke-dashoffset: 0; } }

.smartbeam-ctrl__bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; flex: 1; }
.smartbeam-ctrl__bars i {
  flex: 1;
  background: var(--wp--custom--ramp--beam-400, #7c80dd);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
  animation: smartbeamCtrlEq 1s ease-in-out infinite;
}
@keyframes smartbeamCtrlEq { 0%, 100% { height: 20%; } 50% { height: 90%; } }

.smartbeam-ctrl__wave { width: 100%; height: 32px; flex: 1; }
.smartbeam-ctrl__wave path { fill: none; stroke: var(--wp--preset--color--signal); stroke-width: 1.8; stroke-linecap: round; opacity: 0.85; }

.smartbeam-ctrl__fleet { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; flex: 1; align-content: center; }
.smartbeam-ctrl__fleet span { aspect-ratio: 1; border-radius: 2px; }
.smartbeam-ctrl__fleet .ok { background: rgba(31, 138, 91, 0.7); }
.smartbeam-ctrl__fleet .adv { background: var(--wp--preset--color--advisory); animation: smartbeamCtrlBlink 1.4s steps(1) infinite; }
@keyframes smartbeamCtrlBlink { 50% { opacity: 0.3; } }

.smartbeam-ctrl__desk {
  position: relative;
  height: 26px;
  margin-top: 14px;
  border-radius: var(--wp--custom--radius--md, 6px) var(--wp--custom--radius--md, 6px) 0 0;
  background: linear-gradient(180deg, rgba(90, 94, 212, 0.16), transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  .smartbeam-ctrl__wall { grid-template-columns: repeat(2, 1fr); }
  .smartbeam-ctrl__mon--tall { grid-row: span 1; }
}

/* Typewriter kicker (Applications hero): cycles phrases from a JSON array in
   data-phrases. Renders the first phrase statically with no JS — enhance.js
   only adds the cycling. */
.smartbeam-typewriter__cursor {
  display: inline-block;
  margin-left: 1px;
  animation: smartbeamCaretBlink 1s step-end infinite;
}
@keyframes smartbeamCaretBlink { 50% { opacity: 0; } }

/* --- Solutions hero: fleet-under-scan visual. --- */
.smartbeam-fleet {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--xl, 12px);
  background: #0e131d;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--wp--preset--shadow--lg);
  padding: 30px 30px 26px;
}
.smartbeam-fleet__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(120% 100% at 50% 0%, black, transparent 82%);
}
.smartbeam-fleet__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.smartbeam-fleet__scan::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  left: -40%;
  background: linear-gradient(90deg, transparent, rgba(14, 147, 184, 0.22), transparent);
  animation: smartbeamFleetScan 4.2s ease-in-out infinite;
}
@keyframes smartbeamFleetScan {
  0% { left: -40%; }
  100% { left: 108%; }
}
@media (prefers-reduced-motion: reduce) {
  .smartbeam-fleet__scan::before { animation: none; opacity: 0; }
}
.smartbeam-fleet__plot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto auto auto;
  gap: 14px 8px;
  align-items: center;
}
.smartbeam-fleet__band {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  border-radius: var(--wp--custom--radius--md, 6px);
  padding: 12px 16px;
  min-height: 56px;
}
.smartbeam-fleet__band--sentinel {
  grid-column: 6 / 8;
  grid-row: 1;
  background: rgba(90, 94, 212, 0.22);
  border: 1px solid var(--wp--preset--color--beam);
}
.smartbeam-fleet__band--accel {
  grid-column: 1 / 8;
  grid-row: 2;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.smartbeam-fleet__bk { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--sm); color: #fff; white-space: nowrap; }
.smartbeam-fleet__bd { font-family: var(--wp--preset--font-family--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--custom--ramp--graphite-400, #94a0b3); }
.smartbeam-fleet__band--sentinel .smartbeam-fleet__bd { color: var(--wp--custom--ramp--beam-200, #c6c8f1); }
.smartbeam-fleet__row {
  grid-column: 1 / 8;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.smartbeam-fleet__pump {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 0 9px;
  border-radius: var(--wp--custom--radius--md, 6px);
  color: var(--wp--custom--ramp--graphite-500, #6b7689);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.smartbeam-fleet__pump.is-crit {
  color: var(--wp--custom--ramp--beam-300, #a3a6e8);
  border-color: var(--wp--preset--color--beam);
  background: rgba(90, 94, 212, 0.14);
}
.smartbeam-fleet__tag { font-family: var(--wp--preset--font-family--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--custom--ramp--beam-300, #a3a6e8); white-space: nowrap; }
@media (max-width: 640px) {
  .smartbeam-fleet { padding: 20px 16px 18px; }
  .smartbeam-fleet__plot { gap: 10px 6px; }
  .smartbeam-fleet__band { padding: 10px 8px; }
  .smartbeam-fleet__bk { font-size: 11px; }
}

/* --- Reveal-card icon badge (Home · "Why existing solutions don't work"). --- */
.smartbeam-revealcard__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--wp--custom--radius--md, 6px);
  display: grid;
  place-items: center;
  background: var(--wp--preset--color--beam-soft);
  color: var(--wp--preset--color--beam);
  margin-bottom: var(--wp--preset--spacing--4, 16px);
}
.smartbeam-revealcard__rk {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--critical);
}

/* --- Cost-of-waiting: CSS-only two-state toggle (radio hack, no JS). --- */
.smartbeam-cow { margin-top: var(--wp--preset--spacing--4, 16px); }
.smartbeam-cow__switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.smartbeam-cow__switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: var(--wp--preset--color--sunken);
}
.smartbeam-cow__seg {
  display: inline-block;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  border-radius: var(--wp--custom--radius--pill, 999px);
  color: var(--wp--preset--color--muted);
}
#smartbeam-cow-wait:checked ~ .smartbeam-cow__switch label[for="smartbeam-cow-wait"],
#smartbeam-cow-act:checked ~ .smartbeam-cow__switch label[for="smartbeam-cow-act"] {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  box-shadow: var(--wp--preset--shadow--sm);
}
#smartbeam-cow-act:checked ~ .smartbeam-cow__switch label[for="smartbeam-cow-act"] {
  background: var(--wp--preset--color--beam);
  color: #fff;
}
.smartbeam-cow__rows {
  margin-top: var(--wp--preset--spacing--6, 24px);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--xl, 12px);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.smartbeam-cow__row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  padding: 22px clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--wp--preset--color--line);
  border-left: 3px solid transparent;
}
.smartbeam-cow__row:last-child { border-bottom: 0; }
#smartbeam-cow-wait:checked ~ .smartbeam-cow__rows .smartbeam-cow__row { border-left-color: rgba(192, 52, 46, 0.55); }
#smartbeam-cow-act:checked ~ .smartbeam-cow__rows .smartbeam-cow__row { border-left-color: var(--wp--preset--color--beam); background: rgba(238, 239, 251, 0.4); }
.smartbeam-cow__dim { display: flex; align-items: center; gap: 13px; }
.smartbeam-cow__dimic {
  width: 40px;
  height: 40px;
  border-radius: var(--wp--custom--radius--md, 6px);
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(192, 52, 46, 0.12);
  color: var(--wp--preset--color--critical);
}
#smartbeam-cow-act:checked ~ .smartbeam-cow__rows .smartbeam-cow__dimic {
  background: var(--wp--preset--color--beam-soft);
  color: var(--wp--preset--color--beam);
}
.smartbeam-cow__dimt { font-family: var(--wp--preset--font-family--mono); font-size: 14px; font-weight: 600; color: var(--wp--preset--color--ink); }
.smartbeam-cow__cell { min-width: 0; align-self: center; }
.smartbeam-cow__wait-text, .smartbeam-cow__act-text { display: none; }
#smartbeam-cow-wait:checked ~ .smartbeam-cow__rows .smartbeam-cow__wait-text { display: block; }
#smartbeam-cow-act:checked ~ .smartbeam-cow__rows .smartbeam-cow__act-text { display: block; }
.smartbeam-cow__wait-text { font-size: var(--wp--preset--font-size--md); line-height: 1.55; color: var(--wp--preset--color--body); font-weight: 500; }
.smartbeam-cow__act-text b { color: var(--wp--preset--color--ink); }
.smartbeam-cow__act-text { font-size: var(--wp--preset--font-size--sm); line-height: 1.6; color: var(--wp--preset--color--muted); }
@media (max-width: 640px) {
  .smartbeam-cow__row { grid-template-columns: 1fr; gap: 14px; }
}

/* --- Problems accordion (Home · "Sound familiar?"). ---
   core/details rendered as the card: bordered, rounded, a 3-column summary
   bar (number | label+title | chevron), the native browser marker
   suppressed in favor of a custom rotating chevron. */
.smartbeam-pain {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg, 8px);
  background: var(--wp--preset--color--surface);
  overflow: hidden;
}
.smartbeam-pain[open] {
  border-color: var(--wp--custom--ramp--beam-300, #a3a6e8);
  box-shadow: var(--wp--preset--shadow--sm);
}
.smartbeam-pain + .smartbeam-pain {
  margin-top: var(--wp--preset--spacing--4, 16px);
}
/* <summary>'s native list-item box doesn't reliably take a plain display:grid
   override across engines — its content shrink-wraps instead of spanning the
   row. Grid lives on an inner wrapper div instead; the summary itself stays
   a plain full-width block. */
.smartbeam-pain__bar {
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 24px clamp(20px, 2.4vw, 30px);
  list-style: none;
}
.smartbeam-pain__bar::-webkit-details-marker,
.smartbeam-pain__bar::marker {
  display: none;
  content: "";
}
.smartbeam-pain__barin {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}
.smartbeam-pain__num {
  flex: none;
  font-family: var(--wp--preset--font-family--data);
  font-size: 13px;
  color: var(--wp--custom--ramp--graphite-300, #bcc4d1);
}
.smartbeam-pain[open] .smartbeam-pain__num { color: var(--wp--preset--color--beam); }
.smartbeam-pain__head { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.smartbeam-pain__label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--beam);
}
.smartbeam-pain__title { flex: 1 1 auto; min-width: 0; font-size: var(--wp--preset--font-size--xl); font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--ink); }
.smartbeam-pain__chev {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--wp--custom--ramp--graphite-300, #bcc4d1);
  transition: transform var(--wp--custom--motion--dur-base, 180ms) var(--wp--custom--motion--ease-out, ease-out);
}
.smartbeam-pain__chev svg { display: block; }
.smartbeam-pain[open] .smartbeam-pain__chev { transform: rotate(180deg); color: var(--wp--preset--color--beam); }
.smartbeam-pain__body { padding: 0 clamp(20px, 2.4vw, 30px) 28px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.smartbeam-pain__desc { font-size: var(--wp--preset--font-size--md); line-height: 1.7; color: var(--wp--preset--color--muted); margin: 0; }
.smartbeam-cons { display: flex; flex-direction: column; gap: 12px; }
.smartbeam-cons__row { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border-radius: var(--wp--custom--radius--md, 6px); }
.smartbeam-cons__row--floor { background: rgba(181, 116, 12, 0.11); border: 1px solid rgba(181, 116, 12, 0.32); }
.smartbeam-cons__row--pnl { background: rgba(192, 52, 46, 0.08); border: 1px solid rgba(192, 52, 46, 0.26); }
.smartbeam-cons__k { font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.smartbeam-cons__row--floor .smartbeam-cons__k { color: #8a5a09; }
.smartbeam-cons__row--pnl .smartbeam-cons__k { color: #96271f; }
.smartbeam-cons__t { font-size: var(--wp--preset--font-size--sm); line-height: 1.5; color: var(--wp--preset--color--body); font-weight: 500; margin: 0; }
@media (max-width: 640px) {
  .smartbeam-pain__body { grid-template-columns: 1fr; gap: 18px; }
}

/* --- WhatWeDo icon badge (Home · "Fluids run the world"), matching the
   PurposeBuilt reveal-card treatment for visual consistency. --- */
.smartbeam-whatwedo__ic {
  width: 40px;
  height: 40px;
  border-radius: var(--wp--custom--radius--md, 6px);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.5);
  color: var(--wp--preset--color--beam);
  margin-bottom: var(--wp--preset--spacing--3, 12px);
}

/* --- Sentinel/Accel approach cards (Solutions · "Two ways to look inside"). --- */
.smartbeam-appx__head { display: flex; align-items: center; gap: 14px; }
.smartbeam-appx__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--wp--custom--radius--md, 6px);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--wp--preset--color--sunken);
  color: var(--wp--preset--color--beam);
}
.smartbeam-role[open] .smartbeam-appx__ic { background: var(--wp--preset--color--beam); color: #fff; }
.smartbeam-appx__card--sentinel .smartbeam-appx__ic { background: var(--wp--preset--color--beam-soft); color: var(--wp--preset--color--beam); }
.smartbeam-appx__card--accel .smartbeam-appx__ic { background: rgba(14, 147, 184, 0.14); color: #0c7a99; }
.smartbeam-appx__name {
  font-family: var(--wp--preset--font-family--data);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
}
.smartbeam-appx__tag {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-top: 3px;
}

/* --- Sentinel/Accel comparison table (replaces a plain wp:table). --- */
.smartbeam-vs {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--xl, 12px);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.smartbeam-vs__head, .smartbeam-vs__row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}
.smartbeam-vs__head { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--sunken); }
.smartbeam-vs__col {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(16px, 2vw, 26px);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  border-left: 1px solid var(--wp--preset--color--line);
}
.smartbeam-vs__col--s { color: var(--wp--custom--ramp--beam-700, #3438ab); box-shadow: inset 0 -2px 0 var(--wp--preset--color--beam); }
.smartbeam-vs__col--a { color: #0c7a99; box-shadow: inset 0 -2px 0 var(--wp--preset--color--signal); }
.smartbeam-vs__row { border-bottom: 1px solid var(--wp--preset--color--line); }
.smartbeam-vs__row:last-child { border-bottom: none; }
.smartbeam-vs__dim {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px clamp(16px, 2vw, 26px);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  background: var(--wp--preset--color--page);
}
.smartbeam-vs__dimic {
  width: 26px;
  height: 26px;
  border-radius: var(--wp--custom--radius--sm, 4px);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--wp--preset--color--sunken);
  color: var(--wp--custom--ramp--graphite-600, #4e596b);
}
.smartbeam-vs__cell {
  padding: 18px clamp(16px, 2vw, 26px);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.55;
  color: var(--wp--preset--color--body);
  border-left: 1px solid var(--wp--preset--color--line);
  margin: 0;
}
.smartbeam-vs__cell--s { background: rgba(238, 239, 251, 0.45); }
.smartbeam-vs__cell--a { background: rgba(14, 147, 184, 0.05); }
@media (max-width: 782px) {
  .smartbeam-vs__head { display: none; }
  .smartbeam-vs__row { grid-template-columns: 1fr; }
  .smartbeam-vs__cell { border-left: none; border-top: 1px solid var(--wp--preset--color--line); }
}

/* --- Role selector cards (Solutions · "Built for every role"). ---
   Same accordion-card shell as .smartbeam-pain, but the summary is an
   icon+title+subtitle header (reusing the appx icon-badge look) rather
   than a numbered row, and the open card gets a highlighted tint instead
   of just a border, matching the source's "selected" tab state. */
.smartbeam-role {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg, 8px);
  background: var(--wp--preset--color--surface);
}
.smartbeam-role + .smartbeam-role { margin-top: var(--wp--preset--spacing--4, 16px); }
.smartbeam-role[open] { border-color: var(--wp--preset--color--beam); background: var(--wp--preset--color--beam-soft); box-shadow: var(--wp--preset--shadow--sm); }
.smartbeam-role__bar { display: block; width: 100%; cursor: pointer; padding: var(--wp--preset--spacing--5, 20px); list-style: none; }
.smartbeam-role__bar::-webkit-details-marker, .smartbeam-role__bar::marker { display: none; content: ""; }
.smartbeam-role__barin { display: flex; align-items: center; gap: 14px; width: 100%; }
.smartbeam-role__name { font-size: var(--wp--preset--font-size--base); font-weight: 600; color: var(--wp--preset--color--ink); }
.smartbeam-role__tag { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-top: 2px; }
.smartbeam-role__body { padding: 0 var(--wp--preset--spacing--5, 20px) var(--wp--preset--spacing--5, 20px); }

.smartbeam-role-shift {
  background: var(--wp--preset--color--abyss);
  color: var(--wp--preset--color--page);
  border-radius: var(--wp--custom--radius--lg, 8px);
  padding: var(--wp--preset--spacing--6, 24px);
  margin-bottom: var(--wp--preset--spacing--4, 16px);
}
.smartbeam-role-shift p { font-size: var(--wp--preset--font-size--md); line-height: 1.6; margin: 8px 0 0; }
.smartbeam-role-outcome {
  background: var(--wp--preset--color--beam-soft);
  border-radius: var(--wp--custom--radius--lg, 8px);
  padding: var(--wp--preset--spacing--5, 20px) var(--wp--preset--spacing--6, 24px);
  margin-top: var(--wp--preset--spacing--4, 16px);
}
.smartbeam-role-outcome p { font-size: var(--wp--preset--font-size--md); font-weight: 600; color: var(--wp--preset--color--ink); margin: 4px 0 0; }

/* Lab page — simulation-provenance stat cards (patterns/sim-provenance.php).
   Frosted cards on the dark blueprint bg; numbers count up on scroll-into-view. */
.smartbeam-simgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; position: relative; }
@media (max-width: 900px) {
  .smartbeam-simgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .smartbeam-simgrid { grid-template-columns: 1fr; }
}
.smartbeam-simcard { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--wp--custom--radius--lg, 8px); padding: 24px; background: rgba(255, 255, 255, 0.03); }
.smartbeam-simcard__v { font-family: var(--wp--preset--font-family--data); font-weight: 500; font-size: 44px; line-height: 1; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.smartbeam-simcard__u { font-size: 20px; color: var(--wp--custom--ramp--beam-300, #a3a6e8); margin-left: 3px; }
.smartbeam-simcard__l { font-size: var(--wp--preset--font-size--sm); color: var(--wp--custom--ramp--graphite-400, #94a0b3); margin-top: 12px; line-height: 1.5; }

/* Lab page — Accel/Sentinel method cards (patterns/two-methods.php). Both
   cards share identical styling — the source does not tint either one. */
.smartbeam-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.smartbeam-method-card { display: flex; flex-direction: column; border-radius: var(--wp--custom--radius--xl, 12px); border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); overflow: hidden; box-shadow: var(--wp--preset--shadow--sm); }
.smartbeam-method-top { padding: 28px 28px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.smartbeam-method-name { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--2-xl); letter-spacing: -0.01em; color: var(--wp--preset--color--ink); }
.smartbeam-method-role { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--beam); font-weight: 500; margin-top: 4px; }
.smartbeam-method-tag { font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--custom--ramp--beam-700, #3438ab); background: var(--wp--preset--color--beam-soft); border: 1px solid rgba(65, 69, 204, 0.22); border-radius: var(--wp--custom--radius--xs, 2px); padding: 3px 8px; white-space: nowrap; }
.smartbeam-method-body { padding: 16px 28px 28px; }
.smartbeam-method-desc { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); line-height: 1.6; }
.smartbeam-method-feats { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.smartbeam-method-feats li { display: flex; gap: 10px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink); align-items: flex-start; }
.smartbeam-method-feats svg { flex: none; margin-top: 2px; color: var(--wp--preset--color--beam); }
@media (max-width: 782px) {
  .smartbeam-method-grid { grid-template-columns: 1fr; }
}

/* Lab page — disambiguation comparison (patterns/disambiguation.php). Custom
   div-grid, not a native table: WP's default table styling has no dark-bg
   variant and wouldn't match the source's .mk-compare treatment. */
.smartbeam-disamb { margin-top: 40px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--wp--custom--radius--lg, 8px); overflow: hidden; }
.smartbeam-disamb__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.smartbeam-disamb__row + .smartbeam-disamb__row { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.smartbeam-disamb__row > div { padding: 16px 20px; }
.smartbeam-disamb__row > div + div { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.smartbeam-disamb__head > div { background: rgba(255, 255, 255, 0.04); }
.smartbeam-disamb__dim { font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--custom--ramp--graphite-400, #94a0b3); }
.smartbeam-disamb__dim--brand { color: var(--wp--custom--ramp--beam-300, #a3a6e8); }
.smartbeam-disamb__term { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--md); color: #fff; }
.smartbeam-disamb__val { font-size: var(--wp--preset--font-size--sm); line-height: 1.45; color: var(--wp--custom--ramp--graphite-400, #94a0b3); }
.smartbeam-disamb__val--us { color: var(--wp--custom--ramp--graphite-200, #d7dce5); }
@media (max-width: 782px) {
  .smartbeam-disamb__row { grid-template-columns: 1fr; }
  .smartbeam-disamb__row > div + div { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

/* Icon-card grids (Applications · industries.php, pump-types.php) — plain
   raw wp:html grids have no automatic mobile stacking the way wp:columns
   does, so they need their own breakpoints matching the source's
   .mk-industries/.mk-personas convention (3/4 cols -> 2 at 900px -> 1 at
   600px), or cards clip off the right edge on narrow viewports. */
.smartbeam-icongrid { display: grid; gap: 20px; }
.smartbeam-icongrid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.smartbeam-icongrid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .smartbeam-icongrid-3,
  .smartbeam-icongrid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .smartbeam-icongrid-3,
  .smartbeam-icongrid-4 {
    grid-template-columns: 1fr;
  }
}

/* Home hero heading emphasis ("superintelligence") — colored per source's
   .em span, and kept on one line: at mobile widths this 17-character word
   was breaking mid-word ("superintelligenc"/"e") with no hyphen, which reads
   as broken rather than a graceful wrap. */
.smartbeam-em {
  color: var(--wp--custom--ramp--beam-300, #a3a6e8);
  white-space: nowrap;
}

/* Home hero live-readout card (patterns/hero-home.php). A custom grid, not
   wp:columns, because the 3 metrics must stay side by side with divider
   lines at every viewport width (the source never stacks this row) — a
   wp:columns block would stack on mobile via WP core's default behavior. */
.smartbeam-readout {
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--wp--custom--radius--lg, 8px);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px 18px;
}
.smartbeam-readout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.smartbeam-readout__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.smartbeam-readout__cell {
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  padding-left: 14px;
  min-width: 0;
}
.smartbeam-readout__cell:first-child {
  border-left: none;
  padding-left: 0;
}
.smartbeam-readout__v {
  font-family: var(--wp--preset--font-family--data);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.smartbeam-readout__k {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: var(--wp--custom--ramp--beam-300, #a3a6e8);
  margin-top: 8px;
}
.smartbeam-readout__sub {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--custom--ramp--graphite-500, #6b7689);
  margin-top: 3px;
}
@media (max-width: 640px) {
  .smartbeam-readout__grid { gap: 8px; }
  .smartbeam-readout__cell { padding-left: 8px; }
  .smartbeam-readout__v { font-size: 20px; }
}

/* Live-status pill (StatusIndicator: dot + pulsing ring + label). */
.smartbeam-status { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.smartbeam-status__dot { position: relative; width: 9px; height: 9px; border-radius: 999px; flex: none; background: var(--wp--preset--color--nominal); }
.smartbeam-status__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--nominal);
  opacity: 0;
  animation: smartbeamStatusPing 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .smartbeam-status__dot::after { animation: none; }
}
@keyframes smartbeamStatusPing {
  0% { opacity: 0.5; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.4); }
}
.smartbeam-status__label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--page);
  font-weight: 500;
  white-space: nowrap;
}

/* Respect reduced-motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}