/* Start custom CSS */html,body{margin:0;padding:0;} body{background:#fff;-webkit-font-smoothing:antialiased;}

/* WP admin bar: html margin is zeroed above, so offset the sticky nav
   instead of padding the body (which showed as a gap for visitors). */
body.admin-bar .msdl-nav{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .msdl-nav{ top:46px; } }
/* ==========================================================================
   MSDL Landing Page — Elementor Custom CSS
   Ported 1:1 from the Figma Make React build (App.tsx)
   ========================================================================== */


:root{
  --red:#C1272D;
  --red-dark:#a51f25;
  --text:#1a1a1a;
  --text-muted:#666666;
  --border:#e2e2e2;
  --bg-light:#f5f5f5;
  --navy-deep:#171a6e;
  --arc: #C1272D;
  --arc-wide: #C1272D;
  --arc-glow: rgba(23,195,232,0.22);
}

.msdl-page, .msdl-page *{ box-sizing:border-box; }
.msdl-page{
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:#fff;
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  max-width:100vw;
  overflow-x:hidden;
}
.msdl-page a{ text-decoration:none; }
.msdl-page ul{ list-style:none; margin:0; padding:0; }
.msdl-page img{ max-width:100%; }
.msdl-page section{ position:relative; }
.msdl-wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }

/* ── Keyframes ── */
@keyframes kenBurns{
  0%{ transform:scale(1.3) translate(0,0); }
  100%{ transform:scale(1.4) translate(-1.5%,-1%); }
}
@keyframes heroKenBurns{
  /* scale(1.32) creates ~12% of usable slack each side; the positive X keeps the
     chip parked on the right, clear of the headline. */
  0%{   transform:scale(1.32) translate(8.5%, 0.4%); }
  100%{ transform:scale(1.36) translate(10.2%, -0.6%); }
}
@media (prefers-reduced-motion:reduce){
  .msdl-hero-bg{ animation:none; transform:scale(1.32) translate(9%,0); }
}
@keyframes arcShimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes lightSweep{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(220%); }
}
@keyframes scrollCueBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}
@keyframes ambientGlow{
  0%,100%{ opacity:0.88; }
  50%    { opacity:1; }
}
@keyframes iconRingDraw{
  from{ stroke-dashoffset:160; }
  to{ stroke-dashoffset:0; }
}
@keyframes fadeSlideUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:none; }
}

/* ========================================================================
   01 — NAV
   ======================================================================== */
.msdl-nav{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:border-color 200ms, box-shadow 200ms;
}
.msdl-nav.is-scrolled{
  border-bottom-color:var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,0.06);
}
.msdl-nav-inner{
  max-width:1200px; margin:0 auto; padding:0 32px; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.msdl-nav-logo img{ height:32px; width:auto; display:block; }
.msdl-nav-links{ display:flex; align-items:center; gap:6px; }
.msdl-nav-link{
  padding:8px 14px; font-size:13px; font-weight:500;
  color:var(--text-muted); letter-spacing:0.2px; transition:color 150ms;
}
.msdl-nav-link:hover{ color:var(--red); }
.msdl-nav-divider{ width:1px; height:20px; background:var(--border); margin:0 10px; flex-shrink:0; }
.msdl-btn-cta{
  padding:8px 16px; background:var(--red) !important; color:#fff !important; border-radius:3px;
  font-size:13px; font-weight:700; letter-spacing:0.2px; white-space:nowrap;
  position:relative; overflow:hidden; display:inline-block;
  transition:background 150ms, box-shadow 200ms; border:none; cursor:pointer;
}
.msdl-btn-cta:hover{ background:var(--red-dark) !important; box-shadow:0 3px 14px rgba(193,39,45,0.30), 0 0 18px var(--arc-glow); }
.msdl-btn-cta .sweep, .msdl-btn-sweep .sweep{
  position:absolute; top:0; left:0; height:100%; width:50%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent);
  pointer-events:none; opacity:0;
}
.msdl-btn-cta:hover .sweep{ opacity:1; animation:lightSweep 0.44s ease-out forwards; }
.msdl-nav-burger{ background:none; border:none; cursor:pointer; padding:4px; display:none; }
.msdl-nav-mobile{ display:none; background:#fff; border-top:1px solid var(--border); padding:8px 0 16px; }
.msdl-nav-mobile.is-open{ display:block; }
.msdl-nav-mobile a{
  display:block; padding:10px 32px; font-size:14px; color:var(--text); font-weight:500;
}
.msdl-nav-mobile .msdl-btn-cta{ margin:10px 32px 0; }

@media (max-width:1023px){
  .msdl-nav-links{ display:none; }
  .msdl-nav-burger{ display:block; }
}

/* ========================================================================
   02 — HERO
   ======================================================================== */
.msdl-hero{ background:#1D2088; position:relative; overflow:hidden; }

/* Dither: sub-pixel noise so 8-bit gradient steps can't form visible bands.
   Most noticeable — and most needed — on phone displays. */
.msdl-hero::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:0.030; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.msdl-hero-bg-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.msdl-hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  /* Centred crop; the horizontal shift is done with transform instead, because
     object-position can only move within the slack that cover happens to leave. */
  object-fit:cover; object-position:50% 46%; transform-origin:50% 46%;
  image-rendering:auto;
  animation:heroKenBurns 26s cubic-bezier(0.33,0,0.30,1) alternate infinite;
  will-change:transform; backface-visibility:hidden;
}
.msdl-hero-bg-tint{
  position:absolute; inset:0;
  /* Light touch only: enough to seat the text, not enough to bury detail. */
  background:radial-gradient(ellipse 52% 66% at 76% 47%,
    rgba(4,7,24,0.00) 0%,
    rgba(4,7,24,0.04) 22%,
    rgba(4,7,24,0.09) 38%,
    rgba(4,7,24,0.16) 52%,
    rgba(4,7,24,0.26) 66%,
    rgba(4,7,24,0.38) 78%,
    rgba(4,7,24,0.50) 89%,
    rgba(4,7,24,0.62) 100%);
}
/* EverproX arc wash — cyan to yellow, barely there. */
.msdl-hero-chip-spot{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,
    rgba(0,185,239,0.000) 0%,  rgba(0,185,239,0.025) 14%,
    rgba(0,185,239,0.048) 26%, rgba(0,185,239,0.070) 38%,
    rgba(60,195,232,0.060) 50%, rgba(120,205,220,0.050) 62%,
    rgba(190,225,130,0.048) 75%, rgba(255,242,38,0.045) 88%,
    rgba(255,242,38,0.022) 95%, rgba(255,242,38,0.000) 100%);
  mix-blend-mode:screen;
}
.msdl-hero-scrim{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to right,
    rgba(2,4,16,0.84) 0%, rgba(2,4,16,0.75) 10%, rgba(2,4,16,0.66) 18%,
    rgba(2,4,16,0.58) 26%, rgba(2,4,16,0.44) 34%, rgba(2,4,16,0.30) 41%,
    rgba(2,4,16,0.20) 45%, rgba(2,4,16,0.14) 48%, rgba(2,4,16,0.08) 56%,
    rgba(2,4,16,0.03) 65%, rgba(2,4,16,0.00) 74%, rgba(2,4,16,0.04) 86%,
    rgba(2,4,16,0.10) 100%);
}
.msdl-hero-content{
  display:grid; grid-template-columns:1fr; min-height:380px;
  max-width:1200px; margin:0 auto; padding:0 32px;
  position:relative; z-index:3; align-items:center;
}
.msdl-hero-text{ max-width:600px;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(36px,5vw,60px) 0 clamp(64px,8vw,96px);
}
.msdl-hero-text h1{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(60px,9vw,108px); font-weight:900; color:#fff;
  margin:0 0 6px; line-height:0.92; letter-spacing:0.04em;
  text-shadow:0 2px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.6);
  opacity:0; transform:translateY(24px);
  animation:fadeSlideUp 560ms ease-out 80ms forwards;
}
.msdl-hero-kicker{
  margin-bottom:24px; opacity:0; transform:translateY(24px);
  animation:fadeSlideUp 560ms ease-out 180ms forwards;
}
.msdl-hero-kicker p{
  font-family:'Montserrat', sans-serif; font-size:clamp(11px,1.2vw,13px);
  font-weight:700; color:rgba(255,255,255,0.55); margin:0 0 8px;
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
  letter-spacing:2.5px; text-transform:uppercase;
}
.msdl-hero-kicker .rule{
  height:2px; border-radius:1px; width:40px;
  background:var(--arc-wide); background-size:200% 100%;
  animation:arcShimmer 4s ease-in-out infinite;
}
.msdl-hero-desc{
  font-size:clamp(15px,1.35vw,17px); font-weight:400; color:rgba(255,255,255,0.78);
  line-height:1.7; margin:14px 0 0; max-width:520px;
  text-shadow:0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.55);
  opacity:0; transform:translateY(24px);
  animation:fadeSlideUp 560ms ease-out 380ms forwards;
}
.msdl-hero-sub{
  font-size:clamp(21px,2.52vw,28px); font-weight:700;
  color:rgba(255,255,255,0.92); line-height:1.45; margin:0; max-width:500px;
  text-shadow:0 2px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.55);
  opacity:0; transform:translateY(24px);
  animation:fadeSlideUp 560ms ease-out 280ms forwards;
}
.msdl-scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:3; pointer-events:none; transition:opacity 400ms ease-out;
}
.msdl-scroll-cue svg{ animation:scrollCueBounce 1.8s ease-in-out infinite; }
.msdl-scroll-cue.is-hidden{ opacity:0; }

.msdl-benefits{ position:relative; z-index:3; }
.msdl-benefits::before{
  content:''; position:absolute; inset:-60px -32px -18px; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(3,5,20,0.00) 0%, rgba(3,5,20,0.06) 9%, rgba(3,5,20,0.13) 16%,
    rgba(3,5,20,0.22) 23%, rgba(3,5,20,0.32) 28%, rgba(3,5,20,0.42) 32%,
    rgba(3,5,20,0.51) 40%, rgba(3,5,20,0.58) 48%, rgba(3,5,20,0.64) 57%,
    rgba(3,5,20,0.70) 68%, rgba(3,5,20,0.75) 82%, rgba(3,5,20,0.80) 100%);
  pointer-events:none;
}
.msdl-trustbar{
  position:relative; z-index:3;
  background:linear-gradient(to bottom,
    rgba(3,5,20,0.80) 0%, rgba(3,5,20,0.83) 28%,
    rgba(3,5,20,0.86) 56%, rgba(3,5,20,0.88) 80%, rgba(3,5,20,0.90) 100%);
}
.msdl-benefits-grid{
  max-width:1200px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.msdl-benefit{ padding:20px 28px; display:flex; gap:14px; align-items:flex-start; }
.msdl-benefit-icon{
  flex-shrink:0; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}
/* Force a single optical size regardless of each icon's own viewBox. */
.msdl-benefit-icon svg{ width:100%; height:100%; aspect-ratio:1/1; display:block; }
.msdl-benefit-title{
  font-size:13px; font-weight:700; color:rgba(255,255,255,0.95);
  margin-bottom:5px; font-family:'Montserrat', sans-serif; letter-spacing:0.2px;
  text-shadow:0 1px 10px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.5);
}
.msdl-benefit-desc{ font-size:12px; color:rgba(255,255,255,0.68); line-height:1.65; text-shadow:0 1px 10px rgba(0,0,0,0.75), 0 0 22px rgba(0,0,0,0.45); }

