/* ============================================================
   JustAir 2026 modernization layer — page-scoped overlay.
   Loaded ONLY on /home-modern (staging). Targets shared Webflow
   classes, but because it loads on this page alone it never
   touches the production Home page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  --jm-bg:           220 25% 98%;
  --jm-fg:           244 46% 12%;
  --jm-card:         0 0% 100%;
  --jm-primary:      244 46% 23%;
  --jm-primary-glow: 244 46% 35%;
  --jm-secondary:    197 79% 58%;
  --jm-muted:        220 20% 94%;
  --jm-muted-fg:     244 15% 40%;
  --jm-accent:       100 50% 53%;
  --jm-cta:          35 73% 56%;
  --jm-border:       220 20% 90%;
  --jm-radius: 1rem;
  --jm-gradient-mesh:
    radial-gradient(circle at 20% 20%, hsl(197 79% 58% / 0.35), transparent 50%),
    radial-gradient(circle at 80% 30%, hsl(100 50% 53% / 0.25), transparent 55%),
    radial-gradient(circle at 60% 80%, hsl(35 73% 56% / 0.2), transparent 50%);
  --jm-gradient-soft: linear-gradient(180deg, hsl(220 25% 98%), hsl(220 30% 96%));
  --jm-gradient-sky-navy: linear-gradient(135deg, hsl(197 79% 58%), hsl(244 46% 23%));
  --jm-shadow-sm:    0 2px 8px -2px hsl(244 46% 23% / 0.08);
  --jm-shadow-md:    0 8px 24px -8px hsl(244 46% 23% / 0.15);
  --jm-shadow-lg:    0 20px 50px -20px hsl(244 46% 23% / 0.25);
  --jm-shadow-glow:  0 0 40px hsl(197 79% 58% / 0.4);
  --jm-section-y: clamp(5rem, 10vw, 8rem);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  font-family: 'Sora', system-ui, sans-serif !important;
  letter-spacing: -0.025em !important;
}
.heading-style-h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem) !important;
  font-weight: 700 !important; line-height: 1.05 !important;
  text-wrap: balance; max-width: 22ch;
}
.heading-style-h2 {
  font-size: clamp(1.875rem, 4vw, 3rem) !important;
  font-weight: 700 !important; line-height: 1.1 !important;
  text-wrap: balance; max-width: 26ch;
}
.heading-style-h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem) !important;
  font-weight: 600 !important; line-height: 1.2 !important;
}
.heading-style-h4 {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem) !important;
  font-weight: 600 !important; line-height: 1.3 !important;
}
.padding-section-large    { padding-top: var(--jm-section-y) !important; padding-bottom: var(--jm-section-y) !important; }
.padding-section-top-large{ padding-top: var(--jm-section-y) !important; }

/* ---- Trusted-by logos strip (right under the hero) ------------- */
.jm-trusted{ padding:46px 5% 28px; background:#fff; margin-bottom:0; }
.jm-trusted-lab{ text-align:center; font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#4B5157; margin-bottom:26px; }
.jm-trusted-row{ display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; max-width:1100px; margin:0 auto; }
.jm-trusted-row img{ height:50px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1); opacity:.62; transition:filter .25s,opacity .25s; }
.jm-trusted-row img:hover{ filter:grayscale(0); opacity:1; }
@media(max-width:700px){ .jm-trusted-row{ gap:26px } .jm-trusted-row img{ height:34px } }

/* tighten the oversized empty band before the audience section */
.section_audience .padding-section-large{ padding-top:2.5rem !important; }

.button {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important; font-size: 0.95rem !important;
  letter-spacing: -0.005em !important; border-radius: 999px !important;
  padding: 14px 24px !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: auto !important; max-width: max-content !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--jm-shadow-sm) !important;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--jm-shadow-md) !important; }
.button.is-secondary, .button-block, .button-2 {
  background-color: hsl(var(--jm-primary)) !important;
  color: hsl(var(--jm-bg)) !important; border: none !important;
}
.button.is-secondary:hover, .button-block:hover { background-color: hsl(var(--jm-primary-glow)) !important; }

