@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --cyan: #8fb7c8;
    --blue: #416f8d;
    --navy: #16324a;
    --ocean: #315f7d;

    --theme-canvas: #faf9f6;
    --theme-surface: #fffdf8;
    --theme-surface-strong: #ffffff;
    --theme-surface-muted: #f1ead9;
    --theme-text: #263746;
    --theme-muted: #6b7280;
    --theme-line: #ded8ca;
    --theme-soft: #f3eee3;
    --theme-action: #16324a;
    --theme-action-text: #ffffff;
    --theme-shadow: rgba(12, 74, 110, .08);

    --text: var(--theme-text);
    --muted: var(--theme-muted);
    --line: var(--theme-line);
    --soft: var(--theme-soft);
    --danger: #a93838;
    --success: #1c7650;

    --page: 1120px;
    --reading: 760px;
}

html[data-theme="comfort"] {
    --theme-canvas: #eee9df;
    --theme-surface: #f7f2e9;
    --theme-surface-strong: #fbf7ef;
    --theme-surface-muted: #e5ddcf;
    --theme-text: #293a46;
    --theme-muted: #606970;
    --theme-line: #d1c7b8;
    --theme-soft: #e8e1d6;
    --theme-shadow: rgba(42, 49, 55, .09);
}

html[data-theme="dark"] {
    --cyan: #75a9bf;
    --blue: #8ebdd1;
    --navy: #e4edf1;
    --ocean: #9bc8da;
    --theme-canvas: #111820;
    --theme-surface: #18232c;
    --theme-surface-strong: #1d2a34;
    --theme-surface-muted: #24323c;
    --theme-text: #e7ecef;
    --theme-muted: #b0bbc2;
    --theme-line: #3d4b54;
    --theme-soft: #263640;
    --theme-action: #3f7694;
    --theme-action-text: #ffffff;
    --theme-shadow: rgba(0, 0, 0, .3);
    --danger: #ff9a9a;
    --success: #78d4a7;
}

/* V7 stakeholder launch readiness */

.brand {
    min-height: 68px;
}

.brand-mark-crop {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    background-image: url("/assets/maktoobly-official-logo.png");
    background-position: center;
    background-size: contain;
}

.brand > span:last-child:not(.brand-mark-crop) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sticker-options label {
    position: relative;
    background: #fffdf8;
    border: 2px dashed #b88e55;
    box-shadow: 0 0 0 3px #fffdf8,
                0 0 0 4px #e0caa7;
}

.sticker-options label:has(input:checked) {
    border-color: var(--ocean);
    box-shadow: 0 0 0 3px #f8fcfd,
                0 0 0 5px var(--ocean);
}

.sticker-options label.stamp-locked {
    opacity: .48;
    filter: grayscale(.8);
    cursor: not-allowed;
}

.sticker-options label.stamp-locked::after {
    content: "مقفل";
    position: absolute;
    inset: 5px 5px auto auto;
    padding: 2px 5px;
    border-radius: 999px;
    background: #6f7b80;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
}

.letter-sticker {
    padding: 5px;
    border: 1px dashed rgba(184, 142, 85, .9);
    background-color: #fffdf8;
    box-shadow: 0 0 0 3px #fffdf8,
                0 2px 7px rgba(64, 50, 33, .2);
}

.history-thread-list {
    display: grid;
    gap: 18px;
}

.history-thread-card {
    overflow: hidden;
    border: 1px solid #dbe6e9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(12, 74, 110, .04);
}

.history-thread-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid #e7eef0;
    color: var(--navy);
}

.history-thread-heading > div:first-child span {
    color: var(--muted);
    font-size: .85rem;
}

.history-thread-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .8rem;
}

.history-letter-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.history-letter-block {
    min-width: 0;
    padding: 20px;
}

.history-letter-block + .history-letter-block {
    border-inline-start: 1px solid #e7eef0;
    background: #fbfdfe;
}

.history-letter-block h3 {
    margin: 0 0 12px;
    color: var(--ocean);
    font-size: .87rem;
}

.history-letter-content {
    max-height: 320px;
    overflow: auto;
    padding: 18px;
    border-radius: 10px;
    line-height: 1.9;
}

.history-awaiting-reply {
    margin: 0;
    padding: 20px;
    color: var(--muted);
    text-align: center;
}

.history-report-action {
    margin: 0 18px 16px;
}

.private-rewards {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e3ecef;
}

.private-rewards h3 {
    margin: 0;
    color: var(--navy);
}

.private-rewards p {
    margin: 6px 0 0;
    color: var(--muted);
}

.member-achievement-badge {
    width: fit-content;
    margin-top: 16px;
    padding: 9px 14px;
    border: 1px solid #cfb47c;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff9e8, #f5e6b8);
    color: #765b18;
    font-weight: 800;
}

.reward-progress-text {
    font-size: .88rem;
}

.unlocked-stamp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.unlocked-stamp-chip {
    padding: 6px 10px;
    border: 1px dashed #b88e55;
    background: #fffdf8;
    color: #765b18;
    font-size: .82rem;
    font-weight: 700;
}

.public-reading {
    width: min(calc(100% - 36px), 920px);
}

.public-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-weight: 800;
}

.public-lead {
    color: #405962;
    font-size: 1.08rem;
    line-height: 2;
}

.public-section {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.public-section h2,
.faq-item summary {
    color: var(--navy);
}

.public-section p,
.public-section li,
.faq-item p {
    color: #405962;
    line-height: 2;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    border: 1px solid #dbe6e9;
    border-radius: 10px;
    background: #fff;
}

.faq-item summary {
    padding: 16px 18px;
    cursor: pointer;
    font-weight: 800;
}

.faq-item p {
    margin: 0;
    padding: 0 18px 18px;
}

.selection-card {
    margin-top: 22px;
    padding: 26px clamp(20px, 5vw, 42px);
    border: 1px solid #dfd5c5;
    border-radius: 12px;
    background: #fffdf8;
    color: #344b55;
    line-height: 2.15;
    white-space: pre-line;
}

.editorial-note {
    padding: 14px 16px;
    border-inline-start: 4px solid #c19345;
    background: #fff8e6;
    color: #6f531b;
}

@media (max-width: 760px) {
    .brand,
    .brand-mark-crop {
        min-height: 56px;
    }

    .brand-mark-crop {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .history-thread-heading,
    .history-thread-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-letter-pair {
        grid-template-columns: 1fr;
    }

    .history-letter-block + .history-letter-block {
        border-inline-start: 0;
        border-top: 1px solid #e7eef0;
    }
}

/* V8 stakeholder UI alignment */

.site-header {
    position: relative;
    z-index: 30;
}

.site-header .header-inner {
    min-height: 78px;
}

.site-header .brand,
.site-header .brand .brand-mark-crop {
    min-height: 58px;
}

.site-header .brand .brand-mark-crop {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}

.public-site-header .header-inner {
    width: min(calc(100% - 48px), 1312px);
}

.public-site-header .public-nav {
    order: 1;
}

.public-site-header .header-actions {
    order: 2;
    margin-inline-start: auto;
}

.public-site-header .brand {
    order: 3;
    min-height: 48px;
    gap: 10px;
    margin: 0;
}

.public-site-header .brand .brand-mark-crop {
    width: 42px;
    height: 42px;
    min-height: 42px;
    flex-basis: 42px;
    background-image: url("/assets/favicon-mark.png");
}

.public-site-header .brand-name {
    color: var(--navy);
    font-family: "Amiri", serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.public-nav {
    gap: clamp(15px, 2vw, 28px);
}

.public-nav a,
.public-nav-trigger {
    border: 0;
    padding: 0;
    background: transparent;
    color: #5b6470;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.public-nav a:hover,
.public-nav a:focus-visible,
.public-nav-trigger:hover,
.public-nav-trigger:focus-visible,
.public-nav a[aria-current="page"] {
    color: var(--navy);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-login {
    color: var(--navy);
    text-decoration: none;
    font-weight: 800;
}

#guestActions {
    gap: 14px;
}

#guestActions .header-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
}

#guestActions .header-login:hover,
#guestActions .header-login:focus-visible {
    color: var(--blue);
}

#guestActions .header-cta {
    min-height: 42px;
    justify-content: center;
    padding-inline: 21px !important;
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid #d9d5ca;
    border-radius: 9px;
    background: #fffdf8;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 2px;
    background: var(--navy);
    transition: transform .18s ease, opacity .18s ease;
}

.nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

body[data-page="home"] {
    background: #faf9f6;
}

.landing-hero {
    min-height: 610px;
    display: flex;
    align-items: center;
    padding-block: 82px 60px;
}

.landing-hero-layout {
    max-width: 1312px;
    grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr);
}

.section-eyebrow {
    width: fit-content;
    margin: 0 0 18px;
    color: #6b5a3a;
    font-size: .82rem;
    font-weight: 800;
}

.landing-hero h1 {
    font-size: clamp(2.8rem, 4.5vw, 4.25rem);
    line-height: 1.28;
}

.landing-hero .hero-copy {
    max-width: 610px;
    margin-top: 21px;
    font-size: 1.08rem;
    line-height: 1.95;
}

.landing-signup-note {
    margin: 16px 0 0;
    color: #87909a;
    font-size: .86rem;
}

.landing-section {
    padding-block: 88px;
}

.landing-how {
    border-block: 1px solid #e8e3d8;
    background: #fff;
}

.landing-section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.centered-heading {
    margin-inline: auto;
    text-align: center;
}

.centered-heading .section-eyebrow {
    margin-inline: auto;
}

.landing-section-heading h2,
.landing-final-cta h2 {
    margin: 0;
    color: var(--navy);
    font-family: "Amiri", serif;
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.45;
}

.landing-section-heading > p:last-child,
.landing-final-cta p {
    margin: 9px 0 0;
    color: var(--muted);
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.landing-step {
    padding: 28px 26px;
    text-align: center;
}

.landing-step-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: #eef4f8;
    color: var(--navy);
}

.landing-step-icon svg,
.privacy-card-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.landing-step-number {
    display: block;
    margin: 0 0 8px;
    color: var(--blue);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.landing-step h3,
.privacy-card h3 {
    margin: 0;
    color: var(--navy);
    font-family: "Tajawal", sans-serif;
    font-size: 1.12rem;
}

.landing-step p,
.privacy-card p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.85;
}

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

.privacy-card {
    padding: 28px;
    border: 1px solid #e7e1d5;
    border-radius: 15px;
    background: #fff;
}

.privacy-card-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: var(--navy);
}

.landing-final-cta {
    padding-block: 74px;
    background: #f1ead9;
    text-align: center;
}

.landing-final-cta .button {
    margin-top: 26px;
}

.landing-footer {
    margin-top: 0;
    padding-block: 56px 30px;
    background: #fff;
}

.landing-footer-inner {
    max-width: 1120px;
}

.landing-footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 160px 100px;
    gap: 48px;
    align-items: start;
}

.landing-footer-brand {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--navy);
    font-family: "Amiri", serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.landing-footer-mark {
    width: 32px;
    height: 32px;
    display: block;
    background: url("/assets/favicon-mark.png") center / contain no-repeat;
}

.landing-footer-brand-block p {
    max-width: 310px;
    margin: 14px 0 0;
    color: #8b93a0;
    font-size: .86rem;
    line-height: 1.9;
}

.landing-footer-links,
.landing-footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.landing-footer-links strong,
.landing-footer-social strong {
    color: var(--navy);
    font-size: .82rem;
}

.landing-footer-social-link {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    color: var(--muted);
}

.landing-footer-social-link svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.landing-footer-social-link .instagram-dot {
    fill: currentColor;
    stroke: none;
}

.landing-footer .footer-note {
    max-width: none;
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid #e8e3d8;
    color: #8b93a0;
    text-align: start;
}

.landing-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    color: #8b93a0;
    font-size: .8rem;
}

.landing-footer-bottom a {
    color: inherit;
    text-decoration: none;
}

body[data-page="write"],
body[data-page="receive"],
body[data-page="inbox"],
body[data-page="account"] {
    background: #faf9f6;
}

.compose-shell {
    width: min(calc(100% - 40px), 1280px);
}

.compose-page-heading {
    margin: 0 0 30px;
}

.compose-page-heading .section-eyebrow {
    margin-bottom: 4px;
}

.compose-page-heading h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
}

.compose-page-heading > p:last-child {
    margin: 2px 0 0;
    color: var(--muted);
}

body[data-page="write"] .composer-stage {
    width: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    gap: 24px;
}

body[data-page="write"] .composer-stage > .composer {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 26px;
    border: 1px solid #e0ddd4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(22, 50, 74, .045);
}

body[data-page="write"] .rich-editor {
    min-height: 430px;
}

body[data-page="write"] .composer-policy {
    margin: 14px 2px 0;
}

.appearance-panel {
    margin-top: 20px;
    border: 1px solid #e3ddd1;
    border-radius: 12px;
    background: #fffdf8;
}

.appearance-panel > summary {
    padding: 14px 17px;
    color: var(--navy);
    cursor: pointer;
    list-style-position: inside;
}

.appearance-panel > summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
}

.appearance-panel > summary small {
    color: var(--muted);
    font-weight: 500;
}

.appearance-panel .composer-customization {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 4px 16px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.appearance-panel .stationery-picker,
.appearance-panel .sticker-picker {
    padding: 18px;
    background: #fff;
}

.appearance-panel .stationery-options {
    grid-template-columns: repeat(7, minmax(68px, 1fr));
}

.appearance-panel .sticker-options {
    grid-template-columns: repeat(8, minmax(66px, 1fr));
}

.appearance-panel .stationery-options label,
.appearance-panel .sticker-options label {
    min-height: 76px;
}

.compose-submit {
    justify-content: flex-end;
}

.compose-submit .button {
    min-width: 165px;
}

.compose-preview-card {
    position: sticky;
    top: 24px;
    padding: 20px;
    border: 1px solid #e0ddd4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(22, 50, 74, .045);
}

.compose-preview-card h2 {
    margin: 0 0 13px;
    color: var(--navy);
    font-family: "Tajawal", sans-serif;
    font-size: .9rem;
}

.compose-preview-card .letter-preview {
    min-height: 270px;
    max-height: 520px;
    padding: 24px 20px;
    overflow: auto;
    font-size: .9rem;
}

.compose-preview-card .letter-preview.is-empty {
    color: #929aa1;
}

.compose-preview-card > p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .76rem;
    text-align: center;
}

.account-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .72fr);
    gap: 22px;
    align-items: start;
}

.account-page-header {
    grid-column: 1 / -1;
}

.account-settings-panel {
    grid-column: 1;
    grid-row: 2;
}

.focused-experience-panel {
    grid-column: 2;
    grid-row: 2;
}

.focused-experience-panel,
.account-settings-panel,
.history-section {
    border-color: #e0ddd4;
    box-shadow: 0 12px 34px rgba(22, 50, 74, .035);
}

@media (max-width: 1040px) {
    .public-site-header .header-inner {
        width: min(calc(100% - 36px), 1120px);
    }

    .public-nav {
        gap: 13px;
    }

    .public-nav a,
    .public-nav-trigger {
        font-size: .84rem;
    }

    body[data-page="write"] .composer-stage {
        grid-template-columns: 1fr;
    }

    .compose-preview-card {
        position: static;
        display: none;
    }

    .account-shell {
        grid-template-columns: 1fr;
    }

    .account-page-header,
    .account-settings-panel,
    .focused-experience-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .focused-experience-panel {
        order: -1;
    }
}

@media (max-width: 840px) {
    .site-header .header-inner {
        min-height: 68px;
        flex-wrap: wrap;
        gap: 8px 14px;
        padding-block: 5px;
    }

    .site-header .brand,
    .site-header .brand .brand-mark-crop {
        min-height: 54px;
    }

    .site-header .brand .brand-mark-crop {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .public-site-header .brand {
        order: 1;
        min-height: 50px;
    }

    .public-site-header .brand .brand-mark-crop {
        width: 40px;
        height: 40px;
        min-height: 40px;
        flex-basis: 40px;
    }

    .nav-toggle {
        order: 2;
        display: block;
        margin-inline-start: auto;
    }

    .site-header .header-nav,
    .site-header .header-actions {
        width: 100%;
        display: none;
    }

    .site-header.nav-open .header-nav,
    .site-header.nav-open .header-actions:not([hidden]) {
        display: flex;
    }

    .site-header .header-nav {
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        border-top: 1px solid var(--line);
    }

    .site-header .header-nav a,
    .site-header .header-nav .public-nav-trigger {
        width: 100%;
        padding: 9px 8px;
        text-align: start;
    }

    .site-header .header-actions {
        order: 4;
        padding: 0 0 12px;
    }

    .site-header .header-actions .header-cta {
        width: auto;
    }

    .landing-hero {
        min-height: 0;
        padding-block: 54px 44px;
    }

    .landing-hero-layout {
        grid-template-areas: "content" "illustration";
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .landing-hero h1 {
        font-size: clamp(2.45rem, 10vw, 3.4rem);
    }

    .hero-illustration {
        width: min(78vw, 330px);
    }

    .landing-section {
        padding-block: 62px;
    }

    .landing-steps,
    .privacy-grid {
        grid-template-columns: 1fr;
    }

    .landing-step {
        padding: 20px 12px;
        text-align: center;
    }

    .landing-footer-main {
        grid-template-columns: minmax(0, 1fr) 120px 80px;
        gap: 28px;
    }

    .appearance-panel .stationery-options,
    .appearance-panel .sticker-options {
        grid-template-columns: repeat(4, minmax(64px, 1fr));
    }
}

@media (max-width: 620px) {
    .landing-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-footer-brand-block {
        grid-column: 1 / -1;
    }

    .landing-footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .landing-hero-actions,
    .landing-hero-actions .button,
    .landing-final-cta .button {
        width: 100%;
    }

    .trust-pill-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-pill {
        justify-content: center;
        padding-inline: 10px;
        text-align: center;
    }

    .compose-shell {
        width: min(calc(100% - 20px), 1280px);
    }

    body[data-page="write"] .composer-stage > .composer {
        padding: 16px;
        border-radius: 13px;
    }

    body[data-page="write"] .rich-editor {
        min-height: 380px;
        padding: 24px 18px;
    }

    .appearance-panel > summary > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .appearance-panel .composer-customization {
        padding-inline: 10px;
    }

    .appearance-panel .stationery-options,
    .appearance-panel .sticker-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

* {
    box-sizing: border-box;
}

html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #faf9f6;
    color: var(--text);
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
    line-height: 1.8;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--ocean);
}

[hidden] {
    display: none !important;
}

.shell {
    width: min(calc(100% - 36px), var(--page));
    margin-inline: auto;
}

.reading {
    width: min(calc(100% - 36px), var(--reading));
    margin-inline: auto;
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(250, 249, 246, .97);
}

.header-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline-end: auto;
    color: var(--navy);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
}

.brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-nav a,
.link-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--navy);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.header-nav a:hover,
.link-button:hover {
    color: var(--blue);
}

.header-cta {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-inline: 17px !important;
    border-radius: 8px;
    background: var(--navy) !important;
    color: #fff !important;
}

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge {
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}

.hero {
    min-height: 535px;
    display: flex;
    align-items: center;
    padding-block: 75px;
}

.hero-inner {
    max-width: 790px;
}

.hero h1 {
    margin: 0;
    max-width: 720px;
    color: var(--navy);
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.045em;
}

.hero-copy {
    max-width: 650px;
    margin: 24px 0 0;
    color: #526a73;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 2;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 28px;
}

.button {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    padding: 8px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    font-weight: 800;
}

.button-primary {
    background: var(--navy);
    color: #fff;
}

.button-secondary {
    background: #fff;
    color: var(--navy);
    border: 1px solid #a9bdc5;
}

.button-danger {
    background: #fff;
    color: var(--danger);
    border: 1px solid #e3bcbc;
}

.button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.compact-section {
    padding-block: 52px;
    border-top: 1px solid var(--line);
}

.compact-section h2 {
    margin: 0 0 20px;
    color: var(--navy);
    font-size: 1.45rem;
    font-weight: 800;
}

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

.step-number {
    display: block;
    color: var(--blue);
    font-weight: 800;
    font-size: .88rem;
    margin-bottom: 3px;
}

.step strong {
    display: block;
    color: var(--navy);
    font-size: 1.05rem;
}

.step p,
.compact-copy {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .94rem;
}

.compact-copy {
    max-width: 720px;
    line-height: 2;
}

.site-footer {
    margin-top: 45px;
    padding-block: 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .84rem;
}

body[data-page="home"] .site-footer {
    margin-top: 0;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.footer-row a {
    color: var(--muted);
    text-decoration: none;
}

.footer-note {
    margin-top: 10px;
    max-width: 750px;
}

.auth-page {
    padding-block: 70px 100px;
}

.auth-box {
    width: min(calc(100% - 36px), 470px);
    margin-inline: auto;
}

.auth-box h1,
.page-title {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.auth-intro,
.page-intro {
    margin: 8px 0 30px;
    color: var(--muted);
}

.field {
    margin-top: 18px;
}

.field label,
.field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font-weight: 700;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    border: 1px solid #b7c8cd;
    border-radius: 8px;
    padding: 11px 13px;
    background: #fff;
    color: var(--text);
}

.field input,
.field select {
    min-height: 48px;
}

.field textarea {
    min-height: 320px;
    resize: vertical;
    line-height: 2.05;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 3px solid rgba(31, 209, 217, .18);
    border-color: var(--blue);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    color: #405962;
}

.check input {
    margin-top: 7px;
}

.form-help {
    margin-top: 5px;
    color: var(--muted);
    font-size: .86rem;
}

.message {
    display: none;
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: 7px;
    font-size: .92rem;
}

.message.visible {
    display: block;
}

.message.success {
    color: var(--success);
    background: #f1faf6;
    border: 1px solid #c4e1d3;
}

.message.error {
    color: #fff;
    background: #a93434;
    border: 1px solid #8d2727;
    box-shadow: 0 10px 24px rgba(141, 39, 39, .18);
}

.contextual-warning {
    margin: 0 0 16px;
    padding: 13px 16px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.75;
}

.contextual-warning.error::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    color: #a93434;
    background: #fff;
    border-radius: 50%;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.contextual-warning:focus {
    outline: 3px solid rgba(169, 52, 52, .22);
    outline-offset: 3px;
}

.member-main {
    padding-block: 56px 90px;
}

.composer {
    width: min(100%, 790px);
}

.composer h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2.1rem, 5vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.composer-subtitle {
    margin: 5px 0 25px;
    color: var(--muted);
}

.composer textarea {
    min-height: 360px;
    font-size: 1.04rem;
}

.counter-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    color: var(--muted);
    font-size: .83rem;
}

