/* ==========================================================================
   POS Online — components layered on the Intense theme.
   Theme palette kept as-is: primary #6689ff, ink #151515, light #f4f4f4.
   ========================================================================== */
:root{
  --po-primary:#6689ff;
  --po-primary-dark:#4a6fe8;
  --po-ink:#151515;
  --po-ink-2:#2c343b;
  --po-muted:#9b9b9b;
  --po-line:#e1e1e1;
  --po-bg:#f4f4f4;
  --po-wa:#25d366;
  --po-good:#1aa564;
  --po-bad:#e85858;
  --po-warn:#f0a500;
  /* ONE content rail for the whole site. The theme's .container is 1200px with 15px
     padding, so the header, the sections and the footer all use the same numbers and
     every left edge lines up down the page. */
  --po-rail:1200px;
  --po-gutter:15px;
  --po-measure:74ch;      /* readable line length for body copy */
  /* Component heading sizes. Section headings use the h1-h6 scale above; these three
     cover every title that sits inside a card, panel or column. */
  --h-card:18px;          /* card titles: product, partner, role, step, result */
  --h-panel:22px;         /* panel titles: plan, form card, bundle, footer CTA, modal */
  --h-sub:19px;           /* sub-headings inside prose and spec columns */
  --po-radius:4px;
  --po-shadow:0 6px 24px rgba(21,21,21,.08);
  --po-shadow-hi:0 12px 36px rgba(102,137,255,.18);
}
.po-skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--po-primary);color:#fff;padding:10px 18px}
.po-skip:focus{left:0}
img{max-width:100%;height:auto}
.po-note{font-size:13px;color:var(--po-muted);line-height:1.6;margin-top:18px}



/* ==========================================================================
   TEXT ALIGNMENT RESET  — read this before changing anything
   The Intense theme sets `text-align:center` on `.page`, which wraps every
   page on the site. Every paragraph, list, table cell and card therefore
   inherited centred text unless it happened to set its own alignment. That
   single declaration was the cause of the misaligned content throughout.
   Default is now left; the handful of blocks that SHOULD be centred set it
   themselves and are listed below so the intent is explicit.
   ========================================================================== */
.page{text-align:left}
.po-head,.po-hero .po-hero-inner,.po-quote,.po-trust li,.po-logos-lead,.po-section-cta,
.po-note-center,.po-search-count,.po-search-empty,.po-prose-center,.po-plan-alt,
.po-hero-split .po-hero-copy{text-align:left}
@media(max-width:991px){.po-hero-split .po-hero-copy{text-align:center}}

/* ==========================================================================
   TYPE SCALE
   The theme ships h2 at 36px with line-height 1.667 — 60px of leading on a
   heading. Sizes are kept, leading is tightened, and one scale is applied to
   every heading on the site so section headings and long-form headings match.
   ========================================================================== */
h1,.h1{font-size:46px;line-height:1.1;letter-spacing:-.01em}
h2,.h2,.heading-2{font-size:36px;line-height:1.18;letter-spacing:-.005em}
h3,.h3{font-size:26px;line-height:1.25}
h4,.h4{font-size:21px;line-height:1.3}
h5,.h5{font-size:17px;line-height:1.35}
h6,.h6{font-size:14px;line-height:1.4}
h1,h2,h3,h4,h5,h6{margin-top:0}

@media(max-width:1199px){
  h1,.h1{font-size:40px}
  h2,.h2,.heading-2{font-size:32px}
  h3,.h3{font-size:24px}
}
@media(max-width:767px){
  :root{--h-card:17px;--h-panel:20px;--h-sub:18px}
  h1,.h1{font-size:30px;line-height:1.16}
  h2,.h2,.heading-2{font-size:26px;line-height:1.22}
  h3,.h3{font-size:21px}
  h4,.h4{font-size:19px}
}
@media(max-width:575px){
  h1,.h1{font-size:27px}
  h2,.h2,.heading-2{font-size:24px}
}

/* ==========================================================================
   HEADER — utility bar with contact details + sticky nav
   ========================================================================== */
/* The utility bar is the first row of a two-row header, so it has to resolve to the same rail as
   the navigation under it and start and end on the same two vertical edges. It did not: the lists
   were allowed to wrap, so a middling window width dropped one item onto a second line and pushed
   the bar to 60-odd pixels while the sticky-header offset still assumed 42; the icons were inline
   text, so each label sat a pixel or two off its own icon's baseline; and the gaps were 22px
   between items and 16px between the two groups, which read as one ragged row rather than two.

   Now: no wrapping (items are hidden by breakpoint instead), a fixed 42px row that matches the
   stick-up offset, icons in a fixed-width box so every label starts on the same x within its item,
   and one gap value throughout. */
.po-topbar{background:var(--po-ink);color:#c6cddc;font-size:13px;line-height:1}
.po-topbar-inner{max-width:var(--po-rail);margin:0 auto;padding:0 var(--po-gutter);display:flex;
  align-items:center;justify-content:space-between;gap:24px;height:42px}
.po-topbar ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px;
  flex-wrap:nowrap;min-width:0}
