/* ═══════════════════════════════════════════════════════════════════
   pricing-delta.css
   Net-new styles for the Pricing page only, all classes prefixed .pc-
   and scoped under .pc-scope so nothing here can collide with
   phrhome.css or the shared navbar/footer (this content used to live
   in an iframe for exactly that reason; it's inlined now so the tier
   header can genuinely stick to the top of the page while scrolling,
   which an iframe can never do unless it has its own internal scroll
   — see project memory for the full reasoning).
   ═══════════════════════════════════════════════════════════════════ */
.pc-scope{
  --white:#fff; --ink:#0F1C2E; --ink-2:#334155; --muted:#64748B; --muted-2:#94A3B8;
  --line:#E7EAF0; --line-2:#EEF1F6; --bg-soft:#F8FAFC;
  --manage:#059669; --manage-tint:#ECFDF5; --manage-line:#A7F3D0;
  --grow:#2563EB; --grow-tint:#EFF6FF; --grow-line:#BFDBFE;
  --transform:#7C3AED; --transform-tint:#F6F3FF; --transform-line:#DDD6FE;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,28,46,.04),0 8px 24px rgba(15,28,46,.06);
  --shadow-lg:0 2px 6px rgba(15,28,46,.05),0 20px 48px rgba(15,28,46,.10);
  --sans:'Inter',system-ui,sans-serif; --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --cols:minmax(0,1fr) 138px 138px 138px;
  font-family:var(--sans);color:var(--ink);line-height:1.55;
}
.pc-scope,.pc-scope *{box-sizing:border-box}
.pc-scope h1,.pc-scope h2,.pc-scope h3,.pc-scope h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.02em}
.pc-scope p{margin:0}
.pc-scope a{color:inherit;text-decoration:none}
.pc-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pc-eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.pc-btn{font-family:var(--display);font-weight:700;font-size:14.5px;border-radius:999px;padding:11px 20px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pc-btn:active{transform:translateY(1px)}
.pc-btn-primary{background:var(--ink);color:#fff}
.pc-btn-primary:hover{box-shadow:0 8px 20px rgba(15,28,46,.22)}
.pc-btn-lg{padding:15px 28px;font-size:16px}

/* ---- hero ---- */
.pc-hero{padding:76px 0 34px;text-align:center}
.pc-hero .pc-eyebrow{margin-bottom:18px}
.pc-hero h1{font-size:clamp(34px,5vw,54px);font-weight:800;max-width:21ch;margin:0 auto}
.pc-hero .pc-sub{margin:22px auto 0;max-width:56ch;font-size:clamp(16px,2vw,19px);color:var(--ink-2)}
.pc-hero .pc-note{margin-top:14px;font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.pc-hero .pc-note svg{width:15px;height:15px;color:var(--manage)}

/* ---- modules ---- */
.pc-modules{padding:44px 0 64px}
.pc-modules-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.pc-module-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;flex:0 0 calc((100% - 48px)/4);width:calc((100% - 48px)/4)}
.pc-module-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--bg-soft);color:var(--ink)}
.pc-module-ic svg{width:21px;height:21px}
/* six modules use the same photographic icons as the comparison
   table's left nav (see moduleIcon() in js/main.js) — those fill the
   tile edge-to-edge with no tint, unlike Recruitment's stroke-SVG
   fallback above which keeps the soft-background tile */
.pc-module-ic.pc-module-ic-img{background:transparent}
.pc-module-ic img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.pc-module-card h3{font-size:16.5px;font-weight:800;margin-top:14px}
.pc-module-card p{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.45}
@media(max-width:900px){.pc-module-card{flex-basis:calc((100% - 16px)/2);width:calc((100% - 16px)/2)}}
@media(max-width:520px){.pc-module-card{flex-basis:100%;width:100%}}

/* ---- tier ladder ---- */
.pc-ladder{padding:74px 0 56px;background:var(--bg-soft)}
.pc-ladder-head{text-align:center;max-width:60ch;margin:0 auto 75px}
.pc-ladder-head h2{font-size:clamp(24px,3vw,32px);font-weight:800}
.pc-ladder-head .pc-ladder-sub{margin-top:16px;font-size:15.5px;color:var(--ink-2)}

