/* /pricing — Terminal Light, the "Final mockup" page of the "Pro Page
   Redesign" design canvas. Loaded after subscriptions.css, which still owns
   the .sub wrapper, the band pill, the walkthrough frame and the FAQ.
   Tokens only, except the dark-mode drawing, which pins both themes. The
   drawings (.pr-art) are decorative and aria-hidden: grey bars stand in for
   text so nothing invents a headline or a score. Motion: the feature cards
   lift on hover and their drawings act out the feature once (pr-a-* hooks);
   .pr-rv blocks fade up on entry (pricing-motion.js). Both are off for
   reduced motion. */

.pr [id] { scroll-margin-top: calc(var(--tl-topbar-h) + 16px); }
.pr ul.pr-checks { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pr .pr-checks li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tl-ink); list-style: none; }
.pr-checks .pr-check { flex: none; margin-top: 1px; color: var(--tl-ink-60); }

/* ---- band: copy beside the Pro offer card ---- */
.pr-band.tl-band { padding-top: 28px; }
.pr-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 48px; padding-bottom: 26px; }
/* The copy column is a size container so the statement title scales with the
   room beside the offer card (the shell sidebar takes 232px from 1280px up):
   "College Football Hub" stays on one line until the column is narrow. */
.pr-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; padding-top: 30px; container-type: inline-size; }
.pr-hero-copy .sub-pill { align-self: flex-start; }
.pr .pr-h1 { margin-top: 20px; font-size: clamp(36px, 4.6vw, 72px); font-size: clamp(32px, 9.4cqi, 80px); font-weight: 500; line-height: 0.98; letter-spacing: -0.05em; color: var(--tl-ink); }
.pr .pr-dek { max-width: 520px; margin-top: 26px; font-size: 17px; line-height: 1.5; color: var(--tl-ink-65); }

