/* =====================================================================
   Wholesale Payments — Rep Help
   Apple-style, light on color. Brand hues appear only as thin accents.
   ===================================================================== */

:root {
  /* Header row height — the sticky filter bar reads this too. */
  --hdr-row: 104px;
  /* Full sticky-header height (brand row + tabs). Measured at runtime because
     it changes with the breakpoint; the literal below is only the pre-JS
     fallback. The filter bar parks against this. */
  --hdr-h: 161px;

  /* Brand */
  --navy:  #10254f;
  --blue:  #1a9bd7;
  --blue-d:#0f74b0;
  --green: #29b45b;
  --green-d:#1f9a4c;
  --accent-grad: linear-gradient(90deg, #1a9bd7 0%, #29b45b 100%);
  --accent-grad-v: linear-gradient(180deg, #1a9bd7 0%, #29b45b 100%);

  /* Light theme (default).
     Neutral greys, not blue-tinted ones. A page built out of #f4f7fb reads as
     faintly blue everywhere; these are the same steps with the hue removed, so
     white stays white and the only colour on screen is the brand. */
  --bg:        #ffffff;
  --bg-soft:   #f7f7f8;
  --bg-softer: #f1f1f3;
  --surface:   #ffffff;
  --card:      #ffffff;
  --card-hover:#fcfcfd;
  --border:    #e6e6e9;
  --border-2:  #f0f0f2;
  --text:      #1d1d1f;
  --text-soft: #6e6e73;
  --text-mut:  #86868b;
  --chip-bg:   #f4f4f6;
  --chip-on:   var(--navy);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.13), 0 6px 18px rgba(0,0,0,.06);
  --img-bg:    #fafafa;
  --header-bg: rgba(255,255,255,.78);
  --free-bg:   #e9f7ee;
  --free-fg:   #1f7d43;

  /* ------------------------------ motion ------------------------------
     Three durations and two curves, and nothing outside them. Everything that
     responds to a pointer uses --t-fast; every surface that changes shape uses
     --t-base; everything that enters the screen uses --t-enter. Entrances all
     move the same distance in the same direction (up), so the page reads as one
     system rather than a set of unrelated effects. */
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-enter: 320ms;
  --ease:    cubic-bezier(.22,.61,.36,1);   /* decelerate — for entrances */
  --ease-io: cubic-bezier(.4,0,.2,1);       /* symmetric — for state changes */
  --rise:    10px;                          /* the one entrance distance */
}

:root[data-theme="dark"],
:root.theme-dark {
  --bg:        #000000;
  --bg-soft:   #1c1c1e;
  --bg-softer: #232325;
  --surface:   #1c1c1e;
  --card:      #1c1c1e;
  --card-hover:#242426;
  --border:    #38383a;
  --border-2:  #2c2c2e;
  --text:      #f5f5f7;
  --text-soft: #aeaeb2;
  --text-mut:  #8e8e93;
  --chip-bg:   #2c2c2e;
  --chip-on:   #f5f5f7;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,.4);
  --shadow-lg: 0 22px 52px rgba(0,0,0,.55);
  --img-bg:    #1c1c1e;
  --header-bg: rgba(0,0,0,.72);
  --free-bg:   #123021;
  --free-fg:   #57d98a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #000000;
    --bg-soft:   #1c1c1e;
    --bg-softer: #232325;
    --surface:   #1c1c1e;
    --card:      #1c1c1e;
    --card-hover:#242426;
    --border:    #38383a;
    --border-2:  #2c2c2e;
    --text:      #f5f5f7;
    --text-soft: #aeaeb2;
    --text-mut:  #8e8e93;
    --chip-bg:   #2c2c2e;
    --chip-on:   #f5f5f7;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 6px 18px rgba(0,0,0,.4);
    --shadow-lg: 0 22px 52px rgba(0,0,0,.55);
    --img-bg:    #1c1c1e;
    --header-bg: rgba(0,0,0,.72);
    --free-bg:   #123021;
    --free-fg:   #57d98a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  padding-bottom: env(safe-area-inset-bottom);
}

h1,h2,h3,h4 { letter-spacing: -0.02em; line-height: 1.12; margin: 0; font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* --------------------------- Header --------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--border-2);
  padding-top: env(safe-area-inset-top);
}
/* Blur painted by a pseudo-element BEHIND the content so taps reach the tabs
   (iOS Safari can swallow taps on children of a backdrop-filter element). */
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.hdr > .wrap { position: relative; z-index: 1; }
/* The header row height is a variable because the sticky filter bar parks
   directly beneath it — the two used to carry the same 58px literal in two
   places, which is exactly the sort of pair that drifts. */
.hdr-in { display: flex; align-items: center; gap: 14px; height: var(--hdr-row); }
/* Never let the brand lockup flex-shrink: min-width:0 allowed the box to
   compress while the nowrap label kept its width, so the text silently ran out
   under the theme button instead of the layout admitting it did not fit. */
.hdr-logo { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.hdr-logo img { height: 88px; width: auto; display: block; }
.hdr-logo .rep {
  font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--text);
  padding-left: 20px; margin-left: 1px; border-left: 1px solid var(--border);
  white-space: nowrap;
}
.hdr-logo .rep b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 2x is the intent, but the lockup plus the theme button has to fit the row.
   These steps are the largest that clear the button at each width — measured,
   not guessed. */