.page {
    padding-block: 52px 90px;
}

.page-header {
    margin-bottom: 32px;
}

.page-section {
    padding-block: 24px;
    border-top: 1px solid var(--line);
}

.page-section h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 1.3rem;
}

.letter-item {
    padding-block: 22px;
    border-top: 1px solid var(--line);
}

.letter-item:first-child {
    border-top: 0;
}

.letter-meta {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: .86rem;
}

.letter-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 2.1;
    color: #263f48;
}

.inline-action {
    margin-top: 16px;
}

.empty-state {
    padding-block: 28px;
    color: var(--muted);
}

.reply-form {
    margin-top: 20px;
}

.reply-form textarea {
    min-height: 180px;
}

.profile-grid {
    width: min(100%, 620px);
}

.profile-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 24px 0 32px;
}

.stat {
    min-width: 125px;
}

.stat span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
}

.stat strong {
    display: block;
    color: var(--navy);
    font-size: 1.05rem;
}

.legal-copy {
    max-width: 820px;
}

.legal-copy h1 {
    color: var(--navy);
}

.legal-copy h2 {
    margin-top: 32px;
    color: var(--navy);
    font-size: 1.2rem;
}

.legal-copy p,
.legal-copy li {
    color: #405962;
}

@media (max-width: 760px) {
    .header-inner {
        gap: 13px;
    }

    .header-nav {
        gap: 13px;
    }

    .header-nav .optional-nav {
        display: none;
    }

    .hero {
        min-height: 480px;
        padding-block: 58px;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .composer textarea {
        min-height: 330px;
    }
}

@media (max-width: 500px) {
    .shell,
    .reading {
        width: min(calc(100% - 24px), var(--page));
    }

    .brand span {
        font-size: 1.05rem;
    }

    .brand img {
        width: 30px;
        height: 30px;
    }

    .header-nav {
        gap: 10px;
        font-size: .88rem;
    }

    .header-cta {
        min-height: 37px;
        padding-inline: 12px !important;
    }

    .hero h1 {
        font-size: 2.65rem;
    }

    .actions {
        flex-direction: column;
    }

    .actions .button {
        width: 100%;
    }

    .counter-row {
        display: block;
    }
}


/* F1.3 visual balance */

.composer {
    width: min(100%, 860px);
    margin-inline: auto;
}

.footer-row a {
    position: relative;
    padding-block: 3px;
    color: var(--ocean);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color .16s ease,
        border-color .16s ease;
}

.footer-row a:hover,
.footer-row a:focus-visible {
    color: var(--navy);
    border-bottom-color: var(--blue);
}

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    color: var(--ocean);
    font-weight: 700;
    text-decoration: none;
}

.page-back:hover,
.page-back:focus-visible {
    text-decoration: underline;
}

.inbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
}

.inbox-column {
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.inbox-column h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 1.3rem;
}

@media (max-width: 760px) {
    .inbox-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .composer {
        width: 100%;
    }
}


/* F1.4 */

.brand-mark-crop {
    width: 36px;
    height: 27px;
    flex: 0 0 36px;
    display: inline-block;
    overflow: hidden;
    background-image: url("/assets/logo.jpeg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 46px auto;
}

.footer-link {
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 3px 0;
    background: transparent;
    color: var(--ocean);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--navy);
    border-bottom-color: var(--blue);
}

.info-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 38, 50, .38);
}

.info-modal-panel {
    position: relative;
    width: min(100%, 720px);
    max-height: min(82vh, 760px);
    overflow-y: auto;
    padding: 34px;
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 22px 70px rgba(12, 74, 110, .18);
}

.info-modal-close {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.info-modal-close:hover,
.info-modal-close:focus-visible {
    background: var(--soft);
    color: var(--navy);
}

.info-modal-content .page-back {
    display: none;
}

.info-modal-content .page-header {
    margin-bottom: 24px;
}

.info-modal-content .page-title,
.info-modal-content h1 {
    padding-inline-end: 32px;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.account-details {
    margin-top: 28px;
    width: min(100%, 620px);
}

.account-details summary {
    width: fit-content;
    color: var(--muted);
    font-size: .88rem;
    cursor: pointer;
}

.account-details-content {
    margin-top: 12px;
    color: var(--muted);
    font-size: .88rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

@media (max-width: 500px) {
    .brand-mark-crop {
        width: 32px;
        height: 24px;
        flex-basis: 32px;
        background-size: 41px auto;
    }

    .info-modal {
        padding: 12px;
    }

    .info-modal-panel {
        padding: 28px 20px 24px;
    }

    .account-actions .button {
        flex: 1 1 auto;
    }
}


/* F1.4 */

.brand-mark-crop {
    width: 36px;
    height: 27px;
    flex: 0 0 36px;
    display: inline-block;
    overflow: hidden;
    background-image: url("/assets/logo.jpeg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 46px auto;
}

.footer-link {
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 3px 0;
    background: transparent;
    color: var(--ocean);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--navy);
    border-bottom-color: var(--blue);
}

.info-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 38, 50, .38);
}

.info-modal-panel {
    position: relative;
    width: min(100%, 720px);
    max-height: min(82vh, 760px);
    overflow-y: auto;
    padding: 34px;
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 22px 70px rgba(12, 74, 110, .18);
}

.info-modal-close {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.info-modal-close:hover,
.info-modal-close:focus-visible {
    background: var(--soft);
    color: var(--navy);
}

.info-modal-content .page-back {
    display: none;
}

.info-modal-content .page-header {
    margin-bottom: 24px;
}

.info-modal-content .page-title,
.info-modal-content h1 {
    padding-inline-end: 32px;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.account-details {
    margin-top: 28px;
    width: min(100%, 620px);
}

.account-details summary {
    width: fit-content;
    color: var(--muted);
    font-size: .88rem;
    cursor: pointer;
}

.account-details-content {
    margin-top: 12px;
    color: var(--muted);
    font-size: .88rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

@media (max-width: 500px) {
    .brand-mark-crop {
        width: 32px;
        height: 24px;
        flex-basis: 32px;
        background-size: 41px auto;
    }

    .info-modal {
        padding: 12px;
    }

    .info-modal-panel {
        padding: 28px 20px 24px;
    }

    .account-actions .button {
        flex: 1 1 auto;
    }
}


/* F1.5 correspondence experience */

.receive-reading {
    width: min(calc(100% - 36px), 920px);
}

.arrival-stage {
    width: min(100%, 900px);
    margin: 38px auto 0;
    padding: 48px 42px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.arrival-stage h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
}

.arrival-alias {
    margin-top: 12px;
    color: var(--ocean);
    font-size: 1.06rem;
    font-weight: 700;
}

.arrival-deadline {
    margin-top: 7px;
    color: var(--muted);
    font-size: .9rem;
}

.message-cover {
    width: 100%;
    border: 1px solid #cadadd;
    border-radius: 12px;
    padding: 24px 26px;
    background: #fff;
    color: var(--text);
    text-align: right;
    cursor: pointer;
    transition:
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.message-cover:hover,
.message-cover:focus-visible {
    border-color: var(--blue);
    box-shadow:
        0 8px 28px rgba(12, 74, 110, .08);
    transform: translateY(-1px);
    outline: none;
}

.message-cover-title {
    display: block;
    color: var(--navy);
    font-size: 1.08rem;
    font-weight: 800;
}

.message-cover-alias {
    display: block;
    margin-top: 5px;
    color: var(--ocean);
    font-weight: 700;
}

.message-cover-meta {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .84rem;
}

.message-cover-open {
    display: block;
    margin-top: 13px;
    color: var(--blue);
    font-size: .88rem;
    font-weight: 700;
}

.message-sheet {
    margin-top: 14px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 14px 40px rgba(12, 74, 110, .07);
}

.message-sheet .letter-content {
    font-size: 1.06rem;
    line-height: 2.25;
}

.message-sheet-heading {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 1.35rem;
}

.message-sheet-meta {
    margin-bottom: 20px;
    color: var(--muted);
    font-size: .86rem;
}

.letter-reveal {
    animation:
        maktoobly-letter-reveal .22s ease-out;
}

@keyframes maktoobly-letter-reveal {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inbox-column .letter-item {
    padding-block: 10px;
    border: 0;
}

@media (max-width: 600px) {
    .receive-reading {
        width: min(calc(100% - 24px), 920px);
    }

    .arrival-stage {
        padding: 35px 22px;
    }

    .message-sheet {
        padding: 22px 18px;
    }
}


/* F1.6 - letter opening is the primary product moment */

.letter-open-stage {
    position: relative;
    overflow: hidden;
    animation:
        maktoobly-letter-open
        .52s
        cubic-bezier(.22, .75, .25, 1)
        both;
}

.letter-open-stage::before {
    content: "";
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            transparent
        );
    transform-origin: center;
    animation:
        maktoobly-letter-line
        .7s
        ease-out
        both;
}

.letter-open-stage .message-sheet-heading {
    animation:
        maktoobly-letter-content
        .38s
        .08s
        ease-out
        both;
}

.letter-open-stage .message-sheet-meta {
    animation:
        maktoobly-letter-content
        .4s
        .14s
        ease-out
        both;
}

.letter-open-stage .letter-content {
    animation:
        maktoobly-letter-content
        .46s
        .2s
        ease-out
        both;
}

.letter-open-stage .inline-action,
.letter-open-stage .reply-form {
    animation:
        maktoobly-letter-content
        .4s
        .3s
        ease-out
        both;
}

@keyframes maktoobly-letter-open {
    0% {
        opacity: .15;
        transform:
            translateY(16px)
            scale(.985);
        box-shadow:
            0 4px 12px
            rgba(12, 74, 110, .02);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        box-shadow:
            0 18px 52px
            rgba(12, 74, 110, .10);
    }
}

@keyframes maktoobly-letter-line {
    from {
        opacity: 0;
        transform: scaleX(.15);
    }

    to {
        opacity: .75;
        transform: scaleX(1);
    }
}

@keyframes maktoobly-letter-content {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .letter-open-stage,
    .letter-open-stage::before,
    .letter-open-stage .message-sheet-heading,
    .letter-open-stage .message-sheet-meta,
    .letter-open-stage .letter-content,
    .letter-open-stage .inline-action,
    .letter-open-stage .reply-form {
        animation: none !important;
    }
}

/* F1.7 - the returned reply is the closure moment */

.reply-closure-sheet {
    padding: 0;
    overflow: hidden;
}

.reply-closure-stage {
    padding: 42px 38px 36px;
    text-align: right;
}

.reply-closure-kicker {
    margin-bottom: 8px;
    color: var(--blue);
    font-size: .88rem;
    font-weight: 800;
}

.reply-closure-title {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.25;
}

.reply-closure-meta {
    margin-top: 10px;
    color: var(--muted);
    font-size: .9rem;
}

.reply-letter {
    margin-top: 32px;
    padding: 30px 0 8px;
    border-top: 1px solid var(--line);
    color: var(--text);
    font-size: clamp(1.08rem, 2vw, 1.22rem);
    line-height: 2.25;
    white-space: pre-wrap;
}

.reply-complete {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--ocean);
    font-size: .9rem;
    font-weight: 700;
}

.reply-complete::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--blue);
}

.original-letter-details {
    border-top: 1px solid var(--line);
    background: #fbfdfe;
}

.original-letter-details summary {
    padding: 18px 38px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    list-style-position: inside;
}

.original-letter-details[open] summary {
    color: var(--navy);
}

.original-letter-context {
    padding: 4px 38px 34px;
    color: var(--muted);
    font-size: .98rem;
    line-height: 2.1;
    white-space: pre-wrap;
}

.reply-closure-stage > * {
    animation:
        maktoobly-reply-arrive
        .46s
        ease-out
        both;
}

.reply-closure-stage > :nth-child(2) {
    animation-delay: .06s;
}

.reply-closure-stage > :nth-child(3) {
    animation-delay: .11s;
}

.reply-closure-stage > :nth-child(4) {
    animation-delay: .18s;
}

.reply-closure-stage > :nth-child(5) {
    animation-delay: .28s;
}

@keyframes maktoobly-reply-arrive {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .reply-closure-stage {
        padding: 32px 22px 28px;
    }

    .original-letter-details summary {
        padding-inline: 22px;
    }

    .original-letter-context {
        padding-inline: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reply-closure-stage > * {
        animation: none !important;
    }
}


/* F1.8 - direct reply experience */

.reply-cover-context {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.reply-focus-sheet {
    padding: 34px 36px 0;
    overflow: hidden;
}

.reply-focus-meta {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 600;
}

.reply-focus-content {
    padding: 30px 0 34px;
    color: var(--text);
    font-size: clamp(1.15rem, 2vw, 1.32rem);
    font-weight: 500;
    line-height: 2.2;
    white-space: pre-wrap;
}

.reply-original-details {
    margin-inline: -36px;
    border-top: 1px solid var(--line);
    background: #fbfdfe;
}

.reply-original-details summary {
    padding: 17px 36px;
    color: var(--muted);
    font-size: .87rem;
    font-weight: 700;
    cursor: pointer;
}

.reply-original-details[open] summary {
    color: var(--navy);
}

.reply-original-content {
    padding: 4px 36px 30px;
    color: var(--muted);
    font-size: .96rem;
    line-height: 2.05;
    white-space: pre-wrap;
}

@media (max-width: 600px) {

    .reply-focus-sheet {
        padding:
            28px
            22px
            0;
    }

    .reply-original-details {
        margin-inline: -22px;
    }

    .reply-original-details summary {
        padding-inline: 22px;
    }

    .reply-original-content {
        padding-inline: 22px;
    }
}


/* F1.9 - one surface, closed or open */

.reply-collapse-button {
    display: block;
    width: fit-content;
    margin: 0 0 24px;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 2px 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.reply-collapse-button:hover,
.reply-collapse-button:focus-visible {
    color: var(--ocean);
    border-bottom-color: var(--blue);
    outline: none;
}


/* F2.0 - correspondence focus mode */

.correspondence-focus-mode .page-header {
    display: none;
}

.inbox-grid.correspondence-focus-active {
    display: block;
    width: 100%;
}

.inbox-grid.correspondence-focus-active
.inbox-column:not(.correspondence-focus-column) {
    display: none;
}

.inbox-grid.correspondence-focus-active
.correspondence-focus-column {
    width: min(100%, 820px);
    max-width: 820px;
    margin-inline: auto;
    padding-top: 0;
    border-top: 0;
}

.correspondence-focus-column > h2 {
    display: none;
}

.correspondence-focus-column
.letter-item:not(.is-focused-correspondence) {
    display: none;
}

.correspondence-focus-column
.is-focused-correspondence {
    width: 100%;
}

.correspondence-focus-column
.message-sheet {
    width: 100%;
    margin-top: 0;
}

.correspondence-focus-column
.reply-focus-sheet,
.correspondence-focus-column
.correspondence-reading-sheet {
    padding:
        42px
        clamp(30px, 6vw, 64px)
        0;
}

.correspondence-focus-column
.reply-focus-content,
.correspondence-focus-column
.correspondence-reading-content {
    max-width: 690px;
    margin-inline: auto;
    font-size:
        clamp(1.05rem, 1.4vw, 1.16rem);
    line-height: 2.05;
}

.correspondence-focus-column
.reply-focus-meta {
    max-width: 690px;
    margin-inline: auto;
}

.correspondence-focus-column
.reply-original-details {
    margin-inline:
        calc(-1 * clamp(30px, 6vw, 64px));
}

.correspondence-focus-column
.reply-original-content {
    max-width: 690px;
    margin-inline: auto;
}

.correspondence-focus-column
.reply-collapse-button {
    margin-top: 22px;
}

@media (max-width: 760px) {

    .correspondence-focus-column
    .reply-focus-sheet,
    .correspondence-focus-column
    .correspondence-reading-sheet {
        padding:
            28px
            22px
            0;
    }

    .correspondence-focus-column
    .reply-original-details {
        margin-inline: -22px;
    }
}


/* F2.1 - focused reading polish */

.focus-return-button {
    display: block;
    width: 100%;
    max-width: 690px;
    margin:
        0
        auto
        22px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
}

.focus-return-button:hover,
.focus-return-button:focus-visible {
    color: var(--ocean);
    text-decoration: underline;
    outline: none;
}

.correspondence-focus-column
.reply-focus-content,
.correspondence-focus-column
.correspondence-reading-content {
    line-height: 1.9;
}

.correspondence-focus-column
.reply-focus-content {
    padding-top: 26px;
    padding-bottom: 28px;
}


/* F2.2 - compact correspondence focus header */

.focus-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 690px;
    margin:
        0
        auto
        26px;
}

.focus-header-row
.reply-focus-meta {
    width: auto;
    max-width: none;
    margin: 0;
}

.focus-header-row
.focus-return-button {
    width: auto;
    max-width: none;
    margin: 0;
    flex: 0 0 auto;
    text-align: left;
}

.correspondence-focus-column
.reply-focus-sheet,
.correspondence-focus-column
.correspondence-reading-sheet {
    padding-top: 34px;
}

@media (max-width: 600px) {

    .focus-header-row {
        gap: 16px;
        margin-bottom: 20px;
    }

    .focus-header-row
    .focus-return-button {
        font-size: .8rem;
    }
}


/* F2.3 - smooth reply completion */

.reply-form,
.reply-return-prep {
    transition:
        opacity .28s ease,
        transform .34s ease,
        filter .34s ease;
}

.reply-form-sent {
    opacity: .72;
}

.reply-return-away {
    opacity: 0;
    transform:
        translateY(-8px)
        scale(.995);
    filter: blur(.8px);
}

body.inbox-transition-out
.inbox-grid {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity .24s ease,
        transform .24s ease;
}

.inbox-grid {
    animation:
        maktoobly-inbox-enter
        .3s
        ease-out
        both;
}

@keyframes maktoobly-inbox-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reply-review-pending textarea,
.reply-review-pending button[type="submit"] {
    opacity: .65;
}

@media (prefers-reduced-motion: reduce) {

    .reply-form,
    .reply-return-prep,
    .reply-return-away,
    body.inbox-transition-out
    .inbox-grid {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    .inbox-grid {
        animation: none !important;
    }
}


/* F2.4 - meaningful completion moments */

.completion-moment {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;

    background:
        rgba(247, 251, 252, .56);

    backdrop-filter:
        blur(3px);

    opacity: 0;

    transition:
        opacity .28s ease;
}

.completion-moment.is-visible {
    opacity: 1;
}

.completion-moment.is-leaving {
    opacity: 0;
}


.completion-moment-card {
    width: min(
        92vw,
        470px);

    padding:
        44px
        40px
        42px;

    border:
        1px solid
        rgba(2, 132, 199, .18);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 22px 70px
        rgba(12, 74, 110, .12);

    text-align: center;

    transform:
        translateY(8px)
        scale(.985);

    transition:
        transform .34s ease;
}

.completion-moment.is-visible
.completion-moment-card {
    transform:
        translateY(0)
        scale(1);
}

.completion-moment.is-leaving
.completion-moment-card {
    transform:
        translateY(-4px)
        scale(.992);
}


.completion-moment-mark {
    position: relative;

    width: 62px;
    height: 44px;

    margin:
        0
        auto
        28px;

    border:
        2px solid
        #0284C7;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 209, 217, .08),
            rgba(2, 132, 199, .04)
        );
}

.completion-moment-mark::before,
.completion-moment-mark::after {
    content: "";

    position: absolute;
    top: 8px;

    width: 34px;
    height: 2px;

    background:
        #0284C7;
}

.completion-moment-mark::before {
    right: 27px;

    transform:
        rotate(34deg);

    transform-origin:
        right center;
}

.completion-moment-mark::after {
    left: 27px;

    transform:
        rotate(-34deg);

    transform-origin:
        left center;
}


.completion-moment-title {
    color: #0C4A6E;

    font-size:
        clamp(
            1.55rem,
            4vw,
            2rem);

    font-weight: 800;

    line-height: 1.45;
}


.completion-moment-text {
    max-width: 350px;

    margin:
        13px
        auto
        0;

    color:
        rgba(12, 74, 110, .72);

    font-size: 1rem;

    line-height: 1.9;
}


@media (max-width: 600px) {

    .completion-moment-card {
        padding:
            38px
            28px
            36px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .completion-moment,
    .completion-moment-card {
        transition: none !important;
    }
}


/* F2.4C - completion dismissal */

.completion-moment {
    cursor: pointer;
}

.completion-moment-card {
    cursor: default;
}


/* F2.5 - correspondence reporting */

.focus-header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
}

.received-letter-reading-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.received-letter-reading-header
.message-sheet-meta {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .received-letter-reading-header {
        align-items: flex-start;
        gap: 12px;
    }
}

.focus-report-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    border: 0;
    padding: 0;
    background: transparent;

    color: #9B4B52;

    font: inherit;
    font-size: .82rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        color .16s ease,
        opacity .16s ease;
}

.focus-report-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.focus-report-button:hover,
.focus-report-button:focus-visible {
    color: #73333A;
    text-decoration: underline;
    outline: none;
}

.focus-report-button:active {
    opacity: .72;
}


.report-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 5200;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        rgba(12, 31, 41, .20);

    backdrop-filter:
        blur(3px);

    opacity: 0;

    transition:
        opacity .22s ease;
}

.report-dialog-overlay.is-visible {
    opacity: 1;
}

.report-dialog-overlay.is-leaving {
    opacity: 0;
}


.report-dialog {
    width: min(
        94vw,
        590px);

    max-height:
        min(
            88vh,
            760px);

    overflow-y: auto;

    padding:
        34px
        34px
        30px;

    border:
        1px solid
        rgba(12, 74, 110, .12);

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 22px 70px
        rgba(12, 74, 110, .14);

    transform:
        translateY(7px)
        scale(.99);

    transition:
        transform .24s ease;
}

.report-dialog-overlay.is-visible
.report-dialog {
    transform:
        translateY(0)
        scale(1);
}


.report-dialog-title {
    margin: 0;

    color: #0C4A6E;

    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.5;
}

.report-dialog-intro {
    margin:
        8px
        0
        25px;

    color:
        rgba(12, 74, 110, .65);

    font-size: .94rem;
    line-height: 1.8;
}


.report-dialog-form {
    display: grid;
    gap: 18px;
}

.report-field-title {
    display: block;

    color: #0C4A6E;

    font-size: .88rem;
    font-weight: 800;
}


.report-reasons {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.report-reason-option {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 46px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(12, 74, 110, .13);

    border-radius: 10px;

    color:
        rgba(12, 74, 110, .78);

    cursor: pointer;
}

.report-reason-option:hover {
    border-color:
        rgba(2, 132, 199, .38);

    background:
        rgba(31, 209, 217, .035);
}

.report-reason-option:has(input:checked) {
    border-color:
        rgba(2, 132, 199, .62);

    background:
        rgba(31, 209, 217, .07);

    color: #0C4A6E;
}

.report-reason-option input {
    margin: 0;
    flex: 0 0 auto;
}


.report-note-field {
    display: grid;
    gap: 9px;
}

.report-note-field textarea {
    width: 100%;
    min-height: 94px;
    resize: vertical;
}


.report-dialog-status {
    margin: 0;
}


.report-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 2px;
}

.report-cancel-button {
    background: transparent;
    color: #0C4A6E;
}


.report-dialog-success {
    text-align: center;

    padding-top: 48px;
    padding-bottom: 48px;
}

.report-dialog-success
.report-dialog-title {
    font-size: 1.6rem;
}

.report-dialog-success
.report-dialog-intro {
    max-width: 390px;

    margin:
        10px
        auto
        0;
}


@media (max-width: 620px) {

    .focus-header-actions {
        gap: 13px;
    }

    .report-dialog {
        padding:
            28px
            22px
            24px;
    }

    .report-reasons {
        grid-template-columns: 1fr;
    }
}


@media (prefers-reduced-motion: reduce) {

    .report-dialog-overlay,
    .report-dialog {
        transition: none !important;
    }
}

/* F2.7 Arabic validation and bidirectional form handling */
input[type="email"] {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: left;
}


/* F2.10D terms modal polish */

.info-modal-panel:has(.legal-copy) {
    width: min(
        820px,
        calc(100vw - 48px)
    );
    max-height: min(
        82vh,
        780px
    );
    padding: 0;
    overflow: hidden;
}

.info-modal-panel:has(.legal-copy)
.info-modal-content {
    max-height: min(
        82vh,
        780px
    );
    overflow-y: auto;
    padding:
        0
        44px
        42px;
    scrollbar-gutter: stable;
}

.info-modal-panel:has(.legal-copy)
.info-modal-content
.page-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin:
        0
        -44px
        28px;
    padding:
        34px
        44px
        24px;
    background: #ffffff;
    border-bottom:
        1px solid
        #e8eef2;
}

.info-modal-panel:has(.legal-copy)
.info-modal-content
.page-title,
.info-modal-panel:has(.legal-copy)
.info-modal-content
h1 {
    max-width: none;
    margin: 0;
    padding-left: 46px;
    font-size: clamp(
        1.75rem,
        2.8vw,
        2.25rem
    );
    line-height: 1.45;
}

.info-modal-panel:has(.legal-copy)
.info-modal-close {
    top: 22px;
    left: 22px;
    z-index: 4;
}

.info-modal-panel:has(.legal-copy)
.legal-copy h2 {
    margin-top: 30px;
}

.info-modal-panel:has(.legal-copy)
.legal-copy p,
.info-modal-panel:has(.legal-copy)
.legal-copy li {
    line-height: 1.9;
}

@media (max-width: 640px) {

    .info-modal-panel:has(.legal-copy) {
        width:
            calc(100vw - 20px);
        max-height: 88vh;
    }

    .info-modal-panel:has(.legal-copy)
    .info-modal-content {
        max-height: 88vh;
        padding:
            0
            22px
            28px;
    }

    .info-modal-panel:has(.legal-copy)
    .info-modal-content
    .page-header {
        margin:
            0
            -22px
            22px;
        padding:
            28px
            22px
            20px;
    }

    .info-modal-panel:has(.legal-copy)
    .info-modal-content
    .page-title,
    .info-modal-panel:has(.legal-copy)
    .info-modal-content
    h1 {
        padding-left: 38px;
        font-size: 1.7rem;
    }

    .info-modal-panel:has(.legal-copy)
    .info-modal-close {
        top: 17px;
        left: 15px;
    }
}

/* F2.10D homepage secondary login action */

.home-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 16px;
    border: 1px solid #d3e0e7;
    border-radius: 8px;
    background: #ffffff;
    color: #07567d;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color 140ms ease,
        background-color 140ms ease;
}

