/* ===== shared chrome CSS (lifted verbatim from W-BOOK-DEMO _chrome) ===== */
.cz-light{
  background:var(--w-bg);color:var(--w-text);
  --w-bg:#f5f5f5; --w-bg-deep:#ebebeb; --w-bg-elev:#fafafa;
  --w-card:#ffffff; --w-card-lo:#efefef; --w-card-hi:#ffffff;
  --w-text:var(--w-charcoal); --w-text-2:rgba(28,26,36,0.66); --w-text-3:rgba(28,26,36,0.62);
  --w-text-prose:#302d2e; --w-text-on-brand:#ffffff; --w-icon-ink:var(--w-charcoal);
  --w-line-soft:rgba(28,26,36,0.06); --w-line:rgba(28,26,36,0.10); --w-line-strong:rgba(28,26,36,0.16); --w-edge-top:rgba(255,255,255,0.9);
  --w-brand:var(--w-purple-ink); --w-brand-2:var(--w-purple); --w-brand-soft:rgba(152,135,244,0.10); --w-brand-line:rgba(152,135,244,0.28);
  --w-shadow-raise:0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --w-shadow-raise-soft:0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
  --w-shadow-recess:inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
  --w-shadow-recess-deep:inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7);
  --w-shadow-sm:0 1px 2px rgba(28,26,36,0.04); --w-shadow-md:0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg:0 12px 28px rgba(28,26,36,0.07);
  --w-glow-brand:0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong:0 6px 16px rgba(28,26,36,0.07);
  --w-glass-fill:rgba(255,255,255,0.66); --w-glass-fill-strong:rgba(255,255,255,0.86); --w-glass-tint:rgba(28,26,36,0.90);
  --w-glass-fill-soft:rgba(28,26,36,0.03); --w-glass-line:rgba(28,26,36,0.10); --w-glass-line-bright:rgba(28,26,36,0.16);
  --w-glass-rim-top:rgba(255,255,255,0.95); --w-glass-rim-bottom:rgba(28,26,36,0.05);
  --w-glass-blur:blur(18px) saturate(140%); --w-glass-blur-lg:blur(22px) saturate(145%);
  --w-glass-shadow:0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft:0 4px 12px rgba(28,26,36,0.05);
  --w-cta-fill:var(--w-glass-tint); --w-cta-text:#ffffff; --w-cta-glow:var(--w-shadow-md); --w-cta-glow-strong:var(--w-shadow-lg);
  --w-card-brand-wash:linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line:var(--w-line-strong);
  --w-tag-brand-bg:rgba(28,26,36,0.06); --w-tag-brand-fg:var(--w-text); --w-focus:rgba(28,26,36,0.55);
  --w-grad-surface:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --w-grad-surface-hi:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --w-grad-recess:linear-gradient(180deg, #ededed 0%, #e3e3e3 100%);
}
/* keep glass legible if the OS asks for less transparency, inside a light band */
@media (prefers-reduced-transparency: reduce){
  .cz-light .w-glass,.cz-light .w-btn--glass,.cz-light .w-tag,.cz-light .w-card,.cz-light .w-cta-band{background:var(--w-card);border-color:var(--w-line)}
}

/* ===== W-PRICING page-local styles (Phase 5) ===== */
/* page-local asset tokens (base64'd at bundle) */
:root{
  --w-img-av-jon:url("/assets/images/w/pricing/av-jon.webp");
  --w-img-av-lauren:url("/assets/images/w/pricing/av-lauren.webp");
  --w-img-pr-ctabg:url("/assets/images/w/pricing/pr-ctabg.webp");
  /* AA-safe brand ramp for anything carrying WHITE TEXT on a brand fill.
     --w-grad-brand cannot be used for that: it runs --w-purple #9887f4 (2.95:1) →
     --w-lavender #c18cff (2.48:1), both under the 4.5:1 small-text bar, and it
     shipped that way on this page's badges and featured CTAs. This ramp runs
     #4b3cc4 (7.60:1) → --w-purple-ink #6f5fe0 (4.78:1) — every stop clears AA. */
  --pr-grad-cta:linear-gradient(135deg,#4b3cc4 0%,#6f5fe0 100%);
}

/* asymmetric section spacing (approved pattern: tight top, generous bottom) */
.w-section{padding-block:clamp(36px,2.2vw + 1rem,64px) clamp(64px,4vw + 1.7rem,108px)}

/* ---- §1 opening section — the hero was removed (2026-07-28), so the first band now
   carries the page's own top breathing room instead of inheriting a hero's. ---- */
.pr-open{padding-top:clamp(48px,4.5vw + 1rem,86px)}

/* ---- AMBIENT WASH behind the card rows -------------------------------------
   Glass is only legible against something worth blurring. Over a flat #f5f5f5
   band, a translucent pane and an opaque one look identical. This lays soft
   brand radials behind each product block so the cards have colour to refract
   and the frosted edges actually separate from the background. Kept low-opacity
   and large-radius so it never competes with the type sitting on top of it. */
.pr-amb{position:relative;isolation:isolate}
.pr-amb::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 760px 460px at 12% 22%, rgba(152,135,244,.20) 0%, transparent 62%),
    radial-gradient(ellipse 620px 520px at 88% 16%, rgba(193,140,255,.16) 0%, transparent 58%),
    radial-gradient(ellipse 900px 420px at 50% 96%, rgba(152,135,244,.13) 0%, transparent 66%)}
