/* ==========================================================================
   Public professional profile - the design's preview state

   Ported from the Claude Design project "Professional Profile": the identity on
   a full-bleed blue band, the roles as pill chips in their own card, then the
   work in a main column with charges, availability and follow in the rail.

   Layered over professional-profile-public.css and scoped to .pv-scope.pvx, so
   that sheet - which the page still needs for everything this one does not
   restate - is left as it is. Nothing here changes behaviour: every id, data
   attribute and hook the page's script uses is untouched.
   ========================================================================== */

.pv-scope.pvx {
    --pvx-ink: #0f172a;
    --pvx-body: #475569;
    --pvx-muted: #64748b;
    --pvx-line: #e6ebf2;
    --pvx-hair: #eef1f6;
    --pvx-blue: #1d4ed8;
    --pvx-blue-lit: #3b82f6;
    --pvx-tint: #f8fafc;

    background: #f1f5f9;
    color: var(--pvx-ink);
}

/* ---- the band the profile is introduced on ------------------------------- */
.pv-scope.pvx .pv-hero {
    position: relative;
    margin: 0 0 24px;
    padding: clamp(28px, 4vw, 44px) clamp(16px, 4vw, 40px);
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(100deg, var(--pvx-blue) 0%, #2563eb 55%, var(--pvx-blue-lit) 100%);
    color: #fff;
}

/* An uploaded banner IS the band: it fills it at full strength, with only a scrim
   over it so the white name and tagline keep their contrast. The scrim is heaviest
   on the left, where the words are, and thins out to the right where the banner is
   otherwise uncovered. */
.pv-scope.pvx .pv-hero .pv-cover {
    position: absolute;
    inset: 0;
    height: auto;
    background-color: #0f172a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
}

.pv-scope.pvx .pv-hero .pv-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(2, 6, 23, .74) 0%,
        rgba(2, 6, 23, .52) 42%,
        rgba(2, 6, 23, .26) 100%);
}

/* no banner uploaded: the layer is dropped and the band keeps the design's blue */
.pv-scope.pvx .pv-hero .pv-cover-plain {
    display: none;
}

.pv-scope.pvx .pv-hero-inner {
    position: relative;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
}

.pv-scope.pvx .pv-hero-row {
    padding: 0;
    gap: clamp(16px, 2.4vw, 26px);
    align-items: center;
}

.pv-scope.pvx .pv-avatar {
    width: clamp(84px, 9vw, 108px);
    height: clamp(84px, 9vw, 108px);
    margin-top: 0;
    border: 4px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 30px -14px rgba(2, 6, 23, .8);
}

.pv-scope.pvx .pv-avatar-initials {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.pv-scope.pvx .pv-hero-text {
    flex: 1 1 260px;
    min-width: 0;
}

.pv-scope.pvx .pv-hero-name-row {
    gap: 10px;
}

.pv-scope.pvx .pv-hero-name {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
}

.pv-scope.pvx .pv-hero-title {
    margin-top: 5px;
    font-size: clamp(14px, 1.4vw, 16px);
    color: rgba(255, 255, 255, .82);
}

.pv-scope.pvx .pv-hero-meta {
    margin-top: 10px;
    gap: 8px 18px;
    color: rgba(255, 255, 255, .85);
}

.pv-scope.pvx .pv-hero-meta strong {
    color: #fff;
}

.pv-scope.pvx .pv-star {
    color: #fbbf24;
}

/* the availability line reads as a pill on the band */
.pv-scope.pvx .pv-hero-status {
    margin-top: 12px;
}

.pv-scope.pvx .pv-hero-status .pv-meta-item {
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(2, 6, 23, .22);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.pv-scope.pvx .pv-hero-status .pv-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .55);
}

.pv-scope.pvx .pv-hero-status .pv-dot-on {
    background: #4ade80;
}

/* the verified seal sits on the band rather than on white */
.pv-scope.pvx .pv-verified {
    background: rgba(255, 255, 255, .18);
    border-color: transparent;
    color: #fff;
}

/* ---- the two actions ----------------------------------------------------- */
.pv-scope.pvx .pv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.pv-scope.pvx .pv-hero-actions .pv-btn {
    height: 46px;
    padding: 0 20px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
}

/* the design's booking button is white on the band, not blue on white */
.pv-scope.pvx .pv-btn-book {
    background: #fff;
    border: 0;
    color: var(--pvx-blue);
    box-shadow: 0 10px 24px -14px rgba(2, 6, 23, .9);
}

.pv-scope.pvx .pv-btn-book:hover,
.pv-scope.pvx .pv-btn-book:focus {
    background: #f1f5ff;
    color: var(--pvx-blue);
}

.pv-scope.pvx .pv-btn-whatsapp {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.pv-scope.pvx .pv-btn-whatsapp:hover,
.pv-scope.pvx .pv-btn-whatsapp:focus {
    background: rgba(255, 255, 255, .26);
    color: #fff;
}

.pv-scope.pvx .pv-hero-actions .pv-btn-icon {
    width: 46px;
    min-width: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.pv-scope.pvx .pv-hero-actions .pv-btn-icon:hover,
.pv-scope.pvx .pv-hero-actions .pv-btn-icon:focus {
    background: rgba(255, 255, 255, .26);
    color: #fff;
}

/* ---- the page below the band -------------------------------------------- */
.pv-scope.pvx .pv-page {
    display: block;
    padding: 0 0 44px;
}

  .pv-scope.pvx .pv-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }

.pv-scope.pvx .pv-card {
    border-color: var(--pvx-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.pv-scope.pvx .pv-section-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-section-note {
    color: var(--pvx-muted);
}

/* ---- the roles, as pill chips in their own card -------------------------- */
.pv-scope.pvx .pv-profiles {
    padding: 18px 20px;
    margin-bottom: 16px;
}

.pv-scope.pvx .pv-profiles .pv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 0;
    border: 0;
    margin: 0;
}

.pv-scope.pvx .pv-tabs-label {
    flex: 1 1 100%;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #94a3b8;
}

  .pv-scope.pvx .pv-tab {
    padding: 6px 12px;
    border: 1px solid var(--pvx-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--pvx-body);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  }

.pv-scope.pvx .pv-tab:hover {
    border-color: #bfd3f5;
    background: #f5f8ff;
    color: var(--pvx-blue);
}

.pv-scope.pvx .pv-tab-on,
.pv-scope.pvx .pv-tab-on:hover {
    border-color: var(--pvx-blue);
    background: var(--pvx-blue);
    color: #fff;
}

/* ---- the figures the professional reports ------------------------------- */
.pv-scope.pvx .pv-trustcard {
    padding: 16px 20px;
    margin-bottom: 16px;
}

.pv-scope.pvx .pv-trustcard .pv-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    border: 0;
    margin: 0;
}

.pv-scope.pvx .pv-trust-chip {
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--pvx-line);
    border-radius: 999px;
    background: var(--pvx-tint);
    font-size: 13px;
    color: var(--pvx-body);
}