@media (max-width: 560px) {
  :root { --hdr-row: 92px; }
  .hdr-logo { gap: 14px; }
  .hdr-logo img { height: 76px; }
  .hdr-logo .rep { font-size: 22px; padding-left: 16px; }
}
@media (max-width: 400px) {
  :root { --hdr-row: 88px; }
  .hdr-logo { gap: 12px; }
  .hdr-logo img { height: 72px; }
  .hdr-logo .rep { font-size: 20px; padding-left: 14px; }
}
/* 320px — the original SE and the narrowest phone still in the field. */
@media (max-width: 359px) {
  :root { --hdr-row: 78px; }
  .hdr-logo { gap: 10px; }
  .hdr-logo img { height: 62px; }
  .hdr-logo .rep { font-size: 17px; padding-left: 12px; }
}

.hdr-spacer { flex: 1; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--chip-bg); border: 1px solid var(--border-2); color: var(--text);
  transition: transform var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io);
}
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 19px; height: 19px; }
#installBtn {
  display: none; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 11px; font-weight: 600; font-size: 13.5px; color: #fff;
  background: var(--navy); border: none; white-space: nowrap;
}
#installBtn.show { display: inline-flex; }
#installBtn svg { width: 16px; height: 16px; }

/* Sub nav (tabs) */
.subnav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0 10px; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.tab {
  position: relative; z-index: 1;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text-soft); background: transparent; border: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 16px; height: 16px; opacity: .9; }
.tab:hover { color: var(--text); background: var(--bg-soft); }
.tab.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.tab.active svg { opacity: 1; }

/* --------------------------- Home --------------------------- */
main { min-height: 60vh; }
.home-hero { padding: 40px 0 8px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mut); margin-bottom: 14px;
}
.eyebrow::before { content:""; width: 22px; height: 3px; border-radius: 3px; background: var(--accent-grad); }
/* ---------------------------------------------------------------------------
   Motion
   One idea, applied everywhere: things that arrive rise into place. Same
   distance (--rise), same curve (--ease), same duration (--t-enter); only the
   delay changes, and it follows reading order. Nothing spins, blurs, sweeps or
   stretches — those read as separate unrelated effects rather than one page
   settling, which is exactly what made the old hero look arbitrary.
   --------------------------------------------------------------------------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}
/* Stagger utility: --i is the element's place in the sequence. */
.rise { animation: riseIn var(--t-enter) var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }

.hero-brand {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 26px;
}
.hero-logo {
  height: 64px; width: auto; display: block;
  animation: riseIn var(--t-enter) var(--ease) both;
}
.hero-kit {
  position: relative;
  font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mut); padding-left: 22px; border-left: none;
  animation: riseIn var(--t-enter) var(--ease) 70ms both;
}
/* The divider is a pseudo-element rather than a border so it can carry the
   brand gradient instead of a flat grey. It rides in with the label rather
   than performing a move of its own. */
.hero-kit::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 118%; border-radius: 2px;
  background: var(--accent-grad-v);
  transform: translateY(-50%);
}
@media (max-width: 520px) {
  .hero-logo { height: 52px; }
  .hero-kit { font-size: 13px; padding-left: 14px; }
  .hero-brand { gap: 14px; }
}
.home-hero h1 { font-size: clamp(28px, 6vw, 44px); font-weight: 700; }
.home-hero h1 .g { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { color: var(--text-soft); font-size: 17px; max-width: 640px; margin: 14px 0 0; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 26px 0 10px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 20px; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-io), box-shadow var(--t-base) var(--ease-io), border-color var(--t-base) var(--ease-io);
  overflow: hidden; text-align: left;
}
.tile::before {
  content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent-grad-v); opacity: 0; transition: opacity var(--t-base) var(--ease-io);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border); }
.tile:hover::before { opacity: 1; }
.tile-ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--bg-soft); color: var(--navy); border: 1px solid var(--border-2);
}
:root[data-theme="dark"] .tile-ic, :root.theme-dark .tile-ic { color: var(--blue); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tile-ic { color: var(--blue);} }
.tile-ic svg { width: 24px; height: 24px; }
.tile h3 { font-size: 20px; }
.tile p { margin: 0; color: var(--text-soft); font-size: 14.5px; }

.home-quick { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0 44px; }
.qlink {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px;
  border-radius: 12px; background: var(--card); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--text-soft); box-shadow: var(--shadow-sm);
}
.qlink svg { width: 16px; height: 16px; color: var(--blue); }
.qlink:hover { color: var(--text); border-color: var(--blue); }

/* --------------------------- Section --------------------------- */
.sec-head { padding: 30px 0 6px; }
.sec-head .back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mut); font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.sec-head .back svg { width: 15px; height: 15px; }
.sec-head h2 { font-size: clamp(24px, 5vw, 32px); }
.sec-head .lead { color: var(--text-soft); margin-top: 8px; font-size: 15.5px; max-width: 680px; }
.sec-accent { width: 30px; height: 4px; border-radius: 4px; background: var(--accent-grad); margin-top: 12px; }

