/* Help, company and legal pages. Uses the tokens defined in app.css.
   Layout: a blue band (under the floating header) with the page title, and
   white clay content overlapping its bottom edge. Logical properties only. */

/* ---------- Home FAQ: link to the help page ---------- */

.faq-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
}
.faq-more-icon { transform: rotate(-90deg); }
[dir="rtl"] .faq-more-icon { transform: rotate(90deg); }

/* ---------- Page frame ---------- */

.info-page { padding-bottom: var(--space-14); }

.info-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--header-h) + var(--space-12)) 0 calc(var(--space-14) + var(--space-8));
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    background: var(--dots), var(--blue-block);
    box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08);
    color: #fff;
}

.info-hero-inner {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
}

.info-hero-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-1);
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 12px 20px -10px rgba(5, 25, 70, .6), inset 0 -4px 0 rgba(16, 64, 150, .1), inset 0 3px 4px rgba(255, 255, 255, .9);
}

.info-hero-title {
    font: 600 var(--text-3xl)/1.15 var(--font-display);
    color: #fff;
    text-wrap: balance;
}
[dir="rtl"] .info-hero-title { line-height: 1.4; font-weight: 700; }

.info-hero-intro {
    max-width: 60ch;
    color: var(--blue-tint);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.6;
}

.info-updated {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
}

/* Decorative clay shapes on the band */
.info-hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.info-shape {
    position: absolute;
    display: block;
    box-shadow: 0 14px 22px -10px rgba(5, 25, 70, .55), inset 0 -6px 0 rgba(0, 0, 0, .12), inset 0 5px 8px rgba(255, 255, 255, .55);
}
.info-shape-sun {
    width: 84px;
    height: 84px;
    top: -32px;
    inset-inline-end: -24px;
    border-radius: 50%;
    background: var(--sun-strong);
}
.info-shape-coral {
    width: 72px;
    height: 28px;
    bottom: var(--space-12);
    inset-inline-end: -32px;
    border-radius: 999px;
    background: #FF7A66;
    transform: rotate(-14deg);
}

/* Content overlapping the band */
.info-body {
    position: relative;
    margin-top: calc(-1 * var(--space-14));
}

.info-card {
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    border: 4px solid #fff;
    border-radius: var(--r-xl);
    box-shadow: var(--clay);
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    .info-card { padding: var(--space-10); }
}

@media (min-width: 960px) {
    .info-page { padding-bottom: calc(var(--space-12) * 2); }
    .info-hero {
        margin-inline: var(--space-5);
        padding-top: calc(var(--header-h) + var(--space-14) + var(--space-4));
        padding-bottom: calc(var(--space-14) + var(--space-12));
        border-radius: 0 0 56px 56px;
    }
    .info-hero-title { font-size: var(--text-display); }
    .info-hero-icon { width: 64px; height: 64px; }
    .info-body { margin-top: calc(-1 * (var(--space-14) + var(--space-4))); }
    .info-shape-sun {
        width: 132px;
        height: 132px;
        top: calc(var(--header-h) + var(--space-12));
        inset-inline-end: max(var(--space-6), calc(50% - 560px));
    }
    .info-shape-coral {
        width: 120px;
        height: 44px;
        bottom: var(--space-14);
        inset-inline-end: auto;
        inset-inline-start: max(var(--space-6), calc(50% - 560px));
    }
}

/* ---------- Related pages ---------- */

.related { margin-top: var(--space-8); }
.related-title {
    font: 600 var(--text-xl)/1.3 var(--font-display);
    color: var(--ink);
}
[dir="rtl"] .related-title { font-weight: 700; }
.related-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}
.related-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-1) var(--space-4);
    border: var(--border) solid #fff;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--clay-sm);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s var(--bounce), box-shadow .2s ease-out, background-color .2s;
}
.related-link .icon { color: var(--blue); }
.related-link:hover { background: var(--blue-tint); }
.related-link:active { transform: translateY(2px); box-shadow: var(--clay-pressed); }

/* ---------- Legal pages ---------- */