.msdl-trustbar-inner{
  max-width:1200px; margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.msdl-trustbar-label{
  font-size:10px; font-weight:700; color:rgba(255,255,255,0.40);
  letter-spacing:1.5px; text-transform:uppercase; flex-shrink:0;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.msdl-trustbar-divider{ width:1px; height:18px; background:rgba(255,255,255,0.12); flex-shrink:0; }
.msdl-trustbar-inner img{ opacity:0.72; width:auto; }

@media (max-width:900px){
  .msdl-benefits-grid{ grid-template-columns:1fr; }
  .msdl-feature-grid{ grid-template-columns:1fr; }
  .msdl-chip-center{ order:-1; padding:8px 0 28px; }
  .msdl-feature-col{ grid-template-rows:auto auto; }
  .msdl-feature-row,
  .msdl-feature-col.right .msdl-feature-row{ justify-content:flex-start; padding:10px 0; }
  .msdl-feature-text,
  .msdl-feature-col.right .msdl-feature-text{ text-align:left; width:auto; }
  .msdl-feature-icon::after, .msdl-feature-icon::before{ display:none; }
  .msdl-chip-center img{ max-width:312px; }
  .msdl-benefit{ border-bottom:1px solid rgba(255,255,255,0.1); }
}

/* ========================================================================
   03 — PRODUCT OVERVIEW
   ======================================================================== */
.msdl-product{ background:#fafafa; position:relative; overflow:hidden; padding:32px 32px 34px; }
.msdl-product .msdl-wrap{ max-width:1360px; }
.msdl-product-head{ text-align:center; margin-bottom:18px; }
.msdl-section-label-arc{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.msdl-section-label-arc .bar{ width:20px; height:2px; background:var(--arc); flex-shrink:0; }
.msdl-section-label-arc span{ font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--red); }
.msdl-product-head h2{
  font-family:'Montserrat', sans-serif; font-size:clamp(22px,3vw,32px); font-weight:800;
  color:var(--text); margin:0 0 6px; letter-spacing:-0.5px; line-height:1.1;
  text-shadow:0 0 80px rgba(193,39,45,0.14);
}
.msdl-product-head p{ font-size:12.5px; color:var(--text-muted); line-height:1.4; margin:0 auto; max-width:440px; }

.msdl-stat-strip{
  display:flex; justify-content:center; gap:0; max-width:560px; margin:14px auto 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.msdl-stat{ flex:1; text-align:center; padding:8px 10px; border-right:1px solid var(--border); }
.msdl-stat:last-child{ border-right:none; }
.msdl-stat-num{
  font-family:'Montserrat', sans-serif; font-size:19px; font-weight:800; color:var(--red);
  line-height:1; letter-spacing:-0.5px;
}
.msdl-stat-num span{ font-size:12px; font-weight:700; color:var(--text-muted); margin-left:2px; letter-spacing:0; }
.msdl-stat-label{ font-size:10.5px; color:var(--text-muted); margin-top:6px; line-height:1.4; letter-spacing:0.1px; }
@media (max-width:640px){ .msdl-stat-strip{ flex-wrap:wrap; } .msdl-stat{ flex:1 1 50%; border-right:none; border-bottom:1px solid var(--border); } }

.msdl-feature-grid{ display:grid; grid-template-columns:minmax(0,1fr) 440px minmax(0,1fr); gap:24px; align-items:stretch; justify-content:center; margin-bottom:28px; padding-bottom:24px; }
.msdl-feature-col{ display:grid; grid-template-rows:repeat(2,1fr); align-content:center; gap:0; }
.msdl-feature-row{ display:flex; align-items:center; gap:14px; padding:10px 20px 10px 0; justify-content:flex-end; }
.msdl-feature-col.right .msdl-feature-row{ padding:10px 0 10px 20px; justify-content:flex-start; }
.msdl-feature-text{ text-align:right; width:284px; max-width:100%; }
.msdl-feature-col.right .msdl-feature-text{ text-align:left; }
.msdl-feature-title{ font-size:16.6px; font-weight:700; color:var(--red); margin-bottom:4px; font-family:'Montserrat', sans-serif; }
.msdl-feature-desc{ font-size:15.1px; color:var(--text-muted); line-height:1.4; }
.msdl-feature-icon{ position:relative; width:61px; height:61px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.feat-icon-img{ width:61px; height:61px; aspect-ratio:1/1; object-fit:contain; display:block; position:relative; z-index:1; }
.msdl-feature-icon::after{
  content:''; position:absolute; top:50%; height:1px; width:46px; transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(193,39,45,0) 0%, rgba(193,39,45,0.4) 65%, rgba(193,39,45,0.7) 100%);
  z-index:0;
}
.msdl-feature-icon::before{
  content:''; position:absolute; top:50%; width:5px; height:5px; border-radius:50%;
  background:#C1272D; transform:translateY(-50%); z-index:1; box-shadow:0 0 4px rgba(193,39,45,0.6);
}
.msdl-feature-col.left .msdl-feature-icon::after{ right:-46px; }
.msdl-feature-col.left .msdl-feature-icon::before{ right:-46px; }
.msdl-feature-col.right .msdl-feature-icon::after{
  left:-46px; background:linear-gradient(270deg, rgba(193,39,45,0) 0%, rgba(193,39,45,0.4) 65%, rgba(193,39,45,0.7) 100%);
}
.msdl-feature-col.right .msdl-feature-icon::before{ left:-46px; }
.msdl-feature-icon img{ width:61px; height:61px; aspect-ratio:1/1; object-fit:contain; display:block; position:relative; }

.msdl-chip-center{
  display:flex; align-items:center; justify-content:center;
  padding:16px 24px 24px; position:relative;
}
/* Studio backdrop: a soft cool pool of light instead of the muddy red halo. */
.msdl-chip-glow{
  /* Kept inside the chip column. The white pool is gone — the section is already
     near-white, so it only served to erase the blueprint pattern and wash the text. */
  position:absolute; left:50%; top:48%; width:86%; height:82%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 58% 56% at 50% 48%,
    rgba(29,32,136,0.055) 0%,
    rgba(29,32,136,0.028) 44%,
    rgba(29,32,136,0.010) 68%,
    transparent 84%);
  animation:ambientGlow 7s ease-in-out infinite; pointer-events:none; z-index:0;
}
/* Contact shadow on the ground plane — this is what sells "sitting on a surface". */
.msdl-chip-center::after{
  content:''; position:absolute; left:50%; bottom:14px;
  width:52%; height:22px; transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(12,14,48,0.20) 0%, rgba(12,14,48,0.08) 46%, transparent 74%);
  filter:blur(9px); pointer-events:none; z-index:0;
}
.msdl-chip-center img{
  width:100%; max-width:400px; object-fit:contain; display:block;
  position:relative; z-index:2;
  border-radius:18px;
  /* Dissolve the photo's hard edge so it sits in the section instead of on it. */
  -webkit-mask-image:radial-gradient(ellipse 74% 76% at 50% 50%,
    #000 0%, #000 44%, rgba(0,0,0,0.94) 60%, rgba(0,0,0,0.70) 74%, rgba(0,0,0,0.30) 88%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 74% 76% at 50% 50%,
    #000 0%, #000 44%, rgba(0,0,0,0.94) 60%, rgba(0,0,0,0.70) 74%, rgba(0,0,0,0.30) 88%, rgba(0,0,0,0) 100%);
  filter:
    drop-shadow(0 22px 48px rgba(10,12,40,0.20))
    drop-shadow(0 6px 16px rgba(10,12,40,0.12));
}
@media (prefers-reduced-motion:reduce){
  .msdl-chip-glow{ animation:none; }
}

.msdl-arch-row{ display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:stretch; max-width:900px; margin:0 auto; }
.msdl-arch-card{
  background:rgba(255,255,255,0.85); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,0.95); border-radius:10px; padding:14px 16px 8px;
  box-shadow:0 16px 44px rgba(29,32,136,0.09), 0 3px 10px rgba(29,32,136,0.05), inset 0 1px 0 rgba(255,255,255,0.98);
  position:relative; transition:box-shadow 350ms cubic-bezier(0.16,1,0.3,1);
}
.msdl-arch-card:hover{ box-shadow:0 20px 52px rgba(29,32,136,0.12), 0 4px 14px rgba(29,32,136,0.06), inset 0 1px 0 rgba(255,255,255,0.98); }
.msdl-arch-card::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:2px; background:var(--arc); border-radius:0 0 2px 2px;
}
.msdl-arch-card-head{ display:flex; align-items:center; justify-content:space-between; margin:8px 2px 6px; }
.msdl-arch-card-head h4{ font-size:11px; font-weight:700; color:var(--text); letter-spacing:1.4px; text-transform:uppercase; margin:0; }

.msdl-arch-card svg#msdlArchDiagram{ width:100%; height:auto; display:block; }

.msdl-spec-card{
  background:rgba(255,255,255,0.85); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,0.95); border-top-color:rgba(255,255,255,0.98);
  box-shadow:0 16px 44px rgba(29,32,136,0.09), 0 3px 10px rgba(29,32,136,0.05), inset 0 1px 0 rgba(255,255,255,0.98);
  border-radius:10px; padding:14px 22px 16px; max-width:560px; margin:0 auto; position:relative;
  transition:box-shadow 350ms cubic-bezier(0.16,1,0.3,1);
}
.msdl-spec-card:hover{ box-shadow:0 20px 52px rgba(29,32,136,0.12), 0 4px 14px rgba(29,32,136,0.06), inset 0 1px 0 rgba(255,255,255,0.98); }
.msdl-spec-card::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:2px; background:var(--arc); border-radius:0 0 2px 2px;
}
.msdl-spec-card h4{ font-size:11px; font-weight:700; color:var(--text); margin:10px 0 14px; letter-spacing:1.4px; text-transform:uppercase; }
.msdl-spec-card ul{ display:flex; flex-direction:column; }
.msdl-spec-card li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); }
.msdl-spec-card li:last-child{ border-bottom:none; }
.msdl-spec-card .label{ font-size:13px; font-weight:600; color:var(--text); flex-shrink:0; }
.msdl-spec-card .value{ font-size:12.5px; color:var(--text-muted); text-align:right; }

@media (max-width:900px){
  .msdl-feature-grid{ grid-template-columns:1fr; }
  .msdl-feature-col .msdl-feature-row{ justify-content:flex-start !important; text-align:left !important; }
  .msdl-feature-col .msdl-feature-text{ text-align:left !important; }
  .msdl-arch-row{ grid-template-columns:1fr; }
  .msdl-feature-grid{ grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr); }
}

/* ========================================================================
   04 — APPLICATIONS
   ======================================================================== */
.msdl-apps{ background:#fff; padding:64px 32px; }
.msdl-apps-head{ margin-bottom:32px; }
.msdl-apps-head h2{ font-size:clamp(24px,3vw,34px); font-weight:700; color:var(--text); margin:0; letter-spacing:-0.3px; }

/* Featured panel */
.msdl-apps-featured{
  display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:center; margin-bottom:28px;
  background:var(--navy-deep); border-radius:14px; overflow:hidden; position:relative;
}
.msdl-apps-featured::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--arc); z-index:2; }
.msdl-apps-featured-media{ position:relative; padding-top:56%; overflow:hidden; min-width:0; }
.msdl-apps-featured-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:kenBurns 9s ease-in-out alternate infinite; transition:opacity 170ms ease;
}
.msdl-apps-featured-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(11,18,48,0.55) 0%, rgba(11,18,48,0.05) 55%, transparent 75%); pointer-events:none;
}
.msdl-apps-featured-media::before{
  content:''; position:absolute; top:0; bottom:0; right:-1px; width:120px; z-index:1;
  background:linear-gradient(to right, transparent 0%, var(--navy-deep) 100%);
  pointer-events:none;
}
.msdl-apps-featured-copy{ padding:28px 36px 28px 0; transition:opacity 130ms ease; min-width:0; overflow-wrap:break-word; }
.msdl-apps-featured-copy .msdl-apps-tag{ background:rgba(255,255,255,0.1); color:#fff; }
.msdl-apps-featured-copy h3{ font-size:22px; font-weight:700; color:#fff; margin:0 0 12px; line-height:1.3; font-family:'Montserrat', sans-serif; overflow-wrap:break-word; }
.msdl-apps-featured-copy p{ font-size:13.5px; color:rgba(255,255,255,0.68); line-height:1.65; margin:0 0 16px; }
.msdl-apps-featured-copy .msdl-app-link{ color:#7DC6EF; }
.msdl-apps-featured-copy .msdl-app-link svg path{ stroke:#7DC6EF; }
.msdl-apps-featured.is-switching .msdl-apps-featured-copy{ opacity:0; }

/* Card rail */
.msdl-apps-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.msdl-apps-card{
  position:relative; border:none; padding:0; cursor:pointer; border-radius:10px; overflow:hidden;
  background:#0d1220; aspect-ratio:4/3; text-align:left; transition:transform 220ms ease, box-shadow 220ms ease;
}
.msdl-apps-card:hover{ transform:translateY(-5px) scale(1.015); box-shadow:0 18px 34px rgba(0,0,0,0.20); }
.msdl-apps-card.is-active{ box-shadow:0 0 0 2px var(--red), 0 14px 28px rgba(0,0,0,0.16); }
.msdl-apps-card-media{ position:absolute; inset:0; }
.msdl-apps-card-media img{
  width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.75) saturate(0.9);
  transition:transform 420ms ease, filter 220ms ease;
}
.msdl-apps-card:hover .msdl-apps-card-media img{ transform:scale(1.08); filter:brightness(0.55) saturate(1); }
.msdl-apps-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, transparent 75%); pointer-events:none;
}
.msdl-apps-card-label{
  position:absolute; left:12px; bottom:10px; z-index:1; color:#fff; font-size:12.5px; font-weight:700;
  letter-spacing:0.2px; font-family:'Montserrat', sans-serif;
}
.msdl-apps-card-arrow{
  position:absolute; right:10px; top:10px; z-index:1; opacity:0; transform:translate(-4px,4px);
  transition:opacity 200ms ease, transform 200ms ease;
}
.msdl-apps-card:hover .msdl-apps-card-arrow{ opacity:1; transform:translate(0,0); }
.msdl-apps-card.is-active .msdl-apps-card-arrow{ opacity:1; transform:translate(0,0); }

.msdl-apps-tag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--red); background:rgba(193,39,45,0.07); padding:4px 10px; border-radius:2px; margin-bottom:14px;
}
.msdl-app-link{ font-size:12px; font-weight:600; color:var(--red); display:inline-flex; align-items:center; gap:4px; transition:gap 150ms; }
.msdl-app-link:hover{ gap:8px; }