.pv-scope.pvx .pv-trust-icon {
    color: var(--pvx-blue);
}

.pv-scope.pvx .pv-trust-text strong {
    color: var(--pvx-ink);
}

/* ---- the statistics tiles ------------------------------------------------ */
.pv-scope.pvx .pv-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.pv-scope.pvx .pv-stat {
    padding: 20px 16px;
    border: 1px solid var(--pvx-line);
    border-radius: 12px;
    background: var(--pvx-tint);
    text-align: center;
}

.pv-scope.pvx .pv-stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--pvx-muted);
}

.pv-scope.pvx .pv-stat-verified,
.pv-scope.pvx .pv-stat-self {
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pv-scope.pvx .pv-stat-verified {
    color: var(--pvx-blue);
}

.pv-scope.pvx .pv-stat-self {
    color: #94a3b8;
}

/* ---- the rail ------------------------------------------------------------ */
.pv-scope.pvx .pv-side-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-side-avail {
    color: #0f7a42;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .pv-scope.pvx .pv-hero-actions {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn-book,
    .pv-scope.pvx .pv-hero-actions .pv-btn-whatsapp {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .pv-scope.pvx .pv-hero {
        margin-bottom: 18px;
        padding: 24px 16px 26px;
    }

    .pv-scope.pvx .pv-hero-row {
        gap: 14px;
    }

    .pv-scope.pvx .pv-avatar {
        width: 72px;
        height: 72px;
        border-width: 3px;
    }

    .pv-scope.pvx .pv-hero-name {
        font-size: 22px;
    }

    .pv-scope.pvx .pv-hero-title {
        font-size: 13.5px;
    }

    .pv-scope.pvx .pv-hero-meta {
        margin-top: 8px;
        font-size: 13px;
    }

    .pv-scope.pvx .pv-hero-status .pv-meta-item {
        font-size: 12.5px;
        padding: 5px 11px;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn {
        height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn-icon {
        width: 44px;
        min-width: 44px;
    }

    .pv-scope.pvx .pv-page {
        padding-bottom: 30px;
    }

    .pv-scope.pvx .pv-card {
        border-radius: 12px;
    }

    .pv-scope.pvx .pv-pad {
        padding: 16px;
    }

    .pv-scope.pvx .pv-pad-side {
        padding: 14px;
    }

    .pv-scope.pvx .pv-section-title {
        font-size: 15.5px;
    }

    .pv-scope.pvx .pv-profiles,
    .pv-scope.pvx .pv-trustcard {
        padding: 14px;
        margin-bottom: 12px;
    }

    .pv-scope.pvx .pv-tab {
        padding: 8px 14px;
        font-size: 13px;
    }

    .pv-scope.pvx .pv-trust-chip {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .pv-scope.pvx .pv-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .pv-scope.pvx .pv-stat {
        padding: 15px 12px;
        border-radius: 10px;
    }

    .pv-scope.pvx .pv-stat-value {
        font-size: 23px;
    }

    .pv-scope.pvx .pv-stat-label {
        font-size: 12px;
    }

    .pv-scope.pvx .pv-side-title {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-hero {
        padding: 18px 14px 20px;
        margin-bottom: 14px;
    }

    .pv-scope.pvx .pv-hero-row {
        gap: 12px;
    }

    .pv-scope.pvx .pv-avatar {
        width: 64px;
        height: 64px;
    }

    .pv-scope.pvx .pv-hero-text {
        flex: 1 1 180px;
    }

    .pv-scope.pvx .pv-hero-name {
        font-size: 20px;
    }

    .pv-scope.pvx .pv-hero-title {
        margin-top: 3px;
        font-size: 13px;
    }

    .pv-scope.pvx .pv-hero-status {
        margin-top: 9px;
    }

    /* the booking button takes the line and the share mark sits on its end, rather
       than dropping to a row of its own with the band left half empty */
    .pv-scope.pvx .pv-hero-actions {
        gap: 8px;
        margin-top: 14px;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn-book {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn-whatsapp {
        flex: 1 1 100%;
        order: -1;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn-icon {
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
    }

    .pv-scope.pvx .pv-hero-actions .pv-btn {
        height: 44px;
        font-size: 14px;
    }

    .pv-scope.pvx .pv-shell {
        padding: 0 12px;
    }

    .pv-scope.pvx .pv-card {
        border-radius: 12px;
    }

    .pv-scope.pvx .pv-pad {
        padding: 14px;
    }

    .pv-scope.pvx .pv-pad-side {
        padding: 14px;
    }

    .pv-scope.pvx .pv-profiles,
    .pv-scope.pvx .pv-trustcard {
        padding: 13px;
        margin-bottom: 10px;
    }

    /* the chips crowd at this width, so they are tightened rather than wrapped
       onto a line each */
    .pv-scope.pvx .pv-profiles .pv-tabs {
        gap: 7px;
    }

    .pv-scope.pvx .pv-tab {
        padding: 7px 13px;
        font-size: 12.5px;
    }

    .pv-scope.pvx .pv-tabs-label {
        margin-bottom: 2px;
    }

    .pv-scope.pvx .pv-section-title {
        font-size: 15px;
    }

    .pv-scope.pvx .pv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pv-scope.pvx .pv-stat {
        padding: 13px 10px;
    }

    .pv-scope.pvx .pv-stat-value {
        font-size: 21px;
    }

    .pv-scope.pvx .pv-stat-label {
        font-size: 11.5px;
    }

    .pv-scope.pvx .pv-stat-verified,
    .pv-scope.pvx .pv-stat-self {
        margin-top: 6px;
        font-size: 9.5px;
    }

    .pv-scope.pvx .pv-charge-label,
    .pv-scope.pvx .pv-charge-value {
        font-size: 13.5px;
    }

    .pv-scope.pvx .pv-charge {
        padding: 10px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-scope.pvx .pv-tab {
        transition: none;
    }
}

/* ==========================================================================
   Where the sections sit

   The business card belongs under the reviews in the main column, not in the
   rail - it is a paragraph and a button, and the rail is 320px. The markup puts
   it there now; these rules give it the room it gained.
   ========================================================================== */

.pv-scope.pvx .pv-main .pv-card.pv-pad-side {
    padding: 0;
}

.pv-scope.pvx .pv-main .pv-side-kicker {
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--pvx-hair);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #94a3b8;
}

.pv-scope.pvx .pv-main .pv-business {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 0;
}

.pv-scope.pvx .pv-main .pv-business-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pvx-ink);
    color: #fff;
}

.pv-scope.pvx .pv-main .pv-business-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-main .pv-business-type {
    margin-top: 3px;
    font-size: 14px;
    color: var(--pvx-muted);
}

.pv-scope.pvx .pv-main .pv-business-tag {
    margin: 14px 0 0;
    padding: 0 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pvx-body);
}

/* the button hugs its words here instead of spanning a narrow rail */
.pv-scope.pvx .pv-main .pv-business-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 18px 24px 24px;
    padding: 11px 18px;
    border: 1px solid var(--pvx-line);
    border-radius: 10px;
    background: #fff;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pvx-blue);
}

.pv-scope.pvx .pv-main .pv-business-btn:hover,
.pv-scope.pvx .pv-main .pv-business-btn:focus {
    border-color: #bfd3f5;
    background: #f5f8ff;
    color: var(--pvx-blue);
}

/* ---- the rail's charge rows --------------------------------------------- */
/* the design lists these as rows on hairlines rather than as filled boxes */
.pv-scope.pvx .pv-charge-list {
    display: block;
    margin-top: 12px;
}

.pv-scope.pvx .pv-charge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border: 0;
    border-top: 1px solid var(--pvx-hair);
    border-radius: 0;
    background: none;
}

.pv-scope.pvx .pv-charge-label {
    font-size: 14px;
    color: var(--pvx-body);
}

.pv-scope.pvx .pv-charge-value {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-charge-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pvx-hair);
    font-size: 12.5px;
    color: var(--pvx-muted);
}

/* ---- availability -------------------------------------------------------- */
.pv-scope.pvx .pv-side-avail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

.pv-scope.pvx .pv-side-avail.pv-avail-on {
    color: #0f7a42;
}

.pv-scope.pvx .pv-side-avail.pv-avail-off {
    color: var(--pvx-muted);
}

@media (max-width: 767px) {
    .pv-scope.pvx .pv-main .pv-side-kicker {
        padding: 13px 16px;
    }

    .pv-scope.pvx .pv-main .pv-business {
        gap: 12px;
        padding: 16px 16px 0;
    }

    .pv-scope.pvx .pv-main .pv-business-mark {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .pv-scope.pvx .pv-main .pv-business-name {
        font-size: 16px;
    }

    .pv-scope.pvx .pv-main .pv-business-type,
    .pv-scope.pvx .pv-main .pv-business-tag {
        font-size: 13.5px;
    }

    .pv-scope.pvx .pv-main .pv-business-tag {
        margin-top: 12px;
        padding: 0 16px;
    }

    .pv-scope.pvx .pv-main .pv-business-btn {
        width: calc(100% - 32px);
        justify-content: center;
        margin: 14px 16px 16px;
    }
}

/* ==========================================================================
   Type

   The page asked for Poppins, on .pv-scope and again on the sheets it opens.
   One family throughout instead, stated on the scope and restated for the form
   controls, which do not inherit the page font on their own.
   ========================================================================== */

.pv-scope.pvx,
.pv-scope.pvx button,
.pv-scope.pvx input,
.pv-scope.pvx select,
.pv-scope.pvx textarea {
    font-family: "Nunito Sans", serif;
}

/* the share and review sheets sit over the page, outside .pv-scope, and set the
   family again on themselves, so they are named here rather than scoped */
.pv-sheet-backdrop,
.pv-sheet-backdrop button,
.pv-sheet-backdrop input,
.pv-sheet-backdrop select,
.pv-sheet-backdrop textarea {
    font-family: "Nunito Sans", serif;
}

/* ==========================================================================
   Reviews and Also operates - the reading sizes

   Both blocks were written at rail sizes (11-13.5px). They are body copy in the
   main column now, so they read at the design's sizes instead.
   ========================================================================== */

/* ---- reviews ------------------------------------------------------------- */
.pv-scope.pvx .pv-review-head {
    gap: 14px;
}

.pv-scope.pvx .pv-review-score strong {
    font-size: 18px;
    font-weight: 800;
}

.pv-scope.pvx .pv-review-count {
    font-size: 13.5px;
    color: var(--pvx-muted);
}

.pv-scope.pvx .pv-review-write {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

/* the line about where reviews come from reads as a tinted bar, as in the design */
.pv-scope.pvx .pv-review-trust {
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #eff5ff;
    font-size: 13.5px;
    line-height: 1.5;
    color: #3f4a5c;
}

.pv-scope.pvx .pv-review-trust svg {
    margin-top: 2px;
}

.pv-scope.pvx .pv-review-range {
    font-size: 13px;
}

.pv-scope.pvx .pv-review-blank {
    padding: 26px 20px;
    border-radius: 12px;
}

.pv-scope.pvx .pv-review-blank-title {
    margin-bottom: 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-review-blank-note {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pvx-muted);
}

.pv-scope.pvx .pv-review-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.pv-scope.pvx .pv-review-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pvx-ink);
}

.pv-scope.pvx .pv-review-meta {
    font-size: 12.5px;
}

.pv-scope.pvx .pv-review-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pvx-body);
}

.pv-scope.pvx .pv-review-org {
    font-size: 12.5px;
}

.pv-scope.pvx .pv-breakdown-label,
.pv-scope.pvx .pv-breakdown-score {
    font-size: 13px;
}

/* ---- also operates ------------------------------------------------------- */
.pv-scope.pvx .pv-main .pv-business-name {
    font-size: 19px;
}

.pv-scope.pvx .pv-main .pv-business-type {
    font-size: 14.5px;
}

.pv-scope.pvx .pv-main .pv-business-tag {
    font-size: 14.5px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .pv-scope.pvx .pv-review-write {
        height: 38px;
        padding: 0 13px;
        font-size: 13.5px;
    }

    .pv-scope.pvx .pv-review-trust {
        padding: 11px 12px;
        font-size: 13px;
    }

    .pv-scope.pvx .pv-review-blank {
        padding: 20px 16px;
    }

    .pv-scope.pvx .pv-review-blank-title {
        font-size: 14.5px;
    }

    .pv-scope.pvx .pv-review-blank-note,
    .pv-scope.pvx .pv-review-text,
    .pv-scope.pvx .pv-main .pv-business-tag,
    .pv-scope.pvx .pv-main .pv-business-type {
        font-size: 13.5px;
    }

    .pv-scope.pvx .pv-review-name {
        font-size: 14px;
    }

    .pv-scope.pvx .pv-main .pv-business-name {
        font-size: 16.5px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-review-score strong {
        font-size: 16px;
    }

    .pv-scope.pvx .pv-review-trust {
        font-size: 12.5px;
    }

    .pv-scope.pvx .pv-review-blank-note,
    .pv-scope.pvx .pv-review-text,
    .pv-scope.pvx .pv-main .pv-business-tag {
        font-size: 13px;
    }

    .pv-scope.pvx .pv-main .pv-business-name {
        font-size: 16px;
    }
}

/* an uploaded photo gets a firmer ring than the initials disc, so it separates
   from a banner behind it */
.pv-scope.pvx img.pv-avatar {
  border-color: rgba(255, 255, 255, .85);
  background: #fff;
  object-fit: contain;
}

/* ==========================================================================
   Charges - the TERMS block and the cost note under it

   The terms read as one quiet panel: each rule a row with its mark in a soft
   blue tile, the rule's name over its value, and a hairline between rows. The
   free-text note below becomes a calm amber card rather than a bordered alert.
   ========================================================================== */

.pv-scope.pvx .pv-terms {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f6;
}

/* the heading: a small label with a rule running out to the edge */
.pv-scope.pvx .pv-terms-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--pvx-ink);
}

