/* ==========================================================================
   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)}
.po-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.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)}

/* 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}
.po-faq-q{padding:15px 0}

/* 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}
}