@media (max-width:900px){
  .msdl-apps-featured{ grid-template-columns:1fr; }
  .msdl-apps-featured-copy{ padding:24px; }
  .msdl-apps-rail{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:540px){ .msdl-apps-rail{ grid-template-columns:repeat(2,1fr); } }

@media (max-width:900px){
  .msdl-apps-panel{ grid-template-columns:1fr; gap:24px; }
  .msdl-apps-tab{ padding:12px 14px 12px; }
}

/* ========================================================================
   05 — NEWS
   ======================================================================== */
.msdl-news{ background:#f8f8f8; padding:80px 32px; position:relative; overflow:hidden; }
.msdl-news-head{ margin-bottom:40px; position:relative; z-index:1; }
.msdl-news-head h2{ font-size:clamp(24px,3vw,34px); font-weight:700; color:var(--text); margin:0; letter-spacing:-0.3px; }
.msdl-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:1; }
.msdl-news-card{
  background:rgba(255,255,255,0.80); backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
  border:1px solid rgba(255,255,255,0.9); border-top-color:rgba(255,255,255,0.96);
  border-radius:6px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.95);
  transition:box-shadow 200ms, transform 200ms; will-change:transform; position:relative;
}
.msdl-news-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--arc); z-index:2;
  transform:scaleX(0); transform-origin:left; transition:transform 280ms ease-out;
}
.msdl-news-card:hover::before{ transform:scaleX(1); }
.msdl-news-card:hover{ box-shadow:0 16px 48px rgba(0,0,0,0.12), 0 0 24px var(--arc-glow), inset 0 1px 0 rgba(255,255,255,0.95); transform:translateY(-4px); }
.msdl-news-media{ position:relative; padding-top:56%; overflow:hidden; background:var(--bg-light); }
.msdl-news-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform 350ms ease-out; filter:saturate(0.88) brightness(1.0);
}
.msdl-news-card:hover .msdl-news-media img{ transform:scale(1.04); }
.msdl-news-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(12,15,60,0.10) 0%, rgba(193,39,45,0.05) 100%); pointer-events:none;
}
.msdl-news-body{ padding:24px 24px 28px; }
.msdl-news-meta{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.msdl-news-tag{ font-size:10px; font-weight:700; color:var(--red); letter-spacing:1.5px; text-transform:uppercase; background:rgba(193,39,45,0.07); padding:3px 8px; border-radius:2px; }
.msdl-news-date{ font-size:12px; color:var(--text-muted); }
.msdl-news-title{
  font-size:15px; font-weight:700; color:var(--text); margin:0 0 10px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.msdl-news-excerpt{
  font-size:13px; color:var(--text-muted); line-height:1.65; margin:0 0 18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.msdl-news-link{ font-size:12px; font-weight:600; color:var(--red); display:inline-flex; align-items:center; gap:4px; transition:gap 150ms; }
.msdl-news-link:hover{ gap:8px; }

@media (max-width:900px){ .msdl-news-grid{ grid-template-columns:1fr; } }

/* ========================================================================
   06 — DOWNLOAD FORM
   ======================================================================== */
.msdl-download{ background:linear-gradient(135deg,#f2f1f6 0%,#f7f6f8 45%,#f4f1f6 100%); padding:96px 32px; border-top:1px solid var(--border); position:relative; overflow:hidden; }
.msdl-download-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; position:relative; z-index:1; }

.msdl-download-mockup{ display:flex; justify-content:center; padding:16px 0 100px; perspective:1200px; position:relative; }
.msdl-download-mockup::before{
  content:''; position:absolute; top:50%; left:50%; width:220px; height:220px; transform:translate(-50%,-50%);
  background:none;
  filter:blur(24px); border-radius:50%; animation:docHalo 5.4s linear infinite; z-index:0;
}
.msdl-download-mockup::after{
  content:''; position:absolute; top:50%; left:50%; width:130px; height:130px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(245,194,66,0.32) 0%, transparent 70%);
  filter:blur(12px); z-index:0; pointer-events:none;
}
.msdl-doc-stack{
  position:relative; width:210px; height:274px;
  transform-style:preserve-3d; z-index:1;
  animation:docBreathe 5.4s linear infinite;
  will-change:transform;
}
@keyframes docBreathe{
  0%{ transform:rotateY(-18.00deg) rotateX(6.00deg) scale(1.0000) translateY(-0.00px); }
  5%{ transform:rotateY(-17.90deg) rotateX(5.95deg) scale(1.0019) translateY(-0.31px); }
  10%{ transform:rotateY(-17.60deg) rotateX(5.81deg) scale(1.0073) translateY(-1.20px); }
  15%{ transform:rotateY(-17.15deg) rotateX(5.60deg) scale(1.0156) translateY(-2.55px); }
  20%{ transform:rotateY(-16.61deg) rotateX(5.35deg) scale(1.0254) translateY(-4.16px); }
  25%{ transform:rotateY(-16.06deg) rotateX(5.09deg) scale(1.0356) translateY(-5.83px); }
  30%{ transform:rotateY(-15.56deg) rotateX(4.86deg) scale(1.0446) translateY(-7.31px); }
  35%{ transform:rotateY(-15.20deg) rotateX(4.69deg) scale(1.0513) translateY(-8.40px); }
  40%{ transform:rotateY(-15.02deg) rotateX(4.61deg) scale(1.0547) translateY(-8.95px); }
  45%{ transform:rotateY(-15.02deg) rotateX(4.61deg) scale(1.0546) translateY(-8.94px); }
  50%{ transform:rotateY(-15.14deg) rotateX(4.66deg) scale(1.0525) translateY(-8.58px); }
  55%{ transform:rotateY(-15.36deg) rotateX(4.77deg) scale(1.0485) translateY(-7.93px); }
  60%{ transform:rotateY(-15.66deg) rotateX(4.91deg) scale(1.0429) translateY(-7.03px); }
  65%{ transform:rotateY(-16.02deg) rotateX(5.08deg) scale(1.0363) translateY(-5.94px); }
  70%{ transform:rotateY(-16.42deg) rotateX(5.26deg) scale(1.0290) translateY(-4.74px); }
  75%{ transform:rotateY(-16.82deg) rotateX(5.45deg) scale(1.0216) translateY(-3.53px); }
  80%{ transform:rotateY(-17.20deg) rotateX(5.63deg) scale(1.0146) translateY(-2.39px); }
  85%{ transform:rotateY(-17.53deg) rotateX(5.78deg) scale(1.0086) translateY(-1.41px); }
  90%{ transform:rotateY(-17.79deg) rotateX(5.90deg) scale(1.0039) translateY(-0.64px); }
  95%{ transform:rotateY(-17.95deg) rotateX(5.97deg) scale(1.0010) translateY(-0.16px); }
  100%{ transform:rotateY(-18.00deg) rotateX(6.00deg) scale(1.0000) translateY(-0.00px); }
}
.msdl-doc-page{
  position:absolute; inset:0; border-radius:8px; background:#fff;
  box-shadow:0 40px 80px rgba(29,32,136,0.24), 0 14px 32px rgba(29,32,136,0.14), 0 4px 10px rgba(29,32,136,0.10);
  backface-visibility:hidden;
}
.page-3{ transform:translateZ(-20px) translate(11px,11px); background:#e2e2ea;
  animation:docPage3 5.4s linear infinite; }
@keyframes docPage3{
  0%{ transform:translateZ(-20.00px) translate(11.00px,11.00px); }
  5%{ transform:translateZ(-20.24px) translate(11.10px,11.10px); }
  10%{ transform:translateZ(-20.93px) translate(11.40px,11.40px); }
  15%{ transform:translateZ(-21.98px) translate(11.85px,11.85px); }
  20%{ transform:translateZ(-23.24px) translate(12.39px,12.39px); }
  25%{ transform:translateZ(-24.53px) translate(12.94px,12.94px); }
  30%{ transform:translateZ(-25.68px) translate(13.44px,13.44px); }
  35%{ transform:translateZ(-26.53px) translate(13.80px,13.80px); }
  40%{ transform:translateZ(-26.96px) translate(13.98px,13.98px); }
  45%{ transform:translateZ(-26.95px) translate(13.98px,13.98px); }
  50%{ transform:translateZ(-26.68px) translate(13.86px,13.86px); }
  55%{ transform:translateZ(-26.17px) translate(13.64px,13.64px); }
  60%{ transform:translateZ(-25.46px) translate(13.34px,13.34px); }
  65%{ transform:translateZ(-24.62px) translate(12.98px,12.98px); }
  70%{ transform:translateZ(-23.69px) translate(12.58px,12.58px); }
  75%{ transform:translateZ(-22.75px) translate(12.18px,12.18px); }
  80%{ transform:translateZ(-21.86px) translate(11.80px,11.80px); }
  85%{ transform:translateZ(-21.09px) translate(11.47px,11.47px); }
  90%{ transform:translateZ(-20.50px) translate(11.21px,11.21px); }
  95%{ transform:translateZ(-20.13px) translate(11.05px,11.05px); }
  100%{ transform:translateZ(-20.00px) translate(11.00px,11.00px); }
}
.page-2{ transform:translateZ(-10px) translate(5px,5px); background:#eee;
  animation:docPage2 5.4s linear infinite; }
@keyframes docPage2{
  0%{ transform:translateZ(-10.00px) translate(5.00px,5.00px); }
  5%{ transform:translateZ(-10.14px) translate(5.07px,5.07px); }
  10%{ transform:translateZ(-10.53px) translate(5.27px,5.27px); }
  15%{ transform:translateZ(-11.13px) translate(5.57px,5.57px); }
  20%{ transform:translateZ(-11.85px) translate(5.93px,5.93px); }
  25%{ transform:translateZ(-12.59px) translate(6.29px,6.29px); }
  30%{ transform:translateZ(-13.25px) translate(6.62px,6.62px); }
  35%{ transform:translateZ(-13.73px) translate(6.87px,6.87px); }
  40%{ transform:translateZ(-13.98px) translate(6.99px,6.99px); }
  45%{ transform:translateZ(-13.97px) translate(6.99px,6.99px); }
  50%{ transform:translateZ(-13.82px) translate(6.91px,6.91px); }
  55%{ transform:translateZ(-13.52px) translate(6.76px,6.76px); }
  60%{ transform:translateZ(-13.12px) translate(6.56px,6.56px); }
  65%{ transform:translateZ(-12.64px) translate(6.32px,6.32px); }
  70%{ transform:translateZ(-12.11px) translate(6.05px,6.05px); }
  75%{ transform:translateZ(-11.57px) translate(5.79px,5.79px); }
  80%{ transform:translateZ(-11.06px) translate(5.53px,5.53px); }
  85%{ transform:translateZ(-10.62px) translate(5.31px,5.31px); }
  90%{ transform:translateZ(-10.29px) translate(5.14px,5.14px); }
  95%{ transform:translateZ(-10.07px) translate(5.04px,5.04px); }
  100%{ transform:translateZ(-10.00px) translate(5.00px,5.00px); }
}
.page-1{
  transform:translateZ(0); padding:20px 18px; display:flex; flex-direction:column; gap:7px;
  border:1px solid rgba(255,255,255,0.6); overflow:hidden;
}
/* Light catching the cover as the document rotates. */
.page-1::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:8px;
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 34%, rgba(255,255,255,0.42) 45%,
    rgba(255,255,255,0.78) 50%, rgba(255,255,255,0.42) 55%,
    rgba(255,255,255,0) 66%);
  background-size:280% 100%; background-position:38% 0; mix-blend-mode:overlay;
  animation:docGlint 5.4s linear infinite;
}
@keyframes docGlint{
  0%{ opacity:0.300; background-position:52.00% 0; }
  5%{ opacity:0.317; background-position:51.24% 0; }
  10%{ opacity:0.367; background-position:49.06% 0; }
  15%{ opacity:0.442; background-position:45.77% 0; }
  20%{ opacity:0.531; background-position:41.82% 0; }
  25%{ opacity:0.624; background-position:37.76% 0; }
  30%{ opacity:0.706; background-position:34.14% 0; }
  35%{ opacity:0.767; background-position:31.47% 0; }
  40%{ opacity:0.797; background-position:30.12% 0; }
  45%{ opacity:0.797; background-position:30.14% 0; }
  50%{ opacity:0.777; background-position:31.02% 0; }
  55%{ opacity:0.741; background-position:32.62% 0; }
  60%{ opacity:0.690; background-position:34.83% 0; }
  65%{ opacity:0.630; background-position:37.49% 0; }
  70%{ opacity:0.564; background-position:40.40% 0; }
  75%{ opacity:0.496; background-position:43.36% 0; }
  80%{ opacity:0.433; background-position:46.15% 0; }
  85%{ opacity:0.378; background-position:48.56% 0; }
  90%{ opacity:0.336; background-position:50.43% 0; }
  95%{ opacity:0.309; background-position:51.60% 0; }
  100%{ opacity:0.300; background-position:52.00% 0; }
}
/* Paper thickness on the leading edge. */
.page-1::after{
  content:''; position:absolute; top:3px; bottom:3px; left:-4px; width:4px; z-index:2;
  background:linear-gradient(90deg, #cfcfda 0%, #ececf2 60%, #fff 100%);
  border-radius:3px 0 0 3px;
  transform:rotateY(-72deg); transform-origin:right center;
}
.msdl-doc-arc{ height:3px; width:42px; background:#C1272D; border-radius:2px; margin-bottom:8px; box-shadow:none; }
.msdl-doc-logo-row{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.msdl-doc-mark{ width:12px; height:12px; border-radius:3px; background:var(--red); flex-shrink:0; }
.msdl-doc-lines{ display:flex; flex-direction:column; gap:3px; flex:1; }
.msdl-doc-lines span{ height:3px; border-radius:2px; background:#dcdce2; display:block; }
.msdl-doc-lines span:first-child{ width:60%; }
.msdl-doc-lines span:last-child{ width:35%; }
.msdl-doc-title-line{ height:9px; width:75%; border-radius:2px; background:var(--navy-deep); margin-bottom:4px; }
.msdl-doc-body-line{ height:4px; border-radius:2px; background:#e4e4ea; }
.msdl-doc-body-line.w80{ width:80%; } .msdl-doc-body-line.w70{ width:70%; }
.msdl-doc-body-line.w60{ width:60%; } .msdl-doc-body-line.w45{ width:45%; }
.msdl-doc-chip{
  margin:10px auto; width:46px; height:46px; border-radius:4px;
  background:linear-gradient(135deg,#1a1a2e,#1D2088); box-shadow:0 4px 10px rgba(29,32,136,0.3);
  position:relative;
}
.msdl-doc-chip::after{ content:''; position:absolute; inset:9px; border:1px solid rgba(255,255,255,0.25); border-radius:2px; }
.msdl-doc-pdf-tag{
  margin-top:auto; align-self:flex-start; background:var(--red); color:#fff; font-size:9px; font-weight:800;
  letter-spacing:1px; padding:3px 8px; border-radius:2px;
}

.msdl-download-head-row{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.msdl-download-head-row h2{ font-family:'Montserrat', sans-serif; font-size:clamp(26px,3.2vw,38px); font-weight:800; color:var(--text); margin:0; letter-spacing:-0.6px; line-height:1.28; }
.msdl-download-desc{ font-size:clamp(16px,1.4vw,18.5px); color:var(--text-muted); line-height:1.75; margin:0; }

.msdl-trust-row{ display:flex; align-items:baseline; gap:8px; margin-top:20px; flex-wrap:wrap; }
.msdl-trust-row-label{
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--red);
  flex-shrink:0;
}
.msdl-trust-row-badges{ font-size:12.5px; font-weight:600; color:var(--text-muted); }
.msdl-form-microtrust{
  font-size:10.5px; color:var(--text-muted); text-align:center; margin-top:10px; line-height:1.5; opacity:0.85;
}

.msdl-form{
  background:rgba(255,255,255,0.88); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-radius:12px; padding:38px; border:1px solid rgba(255,255,255,0.95); border-top-color:rgba(255,255,255,0.98);
  box-shadow:0 24px 60px rgba(29,32,136,0.10), 0 4px 16px rgba(29,32,136,0.05), inset 0 1px 0 rgba(255,255,255,0.98);
  position:relative; overflow:hidden; transition:box-shadow 400ms cubic-bezier(0.16,1,0.3,1);
}
.msdl-form:hover{ box-shadow:0 32px 76px rgba(29,32,136,0.13), 0 6px 20px rgba(29,32,136,0.06), inset 0 1px 0 rgba(255,255,255,0.98); }
.msdl-form::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--arc); }
.msdl-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.msdl-form-field label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px; letter-spacing:0.3px; }
.msdl-form-field .req{ color:var(--red); margin-left:2px; }
.msdl-form-field input{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:5px;
  font-size:13.5px; color:var(--text); outline:none; background:#fff; font-family:'Inter', sans-serif;
  transition:border-color 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms cubic-bezier(0.16,1,0.3,1);
}
.msdl-form-field input:focus{ border-color:var(--red); box-shadow:0 0 0 4px rgba(193,39,45,0.10), 0 2px 8px rgba(193,39,45,0.08); }
.msdl-form-field.has-error input{ border-color:var(--red); box-shadow:0 0 0 3px rgba(193,39,45,0.07); }
.msdl-form-error{ font-size:11px; color:var(--red); margin-top:4px; font-weight:500; display:none; }
.msdl-form-field.has-error .msdl-form-error{ display:block; }

.msdl-form-consent{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:16px; }
.msdl-form-consent input{ margin-top:2px; accent-color:var(--red); flex-shrink:0; width:14px; height:14px; cursor:pointer; }
.msdl-form-consent span{ font-size:12px; color:var(--text-muted); line-height:1.55; }
.msdl-form-consent a{ color:var(--red); text-decoration:underline; font-weight:600; }

.msdl-form-submit,
button.msdl-form-submit,
.msdl-page .msdl-form-submit,
html body .msdl-page form .msdl-form-submit{
  width:100% !important; color:#fff !important; border:none !important; padding:13px 0 !important; border-radius:4px !important;
  font-size:13.5px !important; font-weight:700 !important; letter-spacing:0.4px !important;
  background:#c7c7c7 !important; background-color:#c7c7c7 !important; background-image:none !important; cursor:not-allowed !important;
  transition:background 150ms, box-shadow 200ms, transform 150ms !important; position:relative; overflow:hidden; text-transform:uppercase;
}
.msdl-form-submit.is-ready,
button.msdl-form-submit.is-ready,
.msdl-page .msdl-form-submit.is-ready,
html body .msdl-page form .msdl-form-submit.is-ready{
  background:#C1272D !important; background-color:#C1272D !important; background-image:none !important; cursor:pointer !important;
  box-shadow:0 4px 16px rgba(193,39,45,0.32), 0 0 0 1px rgba(193,39,45,0.15) !important;
  animation:ctaPulse 2.6s ease-in-out infinite;
}
.msdl-form-submit.is-ready:hover,
button.msdl-form-submit.is-ready:hover,
.msdl-page .msdl-form-submit.is-ready:hover,
html body .msdl-page form .msdl-form-submit.is-ready:hover{
  background:#a51f25 !important; background-color:#a51f25 !important; background-image:none !important;
  transform:translateY(-1px); box-shadow:0 8px 26px rgba(193,39,45,0.42), 0 0 26px var(--arc-glow) !important; animation:none;
}
.msdl-form-submit .sweep{
  position:absolute; top:0; left:0; height:100%; width:45%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent); pointer-events:none; opacity:0;
}
.msdl-form-submit.is-ready:hover .sweep{ opacity:1; animation:lightSweep 0.44s ease-out forwards; }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 4px 16px rgba(193,39,45,0.32), 0 0 0 1px rgba(193,39,45,0.15); }
  50%{ box-shadow:0 4px 20px rgba(193,39,45,0.46), 0 0 0 5px rgba(193,39,45,0.08); }
}

.msdl-form-success{
  background:rgba(255,255,255,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:8px; padding:40px 32px; border:1px solid rgba(255,255,255,0.94);
  box-shadow:0 8px 32px rgba(0,0,0,0.06); text-align:center; display:none;
}
.msdl-form-success.is-visible{ display:block; }
.msdl-form.is-hidden{ display:none; }
.msdl-form-success h3{ font-family:'Montserrat', sans-serif; font-size:18px; font-weight:700; color:var(--text); margin:0 0 8px; }
.msdl-form-success p{ font-size:14px; color:var(--text-muted); margin:0; }

@media (max-width:900px){
  .msdl-download-grid{ grid-template-columns:1fr; }
  .msdl-form-grid{ grid-template-columns:1fr; }
}

/* ========================================================================
   07 — FOOTER + BACK TO TOP
   ======================================================================== */
.msdl-footer{ background:var(--navy-deep); position:relative; overflow:hidden; padding-top:56px; }
.msdl-footer-glow-l{ position:absolute; top:0; left:0; width:35%; height:55%; background:radial-gradient(ellipse at top left, rgba(193,39,45,0.07) 0%, transparent 65%); pointer-events:none; }
.msdl-footer-glow-r{ position:absolute; top:0; right:0; width:40%; height:60%; background:radial-gradient(ellipse at top right, rgba(27,93,204,0.09) 0%, transparent 65%); pointer-events:none; }
.msdl-footer-grid{ max-width:1200px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; position:relative; z-index:1; }
.msdl-footer-brand-logo{ position:relative; display:inline-block; margin-bottom:16px; }
.msdl-footer-brand-logo img{ height:30px; width:auto; display:block; filter:brightness(0) invert(1); }
.msdl-footer-brand-logo .rule{ position:absolute; bottom:-6px; left:0; right:0; height:1px; background:var(--arc); opacity:0.35; }
.msdl-footer-brand p{ font-size:13px; color:rgba(255,255,255,0.45); line-height:1.7; margin:0 0 20px; }
.msdl-footer-social{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:4px; border:1px solid rgba(255,255,255,0.12); }
.msdl-footer-col h4{ font-size:11px; font-weight:700; color:#fff; margin:0 0 6px; letter-spacing:1.5px; text-transform:uppercase; }
.msdl-footer-col .rule{ height:1.5px; background:var(--arc); width:20px; opacity:0.55; margin-bottom:14px; }
.msdl-footer-col ul{ display:flex; flex-direction:column; gap:8px; }
.msdl-footer-link{ font-size:13px; display:inline-block; color:rgba(255,255,255,0.42); position:relative; transition:color 180ms; }
.msdl-footer-link::after{
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--arc);
  opacity:0; transform:scaleX(0); transform-origin:left; transition:transform 220ms ease-out, opacity 180ms;
}
.msdl-footer-link:hover{ color:#7DC6EF; }
.msdl-footer-link:hover::after{ opacity:0.7; transform:scaleX(1); }
.msdl-footer-divider{ max-width:1200px; margin:40px auto 0; padding:0 32px; position:relative; z-index:1; }
.msdl-footer-divider .rule{ height:1px; background:var(--arc); opacity:0.22; }
.msdl-footer-bottom{
  max-width:1200px; margin:0 auto; padding:18px 32px 24px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:8px; position:relative; z-index:1;
}
.msdl-footer-bottom p{ font-size:12px; color:rgba(255,255,255,0.32); margin:0; }
.msdl-footer-bottom p:last-child{ color:rgba(255,255,255,0.22); }

.msdl-back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:999; width:44px; height:44px; border-radius:50%;
  background:var(--red); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(193,39,45,0.38); opacity:0; transform:translateY(12px);
  transition:opacity 220ms ease, transform 220ms ease, background 150ms; pointer-events:none;
}
.msdl-back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.msdl-back-to-top:hover{ background:var(--red-dark); box-shadow:0 4px 20px rgba(193,39,45,0.55), 0 0 0 4px rgba(193,39,45,0.12); }

@media (max-width:900px){ .msdl-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .msdl-footer-grid{ grid-template-columns:1fr; } }

/* ========================================================================
   ELEMENTOR FULL-WIDTH OVERRIDE
   Forces every Elementor section/container that holds our MSDL widgets to
   run edge-to-edge, regardless of that section's own Boxed/Full Width
   setting in the Elementor editor. This is a safety net so the page
   doesn't need every individual section manually switched to Full Width.
   ======================================================================== */
body:has(.msdl-page) .elementor-section.elementor-section-boxed > .elementor-container,
body:has(.msdl-page) .e-con-inner,
body:has(.msdl-page) .e-con{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body:has(.msdl-page) .elementor-section{
  padding-left:0 !important;
  padding-right:0 !important;
}
body:has(.msdl-page) .elementor-widget-wrap,
body:has(.msdl-page) .elementor-column,
body:has(.msdl-page) .elementor-widget{
  max-width:100% !important;
  width:100% !important;
}

/* ========================================================================
   SCROLL-TRIGGERED REVEAL
   ======================================================================== */
.msdl-reveal{ opacity:0; transform:translateY(28px); transition:opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.msdl-reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  /* Reduced, not removed: a slow shallow turn still reads as 3D without
     the sweep, the page separation, or any large travel. */
  .msdl-doc-stack{ animation:docBreatheCalm 8s linear infinite; }
  .page-2, .page-3, .page-1::before{ animation:none; }
}
@keyframes docBreatheCalm{
  0%  { transform:rotateY(-18deg) rotateX(6deg) scale(1.0000) translateY(0); }
  22% { transform:rotateY(-18deg) rotateX(6deg) scale(1.0154) translateY(-2.1px); }
  45% { transform:rotateY(-18deg) rotateX(6deg) scale(1.0220) translateY(-3px); }
  70% { transform:rotateY(-18deg) rotateX(6deg) scale(1.0132) translateY(-1.8px); }
  100%{ transform:rotateY(-18deg) rotateX(6deg) scale(1.0000) translateY(0); }
}

@keyframes docHalo{
  0%{ opacity:0.340; transform:translate(-50%,-50%) scale(1.0000); }
  5%{ opacity:0.346; transform:translate(-50%,-50%) scale(1.0035); }
  10%{ opacity:0.364; transform:translate(-50%,-50%) scale(1.0133); }
  15%{ opacity:0.391; transform:translate(-50%,-50%) scale(1.0283); }
  20%{ opacity:0.423; transform:translate(-50%,-50%) scale(1.0463); }
  25%{ opacity:0.457; transform:translate(-50%,-50%) scale(1.0647); }
  30%{ opacity:0.486; transform:translate(-50%,-50%) scale(1.0812); }
  35%{ opacity:0.508; transform:translate(-50%,-50%) scale(1.0933); }
  40%{ opacity:0.519; transform:translate(-50%,-50%) scale(1.0994); }
  45%{ opacity:0.519; transform:translate(-50%,-50%) scale(1.0993); }
  50%{ opacity:0.512; transform:translate(-50%,-50%) scale(1.0954); }
  55%{ opacity:0.499; transform:translate(-50%,-50%) scale(1.0881); }
  60%{ opacity:0.481; transform:translate(-50%,-50%) scale(1.0781); }
  65%{ opacity:0.459; transform:translate(-50%,-50%) scale(1.0660); }
  70%{ opacity:0.435; transform:translate(-50%,-50%) scale(1.0527); }
  75%{ opacity:0.411; transform:translate(-50%,-50%) scale(1.0393); }
  80%{ opacity:0.388; transform:translate(-50%,-50%) scale(1.0266); }
  85%{ opacity:0.368; transform:translate(-50%,-50%) scale(1.0156); }
  90%{ opacity:0.353; transform:translate(-50%,-50%) scale(1.0072); }
  95%{ opacity:0.343; transform:translate(-50%,-50%) scale(1.0018); }
  100%{ opacity:0.340; transform:translate(-50%,-50%) scale(1.0000); }
}

/* ─────────────────────────────────────────────────────────────
   Remove trailing white space below the footer.
   The footer is the last element inside .msdl-page, so any gap
   underneath comes from the theme or Elementor wrapper, not here.
   Preferred fix is OceanWP Settings > Main > Paddings > Disable;
   this is the fallback for whatever that doesn't cover.
   ───────────────────────────────────────────────────────────── */
.msdl-footer{ margin-bottom:0; }

#main,
#content-wrap,
#primary,
.site-content,
.entry-content,
.elementor-section-wrap,
.elementor-section-wrap > .elementor-section:last-child,
.elementor > .elementor-element:last-child{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* Paint the page background navy so any residual gap blends in
   rather than flashing white. */
html{ background:#fff; }




/* ═══════════════════════════════════════════════════════════════════
   SILICON LINE — independent identity
   Per Duncan, 22 Aug:
     · blue/yellow gradient blocks -> Silicon Line signature red #C1272D
     · minimalistic "Apple-like" hero aesthetic carried through the page
     · Product Features simplified: larger type, larger icons, hover states
     · Product Brief mockup flattened — sleek, not a 3D animation
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --sl-red:#C1272D;
  --sl-red-dark:#A31F24;
  --sl-ink:#111214;
  --sl-body:#5c5f66;
  --sl-hair:#e7e8ec;
  --sl-tint:#fbfbfc;
  --arc: var(--sl-red);
  --arc-wide: var(--sl-red);
  --arc-glow: rgba(193,39,45,0.18);
}

/* ── 1 · Remove every EverproX pattern surface ── */
.msdl-product > svg,.msdl-news > svg,.msdl-apps > svg,.msdl-download > svg,.msdl-footer > svg{ display:none !important; }
.msdl-product::before,.msdl-product::after,
.msdl-apps::before,.msdl-apps::after,
.msdl-news::before,.msdl-news::after,
.msdl-download::before,.msdl-download::after,
.msdl-footer::before,.msdl-footer::after{ display:none !important; }
.msdl-footer-glow-l,.msdl-footer-glow-r{ display:none !important; }

/* ── 2 · Gradient rules become solid red ── */
.msdl-section-label-arc .bar{ background:var(--sl-red) !important; }
.msdl-arch-card::before,.msdl-spec-card::before,
.msdl-apps-featured::before,.msdl-news-card::before,
.msdl-form::before{ background:var(--sl-red) !important; }
.msdl-doc-arc{ background:var(--sl-red) !important; box-shadow:none !important; }
.msdl-footer-brand-logo .rule,.msdl-footer-col .rule,.msdl-footer-divider .rule{
  background:var(--sl-red) !important; }
.msdl-hero-kicker .rule{ background:var(--sl-red) !important; }
.msdl-hero-chip-spot{ display:none !important; }

/* ── 3 · Minimal ground: white, generous, quiet rules ── */
.msdl-product{ background:#fff; padding:64px 32px 56px; }
.msdl-apps{ background:var(--sl-tint); padding:104px 32px; }
.msdl-news{ background:#fff; padding:104px 32px; }
.msdl-download{ background:var(--sl-tint); }
.msdl-footer{ background:var(--sl-ink); padding-top:72px; }

.msdl-product-head{ margin-bottom:36px; }
.msdl-apps-head,.msdl-news-head{ margin-bottom:48px; }
.msdl-product-head h2,.msdl-apps-head h2,.msdl-news-head h2{
  font-size:clamp(30px,3.4vw,44px); font-weight:600; letter-spacing:-1px; color:var(--sl-ink);
}
.msdl-section-label-arc span{ color:var(--sl-red); letter-spacing:2.2px; font-size:10.5px; }

/* ── 4 · Product Features — larger, calmer, interactive ── */
.msdl-stat-strip{ max-width:820px; border:none; border-top:1px solid var(--sl-hair);
  border-bottom:1px solid var(--sl-hair); margin:0 auto 44px; }
.msdl-stat{ border-right:1px solid var(--sl-hair); padding:20px 18px; }
.msdl-stat:last-child{ border-right:none; }
.msdl-stat-num{ font-size:27px !important; font-weight:600; color:var(--sl-ink); }
.msdl-stat-num span:last-child{ font-size:15px; color:var(--sl-body); }
.msdl-stat-label{ font-size:12.5px; color:var(--sl-body); margin-top:6px; }

.msdl-feature-grid{ grid-template-columns:minmax(0,1fr) 420px minmax(0,1fr) !important; gap:32px !important; }
.msdl-feature-row{ gap:20px !important; padding:18px 26px 18px 0 !important;
  border-radius:12px; transition:background 200ms ease, transform 200ms ease; }
.msdl-feature-col.right .msdl-feature-row{ padding:18px 0 18px 26px !important; }
.msdl-feature-row:hover{ background:var(--sl-tint); transform:translateY(-2px); }
.msdl-feature-title{ font-size:17px !important; font-weight:600 !important; color:var(--sl-ink) !important;
  margin-bottom:7px !important; letter-spacing:-0.2px; }
.msdl-feature-desc{ font-size:14px !important; color:var(--sl-body) !important; line-height:1.62 !important; }
.msdl-feature-text{ width:300px !important; }
.msdl-feature-icon{ width:76px !important; height:76px !important; transition:transform 220ms ease; }
.msdl-feature-icon img,.feat-icon-img{ width:76px !important; height:76px !important; }
.msdl-feature-row:hover .msdl-feature-icon{ transform:scale(1.06); }
/* the leader lines were most of the visual noise */
.msdl-feature-icon::before,.msdl-feature-icon::after{ display:none !important; }

.msdl-arch-card,.msdl-spec-card{ border:1px solid var(--sl-hair); box-shadow:none;
  border-radius:14px; transition:box-shadow 220ms ease; }
.msdl-arch-card:hover,.msdl-spec-card:hover{ box-shadow:0 12px 32px rgba(17,18,20,.07); }

/* ── 5 · Applications — flatter, red accent, clear hover ── */
.msdl-apps-featured{ background:var(--sl-ink) !important; border-radius:14px; }
.msdl-apps-card{ border-radius:12px; transition:transform 220ms ease, box-shadow 220ms ease; }
.msdl-apps-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(17,18,20,.12); }
.msdl-apps-card.is-active{ outline:2px solid var(--sl-red); outline-offset:2px; }
.msdl-app-link,.msdl-news-link{ color:var(--sl-red) !important; }

/* ── 6 · News — quiet cards, red rule ── */
.msdl-news-card{ background:#fff; border:1px solid var(--sl-hair); box-shadow:none !important;
  transition:box-shadow 220ms ease, transform 220ms ease; }
.msdl-news-card:hover{ box-shadow:0 14px 36px rgba(17,18,20,.09) !important; transform:translateY(-3px); }
.msdl-news-head h2{ color:var(--sl-ink) !important; }

/* ── 7 · Product Brief — flat, sleek, no 3D orbit ── */
.msdl-download-mockup{ perspective:none !important; }
.msdl-doc-stack{ transform:none !important; animation:none !important;
  width:230px !important; height:300px !important; }
.msdl-doc-page{ box-shadow:none !important; border:1px solid var(--sl-hair) !important; }
.page-2,.page-3{ display:none !important; }
.page-1{ transform:none !important; animation:none !important;
  box-shadow:0 18px 44px rgba(17,18,20,.10) !important; border-radius:10px !important; }
.page-1::before,.page-1::after{ display:none !important; }
.msdl-doc-pdf-tag{ background:var(--sl-red) !important; }
.msdl-doc-chip{ background:var(--sl-ink) !important; box-shadow:none !important; animation:none !important; }
.msdl-doc-chip::after{ display:none !important; }

/* ── 8 · Buttons — red, flat, no glow ── */
.msdl-btn-cta,.msdl-form-submit{ background:var(--sl-red) !important; box-shadow:none !important;
  border-radius:8px !important; transition:background 180ms ease, transform 180ms ease; }
.msdl-btn-cta:hover,.msdl-form-submit.is-ready:hover{
  background:var(--sl-red-dark) !important; box-shadow:none !important; transform:translateY(-1px); }
.msdl-btn-cta .sweep,.msdl-form-submit .sweep{ display:none !important; }
.msdl-back-to-top{ background:var(--sl-red) !important; box-shadow:none !important; }

/* ── 9 · Footer on ink, red rules ── */
.msdl-footer{ padding-top:72px !important; }
.msdl-footer-col h4{ color:rgba(255,255,255,.92); }


/* the conic rainbow halo behind the document was the last EverproX colour */
.msdl-download-mockup::before,.msdl-download-mockup::after{ display:none !important; }
.msdl-doc-title-line{ background:var(--sl-ink) !important; }
.msdl-doc-mark{ background:var(--sl-red) !important; }
/* diagram: EverproX navy -> Silicon Line ink */
#msdlArchDiagram rect[fill="#1D2088"]{ fill:#111214 !important; }

/* ══ Applications: strip the last navy ══════════════════════════════
   Two overlays on the featured image were still EverproX navy:
   a 105deg scrim and a 120px right-edge fade into --navy-deep.
   ═══════════════════════════════════════════════════════════════════ */
.msdl-apps-featured-media::after{
  background:linear-gradient(105deg, rgba(17,18,20,.50) 0%, rgba(17,18,20,.05) 55%, transparent 75%) !important;
}
.msdl-apps-featured-media::before{
  background:linear-gradient(to right, transparent 0%, #111214 100%) !important;
}
.msdl-apps-featured{ background:#111214 !important; }
.msdl-apps-featured-media img{ animation:none !important; }   /* calmer, per the minimal direction */

/* ══ Product Features: simpler still ════════════════════════════════ */

/* The stat strip and the feature grid were two separate systems doing
   similar work. Quieten the strip so the features lead. */
.msdl-stat-strip{ max-width:760px !important; margin-bottom:88px !important; }
.msdl-stat{ padding:22px 16px !important; }
.msdl-stat-num{ font-size:24px !important; }
.msdl-stat-label{ font-size:12px !important; }

/* Wider gutters, no centre-column crowding. */
.msdl-feature-grid{ grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr) !important;
  gap:44px !important; padding-bottom:8px !important; }
.msdl-feature-text{ width:290px !important; }
.msdl-feature-row{ padding:20px 22px !important; }
.msdl-feature-col.right .msdl-feature-row{ padding:20px 22px !important; }
.msdl-feature-desc{ font-size:13.5px !important; line-height:1.66 !important; }

/* Architecture + spec cards: flatter, more air. */
.msdl-arch-row{ gap:28px !important; margin-top:8px; }
.msdl-arch-card,.msdl-spec-card{ padding:30px 28px !important; border-radius:16px !important; }
.msdl-spec-card li{ padding:13px 0 !important; }

/* ══ Hover: more of it, everywhere it makes sense ═══════════════════ */

/* Feature rows — lift, tint, red rule slides in, icon scales */
.msdl-feature-row{ position:relative; overflow:hidden;
  transition:background 220ms cubic-bezier(.22,1,.36,1), transform 220ms cubic-bezier(.22,1,.36,1) !important; }
.msdl-feature-row::after{
  content:''; position:absolute; top:16px; bottom:16px; width:2px; border-radius:2px;
  background:var(--sl-red); opacity:0; transition:opacity 220ms ease, transform 220ms ease;
}
.msdl-feature-col.left .msdl-feature-row::after{ right:0; transform:scaleY(.4); transform-origin:center; }
.msdl-feature-col.right .msdl-feature-row::after{ left:0; transform:scaleY(.4); transform-origin:center; }
.msdl-feature-row:hover::after{ opacity:1; transform:scaleY(1); }
.msdl-feature-row:hover .msdl-feature-title{ color:var(--sl-red) !important; transition:color 200ms ease; }

/* Stat cells respond too */
.msdl-stat{ transition:background 200ms ease; }
.msdl-stat:hover{ background:var(--sl-tint); }
.msdl-stat:hover .msdl-stat-num{ color:var(--sl-red); transition:color 200ms ease; }

/* Architecture + spec cards */
.msdl-arch-card,.msdl-spec-card{
  transition:box-shadow 260ms ease, transform 260ms ease, border-color 260ms ease !important; }
.msdl-arch-card:hover,.msdl-spec-card:hover{
  transform:translateY(-3px); border-color:#d9dade !important;
  box-shadow:0 16px 40px rgba(17,18,20,.08) !important; }

/* Spec rows highlight on hover */
.msdl-spec-card li{ transition:background 180ms ease; border-radius:6px; }
.msdl-spec-card li:hover{ background:var(--sl-tint); }

/* Download-SVG button */

/* Chip lifts gently with the section */
.msdl-chip-center img{ transition:transform 320ms cubic-bezier(.22,1,.36,1) !important; }
.msdl-feature-grid:hover .msdl-chip-center img{ transform:scale(1.02); }

@media (prefers-reduced-motion:reduce){
  .msdl-feature-row,.msdl-arch-card,.msdl-spec-card,.msdl-chip-center img{ transition:none !important; }
}

/* Canvas is white so the top overscroll bounce doesn't flash dark.
   The footer's bottom is covered by an extending shadow instead of
   painting the whole html element. */
html{ background:#fff !important; }
.msdl-footer{ box-shadow:0 400px 0 0 var(--sl-ink); }
.msdl-chip-glow{ background:radial-gradient(ellipse 58% 56% at 50% 48%, rgba(17,18,20,.05) 0%, rgba(17,18,20,.02) 46%, transparent 78%) !important; }

/* ══ Product Brief — dimensional, but still ═════════════════════════
   Depth via perspective, page thickness and layered shadow.
   No orbit, no float, no breathing: motion only on hover, which is
   what makes it read as a rendered object rather than an animation.
   ═══════════════════════════════════════════════════════════════════ */
.msdl-download-mockup{
  perspective:1400px !important; perspective-origin:50% 42%;
  padding:24px 0 56px !important;
}
.msdl-doc-stack{
  width:250px !important; height:326px !important;
  transform-style:preserve-3d !important;
  transform:rotateY(-15deg) rotateX(7deg) !important;
  animation:none !important;
  transition:transform 620ms cubic-bezier(.22,1,.36,1) !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:rotateY(-7deg) rotateX(3deg) translateY(-6px) !important;
}

/* three sheets again, with real Z separation */
.page-2,.page-3{ display:block !important; }
.msdl-doc-page{ border:none !important; border-radius:11px !important; }
.page-3{ transform:translateZ(-22px) translate(13px,13px) !important;
  background:#e9eaee !important; box-shadow:none !important; animation:none !important; }
.page-2{ transform:translateZ(-11px) translate(6px,6px) !important;
  background:#f4f5f7 !important; box-shadow:none !important; animation:none !important; }
.page-1{ transform:translateZ(0) !important; background:#fff !important; animation:none !important;
  box-shadow:
    0 2px 3px rgba(17,18,20,.05),
    0 10px 20px rgba(17,18,20,.07),
    0 30px 60px rgba(17,18,20,.11),
    0 60px 100px rgba(17,18,20,.07) !important;
}

/* paper thickness on the spine, rotated into the third dimension */
.page-1::after{
  content:'' !important; display:block !important;
  position:absolute; top:4px; bottom:4px; left:-5px; width:5px; z-index:1;
  background:linear-gradient(90deg,#d3d5da 0%,#eceef1 55%,#fff 100%);
  border-radius:3px 0 0 3px;
  transform:rotateY(-68deg); transform-origin:right center;
}
/* soft sheen across the cover, catching the light at this angle */
.page-1::before{
  content:'' !important; display:block !important;
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:11px;
  background:linear-gradient(118deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 46%,
    rgba(255,255,255,.8) 50%, rgba(255,255,255,.5) 55%, rgba(255,255,255,0) 70%);
  opacity:.5; mix-blend-mode:overlay;
  transition:opacity 620ms ease, background-position 620ms ease;
}
.msdl-download-mockup:hover .page-1::before{ opacity:.85; }

/* contact shadow on the ground plane */
.msdl-download-mockup::after{
  content:'' !important; display:block !important;
  position:absolute; left:50%; bottom:26px; width:210px; height:26px;
  transform:translateX(-50%) rotateX(74deg);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(17,18,20,.26) 0%, rgba(17,18,20,.10) 46%, transparent 74%);
  filter:blur(9px); z-index:0; pointer-events:none;
}
.msdl-doc-chip{ background:#111214 !important; box-shadow:0 3px 8px rgba(17,18,20,.28) !important; }
.msdl-doc-pdf-tag{ background:var(--sl-red) !important; box-shadow:0 3px 10px rgba(193,39,45,.32) !important; }

@media (prefers-reduced-motion:reduce){
  .msdl-doc-stack{ transition:none !important; }
}

/* ══ Document: straight on, symmetric ═══════════════════════════════ */
.msdl-download-mockup{ perspective:none !important; padding:20px 0 48px !important; }
.msdl-doc-stack{
  transform:none !important; transform-style:flat !important;
  animation:none !important; transition:transform 420ms cubic-bezier(.22,1,.36,1) !important;
  width:250px !important; height:326px !important; margin:0 auto !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{ transform:translateY(-6px) !important; }
/* the stack reads face-on: each sheet centred and slightly inset */
.page-3{ transform:scale(.938) !important; background:#e4e5ea !important; }
.page-2{ transform:scale(.969) !important; background:#eff0f3 !important; }
.page-1{ transform:none !important;
  box-shadow:0 2px 3px rgba(17,18,20,.05),0 10px 22px rgba(17,18,20,.07),
             0 28px 56px rgba(17,18,20,.10) !important; }
.page-1::after{ display:none !important; }            /* spine only made sense at an angle */
.page-1::before{ display:none !important; }
.msdl-download-mockup::after{
  content:'' !important; display:block !important;
  position:absolute; left:50%; bottom:22px; width:186px; height:20px;
  transform:translateX(-50%) !important;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(17,18,20,.20) 0%, rgba(17,18,20,.07) 48%, transparent 74%);
  filter:blur(8px); z-index:0; pointer-events:none;
}

/* ══ One type system, taken from the hero ═══════════════════════════
   Hero: Montserrat, h1 900 / kicker 700 uppercase 2.5px tracking.
   Every section heading and label now uses the same construction.
   ═══════════════════════════════════════════════════════════════════ */
.msdl-product-head h2,.msdl-apps-head h2,.msdl-news-head h2,
.msdl-download-head-row h2{
  font-family:'Montserrat',sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(30px,3.6vw,46px) !important;
  line-height:1.06 !important;
  letter-spacing:-0.5px !important;
  color:var(--sl-ink) !important;
}
/* section labels built exactly like the hero kicker */
.msdl-section-label-arc span{
  font-family:'Montserrat',sans-serif !important;
  font-weight:700 !important; font-size:clamp(11px,1.2vw,13px) !important;
  letter-spacing:2.5px !important; text-transform:uppercase !important;
  color:var(--sl-red) !important;
}
.msdl-section-label-arc .bar{ width:26px !important; height:2px !important; }

/* supporting copy matches the hero's sub / desc relationship */
.msdl-download-desc{ font-size:clamp(15px,1.35vw,17px) !important; line-height:1.7 !important;
  color:var(--sl-body) !important; }
.msdl-feature-title{ font-family:'Montserrat',sans-serif !important; font-weight:700 !important;
  letter-spacing:-0.2px !important; }
.msdl-arch-card h4,.msdl-spec-card h4{
  font-family:'Montserrat',sans-serif !important; font-weight:700 !important;
  letter-spacing:2.2px !important; text-transform:uppercase !important; font-size:11.5px !important;
  color:var(--sl-ink) !important; }
.msdl-apps-featured-copy h3{ font-family:'Montserrat',sans-serif !important; font-weight:800 !important;
  letter-spacing:-0.3px !important; }
.msdl-news-title{ font-family:'Montserrat',sans-serif !important; font-weight:700 !important;
  letter-spacing:-0.2px !important; }
.msdl-footer-col h4{ font-family:'Montserrat',sans-serif !important; font-weight:700 !important;
  letter-spacing:2.2px !important; }

/* one vertical rhythm across every section, as in the hero */
.msdl-product,.msdl-apps,.msdl-news{ padding:104px 32px !important; }
.msdl-product-head,.msdl-apps-head,.msdl-news-head{ margin-bottom:56px !important; }

/* ══ Product Brief — dimensional, face-on ═══════════════════════════
   Depth without rotation: the page block is visible as stacked sheet
   edges below the cover, so it reads as a physical object while
   staying perfectly symmetric left-to-right.
   ═══════════════════════════════════════════════════════════════════ */
.msdl-download-mockup{ perspective:none !important; padding:26px 0 66px !important; }
.msdl-doc-stack{
  transform:none !important; animation:none !important;
  width:252px !important; height:322px !important; margin:0 auto !important;
  transition:transform 400ms cubic-bezier(.22,1,.36,1) !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{ transform:translateY(-7px) !important; }

/* the two rear sheets peek evenly on both sides — symmetric */
.page-3{ transform:scale(.955) !important; background:#dfe1e6 !important;
  box-shadow:none !important; border-radius:11px !important; }
.page-2{ transform:scale(.978) !important; background:#edeef1 !important;
  box-shadow:none !important; border-radius:11px !important; }

/* the cover, with the page block stacked beneath it as real sheet edges */
.page-1{
  transform:none !important; background:#fff !important; border-radius:11px !important;
  box-shadow:
    /* sheet edges — alternating paper and shadow line, symmetric */
    0 5px 0 -1px #ffffff,  0 6px 0 -1px #d6d8dd,
    0 11px 0 -2px #ffffff, 0 12px 0 -2px #d0d3d9,
    0 17px 0 -3px #ffffff, 0 18px 0 -3px #cacdd4,
    0 23px 0 -4px #ffffff, 0 24px 0 -4px #c4c8cf,
    0 29px 0 -5px #ffffff, 0 30px 0 -5px #bec2ca,
    /* ambient depth */
    0 12px 22px rgba(17,18,20,.07),
    0 34px 60px rgba(17,18,20,.13),
    0 70px 110px rgba(17,18,20,.08) !important;
}
/* top-edge highlight: the light catching the leading sheet */
.page-1::before{
  content:'' !important; display:block !important;
  position:absolute; top:0; left:0; right:0; height:34%; z-index:4;
  pointer-events:none; border-radius:11px 11px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);
  opacity:.45;
}
.page-1::after{ display:none !important; }

/* grounded contact shadow, centred */
.msdl-download-mockup::after{
  content:'' !important; display:block !important;
  position:absolute; left:50%; bottom:26px; width:196px; height:22px;
  transform:translateX(-50%) !important;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(17,18,20,.24) 0%, rgba(17,18,20,.09) 46%, transparent 74%);
  filter:blur(9px); z-index:0; pointer-events:none;
}
.msdl-doc-chip{ background:#111214 !important;
  box-shadow:0 4px 10px rgba(17,18,20,.30) !important; }
.msdl-doc-pdf-tag{ background:var(--sl-red) !important;
  box-shadow:0 4px 12px rgba(193,39,45,.34) !important; }

/* ══ PDF badge — a real document icon, dimensional, smaller than the box ══ */
.msdl-doc-pdf-tag{
  margin-top:auto !important; align-self:flex-start !important;
  position:relative;
  width:46px !important; height:58px !important;
  padding:0 !important; border-radius:0 !important;
  background:var(--sl-red) !important;
  /* page silhouette with the corner cut away */
  clip-path:polygon(0 0, 66% 0, 100% 30%, 100% 100%, 0 100%);
  display:flex !important; align-items:flex-end; justify-content:center;
  font-size:11px !important; font-weight:800 !important; letter-spacing:.6px !important;
  color:#fff !important; line-height:1;
  padding-bottom:9px !important;
  /* extruded edge + ambient depth */
  filter:
    drop-shadow(0 1px 0 #9d1f24)
    drop-shadow(0 2px 0 #8d1c20)
    drop-shadow(0 6px 10px rgba(17,18,20,.24))
    drop-shadow(0 14px 22px rgba(17,18,20,.16));
  box-shadow:none !important;
  transition:transform 300ms cubic-bezier(.22,1,.36,1), filter 300ms ease;
}
/* the folded corner, lighter, catching the light */
.msdl-doc-pdf-tag::after{
  content:''; position:absolute; top:0; right:0;
  width:34%; height:30%;
  background:linear-gradient(225deg, #ffffff 0%, #f0d3d4 55%, #dba9ab 100%);
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}
/* soft sheen down the face */
.msdl-doc-pdf-tag::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 52%);
}
.msdl-download-mockup:hover .msdl-doc-pdf-tag{
  transform:translateY(-3px) scale(1.05);
  filter:
    drop-shadow(0 1px 0 #9d1f24)
    drop-shadow(0 2px 0 #8d1c20)
    drop-shadow(0 9px 14px rgba(17,18,20,.28))
    drop-shadow(0 20px 30px rgba(17,18,20,.18));
}

/* ══ Download section: form balanced against the copy ══════════════ */
.msdl-download-grid{
  align-items:center !important;
  gap:72px !important;
}
.msdl-download-mockup{ padding:8px 0 44px !important; }
.msdl-download-head-row{ margin-top:8px; }
.msdl-download-desc{ max-width:440px; }
.msdl-form{ margin:0 !important; }
@media (max-width:900px){
  .msdl-download-grid{ align-items:start !important; gap:44px !important; }
}

/* ══ Product Brief — PDF mark replaces the document mockup ═════════ */
.msdl-download-mockup{ perspective:none !important; padding:18px 0 38px !important;
  display:flex !important; justify-content:center !important; }
.msdl-download-mockup::before,.msdl-download-mockup::after{ display:none !important; }
.msdl-doc-stack{
  width:190px !important; height:auto !important; margin:0 auto !important;
  transform:none !important; animation:none !important; box-shadow:none !important;
  background:none !important; border:none !important;
  transition:transform 340ms cubic-bezier(.22,1,.36,1), filter 340ms ease !important;
  filter:
    drop-shadow(0 2px 0 rgba(17,18,20,.15))
    drop-shadow(0 10px 18px rgba(17,18,20,.16))
    drop-shadow(0 26px 42px rgba(17,18,20,.12));
}
.msdl-pdf-mark{ width:100%; height:auto; display:block; overflow:visible; }
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-6px) !important;
  filter:
    drop-shadow(0 2px 0 rgba(17,18,20,.15))
    drop-shadow(0 14px 24px rgba(17,18,20,.20))
    drop-shadow(0 34px 54px rgba(17,18,20,.15));
}
@media (prefers-reduced-motion:reduce){ .msdl-doc-stack{ transition:none !important; } }

/* ══ PDF mark — solid sheet, dimensional, static ═══════════════════ */
.msdl-doc-stack{
  width:158px !important; height:auto !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.45))
    drop-shadow(0 2px 0 rgba(120,20,24,.28))
    drop-shadow(0 8px 14px rgba(17,18,20,.16))
    drop-shadow(0 22px 34px rgba(17,18,20,.14))
    drop-shadow(0 44px 64px rgba(17,18,20,.10)) !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-7px) !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.45))
    drop-shadow(0 2px 0 rgba(120,20,24,.28))
    drop-shadow(0 12px 20px rgba(17,18,20,.19))
    drop-shadow(0 30px 46px rgba(17,18,20,.16))
    drop-shadow(0 58px 84px rgba(17,18,20,.11)) !important;
}

/* ══ Download: both columns finish on the same baseline ═══════════ */
.msdl-download-grid{ align-items:end !important; gap:80px !important; }
.msdl-download-mockup{ padding:6px 0 40px !important; justify-content:flex-start !important; }
.msdl-download-desc{ margin-bottom:0 !important; }
@media (max-width:900px){ .msdl-download-grid{ align-items:start !important; gap:44px !important; } }

/* ══ Apple-grade refinement ═══════════════════════════════════════ */

/* type: tighter tracking on display sizes, looser on small caps */
.msdl-product-head h2,.msdl-apps-head h2,.msdl-news-head h2,.msdl-download-head-row h2{
  letter-spacing:-1.2px !important; line-height:1.05 !important; }
.msdl-download-head-row h2{ margin-bottom:18px !important; }
.msdl-download-desc{ font-size:17px !important; line-height:1.66 !important; color:#6b6e76 !important; }

/* form: quieter chrome, larger touch targets, calm focus */
.msdl-form{ border-radius:18px !important; border:1px solid #ebecef !important;
  box-shadow:0 1px 2px rgba(17,18,20,.03), 0 18px 44px rgba(17,18,20,.06) !important;
  padding:36px 34px 30px !important; }
.msdl-form::before{ height:3px !important; border-radius:18px 18px 0 0 !important; }
.msdl-form-field input{
  border:1px solid #e2e3e8 !important; border-radius:10px !important;
  padding:13px 14px !important; font-size:14.5px !important;
  transition:border-color 180ms ease, box-shadow 180ms ease !important; }
.msdl-form-field input:focus{
  border-color:var(--sl-red) !important; outline:none !important;
  box-shadow:0 0 0 3px rgba(193,39,45,.12) !important; }
.msdl-form-field label{ font-size:12.5px !important; font-weight:600 !important;
  color:#3d4046 !important; letter-spacing:0 !important; margin-bottom:7px !important; }
.msdl-form-submit{ border-radius:10px !important; padding:15px !important;
  font-size:13px !important; letter-spacing:1.4px !important; }
.msdl-form-microtrust{ font-size:11.5px !important; color:#8c8f97 !important; line-height:1.55 !important; }
.msdl-form-consent span{ font-size:13px !important; color:#5c5f66 !important; }

/* section rhythm, evened out */
.msdl-download{ padding:104px 32px !important; }

/* == PDF mark: small, resting under the copy ======================
   Gated-asset pages put a compact file mark with the description so
   the reader can see what the asset is. Repositioned with flex order,
   markup untouched.
   ================================================================= */
.msdl-download-grid > div:first-child{
  display:flex; flex-direction:column; align-items:flex-start;
}
.msdl-download-grid > div:first-child > .msdl-section-label-arc{ order:1; }
.msdl-download-grid > div:first-child > .msdl-download-head-row{ order:2; }
.msdl-download-grid > div:first-child > .msdl-download-desc{ order:3; }
.msdl-download-grid > div:first-child > .msdl-download-mockup{ order:4; }

.msdl-download-mockup{
  display:flex !important; justify-content:flex-start !important; align-items:center !important;
  padding:0 !important; margin:32px 0 0 !important; max-width:none !important;
  background:none !important; border:none !important; box-shadow:none !important;
}
.msdl-download-mockup::before,
.msdl-download-mockup::after{ display:none !important; }

.msdl-doc-stack{
  width:44px !important; height:auto !important; margin:0 !important;
  transform:none !important; animation:none !important;
  transition:transform 240ms cubic-bezier(.22,1,.36,1), filter 240ms ease !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.42))
    drop-shadow(0 3px 7px rgba(17,18,20,.20))
    drop-shadow(0 10px 18px rgba(17,18,20,.13)) !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-3px) !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.42))
    drop-shadow(0 5px 10px rgba(17,18,20,.24))
    drop-shadow(0 14px 24px rgba(17,18,20,.16)) !important;
}

.msdl-download-grid{ align-items:center !important; }
.msdl-download-desc{ margin-bottom:0 !important; }

/* ================================================================
   APPLE PASS - one design system, keyed to the hero
   Ease, radius, shadow and rhythm are defined once and used
   everywhere, so every section feels like the same object.
   ================================================================ */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --r-card:18px;
  --r-pill:980px;
  --shadow-rest:0 1px 2px rgba(17,18,20,.04), 0 12px 32px rgba(17,18,20,.06);
  --shadow-lift:0 2px 4px rgba(17,18,20,.05), 0 24px 56px rgba(17,18,20,.10);
}
html{ scroll-behavior:smooth; }

/* -- Nav: glass, hairline, animated link underlines ------------- */
.msdl-nav{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(17,18,20,.08) !important;
}
.msdl-nav-links a{
  position:relative; transition:color 200ms var(--ease) !important;
}
.msdl-nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
  background:var(--sl-ink); transition:right 260ms var(--ease);
}
.msdl-nav-links a:hover{ color:var(--sl-ink) !important; }
.msdl-nav-links a:hover::after{ right:0; }

/* -- Buttons: Apple pill ---------------------------------------- */
.msdl-btn-cta, .msdl-form-submit{
  border-radius:var(--r-pill) !important;
  transition:transform 260ms var(--ease), background 200ms var(--ease), box-shadow 260ms var(--ease) !important;
}
.msdl-btn-cta:hover, .msdl-form-submit.is-ready:hover{
  transform:scale(1.035);
  box-shadow:0 8px 24px rgba(193,39,45,.28) !important;
}
.msdl-btn-cta:active, .msdl-form-submit.is-ready:active{ transform:scale(.985); }

/* -- Hero: premium hover, still calm ---------------------------- */
.msdl-hero-text h1{
  transition:letter-spacing 600ms var(--ease), text-shadow 600ms var(--ease);
  cursor:default;
}
.msdl-hero:hover .msdl-hero-text h1{
  letter-spacing:.055em;
  text-shadow:0 2px 32px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.6);
}
.msdl-hero-media img{
  transition:transform 1200ms var(--ease), filter 1200ms var(--ease);
}
.msdl-hero:hover .msdl-hero-media img{
  transform:scale(1.025);
  filter:brightness(1.04) saturate(1.05);
}
.msdl-hero-badges span{
  transition:background 220ms var(--ease), transform 220ms var(--ease), border-color 220ms var(--ease);
}
.msdl-hero-badges span:hover{
  background:rgba(255,255,255,.14); transform:translateY(-2px);
  border-color:rgba(255,255,255,.4);
}
.msdl-hero-stats > div{ transition:transform 240ms var(--ease); }
.msdl-hero-stats > div:hover{ transform:translateY(-3px); }

/* -- Product: quieter still ------------------------------------- */
.msdl-stat-strip{ border:none !important; }
.msdl-stat{ border-right:1px solid var(--sl-hair) !important; padding:10px 22px !important; }
.msdl-stat:last-child{ border-right:none !important; }
.msdl-stat:hover{ background:transparent !important; }
.msdl-stat-num{ font-size:30px !important; letter-spacing:-.5px; }
.msdl-stat-label{ font-size:12px !important; margin-top:4px !important; }

.msdl-feature-row{ padding:22px 24px !important; border-radius:var(--r-card) !important; }
.msdl-feature-row:hover{ background:#fff !important; box-shadow:var(--shadow-rest); }
.msdl-feature-desc{ font-size:14px !important; }

.msdl-arch-card,.msdl-spec-card{
  border-radius:var(--r-card) !important;
  box-shadow:none !important; border:1px solid var(--sl-hair) !important;
}
.msdl-arch-card:hover,.msdl-spec-card:hover{
  box-shadow:var(--shadow-lift) !important; transform:translateY(-4px) !important;
  border-color:transparent !important;
}

/* -- Applications / news / form: same object language ---------- */
.msdl-apps-featured{ border-radius:var(--r-card) !important; }
.msdl-apps-card{ border-radius:var(--r-card) !important;
  transition:transform 300ms var(--ease), box-shadow 300ms var(--ease) !important; }
.msdl-apps-card:hover{ transform:translateY(-5px) scale(1.012) !important;
  box-shadow:var(--shadow-lift) !important; }
.msdl-news-card{ border-radius:var(--r-card) !important; }
.msdl-news-card:hover{ transform:translateY(-5px) !important; box-shadow:var(--shadow-lift) !important; }
.msdl-form{ border-radius:var(--r-card) !important; box-shadow:var(--shadow-rest) !important; }
.msdl-resource, .msdl-download-mockup{ border-radius:var(--r-card); }

/* -- Reveal easing matches everything else ---------------------- */
.msdl-reveal{ transition-timing-function:var(--ease) !important; }

@media (prefers-reduced-motion:reduce){
  .msdl-hero:hover .msdl-hero-text h1,
  .msdl-hero:hover .msdl-hero-media img{ transition:none; transform:none; letter-spacing:inherit; }
}

/* -- Download: both columns start on the same top line ----------- */
.msdl-download-grid{ align-items:start !important; }
.msdl-download-grid > div:first-child{ padding-bottom:0 !important; }
.msdl-download-grid > div:first-child > .msdl-section-label-arc{ margin-top:0 !important; }
.msdl-form{ margin-top:0 !important; }

/* -- PDF mark sits at the end of the heading -------------------- */
.msdl-download-head-row{
  display:flex !important; align-items:flex-end !important; gap:20px !important;
  flex-wrap:wrap;
}
.msdl-download-head-row h2{ margin:0 !important; }

/* the mark rides on a small plate in the page's object language  */
.msdl-download-head-row .msdl-download-mockup{
  order:initial !important; margin:0 0 6px !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:64px; height:64px; flex:0 0 auto;
  background:#fff !important; border:1px solid var(--sl-hair) !important;
  border-radius:var(--r-card) !important;
  box-shadow:var(--shadow-rest) !important;
  transition:transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease) !important;
  cursor:default;
}
.msdl-download-head-row .msdl-download-mockup:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift) !important;
  border-color:transparent !important;
}
.msdl-download-head-row .msdl-doc-stack{
  width:34px !important; margin:0 !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.40))
    drop-shadow(0 2px 5px rgba(17,18,20,.18)) !important;
}
.msdl-download-head-row .msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-1px) !important;
}
.msdl-download-desc{ margin-top:22px !important; }
@media (max-width:900px){
  .msdl-download-head-row .msdl-download-mockup{ width:56px; height:56px; }
  .msdl-download-head-row .msdl-doc-stack{ width:30px !important; }
}

