.pr-page {
  --pr-nav: 76px;          /* height of the sticky site nav (header-scale.css) */
  --pr-sub: 56px;          /* height of the sticky section nav below            */
  --pr-max: 1400px;
  --pr-line: rgba(255, 255, 255, 0.09);
  color: var(--white);
}

.pr-page :where(a, summary):focus-visible {
  outline: 2px solid var(--gold-l);
  outline-offset: 3px;
  border-radius: 6px;
}

.pr-wrap { max-width: var(--pr-max); margin: 0 auto; }

.pr-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* .pr-page prefix on purpose: site.css has ".site-shell svg { height:auto }", which would
   otherwise blow these inline icons up to 150px tall. */
.pr-page .pr-i {
  width: 1.1em; height: 1.1em; max-width: none; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.pr-page .pr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Buttons ------------------------------------------------------------- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.3rem; border: 1px solid transparent; border-radius: 8px;
  font: 500 0.88rem/1 'Outfit', sans-serif; text-decoration: none; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.pr-btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-l));
  color: var(--ink); font-weight: 600;
}
.pr-btn--gold:hover { box-shadow: 0 8px 24px rgba(200, 168, 75, 0.35); }
.pr-btn--ghost { border: 1px solid rgba(255, 255, 255, 0.18); color: var(--white); }
.pr-btn--ghost:hover { border-color: var(--gold); color: var(--gold-l); }
.pr-btn--block { width: 100%; }
.pr-btn--sm { padding: 0.6rem 1.05rem; font-size: 0.82rem; }
.pr-btn .pr-i { transition: transform 0.2s; }
.pr-btn:hover .pr-i { transform: translateX(3px); }

.pr-link { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }
.pr-link:hover { color: var(--white); }

/* --- Sticky section nav -------------------------------------------------- */
.pr-subnav {
  position: sticky; top: var(--pr-nav); z-index: 90;
  padding: 0 5%;
  background: rgba(11, 18, 32, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--pr-line); border-bottom: 1px solid var(--pr-line);
}
.pr-subnav-in {
  height: var(--pr-sub);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.pr-subnav-list {
  display: flex; align-self: stretch; gap: 0.25rem; min-width: 0;
  margin-left: -1rem;              /* first label lines up with the section headings */
  overflow-x: auto; scrollbar-width: none;
}
.pr-subnav-list::-webkit-scrollbar { display: none; }
.pr-subnav-list a {
  display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem;
  border-bottom: 2px solid transparent;
  font-size: 0.88rem; color: var(--silver); text-decoration: none; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.pr-subnav-list a:hover { color: var(--white); }
.pr-subnav-list a[aria-current] { color: var(--white); border-bottom-color: var(--gold); }
.pr-subnav-n {
  min-width: 1.35rem; padding: 0.1rem 0.4rem; border-radius: 99px;
  background: rgba(255, 255, 255, 0.07); color: var(--silver);
  font-size: 0.72rem; text-align: center; line-height: 1.4;
}
.pr-subnav-list a[aria-current] .pr-subnav-n { background: var(--gold-pale); color: var(--gold-l); }
.pr-subnav-cta { flex: none; }

/* --- Sections ------------------------------------------------------------ */
.pr-sec {
  padding: 4.5rem 5%;
  /* land just under both sticky bars when a nav link is clicked */
  scroll-margin-top: calc(var(--pr-nav) + var(--pr-sub) - 1.25rem);
}
.pr-sec--alt { background: var(--deep); }

.pr-head { max-width: 46rem; margin-bottom: 2.5rem; }
.pr-head .s-h2 { margin-bottom: 0.4rem; }
.pr-lede { color: var(--silver); font-size: 0.98rem; line-height: 1.75; max-width: 60ch; }

/* --- Card grid ----------------------------------------------------------- */
.pr-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr));
}
/* Per-section card widths (websites carry longer plan ladders, marketing cards are lean). */
#websites .pr-grid { --min: 340px; }
#marketing .pr-grid { --min: 250px; }
.pr-tiers {
  display: grid; gap: 1.25rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* --- Card ---------------------------------------------------------------- */
.pr-card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--card); border: 1px solid var(--pr-line); border-radius: 14px;
  transition: border-color 0.2s;
}
.pr-card:hover, .pr-card:focus-within { border-color: var(--gold-bdr); }
.pr-card--pop { background: var(--lift); border-color: rgba(200, 168, 75, 0.55); }
.pr-card--pop:hover, .pr-card--pop:focus-within { border-color: var(--gold); }

