/* ---------------------------------------------------------------------------
   The three plain content pages: about, why book with us, and the plans.

   Deliberately quiet. These are pages somebody reads once, so they borrow the
   site's palette and spacing rather than introducing a second look, and every
   measurement is relative so long Arabic sentences and long English ones both
   have room.

   Colour comes from the shared --care-* tokens, which tokens.css maps for light
   and themes.css re-maps for dark, so these pages follow the theme the visitor
   chose without keeping a palette of their own. Two of those names are easy to
   reach for and wrong here: --care-accent is a pale tint meant to sit behind
   dark text, and --care-surface is the tinted surface, not the card. Anything
   that carries white text uses --care-primary-strong, and anything that is a
   card uses --care-card.
   --------------------------------------------------------------------------- */
.care-page {
    max-width: 68rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;

    /* The one colour the shared tokens do not name: gold, dark enough to be
       read as text on a light card, lightened for the night palette below. */
    --care-price: var(--sihatuna-gold-text, #8a6a1c);
}

[data-bs-theme="dark"] .care-page {
    --care-price: #d9b45e;
}

.care-page-header {
    margin-block-end: 2rem;
}

/* The plans page leads with its title centred; the two reading pages keep the
   start-aligned header they had. */
.care-page-header-centred {
    max-width: 50rem;
    margin-inline: auto;
    text-align: center;
}

.care-page-mark {
    display: block;
    width: 4.5rem;
    height: 0.375rem;
    margin: 0 auto 1.1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sihatuna-gold, #c49a37), var(--care-primary-strong, #08765d));
}

/* The line that tells a patient none of this is addressed to them: a quiet chip
   under the lead rather than a banner competing with the prices. */
.care-page-pill {
    display: inline-block;
    max-width: 100%;
    margin: 1.25rem 0 0;
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    /* Tinted in the watercolor blue the site uses for information, so the chip
       is read as an aside rather than mistaken for another card. */
    color: var(--care-ink, #163e5f);
    background: color-mix(in srgb, var(--care-secondary, #4aa0d8) 14%, var(--care-card, #fff));
    border: 1px solid color-mix(in srgb, var(--care-secondary, #4aa0d8) 32%, var(--care-border, #e4ece8));
    border-radius: 999px;
}

.care-page-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    /* The foreground green, not the fill: this is text on the page itself, and
       the fill green is only legible under white. */
    color: var(--care-primary-dark, #055744);
    text-transform: uppercase;
}

.care-page-header h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.25;
}

.care-page-lead {
    max-width: 46rem;
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.65;
    color: var(--care-muted, #55635f);
}

.care-panel {
    margin-block-end: 1.25rem;
    padding: clamp(1.1rem, 3vw, 1.75rem);
    background: var(--care-card, #fff);
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 18px;
}

.care-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.care-panel p {
    margin: 0 0 0.5rem;
    line-height: 1.7;
}

.care-panel-quiet {
    background: var(--care-surface, #edf4fa);
}

.care-list {
    margin: 0;
    padding-inline-start: 1.1rem;
    display: grid;
    gap: 0.6rem;
    line-height: 1.65;
}

.care-list strong {
    display: block;
}

/* A grid that becomes one column on a phone without a breakpoint to maintain. */
.care-reasons,
.care-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.care-reason,
.care-plan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.1rem, 3vw, 1.5rem);
    background: var(--care-card, #fff);
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 18px;
}

.care-reason h2,
.care-plan h2 {
    margin: 0;
    font-size: 1.1rem;
}

.care-reason p {
    margin: 0;
    line-height: 1.65;
    color: var(--care-muted, #55635f);
}

/* ----- The plan card ------------------------------------------------------

   A card, not a list item: an icon tile and the tier's name at the top, the
   price and its alternative under it, a rule, then what the tier includes. The
   tiers are told apart by that heading and by the words on the card; the tint
   and the glyph only follow along, so the page still reads correctly in one
   colour. */
.care-plans {
    gap: 1.25rem;
    align-items: stretch;
}

.care-plan {
    position: relative;
    gap: 0.65rem;
    padding: clamp(1.25rem, 3vw, 1.6rem);
    border-radius: var(--sihatuna-radius-xl, 1.75rem);
    background: linear-gradient(180deg,
        var(--care-card, #fff),
        color-mix(in srgb, var(--care-surface, #edf4fa) 45%, var(--care-card, #fff)));
    box-shadow: var(--sihatuna-shadow-sm, 0 6px 20px rgba(31, 92, 132, .07));
    overflow: hidden;
}

.care-plan-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.care-plan-head > div {
    min-width: 0;
}

.care-plan-icon {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: var(--sihatuna-radius-md, 1rem);
    color: var(--care-primary-dark, #055744);
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 10%, var(--care-card, #fff));
}

.care-plan h2 {
    font-size: 1.3rem;
}

.care-plan-rule {
    margin: 0.35rem 0 0;
    border: 0;
    border-block-start: 1px solid var(--care-border, #e4ece8);
    opacity: 1;
}

/* Prices are gold, matching every other price on the site. */
.care-plan-price {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--care-price, #8a6a1c);
}

.care-plan-price-ask {
    font-size: 1.1rem;
    font-weight: 700;
}

.care-plan-currency {
    font-size: 0.95rem;
    font-weight: 600;
}

.care-plan-interval,
.care-plan-trial,
.care-plan-alt {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--care-muted, #55635f);
}

.care-plan-trial,
.care-plan-alt {
    margin: 0;
}

.care-plan-list-title {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--care-muted, #55635f);
}

.care-plan-for {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--care-muted, #55635f);
}

/* A tick in a soft disc instead of a bullet, so a long Arabic line wraps back
   to the text and not under the mark. */
.care-list-ticked {
    padding-inline-start: 0;
    list-style: none;
    gap: 0.65rem;
    font-size: 0.95rem;
}

.care-list-ticked li {
    position: relative;
    padding-inline-start: 1.6rem;
}

.care-list-ticked li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0.15rem;
    width: 1.15rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    color: var(--care-primary-dark, #055744);
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 12%, var(--care-card, #fff));
}

/* The featured plan is marked by its border, its top edge and by the words
   inside it, never by colour alone. */
.care-plan-featured {
    border-color: color-mix(in srgb, var(--care-primary-strong, #08765d) 45%, var(--care-border, #e4ece8));
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
}

.care-plan-featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--care-primary-dark, #055744), var(--care-primary-strong, #08765d));
}

/* The top tier wears the gold the rest of the site keeps for premium detail. */
.care-plan-max,
.care-plan-ultra {
    border-color: color-mix(in srgb, var(--sihatuna-gold, #c49a37) 38%, var(--care-border, #e4ece8));
}

.care-plan-max .care-plan-icon,
.care-plan-ultra .care-plan-icon {
    color: var(--care-price, #8a6a1c);
    background: color-mix(in srgb, var(--sihatuna-gold, #c49a37) 12%, var(--care-card, #fff));
}

.care-plan-flag {
    align-self: flex-start;
    margin: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--care-primary-strong, #08765d);
    border-radius: 999px;
    text-transform: uppercase;
}

/* ----- The two switches ---------------------------------------------------

   Who the plans are read as, and how often the bill arrives. Both are segmented
   controls in the same shell, side by side on a wide screen and stacked on a
   narrow one. */
.care-switches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin-block-end: 2rem;
}

.care-switch {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
}

.care-switch-dot {
    width: 0.35rem;
    height: 0.35rem;
    margin-block-end: 1.4rem;
    border-radius: 50%;
    background: var(--sihatuna-gold, #c49a37);
}

.care-audience-label {
    margin: 0 0 0.5rem;
    padding: 0;
    float: none;
    width: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--care-muted, #55635f);
}

.care-audience-switch,
.care-interval-options {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: var(--sihatuna-radius-lg, 1.375rem);
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-sm, 0 6px 20px rgba(31, 92, 132, .07));
}

/* Scoped to the page, which outranks the site's own .nav-pills .nav-link rule:
   that one paints a fixed light-theme grey, unreadable once the card behind it
   turns dark. */
.care-plans-page .care-audience-switch .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 1.1rem;
    border: 0;
    border-radius: var(--sihatuna-radius-sm, 0.75rem);
    color: var(--care-muted, #55635f);
    background: transparent;
    font-weight: 600;
}

.care-plans-page .care-audience-switch .nav-link.active {
    background: linear-gradient(135deg, var(--care-primary-dark, #055744), var(--care-primary-strong, #08765d));
    color: #fff;
}

/* The billing-interval switch: monthly or yearly, over the same cards.

   Two real radio buttons, so the control is reachable by keyboard, announced as
   a choice, and works with no script at all. The inputs are moved off the pill
   rather than hidden with display:none, which would take them out of the tab
   order. */
.care-interval-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.care-interval-option {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 1.1rem;
    border-radius: var(--sihatuna-radius-sm, 0.75rem);
    color: var(--care-muted, #55635f);
    background: transparent;
    font-weight: 600;
    cursor: pointer;
}

.care-interval-input:checked + .care-interval-option {
    background: linear-gradient(135deg, var(--care-primary-dark, #055744), var(--care-primary-strong, #08765d));
    color: #fff;
}

.care-interval-input:focus-visible + .care-interval-option {
    outline: 2px solid var(--care-primary-strong, #08765d);
    outline-offset: 2px;
}

/* On a phone each switch takes the full width and its options share it evenly,
   so a three-word label like "Medical centres" stays on the row instead of
   dropping the last button onto a line of its own. */
@media (max-width: 640px) {
    .care-switches {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
    }

    .care-switch-dot {
        display: none;
    }

    .care-audience-switch,
    .care-interval-options {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
    }

    .care-audience-switch .nav-item {
        flex: 1 1 0;
        display: flex;
        min-width: 0;
    }

    .care-plans-page .care-audience-switch .nav-link,
    .care-interval-option {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
        padding-inline: 0.4rem;
        font-size: 0.82rem;
        line-height: 1.2;
    }
}

.care-plan-pricing {
    display: grid;
    gap: 0.3rem;
}

/* Yearly is what a browser without :has() shows: one price, not two. */
.care-plan-pricing[data-plan-interval="Monthly"] {
    display: none;
}

.care-page:has(#plans-interval-monthly:checked) .care-plan-pricing[data-plan-interval="Monthly"] {
    display: grid;
}

.care-page:has(#plans-interval-monthly:checked) .care-plan-pricing[data-plan-interval="Yearly"] {
    display: none;
}

/* A note that has to be read, not skimmed past. */
.care-note {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    line-height: 1.6;
    background: var(--care-surface, #edf4fa);
    border-inline-start: 4px solid var(--care-primary-dark, #055744);
    border-radius: 12px;
}

.care-note-info {
    border-inline-start-color: #1d6fa5;
}

.care-page .btn {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin-block-start: 0.5rem;
}

/* The closing invitation: the one green block on the page, so the way in is the
   last thing read. */
.care-band {
    margin-block-start: 1.75rem;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    border-radius: var(--sihatuna-radius-xl, 1.75rem);
    color: #fff;
    background: linear-gradient(135deg, var(--sihatuna-green-dark, #055744), var(--sihatuna-green, #08765d));
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
}

.care-band h2 {
    margin: 0;
    font-size: 1.3rem;
}

.care-band p {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.85);
}

.care-page .btn.care-band-btn {
    margin-block-start: 0;
    align-self: center;
    padding-inline: 1.2rem;
    font-weight: 700;
    color: var(--sihatuna-green-dark, #055744);
    background: #fff;
    border: 0;
    border-radius: var(--sihatuna-radius-sm, 0.75rem);
}

.care-page .btn.care-band-btn:hover,
.care-page .btn.care-band-btn:focus-visible {
    background: var(--sihatuna-green-soft, #e6f5f0);
    color: var(--sihatuna-green-dark, #055744);
}

/* No dark block beyond the gold above. These pages used to carry a private
   night palette behind @media (prefers-color-scheme: dark), which darkened the
   cards whenever the operating system was dark even though the visitor had
   chosen the light theme — dark surfaces under the light theme's dark text.
   The shared tokens already answer for both themes, so the page follows the
   switch in the header and nothing here has to be kept in step by hand. */

/* ----- The landmark hero these pages share with the directory pages ------

   The landmarks as atmosphere, not as a picture frame: the wordmark-free
   crop the directory heroes use, faded behind centred copy and masked so it
   dissolves before it reaches the text — at full strength behind a heading
   it reads as a second title showing through the first. One implementation
   here so About, Privacy and Contact cannot drift apart; each page supplies
   its own container inside the section.

   The art keeps to the left in both directions, as the directory heroes
   have it: the inline end in Arabic, repositioned and mirrored for English
   so the skyline still leans toward the outer edge. */
.care-hero {
    position: relative;
    overflow: hidden;
    border-block-end: 1px solid var(--care-border, #e4ece8);
    background:
        radial-gradient(circle at 84% 6%,
            color-mix(in srgb, var(--care-primary-strong, #08765d) 10%, transparent),
            transparent 24%),
        radial-gradient(circle at 12% 8%,
            color-mix(in srgb, var(--care-secondary, #4aa0d8) 9%, transparent),
            transparent 25%),
        var(--care-surface-soft, #f7fbfe);
}

.care-hero::before {
    content: "";
    position: absolute;
    /* The top overhang is the crop: the artwork still carries the wordmark
       across its top, and this hero is tall enough that cover would show it —
       mirrored, in English. Hanging the layer far above the section leaves
       that top to overflow:hidden, and only the landmarks reach the page. */
    inset-block: -14rem -40px;
    /* Inline start, like every other hero: the end put the strip on the
       Arabic page's left with a hard vertical edge where the mask stays
       opaque — the cut the mirrored pages showed. At the start, the mask's
       transparent side faces the page and the fade lands where it should. */
    inset-inline-start: -40px;
    width: min(46vw, 620px);
    opacity: 0.15;
    background-image: url("/images/home/sihatuna-home-landmarks.webp");
    background-size: cover;
    background-position: center bottom;
    filter: saturate(0.78);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    pointer-events: none;
}

[dir="ltr"] .care-hero::before {
    transform: scaleX(-1);
}

[data-bs-theme="dark"] .care-hero::before {
    opacity: 0.10;
    filter: saturate(0.65) brightness(0.72);
}

.care-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 46rem;
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
}

.care-hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--care-primary-dark, #055744);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.care-hero-eyebrow::before {
    content: "";
    width: 2.25rem;
    height: 2px;
    background: var(--sihatuna-gold, #c49a37);
}

.care-hero h1 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

/* Georgia carries no Arabic: left alone, the Arabic heading falls back to a
   Times-like serif that matches nothing else on the site. In RTL the heading
   takes the page's own face — Cairo — like every other Arabic heading. */
[dir="rtl"] .care-hero h1 {
    font-family: inherit;
    letter-spacing: 0;
}

/* The gold line under the title, for a page with a tagline to carry. The gold
   text token is not remapped for dark, so the night value is set by hand, as
   the plans page does for its prices. */
.care-hero-tagline {
    margin: 1rem 0 0;
    color: var(--sihatuna-gold-text, #8a6a1c);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 700;
}

[data-bs-theme="dark"] .care-hero-tagline {
    color: #d9b45e;
}

.care-hero-lead {
    max-width: 40rem;
    margin: 1rem auto 0;
    color: var(--care-muted, #55635f);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.8;
}

.care-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.4rem 0 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 999px;
    background: var(--care-card, #fff);
    color: var(--care-muted, #55635f);
    font-size: 0.82rem;
}

.care-hero-pill .isax {
    color: var(--care-primary-strong, #08765d);
}