/** Shopify CDN: Minification failed

Line 417:67 Expected ":"

**/
/* ============================================================
   Konnect GPS — homepage design system
   assets/kgps-home.css

   ── ALL SIZES ARE IN px, DELIBERATELY ──────────────────────
   Dawn sets the root font size to 10px:

       html { font-size: calc(var(--font-body-scale) * 62.5%); }

   That is intentional on Dawn's side — it lets their CSS write
   1.5rem and get 15px. But it means any rem value written
   against a normal 16px root renders at 62.5% of its intended
   size. This file originally used rem, so every heading, label
   and gap came out roughly a third too small on the live theme.

   Everything is now px, so the layout is immune to the root
   size and to Dawn's --font-body-scale setting. Do not
   reintroduce rem here.

   Brand colour and theme tokens are injected at runtime by
   snippets/kgps-tokens.liquid. Do not hardcode brand hex values
   in this file.
   ============================================================ */

/* Hides the kgps-css-check diagnostic banner. If you can see that
   banner on the page, this stylesheet did not load. */
#kgps-css-check{display:none !important}

:root,[data-theme="light"]{
    --brand:#1B4FD8;--brand-hover:#1642B4;--brand-fg:#fff;--brand-link:#1B4FD8;--brand-tint:#EEF2FF;
    /* ACTION COLOUR — buttons only, never a band or a heading.
       Yellow means clickable. One per screen. See ACTIONS.md #5. */
    --action:#FFD814;--action-hover:#F2C900;--action-fg:#0F1111;--action-edge:#E0B800;
    --bg:#fff;--bg-alt:#F5F7FA;--bg-invert:#0D1117;--card:#fff;--well:#EDF0F5;
    --fg:#101418;--fg-70:rgba(16,20,24,.90);--fg-55:rgba(16,20,24,.74);--fg-35:rgba(16,20,24,.55);
    --on-invert:#fff;--on-invert-70:rgba(255,255,255,.90);
    --rule:rgba(16,20,24,.13);--rule-soft:rgba(16,20,24,.07);
    --shadow:0 1px 3px rgba(16,20,24,.06);--shadow-lg:0 10px 34px rgba(16,20,24,.09);
    --star:#F5A623;--save:#15803D;--win:#15803D;--r:12px;
    --logo-filter:none;
  }
  [data-theme="dark"]{
    --brand:#5B7DFF;--brand-hover:#7A97FF;--brand-fg:#0B0E12;--brand-link:#8FA9FF;--brand-tint:rgba(91,125,255,.16);
    /* Yellow already clears AA on dark, so it does not shift. */
    --action:#FFD814;--action-hover:#FFE04A;--action-fg:#0F1111;--action-edge:#C9A400;
    --bg:#0D1117;--bg-alt:#141A22;--bg-invert:#05070A;--card:#161D27;--well:#1C232D;
    --fg:#E8ECF2;--fg-70:rgba(232,236,242,.92);--fg-55:rgba(232,236,242,.76);--fg-35:rgba(232,236,242,.46);
    --on-invert:#fff;--on-invert-70:rgba(255,255,255,.68);
    --rule:rgba(232,236,242,.17);--rule-soft:rgba(232,236,242,.09);
    --shadow:0 1px 3px rgba(0,0,0,.5);--shadow-lg:0 10px 34px rgba(0,0,0,.55);
    --star:#FFB93D;--save:#2FBE84;--win:#2FBE84;
    --logo-filter:invert(1) brightness(1.7);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:500;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s}
  img{max-width:100%;display:block}
  a{color:inherit}
  h1,h2,h3,h4{letter-spacing:-.022em}
  .wrap{max-width:1280px;margin-inline:auto;padding-inline:24px}
  .wrap--narrow{max-width:920px}
  :where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

  /* ══════════════════════════════════════════════════════════
     MEDIA SYSTEM — this is the fix.
     Every image sits in a fixed-ratio box and is either
     cover (photography) or contain (product shots, graphics,
     logos). Nothing is ever stretched or arbitrarily cropped.
     ══════════════════════════════════════════════════════════ */
  .media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--well);display:block}
  .media img{width:100%;height:100%;display:block}
  .media--cover img{object-fit:cover;object-position:center}
  .media--contain img{object-fit:cover;padding:0;}
  .media--1x1{aspect-ratio:1/1}
  .media--4x3{aspect-ratio:4/3}
  .media--3x2{aspect-ratio:3/2}
  .media--16x9{aspect-ratio:16/9}
  .media--4x5{aspect-ratio:4/5}

  /* LOGO BOX — all logos get the same optical footprint
     regardless of their native aspect ratio. This is what
     was making Forbes four times the size of the rest. */
  .logoBox{display:grid;place-items:center;flex:0 0 auto}
  .logoBox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  .logoBox--press{width:132px;height:36px}
  .logoBox--client{width:118px;height:44px}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13.6px 23.2px;border-radius:10px;font:inherit;font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s}
  /* Primary = yellow, everywhere, including on the blue and dark
     bands. That is the point: the button is the only yellow thing
     on screen, so it never disappears into the section behind it. */
  .btn--primary{background:var(--action);color:var(--action-fg);border-color:var(--action-edge)}
  .btn--primary:hover{background:var(--action-hover)}
  .btn--ghost{background:transparent;color:var(--fg);border-color:var(--rule)}
  .btn--ghost:hover{border-color:var(--fg-35)}
  /* Ghost on a coloured band inverts, or it vanishes */
  .sec--brand .btn--ghost,.sec--invert .btn--ghost,.b2b .btn--ghost{
    color:#fff;border-color:rgba(255,255,255,.38);
  }
  .sec--brand .btn--ghost:hover,.sec--invert .btn--ghost:hover,.b2b .btn--ghost:hover{
    border-color:rgba(255,255,255,.75);
  }
  .btn--onInvert{background:var(--on-invert);color:#101418}
  .btn--outlineInvert{border-color:rgba(255,255,255,.32);color:#fff}
  .btn--sm{padding:8.8px 16px;font-size:14px}
  .btn--lg{padding:16px 27.2px;font-size:17px}
  .btn--block{width:100%}
  .btn--amazon{background:#FF9900;color:#0F1111;border-color:#E88B00;font-weight:700}
  .btn--amazon:hover{background:#F08800}
  .amazon__inner{display:flex;align-items:center;gap:24px;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--rule);border-radius:14px;padding:22px 26px;background:var(--card)}
  .amazon__h{font-size:18px;font-weight:700;margin:0 0 4px}
  .amazon__body{font-size:17px;color:var(--fg-70);margin:0;max-width:60ch}

  .themeToggle{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:99px;padding:2px;background:var(--bg-alt)}
  .themeToggle button{display:grid;place-items:center;width:28px;height:26px;border:0;border-radius:99px;background:transparent;color:var(--fg-55);cursor:pointer;padding:0}
  .themeToggle button svg{width:15px;height:15px}
  .themeToggle button[aria-pressed="true"]{background:var(--card);color:var(--fg);box-shadow:var(--shadow)}

  /* Floating pill variant of the theme toggle. Sits above content
     but BELOW the sticky mobile buy bar (z-index 70), so it never
     covers Add to cart. On phones it lifts above that bar. */
  .themeToggle--float{
    position:fixed;z-index:65;
    background:var(--card);border-color:var(--rule);
    box-shadow:var(--shadow-lg);
  }
  .kgps-theme-mount--br .themeToggle--float{bottom:20px;inset-inline-end:20px}
  .kgps-theme-mount--bl .themeToggle--float{bottom:20px;inset-inline-start:20px}
  .kgps-theme-mount--tr .themeToggle--float{top:84px;inset-inline-end:20px}
  @media (max-width:699px){
    /* clear the sticky buy bar */
    .kgps-theme-mount--br .themeToggle--float,
    .kgps-theme-mount--bl .themeToggle--float{bottom:calc(78px + env(safe-area-inset-bottom))}
  }

  .announce{background:var(--bg-invert);color:#fff;font-size:13px;padding:8.8px 24px}
  .announce__inner{max-width:1160px;margin-inline:auto;display:flex;gap:22.4px;align-items:center;justify-content:center;flex-wrap:wrap}
  .announce a{text-decoration:none;font-weight:600}
  .announce i{opacity:.35;font-style:normal}

  .hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
  .hdr__inner{display:flex;align-items:center;gap:24px;height:70px}
  .hdr__logo{display:grid;place-items:center;height:32px}
  .hdr__logo img{max-height:32px;width:auto;filter:var(--logo-filter)}
  .hdr__nav{display:flex;gap:17.6px;font-size:17px;font-weight:500}
  .hdr__nav a{text-decoration:none;color:var(--fg-70)}
  .hdr__nav a:hover{color:var(--fg)}
  .hdr__right{margin-inline-start:auto;display:flex;align-items:center;gap:13.6px}
  .hdr__phone{display:flex;align-items:center;gap:6.4px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
  .hdr__phone svg{width:16px;height:16px;color:var(--brand-link)}
  .hdr__cart{display:grid;place-items:center;width:22px;height:22px;color:var(--fg-70)}
  .hdr__cart svg{width:21px;height:21px}

  /* ══ HERO — GIF removed from the left column.
     It was competing with the product gallery and pushing the
     CTAs below the fold. One visual anchor per viewport. ══ */
  .hero{background:var(--bg-alt);border-bottom:1px solid var(--rule-soft);padding-block:56px}
  .hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .hero h1{font-size:clamp(34.4px,4.2vw,48px);font-weight:800;line-height:1.07;margin:0 0 18.4px;max-width:14ch}
  .hero__lede{font-size:17px;line-height:1.62;color:var(--fg-70);margin:0 0 28px;max-width:44ch}
  .hero__ratings{display:flex;gap:9.6px;flex-wrap:wrap;margin-bottom:28px}
  .rating{display:flex;align-items:center;gap:8.8px;background:var(--card);border:1px solid var(--rule);border-radius:9px;padding:9.6px 13.6px}
  .rating__ico{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto}
  .rating__ico img{max-width:100%;max-height:100%;width:auto;height:auto}
  .rating__score{font-size:16px;font-weight:700;line-height:1}
  .rating__meta{font-size:11px;color:var(--fg-55);line-height:1.3}
  .rating__meta b{display:block;color:var(--fg);font-size:12px;font-weight:600}
  .stars{display:flex;gap:0.8px}
  .stars svg{width:12px;height:12px;color:var(--star)}
  .hero__ctas{display:flex;gap:10.4px;flex-wrap:wrap}

  /* ── Hero rating: one line, not two chips (review action 15) ── */
  .hero__rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--fg-70);margin:0 0 4px}
  .hero__rating .stars svg{width:15px;height:15px}
  .hero__rating b{color:var(--fg);font-weight:700}
  .hero__rating-alt{display:inline-flex;gap:12px;color:var(--fg-55);font-size:13px}
  .hero__rating-alt span{white-space:nowrap}
  @media (max-width:699px){
    /* the platform scores collapse away — the primary figure is enough */
    .hero__rating-alt{display:none}
  }

  /* ── Buy-card guarantees: BELOW the buttons, never above ── */
  .buycard__guarantees{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--rule-soft);display:grid;gap:8px}
  .buycard__guarantees li{display:flex;gap:8.8px;align-items:flex-start;font-size:13.5px;line-height:1.4}
  .buycard__guarantees svg{flex:0 0 auto;width:15px;height:15px;margin-top:.18em;color:var(--win)}
  .buycard__guarantees b{color:var(--fg)}
  .buycard__actions{margin-top:4px}

  .buycard{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg)}
  /* v8 hero product: one image beside the title, no thumb strip */
  .buycard__top{display:flex;gap:20px;align-items:flex-start}
  .buycard__img{flex:0 0 auto;width:124px;border-radius:10px}
  .buycard__info{flex:1 1 auto;min-width:0}
  .buycard h2{font-size:18px;font-weight:700;margin:0 0 6.4px;line-height:1.3}
  .buycard__rate{display:flex;align-items:center;gap:6.4px;font-size:13px;color:var(--fg-55);margin-bottom:11.2px}
  .buycard__price{display:flex;align-items:baseline;gap:8.8px;flex-wrap:wrap}
  .buycard__now{font-size:28px;font-weight:800;line-height:1}
  .buycard__was{font-size:17px;color:var(--fg-35);text-decoration:line-through}
  .buycard__save{font-size:12px;font-weight:700;color:#fff;background:var(--save);border-radius:4px;padding:3.2px 7.2px}
  .buycard__plan{font-size:13px;color:var(--fg-70);margin:8.8px 0 0;line-height:1.5}
  .buycard__plan b{color:var(--fg)}
  .buycard__plan a{color:var(--brand-link);font-weight:600}
  .buycard__list{list-style:none;margin:18.4px 0;padding:18.4px 0 0;border-top:1px solid var(--rule-soft);display:grid;gap:8px}
  .buycard__list li{display:flex;gap:8.8px;align-items:flex-start;font-size:17px;line-height:1.4}
  .buycard__list svg{flex:0 0 auto;width:15px;height:15px;margin-top:.22em;color:var(--brand-link)}
  .buycard__actions{display:grid;gap:8.8px}
  .buycard__ship{font-size:12px;color:var(--fg-55);text-align:center;margin:11.2px 0 0}

  /* Fork */
  .fork__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fork__card{display:flex;align-items:center;gap:16px;border:1px solid var(--rule);border-radius:13px;padding:19.2px 21.6px;background:var(--card);text-decoration:none;transition:border-color .15s}
  .fork__card:hover{border-color:var(--brand)}
  .fork__card--b2b{border-color:var(--brand);background:var(--brand-tint)}
  .fork__ico{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--brand);display:grid;place-items:center}
  .fork__ico svg{width:20px;height:20px;color:var(--brand-fg)}
  .fork__card h3{font-size:16px;font-weight:700;margin:0 0 3.2px}
  .fork__card p{font-size:13.5px;line-height:1.45;color:var(--fg-70);margin:0}
  .fork__arrow{margin-inline-start:auto;flex:0 0 auto;width:19px;height:19px;color:var(--fg-35)}

  /* Trust */
  .trust{border-bottom:1px solid var(--rule-soft);padding-block:24px}
  .trust__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;padding: 20px 8px;background: var(--brand-tint);}
  .trust__item{display:flex;align-items:center;gap:13.6px;padding-inline:24px;justify-content:center}
  .trust__item+.trust__item{border-inline-start:1px solid var(--rule-soft)}
  .trust__icon{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center}
  .trust__icon img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  .trust__label{font-size:17px;font-weight:700;line-height:1.25;margin:0}
  .trust__sub{display:block;font-size:13px;font-weight:400;color:var(--fg-55);margin-top:1.9px}

  /* Sections */
  .sec{padding-block:35px}
  .sec--tight{padding-block:48px}
  .sec--alt{background:var(--bg-alt)}
  .sec--brand{background:var(--brand);color:#fff}
  .sec--invert{background:var(--bg-invert);color:#fff}
  .sec__head{max-width:100%;margin-bottom:44px; text-align:center;}
  .sec__head--c{margin-inline:auto;text-align:center}
  .sec h2{font-size:clamp(30px,3.2vw,42px);font-weight:800;line-height:1.1;letter-spacing:-.025em;margin:0 0 14px}
  .sec__sub{font-size:19px;line-height:1.6;font-weight:500;color:var(--fg-70);margin:0;max-width:100%; text-align:center;}
  .sec--brand h2,.sec--invert h2{color:#fff}
  .sec--brand .sec__sub,.sec--invert .sec__sub{color:var(--on-invert-70)}
  .sec__more{display:flex;justify-content:center;margin-top:44px}

  /* Press marquee — logos now all sit in 132×36 boxes */
  .press{padding-block:40px;overflow:hidden;border-bottom:1px solid var(--rule-soft)}
  .press__head{text-align:center;font-size:23px;font-weight:700;color:var(--fg-55);margin:0 0 24px}
  .press__view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .press__track{display:flex;align-items:center;width:max-content;gap:56px;animation:marquee 36s linear infinite}
  .press__view:hover .press__track{animation-play-state:paused}
  .press__track .logoBox img{filter:var(--logo-filter) grayscale(1);opacity:.9;transition:opacity .2s,filter .2s}
  .press__track .logoBox:hover img{filter:var(--logo-filter);opacity:1}
  @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

  /* Cost */
  .cost__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .cost__panel{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:28px}
  .cost__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
  .cost__opt{border:1px solid var(--rule);border-radius:9px;padding:11.2px 12.8px;background:none;font:inherit;cursor:pointer;text-align:start;transition:border-color .15s,background-color .15s;color:var(--fg)}
  .cost__opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
  .cost__opt b{display:block;font-size:20px;font-weight:700}
  .cost__opt span{font-size:12px;color:var(--fg-55)}
  .cost__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:12.8px;border-bottom:1px solid var(--rule-soft)}
  .cost__row:last-of-type{border-bottom:none}
  .cost__what{font-size:16px;font-weight:500}
  .cost__what small{display:block;font-weight:400;color:var(--fg-55);font-size:13px;margin-top:1.9px}
  .cost__amt{font-size:17px;font-weight:700;white-space:nowrap}
  .cost__amt--free{color:var(--brand-link)}
  /* .cost__total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14.4px;padding-top:16px;border-top:2px solid var(--fg)} */

   .cost__total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14.4px;padding-top:16px;}
  .cost__total b{font-size:22px}
  /* Action 11: headline price leads the panel */
  .cost__lead{display:flex;align-items:baseline;gap:10px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--rule-soft)}
  .cost__lead-price{font-size:34px;font-weight:800;line-height:1;color:var(--fg)}
  .cost__lead-note{font-size:14px;color:var(--fg-55)}
  .cost__total--soft b{font-size:18px;font-weight:700}
  .cost__total--soft{border-top-width:1px;border-top-color:var(--rule)}

  .chk{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .chk li{display:flex;gap:9.6px;align-items:flex-start;font-size:17px;line-height:1.5}
  .chk svg{flex:0 0 auto;width:16px;height:16px;margin-top:.2em;color:var(--brand-link)}
  .sec--brand .chk svg,.sec--invert .chk svg,.b2b .chk svg{color:#fff}

  /* Tables */
  .tblScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:14px;background:var(--card)}
  .tbl{width:100%;border-collapse:collapse;font-size:16px;min-width:800px}
  .tbl th,.tbl td{padding:16px 18.4px;text-align:start;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
  .tbl thead th{font-weight:700;font-size:14px;border-bottom:1px solid var(--rule);white-space:nowrap;padding-block:18.4px}
  .tbl tbody th{font-weight:600;color:var(--fg-70);font-size:14px}
  .tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:none}
  .tbl .us{background:var(--brand-tint)}
  .tbl thead .us{border-bottom:2px solid var(--brand)}
  .tbl__usHead{display:flex;flex-direction:column;gap:4.8px}
  .tbl__usHead b{font-size:17px;color:var(--brand-link)}
  .tbl__usHead span:not(.tbl__img){font-size:11px;font-weight:600;color:var(--brand-fg);background:var(--brand);border-radius:99px;padding:2.4px 8px;align-self:flex-start}
  .win{color:var(--win);font-weight:700}
  .lose{color:var(--fg-35)}
  .tbl__note{font-size:12px;color:var(--fg-55);line-height:1.65;margin:16px 0 0}
  .tbl__note a{color:var(--brand-link)}
  .tbl__prod{display:flex;align-items:center;gap:13.6px}
  .tbl__prod .media{width:48px;height:48px;flex:0 0 auto;border-radius:8px}
  .tbl__prod b{display:block;font-weight:700;font-size:17px;color:var(--fg)}
  .tbl__prod small{display:block;font-weight:400;color:var(--fg-55);font-size:13px;margin-top:1.6px}

  /* Install steps */
  .install{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:ins;list-style:none;margin:0;padding:0}
  .install li{counter-increment:ins;display:flex;flex-direction:column}
  .install .media{margin-bottom:17.6px;border:1px solid var(--rule-soft)}
  .install__num{display:inline-grid;place-items:center;width:27.2px;height:27.2px;border-radius:50%;background:var(--brand);color:var(--brand-fg);font-size:13px;font-weight:700;margin-bottom:9.6px}
  .install__num::before{content:counter(ins)}
  .install h3{font-size:16px;font-weight:700;margin:0 0 6.4px}
  .install p{font-size:14px;line-height:1.55;color:var(--fg-70);margin:0}
  .installBar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;padding:17.6px 22.4px;border:1px solid var(--rule);border-radius:12px;background:var(--card)}
  .installBar b{font-size:16px}
  .installBar span{font-size:17px;color:var(--fg-70)}
  .installBar .btn{margin-inline-start:auto}

  /* Features — image on top, contained, uniform ratio */
  .featBig{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .featBig__card{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
  .kgps-bg-dark .featBig__card,.kgps-bg-brand .featBig__card{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}
  .featBig__card .media{border-radius:0;background:rgba(255,255,255,.96)}
  .featBig__body{padding:20px 21.6px 22.4px}
  .featBig__card h3{font-size:18px;font-weight:700;margin:0 0 6.4px;color:var(--fg)}
  .kgps-bg-dark .featBig__card h3,.kgps-bg-brand .featBig__card h3{color:#fff}
  .featBig__card p{font-size:16.5px;line-height:1.55;color:var(--fg-70);margin:0}
  .kgps-bg-dark .featBig__card p,.kgps-bg-brand .featBig__card p{color:var(--on-invert-70)}

  .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px;margin-top:48px;padding-top:44px;border-top:1px solid var(--rule-soft)}
  .kgps-bg-dark .feat,.kgps-bg-brand .feat{border-top-color:rgba(255,255,255,.16)}
  .feat__item{display:grid;grid-template-columns:auto 1fr;gap:13.6px;align-items:start}
  .feat__ico{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--brand-tint);display:grid;place-items:center}
  .kgps-bg-dark .feat__ico,.kgps-bg-brand .feat__ico{background:rgba(255,255,255,.15)}
  .feat__ico svg{width:18px;height:18px;color:var(--brand-link)}
  .kgps-bg-dark .feat__ico svg,.kgps-bg-brand .feat__ico svg{color:#fff}
  .feat__item h3{font-size:17px;font-weight:700;margin:4.5px 0 3.5px;color:var(--fg)}
  .kgps-bg-dark .feat__item h3,.kgps-bg-brand .feat__item h3{color:#fff}
  .feat__item p{font-size:17px;line-height:1.5;color:var(--fg-70);margin:0}
  .kgps-bg-dark .feat__item p,.kgps-bg-brand .feat__item p{color:var(--on-invert-70)}

  /* Audience */
  .aud{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .aud__card{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
  .aud__card .media{border-radius:0}
  .aud__body{padding:24px;display:flex;flex-direction:column;flex:1 1 auto}
  .aud__card h3{font-size:19px;font-weight:700;margin:0 0 8px}
  .aud__card p{font-size:17px;line-height:1.6;color:var(--fg-70);margin:0 0 16.8px}
  .aud__card .chk{margin-bottom:20.8px;gap:7.2px}
  .aud__card .chk li{font-size:15.5px;line-height:1.45}
  .aud__card .chk svg{width:14px;height:14px}
  .aud__link{margin-top:auto;font-size:17px;font-weight:600;color:var(--brand-link);text-decoration:none}
  .aud__link:hover{text-decoration:underline;text-underline-offset:3px}

  /* ══ VIDEO — capped width. Full-bleed 16:9 at 1160px was
     swallowing the whole viewport. ══ */
  .vidMain{max-width:760px;margin-inline:auto;border-radius:16px;overflow:hidden;position:relative;cursor:pointer;background:var(--well)}
  .vidMain img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
  .vidMain__play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
  .vidMain__play span{width:66px;height:66px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:0 6px 26px rgba(0,0,0,.35);transition:transform .15s}
  .vidMain:hover .vidMain__play span{transform:scale(1.06)}
  .vidMain__play svg{width:24px;height:24px;color:var(--brand-fg);margin-inline-start:4px}
  .vidMain__cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:21.6px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
  .vidMain__cap h3{font-size:16px;font-weight:700;margin:0 0 2.4px;color:#fff}
  .vidMain__cap p{font-size:13px;margin:0;color:rgba(255,255,255,.75)}

  /* ══ QUOTES — portrait is now a 44px avatar, not a giant
     square. Fixes the odd stock-photo dominance. ══ */
  .quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
  .quote{border:1px solid var(--rule);border-radius:14px;background:var(--card);padding:22.4px;display:flex;flex-direction:column}
  .quote .stars{margin-bottom:11.2px}
  .quote .stars svg{width:14px;height:14px}
  .quote p{font-size:17px;line-height:1.6;margin:0 0 20px}
  .quote__who{margin-top:auto;display:flex;align-items:center;gap:10.4px}
  .quote__avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--well)}
  .quote__avatar img{width:100%;height:100%;object-fit:cover}
  .quote__name{font-size:13.5px;font-weight:600}
  .quote__name span{display:block;font-weight:400;color:var(--fg-55);font-size:12px;margin-top:0.8px}

  /* ══ UGC — fixed 4:5 ratio grid instead of masonry.
     The masonry columns produced wildly uneven card heights. ══ */
  .ugc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .ugc__card{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--card);text-decoration:none;display:flex;flex-direction:column}
  .ugc__card .media{border-radius:0}
  .ugc__body{padding:16.8px 18.4px 19.2px;display:flex;flex-direction:column;flex:1 1 auto}
  .ugc__body .stars{margin-bottom:8px}
  .ugc__body .stars svg{width:13px;height:13px}
  .ugc__body p{font-size:17px;line-height:1.55;margin:0 0 13.6px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .ugc__who{margin-top:auto;font-size:12px;color:var(--fg-55);display:flex;align-items:center;gap:6.4px;flex-wrap:wrap}
  .ugc__who b{color:var(--fg);font-weight:600}
  .ugc__who .ver{color:var(--brand-link);font-weight:600;display:inline-flex;align-items:center;gap:3.2px}
  .ugc__who .ver svg{width:11px;height:11px}

  /* B2B */
  .b2b{background:var(--bg-invert);color:#fff;padding-block:72px}
  .b2b__eyebrow{display:inline-flex;align-items:center;gap:7.2px;font-size:12px;font-weight:600;color:#fff;background:var(--brand);border-radius:99px;padding:5.6px 12px;margin-bottom:17.6px}
  .b2b__eyebrow svg{width:13px;height:13px}
  .b2b h2{font-size:clamp(25.6px,2.8vw,33.6px);font-weight:800;line-height:1.14;margin:0 0 12px;color:#fff;max-width:18ch}
  .b2b__lede{font-size:16px;line-height:1.65;color:var(--on-invert-70);margin:0 0 28px;max-width:48ch}
  .b2b__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .b2b .media{background:rgba(255,255,255,.06);margin-bottom:28px}
  .tiers{display:grid;gap:8.8px;margin-bottom:28px}
  .tier{display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:12.8px 16.8px;background:rgba(255,255,255,.04)}
  .tier__qty{font-size:17px;font-weight:700;flex:0 0 auto;min-width:88px}
  .tier__what{font-size:17px;color:var(--on-invert-70);line-height:1.4}
  .tier__save{margin-inline-start:auto;font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:5px;padding:3.5px 8px;white-space:nowrap}
  .b2b .chk li{color:var(--on-invert-70)}
  .b2b .chk li b{color:#fff}
  .b2bform{background:var(--card);color:var(--fg);border-radius:16px;padding:28px;box-shadow:var(--shadow-lg)}
  .b2bform h3{font-size:30px;font-weight:700;margin:0 0 15px; color#000;}
  .b2bform__sub{font-size:17px;color:var(--fg-55);margin:0 0 20.8px;line-height:1.5}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:12.8px}
  .form label{font-size:12px;font-weight:600;display:block;margin-bottom:4.8px;color:var(--fg-70)}
  .form input,.form select,.form textarea{width:100%;padding:10.4px 12.5px;border:1px solid var(--rule);border-radius:8px;font:inherit;font-size:17px;background:var(--bg);color:var(--fg)}
  .form textarea{min-height:82px;resize:vertical}
  .form .full{grid-column:1/-1}
  .b2bform__note{font-size:12px;color:var(--fg-55);text-align:center;margin:13.6px 0 0;line-height:1.5}
  .b2bform__note a{color:var(--brand-link);font-weight:600}

  .roi__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
  .roi__stat{font-size:clamp(38.4px,5vw,52px);font-weight:800;line-height:1;margin:0 0 8px;color:var(--brand-link)}
  .kgps-bg-dark .roi__stat,.kgps-bg-brand .roi__stat{color:#fff}
  .roi__sub{font-size:17px;color:var(--on-invert-70);margin:0;max-width:34ch}

  /* Blog */
  .blog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .post{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s}
  .post:hover{border-color:var(--brand)}
  .post .media{border-radius:0}
  .post__body{padding:20px 21.6px 22.4px;display:flex;flex-direction:column;flex:1 1 auto}
  .post__tag{font-size:11px;font-weight:700;color:var(--brand-link);margin:0 0 8px}
  .post h3{font-size:18px;font-weight:700;line-height:1.32;margin:0 0 8px}
  .post p{font-size:16.5px;line-height:1.6;color:var(--fg-70);margin:0 0 17.6px}
  .post__meta{margin-top:auto;font-size:12px;color:var(--fg-55)}

  /* FAQ */
  .faq{max-width:68ch}
  .faq details{border-bottom:1px solid var(--rule-soft)}
  .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:18px;font-weight:700;cursor:pointer;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'';flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--fg-35);border-bottom:2px solid var(--fg-35);transform:rotate(45deg);transition:transform .18s;margin-top:-4px}
  .faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
  .faq p{font-size:16.5px;line-height:1.65;color:var(--fg-70);margin:0 0 17.6px;max-width:62ch}
  .faq ul{margin:0 0 17.6px;padding-inline-start:18.4px;font-size:17px;line-height:1.68;color:var(--fg-70)}
  .faq li{margin-bottom:5.6px}
  .faq a{color:var(--brand-link);font-weight:500}

  /* Clients — uniform 118×44 boxes, evenly spaced */
  /* Valued clients — continuous carousel, same mechanic as the press row */
  .clients{overflow:hidden;padding-block:15px;border-block: 1px solid var(--rule-soft);}
  .clients__head{text-align:center;font-size:23px;font-weight:700;color:var(--fg-70);margin:0 0 24px}
  .clients__view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .clients__track{display:flex;align-items:center;width:max-content;gap:56px;animation:marquee 55s linear infinite}
  .clients__view:hover .clients__track,.clients__view:focus-within .clients__track{animation-play-state:paused}
  .clients__track .logoBox img{filter:var(--logo-filter) grayscale(1);opacity:.45;transition:opacity .2s,filter .2s}
  .clients__track .logoBox:hover img{filter:var(--logo-filter);opacity:1}
  /* Action 8: full-colour clients wall. .is-color removes the
     grayscale + dimming so customer logos read as real. */
  .clients.is-color .clients__track .logoBox img,
  .press.is-color .press__track .logoBox img{
    filter:var(--logo-filter);opacity:1;
  }
  .logoBox[href]{cursor:pointer;transition:transform .15s ease}
  .logoBox[href]:hover{transform:translateY(-2px)}

  .ftr{border-top:1px solid var(--rule-soft);padding-block:52px 32px;font-size:14px;background:var(--bg-alt)}
  .ftr__grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px}
  .ftr__logo{display:grid;place-items:start;height:34px}
  .ftr__logo img{max-height:34px;width:auto;filter:var(--logo-filter)}
  .ftr h4{font-size:13px;font-weight:700;margin:0 0 14.4px}
  .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .ftr a{color:var(--fg-55);text-decoration:none}
  .ftr a:hover{color:var(--fg)}
  .ftr__blurb{color:var(--fg-55);line-height:1.6;margin:16px 0 17.6px;max-width:34ch}
  .ftr__apps{display:flex;gap:9.6px;align-items:center}
  .ftr__apps a{display:grid;place-items:center;height:38px}
  .ftr__apps img{max-height:38px;width:auto}
  .ftr__base{margin-top:38.4px;padding-top:22.4px;border-top:1px solid var(--rule-soft);color:var(--fg-35);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

  /* Section wrapper for the sticky bar. The bar itself is fixed, so
     the wrapper must take no space and create no stacking context. */
  .kgps-sticky-wrap{display:contents}
  .sticky{position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;gap:11.2px;align-items:center;padding:11.2px 16px calc(11.2px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 97%,transparent);border-top:1px solid var(--rule);backdrop-filter:blur(10px)}
  .sticky .media{width:38px;height:38px;flex:0 0 auto;border-radius:7px}
  .sticky__txt{font-size:12px;line-height:1.25;color:var(--fg-55)}
  .sticky__txt b{display:block;font-size:17px;color:var(--fg)}
  .sticky .btn{margin-inline-start:auto}

  /* ── Responsive ── */
  @media (max-width:1099px){
    .featBig{grid-template-columns:repeat(2,1fr)}
    .install{grid-template-columns:repeat(2,1fr);gap:32px 24px}
    .quotes,.ugc{grid-template-columns:repeat(2,1fr)}
    .feat{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:959px){
    .hero{padding-block:40px}
    .hero__grid,.cost__grid,.roi__grid,.b2b__grid{grid-template-columns:1fr;gap:40px}
    .hero h1{max-width:16ch}
    .aud,.blog{grid-template-columns:1fr}
    .hdr__nav{display:none}
    .trust__list{grid-template-columns:1fr;row-gap:17.6px}
    .trust__item{justify-content:flex-start;padding-inline:0}
    .trust__item+.trust__item{border-inline-start:none}
    .ftr__grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:699px){
    .sec,.b2b{padding-block:48px}
    /* Action 3: shrink the hero so the buy card, and therefore the
       price and Add to cart, land inside the first 660px screen. */
    .hero{padding-block:20px 28px}
    .hero__grid{gap:22px}
    .hero h1{font-size:clamp(26px,7vw,32px);margin-bottom:10px}
    .hero__lede{font-size:17px;margin-bottom:14px}
    .buycard{padding:18px}
    .install,.quotes,.ugc,.featBig,.feat{grid-template-columns:1fr}
    .cost__opts,.form{grid-template-columns:1fr}
    .buycard__top{flex-direction:column}
    .buycard__img{width:100%;max-width:220px;margin-inline:auto}
    .sticky{display:flex}
    body{padding-bottom:70px}
    .ftr__grid{grid-template-columns:1fr}
    .hdr__phone span{display:none}
    .installBar .btn{margin-inline-start:0;width:100%}
    .logoBox--press{width:110px;height:30px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .press__track,.clients__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;row-gap:24px}
    .press__track [data-clone],.clients__track [data-clone]{display:none}
    .press__view,.clients__view{-webkit-mask-image:none;mask-image:none}
    *{transition-duration:.01ms !important}
  }

  /* ══════════════════════════════════════════════════════════
     MOTION
     ══════════════════════════════════════════════════════════

     Rules:
     · Nothing above the fold animates. The hero and buy card are
       the LCP element and the primary CTA — fading them in delays
       perceived load and is measured by Core Web Vitals.
     · Only transform and opacity are animated. Animating width,
       height, top or margin forces layout on every frame.
     · Reveal state is scoped to .kgps-anim, which kgps-home.js
       puts on <html>. If JS fails or is blocked, nothing is ever
       hidden — the page just renders static.
     · Everything is disabled under prefers-reduced-motion.
     ══════════════════════════════════════════════════════════ */

  /* ── Scroll reveal ── */
  .kgps-anim [data-reveal]{
    opacity:0;
    transform:translate3d(0,18px,0);
    will-change:opacity,transform;
  }
  .kgps-anim [data-reveal].is-in{
    opacity:1;
    transform:none;
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),
               transform .55s cubic-bezier(.22,.61,.36,1);
    will-change:auto;
  }
  /* Sideways reveal for the two-column blocks */
  .kgps-anim [data-reveal="left"]{transform:translate3d(-22px,0,0)}
  .kgps-anim [data-reveal="right"]{transform:translate3d(22px,0,0)}
  /* Scale-in for the panels that read as objects, not text */
  .kgps-anim [data-reveal="pop"]{transform:scale(.97)}

  /* ── Hover: cards ── */
  .aud__card,.featBig__card,.post,.quote,.ugc__card,.fork__card,.cost__panel{
    transition:transform .25s cubic-bezier(.22,.61,.36,1),
               box-shadow .25s ease,
               border-color .15s ease;
  }
  .aud__card:hover,.featBig__card:hover,.post:hover,.ugc__card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
  }
  .fork__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

  /* Image lift inside cards — the frame stays put, the photo moves */
  .aud__card .media img,.post .media img,.ugc__card img{
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .aud__card:hover .media img,.post:hover .media img,.ugc__card:hover img{
    transform:scale(1.04);
  }

  /* ── Hover: buttons ── */
  .btn{transition:background-color .15s ease,border-color .15s ease,
                  transform .12s ease,box-shadow .2s ease}
  .btn--primary:hover{box-shadow:0 4px 14px color-mix(in srgb,var(--action) 55%,transparent)}
  .btn:active{transform:translateY(1px)}

  /* Arrow nudge on the path fork */
  .fork__arrow{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
  .fork__card:hover .fork__arrow{transform:translateX(4px)}

  /* Inline links */
  .aud__link{transition:color .15s ease}
  .aud__link::after{
    content:'→';
    display:inline-block;
    margin-inline-start:5px;
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
  }
  .aud__link:hover::after{transform:translateX(3px)}

  /* ── Tables ── */
  .tbl tbody tr{transition:background-color .15s ease}
  .tbl tbody tr:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
  .tbl tbody tr:hover .us{background:color-mix(in srgb,var(--brand) 14%,transparent)}

  /* ── FAQ: animate the disclosure ──
     <details> has no native open transition, and ::details-content
     is not supported widely enough to rely on yet.

     The grid-rows trick needs ONE wrapper containing ONE child.
     Answers come from a richtext field, so <details> has several
     direct children (multiple <p>, sometimes a <ul>). Applying the
     trick per-child silently fails: each becomes its own grid, and
     `> *` never matches their inline text because text nodes are
     not elements, so overflow:hidden is never applied.

     kgps-home.js therefore injects a .faq__body wrapper after the
     summary. If the script does not run, the fallback below keeps
     every answer fully visible — the accordion still opens and
     closes natively, it just does not animate. */
  .faq__body{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .32s cubic-bezier(.22,.61,.36,1),
               opacity .2s ease;
    opacity:0;
  }
  .faq details[open] .faq__body{grid-template-rows:1fr;opacity:1}
  .faq__body>div{overflow:hidden;min-height:0}
  /* Trim the last paragraph's margin so the collapse closes flush */
  .faq__body>div>*:last-child{margin-bottom:0}
  .faq__body>div{padding-bottom:17.6px}

  .faq summary{transition:color .15s ease}
  .faq summary:hover{color:var(--brand-link)}

  /* ── Sticky header shadow once scrolled ── */
  .kgps-scrolled .hdr{box-shadow:0 1px 12px rgba(0,0,0,.07)}

  /* ── Video play button ── */
  .vidMain__play span,.vid__play span{
    transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
  }
  .vidMain:hover .vidMain__play span{transform:scale(1.08)}

  /* ── Install step numbers ── */
  .install__num{transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
  .kgps-anim .install li[data-reveal].is-in .install__num{
    animation:kgps-pop .45s cubic-bezier(.34,1.4,.64,1) backwards;
    animation-delay:.2s;
  }
  @keyframes kgps-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

  /* ── Sticky mobile bar entrance ── */
  .sticky{transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .kgps-scrolled .sticky{transform:none}

  /* ══ Motion off ══
     Everything above is neutralised, and reveal targets are
     forced visible so nothing is ever stuck hidden. */
  @media (prefers-reduced-motion:reduce){
    .kgps-anim [data-reveal],
    .kgps-anim [data-reveal].is-in{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
    .kgps-anim .install li[data-reveal].is-in .install__num{animation:none}
    .aud__card:hover,.featBig__card:hover,.post:hover,.ugc__card:hover,
    .fork__card:hover,.btn:active{transform:none}
    .aud__card:hover .media img,.post:hover .media img,.ugc__card:hover img{transform:none}
    .sticky{transform:none}
    .faq details>*:not(summary){grid-template-rows:1fr;transition:none}
  }

  /* ══════════════════════════════════════════════════════════
     SECTION BACKGROUND SURFACES
     A per-section background picker (see each section's schema).
     One class flips the whole section AND recolours the text,
     headings, sub-text and hairlines inside it.

     kgps-bg-light   white  (default, no class needed)
     kgps-bg-tint    soft blue tint
     kgps-bg-dark    near-black
     kgps-bg-brand   brand blue
     ══════════════════════════════════════════════════════════ */
  .kgps-bg-tint{background:var(--bg-alt)}
  .kgps-bg-dark,.kgps-bg-brand{color:#fff}
  .kgps-bg-dark{background:var(--bg-invert)}
  .kgps-bg-brand{background:var(--brand)}

  .kgps-bg-dark h1,.kgps-bg-dark h2,.kgps-bg-dark h3,.kgps-bg-dark h4,
  .kgps-bg-brand h1,.kgps-bg-brand h2,.kgps-bg-brand h3,.kgps-bg-brand h4{color:#fff}
  .kgps-bg-dark .sec__sub,.kgps-bg-brand .sec__sub,
  .kgps-bg-dark p,.kgps-bg-brand p{color:var(--on-invert-70)}
  .kgps-bg-dark .chk svg,.kgps-bg-brand .chk svg{color:#fff}
  .kgps-bg-dark .sec__head,.kgps-bg-brand .sec__head{border-color:rgba(255,255,255,.14)}

  /* Cards on a dark/brand surface lift off it with a translucent fill */
  .kgps-bg-dark .tblScroll,.kgps-bg-brand .tblScroll,
  .kgps-bg-dark .aud__card,.kgps-bg-brand .aud__card,
  .kgps-bg-dark .post,.kgps-bg-brand .post,
  .kgps-bg-dark .quote,.kgps-bg-brand .quote,
  .kgps-bg-dark .ugc__card,.kgps-bg-brand .ugc__card,
  .kgps-bg-dark .installBar,.kgps-bg-brand .installBar{
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff;
  }
  /* Form and cost panels stay solid light cards so they're legible */
  .kgps-bg-dark .b2bform,.kgps-bg-brand .b2bform,
  .kgps-bg-dark .cost__panel,.kgps-bg-brand .cost__panel{background:var(--card);color:var(--fg)}
  .kgps-bg-dark .cost__panel h2,.kgps-bg-dark .cost__panel h3,.kgps-bg-dark .cost__panel p,
  .kgps-bg-brand .cost__panel h2,.kgps-bg-brand .cost__panel h3,.kgps-bg-brand .cost__panel p{color:var(--fg)}

  /* Tables on a dark surface: row headers, body cells and the
     'lose' cells were inheriting dark text. Caught in the
     light/dark proof render. */
  .kgps-bg-dark .tbl tbody th,.kgps-bg-brand .tbl tbody th{color:rgba(255,255,255,.85)}
  .kgps-bg-dark .tbl thead th,.kgps-bg-brand .tbl thead th{color:#fff;border-bottom-color:rgba(255,255,255,.2)}
  .kgps-bg-dark .tbl td,.kgps-bg-brand .tbl td{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.1)}
  .kgps-bg-dark .tbl .lose,.kgps-bg-brand .tbl .lose{color:rgba(255,255,255,.45)}
  .kgps-bg-dark .tbl__note,.kgps-bg-brand .tbl__note{color:rgba(255,255,255,.65)}
  /* the highlighted Konnect column keeps its light tint so it still pops */
  .kgps-bg-dark .tbl .us,.kgps-bg-brand .tbl .us{color:var(--fg)}
  .kgps-bg-dark .tbl .us .win,.kgps-bg-brand .tbl .us .win{color:var(--win)}

  /* Ghost buttons invert on dark/brand */
  .kgps-bg-dark .btn--ghost,.kgps-bg-brand .btn--ghost{color:#fff;border-color:rgba(255,255,255,.38)}
  .kgps-bg-dark .btn--ghost:hover,.kgps-bg-brand .btn--ghost:hover{border-color:rgba(255,255,255,.75)}

  /* ══════════════════════════════════════════════════════════
     HERO — competitor-standard (Spytec / Samsara)
     Heavy dark type, large lifestyle media, one CTA, no emoji.
     Answers the Sept feedback: not wordy, not light, not small.
     ══════════════════════════════════════════════════════════ */
  .nhero{padding-block:56px 40px;background:var(--bg);overflow:hidden}
  .nhero__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}

  .nhero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--fg);margin:0 0 20px;letter-spacing:-.01em}
  .nhero__eyebrow-ico{width:20px;height:20px;object-fit:contain}

  .nhero__h1{
    font-size:clamp(40px,5.6vw,72px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.035em;
    color:var(--fg);
    margin:0 0 20px;
    max-width:15ch;
  }
  .nhero__sub{
    font-size:clamp(18px,1.7vw,21px);
    font-weight:500;
    line-height:1.5;
    color:var(--fg-70);
    margin:0 0 32px;
    max-width:46ch;
  }
  .nhero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .btn--xl{padding:17px 34px;font-size:17px;border-radius:12px;font-weight:700}

  .nhero__rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 0;font-size:16px;color:var(--fg-70)}
  .nhero__rating .stars svg{width:18px;height:18px}
  .nhero__rating b{color:var(--fg);font-weight:700}
  .nhero__rating-alt{color:var(--fg-70);white-space:nowrap}
  .nhero__rating-alt b{color:var(--fg)}

  /* Media: wider than tall, filling the right column. */
  .nhero__media{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:4/3.5;
    background:var(--well);
    box-shadow:0 20px 50px rgba(16,20,24,.12);
  }
  .nhero__media img,
  .nhero__media video,
  .nhero__media iframe{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  }

   /* Trust strip under the hero. Reads as its own card, with a
     background and dividers between items — the four points feel
     like one strip instead of floating icons on empty space.
     Icon tiles are all the same size, background and radius so
     mismatched source artwork stops fighting for attention. */
  .nhero__trust{
    display:grid;grid-template-columns:repeat(4,1fr);
    list-style:none;margin:44px 0 0;padding:20px 8px;
    background:var(--brand-tint);
    border-radius:16px;
    border:1px solid transparent;
  }
  .nhero__trust li{
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding:8px 20px;font-size:15.5px;font-weight:600;color:var(--fg);
    border-inline-start:1px solid rgba(16,20,24,.10);
  }
  .nhero__trust li:first-child{border-inline-start:0}
  .nhero__trust svg{width:20px;height:20px;color:var(--brand-link);flex:0 0 auto}
  .nhero__trust-ico{
    display:inline-grid;place-items:center;
    width:50px;height:50px;flex:0 0 auto;
    background:#fff;border-radius:9px;
    box-shadow:0 1px 2px rgba(16,20,24,.06);
  }
  .nhero__trust-ico img{width:22px;height:22px;object-fit:contain}
  .nhero__trust img{width:35px;height:35px;object-fit:contain}


  /* Dark hero variant */
  .nhero--dark{background:var(--bg-invert)}
  .nhero--dark .nhero__eyebrow,
  .nhero--dark .nhero__h1,
  .nhero--dark .nhero__rating b{color:#fff}
  .nhero--dark .nhero__sub{color:var(--on-invert-70)}
  .nhero--dark .nhero__rating{color:var(--on-invert-70)}
  .nhero--dark .nhero__trust{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
  }
  .nhero--dark .nhero__trust li{color:var(--on-invert-70);border-inline-start-color:rgba(255,255,255,.10)}
  .nhero--dark .nhero__trust-ico{background:rgba(255,255,255,.10);box-shadow:none}
  .nhero--dark .nhero__trust svg{color:#fff}
  .nhero--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}

  @media (max-width:899px){
    .nhero{padding-block:32px}
    .nhero__grid{grid-template-columns:1fr;gap:32px}
    /* media first on mobile — the image is the hook, like Spytec */
    .nhero__media{order:-1;aspect-ratio:16/11}
    .nhero__h1{font-size:clamp(34px,9vw,46px);max-width:18ch}
    .nhero__sub{font-size:16px;margin-bottom:24px}
    .nhero__cta{width:100%}
    .btn--xl{width:100%;text-align:center}
      .nhero__trust{
      grid-template-columns:1fr 1fr;
      padding:16px 8px;gap:0;
    }
    .nhero__trust li{
      padding:12px 14px;font-size:13.5px;
      justify-content:flex-start;
    }
    .nhero__trust li:nth-child(odd){border-inline-start:0}
    .nhero__trust li:nth-child(n+3){border-block-start:1px solid rgba(16,20,24,.10)}
    .nhero--dark .nhero__trust li:nth-child(n+3){border-block-start-color:rgba(255,255,255,.10)}
    .nhero__rating{font-size:13.5px;gap:6px 8px}
  }

  /* ══════════════════════════════════════════════════════════
     SHOP GRID — product cards (replaces the range table).
     Competitor pattern: image, name, one-line, price, button.
     ══════════════════════════════════════════════════════════ */
  .shop{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .shop__card{background:var(--card);border:1px solid var(--rule);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
  .shop__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .shop__media{aspect-ratio:1/1;background:var(--well);display:grid;place-items:center;padding:8%}
  .shop__media img{width:100%;height:100%;object-fit:cover}
  .shop__tag{position:absolute;top:14px;inset-inline-start:14px;font-size:12px;font-weight:700;color:var(--action-fg);background:var(--action);padding:5px 10px;border-radius:6px; height:33px !important; width:130px !important}
  .shop__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto}
  .shop__name{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px;color:var(--fg)}
  .shop__line{font-size:16px;line-height:1.5;color:var(--fg-70);margin:0 0 16px}
  .shop__price{display:flex;align-items:baseline;gap:8px;margin:auto 0 16px}
  .shop__now{font-size:24px;font-weight:800;color:var(--fg)}
  .shop__plan{font-size:13.5px;font-weight:600;color:var(--fg-55)}
  .shop__card .media{position:relative}

  /* ══ FINAL CTA BAND ══ */
  .ctaband{text-align:center;padding-block:72px}
  .ctaband h2{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;color:#fff}
  .ctaband p{font-size:19px;color:var(--on-invert-70);margin:0 auto 32px;max-width:48ch;font-weight:500}
  .ctaband .btn{margin-inline:6px}

  /* ══ HOW IT WORKS — 3 steps, competitor style ══ */
  .how3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0}
  .how3__step{text-align:center;padding:8px}
  /* Media tile: a GIF or image fills it; falls back to an icon.
     The step number sits on the tile's corner either way. */
  .how3__media{position:relative;aspect-ratio:4/3;border-radius:18px;background:var(--brand-tint);overflow:hidden;margin:0 auto 22px;max-width:360px;display:grid;place-items:center}
  .how3__media img{width:100%;height:100%;object-fit:cover;display:block}
  .how3__ico{display:grid;place-items:center;width:88px;height:88px;border-radius:24px;background:rgba(255,255,255,.7)}
  .how3__ico svg{width:38px;height:38px;color:var(--brand-link)}
  .how3__num{position:absolute;top:10px;inset-inline-end:10px;width:32px;height:32px;border-radius:50%;background:var(--action);color:var(--action-fg);font-size:14px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .kgps-bg-dark .how3__media,.kgps-bg-brand .how3__media{background:rgba(255,255,255,.08)}
  /* Step copy and the summary strip on a dark/brand surface. The
     summary box was a white card with white text on it. */
  .kgps-bg-dark .how3 h3,.kgps-bg-brand .how3 h3{color:#fff}
  .kgps-bg-dark .how3 p,.kgps-bg-brand .how3 p{color:var(--on-invert-70)}
  .kgps-bg-dark .how3__line,.kgps-bg-brand .how3__line{
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;
  }
  .how3 h3{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0 0 8px}
  .how3 p{font-size:17px;line-height:1.55;color:var(--fg-70);margin:0;max-width:30ch;margin-inline:auto}
  .how3__line{text-align:center;font-size:17px;font-weight:600;color:var(--fg);margin:44px 0 0;padding:22px;border:1px solid var(--rule);border-radius:12px;background:var(--card)}

  @media (max-width:999px){.shop{grid-template-columns:repeat(2,1fr)}.how3{grid-template-columns:1fr;gap:36px}}
  @media (max-width:599px){.shop{grid-template-columns:1fr}}

  /* ══════════════════════════════════════════════════════════
     HERO — review PDF p.4 spec ("rebuilt at both widths")
     DOM is phone order: copy → photo → buy. Desktop puts the
     photo in the right column and stacks copy + buy on the left.
     ══════════════════════════════════════════════════════════ */
  .rhero{padding-block:44px 32px;background:var(--bg)}
  .rhero__grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"copy photo" "buy photo";
    column-gap:56px;row-gap:0;
    align-items:start;
  }
  .rhero__copy{grid-area:copy}
  .rhero__photo{grid-area:photo;align-self:center}
  .rhero__buy{grid-area:buy;max-width:520px}

  .rhero__h1{
    font-size:clamp(34px,4.4vw,52px);font-weight:800;line-height:1.06;
    letter-spacing:-.03em;color:var(--fg);margin:0 0 14px;max-width:16ch;
  }
  .rhero__sub{font-size:17px;line-height:1.55;font-weight:500;color:var(--fg-70);margin:0 0 14px;max-width:48ch}

  .rhero__rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--fg-70);margin:0 0 20px}
  .rhero__rating .stars svg{width:15px;height:15px}
  .rhero__rating b{color:var(--fg);font-weight:700}
  .rhero__alt{color:var(--fg-55)}

  /* Product photo in a large tinted rounded frame, per the mock */
  .rhero__frame{
    display:grid;place-items:center;
    aspect-ratio:1/1;border-radius:18px;
    background:var(--brand-tint);border:1px solid var(--rule-soft);
    padding:1%;
  }
  .rhero__frame img{width:100%;height:100%;object-fit:contain}

  .rhero__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .rhero__now{font-size:34px;font-weight:800;line-height:1;color:var(--fg)}
  .rhero__was{font-size:16px;color:var(--fg-55);text-decoration:line-through}
  .rhero__save{font-size:12px;font-weight:700;color:#fff;background:var(--save);border-radius:4px;padding:4px 8px}
  .rhero__plan{font-size:14px;color:var(--fg-70);margin:8px 0 16px}

  .rhero__buy .btn+.btn{margin-top:10px}
  .btn--outline{background:transparent;color:var(--brand-link);border:2px solid var(--brand-link);font-weight:700}
  .btn--outline:hover{background:var(--brand-tint)}

  /* Guarantee panel: tinted, below the buttons */
  .rhero__guar{
    list-style:none;margin:18px 0 0;padding:16px 18px;
    background:var(--brand-tint);border-radius:10px;
    display:grid;gap:8px;
  }
  .rhero__guar li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--fg)}
  .rhero__guar svg{flex:0 0 auto;width:15px;height:15px;margin-top:.18em;color:var(--win)}
  .rhero__guar b{font-weight:700}

  /* Four-item trust grid under the hero */
  .rhero__trust{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px 32px;
    list-style:none;margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--rule-soft);
  }
  .rhero__trust li b{display:block;font-size:17px;font-weight:700;color:var(--fg);margin-bottom:3px}
  .rhero__trust li span{font-size:13.5px;color:var(--fg-55)}

  @media (max-width:899px){
    .rhero{padding-block:12px 24px}
    /* phone order: copy → photo → buy — the DOM order, single column.
       Everything through Add to cart must clear a 660px first screen
       on a 390px phone. Measured, not assumed. */
    .rhero__grid{grid-template-columns:1fr;grid-template-areas:"copy" "photo" "buy";row-gap:10px}
    .rhero__h1{font-size:clamp(26px,7vw,32px);max-width:18ch;margin-bottom:8px;line-height:1.08}
    .rhero__sub{font-size:17px;margin-bottom:8px;line-height:1.45}
    .rhero__rating{margin-bottom:0;font-size:13.5px}
    .rhero__alt{display:none}
    /* photo: shorter band, still the full product */
    .rhero__frame{aspect-ratio:2/1;padding:3% 10%;border-radius:14px}
    .rhero__buy{max-width:none}
    .rhero__price{gap:8px}
    .rhero__now{font-size:28px}
    .rhero__plan{margin:6px 0 12px;font-size:13.5px}
    .rhero__buy .btn--xl{padding:15px 24px;font-size:16px}
    .rhero__buy .btn+.btn{margin-top:8px}
    .rhero__trust{grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:26px}
  }

  /* ── Hero thumbnail carousel ── */
  .rhero__thumbs{
    display:flex;gap:8px;margin-top:10px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .rhero__thumbs::-webkit-scrollbar{display:none}
  .rhero__thumb{
    flex:0 0 auto;width:64px;height:64px;padding:6px;
    border:2px solid var(--rule);border-radius:10px;
    background:var(--well);cursor:pointer;scroll-snap-align:start;
    transition:border-color .15s ease,transform .15s ease;
  }
  .rhero__thumb img{width:100%;height:100%;object-fit:contain;display:block}
  .rhero__thumb:hover{border-color:var(--fg-35)}
  .rhero__thumb[aria-current="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
  .rhero__thumb:active{transform:scale(.96)}
  /* main image swap fade */
  #rhero-main{transition:opacity .18s ease}
  #rhero-main.is-swapping{opacity:0}

  @media (max-width:899px){
    /* A thumbnail strip costs ~50px and the phone fold only has
       ~30px to spare, so the two cannot coexist. On phone the
       strip is hidden and the main photo becomes SWIPEABLE
       instead — the native gesture, and zero extra height.
       Dots show position. Desktop keeps the click thumbnails. */
    .rhero__photo{display:block;position:relative}
    .rhero__frame{aspect-ratio:2/1;padding:1%;border-radius:14px;touch-action:pan-y}
    .rhero__thumbs{display:none}
    .rhero__dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
    .rhero__dot{width:7px;height:7px;border-radius:50%;background:var(--fg-35);border:0;padding:0}
    .rhero__dot[aria-current="true"]{background:var(--brand);width:18px;border-radius:4px}
  }
  @media (min-width:900px){.rhero__dots{display:none}}

  /* Custom background from the colour picker. --sec-bg is set
     inline by kgps-bg.liquid; kgps-bg-dark is added alongside
     when the colour is dark so the text treatment follows. */
  .kgps-bg-custom{background:var(--sec-bg)}

  /* Comparison header images */
  .tbl__img{display:grid;place-items:center;width:64px;height:64px;border-radius:10px;background:#fff;padding:6px;margin-bottom:8px;border:1px solid var(--rule-soft)}
  .tbl__img img{width:100%;height:100%;object-fit:contain}
  .tbl__img--empty{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
  .tbl__colHead{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .tbl thead th{vertical-align:bottom}
  /* on a brand/dark surface the Konnect column card lifts off the band */
  .kgps-bg-brand .tbl .us,.kgps-bg-dark .tbl .us{background:#fff}
  .kgps-bg-brand .tbl thead .us{border-bottom-color:var(--action)}
  .kgps-bg-brand .tblScroll,.kgps-bg-dark .tblScroll{background:transparent;border-color:rgba(255,255,255,.2)}
  .kgps-bg-brand .tbl__note{color:rgba(255,255,255,.75)}


    /* Two-column FAQ: heading and optional CTA on the left, questions on the right */
  .faq-sec__grid{
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:56px;
    align-items:start;
  }
  .faq-sec__head{position:sticky;top:100px}
  .faq-sec__head h2{margin-bottom:16px}
  .faq-sec__cta{margin-top:24px;display:inline-block}
  @media (max-width:899px){
    .faq-sec__grid{grid-template-columns:1fr;gap:32px}
    .faq-sec__head{position:static}
    .faq-sec__head h2{margin-bottom:12px}
    .faq-sec__cta{margin-top:16px}
  }

    /* Carousel (kreel) — video and quote rails inside testimonials */
  .kreel{position:relative;margin-top:24px}
  .kreel + .kreel{margin-top:56px}
  .kreel__track{
    display:grid;grid-auto-flow:column;gap:24px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:6px 4px 22px;
  }
  .kreel__track::-webkit-scrollbar{display:none}
  .kreel__track > *{scroll-snap-align:start}

  .kreel__vid{width:min(880px,88vw)}
  .kreel__vid .vidMain{margin:0;height:100%}
  .vidMain--card{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}

  .kreel--quotes .kreel__q{width:min(340px,80vw)}
  .kreel--quotes .quote{height:100%;margin:0}

  .kreel__btn{
    position:absolute;top:calc(50% - 22px);
    width:44px;height:44px;border-radius:50%;
    background:#fff;border:1px solid var(--rule);
    display:grid;place-items:center;cursor:pointer;
    box-shadow:0 6px 16px rgba(16,20,24,.12);
    color:var(--fg);z-index:2;transition:opacity .2s ease,transform .15s ease;
  }
  .kreel__btn svg{width:20px;height:20px}
  .kreel__btn:hover{transform:scale(1.05)}
  .kreel__btn:disabled{opacity:.35;cursor:default;transform:none}
  .kreel__btn--prev{left:-14px}
  .kreel__btn--next{right:-14px}
  @media (max-width:899px){.kreel__btn{display:none}}

  .kgps-bg-dark .kreel__btn,.kgps-bg-brand .kreel__btn{
    background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;
  }
  .kgps-bg-dark .kreel__btn:hover,.kgps-bg-brand .kreel__btn:hover{background:rgba(255,255,255,.22)}

    /* VREEL — big main player + thumbnail strip */
  .vreel{margin-top:24px}
  .vreel__main{
    position:relative;aspect-ratio:16/9;
    border-radius:18px;overflow:hidden;
    background:#000;box-shadow:0 20px 50px rgba(16,20,24,.14);
    max-width:1024px;margin:0 auto;
  }
  .vreel__main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .vreel__cover{
    position:absolute;inset:0;width:100%;height:100%;
    padding:0;margin:0;border:0;background:transparent;cursor:pointer;display:block;
  }
  .vreel__cover .vreel__poster{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  }
  .vreel__thumbs{
    display:flex;gap:12px;margin:16px auto 0;
    max-width:1024px;padding:2px 4px 14px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .vreel__thumbs::-webkit-scrollbar{display:none}
  .vreel__thumb{
    position:relative;flex:0 0 auto;
    width:172px;aspect-ratio:16/9;
    padding:0;border:2px solid transparent;border-radius:12px;
    background:#000;cursor:pointer;overflow:hidden;
    scroll-snap-align:start;
    transition:transform .15s ease,border-color .15s ease;
  }
  .vreel__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s ease}
  .vreel__thumb:hover img{opacity:.85}
  .vreel__thumb:hover{transform:translateY(-2px)}
  .vreel__thumb[aria-selected="true"]{border-color:var(--brand)}
  .vreel__thumb[aria-selected="true"]::after{
    content:"";position:absolute;inset:0;border:2px solid var(--brand);border-radius:10px;pointer-events:none;
  }
  .vreel__thumb-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:36px;height:36px;border-radius:50%;
    background:rgba(0,0,0,.62);color:#fff;
    display:grid;place-items:center;pointer-events:none;
  }
  .vreel__thumb-play svg{width:14px;height:14px;margin-left:2px}
  @media (max-width:699px){
    .vreel__main{border-radius:14px}
    .vreel__thumb{width:140px;border-radius:10px}
    .vreel__thumb-play{width:30px;height:30px}
  }
  .kgps-bg-dark .vreel__thumb[aria-selected="true"],
  .kgps-bg-brand .vreel__thumb[aria-selected="true"]{border-color:#fff}
  .kgps-bg-dark .vreel__thumb[aria-selected="true"]::after,
  .kgps-bg-brand .vreel__thumb[aria-selected="true"]::after{border-color:#fff}


    /* HIW — How it works (accordion + swappable image) */
  .hiw__head{max-width:1160px;margin:0 0 40px}
  .hiw__title{font-size:clamp(24px,2.6vw,36px);font-weight:800;letter-spacing:-.02em;text-align:center;margin:0 auto 16px;max-width:20ch}
  .hiw__intro{font-size:17px;line-height:1.6;color:var(--fg-70);margin:0}
  .hiw__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start}
  .hiw__sub{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0 0 20px;color:var(--fg)}
  .hiw__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .hiw__step{position:relative;border-radius:14px;transition:background-color .2s ease}
  .hiw__step.is-open{background:var(--brand-tint)}
  .hiw__q{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;color:#fff;}
  .hiw__num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
  .hiw__title-t{flex:1 1 auto;font-size:18px;font-weight:700;line-height:1.3}
  .hiw__chev{flex:0 0 auto;color:var(--fg-55);transition:transform .2s ease}
  .hiw__chev svg{width:20px;height:20px;display:block}
  .hiw__step.is-open .hiw__chev{transform:rotate(180deg)}
  .hiw__a{padding:0 18px 18px 66px}
  .hiw__body{font-size:16px;line-height:1.6;color:var(--fg)}
  .hiw__body p{margin:0 0 8px}
  .hiw__body p:last-child{margin-bottom:0}
  .hiw__cta{display:inline-block;margin-top:10px;font-weight:700;color:var(--brand-link);text-decoration:none}
  .hiw__cta:hover{text-decoration:underline}
  .hiw__right{position:sticky;top:100px;min-height:1px}
  .hiw__media{position:relative;margin:0;aspect-ratio:auto;border-radius:18px;overflow:hidden;background:var(--brand-tint);display:none;box-shadow:0 20px 50px rgba(16,20,24,.10)}
  .hiw__media.is-active{display:block}
  .hiw__media img{width:100%;height:100%;object-fit:contain;display:block}
  .hiw__inline-media{margin-top:14px;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--brand-tint)}
  .hiw__inline-media img{width:100%;height:100%;object-fit:cover;display:block}
  @media (min-width:900px){.hiw__inline-media{display:none}}
  @media (max-width:899px){.hiw__right{display:none}}
  @media (max-width:899px){
    .hiw__grid{grid-template-columns:1fr;gap:28px}
    .hiw__head{margin-bottom:28px}
    .hiw__title{text-align:left}
    .hiw__sub{font-size:20px}
    .hiw__a{padding:0 18px 18px 62px}
  }
  .kgps-bg-dark .hiw__step.is-open,
  .kgps-bg-brand .hiw__step.is-open{background:rgba(255,255,255,.10)}
  .kgps-bg-dark .hiw__body,
  .kgps-bg-brand .hiw__body{color:var(--on-invert-70)}
  .kgps-bg-dark .hiw__intro,
  .kgps-bg-brand .hiw__intro{color:var(--on-invert-70)}
  .kgps-bg-dark .hiw__chev,
  .kgps-bg-brand .hiw__chev{color:rgba(255,255,255,.7)}
  .kgps-bg-brand .hiw__num{background:#fff;color:var(--brand)}


    /* FAQ left column — reassurance bullets + contact card */
  .faq-sec__head .chk{margin-top:20px}
  .faq-sec__contact{
    margin-top:32px;padding:20px 22px;
    background:var(--brand-tint);border-radius:14px;
  }
  .faq-sec__contact-lead{margin:0 0 12px;font-weight:700;color:var(--fg);font-size:15px}
  .faq-sec__contact-row{
    display:flex;align-items:center;gap:10px;
    margin:6px 0;padding:2px 0;
    color:var(--fg);text-decoration:none;font-weight:600;font-size:16px;
  }
  .faq-sec__contact-row:hover{color:var(--brand-link)}
  .faq-sec__contact-row svg{width:18px;height:18px;color:var(--brand-link);flex:0 0 auto}
  .faq-sec__contact-hours{margin:10px 0 0;font-size:13.5px;color:var(--fg-55)}
  .kgps-bg-dark .faq-sec__contact,
  .kgps-bg-brand .faq-sec__contact{background:rgba(255,255,255,.10)}
  .kgps-bg-dark .faq-sec__contact-lead,
  .kgps-bg-brand .faq-sec__contact-lead,
  .kgps-bg-dark .faq-sec__contact-row,
  .kgps-bg-brand .faq-sec__contact-row,
  .kgps-bg-dark .faq-sec__contact-row svg,
  .kgps-bg-brand .faq-sec__contact-row svg{color:#fff}
  .kgps-bg-dark .faq-sec__contact-hours,
  .kgps-bg-brand .faq-sec__contact-hours{color:rgba(255,255,255,.62)}

  /* Cost left column — checklist + trust card */
  .cost__left{display:flex;flex-direction:column}
  .cost__chk{margin-top:24px}
  .cost__card{
    margin-top:32px;padding:22px 24px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;color:#fff;
  }
  .sec:not(.kgps-bg-dark):not(.kgps-bg-brand) .cost__card{
    background:var(--brand-tint);border-color:transparent;color:var(--fg);
  }
  .cost__card-eyebrow{
    margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:inherit;opacity:.85;
  }
  .cost__badges{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px 24px;
  }
  .cost__badges li{display:flex;flex-direction:column;gap:4px}
  .cost__badge-num{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;color:inherit}
  .cost__badge-txt{font-size:14px;color:inherit;opacity:.78}
  .cost__card-foot{margin:16px 0 0;font-size:13.5px;color:inherit;opacity:.72}
  .kgps-bg-brand .cost__badge-num{color:#fff}



    /* Cost panel rows — labels+descriptions on the left,
     prices right-aligned. The section markup needs these; they
     were missing, so the panel collapsed to a bulleted list. */
  .cost__price{
    display:flex;align-items:baseline;gap:10px;
    margin:0 0 4px;padding-bottom:16px;
    border-bottom:1px solid var(--rule-soft);
  }
  .cost__price b{font-size:34px;font-weight:800;line-height:1;color:var(--fg)}
  .cost__price span{font-size:14px;color:var(--fg-55)}

  .cost__rows{list-style:none;margin:0;padding:0}
  .cost__rows li{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding-block:14px;border-bottom:1px solid var(--rule-soft);
  }
  .cost__rows li:last-child{border-bottom:0}
  .cost__rows li > div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .cost__rows li > div b{font-size:16px;font-weight:700;color:var(--fg)}
  .cost__rows li > div span{font-size:13.5px;color:var(--fg-55)}
  .cost__num{
    flex:0 0 auto;font-size:15px;font-weight:700;
    color:var(--fg);white-space:nowrap;
  }
  .cost__num--zero{color:var(--brand-link)}

  .cost__cta{margin-top:18px;width:100%}

  /* Kill the empty trust-badge grid so the card isn't a
     huge blank box before badges are added. */
  .cost__badges:empty{display:none}

  


  h2.hiw__title {text-align: center;margin: 20px auto !important;}
  .is-in p.sec__sub {text-align: left;}
  .sec__head.is-in p.sec__sub, p.hiw__intro{text-align: center;}
  span.tbl__img.tbl__img--empty {display: none;}
  table.tbl thead tr th {background: #1b4fd8;color:#fff;}
  .pdp-badge img {
    width: 100px;
    height: 100px;
}


/* ── Trust logo carousel INSIDE hero buy card (`award` blocks) ── */
.pdp-awards {
  position: relative;
  margin: 22px 0 4px;
  padding: 18px 8px;
  background: var(--brand-tint);
  border-radius: 12px;
}
.pdp-awards__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  scrollbar-width: none;
  padding: 4px 40px;
}
.pdp-awards__track::-webkit-scrollbar { display: none; }
.pdp-awards__track:where(:hover, :focus-within) { justify-content: flex-start; }

.pdp-award {
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
}
.pdp-award img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  transition: transform .2s ease;
}
.pdp-award:hover img { transform: scale(1.05); }

.pdp-award__placeholder {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 2px dashed rgba(16,20,24,.18);
  border-radius: 50%;
  color: var(--fg-55);
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  line-height: 1.15;
}

.pdp-awards__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule-soft);
  border-radius: 50%;
  background: #fff;
  color: var(--fg-70);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease, color .15s ease;
}
.pdp-awards__btn:hover:not(:disabled) { background: var(--brand); color: #fff; border-color: var(--brand); }
.pdp-awards__btn:disabled { opacity: .3; cursor: default; }
.pdp-awards__btn svg { width: 14px; height: 14px; }
.pdp-awards__btn--prev { left: 8px; }
.pdp-awards__btn--next { right: 8px; }

@media (max-width: 699px) {
  .pdp-awards { padding: 14px 4px; }
  .pdp-awards__track { gap: 14px; padding: 4px 34px; }
  .pdp-award { width: 68px; height: 68px; }
}




  /* ═══════════════════════════════════════════════════════════════════
   PDP-specific styles. Layered on top of the homepage kgps-home.css.
   All classes prefixed .pdp- to avoid collisions.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero: gallery + buy card ─────────────────────────────────────── */
.pdp-hero{padding-block:32px 64px}
.pdp-hero__crumb{
  font-size:13px;color:var(--fg-55);margin:0 0 20px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.pdp-hero__crumb a{color:var(--fg-55);text-decoration:none}
.pdp-hero__crumb a:hover{color:var(--brand-link)}
.pdp-hero__crumb-sep{color:var(--fg-35)}

.pdp-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:30px;align-items:start;
}
img.pdp-buy__amazon-logo {
    position: relative;
    top: 6px;
}
@media (max-width:899px){ .pdp-hero__grid{grid-template-columns:1fr;gap:32px} }

/* ── Gallery ─────────────────────────────────────────────────────── */
.pdp-gal{position:sticky;top:100px}
@media (max-width:899px){ .pdp-gal{position:static} }
.pdp-gal__main{
  position:relative;border-radius:20px;overflow:hidden;
  background:var(--brand-tint);aspect-ratio:1/1;
  border:1px solid var(--rule-soft);
}
@media (max-width:899px){ .pdp-gal__main{aspect-ratio:4/3} }
.pdp-gal__main video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;padding:4%;
  opacity:0;transition:opacity .18s ease;
}
.pdp-gal__main img{
  position:absolute !important;inset:0 !important;width:100% !important;height:auto !important;
  object-fit:contain !important;display:block !important;padding:2% !important;
  opacity:0;transition:opacity .18s ease;
}
.pdp-gal__main img.is-active,.pdp-gal__main video.is-active{opacity:1 !important;z-index:1}
.pdp-gal__badge{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--action);color:var(--action-fg);
  padding:5px 11px;border-radius:99px;
  font-size:12px;font-weight:800;letter-spacing:.02em;
}
.pdp-gal__thumbs{position:relative;margin-top:14px}
@media (max-width:899px){ .pdp-gal__thumbs{gap:8px} }
.pdp-gal__thumb{
  position:relative;aspect-ratio:1/1;
  padding:0;border:2px solid transparent;border-radius:10px;
  background:var(--brand-tint);cursor:pointer;overflow:hidden;
  transition:border-color .15s ease;
}
.pdp-gal__thumb img{width:100%;height:100%;object-fit:contain;padding:8%}
.pdp-gal__thumb.is-active{border-color:var(--brand)}
.pdp-gal__thumb-vid{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.4);color:#fff;
}
.pdp-gal__thumb-vid svg{width:20px;height:20px}

/* ── Buy card ──────────────────────────────────────────────────── */
.pdp-buy__rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--fg-70);margin:0 0 14px}
.pdp-buy__rating .stars{color:var(--star);gap:1px}
.pdp-buy__rating .stars svg{width:16px;height:16px}
.pdp-buy__rating b{color:var(--fg)}
.pdp-buy__rating a{color:var(--fg-70);text-decoration:underline;text-underline-offset:2px}

.pdp-buy__eyebrow{
  display:inline-block;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-link);margin:0 0 8px;
}
.pdp-buy__title{
  font-size:clamp(28px,3.4vw,42px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 16px;color:var(--fg);
}
.pdp-buy__lede{font-size:17px;line-height:1.5;color:var(--fg-70);margin:0 0 22px}

.pdp-buy__price{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.pdp-buy__price-now{font-size:36px;font-weight:800;letter-spacing:-.015em;color:var(--fg);line-height:1}
.pdp-buy__price-was{font-size:19px;color:var(--fg-55);text-decoration:line-through;line-height:1}
.pdp-buy__save{background:#ff0000;color:#fff;font-size:13px;font-weight:700;padding:4px 9px;border-radius:6px;line-height:1.4}
.pdp-buy__plan{font-size:14px;color:var(--fg-70);margin:0 0 22px}
.pdp-buy__plan b{color:var(--fg)}

/* .pdp-buy__cta{width:100%;padding-block:18px;font-size:17px;font-weight:800;margin-bottom:12px} */
.pdp-buy__secondary{display:block;text-align:center;font-size:14px;color:var(--brand-link);font-weight:600;text-decoration:none;margin-bottom:22px}
.pdp-buy__secondary:hover{text-decoration:underline}

.pdp-buy__guarantees{display:grid;gap:10px;padding:16px 18px;background:var(--brand-tint);border-radius:12px;margin-bottom:20px}
.pdp-buy__guarantees li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--fg);line-height:1.5}
.pdp-buy__guarantees svg{width:18px;height:18px;color:var(--brand-link);flex:0 0 auto;margin-top:2px}
.pdp-buy__guarantees b{color:var(--fg);font-weight:700}

.pdp-buy__ship{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fg-70);padding:12px 0;border-top:1px solid var(--rule-soft)}
.pdp-buy__ship svg{width:18px;height:18px;color:var(--brand-link);flex:0 0 auto}
.pdp-buy__ship b{color:var(--fg)}

/* ── Product tabs INSIDE the hero buy card ────────────────────── */
.pdp-tabs{
  margin-top:24px;padding-top:8px;
  border-top:1px solid var(--rule-soft);
}
.pdp-tabs__panel{
  border-bottom:1px solid var(--rule-soft);
}
.pdp-tabs__btn{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:18px 4px;border:0;background:transparent;
  font:inherit;text-align:left;cursor:pointer;color:var(--fg);
  font-size:15.5px;font-weight:700;
}
.pdp-tabs__btn:hover{color:var(--brand-link)}
.pdp-tabs__chev{color:var(--fg-55);transition:transform .2s ease;flex:0 0 auto}
.pdp-tabs__chev svg{width:18px;height:18px;display:block}
.pdp-tabs__btn[aria-expanded="true"] .pdp-tabs__chev{transform:rotate(180deg)}
.pdp-tabs__body{padding:0 4px 20px;font-size:15px;line-height:1.6;color:var(--fg-70)}
.pdp-tabs__body p{margin:0 0 10px}
.pdp-tabs__body p:last-child{margin:0}
.pdp-tabs__body ul{margin:0 0 8px;padding-left:20px}
.pdp-tabs__body li{margin:4px 0}
.pdp-tabs__body b{color:var(--fg);font-weight:700}

/* Inline specs table inside the tab */
.pdp-tabs__specs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.pdp-tabs__specs .r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:14px}
.pdp-tabs__specs .r:last-child,.pdp-tabs__specs .r:nth-last-child(2){border-bottom:0}
.pdp-tabs__specs .r b{color:var(--fg);font-weight:600}
.pdp-tabs__specs .r span{color:var(--fg-70);text-align:right}
@media (max-width:699px){ .pdp-tabs__specs{grid-template-columns:1fr} .pdp-tabs__specs .r:nth-last-child(2){border-bottom:1px solid var(--rule-soft)} }

/* "What's in the box" mini grid inside the tab */
.pdp-tabs__box{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pdp-tabs__box-item{display:flex;gap:12px;align-items:flex-start}
.pdp-tabs__box-ico{
  width:36px;height:36px;flex:0 0 auto;border-radius:8px;
  background:var(--brand-tint);color:var(--brand-link);
  display:grid;place-items:center;
}
.pdp-tabs__box-ico svg{width:20px;height:20px}
.pdp-tabs__box-item b{display:block;font-size:14px;color:var(--fg)}
.pdp-tabs__box-item span{font-size:12.5px;color:var(--fg-55)}

/* ── Below-hero trust strip (4 quick benefits) ────────────────── */
.pdp-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:22px 12px;margin-block:0 0;
  background:var(--brand-tint);border-radius:16px;
}
.pdp-strip li{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:6px 20px;font-size:15px;font-weight:600;color:var(--fg);
  border-inline-start:1px solid rgba(16,20,24,.10);text-align:left;
}
.pdp-strip li:first-child{border-inline-start:0}
.pdp-strip svg{width:22px;height:22px;color:var(--brand-link);flex:0 0 auto}
@media (max-width:899px){
  .pdp-strip{grid-template-columns:1fr 1fr;padding:14px 8px}
  .pdp-strip li{padding:12px 14px;font-size:13.5px;justify-content:flex-start}
  .pdp-strip li:nth-child(odd){border-inline-start:0}
  .pdp-strip li:nth-child(n+3){border-block-start:1px solid rgba(16,20,24,.10)}
}

/* ── Sticky mini buy bar ──────────────────────────────────────── */
.pdp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--rule);
  transform:translateY(100%);transition:transform .25s ease;
  padding:12px 20px;
}
.pdp-sticky.is-shown{transform:translateY(0)}
.pdp-sticky__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px}
.pdp-sticky__product{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.pdp-sticky__thumb{width:44px;height:44px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:var(--brand-tint);display:grid;place-items:center}
.pdp-sticky__thumb img{width:80%;height:80%;object-fit:contain}
.pdp-sticky__meta{min-width:0}
.pdp-sticky__name{font-size:14.5px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sticky__price{font-size:13px;color:var(--fg-70)}
.pdp-sticky__cta{flex:0 0 auto;padding:11px 22px;font-size:14.5px}
@media (max-width:899px){
  .pdp-sticky__product{display:none}
  .pdp-sticky__cta{flex:1;padding:14px}
}

/* Bottom padding on the last section so sticky bar doesn't cover content */
body{padding-bottom:100px}

/* ── Section utilities ─────────────────────────────────────────── */
.pdp-section-eyebrow{
  display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-link);margin-bottom:14px;
}
.kgps-bg-dark .pdp-section-eyebrow,
.kgps-bg-brand .pdp-section-eyebrow{color:rgba(255,255,255,.9)}

/* ── "Why you need Konnect GPS" — persona cards ──────────────── */
.pdp-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:32px}
.pdp-why__card{
  padding:28px 24px 26px;border-radius:16px;
  background:#fff;border:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:14px;
}
.kgps-bg-dark .pdp-why__card,
.kgps-bg-brand .pdp-why__card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.pdp-why__ico{
  width:48px;height:48px;border-radius:12px;
  background:var(--brand-tint);color:var(--brand-link);
  display:grid;place-items:center;
}
.kgps-bg-dark .pdp-why__ico,
.kgps-bg-brand .pdp-why__ico{background:rgba(255,255,255,.14);color:#fff}
.pdp-why__ico svg{width:24px;height:24px}
.pdp-why__card h3{font-size:18px;font-weight:800;margin:0;color:var(--fg)}
.kgps-bg-dark .pdp-why__card h3,
.kgps-bg-brand .pdp-why__card h3{color:#fff}
.pdp-why__card p{margin:0;font-size:15px;line-height:1.55;color:var(--fg-70)}
.kgps-bg-dark .pdp-why__card p,
.kgps-bg-brand .pdp-why__card p{color:rgba(255,255,255,.78)}

/* ── "Key features with image" — alternating rows ──────────────── */
.pdp-feat{display:flex;flex-direction:column;gap:80px;margin-top:56px}
.pdp-feat__row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:center;
}
.pdp-feat__row:nth-child(even) .pdp-feat__media{order:2}
.pdp-feat__media{
  aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:var(--brand-tint);
  box-shadow:0 20px 50px rgba(16,20,24,.10);
}
.pdp-feat__media img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-feat__eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-link);margin-bottom:12px;
}
.pdp-feat__body h3{
  font-size:clamp(24px,2.5vw,32px);font-weight:800;letter-spacing:-.02em;
  margin:0 0 16px;line-height:1.15;color:var(--fg);
}
.pdp-feat__body p{font-size:17px;line-height:1.6;color:var(--fg-70);margin:0 0 16px}
.pdp-feat__body ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.pdp-feat__body ul li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--fg);line-height:1.5}
.pdp-feat__body ul svg{width:18px;height:18px;color:var(--brand-link);flex:0 0 auto;margin-top:2px}
.kgps-bg-dark .pdp-feat__body h3,
.kgps-bg-brand .pdp-feat__body h3{color:#fff}
.kgps-bg-dark .pdp-feat__body p,
.kgps-bg-brand .pdp-feat__body p{color:rgba(255,255,255,.78)}
.kgps-bg-dark .pdp-feat__body ul li,
.kgps-bg-brand .pdp-feat__body ul li{color:rgba(255,255,255,.9)}
.kgps-bg-dark .pdp-feat__body ul svg,
.kgps-bg-brand .pdp-feat__body ul svg{color:#fff}
@media (max-width:899px){
  .pdp-feat{gap:56px}
  .pdp-feat__row{grid-template-columns:1fr;gap:24px}
  .pdp-feat__row:nth-child(even) .pdp-feat__media{order:0}
}

/* ── "How OBD2 works" — technical explainer ─────────────────── */
.pdp-obd{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:start;margin-top:32px;
}
.pdp-obd__body p{font-size:16px;line-height:1.65;color:var(--fg-70);margin:0 0 16px}
.pdp-obd__body p:last-child{margin:0}
.kgps-bg-dark .pdp-obd__body p,
.kgps-bg-brand .pdp-obd__body p{color:rgba(255,255,255,.82)}
.pdp-obd__flow{
  padding:28px;background:var(--brand-tint);border-radius:16px;
  display:grid;gap:18px;
}
.kgps-bg-dark .pdp-obd__flow,
.kgps-bg-brand .pdp-obd__flow{background:rgba(255,255,255,.08)}
.pdp-obd__step{display:flex;gap:14px;align-items:flex-start}
.pdp-obd__num{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  font-size:13px;font-weight:800;
}
.kgps-bg-dark .pdp-obd__num,
.kgps-bg-brand .pdp-obd__num{background:#fff;color:var(--brand)}
.pdp-obd__step b{display:block;font-size:15.5px;color:var(--fg);font-weight:700;margin-bottom:2px}
.pdp-obd__step span{font-size:14.5px;line-height:1.5}
.kgps-bg-dark .pdp-obd__step b,
.kgps-bg-brand .pdp-obd__step b{color:#fff}
.kgps-bg-dark .pdp-obd__step span,
.kgps-bg-brand .pdp-obd__step span{color:rgba(255,255,255,.8)}
@media (max-width:899px){ .pdp-obd{grid-template-columns:1fr;gap:32px} }

/* ── Bulk quote block ──────────────────────────────────────── */
.pdp-bulk{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:56px;border-radius:24px;
  background:var(--fg);color:#fff;
}
.pdp-bulk__eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--action);margin-bottom:14px;
}
.pdp-bulk h2{font-size:clamp(28px,2.8vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;color:#fff;line-height:1.15}
.pdp-bulk p{font-size:17px;line-height:1.55;color:rgba(0, 0, 0, 0.8);margin:0 0 18px}
.pdp-bulk__points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pdp-bulk__points li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.92)}
.pdp-bulk__points svg{width:18px;height:18px;color:var(--action);flex:0 0 auto;margin-top:2px}
.pdp-bulk__form{
  background:#fff;padding:28px;border-radius:16px;color:var(--fg);
  display:grid;gap:14px;
}
.pdp-bulk__form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pdp-bulk__form label{display:block;font-size:12.5px;font-weight:700;color:var(--fg);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.pdp-bulk__form input,.pdp-bulk__form select{
  width:100%;padding:11px 12px;font:inherit;font-size:15px;
  border:1px solid var(--rule);border-radius:9px;background:#fff;color:var(--fg);
}
.pdp-bulk__form input:focus,.pdp-bulk__form select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.pdp-bulk__form-note{font-size:12.5px;color:var(--fg-55);margin-top:2px}
@media (max-width:899px){
  .pdp-bulk{grid-template-columns:1fr;gap:32px;padding:32px}
  .pdp-bulk__form-row{grid-template-columns:1fr}
}

/* ── Hero: seal row (3 mini badges before the tabs) ─────────────── */
.pdp-seal{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:20px 0 4px;
}
.pdp-seal__item{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:14px 8px;background:#fff;
  border:1px solid var(--rule-soft);border-radius:12px;
}
.pdp-seal__ico{
  width:32px;height:32px;margin-bottom:6px;
  display:grid;place-items:center;
  color:var(--brand-link);
}
.pdp-seal__ico svg{width:24px;height:24px}
.pdp-seal__t{font-size:12.5px;font-weight:700;color:var(--fg);line-height:1.2;margin:0 0 2px}
.pdp-seal__s{font-size:11px;color:var(--fg-55);line-height:1.3;margin:0}
@media (max-width:699px){
  .pdp-seal__item{padding:10px 6px}
  .pdp-seal__ico{width:26px;height:26px;margin-bottom:4px}
  .pdp-seal__ico svg{width:20px;height:20px}
  .pdp-seal__t{font-size:11.5px}
  .pdp-seal__s{font-size:10.5px}
}

/* ── Comparison table (Konnect vs Bouncie vs Vyncs vs Amazon-tier) ── */
.pdp-cmp{margin-top:32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pdp-cmp__table{
  width:100%;min-width:640px;border-collapse:separate;border-spacing:0;
  font-size:15px;
}
.pdp-cmp__table th,.pdp-cmp__table td{
  padding:16px 20px;text-align:center;
  border-bottom:1px solid var(--rule-soft);vertical-align:middle;
}
.pdp-cmp__table th:first-child,
.pdp-cmp__table td:first-child{text-align:left;font-weight:600;color:var(--fg)}
.pdp-cmp__table thead th{
  font-size:14px;font-weight:700;padding:20px 12px 22px;
  background:transparent;color:var(--fg-70);border-bottom:2px solid var(--rule);
  vertical-align:bottom;
}
.pdp-cmp__table thead th.pdp-cmp__us{
  background:var(--brand);color:#fff;border-radius:16px 16px 0 0;
  padding-top:16px;position:relative;
}
.pdp-cmp__table thead th.pdp-cmp__us::before{
  content:"Our pick";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--action);color:var(--action-fg);
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;white-space:nowrap;
}
.pdp-cmp__brand{font-size:16px;font-weight:800;letter-spacing:-.01em;display:block;color:inherit}
.pdp-cmp__sub{font-size:12px;font-weight:500;opacity:.75;margin-top:2px;display:block}
.pdp-cmp__table td.pdp-cmp__us-cell{
  background:var(--brand-tint);color:var(--fg);font-weight:700;
}
.pdp-cmp__table tr:last-child td{border-bottom:0}
.pdp-cmp__table tr:last-child td.pdp-cmp__us-cell{border-radius:0 0 16px 16px}
.pdp-cmp__yes{color:#1a7a3e;font-weight:700}
.pdp-cmp__no{color:#c1272d;font-weight:600}
.pdp-cmp__yes svg,.pdp-cmp__no svg{width:18px;height:18px;vertical-align:middle}
.pdp-cmp__note{margin-top:16px;font-size:13px;color:var(--fg-55);text-align:center;font-style:italic}

/* Dark / brand variants */
.kgps-bg-dark .pdp-cmp__table th,
.kgps-bg-brand .pdp-cmp__table th{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.2)}
.kgps-bg-dark .pdp-cmp__table td,
.kgps-bg-brand .pdp-cmp__table td{color:rgba(255,255,255,.9);border-bottom-color:rgba(255,255,255,.1)}
.kgps-bg-dark .pdp-cmp__table td:first-child,
.kgps-bg-brand .pdp-cmp__table td:first-child{color:#fff}
.kgps-bg-dark .pdp-cmp__note,
.kgps-bg-brand .pdp-cmp__note{color:rgba(255,255,255,.6)}

/* ── "What is GPS Tracking" video block ────────────────────────── */
.pdp-vid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:56px;align-items:center;margin-top:32px;
}
@media (max-width:899px){ .pdp-vid{grid-template-columns:1fr;gap:32px} }
.pdp-vid__body h3{
  font-size:clamp(24px,2.5vw,32px);font-weight:800;letter-spacing:-.02em;
  margin:0 0 16px;line-height:1.15;color:var(--fg);
}
.pdp-vid__body p{font-size:16.5px;line-height:1.6;color:var(--fg-70);margin:0 0 14px}
.pdp-vid__body p:last-child{margin:0}
.kgps-bg-dark .pdp-vid__body h3,
.kgps-bg-brand .pdp-vid__body h3{color:#fff}
.kgps-bg-dark .pdp-vid__body p,
.kgps-bg-brand .pdp-vid__body p{color:rgba(255,255,255,.78)}

.pdp-vid__frame{
  position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:#000;box-shadow:0 20px 50px rgba(16,20,24,.14);
  border:0;padding:0;width:100%;cursor:pointer;
}
.pdp-vid__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pdp-vid__frame .vidMain__play{position:absolute;inset:0}
.pdp-vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pdp-vid__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
.pdp-vid__placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.7);font-size:14px;font-weight:600;
  padding:24px;text-align:center;background:#1a1a1a;
}

/* ── Valued clients strip (logo marquee) ───────────────────────── */
.pdp-clients{padding-block:48px}
.pdp-clients__label{
  text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-55);margin:0 0 24px;
}
.kgps-bg-dark .pdp-clients__label,
.kgps-bg-brand .pdp-clients__label{color:rgba(255,255,255,.65)}


/* ── Buy card: primary row (qty + Add to Cart) ─────────────── */
.pdp-buy__primary-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
@media (max-width: 449px) {
  .pdp-buy__primary-row { grid-template-columns: 120px 1fr; gap: 10px; }
}

.pdp-buy__qty {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-height: 60px;
}
.pdp-buy__qty-btn {
  height: 100%; padding: 0; background: transparent; border: 0;
  font-size: 22px; font-weight: 400; color: var(--fg);
  cursor: pointer; line-height: 1; transition: color .15s ease;
}
.pdp-buy__qty-btn:hover { color: var(--brand); }
.pdp-buy__qty-input {
  width: 44px; height: 100%; padding: 0; border: 0;
  text-align: center; font: inherit;
  font-size: 17px; font-weight: 700; color: var(--fg);
  background: transparent; -moz-appearance: textfield;
}
.pdp-buy__qty-input::-webkit-outer-spin-button,
.pdp-buy__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-buy__cta {
  width: 100%; padding-block: 0; min-height: 60px;
  font-size: 18px; font-weight: 800; border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #072db8;
  color: #fff;
  border-color: #072db8;
}

.pdp-buy_cta:Hover{
  background: #fff !important;
    color: #072db8 !important;
    border-color: #000 !important;
}

.pdp-buy__cta-icon {
  height: 22px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* ── Buy card: secondary row (Buy Now + Amazon) ───────────── */
.pdp-buy__secondary-row {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px;
}
.pdp-buy__secondary-row--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 449px) {
  .pdp-buy__secondary-row--two { grid-template-columns: 1fr; }
}

.pdp-buy__now {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  min-height: 58px; font-size: 16px; font-weight: 700; border-radius: 10px;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pdp-buy__now-icon {
  height: 22px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.pdp-buy__now:hover:not(:disabled) { background: var(--brand-link); }
.pdp-buy__now:active { transform: translateY(1px); }
.pdp-buy__now:disabled { opacity: .7; cursor: wait; }

.pdp-buy__amazon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFD814;
  color: #0F1111;
  border: 1px solid #FCD200;
  min-height: 58px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.pdp-buy__amazon:hover { background: #F7CA00; color: #0F1111; border-color: #F2C200; }
.pdp-buy__amazon:active { transform: translateY(1px); }
.pdp-buy__amazon-logo {
  height: 24px;
  width: auto;
  display: block;
  color: #0F1111;
}

/* ── Buy card: guarantee card (icon + heading + body) ───── */
.pdp-buy__guarantee {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; background: var(--brand-tint);
  border-radius: 14px; margin-bottom: 20px;
}
.pdp-buy__guarantee-icon {
  width: 46px; height: 46px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--rule-soft);
  border-radius: 50%; display: grid; place-items: center;
  color: var(--brand-link);
}
.pdp-buy__guarantee-icon svg { width: 22px; height: 22px; }
.pdp-buy__guarantee-body { min-width: 0; }
.pdp-buy__guarantee-body h4 {
  margin: 0 0 6px; font-size: 17px; font-weight: 800;
  color: var(--brand-link); letter-spacing: -.01em; line-height: 1.25;
}
.pdp-buy__guarantee-body p {
  margin: 0; font-size: 14.5px; color: var(--fg); line-height: 1.55;
}

/* ── Buy card: "Secure checkout" payment icons ─────────── */
.pdp-buy__pay { padding: 4px 0 2px; }
.pdp-buy__pay-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--fg); margin: 0 0 10px;
}
.pdp-buy__pay-lock { width: 18px; height: 18px; color: var(--fg-70); flex: 0 0 auto; }
.pdp-buy__pay-icons {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0; margin: 0; list-style: none;
}
.pdp-buy__pay-icons li {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; background: #fff;
  border: 1px solid var(--rule-soft); border-radius: 8px;
  height: 40px; min-width: 54px;
}
.pdp-buy__pay-icons svg,
.pdp-buy__pay-icons .pdp-buy__payment-icon {
  height: 22px; width: auto; display: block;
}


svg.pdp-buy__amazon-logo {
    height: 30px !important;
    width: 30px;
}
/* ── Full-width layout modifier ─────────────────────────────── */
.wrap.wrap--full {
  max-width: none;
  padding-inline: 24px;
}
@media (max-width: 699px) {
  .wrap.wrap--full { padding-inline: 16px; }
}

/* ── Thumb carousel: defensive overrides ────────────────────
   Live theme may have competing CSS from a base theme's product
   media layout (grids, vertical stacks). Force flex + widths so
   the horizontal carousel always wins.                          */
.pdp-gal .pdp-gal__thumbs {
  position: relative !important;
  display: block !important;
  margin-top: 14px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
.pdp-gal .pdp-gal__thumbs-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px !important;
  width: 100% !important;
}
.pdp-gal .pdp-gal__thumbs-track::-webkit-scrollbar { display: none; }
.pdp-gal .pdp-gal__thumbs .pdp-gal__thumb {
  flex: 0 0 88px !important;
  width: 88px !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  scroll-snap-align: start;
  display: block !important;
}
@media (max-width: 899px) {
  .pdp-gal .pdp-gal__thumbs .pdp-gal__thumb {
    flex-basis: 72px !important;
    width: 72px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — defensive layer
   Forces PDP hero layout on mobile in case parent theme overrides
   ═══════════════════════════════════════════════════════════════ */

/* Force hero grid to work on mobile — single column, both children visible */
.pdp-hero .pdp-hero__grid {
  display: grid !important;
  align-items: start;
}
@media (max-width: 899px) {
  .pdp-hero .pdp-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .pdp-hero .pdp-gal,
  .pdp-hero .pdp-buy {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .pdp-hero .pdp-gal { position: static !important; }
}

/* Force gallery to be visible on ALL viewports */
.pdp-gal .pdp-gal__main {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  background: var(--brand-tint);
}
@media (max-width: 899px) {
  .pdp-gal .pdp-gal__main {
    aspect-ratio: 1/1 !important;
    max-width: 100% !important;
  }
}

/* Mobile: tighter hero spacing, better sizing */
@media (max-width: 899px) {
  .pdp-hero { padding-block: 20px 40px !important; }
  .pdp-hero__crumb { margin-bottom: 14px; font-size: 12.5px; }

  /* Buy card content — right-size fonts for mobile */
  .pdp-buy__eyebrow { font-size: 12px; }
  .pdp-buy__title { font-size: 26px !important; line-height: 1.15; }
  .pdp-buy__rating { font-size: 13px; }
  .pdp-buy__lede { font-size: 15.5px; margin-bottom: 18px; }
  .pdp-buy__price-now { font-size: 30px !important; }
  .pdp-buy__price-was { font-size: 17px; }
  .pdp-buy__plan { font-size: 13.5px; }

  /* Buy card action buttons */
  .pdp-buy__cta {
    font-size: 16px !important;
    min-height: 54px !important;
  }
  .pdp-buy__now,
  .pdp-buy__amazon {
    font-size: 15px !important;
    min-height: 52px !important;
  }
  .pdp-buy__qty { min-height: 54px; }
  .pdp-buy__qty-input { font-size: 15px; }

  /* Guarantee card mobile */
  .pdp-buy__guarantee { padding: 16px; gap: 12px; margin-bottom: 16px; }
  .pdp-buy__guarantee-icon { width: 40px; height: 40px; }
  .pdp-buy__guarantee-icon svg { width: 20px; height: 20px; }
  .pdp-buy__guarantee-body h4 { font-size: 15.5px; }
  .pdp-buy__guarantee-body p { font-size: 13.5px; }

  /* Payment icons mobile */
  .pdp-buy__pay-label { font-size: 13.5px; }
  .pdp-buy__pay-icons { gap: 6px; }
  .pdp-buy__pay-icons li {
    height: 36px;
    min-width: 48px;
    padding: 4px 8px;
  }
  .pdp-buy__pay-icons svg,
  .pdp-buy__pay-icons .pdp-buy__payment-icon { height: 18px; }

  /* Shipping line */
  .pdp-buy__ship { font-size: 13px; padding: 10px 0; }

  /* Secondary link */
  .pdp-buy__secondary { font-size: 13.5px; margin-bottom: 16px; }
}

/* Very narrow phones */
@media (max-width: 379px) {
  .pdp-buy__title { font-size: 24px !important; }
  .pdp-buy__price-now { font-size: 26px !important; }
  .pdp-buy__cta { font-size: 15px !important; }
}

/* Section spacing on mobile — reduce padding so sections don't feel bloated */
@media (max-width: 899px) {
  .sec { padding-block: 40px !important; }
  .sec--tight { padding-block: 24px !important; }
  .sec__head { margin-bottom: 24px; }
  .sec__head h2 { font-size: 26px !important; line-height: 1.2; }
  .sec__sub { font-size: 15px; }
}

@media (max-width: 699px) {
  .sec { padding-block: 32px !important; }
  .sec__head h2 { font-size: 24px !important; }
}


/* ── Homepage hero: platform rating cards ─────────────────── */
.nhero__rating-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.rcard {
  flex: 1 1 240px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
}
.rcard__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--fg);
}
.rcard__icon svg,
.rcard__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rcard__score {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 800;
  color: var(--fg);
  padding-left: 8px;
  border-left: 1px solid var(--rule-soft);
  line-height: 1;
  min-height: 40px;
  display: grid;
  place-items: center;
}
.rcard__body {
  flex: 1 1 auto;
  min-width: 0;
}
.rcard__body .stars {
  display: inline-flex;
  color: var(--star);
  gap: 2px;
  margin-bottom: 2px;
}
.rcard__body .stars svg {
  width: 13px;
  height: 13px;
}
.rcard__body p {
  margin: 0;
  font-size: 12px;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.25;
}

.rcard.rcard--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, box-shadow .2s ease;
}
.rcard.rcard--link:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16,20,24,.08);
}
.rcard.rcard--link:active {
  transform: translateY(0);
}
.rcard.rcard--link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Dark and brand backgrounds — invert card contrast */
.kgps-bg-dark .rcard,
.kgps-bg-brand .rcard {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}
.kgps-bg-dark .rcard__score,
.kgps-bg-brand .rcard__score,
.kgps-bg-dark .rcard__body p,
.kgps-bg-brand .rcard__body p {
  color: #fff;
}
.kgps-bg-dark .rcard__icon,
.kgps-bg-brand .rcard__icon {
  color: #fff;
}
.kgps-bg-dark .rcard__score,
.kgps-bg-brand .rcard__score {
  border-left-color: rgba(255,255,255,.15);
}

@media (max-width: 699px) {
  .nhero__rating-cards { gap: 8px; }
  .rcard { padding: 12px 14px; gap: 12px; }
  .rcard__icon { width: 28px; height: 28px; }
  .rcard__score { font-size: 22px; padding-left: 12px; min-height: 34px; }
  .rcard__body .stars svg { width: 12px; height: 12px; }
  .rcard__body p { font-size: 12.5px; }
}