/* ================================================================
   SECTION: DESIGN TOKENS
   ================================================================ */

:root {
    --pink: #b8004d;
    --pink-bright: #ff1778;
    --ink: #151821;
    --muted: #505868;
    --line: #e6e7ed;
    --soft: #fff4f8;
    --card: #fff;
    --shadow: 0 16px 40px rgba(29, 31, 42, .08);
}

/* ================================================================
   SECTION: RESET & BASE ELEMENTS
   ================================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.64;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

picture {
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ================================================================
   SECTION: UTILITIES
   ================================================================ */

.wrap {
    width: min(1180px, calc(100% - 36px));
    margin: auto;
}

.link-underlined {
    text-decoration: underline;
}

/* ================================================================
   SECTION: SITE HEADER & NAVIGATION
   ================================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 26px;
    position: relative;
}

.brand {
    margin-right: auto;
}

.brand picture {
    width: 158px;
}

.brand img {
    width: 158px;
}

.links {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: .9rem;
    font-weight: 800;
}

.links a {
    padding: 9px 0;
}

.links a:hover,
.links .active {
    color: var(--pink);
}

.menu-btn {
    display: none;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    color: var(--ink);
}

/* ================================================================
   SECTION: HOME HERO
   ================================================================ */

.eyebrow {
    display: inline-block;
    color: var(--pink);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 950;
}

.hero {
    padding: 68px 0 0;
    background: linear-gradient(100deg, #fff 0%, #fff 53%, #fff3f8 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(3.2rem, 6vw, 5.8rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 10px 0 24px;
    max-width: 720px;
}

.hero h1 .accent {
    color: var(--pink);
}

.lead {
    font-size: 1.13rem;
    color: #4f5767;
    max-width: 690px;
    margin: 0;
}

.status-line {
    margin-top: 22px;
    color: var(--pink);
    font-weight: 900;
}

.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 900;
    transition: transform .18s;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 12px 28px rgba(184, 0, 77, .18);
}

.btn.secondary {
    background: #fff;
    border: 1px solid #dadce4;
}

.hero-photo-wrap {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}

.hero-photo-wrap:before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    border: 3px solid rgba(184, 0, 77, .12);
    right: 10%;
    top: 13%;
}

.hero-photo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 18px 50px rgba(30, 32, 43, .08);
}

.update-card {
    position: absolute;
    z-index: 3;
    right: 16px;
    bottom: 32px;
    width: min(300px, 72%);
    background: #fff;
    border: 1px solid #f0cbd9;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: var(--shadow);
}

