/* ==========================================================================
   Psy Booking — "Prices & packages" page (prices.php) only.
   Builds on site.css components and variables; everything is pb-prices-*
   or a new pb-* block used by this page alone.
   ========================================================================== */

/* Cards that slide in from the side (data-reveal="left|right") must not
   widen the page before they are revealed; clip keeps sticky children working. */
.pb-prices main > .pb-section { overflow-x: clip; }

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

/* ------------------------------------------------------------ price table */
.pb-prices-hint {
    display: none; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: .85rem; font-weight: 700; color: var(--muted);
}
.pb-prices-hint.is-on { display: flex; }
.pb-prices-hint .pb-i { color: var(--terra); animation: pb-prices-nudge 1.8s var(--ease) infinite; }
@keyframes pb-prices-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 900px) {
    html:not(.js) .pb-prices-hint { display: flex; }
}

.pb-prices-scroll { position: relative; }
/* swipe edge: the scroller itself fades out (header and body together)
   instead of a sand overlay that smeared the dark header row */
.pb-prices-scroll.is-scrollable:not(.is-end) .pb-prices-table {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}

.pb-prices-table .pb-table { min-width: 860px; }
.pb-prices-table .pb-table th, .pb-prices-table .pb-table td { vertical-align: middle; }
/* white header text needs the darker terra (AA 4.5:1 for small text) */
.pb-prices-table thead th.is-best { background: linear-gradient(160deg, var(--terra-btn), var(--terra-700)); }
.pb-prices-table td.is-best { background: rgba(224, 104, 58, .05); }
.pb-prices-table tbody tr:hover td.is-best { background: rgba(224, 104, 58, .09); }

/* the room column stays in view while the prices scroll sideways */
.pb-prices-table thead th:first-child { left: 0; z-index: 2; }
.pb-prices-table tbody th {
    position: sticky; left: 0; z-index: 1; background: var(--sand-0); font-weight: 400;
    transition: background .2s, box-shadow .3s;
}
.pb-prices-table tbody tr:hover th { background: var(--teal-50); }
.pb-prices-scroll.is-scrolled .pb-prices-table tbody th,
.pb-prices-scroll.is-scrolled .pb-prices-table thead th:first-child { box-shadow: 10px 0 14px -12px rgba(6, 48, 46, .45); }

