/* ==========================================================================
   EMAction marketing site — shared stylesheet.
   Scoping: class names .nav / .nav-inner / .footer / .footer-inner are
   styled differently on the homepage (full fixed nav) vs legal pages
   (minimal static bar), so those selectors are namespaced under body
   classes .page-home / .page-legal.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --navy:#01184C;
  --navy-deep:#011035;
  --navy-darkest:#000B24;
  --navy-light:#4A6A96;
  --accent:#1D6DB5;
  --accent-glow:#5BB5FF;
  --green:#34C77B;
  --amber:#F5A623;
  --sky:#4DA6FF;
  --surface:#F4F5F7;
  --white:#FFFFFF;
  --text:#000B24;
  --text-muted:#4A6A96;
  --radius:16px;
  --radius-sm:10px;
}

/* ---------- Reset + baseline ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Layout containers ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-wide{max-width:1400px;margin:0 auto;padding:0 24px}

/* =========================================================================
   FULL NAV (fixed, blur) — homepage, industries, product, compliance
   Unscoped so every page carrying the 'full' nav variant inherits these
   styles. Legal pages use .page-legal overrides below, which win on
   specificity (.page-legal .nav > .nav). Active-state styling uses the
   [aria-current="page"] attribute set by partials/nav.php.
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;
  background:rgba(0,11,36,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:all 0.3s ease;
}
.nav.scrolled{padding:10px 0;background:rgba(0,11,36,0.95)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1400px;margin:0 auto;padding:0 24px;
}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:42px}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  color:rgba(255,255,255,0.7);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:0.5px;transition:color 0.2s;
}
.nav-links a:hover{color:var(--white)}
.nav-links a[aria-current="page"]{
  color:var(--white);
  box-shadow:inset 0 -2px 0 0 var(--accent-glow);
  padding-bottom:2px;
}
.nav-cta{
  background:var(--accent);color:var(--white)!important;
  padding:10px 24px;border-radius:8px;font-weight:600;
  transition:background 0.2s,transform 0.2s;
}
.nav-cta:hover{background:var(--accent-glow);transform:translateY(-1px)}
.nav-mobile{display:none;background:none;border:none;cursor:pointer}
.nav-mobile svg{width:28px;height:28px;color:var(--white)}

/* Dropdowns on Industries / Product nav items */
.nav-item-with-menu{position:relative;display:flex;align-items:center}
.nav-item-trigger{display:inline-flex;align-items:center;gap:6px}
.nav-caret{opacity:0.7;transition:transform 0.2s ease,opacity 0.2s ease}
.nav-item-with-menu:hover .nav-caret,
.nav-item-with-menu:focus-within .nav-caret{transform:rotate(180deg);opacity:1}
.nav-submenu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:240px;padding:8px 0;
  background:rgba(12,18,28,0.98);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.15s ease,transform 0.18s ease,visibility 0s linear 0.18s;
  z-index:1000;
}
.nav-submenu::before{
  content:'';position:absolute;top:-14px;left:0;right:0;height:14px;
}
.nav-item-with-menu:hover .nav-submenu,
.nav-item-with-menu:focus-within .nav-submenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity 0.15s ease,transform 0.18s ease,visibility 0s linear 0s;
}
.nav-submenu a{
  display:block;padding:10px 20px;
  color:rgba(255,255,255,0.78);
  font-size:13.5px;font-weight:500;letter-spacing:0.3px;
  white-space:nowrap;text-decoration:none;
  transition:background 0.15s ease,color 0.15s ease;
}
.nav-submenu a:hover{
  background:rgba(255,255,255,0.06);
  color:var(--white);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background:var(--navy-darkest) url('https://cdn.prod.website-files.com/68902e712b8399631fda3288/6890e5210ab2f932cc2ee776_Excorp_Hero.webp') center center/cover no-repeat fixed;
  overflow:hidden;padding-top:80px;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,11,36,0.92) 0%,rgba(0,11,36,0.82) 40%,rgba(0,11,36,0.7) 100%);
}
.hero-grid-bg{display:none}
.hero-content{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;
}
.hero-text{padding:40px 0}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(29,109,181,0.12);border:1px solid rgba(29,109,181,0.25);
  padding:6px 16px;border-radius:100px;
  font-size:12px;font-weight:600;color:var(--accent-glow);
  letter-spacing:1px;text-transform:uppercase;
  margin-bottom:28px;animation:fadeUp 0.8s ease both;
}
.hero-badge::before{
  content:'';width:6px;height:6px;background:var(--accent-glow);
  border-radius:50%;animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.5)}
}
.hero h1{
  font-size:clamp(40px,5vw,64px);font-weight:700;line-height:1.08;
  color:var(--white);letter-spacing:-1.5px;margin-bottom:24px;
  animation:fadeUp 0.8s ease 0.1s both;
}
.hero h1 .accent{color:var(--accent-glow)}
.hero-sub{
  font-size:18px;line-height:1.7;color:rgba(255,255,255,0.6);
  max-width:520px;margin-bottom:40px;
  animation:fadeUp 0.8s ease 0.2s both;
}
.hero-actions{
  display:flex;gap:16px;flex-wrap:wrap;
  animation:fadeUp 0.8s ease 0.3s both;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;
  transition:all 0.25s ease;
}
.btn-primary{
  background:var(--accent);color:var(--white);
  box-shadow:0 4px 20px rgba(29,109,181,0.3);
}
.btn-primary:hover{
  background:var(--accent-glow);
  box-shadow:0 6px 30px rgba(29,109,181,0.4);
  transform:translateY(-2px);
}
.btn-outline{
  background:transparent;color:var(--white);
  border:1.5px solid rgba(255,255,255,0.2);
}
.btn-outline:hover{
  border-color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.05);
}

/* ---------- Hero screenshot + stats ---------- */
.hero-screenshot{position:relative;animation:fadeUp 1s ease 0.4s both}
.hero-screenshot img{
  width:100%;border-radius:var(--radius);
  box-shadow:0 40px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06);
}
/* Phone overlay on the hero screenshot — the broadcast instruction a staff
   member sees on their own phone, cycling through all six instruction cards
   in front of the control-room dashboard. Both audiences at a glance: the
   simple phone screen and the data screen behind it. */
.hero-phone{
  position:absolute;left:-34px;bottom:-26px;width:27%;
  padding:9px;background:#0d1220;border-radius:30px;
  box-shadow:0 30px 60px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.09);
  animation:fadeUp 1s ease 0.55s both;
}
.hero-phone-screens{position:relative;overflow:hidden;border-radius:22px}
.hero-phone-screens img{
  display:block;width:100%;border-radius:0;box-shadow:none;
  opacity:0;animation:heroPhoneCycle 24s ease infinite;
}
.hero-phone-screens img+img{position:absolute;inset:0}
.hero-phone-screens img:nth-child(2){animation-delay:4s}
.hero-phone-screens img:nth-child(3){animation-delay:8s}
.hero-phone-screens img:nth-child(4){animation-delay:12s}
.hero-phone-screens img:nth-child(5){animation-delay:16s}
.hero-phone-screens img:nth-child(6){animation-delay:20s}
@keyframes heroPhoneCycle{
  0%{opacity:0}3.5%{opacity:1}16.7%{opacity:1}20.7%{opacity:0}100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-phone-screens img{animation:none}
  .hero-phone-screens img:first-child{opacity:1}
}
.hero-stats{
  display:flex;gap:40px;margin-top:48px;padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.08);
  animation:fadeUp 0.8s ease 0.4s both;
}
.hero-stat-value{
  font-size:28px;font-weight:700;color:var(--white);
  font-family:'JetBrains Mono',monospace;
}
.hero-stat-label{font-size:13px;color:rgba(255,255,255,0.4);margin-top:4px}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* =========================================================================
   COMPLIANCE BAR
   ========================================================================= */
.compliance-bar{
  background:var(--navy-deep);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:24px 0;
}
.compliance-inner{
  display:flex;align-items:center;justify-content:center;
  gap:48px;flex-wrap:wrap;
}
.compliance-item{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,0.45);font-weight:500;
}
.compliance-item svg{width:18px;height:18px;opacity:0.6;color:var(--green)}

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section{padding:120px 0}
.section-dark{background:var(--navy-darkest);color:var(--white)}
.section-alt{background:var(--surface)}
.section-label{
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.section-dark .section-label{color:var(--accent-glow)}
.section-title{
  font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1.15;
  letter-spacing:-1px;margin-bottom:20px;
}
.section-sub{
  font-size:17px;line-height:1.7;color:var(--text-muted);max-width:600px;
}
.section-dark .section-sub{color:rgba(255,255,255,0.5)}
.section-header{margin-bottom:64px}
.section-header.center{text-align:center}
.section-header.center .section-sub{margin:0 auto}

/* =========================================================================
   FEATURE CARDS
   ========================================================================= */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Tiers carries four cards (base + three addons); the 3-up default would
   leave a lone orphan on the second row, so lay it out 2×2. Both rules are
   #id-specific, so they also override the generic .feature-grid breakpoints
   below — hence the explicit mobile override here. */
#tiers .feature-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){#tiers .feature-grid{grid-template-columns:1fr}}
.feature-card{
  background:var(--white);border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius);padding:36px 32px;
  transition:all 0.3s ease;
}
a.feature-card{display:block;color:inherit;text-decoration:none}
a.feature-card:hover h3{color:var(--accent)}