.pr-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.5rem; margin-bottom: 1rem;
}
.pr-tier .pr-card-top { margin-bottom: 0.35rem; }

.pr-ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--gold-pale); border: 1px solid var(--gold-bdr); border-radius: 10px;
  font-size: 1.15rem; line-height: 1;
}
.pr-badge {
  padding: 0.28rem 0.7rem; border-radius: 99px;
  background: linear-gradient(135deg, var(--gold), var(--gold-l)); color: var(--ink);
  font-size: 0.74rem; font-weight: 600; line-height: 1.2;
}

.pr-card-name {
  font-family: 'Cormorant', serif; font-weight: 600;
  font-size: 1.5rem; line-height: 1.2; color: var(--white);
}

.pr-desc {
  margin-top: 0.5rem;
  color: var(--silver); font-size: 0.87rem; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pr-desc--full { display: block; min-height: 0; overflow: visible; margin-top: 0.9rem; }
.pr-ideal { margin-top: 0.3rem; color: var(--silver); font-size: 0.85rem; }

/* --- Price --------------------------------------------------------------- */
.pr-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 1.4rem;
}
.pr-from { color: var(--silver); font-size: 0.85rem; margin-right: 0.1rem; }
.pr-amt {
  font-family: 'Cormorant', serif; font-weight: 700;
  font-size: 2.9rem; line-height: 1; color: var(--white);
  font-variant-numeric: lining-nums tabular-nums;
}
.pr-cur { color: var(--gold); margin-right: 0.05em; }
.pr-per { color: var(--silver); font-size: 0.9rem; }
.pr-model { margin-top: 0.45rem; color: var(--silver); font-size: 0.84rem; line-height: 1.5; }