/* the rows sit together on one soft panel */
.pv-scope.pvx .pv-term {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #eef1f6;
    border-bottom-width: 0;
}

.pv-scope.pvx .pv-terms-title + .pv-term {
    border-radius: 12px 12px 0 0;
}

.pv-scope.pvx .pv-term:last-child {
    border-bottom-width: 1px;
    border-radius: 0 0 12px 12px;
}

.pv-scope.pvx .pv-terms-title + .pv-term:last-child {
    border-radius: 12px;
}

.pv-scope.pvx .pv-term + .pv-term {
    box-shadow: inset 0 1px 0 #eef1f6;
    border-top-color: transparent;
}

.pv-scope.pvx .pv-term-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
    background: #eaf1ff;
    color: #1d4ed8;
}

/* the drawn mark grows with its tile */
.pv-scope.pvx .pv-term-icon svg {
    width: 20px;
    height: 20px;
}

.pv-scope.pvx .pv-term-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pv-scope.pvx .pv-term-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.pv-scope.pvx .pv-term-value {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

/* ---- the cost note ------------------------------------------------------- */
.pv-scope.pvx .pv-charge-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid #fde7b0;
    border-radius: 12px;
    background: #fffbeb;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7c5a12;
}

.pv-scope.pvx .pv-charge-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 8px;
    background: #fef3c7;
    color: #b45309;
}