/* Lightbox — fullscreen image viewer (vanilla, no library). */
.is-zoomable{cursor:zoom-in}
.lightbox-overlay{
  position:fixed;inset:0;
  background:rgba(8,12,20,0.94);
  display:flex;align-items:center;justify-content:center;
  padding:48px;
  opacity:0;visibility:hidden;
  transition:opacity 0.22s ease,visibility 0s linear 0.22s;
  z-index:9999;
}
.lightbox-overlay.show{
  opacity:1;visibility:visible;
  transition:opacity 0.22s ease,visibility 0s linear 0s;
}
.lightbox-stage{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%;
  cursor:default;
}
.lightbox-stage img{
  max-width:100%;max-height:calc(100vh - 140px);
  object-fit:contain;border-radius:6px;
  box-shadow:0 24px 80px rgba(0,0,0,0.55);
  background:rgba(255,255,255,0.04);
}
.lightbox-stage figcaption{
  font-size:13px;color:rgba(255,255,255,0.72);text-align:center;
  max-width:720px;line-height:1.55;
  padding:0 12px;
}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.1);color:#fff;
  transition:background 0.18s ease,transform 0.18s ease;
}
.lightbox-close{top:24px;right:24px}
.lightbox-nav{top:50%;transform:translateY(-50%)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-close:hover,
.lightbox-nav:hover{background:rgba(255,255,255,0.2)}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.05)}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:640px){
  .lightbox-overlay{padding:24px}
  .lightbox-close{top:12px;right:12px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-stage img{max-height:calc(100vh - 120px)}
}

/* Back-to-top button — floats bottom-right on every page once scrolled. */
.back-to-top{
  position:fixed;right:24px;bottom:24px;
  width:48px;height:48px;border:none;border-radius:50%;
  background:var(--accent);color:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 0.25s ease,transform 0.25s ease,background 0.2s ease,visibility 0s linear 0.25s;
  z-index:900;
}
.back-to-top.show{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity 0.25s ease,transform 0.25s ease,background 0.2s ease,visibility 0s linear 0s;
}
.back-to-top:hover{background:var(--accent-glow);transform:translateY(-2px)}
.back-to-top:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media(max-width:560px){
  .back-to-top{right:16px;bottom:16px;width:44px;height:44px}
}

/* Floating section rail — long-page navigation, shown once the reader is past
   whatever the page uses as its handoff (the features page hands off from its
   table of contents, the compliance page from its hero; site.js reads the
   selector off data-handoff). Unscoped like .back-to-top: it is page chrome,
   not page-type styling, and .feature-rail collides with nothing.

   Sits in the left gutter beside the 1200px content column. Collapsed it is a
   column of ticks 44px wide, which clears the column from about 1290px of
   viewport; expanded it needs ~250px, which only clears it from ~1600px. So
   the open/closed state is driven by --rail-open (0 or 1): hover and
   focus-within open it at any width, and the wide breakpoint pins it open.
   Every dimension that differs between the two states is derived from that
   one variable rather than duplicated in a second block. */
.feature-rail{
  position:fixed;left:14px;top:50%;z-index:95;
  transform:translateY(-50%) translateX(-12px);
  opacity:0;visibility:hidden;
  transition:opacity 0.3s ease,transform 0.3s ease,visibility 0s linear 0.3s;
}
.feature-rail.show{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
  transition:opacity 0.3s ease,transform 0.3s ease,visibility 0s linear 0s;
}
.feature-rail-inner{
  --rail-open:0;
  position:relative;
  display:flex;flex-direction:column;
  width:calc(44px + 208px * var(--rail-open));
  padding:14px 13px;
  max-height:calc(100vh - 120px);
  overflow-x:hidden;overflow-y:auto;
  scrollbar-width:thin;
  transition:width 0.28s ease;
}
.feature-rail:hover .feature-rail-inner,
.feature-rail:focus-within .feature-rail-inner{--rail-open:1}
/* Card backdrop on its own layer so it can fade with the open state while
   the rail's own box keeps its transparent, no-shadow collapsed look. */
.feature-rail-inner::before{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:rgba(255,255,255,0.97);
  border:1px solid rgba(1,24,76,0.10);
  box-shadow:0 18px 44px rgba(1,24,76,0.16);
  opacity:var(--rail-open);pointer-events:none;
  transition:opacity 0.28s ease;
}
/* Group headings wrap — "Warden & Evacuation Response addon" is wider than
   the open rail on one line. Collapsed they fold to nothing, leaving just
   enough margin to keep the groups of ticks visually separate. */
.feature-rail-group{
  position:relative;z-index:1;
  font-size:10px;font-weight:700;letter-spacing:1.2px;line-height:1.4;
  text-transform:uppercase;color:rgba(1,24,76,0.45);
  overflow:hidden;
  max-height:calc(42px * var(--rail-open));
  margin:calc(4px + 10px * var(--rail-open)) 0 calc(2px + 4px * var(--rail-open));
  opacity:var(--rail-open);
  transition:max-height 0.28s ease,margin 0.28s ease,opacity 0.2s ease;
}
.feature-rail-group:first-child{margin-top:0}
.feature-rail a{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:11px;
  padding:5px 0;text-decoration:none;
}
.feature-rail .dash{
  flex:none;width:18px;height:2px;border-radius:2px;
  background:rgba(1,24,76,0.24);
  transition:background 0.2s ease,width 0.2s ease;
}
.feature-rail .txt{
  font-size:13px;line-height:1.3;color:var(--text-muted);
  white-space:nowrap;opacity:var(--rail-open);
  transition:opacity 0.2s ease,color 0.2s ease;
}
.feature-rail a:hover .dash{background:var(--accent)}
.feature-rail a:hover .txt{color:var(--accent)}
.feature-rail a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.feature-rail a.active .dash{width:24px;background:var(--accent)}
.feature-rail a.active .txt{color:var(--accent);font-weight:600}
/* Wide enough that the open rail clears the content column — pin it open. */
@media(min-width:1600px){
  .feature-rail-inner{--rail-open:1}
}
/* The content column stops centring below 1248px, so under roughly 1290px
   there is no gutter left for even the collapsed rail — it would sit on top
   of body text. Below that the in-page links are the only navigation. */
@media(max-width:1290px){
  .feature-rail{display:none}
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
  border-color:rgba(0,0,0,0.1);
}
.feature-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;font-size:24px;
  background:rgba(77,166,255,0.12);color:var(--accent);
}
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.feature-card p{font-size:14px;line-height:1.7;color:var(--text-muted)}

/* =========================================================================
   AI SECTION
   ========================================================================= */
.ai-section{
  position:relative;overflow:hidden;
  background:var(--navy-darkest) url('https://cdn.prod.website-files.com/68902e712b8399631fda3288/6890e5210ab2f932cc2ee776_Excorp_Hero.webp') center center/cover no-repeat fixed;
}
.ai-section::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,11,36,0.85) 0%,rgba(0,11,36,0.7) 50%,rgba(0,11,36,0.85) 100%);
}
.ai-section>.container{position:relative;z-index:1}
.ai-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  position:relative;z-index:1;
}
.ai-card{
  border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);
  padding:36px 32px;background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);transition:all 0.3s ease;
  position:relative;overflow:hidden;
}
.ai-card:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(29,109,181,0.2);
  transform:translateY(-2px);
}
.ai-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-glow),transparent);
  opacity:0;transition:opacity 0.3s;
}
.ai-card:hover::before{opacity:1}
.ai-priority{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;padding:3px 10px;border-radius:4px;
  margin-bottom:16px;
}
.ai-priority.high{background:rgba(29,109,181,0.15);color:var(--accent-glow)}
.ai-priority.medium{background:rgba(245,166,35,0.15);color:var(--amber)}
.ai-card h3{font-size:18px;font-weight:700;color:var(--white);margin-bottom:10px}
.ai-card p{font-size:14px;line-height:1.7;color:rgba(255,255,255,0.5)}
.ai-card .ai-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:24px;
  background:rgba(91,181,255,0.15);color:var(--accent-glow);
}
.ai-highlight{
  grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:center;padding:48px;
  background:linear-gradient(135deg,rgba(29,109,181,0.08) 0%,rgba(1,24,76,0.12) 100%);
  border-color:rgba(29,109,181,0.15);
}
.ai-highlight:hover{border-color:rgba(29,109,181,0.3)}
.ai-highlight-img{
  border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}
.ai-highlight-img img{width:100%;display:block}

