/* ═══════════════════════════════════════════════════
   Wareflux WMS — Marketing Website
   style.css  ·  2026
   ═══════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────── */
:root {
  /* Background scale — darkest to lightest */
  --bg-0:   #091220;
  --bg-1:   #0B1829;
  --bg-2:   #0C1A2E;
  --bg-3:   #152C46;
  --bg-4:   #0E2137;
  --bg-5:   #224C6C;
  --accent: #4B85AA;
  --paper:  #E4E6E8;
  --white:  #FFFFFF;

  /* Semantic aliases kept for HTML compatibility */
  --deep:    var(--bg-2);
  --navy:    var(--bg-3);
  --cobalt:  #1287CC;
  --border:  rgba(12,26,46,0.11);
  --border-d:rgba(34,76,108,0.80);

  /* Text */
  --ink:   #0C1A2E;
  --steel: #2D4860;
  --slate: #546A7E;

  /* Brand gradient */
  --grad:       linear-gradient(90deg, #1B75BB 0%, #197ABF 25%, #1287CC 54%, #079EE0 84%, #00ADEE 100%);
  --grad-W:     linear-gradient(135deg, #0a192f 0%, #4B85AA 50%, #0a192f 100%);
  --grad-r:     linear-gradient(270deg, #1B75BB 0%, #197ABF 25%, #1287CC 54%, #079EE0 84%, #00ADEE 100%);
  --grad-end:   #00ADEE;
  --grad-mid:   #1287CC;
  --grad-start: #1B75BB;

  /* Semantic warning (kept for status indicators: allocated, aging) */
  --warn: #F0A30A;

  /* Type — one family, varying weight */
  --f:  'Outfit', sans-serif;
  --fd: var(--f);
  --fb: var(--f);

  /* Scale */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.25rem;
  --t-2xl:  1.5rem;
  --t-3xl:  2rem;
  --t-4xl:  2.625rem;
  --t-hero: clamp(2.4rem, 5vw, 4.25rem);

  /* Space */
  --s2:  0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5:  1.25rem; --s6: 1.5rem;  --s8: 2rem;
  --s10: 2.5rem;  --s12: 3rem;   --s16: 4rem;
  --s20: 5rem;    --s24: 6rem;

  /* Shape */
  --r:    6px;
  --r-lg: 10px;
  --r-xl: 16px;

  /* Effects */
  --sh:    0 1px 3px rgba(9,18,32,.08), 0 4px 16px rgba(9,18,32,.10);
  --sh-lg: 0 4px 8px rgba(9,18,32,.10), 0 16px 40px rgba(9,18,32,.18);
  --glow:  0 0 60px rgba(0,173,238,.14);

  --ease: 180ms ease;
  --max:  85%;
}

/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--f);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
ul { list-style:none }
h1,h2,h3,h4 {
  font-family: var(--f);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
}
code {
  font-size: .85em;
  background: rgba(18,135,204,.10);
  color: var(--grad-mid);
  padding: .1em .4em;
  border-radius: 4px;
  font-family: 'Menlo','Consolas',monospace;
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ── Layout ─────────────────────────────────────── */
.container { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--s6); }
.container-B { width:100%; max-width:88%; margin-inline:auto; padding-inline:var(--s6); }
.container-I { width:100%; max-width:100%; margin-inline:auto;  }
.section { padding-block:var(--s20); border:var(--bg-5); }
.section--paper { background:var(--paper) }
.section--deep  { background:var(--bg-2);border:1px solid var(--ink);  border-radius:20px; }
.section--deep-1  { background:var(--paper); border-radius:20px;}
.section--deep-A  { background:var(--bg-2); width:77%; padding: 5rem 1.5rem; box-sizing: border-box; margin: 0 auto;}

/* Section headings */
.sec-hd { max-width:100%; margin-bottom:var(--s12); text-align: center; color: var(--bg-5)}
.sec-hd h2 { font-size:var(--t-4xl); font-weight:700; margin-bottom:var(--s4); text-align: center; }
.sec-hd p  { font-size:var(--t-lg); color:var(--slate); line-height:1.65; text-align:center }
.sec-hd--light h2 { color:var(--white) }
.sec-hd--light p  { color:rgba(228,230,232,.60) }
@media (max-width: 1024px) 
{
  .split 
  { grid-template-columns: 1fr; gap: 2.5rem;}
}

/* Split layout */
.split { display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:center }
.split--center { align-items:start }
.split--reverse .split__visual { order:-1 }
.split__lead  { font-size:var(--t-lg); color:var(--slate); margin-bottom:var(--s6); line-height:1.65 }
.split__text h2 { font-size:var(--t-4xl); font-weight:800; margin-bottom:var(--s4) }
.split__text-A h2 { font-size:0.25rem; font-weight:700; margin-bottom:1rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--white); }
.text--light       { color:var(--white) }
.text--muted-light { color:rgba(228,230,232,.0.75); font-size: 1.05rem; line-height:1.6; margin-bottom: 2rem }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--f);
  font-size: var(--t-base);
  font-weight: 600;
  padding: .65rem 1.5rem;
  border-radius: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity var(--ease), filter var(--ease), border-color var(--ease), background var(--ease);
  white-space: nowrap;
  line-height: 1.3;
}
.btn:focus-visible { outline:3px solid var(--grad-end); outline-offset:3px }

/* Primary — gradient replaces amber */
.btn--amber {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
}
.btn--amber:hover { opacity:.88; filter:brightness(1.06) }

.btn--ghost {
  border-color: rgba(228,230,232,.22);
  color: var(--white);
}
.btn--ghost:hover { border-color:rgba(228,230,232,.55); background:rgba(255,255,255,.05) }

.btn--ghost-dark {
  border-color: rgba(12,26,46,.16);
  color: var(--ink);
}
.btn--ghost-dark:hover { border-color:rgba(12,26,46,.40) }

.btn--lg   { font-size:var(--t-lg); padding:.9rem 2rem }
.btn--full { width:100% }

/* ── Navigation ──────────────────────────────────── */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: box-shadow var(--ease);
}
/* Gradient accent line — appears on scroll */
.nav-wrap::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 300ms ease;
}
.nav-wrap--up { box-shadow:0 2px 24px rgba(0,0,0,.40) }
.nav-wrap--up::after { opacity:.40 }

.nav { display:flex; align-items:center; gap:var(--s8); height:68px }
.nav__logo { display:flex; align-items:center; gap:var(--s3); flex-shrink:0 }
.nav__wordmark {
 font-family: var(--f);
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}

.nav__wordmark-A {
 font-family: var(--f);
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--grad-mid);
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Gradient text on "WMS" span */
.nav__wordmark span {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}
.nav__wordmark-1 {
     font-family: var(--f);
    font-size: 0.72rem;
    font-weight: 500;
    color: #5b9bc5;
    letter-spacing: 0;
    margin-top: 6px;
    line-height: 1;
    white-space: nowrap;
}
.nav__brand {
    display: flex;
    align-items: flex-start;
    gap:12px;
}
.nav__brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav__links { display:flex; align-items:center; gap:var(--s2); margin-inline-start:auto }
.nav__links a {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  transition: color var(--cobalt), background var(--ease);

  /* Added to give extra width/padding around the text */
    display: inline-block;
    padding: 8px 16px; 
    border-radius: 4px; /* Optional: adds a slight smooth edge to the hover effect */
}
/* .nav__links a:hover { color:var(--ink)!important; background: var(--white)!important; flex-shrink: 0; } */

    .hero-slide__crumb {
      display: flex;
      align-items: center;
      gap: var(--s2);
      font-size: var(--t-xs);
      margin-bottom: var(--s4);
      color: rgba(228,230,232,.45);
    }
    .hero-slide__crumb a {
      color: rgba(228,230,232,.45);
      text-decoration: none;
      transition: color var(--ease);
    }
    .hero-slide__crumb a:hover { color: rgba(228,230,232,.80); }
    .hero-slide__crumb span[aria-current] { color:var(--cobalt); }

.nav__cta { margin-inline-start:var(--s3); flex-shrink:0 }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  margin-inline-start: auto;
  padding: 6px;
  border-radius: var(--r);
}
.nav__burger span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,.80);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}

/* ── Hero ─────────────────────────────────────────── */
.hero {
  position: relative;
  /* Radial glow: right side where mockup sits, subtle left-side accent */
  background:
    radial-gradient(ellipse 55% 65% at 78% 52%, rgba(18,135,204,.14) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 18% 30%, rgba(27,117,187,.07) 0%, transparent 65%),
    var(--bg-1);
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg { position:absolute; inset:0; pointer-events:none }
.hero__pattern { width:100%; height:100%; object-fit:cover; opacity:.30 }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--s12);
  align-items: center;
  padding-block: var(--s20);
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(228,230,232,.72);
  background: rgba(0,173,238,.08);
  border: 1px solid rgba(0,173,238,.20);
  padding: .28rem .85rem;
  border-radius: 100px;
  margin-bottom: var(--s5);
}
.hero__h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  color: var(--white);
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin-bottom: var(--s6);
}
.hero__lead {
  font-size: var(--t-xl);
  color: rgba(228,230,232,.58);
  font-weight: 300;
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: var(--s8);
}
.hero__actions { display:flex; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s10) }
.hero__pills   { display:flex; flex-wrap:wrap; gap:var(--s2) }
.hero__pills li {
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(228,230,232,.44);
  background: rgba(34,76,108,.28);
  border: 1px solid rgba(34,76,108,.55);
  padding: .28rem .8rem;
  border-radius: 100px;
}

/* Hero mockup */
.hero__mockup { display:flex; justify-content:flex-end }
.mockup-win {
  background: var(--bg-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(0,173,238,.18);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), var(--glow);
  width: 100%;
  max-width: 440px;
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mockup-dots { display:flex; gap:5px }
.mockup-dots i { display:block; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14) }
.mockup-dots i:first-child  { background:#FF5F57 }
.mockup-dots i:nth-child(2) { background:#FFBD2E }
.mockup-dots i:nth-child(3) { background:#28CA41 }
.mockup-addr { font-size:var(--t-xs); color:rgba(255,255,255,.36); margin-inline-start:auto }
.mockup-live { font-size:var(--t-xs); font-weight:600; color:#28CA41; margin-inline-start:var(--s3) }

.mockup-body   { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4) }
.mockup-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2) }
.m-card {
  padding: var(--s3);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid;
}
.m-card--blue  { background:rgba(7,158,224,.15);  border-color:var(--grad-end) }
.m-card--red   { background:rgba(220,70,55,.12);   border-color:#DC4637 }
.m-card--amber { background:rgba(240,163,10,.12);  border-color:var(--warn) }
.m-card--green { background:rgba(16,180,130,.12);  border-color:#10B482 }
.m-num { font-family:var(--f); font-size:var(--t-sm); font-weight:700; color:var(--white); line-height:1 }
.m-lbl { font-size:10px; color:rgba(255,255,255,.40); line-height:1 }

.mockup-map-label {
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(255,255,255,.40);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.map-badge {
  font-size: 10px;
  font-weight: 600;
  color: #28CA41;
  background: rgba(40,202,65,.12);
  padding: .1rem .45rem;
  border-radius: 100px;
}

.mockup-grid { display:grid; grid-template-columns:repeat(14,1fr); gap:2px }
.hbin,.wbin  { border-radius:2px; height:16px; transition:opacity .3s }
@keyframes hbp { 0%,100%{opacity:1} 50%{opacity:.3} }
.hb-pulse { animation:hbp 2s ease-in-out infinite }

.mockup-feed {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: var(--s3);
}
.feed-row { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-xs); color:rgba(255,255,255,.46) }
.fd { width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.fd--green { background:#28CA41 }
.fd--blue  { background:var(--grad-end) }
.fd--amber { background:var(--warn) }

/* ── Stats strip ────────────────────────────────── */
.stats-strip { background:var(--grad-W); padding-block:var(--s2) }
.stats-strip__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s6);
  flex-wrap: wrap;
}
.gap-between{margin-bottom:0.5rem}
.sstat { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px }
.sstat__n {
  font-family: var(--f);
  font-size: clamp(1.8rem,3.5vw,2.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
}
.sstat__l {
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(255,255,255,.78);
}

/* ── Interfaces ─────────────────────────────────── */
.iface-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s6);
  margin-bottom: var(--s12);
}
.iface-card {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-lg);
  padding: var(--s8);
  transition: box-shadow var(--ease), transform var(--ease);
}
.iface-card-1 {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: 50px;
  padding: var(--s8);
  transition: box-shadow var(--ease), transform var(--ease);
}
.iface-card:hover { box-shadow:var(--sh); transform:translateY(-2px) }
.iface-card--dark {
  background: var(--bg-3);
  border-color: var(--border-d);
  color: var(--white);
}
.iface-card-1--dark {
  background: var(--bg-3);
  border-color: var(--border-d);
  color: var(--white);
}
.iface-card--dark .iface-role         { color:rgba(228,230,232,.45) }
.iface-card--dark>p                   { color:rgba(228,230,232,.65) }
.iface-card--dark .tick-list li       { color:rgba(228,230,232,.75) }
.iface-card--dark .tick-list li::before { color:var(--grad-end) }

.iface-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s5);
}
.iface-icon--blue  { background:rgba(18,135,204,.10); color:var(--grad-mid) }
.iface-icon--amber { background:rgba(0,173,238,.10);  color:var(--grad-end) }

.iface-card h3 { font-size:var(--t-2xl); font-weight:700; margin-bottom:var(--s2); text-align: center; color: var(--bg-5) }
.iface-card-1 h3 { font-size:var(--t-2xl); font-weight:700; margin-bottom:var(--s2); text-align: center; color: var(--white) }
.iface-role    { font-size:var(--t-sm)!important; color:var(--bg-5)!important; margin-bottom:var(--s4)!important; font-weight:500; text-align:center; }
.iface-role-1  { font-size:var(--t-sm)!important; color:var(--white)!important; margin-bottom:var(--s4)!important; font-weight:500; text-align:center; }
.iface-card>p  { font-size:var(--t-sm); color:var(--slate); margin-bottom:var(--s5); line-height:1.65 }

/* Platform pillars */
.platform-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.pillar {
  padding: var(--s5);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.pillar strong { display:block; font-size:var(--t-base); font-weight:600; color:var(--ink); margin-bottom:var(--s2) }
.pillar span   { font-size:var(--t-sm); color:var(--slate); line-height:1.55 }

/* ── Tick list ───────────────────────────────────── */
.tick-list { display:flex; flex-direction:column; gap:var(--s3) }
.tick-list li {
  font-size: var(--t-sm);
  color: var(--ink);
  padding-inline-start: 1.5rem;
  position: relative;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 0.6rem;;
}
.tick-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  color: var(--grad-mid);
  font-weight: 700;
  font-size: .9em;
}
.tick-list--spaced { gap:var(--s4) }
.tick-list--light li { color:rgba(228,230,232,.76) }
.tick-list--light li::before { color:var(--grad-end) }
.tick-list li img{width:20px; height:20px;}
/* ── Workflow ─────────────────────────────────────── */
.workflow { display:grid; grid-template-columns:1fr 40px 1fr; gap:var(--s8); align-items:start }
.wf-arrow { display:flex; align-items:flex-start; justify-content:center; padding-top:var(--s16); color:var(--slate) }

.wf-lane__head { margin-bottom:var(--s8) }
.wf-lane__head h3 { font-size:var(--t-2xl); font-weight:700; color:var(--ink) }
.wf-badge {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .03em;
  padding: .22rem .75rem;
  border-radius: 100px;
  margin-bottom: var(--s3);
}
.wf-badge--in  { background:rgba(18,135,204,.12); color:var(--grad-mid) }
.wf-badge--out { background:rgba(0,173,238,.10);  color:var(--grad-end) }

.wf-steps { display:flex; flex-direction:column; gap:0 }
.wf-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s4);
  padding-bottom: var(--s8);
  position: relative;
}
.wf-step:not(.wf-step--terminal)::before {
  content: '';
  position: absolute;
  inset-inline-start: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(18,135,204,.28), rgba(18,135,204,.06));
}

.wf-step__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  border: 1.5px solid rgba(12,26,46,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grad-mid);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.wf-step__icon--amber {
  border-color: rgba(0,173,238,.30);
  color: var(--grad-end);
}

.wf-step__body h4 { font-size:var(--t-base); font-weight:600; color:var(--ink); margin-bottom:var(--s2); padding-top:var(--s2) }
.wf-step__body p  { font-size:var(--t-sm); color:var(--slate); line-height:1.65 }

/* ── Inventory & Ledger ──────────────────────────── */
.ledger-facts { display:flex; flex-direction:column; gap:0; margin-bottom:var(--s8) }
.lf-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid rgba(12,26,46,.10);
}
.lf-row:first-child { border-top:1px solid rgba(12,26,46,.10) }
.lf-key { font-size:var(--t-sm); font-weight:600; color:var(--ink) }
.lf-val { font-size:var(--t-sm); color:var(--slate); line-height:1.6 }

.lifecycle-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3) }
.lc {
  padding: var(--s4) var(--s5);
  border-radius: var(--r);
  border-inline-start: 3px solid;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lc--blue  { background:rgba(18,135,204,.09); border-color:var(--grad-mid) }
.lc--red   { background:rgba(220,70,55,.09);  border-color:#DC4637 }
.lc--amber { background:rgba(240,163,10,.09); border-color:var(--warn) }
.lc--green { background:rgba(16,180,130,.09); border-color:#10B482 }
.lc__n { font-family:var(--f); font-size:var(--t-base); font-weight:700; color:var(--ink) }
.lc__d { font-size:var(--t-xs); color:var(--slate); line-height:1.4 }

/* Accounts card */
.accounts-card {
  background: var(--bg-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(34,76,108,.80);
}
.ac-head {
  font-size: var(--t-xs);
  font-weight: 600;
  color: rgba(228,230,232,.48);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  letter-spacing: .02em;
}

.ac-table { width:100%; border-collapse:collapse }
.ac-table tbody tr { border-bottom:1px solid rgba(255,255,255,.04) }
.ac-table tbody tr:last-child { border-bottom:none }
.ac-table td { padding:var(--s3) var(--s5); font-size:var(--t-xs); vertical-align:top; line-height:1.5 }
.ac-id   { font-family:'Menlo','Consolas',monospace; color:var(--grad-end); white-space:nowrap; width:28px }
.ac-name { font-weight:600; color:var(--white); white-space:nowrap }
.ac-use  { color:rgba(228,230,232,.48) }

.ac-ops {
  padding: var(--s4) var(--s5);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.ac-op          { font-size:var(--t-xs); color:rgba(228,230,232,.50); line-height:1.55 }
.ac-op strong   { color:rgba(228,230,232,.80) }

/* ── Warehouse Map ────────────────────────────────── */
.wmap-card {
  background: var(--bg-1);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(0,173,238,.16);
  box-shadow: 0 0 0 4px rgba(0,173,238,.05);
  width:100%;
}

.wmap-card-A {
  background: var(--bg-1);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(0,173,238,.16);
  box-shadow: 0 0 0 4px rgba(0,173,238,.05);
  width:100%;
  margin-top: -240px;
}

.wmap-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(228,230,232,.50);
}
.wmap-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28CA41;
  animation: pulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 8px #28CA41
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.85)} }

.wmap-overlays {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(0,0,0,0.1)
}
.ov {
  font-size: 0.75rem;
  font-weight: 500;
  padding: .3rem .85rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(228,230,232,.38);
  cursor: default;
  transition: all 0.2s ease;;
}
.ov-hover {border-color: rgba(0,173,238,0.4); color: rgba(228, 230, 232, 0.9)}
.ov--active {
  background: rgba(0,173,238,0.15);
  border-color: rgba(0,173,238,0.4);
  color: rgba(0,173,238,0.95);
}

.wmap-grid { display:grid; grid-template-columns:repeat(14,1fr); gap:5px; padding:1.25rem; background: rgba(10,14,22,0.5) }
.wmap-cell {aspect-ratio: 1.75; border-radius: 4px; transition: all 0.15s ease; cursor: pointer; position: relative;}
.wmap-cell:hover {transform: scale(1.2); filter: brightness(1.35); z-index: 20; box-shadow: 0 0 10px rgba(0,173,238,0.5)}
.wbin { border-radius:3px; height:20px }
@keyframes wbp { 0%,100%{opacity:1} 50%{opacity:.25} }
.wbin-pulse { animation:wbp 2s ease-in-out infinite }

.cell--fresh {  background: rgba(10, 191, 163, 0.28);  border: 1px solid rgba(10, 191, 163, 0.5); }
.cell--aging {   background: rgba(240, 163, 10, 0.28);  border: 1px solid rgba(240, 163, 10, 0.5); }
.cell--overdue { background: rgba(239, 68, 68, 0.28); border: 1px solid rgba(239, 68, 68, 0.5);  }
.cell--q { background: rgba(168, 85, 247, 0.28);  border: 1px solid rgba(168, 85, 247, 0.5);  }
.cell--empty { background: rgba(255, 255, 255, 0.05);  border: 1px solid rgba(255, 255, 255, 0.08);  }


.wmap-legend {
  display: flex;
  flex-wrap:wrap;
  gap: var(--s2);
  padding: 1rem 1.25rem;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,.05);
  align-items: center;
}
.wl { font-size:0.75rem; font-weight:500; padding:0.25rem 0.5rem; border-radius:100px; display: inline-flex; align-items: center; gap: 0.4rem; }
.wl::before{content:''; width:6px; height: 6px; border-radius: 50%;}
.wl--fresh   { background:rgba(10,191,163,.18); color:rgba(10,191,163,.9) }
.wl--fresh::before { background: #0abfa3; }
.wl--aging   { background:rgba(240,163,10,.18);  color:var(--warn) }
.wl--aging::before { background: #f0a30a; }
.wl--overdue { background:rgba(239,68,68,.18);   color:#EF4444 }
.wl--overdue::before { background: #EF4444; }
.wl--q       { background:rgba(168,85,247,.18);  color:#A855F7 }
.wl--q::before { background: #A855F7; }
.wl--empty   { background:rgba(255,255,255,.06); color:rgba(228,230,232,.36) }
.wl--empty::before { background: rgba(228, 230, 232, 0.4); }


/* Feature list */
.feat-list {list-style: none; padding: 0; margin:0; display:flex; flex-direction:column; gap:1.15rem }
.feat-list li { display:relative; padding-left:1rem; border-left: 2px solid rgba(0,173,238,0.25); transition: border-color 0.2S ease;}
.feat-list li:hover{border-left-color: var(--grad-end);}
.feat-list strong {
  font-size: 0.95rem;
  gap:0.5rem;
  align-items:center;
  font-weight: 600;
  color: var(--white);
  margin-bottom:0.25rem;
}
.feat-list strong::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grad-end);
  flex-shrink: 0;
}
.feat-list span { font-size:var(--t-sm); color:var(--slate); line-height:1.6; padding-inline-start:13px }
.feat-list--light strong { color:var(--white) }
.feat-list--light span   { color:rgba(228,230,232,.52) }
.feat-list--light strong::before { background:var(--grad-end) }

/* ── Operations ──────────────────────────────────── */
.ops-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--s5);
}
.ops-card {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-lg);
  padding: var(--s7,1.75rem);
  transition: box-shadow var(--ease);
}
.ops-card:hover { box-shadow:var(--sh) }
.ops-card h3  { font-size:var(--t-xl); font-weight:700; margin-bottom:var(--s3) }
.ops-card>p   { font-size:var(--t-sm); color:var(--slate); line-height:1.65; margin-bottom:var(--s5) }
.mini-dl { display:flex; flex-direction:column; gap:0 }
.mini-dl dt {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--bg-5);
  padding-top: var(--s3);
}
.mini-dl dd {
  font-size: var(--t-xs);
  color: var(--slate);
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(12,26,46,.10);
  line-height: 1.55;
}
.mini-dl dd:last-child { border-bottom:none }

/* ── VAS ─────────────────────────────────────────── */
.vas-states {
  background: var(--paper);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-xl);
  padding: var(--s8);
}
.vs-label {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--slate);
  letter-spacing: .03em;
  margin-bottom: var(--s5);
}
.vs-flow { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3) }
.vs-state {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(12,26,46,.12);
  border-radius: 100px;
  padding: .35rem .9rem;
}
.vs-state--done {
  background: rgba(16,180,130,.10);
  border-color: rgba(16,180,130,.30);
  color: #0D9068;
}
.vs-arrow { font-size:var(--t-base); color:var(--slate) }
.vs-cancelled { font-size:var(--t-xs); color:var(--slate); margin-bottom:var(--s6) }
.vs-detail { display:flex; flex-direction:column; gap:var(--s3) }
.vs-item {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.55;
  padding-inline-start: 1rem;
  position: relative;
}
.vs-item::before {
  content: '–';
  position: absolute;
  inset-inline-start: 0;
  color: var(--grad-mid);
}
.vs-item strong { color:var(--ink) }

/* ── Billing ─────────────────────────────────────── */
.billing-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:start }
.billing-table-wrap { overflow-x:auto }
.billing-table { width:100%; border-collapse:collapse; font-size:var(--t-sm) }
.billing-table thead tr { border-bottom:2px solid rgba(12,26,46,.10) }
.billing-table th {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--slate);
  padding: var(--s3) var(--s4);
}
.billing-table tbody tr { border-bottom:1px solid rgba(12,26,46,.10) }
.billing-table tbody tr:last-child { border-bottom:none }
.billing-table td { padding:var(--s4); color:var(--ink); line-height:1.5; vertical-align:top }
.billing-table td:nth-child(2) { color:var(--slate) }
.billing-table td:nth-child(3) { color:var(--slate); font-size:var(--t-xs); white-space:nowrap }
.billing-features h3 { font-size:var(--t-2xl); font-weight:700; margin-bottom:var(--s6) }

/* ── Documents ───────────────────────────────────── */
.docs-row {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: var(--s3);
  margin-bottom: var(--s10);
}
@media(max-width:900px) { .docs-row { grid-template-columns:repeat(4,1fr) } }
.doc-card {
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--white);
  transition: box-shadow var(--ease);
}
.doc-card:hover { box-shadow:var(--sh) }
/* Gradient text on document type abbreviations */
.doc-abbr {
  font-family: var(--f);
  font-size: var(--t-2xl);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
}
.doc-name { font-size:var(--t-xs); font-weight:600; color:var(--ink); line-height:1.4 }
.doc-when { font-size:var(--t-xs); color:var(--slate); margin-top:auto; padding-top:var(--s2); line-height:1.4 }

.barcode-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s6);
  background: var(--bg-2);
  border-radius: var(--r-xl);
  padding: var(--s8) var(--s10);
}
.bc-item h3 { font-size:var(--t-lg); font-weight:700; color:var(--white); margin-bottom:var(--s3) }
.bc-item p  { font-size:var(--t-sm); color:rgba(228,230,232,.55); line-height:1.65 }

/* ── Mobile section ──────────────────────────────── */
.mobile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6) }
.mob-feature {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(34,76,108,.65);
  border-radius: var(--r-lg);
  padding: var(--s7,1.75rem);
}
.mob-feature h3 { font-size:var(--t-xl); font-weight:700; color:var(--white); margin-bottom:var(--s4) }

/* ── Bilingual panel ─────────────────────────────── */
.bilingual-panel {
  background: var(--paper);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.bp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid rgba(12,26,46,.10);
  transition: background var(--ease);
}
.bp-row:last-child { border-bottom:none }
.bp-row:hover { background:var(--white) }
.bp-ar { font-size:var(--t-lg); font-weight:600; color:var(--ink) }
.bp-en { font-size:var(--t-sm); color:var(--slate); white-space:nowrap }

/* ── Portal & Odoo ───────────────────────────────── */
.portal-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6) }
.pp-box {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-lg);
  padding: var(--s8);
}
.pp-box--dark {
  background: var(--bg-3);
  border-color: var(--border-d);
}
.pp-box--dark h3            { color:var(--white) }
.pp-box--dark>p             { color:rgba(228,230,232,.62) }
.pp-box--dark .tick-list li { color:rgba(228,230,232,.75) }
.pp-box--dark .tick-list li::before { color:var(--grad-end) }
.pp-box--dark code          { background:rgba(0,173,238,.12); color:var(--grad-end) }

.pp-head { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); color:var(--grad-mid) }
.pp-box--dark .pp-head { color:var(--grad-end) }
.pp-head h3 { font-size:var(--t-2xl); font-weight:700 }
.pp-box>p   { font-size:var(--t-sm); color:var(--slate); margin-bottom:var(--s5); line-height:1.65 }

/* ── Security & Reporting ────────────────────────── */
.sec-reporting { display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:start }
.sr-col h3 { font-size:var(--t-2xl); font-weight:700; margin-bottom:var(--s6) }

.reports-table { width:100%; border-collapse:collapse; font-size:var(--t-sm); margin-bottom:var(--s5) }
.reports-table tr { border-bottom:1px solid rgba(12,26,46,.10) }
.reports-table tr:last-child { border-bottom:none }
.reports-table td { padding:var(--s3) var(--s4); vertical-align:top; line-height:1.5 }
.reports-table td:first-child { white-space:nowrap; color:var(--ink) }
.reports-table td:last-child  { color:var(--slate) }

.search-note {
  font-size: var(--t-sm);
  color: var(--slate);
  background: var(--paper);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  line-height: 1.65;
  border-left: 3px solid var(--grad-mid);
}
.search-note strong { color:var(--ink) }

/* ── CTA ─────────────────────────────────────────── */
.section--cta { background:var(--bg-1) }
.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
  padding-block: var(--s20);
}
.cta-text h2 { font-size:clamp(1.8rem,3.5vw,3rem); font-weight:800; color:var(--white); margin-bottom:var(--s4) }
.cta-text>p  { font-size:var(--t-lg); color:rgba(228,230,232,.60); line-height:1.65; margin-bottom:var(--s6); font-weight:300 }
.cta-facts { display:flex; flex-direction:column; gap:var(--s2) }
.cta-facts li {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.50);
  padding-inline-start: 1.25rem;
  position: relative;
}
.cta-facts li::before {
  content: '·';
  position: absolute;
  inset-inline-start: 0;
  color: var(--grad-end);
  font-weight: 700;
}

.cta-form-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,173,238,.14);
  border-radius: var(--r-xl);
  padding: var(--s8);
}
.cta-form-card h3 { font-size:var(--t-2xl); font-weight:700; color:var(--white); margin-bottom:var(--s3) }
.cta-form-card>p  { font-size:var(--t-sm); color:rgba(228,230,232,.55); margin-bottom:var(--s6); line-height:1.55 }
.cta-links { display:flex; flex-direction:column; gap:var(--s3) }

/* ── Footer ──────────────────────────────────────── */
/* ── Footer ──────────────────────────────────────── */

/* CTA strip */
.footer__cta-strip {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  border-top: 1px solid rgba(0,173,238,.18);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
/* Radial glow + dot-grid overlay on CTA strip */
.footer__cta-strip::before,
.footer__cta-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.footer__cta-strip::before {
  background:
    radial-gradient(ellipse 70% 120% at 80% 50%, rgba(0,173,238,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 80%  at 10% 30%, rgba(27,117,187,.10) 0%, transparent 60%);
}
.footer__cta-strip::after {
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
}
.footer__cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  padding-block: var(--s12);
  flex-wrap: wrap;
}
.footer__cta-eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  margin-bottom: var(--s2);
}
.footer__cta-heading {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-weight: 700;
  color: var(--white);
  margin: 0;
  letter-spacing: -.022em;
}
.footer__cta-btns {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-shrink: 0;
}
.footer__cta-ghost {
  font-size: var(--t-sm);
  font-weight: 600;
  color: rgba(228,230,232,.60);
  text-decoration: none;
  transition: color var(--ease);
}
.footer__cta-ghost:hover { color: var(--white); }

/* Main body */
.site-footer { background: var(--bg-0); }
.footer__body {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.05);
  /* Dot-grid pattern */
  background-image:
    radial-gradient(circle at 15% 60%, rgba(27,117,187,.09)  0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(0,173,238,.07)   0%, transparent 40%),
    radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  background-color: var(--bg-0);
}
.footer__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s20);
  padding-block: var(--s8);
  align-items: start;
}

/* Brand column */
.footer__brand { display: flex; flex-direction: column; gap: var(--s4); }
.footer__logo  { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.footer__tagline {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.42);
  line-height: 1.72;
  max-width: 300px; text-align:center;
}
.footer__currencies {
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(228,230,232,.32);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: .32rem .9rem;
  border-radius: 100px;
  justify-content: center;
}
.footer__social { display: flex; gap: 3rem;; margin-top: var(--s2); justify-content: center; }
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  color: rgba(228,230,232,.40);
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.footer__social-link:hover {
  background: rgba(0,173,238,.14);
  border-color: rgba(0,173,238,.32);
  color: var(--grad-end);
}