/* ---- responsive ---------------------------------------------------------- */
/* when the rail runs the full width under the main column, the terms have room
   to sit two to a row as separate tiles instead of one long stack */
@media (min-width: 576px) and (max-width: 991px) {
    .pv-scope.pvx .pv-terms {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pv-scope.pvx .pv-terms-title {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .pv-scope.pvx .pv-term,
    .pv-scope.pvx .pv-terms-title + .pv-term,
    .pv-scope.pvx .pv-term:last-child,
    .pv-scope.pvx .pv-terms-title + .pv-term:last-child {
        border-width: 1px;
        border-radius: 12px;
        box-shadow: none;
    }

    .pv-scope.pvx .pv-term + .pv-term {
        border-top-color: #eef1f6;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-term {
        gap: 10px;
        padding: 9px 10px;
    }

    .pv-scope.pvx .pv-term-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .pv-scope.pvx .pv-term-label {
        font-size: 12.5px;
    }

    .pv-scope.pvx .pv-term-value,
    .pv-scope.pvx .pv-charge-info {
        font-size: 12px;
    }

    .pv-scope.pvx .pv-charge-info {
        padding: 11px;
    }
}

/* ==========================================================================
   Crew Packages

   Each package reads as a small offer card: a people mark in a soft blue tile,
   the package name and what it includes beside it, and the price on its own
   line under a hairline. The mark is drawn here so the markup stays as it is.
   ========================================================================== */

.pv-scope.pvx .pv-package-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.pv-scope.pvx .pv-package {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pv-scope.pvx .pv-package:hover {
    border-color: #cfdcee;
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, .55);
}

/* the people mark, in a tile that spans the name and includes lines */
.pv-scope.pvx .pv-package::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eaf1ff no-repeat center / 18px 18px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19.5c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M16 4.9a3.2 3.2 0 0 1 0 6.2'/%3E%3Cpath d='M18.5 14.3c1.6.8 2.5 2.6 2.5 5.2'/%3E%3C/svg%3E");
}

.pv-scope.pvx .pv-package-name {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}

.pv-scope.pvx .pv-package-includes {
    grid-column: 2;
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

/* the price runs the card's full width, under a hairline */
.pv-scope.pvx .pv-package-price {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #e2e8f0;
}

.pv-scope.pvx .pv-package-figure {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #0f172a;
}

.pv-scope.pvx .pv-package-unit {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

/* ---- responsive ---------------------------------------------------------- */
/* when the rail runs the full width, packages sit two to a row */
@media (min-width: 576px) and (max-width: 991px) {
    .pv-scope.pvx .pv-package-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-package {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 10px;
        padding: 12px;
        border-radius: 12px;
    }

    .pv-scope.pvx .pv-package::before {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background-size: 16px 16px;
    }

    .pv-scope.pvx .pv-package-name {
        font-size: 13.5px;
    }

    .pv-scope.pvx .pv-package-includes {
        font-size: 12px;
    }

    .pv-scope.pvx .pv-package-figure {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-scope.pvx .pv-package {
        transition: none;
    }
}

/* ==========================================================================
   Featured Tournaments

   Each tournament reads as a small featured card: its initials in a tinted
   tile beside the name, the category as a chip under it, a faint trophy in the
   corner marking it featured, and the professional's own note as a green
   verified strip across the foot. Markup untouched - the layout is a grid here.
   ========================================================================== */

.pv-scope.pvx .pv-tour-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr));
  gap: 14px;
}

.pv-scope.pvx .pv-tour {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 16px;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pv-scope.pvx .pv-tour:hover {
    border-color: #cfdcee;
    box-shadow: 0 14px 28px -22px rgba(15, 23, 42, .6);
    transform: translateY(-2px);
}

/* the faint trophy that marks the card as featured */
.pv-scope.pvx .pv-tour::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    opacity: .9;
    pointer-events: none;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6H5.5a1.5 1.5 0 0 0-1.5 1.5c0 2 1.6 3.5 4 3.5'/%3E%3Cpath d='M16 6h2.5A1.5 1.5 0 0 1 20 7.5c0 2-1.6 3.5-4 3.5'/%3E%3Cpath d='M12 13v3.5'/%3E%3Cpath d='M8.5 20h7'/%3E%3Cpath d='M9.5 20l.6-3.5h3.8l.6 3.5'/%3E%3C/svg%3E");
}

/* the initials tile spans the name and category lines */
.pv-scope.pvx .pv-tour-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
}