/* -- PDF mark: beside the brief, on the line it ends ------------- */
.msdl-download-grid > div:first-child{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  column-gap:26px;
}
.msdl-download-grid > div:first-child > .msdl-section-label-arc{ grid-column:1 / -1; order:0; }
.msdl-download-grid > div:first-child > .msdl-download-head-row{ grid-column:1 / -1; order:0; }
.msdl-download-grid > div:first-child > .msdl-download-desc{ grid-column:1; order:0; }
.msdl-download-grid > div:first-child > .msdl-download-mockup{
  grid-column:2; align-self:end; order:0;
  margin:0 0 2px !important;
}

/* -- Premium 3D, still face-on ----------------------------------- */
.msdl-download-mockup{ perspective:600px !important; }
.msdl-doc-stack{
  width:64px !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.50))
    drop-shadow(0 2px 0 rgba(110,17,21,.42))
    drop-shadow(0 3px 0 rgba(100,15,19,.30))
    drop-shadow(0 6px 10px rgba(17,18,20,.20))
    drop-shadow(0 16px 26px rgba(17,18,20,.16))
    drop-shadow(0 34px 48px rgba(17,18,20,.10)) !important;
  transition:transform 320ms var(--ease), filter 320ms var(--ease) !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-5px) rotateX(7deg) !important;
  filter:
    drop-shadow(0 1px 0 rgba(120,20,24,.50))
    drop-shadow(0 2px 0 rgba(110,17,21,.42))
    drop-shadow(0 3px 0 rgba(100,15,19,.30))
    drop-shadow(0 10px 16px rgba(17,18,20,.24))
    drop-shadow(0 24px 38px rgba(17,18,20,.18))
    drop-shadow(0 46px 66px rgba(17,18,20,.12)) !important;
}
@media (max-width:900px){
  .msdl-download-grid > div:first-child{ display:flex !important; flex-direction:column !important; }
  .msdl-download-mockup{ margin-top:24px !important; }
}