/* Filter bar */
.filters { position: sticky; top: var(--hdr-h); z-index: 20; background: var(--bg); padding: 14px 0 8px; margin-top: 6px; }
.filters::after { content:""; display:block; height:1px; background: var(--border-2); margin-top: 12px; }
.search {
  display: flex; align-items: center; gap: 9px; padding: 0 13px; height: 42px;
  background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 12px; margin-bottom: 10px;
}
.search svg { width: 17px; height: 17px; color: var(--text-mut); flex: 0 0 auto; }
.search input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 15px; outline: none; min-width: 0; }
.search input::placeholder { color: var(--text-mut); }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Brand chips get the full row on narrow screens so every brand is reachable
   with one short swipe; the type select drops to its own line beneath. */
.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
         flex: 1 1 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 720px){ .chips { flex: 1 1 auto; } }
.chip {
  flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-soft); background: var(--chip-bg); border: 1px solid transparent; white-space: nowrap;
  transition: color var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
}
.chip:hover { color: var(--text); }
.chip.active { color: #fff; background: var(--navy); }
/* Horizontal chip scroller.
   The brand row and the issue-category row both hold more chips than fit, and
   a hidden scrollbar left no sign there was more to reach — and no way at all
   to reach it with a mouse. The scroller keeps the native touch swipe and adds
   a fade on whichever side has more content, plus arrow buttons on pointer
   devices. Both edge cues are class-driven so they only appear when that
   direction can actually scroll. */
.hscroll { position: relative; min-width: 0; flex: 1 1 100%; }
.catbar > .hscroll { flex: 1 1 auto; }
@media (min-width: 720px){ .filter-row > .hscroll { flex: 1 1 auto; } }

.hscroll::before, .hscroll::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity var(--t-base) var(--ease-io); z-index: 2;
}
.hscroll::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.hscroll::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.hscroll.can-l::before, .hscroll.can-r::after { opacity: 1; }

.hs-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 999px; display: none;
  align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--bg); color: var(--text-soft);
  box-shadow: 0 1px 4px rgba(0,0,0,.10); font-family: inherit;
}
.hs-btn svg { width: 15px; height: 15px; }
.hs-btn:hover { color: var(--text); }
.hs-btn.l { left: 2px; }
.hs-btn.r { right: 2px; }
/* Arrows are for a mouse. Touch devices swipe, and the fades tell them where. */
@media (hover: hover) and (pointer: fine) {
  .hscroll.can-l > .hs-btn.l, .hscroll.can-r > .hs-btn.r { display: flex; }
}
.hscroll.dragging { cursor: grabbing; }
.hscroll.dragging .chip, .hscroll.dragging .cchip { pointer-events: none; }

.selectwrap { position: relative; flex: 0 0 auto; }
.selectwrap select {
  appearance: none; -webkit-appearance: none; font-family: inherit;
  padding: 8px 30px 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--chip-bg); border: 1px solid var(--border-2); outline: none;
}
.selectwrap::after { content:"⌄"; position: absolute; right: 12px; top: 46%; transform: translateY(-50%); color: var(--text-mut); pointer-events: none; font-size: 14px; }

.count { color: var(--text-mut); font-size: 13px; padding: 12px 0 4px; }

/* Equipment grid
   ---------------------------------------------------------------------------
   Every card is exactly --card-h tall. That is the whole fix for the scroll
   chaos: content-visibility skips layout for off-screen cards and substitutes
   contain-intrinsic-size for their height, so any gap between the guess and the
   truth is added to (or taken off) the page as you scroll past. The guess was a
   flat 420px against real cards of 290-397px, which collapsed the document by
   ~3,500px mid-scroll and threw the viewport around. Fixing the height makes
   the reserved size exact, so the page length never changes and the scroll
   position stays where the user put it. It also gives the grid an even baseline
   across every row, which is what the card layout wanted anyway. */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 6px 0 60px;

  /* Card geometry. --card-h is derived from these, never typed as a literal,
     so a change to any one of them keeps the reserved size honest. */
  --c-img:    190px;   /* image frame */
  --c-pad-t:  14px;
  --c-pad-b:  16px;
  --c-type:   15px;    /* category line, always 1 line */
  --c-name:   20px;    /* title line-height */
  --c-name-n: 2;       /* title lines reserved — measured to fit every title */
  --c-tag:    19px;    /* tagline line-height */
  --c-tag-n:  2;       /* tagline lines reserved */
  --c-foot:   30px;
  --c-gap:    6px;
  --c-foot-t: 12px;
  --card-h: calc(
    var(--c-img) + 1px                                    /* frame + divider */
    + var(--c-pad-t) + var(--c-type) + var(--c-gap)
    + (var(--c-name-n) * var(--c-name)) + var(--c-gap)
    + (var(--c-tag-n) * var(--c-tag))
    + var(--c-foot-t) + var(--c-foot) + var(--c-pad-b)
    + 2px                                                 /* card border */
  );
}
.card {
  height: var(--card-h);
  /* The grid renders every matching device at once. content-visibility lets the
     browser skip layout and paint for the cards below the fold, which is what
     keeps a 67-card tab snappy on a phone. The intrinsic size is now the exact
     card height, so nothing shifts as cards come into view. */
  content-visibility: auto;
  contain-intrinsic-size: var(--card-h);
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-io), box-shadow var(--t-base) var(--ease-io),
              border-color var(--t-base) var(--ease-io);
  text-align: left;
  /* The card is a <button>. iOS Safari paints button text in its system blue
     unless a colour is set, which is what turned every card title blue in the
     installed PWA while Chromium resolved it to black. Set it explicitly. */
  color: var(--text);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card:active { transform: translateY(-1px); transition-duration: var(--t-fast); }