/* --- Plan ladder (tier preview) ----------------------------------------- */
.pr-ladder {
  list-style: none; margin-top: 1.25rem; padding-top: 0.75rem;
  border-top: 1px solid var(--pr-line);
}
.pr-ladder li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.4rem 0; font-size: 0.86rem; color: var(--platinum);
}
.pr-ladder-price {
  color: var(--white); font-weight: 500; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pr-ladder-price small { margin-left: 0.25rem; color: var(--silver); font-size: 0.78rem; font-weight: 300; }
.pr-ladder-price .pr-pre { margin: 0 0.3rem 0 0; }
.pr-ladder li > span:first-child { min-width: 0; }
.pr-ladder .pr-ladder-more { justify-content: flex-start; color: var(--silver); font-size: 0.8rem; }
.pr-ladder--note { padding-top: 1rem; color: var(--silver); font-size: 0.86rem; line-height: 1.6; }

/* --- Card footer / stretched link --------------------------------------- */
.pr-card-foot { margin-top: auto; padding-top: 1.5rem; }
/* Makes the whole card clickable through the one real link (no nested anchors). */
.pr-stretch::after { content: ''; position: absolute; inset: 0; border-radius: 14px; z-index: 1; }

/* The whole card is one link, so one cursor must win everywhere inside it.
   Without this the pointer flickers between the hand (over the link overlay),
   the text caret (over headings and prices) and the arrow (over gaps) as it
   moves across the card.
   To use the plain arrow instead of the hand, change "pointer" to "default"
   on the first rule below and leave the button rule as it is. */
.pr-page .pr-grid > .pr-card,
.pr-page .pr-grid > .pr-card * { cursor: pointer; }
.pr-page .pr-grid > .pr-card :where(a, button) { cursor: pointer; }

/* --- Row alignment -------------------------------------------------------
   Where subgrid is supported, every card in a row shares the same row tracks,
   so titles, prices, plan ladders and buttons line up across the row even when
   a title wraps or a card has fewer plans. Older browsers keep the flex layout. */
@supports (grid-template-rows: subgrid) {
  .pr-grid > .pr-card,
  .pr-tiers > .pr-card {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid; row-gap: 0;
  }
  .pr-grid > .pr-card { grid-row: span 7; }
  .pr-grid > .pr-card > .pr-card-top  { grid-row: 1; }
  .pr-grid > .pr-card > .pr-card-name { grid-row: 2; }
  .pr-grid > .pr-card > .pr-desc      { grid-row: 3; }
  .pr-grid > .pr-card > .pr-price     { grid-row: 4; }
  .pr-grid > .pr-card > .pr-model     { grid-row: 5; }
  .pr-grid > .pr-card > .pr-ladder    { grid-row: 6; }
  .pr-grid > .pr-card > .pr-card-foot { grid-row: 7; }

  .pr-tiers > .pr-card { grid-row: span 6; }
  .pr-tiers > .pr-card > .pr-card-top  { grid-row: 1; }
  .pr-tiers > .pr-card > .pr-ideal     { grid-row: 2; }
  .pr-tiers > .pr-card > .pr-price     { grid-row: 3; }
  .pr-tiers > .pr-card > .pr-desc      { grid-row: 4; }
  .pr-tiers > .pr-card > .pr-checks    { grid-row: 5; align-self: start; }
  .pr-tiers > .pr-card > .pr-card-foot { grid-row: 6; }
}

/* Without subgrid, reserve three description lines so prices still roughly line up. */
@supports not (grid-template-rows: subgrid) {
  .pr-grid .pr-desc { min-height: calc(1.65em * 3); }
  .pr-grid .pr-card-name { min-height: 2.4em; }
}

/* --- Tier cards (US pricing) -------------------------------------------- */
.pr-tier .pr-amt { font-size: 3.2rem; }
.pr-checks { list-style: none; display: grid; gap: 0.7rem; margin: 1.5rem 0 0; }
.pr-checks li {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.88rem; line-height: 1.5; color: var(--platinum);
}
.pr-checks .pr-i { margin-top: 0.12rem; width: 1.15rem; height: 1.15rem; color: var(--gold); }
.pr-checks .is-off { color: var(--silver); }
.pr-checks .is-off .pr-i { color: var(--muted); }
.pr-tier .pr-card-foot { padding-top: 1.75rem; }
.pr-note { margin-top: 0.7rem; color: var(--silver); font-size: 0.8rem; text-align: center; line-height: 1.5; }

/* --- FAQ ----------------------------------------------------------------- */
.pr-faq {
  display: grid; gap: 2.5rem 5rem; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.pr-faq .pr-head { margin-bottom: 0; }
.pr-q { border-top: 1px solid var(--pr-line); }
.pr-q:last-child { border-bottom: 1px solid var(--pr-line); }
.pr-q summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.3rem 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 400; color: var(--white);
}
.pr-q summary::-webkit-details-marker { display: none; }
.pr-q summary::after { content: '+'; flex: none; color: var(--gold); font-size: 1.5rem; line-height: 1; }
.pr-q[open] summary::after { content: '\2212'; }
.pr-q summary:hover { color: var(--gold-l); }
.pr-q p { padding: 0 2.5rem 1.4rem 0; color: var(--silver); font-size: 0.93rem; line-height: 1.75; max-width: 62ch; }

/* --- Closing CTA --------------------------------------------------------- */
.pr-sec--cta { padding-top: 3.5rem; padding-bottom: 5rem; }
.pr-cta {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem 3rem; align-items: center;
  padding: 2.75rem 3rem;
  background: var(--lift); border: 1px solid var(--gold-bdr); border-radius: 18px;
}
.pr-sec--alt .pr-cta { background: var(--card); }
.pr-cta-h {
  font-family: 'Cormorant', serif; font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.15; color: var(--white);
}
.pr-cta-h em { font-style: italic; color: var(--gold); font-weight: 300; }
.pr-cta-p { margin-top: 0.5rem; color: var(--silver); font-size: 0.95rem; line-height: 1.7; }
.pr-cta-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.pr-phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--platinum); font-size: 0.95rem; text-decoration: none; white-space: nowrap;
}
.pr-phone:hover { color: var(--gold-l); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 992px) {
  .pr-page { --pr-nav: 70px; }   /* header-scale.css shrinks the nav to 70px here */
  .pr-faq { grid-template-columns: 1fr; gap: 1.75rem; }
  .pr-cta { grid-template-columns: 1fr; padding: 2rem 1.75rem; }
}
@media (max-width: 700px) {
  .pr-sec { padding: 3.25rem 4%; }
  .pr-sec--cta { padding-bottom: 3.5rem; }
  .pr-subnav { padding: 0 4%; }
  .pr-subnav-cta { display: none; }
  .pr-subnav-list a { padding: 0 0.8rem; }
  .pr-head { margin-bottom: 1.75rem; }
  .pr-amt { font-size: 2.6rem; }
  .pr-cta-actions { flex-direction: column; align-items: stretch; gap: 1rem; text-align: center; }
  .pr-phone { justify-content: center; }
}
@media (max-width: 480px) {
  .pr-sec, .pr-subnav { padding-left: 1.15rem; padding-right: 1.15rem; }
}

