/* ── Trellis /pricing ─────────────────────────────────────────────────────────
   Page-scoped stylesheet. Every selector is `pr-*` and/or nested under
   body.pricing-page, so nothing here can reach the other landing-skin pages.

   Deliberately a SEPARATE file rather than rules appended to landing.css:
   `?v=` is the only cache key for /assets/* behind a 1-year Cloudflare TTL, and
   landing.css is referenced by 10 pages — touching it obliges a coordinated
   10-file bump that has been forgotten in prod twice. This file owns its own key.
   Brand tokens (--primary/--accent/--dark/fonts) are inherited from landing.css.

   Type scale + colours are taken from the Figma frame (2754:624) rather than
   eyeballed: section eyebrows are Poppins Bold 12/1.2px-tracked cyan, H2s are
   ExtraBold 36/40, body copy is 15/24.375 in #62748e. Getting these wrong is what
   made the first pass read as "close but off".
   ────────────────────────────────────────────────────────────────────────────── */

body.pricing-page {
    --pr-ink: #0f172b;
    /* headings */
    --pr-body: #62748e;
    /* body copy */
    --pr-list: #314158;
    /* list items */
    --pr-slate: #1d293d;
    --pr-muted: #90a1b9;
    --pr-tab: #45556c;
    --pr-hair: #e2e8f0;
    /* card borders */
    --pr-rule: #f1f5f9;
    /* dividers + tab track */
    --pr-wash: #f8fafc;
    /* section washes */
    --pr-mint: #ecfdf5;
    /* icon tiles + ticks */
    --pr-mint-strong: #d0fae5;
    --pr-mint-ink: #007a55;
    --pr-green: #009966;
    /* icon strokes + step dots */
    --pr-ease: cubic-bezier(.2, .7, .2, 1);
}

body.pricing-page .pr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Mark the current page in the shared nav (landing.css has no `.active` rule). */
body.pricing-page .lp-header__nav a.active,
body.pricing-page #mobileNav a.active {
    color: var(--primary);
    font-weight: 700;
}

/* ── Shared section furniture ─────────────────────────────────────────────── */
body.pricing-page .pr-section__head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0 24px;
}

body.pricing-page .pr-eyebrow {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary);
}

body.pricing-page .pr-h2 {
    margin-top: 12px;
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.4px;
    color: var(--pr-ink);
}

body.pricing-page .pr-section__lead {
    margin: 12px auto 0;
    max-width: 576px;
    font-family: var(--font-poppins);
    font-size: 15px;
    line-height: 24.375px;
    color: var(--pr-body);
}

body.pricing-page .pr-strike {
    text-decoration: line-through;
    color: var(--pr-muted);
    font-weight: 500;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
body.pricing-page .pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 14px 24px;
    border-radius: 14px;
    /* transform + shadow only — never a layout property, so hover cannot reflow. */
    transition: background-color .18s ease, transform .18s var(--pr-ease), box-shadow .18s ease;
}

body.pricing-page .pr-btn--pill {
    font-size: 16px;
    padding: 10px 30px;
    border-radius: 30px;
}

body.pricing-page .pr-btn__arrow {
    width: 18px;
    height: 15px;
    flex: 0 0 18px;
    transition: transform .22s var(--pr-ease);
}

body.pricing-page .pr-btn:hover .pr-btn__arrow {
    transform: translateX(3px);
}

body.pricing-page .pr-btn--accent {
    background: var(--accent);
    color: #000;
}

/* Shift to the sibling lime rather than dropping opacity: a translucent lime
   loses AA contrast against the near-black label. */
body.pricing-page .pr-btn--accent:hover {
    background: var(--accent-alt);
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .35);
}

body.pricing-page .pr-btn--white {
    background: #fff;
    color: #000;
}

body.pricing-page .pr-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(0, 18, 27, .35);
}

body.pricing-page .pr-btn--ghost {
    background: #fff;
    color: var(--pr-ink);
    border: 1.5px solid var(--pr-hair);
}