/* capability search — jumps straight to the module or standout
   feature holding a match and highlights the matching row(s)/card(s),
   instead of making people scan every module by hand */
.pc-search{max-width:640px;margin:26px auto 0;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 18px;box-shadow:var(--shadow)}
.pc-search-ic{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.pc-search-input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font-family:var(--sans);font-size:14.5px;color:var(--ink);padding:8px 0}
.pc-search-input::placeholder{color:var(--muted)}
/* the browser's native type=search cancel icon duplicates our own
   .pc-search-clear "x" button, so it's hidden in favour of that one */
.pc-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pc-search-clear{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:0;background:var(--bg-soft);color:var(--ink-2);cursor:pointer;transition:background .15s ease,color .15s ease}
.pc-search-clear svg{width:14px;height:14px}
.pc-search-clear:hover{background:var(--line);color:var(--ink)}
.pc-search-btn{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:13.5px;color:#fff;background:var(--ink);border:0;border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .15s ease}
.pc-search-btn:hover{background:#000}
.pc-search-status{max-width:640px;margin:14px auto 0;text-align:center;font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.pc-search-status .pc-search-empty{color:var(--muted)}
.pc-search-status b{color:var(--ink);font-family:var(--display)}
.pc-search-also{color:var(--muted);font-weight:600}
.pc-search-pill{font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.pc-search-pill:hover{background:#fff;border-color:var(--ink)}
@media(max-width:640px){.pc-search,.pc-search-status{max-width:none}}
/* matched row/card, applied after jumping to a search result */
.pc-row.pc-search-hit{background:var(--grow-tint);box-shadow:inset 3px 0 0 var(--grow)}
.pc-row.pc-search-hit:hover{background:var(--grow-tint)}
.pc-feature-card.pc-search-hit{border-color:var(--grow);box-shadow:0 0 0 2px var(--grow) inset}
.pc-ladder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
/* Talent & Recruitment aren't offered on Manage — only 2 cards show */
.pc-ladder-grid.pc-two-tier{grid-template-columns:repeat(2,1fr)}
/* mobile-carousel-only trailing spacer — see its sizing in the
   max-width:900px media query further down */
.pc-ladder-spacer{display:none}
/* mobile-only tier tabs (Manage/Grow/Transform), an explicit way to
   jump to a card in the swipe carousel below 900px — see the matching
   media query further down and pcTierTabs' setup in pricing.js. Hidden
   here since above 900px all three cards already sit side by side. */
.pc-tier-tabs{display:none}
.pc-tier-tab{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.pc-tier-tab:hover{border-color:var(--muted-2)}
.pc-tier-tab.pc-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pc-tier-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease;cursor:pointer}
.pc-tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pc-tier-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pc-tier-card .pc-tname{font-family:var(--display);font-weight:800;font-size:26px;display:flex;align-items:center;gap:10px}
.pc-tier-card .pc-tname .pc-chip{width:12px;height:12px;border-radius:4px}
.pc-tier-card .pc-ttag{font-weight:600;font-size:14px;margin-top:4px;font-family:var(--display)}
.pc-tier-card .pc-tdesc{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin-top:12px}
.pc-tier-card ul{list-style:none;padding:0;margin:16px 0 22px;display:flex;flex-direction:column;gap:9px}
.pc-tier-card li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2);align-items:flex-start}
.pc-tier-card li svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px}
.pc-tier-card .pc-btn{margin-top:auto;justify-content:center;width:100%}
.pc-tier-card[data-tier=manage]{border-top:3px solid var(--manage)}
.pc-tier-card[data-tier=grow]{border-top:3px solid var(--grow)}
.pc-tier-card[data-tier=transform]{border-top:3px solid var(--transform)}
.pc-tier-card[data-tier=manage] .pc-chip{background:var(--manage)} .pc-tier-card[data-tier=manage] .pc-ttag{color:var(--manage)} .pc-tier-card[data-tier=manage] li svg{color:var(--manage)}
.pc-tier-card[data-tier=grow] .pc-chip{background:var(--grow)} .pc-tier-card[data-tier=grow] .pc-ttag{color:var(--grow)} .pc-tier-card[data-tier=grow] li svg{color:var(--grow)}
.pc-tier-card[data-tier=transform] .pc-chip{background:var(--transform)} .pc-tier-card[data-tier=transform] .pc-ttag{color:var(--transform)} .pc-tier-card[data-tier=transform] li svg{color:var(--transform)}
.pc-tier-card[data-tier=grow] .pc-btn{background:var(--grow);color:#fff}
.pc-tier-card[data-tier=grow] .pc-btn:hover{box-shadow:0 8px 20px rgba(37,99,235,.3)}
.pc-tier-card[data-tier=manage] .pc-btn,.pc-tier-card[data-tier=transform] .pc-btn{background:#fff;border-color:var(--line);color:var(--ink)}
.pc-tier-card[data-tier=manage] .pc-btn:hover{border-color:var(--manage)}
.pc-tier-card[data-tier=transform] .pc-btn:hover{border-color:var(--transform)}
.pc-popular{position:absolute;top:-11px;right:20px;background:var(--grow);color:#fff;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:999px;text-transform:uppercase}

/* ---- compare ---- */
.pc-ladder .pc-wrap{max-width:none;padding:0 clamp(24px,10vw,220px)}
.pc-cmp{margin-top:56px}

/* ---- module nav (left) + tier cards & table (right) ----
   nav and the right column (tier cards, then the table) share one
   grid row spanning both, so .pc-cmp-nav's sticky containing block
   runs the full height of that row: it starts in normal flow beside
   the tier cards, then locks a short gap below the top of the
   viewport once scrolled (see .pc-cmp-nav's own top offset), and
   stays locked through the whole table instead of only the short
   tier-card area. */
.pc-cmp-layout{--nav-w:220px;position:relative;display:grid;grid-template-columns:var(--nav-w) 1fr;gap:20px;align-items:start}
/* full-height white panel behind the nav column, independent of the
   nav's own (shorter, sticky) box, with a divider at its edge —
   .pc-cmp-nav itself only spans its button list, not the whole row */
.pc-cmp-layout::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--nav-w) + 10px);border-right:1px solid var(--line)}
.pc-right-col{min-width:0}
/* it's a <nav> element, so it also picks up the shared boilerplate's
   bare nav{} rule (sticky, height:64px, border-bottom, etc. — meant
   for the old unprefixed site header) unless every property that rule
   sets is overridden here */
.pc-cmp-nav{position:sticky;top:120px;z-index:20;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;background:transparent;backdrop-filter:none;border-bottom:0}
/* module nav (HR, Pay, Time...) and the standout-capability nav
   (Lexi Ai, Mobile App...) share .pc-cmp-nav's sticky/layout base but
   can have independent top/bottom padding via their own ids */
#pcCmpNav{padding:10px 0}
#pcStandoutNav{padding:110px 0}
.pc-cmp-nav button{text-transform: none !important; display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink-2);background:transparent;border:0;border-left:3px solid transparent;border-radius:0 8px 8px 0;padding:10px 16px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pc-cmp-nav button:hover{background:#fff;color:var(--ink)}
.pc-cmp-nav button.pc-on{background:#fff;color:var(--ink);font-weight:700;border-left-color:var(--ink)}
.pc-nav-ic{width:28px;height:28px;flex:0 0 auto;border-radius:7px;object-fit:cover}
/* generic svg-icon wrapper — pairs with a size class (.pc-nav-ic,
   .pc-mod-ic) which sets the box's own width/height; the svg scales
   to it via percentage sizing */
.pc-ic-svg{display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--ink-2)}
.pc-ic-svg svg{width:57%;height:57%}
.pc-cmp-nav button.pc-on .pc-ic-svg{color:var(--ink)}
.pc-mod-ic{width:32px;height:32px;flex:0 0 auto;border-radius:8px;object-fit:cover}
@media(max-width:900px){
  .pc-cmp-layout{grid-template-columns:1fr}
  .pc-cmp-layout::before{display:none}
  .pc-cmp-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
  .pc-cmp-nav button{width:auto}
  /* #pcStandoutNav's 110px padding only makes sense centering a short
     nav beside a much taller sticky desktop panel — once the layout
     collapses to one column it's just dead space above/below the row.
     Its sticky lock goes too — pinned to top:75px in a single-column
     layout, it just sits on top of and overlaps the feature panel
     content as you scroll past it, instead of staying out of the way
     beside a much taller sticky desktop panel. */
  #pcStandoutNav{padding:10px 0;position:static}
}
/* ---- mobile: capability comparison table is too dense to use on a
   phone screen (7-module nav + 3-column table), so below this width
   the search and table drop out, leaving just #pcLadder's cards as a
   simple plan-comparison summary. The module nav (HR, Pay, Time...)
   stays — it's still useful for switching which tier cards/blurbs are
   shown — but loses its sticky lock, since that was there to keep it
   in view alongside the (now hidden) tall table as you scrolled past
   it; sitting above the cards in normal flow, it doesn't need it. */
@media(max-width:768px){
  #pcSearchForm,#pcSearchStatus,#pcCmp,#pcSearchFeed{display:none}
  #pcCmpNav{position:static}
}

.pc-panel-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 22px 28px}
.pc-mod-textwrap{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pc-mod-nameline{display:flex;align-items:center;gap:10px}
.pc-mod-desc{font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--muted);line-height:1.3}
.pc-mod-name{font-family:var(--display);font-weight:800;font-size:24px}

/* single tier-name header, sticky to the very top of the viewport; not
   repeated per group — stays in place for every group in the module.
   top:0 (not the navbar's height) because .nv-bar's own sticky range
   ends well before the page has scrolled this far, so by the time this
   row reaches the top there's no navbar left to clear */
.pc-th-row{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:var(--cols);background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:24px 24px 0 0}
/* Talent & Recruitment aren't offered on Manage — table drops that
   column too (js hides the manage .pc-th and .pc-cell for each row) */
.pc-cmp.pc-no-manage{--cols:minmax(0,1fr) 138px 138px}
@media(max-width:720px){.pc-cmp.pc-no-manage{--cols:minmax(0,1fr) 74px 74px}}
#pcGroups, .pc-groups{background:#fff;border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 24px 24px;overflow:hidden}
.pc-th-row .pc-lead{padding:14px 22px;display:flex;align-items:center;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
.pc-th{padding:14px 10px;text-align:center;font-family:var(--display);border-left:1px solid var(--line-2)}
.pc-th .pc-n{font-weight:800;font-size:16px}
.pc-th .pc-t{font-weight:600;font-size:11.5px;color:var(--muted);margin-top:2px}
.pc-th[data-tier=manage] .pc-n{color:var(--manage)} .pc-th[data-tier=grow] .pc-n{color:var(--grow)} .pc-th[data-tier=transform] .pc-n{color:var(--transform)}

.pc-grp{border-top:1px solid var(--line-2)}
.pc-grp:first-child{border-top:0}
.pc-grp-name{padding:22px 22px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
.pc-row{display:grid;grid-template-columns:var(--cols);align-items:stretch;border-top:1px solid var(--line-2)}
.pc-grp .pc-row:first-child{border-top:0}
.pc-row:hover{background:var(--bg-soft)}
.pc-row.pc-flag{background:#FFF8EC}
.pc-row.pc-flag:hover{background:#FDF1DA}
.pc-row.pc-flag .pc-cell-item{box-shadow:inset 3px 0 0 #E9A23B}
.pc-cell-item{padding:22px 22px;display:flex;align-items:center;gap:9px;min-width:0}
.pc-cell-item .pc-lbl{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.5}
/* small status badge next to a capability's label — New (recently
   shipped) vs Coming Soon (on the roadmap, not yet available) */
.pc-label-badge{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;line-height:1.3}
.pc-label-badge-new{background:var(--grow);color:#fff}
.pc-label-badge-soon{background:#F59E0B;color:#fff}
.pc-cell{border-left:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:20px 8px;text-align:center;font-size:12.5px;color:var(--ink-2)}
.pc-cell .pc-cap{font-weight:500;line-height:1.35;color:var(--ink-2)}
.pc-cell[data-tier=manage]{--accent:var(--manage);--tint:var(--manage-tint)} .pc-cell[data-tier=grow]{--accent:var(--grow);--tint:var(--grow-tint)} .pc-cell[data-tier=transform]{--accent:var(--transform);--tint:var(--transform-tint)}
.pc-ic{width:20px;height:20px}
.pc-ic-yes{color:var(--accent)}
.pc-dash{color:#CBD5E1;font-weight:600}
.pc-pill{font-family:var(--display);font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--accent);line-height:1.1}
.pc-pill.pc-sales{background:#F1F5F9;color:var(--ink-2)}
.pc-tts-cap{margin-bottom:5px;font-weight:600}
.pc-cell-link{color:var(--accent,#2563EB);font-weight:600;font-size:12.5px;line-height:1.35;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pc-cell-link:hover{text-decoration:none}
.pc-lbl .pc-cell-link{font-size:inherit;font-weight:500}

/* info button + popover */
.pc-info{position:relative;flex:0 0 auto}
.pc-info-btn{text-transform: none !important; width:19px;height:19px;border-radius:50%;border:1.4px solid var(--muted-2);color:var(--muted);background:#fff;font-family:var(--display);font-weight:800;font-size:11px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}
.pc-info-btn:hover{border-color:var(--ink);color:var(--ink)}
.pc-info-btn[aria-expanded=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pc-pop{position:absolute;left:0;top:28px;z-index:200;width:340px;max-width:78vw;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:16px 17px;display:none}
.pc-pop.pc-open{display:block}
.pc-pop .pc-pt{font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:6px}
.pc-pop .pc-pd{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.pc-pop .pc-covers{margin-top:12px;border-top:1px solid var(--line-2);padding-top:11px}
.pc-pop .pc-covers .pc-ch{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.pc-pop .pc-covers .pc-tags{display:flex;flex-wrap:wrap;gap:6px}
.pc-pop .pc-covers .pc-tag{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;padding:3px 8px}
.pc-pop .pc-avail{margin-top:11px;font-size:12px;color:var(--muted);font-style:italic}

/* ---- standout feature panel (Mobile App / Self Service / Lexi AI) ----
   #pcStandoutSection's own nav+panel — same panel-head style as the
   module comparison above, but a plain capability-card grid instead of
   the tiered comparison table, since these aren't tier-gated */
/* no align-items override here (default stretch) — cards row-pair to
   equal height instead of each sizing to its own content, which is
   what kept collapsed cards (3 items each, see .pc-feature-extra
   below) visually even instead of jagged */
.pc-feature-grid{background:#fff;border:1px solid var(--line);border-radius:24px;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pc-feature-card{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:20px 22px;background:var(--bg-soft);display:flex;flex-direction:column}
.pc-feature-card h4{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--ink);margin:0 0 8px}
.pc-feature-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
/* category cards (e.g. Mobile App) list several capabilities under one
   heading instead of a single description line — same tick used by
   the tier-ladder cards above, just neutral here since there's no
   per-tier colour to tie it to */
.pc-feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pc-feature-list li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.4}
.pc-feature-list li b{color:var(--ink);font-weight:700}
.pc-feature-list li svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px;color:var(--manage)}
/* items past the first 3 (see FEATURE_LIST_VISIBLE in main.js) stay in
   the DOM but hidden until .pc-feature-more's delegated click handler
   toggles .is-expanded on the card */
.pc-feature-card:not(.is-expanded) .pc-feature-extra,
.pc-lexi-group:not(.is-expanded) .pc-feature-extra{display:none}
.pc-feature-more{margin-top:auto;padding-top:12px;align-self:flex-start;background:transparent;border:0;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--blue);cursor:pointer}
.pc-feature-more:hover{text-decoration:underline}
@media(max-width:720px){.pc-feature-grid{grid-template-columns:1fr;padding:8px}.pc-feature-card{padding:16px 18px}}

/* ---- Lexi pricing cards (Insights, Super Agent, Smart Navigator) ----
   the two panels reuse existing components wholesale — .pc-cta-inner
   for the dark gradient card (incl. its h2/p text styling), .pc-mod-
   nameline for the brand row, .pc-pill for the "Ai" badge (fed its
   own --tint/--accent instead of a tier's), .pc-eyebrow for both
   small-caps labels, .pc-module-card for the white card, and
   .pc-feature-list for the tick columns — only the grid glue and the
   handful of Lexi-specific bits below (price line, token box, the
   "included in" tier tags, and grouped-checklist headings) are new.
   .pc-feature-grid.pc-lexi-pricing is now just the vertical stack of
   rows; each row keeps the original card+checklist grid. */
.pc-feature-grid.pc-lexi-pricing{background:transparent;border:0;padding:0;display:flex;flex-direction:column;gap:36px}
.pc-lexi-row{display:grid;grid-template-columns:minmax(320px,420px) 1fr;align-items:stretch;gap:20px}
.pc-lexi-row-spacer{display:none}
@media(max-width:820px){
  .pc-lexi-row{grid-template-columns:1fr}
  /* mobile: swipeable horizontal carousel instead of a vertical stack —
     one row (colored pricing card + its "what's included" box) mostly
     fills the screen at a time, scroll-snapped, with the next row
     peeking in at the edge (same affordance as the tier-card carousel)
     to signal there's another to swipe to. Lexi Ai only — Mobile App/
     Self Service Portal's plain .pc-feature-grid (no .pc-lexi-pricing)
     is untouched. */
  .pc-feature-grid.pc-lexi-pricing{
    flex-direction:row;
    /* default (stretch) would stretch every row to match the tallest
       row's *total* height (card+box combined), which then leaks into
       .pc-lexi-row's own default grid align-content:stretch and
       inflates both the card and the box to fill it — fighting the
       JS-driven card-only height match below. flex-start avoids that:
       each row keeps its own natural total height. */
    align-items:flex-start;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pc-feature-grid.pc-lexi-pricing::-webkit-scrollbar{display:none}
  .pc-feature-grid.pc-lexi-pricing .pc-lexi-row{scroll-snap-align:start;flex:0 0 auto;width:min(84%,420px);align-content:start}
  /* same last-card-can't-reach-flush problem as the tier carousel, same
     fix: an invisible trailing spacer sized to match every other row's
     peek (see pcLexiRowSpacer in pricing.js) */
  .pc-lexi-row-spacer{display:block;flex:0 0 auto;width:calc(100% - min(84%,420px) - 16px)}
}
.pc-lexi-card{text-align:center;display:flex;flex-direction:column;position:relative;overflow:hidden;color:#fff;border-radius:24px;padding:52px 44px}
/* Insights' purple gradient, with a bright magenta glow in the top
   corner (same radial-glow technique the old CTA band used) */
.pc-cta-inner.pc-lexi-card:not(.pc-lexi-card-blue){background:linear-gradient(160deg,#3A1E8F 0%,#5B2FB8 60%,#7C3FD1 100%)}
.pc-cta-inner.pc-lexi-card:not(.pc-lexi-card-blue):before{content:"";position:absolute;inset:0;background:radial-gradient(560px 280px at 88% 4%,rgba(224,80,235,.6),transparent 65%);pointer-events:none}
/* bundled Lexi features (Super Agent, Smart Navigator) get a blue
   gradient instead of Insights' purple, so the priced add-on reads as
   visually distinct from what's already included in a tier */
.pc-cta-inner.pc-lexi-card-blue{background:linear-gradient(135deg,#2B3FCB 0%,#5686DC 100%)}
.pc-lexi-card .pc-eyebrow{color:#fff;font-size:20px;letter-spacing:.06em}
/* logo + "Ai" pill sit centered above the card's own name (Insights,
   Super Agent, Smart Navigator) instead of sharing one row with it */
.pc-lexi-brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.pc-lexi-brand-logo{display:flex;align-items:center;gap:8px}
.pc-cta-inner.pc-lexi-card h2{margin:32px 0 0;color:#fff}
.pc-lexi-price-unit{font-size:14.5px;font-weight:400;color:#C7D0DE;margin-left:4px}
.pc-lexi-token-box{margin-top:20px;background:rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.45}
.pc-lexi-token-box b{font-weight:800}
.pc-cta-inner.pc-lexi-card p{margin:32px 0 0;max-width:none;color:#C7D0DE}
/* bundled features (Super Agent, Smart Navigator) show which tiers
   include them instead of a price, in the same vertical slot the
   price h2 otherwise occupies */
.pc-lexi-includedin{margin-top:32px}
.pc-lexi-includedin-label{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#C7D0DE;margin-bottom:10px}
.pc-lexi-tier-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pc-lexi-tier-tag{font-family:var(--display);font-weight:700;font-size:13.5px;padding:6px 14px;border-radius:999px;background:var(--accent);color:#fff}
.pc-lexi-included{width:auto}
.pc-lexi-included .pc-eyebrow{color:var(--grow)}
.pc-lexi-included-cols{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:6px 32px}
@media(max-width:560px){.pc-lexi-included-cols{grid-template-columns:1fr}}
/* Super Agent's checklist is grouped by audience (Employees/Managers/
   HR) at uneven sizes, so groups stack full-width instead of splitting
   into the two even columns .pc-lexi-included-cols uses */
.pc-lexi-included-groups{margin-top:20px;display:flex;flex-direction:column;gap:20px}
.pc-lexi-group-name{font-family:var(--display);font-weight:800;font-size:13.5px;color:var(--ink);margin-bottom:10px}

/* ---- all-modules search feed ----
   one .pc-cmp block per matching module, stacked; each reuses the
   single-module view's exact markup/styles (panel-head, sticky tier
   header, groups) but pre-filtered to only the matching groups/items,
   so .pc-cmp's own margin-top:56px already spaces the feed correctly
   under the ladder — only the gap *between* stacked blocks needs a
   rule of its own here. */
.pc-search-feed .pc-cmp + .pc-cmp{margin-top:32px}
.pc-search-feed-empty{margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px 24px;text-align:center;color:var(--ink-2);font-size:14.5px}

/* ---- account-level guarantees (Transform tier) ----
   a standalone band, not another row in the module/tier grid above —
   these are account-wide commitments (SSO, support, SLA, API access),
   not module functionality, so the card style borrows the module-
   overview cards' shape but with a Transform-purple accent instead of
   per-module colour, to read as "a different category" rather than
   an eighth module. */
.pc-enterprise{padding:64px 0}
.pc-enterprise-head{text-align:center;max-width:800px;margin:0 auto 75px}
.pc-enterprise-head .pc-eyebrow{color:var(--transform)}
.pc-enterprise-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-top:8px}
.pc-enterprise-head .pc-enterprise-sub{margin-top:16px;font-size:15px;color:var(--ink-2)}
.pc-enterprise-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.pc-enterprise-card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--transform);border-radius:var(--radius);padding:22px 20px;flex:0 0 calc((100% - 32px)/3);width:calc((100% - 32px)/3)}
.pc-enterprise-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--transform-tint);color:var(--transform)}
.pc-enterprise-ic svg{width:21px;height:21px}
.pc-enterprise-card h3{font-size:15.5px;font-weight:800;margin-top:14px}
.pc-enterprise-card p{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.45}
@media(max-width:1000px){.pc-enterprise-card{flex-basis:calc((100% - 16px)/2);width:calc((100% - 16px)/2)}}
@media(max-width:560px){.pc-enterprise-card{flex-basis:100%;width:100%}}
/* mobile: 9 cards stacked full-width reads as a wall of scrolling — show
   the first 3 and collapse the rest behind a "View N more" button (same
   is-expanded toggle pattern as .pc-feature-more's card lists) */
.pc-enterprise-more{display:none;width:max-content;margin:22px auto 0;background:transparent;border:1px solid var(--transform-line);color:var(--transform);font-family:var(--display);font-weight:700;font-size:13.5px;padding:10px 22px;border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.pc-enterprise-more:hover{background:var(--transform-tint)}
@media(max-width:560px){
  .pc-enterprise-card:nth-child(n+4){display:none}
  .pc-enterprise-grid.is-expanded .pc-enterprise-card{display:block}
  .pc-enterprise-more{display:block}
}

/* ---- cta band ---- */
.pc-cta{margin:64px 0 0;padding:56px 0}
.pc-cta-inner{text-align:center}
.pc-cta-inner h2{color:var(--ink);font-size:clamp(26px,3.6vw,38px);font-weight:800}
.pc-cta-inner p{color:var(--ink-2);margin-top:14px;font-size:16px;max-width:52ch;margin-left:auto;margin-right:auto}
/* same blue CTA styling as the navbar's "Request a Demo" button */
.pc-cta-inner .pc-btn{margin-top:26px;background:var(--grow);color:#fff;box-shadow:0 8px 20px -10px rgba(37,99,235,.7)}
.pc-cta-inner .pc-btn:hover{background:#1d4ed8;box-shadow:0 12px 26px -10px rgba(37,99,235,.8)}

@media(max-width:900px){
  /* swipeable horizontal carousel instead of a vertical stack — cards
     scroll-snap one at a time (2-card .pc-two-tier included, since
     grid-template-columns has no effect once this is a flex row), with
     the next card peeking in at the edge to hint there's more to swipe
     to. Narrowing .pc-ladder .pc-wrap's padding here (its desktop value
     is a wide clamp() sized for the nav+table layout that's already
     hidden by 768px) gives the cards more width to peek with. */
  .pc-ladder .pc-wrap{padding:0 20px}
  .pc-ladder-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* overflow-x:auto with no overflow-y set forces overflow-y to
       compute as auto too (same non-visible/visible pairing rule as
       elsewhere in this file), which clips .pc-popular's "Most chosen"
       badge — it pokes 11px above the card via top:-11px. Reserve that
       space as padding (inside the scrollport, so nothing clips) and
       cancel the visual push with a matching negative margin. */
    padding-top:16px;
    margin-top:-16px;
    padding-bottom:4px;
    margin-bottom:-4px;
  }
  .pc-ladder-grid::-webkit-scrollbar{display:none}
  .pc-ladder-grid .pc-tier-card{scroll-snap-align:start;flex:0 0 auto;width:min(84%,400px)}
  /* without this, the last card can never reach scroll-snap-align:start
     — there's no scrollable track left after it once you've scrolled as
     far as the browser allows, so it stalls partway in. This invisible
     spacer is that missing track. (A padding-right on .pc-ladder-grid
     itself would do the same job, but percentage widths on flex items
     resolve against the container's content box *after* its own
     padding, so the cards' own 84% would shrink to chase a padding
     that's chasing them right back — a real element sidesteps that.) */
  .pc-ladder-spacer{display:block;flex:0 0 auto;width:calc(100% - min(84%,400px) - 14px)}
  .pc-tier-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:25px}
}
@media(max-width:720px){
  .pc-scope{--cols:minmax(0,1fr) 74px 74px 74px}
  .pc-hero{padding:52px 0 20px}
  .pc-cell{padding:11px 4px;font-size:11.5px}
  .pc-cell-item{padding:13px 14px}
  .pc-grp-name{padding:12px 14px}
  .pc-panel-head{padding:15px 14px}
  .pc-cta{padding:40px 0}
  .pc-lexi-card{padding:38px 22px}
}
@media(prefers-reduced-motion:reduce){.pc-scope,.pc-scope *{transition:none!important}}
.pc-scope [hidden]{display:none!important}