/* Fixed-height frame + absolutely positioned image. Percentage max-height on a
   grid child of an aspect-ratio box doesn't constrain in iOS Safari, which let
   tall product shots render full-size and spill over the card text. */
.card-img {
  position: relative; height: var(--c-img); flex: 0 0 var(--c-img); background: #ffffff;
  padding: 16px; border-bottom: 1px solid var(--border-2); overflow: hidden;
}
.card-img img {
  position: absolute; top: 16px; right: 16px; bottom: 16px; left: 16px;
  width: auto; height: auto; max-width: calc(100% - 32px); max-height: calc(100% - 32px);
  margin: auto; object-fit: contain;
}
.card-badge {
  position: absolute; z-index: 2; top: 10px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; background: var(--free-bg); color: var(--free-fg);
}
/* Each text slot occupies a fixed number of lines whether or not it fills them,
   so a one-word title and a three-line one produce the same card. clamp is what
   keeps the long ones from pushing the foot out of the box. */
.card-body {
  padding: var(--c-pad-t) 15px var(--c-pad-b);
  display: flex; flex-direction: column; gap: var(--c-gap); flex: 1; min-height: 0;
}
.card-body h3 { font-size: 16.5px; }
.card-type {
  height: var(--c-type); line-height: var(--c-type);
  font-size: 12px; color: var(--text-mut); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Card title: brand in blue, the specific model in black on the same line, so
   the model is named once rather than repeated under a MODEL label. */
.card-name {
  color: var(--text); overflow-wrap: anywhere;
  height: calc(var(--c-name-n) * var(--c-name)); line-height: var(--c-name);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--c-name-n); overflow: hidden;
}
.cn-brand { color: var(--blue); }
/* The generic category cards carry a compatibility list rather than a model
   name. It belongs on the detail sheet, not the grid card — on the card it is a
   variable-length run of slashes and middots that used to be the single biggest
   source of uneven card heights. The tagline says the same thing in a sentence. */
.card-model { display: none; }
.dv-model {
  display: block; max-width: 100%; margin-top: 5px;
  font-size: 12.5px; line-height: 1.35; font-weight: 590; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--text); white-space: normal; overflow-wrap: anywhere;
}
.dv-model b {
  display: block; font-weight: 600; font-size: 10px; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mut);
  margin: 0 0 1px;
}
.card-tag {
  font-size: 13.5px; color: var(--text-soft);
  height: calc(var(--c-tag-n) * var(--c-tag)); line-height: var(--c-tag);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--c-tag-n); overflow: hidden;
}
.card-foot {
  margin-top: auto; padding-top: var(--c-foot-t); height: var(--c-foot); box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-price { font-size: 13px; color: var(--text-soft); font-weight: 600; }
.card-price b { color: var(--text); font-weight: 700; }
.card-price.free b { color: var(--free-fg); }
.card-arrow { color: var(--blue); display: inline-flex; }
.card-arrow svg { width: 18px; height: 18px; }

.empty { padding: 60px 20px; text-align: center; color: var(--text-mut); }

/* --------------------------- Detail overlay --------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0,0,0,.34); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  overscroll-behavior: contain;
}
/* The detail view had no entrance at all — it simply existed on the next frame,
   which is the one place on the page where a transition genuinely carries
   meaning (this came from that card). The scrim fades and the sheet rises the
   same --rise the rest of the page uses, so it belongs to the same system. */
.overlay.open { display: block; animation: scrimIn var(--t-base) var(--ease-io) both; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(920px, calc(100% - 28px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg);
  -webkit-overflow-scrolling: touch;
  animation: sheetIn var(--t-enter) var(--ease) both;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + var(--rise))); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.sheet-head {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: transparent;
  border-bottom: 1px solid var(--border-2);
}
.sheet-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--header-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.sheet-head > * { position: relative; z-index: 1; }
.sheet-head .st { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut); }
.sheet-head .close { margin-left: auto; }
.sheet-body { padding: 4px 22px 26px; }
@media (max-width: 560px) {
  .sheet {
    width: 100%; height: 100dvh; max-height: none; top: 0; left: 0; transform: none; border-radius: 0;
    animation: sheetInFull var(--t-enter) var(--ease) both;
  }
  @keyframes sheetInFull {
    from { opacity: 0; transform: translateY(calc(var(--rise) * 2)); }
    to   { opacity: 1; transform: none; }
  }
}