.pr-amb > .w-container{position:relative;z-index:1}
@media(prefers-reduced-transparency:reduce){.pr-amb::before{opacity:.35}}

/* Anchor landing offset. `.w-nav` is sticky and 68px tall, so an un-offset jump to #experts
   parks the section top at y=0 and the nav sits over the first 14–23px of the section-head
   badge (measured 1440/1024/768/375). 56px clears it at every width with ~30px to spare.
   Scoped to this page — the same latent issue exists on any anchor jump sitewide, since
   nothing in ds7.css sets scroll-margin/scroll-padding. */
/* scroll-margin-top removed 2026-08-07 — superseded by the sitewide
   html{scroll-padding-top:88px} in ds7.css; keeping both would double the offset. */

.pr-btn-wide{min-width:150px;padding-inline:34px;justify-content:center}

/* ---- §2 product switcher (Zendesk-style link strip above the first product head) ----
   Deliberately NOT sticky: it lives inside #carly, so a sticky version unpins the moment
   that section ends — it would vanish exactly when you'd want it to switch back. Static
   matches the precedent and the anchors work with JS off. */
.pr-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  width:max-content;max-width:100%;margin:0 auto 52px;padding:7px 8px 7px 18px;border-radius:100px;
  background:var(--w-glass-fill-strong);border:1px solid var(--w-glass-line);box-shadow:var(--w-glass-shadow-soft);
  -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur)}
.pr-switch__label{font-family:var(--w-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-text-3)}
.pr-switch__pill{display:inline-flex;align-items:center;padding:8px 20px;border-radius:100px;text-decoration:none;
  font-size:14.5px;font-weight:700;color:var(--w-text-2);border:1px solid transparent;
  transition:background .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1),border-color .3s cubic-bezier(.16,1,.3,1)}
.pr-switch__pill:hover{color:var(--w-text);background:var(--w-glass-fill-soft)}
.pr-switch__pill.is-active{background:var(--w-charcoal);color:#fff;border-color:transparent;box-shadow:0 4px 12px -6px rgba(28,26,36,.4)}
.pr-switch__pill:focus-visible{outline:2px solid var(--w-focus);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.pr-switch__pill{transition:none}}
@media(max-width:540px){
  .pr-switch{width:100%;justify-content:center;padding:10px;border-radius:20px}
  .pr-switch__label{width:100%;text-align:center}
  .pr-switch__pill{flex:1;justify-content:center;padding:9px 12px}
}

/* section heads that sit under the switcher */
.pr-head{margin-bottom:44px}
.pr-head__lead{margin:14px auto 0;max-width:58ch}
/* Both product titles share one display size. Carly's is the page H1 (the hero is gone);
   Experts+ stays an <h2> for document structure but reads at the same weight, so the two
   product blocks open identically. */
.pr-title{font-size:clamp(32px,3.5vw + .6rem,56px)}
/* keep the gradient phrase on one line: a mid-phrase break both orphans "#1 AI" and slices
   the 135deg ramp across two boxes. Measured to fit down to 320px at the clamp floor. */
.pr-head .w-accent{white-space:nowrap}

/* ---- §3 Carly tier ladder (4-up — Free lives in its own callout below) ------
   Column arithmetic, written out so it can be re-derived if the container moves.
   `.w-container` is max-width 1200 with padding-inline clamp(20px, 4vw, 48px):
     ≥1200vw  content 1104 → (1104 − 3×22 gap)/4 = 259.5px card → 207px inner
     1024vw   pad 40.96    → content 942 → (942 − 66)/4      = 219.0px card → 167px inner
     1023vw   2-up          → content 941 → (941 − 22)/2      = 459.5px card
      768vw   pad 30.7      → content 707 → (707 − 22)/2      = 342.5px card
      600vw   pad 24        → content 552 → (552 − 22)/2      = 265.0px card
      599vw   1-up          → content 551 full width
   The old 5-up shipped at 169px inner, so 4-up at 1024 (167px) is the same tightness
   at the point where it hands over to 2-up — one width below the ladder's tested rung.
   Below 1024 the row is a clean 2×2 rather than the old orphan-and-centre 3+2. ---- */
.pr-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
@media(max-width:1023px){.pr-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.pr-tiers{grid-template-columns:minmax(0,1fr)}}

/* ---- GLASS SURFACE (2026-07-28) --------------------------------------------
   The designer bundle painted these cards a SOLID #e6e6ea, which meant the
   backdrop-filter sitting on them did precisely nothing — you can't blur a
   backdrop you've already covered. Restored to real translucency so the
   canonical DS7 glass reads: a white gradient fill (brighter at the top edge,
   like light catching a pane), a large blur+saturate, a bright top rim and a
   dark bottom rim to give the pane thickness, and a soft lift shadow.
   Glass is only visible if there's something behind it — see .pr-amb. */
.pr-tier{position:relative;z-index:1;display:flex;flex-direction:column;padding:32px 24px 24px;border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.58) 100%);
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(28,26,36,.05),
    0 18px 40px -22px rgba(28,26,36,.26);
  transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (min-width:901px){
  .pr-tier:hover{transform:translateY(-3px);border-color:rgba(152,135,244,.34);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1.5px 0 rgba(28,26,36,.05),
      0 26px 52px -24px rgba(28,26,36,.32),0 0 0 1px rgba(152,135,244,.10)}
}
@media(prefers-reduced-motion:reduce){.pr-tier{transition:none}}
.pr-tier__name{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--w-text)}
.pr-tier__for{margin:6px 0 0;font-style:italic;font-size:13px;line-height:1.45;color:var(--w-text-2);min-height:2.9em}
.pr-tier__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin-top:18px}
/* prices are numerals — lining + tabular so they sit on one baseline and share one advance
   width across the row, instead of the proportional figures jittering column to column */