/* ==========================================================================
   Motion. Reuses the site reveal system: site.js adds ".on" to any ".rv"
   element that scrolls into view, so each .pr-sec carries .rv and the cards
   stagger off the parent's .on state. Deliberately scoped to .pr-page so the
   site.css .rv-stagger timings are never overridden.
   ========================================================================== */

.pr-page {
  --pr-ease: var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
  --pr-step: 80ms;                /* stagger between cards in a row */
}

/* --- Staggered children -------------------------------------------------- */
.pr-page .pr-sec .pr-card,
.pr-page .pr-sec .pr-q,
.pr-page .pr-sec .pr-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--pr-ease), transform 0.6s var(--pr-ease),
              border-color 0.25s ease, box-shadow 0.35s ease, background 0.25s ease;
  transition-delay: calc(var(--rv-i, 0) * var(--pr-step));
}
.pr-page .pr-sec.on .pr-card,
.pr-page .pr-sec.on .pr-q,
.pr-page .pr-sec.on .pr-cta {
  opacity: 1;
  transform: none;
}

/* Once revealed, interactions must feel instant — no inherited reveal delay. */
.pr-page .pr-sec.on .pr-card:hover,
.pr-page .pr-sec.on .pr-card:focus-within,
.pr-page .pr-sec.on .pr-q:hover {
  transition-delay: 0s;
  transition-duration: 0.3s;
}

/* --- Card hover ----------------------------------------------------------
   The lift moves the card out from under the pointer when the cursor is near an
   edge, which makes hover flicker on and off. An invisible 8px collar (smaller
   than the 20px grid gap) keeps the hover target still while the card moves. */
