/* Reference-led rebuild — 2026-07-25 */
:root {
    --rb-ink: #132f3a;
    --rb-copy: #425b64;
    --rb-muted: #6c7f85;
    --rb-line: #dce6e3;
    --rb-surface: #ffffff;
    --rb-canvas: #f4f7f6;
    --rb-soft: #eaf4f1;
    --rb-brand: #0f8078;
    --rb-brand-dark: #0b5f5a;
    --rb-radius: 12px;
    --rb-shadow: 0 18px 48px rgba(19, 47, 58, .08);
}

body {
    color: var(--rb-ink);
    background: var(--rb-canvas);
}

.site-header {
    border-bottom: 1px solid var(--rb-line);
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: none !important;
}

.site-header-inner {
    min-height: 74px;
    max-width: 1240px;
}

.site-brand-mark,
.app-brand-mark,
.auth-brand-mark {
    border-radius: 10px !important;
}

.site-nav > a {
    color: #50646b;
    font-size: .76rem;
    font-weight: 650;
}

.site-nav > a:hover {
    color: var(--rb-brand);
}

.site-book-button,
.site-button {
    border-color: var(--rb-brand) !important;
    background: var(--rb-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.site-book-button:hover,
.site-button:hover {
    background: var(--rb-brand-dark) !important;
}

.site-secondary-button {
    color: var(--rb-ink) !important;
    box-shadow: none !important;
}

.site-lang-switcher,
.app-lang-switcher,
.auth-lang-switcher {
    box-shadow: none !important;
}

/* Product marketing */
.landing-shell,
.landing-shell .site-section {
    background: #fff;
}

.landing-shell .site-section:nth-of-type(even) {
    background: var(--rb-canvas);
}

.landing-hero {
    padding: 54px 0 34px !important;
    background: #fff !important;
}

.landing-hero-grid {
    min-height: 0 !important;
    grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr) !important;
    gap: 26px 38px !important;
    align-items: center !important;
}

.landing-hero-panel {
    padding: 12px 0 !important;
}

.landing-hero .site-hero-title {
    max-width: 650px !important;
    margin: 16px 0 18px !important;
    color: var(--rb-ink) !important;
    font-size: clamp(2.65rem, 4.2vw, 4.15rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.055em !important;
}

html[dir="rtl"] .landing-hero .site-hero-title {
    font-size: clamp(2.45rem, 3.8vw, 3.8rem) !important;
    line-height: 1.15 !important;
}

.landing-hero .site-hero-body {
    max-width: 610px;
    color: var(--rb-copy);
    font-size: 1.02rem;
    line-height: 1.75;
}

.landing-hero-media {
    height: 500px !important;
    border: 1px solid var(--rb-line);
    border-radius: 16px !important;
    box-shadow: var(--rb-shadow) !important;
}

.landing-hero-media img {
    object-fit: cover !important;
    object-position: left top !important;
}

.landing-hero-media::after {
    inset-inline-start: 18px !important;
    bottom: 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--rb-ink) !important;
    backdrop-filter: none !important;
}

.landing-proof-grid {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 4px;
    border: 1px solid var(--rb-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.landing-proof-card {
    min-height: 112px !important;
    padding: 18px 20px !important;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-content: center;
    gap: 4px 12px;
    border: 0 !important;
    border-inline-end: 1px solid var(--rb-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--rb-ink) !important;
}

.landing-proof-card:last-child {
    border-inline-end: 0 !important;
}

.landing-proof-card .site-mini-icon {
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--rb-brand);
}

.landing-proof-card strong {
    font-size: .82rem !important;
}

.landing-proof-card span {
    color: var(--rb-muted) !important;
    font-size: .67rem !important;
    line-height: 1.5;
    opacity: 1 !important;
}

.site-section {
    padding: 76px 0 !important;
}

.landing-section-intro {
    grid-template-columns: minmax(0, .7fr) minmax(340px, .5fr) !important;
    gap: 48px !important;
    margin-bottom: 34px !important;
}

.site-section-title {
    color: var(--rb-ink) !important;
    font-size: clamp(1.85rem, 3vw, 3rem) !important;
    letter-spacing: -.04em;
}

.site-section-subtitle,
.site-card-copy {
    color: var(--rb-copy) !important;
}

.landing-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.landing-card,
.landing-feature-card,
.landing-step-card {
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.landing-card {
    min-height: 190px;
    padding: 24px !important;
}

.landing-card:hover,
.landing-feature-card:hover {
    border-color: #afc9c3 !important;
    transform: translateY(-2px);
}

.landing-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius);
    overflow: hidden;
}

.landing-step-card {
    min-height: 210px !important;
    padding: 68px 28px 28px !important;
    border: 0 !important;
    border-inline-end: 1px solid var(--rb-line) !important;
    border-radius: 0 !important;
}

.landing-step-card:last-child {
    border-inline-end: 0 !important;
}

.landing-step-number {
    top: 24px !important;
    inset-inline-start: 28px !important;
    color: var(--rb-brand) !important;
    font-size: 1.25rem !important;
}

.landing-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.landing-feature-card {
    min-height: 180px !important;
    padding: 22px !important;
}

.landing-mockup-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important;
    gap: 16px !important;
}