body.pricing-page .pr-btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

body.pricing-page .pr-btn--outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .6);
}

body.pricing-page .pr-btn--outline-light:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    transform: translateY(-2px);
}

body.pricing-page .pr-btn:active {
    transform: translateY(0);
}

body.pricing-page .pr-btn:focus-visible,
body.pricing-page .pr-cadence__opt:focus-visible,
body.pricing-page .pr-wif__tab:focus-visible,
body.pricing-page .pr-faq__q:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ── Hero — full-bleed brand cyan ─────────────────────────────────────────── */
body.pricing-page .pr-hero {
    position: relative;
    overflow: hidden;
    background: var(--primary);
    padding: 64px 24px 72px;
    text-align: center;
}

/* Depth without a visible gradient seam: one very soft light pool behind the
   headline so the flat cyan does not read as a printed block. */
body.pricing-page .pr-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 150%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .18), transparent 62%);
    pointer-events: none;
}

body.pricing-page .pr-hero__inner {
    position: relative;
    max-width: 768px;
    margin: 0 auto;
}

body.pricing-page .pr-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #000;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    padding: 6px 12px;
    border-radius: 999px;
}

body.pricing-page .pr-hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #000;
    opacity: .72;
}

body.pricing-page .pr-hero__title {
    margin-top: 18px;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 56px;
    line-height: 60px;
    letter-spacing: -1px;
    color: #fff;
}

body.pricing-page .pr-hero__lead {
    margin: 24px auto 0;
    max-width: 622px;
    font-family: var(--font-poppins);
    font-size: 16px;
    line-height: 26px;
    color: #fff;
}

body.pricing-page .pr-hero__cta {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

body.pricing-page .pr-trust {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

body.pricing-page .pr-trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}

body.pricing-page .pr-trust__ico {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--accent);
}

/* One orchestrated entrance beats scattered micro-animations: the hero reveals
   top-to-bottom in a single 0.5s cascade, then never moves again. */
@keyframes pr-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.pricing-page .pr-hero__badge,
body.pricing-page .pr-hero__title,
body.pricing-page .pr-hero__lead,
body.pricing-page .pr-hero__cta,
body.pricing-page .pr-trust {
    animation: pr-rise .55s var(--pr-ease) both;
}

body.pricing-page .pr-hero__title {
    animation-delay: .06s;
}

body.pricing-page .pr-hero__lead {
    animation-delay: .12s;
}

body.pricing-page .pr-hero__cta {
    animation-delay: .18s;
}

body.pricing-page .pr-trust {
    animation-delay: .24s;
}

/* ── Who It's For ─────────────────────────────────────────────────────────── */
body.pricing-page .pr-wif {
    background: #fff;
    padding: 64px 24px;
}

/* Visually hidden but FOCUSABLE (1px, not display:none) so the native radio group
   keeps arrow-key navigation and :focus-visible works. */
body.pricing-page .pr-wif-radio,
body.pricing-page .pr-cadence-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.pricing-page .pr-wif__tabs {
    display: flex;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 6px;
    background: var(--pr-rule);
    border-radius: 999px;
    flex-wrap: wrap;
    justify-content: center;
}

body.pricing-page .pr-wif__tab {
    cursor: pointer;
    user-select: none;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-tab);
    padding: 8px 20px;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

body.pricing-page .pr-wif__tab:hover {
    color: var(--pr-ink);
}

body.pricing-page #pr-aud-smb:checked~.pr-wif__tabs label[for="pr-aud-smb"],
body.pricing-page #pr-aud-startup:checked~.pr-wif__tabs label[for="pr-aud-startup"],
body.pricing-page #pr-aud-established:checked~.pr-wif__tabs label[for="pr-aud-established"] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 3px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
}

body.pricing-page .pr-wif__stack {
    max-width: 1152px;
    margin: 0 auto;
}