/* =========================================================================
   SHOWCASE GRID
   ========================================================================= */
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.showcase-item{
  display:block;color:inherit;text-decoration:none;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(0,0,0,0.08);background:var(--white);
  transition:all 0.3s ease;
}
a.showcase-item:hover .showcase-caption h4{color:var(--accent)}
.showcase-item:hover{
  box-shadow:0 20px 60px rgba(0,0,0,0.1);
  transform:translateY(-4px);
}
.showcase-item img{width:100%;display:block}
.showcase-caption{padding:20px 24px}
.showcase-caption h4{font-size:16px;font-weight:700;margin-bottom:4px}
.showcase-caption p{font-size:13px;color:var(--text-muted);line-height:1.6}

/* =========================================================================
   INDUSTRIES
   ========================================================================= */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* The card count is not a multiple of the column count (nine cards, four
   columns), so the last row orphans a single card hard against the left edge
   with empty cells beside it. Centre it instead. The selector only fires when
   the final card starts its own row, so it stays correct if cards are added.
   width is one column: the 2-column span is 2col+gap, so col = 50% - gap/2. */
@media(min-width:1025px){
  .industry-grid > a:last-child:nth-child(4n+1){
    grid-column:2 / 4;justify-self:center;width:calc(50% - 10px);
  }
}
@media(min-width:641px) and (max-width:1024px){
  .industry-grid > a:last-child:nth-child(2n+1){
    grid-column:1 / 3;justify-self:center;width:calc(50% - 10px);
  }
}
.industry-card{
  text-align:center;padding:40px 24px;border-radius:var(--radius);
  border:1px solid rgba(0,0,0,0.06);background:var(--white);
  transition:all 0.3s ease;position:relative;overflow:hidden;
}
.industry-card:hover{
  border-color:var(--accent);
  box-shadow:0 12px 32px rgba(29,109,181,0.1);
  transform:translateY(-4px);
}
.industry-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--accent);transform:scaleX(0);transition:transform 0.3s ease;
}
.industry-card:hover::after{transform:scaleX(1)}
.industry-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:22px;
  background:rgba(77,166,255,0.12);color:var(--accent);
}
.industry-card h4{font-size:15px;font-weight:700;margin-bottom:6px}
.industry-card p{font-size:12px;color:var(--text-muted);line-height:1.6}

/* =========================================================================
   HOW-IT-WORKS STEPS
   ========================================================================= */
.steps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;
}
.steps-grid::before{
  content:'';position:absolute;top:32px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--navy-light),var(--green));
  opacity:0.2;
}
.step-card{text-align:center;position:relative}
.step-num{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;
  margin:0 auto 20px;position:relative;z-index:1;
}
.step-num.s1{background:var(--accent);color:var(--white)}
.step-num.s2{background:var(--navy);color:var(--white)}
.step-num.s3{background:var(--sky);color:var(--white)}
.step-num.s4{background:var(--green);color:var(--white)}
.step-card h4{font-size:16px;font-weight:700;margin-bottom:8px}
.step-card p{
  font-size:13px;color:var(--text-muted);line-height:1.6;
  max-width:220px;margin:0 auto;
}

/* =========================================================================
   STANDARDS SECTION
   ========================================================================= */
.standards-section{background:var(--navy-deep);padding:80px 0}
.standards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.standard-card{
  padding:32px;border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);background:rgba(255,255,255,0.03);
}
.standard-card h4{
  font-size:16px;font-weight:700;color:var(--white);margin-bottom:8px;
}
.standard-card .code{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--accent-glow);margin-bottom:12px;display:block;
}
.standard-card p{font-size:13px;line-height:1.7;color:rgba(255,255,255,0.45)}

/* =========================================================================
   CONTACT / DEMO FORM
   ========================================================================= */
.contact-grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;
}
.demo-form{display:flex;flex-direction:column;gap:16px}
/* Honeypot. Positioned off-screen rather than display:none — bots skip hidden
   fields but happily fill one that is technically rendered. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{
  font-size:12px;font-weight:600;letter-spacing:0.5px;
  color:rgba(255,255,255,0.5);text-transform:uppercase;
}
.form-group input,.form-group select,.form-group textarea{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);border-radius:8px;
  padding:12px 14px;font-family:inherit;font-size:14px;
  color:var(--white);transition:border-color 0.2s,background 0.2s;
  outline:none;width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--accent);background:rgba(255,255,255,0.08);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:rgba(255,255,255,0.25)}
.form-group select option{background:var(--navy-deep);color:var(--white)}
.form-group textarea{resize:vertical;min-height:80px}
.contact-info-side{
  display:flex;flex-direction:column;gap:36px;padding-top:8px;
}
.contact-info-block h3{
  font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--accent-glow);margin-bottom:20px;
}
.contact-item{
  display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;
  color:rgba(255,255,255,0.6);font-size:14px;line-height:1.7;
}
.contact-item svg{flex-shrink:0;margin-top:2px;color:rgba(255,255,255,0.35)}
.contact-item a{
  color:rgba(255,255,255,0.7);text-decoration:none;
  transition:color 0.2s;display:block;
}
.contact-item a:hover{color:var(--white)}
.contact-item div{display:flex;flex-direction:column}
.office-card{
  padding:20px;border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);
  margin-bottom:12px;
}
.office-card h4{
  font-size:15px;font-weight:700;color:var(--white);margin-bottom:8px;
}
.office-card p{
  font-size:13px;color:rgba(255,255,255,0.45);line-height:1.7;
}

/* =========================================================================
   HOMEPAGE FOOTER (full)
   ========================================================================= */
.footer{
  background:var(--navy-darkest);
  border-top:1px solid rgba(255,255,255,0.06);
  padding:48px 0;
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-links{display:flex;gap:24px}
.footer-links a{
  font-size:13px;color:rgba(255,255,255,0.35);
  text-decoration:none;transition:color 0.2s;
}
.footer-links a:hover{color:rgba(255,255,255,0.7)}

/* =========================================================================
   LEGAL PAGES — nav / content / footer (minimal)
   ========================================================================= */
.page-legal .nav{
  background:var(--navy-darkest);
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.page-legal .nav-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.page-legal .nav-logo{
  display:flex;align-items:center;gap:12px;text-decoration:none;
}
.page-legal .nav-logo img{height:42px}
.page-legal .nav-back{
  color:rgba(255,255,255,0.6);text-decoration:none;
  font-size:14px;font-weight:500;transition:color 0.2s;
}
.page-legal .nav-back:hover{color:var(--white)}

.page-legal .content{
  max-width:800px;margin:0 auto;padding:64px 24px 120px;
}
.page-legal .content h1{
  font-size:36px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;
}
.page-legal .content .updated{
  font-size:13px;color:var(--text-muted);margin-bottom:48px;
}
.page-legal .content h2{
  font-size:20px;font-weight:700;margin-top:40px;margin-bottom:12px;
  letter-spacing:-0.3px;
}
.page-legal .content p{
  font-size:15px;line-height:1.8;color:var(--text-muted);margin-bottom:16px;
}
.page-legal .content ul{padding-left:24px;margin-bottom:16px}
.page-legal .content li{
  font-size:15px;line-height:1.8;color:var(--text-muted);margin-bottom:4px;
}
.page-legal .content a{color:var(--accent)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1024px){
  .hero,.ai-section{background-attachment:scroll}
  .hero-content{grid-template-columns:1fr;gap:48px}
  .hero-screenshot{max-width:700px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .ai-grid{grid-template-columns:1fr}
  .ai-highlight{grid-template-columns:1fr}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .steps-grid::before{display:none}
  .standards-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:640px){
  .section{padding:80px 0}
  .feature-grid{grid-template-columns:1fr}
  .industry-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .hero-phone{left:-8px;bottom:-14px;width:30%;padding:6px;border-radius:22px}
  .hero-phone-screens{border-radius:16px}
  .nav-links{display:none}
  .nav-mobile{display:block}
  .hero-actions{flex-direction:column}
  .btn{justify-content:center}
  .form-row{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* =========================================================================
   Homepage additions — Apr 2026
   New styles for the Site Terminology explainer band (section 10) and the
   'What EMAction is not' scope band (section 12). Tokens reused from the
   existing palette; no other selectors modified.
   ========================================================================= */

/* Site Terminology band — visually lighter than surrounding sections. */
.terminology-section{
  background:var(--white);
  padding:72px 0;
  border-top:1px solid rgba(0,0,0,0.04);
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.terminology-section .section-header{margin-bottom:40px}
.terminology-table{
  max-width:760px;
  margin:0 auto;
  border-collapse:collapse;
  width:100%;
  font-size:14px;
}
.terminology-table th,
.terminology-table td{
  padding:12px 20px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  text-align:left;
  vertical-align:top;
}
.terminology-table thead th{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.terminology-table tbody th{
  font-weight:600;
  color:var(--text);
  width:22%;
}
.terminology-table tbody td{color:var(--text-muted)}
.terminology-table tbody tr:last-child th,
.terminology-table tbody tr:last-child td{border-bottom:none}

/* What EMAction is not — muted scope band above the footer. */
.scope-band{
  background:var(--surface);
  padding:44px 0;
  border-top:1px solid rgba(0,0,0,0.06);
}
.scope-band .scope-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:center;
  margin-bottom:24px;
}
.scope-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}
.scope-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.6;
}
.scope-item svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--amber);
  margin-top:2px;
  opacity:0.85;
}
@media(max-width:1024px){
  .scope-list{grid-template-columns:1fr;gap:14px}
  .terminology-table{font-size:13px}
  .terminology-table th,
  .terminology-table td{padding:10px 14px}
}

/* =========================================================================
   Industry pages — shared — Apr 2026
   Layout for every /industries/* landing page. All rules scoped under
   body.page-industry so they cannot affect the homepage or legal pages.
   Nothing industry-specific (palette, hero image, terminology values) lives
   here — per-page differences go in the page's own markup.
   ========================================================================= */

/* ---------- Hero ---------- */
body.page-industry .industry-hero{
  position:relative;
  min-height:62vh;
  padding:160px 0 96px;
  display:flex;align-items:flex-end;
  color:var(--white);
  background:linear-gradient(180deg,var(--navy-darkest) 0%,var(--navy-deep) 100%);
  overflow:hidden;
}
body.page-industry .industry-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
body.page-industry .industry-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(0,11,36,0.92) 0%,rgba(0,11,36,0.82) 40%,rgba(0,11,36,0.7) 100%);
}
body.page-industry .industry-hero-content{
  position:relative;z-index:2;max-width:820px;
}
body.page-industry .industry-breadcrumb{
  font-size:13px;color:rgba(255,255,255,0.5);
  margin-bottom:22px;letter-spacing:0.2px;
}
body.page-industry .industry-breadcrumb a{
  color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;
}
body.page-industry .industry-breadcrumb a:hover{color:var(--white)}
body.page-industry .industry-breadcrumb .sep{margin:0 8px;opacity:0.45}
body.page-industry .industry-breadcrumb .current{
  color:rgba(255,255,255,0.85);font-weight:500;
}
body.page-industry .industry-hero h1{
  font-size:clamp(36px,4.5vw,56px);font-weight:700;line-height:1.1;
  letter-spacing:-1.2px;margin-bottom:20px;color:var(--white);
}
body.page-industry .industry-hero-sub{
  font-size:18px;line-height:1.65;color:rgba(255,255,255,0.72);
  max-width:640px;margin-bottom:36px;
}