/* Nav columns */
.footer__nav { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s8); }
.fc h4 {
  font-size: var(--t-xs);
  font-weight: 700;
  color: rgba(228,230,232,.28);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fc ul { display: flex; flex-direction: column; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
.fc a  { font-size: var(--t-sm); color: rgba(228,230,232,.44); transition: color var(--ease); text-decoration: none; }
.fc a:hover { color: var(--grad-end); }

/* Bottom bar */
.footer__bar { border-top: 1px solid rgba(255,255,255,.05); height:45px; }
.footer__bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s5);
  flex-wrap: wrap;
  gap: var(--s4);
}
.footer__copy { font-size: var(--t-xs); color: rgba(228,230,232,.26); }
.footer__legal { display: flex; gap: var(--s5); }
.footer__legal a {
  font-size: var(--t-xs);
  color: rgba(228,230,232,.26);
  text-decoration: none;
  transition: color var(--ease);
}
.footer__legal a:hover { color: rgba(228,230,232,.70); }
.footer__meta { font-size: var(--t-xs); color: rgba(228,230,232,.20); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media(max-width:1100px) {
  .ops-row      { grid-template-columns:1fr 1fr }
  .docs-row     { grid-template-columns:repeat(4,1fr) }
  .footer__inner { grid-template-columns:1fr; gap:var(--s10) }
  .footer__tagline { max-width:100% }
  .footer__nav  { grid-template-columns:repeat(4,1fr) }
}

@media(max-width:960px) {
  .iface-grid       { grid-template-columns:1fr; max-width:520px }
  .platform-pillars { grid-template-columns:1fr 1fr }
  .workflow         { grid-template-columns:1fr }
  .wf-arrow         { display:none }
  .split            { grid-template-columns:1fr; gap:var(--s8) }
  .split--reverse .split__visual { order:0 }
  .billing-wrap     { grid-template-columns:1fr }
  .portal-pair      { grid-template-columns:1fr }
  .sec-reporting    { grid-template-columns:1fr; gap:var(--s8) }
  .cta-inner        { grid-template-columns:1fr; gap:var(--s8) }
  .mobile-grid      { grid-template-columns:1fr }
}

@media(max-width:768px) {
  :root { --s20:3.5rem; --s24:4.5rem }

  .nav__links {
    position: fixed;
    top: 68px;
    inset-inline: 0;
    background: var(--bg-1);
    border-top: 1px solid rgba(255,255,255,.06);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s5) var(--s6);
    gap: var(--s4);
    display: none;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    margin-inline-start: 0;
    z-index: 99;
  }
  .nav__links--open { display:flex }
  .nav__links a     { font-size:var(--t-base); color:rgba(255,255,255,.78) }
  .nav__cta         { display:none }
  .nav__burger      { display:flex }
  .nav              { gap:var(--s3) }

  .hero__inner   { grid-template-columns:1fr }
  .hero__mockup  { display:none }
  .hero__lead    { font-size:var(--t-lg) }
  .hero__actions { flex-direction:column; align-items:flex-start }

  .sec-hd h2,.split__text h2,.section--cta h2 { font-size:var(--t-3xl) }
  .ops-row       { grid-template-columns:1fr }
  .docs-row      { grid-template-columns:repeat(3,1fr) }
  .barcode-row   { grid-template-columns:1fr; padding:var(--s6) }
  .lifecycle-strip  { grid-template-columns:1fr }
  .billing-table td:nth-child(3) { display:none }
  .platform-pillars { grid-template-columns:1fr }
  .footer__nav   { grid-template-columns:1fr 1fr; gap:var(--s8) var(--s6) }
  .footer__cta-inner { flex-direction:column; align-items:flex-start; gap:var(--s6) }
  .footer__meta  { display:none }
  .lf-row        { grid-template-columns:1fr; gap:4px }
  .stats-strip__inner { justify-content:center; gap:var(--s8) }
}

@media(max-width:480px) {
  .docs-row          { grid-template-columns:repeat(2,1fr) }
  .footer__nav       { grid-template-columns:1fr 1fr }
  .footer__bar-inner { flex-direction:column; align-items:flex-start; gap:var(--s3) }
  .footer__legal     { flex-wrap:wrap; gap:var(--s3) }
  .hero__pills       { gap:4px }
  .cta-inner         { padding-block:var(--s12) }
}

/* ═══════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS
   ═══════════════════════════════════════════════════ */

/* ── Skip link ──────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s4);
  background: var(--grad);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 0 0 var(--r) var(--r);
  font-size: var(--t-sm);
  font-weight: 600;
  z-index: 999;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* ── Active nav link ────────────────────────────── */
.nav__links a.active {
  color: var(--white);
  position: relative;
}
/* Desktop links sit on the white header, so the active one uses the brand blue */
.nav__links .nav__d-only a.active { color: var(--grad-mid); }
.nav__links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}

/* ── Page hero (inner pages) ────────────────────── */
/* ── Page Banner (full-width image hero) ─────────── */
.page-banner {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Background warehouse image */
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1553413077-190dd305871c?w=1920&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* Gradient overlay — strong left (text), fades right (image shows), dark bottom */
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(11,24,41,.97) 0%,
      rgba(11,24,41,.90) 38%,
      rgba(11,24,41,.62) 62%,
      rgba(11,24,41,.22) 100%),
    linear-gradient(0deg,
      rgba(11,24,41,.80) 0%,
      transparent 55%);
}

/* Inner layout */
.page-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: var(--s16);
  align-items: center;
  padding-block: var(--s20);
}

/* Breadcrumb */
.page-banner__crumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(228,230,232,.40);
  margin-bottom: var(--s5);
  list-style: none;
}
.page-banner__crumb a { color: rgba(228,230,232,.40); transition: color var(--ease); text-decoration: none; }
.page-banner__crumb a:hover { color: rgba(228,230,232,.80); }
.page-banner__crumb span:last-child { color: rgba(228,230,232,.65); }

/* Eyebrow */
.page-banner__eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grad-end);
  margin-bottom: var(--s3);
}

/* Headline */
.page-banner__h1 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: var(--s5);
}

/* Lead */
.page-banner__lead {
  font-size: var(--t-lg);
  color: rgba(228,230,232,.62);
  font-weight: 300;
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: var(--s6);
}

/* Pills */
.page-banner__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin-bottom: var(--s8);
}
.page-banner__pills li {
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(228,230,232,.70);
  background: rgba(0,173,238,.10);
  border: 1px solid rgba(0,173,238,.24);
  padding: .26rem .82rem;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* Action buttons */
.page-banner__actions {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* Stats panel — glassmorphism cards (right column) */
.page-banner__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.page-banner__stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s4);
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--ease), border-color var(--ease);
}
.page-banner__stat:hover {
  background: rgba(0,173,238,.12);
  border-color: rgba(0,173,238,.28);
}
.page-banner__stat-num {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--s2);
}
.page-banner__stat-label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: rgba(228,230,232,.48);
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* ── Page hero (inner pages) ────────────────────── */
.page-hero {
  background:
    radial-gradient(ellipse 50% 80% at 18% 50%, rgba(18,135,204,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(0,173,238,.06) 0%, transparent 60%),
    var(--bg-1);
  padding-block: var(--s16) var(--s12);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-hero__crumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(228,230,232,.40);
  margin-bottom: var(--s6);
}
.page-hero__crumb a { color: rgba(228,230,232,.40); transition: color var(--ease); }
.page-hero__crumb a:hover { color: rgba(228,230,232,.80); }
.page-hero__crumb span { color: rgba(228,230,232,.65); }
.page-hero__icon-wrap {
  width: 56px;
  height: 56px;
  background: rgba(0,173,238,.10);
  border: 1px solid rgba(0,173,238,.22);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s6);
}
.page-hero__icon-wrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.page-hero__h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 720px;
  margin-bottom: var(--s4);
}
.page-hero__lead {
  font-size: var(--t-lg);
  color: rgba(228,230,232,.58);
  font-weight: 300;
  line-height: 1.65;
  max-width: 620px;
}
.page-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}
.page-hero__pills li {
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(228,230,232,.50);
  background: rgba(34,76,108,.28);
  border: 1px solid rgba(34,76,108,.55);
  padding: .22rem .75rem;
  border-radius: 100px;
}

/* ── Overview grid (index home) ─────────────────── */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.overview-card {
  background: var(--white);
  border: 1px solid #0B1829;
  border-radius:35px !important;
  padding: var(--s7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: box-shadow var(--ease), transform var(--ease);
  color: inherit;
  text-align: center;
}
.overview-card:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.overview-card__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--s4);
  margin:0 auto;
}
.overview-card__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--bg-5);
  line-height: 1.2;
}
.overview-card__desc {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
  flex: 1;
}
.overview-card__cta {
  font-size: var(--t-sm);
  font-weight: 600;
  color: #0a84ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  margin:0 auto;
  text-decoration: none;
}
.overview-card__cta img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: .7;
}

/* ── Overview grid-A (index home) ─────────────────── */
.overview-grid-A {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}
.overview-card-A {
  background: var(--ink);
  border: 2px solid var(--accent);
  border-radius:35px;
  padding: var(--s7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: box-shadow var(--ease), transform var(--ease);
  color: inherit;
  text-align: center;
}
.overview-card-A:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.overview-card-A__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--s4);
  margin:0 auto;
}
.overview-card-A__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.overview-card-A__desc {
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.6;
  flex: 1;
}

.overview-grid-P {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.overview-card-P {
  background: var(--ink);
  border: 2px solid var(--accent);
  border-radius:35px;
  padding: var(--s7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: box-shadow var(--ease), transform var(--ease);
  color: inherit;
  text-align: center;
}
.overview-card-P:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.overview-card-P__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--s4);
  margin:0 auto;
}
.overview-card-P__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.overview-card-P__desc {
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.6;
  flex: 1;
}


.overview-grid-Work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.overview-card-Work {
  background: var(--ink);
  border: 2px solid var(--accent);
  border-radius:35px;
  padding: var(--s7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: box-shadow var(--ease), transform var(--ease);
  color: inherit;
  text-align: center;
}
.overview-card-Work:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.overview-card-Work__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--s4);
  margin:0 auto;
}
.overview-card-Work__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.overview-card-Work__desc {
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.6;
  flex: 1;
}


/* ── Feat icon wrapper (icon in a tinted box) ────── */
.feat-icon-wrap {
  width: 52px;
  height: 52px;
  background: var(--bg-5);
  border: 1px solid rgba(18,135,204,.18);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s5);
  flex-shrink: 0;
  margin:0 auto;
}
.feat-icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.feat-icon-wrap--light {
  background: rgba(0,173,238,.12);
  border-color: rgba(0,173,238,.25);
}

/* ── Icon card (flat, no border box for some contexts) */
.icon-feature {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
}
.icon-feature__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}
.icon-feature__body h4 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.icon-feature__body p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}
.icon-feature--light .icon-feature__body h4 { color: var(--white); }
.icon-feature--light .icon-feature__body p   { color: rgba(228,230,232,.58); }

.feat-icon-wrap-1 {
  width: 52px;
  height: 52px;
  background: var(--white);
  border: 1px solid rgba(18,135,204,.18);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s5);
  flex-shrink: 0;
  margin:0 auto;
}
.feat-icon-wrap-1 img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.feat-icon-wrap-1--light {
  background: rgba(0,173,238,.12);
  border-color: rgba(0,173,238,.25);
}

/* ── Icon card (flat, no border box for some contexts) */
.icon-feature {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
}
.icon-feature__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}
.icon-feature__body h4 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.icon-feature__body p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}
.icon-feature--light .icon-feature__body h4 { color: var(--white); }
.icon-feature--light .icon-feature__body p   { color: rgba(228,230,232,.58); }


/* ── Ops icon card (operations cards with icon) ──── */
.ops-icon-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); margin-bottom:var(--s12) }
.ops-icon-card {
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s7, 1.75rem);
  transition: box-shadow var(--ease);
}
.ops-icon-card:hover { box-shadow: var(--sh); }
.ops-icon-card .feat-icon-wrap { margin-bottom: var(--s5); }
.ops-icon-card h3 { font-size: var(--t-xl); font-weight: 700; margin-bottom: var(--s3); color:var(--bg-5); text-align: center; }
.ops-icon-card > p { font-size: var(--t-sm); color: var(--slate); line-height: 1.65; margin-bottom: var(--s5); }

/* ── Step icon override (PNG in workflow steps) ──── */
.wf-step__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ── Page bottom nav (prev / next) ───────────────── */
.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s6);
  border-top: 1px solid rgba(12,26,46,.10);
  gap: var(--s4);
}
.page-nav a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--grad-mid);
  transition: color var(--ease);
}
.page-nav a:hover { color: var(--grad-end); }
.page-nav a img { width: 15px !important; height: 15px!important; object-fit: contain; opacity: .7; margin-bottom:0px;}
.page-nav a.prev img { transform: scaleX(-1); }

/* ── Highlight strip (index feature bar) ─────────── */
.highlight-strip {
  background: var(--bg-2);
  padding-block: var(--s16);
}
.highlight-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s8);
}
.hl-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}
.hl-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: .85;
}
.hl-item h4 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--white);
}
.hl-item p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.55);
  line-height: 1.55;
}

/* ── Responsive additions ─────────────────────────── */
@media(max-width:960px) {
  .ops-icon-grid { grid-template-columns: 1fr 1fr; }
  .highlight-strip__inner { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}
@media(max-width:768px) {
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .page-hero { padding-block: var(--s12) var(--s8); }
  .page-hero__h1 { font-size: var(--t-3xl); }
  .ops-icon-grid { grid-template-columns: 1fr; }
  .highlight-strip__inner { grid-template-columns: 1fr 1fr; }
  .page-nav a span { display: none; }
}
@media(max-width:480px) {
  .overview-grid { grid-template-columns: 1fr; }
  .highlight-strip__inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   BANNER CAROUSEL — single overlay, infinite loop
   ═══════════════════════════════════════════════════ */
.banner-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0B1829;
  touch-action: pan-y;
  user-select: none;
}

/* ── Sliding image track ─────────────────────────── */
.banner-carousel__track {
  display: flex;
  will-change: transform;
}

.banner-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  position: relative;
  height: clamp(420px, 60vh, 680px);
}

.banner-carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Single overlay wrapper (sits above track) ───── */
.bc-overlay-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;   /* let clicks pass through to buttons */
}

/* Gradient — dark left, transparent right */
.bc-overlay-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(9,18,32,.92)  0%,
      rgba(9,18,32,.78) 35%,
      rgba(9,18,32,.38) 62%,
      rgba(9,18,32,.06) 100%
    ),
    linear-gradient(to top, rgba(9,18,32,.55) 0%, transparent 30%);
}

/* Text content — positioned over gradient */
.bc-overlay-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s12);
  padding-inline: clamp(var(--s8), 7vw, 100px);
  pointer-events: all;      /* re-enable clicks for links/buttons */
  max-width: 660px;
}

/* Category badge */
.bcs-tag {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(228,230,232,.82);
  background: rgba(0,173,238,.12);
  border: 1px solid rgba(0,173,238,.30);
  padding: .24rem .9rem;
  border-radius: 100px;
  margin-bottom: 1rem;
  width: fit-content;
}

/* Headline */
.bcs-heading {
  font-size: clamp(1.7rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin-bottom: .9rem;
}

/* Description */
.bcs-sub {
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  color: rgba(228,230,232,.65);
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 520px;
}

/* Buttons row */
.bcs-btns {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* Pill tags */
.bcs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bcs-pills li {
  font-size: .7rem;
  font-weight: 500;
  color: rgba(228,230,232,.44);
  background: rgba(34,76,108,.28);
  border: 1px solid rgba(34,76,108,.55);
  padding: .22rem .75rem;
  border-radius: 100px;
}

/* ── Prev / Next buttons ─────────────────────────── */
.banner-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(9,18,32,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.88);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease;
}
.banner-carousel__btn--prev { left: 1.25rem; }
.banner-carousel__btn--next { right: 1.25rem; }
.banner-carousel__btn:hover {
  background: rgba(0,173,238,.26);
  border-color: rgba(0,173,238,.55);
  color: #fff;
}
.banner-carousel__btn:active { transform: translateY(-50%) scale(.88); }

/* ── Dots ────────────────────────────────────────── */
.banner-carousel__dots {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
  align-items: center;
}
.banner-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 220ms ease, border-radius 220ms ease, background 220ms ease;
  flex-shrink: 0;
}
.banner-carousel__dot--active {
  width: 24px;
  border-radius: 4px;
  background: #00ADEE;
}
.banner-carousel__dot:hover:not(.banner-carousel__dot--active) {
  background: rgba(255,255,255,.60);
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .banner-carousel__slide { height: clamp(320px, 55vh, 500px); }
  .bc-overlay-gradient {
    background: linear-gradient(
      to bottom,
      rgba(9,18,32,.50) 0%,
      rgba(9,18,32,.85) 100%
    );
  }
  .bc-overlay-content {
    justify-content: flex-end;
    padding-bottom: 3rem;
    padding-inline: var(--s5);
    max-width: 100%;
  }
  .bcs-heading { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
  .bcs-sub { font-size: .88rem; margin-bottom: 1.1rem; }
  .bcs-btns { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .bcs-btns .btn { font-size: .88rem; padding: .55rem 1.15rem; }
  .banner-carousel__btn { width: 38px; height: 38px; font-size: 1rem; }
  .banner-carousel__btn--prev { left: .65rem; }
  .banner-carousel__btn--next { right: .65rem; }
}
@media (max-width: 480px) {
  .banner-carousel__slide { height: clamp(280px, 50vh, 380px); }
  .bcs-sub { display: none; }
  .bcs-heading { font-size: clamp(1.2rem, 5.2vw, 1.55rem); }
  .bcs-pills { display: none; }
  .banner-carousel__dot { width: 6px; height: 6px; }
  .banner-carousel__dot--active { width: 18px; }
}


/* ── Site logo image ────────────────────────────── */
.site-logo-img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.footer__logo .site-logo-img {
  width: 30px;
  height: 30px;
}

@media (max-width: 768px) {
  .banner-carousel__btn { width: 38px; height: 38px; font-size: 1rem; }
  .banner-carousel__btn--prev { left: .6rem; }
  .banner-carousel__btn--next { right: .6rem; }
  .banner-carousel__slide { height: clamp(300px, 52vh, 480px); }
  .banner-carousel__overlay {
    background: rgba(9,18,32,.75);
  }
  .banner-carousel__content {
    padding-inline: var(--s5);
    max-width: 100%;
    justify-content: flex-end;
    padding-bottom: 3.5rem;
  }
  .bcs-heading { font-size: clamp(1.3rem, 5.5vw, 1.85rem); }
  .bcs-sub { font-size: .85rem; margin-bottom: 1rem; }
  .bcs-btns { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .bcs-btns .btn { font-size: .85rem; padding: .55rem 1.1rem; }
}
@media (max-width: 480px) {
  .banner-carousel__slide { height: clamp(260px, 48vh, 360px); }
  .banner-carousel__dot { width: 6px; height: 6px; }
  .banner-carousel__dot--active { width: 18px; }
  .bcs-tag { font-size: .66rem; }
  .bcs-heading { font-size: clamp(1.2rem, 5vw, 1.55rem); }
  .bcs-sub { display: none; }
}

/* ═══════════════════════════════════════════════════
   ORACLE-STYLE REDESIGN — additions only
   All existing rules kept intact above this block.
   ═══════════════════════════════════════════════════ */

/* ── Desktop / mobile nav visibility ── */
.nav__d-only { display: list-item; }
.nav__m-only { display: none; }

/* ── Nav links — push to right; hover: white bg + ink text ── */
.nav__links { gap: 0; margin-inline-start: auto; }
.nav__links a:hover { color: var(--cobalt); background: var(--white); }

/* ─────────────────────────────────────────────────── */
/* ANNOUNCEMENT BAR                                    */
/* ─────────────────────────────────────────────────── */
.ann-bar {
  background: var(--bg-3);
  border-bottom: 1px solid rgba(0,173,238,.18);
  padding-block: .6rem;
  overflow: hidden;
}
.ann-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  position: relative;
}
.ann-bar__text {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.72);
  line-height: 1.45;
  text-align: center;
  max-width: 740px;
}
.ann-bar__close {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(228,230,232,.38);
  font-size: 1.3rem;
  line-height: 1;
  padding: .1rem .35rem;
  transition: color var(--ease);
}
.ann-bar__close:hover { color: rgba(228,230,232,.85); }

/* ─────────────────────────────────────────────────── */
/* ORACLE MEGA-MENU NAV                                */
/* ─────────────────────────────────────────────────── */
.nav { gap: var(--s4); }

.nav__item { position: relative; }

.nav__drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 4px;
  transition: color var(--ease);
  white-space: nowrap;
}
.nav__drop-trigger svg { transition: transform .2s ease; flex-shrink: 0; }
.nav__drop-trigger:hover { color: var(--grad-end); }
.nav__item--drop:hover .nav__drop-trigger svg { transform: rotate(180deg); }

/* Mega panel */
.nav__mega {
  position: absolute;
  top: calc(100% + 10px);
  left: -1rem;
  background: var(--bg-2);
  border: 1px solid var(--border-d);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s7, 1.75rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s8);
  min-width: 640px;
  box-shadow: 0 16px 56px rgba(0,0,0,.55);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.nav__item--drop:hover .nav__mega,
.nav__item--drop.is-open .nav__mega {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.nav__item--drop.is-open .nav__drop-trigger svg {
  transform: rotate(180deg);
}

.mega-col { display: flex; flex-direction: column; gap: var(--s2); }
.mega-col__head {
  font-size: var(--t-xs);
  font-weight: 700;
  color: rgba(228,230,232,.30);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: var(--s2);
}
.mega-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  text-decoration: none;
  transition: background var(--ease);
}
.mega-link:hover { background: var(--white); }
.mega-link strong { font-size: var(--t-sm); font-weight: 600; color: rgba(228,230,232,.88); display: block; }
.mega-link span   { font-size: 11px; color: rgba(228,230,232,.36); line-height: 1.4; }
.mega-link:hover strong { color: var(--grad-mid); }
.mega-link:hover span   { color: var(--grad-start); }

/* Right group: contact + CTA */
.nav__right {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-inline-start: var(--s4);
  flex-shrink: 0;
}
.nav__contact {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--grad-mid);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--grad-mid);
  padding: 6px 18px;
  border-radius: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.nav__contact:hover,
.nav__contact:active,
.nav__contact:focus {
  color: var(--grad-mid);
  background: rgba(255,255,255,.08);
  border-color: var(--grad-mid);
}

/* ─────────────────────────────────────────────────── */
/* PRODUCT NAV TABS (index.html — below carousel)      */
/* ─────────────────────────────────────────────────── */
.prod-nav-wrap {
  background: var(--bg-2);
  border-top: 1px solid rgba(0,173,238,.10);
  border-bottom: 1px solid rgba(255,255,255,.04);
  overflow-x: auto;
  scrollbar-width: none;
}
.prod-nav-wrap::-webkit-scrollbar { display: none; }

.prod-nav { display: flex; align-items: stretch; }
.prod-nav__tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: var(--s4) var(--s7, 1.75rem);
  border-bottom: 2px solid transparent;
  border-right: 1px solid rgba(255,255,255,.04);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--ease), border-color var(--ease);
}
.prod-nav__tab:last-child { border-right: none; }
.prod-nav__tab:hover {
  background: rgba(0,173,238,.07);
  border-bottom-color: rgba(0,173,238,.55);
}
.prod-nav__label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: rgba(228,230,232,.82);
  white-space: nowrap;
}
.prod-nav__sub {
  font-size: 10px;
  color: rgba(228,230,232,.33);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────── */
/* ORACLE FEATURE TABS SECTION (index.html)            */
/* ─────────────────────────────────────────────────── */
.oracle-feat-section { background: var(--white); }

.otab-nav {
  display: flex;
  border-bottom: 1.5px solid rgba(12,26,46,.10);
  margin-bottom: var(--s12);
  overflow-x: auto;
  scrollbar-width: none;
}
.otab-nav::-webkit-scrollbar { display: none; }

.otab-btn {
  font-family: var(--f);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--slate);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  padding: var(--s4) var(--s6);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ease), border-color var(--ease);
}
.otab-btn:hover  { color: var(--ink); }
.otab-btn.is-active { color: var(--grad-mid); border-bottom-color: var(--grad-mid); }

.otab-panels { position: relative; }
.otab-panel  { display: none; }
.otab-panel.is-active { display: block; }

/* ─────────────────────────────────────────────────── */
/* ORACLE SPLIT LAYOUT                                 */
/* ─────────────────────────────────────────────────── */
.oracle-split {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: var(--s16);
  align-items: center;
  border: 1px solid rgba(12, 120, 212, 0.18);
  width:100%;
}
.oracle-split--rev .oracle-split__visual { order: -1; }

.oracle-split__eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grad-mid);
  margin-bottom: var(--s4);
}
.oracle-split__h {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: var(--bg-5);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: var(--s5);
}
.oracle-split__lead {
  font-size: var(--t-base);
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: var(--s6);
  max-width: 52ch;
}
.oracle-feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s7, 1.75rem) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.oracle-feat-list li {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

.oracle-feat-list li::before {display: none}

.oracle-feat-list li strong {
font-weight: 700;
  color: var(--bg-5);
}
.oracle-feat-list li strong1 {font-weight: 700;color: var(--white);}
.oracle-feat-list  .feat-header{display:flex; align-items: center; gap:0.5rem; margin-bottom:4px;}
.oracle-feat-list li p{margin:0; color:var(--slate); margin-left: 23px;}
.oracle-feat-list li p1{margin:0; color:var(--white); display:flex; flex-wrap: wrap; align-items: center; gap:6px; margin-left: 23px;}
.oracle-feat-list li p1 img{width:12px; height:12px; display: inline-block; margin:0 2px;}
.oracle-feat-list img{width:15px; height:15px; flex-shrink:0;}

/* Arrow CTA link */
.oracle-cta-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--bg-5);
  text-decoration: none;
  transition: color var(--ease), gap var(--ease);
}

/* Arrow CTA link */
.oracle-cta-link-A {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  transition: color var(--ease), gap var(--ease);
}


.oracle-cta-link img{width:15px; height:15px; margin-bottom:-2px;}
.oracle-cta-link:hover { color: var(--grad-end); gap: .5rem; }
.oracle-cta-link--light { color: var(--grad-end); }
.oracle-cta-link--light:hover { color: #fff; }

.oracle-cta-link-A img{width:15px; height:15px; margin-bottom:-2px;}
.oracle-cta-link-A:hover { color: var(--grad-end); gap: .5rem; }
.oracle-cta-link-A--light { color: var(--grad-end); }
.oracle-cta-link-A--light:hover { color: #fff; }

/* Image frame */
.oracle-split__visual {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 32px 64px rgba(0,0,0,.10);
  border: 1px solid rgba(12,26,46,.07);
}
.oracle-split__img {
  width: 100%;
  height: 360px!important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─────────────────────────────────────────────────── */
/* ORACLE HIGHLIGHTS SECTION (index.html dark strip)   */
/* ─────────────────────────────────────────────────── */
.oracle-hl-section {
  background: var(--bg-2);
  padding-block: var(--s20);
  border-top: 1px solid rgba(0,173,238,.08);
}
.oracle-hl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s10);
}
.oracle-hl-card { display: flex; flex-direction: column; gap: var(--s4); }
.oracle-hl-icon-wrap {
  width: 52px;
  height: 52px;
  background: rgba(0,173,238,.10);
  border: 1px solid rgba(0,173,238,.20);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.oracle-hl-icon { width: 28px; height: 28px; object-fit: contain; opacity: .88; }
.oracle-hl-card h4 { font-size: var(--t-lg); font-weight: 700; color: var(--white); line-height: 1.2; }
.oracle-hl-card p  { font-size: var(--t-sm); color: rgba(228,230,232,.50); line-height: 1.65; flex: 1; }

/* ─────────────────────────────────────────────────── */
/* ORACLE CTA SECTION (all pages)                      */
/* ─────────────────────────────────────────────────── */
.oracle-cta-section {
  background: var(--bg-1);
  padding-block: var(--s16);
  border-top: 1px solid rgba(255,255,255,.05);
}
.oracle-cta-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s16);
  align-items: center;
}
.oracle-cta-h {
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-bottom: var(--s4);
}
.oracle-cta-p {
  font-size: var(--t-lg);
  color: rgba(228,230,232,.50);
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: var(--s6);
  max-width: 52ch;
}
.oracle-cta-facts {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.oracle-cta-facts li {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.40);
  padding-inline-start: 1rem;
  position: relative;
}
.oracle-cta-facts li::before {
  content: '\00B7';
  position: absolute;
  inset-inline-start: 0;
  color: var(--grad-end);
  font-weight: 700;
}
.oracle-cta-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,173,238,.16);
  border-radius: var(--r-xl);
  padding: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.oracle-cta-card h3 { font-size: var(--t-2xl); font-weight: 700; color: var(--white); }
.oracle-cta-card > p { font-size: var(--t-sm); color: rgba(228,230,232,.46); line-height: 1.55; margin-bottom: var(--s3); }
.oracle-cta-actions { display: flex; flex-direction: column; gap: var(--s3); }

/* ─────────────────────────────────────────────────── */
/* INNER-PAGE COMPONENT IMPROVEMENTS                   */
/* ─────────────────────────────────────────────────── */

/* Reduce excessive rounding on overview cards */
.overview-card   { border-radius: var(--r-lg); }
.overview-card-A { border-radius: var(--r-lg); }

/* Page-hero: add stronger left accent for Oracle feel */
.page-hero {
  border-left: none;
  position: relative;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad);
  opacity: .55;
}

/* iface-card: Oracle-style border, not too rounded */
.iface-card { border-radius: 50px; }

/* ops-card: cleaner */
.ops-card { border-radius: var(--r-lg); }

/* Section headings on inner pages: slightly left-biased */
.page-hero ~ .section .sec-hd { text-align: left; }
.page-hero ~ .section.section--paper .sec-hd { text-align: left; }
.page-hero ~ .section.section--deep .sec-hd { text-align: left; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Oracle additions
   ═══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .oracle-cta-inner { grid-template-columns: 1fr; gap: var(--s10); }
  .oracle-cta-card  { max-width: 480px; }
}

@media (max-width: 960px) {
  /* Hide mega-menu entirely; show direct mobile links */
  .nav__item--drop { display: none !important; }
  .nav__d-only     { display: none !important; }
  .nav__m-only     { display: list-item; }
  /* Burger moves nav__right out of the way */
  .nav__right      { display: none; }

  .oracle-split     { grid-template-columns: 1fr; gap: var(--s8); }
  .oracle-split--rev .oracle-split__visual { order: 0; }
  .oracle-hl-grid   { grid-template-columns: 1fr 1fr; gap: var(--s8); }

  .page-hero ~ .section .sec-hd { text-align: center; }
}

@media (max-width: 768px) {
  /* Keep existing mobile nav behaviour intact */
  .nav__m-only  { display: list-item; }
  .nav__d-only  { display: none !important; }

  .prod-nav__tab  { padding: var(--s3) var(--s5); }
  .otab-btn       { padding: var(--s3) var(--s5); font-size: var(--t-sm); }
  .oracle-split__img { height: 220px; }
  .oracle-cta-inner  { grid-template-columns: 1fr; }
  .oracle-cta-card   { max-width: 100%; }
  .ann-bar__text { font-size: .78rem; }
}

@media (max-width: 480px) {
  .oracle-hl-grid { grid-template-columns: 1fr; }
}

/* Mobile nav panel — show nav__right as items at bottom */
@media (max-width: 768px) {
  .nav__right { display: none; }
  .nav__cta   { display: block !important; }
}
/* ============================================
   LIVE REPORTS SECTION
   ============================================ */

.live-reports { width: 100%; max-width: 1500px; min-height: 520px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; overflow: hidden; border-radius: 18px; background: #f5f7fa; border: 1px solid #d9e0e7; box-shadow: 0 12px 35px rgba(11, 31, 58, 0.08);}

/* ============================================
   LEFT SIDEBAR
   ============================================ */

.live-reports__sidebar {position: relative; padding: 55px 30px 40px; overflow: hidden; color: #ffffff; background: radial-gradient( circle at 80% 10%, rgba(0, 120, 212, 0.14), transparent 35% ), linear-gradient(145deg, #0b1f3a 0%, #06182d 100%);}

/* ============================================
   SIDEBAR HEADING
   ============================================ */

.live-reports__heading { position: relative; z-index: 3; display: flex; align-items: center; gap: 11px; margin-bottom: 28px; justify-content:center;}
.live-reports__heading span { width: 42px; height: 2px; display: block; background: var(--white);}
.live-reports__heading strong { color: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em;}

/* ============================================
   BIG 9
   ============================================ */

.live-reports__number {position: relative; z-index: 3; margin-left: 5px; font-size: 88px; line-height: 0.9; font-weight: 800; font-style: italic; background: linear-gradient( 180deg, #ffffff 0%, #5abef1 100% ); -webkit-background-clip: text; background-clip: text; text-align: center; color: transparent; text-shadow:  0 0 20px rgba(0, 168, 255, 0.12); }
/* ============================================
   SIDEBAR TITLE
   ============================================ */

.live-reports__sidebar h2 { position: relative; z-index: 3; margin: 8px 0 14px; font-size: 22px; line-height: 1.1; font-weight: 800; color: #ffffff; text-align: center;}
.live-reports__description { position: relative; z-index: 3; max-width: 225px; margin: 0; color: rgba(255,255,255,0.68); font-size: 13px; line-height: 1.7; text-align: center;}
/* ============================================
   SIDEBAR FEATURES
   ============================================ */

.live-reports__features { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 8px; margin-top: 26px;}
.analytics-feature { height: 38px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 1px solid rgba(0, 160, 240, 0.28); border-radius: 5px; background: rgba(0, 120, 212, 0.12); color: #ffff; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; transition: all 0.25s ease;}
.analytics-feature:hover { background: rgba(0, 150, 230, 0.2); border-color: rgba(0, 170, 250, 0.6); transform: translateX(3px);}
.analytics-feature img { width: 20px; height: 20px; object-fit: contain;}

/* ============================================
   NETWORK BACKGROUND
   ============================================ */

.network-bg { position: absolute; left: -50px; right: -50px; bottom: -5px; height: 155px; opacity: 0.65; pointer-events: none;}
.network-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #08a9f0; box-shadow:0 0 10px rgba(0,170,255,0.9);}
.dot1 { left: 15%; bottom: 35px;}
.dot2 { left: 32%; bottom: 75px;}
.dot3 { left: 50%; bottom: 27px;}
.dot4 { left: 68%; bottom: 83px;}
.dot5 { left: 82%; bottom: 48px;}
.dot6 { left: 94%; bottom: 105px;}

/* Network lines */
.network-line { position: absolute; height: 1px; transform-origin: left center; background:linear-gradient(90deg, rgba(0,168,255,0), rgba(0,168,255,0.55), rgba(0,168,255,0));}
.network-line1 { width: 190px; left: 15%; bottom: 37px; transform: rotate(-17deg);}
.network-line2 { width: 185px; left: 32%; bottom: 75px; transform: rotate(16deg);}
.network-line3 { width: 180px; left: 50%; bottom: 29px; transform: rotate(-20deg);}
.network-line4 { width: 150px; left: 68%; bottom: 83px; transform: rotate(18deg);}

/* ============================================
   REPORT GRID
   ============================================ */

.live-reports__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(3, 1fr); gap: 1px; background: #e2e7ec;}

/* ============================================
   REPORT CARD
   ============================================ */

.report-card { position: relative; display: flex; align-items: flex-start;gap: 25px; min-width: 0; padding: 32px 26px; background: #ffffff; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; overflow: hidden; }
.report-card:hover { z-index: 2; background: #fbfdff; box-shadow:0 8px 25px rgba(11, 31, 58, 0.08);}
/* Blue accent */

.report-card::before {content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #0078d4; transform: scaleY(0); transform-origin: bottom; transition: transform 0.25s ease; }
.report-card:hover::before { transform: scaleY(1);}

/* ============================================
   REPORT ICON
   ============================================ */

.report-icon { flex: 0 0 50px; width: 50px; height: 50px; min-width:50px; min-height:50px; overflow: hidden; display: flex; align-items: center;justify-content: center; border-radius: 50%; background: var(--grad); transition: transform 0.25s ease, background 0.25s ease;}
.report-icon img { width: 30px;height: 30px; object-fit: contain;}
.report-card:hover .report-icon { transform: scale(1.04); background: var(--grad);}

/* ============================================
   REPORT CONTENT
   ============================================ */

.report-info {min-width: 0; padding-top: 2px;}
.report-number { margin-bottom: 4px; color: #0874ca; font-size: 15px; line-height: 1; font-weight: 800;}
.report-info h3 { margin: 5px 0 10px; color:var(--bg-5); font-size: 20px; line-height: 1.2; font-weight: 800;}
.report-info p { max-width: 310px; margin: 0; color: #62758a; font-size: 12.5px; line-height: 1.55;}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {

    .live-reports { grid-template-columns: 270px 1fr;}
    .report-card { padding: 25px 20px; gap: 18px;}
    .report-icon { flex-basis: 62px; width: 62px; height: 62px; }
    .report-icon img { width: 34px; height: 34px; }
    .report-number { font-size: 23px;}.report-info h3 {font-size: 15px;}}


/* ============================================
   TABLET
   ============================================ */

@media (max-width: 900px) {.live-reports {grid-template-columns: 1fr;}.live-reports__sidebar {min-height: 430px;}.live-reports__grid {grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-rows: auto;}}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 600px) {

    .live-reports {border-radius: 12px;}
    .live-reports__sidebar {padding: 35px 25px;}
    .live-reports__number {font-size: 70px;}
    .live-reports__sidebar h2 {font-size: 23px;}
    .live-reports__description {max-width: 100%;}
    .live-reports__grid {grid-template-columns: 1fr;gap: 1px;}
    .report-card {min-height: 145px;padding: 24px 20px;}}

/* ══════════════════════════════════════════════════════════════════
   PAGE STYLES
   Moved here from the <style> blocks of each page.
   Rules used on only some pages are scoped with :where(.pg-<page>),
   the class on each page's <body>. :where() adds no specificity, so
   every rule behaves exactly as it did inside the page.
   ══════════════════════════════════════════════════════════════════ */

:where(.pg-pricing, .pg-download) .pr-hero {
  position: relative;
  background: #eef3fb;
  padding: 4.5rem 0 5rem;
  overflow: hidden;
}

:where(.pg-pricing, .pg-download) .pr-hero::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  top: -180px;
  left: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18,135,204,.13) 0%, transparent 70%);
  pointer-events: none;
}

:where(.pg-pricing, .pg-download) .pr-hero::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -140px;
  right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,173,238,.11) 0%, transparent 70%);
  pointer-events: none;
}

:where(.pg-pricing, .pg-download) .pr-hero__blob-bl {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: -140px;
  left: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,117,187,.09) 0%, transparent 70%);
  pointer-events: none;
}

:where(.pg-pricing, .pg-download) .pr-hero__blob-br {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: -140px;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,173,238,.09) 0%, transparent 70%);
  pointer-events: none;
}

