/* Why section: boxed blocks matching the sales callout, rising in one by one */
.why-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px 22px; margin-top:16px;
}
.why-box h2{ margin-top:0; }
.why-box > p:last-child{ margin-bottom:0; }
.why-col > .why-box:first-of-type{ margin-top:12px; }
.why-col .why-callout{ margin-top:16px; }

/* dark navy panel style (same as "Your IT, at a glance") */
.why-col .why-box, .why-col .why-callout{
  position:relative; overflow:hidden; background:var(--dark); border:0;
  border-radius:var(--radius-xl); padding:24px 26px; text-shadow:none;
}
.why-col .why-box::before, .why-col .why-callout::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(85,145,171,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(85,145,171,.08) 1px,transparent 1px);
  background-size:36px 36px;
}
.why-col .why-box::after, .why-col .why-callout::after{
  content:""; position:absolute; top:-90px; right:-70px; width:300px; height:220px; pointer-events:none;
  background:radial-gradient(ellipse,rgba(28,108,143,.45) 0%,rgba(28,108,143,0) 70%);
}
.why-col .why-box > *, .why-col .why-callout > *{ position:relative; z-index:1; }
.why-col .why-box h2{ color:#fff; }
.why-col .why-box p{ color:var(--primary-200); }
.why-col .check-list li{ color:var(--primary-100); }
.why-col .check-list b{ color:#fff; }
.why-col .check-list svg, .why-col .why-callout > svg{ stroke:var(--primary-200); }
.why-col .why-callout strong{ color:#fff; }
.why-col .why-callout span, .why-col .why-callout a{ color:var(--primary-200); }
.why-col .why-callout a:hover{ color:#fff; }

/* layout: left = text + list, right = glance panel + sales contact */
.why-grid{ align-items:stretch; }
.why-col{ display:flex; flex-direction:column; }
.why-col > .why-box:last-child{ flex:1; }
.why-right{ gap:16px; }
.why-right .why-panel{ flex:1; min-height:0; margin:0; }
.why-right .why-callout{ margin:0; }
.why-col:not(.why-right){ justify-content:flex-start; }
@media (min-width:1025px){ .why-right{ padding-top:51px; } }

/* glance panel: cells fill the stretched panel instead of leaving a gap */
.why-right .why-panel{ display:flex; flex-direction:column; }
.why-right .wp-grid{ flex:1; grid-auto-rows:1fr; }
.why-right .wp-cell{ display:flex; flex-direction:column; justify-content:center; }

/* ---------- Contact (Get In Touch): contact details on a solid card like the form,
   so the flashlight photo never shows through behind the text ---------- */
.quote-info{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); padding:34px;
  box-shadow:var(--shadow-lg);
}
.quote-info h2{ margin-top:0; }
@media (max-width:640px){ .quote-info{ padding:24px 20px; } }

/* ---------- Trial: formerly light sections now dark navy ---------- */
.services.dk, .why.dk, .partners.dk, .testimonials.dk, .quote.dk{ background:var(--dark); }
/* white cards keep their dark text */
.dk :is(.service-card, .tm-card, .quote-info, .quote-form) :is(h3, h4, strong, label){ color:var(--dark); }
.dk :is(.service-card, .tm-card, .quote-info, .quote-form) p{ color:var(--muted); }
.dk .quote-info h2{ color:var(--dark); }
.dk .quote-info .eyebrow{ color:var(--primary); }
.why.dk :is(.why-box, .why-callout, .why-panel){ border:1px solid rgba(142,181,198,.22); background-color:var(--panel); }

/* "I'm not a robot" and the submit button side by side */
.submit-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:stretch; margin-top:16px; }
.submit-row .robot-check{ padding:10px 12px; gap:10px; }
.submit-row .robot-text{ font-size:15px; line-height:1.25; }
.submit-row .btn{ white-space:normal; line-height:1.2; }
.submit-row .robot-check{ margin:0; min-width:0; }
.submit-row .robot-state{ display:none; }
.submit-row .btn{ height:100%; padding-inline:12px; }
@media (max-width:360px){ .submit-row{ grid-template-columns:1fr; } }

/* ---------- Systems cards: v3 "level" card design, v4 hover kept ---------- */
#products .systems-grid{ align-items:stretch; gap:20px; }
#products .sys-card{
  gap:16px; padding:32px; border-radius:22px;
  background:var(--panel); border:1px solid rgba(142,181,198,.2);
}
#products .tier-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#products .tier-level{ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-200); }
#products .meter{ display:flex; gap:4px; }
#products .meter i{ width:22px; height:6px; border-radius:3px; background:rgba(142,181,198,.2); }
#products .meter i.on{ background:var(--primary-300); }
#products .sys-card h3{ font-size:44px; font-weight:700; line-height:1; letter-spacing:-.03em; color:#fff; }
#products .sys-sub{ margin-top:-6px; font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--primary-100); }
#products .tier-for{ font-size:15px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--primary-200); }
#products .sys-desc{ font-size:16px; color:var(--primary-200); }
#products .sys-feats{ gap:10px; margin-top:0; padding-top:16px; border-top:1px solid rgba(142,181,198,.18); }
#products .sys-feats li{ font-size:15.5px; gap:10px; }
#products .sys-feats b{ color:#fff; }
#products .sys-actions{ margin-top:auto; padding-top:8px; }
/* featured (SMS): solid brand blue like v3 */
#products .sys-featured{ background:var(--primary); border-color:transparent; box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }
#products .sys-featured :is(.tier-level, .tier-for, .sys-desc, .sys-feats li){ color:var(--primary-50); }
#products .sys-featured .sys-sub{ color:#fff; }
#products .sys-featured .meter i{ background:rgba(255,255,255,.3); }
#products .sys-featured .meter i.on{ background:#fff; }
#products .sys-featured .sys-feats{ border-top-color:rgba(255,255,255,.25); }
#products .sys-featured .sys-feats svg{ stroke:#fff; }
#products .sys-featured .btn-sys{ background:#fff; color:var(--primary-dark); box-shadow:none; }
#products .sys-featured .btn-sys:hover{ background:var(--primary-50); }
#products .sys-featured .btn-sys-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
#products .sys-featured .btn-sys-ghost:hover{ background:rgba(255,255,255,.12); }
#products .sys-pop{ left:32px; transform:none; background:#fff; color:var(--primary-dark); font-weight:600; font-size:13px; letter-spacing:.04em; padding:5px 12px; box-shadow:none; }
/* v4 hover, tuned per card type */
#products .sys-card:hover{ transform:translateY(-4px); border-color:rgba(142,181,198,.5); box-shadow:0 0 34px rgba(28,108,143,.3); }
#products .sys-featured:hover{ border-color:transparent; box-shadow:0 0 44px rgba(28,108,143,.6), 0 30px 60px -28px rgba(0,0,0,.6); }
#products .sys-featured:hover h3{ color:#fff; }

/* ---------- LogSentry: real screenshot beside the intro, feature cards in a row below ---------- */
#logsentry.sys-standalone{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; row-gap:28px; }
#logsentry .sa-shot{
  margin:0; border-radius:14px; overflow:hidden; border:1px solid rgba(240,180,60,.35);
  background:#0b1729; box-shadow:0 30px 60px -30px rgba(0,0,0,.7), 0 0 40px rgba(240,180,60,.08);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
#logsentry .sa-shot:hover{ transform:translateY(-4px); box-shadow:0 36px 70px -30px rgba(0,0,0,.75), 0 0 50px rgba(240,180,60,.16); }
#logsentry .sa-shot-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:#101f36; border-bottom:1px solid rgba(142,181,198,.15); }
#logsentry .sa-shot-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(142,181,198,.35); }
#logsentry .sa-shot-bar span{ margin-left:8px; font-size:13px; color:var(--primary-200); }
#logsentry .sa-shot img{ display:block; width:100%; height:auto; }
#logsentry .sa-feats{ grid-column:1 / -1; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1024px){
  #logsentry.sys-standalone{ grid-template-columns:1fr; }
  #logsentry .sa-feats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){ #logsentry .sa-feats{ grid-template-columns:1fr; } }

/* ---------- Why section: same card style as the education system cards ---------- */
.why.dk :is(.why-box, .why-panel, .why-callout){
  background:var(--panel); border:1px solid rgba(142,181,198,.2); border-radius:22px;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.why.dk :is(.why-box, .why-callout)::before, .why.dk :is(.why-box, .why-callout)::after,
.why.dk .why-panel::before, .why.dk .why-panel .glow-why{ display:none; }
.why.dk :is(.why-box, .why-panel, .why-callout):hover{ transform:translateY(-4px); border-color:rgba(142,181,198,.5); box-shadow:0 0 34px rgba(28,108,143,.3); }
.why.dk .check-list{ border-top:0; }
/* sales contact = the "featured" card, solid brand blue like SMS */
.why.dk .why-callout{ background:var(--primary); border-color:transparent; box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }
.why.dk .why-callout:hover{ border-color:transparent; box-shadow:0 0 44px rgba(28,108,143,.6), 0 30px 60px -28px rgba(0,0,0,.6); }
.why.dk .why-callout > svg{ stroke:#fff; }
.why.dk .why-callout span, .why.dk .why-callout a{ color:var(--primary-50); }
.why.dk .wp-cell{ background:rgba(255,255,255,.03); border-color:rgba(142,181,198,.18); }

/* ---------- Academy: Cisco partnership photo back (from v3) ---------- */
.academy-grid.academy-v3{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:44px; align-items:center; }
.academy-v3 .academy-art{ background:#fff; border-radius:22px; padding:clamp(18px,2.4vw,32px); display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.6); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.academy-v3 .academy-art:hover{ transform:translateY(-4px); box-shadow:0 0 34px rgba(28,108,143,.35), 0 30px 60px -28px rgba(0,0,0,.6); }
.academy-v3 .academy-art img{ width:100%; height:auto; display:block; }
.academy-v3 .academy-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:1024px){ .academy-grid.academy-v3{ grid-template-columns:1fr; gap:28px; } }

/* ---------- Partner logos: same tile size, logo fills it ---------- */
.brand-track img{ height:66px; width:104px; padding:4px 6px; object-fit:contain; }

/* ---------- Systems header: heading left, intro right, tighter spacing ---------- */
#products{ padding-top:44px; }
#products .section-head.center{
  max-width:none; text-align:left; margin:0 0 26px;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:48px; align-items:end;
}
#products .section-head .eyebrow{ grid-column:1 / -1; margin-bottom:8px; }
#products .section-head h2{ margin:0; }
#products .section-head p{ margin:0; padding-bottom:4px; }
@media (max-width:860px){ #products .section-head.center{ grid-template-columns:1fr; row-gap:12px; } }

/* phones: keep the level order LMS → SMS → ERP (the old layout moved SMS to the top) */
#products .systems-grid > .sys-featured{ order:0; }