.pr-offer.tl-card { flex: 0 1 372px; min-width: 280px; border-color: transparent; box-shadow: var(--tl-pick-shadow); }
.pr-offer-body { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.pr .tl-seg.pr-period { display: flex; width: auto; }
.pr .tl-seg.pr-period > button { flex: 1 1 0; height: 30px; }
.pr-offer-prices { min-height: 82px; }
.pr-price { display: flex; align-items: baseline; gap: 8px; font-size: 56px; font-weight: 300; letter-spacing: -2.4px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tl-ink); }
.pr-price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--tl-ink-60); }
.pr-price-note { display: block; margin-top: 10px; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-60); }
.pr .pr-price-na { font-size: 13px; line-height: 1.5; color: var(--tl-down); }
.pr .pr-offer-cta { width: 100%; height: 44px; justify-content: center; font-size: 14px; }
.pr-offer-foot.tl-card-foot { justify-content: space-between; flex-wrap: wrap; color: var(--tl-ink-60); }
.pr .pr-linkbtn { width: auto; height: auto; padding: 0; border: 0; background: transparent; color: var(--tl-ink); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.pr .pr-linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- sections ---- */
.pr-body.tl-body { padding-top: 10px; }
.pr .pr-section-title { padding-top: 40px; flex-wrap: wrap; }
.pr .pr-section-title .tl-card-sub { color: var(--tl-ink-60); }

/* ---- feature cards: drawing on top, copy below; Home runs wide. They lift on hover. ---- */
.pr-features { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.pr-feature.tl-card { flex: 1 1 460px; display: flex; flex-direction: column; transition: transform 0.3s var(--tl-ease), box-shadow 0.3s var(--tl-ease), border-color 0.3s var(--tl-ease); }
.pr-feature.tl-card:hover { transform: translateY(-2px); box-shadow: var(--tl-card-shadow-hover); border-color: var(--tl-line-20); }
.pr-feature-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 20px; }
.pr-feature-copy .tl-kicker { color: var(--tl-ink-60); }
.pr-feature-copy h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.45px; line-height: 1.2; color: var(--tl-ink); }
.pr-feature-copy p { font-size: 13.5px; line-height: 1.55; color: var(--tl-ink-65); }
.pr-feature-copy .tl-card-link { align-self: flex-start; margin-top: auto; padding-top: 8px; font-weight: 500; color: var(--tl-ink); }
.pr-feature.tl-card.is-wide { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.pr-feature.is-wide .pr-feature-copy { flex: 1 1 340px; min-width: 0; gap: 10px; padding: 28px 26px 24px; }
.pr-feature.is-wide h3 { font-size: 28px; letter-spacing: -0.8px; line-height: 1.12; }
.pr-feature.is-wide p { max-width: 440px; font-size: 14.5px; }
.pr-feature.is-wide .pr-checks { margin-top: 10px; }
.pr-feature.is-wide .tl-card-link { padding-top: 16px; font-size: 13.5px; }

/* ---- drawings: primitives ---- */
.pr-art { height: 240px; margin: 8px; padding: 18px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 12px; border-radius: 8px; border: 1px solid var(--tl-line-05); background: var(--tl-fill-03); }
.pr-art.is-center { justify-content: center; padding: 18px 22px; }
.pr-art i { display: block; height: 6px; border-radius: 4px; background: var(--tl-line-15); }
.pr-art i.is-strong { background: var(--tl-line-20); }
.pr-art i.is-soft { background: var(--tl-line-10); }
.pr-art .is-grow { flex: 1; }
.pr-art .spacer { flex: 1; }
.pr-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-stack { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pr-stack.is-tight { gap: 6px; }
.pr-mono { font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; color: var(--tl-ink-50); }
.pr-mono.is-ink { font-size: 10.5px; color: var(--tl-ink); }
.pr-mono.is-60 { color: var(--tl-ink-60); }
.pr-num { flex: none; font-family: var(--tl-mono); font-size: 10px; color: var(--tl-ink-40); }
.pr-num.is-ink { color: var(--tl-ink); }
.pr-num.is-score { font-size: 12px; font-weight: 600; }
.pr-crest { flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--tl-logo-chip); }
.pr-crest.is-14 { width: 14px; height: 14px; }
.pr-crest.is-16 { width: 16px; height: 16px; }
.pr-crest.is-28 { width: 28px; height: 28px; }
.pr-crest.is-40 { width: 40px; height: 40px; }
.pr-surface { border-radius: 8px; border: 1px solid var(--tl-line-07); background: var(--tl-control); }
.pr-label { font-size: 12.5px; font-weight: 600; color: var(--tl-ink); }
.pr-ink-pill { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--tl-r-pill); background: var(--tl-ink); color: var(--tl-on-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* A drawn segmented control: equal slots, a thumb under slot --at (it slides on hover), the current label in ink. */
.pr-seg { --slot: 26px; position: relative; flex: none; display: inline-flex; padding: 2px; border-radius: var(--tl-r-chip); background: var(--tl-fill-05); }
.pr-seg.is-words { --slot: 46px; }
.pr-seg > span { position: relative; width: var(--slot); height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 500; color: var(--tl-ink-55); }
.pr-seg > .is-cur { font-weight: 600; color: var(--tl-ink); }
.pr-seg > .pr-seg-thumb { position: absolute; top: 2px; left: calc(2px + var(--at, 0) * var(--slot)); border-radius: var(--tl-r-seg-in); background: var(--tl-control); box-shadow: var(--tl-seg-on-shadow); }

/* the wide card's drawing sits beside its copy and grows with it */
.pr-feature.is-wide .pr-art { flex: 1.3 1 460px; min-width: 0; height: auto; min-height: 320px; padding: 22px; }

/* 01 · Home: Standard Home's own modules (services/pricing_preview.py) in Home's grid,
   laid out at 1/--z of the panel's width, scaled back down and cropped with a fade.
   A zero flex basis keeps the full-size layout from setting the panel's height. */
.pr-home { --z: 0.6; position: relative; flex: 1 1 0; min-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.pr-home-zoom { width: calc(100% / var(--z)); transform: scale(var(--z)); transform-origin: 0 0; }
/* Home's own `.hm-page img` rule: lazy-load.css fills every lazy image dark, which shows behind transparent crests. */
.pr-home img { background: transparent; }

/* 02 · the Brief: a sheet cut off by the bottom of the panel */
.pr-art.is-sheet { padding: 22px 24px 0; align-items: center; gap: 0; }
.pr-sheet { width: 100%; max-width: 540px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 4px; border-radius: 10px 10px 0 0; background: var(--tl-control); box-shadow: var(--tl-float-shadow); }
.pr-sheet img { width: 18px; height: 18px; border-radius: 5px; }
.pr-sheet .pr-stack.is-head { gap: 8px; }
.pr-sheet .pr-stack.is-head i { height: 13px; background: var(--tl-line-20); }
.pr-sheet .pr-stack i { height: 7px; }
.pr-cite { flex: none; padding: 1px 4px; border-radius: 3px; background: var(--tl-fill-06); font-family: var(--tl-mono); font-size: 9px; font-weight: 600; color: var(--tl-ink-60); }
.pr-sheet-teams { padding-top: 12px; border-top: 1px solid var(--tl-line-06); }
.pr-team { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.pr-team + .pr-team { border-top: 1px solid var(--tl-line-05); }
.pr-sheet .pr-team i:first-child { height: 8px; }

/* 01 · Home layouts: Scores across two columns, AP Top 25 down the right */
.pr-widgets { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-widgets.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-widgets > .pr-surface { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 7px; }
.pr-widgets > .is-wide { grid-column: span 2; }
.pr-widgets > .is-tall { grid-row: span 2; gap: 9px; }
.pr-add { display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px dashed var(--tl-line-18); font-size: 11.5px; font-weight: 500; color: var(--tl-ink-50); }

/* 03 · your teams */
.pr-list { overflow: hidden; }
.pr-list-head { display: flex; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--tl-line-06); font-size: 12.5px; font-weight: 600; color: var(--tl-ink); }
.pr-list-head .spacer { flex: 1; }
.pr-list-row { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 14px; }
.pr-list-row + .pr-list-row { border-top: 1px solid var(--tl-line-05); }
.pr-list-row.is-me { background: var(--tl-fill-045); }
.pr-list-row .pr-num { font-size: 11px; }
.pr-art .pr-list-row i { height: 7px; }
.pr-list-row .tl-tag { height: 18px; padding: 0 7px; font-size: 9.5px; }

/* 04 · Pro Feed */
.pr-search { flex: none; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 11px; overflow: hidden; white-space: nowrap; border-radius: var(--tl-r-btn); border: 1px solid var(--tl-line-10); background: var(--tl-control); font-size: 12.5px; color: var(--tl-ink-45); }
.pr-search svg { flex: none; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chips > span { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: var(--tl-r-chip); border: 1px solid var(--tl-line-10); font-size: 11.5px; color: var(--tl-ink-70); }
.pr-chips > .is-on { border-color: var(--tl-ink); background: var(--tl-ink); color: var(--tl-on-ink); font-weight: 600; }
.pr-chips > .is-dashed { border-style: dashed; border-color: var(--tl-line-18); color: var(--tl-ink-50); }
.pr-result { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; }
.pr-result + .pr-result { border-top: 1px solid var(--tl-line-05); }
.pr-result .pr-mono { font-size: 9px; }
.pr-thumb { display: block; height: 28px; overflow: hidden; border-radius: 4px; background: var(--tl-fill-06); }

/* 05 · player coverage */
.pr-row.is-player { gap: 12px; }
.pr-art i.pr-tall { height: 9px; }
.pr-mini-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--tl-line-07); }
.pr-mini-tabs > span { margin-bottom: -1px; padding-bottom: 8px; border-bottom: 2px solid transparent; font-size: 12px; font-weight: 500; color: var(--tl-ink-50); }
.pr-mini-tabs > .is-on { border-bottom-color: var(--tl-ink); color: var(--tl-ink); }
.pr-stack.is-items { gap: 0; margin-top: -12px; }
.pr-stack.is-items > div { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; }
.pr-stack.is-items > div + div { border-top: 1px solid var(--tl-line-05); }

/* 06 · game day */
.pr-scoreline { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.pr-moments { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; }
.pr-moments > .pr-stack { padding: 0 0 8px 10px; border-left: 1px solid var(--tl-line-15); }

/* 07 · dark mode: each half pins one theme whatever the page theme is, so
   these mirror tl/tokens.css (ink rgb, page, card, crest chip). */
.pr-themes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-theme.is-light { --pr-ink: 16, 20, 24; --pr-page: #f4f5f7; --pr-card: #fafafb; --pr-chip: #eceef1; }
.pr-theme.is-dark { --pr-ink: 242, 244, 246; --pr-page: #14171b; --pr-card: #25282c; --pr-chip: rgba(255, 255, 255, 0.1); }
.pr-theme { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid rgba(var(--pr-ink), 0.07); background: var(--pr-page); color: rgb(var(--pr-ink)); }
.pr-theme .pr-mono { color: rgba(var(--pr-ink), 0.5); }
.pr-theme-card { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 9px 10px; border-radius: 7px; border: 1px solid rgba(var(--pr-ink), 0.07); background: var(--pr-card); }
.pr-theme .pr-num { color: rgba(var(--pr-ink), 0.4); }
.pr-theme .pr-num.is-ink { color: rgb(var(--pr-ink)); }
.pr-theme .pr-crest { background: var(--pr-chip); }
.pr-theme i { background: rgba(var(--pr-ink), 0.15); }
.pr-theme i.is-strong { background: rgba(var(--pr-ink), 0.2); }

/* ---- Free vs Pro table (Pico resets: its th/td borders, padding and fills) ---- */
.pr-compare-scroll { overflow-x: auto; }
.pr .pr-table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.pr .pr-table :is(th, td) { padding: 12px 18px; border: 0; background: transparent; color: var(--tl-ink); font-size: 14px; font-weight: 400; text-align: left; vertical-align: middle; white-space: normal; }
.pr .pr-table tbody tr + tr { border-top: 1px solid var(--tl-line-05); }
.pr .pr-table tbody tr:last-child :is(th, td) { padding-bottom: 16px; }
.pr .pr-table thead th { padding: 20px 18px 16px; vertical-align: top; }
.pr .pr-table thead .pr-col-feature { width: 50%; vertical-align: bottom; }
.pr .pr-table thead .pr-col-feature .tl-kicker { color: var(--tl-ink-60); }
.pr .pr-table .pr-col-plan { width: 25%; }
.pr .pr-table .is-pro { background: var(--tl-fill-045); border-left: 1px solid var(--tl-line-06); }
.pr .pr-table .pr-group th { padding: 9px 18px; border-top: 1px solid var(--tl-line-06); border-bottom: 1px solid var(--tl-line-06); background: var(--tl-fill-025); font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-60); }
.pr .pr-table td.is-dim { color: var(--tl-ink-65); }
.pr .pr-table td.is-strong { font-weight: 600; }
.pr-table .pr-check { display: block; }
.pr-no { color: var(--tl-ink-35); }
.pr-plan-name { font-size: 15px; font-weight: 650; color: var(--tl-ink); }
.pr-plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; font-size: 30px; font-weight: 300; letter-spacing: -1.2px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tl-ink); }
.pr-plan-price small { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--tl-ink-60); }
.pr-plan-note { margin-top: 6px; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-60); }
.pr .pr-plan-btn { width: 100%; height: 36px; margin-top: 14px; box-sizing: border-box; }

/* ---- Creator strip ---- */
.pr-creator.tl-card { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 20px; }
.pr-creator-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pr-creator-title { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--tl-ink); }
.pr-creator-title span { font-weight: 500; color: var(--tl-ink-60); }
.pr-creator-copy p { font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-65); }
.pr .pr-creator-btn { height: 36px; }
.pr .pr-fine { margin: 12px 2px 0; font-size: 12px; line-height: 1.5; color: var(--tl-ink-60); }
.pr .sub-video { margin-top: 28px; }