.po-topbar li{display:flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.po-topbar li > span:not(.mdi),.po-topbar a > span:not(.mdi){
  overflow:hidden;text-overflow:ellipsis}
.po-topbar a{color:#fff;display:flex;align-items:center;gap:7px;min-width:0}
.po-topbar a:hover{color:var(--po-primary)}
.po-topbar .mdi{
  flex:0 0 16px;width:16px;text-align:center;
  color:var(--po-primary);font-size:15px;line-height:1}
.po-topbar-right li:last-child a{font-weight:600;letter-spacing:.01em}
.po-topbar-ping .mdi{animation:po-pulse 2.4s ease-in-out infinite}
@keyframes po-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.po-topbar-ping .mdi{animation:none}}

/* nav shell */
.po-header{position:relative;z-index:1000}
.rd-navbar-classic.rd-navbar-static .rd-navbar-main-outer{padding-left:0;padding-right:0}
.rd-navbar-classic.rd-navbar-static .rd-navbar-main{max-width:var(--po-rail);margin-left:auto;margin-right:auto;
  padding:16px var(--po-gutter) 14px}
@media(min-width:1600px){
  .rd-navbar-classic.rd-navbar-static .rd-navbar-main-outer{padding-left:0;padding-right:0}
}
.rd-navbar-classic.rd-navbar-static .rd-navbar-nav{margin-right:20px}
.rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-main,.rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-main{padding-top:8px;padding-bottom:8px;box-shadow:0 4px 20px rgba(21,21,21,.10)}
.rd-navbar--is-stuck .rd-navbar-brand img,.rd-navbar--is-clone .rd-navbar-brand img{height:34px;width:auto}

/* nav right-hand cluster */
.po-nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.po-nav-phone{display:flex;align-items:center;gap:9px;color:var(--po-ink);font-size:15px;font-weight:600;
  white-space:nowrap;padding-left:4px}
.po-nav-phone .mdi{font-size:20px;color:var(--po-primary)}
.po-nav-phone small{display:block;font-size:10.5px;font-weight:400;color:var(--po-muted);
  text-transform:uppercase;letter-spacing:.07em;line-height:1.5}
.po-nav-phone:hover{color:var(--po-primary)}
.po-nav-quote{margin:0;white-space:nowrap}

/* always-visible actions inside the mobile panel row */
.po-panel-actions{display:none;align-items:center;gap:8px;margin-left:auto;padding-right:6px}
.po-panel-btn{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--po-line);border-radius:var(--po-radius);background:#fff;color:var(--po-ink);font-size:19px}
.po-panel-btn:hover{border-color:var(--po-primary);color:var(--po-primary)}

/* The theme's mega-menu and dropdown rules used to be overridden here. Nothing in the navigation
   uses them any more — every menu in the bar is the `.apb` component near the end of this file —
   so the overrides have gone with them rather than sitting here waiting to fight it. */

.ui-to-top{display:none!important}

/* ==========================================================================
   FLOATING CONTACT — call bottom-left, WhatsApp bottom-right
   ========================================================================== */
/* Hidden until the hero has scrolled past. Above the fold the hero already offers WhatsApp; a
   bubble saying the same thing made three green buttons on one screen, four with the header's.

   The hiding is gated on `.po-fabs-managed`, which the script puts on <html> as it starts. So the
   buttons are visible by default and only become scroll-triggered once something is actually
   listening for the scroll — with the stylesheet loaded and the script not, they stay put and
   still work, rather than being permanently invisible. */
.po-fab{position:fixed;bottom:24px;z-index:960;display:flex;align-items:center;gap:9px;
  height:54px;padding:0 22px;border-radius:40px;color:#fff;font-size:15px;font-weight:500;
  box-shadow:0 8px 26px rgba(21,21,21,.28);
  transition:opacity .24s ease,transform .24s ease,visibility .24s,box-shadow .2s}
.po-fabs-managed .po-fab{
  opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
.po-fabs-managed .po-fab.is-in{
  opacity:1;visibility:visible;transform:none;pointer-events:auto}
.po-fab:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(21,21,21,.34)}
.po-fab .mdi{font-size:23px}
.po-fab-left{left:24px;background:var(--po-ink)}
.po-fab-left:hover{background:#2a2a2a}
.po-fab-right{right:24px;background:var(--po-wa);box-shadow:0 8px 26px rgba(37,211,102,.42)}
.po-fab-right:hover{background:#1eb455}


/* the page behind the open mobile menu must not scroll */
body.po-nav-open{overflow:hidden;touch-action:none}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
/* A visible focus ring for keyboard users, on every interactive thing.
   :focus-visible means mouse users never see it, so there is no reason to remove it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--po-primary);
  outline-offset:3px;
  border-radius:2px;
}
.context-dark a:focus-visible,.po-footer a:focus-visible,.po-topbar a:focus-visible,
.po-hero a:focus-visible,.po-cta-band a:focus-visible,.po-consult a:focus-visible{
  outline-color:#fff;
}
/* Minimum comfortable tap area, without changing how anything looks */
.po-tags a,.po-other a,.po-foot-list a,.po-faq-q{min-height:40px}
@media(pointer:coarse){
  .po-other a,.po-foot-list a{min-height:44px}
}

/* Respect the operating-system setting. Anyone who has asked for less motion gets it. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .po-topbar-ping .mdi{animation:none}
  .po-pc:hover,.po-card:hover,.po-fab:hover{transform:none}
  .po-cat > a:hover{transform:none}
  .apb-menu,.apb-sub{transition:none}
}

/* ---------------------------------------------------------------- breadcrumbs */
.po-crumbs{background:#fafbfd;border-bottom:1px solid var(--po-line);font-size:13px}
.po-crumbs ol{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:6px}
.po-crumbs li:not(:last-child):after{content:"›";margin-left:8px;color:var(--po-muted)}
.po-crumbs a{color:var(--po-muted)}
.po-crumbs a:hover{color:var(--po-primary)}
.po-crumbs li[aria-current]{color:var(--po-ink)}

/* ---------------------------------------------------------------- hero */
.po-hero{position:relative;background-size:cover;background-position:center;padding:110px 0 96px;text-align:center}
.po-hero-sm{padding:74px 0 62px}
.po-hero-mask{position:absolute;inset:0;background:linear-gradient(105deg,rgba(15,20,35,.92) 0%,rgba(21,21,21,.78) 55%,rgba(102,137,255,.55) 100%)}
.po-hero-sm .po-hero-mask{background:linear-gradient(105deg,rgba(15,20,35,.95) 0%,rgba(18,20,28,.88) 58%,rgba(58,74,125,.82) 100%)}
.po-hero-sm{background-position:center 30%}
.po-hero-inner{position:relative;z-index:2;max-width:860px}
.po-hero h1{color:#fff;margin-bottom:18px}
.po-hero-sub{color:#dfe5f5;font-size:18px;line-height:1.62;max-width:760px;margin:0 auto 28px}
.po-hero-cta .button{margin:6px 5px}
.po-hero-proof{margin-top:24px;color:#b9c4dd;font-size:14px}
.po-hero-proof strong{color:#fff}

/* ---------------------------------------------------------------- trust strip */
.po-trust{padding:0;background:#fff;border-bottom:1px solid var(--po-line)}
.po-trust .container{max-width:var(--po-rail)}
.po-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.po-trust li{padding:26px 14px;text-align:center;border-right:1px solid var(--po-line);
  display:flex;flex-direction:column;justify-content:center}
.po-trust li:last-child{border-right:0}
.po-trust .mdi{display:block;font-size:26px;color:var(--po-primary);margin-bottom:6px}
.po-trust strong{display:block;font-size:17px;color:var(--po-ink);line-height:1.2}
.po-trust span:last-child{font-size:13px;color:var(--po-muted)}

/* ---------------------------------------------------------------- headings */
.po-head{max-width:860px;margin:0 auto 42px;text-align:center}
.po-head.po-left{margin-left:0;text-align:left}
.po-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:var(--po-primary);margin-bottom:8px}
.po-sub{color:#5d6675;font-size:16px;line-height:1.7;margin-top:12px}

/* ---------------------------------------------------------------- pain/fix */
.po-painfix{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:26px;height:100%}
.po-painfix p{margin:0;line-height:1.6}
.po-painfix .po-pain{color:#6b7280;padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--po-line)}
.po-pain .mdi{color:var(--po-bad);margin-right:6px}
.po-fix{color:var(--po-ink);font-weight:500}
.po-fix .mdi{color:var(--po-good);margin-right:6px}

/* ---------------------------------------------------------------- features */
.po-feat{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:16px 18px;
  font-size:15px;line-height:1.5;height:100%;display:flex;gap:10px;align-items:flex-start;transition:.25s}
.po-feat:hover{border-color:var(--po-primary);box-shadow:var(--po-shadow)}
.po-feat .mdi{color:var(--po-primary);font-size:18px;line-height:1.4}

/* ---------------------------------------------------------------- steps */
.po-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.po-steps li{flex:1 1 180px;background:#fff;border:1px solid var(--po-line);border-top:3px solid var(--po-primary);
  border-radius:var(--po-radius);padding:22px}
.po-step-n{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;
  background:var(--po-primary);color:#fff;font-weight:600;font-size:14px;margin-bottom:10px}
.po-steps p{margin:0;font-size:15px;line-height:1.6}

/* ---------------------------------------------------------------- payment jungle */
.po-jungle-card{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:30px;height:100%}
.po-jungle-card h4{margin-bottom:16px;font-size:var(--h-sub)}
.po-jungle-card ol{padding-left:20px;line-height:1.85;font-size:15px}
.po-jungle-bad{border-top:3px solid var(--po-bad)}
.po-jungle-bad h4 .mdi{color:var(--po-bad)}
.po-jungle-good{border-top:3px solid var(--po-good)}
.po-jungle-good h4 .mdi{color:var(--po-good)}
.po-jungle-cost{margin-top:14px;padding-top:14px;border-top:1px dashed var(--po-line);font-size:14px;color:#5d6675}

.po-row-center{justify-content:center}

/* ---------------------------------------------------------------- product cards */
.po-pgrid{margin-bottom:0}
.po-pc{position:relative;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);
  height:100%;display:flex;flex-direction:column;transition:.25s}
.po-pc:hover{border-color:var(--po-primary);box-shadow:var(--po-shadow-hi);transform:translateY(-3px)}
.po-pc-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--po-ink);color:#fff;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:2px;font-weight:600}
.po-pc-img{display:block;background:#f7f9fc;border-bottom:1px solid var(--po-line);padding:14px}
.po-pc-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.po-pc-body{padding:18px;display:flex;flex-direction:column;flex:1}
.po-pc-cat{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--po-primary);margin-bottom:6px}
.po-pc h3{font-size:var(--h-card);line-height:1.3;margin-bottom:8px}
.po-pc h3 a{color:var(--po-ink)}
.po-pc h3 a:hover{color:var(--po-primary)}
.po-pc-short{font-size:13.5px;color:#5d6675;line-height:1.55;margin-bottom:12px;flex:1}
.po-pc-chips{margin-bottom:12px;min-height:22px}
.po-pc-quote{font-size:16px;color:var(--po-primary)}


.po-pc-wa{display:flex;align-items:center;justify-content:center;width:42px;background:var(--po-wa);color:#fff;
  border-radius:var(--po-radius);font-size:18px}
.po-pc-wa:hover{background:#1eb455;color:#fff}



/* ---------------------------------------------------------------- long-form SEO body */
.po-seo{max-width:var(--po-measure);margin:0 auto;font-size:16.5px;line-height:1.78;color:#3d4553}
.po-seo:has(.po-seo-lead),.po-seo:has(.po-seo-feats){max-width:none}
.po-seo h2{margin:0 0 16px;color:var(--po-ink)}
.po-seo h2:first-child{margin-top:0}
.po-seo p{margin-bottom:18px}
.po-seo-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}
.po-seo-fig{margin:0}
.po-seo-fig img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--po-line);
  box-shadow:var(--po-shadow)}
.po-seo .po-seo-kicker{font-weight:600;color:var(--po-ink);margin-bottom:12px}
.po-seo-list{list-style:none;padding:0;margin:0 0 26px}
.po-seo-list li{position:relative;padding-left:28px;margin-bottom:11px;font-size:15.5px;line-height:1.6}

.po-seo .po-seo-cols{columns:2;column-gap:40px}
.po-seo-cols li{break-inside:avoid}
.po-seo .po-seo-feats{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.po-seo-feats li{background:#fff;border:1px solid var(--po-line);border-left:3px solid var(--po-primary);
  border-radius:var(--po-radius);padding:18px 22px}
.po-seo-feats strong{display:block;font-size:16px;color:var(--po-ink);margin-bottom:4px}
.po-seo-feats span{font-size:14.5px;line-height:1.65;color:#5d6675}

/* ---------------------------------------------------------------- tags + cross links */
.po-tags h3,.po-other h3{font-size:var(--h-card);margin-bottom:16px;color:var(--po-ink)}
.po-tags ul{list-style:none;padding:0;margin:0 0 38px;display:flex;flex-wrap:wrap;gap:9px}
.po-tags a{display:inline-block;background:#fff;border:1px solid var(--po-line);border-radius:20px;
  padding:7px 16px;font-size:13px;color:#5d6675}
.po-tags a:hover{border-color:var(--po-primary);color:var(--po-primary)}
.po-other ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px 20px}
.po-other a{font-size:13.5px;color:#5d6675;display:block;padding:5px 0;
  border-bottom:1px solid transparent}
.po-other a:hover{color:var(--po-primary);border-bottom-color:var(--po-line)}

/* ---------------------------------------------------------------- consultation band */
.po-consult{background:linear-gradient(100deg,var(--po-ink) 0%,#242c3e 55%,#3a4a7d 100%)}
.po-consult-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px 48px;
  align-items:center}
.po-consult h2{color:#fff;margin-bottom:14px}
.po-consult p{color:#c2cbe2;font-size:15.5px;line-height:1.7;margin:0}
.po-consult .po-kicker{color:#8fa8ff}
.po-consult-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.po-consult-actions .button{margin:0;text-align:center}
.po-consult-phone{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;
  border-radius:var(--po-radius);padding:14px 20px;font-size:19px;font-weight:600;color:var(--po-ink)}
.po-consult-phone .mdi{color:var(--po-primary);font-size:22px}
.po-consult-phone:hover{color:var(--po-primary)}

@media(max-width:991px){
  .po-seo-lead{grid-template-columns:1fr;gap:28px}
  .po-seo-fig{order:-1}
  .po-consult-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .po-seo{font-size:15.5px}
  .po-seo-cols{columns:1}
  .po-seo-feats{grid-template-columns:1fr}
  .po-seo-feats li{padding:16px 18px}
  .po-other ul{grid-template-columns:1fr 1fr;gap:6px 16px}
  .po-other a{font-size:13px}
}
@media(max-width:479px){.po-other ul{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- quote CTAs (replaces prices) */
.po-quotecta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.po-quotecta .button{margin:0}
.po-quotecta-note{flex-basis:100%;text-align:center;font-size:13px;color:var(--po-muted)}
.po-pc-quote{font-size:14.5px;font-weight:600;color:var(--po-ink);line-height:1.35;margin:0 0 14px}
.po-pc-quote span{display:block;font-size:11.5px;font-weight:400;color:var(--po-muted);margin-top:4px;line-height:1.5}


.po-toolbar-note{font-size:13px;color:var(--po-muted);display:flex;align-items:center;gap:7px}
.po-toolbar-note .mdi{color:var(--po-wa);font-size:16px}
.po-toolbar-note em{font-style:normal;color:var(--po-ink);font-weight:500}
.po-plan-tag{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--po-primary);
  font-weight:600;margin:0 0 12px}
.po-plan-alt{display:block;text-align:center;font-size:13px;color:var(--po-muted);margin-top:10px}
.po-plan-alt:hover{color:var(--po-primary)}
.po-plan .button{margin:0}
.po-buybox .po-pc-quote{font-size:16px;margin-bottom:18px}
.po-buybox .button + .button{margin-top:2px}


/* ---------------------------------------------------------------- real product photos */
.po-pc-img.po-pc-photo{background:#fff;padding:0}
.po-pc-img.po-pc-photo img{aspect-ratio:4/3;object-fit:contain;padding:10px}

/* ---------------------------------------------------------------- welcome popup */
.po-welcome .modal-dialog{max-width:760px}
.po-welcome .modal-content{border:0;border-radius:6px;overflow:hidden;position:relative}
.po-welcome-close{position:absolute;top:10px;right:12px;z-index:5;background:rgba(255,255,255,.9);
  border:0;width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1;color:var(--po-ink);
  cursor:pointer}
.po-welcome-close:hover{background:#fff;color:var(--po-primary)}
.po-welcome-grid{display:grid;grid-template-columns:1fr 1fr}
.po-welcome-aside{background:linear-gradient(150deg,var(--po-ink) 0%,#242c3e 60%,#3a4a7d 100%);
  color:#fff;padding:34px 30px}
.po-welcome-kicker{display:inline-block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border-radius:20px;padding:5px 12px;margin-bottom:14px}
.po-welcome-aside h4{color:#fff;font-size:var(--h-panel);line-height:1.3;margin-bottom:18px}
.po-welcome-aside ul{list-style:none;padding:0;margin:0 0 20px}
.po-welcome-aside li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;
  color:#c9d2e8;margin-bottom:10px}
.po-welcome-aside .mdi{color:var(--po-primary);font-size:16px;flex-shrink:0;line-height:1.4}
.po-welcome-wa{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px}
.po-welcome-wa .mdi{color:var(--po-wa);font-size:18px}
.po-welcome-wa:hover{color:var(--po-wa)}
.po-welcome-form{padding:34px 30px;background:#fff}
.po-welcome-form .form-wrap{margin-bottom:14px}
@media(max-width:767px){
  .po-welcome .modal-dialog{max-width:100%;margin:12px}
  .po-welcome-grid{grid-template-columns:1fr}
  .po-welcome-aside{padding:26px 22px}
  .po-welcome-aside h4{font-size:19px;margin-bottom:14px}
  .po-welcome-aside ul{margin-bottom:14px}
  .po-welcome-aside li{font-size:13.5px;margin-bottom:7px}
  .po-welcome-form{padding:24px 22px}
}
@media(max-width:479px){
  /* on a small phone show only the form — never a full-screen blocker */
  .po-welcome-aside ul,.po-welcome-wa{display:none}
  .po-welcome-aside{padding:20px 22px}
}


/* ---------------------------------------------------------------- compatibility line on cards */
.po-pc-compat{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.45;
  color:var(--po-good);margin:0 0 12px;min-height:20px}
.po-pc-compat .mdi{font-size:14px;line-height:1.3;flex-shrink:0}
.po-panel-wa{color:var(--po-wa)}
.po-panel-wa:hover{border-color:var(--po-wa);color:var(--po-wa)}

/* ---------------------------------------------------------------- filters */
.po-filters{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:22px;position:sticky;top:90px}
.po-filters h5{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--po-muted);margin:20px 0 10px}
.po-filters h5:first-child{margin-top:0}
.po-filters label{display:block;font-size:14px;margin-bottom:7px;cursor:pointer;color:#3d4553}
.po-filters label:hover{color:var(--po-primary)}
.po-filters input{margin-right:8px}
.po-filter-reset{font-size:13px;color:var(--po-primary);background:none;border:0;padding:0;cursor:pointer;margin-top:16px}
.po-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.po-toolbar select{border:1px solid var(--po-line);border-radius:var(--po-radius);padding:8px 12px;font-size:14px}
.po-count{font-size:14px;color:var(--po-muted)}

/* ---------------------------------------------------------------- bundle banner */
.po-bundle{background:linear-gradient(100deg,var(--po-ink) 0%,#232b3d 60%,var(--po-primary) 190%);color:#fff;
  border-radius:var(--po-radius);padding:34px 38px;display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:16px 34px}
.po-bundle>*{min-width:0}
.po-bundle h3{color:#fff;margin:0 0 6px;font-size:var(--h-panel)}
.po-bundle p{margin:0;color:#c9d2e8;font-size:15px}

/* ---------------------------------------------------------------- table wrapper */
/* Any table can scroll inside its own box. The page itself never scrolls sideways. */
.po-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:4px}
.po-tablewrap > table{margin-bottom:0}
@media(max-width:575px){
  .po-tablewrap{position:relative}
  .po-specs{min-width:420px}
  .po-addons{min-width:520px}
}

/* ---------------------------------------------------------------- matrix */
.po-matrix-wrap{overflow-x:auto;border:1px solid var(--po-line);border-radius:var(--po-radius);background:#fff}
.po-matrix{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.po-matrix caption{caption-side:top;text-align:left;padding:18px 20px;font-size:13px;color:var(--po-muted);border-bottom:1px solid var(--po-line)}
.po-matrix th,.po-matrix td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--po-line)}
.po-matrix thead th{background:var(--po-ink);color:#fff;font-weight:500;font-size:13px;position:sticky;top:0}
.po-matrix tbody th{text-align:left;font-weight:500;min-width:230px}
.po-matrix tbody th a{color:var(--po-ink)}
.po-matrix tbody th a:hover{color:var(--po-primary)}
.po-matrix tbody tr:nth-child(even){background:#fafbfd}
.po-matrix tbody tr:hover{background:#f2f6ff}
.po-yes{color:var(--po-good);font-weight:700}
.po-cfg{color:var(--po-warn);font-weight:700}
.po-no{color:#c3c8d0}
.po-legend{font-size:13px;color:var(--po-muted);margin-top:14px}

/* ---------------------------------------------------------------- compare */
.po-verdict{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:16px}
.po-verdict>div{flex:1 1 300px;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:28px}
.po-verdict h4{font-size:var(--h-sub);margin-bottom:16px}
.po-verdict ul{list-style:none;padding:0;margin:0}
.po-verdict li{padding-left:26px;position:relative;margin-bottom:10px;line-height:1.55;font-size:15px}
.po-verdict li:before{position:absolute;left:0;top:0;font-family:"Material Design Icons";font-size:16px}
.po-stay{border-top:3px solid #9b9b9b}

.po-switch{border-top:3px solid var(--po-primary)}

.po-ctable{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--po-line)}
.po-ctable th,.po-ctable td{padding:14px 16px;border-bottom:1px solid var(--po-line);text-align:left;vertical-align:top}
.po-ctable thead th{background:var(--po-ink);color:#fff;font-weight:500}
.po-ctable thead th:last-child{background:var(--po-primary)}
.po-ctable tbody tr:nth-child(even){background:#fafbfd}
.po-ctable td:last-child{font-weight:500;color:var(--po-ink)}
.po-ctable-wrap{overflow-x:auto}

/* ---------------------------------------------------------------- pricing */
.po-plan{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:34px 28px;height:100%;
  display:flex;flex-direction:column;position:relative;transition:.25s}
.po-plan:hover{box-shadow:var(--po-shadow)}
.po-plan-pop{border-color:var(--po-primary);box-shadow:var(--po-shadow-hi)}
.po-plan-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--po-primary);color:#fff;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:2px;white-space:nowrap}
.po-plan h3{font-size:var(--h-panel);margin-bottom:6px}
.po-plan-best{font-size:14px;color:#5d6675;line-height:1.55;min-height:66px}
.po-plan-price{font-size:40px;font-weight:600;color:var(--po-ink);line-height:1;margin:14px 0 4px}
.po-plan-price small{font-size:15px;font-weight:400;color:var(--po-muted)}
.po-plan-billed{font-size:13px;color:var(--po-muted);margin-bottom:20px}
.po-plan ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.po-plan li{padding-left:24px;position:relative;font-size:14.5px;line-height:1.5;margin-bottom:9px}

.po-plan li.po-out{color:#a9b0bc}

.po-addons{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid var(--po-line)}
.po-addons td{padding:14px 18px;border-bottom:1px solid var(--po-line)}
.po-addons td:nth-child(2){font-weight:600;white-space:nowrap;color:var(--po-primary)}
.po-addons td:last-child{color:#5d6675;font-size:14px}

/* ---------------------------------------------------------------- faq */
.po-faq{max-width:860px;margin:0 auto}
.po-faq-item{border:1px solid var(--po-line);border-radius:var(--po-radius);background:#fff;margin-bottom:10px;overflow:hidden}
.po-faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 22px;font-size:16px;font-weight:500;
  color:var(--po-ink);cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;line-height:1.45}
.po-faq-q:hover{color:var(--po-primary)}
.po-faq-q .mdi{color:var(--po-primary);font-size:20px;transition:.2s;flex-shrink:0}
.po-faq-item.is-open .po-faq-q .mdi{transform:rotate(45deg)}
/* A closed answer is clipped to zero height, but `overflow:hidden` only hides it from the eye. A
   screen reader still reads every answer on the page as though the accordion were fully open, and
   any link inside one is still reachable with Tab — from a spot the sighted user cannot see.
   `visibility:hidden` removes it from the accessibility tree and the tab order as well. The delay
   holds it visible for the length of the collapse so the animation still plays; opening switches
   it back with no delay so the answer is announced immediately. */
.po-faq-a{max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .3s ease,visibility 0s linear .3s}
.po-faq-item.is-open .po-faq-a{visibility:visible;transition:max-height .3s ease,visibility 0s}
.po-faq-a p{padding:0 22px 22px;margin:0;color:#5d6675;line-height:1.72;font-size:15px}

/* ---------------------------------------------------------------- quote */
.po-quote{max-width:860px;margin:0 auto;text-align:center;border:0;padding:0;background:none}
.po-quote:before{content:none}
.po-quote p{font-size:22px;line-height:1.6;color:var(--po-ink);font-weight:300}
.po-quote cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--po-muted)}

/* ---------------------------------------------------------------- cta band */
.po-cta-band{background:linear-gradient(100deg,var(--po-ink) 0%,#242c3e 55%,#3a4a7d 100%)}
.po-cta-band h2{color:#fff;margin-bottom:10px}
.po-cta-band p{color:#c2cbe2;margin:0;font-size:15.5px;line-height:1.65}
.po-cta-band .button{margin:6px 4px}
.po-cta-call{display:block;margin-top:8px;color:#aab5cf;font-size:14px}
.po-btn-wa{background:var(--po-wa);color:#fff!important;border-color:var(--po-wa)}
.po-btn-wa:hover{background:#1eb455;border-color:#1eb455}

/* ---------------------------------------------------------------- metrics */
.po-metrics{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 30px;list-style:none;padding:0}
.po-metrics li{flex:1 1 160px;background:#fff;border:1px solid var(--po-line);border-left:3px solid var(--po-primary);
  border-radius:var(--po-radius);padding:22px}
.po-metrics strong{display:block;font-size:30px;line-height:1;color:var(--po-ink)}
.po-metrics span{font-size:13.5px;color:#5d6675}

/* ---------------------------------------------------------------- prose / specs */
.po-prose{max-width:var(--po-measure);margin:0;font-size:16.5px;line-height:1.78;color:#3d4553}
.po-prose-center{margin-left:auto;margin-right:auto;text-align:center}
.po-prose h2{margin:40px 0 14px}
.po-prose h3{margin:30px 0 12px}
.po-prose ul,.po-prose ol{padding-left:22px;margin-bottom:20px}
.po-prose li{margin-bottom:8px}
.po-specs{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid var(--po-line)}
.po-specs th,.po-specs td{padding:13px 18px;border-bottom:1px solid var(--po-line);text-align:left}
.po-specs th{width:36%;font-weight:500;color:var(--po-muted);background:#fafbfd}
.po-sticky-buy{position:sticky;top:100px}
.po-buybox{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:26px}
.po-buybox .button{margin-bottom:10px}
.po-buybox ul{list-style:none;padding:0;margin:18px 0 0;font-size:14px}
.po-buybox li{padding-left:22px;position:relative;margin-bottom:8px;color:#5d6675}



/* ---------------------------------------------------------------- product detail page */
.po-pdp-media{background:#f7f9fc;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:30px}
.po-pdp-media img{display:block;width:100%;height:auto}
.po-pdp-title{font-size:32px;line-height:1.25;margin-bottom:14px}
.po-pdp-lead{font-size:17px;line-height:1.65;color:#5d6675}
.po-buybox{margin-top:22px}
.po-sub-h3{font-size:var(--h-sub);margin-bottom:14px}
.po-section-cta{text-align:center;margin-top:30px;margin-bottom:0}
.po-prose-wide{max-width:none}
.po-note-center{text-align:center;margin-top:18px}
.po-note-tight{margin-top:10px}
@media(max-width:767px){.po-pdp-title{font-size:25px}.po-pdp-media{padding:18px}}

/* ---------------------------------------------------------------- cards / links */
.po-card{display:block;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:28px;
  height:100%;transition:.25s}
.po-card:hover{border-color:var(--po-primary);box-shadow:var(--po-shadow);transform:translateY(-3px)}
.po-card .mdi,.po-card .linearicons{font-size:32px;color:var(--po-primary);display:block;margin-bottom:14px}
.po-card h3{font-size:var(--h-card);margin-bottom:8px;color:var(--po-ink)}
.po-card p{font-size:14.5px;color:#5d6675;line-height:1.6;margin:0}
.po-card-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:500;color:var(--po-primary)}
.po-related h3{font-size:var(--h-card);margin-bottom:14px}
.po-related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.po-related li a{display:inline-block;background:#fff;border:1px solid var(--po-line);border-radius:20px;
  padding:7px 16px;font-size:13.5px;color:#3d4553}
.po-related li a:hover{border-color:var(--po-primary);color:var(--po-primary)}
.po-taglist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.po-taglist a{display:inline-block;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);
  padding:9px 15px;font-size:14px;color:#3d4553}
.po-taglist a:hover{border-color:var(--po-primary);color:var(--po-primary)}

/* ---------------------------------------------------------------- forms */
.po-form .form-wrap{margin-bottom:14px}
.po-form-note{font-size:12.5px;color:var(--po-muted);margin-top:12px;text-align:center}
.po-form-note .mdi{margin-right:4px}
.po-formcard{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:32px}
.po-formcard h3{font-size:var(--h-panel);margin-bottom:6px}
.po-formcard>p{color:#5d6675;font-size:15px;margin-bottom:22px}


/* ---------------------------------------------------------------- footer */
.po-footer{padding:0}
.po-footer .bg-gray-15{background:var(--po-ink)}
.po-footer .container{max-width:var(--po-rail)}

.po-foot-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px 40px;
  padding:38px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.po-foot-cta h3{color:#fff;font-size:var(--h-panel);margin:0 0 6px;line-height:1.3}
.po-foot-cta p{color:#98a1b5;margin:0;font-size:14.5px;line-height:1.6}
.po-foot-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.po-foot-cta-btns .button{margin:0}

.po-footer-top{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px 64px;padding:56px 0 40px;align-items:start}
.po-foot-brand img{display:block;margin-bottom:20px}
.po-foot-brand p{color:#98a1b5;font-size:14px;line-height:1.75;margin:0 0 20px}
.po-foot-contact{list-style:none;padding:0;margin:0 0 20px}
.po-foot-contact li{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14.5px;
  color:#98a1b5;overflow-wrap:anywhere}
.po-foot-contact .mdi{color:var(--po-primary);font-size:16px;width:16px;text-align:center;flex-shrink:0}
.po-foot-contact a{color:#fff}
.po-foot-contact a:hover{color:var(--po-primary)}
.po-foot-social{list-style:none;padding:0;margin:0;display:flex;gap:8px}
.po-foot-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:3px;
  border:1px solid rgba(255,255,255,.15);color:#98a1b5;font-size:14px}
.po-foot-social a:hover{background:var(--po-primary);border-color:var(--po-primary);color:#fff}

.po-foot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 26px;align-items:start}
.po-foot-col{min-width:0}



.po-foot-col h6{color:#fff;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;margin:0;
  padding:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-foot-list{list-style:none;padding:0;margin:0}
.po-foot-list li{margin-bottom:9px}
.po-foot-list a{color:#98a1b5;font-size:13.5px;line-height:1.5;display:block;overflow-wrap:anywhere}
.po-foot-list a:hover{color:var(--po-primary)}

.po-foot-areas{color:#98a1b5;font-size:13.5px;line-height:1.7;margin:0 0 26px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1)}
.po-foot-areas strong{color:#fff}

.po-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 28px}
.po-footer{padding-bottom:0}
.po-disclaimer{font-size:11.5px;color:#6c7488;line-height:1.75;margin-bottom:18px}
.po-foot-legal{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.po-foot-legal p{margin:0;color:#98a1b5;font-size:13px}
.po-foot-legal a{color:#98a1b5}
.po-foot-legal a:hover{color:var(--po-primary)}
.po-foot-legal-links span{color:#4a5163;margin:0 4px}

/* ---------------------------------------------------------------- partner software cards */
.po-partner{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:26px;
  height:100%;display:flex;flex-direction:column;transition:.25s}
.po-partner:hover{border-color:var(--po-primary);box-shadow:var(--po-shadow)}
.po-partner-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.po-partner-badge{flex-shrink:0;width:48px;height:48px;border-radius:var(--po-radius);background:#eef2ff;
  color:var(--po-primary);font-size:16px;font-weight:600;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center}
.po-partner h3{font-size:var(--h-card);margin:0 0 2px;line-height:1.2}
.po-partner-cat{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--po-muted);margin:0}
.po-partner-one{font-size:14.5px;line-height:1.6;color:#5d6675;margin:0 0 16px}
.po-partner-does{list-style:none;padding:0;margin:0 0 18px;flex:1}
.po-partner-does li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;margin-bottom:7px;color:#3d4553}

.po-partner-links{display:flex;gap:8px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--po-line)}
.po-partner-links a{font-size:13px;font-weight:500;color:var(--po-primary);
  border:1px solid rgba(102,137,255,.3);border-radius:var(--po-radius);padding:6px 12px}
.po-partner-links a:hover{background:var(--po-primary);color:#fff;border-color:var(--po-primary)}


/* ---------------------------------------------------------------- split hero with product shot */
.po-hero-split{padding:84px 0 78px;text-align:left}
.po-hero-split .po-hero-inner{max-width:var(--po-rail)}
.po-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.po-hero-split h1{font-size:46px;line-height:1.12}
.po-hero-split .po-hero-sub{margin-left:0;max-width:none}
.po-hero-split .po-hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.po-hero-split .po-hero-cta .button{margin:0}
.po-hero-split .po-hero-proof{margin-top:22px}
.po-hero-shot{margin:0}
.po-hero-shot img{display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 26px 60px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14)}
.po-hero-shot figcaption{margin-top:12px;font-size:12.5px;color:#a9b4cd;line-height:1.55}

/* ---------------------------------------------------------------- screenshot blocks */
.po-shot-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;align-items:center}
.po-shot-flip .po-shot{order:2}
.po-shot{margin:0}
.po-shot img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--po-line);
  box-shadow:0 14px 40px rgba(21,21,21,.10);background:#fff}
.po-shot figcaption{margin-top:12px;font-size:12.5px;color:var(--po-muted);line-height:1.6}
.po-shot-points{list-style:none;padding:0;margin:0}
.po-shot-points li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--po-line)}
.po-shot-points li:last-child{border-bottom:0}
.po-shot-points .mdi{color:var(--po-primary);font-size:17px;line-height:1.5;flex-shrink:0}
.po-shot-points strong{display:block;font-size:15px;color:var(--po-ink);margin-bottom:3px}
.po-shot-points span{font-size:14px;color:#5d6675;line-height:1.55}

/* ---------------------------------------------------------------- how it works */
.po-hiw{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  counter-reset:hiw}
.po-hiw li{position:relative;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);
  padding:30px 28px 28px}
.po-hiw li:not(:last-child):after{content:"";position:absolute;top:52px;right:-17px;width:8px;height:8px;
  border-top:2px solid var(--po-primary);border-right:2px solid var(--po-primary);transform:rotate(45deg)}
.po-hiw-n{display:block;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--po-primary);margin-bottom:12px}
.po-hiw h3{font-size:var(--h-card);margin-bottom:10px}
.po-hiw p{font-size:14.5px;line-height:1.65;color:#5d6675;margin:0}

/* ---------------------------------------------------------------- roles */
.po-role{background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:28px;height:100%;
  border-top:3px solid var(--po-primary);transition:.25s}
.po-role:hover{box-shadow:var(--po-shadow)}
.po-role .mdi{font-size:28px;color:var(--po-primary);display:block;margin-bottom:14px}
.po-role h3{font-size:var(--h-card);margin-bottom:8px}
.po-role p{font-size:14.5px;line-height:1.65;color:#5d6675;margin:0}

/* ---------------------------------------------------------------- works-with strip */
.po-logos{padding:44px 0;background:#fff;border-bottom:1px solid var(--po-line)}
.po-logos-lead{text-align:center;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--po-muted);margin-bottom:22px}
.po-logos-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.po-logos-list li{font-size:14px;font-weight:500;color:#4a5361;background:#f7f9fc;border:1px solid var(--po-line);
  border-radius:var(--po-radius);padding:9px 18px}

/* ---------------------------------------------------------------- testimonials */
.po-tm{margin:0;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);padding:30px;
  height:100%;display:flex;flex-direction:column;position:relative}
.po-tm:before{content:"\201C";position:absolute;top:6px;right:20px;font-size:64px;line-height:1;
  color:var(--po-primary);opacity:.16}
.po-tm blockquote{margin:0 0 20px;padding:0;border:0;background:none;font-size:16px;line-height:1.7;
  color:var(--po-ink);flex:1}
.po-tm blockquote:before{content:none}
.po-tm figcaption{border-top:1px solid var(--po-line);padding-top:16px}
.po-tm figcaption strong{display:block;font-size:14.5px;color:var(--po-ink)}
.po-tm figcaption span{font-size:13px;color:var(--po-muted)}

@media(max-width:1199px){
  .po-hero-split h1{font-size:38px}
  .po-hero-grid{gap:34px}
  .po-shot-row{gap:32px}
}
@media(max-width:991px){
  .po-hero-split{padding:62px 0 56px;text-align:center}
  .po-hero-grid{grid-template-columns:1fr;gap:34px}
  .po-hero-split .po-hero-cta{justify-content:center}
  .po-hero-split .po-hero-sub{margin-left:auto;margin-right:auto;max-width:640px}
  .po-shot-row{grid-template-columns:1fr;gap:28px}
  .po-shot-flip .po-shot{order:0}
  .po-hiw{grid-template-columns:1fr;gap:16px}
  .po-hiw li:not(:last-child):after{display:none}
}
@media(max-width:767px){
  .po-hero-split h1{font-size:30px}
  .po-hero-shot figcaption{font-size:12px}
  .po-logos-list li{font-size:13px;padding:7px 14px}
}


/* ---------------------------------------------------------------- search */
.po-nav-search{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--po-line);border-radius:var(--po-radius);color:var(--po-ink);font-size:18px}
.po-nav-search:hover{border-color:var(--po-primary);color:var(--po-primary)}
.po-search{position:relative;max-width:860px;margin:0 auto 18px}
.po-search .mdi{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--po-muted)}
.po-search input{width:100%;border:1px solid var(--po-line);border-radius:var(--po-radius);background:#fff;
  padding:16px 18px 16px 52px;font-size:16px;color:var(--po-ink)}
.po-search input:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--po-primary);
  box-shadow:0 0 0 3px rgba(102,137,255,.25)}
.po-search-count{text-align:center;font-size:13.5px;color:var(--po-muted);margin-bottom:26px}
.po-search-results{max-width:860px;margin:0 auto;display:grid;gap:12px}
.po-sresult{display:block;background:#fff;border:1px solid var(--po-line);border-radius:var(--po-radius);
  padding:20px 22px;transition:.2s}
.po-sresult:hover{border-color:var(--po-primary);box-shadow:var(--po-shadow)}
.po-sresult-sec{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--po-primary);margin-bottom:6px}
.po-sresult h3{font-size:var(--h-card);margin:0 0 6px;color:var(--po-ink);line-height:1.35}
.po-sresult p{font-size:13.5px;color:#5d6675;line-height:1.6;margin:0}
.po-search-empty{max-width:860px;margin:0 auto;text-align:center}
.po-search-empty p{color:#5d6675;margin-bottom:16px}
.po-search-empty .po-taglist{justify-content:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ==========================================================================
   SECTION RHYTHM
   The theme's .section-sm is only 30px of padding — far too tight for content
   sections, and every section on this site uses it. Re-scaled per breakpoint.
   ========================================================================== */
.section-sm{padding:52px 0}

/* ==========================================================================
   RESPONSIVE — 1440 / 1280 / 1024 / 768 / 430 / 390 / 360
   Nothing may scroll sideways at any width.
   ========================================================================== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,table{max-width:100%}
.po-prose img{height:auto}

/* ---- 1400 and below: tighten the wide grids ---- */
@media(max-width:1399px){
  .po-hero-split h1{font-size:38px}
  .po-hero-grid{gap:34px}
  .po-shot-row{gap:34px}
  .po-footer-top{grid-template-columns:270px minmax(0,1fr);gap:38px 44px}
  .po-foot-grid{gap:30px 20px}
  .po-nav-phone{font-size:14px}
}

/* ---- 1200 and below: navbar collapses to the slide-out panel ---- */
@media(max-width:1199px){
  .po-panel-actions{display:flex}
  .rd-navbar-fixed .po-nav-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;
    margin:10px 18px 22px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12)}
  .rd-navbar-fixed .po-nav-phone{justify-content:center;color:#fff;padding:6px 0}
  .rd-navbar-fixed .po-nav-phone small{color:#98a1b5}
  .rd-navbar-fixed .po-nav-quote{text-align:center}
  .po-hero-split{padding:66px 0 60px}
  .po-shot-row{gap:30px}
  .po-footer-top{grid-template-columns:1fr;gap:38px}
  .po-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- 992 and below: two-up layouts ---- */
@media(max-width:991px){
  .section-sm{padding:42px 0}
  .po-hero-split{text-align:center}
  .po-hero-grid{grid-template-columns:1fr;gap:34px}
  .po-hero-split .po-hero-cta{justify-content:center}
  .po-hero-split .po-hero-sub{margin-left:auto;margin-right:auto;max-width:640px}
  .po-hero-shot{max-width:620px;margin:0 auto}
  .po-shot-row{grid-template-columns:1fr;gap:28px}
  .po-shot-flip .po-shot{order:0}
  .po-hiw{grid-template-columns:1fr;gap:16px}
  .po-hiw li:not(:last-child):after{display:none}
  .po-trust ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .po-trust li{border-bottom:1px solid var(--po-line)}
  .po-trust li:nth-child(3n){border-right:0}
  .po-bundle{grid-template-columns:1fr;text-align:center;justify-items:center}
  .po-foot-cta{grid-template-columns:1fr}
  .po-verdict>div{flex:1 1 100%}
  .po-filters{position:static;margin-bottom:26px}
  .po-plan-best{min-height:0}
  /* The email address is the longest item in the bar and the least likely to be tapped on a
     tablet. It goes before anything is allowed to wrap. */
  .po-topbar-hide-md{display:none}
}

/* ---- 768 and below: single column, stacked CTAs ---- */
@media(max-width:767px){
  .section-sm{padding:34px 0}
  /* One line, centred, and only what a visitor on a phone can act on. */
  .po-topbar{font-size:12px}
  .po-topbar-inner{justify-content:center;gap:14px;padding:0 12px;height:38px}
  .po-topbar-left{display:none}
  .po-topbar-hide-sm{display:none}
  .po-topbar-right{gap:18px}
  /* the floating buttons must not sit on top of the footer's last lines */
  .po-footer-bottom{padding-bottom:88px}
  .po-hero{padding:56px 0 52px}
  .po-hero-split h1{font-size:29px;line-height:1.2}
  .po-hero h1{font-size:28px;line-height:1.22}
  .po-hero-sub{font-size:15.5px}
  .po-hero-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .po-hero-cta .button{margin:0;width:100%}
  .po-hero-shot figcaption{font-size:12px}
  .po-head{margin-bottom:30px}
  .po-sub{font-size:15px}
  .po-trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-trust li:nth-child(3n){border-right:1px solid var(--po-line)}
  .po-trust li:nth-child(2n){border-right:0}
  .po-trust li:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
  .po-cta-band{text-align:center}
  .po-cta-band .text-lg-right{margin-top:22px}
  .po-cta-band .button{margin:5px 3px;width:100%}
  .po-quote p{font-size:18px}
  .po-metrics strong{font-size:24px}
  .po-metrics li{flex:1 1 100%}
  /* footer columns become tap-to-open accordions, so the phone footer is scannable
     instead of being 60 links long */
  .po-foot-grid{grid-template-columns:1fr;gap:0}
  .po-foot-col{border-bottom:1px solid rgba(255,255,255,.09)}
  
  
  
  .po-foot-col h6{font-size:12.5px;letter-spacing:.06em}
  .po-foot-list{padding-bottom:14px}
  .po-foot-cta-btns{width:100%}
  .po-foot-cta-btns .button{flex:1;min-width:0}

  .po-foot-legal{flex-direction:column;align-items:flex-start;gap:8px}
  .po-specs th{width:44%}
  .po-prose{font-size:15.5px}
  .po-plan{padding:28px 22px}
  .po-jungle-card{padding:24px}
  .po-quotecta{flex-direction:column;align-items:stretch}
  .po-quotecta .button{width:100%}
  .po-search input{font-size:16px;padding:14px 16px 14px 46px}
  .po-faq-q{padding:16px 18px;font-size:15px}
  .po-faq-a p{padding:0 18px 18px}
  /* floating buttons shrink to circles so they never cover content */
  .po-fab{height:52px;width:52px;padding:0;justify-content:center;bottom:18px}
  .po-fab-left{left:16px}
  .po-fab-right{right:16px}
  .po-fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}

/* ---- 575 and below: Bootstrap's sm boundary ---- */
@media(max-width:575px){
  .section-sm{padding:32px 0}
  .po-seo-feats{grid-template-columns:1fr}
  .po-other ul{grid-template-columns:1fr 1fr}
  .po-quotecta .button,.po-hero-cta .button{width:100%}
  .po-toolbar{flex-direction:column;align-items:flex-start;gap:10px}
  .po-crumbs ol{font-size:12px}
}

/* ---- 480 and below: the small-phone pass ---- */
@media(max-width:479px){
  .section-sm{padding:30px 0}
  .po-hero-split h1,.po-hero h1{font-size:26px}
  .po-topbar-right{gap:14px}
  .po-topbar-right span:not(.mdi){font-size:12px}
  .po-foot-grid{grid-template-columns:1fr}
  .po-partner-links{flex-direction:column}
  .po-partner-links a{text-align:center}
  
  
  .po-steps li,.po-metrics li{flex:1 1 100%}
  .po-role,.po-partner,.po-tm,.po-plan{padding:24px 20px}
  .po-logos-list li{font-size:12.5px;padding:7px 12px}
  .po-bundle{padding:26px 20px}

  .po-toolbar{flex-direction:column;align-items:flex-start}
}

/* ---- very small (360px) ---- */
@media(max-width:359px){
  .po-hero-split h1,.po-hero h1{font-size:23px}
  .po-fab{height:48px;width:48px}
  .po-fab .mdi{font-size:21px}
  .po-footer-bottom{padding-bottom:80px}
  .rd-navbar-brand img{width:150px;height:auto}
}

/* ---- wide tables scroll inside their own box, never the page ---- */
.po-matrix-wrap,.po-ctable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.po-matrix-wrap:after,.po-ctable-wrap:after{content:"";display:block}
@media(max-width:767px){
  .po-matrix-wrap,.po-ctable-wrap{position:relative}
  .po-matrix-wrap:before,.po-ctable-wrap:before{content:"Swipe to see the full table \2192";
    display:block;padding:10px 14px;font-size:12px;color:var(--po-muted);background:#fafbfd;
    border-bottom:1px solid var(--po-line)}
  .po-ctable th,.po-ctable td{padding:12px 14px;font-size:13.5px}
  .po-ctable{min-width:620px}
}

/* ---- landscape phones: keep the floating buttons out of the way ---- */
@media(max-height:480px) and (orientation:landscape){
  .po-fab{bottom:12px;height:44px;width:44px}
}

@media print{
  .section-sm{padding:20px 0}
  a[href]:after{content:""}
}

/* ============================================================================
   HEADER — one row, never wrapping, and never covering the content
   ==========================================================================*/

/* The nav was breaking onto two lines ("Software / Food & Beverage POS / Machines" above
   "Integrations / Plans / Compare"). Six labels plus the logo, search, phone block and CTA
   ask for more than the 1200px rail can give, and the theme leaves the items shrinkable, so
   the row collapsed. Pin the row: the nav never wraps and never shrinks; the phone block is
   the only flexible element, and it is what gives way first on a narrow desktop. */
.rd-navbar-classic.rd-navbar-static .rd-navbar-main{gap:18px;flex-wrap:nowrap}
/* The Machines catalogue is the width of the rail, not 270px, so it needs a positioning context
   that IS the rail. That is the header row itself — `.rd-navbar-main` — and not the `<ul>` of menu
   labels, which starts after the logo. Anchored to the `<ul>`, the panel began under "Software"
   and lost about 250px of the rail on the left, which is why four columns of product names were
   fighting for room they should have had. `.apb-wide{position:static}` hands the job up here. */
.rd-navbar-classic.rd-navbar-static .rd-navbar-main{position:relative}
.rd-navbar-classic.rd-navbar-static .rd-navbar-nav{
  display:flex;align-items:center;flex-wrap:nowrap;margin-right:0}
/* nowrap belongs on the label in the bar, not on the whole item — inherited into the panel it
   stopped every product name in the catalogue from wrapping, so they ran through the column
   dividers and into the next column. */
.rd-navbar-classic.rd-navbar-static .rd-navbar-nav > .apb{flex:0 0 auto}
.rd-navbar-classic.rd-navbar-static .rd-navbar-nav > .apb + .apb{margin-left:26px}
.rd-navbar-classic.rd-navbar-static .rd-navbar-nav > .apb-right{margin-left:auto}
.rd-navbar-classic.rd-navbar-static .apb-trigger{white-space:nowrap;font-size:15.5px}
.rd-navbar-classic.rd-navbar-static .rd-navbar-main-element{flex:0 0 auto}
.rd-navbar-brand,.po-nav-cta{flex:0 0 auto}
.rd-navbar-brand img{width:142px;height:auto}
.po-nav-phone{flex:0 1 auto;min-width:0}

/* Narrow desktops: recover width by degrading the least important things first —
   the "CALL US" caption, then the nav gap, then the phone number itself. */
@media(max-width:1399px){
  .rd-navbar-classic.rd-navbar-static .rd-navbar-nav > .apb + .apb{margin-left:20px}
  .rd-navbar-classic.rd-navbar-static .apb-trigger{font-size:15px}
  .po-nav-phone small{display:none}
  .rd-navbar-brand img{width:132px}
}
@media(max-width:1279px){
  .rd-navbar-classic.rd-navbar-static .rd-navbar-nav > .apb + .apb{margin-left:15px}
  .rd-navbar-classic.rd-navbar-static .apb-trigger{font-size:14.5px}
  .po-nav-phone{display:none}          /* the phone stays reachable in the top bar and the FAB */
}

/* The stuck header is position:fixed, so it sits over the page. Without scroll-padding an
   in-page anchor — or a browser restoring your scroll position when you re-open a page —
   lands with the heading hidden underneath it. Reserve the header's height on every scroll. */
html{scroll-padding-top:104px}
@media(max-width:1199px){html{scroll-padding-top:72px}}
@media(max-width:575px){html{scroll-padding-top:64px}}
:target{scroll-margin-top:104px}
@media(max-width:1199px){:target{scroll-margin-top:72px}}

/* Full-bleed background on the stuck bar so it reads as one band rather than a floating card. */
.rd-navbar-static.rd-navbar--is-stuck,.rd-navbar--is-clone{
  background:#fff;border-bottom:1px solid var(--po-line)}

/* ============================================================================
   IMAGES — no boxed borders, one rounded corner value everywhere
   ==========================================================================*/

/* Every image treatment had its own idea of a corner (4, 5, 6, 8px) and most were ringed with a
   1px line, which read as a box drawn around the picture rather than as the picture itself.
   One token, applied to every image surface; depth now comes from a soft shadow, not a rule. */
:root{--po-r-img:14px;--po-r-img-sm:10px}

.po-shot img,.po-seo-fig img{
  border:0;border-radius:var(--po-r-img);
  box-shadow:0 12px 34px rgba(21,21,21,.10),0 2px 6px rgba(21,21,21,.05)}
.po-hero-shot img{border:0;border-radius:var(--po-r-img)}

/* The machines site leads with a photograph of a counter rather than a screenshot. Product shots
   are cut out on white, so on a dark hero they would float as a white rectangle — the plate below
   makes that deliberate instead of accidental, and matches the cards the same photos appear on
   further down the page. */
.po-hero-rig{
  background:#fff;border-radius:var(--po-r-img);padding:22px 26px;
  box-shadow:0 22px 60px rgba(0,0,0,.30)}
.po-hero-rig img{
  display:block;width:100%;height:auto;border-radius:0;
  max-height:330px;object-fit:contain}
.po-hero-rig figcaption{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--po-line);
  color:var(--po-ink-2);font-size:13px;line-height:1.55;text-align:left}
@media(max-width:991px){
  .po-hero-rig{max-width:560px;margin:0 auto;padding:18px 20px}
  .po-hero-rig img{max-height:270px}
}
@media(max-width:575px){
  .po-hero-rig{padding:14px 15px}
  .po-hero-rig img{max-height:200px}
  .po-hero-rig figcaption{font-size:12.5px;margin-top:11px;padding-top:10px}
}

/* Product detail: the picture sat inside a bordered grey box with square corners.
   Keep the tinted plate — it stops white-background product shots dissolving into the page —
   but drop the outline and round it. */
.po-pdp-media{
  border:0;border-radius:var(--po-r-img);
  background:linear-gradient(160deg,#f9fbfe 0%,#f2f5fa 100%)}
.po-pdp-media img{border-radius:calc(var(--po-r-img) - 6px)}

/* Product cards: the rule under each thumbnail cut the card in two. The image area now shares
   the card's rounded top corners and blends into the body instead of being fenced off. */
.po-pc-img{
  border-bottom:0;padding:18px 18px 6px;
  background:linear-gradient(160deg,#f9fbfe 0%,#f4f7fb 100%);
  border-radius:var(--po-r-img) var(--po-r-img) 0 0}
.po-pc-img img{border-radius:8px;transition:transform .35s ease}
.po-pc:hover .po-pc-img img{transform:scale(1.035)}
.po-pc{border-radius:var(--po-r-img);overflow:hidden}

/* Any image that slipped through the named treatments above. */
.po-prose img,.po-seo img,.po-photo img,figure img{border-radius:var(--po-r-img-sm)}

@media(max-width:575px){
  :root{--po-r-img:11px;--po-r-img-sm:8px}
}
@media(prefers-reduced-motion:reduce){
  .po-pc-img img,.po-pc:hover .po-pc-img img{transition:none;transform:none}
}

/* ============================================================================
   LIST BULLETS — drawn, not typed
   ==========================================================================*/

/* These bullets used an icon-font codepoint. The theme ships Material Design Icons v1.4.57,
   where a tick is \F222, but the codepoints I wrote were from v2 — so \F12C resolved to a
   letterform and every "Verified machine list" line began with a stray green "a".
   Rather than pin the site to one font version, the marks are now inline SVG in a data URI:
   no network request, no font-face dependency, crisp at any size, and the colour is baked in
   per state. A version bump of the icon font can no longer change what these lists look like. */

.po-seo-list,.po-partner-does,.po-switch,.po-plan,.po-buybox,.po-stay{
  list-style:none;padding:0;margin:0}
.po-seo-list li,.po-partner-does li,.po-switch li,.po-plan li,.po-buybox li,.po-stay li{
  position:relative;padding-left:30px;min-height:22px}
.po-seo-list li::before,.po-partner-does li::before,.po-switch li::before,
.po-plan li::before,.po-buybox li::before,.po-stay li::before{
  content:"";position:absolute;left:0;top:.18em;
  width:19px;height:19px;flex:0 0 19px;
  background-repeat:no-repeat;background-position:center;background-size:19px 19px}

/* Included / verified — a tick inside a soft green disc. */
.po-seo-list li::before,.po-partner-does li::before,.po-switch li::before,
.po-plan li::before,.po-buybox li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2316a34a' fill-opacity='.12'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.1' fill='none' stroke='%2316a34a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Not included on this plan — a muted cross, so the contrast with the ticks is obvious. */
.po-plan li.po-out::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2394a3b8' fill-opacity='.14'/%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' fill='none' stroke='%2394a3b8' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E")}
.po-plan li.po-out{color:var(--po-muted)}

/* "Reasons to stay where you are" — informational, so a neutral dot rather than a tick. */
.po-stay li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2364748b' fill-opacity='.12'/%3E%3Ccircle cx='10' cy='10' r='3.2' fill='%2364748b'/%3E%3C/svg%3E")}

/* On a dark band the discs need to lift off the background rather than sink into it. */
.context-dark .po-seo-list li::before,.context-dark .po-partner-does li::before,
.context-dark .po-switch li::before,.context-dark .po-plan li::before,
.context-dark .po-buybox li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234ade80' fill-opacity='.18'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.1' fill='none' stroke='%234ade80' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* The partner cards centre their prose, which left the ticks floating away from their text.
   The list itself is now left-aligned inside the centred card, so marks and words line up. */
.po-partner-does{text-align:left;display:inline-block;margin:0 auto}
.po-partner-does li + li{margin-top:9px}

/* ============================================================================
   FOOTER — rebuilt on the reference layout
   ==========================================================================*/

/* Six things across a 1200px rail (brand + five link columns) left roughly 135px per column,
   which is what forced "POS FOR BUSINESSES" to truncate to "POS FOR BUSINESSE…". The brand
   block now has its own row, so the five columns get an even share of the full rail. */
.po-foot-brandrow{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px 64px;
  padding:52px 0 34px;text-align:left}
.po-foot-brandrow .po-foot-brand{display:contents}
.po-foot-brand > img{grid-column:1;justify-self:start;margin-bottom:18px}
.po-foot-brand > p{grid-column:1;margin:0 0 20px;max-width:46ch}
.po-foot-contact{grid-column:2;grid-row:1 / span 3;align-self:start}
.po-foot-social{grid-column:1}

.po-footer-top{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding:0 0 46px;border-top:1px solid rgba(255,255,255,.10)}
.po-foot-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 30px;padding-top:42px}

/* Left-aligned, like the reference: headings and links share one edge per column. */
.po-foot-col{min-width:0;text-align:left}
.po-foot-h{margin:0 0 16px}
.po-foot-toggle{
  all:unset;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  line-height:1.35;overflow-wrap:anywhere}   /* wraps rather than truncating */
.po-foot-chev{display:none}
.po-foot-list{list-style:none;padding:0;margin:0}
.po-foot-list li{margin:0 0 11px}
.po-foot-list a{
  color:#9aa3b6;font-size:14px;line-height:1.5;display:block;text-decoration:none;
  overflow-wrap:anywhere;transition:color .18s ease}
.po-foot-list a:hover,.po-foot-list a:focus-visible{color:#fff}

/* Desktop: the toggle is a heading, nothing more. It only becomes a control on a phone. */
@media(min-width:768px){
  .po-foot-toggle{cursor:default;pointer-events:none}
  .po-foot-list{display:block}
}

@media(max-width:1199px){
  .po-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
  .po-foot-brandrow{grid-template-columns:minmax(0,1fr);gap:24px}
  .po-foot-contact{grid-column:1;grid-row:auto}
}
@media(max-width:767px){
  .po-foot-brandrow{padding:38px 0 26px}
  .po-foot-grid{grid-template-columns:1fr;gap:0;padding-top:8px}
  .po-foot-col{border-bottom:1px solid rgba(255,255,255,.09)}
  .po-foot-h{margin:0}
  .po-foot-toggle{cursor:pointer;padding:16px 0;min-height:52px}
  .po-foot-chev{
    display:block;flex:0 0 12px;width:12px;height:12px;
    border-right:2px solid #9aa3b6;border-bottom:2px solid #9aa3b6;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease}
  .po-foot-toggle[aria-expanded="true"] .po-foot-chev{
    transform:rotate(225deg) translate(-2px,-2px)}
  /* Collapsing is opt-in: the class is added by script, so with JS off every link stays
     readable rather than the whole footer disappearing. */
  .po-foot-js .po-foot-list{display:none}
  .po-foot-js .po-foot-col.is-open .po-foot-list{display:block;padding:0 0 16px}
}
@media(prefers-reduced-motion:reduce){.po-foot-chev{transition:none}}

/* The footer used to take its alignment by inheritance from `.page`, which the theme centres.
   That made it hostage to load order and to whatever stylesheet a browser happened to have
   cached — the columns rendered centred more than once. It now states its own alignment, and
   the two lines that genuinely belong centred say so. Nothing here depends on an ancestor. */
.po-footer{text-align:left}
.po-footer .po-foot-brandrow,.po-footer .po-foot-grid,.po-footer .po-foot-col,
.po-footer .po-foot-brand,.po-footer .po-foot-contact,.po-footer .po-foot-list,
.po-footer .po-foot-cta,.po-footer .po-foot-legal{text-align:left}
.po-footer .po-foot-areas,.po-footer .po-disclaimer{text-align:center}

/* The theme's mega-menu layout used to be re-stated here, at three-class specificity, because the
   theme's own rules outranked anything shorter. No mega-menu survives in the navigation, so the
   whole block has gone; the `.apb` component near the end of this file is the only dropdown. */

/* ============================================================================
   CARD AND BUYBOX BUTTONS — same height, label centred
   ==========================================================================*/

/* "Get a quote" carries a WhatsApp glyph and "Details" does not. The icon's line box made the
   green button taller than its neighbour, and because the theme's button is a block with
   padding rather than a centring box, the label sat against the top edge of that extra height.
   Both buttons are now centring boxes with a shared minimum height, so a pair always matches
   whatever is inside it. */




/* Below the widest cards the two labels stop fitting side by side. Rather than clip them,
   stack them full width — a full-width primary button is the better mobile pattern anyway. */
@media(max-width:1399px){
  
  
}

/* Every button on the site is a centring box, not a block with padding. The theme's `.button` is
   `display:inline-block`, so a label sits on the text baseline — which is why "Get a quote", with
   its WhatsApp glyph, grew taller than the plain "Details" beside it and pushed its own label to
   the top of the box. Doing this once here means any pair of buttons matches, wherever it appears:
   product cards, the buy box, the hero, the comparison rows, the footer band. */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  line-height:1.2;text-align:center;vertical-align:middle}
.button > .mdi,.button > .fa,.button > .icon{line-height:1;flex:0 0 auto}
.button-block{display:flex;width:100%}
.button-block + .button-block{margin-top:10px}

/* ============================================================================
   CARD ACTION PAIR — "Get a quote" and "Details" are the same size, always
   ==========================================================================*/

/* Three generations of this rule had accumulated and were competing; they are all deleted and
   this is the only one left. The green button kept coming out taller than the outlined one
   because its label carries a WhatsApp glyph, and the fix was relying on the parent's
   `align-items:stretch` to even them up — which fails the moment anything changes the
   container's display. `align-self:stretch` on each button instead makes the height of a pair
   a property of the buttons themselves, so it cannot be undone from outside. */

.po-pc-actions{display:flex;gap:10px;align-items:stretch;flex-wrap:nowrap;margin-top:16px}
.po-pc-actions > .button{
  /* geometry, stated in full so nothing is inherited from the theme's button padding */
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:1 1 0;min-width:0;align-self:stretch;
  min-height:46px;padding:11px 8px;margin:0;
  /* the label must fit a ~112px column at 4-up, so it is a notch smaller and never wraps */
  font-size:12px;letter-spacing:.03em;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.po-pc-actions > .button > .mdi{font-size:14px;line-height:1;flex:0 0 auto;margin:0}

/* Three across and narrower: give each button the full card width rather than clip the label. */
@media(max-width:1199px){
  .po-pc-actions{flex-wrap:wrap;gap:8px}
  .po-pc-actions > .button{flex:1 1 100%;font-size:12.5px}
}

/* ============================================================================
   HEADER SEARCH — an icon, not a boxed field
   ==========================================================================*/

/* The 1px box around the magnifier read as a stuck focus ring sitting next to "Compare".
   It is now a plain icon with a soft hover disc; the real keyboard focus ring still appears
   on :focus-visible, so nothing is lost for keyboard users. */
.po-nav-search{
  border:0;background:transparent;border-radius:50%;
  color:var(--po-ink-2);box-shadow:none}
.po-nav-search:hover{background:rgba(102,137,255,.10);color:var(--po-primary);border-color:transparent}
.po-nav-search:focus-visible{outline:3px solid var(--po-primary);outline-offset:2px}

/* ============================================================================
   MACHINES MENU — a catalogue preview, not a list of words
   ==========================================================================*/

/* Four columns of link text told a visitor nothing about the machines, which on a hardware site is
   the only question that matters. Each category now leads with a photograph of a real machine from
   it and says how many are inside. Same specificity as the theme's own megamenu rules, so it wins. */
/* The panel itself is the shared `.apb-cat`; what follows is only the card inside it. */

.po-cat-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.po-cat > a{
  display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;
  padding:7px;border-radius:10px;text-decoration:none;
  transition:background .16s ease,transform .16s ease}
.po-cat > a:hover{background:#f2f6fd;transform:translateX(2px)}
.po-cat-img{
  display:block;width:64px;height:48px;border-radius:8px;overflow:hidden;
  background:linear-gradient(160deg,#f9fbfe,#eef2f8)}
.po-cat-img img{width:100%;height:100%;object-fit:contain;display:block}
.po-cat-txt{display:block;min-width:0}
.po-cat-txt strong{
  display:block;font-size:14px;font-weight:600;color:var(--po-ink);line-height:1.3}
.po-cat-txt em{
  display:block;font-style:normal;font-size:11.5px;color:var(--po-muted);margin-top:1px}
.po-cat > a:hover .po-cat-txt strong{color:var(--po-primary)}

@media(max-width:1399px){
  .apb-cat-col{padding:0 11px}
  .po-cat > a{grid-template-columns:52px minmax(0,1fr);gap:9px}
  .po-cat-img{width:52px;height:40px}
  .po-cat-txt strong{font-size:13px}
}

/* ============================================================================
   HEADER — quieter, with one clear action
   ==========================================================================*/

/* The bar was carrying a search box, a phone block and a green button all competing at the same
   weight, which is why it read as cluttered. The phone number is now the quiet default and the
   quote button the only filled element, so there is one obvious thing to press. */
.rd-navbar-classic.rd-navbar-static .rd-navbar-main{padding-top:14px;padding-bottom:14px}
.po-nav-cta{gap:14px}
.po-nav-phone{
  padding-left:14px;border-left:1px solid var(--po-line);
  font-size:16px;letter-spacing:-.01em}
.po-nav-phone small{
  font-size:10px;letter-spacing:.13em;color:var(--po-muted);margin-bottom:1px}
.po-nav-phone .mdi{color:var(--po-primary);font-size:17px}
/* 44px stays the tappable size — the icon is quieter, not the target. */
.po-nav-search{width:44px;height:44px;font-size:17px;color:var(--po-muted)}
.po-nav-quote{
  padding:11px 20px;font-size:12.5px;letter-spacing:.04em;border-radius:8px;
  box-shadow:0 6px 16px rgba(37,211,102,.26)}
.po-nav-quote:hover{box-shadow:0 8px 22px rgba(37,211,102,.34)}

/* A hairline under the bar so the page below starts cleanly instead of floating. */
.rd-navbar-classic.rd-navbar-static .rd-navbar-main-outer{border-bottom:1px solid var(--po-line)}
.rd-navbar--is-stuck .rd-navbar-main-outer,
.rd-navbar--is-clone .rd-navbar-main-outer{border-bottom:0}

/* The active section should be obvious. */
.rd-navbar-classic.rd-navbar-static .apb.active > .apb-trigger{color:var(--po-primary)}


/* ============================================================================
   CATEGORY FILTER — with the machine beside its name
   ==========================================================================*/

/* The gallery that used to sit above the list duplicated this control and pushed the machines
   below the fold. The picture belongs here instead: this is what you are looking at while you
   choose, so the thumbnail does work rather than decoration. */
.po-fcat{
  display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;
  padding:6px 8px;margin:0 0 2px;border-radius:9px;cursor:pointer;
  font-size:14px;line-height:1.3;transition:background .15s ease}
.po-fcat:hover{background:#f2f6fd}
.po-fcat input{grid-column:1;grid-row:1;justify-self:start;margin:0;
  width:17px;height:17px;accent-color:var(--po-primary);cursor:pointer}
.po-fcat-img{
  grid-column:1;grid-row:1;justify-self:end;pointer-events:none;
  width:34px;height:26px;border-radius:5px;overflow:hidden;
  background:linear-gradient(160deg,#f9fbfe,#eef2f8)}
.po-fcat-img img{width:100%;height:100%;object-fit:contain;display:block}
.po-fcat-txt{display:flex;align-items:baseline;gap:6px;min-width:0;color:var(--po-ink-2)}
.po-fcat-txt em{font-style:normal;font-size:11.5px;color:var(--po-muted)}
.po-fcat:has(input:checked){background:#eaf0ff}
.po-fcat:has(input:checked) .po-fcat-txt{color:var(--po-primary);font-weight:600}

@media(max-width:575px){
  .po-fcat{grid-template-columns:38px minmax(0,1fr);gap:9px}
  .po-fcat-img{width:30px;height:23px}
}

/* Option and detail shots under the main product photograph. */
.po-pdp-gallery{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.po-pdp-gallery figure{margin:0}
.po-pdp-gallery img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  background:linear-gradient(160deg,#f9fbfe,#f2f5fa);border-radius:var(--po-r-img-sm)}
.po-pdp-gallery figcaption{
  margin-top:6px;font-size:12px;line-height:1.4;color:var(--po-muted);text-align:center}
@media(max-width:575px){
  .po-pdp-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Shown only when a filter combination matches nothing. */
.po-grid-empty{
  margin:8px 0 0;padding:22px 24px;border:1px dashed var(--po-line);border-radius:var(--po-r-img-sm);
  background:#fcfdff;color:var(--po-ink-2);font-size:15px;line-height:1.6;text-align:center}
.po-grid-empty[hidden]{display:none}
.po-linkish{
  font:inherit;font-weight:600;color:var(--po-primary);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.po-linkish:hover{color:var(--po-primary-dark)}

/* ============================================================================
   THE DOWNLOADS LIST
   ==========================================================================*/

/* What used to be here was the navbar's brochure link back when it was a mega-menu with a
   magnifier beside it. Both are gone — Brochures is an `.apb` panel like everything else — so only
   the page-level file list below remains. */

.po-dl-list{list-style:none;margin:0;padding:0}
.po-dl-row{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:14px 16px;background:#fff;border:1px solid var(--po-line);
  border-radius:var(--po-r-img-sm);margin-bottom:9px}
.po-dl-row:hover{border-color:var(--po-primary)}
.po-dl-icon{font-size:26px;color:var(--po-primary);line-height:1}
.po-dl-name{min-width:0}
.po-dl-name strong{display:block;font-size:15.5px;color:var(--po-ink);line-height:1.35}
.po-dl-name em{
  display:block;font-style:normal;font-size:12.5px;color:var(--po-muted);margin-top:2px;
  text-transform:uppercase;letter-spacing:.05em}
.po-dl-act{display:flex;align-items:center;gap:14px;flex-shrink:0}
.po-dl-see{font-size:13.5px;font-weight:600;color:var(--po-primary);white-space:nowrap}
@media(max-width:767px){
  .po-dl-row{grid-template-columns:30px minmax(0,1fr);gap:11px}
  .po-dl-act{grid-column:1 / -1;justify-content:flex-start;margin-top:4px}
}

/* The other-categories list at the foot of a category page. */
.po-cat-links{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.po-cat-links a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;background:#fff;border:1px solid var(--po-line);
  border-radius:var(--po-r-img-sm);font-size:14.5px;font-weight:600;color:var(--po-ink);
  min-height:48px;transition:border-color .15s ease,color .15s ease}
.po-cat-links a:hover{border-color:var(--po-primary);color:var(--po-primary)}
.po-cat-links em{font-style:normal;font-size:12.5px;font-weight:400;color:var(--po-muted)}

/* ============================================================================
   BROCHURES MENU — the Compare dropdown, with a submenu on each entry
   ==========================================================================*/

/* Every menu in the bar is this one component. Software, Food & Beverage, Machines, Integrations,
   Compare and Brochures were four different things with four different open/close behaviours, two
   of which were the theme's and would not shut when the pointer left them.

   The look is the theme's own dropdown, to the pixel — 270px wide, 22px/15px/34px/34px of padding,
   the same soft shadow, 8px between rows — so nothing in the bar changed appearance except that it
   now all matches. The machinery is not the theme's: `.rd-navbar-dropdown` carries a bare
   `display:none` and reveals itself through a `.focus` class the theme's JS adds on enter and drops
   only on a click elsewhere, which is the whole reason a menu could stay open behind you.

   Opening is `:hover` OR `.is-open`. Hover opens it the instant the pointer arrives; the script
   holds `.is-open` for a moment after the pointer leaves, so crossing the gap between the trigger
   and its panel — or between a row and its submenu — does not shut it in your face, and letting go
   properly always does. That grace period is measured in time, not pixels, so it behaves the same
   at 1280px as it does at 2560. */

.apb{position:relative;display:flex;align-items:center}
/* Brochures is the last item and is pushed to the right-hand end of the bar. */
.apb-right{margin-left:auto}

.apb-trigger{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;
  font-size:16px;font-weight:500;line-height:1.2;color:var(--po-ink);text-decoration:none;
  transition:color .2s ease}
.apb:hover > .apb-trigger,.apb.is-open > .apb-trigger{color:var(--po-primary)}
.apb-trigger:focus-visible{outline:3px solid var(--po-primary);outline-offset:2px}

/* A caret says the word is a menu rather than a link. It points down, and up while open. */
.apb-caret{
  width:7px;height:7px;flex:0 0 7px;margin-top:-3px;
  border-bottom:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);opacity:.45;transition:transform .22s ease,opacity .2s ease}
.apb:hover > .apb-trigger .apb-caret,.apb.is-open > .apb-trigger .apb-caret{
  opacity:1;transform:rotate(-135deg);margin-top:2px}

/* --- the panel ---------------------------------------------------------------- */
.apb-menu{
  position:absolute;top:100%;left:0;right:auto;z-index:15;
  width:270px;margin:0;padding:22px 15px 26px 34px;
  list-style:none;background:#fff;border:none;text-align:left;
  box-shadow:0 0 10px 0 rgba(0,0,0,.1);
  visibility:hidden;opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.apb-right > .apb-menu{left:auto;right:0}
.apb:hover > .apb-menu,.apb.is-open > .apb-menu,.apb:focus-within > .apb-menu{
  visibility:visible;opacity:1;transform:translate3d(0,0,0)}
/* Bridges the gap under the trigger so the pointer can reach the panel without crossing dead
   space. The grace period covers the rest. */
.apb-menu::before{content:"";position:absolute;top:-26px;left:0;right:0;height:26px}

.apb-item{position:relative;margin:0}
.apb-item + .apb-item{margin-top:8px}

.apb-link,.apb-sublink{
  display:flex;align-items:center;
  padding:4px 0;min-height:26px;
  color:var(--po-ink-2);font-size:14px;line-height:1.5;letter-spacing:.05em;
  text-decoration:none;text-align:left;transition:color .2s ease}
.apb-link:hover,.apb-item:hover > .apb-link,.apb-item.is-open > .apb-link,
.apb-sublink:hover,.apb-sublink:focus-visible{color:var(--po-primary)}

.apb-arrow{
  margin-left:auto;width:6px;height:6px;flex:0 0 6px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);opacity:.5;transition:opacity .2s ease}
.apb-item:hover > .apb-link .apb-arrow{opacity:1}

/* --- the submenu: opens to the right, flipping only when there is no room ------ */
.apb-sub{
  position:absolute;top:-23px;left:100%;right:auto;z-index:2;
  width:270px;margin:0 0 0 15px;padding:22px 15px 24px 34px;
  list-style:none;background:#fff;text-align:left;
  box-shadow:0 0 10px 0 rgba(0,0,0,.1);
  visibility:hidden;opacity:0;transform:translate3d(30px,0,0);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
/* The 15px gutter between panel and submenu is a gap the pointer has to cross, so it is bridged
   the same way the one under the trigger is. */
.apb-sub::before{content:"";position:absolute;top:0;bottom:0;left:-17px;width:17px}
.apb.opens-left .apb-sub{
  left:auto;right:100%;margin:0 15px 0 0;transform:translate3d(-30px,0,0)}
.apb.opens-left .apb-sub::before{left:auto;right:-17px}
.apb-item:hover > .apb-sub,.apb-item.is-open > .apb-sub,
.apb.opens-left .apb-item:hover > .apb-sub,.apb.opens-left .apb-item.is-open > .apb-sub{
  visibility:visible;opacity:1;transform:translate3d(0,0,0)}
.apb-subitem{margin:0}
.apb-subitem + .apb-subitem{margin-top:8px}

/* --- Machines: the same panel, widened for the catalogue ----------------------- */
/* The only menu that is not a list of words. It keeps the photographs, because on a hardware site
   the question a visitor is actually asking is what the machine looks like — but it is the same
   box, opening and closing under the same rules as every other. */
.apb-wide{position:static}
.apb-cat{
  /* Spans the rail, inset by the same gutter the header content uses, so the first column starts
     under the logo and the last ends level with the quote button. */
  left:var(--po-gutter);right:var(--po-gutter);width:auto;margin:0;
  padding:26px 4px 24px;
  /* stretch, not start: the columns hold 2, 4, 4 and 3 machines, and with each column only as tall
     as its own contents the dividers between them ended at four different heights. */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.apb-cat-col{min-width:0;padding:0 20px;list-style:none}
.apb-cat-col + .apb-cat-col{border-left:1px solid var(--po-line)}
.apb-cat-h{
  margin:0 0 12px;padding:0 0 9px;border-bottom:1px solid var(--po-line);
  font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;
  color:var(--po-muted)}

/* Nothing inside a panel inherits the bar's nowrap. A product name that cannot wrap has nowhere to
   go but through the divider and into the column beside it. */
.apb-menu,.apb-sub,.apb-cat,.apb-link,.apb-sublink,.po-cat-txt{white-space:normal}

/* On the phone the navbar is a stacked panel, so every level stacks with it. */
@media(max-width:1199px){
  .apb,.apb-right{display:block;width:100%;margin:0;position:relative}
  .apb + .apb{margin-top:4px}
  .apb-trigger{width:100%;padding:9px 56px 9px 18px;font-size:15px}
  .apb-caret{position:absolute;right:26px;margin-top:0}
  .apb.is-open > .apb-trigger .apb-caret{margin-top:0}
  .apb-menu,.apb-sub,.apb-cat{
    position:static;width:auto;max-width:none;padding:0 0 0 18px;margin:0;
    background:transparent;box-shadow:none;display:block;
    visibility:visible;opacity:1;transform:none;
    max-height:0;overflow:hidden;transition:max-height .24s ease}
  .apb-menu::before,.apb-sub::before{display:none}
  .apb.is-open > .apb-menu{max-height:2400px;padding-top:6px;padding-bottom:6px}
  .apb-item.is-open > .apb-sub{max-height:900px;padding-top:4px;padding-bottom:6px}
  .apb-link,.apb-sublink{padding:9px 18px;min-height:44px}
  .apb-arrow{transform:rotate(135deg)}
  .apb-item.is-open > .apb-link .apb-arrow{transform:rotate(-45deg)}
  .apb-cat-col{padding:0}
  .apb-cat-col + .apb-cat-col{border-left:none;margin-top:14px}
  .apb-cat-h{margin:0 0 8px;padding:0 18px 6px}
}

/* Every dropdown on the site reads left to right. The theme centres `.page`, and anything that
   does not set its own alignment inherits it, which is how the menus once rendered centred. */
.apb-menu,.apb-sub,.apb-item,.apb-subitem,.apb-link,.apb-sublink,
.apb-cat-col,.apb-cat-h,.po-cat,.po-cat-txt{text-align:left}

/* The brochure for the page you are on, beside the thing it describes. */
.po-broch{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:20px;
  max-width:var(--po-rail);margin:0 auto;padding:24px 28px;
  background:#fff;border:1px solid var(--po-line);border-radius:var(--po-r-img)}
.po-broch-icon{font-size:40px;color:var(--po-primary);line-height:1}
.po-broch-txt h3{margin:0 0 4px;font-size:var(--h-panel);line-height:1.3}
.po-broch-txt p{margin:0;font-size:14.5px;line-height:1.6;color:var(--po-ink-2)}
.po-broch-btn{flex-shrink:0;white-space:nowrap}
.po-broch-btn span{opacity:.75;font-weight:400;margin-left:6px}
@media(max-width:767px){
  .po-broch{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:20px}
  .po-broch-icon{font-size:32px}
  .po-broch-btn{grid-column:1 / -1;margin-top:6px;text-align:center}
}

/* ============================================================================
   THE MACHINE GRID SCROLLS INSIDE THE PAGE
   ==========================================================================*/

/* Forty-three cards in one column made /hardware/ about five screens long, and the filter panel
   scrolled away after the first row — so narrowing the list meant scrolling back up to do it.
   The grid is now its own scroll pane and the filter is sticky beside it: the page is one screen
   tall, and the controls stay where you left them. */
.po-scrollpane{
  max-height:78vh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 12px 4px 4px;margin:0 -8px 0 -4px;
  /* A fade at the bottom edge says there is more below without needing a label. */
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent 100%)}
.po-scrollpane::-webkit-scrollbar{width:9px}
.po-scrollpane::-webkit-scrollbar-track{background:transparent}
.po-scrollpane::-webkit-scrollbar-thumb{
  background:#d3dae6;border-radius:20px;border:2px solid #fff}
.po-scrollpane::-webkit-scrollbar-thumb:hover{background:var(--po-primary)}
.po-scrollpane{scrollbar-width:thin;scrollbar-color:#d3dae6 transparent}

/* Once the pane is scrolled to the end there is nothing more to hint at, so the fade goes. */
.po-scrollpane.is-end{-webkit-mask-image:none;mask-image:none}

/* The filter follows the list rather than scrolling out of reach. */
@media(min-width:992px){
  .po-filters{position:sticky;top:104px;max-height:78vh;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:#d3dae6 transparent}
  .po-filters::-webkit-scrollbar{width:9px}
  .po-filters::-webkit-scrollbar-thumb{background:#d3dae6;border-radius:20px;border:2px solid #fff}
}

/* On a phone a nested scroll region fights the page scroll, so the grid runs at full height and
   the page scrolls normally. */
@media(max-width:991px){
  .po-scrollpane{max-height:none;overflow:visible;padding:0;margin:0;
    -webkit-mask-image:none;mask-image:none}
}
@media(prefers-reduced-motion:reduce){.po-scrollpane{scroll-behavior:auto}}

/* ============================================================================
   TIGHTER VERTICAL RHYTHM
   ==========================================================================*/

/* A business-type page runs to seventeen sections. At the old spacing that was well over two
   thousand pixels of padding before a single word, and the page read as mostly air. Everything
   below closes the gaps without touching the type scale — the text is the same size, there is
   just less nothing between it. */
.po-head{margin-bottom:26px}
.po-head h2{margin-bottom:10px}
.po-head .po-kicker{margin-bottom:7px}
.po-head p{margin:0 auto;max-width:var(--po-measure)}

.row-30{margin-bottom:-22px}
.row-30 > *{margin-bottom:22px}

.po-seo h2{margin-top:0;margin-bottom:12px}
.po-seo p{margin-bottom:12px}
.po-seo-list li,.po-partner-does li,.po-switch li,.po-plan li,.po-buybox li,.po-stay li{
  margin-bottom:7px}
.po-seo-feats{gap:11px;margin-bottom:20px}
.po-seo-feats li{padding:14px 16px}

.po-shot-row{gap:28px}
.po-shot-points li{padding:11px 0}
.po-trust{padding:22px 0}
.po-tags,.po-other{padding-top:0}
.po-broch{padding:20px 24px}
.po-cta-band,.po-consult{padding:34px 0}
/* Longhands, not the `padding` shorthand.
   This block tightens vertical rhythm, and writing it as `padding:15px 0` here also set the
   HORIZONTAL padding to zero — on an element that sits inside a bordered white card. The result
   was a question whose text and [+] icon touched the card border on both sides while the answer
   below it stayed indented 22px, so the two halves of every accordion row were misaligned.
   Worse, this rule is further down the file than the 767px media query, so it beat that too and
   the bug was on every screen, not just wide ones. Only the vertical padding is the point here;
   the horizontal comes from the base rule and the breakpoint, and is left alone. */
.po-faq-q{padding-top:15px;padding-bottom:15px}

/* Two sections that share a background read as one block, so the seam between them can lose its
   padding. Sections of DIFFERENT colours must keep theirs, or the bands butt together and the
   change of background looks like a mistake — which is why this is not simply `+ .section-sm`. */
.section-sm.bg-default + .section-sm.bg-default,
.section-sm.bg-gray-4 + .section-sm.bg-gray-4{padding-top:0}

@media(max-width:767px){
  .po-head{margin-bottom:20px}
  .row-30{margin-bottom:-16px}
  .row-30 > *{margin-bottom:16px}
  .po-shot-row{gap:20px}
}

/* ============================================================================
   THE COUNTER CONFIGURATOR
   ==========================================================================*/

/* The layout the client asked for, taken from the reference configurator and
   rebuilt in this site's palette: a 220px rail of steps, the stage in the
   middle, a side panel keeping score on the right. On the review the side panel
   goes and the stage takes its width, because the review already contains
   everything the panel was showing.

   Three shapes were tried before this one. A bare wizard hid six of the seven
   questions with no way to see where you were. Tiles with the radio hidden
   inside them did not read as clickable. Everything on one page as a sidebar of
   radio rows was clickable and dull, and gave the questions the narrowest
   column on the page.

   Two details from the reference are worth naming, because they are what make
   it feel like a configurator rather than a form. The rail shows the answer you
   gave each step, in accent colour, once that step is done — so the rail is a
   summary as well as a map. And Continue is dead until the step is answered,
   which is what stops somebody arriving at the review having skipped the
   question that matters most. */

.po-cf{
  --cf-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --cf-line:#e3e8f0;
  --cf-tint:#f2f6ff;
  max-width:var(--po-rail);margin:0 auto}

.po-cf-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1.25fr) minmax(268px,.82fr);
  grid-template-areas:"rail main side";
  gap:18px;align-items:start}
.po-cf-layout.is-review{
  grid-template-columns:220px minmax(0,1fr);
  grid-template-areas:"rail main"}

/* ---- the rail ------------------------------------------------------------ */
.po-cf-rail{grid-area:rail;min-width:0;position:sticky;top:96px;align-self:start}
.po-cf-rail-card{
  padding:14px;background:#fff;
  border:1px solid var(--cf-line);border-radius:18px;
  box-shadow:0 1px 2px rgba(21,21,21,.04)}
.po-cf-rail-kicker{
  margin:0 0 10px;padding:0 4px;
  font-family:var(--cf-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--po-primary)}
.po-cf-steps{display:grid;gap:6px}

.po-cf-step{
  position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);
  align-items:start;gap:11px;width:100%;
  padding:10px 11px;border:1px solid transparent;border-radius:12px;
  background:none;text-align:left;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.po-cf-step:hover{background:var(--cf-tint)}
.po-cf-step:focus-visible{outline:3px solid var(--po-primary);outline-offset:2px}

/* The number becomes a tick once the step is answered. */
.po-cf-step-i{
  grid-column:1;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--cf-line);background:#fff;
  font-family:var(--cf-mono);font-size:12px;font-weight:700;color:var(--po-muted);
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.po-cf-step-tick{display:none;font-size:13px;line-height:1}
.po-cf-step.is-done .po-cf-step-n{display:none}
.po-cf-step.is-done .po-cf-step-tick{display:block}
.po-cf-step.is-done .po-cf-step-i{
  background:var(--cf-tint);border-color:#c3d2f8;color:var(--po-primary)}
.po-cf-step.is-at{
  background:var(--cf-tint);border-color:#c9d7fb;transform:translateX(3px)}
.po-cf-step.is-at .po-cf-step-i{
  background:var(--po-primary);border-color:var(--po-primary);color:#fff;
  box-shadow:0 0 0 4px rgba(102,137,255,.16)}

.po-cf-step-copy{grid-column:2;display:grid;gap:1px;min-width:0}
.po-cf-step-copy strong{
  font-size:13px;font-weight:700;line-height:1.35;color:var(--po-ink-2);
  transition:color .2s ease}
.po-cf-step-copy small{
  font-size:11.5px;line-height:1.4;color:var(--po-muted)}
.po-cf-step.is-at .po-cf-step-copy strong{color:var(--po-ink)}
/* The chosen answer, revealed in the rail once the step is done — so the rail
   is a running summary as well as a map. Collapsed rather than hidden, so it
   animates in rather than jumping. */
.po-cf-step-val{
  display:block;font-size:12.5px;font-weight:600;color:var(--po-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-height:0;opacity:0;transition:max-height .25s ease,opacity .25s ease}
.po-cf-step.has-val .po-cf-step-val{max-height:20px;opacity:1}
.po-cf-step.has-val:not(.is-at) small{display:none}

.po-cf-reset{
  display:block;width:100%;margin-top:10px;padding:9px;
  border:0;background:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--po-primary)}
.po-cf-reset:hover{color:var(--po-primary-dark);text-decoration:underline}

/* ---- the stage ----------------------------------------------------------- */
.po-cf-main{grid-area:main;min-width:0;display:grid;gap:16px;align-content:start}
.po-cf-panel{
  display:none;gap:20px;padding:26px 28px 24px;
  background:#fff;border:1px solid var(--cf-line);border-radius:20px;
  box-shadow:0 1px 2px rgba(21,21,21,.04)}
.po-cf-panel:not([hidden]){display:grid;animation:po-cf-in .28s cubic-bezier(.16,1,.3,1)}
@keyframes po-cf-in{from{opacity:0;transform:translate3d(0,10px,0)}
                    to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.po-cf-panel:not([hidden]){animation:none}}

.po-cf-panel-head{display:grid;gap:6px}
.po-cf-kicker{
  margin:0;font-family:var(--cf-mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--po-primary)}
.po-cf-title,.po-cf-rtitle{
  margin:0;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em;
  color:var(--po-ink)}
.po-cf-title:focus,.po-cf-rtitle:focus{outline:none}
.po-cf-title:focus-visible,.po-cf-rtitle:focus-visible{
  outline:3px solid var(--po-primary);outline-offset:4px}
.po-cf-lead{
  margin:0;font-size:14.5px;line-height:1.6;color:var(--po-ink-2);max-width:var(--po-measure)}

/* ---- the choice cards ---------------------------------------------------- */
/* Two per row. Three was tried for the seven-choice step and every title broke onto
   three lines — "Items / have / barcodes" — because a third of the stage is not enough
   width for a sentence. Seven cards over four rows reads better than seven cramped ones. */
.po-cf-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.po-cf-cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.po-cf-card{display:block;margin:0;cursor:pointer;min-width:0}
/* Clipped, not display:none — it keeps its place in the tab order, still answers
   to arrow keys inside its group, and still announces "checked". */
.po-cf-card input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.po-cf-card-in{
  position:relative;display:grid;align-content:start;gap:6px;height:100%;
  min-height:104px;padding:17px 19px 16px 21px;overflow:hidden;
  background:#fff;border:2px solid var(--cf-line);border-radius:15px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.po-cf-card:hover .po-cf-card-in{
  transform:translateY(-2px);border-color:#b9c9f6;
  box-shadow:0 12px 24px rgba(21,21,21,.07)}
.po-cf-card-title{
  font-size:15.5px;font-weight:700;line-height:1.3;color:var(--po-ink);
  padding-right:30px;transition:color .18s ease}
.po-cf-card-copy{font-size:12.5px;line-height:1.5;color:var(--po-muted)}

/* The mark: an empty box that fills with a tick.
   The tick is a real <svg> in the markup rather than a rotated `::after` built out of two
   borders. The border trick is the usual one and usually works, but a pseudo-element does not
   exist in the DOM, so nothing could confirm it was on the page — "the boxes are not ticked" had
   no answer better than a guess. An element can be inspected, cannot be lost to sub-pixel border
   rounding, and is drawn in currentColor, so revealing it is a colour change. */
.po-cf-card-mark{
  position:absolute;top:16px;right:16px;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  border:2px solid #d5dced;border-radius:50%;background:#fff;
  color:transparent;                       /* the tick is there, just not visible yet */
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.po-cf-card input[type=checkbox] + .po-cf-card-in .po-cf-card-mark{border-radius:6px}
.po-cf-tick{display:block;width:12px;height:12px;overflow:visible}

/* Chosen. Four signals at once, because one subtle one was not enough: a solid accent
   border, a tinted face, a bar down the left edge, and a filled tick. Anybody glancing
   at the grid should see which card is selected without looking for it.

   Each rule answers to two selectors: `input:checked +`, which works with no script at
   all, and `.is-on`, a class the script puts on the label. Belt and braces on purpose —
   when a report came in saying nothing looked selected there was no way to tell a rule
   that had not matched from a stylesheet that was simply out of date, and a class is
   something a test can assert and a person can see in the inspector. */
.po-cf-card input:checked + .po-cf-card-in,
.po-cf-card.is-on .po-cf-card-in{
  border-color:var(--po-primary);background:#eef3ff;
  box-shadow:0 10px 26px rgba(102,137,255,.22)}
.po-cf-card input:checked + .po-cf-card-in::before,
.po-cf-card.is-on .po-cf-card-in::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--po-primary)}
.po-cf-card input:checked + .po-cf-card-in .po-cf-card-title,
.po-cf-card.is-on .po-cf-card-in .po-cf-card-title{color:var(--po-primary-dark)}
.po-cf-card input:checked + .po-cf-card-in .po-cf-card-mark,
.po-cf-card.is-on .po-cf-card-in .po-cf-card-mark{
  border-color:var(--po-primary);background:var(--po-primary);color:#fff}
.po-cf-card input:focus-visible + .po-cf-card-in{
  outline:3px solid var(--po-primary);outline-offset:3px}

/* ---- the foot of a panel ------------------------------------------------- */
.po-cf-panel-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.po-cf-next{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:50px;padding:0 26px;
  border:1.5px solid var(--po-primary);border-radius:12px;
  background:var(--po-primary);cursor:pointer;
  font-family:var(--cf-mono);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;
  transition:background .2s ease,box-shadow .2s ease,opacity .2s ease}
.po-cf-next:hover{background:var(--po-primary-dark);box-shadow:0 12px 24px rgba(102,137,255,.28)}
.po-cf-next svg{transition:transform .2s ease}
.po-cf-next:hover svg{transform:translateX(4px)}
/* Dead until the step is answered — the one thing that stops somebody reaching
   the review having skipped the question that decides everything. */
.po-cf-next:disabled{
  background:#fff;border-color:var(--cf-line);color:var(--po-muted);
  cursor:not-allowed;box-shadow:none}
.po-cf-next:disabled svg{opacity:.4}
.po-cf-next:focus-visible{outline:3px solid var(--po-primary);outline-offset:3px}
.po-cf-back{
  min-height:50px;padding:0 20px;border:1.5px solid var(--cf-line);border-radius:12px;
  background:#fff;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--po-ink-2)}
.po-cf-back:hover{border-color:var(--po-primary);color:var(--po-primary)}

/* ---- the side panel ------------------------------------------------------ */
.po-cf-side{grid-area:side;min-width:0;position:sticky;top:96px;align-self:start}
.po-cf-side[hidden]{display:none}
.po-cf-side-card{
  padding:18px 19px;background:#fff;
  border:1px solid var(--cf-line);border-radius:18px;
  box-shadow:0 1px 2px rgba(21,21,21,.04)}
.po-cf-side-kicker{
  margin:0 0 12px;font-family:var(--cf-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--po-primary)}

.po-cf-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.po-cf-metric{
  padding:12px 13px;background:var(--cf-tint);border-radius:11px;text-align:left}
.po-cf-metric span{
  display:block;font-family:var(--cf-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--po-muted)}
.po-cf-metric strong{
  display:block;margin-top:3px;font-size:24px;font-weight:800;line-height:1;
  color:var(--po-primary)}

.po-cf-spec{margin:0;display:grid;gap:0}
.po-cf-spec-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;border-top:1px solid var(--cf-line)}
.po-cf-spec-row:first-child{border-top:0}
.po-cf-spec-row dt{
  flex:0 0 auto;font-family:var(--cf-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--po-muted)}
.po-cf-spec-row dd{
  margin:0;min-width:0;text-align:right;font-size:13px;font-weight:600;
  line-height:1.35;color:var(--po-ink)}
.po-cf-spec-row.is-empty dd{color:var(--po-muted);font-weight:400}
.po-cf-spec-row.is-at dt{color:var(--po-primary)}
.po-cf-side-wait{
  margin:0;font-size:13px;line-height:1.6;color:var(--po-muted)}

/* ---- the review ---------------------------------------------------------- */
.po-cf-order{
  padding:20px 22px;border:1px solid #cfdcfb;border-radius:16px;
  background:linear-gradient(180deg,#f7f9ff,#fff)}
.po-cf-order-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.po-cf-order-top .po-cf-side-kicker{margin:0}
.po-cf-order-count{margin:0;font-size:14.5px;color:var(--po-ink-2)}
.po-cf-order-count strong{font-size:19px;font-weight:800;color:var(--po-primary)}
.po-cf-order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.po-cf-order-item{
  padding:11px 13px;background:#fff;border:1px solid var(--cf-line);border-radius:10px}
.po-cf-order-item span{
  display:block;font-family:var(--cf-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--po-muted)}
.po-cf-order-item strong{
  display:block;margin-top:3px;font-size:13.5px;font-weight:600;line-height:1.4;
  color:var(--po-ink)}

.po-cf-recs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* The one place a photograph belongs: the moment somebody is checking whether this is
   the machine they had in mind. The question cards stay wordy — those are about the
   shop, not the hardware. */
.po-cf-rec{
  display:grid;grid-template-columns:84px minmax(0,1fr);align-items:start;gap:16px;
  padding:16px 18px;background:#fff;border:1px solid var(--cf-line);border-radius:13px;
  animation:po-cf-in .3s ease both;animation-delay:calc(var(--i,0) * 30ms)}
.po-cf-rec-img{
  display:block;width:84px;height:64px;border-radius:9px;overflow:hidden;
  background:linear-gradient(160deg,#f9fbfe,#eef2f8)}
.po-cf-rec-img img{width:100%;height:100%;object-fit:contain;display:block}
.po-cf-rec-body{min-width:0}
@media(prefers-reduced-motion:reduce){.po-cf-rec{animation:none}}
.po-cf-rec-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.po-cf-rec h4{margin:0;font-size:15px;line-height:1.35;min-width:0}
.po-cf-rec h4 a{color:var(--po-ink)}
.po-cf-rec h4 a:hover{color:var(--po-primary)}
.po-cf-qty{
  flex:0 0 auto;font-family:var(--cf-mono);font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:20px;background:var(--cf-tint);color:var(--po-primary-dark)}
.po-cf-rec-cat{
  margin:4px 0 8px;font-family:var(--cf-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--po-muted)}
.po-cf-why{margin:0;font-size:13px;line-height:1.6;color:var(--po-ink-2)}

.po-cf-soft,.po-cf-notes{
  margin:0;padding:16px 20px;background:var(--cf-tint);
  border:1px solid #dce5fb;border-radius:13px;
  font-size:14px;line-height:1.62;color:var(--po-ink-2)}
.po-cf-soft{display:flex;gap:11px;align-items:flex-start}
.po-cf-soft .mdi{flex:0 0 auto;color:var(--po-primary);font-size:18px;line-height:1.5}
.po-cf-notes h4{margin:0 0 9px;font-size:var(--h-card);line-height:1.3;color:var(--po-ink)}
.po-cf-notes ul{margin:0;padding:0 0 0 19px}
.po-cf-notes li + li{margin-top:8px}

.po-cf-bundle{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;
  padding:20px 22px;background:#fff;border:1px solid var(--cf-line);border-radius:13px}
.po-cf-bundle h4{margin:2px 0 6px;font-size:var(--h-card);line-height:1.3}
.po-cf-bundle h4 a{color:var(--po-ink)}
.po-cf-bundle h4 a:hover{color:var(--po-primary)}
.po-cf-bundle p{margin:0;font-size:14px;line-height:1.6;color:var(--po-ink-2)}
.po-cf-bundle .button{margin:0;white-space:nowrap}

.po-cf-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.po-cf-quote{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 28px;border-radius:12px;
  background:var(--po-wa);color:#fff;
  font-family:var(--cf-mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 10px 26px rgba(37,211,102,.32);transition:background .2s,box-shadow .2s}
.po-cf-quote:hover{background:#1eb455;color:#fff;box-shadow:0 14px 30px rgba(37,211,102,.4)}
.po-cf-quote .mdi{font-size:19px}
.po-cf-note{margin:0;font-size:13px;line-height:1.6;color:var(--po-muted);
  max-width:var(--po-measure)}

/* ---- narrower ------------------------------------------------------------ */
@media(max-width:1199px){
  /* The rail goes horizontal above the stage and the side panel drops under it:
     three columns will not fit, and the rail is the thing you navigate with. */
  .po-cf-layout,.po-cf-layout.is-review{
    grid-template-columns:1fr;grid-template-areas:"rail" "main" "side";gap:14px}
  .po-cf-rail,.po-cf-side{position:static}
  .po-cf-steps{
    display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .po-cf-steps::-webkit-scrollbar{display:none}
  .po-cf-step{flex:0 0 auto;width:auto;min-width:150px;transform:none}
  .po-cf-step.is-at{transform:none}
  .po-cf-side{order:3}
  .po-cf-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .po-cf-spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
}
@media(max-width:767px){
  .po-cf-panel{padding:20px 17px}
  .po-cf-title,.po-cf-rtitle{font-size:22px}
  /* The bundle block on the review kept its button beside the copy all the way down to 375px,
     which left a one-word-per-line paragraph next to a squeezed button. */
  .po-cf-bundle{grid-template-columns:1fr;gap:16px;padding:18px 16px}
  .po-cf-bundle .button{justify-self:stretch;text-align:center;white-space:normal}
  .po-cf-cards,.po-cf-cards-3{grid-template-columns:1fr;gap:9px}
  .po-cf-card-in{min-height:0;padding:14px 15px}
  .po-cf-panel-foot{flex-direction:column-reverse;align-items:stretch}
  .po-cf-next,.po-cf-back{width:100%}
  .po-cf-metrics{grid-template-columns:1fr 1fr}
  .po-cf-spec{grid-template-columns:1fr}
  .po-cf-order-grid{grid-template-columns:1fr}
  .po-cf-recs{grid-template-columns:1fr}
  .po-cf-quote{width:100%}
}

/* --- entry points into the configurator ---------------------------------- */
/* The band on the homepage and above the hardware catalogue. Same shape as the
   bundle band it sits near, tinted so two of them in a column do not read as
   the same offer made twice. */
/* `.po-bundle` is a dark gradient with white text. A variant that only swaps the background to
   a pale tint leaves `color:#fff` and `h3{color:#fff}` in place — white text on #f7f9ff, which
   is invisible. Both light variants below carry their own text colours for that reason, and
   `qa_audit` now fails any future variant that forgets. */
.po-cfg-band,.po-cross-band{
  background:#f7f9ff;border:1px solid #dce5fb;color:var(--po-ink-2)}
.po-cfg-band h3,.po-cross-band h3{color:var(--po-ink)}
.po-cfg-band p,.po-cross-band p{color:var(--po-ink-2)}
.po-cfg-band .po-kicker,.po-cross-band .po-kicker{margin-bottom:5px;color:var(--po-primary)}
.po-cfg-band h3,.po-cross-band h3{margin:0 0 8px}
.po-cross-band .mdi{font-size:15px;margin-left:7px}

/* The last row of the Machines panel in the header: forty-three machines, and
   then the page that narrows them down. */
.apb-cat-foot{grid-column:1 / -1;margin:20px 20px 0;padding-top:16px;
  border-top:1px solid var(--po-line);list-style:none}
.apb-cat-foot > a{
  display:flex;align-items:center;gap:13px;
  padding:11px 14px;border-radius:9px;background:#f7f9ff;
  text-decoration:none;transition:background .16s ease}
.apb-cat-foot > a:hover{background:#eef3ff}
.apb-cat-foot .mdi{
  flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--po-primary);color:#fff;font-size:18px}
.apb-cat-foot strong{
  display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--po-ink)}
.apb-cat-foot em{
  display:block;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--po-muted);
  margin-top:1px}
.apb-cat-foot > a:hover strong{color:var(--po-primary)}
.apb-cat-go{
  margin-left:auto;flex:0 0 7px;width:7px;height:7px;
  border-top:2px solid var(--po-primary);border-right:2px solid var(--po-primary);
  transform:rotate(45deg);transition:transform .16s ease}
.apb-cat-foot > a:hover .apb-cat-go{transform:rotate(45deg) translate(2px,-2px)}
@media(max-width:1199px){
  .apb-cat-foot{margin:10px 0 0;padding:12px 18px 0}
  .apb-cat-foot em{display:none}
}

/* ============================================================================
   THE OTHER SITE
   ==========================================================================*/

/* One company, two websites. Every link that crosses between them is marked, because a visitor
   clicking one is changing domain and a link that looks like ordinary navigation would not tell
   them that. Three places: the utility bar (always there), a block in the footer (with a line
   saying what is over there), and a band in the body of the home page. */

.po-topbar-cross a{font-weight:600}
.po-topbar-cross .mdi{font-size:16px}
@media(max-width:991px){.po-topbar-cross{display:none}}

/* --- the footer block ---------------------------------------------------- */
.po-foot-cross{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;
  margin:0 0 34px;padding:22px 26px;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(255,255,255,.04)}
.po-foot-cross-kicker{
  margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--po-primary)}
.po-foot-cross h4{margin:0 0 6px;font-size:var(--h-panel);line-height:1.25}
.po-foot-cross h4 a{color:#fff}
.po-foot-cross h4 a:hover{color:var(--po-primary)}
.po-foot-cross p{margin:0;font-size:14px;line-height:1.6;color:#c6cddc;max-width:var(--po-measure)}
.po-foot-cross .button{margin:0;white-space:nowrap}
.po-foot-cross .mdi{font-size:15px;margin-left:6px}
@media(max-width:767px){
  .po-foot-cross{grid-template-columns:1fr;padding:18px 20px;margin-bottom:26px}
  .po-foot-cross .button{justify-self:start}
}

/* --- the band in the page ------------------------------------------------ */
/* Tinted rather than the dark bundle band it borrows its shape from: two dark bands a screen
   apart read as the same offer repeated. It is styled with `.po-cfg-band` above, where the
   text colours that go with a light background live. */

/* Honeypot. Off-screen rather than display:none — a bot that skips display:none fields is common
   enough that hiding it that way defeats the point. Kept out of the layout and out of the tab
   order, so no visitor ever meets it. */
.po-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Hero backdrop on small screens.
   `background-size:cover` on a phone scales the 1920px file up by height and then shows about a
   third of its width, so almost all of those pixels are downloaded and thrown away — on the one
   element that has to paint first, over a mobile connection. An 800px copy looks identical at
   that crop and costs a quarter as much.
   The selector matches the inline style because that is where the generator writes the default
   backdrop; `!important` is needed for the same reason, since an inline style outranks a
   stylesheet. Business-type pages set their own artwork inline and are deliberately not matched. */
@media(max-width:767px){
  .po-hero[style*="hero-software.jpg"]{background-image:url(../images/hero-software-800.jpg)!important}
  .po-hero[style*="hero-hardware.jpg"]{background-image:url(../images/hero-hardware-800.jpg)!important}
}

/* Hero mask on small screens.
   The desktop gradient runs left-to-right at 105deg because the desktop hero is two columns and
   the words sit in the left one, where it is darkest. Below 768px the hero collapses to a single
   centred column and the text spans the full width — so it now runs top-to-bottom instead, and
   sits heavier, because the bright end of a left-to-right gradient lands directly under the
   sub-heading once the columns are gone.
   Measured, not guessed: build/hero_contrast.py composites this over the real photograph and
   fails the build below 4.5:1. The hardware hero was 4.35:1 at 360px before this rule. */
@media(max-width:767px){
  .po-hero-mask{background:linear-gradient(168deg,rgba(15,20,35,.95) 0%,rgba(18,20,28,.93) 55%,rgba(46,60,104,.90) 100%)}
}