.pr-tier__amt{font-size:clamp(30px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--w-text);
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.pr-tier__amt--cust{font-size:clamp(24px,1.9vw,28px);font-variant-numeric:normal}
.pr-tier__per{font-size:12.5px;color:var(--w-text-3)}
.pr-tier__band{display:block;margin-top:8px;font-family:var(--w-font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--w-brand)}
/* inner spec panel — reads as a RECESSED pane inside the glass, so it's inset-shadowed
   rather than lifted, and slightly cooler than the card fill to sit "under" it */
/* `flex:1` here made the recessed pane absorb every card's leftover height, so Entry,
   Starter and Enterprise each showed ~60px of hollow inset panel under three rows of
   specs — a lit, bordered container framing nothing. The pane now hugs its rows and the
   slack goes to the CTA's auto margin instead, where empty space reads as breathing room
   rather than as a component that failed to load. */
.pr-tier__caps{margin:auto 0 16px;padding:13px 12px 12px;flex:none;display:grid;gap:9px;align-content:start;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.65);border-radius:15px;
  box-shadow:inset 0 1px 2px rgba(28,26,36,.05),inset 0 -1px 0 rgba(255,255,255,.85)}
.pr-tier__caps>div{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.pr-tier__caps dt{min-width:0;font-size:11.5px;line-height:1.35;color:var(--w-text-3)}
.pr-tier__caps dd{margin:0;flex:none;font-size:12px;font-weight:700;line-height:1.35;text-align:right;color:var(--w-text);white-space:nowrap}
/* 1024–1199 is now the tightest 4-up case (167–207px inner) — trim the card gutters and the
   spec type there so the label can wrap and the value stays whole. Above 1200 there is room. */
/* Arithmetic for why this pane STACKS at 4-up:
     Growth, 1440vw → card 259 − 48 card pad − 20 pane pad = 191px inner
              its widest value "10,000 / mo" at 11.5px/700 ≈ 68px, gap 6
              → 117px left for "Opportunities worked", which needs ~118px at 11px.
     Growth, 1024vw → 219 − 36 − 20 = 163px inner → 89px left. Not close.
   So the label fit in Entry and Enterprise (short values) and wrapped in Starter and
   Growth — the same string set two ways across one row, which reads as a fault. There is
   no type size that fixes it at both 1440 and 1024. Stacking the pair removes the
   competition entirely and costs height the cards already have spare. Below 1024 the
   cards are 265px+ wide and the side-by-side form is better, so it stays there. */
@media(min-width:1024px){
  .pr-tier__caps{padding:14px 12px 13px;gap:11px}
  .pr-tier__caps>div{display:block}
  .pr-tier__caps dt{font-size:11px;line-height:1.3}
  .pr-tier__caps dd{margin-top:3px;font-size:13px;text-align:left}
}
@media(min-width:1024px) and (max-width:1199px){
  .pr-tier{padding:28px 18px 20px}
  .pr-tier__caps{padding:14px 11px 13px}
}
/* ---- CTAs TUNED TO THE PANE THEY SIT ON ------------------------------------
   Each button is glass from the same family as its card, not a foreign solid:
   same blur, same bright top rim, tinted from the card's own surface.
     · light pane  → smoked-charcoal glass (the contrast anchor)
     · smoked pane → brand-gradient glass with a lifted rim + purple glow
     · light pane, secondary → frosted white glass, rim only                  */
/* All four cards stretch to the tallest (Growth), so the shorter ones carry ~130px of
   slack. It pools ONCE, above the spec pane (`.pr-tier__caps{margin-top:auto}`), which
   groups spec + CTA as one block anchored to the card floor and leaves the air in the
   upper half where it reads as space around the price. Pooling it between the pane and
   the button instead left a gap that looked like a missing element. */
.pr-tier__cta{margin-top:0}
.pr-tier .w-btn--primary,.pr-plan .w-btn--primary{
  background:linear-gradient(180deg,rgba(41,38,52,.94) 0%,rgba(24,22,31,.96) 100%);
  border-color:rgba(255,255,255,.14);color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 1px rgba(0,0,0,.28),
    0 10px 22px -12px rgba(28,26,36,.45)}
.pr-tier .w-btn--primary:hover,.pr-plan .w-btn--primary:hover{
  transform:translateY(-3px);border-color:rgba(111,95,224,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 1px rgba(0,0,0,.28),
    0 20px 40px -12px rgba(111,95,224,.52),0 0 0 1px rgba(111,95,224,.22)}
/* secondary on a light pane — frosted, so Enterprise reads as available not disabled */
.pr-tier .w-btn--glass,.pr-plan .w-btn--glass{
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.66) 100%);
  border-color:rgba(255,255,255,.9);color:var(--w-text);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(28,26,36,.06),
    0 8px 20px -14px rgba(28,26,36,.30)}