:where(.pg-pricing, .pg-download) .pr-hero .container {
  position: relative;
  z-index: 1;
}

:where(.pg-pricing, .pg-download) .pr-hero__hd {
  text-align: center;
  margin-bottom: 3rem;
}

:where(.pg-pricing, .pg-download) .pr-hero__hd .accent-rule {
  display: block;
  width: 50px;
  height: 4px;
  background: var(--grad);
  border-radius: 2px;
  margin: 0 auto 1.25rem;
}

:where(.pg-pricing, .pg-download) .pr-hero__hd h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  margin-bottom: .75rem;
}

:where(.pg-pricing, .pg-download) .pr-hero__hd h1 em {
  font-style: normal;
  color: var(--grad-mid);
}

:where(.pg-pricing, .pg-download) .pr-hero__hd p {
  font-size: 1rem;
  color: var(--slate);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.65;
}

:where(.pg-pricing, .pg-download) .pr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  max-width: 1020px;
  margin: 0 auto;
}

:where(.pg-pricing, .pg-download) .pr-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(9,18,32,.07), 0 1px 3px rgba(9,18,32,.05);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

:where(.pg-pricing, .pg-download) .pr-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 36px rgba(9,18,32,.13);
}

:where(.pg-pricing, .pg-download) .pr-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 260ms ease;
}

:where(.pg-pricing, .pg-download) .pr-card {
  position: relative;
}

:where(.pg-pricing, .pg-download) .pr-card:hover::before {
  opacity: 1;
}

:where(.pg-pricing, .pg-download) .pr-card__img {
  width: 100%;
  height: 260px;
  overflow: hidden;
}

:where(.pg-pricing, .pg-download) .pr-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms ease;
}

:where(.pg-pricing, .pg-download) .pr-card:hover .pr-card__img img {
  transform: scale(1.05);
}

:where(.pg-pricing, .pg-download) .pr-card__body {
  padding: 1.5rem 1.6rem 1.65rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

:where(.pg-pricing, .pg-download) .pr-card__row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}

:where(.pg-pricing, .pg-download) .pr-card__ico {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 11px;
  background: rgba(18,135,204,.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.pg-pricing, .pg-download) .pr-card__ico svg {
  width: 24px;
  height: 24px;
  color: var(--grad-mid);
}

:where(.pg-pricing, .pg-download) .pr-card__text h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .3rem;
}

:where(.pg-pricing, .pg-download) .pr-card__text p {
  font-size: .875rem;
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-pricing, .pg-download) .pr-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(.pg-pricing, .pg-download) .pr-card__line {
  width: 38px;
  height: 3px;
  background: var(--grad);
  border-radius: 2px;
}

:where(.pg-pricing, .pg-download) .pr-card__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

:where(.pg-pricing, .pg-download) .pr-card__arrow:hover {
  background: var(--grad-end);
  transform: scale(1.08);
}

:where(.pg-pricing, .pg-download) .pr-card__arrow svg {
  width: 15px;
  height: 15px;
  color: #fff;
}

:where(.pg-pricing, .pg-download) .pr-plan {
  background: var(--bg-2);
  padding: 5rem 0;
}

:where(.pg-pricing, .pg-download) .pr-plan .sec-hd h2 {
  color: var(--white);
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  margin-bottom: .5rem;
}

:where(.pg-pricing, .pg-download) .pr-plan .sec-hd p {
  color: var(--slate);
  font-size: .9rem;
  max-width: 460px;
  margin: 0 auto;
}

:where(.pg-pricing, .pg-download) .pr-plan__inner {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 2rem;
  margin-top: 3rem;
  align-items: start;
}

:where(.pg-pricing, .pg-download) .pr-plan__visual {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  height: 420px;
}

:where(.pg-pricing, .pg-download) .pr-plan__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

:where(.pg-pricing, .pg-download) .pr-plan__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,18,32,.75) 0%, rgba(9,18,32,.2) 55%, transparent 100%);
}

:where(.pg-pricing, .pg-download) .pr-plan__visual-label {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  right: 1.4rem;
}

:where(.pg-pricing, .pg-download) .pr-plan__visual-label h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem;
}

:where(.pg-pricing, .pg-download) .pr-plan__visual-label p {
  font-size: .8rem;
  color: rgba(228,230,232,.75);
}

:where(.pg-pricing, .pg-download) .pr-plan__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--grad-mid);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .25rem .8rem;
  border-radius: 100px;
  margin-bottom: .6rem;
}

:where(.pg-pricing, .pg-download) .pr-plan__badge svg {
  width: 10px;
  height: 10px;
}

:where(.pg-pricing, .pg-download) .pr-plan__features {
  background: var(--bg-3);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-d);
  overflow: hidden;
}

:where(.pg-pricing, .pg-download) .pr-plan__features-head {
  padding: 1.6rem 1.75rem;
  border-bottom: 1px solid var(--border-d);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(18,135,204,.10) 0%, rgba(0,173,238,.05) 100%);
}

:where(.pg-pricing, .pg-download) .pr-plan__features-head h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

:where(.pg-pricing, .pg-download) .pr-plan__features-head span {
  font-size: .72rem;
  color: var(--grad-end);
  background: rgba(0,173,238,.12);
  border: 1px solid rgba(0,173,238,.22);
  padding: .2rem .65rem;
  border-radius: 100px;
  font-weight: 600;
}

:where(.pg-pricing, .pg-download) .pr-feat-list {
  padding: 1.4rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

:where(.pg-pricing, .pg-download) .pr-feat {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

:where(.pg-pricing, .pg-download) .pr-feat__chk {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(18,135,204,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

:where(.pg-pricing, .pg-download) .pr-feat__chk svg {
  width: 10px;
  height: 10px;
  color: var(--grad-end);
}

:where(.pg-pricing, .pg-download) .pr-feat span {
  font-size: .875rem;
  color: rgba(228,230,232,.82);
  line-height: 1.5;
}

:where(.pg-pricing, .pg-download) .pr-feat span strong {
  color: var(--white);
  font-weight: 600;
}

:where(.pg-pricing, .pg-download) .pr-plan__cta {
  padding: 0 1.75rem 1.6rem;
}

:where(.pg-pricing, .pg-download) .pr-plan__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .9rem 1.5rem;
  border-radius: var(--r-lg);
  font-size: .9rem;
  font-weight: 600;
  background: var(--grad);
  color: #fff;
  text-decoration: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

:where(.pg-pricing, .pg-download) .pr-plan__cta a:hover {
  opacity: .88;
  transform: translateY(-1px);
}

:where(.pg-pricing, .pg-download) .pr-plan__cta a svg {
  width: 14px;
  height: 14px;
}

:where(.pg-pricing, .pg-download) .pr-modules {
  background: var(--bg-1);
  padding: 4rem 0;
  border-top: 1px solid var(--border-d);
  border-bottom: 1px solid var(--border-d);
}

:where(.pg-pricing, .pg-download) .pr-modules .sec-hd h2 {
  color: var(--white);
  font-size: 1.45rem;
  margin-bottom: .4rem;
}

:where(.pg-pricing, .pg-download) .pr-modules .sec-hd p {
  color: var(--slate);
  font-size: .875rem;
}

:where(.pg-pricing, .pg-download) .mod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-d);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-d);
  margin-top: 2.5rem;
}

:where(.pg-pricing, .pg-download) .mod-cell {
  background: var(--bg-2);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: background 160ms ease;
}

:where(.pg-pricing, .pg-download) .mod-cell:hover {
  background: var(--bg-3);
}

:where(.pg-pricing, .pg-download) .mod-cell__ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(18,135,204,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-pricing, .pg-download) .mod-cell__ico img {
  width: 17px;
  height: 17px;
}

:where(.pg-pricing, .pg-download) .mod-cell__lbl {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(228,230,232,.85);
  line-height: 1.3;
}

:where(.pg-pricing, .pg-download) .mod-cell__sub {
  font-size: .7rem;
  color: var(--slate);
  margin-top: .1rem;
}

:where(.pg-pricing, .pg-download) .pr-faq {
  background: #f6f9fd;
  padding: 5rem 0;
}

:where(.pg-pricing, .pg-download) .pr-faq .sec-hd h2 {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: .5rem;
}

:where(.pg-pricing, .pg-download) .pr-faq .sec-hd p {
  color: var(--slate);
  font-size: .9rem;
  max-width: 440px;
  margin: 0 auto;
}

:where(.pg-pricing, .pg-download) .faq-wrap {
  max-width: 700px;
  margin: 2.75rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

:where(.pg-pricing, .pg-download) .faq-q {
  background: #fff;
  border-radius: var(--r-xl);
  border: 1px solid rgba(9,18,32,.07);
  overflow: hidden;
}

:where(.pg-pricing, .pg-download) .faq-q__btn {
  width: 100%;
  background: none;
  border: none;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--f);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 160ms ease;
}

:where(.pg-pricing, .pg-download) .faq-q__btn:hover {
  color: var(--grad-mid);
}

:where(.pg-pricing, .pg-download) .faq-q__btn svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--slate);
  transition: transform 240ms ease, color 160ms ease;
}

:where(.pg-pricing, .pg-download) .faq-q.open .faq-q__btn svg {
  transform: rotate(45deg);
  color: var(--grad-mid);
}

:where(.pg-pricing, .pg-download) .faq-q__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

:where(.pg-pricing, .pg-download) .faq-q.open .faq-q__body {
  max-height: 200px;
}

:where(.pg-pricing, .pg-download) .faq-q__body-inner {
  padding: 0 1.4rem 1.2rem;
  border-top: 1px solid rgba(9,18,32,.06);
  padding-top: .7rem;
  font-size: .875rem;
  color: var(--slate);
  line-height: 1.7;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .pr-cta {
  background: var(--bg-2);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .pr-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
          radial-gradient(ellipse 55% 80% at 8% 50%, rgba(18,135,204,.09) 0%, transparent 70%),
          radial-gradient(ellipse 50% 70% at 92% 50%, rgba(0,173,238,.07) 0%, transparent 70%);
  pointer-events: none;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .pr-cta .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .pr-cta h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  color: var(--white);
  font-weight: 700;
  margin-bottom: .7rem;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .pr-cta p {
  color: var(--slate);
  font-size: .9rem;
  max-width: 460px;
  margin: 0 auto 2rem;
  line-height: 1.65;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .pr-cta__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .btn-pr-solid {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 2rem;
  border-radius: var(--r-lg);
  font-size: .92rem;
  font-weight: 600;
  background: var(--grad);
  color: #fff;
  text-decoration: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .btn-pr-solid:hover {
  opacity: .88;
  transform: translateY(-2px);
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .btn-pr-ghost {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 2rem;
  border-radius: var(--r-lg);
  font-size: .92rem;
  font-weight: 600;
  border: 1px solid var(--border-d);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}

:where(.pg-pricing, .pg-download, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .btn-pr-ghost:hover {
  border-color: rgba(75,133,170,.6);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  :where(.pg-pricing, .pg-download) .pr-cards {
    grid-template-columns: 1fr;
  }

  :where(.pg-pricing, .pg-download) .pr-plan__inner {
    grid-template-columns: 1fr;
  }

  :where(.pg-pricing, .pg-download) .pr-plan__visual {
    height: 280px;
  }

  :where(.pg-pricing, .pg-download) .mod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  :where(.pg-pricing, .pg-download) .pr-card__img {
    height: 210px;
  }

  :where(.pg-pricing, .pg-download) .mod-grid {
    grid-template-columns: 1fr;
  }
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ptl-banner::before {
  background-image: url("../images/banner-13.png");
  background-position: center center;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ptl-banner::after {
  background:
          linear-gradient(108deg,
            rgba(9,18,32,.98)  0%,
            rgba(9,18,32,.94) 33%,
            rgba(9,18,32,.62) 58%,
            rgba(9,18,32,.15) 100%),
          linear-gradient(0deg,
            rgba(9,18,32,.88) 0%,
            transparent 52%);
}

@media (max-width: 860px) {
  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ptl-banner .page-banner__inner {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ptl-banner .page-banner__stats {
    display: none;
  }
}

:where(.pg-portal-3) .ppv2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(12,26,46,.10);
  box-shadow: 0 4px 32px rgba(12,26,46,.07);
}

:where(.pg-portal-3) .ppv2-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

:where(.pg-portal-3) .ppv2-card--light {
  background: var(--white);
}

:where(.pg-portal-3) .ppv2-card--dark {
  background: var(--bg-2);
  border-left: 1px solid rgba(255,255,255,.06);
}

:where(.pg-portal-3) .ppv2-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(12,26,46,.08);
  margin: 0 auto;
}

:where(.pg-portal-3) .ppv2-card--dark .ppv2-head {
  border-bottom-color: rgba(255,255,255,.07);
}

:where(.pg-portal-3) .ppv2-icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-portal-3) .ppv2-icon-ring--light {
  background: var(--grad);
  border: 1px solid rgba(18,135,204,.22);
}

:where(.pg-portal-3) .ppv2-icon-ring--dark {
  background: var(--white);
  border: 1px solid rgba(0,173,238,.28);
}

:where(.pg-portal-3) .ppv2-icon-ring img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

:where(.pg-portal-3) .ppv2-head-text h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bg-5);
  margin-bottom: .25rem;
}

:where(.pg-portal-3) .ppv2-card--dark .ppv2-head-text h3 {
  color: var(--white);
}

:where(.pg-portal-3) .ppv2-url {
  font-size: 0.75rem;
  background: rgba(18,135,204,.08);
  color: var(--grad-mid);
  padding: .15rem .5rem;
  border-radius: 4px;
  font-family: "Menlo","Consolas",monospace;
}

:where(.pg-portal-3) .ppv2-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0FBF8A;
  background: rgba(15,191,138,.10);
  border: 1px solid rgba(15,191,138,.25);
  padding: .15rem .5rem;
  border-radius: 100px;
}

:where(.pg-portal-3) .ppv2-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0FBF8A;
  flex-shrink: 0;
}

:where(.pg-portal-3) .ppv2-lead {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

:where(.pg-portal-3) .ppv2-card--dark .ppv2-lead {
  color: rgba(228,230,232,.55);
}

:where(.pg-portal-3) .ppv2-retry {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  background: rgba(0,173,238,.06);
  border: 1px solid rgba(0,173,238,.14);
  border-radius: var(--r);
  padding: .6rem 2rem;
  margin-bottom: 1.25rem;
  width:80%;
}

:where(.pg-portal-3) .ppv2-retry-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--grad-end);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

:where(.pg-portal-3) .ppv2-retry-flow {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

:where(.pg-portal-3) .ppv2-retry-step {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(228,230,232,.70);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: .15rem .5rem;
  border-radius: 4px;
}

:where(.pg-portal-3) .ppv2-retry-arrow {
  color: rgba(228,230,232,.25);
  font-size: .7rem;
}

:where(.pg-portal-3) .ppv2-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

:where(.pg-portal-3) .ppv2-list li {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.5;
}

:where(.pg-portal-3) .ppv2-list li img {
  width:12px;
  height:12px;
  flex-shrink:0;
  margin-top:4px;
}

:where(.pg-portal-3) .ppv2-card--dark .ppv2-list li img {
  width:12px;
  height:12px;
  flex-shrink:0;
  margin-top:4px;
}

:where(.pg-portal-3) .ppv2-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .42em;
}

:where(.pg-portal-3) .ppv2-card--dark .ppv2-list li {
  color: rgba(228,230,232,.65);
}

:where(.pg-portal-3) .ppv2-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  gap: .75rem;
  background: var(--white);
  border-left: 1px solid rgba(12,26,46,.08);
  border-right: 1px solid rgba(12,26,46,.08);
}

:where(.pg-portal-3) .ppv2-bridge-pill {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .35rem .75rem;
  border-radius: 100px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

:where(.pg-portal-3) .ppv2-bridge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(18,135,204,.25);
}

:where(.pg-portal-1, .pg-portal-2) .pi-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--portal {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.09);
  box-shadow: 0 4px 32px rgba(12,26,46,.07);
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp {
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 4px 32px rgba(0,0,0,.20);
}

:where(.pg-portal-1, .pg-portal-2) .pi-hd {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding: 1.75rem 2rem;
  margin: 0 auto;
  text-align: center;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--portal .pi-hd {
  text-align:center;
  margin: 0 auto;
}

:where(.pg-portal-1, .pg-portal-2) .pi-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0px;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--portal .pi-icon {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  box-shadow: 0 4px 18px rgba(18,135,204,.30);
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-icon {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

:where(.pg-portal-1, .pg-portal-2) .pi-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

:where(.pg-portal-1, .pg-portal-2) .pi-title-grp {
  flex: 1;
}

:where(.pg-portal-1, .pg-portal-2) .pi-eyebrow {
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-mid);
  margin-bottom: .3rem;
  margin-left:-70px;
}

:where(.pg-portal-1, .pg-portal-2) .pi-eyebrow-A {
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: .3rem;
  margin-left:-160px;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-eyebrow {
  color: var(--grad-end);
}

:where(.pg-portal-1, .pg-portal-2) .pi-title-grp h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bg-5);
  margin: 0 0 .4rem;
  letter-spacing: -.015em;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-title-grp h3 {
  color: var(--white);
}

:where(.pg-portal-1, .pg-portal-2) .pi-url {
  display: inline-block;
  font-size: 0.7rem;
  font-family: "Menlo","Consolas",monospace;
  color: var(--grad-mid);
  background: rgba(18,135,204,.08);
  border: 1px solid rgba(18,135,204,.16);
  padding: .18rem .55rem;
  border-radius: 5px;
}

:where(.pg-portal-1, .pg-portal-2) .pi-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #0FBF8A;
  background: rgba(15,191,138,.10);
  border: 1px solid rgba(15,191,138,.22);
  padding: .2rem .6rem;
  border-radius: 100px;
}

:where(.pg-portal-1, .pg-portal-2) .pi-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0FBF8A;
  animation: pi-pulse 1.8s ease-in-out infinite;
}

:where(.pg-portal-1, .pg-portal-2) .pi-body {
  padding: 1.75rem 2rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

:where(.pg-portal-1, .pg-portal-2) .pi-lead {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.7;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-lead {
  color: rgba(228,230,232,.48);
}

:where(.pg-portal-1, .pg-portal-2) .pi-retry {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,173,238,.06);
  border: 1px solid rgba(0,173,238,.13);
  border-radius: 8px;
  padding: .6rem 1rem;
}

:where(.pg-portal-1, .pg-portal-2) .pi-retry-lbl {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grad-end);
  white-space: nowrap;
  padding-right: .875rem;
  margin-right: .875rem;
  border-right: 1px solid rgba(0,173,238,.20);
}

:where(.pg-portal-1, .pg-portal-2) .pi-retry-steps {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}

:where(.pg-portal-1, .pg-portal-2) .pi-retry-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

:where(.pg-portal-1, .pg-portal-2) .pi-retry-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,173,238,.28), transparent);
}

:where(.pg-portal-1, .pg-portal-2) .pi-retry-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(228,230,232,.70);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  padding: .2rem .5rem;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

:where(.pg-portal-1, .pg-portal-2) .pi-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

:where(.pg-portal-1, .pg-portal-2) .pi-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.55;
  padding: .5rem .75rem;
  border-radius: 7px;
  transition: background .18s;
}

:where(.pg-portal-1, .pg-portal-2) .pi-list li img {
  width:15px;
  height:15px;
  margin-top:5px;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-list li {
  color: rgba(228,230,232,.60);
  background: rgba(255,255,255,.032);
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-list li:hover {
  background: rgba(255,255,255,.055);
}

:where(.pg-portal-1, .pg-portal-2) .pi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-mid);
  flex-shrink: 0;
  margin-top: .44em;
}

:where(.pg-portal-1, .pg-portal-2) .pi-card--erp .pi-dot {
  background: rgba(0,173,238,.65);
}

@media (max-width: 900px) {
  :where(.pg-portal-1, .pg-portal-2) .pi-pair {
    grid-template-columns: 1fr;
  }
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .sec-dark-strip {
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .sds-item {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,.05);
  text-align:center;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .sds-item:last-child {
  border-right: none;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .sds-icon {
  width: 48px;
  height: 48px;
  background: rgba(18,135,204,.12);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  margin: 0 auto;
}

:where(.pg-portal-3) .sds-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

:where(.pg-portal-3) .sds-item h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .5rem;
}

:where(.pg-portal-3) .sds-item p {
  font-size: 0.8rem;
  color: rgba(228,230,232,.48);
  line-height: 1.6;
  margin: 0;
}

:where(.pg-portal-1, .pg-portal-2) .sds-icon img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

:where(.pg-portal-1, .pg-portal-2) .sds-item h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: .5rem;
}

:where(.pg-portal-1, .pg-portal-2) .sds-item p {
  font-size: 0.8rem;
  color: var(--white);
  line-height: 1.6;
  margin: 0;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .report-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-bottom: 1rem;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .report-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .875rem;
  align-items: center;
  padding: .75rem 1rem .75rem 0;
  border-bottom: 1px solid rgba(12,26,46,.07);
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .report-row:last-child {
  border-bottom: none;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .report-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(18,135,204,.15), rgba(0,173,238,.22));
  border: 1px solid rgba(18,135,204,.25);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--grad-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .report-info strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .report-info span {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.4;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-visual-box {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.09);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-mock-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(12,26,46,.07);
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-mock-icon {
  width: 18px;
  height: 18px;
  opacity: .35;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-mock-text {
  font-size: 0.875rem;
  color: rgba(12,26,46,.30);
  flex: 1;
  font-style: italic;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-mock-shortcut {
  font-size: 0.6875rem;
  background: rgba(12,26,46,.06);
  border: 1px solid rgba(12,26,46,.12);
  color: var(--slate);
  padding: .1rem .4rem;
  border-radius: 4px;
  font-family: monospace;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-index-list {
  padding: .875rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-index-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(18,135,204,.07);
  border: 1px solid rgba(18,135,204,.18);
  color: var(--grad-mid);
  padding: .25rem .7rem;
  border-radius: 100px;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .search-note-plain {
  padding: 0 1.25rem .875rem;
  font-size: 0.8rem;
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-row {
  display: flex;
  gap: .625rem;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-pill {
  flex: 1;
  padding: .55rem 1rem;
  border-radius: var(--r);
  font-size: 0.8125rem;
  font-weight: 600;
  border-left: 3px solid transparent;
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-pill--1 {
  background: rgba(18,135,204,.13);
  border-color: var(--grad-end);
  color: var(--ink);
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-pill--2 {
  background: rgba(18,135,204,.09);
  border-color: var(--grad-mid);
  color: var(--ink);
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-pill--3 {
  background: rgba(18,135,204,.07);
  border-color: rgba(18,135,204,.55);
  color: var(--ink);
}

:where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .role-pill--4 {
  background: rgba(18,135,204,.05);
  border-color: rgba(18,135,204,.35);
  color: var(--slate);
}

@media (max-width: 960px) {
  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .sec-dark-strip {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ppv2 {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ppv2-bridge {
    flex-direction: row;
    padding: 1rem 2rem;
    border: none;
    border-top: 1px solid rgba(12,26,46,.08);
    border-bottom: 1px solid rgba(12,26,46,.08);
  }

  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ppv2-bridge-pill {
    writing-mode: horizontal-tb;
  }

  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .ppv2-card--dark {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
  }
}

@media (max-width: 560px) {
  :where(.pg-portal-1, .pg-portal-2, .pg-portal-3) .sec-dark-strip {
    grid-template-columns: 1fr;
  }
}

:where(.pg-portal-2) .srp-v3 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

:where(.pg-portal-2) .srp-v3-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: .25rem;
}

:where(.pg-portal-2) .srp-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-mid);
  margin-bottom: .4rem;
}

:where(.pg-portal-2) .srp-v3-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--grad-mid);
  border-radius: 1px;
  display: inline-block;
}

:where(.pg-portal-2) .srp-v3-hd h3 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .25rem;
  letter-spacing: -.025em;
}

:where(.pg-portal-2) .srp-v3-hd p {
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0;
}

:where(.pg-portal-2) .rpt-v3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(12,26,46,.09);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(12,26,46,.05);
}

:where(.pg-portal-2) .rpt-v3-card {
  background: var(--white);
  padding: 1.625rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-right: 1px solid rgba(12,26,46,.07);
  border-bottom: 1px solid rgba(12,26,46,.07);
  position: relative;
  overflow: hidden;
  transition: background .2s ease, box-shadow .2s ease;
}

:where(.pg-portal-2) .rpt-v3-card:nth-child(3n) {
  border-right: none;
}

:where(.pg-portal-2) .rpt-v3-card:nth-child(7),
:where(.pg-portal-2) .rpt-v3-card:nth-child(8),
:where(.pg-portal-2) .rpt-v3-card:nth-child(9) {
  border-bottom: none;
}

:where(.pg-portal-2) .rpt-v3-card:hover {
  background: rgba(27,117,187,.028);
}

:where(.pg-portal-2) .rpt-v3-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

:where(.pg-portal-2) .rpt-v3-card:hover::before {
  transform: scaleX(1);
}

:where(.pg-portal-2) .rpt-v3-num {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--grad-start) 20%, var(--grad-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .45;
  transition: opacity .2s ease;
  user-select: none;
}

:where(.pg-portal-2) .rpt-v3-card:hover .rpt-v3-num {
  opacity: .9;
}

:where(.pg-portal-2) .rpt-v3-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}

:where(.pg-portal-2) .rpt-v3-desc {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.55;
}

:where(.pg-portal-2) .srp-v3-bottom {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,.22);
}

:where(.pg-portal-2) .srp-v3-search {
  padding: 2rem 2rem 2rem;
  border-right: 1px solid rgba(255,255,255,.06);
}

:where(.pg-portal-2) .srp-v3-dk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  margin-bottom: .45rem;
}

:where(.pg-portal-2) .srp-v3-dk-eyebrow::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--grad-end);
  border-radius: 1px;
  display: inline-block;
}

:where(.pg-portal-2) .srp-v3-search h3,
:where(.pg-portal-2) .srp-v3-roles  h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 1.25rem;
  letter-spacing: -.015em;
}

:where(.pg-portal-2) .cmd-pal {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}

:where(.pg-portal-2) .cmd-pal-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

:where(.pg-portal-2) .cmd-pal-icon {
  width: 16px;
  height: 16px;
  opacity: .28;
  flex-shrink: 0;
}

:where(.pg-portal-2) .cmd-pal-text {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(228,230,232,.26);
  font-style: italic;
}

:where(.pg-portal-2) .cmd-pal-cursor {
  width: 1.5px;
  height: 14px;
  background: var(--grad-end);
  border-radius: 1px;
  animation: v3-blink .9s steps(1) infinite;
}

:where(.pg-portal-2) .cmd-pal-kbd {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(228,230,232,.3);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-family: monospace;
}

:where(.pg-portal-2) .cmd-pal-results {
  padding: .3rem 0;
}

:where(.pg-portal-2) .cmd-pal-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .475rem 1rem;
  transition: background .15s;
}

:where(.pg-portal-2) .cmd-pal-row:hover {
  background: rgba(255,255,255,.04);
}

:where(.pg-portal-2) .cmd-pal-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grad-end);
  background: rgba(0,173,238,.13);
  border: 1px solid rgba(0,173,238,.22);
  padding: .15rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
}

:where(.pg-portal-2) .cmd-pal-val {
  font-size: 0.8rem;
  color: rgba(228,230,232,.48);
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: -.02em;
}

:where(.pg-portal-2) .srp-v3-note {
  font-size: 0.75rem;
  color: rgba(228,230,232,.30);
  line-height: 1.6;
}

:where(.pg-portal-2) .srp-v3-roles {
  padding: 2rem;
}

:where(.pg-portal-2) .rv3-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

:where(.pg-portal-2) .rv3-row {
  display: flex;
  gap: .4rem;
}

:where(.pg-portal-2) .rv3-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .875rem;
  border-radius: 7px;
  border-left: 2px solid;
  transition: filter .18s;
}

:where(.pg-portal-2) .rv3-item:hover {
  filter: brightness(1.12);
}

:where(.pg-portal-2) .rv3-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

:where(.pg-portal-2) .rv3-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

:where(.pg-portal-2) .rv3-t1 {
  background: rgba(0,173,238,.17);
  border-color: #00ADEE;
}

:where(.pg-portal-2) .rv3-t1 .rv3-dot {
  background: #00ADEE;
  box-shadow: 0 0 7px rgba(0,173,238,.65);
}

:where(.pg-portal-2) .rv3-t1 .rv3-label {
  color: #fff;
}

:where(.pg-portal-2) .rv3-t2 {
  background: rgba(18,135,204,.12);
  border-color: #1287CC;
}

:where(.pg-portal-2) .rv3-t2 .rv3-dot {
  background: #1287CC;
}

:where(.pg-portal-2) .rv3-t2 .rv3-label {
  color: rgba(228,230,232,.88);
}

:where(.pg-portal-2) .rv3-t3 {
  background: rgba(27,117,187,.08);
  border-color: rgba(27,117,187,.52);
}

:where(.pg-portal-2) .rv3-t3 .rv3-dot {
  background: rgba(27,117,187,.7);
}

:where(.pg-portal-2) .rv3-t3 .rv3-label {
  color: rgba(228,230,232,.72);
}

:where(.pg-portal-2) .rv3-t4 {
  background: rgba(255,255,255,.042);
  border-color: rgba(255,255,255,.12);
}

:where(.pg-portal-2) .rv3-t4 .rv3-dot {
  background: rgba(255,255,255,.22);
}

:where(.pg-portal-2) .rv3-t4 .rv3-label {
  color: rgba(228,230,232,.48);
}

:where(.pg-portal-2) .rv3-t5 {
  background: rgba(255,255,255,.022);
  border-color: rgba(255,255,255,.065);
}

:where(.pg-portal-2) .rv3-t5 .rv3-dot {
  background: rgba(255,255,255,.13);
}

:where(.pg-portal-2) .rv3-t5 .rv3-label {
  color: rgba(228,230,232,.30);
}

@media (max-width: 960px) {
  :where(.pg-portal-2) .rpt-v3-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.pg-portal-2) .rpt-v3-card:nth-child(3n) {
    border-right: 1px solid rgba(12,26,46,.07);
  }

  :where(.pg-portal-2) .rpt-v3-card:nth-child(2n) {
    border-right: none;
  }

  :where(.pg-portal-2) .rpt-v3-card:nth-child(7),
  :where(.pg-portal-2) .rpt-v3-card:nth-child(8),
  :where(.pg-portal-2) .rpt-v3-card:nth-child(9) {
    border-bottom: 1px solid rgba(12,26,46,.07);
  }

  :where(.pg-portal-2) .rpt-v3-card:nth-child(8),
  :where(.pg-portal-2) .rpt-v3-card:nth-child(9) {
    border-bottom: none;
  }

  :where(.pg-portal-2) .srp-v3-bottom {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal-2) .srp-v3-search {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
}

@media (max-width: 560px) {
  :where(.pg-portal-2) .rpt-v3-grid {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal-2) .rpt-v3-card {
    border-right: none !important;
  }

  :where(.pg-portal-2) .rpt-v3-card:last-child {
    border-bottom: none;
  }
}

:where(.pg-portal-1) .rsr-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

:where(.pg-portal-1) .rsr-reports {
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid rgba(12,26,46,.09);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(12,26,46,.07);
}

:where(.pg-portal-1) .rsr-sidebar {
  background: var(--bg-2);
  padding: 2.25rem 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  position: relative;
  overflow: hidden;
}