.home-login-link:hover,
.home-login-link:focus-visible {
    border-color: #9dbdcd;
    background: #f7fafb;
}

/* F2.10D homepage login visual correction */

header a.home-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #c9d9e1;
    border-radius: 8px;
    background: #ffffff;
    color: #07567d;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

header a.home-login-link:hover,
header a.home-login-link:focus-visible {
    background: #f5f9fb;
    border-color: #94b7c8;
}

/* F2.10D final terms modal sizing */

.info-modal-panel:has(.legal-copy) {
    width: min(820px, calc(100vw - 48px));
    max-width: 820px;
}

.info-modal-panel:has(.legal-copy)
.info-modal-content
.page-title,
.info-modal-panel:has(.legal-copy)
.info-modal-content
h1 {
    font-size: clamp(1.65rem, 2.25vw, 2rem);
    line-height: 1.4;
}

/* F2.10E auth pages */

body[data-page="login"],
body[data-page="register"] {
    background: #fbfdfe;
}

body[data-page="login"] .auth-page,
body[data-page="register"] .auth-page {
    padding:
        54px
        18px
        72px;
}

body[data-page="login"] .auth-box,
body[data-page="register"] .auth-box {
    width: min(100%, 520px);
    margin-inline: auto;
    padding: 34px 36px;
    background: #ffffff;
    border: 1px solid #e0eaee;
    border-radius: 16px;
    box-shadow:
        0 14px 36px
        rgba(12, 74, 110, 0.055);
}

body[data-page="register"] .auth-box {
    width: min(100%, 550px);
}

body[data-page="login"] .auth-box h1,
body[data-page="register"] .auth-box h1 {
    margin-top: 0;
    margin-bottom: 8px;
}

body[data-page="login"] .auth-intro,
body[data-page="register"] .auth-intro {
    margin-bottom: 28px;
}

body[data-page="login"] .field,
body[data-page="register"] .field {
    margin-bottom: 20px;
}

body[data-page="login"] .actions,
body[data-page="register"] .actions {
    margin-top: 24px;
}

body[data-page="login"] .form-help,
body[data-page="register"] .form-help {
    margin-top: 14px;
}

body[data-page="register"] .check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    border:
        1px solid
        transparent;
    border-radius: 9px;
}

body[data-page="register"] .check:hover {
    background: #f8fbfc;
    border-color: #edf3f5;
}

body[data-page="register"] .check input {
    margin-top: 6px;
}

body[data-page="register"] .check span {
    min-width: 0;
}

/* Registration completion replaces the form. */

.auth-success {
    display: grid;
    justify-items: center;
    text-align: center;
    padding:
        16px
        4px
        10px;
}

.auth-success-mark {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #edf8f3;
    color: var(--success);
    font-size: 1.45rem;
    font-weight: 800;
}

.auth-success h1 {
    margin:
        0
        0
        12px;
}

.auth-success p {
    max-width: 390px;
    margin:
        0
        auto;
    color: var(--text);
}

.auth-success .auth-success-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.95rem;
}

.auth-success-action {
    margin-top: 26px;
}

@media (max-width: 640px) {

    body[data-page="login"] .auth-page,
    body[data-page="register"] .auth-page {
        padding:
            28px
            12px
            48px;
    }

    body[data-page="login"] .auth-box,
    body[data-page="register"] .auth-box {
        padding:
            26px
            20px;
        border-radius: 13px;
    }
}

/* F2.10E final registration density */

@media (min-width: 641px) {

    body[data-page="register"] .auth-page {
        padding-top: 42px;
        padding-bottom: 54px;
    }

    body[data-page="register"] .auth-box {
        padding:
            28px
            34px
            30px;
    }

    body[data-page="register"] .auth-intro {
        margin-bottom: 22px;
    }

    body[data-page="register"] .field {
        margin-bottom: 16px;
    }

    body[data-page="register"] .check {
        padding:
            8px
            10px;
    }

    body[data-page="register"] .actions {
        margin-top: 18px;
    }

    body[data-page="register"] .form-help {
        margin-top: 10px;
    }
}

/* F2.10F authenticated workspace */

/* Stable authenticated navigation */

.workspace-nav {
    gap: 4px;
}

.header-nav .workspace-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 8px;
    color: #07567d;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.header-nav .workspace-nav-link:hover,
.header-nav .workspace-nav-link:focus-visible {
    background: #f3f8fa;
}

.header-nav .workspace-nav-link[aria-current="page"] {
    background: #edf5f8;
    color: #064c70;
}


/* Logged-in workspace background */

body[data-page="receive"],
body[data-page="inbox"],
body[data-page="account"] {
    background: #fbfdfe;
}

body[data-page="home"] #memberHome {
    min-height: 690px;
    background: #fbfdfe;
}


/* Writing workspace */

body[data-page="home"] #memberHome > .shell {
    max-width: 980px;
}

body[data-page="home"] .composer {
    width: min(100%, 880px);
    margin:
        46px
        auto
        64px;
    padding:
        32px
        34px
        34px;
    background: #ffffff;
    border: 1px solid #e0eaee;
    border-radius: 16px;
    box-shadow:
        0 14px 36px
        rgba(12, 74, 110, 0.045);
}

body[data-page="home"] .composer h1 {
    margin-top: 0;
}

body[data-page="home"] .composer textarea {
    min-height: 310px;
    background: #ffffff;
}

body[data-page="home"] .composer .counter-row {
    margin-top: 10px;
}

body[data-page="home"] .composer .actions {
    margin-top: 24px;
}


/* Receive workspace */

body[data-page="receive"] .page {
    padding-top: 48px;
}

body[data-page="receive"] .receive-reading {
    width: min(100%, 760px);
    margin-inline: auto;
    padding:
        30px
        32px
        32px;
    background: #ffffff;
    border: 1px solid #e0eaee;
    border-radius: 16px;
    box-shadow:
        0 14px 36px
        rgba(12, 74, 110, 0.045);
}

body[data-page="receive"] .receive-reading .page-header {
    margin-bottom: 26px;
}

body[data-page="receive"] #receiveForm .field {
    margin-bottom: 0;
}

body[data-page="receive"] #receiveForm .actions {
    margin-top: 24px;
}


/* Inbox workspace */

body[data-page="inbox"] .page {
    padding-top: 48px;
}

body[data-page="inbox"] .reading {
    width: min(100%, 1040px);
    margin-inline: auto;
}

body[data-page="inbox"] .page-header {
    margin-bottom: 28px;
}

body[data-page="inbox"] .inbox-grid {
    gap: 22px;
}

body[data-page="inbox"] .inbox-column {
    min-height: 320px;
    padding:
        24px
        22px;
    background: #ffffff;
    border: 1px solid #e0eaee;
    border-radius: 14px;
    box-shadow:
        0 10px 30px
        rgba(12, 74, 110, 0.035);
}

body[data-page="inbox"] .inbox-column h2 {
    margin:
        0
        0
        20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf2f4;
}

body[data-page="inbox"] .empty-state {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 24px;
    border: 1px dashed #d8e4e9;
    border-radius: 10px;
    background: #fafcfd;
    color: var(--muted);
    text-align: center;
}

body[data-page="inbox"] .inbox-column .letter-item {
    margin-bottom: 12px;
}

body[data-page="inbox"] .message-cover {
    border-color: #dce7eb;
    background: #ffffff;
}

body[data-page="inbox"] .message-cover:hover,
body[data-page="inbox"] .message-cover:focus-visible {
    border-color: #bad0da;
    background: #fbfdfe;
}


/* Account workspace */

body[data-page="account"] .page {
    padding-top: 48px;
}

body[data-page="account"] .reading {
    width: min(100%, 650px);
    margin-inline: auto;
    padding:
        30px
        34px
        34px;
    background: #ffffff;
    border: 1px solid #e0eaee;
    border-radius: 16px;
    box-shadow:
        0 14px 36px
        rgba(12, 74, 110, 0.045);
}

body[data-page="account"] .page-header {
    margin-bottom: 26px;
}

body[data-page="account"] .profile-grid {
    width: 100%;
}

body[data-page="account"] .account-actions {
    margin-top: 24px;
}


/* Responsive authenticated workspace */

@media (max-width: 760px) {

    .workspace-nav {
        gap: 0;
    }

    .header-nav .workspace-nav-link {
        padding:
            7px
            8px;
        font-size: 0.9rem;
    }

    body[data-page="home"] .composer,
    body[data-page="receive"] .receive-reading,
    body[data-page="account"] .reading {
        padding:
            24px
            20px;
        border-radius: 13px;
    }

    body[data-page="home"] .composer {
        margin-top: 28px;
    }

    body[data-page="receive"] .page,
    body[data-page="inbox"] .page,
    body[data-page="account"] .page {
        padding-top: 28px;
    }

    body[data-page="inbox"] .inbox-column {
        min-height: 220px;
        padding:
            20px
            18px;
    }
}

@media (max-width: 560px) {

    .header-inner {
        align-items: flex-start;
    }

    .workspace-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .header-nav .workspace-nav-link {
        min-height: 34px;
        padding:
            5px
            7px;
        font-size: 0.84rem;
    }
}

/* F2.10F inbox hierarchy refinement */

/*
 * The column is the visual container.
 * Empty messages should not create another box inside it.
 */

body[data-page="inbox"]
.inbox-column > .empty-state:not(:has(.letter-item)) {
    min-height: 150px;
    padding:
        30px
        12px;
    border: 0;
    border-radius: 0;
    background: transparent;
}


/*
 * Correspondence is content inside the column,
 * not another full card.
 */

body[data-page="inbox"]
.inbox-column .letter-item {
    margin: 0;
}

body[data-page="inbox"]
.inbox-column .message-cover {
    padding:
        17px
        8px
        19px;
    border: 0;
    border-bottom:
        1px solid
        #edf2f4;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="inbox"]
.inbox-column .letter-item:last-child
.message-cover {
    border-bottom: 0;
}

body[data-page="inbox"]
.inbox-column .message-cover:hover,
body[data-page="inbox"]
.inbox-column .message-cover:focus-visible {
    background: #f8fbfc;
    border-radius: 8px;
}

body[data-page="inbox"]
.inbox-column .message-cover-title {
    margin-bottom: 7px;
}

body[data-page="inbox"]
.inbox-column .message-cover-meta {
    margin-top: 9px;
}

body[data-page="inbox"]
.inbox-column .message-cover-open {
    margin-top: 12px;
}

/* F2.12A2 durable seen reply rows */

body[data-page="inbox"]
.inbox-column
.reply-cover.reply-cover-seen {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding:
        9px
        8px;
}

body[data-page="inbox"]
.reply-cover-seen
.message-cover-alias {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .95rem;
}

body[data-page="inbox"]
.reply-cover-seen
.message-cover-meta {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    font-size: .8rem;
}

body[data-page="inbox"]
.reply-cover-seen
.message-cover-open {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    font-size: .82rem;
}

body[data-page="inbox"]
.reply-cover-context[hidden] {
    display: none;
}

@media (max-width: 600px) {

    body[data-page="inbox"]
    .inbox-column
    .reply-cover.reply-cover-seen {
        flex-wrap: wrap;
        gap:
            5px
            12px;
    }

    body[data-page="inbox"]
    .reply-cover-seen
    .message-cover-alias {
        flex-basis: calc(100% - 55px);
    }
}


/* Stakeholder visual direction: literary type and warm canvas */

h1,
h2,
h3,
.brand,
.page-title,
.composer h1,
.completion-moment-title {
    font-family: "Amiri", Georgia, serif;
    letter-spacing: 0;
}

body[data-page="receive"],
body[data-page="inbox"],
body[data-page="account"],
body[data-page="home"] #memberHome {
    background: #faf9f6;
}

body[data-page="home"] .composer,
body[data-page="receive"] .receive-reading,
body[data-page="account"] .reading,
body[data-page="inbox"] .inbox-column,
.field input,
.field textarea,
.field select,
.button-secondary,
.button-danger,
.completion-moment-card,
.info-modal-panel {
    background: #fffdf8;
}

.header-nav .workspace-nav-link:hover,
.header-nav .workspace-nav-link:focus-visible,
.header-nav .workspace-nav-link[aria-current="page"] {
    background: #f1ead9;
}

body[data-page="inbox"] .empty-state {
    background: #f7f3ea;
}

.counter-row {
    align-items: baseline;
    flex-wrap: wrap;
}

#messageLengthCategory {
    color: var(--navy);
    font-weight: 700;
}

.reply-counter-row {
    margin-top: 8px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.footer-social-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.sent-follow-up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
    padding: 16px 18px;
    border: 1px solid #d9cdaf;
    border-radius: 12px;
    background: #f1ead9;
    color: var(--navy);
}

.sent-follow-up a {
    color: var(--navy);
    font-weight: 800;
}

.completion-moment-mark {
    border-color: var(--blue);
    animation:
        maktoobly-envelope-flight
        1.15s
        ease-in-out
        both;
}

.completion-moment-mark::before,
.completion-moment-mark::after {
    background: var(--blue);
}

@keyframes maktoobly-envelope-flight {
    0% {
        opacity: 0;
        transform:
            translateX(54px)
            translateY(16px)
            rotate(7deg)
            scale(.82);
    }

    55% {
        opacity: 1;
        transform:
            translateX(-8px)
            translateY(-7px)
            rotate(-2deg)
            scale(1.03);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 600px) {

    .sent-follow-up {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .completion-moment-mark {
        animation: none !important;
    }
}


/* Guest landing hero */

.landing-hero {
    min-height: 620px;
    padding-block: 74px 86px;
}

.landing-hero-layout {
    width: 100%;
    display: grid;
    grid-template-areas: "illustration content";
    grid-template-columns:
        minmax(300px, .8fr)
        minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(34px, 6vw, 82px);
    direction: ltr;
}

.landing-hero .hero-inner {
    grid-area: content;
    max-width: 720px;
    direction: rtl;
}

.landing-hero h1 {
    max-width: 710px;
    font-size: clamp(2.7rem, 4.8vw, 4rem);
    line-height: 1.3;
}

.landing-hero .hero-copy {
    max-width: 680px;
    color: #52606a;
    font-size: clamp(1.02rem, 1.8vw, 1.2rem);
}

.landing-hero-actions {
    align-items: stretch;
}

.landing-hero-actions .button {
    min-height: 50px;
    padding-inline: 25px;
}

.hero-illustration {
    grid-area: illustration;
    width: min(100%, 430px);
    margin: 0;
    justify-self: center;
}

.hero-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

.founder-quote-section {
    padding-block: 66px;
    border-block: 1px solid var(--line);
    background: #fff;
}

.founder-quote-inner {
    text-align: center;
}

.founder-quote-inner::before {
    content: "”";
    display: block;
    height: 35px;
    color: #a99051;
    font-family: "Amiri", serif;
    font-size: 3.5rem;
    line-height: 1;
}

.founder-quote-inner blockquote {
    max-width: 760px;
    margin: 16px auto 0;
    color: var(--navy);
    font-family: "Amiri", serif;
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    line-height: 1.7;
}

.founder-quote-inner cite {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 820px) {

    .landing-hero {
        min-height: 0;
        padding-block: 54px 62px;
    }

    .landing-hero-layout {
        grid-template-areas:
            "content"
            "illustration";
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

    .landing-hero .hero-inner {
        max-width: 660px;
    }

    .hero-illustration {
        width: min(82vw, 360px);
    }

    .founder-quote-section {
        padding-block: 50px;
    }
}


/* Member experience: expressive letters, history, private account */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.member-main {
    padding-block: 54px 72px;
}

.rich-letter-layout {
    width: min(100%, 1120px);
}

.composer-heading {
    margin-bottom: 28px;
}

.composer-heading h1 {
    margin-bottom: 4px;
    font-family: "Amiri", serif;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
}

.rich-letter-layout form {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .7fr);
    gap: 24px;
    align-items: start;
}

.rich-composer,
.letter-preview-panel,
.stationery-picker,
.private-profile-panel,
.experience-panel,
.member-card,
.history-table-wrap {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.rich-composer {
    overflow: hidden;
}

.rich-toolbar {
    min-height: 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    background: #fdfcf9;
}

.rich-toolbar button,
.emoji-row button {
    min-width: 35px;
    min-height: 35px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
}

.rich-toolbar button:hover,
.rich-toolbar button:focus-visible,
.emoji-row button:hover,
.emoji-row button:focus-visible {
    background: #eaf1f4;
    outline: none;
}

.toolbar-select-label select {
    min-height: 38px;
    border: 1px solid #cbd7dc;
    border-radius: 8px;
    padding-inline: 10px;
    background: #fff;
    color: var(--navy);
}

.toolbar-separator {
    width: 1px;
    height: 27px;
    margin-inline: 2px;
    background: var(--line);
}

.toolbar-colors {
    display: inline-flex;
    gap: 4px;
}

.toolbar-colors button {
    min-width: 24px;
    width: 24px;
    min-height: 24px;
    height: 24px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px #cfd7da;
}

.emoji-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid #ece7dc;
    background: #fff;
}

.emoji-quick-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px;
}

.emoji-row .emoji-picker-toggle {
    flex: 0 0 auto;
    margin-inline-start: auto;
    border: 1px solid #cbd7dc;
    background: #f7fafb;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 1.2rem;
}

.emoji-picker-popover {
    flex: 1 0 100%;
    margin-top: 7px;
    padding: 14px;
    border: 1px solid #d9e2e5;
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 12px 28px rgba(23, 50, 74, .1);
}

.emoji-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--navy);
}

.emoji-row .emoji-picker-close {
    min-width: 30px;
    min-height: 30px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1;
}

.emoji-picker-grid {
    max-height: 176px;
    display: grid;
    grid-template-columns: repeat(10, minmax(30px, 1fr));
    gap: 3px;
    padding: 4px;
    overflow-y: auto;
}

.emoji-row .emoji-catalog-button {
    font-size: 1.2rem;
}

.emoji-custom-form {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ece7dc;
}

.emoji-custom-form > label {
    color: var(--navy);
    font-size: .84rem;
    font-weight: 700;
}