/* -- Hero benefits: premium hover ------------------------------- */
.msdl-benefit{
  position:relative; border-radius:16px;
  transition:transform 320ms var(--ease), background 320ms var(--ease),
             box-shadow 320ms var(--ease);
}
/* glass panel that materialises under the item */
.msdl-benefit::before{
  content:''; position:absolute; inset:0; border-radius:16px; z-index:-1;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transform:scale(.97);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease);
}
.msdl-benefit:hover{ transform:translateY(-4px); }
.msdl-benefit:hover::before{ opacity:1; transform:scale(1); }

/* red rule slides in along the top, keyed to the brand */
.msdl-benefit::after{
  content:''; position:absolute; top:0; left:28px; right:100%; height:2px;
  border-radius:2px; background:var(--sl-red);
  transition:right 380ms var(--ease);
}
.msdl-benefit:hover::after{ right:28px; }

/* icon: lifts and brightens; title sharpens to pure white */
.msdl-benefit-icon{ transition:transform 320ms var(--ease), filter 320ms var(--ease); }
.msdl-benefit:hover .msdl-benefit-icon{
  transform:translateY(-2px) scale(1.07);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)) brightness(1.08);
}
.msdl-benefit-title{ transition:color 240ms var(--ease); }
.msdl-benefit:hover .msdl-benefit-title{ color:#ffffff; }
.msdl-benefit-desc{ transition:color 240ms var(--ease); }
.msdl-benefit:hover .msdl-benefit-desc{ color:rgba(255,255,255,.82); }

@media (prefers-reduced-motion:reduce){
  .msdl-benefit, .msdl-benefit::before, .msdl-benefit::after,
  .msdl-benefit-icon{ transition:none !important; }
  .msdl-benefit:hover{ transform:none; }
}

/* -- Product image: 20% larger ---------------------------------- */
.msdl-chip-center img{ transform:scale(1.2) !important; transform-origin:center; }
.msdl-feature-grid:hover .msdl-chip-center img{ transform:scale(1.224) !important; }
.msdl-chip-center{ overflow:visible !important; }

/* -- squircle tile: shadow tuned for the new body ---------------- */
.msdl-doc-stack{
  width:72px !important;
  filter:
    drop-shadow(0 1px 1px rgba(90,10,14,.45))
    drop-shadow(0 6px 12px rgba(17,18,20,.22))
    drop-shadow(0 18px 30px rgba(17,18,20,.17))
    drop-shadow(0 38px 54px rgba(17,18,20,.11)) !important;
}
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-5px) rotateX(7deg) !important;
  filter:
    drop-shadow(0 1px 1px rgba(90,10,14,.45))
    drop-shadow(0 10px 18px rgba(17,18,20,.26))
    drop-shadow(0 26px 42px rgba(17,18,20,.19))
    drop-shadow(0 50px 70px rgba(17,18,20,.12)) !important;
}

