/* Platform v3 public site - Black and gold (layouts.site, pb-*).
   Its own file on purpose: business-os.css carries hundreds of !important rules
   aimed at every non-admin body, and Tailwind's preflight is not loaded either,
   so this file brings its own small reset. Breakpoints: small <=719px, wide >=1040px. */

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #0b0a09; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(button, [role="button"], a) { -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; }
/* Anchors and keyboard focus stop clear of the sticky header (and of the phone dock):
   Shift+Tab up the page otherwise parks a focused button entirely under the bar
   (WCAG 2.4.11). Only pages that have the bar; scroll-margin is the fallback. */
html:has(> body.pb > .pb-head) { scroll-padding-top: 76px; }
@media (max-width: 719px) { html:has(> body.pb > .pb-dock) { scroll-padding-bottom: 84px; } }
@supports not selector(:has(*)) { [id] { scroll-margin-top: 76px; } }

/* Tokens ------------------------------------------------------------------- */
body.pb {
    --pb-bg: #0b0a09;
    --pb-surface: #141210;
    --pb-raised: #1b1916;
    --pb-chip: #1f1c18;
    --pb-foot: #080706;
    --pb-seg-on: #2b2721;
    --pb-band: linear-gradient(180deg, #17140f 0%, #100e0b 100%);
    --pb-ink: #f3ede2;
    --pb-ink-56: rgba(243, 237, 226, 0.56);
    --pb-ink-60: rgba(243, 237, 226, 0.6);
    --pb-ink-64: rgba(243, 237, 226, 0.64);
    --pb-ink-66: rgba(243, 237, 226, 0.66);
    --pb-ink-68: rgba(243, 237, 226, 0.68);
    --pb-ink-70: rgba(243, 237, 226, 0.7);
    --pb-ink-72: rgba(243, 237, 226, 0.72);
    --pb-ink-74: rgba(243, 237, 226, 0.74);
    --pb-ink-78: rgba(243, 237, 226, 0.78);
    --pb-ink-82: rgba(243, 237, 226, 0.82);
    --pb-ink-85: rgba(243, 237, 226, 0.85);
    --pb-line-03: rgba(243, 237, 226, 0.03);
    --pb-line-06: rgba(243, 237, 226, 0.06);
    --pb-line-08: rgba(243, 237, 226, 0.08);
    --pb-line-09: rgba(243, 237, 226, 0.09);
    --pb-line-10: rgba(243, 237, 226, 0.1);
    --pb-line-12: rgba(243, 237, 226, 0.12);
    --pb-line-14: rgba(243, 237, 226, 0.14);
    --pb-line-16: rgba(243, 237, 226, 0.16);
    --pb-line-18: rgba(243, 237, 226, 0.18);
    --pb-gold: #c9a45c;
    --pb-gold-hover: #d7b571;
    --pb-gold-text: #e3c68a;
    --pb-gold-soft: #e8cc94;
    --pb-gold-bright: #f0dcae;
    --pb-on-gold: #17120a;
    --pb-tint-10: rgba(201, 164, 92, 0.1);
    --pb-tint-13: rgba(201, 164, 92, 0.13);
    --pb-tint-14: rgba(201, 164, 92, 0.14);
    --pb-tint-16: rgba(201, 164, 92, 0.16);
    --pb-tint-18: rgba(201, 164, 92, 0.18);
    --pb-gold-line: rgba(201, 164, 92, 0.24);
    --pb-gold-line-45: rgba(201, 164, 92, 0.45);
    --pb-gold-line-50: rgba(201, 164, 92, 0.5);
    --pb-gold-line-55: rgba(201, 164, 92, 0.55);
    --pb-gold-line-70: rgba(201, 164, 92, 0.7);
    --pb-warn-bg: rgba(224, 164, 88, 0.14);
    --pb-warn: #ecba75;
    --pb-good: #9fe0b8;
    --pb-online: #86d9a8;
    --pb-disabled: #2a2620;
    --pb-shadow-hero: 0 24px 60px rgba(0, 0, 0, 0.45);
    --pb-shadow-drawer: 0 30px 80px rgba(0, 0, 0, 0.6);
    --pb-shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(201, 164, 92, 0.28);
    --pb-font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pb-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --pb-max: 1240px;
    --pb-pad: 24px;

    min-height: 100vh;
    /* viewport-fit=cover: keep the gutter clear of a notch on a phone held sideways. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    background: var(--pb-bg);
    color: var(--pb-ink);
    font-family: var(--pb-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 719px) { body.pb { --pb-pad: 16px; } }
@media (min-width: 1040px) { body.pb { --pb-pad: 32px; } }

.pb a { color: var(--pb-gold-text); text-decoration: none; }
.pb a:hover { color: var(--pb-gold-bright); }
.pb ::selection { background: rgba(201, 164, 92, 0.32); color: #fff; }

/* One visible focus ring everywhere: 2px gold, clear of the edge (3:1+ on the black). */
.pb :focus { outline: none; }
.pb :focus-visible { outline: 2px solid var(--pb-gold); outline-offset: 2px; }

.pb-mono { font-family: var(--pb-mono); }
.pb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pb-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--pb-gold); color: var(--pb-on-gold) !important; font-weight: 600; }
.pb-skip:focus { top: 12px; }
.pb-wrap { width: 100%; max-width: var(--pb-max); margin: 0 auto; padding-left: var(--pb-pad); padding-right: var(--pb-pad); }
.pb-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 34% at 84% 4%, rgba(201, 164, 92, 0.11), transparent 64%); }
.pb-main { position: relative; }

/* Type --------------------------------------------------------------------- */
.pb-h1 { font-size: 52px; font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.pb-h2 { font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.pb-h3 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.pb-lede { max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--pb-ink-72); text-wrap: pretty; }
.pb-intro { max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--pb-ink-70); text-wrap: pretty; }
.pb-body { max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--pb-ink-70); }
.pb-small { font-size: 13px; line-height: 1.5; color: var(--pb-ink-60); }
.pb-eyebrow { font-size: 13px; font-weight: 600; color: var(--pb-gold-text); }
.pb-price { font-family: var(--pb-mono); font-size: 18px; color: var(--pb-gold-soft); }
@media (max-width: 719px) {
    .pb-h1 { font-size: 40px; }
    .pb-h2 { font-size: 28px; }
    .pb-lede { font-size: 16px; }
}
@media (min-width: 1040px) { .pb-h1 { font-size: 64px; } }

/* Buttons -------------------------------------------------------------------
   Heights from the design: 40 header, 42 card, 44 default, 50 band and dock,
   52 the big full-width primary. */
.pb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 16px;
    border: 1px solid transparent; border-radius: 11px; background: transparent;
    font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-align: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pb-btn svg { width: 15px; height: 15px; flex: none; }
.pb-btn--40 { height: 40px; }
.pb-btn--42 { height: 42px; }
.pb-btn--50 { height: 50px; padding: 0 22px; border-radius: 13px; font-size: 15px; }
.pb-btn--52 { height: 52px; padding: 0 22px; border-radius: 13px; font-size: 15px; }
.pb-btn--block { display: flex; width: 100%; }
.pb a.pb-btn--gold, .pb-btn--gold { background: var(--pb-gold); border-color: var(--pb-gold); color: var(--pb-on-gold); }
.pb a.pb-btn--gold:hover, .pb-btn--gold:hover { background: var(--pb-gold-hover); border-color: var(--pb-gold-hover); color: var(--pb-on-gold); }
.pb a.pb-btn--ghost, .pb-btn--ghost { border-color: var(--pb-line-14); color: var(--pb-ink); }
.pb a.pb-btn--ghost:hover, .pb-btn--ghost:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }
.pb a.pb-btn--outline, .pb-btn--outline { border-color: var(--pb-gold-line-45); color: var(--pb-gold-soft); }
.pb a.pb-btn--outline:hover, .pb-btn--outline:hover { background: var(--pb-tint-10); color: var(--pb-gold-bright); }
.pb-btn:disabled, .pb-btn[aria-disabled="true"] { background: var(--pb-disabled) !important; border-color: var(--pb-disabled) !important; color: var(--pb-ink-56) !important; cursor: not-allowed; }

/* Segmented control and tabs ------------------------------------------------ */
.pb-seg {
    display: inline-flex; gap: 2px; width: fit-content; max-width: 100%; padding: 4px;
    border: 1px solid var(--pb-line-09); border-radius: 14px; background: var(--pb-surface);
    overflow-x: auto; scrollbar-width: none;
}
.pb-seg::-webkit-scrollbar { display: none; }
.pb-seg--sunk { background: var(--pb-bg); border-color: var(--pb-line-12); }
.pb-seg--raised { padding: 3px; border-radius: 12px; background: var(--pb-raised); }
.pb-seg__btn {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent;
    color: var(--pb-ink-66); font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.pb-seg--lg .pb-seg__btn { height: 42px; }
.pb-seg--raised .pb-seg__btn { border-radius: 9px; }
.pb-seg__btn:hover { color: var(--pb-ink); }
.pb-seg__btn[aria-selected="true"], .pb-seg__btn[aria-pressed="true"] { background: var(--pb-seg-on); color: var(--pb-ink); box-shadow: var(--pb-shadow-seg); }
/* A phone gets 44px touch targets: the design's 40 and 42px controls grow a little. */
@media (max-width: 719px) {
    .pb-btn--40, .pb-btn--42, .pb-seg__btn, .pb-seg--lg .pb-seg__btn { height: 44px; }
}
/* Tabs exist only with scripts; without them every panel shows, one after another. */
html:not(.js) .pb-js-only { display: none !important; }
html.js .pb-tabpanel:not(.is-active) { display: none; }

/* Pills, kickers, chips ---------------------------------------------------- */
.pb-kicker { width: fit-content; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--pb-tint-13); color: var(--pb-gold-soft); font-size: 13px; font-weight: 600; }
.pb-kicker i { width: 6px; height: 6px; flex: none; border-radius: 99px; background: var(--pb-gold); }
.pb-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--pb-tint-16); color: var(--pb-gold-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pb-pill--solid { height: 26px; background: var(--pb-gold); color: var(--pb-on-gold); font-size: 12.5px; font-weight: 700; }
.pb-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--pb-tint-18); color: var(--pb-gold-soft); font-size: 11px; font-weight: 700; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--pb-chip); color: var(--pb-ink-82); font-size: 12.5px; white-space: nowrap; }
.pb-chip svg { width: 13px; height: 13px; flex: none; }
.pb-chip--warn { background: var(--pb-warn-bg); color: var(--pb-warn); font-weight: 600; }
.pb-code { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border: 1px solid var(--pb-line-16); border-radius: 8px; font-family: var(--pb-mono); font-size: 12px; color: var(--pb-ink-82); }
.pb-dot { width: 7px; height: 7px; flex: none; border-radius: 99px; background: var(--pb-online); }

/* Ticks: the gold-checked promise lines. */
.pb-ticks { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; list-style: none; font-size: 13px; color: var(--pb-ink-72); }
.pb-ticks li { display: inline-flex; align-items: flex-start; gap: 7px; }
.pb-ticks svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--pb-gold); }
.pb-ticks--stack { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--pb-ink-82); }
.pb-tickdot { width: 20px; height: 20px; flex: none; display: grid; place-items: center; margin-top: 1px; border-radius: 99px; background: var(--pb-tint-14); color: var(--pb-gold-text); }
.pb-tickdot svg { width: 11px; height: 11px; margin: 0; color: inherit; }

/* Forms -------------------------------------------------------------------- */
.pb-field { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--pb-ink-70); }
.pb-input, .pb-field :where(input, select, textarea) {
    width: 100%; height: 48px; padding: 0 12px;
    border: 1px solid var(--pb-line-12); border-radius: 12px; background: var(--pb-raised);
    color: var(--pb-ink); font-size: 15px; font-weight: 400;
    color-scheme: dark;
}
.pb-field :where(input[type="checkbox"], input[type="radio"]) { width: auto; height: auto; padding: 0; accent-color: var(--pb-gold); }
textarea.pb-input, .pb-field textarea { height: auto; min-height: 96px; padding: 12px; line-height: 1.5; resize: vertical; }
select.pb-input, .pb-field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c68a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.pb input::placeholder, .pb textarea::placeholder { color: var(--pb-ink-56); }
.pb-input:focus-visible, .pb-field :where(input, select, textarea):focus-visible { border-color: var(--pb-gold-line-55); }
.pb ::-webkit-calendar-picker-indicator { filter: invert(0.75); }
/* iOS zooms into any control under 16px on focus, which breaks a full-bleed page. */
@media (max-width: 719px) {
    .pb input:not([type="checkbox"]):not([type="radio"]), .pb select, .pb textarea { font-size: 16px !important; }
}