.pb-prices-table .pb-table__room { color: var(--ink) !important; min-width: 230px; line-height: 1.3; }
.pb-prices-table .pb-table__room:hover { color: var(--terra) !important; }
.pb-prices-table .pb-table__room img { transition: transform .5s var(--ease); }
.pb-prices-table .pb-table__room:hover img { transform: scale(1.06); }
.pb-table__noimg {
    width: 52px; height: 52px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--teal-800), var(--teal-900)); color: var(--teal-200);
}
.pb-table__code {
    display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; margin-right: 6px;
    border-radius: 7px; background: var(--teal-900); color: #fff; font: 700 .72rem/1 var(--font-display); letter-spacing: .02em;
    vertical-align: 1px;
}
.pb-table__cap { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; font-size: .92rem; }
.pb-table__cap .pb-i { color: var(--teal-700); }
.pb-prices-table .pb-table__rate { display: block; white-space: nowrap; }
.pb-prices-table .pb-table__rate b { font: 700 1.2rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pb-prices-table .pb-table__rate small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.pb-table__total { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.pb-prices-table .pb-table__save {
    display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
    background: var(--terra-100); color: var(--terra-700); font-size: .76rem; font-weight: 800;
}
.pb-table__none { color: var(--muted); font-weight: 700; }
.pb-prices-table tbody tr:last-child th { border-bottom: 0; }
/* capacity (tablets + phones) and hourly price (phones) repeated under the
   room name where their own columns are hidden */
.pb-table__capm { display: none; align-items: center; gap: 4px; margin-top: 3px; color: var(--muted); font-size: .76rem; font-weight: 600; }
.pb-table__capm .pb-i { color: var(--teal-700); width: 1em; height: 1em; }
.pb-table__hourm { display: none; align-items: baseline; gap: 4px; margin-top: 2px; color: var(--ink-2); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pb-table__hourm b { font: 700 1rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
/* the highlighted (largest) package column says why it is highlighted */
.pb-prices-best {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 5px;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #fff;
}
.pb-prices-best .pb-i { width: 12px; height: 12px; color: var(--gold); }

.pb-prices-note { margin-top: clamp(20px, 3vw, 30px); }
/* last word + arrow of a link stay together when the link wraps */
.pb-prices-nowrap { white-space: nowrap; }
/* the calculator follows straight after: no ~290 px hole between the two */
#price-list { padding-bottom: clamp(48px, 6vw, 88px); }
#calculator { padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }

/* ------------------------------------------------------------- calculator */
.pb-prices-calc .pb-seg button:hover { border-color: var(--terra); color: var(--terra-600); }
.pb-prices-calc .pb-seg button[aria-pressed="true"]:hover { color: #fff; }
.pb-prices-calc .pb-seg button:disabled { opacity: .45; cursor: not-allowed; }
.pb-prices-calc .pb-seg button:disabled:hover { border-color: rgba(15, 31, 30, .16); color: var(--ink-2); }
.pb-prices-calc__nopkg { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: .88rem; font-weight: 600; color: var(--muted); }
.pb-prices-calc__nopkg .pb-i { flex: none; width: 18px; height: 18px; color: var(--teal-700); }
/* live total echoed inside the form on phones/tablets (the result panel is below) */
.pb-prices-calc__mini { display: none; margin: 2px 0 0; font: 700 1.1rem/1.25 var(--font-display); letter-spacing: -.01em; color: var(--terra-700); }

/* slider: a slim terra/sand track instead of Chrome's heavy dark one;
   --p (the filled part) is set on the input by PHP and prices.js */
.pb-prices-calc .pb-range { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.pb-prices-calc .pb-range:focus { outline: none; }
.pb-prices-calc .pb-range:focus-visible { outline: 3px solid var(--terra); outline-offset: 4px; border-radius: 10px; }
.pb-prices-calc .pb-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 6px;
    background: linear-gradient(90deg, var(--terra) var(--p, 33%), var(--sand-300) var(--p, 33%));
}
.pb-prices-calc .pb-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: #fff; border: 3px solid var(--terra); box-shadow: 0 2px 8px rgba(176, 68, 32, .28);
}
.pb-prices-calc .pb-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--sand-300); }
.pb-prices-calc .pb-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--terra); }
.pb-prices-calc .pb-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--terra); box-shadow: 0 2px 8px rgba(176, 68, 32, .28);
}
.pb-prices-calc__note { font-size: .9rem; margin: 0; }
.pb-prices-calc + .pb-prices-calc__note { max-width: 820px; margin: 18px auto 0; text-align: center; }
.pb-prices-calc__label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pb-prices-calc .pb-calc__big { display: flex; align-items: baseline; gap: 10px; }
.pb-prices-calc .pb-calc__big small { font: 700 1.1rem/1 var(--font-text); color: rgba(236, 246, 244, .7); letter-spacing: 0; }
.pb-prices-calc .pb-calc__result { position: relative; overflow: hidden; isolation: isolate; }
.pb-prices-calc .pb-calc__result::before {
    content: ''; position: absolute; z-index: -1; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 40px rgba(255, 255, 255, .02);
}
.pb-prices-calc__next {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px;
    background: rgba(255, 255, 255, .06); border: 1px dashed rgba(242, 181, 107, .4); color: #ffe2bd; font-size: .92rem; font-weight: 600;
}
.pb-prices-calc__next::before { content: '↗'; color: var(--gold); font-weight: 800; }
.pb-prices-calc__next.is-better { background: rgba(242, 181, 107, .16); border-style: solid; color: #fff; }
.pb-prices-calc__next.is-better::before { content: '★'; }
.pb-prices-calc .pb-btn { justify-self: start; white-space: normal; text-align: left; }
.pb-calc [hidden] { display: none !important; }
/* dark result panel: white focus ring, as on the other dark surfaces */
.pb-prices-calc .pb-calc__result :focus-visible { outline-color: #fff; }
.pb-prices-calc .pb-calc__save { justify-self: start; }
.pb-prices-calc .pb-calc__save .pb-i { flex: none; }

/* ---------------------------------------------------- hourly vs package */
.pb-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: stretch; }
.pb-vs__card { display: flex; flex-direction: column; }
.pb-vs__card h3 { margin-bottom: 6px; }
.pb-vs__card > p { margin-bottom: 0; }
.pb-vs__card .pb-plan__price { margin: 18px 0 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.pb-card--accent .pb-plan__price { border-bottom-color: var(--line-light); }
.pb-card--accent .pb-plan__price small, .pb-card--accent .pb-plan__price span { color: rgba(236, 246, 244, .72); }
.pb-card--accent h3 { color: #fff; }
.pb-card--accent a:not(.pb-btn) { color: var(--teal-200); }
.pb-vs__card .pb-check { margin: 0; }
.pb-vs__mid { align-self: center; display: grid; place-items: center; }
.pb-vs__mid span {
    width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sand-0); border: 1px solid var(--line); box-shadow: var(--shadow-s);
    font: 700 .95rem/1 var(--font-display); color: var(--terra-700); text-transform: lowercase;
}

.pb-bars {
    margin-top: clamp(24px, 3.6vw, 44px); padding: clamp(22px, 3.2vw, 38px); border-radius: var(--radius-l);
    background: var(--sand-0); border: 1px solid var(--line); box-shadow: var(--shadow-s);
}
.pb-bars__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.pb-bars__head h3 { margin: 0; }
.pb-bars__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 132px; gap: 18px; align-items: center; padding: 10px 0; }
.pb-bars__label { font-weight: 700; color: var(--ink-2); }
.pb-bars__track { position: relative; height: 20px; border-radius: 999px; background: var(--sand-100); overflow: hidden; }
.pb-bars__track i {
    display: block; height: 100%; width: var(--w, 100%); border-radius: inherit; background: var(--sand-300);
    transform-origin: left center; transform: scaleX(0); transition: transform 1.4s var(--ease) .35s;
}
.pb-bars__row--pkg .pb-bars__track i { background: linear-gradient(90deg, var(--terra), var(--gold)); transition-delay: .6s; }
.pb-bars.is-in .pb-bars__track i, html:not(.js) .pb-bars__track i { transform: none; }
.pb-bars__value { font: 700 1.2rem/1 var(--font-display); letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-bars__row--pkg .pb-bars__value { color: var(--terra-600); }
.pb-bars__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; padding-top: 18px; border-top: 1px dashed var(--line); }
.pb-bars__foot .pb-badge { font-size: .9rem; padding: 8px 14px; }
.pb-bars__foot p { margin: 0; font-size: .95rem; flex: 1 1 280px; }

/* --------------------------------------------- how packages work (dark) */
.pb-prices-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pb-prices-deco > * { position: absolute; will-change: transform; }
/* the "%" stays in the empty space beside the heading, the glow in the
   corner padding: neither shows through the translucent cards */
.pb-prices-deco__pct {
    /* the offset makes up for the parallax lift (-0.14 x distance) while the heading is on screen */
    right: 2%; top: clamp(60px, 8vw, 120px); font: 700 clamp(12rem, 22vw, 20rem)/1 var(--font-display); letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(242, 181, 107, .16);
}
.pb-prices-deco__ring { left: -170px; top: 40%; width: 480px; height: 480px; border-radius: 50%; border: 1px dashed rgba(153, 246, 228, .2); }
/* box inside the section, glow centre drawn near its bottom-right corner
   (same spot as right:-160px/bottom:-180px, without a box past the edge) */
.pb-prices-deco__glow { right: 0; bottom: 0; width: 400px; height: 400px; background: radial-gradient(circle 200px at 90% 95%, rgba(224, 104, 58, .3), transparent); filter: blur(18px); }
.pb-prices-pk { position: relative; z-index: 1; }
.pb-prices-pk .pb-card--dark h3 { color: #fff; }
.pb-prices-pk .pb-card--dark { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.pb-prices-kinds { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.pb-prices-kinds li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-light); }
.pb-prices-kinds__icon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(242, 181, 107, .14); color: var(--gold); }
.pb-prices-kinds b { display: block; color: #fff; margin-bottom: 2px; }
.pb-prices-kinds span { color: rgba(233, 243, 241, .72); font-size: .94rem; line-height: 1.5; }

.pb-conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin: 22px 0 14px; }
.pb-conv__box { display: grid; gap: 6px; align-content: center; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-light); }
.pb-conv__box strong { font: 700 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.pb-conv__box small { color: rgba(233, 243, 241, .72); font-size: .86rem; line-height: 1.4; }
.pb-conv__box--hl { background: linear-gradient(150deg, rgba(224, 104, 58, .3), rgba(242, 181, 107, .12)); border-color: rgba(242, 181, 107, .42); }
.pb-conv__box--hl strong { color: var(--gold); }
.pb-conv__eq { align-self: center; font: 700 2rem/1 var(--font-display); color: var(--gold); }
.pb-prices-small { font-size: .92rem; margin: 0; }

.pb-prices-split { margin-top: clamp(16px, 2.2vw, 28px); }
.pb-prices-split:hover { transform: none; }
.pb-prices-split__head { display: flex; gap: 18px; align-items: flex-start; max-width: 860px; }
.pb-prices-split__head h3 { margin: 4px 0 8px; }
.pb-paysteps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pb-paysteps > li { position: relative; padding: 22px; border-radius: 18px; background: rgba(4, 31, 30, .4); border: 1px solid var(--line-light); }
.pb-paysteps > li:not(:last-child)::after {
    content: ''; position: absolute; right: -14px; top: 38px; z-index: 1; width: 10px; height: 10px;
    border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg);
}
.pb-paysteps__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; background: var(--terra); color: #fff; font: 700 1rem/1 var(--font-display); box-shadow: var(--shadow-glow); }
.pb-paysteps h4 { color: #fff; margin: 0 0 8px; font-size: 1.12rem; }
.pb-paysteps p { margin: 0; font-size: .95rem; }
.pb-meter { display: block; height: 8px; margin-top: 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pb-meter i {
    display: block; height: 100%; width: var(--w, 100%); border-radius: inherit; background: linear-gradient(90deg, var(--terra), var(--gold));
    transform-origin: left center; transform: scaleX(0); transition: transform 1.3s var(--ease) .45s;
}
.is-in .pb-meter i, html:not(.js) .pb-meter i { transform: none; }
.pb-meter__label { display: block; margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--gold); }
.pb-prices-pk__row { margin-top: clamp(16px, 2.2vw, 28px); }

/* ------------------------------------------------------------ cancellation */
.pb-prices-rule { overflow: hidden; }
.pb-prices-rule::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--teal-700); }
.pb-prices-rule--info::before { background: var(--gold); }
.pb-prices-rule--info .pb-icon { background: #fdf0dc; color: #9a5b12; }
.pb-prices-rule--warn::before { background: var(--terra); }

/* ------------------------------------------------------ included (band) */
.pb-prices-band .pb-eyebrow { color: var(--gold); }

/* ------------------------------------------------- payment + regulars */
.pb-paymethods { list-style: none; padding: 0; margin: 28px 0 22px; display: grid; gap: 12px; }
.pb-paymethods li { display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 18px; background: var(--sand-0); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.pb-paymethods .pb-icon { width: 46px; height: 46px; border-radius: 14px; }
.pb-paymethods .pb-icon .pb-i { width: 22px; height: 22px; }
.pb-paymethods b { display: block; font-family: var(--font-display); font-size: 1.08rem; }
.pb-paymethods span { color: var(--muted); font-size: .94rem; }
.pb-prices-login { margin-top: 26px; padding-top: 24px; border-top: 1px dashed rgba(15, 31, 30, .18); }
.pb-prices-login p { font-weight: 600; color: var(--ink-2); }
.pb-prices-login .pb-actions { gap: 14px 22px; }
.pb-prices-regular { padding: clamp(26px, 3.4vw, 42px); }
.pb-prices-regular:hover { transform: none; }
.pb-prices-regular h3 { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.pb-prices-regular .pb-check { margin: 22px 0 26px; }
.pb-prices-regular .pb-prices-small { margin-top: 18px; }

/* --------------------------------------------------------------- FAQ */
.pb-prices-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.pb-prices-faq__head h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

/* ---------------------------------------------------------- responsive */
@media (min-width: 981px) {
    .pb-prices-faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
    .pb-prices-regular { position: sticky; top: calc(var(--header-h) + 24px); }
    .pb-prices-calc .pb-calc__form { align-content: center; }
}
@media (max-width: 980px) {
    .pb-vs { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pb-vs__mid { margin: -14px 0; position: relative; z-index: 2; }
    .pb-paysteps { grid-template-columns: minmax(0, 1fr); }
    .pb-paysteps > li:not(:last-child)::after { right: auto; left: 38px; top: auto; bottom: -14px; transform: rotate(135deg); }
    .pb-prices-faq { grid-template-columns: minmax(0, 1fr); }
    /* the cards stack full-width here: no free space left for the "%" */
    .pb-prices-deco__pct { display: none; }
    /* the two "how packages work" cards stack so the conversion example has room */
    .pb-prices-pk > .pb-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .pb-prices-calc__mini { display: block; }
    /* touch targets */
    .pb-prices-calc .pb-seg button { min-height: 44px; padding: 12px 18px; }
    .pb-prices-calc .pb-range { height: 36px; }
    .pb-prices-regular .pb-prices-small a { display: inline-flex; align-items: center; min-height: 44px; }
    /* many blurred cards over animated layers make this long section janky on phones */
    .pb-prices-pk .pb-card--dark { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .06); }
    .pb-prices-deco__glow { display: none; }
}
@media (min-width: 681px) and (max-width: 1180px) {
    /* tablets and small laptops: drop the capacity column (repeated under the
       name) so every package column, the best-value one included, fits */
    .pb-prices-table .pb-table { min-width: 0; }
    .pb-prices-table .pb-table tr > :nth-child(2) { display: none; }
    .pb-table__capm { display: flex; }
    .pb-prices-table .pb-table__room { min-width: 0; width: 190px; }
    .pb-prices-table thead th { white-space: normal; line-height: 1.2; }
    .pb-prices-table .pb-table th, .pb-prices-table .pb-table td { padding: 14px 10px; }
    .pb-prices-table .pb-table td.num { white-space: normal; }
    /* the code on its own line, as on phones: names wrap evenly */
    .pb-table__code { display: flex; width: max-content; margin: 0 0 4px; }
}
@media (min-width: 681px) and (max-width: 980px) {
    /* smaller thumbnail: names wrap in two lines, not three */
    .pb-prices-table .pb-table__room img, .pb-prices-table .pb-table__noimg { width: 40px; height: 40px; }
    .pb-prices-table .pb-table__room { width: 170px; }
    /* a lone last card of a 2-column grid spans the whole row */
    .pb-prices-pk__row > :last-child:nth-child(odd),
    #cancellation .pb-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    /* phones: capacity and hourly price move under the room name and the
       thumbnails go, so the first package column is readable without a swipe */
    .pb-prices-table .pb-table { min-width: 0; font-size: .9rem; }
    .pb-prices-table .pb-table tr > :nth-child(2),
    .pb-prices-table .pb-table tr > :nth-child(3) { display: none; }
    .pb-table__capm, .pb-table__hourm { display: flex; }
    .pb-prices-table .pb-table th, .pb-prices-table .pb-table td { padding: 12px 12px; }
    .pb-prices-table thead th { white-space: normal; line-height: 1.2; }
    /* narrower cells: two package sizes fit next to the sticky room column */
    .pb-prices-table .pb-table td.num { padding: 12px 8px; white-space: normal; }
    .pb-prices-table .pb-table__total { white-space: normal; line-height: 1.3; }
    .pb-prices-table .pb-table__room { min-width: 0; width: 112px; gap: 10px; font-size: .88rem; }
    .pb-prices-table .pb-table__room img, .pb-prices-table .pb-table__noimg { display: none; }
    .pb-table__code { display: flex; width: max-content; margin: 0 0 4px; }
    .pb-prices-calc .pb-select { font-size: .94rem; }
    .pb-bars__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .pb-bars__track { grid-column: 1 / -1; grid-row: 2; }
    .pb-bars__value { font-size: 1.05rem; }
    .pb-conv { grid-template-columns: minmax(0, 1fr); }
    .pb-conv__eq { justify-self: center; font-size: 1.6rem; }
    .pb-prices-split__head { flex-direction: column; gap: 6px; }
    .pb-prices-calc .pb-calc__form, .pb-prices-calc .pb-calc__result { padding: 22px 18px; }
    .pb-prices-calc .pb-btn { width: 100%; justify-content: center; text-align: center; }
    .pb-range-row output { min-width: 72px; font-size: 1.15rem; }
    .pb-prices-deco__pct { display: none; }
    .pb-prices-deco__ring { width: 300px; height: 300px; left: -150px; }
    .pb-prices-login .pb-actions .pb-btn { flex: 1 1 100%; }
    /* in-flow CTAs are full width on phones; text links get a 44 px touch target */
    .pb-prices-regular .pb-actions .pb-btn { flex: 1 1 100%; justify-content: center; }
    .pb-prices .pb-link-arrow { min-height: 44px; }
    /* "how packages work": flatter cards-in-cards, so the dark section is not 4+ screens tall */
    .pb-prices-pk .pb-card--dark { padding: 20px 16px; }
    .pb-prices-kinds li { padding: 12px; gap: 12px; }
    .pb-paysteps > li { padding: 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
    .pb-paysteps__n { width: 36px; height: 36px; margin: 0; grid-row: span 2; }
    .pb-paysteps > li > .pb-meter, .pb-paysteps > li > .pb-meter__label { grid-column: 1 / -1; }
    .pb-paysteps > li:not(:last-child)::after { left: 30px; }
    .pb-prices-pk__row { gap: 12px; }
}