.pv-scope.pvx .pv-tour-logo {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #eaf1ff 0%, #dbe7ff 100%);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #1d4ed8;
}

.pv-scope.pvx .pv-tour-name {
    grid-column: 2;
    grid-row: 1;
    margin: 1px 0 0;
    padding-right: 28px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    overflow-wrap: anywhere;
}

/* the category, as a small chip */
.pv-scope.pvx .pv-tour-summary {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 6px 0 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

/* the professional's note: a green verified strip across the foot */
.pv-scope.pvx .pv-tour-note {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #ecfdf3;
    font-size: 13px;
    line-height: 1.5;
    color: #067647;
}

.pv-scope.pvx .pv-tour-note svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #12b76a;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 575px) {
    .pv-scope.pvx .pv-tour-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-tour {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 12px;
        padding: 13px;
        border-radius: 14px;
    }

    .pv-scope.pvx .pv-tour-logo {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 13px;
    }

    .pv-scope.pvx .pv-tour-name {
        font-size: 14px;
    }

    .pv-scope.pvx .pv-tour-note {
        margin-top: 12px;
        font-size: 12.5px;
    }

    .pv-scope.pvx .pv-tour::after {
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-scope.pvx .pv-tour {
        transition: none;
    }

    .pv-scope.pvx .pv-tour:hover {
        transform: none;
    }
}

/* ==========================================================================
   Professional Statistics - one joined panel

   The figures stop being separate boxes and become cells of one panel: thin
   dividers between them, each cell left-aligned with a large number, its label,
   and a small verified or self-reported mark. Each cell draws its divider inside
   itself, on its top and left edge, where no neighbour can paint over it; every
   cell sits 1px up and left, so the lines along the panel's own top and left
   edge slide under its clipped border. A short last row leaves white space.
   ========================================================================== */

.pv-scope.pvx .pv-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: #fff;
}

.pv-scope.pvx .pv-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 18px 20px;
    border: 0;
    border-radius: 0;
    background: #fff;
    text-align: left;
    margin: -1px 0 0 -1px;
    box-shadow: inset 1px 1px 0 #e6ebf2;
}

.pv-scope.pvx .pv-stat-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: #0f172a;
}

.pv-scope.pvx .pv-stat-label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #475569;
}

/* the mark under the label: a blue seal for verified, a grey dot for the rest */
.pv-scope.pvx .pv-stat-verified,
.pv-scope.pvx .pv-stat-self {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding: 12px 0 0;
    border-radius: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.pv-scope.pvx .pv-stat-verified {
    color: #1d4ed8;
}

.pv-scope.pvx .pv-stat-verified svg {
    width: 14px;
    height: 14px;
    color: #1d4ed8;
}

.pv-scope.pvx .pv-stat-self {
    color: #94a3b8;
}

.pv-scope.pvx .pv-stat-self::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 3px 0 3px;
    border-radius: 999px;
    background: #cbd5e1;
}

/* ==========================================================================
   Services Offered - tags

   A soft green tag per service, with its tick inside, flowing along the line
   rather than lining up in two columns of plain text.
   ========================================================================== */

.pv-scope.pvx .pv-service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pv-scope.pvx .pv-service {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 10px;
    border: 1px solid #d1fadf;
    border-radius: 999px;
    background: #f0fdf4;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #065f46;
}

.pv-scope.pvx .pv-service-tick {
    display: inline-flex;
    color: #12b76a;
}

.pv-scope.pvx .pv-service-tick svg {
    width: 16px;
    height: 16px;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
    .pv-scope.pvx .pv-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
        gap: 0;
        border-radius: 14px;
    }

    .pv-scope.pvx .pv-stat {
        padding: 15px 16px;
        border-radius: 0;
    }

    .pv-scope.pvx .pv-stat-value {
        font-size: 25px;
    }

    .pv-scope.pvx .pv-stat-label {
        font-size: 12.5px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pv-scope.pvx .pv-stat {
        padding: 13px 14px;
    }

    .pv-scope.pvx .pv-stat-value {
        font-size: 22px;
    }

    .pv-scope.pvx .pv-stat-label {
        margin-top: 6px;
        font-size: 12px;
    }

    .pv-scope.pvx .pv-stat-verified,
    .pv-scope.pvx .pv-stat-self {
        padding-top: 10px;
        font-size: 11px;
    }

    .pv-scope.pvx .pv-service-grid {
        gap: 6px;
    }

    .pv-scope.pvx .pv-service {
        padding: 7px 12px 7px 9px;
        font-size: 12.5px;
    }

    .pv-scope.pvx .pv-service-tick svg {
        width: 15px;
        height: 15px;
    }
}

/* ==========================================================================
   Professional Statistics - metric cards

   A metric is scanned label -> value -> source, so each card reads in that
   order: the label on top, the figure large beneath it in tabular digits, the
   source as a small chip at the foot. Verified cards carry a thin blue top edge
   so they separate from self-reported ones without more words.

   Rows never end short. The cards are flex items that grow to fill their row,
   and the row size follows the count: up to four sit in one row, five split
   3 + 2, six 3 + 3, seven 4 + 3, eight 4 + 4 - so a lone card is never left
   stranded beside empty space.
   ========================================================================== */