/* Cards, monogram, steps --------------------------------------------------- */
.pb-card { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--pb-line-10); border-radius: 22px; background: var(--pb-surface); }
.pb-card--hero { padding: 18px; box-shadow: var(--pb-shadow-hero); }
.pb-card--flat { background: transparent; border-color: var(--pb-line-08); }
.pb-card--tile { padding: 0; gap: 0; border-color: var(--pb-line-09); border-radius: 20px; overflow: hidden; }
.pb-card--band { gap: 24px; padding: 36px; border-color: var(--pb-gold-line); border-radius: 28px; background: var(--pb-band); }
a.pb-card, .pb-card--lift { color: var(--pb-ink); transition: border-color .25s ease, transform .25s ease; }
.pb a.pb-card:hover, .pb-card--lift:hover { border-color: rgba(201, 164, 92, 0.6); transform: translateY(-2px); color: var(--pb-ink); }
@media (max-width: 719px) { .pb-card--band { padding: 22px 16px; } }

.pb-media { position: relative; aspect-ratio: 4 / 3; background: var(--pb-raised); overflow: hidden; }
.pb-media img { width: 100%; height: 100%; object-fit: cover; }
.pb-monogram { display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; background: radial-gradient(120% 120% at 30% 20%, rgba(201, 164, 92, 0.16), rgba(201, 164, 92, 0.03) 70%); color: rgba(201, 164, 92, 0.6); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; }

.pb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
.pb-step { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid rgba(243, 237, 226, 0.07); border-radius: 16px; background: var(--pb-line-03); }
.pb-step__head { display: flex; align-items: center; gap: 10px; }
.pb-step__num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 99px; background: var(--pb-gold); color: var(--pb-on-gold); font-size: 13px; font-weight: 700; }
.pb-step__head::after { content: ""; flex: 1; height: 2px; background: rgba(201, 164, 92, 0.3); }
.pb-step__name { font-size: 15.5px; font-weight: 600; }
.pb-step__line { font-size: 13.5px; line-height: 1.55; color: var(--pb-ink-68); }
@media (max-width: 719px) { .pb-steps { grid-template-columns: minmax(0, 1fr); } }

/* Flash notes --------------------------------------------------------------- */
.pb-flash { position: relative; z-index: 50; padding: 12px var(--pb-pad) 0; }
.pb-flash__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; max-width: var(--pb-max); margin: 0 auto; padding: 12px 16px; border: 1px solid var(--pb-gold-line); border-radius: 14px; background: var(--pb-surface); font-size: 14px; color: var(--pb-ink-85); }
.pb-flash__in form { margin: 0; }

/* Header ------------------------------------------------------------------- */
.pb-head { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--pb-line-08); background: rgba(11, 10, 9, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pb-head__in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; max-width: var(--pb-max); margin: 0 auto; padding: 12px var(--pb-pad); }
.pb a.pb-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; color: var(--pb-ink); }
.pb-brand img, .pb-logo { width: 34px; height: 34px; flex: none; border-radius: 999px; object-fit: cover; border: 1px solid var(--pb-gold-line-50); background: #000; }
.pb-brand__word { display: grid; line-height: 1.15; }
.pb-brand__word b { font-size: 15px; font-weight: 600; }
.pb-brand__word small { font-size: 11.5px; color: var(--pb-ink-60); }
.pb-nav { display: none; align-items: center; gap: 2px; margin-left: 10px; }
.pb a.pb-nav__link, .pb a.pb-head__link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--pb-ink-78); white-space: nowrap; }
.pb a.pb-head__link { height: 38px; color: var(--pb-ink-85); }
.pb a.pb-nav__link:hover, .pb a.pb-head__link:hover, .pb a.pb-nav__link[aria-current="page"], .pb a.pb-head__link[aria-current="page"] { background: var(--pb-line-06); color: var(--pb-ink); }
.pb-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--pb-gold); color: var(--pb-on-gold); font-family: var(--pb-mono); font-size: 11.5px; font-weight: 500; }
.pb-head__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pb-head__wide { display: none; align-items: center; gap: 8px; }
.pb a.pb-switch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--pb-line-12); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--pb-ink-85); white-space: nowrap; }
.pb a.pb-switch:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }
.pb-switch svg { width: 13px; height: 13px; }
.pb-switch .pb-mono { font-size: 11.5px; }
.pb-menu-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--pb-line-12); border-radius: 12px; background: transparent; color: var(--pb-ink); }
.pb-menu-btn svg { width: 19px; height: 19px; }
.pb-menu-btn[aria-expanded="true"] .pb-menu-btn__open, .pb-menu-btn[aria-expanded="false"] .pb-menu-btn__close { display: none; }
.pb-menu { display: grid; gap: 10px; max-width: var(--pb-max); margin: 0 auto; padding: 6px var(--pb-pad) 18px; }
/* The panel lives in the sticky header, so on a short screen (a phone held sideways)
   it scrolls itself; otherwise its last rows sit below the fold, out of reach. */
.pb-menu:not([hidden]) { max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
.pb-menu__list { display: grid; border: 1px solid var(--pb-line-09); border-radius: 16px; background: var(--pb-surface); overflow: hidden; }
.pb a.pb-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--pb-line-06); font-size: 16px; font-weight: 500; color: var(--pb-ink); }
.pb a.pb-menu__row:last-child { border-bottom: 0; }
.pb a.pb-menu__row[aria-current="page"] { color: var(--pb-gold-soft); }
.pb-menu__row svg { width: 16px; height: 16px; flex: none; color: var(--pb-gold); }
.pb-menu__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb a.pb-menu__pair-btn { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--pb-line-12); border-radius: 12px; color: var(--pb-ink); font-size: 14px; font-weight: 500; }
/* No scripts: no menu button, and the links sit in a scrolling row under the brand. */
html:not(.js) .pb-menu-btn { display: none; }
@media (max-width: 1039px) {
    html:not(.js) .pb-nav { display: flex; order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
    .pb-head__in { gap: 12px; }
    /* Narrow is touch: the gold button and the bag match the 44px menu button. */
    .pb-head__end .pb-btn, .pb .pb-head__end > a.pb-head__link { height: 44px; }
}
@media (min-width: 1040px) {
    .pb-nav, .pb-head__wide { display: flex; }
    .pb-menu-btn, .pb-menu { display: none !important; }
}
/* Just past the breakpoint the Nigeria nav (five long labels) wrapped the bar onto
   two rows at 1040px. Tighter links keep one row; a provider's portal link waits
   for room (it stays in the footer). */
@media (min-width: 1040px) and (max-width: 1199px) {
    .pb-head__in { gap: 12px; }
    .pb-nav { margin-left: 2px; }
    .pb a.pb-nav__link { padding: 0 8px; }
}
@media (min-width: 1040px) and (max-width: 1239px) {
    .pb a.pb-head__portal { display: none; }
}

/* Footer ------------------------------------------------------------------- */
.pb-foot { position: relative; border-top: 1px solid var(--pb-line-08); background: var(--pb-foot); }
.pb-foot__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: var(--pb-max); margin: 0 auto; padding: 56px var(--pb-pad) 30px; }
.pb-foot__brand { display: grid; gap: 12px; align-content: start; grid-column: 1 / -1; }
.pb-foot__lockup { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.pb-foot__lockup img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; background: #000; }
.pb-foot__line { max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--pb-ink-64); }
.pb-foot__socials { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pb a.pb-foot__social { display: inline-flex; align-items: center; min-height: 34px; font-size: 14px; color: var(--pb-gold-text); }
.pb a.pb-foot__switch { width: fit-content; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--pb-line-12); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--pb-ink); }
.pb a.pb-foot__switch:hover { border-color: var(--pb-gold-line-50); }
.pb-foot__switch .pb-mono { font-size: 11.5px; }
.pb-foot__col { display: grid; gap: 2px; align-content: start; }
.pb-foot__col h2 { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--pb-gold-text); }
.pb a.pb-foot__link { display: flex; align-items: center; min-height: 34px; font-size: 14px; color: var(--pb-ink-74); }
.pb a.pb-foot__link:hover { color: var(--pb-ink); }
.pb-foot__bottom { display: flex; flex-wrap: wrap; gap: 8px 18px; max-width: var(--pb-max); margin: 0 auto; padding: 16px var(--pb-pad) 24px; border-top: 1px solid var(--pb-line-06); font-size: 13px; color: var(--pb-ink-56); }
.pb .pb-foot__bottom a { color: var(--pb-ink-66); }
.pb .pb-foot__bottom a:hover { color: var(--pb-ink); }
@media (max-width: 719px) {
    .pb-foot__in { grid-template-columns: minmax(0, 1fr); padding-top: 36px; padding-bottom: 22px; }
    /* 44px touch targets on a phone (the design's 34px rows are for a pointer). */
    .pb a.pb-foot__link, .pb a.pb-foot__social { min-height: 44px; min-width: 44px; }
    .pb a.pb-foot__switch { height: 44px; }
    .pb-foot__bottom { gap: 0 18px; padding-top: 6px; padding-bottom: 14px; }
    .pb .pb-foot__bottom a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .pb-foot__bottom > span { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 1040px) {
    .pb-foot__in { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
    .pb-foot__brand { grid-column: auto; }
}

/* Phone dock (small screens only) ------------------------------------------- */
.pb-dock { display: none; }
@media (max-width: 719px) {
    .pb-dock { position: sticky; bottom: 0; z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pb-line-10); background: rgba(11, 10, 9, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .pb-dock .pb-btn { height: 50px; border-radius: 13px; font-size: 14.5px; }
    .pb-dock .pb-btn--ghost { border-color: var(--pb-line-18); }
}

/* Dialog (site.js) --------------------------------------------------------- */
.pb-dialog { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.pb-dialog__scrim { position: absolute; inset: 0; background: rgba(5, 4, 3, 0.72); }
.pb-dialog__panel { position: relative; display: grid; gap: 14px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border: 1px solid var(--pb-line-12); border-radius: 22px; background: var(--pb-surface); box-shadow: var(--pb-shadow-drawer); }
.pb-dialog__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--pb-line-12); border-radius: 12px; background: transparent; color: var(--pb-ink); }
.pb-dialog__close svg { width: 17px; height: 17px; }
html.pb-locked, html.pb-locked body { overflow: hidden; }
@media (max-width: 719px) {
    .pb-dialog { place-items: end stretch; padding: 0; }
    .pb-dialog__panel { max-width: none; max-height: 88vh; border-radius: 22px 22px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Remember switch ---------------------------------------------------------- */
.pb-switchbtn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--pb-ink-74); font-size: 14px; text-align: left; }
.pb-switchbtn__track { position: relative; width: 40px; height: 24px; flex: none; border-radius: 99px; background: var(--pb-line-18); transition: background-color .2s ease; }
.pb-switchbtn__track i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: var(--pb-ink); transition: left .2s ease; }
.pb-switchbtn[aria-checked="true"] .pb-switchbtn__track { background: var(--pb-gold); }
.pb-switchbtn[aria-checked="true"] .pb-switchbtn__track i { left: 19px; }

/* Front door ---------------------------------------------------------------- */
.pb-door { position: relative; z-index: 1; display: grid; align-content: center; gap: 28px; min-height: 100vh; min-height: 100svh; max-width: 1080px; margin: 0 auto; padding: 40px 32px; }
.pb-door__brand { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pb-door__brand img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 1px solid var(--pb-gold-line-50); background: #000; }
.pb-door__intro { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pb-door__intro h1 { font-size: 44px; font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.pb-door__intro p { max-width: 50ch; font-size: 16px; line-height: 1.6; color: var(--pb-ink-70); text-wrap: pretty; }
.pb-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pb a.pb-doorcard { display: flex; flex-direction: column; gap: 18px; padding: 26px; border: 1px solid var(--pb-line-10); border-radius: 22px; background: var(--pb-surface); color: var(--pb-ink); transition: border-color .25s ease, transform .25s ease; }
.pb a.pb-doorcard:hover { border-color: var(--pb-gold-line-70); transform: translateY(-2px); color: var(--pb-ink); }
.pb a.pb-doorcard.is-suggested { border-color: var(--pb-gold-line-55); box-shadow: var(--pb-shadow-hero); }
.pb-doorcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-doorcard__name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pb-doorcard__cities { font-size: 14px; color: var(--pb-ink-66); }
.pb-doorcard__lines { display: grid; gap: 10px; align-content: start; flex: 1 0 auto; padding: 16px 0; border-top: 1px solid var(--pb-line-08); border-bottom: 1px solid var(--pb-line-08); }
.pb-doorcard__line { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--pb-ink-82); }
/* The lines take any spare height, so the rules and the Enter buttons line up when one card wraps more. */
.pb-doorcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pb-doorcard__money { font-size: 13px; color: var(--pb-ink-60); }
.pb-doorcard__enter { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--pb-line-16); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--pb-ink); transition: background-color .2s ease, border-color .2s ease; }
.pb-doorcard__enter svg { width: 15px; height: 15px; }
.pb-doorcard.is-suggested .pb-doorcard__enter { background: var(--pb-gold); border-color: var(--pb-gold); color: var(--pb-on-gold); }
.pb a.pb-doorcard:hover .pb-doorcard__enter { border-color: var(--pb-gold-line-50); }
.pb a.pb-doorcard.is-suggested:hover .pb-doorcard__enter { background: var(--pb-gold-hover); border-color: var(--pb-gold-hover); }
.pb-door__remember { justify-self: center; }
.pb-door__note { text-align: center; font-size: 13px; color: var(--pb-ink-56); text-wrap: balance; }
@media (max-width: 719px) {
    .pb-door { padding: 24px 16px 32px; }
    .pb-door__intro h1 { font-size: 30px; }
    .pb-doors { grid-template-columns: minmax(0, 1fr); }
    .pb a.pb-doorcard { padding: 20px; }
}

/* Motion -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .pb a.pb-card:hover, .pb-card--lift:hover, .pb a.pb-doorcard:hover { transform: none; }
}

/* House mark (site.parts.mark) ---------------------------------------------
   A gold ring around an "A", in place of /icons/favicon-180.png, which still
   reads "Annels Braids". Sizes from the design: 30 footer, 34 header and chat
   card, 36 photo label, 44 front door. */
.pb-mark { --pb-mark-size: 34px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--pb-mark-size); height: var(--pb-mark-size); border: 1px solid var(--pb-gold-line-50); border-radius: 999px; background: radial-gradient(120% 120% at 30% 20%, rgba(201, 164, 92, 0.2), rgba(201, 164, 92, 0.02) 70%), #000; color: var(--pb-gold-soft); font-family: var(--pb-font); font-size: calc(var(--pb-mark-size) * 0.44); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.pb-mark::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--pb-gold); border-radius: inherit; opacity: 0.85; }
.pb-mark > span { position: relative; }
.pb-mark--30 { --pb-mark-size: 30px; }
.pb-mark--36 { --pb-mark-size: 36px; }
.pb-mark--44 { --pb-mark-size: 44px; }

/* Shared bits the pages use -------------------------------------------------- */
/* The reverse of pb-js-only: a label that only matters when every tab panel shows. */
html.js .pb-nojs-only { display: none !important; }
.pb-pill--26 { height: 26px; padding: 0 10px; }
.pb-chip--gold { background: var(--pb-tint-14); color: var(--pb-gold-soft); font-weight: 600; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-actions--center { justify-content: center; }
.pb-note { font-size: 14px; line-height: 1.5; color: var(--pb-ink-68); }
.pb a.pb-arrowlink { width: fit-content; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--pb-gold-soft); }
.pb a.pb-arrowlink:hover { color: var(--pb-gold-bright); }
.pb-arrowlink svg { width: 15px; height: 15px; flex: none; }
.pb-num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 99px; background: var(--pb-tint-16); color: var(--pb-gold-soft); font-size: 13px; font-weight: 700; }