/* -- product-render scale --------------------------------------- */
.msdl-doc-stack{
  width:210px !important;
  filter:none !important;                 /* the scene carries its own light */
}
.msdl-download-mockup:hover .msdl-doc-stack{
  transform:translateY(-6px) !important;
  filter:none !important;
}
#download .msdl-download-desc{ max-width:350px !important; }
.msdl-download-grid > div:first-child{ column-gap:18px !important; }
/* ══ Symmetry + card proportion tweaks (2026-08-28) ═════════════
   1) Feature rows align to the top of their grid track so the left
      and right titles sit on the same line, regardless of text length.
   2) Architecture and Specifications cards: equal width (1fr/1fr),
      wider row, tighter padding = same weight, less height.       */
.msdl-feature-row{ align-self:stretch; align-items:flex-start; }
.msdl-feature-icon{ margin-top:4px; }

.msdl-arch-row{ grid-template-columns:1fr 1fr !important; max-width:1080px !important; }
.msdl-arch-card,.msdl-spec-card{ padding:22px 26px !important; }
.msdl-spec-card li{ padding:10px 0 !important; }
.msdl-spec-card .value{ line-height:1.5; }


/* ══ Download layout per client deck: big PDF icon on top, copy below ══ */
.msdl-download-grid > div:first-child{ display:flex; flex-direction:column; align-items:flex-start; }
.msdl-download-grid > div:first-child .msdl-section-label-arc{ order:0; }
.msdl-download-grid > div:first-child .msdl-download-mockup{ order:1; align-self:stretch; padding:10px 0 26px !important; }
.msdl-download-grid > div:first-child .msdl-download-head-row{ order:2; margin-top:0; }
.msdl-download-grid > div:first-child .msdl-download-desc{ order:3; }
.msdl-doc-stack{ max-width:470px; width:100%; margin:0 auto; }