/* ---------- Pain points ---------- */
body.page-industry .industry-painpoints{
  background:var(--white);padding:96px 0;
}
body.page-industry .painpoints-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
body.page-industry .painpoint-card{
  background:var(--white);border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius);padding:28px;
  transition:all 0.25s ease;
}
body.page-industry .painpoint-card:hover{
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 14px 32px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
body.page-industry .painpoint-card h3{
  font-size:16px;font-weight:700;margin-bottom:10px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-industry .painpoint-card p{
  font-size:14px;line-height:1.65;color:var(--text-muted);
}

/* ---------- Compliance band (4-column override of standards-grid) ---------- */
body.page-industry .industry-compliance{
  background:var(--navy-deep);padding:96px 0;color:var(--white);
}
body.page-industry .industry-compliance .section-title{color:var(--white)}
body.page-industry .industry-compliance .section-sub{color:rgba(255,255,255,0.5)}
body.page-industry .industry-compliance-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;
}

/* ---------- Feature emphasis blocks ---------- */
body.page-industry .industry-features{
  background:var(--surface);padding:96px 0;
}
body.page-industry .industry-feature-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:36px 48px;
  max-width:1100px;margin:0 auto;
}
body.page-industry .industry-feature{
  padding-top:22px;border-top:1px solid rgba(0,0,0,0.1);
}
body.page-industry .industry-feature h3{
  font-size:18px;font-weight:700;margin-bottom:10px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-industry .industry-feature p{
  font-size:14px;line-height:1.7;color:var(--text-muted);margin-bottom:12px;
}
body.page-industry .industry-feature .learn-more{
  font-size:13px;font-weight:600;color:var(--accent);
  text-decoration:none;letter-spacing:0.2px;
  transition:color 0.2s;
}
body.page-industry .industry-feature .learn-more:hover{color:var(--accent-glow)}

/* ---------- Scenario ---------- */
body.page-industry .industry-scenario{
  background:var(--navy-darkest);color:var(--white);padding:96px 0;
}
body.page-industry .industry-scenario .container{max-width:780px}
body.page-industry .industry-scenario h2{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(28px,3.5vw,40px);font-weight:700;
  letter-spacing:-0.5px;margin-bottom:36px;color:var(--white);
}
body.page-industry .industry-scenario p{
  font-size:17px;line-height:1.85;color:rgba(255,255,255,0.72);
  margin-bottom:22px;
}
body.page-industry .industry-scenario p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
body.page-industry .industry-cta{
  background:var(--accent);color:var(--white);padding:72px 0;
  text-align:center;
}
body.page-industry .industry-cta h2{
  font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.35;
  letter-spacing:-0.3px;max-width:860px;margin:0 auto 18px;color:var(--white);
}
body.page-industry .industry-cta p{
  font-size:16px;color:rgba(255,255,255,0.88);
  max-width:640px;margin:0 auto 30px;line-height:1.6;
}
body.page-industry .industry-cta .btn-primary{
  background:var(--white);color:var(--accent);box-shadow:none;
}
body.page-industry .industry-cta .btn-primary:hover{
  background:rgba(255,255,255,0.92);color:var(--navy-deep);
  box-shadow:0 6px 24px rgba(0,0,0,0.2);transform:translateY(-2px);
}

/* ---------- Related ---------- */
body.page-industry .industry-related{
  background:var(--surface);padding:72px 0;
}
body.page-industry .industry-related .section-label{color:var(--text-muted)}
body.page-industry .related-grid{
  /* auto-fit: every industry page gained a fourth card when the Warden
     addon got its own entry. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;
}
body.page-industry .related-card{
  background:var(--white);border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius-sm);padding:22px 24px;
  text-decoration:none;color:var(--text);display:block;
  transition:all 0.25s ease;
}
body.page-industry .related-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(29,109,181,0.08);
  transform:translateY(-2px);
}
body.page-industry .related-card h4{
  font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-0.2px;
}
body.page-industry .related-card p{
  font-size:13px;line-height:1.6;color:var(--text-muted);
}
body.page-industry .related-card .arrow{
  color:var(--accent);margin-left:6px;
  transition:margin-left 0.2s;
  display:inline-block;
}
body.page-industry .related-card:hover .arrow{margin-left:10px}

/* ---------- Industry-page responsive ---------- */
@media(max-width:1024px){
  body.page-industry .industry-hero{min-height:50vh;padding:140px 0 64px}
  body.page-industry .industry-painpoints,
  body.page-industry .industry-compliance,
  body.page-industry .industry-features,
  body.page-industry .industry-scenario{padding:72px 0}
  body.page-industry .painpoints-grid{grid-template-columns:repeat(2,1fr)}
  body.page-industry .industry-compliance-grid{grid-template-columns:repeat(2,1fr)}
  body.page-industry .industry-feature-list{grid-template-columns:1fr}
  body.page-industry .related-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  body.page-industry .painpoints-grid{grid-template-columns:1fr}
  body.page-industry .industry-compliance-grid{grid-template-columns:1fr}
  body.page-industry .industry-hero{padding:120px 0 56px}
}

/* ---------- Variants used by individual industry pages ----------
   Sibling pages add a modifier class to existing shared elements when the
   content shape deviates (e.g. office's three-card compliance surface, or
   office's "this is the default" explainer instead of a swap table). */

/* Three-card compliance grid — used when an industry surfaces 3 rather
   than 4 compliance angles (office.php). */
body.page-industry .industry-compliance-grid.three-col{
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:1024px){
  body.page-industry .industry-compliance-grid.three-col{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  body.page-industry .industry-compliance-grid.three-col{
    grid-template-columns:1fr;
  }
}

/* Default-terminology explainer — used when the industry IS the platform
   default (office), so a swap table is redundant. Renders a single centred
   paragraph with a follow-up link inside the existing .terminology-section
   wrapper. */
body.page-industry .terminology-default{
  max-width:640px;margin:0 auto;text-align:center;
}
body.page-industry .terminology-default p{
  font-size:16px;line-height:1.75;color:var(--text-muted);margin-bottom:18px;
}
body.page-industry .terminology-default a{
  color:var(--accent);font-weight:600;text-decoration:none;
  font-size:14px;letter-spacing:0.2px;transition:color 0.2s;
}
body.page-industry .terminology-default a:hover{color:var(--accent-glow)}

/* Five-card compliance grid — used when an industry surfaces 5 compliance
   angles (education.php: AS 3745, State DET, ACECQA, TEQSA/ASQA, WHS).
   The default 4-col grid leaves a 4+1 orphan wrap; this variant lays all
   five on a single row at desktop and collapses progressively on narrower
   viewports. Slightly smaller gap so the row fits comfortably. */
body.page-industry .industry-compliance-grid.five-card{
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
@media(max-width:1024px){
  body.page-industry .industry-compliance-grid.five-card{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  body.page-industry .industry-compliance-grid.five-card{
    grid-template-columns:1fr;
  }
}

/* Adjacency-page mapping band — two columns that pair row-by-row. Used
   by /industries/rail, /industries/industrial, /industries/hotels to show
   "you are running X / EMAction's model fits because Y". Generic — never
   rail-specific in CSS. */
body.page-industry .adjacency-mapping{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  max-width:1000px;
  margin:0 auto;
}
body.page-industry .adjacency-mapping-col h3{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:12px;
}
body.page-industry .adjacency-mapping-item{
  padding:18px 0;
  border-top:1px solid rgba(0,0,0,0.08);
  font-size:15px;
  line-height:1.65;
  color:var(--text);
}
body.page-industry .adjacency-mapping-col .adjacency-mapping-item:last-child{
  border-bottom:1px solid rgba(0,0,0,0.08);
}
@media(max-width:1024px){
  body.page-industry .adjacency-mapping{
    grid-template-columns:1fr;
    gap:8px;
    max-width:640px;
  }
  body.page-industry .adjacency-mapping-col:not(:first-child) h3{
    margin-top:20px;
  }
}

/* Adjacency-page honest-framing band — navy-deep background, narrow
   centred column of prose. Used by adjacency pages to scope what the
   product is and is not for this industry. Subdued vs .industry-scenario
   (which is navy-darkest); this one uses navy-deep so it reads as a
   clarifying aside rather than a dramatic beat. */
body.page-industry .adjacency-framing{
  background:var(--navy-deep);
  color:var(--white);
  padding:96px 0;
}
body.page-industry .adjacency-framing .container{max-width:780px}
body.page-industry .adjacency-framing h2{
  font-size:clamp(26px,3vw,36px);
  font-weight:700;
  letter-spacing:-0.4px;
  color:var(--white);
  margin-bottom:32px;
}
body.page-industry .adjacency-framing p{
  font-size:16px;
  line-height:1.8;
  color:rgba(255,255,255,0.72);
  margin-bottom:22px;
}
body.page-industry .adjacency-framing p:last-child{margin-bottom:0}
@media(max-width:1024px){
  body.page-industry .adjacency-framing{padding:72px 0}
}

/* =========================================================================
   Product pages — shared — Apr 2026
   Layout for /product/* deep-dive pages. Scoped under body.page-product so
   rules cannot leak to homepage, legal or industry pages. Generic helper
   classes (.scope-band from homepage, .standard-card) are reused where
   appropriate; anything product-specific is prefixed .product-*.
   ========================================================================= */

/* ---------- Hero ---------- */
body.page-product .product-hero{
  position:relative;
  min-height:56vh;
  padding:160px 0 88px;
  display:flex;align-items:flex-end;
  color:var(--white);
  background:linear-gradient(180deg,var(--navy-darkest) 0%,var(--navy-deep) 100%);
  overflow:hidden;
}
body.page-product .product-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
/* Composed heroes: a subject sits right-of-centre on a navy field so the
   headline keeps clear space. In a narrow viewport the hero box is taller than
   it is wide, object-fit:cover crops to the centre, and that subject drops out
   of frame entirely — so bias the crop toward it below the breakpoint. Values
   are each panel's own centre. Scoped per page: the remaining heroes are
   full-bleed photos that centre-crop fine. .compliance-hero is in here too —
   it is a different class but the same construction, sharing the gradient,
   the overlay and the 820px content box with .product-hero. */
@media(max-width:900px){
  body.product-warden .product-hero-bg{object-position:73% center}
  body.product-lone-worker .product-hero-bg{object-position:77% center}
  body.product-features .product-hero-bg{object-position:77% center}
  body.page-compliance .compliance-hero-bg{object-position:73% center}
}
body.page-product .product-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(0,11,36,0.92) 0%,rgba(0,11,36,0.82) 40%,rgba(0,11,36,0.7) 100%);
}
body.page-product .product-hero-content{
  position:relative;z-index:2;max-width:820px;
}
body.page-product .product-breadcrumb{
  font-size:13px;color:rgba(255,255,255,0.5);
  margin-bottom:22px;letter-spacing:0.2px;
}
body.page-product .product-breadcrumb a{
  color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;
}
body.page-product .product-breadcrumb a:hover{color:var(--white)}
body.page-product .product-breadcrumb .sep{margin:0 8px;opacity:0.45}
body.page-product .product-breadcrumb .current{
  color:rgba(255,255,255,0.85);font-weight:500;
}
body.page-product .product-hero h1{
  font-size:clamp(36px,4.5vw,56px);font-weight:700;line-height:1.1;
  letter-spacing:-1.2px;margin-bottom:20px;color:var(--white);
}
body.page-product .product-hero-sub{
  font-size:18px;line-height:1.65;color:rgba(255,255,255,0.72);
  max-width:680px;margin-bottom:36px;
}
body.page-product .product-hero-actions{
  display:flex;gap:12px;flex-wrap:wrap;
}
body.page-product .product-hero-actions .btn-outline{
  color:var(--white);border-color:rgba(255,255,255,0.25);
}
body.page-product .product-hero-actions .btn-outline:hover{
  border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05);
}

/* ---------- Table of contents — static grid near top ---------- */
body.page-product .product-toc{
  background:var(--surface);
  padding:56px 0 40px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
body.page-product .product-toc-label{
  font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:20px;
}
body.page-product .product-toc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 32px;
}
body.page-product .product-toc-grid a{
  font-size:14px;color:var(--text);text-decoration:none;
  padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.05);
  display:block;transition:color 0.2s;
}
body.page-product .product-toc-grid a:hover{color:var(--accent)}
@media(max-width:1024px){
  body.page-product .product-toc-grid{grid-template-columns:repeat(2,1fr)}
  body.page-product .product-toc{padding:40px 0 28px}
}
@media(max-width:640px){
  body.page-product .product-toc-grid{grid-template-columns:1fr}
}

/* ---------- Base-feature clusters ---------- */
body.page-product .product-features{
  background:var(--white);padding:0;
}
body.page-product .product-feature-cluster{
  padding:72px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-product .product-feature-cluster:first-of-type{border-top:none;padding-top:96px}
/* scroll-margin clears the fixed nav — an anchor jump used to land the
   heading underneath it. Matches the rail's active-section threshold. */
body.page-product .product-feature-cluster h2{
  font-size:clamp(24px,2.6vw,32px);
  font-weight:700;letter-spacing:-0.5px;
  margin-bottom:16px;color:var(--text);
  scroll-margin-top:96px;
}
body.page-product .section-header .section-title{scroll-margin-top:96px}
body.page-product .product-feature-cluster .cluster-intro{
  font-size:16px;line-height:1.7;color:var(--text-muted);
  max-width:760px;margin-bottom:24px;
}
/* Tier caveat above an industry page's feature list. */
.industry-tier-note{
  max-width:820px;margin:0 auto 32px;padding:14px 18px;
  font-size:14px;line-height:1.7;color:var(--text-muted);
  border-left:3px solid var(--accent);
  background:rgba(29,109,181,0.06);border-radius:0 6px 6px 0;
}

/* Tier caveat under a feature cluster — "this bit belongs to an addon". */
body.page-product .product-feature-cluster .cluster-note{
  font-size:14px;line-height:1.7;color:var(--text-muted);
  max-width:760px;margin:-8px 0 24px;padding:12px 16px;
  border-left:3px solid var(--accent);
  background:rgba(29,109,181,0.06);border-radius:0 6px 6px 0;
}
body.page-product .product-feature-cluster ul.cluster-list{
  list-style:none;padding:0;margin:0 0 24px;max-width:820px;
}
body.page-product .product-feature-cluster ul.cluster-list li{
  position:relative;padding:4px 0 4px 22px;
  font-size:15px;line-height:1.7;
  color:var(--text);
}
body.page-product .product-feature-cluster ul.cluster-list li::before{
  content:'';position:absolute;left:0;top:17px;
  width:10px;height:1px;background:var(--accent);
}
body.page-product .product-feature-cluster ul.cluster-list ul{
  list-style:none;padding:0;margin-top:6px;
}
body.page-product .product-feature-cluster ul.cluster-list ul li{
  font-size:14px;color:var(--text-muted);padding-left:22px;
}
body.page-product .product-feature-cluster ul.cluster-list ul li::before{
  top:16px;width:6px;background:var(--text-muted);opacity:0.5;
}
body.page-product .product-feature-screenshot{
  margin-top:28px;max-width:920px;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(0,0,0,0.08);
  background:var(--white);
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}
body.page-product .product-feature-screenshot img{width:100%;display:block}
body.page-product .product-feature-screenshot .caption{
  font-size:13px;color:var(--text-muted);
  padding:12px 18px;border-top:1px solid rgba(0,0,0,0.06);
  background:var(--surface);
}

/* ---------- Broadcast card grid ---------- */
body.page-product .broadcast-card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:32px;
}
body.page-product .broadcast-card{
  margin:0;display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-product .broadcast-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,0.07);
}
body.page-product .broadcast-card img{
  width:100%;height:auto;display:block;
  background:var(--surface);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
body.page-product .broadcast-card figcaption{
  padding:18px 20px 22px;
}
body.page-product .broadcast-card figcaption h4{
  font-size:16px;font-weight:700;letter-spacing:-0.2px;
  color:var(--text);margin:0 0 8px;
}
body.page-product .broadcast-card figcaption p{
  font-size:14px;line-height:1.65;color:var(--text-muted);margin:0;
}
@media(max-width:900px){
  body.page-product .broadcast-card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  body.page-product .broadcast-card-grid{grid-template-columns:1fr}
}

/* ---------- AI section ---------- */
body.page-product .product-ai{
  background:var(--surface);
  padding:96px 0 72px;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-product .product-ai-preamble{
  font-size:15px;line-height:1.7;
  color:var(--text);
  max-width:760px;
  padding:20px 24px;
  background:rgba(245,166,35,0.08);
  border-left:3px solid var(--amber);
  border-radius:4px;
  margin:0 0 56px;
}
body.page-product .product-ai-preamble strong{color:var(--text)}
body.page-product .product-ai .product-feature-cluster{
  padding:48px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-product .product-ai .product-feature-cluster:first-of-type{padding-top:0;border-top:none}
body.page-product .ai-example-quote{
  font-style:italic;
  padding:16px 22px;
  background:var(--white);
  border-left:3px solid var(--accent);
  color:var(--text-muted);
  margin:12px 0 20px;
  border-radius:4px;
  font-size:14px;
  line-height:1.65;
  max-width:820px;
}

/* ---------- Platform foundations ---------- */
body.page-product .product-foundations{
  background:var(--white);
  padding:96px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-product .product-subsection{
  padding:32px 0;
  border-top:1px solid rgba(0,0,0,0.06);
  max-width:880px;
}
body.page-product .product-subsection:first-of-type{border-top:none;padding-top:16px}
body.page-product .product-subsection h3{
  font-size:19px;font-weight:700;margin-bottom:12px;
  letter-spacing:-0.2px;color:var(--text);
  scroll-margin-top:96px;
}
body.page-product .product-subsection p,
body.page-product .product-subsection li{
  font-size:15px;line-height:1.7;
  color:var(--text-muted);
}
body.page-product .product-subsection p{margin-bottom:12px}
body.page-product .product-subsection ul{
  list-style:none;padding:0;margin:0 0 12px;
}
body.page-product .product-subsection ul li{
  position:relative;padding:2px 0 2px 22px;
}
body.page-product .product-subsection ul li::before{
  content:'';position:absolute;left:0;top:15px;
  width:10px;height:1px;background:var(--accent);
}
body.page-product .product-roles-table{
  width:100%;border-collapse:collapse;
  margin-top:18px;font-size:14px;
}
body.page-product .product-roles-table th,
body.page-product .product-roles-table td{
  padding:12px 16px;border-bottom:1px solid rgba(0,0,0,0.06);
  text-align:left;vertical-align:top;
}
body.page-product .product-roles-table thead th{
  font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted);
  background:var(--surface);
  border-bottom:1px solid rgba(0,0,0,0.1);
}
body.page-product .product-roles-table tbody th{
  font-weight:600;color:var(--text);white-space:nowrap;width:32%;
}
body.page-product .product-roles-table tbody td{color:var(--text-muted)}

/* ---------- CTA ---------- */
body.page-product .product-cta{
  background:var(--accent);color:var(--white);padding:72px 0;
  text-align:center;
}
body.page-product .product-cta h2{
  font-size:clamp(26px,2.6vw,32px);font-weight:700;line-height:1.3;
  letter-spacing:-0.3px;max-width:820px;margin:0 auto 16px;color:var(--white);
}
body.page-product .product-cta p{
  font-size:16px;color:rgba(255,255,255,0.88);
  max-width:640px;margin:0 auto 28px;line-height:1.6;
}
body.page-product .product-cta .btn-primary{
  background:var(--white);color:var(--accent);box-shadow:none;
}
body.page-product .product-cta .btn-primary:hover{
  background:rgba(255,255,255,0.92);color:var(--navy-deep);
  box-shadow:0 6px 24px rgba(0,0,0,0.2);transform:translateY(-2px);
}

/* ---------- Related ---------- */
body.page-product .product-related{
  background:var(--surface);padding:72px 0;
}
body.page-product .product-related .section-label{color:var(--text-muted)}
body.page-product .product-related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
body.page-product .product-related-card{
  background:var(--white);border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius-sm);padding:22px 24px;
  text-decoration:none;color:var(--text);display:block;
  transition:all 0.25s ease;
}
body.page-product .product-related-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(29,109,181,0.08);
  transform:translateY(-2px);
}
body.page-product .product-related-card h4{
  font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-0.2px;
}
body.page-product .product-related-card p{
  font-size:13px;line-height:1.6;color:var(--text-muted);
}
body.page-product .product-related-card .arrow{
  color:var(--accent);margin-left:6px;
  transition:margin-left 0.2s;display:inline-block;
}
body.page-product .product-related-card:hover .arrow{margin-left:10px}

/* ---------- Product-page responsive ---------- */
@media(max-width:1024px){
  body.page-product .product-hero{min-height:48vh;padding:140px 0 64px}
  body.page-product .product-feature-cluster{padding:56px 0}
  body.page-product .product-feature-cluster:first-of-type{padding-top:72px}
  body.page-product .product-ai{padding:72px 0 56px}
  body.page-product .product-ai .product-feature-cluster{padding:36px 0}
  body.page-product .product-foundations{padding:72px 0}
  body.page-product .product-related-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  body.page-product .product-hero-actions{flex-direction:column;width:100%}
  body.page-product .product-hero-actions .btn{width:100%;justify-content:center}
}

/* ---------- Product page — addon modifiers ----------
   Lone Worker and Command pages carry an amber "Addon" pill near the hero
   H1 to distinguish them from the base-platform hero. Reused across both
   addon pages. */
body.page-product .product-addon-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(245,166,35,0.12);
  border:1px solid rgba(245,166,35,0.32);
  padding:6px 16px;border-radius:100px;
  font-size:12px;font-weight:700;color:var(--amber);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:20px;
}