.update-card b {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.update-card span {
    color: var(--muted);
    font-size: .9rem;
}

.progress {
    height: 7px;
    border-radius: 999px;
    background: #fbdce8;
    margin-top: 14px;
    overflow: hidden;
}

.progress i {
    display: block;
    width: 66%;
    height: 100%;
    background: var(--pink);
}

/* ================================================================
   SECTION: CONTENT SECTIONS & SERVICE CARDS
   ================================================================ */

.section {
    padding: 74px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

.section.soft {
    background: #fff8fb;
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
}

.section-head h2,
.two-col h2 {
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: 6px 0 14px;
}

.section-head p,
.two-col p {
    color: var(--muted);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    position: relative;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(27, 29, 39, .055);
    min-width: 0;
}

.service-card picture,
.service-card img {
    width: 100%;
    height: 330px;
}

.service-card img {
    object-fit: cover;
}

.service-card .overlay {
    position: absolute;
    left: 0;
    right: 22%;
    bottom: 0;
    background: #fff;
    padding: 20px;
}

.service-card h3 {
    font-size: 1.35rem;
    margin: 0 0 7px;
}

.service-card p {
    font-size: .92rem;
    color: var(--muted);
    margin: 0 0 12px;
}

.text-link {
    color: var(--pink);
    font-weight: 900;
    font-size: .9rem;
}

/* ================================================================
   SECTION: SECONDARY PAGES: HERO, CONTENT & FAQ
   ================================================================ */

.page-hero {
    padding: 62px 0 48px;
    background: linear-gradient(100deg, #fff 0%, #fff 48%, #fff4f8 100%);
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.page-hero-grid>* {
    min-width: 0;
}

.page-hero h1 {
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    line-height: 1;
    letter-spacing: -.05em;
    margin: 8px 0 18px;
}

.page-hero picture,
.page-hero img {
    width: 100%;
}

.page-hero img {
    height: 440px;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: var(--shadow);
}

.coming-box {
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--soft);
    border-left: 4px solid var(--pink);
    font-weight: 700;
}

.coming-box strong {
    display: block;
    color: var(--pink);
    margin-bottom: 4px;
}

.coming-box__link {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.coming-box__link:hover {
    color: var(--pink);
}

.content-wrap {
    max-width: 900px;
    width: 100%;
    min-width: 0;
}

.content-wrap h2 {
    font-size: 2rem;
    letter-spacing: -.03em;
    margin: 42px 0 12px;
    line-height: 1.2;
}

.content-wrap p {
    color: var(--muted);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0 0 40px;
}

.info-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    background: #fff;
}

.info-card b {
    display: block;
    margin-bottom: 6px;
}

.round-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fbe5ee;
    color: var(--pink);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    margin-bottom: 12px;
    font-weight: 950;
}

.small {
    font-size: .9rem;
    color: var(--muted);
}

.faq details {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.faq summary {
    font-weight: 850;
    cursor: pointer;
}

.faq p {
    margin-bottom: 0;
    color: var(--muted);
}

/* ================================================================
   SECTION: FOOTER
   ================================================================ */

footer {
    border-top: 1px solid var(--line);
    padding: 46px 0 54px;
    background: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) 1.5fr;
    gap: 50px;
    align-items: start;
}

.footer-logo {
    width: 142px;
    margin-bottom: 12px;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 28px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col>b {
    font-size: .88rem;
    color: var(--ink);
    margin-bottom: 3px;
}

.footer-col a {
    font-size: .88rem;
    font-weight: 700;
    color: #555d6c;
    line-height: 1.35;
}

.footer-col a:hover {
    color: var(--pink);
}

.age-note {
    font-size: .78rem;
    color: #656c79;
    margin-top: 14px;
    max-width: 320px;
}

/* ================================================================
   SECTION: LEGAL / POLICY PAGES
   ================================================================ */

.legal-hero {
    padding: 64px 0 34px;
    background: linear-gradient(90deg, #fff 0%, #fff7fa 100%);
    border-bottom: 1px solid var(--line);
}

.legal-hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: -.05em;
    margin: 6px 0 14px;
}

.legal-hero p {
    color: var(--muted);
    font-size: 1.1rem;
}

.legal-section {
    padding-top: 48px;
}

.legal-content {
    max-width: 960px;
    width: 100%;
    min-width: 0;
}

.legal-content h1 {
    display: none;
}

.legal-content h2 {
    font-size: 1.65rem;
    margin: 38px 0 14px;
}

.legal-content h3 {
    font-size: 1.15rem;
    margin: 28px 0 8px;
}

.legal-content p,
.legal-content li {
    color: #444b5a;
}

.legal-content p {
    margin: 0 0 16px;
}

.legal-content a {
    color: var(--pink);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.legal-content p:first-of-type {
    font-weight: 800;
    color: var(--ink);
}

/* ================================================================
   SECTION: ACCOUNT STATUS PAGE
   ================================================================ */

.account-status {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background: linear-gradient(135deg, #fff 0%, #fff2f7 100%);
}

.account-status-card {
    width: min(620px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(28px, 6vw, 54px);
    box-shadow: var(--shadow);
}

.account-status-card h1 {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 12px 0 18px;
}

.account-status-card p {
    color: var(--muted);
}

.status-logo {
    width: 150px;
    margin-bottom: 28px;
}

/* ================================================================
   SECTION: RESPONSIVE BREAKPOINTS & HOST PROFILE EXTRAS (PUBLIC SITE)
   ================================================================ */

@media (max-width: 920px) {
    .links {
        display: none;
    }

    .menu-btn {
        display: block;
        margin-left: auto;
    }

    .links.open {
        display: flex;
        position: absolute;
        left: 18px;
        right: 18px;
        top: 72px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 12px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .links.open a {
        padding: 12px 0;
        width: 100%;
    }

    .hero-grid,
    .page-hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        padding-top: 30px;
    }

    .hero-photo-wrap {
        min-height: 430px;
    }

    .hero-photo {
        max-height: 430px;
        border-radius: 26px;
    }

    .service-grid,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .service-card,
    .service-card picture,
    .service-card img {
        min-height: 360px;
        height: 360px;
    }

    .service-card .overlay {
        right: 18%;
    }

    .page-hero img {
        height: 380px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .wrap {
        width: min(100% - 24px, 1180px);
    }

    .nav {
        min-height: 70px;
    }

    .brand picture,
    .brand img {
        width: 142px;
    }

    .links.open {
        top: 66px;
        left: 12px;
        right: 12px;
    }

    .hero {
        padding-top: 34px;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 13vw, 3.5rem);
    }

    .lead {
        font-size: 1.02rem;
    }

    .hero-photo-wrap {
        min-height: 350px;
    }

    .hero-photo {
        height: 350px;
    }

    .update-card {
        right: 10px;
        bottom: 18px;
    }

    .section {
        padding: 56px 0;
    }

    .section-head h2 {
        font-size: clamp(1.9rem, 9vw, 2.5rem);
    }

    .page-hero {
        padding-top: 40px;
    }

    .page-hero-grid {
        gap: 28px;
    }

    .page-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3rem);
    }

    .page-hero img {
        height: auto;
        max-height: 420px;
        aspect-ratio: 4/3;
    }

    .cta-row .btn {
        width: 100%;
    }

    .service-card,
    .service-card picture,
    .service-card img {
        min-height: 320px;
        height: 320px;
    }

    .service-card .overlay {
        right: 0;
    }

    .content-wrap h2 {
        font-size: 1.7rem;
    }

    .footer-nav {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col:last-child {
        grid-column: 1/-1;
    }
}

@media (max-width: 420px) {
    .footer-nav {
        grid-template-columns: 1fr;
    }

    .footer-col:last-child {
        grid-column: auto;
    }

    .update-card {
        width: 82%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn {
        transition: none;
    }
}

.existing-host-note {
    margin-top: 14px;
    color: #4d4050;
    line-height: 1.55;
}

.existing-host-note strong {
    color: #161018;
}

.psychic-fullbleed {
    display: block;
    width: 100%;
    height: 440px;
    overflow: hidden;
    border-radius: 0;
    background: #2b092f;
}

.page-hero .psychic-fullbleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 920px) {
    .psychic-fullbleed {
        height: 380px;
    }
}

@media (max-width: 650px) {
    .psychic-fullbleed {
        height: auto;
        aspect-ratio: 4/3;
    }

    .page-hero .psychic-fullbleed img {
        height: 100%;
        aspect-ratio: 4/3;
    }
}

/* ================================================================
   SECTION: AUTHENTICATION FORMS
   ================================================================ */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 22px;
}

.auth-form label {
    font-weight: 800;
    font-size: .88rem;
    margin-top: 10px;
}

.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=file],
.auth-form textarea {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink);
    background: #fff;
}

.auth-form input[readonly] {
    background: var(--soft);
    color: var(--muted);
    cursor: default;
}

.auth-form textarea {
    resize: vertical;
}

.auth-form .btn {
    font-size: 16px;
    font-weight: normal;
    margin-top: 18px;
}

.auth-checkbox {
    display: flex!important;
    align-items: flex-start;
    gap: 8px;
    font-weight: 700!important;
    font-size: .9rem!important;
}

.auth-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    flex-shrink: 0;
}

.password-field {
    position: relative;
    display: flex;
}

.password-field input {
    flex: 1;
    padding-right: 44px!important;
}

.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
}