body.pricing-page .pr-wif__panel {
    display: none;
    background: #fff;
    border: 1.5px solid var(--pr-hair);
    border-radius: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    overflow: hidden;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.pricing-page #pr-aud-smb:checked~.pr-wif__stack .pr-wif__panel[data-audience="smb"],
body.pricing-page #pr-aud-startup:checked~.pr-wif__stack .pr-wif__panel[data-audience="startup"],
body.pricing-page #pr-aud-established:checked~.pr-wif__stack .pr-wif__panel[data-audience="established"] {
    display: grid;
    animation: pr-fade .32s var(--pr-ease) both;
}

/* Opacity-only crossfade on tab switch — no transform, so nothing shifts. */
@keyframes pr-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.pricing-page .pr-wif__left {
    padding: 40px;
    border-right: 1.5px solid var(--pr-rule);
}

body.pricing-page .pr-wif__headline {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 30px;
    line-height: 37.5px;
    color: var(--pr-ink);
}

body.pricing-page .pr-wif__accent {
    color: var(--primary);
}

body.pricing-page .pr-wif__blurb {
    margin-top: 16px;
    font-family: var(--font-poppins);
    font-size: 15px;
    line-height: 24.375px;
    color: var(--pr-body);
}

body.pricing-page .pr-wif__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.pricing-page .pr-wif__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-list);
}

body.pricing-page .pr-wif__tick {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--pr-mint);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pricing-page .pr-wif__tick svg {
    width: 12px;
    height: 12px;
}

body.pricing-page .pr-wif__right {
    padding: 40px;
    background: rgba(248, 250, 252, .6);
}

body.pricing-page .pr-wif__label {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pr-muted);
}

body.pricing-page .pr-wif__rows {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.pricing-page .pr-wif__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1.5px solid var(--pr-hair);
    border-radius: 14px;
    padding: 13.5px 17.5px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
    transition: transform .18s var(--pr-ease), box-shadow .18s ease, border-color .18s ease;
}

body.pricing-page .pr-wif__row:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: 0 8px 16px -8px rgba(17, 182, 226, .35);
}

body.pricing-page .pr-wif__team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-slate);
}

body.pricing-page .pr-wif__free {
    background: var(--pr-mint-strong);
    color: var(--pr-mint-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    padding: 1.5px 8px;
    border-radius: 999px;
}

body.pricing-page .pr-wif__cost {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.pricing-page .pr-wif__footnote {
    margin-top: 24px;
    font-family: var(--font-poppins);
    font-size: 12px;
    line-height: 19.5px;
    color: var(--pr-muted);
}

/* ── Plans + cadence switch ───────────────────────────────────────────────── */
body.pricing-page .pr-plans-section {
    background: var(--pr-wash);
    padding: 64px 24px 72px;
}

body.pricing-page .pr-cadence {
    display: flex;
    gap: 8px;
    width: max-content;
    margin: 0 auto 40px;
    padding: 6px;
    background: var(--pr-rule);
    border-radius: 999px;
}

body.pricing-page .pr-cadence__opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-tab);
    padding: 8px 20px;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

body.pricing-page .pr-cadence__opt:hover {
    color: var(--pr-ink);
}

body.pricing-page .pr-cadence__save {
    background: var(--accent);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

/* The switch itself. `~` reaches forward from the checked radio to the pills and
   the grid, which is why the inputs must precede both in the markup. */
body.pricing-page #pr-cad-monthly:checked~.pr-cadence label[for="pr-cad-monthly"],
body.pricing-page #pr-cad-annual:checked~.pr-cadence label[for="pr-cad-annual"] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 3px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
}

/* Monthly is the server default, correct on frame one and with JS disabled. */
body.pricing-page .pr-price[data-cadence="annual"] {
    display: none;
}

body.pricing-page #pr-cad-annual:checked~.pr-plans .pr-price[data-cadence="annual"] {
    display: block;
    animation: pr-fade .28s var(--pr-ease) both;
}