/* ---------- Product scenario band — navy-darkest prose ----------
   Reusable narrative block. Mirrors .industry-scenario but scoped under
   body.page-product so it doesn't depend on industry CSS. Any future product
   page that needs a narrative beat can use this. */
body.page-product .product-scenario{
  background:var(--navy-darkest);color:var(--white);padding:96px 0;
}
body.page-product .product-scenario .container{max-width:780px}
body.page-product .product-scenario h2{
  font-size:clamp(28px,3.5vw,40px);font-weight:700;
  letter-spacing:-0.5px;margin-bottom:28px;color:var(--white);
}
body.page-product .product-scenario p{
  font-size:17px;line-height:1.8;color:rgba(255,255,255,0.72);
  margin-bottom:22px;
}
body.page-product .product-scenario p:last-child{margin-bottom:0}
@media(max-width:1024px){
  body.page-product .product-scenario{padding:72px 0}
}

/* ---------- Lone Worker — 5-step session flow ---------- */
body.page-product .lw-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  margin-top:16px;
}
body.page-product .lw-step-num{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;
  background:var(--accent);color:var(--white);
  margin-bottom:16px;
}
body.page-product .lw-step h4{
  font-size:15px;font-weight:700;margin-bottom:8px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-product .lw-step p{
  font-size:13px;line-height:1.65;color:var(--text-muted);
}
@media(max-width:1024px){
  body.page-product .lw-steps{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:640px){
  body.page-product .lw-steps{grid-template-columns:1fr;gap:16px}
}

/* ---------- Lone Worker — escalation table ----------
   Six rows of escalation levels. Each row's left border picks up a severity
   token colour; at <=640px the table restructures to stacked cards (one per
   level) via display:block overrides and data-label pseudo-elements. */
body.page-product .lw-escalation{
  width:100%;max-width:1100px;margin:36px auto 0;
  border-collapse:collapse;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  overflow:hidden;
}
body.page-product .lw-escalation th,
body.page-product .lw-escalation td{
  padding:14px 20px;
  font-size:14px;line-height:1.5;
  text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
body.page-product .lw-escalation thead th{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.03);
  font-weight:700;
}
body.page-product .lw-escalation tbody th{
  font-weight:700;color:var(--white);
  white-space:nowrap;width:160px;
  border-left:4px solid transparent;
}
body.page-product .lw-escalation tbody td{color:rgba(255,255,255,0.72)}
body.page-product .lw-escalation tbody tr:last-child th,
body.page-product .lw-escalation tbody tr:last-child td{border-bottom:none}

/* Severity accents — existing tokens only */
body.page-product .lw-escalation tr.level-normal th{border-left-color:var(--green)}
body.page-product .lw-escalation tr.level-warning th{border-left-color:var(--amber)}
body.page-product .lw-escalation tr.level-call th{border-left-color:var(--amber)}
body.page-product .lw-escalation tr.level-alert th{border-left-color:var(--accent)}
body.page-product .lw-escalation tr.level-emergency th{border-left-color:var(--accent-glow)}
body.page-product .lw-escalation tr.level-incident th{border-left-color:var(--white)}

@media(max-width:640px){
  body.page-product .lw-escalation,
  body.page-product .lw-escalation tbody,
  body.page-product .lw-escalation tr,
  body.page-product .lw-escalation th,
  body.page-product .lw-escalation td{
    display:block;width:auto;
  }
  body.page-product .lw-escalation thead{display:none}
  body.page-product .lw-escalation tr{
    padding:16px 18px;
    border-left:4px solid transparent;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  body.page-product .lw-escalation tbody th{
    padding:0 0 10px 0;width:auto;
    border-left:none;
    font-size:13px;letter-spacing:1px;text-transform:uppercase;
  }
  body.page-product .lw-escalation tbody td{
    padding:6px 0;border-bottom:none;
  }
  body.page-product .lw-escalation tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
    color:rgba(255,255,255,0.4);
    margin-bottom:2px;
  }
  /* Mobile: severity accent moves to the row's left border */
  body.page-product .lw-escalation tr.level-normal{border-left-color:var(--green)}
  body.page-product .lw-escalation tr.level-warning{border-left-color:var(--amber)}
  body.page-product .lw-escalation tr.level-call{border-left-color:var(--amber)}
  body.page-product .lw-escalation tr.level-alert{border-left-color:var(--accent)}
  body.page-product .lw-escalation tr.level-emergency{border-left-color:var(--accent-glow)}
  body.page-product .lw-escalation tr.level-incident{border-left-color:var(--white)}
  body.page-product .lw-escalation tr.level-incident{border-bottom:none}
}

/* ---------- Lone Worker — safety features grid ----------
   Seven boxed cards in a 2-column layout, matching the orphan-avoidance
   pattern used on construction.php (inline grid-column:1/-1 on card 7). */
body.page-product .lw-safety-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:16px;
}
body.page-product .lw-safety-card{
  padding:26px 28px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  background:var(--white);
  transition:all 0.25s ease;
}
body.page-product .lw-safety-card:hover{
  box-shadow:0 14px 32px rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.12);
  transform:translateY(-2px);
}
body.page-product .lw-safety-card h3{
  font-size:17px;font-weight:700;margin-bottom:10px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-product .lw-safety-card p{
  font-size:14px;line-height:1.65;color:var(--text-muted);
}
@media(max-width:1024px){
  body.page-product .lw-safety-grid{grid-template-columns:1fr}
}

/* ---------- Command — load-bearing hero honesty line ----------
   Not a footnote. A small-caps, italicised, amber-accented callout that
   sits directly beneath the hero subhead above the fold. The "AIIMS-5
   aligned — not certified" claim is procurement-critical and must be
   unmissable on page load. */
body.page-product .product-hero-honesty{
  display:block;
  font-size:13px;
  font-style:italic;
  font-variant:small-caps;
  letter-spacing:1px;
  line-height:1.5;
  color:rgba(255,255,255,0.85);
  margin:4px 0 36px;
  padding:12px 16px;
  border-left:3px solid var(--amber);
  background:rgba(245,166,35,0.08);
  max-width:640px;
  border-radius:2px;
}

/* ---------- Command — audience cards (5 sectors) ----------
   3-col grid on desktop, 2-col tablet, 1-col mobile. Drops one orphan
   slot on the last row at desktop; acceptable for 5 items and cleaner
   than forcing a full-width card. */
body.page-product .product-audience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:16px;
}
body.page-product .product-audience-card{
  padding:26px 28px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  background:var(--white);
  transition:all 0.25s ease;
}
body.page-product .product-audience-card:hover{
  box-shadow:0 14px 32px rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.12);
  transform:translateY(-2px);
}
body.page-product .product-audience-card h3{
  font-size:16px;font-weight:700;margin-bottom:10px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-product .product-audience-card p{
  font-size:14px;line-height:1.65;color:var(--text-muted);
  margin-bottom:10px;
}
body.page-product .product-audience-card p:last-child{margin-bottom:0}
@media(max-width:1024px){
  body.page-product .product-audience-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  body.page-product .product-audience-grid{grid-template-columns:1fr}
}

/* ---------- Command — "NOT in v1" grid ----------
   Same card structure as the v1-scope cards so both sections carry equal
   visual weight. Placed on navy-deep background with amber left border
   and muted-white text to mark each item as a scope boundary rather than
   a capability. */
body.page-product .product-not-in-v1-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:32px;
}
body.page-product .product-not-in-v1-card{
  padding:28px 32px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-left:4px solid var(--amber);
  border-radius:var(--radius);
}
body.page-product .product-not-in-v1-card h3{
  font-size:18px;font-weight:700;margin-bottom:12px;
  color:var(--white);letter-spacing:-0.2px;
}
body.page-product .product-not-in-v1-card p{
  font-size:14px;line-height:1.7;color:rgba(255,255,255,0.72);
}
@media(max-width:1024px){
  body.page-product .product-not-in-v1-grid{grid-template-columns:1fr}
}