.pr-tier .w-btn--glass:hover,.pr-plan .w-btn--glass:hover,.pr-free__cta:hover{
  transform:translateY(-3px);border-color:rgba(111,95,224,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 18px 36px -14px rgba(111,95,224,.42)}
.pr-tier__alt{display:block;margin-top:10px;text-align:center;font-size:13px;font-weight:700;
  color:var(--w-brand);text-decoration:none}
.pr-tier__alt:hover{text-decoration:underline}
/* featured tier — SMOKED glass. Same pane, tinted dark instead of light: translucent
   charcoal so the ambient wash still bleeds through, bright top rim, deeper lift. */
.pr-tier--pop{
  background:linear-gradient(165deg,rgba(28,26,36,.90) 0%,rgba(28,26,36,.97) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.20),inset 0 -1.5px 0 rgba(0,0,0,.30),
    0 28px 56px -22px rgba(28,26,36,.58)}
/* ---- GROWTH DOMINATES ------------------------------------------------------
   Dropping the fifth card bought 50px of width per column; spend some of it on
   making the recommendation unmistakable before a word is read. The pop card
   over-extends the row by 18px top and bottom and carries a larger numeral, so
   the verdict is legible from the shape of the row alone. Only while the row is
   a single line of four — in the 2×2 and 1-up stacks an over-extended card just
   breaks the rhythm, so it resets. */
@media(min-width:1024px){
  .pr-tier--pop{margin-block:-18px;padding:48px 24px 34px;z-index:2}
  .pr-tier--pop .pr-tier__amt{font-size:clamp(34px,3vw,44px)}
  .pr-tier--pop .pr-tier__name{font-size:21px}
}
@media(min-width:1024px) and (max-width:1199px){
  .pr-tier--pop{padding:44px 18px 30px}
}
.pr-tier--pop .pr-tier__name{color:#fff}
.pr-tier--pop .pr-tier__for{color:rgba(255,255,255,.72)}
.pr-tier--pop .pr-tier__amt{color:#fff}
.pr-tier--pop .pr-tier__per{color:rgba(255,255,255,.6)}
.pr-tier--pop .pr-tier__band{color:var(--w-purple)}
.pr-tier--pop .pr-tier__caps{
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.14) 100%);
  border-color:rgba(255,255,255,.20);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22),inset 0 -1px 0 rgba(255,255,255,.14)}