/* Page sections: the first after the hero sits lower; the rest share a bottom gap. */
.pb-sec { position: relative; z-index: 1; padding-bottom: 72px; }
.pb-sec--first { padding-top: 64px; }
.pb-sec__in { display: grid; gap: 22px; }
.pb-sec__intro { display: grid; gap: 8px; max-width: 60ch; }
.pb-sec__intro--wide { gap: 10px; max-width: 64ch; }
.pb-two { display: grid; gap: 14px; }
@media (max-width: 719px) {
    .pb-sec { padding-bottom: 40px; }
    .pb-sec--first { padding-top: 36px; }
}
@media (min-width: 1040px) { .pb-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* UK home: hero (public.v3.home) --------------------------------------------- */
.pb-hero { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.pb-hero__text { display: grid; gap: 18px; align-content: start; order: 1; }
.pb-hero__media { position: relative; order: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--pb-line-10); border-radius: 26px; background: var(--pb-surface); }
.pb-hero__media > img { width: 100%; height: 100%; object-fit: cover; }
.pb-hero__label { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pb-line-12); border-radius: 16px; background: rgba(11, 10, 9, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pb-hero__label-text { display: grid; flex: 1; line-height: 1.3; }
.pb-hero__label-text b { font-size: 14px; font-weight: 600; }
.pb-hero__label-text small { font-size: 12.5px; color: var(--pb-ink-68); }
.pb-hero__more { width: fit-content; }
.pb-chatcard__head { display: flex; align-items: center; gap: 10px; }
.pb-chatcard__who { display: grid; line-height: 1.3; }
.pb-chatcard__who b { font-size: 16px; font-weight: 600; }
.pb-chatcard__who small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(243, 237, 226, 0.62); }
.pb-bubble { width: fit-content; max-width: 92%; padding: 12px 15px; border: 1px solid var(--pb-line-09); border-radius: 18px 18px 18px 6px; background: var(--pb-raised); font-size: 15px; line-height: 1.5; }
.pb-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.pb a.pb-quick__link { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border: 1px solid rgba(201, 164, 92, 0.4); border-radius: 12px; color: var(--pb-gold-soft); font-size: 14px; font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.pb a.pb-quick__link:hover { background: rgba(201, 164, 92, 0.12); color: var(--pb-gold-bright); }
@media (max-width: 719px) {
    .pb-hero { gap: 20px; padding-top: 20px; padding-bottom: 40px; }
    .pb-hero__media { aspect-ratio: 4 / 3; }
    .pb-hero__label { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 10px 12px; }
    .pb a.pb-quick__link { height: 44px; }
}
@media (min-width: 1040px) {
    .pb-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    .pb-hero__text { order: 0; }
    .pb-hero__media { order: 1; aspect-ratio: 4 / 5; }
}

/* UK home: rooms -------------------------------------------------------------- */
.pb-room { display: grid; gap: 22px; }
.pb-room__name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pb-room__line { max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--pb-ink-72); }
.pb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pb-tile, .pb-person { grid-template-rows: auto 1fr; align-content: stretch; }
.pb-tile__body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.pb-tile__text { display: grid; gap: 3px; }
.pb-tile__name { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.pb .pb-tile__name a { color: var(--pb-ink); }
.pb .pb-tile__name a:hover { color: var(--pb-gold-bright); }
.pb-tile__note { font-size: 14px; line-height: 1.5; color: var(--pb-ink-68); }
.pb-tile__action, .pb-person__body > .pb-btn { margin-top: auto; }
@media (max-width: 719px) { .pb-tiles { grid-template-columns: minmax(0, 1fr); } }
/* Four tiles (Hair): two by two at mid width, one row of four when wide. */
@media (min-width: 720px) and (max-width: 1039px) { .pb-tiles--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pb-tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The tile name is a link to its category page: a finger-sized hit area without moving the type. */
.pb .pb-tile__name a { position: relative; }
.pb .pb-tile__name a::after { content: ""; position: absolute; inset: -12px -6px; }

/* UK home: mobile braiders ---------------------------------------------------- */
.pb-braiders__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--pb-ink-70); }
.pb-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pb-check { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--pb-line-08); border-radius: 16px; background: var(--pb-line-03); }
.pb-check__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--pb-tint-14); color: var(--pb-gold-text); }
.pb-check__icon svg { width: 19px; height: 19px; }
.pb-check__text { display: grid; gap: 3px; }
.pb-check__text b { font-size: 15px; font-weight: 600; }
.pb-check__text span { font-size: 13.5px; line-height: 1.5; color: var(--pb-ink-68); }
.pb-braiders .pb-tabpanel, .pb-braiders__pay { display: grid; gap: 12px; }
.pb-match { display: grid; gap: 12px; align-items: stretch; }
.pb-match__form { padding: 18px; border-radius: 20px; }
.pb-match__title { font-size: 17px; font-weight: 600; }
.pb-match__fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pb-howto { padding: 18px; border-radius: 20px; }
.pb-howto__list { display: grid; gap: 14px; }
.pb-howto__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--pb-ink-78); }
.pb-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pb-person__body { display: flex; flex-direction: column; gap: 10px; padding: 15px; }
.pb-person__who { display: grid; gap: 2px; }
.pb-person__name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.pb-person__where { font-size: 13.5px; color: var(--pb-ink-66); }
.pb-ratepill { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; background: rgba(11, 10, 9, 0.82); color: var(--pb-ink); font-size: 12.5px; font-weight: 600; }
.pb-ratepill svg { width: 12px; height: 12px; color: var(--pb-gold); }
@media (max-width: 1039px) { .pb-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
    .pb-checks, .pb-match__fields, .pb-people { grid-template-columns: minmax(0, 1fr); }
    /* Both modes in view on a phone: two equal halves, no sideways scroll. */
    .pb-braiders .pb-seg { width: 100%; }
    .pb-braiders .pb-seg__btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}
/* "Recommended" only where it fits beside "Match me". */
@media (max-width: 419px) { .pb-braiders .pb-seg .pb-tag { display: none; } }
@media (min-width: 1040px) { .pb-match { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* UK home: shelf, plans, closing band ------------------------------------------ */
.pb-shelf, .pb-plancard { border-color: var(--pb-line-09); }
.pb-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pb a.pb-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid transparent; border-radius: 12px; background: var(--pb-raised); transition: border-color .2s ease; }
.pb a.pb-thumb:hover { border-color: var(--pb-gold-line-50); }
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pb-planrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 14px; background: var(--pb-raised); }
.pb-planrow__name { display: grid; gap: 2px; }
.pb-planrow__name b { font-size: 15px; font-weight: 600; }
.pb-planrow__name small { font-size: 13px; color: var(--pb-ink-64); }
.pb-closing { display: grid; justify-items: center; gap: 14px; padding: 36px; border: 1px solid rgba(201, 164, 92, 0.22); border-radius: 28px; background: radial-gradient(80% 120% at 50% 0%, rgba(201, 164, 92, 0.12), transparent 65%), #100e0b; text-align: center; }
.pb-closing .pb-intro { max-width: 44ch; color: var(--pb-ink-72); }
@media (max-width: 719px) { .pb-closing { padding: 22px 16px; } }

/* Nigeria home (public.v3.nigeria) -------------------------------------------- */
/* Section heads with a button on the right (categories, providers). */
.pb-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }

/* Hero collage: one tall tile and two stacked, in the hero photo's frame and order. */
.pb-collage { position: relative; z-index: 1; order: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 16 / 9; }
.pb-collage__tile { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--pb-line-10); border-radius: 22px; background: var(--pb-surface); }
.pb-collage__tile:first-child { grid-row: 1 / span 2; }
.pb-collage__tile > img { width: 100%; height: 100%; object-fit: cover; }
.pb-collage__tile .pb-monogram { font-size: 56px; }
.pb-collage__tag { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 20px); padding: 6px 10px 6px 6px; border-radius: 99px; background: rgba(11, 10, 9, 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pb-collage__initials { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 99px; background: var(--pb-gold); color: var(--pb-on-gold); font-size: 10px; font-weight: 700; }
.pb-collage__name { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pb-collage__area { flex: none; font-size: 12px; color: var(--pb-ink-66); white-space: nowrap; }
/* The house's own press-on photo: a plain label, no initials. */
.pb-collage__tag--house { display: block; padding: 7px 12px; overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 719px) {
    .pb-collage { aspect-ratio: 4 / 3; gap: 8px; }
    .pb-collage__tile { border-radius: 18px; }
    .pb-collage__tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
    /* The two small tiles are about 150px wide on a phone: the name, not the area. */
    .pb-collage__area { display: none; }
}
@media (min-width: 1040px) { .pb-collage { order: 1; aspect-ratio: 4 / 5; } }

/* Search card: Choose a provider | Match me, then the fields. */
.pb-search__form { display: grid; gap: 14px; }
.pb-search .pb-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-color: var(--pb-line-12); }
.pb-search .pb-seg__btn { justify-content: center; padding: 0 10px; }
/* Two fields in Choose, three in Match: they share the row either way. */
.pb-search__fields { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-search__fields > .pb-field { flex: 1 1 150px; }
.pb-search__fields > .pb-search__service { flex-grow: 1.3; }
.pb-search__note { font-size: 13.5px; line-height: 1.55; color: var(--pb-ink-68); }
@media (max-width: 719px) { .pb-search__fields > .pb-field { flex-basis: 100%; } }

/* Before launch: the recruiting card in the search card's place. */
.pb-recruit .pb-ticks--stack { font-size: 14px; }

/* Provider types: link tiles, four across when wide. */
.pb-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pb-types > li { display: grid; }
.pb-type { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 16px; border: 1px solid var(--pb-line-08); border-radius: 16px; background: var(--pb-surface); color: var(--pb-ink); }
.pb a.pb-type { color: var(--pb-ink); transition: border-color .2s ease; }
.pb a.pb-type:hover { border-color: var(--pb-gold-line-45); color: var(--pb-ink); }
.pb-type__text { display: grid; gap: 2px; }
.pb-type__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.pb-type__note { font-size: 13px; color: var(--pb-ink-64); }
.pb-type svg { width: 16px; height: 16px; flex: none; color: var(--pb-gold); }
@media (max-width: 1039px) { .pb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .pb-types { grid-template-columns: minmax(0, 1fr); } }

/* Provider cards (site.parts.provider-card), in the braider cards' grid. */
.pb-provider__craft { font-size: 13.5px; color: var(--pb-ink-70); }
.pb-provider__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(243, 237, 226, 0.07); }
.pb-provider__foot .pb-btn { margin-left: auto; }
.pb-provider__from { display: grid; gap: 1px; }
.pb-provider__from small { font-size: 12px; color: var(--pb-ink-60); }
.pb-provider__from .pb-price { font-size: 16px; }
.pb-ratepill--new { color: var(--pb-gold-soft); }

/* Where we cover: the pilot areas as chips. */
.pb-cover__city { font-size: 14px; font-weight: 600; color: var(--pb-ink-82); }
.pb-cover .pb-chips { gap: 8px; }
.pb-cover .pb-chip { height: 30px; padding: 0 11px; font-size: 13.5px; }

/* Rooms and price list (public.v3.services, room, category) -------------------- */
/* The price list's head: the Pages intro (eyebrow, the title at h2 size, a lede). */
.pb-pagehead { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; padding-top: 40px; padding-bottom: 8px; }
.pb-pagehead .pb-roomnav { margin-top: 8px; }
@media (max-width: 719px) { .pb-pagehead { padding-top: 20px; } }

/* The rooms as links in the segmented style; aria-current marks the room you are in. */
.pb-roomnav { max-width: 100%; }
.pb-roomnav .pb-seg { margin: 0; }
.pb-roomnav li { display: flex; flex: none; }
.pb a.pb-seg__btn { color: var(--pb-ink-66); }
.pb a.pb-seg__btn:hover { color: var(--pb-ink); }
.pb a.pb-seg__btn[aria-current="page"] { background: var(--pb-seg-on); color: var(--pb-ink); box-shadow: var(--pb-shadow-seg); }

/* A room's name above its heading, inside the h2 so the heading says which room. */
.pb-h2__kicker { display: block; margin-bottom: 8px; line-height: 1.4; letter-spacing: 0; }
.pb-sec__count { font-size: 13.5px; color: var(--pb-ink-64); white-space: nowrap; }
.pb-pricelist + .pb-pricelist .pb-sec__head { padding-top: 40px; border-top: 1px solid var(--pb-line-08); }
@media (max-width: 719px) { .pb-pricelist + .pb-pricelist .pb-sec__head { padding-top: 28px; } }

/* Filter chips (hair families), drawn only with scripts. */
.pb-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-filter { height: 38px; padding: 0 13px; border: 1px solid var(--pb-line-14); border-radius: 11px; background: transparent; color: var(--pb-ink-82); font-size: 13.5px; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.pb-filter:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }
.pb-filter[aria-pressed="true"] { background: var(--pb-tint-14); border-color: var(--pb-gold); color: var(--pb-gold-soft); }
@media (max-width: 719px) { .pb-filter { height: 44px; padding: 0 15px; } }

/* Service cards (site.parts.service-card): four across when wide, three, then two on a phone. */
.pb-svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1039px) {
    .pb-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pb-svcs--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) { .pb-svcs, .pb-svcs--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 359px) { .pb-svcs, .pb-svcs--four { grid-template-columns: minmax(0, 1fr); } }
.pb-svc { grid-template-rows: auto 1fr; align-content: stretch; }
.pb-media--tall { aspect-ratio: 4 / 5; }
.pb-media--wide { aspect-ratio: 16 / 10; }
.pb-media picture { display: block; width: 100%; height: 100%; }
.pb-svc .pb-monogram { font-size: 40px; }
.pb-svc__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px 15px; }
.pb-svc__head { display: grid; gap: 3px; }
.pb-svc__name { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
/* The name links to its category page: a finger-sized hit area without moving the type. */
.pb .pb-svc__name a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--pb-ink); }
.pb .pb-svc__name a:hover { color: var(--pb-gold-bright); }
.pb-svc__price { font-family: var(--pb-mono); font-size: 13.5px; color: var(--pb-gold-soft); }
.pb-svc__price--quoted { font-family: var(--pb-font); color: var(--pb-ink-68); }
.pb-svc__note { font-size: 13.5px; line-height: 1.5; color: var(--pb-ink-68); }
.pb-svc__line { font-size: 12.5px; line-height: 1.5; color: var(--pb-ink-64); }
.pb-svc__action { margin-top: auto; }
/* A two-column phone card is about 150px inside: chips wrap rather than spill. */
.pb-svc .pb-chip { height: auto; min-height: 26px; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; white-space: normal; }
@media (max-width: 719px) { .pb-svc__body { gap: 8px; padding: 12px; } }

/* What a style comes in: a disclosure inside the card. */
.pb-opts { border-top: 1px solid var(--pb-line-08); }
.pb-opts summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pb-gold-soft); }
.pb-opts summary::-webkit-details-marker { display: none; }
.pb-opts summary svg { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.pb-opts[open] summary svg { transform: rotate(180deg); }
.pb-opts__list { display: grid; gap: 8px; padding: 2px 0 6px; }
.pb-opts__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; font-size: 13px; line-height: 1.4; color: var(--pb-ink-78); }
.pb-opts__name small { display: block; font-size: 12px; color: var(--pb-ink-56); }
.pb-opts__price { font-family: var(--pb-mono); font-size: 12.5px; color: var(--pb-gold-soft); white-space: nowrap; }
@media (max-width: 719px) {
    .pb-opts summary { min-height: 44px; }
    .pb-opts__list li { grid-template-columns: minmax(0, 1fr); }
    .pb-opts__price { white-space: normal; }
}

/* Room and category hero (design Pages §3.1): text left and photo right when wide,
   the photo first below that. */
.pb-roomhero { position: relative; z-index: 1; display: grid; gap: 22px; padding-top: 40px; padding-bottom: 48px; }
.pb-roomhero__grid { display: grid; gap: 44px; align-items: center; }
.pb-roomhero__text { display: grid; gap: 16px; align-content: start; order: 1; }
.pb-roomhero__lede { max-width: 44ch; }
.pb-roomhero__actions { margin-top: 4px; }
.pb-roomhero__price { font-size: 22px; }
.pb-roomhero__media { position: relative; order: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--pb-line-10); border-radius: 26px; background: var(--pb-surface); }
.pb-roomhero__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-roomhero__media picture { display: block; width: 100%; height: 100%; }
.pb-monogram--xl { font-size: 96px; letter-spacing: -0.04em; color: rgba(201, 164, 92, 0.55); background: radial-gradient(90% 90% at 30% 20%, rgba(201, 164, 92, 0.2), rgba(201, 164, 92, 0.03) 70%); }
@media (max-width: 719px) {
    .pb-roomhero { gap: 18px; padding-top: 20px; padding-bottom: 32px; }
    .pb-roomhero__grid { gap: 20px; }
    .pb-roomhero__media { aspect-ratio: 4 / 3; }
    /* A monogram is not worth a phone's first screen: a shorter band, so the name shows. */
    .pb-roomhero__media:has(> .pb-monogram) { aspect-ratio: 16 / 7; }
    .pb-monogram--xl { font-size: 64px; }
}
@media (min-width: 1040px) {
    .pb-roomhero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pb-roomhero__text { order: 0; }
    .pb-roomhero__media { order: 1; aspect-ratio: 5 / 4; }
}
/* A category name runs longer than a room's ("Braids & protective styling"). */
.pb-h1--long { font-size: 46px; }
@media (max-width: 719px) { .pb-h1--long { font-size: 36px; } }
@media (min-width: 1040px) { .pb-h1--long { font-size: 56px; } }

/* Breadcrumb (category pages). */
.pb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--pb-ink-60); }
.pb-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.pb-crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--pb-ink-56); }
.pb .pb-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--pb-ink-74); }
.pb .pb-crumbs a:hover { color: var(--pb-gold-bright); }
.pb-crumbs [aria-current] { color: var(--pb-ink-85); }
/* A phone's 44px target, grown into the space around the word so the trail does not spread. */
@media (max-width: 719px) { .pb .pb-crumbs a { min-height: 44px; padding: 0 10px; margin: 0 -10px; } }

/* One style's prices (a category sold as a single style: lashes, a facial). */
.pb-pricecard { gap: 6px; border-color: var(--pb-line-09); }
.pb-pricecard .pb-sec__head { align-items: center; margin-bottom: 6px; }
.pb-pricetable { display: grid; }
.pb-pricetable li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name time price"; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--pb-line-08); font-size: 15px; }
.pb-pricetable__name { grid-area: name; color: var(--pb-ink); }
.pb-pricetable__time { grid-area: time; font-size: 13px; color: var(--pb-ink-60); white-space: nowrap; }
.pb-pricetable__price { grid-area: price; font-family: var(--pb-mono); font-size: 14.5px; color: var(--pb-gold-soft); white-space: nowrap; text-align: right; }
@media (max-width: 719px) { .pb-pricetable li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "time price"; justify-items: start; } .pb-pricetable__price { justify-self: end; } }

/* What's included and how the day runs, beside "Before you book". */
.pb-split { display: grid; gap: 28px; align-items: start; }
.pb-split__main { display: grid; gap: 32px; }
.pb-block { display: grid; gap: 14px; }
.pb-daysteps b { font-weight: 600; color: var(--pb-ink); }
.pb-facts { gap: 16px; padding: 22px; border-color: var(--pb-gold-line); }
.pb-facts__list { display: grid; gap: 14px; }
.pb-facts__list > div { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--pb-line-06); }
.pb-facts__list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.pb-facts__list dt { font-size: 12.5px; font-weight: 600; color: var(--pb-gold-text); }
.pb-facts__list dd { font-size: 14.5px; line-height: 1.55; color: var(--pb-ink-82); }
@media (min-width: 1040px) {
    .pb-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; }
    .pb-facts { position: sticky; top: 92px; }
}