/* ══ Unified TM: same superscript position for every MSDL instance ══ */
.msdl-tm{
  /* MEASURED from the font files (Inter TM-glyph yMax=0.7275em, Montserrat cap=0.700em):
     with a clean baseline, this top puts the TM ink-top ON the cap line, never past it. */
  font-family:'Inter', sans-serif !important;
  font-size:.55em !important; line-height:0 !important; letter-spacing:0 !important;
  vertical-align:baseline !important;
  position:relative !important;
  top:-0.545em !important;
}

/* ══ Stat strip: two of the four stats are phrases, not numbers —
   render them as plain static text, same size/weight as the counters
   they replace, so the row still reads as one consistent set. ══ */
.msdl-stat-static{
  font-size:15px !important; font-weight:700 !important;
  color:var(--sl-body) !important; letter-spacing:0 !important;
  line-height:1.2 !important;
  min-height:30px !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  width:100% !important;
}

/* ══ FINAL download-section layout (2026-08-29, rev 2) — exactly per
   the approved screenshot: kicker, heading, then icon LEFT with the
   description BESIDE it, vertically centred. This block out-!importants
   all earlier layout generations; edit the section's layout HERE only. ══ */
.msdl-download-grid > div:first-child{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  column-gap:46px !important;
  align-items:center !important;
}
.msdl-download-grid > div:first-child > .msdl-section-label-arc{
  grid-column:1 / -1 !important; grid-row:1 !important; order:0 !important;
}
.msdl-download-grid > div:first-child > .msdl-download-head-row{
  grid-column:1 / -1 !important; grid-row:2 !important; order:0 !important;
  margin:14px 0 34px !important;
}
.msdl-download-grid > div:first-child > .msdl-download-mockup{
  grid-column:1 !important; grid-row:3 !important; order:0 !important;
  align-self:center !important; justify-content:flex-start !important;
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
}
.msdl-download-grid > div:first-child > .msdl-download-desc{
  grid-column:2 !important; grid-row:3 !important; order:0 !important;
  align-self:center !important; margin:0 !important;
}
#download .msdl-download-desc{ max-width:400px !important; }
.msdl-doc-stack{ max-width:205px !important; width:100% !important; margin:0 !important; }

@media (max-width:760px){
  .msdl-download-grid > div:first-child{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; }
  .msdl-download-grid > div:first-child > .msdl-download-mockup{ align-self:center !important; padding:14px 0 !important; }
  #download .msdl-download-desc{ max-width:none !important; }
}

/* Mobile guard for the rev-2 download layout: below 640px the icon+desc
   row stacks again — icon centred on top, description full width below. */
@media (max-width:640px){
  .msdl-download-grid > div:first-child{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  }
  .msdl-download-grid > div:first-child > .msdl-download-mockup{
    align-self:center !important; padding:6px 0 18px !important;
  }
  #download .msdl-download-desc{ max-width:100% !important; }
  .msdl-doc-stack{ max-width:230px !important; }
}

/* ══ Feature icons: the fan-arrow glyph is drawn much shorter (69px vs ~104px)
   than its three siblings inside the same 128px canvas — scale it up to the
   canvas width limit and lift it so all four glyph tops align. ══ */
.msdl-feature-icon img[alt="Dual-Port MIPI D-PHY Serializer"]{
  transform: translateY(-6px) scale(1.22);
}

/* ══ Product video section (hero → overview) — quiet, premium, light ══
   Click-to-play with poster + preload=metadata: nothing heavy loads
   until the visitor asks for it. Frame matches the page's card system. */