.emoji-custom-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.emoji-custom-entry input {
    min-width: 0;
    min-height: 40px;
    border: 1px solid #b7c8cd;
    border-radius: 8px;
    padding: 7px 11px;
    background: #fff;
    color: var(--text);
    font-size: 1.08rem;
}

.emoji-row .emoji-custom-entry button {
    min-width: 70px;
    min-height: 40px;
    padding-inline: 14px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
}

.emoji-custom-form small {
    color: var(--muted);
    font-size: .74rem;
}

.submission-honeypot,
.turnstile-execution {
    position: fixed !important;
    inset-inline-start: -10000px !important;
    inset-block-start: 0 !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.emoji-picker-status {
    min-height: 1.2em;
    margin: 0;
    color: #a64038;
    font-size: .78rem;
}

.rich-editor {
    min-height: 330px;
    padding: 30px 34px;
    color: var(--text);
    font-size: 1.12rem;
    line-height: 2.05;
    outline: none;
    overflow-wrap: anywhere;
}

.rich-editor:empty::before {
    content: attr(data-placeholder);
    color: #9aa2a7;
    pointer-events: none;
}

.rich-editor:focus {
    box-shadow: inset 0 0 0 2px rgba(65, 111, 141, .12);
}

.rich-editor-meta {
    min-height: 46px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 10px 17px;
    border-top: 1px solid #ece7dc;
    color: var(--muted);
    font-size: .85rem;
}

.letter-preview-panel {
    padding: 18px;
}

.letter-preview-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.letter-preview-heading span {
    color: var(--muted);
    font-size: .8rem;
}

.letter-preview,
.history-letter-content {
    min-height: 270px;
    padding: 28px 24px;
    border: 1px solid #e2dacb;
    border-radius: 12px;
    color: var(--navy);
    line-height: 2;
    overflow-wrap: anywhere;
}

.letter-preview::before {
    content: "✉";
    display: block;
    margin-bottom: 15px;
    color: var(--blue);
    font-size: 1.5rem;
}

.letter-font-tajawal { font-family: "Tajawal", Tahoma, Arial, sans-serif; }
.letter-font-amiri { font-family: "Amiri", serif; font-size: 1.15em; }
.letter-font-system { font-family: Tahoma, Arial, sans-serif; }
.letter-align-right { text-align: right; }
.letter-align-center { text-align: center; }
.letter-align-justify { text-align: justify; }
.letter-block-align-right { text-align: right; }
.letter-block-align-center { text-align: center; }

.letter-theme-classic { background: #fffdfa; }
.letter-theme-nature { background: linear-gradient(145deg, #f8fcf5, #e4f0df); }
.letter-theme-animals { background: linear-gradient(145deg, #f7fbfe, #dfeef7); }
.letter-theme-landmarks { background: linear-gradient(145deg, #f7f8f8, #e9edef); }
.letter-theme-writing { background: linear-gradient(145deg, #fffdf7, #f6ecd6); }
.letter-theme-flowers { background: linear-gradient(145deg, #fff9fb, #f6e3ea); }
.letter-theme-arts { background: linear-gradient(145deg, #fbf9ff, #ece6f7); }

.letter-color-navy { color: #17324a; }
.letter-color-slate { color: #264653; }
.letter-color-green { color: #2f6f52; }
.letter-color-burgundy { color: #7a3038; }
.letter-color-brown { color: #8a5a36; }
.letter-color-charcoal { color: #4a4a4a; }
.letter-color-black { color: #000; }

.stationery-picker {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px 24px;
}

.stationery-picker legend {
    padding-inline: 7px;
    color: var(--navy);
    font-weight: 800;
}

.stationery-picker > p {
    margin: -3px 0 14px;
    color: var(--muted);
    font-size: .9rem;
}

.stationery-options {
    display: grid;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
    gap: 10px;
}

.stationery-options label {
    position: relative;
    min-height: 88px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px dashed #9ab4c1;
    border-radius: 11px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
}

.stationery-options input {
    position: absolute;
    opacity: 0;
}

.stationery-options label:has(input:checked) {
    border-style: solid;
    border-color: var(--navy);
    background: #edf3f5;
    box-shadow: 0 0 0 2px rgba(65, 111, 141, .12);
}

.stationery-options label span {
    font-size: 1.45rem;
}

.stationery-options label strong {
    font-size: .78rem;
}

.composer-policy,
.rich-letter-layout form > .actions,
.rich-letter-layout form > .message {
    grid-column: 1 / -1;
}

.composer-policy {
    margin: -8px 0 0;
    color: var(--muted);
    font-size: .9rem;
}

.rich-reply-form {
    width: min(100%, 860px);
    margin: 30px auto 0;
}

.reply-rich-composer .rich-editor {
    min-height: 260px;
}

.reply-letter-preview {
    min-height: 180px;
    margin-top: 16px;
}

.compact-stationery-picker {
    margin-top: 16px;
}

.compact-stationery-picker .stationery-options {
    grid-template-columns: repeat(7, minmax(64px, 1fr));
}

.letter-content,
.reply-focus-content,
.reply-original-content {
    overflow-wrap: anywhere;
}

.correspondence-shell,
.account-shell {
    width: min(calc(100% - 36px), 1180px);
}

.history-section {
    margin-top: 62px;
}

.history-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.history-heading h2,
.experience-panel h2,
.private-profile-panel h2 {
    margin: 0;
    color: var(--navy);
    font-family: "Amiri", serif;
    font-size: 1.9rem;
}

.history-heading p,
.experience-heading p,
.private-profile-heading p {
    margin: 2px 0 0;
    color: var(--muted);
}

.history-summary {
    display: flex;
    gap: 10px;
}

.history-summary div {
    min-width: 82px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
    background: #fff;
}

.history-summary strong,
.history-summary span {
    display: block;
}

.history-summary strong {
    color: var(--navy);
    font-size: 1.25rem;
}

.history-summary span {
    color: var(--muted);
    font-size: .76rem;
}

.history-table-wrap {
    overflow: hidden;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.history-table th,
.history-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #eee9df;
    text-align: right;
    vertical-align: top;
}

.history-table th {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
    background: #fdfcf9;
}

.history-table th:nth-child(1) { width: 23%; }
.history-table th:nth-child(2) { width: 20%; }
.history-table th:nth-child(3) { width: 17%; }
.history-table tr:last-child td { border-bottom: 0; }

.history-state {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e7f2ec;
    color: #1b6a47;
    font-size: .78rem;
    font-weight: 800;
}

.history-state-under_review,
.history-state-moderation_pending,
.history-state-active,
.history-state-pool {
    background: #f5ecd2;
    color: #8a641a;
}

.history-state-expired,
.history-state-cancelled,
.history-state-withdrawn {
    background: #eceff1;
    color: #626d74;
}

.history-state-frozen { background: #f7e5e5; color: #8b3434; }

.history-content-details summary {
    color: var(--navy);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.history-letter-content {
    min-height: 0;
    margin-top: 12px;
    padding: 18px;
}

.history-more {
    margin: 18px auto 0;
}

.account-page-header {
    margin-bottom: 28px;
}

.account-overview {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.55fr);
    gap: 24px;
    align-items: stretch;
}

.member-card,
.experience-panel,
.private-profile-panel {
    padding: 28px;
}

.member-card {
    text-align: center;
}

.member-avatar {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #edf3f5;
}

.member-avatar .brand-mark-crop {
    transform: scale(1.25);
}

.member-since {
    margin: 0;
    color: var(--muted);
}

.account-state,
.indicator-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e5f1eb;
    color: var(--success);
    font-size: .82rem;
    font-weight: 800;
}

.member-reliability {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: right;
}

.indicator-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: var(--navy);
}

.indicator-heading .indicator-badge {
    margin: 0;
}

.indicator-track {
    height: 10px;
    margin-top: 9px;
    border-radius: 999px;
    background: #e7ecee;
    overflow: hidden;
}

.indicator-track span {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--success);
    transition: width .45s ease;
}

.member-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.member-counts strong,
.member-counts span {
    display: block;
}

.member-counts strong {
    color: var(--navy);
    font-size: 1.55rem;
}

.member-counts span {
    color: var(--muted);
    font-size: .82rem;
}

.experience-panel {
    display: grid;
    align-content: center;
    gap: 26px;
}

.experience-heading p {
    max-width: 680px;
}

.experience-indicator p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .88rem;
}

.private-profile-panel {
    margin-top: 24px;
}

.private-profile-heading {
    display: flex;
    justify-content: space-between;
    gap: 22px;
}

.privacy-mark {
    color: var(--blue);
    font-size: 1.7rem;
}

.private-profile-note {
    margin: 20px 0 26px;
    padding: 15px 18px;
    border-radius: 11px;
    background: var(--soft);
    color: #725c36;
}

.profile-form {
    display: grid;
    gap: 22px;
}

.topic-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.topic-fieldset legend {
    margin-bottom: 10px;
    color: var(--navy);
    font-weight: 800;
}

.topic-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.topic-options label {
    position: relative;
}

.topic-options input {
    position: absolute;
    opacity: 0;
}

.topic-options span {
    display: inline-flex;
    padding: 6px 14px;
    border: 1px solid #bfd0d8;
    border-radius: 999px;
    color: var(--navy);
    cursor: pointer;
}

.topic-options input:checked + span {
    border-color: var(--blue);
    background: #e9f1f4;
    box-shadow: 0 0 0 1px var(--blue);
}

.compact-field {
    margin-top: 14px;
}

.prefix-field {
    display: flex;
    align-items: center;
    border: 1px solid #ccd5d8;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.prefix-field > span {
    padding-inline: 13px;
    color: var(--muted);
    background: var(--soft);
}

.prefix-field input {
    border: 0 !important;
    border-radius: 0 !important;
}

@media (max-width: 900px) {
    .rich-letter-layout form,
    .account-overview {
        grid-template-columns: 1fr;
    }

    .stationery-options,
    .compact-stationery-picker .stationery-options {
        grid-template-columns: repeat(4, minmax(76px, 1fr));
    }
}

@media (max-width: 680px) {
    .rich-toolbar {
        gap: 4px;
    }

    .toolbar-separator {
        display: none;
    }

    .rich-editor {
        min-height: 285px;
        padding: 22px 19px;
    }

    .stationery-options,
    .compact-stationery-picker .stationery-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .history-table-wrap {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .history-table,
    .history-table tbody,
    .history-table tr,
    .history-table td {
        display: block;
        width: 100%;
    }

    .history-table thead {
        display: none;
    }

    .history-table tr {
        margin-bottom: 13px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
    }

    .history-table td {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 10px;
        padding: 7px 0;
        border: 0;
    }

    .history-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .78rem;
        font-weight: 700;
    }

    .member-card,
    .experience-panel,
    .private-profile-panel {
        padding: 21px 18px;
    }
}


/* Focused member experience: selective editor, confirmation and clear metrics */

.member-main > .shell {
    width: min(calc(100% - 36px), 1280px);
}

.rich-letter-layout {
    width: min(calc(100% - 24px), 1240px);
}

.rich-letter-layout form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.rich-editor {
    min-height: 500px;
    padding: 38px 44px;
}

.rich-reply-form {
    width: min(100%, 1000px);
}

.letter-inline-font-tajawal,
font[face="Tajawal"] {
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

.letter-inline-font-amiri,
font[face="Amiri"] {
    font-family: "Amiri", serif;
    font-size: 1.08em;
}

.letter-inline-font-system,
font[face="Tahoma"] {
    font-family: Tahoma, Arial, sans-serif;
}

.rich-toolbar button.is-active,
.rich-toolbar button[aria-pressed="true"] {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
    background: #e6f0f4;
}

.toolbar-select-label select.is-active {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
    background: #f4f9fb;
}

.alignment-button {
    padding: 7px;
}

.align-icon {
    width: 21px;
    height: 16px;
    display: block;
    background:
        linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 2px no-repeat,
        linear-gradient(var(--navy), var(--navy)) 0 5px / 72% 2px no-repeat,
        linear-gradient(var(--navy), var(--navy)) 0 10px / 100% 2px no-repeat,
        linear-gradient(var(--navy), var(--navy)) 0 15px / 72% 2px no-repeat;
}

.align-right-icon {
    transform: scaleX(-1);
}

.align-center-icon {
    background-position: center 0, center 5px, center 10px, center 15px;
}

.custom-color-control {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #9fb1ba;
    border-radius: 50%;
    cursor: pointer;
    background: conic-gradient(#e44646, #e6cb3a, #47a75a, #3a86d8, #8554c7, #e44646);
}

.custom-color-control input {
    position: absolute;
    width: 46px;
    height: 46px;
    opacity: 0;
    cursor: pointer;
}

.custom-color-control span {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-weight: 900;
    pointer-events: none;
}

.stationery-picker,
.sticker-picker {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.stationery-picker legend,
.sticker-picker legend {
    padding-inline: 7px;
    color: var(--navy);
    font-weight: 800;
}

.stationery-picker > p,
.sticker-picker > p {
    margin: -3px 0 14px;
    color: var(--muted);
    font-size: .9rem;
}

.stationery-options label,
.sticker-options label {
    min-height: 78px;
}

.theme-swatch {
    width: 34px;
    height: 24px;
    display: block;
    border: 1px solid #d3d7d5;
    border-radius: 6px;
}

.sticker-options {
    display: grid;
    grid-template-columns: repeat(8, minmax(70px, 1fr));
    gap: 10px;
}

.sticker-options label {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px dashed #9ab4c1;
    border-radius: 11px;
    color: var(--navy);
    cursor: pointer;
}

.sticker-options input {
    position: absolute;
    opacity: 0;
}

.sticker-options label:has(input:checked) {
    border-style: solid;
    border-color: var(--navy);
    background: #edf3f5;
    box-shadow: 0 0 0 2px rgba(65, 111, 141, .12);
}

.sticker-options label span {
    font-size: 1.35rem;
}

.sticker-options label strong {
    font-size: .78rem;
}

.sticker-sprite {
    display: block;
    background-image: url("../letter-stickers-v1.png");
    background-repeat: no-repeat;
    background-size: 400% 200%;
}

.sticker-moon {
    background-position: 0 0;
}

.sticker-leaf {
    background-position: 33.333% 0;
}

.sticker-flower {
    background-position: 66.667% 0;
}

.sticker-book {
    background-position: 100% 0;
}

.sticker-dove {
    background-position: 0 100%;
}

.sticker-star {
    background-position: 33.333% 100%;
}

.sticker-feather {
    background-position: 66.667% 100%;
}

.sticker-option-art {
    width: 42px;
    height: 56px;
    margin-inline: auto;
}

.sticker-none {
    min-height: 56px;
    display: grid;
    place-items: center;
}

.letter-preview,
.history-letter-content,
.letter-content,
.reply-focus-content,
.reply-original-content,
.letter-confirm-preview {
    position: relative;
}

.letter-sticker {
    position: absolute;
    inset-block-start: 15px;
    inset-inline-start: 17px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(23, 50, 74, .12);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .7);
    font-size: 1.35rem;
    box-shadow: 0 5px 16px rgba(23, 50, 74, .07);
}

.modal-open {
    overflow: hidden;
}

.letter-confirm-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(10, 28, 42, .58);
    backdrop-filter: blur(4px);
}

.letter-confirm-dialog {
    width: min(100%, 780px);
    max-height: min(88vh, 860px);
    display: grid;
    gap: 18px;
    padding: 25px;
    overflow: auto;
    border-radius: 18px;
    background: #fffdfa;
    box-shadow: 0 30px 80px rgba(5, 19, 30, .3);
}

.letter-confirm-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.letter-confirm-heading h2,
.letter-confirm-heading p {
    margin: 0;
}

.letter-confirm-heading h2 {
    font-family: "Amiri", serif;
    font-size: 2rem;
}

.letter-confirm-heading p {
    color: var(--muted);
}

.letter-confirm-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--soft);
    color: var(--navy);
    font-size: 1.6rem;
    cursor: pointer;
}

.letter-confirm-preview {
    min-height: 260px;
    padding: 34px 38px;
    border: 1px solid #ded5c5;
    border-radius: 14px;
    line-height: 2.05;
    overflow-wrap: anywhere;
}

.letter-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.focused-experience-panel {
    width: 100%;
    min-height: 0;
    align-content: stretch;
}

.account-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.account-counts {
    margin: 0;
    padding: 18px 0;
    border-block: 1px solid var(--line);
}

.compact-profile-grid {
    max-width: 760px;
}

/* Editor and private-profile polish */

.composer-stage {
    width: min(calc(100% - 24px), 1400px);
    margin: 46px auto 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 330px);
    gap: 24px;
    align-items: start;
}

body[data-page="home"] #memberHome > .shell {
    width: min(calc(100% - 36px), 1500px);
    max-width: none;
}

body[data-page="home"] .composer-stage > .composer {
    width: 100%;
    margin: 0;
}

.composer-workspace {
    display: block;
}

.composer-customization {
    position: static;
    display: grid;
    gap: 16px;
    padding: 18px;
    max-height: none;
    overflow: visible;
    border: 1px solid #e0eaee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(12, 74, 110, .045);
}

.composer-stage .composer-policy {
    margin: 18px 0 0;
    padding-inline: 2px;
    line-height: 1.75;
}

.customization-preview-note {
    margin: 0;
    padding: 13px 15px;
    border: 1px solid #dfd4bd;
    border-radius: 12px;
    background: var(--soft);
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.75;
}

.composer-customization .stationery-picker,
.composer-customization .sticker-picker {
    grid-column: auto;
    padding: 18px;
}

.composer-customization .stationery-options,
.composer-customization .sticker-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.composer-customization .stationery-options label,
.composer-customization .sticker-options label {
    min-height: 70px;
}

.toolbar-colors button {
    box-sizing: border-box;
}

.rich-toolbar .toolbar-colors button.is-active,
.rich-toolbar .toolbar-colors button[aria-pressed="true"] {
    border-color: #fff;
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    background: var(--swatch);
    box-shadow: 0 0 0 1px #fff;
}

.custom-color-control.is-active {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.custom-color-control span {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.custom-color-control span::before,
.custom-color-control span::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transform: translate(-50%, -50%);
}

.custom-color-control span::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.letter-preview:has(.letter-sticker),
.history-letter-content:has(.letter-sticker),
.letter-content:has(.letter-sticker),
.reply-focus-content:has(.letter-sticker),
.reply-original-content:has(.letter-sticker),
.letter-confirm-preview:has(.letter-sticker) {
    padding-block-start: 118px;
}

.letter-sticker {
    inset: 16px auto auto 22px;
    width: 78px;
    height: 104px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    line-height: 1;
    box-shadow: none;
    filter: drop-shadow(0 7px 6px rgba(23, 50, 74, .14));
    transform: rotate(-5deg);
    pointer-events: none;
    z-index: 2;
}

.letter-confirm-close {
    display: grid;
    place-items: center;
    padding: 0;
    font-family: Tahoma, Arial, sans-serif;
    line-height: 1;
}

.account-settings-panel .profile-form {
    display: grid;
    gap: 22px;
}

.account-settings-panel .profile-grid {
    align-items: end;
}

.account-settings-panel .compact-account-fields {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.account-settings-panel .compact-account-fields .field {
    min-width: 0;
    margin-top: 0;
}

.account-settings-panel .compact-account-fields .field > span,
.account-settings-panel .profile-join-reason > span {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font-size: .88rem;
    font-weight: 700;
}

.account-settings-panel .compact-account-fields input,
.account-settings-panel .compact-account-fields select {
    min-height: 44px;
    padding-block: 8px;
}

.account-settings-panel .profile-join-reason {
    margin-top: 0;
}

.account-settings-panel .profile-join-reason textarea {
    min-height: 112px;
    line-height: 1.75;
}

@media (max-width: 1120px) {
    .composer-stage {
        grid-template-columns: 1fr;
    }

    .composer-customization {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .composer-customization .stationery-options,
    .composer-customization .sticker-options {
        grid-template-columns: repeat(4, minmax(70px, 1fr));
    }
}

@media (max-width: 900px) {

    .sticker-options {
        grid-template-columns: repeat(4, minmax(70px, 1fr));
    }
}

@media (max-width: 680px) {
    .rich-letter-layout {
        width: min(calc(100% - 12px), 1240px);
    }

    .rich-editor {
        min-height: 390px;
        padding: 25px 20px;
    }

    .sticker-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .composer-customization .stationery-options,
    .composer-customization .sticker-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .letter-confirm-dialog {
        padding: 18px;
    }

    .letter-confirm-preview {
        padding: 27px 20px;
    }

    .emoji-picker-grid {
        grid-template-columns: repeat(7, minmax(30px, 1fr));
    }

    .account-settings-panel .compact-account-fields {
        grid-template-columns: 1fr;
    }
}

/* Keep V7 branding and stamp treatment after legacy release overrides. */

.site-header .brand {
    position: relative;
    min-height: 68px;
}

.site-header .brand .brand-mark-crop {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    background-image: url("/assets/maktoobly-official-logo.png");
    background-position: center;
    background-size: contain;
}

.sticker-options label {
    position: relative;
    background: #fffdf8;
    border: 2px dashed #b88e55;
    box-shadow: 0 0 0 3px #fffdf8,
                0 0 0 4px #e0caa7;
}

.sticker-options label:has(input:checked) {
    border-color: var(--ocean);
    box-shadow: 0 0 0 3px #f8fcfd,
                0 0 0 5px var(--ocean);
}

@media (max-width: 760px) {
    .site-header .brand,
    .site-header .brand .brand-mark-crop {
        min-height: 56px;
    }

    .site-header .brand .brand-mark-crop {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
}

/* V8 cascade seal: keep the approved header and landing proportions. */

.site-header .brand,
.site-header .brand .brand-mark-crop {
    min-height: 58px;
}

.site-header .brand .brand-mark-crop {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}

.landing-hero {
    min-height: 610px;
    padding-block: 82px 60px;
}

.landing-hero-layout {
    max-width: 1312px;
    grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr);
}

.landing-hero h1 {
    font-size: clamp(2.8rem, 4.5vw, 4.25rem);
    line-height: 1.28;
}

.landing-hero .hero-copy {
    max-width: 610px;
    margin-top: 21px;
    font-size: 1.08rem;
    line-height: 1.95;
}

@media (max-width: 840px) {
    .site-header .brand,
    .site-header .brand .brand-mark-crop {
        min-height: 54px;
    }

    .site-header .brand .brand-mark-crop {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .landing-hero {
        min-height: 0;
        padding-block: 54px 44px;
    }

    .landing-hero-layout {
        grid-template-areas: "content" "illustration";
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .landing-hero h1 {
        font-size: clamp(2.45rem, 10vw, 3.4rem);
    }
}

/* V8.3 stakeholder source fidelity for the public home. */

body[data-page="home"] .public-site-header .brand {
    min-height: 48px;
    gap: 10px;
    margin: 0;
}

body[data-page="home"] .public-site-header .brand .brand-mark-crop {
    width: 42px;
    height: 42px;
    min-height: 42px;
    flex-basis: 42px;
    background-image: url("/assets/favicon-mark.png");
}

@media (max-width: 840px) {
    body[data-page="home"] .public-site-header .brand {
        min-height: 50px;
    }

    body[data-page="home"] .public-site-header .brand .brand-mark-crop {
        width: 40px;
        height: 40px;
        min-height: 40px;
        flex-basis: 40px;
    }
}

/* V8.4.1 compact stakeholder header and footer correction. */

body[data-page="home"] .public-site-header {
    border-bottom-color: #e8e4dc;
    background: rgba(250, 249, 246, .98);
}

body[data-page="home"] .public-site-header .header-inner {
    width: calc(100% - 48px);
    max-width: none;
    min-height: 82px;
    gap: 24px;
}

body[data-page="home"] .public-site-header .public-nav {
    gap: clamp(20px, 1.7vw, 34px);
}

body[data-page="home"] .public-site-header .public-nav a,
body[data-page="home"] .public-site-header .public-nav-trigger {
    color: var(--navy);
    font-size: .96rem;
    font-weight: 700;
}

body[data-page="home"] .public-site-header .public-nav-trigger {
    color: #5c6470;
}

body[data-page="home"] .public-site-header .brand {
    min-height: 46px;
    gap: 8px;
}

body[data-page="home"] .public-site-header .brand .brand-mark-crop {
    width: 39px;
    height: 31px;
    min-height: 31px;
    flex-basis: 39px;
    background-image: url("/assets/favicon-mark.png");
    background-position: center;
    background-size: contain;
}

body[data-page="home"] .public-site-header .brand-name {
    width: 75px;
    height: 24px;
    display: block;
    overflow: hidden;
    background: url("/assets/maktoobly-official-logo.png") -51px -93px / 174px 176px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

body[data-page="home"] #guestActions {
    gap: 14px;
}

body[data-page="home"] #guestActions .header-login {
    padding-inline: 4px;
    font-size: .92rem;
}

body[data-page="home"] #guestActions .header-cta {
    min-height: 50px;
    padding-inline: 24px !important;
    border-radius: 11px;
    font-size: .92rem;
}

body[data-page="home"] #memberActions {
    gap: 14px;
}

body[data-page="home"] #memberActions .header-login,
body[data-page="home"] #memberActions .header-cta {
    font-size: .9rem;
}

body[data-page="home"] #memberActions .header-cta {
    min-height: 48px;
    padding-inline: 22px !important;
    border-radius: 11px;
}

body[data-page="home"] .landing-footer {
    padding-block: 30px 24px;
}

body[data-page="home"] .landing-footer-inner {
    width: min(calc(100% - 64px), 1120px);
    max-width: none;
}

body[data-page="home"] .landing-footer-main {
    grid-template-columns: minmax(260px, 1fr) 160px 100px;
    gap: 48px;
}

body[data-page="home"] .landing-footer-brand {
    gap: 7px;
    min-height: 30px;
}

body[data-page="home"] .landing-footer-mark {
    width: 28px;
    height: 23px;
    flex: 0 0 28px;
    background-image: url("/assets/favicon-mark.png");
}

body[data-page="home"] .landing-footer-wordmark {
    width: 56px;
    height: 18px;
    display: block;
    overflow: hidden;
    background: url("/assets/maktoobly-official-logo.png") -38px -69px / 129px 131px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

body[data-page="home"] .landing-footer-brand-block p {
    max-width: 310px;
    margin-top: 12px;
    font-size: .82rem;
    line-height: 1.9;
}

body[data-page="home"] .landing-footer-links,
body[data-page="home"] .landing-footer-social {
    gap: 11px;
}

body[data-page="home"] .landing-footer-links strong,
body[data-page="home"] .landing-footer-social strong {
    font-size: .82rem;
}

body[data-page="home"] .landing-footer-links .footer-link {
    font-size: .84rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body[data-page="home"] .landing-footer-social-link {
    width: 26px;
    height: 26px;
    color: var(--blue);
}

body[data-page="home"] .landing-footer-social-link svg {
    width: 20px;
    height: 20px;
}

body[data-page="home"] .landing-footer .footer-note {
    margin-top: 30px;
    padding-top: 20px;
    font-size: .8rem;
}

body[data-page="home"] .landing-footer-bottom {
    margin-top: 14px;
    font-size: .78rem;
}

@media (max-width: 1180px) and (min-width: 841px) {
    body[data-page="home"] .public-site-header .header-inner {
        width: calc(100% - 36px);
        gap: 18px;
    }

    body[data-page="home"] .public-site-header .public-nav {
        gap: 13px;
    }

    body[data-page="home"] .public-site-header .public-nav a,
    body[data-page="home"] .public-site-header .public-nav-trigger,
    body[data-page="home"] #guestActions .header-login,
    body[data-page="home"] #guestActions .header-cta {
        font-size: .82rem;
    }

    body[data-page="home"] #guestActions {
        gap: 13px;
    }

    body[data-page="home"] #guestActions .header-cta {
        min-height: 46px;
        padding-inline: 18px !important;
    }

    body[data-page="home"] #memberActions {
        gap: 12px;
    }

    body[data-page="home"] #memberActions .header-login,
    body[data-page="home"] #memberActions .header-cta {
        font-size: .82rem;
    }

    body[data-page="home"] #memberActions .header-cta {
        min-height: 44px;
        padding-inline: 18px !important;
    }

    body[data-page="home"] .public-site-header .brand {
        gap: 7px;
    }

    body[data-page="home"] .public-site-header .brand .brand-mark-crop {
        width: 34px;
        height: 27px;
        min-height: 27px;
        flex-basis: 34px;
    }

    body[data-page="home"] .public-site-header .brand-name {
        width: 65px;
        height: 21px;
        background-position: -44px -81px;
        background-size: 151px 153px;
    }
}

@media (max-width: 840px) {
    body[data-page="home"] .public-site-header .header-inner {
        width: calc(100% - 28px);
        min-height: 68px;
        gap: 8px 14px;
        padding-block: 5px;
    }

    body[data-page="home"] .public-site-header .brand {
        min-height: 44px;
        gap: 7px;
    }

    body[data-page="home"] .public-site-header .brand .brand-mark-crop {
        width: 34px;
        height: 27px;
        min-height: 27px;
        flex-basis: 34px;
    }

    body[data-page="home"] .public-site-header .brand-name {
        width: 65px;
        height: 21px;
        background-position: -44px -81px;
        background-size: 151px 153px;
    }

    body[data-page="home"] .public-site-header .header-nav {
        padding-block: 10px 4px;
    }

    body[data-page="home"] .public-site-header .public-nav a,
    body[data-page="home"] .public-site-header .public-nav-trigger {
        font-size: .9rem;
    }

    body[data-page="home"] #guestActions {
        gap: 8px;
        padding-bottom: 14px;
    }

    body[data-page="home"] #guestActions .header-cta {
        min-height: 44px;
        padding-inline: 20px !important;
    }

    body[data-page="home"] #memberActions {
        gap: 8px;
        padding-bottom: 14px;
    }

    body[data-page="home"] #memberActions .header-cta {
        min-height: 44px;
        padding-inline: 20px !important;
    }

    body[data-page="home"] .landing-footer-inner {
        width: min(calc(100% - 36px), 1120px);
    }

    body[data-page="home"] .landing-footer-main {
        grid-template-columns: minmax(0, 1fr) 110px 76px;
        gap: 22px;
    }
}

@media (max-width: 620px) {
    body[data-page="home"] .landing-footer {
        padding-block: 30px 24px;
    }

    body[data-page="home"] .landing-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }

    body[data-page="home"] .landing-footer-brand-block {
        grid-column: 1 / -1;
    }

    body[data-page="home"] .landing-footer .footer-note {
        margin-top: 28px;
        padding-top: 20px;
    }

    body[data-page="home"] .landing-footer-bottom {
        gap: 4px;
    }
}

/* V8.5 stakeholder header, full footer, and shared information dialogs. */

body[data-page="home"] .public-site-header .header-inner {
    width: calc(100% - 160px);
    min-height: 72px;
    gap: 18px;
}

body[data-page="home"] .public-site-header .public-nav {
    gap: clamp(24px, 2.2vw, 42px);
}

body[data-page="home"] .public-site-header .public-nav a,
body[data-page="home"] .public-site-header .public-nav-trigger {
    color: #5f6670;
    font-size: .88rem;
    font-weight: 500;
}

body[data-page="home"] .public-site-header .brand {
    min-height: 38px;
    gap: 7px;
}

body[data-page="home"] .public-site-header .brand .brand-mark-crop {
    width: 31px;
    height: 25px;
    min-height: 25px;
    flex-basis: 31px;
}

body[data-page="home"] .public-site-header .brand-name {
    width: 62px;
    height: 20px;
    background-position: -42px -77px;
    background-size: 142px 144px;
}

body[data-page="home"] #guestActions,
body[data-page="home"] #memberActions {
    gap: 18px;
}

body[data-page="home"] #guestActions .header-login,
body[data-page="home"] #memberActions .header-login {
    font-size: .88rem;
}

body[data-page="home"] #guestActions .header-cta,
body[data-page="home"] #memberActions .header-cta {
    min-height: 44px;
    padding-inline: 22px !important;
    border-radius: 10px;
    font-size: .88rem;
}

body[data-page="home"] .landing-footer {
    border-top: 0;
    padding-block: 52px 28px;
}

body[data-page="home"] .landing-footer-inner {
    width: min(calc(100% - 96px), 1360px);
}

body[data-page="home"] .landing-footer-main {
    grid-template-columns: minmax(280px, 1.35fr) repeat(4, minmax(110px, .8fr));
    gap: clamp(44px, 4.5vw, 92px);
}

body[data-page="home"] .landing-footer-group {
    gap: 10px;
}

body[data-page="home"] .landing-footer-group strong {
    margin-bottom: 3px;
    color: var(--navy);
    font-size: .82rem;
    font-weight: 800;
}

body[data-page="home"] .landing-footer-group .footer-link {
    width: fit-content;
    border: 0;
    padding: 0;
    color: #8b93a0;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.65;
    text-align: start;
    text-decoration: none;
}

body[data-page="home"] .landing-footer-group button.footer-link:hover,
body[data-page="home"] .landing-footer-group button.footer-link:focus-visible,
body[data-page="home"] .landing-footer-group a.footer-link:hover,
body[data-page="home"] .landing-footer-group a.footer-link:focus-visible {
    color: var(--navy);
}

body[data-page="home"] .landing-footer-bottom {
    margin-top: 54px;
    padding-top: 22px;
    border-top: 1px solid #e8e3d8;
    font-size: .78rem;
}

.info-modal-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.info-modal-content {
    min-height: 0;
    max-height: min(82vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 34px;
    scrollbar-color: rgba(18, 53, 76, .42) transparent;
    scrollbar-width: thin;
}

.info-modal-content::-webkit-scrollbar {
    width: 8px;
}

.info-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.info-modal-content::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(18, 53, 76, .42);
    background-clip: padding-box;
}

.info-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(18, 53, 76, .62);
}

.info-modal-content::-webkit-scrollbar-button {
    display: none;
}

.info-modal-panel:has(.legal-copy) .info-modal-content {
    padding: 0 44px 42px;
    scrollbar-color: rgba(18, 53, 76, .42) transparent;
    scrollbar-width: thin;
}

@media (max-width: 1180px) and (min-width: 841px) {
    body[data-page="home"] .public-site-header .header-inner {
        width: calc(100% - 48px);
        min-height: 68px;
        gap: 14px;
    }

    body[data-page="home"] .public-site-header .public-nav {
        gap: 16px;
    }

    body[data-page="home"] .landing-footer-main {
        gap: 32px;
    }
}

@media (max-width: 840px) {
    body[data-page="home"] .public-site-header .header-inner {
        width: calc(100% - 28px);
        min-height: 60px;
        padding-block: 4px;
    }

    body[data-page="home"] .public-site-header .brand {
        min-height: 36px;
    }

    body[data-page="home"] .public-site-header .brand .brand-mark-crop {
        width: 29px;
        height: 23px;
        min-height: 23px;
        flex-basis: 29px;
    }

    body[data-page="home"] .public-site-header .brand-name {
        width: 58px;
        height: 19px;
        background-position: -39px -72px;
        background-size: 133px 135px;
    }

    body[data-page="home"] .landing-footer-inner {
        width: min(calc(100% - 36px), 760px);
    }

    body[data-page="home"] .landing-footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 22px;
    }

    body[data-page="home"] .landing-footer-brand-block {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    body[data-page="home"] .landing-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    body[data-page="home"] .landing-footer-brand-block {
        grid-column: 1 / -1;
    }

    body[data-page="home"] .landing-footer-bottom {
        margin-top: 34px;
    }

    .info-modal {
        padding: 10px;
    }

    .info-modal-content {
        max-height: 88vh;
        padding: 28px 20px 24px;
    }

    .info-modal-panel:has(.legal-copy) .info-modal-content {
        padding: 0 22px 28px;
    }
}

/* V8.6 public refinement: auth dialogs, intentional scrolling, and Adab. */

body[data-page="home"] #guestActions .header-cta {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

body[data-page="home"] .public-site-header .brand-name {
    height: 18px;
    background-position: -42px -77px;
}

body[data-page="home"] .landing-footer-wordmark {
    height: 17px;
}

.info-modal-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.info-modal-content::-webkit-scrollbar,
.info-modal-content::-webkit-scrollbar-track,
.info-modal-content::-webkit-scrollbar-thumb,
.info-modal-content::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

.info-modal-scroll {
    position: absolute;
    z-index: 4;
    top: 58px;
    bottom: 18px;
    left: 9px;
    width: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(22, 50, 74, .08);
    pointer-events: none;
}

.info-modal-scroll-thumb {
    display: block;
    width: 100%;
    min-height: 44px;
    border-radius: inherit;
    background: rgba(49, 95, 125, .48);
    transition: background-color .18s ease;
    will-change: transform;
}

.info-modal-content > .modal-source {
    width: 100%;
    margin: 0;
}

.info-modal[data-modal-kind="login"] .info-modal-panel,
.info-modal[data-modal-kind="register"] .info-modal-panel {
    width: min(calc(100vw - 32px), 590px);
    max-height: min(90vh, 850px);
    border-radius: 18px;
}

.info-modal[data-modal-kind="register"] .info-modal-panel {
    width: min(calc(100vw - 32px), 640px);
}

.info-modal[data-modal-kind="login"] .info-modal-content,
.info-modal[data-modal-kind="register"] .info-modal-content {
    max-height: min(90vh, 850px);
    padding: 0;
}

.auth-modal-source {
    padding: 48px 46px 40px;
    background: #fffdf8;
}

.auth-modal-source h1 {
    margin: 0 0 8px;
    padding-inline-end: 0 !important;
    color: var(--navy);
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
    line-height: 1.35;
}

.auth-modal-source .auth-intro {
    margin: 0 0 26px;
}

.auth-modal-source .field {
    margin-top: 18px;
}

.auth-modal-source .actions {
    margin-top: 26px;
}

.auth-modal-source .form-help {
    margin-top: 15px;
}

.auth-modal-source .check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-top: 13px;
}

.auth-modal-source .check input {
    margin-top: 7px;
}

.auth-modal-source a:not(.button) {
    text-underline-offset: 3px;
}

.info-modal-panel:has(.adab-story) {
    width: min(calc(100vw - 48px), 1040px);
    max-height: min(90vh, 900px);
    border-radius: 18px;
}

.info-modal-panel:has(.adab-story) .info-modal-content {
    max-height: min(90vh, 900px);
    padding: 0;
}

.adab-page {
    background: #faf9f6;
}

.adab-story {
    --adab-ink: #16324a;
    --adab-soft-ink: #536b79;
    --adab-paper: #faf9f6;
    --adab-warm: #f1ead9;
    --adab-border: #ded5c3;
    --adab-accent: #6f9eb9;
    --adab-seal: #7a3e3f;
    position: relative;
    overflow: hidden;
    background: var(--adab-paper);
    color: var(--adab-ink);
}

.adab-wrap {
    width: min(calc(100% - 48px), 920px);
    margin-inline: auto;
}

.adab-eyebrow {
    display: block;
    color: var(--adab-seal);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .035em;
}

.adab-eyebrow::before {
    content: "✦";
    margin-inline-end: .55em;
    font-size: .78em;
}

.adab-hero {
    padding-block: 72px 52px;
}

.adab-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(230px, .85fr);
    align-items: center;
    gap: 48px;
}

