/* pricing.css — pricing page content only (shell/tokens come from shell.css + tokens.css) */
@font-face { font-family: 'Mango California'; src: url('../../assets/fonts/mango-california.woff2') format('woff2'), url('../../assets/fonts/mango-california.woff') format('woff'); font-display: swap; }

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../../assets/fonts/inter-600.woff2') format('woff2'); }
.pr-page { --pr-red: var(--vx-red, #bf0016); --pr-line: #e9e9e9; background: var(--vx-page, #fff); }
.pr-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(16px, 3vw, 40px) 110px; font-family: 'Inter', 'Poppins', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.pr-title { font-family: 'Mango California', 'Poppins', serif; font-weight: 400; font-size: clamp(51px, 5.5vw, 80px); line-height: 1.08; text-align: center; color: #111; }
.pr-note { text-align: center; margin: 10px auto 0; font-size: 14px; color: var(--pr-red); font-weight: 500; }

/* toggle: rounded RECTANGLE (not a pill), like the reference.
 * Animation (matches the reference site): on load the red indicator starts as a thin bar at the active tab's left
 * edge and grows to the full tab width while the label fades in on top; on tab change it slides to the new tab.
 * Position/width come from --pr-px / --pr-pw, set by pricing-page.js. */
.pr-toggle { --pr-px: 0px; --pr-pw: 0px; position: relative; display: flex; width: max-content; max-width: 100%; margin: clamp(28px, 3.4vw, 48px) auto 0; padding: 6px; gap: 4px; background: #f8f8f8; border-radius: 16px; }
.pr-pill { position: absolute; top: 6px; left: 0; height: 36px; width: var(--pr-pw); transform: translate3d(var(--pr-px), 0, 0); background: var(--pr-red); border-radius: 12px; pointer-events: none; will-change: transform, width;
  transition: transform .42s cubic-bezier(.65, 0, .25, 1), width .42s cubic-bezier(.65, 0, .25, 1); }
.pr-toggle.is-pre .pr-pill { width: 12px; transition-duration: 0s; }           /* thin starting bar */
.pr-toggle.is-in .pr-pill { transition: transform .42s cubic-bezier(.65, 0, .25, 1), width .6s cubic-bezier(.22, 1, .36, 1); }
.pr-tab { position: relative; z-index: 1; padding: 0 22px; height: 36px; display: inline-flex; align-items: center; border-radius: 12px; font-size: 14px; font-weight: 600; color: #7d7d7d; transition: color .25s; white-space: nowrap; }
.pr-tab:hover { color: #333; }
.pr-tab[aria-selected="true"] { color: #fff; transition: color .3s ease .22s; }
.pr-toggle.is-pre .pr-tab[aria-selected="true"] { color: transparent; transition: none; }
@media (prefers-reduced-motion: reduce) { .pr-pill, .pr-tab, .pr-tab[aria-selected="true"] { transition: none !important; } }

/* plans card */
.pr-card { margin-top: clamp(30px, 3.6vw, 52px); border: 1px solid #e8e8e8; border-radius: 22px; background: #fff; overflow: hidden; }
.pr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 15px 28px; border-bottom: 1px solid #e8e8e8; font-size: 14px; color: #111; }
.pr-bar b { font-weight: 600; }
.pr-bar a { color: var(--pr-red); font-weight: 500; font-style: italic; }
.pr-bar a:hover { text-decoration: underline; }

.pr-cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.pr-col { padding: 22px 21px 28px; border-left: 1px solid #e8e8e8; display: flex; flex-direction: column; min-width: 0; }
.pr-col:first-child { border-left: 0; }
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.pr-name { font-size: clamp(17px, 1.3vw, 19px); font-weight: 400; color: #000; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.pr-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; color: var(--pr-red); background: rgba(191,0,22,.08); padding: 5px 10px; border-radius: 999px; line-height: 1; }
.pr-mrp { color: #8a8a8a; text-decoration: line-through; font-size: 14px; white-space: nowrap; }
.pr-price { margin-top: 8px; font-size: clamp(30px, 2.5vw, 36px); font-weight: 400; color: #000; line-height: 1.2; letter-spacing: -.01em; }
.pr-buy { margin-top: 36px; align-self: flex-start; min-width: 108px; height: 32px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid #000; color: #000; background: #fff; font-size: 15.5px; font-weight: 400; transition: background .15s; }
.pr-buy:hover { background: #f4f4f4; }
.pr-col.is-hl .pr-buy { background: var(--pr-red); border-color: var(--pr-red); color: #fff; }
.pr-col.is-hl .pr-buy:hover { background: var(--vx-red-dk, #8f0016); border-color: var(--vx-red-dk, #8f0016); }
.pr-buy[data-vx-pricing-locked="1"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.pr-feat { margin-top: 30px; padding-top: 22px; border-top: 1px solid #ebebeb; display: flex; flex-direction: column; gap: 12px; }
.pr-fh { font-size: 15.5px; font-weight: 400; color: #000; line-height: 24px; }
.pr-fl { list-style: none; }
.pr-fl li { font-size: 15.5px; line-height: 24px; color: #757575; }
.pr-fl li::before { content: '- '; }

@media (max-width: 1180px) {
  .pr-cols { grid-template-columns: repeat(2, 1fr); }
  .pr-col:nth-child(3) { border-left: 0; }
  .pr-col:nth-child(n+3) { border-top: 1px solid #e8e8e8; }
}
@media (max-width: 640px) {
  .pr-cols { grid-template-columns: 1fr; }
  .pr-col { border-left: 0; }
  .pr-col:nth-child(n+2) { border-top: 1px solid #e8e8e8; }
  .pr-bar { flex-direction: column; align-items: flex-start; }
}

/* individual packs: mirrors the reference "Mock Packs" cards */
.pr-packs { margin-top: clamp(56px, 6.5vw, 96px); }
.pr-h2 { font-family: 'Mango California', 'Poppins', serif; font-weight: 400; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.1; color: #111; }
.pr-desc { margin-top: 10px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; color: #8a8a8a; }
.pr-pgrid { margin-top: clamp(24px, 2.8vw, 38px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pr-pack { border: 1px solid #e8e8e8; border-radius: 24px; background: #fff; padding: 36px 36px 38px; display: flex; flex-direction: column; }
.pr-pt { font-size: clamp(22px, 1.9vw, 27px); font-weight: 400; color: #000; line-height: 1.2; }
.pr-pn { margin-top: 4px; font-size: 13.5px; color: #9a9a9a; }
.pr-po { margin-top: 24px; display: flex; flex-direction: column; }
.pr-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 30px; padding: 0; font-size: clamp(16px, 1.3vw, 18px); font-weight: 400; color: #000; text-align: left; }
.pr-op { display: flex; align-items: center; gap: 9px; }
.pr-op s { color: #9d9d9d; font-size: .8em; }
.pr-op b { font-weight: 400; }
.pr-op svg { color: #000; transition: color .15s, translate var(--vx-arr-dur, .28s) var(--vx-arr-ease, cubic-bezier(.22, 1, .36, 1)); }   /* arrow travel itself comes from arrow-motion.css */
.pr-opt:hover .pr-op svg { color: var(--pr-red); }
.pr-opt[data-vx-pricing-locked="1"] { opacity: .45; pointer-events: none; }
@media (max-width: 1180px) { .pr-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pr-pgrid { grid-template-columns: 1fr; } .pr-pack { padding: 28px; } }

/* ── Wider layout (use more of the free side space) ───────────────────────────────────────────
 * The content column was capped at 1280px with generous side padding, leaving big empty bands on wide screens.
 * - .pr-wrap: wider cap + a smaller side padding (18-36px)  -> the individual-pack cards (and everything else) STRETCH wider.
 * - Main plan card: on wide screens its contents are also made a little LARGER (type, padding, button), headings untouched.
 * Pack cards keep their own size (padding/type unchanged) — they only get wider. */
.pr-wrap { max-width: 1560px; padding-left: clamp(18px, 2.4vw, 36px); padding-right: clamp(18px, 2.4vw, 36px); }   /* side gap: was 28px max (too tight), original 40px max */
@media (min-width: 1300px) {
  .pr-bar { padding: 18px 34px; font-size: 15px; }
  .pr-col { padding: 28px 28px 36px; }
  .pr-name { font-size: clamp(19px, 1.45vw, 22px); }
  .pr-badge { font-size: 11px; padding: 5px 11px; }
  .pr-mrp { font-size: 15px; }
  .pr-price { font-size: clamp(34px, 2.8vw, 42px); }
  .pr-buy { margin-top: 40px; min-width: 120px; height: 38px; padding: 0 26px; font-size: 16.5px; }
  .pr-feat { margin-top: 34px; padding-top: 26px; gap: 14px; }
  .pr-fh, .pr-fl li { font-size: 16.5px; line-height: 26px; }
}

/* feature packs: whole card is the buy button; header = title + price + arrow, divider, dash list (same look as the reference) */
.pr-pgrid .pr-fcard { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; transition: border-color .2s, box-shadow .2s; }
.pr-fcard:hover { border-color: #cfcfcf; box-shadow: 0 6px 22px -14px rgba(0,0,0,.25); }
.pr-fcard:focus-visible { outline: 2px solid var(--pr-red); outline-offset: 3px; }
.pr-fhd { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #ebebeb; }
.pr-fhd .pr-pt { flex: 1; min-width: 0; }
.pr-fhd .pr-op { flex: none; font-size: clamp(16px, 1.3vw, 18px); }
.pr-fcard:hover .pr-op svg { color: var(--pr-red); }
.pr-fli { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; padding: 0; }
.pr-fnote { margin-top: 22px; max-width: 920px; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; color: #8a8a8a; }
.pr-fcard[data-vx-pricing-locked="1"] { opacity: .45; pointer-events: none; }
@media (min-width: 1181px) { .pr-fp .pr-pgrid { grid-template-columns: repeat(3, 1fr); } }