.msdl-video{ background:#fff; padding:76px 32px 4px; }
.msdl-video-inner{ max-width:1080px; margin:0 auto; }
.msdl-video .msdl-section-label-arc{ justify-content:center; margin-bottom:30px; }
.msdl-video-frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-card, 20px); background:#0f1013;
  box-shadow: 0 30px 70px -22px rgba(17,18,20,.30), 0 8px 22px rgba(17,18,20,.10);
}
.msdl-video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.msdl-video-play{
  position:absolute; inset:0; margin:auto; width:76px; height:76px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; padding:0; cursor:pointer;
  transition:transform 220ms ease, opacity 220ms ease;
}
.msdl-video-play svg{ filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); transition:transform 220ms ease; }
.msdl-video-play:hover svg{ transform:scale(1.07); }
.msdl-video-play:hover circle{ fill:rgba(193,39,45,.92); stroke:rgba(255,255,255,.9); }
.msdl-video-play:focus-visible{ outline:2px solid #C1272D; outline-offset:4px; border-radius:50%; }
.msdl-video-play.is-hidden{ opacity:0; pointer-events:none; }
@media (max-width:640px){
  .msdl-video{ padding:52px 20px 0; }
  .msdl-video-frame{ border-radius:14px; }
  .msdl-video-play{ width:64px; height:64px; }
  .msdl-video-play svg{ width:64px; height:64px; }
}

/* ══ Trustbar: force every compliance logo to the same pure white
   as the HDMI mark — no gray originals, one uniform tone. ══ */
.msdl-trustbar img{ filter:brightness(0) invert(1) !important; opacity:.92 !important; }

/* ══ Trustbar optical centring: nudge logos whose artwork sits
   off-centre inside its own file, so all marks share one centre line.
   (USB's tagline drags its box down = word rides high; MIPI's rides low.) ══ */
.msdl-trustbar img[alt="USB Implementers Forum"]{ transform:translateY(3px); }
.msdl-trustbar img[alt="MIPI Alliance"]{ transform:translateY(-3px); }

/* ═══════════════════════════════════════════════════════════════════════
   CLIENT ROUND — 31 Aug 2026 (post domain meeting). LAST BLOCK, WINS.
   (1) "Demo Video" label and (2) news eyebrow removal are HTML-only.
   (3) Chip card spans both feature rows → centred on the benefits by
       construction; rows share grid tracks → icons/titles align left/right.
   (4) Video: light Apple-style shadow + a real <img> poster overlay.
   (5) Stat strip: one size, one weight, one colour for all four headlines.
   (6) Light-grey wash (#f5f5f7) on every section except hero + footer,
       replacing the blueprint / hex pattern overlays.
   Edit HERE, not in the older layers above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (6) Page pattern ──────────────────────────────────────────────────
   Original composition (drawn here in CSS, no stock asset): large, soft
   light-grey diagonal planes on Apple grey. Two low-contrast bands cross
   at ±115°, so their overlaps read as the big quiet triangles of the
   reference; a white plane lights the top-left. The first layer fades
   every section's top/bottom edge back to flat grey, so adjacent
   sections join without a seam. Hero + footer stay untouched. */
.msdl-page{ --sl-canvas:#f5f5f7; }
.msdl-video,
.msdl-product,
.msdl-apps,
.msdl-news,
.msdl-download{
  background:
    /* edge equalizer: every section starts/ends flat grey → seamless */
    linear-gradient(180deg,
      #f5f5f7 0, rgba(245,245,247,0) 130px,
      rgba(245,245,247,0) calc(100% - 130px), #f5f5f7 100%),
    /* crossing diagonal bands (the "triangles") */
    linear-gradient(115deg,
      rgba(226,227,232,0) 28%, rgba(226,227,232,.55) 28.35%,
      rgba(226,227,232,.55) 47%, rgba(226,227,232,0) 47.35%),
    linear-gradient(245deg,
      rgba(231,232,236,0) 20%, rgba(231,232,236,.5) 20.35%,
      rgba(231,232,236,.5) 40%, rgba(231,232,236,0) 40.35%),
    /* broad soft light plane from the top-left, grey answer from lower-right */
    linear-gradient(115deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(295deg, rgba(233,233,238,.5) 0%, rgba(233,233,238,0) 50%),
    var(--sl-canvas) !important;
  border-top:none !important;
}
/* Surfaces on grey: solid white so cards read crisply (were 85–88% white). */
.msdl-arch-card,.msdl-spec-card,.msdl-news-card,.msdl-form{ background:#fff !important; }
.msdl-feature-row:hover{ background:#fff !important; }

/* ── (4) Video ─────────────────────────────────────────────────────── */
.msdl-video{ padding:76px 32px 28px !important; position:relative; z-index:2; }
.msdl-product{ padding-top:48px !important; }
.msdl-video-frame{
  border-radius:22px !important;
  background:#0f1013 !important;
  box-shadow:
    0 0 0 1px rgba(17,18,20,.05),
    0 6px 16px rgba(17,18,20,.06),
    0 24px 60px 4px rgba(17,18,20,.13) !important;
}
.msdl-video-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1; pointer-events:none;
  transition:opacity 420ms ease;
}
.msdl-video-poster.is-hidden{ opacity:0; }
.msdl-video-play{ z-index:2; }

/* ── (5) Stat strip ────────────────────────────────────────────────── */
.msdl-stat-strip{ max-width:840px !important; }
.msdl-stat{ padding:12px 18px !important; }
.msdl-stat .msdl-stat-num,
.msdl-stat .msdl-stat-num span,
.msdl-stat .msdl-stat-num.msdl-stat-static{
  font-size:clamp(16px,1.4vw,18px) !important;
  font-weight:700 !important;
  color:var(--sl-ink) !important;
  letter-spacing:-.2px !important;
  line-height:1.25 !important;
}
.msdl-stat .msdl-stat-num{ display:block !important; min-height:0 !important; width:auto !important; }
.msdl-stat .msdl-stat-num.msdl-stat-static{ display:block !important; min-height:0 !important; }
.msdl-stat .msdl-stat-num span{ margin-left:0 !important; }
.msdl-stat .msdl-stat-num span + span{ margin-left:.24em !important; }
.msdl-stat .msdl-stat-label{
  font-size:12.5px !important; color:var(--sl-body) !important;
  margin-top:5px !important; letter-spacing:0 !important; line-height:1.4 !important;
}
@media (max-width:900px){ .msdl-stat{ padding:12px 8px !important; } }

/* ── (3) Feature grid: shared tracks, chip card in the middle ──────── */
.msdl-feature-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr) !important;
  grid-template-rows:1fr 1fr !important;          /* equal rows → left/right rows align */
  column-gap:0 !important; row-gap:0 !important;
  align-items:start !important;
  margin-bottom:28px !important; padding-bottom:8px !important;
}
.msdl-feature-col{ display:contents !important; }  /* rows become direct grid items */
.msdl-feature-col.left  .msdl-feature-row:nth-child(1){ grid-column:1 !important; grid-row:1 !important; }
.msdl-feature-col.left  .msdl-feature-row:nth-child(2){ grid-column:1 !important; grid-row:2 !important; }
.msdl-feature-col.right .msdl-feature-row:nth-child(1){ grid-column:3 !important; grid-row:1 !important; }
.msdl-feature-col.right .msdl-feature-row:nth-child(2){ grid-column:3 !important; grid-row:2 !important; }
.msdl-feature-row{ align-self:start !important; align-items:flex-start !important; }
.msdl-feature-icon{ margin-top:2px !important; }

/* Chip card — white-to-grey vignette, photo feathered into it. */
.msdl-chip-center{
  grid-column:2 !important; grid-row:1 / span 2 !important;
  align-self:stretch !important; justify-self:center !important;
  position:relative !important; display:block !important;
  width:100% !important; max-width:380px !important; min-height:300px !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  border-radius:28px !important;
  background:#ececef !important;   /* fallback under the overlay vignette */
  box-shadow:
    inset 0 0 0 1px rgba(17,18,20,.045),
    0 4px 12px rgba(17,18,20,.04),
    0 26px 56px -28px rgba(17,18,20,.28) !important;
}
.msdl-chip-center::before,.msdl-chip-center::after{ content:none !important; display:none !important; }
.msdl-chip-glow{ display:none !important; }
/* The feather is an overlay ABOVE the photo (no mask-image: masked groups
   can fail to repaint when the photo loads late, and old Safari lacks
   unprefixed mask). Transparent over the chip, ramping to the card greys —
   this overlay IS the card's vignette, so photo and card can never mismatch. */
.msdl-chip-photo{ position:absolute; inset:0; overflow:hidden; }
.msdl-chip-photo::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(245,245,247,0) 0%, rgba(245,245,247,0) 40%,
    rgba(246,246,248,.55) 62%, rgba(238,238,242,.92) 80%,
    #e2e2e7 92%, #dcdce1 100%);
}
/* The chip sits at (50%, 48%) of the client's photo (measured): pin that
   point to the card centre and oversize the photo so it covers the card. */
.msdl-chip-center .msdl-chip-photo img{
  position:absolute !important; left:50% !important; top:50% !important;
  width:auto !important; height:118% !important; max-width:none !important;
  display:block !important; border-radius:0 !important; z-index:1 !important;
  object-fit:fill !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  filter:none !important;
  transform:translate(-50%,-48%) !important;
  transform-origin:50% 50% !important;
  transition:transform 700ms var(--ease, cubic-bezier(.22,1,.36,1)) !important;
}
.msdl-feature-grid:hover .msdl-chip-center .msdl-chip-photo img{ transform:translate(-50%,-48%) scale(1.04) !important; }
@media (prefers-reduced-motion:reduce){
  .msdl-chip-center .msdl-chip-photo img,.msdl-video-poster{ transition:none !important; }
  .msdl-feature-grid:hover .msdl-chip-center .msdl-chip-photo img{ transform:translate(-50%,-48%) !important; }
}

/* Mobile: one column, chip card first (square), icon-first rows.
   :nth-child(n) matches every row but lifts specificity to (0,4,1),
   so these later rules beat the desktop grid placements above. */
@media (max-width:900px){
  .msdl-feature-grid{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    row-gap:6px !important;
  }
  .msdl-feature-grid .msdl-feature-col .msdl-feature-row:nth-child(n){
    grid-column:1 !important; grid-row:auto !important;
    justify-content:flex-start !important; padding:16px 18px !important;
  }
  .msdl-feature-grid .msdl-feature-col.left .msdl-feature-row:nth-child(n){
    flex-direction:row-reverse !important; justify-content:flex-end !important;
  }
  .msdl-feature-grid .msdl-feature-col .msdl-feature-text{ width:auto !important; text-align:left !important; }
  .msdl-feature-grid .msdl-feature-col .msdl-feature-desc{ text-align:left !important; text-align-last:left !important; }
  .msdl-feature-grid .msdl-chip-center{
    grid-column:1 !important; grid-row:1 !important;
    width:min(100%,380px) !important; min-height:0 !important; aspect-ratio:1/1;
    margin:0 auto 14px !important; align-self:auto !important;
  }
}

/* ═══ NEWS SECTION HIDDEN — client request, 31 Aug 2026 ═══════════════
   The client wants the news section off "for now". Markup stays intact;
   DELETE THIS BLOCK (and nothing else) to bring the section back.
   The footer "News" link stays: it points to the real /news/ page. */
.msdl-news{ display:none !important; }
.msdl-nav a[href="#news"]{ display:none !important; }

/* ═══ HERO MOBILE FIX — 31 Aug 2026 ═══════════════════════════════════
   On phones the hero photo was getting cut off (iOS drops oversized
   composited layers created by the Ken Burns animation + will-change),
   exposing the old EverproX-navy base fill (#1D2088) as a solid block.
   1) Base fill is now near-black ink: even if a device ever clips the
      photo again, the fallback blends with it instead of clashing.
   2) On ≤900px the animated layer is disabled so the cover image paints
      normally, and the tint becomes a bottom-weighted scrim that seats
      the long text block and dissolves into the base by the bottom. */
.msdl-hero{ background:#0b0d12 !important; }
@media (max-width:900px){
  .msdl-hero-bg{
    animation:none !important;
    will-change:auto !important;
    transform:none !important;
  }
  .msdl-hero-bg-tint{
    background:linear-gradient(180deg,
      rgba(4,7,24,.12) 0%, rgba(4,7,24,.30) 38%,
      rgba(6,8,18,.58) 64%, rgba(9,10,16,.86) 90%,
      #0b0d12 100%) !important;
  }
}

/* ═══ APPLE-STYLE SCROLL ENTRANCE — demo video (1 Sept 2026) ═══════════
   The page JS drives --vp from 0 → 1 as the frame travels up the viewport;
   this maps it to a rise + scale, reversing on scroll-up like apple.com.
   --vp defaults to 1 (finished state) so no-JS and reduced-motion visitors
   simply see the frame in place. The old one-shot reveal is neutralised on
   this element so the two transforms don't fight. */
.msdl-video-frame{
  --vp:1;
  opacity:1 !important;
  transition:none !important;
  transform-origin:50% 100% !important;
  transform:
    translate3d(0, calc(36px * (1 - var(--vp))), 0)
    scale(calc(0.955 + 0.045 * var(--vp))) !important;
}
@media (prefers-reduced-motion:reduce){
  .msdl-video-frame{ transform:none !important; }
}

/* ═══ MOBILE FIX — architecture + spec cards (1 Sept 2026) ═════════════
   A late desktop rule (grid-template-columns:1fr 1fr !important) was
   beating the phone breakpoint, so both cards sat side-by-side at half a
   phone width: the spec text wrapped into a tower, the row stretched both
   cards to match, and the spec card ran off the right edge. On ≤900px
   they now stack, spec rows go label-over-value, and the diagram labels
   are bumped so they stay legible at phone width. */
@media (max-width:900px){
  .msdl-arch-row{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
    max-width:none !important;
    align-items:start !important;
  }
  .msdl-arch-card,.msdl-spec-card{
    min-width:0 !important; width:100% !important;
    padding:20px 18px !important;
  }
  .msdl-arch-card-head h4,.msdl-spec-card h4{
    font-size:10.5px !important; letter-spacing:1.8px !important; white-space:normal;
  }
  .msdl-spec-card li{
    flex-direction:column !important; align-items:flex-start !important;
    gap:4px !important; padding:12px 0 !important;
  }
  .msdl-spec-card li .value{ text-align:left !important; }
  /* diagram labels: bumped per box so nothing overflows its rect */
  #msdlArchDiagram g[font-size="12"] text,
  #msdlArchDiagram text[font-size="12"]{ font-size:14px; }
  #msdlArchDiagram text[font-size="9.5"]{ font-size:11px; }
  #msdlArchDiagram text[font-size="8.5"]{ font-size:10px; }
}

/* ═══ PHONE WIDTH — reclaim the padding stack (1 Sept 2026) ════════════
   Section (32px) + inner wrap (32px) per side left cards only 262px wide
   on a 390px phone. Product section now uses 20px at the edge and no
   inner padding on ≤640px → cards ~350px. Also stops iOS Safari's
   automatic text inflation, which was enlarging the card text on the
   client's iPhone beyond the sizes in this stylesheet. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (max-width:640px){
  .msdl-product{ padding-left:20px !important; padding-right:20px !important; }
  .msdl-product .msdl-wrap{ padding-left:0 !important; padding-right:0 !important; }
}

/* ═══ BUTTON FONT (1 Sept 2026) ═══════════════════════════════════════
   Kept from the reverted rounds because it is a defect fix, not a
   weight change: <button> elements fall back to the browser UI font
   (Arial) unless told otherwise. Weight left at the original 700. */
html body .msdl-page form .msdl-form-submit,
.msdl-form-submit{ font-family:'Montserrat','Inter',sans-serif !important; }

/* ═══ NO ORPHAN HYPHENS (1 Sept 2026) ═══════════════════════════════════
   Hyphenated compounds (Next-Generation, D-PHY, Dual-Port, low-power …)
   are wrapped in .nb so a line can never break right after the hyphen;
   the whole word moves to the next line together. */
.msdl-page .nb{ white-space:nowrap; }

/* ═══ VIDEO SHADOW — apple.com style, present but light (1 Sept 2026) ═══
   Even ambient halo on all sides + a soft, bottom-weighted depth layer.
   Overrides the earlier, fainter shadow on the same element. */
.msdl-video-frame{
  box-shadow:
    0 0 0 1px rgba(17,18,20,.06),
    0 0 48px rgba(17,18,20,.10),
    0 14px 30px rgba(17,18,20,.10),
    0 44px 100px -10px rgba(17,18,20,.22) !important;
}

/* ═══ CHIP CARD: CLEAN SQUARE PHOTO (1 Sept 2026) ═══════════════════════
   Client: remove the light vignette around the chip, show the photo
   clean, fit it to the section, and make the card square. The card is
   now a centred 1:1 square (380px on desktop); the photo fills it edge to
   edge with the chip centred; the feather overlay is removed. Rounded
   corners and the soft shadow stay. */
.msdl-chip-center{
  align-self:center !important;
  aspect-ratio:1 / 1;
  height:auto !important; min-height:0 !important;
  width:100% !important; max-width:380px !important;
  background:#0f1013 !important;
}
.msdl-chip-photo::after{ content:none !important; display:none !important; }
.msdl-chip-center .msdl-chip-photo img{
  height:112% !important;
  transform:translate(-50%,-48%) !important;
}
.msdl-feature-grid:hover .msdl-chip-center .msdl-chip-photo img{
  transform:translate(-50%,-48%) scale(1.04) !important;
}

/* ═══ CHIP CARD: MATCH THE SECTION'S CARD LANGUAGE (1 Sept 2026) ═════════
   Same radius as the architecture/spec cards, their red top rule, a
   hairline edge and the video's soft Apple-style shadow, so the dark
   photo sits in the section as one of its cards. */
.msdl-chip-center{
  border-radius:var(--r-card,18px) !important;
  overflow:hidden !important;
  box-shadow:
    0 0 0 1px rgba(17,18,20,.07),
    0 0 40px rgba(17,18,20,.08),
    0 14px 30px rgba(17,18,20,.10),
    0 40px 90px -10px rgba(17,18,20,.22) !important;
}
/* red top rule, like the cards below (re-enables the pseudo-element) */
.msdl-chip-center::before{
  content:'' !important; display:block !important;
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
  width:auto !important; height:3px !important;
  background:var(--sl-red,#C1272D) !important;
  border-radius:0 !important; opacity:1 !important; transform:none !important;
  filter:none !important; box-shadow:none !important; z-index:3 !important;
}

/* ═══ FEATURE GRID: MORE AIR AROUND THE CHIP CARD (1 Sept 2026) ══════════
   Client: icons and benefits a little further from the chip picture. */
@media (min-width:901px){
  .msdl-feature-grid{ column-gap:44px !important; }
}

/* ═══ CHIP CARD: NO RED RULE, CENTRED ON THE BENEFITS (1 Sept 2026) ══════
   Red top rule removed. The card no longer sizes the grid rows (which
   left dead space under row 2 and pushed the card's centre lower than
   the text's). Rows are now content-sized and the card is absolutely
   centred on the middle column — its centre = the benefits' centre. */
.msdl-chip-center::before{ content:none !important; display:none !important; }
@media (min-width:901px){
  .msdl-feature-grid{
    position:relative !important;
    grid-template-rows:auto auto !important;   /* content-sized, still aligned L/R */
    min-height:400px !important;                /* room for the 380px card */
    align-content:center !important;            /* rows centred when shorter than that */
  }
  .msdl-chip-center{
    position:absolute !important;
    left:50% !important; top:50% !important;
    width:380px !important; height:380px !important; min-height:0 !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }
}
@media (min-width:901px){
  /* abspos grid child: pin BOTH column lines so its box is exactly the middle column */
  .msdl-chip-center{ grid-column:2 / 3 !important; grid-row:1 / 3 !important; }
}

/* ═══ CHIP CARD: SOFT WHITE POOL BEHIND IT (1 Sept 2026) ═════════════════
   A large, soft white glow behind the card so the dark square sits in a
   pool of light on the grey pattern, like the glow behind the section
   heading. Painted above the diagonal pattern, below the text and card. */
@media (min-width:901px){
  .msdl-feature-grid::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    left:50%; top:50%; width:780px; height:620px;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 30%,
      rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 72%);
  }
  .msdl-chip-center{ z-index:1 !important; }
}

/* ═══ CHIP CARD GLOW: STRONGER (1 Sept 2026) ════════════════════════════
   Client: more. Bigger pool, brighter core, slower fade, plus a faint
   second ring so the light reaches further into the pattern. */
@media (min-width:901px){
  .msdl-feature-grid::before{
    width:1100px; height:820px;
    background:
      radial-gradient(ellipse at center,
        #ffffff 0%, rgba(255,255,255,.92) 22%,
        rgba(255,255,255,.70) 42%, rgba(255,255,255,.38) 60%,
        rgba(255,255,255,.14) 76%, rgba(255,255,255,0) 90%);
  }
}

/* ═══ PHONE SPACING + ICON MATCH (1 Sept 2026) ═══════════════════════════
   Client (phone view): gaps between sections were 180px (two paddings of
   104 stacking) and 88px above the chip; tightened for phones only.
   The first feature icon (fan-arrow) was a 92px box vs 76px for the
   others — reduced 12% to 81px on all sizes so it reads the same size. */
@media (max-width:640px){
  .msdl-video{ padding-top:48px !important; padding-bottom:20px !important; }
  .msdl-product{ padding-bottom:40px !important; }
  .msdl-apps{ padding-top:48px !important; padding-bottom:48px !important; }
  .msdl-download{ padding-top:56px !important; padding-bottom:64px !important; }
  .msdl-stat-strip{ margin-bottom:40px !important; }
  .msdl-feature-grid{ margin-bottom:16px !important; }
  .msdl-apps-head{ margin-bottom:28px !important; }
}
.msdl-feature-col.left .msdl-feature-row:nth-child(1) .msdl-feature-icon img{
  /* was scale(1.22) ≈ 92px visual; ×0.88 → scale(1.07) ≈ 81px */
  transform:scale(1.07) translateY(-4px) !important;
}

/* ═══ KEEP THE CHIP GLOW UNDER NEIGHBOURING CONTENT (1 Sept 2026) ════════
   The white pool behind the chip card is taller than the grid, so it was
   painting over the stat strip above (and the cards below), washing the
   middle stats out. Neighbours now sit above it. */
.msdl-product-head,.msdl-stat-strip,.msdl-arch-row{ position:relative; z-index:2; }

/* ═══ CHIP CARD: NUDGE TO ICON MIDPOINT (1 Sept 2026) ════════════════════
   Centred on the benefit text before; measured 8px below the true
   midpoint between the top and bottom row icons. Shifted up to match. */
@media (min-width:901px){
  .msdl-chip-center{ top:calc(50% - 8px) !important; }
}

/* ═══ ACCESSIBILITY: "Learn more" contrast fix (1 Sept 2026) ════════════
   Red (#C1272D) on the dark applications card measured 3.23:1 — fails
   WCAG AA for small text (needs 4.5:1). Lightened for this dark-card
   instance only; the red used on white backgrounds elsewhere already
   passes (5.84:1) and is untouched. */
.msdl-apps-featured-copy a{ color:#ff6259 !important; }
.msdl-apps-featured-copy a:hover{ color:#ff8079 !important; }

/* ═══ TOUCH TARGET: nav burger (1 Sept 2026) ════════════════════════════
   Measured 30×27px — under the widely-used 44×44px minimum tap-target
   guidance (Apple HIG, Material Design, WCAG 2.5.5). Icon size unchanged,
   invisible padding brings the tappable area up to 44×44. */
.msdl-nav-burger{
  padding:8px 7px !important;
  margin:-8px -7px !important;
  min-width:44px !important; min-height:44px !important;
  align-items:center !important; justify-content:center !important;
  /* display is NOT forced here — the burger stays hidden on desktop
     (base rule) and only appears at the mobile breakpoint below. */
}
@media (max-width:1023px){
  .msdl-nav-burger{ display:inline-flex !important; }
}

/* ═══ DEMO VIDEO: APPLE-STYLE EXPAND-ON-SCROLL (1 Sept 2026, v2) ═════════
   Replaces the subtle entrance with the full apple.com treatment: the
   frame starts at 82% size with rounder corners and expands to full width
   as it travels up the screen; the label fades and lifts with it. Driven
   by --vp (0→1) from the page JS, so it tracks the scroll in both
   directions. --vp defaults to 1: no-JS / reduced-motion see it in place. */
.msdl-video{ --vp:1; }
.msdl-video-frame{
  --vp:inherit;   /* take the animated value from the section, not the older per-frame default */
  transform:
    translate3d(0, calc(110px * (1 - var(--vp))), 0)
    scale(calc(0.82 + 0.18 * var(--vp))) !important;
  border-radius:calc(22px + 16px * (1 - var(--vp))) !important;
}
.msdl-video .msdl-section-label-arc{
  opacity:calc(0.25 + 0.75 * var(--vp));
  transform:translate3d(0, calc(14px * (1 - var(--vp))), 0);
}
@media (max-width:640px){
  .msdl-video-frame{
    transform:
      translate3d(0, calc(48px * (1 - var(--vp))), 0)
      scale(calc(0.90 + 0.10 * var(--vp))) !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .msdl-video-frame{ transform:none !important; border-radius:22px !important; }
  .msdl-video .msdl-section-label-arc{ opacity:1; transform:none; }
}

/* ═══ DEMO VIDEO: CLICK TO PLAY (1 Sept 2026, reverted) ═══════════════════
   Back to click-to-play only — autoplay made every scroll-past count as
   a "play" in analytics, which isn't a real engagement signal. Pressing
   the play button starts it with sound and switches on the native
   control bar (play/pause, timeline, volume, fullscreen, PiP). */
.msdl-video-frame video{ cursor:auto; }
.msdl-video-frame video::-webkit-media-controls-panel{ background-image:linear-gradient(transparent, rgba(0,0,0,.6)); }

/* ═══ CLIENT ROUND 2 Sept — LEGIBILITY BUMP ═════════════════════════════
   Client: "fonts throughout the page seem small relative to the page
   size". Smallest text sizes raised ~10-15% — body copy, benefit and
   feature descriptions, spec rows, labels. Headings untouched. */
.msdl-benefit-title{ font-size:14.5px !important; }
.msdl-benefit-desc{ font-size:13.5px !important; line-height:1.6 !important; }
.msdl-stat-num{ font-size:20px !important; }
.msdl-stat-label{ font-size:14px !important; }
.msdl-feature-title{ font-size:18.5px !important; }
.msdl-feature-desc{ font-size:15.5px !important; line-height:1.65 !important; }
.msdl-spec-card .label{ font-size:14.5px !important; }
.msdl-spec-card .value{ font-size:14px !important; }
.msdl-apps-featured-copy p{ font-size:15.5px !important; line-height:1.65 !important; }
.msdl-apps-card-label{ font-size:14px !important; }
.msdl-form label{ font-size:13.5px !important; }
.msdl-form-microtrust{ font-size:13px !important; }
.msdl-footer p,.msdl-footer-col a,.msdl-footer-bottom{ font-size:14px !important; }
@media (max-width:640px){
  .msdl-feature-desc,.msdl-apps-featured-copy p{ font-size:15px !important; }
}/* End custom CSS */