.adab-hero h1 {
    margin: 12px 0 0;
    color: var(--adab-ink);
    font-size: clamp(2.2rem, 4.8vw, 3.65rem);
    line-height: 1.22;
}

.adab-lede {
    max-width: 54ch;
    margin: 18px 0 0;
    color: var(--adab-soft-ink);
    font-size: 1.02rem;
    line-height: 2;
}

.adab-envelope {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--adab-border);
    border-radius: 8px;
    background: var(--adab-warm);
    box-shadow: 0 20px 42px -30px rgba(22, 50, 74, .45);
}

.adab-envelope::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 58%;
    background: rgba(255, 253, 248, .7);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.adab-stamp-corner {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    width: 62px;
    height: 76px;
    border: 1px solid var(--adab-border);
    background: #fffdf8;
}

.adab-stamp-corner::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(122, 62, 63, .55);
}

.adab-postmark {
    position: absolute;
    bottom: 14px;
    left: 16px;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 2px solid var(--adab-soft-ink);
    border-radius: 50%;
    color: var(--adab-soft-ink);
    font-size: .6rem;
    line-height: 1.25;
    text-align: center;
    opacity: .38;
    transform: rotate(-14deg);
}

.adab-seal-dot {
    position: absolute;
    right: 22px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ad6663, var(--adab-seal));
    color: var(--adab-warm);
    font-family: "Amiri", serif;
    font-size: 1.1rem;
}

.adab-perf {
    width: min(100%, 920px);
    height: 14px;
    margin-inline: auto;
    border-top: 1px dashed var(--adab-border);
    background-image: radial-gradient(circle at 7px 7px, var(--adab-paper) 5px, transparent 5.5px);
    background-position: center;
    background-repeat: repeat-x;
    background-size: 20px 14px;
}

.adab-section {
    padding-block: 64px;
}

.adab-section-head {
    max-width: 65ch;
    margin-bottom: 34px;
}

.adab-section-head h2,
.adab-cta h2 {
    margin: 9px 0 0;
    color: var(--adab-ink);
    font-size: clamp(1.75rem, 3.1vw, 2.35rem);
    line-height: 1.35;
}

.adab-section-head p,
.adab-cta p {
    margin: 12px 0 0;
    color: var(--adab-soft-ink);
    font-size: .98rem;
    line-height: 1.95;
}

.adab-split,
.adab-benefits,
.adab-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.adab-card,
.adab-compare article {
    padding: 24px;
    border: 1px solid var(--adab-border);
    border-radius: 11px;
    background: var(--adab-warm);
}

.adab-card h3,
.adab-compare h3,
.adab-benefits h3 {
    margin: 0 0 9px;
    color: var(--adab-seal);
    font-size: 1.18rem;
}

.adab-card p,
.adab-compare p,
.adab-gallery p,
.adab-world-grid p,
.adab-stamps p,
.adab-steps p {
    margin: 0;
    color: var(--adab-soft-ink);
    font-size: .91rem;
    line-height: 1.85;
}

.adab-letter {
    margin: 34px 0 0;
    padding: 22px 28px;
    border-inline-start: 3px solid var(--adab-seal);
    background: linear-gradient(90deg, rgba(122, 62, 63, .055), transparent 68%);
    color: var(--adab-ink);
    font-family: "Amiri", serif;
    font-size: 1.3rem;
    line-height: 2;
}

.adab-letter cite {
    display: block;
    margin-top: 10px;
    color: var(--adab-soft-ink);
    font-family: "Tajawal", sans-serif;
    font-size: .78rem;
    font-style: normal;
}

.adab-timeline {
    margin-top: 26px;
    padding-inline-start: 27px;
    border-inline-start: 2px solid var(--adab-border);
}

.adab-t-item {
    position: relative;
    padding-bottom: 29px;
}

.adab-t-item:last-child {
    padding-bottom: 0;
}

.adab-t-item::before {
    content: "";
    position: absolute;
    top: 5px;
    right: -34px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--adab-seal);
    border-radius: 50%;
    background: var(--adab-paper);
}

.adab-t-item > span {
    color: var(--adab-seal);
    font-size: .82rem;
    font-weight: 800;
}

.adab-t-item h3 {
    margin: 3px 0 4px;
    color: var(--adab-ink);
    font-size: 1.16rem;
}

.adab-t-item p {
    max-width: 65ch;
    margin: 0;
    color: var(--adab-soft-ink);
    font-size: .91rem;
    line-height: 1.8;
}

.adab-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px;
    padding: 18px 21px;
    border: 1px solid var(--adab-border);
    border-radius: 10px;
    background: var(--adab-warm);
    color: var(--adab-soft-ink);
}

.adab-callout strong {
    color: var(--adab-seal);
    font-family: "Amiri", serif;
    font-size: 1.3rem;
}

.adab-callout p {
    margin: 0;
}

.adab-world-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
}

.adab-world-grid article {
    padding: 16px 10px 0;
    border-top: 2px solid var(--adab-accent);
}

.adab-world-grid h3,
.adab-gallery h3,
.adab-stamps h3,
.adab-steps h3 {
    margin: 0 0 7px;
    color: var(--adab-ink);
    font-size: 1.02rem;
}

.adab-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.adab-gallery article {
    position: relative;
    min-height: 170px;
    padding: 22px 19px;
    border: 1px solid var(--adab-border);
    border-radius: 8px;
    background: var(--adab-warm);
}

.adab-gallery article::before {
    content: "";
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 25px;
    height: 31px;
    border: 1px dashed rgba(122, 62, 63, .45);
}

.adab-gallery h3 {
    padding-inline-start: 34px;
}