:where(.pg-portal-1) .rsr-sidebar::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,173,238,.10) 0%, transparent 70%);
  pointer-events: none;
}

:where(.pg-portal-1) .rsr-sb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 auto;
}

:where(.pg-portal-1) .rsr-sb-eyebrow::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
}

:where(.pg-portal-1) .rsr-sb-num {
  font-size: 5rem;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
  background: linear-gradient(160deg, #fff 30%, rgba(255,255,255,.28));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
  text-align: center;
}

:where(.pg-portal-1) .rsr-sb-label {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(228,230,232,.70);
  letter-spacing: -.01em;
}

:where(.pg-portal-1) .rsr-sb-divider {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--grad-end), transparent);
  border-radius: 1px;
}

:where(.pg-portal-1) .rsr-sb-desc {
  font-size: 0.775rem;
  color: rgba(228,230,232,.32);
  line-height: 1.65;
}

:where(.pg-portal-1) .rsr-sb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

:where(.pg-portal-1) .rsr-sb-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grad-end);
  background: rgba(0,173,238,.10);
  border: 1px solid rgba(0,173,238,.18);
  padding: .2rem .55rem;
  border-radius: 4px;
}

:where(.pg-portal-1) .rsr-list {
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

:where(.pg-portal-1) .rsr-item {
  padding: 1.375rem 1.5rem;
  border-right: 1px solid rgba(12,26,46,.07);
  border-bottom: 1px solid rgba(12,26,46,.07);
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  transition: background .18s;
  cursor: default;
}

:where(.pg-portal-1) .rsr-item:hover {
  background: rgba(27,117,187,.028);
}

:where(.pg-portal-1) .rsr-item:nth-child(even) {
  border-right: none;
}

:where(.pg-portal-1) .rsr-item:last-child {
  grid-column: 1 / -1;
  border-bottom: none;
  border-right: none;
}

:where(.pg-portal-1) .rsr-item:nth-last-child(2) {
  border-bottom: none;
}

:where(.pg-portal-1) .rsr-item-num {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--grad-start) 10%, var(--grad-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .42;
  flex-shrink: 0;
  min-width: 1.875rem;
  transition: opacity .2s;
}

:where(.pg-portal-1) .rsr-item:hover .rsr-item-num {
  opacity: .95;
}

:where(.pg-portal-1) .rsr-item-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .2rem;
  letter-spacing: -.01em;
}

:where(.pg-portal-1) .rsr-item-desc {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.5;
}

:where(.pg-portal-1) .rsr-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

:where(.pg-portal-1) .rsr-search {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.09);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(12,26,46,.06);
}

:where(.pg-portal-1) .rsr-card-hd {
  padding: 1.375rem 1.75rem;
  border-bottom: 1px solid rgba(12,26,46,.07);
  background: linear-gradient(to right, rgba(27,117,187,.04), transparent);
}

:where(.pg-portal-1) .rsr-eyebrow-lt {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-mid);
  margin-bottom: .3rem;
}

:where(.pg-portal-1) .rsr-eyebrow-lt::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--grad-mid);
  border-radius: 1px;
}

:where(.pg-portal-1) .rsr-card-hd h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.015em;
}

:where(.pg-portal-1) .rsr-search-body {
  padding: 1.25rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

:where(.pg-portal-1) .rsr-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  border: 1.5px solid rgba(12,26,46,.10);
  background: rgba(12,26,46,.025);
  border-radius: 8px;
  padding: .7rem 1rem;
}

:where(.pg-portal-1) .rsr-bar-icon {
  width: 15px;
  height: 15px;
  opacity: .24;
  flex-shrink: 0;
}

:where(.pg-portal-1) .rsr-bar-placeholder {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(12,26,46,.24);
  font-style: italic;
}

:where(.pg-portal-1) .rsr-bar-cursor {
  width: 1.5px;
  height: 14px;
  background: var(--grad-mid);
  border-radius: 1px;
  animation: rsr-blink .9s steps(1) infinite;
}

:where(.pg-portal-1) .rsr-bar-kbd {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(12,26,46,.30);
  background: var(--white);
  border: 1px solid rgba(12,26,46,.12);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-family: monospace;
  box-shadow: 0 1px 2px rgba(12,26,46,.05);
}

:where(.pg-portal-1) .rsr-chips-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(12,26,46,.28);
  margin-bottom: .35rem;
}

:where(.pg-portal-1) .rsr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

:where(.pg-portal-1) .rsr-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--grad-start);
  background: rgba(27,117,187,.07);
  border: 1px solid rgba(27,117,187,.17);
  padding: .28rem .7rem;
  border-radius: 100px;
}

:where(.pg-portal-1) .rsr-search-note {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-portal-1) .rsr-roles {
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 6px 40px rgba(0,0,0,.18);
}

:where(.pg-portal-1) .rsr-roles-hd {
  padding: 1.375rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,.065);
  background: linear-gradient(135deg, rgba(27,117,187,.20), transparent 60%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(.pg-portal-1) .rsr-eyebrow-dk {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  margin-bottom: .3rem;
}

:where(.pg-portal-1) .rsr-eyebrow-dk::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--grad-end);
  border-radius: 1px;
}

:where(.pg-portal-1) .rsr-roles-hd h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
}

:where(.pg-portal-1) .rsr-roles-count {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}

:where(.pg-portal-1) .rsr-roles-body {
  padding: 1.125rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

:where(.pg-portal-1) .rsr-tier {
  display: flex;
  gap: .375rem;
}

:where(.pg-portal-1) .rsr-role {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: 7px;
  border-left: 2px solid;
  transition: filter .18s;
}

:where(.pg-portal-1) .rsr-role:hover {
  filter: brightness(1.12);
}

:where(.pg-portal-1) .rsr-role-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

:where(.pg-portal-1) .rsr-role-name {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

:where(.pg-portal-1) .rsr-t1 {
  background: rgba(0,173,238,.17);
  border-color: #00ADEE;
}

:where(.pg-portal-1) .rsr-t1 .rsr-role-dot {
  background: #00ADEE;
  box-shadow: 0 0 6px rgba(0,173,238,.6);
}

:where(.pg-portal-1) .rsr-t1 .rsr-role-name {
  color: #fff;
}

:where(.pg-portal-1) .rsr-t2 {
  background: rgba(18,135,204,.11);
  border-color: #1287CC;
}

:where(.pg-portal-1) .rsr-t2 .rsr-role-dot {
  background: #1287CC;
}

:where(.pg-portal-1) .rsr-t2 .rsr-role-name {
  color: rgba(228,230,232,.85);
}

:where(.pg-portal-1) .rsr-t3 {
  background: rgba(27,117,187,.08);
  border-color: rgba(27,117,187,.52);
}

:where(.pg-portal-1) .rsr-t3 .rsr-role-dot {
  background: rgba(27,117,187,.68);
}

:where(.pg-portal-1) .rsr-t3 .rsr-role-name {
  color: rgba(228,230,232,.72);
}

:where(.pg-portal-1) .rsr-t4 {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.11);
}

:where(.pg-portal-1) .rsr-t4 .rsr-role-dot {
  background: rgba(255,255,255,.20);
}

:where(.pg-portal-1) .rsr-t4 .rsr-role-name {
  color: rgba(228,230,232,.48);
}

:where(.pg-portal-1) .rsr-t5 {
  background: rgba(255,255,255,.022);
  border-color: rgba(255,255,255,.06);
}

:where(.pg-portal-1) .rsr-t5 .rsr-role-dot {
  background: rgba(255,255,255,.12);
}

:where(.pg-portal-1) .rsr-t5 .rsr-role-name {
  color: rgba(228,230,232,.30);
}

@media (max-width: 960px) {
  :where(.pg-portal-1) .rsr-reports {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal-1) .rsr-sidebar {
    padding: 1.75rem;
  }

  :where(.pg-portal-1) .rsr-sb-num {
    font-size: 3.5rem;
  }

  :where(.pg-portal-1) .rsr-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  :where(.pg-portal-1) .rsr-list {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal-1) .rsr-item {
    border-right: none !important;
  }

  :where(.pg-portal-1) .rsr-item:nth-last-child(2) {
    border-bottom: 1px solid rgba(12,26,46,.07);
  }

  :where(.pg-portal-1) .rsr-item:last-child {
    border-bottom: none;
  }
}

:where(body.pg-inventory) {
  --inv-ok:   #10B482;
  --inv-stop: #DC4637;
  --inv-sub-h: 52px;
}

:where(.pg-index) .ml-hd {
  text-align: center;
  margin-bottom: 3rem;
}

:where(.pg-index) .ml-hd__eye {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  display: inline-block;
  width:fit-content;
  align-self: flex-start;
  border: 1px solid rgba(0, 173, 238, .32);
  padding: .22rem .85rem;
  border-radius: 100px;
  margin-bottom: .9rem;
}

:where(.pg-index) .ml-hd h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.55rem);
  font-weight: 700;
  color: var(--bg-5);
  letter-spacing: -.022em;
  line-height: 1.12;
  margin-bottom: .65rem;
}

:where(.pg-index) .ml-hd p {
  font-size: .95rem;
  color: var(--slate);
  max-width: 65ch;
  margin-inline: auto;
  line-height: 1.68;
}

:where(.pg-index) .ml-hd--dark h2 {
  color: var(--white);
}

:where(.pg-index) .ml-hd--dark p {
  color: rgba(228,230,232,.48);
}

:where(.pg-index) .ml-hd--dark .ml-hd__eye {
  color: var(--grad-end);
}

:where(.pg-index) .ml-topbar {
  background: var(--bg-0);
  border-bottom: 1px solid rgba(34,76,108,.32);
  padding: .55rem 0;
  font-size: .75rem;
}

:where(.pg-index) .ml-topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

:where(.pg-index) .ml-topbar__social {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-right: auto;
}

:where(.pg-index) .ml-topbar__social a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34,76,108,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(228,230,232,.55);
  transition: background .18s, color .18s;
  text-decoration: none;
}

:where(.pg-index) .ml-topbar__social a:hover {
  background: var(--grad-mid);
  color: #fff;
}

:where(.pg-index) .ml-topbar__item {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(228,230,232,.46);
  white-space: nowrap;
}

:where(.pg-index) .ml-topbar__item svg {
  flex-shrink: 0;
  opacity: .7;
}

:where(.pg-index) .ml-topbar__item a {
  color: rgba(228,230,232,.46);
  text-decoration: none;
}

:where(.pg-index) .ml-topbar__item a:hover {
  color: var(--grad-end);
}

:where(.pg-index) .ml-topbar__sep {
  width: 1px;
  height: 14px;
  background: rgba(34,76,108,.55);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  :where(.pg-index) .ml-topbar__sep,
  :where(.pg-index) .ml-topbar__item:nth-child(n/**/+4) {
    display: none;
  }
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-carousel {
  position: relative;
  background: var(--bg-1);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-slide {
  display: none;
  padding: var(--s16) 0 calc(var(--s16) + 2.5rem);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-slide.is-active {
  display: block;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-slide__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}

:where(.pg-platform) .hero-slide__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:where(.pg-billing, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__crumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  margin-bottom: var(--s4);
  color: rgba(228,230,232,.45);
}

:where(.pg-billing, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__crumb a {
  color: rgba(228,230,232,.45);
  text-decoration: none;
  transition: color var(--ease);
}

:where(.pg-billing, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__crumb a:hover {
  color: rgba(228,230,232,.80);
}

:where(.pg-billing, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__crumb span[aria-current] {
  color:var(--cobalt);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-slide__badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grad-mid);
  border: 1px solid var(--grad-mid);
  border-radius: 100px;
  padding: .28rem .9rem;
  margin-bottom: var(--s5);
  width: fit-content;
}

:where(.pg-platform) .hero-slide__heading {
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: var(--s5);
}

:where(.pg-platform) .hero-slide__lead {
  font-size: var(--t-base);
  color: rgba(228,230,232,.60);
  line-height: 1.7;
  margin-bottom: var(--s7);
  max-width: 615px;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__heading {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin-bottom: var(--s5);
}

:where(.pg-workflow) .hero-slide__lead {
  font-size: clamp(var(--t-sm), 1.2vw, var(--t-base));
  color: rgba(228,230,232,.60);
  line-height: 1.72;
  margin-bottom: var(--s7);
  max-width: 480px;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal) .hero-slide__lead {
  font-size: clamp(var(--t-sm), 1.2vw, var(--t-base));
  color: rgba(228,230,232,.60);
  line-height: 1.72;
  margin-bottom: var(--s7);
  max-width: 660px;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-slide__actions {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
}

:where(.pg-billing, .pg-platform, .pg-portal, .pg-workflow) .btn--outline {
  background: transparent;
  border: 1.5px solid rgba(228,230,232,.32);
  color: var(--white);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .btn--outline:hover {
  border-color: rgba(228,230,232,.60);
  background: rgba(255,255,255,.06);
}

:where(.pg-platform) .hero-slide__visual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  line-height: 0;
}

:where(.pg-platform) .hero-slide__visual img {
  width: 100%;
  height: 294px;
  object-fit: cover;
  display: block;
  border-radius: var(--r-xl);
}

:where(.pg-platform) .hero-carousel__btn {
  position: absolute;
  top: calc(50% - 1.25rem);
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--ease), border-color var(--ease);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  line-height: 0;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-slide__visual img {
  width: 100%;
  height: 295px;
  object-fit: cover;
  display: block;
  border-radius: var(--r-xl);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-carousel__btn {
  position: absolute;
  top: calc(50% - 1.25rem);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--ease), border-color var(--ease);
  min-width: 44px;
  min-height: 44px;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-carousel__btn:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-carousel__btn--prev {
  left: var(--s5);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-carousel__btn--next {
  right: var(--s5);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-carousel__dots {
  position: absolute;
  bottom: var(--s6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--s3);
  align-items: center;
}

:where(.pg-platform) .hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition: background var(--ease), width var(--ease);
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition: background var(--ease), width var(--ease);
  position: relative;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-carousel__dot::after {
  content: "";
  position: absolute;
  inset: -8px;
}

:where(.pg-billing, .pg-inventory, .pg-operation, .pg-platform, .pg-portal, .pg-workflow) .hero-carousel__dot.is-active {
  background: var(--grad-end);
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  :where(.pg-platform) .hero-slide__inner {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }

  :where(.pg-platform) .hero-slide__visual {
    display: none;
  }

  :where(.pg-platform) .hero-carousel__btn--prev {
    left: var(--s3);
  }

  :where(.pg-platform) .hero-carousel__btn--next {
    right: var(--s3);
  }
}

:where(.pg-platform) .pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

:where(.pg-platform) .pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s6) calc(var(--s6) + 5px);
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease);
}

:where(.pg-platform) .pillar-card-A {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s6) calc(var(--s6) + 5px);
  background: var(--ink);
  border: 1px solid var(--grad);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease);
}

:where(.pg-platform) .pillar-card:hover {
  box-shadow: var(--sh);
  transform: translateY(-2px);
}

:where(.pg-platform) .pillar-card-A:hover {
  box-shadow: var(--sh);
  transform: translateY(-2px);
}

:where(.pg-platform) .pillar-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--grad);
}

:where(.pg-platform) .pillar-card-A::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--grad);
}

:where(.pg-platform) .pillar-card__header {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

:where(.pg-platform) .pillar-card-A__header {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

:where(.pg-platform) .pillar-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--grad);
  border: 1px solid var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-platform) .pillar-card-A__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: rgba(75,133,170,.10);
  border: 1px solid rgba(75,133,170,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-platform) .pillar-card__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-platform) .pillar-card-A__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-platform) .pillar-card__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

:where(.pg-platform) .pillar-card-A__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

:where(.pg-platform) .pillar-card__tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grad-end);
}

:where(.pg-platform) .pillar-card-A__tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--white);
}

:where(.pg-platform) .pillar-card__title {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--bg-5);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

:where(.pg-platform) .pillar-card-A__title {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

:where(.pg-platform) .pillar-card__desc {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}

:where(.pg-platform) .pillar-card-A__desc {
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.65;
}

@media (max-width: 640px) {
  :where(.pg-platform) .pillar-grid {
    grid-template-columns: 1fr;
  }
}

:where(.pg-platform) .pillar-card.will-animate,
:where(.pg-platform) .pillar-card-A.will-animate {
  opacity: 0;
  transform: translateY(28px);
}

:where(.pg-platform) .pillar-card.is-visible,
:where(.pg-platform) .pillar-card-A.is-visible {
  animation: pillar-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-platform) .pillar-card.will-animate,
  :where(.pg-platform) .pillar-card-A.will-animate {
    opacity: 1;
    transform: none;
  }

  :where(.pg-platform) .pillar-card.is-visible,
  :where(.pg-platform) .pillar-card-A.is-visible {
    animation: none;
  }
}

:where(.pg-platform) .iface-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

:where(.pg-platform) .iface-rows-A {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

:where(.pg-platform) .iface-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s10);
  align-items: start;
  padding: var(--s8) var(--s8) var(--s8) calc(var(--s8) + 5px);
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow var(--ease);
}

:where(.pg-platform) .iface-row-A {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s10);
  align-items: start;
  padding: var(--s8) var(--s8) var(--s8) calc(7rem + 5px);
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow var(--ease);
}

:where(.pg-platform) .iface-row:hover {
  box-shadow: var(--sh-lg);
}

:where(.pg-platform) .iface-row-A:hover {
  box-shadow: var(--sh-lg);
}

:where(.pg-platform) .iface-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--grad);
}

:where(.pg-platform) .iface-row-A::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--grad);
}

:where(.pg-platform) .iface-row--dark {
  background: var(--bg-1);
  border-color: var(--border-d);
}

:where(.pg-platform) .iface-row-A--dark {
  background: var(--bg-1);
  border-color: var(--border-d);
}

:where(.pg-platform) .iface-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

:where(.pg-platform) .iface-row-A__info {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

:where(.pg-platform) .iface-row__header {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

:where(.pg-platform) .iface-row-A__header {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-left:20px;
}

:where(.pg-platform) .iface-row__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r);
  background: var(--grad);
  border: 1px solid var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-platform) .iface-row-A__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r);
  background: var(--grad);
  border: 1px var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-platform) .iface-row--dark .iface-row__icon {
  background: rgba(0,173,238,.14);
  border-color: rgba(0,173,238,.30);
}

:where(.pg-platform) .iface-row-A--dark .iface-row__icon {
  background: rgba(0,173,238,.14);
  border-color: rgba(0,173,238,.30);
}

:where(.pg-platform) .iface-row__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

:where(.pg-platform) .iface-row-A__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

:where(.pg-platform) .iface-row__meta h3 {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--bg-5);
  letter-spacing: -0.018em;
  margin-bottom: 3px;
  text-align: left;
}

:where(.pg-platform) .iface-row-A__meta h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.018em;
  margin-bottom: 3px;
  text-align: left;
}

:where(.pg-platform) .iface-row--dark .iface-row__meta h3 {
  color: var(--white);
}

:where(.pg-platform) .iface-row-A--dark .iface-row__meta h3 {
  color: var(--white);
}

:where(.pg-platform) .iface-row__role {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
}

:where(.pg-platform) .iface-row-A__role {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
}

:where(.pg-platform) .iface-row--dark .iface-row__role {
  color: var(--grad-end);
}

:where(.pg-platform) .iface-row-A--dark .iface-row__role {
  color: var(--grad-end);
}

:where(.pg-platform) .iface-row__desc {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}

:where(.pg-platform) .iface-row-A__desc {
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.65;
  margin-left:20px;
}

:where(.pg-platform) .iface-row--dark .iface-row__desc {
  color: rgba(228,230,232,.68);
}

:where(.pg-platform) .iface-row-A--dark .iface-row__desc {
  color: rgba(228,230,232,.68);
}

:where(.pg-platform) .iface-row__features {
  border-left: 2px solid var(--grad-mid);
  padding-left: var(--s8);
  padding-top: 4px;
}

:where(.pg-platform) .iface-row-A__features {
  border-right: 2px solid var(--white);
  padding-left: 0rem;
  padding-top: 4px;
  margin-left:-100px;
}

:where(.pg-platform) .iface-row--dark .iface-row__features {
  border-left-color: rgba(255,255,255,.10);
}

:where(.pg-platform) .iface-row-A--dark .iface-row__features {
  border-left-color: rgba(255,255,255,.10);
}

:where(.pg-platform) .iface-row .tick-list li {
  align-items: flex-start;
}

:where(.pg-platform) .iface-row-A .tick-list li {
  align-items: flex-start;
}

@media (max-width: 768px) {
  :where(.pg-platform) .iface-row {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  :where(.pg-platform) .iface-row__features {
    border-left: none;
    border-top: 1px solid rgba(12,26,46,.08);
    padding-left: 0;
    padding-top: var(--s6);
  }

  :where(.pg-platform) .iface-row--dark .iface-row__features {
    border-top-color: rgba(255,255,255,.10);
  }

  :where(.pg-platform) .iface-row-A {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  :where(.pg-platform) .iface-row-A__features {
    border-left: none;
    border-top: 1px solid rgba(12,26,46,.08);
    padding-left: 0;
    padding-top: var(--s6);
  }

  :where(.pg-platform) .iface-row-A--dark .iface-row__features {
    border-top-color: rgba(255,255,255,.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-carousel__dot {
    transition: none;
  }

  :where(.pg-billing, .pg-inventory, .pg-operation, .pg-portal, .pg-workflow) .hero-slide {
    transition: none;
  }
}

:where(.pg-workflow) .process-strip {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0 0 var(--s10);
  padding: 0;
  background: rgba(0,173,238,.05);
  border: 1px solid rgba(0,173,238,.14);
  border-radius: var(--r-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

:where(.pg-workflow) .process-strip::-webkit-scrollbar {
  display: none;
}

:where(.pg-workflow) .ps-node {
  flex: 1;
  min-width: 80px;
  padding: var(--s4) var(--s3);
  text-align: center;
  border-right: 1px solid rgba(0,173,238,.10);
  white-space: nowrap;
}

:where(.pg-workflow) .ps-node:last-child {
  border-right: none;
}

:where(.pg-workflow) .ps-node__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--grad-end);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

:where(.pg-workflow) .ps-node__sub {
  font-size: 0.65rem;
  color: var(--slate);
}

:where(.pg-workflow) .wf-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: start;
}

:where(.pg-workflow) .wf-column__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  margin-left: 25%;
}

:where(.pg-workflow) .wf-column__head h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--bg-5);
}

:where(.pg-workflow) .wf-column .wf-badge {
  margin-bottom: 0;
  flex-shrink: 0;
}

:where(.pg-workflow) .wf-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

:where(.pg-workflow) .wf-step-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  transition: box-shadow var(--ease), transform var(--ease);
  text-decoration: none;
}

:where(.pg-workflow) .wf-step-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

:where(.pg-workflow) .wf-step-card__num {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--grad-end);
  min-width: 2rem;
  flex-shrink: 0;
  opacity: 0.85;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

:where(.pg-workflow) .wf-step-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-workflow) .wf-step-card__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

:where(.pg-workflow) .wf-step-card__rule {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.10);
  flex-shrink: 0;
}

:where(.pg-workflow) .wf-step-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

:where(.pg-workflow) .wf-step-card__title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

:where(.pg-workflow) .wf-step-card__desc {
  font-size: var(--t-xs);
  color: rgba(228,230,232,.60);
  line-height: 1.6;
}

:where(.pg-workflow) .wf-step-card--terminal {
  border-color: rgba(0,173,238,.32);
}

:where(.pg-workflow) .wf-step-card--terminal .wf-step-card__icon {
  box-shadow: 0 0 0 4px rgba(0,173,238,.14);
}

:where(.pg-workflow) .feat-section {
  padding-block: var(--s16);
  background: var(--paper);
}

:where(.pg-workflow) .feat-group {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s10);
  align-items: start;
  padding-block: var(--s10);
}

:where(.pg-workflow) .feat-group + .feat-group {
  border-top: 1px solid rgba(12,26,46,.10);
}

:where(.pg-workflow) .feat-group__eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  margin-bottom: var(--s3);
}

:where(.pg-workflow) .feat-group__heading {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--bg-5);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--s4);
}

:where(.pg-workflow) .feat-group__desc {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}

:where(.pg-workflow) .feat-group__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

:where(.pg-workflow) .feat-card {
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-lg);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  transition: box-shadow var(--ease), transform var(--ease);
}

:where(.pg-workflow) .feat-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

:where(.pg-workflow) .feat-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: 0 auto;
}

:where(.pg-workflow) .feat-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  background: rgba(75,133,170,.15);
  border: 1px solid rgba(75,133,170,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-workflow) .feat-card__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

:where(.pg-workflow) .feat-card__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:where(.pg-workflow) .feat-card__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--white);
}

:where(.pg-workflow) .feat-card__title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

:where(.pg-workflow) .feat-card__desc {
  font-size: var(--t-xs);
  color: rgba(228,230,232,.62);
  line-height: 1.6;
  flex: 1;
}

:where(body.pg-operation) {
  --ok: #10B482;
  --stop: #DC4637;
  --sub-h: 52px;
}

:where(.pg-inventory, .pg-operation) .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:where(.pg-inventory) .inv-wrap {
  max-width: var(--max);
  margin-inline: auto;
  width:100%;
}

:where(.pg-inventory) .inv-sec {
  padding-block: var(--s20);
  scroll-margin-top: calc(68px + var(--inv-sub-h));
}

:where(.pg-inventory) .inv-sec--paper {
  background: var(--paper);
}

:where(.pg-inventory) .inv-sec--dark {
  background: var(--bg-2);
  color: var(--paper);
}

:where(.pg-inventory) .inv-hd {
  max-width: var(--max);
  margin-bottom: var(--s12);
  margin: 0 auto;
}

:where(.pg-inventory) .inv-hd h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--t-3xl));
  font-weight: 700;
  color: var(--bg-5);
  margin-bottom: var(--s4);
  text-align:center;
}

:where(.pg-inventory) .inv-hd p {
  font-size: var(--t-lg);
  color: var(--slate);
  line-height: 1.65;
  text-align: center;
}

:where(.pg-inventory) .inv-sec--dark .inv-hd h2 {
  color: var(--white);
}

:where(.pg-inventory) .inv-sec--dark .inv-hd p {
  color: rgba(228,230,232,.65);
}

:where(.pg-inventory, .pg-operation) a:focus-visible,
:where(.pg-inventory, .pg-operation) button:focus-visible,
:where(.pg-inventory, .pg-operation) summary:focus-visible {
  outline: 3px solid var(--grad-end);
  outline-offset: 3px;
  border-radius: 4px;
}

:where(.pg-operation) .pg-wrap {
  max-width: 1240px;
  margin-inline: auto;
}

:where(.pg-operation) .pg-sec {
  padding-block: var(--s20);
  scroll-margin-top: calc(68px + var(--sub-h));
}

:where(.pg-operation) .pg-sec--paper {
  background: var(--bg-2);
}

:where(.pg-operation) .pg-sec--dark {
  background: var(--paper);
  color: var(--paper);
}

:where(.pg-operation) .pg-hd {
  max-width: var(--max);
  margin: 0 auto var(--s12);
  text-align: center;
}

:where(.pg-operation) .pg-hd h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--t-3xl));
  font-weight: 700;
  color: var(--bg-5)!important;
  margin-bottom: var(--s4);
}

:where(.pg-operation) .pg-hd p {
  font-size: var(--t-lg);
  color: var(--ink)!important;
  line-height: 1.65;
}

:where(.pg-operation) .pg-sec--dark .pg-hd h2 {
  color: var(--white);
}

:where(.pg-operation) .pg-sec--dark .pg-hd p {
  color: rgba(228,230,232,.65);
}

:where(.pg-operation) .pg-hd-A {
  max-width: var(--max);
  margin: 0 auto var(--s12);
  text-align: center;
}

:where(.pg-operation) .pg-hd-A h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--t-3xl));
  font-weight: 700;
  color: var(--white)!important;
  margin-bottom: var(--s4);
}

:where(.pg-operation) .pg-hd-A p {
  font-size: var(--t-lg);
  color: var(--paper)!important;
  line-height: 1.65;
}

:where(.pg-operation) .pg-sec--dark .pg-hd-A h2 {
  color: var(--white);
}

:where(.pg-operation) .pg-sec--dark .pg-hd-A p {
  color: rgba(228,230,232,.65);
}

:where(.pg-operation) .ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--grad);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

:where(.pg-operation) .ic img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-operation) .card {
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--r-xl);
  padding: var(--s6);
}

:where(.pg-operation) .card__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  justify-content: center;
}

:where(.pg-operation) .card h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--bg-5);
  line-height: 1.3;
}

:where(.pg-operation) .card p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
  text-align:center;
}

:where(.pg-operation) .card small {
  display: block;
  padding-top: var(--s3);
  margin-top:1rem;
  border-top: 2px solid var(--border);
  font-size: var(--t-xs);
  color: var(--steel);
}

:where(.pg-operation) .card small-A {
  display: block;
  padding-top: var(--s3);
  margin-top:2.5rem;
  border-top: 2px solid var(--border);
  font-size: var(--t-xs);
  color: var(--steel);
}

:where(.pg-operation) .pg-hero {
  background: var(--bg-1);
  color: var(--white);
  padding-block: var(--s16);
}

:where(.pg-operation) .pg-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}

:where(.pg-operation) .pg-hero__badge {
  display: inline-flex;
  width: fit-content;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grad-mid);
  border: 1px solid var(--grad-mid);
  border-radius: 100px;
  padding: .4rem 1rem;
  margin-bottom: var(--s5);
}

:where(.pg-operation) .pg-hero h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: var(--s6);
  max-width: 14ch;
}

:where(.pg-operation) .pg-hero__lead {
  font-size: var(--t-base);
  color: rgba(228,230,232,.65);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: var(--s8);
}

:where(.pg-operation) .pg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

:where(.pg-operation) .pg-hero__actions .btn {
  padding: .85rem 1.6rem;
}

:where(.pg-inventory) .inv-hero {
  background: var(--bg-1);
  color: var(--white);
  padding-block: var(--s16);
}

:where(.pg-inventory) .inv-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}

:where(.pg-inventory) .inv-hero__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grad-mid);
  border: 1px solid var(--grad-mid);
  border-radius: 100px;
  padding: .4rem 1rem;
  margin-bottom: var(--s5);
}

:where(.pg-inventory) .inv-hero h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: var(--s6);
  max-width: 13ch;
}

:where(.pg-inventory) .inv-hero__lead {
  font-size: var(--t-base);
  color: rgba(228,230,232,.65);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: var(--s8);
}

:where(.pg-inventory) .inv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

:where(.pg-inventory) .inv-hero__actions .btn {
  padding: .85rem 1.6rem;
}

:where(.pg-inventory, .pg-operation) .btn--outline {
  background: transparent;
  border: 1.5px solid rgba(228,230,232,.32);
  color: var(--white);
}

:where(.pg-inventory, .pg-operation) .btn--outline:hover {
  border-color: rgba(228,230,232,.6);
  background: rgba(255,255,255,.06);
}

:where(.pg-operation) .pg-hero__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  line-height: 0;
}

:where(.pg-operation) .pg-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

:where(.pg-inventory) .inv-hero__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  line-height: 0;
}

:where(.pg-inventory) .inv-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

:where(.pg-inventory, .pg-operation) .subnav {
  position: sticky;
  top: 68px;
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

:where(.pg-operation) .subnav ul {
  display: flex;
  gap: var(--s2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  height: var(--sub-h);
  align-items: center;
}

:where(.pg-inventory) .subnav ul {
  display: flex;
  gap: var(--s2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  height: var(--inv-sub-h);
  align-items: center;
}

:where(.pg-inventory, .pg-operation) .subnav ul::-webkit-scrollbar {
  display: none;
}

:where(.pg-inventory, .pg-operation) .subnav a {
  display: block;
  white-space: nowrap;
  padding: .45rem .9rem;
  border-radius: 100px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--steel);
  transition: background var(--ease), color var(--ease);
}

:where(.pg-inventory, .pg-operation) .subnav a:hover {
  background: rgba(18,135,204,.08);
  color: var(--grad-mid);
}

:where(.pg-inventory, .pg-operation) .subnav a.is-current {
  background: var(--bg-5);
  color: var(--white);
}

:where(.pg-operation) .steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  counter-reset: step;
  margin-bottom: var(--s8);
}

:where(.pg-operation) .step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--r-xl);
  padding: var(--s6);
}

:where(.pg-operation) .step__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  justify-content:center;
}

:where(.pg-operation) .step__num {
  counter-increment: step;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

:where(.pg-operation) .step__num::before {
  content: counter(step);
}

:where(.pg-operation) .step h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--bg-5);
}

:where(.pg-operation) .step p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
  text-align:center;
}

:where(.pg-operation) .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--s4) * -1);
  width: var(--s4);
  border-top: 2px dashed var(--ink);
}

:where(.pg-operation) .facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-2);
  border: 1px solid var(--steel);
  border-radius: var(--r-xl);
  color: var(--white);
}

:where(.pg-operation) .facts div {
  padding: var(--s6) var(--s8);
  text-align: center;
}

:where(.pg-operation) .facts div + div {
  border-left: 1px solid var(--border-d);
}

:where(.pg-operation) .facts dt {
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 1.1;
}

:where(.pg-operation) .facts dd {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.7);
  margin-top: var(--s2);
}

:where(.pg-operation) .quar {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--s8);
  align-items: stretch;
}

:where(.pg-operation) .quar__in {
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-xl);
  padding: var(--s8);
  display: flex;
  flex-direction: column;
}

:where(.pg-operation) .quar__in h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s3);
  text-align:center;
}

:where(.pg-operation) .quar__in > p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.66);
  line-height: 1.7;
  margin-bottom: var(--s6);
}

:where(.pg-operation) .triggers {
  list-style: none;
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

:where(.pg-operation) .triggers li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.05);
  font-size: var(--t-sm);
  color: var(--white);
  font-weight: 600;
}

:where(.pg-operation) .triggers li span {
  margin-left: auto;
  font-weight: 400;
  font-size: var(--t-xs);
  color: rgba(228,230,232,.6);
}

:where(.pg-operation) .quar__note {
  margin-top: auto;
  font-size: var(--t-xs);
  color: rgba(228,230,232,.6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-d);
}

:where(.pg-operation) .quar__out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  list-style: none;
}

