:root {
    --website-bg: #f8fafc;
    --website-card: #ffffff;
    --website-text: #0f172a;
    --website-muted: #64748b;
    --website-border: #e2e8f0;
    --website-primary: #2563eb;
    --website-primary-dark: #1e40af;
    --website-teal: #14b8a6;
    --website-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.24);
    --website-container: 1240px;
    --website-gutter: clamp(1rem, 4vw, 2.5rem);
    --website-font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
    --website-font-ar: "Tajawal", "Cairo", var(--website-font);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.website-shell {
    margin: 0;
    min-height: 100vh;
    color: var(--website-text);
    background: var(--website-bg);
    font-family: var(--website-font);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body.website-shell {
    font-family: var(--website-font-ar);
}

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

button {
    font: inherit;
}

img, svg {
    display: block;
    max-width: 100%;
}

.website-container {
    width: 100%;
    max-width: var(--website-container);
    margin-inline: auto;
    padding-inline: var(--website-gutter);
}

/* The pre-static-port header/brand/nav/lang/icon-button shell used to live here. The public site now
   renders the Sash static-port shell (.site-header / .brand / .nav / .lang-switch / .icon-btn) from
   _WebsiteStaticHeader, so those legacy selectors matched no element on any page. */

.website-main {
    min-height: 55vh;
}

.section {
    padding: clamp(4rem, 8vw, 6.8rem) 0;
}

.section--tight {
    padding: 3rem 0;
}

.section--soft {
    background: linear-gradient(180deg, var(--website-bg) 0%, #fff 100%);
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 15%, rgba(37, 99, 235, 0.16), transparent 32%), radial-gradient(circle at 82% 20%, rgba(20, 184, 166, 0.16), transparent 34%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.section-head {
    max-width: 740px;
    margin-bottom: 3.5rem;
}

    .section-head.center {
        margin-inline: auto;
        text-align: center;
    }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #dbeafe;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .eyebrow.teal {
        background: #ecfdf5;
        color: #0f766e;
        border-color: #ccfbf1;
    }

    .eyebrow.violet {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

.website-main h1, .website-main h2, .website-main h3 {
    margin: 0;
    // color: var(--website-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.website-main h1 {
    font-size: clamp(2.35rem, 5vw, 3.75rem);
    font-weight: 700;
}

.website-main h2 {
    font-size: clamp(1.8rem, 3vw, 2.65rem);
}

.website-main h3 {
    font-size: 1.1rem;
}

.lead {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: #475569;
    line-height: 1.65;
}

.muted {
    color: var(--website-muted);
}

.gradient-text {
    background: linear-gradient(135deg, var(--website-primary), var(--website-teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.row-gap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.grid {
    display: grid;
    gap: 1.125rem;
}

    .grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid.cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

.card {
    background: #fff;
    border: 1px solid var(--website-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .card:hover {
        box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.3);
    }

.feature-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

    .feature-card:hover, .cat-card:hover, .price-card:hover {
        transform: translateY(-3px);
        border-color: #c7d2fe;
    }

.icon-tile {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    background: #eff6ff;
    color: var(--website-primary);
    border: 1px solid #dbeafe;
    font-weight: 700;
}

    .icon-tile.teal {
        background: #ecfdf5;
        color: #0f766e;
        border-color: #ccfbf1;
    }

    .icon-tile.violet {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

    .icon-tile.amber {
        background: #fffbeb;
        color: #b45309;
        border-color: #fde68a;
    }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--website-border);
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
}

    .badge.primary {
        background: #eff6ff;
        color: #1e40af;
        border-color: #dbeafe;
    }

    .badge.teal, .badge.success {
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
    }

    .badge.violet {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

.dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.65rem;
    border: 1px solid var(--website-primary);
    background: var(--website-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 30px -18px rgba(37, 99, 235, 0.7);
}

    .btn.ghost {
        background: #fff;
        color: var(--website-text);
        border-color: var(--website-border);
        box-shadow: none;
    }

    .btn.link {
        background: transparent;
        color: var(--website-primary);
        border-color: transparent;
        box-shadow: none;
        padding-inline: 0.25rem;
    }

    .btn.block {
        width: 100%;
    }

    .btn.lg {
        min-height: 3rem;
        padding-inline: 1.5rem;
    }

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

    .table th, .table td {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--website-border);
        text-align: start;
    }

    .table th {
        background: #f8fafc;
        color: #475569;
        font-size: 0.85rem;
    }

.price-card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    height: 100%;
    position: relative;
    /* A plan name is admin-supplied and can be a long unbroken QA/test code. Without min-width:0 a flex/grid
       child refuses to shrink below its content, so such a name pushed the whole pricing row wider than the
       viewport (measured: 203px of page overflow at 390px). The grid tracks are already minmax(0,1fr); this
       is the matching constraint on the item itself. */
    min-width: 0;
}

    /* overflow-wrap is inherited, so setting it on the card covers the heading (which lives inside
       .price-card__head), the feature list, and any future child. break-word only acts where a normal wrap is
       impossible, so ordinary Arabic and English names still wrap on word boundaries, never character by
       character. */
    .price-card,
    .price-card__head {
        overflow-wrap: break-word;
    }

    /* Every flex child must also be allowed to shrink, otherwise the wrapper keeps the card wide even once the
       text itself can break. */
    .price-card > *,
    .price-card__head > * {
        min-width: 0;
    }

    .price-card__head {
        min-width: 0;
    }

    /* The CTA label is a fixed localized string ("Choose plan"), so it never needs to wrap mid-word; keeping
       it shrinkable stops it forcing the card wider. */
    .price-card .btn {
        min-width: 0;
    }

    .price-card.popular {
        border: 2px solid var(--website-primary);
        box-shadow: 0 20px 40px -16px rgba(37, 99, 235, 0.3);
    }

.price {
    font-size: 2.7rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

    .price small {
        font-size: 0.9rem;
        color: var(--website-muted);
        font-weight: 600;
    }

.price-card ul, .cat-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.price-card li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.92rem;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--website-border);
    border-radius: 0.8rem;
    padding: 1rem 1.2rem;
}

    .faq-item summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-weight: 700;
    }

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

        .faq-item summary::after {
            content: "+";
            color: var(--website-muted);
            font-size: 1.35rem;
            line-height: 1;
        }

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

    .faq-item p {
        margin: 0.75rem 0 0;
        color: #475569;
    }

.doc-hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3rem;
    border-bottom: 1px solid var(--website-border);
    background: linear-gradient(180deg, #eff6ff 0%, var(--website-bg) 100%);
}

.search-box {
    position: relative;
    max-width: 640px;
    margin: 1.75rem auto 0;
}

    .search-box input {
        width: 100%;
        padding: 1rem 1.1rem;
        border-radius: 0.9rem;
        border: 1px solid var(--website-border);
        background: #fff;
        font: inherit;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

.doc-tags {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

    .doc-tags a {
        padding: 0.4rem 0.75rem;
        background: rgba(255,255,255,0.72);
        border: 1px solid var(--website-border);
        border-radius: 999px;
        font-size: 0.8rem;
        color: #475569;
    }

.cat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .cat-card li a {
        display: flex;
        padding: 0.45rem 0.6rem;
        border-radius: 0.55rem;
        color: #475569;
        font-size: 0.9rem;
    }

        .cat-card li a:hover {
            background: #f8fafc;
            color: var(--website-text);
        }

.doc-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.doc-sidebar {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 0.5rem;
}

    .doc-sidebar a {
        padding: 0.55rem 0.7rem;
        border-radius: 0.55rem;
        color: #475569;
    }

        .doc-sidebar a:hover {
            background: #f8fafc;
            color: var(--website-primary);
        }

.doc-content {
    font-size: 1rem;
}

    .doc-content h1, .doc-content h2, .doc-content h3 {
        margin-top: 1.5rem;
    }

    .doc-content p, .doc-content ul, .doc-content ol {
        color: #475569;
    }

    .doc-content pre {
        overflow-x: auto;
        padding: 1rem;
        border-radius: 0.75rem;
        background: #0f172a;
        color: #e2e8f0;
    }

.field {
    display: grid;
    gap: 0.4rem;
}

    .field label {
        font-size: 0.85rem;
        font-weight: 700;
    }

.input, .textarea {
    width: 100%;
    border: 1px solid var(--website-border);
    border-radius: 0.7rem;
    padding: 0.8rem 0.9rem;
    font: inherit;
    background: #fff;
}

.textarea {
    min-height: 150px;
    resize: vertical;
}

.validation-summary-errors {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 0.75rem;
    padding: 1rem;
}

.field-validation-error {
    color: #b91c1c;
    font-size: 0.82rem;
}

.success-card {
    max-width: 640px;
    margin: 4rem auto;
    background: #fff;
    border-radius: 1.5rem;
    padding: clamp(2.25rem, 5vw, 3.5rem);
    box-shadow: var(--website-shadow);
    border: 1px solid var(--website-border);
    text-align: center;
}

.success-title {
    font-size: clamp(26px, 3vw, 36px);
    margin-top: 0.65rem;
}

.success-actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 1.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.success-next {
    margin-top: 1.65rem;
    text-align: start;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.success-next__steps {
    margin: 0.6rem 0 0;
    padding-inline-start: 1.25rem;
    display: grid;
    gap: 0.35rem;
    color: var(--website-text);
}

.success-reference {
    margin-top: 1.5rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1.5rem;
    border-radius: 0.9rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.success-reference__value {
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--website-primary-dark);
}

.check-circle {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #047857);
    color: #fff;
    display: grid;
    place-items: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 18px 40px -12px rgba(16, 185, 129, 0.5);
}

.receipt {
    background: #f8fafc;
    border-radius: 0.9rem;
    padding: 1.2rem;
    margin-top: 1.75rem;
    border: 1px dashed #cbd5e1;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

    .receipt-row .lbl {
        color: var(--website-muted);
    }

    .receipt-row .val {
        font-weight: 700;
    }

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.75rem;
}

.main-card, .summary-card {
    background: #fff;
    border: 1px solid var(--website-border);
    border-radius: 1rem;
    padding: clamp(1.25rem, 2vw, 1.5rem);
    box-shadow: var(--website-shadow);
}

.summary-card {
    position: sticky;
    top: 5.75rem;
}

.builder-title {
    margin-top: 0.65rem;
    font-size: clamp(28px, 3vw, 40px);
}

.builder-lead {
    margin-top: 0.5rem;
    max-width: 720px;
}

.builder-stepper {
    margin-top: 1.75rem;
}

.summary-head {
    margin-bottom: 0.9rem;
}

.summary-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.stepper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--website-muted);
    font-size: 0.85rem;
    min-width: 0;
}

    .step span {
        width: 1.85rem;
        height: 1.85rem;
        border-radius: 999px;
        display: grid;
        place-items: center;
        border: 1px solid var(--website-border);
        background: #fff;
        flex: 0 0 auto;
    }

    .step em {
        font-style: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .step.active span, .step.done span {
        background: var(--website-primary);
        color: #fff;
        border-color: var(--website-primary);
    }

    .step.active {
        color: var(--website-text);
        font-weight: 700;
    }

.plan-card {
    padding: 1.25rem;
    border-radius: 0.9rem;
    border: 2px solid var(--website-border);
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 100%;
}

    .plan-card:hover {
        border-color: #94a3b8;
    }

    .plan-card.selected {
        border-color: var(--website-primary);
        background: linear-gradient(180deg, #fff 0%, #eff6ff 100%);
    }

    .plan-card input {
        align-self: flex-start;
    }

    .plan-card .price {
        font-size: 1.8rem;
        font-weight: 700;
    }

.plan-card__meta {
    color: var(--website-muted);
    font-size: 0.86rem;
}

.plan-card__cta {
    pointer-events: none;
    margin-top: auto;
}

.builder-help-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
}

.builder-actions {
    margin-top: 2rem;
}

.card.flat {
    box-shadow: none;
}

.card.builder-callout {
    padding: 1.4rem;
    background: linear-gradient(135deg, #fff, #eff6ff);
    border-color: #dbeafe;
}

.builder-actions-grid {
    margin-top: 1rem;
}

.builder-login-card {
    margin-top: 1rem;
}

.limit-card {
    gap: 0.55rem;
}

.limit-input {
    font-weight: 700;
}

.duration-picker {
    padding: 1rem;
    border: 1px solid var(--website-border);
    border-radius: 0.8rem;
    background: #f8fafc;
}

.upload-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
    gap: 1rem;
    align-items: center;
    padding: 1.2rem;
    border: 1px dashed #93c5fd;
    border-radius: 1rem;
    background: #eff6ff;
}

.upload-box {
    display: grid;
    place-items: center;
    min-height: 130px;
    padding: 1rem;
    border: 1px dashed #60a5fa;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    color: #1e40af;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

    .upload-box input {
        width: 100%;
        max-width: 220px;
        margin-bottom: 0.65rem;
    }

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

.sum-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    padding: 0.45rem 0;
}

    .sum-row.head {
        font-weight: 700;
        font-size: 0.8rem;
        color: var(--website-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .sum-row .lbl {
        color: var(--website-muted);
    }

    .sum-row .val {
        text-align: end;
        font-weight: 700;
    }

.sum-total {
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    color: #fff;
    padding: 1rem;
    border-radius: 0.8rem;
    margin-top: 0.85rem;
}

    .sum-total .big {
        margin-top: 0.25rem;
        font-size: 1.7rem;
        font-weight: 700;
    }

.select {
    width: 100%;
    border: 1px solid var(--website-border);
    border-radius: 0.7rem;
    padding: 0.8rem 0.9rem;
    font: inherit;
    background: #fff;
}

.alert {
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
}

    .alert.success {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #047857;
    }

    .alert.warning {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
    }

.success-page {
    background: linear-gradient(180deg, #ecfdf5 0%, var(--website-bg) 50%);
}

/* The legacy .website-footer grid was replaced by _WebsiteStaticFooter's .site-footer. */

@media (max-width: 860px) {
    .hero-grid, .doc-layout, .builder-layout {
        grid-template-columns: 1fr;
    }

    .doc-sidebar {
        position: static;
    }

    .summary-card {
        position: static;
    }

    .stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.cols-2, .grid.cols-3, .grid.cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .builder-help-card, .upload-panel, .review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) and (min-width: 861px) {
    .grid.cols-4, .grid.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================
   Website marketing parity (Home + Pricing static-design parity)
   All styles external (CSP-safe); no inline styles in views.
   ============================================================ */

/* Small layout utilities to keep Razor markup free of inline styles */
.u-center {
    text-align: center;
}

.u-mt-sm {
    margin-top: 0.85rem;
}

.u-mt-md {
    margin-top: 1.5rem;
}

.u-mt-lg {
    margin-top: 2.25rem;
}

.u-maxw {
    max-width: 760px;
    margin-inline: auto;
}

.u-mta {
    margin-top: auto;
}

/* Hero supporting card metrics */
.hero-lead {
    max-width: 560px;
}

.hero-card {
    min-height: 420px;
    box-shadow: var(--website-shadow);
}

.hero-card {
    position: relative;
}

.hero-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.hero-spark {
    margin-top: 1.25rem;
    background: #f8fafc;
}

.hero-proof-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
}

.avatar-stack {
    display: flex;
}

.avatar {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    margin-inline-end: -0.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--website-primary), #7c3aed);
    font-size: 0.72rem;
    font-weight: 800;
}

.avatar--teal {
    background: linear-gradient(135deg, var(--website-teal), #0ea5e9);
}

.avatar--amber {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    margin-inline-end: 0;
}

.stars {
    color: #f59e0b;
    letter-spacing: 0.03em;
}

.hero-float {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    box-shadow: var(--website-shadow);
    font-size: 0.78rem;
    max-width: 260px;
}

    .hero-float .icon-tile {
        width: 2rem;
        height: 2rem;
        border-radius: 0.65rem;
        flex: none;
    }

.hero-float--top {
    top: -1.25rem;
    inset-inline-end: -1rem;
}

.hero-float--left {
    bottom: 4.5rem;
    inset-inline-start: -1.35rem;
}

.hero-float--bottom {
    bottom: -1.1rem;
    inset-inline-end: 1.25rem;
}

/* Trusted-by logo strip */
.logo-strip {
    margin-top: 4.5rem;
    text-align: center;
}

.logo-strip__label {
    color: var(--website-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    margin-bottom: 1.1rem;
}

.logo-strip__row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 4vw, 2.5rem);
    justify-content: center;
    align-items: center;
    opacity: 0.72;
    filter: grayscale(1);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.flow-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.6rem;
    margin-bottom: 2.25rem;
    overflow: hidden;
    color: #94a3b8;
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--website-border);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.tag--teal {
    background: #ecfdf5;
    color: #0f766e;
    border-color: #ccfbf1;
}

/* Stats band */
.stats-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.125rem;
}

.stat {
    text-align: center;
    padding: 1.5rem 1rem;
}

.stat__num {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.stat__label {
    color: var(--website-muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Split / outcome layout (About, Goal) */
.split {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.split--lead {
    grid-template-columns: 1.2fr 1fr;
}

.outcome {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--website-border);
    border-radius: 0.85rem;
}

    .outcome + .outcome {
        margin-top: 0.85rem;
    }

.outcome__title {
    font-weight: 700;
}

.outcome__desc {
    color: var(--website-muted);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.benefit-card {
    padding: 1.25rem;
    display: grid;
    gap: 0.8rem;
    align-content: start;
    min-height: 130px;
}

    .benefit-card .icon-tile {
        width: 2.25rem;
        height: 2.25rem;
    }

    .benefit-card h3 {
        font-size: 0.98rem;
    }

.testimonial-card {
    min-height: 230px;
}

.journey-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.125rem;
}

.journey-step {
    padding: 1.1rem;
    border: 1px solid var(--website-border);
    border-radius: 0.75rem;
    background: #fff;
    transition: border-color .2s, transform .2s;
}

    .journey-step:hover {
        border-color: var(--website-primary);
        transform: translateY(-2px);
    }

    .journey-step .num {
        width: 1.9rem;
        height: 1.9rem;
        display: grid;
        place-items: center;
        margin-bottom: 0.75rem;
        border-radius: 999px;
        background: #eff6ff;
        color: #1e40af;
        font-weight: 800;
        font-size: 0.85rem;
    }

    .journey-step h3 {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    .journey-step p {
        margin: 0;
        color: var(--website-muted);
        font-size: 0.84rem;
        line-height: 1.5;
    }

/* Dark security & trust band */
.section--dark {
    background: #0b1320;
    color: #fff;
}

    .section--dark h2, .section--dark h3 {
        color: #fff;
    }

    .section--dark .eyebrow {
        background: rgba(20, 184, 166, 0.18);
        color: #5eead4;
        border-color: rgba(94, 234, 212, 0.3);
    }

    .section--dark .lead, .section--dark .muted {
        color: #94a3b8;
    }

.card--glass {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

    .card--glass:hover {
        border-color: rgba(94, 234, 212, 0.4);
    }

    .card--glass h3 {
        color: #fff;
    }

    .card--glass p {
        color: #94a3b8;
    }

/* Pricing parity: billing toggle, popular badge, checkmark bullets */
.bill-toggle {
    display: inline-flex;
    /* Monthly/yearly labels can exceed a 390px viewport (notably in Arabic), so the pill must be
       allowed to wrap and stay inside its container instead of widening the page. */
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding: 0.25rem;
    background: #fff;
    border: 1px solid var(--website-border);
    border-radius: 999px;
    gap: 0.25rem;
}

.bill-toggle__btn {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--website-muted);
    font-weight: 650;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .bill-toggle__btn.is-active {
        background: var(--website-primary);
        color: #fff;
        box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.8);
    }

.pop-badge {
    position: absolute;
    top: -0.75rem;
    inset-inline-end: 1.5rem;
    background: var(--website-primary);
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.5);
}

.price-card__head {
    display: grid;
    gap: 0.35rem;
}

.price-card .ck {
    color: var(--website-teal);
    flex: none;
    margin-top: 0.15rem;
}

.price-card .price small {
    display: inline;
}

.price-cycle-note {
    color: var(--website-muted);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

.original-price {
    color: var(--website-muted);
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.original-price s {
    text-decoration-thickness: 2px;
}

.duration-saving {
    display: inline-flex;
    margin-top: 0.5rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 0.8rem;
    font-weight: 650;
}

.cta-band {
    background: linear-gradient(135deg, #fff 0%, #eff6ff 70%, #ecfdf5 100%);
    border-color: #dbeafe;
}

@media (max-width: 860px) {
    .stats-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split, .split--lead {
        grid-template-columns: 1fr;
    }

    .hero-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-float {
        position: static;
        margin-top: 0.85rem;
        max-width: none;
    }

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

    .flow-ribbon {
        justify-content: flex-start;
    }
}

@media (max-width: 1024px) and (min-width: 861px) {
    .journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------
   Website header account cluster (WebsiteHeaderAccount view component).
   Shared by both header shells; light theme; RTL-aware via logical properties.
   --------------------------------------------------------------------------- */
/* The notification bell is now the static-port .icon-btn + .badge-dot pair; the former
   .wsa-bell/__icon/__badge styles matched nothing. */

.wsa-account {
    position: relative;
}

/* The account trigger is now the static-port .profile-btn / .profile-avatar / .profile-name /
   .profile-chev set (see Components/WebsiteHeaderAccount/Default.cshtml); the former
   .wsa-account__toggle/__avatar/__name/__caret trigger styles matched nothing. The dropdown panel
   below (.wsa-account__menu / __item / __logout) is still the live markup. */

.wsa-account__menu {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    inset-inline-end: 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: .4rem;
    border-radius: 14px;
    background: var(--website-card);
    border: 1px solid var(--website-border);
    box-shadow: var(--website-shadow);
    z-index: 60;
}

.wsa-account__item {
    display: block;
    width: 100%;
    text-align: start;
    padding: .55rem .7rem;
    border-radius: 10px;
    color: var(--website-text);
    font-size: .92rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .wsa-account__item:hover {
        background: var(--website-bg);
        color: var(--website-primary);
    }

.wsa-account__logout {
    margin: 0;
    border-block-start: 1px solid var(--website-border);
    margin-block-start: .25rem;
    padding-block-start: .25rem;
}

/* The notification inbox no longer has a layout of its own. It renders on the shared account surface in
   assets/site/css/custom/account.css, together with My Orders and My Profile, so the three account pages
   look like one product. The `.notifications-page`, `.notification-item`, `.is-unread`, and
   `.notification-item__unread` hooks still exist in the markup because notifications.js reads them, but
   their appearance is defined there rather than here. */

/* Screen-reader-only text. Views across the public website (Pricing, the Custom Plan limits step, the
   Standard Plan duration fieldset) already relied on this utility, but the website bundle never defined
   it, so those labels rendered as ordinary visible text instead of being announced only to assistive
   technology. It lives here, in the base bundle every website page loads, rather than in a
   page-specific stylesheet. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}