/* ---- closing band ---- */
.pr-closer.tl-band { padding: 76px 28px 84px; border-top: 1px solid var(--tl-line-07); border-bottom: 0; text-align: center; }
.pr-closer > canvas.tl-field { opacity: var(--tl-field-opacity-edges); }
.pr-closer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pr-closer-inner img { width: 48px; height: 48px; border-radius: 12px; }
.pr-closer-inner h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 500; letter-spacing: -1px; line-height: 1.15; color: var(--tl-ink); }
.pr-closer-inner p { max-width: 520px; font-size: 14.5px; line-height: 1.5; color: var(--tl-ink-65); }
.pr-closer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.pr-closer-actions > :is(a, button) { height: 42px; padding: 0 18px; }
.pr-closer-actions .tl-btn-outline-lg { background: var(--tl-card); }

/* ---- live data (pricing-showcase.js): crest and text slots; the bar inside a slot is its fallback ---- */
.pr-art { color: var(--tl-ink); }
.pr-crest > img { width: 80%; height: 80%; object-fit: contain; }
.pr-crest.is-face > img, .pr-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-fill { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 500; line-height: 1.25; }
.pr-list-row .pr-fill, .pr-team .pr-fill, .pr-scoreline .pr-fill { font-size: 12.5px; font-weight: 600; }
.pr-result .pr-fill { font-size: 12px; }
.pr-fill.is-name { font-size: 14px; font-weight: 650; letter-spacing: -0.2px; }
.pr-fill.is-meta { font-size: 11.5px; font-weight: 400; color: var(--tl-ink-60); }
.pr-theme .pr-fill { font-size: 10.5px; }
.pr-mono .tl-pro-tag { margin-left: 4px; }