.pv-scope.pvx .pv-stat-grid {
    --pvx-stat-cols: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
}

.pv-scope.pvx .pv-stat-grid:has(> .pv-stat:nth-child(5):last-child),
.pv-scope.pvx .pv-stat-grid:has(> .pv-stat:nth-child(6):last-child) {
    --pvx-stat-cols: 3;
}

.pv-scope.pvx .pv-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 calc((100% - (var(--pvx-stat-cols) - 1) * 12px) / var(--pvx-stat-cols));
    min-width: 0;
    margin: 0;
    padding: 16px 16px 14px;
    overflow: hidden;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pv-scope.pvx .pv-stat:hover {
    border-color: #d8e1ec;
    box-shadow: 0 12px 26px -22px rgba(15, 23, 42, .55);
}

/* verified figures: a thin blue top edge */
.pv-scope.pvx .pv-stat:has(.pv-stat-verified)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
}

/* label first. It always holds two lines of height, so a label that wraps
   ("Other / External Matches") does not push its figure lower than the figures
   beside it - the numbers sit on one line across the row, where they are compared */
.pv-scope.pvx .pv-stat-label {
    order: 1;
    min-height: 2.7em;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #64748b;
}

/* then the figure */
.pv-scope.pvx .pv-stat-value {
    order: 2;
    margin-top: 8px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

/* then the source, as a chip at the foot */
.pv-scope.pvx .pv-stat-verified,
.pv-scope.pvx .pv-stat-self {
    order: 3;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: auto;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
}

/* keeps the chip off the figure when the label is short */
.pv-scope.pvx .pv-stat-value + .pv-stat-label + .pv-stat-verified,
.pv-scope.pvx .pv-stat-value + .pv-stat-label + .pv-stat-self {
    margin-top: auto;
}

.pv-scope.pvx .pv-stat-value {
    margin-bottom: 14px;
}

.pv-scope.pvx .pv-stat-verified {
    background: #eef4ff;
    color: #1d4ed8;
}

.pv-scope.pvx .pv-stat-verified svg {
    width: 13px;
    height: 13px;
}

.pv-scope.pvx .pv-stat-self {
    background: #f1f5f9;
    color: #64748b;
}

.pv-scope.pvx .pv-stat-self::before {
    content: "";
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 999px;
    background: #94a3b8;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
    .pv-scope.pvx .pv-stat-grid {
        gap: 10px;
        border-radius: 0;
    }

    .pv-scope.pvx .pv-stat {
        flex-basis: calc((100% - (var(--pvx-stat-cols) - 1) * 10px) / var(--pvx-stat-cols));
        padding: 14px 14px 12px;
        border-radius: 12px;
    }

    .pv-scope.pvx .pv-stat-value {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .pv-scope.pvx .pv-stat-label {
        font-size: 12px;
    }
}

/* phones: two to a row; an odd last card takes the whole row */
@media (max-width: 480px) {
    .pv-scope.pvx .pv-stat-grid,
    .pv-scope.pvx .pv-stat-grid:has(> .pv-stat:nth-child(5):last-child),
    .pv-scope.pvx .pv-stat-grid:has(> .pv-stat:nth-child(6):last-child) {
        --pvx-stat-cols: 2;
        display: flex;
        gap: 8px;
    }

    .pv-scope.pvx .pv-stat {
        flex-basis: calc((100% - 8px) / 2);
        padding: 13px 12px 11px;
    }

    .pv-scope.pvx .pv-stat-value {
        margin-top: 6px;
        margin-bottom: 10px;
        font-size: 23px;
    }

    .pv-scope.pvx .pv-stat-label {
        font-size: 11.5px;
    }

    .pv-scope.pvx .pv-stat-verified,
    .pv-scope.pvx .pv-stat-self {
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-scope.pvx .pv-stat {
        transition: none;
    }
}

/* ==========================================================================
   Hero - the profile card

   One white card in the page column, as the reference lays it out:
   - a banner strip across the top (the uploaded cover, or a soft blue strip);
   - the avatar overlapping the strip's foot, the name and verified chip lifted
     onto it, the title, rating, location and availability below, and the
     WhatsApp, Request Booking and share actions on the right;
   - the reliability chips in a row under that;
   - a hairline, then the "Profiles:" tabs with the current role underlined.
   ========================================================================== */

.pv-scope.pvx .pv-hero {
    position: relative;
    display: block;
    min-height: 0;
    margin: 16px 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* ---- the banner strip ---------------------------------------------------- */
  .pv-scope.pvx .pv-hero .pv-cover,
  .pv-scope.pvx .pv-hero .pv-cover-plain {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    max-width: none;
    height: 300px;
    margin: 0;
    border-radius: 0;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
  }

/* no banner uploaded: a quiet brand strip rather than an empty block */
.pv-scope.pvx .pv-hero .pv-cover-plain {
    background-image: linear-gradient(120deg, #dbeafe 0%, #eff6ff 55%, #e0e7ff 100%);
}

/* a black transparent layer over the whole banner */
.pv-scope.pvx .pv-hero .pv-cover::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    height: auto;
    background: rgba(0, 0, 0, .5);
    pointer-events: none;
}

.pv-scope.pvx .pv-hero .pv-cover-plain::after {
    display: none;
}

.pv-scope.pvx .pv-hero .pv-hero-inner {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---- the identity row ---------------------------------------------------- */
.pv-scope.pvx .pv-hero .pv-hero-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 22px;
    padding: 0 28px 20px;
}

.pv-scope.pvx .pv-hero .pv-avatar {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 112px;
    height: 112px;
    margin-top: -34px;
    border: 4px solid #fff;
    border-radius: 999px;
    background: #e8f0fe;
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35);
}

.pv-scope.pvx .pv-hero .pv-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f0fe;
    color: #1d4ed8;
    font-size: 30px;
    font-weight: 800;
}

/* the words start on the strip's foot, level with the upper part of the avatar */
.pv-scope.pvx .pv-hero .pv-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 10px;
  padding: 0;
}

.pv-scope.pvx .pv-hero .pv-hero-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.pv-scope.pvx .pv-hero .pv-hero-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: #0f172a;
}