.toc {
    padding: var(--space-5);
    border-radius: var(--r-lg);
    background: var(--sky);
    box-shadow: inset 0 -5px 0 rgba(16, 64, 150, .06), inset 0 3px 6px rgba(255, 255, 255, .8);
}
.toc-title {
    font: 600 var(--text-lg)/1.3 var(--font-display);
    color: var(--ink);
}
[dir="rtl"] .toc-title { font-weight: 700; }
.toc-list {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}
.toc-list li { counter-increment: toc; }
.toc-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--r-sm);
    color: #1A4890;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
.toc-list a::before {
    content: counter(toc);
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font: 700 var(--text-sm)/1 var(--font-num);
    box-shadow: var(--clay-sm);
}
.toc-list a:hover { background: rgba(255, 255, 255, .6); text-decoration: underline; }

@media (min-width: 640px) {
    .toc-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
}

.legal-section { margin-top: var(--space-8); }
.legal-section + .legal-section {
    padding-top: var(--space-8);
    border-top: 2px solid var(--bg);
}
.legal-heading {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font: 600 var(--text-xl)/1.3 var(--font-display);
    color: var(--ink);
}
[dir="rtl"] .legal-heading { line-height: 1.5; font-weight: 700; }
.legal-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font: 700 var(--text-base)/1 var(--font-num);
    box-shadow: 0 8px 14px -8px rgba(22, 119, 242, .8), inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .25);
}
.legal-section p {
    max-width: 66ch;
    margin-top: var(--space-3);
    color: #3D4F6E;
    font-weight: 400;
    line-height: 1.6;
}
[dir="rtl"] .legal-section p { line-height: 1.8; }
.legal-section a,
.about-block a { font-weight: 700; overflow-wrap: anywhere; }

@media (min-width: 640px) {
    .legal-section p { padding-inline-start: calc(32px + var(--space-3)); }
}

/* ---------- Help page ---------- */

.help.container { max-width: 960px; }