.landing-browser-card,
.landing-phone-card {
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius) !important;
    background: #dfe9e6 !important;
}

.landing-pricing-card,
.landing-faq-card {
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius) !important;
    box-shadow: none !important;
}

.landing-pricing-card.is-featured,
.landing-final-card {
    background: var(--rb-ink) !important;
}

.landing-final-card {
    border-radius: 16px !important;
}

/* Public clinic website */
.site-shell:not(.landing-shell) .site-hero {
    padding: 34px 0 50px !important;
    background: var(--rb-canvas) !important;
}

.site-shell:not(.landing-shell) .site-hero-grid {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr) !important;
    gap: 16px !important;
}

.site-shell:not(.landing-shell) .site-hero-panel {
    min-height: 480px !important;
    padding: 48px !important;
    align-content: end !important;
    border-radius: 16px !important;
    background-color: #315b5b !important;
    background-image: url("images/clinic-hero-v2.webp?v=20260725.6") !important;
    background-blend-mode: multiply;
    box-shadow: none !important;
}

.site-shell:not(.landing-shell) .site-hero-title {
    max-width: 680px !important;
    font-size: clamp(2.7rem, 4.4vw, 4.25rem) !important;
}

.site-shell:not(.landing-shell) .site-hero-panel .site-secondary-button {
    border-color: rgba(255, 255, 255, .44) !important;
    background: rgba(11, 47, 58, .46) !important;
    color: #fff !important;
}

.site-trust-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.site-trust-grid .site-stat {
    position: relative;
    min-height: 112px !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    gap: 6px !important;
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius) !important;
    background: #fff !important;
}

.site-trust-grid .site-stat::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

.site-trust-grid .site-stat strong {
    display: block;
    color: var(--rb-ink);
    font-size: .88rem !important;
}

.site-trust-grid .site-stat span {
    display: block;
    margin: 0 !important;
    color: var(--rb-copy) !important;
    font-size: .72rem !important;
    line-height: 1.55;
}

/* Taste pass: editorial feature lists instead of repeated equal-card grids. */
.landing-card-grid,
.landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 48px !important;
    border-top: 1px solid var(--rb-line);
}

.landing-card-grid .landing-card,
.landing-feature-grid .landing-feature-card {
    min-height: 0 !important;
    padding: 28px 0 32px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rb-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.landing-card-grid .site-icon,
.landing-feature-grid .site-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 26px;
}

.landing-mockup-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.landing-product-proof {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--rb-line);
    border-radius: 18px;
    background: #fff;
}

.landing-product-proof img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: left top;
    border-bottom: 1px solid var(--rb-line);
}

.landing-product-proof-secondary img {
    aspect-ratio: 4 / 3;
}

.landing-product-proof figcaption {
    display: grid;
    gap: 7px;
    padding: 22px 24px 26px;
}

.landing-product-proof figcaption strong {
    color: var(--rb-ink);
    font-size: 1.02rem;
}

.landing-product-proof figcaption span {
    color: var(--rb-copy);
    font-size: .84rem;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .landing-card-grid,
    .landing-feature-grid,
    .landing-mockup-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Patient-first access pattern based on real appointment and provider flows. */
.site-access-panel {
    align-self: stretch;
    padding: 28px;
    border: 1px solid var(--rb-line);
    border-radius: 16px;
    background: #fff;
}

.site-access-panel h2 {
    margin: 16px 0 8px;
    color: var(--rb-ink);
    font-size: clamp(1.9rem, 2.7vw, 2.8rem);
    letter-spacing: -.04em;
}

.site-access-panel > p {
    margin: 0 0 18px;
    color: var(--rb-copy);
    font-size: .84rem;
    line-height: 1.6;
}

.site-access-option {
    display: grid;
    gap: 5px;
    padding: 16px 0;
    border-top: 1px solid var(--rb-line);
    color: var(--rb-ink);
    text-decoration: none;
}

.site-access-option strong {
    font-size: .96rem;
}

.site-access-option span {
    color: var(--rb-copy);
    font-size: .76rem;
    line-height: 1.5;
}

.site-access-option.is-primary {
    margin-bottom: 4px;
    padding: 17px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--rb-ink);
    color: #fff;
}

.site-access-option.is-primary span {
    color: rgba(255, 255, 255, .76);
}

.site-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.site-card,
.site-surface {
    border: 1px solid var(--rb-line) !important;
    border-radius: var(--rb-radius) !important;
    box-shadow: none !important;
}

.site-card-meta {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--rb-line);
}

.site-doctors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.site-doctor-card {
    min-height: 220px;
}

.site-hours-grid,
.site-location-grid,
.site-contact-grid {
    gap: 14px !important;
}

.site-map-frame {
    min-height: 320px;
    border-radius: 10px !important;
}

.site-booking-card {
    max-width: 940px;
    margin-inline: auto;
    border: 1px solid var(--rb-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--rb-shadow) !important;
}

.site-booking-card h1 {
    font-size: clamp(2.4rem, 4.6vw, 4.2rem) !important;
    letter-spacing: -.045em !important;
}