.dv-hero { display: grid; grid-template-columns: 280px 1fr; gap: 26px; padding: 22px 0 8px; align-items: center; }
.dv-img { position: relative; background: #ffffff; border: 1px solid var(--border-2); border-radius: 16px; height: 280px; padding: 20px; overflow: hidden; }
.dv-img img {
  position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px;
  width: auto; height: auto; max-width: calc(100% - 40px); max-height: calc(100% - 40px);
  margin: auto; object-fit: contain;
}
.dv-meta .brandline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-mut); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.dv-meta h2 { font-size: 26px; }
.dv-name { color: var(--text); overflow-wrap: anywhere; }
.dv-model {
  display: block; margin-top: 9px;
  font-size: 15px; line-height: 1.35; font-weight: 590; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--text);
}
.dv-model b { font-size: 10.5px; margin-bottom: 2px; }
.dv-meta .tag { color: var(--text-soft); font-size: 15px; margin-top: 8px; }
.dv-meta .accent { width: 30px; height: 4px; border-radius: 4px; background: var(--accent-grad); margin: 14px 0 0; }

.dv-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border-2); color: var(--text-soft); }
.pill svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pill.free { background: var(--free-bg); color: var(--free-fg); border-color: transparent; }

.dv-section { padding: 20px 0 4px; }
.dv-section h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut); display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.dv-section h4::before { content:""; width: 16px; height: 3px; border-radius: 3px; background: var(--accent-grad); }

.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.benefits li { display: flex; gap: 11px; font-size: 15px; color: var(--text); }
.benefits li svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; color: var(--green); }
.overview { color: var(--text-soft); font-size: 15px; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden; }
.specs .sp { background: var(--card); padding: 12px 14px; }
.specs .sp .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mut); font-weight: 700; }
.specs .sp .v { font-size: 14px; color: var(--text); margin-top: 3px; }

/* Pricing block */
.pricebox { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pb { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; box-shadow: var(--shadow-sm); }
.pb .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mut); font-weight: 700; }
.pb .v { font-size: 21px; font-weight: 700; margin-top: 4px; }
.pb .v small { font-size: 13px; font-weight: 600; color: var(--text-mut); }
.pb.freecard { background: var(--free-bg); border-color: transparent; }
.pb.freecard .v { color: var(--free-fg); font-size: 16px; }
.price-note { color: var(--text-mut); font-size: 12.5px; margin-top: 12px; line-height: 1.5; }