:where(.pg-operation) .exp {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

:where(.pg-operation) .exp li {
  padding: var(--s6);
  background: var(--ink);
  border: 1px solid var(--grad-mid);
  border-top: 6px solid var(--c);
  border-radius: var(--r-xl);
  transition: transform .25s ease, box-shadow .25s ease;
}

:where(.pg-operation) .exp li:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -18px rgba(12,26,46,.35);
}

:where(.pg-operation) .exp__range {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  padding: .2rem .6rem;
  border-radius: 100px;
  margin-bottom: var(--s3);
}

:where(.pg-operation) .exp h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s2);
  text-align: center;
}

:where(.pg-operation) .exp p {
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.6;
  text-align:center;
}

:where(.pg-operation) .exp--x {
  --c: var(--stop);
}

:where(.pg-operation) .exp--c {
  --c: #E0701C;
}

:where(.pg-operation) .exp--n {
  --c: var(--warn);
}

:where(.pg-operation) .exp--a {
  --c: var(--ok);
}

:where(.pg-operation) .exp__foot {
  margin: var(--s8) auto 0;
  max-width: 70ch;
  text-align: center;
  color: var(--steel);
}

:where(.pg-operation) .rma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: start;
}

:where(.pg-operation) .flow {
  list-style: none;
  display: grid;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  height: 100%;
}

:where(.pg-operation) .flow li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s4);
  position: relative;
  padding-bottom: var(--s6);
  counter-increment: step;
}

:where(.pg-operation) .flow {
  counter-reset: step;
  border: 1px solid var(--ink);
}

:where(.pg-operation) .flow li:last-child {
  padding-bottom: 0;
}

:where(.pg-operation) .flow li::before {
  content: counter(step);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  font-weight: 700;
  display: grid;
  place-items: center;
}

:where(.pg-operation) .flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  border-left: 2px dashed rgba(18,135,204,.35);
}

:where(.pg-operation) .flow h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--bg-5);
  margin: 6px 0 4px;
}

:where(.pg-operation) .flow p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-operation) .rma__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s3);
}

:where(.pg-operation) .rma__split span {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: .4rem .7rem;
  border-radius: var(--r);
  text-align: center;
}

:where(.pg-operation) .rma__good {
  background: rgba(16,180,130,.12);
  color: #0B7A58;
}

:where(.pg-operation) .rma__bad {
  background: rgba(220,70,55,.12);
  color: #A8332A;
}

:where(.pg-operation) .rma__facts {
  list-style: none;
  display: grid;
  gap: var(--s4);
}

:where(.pg-operation) .vas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s8);
}

:where(.pg-operation) .vas .card {
  background: var(--bg-1);
  border-color: var(--border-d);
}

:where(.pg-operation) .vas .card h3 {
  color: var(--white);
}

:where(.pg-operation) .vas .card p {
  color: rgba(228,230,232,.66);
}

:where(.pg-operation) .job {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s8);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: var(--s8);
}

:where(.pg-operation) .job h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  margin-bottom: var(--s5);
  color:var(--bg-5);
  text-align: center;
}

:where(.pg-operation) .job__trig {
  list-style: none;
  display: grid;
  gap: 3.3rem;
}

:where(.pg-operation) .job__trig li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.5rem;
  align-items: center;
}

:where(.pg-operation) .job__trig strong {
  display: block;
  font-weight: 700;
  color:var(--bg-5);
}

:where(.pg-operation) .job__trig span {
  font-size: var(--t-sm);
  color: var(--slate);
}

:where(.pg-operation) .states {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: var(--s2);
}

:where(.pg-operation) .states li {
  padding: .4rem .9rem;
  border-radius: 100px;
  background: rgba(12,26,46,.06);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--steel);
}

:where(.pg-operation) .states li.sep {
  background: none;
  padding: 0;
  color: var(--accent);
}

:where(.pg-operation) .states li.done {
  background: var(--grad);
  color: var(--white);
}

:where(.pg-operation) .states__alt {
  font-size: var(--t-xs);
  color: var(--slate);
  margin-bottom: var(--s6);
}

:where(.pg-operation) .job__dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

:where(.pg-operation) .job__dl div {
  border-top: 1px solid var(--border);
  padding-top: var(--s3);
}

:where(.pg-operation) .job__dl dt {
  font-weight: 700;
  font-size: var(--t-sm);
  color:var(--bg-5);
}

:where(.pg-operation) .job__dl dd {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.55;
}

:where(.pg-inventory) .eq {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1.15fr;
  align-items: stretch;
  list-style: none;
}

:where(.pg-inventory) .eq__term {
  text-align: center;
  padding: var(--s6) var(--s5);
  border-top: 4px solid var(--c, var(--grad-mid));
  background: var(--white);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

:where(.pg-inventory) .eq__term--hand {
  --c: var(--grad-mid);
}

:where(.pg-inventory) .eq__term--quar {
  --c: var(--inv-stop);
}

:where(.pg-inventory) .eq__term--alloc {
  --c: var(--warn);
}

:where(.pg-inventory) .eq__term--avail {
  --c: var(--inv-ok);
  background: var(--bg-2);
  color: var(--white);
}

:where(.pg-inventory) .eq__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--grad);
}

:where(.pg-inventory) .eq__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

:where(.pg-inventory) .eq__term--avail .eq__icon {
  background: rgba(255,255,255,.1);
}

:where(.pg-inventory) .eq__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-inventory) .eq__term h3 {
  font-size: var(--t-2xl);
  font-weight: 800;
  color:var(--bg-5);
}

:where(.pg-inventory) .eq__term h3-1 {
  font-size: var(--t-2xl);
  font-weight: 800;
  color:var(--white);
}

:where(.pg-inventory) .eq__term p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-inventory) .eq__term--avail p {
  color: rgba(228,230,232,.7);
}

:where(.pg-inventory) .eq__op {
  display: grid;
  place-items: center;
  font-size: var(--t-4xl);
  font-weight: 300;
  color: var(--accent);
  padding-inline: var(--s3);
}

:where(.pg-inventory) .eq__foot {
  margin: var(--s8) auto 0;
  text-align: center;
  font-size: var(--t-base);
  color: var(--steel);
  max-width: 90ch;
}

:where(.pg-inventory) .guar__hd {
  max-width: 720px;
  margin: 0 auto var(--s12);
}

:where(.pg-inventory) .guar__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  border-block: 1px solid var(--border-d);
}

:where(.pg-inventory) .guar__item {
  padding: var(--s10) var(--s6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

:where(.pg-inventory) .guar__item + .guar__item {
  border-left: 1px solid var(--border-d);
}

:where(.pg-inventory) .guar__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  margin-bottom: var(--s6);
  box-shadow: var(--glow);
}

:where(.pg-inventory) .guar__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

:where(.pg-inventory) .guar__item h3 {
  font-size: var(--t-xl);
  color: var(--white);
  font-weight: 700;
  margin-bottom: var(--s3);
}

:where(.pg-inventory) .guar__item p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.66);
  line-height: 1.7;
  max-width: 30ch;
}

:where(.pg-inventory) .guar__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  margin-top: var(--s10);
  text-align: center;
}

:where(.pg-inventory) .guar__foot p {
  color: rgba(228,230,232,.7);
  font-size: var(--t-base);
}

:where(.pg-inventory) .acct__hd {
  max-width: 760px;
  margin: 0 auto var(--s12);
}

:where(.pg-inventory) .acct__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  list-style: none;
}

:where(.pg-inventory) .acct__card {
  background: var(--white);
  border: 1px solid var(--bg-5);
  border-radius: 20px;
  padding: var(--s6) var(--s5);
  text-align: center;
  transition: border-color var(--ease), box-shadow var(--ease);
}

:where(.pg-inventory) .acct__card:hover {
  border-color: var(--grad-mid);
  box-shadow: var(--sh);
}

:where(.pg-inventory) .acct__id {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 32px;
  padding-inline: var(--s3);
  border-radius: 55%;
  color: var(--bg-5);
  font-weight: 800;
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

:where(.pg-inventory) .acct__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin-bottom: var(--s3);
}

:where(.pg-inventory) .acct__card h3 {
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--bg-5);
  overflow-wrap: anywhere;
  text-align: left;
}

:where(.pg-inventory) .acct__card p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-inventory) .ops {
  margin-top: var(--s12);
  background: var(--bg-2);
  border-radius: var(--r-xl);
  padding: var(--s10) var(--s8);
}

:where(.pg-inventory) .ops__title {
  text-align: center;
  color: var(--white);
  font-size: var(--t-2xl);
  font-weight: 700;
  margin-bottom: var(--s8);
}

:where(.pg-inventory) .ops__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

:where(.pg-inventory) .ops__list li {
  padding: 0 var(--s6);
  text-align: center;
}

:where(.pg-inventory) .ops__list li + li {
  border-left: 1px solid var(--border-d);
}

:where(.pg-inventory) .ops__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(18,135,204,.18);
  display: grid;
  place-items: center;
  margin: 0 auto var(--s4);
}

:where(.pg-inventory) .ops__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

:where(.pg-inventory) .ops__list h4 {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s2);
}

:where(.pg-inventory) .ops__list p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.66);
  line-height: 1.65;
  max-width: 34ch;
  margin-inline: auto;
}

:where(.pg-inventory) .map__hd {
  max-width: 760px;
  margin: 0 auto var(--s12);
}

:where(.pg-inventory) .map {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s8);
  align-items: center;
}

:where(.pg-inventory) .map__panel {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  height:97%;
  margin-top:20px;
}

:where(.pg-inventory) .map__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
}

:where(.pg-inventory) .map__title {
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.2;
}

:where(.pg-inventory) .map__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--white);
  margin-top: 2px;
}

:where(.pg-inventory) .map__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--inv-ok);
  box-shadow: 0 0 0 0 rgba(16,180,130,.5);
  animation: pulse--inventory 2s infinite;
}

:where(.pg-inventory) .map__toggle {
  display: inline-flex;
  background: rgba(12,26,46,.06);
  border-radius: var(--r-lg);
  padding: 3px;
}

:where(.pg-inventory) .map__toggle button {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--slate);
  background: none;
  border: 0;
  padding: .35rem .9rem;
  border-radius: 8px;
  cursor: pointer;
  min-height: 34px;
}

:where(.pg-inventory) .map__toggle button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(9,18,32,.14);
}

:where(.pg-inventory) .map__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

:where(.pg-inventory) .map__kpis div {
  padding: var(--s4) var(--s6);
}

:where(.pg-inventory) .map__kpis div + div {
  border-left: 1px solid var(--border);
}

:where(.pg-inventory) .map__kpis dt {
  font-size: var(--t-xs);
  color: var(--slate);
}

:where(.pg-inventory) .map__kpis dd {
  font-size: var(--t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

:where(.pg-inventory) .map__floor {
  padding: var(--s5) var(--s6);
  background: rgba(12,26,46,.02);
}

:where(.pg-inventory) .rack {
  display: grid;
  grid-template-columns: 40px repeat(var(--cols, 14), 1fr);
  gap: 3px;
  align-items: center;
}

:where(.pg-inventory) .rack + .rack {
  margin-top: 3px;
}

:where(.pg-inventory) .rack__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

:where(.pg-inventory) .aisle {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) 0 var(--s2) 40px;
  font-size: 11px;
  color: rgba(84,106,126,.8);
}

:where(.pg-inventory) .aisle::before,
:where(.pg-inventory) .aisle::after {
  content: "";
  flex: 1;
  border-top: 1px dashed rgba(12,26,46,.14);
}

:where(.pg-inventory) .cell {
  height: 22px;
  border-radius: 3px;
  background: var(--white);
  border: 1px dashed rgba(12,26,46,.16);
  cursor: pointer;
}

:where(.pg-inventory) .cell--fresh,
:where(.pg-inventory) .cell--aging,
:where(.pg-inventory) .cell--overdue,
:where(.pg-inventory) .cell--q,
:where(.pg-inventory) .cell--o1,
:where(.pg-inventory) .cell--o2,
:where(.pg-inventory) .cell--o3,
:where(.pg-inventory) .cell--o4 {
  border: 0;
}

:where(.pg-inventory) .cell--fresh {
  background: rgba(16,180,130,.85);
}

:where(.pg-inventory) .cell--aging {
  background: rgba(240,163,10,.85);
}

:where(.pg-inventory) .cell--overdue {
  background: rgba(220,70,55,.85);
}

:where(.pg-inventory) .cell--q {
  background: repeating-linear-gradient(45deg, rgba(220,70,55,.85) 0 3px, rgba(220,70,55,.25) 3px 6px);
}

:where(.pg-inventory) .cell--o1 {
  background: rgba(18,135,204,.18);
}

:where(.pg-inventory) .cell--o2 {
  background: rgba(18,135,204,.42);
}

:where(.pg-inventory) .cell--o3 {
  background: rgba(18,135,204,.68);
}

:where(.pg-inventory) .cell--o4 {
  background: var(--grad-start);
}

:where(.pg-inventory) .cell.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

:where(.pg-inventory) .map__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3) var(--s6);
  flex-wrap: wrap;
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
}

:where(.pg-inventory) .map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  font-size: var(--t-xs);
  color: var(--slate);
}

:where(.pg-inventory) .map__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

:where(.pg-inventory) .map__legend .cell {
  width: 12px;
  height: 12px;
  cursor: default;
}

:where(.pg-inventory) .map__detail {
  font-size: var(--t-xs);
  color: var(--slate);
}

:where(.pg-inventory) .map__detail strong {
  color: var(--ink);
}

:where(.pg-inventory) .map__feats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  align-self: stretch;
  margin-top:15px;
}

:where(.pg-inventory) .map__feats li {
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s5);
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "ic title" "text text";
  column-gap: var(--s3);
  row-gap: var(--s3);
  align-items: center;
  align-content: start;
}

:where(.pg-inventory) .map__feats li > div {
  display: contents;
}

:where(.pg-inventory) .map__feats .ic {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--grad);
  display: grid;
  place-items: center;
  grid-area: ic;
}

:where(.pg-inventory) .map__feats .ic img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

:where(.pg-inventory) .map__feats h3 {
  grid-area: title;
  font-size: var(--t-base);
  color: var(--white);
  font-weight: 700;
  line-height: 1.3;
}

:where(.pg-inventory) .map__feats p {
  grid-area: text;
  font-size: var(--t-sm);
  color: var(--white);
  line-height: 1.6;
  text-align: center;
}

:where(.pg-inventory) .lpn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: start;
}

:where(.pg-inventory) .lpn h3.block-title {
  font-size: var(--t-2xl);
  font-weight: 800;
  margin-bottom: var(--s3);
  text-align: center;
  color:var(--bg-5);
}

:where(.pg-inventory) .lpn .block-lead {
  color: var(--slate);
  margin-bottom: var(--s6);
}

:where(.pg-inventory) .lpn__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin-bottom: var(--s8);
  justify-content:center;
}

:where(.pg-inventory) .lpn__chain li {
  padding: .4rem .9rem;
  border-radius: 100px;
  background: var(--bg-5);
  color: var(--white);
  font-size: var(--t-sm);
  font-weight: 600;
}

:where(.pg-inventory) .lpn__chain .sep {
  background: none;
  color: var(--accent);
  padding: 0;
}

:where(.pg-inventory) .lpn__feats {
  list-style: none;
  display: grid;
  gap: var(--s5);
}

:where(.pg-inventory) .lpn__feats li {
  padding-left: var(--s6);
  position: relative;
}

:where(.pg-inventory) .lpn__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--bg-5);
}

:where(.pg-inventory) .lpn__feats strong {
  display: block;
  font-weight: 700;
  color: var(--bg-5);
  margin-bottom: 2px;
}

:where(.pg-inventory) .lpn__feats span {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}

:where(.pg-inventory) .pick {
  list-style: none;
  display: grid;
  gap: var(--s4);
}

:where(.pg-inventory) .pick li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s5);
  padding: var(--s6);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--bg-5);
}

:where(.pg-inventory) .pick li.is-default {
  border-color: var(--grad-mid);
  box-shadow: 0 0 0 1px var(--grad-mid);
}

:where(.pg-inventory) .pick abbr {
  text-decoration: none;
  font-size: var(--t-2xl);
  font-weight: 800;
  color: var(--grad-start);
  letter-spacing: -.02em;
  line-height: 1.1;
}

:where(.pg-inventory) .pick h4 {
  font-size: var(--t-lg);
  font-weight: 800;
  margin-bottom: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  color:var(--bg-5);
}

:where(.pg-inventory) .pick .tag {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: .15rem .6rem;
  border-radius: 100px;
  background: rgba(18,135,204,.1);
  color: var(--grad-mid);
}

:where(.pg-inventory) .pick p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}

:where(.pg-inventory, .pg-operation) .faq {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--s12);
  align-items: start;
}

:where(.pg-operation) .faq .pg-hd {
  text-align: left;
  margin: 0;
}

:where(.pg-inventory, .pg-operation) .faq__list details {
  border-bottom: 1px solid var(--border);
}

:where(.pg-inventory, .pg-operation) .faq__list details:first-child {
  border-top: 1px solid var(--border);
}

:where(.pg-inventory, .pg-operation) .faq__list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--ink);
}

:where(.pg-inventory, .pg-operation) .faq__list summary::-webkit-details-marker {
  display: none;
}

:where(.pg-inventory, .pg-operation) .faq__list summary::after {
  content: "+";
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--grad-mid);
  transition: transform var(--ease);
  flex-shrink: 0;
}

:where(.pg-inventory, .pg-operation) .faq__list details[open] summary::after {
  transform: rotate(45deg);
}

:where(.pg-inventory, .pg-operation) .faq__list p {
  padding-bottom: var(--s5);
  color: var(--slate);
  line-height: 1.7;
  max-width: 65ch;
}

:where(.pg-operation) .cta-sec {
  padding-block: 0 var(--s12);
  scroll-margin-top: calc(68px + var(--sub-h));
}

:where(.pg-inventory, .pg-operation) .cta {
  background: var(--grad);
  color: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s12) var(--s10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s8);
  flex-wrap: wrap;
}

:where(.pg-inventory, .pg-operation) .cta h2 {
  font-size: clamp(1.5rem, 2.6vw, var(--t-3xl));
  font-weight: 800;
  margin-bottom: var(--s2);
}

:where(.pg-inventory, .pg-operation) .cta p {
  opacity: .9;
  max-width: 52ch;
}

:where(.pg-inventory, .pg-operation) .cta .btn--white {
  background: var(--white);
  color: var(--grad-start);
}

@media (max-width: 1100px) {
  :where(.pg-operation) .steps,
  :where(.pg-operation) .vas {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-operation) .step:not(:last-child)::after {
    display: none;
  }

  :where(.pg-operation) .exp {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 960px) {
  :where(.pg-operation) .pg-sec {
    padding-block: var(--s16);
  }

  :where(.pg-operation) .pg-hero__grid,
  :where(.pg-operation) .quar,
  :where(.pg-operation) .rma,
  :where(.pg-operation) .job,
  :where(.pg-operation) .faq {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }

  :where(.pg-operation) .pg-hero h1 {
    max-width: 18ch;
  }
}

@media (max-width: 640px) {
  :where(.pg-operation) .pg-sec {
    padding-block: var(--s12);
  }

  :where(.pg-operation) .pg-hero {
    padding-block: var(--s12);
  }

  :where(.pg-operation) .pg-hero__actions .btn,
  :where(.pg-operation) .cta .btn {
    width: 100%;
  }

  :where(.pg-operation) .steps,
  :where(.pg-operation) .vas,
  :where(.pg-operation) .quar__out,
  :where(.pg-operation) .exp,
  :where(.pg-operation) .job__dl {
    grid-template-columns: 1fr;
  }

  :where(.pg-operation) .facts {
    grid-template-columns: 1fr;
  }

  :where(.pg-operation) .facts div + div {
    border-left: 0;
    border-top: 1px solid var(--border-d);
  }

  :where(.pg-operation) .quar__in,
  :where(.pg-operation) .job {
    padding: var(--s6);
  }
}

:where(.pg-inventory) .cta .btn--white:hover {
  opacity: .92;
}

:where(.pg-inventory) .inv-cta-sec {
  padding-block: 0 var(--s12);
  scroll-margin-top: calc(68px + var(--inv-sub-h));
}

@media (max-width: 1100px) {
  :where(.pg-inventory) .map {
    grid-template-columns: 1fr;
  }

  :where(.pg-inventory) .map__feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :where(.pg-inventory) .eq {
    grid-template-columns: 1fr auto 1fr;
    row-gap: var(--s4);
  }

  :where(.pg-inventory) .eq__op--2 {
    display: none;
  }

  :where(.pg-inventory) .eq__op--eq {
    grid-column: 1 / -1;
    padding-block: var(--s2);
  }

  :where(.pg-inventory) .eq__term--avail {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  :where(.pg-inventory) .inv-sec {
    padding-block: var(--s16);
  }

  :where(.pg-inventory) .inv-hero__grid,
  :where(.pg-inventory) .lpn,
  :where(.pg-inventory) .faq {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }

  :where(.pg-inventory) .guar__list {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-inventory) .acct__grid {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-inventory) .ops__list {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }

  :where(.pg-inventory) .ops__list li + li {
    border-left: 0;
    border-top: 1px solid var(--border-d);
    padding-top: var(--s8);
  }

  :where(.pg-inventory) .guar__item:nth-child(3) {
    border-left: 0;
  }

  :where(.pg-inventory) .guar__item:nth-child(n/**/+3) {
    border-top: 1px solid var(--border-d);
  }

  :where(.pg-inventory) .inv-hero h1 {
    max-width: 18ch;
  }
}

@media (max-width: 640px) {
  :where(.pg-inventory) .inv-sec {
    padding-block: var(--s12);
  }

  :where(.pg-inventory) .inv-hero {
    padding-block: var(--s12);
  }

  :where(.pg-inventory) .inv-hero__actions .btn {
    width: 100%;
  }

  :where(.pg-inventory) .eq {
    grid-template-columns: 1fr;
  }

  :where(.pg-inventory) .eq__op {
    padding-block: var(--s2);
    font-size: var(--t-3xl);
  }

  :where(.pg-inventory) .eq__op--2 {
    display: grid;
  }

  :where(.pg-inventory) .guar__list {
    grid-template-columns: 1fr;
  }

  :where(.pg-inventory) .acct__grid {
    grid-template-columns: 1fr;
  }

  :where(.pg-inventory) .ops {
    padding: var(--s8) var(--s5);
  }

  :where(.pg-inventory) .guar__item + .guar__item {
    border-left: 0;
    border-top: 1px solid var(--border-d);
  }

  :where(.pg-inventory) .guar__foot .btn {
    width: 100%;
  }

  :where(.pg-inventory) .map__head,
  :where(.pg-inventory) .map__floor,
  :where(.pg-inventory) .map__foot {
    padding-inline: var(--s4);
  }

  :where(.pg-inventory) .map__kpis {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-inventory) .map__kpis div {
    padding: var(--s3) var(--s4);
  }

  :where(.pg-inventory) .map__kpis div:nth-child(3) {
    border-left: 0;
  }

  :where(.pg-inventory) .map__kpis div:nth-child(n/**/+3) {
    border-top: 1px solid var(--border);
  }

  :where(.pg-inventory) .pick li {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  :where(.pg-inventory, .pg-operation) .cta {
    padding: var(--s8) var(--s6);
  }

  :where(.pg-inventory) .cta .btn {
    width: 100%;
  }

  :where(.pg-inventory, .pg-operation) .page-nav {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  :where(.pg-inventory) .map__feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  :where(.pg-inventory) .map__feats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-inventory) .map__live {
    animation: none;
  }
}

@media (max-width: 960px) {
  :where(.pg-billing, .pg-portal, .pg-workflow) .hero-slide__inner {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }

  :where(.pg-workflow) .hero-slide__visual {
    display: none;
  }

  :where(.pg-workflow) .hero-slide__lead {
    max-width: 100%;
  }

  :where(.pg-workflow) .hero-carousel__btn--prev {
    left: var(--s3);
  }

  :where(.pg-workflow) .hero-carousel__btn--next {
    right: var(--s3);
  }

  :where(.pg-workflow) .feat-group {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  :where(.pg-workflow) .feat-group__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  :where(.pg-workflow) .wf-columns {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }

  :where(.pg-workflow) .wf-step-card__rule {
    display: none;
  }
}

@media (max-width: 600px) {
  :where(.pg-workflow) .feat-group__cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  :where(.pg-workflow) .hero-carousel {
    min-height: auto;
  }

  :where(.pg-workflow) .hero-slide {
    padding: var(--s12) 0 calc(var(--s12) + 2rem);
  }

  :where(.pg-workflow) .feat-group__cards {
    grid-template-columns: 1fr;
  }

  :where(.pg-workflow) .hero-carousel__btn {
    display: none;
  }
}

@media (max-width: 640px) {
  :where(.pg-billing, .pg-portal) .hero-slide {
    padding: var(--s12) 0;
  }

  :where(.pg-billing, .pg-portal) .hero-slide__actions .btn {
    width: 100%;
  }
}

:where(.pg-portal) .pt-sec {
  scroll-margin-top: 80px;
}

:where(.pg-portal) .pt-ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--grad);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

:where(.pg-portal) .pt-ic img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-portal) .pt-tag {
  display: inline-flex;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grad-mid);
  border: 1px solid rgba(18,135,204,.35);
  border-radius: 100px;
  padding: .3rem .9rem;
  margin-bottom: var(--s4);
}

:where(.pg-portal) .section--dark {
  background: var(--bg-2);
  color: var(--paper);
}

:where(.pg-portal) .section--dark .sec-hd h2 {
  color: var(--white);
}

:where(.pg-portal) .section--dark .sec-hd p {
  color: rgba(228,230,232,.62);
}

:where(.pg-portal) .section--dark .pt-tag {
  color: var(--grad-end);
  border-color: rgba(0,173,238,.35);
}

:where(.pg-portal) .cp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}

:where(.pg-portal) .cp-mock {
  background: var(--bg-2);
  border-radius: var(--r-xl);
  padding: var(--s6);
  box-shadow: var(--sh-lg);
  color: var(--white);
}

:where(.pg-portal) .cp-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border-d);
  font-size: var(--t-sm);
}

:where(.pg-portal) .cp-mock__bar b {
  font-weight: 700;
}

:where(.pg-portal) .cp-mock__dots {
  display: flex;
  gap: 6px;
}

:where(.pg-portal) .cp-mock__dots i-a {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grad-end);
}

:where(.pg-portal) .cp-mock__dots i-b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #A855F7;
}

:where(.pg-portal) .cp-mock__dots i-c {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F0A30A;
}

:where(.pg-portal) .cp-mock__dots i-d {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10B482;
}

:where(.pg-portal) .cp-mock__site {
  font-size: var(--t-xs);
  color: var(--grad-mid);
  border: 1px solid var(--grad-mid);
  border-radius: 100px;
  padding: .2rem .7rem;
}

:where(.pg-portal) .cp-mock__label {
  font-size: var(--t-xs);
  color: var(--white);
  margin-bottom: var(--s3);
}

:where(.pg-portal) .cp-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s5);
}

:where(.pg-portal) .cp-kpi {
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-lg);
  padding: var(--s4);
  border-top: 3px solid var(--c);
}

:where(.pg-portal) .cp-kpi span {
  display: block;
  font-size: var(--t-xs);
  color: rgba(228,230,232,.55);
  margin-bottom: 4px;
}

:where(.pg-portal) .cp-kpi b {
  font-size: var(--t-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

:where(.pg-portal) .k-on {
  --c: var(--grad-end);
}

:where(.pg-portal) .k-qr {
  --c: #A855F7;
}

:where(.pg-portal) .k-al {
  --c: #F0A30A;
}

:where(.pg-portal) .k-av {
  --c: #10B482;
}

:where(.pg-portal) .cp-rows {
  list-style: none;
  display: grid;
  gap: var(--s2);
}

:where(.pg-portal) .cp-rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bg-1);
  border-radius: var(--r);
  font-size: var(--t-sm);
}

:where(.pg-portal) .cp-rows li span:first-child {
  color: rgba(228,230,232,.8);
}

:where(.pg-portal) .cp-rows em {
  white-space: nowrap;
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: .15rem .6rem;
  border-radius: 100px;
  background: rgba(0,173,238,.14);
  color: var(--grad-end);
}

:where(.pg-portal) .cp-rows em.ok {
  background: rgba(16,180,130,.15);
  color: #3FD3A4;
}

:where(.pg-portal) .cp-rows em.warn {
  background: rgba(240,163,10,.15);
  color: #F5B93A;
}

:where(.pg-portal) .cp-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.35rem var(--s8);
}

:where(.pg-portal) .cp-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s4);
  align-items: start;
}

:where(.pg-portal) .cp-list h3 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--bg-5);
  margin-bottom: 4px;
}

:where(.pg-portal) .cp-list p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-portal) .cp-note {
  margin-top: var(--s8);
  display: flex;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border-left: 3px solid var(--grad-mid);
  border-radius: var(--r);
  font-size: var(--t-sm);
  color: var(--steel);
  line-height: 1.6;
}

:where(.pg-portal) .erp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s8);
  align-items: center;
}

:where(.pg-portal) .erp-col {
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-xl);
  padding: var(--s8) var(--s6);
  height: 100%;
}

:where(.pg-portal) .erp-col__hd {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

:where(.pg-portal) .erp-col__hd h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
}

:where(.pg-portal) .erp-dir {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 100px;
  margin-left: auto;
  white-space: nowrap;
}

:where(.pg-portal) .erp-dir--in {
  background: rgba(16,180,130,.15);
  color: #3FD3A4;
}

:where(.pg-portal) .erp-dir--out {
  background: rgba(0,173,238,.14);
  color: var(--grad-end);
}

:where(.pg-portal) .erp-col > p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.55);
  margin-bottom: var(--s5);
}

:where(.pg-portal) .erp-items {
  list-style: none;
  display: grid;
  gap: var(--s3);
}

:where(.pg-portal) .erp-items li {
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-d);
}

:where(.pg-portal) .erp-items b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}

:where(.pg-portal) .erp-items span {
  font-size: var(--t-xs);
  color: rgba(228,230,232,.58);
  line-height: 1.5;
}

:where(.pg-portal) .erp-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

:where(.pg-portal) .erp-node {
  width: 128px;
  padding: var(--s5) var(--s3);
  border-radius: var(--r-xl);
  text-align: center;
  font-weight: 800;
  font-size: var(--t-base);
}

:where(.pg-portal) .erp-node small {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  opacity: .75;
  margin-top: 2px;
}

:where(.pg-portal) .erp-node--wf {
  background: var(--grad);
  color: var(--white);
}

:where(.pg-portal) .erp-node--od {
  background: var(--white);
  color: var(--bg-2);
}

:where(.pg-portal) .erp-arrows {
  display: flex;
  gap: var(--s4);
  color: rgba(228,230,232,.5);
  font-size: var(--t-xs);
  font-weight: 600;
}

:where(.pg-portal) .erp-arrows span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

:where(.pg-portal) .erp-arrows svg {
  width: 18px;
  height: 36px;
}

:where(.pg-portal) .erp-retry {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px dashed var(--border-d);
}

:where(.pg-portal) .erp-retry > span {
  display: block;
  font-size: var(--t-xs);
  color: rgba(228,230,232,.55);
  margin-bottom: var(--s3);
}

:where(.pg-portal) .erp-retry ol {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

:where(.pg-portal) .erp-retry li {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--grad-end);
  background: rgba(0,173,238,.1);
  border: 1px solid rgba(0,173,238,.25);
  padding: .2rem .55rem;
  border-radius: var(--r);
}

:where(.pg-portal) .erp-guar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s12);
  padding-top: var(--s10);
  border-top: 1px solid var(--border-d);
}

:where(.pg-portal) .erp-guar li {
  padding-inline: var(--s6);
  text-align: center;
}

:where(.pg-portal) .erp-guar li + li {
  border-left: 1px solid var(--border-d);
}

:where(.pg-portal) .erp-guar__hd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

:where(.pg-portal) .erp-guar h3 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--white);
}

:where(.pg-portal) .erp-guar p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.58);
  line-height: 1.65;
}

:where(.pg-portal) .sc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}

:where(.pg-portal) .sc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--c);
  border-radius: var(--r-xl);
  padding: var(--s6);
  text-align: center;
  transition: transform var(--ease), box-shadow var(--ease);
}

:where(.pg-portal) .sc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
}

:where(.pg-portal) .sc-card__hd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

:where(.pg-portal) .sc-card h3 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

:where(.pg-portal) .sc-card p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.65;
}

:where(.pg-portal) .sc-card small {
  display: inline-block;
  margin-top: var(--s8);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--white);
  background: var(--grad);
  padding: .25rem .7rem;
  border-radius: 100px;
}

:where(.pg-portal) .sc-card small-A {
  display: inline-block;
  margin-top:var(--s2);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--white);
  background: var(--grad);
  padding: .25rem .7rem;
  border-radius: 100px;
}

:where(.pg-portal) .sc-1 {
  --c: var(--grad-mid);
}

:where(.pg-portal) .sc-2 {
  --c: #10B482;
}

:where(.pg-portal) .sc-3 {
  --c: #A855F7;
}

:where(.pg-portal) .sc-4 {
  --c: #F0A30A;
}

:where(.pg-portal) .rp-fmt {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3);
  list-style: none;
  margin: calc(var(--s6) * -1) 0 var(--s10);
}

:where(.pg-portal) .rp-fmt li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--steel);
  background: var(--white);
  border: 1px solid var(--border);
  padding: .45rem .9rem;
  border-radius: 100px;
}

:where(.pg-portal) .rp-fmt li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-end);
}

:where(.pg-portal) .rp-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

:where(.pg-portal) .rp-group {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

:where(.pg-portal) .rp-group__hd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s5) var(--s6);
  background: var(--bg-2);
  color: var(--white);
}

:where(.pg-portal) .rp-group__hd h3 {
  font-size: var(--t-lg);
  font-weight: 700;
}

:where(.pg-portal) .rp-group__hd span {
  font-size: var(--t-xs);
  color: rgba(228,230,232,.55);
}

:where(.pg-portal) .rp-list {
  list-style: none;
}

:where(.pg-portal) .rp-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
}

:where(.pg-portal) .rp-item + .rp-item {
  border-top: 1px solid var(--border);
}

:where(.pg-portal) .rp-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--t-xs);
  font-weight: 800;
  color: var(--white);
  background: var(--grad);
}

:where(.pg-portal) .rp-item h4 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

:where(.pg-portal) .rp-item p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-portal) .lsview {
  height:100%;
}

