/* site palette */
html:root {
    --bg: #F6EEE2;
    --surface: #FFFFFF;
    --surface-alt: #DDF5F6;
    --text: #2C2419;
    --text-muted: #72695A;
    --border: #E4DFD8;
    --primary: #2DA5A6;
    --primary-hover: #25898A;
    --on-primary: #111111;
    --primary-text: #207576;
    --accent: #DE1A7B;
    --on-accent: #FFFFFF;
    --accent-text: #CC1871;
    --dark-band: #0D3131;
    --on-dark: #FFFFFF;
    --on-dark-muted: #C3BEB6;
    --brand-btn-bg: #111111;
    --brand-btn-text: #2DA5A6;
    --section-alt-bg: #DDF5F6;
    --dark-band-bg: #0D3131;
    --brand-band-bg: #2DA5A6;
    --hero-bg: #0D3131;
}

/* /site palette */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Tenor Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-muted {
    color: var(--text-muted) !important;
}

.umr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--accent, #DE1A7B);
    color: var(--on-accent, #FFFFFF);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 28px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.umr-btn:hover {
    background-color: var(--primary-hover, #25898A);
    color: var(--on-primary, #111111);
}

.umr-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    color: var(--primary-text, #207576);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 11px 26px;
    border: 1px solid var(--primary, #2DA5A6);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.umr-btn-alt:hover {
    background-color: var(--primary, #2DA5A6);
    color: var(--on-primary, #111111);
}

.umr-card {
    background-color: var(--surface, #FFFFFF);
    color: var(--text, #2C2419);
    border: 1px solid var(--border, #E4DFD8);
    border-bottom: 3px solid var(--primary, #2DA5A6);
    border-radius: 0px;
    padding: 1.5rem;
    transition: transform 0.3s ease-out, border-color 0.3s ease-out;
}

.umr-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #2DA5A6);
}

.umr-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    border-radius: 0px;
    border: 1px solid var(--border, #E4DFD8);
    background-color: var(--surface-alt, #DDF5F6);
}

.umr-media img,
.umr-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.umr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    color: var(--accent, #DE1A7B);
    margin-bottom: 0.75rem;
}

.umr-eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    flex-shrink: 0;
}

.umr-title {
    font-family: 'Tenor Sans', sans-serif;
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.25;
    font-weight: 400;
    color: var(--text, #2C2419);
    margin: 0 0 1.5rem 0;
}

.umr-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 9999px;
    background-color: var(--surface-alt, #DDF5F6);
    color: var(--primary-text, #207576);
}

.umr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background-color: var(--surface-alt, #DDF5F6);
    color: var(--primary-text, #207576);
    font-size: 24px;
    flex-shrink: 0;
}

.umr-section {
    padding: 4rem 1rem;
    background-color: var(--bg, #F6EEE2);
}

@media (min-width: 768px) {
    .umr-section {
        padding: 6rem 1.5rem;
    }
}

.umr-section-alt {
    padding: 4rem 1rem;
    background-color: var(--section-alt-bg, var(--surface-alt, #DDF5F6));
}

@media (min-width: 768px) {
    .umr-section-alt {
        padding: 6rem 1.5rem;
    }
}

.umr-section-dark {
    padding: 4rem 1rem;
    background-color: var(--dark-band-bg, var(--dark-band, #0D3131));
    color: var(--on-dark, #FFFFFF);
}

@media (min-width: 768px) {
    .umr-section-dark {
        padding: 6rem 1.5rem;
    }
}

.umr-section-brand {
    padding: 4rem 1rem;
    background-color: var(--brand-band-bg, var(--primary, #2DA5A6));
    color: var(--on-primary, #111111);
}

@media (min-width: 768px) {
    .umr-section-brand {
        padding: 6rem 1.5rem;
    }
}

.umr-section-brand .umr-btn {
    background-color: var(--brand-btn-bg, #111111);
    color: var(--brand-btn-text, #2DA5A6);
}

.umr-section-brand .umr-btn:hover {
    background-color: var(--accent, #DE1A7B);
    color: var(--on-accent, #FFFFFF);
}

.umr-section-brand .umr-btn-alt {
    border-color: var(--on-primary, #111111);
    color: var(--on-primary, #111111);
}

.umr-section-brand .umr-btn-alt:hover {
    background-color: var(--on-primary, #111111);
    color: var(--brand-band-bg, #2DA5A6);
}

.umr-section-dark,
.umr-on-dark {
    color: var(--on-dark, #FFFFFF);
}

.umr-section-dark h1,
.umr-section-dark h2,
.umr-section-dark h3,
.umr-section-dark h4,
.umr-section-dark .umr-title,
.umr-on-dark h1,
.umr-on-dark h2,
.umr-on-dark h3,
.umr-on-dark h4,
.umr-on-dark .umr-title {
    color: var(--on-dark, #FFFFFF);
}

.umr-section-dark p,
.umr-on-dark p {
    color: var(--on-dark-muted, #C3BEB6);
}

.umr-section-dark .umr-eyebrow,
.umr-on-dark .umr-eyebrow {
    color: var(--primary, #2DA5A6);
}

.umr-section-dark .umr-btn-alt,
.umr-on-dark .umr-btn-alt {
    border-color: var(--on-dark, #FFFFFF);
    color: var(--on-dark, #FFFFFF);
}

.umr-section-dark .umr-btn-alt:hover,
.umr-on-dark .umr-btn-alt:hover {
    background-color: var(--on-dark, #FFFFFF);
    color: var(--dark-band, #0D3131);
}

.umr-section-dark .umr-card,
.umr-on-dark .umr-card {
    background-color: var(--surface, #FFFFFF);
    color: var(--text, #2C2419);
    border-color: var(--border, #E4DFD8);
}

.umr-section-dark .umr-card h2,
.umr-section-dark .umr-card h3,
.umr-section-dark .umr-card h4,
.umr-section-dark .umr-card .umr-title,
.umr-on-dark .umr-card h2,
.umr-on-dark .umr-card h3,
.umr-on-dark .umr-card h4,
.umr-on-dark .umr-card .umr-title {
    color: var(--primary-text, #207576);
}

.umr-section-dark .umr-card p,
.umr-on-dark .umr-card p {
    color: var(--text-muted, #72695A);
}

/* ===== header ===== */
.sb-header {
    background-color: var(--surface);
    border-color: var(--border);
}

.sb-header .sb-topbar {
    background-color: var(--primary);
    color: var(--on-primary);
}

.sb-header .sb-nav-link {
    position: relative;
    padding: 4px 0;
}

.sb-header .sb-nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.2s ease-in-out;
}

.sb-header .sb-nav-link:hover:after {
    width: 100%;
}

.sb-header .js-mobile-menu {
    background-color: var(--surface);
}

/* ===== the_next_supporter_should_inherit_context_not_just_a_ticket_number ===== */
.sb-hero-block {
    position: relative;
    background-color: var(--dark-band, #0D3131);
}

.sb-hero-block video {
    filter: contrast(1.05) brightness(0.7);
}

@media (max-width: 767px) {
    .sb-hero-block h1 {
        hyphens: auto;
        overflow-wrap: anywhere;
    }
}

/* ===== choose_your_pain_point ===== */
.pain-points-section {
    position: relative;
}

.pain-points-section .pain-points-watermark {
    user-select: none;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.1em;
}

.pain-points-section .js-pain-tab.active {
    background-color: #111111;
    color: #2DA5A6;
}

.pain-points-section .js-pain-tab:not(.active) {
    background-color: rgba(255, 255, 255, 0.3);
    color: #111111;
}

.pain-points-section .js-pain-tab:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
    .pain-points-section .js-pain-tabs-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .pain-points-section .js-pain-tab {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ===== featured_case_the_first_technician_changed_the_setting_the_second_technician_changed_it_back ===== */
#featured-scenario-case .js-brief-toggle.active {
    background-color: var(--primary, #2DA5A6);
    color: var(--on-primary, #111111);
    border-color: var(--primary, #2DA5A6);
}

#featured-scenario-case .js-brief-toggle:not(.active) {
    background-color: var(--surface, #FFFFFF);
    color: var(--text-muted, #72695A);
    border-color: var(--border, #E4DFD8);
}

@media (max-width: 767px) {
    #featured-scenario-case .js-view-structured .p-4 {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ===== recent_session_case_reviews ===== */
.session-case-grid .session-case-card {
    transition: transform 0.25s ease, border-color 0.25s ease;
    border-radius: 0;
}

.session-case-grid .session-case-card:hover {
    transform: translateY(-4px);
    border-color: #2DA5A6;
}

.session-case-grid .umr-media {
    transition: transform 0.35s ease;
}

.session-case-grid .session-case-card:hover .umr-media {
    transform: scale(1.04);
}

@media (max-width: 767px) {
    .session-case-grid .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== tools_and_platforms_we_work_with ===== */
.sb-tools-section .sb-watermark {
    position: absolute;
    top: 5%;
    right: -2%;
    font-size: clamp(80px, 12vw, 160px);
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    user-select: none;
    pointer-events: none;
    letter-spacing: 6px;
    z-index: 1;
}

.sb-tools-section .sb-tab-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--on-dark-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    border-radius: 2px;
}

.sb-tools-section .sb-tab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--on-dark);
}

.sb-tools-section .sb-tab-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.sb-tools-section .sb-tech-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 3px solid var(--primary);
    min-height: 250px;
    transition: transform 0.3s ease-out, border-color 0.3s ease-out;
}

.sb-tools-section .sb-tech-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
}

.sb-tools-section .sb-icon-wrapper {
    background: var(--surface-alt);
    border-radius: 50%;
}

@media (max-width: 767px) {
    .sb-tools-section .js-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== support_and_response_times ===== */
#session-support-response {
    background-color: var(--bg, #F6EEE2);
}

#session-support-response .umr-card {
    transition: all 0.30s ease-out;
}

#session-support-response .umr-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #2DA5A6);
}

#session-support-response .js-sla-row {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    #session-support-response .js-sla-row {
        width: 100%;
    }
}

/* ===== book_a_consultation ===== */
.sb-consultation-section .sb-form-input::placeholder,
.sb-consultation-section .sb-form-textarea::placeholder {
    color: #72695A;
    opacity: 0.8
}

.sb-consultation-section .sb-form-input:focus,
.sb-consultation-section .sb-form-textarea:focus {
    border-color: #2DA5A6;
    outline: none
}

.sb-consultation-section .js-slot-label.is-selected {
    border-color: #2DA5A6;
    background-color: #DDF5F6
}

.sb-consultation-section .js-topic-btn.is-active {
    border-color: #2DA5A6;
    background-color: #DDF5F6
}

@media(max-width:767px) {
    .sb-consultation-section .js-slot-grid {
        grid-template-columns: 1fr
    }
}

/* ===== press_mentions ===== */
.press-mentions-section .press-card {
    border-bottom: 3px solid var(--primary, #2DA5A6);
    transition: transform 0.3s ease-out, border-color 0.3s ease-out;
}

.press-mentions-section .press-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 767px) {
    .press-mentions-section .press-card {
        width: 100%;
    }
}

/* ===== footer ===== */
.sbc-footer input::placeholder {
    color: #72695A;
    opacity: 1;
}

.sbc-footer input:-ms-input-placeholder {
    color: #72695A;
}

.sbc-footer input::-ms-input-placeholder {
    color: #72695A;
}

.sbc-footer .sbc-diagonal-bar {
    position: relative;
    border-top: 3px solid #DE1A7B;
}

@media (max-width: 767px) {
    .sbc-footer .sbc-diagonal-left {
        text-align: left;
    }
}

.sb-header {
    background-color: var(--surface);
    border-color: var(--border);
}

.sb-header .sb-topbar {
    background-color: var(--primary);
    color: var(--on-primary);
}

.sb-header .sb-nav-link {
    position: relative;
    padding: 4px 0;
}

.sb-header .sb-nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.2s ease-in-out;
}

.sb-header .sb-nav-link:hover:after {
    width: 100%;
}

.sb-header .js-mobile-menu {
    background-color: var(--surface);
}

.sb-category-catalog .sb-divider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
}

.sb-category-catalog .sb-grid-card {
    text-decoration: none;
    min-width: 0;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .sb-category-catalog .sb-divider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sb-category-catalog .sb-divider-grid {
        grid-template-columns: 1fr;
    }

    .sb-hero-block h1,
    .sb-category-catalog h1,
    .sb-category-catalog h2 {
        hyphens: auto;
        overflow-wrap: anywhere;
    }
}

.sbc-footer input::placeholder {
    color: #72695A;
    opacity: 1;
}

.sbc-footer input:-ms-input-placeholder {
    color: #72695A;
}

.sbc-footer input::-ms-input-placeholder {
    color: #72695A;
}

.sbc-footer .sbc-diagonal-bar {
    position: relative;
    border-top: 3px solid #DE1A7B;
}

@media (max-width: 767px) {
    .sbc-footer .sbc-diagonal-left {
        text-align: left;
    }
}


/* ===== PAGE: about ===== */
.sb-mission-section .sb-about-photo-wrapper { aspect-ratio: 1 / 1; } .sb-audience-card { transition: transform 0.3s ease-out, border-color 0.3s ease-out; } .sb-audience-card:hover { transform: translateY(-4px); } @media (max-width: 767px) { .sb-mission-section .flex-col { flex-direction: column; } .sb-audience-section .grid { grid-template-columns: 1fr; } }

/* ===== PAGE: contact ===== */
.contact-main-form input::placeholder, .contact-main-form textarea::placeholder { color: var(--text-muted); opacity: 0.7; } .contact-layout-grid { overflow-wrap: anywhere; }

/* ===== PAGE: privacy ===== */
.privacy-content-block p {
  overflow-wrap: anywhere;
}

.privacy-content-block strong {
  color: var(--text);
  font-weight: 600;
}

/* ===== PAGE: terms ===== */
.terms-content-section {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Tenor Sans', sans-serif;
}

.terms-content-section article {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.terms-content-section article:hover {
  border-color: var(--primary);
}

.terms-content-section .js-terms-link.active {
  border-left-color: var(--accent) !important;
  background-color: var(--surface-alt) !important;
  color: var(--accent-text) !important;
  font-weight: 500;
}

@media (max-width: 767px) {
  .terms-content-section .split-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGE: disclaimer ===== */
.legal-disclaimer-block { word-break: normal; overflow-wrap: anywhere; }
.legal-disclaimer-block h2, .legal-disclaimer-block h3 { hyphens: auto; }

.comment-avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
}

.comment-item {
    box-shadow: 0 4px 12px rgba(13, 49, 49, 0.04);
}

.comment-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.reply-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    display: block;
}

.reply-item {
    box-shadow: none;
}

.reply-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}


/* ===== PAGE TEMPLATE: diagnostics-and-recording, handoff-and-results, session-case-reviews ===== */
.sb-header {
    background-color: var(--surface);
    border-color: var(--border);
}

.sb-header .sb-topbar {
    background-color: var(--primary);
    color: var(--on-primary);
}

.sb-header .sb-nav-link {
    position: relative;
    padding: 4px 0;
}

.sb-header .sb-nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.2s ease-in-out;
}

.sb-header .sb-nav-link:hover:after {
    width: 100%;
}

.sb-header .js-mobile-menu {
    background-color: var(--surface);
}

.article-detail-view .detail-row {
    position: relative;
}

.article-detail-view .article-prose h3 {
    color: #207576;
    font-size: 16px;
    line-height: 1.3;
}

.article-detail-view .article-prose p {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.sbc-footer input::placeholder {
    color: #72695A;
    opacity: 1;
}

.sbc-footer input:-ms-input-placeholder {
    color: #72695A;
}

.sbc-footer input::-ms-input-placeholder {
    color: #72695A;
}

.sbc-footer .sbc-diagonal-bar {
    position: relative;
    border-top: 3px solid #DE1A7B;
}

@media (max-width: 767px) {
    .sbc-footer .sbc-diagonal-left {
        text-align: left;
    }

    .article-detail-view .detail-row h2 {
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* mobile-text-guard */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
    overflow-wrap: anywhere;
  }
  a, button, .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  img, video, iframe {
    max-width: 100%;
  }
}