/* ---- hover: each drawing acts out its feature once (hover or keyboard focus), then rests as drawn ---- */
.pr-seg > .pr-seg-thumb { width: var(--slot); height: 22px; }
@keyframes pr-k-type { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pr-k-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes pr-k-left { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: none; } }
@keyframes pr-k-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes pr-k-down { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: none; } }
@keyframes pr-k-bob { 0%, 100% { translate: none; } 40% { translate: 0 -4px; } }
@keyframes pr-k-seg { 0% { translate: 0; } 18%, 40% { translate: var(--slot); } 58%, 80% { translate: calc(2 * var(--slot)); } 100% { translate: 0; } }
@keyframes pr-k-seg-in { 0%, 15% { translate: calc(-2 * var(--slot)); } 35%, 50% { translate: calc(-1 * var(--slot)); } 70%, 100% { translate: 0; } }
@keyframes pr-k-chip { 0%, 100% { border-color: var(--tl-line-10); background: transparent; color: var(--tl-ink-70); } 25%, 55% { border-color: var(--tl-ink); background: var(--tl-ink); color: var(--tl-on-ink); } }
@keyframes pr-k-chip-on { 0%, 100% { background: var(--tl-ink); color: var(--tl-on-ink); } 25%, 60% { background: transparent; color: var(--tl-ink-70); } }
@keyframes pr-k-tab1 { 0%, 15% { border-bottom-color: var(--tl-ink); color: var(--tl-ink); } 25%, 80% { border-bottom-color: transparent; color: var(--tl-ink-50); } 90%, 100% { border-bottom-color: var(--tl-ink); color: var(--tl-ink); } }
@keyframes pr-k-tab2 { 0%, 15%, 60%, 100% { border-bottom-color: transparent; color: var(--tl-ink-50); } 25%, 50% { border-bottom-color: var(--tl-ink); color: var(--tl-ink); } }
@keyframes pr-k-tab3 { 0%, 50%, 90%, 100% { border-bottom-color: transparent; color: var(--tl-ink-50); } 60%, 80% { border-bottom-color: var(--tl-ink); color: var(--tl-ink); } }
@keyframes pr-k-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tl-live) 55%, transparent); } to { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tl-live) 0%, transparent); } }
@keyframes pr-k-dim-late { 0%, 50% { opacity: 1; } 65%, 85% { opacity: 0.35; } 100% { opacity: 1; } }
@keyframes pr-k-dim-early { 0% { opacity: 1; } 10%, 50% { opacity: 0.35; } 65%, 100% { opacity: 1; } }
.pr-feature:is(:hover, :focus-within) .pr-a-thumb { animation: pr-k-seg 1.6s var(--tl-ease) both; }
.pr-feature:is(:hover, :focus-within) .pr-a-tile { animation: pr-k-bob 0.6s var(--tl-ease) both; animation-delay: calc(var(--i, 0) * 70ms + 250ms); }
.pr-feature:is(:hover, :focus-within) .pr-a-add { animation: pr-k-pop 0.5s var(--tl-ease) 0.95s both; }
.pr-feature:is(:hover, :focus-within) .pr-a-type { transform-origin: left center; animation: pr-k-type 0.45s var(--tl-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pr-feature:is(:hover, :focus-within) .pr-a-pop { animation: pr-k-pop 0.4s var(--tl-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pr-feature:is(:hover, :focus-within) .pr-a-slide { animation: pr-k-left 0.45s var(--tl-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pr-feature:is(:hover, :focus-within) .pr-a-up { animation: pr-k-up 0.45s var(--tl-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pr-feature:is(:hover, :focus-within) .pr-a-chip { animation: pr-k-chip 0.5s ease both; animation-delay: calc(var(--i, 0) * 160ms); }
.pr-feature:is(:hover, :focus-within) .pr-a-chip-on { animation: pr-k-chip-on 0.9s ease both; }
.pr-feature:is(:hover, :focus-within) .pr-a-tab1 { animation: pr-k-tab1 1.8s ease both; }
.pr-feature:is(:hover, :focus-within) .pr-a-tab2 { animation: pr-k-tab2 1.8s ease both; }
.pr-feature:is(:hover, :focus-within) .pr-a-tab3 { animation: pr-k-tab3 1.8s ease both; }
.pr-feature:is(:hover, :focus-within) .pr-a-pulse { animation: pr-k-pulse 0.9s ease-out 2; }
.pr-feature:is(:hover, :focus-within) .pr-a-new { animation: pr-k-down 0.5s var(--tl-ease) 0.25s both; }
.pr-feature:is(:hover, :focus-within) .pr-a-dm-thumb { animation: pr-k-seg-in 1.4s var(--tl-ease) both; }
.pr-feature:is(:hover, :focus-within) .pr-a-dm-light { animation: pr-k-dim-late 1.4s ease both; }
.pr-feature:is(:hover, :focus-within) .pr-a-dm-dark { animation: pr-k-dim-early 1.4s ease both; }

/* ---- entrance (pricing-motion.js): .pr-rv blocks fade up on entry, staggered by --rv-d ---- */
.pr.is-motion .pr-rv { opacity: 0; translate: 0 14px; transition: opacity 0.6s var(--tl-ease) var(--rv-d, 0ms), translate 0.6s var(--tl-ease) var(--rv-d, 0ms); }
.pr.is-motion .pr-feature.pr-rv { transition: opacity 0.6s var(--tl-ease) var(--rv-d, 0ms), translate 0.6s var(--tl-ease) var(--rv-d, 0ms), transform 0.3s var(--tl-ease), box-shadow 0.3s var(--tl-ease), border-color 0.3s var(--tl-ease); }
.pr.is-motion .pr-rv.is-in { opacity: 1; translate: none; }
/* Failsafe: if pricing-motion.js never runs (.is-ready never set), show everything after 2.5s. */
.pr.is-motion:not(.is-ready) .pr-rv { animation: pr-k-show 0s linear 2.5s forwards; }
@keyframes pr-k-show { to { opacity: 1; translate: none; } }

@media (prefers-reduced-motion: reduce) {
  .pr-feature.tl-card { transition: none; }
  .pr-feature.tl-card:hover { transform: none; }
  .pr-feature [class*="pr-a-"] { animation: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .pr-hero-copy { padding-top: 8px; }
  .pr .pr-h1 { margin-top: 14px; }
  .pr .pr-dek { margin-top: 18px; }
  .pr-band.tl-band { padding-top: 20px; }
  .pr-hero { gap: 22px; padding-bottom: 20px; }
  .pr-offer.tl-card { flex-basis: 100%; min-width: 0; }
  .pr .pr-dek { font-size: 15.5px; }
  .pr-feature-copy { padding: 10px 16px 18px; }
  .pr-feature.is-wide .pr-feature-copy { padding: 20px 16px 18px; }
  .pr-feature.is-wide h3 { font-size: 24px; }
  .pr-feature.is-wide .pr-art { padding: 14px; }
  .pr-widgets.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 78px; }
  .pr-art.is-sheet { padding: 18px 14px 0; }
  .pr-sheet { padding: 16px 14px 2px; }
  .pr .pr-table :is(th, td) { padding-left: 14px; padding-right: 14px; }
  .pr-creator.tl-card { padding: 16px 14px; }
  .pr-closer.tl-band { padding: 56px 16px 64px; }
}