.pv-scope.pvx .pv-hero .pv-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: #e8f0fe;
    font-size: 12.5px;
    font-weight: 700;
    color: #1d4ed8;
}

.pv-scope.pvx .pv-hero .pv-verified svg {
    width: 14px;
    height: 14px;
}

.pv-scope.pvx .pv-hero .pv-hero-title {
    margin-top: 6px;
    font-size: 16px;
    color: #334155;
}

.pv-scope.pvx .pv-hero .pv-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 8px;
    font-size: 14px;
    color: #475569;
}

.pv-scope.pvx .pv-hero .pv-hero-meta .pv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pv-scope.pvx .pv-hero .pv-hero-meta strong {
    font-weight: 700;
    color: #0f172a;
}

.pv-scope.pvx .pv-hero .pv-star {
    color: #f59e0b;
}

/* availability: a plain coloured line, green when open, amber when not */
.pv-scope.pvx .pv-hero .pv-hero-status {
    margin-top: 10px;
}

.pv-scope.pvx .pv-hero .pv-hero-status .pv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
}

.pv-scope.pvx .pv-hero .pv-hero-status .pv-avail-on {
    color: #067647;
}

.pv-scope.pvx .pv-hero .pv-hero-status .pv-avail-off {
    color: #c2410c;
}

.pv-scope.pvx .pv-hero .pv-hero-status .pv-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97316;
}

.pv-scope.pvx .pv-hero .pv-hero-status .pv-dot-on {
    background: #12b76a;
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .18);
}

/* ---- the actions --------------------------------------------------------- */
.pv-scope.pvx .pv-hero .pv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 10px;
    margin: 0 0 6px auto;
    padding: 0;
}

.pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

.pv-scope.pvx .pv-hero .pv-btn-whatsapp {
    order: 0;
    border: 0;
    background: #16a34a;
    color: #fff;
}

.pv-scope.pvx .pv-hero .pv-btn-whatsapp:hover,
.pv-scope.pvx .pv-hero .pv-btn-whatsapp:focus {
    background: #15803d;
    color: #fff;
}

/* the brand mark is drawn in its own colours; on the green button it goes white */
.pv-scope.pvx .pv-hero .pv-btn-whatsapp .pv-btn-glyph {
    display: inline-flex;
    filter: brightness(0) invert(1);
}

.pv-scope.pvx .pv-hero .pv-btn-book {
    order: 0;
    border: 0;
    background: #1d63ed;
    color: #fff;
}

.pv-scope.pvx .pv-hero .pv-btn-book:hover,
.pv-scope.pvx .pv-hero .pv-btn-book:focus {
    background: #1a56d6;
    color: #fff;
}

.pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-icon {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #334155;
}

.pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-icon:hover,
.pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-icon:focus {
    border-color: #b9c6d6;
    background: #f8fafc;
    color: #0f172a;
}

/* ---- the reliability chips ----------------------------------------------- */
.pv-scope.pvx .pv-hero .pv-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0 28px 20px;
    border: 0;
}

.pv-scope.pvx .pv-hero .pv-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 14px;
    color: #334155;
}

.pv-scope.pvx .pv-hero .pv-trust-icon {
    display: inline-flex;
    color: #2563eb;
}

.pv-scope.pvx .pv-hero .pv-trust-text strong {
    font-weight: 700;
    color: #0f172a;
}