@media (max-width: 1100px) {
  :where(.pg-portal) .sc-grid {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-portal) .erp {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal) .erp-hub {
    flex-direction: row;
    justify-content: center;
    order: -1;
  }

  :where(.pg-portal) .erp-arrows svg {
    transform: rotate(-90deg);
  }

  :where(.pg-portal) .rp-groups {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 960px) {
  :where(.pg-portal) .cp {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }

  :where(.pg-portal) .erp-guar {
    grid-template-columns: 1fr;
    row-gap: var(--s6);
  }

  :where(.pg-portal) .erp-guar li {
    padding: 0;
  }

  :where(.pg-portal) .erp-guar li + li {
    border-left: 0;
    border-top: 1px solid var(--border-d);
    padding-top: var(--s6);
  }
}

@media (max-width: 640px) {
  :where(.pg-portal) .cp-kpis {
    grid-template-columns: 1fr 1fr;
  }

  :where(.pg-portal) .cp-list {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal) .cp-mock {
    padding: var(--s5);
  }

  :where(.pg-portal) .sc-grid {
    grid-template-columns: 1fr;
  }

  :where(.pg-portal) .erp-node {
    width: 100px;
  }

  :where(.pg-portal) .erp-col {
    padding: var(--s6) var(--s5);
  }

  :where(.pg-portal) .rp-item {
    padding: var(--s4) var(--s5);
  }
}

:where(.pg-billing) .bill-metrics {
  background: var(--bg-2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

:where(.pg-billing) .bill-metrics-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

:where(.pg-billing) .bill-metric {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.5rem 2rem;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: background .18s;
}

:where(.pg-billing) .bill-metric:last-child {
  border-right: none;
}

:where(.pg-billing) .bill-metric:hover {
  background: rgba(0,173,238,.05);
}

:where(.pg-billing) .bill-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(18,135,204,.28);
}

:where(.pg-billing) .bill-metric-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-billing) .bill-metric-num {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:where(.pg-billing) .bill-metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(228,230,232,.45);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 2px;
}

:where(.pg-billing) .ct-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

:where(.pg-billing) .ct-grid-A {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

:where(.pg-billing) .ct-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  background: var(--ink);
  border: 1px solid var(--grad-mid);
  border-radius: var(--r-xl);
  border-left: 5px solid transparent;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

:where(.pg-billing) .ct-card:hover {
  box-shadow: 0 4px 24px rgba(12,26,46,.10);
  transform: translateY(-1px);
}

:where(.pg-billing) .ct-card--storage {
  border-left-color: var(--grad-mid);
}

:where(.pg-billing) .ct-card--inbound {
  border-left-color: #10B482;
}

:where(.pg-billing) .ct-card--outbound {
  border-left-color: #F06030;
}

:where(.pg-billing) .ct-card--count {
  border-left-color: var(--warn);
}

:where(.pg-billing) .ct-card--quar {
  border-left-color: #A855F7;
}

:where(.pg-billing) .ct-card--vas {
  border-left-color: #0EA5E9;
}

:where(.pg-billing) .ct-card--returns {
  border-left-color: #EC4899;
}

:where(.pg-billing) .ct-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-billing) .ct-card--storage  .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-card--inbound  .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-card--outbound .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-card--count    .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-card--quar     .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-card--vas      .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-card--returns  .ct-icon {
  background: var(--paper);
}

:where(.pg-billing) .ct-icon img {
  width: 25px;
  height: 25px;
}

:where(.pg-billing) .ct-name {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}

:where(.pg-billing) .ct-measure {
  font-size: .775rem;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: .5rem;
}

:where(.pg-billing) .ct-source {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid var(--grad-mid);
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-source-G {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid #10B482;
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-source-O {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid #F06030;
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-source-Y {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid var(--warn);
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-source-P {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid #A855F7;
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-source-B {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid #0EA5E9;
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-source-I {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bg-5);
  background: var(--paper);
  border: 1px solid #EC4899;
  padding: .18rem .55rem;
  border-radius: 4px;
}

:where(.pg-billing) .ct-card {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: flex-start;
  text-align: center;
  column-gap: .75rem;
  row-gap: .6rem;
}

:where(.pg-billing) .ct-card > div:not(.ct-icon) {
  display: contents;
}

:where(.pg-billing) .ct-card .ct-name {
  margin-bottom: 0;
}

:where(.pg-billing) .ct-card .ct-measure {
  flex-basis: 100%;
  margin-bottom: 0;
}

:where(.pg-billing) .ilc {
  background: var(--bg-2);
  color: var(--paper);
  padding-block: var(--s20);
  scroll-margin-top: 80px;
}

:where(.pg-billing) .ilc__grid {
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--s16);
  align-items: start;
}

:where(.pg-billing) .ilc__intro {
  position: sticky;
  top: 110px;
}

:where(.pg-billing) .ilc__tag {
  display: inline-flex;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grad-end);
  border: 1px solid rgba(0,173,238,.35);
  border-radius: 100px;
  padding: .3rem .9rem;
  margin-bottom: var(--s5);
}

:where(.pg-billing) .ilc__intro h2 {
  font-size: clamp(1.75rem, 3.2vw, var(--t-4xl));
  font-weight: 800;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: var(--s4);
  text-align:center;
}

:where(.pg-billing) .ilc__intro > p {
  font-size: var(--t-base);
  color: rgba(228,230,232,.62);
  line-height: 1.7;
  margin-bottom: var(--s8);
  max-width: 72ch;
  text-align:center;
}

:where(.pg-billing) .ilc__rules {
  list-style: none;
  display: grid;
  gap: var(--s3);
}

:where(.pg-billing) .ilc__rules li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
}

:where(.pg-billing) .ilc__rules span {
  color: rgba(228,230,232,.55);
}

:where(.pg-billing) .ilc__rules strong {
  color: var(--grad-end);
  font-weight: 700;
  text-align: right;
}

:where(.pg-billing) .ilc__steps {
  list-style: none;
  position: relative;
}

:where(.pg-billing) .ilc__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c), var(--n));
}

:where(.pg-billing) .s-draft {
  --n: var(--grad-end);
}

:where(.pg-billing) .s-issued {
  --n: #10B482;
}

:where(.pg-billing) .s-paid {
  --n: #EF5B4C;
}

:where(.pg-billing) .ilc__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s5);
  padding-bottom: var(--s6);
}

:where(.pg-billing) .ilc__step:last-child {
  padding-bottom: 0;
}

:where(.pg-billing) .ilc__node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  font-weight: 800;
  background: var(--bg-2);
  border: 2px solid var(--c);
  color: var(--c);
  position: relative;
  z-index: 1;
}

:where(.pg-billing) .ilc__body {
  background: var(--bg-1);
  border: 1px solid var(--border-d);
  border-radius: var(--r-xl);
  padding: var(--s5) var(--s6);
}

:where(.pg-billing) .ilc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
  flex-wrap: wrap;
}

:where(.pg-billing) .ilc__head h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
}

:where(.pg-billing) .ilc__chip {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: .2rem .7rem;
  border-radius: 100px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}

:where(.pg-billing) .ilc__body p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.62);
  line-height: 1.65;
  text-align: center;
}

:where(.pg-billing) .ilc__step--fix .ilc__body {
  border-style: dashed;
  border-color: rgba(220,70,55,.5);
  background: transparent;
}

:where(.pg-billing) .s-draft {
  --c: #4B9FE0;
}

:where(.pg-billing) .s-issued {
  --c: var(--grad-end);
}

:where(.pg-billing) .s-paid {
  --c: #10B482;
}

:where(.pg-billing) .s-cancel {
  --c: #EF5B4C;
}

:where(.pg-billing) .ilc__feats {
  max-width: 100%;
  margin: var(--s16) auto 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-d);
  padding-top: var(--s10);
}

:where(.pg-billing) .ilc__feats li {
  padding-inline: var(--s6);
}

:where(.pg-billing) .ilc__feats li:first-child {
  padding-left: 0;
}

:where(.pg-billing) .ilc__feats li + li {
  border-left: 1px solid var(--border-d);
}

:where(.pg-billing) .ilc__ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--grad);
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
}

:where(.pg-billing) .ilc__ic img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

:where(.pg-billing) .ilc__feats h3 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s2);
}

:where(.pg-billing) .ilc__feats p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.58);
  line-height: 1.65;
}

:where(.pg-billing) .ilc__feats li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: center;
  column-gap: var(--s3);
  row-gap: var(--s3);
  text-align: center;
}

:where(.pg-billing) .ilc__feats li:first-child {
  padding-left: var(--s6);
}

:where(.pg-billing) .ilc__feats .ilc__ic {
  margin-bottom: 0;
  flex-shrink: 0;
}

:where(.pg-billing) .ilc__feats h3 {
  margin-bottom: 0;
}

:where(.pg-billing) .ilc__feats p {
  flex-basis: 100%;
}

@media (max-width: 1024px) {
  :where(.pg-billing) .ilc__feats {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--s8);
  }

  :where(.pg-billing) .ilc__feats li:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 900px) {
  :where(.pg-billing) .ilc {
    padding-block: var(--s16);
  }

  :where(.pg-billing) .ilc__grid {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }

  :where(.pg-billing) .ilc__intro {
    position: static;
  }
}

@media (max-width: 600px) {
  :where(.pg-billing) .ilc {
    padding-block: var(--s12);
  }

  :where(.pg-billing) .ilc__feats {
    grid-template-columns: 1fr;
  }

  :where(.pg-billing) .ilc__feats li {
    padding: 0;
    border-left: 0 !important;
  }

  :where(.pg-billing) .ilc__body {
    padding: var(--s4) var(--s5);
  }

  :where(.pg-billing) .ilc__rules li {
    flex-direction: column;
    gap: 2px;
  }

  :where(.pg-billing) .ilc__rules strong {
    text-align: left;
  }
}

:where(.pg-billing) .dsh {
  max-width: 100%;
  margin-inline: auto;
}

:where(.pg-billing) .dsh__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  text-align:center;
}

:where(.pg-billing) .dsh__label h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
}

:where(.pg-billing) .dsh__label p {
  font-size: var(--t-sm);
  color: var(--white);
}

:where(.pg-billing) .dsh__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s12);
}

:where(.pg-billing) .sheet {
  position: relative;
  background: var(--white);
  border: 5px solid var(--grad-mid);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s4) var(--s5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform var(--ease), box-shadow var(--ease);
}

:where(.pg-billing) .sheet::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, var(--paper) 50%, #D5DAE0 50%);
}

:where(.pg-billing) .sheet:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
}

:where(.pg-billing) .sheet__code {
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--white);
  background: var(--bg-5);
  padding: .2rem .6rem;
  border-radius: var(--r);
  margin-bottom: var(--s4);
}

:where(.pg-billing) .sheet__ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-mid);
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
}

:where(.pg-billing) .sheet__ic img {
  width: 35px;
  height: 35px;
}

:where(.pg-billing) .sheet h4 {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: var(--s3);
  min-height: 2.7em;
  display: flex;
  align-items: center;
}

:where(.pg-billing) .sheet__when {
  padding-top: var(--s3);
  border-top: 1px dashed var(--border);
  width: 100%;
  font-size: var(--t-xs);
  color: var(--slate);
  line-height: 1.45;
}

:where(.pg-billing) .sheet__when b {
  display: block;
  font-weight: 600;
  color: var(--grad-mid);
  margin-bottom: 2px;
  font-size:var(--t-sm);
  background: var(--paper);
  width:65%;
  margin: 0 auto;
}

:where(.pg-billing) .sheet__when-A {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  width: 100%;
  font-size: var(--t-xs);
  color: var(--slate);
  line-height: 1.45;
}

:where(.pg-billing) .sheet__when-A b {
  display: block;
  font-weight: 600;
  color: var(--grad-mid);
  margin-bottom: 2px;
  font-size:var(--t-sm);
  background: var(--paper);
  width:65%;
  margin: 0 auto;
}

:where(.pg-billing) .dsh__band {
  background: var(--bg-2);
  border-radius: var(--r-xl);
  padding: var(--s8);
}

:where(.pg-billing) .dsh__band > h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: var(--s6);
}

:where(.pg-billing) .dsh__feats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

:where(.pg-billing) .dsh__feats li {
  padding-inline: var(--s6);
  text-align: center;
}

:where(.pg-billing) .dsh__feats li + li {
  border-left: 1px solid var(--border-d);
}

:where(.pg-billing) .dsh__fh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

:where(.pg-billing) .dsh__ic {
  width: 42px;
  height: 42px;
  border-radius: var(--r-lg);
  background: var(--grad);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

:where(.pg-billing) .dsh__ic img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

:where(.pg-billing) .dsh__fh h4 {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--white);
}

:where(.pg-billing) .dsh__feats p {
  font-size: var(--t-sm);
  color: rgba(228,230,232,.6);
  line-height: 1.65;
}

@media (max-width: 1200px) {
  :where(.pg-billing) .dsh__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  :where(.pg-billing) .dsh__feats {
    grid-template-columns: 1fr;
    row-gap: var(--s6);
  }

  :where(.pg-billing) .dsh__feats li {
    padding: 0;
  }

  :where(.pg-billing) .dsh__feats li + li {
    border-left: 0;
    border-top: 1px solid var(--border-d);
    padding-top: var(--s6);
  }
}

@media (max-width: 640px) {
  :where(.pg-billing) .dsh__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }

  :where(.pg-billing) .sheet:last-child {
    grid-column: 1 / -1;
  }

  :where(.pg-billing) .dsh__band {
    padding: var(--s6) var(--s5);
  }
}

:where(.pg-billing) .mob-wrap-v3 {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}

:where(.pg-billing) .phone-mockup {
  aspect-ratio: 9/16;
  max-width: 260px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 36px;
  padding: .75rem;
  box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 24px 64px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}

:where(.pg-billing) .phone-notch {
  width: 80px;
  height: 6px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  margin: 0 auto .75rem;
}

:where(.pg-billing) .phone-screen {
  background: var(--bg-1);
  border-radius: 26px;
  height: calc(100% - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:where(.pg-billing) .phone-topbar {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  padding: .625rem .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

:where(.pg-billing) .phone-topbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}

:where(.pg-billing) .phone-topbar-title {
  font-size: .65rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .04em;
  flex: 1;
}

:where(.pg-billing) .phone-scan-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
}

:where(.pg-billing) .phone-scan-icon {
  width: 64px;
  height: 64px;
  background: rgba(0,173,238,.12);
  border: 2px solid rgba(0,173,238,.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: phone-pulse 2s ease-in-out infinite;
}

:where(.pg-billing) .phone-scan-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

:where(.pg-billing) .phone-scan-text {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(228,230,232,.5);
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
}

:where(.pg-billing) .phone-scan-result {
  width: 100%;
  background: rgba(0,173,238,.10);
  border: 1px solid rgba(0,173,238,.2);
  border-radius: 8px;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

:where(.pg-billing) .phone-result-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B482;
  flex-shrink: 0;
  animation: result-blink 1.2s steps(1) infinite;
}

:where(.pg-billing) .phone-result-text {
  font-size: .6rem;
  color: rgba(228,230,232,.6);
}

:where(.pg-billing) .phone-result-text strong {
  color: var(--grad-end);
  display: block;
  font-size: .65rem;
}

:where(.pg-billing) .phone-taskbar {
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.05);
  padding: .5rem .875rem;
  display: flex;
  justify-content: space-around;
}

:where(.pg-billing) .phone-tab {
  font-size: .55rem;
  font-weight: 600;
  color: rgba(228,230,232,.28);
  text-align: center;
  letter-spacing: .03em;
}

:where(.pg-billing) .phone-tab--active {
  color: var(--grad-end);
}

:where(.pg-billing) .mob-features-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}

@media (max-width: 640px) {
  :where(.pg-billing) .mob-features-v3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

:where(.pg-billing) .mob-feat-v3--full {
  grid-column: span 2;
}

:where(.pg-billing) .mob-feat-v3 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: var(--r-xl);
  transition: background .2s, border-color .2s;
}

:where(.pg-billing) .mob-feat-v3:hover {
  background: rgba(0,173,238,.07);
  border-color: rgba(0,173,238,.20);
}

:where(.pg-billing) .mob-feat-icon-v3 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(.pg-billing) .mob-feat-icon-v3 img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

:where(.pg-billing) .mob-feat-v3 strong {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}

:where(.pg-billing) .mob-feat-v3 span {
  font-size: .775rem;
  color: rgba(228,230,232,.48);
  line-height: 1.55;
}

:where(.pg-billing) .loc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

:where(.pg-billing) .loc-feat-list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin-top: 0;
}

:where(.pg-billing) .loc-feat {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: var(--white);
  border: 1px solid rgba(12,26,46,.08);
  border-radius: var(--r-lg);
  transition: border-color .18s;
}

:where(.pg-billing) .loc-feat:hover {
  border-color: rgba(27,117,187,.22);
}

:where(.pg-billing) .loc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-mid);
  flex-shrink: 0;
  margin-top: .45em;
}

:where(.pg-billing) .loc-feat strong {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--bg-5);
  margin-bottom: 2px;
}

:where(.pg-billing) .loc-feat span {
  font-size: .775rem;
  color: var(--slate);
  line-height: 1.5;
}

:where(.pg-billing) .loc-feat img {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

:where(.pg-billing) .bilingual-v3 {
  background: var(--white);
  border: 1px solid rgba(12,26,46,.09);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(12,26,46,.08);
}

:where(.pg-billing) .bil-v3-hd {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:where(.pg-billing) .bil-v3-lang {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

:where(.pg-billing) .bil-v3-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(12,26,46,.06);
  transition: background .15s;
}

:where(.pg-billing) .bil-v3-row:last-child {
  border-bottom: none;
}

:where(.pg-billing) .bil-v3-row:hover {
  background: rgba(27,117,187,.025);
}

:where(.pg-billing) .bil-ar {
  flex: 1;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  border-right: 1px solid rgba(12,26,46,.06);
  direction: rtl;
}

:where(.pg-billing) .bil-en {
  flex: 1;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  color: var(--slate);
}

:where(.pg-billing) .curr-strip {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

:where(.pg-billing) .curr-pill {
  font-size: .75rem;
  font-weight: 700;
  color: var(--grad-mid);
  background: rgba(18,135,204,.08);
  border: 1px solid rgba(18,135,204,.18);
  padding: .3rem .75rem;
  border-radius: 100px;
  letter-spacing: .04em;
}

@media (max-width: 1024px) {
  :where(.pg-billing) .bill-metrics-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.pg-billing) .inv-feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  :where(.pg-billing) .ct-grid,
  :where(.pg-billing) .ct-grid-A {
    grid-template-columns: 1fr;
  }

  :where(.pg-billing) .mob-wrap-v3 {
    grid-template-columns: 1fr;
  }

  :where(.pg-billing) .loc-wrap {
    grid-template-columns: 1fr;
  }

  :where(.pg-billing) .phone-mockup {
    max-width: 220px;
  }

  :where(.pg-billing) .inv-lifecycle {
    flex-direction: column;
  }

  :where(.pg-billing) .inv-step-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 600px) {
  :where(.pg-billing) .bill-metrics-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.pg-billing) .inv-feat-grid {
    grid-template-columns: 1fr;
  }
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid rgba(12,26,46,.07);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 640ms cubic-bezier(.45,0,.55,1);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__slide {
  display: flex;
  min-width: 100%;
  height: clamp(480px, 64vh, 660px);
  flex-shrink: 0;
  background: var(--ink);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-left {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem clamp(2rem, 7vw, 7rem);
  gap: 1.2rem;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 580ms ease 260ms, transform 580ms cubic-bezier(.22,1,.36,1) 260ms;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__slide.is-active .cr__split-left {
  opacity: 1;
  transform: translateX(0);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-right {
  flex: 0 0 50%;
  overflow: hidden;
  position: relative;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 6s ease;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__slide.is-active .cr__bg {
  transform: scale(1.04);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  display: inline-block;
  width:fit-content;
  align-self: flex-start;
  border: 1px solid rgba(0, 173, 238, .32);
  padding: .22rem .85rem;
  border-radius: 100px;
  margin-bottom: .9rem;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__h {
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -.028em;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__sub {
  font-size: .95rem;
  color: var(--white);
  line-height: 1.68;
  max-width: 65ch;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__btns {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .25rem;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__btn-prim {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .72rem 1.55rem;
  background: var(--grad);
  color: #fff;
  font-family: var(--f);
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--r);
  text-decoration: none;
  transition: opacity .18s;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__btn-prim:hover {
  opacity: .86;
}

:where(.pg-inventory) .cr__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .70rem 1.4rem;
  background: transparent;
  color: var(--grad-mid);
  font-family: var(--f);
  font-weight: 600;
  font-size: .875rem;
  border-radius: 15px;
  border: 1.5px solid var(--grad-mid);
  text-decoration: none;
  transition: border-color .20s, color .20s;
}

:where(.pg-billing, .pg-index, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .70rem 1.4rem;
  background: transparent;
  color: var(--grad-mid);
  font-family: var(--f);
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--r);
  border: 1.5px solid var(--grad-mid);
  text-decoration: none;
  transition: border-color .20s, color .20s;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__btn-outline:hover {
  border-color: var(--grad-mid);
  color: var(--grad-mid);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(12,26,46,.14);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(12,26,46,.10);
  transition: box-shadow .18s, border-color .18s;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__arrow:hover {
  border-color: rgba(18,135,204,.40);
  box-shadow: 0 6px 22px rgba(12,26,46,.16);
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__arrow--prev {
  left: 1.5rem;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__arrow--next {
  right: 1.5rem;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__dots {
  position: absolute;
  bottom: 1.75rem;
  left: 75%;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  z-index: 20;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .22s, width .22s;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__dot.is-active {
  background: var(--grad-mid);
  width: 22px;
  border-radius: 4px;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--grad);
  z-index: 20;
}

:where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__progress.is-running {
  animation: cr-fill 5s linear forwards;
}

@media (max-width: 900px) {
  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__slide {
    flex-direction: column;
    height: auto;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-left {
    flex: none;
    padding: 2.5rem 2rem;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-right {
    flex: 0 0 260px;
  }
}

@media (max-width: 600px) {
  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-right {
    display: none;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-left {
    padding: 2.5rem 1.5rem;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__h {
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__dots {
    left: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__track,
  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-left,
  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__bg {
    transition: none;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__split-left {
    opacity: 1;
    transform: none;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__bg {
    transform: none !important;
  }

  :where(.pg-billing, .pg-index, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__progress {
    animation: none;
    width: 50%;
  }
}

:where(.pg-index) .ml-why {
  background: var(--white);
  padding: 5.5rem 0;
}

:where(.pg-index) .ml-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

:where(.pg-index) .ml-why-card {
  border: 1px solid rgba(12,26,46,.10);
  border-radius: var(--r-xl);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  position: relative;
  transition: box-shadow .22s, border-color .22s, transform .22s;
  overflow: hidden;
}

:where(.pg-index) .ml-why-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transition: transform .28s ease;
  transform-origin: left;
}

:where(.pg-index) .ml-why-card:hover {
  border-color: rgba(18,135,204,.28);
  box-shadow: 0 8px 28px rgba(18,135,204,.10);
  transform: translateY(-3px);
}

:where(.pg-index) .ml-why-card:hover::after {
  transform: scaleX(1);
}

:where(.pg-index) .ml-why-card__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r);
  background: rgba(18,135,204,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(18,135,204,.18);
  transition: background .22s, border-color .22s;
}

:where(.pg-index) .ml-why-card:hover .ml-why-card__icon {
  background: rgba(18,135,204,.16);
  border-color: rgba(18,135,204,.35);
}

:where(.pg-index) .ml-why-card__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

:where(.pg-index) .ml-why-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}

:where(.pg-index) .ml-why-card__desc {
  font-size: .875rem;
  color: var(--slate);
  line-height: 1.65;
  flex: 1;
}

:where(.pg-index) .ml-why-card__link {
  font-size: .80rem;
  font-weight: 700;
  color: var(--grad-mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap .18s;
  margin-top: .25rem;
}

:where(.pg-index) .ml-why-card:hover .ml-why-card__link {
  gap: .55rem;
}

:where(.pg-index) .ml-best {
  background: #f4f6f8;
  padding: 5.5rem 0;
}

:where(.pg-index) .ml-best__layout {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  gap: 2.5rem;
  align-items: center;
}

:where(.pg-index) .ml-best__col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

:where(.pg-index) .ml-best__center-img {
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(12,26,46,.14);
}

:where(.pg-index) .ml-best__center-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:where(.pg-index) .ml-best-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

:where(.pg-index) .ml-best-item--r {
  flex-direction: row-reverse;
  text-align: right;
}

:where(.pg-index) .ml-best-item__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(12,26,46,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(12,26,46,.08);
  transition: background .22s, border-color .22s;
}

:where(.pg-index) .ml-best-item:hover .ml-best-item__icon {
  background: var(--grad-mid);
  border-color: var(--grad-mid);
}

:where(.pg-index) .ml-best-item:hover .ml-best-item__icon img {
  filter: brightness(0) invert(1);
}

:where(.pg-index) .ml-best-item__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition: filter .22s;
}

:where(.pg-index) .ml-best-item__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .3rem;
}

:where(.pg-index) .ml-best-item__desc {
  font-size: .82rem;
  color: var(--slate);
  line-height: 1.60;
}

:where(.pg-index) .ml-demo {
  background: var(--bg-1);
  padding: 5.5rem 0;
}

:where(.pg-index) .ml-demo__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

:where(.pg-index) .ml-demo__content h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.55rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.022em;
  margin-bottom: .85rem;
  line-height: 1.12;
}

:where(.pg-index) .ml-demo__content p {
  color: rgba(228,230,232,.50);
  font-size: .95rem;
  line-height: 1.68;
  margin-bottom: 1.5rem;
}

:where(.pg-index) .ml-demo__pts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

:where(.pg-index) .ml-demo__pts li {
  font-size: .875rem;
  color: rgba(228,230,232,.62);
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  line-height: 1.5;
}

:where(.pg-index) .ml-demo__pts li::before {
  content: "✓";
  color: var(--grad-end);
  font-weight: 700;
  flex-shrink: 0;
}

:where(.pg-index) .ml-demo__form {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(34,76,108,.45);
  border-radius: var(--r-xl);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.pg-index) .ml-demo__form-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .1rem;
}

:where(.pg-index) .ml-demo__form-sub {
  font-size: .82rem;
  color: rgba(228,230,232,.42);
  margin-bottom: .25rem;
}

:where(.pg-index) .ml-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

:where(.pg-index) .ml-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

:where(.pg-index) .ml-field label {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(228,230,232,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}

:where(.pg-index) .ml-field input,
:where(.pg-index) .ml-field select,
:where(.pg-index) .ml-field textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(34,76,108,.55);
  border-radius: var(--r);
  padding: .62rem .9rem;
  font-family: var(--f);
  font-size: .875rem;
  color: var(--white);
  outline: none;
  transition: border-color .18s;
  width: 100%;
}

:where(.pg-index) .ml-field input::placeholder,
:where(.pg-index) .ml-field textarea::placeholder {
  color: rgba(228,230,232,.25);
}

:where(.pg-index) .ml-field input:focus,
:where(.pg-index) .ml-field select:focus,
:where(.pg-index) .ml-field textarea:focus {
  border-color: var(--grad-mid);
}

:where(.pg-index) .ml-field select option {
  background: var(--bg-2);
  color: var(--white);
}

:where(.pg-index) .ml-field textarea {
  resize: vertical;
  min-height: 88px;
}

:where(.pg-index) .ml-field--full {
  grid-column: span 2;
}

:where(.pg-index) .ml-submit {
  background: var(--grad);
  color: var(--white);
  font-family: var(--f);
  font-weight: 700;
  font-size: .9rem;
  padding: .82rem 1.8rem;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  width: 100%;
  transition: opacity .18s;
  letter-spacing: .01em;
}

:where(.pg-index) .ml-submit:hover {
  opacity: .86;
}

:where(.pg-index) .ml-counters {
  background: var(--bg-0);
  padding: 5.5rem 0;
  border-top: 1px solid rgba(34,76,108,.28);
}

:where(.pg-index) .ml-counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(34,76,108,.28);
  border: 1px solid rgba(34,76,108,.28);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 3rem;
}

:where(.pg-index) .ml-counter {
  background: var(--bg-0);
  padding: 2.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  transition: background .20s;
}

:where(.pg-index) .ml-counter:hover {
  background: rgba(255,255,255,.022);
}

:where(.pg-index) .ml-counter__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0,173,238,.08);
  border: 1px solid rgba(0,173,238,.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.pg-index) .ml-counter__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

:where(.pg-index) .ml-counter__n {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:where(.pg-index) .ml-counter__l {
  font-size: .80rem;
  font-weight: 600;
  color: rgba(228,230,232,.42);
  letter-spacing: .02em;
}

:where(.pg-index) .ml-features {
  background: var(--white);
  padding: 5.5rem 0;
}

:where(.pg-index) .ml-features__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

:where(.pg-index) .ml-acc {
  display: flex;
  flex-direction: column;
}

:where(.pg-index) .ml-acc-item {
  border-bottom: 1px solid rgba(12,26,46,.09);
}

:where(.pg-index) .ml-acc-item:first-child {
  border-top: 1px solid rgba(12,26,46,.09);
}

:where(.pg-index) .ml-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.1rem 0;
  font-family: var(--f);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  gap: .75rem;
  transition: color .18s;
}

:where(.pg-index) .ml-acc-btn:hover {
  color: var(--grad-mid);
}

:where(.pg-index) .ml-acc-btn.is-open {
  color: var(--grad-mid);
}

:where(.pg-index) .ml-acc-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(18,135,204,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--grad-mid);
  line-height: 1;
  transition: background .18s, color .18s, transform .25s;
}

:where(.pg-index) .ml-acc-btn.is-open .ml-acc-icon {
  background: var(--grad-mid);
  color: var(--white);
  transform: rotate(45deg);
}

:where(.pg-index) .ml-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
}

:where(.pg-index) .ml-acc-body.is-open {
  max-height: 300px;
  padding-bottom: 1rem;
}

:where(.pg-index) .ml-acc-body p {
  font-size: .875rem;
  color: var(--slate);
  line-height: 1.68;
}

:where(.pg-index) .ml-features__img-wrap {
  position: sticky;
  top: 6rem;
}

:where(.pg-index) .ml-features__img {
  width: 100%;
  border-radius: var(--r-xl);
  display: block;
  border: 1px solid rgba(12,26,46,.09);
  box-shadow: 0 16px 40px rgba(12,26,46,.08);
}

:where(.pg-index) .ml-features__caption {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #f4f6f8;
  border-radius: var(--r);
  font-size: .82rem;
  color: var(--slate);
  line-height: 1.6;
}

:where(.pg-index) .ml-blog {
  background: var(--bg-1);
  padding: 5.5rem 0;
  border-top: 1px solid rgba(34,76,108,.28);
}

:where(.pg-index) .ml-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

:where(.pg-index) .ml-blog-card {
  background: var(--bg-2);
  border: 1px solid rgba(34,76,108,.42);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .22s, transform .22s;
}

:where(.pg-index) .ml-blog-card:hover {
  border-color: rgba(0,173,238,.45);
  transform: translateY(-3px);
}

:where(.pg-index) .ml-blog-card__thumb {
  height: 185px;
  overflow: hidden;
}

:where(.pg-index) .ml-blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .42s ease;
}

:where(.pg-index) .ml-blog-card:hover .ml-blog-card__thumb img {
  transform: scale(1.05);
}

:where(.pg-index) .ml-blog-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

:where(.pg-index) .ml-blog-card__tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grad-end);
}

:where(.pg-index) .ml-blog-card__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
}

:where(.pg-index) .ml-blog-card__desc {
  font-size: .80rem;
  color: rgba(228,230,232,.44);
  line-height: 1.65;
  flex: 1;
}

:where(.pg-index) .ml-blog-card__link {
  font-size: .78rem;
  font-weight: 700;
  color: var(--grad-end);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .25rem;
  transition: gap .18s;
}

:where(.pg-index) .ml-blog-card:hover .ml-blog-card__link {
  gap: .55rem;
}

@media (max-width: 1024px) {
  :where(.pg-index) .ml-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.pg-index) .ml-best__layout {
    grid-template-columns: 1fr;
  }

  :where(.pg-index) .ml-best__center-img {
    display: none;
  }

  :where(.pg-index) .ml-counters__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.pg-index) .ml-features__layout {
    grid-template-columns: 1fr;
  }

  :where(.pg-index) .ml-features__img-wrap {
    position: static;
  }

  :where(.pg-index) .ml-demo__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  :where(.pg-index) .ml-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :where(.pg-index) .ml-why__grid {
    grid-template-columns: 1fr;
  }

  :where(.pg-index) .ml-best__col {
    gap: 1.25rem;
  }

  :where(.pg-index) .ml-counters__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.pg-index) .ml-form-row {
    grid-template-columns: 1fr;
  }

  :where(.pg-index) .ml-field--full {
    grid-column: span 1;
  }

  :where(.pg-index) .ml-blog__grid {
    grid-template-columns: 1fr;
  }
}

:where(.pg-index) .feat-section {
  padding-block: 0 !important;
}

:where(.pg-index) .feat-section .container {
  padding-inline: 0 !important;
}

:where(.pg-index) .oracle-split {
  border: none !important;
  border-radius: 0;
}

:where(.pg-index) .feat-section:not(.feat-dark) .container {
  padding-block: 3.5rem;
}

:where(.pg-index) .feat-section:not(.feat-dark) .oracle-split {
  border: 1.5px solid rgba(12, 120, 212, 0.18) !important;
  border-radius: 20px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 24px rgba(12,26,46,.06);
  gap: 0 !important;
}

:where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__text {
  padding: 2.75rem 2.5rem;
}

:where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__visual {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

:where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__img {
  height: 100% !important;
  min-height: 400px;
  object-fit: contain;
  display: block;
  padding:20px;
}

:where(.pg-index) .feat-dark .container {
  padding-block: 3.5rem;
}

:where(.pg-index) .feat-dark .oracle-split {
  border: 1.5px solid rgba(0, 173, 238, 0.18) !important;
  border-radius: 20px !important;
  overflow: hidden;
  gap: 0 !important;
}

:where(.pg-index) .feat-dark .oracle-split__text {
  padding: 2.75rem 2.5rem;
}

:where(.pg-index) .feat-dark .oracle-split__visual {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

:where(.pg-index) .feat-dark .oracle-split__img {
  height: 100% !important;
  min-height: 400px;
  object-fit: contain;
  display: block;
  padding:20px;
}

:where(.pg-index) .feat-dark .oracle-split__h {
  color: var(--white) !important;
}

:where(.pg-index) .feat-dark .oracle-split__lead {
  color: rgba(228,230,232,.60) !important;
}

@media (max-width: 768px) {
  :where(.pg-index) .feat-section:not(.feat-dark) .oracle-split,
  :where(.pg-index) .feat-dark .oracle-split {
    border-radius: 16px !important;
  }

  :where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__img,
  :where(.pg-index) .feat-dark .oracle-split__img {
    min-height: 240px !important;
  }

  :where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__text,
  :where(.pg-index) .feat-dark .oracle-split__text {
    padding: 1.75rem 1.5rem;
  }

  :where(.pg-index) .container {
    max-width: 94% !important;
  }
}

:where(.pg-index) .feat-intro .sec-hd h2,
:where(.pg-index) .feat-intro .sec-hd p {
  opacity: 0;
  transform: translateY(36px);
  transition:
          opacity  .72s cubic-bezier(.22,1,.36,1),
          transform .72s cubic-bezier(.22,1,.36,1);
}

:where(.pg-index) .feat-intro .sec-hd p {
  transition-delay: 160ms;
}

:where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__text {
  opacity: 0;
  transform: translateX(-48px);
  transition:
          opacity  .72s cubic-bezier(.22,1,.36,1),
          transform .72s cubic-bezier(.22,1,.36,1);
}

:where(.pg-index) .feat-section:not(.feat-dark) .oracle-split__visual {
  opacity: 0;
  transform: translateX(48px);
  transition:
          opacity  .72s cubic-bezier(.22,1,.36,1) 210ms,
          transform .72s cubic-bezier(.22,1,.36,1) 210ms;
}

:where(.pg-index) .feat-dark .oracle-split__text {
  opacity: 0;
  transform: translateX(48px);
  transition:
          opacity  .72s cubic-bezier(.22,1,.36,1),
          transform .72s cubic-bezier(.22,1,.36,1);
}

:where(.pg-index) .feat-dark .oracle-split__visual {
  opacity: 0;
  transform: translateX(-48px);
  transition:
          opacity  .72s cubic-bezier(.22,1,.36,1) 210ms,
          transform .72s cubic-bezier(.22,1,.36,1) 210ms;
}

:where(.pg-index) .feat-intro.anim-in .sec-hd h2,
:where(.pg-index) .feat-intro.anim-in .sec-hd p,
:where(.pg-index) .feat-section.anim-in .oracle-split__text,
:where(.pg-index) .feat-section.anim-in .oracle-split__visual {
  opacity: 1;
  transform: none;
}

:where(.pg-index) .feat-section .oracle-split__eyebrow {
  opacity: 0;
  transform: translateY(14px);
  transition:
          opacity .5s ease,
          transform .5s cubic-bezier(.22,1,.36,1);
}

:where(.pg-index) .feat-section.anim-in .oracle-split__eyebrow {
  opacity: 1;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grad-end);
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  border: 1px solid var(--grad-end);
  padding: .22rem .85rem;
  border-radius: 100px;
  margin-bottom: .9rem;
  opacity: 1;
   
}

:where(.pg-index) .oracle-feat-list li {
  opacity: 0;
  transform: translateY(18px);
  transition:
          opacity .55s cubic-bezier(.22,1,.36,1),
          transform .55s cubic-bezier(.22,1,.36,1);
}

:where(.pg-index) .feat-section.anim-in .oracle-feat-list li:nth-child(1) {
  opacity:1;
  transform:none;
  transition-delay:.30s;
}

:where(.pg-index) .feat-section.anim-in .oracle-feat-list li:nth-child(2) {
  opacity:1;
  transform:none;
  transition-delay:.42s;
}

:where(.pg-index) .feat-section.anim-in .oracle-feat-list li:nth-child(3) {
  opacity:1;
  transform:none;
  transition-delay:.54s;
}

:where(.pg-index) .feat-section.anim-in .oracle-feat-list li:nth-child(4) {
  opacity:1;
  transform:none;
  transition-delay:.66s;
}

:where(.pg-index) .oracle-cta-link {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease .65s, transform .5s cubic-bezier(.22,1,.36,1) .65s,
                    color var(--ease), gap var(--ease);
}

:where(.pg-index) .feat-section.anim-in .oracle-cta-link {
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-index) .feat-intro .sec-hd h2,
  :where(.pg-index) .feat-intro .sec-hd p,
  :where(.pg-index) .feat-section .oracle-split__text,
  :where(.pg-index) .feat-section .oracle-split__visual,
  :where(.pg-index) .feat-section .oracle-split__eyebrow,
  :where(.pg-index) .oracle-feat-list li,
  :where(.pg-index) .oracle-cta-link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__crumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: rgba(228,230,232,.5);
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__crumb a {
  color: rgba(228,230,232,.5);
  text-decoration: none;
  transition: color .18s;
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__crumb a:hover {
  color: rgba(228,230,232,.85);
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__crumb [aria-current] {
  color: var(--grad-end);
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__crumb + .cr__eyebrow {
  margin-bottom: 0;
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr--single .cr__slide {
  height: clamp(440px, 58vh, 600px);
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr--single .cr__slide {
  flex: 0 0 100%;
  max-width: 100%;
}

:where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr--single .cr__split-left {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  :where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr--single .cr__slide {
    height: auto;
  }

  :where(.pg-billing, .pg-inventory, .pg-platform, .pg-operation, .pg-portal, .pg-workflow, .pg-pricing, .pg-download, .pg-contact, .pg-blog, .pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr--single .cr__split-left {
    width: 100%;
  }
}

/* ── Page keyframes ── */
@keyframes phone-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,173,238,.3); } 50% { box-shadow: 0 0 0 10px rgba(0,173,238,.0); } }

@keyframes result-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0; } }

@keyframes cr-fill { from { width: 0; } to { width: 50%; } }

@keyframes pulse--inventory { 70% { box-shadow: 0 0 0 6px rgba(16,180,130,0); } 100% { box-shadow: 0 0 0 0 rgba(16,180,130,0); } }

@keyframes pillar-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

@keyframes pi-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

@keyframes rsr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@keyframes v3-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }


/* ── Utilities (replace former inline style="" attributes) ── */
.u-pt-0 { padding-top:0 !important; }
.u-mb-2-5 { margin-bottom:2.5rem !important; }
.u-mb-1 { margin-bottom:1rem !important; }
.u-icon-14 { width:14px !important; height:14px !important; opacity:.7 !important; }
.u-icon-24 { width:24px !important; height:24px !important; object-fit:contain !important; }
.u-pill-tight { flex:0 !important; white-space:nowrap !important; padding-inline:.85rem !important; }
.u-stack-s5 { display:flex !important; flex-direction:column !important; gap:var(--s5) !important; margin-bottom:var(--s8) !important; }

/* ── Pricing: plan detail (summary card + grouped features) ── */
:where(.pg-pricing, .pg-download) .pp { padding-block: var(--s20); background: var(--white); scroll-margin-top: 80px; }
:where(.pg-pricing, .pg-download) .pp-grid { display: grid; grid-template-columns: minmax(280px, .8fr) 1.6fr; gap: var(--s8); align-items: start; max-width: 1180px; margin-inline: auto; }
:where(.pg-pricing, .pg-download) .pp-plan { position: sticky; top: 96px; background: var(--bg-2); color: var(--white); border-radius: var(--r-xl); padding: var(--s8); box-shadow: var(--sh-lg); overflow: hidden; }
:where(.pg-pricing, .pg-download) .pp-plan::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-pricing, .pg-download) .pp-plan__badge { display: inline-flex; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grad-end); border: 1px solid rgba(0,173,238,.35); border-radius: 100px; padding: .25rem .8rem; margin-bottom: var(--s4); }
:where(.pg-pricing, .pg-download) .pp-plan h3 { font-size: var(--t-2xl); font-weight: 800; line-height: 1.2; margin-bottom: var(--s2); }
:where(.pg-pricing, .pg-download) .pp-plan__lead { font-size: var(--t-sm); color: rgba(228,230,232,.65); line-height: 1.65; margin-bottom: var(--s6); }
:where(.pg-pricing, .pg-download) .pp-plan__facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--border-d); padding-block: var(--s5); margin-bottom: var(--s5); text-align: center; }
:where(.pg-pricing, .pg-download) .pp-plan__facts div + div { border-left: 1px solid var(--border-d); }
:where(.pg-pricing, .pg-download) .pp-plan__facts dt { font-size: var(--t-2xl); font-weight: 800; line-height: 1.1; }
:where(.pg-pricing, .pg-download) .pp-plan__facts dd { font-size: var(--t-xs); color: rgba(228,230,232,.55); margin-top: 4px; }
:where(.pg-pricing, .pg-download) .pp-plan__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
:where(.pg-pricing, .pg-download) .pp-plan__tags li { font-size: var(--t-xs); font-weight: 600; color: rgba(228,230,232,.8); background: rgba(255,255,255,.06); border: 1px solid var(--border-d); padding: .25rem .7rem; border-radius: 100px; }
:where(.pg-pricing, .pg-download) .pp-plan__cta { display: flex; justify-content: center; gap: var(--s2); padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--grad); color: var(--white); font-weight: 700; text-decoration: none; transition: opacity var(--ease); }
:where(.pg-pricing, .pg-download) .pp-plan__cta:hover { opacity: .9; }
:where(.pg-pricing, .pg-download) .pp-plan__note { font-size: var(--t-xs); color: rgba(228,230,232,.5); text-align: center; margin-top: var(--s3); }
:where(.pg-pricing, .pg-download) .pp-feats { display: grid; gap: var(--s5); }
:where(.pg-pricing, .pg-download) .pp-group { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); }
:where(.pg-pricing, .pg-download) .pp-group__hd { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--border); }
:where(.pg-pricing, .pg-download) .pp-ic { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--grad); display: grid; place-items: center; flex-shrink: 0; }
:where(.pg-pricing, .pg-download) .pp-ic img { width: 20px; height: 20px; object-fit: contain; }
:where(.pg-pricing, .pg-download) .pp-group h3 { font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
:where(.pg-pricing, .pg-download) .pp-group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); }
:where(.pg-pricing, .pg-download) .pp-group li { display: flex; gap: var(--s3); font-size: var(--t-sm); color: var(--slate); line-height: 1.6; }
:where(.pg-pricing, .pg-download) .pp-group li strong { color: var(--ink); font-weight: 600; }
:where(.pg-pricing, .pg-download) .pp-chk { width: 20px; height: 20px; border-radius: 50%; background: rgba(18,135,204,.1); color: var(--grad-mid); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
:where(.pg-pricing, .pg-download) .pp-chk svg { width: 11px; height: 11px; }
@media (max-width: 960px) {
  :where(.pg-pricing, .pg-download) .pp { padding-block: var(--s16); }
  :where(.pg-pricing, .pg-download) .pp-grid { grid-template-columns: 1fr; }
  :where(.pg-pricing, .pg-download) .pp-plan { position: static; }
}
@media (max-width: 640px) {
  :where(.pg-pricing, .pg-download) .pp { padding-block: var(--s12); }
  :where(.pg-pricing, .pg-download) .pp-group ul { grid-template-columns: 1fr; }
  :where(.pg-pricing, .pg-download) .pp-plan, :where(.pg-pricing, .pg-download) .pp-group { padding: var(--s6) var(--s5); }
}

/* ── Downloads page (download.html) ── */
:where(.pg-download) .dl-pain { padding-block: var(--s20) var(--s12); background: var(--white); }
:where(.pg-download) .dl-pain__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); max-width: 1180px; margin-inline: auto; }
:where(.pg-download) .dl-pain__grid li { border: 1px solid var(--border); border-top: 3px solid var(--grad-mid); border-radius: var(--r-xl); padding: var(--s6); text-align: center; }
:where(.pg-download) .dl-pain__hd { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-bottom: var(--s3); }
:where(.pg-download) .dl-pain__hd h3 { font-size: var(--t-base); font-weight: 700; color: var(--ink); text-align: left; }
:where(.pg-download) .dl-pain__grid p { font-size: var(--t-sm); color: var(--slate); line-height: 1.65; }
:where(.pg-download) .dl-res { padding-block: var(--s12) var(--s20); background: var(--paper); scroll-margin-top: 80px; }
:where(.pg-download) .dl-res__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); max-width: 1080px; margin-inline: auto; }
:where(.pg-download) .dl-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ease), box-shadow var(--ease); }
:where(.pg-download) .dl-card:hover { transform: translateY(-3px); box-shadow: var(--sh); }
:where(.pg-download) .dl-card__media { display: block; aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
:where(.pg-download) .dl-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
:where(.pg-download) a.dl-card__media:hover img { transform: scale(1.03); }
:where(.pg-download) .dl-card__media video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
:where(.pg-download) .dl-card__body { padding: var(--s6); display: flex; flex-direction: column; flex: 1; }
:where(.pg-download) .dl-card__meta { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-xs); color: var(--slate); margin-bottom: var(--s3); }
:where(.pg-download) .dl-card__type { font-weight: 800; letter-spacing: .06em; color: var(--white); background: var(--bg-5); padding: .2rem .55rem; border-radius: var(--r); }
:where(.pg-download) .dl-card h3 { font-size: var(--t-xl); font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
:where(.pg-download) .dl-card p { font-size: var(--t-sm); color: var(--slate); line-height: 1.65; margin-bottom: var(--s6); }
:where(.pg-download) .dl-card__btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: .85rem 1.2rem; border-radius: var(--r-lg); background: var(--grad); color: var(--white); font-weight: 700; text-decoration: none; transition: opacity var(--ease); }
:where(.pg-download) .dl-card__btn:hover { opacity: .9; }
@media (max-width: 960px) {
  :where(.pg-download) .dl-pain__grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 760px) {
  :where(.pg-download) .dl-res__grid { grid-template-columns: 1fr; max-width: 560px; }
  :where(.pg-download) .dl-pain { padding-block: var(--s12) var(--s8); }
  :where(.pg-download) .dl-res { padding-block: var(--s8) var(--s12); }
}