/* Financing calculator */
.finance { background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 16px; padding: 18px; }
.fin-pick { margin-bottom: 16px; }
/* Clearly tappable: 2px accent outline + chevron affordance on the right. */
.finance .fin-pick select,
.modal-body .fin-pick select {
  width: 100%; font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--text);
  background-color: var(--card); border: 2px solid var(--blue); border-radius: 12px;
  padding: 13px 46px 13px 14px; outline: none; appearance: none; -webkit-appearance: none;
  cursor: pointer; box-shadow: 0 0 0 4px rgba(26,155,215,.10);
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%),
                    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 24px) calc(50% + 1px), calc(100% - 18px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  transition: box-shadow var(--t-base) var(--ease-io), border-color var(--t-base) var(--ease-io);
}
.finance .fin-pick select:hover,
.modal-body .fin-pick select:hover { box-shadow: 0 0 0 5px rgba(26,155,215,.16); }
.finance .fin-pick select:focus,
.modal-body .fin-pick select:focus { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(26,155,215,.24); }
.finance .fin-pick > span,
.modal-body .fin-pick > span { color: var(--blue); }
.term-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.term {
  flex: 1 1 auto; min-width: 62px; text-align: center; padding: 9px 6px; border-radius: 11px; font-weight: 700; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-soft); transition: color var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
}
.term small { display: block; font-size: 10px; font-weight: 600; color: var(--text-mut); text-transform: uppercase; letter-spacing: .03em; }
.term.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.term.active small { color: rgba(255,255,255,.75); }
.finance-out { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.finance-out .big { font-size: 34px; font-weight: 700; }
.finance-out .big .g { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.finance-out .sub { color: var(--text-soft); font-size: 14px; }
.finance-note { color: var(--text-mut); font-size: 12px; margin-top: 12px; }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0 2px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px;
  font-weight: 600; font-size: 14.5px; border: 1px solid var(--border); background: var(--card); color: var(--text);
  transition: transform var(--t-fast) var(--ease-io), box-shadow var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io);
  box-shadow: var(--shadow-sm);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.accent { background: var(--accent-grad); color: #fff; border: none; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.call { background: var(--green); color:#fff; border-color: var(--green); }

/* Install steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; font-size: 15px; color: var(--text); }
.steps li::before {
  counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--navy);
}
.tips { list-style: none; margin: 14px 0 0; padding: 14px 16px; background: var(--bg-soft); border-radius: 13px; display: grid; gap: 9px; border: 1px solid var(--border-2); }
.tips li { display: flex; gap: 10px; font-size: 14px; color: var(--text-soft); }
.tips li svg { width: 17px; height: 17px; color: var(--blue); flex: 0 0 auto; margin-top: 1px; }

/* Support stack (WP first, manufacturer under) */
.support-stack { display: grid; gap: 10px; }
.support-stack .support .si { background: var(--bg-soft); color: var(--blue); }
.support-stack .support:first-child .si { background: var(--free-bg); color: var(--free-fg); }

/* Modal (PDF builder) */
.modal { position: fixed; inset: 0; z-index: 150; display: none; background: rgba(0,0,0,.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal.open { display: block; }
.modal-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(460px, calc(100% - 28px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg);
}
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; }
.modal-head h3 { font-size: 18px; flex: 1; }
.modal-body { padding: 4px 18px 8px; }
.modal-lead { color: var(--text-soft); font-size: 13.5px; margin: 0 0 14px; }
.fld { display: block; margin-bottom: 12px; }
.fld span { display: block; font-size: 12px; font-weight: 700; color: var(--text-mut); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.fld input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 12px; padding: 11px 13px; outline: none;
}
.fld input:focus { border-color: var(--blue); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 18px 18px; }

/* Equipment quote builder */
.quote-card { width: min(560px, calc(100% - 28px)); }
.fld select {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 12px;
  padding: 11px 13px; outline: none; appearance: none; -webkit-appearance: none;
}
.q-list { display: grid; gap: 8px; margin: 4px 0 16px; }
.q-empty { color: var(--text-mut); font-size: 13.5px; padding: 14px; text-align: center; background: var(--bg-soft); border-radius: 12px; }
.q-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 12px; }
.q-row img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 8px; flex: 0 0 auto; }
.q-nm { flex: 1; min-width: 0; }
.q-nm .n { font-weight: 600; font-size: 14px; }
.q-nm .s { font-size: 12px; color: var(--text-mut); }
.q-qty { display: flex; align-items: center; gap: 8px; }
.q-qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }
.qb { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1; }
.q-del { background: none; border: none; color: var(--text-mut); padding: 4px; display: inline-flex; }
.q-del svg { width: 17px; height: 17px; }
.q-del:hover { color: #d64545; }
.k-lbl { font-size: 12px; font-weight: 700; color: var(--text-mut); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.q-terms { margin-bottom: 14px; }
/* Processing Volume discount — a $/% segmented toggle beside a number field.
   The toggle reuses the .term pill language so the quote sheet reads as one
   control set rather than two. */
.q-disc { margin-bottom: 14px; }
.disc-row { display: flex; align-items: stretch; gap: 8px; }
.disc-kind { display: flex; gap: 4px; flex: 0 0 auto; }
.dk {
  width: 44px; border-radius: 11px; font-weight: 700; font-size: 15px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-soft);
  transition: color var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
}
.dk.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.disc-row input {
  flex: 1 1 auto; min-width: 0; padding: 11px 13px; border-radius: 11px; font-size: 15px; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.disc-row input:focus { border-color: var(--blue); outline: none; }
.disc-hint { font-size: 12px; color: var(--text-mut); margin-top: 6px; min-height: 15px; }
/* #b26a00 carries contrast on white but goes muddy on the dark panel, so the
   warning brightens there — same treatment as the green discount line. */
.disc-hint.warn { color: #b26a00; font-weight: 600; }
:root[data-theme="dark"] .disc-hint.warn,
:root.theme-dark .disc-hint.warn { color: #f0a63a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .disc-hint.warn { color: #f0a63a; }
}
/* The discount reads as a saving, so it is green rather than body colour.
   --green-d carries the contrast on white; on the dark panel it goes muddy,
   so the brighter --green takes over there. */
.q-sum .disc span, .q-sum .disc b { color: var(--green-d, #1f9a4c); }
:root[data-theme="dark"] .q-sum .disc span,
:root[data-theme="dark"] .q-sum .disc b,
:root.theme-dark .q-sum .disc span,
:root.theme-dark .q-sum .disc b { color: var(--green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .q-sum .disc span,
  :root:not([data-theme="light"]) .q-sum .disc b { color: var(--green); }
}
.q-sum { background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 16px; }
.q-sum > div { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; color: var(--text-soft); }
.q-sum b { color: var(--text); font-weight: 700; }
.q-sum .big { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-2); }
.q-sum .big b { font-size: 26px; }
.q-sum .big .g { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* A quoted-per-location item stays visible in the basket but is greyed out
   and left out of the total for the selected payment mode. */
.q-row.q-na { opacity: .62; }
.q-row.q-na .q-nm .s { color: var(--text-soft); font-weight: 600; }
.q-note { margin-top: 9px; font-size: 12.5px; color: var(--text-mut); line-height: 1.45; }

/* Benefit overview → per-industry bullet list, picked with an iOS-style
   segmented control rather than a dropdown: three options, always visible,
   one tap to switch, with a thumb that slides between them. */
.ind-wrap { margin-top: 20px; padding-top: 4px; }
.ind-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase;
  color: var(--text-mut);
}
.ind-head svg { width: 15px; height: 15px; color: var(--blue); flex: 0 0 auto; }
.seg {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 3px; border-radius: 12px;
  background: var(--bg-softer); border: 1px solid var(--border-2);
  margin-bottom: 16px; isolation: isolate;
}
.seg-thumb {
  position: absolute; z-index: 0; top: 3px; left: 3px;
  width: calc((100% - 6px) / 3); height: calc(100% - 6px);
  border-radius: 9px; background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.04);
  transition: transform var(--t-enter) cubic-bezier(.32,.72,0,1);
}
:root[data-theme="dark"] .seg-thumb,
:root.theme-dark .seg-thumb { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg-thumb { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
}
.seg-btn {
  position: relative; z-index: 1; appearance: none; border: 0; background: none;
  padding: 8px 4px; border-radius: 9px; font-family: inherit; font-size: 13.5px;
  font-weight: 590; letter-spacing: -.01em; color: var(--text-soft);
  transition: color var(--t-base) var(--ease-io); -webkit-tap-highlight-color: transparent;
}
.seg-btn.on { color: var(--text); }
.seg-btn:not(.on):hover { color: var(--text); }
.ind-list { margin: 0; }

/* Category filter on the Installation and Troubleshooting sheets. A leading
   filter glyph and a scrollable chip row — the iOS pattern for "more options
   than a segmented control can hold". Counts sit inside each chip. */
.catbar { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.catbar-lead { flex: 0 0 auto; display: flex; align-items: center; color: var(--blue); }
.catbar-lead svg { width: 16px; height: 16px; }
.cchips {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; min-width: 0; flex: 1;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cchips::-webkit-scrollbar { display: none; }
.cchip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--chip-bg); color: var(--text-soft);
  font-family: inherit; font-size: 12.5px; font-weight: 590; letter-spacing: -.01em;
  white-space: nowrap; transition: background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
  -webkit-tap-highlight-color: transparent;
}
.cchip i {
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 999px;
  background: var(--bg); color: var(--text-mut);
  font-variant-numeric: tabular-nums;
}
.cchip:hover { color: var(--text); }
.cchip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cchip.on i { background: rgba(255,255,255,.18); color: #fff; }
.cat-empty {
  color: var(--text-mut); font-size: 13.5px; padding: 14px;
  text-align: center; background: var(--bg-soft); border-radius: 12px;
}
.steps li[hidden], .accordion details[hidden] { display: none; }
.ind-empty { color: var(--text-mut); font-size: 13.5px; padding: 12px 14px; background: var(--bg-soft); border-radius: 12px; }
#indOut { animation: riseIn var(--t-base) var(--ease) both; }
button.qlink { font-family: inherit; cursor: pointer; }

/* Setup video embed */
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--border-2); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vtab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--text-soft); background: var(--chip-bg); border: 1px solid transparent; transition: color var(--t-fast) var(--ease-io), background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io); }
.vtab svg { width: 15px; height: 15px; }
.vtab:hover { color: var(--text); }
.vtab.active { color: #fff; background: var(--navy); }

/* Support call card */
.support {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.support .si { width: 42px; height: 42px; border-radius: 12px; background: var(--free-bg); color: var(--free-fg); display: grid; place-items: center; flex: 0 0 auto; }
.support .si svg { width: 21px; height: 21px; }
.support .st { flex: 1; min-width: 160px; }
.support .st .n { font-weight: 700; font-size: 15px; }
.support .st .p { color: var(--text-soft); font-size: 13.5px; }
.support .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Troubleshooting accordion */
.accordion { display: grid; gap: 10px; }
.acc {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm);
}
.acc summary {
  list-style: none; cursor: pointer; padding: 15px 16px; display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 15px; color: var(--text);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .q { flex: 1; }
.acc summary .qi { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-soft); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; }
.acc summary .chev { color: var(--text-mut); transition: transform var(--t-base) var(--ease-io); }
.acc[open] summary .chev { transform: rotate(180deg); }
.acc .a { padding: 0 16px 16px 54px; color: var(--text-soft); font-size: 14.5px; }

/* Free placement card */
.info-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }
.info-card h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut); margin-bottom: 12px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable td { padding: 9px 4px; border-bottom: 1px solid var(--border-2); color: var(--text); }
.ptable td:last-child { text-align: right; color: var(--text-soft); }
.ptable tr:last-child td { border-bottom: none; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.notes { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.notes li { display: flex; gap: 9px; color: var(--text-mut); font-size: 12.5px; }
.notes li::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex: 0 0 auto; }

/* Footer */
.foot { border-top: 1px solid var(--border-2); padding: 26px 0 40px; color: var(--text-mut); font-size: 13px; text-align: center; }
.foot .logo { height: 29px; opacity: .8; margin-bottom: 10px; }
.foot a { color: var(--blue); font-weight: 600; }

/* Responsive */
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .dv-hero { grid-template-columns: 1fr; }
  .dv-img { max-width: 260px; }
  .pricebox { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* Two-up on phones: frames stay near-square so product shots fill them,
     and the agent can scan more devices per screen. Only the geometry variables
     change — --card-h and contain-intrinsic-size follow from them. */
  .grid {
    grid-template-columns: repeat(2, 1fr); gap: 12px;
    --c-img: 150px; --c-pad-t: 12px; --c-pad-b: 14px;
    /* A two-up card is ~150px of text width, so titles and taglines that fit on
       two lines at desk width take three here. Measured, not guessed: three
       lines covers every tagline and all but nine of 246 titles, and those nine
       ellipsis on the card and read in full on the detail sheet. */
    --c-name: 18px; --c-name-n: 3;
    --c-tag: 17px;  --c-tag-n: 3;
  }
  .wrap { padding: 0 16px; }
  .card-img { padding: 12px; }
  .card-img img { top: 12px; right: 12px; bottom: 12px; left: 12px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); }
  .card-body { padding: var(--c-pad-t) 12px var(--c-pad-b); }
  .card-body h3 { font-size: 15px; }
  .card-tag { font-size: 12.5px; }
  .card-price { font-size: 12px; }
  .card-badge { font-size: 10px; padding: 3px 7px; top: 8px; left: 8px; }
}
/* 320-359px — the original SE and the narrowest phones. Two-up leaves ~120px of
   text width, where a five-line title is normal and nothing reads. One column
   gives back the width; at this size a taller card costs nothing because only
   two fit on screen either way. */
@media (max-width: 359px) {
  .grid {
    grid-template-columns: 1fr;
    --c-img: 170px; --c-name-n: 2; --c-tag-n: 2;
  }
}

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
  z-index: 200; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   PRINT / GENERATED PDF  (branded merchant one-pager)
   Only #print-root is shown when printing.
   ===================================================================== */
#print-root { display: none; }

@media print {
  @page { size: Letter; margin: 0; }
  body { background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
}

/* On-screen preview of the print sheet uses same class names */
.pdoc {
  width: 8.5in; min-height: 11in; margin: 0 auto; background: #fff; color: #12233f;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; position: relative;
  padding: 0.7in 0.75in 0.9in; letter-spacing: -0.01em;
}
.pdoc .p-topbar { height: 6px; background: linear-gradient(90deg,#1a9bd7,#29b45b); border-radius: 4px; margin-bottom: 26px; }
.pdoc .p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pdoc .p-logo { height: 40px; }
.pdoc .p-kicker { text-align: right; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a97a8; font-weight: 700; padding-top: 6px; }
.pdoc h1 { font-size: 30px; color: #10254f; margin: 26px 0 0; letter-spacing: -0.02em; }
.pdoc .p-tag { color: #5b6b80; font-size: 14px; margin-top: 6px; }
.pdoc .p-rule { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.pdoc .p-rule::before { content:""; width: 40px; height: 4px; border-radius: 4px; background: linear-gradient(90deg,#1a9bd7,#29b45b); }
.pdoc .p-rule .brand { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #29b45b; }
.pdoc .p-body { display: grid; grid-template-columns: 2.15fr 1fr; gap: 26px; align-items: start; }
.pdoc .p-imgwrap { background: #f6f8fb; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; display: grid; place-items: center; aspect-ratio: 1/1; }
.pdoc .p-imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdoc h2.p-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #10254f; margin: 4px 0 12px; }
.pdoc .p-benes { list-style: none; margin: 0 0 18px; padding: 0; }
.pdoc .p-benes li { display: flex; gap: 10px; font-size: 13.5px; color: #23364f; margin-bottom: 10px; line-height: 1.4; }
.pdoc .p-benes li .dot { width: 16px; height: 16px; border-radius: 50%; background: #e9f7ee; color: #1f9a4c; display: inline-grid; place-items: center; flex: 0 0 auto; margin-top: 1px; font-size: 11px; font-weight: 800; }
.pdoc .p-over { font-size: 13px; color: #5b6b80; line-height: 1.55; background: #f7f9fc; border-left: 3px solid #1a9bd7; padding: 12px 14px; border-radius: 0 10px 10px 0; }
.pdoc .p-side .p-card { border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.pdoc .p-side .p-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #8a97a8; font-weight: 700; }
.pdoc .p-side .p-card .val { font-size: 16px; font-weight: 700; color: #10254f; margin-top: 3px; }
.pdoc .p-side .p-card .val small { font-size: 12px; color: #8a97a8; font-weight: 600; }
.pdoc .p-side .p-free { background: #e9f7ee; border: none; }
.pdoc .p-side .p-free .val { color: #1f7d43; font-size: 13px; }
.pdoc .p-specs { list-style: none; margin: 10px 0 0; padding: 0; }
.pdoc .p-specs li { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 6px 0; border-bottom: 1px solid #f0f3f7; }
.pdoc .p-specs li .k { color: #8a97a8; font-weight: 600; }
.pdoc .p-specs li .v { color: #23364f; text-align: right; }
.pdoc .p-contact { margin-top: 26px; border-top: 1px solid #eef2f7; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.pdoc .p-field { font-size: 12px; color: #23364f; display: flex; align-items: flex-end; gap: 8px; }
.pdoc .p-field .fl { color: #5b6b80; font-weight: 600; white-space: nowrap; }
.pdoc .p-field .line { flex: 1; border-bottom: 1px solid #c7d0dc; height: 15px; }
.pdoc .p-foot { position: absolute; left: 0.75in; right: 0.75in; bottom: 0.5in; display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; color: #a3aebd; border-top: 1px solid #eef2f7; padding-top: 10px; }
.pdoc .p-foot img { height: 15px; opacity: .7; }
.pdoc .p-disc { font-size: 8.5px; color: #b3bcc9; margin-top: 14px; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   Reduced motion
   One switch for the whole system rather than a per-effect opt-out scattered
   through the file. Entrances resolve instantly at their final position;
   pointer feedback stays, because a colour change is not motion.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --rise: 0px; }
  .rise, .hero-logo, .hero-kit, .sheet, .overlay.open, #indOut {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
  }
  .card:hover, .tile:hover { transform: none; }
  .seg-thumb { transition: none; }
}