.pr-tier--pop .pr-tier__caps dt{color:rgba(255,255,255,.65)}
.pr-tier--pop .pr-tier__caps dd{color:#fff}
/* on the smoked pane the CTA inverts — brand glass, lit rim, purple bloom.
   NOT --w-grad-brand: that ramp runs --w-purple #9887f4 → --w-lavender #c18cff, which put
   white text at 2.95:1 and 2.48:1 — both below the 4.5:1 small-text bar (this button's face
   is 14px). --pr-grad-cta ends at --w-purple-ink #6f5fe0 (4.78:1) and starts at #4b3cc4
   (7.60:1), so every stop clears AA while still reading as the brand ramp. */
.pr-tier--pop .w-btn--primary,.pr-plan--pop .w-btn--primary{
  background:var(--pr-grad-cta);border-color:rgba(255,255,255,.28);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 1px rgba(0,0,0,.16),
    0 12px 28px -12px rgba(111,95,224,.55)}
.pr-tier--pop .w-btn--primary:hover,.pr-plan--pop .w-btn--primary:hover{
  transform:translateY(-3px);border-color:rgba(255,255,255,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 1px rgba(0,0,0,.16),
    0 20px 44px -12px rgba(111,95,224,.78)}
.pr-tier--pop .pr-tier__alt{color:var(--w-purple)}
@media(hover:hover) and (min-width:901px){
  .pr-tier--pop:hover{border-color:rgba(152,135,244,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 50px -24px rgba(28,26,36,.58),var(--w-glow-brand)}
}
.pr-tier__tag,.pr-plan__tag{background:var(--pr-grad-cta);color:#fff;border:0;
  box-shadow:0 8px 20px -8px rgba(75,60,196,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.pr-tier__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:3}
.pr-tiers__note{margin:34px auto 0;max-width:52ch;text-align:center;font-size:15px;color:var(--w-text-2)}

/* ---- §3b FREE CALLOUT ------------------------------------------------------
   Free left the card row so four plans could breathe, but it is still a real plan
   people choose, so it gets its own full-width band rather than a footnote: the
   numeral leads at display size, one line says exactly what you get, one CTA.
   Deliberately a RECESSED pane, not another lifted card — it sits under the row
   as a floor, so it never competes with Growth for the eye. */
.pr-free{position:relative;z-index:1;margin-top:26px;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,2.6vw,40px);
  padding:22px clamp(22px,2.4vw,34px);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.72) 100%);
  border:1px solid rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 3px rgba(28,26,36,.06),inset 0 -1.5px 0 rgba(255,255,255,.9),
    0 10px 26px -20px rgba(28,26,36,.22)}
.pr-free__price{display:flex;align-items:baseline;gap:7px;flex:none}
.pr-free__amt{font-size:clamp(38px,3.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--w-text);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.pr-free__per{font-size:13px;color:var(--w-text-3)}
/* hairline between the numeral and the claim — D79's separator, laid on its side.
   Pulled back HALF the grid gap, not all of it: at the full gap the rule landed hard
   against the "forever" suffix and read as a strikethrough. Half puts it on the gap's
   centreline with equal air either side. */
.pr-free__tx{position:relative;min-width:0;padding-left:calc(clamp(20px,2.6vw,40px) / 2);
  margin-left:calc(clamp(20px,2.6vw,40px) / -2)}
.pr-free__tx::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(28,26,36,.16) 22%,rgba(28,26,36,.16) 78%,transparent)}
.pr-free__name{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--w-text)}
.pr-free__band{font-family:var(--w-font-mono);font-size:11px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--w-brand)}
.pr-free__line{margin:7px 0 0;max-width:64ch;font-size:14.5px;line-height:1.55;color:var(--w-text-2)}
.pr-free__cta{flex:none;min-width:152px}
@media(max-width:900px){
  .pr-free{grid-template-columns:auto minmax(0,1fr);gap:18px clamp(18px,2.4vw,28px);row-gap:20px}
  .pr-free__cta{grid-column:1/-1;width:100%}
}
@media(max-width:599px){
  .pr-free{grid-template-columns:minmax(0,1fr);text-align:left;padding:22px 20px;row-gap:14px}
  .pr-free__tx{padding-left:0;margin-left:0}
  .pr-free__tx::before{display:none}
  .pr-free__cta{grid-column:auto}
}

/* ============================================================================
   SHINE — one at-rest move, one on-hover move. Nothing else.
   ----------------------------------------------------------------------------
   At rest: a specular sweep crosses the "Most popular" badge once every 6.5s.
   The keyframes park the highlight off the left edge for 74% of the cycle and
   cross in ~1.0s, so it reads as light catching an edge in peripheral vision
   rather than a marquee — stare at the badge and you mostly see nothing.
   On hover: the primary CTA gets a faster, brighter version of the same sweep,
   plus a 3px lift and a deepened brand-tinted shadow. No colour flip anywhere.
   Both are pure `transform` on a pseudo-element (compositor only, no layout),
   masked by `overflow:hidden` + `border-radius:inherit` so the highlight can
   never escape the element's own pill, and both are switched off wholesale
   under prefers-reduced-motion — a perpetual loop is the exact thing that
   setting exists to stop.
   ========================================================================== */
@keyframes pr-badge-sheen{
  0%,   74% {transform:translateX(-150%) skewX(-18deg)}
  90%, 100% {transform:translateX(150%)  skewX(-18deg)}
}
@keyframes pr-cta-sweep{
  from {transform:translateX(-165%) skewX(-18deg)}
  to   {transform:translateX(165%)  skewX(-18deg)}
}

.pr-tier__tag,.pr-plan__tag{overflow:hidden;isolation:isolate}
.pr-tier__tag::after,.pr-plan__tag::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.52) 50%,transparent 66%);
  transform:translateX(-150%) skewX(-18deg);will-change:transform;
  animation:pr-badge-sheen 6.5s cubic-bezier(.36,0,.24,1) infinite}