body.pricing-page #pr-cad-annual:checked~.pr-plans .pr-price[data-cadence="monthly"] {
    display: none;
}

body.pricing-page .pr-cadence-radio:focus-visible~.pr-cadence,
body.pricing-page .pr-wif-radio:focus-visible~.pr-wif__tabs {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

body.pricing-page .pr-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 337px));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

body.pricing-page .pr-card-wrap {
    display: flex;
}

body.pricing-page .pr-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--pr-hair);
    border-radius: 16px;
    box-shadow: 0 4px 3px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
    /* No `will-change`: this page is ~5,600px tall and permanent compositor
       layers on every card cost more than the animation saves. */
    transition: transform .24s var(--pr-ease), box-shadow .24s ease;
}

body.pricing-page .pr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -20px rgba(15, 23, 43, .28);
}

/* 40px slot above every card so all three card BODIES top-align exactly as in the
   design; only the featured card fills it with a badge. */
body.pricing-page .pr-card__badge-slot {
    height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: -40px;
}

body.pricing-page .pr-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #000;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .2px;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 7.5px rgba(0, 0, 0, .1), 0 4px 3px rgba(0, 0, 0, .1);
}

body.pricing-page .pr-card__badge-ico {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
}

body.pricing-page .pr-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

body.pricing-page .pr-card--featured {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 25px 25px rgba(15, 23, 43, .3);
}

body.pricing-page .pr-card__eyebrow {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary);
}

body.pricing-page .pr-card--starter .pr-card__eyebrow {
    color: #000;
}

body.pricing-page .pr-card__headline {
    margin-top: 16px;
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    color: #000;
}

/* ── ZERO LAYOUT SHIFT ACROSS THE CADENCE TOGGLE ──
   The annual block can be one line taller than the monthly one (struck list price
   + "% off" badge), and the grid stretches every card to the tallest row, so a
   naive swap would jump the whole row. This min-height is sized to the TALLER
   (promo) state: 48px price line + 20px unit line + 8px gap = 76px, +24px for the
   wrapped badge row = 100px. Re-measure if the price type scale changes. */
body.pricing-page .pr-card__price {
    margin-top: 20px;
    min-height: 100px;
}

body.pricing-page .pr-price__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

body.pricing-page .pr-price__now {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 48px;
    line-height: 48px;
    color: #000;
    font-variant-numeric: tabular-nums;
}

/* "Coming soon" is prose, not a figure — drop it to a readable size so it never
   masquerades as a price. */
body.pricing-page .pr-price__now--soon {
    font-size: 26px;
    line-height: 34px;
    color: var(--pr-body);
}

body.pricing-page .pr-price__list {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 16px;
    color: var(--pr-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

body.pricing-page .pr-price__badge {
    background: var(--primary);
    color: #fff;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}

body.pricing-page .pr-card--featured .pr-price__badge {
    background: #000;
    color: var(--accent);
}

body.pricing-page .pr-price__unit {
    display: block;
    margin-top: 4px;
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 20px;
    color: #000;
}

body.pricing-page .pr-card__descriptor {
    margin-top: 12px;
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-body);
}

body.pricing-page .pr-card--featured .pr-card__descriptor {
    color: #000;
}

body.pricing-page .pr-card__footnote {
    margin-top: 6px;
    font-family: var(--font-poppins);
    font-size: 12px;
    line-height: 16px;
    color: #000;
}

body.pricing-page .pr-card__divider {
    height: 1px;
    background: var(--pr-rule);
    margin: 24px 0;
}

body.pricing-page .pr-card--featured .pr-card__divider {
    background: rgba(0, 0, 0, .12);
}

body.pricing-page .pr-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Push the CTA to the card bottom so all three CTAs align. */
    flex: 1;
}

body.pricing-page .pr-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-list);
}

body.pricing-page .pr-card--featured .pr-card__features li {
    color: #000;
}

body.pricing-page .pr-card__check {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 3px;
    color: var(--primary);
}