.pr-page .pr-card { isolation: isolate; }
.pr-page .pr-grid > .pr-card::after,
.pr-page .pr-tiers > .pr-card::after {
  content: ''; position: absolute; z-index: -1;
  left: 0; right: 0; top: -8px; bottom: -8px;
}
/* --- Card hover ---------------------------------------------------------- */
.pr-page .pr-sec.on .pr-card:hover,
.pr-page .pr-sec.on .pr-card:focus-within {
  transform: translateY(-5px);
  border-color: var(--gold-bdr);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
.pr-page .pr-sec.on .pr-card--pop:hover,
.pr-page .pr-sec.on .pr-card--pop:focus-within {
  border-color: var(--gold);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(200, 168, 75, 0.14);
}

.pr-ico { transition: transform 0.25s var(--pr-ease), box-shadow 0.25s ease, background 0.25s ease; }
.pr-card:hover .pr-ico,
.pr-card:focus-within .pr-ico {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 0 18px rgba(200, 168, 75, 0.2);
}

.pr-card-name { transition: color 0.2s ease; }
.pr-card:hover .pr-card-name { color: var(--gold-l); }
.pr-cur { transition: text-shadow 0.25s ease; }
.pr-card:hover .pr-cur { text-shadow: 0 0 16px rgba(200, 168, 75, 0.35); }

/* Plan ladder rows pick up a faint gold wash on card hover. */
.pr-ladder li { transition: color 0.2s ease; }
.pr-card:hover .pr-ladder li { color: var(--white); }

/* Gold sweep across the highlighted card, same idea as .s-cta-strip::before.
   The gradient scrolls via background-position rather than a transform, so the
   card needs no overflow clipping and the stretched link stays on top. */
.pr-card--pop { isolation: isolate; }
.pr-card--pop::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(200, 168, 75, 0.1) 50%, transparent 58%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: prShine 8s ease-in-out infinite;
}
@keyframes prShine {
  0%, 100% { background-position: 130% 0; }
  45%, 55% { background-position: -30% 0; }
}

/* --- Buttons ------------------------------------------------------------- */
.pr-btn { transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.22s ease, transform 0.22s var(--pr-ease); }
.pr-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(200, 168, 75, 0.38); }
.pr-btn--ghost:hover { transform: translateY(-1px); }
.pr-btn:active { transform: translateY(0) scale(0.985); }
.pr-card:hover .pr-btn--ghost { border-color: var(--gold-bdr); color: var(--gold-l); }

/* --- Section label rule grows in with the section, as on the rest of site - */
.pr-sec .s-lbl::before { transform-origin: left center; transition: width 0.45s var(--pr-ease); }
.pr-sec.on .s-lbl::before { width: 32px; }

/* --- Sticky sub-nav ------------------------------------------------------ */
.pr-subnav { transition: box-shadow 0.22s ease, background 0.22s ease; }
.pr-subnav-list a[aria-current] { transition: color 0.2s ease, border-color 0.2s ease; }
.pr-subnav-n { transition: background 0.2s ease, color 0.2s ease; }
.pr-subnav-list a:hover .pr-subnav-n { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* --- FAQ ----------------------------------------------------------------- */
.pr-q { transition: background 0.2s ease; }
.pr-q[open] { background: rgba(255, 255, 255, 0.015); }
.pr-q summary::after { transition: transform 0.22s var(--pr-ease), color 0.2s ease; }
.pr-q summary:hover::after { transform: scale(1.15); }
.pr-q[open] p { animation: prAnswerIn 0.38s var(--pr-ease) both; }
@keyframes prAnswerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* --- Closing CTA --------------------------------------------------------- */
.pr-cta { position: relative; isolation: isolate; }
.pr-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(200, 168, 75, 0.07) 50%, transparent 58%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: prShine 8s ease-in-out infinite;
}
.pr-phone { transition: color 0.2s ease, transform 0.2s ease; }
.pr-phone:hover { transform: translateX(2px); }

/* --- No JS / reduced motion --------------------------------------------- */
.pr-page.pr-no-js .pr-card,
.pr-page.pr-no-js .pr-q,
.pr-page.pr-no-js .pr-cta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pr-page *,
  .pr-page *::before,
  .pr-page *::after { transition: none !important; animation: none !important; }
  .pr-page .pr-card,
  .pr-page .pr-q,
  .pr-page .pr-cta { opacity: 1 !important; transform: none !important; }
}