/* The other rooms (site.parts.other-rooms). */
.pb-roomlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pb-roomlinks > li { display: grid; }
.pb a.pb-roomlink { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 18px; border: 1px solid var(--pb-line-09); border-radius: 18px; background: var(--pb-surface); color: var(--pb-ink); transition: border-color .2s ease, transform .2s ease; }
.pb a.pb-roomlink:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); transform: translateY(-2px); }
.pb-roomlink__num { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--pb-tint-14); color: var(--pb-gold-soft); font-family: var(--pb-mono); font-size: 13px; }
.pb-roomlink__text { display: grid; flex: 1; gap: 2px; }
.pb-roomlink__name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pb-roomlink__index { font-size: 13.5px; color: var(--pb-ink-64); }
.pb-roomlink svg { width: 16px; height: 16px; flex: none; color: var(--pb-gold); }
@media (max-width: 719px) { .pb-roomlinks { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pb a.pb-roomlink:hover { transform: none; } }

/* Plans, Help, contact, travel and CMS pages (public.v3.subscriptions, help,
   contact, locations, page) ------------------------------------------------------ */
/* A page head's lede or a hero lede from the editor keeps a line break she typed. */
.pb-lede--text { white-space: pre-line; }
.pb-pagehead__seg { margin-top: 8px; }
/* The section straight after a page head: the design's 22px between head and body. */
.pb-sec--tight { padding-top: 14px; }

/* Plans (design Pages §3.3): three cards when wide, one above another below that. */
.pb-plans { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 1040px) { .pb-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pb-plan { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-color: var(--pb-line-09); }
.pb-plan--featured { border-color: var(--pb-gold-line-55); background: linear-gradient(180deg, #17140f, #110f0c); }
.pb-plan__tag { width: fit-content; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--pb-tint-14); color: var(--pb-gold-soft); font-size: 12.5px; font-weight: 600; }
.pb-plan__name { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
/* One length at a time with scripts (the toggle); every length, labelled, without. */
.pb-plan__term { display: flex; flex: 1 0 auto; flex-direction: column; gap: 14px; }
html.js [data-pb-seg-on]:not(.is-on) { display: none; }
html:not(.js) .pb-plan__term + .pb-plan__term { padding-top: 14px; border-top: 1px solid var(--pb-line-08); }
.pb-plan__length { font-size: 13px; font-weight: 600; color: var(--pb-gold-text); }
.pb-plan__blurb { font-size: 14px; line-height: 1.55; color: var(--pb-ink-70); }
.pb-plan__price { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--pb-raised); }
.pb-plan__amount { font-size: 30px; line-height: 1.2; }
.pb-plan__per { font-size: 13px; line-height: 1.5; color: var(--pb-ink-66); }
.pb-ticks--plan { display: grid; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--pb-ink-82); }
.pb-ticks--plan svg { width: 15px; height: 15px; margin-top: 3px; }
.pb-btn.pb-plan__cta { height: 48px; margin-top: auto; border-radius: 13px; font-size: 15px; }
.pb-plans__small { max-width: 80ch; font-size: 13px; color: var(--pb-ink-60); }
@media (max-width: 719px) { .pb-plan { padding: 18px 16px; } }

/* Help (design Pages §3.4): the questions on the left, contact, travel and the
   policies on the right when wide; one column below that. */
.pb-help { display: grid; gap: 16px; align-items: start; }
.pb-help__main, .pb-help__side { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1040px) { .pb-help { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }

.pb-search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 720px; height: 52px; padding: 0 14px; border: 1px solid var(--pb-line-12); border-radius: 14px; background: var(--pb-surface); }
.pb-search svg { width: 17px; height: 17px; flex: none; color: var(--pb-ink-60); }
.pb-search input { flex: 1; height: 50px; padding: 0; border: 0; background: transparent; color: var(--pb-ink); font-size: 15px; -webkit-appearance: none; appearance: none; }
.pb-search input::-webkit-search-cancel-button { filter: invert(0.75); }
/* The ring goes round the whole box, not the bare input inside it. */
.pb .pb-search input:focus-visible { outline: none; }
.pb-search:focus-within { border-color: var(--pb-gold-line-55); outline: 2px solid var(--pb-gold); outline-offset: 2px; }

.pb-faqs { display: grid; gap: 8px; }
.pb-faq { border: 1px solid var(--pb-line-09); border-radius: 16px; background: var(--pb-surface); transition: border-color .2s ease; }
.pb-faq[open] { border-color: rgba(201, 164, 92, 0.4); }
.pb-faq__q { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; border-radius: 15px; list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.pb-faq__q::-webkit-details-marker { display: none; }
.pb-faq__q > span { flex: 1; }
.pb-faq__q svg, .pb-policy__head svg { width: 17px; height: 17px; flex: none; color: var(--pb-gold); transition: transform .2s ease; }
.pb-faq[open] > .pb-faq__q svg, .pb-policy[open] > .pb-policy__head svg { transform: rotate(180deg); }
.pb-faq__a { padding: 0 16px 16px; }
.pb-faq__a .pb-prose { gap: 10px; font-size: 14.5px; line-height: 1.65; color: rgba(243, 237, 226, 0.76); }
/* The ring sits inside the card's edge rather than across its border. */
.pb .pb-faq__q:focus-visible, .pb .pb-policy__head:focus-visible { outline-offset: -2px; }
.pb-faq-empty { display: grid; gap: 12px; justify-items: start; padding: 20px; border: 1px dashed var(--pb-line-16); border-radius: 16px; font-size: 14.5px; line-height: 1.55; color: var(--pb-ink-70); }

/* The cards on the right: a gold label, then rows. */
.pb-listcard { gap: 0; padding: 6px 16px; border-color: var(--pb-line-09); border-radius: 20px; }
.pb-listcard__title { padding: 10px 0 4px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--pb-gold-text); }

.pb-contact { display: grid; }
.pb-contact > li { display: grid; }
.pb a.pb-contact__row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--pb-line-06); color: var(--pb-ink); }
.pb-contact > li:last-child > .pb-contact__row { border-bottom: 0; }
.pb-contact__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(201, 164, 92, 0.12); color: var(--pb-gold-text); }
.pb-contact__icon svg { width: 17px; height: 17px; }
.pb-contact__text { display: grid; flex: 1; gap: 1px; line-height: 1.4; }
.pb-contact__text b { font-size: 15px; font-weight: 600; }
.pb-contact__text > span { font-size: 13px; color: var(--pb-ink-64); overflow-wrap: anywhere; }
.pb-contact__go { flex: none; font-size: 13.5px; font-weight: 600; color: var(--pb-gold-text); }
.pb a.pb-contact__row:hover .pb-contact__go { color: var(--pb-gold-bright); }

/* Travel fees: one flat list, in two columns on the travel page when there is room. */
.pb-travel { gap: 12px; padding: 16px; }
.pb-travel .pb-listcard__title { padding: 0; }
.pb-travel__row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(243, 237, 226, 0.05); font-size: 14px; line-height: 1.45; break-inside: avoid; }
.pb-travel__name { color: var(--pb-ink-82); }
.pb-travel__fee { flex: none; font-family: var(--pb-mono); font-size: 13.5px; color: var(--pb-gold-soft); white-space: nowrap; }
.pb-travel__fee--quoted { font-family: var(--pb-font); color: var(--pb-ink-66); }
.pb-travel__note { font-size: 12.5px; line-height: 1.55; color: rgba(243, 237, 226, 0.62); }
.pb-travel--wide { padding: 20px; }
.pb-travel--wide .pb-travel__note { font-size: 13.5px; }
@media (min-width: 720px) { .pb-travel--wide .pb-travel__list { display: block; columns: 2; column-gap: 32px; } }

/* Policies: each a disclosure, its text in full once opened. */
.pb-policies { display: grid; }
.pb-policy { border-bottom: 1px solid var(--pb-line-06); }
.pb-policy:last-child { border-bottom: 0; }
.pb-policy__head { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0; border-radius: 10px; list-style: none; cursor: pointer; }
.pb-policy__head::-webkit-details-marker { display: none; }
.pb-policy__text { display: grid; flex: 1; gap: 1px; line-height: 1.4; }
.pb-policy__text b { font-weight: 500; }
.pb-policy__text > span { font-size: 12.5px; color: var(--pb-ink-60); }
.pb-policy__head svg { width: 15px; height: 15px; }
.pb-policy__body { padding: 2px 0 16px; }
.pb-policy__body .pb-prose { gap: 10px; font-size: 14px; line-height: 1.65; }

/* The studio and its week (contact and travel pages). */
.pb-studio { padding: 6px 16px 12px; }
.pb-studio__where { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--pb-line-06); }
.pb-hours { display: grid; padding-top: 4px; }
.pb-hours > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(243, 237, 226, 0.05); font-size: 14px; }
.pb-hours > div:last-child { border-bottom: 0; }
.pb-hours dt { color: var(--pb-ink-82); }
.pb-hours dd { font-family: var(--pb-mono); font-size: 13.5px; color: var(--pb-gold-soft); white-space: nowrap; }

/* A whole-card link (contact page: on to Help). */
.pb a.pb-linkcard { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 18px; border-color: var(--pb-line-09); border-radius: 20px; }
.pb-linkcard__text { display: grid; flex: 1; gap: 2px; line-height: 1.4; }
.pb-linkcard__text b { font-size: 16px; font-weight: 600; }
.pb-linkcard__text > span { font-size: 13.5px; color: var(--pb-ink-66); }
.pb-linkcard svg { width: 16px; height: 16px; flex: none; color: var(--pb-gold); }

/* Text from the editor, FAQ answers and policies: paragraphs and gold-dotted lists. */
.pb-prose { display: grid; gap: 12px; font-size: 15px; line-height: 1.7; color: var(--pb-ink-78); }
.pb-prose p { white-space: pre-line; text-wrap: pretty; }
.pb-prose ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pb-prose li { position: relative; padding-left: 18px; }
.pb-prose li::before { content: ""; position: absolute; left: 2px; top: calc(0.85em - 3px); width: 6px; height: 6px; border-radius: 99px; background: var(--pb-gold); }