.adab-stamps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.adab-stamps article {
    position: relative;
    padding: 24px 14px;
    border: 1px solid var(--adab-border);
    background: var(--adab-warm);
    text-align: center;
}

.adab-stamps article::before,
.adab-stamps article::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 10px;
    background-image: radial-gradient(circle at 8px 5px, var(--adab-paper) 4px, transparent 4.5px);
    background-repeat: repeat-x;
    background-size: 16px 10px;
}

.adab-stamps article::before {
    top: -5px;
}

.adab-stamps article::after {
    bottom: -5px;
}

.adab-stamps h3 {
    color: var(--adab-seal);
}

.adab-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.adab-steps article {
    padding-inline: 18px;
    border-inline-start: 1px dashed var(--adab-border);
}

.adab-steps article:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.adab-steps article > span {
    color: var(--adab-accent);
    font-family: "Amiri", serif;
    font-size: 2rem;
    line-height: 1;
}

.adab-benefits {
    gap: 36px;
}

.adab-benefits ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adab-benefits li {
    display: flex;
    gap: 10px;
    color: var(--adab-soft-ink);
    font-size: .92rem;
}

.adab-benefits li::before {
    content: "›";
    color: var(--adab-seal);
    font-weight: 800;
}

.adab-postal-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.adab-postal-strip article {
    text-align: center;
}

.adab-postal-strip article > div {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 11px;
    border: 2px solid var(--adab-soft-ink);
    border-radius: 50%;
    color: var(--adab-soft-ink);
    font-family: "Amiri", serif;
    font-size: .8rem;
    line-height: 1.35;
}

.adab-postal-strip strong {
    display: block;
    color: var(--adab-seal);
    font-family: "Tajawal", sans-serif;
    font-size: .72rem;
}

.adab-postal-strip p {
    margin: 0;
    color: var(--adab-soft-ink);
    font-size: .78rem;
    line-height: 1.6;
}

.adab-compare article:first-child {
    border-style: dashed;
    background: transparent;
}

.adab-maktoobly-note {
    margin-top: 32px;
    padding: 28px;
    border: 1px solid var(--adab-border);
    border-radius: 12px;
    background: linear-gradient(160deg, var(--adab-warm), var(--adab-paper));
}

.adab-maktoobly-note h3 {
    margin: 0 0 10px;
    color: var(--adab-ink);
    font-size: 1.35rem;
}

.adab-maktoobly-note p {
    margin: 0;
    color: var(--adab-soft-ink);
    line-height: 1.95;
}

.adab-maktoobly-note p + p {
    margin-top: 13px;
}

.adab-maktoobly-note strong {
    color: var(--adab-seal);
}

.adab-cta {
    padding-block: 70px 82px;
    text-align: center;
}

.adab-cta p {
    max-width: 52ch;
    margin-inline: auto;
}

.adab-cta .button {
    margin-top: 26px;
    border-radius: 999px;
}

.adab-cta .button span {
    color: var(--adab-seal);
    font-size: .72rem;
}

@media (max-width: 840px) {
    body[data-page="home"] .public-site-header .brand-name {
        height: 17px;
        background-position: -39px -72px;
    }

    .adab-hero-layout {
        grid-template-columns: 1fr;
    }

    .adab-envelope {
        width: min(100%, 350px);
        margin-inline: auto;
    }

    .adab-world-grid,
    .adab-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .adab-steps article:nth-child(odd) {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .adab-gallery,
    .adab-stamps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .adab-postal-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 30px;
    }
}

@media (max-width: 620px) {
    .info-modal[data-modal-kind="login"] .info-modal-panel,
    .info-modal[data-modal-kind="register"] .info-modal-panel,
    .info-modal-panel:has(.adab-story) {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 14px;
    }

    .info-modal[data-modal-kind="login"] .info-modal-content,
    .info-modal[data-modal-kind="register"] .info-modal-content,
    .info-modal-panel:has(.adab-story) .info-modal-content {
        max-height: calc(100vh - 20px);
    }

    .auth-modal-source {
        padding: 42px 22px 28px;
    }

    .info-modal-scroll {
        top: 53px;
        bottom: 13px;
        left: 6px;
        width: 3px;
    }

    .adab-wrap {
        width: min(calc(100% - 32px), 920px);
    }

    .adab-hero {
        padding-block: 58px 42px;
    }

    .adab-section {
        padding-block: 48px;
    }

    .adab-split,
    .adab-benefits,
    .adab-compare,
    .adab-world-grid,
    .adab-gallery,
    .adab-stamps,
    .adab-steps {
        grid-template-columns: 1fr;
    }

    .adab-steps article,
    .adab-steps article:nth-child(odd) {
        padding-inline: 0 16px;
        border-inline-start: 0;
        border-inline-end: 2px solid var(--adab-border);
    }

    .adab-postal-strip {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding-bottom: 12px;
        scrollbar-width: none;
    }

    .adab-postal-strip::-webkit-scrollbar {
        display: none;
    }

    .adab-postal-strip article {
        flex: 0 0 130px;
    }
}

/* V8.7 editorial destinations, single modal scroller, and restrained reveals. */

.info-modal-panel .info-modal-content,
.info-modal-panel:has(.legal-copy) .info-modal-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.info-modal-panel .info-modal-content::-webkit-scrollbar,
.info-modal-panel:has(.legal-copy) .info-modal-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.info-modal-scroll {
    top: 62px;
    bottom: 22px;
    left: 12px;
    width: 3px;
    background: transparent;
}

.info-modal-scroll-thumb {
    min-height: 52px;
    background: rgba(49, 95, 125, .46);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}

body.editorial-page {
    background: #faf9f6;
}

body.editorial-page .site-header {
    background: rgba(250, 249, 246, .94);
    backdrop-filter: blur(12px);
}

.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .72s cubic-bezier(.22, 1, .36, 1),
        transform .72s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready [data-reveal="scale"] {
    transform: translateY(18px) scale(.975);
}

.reveal-ready [data-reveal="fade"] {
    transform: none;
}

.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.adab-hero-copy {
    opacity: 0;
    animation: editorial-copy-arrive .78s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}

.adab-envelope {
    opacity: 0;
    animation: editorial-object-arrive .82s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

.selections-page,
.selections-story {
    background: #faf9f6;
}

.selections-story {
    --selection-ink: #16324a;
    --selection-copy: #536b79;
    --selection-paper: #fffdf8;
    --selection-warm: #f2ecde;
    --selection-border: #dfd6c4;
    --selection-accent: #6f9eb9;
    --selection-seal: #7a3e3f;
    position: relative;
    overflow: hidden;
    color: var(--selection-ink);
}

.selections-wrap,
.selections-back {
    width: min(calc(100% - 48px), 1040px);
    margin-inline: auto;
}

.selections-back {
    display: block;
    padding-top: 26px;
}

.selections-hero {
    padding-block: 70px 84px;
    background:
        radial-gradient(circle at 18% 20%, rgba(111, 158, 185, .12), transparent 30%),
        linear-gradient(180deg, #faf9f6 0%, #f5f0e6 100%);
}

.selections-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
    align-items: center;
    gap: clamp(50px, 8vw, 100px);
}

.selections-hero-copy {
    opacity: 0;
    animation: editorial-copy-arrive .78s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}

.selections-eyebrow {
    color: var(--selection-seal);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.selections-hero h1,
.selections-cta h2 {
    margin: 12px 0 18px;
    color: var(--selection-ink);
    font-family: "Amiri", serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1.13;
}

.selections-hero p {
    max-width: 58ch;
    margin: 0;
    color: var(--selection-copy);
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 2;
}

.selections-letter-stack {
    position: relative;
    min-height: 300px;
    opacity: 0;
    animation: editorial-object-arrive .82s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

.selection-sheet {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 220px;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--selection-border);
    border-radius: 4px;
    background: var(--selection-paper);
    box-shadow: 0 20px 50px rgba(22, 50, 74, .1);
}

.selection-sheet::before,
.selection-sheet::after {
    content: "";
    position: absolute;
    inset-inline: 28px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--selection-accent) 0 28px, transparent 28px 37px);
    opacity: .55;
}

.selection-sheet::before {
    top: 43%;
}

.selection-sheet::after {
    top: 55%;
}

.selection-sheet-back {
    transform: translate(-58%, -52%) rotate(-10deg);
}

.selection-sheet-middle {
    transform: translate(-44%, -51%) rotate(7deg);
}

.selection-sheet-front {
    display: grid;
    place-items: end start;
    padding: 20px;
    transform: translate(-50%, -50%) rotate(-1deg);
}

.selection-sheet-front i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ad6663, var(--selection-seal));
    color: #fff8e9;
    font-family: "Amiri", serif;
    font-size: 1.35rem;
    font-style: normal;
    box-shadow: 0 4px 12px rgba(69, 34, 35, .22);
}

.selections-intro {
    padding-block: 52px 20px;
    text-align: center;
}

.selections-intro .editorial-note {
    max-width: 780px;
    margin: 0 auto 22px;
}

.selections-intro > .selections-wrap > p:last-child {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--selection-copy);
    line-height: 1.9;
}

.selections-showcase {
    padding-block: 46px 94px;
}

.selections-showcase .selections-wrap {
    display: grid;
    gap: 48px;
}

.selection-letter {
    position: relative;
    width: min(100%, 790px);
    padding: clamp(34px, 5vw, 58px);
    border: 1px solid var(--selection-border);
    border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 0 39px, rgba(122, 62, 63, .1) 39px 40px, transparent 40px),
        repeating-linear-gradient(180deg, transparent 0 38px, rgba(111, 158, 185, .09) 38px 39px),
        var(--selection-paper);
    box-shadow: 0 22px 60px rgba(22, 50, 74, .08);
}

.selection-letter:nth-child(even) {
    margin-inline-start: auto;
    transform-origin: 100% 50%;
}

.selection-letter:nth-child(odd) {
    margin-inline-end: auto;
    transform-origin: 0 50%;
}

.selection-letter::after {
    content: "";
    position: absolute;
    left: 34px;
    bottom: 30px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(122, 62, 63, .28);
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px var(--selection-paper), inset 0 0 0 6px rgba(122, 62, 63, .16);
}

.selection-index {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--selection-seal);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.selection-letter blockquote {
    margin: 0;
    color: var(--selection-ink);
    font-family: "Amiri", serif;
    font-size: clamp(1.28rem, 2.5vw, 1.72rem);
    line-height: 2.05;
    white-space: pre-line;
}

.selections-cta {
    padding-block: 76px 90px;
    border-top: 1px dashed var(--selection-border);
    background: var(--selection-warm);
    text-align: center;
}

.selections-cta h2 {
    font-size: clamp(2.35rem, 5vw, 3.8rem);
}

.selections-cta p {
    margin: 0 auto;
    color: var(--selection-copy);
}

.selections-cta .button {
    margin-top: 26px;
    border-radius: 999px;
}