.password-toggle .icon-hide {
    display: none;
}

.password-toggle.is-visible .icon-show {
    display: none;
}

.password-toggle.is-visible .icon-hide {
    display: block;
}

.password-strength {
    margin-top: 8px;
    display: none;
}

.password-strength.has-value {
    display: block;
}

.password-strength-bar {
    height: 5px;
    border-radius: 999px;
    background: #eee;
    overflow: hidden;
}

.password-strength-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: #ccc;
    transition: width .2s, background .2s;
}

.password-strength-label {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    margin-top: 4px;
}

.password-strength.weak .password-strength-bar i {
    width: 25%;
    background: #c0392b;
}

.password-strength.weak .password-strength-label {
    color: #c0392b;
}

.password-strength.fair .password-strength-bar i {
    width: 50%;
    background: #e08e0b;
}

.password-strength.fair .password-strength-label {
    color: #e08e0b;
}

.password-strength.good .password-strength-bar i {
    width: 75%;
    background: #2f9e44;
}

.password-strength.good .password-strength-label {
    color: #2f9e44;
}

.password-strength.strong .password-strength-bar i {
    width: 100%;
    background: #1a7431;
}

.password-strength.strong .password-strength-label {
    color: #1a7431;
}

.password-hint {
    color: var(--muted);
    font-size: .82rem;
    margin: 2px 0 0;
}