/* CMS pages: a sentence-long heading from the editor, then her blocks. */
.pb-h1--page { font-size: 44px; }
@media (max-width: 719px) { .pb-h1--page { font-size: 34px; } }
@media (min-width: 1040px) { .pb-h1--page { font-size: 52px; } }
.pb-cmsblocks { display: grid; gap: 28px; }
.pb-cms { display: grid; gap: 14px; align-content: start; max-width: 760px; }
.pb-cms--note { padding: 22px; border-color: var(--pb-gold-line); }
.pb-cms--image { max-width: none; gap: 22px; align-items: center; }
.pb-cms--image.pb-cms--solo { max-width: 760px; }
.pb-cms__text { display: grid; gap: 14px; align-content: start; max-width: 760px; }
.pb-cms__figure { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border: 1px solid var(--pb-line-10); border-radius: 22px; background: var(--pb-surface); }
.pb-cms__figure img { width: 100%; height: 100%; object-fit: cover; }
.pb-cms--gallery { max-width: none; }
.pb-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pb-gallery > li { aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--pb-line-09); border-radius: 16px; background: var(--pb-raised); }
.pb-gallery img { width: 100%; height: 100%; object-fit: cover; }
.pb-cms--cta, .pb-cms--video { max-width: none; padding: 24px; border-color: var(--pb-gold-line); background: var(--pb-band); }
@media (max-width: 719px) {
    .pb-cmsblocks { gap: 22px; }
    .pb-cms--note, .pb-cms--cta, .pb-cms--video { padding: 18px 16px; }
    .pb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (min-width: 1040px) {
    .pb-cms--image:not(.pb-cms--solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
    .pb-cms__figure { aspect-ratio: 5 / 4; }
}
/* Help, wide: the questions and the policies share the left column, and the contact
   and travel cards run down the right beside both. One column below that, in order. */
@media (min-width: 1040px) {
    .pb-help--split { grid-template-rows: auto 1fr; }
    .pb-help--split > .pb-help__side { grid-column: 2; grid-row: 1 / span 2; }
    .pb-help--split > .pb-help__policies { grid-column: 1; grid-row: 2; }
}

/* Shop: the shelf, the hair shop, a product, the bag, checkout and the order's
   thank-you (public.v3.shop.*) ------------------------------------------------- */
/* The shop's sections as link chips (site.parts.shop-nav). */
.pb-shopnav { margin-top: 6px; }
.pb-chiplinks { display: flex; flex-wrap: wrap; gap: 8px; }
.pb a.pb-chiplink { display: inline-flex; align-items: center; height: 38px; padding: 0 13px; border: 1px solid var(--pb-line-14); border-radius: 11px; color: var(--pb-ink-82); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.pb a.pb-chiplink:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }
.pb a.pb-chiplink[aria-current="page"] { background: var(--pb-tint-14); border-color: var(--pb-gold); color: var(--pb-gold-soft); }
/* A phone: one row that scrolls sideways, edge to edge, rather than five rows of chips. */
@media (max-width: 719px) {
    .pb-chiplinks { flex-wrap: nowrap; margin: 0 calc(-1 * var(--pb-pad)); padding: 2px var(--pb-pad) 4px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--pb-pad); }
    .pb-chiplinks::-webkit-scrollbar { display: none; }
    .pb-chiplinks > li { flex: none; }
    .pb a.pb-chiplink { height: 44px; padding: 0 15px; }
}

/* Product cards (site.parts.product-card): four across when wide, three, then two. */
.pb-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pb-prods > li { display: grid; }
@media (max-width: 1039px) { .pb-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .pb-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 359px) { .pb-prods { grid-template-columns: minmax(0, 1fr); } }
.pb-prod { position: relative; grid-template-rows: auto 1fr; align-content: stretch; }
.pb a.pb-prod__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--pb-raised); }
.pb-prod__media picture { display: block; width: 100%; height: 100%; }
.pb-prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pb a.pb-prod__media:hover img { transform: scale(1.03); }
.pb-prod__media .pb-monogram { font-size: 40px; }
.pb-prod__badge { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; max-width: calc(100% - 20px); height: 26px; padding: 0 9px; border-radius: 99px; background: rgba(11, 10, 9, 0.84); color: var(--pb-gold-soft); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.pb-prod__badge--out { color: var(--pb-ink-82); }
.pb-prod__body { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px 14px; }
.pb-prod__name { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
/* The name opens the sheet: a finger-sized hit area without moving the type. */
.pb .pb-prod__name a { display: inline-block; min-height: 44px; padding: 12px 0; margin: -12px 0; color: var(--pb-ink); }
.pb .pb-prod__name a:hover { color: var(--pb-gold-bright); }
.pb-prod__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--pb-mono); }
.pb-prod__now { font-size: 15px; color: var(--pb-gold-soft); }
.pb-prod__from { font-family: var(--pb-font); font-size: 12.5px; color: var(--pb-ink-64); }
.pb-prod__was { font-size: 12.5px; color: rgba(243, 237, 226, 0.5); }
.pb-prod__action { margin-top: auto; }
.pb a.pb-btn--inbag, .pb-btn--inbag { background: var(--pb-tint-14); border-color: var(--pb-gold); color: var(--pb-gold-soft); }
.pb a.pb-btn--inbag:hover { background: var(--pb-tint-18); border-color: var(--pb-gold-hover); color: var(--pb-gold-bright); }
@media (max-width: 719px) { .pb-prod__body { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .pb a.pb-prod__media:hover img { transform: none; } }

/* A problem with what she tried to add or pay (the server's own message). */
.pb-alert { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(236, 186, 117, 0.45); border-radius: 12px; background: var(--pb-warn-bg); color: var(--pb-warn); font-size: 14px; line-height: 1.5; }

/* Pages of the shelf. */
.pb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.pb-pager__at { font-size: 14px; color: var(--pb-ink-66); }

/* The phone's "View bag" bar takes the dock's place on the shelf (site.parts.bag-bar). */
.pb-bagbar { display: none; }
@media (max-width: 719px) {
    .pb-bagbar { position: sticky; bottom: 0; z-index: 70; display: block; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pb-line-10); background: rgba(11, 10, 9, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .pb a.pb-bagbar__btn { display: flex; justify-content: space-between; width: 100%; height: 50px; padding: 0 16px; border-radius: 13px; font-size: 15px; }
    body.pb-has-bagbar .pb-dock { display: none; }
}

/* The hair shop's deals and what sharing earns. */
.pb-deals { gap: 12px; border-color: var(--pb-line-09); }
.pb-deals__list { display: grid; gap: 8px; }
.pb-deals__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pb-line-06); font-size: 14.5px; line-height: 1.45; color: var(--pb-ink-78); }
.pb-deals__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.pb-deals__off { min-width: 76px; font-family: var(--pb-mono); font-size: 14.5px; font-weight: 500; color: var(--pb-gold-soft); }
.pb-deals--earn { border-color: var(--pb-gold-line); background: var(--pb-band); }
.pb-shop-empty { justify-items: start; border-color: var(--pb-line-09); }

/* The product sheet (site.parts.sheet): a drawer from the right from 720px, a sheet
   from the bottom on a phone. */
/* One row the height of the screen, so the panel never grows past it: its body scrolls instead. */
.pb-sheet { z-index: 95; grid-template-rows: minmax(0, 1fr); padding: 0; place-items: stretch end; }
.pb-sheet__panel { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); height: 100%; border-left: 1px solid var(--pb-line-10); background: var(--pb-surface); box-shadow: var(--pb-shadow-drawer); animation: pb-sheet-in .22s ease-out; }
.pb-sheet__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--pb-line-08); }
.pb-sheet__title { flex: 1; overflow: hidden; font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pb-sheet__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--pb-line-12); border-radius: 11px; background: transparent; color: var(--pb-ink); }
.pb-sheet__close:hover { border-color: var(--pb-gold-line-50); }
.pb-sheet__close svg { width: 16px; height: 16px; }
.pb-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pb-sheet__loading { padding: 28px 16px; font-size: 14px; color: var(--pb-ink-64); }
.pb-sheet__content { display: grid; gap: 14px; padding: 16px 16px 0; }
.pb-sheet__content > .pb-arrowlink { margin-bottom: 8px; }
.pb-sheet__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--pb-raised); }
.pb-sheet__media picture { display: block; width: 100%; height: 100%; }
.pb-sheet__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-sheet__intro { display: grid; gap: 6px; }
.pb-sheet__name { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
/* Focus lands on the name when the sheet opens, for a screen reader; it is not a control. */
.pb .pb-sheet__name:focus-visible { outline: none; }
.pb-sheet__short { font-size: 14.5px; line-height: 1.6; color: var(--pb-ink-72); }
.pb-sheet__desc { font-size: 14.5px; line-height: 1.65; }
/* In the sheet, Add to bag stays in reach while the options scroll past. */
.pb-sheet .pb-buy__foot { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pb-line-08); background: var(--pb-surface); }
@keyframes pb-sheet-in { from { transform: translateX(28px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes pb-sheet-up { from { transform: translateY(28px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (max-width: 719px) {
    .pb-sheet { place-items: end stretch; }
    .pb-sheet__panel { width: 100%; height: 90%; height: 90dvh; border-left: 0; border-top: 1px solid var(--pb-line-10); border-radius: 22px 22px 0 0; animation-name: pb-sheet-up; }
}

/* The buying panel (site.parts.product-buy): price, options, quantity, Add to bag. */
.pb-buy { display: grid; gap: 14px; }
.pb-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pb-buy__now { font-size: 22px; }
.pb-buy__from { font-family: var(--pb-font); font-size: 14px; color: var(--pb-ink-64); }
.pb-buy__was { font-family: var(--pb-mono); font-size: 14px; color: rgba(243, 237, 226, 0.5); }
.pb-buy__flag { font-size: 13px; font-weight: 600; color: var(--pb-warn); }
.pb-buy__form { display: grid; gap: 16px; }
.pb-buy__opts { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pb-buy__label { padding: 0; font-size: 13px; font-weight: 600; color: var(--pb-ink-78); }
.pb-buy__req { font-weight: 500; color: var(--pb-ink-56); }
.pb-optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pb-optpick { position: relative; display: grid; cursor: pointer; }
/* The radio itself stays in the form and the tab order; its box shows the choice. */
.pb-optpick__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pb-optpick__box { display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 9px 12px; border: 1px solid var(--pb-line-14); border-radius: 12px; background: var(--pb-raised); transition: border-color .2s ease, background-color .2s ease; }
.pb-optpick:hover .pb-optpick__box { border-color: var(--pb-gold-line-50); }
.pb-optpick__input:checked + .pb-optpick__box { border-color: var(--pb-gold); background: var(--pb-tint-14); box-shadow: inset 0 0 0 1px var(--pb-gold); }
.pb-optpick__input:focus-visible + .pb-optpick__box { outline: 2px solid var(--pb-gold); outline-offset: 2px; }
.pb-optpick__input:disabled + .pb-optpick__box { opacity: 0.55; cursor: not-allowed; }
.pb-optpick__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--pb-ink); }
.pb-optpick__meta { font-family: var(--pb-mono); font-size: 12.5px; color: var(--pb-gold-soft); }
.pb-optpick__meta.is-out { font-family: var(--pb-font); color: var(--pb-ink-64); }
.pb-buy__qty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--pb-line-14); border-radius: 12px; }
.pb-stepper__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: var(--pb-ink); font-size: 18px; line-height: 1; }
.pb-stepper__btn:hover:not(:disabled) { background: var(--pb-line-06); }
.pb-stepper__btn:disabled { color: var(--pb-ink-56); cursor: not-allowed; }
.pb .pb-stepper__input { width: 52px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--pb-ink); font-family: var(--pb-mono); font-size: 15px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.pb-stepper__input::-webkit-inner-spin-button, .pb-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html:not(.js) .pb .pb-stepper__input { width: 76px; padding: 0 10px; }
.pb-buy__foot { display: grid; gap: 8px; }
.pb-buy__note { font-size: 12.5px; line-height: 1.5; text-align: center; color: rgba(243, 237, 226, 0.62); }
.pb-buy__note--left { text-align: left; }

/* A product's own page. */
.pb-product { position: relative; z-index: 1; display: grid; gap: 22px; padding-top: 32px; padding-bottom: 72px; }
.pb-product__grid { display: grid; gap: 28px; align-items: start; }
.pb-product__gallery { display: grid; gap: 10px; }
.pb-product__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--pb-line-10); border-radius: 22px; background: var(--pb-surface); }
.pb-product__media picture { display: block; width: 100%; height: 100%; }
.pb-product__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-product__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pb-product__thumbs li { aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--pb-line-09); border-radius: 12px; background: var(--pb-raised); }
.pb-product__thumbs picture { display: block; width: 100%; height: 100%; }
.pb-product__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pb-product__text { display: grid; gap: 22px; align-content: start; }
.pb-product__intro { display: grid; gap: 10px; }
.pb-product__desc { font-size: 14.5px; }
@media (min-width: 720px) { .pb-product__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1040px) { .pb-product__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; } }
@media (max-width: 719px) {
    .pb-product { gap: 16px; padding-top: 16px; padding-bottom: 40px; }
    .pb-product__media { aspect-ratio: 4 / 3; }
}

/* Lines and totals: the bag, checkout and the order. */
.pb-bagpage, .pb-checkout, .pb-orderpage { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1040px) {
    .pb-bagpage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
    .pb-checkout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; }
    .pb-orderpage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
    .pb-bagpage > .pb-summary, .pb-checkout > .pb-summary { position: sticky; top: 92px; }
}
.pb-orderpage--solo { max-width: 760px; grid-template-columns: minmax(0, 1fr) !important; }
.pb-lines { display: grid; gap: 10px; }
.pb-line { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--pb-line-08); border-radius: 16px; background: var(--pb-raised); }
.pb-line__thumb { width: 58px; height: 58px; overflow: hidden; border-radius: 12px; background: var(--pb-bg); }
.pb-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pb-line__text { display: grid; gap: 4px; }
.pb-line__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.pb-line__each { font-family: var(--pb-mono); font-size: 12.5px; color: var(--pb-ink-64); }
.pb-line__price { align-self: start; padding-top: 2px; font-family: var(--pb-mono); font-size: 14px; color: var(--pb-gold-soft); white-space: nowrap; }
.pb-lines--compact { gap: 0; }
.pb-lines--compact .pb-line { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; border: 0; border-bottom: 1px solid var(--pb-line-06); border-radius: 0; background: transparent; }
.pb-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.pb-qty__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--pb-line-14); border-radius: 11px; background: transparent; color: var(--pb-ink); font-size: 17px; line-height: 1; }
.pb-qty__btn:hover { border-color: var(--pb-gold-line-50); }
.pb-qty__n { min-width: 28px; font-family: var(--pb-mono); font-size: 14px; text-align: center; }
.pb-qty__remove { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--pb-ink-70); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pb-qty__remove:hover { color: var(--pb-ink); }
@media (max-width: 719px) {
    .pb-bagpage .pb-line { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "thumb name price" "thumb each each" "qty qty qty"; gap: 4px 12px; align-items: start; }
    .pb-bagpage .pb-line__thumb { grid-area: thumb; }
    .pb-bagpage .pb-line__text { display: contents; }
    .pb-bagpage .pb-line__name { grid-area: name; }
    .pb-bagpage .pb-line__each { grid-area: each; }
    .pb-bagpage .pb-line__price { grid-area: price; padding-top: 0; }
    .pb-bagpage .pb-qty { grid-area: qty; margin-top: 6px; }
}
.pb-summary { gap: 14px; border-color: var(--pb-line-09); }
.pb-summary__actions { display: grid; gap: 8px; }
.pb-totals { display: grid; gap: 6px; font-size: 14px; }
.pb-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.pb-totals dt { color: var(--pb-ink-70); }
.pb-totals dd { font-family: var(--pb-mono); color: var(--pb-ink); text-align: right; white-space: nowrap; }
.pb-totals .is-off dd { color: var(--pb-gold-soft); }
.pb-totals .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--pb-line-08); font-size: 15px; font-weight: 600; }
.pb-totals .is-total dt { color: var(--pb-ink); }
.pb-totals .is-total dd { color: var(--pb-gold-soft); }
.pb-totals .pb-totals__words { font-family: var(--pb-font); color: var(--pb-ink-70); }