@keyframes editorial-copy-arrive {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes editorial-object-arrive {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 840px) {
    .selections-hero-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .selections-letter-stack {
        min-height: 250px;
    }

    .selection-sheet {
        width: 185px;
    }
}

@media (max-width: 620px) {
    .info-modal-scroll {
        top: 56px;
        bottom: 16px;
        left: 7px;
    }

    .selections-wrap,
    .selections-back {
        width: min(calc(100% - 32px), 1040px);
    }

    .selections-hero {
        padding-block: 50px 58px;
    }

    .selections-showcase {
        padding-block: 36px 66px;
    }

    .selections-showcase .selections-wrap {
        gap: 28px;
    }

    .selection-letter {
        padding: 30px 26px 54px;
        background:
            repeating-linear-gradient(180deg, transparent 0 38px, rgba(111, 158, 185, .08) 38px 39px),
            var(--selection-paper);
    }

    .selection-letter::after {
        left: 24px;
        bottom: 18px;
    }

    .selection-letter blockquote {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adab-hero-copy,
    .adab-envelope,
    .selections-hero-copy,
    .selections-letter-stack {
        opacity: 1;
        animation: none;
    }

    .reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* V8.8 authenticated workspace continuity and session-aware editorial calls to action. */

body[data-page="home"] #memberActions a,
.member-site-header a {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

body[data-page="home"] #memberActions {
    gap: 16px;
}

body[data-page="home"] #memberActions .header-login {
    padding-inline: 2px;
}

.member-site-header {
    border-bottom-color: #e8e4dc;
    background: rgba(250, 249, 246, .98);
}

.member-site-header .header-inner {
    width: calc(100% - 160px);
    max-width: none;
    min-height: 72px;
    gap: 18px;
}

.member-site-header .workspace-nav {
    order: 1;
    gap: clamp(10px, 1.25vw, 20px);
}

.member-site-header .member-header-actions {
    order: 2;
    margin-inline-start: auto;
}

.member-site-header .brand {
    order: 3;
    min-height: 38px;
    gap: 7px;
    margin: 0;
}

.member-site-header .brand .brand-mark-crop {
    width: 31px;
    height: 25px;
    min-height: 25px;
    flex: 0 0 31px;
    background-image: url("/assets/favicon-mark.png");
    background-position: center;
    background-size: contain;
}

.member-site-header .brand-name {
    width: 62px;
    height: 18px;
    display: block;
    overflow: hidden;
    background: url("/assets/maktoobly-official-logo.png") -42px -77px / 142px 144px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.member-site-header .workspace-nav-link {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #5f6670;
    font-size: .88rem;
    font-weight: 600;
}

.member-site-header .workspace-nav-link:hover,
.member-site-header .workspace-nav-link:focus-visible,
.member-site-header .workspace-nav-link[aria-current="page"]:not(.workspace-primary-link) {
    border-color: #e4ded2;
    background: #f4efe5;
    color: var(--navy);
}

.member-site-header .workspace-primary-link,
.member-site-header .workspace-primary-link:hover,
.member-site-header .workspace-primary-link:focus-visible,
.member-site-header .workspace-primary-link[aria-current="page"] {
    min-height: 42px;
    padding-inline: 19px;
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
    font-weight: 800;
}

.member-site-header .member-account-link {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--navy);
    font-size: .86rem;
    font-weight: 700;
}

.member-site-header .member-account-link:hover,
.member-site-header .member-account-link:focus-visible,
.member-site-header .member-account-link[aria-current="page"] {
    border-color: #d8d2c6;
    background: #fffdf8;
}

.member-site-header .badge {
    min-width: 18px;
    height: 18px;
    font-size: .68rem;
}

body[data-page="write"] .compose-page-heading {
    margin-bottom: 26px;
}

@media (max-width: 1180px) and (min-width: 841px) {
    .member-site-header .header-inner {
        width: calc(100% - 48px);
        min-height: 68px;
        gap: 14px;
    }

    .member-site-header .workspace-nav {
        gap: 7px;
    }
}

@media (max-width: 840px) {
    .member-site-header .header-inner {
        width: calc(100% - 28px);
        min-height: 60px;
        padding-block: 4px;
    }

    .member-site-header .brand {
        order: 1;
        min-height: 36px;
    }

    .member-site-header .brand .brand-mark-crop {
        width: 29px;
        height: 23px;
        min-height: 23px;
        flex-basis: 29px;
    }

    .member-site-header .brand-name {
        width: 58px;
        height: 17px;
        background-position: -39px -72px;
        background-size: 133px 135px;
    }

    .member-site-header .nav-toggle {
        order: 2;
    }

    .member-site-header .workspace-nav {
        order: 3;
        gap: 2px;
    }

    .member-site-header .member-header-actions {
        order: 4;
        margin-inline-start: 0;
        padding-top: 2px;
        border-top: 1px solid var(--line);
    }

    .member-site-header .workspace-nav-link,
    .member-site-header .workspace-primary-link,
    .member-site-header .member-account-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 42px;
        padding: 9px 10px;
    }

    .member-site-header .workspace-primary-link {
        width: fit-content;
        padding-inline: 18px;
    }
}

/* V8.9 unified site chrome and tactile letter presentation. */

.unified-site-header {
    border-bottom-color: #e8e4dc;
    background: rgba(250, 249, 246, .98);
}

.unified-site-header .header-inner {
    width: calc(100% - 160px);
    max-width: none;
    min-height: 72px;
    gap: 18px;
}

.unified-site-header .public-nav {
    order: 1;
    gap: clamp(24px, 2.2vw, 42px);
}

.unified-site-header .public-nav a,
.unified-site-header .public-nav-trigger {
    color: #5f6670;
    font-size: .88rem;
    font-weight: 500;
}

.unified-site-header .header-actions {
    order: 2;
    margin-inline-start: auto;
}

.unified-site-header .brand {
    order: 3;
    min-height: 38px;
    gap: 7px;
    margin: 0;
}

.unified-site-header .brand .brand-mark-crop {
    width: 31px;
    height: 25px;
    min-height: 25px;
    flex: 0 0 31px;
    background-image: url("/assets/favicon-mark.png");
    background-position: center;
    background-size: contain;
}

.unified-site-header .brand-name {
    width: 62px;
    height: 18px;
    display: block;
    overflow: hidden;
    background: url("/assets/maktoobly-official-logo.png") -42px -77px / 142px 144px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.unified-member-actions {
    gap: 16px;
}

.unified-member-actions a {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.unified-member-actions .header-login,
.unified-member-actions .header-cta {
    font-size: .88rem;
}

.unified-member-actions .header-login {
    padding-inline: 2px;
}

.unified-member-actions .header-login[aria-current="page"] {
    color: var(--blue);
}

.unified-member-actions .header-cta {
    min-height: 44px;
    padding-inline: 22px !important;
    border-radius: 10px;
}

.member-account-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid #d8d2c6;
    border-radius: 50%;
    background: #fffdf8;
    color: var(--navy);
}

.member-account-icon:hover,
.member-account-icon:focus-visible,
.member-account-icon[aria-current="page"] {
    border-color: var(--navy);
    background: #f2eee5;
}

.member-account-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.unified-site-footer {
    border-top: 0;
    padding-block: 52px 28px;
}

.unified-site-footer .landing-footer-inner {
    width: min(calc(100% - 96px), 1360px);
    max-width: none;
}

.unified-site-footer .landing-footer-main {
    grid-template-columns: minmax(280px, 1.35fr) repeat(4, minmax(110px, .8fr));
    gap: clamp(44px, 4.5vw, 92px);
}

.unified-site-footer .landing-footer-brand {
    gap: 7px;
    min-height: 30px;
}

.unified-site-footer .landing-footer-mark {
    width: 28px;
    height: 23px;
    flex: 0 0 28px;
    background-image: url("/assets/favicon-mark.png");
}

.unified-site-footer .landing-footer-wordmark {
    width: 56px;
    height: 17px;
    display: block;
    overflow: hidden;
    background: url("/assets/maktoobly-official-logo.png") -38px -69px / 129px 131px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.unified-site-footer .landing-footer-brand-block p {
    max-width: 310px;
    margin-top: 12px;
    color: #9aa1ab;
    font-size: .82rem;
    line-height: 1.9;
}

.unified-site-footer .landing-footer-group {
    gap: 10px;
}

.unified-site-footer .landing-footer-group strong {
    margin-bottom: 3px;
    color: var(--navy);
    font-size: .82rem;
    font-weight: 800;
}

.unified-site-footer .landing-footer-group .footer-link {
    width: fit-content;
    border: 0;
    padding: 0;
    color: #8b93a0;
    background: transparent;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.65;
    text-align: start;
    text-decoration: none;
}

.unified-site-footer .landing-footer-group button.footer-link:hover,
.unified-site-footer .landing-footer-group button.footer-link:focus-visible,
.unified-site-footer .landing-footer-group a.footer-link:hover,
.unified-site-footer .landing-footer-group a.footer-link:focus-visible {
    color: var(--navy);
}

.unified-site-footer .landing-footer-social-link {
    width: 26px;
    height: 26px;
    color: var(--blue);
}

.unified-site-footer .landing-footer-social-link svg {
    width: 20px;
    height: 20px;
}

.unified-site-footer .landing-footer-bottom {
    margin-top: 54px;
    padding-top: 22px;
    border-top: 1px solid #e8e3d8;
    font-size: .78rem;
}

.letter-preview-frame {
    position: relative;
    min-height: 0;
    overflow: visible;
}

.compose-preview-card .letter-preview,
.letter-confirm-preview {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.compose-preview-card .letter-preview::-webkit-scrollbar,
.compose-preview-card .letter-preview::-webkit-scrollbar-track,
.compose-preview-card .letter-preview::-webkit-scrollbar-thumb,
.compose-preview-card .letter-preview::-webkit-scrollbar-button,
.letter-confirm-preview::-webkit-scrollbar,
.letter-confirm-preview::-webkit-scrollbar-track,
.letter-confirm-preview::-webkit-scrollbar-thumb,
.letter-confirm-preview::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

.compose-preview-card .letter-preview {
    padding-block-start: 24px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.letter-confirm-dialog {
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.letter-confirm-preview {
    max-height: min(58vh, 560px);
    padding-block-start: 34px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.letter-scroll-track {
    position: absolute;
    z-index: 4;
    top: 16px;
    bottom: 16px;
    left: 8px;
    width: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 50, 74, .09);
    pointer-events: none;
}

.letter-scroll-track[hidden] {
    display: none;
}

.letter-preview-frame:has(> .letter-sticker-overlay)
    > .letter-scroll-track {
    top: 88px;
}

.letter-scroll-thumb {
    width: 100%;
    display: block;
    border-radius: inherit;
    background: rgba(23, 50, 74, .42);
    will-change: transform;
}

.letter-preview-frame > .letter-sticker-overlay,
.letter-sticker:not(.letter-sticker-overlay) {
    inset: -20px auto auto -14px;
    width: 78px;
    height: 104px;
    transform: rotate(-5deg);
}

.letter-preview-frame > .letter-sticker-overlay {
    position: absolute;
    z-index: 5;
}

.history-letter-content:has(.letter-sticker),
.letter-content:has(.letter-sticker),
.reply-focus-content:has(.letter-sticker),
.reply-original-content:has(.letter-sticker) {
    padding-block-start: 32px;
}

@media (max-width: 1180px) and (min-width: 841px) {
    .unified-site-header .header-inner {
        width: calc(100% - 48px);
        min-height: 68px;
        gap: 14px;
    }

    .unified-site-header .public-nav {
        gap: 16px;
    }

    .unified-member-actions {
        gap: 12px;
    }

    .unified-member-actions .header-login,
    .unified-member-actions .header-cta,
    .unified-site-header .public-nav a,
    .unified-site-header .public-nav-trigger {
        font-size: .8rem;
    }

    .unified-site-footer .landing-footer-main {
        gap: 32px;
    }
}

@media (max-width: 840px) {
    .unified-site-header .header-inner {
        width: calc(100% - 28px);
        min-height: 60px;
        padding-block: 4px;
    }

    .unified-site-header .brand {
        order: 1;
        min-height: 36px;
    }

    .unified-site-header .brand .brand-mark-crop {
        width: 29px;
        height: 23px;
        min-height: 23px;
        flex-basis: 29px;
    }

    .unified-site-header .brand-name {
        width: 58px;
        height: 17px;
        background-position: -39px -72px;
        background-size: 133px 135px;
    }

    .unified-site-header .nav-toggle {
        order: 2;
    }

    .unified-site-header .public-nav {
        order: 3;
        gap: 2px;
    }

    .unified-site-header .header-actions {
        order: 4;
        margin-inline-start: 0;
        padding-block: 4px 14px;
        border-top: 1px solid var(--line);
    }

    .unified-member-actions .header-login,
    .unified-member-actions .header-cta,
    .member-account-icon {
        min-height: 42px;
    }

    .unified-site-footer .landing-footer-inner {
        width: min(calc(100% - 36px), 760px);
    }

    .unified-site-footer .landing-footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 22px;
    }

    .unified-site-footer .landing-footer-brand-block {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .unified-member-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .unified-member-actions .header-cta {
        padding-inline: 18px !important;
    }

    .unified-site-footer .landing-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .unified-site-footer .landing-footer-brand-block {
        grid-column: 1 / -1;
    }

    .unified-site-footer .landing-footer-bottom {
        margin-top: 34px;
    }

    .letter-confirm-preview {
        max-height: 52vh;
        padding: 27px 20px;
        padding-block-start: 27px !important;
    }

    .letter-scroll-track {
        top: 12px;
        bottom: 12px;
        left: 6px;
    }

    .letter-preview-frame:has(> .letter-sticker-overlay)
        > .letter-scroll-track {
        top: 76px;
    }

    .letter-preview-frame > .letter-sticker-overlay,
    .letter-sticker:not(.letter-sticker-overlay) {
        inset-block-start: -16px;
        inset-inline-start: auto;
        left: -10px;
        width: 66px;
        height: 88px;
    }
}

/* V8.10 account action order and non-sticky composer preview. */

.compose-preview-card {
    position: static;
    top: auto;
    align-self: start;
}

/* V8.11 edge account control and always-visible submission failures. */

.member-account-slot {
    width: 38px;
    height: 38px;
    display: block;
    flex: 0 0 38px;
}

.member-account-edge {
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-start: 20px;
    transform: translateY(-50%);
}

.member-account-edge[hidden] {
    display: none;
}

.submission-error-toast {
    position: fixed;
    z-index: 5400;
    top: max(18px, env(safe-area-inset-top));
    left: 50%;
    width: min(calc(100% - 32px), 640px);
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid #8d2727;
    border-radius: 13px;
    background: #a93434;
    color: #fff;
    box-shadow: 0 18px 42px rgba(64, 20, 20, .3);
    direction: rtl;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity .18s ease, transform .18s ease;
}

.submission-error-toast[hidden] {
    display: none;
}

.submission-error-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.submission-error-toast-icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #a93434;
    font-weight: 900;
    line-height: 1;
}

.submission-error-toast-text {
    margin: 0;
    color: inherit;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.65;
}

.submission-error-toast-close {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.submission-error-toast-close:hover,
.submission-error-toast-close:focus-visible {
    background: rgba(255, 255, 255, .24);
}

@media (max-width: 1180px) and (min-width: 841px) {
    .unified-site-header .public-nav {
        margin-inline-start: 48px;
    }

    .member-account-edge {
        inset-inline-start: 12px;
    }

    .member-account-slot {
        display: none;
    }
}

@media (max-width: 840px) {
    .unified-site-header .public-nav {
        margin-inline-start: 0;
        order: 4;
    }

    .unified-site-header .header-actions {
        order: 5;
    }

    .member-account-edge {
        position: static;
        order: 2;
        transform: none;
    }

    .unified-site-header .nav-toggle {
        order: 3;
    }

    .member-account-slot {
        display: none;
    }

    .submission-error-toast {
        top: max(10px, env(safe-area-inset-top));
        width: min(calc(100% - 20px), 640px);
        grid-template-columns: 30px minmax(0, 1fr) 32px;
        gap: 9px;
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .submission-error-toast {
        transition: none;
    }
}

/* v8.14 final experience: supplied stamps, medals, lined paper and privacy UI */

.sticker-options {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
}

.sticker-pigeon,
.sticker-zayed-mosque,
.sticker-lily {
    display: block;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.sticker-pigeon {
    background-image: url("../stamps/pigeon.png") !important;
}

.sticker-zayed-mosque {
    background-image: url("../stamps/zayed-mosque.png") !important;
}

.sticker-lily {
    background-image: url("../stamps/lily.png") !important;
}

.sticker-option-art {
    width: 50px;
    height: 67px;
}

.letter-sticker.sticker-pigeon,
.letter-sticker.sticker-zayed-mosque,
.letter-sticker.sticker-lily {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.letter-theme-classic {
    background-color: #fffdfa;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(65, 111, 141, .10) 31px 32px);
}

.letter-theme-nature {
    background-color: #eef6e9;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(75, 111, 76, .11) 31px 32px), linear-gradient(145deg, rgba(248, 252, 245, .88), rgba(228, 240, 223, .88));
}

.letter-theme-animals {
    background-color: #ebf5fb;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(65, 111, 141, .10) 31px 32px), linear-gradient(145deg, rgba(247, 251, 254, .9), rgba(223, 238, 247, .9));
}

.letter-theme-landmarks {
    background-color: #f0f2f3;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(72, 80, 84, .10) 31px 32px), linear-gradient(145deg, rgba(247, 248, 248, .9), rgba(233, 237, 239, .9));
}

.letter-theme-writing {
    background-color: #fcf4df;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(138, 90, 54, .10) 31px 32px), linear-gradient(145deg, rgba(255, 253, 247, .9), rgba(246, 236, 214, .9));
}

.letter-theme-flowers {
    background-color: #fbedf2;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(122, 48, 56, .09) 31px 32px), linear-gradient(145deg, rgba(255, 249, 251, .9), rgba(246, 227, 234, .9));
}

.letter-theme-arts {
    background-color: #f2edf9;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(98, 73, 129, .09) 31px 32px), linear-gradient(145deg, rgba(251, 249, 255, .9), rgba(236, 230, 247, .9));
}

.achievement-medal-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(82px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

/* Keep the desktop sidebar's medal tracks inside its narrow grid column. */
@media (min-width: 1041px) {
    .focused-experience-panel .achievement-medal-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.achievement-medal {
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.achievement-medal img {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    border-radius: 9px;
    object-fit: cover;
}

.achievement-medal figcaption {
    margin-top: 7px;
    color: var(--navy);
    font-size: .78rem;
    font-weight: 800;
}

.achievement-medal.is-locked img {
    filter: grayscale(1);
    opacity: .18;
}

.achievement-medal.is-locked figcaption {
    color: var(--muted);
    font-weight: 500;
}

.postage-stamp-summary {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.postage-stamp-summary > strong {
    color: var(--navy);
}

.account-data-panel {
    margin-top: 22px;
}

.account-data-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-data-actions > div {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.account-data-actions h3 {
    margin: 0 0 7px;
    color: var(--navy);
}

.account-data-actions p {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.8;
}

.account-freeze-card {
    border-color: rgba(145, 52, 52, .25) !important;
    background: #fffafa !important;
}

body.survey-required {
    overflow: hidden;
}

.mandatory-survey {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(15, 35, 49, .72);
    backdrop-filter: blur(5px);
}

.mandatory-survey-panel {
    width: min(760px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: clamp(24px, 5vw, 42px);
    border-radius: 18px;
    background: var(--paper, #fffdfa);
    box-shadow: 0 30px 90px rgba(6, 22, 34, .38);
}

.mandatory-survey-panel h2 {
    margin: 0;
    color: var(--navy);
    font-family: "Amiri", serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
}

.mandatory-survey-intro {
    margin: 6px 0 24px;
    color: var(--muted);
    line-height: 1.8;
}

.mandatory-survey fieldset {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.mandatory-survey legend {
    margin-bottom: 10px;
    color: var(--navy);
    font-weight: 800;
}

.mandatory-survey legend span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 500;
}

.survey-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.survey-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.survey-choice input {
    position: absolute;
    opacity: 0;
}

.survey-choice span {
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    text-align: center;
}

.survey-choice input:focus-visible + span {
    outline: 3px solid rgba(65, 111, 141, .22);
    outline-offset: 2px;
}

.survey-choice input:checked + span {
    border-color: var(--navy);
    background: #edf3f5;
    box-shadow: inset 0 0 0 1px var(--navy);
    font-weight: 800;
}

.survey-scale {
    display: grid;
    grid-template-columns: repeat(11, minmax(36px, 1fr));
    gap: 5px;
}

.survey-scale .survey-choice span {
    min-height: 40px;
    padding: 5px;
}

.survey-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: var(--muted);
    font-size: .75rem;
}

.mandatory-survey-submit {
    width: 100%;
    margin-top: 10px;
}

.contact-reading {
    max-width: 760px;
}

.contact-form {
    display: grid;
    gap: 18px;
    margin-top: 30px;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.contact-privacy-note {
    margin-top: 22px;
    color: var(--muted);
    line-height: 1.9;
}

.contact-privacy-note a {
    color: var(--blue);
}

.selection-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-weight: 800;
}

.selection-card blockquote {
    margin: 0;
}

.selection-card blockquote p {
    line-height: 2.05;
}

@media (max-width: 760px) {
    .sticker-options,
    .appearance-panel .sticker-options,
    .compact-sticker-picker .sticker-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .achievement-medal-list {
        grid-template-columns: repeat(3, minmax(76px, 1fr));
    }

    .account-data-actions,
    .survey-options {
        grid-template-columns: 1fr;
    }

    .mandatory-survey {
        place-items: start center;
        padding: 10px;
    }

    .mandatory-survey-panel {
        max-height: calc(100dvh - 20px);
        border-radius: 13px;
    }

    .survey-scale {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* V8.15 accessible light, comfort and dark appearance control. */

.theme-control {
    position: fixed;
    z-index: 900;
    left: 14px;
    left: max(14px, env(safe-area-inset-left));
    bottom: 14px;
    inset-block-end: max(14px, env(safe-area-inset-bottom));
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(76px, 96px) auto 42px;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    background: var(--theme-surface-strong);
    background: color-mix(in srgb, var(--theme-surface-strong) 94%, transparent);
    color: var(--theme-text);
    box-shadow: 0 8px 28px var(--theme-shadow);
    direction: ltr;
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
    backdrop-filter: blur(12px);
}

.theme-control-icon {
    width: 19px;
    color: var(--theme-muted);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.theme-control-range {
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--theme-action);
    accent-color: var(--theme-action);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.theme-control-range::-webkit-slider-runnable-track {
    height: 4px;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    background: linear-gradient(90deg, #f7f2e9, #8ea0aa, #17232c);
}

.theme-control-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border: 2px solid var(--theme-surface-strong);
    border-radius: 50%;
    background: var(--theme-action);
    box-shadow: 0 0 0 1px var(--theme-action);
    -webkit-appearance: none;
}

.theme-control-range::-moz-range-track {
    height: 4px;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    background: linear-gradient(90deg, #f7f2e9, #8ea0aa, #17232c);
}

.theme-control-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme-surface-strong);
    border-radius: 50%;
    background: var(--theme-action);
    box-shadow: 0 0 0 1px var(--theme-action);
}

.theme-control-range:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 999px;
}

.theme-control-value {
    min-width: 38px;
    color: var(--theme-text);
    direction: rtl;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

body.modal-open .theme-control,
body.survey-required .theme-control {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html[data-theme="comfort"] body,
html[data-theme="dark"] body,
html[data-theme="comfort"] body[data-page="home"],
html[data-theme="dark"] body[data-page="home"],
html[data-theme="comfort"] body[data-page="write"],
html[data-theme="dark"] body[data-page="write"],
html[data-theme="comfort"] body[data-page="receive"],
html[data-theme="dark"] body[data-page="receive"],
html[data-theme="comfort"] body[data-page="inbox"],
html[data-theme="dark"] body[data-page="inbox"],
html[data-theme="comfort"] body[data-page="account"],
html[data-theme="dark"] body[data-page="account"],
html[data-theme="comfort"] body[data-page="login"],
html[data-theme="dark"] body[data-page="login"],
html[data-theme="comfort"] body[data-page="register"],
html[data-theme="dark"] body[data-page="register"],
html[data-theme="comfort"] body.editorial-page,
html[data-theme="dark"] body.editorial-page,
html[data-theme="comfort"] .adab-page,
html[data-theme="dark"] .adab-page,
html[data-theme="comfort"] .selections-page,
html[data-theme="dark"] .selections-page {
    background: var(--theme-canvas);
}

html[data-theme="comfort"] :is(
    .site-header,
    .landing-how,
    .landing-footer,
    .founder-quote-section,
    .privacy-card,
    .auth-box,
    .rich-composer,
    .compose-preview-card,
    .appearance-panel,
    .stationery-picker,
    .sticker-picker,
    .experience-panel,
    .account-settings-panel,
    .private-profile-panel,
    .member-card,
    .history-table-wrap,
    .history-thread-card,
    .history-summary > div,
    .inbox-column,
    .contact-form,
    .faq-item,
    .info-modal-panel,
    .completion-moment-card,
    .report-dialog,
    .account-data-actions > div,
    .achievement-medal,
    .mandatory-survey-panel
),
html[data-theme="dark"] :is(
    .site-header,
    .landing-how,
    .landing-footer,
    .founder-quote-section,
    .privacy-card,
    .auth-box,
    .rich-composer,
    .compose-preview-card,
    .appearance-panel,
    .stationery-picker,
    .sticker-picker,
    .experience-panel,
    .account-settings-panel,
    .private-profile-panel,
    .member-card,
    .history-table-wrap,
    .history-thread-card,
    .history-summary > div,
    .inbox-column,
    .contact-form,
    .faq-item,
    .info-modal-panel,
    .completion-moment-card,
    .report-dialog,
    .account-data-actions > div,
    .achievement-medal,
    .mandatory-survey-panel
) {
    background: var(--theme-surface-strong);
    border-color: var(--theme-line);
    box-shadow: 0 12px 34px var(--theme-shadow);
}

html[data-theme="comfort"] :is(
    .field input,
    .field textarea,
    .field select,
    .toolbar-select-label select,
    .emoji-custom-entry input,
    .rich-toolbar,
    .emoji-row,
    .emoji-picker-popover,
    .survey-choice span,
    .nav-toggle,
    .member-account-icon,
    .button-secondary,
    .button-danger
),
html[data-theme="dark"] :is(
    .field input,
    .field textarea,
    .field select,
    .toolbar-select-label select,
    .emoji-custom-entry input,
    .rich-toolbar,
    .emoji-row,
    .emoji-picker-popover,
    .survey-choice span,
    .nav-toggle,
    .member-account-icon,
    .button-secondary,
    .button-danger
) {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme="comfort"] :is(
    .landing-final-cta,
    .sent-follow-up,
    .header-nav .workspace-nav-link:hover,
    .header-nav .workspace-nav-link:focus-visible,
    .header-nav .workspace-nav-link[aria-current="page"],
    body[data-page="inbox"] .empty-state
) {
    background: var(--theme-surface-muted);
}

html[data-theme="comfort"] .unified-site-header,
html[data-theme="comfort"] .member-site-header,
html[data-theme="comfort"] body.editorial-page .site-header {
    background: color-mix(in srgb, var(--theme-canvas) 94%, transparent);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] :is(
    .unified-site-header,
    .member-site-header,
    body.editorial-page .site-header
) {
    background: color-mix(in srgb, var(--theme-canvas) 94%, transparent);
    border-color: var(--theme-line);
}

html[data-theme="dark"] :is(
    .landing-final-cta,
    .sent-follow-up,
    body[data-page="inbox"] .empty-state,
    .header-nav .workspace-nav-link:hover,
    .header-nav .workspace-nav-link:focus-visible,
    .header-nav .workspace-nav-link[aria-current="page"],
    .member-site-header .workspace-nav-link:hover,
    .member-site-header .workspace-nav-link:focus-visible,
    .member-site-header .workspace-nav-link[aria-current="page"]:not(.workspace-primary-link),
    .member-account-icon:hover,
    .member-account-icon:focus-visible,
    .member-account-icon[aria-current="page"],
    .survey-choice input:checked + span,
    .rich-toolbar button:hover,
    .rich-toolbar button:focus-visible,
    .emoji-row button:hover,
    .emoji-row button:focus-visible
) {
    background: var(--theme-surface-muted);
    border-color: var(--theme-line);
    color: var(--theme-text);
}

html[data-theme="dark"] :is(
    .button-primary,
    .header-cta,
    .member-site-header .workspace-primary-link,
    .emoji-row .emoji-custom-entry button
) {
    border-color: var(--theme-action) !important;
    background: var(--theme-action) !important;
    color: var(--theme-action-text) !important;
}

html[data-theme="dark"] :is(
    .public-nav a,
    .public-nav-trigger,
    .member-site-header .workspace-nav-link,
    .landing-signup-note,
    .unified-site-footer .landing-footer-brand-block p,
    .unified-site-footer .landing-footer-group .footer-link,
    .landing-footer-bottom,
    .landing-section-heading > p:last-child,
    .landing-final-cta p,
    .landing-step p,
    .privacy-card p,
    .hero-copy,
    .public-lead,
    .public-section p,
    .public-section li,
    .legal-copy p,
    .legal-copy li,
    .check,
    .page-intro,
    .auth-intro,
    .form-help,
    .contact-privacy-note
) {
    color: var(--theme-muted);
}

html[data-theme="dark"] :is(
    .page-title,
    .public-section h2,
    .faq-item summary,
    .landing-section-heading h2,
    .landing-final-cta h2,
    .landing-step h3,
    .privacy-card h3,
    .founder-quote-inner blockquote,
    .field label,
    .field-label,
    .compose-page-heading h1,
    .experience-panel h2,
    .account-settings-panel h2,
    .account-data-actions h3,
    .history-heading h2,
    .history-thread-heading,
    .mandatory-survey-panel h2,
    .mandatory-survey legend,
    .contact-form label
) {
    color: var(--theme-text);
}

html[data-theme="dark"] .unified-site-footer .landing-footer-bottom,
html[data-theme="dark"] .public-section,
html[data-theme="dark"] .private-rewards,
html[data-theme="dark"] .postage-stamp-summary,
html[data-theme="dark"] .history-thread-heading,
html[data-theme="dark"] .history-letter-block + .history-letter-block,
html[data-theme="dark"] .rich-editor-meta,
html[data-theme="dark"] .rich-toolbar,
html[data-theme="dark"] .emoji-row,
html[data-theme="dark"] .emoji-custom-form,
html[data-theme="dark"] .member-reliability,
html[data-theme="dark"] .member-counts,
html[data-theme="dark"] .unified-site-header .header-actions {
    border-color: var(--theme-line);
}

html[data-theme="dark"] .founder-quote-inner::before {
    color: #d1b66e;
}

html[data-theme="dark"] .home-login-link,
html[data-theme="dark"] header a.home-login-link {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--ocean);
}

html[data-theme="dark"] .home-login-link:hover,
html[data-theme="dark"] .home-login-link:focus-visible,
html[data-theme="dark"] header a.home-login-link:hover,
html[data-theme="dark"] header a.home-login-link:focus-visible {
    background: var(--theme-surface-muted);
}

html[data-theme="dark"] .info-modal,
html[data-theme="dark"] .letter-confirm-backdrop,
html[data-theme="dark"] .report-dialog-overlay,
html[data-theme="dark"] .completion-moment {
    background: rgba(4, 10, 14, .78);
}

html[data-theme="dark"] .info-modal-panel:has(.legal-copy)
    .info-modal-content .page-header {
    border-color: var(--theme-line);
    background: var(--theme-surface-strong);
}

html[data-theme="dark"] .info-modal-close,
html[data-theme="dark"] .letter-confirm-close,
html[data-theme="dark"] .report-cancel-button {
    color: var(--theme-muted);
}

html[data-theme="dark"] .report-dialog-title,
html[data-theme="dark"] .report-field-title,
html[data-theme="dark"] .report-reason-option:has(input:checked) {
    color: var(--theme-text);
}

html[data-theme="dark"] .report-dialog-intro,
html[data-theme="dark"] .report-reason-option {
    color: var(--theme-muted);
}

html[data-theme="dark"] .report-reason-option {
    border-color: var(--theme-line);
}

html[data-theme="dark"] .report-reason-option:hover,
html[data-theme="dark"] .report-reason-option:has(input:checked) {
    border-color: var(--blue);
    background: var(--theme-surface-muted);
}

html[data-theme="dark"] .account-freeze-card {
    border-color: #7f4c52 !important;
    background: #302227 !important;
}

html[data-theme="dark"] .mandatory-survey {
    background: rgba(4, 10, 14, .82);
}

html[data-theme="dark"] :is(
    .history-table th,
    .history-letter-block + .history-letter-block,
    .member-avatar,
    .emoji-picker-popover,
    .appearance-panel,
    .survey-choice input:checked + span
) {
    background: var(--theme-surface-muted);
}

html[data-theme="dark"] .history-table :is(th, td) {
    border-color: var(--theme-line);
}

html[data-theme="dark"] .achievement-medal.is-locked img {
    opacity: .28;
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .landing-footer-wordmark {
    filter: brightness(0) invert(.92);
}

html[data-theme="dark"] :is(
    .brand-mark-crop,
    .landing-footer-mark
) {
    border-radius: 7px;
    background-color: #f7f2e9;
    box-shadow: 0 0 0 3px #f7f2e9;
}

html[data-theme="comfort"] .adab-story {
    --adab-paper: var(--theme-canvas);
    --adab-warm: var(--theme-surface-muted);
    --adab-border: var(--theme-line);
}

html[data-theme="comfort"] .selections-story {
    --selection-paper: var(--theme-surface);
    --selection-warm: var(--theme-surface-muted);
    --selection-border: var(--theme-line);
    background: var(--theme-canvas);
}

html[data-theme="dark"] .adab-story {
    --adab-ink: #e7eef2;
    --adab-soft-ink: #b7c2c8;
    --adab-paper: var(--theme-canvas);
    --adab-warm: var(--theme-surface-muted);
    --adab-border: var(--theme-line);
    --adab-accent: #8ebdd1;
    --adab-seal: #e09aa0;
}

html[data-theme="dark"] .selections-story {
    --selection-ink: #e7eef2;
    --selection-copy: #b7c2c8;
    --selection-paper: #f7f2e9;
    --selection-warm: var(--theme-surface-muted);
    --selection-border: #53616a;
    --selection-accent: #8ebdd1;
    --selection-seal: #e09aa0;
    background: var(--theme-canvas);
}

html[data-theme="comfort"] .selections-hero {
    background: linear-gradient(
        180deg,
        var(--theme-canvas),
        var(--theme-surface-muted));
}

html[data-theme="dark"] .selections-hero {
    background:
        radial-gradient(circle at 18% 20%, rgba(142, 189, 209, .11), transparent 30%),
        linear-gradient(180deg, var(--theme-canvas), var(--theme-surface-muted));
}

html[data-theme="dark"] .selection-letter blockquote,
html[data-theme="dark"] .selection-sheet {
    color-scheme: light;
}

html[data-theme="dark"] :is(
    .letter-preview,
    .letter-confirm-preview,
    .message-sheet,
    .reply-focus-sheet,
    .history-letter-content,
    .reply-original-content,
    .selection-letter,
    .selection-sheet
) {
    color-scheme: light;
}

/* V8.15.3 dark-mode surface ownership and editorial polish. */

/* The complete label needs a compact tag, not a fixed-size number disc. */
.selection-number {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px 5px;
    border: 1px solid color-mix(in srgb, var(--selection-seal) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--selection-seal) 9%, var(--selection-paper));
    color: var(--selection-seal);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* Workspace cards are interface surfaces, so they follow the dark palette. */
html[data-theme="dark"] :is(
    body[data-page="home"] .composer,
    body[data-page="receive"] .receive-reading,
    body[data-page="account"] .reading
) {
    border-color: var(--theme-line);
    background: var(--theme-surface-strong);
    box-shadow: 0 12px 34px var(--theme-shadow);
}

html[data-theme="dark"] .prefix-field {
    border-color: var(--theme-line);
    background: var(--theme-surface);
}

html[data-theme="dark"] .prefix-field > span {
    align-self: stretch;
    display: grid;
    place-items: center;
    background: var(--theme-surface-muted);
    color: var(--theme-muted);
}

/* Information modals share the dark panel instead of introducing a light card. */
html[data-theme="dark"] .info-modal-content > .modal-source:not(.adab-story) {
    background: transparent;
    color: var(--theme-text);
}

html[data-theme="dark"] .info-modal-content > .public-reading :is(
    .page-title,
    .public-section h2,
    .faq-item summary
) {
    color: var(--theme-text);
}

html[data-theme="dark"] .info-modal-content > .public-reading :is(
    .public-lead,
    .public-section p,
    .public-section li,
    .faq-item p
) {
    color: var(--theme-muted);
}

html[data-theme="dark"] .info-modal-content > .public-reading .public-section {
    border-color: var(--theme-line);
}

html[data-theme="dark"] .info-modal-content > .public-reading .faq-item {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    box-shadow: none;
}

/* Stationery remains paper in dark mode and therefore keeps paper-safe ink. */
html[data-theme="dark"] :is(
    .letter-preview,
    .letter-confirm-preview,
    .letter-content,
    .correspondence-reading-content,
    .reply-focus-content,
    .reply-original-content,
    .history-letter-content,
    .selection-letter blockquote
) {
    color: #17324a;
}

html[data-theme="dark"] :is(
    .message-sheet-heading,
    .reply-original-details summary
) {
    color: #17324a;
}

html[data-theme="dark"] :is(
    .message-sheet-meta,
    .reply-focus-meta
) {
    color: #596d78;
}

html[data-theme="dark"] .reply-original-details {
    border-color: #d8dfdf;
    background: #f4f6f5;
}

html[data-theme="dark"] .selection-letter .selection-number {
    border-color: #d8b9b7;
    background: #f3e7e3;
    color: #71383b;
}

/* The editorial header uses the same compact mark-and-word rhythm as the app. */
html[data-theme="dark"] body.editorial-page .site-header .header-inner {
    min-height: 68px;
}

html[data-theme="dark"] body.editorial-page .site-header .brand {
    min-height: 40px;
    gap: 8px;
}

html[data-theme="dark"] body.editorial-page .site-header .brand .brand-mark-crop {
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex-basis: 34px;
    border-radius: 0;
    background-color: transparent;
    background-image: url("/assets/favicon-mark.png");
    background-position: center;
    background-size: contain;
    box-shadow: none;
}

html[data-theme="dark"] body.editorial-page .site-header .brand
    > span:last-child:not(.brand-mark-crop) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--theme-text);
    font-size: 1.18rem;
    line-height: 1;
    white-space: normal;
}

/* V8.17 stakeholder review: right-aligned identity, resilient mobile rhythm,
   accessible process icons, and the transparent slogan hero artwork. */

@media (min-width: 841px) {
    .unified-site-header .brand {
        order: 1;
    }

    .unified-site-header .public-nav {
        order: 2;
    }

    .unified-site-header .header-actions {
        order: 3;
        margin-inline-start: auto;
    }

    .member-account-edge {
        inset-inline-start: auto;
        inset-inline-end: 20px;
    }
}

.hero-title-line {
    display: block;
}

.hero-illustration img[src*="home-letter-slogan-v8-17"] {
    filter: drop-shadow(0 22px 24px rgba(16, 42, 61, .14));
}

html[data-theme="comfort"] .landing-step-icon {
    border: 1px solid #bacbd3;
    background: #e1eaed;
    color: #244e68;
}

html[data-theme="dark"] .landing-step-icon {
    border: 1px solid #617985;
    background: #2a3c47;
    color: #e7f3f7;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .landing-step-icon svg {
    stroke-width: 1.9;
}

@media (max-width: 560px) {
    .landing-hero {
        padding-block: 42px 54px;
    }

    .landing-hero-layout {
        width: min(calc(100% - 48px), 480px);
        gap: 36px;
    }

    .landing-hero h1 {
        max-width: 100%;
        font-size: clamp(2rem, 9vw, 2.45rem);
        line-height: 1.42;
        text-wrap: balance;
    }

    .landing-hero .hero-copy {
        margin-top: 20px;
        font-size: .98rem;
        line-height: 1.95;
    }

    .landing-hero-actions {
        gap: 12px;
        margin-top: 28px;
    }

    .landing-hero-actions .button {
        min-height: 52px;
    }

    .hero-illustration {
        width: min(78vw, 300px);
    }

    .landing-section {
        padding-block: 56px;
    }

    .landing-section > .shell,
    .founder-quote-section > .shell,
    .landing-final-cta > .shell {
        width: min(calc(100% - 48px), var(--page));
    }

    .landing-section-heading {
        margin-bottom: 36px;
    }

    .landing-step {
        padding: 24px 16px;
    }

    .theme-control {
        max-width: calc(100% - 16px);
    }
}

/* V8.15.4 dark composer and transparent brand-mark completion. */

/* The supplied brand assets are already transparent. Do not manufacture a
   light tile behind them when the surrounding chrome is dark. */
html[data-theme="dark"] :is(
    .brand-mark-crop,
    .landing-footer-mark
) {
    background-color: transparent;
    box-shadow: none;
}

/* The write-page composer is an interface surface. Its stationery remains
   light by design, but the surrounding workspace belongs to the dark theme. */
html[data-theme="dark"] body[data-page="write"]
    .composer-stage > .composer {
    border-color: var(--theme-line);
    background: var(--theme-surface-strong);
    box-shadow: 0 12px 34px var(--theme-shadow);
}

/* Editable stationery needs paper-safe default ink. Explicit text colours
   applied by the author remain inline and continue to take precedence. */
html[data-theme="dark"] body[data-page="write"] .rich-editor {
    color: #17324a;
}

/* Appearance choices are controls, not sheets of stationery. Keep the small
   swatches and stamp artwork truthful while making each control a dark UI
   surface with readable labels and a clear selected state. */
html[data-theme="dark"] body[data-page="write"] .appearance-panel :is(
    .stationery-options,
    .sticker-options
) label {
    border-color: #617783;
    background: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: none;
}

html[data-theme="dark"] body[data-page="write"] .appearance-panel :is(
    .stationery-options,
    .sticker-options
) label:has(input:checked) {
    border-color: var(--blue);
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 42%, transparent);
}

html[data-theme="dark"] body[data-page="write"]
    .appearance-panel .sticker-none {
    color: var(--theme-muted);
}

/* V8.15.5 accessibility remediation. These tones retain the established
   palette while meeting WCAG AA on both white and comfort canvases. */
html:not([data-theme="dark"]) .unified-site-footer :is(
    .landing-footer-group .footer-link,
    .landing-footer-bottom,
    .landing-footer-bottom a
) {
    color: #5f6874;
}

html[data-theme="comfort"] :is(
    .public-kicker,
    .step-number
) {
    color: #3d6b88;
}

/* History letters can become independently scrollable. Keyboard users need
   a visible focus target before using arrow, Page Up, or Page Down keys. */
.history-letter-content:focus-visible {
    outline: 3px solid #2f6f96;
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .theme-control {
        left: 8px;
        left: max(8px, env(safe-area-inset-left));
        bottom: 8px;
        inset-block-end: max(8px, env(safe-area-inset-bottom));
        grid-template-columns: auto minmax(66px, 82px) auto 36px;
        gap: 5px;
        padding-inline: 8px;
    }

    .theme-control-value {
        min-width: 34px;
        font-size: .68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-control,
    .theme-control * {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .theme-control {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        forced-color-adjust: auto;
    }

    .theme-control-range {
        accent-color: Highlight;
    }
}

/* V8.15.6 unified public chrome, editorial storytelling, and error UX. */

.unified-site-header :is(
    .public-nav a,
    .public-nav-trigger,
    .header-login
)[aria-current="page"] {
    color: var(--theme-text);
    text-decoration: underline;
    text-decoration-color: var(--theme-action);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

body.editorial-page .unified-site-header .header-inner {
    min-height: 72px;
}

.adab-opening-section {
    padding-block: clamp(48px, 7vw, 76px);
}

.adab-opening {
    max-width: 47ch;
    margin: 0 auto;
    color: var(--adab-ink);
    font-family: "Amiri", serif;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    line-height: 1.9;
    text-align: center;
}

.adab-definition-section,
.adab-post-section {
    border-block: 1px solid var(--adab-border);
    background:
        radial-gradient(
            circle at 10% 15%,
            color-mix(in srgb, var(--adab-accent) 10%, transparent),
            transparent 30%),
        color-mix(in srgb, var(--adab-warm) 62%, var(--adab-paper));
}

.adab-history-section {
    background:
        linear-gradient(
            180deg,
            var(--adab-paper),
            color-mix(in srgb, var(--adab-warm) 58%, var(--adab-paper)));
}

.adab-language-note {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--adab-border);
    border-radius: 16px;
    background: var(--adab-paper);
    box-shadow: 0 20px 42px -36px rgba(22, 50, 74, .55);
}

.adab-language-note > span {
    min-height: 92px;
    display: grid;
    place-items: center;
    border: 1px dashed color-mix(in srgb, var(--adab-seal) 48%, transparent);
    border-radius: 50%;
    color: var(--adab-seal);
    font-family: "Amiri", serif;
    font-size: 1.35rem;
    letter-spacing: .18em;
}

.adab-language-note h3 {
    margin: 0 0 7px;
    color: var(--adab-ink);
    font-size: 1.18rem;
}

.adab-language-note p,
.adab-bridge-copy {
    margin: 0;
    color: var(--adab-soft-ink);
    line-height: 1.95;
}

.adab-bridge-copy {
    margin-block: 32px 18px;
    font-weight: 700;
}

.adab-card-number {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 20px;
    padding-inline: 10px;
    border: 1px solid color-mix(in srgb, var(--adab-seal) 35%, transparent);
    border-radius: 999px;
    color: var(--adab-seal);
    font-size: .72rem;
    font-weight: 800;
}

.adab-history-section .adab-timeline {
    max-width: 780px;
}

.adab-history-section .adab-t-item {
    padding: 0 22px 34px 0;
}

.adab-history-section .adab-t-item h3 {
    font-family: "Amiri", serif;
    font-size: 1.42rem;
}

.adab-history-section .adab-t-item p {
    max-width: 72ch;
}

.adab-book-note {
    position: relative;
    overflow: hidden;
    padding-inline-start: clamp(28px, 6vw, 78px);
}

.adab-book-note::before {
    content: "✉";
    position: absolute;
    top: 15px;
    inset-inline-start: 22px;
    color: color-mix(in srgb, var(--adab-seal) 28%, transparent);
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: 1;
}

.adab-tones-section {
    border-block: 1px solid var(--adab-border);
    background: color-mix(in srgb, var(--adab-warm) 48%, var(--adab-paper));
}

.adab-stamps article {
    min-height: 150px;
    display: grid;
    align-content: center;
    transition: transform .2s ease, border-color .2s ease;
}

.adab-stamps article:hover {
    border-color: color-mix(in srgb, var(--adab-seal) 58%, var(--adab-border));
    transform: translateY(-3px);
}

.adab-benefits article {
    padding: clamp(22px, 4vw, 32px);
    border: 1px solid var(--adab-border);
    border-radius: 14px;
    background: var(--adab-paper);
}

.adab-benefits li {
    line-height: 1.8;
}

.adab-postal-strip article > div {
    border-color: var(--adab-accent);
    background: var(--adab-paper);
    box-shadow: 0 12px 28px -23px rgba(22, 50, 74, .7);
}

.adab-postal-strip article > div span {
    color: var(--adab-ink);
}

.adab-cta {
    border-top: 1px dashed var(--adab-border);
    background:
        radial-gradient(
            circle at 50% 0,
            color-mix(in srgb, var(--adab-accent) 13%, transparent),
            transparent 42%),
        var(--adab-warm);
}

.adab-cta .adab-eyebrow {
    margin-bottom: 4px;
}

.waitlist-thanks-page {
    width: min(calc(100% - 40px), 690px);
    min-height: calc(100dvh - 73px);
    display: grid;
    align-content: center;
    gap: 24px;
    margin-inline: auto;
    padding-block: 56px 96px;
}

.waitlist-thanks-mark {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid var(--theme-line);
    border-radius: 50%;
    background: var(--theme-surface);
}

.waitlist-thanks-mark .brand-mark-crop {
    width: 42px;
    height: 42px;
    min-height: 42px;
    background-image: url("/assets/favicon-mark.png");
    background-position: center;
    background-size: contain;
}

.waitlist-message {
    padding: clamp(26px, 5vw, 46px);
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    background: var(--theme-surface-strong);
    box-shadow: 0 20px 55px var(--theme-shadow);
}

.waitlist-message h1 {
    margin: 8px 0 24px;
    color: var(--theme-text);
    font-family: "Amiri", serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.3;
}

.waitlist-message > p:not(.public-kicker) {
    margin: 0 0 16px;
    color: var(--theme-muted);
    line-height: 2;
}

.waitlist-message .signature {
    margin-top: 32px;
    color: var(--theme-text);
    line-height: 1.9;
}

.error-page {
    min-height: 100dvh;
    background: var(--theme-canvas);
}

.error-main {
    width: min(calc(100% - 40px), 1040px);
    min-height: calc(100dvh - 73px);
    display: grid;
    align-items: center;
    margin-inline: auto;
    padding-block: clamp(54px, 9vw, 110px);
}

.error-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    align-items: center;
    gap: clamp(44px, 8vw, 100px);
}

.error-kicker {
    margin: 0 0 12px;
    color: var(--blue);
    font-size: .82rem;
    font-weight: 800;
}

html[data-theme="comfort"] .error-kicker {
    color: #3d6b88;
}

.error-copy h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--theme-text);
    font-family: "Amiri", serif;
    font-size: clamp(2.6rem, 6vw, 5.1rem);
    line-height: 1.12;
}

.error-copy > p:not(.error-kicker) {
    max-width: 52ch;
    margin: 20px 0 0;
    color: var(--theme-muted);
    font-size: clamp(1rem, 1.8vw, 1.14rem);
    line-height: 2;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.error-illustration {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
}

.error-envelope {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: var(--theme-surface-muted);
    box-shadow: 0 28px 64px -42px rgba(22, 50, 74, .65);
    transform: rotate(-3deg);
}

.error-envelope::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 62%;
    background: var(--theme-surface);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.error-code {
    position: absolute;
    right: 24px;
    bottom: 20px;
    color: var(--theme-text);
    font-family: "Amiri", serif;
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    line-height: 1;
}

.error-seal {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ad6663, #7a3e3f);
    color: #fff8e9;
    font-family: "Amiri", serif;
    font-size: 1.2rem;
}

html[data-theme="dark"] :is(
    .adab-language-note,
    .adab-benefits article,
    .adab-postal-strip article > div,
    .waitlist-message,
    .waitlist-thanks-mark
) {
    background: var(--theme-surface-strong);
    border-color: var(--theme-line);
}

html[data-theme="dark"] .error-envelope {
    background: var(--theme-surface-muted);
}

html[data-theme="dark"] .error-envelope::before {
    background: var(--theme-surface-strong);
}

@media (max-width: 760px) {
    .adab-language-note {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 17px;
    }

    .adab-language-note > span {
        min-height: 68px;
        font-size: 1rem;
    }

    .adab-book-note {
        padding-inline-start: 28px;
    }

    .adab-book-note::before {
        display: none;
    }

    .adab-postal-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
        overflow: visible;
        padding-bottom: 0;
    }

    .adab-postal-strip article {
        min-width: 0;
        flex: none;
    }

    .error-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .error-copy {
        text-align: center;
    }

    .error-copy h1,
    .error-copy > p:not(.error-kicker) {
        margin-inline: auto;
    }

    .error-actions {
        justify-content: center;
    }

    .error-illustration {
        min-height: 230px;
        order: -1;
    }

    .error-envelope {
        width: min(86vw, 300px);
    }
}

@media (max-width: 480px) {
    .adab-postal-strip {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adab-stamps article {
        transition: none;
    }
}

/* V8.21: recovery cards and dynamically opened reply controls. */
body:is([data-page="forgot-password"], [data-page="reset-password"]) .auth-box {
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    background: var(--theme-surface-strong);
}

html[data-theme="dark"] .reply-customization {
    background: var(--theme-surface-strong);
    border-color: var(--theme-line);
}

html[data-theme="dark"] .reply-rich-composer .rich-editor {
    color: #17324a;
}

html[data-theme="dark"] .reply-customization :is(.stationery-options, .sticker-options) label {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #617783;
    box-shadow: none;
}

html[data-theme="dark"] .reply-customization :is(.stationery-options, .sticker-options) label:has(input:checked) {
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 42%, transparent);
}

html[data-theme="dark"] .rich-toolbar button[aria-pressed="true"]:not([data-color]),
html[data-theme="dark"] .emoji-row .emoji-picker-toggle {
    background: var(--theme-surface-muted);
    color: var(--theme-text);
    border-color: var(--theme-line);
}

/* V8.18 editorial artwork and expanded postage-stamp collection. */

.editorial-hero-art {
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 0;
    overflow: visible;
    justify-self: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    animation: editorial-object-arrive .82s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

.editorial-hero-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.sticker-pigeon {
    --stamp-image: url("../stamps/pigeon.png");
}

.sticker-zayed-mosque {
    --stamp-image: url("../stamps/zayed-mosque.png");
}

.sticker-lily {
    --stamp-image: url("../stamps/lily.png");
}

.sticker-wild-horses {
    --stamp-image: url("../stamps/wild-horses.webp");
}

.sticker-football {
    --stamp-image: url("../stamps/football.webp");
}

.sticker-waterfall {
    --stamp-image: url("../stamps/waterfall.webp");
}

.sticker-dome-rock {
    --stamp-image: url("../stamps/dome-rock.webp");
}

.sticker-sparrow {
    --stamp-image: url("../stamps/sparrow.webp");
}

.sticker-journal {
    --stamp-image: url("../stamps/journal.webp");
}

.sticker-pyramids {
    --stamp-image: url("../stamps/pyramids.webp");
}

.sticker-robot {
    --stamp-image: url("../stamps/robot.webp");
}

.sticker-sailboat {
    --stamp-image: url("../stamps/sailboat.webp");
}

.sticker-coffee {
    --stamp-image: url("../stamps/coffee.webp");
}

.sticker-cat {
    --stamp-image: url("../stamps/cat.webp");
}

.sticker-khanjar {
    --stamp-image: url("../stamps/khanjar.webp");
}

.sticker-birthday {
    --stamp-image: url("../stamps/birthday.webp");
}

.sticker-palm-grove {
    --stamp-image: url("../stamps/palm-grove.webp");
}

.sticker-fortress {
    --stamp-image: url("../stamps/fortress.webp");
}

.sticker-childhood {
    --stamp-image: url("../stamps/childhood.webp");
}

.sticker-giraffe {
    --stamp-image: url("../stamps/giraffe.webp");
}

.sticker-lion {
    --stamp-image: url("../stamps/lion.webp");
}

.sticker-eiffel {
    --stamp-image: url("../stamps/eiffel.webp");
}

.sticker-library {
    --stamp-image: url("../stamps/library.webp");
}

.sticker-olive-branch {
    --stamp-image: url("../stamps/olive-branch.webp");
}

.sticker-ladybug {
    --stamp-image: url("../stamps/ladybug.webp");
}

.sticker-option-art,
.letter-sticker:not(.sticker-sprite) {
    display: block;
    background-image: var(--stamp-image) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.letter-sticker:not(.sticker-sprite) {
    width: 54px;
    height: 72px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.sticker-options {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    max-height: 430px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-gutter: stable;
}

.sticker-options label {
    min-height: 104px;
    padding: 8px 6px;
}

.sticker-options label strong {
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 840px) {
    .editorial-hero-art {
        width: min(82vw, 330px);
    }
}

@media (max-width: 520px) {
    .editorial-hero-art {
        width: min(86vw, 290px);
        border-radius: 18px;
    }

    .sticker-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: 390px;
        gap: 8px;
    }

    .sticker-options label {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-hero-art {
        opacity: 1;
        animation: none;
    }
}