.field-error {
    display: none;
    color: #c0392b;
    font-size: .78rem;
    font-weight: 800;
    margin: 4px 0 0;
}

.field-error.is-visible {
    display: block;
}

.form-errors {
    background: #fff0f0;
    border: 1px solid #f3c8c8;
    color: #8a1f1f;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 18px;
}

.form-errors ul {
    margin: 0;
    padding-left: 18px;
}

.form-status {
    background: #f0fff4;
    border: 1px solid #bfe8c9;
    color: #1f6b34;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.form-status--dismissible {
    position: relative;
    padding-right: 44px;
}

.alert-dismiss {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.alert-dismiss:hover {
    opacity: 1;
}

.alert-warning {
    background: #fff8e6;
    border: 1px solid #f0dc9c;
    color: #7a5c00;
    border-radius: 12px;
    padding: 14px 18px;
}

/* ================================================================
   SECTION: DASHBOARD (SHELL, CARDS, MODALS & CONTROLS)
   ================================================================ */

.dashboard {
    min-height: 100vh;
    background: #fff;
}

.dashboard-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    font-weight: 800;
}

.dashboard-card {
    max-width: 620px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(28px, 6vw, 44px);
    box-shadow: var(--shadow);
}

.dashboard-card h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: 10px 0 14px;
}

.dashboard-card p {
    color: var(--muted);
}

.profile-avatar,
.dashboard-card .avatar-placeholder {
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 14px;
}

.profile-avatar {
    width: 96px;
    height: 96px;
}

.link-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    color: var(--pink);
    text-decoration: underline;
    cursor: pointer;
}

dialog.modal {
    border: none;
    border-radius: 18px;
    padding: 0;
    width: min(640px, 92vw);
    box-shadow: var(--shadow);
}