/* Required fields stay neutral until the browser marks them user-invalid. */
.site-booking-card input:invalid,
.site-booking-card select:invalid,
.site-booking-card textarea:invalid,
.app-main input:invalid,
.app-main select:invalid,
.app-main textarea:invalid {
    border-color: var(--rb-line) !important;
    box-shadow: none !important;
}

.site-booking-card input:user-invalid,
.site-booking-card select:user-invalid,
.site-booking-card textarea:user-invalid,
.app-main input:user-invalid,
.app-main select:user-invalid,
.app-main textarea:user-invalid {
    border-color: #c85a5a !important;
}

.site-booking-step {
    border-color: var(--rb-line) !important;
    border-radius: 10px !important;
}

/* Clinic operations */
.app-shell {
    --sidebar-width: 224px !important;
    background: #f3f6f5 !important;
}

.app-sidebar {
    width: var(--sidebar-width) !important;
    flex-basis: var(--sidebar-width) !important;
    padding: 16px 12px !important;
    background: #102f3a !important;
}

.app-nav a {
    min-height: 42px !important;
    border-radius: 7px !important;
}

.app-nav a.is-active {
    color: var(--rb-ink) !important;
}

.app-topbar {
    min-height: 72px !important;
    padding: 11px 24px !important;
    background: rgba(255, 255, 255, .98) !important;
}

.app-title-copy h1 {
    font-size: 1.1rem !important;
}

.app-breadcrumb,
.app-eyebrow {
    font-size: .6rem !important;
}

.app-content {
    max-width: 1440px !important;
    padding: 18px 24px 52px !important;
}

.page-head.card,
.card,
.panel-table,
.section-stack {
    border-color: var(--rb-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.page-head.card {
    padding: 16px 18px !important;
}

.app-page-dashboard .page-head.card {
    display: none !important;
}

.grid-metrics {
    gap: 10px !important;
}

.metric-card {
    min-height: 112px !important;
    border-top-width: 2px !important;
}

.metric-card strong {
    font-size: 1.3rem !important;
}

.app-page-appointments .grid-two,
.app-page-patients .grid-two,
.app-page-doctors .grid-two,
.app-page-services .grid-two,
.app-page-billing .grid-two,
.app-page-prescriptions .grid-two {
    grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr) !important;
    align-items: start;
}

.toolbar,
.filters,
.toolbar-card {
    border-radius: 10px !important;
}

input,
select,
textarea,
button {
    border-radius: 8px !important;
}

input,
select,
textarea {
    border-color: #cfdcda !important;
    background: #fff !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--rb-brand) !important;
    box-shadow: 0 0 0 3px rgba(15, 128, 120, .12) !important;
}

.table-wrap {
    border-color: var(--rb-line) !important;
    border-radius: 8px !important;
}

th {
    background: #f5f8f7 !important;
}

/* Authentication */
.auth-shell {
    background: #eef3f1 !important;
}

.auth-wrap {
    width: min(980px, calc(100% - 36px)) !important;
    min-height: 600px !important;
    border: 1px solid var(--rb-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--rb-shadow) !important;
}

.auth-aside {
    padding: 40px !important;
    background: var(--rb-ink) !important;
}

.auth-panel {
    padding: 54px !important;
}

.auth-display h1 {
    font-size: 2.7rem !important;
}

.auth-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-highlight {
    min-height: 112px;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 10px !important;
}

@media (max-width: 1040px) {
    .landing-hero-grid,
    .site-shell:not(.landing-shell) .site-hero-grid {
        grid-template-columns: 1fr !important;
    }

    .landing-hero-media {
        height: 430px !important;
    }

    .landing-proof-grid,
    .landing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .landing-proof-card:nth-child(2) {
        border-inline-end: 0 !important;
    }

    .app-page-appointments .grid-two,
    .app-page-patients .grid-two,
    .app-page-doctors .grid-two,
    .app-page-services .grid-two,
    .app-page-billing .grid-two,
    .app-page-prescriptions .grid-two {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .site-header-inner {
        min-height: 64px;
    }

    .landing-hero {
        padding-top: 28px !important;
    }

    .landing-hero .site-hero-title {
        font-size: 2.45rem !important;
    }

    .landing-hero-media {
        height: 310px !important;
    }

    .landing-proof-grid,
    .landing-card-grid,
    .landing-feature-grid,
    .landing-step-grid,
    .site-cards,
    .site-doctors-grid {
        grid-template-columns: 1fr !important;
    }

    .landing-proof-card,
    .landing-step-card {
        border-inline-end: 0 !important;
        border-bottom: 1px solid var(--rb-line) !important;
    }

    .landing-proof-card:last-child,
    .landing-step-card:last-child {
        border-bottom: 0 !important;
    }

    .site-section {
        padding: 52px 0 !important;
    }

    .landing-section-intro {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .site-shell:not(.landing-shell) .site-hero-panel {
        min-height: 420px !important;
        padding: 28px !important;
    }

    .auth-wrap {
        min-height: 0 !important;
    }

    .auth-aside {
        display: none !important;
    }

    .auth-panel {
        padding: 34px 24px !important;
    }
}