body.pricing-page .pr-card--featured .pr-card__check {
    color: #000;
}

body.pricing-page .pr-card__cta {
    width: 100%;
    margin-top: auto;
}

/* ── How pricing works ───────────────────────────────────────────────────── */
body.pricing-page .pr-guide {
    background: #fff;
    padding: 72px 24px;
}

body.pricing-page .pr-guide__list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1024px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.pricing-page .pr-guide__item {
    background: #fff;
    border: 1.5px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
    transition: transform .22s var(--pr-ease), box-shadow .22s ease;
}

body.pricing-page .pr-guide__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 43, .25);
}

body.pricing-page .pr-guide__title {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--pr-ink);
}

body.pricing-page .pr-guide__body {
    margin-top: 8px;
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 22.75px;
    color: var(--pr-body);
}

body.pricing-page .pr-guide__body strong {
    color: var(--pr-ink);
    font-weight: 700;
}

body.pricing-page .pr-guide__example {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--pr-wash);
    border-radius: 10px;
    font-family: var(--font-poppins);
    font-size: 12.5px;
    line-height: 18px;
    color: var(--pr-list);
    font-variant-numeric: tabular-nums;
}

/* ── Comparison table ────────────────────────────────────────────────────── */
body.pricing-page .pr-compare {
    background: var(--pr-wash);
    padding: 72px 24px;
    /* Skip the ~70-cell render until it scrolls into view. Safe here: nothing
       overflows this section's box. NOT applied to the plans section, where the
       badge straddles the card's top edge and containment would clip it. */
    content-visibility: auto;
    contain-intrinsic-size: 1100px;
}

body.pricing-page .pr-compare__scroll {
    max-width: 1024px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1.5px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
}

body.pricing-page .pr-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

body.pricing-page .pr-table th,
body.pricing-page .pr-table td {
    padding: 12px 16px;
    text-align: center;
    font-family: var(--font-poppins);
    font-size: 13px;
}

body.pricing-page .pr-table thead th {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pr-muted);
    border-bottom: 1.5px solid var(--pr-rule);
    white-space: nowrap;
}

body.pricing-page .pr-table thead th:first-child,
body.pricing-page .pr-table tbody th[scope="row"] {
    text-align: left;
}

body.pricing-page .pr-table tbody th[scope="row"] {
    font-weight: 500;
    font-size: 13px;
    color: var(--pr-list);
}

/* Zebra striping — the Figma's rhythm, and it materially helps scanning 17 rows. */
body.pricing-page .pr-table tbody tr:nth-child(odd) {
    background: var(--pr-wash);
}

body.pricing-page .pr-table tbody tr {
    transition: background-color .15s ease;
}

body.pricing-page .pr-table tbody tr:hover {
    background: #f0fbff;
}

body.pricing-page .pr-table__col--featured {
    background: rgba(206, 254, 5, .10);
}

body.pricing-page .pr-table thead .pr-table__col--featured {
    background: rgba(206, 254, 5, .28);
    color: var(--pr-ink);
}

body.pricing-page .pr-table__popular {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--primary);
}

body.pricing-page .pr-table__yes {
    width: 17px;
    height: 17px;
    color: var(--primary);
}

body.pricing-page .pr-table__no {
    width: 17px;
    height: 17px;
    color: #cbd5e1;
}

body.pricing-page .pr-table__text {
    font-weight: 600;
    color: var(--pr-ink);
}

/* ── Quick setup ─────────────────────────────────────────────────────────── */
body.pricing-page .pr-setup {
    background: #fff;
    padding: 72px 24px;
    content-visibility: auto;
    contain-intrinsic-size: 560px;
}

/* Numbered rail: the connector line runs BEHIND the dots, in its own row, so it
   never crosses a card border (how the Figma draws it). */
body.pricing-page .pr-rail {
    position: relative;
    max-width: 1024px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    height: 40px;
}

body.pricing-page .pr-rail__line {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--pr-mint-strong), var(--pr-green), var(--pr-mint-strong));
    transform: translateY(-50%);
}