dialog.modal::backdrop {
    background: rgba(21, 24, 33, .55);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.modal-close {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.modal-body {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-body p:first-child {
    margin-top: 0;
}

.verification-banner {
    max-width: 620px;
    margin: 0 auto 24px;
    background: var(--soft);
    border-left: 4px solid var(--pink);
    border-radius: 16px;
    padding: 20px 24px;
}

.verification-banner strong {
    display: block;
    color: var(--pink);
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.verification-banner p {
    color: var(--muted);
    margin: 0 0 14px;
}

.verification-banner .verification-banner__hint {
    font-size: .85rem;
    margin: 12px 0 0;
}

.verification-banner.is-rejected {
    background: #fff0f0;
    border-left-color: #c0392b;
}

.verification-banner.is-rejected strong {
    color: #c0392b;
}

.avatar-upload-trigger {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
}

.avatar-upload-trigger.is-static {
    cursor: default;
}

.avatar-upload-trigger .avatar-placeholder {
    margin-bottom: 0;
}

.avatar-upload-trigger span {
    font-size: .82rem;
    font-weight: 800;
    color: var(--pink);
    text-decoration: underline;
}

.dashboard-card h2 {
    font-size: 1.3rem;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}

.category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.category-toggle {
    position: relative;
    display: inline-flex;
}

.category-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.category-toggle span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: #eef0f3;
    color: var(--ink);
    font-weight: 800;
    font-size: .82rem;
    line-height: 1.2;
    transition: background .15s, color .15s;
}

.category-toggle input:checked+span {
    background: var(--pink);
    color: #fff;
}

.category-toggle input:focus-visible+span {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

.btn-sm {
    padding: 9px 16px;
    font-size: .85rem;
}

.avatar-upload-trigger .profile-avatar {
    margin-bottom: 0;
}

.dashboard-card h3 {
    font-size: 1.05rem;
    letter-spacing: -.01em;
    margin: 22px 0 12px;
}

.dashboard-card h3:first-child {
    margin-top: 0;
}

.settings-list {
    margin: 0;
}

.settings-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row dt {
    font-weight: 800;
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.settings-row dd {
    margin: 0;
    font-size: 1.05rem;
}

.settings-hint {
    margin: 6px 0 0;
    font-size: .85rem;
    color: var(--muted);
}

.settings-hint--success {
    color: #1a7431;
}

.settings-hint--error {
    color: #c0392b;
}

.settings-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 280px;
}

.settings-form label {
    font-weight: 800;
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.settings-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
}

.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
}

.status-pill--approved {
    background: #d4f4dd;
    color: #1a7431;
}

.status-pill--pending,
.status-pill--in_review {
    background: #fdf1d0;
    color: #8a6100;
}

.status-pill--rejected {
    background: #fbdada;
    color: #b3261e;
}

.status-pill--none {
    background: #eee;
    color: #666;
}

/* ================================================================
   SECTION: PHOTO MANAGEMENT & GALLERY
   ================================================================ */

.manage-photos-current {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
}

.photo-thumb {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
}

/* .manage-photos-current's own margin-bottom used to provide this gap, but
that put the margin *inside* this overflow:hidden box, exposing a strip of
bare background below the actual photo instead of just spacing the next
element - moved here, scoped to this modal only, since .photo-thumb is
also used inside a flex `gap` layout (avatar-upload-trigger) and the
dashboard's own gallery grid, where an added margin would double up. */

#manage-photos-modal .photo-thumb {
    margin-bottom: 12px;
}

.photo-thumb img {
    display: block;
}

.gallery-grid__item .photo-thumb {
    width: 100%;
    border-radius: 10px;
}

.photo-thumb--avatar {
    border-radius: 50%;
}

.photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 32, 40, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: .78rem;
    padding: 6px;
}

.photo-overlay.is-rejected {
    background: rgba(179, 38, 30, .6);
}

.manage-photos-inline-form {
    margin-bottom: 16px;
}

.manage-photos-upload {
    margin-bottom: 8px;
}

.manage-photos-upload .btn {
    margin-top: 12px;
}

.manage-photos-upload label {
    display: block;
    font-weight: 800;
    font-size: .88rem;
    margin-bottom: 8px;
}

.manage-photos-upload input[type=file] {
    display: block;
    max-width: 100%;
}

.image-upload-field__shapes {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.image-upload-field__shapes label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: .85rem;
}

.image-upload-field__error {
    display: none;
    color: #c0392b;
    font-weight: 700;
    font-size: .85rem;
    margin: 8px 0 0;
}

.image-upload-field__error.is-visible {
    display: block;
}

.image-upload-field__preview {
    display: none;
    width: 360px;
    max-width: 100%;
    margin-top: 12px;
}

.image-upload-field__preview img {
    display: block;
    max-width: 100%;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.gallery-grid__item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 6px;
}

.gallery-grid__item form {
    margin: 0;
}

.gallery-grid .photo-thumb {
    width: 100%;
    height: 120px;
    border-radius: 10px;
}

.gallery-grid .photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-add-tile {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 120px;
    border: 2px dashed var(--line);
    border-radius: 10px;
    background: none;
    color: var(--pink);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-add-tile:hover {
    border-color: var(--pink);
    background: var(--soft);
}

/* ================================================================
   SECTION: APP SHELL (DASHBOARD SIDEBAR LAYOUT)
   ================================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-nav a,
.app-nav button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.app-nav a:hover,
.app-nav button:hover {
    background: var(--soft);
}

.app-nav-icon {
    flex-shrink: 0;
}

.app-nav a.active {
    background: var(--pink);
    color: #fff;
}

.app-nav-badge {
    margin-left: auto;
    background: var(--pink);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 7px;
}

.app-nav a.active .app-nav-badge {
    background: #fff;
    color: var(--pink);
}

.app-sidebar-logout {
    margin-top: 8px;
}

.app-menu-btn {
    display: none;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    color: var(--ink);
}

.app-nav-panel {
    display: contents;
}

.app-nav-overlay {
    display: none;
}

.app-main {
    flex: 1;
    min-width: 0;
}

.app-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

.app-footer a {
    color: var(--muted);
}

@media (max-width: 800px) {
    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        width: auto;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--line);
        position: relative;
        z-index: 41;
    }

    .app-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-nav-panel {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 0;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 0;
        box-shadow: var(--shadow);
        padding: 12px 18px;
        flex-direction: column;
        gap: 12px;
        z-index: 40;
    }

    .app-nav-panel.open {
        display: flex;
    }

    .app-nav-overlay.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(21, 24, 33, .55);
        z-index: 39;
    }

    .app-nav {
        flex-direction: column;
        gap: 4px;
    }
}

/* ================================================================
   SECTION: NOTIFICATIONS
   ================================================================ */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.notification-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 18px;
    position: relative;
}

.notification-item.is-unread {
    background: var(--soft);
    border-color: var(--pink);
}

.notification-sender {
    font-weight: 800;
    font-size: .82rem;
    color: var(--pink);
}

.notification-item p {
    margin: 4px 0;
}

.notification-time {
    color: var(--muted);
    font-size: .78rem;
}

/* ================================================================
   SECTION: PAGINATION
   ================================================================ */

.pagination {
    display: flex;
    gap: .3rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.pagination .page-item {
    display: block;
}

.pagination .page-link {
    display: block;
    padding: .4rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
}

.pagination .page-item.active .page-link {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);
}

.pagination .page-item.disabled .page-link {
    color: #aaa;
}

.pagination-wrap {
    margin-top: 20px;
}

/* Self-serve "Go Online"/"Go Offline" for voice and video calls, shown side
   by side in the dashboard header bar - see resources/views/dashboard.blade.php,
   public/assets/js/phone-status.js and public/assets/js/video-status.js.
   Grey while offline, green while online - same color coding (and
   icon-over-label layout) as ChatRecruitWeb's (the old site) own header
   status icons. */
.dashboard-bar-status {
    /* Centered on the bar itself, not just "next" flex item - absolute
       positioning keeps it dead-center regardless of how long the "Hi, X"
       greeting text is. */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Each toggle's own positioning context, so its error tooltip
   (.phone-status__error/.video-status__error, both position:absolute;
   top:100%;right:0) floats under *that* toggle rather than under
   whichever one happens to render first in .dashboard-bar-status. */
.status-slot {
    position: relative;
}

@media (max-width: 800px) {
    /* Dead-centering above overlaps the "Hi, X" greeting once the bar is
       too narrow to fit both - pin it to the right edge instead, matching
       where .dashboard-bar's flex layout would already put it as the last
       item if it weren't absolutely positioned. */
    .dashboard-bar-status {
        left: auto;
        right: 0;
        transform: translateY(-50%);
    }
}

@media (max-width: 480px) {
    /* Even right-pinned, the phone and video toggles side by side plus the
       "Hi, X" greeting still don't fit a phone-width screen and end up
       overlapping it (seen on iOS Safari). Drop out of absolute positioning
       entirely and let it flow below the greeting instead, wrapping the two
       toggles onto their own lines too if they still don't fit one row. */
    .dashboard-bar {
        flex-wrap: wrap;
    }

    .dashboard-bar-status {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 14px;
        flex-wrap: wrap;
    }
}

.phone-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.phone-status-header .phone-icon {
    color: #8a8f9c;
}

.phone-status-header.is-online .phone-icon {
    color: #1a7431;
}

.phone-status-header.is-busy .phone-icon {
    color: #c0392b;
}

.phone-status-header__label {
    font-weight: 800;
    color: #8a8f9c;
}

.phone-status-header.is-online .phone-status-header__label {
    color: #1a7431;
}

.phone-status-header.is-busy .phone-status-header__label {
    color: #c0392b;
}

.phone-status__error {
    /* Floats below the header button instead of pushing the rest of the
       bar down - this only ever shows on a genuine API failure. */
    position: absolute;
    top: 100%;
    right: 0;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #f3c8c8;
    border-radius: 8px;
    padding: 6px 10px;
    z-index: 5;
    display: none;
    color: #c0392b;
    font-weight: 700;
    font-size: .85rem;
    margin: 8px 0 0;
}

.phone-status__error.is-visible {
    display: block;
}

/* Same widget, for the video-call toggle - see video-icon.blade.php and
   video-status.js. Identical rules to .phone-status-header/__error above,
   duplicated rather than shared since that's how the phone version is
   already structured here (no generic .status-header base class). */
.video-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.video-status-header .video-icon {
    color: #8a8f9c;
}

.video-status-header--cta {
    text-decoration: none;
    cursor: pointer;
}

.video-status-header--cta .video-status-header__label {
    color: var(--pink);
    text-decoration: underline;
}

.video-status-header.is-online .video-icon {
    color: #1a7431;
}

.video-status-header.is-busy .video-icon {
    color: #c0392b;
}

.video-status-header__label {
    font-weight: 800;
    color: #8a8f9c;
}

.video-status-header.is-online .video-status-header__label {
    color: #1a7431;
}

.video-status-header.is-busy .video-status-header__label {
    color: #c0392b;
}

.video-status__error {
    position: absolute;
    top: 100%;
    right: 0;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #f3c8c8;
    border-radius: 8px;
    padding: 6px 10px;
    z-index: 5;
    display: none;
    color: #c0392b;
    font-weight: 700;
    font-size: .85rem;
    margin: 8px 0 0;
}

.video-status__error.is-visible {
    display: block;
}

.video-status__note {
    margin: 16px 0 0;
    font-size: .9rem;
    font-weight: 700;
}
.video-status__note[hidden] {
    display: none;
}
.video-mobile-warning {
    display: none;
    margin: 16px 0 0;
    font-size: .95rem;
    font-weight: 700;
    color: #b42318;
}
@media (pointer: coarse) and (hover: none) {
    .video-mobile-warning {
        display: block;
    }
}
[data-video-session-timer].is-warning {
    color: #b42318;
}

.video-modal-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0 0;
}
.video-modal-devices[hidden] {
    display: none;
}
.video-devices-note {
    width: 100%;
    margin: 0;
}
.video-devices-note[hidden] {
    display: none;
}
.video-modal-device-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}
.video-modal-device-field span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
.video-modal-device-field select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    background: #fff;
}