.section_meet-justair, .section_features, .section_more-features, .section_audience {
  position: relative;
  /* start + end at the wave colour (#ECF3F7) so the wave SVGs blend seamlessly
     into the section above AND below — puzzle-piece connection, white through the body */
  background: linear-gradient(180deg,#ECF3F7 0%,#F6FAFC 16%,#FFFFFF 50%,#F6FAFC 84%,#ECF3F7 100%) !important;
  overflow: hidden;
}
.section_meet-justair::before, .section_features::before {
  content: ''; position: absolute; inset: 0;
  background: var(--jm-gradient-mesh); opacity: 0.6; pointer-events: none; z-index: 0;
}
.section_meet-justair > *, .section_features > *, .section_more-features > * { position: relative; z-index: 1; }

.card, .feature-card, .solution-card, .audience-card, [class*="card_"] {
  position: relative; border-radius: var(--jm-radius) !important;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) !important;
  background: hsl(var(--jm-card)) !important;
  border: 1px solid hsl(var(--jm-border)) !important;
  box-shadow: var(--jm-shadow-sm) !important; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card::after, .feature-card::after, .solution-card::after, .audience-card::after, [class*="card_"]::after {
  content: ''; position: absolute; top: -30%; right: -25%;
  width: 60%; height: 70%;
  background: radial-gradient(circle, hsl(197 79% 58% / 0.18) 0%, hsl(100 50% 53% / 0.08) 50%, transparent 70%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}
.card:hover, [class*="card_"]:hover { transform: translateY(-4px); box-shadow: var(--jm-shadow-md) !important; }
.card > *, [class*="card_"] > * { position: relative; z-index: 1; }

.is-eyebrow, .is-pill-chip {
  display: inline-flex !important; align-items: center !important; gap: 0.5rem !important;
  padding: 0.4rem 0.9rem !important; background: hsl(var(--jm-secondary) / 0.12) !important;
  border: 1px solid hsl(var(--jm-secondary) / 0.25) !important; color: hsl(var(--jm-primary)) !important;
  font-family: 'Manrope', sans-serif !important; font-size: 0.85rem !important; font-weight: 600 !important;
  border-radius: 999px !important; width: max-content !important; margin-bottom: 1.25rem !important;
}
.container-large, .container-medium { max-width: 1400px; }

@keyframes jm-fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.jm-fade-up { opacity: 0; transform: translateY(20px); }
.jm-fade-up.jm-in { animation: jm-fade-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* "Explore Our Solutions" light cards */
.section_more-features .heading-style-h2.text-color-white{color:#211F54 !important;-webkit-text-fill-color:#211F54 !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 .more-features_item .heading-style-h5{color:#211F54 !important;-webkit-text-fill-color:#211F54 !important}
.section_more-features .paragraph-white{color:#4B5157 !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)}

/* ---- Hide the old Webflow navbar + hero (the kriging hero replaces them) ---- */
.navbar_component,.section_hero-header{display:none!important}

/* ---- Modern CTA: on-brand navy -> sky gradient + clean white card ---- */
.section_cta{background:radial-gradient(900px 520px at 82% 18%,rgba(41,171,226,.40),transparent 60%),linear-gradient(135deg,#211F54 0%,#196A8C 100%)!important}
.section_cta .cta_wrapper{background:#fff!important;border-radius:22px!important;padding:64px 48px!important;box-shadow:0 40px 90px -36px rgba(33,31,84,.55)!important}

/* ---- Footer: on-brand deep navy + warm gold links ---- */
.footer-section.background-color-black,.footer-section{background-color:#211F54!important}
.footer_logo{max-height:40px;width:auto}
.footer-section .footer_link-list a,.footer-section a.footer_link{color:#E4AF60!important;transition:color .2s}
.footer-section .footer_link-list a:hover,.footer-section a.footer_link:hover{color:#FFFFFF!important}

/* ============================================================
   Injected pieces (added by justair-modern.js)
   ============================================================ */

/* Kriging hero — full-viewport, its own nav baked in */
.jm-hero{display:block;width:100%;height:100vh;border:0;margin:0;background:#ECF3F7}

/* ---- "Where rigorous science meets community impact" -----------
   Reference layout: section header + alternating text/visual rows. */
.jm-rs{ background:linear-gradient(180deg,#FFFFFF 0%,#ECF3F7 100%); padding:clamp(2rem,4vw,3.25rem) 5% var(--jm-section-y); }
.jm-rs-inner{ max-width:1180px; margin:0 auto; }
.jm-rs-head{ max-width:640px; margin-bottom:clamp(3rem,6vw,5rem); }
.jm-rs-eyebrow{ display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#196A8C; margin-bottom:1rem; }
.jm-rs-title{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(2rem,4vw,3rem); color:#211F54; margin:0; text-wrap:balance; }
.jm-rs-rows{ display:flex; flex-direction:column; gap:clamp(4rem,8vw,7rem); }
.jm-rs-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.jm-rs-row.jm-rs-flip .jm-rs-copy{ order:2; }
.jm-rs-row.jm-rs-flip .jm-rs-visual{ order:1; }
.jm-rs-lab{ display:inline-flex; align-items:center; padding:.4rem .9rem; border-radius:999px;
  background:rgba(41,171,226,.12); border:1px solid rgba(41,171,226,.28); color:#196A8C;
  font-size:.8rem; font-weight:600; letter-spacing:.01em; margin-bottom:1.15rem; }
.jm-rs-h{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.14;
  font-size:clamp(1.5rem,2.6vw,2rem); color:#211F54; margin:0 0 1rem; text-wrap:balance; }
.jm-rs-body{ font-family:'Manrope',sans-serif; font-size:clamp(1rem,1.2vw,1.0625rem); line-height:1.65;
  color:#4B5157; margin:0; max-width:46ch; }
.jm-rs-visual{ min-width:0; }

/* Light visual cards (devices, metrics, community) */
.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 → mini "Network · Monitors" view (method types, not brand names) */
.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 → abstract Device QA chart (Normal / Warning / Invalid dots) */
.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; }

/* community → lo-fi resident PHONE (modelled on the public JustAir app) */
.jm-rs-phone-wrap{ flex:1; 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; }

/* 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; }

@media(max-width:860px){
  .jm-rs-row{ grid-template-columns:1fr; gap:2rem; }
  .jm-rs-row.jm-rs-flip .jm-rs-copy{ order:1; }
  .jm-rs-row.jm-rs-flip .jm-rs-visual{ order:2; }
}

/* Live product demos embedded in the audience tabs — soft floating
   frame (the shadow you liked), generous height so nothing clips. */
.jm-demo{
  display:block;width:100%;height:560px;border:0;border-radius:16px;background:#fff;
  box-shadow:0 30px 80px -40px rgba(33,31,84,.4);
}
@media(max-width:767px){ .jm-demo{height:480px} }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* The lo-fi rows hold static visual CARDS (.jm-rs-card), sized to their own
   content. (Earlier these rows held live iframe demos in a fixed-height
   parallax window — those overrides forced .jm-rs-visual to a 460px white box,
   which is exactly the empty white space that appeared under the short cards.
   Removed.) The card sizes itself; the cell just holds it. */
.jm-rs-visual{ min-width:0; display:flex; align-items:stretch; }
.jm-rs-visual > .jm-rs-card{ width:100%; }

/* === Slack-style pinned step-through (text + full panel swap on scroll) === */
.section_features{ position:relative; }
.jm-st-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.jm-st-inner{ max-width:1240px; margin:0 auto; padding:0 5%; width:100%; display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.jm-st-eyebrow{ display:inline-flex; align-items:center; padding:.4rem .9rem; background:rgba(41,171,226,.12); border:1px solid rgba(41,171,226,.25); color:#196A8C; font-family:'Manrope',sans-serif; font-size:.82rem; font-weight:700; border-radius:999px; }
.jm-st-h{ font-family:'Sora',sans-serif!important; font-size:clamp(1.9rem,3.4vw,2.7rem)!important; color:#211F54!important; margin:16px 0 16px!important; line-height:1.06!important; letter-spacing:-.02em; }
.jm-st-body{ font-family:'Manrope',sans-serif; font-size:1.12rem; line-height:1.6; color:#4B5157; margin:0; max-width:44ch; }
.jm-st-dots{ display:flex; gap:8px; margin-top:30px; }
.jm-st-dot{ width:34px; height:4px; border-radius:999px; border:0; background:rgba(33,31,84,.16); cursor:pointer; transition:background .25s,width .25s; padding:0; }
.jm-st-dot.active{ background:#29ABE2; width:48px; }
.jm-st-stage{ position:relative; height:80vh; overflow:visible; }
.jm-st-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; transition:opacity .55s ease; animation:jm-st-float 7s ease-in-out infinite; will-change:transform; }
@keyframes jm-st-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@media(prefers-reduced-motion:reduce){ .jm-st-frame{ animation:none } }
.jm-st-copy.jm-st-in .jm-st-eyebrow,.jm-st-copy.jm-st-in .jm-st-h,.jm-st-copy.jm-st-in .jm-st-body{ animation:jmStIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes jmStIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@media(max-width:860px){ .jm-st{ height:auto!important; } .jm-st-sticky{ position:relative; height:auto; padding:56px 0; } .jm-st-inner{ grid-template-columns:1fr; gap:24px; } .jm-st-stage{ height:62vh; } }

/* === MOBILE step-through: stacked cards, each with its own live demo
   (replaces the un-drivable pinned version on phones) === */
.jm-st-mobile{ padding:64px 5% 8px; }
.jm-stm-head{ margin-bottom:40px; }
.jm-st-mobile .jm-st-eyebrow{ display:inline-flex; align-items:center; padding:.4rem .9rem;
  background:rgba(41,171,226,.12); border:1px solid rgba(41,171,226,.25); color:#196A8C;
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700; border-radius:999px; }
.jm-st-mobile .jm-st-title{ font-family:'Sora',sans-serif!important;
  font-size:clamp(1.7rem,7vw,2.2rem)!important; color:#211F54!important;
  margin:14px 0 0!important; line-height:1.1!important; letter-spacing:-.02em; }
.jm-stm-card{ margin-bottom:56px; }
.jm-stm-card:last-child{ margin-bottom:8px; }
.jm-stm-eyebrow{ display:inline-block; font-family:'Manrope',sans-serif; font-size:.72rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#196A8C; margin-bottom:.6rem; }
.jm-stm-h{ font-family:'Sora',sans-serif!important; font-size:clamp(1.4rem,5.6vw,1.8rem)!important;
  color:#211F54!important; margin:0 0 .7rem!important; line-height:1.12!important; letter-spacing:-.02em; }
.jm-stm-body{ font-family:'Manrope',sans-serif; font-size:1.02rem; line-height:1.6;
  color:#4B5157; margin:0 0 1.4rem; }
.jm-stm-vis{ border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px -34px rgba(33,31,84,.42); }
.jm-stm-frame{ display:block; width:100%; border:0; background:#fff; min-height:420px; }

/* === Slack-style pill list (clickable, active fills) === */
.jm-st-title{ font-family:'Sora',sans-serif!important; font-size:clamp(1.7rem,2.8vw,2.3rem)!important; color:#211F54!important; margin:14px 0 0!important; line-height:1.1!important; letter-spacing:-.02em; }
.jm-st-nav{ display:flex; flex-direction:column; gap:4px; margin-top:26px; }
.jm-st-item{ position:relative; overflow:hidden; text-align:left; border:0; background:transparent; border-radius:12px; padding:15px 18px; cursor:pointer; width:100%; transition:background .3s; }
.jm-st-item-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(41,171,226,.13); z-index:0; transition:width .12s linear; }
.jm-st-item-t{ position:relative; z-index:1; display:block; font-family:'Sora',sans-serif; font-size:1.12rem; font-weight:600; color:#98A5B2; transition:color .3s; }
.jm-st-item-b{ position:relative; z-index:1; display:none; font-family:'Manrope',sans-serif; font-size:.96rem; line-height:1.55; color:#4B5157; margin-top:8px; max-width:42ch; }
.jm-st-item.active{ background:rgba(41,171,226,.06); }
.jm-st-item.active .jm-st-item-t{ color:#211F54; }
.jm-st-item.active .jm-st-item-b{ display:block; animation:jmStIn .4s ease both; }

/* === smooth, subtle section blends: drop the harsh navy divider blocks
   (the wave SVGs stay — they're a light #ecf3f7, so transitions read as
   a gentle wavy blend instead of a hard navy band) === */
.background-holder{ display:none !important; }

/* === remove the harsh navy wave (keep the light-blue ones = subtle puzzle-piece blends) === */
.wave_background.dark-blue{ display:none !important; }
/* === remove the bottom logo groups (consolidating into the top Trusted-by strip) === */
.logo_wrapper{ display:none !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; }

/* (Mobile/tablet keeps the lo-fi VISUAL cards — they reflow cleanly and never
   clip. The text-forward experiment was reverted: a visual reads better here.) */