/* ---- responsive ---------------------------------------------------------- */
/* the actions drop under the words, lined up with them */
@media (max-width: 991px) {
    .pv-scope.pvx .pv-hero .pv-hero-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .pv-scope.pvx .pv-hero .pv-hero-text {
        flex: 1 1 0;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        margin: 0;
        padding-left: 134px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-book,
    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-whatsapp {
        flex: 0 0 auto;
    }
}

/* phones: avatar, then the words, then the actions, each on its own line */
@media (max-width: 767px) {
    .pv-scope.pvx .pv-hero {
        margin: 12px 0;
        border-radius: 14px;
    }

    .pv-scope.pvx .pv-hero .pv-cover,
    .pv-scope.pvx .pv-hero .pv-cover-plain {
        height: 130px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-row {
        gap: 10px 16px;
        padding: 0 16px 16px;
    }

    .pv-scope.pvx .pv-hero .pv-avatar {
        width: 88px;
        height: 88px;
        margin-top: -44px;
    }

    .pv-scope.pvx .pv-hero .pv-avatar-initials {
        font-size: 24px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-text {
        flex: 1 1 100%;
        margin-top: 0;
    }

    .pv-scope.pvx .pv-hero .pv-hero-name {
        font-size: 20px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-title {
        margin-top: 4px;
        font-size: 14.5px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-meta,
    .pv-scope.pvx .pv-hero .pv-hero-status .pv-meta-item {
        font-size: 13px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions {
        gap: 8px;
        padding-left: 0;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn {
        height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-book,
    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-whatsapp {
        flex: 1 1 auto;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-icon {
        width: 42px;
        min-width: 42px;
    }

    .pv-scope.pvx .pv-hero .pv-trust {
        gap: 8px;
        padding: 0 16px 16px;
    }

    .pv-scope.pvx .pv-hero .pv-trust-chip {
        padding: 7px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-hero .pv-cover,
    .pv-scope.pvx .pv-hero .pv-cover-plain {
        height: 108px;
    }

    .pv-scope.pvx .pv-hero .pv-avatar {
        width: 76px;
        height: 76px;
        margin-top: -38px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-name {
        font-size: 19px;
    }

    /* three buttons do not fit one phone row: booking takes the line with the share
       square on its end, and WhatsApp runs the full width beneath - rather than the
       share square wrapping onto a line of its own */
    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-book {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-icon {
        order: 2;
        flex: 0 0 42px;
    }

    .pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-whatsapp {
        order: 3;
        flex: 1 1 100%;
    }
}

/* the share mark keeps its size whatever the row does */
.pv-scope.pvx .pv-hero .pv-hero-actions .pv-btn-icon svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

/* ==========================================================================
   Profiles - a tab bar rather than pill buttons
   One row of tabs on a hairline; the chosen role is underlined in blue.
   More roles than fit scroll sideways instead of wrapping into a second row.
   ========================================================================== */
/* even space above and below the tabs; each tab carries its own inner padding */
.pv-scope.pvx .pv-card.pv-profiles {
    padding: 6px 20px;
    overflow: hidden;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
    margin: 0 -20px;
    padding: 0 20px;
    border-bottom: 0;
    /* no hairline under the row: the card's own edge frames it, so the space above
       and below the tabs reads as one even band */
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tabs::-webkit-scrollbar {
    display: none;
}

/* "Profiles" reads as the card's title, set off from the tabs by a thin divider,
   and stays pinned at the start while the tabs scroll */
.pv-scope.pvx .pv-card.pv-profiles .pv-tabs-label {
    position: sticky;
    left: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin: 10px 10px 11px 0;
    padding: 0 16px 0 0;
    border-right: 1px solid #e5e9f0;
    background: #fff;
    z-index: 2;
    box-shadow: -20px 0 0 #fff, 10px 0 10px -2px #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-transform: none;
    color: #0f172a;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 12px 11px 14px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: #64748b;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

/* the underline is drawn, so every tab keeps the same height chosen or not */
.pv-scope.pvx .pv-card.pv-profiles .pv-tab::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background-color .15s ease;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tab:hover,
.pv-scope.pvx .pv-card.pv-profiles .pv-tab:focus-visible {
    border: 0;
    background: #f5f7fb;
    color: #0f172a;
    outline: none;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tab:hover::after {
    background: #cbd5e1;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tab-on,
.pv-scope.pvx .pv-card.pv-profiles .pv-tab-on:hover {
    border: 0;
    background: transparent;
    font-weight: 700;
    color: #1d63ed;
}

.pv-scope.pvx .pv-card.pv-profiles .pv-tab-on::after,
.pv-scope.pvx .pv-card.pv-profiles .pv-tab-on:hover::after {
    background: #1d63ed;
}

@media (max-width: 767px) {
    .pv-scope.pvx .pv-card.pv-profiles {
        padding: 4px 16px;
        margin-bottom: 12px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tabs {
        margin: 0 -16px;
        padding: 0 16px;
        gap: 2px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tabs-label {
        margin-right: 8px;
        padding-right: 14px;
        font-size: 15.5px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tab {
        padding: 11px 12px 13px;
        font-size: 14px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tab::after {
        left: 8px;
        right: 8px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-card.pv-profiles {
        padding: 2px 14px;
        margin-bottom: 10px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tabs {
        margin: 0 -14px;
        padding: 0 14px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tabs-label {
        padding-right: 12px;
        font-size: 14.5px;
    }

    .pv-scope.pvx .pv-card.pv-profiles .pv-tab {
        padding: 10px 10px 12px;
        font-size: 13.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-scope.pvx .pv-card.pv-profiles .pv-tab,
    .pv-scope.pvx .pv-card.pv-profiles .pv-tab::after {
        transition: none;
    }
}

/* ==========================================================================
   Hero without a banner - the blue band

   With no cover uploaded there is nothing to show in the strip, so the whole
   head becomes one blue band: the avatar ringed in white on the left, the name,
   title and availability in white beside it, and the actions on the right.
   Everything here is scoped to a hero holding .pv-cover-plain, so a profile with
   a banner keeps the card above untouched.
   ========================================================================== */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) {
    border: 0;
    background: linear-gradient(110deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
    color: #fff;
    box-shadow: 0 10px 30px -18px rgba(29, 78, 216, .6);
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-cover-plain {
    display: none;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-row {
    align-items: center;
    gap: 28px;
    padding: 36px 32px;
}

/* ---- avatar -------------------------------------------------------------- */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-avatar {
    align-self: center;
    width: 112px;
    height: 112px;
    margin-top: 0;
    border: 4px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .12);
    object-fit: cover;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-avatar-initials {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ---- the words ----------------------------------------------------------- */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-text {
    margin-top: 0;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-name {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-verified {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-verified svg {
    color: #93c5fd;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-title {
    margin-top: 8px;
    font-size: 17px;
    color: rgba(255, 255, 255, .88);
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-meta {
    color: rgba(255, 255, 255, .85);
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-meta:empty {
    display: none;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-meta strong {
    color: #fff;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-star {
    color: #fcd34d;
}

/* availability, as a soft pill on the band */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-status {
    margin-top: 14px;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-status .pv-meta-item {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-status .pv-dot {
    background: #fdba74;
}

/* both classes, so the open state always wins over the plain dot above */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-status .pv-dot.pv-dot-on {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}

/* ---- the actions --------------------------------------------------------- */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions {
    margin: 0 0 0 auto;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn {
    height: 46px;
    border-radius: 10px;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-btn-book {
    padding: 0 24px;
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .45);
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-btn-book:hover,
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-btn-book:focus {
    background: #eff6ff;
    color: #1e40af;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn-icon {
    width: 46px;
    min-width: 46px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn-icon:hover,
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn-icon:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---- the reliability chips, translucent on the band ---------------------- */
.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust {
    margin-top: -12px;
    padding: 0 32px 28px 172px;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust-chip {
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust-icon {
    color: #bfdbfe;
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust-text {
    color: rgba(255, 255, 255, .85);
}

.pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust-text strong {
    color: #fff;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-row {
        gap: 20px 24px;
        padding: 30px 28px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-avatar {
        width: 96px;
        height: 96px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-name {
        font-size: 28px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions {
        margin: 0;
        padding-left: 120px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust {
        margin-top: -8px;
        padding: 0 28px 26px 148px;
    }
}

@media (max-width: 767px) {
    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-row {
        gap: 14px;
        padding: 24px 18px 20px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-avatar {
        align-self: flex-start;
        width: 84px;
        height: 84px;
        margin-top: 0;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-name {
        font-size: 24px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-title {
        margin-top: 6px;
        font-size: 15px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-status {
        margin-top: 12px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-status .pv-meta-item {
        font-size: 13px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions {
        padding-left: 0;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn {
        height: 44px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn-icon {
        width: 44px;
        min-width: 44px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust {
        margin-top: -4px;
        padding: 0 18px 20px;
    }
}

@media (max-width: 480px) {
    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-row {
        padding: 20px 16px 18px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-avatar {
        width: 72px;
        height: 72px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-avatar-initials {
        font-size: 22px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-name {
        font-size: 22px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-hero-actions .pv-btn-icon {
        flex: 0 0 44px;
    }

    .pv-scope.pvx .pv-hero:has(.pv-cover-plain) .pv-trust {
        padding: 0 16px 18px;
    }
}