/* Incoming-ring banner and in-call overlay - see public/assets/js/video-call.js.
   Both start [hidden] server-side and are only ever toggled by that script. */
.video-ring-banner {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 2px solid var(--pink-bright);
    border-radius: 14px;
    padding: 18px 26px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22), 0 0 0 6px rgba(255, 23, 120, .12);
    animation: video-ring-pulse 1.1s ease-in-out infinite;
}
.video-ring-banner[hidden] {
    display: none;
}

/* Two alternate panels share this same dialog (an incoming ring, and the
   missed-call-limit notice - see video-call.js) - each needs the row
   layout .video-ring-banner itself used to provide directly, back when
   .video-ring-banner__text/__actions were its only two children. */
[data-video-ring-incoming],
[data-video-ring-missed-notice] {
    display: flex;
    align-items: center;
    gap: 20px;
}
[data-video-ring-incoming][hidden],
[data-video-ring-missed-notice][hidden] {
    display: none;
}

@keyframes video-ring-pulse {
    0%, 100% { box-shadow: 0 16px 40px rgba(0, 0, 0, .22), 0 0 0 6px rgba(255, 23, 120, .12); }
    50% { box-shadow: 0 16px 40px rgba(0, 0, 0, .22), 0 0 0 14px rgba(255, 23, 120, .22); }
}