.quick-links {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.quick-links li { display: grid; }
.quick-link {
    --tint: var(--sky);
    --strong: var(--blue);
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 4px solid rgba(255, 255, 255, .75);
    border-radius: var(--r-lg);
    background: var(--tint);
    box-shadow: var(--clay);
    color: var(--ink);
    text-decoration: none;
    transition: transform .25s var(--bounce), box-shadow .2s ease-out;
    -webkit-tap-highlight-color: transparent;
}
.quick-links li:nth-child(2) .quick-link { --tint: var(--mint); --strong: var(--mint-strong); }
.quick-links li:nth-child(3) .quick-link { --tint: var(--sun); --strong: #B07800; }
.quick-link:hover { transform: translateY(-4px); }
.quick-link:active { transform: translateY(2px); box-shadow: var(--clay-sm); }

.quick-link-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--strong);
    box-shadow: var(--clay-sm);
}
.quick-link-body { display: grid; gap: var(--space-1); min-width: 0; }
.quick-link-title { font: 600 var(--text-xl)/1.25 var(--font-display); }
[dir="rtl"] .quick-link-title { font-weight: 700; line-height: 1.5; }
.quick-link-text { color: #33476A; font-size: var(--text-base); font-weight: 400; line-height: 1.5; }
.quick-link-arrow {
    padding: var(--space-2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    color: var(--strong);
    transform: rotate(-90deg);
}
[dir="rtl"] .quick-link-arrow { transform: rotate(90deg); }

@media (min-width: 720px) {
    .quick-links { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
    .quick-link {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        align-items: start;
        height: 100%;
        padding: var(--space-6);
    }
    .quick-link-icon { grid-column: 1; grid-row: 1; width: 64px; height: 64px; }
    .quick-link-arrow { grid-column: 2; grid-row: 1; }
    .quick-link-body { grid-column: 1 / -1; grid-row: 2; }
}

.help-faq {
    max-width: 760px;
    margin: var(--space-12) auto 0;
}

.still-help {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: start;
    gap: var(--space-4);
    max-width: 760px;
    margin: var(--space-12) auto 0;
    padding: var(--space-6) var(--space-5);
    border: 4px solid rgba(255, 255, 255, .7);
    border-radius: var(--r-xl);
    background: var(--lilac);
    box-shadow: var(--clay);
}
.still-help-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--lilac-strong);
    box-shadow: var(--clay-sm);
}
.still-help-body { display: grid; gap: var(--space-2); min-width: 0; }
.still-help-title { font: 600 var(--text-2xl)/1.25 var(--font-display); color: var(--ink); }
[dir="rtl"] .still-help-title { font-weight: 700; line-height: 1.5; }
.still-help-body p { color: #3D3A66; font-weight: 400; line-height: 1.6; }
.still-help-button { grid-column: 1 / -1; width: 100%; }
.still-help-email {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.still-help-email a { color: #4A33C9; }

@media (min-width: 640px) {
    .still-help {
        grid-template-columns: 64px 1fr auto;
        align-items: center;
        gap: var(--space-4) var(--space-6);
        padding: var(--space-8);
    }
    .still-help-icon { width: 64px; height: 64px; }
    .still-help-button { grid-column: auto; width: auto; }
    .still-help-email { grid-column: 2 / -1; text-align: start; }
}

/* ---------- Contact page ---------- */

.contact-email {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4) var(--space-4);
    border-radius: var(--r-lg);
    background: var(--sky);
    box-shadow: inset 0 -5px 0 rgba(16, 64, 150, .06), inset 0 3px 6px rgba(255, 255, 255, .8);
    text-align: center;
}
.contact-email-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    box-shadow: var(--clay-sm);
}
.contact-email-title { font: 600 var(--text-2xl)/1.25 var(--font-display); color: var(--ink); }
[dir="rtl"] .contact-email-title { font-weight: 700; line-height: 1.5; }
.contact-email-text { color: #3E5578; font-weight: 400; line-height: 1.6; }
.contact-email-button {
    margin-top: var(--space-3);
    min-height: 60px;
    padding-inline: var(--space-4);
}
.contact-email-button span {
    min-width: 0;
    overflow-wrap: break-word;
}
@media (max-width: 399px) {
    .contact-email-button { font-size: var(--text-base); }
}

@media (min-width: 640px) {
    .contact-email { padding: var(--space-8); }
    .contact-email-button { font-size: var(--text-xl); }
}

.contact-tips { margin-top: var(--space-8); }
.contact-tips-title {
    font: 600 var(--text-xl)/1.3 var(--font-display);
    color: var(--ink);
}
[dir="rtl"] .contact-tips-title { font-weight: 700; line-height: 1.5; }

.checklist {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: #3D4F6E;
    font-weight: 500;
    line-height: 1.6;
}
.checklist-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--mint-strong);
    box-shadow: inset 0 -2px 0 rgba(15, 168, 120, .2);
}

.contact-more {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 2px solid var(--bg);
}
.contact-more p { color: var(--ink-2); font-weight: 500; }
.contact-more-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- About page ---------- */

.about-blocks { display: grid; gap: var(--space-4); }
.about-block {
    --tint: var(--sky);
    --strong: var(--blue);
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-5);
    border-radius: var(--r-lg);
    background: var(--tint);
    box-shadow: inset 0 -5px 0 rgba(16, 64, 150, .06), inset 0 3px 6px rgba(255, 255, 255, .8);
}
.about-block:nth-child(3n+2) { --tint: var(--mint); --strong: var(--mint-strong); }
.about-block:nth-child(3n) { --tint: var(--sun); --strong: #B07800; }
.about-block-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--strong);
    box-shadow: var(--clay-sm);
}
.about-block-body { display: grid; gap: var(--space-2); min-width: 0; }
.about-block-title { padding-top: var(--space-1); font: 600 var(--text-xl)/1.3 var(--font-display); color: var(--ink); }
[dir="rtl"] .about-block-title { font-weight: 700; line-height: 1.5; }
.about-block p { max-width: 66ch; color: #33476A; font-weight: 400; line-height: 1.6; }

.about-cta { margin-top: var(--space-6); }

@media (max-width: 359px) {
    .about-block { grid-template-columns: 1fr; }
    .quick-link { grid-template-columns: 48px 1fr auto; gap: var(--space-3); padding: var(--space-4); }
    .quick-link-icon { width: 48px; height: 48px; }
    .still-help { grid-template-columns: 1fr; }
}