/* ── Contact page (contact.html) ── */
:where(.pg-contact) .pp-ic { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--grad); display: grid; place-items: center; flex-shrink: 0; }
:where(.pg-contact) .pp-ic img { width: 20px; height: 20px; object-fit: contain; }
:where(.pg-contact) .cx { padding-block: var(--s20) var(--s16); background: var(--white); scroll-margin-top: 80px; }
:where(.pg-contact) .cx-grid { display: grid; grid-template-columns: minmax(280px, .85fr) 1.4fr; gap: var(--s8); max-width: 1120px; margin-inline: auto; align-items: stretch; }
:where(.pg-contact) .cx-info { position: relative; background: var(--bg-2); color: var(--white); border-radius: var(--r-xl); padding: var(--s8); overflow: hidden; box-shadow: var(--sh-lg); }
:where(.pg-contact) .cx-info::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-contact) .cx-info__badge { display: inline-flex; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grad-end); border: 1px solid rgba(0,173,238,.35); border-radius: 100px; padding: .25rem .8rem; margin-bottom: var(--s4); }
:where(.pg-contact) .cx-info h3 { font-size: var(--t-2xl); font-weight: 800; margin-bottom: var(--s2); }
:where(.pg-contact) .cx-info__lead { font-size: var(--t-sm); color: rgba(228,230,232,.65); line-height: 1.65; margin-bottom: var(--s6); }
:where(.pg-contact) .cx-line, :where(.pg-contact) .cx-demo { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid var(--border-d); color: var(--white); text-decoration: none; transition: border-color var(--ease), background var(--ease); }
:where(.pg-contact) .cx-line:hover, :where(.pg-contact) .cx-demo:hover { border-color: var(--grad-end); background: rgba(0,173,238,.08); }
:where(.pg-contact) .cx-line small, :where(.pg-contact) .cx-demo small { display: block; font-size: var(--t-xs); color: rgba(228,230,232,.55); }
:where(.pg-contact) .cx-line span:last-child { font-weight: 700; word-break: break-all; }
:where(.pg-contact) .cx-line__ic { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--grad); display: grid; place-items: center; flex-shrink: 0; }
:where(.pg-contact) .cx-line__ic svg { width: 20px; height: 20px; color: var(--white); }
:where(.pg-contact) .cx-demos { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px dashed var(--border-d); }
:where(.pg-contact) .cx-demo strong { display: block; font-weight: 700; }
:where(.pg-contact) .cx-demo > svg { margin-left: auto; color: var(--grad-end); flex-shrink: 0; }
:where(.pg-contact) .cx-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s8); display: flex; flex-direction: column; gap: var(--s5); }
:where(.pg-contact) .cx-form h3 { font-size: var(--t-xl); font-weight: 700; color: var(--ink); }
:where(.pg-contact) .cx-field { display: flex; flex-direction: column; gap: 6px; }
:where(.pg-contact) .cx-field label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
:where(.pg-contact) .cx-field label span { color: #DC4637; }
:where(.pg-contact) .cx-field input, :where(.pg-contact) .cx-field textarea { font: inherit; font-size: var(--t-base); color: var(--ink); background: #F7F9FB; border: 1px solid var(--border); border-radius: var(--r-lg); padding: .8rem 1rem; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); width: 100%; box-sizing: border-box; }
:where(.pg-contact) .cx-field textarea { resize: vertical; min-height: 130px; }
:where(.pg-contact) .cx-field input:focus, :where(.pg-contact) .cx-field textarea:focus { outline: none; background: var(--white); border-color: var(--grad-mid); box-shadow: 0 0 0 3px rgba(18,135,204,.15); }
:where(.pg-contact) .cx-field.has-error input, :where(.pg-contact) .cx-field.has-error textarea { border-color: #DC4637; box-shadow: 0 0 0 3px rgba(220,70,55,.12); }
:where(.pg-contact) .cx-field__err { font-size: var(--t-xs); color: #DC4637; min-height: 1em; }
:where(.pg-contact) .cx-form__btn { font: inherit; font-weight: 700; color: var(--white); background: var(--grad); border: 0; border-radius: var(--r-lg); padding: .95rem 1.4rem; cursor: pointer; transition: opacity var(--ease); }
:where(.pg-contact) .cx-form__btn:hover { opacity: .92; }
:where(.pg-contact) .cx-form__status { font-size: var(--t-sm); min-height: 1.2em; margin-top: calc(var(--s2) * -1); }
:where(.pg-contact) .cx-form__status.is-error { color: #DC4637; }
:where(.pg-contact) .cx-form__status.is-ok { color: #0E9F6E; }
:where(.pg-contact) .cx-form__note { font-size: var(--t-xs); color: var(--slate); margin-top: calc(var(--s3) * -1); }
:where(.pg-contact) .cx-loc { padding-block: var(--s16) var(--s20); background: var(--paper); scroll-margin-top: 80px; }
:where(.pg-contact) .cx-loc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); max-width: 1120px; margin-inline: auto; }
:where(.pg-contact) .cx-office { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--grad-mid); border-radius: var(--r-xl); padding: var(--s8); display: flex; flex-direction: column; gap: var(--s4); }
:where(.pg-contact) .cx-office__hd { display: flex; align-items: center; gap: var(--s4); }
:where(.pg-contact) .cx-office__tag { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grad-mid); }
:where(.pg-contact) .cx-office h3 { font-size: var(--t-xl); font-weight: 700; color: var(--ink); }
:where(.pg-contact) .cx-office address { font-style: normal; font-size: var(--t-base); color: var(--steel); line-height: 1.7; }
:where(.pg-contact) .cx-office__rows { list-style: none; display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px dashed var(--border); }
:where(.pg-contact) .cx-office__rows li { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); color: var(--slate); }
:where(.pg-contact) .cx-office__rows img { opacity: .75; flex-shrink: 0; }
:where(.pg-contact) .cx-office__rows a { color: var(--grad-mid); font-weight: 600; text-decoration: none; }
:where(.pg-contact) .cx-office__rows a:hover { text-decoration: underline; }
:where(.pg-contact) .cx-office__map { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 700; color: var(--grad-mid); text-decoration: none; }
:where(.pg-contact) .cx-office__map:hover { text-decoration: underline; }
@media (max-width: 900px) {
  :where(.pg-contact) .cx-grid, :where(.pg-contact) .cx-loc__grid { grid-template-columns: 1fr; max-width: 620px; }
  :where(.pg-contact) .cx { padding-block: var(--s16) var(--s12); }
}
@media (max-width: 640px) {
  :where(.pg-contact) .cx-info, :where(.pg-contact) .cx-form, :where(.pg-contact) .cx-office { padding: var(--s6) var(--s5); }
  :where(.pg-contact) .cx { padding-block: var(--s12) var(--s10); }
  :where(.pg-contact) .cx-loc { padding-block: var(--s10) var(--s12); }
}

/* ── Blog page (blog.html) ── */
:where(.pg-blog) .bl { padding-block: var(--s20); background: var(--paper); scroll-margin-top: 80px; }
:where(.pg-blog) .bl-feat { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; max-width: 1180px; margin: 0 auto var(--s8); box-shadow: var(--sh); }
:where(.pg-blog) .bl-feat__media, :where(.pg-blog) .bl-card__media { position: relative; display: block; overflow: hidden; background: var(--bg-2); }
:where(.pg-blog) .bl-feat__media { min-height: 360px; }
:where(.pg-blog) .bl-feat__media img, :where(.pg-blog) .bl-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
:where(.pg-blog) a.bl-feat__media:hover img, :where(.pg-blog) a.bl-card__media:hover img { transform: scale(1.04); }
:where(.pg-blog) .bl-tag { position: absolute; top: var(--s4); left: var(--s4); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--white); background: rgba(11,24,41,.78); backdrop-filter: blur(6px); padding: .3rem .75rem; border-radius: 100px; }
:where(.pg-blog) .bl-feat__body { padding: var(--s10); display: flex; flex-direction: column; justify-content: center; }
:where(.pg-blog) .bl-feat__label { display: inline-flex; width: fit-content; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grad-mid); border: 1px solid rgba(18,135,204,.35); border-radius: 100px; padding: .25rem .8rem; margin-bottom: var(--s4); }
:where(.pg-blog) .bl-feat h2 { font-size: clamp(1.4rem, 2.2vw, var(--t-3xl)); font-weight: 800; line-height: 1.2; margin: var(--s3) 0 var(--s4); }
:where(.pg-blog) .bl-feat h2 a, :where(.pg-blog) .bl-card h3 a { color: var(--ink); text-decoration: none; transition: color var(--ease); }
:where(.pg-blog) .bl-feat h2 a:hover, :where(.pg-blog) .bl-card h3 a:hover { color: var(--grad-mid); }
:where(.pg-blog) .bl-feat p { font-size: var(--t-base); color: var(--slate); line-height: 1.75; margin-bottom: var(--s6); display: -webkit-box-webkit-line-clamp 6; -webkit-box-orient: vertical; overflow: hidden; }
:where(.pg-blog) .bl-meta { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--slate); }
:where(.pg-blog) .bl-meta__read { display: inline-flex; align-items: center; gap: 4px; }
:where(.pg-blog) .bl-read { display: inline-flex; align-items: center; gap: var(--s2); width: fit-content; font-size: var(--t-sm); font-weight: 700; color: var(--grad-mid); text-decoration: none; }
:where(.pg-blog) .bl-read svg { transition: transform var(--ease); }
:where(.pg-blog) a.bl-read:hover svg { transform: translateX(3px); }
:where(.pg-blog) .bl-read--soon { color: var(--slate); font-weight: 600; }
:where(.pg-blog) .bl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); max-width: 1180px; margin-inline: auto; }
:where(.pg-blog) .bl-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ease), box-shadow var(--ease); }
:where(.pg-blog) .bl-card:hover { transform: translateY(-3px); box-shadow: var(--sh); }
:where(.pg-blog) .bl-card__media { aspect-ratio: 16 / 10; }
:where(.pg-blog) .bl-card__body { padding: var(--s5) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
:where(.pg-blog) .bl-card h3 { font-size: var(--t-base); font-weight: 700; line-height: 1.4; color: var(--ink); }
:where(.pg-blog) .bl-card p { font-size: var(--t-sm); color: var(--slate); line-height: 1.6; display: -webkit-box-webkit-line-clamp 4; -webkit-box-orient: vertical; overflow: hidden; }
:where(.pg-blog) .bl-card .bl-read { margin-top: auto; }
@media (max-width: 1100px) { :where(.pg-blog) .bl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  :where(.pg-blog) .bl-feat { grid-template-columns: 1fr; }
  :where(.pg-blog) .bl-feat__media { min-height: 0; aspect-ratio: 16 / 9; }
  :where(.pg-blog) .bl-feat__body { padding: var(--s8) var(--s6); }
  :where(.pg-blog) .bl { padding-block: var(--s16); }
}
@media (max-width: 600px) {
  :where(.pg-blog) .bl-grid { grid-template-columns: 1fr; }
  :where(.pg-blog) .bl { padding-block: var(--s12); }
  :where(.pg-blog) .bl-feat__body { padding: var(--s6) var(--s5); }
}

/* ── Article page (latest-article.html) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-sm); color: rgba(228,230,232,.65); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__meta span { display: inline-flex; align-items: center; gap: 6px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr__meta svg { color: var(--grad-end); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .cr--article .cr__h { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-side__hd { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--s3); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-share__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-share__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 .7rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); color: var(--steel); font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; text-decoration: none; transition: color var(--ease), border-color var(--ease), background var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-share__btn:hover { color: var(--grad-mid); border-color: var(--grad-mid); background: rgba(18,135,204,.05); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-share__btn.is-copied { color: #0E9F6E; border-color: #0E9F6E; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related { background: var(--paper); padding-block: var(--s16); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related__hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4); max-width: var(--max);  margin: 0 auto var(--s8); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related__hd h2 { font-size: clamp(1.5rem, 2.6vw, var(--t-3xl)); font-weight: 800; color: var(--bg-5); text-align: center;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); max-width: var(--max); margin-inline: auto; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ease), box-shadow var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel:hover { transform: translateY(-3px); box-shadow: var(--sh); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__media:hover img { transform: scale(1.04); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__tag { position: absolute; top: var(--s3); left: var(--s3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--white); background: rgba(11,24,41,.78); padding: .25rem .7rem; border-radius: 100px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__body time { font-size: var(--t-xs); color: var(--slate); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel h3 { font-size: var(--t-base); font-weight: 700; line-height: 1.4; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel h3 a { color: var(--ink); text-decoration: none; transition: color var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel h3 a:hover { color: var(--grad-mid); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__read { display: inline-flex; align-items: center; gap: var(--s2); width: fit-content; font-size: var(--t-sm); font-weight: 700; color: var(--grad-mid); text-decoration: none; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__body .ar-rel__read { margin-top: auto; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__read svg { transition: transform var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-rel__read:hover svg { transform: translateX(3px); }
@media (max-width: 1024px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related__grid { grid-template-columns: 1fr; }
}

/* ── Article body (latest-article.html) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab { padding-block: var(--s16) var(--s20); background: var(--white); scroll-margin-top: 80px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-wrap { max-width: var(--max); margin-inline: auto; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-text { max-width: var(--max); margin-inline: auto; font-size: 1.075rem; color: var(--steel); line-height: 1.85; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-text > p + p { margin-top: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-text strong { color: var(--ink); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-bar { max-width: var(--max); margin: 0 auto var(--s10); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s5); border-bottom: 1px solid var(--border); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-hd { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-share { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-sec { margin-top: var(--s16); scroll-margin-top: 96px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-sec__hd { margin: 0 0 var(--s6); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-kicker { display: contents; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-5); margin-bottom: var(--s2); }
/* Reality: text + dark "still running on" card */
/* Pain points 2x2 */
/* Wareflux support band */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band { background: var(--bg-2); color: var(--white); border-radius: var(--r-xl); padding: var(--s10); display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s10); align-items: center; position: relative; overflow: hidden; max-width:var(--max); margin: 0 auto; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band .ab-kicker { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band h2 { font-size: clamp(1.5rem, 2.6vw, var(--t-3xl)); font-weight: 800; line-height: 1.2; margin-bottom: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band p { font-size: var(--t-base); color: rgba(228,230,232,.7); line-height: 1.75; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band p + p { margin-top: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band p strong { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-benefits { list-style: none; display: grid; gap: var(--s3); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-benefits li { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: rgba(255,255,255,.05); border: 1px solid var(--border-d); font-weight: 600; font-size: var(--t-sm); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-benefits li img { width:25px; height:20px;}
/* :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-benefits li::before { content: '✓'; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--grad); font-size: .75rem; font-weight: 800; } */
/* Final thought */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-foot { max-width: 760px; margin: var(--s12) auto 0; padding-top: var(--s6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-back { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--grad-mid); text-decoration: none; }
@media (max-width: 900px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band { grid-template-columns: 1fr; padding: var(--s8); gap: var(--s6); }
}
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab { padding-block: var(--s10) var(--s12); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-text { font-size: 1rem; }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-sec { margin-top: var(--s12); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-band { padding: var(--s6) var(--s5); }
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Article intro + Reality section (redesign) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s10); align-items: start; max-width:var(--max); margin:0 auto; width:100%;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__lead { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.55; color: var(--bg-5); padding-left: var(--s5); border-left: 4px solid var(--bg-5); margin-bottom: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__text p:not(.ab-intro__lead) { font-size: 1.075rem; color: var(--steel); line-height: 1.85; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 { position: sticky; top: 96px; background: var(--bg-2); color: var(--white); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--sh-lg); overflow: hidden; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 .ab-hd { color: var(--white); text-align: center; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 ol { list-style: none; counter-reset: toc; margin-top: var(--s4); display: grid; gap:10%;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 li { counter-increment: toc; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 li + li { border-top: 1px solid var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 a { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s4) 0; color: var(--white); font-size: var(--t-sm); font-weight: 600; text-decoration: none; transition: color var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 a::before { content: counter(toc, decimal-leading-zero); font-size: var(--t-xs); font-weight: 800; color: var(--grad-end); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 a::after { content: '→'; color: rgba(228,230,232,.35); transition: transform var(--ease), color var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 a:hover { color: var(--grad-end); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 a:hover::after { color: var(--grad-end); transform: translateX(3px); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--white); max-width: var(--max); margin: 0 auto; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s10); padding: var(--s10); align-items: start;  max-width:var(--max);}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__top h2 { font-size: clamp(1.5rem, 2.6vw, var(--t-3xl)); font-weight: 800; color: var(--bg-5); line-height: 1.2; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__top p { font-size: 1.075rem; color: var(--steel); line-height: 1.85; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-cities { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); list-style: none; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-cities li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--grad-mid); background: rgba(18,135,204,.08); padding: .3rem .75rem; border-radius: 100px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-cities li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-end); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__bottom { background: var(--paper); padding: var(--s8) var(--s10) var(--s10); border-top: 1px solid var(--border); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__bottom > .ab-hd { display: block; margin-bottom: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still li { display: flex; align-items: center; gap: var(--s4); background: var(--white); border: 1px solid var(--border); border-top: 3px solid #DC4637; border-radius: var(--r-lg); padding: var(--s5); font-weight: 700; color: var(--ink); line-height: 1.4; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still__ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-lg); display: grid; place-items: center; color: #DC4637; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still__ic svg { width: 20px; height: 20px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-verdict { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: rgba(220,70,55,.06); border: 1px solid rgba(220,70,55,.2); color: #B7352A; font-weight: 700; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-verdict::before { content: '!'; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #DC4637; color: var(--white); font-size: .8rem; font-weight: 800; }
@media (max-width: 960px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro, :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__top { grid-template-columns: 1fr; gap: var(--s6); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 { position: static; }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__top { padding: var(--s6) var(--s5); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__bottom { padding: var(--s6) var(--s5); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__lead { padding-left: var(--s4); }
}

/* ── Article: legacy risks (redesign) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks { display: grid; grid-template-columns: .85fr 1.6fr; gap: var(--s10); align-items: start; max-width:var(--max); width: 100%; margin: 0 auto; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__intro { position: sticky; top: 96px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__intro h2 { font-size: clamp(1.5rem, 2.6vw, var(--t-3xl)); font-weight: 800; color: var(--bg-5); line-height: 1.2; margin-bottom: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__intro > p { font-size: var(--t-base); color: var(--slate); line-height: 1.7; margin-bottom: var(--s6); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__stat { position: relative; background: var(--bg-2); color: var(--white); border-radius: var(--r-xl); padding: var(--s6); overflow: hidden; box-shadow: var(--sh-lg); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__stat b { display: block; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; line-height: 1; text-align:center; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--s3); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__stat span { font-size: var(--t-sm); color: rgba(228,230,232,.7); line-height: 1.6; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__list { list-style: none; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk { display: grid; grid-template-columns: 64px 1fr; gap: var(--s5); padding: var(--s6) var(--s8) var(--s6) var(--s6); position: relative; transition: background var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk + .ab-risk { border-top: 1px solid var(--border); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); opacity: 0; transition: opacity var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk:hover { background: #F7F9FB; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk:hover::before { opacity: 1; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__num { font-size: 2.25rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(18,135,204,.45); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__hd { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__hd img { width:20px; height:20px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-lg); background: var(--grad); color: var(--white); display: grid; place-items: center; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__ic img {width:25px; height:25px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__ic svg { width: 20px; height: 20px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk h3 { font-size: var(--t-lg); font-weight: 700; color: var(--bg-5); line-height: 1.3; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk p { font-size: var(--t-sm); color: var(--slate); line-height: 1.75; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk p strong { color: var(--ink); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__tags li { font-size: var(--t-xs); font-weight: 600; color: var(--white); background: var(--grad); border: 1px solid var(--bg-5); padding: .2rem .65rem; border-radius: 100px; }

@media (max-width: 960px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks { grid-template-columns: 1fr; gap: var(--s6); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__intro { position: static; }
}
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s5); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__num { font-size: 1.75rem; }
}

/* ── Article: final thought (redesign) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s10); align-items: center; padding: var(--s12) var(--s10); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 0%, rgba(0,173,238,.22), transparent 55%), var(--bg-2); color: var(--white); overflow: hidden; box-shadow: var(--sh-lg); max-width: var(--max); margin: 0 auto;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft::after { content: '“'; position: absolute; right: var(--s8); top: -.2em; font-size: 16rem; line-height: 1; font-weight: 800; color: rgba(255,255,255,.04); pointer-events: none; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft .ab-kicker { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft h2 { font-size: clamp(1.4rem, 2.4vw, var(--t-3xl)); font-weight: 800; color: rgba(228,230,232,.9); margin-bottom: var(--s2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__intro { font-size: var(--t-base); color: rgba(228,230,232,.65); margin-bottom: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__q { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; margin-bottom: var(--s6); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices li { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 700; padding: .55rem 1rem; border-radius: 100px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices .is-grow { background: rgba(16,180,130,.15); color: #3FD3A4; border: 1px solid rgba(16,180,130,.35); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices .is-grow span { background: #10B482; color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices .is-hold { background: rgba(220,70,55,.12); color: #F27B6F; border: 1px solid rgba(220,70,55,.3); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__choices .is-hold span { background: #DC4637; color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__side { position: relative; z-index: 1; padding: var(--s6); border-radius: var(--r-xl); background: rgba(255,255,255,.05); border: 1px solid var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__side p { font-size: var(--t-base); color: rgba(228,230,232,.75); line-height: 1.75; margin-bottom: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__side strong { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__cta { display: inline-flex; align-items: center; gap: var(--s2); padding: .8rem 1.3rem; border-radius: var(--r-lg); background: var(--grad); color: var(--white); font-weight: 700; text-decoration: none; transition: opacity var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__cta:hover { opacity: .9; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__cta svg { transition: transform var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__cta:hover svg { transform: translateX(3px); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft--stack { grid-template-columns: 1fr; gap: var(--s8);}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft--stack .ab-ft__main { text-align: center;}
@media (max-width: 960px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s10) var(--s8); }
}
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft { padding: var(--s8) var(--s5); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft::after { font-size: 10rem; right: var(--s4); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft__side { padding: var(--s5); }
}

/* ── Article extras (outbound.html) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__tags--info li { color: var(--grad-mid); background: rgba(18,135,204,.07); border-color: rgba(18,135,204,.2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact li { background: var(--white); border: 1px solid var(--border); border-top: 3px solid #10B482; border-radius: var(--r-xl); padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,180,130,.12); color: #0E9F6E; font-weight: 800; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact span { font-size: var(--t-sm); font-weight: 600; color: var(--ink); line-height: 1.5; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-next { display: block; margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px dashed var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-next small { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grad-end); margin-bottom: 4px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-next strong { color: var(--white); font-size: var(--t-sm); line-height: 1.5; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft--stack .ab-impact li { align-items: center; justify-content: center; text-align: center; padding: var(--s8) var(--s5); min-height: 180px;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft--stack .ab-impact li img {width:25px; height:25px;}
@media (max-width: 1100px) 
{ :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact { grid-template-columns: repeat(3, 1fr); } 
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft--stack .ab-impact {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media (max-width: 640px) 
{ :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-impact { grid-template-columns: 1fr 1fr; }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-ft--stack .ab-impact { grid-template-columns: 1fr 1fr;}
}

/* ── Article extras (inventory-control.html) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still--info li { border-top-color: var(--grad-mid); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-still--info .ab-still__ic { background: rgba(18,135,204,.1); color: var(--grad-mid); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__mid { padding: var(--s8) var(--s10); border-top: 1px solid var(--border); scroll-margin-top: 96px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__mid > .ab-hd { display: block; margin-bottom: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__bottom .ab-kicker { margin-bottom: var(--s2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__bottom h2 { font-size: clamp(1.3rem, 2.2vw, var(--t-2xl)); font-weight: 800; color: var(--bg-5); margin-bottom: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__note { display: flex; gap: var(--s3); margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-lg); background: rgba(18,135,204,.06); border-left: 3px solid var(--grad-mid); font-size: var(--t-sm); color: var(--steel); line-height: 1.65; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risk__note b { color: var(--grad-mid); white-space: nowrap; }
@media (max-width: 640px) { :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-reality__mid { padding: var(--s6) var(--s5); } }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) a.ab-next { text-decoration: none; transition: border-color var(--ease); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) a.ab-next:hover { border-color: var(--grad-end); }

/* ── Article intro: two matching cards (text + article list) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro { align-items: stretch; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__text {
  display: flex; flex-direction: column; gap: var(--s5);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s8); box-shadow: var(--sh); position: relative; overflow: hidden;
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__text::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad);
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__hd { display: flex; align-items: center; gap: var(--s3); width:fit-content; padding: .22rem .85rem; border: 2px solid var(--bg-5); border-radius: 100px;  }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__hd-w { display: flex; align-items: center; gap: var(--s3); width:fit-content; padding: .22rem .85rem; border: 2px solid var(--white); border-radius: 100px;  }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__ic { width: 25px; height: 25px; border-radius: var(--r-lg); color: var(--grad-mid); display: grid; place-items: center; flex-shrink: 0;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__ic img { width: 20px; height: 20px;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__ic svg { width: 18px; height: 18px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__text .ab-intro__lead { margin-bottom: 0; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: auto; padding-top: var(--s5); border-top: 1px dashed var(--border);
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__tags li {
  font-size: var(--t-xs); font-weight: 600; color: var(--grad-mid);
  background: rgba(18,135,204,.07); border: 1px solid rgba(18,135,204,.2); padding: .25rem .7rem; border-radius: 100px;
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-toc2 { position: static; display: flex; flex-direction: column; }
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__text { padding: var(--s6) var(--s5); }
}

/* ── Article: two cards (white + dark), like the intro ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: stretch; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s4);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s8); box-shadow: var(--sh); scroll-margin-top: 96px;
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card .ab-kicker { margin: 0; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card h2 { font-size: clamp(1.35rem, 2.2vw, var(--t-2xl)); font-weight: 800; line-height: 1.25; color: var(--bg-5); text-align:left; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card > p { font-size: var(--t-base); color: var(--steel); line-height: 1.75; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card > .ab-hd { margin-top: var(--s2); padding-top: var(--s4); border-top: 1px dashed var(--border); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list { list-style: none; display: grid; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; font-weight: 600; color: var(--ink); line-height: 1.45; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list li + li { border-top: 1px solid var(--border); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list .ab-still__ic { width: 36px; height: 36px; border-radius: var(--r-lg); display: grid; place-items: center; flex-shrink: 0;color: var(--grad-mid); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list .ab-still__ic img { width: 20px; height: 20px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list .ab-still__ic svg { width: 18px; height: 18px; }
/* dark card */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--dark { background: var(--bg-2); border-color: transparent; color: var(--white); box-shadow: var(--sh-lg); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--dark::before { background: linear-gradient(90deg, #DC4637, #F27B6F); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--dark .ab-kicker { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--dark h2 { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__ic--warn { background: rgba(220,70,55,.16); color: #F27B6F; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list--warn li { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list--warn li img { width:20px; height:20px; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list--warn li { color: var(--white); }

:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list--warn li + li { border-top-color: var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list--warn .ab-still__ic { color: #F27B6F; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__verdict { margin-top: auto; display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: #18355D; border: 1px solid var(--grad-end); color: var(--white); font-weight: 700; font-size: var(--t-sm); line-height: 1.5;}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__verdict img {width: 25px; height:25px;}
/* :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__verdict::before { content: '!'; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #DC4637; color: var(--white); font-size: .8rem; font-weight: 800; } */
@media (max-width: 960px) { :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo { grid-template-columns: 1fr; } }
@media (max-width: 640px) { :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card { padding: var(--s6) var(--s5); } }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card > .ab-duo__verdict { color: var(--white); font-size: var(--t-sm); line-height: 1.5; }

/* ── Article: solution section as two cards (dark summary + white list) ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards { grid-template-columns: minmax(300px, .8fr) 1.6fr; gap: var(--s6); align-items: stretch; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__intro {
  position: relative; top: auto; overflow: hidden; display: flex; flex-direction: column; gap: var(--s4);
  background: var(--bg-2); color: var(--white); border-radius: var(--r-xl); padding: var(--s8); box-shadow: var(--sh-lg);
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__intro::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__intro .ab-kicker { margin: 0; color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__intro h2 { color: var(--white); margin: 0; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__intro > p { color: rgba(228,230,232,.7); margin: 0; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__ic--light {  color: var(--grad-end); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__stat {
  margin-top: auto; background: rgba(255,255,255,.05); border: 1px solid var(--border-d); box-shadow: none;
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__stat::before { display: none; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__list {
  position: relative; border-radius: var(--r-xl); box-shadow: var(--sh);
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__list::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); z-index: 1; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risk:first-child { padding-top: calc(var(--s6) + 4px); }
@media (max-width: 960px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks--cards .ab-risks__intro { padding: var(--s6) var(--s5); }
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__mini { list-style: none; counter-reset: mini; display: grid; margin: var(--s2) 0 var(--s4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__mini li { counter-increment: mini; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; font-size: var(--t-sm); font-weight: 600; color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__mini li + li { border-top: 1px solid var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-risks__mini li::before { content: counter(mini, decimal-leading-zero); font-size: var(--t-xs); font-weight: 800; color: var(--grad-end); min-width: 22px; }

/* ── Article: results as two cards ── */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo--results { grid-template-columns: 1.7fr 1fr; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--blue::before { background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--blue .ab-kicker { color: var(--white); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--green::before { background: linear-gradient(90deg, #10B482, #3FD3A4); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-intro__ic--ok { color: #0E9F6E; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; padding-top: var(--s6); border-top: 1px solid var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats div { padding-inline: var(--s5); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats div:first-child { padding-left: 0; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats div + div { border-left: 1px solid var(--border-d); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats dt { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--s2); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats dd { font-size: var(--t-sm); color: rgba(228,230,232,.72); line-height: 1.5; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__list--ok .ab-still__ic { background: var(--grad); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card > .ab-duo__note { margin-top: auto; font-size: var(--t-xs); color: var(--slate); line-height: 1.6; padding-top: var(--s4); border-top: 1px dashed var(--border); }
@media (max-width: 960px) { :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo--results { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats { grid-template-columns: 1fr; gap: var(--s4); }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats div { padding: 0; }
  :where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats div + div { border-left: 0; border-top: 1px solid var(--border-d); padding-top: var(--s4); }
}
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card .ab-duo__h { font-size: clamp(1.35rem, 2.2vw, var(--t-2xl)); font-weight: 800; line-height: 1.25; color: var(--white); text-align: center; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card .ab-cities { margin-top: 0; }
/* Keep the two-card rows the same width as the intro and risks blocks */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo { max-width: var(--max); margin-inline: auto; width: 100%; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-stats--two { grid-template-columns: repeat(2, 1fr); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__big { margin-top: auto; display: flex; align-items: center; gap: var(--s4); padding: var(--s5); border-radius: var(--r-lg); background: rgba(18,135,204,.06); border: 1px solid rgba(18,135,204,.18); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__big b { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__big span { font-size: var(--t-sm); color: var(--slate); line-height: 1.5; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE LAYER — all screens (phone · tablet · laptop · desktop)
   Kept last in the file so it wins over earlier page rules.
   Breakpoints:  ≤1200 header switches to burger menu
                 ≤1100 tablet landscape / small laptop
                 ≤900  tablet portrait
                 ≤768  large phone / small tablet
                 ≤480  phone
                 ≥1600 large desktop
   ═══════════════════════════════════════════════════════════════ */

/* ── Global safety net ───────────────────────────── */
html, body { overflow-x: clip; }
body { overflow-wrap: break-word; }
video, iframe, canvas { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }

/* ── Header: burger menu from 1200px down ────────── */
.nav__burger span { background: var(--ink); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__m-cta { display: none; }

@media (max-width: 1200px) {
  .nav { gap: var(--s3); }
  .nav__right,
  .nav__item--drop,
  .nav__d-only { display: none !important; }
  .nav__m-only { display: list-item; }
  .nav__burger { display: flex; }

  .nav__links {
    position: fixed;
    top: 68px;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-inline-start: 0;
    padding: var(--s4) var(--s5) var(--s6);
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-1);
    border-top: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    z-index: 99;
  }
  .nav__links--open { display: flex; }
  .nav__links a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: var(--t-base);
    color: rgba(255,255,255,.82);
    border-radius: var(--r);
  }
  .nav__links a:hover,
  .nav__links a.active { color: var(--white); background: rgba(255,255,255,.07); }
  .nav__links a.active::after { display: none; }
  .nav__m-cta { display: list-item; margin-top: var(--s3); }
  .nav__links .nav__m-cta a {
    text-align: center;
    color: var(--white);
    background: var(--grad);
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  .nav__wordmark { font-size: 1.6rem; }
  .nav__wordmark-1 { font-size: .64rem; }
  .site-logo-img { width: 30px; height: 30px; }
}

/* ── Page width ──────────────────────────────────── */
@media (min-width: 1600px) {
  .container { max-width: min(85%, 1480px); }
}
@media (max-width: 1100px) {
  :root { --max: 94%; }
  .container, .container-B { max-width: 94%; }
  .section--deep-A { width: 94%; }
}
@media (max-width: 768px) {
  :root { --max: 100%; }
  .container, .container-B { max-width: 100% !important; padding-inline: var(--s5); }
  .ppv2-retry { width: 100%; padding: .6rem 1rem; gap: .75rem; }
  .section--deep-A { width: 100%; padding: var(--s16) var(--s5); }
  .section--deep, .section--deep-1 { border-radius: 14px; }
  .section { padding-block: var(--s16); }
}
@media (max-width: 480px) {
  .container, .container-B { padding-inline: var(--s4); }
  .section { padding-block: var(--s12); }
}

/* ── Headings scale down on small screens ────────── */
@media (max-width: 768px) {
  .sec-hd h2, .sec-hd__h, .oracle-split__h { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .page-hero__h1, .hero-slide__h1 { font-size: clamp(1.75rem, 7.5vw, 2.4rem); }
}

/* ── Home carousel: slides never wider than screen ─ */
.cr__slide { width: 100%; max-width: 100%; flex: 0 0 100%; }
.cr__split-left { min-width: 0; }
@media (max-width: 900px) {
  .cr__slide { min-height: 0; }
  .cr__split-left { flex: none; width: 100%; }
  .cr__split-right { flex: 0 0 280px; width: 100%; }
}
@media (max-width: 600px) {
  .cr__split-left { padding: 2.5rem var(--s5) 3.5rem; }
  .cr__btns a { flex: 1 1 auto; justify-content: center; text-align: center; }
  .cr__arrow { display: none; }
}

/* ── Home: architecture cards (4 → 2 → 1) ────────── */
@media (max-width: 1100px) { .overview-grid-A { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .overview-grid-A { grid-template-columns: minmax(0, 1fr); } }
.overview-grid-A > * { min-width: 0; }

/* ── Home: feature split sections ────────────────── */
@media (max-width: 768px) {
  .pg-index .feat-section .container { padding-inline: var(--s4) !important; padding-block: var(--s8) !important; }
  .pg-index .feat-section .oracle-split__img { min-height: 200px !important; padding: 12px; }
}

/* ── Platform: interface rows ────────────────────── */
@media (max-width: 768px) {
  .iface-row, .iface-row-A { padding: var(--s6) var(--s5) var(--s6) calc(var(--s5) + 5px); }
  .iface-row-A__info { order: -1; }
  .iface-row-A__features { border-top-color: rgba(255,255,255,.10); }
}

/* ── Billing: mobile feature list ────────────────── */
@media (max-width: 640px) {
  .mob-feat-v3--full { grid-column: auto; }
}

/* ── Portal: dashboard mock ──────────────────────── */
.cp-mock { min-width: 0; max-width: 100%; }
@media (max-width: 480px) {
  .cp-mock { padding: var(--s4); }
  .cp-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Previous / next page links ──────────────────── */
@media (max-width: 768px) {
  .page-nav a span { display: inline; font-size: var(--t-sm); }
}

/* ── Touch devices: no hover lift ────────────────── */
@media (hover: none) {
  .overview-card:hover, .overview-card-A:hover, .overview-card-P:hover { transform: none; }
}

/* ── Home carousel on phones: image sits behind the text ── */
@media (max-width: 600px) {
  .cr__slide { position: relative; overflow: hidden; }
  .cr__split-right {
    display: block !important;
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .cr__bg { object-fit: cover; object-position: 70% center; }
  .cr__split-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(12,26,46,.72) 0%, rgba(12,26,46,.86) 55%, rgba(12,26,46,.95) 100%);
  }
  .cr__split-left { position: relative; z-index: 1; min-height: 440px; justify-content: center; }
  .cr__sub { color: rgba(255,255,255,.88); }
}
@media (max-width: 600px) {
  .cr__h { text-align: center; }
}



/* ── Platform: Mobile App card on phones ─────────── */
@media (max-width: 768px) {
  .iface-row-A__features { margin-left: 0; margin-inline: 0; width: auto; max-width: 100%; border-right: none; border-inline-end: none; padding-right: 0; }
  .iface-row-A__info { min-width: 0; }
}

/* ── Workflow: column header — badge above title, centred ── */
.wf-column__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s2);
  margin-left: 0;
  margin-inline: 0;
}
.wf-column__head h3 { text-align: center; margin: 0; }

/* ── Workflow: feature card header aligned to start ── */
.pg-workflow .feat-card__header { margin: 0 0 var(--s3); margin-inline: 0; justify-content: flex-start; text-align: start; }
.pg-workflow .feat-card__meta, .pg-workflow .feat-card__title { text-align: start; }

/* ── Inventory: warehouse map panel on phones ─────── */
@media (max-width: 640px) {
  .pg-inventory .map__panel { margin-top: 0; height: auto; }

  /* Header: title, then a full-width segmented toggle */
  .pg-inventory .map__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s4);
    padding: var(--s5);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .pg-inventory .map__meta { color: rgba(228,230,232,.7); }
  .pg-inventory .map__toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: 3px;
  }
  .pg-inventory .map__toggle button { color: rgba(228,230,232,.7); padding: .4rem .5rem; }
  .pg-inventory .map__toggle button[aria-pressed="true"] { background: var(--white); color: var(--ink); }

  /* KPIs: tidy 2 × 2 stat tiles with visible dividers */
  .pg-inventory .map__kpis {
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .pg-inventory .map__kpis div { padding: var(--s3) var(--s5); border: 0; }
  .pg-inventory .map__kpis div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.08); }
  .pg-inventory .map__kpis div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
  .pg-inventory .map__kpis dt { color: rgba(228,230,232,.6); font-size: .72rem; }
  .pg-inventory .map__kpis dd { font-size: 1.35rem; line-height: 1.25; }

  /* Bin grid: taller cells, clearer rack and aisle labels */
  .pg-inventory .map__floor { padding: var(--s5); background: rgba(255,255,255,.02); }
  .pg-inventory .rack { grid-template-columns: 32px repeat(var(--cols, 14), 1fr); gap: 4px; }
  .pg-inventory .rack + .rack { margin-top: 4px; }
  .pg-inventory .rack__label { color: rgba(228,230,232,.6); font-size: 10.5px; }
  .pg-inventory .cell { height: 26px; border-radius: 4px; }
  .pg-inventory .aisle {
    margin: var(--s3) 0 var(--s3) 32px;
    font-size: 10.5px;
    color: rgba(228,230,232,.55);
    letter-spacing: .02em;
  }
  .pg-inventory .aisle::before, .pg-inventory .aisle::after { border-top-color: rgba(255,255,255,.14); }

  /* Legend: even 3-column grid, no orphan item */
  .pg-inventory .map__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    padding: var(--s4) var(--s5) var(--s5);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .pg-inventory .map__legend {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: var(--s2) var(--s3);
    color: rgba(228,230,232,.72);
  }
  .pg-inventory .map__legend .cell { height: 12px; }
  .pg-inventory .map__detail {
    color: rgba(228,230,232,.6);
    padding-top: var(--s3);
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .pg-inventory .map__detail strong { color: var(--white); }
}

/* ── Inventory: picking strategy cards centred on phones ── */
@media (max-width: 640px) {
  .pg-inventory .pick li { text-align: center; justify-items: center; align-items: center; }
  .pg-inventory .pick li abbr,
  .pg-inventory .pick li h4,
  .pg-inventory .pick li p { text-align: center; margin-inline: auto; }
  .pg-inventory .pick li h4 { justify-content: center; }
}

/* ── Previous / next links: always on one row ────── */
@media (max-width: 768px) {
  .page-nav { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--s3); }
  .page-nav a { flex: 0 1 auto; min-width: 0; font-size: .8rem; line-height: 1.3; }
  .page-nav a:last-child { text-align: end; margin-inline-start: auto; }
  .page-nav a img { flex-shrink: 0; }
}
@media (max-width: 768px) {
  .page-nav a { max-width: 48%; }
  .page-nav a span { text-wrap: balance; }
}

/* ── Operation hero on tablets/phones: image behind the text ── */
@media (max-width: 900px) {
  .pg-operation .hero-carousel { min-height: 0; }
  .pg-operation .hero-slide { position: relative; padding: 0; }
  .pg-operation .hero-slide__inner {
    display: block;
    position: static;
    padding-block: var(--s16);
  }
  .pg-operation .hero-slide__visual {
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: 0;
    z-index: 0;
  }
  .pg-operation .hero-slide__visual img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: 60% center;
  }
  .pg-operation .hero-slide__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,24,41,.74) 0%, rgba(11,24,41,.88) 55%, rgba(11,24,41,.96) 100%);
  }
  .pg-operation .hero-slide__content {
    position: relative;
    z-index: 1;
    min-height: 0;
    max-width: 560px;
  }
  .pg-operation .hero-slide__content > br { display: none; }
  .pg-operation .hero-slide__lead { color: rgba(255,255,255,.88); margin-bottom: var(--s6); }
  .pg-operation .hero-slide__heading { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}
@media (max-width: 480px) {
  .pg-operation .hero-slide__actions { display: flex; flex-direction: column; gap: var(--s3); }
  .pg-operation .hero-slide__actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ── Operation: quarantine trigger rows — icon stays left, tag right ── */
.pg-operation .triggers li .ic { margin-left: 0; margin-inline-start: 0; flex-shrink: 0; }
.pg-operation .triggers li > span:last-child { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }

/* ── Operation: all icon cards — icon above title, centred (every screen) ── */
@media all {
  .pg-operation .card { text-align: center; }
  .pg-operation .card__head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
  }
  .pg-operation .card__head h3 { margin: 0; text-align: center; }
  .pg-operation .card p { text-align: center; }
  .pg-operation .card > small,
  .pg-operation .card > small-A { display: block; text-align: center; }
}

/* ── Billing: charge-type cards — icon above name, centred (every screen) ── */
.pg-billing .ct-card { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; row-gap: .6rem; }
.pg-billing .ct-card .ct-name,
.pg-billing .ct-card .ct-measure { text-align: center; width: 100%; }
.pg-billing .ct-card .ct-measure { flex-basis: auto; }

/* ── Billing: invoice feature list — icon above title, centred ── */
.pg-billing .ilc__feats li {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}
.pg-billing .ilc__feats li p { flex-basis: auto; width: 100%; text-align: center; }
.pg-billing .ilc__feats li h3 { text-align: center; }
.pg-billing .ilc__feats li:first-child { padding-left: var(--s6); }
@media (max-width: 600px) {
  .pg-billing .ilc__feats li,
  .pg-billing .ilc__feats li:first-child { padding-inline: 0; }
}

/* ── Icon + heading rows — icon above heading, centred (every screen) ──
   Billing "Printing & Scanning", Download pain points,
   Inventory stock states, Portal ERP guarantees                       */
.pg-billing .dsh__fh,
.pg-download .dl-pain__hd,
.pg-inventory .eq__head,
.pg-portal .erp-guar__hd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  text-align: center;
}
.pg-billing .dsh__fh h4,
.pg-download .dl-pain__hd h3,
.pg-inventory .eq__head h3,
.pg-portal .erp-guar__hd h3 { margin: 0; text-align: center; }
.pg-billing .dsh__feats li,
.pg-download .dl-pain__grid li,
.pg-inventory .eq__term,
.pg-portal .erp-guar li { text-align: center; }

/* ── Portal: customer dashboard mock — mobile polish ── */
@media (max-width: 640px) {
  /* Header: dots + address left, sites pill right */
  .pg-portal .cp-mock__bar { justify-content: flex-start; }
  .pg-portal .cp-mock__bar b { font-size: .8rem; margin-inline-end: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-portal .cp-mock__site { flex-shrink: 0; }

  /* KPI tiles: crisp accent line instead of a curved top border */
  .pg-portal .cp-kpi {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-d);
    padding: var(--s4) var(--s4) var(--s3);
  }
  .pg-portal .cp-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c);
  }
  .pg-portal .cp-kpi span { color: rgba(228,230,232,.7); }
  .pg-portal .cp-kpi b { font-size: 1.3rem; }

  /* Activity rows: visible separation, tighter text */
  .pg-portal .cp-rows li {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    font-size: .82rem;
    line-height: 1.4;
    padding: .7rem var(--s4);
  }
  .pg-portal .cp-rows li span:first-child { min-width: 0; }
}

/* ── Portal: security cards + report group headers — icon above title ── */
.pg-portal .sc-card__hd,
.pg-portal .rp-group__hd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
}
.pg-portal .sc-card__hd h3,
.pg-portal .rp-group__hd h3 { margin: 0; text-align: center; }
.pg-portal .sc-card { text-align: center; }

/* ── Operation: cycle-count steps — number above title, centred ── */
.pg-operation .step__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
}
.pg-operation .step__head h3 { margin: 0; text-align: center; }
.pg-operation .step { text-align: center; }

/* ── Inventory: virtual account cards — number above title, centred ── */
.pg-inventory .acct__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
}
.pg-inventory .acct__head h3,
.pg-inventory .acct__head h4 { margin: 0; text-align: center; }

/* ── Operation: VAS job lifecycle — centred, scales to the screen ── */
@media (max-width: 768px) {
  .pg-operation .states {
    justify-content: center;
    gap: clamp(.25rem, 1.4vw, .6rem);
    row-gap: .5rem;
  }
  .pg-operation .states li {
    font-size: clamp(.68rem, 2.9vw, .85rem);
    padding: .32rem clamp(.5rem, 2.4vw, .85rem);
    white-space: nowrap;
  }
  .pg-operation .states li.sep { padding: 0; }
  .pg-operation .states__alt { text-align: center; }
}
@media (max-width: 430px) {
  .pg-operation .states { gap: .3rem; }
  .pg-operation .states li { font-size: .7rem; padding: .3rem .5rem; }
}
@media (max-width: 359px) {
  .pg-operation .states li.sep { display: none; }
  .pg-operation .states { gap: .4rem; }
}
@media (max-width: 389px) {
  .pg-operation .states { gap: .2rem; }
  .pg-operation .states li { font-size: .66rem; padding: .28rem .42rem; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .pg-operation .states { justify-content: center; gap: .6rem; }
  .pg-operation .states li { white-space: nowrap; }
}


/* ── Pricing: FAQ list full width ────────────────── */
.pg-pricing .faq-wrap { max-width: 100%; width: 100%; }

/* ═══ MOBILE ONLY: every page heading centred (≤768px) ═══ */
@media (max-width: 768px) {
  main :is(h1, h2, h3, h4, h5, h6) { text-align: center !important; }

  /* Small labels that sit directly above a heading */
  main :is(.cr__eyebrow, .oracle-split__eyebrow, .feat-group__eyebrow, .page-hero__eyebrow, .sec-eyebrow, .eyebrow) {
    align-self: center;
    margin-inline: auto;
    text-align: center;
  }
  main :is(.oracle-split__eyebrow, .feat-group__eyebrow) { display: block; width: fit-content; }
  main .cr__crumb { justify-content: center; }

  /* Workflow: Guarantees / Visibility heading block */
  .pg-workflow .feat-group__lead { display: flex; flex-direction: column; align-items: center; text-align: center; position: static; }
}

/* Mobile: rows that put an icon / number beside a heading → stack, centred */
@media (max-width: 768px) {
  .pg-inbound .ab-risk__hd, .pg-inventory-control .ab-risk__hd,
  .pg-outbound .ab-risk__hd, .pg-latest-article .ab-risk__hd, main .ab-risk__hd,
  .pg-pricing .pp-group__hd,
  .pg-workflow .feat-card__header,
  .pg-platform .iface-row__header, .pg-platform .iface-row-A__header,
  .pg-platform .pillar-card__header, .pg-platform .pillar-card-A__header,
  .pg-contact .cx-office__hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--s2);
    margin-inline: 0;
  }
  .pg-workflow .feat-card__meta,
  .pg-platform .iface-row__meta, .pg-platform .iface-row-A__meta,
  .pg-platform .pillar-card__heading, .pg-platform .pillar-card-A__heading {
    align-items: center; text-align: center;
  }
  .pg-workflow .feat-card__desc,
  .pg-platform .pillar-card__desc, .pg-platform .pillar-card-A__desc { text-align: center; }

  /* Heading + status tag on one line → centred pair */
  .pg-billing .ilc__head, .pg-portal .erp-col__hd { justify-content: center; flex-wrap: wrap; gap: var(--s2); }

  /* Inventory map feature list: icon above heading */
  .pg-inventory .map__feats li { grid-template-columns: 1fr; justify-items: center; text-align: center; }

  /* Workflow steps: number and icon above the step text */
  .pg-workflow .wf-step-card { flex-direction: column; align-items: center; text-align: center; gap: var(--s2); }
  .pg-workflow .wf-step-card__body { text-align: center; }

  /* Article cards: small label pills above the heading */
  main .ab-intro__hd, main .ab-hd { align-self: center; margin-inline: auto; }
}
@media (max-width: 768px) {
  .pg-inventory .map__feats li { grid-template-areas: "ic" "title" "text"; }
  .pg-portal .erp-col__hd h3 { flex: 0 1 auto; margin: 0; }
}
@media (max-width: 768px) {
  .pg-portal .erp-col__hd .erp-dir { margin-inline-start: 0; margin-left: 0; }
}
@media (max-width: 768px) {
  main .ab-risk { grid-template-columns: 1fr; }
  main .ab-risk__num { display: block; text-align: center; margin-inline: auto; }
}


/* ═══ Feature pages: Quarantine & Returns, VAS & Expiry, Mobile App ═══
   These pages reuse the Operations page components (body.pg-operation).  */
.pg-operation .vas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .pg-operation .vas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pg-operation .vas--3 { grid-template-columns: minmax(0, 1fr); } }
.pg-operation .pg-sec .facts { margin-top: var(--s10); }
.pg-operation .pg-sec--dark .facts { background: var(--ink); border: 1px solid var(--border-d); }

/* ── Operations family hero (Operations, Quarantine & Returns, VAS & Expiry, Mobile App):
      tablet layout — text centred above a full-width image ── */
@media (min-width: 601px) and (max-width: 1100px) {
  .pg-operation .cr--single .cr__slide {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .pg-operation .cr--single .cr__split-left {
    flex: none;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding: var(--s12) var(--s8) var(--s8);
    align-items: center;
    text-align: center;
  }
  .pg-operation .cr--single .cr__crumb { justify-content: center; flex-wrap: wrap; }
  .pg-operation .cr--single .cr__btns  { justify-content: center; }
  .pg-operation .cr--single .cr__split-right {
    flex: none;
    width: 100%;
    max-width: 760px;
    margin: 0 auto var(--s12);
    padding-inline: var(--s8);
    box-sizing: border-box;
    overflow: visible;
  }
  .pg-operation .cr--single .cr__bg {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-xl);
    transform: none;
  }
}

/* ── Quarantine & Returns: tablet and phone layout ── */
@media (max-width: 1100px) {
  /* "Three ways stock is held" card sits above the four outcomes */
  .pg-quarantine .quar { grid-template-columns: 1fr; gap: var(--s6); }
  /* RMA steps: number on the left, text left-aligned */
  .pg-quarantine .flow h3,
  .pg-quarantine .flow p { text-align: left !important; } /* overrides the site-wide phone rule that centres every heading */
}
@media (min-width: 641px) and (max-width: 1100px) {
  .pg-quarantine .rma { grid-template-columns: 1fr; }
  .pg-quarantine .rma__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pg-quarantine .flow { padding: var(--s5); }
  .pg-quarantine .rma__split { grid-template-columns: 1fr; }
}


/* ═══ SEO / headings rationalization (Oct 2026) ═══ */
/* Carousel slides 2+ use <p class="cr__h"> so the page keeps a single H1 */
p.cr__h { margin: 0; }
/* Former <p1> elements on the home page */
.oracle-feat-list li p.p1 { margin: 0 0 0 23px; color: var(--white); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Former <h3-1> on the inventory equation */
:where(.pg-inventory) .eq__term--avail h3 { color: var(--white); }
/* Blog featured article heading is now H3 under "Latest Articles" */
:where(.pg-blog) .bl-feat h3 { font-size: clamp(1.4rem, 2.2vw, var(--t-3xl)); font-weight: 800; line-height: 1.2; margin: var(--s3) 0 var(--s4); }
:where(.pg-blog) .bl-feat h3 a { color: var(--ink); text-decoration: none; transition: color var(--ease); }
:where(.pg-blog) .bl-feat h3 a:hover { color: var(--grad-mid); }
/* New intro lines */
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card > p.ab-duo__lead { margin: 0; }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ab-duo__card--dark > p.ab-duo__lead { color: rgba(255,255,255,.78); }
:where(.pg-latest-article, .pg-outbound, .pg-inventory-control, .pg-inbound) .ar-related__intro { flex-basis: 100%; text-align: center; color: var(--steel); line-height: 1.7; }
:where(.pg-workflow) .wf-column__intro { max-width: 48ch; margin: 0; font-size: var(--t-sm); color: var(--steel); line-height: 1.6; }
:where(.pg-portal) .rp-group__intro { margin: 0; padding: var(--s4) var(--s6) 0; text-align: center; font-size: var(--t-sm); color: var(--steel); line-height: 1.6; }


/* ═══ Global: image aspect ratio from width/height attributes (Oct 2026) ═══ */
/* Lets the browser reserve space before images load without stretching icons sized by CSS width only */
:where(img[width][height]) { height: auto; }

/* ═══ Billing: charge-type cards mobile fix, moved from an inline <style> block (Oct 2026) ═══ */
@media (max-width: 768px) {
  body.pg-billing #charges .container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  body.pg-billing #charges .ct-grid,
  body.pg-billing #charges .ct-grid-A {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    justify-items: stretch;
    justify-content: stretch;
    position: static;
    transform: none;
  }
  body.pg-billing #charges .ct-grid-A { margin-top: 0; }
  body.pg-billing #charges .ct-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    grid-column: auto;
  }
}

/* ═══ Page banner: self-hosted background image (Oct 2026) ═══ */
.page-banner::before { background-image: url('../images/warehouse-bg.jpg'); }