.pr-tier .w-btn--primary,.pr-plan .w-btn--primary,.pr-free__cta{overflow:hidden;isolation:isolate}
.pr-tier .w-btn--primary::after,.pr-plan .w-btn--primary::after,.pr-free__cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.44) 50%,transparent 64%);
  transform:translateX(-165%) skewX(-18deg);will-change:transform}
/* a white sweep is invisible on a frosted-white pane — the glass CTAs (Enterprise, Free)
   get the same move tinted in brand instead, so every card responds the same way */
.pr-tier .w-btn--glass::after,.pr-plan .w-btn--glass::after,.pr-free__cta::after{
  background:linear-gradient(100deg,transparent 36%,rgba(111,95,224,.26) 50%,transparent 64%)}
.pr-tier .w-btn--glass,.pr-plan .w-btn--glass{overflow:hidden;isolation:isolate}
.pr-tier .w-btn--glass::after,.pr-plan .w-btn--glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  transform:translateX(-165%) skewX(-18deg);will-change:transform}
@media(hover:hover){
  .pr-tier .w-btn--glass:hover::after,.pr-plan .w-btn--glass:hover::after{
    animation:pr-cta-sweep .72s cubic-bezier(.22,.61,.36,1) forwards}
}
.pr-tier .w-btn--glass:focus-visible::after,.pr-plan .w-btn--glass:focus-visible::after{
  animation:pr-cta-sweep .72s cubic-bezier(.22,.61,.36,1) forwards}
/* the button's own text/icon must ride above the highlight */
.pr-tier .w-btn>*,.pr-plan .w-btn>*,.pr-free__cta>*{position:relative;z-index:1}
@media(hover:hover){
  .pr-tier .w-btn--primary:hover::after,.pr-plan .w-btn--primary:hover::after,.pr-free__cta:hover::after{
    animation:pr-cta-sweep .72s cubic-bezier(.22,.61,.36,1) forwards}
}
/* keyboard parity — a focused CTA gets the same sweep a hovered one does */
.pr-tier .w-btn--primary:focus-visible::after,.pr-plan .w-btn--primary:focus-visible::after,
.pr-free__cta:focus-visible::after{animation:pr-cta-sweep .72s cubic-bezier(.22,.61,.36,1) forwards}

/* FOCUS RING. `.w-btn:focus-visible` in ds7 carries the ring in `box-shadow`, and every
   rule in this file that restyles `.pr-tier .w-btn--*` ties it on specificity (0,2,0) and
   wins on order — so these buttons shipped with no visible focus ring at all. Restated
   here at (0,3,0) with the brand-tinted lift retained underneath it. */
.pr-tier .w-btn:focus-visible,.pr-plan .w-btn:focus-visible,.pr-free .w-btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--w-card),0 0 0 5.5px var(--w-purple-ink),
    0 14px 30px -14px rgba(111,95,224,.5)}

@media(prefers-reduced-motion:reduce){
  .pr-tier__tag::after,.pr-plan__tag::after,
  .pr-tier .w-btn--primary::after,.pr-plan .w-btn--primary::after,
  .pr-tier .w-btn--glass::after,.pr-plan .w-btn--glass::after,.pr-free__cta::after{
    animation:none!important;display:none}
}

/* ---- §2 separator band (the firebreak between the two card rows) ---- */
.pr-band{position:relative;z-index:2;background:var(--w-charcoal);
  padding-block:clamp(44px,4vw,72px)!important;box-shadow:0 -18px 40px -20px rgba(0,0,0,.35)}
.pr-band__lead{margin:0;font-family:var(--w-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.pr-band__logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;margin-top:26px}
.pr-band__logos span{font-size:clamp(15px,1.5vw,19px);font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.78)}

/* ---- §3 plan columns ---- */
.pr-plans{align-items:stretch}
.pr-plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:34px 26px 26px}
.pr-plan__head,.pr-plan__price{text-align:center}
.pr-plan__list{text-align:left}
@media(min-width:1025px){.pr-plan{min-height:600px}}
@media(min-width:769px) and (max-width:1024px){.pr-plan{min-height:520px}}
/* same glass pane as the Carly ladder, at plan-card scale */
.pr-plan{position:relative;z-index:1;border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.58) 100%);
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(28,26,36,.05),
    0 18px 40px -22px rgba(28,26,36,.26);
  transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1)}