body.pricing-page .pr-rail__dot {
    position: relative;
    justify-self: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--pr-green);
    color: #fff;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px #fff, 0 4px 10px -4px rgba(0, 153, 102, .6);
}

body.pricing-page .pr-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1024px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

body.pricing-page .pr-step {
    text-align: center;
    background: #fff;
    border: 1.5px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
    transition: transform .22s var(--pr-ease), box-shadow .22s ease;
}

body.pricing-page .pr-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 43, .25);
}

body.pricing-page .pr-step__label {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--primary);
}

body.pricing-page .pr-step__title {
    margin-top: 4px;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--pr-ink);
}

body.pricing-page .pr-step__body {
    margin-top: 8px;
    font-family: var(--font-poppins);
    font-size: 13px;
    line-height: 20px;
    color: var(--pr-body);
}

/* ── Why teams choose Trellis ────────────────────────────────────────────── */
body.pricing-page .pr-why {
    background: var(--pr-wash);
    padding: 64px 24px;
    content-visibility: auto;
    contain-intrinsic-size: 480px;
}

body.pricing-page .pr-why .pr-h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
}

body.pricing-page .pr-why .pr-section__lead {
    max-width: 512px;
    font-size: 16px;
    line-height: 24px;
    margin-top: 8px;
}

body.pricing-page .pr-why__grid {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

body.pricing-page .pr-why__card {
    background: #fff;
    border: 1.5px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 25.5px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
    transition: transform .22s var(--pr-ease), box-shadow .22s ease;
}

body.pricing-page .pr-why__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -18px rgba(15, 23, 43, .25);
}

body.pricing-page .pr-why__ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--pr-mint);
    color: var(--pr-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .22s var(--pr-ease);
}

body.pricing-page .pr-why__card:hover .pr-why__ico {
    transform: scale(1.07) rotate(-3deg);
}

body.pricing-page .pr-why__ico svg {
    width: 20px;
    height: 20px;
}

body.pricing-page .pr-why__title {
    margin-top: 16px;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--pr-ink);
}

body.pricing-page .pr-why__body {
    margin-top: 8px;
    font-family: var(--font-poppins);
    font-size: 14px;
    line-height: 22.75px;
    color: var(--pr-body);
}

/* ── FAQ (native <details>, so it works with JS disabled) ────────────────── */
body.pricing-page .pr-faq {
    background: #fff;
    padding: 72px 24px;
    content-visibility: auto;
    contain-intrinsic-size: 700px;
}

body.pricing-page .pr-faq__list {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.pricing-page .pr-faq__item {
    background: #fff;
    border-radius: 20px;
    box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, .08);
    transition: box-shadow .2s ease;
}

body.pricing-page .pr-faq__item[open],
body.pricing-page .pr-faq__item:hover {
    box-shadow: -1px 1px 12px 2px rgba(17, 182, 226, .18);
}

body.pricing-page .pr-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 22px 28px;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 17px;
    color: #000;
    list-style: none;
}

body.pricing-page .pr-faq__q::-webkit-details-marker {
    display: none;
}

body.pricing-page .pr-faq__chevron {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--pr-body);
    transition: transform .28s var(--pr-ease), color .2s ease;
}

body.pricing-page .pr-faq__item[open] .pr-faq__chevron {
    transform: rotate(180deg);
    color: var(--primary);
}

body.pricing-page .pr-faq__a {
    padding: 0 28px 22px;
    font-family: var(--font-poppins);
    font-size: 15px;
    line-height: 24px;
    color: var(--pr-body);
    animation: pr-fade .25s var(--pr-ease) both;
}

body.pricing-page .pr-faq__more {
    max-width: 1024px;
    margin: 28px auto 0;
    text-align: center;
    font-family: var(--font-poppins);
    font-size: 14px;
    color: var(--pr-body);
}

body.pricing-page .pr-faq__more a {
    color: var(--primary);
    font-weight: 600;
}