.video-ring-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.video-ring-banner__title {
    margin: 0;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--pink);
}

.video-ring-banner__caller {
    margin: 0;
    color: var(--muted);
}

.video-ring-banner__actions {
    display: flex;
    gap: 8px;
}

.video-call-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
}
.video-call-overlay[hidden] {
    display: none;
}

.video-call-stage {
    position: relative;
    flex: 1;
    min-height: 0;
}

.video-call-remote,
.video-call-remote video {
    width: 100%;
    height: 100%;
    background: #111;
    object-fit: contain;
}

.video-call-local {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 27%;
    max-width: 220px;
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    background: #1a1a1a;
}

.video-call-local video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-call-hud {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    pointer-events: none;
}

.video-call-status {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.video-call-controls {
    display: flex;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .35);
}

/* The dev/staging "Bypassing IVR call" notice reuses this same element
   (see phone-status.js) but nothing actually failed, so it gets a neutral
   look instead of the red error styling above. */
.phone-status__error.is-info {
    background: #fff;
    border-color: var(--line);
    color: var(--muted);
}

.cookie-consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    max-width: 720px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* Without this, the [hidden] attribute never actually hides the banner -
   an author stylesheet's `display` always wins over the UA stylesheet's
   `[hidden] { display: none }`, regardless of selector order/specificity,
   so cookie-consent.js's `banner.hidden = true` on Accept/Reject silently
   did nothing and the banner stayed on screen. */
