/* ============================================================
   JustAir 2026 — FEATURES TEMPLATE modernization (page-scoped).
   ONE overlay for the shared "Features Template" → all 4 category
   sub-pages (and any future ones). Templated on the about/solutions
   pattern: KEEP + restyle the real Webflow navbar (dark-logo swap),
   mesh hero, Sora/Manrope, pill buttons, floating cards, wave-
   connection, embedded interactive demo, on-brand CTA + footer.

   Per-category accent is keyed off body[data-feat="<slug>"] (set by
   the JS). The published content uses off-palette hues (#8CC63F lime,
   #3BBDC4 teal) — those are NORMALIZED here to brand palette only.

   Strict brand palette only: navy #211F54, sky #29ABE2 (text #196A8C),
   gold #E4AF60, green #22B573, grey #98A5B2 (text #4B5157), bg #ECF3F7.
   ============================================================ */
/* JM-BUILD: features-commportal-2026-06-15o */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --navy:#211F54; --sky:#29ABE2; --sky-dk:#196A8C; --gold:#E4AF60; --green:#22B573;
  --grey:#98A5B2; --grey-med:#4B5157; --light-bg:#ECF3F7; --bd:hsl(220 20% 90%);
  --shadow-sm:0 2px 8px -2px rgba(33,31,84,.08);
  --shadow-md:0 8px 24px -8px rgba(33,31,84,.15);
  --shadow-lg:0 30px 70px -38px rgba(33,31,84,.42);
  --section-y:clamp(5rem,10vw,8rem);
  /* per-category accent system. Two roles, deliberately separated for AA:
       --accent      = VIVID brand hue → used ONLY on non-text surfaces
                       (chip dot, soft tint, border, icon-chip fill).
       --accent-ink  = AA-safe TEXT color → chip label, etc. (≥4.5:1 on light)
     This mirrors the solutions-modern eyebrow precedent (safe text + vivid dot)
     and keeps every category distinct without ever painting text in a hue that
     fails contrast (green/gold as text on light both fail AA). */
  --accent:#211F54; --accent-ink:#211F54;
  --accent-soft:rgba(33,31,84,.10); --accent-line:rgba(33,31,84,.26);
  /* --accent-fill = solid chip background under WHITE icons (≥3:1 graphical).
     Defaults to the vivid hue; only overridden where the hue is too light
     for a white glyph (green). */
  --accent-fill:#211F54;
}

/* ---- per-category accent mapping (all on-brand, all distinct, all AA) ----
   universal → sky    data-insights → green    community → gold    network → navy
   Vivid hue lives on dot/tint/border/icon; TEXT uses an AA-safe ink. */