/* ---------- Command — AIIMS-5 concept-to-feature mapping table ---------- */
body.page-product .product-aiims-mapping{
  max-width:880px;margin:32px 0 0;
  border-collapse:collapse;
  width:100%;
}
body.page-product .product-aiims-mapping th,
body.page-product .product-aiims-mapping td{
  padding:14px 20px;
  text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:14px;line-height:1.65;
}
body.page-product .product-aiims-mapping thead th{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface);
  border-bottom:1px solid rgba(0,0,0,0.1);
  font-weight:700;
}
body.page-product .product-aiims-mapping tbody th{
  font-weight:600;color:var(--text);width:38%;
}
body.page-product .product-aiims-mapping tbody td{color:var(--text-muted)}
body.page-product .product-aiims-mapping tbody tr:last-child th,
body.page-product .product-aiims-mapping tbody tr:last-child td{border-bottom:none}

/* ---------- Product-page light framing band ----------
   Surface-alt background, narrow prose column for "what we don't claim"
   statements. Mirrors .adjacency-framing's shape but on a light rather
   than navy-deep background — because the statement is declarative scope
   rather than an adjacency caveat. */
body.page-product .product-framing-light{
  background:var(--surface);padding:96px 0;
  border-top:1px solid rgba(0,0,0,0.06);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
body.page-product .product-framing-light .container{max-width:780px}
body.page-product .product-framing-light h2{
  font-size:clamp(24px,2.6vw,32px);font-weight:700;
  letter-spacing:-0.4px;color:var(--text);margin-bottom:28px;
}
body.page-product .product-framing-light p{
  font-size:16px;line-height:1.8;color:var(--text-muted);
  margin-bottom:22px;
}
body.page-product .product-framing-light p:last-child{margin-bottom:0}
body.page-product .product-framing-light p strong{color:var(--text)}
@media(max-width:1024px){
  body.page-product .product-framing-light{padding:72px 0}
}

/* =========================================================================
   Compliance page — Apr 2026
   Layout for /compliance. Scoped under body.page-compliance so the rules
   cannot leak onto homepage, legal, industry or product pages. Hero, each
   standards subsection, the "not certified" boundary grid, security grid,
   procurement deliverables list, CTA and related blocks all scoped here.
   ========================================================================= */

/* ---------- Hero ---------- */
body.page-compliance .compliance-hero{
  position:relative;
  min-height:50vh;
  padding:160px 0 80px;
  display:flex;align-items:flex-end;
  color:var(--white);
  background:linear-gradient(180deg,var(--navy-darkest) 0%,var(--navy-deep) 100%);
  overflow:hidden;
}
body.page-compliance .compliance-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
body.page-compliance .compliance-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(0,11,36,0.92) 0%,rgba(0,11,36,0.82) 40%,rgba(0,11,36,0.7) 100%);
}
body.page-compliance .compliance-hero-content{
  position:relative;z-index:2;max-width:820px;
}
body.page-compliance .compliance-breadcrumb{
  font-size:13px;color:rgba(255,255,255,0.5);
  margin-bottom:22px;letter-spacing:0.2px;
}
body.page-compliance .compliance-breadcrumb a{
  color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;
}
body.page-compliance .compliance-breadcrumb a:hover{color:var(--white)}
body.page-compliance .compliance-breadcrumb .sep{margin:0 8px;opacity:0.45}
body.page-compliance .compliance-breadcrumb .current{
  color:rgba(255,255,255,0.85);font-weight:500;
}
body.page-compliance .compliance-hero h1{
  font-size:clamp(36px,4.5vw,56px);font-weight:700;line-height:1.1;
  letter-spacing:-1.2px;margin-bottom:20px;color:var(--white);
}
body.page-compliance .compliance-hero-sub{
  font-size:18px;line-height:1.65;color:rgba(255,255,255,0.72);
  max-width:720px;margin-bottom:36px;
}