.pr-plan__list{transition:background .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
/* hover (pointer devices, desktop): premium + SUBTLE — a quiet 3px rise, soft shadow bloom, gentle brand warm-up */
@media(hover:hover) and (min-width:901px){
  .pr-plan:not(.pr-plan--pop):hover{transform:translateY(-3px);border-color:rgba(152,135,244,.34);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1.5px 0 rgba(28,26,36,.05),
      0 26px 52px -24px rgba(28,26,36,.32),0 0 0 1px rgba(152,135,244,.10)}
  .pr-plan--pop:hover,.pr-tier--pop:hover{transform:translateY(-3px);border-color:rgba(152,135,244,.40);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.26),inset 0 -1.5px 0 rgba(0,0,0,.30),
      0 32px 62px -24px rgba(28,26,36,.62)}
}
@media(prefers-reduced-motion:reduce){.pr-plan,.pr-plan__list{transition:none}}
.pr-plan__list{border-radius:17px;padding:18px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 2px rgba(28,26,36,.05),inset 0 -1px 0 rgba(255,255,255,.85)}
/* smoked-glass featured plan — mirrors .pr-tier--pop exactly */
.pr-plan--pop{
  background:linear-gradient(165deg,rgba(28,26,36,.90) 0%,rgba(28,26,36,.97) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.20),inset 0 -1.5px 0 rgba(0,0,0,.30),
    0 28px 56px -22px rgba(28,26,36,.58)}
.pr-plan--pop .pr-plan__name{color:#fff}
.pr-plan--pop .pr-plan__sub{color:rgba(255,255,255,.55)}
.pr-plan--pop .pr-plan__for{color:rgba(255,255,255,.72)}
.pr-plan--pop .pr-plan__list{
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.14) 100%);
  border-color:rgba(255,255,255,.20);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22),inset 0 -1px 0 rgba(255,255,255,.14)}
.pr-plan--pop .pr-plan__list li{color:rgba(255,255,255,.85)}
.pr-plan--pop .pr-plan__list .w-icon{color:var(--w-purple)}
.pr-plan--pop .pr-plan__list li strong{color:#fff}
.pr-plan--pop .w-btn--primary{background:var(--pr-grad-cta);border-color:rgba(255,255,255,.28);color:#fff}
.pr-plan--pop .pr-tier__alt{color:var(--w-purple)}
.pr-plan__name{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0}
.pr-plan__sub{display:block;margin-top:2px;font-family:var(--w-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-text-3)}
.pr-plan__for{margin:10px 0 0;font-style:italic;font-size:15px;line-height:1.55;color:var(--w-text-2)}
.pr-plan__list{list-style:none;margin:0;display:grid;gap:12px;flex:1;align-content:start}
.pr-plan__list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--w-text-2)}
.pr-plan__list .w-icon{flex:none;width:17px;height:17px;margin-top:2px;color:var(--w-brand)}
.pr-plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:3}

/* cross-product reference — low, quiet, never a button */
.pr-cross{margin:44px auto 0;max-width:64ch;text-align:center;font-size:15.5px;line-height:1.65;color:var(--w-text-2)}
.pr-cross a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--w-brand);text-decoration:none;white-space:nowrap}
.pr-cross a:hover{text-decoration:underline}
.pr-cross .w-icon{width:15px;height:15px}

/* ---- §4 comparison table ---- */
.pr-table{padding:10px 26px;overflow:hidden}
.pr-table__row{display:grid;grid-template-columns:minmax(0,1fr) 108px 122px 108px;align-items:center;gap:10px;padding:15px 0;border-top:1px solid var(--w-line-soft)}
.pr-table__row:first-child{border-top:0}
.pr-table__row--head .pr-table__cap,.pr-table__row--head .pr-table__col{font-family:var(--w-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-text-3)}
.pr-table__row--group{display:block;padding:22px 0 8px;border-top:1px solid var(--w-line)}
.pr-table__grp{font-family:var(--w-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--w-brand)}
.pr-table__cap{font-size:14.5px;font-weight:600;color:var(--w-text);min-width:0}
.pr-table__col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:13.5px;color:var(--w-text-2)}
.pr-table__col--pop{background:var(--w-brand-soft);border-radius:10px;align-self:stretch;justify-content:center;padding-block:6px}
.pr-table__row--head .pr-table__col--pop{color:var(--w-brand)}
.pr-ck{width:17px;height:17px;color:var(--w-icon-ink)}
.pr-table__col--pop .pr-ck{color:var(--w-brand)}
.pr-none{color:var(--w-text-3);font-size:14px}
.pr-note{font-style:italic;font-size:12px;color:var(--w-text-3)}

