:root{
    /* brand */
    --obsidian:#0B0D10;
    --teal:#31DDD0;
    --purple:#8E6BFF;
    --grad:linear-gradient(115deg, #31DDD0 0%, #8E6BFF 100%);

    --ink:#F5F6F8;
    --ink-2:rgba(245,246,248,0.62);
    --ink-3:rgba(245,246,248,0.40);
    --line:rgba(255,255,255,0.085);
    --line-2:rgba(255,255,255,0.155);
    --glass:rgba(255,255,255,0.045);
    --glass-2:rgba(255,255,255,0.08);

    /* light product UI */
    --p-white:#ffffff;
    --p-25:#FBFCFD;
    --p-50:#F6F8FA;
    --p-100:#EDF0F4;
    --p-200:#E1E5EB;
    --p-300:#CFD5DE;
    --p-text:#0F1319;
    --p-text-2:#59626F;
    --p-text-3:#8A93A0;

    --ok-bg:#E4F7F4;  --ok-fg:#0A8278;  --ok-dot:#0FA396;
    --warn-bg:#FDF3E4; --warn-fg:#9E5D0A; --warn-dot:#E0A02A;
    --po-bg:#EFEAFF;   --po-fg:#5F33DE;  --po-dot:#7C55F0;
    --out-bg:#FCEBEA;  --out-fg:#AE3529; --out-dot:#C9544A;

    --ease:cubic-bezier(.16,.8,.24,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%;}
  body{
    background:var(--obsidian);
    color:var(--ink);
    font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    min-height:100vh;
  }
  img, svg{display:block;}
  a{text-decoration:none; color:inherit;}
  ::selection{background:rgba(142,107,255,0.35);}

  /* ─────────── atmosphere ─────────── */
  .topline{position:fixed; top:0; left:0; right:0; height:2px; z-index:200; background:var(--grad); opacity:.5;}
  .atmos{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .atmos i{position:absolute; display:block; border-radius:50%; filter:blur(90px);}
  .a1{width:640px; height:520px; top:-180px; right:6%;
      background:radial-gradient(circle, rgba(142,107,255,0.30), transparent 70%);
      animation:drift1 30s ease-in-out infinite;}
  .a2{width:520px; height:460px; top:38%; left:-9%;
      background:radial-gradient(circle, rgba(49,221,208,0.16), transparent 70%);
      animation:drift2 36s ease-in-out infinite;}
  .a3{width:760px; height:420px; bottom:-220px; left:34%;
      background:radial-gradient(circle, rgba(91,39,204,0.16), transparent 70%);
      animation:drift1 42s ease-in-out infinite reverse;}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-34px,42px) scale(1.05);}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(46px,-34px) scale(1.04);}}
  .grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.028; 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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .wrap{max-width:1400px; margin:0 auto; padding:0 32px; position:relative; z-index:3;}

  /* ─────────── floating pill nav ─────────── */
  .navbar{
    position:fixed; top:20px; left:0; right:0; z-index:150;
    opacity:0; transform:translateY(-14px);
    animation:navIn .9s var(--ease) .15s forwards;
  }
  @keyframes navIn{to{opacity:1; transform:translateY(0);}}
  .nav-pill{
    max-width:1336px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:26px;
    padding:9px 10px 9px 20px;
    background:rgba(15,18,24,0.66);
    border:1px solid var(--line);
    border-radius:999px;
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 1px 0 rgba(255,255,255,0.055) inset, 0 18px 44px -22px rgba(0,0,0,0.9);
    transform-origin:top center;
    transition:opacity .55s var(--ease), transform .55s var(--ease),
               box-shadow .55s var(--ease), border-color .45s var(--ease),
               background .45s var(--ease);
  }
  /* quietly gets out of the way while scrolling down */
  .navbar.tucked .nav-pill{
    opacity:.42;
    transform:translateY(-9px) scale(.965);
    box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px -16px rgba(0,0,0,0.8);
  }
  /* and comes straight back on intent */
  .navbar.tucked:hover .nav-pill,
  .navbar.tucked:focus-within .nav-pill{
    opacity:1; transform:translateY(0) scale(1);
    box-shadow:0 1px 0 rgba(255,255,255,0.055) inset, 0 18px 44px -22px rgba(0,0,0,0.9);
  }
  .navbar.past-top .nav-pill{background:rgba(11,13,16,0.86); border-color:var(--line-2);}

  .nav-brand{display:flex; align-items:center; gap:9px; flex:none;}
  .nav-brand .mark{height:26px; width:auto;}
  .nav-brand .word{height:13px; width:auto; opacity:.95;}

  .nav-links{display:flex; align-items:center; gap:4px;}
  .nav-links a{
    position:relative; font-size:13.5px; font-weight:500; color:var(--ink-2);
    padding:8px 15px; border-radius:999px;
    transition:color .28s var(--ease), background .28s var(--ease);
  }
  .nav-links a::after{
    content:''; position:absolute; left:15px; right:15px; bottom:3px; height:1.5px;
    border-radius:2px; background:var(--grad);
    transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-links a.active{
    color:var(--ink); font-weight:600;
    background:rgba(255,255,255,0.075);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
  }
  .nav-links a.active::after{display:none;}
  .nav-cta{flex:none;}

  /* ── menu button: three bars that fold into a cross ── */
  .nav-menu-btn{display:none;}
  .nav-bars{position:relative; display:block; width:15px; height:11px;}
  .nav-bars i{
    position:absolute; left:0; right:0; height:1.8px; border-radius:2px;
    background:currentColor;
    transition:transform .34s var(--ease), opacity .2s var(--ease), top .34s var(--ease);
  }
  .nav-bars i:nth-child(1){top:0;}
  .nav-bars i:nth-child(2){top:4.6px;}
  .nav-bars i:nth-child(3){top:9.2px;}
  .nav-menu-btn[aria-expanded="true"] .nav-bars i:nth-child(1){top:4.6px; transform:rotate(45deg);}
  .nav-menu-btn[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0;}
  .nav-menu-btn[aria-expanded="true"] .nav-bars i:nth-child(3){top:4.6px; transform:rotate(-45deg);}
  .nav-menu-btn:hover{background:var(--glass-2); border-color:var(--line-2);}
  .nav-menu-btn[aria-expanded="true"]{background:var(--glass-2); border-color:var(--line-2);}

  /* ── mobile panel: the pill's own surface, dropped underneath it ── */
  .nav-mobile{
    max-width:1336px; margin:10px auto 0; padding:10px;
    background:rgba(15,18,24,0.82);
    border:1px solid var(--line);
    border-radius:20px;
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 1px 0 rgba(255,255,255,0.055) inset, 0 22px 48px -24px rgba(0,0,0,0.92);
    transform-origin:top center;
    opacity:0; transform:translateY(-10px) scale(.985);
    transition:opacity .32s var(--ease), transform .38s var(--ease), visibility 0s linear .38s;
    visibility:hidden;
  }
  .nav-mobile[hidden]{display:none;}
  .navbar.menu-open .nav-mobile{
    opacity:1; transform:translateY(0) scale(1);
    visibility:visible; transition-delay:0s, 0s, 0s;
  }
  .nav-m-links{display:flex; flex-direction:column;}
  .nav-m-links a{
    position:relative; display:block; padding:12px 14px; border-radius:12px;
    font-size:14.5px; font-weight:500; color:var(--ink-2);
    transition:color .26s var(--ease), background .26s var(--ease);
  }
  .nav-m-links a:hover{color:var(--ink); background:rgba(255,255,255,0.05);}
  .nav-m-links a.active{
    color:var(--ink); font-weight:600;
    background:rgba(255,255,255,0.075);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
  }
  .nav-m-links a.active::before{
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:2.5px; height:15px; border-radius:2px; background:var(--grad);
  }
  .nav-m-cta{
    display:flex; width:100%; margin-top:8px;
    font-size:13.5px; padding:14px 20px;
  }
  /* each row eases in behind the panel */
  .navbar.menu-open .nav-m-links a,
  .navbar.menu-open .nav-m-cta{animation:navRow .42s var(--ease) backwards;}
  .navbar.menu-open .nav-m-links a:nth-child(1){animation-delay:.04s}
  .navbar.menu-open .nav-m-links a:nth-child(2){animation-delay:.08s}
  .navbar.menu-open .nav-m-links a:nth-child(3){animation-delay:.12s}
  .navbar.menu-open .nav-m-links a:nth-child(4){animation-delay:.16s}
  .navbar.menu-open .nav-m-links a:nth-child(5){animation-delay:.20s}
  .navbar.menu-open .nav-m-cta{animation-delay:.24s}
  @keyframes navRow{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
  /* the nav never tucks itself away while its menu is open */
  .navbar.menu-open.tucked .nav-pill{
    opacity:1; transform:translateY(0) scale(1);
    box-shadow:0 1px 0 rgba(255,255,255,0.055) inset, 0 18px 44px -22px rgba(0,0,0,0.9);
  }
  @media (prefers-reduced-motion:reduce){
    .nav-mobile{transition:opacity .01s, visibility 0s;}
    .navbar.menu-open .nav-m-links a, .navbar.menu-open .nav-m-cta{animation:none;}
  }

  /* ─────────── buttons ─────────── */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:inherit; font-weight:700; white-space:nowrap; cursor:pointer;
    border-radius:999px; border:1px solid transparent;
    transition:transform .32s var(--ease), box-shadow .32s var(--ease),
               background .32s var(--ease), border-color .32s var(--ease), filter .32s var(--ease);
  }
  .btn .arw{transition:transform .32s var(--ease);}
  .btn:hover .arw{transform:translateX(3px);}
  .btn-primary{
    background:var(--grad); color:#07110F;
    box-shadow:0 1px 0 rgba(255,255,255,0.45) inset, 0 16px 36px -12px rgba(142,107,255,0.55);
  }
  .btn-primary:hover{
    transform:translateY(-2px); filter:brightness(1.06);
    box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 22px 48px -14px rgba(142,107,255,0.72);
  }
  .btn-ghost{
    background:var(--glass); color:var(--ink); border-color:var(--line);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  }
  .btn-ghost:hover{transform:translateY(-2px); background:var(--glass-2); border-color:var(--line-2);}
  .btn-lg{font-size:14.5px; padding:15px 27px; letter-spacing:-0.005em;}
  .btn-sm{font-size:12.5px; padding:10px 18px;}
  .btn .arw svg{width:13px; height:13px;}
  .btn-lg .arw svg{width:14px; height:14px;}

  /* ─────────── hero ─────────── */
  .hero{position:relative; z-index:3; padding:114px 0 56px;}
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,37fr) minmax(0,63fr);
    gap:40px; align-items:center;
  }

  .rise{opacity:0; transform:translateY(20px); animation:rise .95s var(--ease) forwards;}
  @keyframes rise{to{opacity:1; transform:translateY(0);}}
  .d1{animation-delay:.30s;} .d2{animation-delay:.40s;} .d3{animation-delay:.50s;}
  .d4{animation-delay:.60s;} .d5{animation-delay:.70s;} .d6{animation-delay:.46s;}

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500;
    letter-spacing:0.19em; text-transform:uppercase; color:var(--teal);
    margin-bottom:24px;
  }
  .eyebrow::before{content:''; width:18px; height:1.5px; border-radius:2px; background:var(--grad);}

  h1.headline{font-size:56px; font-weight:800; line-height:1.06; letter-spacing:-0.033em; color:#fff;}
  h1.headline .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

  p.lead{font-size:16.5px; line-height:1.72; font-weight:400; color:var(--ink-2); max-width:452px; margin:26px 0 34px;}

  .cta-row{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:44px;}

  .workflow{padding-top:24px; border-top:1px solid var(--line);}
  .workflow-label{
    font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:500;
    letter-spacing:0.17em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px;
  }
  .workflow-logos{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
  .wl{display:flex; align-items:center; gap:9px; opacity:.72; transition:opacity .3s var(--ease);}
  .wl:hover{opacity:1;}
  .wl span{font-size:13px; font-weight:600; color:var(--ink-2);}

  /* ═══════════ dashboard ═══════════ */
  .stage{position:relative; min-width:0;}
  .stage::before{
    content:''; position:absolute; inset:-7% 0 -11%;
    background:radial-gradient(ellipse at 50% 45%, rgba(142,107,255,0.17), transparent 68%);
    filter:blur(48px); z-index:0;
  }
  .app{
    position:relative; z-index:1; max-width:100%;
    background:var(--p-50);
    border-radius:15px;
    overflow:hidden;
    /* refined elevation: light ring + top-edge highlight + layered shadow */
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.12),
      0 1px 0 0 rgba(255,255,255,0.55) inset,
      0 2px 6px -1px rgba(0,0,0,0.30),
      0 18px 34px -14px rgba(0,0,0,0.55),
      0 44px 90px -34px rgba(0,0,0,0.85);
  }

  /* top bar */
  .app-top{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:0 13px; height:42px;
    background:linear-gradient(180deg,#fff,#FCFDFE);
    border-bottom:1px solid var(--p-200);
  }
  .app-top-l{display:flex; align-items:center; gap:12px; min-width:0;}
  .app-brand{display:flex; align-items:center; gap:6px;}
  .app-brand img{height:17px; width:auto;}
  .app-brand b{font-size:12px; font-weight:800; letter-spacing:0.03em; color:var(--p-text);}
  .app-div{width:1px; height:18px; background:var(--p-200); flex:none;}
  .app-ctx{display:flex; align-items:center; gap:6px; color:var(--p-text-2);}
  .app-ctx svg{width:12.5px; height:12.5px; color:var(--po-fg);}
  .app-ctx b{font-size:12px; font-weight:700; color:var(--p-text); letter-spacing:-0.01em;}
  .app-ctx .crumb{font-size:11.5px; color:var(--p-text-3); font-weight:500;}

  .app-top-r{display:flex; align-items:center; gap:8px;}
  .app-search{
    display:flex; align-items:center; gap:7px;
    background:var(--p-50); border:1px solid var(--p-200); border-radius:7px;
    padding:0 8px; height:27px; width:190px; color:var(--p-text-3);
    transition:border-color .25s, background .25s;
  }
  .app-search:hover{border-color:var(--p-300); background:#fff;}
  .app-search svg{width:12px; height:12px; flex:none;}
  .app-search span{font-size:11.5px; flex:1;}
  .app-search kbd{
    font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--p-text-3);
    background:#fff; border:1px solid var(--p-200); border-radius:4px; padding:1px 4px;
  }
  .app-ico{
    position:relative; width:27px; height:27px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--p-200); color:var(--p-text-2);
    transition:border-color .25s, color .25s;
  }
  .app-ico:hover{border-color:var(--p-300); color:var(--p-text);}
  .app-ico svg{width:13px; height:13px;}
  .app-ico .dot{
    position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%;
    background:var(--warn-dot); border:1.5px solid #fff;
  }
  .app-avatar{
    width:26px; height:26px; border-radius:50%; flex:none;
    background:linear-gradient(135deg,#31DDD0,#8E6BFF);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; color:#fff;
    box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--p-200);
  }

  .app-body{display:flex;}

  /* sidebar */
  .side{
    width:142px; flex:none; padding:9px 8px;
    border-right:1px solid var(--p-200); background:var(--p-white);
    display:flex; flex-direction:column; gap:1px;
  }
  .side-label{
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:0.15em;
    text-transform:uppercase; color:var(--p-text-3); padding:0 9px 5px; font-weight:600;
  }
  .side a{
    position:relative; display:flex; align-items:center; gap:8px;
    padding:5.5px 9px; border-radius:7px; overflow:hidden;
    font-size:11.5px; font-weight:500; color:var(--p-text-2); white-space:nowrap;
    transition:background .2s, color .2s;
  }
  .side a svg{width:13.5px; height:13.5px; flex:none; opacity:.62;}
  .side a:hover{background:var(--p-50); color:var(--p-text);}
  .side a.active{background:var(--po-bg); color:var(--po-fg); font-weight:700;}
  .side a.active svg{opacity:1;}
  .side a.active::before{
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:2.5px; height:14px; border-radius:0 3px 3px 0; background:var(--grad);
  }
  .side a .n{
    margin-left:auto; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:999px;
    background:var(--warn-bg); color:var(--warn-fg);
  }
  .side-foot{margin-top:auto; padding:8px 9px 2px; border-top:1px solid var(--p-100);}
  .side-foot .sync{display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--p-text-3); font-weight:600;}
  .side-foot .sync i{width:5px; height:5px; border-radius:50%; background:var(--ok-dot); flex:none;}

  /* main */
  .main{flex:1; min-width:0; padding:10px 11px 11px; background:var(--p-50);}

  .main-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
  /* decorative label inside the hero's static product-mockup screenshot,
     not real page content — a <div> so it doesn't compete with the page's
     actual h1/h2 outline; same look via the same rule, just re-targeted */
  .main-head .mock-h2{font-size:13.5px; font-weight:800; color:var(--p-text); letter-spacing:-0.02em;}
  .main-head p{font-size:11px; color:var(--p-text-3); margin-top:1px; font-weight:500;}
  .head-tools{display:flex; align-items:center; gap:7px;}
  .live{
    display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700;
    font-family:'IBM Plex Mono',monospace; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--ok-fg); background:var(--ok-bg); padding:4px 9px; border-radius:999px;
  }
  .live i{width:5px; height:5px; border-radius:50%; background:var(--ok-dot); animation:blip 1.9s ease-in-out infinite;}
  @keyframes blip{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(15,163,150,.5);} 50%{opacity:.5; box-shadow:0 0 0 5px rgba(15,163,150,0);}}

  /* KPI cards */
  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px;}
  .kpi{
    position:relative; background:var(--p-white); border:1px solid var(--p-200);
    border-radius:9px; padding:8px 10px 9px; overflow:hidden;
    box-shadow:0 1px 2px rgba(15,19,25,0.04);
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .kpi::after{content:''; position:absolute; inset:0 0 auto 0; height:1px; background:rgba(255,255,255,.9);}
  .kpi:hover{border-color:var(--p-300); box-shadow:0 4px 12px -3px rgba(15,19,25,0.10); transform:translateY(-1px);}
  .kpi .k-l{
    font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--p-text-3);
  }
  .kpi .k-v{
    font-size:17.5px; font-weight:800; letter-spacing:-0.03em; color:var(--p-text);
    margin-top:4px; font-variant-numeric:tabular-nums; line-height:1.1;
  }
  .kpi .k-d{
    display:inline-flex; align-items:center; gap:4px; margin-top:5px;
    font-size:9.5px; font-weight:700; padding:2.5px 6px; border-radius:999px;
    letter-spacing:-0.005em;
  }
  .kpi .k-d svg{width:9px; height:9px;}
  .k-up{color:var(--ok-fg); background:var(--ok-bg);}
  .k-warn{color:var(--warn-fg); background:var(--warn-bg);}
  .k-po{color:var(--po-fg); background:var(--po-bg);}
  .k-mut{color:var(--p-text-2); background:var(--p-100);}

  /* content columns */
  .lower{display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:8px; align-items:stretch;}
  .prod-card{margin-bottom:8px;}

  .card{
    background:var(--p-white); border:1px solid var(--p-200); border-radius:9px;
    box-shadow:0 1px 2px rgba(15,19,25,0.04); overflow:hidden;
    display:flex; flex-direction:column;
  }
  .card-h{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:7px 11px; border-bottom:1px solid var(--p-200);
    background:linear-gradient(180deg,#fff,#FCFDFE); flex:none;
  }
  /* same reasoning as .mock-h2 above — decorative mockup labels, not real headings */
  .card-h .mock-h3{font-size:11.5px; font-weight:800; color:var(--p-text); letter-spacing:-0.012em;}
  .chips{display:flex; align-items:center; gap:5px;}
  .chip{
    font-size:9.5px; font-weight:600; color:var(--p-text-2);
    background:var(--p-50); border:1px solid var(--p-200); padding:3px 7px; border-radius:5px;
    transition:border-color .2s, color .2s;
  }
  .chip:hover{border-color:var(--p-300); color:var(--p-text);}
  .chip.on{background:var(--po-bg); border-color:transparent; color:var(--po-fg); font-weight:700;}

  /* table — fixed layout, no internal scrolling */
  table{width:100%; border-collapse:collapse; table-layout:fixed;}
  thead th{
    text-align:left; padding:6px 8px;
    font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600;
    letter-spacing:0.07em; text-transform:uppercase; color:var(--p-text-3);
    background:var(--p-25); border-bottom:1px solid var(--p-200);
    white-space:nowrap; overflow:hidden;
  }
  thead th.r{text-align:right;}
  thead th, tbody td{box-sizing:border-box;}
  tbody td{
    padding:0 8px; height:29px; font-size:11px; color:var(--p-text);
    border-bottom:1px solid var(--p-100);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    vertical-align:middle;
  }
  tbody td.r{text-align:right; font-variant-numeric:tabular-nums lining-nums;}
  tbody tr{transition:background .22s var(--ease), box-shadow .22s var(--ease);}
  tbody tr:hover{background:var(--p-50);}
  tbody tr:last-child td{border-bottom:none;}

  .t-prod{display:flex; align-items:center; gap:6px; min-width:0;}
  .t-thumb{
    width:18px; height:18px; border-radius:5px; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-size:8px; font-weight:800; color:#6C7686; letter-spacing:0.02em;
    background:linear-gradient(145deg,#F2F4F7,#E6EAF0);
    box-shadow:inset 0 0 0 1px rgba(15,19,25,0.055);
  }
  .t-name{font-weight:700; letter-spacing:-0.012em; overflow:hidden; text-overflow:ellipsis;}
  .t-var{color:var(--p-text-2); font-size:10.5px; font-weight:500;}
  .t-sku{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--p-text-3);}
  .t-n{font-variant-numeric:tabular-nums lining-nums; font-weight:700; font-size:11px; font-feature-settings:"tnum" 1;}
  .t-n.mut{color:var(--p-text-3); font-weight:500;}
  .t-n.crit{color:var(--out-fg);}

  /* row spotlight during the automation story */
  tr.spot{background:rgba(142,107,255,0.055); box-shadow:inset 2.5px 0 0 var(--po-dot);}

  .badge{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    font-size:9.5px; font-weight:700; padding:3px 8px 3px 6px; border-radius:999px;
    letter-spacing:-0.005em;
    transition:background .4s var(--ease), color .4s var(--ease);
  }
  .badge i{width:5px; height:5px; border-radius:50%; background:currentColor; flex:none;}
  .b-ok{background:var(--ok-bg); color:var(--ok-fg);}
  .b-low{background:var(--warn-bg); color:var(--warn-fg);}
  .b-po{background:var(--po-bg); color:var(--po-fg);}
  .b-out{background:var(--out-bg); color:var(--out-fg);}
  .badge.pulsing i{animation:bpulse 1.5s ease-in-out infinite;}
  @keyframes bpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,160,42,.55);} 50%{box-shadow:0 0 0 4px rgba(224,160,42,0);}}

  .flash{animation:flashCell 1.1s var(--ease);}
  @keyframes flashCell{0%{background:rgba(49,221,208,.30);} 100%{background:transparent;}}
  .swap{display:inline-block; animation:swapIn .45s var(--ease); font-variant-numeric:inherit;}
  @keyframes swapIn{0%{opacity:0; transform:translateY(-4px);} 100%{opacity:1; transform:translateY(0);}}

  /* right rail */
  .rail{display:flex; flex-direction:column; gap:9px; min-width:0;}
  .rail .card{flex:none;}
  .rail-body{padding:9px 11px 10px;}

  .health-n{display:flex; align-items:baseline; gap:5px; margin-bottom:8px;}
  .health-n b{font-size:19px; font-weight:800; color:var(--p-text); letter-spacing:-0.03em; line-height:1;}
  .health-n span{font-size:10px; font-weight:600; color:var(--p-text-3);}
  .bar{display:flex; height:5px; border-radius:999px; overflow:hidden; background:var(--p-100); margin-bottom:9px; gap:1.5px;}
  .bar span{height:100%; display:block; border-radius:999px; transform:scaleX(0); transform-origin:left;
            animation:barIn 1s var(--ease) forwards;}
  @keyframes barIn{to{transform:scaleX(1);}}
  .legend{display:grid; grid-template-columns:1fr 1fr; gap:5px 10px;}
  .lg{display:flex; align-items:center; justify-content:space-between; font-size:10px;}
  .lg-k{display:flex; align-items:center; gap:6px; color:var(--p-text-2); font-weight:600;}
  .lg-k i{width:5.5px; height:5.5px; border-radius:2px;}
  .lg-v{font-weight:700; color:var(--p-text); font-variant-numeric:tabular-nums;}

  .alerts{padding:4px 5px 5px; display:flex; flex-direction:column; gap:1px;}
  .alert{display:flex; align-items:flex-start; gap:7px; padding:5px 7px; border-radius:7px; transition:background .2s;}
  .alert:hover{background:var(--p-50);}
  .alert i{width:5.5px; height:5.5px; border-radius:50%; margin-top:4px; flex:none;}
  .alert b{display:block; font-size:10.5px; font-weight:700; color:var(--p-text); letter-spacing:-0.012em;}
  .alert span{font-size:9.5px; color:var(--p-text-2); font-weight:500;}

  /* automation strip — supporting, sits under the product */
  .autos{display:flex; flex-direction:column; gap:8px; min-width:0; justify-content:space-between;}
  .autos .auto{flex:0 0 auto;}
  .auto{
    display:flex; align-items:flex-start; gap:9px; padding:8px 10px;
    background:var(--p-white); border:1px solid var(--p-200); border-radius:9px;
    box-shadow:0 1px 2px rgba(15,19,25,0.04);
    opacity:0; transform:translateY(7px);
    transition:opacity .55s var(--ease), transform .55s var(--ease), border-color .25s;
  }
  .auto.in{opacity:1; transform:translateY(0);}
  .auto:hover{border-color:var(--p-300);}
  .auto-ic{
    width:24px; height:24px; border-radius:7px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--p-50); box-shadow:inset 0 0 0 1px rgba(15,19,25,0.055);
  }
  .auto-tx{min-width:0; flex:1;}
  .auto-tx b{display:block; font-size:10.5px; font-weight:800; color:var(--p-text); letter-spacing:-0.012em;}
  .auto-tx span{display:block; font-size:9.5px; color:var(--p-text-2); font-weight:500; margin-top:2px; line-height:1.4;}
  .po-state{
    flex:none; align-self:flex-start; margin-top:1px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:600;
    letter-spacing:0.09em; padding:3px 7px; border-radius:999px;
    background:var(--p-100); color:var(--p-text-2);
    transition:background .45s var(--ease), color .45s var(--ease);
  }
  .po-state.ok{background:var(--ok-bg); color:var(--ok-fg);}

  /* ─────────── responsive ─────────── */
  /* narrower desktops: tighten density so all 7 columns still fit — never scroll */
  @media (min-width:1181px) and (max-width:1360px){
    tbody td{font-size:10.5px; padding:0 6px; height:31px;}
    thead th{font-size:7.5px; padding:6px 6px; letter-spacing:0.05em;}
    .t-var{font-size:10px;} .t-sku{font-size:9px;} .t-n{font-size:10.5px;}
    .t-thumb{width:16px; height:16px; font-size:7px;} .t-prod{gap:5px;}
    .badge{font-size:9px; padding:3px 7px 3px 5px;}
    .side{width:132px;}
  }
  @media (min-width:1181px) and (max-width:1245px){
    .t-thumb{display:none;}
    tbody td{font-size:10px;}
    .t-var{font-size:9.5px;} .t-sku{font-size:8.5px;}
  }
  @media (min-width:761px){
    .nav-m-cta{display:none;}
  }
  @media (max-width:1180px){
    .wrap{padding:0 26px;}
    .nav-links{display:none;}
    .nav-menu-btn{
      display:flex; align-items:center; justify-content:center;
      width:36px; height:36px; border-radius:999px; flex:none; padding:0;
      background:var(--glass); border:1px solid var(--line); color:var(--ink); cursor:pointer;
      transition:background .28s var(--ease), border-color .28s var(--ease);
    }
    .hero{padding:112px 0 64px;}
    .hero-grid{grid-template-columns:minmax(0,1fr); gap:48px;}
    h1.headline{font-size:48px;}
    p.lead{max-width:560px;}
  }
  @media (max-width:860px){
    .cols{grid-template-columns:1fr;}
    .rail{flex-direction:row; flex-wrap:wrap;}
    .rail > *{flex:1 1 210px;}
  }
  @media (max-width:760px){
    .wrap{padding:0 16px;}
    .navbar{top:12px;}
    .nav-pill{padding:8px 8px 8px 14px; gap:12px;}
    .nav-brand .mark{height:22px;} .nav-brand .word{height:11px;}
    .nav-cta{display:none;}
    .nav-menu-btn{width:34px; height:34px;}
    .nav-mobile{margin-top:8px; border-radius:18px;}
    .hero{padding:100px 0 36px;}
    h1.headline{font-size:37px; letter-spacing:-0.028em;}
    p.lead{font-size:15.5px; margin:22px 0 30px;}
    .btn-lg{font-size:13.5px; padding:14px 22px;}
    .cta-row{margin-bottom:36px;}
    .kpis{grid-template-columns:repeat(2,1fr);}
    .side{display:none;}
    .rail{flex-direction:column;}
    .autos{grid-template-columns:1fr;}

    .workflow-logos{gap:18px;}

    /* on phones the laptop sits between the copy and the buttons — the copy
       column dissolves so its children and the laptop share one running order */
    .hero-copy{display:contents;}
    .hero-grid{gap:0;}
    .eyebrow{order:1; justify-self:start;}
    h1.headline{order:2;}
    p.lead{order:3; margin:22px 0 26px;}
    .stage{order:4; margin:0 0 30px;}
    .cta-row{order:5;}
    .workflow{order:6;}
  }
  /* narrow layouts: show fewer columns rather than ever scrolling inside the app */
  @media (max-width:1000px){
    .col-var, .col-reorder{display:none;}
    .lower{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:620px){
    .col-sku{display:none;}
    .lower{grid-template-columns:1fr;}
    /* let text wrap on phones instead of being cut off */
    .t-name{white-space:normal; line-height:1.2;}
    tbody td{height:auto; padding:7px 7px;}
    thead th{font-size:7px; padding:6px 7px;}
    .auto{flex-wrap:wrap;}
    .auto-tx b, .auto-tx span{white-space:normal;}
    .po-state{margin-top:4px;}
  }
  /* short laptop viewports: keep the dashboard ending at the fold */
  @media (min-width:1181px) and (max-height:790px){
    .hero{padding-top:94px; padding-bottom:40px;}
    tbody td{height:27px;}
    .kpi{padding:7px 10px 8px;}
    .kpi .k-v{font-size:16px; margin-top:3px;}
    .main-head{margin-bottom:7px;}
    .alert{padding:4px 7px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important;}
    .rise, .navbar{opacity:1 !important; transform:none !important;}
    .bar span{transform:scaleX(1) !important;}
  }

  /* ═══════════════ SECTION 2 — the inventory problem ═══════════════ */
  .problem{position:relative; z-index:3; padding:104px 0 116px;}
  /* hairline hand-off from the hero */
  .problem::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(1336px, calc(100% - 64px)); height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent);
  }
  .problem::after{
    content:''; position:absolute; right:4%; top:22%; width:520px; height:420px; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(142,107,255,0.075), transparent 68%);
    filter:blur(50px);
  }

  .problem-grid{
    display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    gap:88px; align-items:start; position:relative; z-index:1;
  }

  .problem-grid::before{
    content:''; position:absolute; z-index:0; pointer-events:none;
    left:calc(40% - 26px); top:5%; width:200px; height:84%;
    background:
      radial-gradient(ellipse 62% 38% at 50% 10%, rgba(49,221,208,0.085), transparent 72%),
      radial-gradient(ellipse 62% 42% at 50% 90%, rgba(142,107,255,0.10), transparent 72%);
    filter:blur(36px);
  }
  .problem-copy, .problems{position:relative; z-index:1;}

  .s2-title{
    font-size:42px; font-weight:800; line-height:1.13; letter-spacing:-0.03em; color:#fff;
    opacity:0; transform:translateY(16px);
    transition:opacity .8s var(--ease) .10s, transform .8s var(--ease) .10s;
  }
  /* the hero scopes .grad to h1.headline — section 2 needs its own */
  .s2-title .grad{
    background:var(--grad);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .s2-lead{
    font-size:15.5px; line-height:1.75; font-weight:400; color:var(--ink-2);
    max-width:405px; margin-top:21px;
    opacity:0; transform:translateY(16px);
    transition:opacity .8s var(--ease) .22s, transform .8s var(--ease) .22s;
  }
  .s2-eyebrow{
    opacity:0; transform:translateY(16px);
    transition:opacity .75s var(--ease), transform .75s var(--ease);
  }
  .problem.in .s2-eyebrow,
  .problem.in .s2-title,
  .problem.in .s2-lead{opacity:1; transform:translateY(0);}

  /* ── the connected problem sequence ── */
  .problems{list-style:none; position:relative; margin:0; padding:0;}
  /* vertical connector, drawn downward on reveal */
  .problems::before{
    content:''; position:absolute; left:14.5px; top:11px; bottom:11px; width:1px;
    border-radius:2px; transform:scaleY(0); transform-origin:top;
    background:linear-gradient(180deg, rgba(49,221,208,0.48), rgba(142,107,255,0.48));
    transition:transform 1.05s var(--ease) .34s;
  }
  .problem.in .problems::before{transform:scaleY(1);}
  /* the accent that travels along the connector */
  .spark{
    position:absolute; left:13.5px; width:3px; height:30px; top:0; border-radius:3px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,0.9), transparent);
    opacity:0; pointer-events:none; z-index:1;
    transition:top .62s var(--ease), opacity .45s var(--ease);
  }

  .prob{
    position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:15px;
    padding:15px 10px 15px 0; border-bottom:1px solid rgba(255,255,255,0.075);
    opacity:0; transform:translateY(14px);
    transition:opacity .7s var(--ease), transform .45s var(--ease),
               border-color .35s var(--ease);
  }
  .prob:last-child{border-bottom:none;}
  .problem.in .prob{opacity:1; transform:translateY(0);}
  .problem.in .prob:nth-of-type(1){transition-delay:0.70s, 0.70s, 0s;}
  .problem.in .prob:nth-of-type(2){transition-delay:0.85s, 0.85s, 0s;}
  .problem.in .prob:nth-of-type(3){transition-delay:1.00s, 1.00s, 0s;}
  .problem.in .prob:nth-of-type(4){transition-delay:1.15s, 1.15s, 0s;}
  .problem.in .prob:nth-of-type(5){transition-delay:1.30s, 1.30s, 0s;}

  .prob-num{
    position:relative; z-index:2; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:0.04em;
    background:#0E1116; border:1px solid rgba(255,255,255,0.13); color:var(--ink-3);
    transform:scale(.84);
    transition:transform .6s var(--ease), color .5s var(--ease),
               border-color .5s var(--ease), box-shadow .6s var(--ease);
  }
  .problem.in .prob-num{transform:scale(1);}

  .prob-body{min-width:0; padding-top:2px;}
  .prob-head{display:flex; align-items:center; gap:9px; margin-bottom:6px;}
  .prob-ico{width:14px; height:14px; flex:none; color:rgba(245,246,248,0.46); transition:color .45s var(--ease);}
  .prob h3{
    font-size:14.5px; font-weight:700; letter-spacing:-0.012em; color:rgba(245,246,248,0.95);
    transition:color .45s var(--ease);
  }
  .prob p{font-size:13.5px; line-height:1.65; color:rgba(245,246,248,0.70); max-width:430px; font-weight:400;}

  /* momentary "active" state as each row lands */
  .prob.lit h3{color:#fff;}
  .prob.lit .prob-ico{color:rgba(245,246,248,0.78);}

  /* subtle teal → purple progression down the sequence */
  .prob:nth-of-type(1){--accent:49,221,208;}
  .prob:nth-of-type(2){--accent:92,200,222;}
  .prob:nth-of-type(3){--accent:134,170,236;}
  .prob:nth-of-type(4){--accent:163,140,248;}
  .prob:nth-of-type(5){--accent:142,107,255;}
  .prob .prob-num{color:rgba(var(--accent),0.80);}
  .prob.lit .prob-num{
    color:rgb(var(--accent));
    border-color:rgba(var(--accent),0.50);
    box-shadow:0 0 0 4px rgba(var(--accent),0.08), 0 0 18px rgba(var(--accent),0.28);
  }

  /* hover — restrained */
  .problem.in .prob:hover{transform:translateX(6px); border-color:rgba(255,255,255,0.14);}
  .prob:hover h3{color:#fff;}
  .prob:hover .prob-ico{color:rgba(245,246,248,0.78);}
  .prob:hover .prob-num{
    color:rgb(var(--accent));
    border-color:rgba(var(--accent),0.42);
    box-shadow:0 0 0 3px rgba(var(--accent),0.06), 0 0 13px rgba(var(--accent),0.18);
  }


  /* stack at the same width the hero does, so the page reads consistently */
  @media (max-width:1180px){
    .problem{padding:84px 0 92px;}
    .problem-grid{grid-template-columns:minmax(0,1fr); gap:44px;}
    .s2-title{font-size:36px;}
    .s2-lead{max-width:560px;}
  }
  @media (max-width:620px){
    .problem{padding:48px 0 76px;}
    .s2-title{font-size:29px; line-height:1.16;}
    .s2-lead{font-size:14.5px;}
    .prob{grid-template-columns:28px minmax(0,1fr); gap:13px; padding:14px 0;}
    .prob-num{width:28px; height:28px; font-size:8.5px;}
    .problems::before{left:13.5px;}
    .spark{left:12.5px; height:28px;}
    .prob h3{font-size:13.5px;}
    .prob p{font-size:12.5px; line-height:1.6;}
  }



  /* ═══════════════ SECTION 3 — the custom dashboard, on a loop (light) ═══════════════ */
  .s3{
    --w:#fff; --p25:#FBFCFD; --p50:#F6F8FA; --p100:#EDF0F4; --p200:#E1E5EB; --p300:#CFD5DE;
    --ink:#0F1319; --ink2:#59626F; --ink3:#8A93A0;
    --okbg:#E4F7F4; --ok:#0A8278; --okd:#0FA396;
    --wnbg:#FDF3E4; --wn:#9E5D0A; --wnd:#E0A02A;
    --pobg:#EFEAFF; --po:#5F33DE; --pod:#7C55F0;
    --otbg:#FCEBEA; --ot:#AE3529; --otd:#C9544A;
    position:relative; z-index:3; padding:54px 0 50px; color:var(--ink);
    background:linear-gradient(180deg,#F7F9FB 0%, #EFF2F6 55%, #E9EDF2 100%);
  }
  .s3::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 620px 320px at 15% 3%, rgba(49,221,208,.10), transparent 65%),
               radial-gradient(ellipse 700px 360px at 87% 7%, rgba(142,107,255,.10), transparent 65%);}
  .s3 > .wrap{position:relative; z-index:1;}

  .s3-head{max-width:620px; margin:0 auto 22px; text-align:center;}
  .s3-eyebrow{display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--po);}
  .s3-eyebrow::before{content:''; width:16px; height:1.5px; border-radius:2px; background:var(--grad);}
  .s3-title{font-size:40px; font-weight:800; line-height:1.14; letter-spacing:-.03em;}
  .s3-title .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s3-lead{font-size:15.5px; line-height:1.72; color:var(--ink2); max-width:560px; margin:16px auto 0;}
  .s3-r{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .s3.in .s3-r{opacity:1; transform:translateY(0);}
  .s3.in .s3-d1{transition-delay:.05s} .s3.in .s3-d2{transition-delay:.14s} .s3.in .s3-d3{transition-delay:.23s}

  /* hub: callouts sit outside and light up with the screen on show */
  .s3-hub{display:grid; grid-template-columns:142px minmax(0,1fr) 142px; gap:18px; align-items:center;}
  .s3-calls{position:relative; align-self:stretch; min-height:170px;}
  .s3-call{position:absolute; left:0; right:0; transform:translateY(-50%);
    opacity:0; transition:opacity .7s var(--ease);}
  .s3.in .s3-call{opacity:1;}
  .s3-call b{display:block; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); line-height:1.4;
    transition:color .45s var(--ease);}
  .s3-call span{display:block; font-size:10.5px; color:var(--ink3); opacity:.8; margin-top:3px; line-height:1.45;
    transition:color .45s var(--ease), opacity .45s var(--ease);}
  .s3-call::after{content:''; position:absolute; top:8px; height:1px; width:20px;
    background:var(--p300); transform:scaleX(0);
    transition:transform .6s var(--ease), background .45s var(--ease), width .45s var(--ease);}
  .s3.in .s3-call::after{transform:scaleX(1);}
  .s3-l .s3-call{text-align:right; padding-right:28px;}
  .s3-l .s3-call::after{right:0; transform-origin:left;}
  .s3-rt .s3-call{text-align:left; padding-left:28px;}
  .s3-rt .s3-call::after{left:0; transform-origin:right;}
  .s3-l .s3-call:nth-child(1){top:26%} .s3-l .s3-call:nth-child(2){top:52%} .s3-l .s3-call:nth-child(3){top:78%}
  .s3-rt .s3-call:nth-child(1){top:39%} .s3-rt .s3-call:nth-child(2){top:65%}
  .s3.in .s3-l .s3-call:nth-child(1){transition-delay:1.1s} .s3.in .s3-l .s3-call:nth-child(2){transition-delay:1.2s}
  .s3.in .s3-l .s3-call:nth-child(3){transition-delay:1.3s}
  .s3.in .s3-rt .s3-call:nth-child(1){transition-delay:1.15s} .s3.in .s3-rt .s3-call:nth-child(2){transition-delay:1.25s}
  /* the callout for the screen currently on show */
  .s3-call.hot b{color:var(--po);}
  .s3-call.hot span{color:var(--ink2); opacity:1;}
  .s3-call.hot::after{width:26px; background:linear-gradient(90deg,var(--teal),var(--purple));}

  /* app shell */
  .s3-app{background:var(--p50); border-radius:15px; overflow:hidden;
    box-shadow:0 0 0 1px rgba(15,19,25,.07), 0 1px 0 rgba(255,255,255,.9) inset,
               0 18px 34px -18px rgba(15,19,25,.20), 0 42px 80px -40px rgba(15,19,25,.30);
    opacity:0; transform:translateY(22px);
    transition:opacity .9s var(--ease) .3s, transform .9s var(--ease) .3s;}
  .s3.in .s3-app{opacity:1; transform:translateY(0);}
  .s3-top{display:flex; align-items:center; justify-content:space-between; gap:14px; height:40px;
    padding:0 13px; background:linear-gradient(180deg,#fff,#FCFDFE); border-bottom:1px solid var(--p200);}
  .s3-tl{display:flex; align-items:center; gap:12px; min-width:0;}
  .s3-bd{display:flex; align-items:center; gap:7px;}
  .s3-bd img{height:18px; width:auto;}
  .s3-bd b{font-size:12.5px; font-weight:800; letter-spacing:.03em;}
  .s3-vr{width:1px; height:18px; background:var(--p200);}
  .s3-cb{display:flex; align-items:center; gap:6px; color:var(--ink2);}
  .s3-cb b{font-size:12px; font-weight:700; color:var(--ink); transition:opacity .3s var(--ease);}
  .s3-cb span{font-size:11.5px; color:var(--ink3); font-weight:500;}
  .s3-tr{display:flex; align-items:center; gap:9px;}
  .s3-search{display:flex; align-items:center; gap:7px; height:26px; padding:0 9px; width:158px;
    background:var(--p50); border:1px solid var(--p200); border-radius:7px; color:var(--ink3);}
  .s3-search svg{width:12px; height:12px; flex:none;}
  .s3-search span{font-size:11.5px;}
  .s3-bell{position:relative; width:26px; height:26px; border-radius:7px; display:flex;
    align-items:center; justify-content:center; background:#fff; border:1px solid var(--p200); color:var(--ink2);}
  .s3-bell svg{width:13px; height:13px;}
  .s3-bell i{position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%;
    background:var(--wnd); border:1.5px solid #fff;}
  .s3-usr{display:flex; align-items:center; gap:7px;}
  .s3-av{width:25px; height:25px; border-radius:50%; flex:none; display:flex; align-items:center;
    justify-content:center; font-size:9.5px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,#31DDD0,#8E6BFF); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--p200);}
  .s3-usr span{font-size:11.5px; font-weight:600; color:var(--ink2);}

  .s3-body{display:flex;}

  /* sidebar — visual only, never interactive */
  .s3-side{width:146px; flex:none; padding:8px 7px; background:#fff;
    border-right:1px solid var(--p200); display:flex; flex-direction:column; gap:1px;
    user-select:none; cursor:default;}
  .s3-sl{font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:600; letter-spacing:.15em;
    text-transform:uppercase; color:var(--ink3); padding:0 9px 5px;}
  .s3-nav{position:relative; display:flex; align-items:center; gap:8px; padding:5px 8px;
    border-radius:7px; font-size:11.5px; font-weight:500; color:var(--ink2); white-space:nowrap;
    cursor:default; transition:background .45s var(--ease), color .45s var(--ease);}
  .s3-nav svg{width:13.5px; height:13.5px; flex:none; opacity:.6; transition:opacity .45s var(--ease);}
  .s3-nav.on{background:var(--pobg); color:var(--po); font-weight:700;}
  .s3-nav.on svg{opacity:1;}
  .s3-nav::before{content:''; position:absolute; left:0; top:50%; width:2.5px; height:14px;
    border-radius:0 3px 3px 0; background:var(--grad);
    transform:translateY(-50%) scaleY(0); transform-origin:center;
    transition:transform .45s var(--ease);}
  .s3-nav.on::before{transform:translateY(-50%) scaleY(1);}
  .s3-nav .n{margin-left:auto; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:999px;
    background:var(--wnbg); color:var(--wn);}
  .s3-sf{margin-top:auto; padding:8px 9px 2px; border-top:1px solid var(--p100);}
  .s3-sync{display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--ink3); font-weight:600;}
  .s3-sync i{width:5px; height:5px; border-radius:50%; background:var(--okd);}

  .s3-main{flex:1; min-width:0; padding:9px 11px 11px; display:flex; flex-direction:column;}
  .s3-mh{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
  .s3-mh h3{font-size:13px; font-weight:800; letter-spacing:-.02em;}
  .s3-mh p{font-size:11px; color:var(--ink3); margin-top:1px; font-weight:500;}
  .s3-live{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace;
    font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ok); background:var(--okbg); padding:4px 9px; border-radius:999px;}
  .s3-live i{width:5px; height:5px; border-radius:50%; background:var(--okd); animation:blip 1.9s ease-in-out infinite;}

  /* every screen shares one cell, so the frame never changes height */
  .s3-screens{display:grid; flex:1;}
  .s3-screen{grid-area:1/1; align-self:start; min-width:0;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .5s var(--ease), transform .5s var(--ease);}
  .s3-screen.on{opacity:1; transform:translateY(0);}

  /* KPI row */
  .s3-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:7px;}
  .s3-kpi{background:#fff; border:1px solid var(--p200); border-radius:10px; padding:7px 9px 8px;
    box-shadow:0 1px 2px rgba(15,19,25,.04);}
  .s3-kpi .l{font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);}
  .s3-kpi .v{font-size:16.5px; font-weight:800; letter-spacing:-.03em; margin-top:3px;
    font-variant-numeric:tabular-nums lining-nums; line-height:1.1;}
  .s3-kpi .d{display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:9.5px;
    font-weight:700; padding:2.5px 6px; border-radius:999px;}
  .s3-kpi .d svg{width:9px; height:9px;}
  .s3-up{color:var(--ok); background:var(--okbg);} .s3-wr{color:var(--wn); background:var(--wnbg);}
  .s3-pp{color:var(--po); background:var(--pobg);} .s3-mt{color:var(--ink2); background:var(--p100);}

  /* health strip */
  .s3-health{background:#fff; border:1px solid var(--p200); border-radius:10px; padding:8px 10px 9px;
    margin-bottom:7px; box-shadow:0 1px 2px rgba(15,19,25,.04);}
  .s3-htop{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:7px;}
  .s3-ht{display:flex; align-items:baseline; gap:8px; white-space:nowrap;}
  .s3-ht h4{font-size:11.5px; font-weight:800; letter-spacing:-.01em;}
  .s3-ht b{font-size:15px; font-weight:800; letter-spacing:-.025em;}
  .s3-ht span{font-size:10.5px; font-weight:600; color:var(--ink3);}
  .s3-legend{display:flex; align-items:center; gap:15px; flex-wrap:wrap;}
  .s3-lg{display:flex; align-items:center; gap:6px; font-size:10.5px;}
  .s3-lg i{width:6px; height:6px; border-radius:2px;}
  .s3-lg em{font-style:normal; color:var(--ink2); font-weight:600;}
  .s3-lg b{font-weight:700; font-variant-numeric:tabular-nums;}
  .s3-bar{display:flex; height:6px; border-radius:999px; overflow:hidden; background:var(--p100); gap:1.5px;}
  .s3-bar span{height:100%; display:block; border-radius:999px;}

  /* panels */
  .s3-row{display:grid; gap:7px; margin-bottom:7px;}
  .s3-row.a{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);}
  .s3-row.b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .s3-card{background:#fff; border:1px solid var(--p200); border-radius:10px; overflow:hidden;
    box-shadow:0 1px 2px rgba(15,19,25,.04);}
  .s3-ch{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px;
    border-bottom:1px solid var(--p200); background:linear-gradient(180deg,#fff,#FCFDFE);}
  .s3-ch h4{font-size:11.5px; font-weight:800; letter-spacing:-.012em;}
  .s3-ch .more{font-size:9.5px; font-weight:600; color:var(--ink3);}
  .s3-tag{font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.08em;
    padding:3px 7px; border-radius:999px; background:var(--wnbg); color:var(--wn);}
  .s3-tag.po{background:var(--pobg); color:var(--po);}
  .s3-tag.ok{background:var(--okbg); color:var(--ok);}

  /* tables */
  .s3-t{width:100%; border-collapse:collapse; table-layout:fixed;}
  .s3-t thead th{text-align:left; padding:4px 10px; background:var(--p25);
    border-bottom:1px solid var(--p200); white-space:nowrap; overflow:hidden;
    font-family:'IBM Plex Mono',monospace; font-size:7px; font-weight:600;
    letter-spacing:.02em; text-transform:uppercase; color:var(--ink3);}
  .s3-t thead th.r{text-align:right;}
  .s3-t tbody td{padding:0 10px; height:26px; font-size:11px; border-bottom:1px solid var(--p100);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;}
  .s3-t tbody td.r{text-align:right; font-variant-numeric:tabular-nums lining-nums; font-weight:700;}
  .s3-t tbody td.r.mut{color:var(--ink3); font-weight:500;}
  .s3-t tbody tr:last-child td{border-bottom:none;}
  .s3-p{display:flex; align-items:center; gap:7px; min-width:0;}
  .s3-th{width:18px; height:18px; border-radius:5px; flex:none; display:flex; align-items:center;
    justify-content:center; font-size:7px; font-weight:800; color:#6C7686;
    background:linear-gradient(145deg,#F2F4F7,#E6EAF0); box-shadow:inset 0 0 0 1px rgba(15,19,25,.055);}
  .s3-nm{font-weight:700; letter-spacing:-.012em; overflow:hidden; text-overflow:ellipsis;}
  .s3-vr2{color:var(--ink2); font-size:10px; font-weight:500;}
  .s3-sku{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink3);}
  .s3-bg2{display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:9.5px;
    font-weight:700; padding:3px 8px 3px 6px; border-radius:999px;}
  .s3-bg2 i{width:5px; height:5px; border-radius:50%; background:currentColor; flex:none;}
  .s3-ok2{background:var(--okbg); color:var(--ok);} .s3-low{background:var(--wnbg); color:var(--wn);}
  .s3-po2{background:var(--pobg); color:var(--po);} .s3-out{background:var(--otbg); color:var(--ot);}

  /* list rows */
  .s3-list{padding:3px 5px 4px; display:flex; flex-direction:column; gap:1px;}
  .s3-it{display:flex; align-items:center; gap:8px; padding:4px 7px; border-radius:7px;}
  .s3-it > i{width:6px; height:6px; border-radius:50%; flex:none;}
  .s3-it .tx{min-width:0; flex:1;}
  .s3-it .tx b{display:block; font-size:11px; font-weight:700; letter-spacing:-.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .s3-it .tx span{display:block; font-size:10px; color:var(--ink2); font-weight:500; margin-top:1px;}
  .s3-it .rt{flex:none; font-size:10px; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums;}
  .s3-pill{flex:none; font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    letter-spacing:.07em; padding:3px 6px; border-radius:999px; background:var(--p100); color:var(--ink2);}
  .s3-pill.ok{background:var(--okbg); color:var(--ok);}
  .s3-pill.po{background:var(--pobg); color:var(--po);}
  .s3-pill.wn{background:var(--wnbg); color:var(--wn);}

  /* AI insight */
  .s3-ai{display:flex; align-items:center; gap:9px; padding:8px 10px; background:#fff;
    border:1px solid var(--p200); border-radius:10px; box-shadow:0 1px 2px rgba(15,19,25,.04);}
  .s3-aic{width:24px; height:24px; border-radius:7px; flex:none; display:flex; align-items:center;
    justify-content:center; background:var(--pobg); color:var(--po); box-shadow:inset 0 0 0 1px rgba(15,19,25,.05);}
  .s3-aic svg{width:13px; height:13px;}
  .s3-ai .tx{min-width:0;}
  .s3-ai .tx b{display:block; font-size:10.5px; font-weight:800; letter-spacing:-.01em;}
  .s3-ai .tx span{display:block; font-size:10.5px; color:var(--ink2); margin-top:1px; font-weight:500;}

  /* receiving: the loop closing */
  .s3-recv{display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:11px 13px; border-radius:10px; margin-top:7px;
    background:linear-gradient(180deg, rgba(15,163,150,.09), rgba(15,163,150,.05));
    border:1px solid rgba(15,163,150,.30);}
  .s3-recv .l b{display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ok);}
  .s3-recv .l span{display:block; font-size:11px; color:var(--ink2); margin-top:3px; font-weight:500;}
  .s3-recv .r{display:flex; align-items:center; gap:9px; white-space:nowrap;}
  .s3-recv .u{font-size:15px; font-weight:800; letter-spacing:-.03em; color:var(--ok);}
  .s3-recv .d{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800;
    letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
  .s3-recv .d s{text-decoration:none; color:var(--ink3);}
  .s3-recv .d svg{width:12px; height:12px; color:var(--ink3);}
  .s3-recv .d b{color:var(--ok);}

  /* reports: trend */
  .s3-trend{display:flex; align-items:flex-end; gap:5px; height:74px; padding:10px 12px 0;}
  .s3-trend i{flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--pod),rgba(124,85,240,.35));
    transform:scaleY(.35); transform-origin:bottom; transition:transform .8s var(--ease);}
  .s3-screen.on .s3-trend i{transform:scaleY(1);}
  .s3-tx{display:flex; justify-content:space-between; padding:6px 12px 10px;
    font-family:'IBM Plex Mono',monospace; font-size:8px; color:var(--ink3); letter-spacing:.06em;}

  /* narrow desktop: callout gutters squeeze the tables */
  @media (min-width:1181px) and (max-width:1330px){
    .s3-t tbody td{font-size:10.5px; padding:0 8px;}
  }
  /* tablet: "Reorder Point" is the long header */
  @media (max-width:820px){
    .s3-t thead th{font-size:6.5px;}
  }
  @media (max-width:1180px){
    .s3{padding:76px 0 76px;}
    .s3-title{font-size:34px;}
    .s3-hub{grid-template-columns:minmax(0,1fr); gap:20px;}
    .s3-calls{position:static; min-height:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 20px;}
    .s3-l{order:2;} .s3-rt{order:3;}
    .s3-call{position:static; transform:none; flex:0 1 200px; text-align:center !important; padding:0 !important;}
    .s3-call::after{display:none;}
  }
  @media (max-width:900px){
    .s3-row.a,.s3-row.b{grid-template-columns:minmax(0,1fr);}
    .s3-side{display:none;}
    .s3-kpis{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:620px){
    .s3{padding:42px 0 40px;}
    .s3-col-drop{display:none;}
    .s3-t thead th{font-size:6.5px; padding:4px 7px;}
    .s3-t tbody td{font-size:10px; padding:0 7px;}
    .s3-th{display:none;}
    .s3-bg2{font-size:8.5px; padding:3px 6px 3px 5px;}
    .s3-pill{font-size:7px; padding:3px 5px;}
    .s3-title{font-size:28px;} .s3-lead{font-size:14.5px;}
    .s3-search,.s3-usr span{display:none;}
    .s3-col-var,.s3-col-sku{display:none;}
    /* .s3-calls is two separate containers (.s3-l, .s3-rt — desktop's two
       side columns), stacked into one running list on mobile — :last-child
       would match each container's own last item, not the true last row,
       so the final divider has to be keyed off .s3-rt specifically since
       it's the one that renders second */
    .s3-call{flex:0 1 100%; padding:16px 0 !important; border-bottom:1px solid var(--p200);}
    .s3-rt .s3-call:last-child{border-bottom:0;}
    .s3-calls{gap:0 20px;}
    /* .s3-l and .s3-rt are desktop's two separate columns, stacked here into
       one continuous list — the s3-hub grid's row-gap (for spacing the
       screen mockup from the callouts) also lands between these two, which
       reads as one oversized gap in an otherwise even divider rhythm */
    .s3-calls.s3-rt{margin-top:-20px;}
    .s3-recv{flex-direction:column; align-items:flex-start; gap:8px;}

    /* Dashboard is the richest of the 5 tour screens (KPIs + health strip +
       two full card rows + an AI callout) — full-width on a phone that made
       it roughly 3-6x taller than the other screens. Trim its mobile
       footprint regardless of the framing approach below: drop the least
       essential panel and cap each list/table at 2 rows, matching the
       column-hiding this same breakpoint already does to the Products
       table above. */
    .s3-screen[data-screen="dashboard"] .s3-ai{display:none;}
    .s3-screen[data-screen="dashboard"] .s3-row.b{display:none;}
    .s3-screen[data-screen="dashboard"] .s3-list .s3-it:nth-child(n+3){display:none;}
    .s3-screen[data-screen="dashboard"] .s3-t tbody tr:nth-child(n+3){display:none;}

    /* On desktop every screen shares one grid cell so the frame is always
       sized to the tallest (fine there — nothing reflows below a fixed
       hero). On a phone the frame sits in normal page flow, so reserving
       the tallest screen's height under every shorter one leaves a large
       blank gap. The JS tour instead measures the incoming screen and sets
       an explicit height each time it switches, animated by this
       transition rather than snapping — and it pauses itself (see the
       IntersectionObserver in the script below) while the showcase is
       mostly scrolled out of view, so this animated resize never nudges
       page content while someone is reading what's below it. */
    .s3-screens{transition:height .5s var(--ease);}
  }


  /* ═══════════════ SECTION 6 — built + managed for you (white) ═══════════════ */
  .s6{
    /* the product-UI palette, scoped here so the light panels read the same as section 4's */
    --w:#fff; --p50:#F7F8FA; --p100:#EEF0F4; --p200:#E3E6EB; --p300:#CFD5DE;
    --ink:#0F1319; --ink2:#59626F; --ink3:#8A93A0;
    --okbg:#E4F7F4; --ok:#0A8278; --okd:#0FA396;
    --pobg:#EFEAFF; --po:#5F33DE; --pod:#7C55F0;
    position:relative; z-index:3; padding:52px 0 48px; color:var(--ink); overflow:hidden;
    background:#FBFCFD;
  }
  .s6::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 640px 300px at 18% 0%, rgba(49,221,208,.06), transparent 68%),
               radial-gradient(ellipse 720px 340px at 86% 76%, rgba(142,107,255,.055), transparent 68%);}
  .s6 > .wrap{position:relative; z-index:1;}

  .s6-head{max-width:620px; margin:0 auto 24px; text-align:center;}
  .s6-eyebrow{display:inline-flex; align-items:center; gap:9px; margin-bottom:13px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--po);}
  .s6-eyebrow::before{content:''; width:16px; height:1.5px; border-radius:2px; background:var(--grad);}
  .s6-title{font-size:31px; font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--ink);}
  .s6-title .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s6-lead{font-size:14px; line-height:1.58; color:var(--ink2); max-width:545px; margin:11px auto 0;}
  .s6-lead + .s6-lead{margin-top:6px;}

  .s6-r{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .s6.in .s6-r{opacity:1; transform:translateY(0);}
  .s6.in .s6-d1{transition-delay:.05s} .s6.in .s6-d2{transition-delay:.14s} .s6.in .s6-d3{transition-delay:.23s}

  /* ── one connected progression ── */
  .s6-track{position:relative;}
  .s6-rail{
    position:absolute; top:5px; left:0; right:0; height:1.5px; border-radius:2px;
    background:var(--p200); overflow:hidden;
  }
  .s6-rail i{
    position:absolute; inset:0 auto 0 0; width:0; border-radius:2px;
    background:linear-gradient(90deg, var(--okd), #6FAEE4 55%, var(--pod));
    transition:width .75s var(--ease);
  }

  .s6-stages{display:grid; grid-template-columns:repeat(4,1fr); gap:0 24px; position:relative;}

  .s6-stage{
    position:relative; display:flex; flex-direction:column;
    opacity:0; transform:translateY(14px);
    transition:opacity .65s var(--ease), transform .65s var(--ease);
  }
  .s6.in .s6-stage{opacity:1; transform:translateY(0);}

  .s6-dotm{
    position:relative; z-index:2; width:11px; height:11px; border-radius:50%;
    background:#FBFCFD; box-shadow:inset 0 0 0 1.5px var(--p300);
    transition:box-shadow .5s var(--ease), background .5s var(--ease);
  }
  .s6-stage.act .s6-dotm, .s6-stage.done .s6-dotm{
    box-shadow:inset 0 0 0 1.5px rgba(95,51,222,.75), 0 0 0 4px rgba(95,51,222,.10);
  }
  .s6-stage.act .s6-dotm{background:var(--pod);}
  .s6-stage.done .s6-dotm{background:rgba(124,85,240,.42);}

  /* number + icon share a line, so the stage head stays short */
  .s6-nl{display:flex; align-items:center; gap:9px; margin-top:10px;}
  .s6-n{
    display:block;
    font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:700; line-height:1;
    letter-spacing:-.02em; color:var(--p300);
    transition:color .5s var(--ease);
  }
  .s6-stage.act .s6-n, .s6-stage.done .s6-n, .s6-stage:hover .s6-n{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .s6-ic{
    width:26px; height:26px; border-radius:8px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--w); border:1px solid var(--p200);
    transition:border-color .5s var(--ease), background .5s var(--ease);
  }
  .s6-ic svg{width:13px; height:13px; color:var(--ink3); transition:color .5s var(--ease);}
  .s6-stage.act .s6-ic, .s6-stage.done .s6-ic, .s6-stage:hover .s6-ic{
    background:var(--pobg); border-color:rgba(95,51,222,.24);
  }
  .s6-stage.act .s6-ic svg, .s6-stage.done .s6-ic svg, .s6-stage:hover .s6-ic svg{color:var(--po);}

  .s6-stage h3{
    font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    margin-top:8px; color:var(--ink2); transition:color .45s var(--ease);
  }
  .s6-stage.act h3, .s6-stage.done h3, .s6-stage:hover h3{color:var(--ink);}
  .s6-stage p{font-size:12px; line-height:1.5; color:var(--ink3); margin-top:6px; min-height:42px;}

  /* the small service panel */
  .s6-ui{
    margin-top:9px; padding:9px 10px 10px; border-radius:13px; min-height:92px;
    background:var(--w); border:1px solid var(--p200);
    box-shadow:0 1px 2px rgba(15,19,25,.045), 0 6px 16px -14px rgba(15,19,25,.18);
    transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease);
  }
  .s6-stage.act .s6-ui{
    border-color:rgba(95,51,222,.32);
    box-shadow:0 1px 2px rgba(15,19,25,.045), 0 0 0 3px rgba(95,51,222,.07);
  }
  .s6-stage:hover .s6-ui{transform:translateY(-2px); border-color:var(--p300);
    box-shadow:0 12px 26px -18px rgba(15,19,25,.28);}

  /* every panel is labelled, so it reads as real software at rest */
  .s6-ul{
    display:block; margin-bottom:7px;
    font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
  }

  /* 01 — the system assembling, module by module */
  .s6-chain{display:flex; flex-direction:column;}
  .s6-mod{
    display:flex; align-items:center; gap:7px; padding:4px 8px; border-radius:7px;
    background:var(--p50); font-size:9.5px; font-weight:600;
    color:var(--ink3); white-space:nowrap;
    opacity:.8; transition:opacity .45s var(--ease), color .45s var(--ease),
               background .45s var(--ease), box-shadow .45s var(--ease);
  }
  .s6-mod i{width:4px; height:4px; border-radius:50%; background:var(--grad); flex:none; opacity:.5;
    transition:opacity .45s var(--ease);}
  .s6-mod.on{opacity:1; color:var(--ink); background:var(--pobg);
    box-shadow:inset 0 0 0 1px rgba(95,51,222,.20);}
  .s6-mod.on i{opacity:1;}
  .s6-tie{
    width:1.5px; height:6px; margin-left:12px; border-radius:2px;
    background:var(--p200); position:relative; overflow:hidden;
  }
  .s6-tie i{position:absolute; inset:0; border-radius:2px;
    background:linear-gradient(180deg,var(--okd),var(--pod));
    transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease);}
  .s6-tie.on i{transform:scaleY(1);}

  /* 02 / 04 — configuration + health rows */
  .s6-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:4px 0; font-size:10px; border-bottom:1px solid var(--p100);
    opacity:.8; transition:opacity .45s var(--ease);
  }
  .s6-row:last-child{border-bottom:none;}
  .s6-row.on{opacity:1;}
  .s6-row span{color:var(--ink3); font-weight:500;}
  .s6-row b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;
    transition:color .5s var(--ease);}
  .s6-row b.lit{color:var(--ok);}

  /* 03 — the workflow states */
  .s6-flow{display:flex; flex-direction:column; gap:4px;}
  .s6-f{
    display:flex; align-items:center; gap:7px; padding:4px 8px; border-radius:7px;
    background:var(--p50); font-size:9.5px; font-weight:600; color:var(--ink3);
    opacity:.8; transition:opacity .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
  }
  .s6-f i{width:4.5px; height:4.5px; border-radius:50%; background:currentColor; flex:none;}
  .s6-f.on{opacity:1; color:var(--ink); background:var(--pobg);}
  .s6-f.ok{color:var(--ok); background:var(--okbg);}
  .s6-tag{
    display:inline-flex; align-items:center; gap:5px; margin-top:7px;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.1em;
    padding:3px 8px; border-radius:999px;
    background:var(--p50); color:var(--ink3); box-shadow:inset 0 0 0 1px var(--p200);
    transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
  }
  .s6-tag.ok{background:var(--okbg); color:var(--ok); box-shadow:inset 0 0 0 1px rgba(15,163,150,.24);}

  /* 04 — the ongoing service, carried a little further than the rest */
  .s6-stage.s6-final .s6-n{font-size:27px;}
  .s6-stage.s6-final .s6-ui{
    background:linear-gradient(180deg,#FCFBFF 0%, #F7FCFB 100%);
    border-color:#DFDCF2;
    box-shadow:0 1px 2px rgba(15,19,25,.05), 0 12px 28px -20px rgba(95,51,222,.26);
  }
  .s6-stage.s6-final.act .s6-ui, .s6-stage.s6-final.done .s6-ui{
    border-color:rgba(15,163,150,.34);
    box-shadow:0 1px 2px rgba(15,19,25,.05), 0 0 0 3px rgba(15,163,150,.07),
               0 12px 28px -18px rgba(15,163,150,.28);
  }
  .s6-live{
    display:inline-flex; align-items:center; gap:5px;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.08em;
    color:var(--ink3); transition:color .5s var(--ease);
  }
  .s6-live i{width:5px; height:5px; border-radius:50%; background:currentColor;}
  .s6-live.on{color:var(--ok);}
  .s6-live.on i{animation:s6beat 1.9s ease-in-out infinite;}
  @keyframes s6beat{
    0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(15,163,150,.45);}
    50%{opacity:.6; box-shadow:0 0 0 5px rgba(15,163,150,0);}
  }
  .s6-keep{
    margin-top:7px; padding-top:7px; border-top:1px dashed var(--p200);
    font-size:11px; line-height:1.45; color:var(--ok);
    opacity:0; transition:opacity .6s var(--ease);
  }
  .s6.in .s6-keep{opacity:1; transition-delay:2.1s;}

  /* the conclusion — a compact centred callout, not a band */
  .s6-footw{margin-top:20px; text-align:center;}
  .s6-foot{
    display:inline-flex; align-items:center; gap:10px; margin:0;
    padding:9px 19px; border-radius:999px;
    background:var(--w); border:1px solid var(--p200);
    box-shadow:0 1px 2px rgba(15,19,25,.045), 0 10px 24px -20px rgba(15,19,25,.30);
    font-size:12.5px; font-weight:600; color:var(--ink); text-align:left;
    opacity:0; transform:translateY(8px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .s6-foot::before{
    content:''; width:16px; height:1.5px; border-radius:2px; flex:none; background:var(--grad);
  }
  .s6.in .s6-foot{opacity:1; transform:translateY(0); transition-delay:2.3s;}

  @media (max-width:1080px){
    .s6{padding:46px 0 42px;}
    .s6-title{font-size:28px;}
    .s6-stages{grid-template-columns:1fr 1fr; gap:26px 22px;}
    .s6-rail{display:none;}
    .s6-stage p{min-height:0;}
    .s6-ui{min-height:0;}
  }
  @media (max-width:620px){
    .s6{padding:40px 0 38px;}
    .s6-title{font-size:26px;} .s6-lead{font-size:14px;}
    .s6-head{margin-bottom:26px;}
    .s6-stages{grid-template-columns:1fr; gap:22px;}
    .s6-n{font-size:23px;} .s6-stage.s6-final .s6-n{font-size:25px;}
    .s6-footw{margin-top:22px;}
    .s6-foot{font-size:12px; padding:9px 16px;}
  }

  /* ═══════════════ SECTION 7 — pricing + final CTA (dark) ═══════════════ */
  .s7{
    position:relative; z-index:3; padding:98px 0 96px; color:var(--ink); overflow:hidden;
    background:linear-gradient(180deg,#0B0D10 0%, #08090C 50%, #0B0D10 100%);
  }
  .s7::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 640px 340px at 22% 8%, rgba(49,221,208,.10), transparent 66%),
               radial-gradient(ellipse 720px 400px at 80% 55%, rgba(142,107,255,.13), transparent 66%);}
  .s7 > .wrap{position:relative; z-index:1;}

  .s7-head{max-width:660px; margin:0 auto 44px; text-align:center;}
  .s7-title{font-size:44px; font-weight:800; line-height:1.12; letter-spacing:-.034em; color:#fff; text-wrap:balance;}
  .s7-title .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s7-lead{font-size:15.5px; line-height:1.7; color:rgba(245,246,248,.62); margin:18px auto 0; max-width:520px;}

  .s7-r{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .s7.in .s7-r{opacity:1; transform:translateY(0);}
  .s7.in .s7-d1{transition-delay:.05s} .s7.in .s7-d2{transition-delay:.15s} .s7.in .s7-d3{transition-delay:.25s}

  /* ── the two plans ── */
  .s7-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; max-width:920px; margin:0 auto;}
  .s7-card{
    position:relative; padding:26px 26px 28px; border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
    border:1px solid rgba(255,255,255,.085);
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
    opacity:0; transform:translateY(16px) scale(.985);
    transition:opacity .7s var(--ease), transform .7s var(--ease),
               border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  .s7.in .s7-card{opacity:1; transform:translateY(0) scale(1);}
  .s7.in .s7-card:nth-child(1){transition-delay:.34s}
  .s7.in .s7-card:nth-child(2){transition-delay:.46s}
  .s7-card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.16);}

  .s7-clab{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
  .s7-cic{
    width:32px; height:32px; border-radius:10px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.055); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .s7-cic svg{width:15px; height:15px;}
  .s7-clab b{
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
  }
  /* setup leans teal, management leans purple */
  .s7-setup .s7-clab b{color:var(--teal);}
  .s7-setup .s7-cic{box-shadow:inset 0 0 0 1px rgba(49,221,208,.3);}
  .s7-setup{border-color:rgba(49,221,208,.16);}
  .s7-mgmt .s7-clab b{color:#A98BFF;}
  .s7-mgmt .s7-cic{box-shadow:inset 0 0 0 1px rgba(142,107,255,.32);}
  .s7-mgmt{border-color:rgba(142,107,255,.18);}

  .s7-now{
    display:flex; align-items:baseline; gap:2px;
    font-size:48px; font-weight:800; letter-spacing:-.04em; color:#fff; line-height:1;
  }
  .s7-now em{font-style:normal; font-size:20px; font-weight:700; color:rgba(245,246,248,.92);}
  .s7-term{display:block; margin-top:11px; font-size:13px; color:rgba(245,246,248,.92); font-weight:600;}

  .s7-list{
    list-style:none; margin:22px 0 0; padding:20px 0 0;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex; flex-direction:column; gap:11px;
  }
  .s7-list li{
    position:relative; padding-left:24px;
    font-size:14px; line-height:1.45; font-weight:500; color:#fff;
  }
  .s7-list li::before{
    content:''; position:absolute; left:2px; top:5px;
    width:9px; height:5px; border-left:1.8px solid; border-bottom:1.8px solid;
    transform:rotate(-45deg);
  }
  .s7-setup .s7-list li::before{color:var(--teal);}
  .s7-mgmt .s7-list li::before{color:#A98BFF;}

  /* ── final CTA ── */
  .s7-final{
    margin-top:64px; text-align:center;
    opacity:0; transform:translateY(16px);
    transition:opacity .8s var(--ease) .72s, transform .8s var(--ease) .72s;
  }
  .s7.in .s7-final{opacity:1; transform:translateY(0);}
  .s7-final h3{font-size:31px; font-weight:800; letter-spacing:-.028em; color:#fff; line-height:1.2;}
  .s7-final h3 .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s7-final p{font-size:15px; line-height:1.65; color:rgba(245,246,248,.58); margin:14px auto 28px; max-width:520px;}
  .s7-note{
    display:block; margin-top:22px;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    letter-spacing:.19em; text-transform:uppercase; color:rgba(245,246,248,.34);
  }

  @media (max-width:1020px){
    .s7{padding:80px 0 80px;}
    .s7-title{font-size:36px;}
    .s7-final{margin-top:52px;}
    .s7-final h3{font-size:27px;}
  }
  @media (max-width:720px){
    .s7-cards{grid-template-columns:1fr; gap:13px; max-width:520px;}
  }
  @media (max-width:620px){
    .s7{padding:62px 0 64px;}
    .s7-title{font-size:28px;}
    .s7-lead{font-size:14.5px;}
    .s7-card{padding:20px 18px 22px;}
    .s7-now{font-size:40px;}
    .s7-list{margin-top:18px; padding-top:16px; gap:10px;}
    .s7-list li{font-size:13.5px;}
    .s7-final h3{font-size:23px;}
    .s7-final p{font-size:14px;}
  }

  /* ═══════════════ SECTION 4 — how it works + what Opslee automates (combined) ═══════════════ */
  /* ═══════════════ SECTION 4 — how it works: three phases (dark) ═══════════════ */
  .s45-dark{
    position:relative; z-index:3; padding:96px 0 92px; color:var(--ink); overflow:hidden;
    background:linear-gradient(180deg,#0B0D10 0%, #0A0C0F 60%, #0B0D10 100%);
  }
  .s45-dark::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 640px 340px at 50% 30%, rgba(142,107,255,.13), transparent 66%),
               radial-gradient(ellipse 520px 300px at 12% 12%, rgba(49,221,208,.09), transparent 66%);}
  .s45-dark > .wrap{position:relative; z-index:1;}

  .s4-head{max-width:600px; margin:0 auto 44px; text-align:center;}
  .s4-eyebrow{display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--teal);}
  .s4-eyebrow::before{content:''; width:16px; height:1.5px; border-radius:2px; background:var(--grad);}
  .s4-title{font-size:40px; font-weight:800; line-height:1.14; letter-spacing:-.03em; color:#fff;}
  .s4-title .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s4-lead{font-size:15.5px; line-height:1.72; color:rgba(245,246,248,.66); max-width:545px; margin:16px auto 0;}

  .s4-r{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .s45.in .s4-r{opacity:1; transform:translateY(0);}
  .s45.in .s4-d1{transition-delay:.05s} .s45.in .s4-d2{transition-delay:.14s}
  .s45.in .s4-d3{transition-delay:.23s} .s45.in .s4-d4{transition-delay:.34s}

  /* three phases across the page */
  .s4-phases{display:grid; grid-template-columns:1fr 42px 1.12fr 42px 1fr; align-items:stretch;}

  .s4-ph{
    position:relative; border-radius:16px; padding:16px 15px 15px;
    background:rgba(255,255,255,0.028);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.075);
    transition:box-shadow .5s var(--ease), background .5s var(--ease);
  }
  /* the middle phase carries the weight — this is where the manual work disappears */
  .s4-ph.core{
    padding:18px 17px 17px;
    background:linear-gradient(180deg, rgba(49,221,208,0.05), rgba(142,107,255,0.06));
  }
  .s4-ph.core::before{
    content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
    background:linear-gradient(115deg, rgba(49,221,208,.42), rgba(142,107,255,.42));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
    opacity:0; transition:opacity .8s var(--ease);
  }
  .s45.in .s4-ph.core::before{opacity:1;}
  .s4-ph.act{background:rgba(255,255,255,0.05);}

  .s4-plab{
    display:flex; align-items:center; gap:8px; margin-bottom:13px;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:rgba(245,246,248,.42);
    transition:color .45s var(--ease);
  }
  .s4-plab s{text-decoration:none; opacity:.55;}
  .s4-ph.core .s4-plab{color:rgba(245,246,248,.62);}
  .s4-ph.act .s4-plab{color:#fff;}

  /* compact steps */
  .s4-step{
    display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:9px 10px;
    background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.085);
    border-radius:11px;
    opacity:0; transform:translateY(8px);
    transition:opacity .5s var(--ease), transform .5s var(--ease),
               border-color .45s var(--ease), background .45s var(--ease), box-shadow .5s var(--ease);
  }
  .s45.in .s4-step{opacity:1; transform:translateY(0);}
  .s4-ic{width:27px; height:27px; border-radius:8px; flex:none; display:flex; align-items:center;
    justify-content:center; background:rgba(255,255,255,0.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
    transition:background .4s var(--ease), box-shadow .4s var(--ease);}
  .s4-ic svg{width:14px; height:14px; opacity:.85; transition:opacity .4s var(--ease);}
  .s4-tx{min-width:0; flex:1;}
  .s4-tx b{display:block; font-size:11.5px; font-weight:700; letter-spacing:-.01em;
    color:rgba(245,246,248,.82); line-height:1.3; transition:color .4s var(--ease);}
  .s4-tx span{display:block; font-size:10.5px; color:rgba(245,246,248,.46); margin-top:2px; line-height:1.4;}
  .s4-step.act{
    background:rgba(255,255,255,0.075); border-color:rgba(124,85,240,.5);
    box-shadow:0 0 0 3px rgba(124,85,240,.09), 0 10px 26px -14px rgba(142,107,255,.6);
  }
  .s4-step.act .s4-ic{background:rgba(255,255,255,0.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15);}
  .s4-step.act .s4-ic svg{opacity:1;}
  .s4-step.act .s4-tx b{color:#fff;}
  .s4-step.done{border-color:rgba(255,255,255,0.14);}
  .s4-step.done .s4-tx b{color:rgba(245,246,248,.9);}
  .s4-step:hover{border-color:rgba(255,255,255,0.2);}

  /* small vertical link inside a phase */
  .s4-lnk{height:16px; display:flex; align-items:center; padding-left:23px;}
  .s4-lnk i{position:relative; display:block; width:1.5px; height:100%; border-radius:2px;
    background:rgba(255,255,255,0.11); overflow:hidden;}
  .s4-lnk i::after{content:''; position:absolute; inset:0; border-radius:2px;
    background:linear-gradient(180deg,var(--teal),var(--purple));
    transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease);}
  .s4-lnk.on i::after{transform:scaleY(1);}

  /* big arrow between phases */
  .s4-arrow{display:flex; align-items:center; justify-content:center; position:relative;}
  .s4-arrow i{position:relative; display:block; width:100%; height:1.5px; border-radius:2px;
    background:rgba(255,255,255,0.11); overflow:hidden;}
  .s4-arrow i::after{content:''; position:absolute; inset:0; border-radius:2px;
    background:linear-gradient(90deg,var(--teal),var(--purple));
    transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);}
  .s4-arrow.on i::after{transform:scaleX(1);}
  .s4-arrow::after{
    content:''; position:absolute; right:4px; width:6px; height:6px;
    border-right:1.5px solid rgba(255,255,255,0.22); border-top:1.5px solid rgba(255,255,255,0.22);
    transform:rotate(45deg); transition:border-color .5s var(--ease);
  }
  .s4-arrow.on::after{border-color:var(--purple);}

  /* inline safeguard + control notes */
  .s4-safe{
    flex-basis:100%; display:flex; align-items:center; gap:7px; margin-top:8px; padding:6px 8px;
    background:rgba(15,163,150,.10); border:1px solid rgba(15,163,150,.28); border-radius:8px;
    opacity:0; transform:translateY(5px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .s4-safe.on{opacity:1; transform:translateY(0);}
  .s4-safe svg{width:11px; height:11px; flex:none; color:var(--teal);}
  .s4-safe b{display:block; font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:var(--teal);}
  .s4-safe span{display:block; font-size:10px; color:rgba(245,246,248,.55); margin-top:1px;}

  .s4-ctrl{
    display:flex; align-items:flex-start; gap:6px; margin-top:8px; padding-top:8px;
    border-top:1px dashed rgba(255,255,255,0.10);
    opacity:0; transition:opacity .6s var(--ease);
  }
  .s45.in .s4-ctrl{opacity:1; transition-delay:1.6s;}
  .s4-ctrl svg{width:11px; height:11px; flex:none; margin-top:1px; color:var(--teal);}
  .s4-ctrl b{display:block; font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--teal);}
  .s4-ctrl span{display:block; font-size:10px; color:rgba(245,246,248,.5); margin-top:2px; line-height:1.4;}

  .s4-pill{
    display:inline-flex; align-items:center; margin-left:auto; flex:none;
    font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700; letter-spacing:.08em;
    padding:3px 7px; border-radius:999px;
    background:rgba(255,255,255,.07); color:rgba(245,246,248,.55);
    transition:background .5s var(--ease), color .5s var(--ease);
  }
  .s4-pill.ok{background:rgba(15,163,150,.16); color:var(--teal);}

  .s4-foot{text-align:center; margin-top:40px; font-size:13.5px; font-weight:500; color:rgba(245,246,248,.58);}

  @media (max-width:1080px){
    .s45-dark{padding:78px 0 78px;}
    .s4-title{font-size:34px;}
    .s4-phases{grid-template-columns:minmax(0,1fr); gap:0;}
    .s4-arrow{height:34px; padding:8px 0;}
    .s4-arrow i{width:1.5px; height:100%;}
    .s4-arrow i::after{transform:scaleY(0); transform-origin:top;
      background:linear-gradient(180deg,var(--teal),var(--purple));}
    .s4-arrow.on i::after{transform:scaleY(1);}
    .s4-arrow::after{right:auto; bottom:4px; transform:rotate(135deg);}
  }
  @media (max-width:620px){
    .s45-dark{padding:62px 0 64px;}
    .s4-title{font-size:28px;} .s4-lead{font-size:14.5px;}
    .s4-ph{padding:14px 13px 13px;} .s4-ph.core{padding:15px 14px 14px;}
    .s4-foot{font-size:12.5px;}
  }


  /* ═══════════════ SECTION 5 — what Opslee automates (light, editorial) ═══════════════ */
  .s45-light{
    --w:#fff; --p50:#F7F8FA; --p100:#EEF0F4; --p200:#E3E6EB; --p300:#CFD5DE;
    --ink:#0F1319; --ink2:#59626F; --ink3:#8A93A0;
    --okbg:#E4F7F4; --ok:#0A8278; --okd:#0FA396;
    --wnbg:#FDF3E4; --wn:#9E5D0A; --wnd:#E0A02A;
    --pobg:#EFEAFF; --po:#5F33DE; --pod:#7C55F0;
    position:relative; z-index:3; padding:100px 0 96px; color:var(--ink);
    background:#FDFDFE;
  }
  .s45-light::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 720px 300px at 50% 0%, rgba(142,107,255,.055), transparent 70%);
  }
  .s45-light > .wrap{position:relative; z-index:1;}

  .s5-head{max-width:610px; margin:0 auto 56px; text-align:center;}
  .s5-eyebrow{display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--po);}
  .s5-eyebrow::before{content:''; width:16px; height:1.5px; border-radius:2px; background:var(--grad);}
  .s5-title{font-size:40px; font-weight:800; line-height:1.14; letter-spacing:-.03em;}
  .s5-title .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s5-lead{font-size:15.5px; line-height:1.72; color:var(--ink2); max-width:565px; margin:16px auto 0;}

  .s5-r{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .s45.in .s5-r{opacity:1; transform:translateY(0);}
  .s45.in .s5-d1{transition-delay:.05s} .s45.in .s5-d2{transition-delay:.14s} .s45.in .s5-d3{transition-delay:.23s}

  /* three editorial columns, separated by hairlines — not feature cards */
  .s5-cols{display:grid; grid-template-columns:1.1fr 1fr 0.96fr; gap:0;}
  .s5-col{
    position:relative; padding:0 34px;
    opacity:0; transform:translateY(18px);
    transition:opacity .75s var(--ease), transform .75s var(--ease);
  }
  .s45.in .s5-col{opacity:1; transform:translateY(0);}
  .s45.in .s5-col:nth-child(1){transition-delay:.30s}
  .s45.in .s5-col:nth-child(2){transition-delay:.55s}
  .s45.in .s5-col:nth-child(3){transition-delay:.80s}
  .s5-col:first-child{padding-left:0;}
  .s5-col:last-child{padding-right:0;}
  .s5-col + .s5-col{border-left:1px solid var(--p200);}

  .s5-num{
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.16em;
    color:var(--ink3); transition:color .4s var(--ease);
  }
  .s5-col:hover .s5-num{color:var(--po);}
  .s5-col h3{
    font-size:23px; font-weight:800; letter-spacing:-.025em; margin-top:11px;
    color:var(--ink); transition:color .35s var(--ease);
  }
  .s5-col:nth-child(2) h3{font-size:21px;}
  .s5-col:nth-child(3) h3{font-size:20px;}
  .s5-say{font-size:13.5px; line-height:1.6; color:var(--ink2); margin-top:9px; max-width:290px;}

  /* the small product UI moment */
  .s5-ui{
    margin:20px 0 20px; padding:12px 13px;
    background:var(--w); border:1px solid var(--p200); border-radius:11px;
    box-shadow:0 1px 2px rgba(15,19,25,.04);
    transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  }
  .s5-col:hover .s5-ui{border-color:var(--p300); box-shadow:0 8px 22px -12px rgba(15,19,25,.20); transform:translateY(-1px);}
  .s5-uh{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .s5-uh b{font-size:11.5px; font-weight:700; letter-spacing:-.01em;}
  .s5-uh em{font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink3);}

  /* big readout: AVAILABLE 25 → 7 */
  .s5-read{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:10px;}
  .s5-read small{display:block; font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600;
    letter-spacing:.11em; text-transform:uppercase; color:var(--ink3);}
  .s5-read b{display:block; font-size:26px; font-weight:800; letter-spacing:-.035em; line-height:1.05;
    margin-top:3px; font-variant-numeric:tabular-nums lining-nums;
    transition:color .45s var(--ease);}
  .s5-read b.low{color:var(--wn);}
  .s5-bump{animation:s5bump .55s var(--ease);}
  @keyframes s5bump{0%{opacity:0; transform:translateY(-5px);} 100%{opacity:1; transform:translateY(0);}}

  .s5-bar{height:5px; border-radius:999px; background:var(--p100); overflow:hidden; margin-top:11px;}
  .s5-bar i{display:block; height:100%; border-radius:999px; background:var(--okd);
    width:100%; transition:width .8s var(--ease), background .5s var(--ease);}
  .s5-bar i.low{background:var(--wnd);}

  /* chips / status */
  .s5-chip{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.09em;
    padding:3.5px 8px; border-radius:999px; background:var(--p100); color:var(--ink2);
    transition:background .5s var(--ease), color .5s var(--ease);
  }
  .s5-chip.warn{background:var(--wnbg); color:var(--wn);}
  .s5-chip.po{background:var(--pobg); color:var(--po);}
  .s5-chip.ok{background:var(--okbg); color:var(--ok);}
  .s5-chip.hide{opacity:0; transform:translateY(-3px);
    transition:opacity .45s var(--ease), transform .45s var(--ease);}
  .s5-chip.show{opacity:1; transform:translateY(0);}

  /* stacked mini rows (purchasing / receiving) */
  .s5-rows{display:flex; flex-direction:column; gap:7px; margin-top:11px;}
  .s5-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:7px 9px; border-radius:8px; background:var(--p50);
    border:1px solid transparent;
    opacity:.45; transition:opacity .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  }
  .s5-row.on{opacity:1; background:var(--w); border-color:var(--p200);}
  .s5-row span{font-size:11px; font-weight:600; color:var(--ink2);}
  .s5-row span b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;}

  /* 7 → 47 */
  .s5-delta{display:flex; align-items:center; gap:7px; margin-top:11px;
    font-size:15px; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
    opacity:0; transition:opacity .5s var(--ease);}
  .s5-delta.on{opacity:1;}
  .s5-delta s{text-decoration:none; color:var(--ink3);}
  .s5-delta svg{width:13px; height:13px; color:var(--ink3);}
  .s5-delta em{font-style:normal; color:var(--ok);}

  /* capability list — deliberately secondary to the product UI above it */
  .s5-caps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
  .s5-caps li{
    display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:500; color:var(--ink3);
    opacity:0; transform:translateX(-4px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
  }
  .s45.in .s5-caps li{opacity:1; transform:translateX(0);}
  .s5-caps li::before{
    content:''; width:4px; height:4px; border-radius:50%; flex:none;
    background:var(--grad); opacity:.5; transition:opacity .3s var(--ease);
  }
  .s5-col:hover .s5-caps li{color:var(--ink2);}
  .s5-col:hover .s5-caps li::before{opacity:.9;}

  /* the AI note — deliberately small, and only under inventory */
  .s5-ai{
    margin-top:20px; padding-top:14px; border-top:1px dashed var(--p200);
    opacity:0; transition:opacity .6s var(--ease);
  }
  .s45.in .s5-ai{opacity:1; transition-delay:1.5s;}
  .s5-ai b{display:flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);}
  .s5-ai b::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--grad); flex:none;}
  .s5-ai span{display:block; font-size:11.5px; line-height:1.55; color:var(--ink3); margin-top:5px;}

  /* the control note under purchasing — accuracy matters */
  .s5-ctrl{
    margin-top:18px; padding-top:13px; border-top:1px dashed var(--p200);
    font-size:11.5px; line-height:1.55; color:var(--ink3);
    opacity:0; transition:opacity .6s var(--ease);
  }
  .s45.in .s5-ctrl{opacity:1; transition-delay:1.6s;}
  .s5-ctrl b{color:var(--ink2); font-weight:700;}

  @media (max-width:1080px){
    .s45-light{padding:80px 0 78px;}
    .s5-title{font-size:34px;}
    .s5-cols{grid-template-columns:1fr; gap:0;}
    .s5-col{padding:26px 0 !important;}
    .s5-col + .s5-col{border-left:none; border-top:1px solid var(--p200);}
    .s5-col h3, .s5-col:nth-child(2) h3, .s5-col:nth-child(3) h3{font-size:22px;}
    .s5-say{max-width:520px;}
    .s5-ui{max-width:420px;}
  }
  @media (max-width:620px){
    .s45-light{padding:62px 0 64px;}
    .s5-title{font-size:28px;} .s5-lead{font-size:14.5px;}
    .s5-head{margin-bottom:38px;}
    .s5-read b{font-size:23px;}
  }





  /* ── the combined section: one wrapper, dark top, unbroken white body ── */
  .s45{position:relative; z-index:3;}

  /* compaction of the dark workflow half */
  .s45-dark{padding:80px 0 62px !important;}
  .s45-dark .s4-head{margin-bottom:32px;}
  .s45-dark .s4-title{font-size:36px;}
  .s45-dark .s4-lead{font-size:15px; margin-top:14px;}
  .s45-dark .s4-ph{padding:14px 13px 13px; border-radius:14px;}
  .s45-dark .s4-ph.core{padding:15px 14px 14px;}
  .s45-dark .s4-plab{margin-bottom:11px;}
  .s45-dark .s4-step{padding:8px 9px; border-radius:10px;}
  .s45-dark .s4-ic{width:25px; height:25px; border-radius:7px;}
  .s45-dark .s4-ic svg{width:13px; height:13px;}
  .s45-dark .s4-tx b{font-size:11px;}
  .s45-dark .s4-tx span{font-size:10px;}
  .s45-dark .s4-lnk{height:13px;}
  .s45-dark .s4-foot{margin-top:28px; font-size:13px;}

  /* the white half runs straight through both parts */
  .s45-light{padding:38px 0 40px !important;}
  .s45-light .s5-head{margin-bottom:20px;}
  .s45-light .s5-col{padding:0 28px;}
  .s45-light .s5-col h3{margin-top:9px;}
  .s45-light .s5-say{margin-top:7px;}
  .s45-light .s5-title{font-size:36px;}
  .s45-light .s5-ai{
    margin-top:11px; padding:10px 11px 11px; border-top:none;
    background:linear-gradient(180deg, rgba(95,51,222,.045), rgba(95,51,222,.02));
    border:1px solid rgba(95,51,222,.16); border-radius:11px;
  }
  .s45-light .s5-ai b{color:#5F33DE; font-size:9px; letter-spacing:.13em;}
  .s45-light .s5-ai b::before{display:none;}
  .s45-light .s5-ai b svg{width:13px; height:13px; flex:none;}
  .s45-light .s5-ai span{font-size:12px; line-height:1.55; color:#59626F; margin-top:6px;}

  .s45-light .s5-ui{margin:10px 0 10px; padding:10px 11px;}
  .s45-light .s5-caps{gap:4px;}
  .s45-light .s5-say{margin-top:6px;}

  /* ═══ what this means for you — the dark payoff ═══ */
  .s45-out{
    position:relative; z-index:3; overflow:hidden; color:var(--ink);
    padding:88px 0 96px;
    background:linear-gradient(180deg,#0B0D10 0%, #08090C 52%, #0B0D10 100%);
  }
  .s45-out::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 780px 380px at 50% 0%, rgba(142,107,255,.16), transparent 68%),
               radial-gradient(ellipse 620px 340px at 8% 96%, rgba(49,221,208,.09), transparent 70%);}
  .s45-out > .wrap{position:relative; z-index:1;}

  .s45-outhd{max-width:640px; margin:0 auto 46px; text-align:center;}
  .s45-oute{
    display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
  }
  .s45-oute::before{content:''; width:16px; height:1.5px; border-radius:2px; background:var(--grad);}
  .s45-outh{
    font-size:40px; font-weight:800; line-height:1.14; letter-spacing:-.03em; color:#fff;
  }
  .s45-outh .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .s45-outr{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .s45-out.in .s45-outr{opacity:1; transform:translateY(0);}
  .s45-out.in .s45-outd1{transition-delay:.05s} .s45-out.in .s45-outd2{transition-delay:.14s}

  /* six across, inside the same centred container as everything above */
  .s45-outs{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
    align-items:stretch;
  }
  .oc{
    position:relative; display:flex; flex-direction:column; height:100%;
    padding:22px 20px 22px; border-radius:17px; isolation:isolate;
    background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.085), 0 2px 10px -6px rgba(0,0,0,.6);
    opacity:0; transform:translateY(16px);
    transition:opacity .6s var(--ease), transform .42s var(--ease),
               box-shadow .42s var(--ease), background .42s var(--ease);
  }
  .oc::before{
    content:''; position:absolute; inset:0; border-radius:17px; z-index:-1; opacity:0;
    background:radial-gradient(ellipse 220px 160px at 50% 0%, rgba(142,107,255,.30), transparent 70%),
               radial-gradient(ellipse 200px 150px at 50% 108%, rgba(49,221,208,.18), transparent 70%);
    transition:opacity .42s var(--ease);
  }
  .s45-out.in .oc{opacity:1; transform:translateY(0);}
  .s45-out.in .oc:nth-child(1){transition-delay:.06s,0s,0s,0s}
  .s45-out.in .oc:nth-child(2){transition-delay:.13s,0s,0s,0s}
  .s45-out.in .oc:nth-child(3){transition-delay:.20s,0s,0s,0s}
  .s45-out.in .oc:nth-child(4){transition-delay:.27s,0s,0s,0s}
  .s45-out.in .oc:nth-child(5){transition-delay:.34s,0s,0s,0s}
  .s45-out.in .oc:nth-child(6){transition-delay:.41s,0s,0s,0s}

  /* hover: the hovered card steps forward, the rest step back */
  .s45-out.in .s45-outs.any .oc{opacity:.46; transform:translateY(0) scale(.986);}
  .s45-out.in .s45-outs.any .oc.hot{
    opacity:1; transform:translateY(-6px) scale(1.028);
    background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    box-shadow:inset 0 0 0 1px rgba(142,107,255,.34),
               0 26px 52px -26px rgba(0,0,0,.85),
               0 10px 44px -16px rgba(142,107,255,.30);
  }
  .oc.hot::before{opacity:1;}

  .oc-ic{
    width:36px; height:36px; border-radius:11px; flex:none; margin-bottom:14px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
    transition:box-shadow .42s var(--ease), background .42s var(--ease);
  }
  .oc-ic svg{width:17px; height:17px; color:var(--teal);}
  .oc.hot .oc-ic{background:rgba(142,107,255,.14); box-shadow:inset 0 0 0 1px rgba(142,107,255,.36);}
  .oc b{
    display:block; font-size:11.5px; font-weight:800; letter-spacing:.075em;
    text-transform:uppercase; color:#fff; line-height:1.35; margin-bottom:8px;
  }
  .oc-d{font-size:11.5px; line-height:1.62; color:rgba(245,246,248,.56);}

  /* ── the small visualisations ── */
  .oc-v{
    margin-top:auto; padding-top:16px; min-height:64px;
    display:flex; flex-direction:column; justify-content:flex-end; gap:7px;
  }
  .oc-v i{font-style:normal;} .oc-v em{font-style:normal;}

  /* 1 — tasks completing */
  .v-task .tk{display:flex; align-items:center; gap:8px;}
  .v-task .tk s{
    width:13px; height:13px; border-radius:4px; flex:none; position:relative; text-decoration:none;
    background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
    transition:background .38s var(--ease), box-shadow .38s var(--ease);
  }
  .v-task .tk s::after{
    content:''; position:absolute; left:4px; top:1.5px; width:3.5px; height:7px; opacity:0;
    border:1.7px solid #0B0D10; border-top:0; border-left:0; transform:rotate(42deg);
    transition:opacity .3s var(--ease);
  }
  .v-task .tk u{
    display:block; height:5px; border-radius:999px; text-decoration:none;
    background:rgba(255,255,255,.10); transition:background .38s var(--ease);
  }
  .v-task .tk:nth-child(1) u{width:74%} .v-task .tk:nth-child(2) u{width:56%} .v-task .tk:nth-child(3) u{width:64%}
  .v-task .tk.on s, .oc.hot .v-task .tk s{background:var(--teal); box-shadow:inset 0 0 0 1px var(--teal);}
  .v-task .tk.on s::after, .oc.hot .v-task .tk s::after{opacity:1;}
  .oc.hot .v-task .tk u{background:rgba(49,221,208,.30);}
  .oc.hot .v-task .tk:nth-child(2) s, .oc.hot .v-task .tk:nth-child(2) s::after,
  .oc.hot .v-task .tk:nth-child(2) u{transition-delay:.13s}
  .oc.hot .v-task .tk:nth-child(3) s, .oc.hot .v-task .tk:nth-child(3) s::after,
  .oc.hot .v-task .tk:nth-child(3) u{transition-delay:.26s}

  /* 2 — stock level recovering */
  .v-meter .mt{height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;}
  .v-meter .mt i{
    display:block; height:100%; width:19%; border-radius:999px; background:#E0A02A;
    transition:width .75s var(--ease), background .6s var(--ease);
  }
  .oc.hot .v-meter .mt i{width:84%; background:var(--teal);}
  .v-meter .ml{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace;
    font-size:8.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;}
  .v-meter .ml em{color:#E0A02A; transition:color .5s var(--ease);}
  .v-meter .ml em.h{color:rgba(245,246,248,.30);}
  .oc.hot .v-meter .ml em{color:rgba(245,246,248,.30);}
  .oc.hot .v-meter .ml em.h{color:var(--teal);}

  /* 3 — duplicate purchase order stopped */
  .v-dup .po{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:5px 9px; border-radius:8px; font-family:'IBM Plex Mono',monospace;
    font-size:9px; font-weight:700; letter-spacing:.07em; color:rgba(245,246,248,.78);
    background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
    transition:box-shadow .42s var(--ease), color .42s var(--ease), opacity .42s var(--ease);
  }
  .v-dup .po em{font-size:8px; letter-spacing:.09em; color:rgba(245,246,248,.34);}
  .v-dup .po.d{opacity:.72;}
  .oc.hot .v-dup .po.d{
    opacity:1; color:rgba(245,246,248,.42);
    box-shadow:inset 0 0 0 1px rgba(201,84,74,.42); text-decoration:line-through;
  }
  .oc.hot .v-dup .po.d em{color:#D9756B;}

  /* 4 — low stock through to approval */
  .v-flow{gap:5px;}
  .v-flow .st{
    display:flex; align-items:center; gap:7px; padding:4.5px 9px; border-radius:999px;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:rgba(245,246,248,.42);
    background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
    transition:color .38s var(--ease), background .38s var(--ease), box-shadow .38s var(--ease);
  }
  .v-flow .st::before{content:''; width:5px; height:5px; border-radius:50%; flex:none;
    background:rgba(255,255,255,.22); transition:background .38s var(--ease);}
  .v-flow .st.on{color:rgba(245,246,248,.86); background:rgba(224,160,42,.10);
    box-shadow:inset 0 0 0 1px rgba(224,160,42,.30);}
  .v-flow .st.on::before{background:#E0A02A;}
  .oc.hot .v-flow .st{color:rgba(245,246,248,.86); background:rgba(142,107,255,.12);
    box-shadow:inset 0 0 0 1px rgba(142,107,255,.30);}
  .oc.hot .v-flow .st::before{background:var(--purple);}
  .oc.hot .v-flow .st.on{background:rgba(224,160,42,.10); box-shadow:inset 0 0 0 1px rgba(224,160,42,.30);}
  .oc.hot .v-flow .st.on::before{background:#E0A02A;}
  .oc.hot .v-flow .st:nth-child(2){transition-delay:.12s}
  .oc.hot .v-flow .st:nth-child(3){transition-delay:.24s; color:#fff;
    background:rgba(49,221,208,.12); box-shadow:inset 0 0 0 1px rgba(49,221,208,.34);}
  .oc.hot .v-flow .st:nth-child(3)::before{background:var(--teal); transition-delay:.24s}

  /* 5 — the numbers coming together */
  .v-bars .bs{display:flex; align-items:flex-end; gap:5px; height:40px;}
  .v-bars .bs i{
    flex:1; border-radius:4px 4px 2px 2px; height:26%;
    background:rgba(255,255,255,.13);
    transition:height .6s var(--ease), background .5s var(--ease);
  }
  .oc.hot .v-bars .bs i{height:var(--h); background:linear-gradient(180deg, var(--teal), rgba(142,107,255,.85));}
  .oc.hot .v-bars .bs i:nth-child(2){transition-delay:.07s}
  .oc.hot .v-bars .bs i:nth-child(3){transition-delay:.14s}
  .oc.hot .v-bars .bs i:nth-child(4){transition-delay:.21s}
  .oc.hot .v-bars .bs i:nth-child(5){transition-delay:.28s}
  .v-bars .bl{font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    letter-spacing:.11em; text-transform:uppercase; color:rgba(245,246,248,.32);
    transition:color .5s var(--ease);}
  .oc.hot .v-bars .bl{color:rgba(245,246,248,.55);}

  /* 6 — receiving brings the count current */
  .v-recv .rl{font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    letter-spacing:.11em; text-transform:uppercase; color:rgba(245,246,248,.32);}
  .v-recv .rn{display:flex; align-items:baseline; gap:9px;}
  .v-recv .rn b{
    font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:0;
    text-transform:none; font-variant-numeric:tabular-nums lining-nums;
    color:rgba(245,246,248,.34); transition:color .45s var(--ease);
  }
  .v-recv .rn b.to{color:#fff;}
  .v-recv .rn s{text-decoration:none; color:rgba(245,246,248,.28); font-size:12px;}
  .oc.hot .v-recv .rn b.to{color:var(--teal);}
  .v-recv .rt{
    align-self:flex-start; padding:3px 8px; border-radius:999px;
    font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:rgba(245,246,248,.42);
    background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    transition:color .42s var(--ease), background .42s var(--ease), box-shadow .42s var(--ease);
  }
  .oc.hot .v-recv .rt{color:var(--teal); background:rgba(49,221,208,.10);
    box-shadow:inset 0 0 0 1px rgba(49,221,208,.30);}

  @media (max-width:1240px){
    .s45-outs{grid-template-columns:repeat(3,1fr); gap:18px;}
    .oc{padding:22px 22px 22px;}
    .oc b{font-size:12px;} .oc-d{font-size:12.5px;}
  }
  @media (max-width:1080px){
    .s45-dark{padding:64px 0 54px !important;}
    .s45-dark .s4-title, .s45-light .s5-title{font-size:31px;}
    .s45-out{padding:66px 0 72px;}
    .s45-outh{font-size:33px;}
    .s45-outhd{margin-bottom:36px;}
  }
  @media (max-width:860px){
    .s45-outs{grid-template-columns:repeat(2,1fr); gap:16px;}
  }
  @media (max-width:620px){
    .s45-dark{padding:52px 0 44px !important;}
    .s45-dark .s4-title, .s45-light .s5-title{font-size:26px;}
    .s45-out{padding:52px 0 56px;}
    .s45-outh{font-size:27px;}
    .s45-outhd{margin-bottom:28px;}
    .s45-outs{grid-template-columns:1fr; gap:12px;}
    .oc{padding:20px 20px 20px;}
    .oc-v{min-height:58px;}
  }

  /* ═══════════════ FOOTER ═══════════════ */
  .ft{
    position:relative; z-index:3; overflow:hidden; color:var(--ink);
    padding:56px 0 30px;
    background:linear-gradient(180deg,#0A0C0F 0%, #08090C 100%);
    border-top:1px solid var(--line);
  }
  .ft::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 700px 220px at 18% 0%, rgba(49,221,208,.055), transparent 70%),
               radial-gradient(ellipse 620px 220px at 82% 8%, rgba(142,107,255,.06), transparent 70%);}
  .ft > .wrap{position:relative; z-index:1;}

  .ft-top{
    display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
    gap:34px 40px; align-items:start;
  }

  .ft-brand .ft-logo{display:inline-flex; align-items:center; gap:9px;}
  .ft-brand .ft-logo .mark{height:26px; width:auto;}
  .ft-brand .ft-logo .word{height:13px; width:auto; opacity:.95;}
  .ft-say{
    margin-top:15px; max-width:330px;
    font-size:13.5px; line-height:1.68; color:var(--ink-2);
  }

  .ft-h{
    display:block; margin-bottom:14px;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
  }
  .ft-list{display:flex; flex-direction:column; gap:9px;}
  .ft-list a{
    position:relative; align-self:flex-start;
    font-size:13.5px; font-weight:500; color:var(--ink-2);
    transition:color .28s var(--ease);
  }
  .ft-list a::after{
    content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
    border-radius:2px; background:var(--grad);
    transform:scaleX(0); transform-origin:left; transition:transform .34s var(--ease);
  }
  .ft-list a:hover{color:var(--ink);}
  .ft-list a:hover::after{transform:scaleX(1);}

  .ft-social{display:flex; gap:9px; margin-top:22px;}
  .ft-social a{
    width:33px; height:33px; border-radius:10px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass); border:1px solid var(--line); color:var(--ink-3);
    transition:color .3s var(--ease), border-color .3s var(--ease),
               background .3s var(--ease), transform .3s var(--ease);
  }
  .ft-social a svg{width:15px; height:15px;}
  .ft-social a:hover{
    color:var(--ink); transform:translateY(-2px);
    background:var(--glass-2); border-color:rgba(142,107,255,.42);
  }

  .ft-div{
    height:1px; margin:34px 0 20px; border:0;
    background:linear-gradient(90deg, transparent, var(--line-2) 16%, var(--line-2) 84%, transparent);
  }

  .ft-btm{
    display:flex; align-items:center; justify-content:space-between; gap:14px 26px; flex-wrap:wrap;
  }
  .ft-legal{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
  .ft-legal a{
    font-size:12px; font-weight:500; color:var(--ink-3);
    transition:color .28s var(--ease);
  }
  .ft-legal a:hover{color:var(--ink-2);}
  .ft-copy{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
    letter-spacing:.05em; color:var(--ink-3);
  }

  /* a short, quiet reveal — brand, then columns, then the icons */
  .ft-r{opacity:0; transform:translateY(12px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .ft.in .ft-r{opacity:1; transform:translateY(0);}
  .ft.in .ft-d1{transition-delay:.04s} .ft.in .ft-d2{transition-delay:.12s}
  .ft.in .ft-d3{transition-delay:.20s} .ft.in .ft-d4{transition-delay:.30s}
  .ft.in .ft-d5{transition-delay:.38s}
  @media (prefers-reduced-motion:reduce){
    .ft-r{opacity:1; transform:none; transition:none;}
  }

  @media (max-width:900px){
    .ft-top{grid-template-columns:1fr 1fr; gap:30px;}
    .ft-brand{grid-column:1 / -1;}
  }
  @media (max-width:620px){
    .ft{padding:44px 0 26px;}
    .ft-top{grid-template-columns:1fr; gap:26px;}
    .ft-say{max-width:none;}
    .ft-social{margin-top:16px;}
    .ft-div{margin:26px 0 18px;}
    .ft-btm{flex-direction:column; align-items:flex-start; gap:12px;}
    .ft-legal{gap:16px;}
  }

  /* ═══════════════ DISCOVERY CALL ═══════════════ */
  .dc{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
      padding:24px 16px;}
  .dc[hidden]{display:none;}
  .dc-scrim{
    position:absolute; inset:0; background:rgba(4,5,7,.72);
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    opacity:0; transition:opacity .32s var(--ease);
  }
  .dc.in .dc-scrim{opacity:1;}

  .dc-panel{
    position:relative; z-index:1; width:100%; max-width:760px;
    max-height:calc(100vh - 48px); overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:30px 38px 30px; border-radius:22px; color:var(--ink);
    background:linear-gradient(180deg, rgba(19,22,29,.96), rgba(12,14,19,.97));
    border:1px solid var(--line-2);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -40px rgba(0,0,0,.95);
    opacity:0; transform:translateY(14px) scale(.985);
    transition:opacity .34s var(--ease), transform .40s var(--ease);
  }
  .dc.in .dc-panel{opacity:1; transform:translateY(0) scale(1);}
  .dc-panel::before{
    content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none;
    background:radial-gradient(ellipse 420px 200px at 50% 0%, rgba(142,107,255,.13), transparent 70%);
  }
  .dc-panel > *{position:relative;}

  .dc-x{
    position:absolute; top:14px; right:14px; z-index:2;
    width:32px; height:32px; border-radius:999px; flex:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass); border:1px solid var(--line); color:var(--ink-2);
    transition:color .26s var(--ease), background .26s var(--ease), border-color .26s var(--ease);
  }
  .dc-x:hover{color:var(--ink); background:var(--glass-2); border-color:var(--line-2);}
  .dc-x svg{width:14px; height:14px;}

  .dc-eye{
    display:inline-flex; align-items:center; gap:9px; margin-bottom:13px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
    letter-spacing:.19em; text-transform:uppercase; color:var(--teal);
  }
  .dc-eye::before{content:''; width:16px; height:1.5px; border-radius:2px; background:var(--grad);}
  .dc-panel h2{
    font-size:26px; font-weight:800; line-height:1.2; letter-spacing:-.026em;
    color:#fff; max-width:30ch;
  }
  .dc-lead{font-size:14px; line-height:1.65; color:rgba(245,246,248,.76); margin-top:11px; max-width:56ch;}

  .dc-form{margin-top:26px; display:flex; flex-direction:column; gap:24px;}
  .dc-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px 20px;}

  .dc-f{display:flex; flex-direction:column; min-width:0; border:0; padding:0; margin:0;}
  .dc-f > label, .dc-f > legend{
    display:block; padding:0; margin-bottom:9px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:rgba(245,246,248,.86);
  }
  .dc-f input[type="text"], .dc-f input[type="email"], .dc-f input[type="url"], .dc-f textarea{
    width:100%; font-family:inherit; font-size:14px; font-weight:500; color:#fff;
    padding:12px 14px; border-radius:11px;
    background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.17);
    transition:border-color .26s var(--ease), background .26s var(--ease), box-shadow .26s var(--ease);
  }
  .dc-f textarea{min-height:104px; resize:vertical; line-height:1.6;}
  .dc-f input::placeholder, .dc-f textarea::placeholder{color:rgba(245,246,248,.46);}
  .dc-f input:focus, .dc-f textarea:focus{
    outline:none; background:rgba(255,255,255,.09);
    border-color:rgba(142,107,255,.85);
    box-shadow:0 0 0 3px rgba(142,107,255,.26);
  }
  .dc-f.bad input, .dc-f.bad textarea{border-color:rgba(201,84,74,.65);}
  .dc-f.bad input:focus, .dc-f.bad textarea:focus{box-shadow:0 0 0 3px rgba(201,84,74,.26);}

  /* selectable options — checkboxes and radios wearing the same chip */
  .dc-chips{display:flex; flex-wrap:wrap; gap:9px;}
  .dc-chip{position:relative; cursor:pointer;}
  .dc-chip input{position:absolute; opacity:0; width:0; height:0;}
  .dc-chip span{
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 14px; border-radius:999px; white-space:nowrap;
    font-size:13px; font-weight:600; color:rgba(245,246,248,.80);
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.17);
    transition:color .24s var(--ease), background .24s var(--ease),
               border-color .24s var(--ease), transform .24s var(--ease);
  }
  .dc-chip span::before{
    content:''; width:5px; height:5px; border-radius:50%; flex:none;
    background:rgba(255,255,255,.34); transition:background .24s var(--ease), box-shadow .24s var(--ease);
  }
  .dc-chip:hover span{color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.30);}
  .dc-chip input:checked + span{
    color:#fff; background:rgba(142,107,255,.26); border-color:rgba(142,107,255,.85);
    box-shadow:0 0 0 1px rgba(142,107,255,.35), 0 6px 18px -12px rgba(142,107,255,.7);
  }
  .dc-chip input:checked + span::before{background:var(--teal); box-shadow:0 0 0 3px rgba(49,221,208,.22);}
  .dc-chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(142,107,255,.34);}
  .dc-f.bad .dc-chips .dc-chip span{border-color:rgba(201,84,74,.4);}

  .dc-err{
    display:none; margin-top:6px; font-size:12px; font-weight:600; color:#F0A199;
  }
  .dc-f.bad .dc-err{display:block;}

  .dc-go{width:100%; margin-top:6px; font-size:14px; padding:15px 24px;}
  .dc-note{
    margin-top:12px; text-align:center;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:rgba(245,246,248,.55);
  }

  /* ── step two: the booking placeholder ── */
  .dc-step[hidden]{display:none;}
  .dc-cal{
    margin-top:22px; padding:34px 24px; border-radius:16px; text-align:center;
    background:rgba(255,255,255,.028);
    border:1px dashed rgba(255,255,255,.16);
  }
  .dc-cal svg{width:26px; height:26px; color:var(--teal); opacity:.8;}
  .dc-cal b{
    display:block; margin-top:12px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    letter-spacing:.17em; text-transform:uppercase; color:rgba(245,246,248,.86);
  }
  .dc-cal span{display:block; margin-top:8px; font-size:13px; line-height:1.6; color:rgba(245,246,248,.62);}
  .dc-back{
    display:inline-flex; align-items:center; gap:7px; margin-top:18px; cursor:pointer;
    background:none; border:0; padding:0; font-family:inherit;
    font-size:13px; font-weight:600; color:rgba(245,246,248,.62);
    transition:color .26s var(--ease);
  }
  .dc-back:hover{color:#fff;}

  @media (max-width:620px){
    .dc{padding:14px 12px; align-items:flex-start;}
    .dc-panel{padding:26px 20px 24px; border-radius:18px; max-height:calc(100vh - 28px); margin-top:8px;}
    /* 100vh on a real phone browser ignores the address-bar/toolbar chrome,
       so the panel renders taller than what's actually visible and the
       submit button ends up unreachable even though overflow-y is auto —
       dvh (and svh as the safest fallback) tracks the true visible height */
    @supports (height: 100svh){ .dc-panel{max-height:calc(100svh - 28px);} }
    @supports (height: 100dvh){ .dc-panel{max-height:calc(100dvh - 28px);} }
    .dc-f > label, .dc-f > legend{font-size:10.5px; letter-spacing:.11em;}
    .dc-form{gap:20px;}
    .dc-grid{gap:20px 16px;}
    .dc-panel h2{font-size:21px; max-width:none;}
    .dc-lead{font-size:13px;}
    .dc-grid{grid-template-columns:1fr;}
    .dc-chip span{padding:9px 14px; font-size:13px;}
    .dc-cal{padding:28px 18px;}
  }
  @media (prefers-reduced-motion:reduce){
    .dc-scrim, .dc-panel{transition:none;}
  }

  /* ── discovery call: result states ── */
  .dc-eye-ok{color:var(--teal);}
  .dc-eye-neutral{color:rgba(245,246,248,.66);}
  .dc-eye-neutral::before{background:rgba(255,255,255,.34);}
  .dc-wait{display:flex; gap:7px; margin-top:24px;}
  .dc-wait i{width:7px; height:7px; border-radius:50%; background:var(--teal); opacity:.35;
    animation:dcWait 1.1s ease-in-out infinite;}
  .dc-wait i:nth-child(2){animation-delay:.16s} .dc-wait i:nth-child(3){animation-delay:.32s}
  @keyframes dcWait{0%,100%{opacity:.28; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}
  .dc-step[data-step="approved"] .dc-go{margin-top:24px; text-decoration:none;}
  .dc-step[data-step="notfit"] .dc-go{text-decoration:none;}
  .dc-after{margin-top:14px; margin-bottom:20px; font-size:12.5px; line-height:1.6; color:rgba(245,246,248,.56);}
  .dc-err-form{margin:0 0 4px; text-align:center;}
  .dc-err-form.on{display:block;}
  .dc-go[aria-disabled="true"]{opacity:.55; pointer-events:none;}
  .dc-form.busy{opacity:.55; pointer-events:none;}
  @media (prefers-reduced-motion:reduce){ .dc-wait i{animation:none; opacity:.7;} }

  /* ═══════════════ Silver laptop frame around the existing dashboard ═══════════════ */
  .mbp{
    /* the laptop sets its own size — the dashboard is scaled to fit inside it */
    width:min(100%, 745px); margin:0 auto;
    position:relative;
    perspective:2000px;
    perspective-origin:50% 44%;
    opacity:0; transform:translateY(20px);
    transition:opacity .8s var(--ease), transform .9s var(--ease);
  }
  .mbp.up{opacity:1; transform:translateY(0);}

  /* soft screen light spilling onto the hero */
  .mbp-glow{
    position:absolute; left:6%; right:6%; top:12%; bottom:-6%;
    background:
      radial-gradient(ellipse 60% 55% at 30% 55%, rgba(49,221,208,.20), transparent 70%),
      radial-gradient(ellipse 60% 55% at 72% 55%, rgba(142,107,255,.24), transparent 70%);
    filter:blur(54px); opacity:0; pointer-events:none;
    transition:opacity 1.1s var(--ease);
  }
  .mbp.lit .mbp-glow{opacity:1;}

  /* While the lid swings up, its perspective projection is briefly wider than the
     laptop itself. That overhang sits outside the viewport and would otherwise let
     the page scroll sideways for about a second — clip it instead. `clip` (not
     `hidden`) keeps the hero out of the scroll-container business. */
  .hero{overflow-x:clip;}

  /* ── lid ── */
  .mbp-lid{
    position:relative; z-index:3;
    transform-origin:50% 100%;
    transform:rotateX(-90deg);
    transform-style:preserve-3d;
    will-change:transform;
  }
  .mbp.open .mbp-lid{ animation:mbpOpen 1.3s cubic-bezier(.22,.68,.24,1) forwards; }
  @keyframes mbpOpen{
    0%   { transform:rotateX(-90deg); }
    70%  { transform:rotateX(9deg); }
    87%  { transform:rotateX(3.2deg); }
    100% { transform:rotateX(5deg); }
  }

  /* thin anodised aluminium edge — all you see of the lid from the front */
  .mbp-shell{
    position:relative; padding:3px; border-radius:13px 13px 4px 4px;
    background:linear-gradient(158deg,#f7f8fa 0%, #dfe3e7 26%, #bfc4cb 58%, #aab0b8 78%, #d3d7dc 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 0 0 .5px rgba(0,0,0,.3);
  }
  /* thin black bezel, a touch deeper along the chin */
  .mbp-bezel{
    position:relative; padding:7px 7px 10px; border-radius:11px 11px 3px 3px;
    background:#080a0d;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
  }
  .mbp-cam{
    position:absolute; top:2.6px; left:50%; transform:translateX(-50%); z-index:2;
    width:3.5px; height:3.5px; border-radius:50%;
    background:radial-gradient(circle at 35% 32%, #39404a, #090b0e 72%);
    box-shadow:0 0 0 .5px rgba(255,255,255,.07);
  }
  .mbp-display{
    position:relative; overflow:hidden; border-radius:5px;
    box-sizing:content-box;             /* JS sets the content height; the bezel stays outside it */
    background:#05070a;
  }
  .mbp-panel{
    width:980px; transform-origin:top left; will-change:transform;
    opacity:0;
    transition:opacity .45s var(--ease);
  }
  .mbp.lit .mbp-panel{opacity:1;}
  /* the dashboard fills the display — its own card framing isn't needed inside a screen */
  .mbp-panel .app{border-radius:0; box-shadow:none; border:0;}
  .mbp-panel .stage::before{display:none;}

  .mbp-sheen{
    position:absolute; inset:0; pointer-events:none; border-radius:5px;
    background:linear-gradient(112deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%,
               rgba(255,255,255,0) 70%, rgba(255,255,255,.03) 100%);
    opacity:0; transition:opacity 1s var(--ease) .2s;
  }
  .mbp.lit .mbp-sheen{opacity:1;}

  /* ── base: a slim chassis, nothing more ── */
  .mbp-base{position:relative; z-index:2;}
  .mbp-chassis{
    position:relative;
    width:101.6%; margin-left:-0.8%; height:14px;
    border-radius:1px 1px 9px 9px;
    background:linear-gradient(180deg,#eef1f3 0%, #d3d7dc 30%, #b0b6bd 72%, #939aa2 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(0,0,0,.22),
      0 6px 14px rgba(0,0,0,.4);
  }
  /* the hinge, seen as a dark recess where the lid meets the chassis */
  .mbp-chassis::before{
    content:''; position:absolute; left:25%; right:25%; top:0; height:2.5px;
    border-radius:0 0 3px 3px;
    background:linear-gradient(180deg,#333940 0%, #4d545c 100%);
    box-shadow:0 1px 1px rgba(0,0,0,.35);
  }
  /* a whisper of a trackpad, the way you'd catch it edge-on */
  .mbp-pad{
    position:absolute; left:41.5%; right:41.5%; top:5px; height:5px; border-radius:2px;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(163,169,177,.4));
    box-shadow:0 0 0 .5px rgba(112,118,127,.3);
  }
  /* thin front lip */
  .mbp-foot{
    width:13%; height:3px; margin:0 auto; border-radius:0 0 4px 4px;
    background:linear-gradient(180deg,#c2c7cd,#9aa0a8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 5px rgba(0,0,0,.35);
  }

  .mbp-shadow{
    position:absolute; left:9%; right:9%; bottom:-22px; height:32px; z-index:1;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.62), transparent 72%);
    filter:blur(15px); opacity:0; transition:opacity .9s var(--ease);
  }
  .mbp.up .mbp-shadow{opacity:1;}

  /* tablet + phone: the same laptop, proportionally smaller — never stretched */
  @media (max-width:1180px){
    .mbp{width:min(80vw, 580px); perspective:2400px;}
    .mbp-shell{padding:2.5px; border-radius:12px 12px 4px 4px;}
    .mbp-bezel{padding:6px 6px 8px;}
    .mbp-chassis{height:12px;} .mbp-pad{top:4px; height:4px;}
  }
  @media (max-width:760px){
    .mbp{width:min(100%, 430px); perspective:1700px;}
    .mbp-shell{padding:2px; border-radius:10px 10px 3px 3px;}
    .mbp-bezel{padding:4.5px 4.5px 6px; border-radius:9px 9px 3px 3px;}
    .mbp-cam{width:3px; height:3px; top:1.6px;}
    .mbp-chassis{height:9px; width:100.6%; margin-left:-0.3%;} .mbp-pad{top:3px; height:3px;}
    .mbp-foot{height:2.5px;}
    .mbp-shadow{bottom:-15px; height:22px;}
  }
  @media (prefers-reduced-motion:reduce){
    .mbp{opacity:1 !important; transform:none !important;}
    .mbp-lid{transform:rotateX(5deg) !important; animation:none !important;}
    .mbp-panel{opacity:1 !important;}
    .mbp-glow, .mbp-sheen, .mbp-shadow{opacity:1 !important;}
  }

  /* ── Inside the laptop the dashboard always renders its full desktop layout. ──
     The dashboard's own media queries watch the viewport, not this panel, so on a
     phone they would stack it into a portrait screen. These re-assert the desktop
     values within the frame only — the dashboard itself is untouched. */
  .mbp-panel .side{display:flex; width:142px;}
  .mbp-panel .kpis{grid-template-columns:repeat(4,1fr);}
  .mbp-panel .lower{grid-template-columns:1fr 1fr 1.05fr;}
  .mbp-panel .cols{grid-template-columns:minmax(0,1fr) 194px;}
  .mbp-panel .rail{flex-direction:column;}
  .mbp-panel .autos{flex-direction:column;}
  .mbp-panel col{display:table-column;}
  .mbp-panel th, .mbp-panel td{display:table-cell;}
  .mbp-panel .t-thumb{display:flex; width:18px; height:18px; font-size:7px;}
  .mbp-panel .t-prod{gap:6px;}
  .mbp-panel .t-var{font-size:10.5px;}
  .mbp-panel .t-sku{font-size:9.5px;}
  .mbp-panel .t-n{font-size:11px;}
  .mbp-panel .t-name{white-space:nowrap; line-height:inherit;}
  .mbp-panel .badge{font-size:9.5px; padding:3px 8px 3px 6px;}
  .mbp-panel .kpi{padding:8px 10px 9px;}
  .mbp-panel .kpi .k-v{font-size:17.5px; margin-top:3px;}
  .mbp-panel .main-head{margin-bottom:8px;}
  .mbp-panel .alert{padding:5px 7px;}
  .mbp-panel .auto{flex-wrap:nowrap;}

  /* Desktop: hold the hero row at the height the locked hero had, so the
     left-hand copy keeps its approved position. */
  @media (min-width:1181px){
    .hero-grid{min-height:612px;}
  }