/* Alternatives pages: built on the site's ppl-* system, extended. Brand palette from brand-data.ts. */
.ppl-root{font-family:'Inter','Inter Fallback',sans-serif;color:#111827;
 --pp-grad:linear-gradient(90deg,#a956ff 0%,#7c5dff 50%,#3766fe 100%);
 --violet:#a956ff;--purple:#7c5dff;--blue:#3766fe;--azure:#1877f2;--cyan:#3DC9F4;
 --teal:#00bdc5;--rubine:#ee2b62;--corn:#698fff;--deep:#7f00be;--tolopea:#220646;
 --ink:#111827;--muted:#6B7280;--line:#e9e7f3;--soft:#f8f7fd}
.ppl-root p,.ppl-root li{text-wrap:pretty}
.ppl-wrap{max-width:1150px;width:100%;margin:0 auto;padding:0 24px;box-sizing:border-box}
.ppl-narrow{max-width:820px}
.ppl-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--pp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px}
.ppl-grad{background:var(--pp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.ppl-sec{padding:76px 0}
.ppl-sec-alt{background:#fafafa;border-top:1px solid #f1f1f4;border-bottom:1px solid #f1f1f4}
.ppl-sec-dark{background:radial-gradient(120% 90% at 12% 0%,#3b1a7d 0%,#1d0c45 45%,#120730 100%);color:#fff}
.ppl-sec-dark h2,.ppl-sec-dark h3{color:#fff}.ppl-sec-dark p{color:rgba(255,255,255,.78)}
.ppl-kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6b48ff;margin-bottom:14px}
.ppl-sec-dark .ppl-kicker{color:var(--cyan)}
.ppl-sec h2{font-size:clamp(27px,3.1vw,40px);font-weight:400;line-height:1.14;letter-spacing:-.9px;margin:0 0 16px}
.ppl-sec h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.ppl-sec p{font-size:16px;font-weight:300;line-height:1.7;color:#4B5563;margin:0 0 16px}
.ppl-sec-dark p{color:rgba(255,255,255,.76)}
.ppl-lead{font-size:18px;font-weight:300;color:#4B5563;line-height:1.65;max-width:740px;margin:0 0 32px}
.ppl-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:50px;font-size:15px;font-weight:500;text-decoration:none;transition:all .25s;border:none;cursor:pointer;white-space:nowrap;font-family:inherit}
.ppl-btn-primary{background:var(--pp-grad);color:#fff;box-shadow:0 10px 24px rgba(124,93,255,.28)}
.ppl-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,93,255,.38);color:#fff}
.ppl-btn-secondary{background:#fff;color:#111827;border:1.5px solid #e5e7eb}
.ppl-btn-secondary:hover{border-color:#c4b5fd;color:#6b48ff}
.ppl-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* ── hero ─────────────────────────────────────────────── */
.alt-hero{position:relative;overflow:hidden;padding:64px 0 0;background:linear-gradient(180deg,#fff 0%,#faf9ff 58%,#f4f1ff 100%)}
.alt-hero::before{content:'';position:absolute;top:-240px;left:-10%;width:900px;height:620px;background:radial-gradient(ellipse,rgba(124,93,255,.16),transparent 65%);filter:blur(30px);pointer-events:none}
.alt-hero::after{content:'';position:absolute;top:-120px;right:-14%;width:760px;height:560px;background:radial-gradient(ellipse,rgba(0,189,197,.14),transparent 65%);filter:blur(30px);pointer-events:none}
.alt-hero .ppl-wrap{position:relative}
.alt-hgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:48px;align-items:center;padding-bottom:56px}
.alt-hero h1{font-size:clamp(34px,4.3vw,54px);font-weight:400;line-height:1.06;letter-spacing:-1.5px;margin:0 0 20px}
.vs-chips{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.vs-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:50px;padding:7px 16px 7px 8px;font-size:14px;font-weight:500;box-shadow:0 4px 14px rgba(34,6,70,.06)}
.vs-chip img{height:20px;display:block}
.vs-chip .mono{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em}
.vs-x{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
/* device composition */
.alt-stage{position:relative;min-height:440px}
.alt-stage .browser{position:relative;width:122%;transform:perspective(1600px) rotateY(-8deg) rotateX(2deg) translateZ(0);transition:transform .6s}
.alt-stage .browser img{display:block;width:100%;height:auto}
.alt-stage:hover .browser{transform:perspective(1600px) rotateY(-5deg) rotateX(1deg)}
.alt-stage .phone{position:absolute;right:-8%;bottom:-16%;width:27%;animation:floaty 7s ease-in-out infinite}
.alt-stage .phone img{display:block;width:100%;height:auto}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* budget card */
.budget-card{position:absolute;left:-7%;bottom:12%;width:66%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 22px 46px rgba(34,6,70,.18);animation:floaty 8s ease-in-out .6s infinite}
.budget-card .t{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.budget-card .t b{color:var(--ink);font-size:13.5px;font-weight:600}
.budget-card .bar{height:9px;border-radius:6px;background:#eeecf7;overflow:hidden;display:flex}
.budget-card .bar i{display:block;height:100%;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.budget-card .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--muted)}
.budget-card .legend span{display:flex;align-items:center;gap:6px}
.budget-card .legend i{width:9px;height:9px;border-radius:3px}
.pill-ok{display:inline-flex;align-items:center;gap:6px;background:rgba(0,189,197,.12);color:#067a80;border-radius:50px;padding:4px 11px;font-size:11.5px;font-weight:600}
.pill-ok::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal)}
/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.trust div{padding:26px 22px;text-align:center;border-right:1px solid var(--line)}
.trust div:last-child{border-right:0}
.trust .n{font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;background:var(--pp-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust .l{font-size:13px;color:var(--muted);margin-top:6px;font-weight:300}
/* answer box */
.answer{background:linear-gradient(135deg,#f7f2ff,#eef3ff);border:1px solid #e3d9ff;border-radius:22px;padding:30px 32px}
.answer ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.answer li{display:flex;gap:12px;font-size:16px;line-height:1.6;color:#374151;font-weight:300}
.answer li b{font-weight:600;color:var(--ink)}
.ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:2px}
.ic.yes{background:rgba(0,189,197,.14)}
.ic.no{background:rgba(238,43,98,.12)}
/* A question, not a failure: the 'Ask every vendor this' bullets are prompts for the
   buyer to use, and the red cross made them read as four things that are broken. */
.ic.ask{background:rgba(244,165,36,.16)}

.ic svg{width:13px;height:13px}
/* comparison table */
.cmp-pickers{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.pick{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--line);background:#fff;border-radius:50px;padding:8px 16px 8px 9px;font-size:14px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s;font-family:inherit}
.pick .mono{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff}
.pick:hover{border-color:#c4b5fd;transform:translateY(-1px)}
.pick.on{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--pp-grad) border-box;box-shadow:0 8px 20px rgba(124,93,255,.18);color:var(--ink)}
.pick.on::after{content:'✓';color:#6b48ff;font-weight:700;font-size:13px}
.pick.full{opacity:.45;cursor:not-allowed}
.cmp-scroll{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 18px 44px rgba(34,6,70,.07)}
table.cmp2{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
table.cmp2 th,table.cmp2 td{padding:15px 18px;text-align:left;border-bottom:1px solid #f1eff8;vertical-align:middle}
table.cmp2 thead th{position:sticky;top:0;background:#fff;z-index:2;border-bottom:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink)}
table.cmp2 thead th.us{background:linear-gradient(135deg,rgba(169,86,255,.1),rgba(55,102,254,.1))}
table.cmp2 thead th .hd{display:flex;align-items:center;gap:9px}
table.cmp2 thead th .mono{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
table.cmp2 thead th img{height:19px}
table.cmp2 tbody tr:hover td{background:#fbfaff}
table.cmp2 td.feat{font-weight:500;color:var(--ink);width:30%}
table.cmp2 td.feat span{display:block;font-weight:300;font-size:12.5px;color:var(--muted);margin-top:3px}
table.cmp2 td.us{background:rgba(124,93,255,.05)}
table.cmp2 tbody tr:last-child td{border-bottom:0}
.mk{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#374151;font-weight:300}
.mk .b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.mk.y .b{background:rgba(0,189,197,.14)}.mk.n .b{background:rgba(238,43,98,.12)}.mk.p .b{background:rgba(244,165,36,.16)}
.mk svg{width:13px;height:13px}
.cmp-note{font-size:13px;color:var(--muted);font-weight:300;margin-top:14px}
/* win cards */
.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.wcard{border-radius:22px;padding:28px 30px;border:1px solid var(--line);background:#fff;position:relative;overflow:hidden}
.wcard::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--c,var(--pp-grad))}
.wcard h3{font-size:20px;margin-bottom:16px}
.wcard ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.wcard li{display:flex;gap:12px;font-size:15.5px;line-height:1.55;color:#4B5563;font-weight:300}
/* legacy vs modern */
.vs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
.vs2 .col{border-radius:22px;padding:26px 28px}
.vs2 .old{background:#fff;border:1px solid var(--line)}
.vs2 .new{background:linear-gradient(150deg,#241059,#150a38);color:#fff;border:1px solid rgba(255,255,255,.08)}
.vs2 .col h3{font-size:18px;margin-bottom:14px}
.vs2 .new h3{color:#fff}
.vs2 ul{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.vs2 li{display:flex;gap:11px;font-size:15px;font-weight:300;line-height:1.55;color:#4B5563}
.vs2 .new li{color:rgba(255,255,255,.82)}
.vs2 .tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:50px;margin-bottom:14px}
.vs2 .old .tag{background:#f3f4f6;color:#6B7280}
.vs2 .new .tag{background:rgba(0,189,197,.18);color:#5ff0f7}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;position:relative}
.step::before{content:counter(s);position:absolute;top:-14px;left:24px;width:30px;height:30px;border-radius:10px;background:var(--pp-grad);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.step h3{margin-top:8px;font-size:17px}
.step p{font-size:14.5px;margin:0}
/* cards grid */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .25s,box-shadow .25s}
.vcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(34,6,70,.1)}
.vcard .hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.vcard .mono{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
.vcard h3{margin:0;font-size:17px}
.vcard .hq{font-size:12.5px;color:var(--muted);font-weight:300}
.vcard p{font-size:14.5px;margin:0 0 12px}
.vcard .best{font-size:13.5px;color:#374151;background:var(--soft);border-radius:12px;padding:10px 12px;font-weight:300}
/* faq */
.faq details{border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:12px;background:#fff;transition:box-shadow .2s}
.faq details[open]{box-shadow:0 12px 30px rgba(34,6,70,.07)}
.faq summary{cursor:pointer;font-size:17px;font-weight:500;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:11px;height:11px;border-right:2px solid #6b48ff;border-bottom:2px solid #6b48ff;transform:rotate(45deg);transition:transform .2s;flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:14px 0 0;font-size:15.5px}
/* cta band */
.cta-band{position:relative;overflow:hidden;border-radius:28px;padding:clamp(30px,4vw,54px);background:radial-gradient(120% 120% at 0% 0%,#a956ff 0%,#7c5dff 42%,#3766fe 100%);color:#fff}
.cta-band::after{content:'';position:absolute;right:-90px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(61,201,244,.5),transparent 70%)}
.cta-band h2{color:#fff;position:relative;margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.9);position:relative;max-width:62ch;font-size:17px}
.cta-band .ppl-ctas{position:relative;margin-top:26px}
.cta-band .ppl-btn-secondary{background:#fff;border-color:#fff}
/* reveal animation */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}
/* marquee */
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq .track{display:flex;gap:44px;width:max-content;animation:scroll 34s linear infinite}
.mq .track span{font-size:14px;color:var(--muted);font-weight:300;white-space:nowrap;display:flex;align-items:center;gap:10px}
@keyframes scroll{to{transform:translateX(-50%)}}
/* The header and footer used to be made inert here:
     .pp-header a,.pp-header button,.pp-footer a{pointer-events:none!important}
   That was right when these three pages were standalone mock-ups on the GTM preview,
   where the chrome was a picture of a header and clicking it would have gone nowhere.
   It came across with the pages when they moved into the repo and sat on top of the
   real global header, which left the hamburger, every nav link, the logo and every
   footer link dead on the three comparison pages at every width. Removed, not scoped:
   there is no width at which the real header should be unclickable. */
.draftbar{background:#fff7e6;border-bottom:1px solid #f3d9a0;color:#6e4300;font-size:13.5px;padding:10px 24px;text-align:center}
@media (max-width:980px){.alt-hgrid{grid-template-columns:1fr;gap:34px}.alt-stage{min-height:0}.alt-stage .browser{width:100%;transform:none}.budget-card{position:static;width:100%;margin-top:18px;animation:none}.alt-stage .phone{display:none}
 .trust{grid-template-columns:repeat(2,1fr)}.trust div:nth-child(2n){border-right:0}.split2,.vs2,.cards3,.steps{grid-template-columns:1fr}}

/* logos in the table and chips, names on one line */
table.cmp2 thead th .hd{white-space:nowrap}
table.cmp2 thead th .hd>span:last-child{white-space:nowrap}
table.cmp2 thead th img,.pick img,.vs-chip img.mk-logo{width:26px;height:26px;object-fit:contain;flex:none;border-radius:6px}
.pick img{width:22px;height:22px}
.vs-chip img.mk-logo{width:24px;height:24px}
.vs-chip{white-space:nowrap}
.pick span{white-space:nowrap}

/* ── comparison rows slide in on scroll ──────────────────────────────────────
   A capability matrix is a wall of eleven identical rows, and a reader skims it as one
   block. Staggering them in makes the eye walk the list a row at a time.
   The blur is on a wrapper span, not the row: filter on a <tr> promotes it to its own
   layer in Blink and the cell borders drop out mid-animation. */
.cmp2 tbody tr{opacity:0;transform:translateY(16px)}
.cmp2 tbody tr .mk,.cmp2 tbody tr .feat{filter:blur(6px);transition:filter .5s ease}
.cmp2 tbody tr.in{opacity:1;transform:none;
 transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.cmp2 tbody tr.in .mk,.cmp2 tbody tr.in .feat{filter:none}
@media(prefers-reduced-motion:reduce){
 .cmp2 tbody tr{opacity:1;transform:none}
 .cmp2 tbody tr .mk,.cmp2 tbody tr .feat{filter:none}}

/* ── our signature in the tables is the logo, not a rebuilt one ──────────────
   The column heading and the card heading used to be the emblem with "PurchasePlus"
   typed beside it in the page's font. That is a reconstruction of the logo, not the
   logo: wrong typeface, wrong spacing, wrong weight relationship between mark and
   word. Both now use the horizontal lockup from the brand kit, one asset, exactly as
   the site header does.

   Sized by height so the lockup's own proportions decide its width, and matched to the
   competitor marks beside it: 26px here, 30px in the cards. Competitors keep mark plus
   name because we hold their marks and not their lockups. */
.cmp2 thead th .hd .pp-lockup{height:26px;width:auto;flex:none;border-radius:0}
.cc .cdhd .pp-lockup{height:30px;width:auto;flex:none;border-radius:0}

/* Ours a size up, deliberately: 31 against their 26 here, 34 against their 30 below.
   These numbers were first written to compensate for something else, a mark that looked
   smaller at a matched box, and the real cause turned out to be 40% transparent padding
   in the exported SVG rather than the shape of a cross. The asset is cropped to its
   artwork now, so what these set is what gets painted and ours is the larger mark. */
table.cmp2 thead th img[src*="mark-purchaseplus"]{width:31px;height:31px}
.cc .cdhd img[src*="mark-purchaseplus"]{width:34px;height:34px}

/* ── the hero on a phone ─────────────────────────────────────────────────────
   The desktop hero is padded 68px over and 170px under, the second of those sized
   for the app mockup's shadow to decay before the section edge. Neither number was
   ever revisited for a 390px screen, where 68px of air above a 38px headline pushes
   the whole proposition below the fold and 170px underneath is dead space.

   The two calls to action are the other half of it. `.ppl-ctas` wraps, and at 390px
   the pair measure 362px against 332px of room, so "See the comparison" drops onto
   its own line and the hero reads as a stack of two full-width slabs. Twenty pixels
   of horizontal padding off each button is all it takes to bring them level.

   `section.wh` rather than `.wh`: the hero's own padding is declared in a <style>
   block further down the page than this file is linked, so at equal specificity the
   page wins. One tag selector is enough to settle it, and is cheaper than moving a
   rule out of the page it documents. */
@media (max-width:619px){
  section.wh{padding:28px 0 72px}
  .wh h1{font-size:33px;margin-bottom:14px}
  .wh .ppl-kicker{margin-bottom:10px}
  .wh .ppl-lead{margin-bottom:12px}
  .ppl-ctas{gap:10px;flex-wrap:nowrap;margin-top:20px}
  .ppl-btn{padding:12px 17px;font-size:14px}

  /* The hero's wrap carries a 28.8px gutter, chosen to line its copy up with the
     header's 1350px container on a wide screen. Every section below it is .ppl-wrap
     at 24px, so on a phone the hero sits five pixels inboard of the whole rest of the
     page and the left edge visibly steps. On a 390px screen there is no header
     container to line up with, so the hero takes the page's own gutter. */
  .wh-wrap{padding-left:24px;padding-right:24px}

  /* ── the hero reads centred on a phone ────────────────────────────────────
     Left-ranged copy is right on a wide screen, where the hero is two columns and
     the copy has a mock beside it to range against. On a phone the mock drops below
     and there is nothing on the right, so the same alignment leaves the column
     hanging off the left edge. Kicker, headline, paragraph and both buttons centre
     as one block. Two hero shapes to cover: .wh on BirchStreet, .alt-hero on
     FutureLog and the tier 1 page. */
  .wh .wh-wrap > div,
  .alt-hero .alt-hgrid > div:first-child{text-align:center}
  .wh .wh-wrap > div > p,
  .alt-hero .alt-hgrid > div:first-child > p{margin-left:auto;margin-right:auto}
  .wh .ppl-ctas,
  .alt-hero .ppl-ctas{justify-content:center}
}

/* The drag-to-compare handle used to read "&#9664;&#9654;", two BLACK TRIANGLE
   characters. iOS renders those from the emoji font: colour glyphs, their own
   weight and their own baseline, sitting in the middle of a brand gradient button.
   They are a drawn pair of chevrons now, stroked in white like every other icon on
   the page. */
.wh-knob svg{width:21px;height:auto;display:block}

/* ── the comparison table on a phone ─────────────────────────────────────────
   Built by renderPhone() in pp-alternatives.js, from the same CMP_DATA as the desktop
   table. Both are always in the DOM; this is the switch between them.

   The whole layout hangs off one grid template: a flexible name column, one fixed
   column per vendor, and the disclosure arrow. The heading row and every data row use
   it, so a mark is always under its own logo whatever the picker does. --n is set on
   the container by the renderer. */
.cmpp{display:none}
@media (max-width:619px){
  .cmp-scroll{display:none}
  /* --vg is the gap between columns and it is what keeps the marks apart. At 4px, with
     our mark overhanging its own column to stay the largest, the cross touched the
     BirchStreet circle. 6px plus the inset on the competitor marks below gives every
     pair about 8px of clear air. */
  .cmpp{display:block;--vw:26px;--vg:6px;--fs:11.5px;
    /* Twelve pixels from each screen edge rather than the section's 24px: the twelve it
       buys back is the difference between a readable name column and an unreadable one. */
    margin:0 -12px;border:1px solid var(--line);border-radius:16px;background:#fff;
    overflow:hidden;box-shadow:0 10px 30px rgba(34,6,70,.06)}
  .cmpp-grid{display:grid;
    grid-template-columns:minmax(0,1fr) repeat(var(--n),var(--vw)) 14px;
    column-gap:var(--vg);align-items:stretch}

  /* Deliberately not sticky. The site header is itself sticky and 69px tall, so a
     second sticky bar either hides underneath it or has to hardcode its height. The
     whole table is about 550px, well inside one screen, so the logos are in view for
     as long as they are needed. */
  /* No bottom padding: the heading's tinted cell has to meet the tint running down the
     rows, or our column reads as a stripe that starts halfway down the table. */
  .cmpp-head{background:#fff;padding:9px 10px 0;border-bottom:1px solid var(--line)}
  .cmpp-k{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:#9aa0ae;align-self:center;padding-bottom:7px}
  .cmpp-h{display:grid;place-items:center;padding:4px 0 7px}
  /* Competitor marks sit inside their column rather than filling it, which is what
     creates the gap on both sides. Tied to --vw so they stay matched when fitNames()
     narrows the columns to buy room for the names. */
  .cmpp-h img{width:calc(var(--vw) * .84);height:calc(var(--vw) * .84);
    object-fit:contain;border-radius:6px}
  /* Ours takes the whole column, so it is 19% larger than every competitor mark and
     still never crosses into the next column. Overhanging the column was what put the
     cross on top of the BirchStreet circle. */
  .cmpp-h img[src*="mark-purchaseplus"]{width:var(--vw);height:var(--vw)}
  .cmpp-h .mono{width:calc(var(--vw) * .84);height:calc(var(--vw) * .84);border-radius:6px;
    display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff}
  /* The tint is what marks our column, top to bottom. No label under the mark: it
     bought a word nobody needed at the cost of shrinking the emblem. */
  .cmpp-h.us{background:rgba(124,93,255,.05);border-radius:7px 7px 0 0}

  .cmpp-r{border-bottom:1px solid #f5f4f9}
  .cmpp-r:last-child{border-bottom:0}
  .cmpp-r>summary{list-style:none;cursor:pointer;padding:0 10px;min-height:44px;
    display:flex;align-items:center}
  .cmpp-r>summary::-webkit-details-marker{display:none}
  .cmpp-r>summary>.cmpp-grid{width:100%}
  .cmpp-r[open]{background:#fcfbff}
  /* One line, always. The title attribute carries the full wording for anything that
     outgrows the map in the renderer, and the open panel repeats it in full. */
  .cmpp-n{font-size:var(--fs);font-weight:500;line-height:1.3;letter-spacing:-.005em;
    color:var(--ink);align-self:center;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;padding:11px 0}
  .cmpp-c{display:grid;place-items:center}
  .cmpp-c.us{background:rgba(124,93,255,.05)}
  .cmpp-d{width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
  .cmpp-d .b{display:grid;place-items:center}
  .cmpp-d svg{width:11px;height:11px}
  .cmpp-d.y{background:rgba(0,189,197,.14)}
  .cmpp-d.n{background:rgba(238,43,98,.12)}
  .cmpp-d.p{background:rgba(244,165,36,.17)}
  .cmpp-a{display:grid;place-items:center;color:#9d93c4}
  .cmpp-a svg{width:14px;transition:transform .2s ease}
  .cmpp-r[open] .cmpp-a svg{transform:rotate(180deg)}
  @media(prefers-reduced-motion:reduce){.cmpp-a svg{transition:none}}

  .cmpp-b{padding:0 10px 11px}
  /* Two classes, not one: `.ppl-sec p` further up this file sets every paragraph in the
     section to 16px/1.7, and it outranks a single class on a <p>. */
  .cmpp .cmpp-t{margin:0 0 2px;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.3}
  .cmpp .cmpp-note{margin:0 0 8px;font-size:11.5px;font-weight:300;color:var(--muted);
    line-height:1.45}
  .cmpp-l{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:9px;
    background:#f7f7fa;margin-bottom:5px;font-size:12px;line-height:1.4;font-weight:300;
    color:#374151}
  .cmpp-l:last-child{margin-bottom:0}
  .cmpp-l.us{background:#f1ecff}
  .cmpp-l b{font-weight:500;color:var(--ink)}
  .cmpp-l img{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:none}
  .cmpp-l img[src*="mark-purchaseplus"]{width:21px;height:21px}
  .cmpp-l .mono{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;
    font-size:7px;font-weight:700;color:#fff;flex:none}
  .cmpp-l>span{min-width:0}

  /* Six logos leave about 145px for the name, two leave nearly 250. Spend the room on
     the logos where there is some. The name's own size is not set here: fitNames() in
     the script measures it, because the width it has to fit into depends on more than
     the vendor count. */
  .cmpp[data-n="2"],.cmpp[data-n="3"]{--vw:28px;--vg:8px}
  .cmpp[data-n="6"]{--vw:25px;--vg:5px}
}