body.pricing-page .pr-faq__more a:hover {
    text-decoration: underline;
}

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
body.pricing-page .pr-cta {
    position: relative;
    overflow: hidden;
    background: var(--primary);
    padding: 72px 24px;
    text-align: center;
}

body.pricing-page .pr-cta::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% -10%;
    height: 140%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .16), transparent 60%);
    pointer-events: none;
}

body.pricing-page .pr-cta__title,
body.pricing-page .pr-cta__lead,
body.pricing-page .pr-cta__buttons {
    position: relative;
}

body.pricing-page .pr-cta__title {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #fff;
}

body.pricing-page .pr-cta__lead {
    margin-top: 16px;
    font-family: var(--font-poppins);
    font-size: 17px;
    color: rgba(255, 255, 255, .94);
}

body.pricing-page .pr-cta__buttons {
    margin-top: 28px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    body.pricing-page .pr-steps,
    body.pricing-page .pr-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The rail only makes sense as a single 4-across row. */
    body.pricing-page .pr-rail {
        display: none;
    }

    body.pricing-page .pr-plans {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }

    body.pricing-page .pr-hero__title {
        font-size: 44px;
        line-height: 50px;
    }
}

@media (max-width: 768px) {
    body.pricing-page .pr-hero {
        padding: 48px 20px 56px;
    }

    body.pricing-page .pr-hero__title {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.6px;
    }

    body.pricing-page .pr-hero__lead {
        font-size: 15px;
        line-height: 24px;
    }

    body.pricing-page .pr-h2 {
        font-size: 26px;
        line-height: 32px;
    }

    body.pricing-page .pr-why .pr-h2 {
        font-size: 24px;
        line-height: 30px;
    }

    body.pricing-page .pr-cta__title {
        font-size: 28px;
    }

    body.pricing-page .pr-plans,
    body.pricing-page .pr-guide__list,
    body.pricing-page .pr-steps,
    body.pricing-page .pr-why__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.pricing-page .pr-plans {
        max-width: 420px;
        margin: 0 auto;
    }

    /* One column: the annual block no longer has to match a sibling's height, so
       release some of the reserved space rather than leaving a gap under every price. */
    body.pricing-page .pr-card__price {
        min-height: 92px;
    }

    body.pricing-page .pr-price__now {
        font-size: 40px;
        line-height: 44px;
    }

    /* Stack the two-column audience card and drop the vertical rule. */
    body.pricing-page .pr-wif__panel {
        grid-template-columns: minmax(0, 1fr);
    }

    body.pricing-page .pr-wif__left {
        border-right: 0;
        border-bottom: 1.5px solid var(--pr-rule);
        padding: 28px 24px;
    }

    body.pricing-page .pr-wif__right {
        padding: 28px 24px;
    }

    body.pricing-page .pr-wif__headline {
        font-size: 24px;
        line-height: 31px;
    }

    body.pricing-page .pr-wif__tabs {
        width: 100%;
        border-radius: 20px;
    }

    body.pricing-page .pr-wif__tab {
        flex: 1 1 auto;
        text-align: center;
        /* Touch target >= 44px. */
        padding: 12px 16px;
    }

    body.pricing-page .pr-cadence__opt {
        padding: 12px 20px;
    }

    body.pricing-page .pr-faq__q {
        padding: 18px 20px;
        font-size: 16px;
    }

    body.pricing-page .pr-faq__a {
        padding: 0 20px 20px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   landing.css ships NO prefers-reduced-motion rules, so .lp-fade-in currently
   animates for everyone. Scoped to this page so it cannot perturb the other 10
   landing-skin pages; hoisting it into landing.css is a follow-up that costs a
   coordinated ?v= bump. The FAQ still opens — instantly rather than not at all. */
@media (prefers-reduced-motion: reduce) {

    body.pricing-page .lp-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    body.pricing-page *,
    body.pricing-page *::before,
    body.pricing-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}