/* ---------- Standards subsection (repeating pattern) ----------
   Each named standard (AS 3745, AS 4083, WHS, AIIMS-5, sector-specific)
   uses this shape: code line + h2 + scope paragraph + h3 "How EMAction
   …" + feature bullet list + amber scope-limit callout box. */
body.page-compliance .compliance-standards{
  background:var(--white);padding:0;
}
body.page-compliance .compliance-standard{
  padding:72px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-compliance .compliance-standard:first-of-type{
  border-top:none;padding-top:96px;
}
body.page-compliance .compliance-standard .standard-code{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:1px;color:var(--accent);
  text-transform:uppercase;margin-bottom:12px;display:block;
}
/* Larger than the 96px used on product headings: the anchor is on the h2, but
   the .standard-code badge above it ("AS 3745:2010") is the thing a reader
   jumping here is looking for, so leave room for the badge as well as the nav.
   The three section-level anchors below carry 96px of their own padding and
   need no scroll-margin. */
body.page-compliance .compliance-standard h2{
  font-size:clamp(26px,2.8vw,34px);font-weight:700;
  letter-spacing:-0.5px;margin-bottom:18px;color:var(--text);
  scroll-margin-top:124px;
}
body.page-compliance .compliance-standard .standard-scope{
  font-size:16px;line-height:1.75;color:var(--text-muted);
  max-width:820px;margin-bottom:28px;
}
body.page-compliance .compliance-standard h3{
  font-size:16px;font-weight:700;margin:24px 0 12px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-compliance .compliance-standard ul.standard-features{
  list-style:none;padding:0;margin:0 0 20px;max-width:820px;
}
body.page-compliance .compliance-standard ul.standard-features li{
  position:relative;padding:6px 0 6px 22px;
  font-size:15px;line-height:1.65;color:var(--text);
}
body.page-compliance .compliance-standard ul.standard-features li::before{
  content:'';position:absolute;left:0;top:17px;
  width:10px;height:1px;background:var(--accent);
}
body.page-compliance .compliance-standard ul.standard-features li strong{
  color:var(--text);font-weight:600;
}
body.page-compliance .compliance-scope-limit{
  background:rgba(245,166,35,0.08);
  border-left:3px solid var(--amber);
  padding:18px 22px;
  margin-top:24px;
  max-width:820px;
  border-radius:2px;
}
body.page-compliance .compliance-scope-limit p{
  font-size:14px;line-height:1.75;color:var(--text);margin:0;
}
body.page-compliance .compliance-scope-limit p strong{color:var(--text)}

/* Sector-specific callouts — lighter treatment than the four primary
   standards; each is one line with a link to the relevant industry page. */
body.page-compliance .compliance-sector-list{
  display:grid;grid-template-columns:1fr;gap:14px;max-width:880px;margin-top:16px;
}
body.page-compliance .compliance-sector-item{
  padding:16px 20px;
  background:var(--surface);
  border-radius:var(--radius-sm);
  border:1px solid rgba(0,0,0,0.06);
}
body.page-compliance .compliance-sector-item strong{
  display:block;font-size:14px;color:var(--text);margin-bottom:4px;font-weight:700;
}
body.page-compliance .compliance-sector-item p{
  font-size:14px;line-height:1.6;color:var(--text-muted);margin:0;
}
body.page-compliance .compliance-sector-item a{
  color:var(--accent);font-weight:600;text-decoration:none;font-size:13px;
  margin-left:4px;
}
body.page-compliance .compliance-sector-item a:hover{color:var(--accent-glow)}

/* ---------- "Not certified" boundary grid ----------
   Visual parity with command.php's section D. Navy-deep band, amber left-
   border on each card, three boundary statements rendered as cards. */
body.page-compliance .compliance-boundary{
  background:var(--navy-deep);color:var(--white);padding:96px 0;
}
body.page-compliance .compliance-boundary .section-title{color:var(--white)}
body.page-compliance .compliance-boundary .section-sub{color:rgba(255,255,255,0.72)}
body.page-compliance .compliance-boundary-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;
}
body.page-compliance .compliance-boundary-card{
  padding:28px 32px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-left:4px solid var(--amber);
  border-radius:var(--radius);
}
body.page-compliance .compliance-boundary-card h3{
  font-size:17px;font-weight:700;margin-bottom:12px;
  color:var(--white);letter-spacing:-0.2px;
}
body.page-compliance .compliance-boundary-card p{
  font-size:14px;line-height:1.7;color:rgba(255,255,255,0.78);
}
@media(max-width:1024px){
  body.page-compliance .compliance-boundary-grid{grid-template-columns:1fr}
}

/* ---------- Security & data subsections ---------- */
body.page-compliance .compliance-security{
  background:var(--white);padding:96px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-compliance .compliance-security-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;
  max-width:1000px;margin:32px 0 0;
}
body.page-compliance .compliance-security-item{
  padding-top:20px;border-top:1px solid rgba(0,0,0,0.08);
}
body.page-compliance .compliance-security-item h3{
  font-size:16px;font-weight:700;margin-bottom:10px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-compliance .compliance-security-item p{
  font-size:14px;line-height:1.7;color:var(--text-muted);
}
@media(max-width:1024px){
  body.page-compliance .compliance-security-grid{grid-template-columns:1fr}
}

/* ---------- Procurement deliverables ---------- */
body.page-compliance .compliance-procurement{
  background:var(--surface);padding:96px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.page-compliance .compliance-procurement-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
}
body.page-compliance .compliance-procurement-item{
  padding:26px 28px;
  background:var(--white);border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
}
body.page-compliance .compliance-procurement-item h3{
  font-size:16px;font-weight:700;margin-bottom:10px;
  color:var(--text);letter-spacing:-0.2px;
}
body.page-compliance .compliance-procurement-item p{
  font-size:14px;line-height:1.65;color:var(--text-muted);
  margin-bottom:10px;
}
body.page-compliance .compliance-procurement-item p:last-child{margin-bottom:0}
body.page-compliance .compliance-procurement-item .availability{
  font-size:12px;color:var(--accent);font-weight:600;
  letter-spacing:0.3px;
}
@media(max-width:1024px){
  body.page-compliance .compliance-procurement-list{grid-template-columns:1fr}
}
body.page-compliance .compliance-procurement .procurement-cta{
  margin-top:36px;text-align:center;
}

/* ---------- CTA band ---------- */
body.page-compliance .compliance-cta{
  background:var(--accent);color:var(--white);padding:72px 0;
  text-align:center;
}
body.page-compliance .compliance-cta h2{
  font-size:clamp(26px,2.6vw,32px);font-weight:700;line-height:1.3;
  letter-spacing:-0.3px;max-width:820px;margin:0 auto 16px;color:var(--white);
}
body.page-compliance .compliance-cta p{
  font-size:16px;color:rgba(255,255,255,0.88);
  max-width:640px;margin:0 auto 28px;line-height:1.6;
}
body.page-compliance .compliance-cta .btn-primary{
  background:var(--white);color:var(--accent);box-shadow:none;
}
body.page-compliance .compliance-cta .btn-primary:hover{
  background:rgba(255,255,255,0.92);color:var(--navy-deep);
  box-shadow:0 6px 24px rgba(0,0,0,0.2);transform:translateY(-2px);
}

/* ---------- Related ---------- */
body.page-compliance .compliance-related{
  background:var(--surface);padding:72px 0;
}
body.page-compliance .compliance-related .section-label{color:var(--text-muted)}
body.page-compliance .compliance-related-grid{
  /* auto-fit: the card count varies by page and grew past three when the
     Warden addon got its own entry. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;
}
body.page-compliance .compliance-related-card{
  background:var(--white);border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius-sm);padding:22px 24px;
  text-decoration:none;color:var(--text);display:block;
  transition:all 0.25s ease;
}
body.page-compliance .compliance-related-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(29,109,181,0.08);
  transform:translateY(-2px);
}
body.page-compliance .compliance-related-card h4{
  font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-0.2px;
}
body.page-compliance .compliance-related-card p{
  font-size:13px;line-height:1.6;color:var(--text-muted);
}
body.page-compliance .compliance-related-card .arrow{
  color:var(--accent);margin-left:6px;
  transition:margin-left 0.2s;display:inline-block;
}
body.page-compliance .compliance-related-card:hover .arrow{margin-left:10px}
@media(max-width:1024px){
  body.page-compliance .compliance-related-grid{grid-template-columns:1fr}
}

/* ---------- Compliance-page responsive ---------- */
@media(max-width:1024px){
  body.page-compliance .compliance-hero{min-height:44vh;padding:140px 0 64px}
  body.page-compliance .compliance-standard{padding:56px 0}
  body.page-compliance .compliance-standard:first-of-type{padding-top:72px}
  body.page-compliance .compliance-boundary,
  body.page-compliance .compliance-security,
  body.page-compliance .compliance-procurement{padding:72px 0}
}

/* =========================================================================
   Demo-form checkbox group — Apr 2026
   The existing .form-group styles every descendant <label> as uppercase
   muted lead-in (e.g. "WORK EMAIL *"). Inside .checkbox-group we override
   to a regular-weight clickable label so each option reads as an
   individually tickable item rather than a field heading.
   ========================================================================= */
.checkbox-group{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.form-group .checkbox-group label{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:400;letter-spacing:0;
  color:rgba(255,255,255,0.85);text-transform:none;
  cursor:pointer;margin:0;
}
.checkbox-group input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--accent);
  cursor:pointer;
  flex-shrink:0;
}