body[data-feat="universal-air-monitoring"]{ --accent:#29ABE2; --accent-ink:#196A8C; --accent-fill:#196A8C; --accent-soft:rgba(41,171,226,.12); --accent-line:rgba(41,171,226,.32); }
body[data-feat="data-insights-hub"]{ --accent:#22B573; --accent-ink:#196A8C; --accent-fill:#178A56; --accent-soft:rgba(34,181,115,.14); --accent-line:rgba(34,181,115,.34); }
body[data-feat="community-engagement"]{ --accent:#E4AF60; --accent-ink:#211F54; --accent-fill:#211F54; --accent-soft:rgba(228,175,96,.20); --accent-line:rgba(228,175,96,.50); }
body[data-feat="network-management"]{ --accent:#211F54; --accent-ink:#211F54; --accent-fill:#211F54; --accent-soft:rgba(33,31,84,.10); --accent-line:rgba(33,31,84,.26); }
body[data-feat="default"]{ --accent:#29ABE2; --accent-ink:#196A8C; --accent-fill:#196A8C; --accent-soft:rgba(41,171,226,.12); --accent-line:rgba(41,171,226,.32); }

/* ============================================================
   TYPE — Sora display / Manrope body, modular scale
   ============================================================ */
body{ font-family:'Manrope',system-ui,sans-serif!important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--grey-med); }
h1,h2,h3,h4,h5,h6,[class*="heading-style"]{ font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.025em!important; color:var(--navy); }
.heading-style-h2{ font-size:clamp(1.875rem,4vw,3rem)!important; font-weight:700!important; line-height:1.1!important; text-wrap:balance; }
.heading-style-h5{ font-size:clamp(1.125rem,1.6vw,1.375rem)!important; font-weight:600!important; line-height:1.25!important; }
.heading-style-h6{ font-family:'Manrope',sans-serif!important; letter-spacing:.0em!important; }
.text-size-medium{ font-size:clamp(1.02rem,1.25vw,1.15rem)!important; line-height:1.65!important; color:var(--grey-med)!important; }

/* ---- KEEP + restyle the real navbar; dark navy wordmark logo ---- */
.navbar_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-darktext.svg")!important; }

/* ============================================================
   1. HERO  (section_feature-header) — mesh gradient backdrop,
   modernized category chip, balanced two-column layout.
   ============================================================ */
.section_feature-header{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 560px at 82% 6%, var(--accent-soft), transparent 60%),
    radial-gradient(760px 540px at 4% 92%, rgba(34,181,115,.10), transparent 56%),
    linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 60%,#ECF3F7 100%) !important;
}
.section_feature-header > *{ position:relative; z-index:1; }
.section_feature-header .heading-style-h2{
  font-size:clamp(2.2rem,4.8vw,3.6rem)!important; font-weight:800!important;
  line-height:1.05!important; color:var(--navy)!important; max-width:16ch; text-wrap:balance;
}
.feature-layout_content{ align-items:center!important; gap:clamp(2rem,5vw,4.5rem)!important; }

/* category chip — was a flat colored tagline; make it a refined pill */
.text-style-tagline{
  display:inline-flex!important; align-items:center; gap:.5rem;
  background:var(--accent-soft)!important; color:var(--accent-ink)!important;
  border:1px solid var(--accent-line); border-radius:999px!important;
  padding:.42rem .95rem!important; font-family:'Manrope',sans-serif!important;
  font-weight:700!important; font-size:.78rem!important; letter-spacing:.04em!important;
  text-transform:uppercase; line-height:1!important;
}
/* dot carries the VIVID hue (non-text → AA-exempt); text stays AA-safe ink */
.text-style-tagline::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--accent); flex:0 0 auto; }

.jm-hero-lede{ max-width:52ch; color:var(--grey-med)!important; }

/* hero CTA already covered by the pill-button block below */

/* trusted-by logo strip (inherited Webflow content — restyle only) */
.logo_component{ margin-top:clamp(2rem,4vw,3rem)!important; padding-top:clamp(1.5rem,3vw,2.25rem)!important; border-top:1px solid var(--bd); }
.logo_content .heading-style-h6{
  font-size:.78rem!important; font-weight:700!important; letter-spacing:.06em!important;
  text-transform:uppercase; color:var(--grey-med)!important;
}
.logo_list{ align-items:center; gap:clamp(1.25rem,3vw,2.5rem)!important; }
.logo_list img{ max-height:42px; width:auto; opacity:.7; filter:grayscale(1); transition:opacity .25s,filter .25s; }
.logo_list img:hover{ opacity:1; filter:grayscale(0); }

/* ============================================================
   2. VALUE LIST  (section_solutions-value) — "Turning Data into
   Action": white card grid, on-brand icon chips, check bullets.
   ============================================================ */
.section_solutions-value{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ECF3F7 0%,#FFFFFF 50%,#F6FAFC 100%)!important;
}
.solutions-value_item{
  background:#fff; border:1px solid rgba(33,31,84,.08); border-radius:22px;
  padding:clamp(1.5rem,2.4vw,2rem)!important; box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.solutions-value_item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.solutions-value_item .heading-style-h5{ color:var(--navy)!important; }
/* normalize the off-palette icon chips → category accent */
.solutions-value_item-icon-wrapper{
  background-color:var(--accent-fill)!important; border-radius:14px!important;
  box-shadow:0 8px 20px -8px var(--accent-line); width:52px; height:52px;
  display:inline-flex; align-items:center; justify-content:center;
}
.solutions-value_item-icon-wrapper .icon-1x1-medium{ filter:brightness(0) invert(1); }
/* the small check-bullet chips inside each value */
.solutions-value_list-item-icon-wrapper{ background-color:var(--green)!important; border-radius:6px!important; color:#fff!important; }
.solutions-value_list-item{ align-items:flex-start!important; gap:.6rem; }

/* ============================================================
   3. FEATURE ROWS  (section_solutions-features) — alternating
   image/text; floating, rounded, lifted media (the loved style).
   ============================================================ */
.section_solutions-features{ position:relative; overflow:hidden; background:#fff!important; }
.solutions-features_item{ align-items:center!important; gap:clamp(2rem,5vw,4.5rem)!important; }
.solutions-features_text-wrapper .heading-style-h5{ color:var(--navy)!important; }
.solutions-feature_item-icon-wrapper{ background-color:var(--accent-fill)!important; border-radius:12px!important; }
.solutions-feature_item-icon-wrapper .icon-1x1-small,
.solutions-feature_item-icon-wrapper img{ filter:brightness(0) invert(1); }

.solutions-features_image-wrapper,
.solutions-features_image-wrapper-mobile{
  border-radius:20px!important; overflow:hidden;
  box-shadow:var(--shadow-lg)!important; background:var(--light-bg);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.solutions-features_image-wrapper:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg),0 0 0 1px var(--accent-line)!important; }
.solutions-features_image{ display:block; width:100%; height:auto; }

/* ============================================================
   4. DASHBOARD  (section_feature-dashboard) — "See It In Action".
   Tab 1 (Administrator) holds the live interactive demo; Tab 2
   (Community) keeps its restyled screenshot. Pill tabs.
   ============================================================ */
.section_feature-dashboard{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#F6FAFC 0%,#ECF3F7 45%,#F6FAFC 100%)!important;
}
.section_feature-dashboard .heading-style-h2{ color:var(--navy)!important; }
.feature-dashboard_tabs-menu{
  display:inline-flex!important; gap:.4rem!important; margin:0 auto 2.5rem!important; padding:.4rem!important;
  background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--bd); border-radius:999px; box-shadow:var(--shadow-sm); justify-content:center;
}
.feature-dashboard_tab-link{
  border-radius:999px!important; padding:.65rem 1.3rem!important; background:transparent!important;
  transition:background .22s,color .22s,box-shadow .22s!important;
}
.feature-dashboard_tab-link .heading-style-h6{ font-weight:600!important; font-size:.92rem!important; color:var(--grey-med)!important; transition:color .22s; margin:0!important; }
.feature-dashboard_tab-link:hover .heading-style-h6{ color:var(--navy)!important; }
.feature-dashboard_tab-link:hover{ background:var(--accent-soft)!important; }
.feature-dashboard_tab-link.w--current{ background:var(--navy)!important; box-shadow:var(--shadow-sm)!important; }
.feature-dashboard_tab-link.w--current .heading-style-h6{ color:#fff!important; }

/* restyled screenshot (Tab 2 / Community) — floating media */
.feature-dashboard_image-wrapper{
  border-radius:20px!important; overflow:hidden; box-shadow:var(--shadow-lg)!important; background:var(--light-bg);
}
.feature-dashboard_image{ display:block; width:100%; height:auto; }

/* the embedded interactive demo (Tab 1) */
.jm-demo-wrap{ width:100%; }
/* Cap + center the "See it in action" demo so it never spans an over-wide
   section. The iframe fills this wrap exactly (scaleDemo no longer forces a
   760px iframe inside a narrower wrap, which was clipping the right edge). */
.jm-demo-wrap:not(.jm-hero-vis){ max-width:900px; margin-left:auto; margin-right:auto; }
/* The Webflow dashboard slot was sized for a narrow phone screenshot. Our
   interactive demos lay out at full width, so inside that narrow slot they get
   clipped on the right. Widen the ENTIRE chain — component → tabs → content →
   pane → wrapper — to the demo width so the demo reflows and fits. (Capping
   only the lower elements left an ancestor pinned narrow → still clipped.) */
.section_feature-dashboard .feature-dashboard_component,
.section_feature-dashboard .feature-dashboard_tabs,
.section_feature-dashboard .feature-dashboard_tabs-content,
.section_feature-dashboard .feature-dashboard_tab-pane,
.section_feature-dashboard .feature-dashboard_tab-wrapper{
  width:100% !important; max-width:900px !important; margin-left:auto !important; margin-right:auto !important;
}
/* NOTE: do NOT force tab-pane display — Webflow's w-tabs toggles display:none on
   the inactive pane. Forcing display:block shows BOTH panes (Administrator demo
   + Community map) at once, so selecting Community View still showed the admin
   demo. Let Webflow control which pane is visible. */
iframe.jm-demo{
  display:block; width:100%; border:0; min-height:420px;
  border-radius:20px; overflow:hidden; background:transparent;
}

/* ============================================================
   5. TESTIMONIAL / RESOURCES  (section_features-testimonial)
   ============================================================ */
.section_features-testimonial{ position:relative; background:#fff!important; }
.section_features-testimonial .heading-style-h2{ color:var(--navy)!important; }
.testimonial-resource_card-link{
  border-radius:20px!important; overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s; display:block;
}
.testimonial-resource_card-link:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.testimonial-resource_background-image{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
.testimonial-resource_card-link:hover .testimonial-resource_background-image{ transform:scale(1.05); }
.image-overlay-layer{ background:linear-gradient(180deg,rgba(33,31,84,0) 30%,rgba(33,31,84,.72) 100%)!important; }
.features-testimonial_card{
  background:#fff!important; border:1px solid rgba(33,31,84,.08)!important; border-radius:20px!important;
  box-shadow:var(--shadow-md)!important; padding:clamp(1.5rem,2.6vw,2.25rem)!important;
}

/* ============================================================
   6. CTA  (section_features-cta) — was a flat colored card with an
   off-palette hue; rebuild as a navy→sky gradient band w/ image.
   ============================================================ */
.section_features-cta{ position:relative; overflow:hidden; background:var(--light-bg)!important; }
.features-cta_card{ border-radius:26px!important; overflow:hidden; box-shadow:var(--shadow-lg)!important; }
.features-cta_card-content{
  background-color:transparent!important;
  background-image:radial-gradient(720px 440px at 88% 12%,rgba(41,171,226,.42),transparent 60%),linear-gradient(135deg,#211F54 0%,#196A8C 100%)!important;
  padding:clamp(2rem,4vw,3.5rem)!important;
}
.features-cta_card-content .heading-style-h2{ color:#fff!important; }
.features-cta_card-content .text-size-medium{ color:rgba(255,255,255,.86)!important; }
.features-cta_card-content .button{ background-color:#fff!important; color:var(--navy)!important; }
.features-cta_card-content .button:hover{ background-color:var(--gold)!important; color:var(--navy)!important; }
.features-cta_image-wrapper{ overflow:hidden; }
.features-cta_image-wrapper img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   7. MORE FEATURES  (section_more-features) — reuse home treatment
   ============================================================ */
.section_more-features{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ECF3F7 0%,#F6FAFC 16%,#FFFFFF 50%,#F6FAFC 84%,#ECF3F7 100%)!important;
}
.section_more-features::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(circle at 20% 20%, rgba(41,171,226,.18), transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(34,181,115,.12), transparent 55%);
}
.section_more-features > *{ position:relative; z-index:1; }
.section_more-features .heading-style-h2.text-color-white,
.section_more-features .more-features_item .heading-style-h5{ color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; }
.section_more-features .more-features_item{
  background:linear-gradient(135deg,#ffffff 0%,#ECF3F7 100%)!important;
  border:1px solid rgba(15,23,42,.07)!important;
  box-shadow:0 2px 8px -2px rgba(33,31,84,.08),0 18px 40px -22px rgba(33,31,84,.22)!important;
  border-radius:24px!important; overflow:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s!important;
}
.section_more-features .paragraph-white{ color:var(--grey-med)!important; }
.section_more-features .more-features_item-icon-wrapper{ border-radius:16px!important; box-shadow:0 8px 22px -8px rgba(33,31,84,.20); }
.section_more-features .more-features_link:hover .more-features_item{ transform:translateY(-6px); }
.section_more-features .more-features_link:hover .more-features_item-icon-wrapper{ transform:scale(1.08) rotate(-3deg); }

/* ============================================================
   GLOBAL — pill buttons, focus, footer, motion
   ============================================================ */
.button,.button-block,.w-button,.button-2{
  font-family:'Manrope',sans-serif!important; font-weight:600!important; font-size:.95rem!important;
  border-radius:999px!important; padding:14px 26px!important; letter-spacing:-.005em!important;
  display:inline-flex!important; align-items:center; justify-content:center; width:auto!important;
  background-color:var(--navy)!important; color:#fff!important; border:none!important;
  transition:transform .25s,box-shadow .25s,background-color .25s!important;
}
.button:hover,.button-block:hover,.w-button:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md)!important; background-color:var(--sky-dk)!important; }

/* Footer — deep navy + warm gold→white links */
.footer-section,.footer-section.background-color-black{ background-color:var(--navy)!important; }
.footer_logo{ max-height:40px; width:auto; }
.footer-section .footer_link-list a,.footer-section a.footer_link{ color:var(--gold)!important; transition:color .2s; }
.footer-section .footer_link-list a:hover,.footer-section a.footer_link:hover{ color:#FFFFFF!important; }

/* kill any harsh legacy wave bands; keep light blends */
.wave_background.dark-blue{ background-color:transparent!important; }
.background-holder{ display:none!important; }

/* accessible focus ring on all interactive elements */
a:focus-visible,.button:focus-visible,.w-button:focus-visible,.feature-dashboard_tab-link:focus-visible{
  outline:3px solid rgba(41,171,226,.55)!important; outline-offset:3px; border-radius:999px;
}

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } html{ scroll-behavior:auto; } }

/* ---- responsive: demo + rows collapse cleanly on mobile ---- */
@media (max-width:767px){
  .section_feature-header .heading-style-h2{ max-width:none; }
  .feature-dashboard_tabs-menu{ width:100%; }
  /* On phones the demo iframes render at container width (scaleDemo no-scale
     branch) so the bare layout reflows to a legible column — let them be full
     width and tall, no forced min that would clip the reflowed content. */
  iframe.jm-demo{ width:100% !important; transform:none !important; margin-left:0 !important; }
}

/* white JustAir wordmark in the footer (navy bg) — keeps the colour mark */
.footer_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-whitetext.svg") !important; }

/* ============================================================
   Hero "headline floating image" — the category's interactive
   widget floats beside the headline (injectHeroWidget). The
   iframe carries .jm-demo so the shared scaleDemo() fits it.
   ============================================================ */
.jm-hero-vis{
  position:relative; display:block; width:100% !important; height:auto !important; min-height:420px;
  max-width:none !important; border-radius:18px; background:transparent; padding:0 !important;
  box-shadow:0 30px 64px -28px rgba(33,31,84,.45);
  animation:jm-hero-float 7s ease-in-out infinite; will-change:transform;
}
.jm-hero-vis iframe.jm-demo{ display:block; border:0; background:transparent; }
@keyframes jm-hero-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@media (prefers-reduced-motion: reduce){ .jm-hero-vis{ animation:none } }
@media (max-width:860px){
  /* On phones the demo reflows to a tall legible column — calm the float
     (a tall card bobbing reads worse than it helps) and don't impose a
     min-height that fights the real reflowed height. */
  .jm-hero-vis{ min-height:0; margin-top:12px; animation:none; }
}

/* ============================================================
   LEAN-5 STRUCTURE (2026-06-14f) — cut the padding so the page is
   Hero+widget → capabilities band → live demo → 1–2 testimonials → CTA.
   Distinct info kept; redundant restatement + cross-sell removed.
   ============================================================ */
/* the 4 zig-zag "Connect / Standardize / Analyze" rows restate the hero — drop them */
.section_solutions-features{ display:none !important; }
/* generic cross-sell card grid — the Solutions nav dropdown already covers this */
.section_more-features{ display:none !important; }
/* keep only the first 2 testimonials (was a long run) */
.features-testimonial_grid-list > *:nth-child(n+3){ display:none !important; }

/* fix: "Turning Data into Action" capability labels were white-on-white — make them navy */
.section_solutions-value .text-color-white,
.solutions-value_item-text-wrapper p{ color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; }

/* fix white-box: Webflow caps iframe{max-width:100%}, forcing demos to render at
   container width (→ narrow 1-col → over-tall reported height). Let 760 hold. */
.jm-demo-wrap iframe.jm-demo, .jm-hero-vis iframe.jm-demo{ max-width:none !important; }

/* Community Engagement hero = two free-floating phones (they have their own
   shadows + transparent bg) → drop the hero-widget panel/shadow behind them. */
body[data-feat="community-engagement"] .jm-hero-vis{
  box-shadow:none !important; background:transparent !important; border-radius:0 !important;
}
/* The Community Engagement "See It In Action" Admin view is a two-phone
   screenshot (PNG with its own device frames + transparent background). Drop the
   wrapper panel so the phones float on their own — no box around them. */
body[data-feat="community-engagement"] .feature-dashboard_image-wrapper{
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}

/* ============================================================
   LO-FI HERO CARDS — on ≤900px the feature hero swaps its live demo iframe
   for a lightweight lo-fi card (matches the home platform section). Self-
   contained here so feature pages don't depend on the home overlay.
   ============================================================ */
.jm-hero-vis.jm-hero-lofi{
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  animation:none !important; height:auto !important; min-height:0 !important; overflow:visible !important;
}
.jm-rs-card{ position:relative; background:#FFFFFF; border:1px solid rgba(33,31,84,.08); border-radius:20px;
  padding:clamp(1.5rem,2.4vw,2rem); box-shadow:0 2px 8px -2px rgba(33,31,84,.08),0 24px 50px -28px rgba(33,31,84,.22); overflow:hidden; }
.jm-rs-card::after{ content:''; position:absolute; top:-30%; right:-20%; width:55%; height:65%;
  background:radial-gradient(circle,rgba(41,171,226,.16) 0%,rgba(34,181,115,.07) 55%,transparent 72%); filter:blur(38px); pointer-events:none; }
.jm-rs-card>*{ position:relative; }
.jm-rs-card-lab{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#4B5157; margin-bottom:1.25rem; }
/* devices */
.jm-rs-mstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:1.1rem; }
.jm-rs-mstat{ background:#ECF3F7; border-radius:12px; padding:.7rem .4rem; text-align:center; }
.jm-rs-mstat-num{ display:block; font-family:'Sora',sans-serif; font-size:1.45rem; font-weight:800; color:#211F54; line-height:1; letter-spacing:-.02em; }
.jm-rs-mstat-lab{ display:block; margin-top:.35rem; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#4B5157; }
.jm-rs-mlist{ display:flex; flex-direction:column; }
.jm-rs-mrow{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.9rem; padding:.65rem .15rem; border-top:1px solid rgba(33,31,84,.08); }
.jm-rs-mrow:first-child{ border-top:0; }
.jm-rs-mtype{ font-size:.94rem; font-weight:600; color:#211F54; }
.jm-rs-maqi{ font-family:'Sora',sans-serif; font-weight:800; font-size:1rem; letter-spacing:-.01em; min-width:2.4ch; text-align:right; }
.jm-rs-maqi.good{ color:#1B9C63; } .jm-rs-maqi.mod{ color:#C8881C; } .jm-rs-maqi.bad{ color:#C0392B; }
.jm-rs-mstatus{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:#4B5157; }
.jm-rs-mdot{ width:7px; height:7px; border-radius:999px; background:#22B573; }
/* metrics QA chart */
.jm-rs-qa-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-bottom:1rem; }
.jm-rs-qa-li{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:600; color:#4B5157; }
.jm-rs-qa-sw{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.jm-rs-qa-chart{ background:#fff; border:1px solid rgba(33,31,84,.06); border-radius:12px; padding:.6rem .5rem; }
.jm-rs-qa-svg{ display:block; width:100%; height:auto; }
/* insights */
.jm-rs-spark-wrap{ position:relative; background:#ECF3F7; border-radius:14px; padding:1.25rem 1.25rem 1rem; margin-bottom:1.1rem; }
.jm-rs-spark{ display:block; width:100%; height:96px; }
.jm-rs-flag{ position:absolute; top:1rem; right:1rem; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; background:rgba(228,175,96,.16); border:1px solid rgba(228,175,96,.4); font-size:.72rem; font-weight:700; color:#211F54; }
.jm-rs-tags{ display:flex; flex-wrap:wrap; gap:.55rem; }
.jm-rs-tag{ padding:.45rem .8rem; border-radius:999px; background:#ECF3F7; font-size:.8rem; font-weight:600; color:#196A8C; }
/* community resident phone */
.jm-rs-phone-wrap{ width:100%; display:flex; justify-content:center; align-items:center; }
.jm-rs-phone{ width:256px; background:#211F54; border-radius:42px; padding:11px; box-shadow:0 38px 72px -34px rgba(33,31,84,.55),0 8px 22px -10px rgba(33,31,84,.35); }
.jm-rs-phone-screen{ position:relative; background:#fff; border-radius:32px; overflow:hidden; padding:13px 14px 16px; }
.jm-rs-ph-bar{ display:flex; justify-content:space-between; align-items:center; font-size:.68rem; font-weight:700; color:#211F54; margin-bottom:10px; }
.jm-rs-ph-batt{ width:22px; height:11px; border:1.6px solid #211F54; border-radius:3px; opacity:.85; }
.jm-rs-ph-nav{ display:flex; align-items:center; gap:.5rem; margin-bottom:12px; }
.jm-rs-ph-burger{ width:16px; height:11px; border-top:2px solid #211F54; border-bottom:2px solid #211F54; position:relative; }
.jm-rs-ph-burger::before{ content:''; position:absolute; top:3.5px; left:0; right:0; height:2px; background:#211F54; }
.jm-rs-ph-logo-img{ height:20px; width:auto; display:block; }
.jm-rs-ph-navic{ margin-left:auto; width:30px; height:14px; border-radius:6px; background:#ECF3F7; }
.jm-rs-ph-tile{ display:flex; gap:.7rem; background:#EFB84B; border-radius:16px; padding:.85rem .9rem; }
.jm-rs-ph-tile-l{ display:flex; flex-direction:column; flex:0 0 auto; }
.jm-rs-ph-tile-num{ font-family:'Sora',sans-serif; font-weight:800; font-size:2.4rem; line-height:.9; color:#211F54; }
.jm-rs-ph-tile-aqi{ font-size:.62rem; font-weight:700; color:#211F54; margin-top:.3rem; }
.jm-rs-ph-tile-cat{ font-family:'Sora',sans-serif; font-weight:800; font-size:.78rem; color:#211F54; margin-top:.1rem; }
.jm-rs-ph-tile-r{ display:flex; flex-direction:column; gap:.04rem; min-width:0; }
.jm-rs-ph-tile-r strong{ font-family:'Sora',sans-serif; font-weight:800; font-size:.92rem; color:#211F54; line-height:1.08; }
.jm-rs-ph-tile-r span{ font-size:.7rem; color:#211F54; font-weight:600; }
.jm-rs-ph-tile-c{ margin-top:.35rem; font-weight:700 !important; }
.jm-rs-ph-scale{ margin:12px 0 4px; }
.jm-rs-ph-bar2{ position:relative; height:11px; border-radius:6px; background:linear-gradient(90deg,#A8E05F,#FDD64B 25%,#FF9B57 45%,#FE6A69 62%,#A97ABC 82%,#9C5A66); }
.jm-rs-ph-mark{ position:absolute; left:17%; top:50%; width:11px; height:11px; border-radius:50%; background:#211F54; border:2px solid #fff; transform:translate(-50%,-50%); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.jm-rs-ph-ticks{ display:flex; justify-content:space-between; font-size:.55rem; color:#98A5B2; font-weight:600; margin-top:3px; }
.jm-rs-ph-add{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; margin-top:12px; background:#EFB84B; color:#211F54; border:0; border-radius:999px; padding:.75rem; font-family:'Manrope',sans-serif; font-weight:800; font-size:.88rem; cursor:default; box-shadow:0 8px 18px -8px rgba(239,184,75,.75); }
.jm-rs-ph-chartcard{ margin-top:12px; border:1px solid rgba(33,31,84,.08); border-radius:12px; padding:.6rem .7rem; }
.jm-rs-ph-chartlab{ display:block; font-size:.64rem; font-weight:700; color:#98A5B2; margin-bottom:.3rem; }
.jm-rs-ph-spark{ display:block; width:100%; height:42px; }

/* lo-fi "Network Anomalies" list card (network-management hero ≤900px) */
.jm-rs-anom-sum{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; font-size:.86rem; color:#4B5157; }
.jm-rs-anom-sum b{ font-family:'Sora',sans-serif; font-size:1.15rem; color:#211F54; }
.jm-rs-anom-active{ background:rgba(192,57,43,.1); color:#C0392B; font-weight:700; font-size:.74rem; padding:.25rem .6rem; border-radius:999px; }
.jm-rs-anom-list{ display:flex; flex-direction:column; }
.jm-rs-anom-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; padding:.6rem .1rem; border-top:1px solid rgba(33,31,84,.08); }
.jm-rs-anom-row:first-child{ border-top:0; }
.jm-rs-anom-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.jm-rs-anom-dot.red{ background:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.jm-rs-anom-dot.mod{ background:#D98C1F; box-shadow:0 0 0 3px rgba(217,140,31,.15); }
.jm-rs-anom-mon{ font-size:.9rem; font-weight:600; color:#211F54; line-height:1.15; }
.jm-rs-anom-mon small{ display:block; font-size:.7rem; font-weight:500; color:#98A5B2; margin-top:1px; }
.jm-rs-anom-pct{ font-family:'Sora',sans-serif; font-weight:800; font-size:.95rem; }
.jm-rs-anom-pct.red{ color:#C0392B; } .jm-rs-anom-pct.mod{ color:#C8881C; }
.jm-rs-anom-foot{ margin-top:.85rem; font-size:.72rem; color:#98A5B2; font-style:italic; }

/* Trusted-by logos moved to after the hero widget (see reorderHeroLogos): on
   desktop span the full hero width as a strip below; on mobile they naturally
   fall under the widget. Order: headline → widget → logos. */
.section_feature-header .feature-layout_content > .logo_component{
  grid-column:1 / -1; margin-top:clamp(2rem,4vw,3rem);
}