.cookie-consent-banner[hidden] {
    display: none;
}

.cookie-consent-banner p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    flex: 1 1 320px;
}

.cookie-consent-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* test initial commit */

/* ================================================================
   SECTION: ACCEPT UPDATED TERMS MODAL (components/accept-terms-modal)
   ================================================================ */

/* The shared .modal-body scrolls as a whole (max-height: 60vh), which
   pushed the Accept button out of view below long terms. Here the body
   instead fills the viewport as a column: the intro text and both buttons
   keep their size and always stay visible, and only the terms box
   (flex: 1) shrinks and scrolls. 170px leaves room for the header and the
   dialog's own margin. */
/* Only focused so the modal opens at the top - see accept-terms-modal. */
.terms-update-title:focus {
    outline: none;
}

.modal-body.terms-update-body {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    overflow: hidden;
}

.terms-update-body > * {
    flex-shrink: 0;
}

.terms-update-body > .terms-update-content {
    flex: 1 1 auto;
    min-height: 120px;
}

.terms-update-content {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0 18px;
    overflow-y: auto;
    background: #fff;
    font-size: .92rem;
    line-height: 1.55;
}

/* ================================================================
   SECTION: DOCUMENT SIGNING (documents/show.blade.php)
   ================================================================ */

.document-content {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    line-height: 1.6;
}

.signature-label {
    font-weight: 800;
    font-size: .88rem;
    margin-top: 10px;
}

.signature-tabs {
    display: flex;
    gap: 8px;
}

.signature-tab {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 16px;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}

.signature-tab.is-active {
    border-color: var(--pink);
    background: var(--soft);
    color: var(--pink);
    font-weight: 700;
}

.signature-pad-wrap {
    position: relative;
}

.signature-pad {
    display: block;
    width: 100%;
    height: 200px;
    border: 1px dashed var(--muted);
    border-radius: 10px;
    background: #fff;
    touch-action: none;
}

.signature-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: var(--soft);
    color: var(--pink);
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.checkbox-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400 !important;
}

.checkbox-row input {
    margin-top: 4px;
    flex-shrink: 0;
}

/* ================================================================
   SECTION: FAQs (faqs/index.blade.php)
   ================================================================ */

.faq-card {
    max-width: 860px;
}

.faq-search {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    margin: 6px 0 14px;
}

.faq-no-results {
    color: var(--muted);
}

.faq-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.faq-toc__link {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .85rem;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
}

.faq-toc__link:hover {
    border-color: var(--pink);
    color: var(--pink);
}

.faq-section {
    margin-top: 28px;
    scroll-margin-top: 16px;
}

.faq-section h2 {
    margin-bottom: 10px;
}

.faq-intro {
    color: var(--muted);
    margin-bottom: 10px;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 8px;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 44px 14px 16px;
    font-weight: 700;
    position: relative;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--pink);
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-answer {
    padding: 0 16px 14px;
    line-height: 1.6;
}

.faq-answer p,
.faq-intro p {
    margin: 0 0 10px;
}

.faq-answer ul,
.faq-answer ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.faq-answer blockquote,
.faq-intro blockquote {
    margin: 10px 0;
    padding: 12px 16px;
    background: var(--soft);
    border-left: 4px solid var(--pink);
    border-radius: 8px;
    color: var(--ink);
}

/* Host dashboard announcement (dashboard.blade.php) - reuses .coming-box,
   sized to the dashboard column with a normal-weight, editor-formatted body. */
.dashboard-announcement {
    max-width: 620px;
    margin: 0 auto 24px;
}

.dashboard-announcement__body {
    font-weight: 400;
    color: var(--ink);
}

.dashboard-announcement__body p {
    margin: 0 0 8px;
}

/* .coming-box turns every <strong> into a pink heading line - only the
   title should look like that, bold text in the message stays inline. */
.dashboard-announcement__body strong {
    display: inline;
    color: inherit;
    margin: 0;
}

.dashboard-announcement__body p:last-child {
    margin-bottom: 0;
}