/* ---- §5 proof split ---- */
.pr-proof{align-items:center;gap:clamp(28px,4vw,64px)}
.pr-proof__stat{display:flex;flex-direction:column;gap:26px}
.pr-stat-num{font-size:clamp(84px,9vw,150px);font-weight:800;letter-spacing:-.04em;line-height:.95;color:var(--w-text)}
.pr-stat-unit{font-size:.5em;font-weight:700;vertical-align:baseline;margin-left:2px;color:var(--w-text)}
.pr-stat-label{display:block;margin-top:10px;max-width:34ch;font-size:17px;line-height:1.5;color:var(--w-text-2)}
.pr-roi-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--w-brand);text-decoration:none}
.pr-roi-link .w-icon{width:16px;height:16px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.pr-roi-link:hover .w-icon{transform:translateX(4px)}
.pr-quote-stack{position:relative;padding:30px 76px}
@media(min-width:901px) and (max-width:1199px){.pr-quote-stack{padding:26px 48px}}
.pr-qside{position:absolute;top:50%;z-index:0;width:min(56%,340px);margin:0;padding:20px 20px 16px;
  display:flex;flex-direction:column;gap:12px;background:var(--w-card);border:1px solid var(--w-line-soft);
  border-radius:20px;box-shadow:var(--w-shadow-lg);pointer-events:none}
.pr-qside--l{left:0;transform:translateY(-50%) rotate(-5deg)}
.pr-qside--r{right:0;transform:translateY(-50%) rotate(5deg)}
.pr-qside__q{margin:0;font-size:13px;line-height:1.55;color:var(--w-text-2)}
.pr-qside__who{display:flex;align-items:center;gap:9px}
.pr-qside__who--rev{flex-direction:row-reverse;text-align:right}
.pr-qside__av{flex:none;width:32px;height:32px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(28,26,36,.08)}
.pr-qside__id{display:flex;flex-direction:column;line-height:1.3}
.pr-qside__id b{font-size:12.5px;color:var(--w-text)}
.pr-qside__id span{font-size:10.5px;color:var(--w-text-3)}
@media(max-width:900px){.pr-qside{display:none}.pr-quote-stack{padding:0}}
.pr-quote{position:relative;z-index:1;margin:0;padding:34px 32px 28px;display:flex;flex-direction:column;gap:18px}
.pr-quote__mark{width:30px;height:30px;color:var(--w-brand);opacity:.85}
.pr-quote__q{margin:0;font-size:18px;line-height:1.6;font-weight:500}
.pr-quote__who{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-quote__av{flex:none;width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.pr-quote__id{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.pr-quote__id b{font-size:14.5px}
.pr-quote__id span{font-size:12.5px;opacity:.7}

/* ---- §6 FAQ accordion ---- */
.pr-faq{display:grid;gap:12px;max-width:720px;margin-inline:auto}
.pr-faq__item{background:var(--w-card);border:1px solid var(--w-line-soft);border-radius:16px;box-shadow:var(--w-shadow-sm);overflow:hidden}
.pr-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:19px 22px;font-weight:700;font-size:15.5px;color:var(--w-text)}
.pr-faq__item summary::-webkit-details-marker{display:none}
.pr-faq__chev{flex:none;width:18px;height:18px;color:var(--w-text-3);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pr-faq__item[open] .pr-faq__chev{transform:rotate(180deg)}
.pr-faq__item p{margin:0;padding:0 22px 20px;font-size:15px;line-height:1.6;color:var(--w-text-2);max-width:60ch}

/* ---- §7 final CTA (dark punch on the grayscale nebula) ---- */
.pr-cta{position:relative;overflow:hidden;background:var(--w-bg);z-index:2;box-shadow:0 -24px 50px -14px rgba(0,0,0,.4)}
.pr-cta__bg{position:absolute;inset:0;z-index:0;background:var(--w-bg-deep) center/cover no-repeat;background-image:var(--w-img-pr-ctabg);filter:grayscale(1) brightness(.55)}
.pr-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.52),rgba(10,10,10,.66))}
.pr-cta .w-container{position:relative;z-index:1}
/* theme-stable dark band (matches W-BOOK-DEMO .bd-alt--bg technique): the section keeps its
   dark nebula in BOTH themes, so the band + its contents pin to on-dark values */
.pr-cta .w-cta-band{background:rgba(28,26,36,.42);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 44px -22px rgba(28,26,36,.5)}
.pr-cta .w-cta-band__title{color:#fff}
.pr-cta .w-cta-band__title .w-accent{color:var(--w-purple)}
.pr-cta .w-btn--primary{background:var(--pr-grad-cta);border-color:rgba(255,255,255,.24);color:#fff}
.pr-cta .w-btn--glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pr-cta .w-btn--glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}

/* ---- responsive ---- */
@media(max-width:1024px){
  .pr-plan{padding:26px 22px 22px}
}
@media(max-width:768px){
  .pr-table{padding:6px 16px}
  .pr-table__row{grid-template-columns:minmax(0,1fr) 60px 68px 60px;gap:6px;padding:13px 0}
  .pr-table__cap{font-size:13px}
  .pr-table__col{font-size:11.5px}
  .pr-table__row--head .pr-table__cap,.pr-table__row--head .pr-table__col{font-size:9.5px;letter-spacing:.08em}
  .pr-table__grp{font-size:10px}
  .pr-note{font-size:10.5px}
  .pr-quote{padding:26px 22px 22px}
  .pr-quote__q{font-size:16px}
}
@media(max-width:540px){
  .pr-stat-label{font-size:15.5px}
  .pr-tier__for{min-height:0}
  .pr-band__logos{gap:12px 24px}
  .pr-cross{margin-top:34px;font-size:14.5px}
  .pr-cross a{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .pr-roi-link .w-icon,.pr-faq__chev{transition:none}
}