/* Checkout's form. */
.pb-checkout__form { gap: 20px; padding: 22px; border-color: var(--pb-line-09); }
.pb-fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pb-fieldset__legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 600; color: var(--pb-gold-text); }
.pb-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pb-field__opt { font-style: normal; font-weight: 400; color: var(--pb-ink-56); }
.pb-field__help { font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--pb-ink-64); }
.pb-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pb-choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--pb-line-14); border-radius: 12px; background: var(--pb-raised); font-size: 14px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.pb-choice:has(input:checked) { border-color: var(--pb-gold); background: var(--pb-tint-14); }
.pb-choice input, .pb-consent input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--pb-gold); }
.pb-consent { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 14px; line-height: 1.5; color: var(--pb-ink-82); cursor: pointer; }
.pb-consent input { margin-top: 2px; }
@media (max-width: 719px) {
    .pb-checkout__form { padding: 18px 16px; }
    .pb-formgrid, .pb-choices { grid-template-columns: minmax(0, 1fr); }
}

/* The order's thank-you: its reference, its state, and how to pay while unpaid. */
.pb-orderhead .pb-lede { max-width: 56ch; }
.pb-orderhead .pb-code { justify-self: start; max-width: 100%; overflow-wrap: anywhere; height: auto; min-height: 28px; }
.pb-status { width: fit-content; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--pb-warn-bg); color: var(--pb-warn); font-size: 13px; font-weight: 600; }
.pb-status--done { background: rgba(159, 224, 184, 0.12); color: var(--pb-good); }
.pb-orderpage__pay { display: grid; gap: 14px; }
.pb-paycard { border-color: var(--pb-gold-line); }
.pb-paycard__amount { font-family: var(--pb-mono); font-size: 26px; line-height: 1.2; color: var(--pb-gold-soft); }
.pb-paycard__amount span { font-family: var(--pb-font); font-size: 14px; color: var(--pb-ink-70); }
.pb-bankrows { display: grid; }
.pb-bankrows > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--pb-line-06); font-size: 14px; }
.pb-bankrows dt { color: var(--pb-ink-66); }
.pb-bankrows dd { font-family: var(--pb-mono); color: var(--pb-ink); text-align: right; overflow-wrap: anywhere; }
.pb-bankrows__ref dd { color: var(--pb-gold-soft); }

/* The first-order pop-up (partials.welcome-offer, included by layouts.site with v3). */
.pb .abh-welcome { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 3, 0.72); }
.pb .abh-welcome__card { position: relative; display: grid; gap: 6px; width: min(420px, 100%); padding: 30px 22px 22px; border: 1px solid var(--pb-gold-line-50); border-radius: 22px; background: var(--pb-surface); box-shadow: var(--pb-shadow-drawer); color: var(--pb-ink); text-align: center; }
.pb .abh-welcome__kicker { font-size: 13px; font-weight: 600; color: var(--pb-gold-text); }
.pb .abh-welcome h2 { padding: 0 30px; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.pb .abh-welcome__card > p:not([class]) { font-size: 15px; color: var(--pb-ink-72); }
.pb .abh-welcome__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--pb-line-12); border-radius: 11px; background: transparent; color: var(--pb-ink); font-size: 22px; line-height: 1; }
.pb .abh-welcome__close:hover { border-color: var(--pb-gold-line-50); }
.pb .abh-welcome__form { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.pb .abh-welcome__form input[type="email"] { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--pb-line-12); border-radius: 12px; background: var(--pb-raised); color: var(--pb-ink); font-size: 16px; color-scheme: dark; }
.pb .abh-welcome__form input[type="email"]:focus-visible { border-color: var(--pb-gold-line-55); }
.pb .abh-welcome__form label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; color: var(--pb-ink-74); cursor: pointer; }
.pb .abh-welcome__form input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--pb-gold); }
.pb .abh-welcome__form button[type="submit"] { height: 52px; border: 0; border-radius: 13px; background: var(--pb-gold); color: var(--pb-on-gold); font-size: 15px; font-weight: 600; }
.pb .abh-welcome__form button[type="submit"]:hover { background: var(--pb-gold-hover); }
.pb .abh-welcome__msg { font-size: 14px; line-height: 1.5; color: var(--pb-ink-85); }
.pb .abh-welcome__msg strong { font-family: var(--pb-mono); font-size: 18px; letter-spacing: 0.04em; color: var(--pb-gold-soft); }

/* Find a braider: the UK and Nigeria lists and a provider's page
   (public.v3.braiders, nigeria-providers, provider) ------------------------------ */
/* The search box and its button share a row; on a phone the button goes under. */
.pb-findform { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 720px; }
.pb-findform .pb-search { flex: 1 1 260px; max-width: none; }
.pb-findform > .pb-btn { flex: none; height: 52px; padding: 0 22px; border-radius: 13px; font-size: 15px; }
@media (max-width: 719px) { .pb-findform > .pb-btn { flex: 1 1 100%; } }

/* Nigeria's filters, area first, in one card. */
.pb-filterform { gap: 14px; max-width: 880px; padding: 18px; border-color: var(--pb-line-09); }
@media (max-width: 719px) { .pb-filterform .pb-actions > .pb-btn { flex: 1 1 0; } }

/* Three cards across when wide, two, then one (the design's results). */
.pb-people--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1039px) { .pb-people--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .pb-people--three { grid-template-columns: minmax(0, 1fr); } }

/* A card's Profile and Request: side by side, one above the other in a narrow card. */
.pb-person__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pb-person__actions > .pb-btn { flex: 1 1 112px; }
.pb-provider__foot .pb-person__actions { flex-basis: 100%; }
.pb-provider__foot .pb-person__actions > .pb-btn { margin-left: 0; }
/* The name links to her page: a finger-sized hit area without moving the type. */
.pb .pb-person__name a { position: relative; color: var(--pb-ink); }
.pb .pb-person__name a::after { content: ""; position: absolute; inset: -12px -6px; }
.pb .pb-person__name a:hover { color: var(--pb-gold-bright); }

/* Nobody matches, or nobody yet. */
.pb-empty { display: grid; gap: 12px; justify-items: start; padding: 28px 20px; border: 1px dashed var(--pb-line-16); border-radius: 18px; font-size: 14.5px; line-height: 1.55; color: var(--pb-ink-70); }

/* "Not sure who to pick?": into the chat's Match me. */
.pb-matchband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 18px; border: 1px solid rgba(201, 164, 92, 0.28); border-radius: 18px; background: var(--pb-band); }
.pb-matchband__text { display: grid; gap: 2px; max-width: 62ch; }
.pb-matchband__text b { font-weight: 600; }
.pb-matchband__text span { font-size: 13.5px; line-height: 1.5; color: var(--pb-ink-68); }
@media (max-width: 719px) { .pb-matchband > .pb-btn { flex: 1 1 100%; } }

/* A provider's page: one column, as the design's profile. */
.pb-profile { position: relative; z-index: 1; display: grid; gap: 16px; max-width: calc(820px + 2 * var(--pb-pad)); padding-top: 24px; padding-bottom: 32px; }
.pb-pgallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--pb-line-10); border-radius: 22px; background: var(--pb-surface); }
.pb-pgallery__tile { margin: 0; overflow: hidden; background: var(--pb-raised); }
.pb-pgallery__tile:first-child { grid-row: 1 / span 2; }
.pb-pgallery__tile img { width: 100%; height: 100%; object-fit: cover; }
/* One photograph, or her initials, fills the frame; two share it. */
.pb-pgallery--0, .pb-pgallery--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.pb-pgallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.pb-pgallery--0 .pb-pgallery__tile:first-child, .pb-pgallery--1 .pb-pgallery__tile:first-child, .pb-pgallery--2 .pb-pgallery__tile:first-child { grid-row: auto; }
/* Her initials are not worth a screen: a shorter band, so her name shows. */
.pb-pgallery--0 { aspect-ratio: 16 / 5; }
@media (max-width: 719px) {
    .pb-profile { gap: 14px; padding-top: 12px; }
    .pb-pgallery { aspect-ratio: 4 / 3; border-radius: 18px; }
    .pb-pgallery--0 { aspect-ratio: 16 / 7; }
}
.pb-profile__head { display: grid; gap: 12px; }
.pb-profile__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pb-ratepill--inline { position: static; height: 28px; padding: 0 10px; background: var(--pb-raised); font-size: 13px; }
.pb-profile__line { font-size: 14.5px; line-height: 1.5; color: var(--pb-ink-72); }
.pb-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.pb-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; background: rgba(201, 164, 92, 0.12); color: var(--pb-gold-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pb-badge svg { width: 12px; height: 12px; flex: none; }
.pb-profile__bio { max-width: 64ch; font-size: 15px; line-height: 1.65; color: var(--pb-ink-78); white-space: pre-line; text-wrap: pretty; }
.pb-profile__card { gap: 10px; padding: 16px 18px; border-color: var(--pb-line-09); border-radius: 20px; }
.pb-profile__cardhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pb-cardtitle { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.pb-pricetable__name small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--pb-ink-60); }
.pb-profile__policy b { font-weight: 600; color: var(--pb-ink-78); }
.pb-profile__areas { gap: 8px; }
.pb-profile__areas .pb-chip { height: 30px; padding: 0 11px; font-size: 13.5px; }
@media (max-width: 719px) { .pb-profile__card { padding: 14px 16px; } }

/* Her usual week, Monday first: the days she works in gold. Never free or busy. */
.pb-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0; list-style: none; }
.pb-week__day { display: grid; place-items: center; gap: 2px; padding: 9px 0; border-radius: 12px; background: var(--pb-raised); color: var(--pb-ink-66); }
.pb-week__day abbr { font-size: 12.5px; font-weight: 600; text-decoration: none; }
.pb-week__day span { font-size: 11px; }
.pb-week__day.is-on { background: var(--pb-tint-14); color: var(--pb-gold-soft); }
@media (max-width: 359px) { .pb-week { gap: 4px; } .pb-week__day span { font-size: 10px; } }

.pb-reviews { display: grid; padding: 0; list-style: none; }
.pb-review { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--pb-line-06); }
.pb-review__stars { font-size: 13px; letter-spacing: 1px; color: var(--pb-gold-text); }
.pb-review b { font-size: 15px; font-weight: 600; }
.pb-review p { font-size: 14.5px; line-height: 1.6; color: var(--pb-ink-82); text-wrap: pretty; }
.pb-profile__steps { display: grid; gap: 12px; padding-top: 8px; }

/* The request bar: stays in reach at the foot of the screen while her page scrolls;
   on a phone it takes the dock's place. */
.pb-reqbar { position: sticky; bottom: 0; z-index: 65; border-top: 1px solid var(--pb-line-08); background: rgba(11, 10, 9, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pb-reqbar__in { display: flex; align-items: center; gap: 12px; max-width: calc(820px + 2 * var(--pb-pad)); margin: 0 auto; padding: 12px var(--pb-pad) calc(14px + env(safe-area-inset-bottom)); }
.pb-reqbar__text { display: grid; flex: 1; gap: 1px; margin: 0; line-height: 1.3; }
.pb-reqbar__text b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pb-reqbar__text small { font-size: 12.5px; color: rgba(243, 237, 226, 0.62); }
.pb-reqbar .pb-btn { flex: none; }
@media (max-width: 719px) { body.pb-has-reqbar .pb-dock { display: none; } }

/* Marketplace journey: track, approve, review, dispute (public.v3.journey.*) ---------
   Focused task pages for a booking, without the site's header and footer (design
   Marketplace Journey): one 600px column at every width, under its own bar with
   back, the page's name and Help. */
.pb-journey { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding-bottom: 48px; }
.pb-jhead { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(243, 237, 226, 0.07); background: rgba(11, 10, 9, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pb a.pb-jhead__back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--pb-line-12); border-radius: 12px; color: var(--pb-ink); }
.pb a.pb-jhead__back:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }
.pb-jhead__back svg { width: 17px; height: 17px; }
.pb-jhead__title { display: grid; flex: 1; line-height: 1.25; }
.pb-jhead__title h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pb-jhead__title .pb-mono { font-size: 11.5px; color: var(--pb-ink-60); overflow-wrap: anywhere; }
.pb a.pb-jhead__help { height: 44px; flex: none; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--pb-line-12); border-radius: 10px; color: var(--pb-ink); font-size: 13.5px; font-weight: 500; }
.pb a.pb-jhead__help:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }
.pb-jbody { display: grid; gap: 14px; padding: 16px; }
/* The flash above the bar ("Review received") sits in the same column. */
body.pb:has(.pb-journey) .pb-flash__in { max-width: 568px; }

/* Cards: the gold-edged one leads the page, plain panels follow. */
.pb-jcard { display: grid; gap: 16px; padding: 18px; border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 22px; background: linear-gradient(180deg, #17140f, #110f0c); }
.pb-jcard--plain { padding: 20px; border-color: var(--pb-line-10); background: var(--pb-surface); }
.pb-jpanel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--pb-line-09); border-radius: 20px; background: var(--pb-surface); }
.pb-jpanel--rows { gap: 0; padding: 6px 16px; }
.pb-jlabel { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--pb-gold-text); }
.pb-jtitle { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.pb-jtitle--24 { font-size: 24px; }
.pb-jtext { font-size: 14.5px; line-height: 1.6; color: var(--pb-ink-72); text-wrap: pretty; }
.pb-jhelp { font-size: 13px; line-height: 1.55; color: var(--pb-ink-60); }
.pb-jhint { font-size: 13.5px; font-weight: 600; color: var(--pb-warn); }
.pb-jcase { font-family: var(--pb-mono); font-size: 12.5px; color: var(--pb-gold-soft); }
.pb-jpill { width: fit-content; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 99px; background: rgba(134, 217, 168, 0.14); color: var(--pb-good); font-size: 12.5px; font-weight: 600; }
.pb-jpill i { width: 7px; height: 7px; flex: none; border-radius: 99px; background: currentColor; }
.pb-jdone { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 99px; background: var(--pb-gold); color: var(--pb-on-gold); }
.pb-jdone svg { width: 22px; height: 22px; }
.pb-btn--56 { height: 56px; padding: 0 22px; border-radius: 15px; font-size: 16px; }
.pb a.pb-btn--quiet, .pb-btn--quiet { color: var(--pb-ink-70); }
.pb a.pb-btn--quiet:hover, .pb-btn--quiet:hover { color: var(--pb-ink); }

/* Track: who, where the job is, and the three ways to reach the house. */
.pb-jstatus { display: flex; align-items: center; gap: 12px; }
.pb-javatar { width: 52px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--pb-gold); border-radius: 999px; background: radial-gradient(120% 120% at 30% 20%, rgba(201, 164, 92, 0.2), rgba(201, 164, 92, 0.03) 70%); color: var(--pb-gold-soft); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.pb-javatar img { width: 100%; height: 100%; object-fit: cover; }
.pb-javatar--house { border: 0; background: none; }
.pb-jstatus__text { display: grid; flex: 1; gap: 2px; }
.pb-jstatus__title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.pb-jstatus__line { font-size: 13.5px; line-height: 1.5; color: var(--pb-ink-70); }
.pb-jsteps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.pb-jsteps li { display: grid; gap: 7px; align-content: start; font-size: 11px; line-height: 1.25; color: var(--pb-ink-56); }
.pb-jsteps i { display: block; height: 5px; border-radius: 99px; background: var(--pb-line-12); }
.pb-jsteps .is-done i { background: var(--pb-gold); }
.pb-jsteps .is-now { color: var(--pb-ink); font-weight: 700; }
.pb-jactions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pb a.pb-jaction { min-height: 48px; display: grid; place-items: center; padding: 6px 8px; border: 1px solid var(--pb-line-14); border-radius: 13px; color: var(--pb-ink); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; transition: border-color .2s ease; }
.pb a.pb-jaction:hover { border-color: var(--pb-gold-line-50); color: var(--pb-ink); }

/* Secure Pay: what it holds now, the balance, and the way to pay. */
.pb-jsecure { display: flex; align-items: flex-start; gap: 12px; }
.pb-jsecure__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--pb-tint-14); color: var(--pb-gold-text); }
.pb-jsecure__icon svg { width: 19px; height: 19px; }
.pb-jsecure__text { display: grid; flex: 1; gap: 4px; }
.pb-jsecure__title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pb-jsecure__text p { font-size: 13.5px; line-height: 1.55; color: var(--pb-ink-70); }
.pb-jbank { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--pb-line-06); }
.pb-jbank .pb-bankrows { margin-top: 4px; }

/* Facts and money: label and value rows. */
.pb-jfacts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--pb-line-06); font-size: 14px; line-height: 1.5; }
.pb-jfacts > div:last-child { border-bottom: 0; }
.pb-jfacts dt { color: var(--pb-ink-60); }
.pb-jfacts dd { overflow-wrap: anywhere; }
.pb-jfacts--lines { border-top: 1px solid var(--pb-line-08); }
.pb-jfacts--lines > div { grid-template-columns: minmax(0, 1fr) auto; font-size: 13.5px; }
.pb-jfacts--lines dt { color: var(--pb-ink-70); }
.pb-jmoney > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--pb-line-06); font-size: 14px; line-height: 1.5; }
.pb-jmoney > div:last-child { border-bottom: 0; }
.pb-jmoney dt { color: var(--pb-ink-70); }
.pb-jmoney dd { flex: none; font-family: var(--pb-mono); text-align: right; }
.pb-jmoney .is-total { font-weight: 600; }
.pb-jmoney .is-total dt { color: var(--pb-ink); }

/* Updates, newest first. */
.pb-jlog { display: grid; gap: 12px; }
.pb-jlog li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
.pb-jlog i { width: 8px; height: 8px; margin-top: 7px; border-radius: 99px; background: var(--pb-gold); }
.pb-jlog__text { display: grid; gap: 1px; font-size: 14px; line-height: 1.45; }
.pb-jlog__when { font-family: var(--pb-mono); font-size: 11.5px; color: var(--pb-ink-56); }
.pb-jmore { gap: 0; padding: 4px 16px; }
.pb a.pb-jmore__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--pb-line-06); color: var(--pb-ink); font-size: 15px; font-weight: 500; }
.pb a.pb-jmore__link:last-child { border-bottom: 0; }
.pb a.pb-jmore__link:hover { color: var(--pb-gold-bright); }
.pb-jmore__link svg { width: 16px; height: 16px; flex: none; color: var(--pb-gold); }

/* Approve: the provider's finished-job photo. */
.pb-jphoto { display: grid; gap: 8px; margin: 0; }
.pb-jphoto img { width: 100%; max-height: 420px; object-fit: cover; border: 1px solid var(--pb-line-10); border-radius: 16px; background: var(--pb-raised); }
.pb-jphoto figcaption { font-size: 13px; line-height: 1.5; color: var(--pb-ink-64); }

/* The forms: a group's legend is a plain row (float), so the grid gap applies to it. */
.pb-jform { display: grid; gap: 16px; }
.pb-jintro { display: grid; gap: 6px; }
.pb-jgroup { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pb-jgroup > legend { float: left; width: 100%; padding: 0; }
.pb-jgroup .pb-field__opt { font-size: 12.5px; }
/* Real radios and checkboxes, laid over their own box: the form works without scripts. */
.pb-jstar input, .pb-jchip input, .pb-jreason input, .pb-jslot input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.pb-jstars { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-jstar { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--pb-raised); transition: background-color .2s ease; }
.pb-jstar:hover { background: var(--pb-chip); }
.pb-jstar svg { width: 26px; height: 26px; }
.pb-jstar path { fill: none; stroke: var(--pb-gold); stroke-width: 1.5; stroke-linejoin: round; transition: fill .15s ease; }
.pb-jstar input:checked + svg path,
.pb-jstars:has(input[value="2"]:checked) .pb-jstar:nth-of-type(-n+2) path,
.pb-jstars:has(input[value="3"]:checked) .pb-jstar:nth-of-type(-n+3) path,
.pb-jstars:has(input[value="4"]:checked) .pb-jstar:nth-of-type(-n+4) path,
.pb-jstars:has(input[value="5"]:checked) .pb-jstar:nth-of-type(-n+5) path { fill: var(--pb-gold); }
.pb-jstar:has(input:focus-visible), .pb-jslot:has(input:focus-visible) .pb-jslot__box, .pb-jreason:has(input:focus-visible) { outline: 2px solid var(--pb-gold); outline-offset: 2px; }

.pb-jchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-jchip { position: relative; display: inline-flex; }
.pb-jchip > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--pb-line-14); border-radius: 12px; color: var(--pb-ink); font-size: 14px; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.pb-jchip:hover > span { border-color: var(--pb-gold-line-50); }
.pb-jchip input:checked + span { background: var(--pb-tint-14); border-color: var(--pb-gold); color: var(--pb-gold-soft); }
.pb-jchip input:focus-visible + span { outline: 2px solid var(--pb-gold); outline-offset: 2px; }

.pb-jreasons { display: grid; gap: 8px; }
.pb-jreason { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--pb-line-12); border-radius: 15px; background: var(--pb-surface); transition: border-color .2s ease, background-color .2s ease; }
.pb-jreason:hover { border-color: var(--pb-gold-line-50); }
.pb-jreason:has(input:checked) { border-color: var(--pb-gold); background: rgba(201, 164, 92, 0.08); }
.pb-jreason__ring { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 2px solid rgba(243, 237, 226, 0.3); border-radius: 99px; }
.pb-jreason__ring::after { content: ""; width: 10px; height: 10px; border-radius: 99px; background: transparent; }
.pb-jreason input:checked ~ .pb-jreason__ring { border-color: var(--pb-gold); }
.pb-jreason input:checked ~ .pb-jreason__ring::after { background: var(--pb-gold); }
.pb-jreason__text { display: grid; gap: 1px; line-height: 1.4; }
.pb-jreason__text b { font-size: 15px; font-weight: 600; }
.pb-jreason__text small { font-size: 13px; color: rgba(243, 237, 226, 0.62); }

.pb-jslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pb-jslot { position: relative; display: grid; }
.pb-jslot__box { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; border: 1px dashed rgba(243, 237, 226, 0.2); border-radius: 14px; color: var(--pb-ink-70); font-size: 12.5px; font-weight: 600; transition: border-color .2s ease; }
.pb-jslot:hover .pb-jslot__box { border-color: var(--pb-gold-line-50); }
.pb-jslot__box svg { width: 20px; height: 20px; }
.pb-jslot__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-jslot.is-added .pb-jslot__box { border-style: solid; border-color: var(--pb-gold); background: rgba(201, 164, 92, 0.08); color: var(--pb-gold-soft); }
.pb-jslot.is-added .pb-jslot__box:has(img) svg { display: none; }
.pb-jslot.is-added .pb-jslot__box:has(img) .pb-jslot__label { position: absolute; left: 6px; bottom: 6px; z-index: 1; padding: 3px 8px; border-radius: 99px; background: rgba(11, 10, 9, 0.84); }

/* Dispute received: what happens next. */
.pb-jnext { display: grid; gap: 12px; }
.pb-jnext li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.pb-jnext__num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 99px; background: rgba(243, 237, 226, 0.1); color: var(--pb-ink-70); font-size: 13px; font-weight: 700; }
.pb-jnext li:first-child .pb-jnext__num { background: var(--pb-gold); color: var(--pb-on-gold); }
.pb-jnext li:nth-child(2) .pb-jnext__num { background: var(--pb-tint-18); color: var(--pb-gold-soft); }
.pb-jnext__text { display: grid; gap: 2px; line-height: 1.45; }
.pb-jnext__text b { font-weight: 600; }
.pb-jnext__text > span { font-size: 13.5px; color: var(--pb-ink-64); }
@media (max-width: 359px) {
    .pb-jstars { gap: 4px; }
    .pb-jstar { width: 44px; height: 44px; }
    .pb-jfacts > div { grid-template-columns: 80px minmax(0, 1fr); }
}