/* Homepage Showcase v1 (2026-10-08) — "One conversation, start to finish".
   Homepage-only styles for the hero (Direction D, 2026-10-09), the
   homepage's quiet header, #before-after, #story and #also.
   Rules this file keeps:
   * Real Wesal screens are never shrunk below the size they were captured
     at: desktop crops render 1:1 (each <img>/<source> carries the crop's
     CSS size), and below 720px the 360px phone crops run full-bleed, so the
     product's own text is never smaller on the homepage than in the product.
     The one exception is the hero's 1016px crop between 1024 and 1047px
     wide, where it renders at ≥97%.
   * Logical properties only — the same CSS lays out Arabic (RTL) and
     English (LTR); the captures themselves are never mirrored.
   * Nothing here animates. Static-first: no sticky stage (Owner decision
     O-7), no anim-* class on any proof element.
   * Colours come from the shared tokens (style.css), so dark mode follows
     (the hero keeps its own tokens, keyed on html.dark-mode — see below);
     the light captures keep a bordered frame in both themes. */

/* Only the active language's captures render. The inactive <picture> is
   display:none, so its lazy <img> is never fetched. */
html[lang="en"] .sc-fig .loc-ar,
html:not([lang="en"]) .sc-fig .loc-en { display: none; }

/* The sticky header (74px) never covers a section or chapter a link or a
   keyboard focus scrolls to (WCAG 2.4.11). */
#before-after, #story, #also, #demo, #pricing, #faq, #contact, .chapter { scroll-margin-top: 92px; }

/* ── Shared figure frame ── */
.sc-fig { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sc-fig picture { display: contents; }
.sc-fig img {
    display: block;
    max-width: 100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11, 37, 69, 0.06), 0 12px 32px -12px rgba(11, 37, 69, 0.18);
}
body.dark-mode .sc-fig img { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.sc-fig figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

/* ── Hero — Direction D (2026-10-09): product-first, editorial ──
   A white canvas, one centred statement, one primary action, one text link,
   then the real Inbox (SH-01) as the largest object on the screen. No badge,
   gradient, glow, floating card, device/browser frame or fade mask.
   Colours are hero-local and keyed on html.dark-mode, which the <head>
   bootstrap sets before first paint — not on the body tokens, which only
   switch when theme-lang.js runs — so a dark-theme visitor never sees a
   light hero first. Contrast (light / dark): ink 15.4:1 / 16.1:1, lead
   7.5:1 / 10.4:1, note 5.6:1 / 8.5:1, link 7.1:1 / 7.8:1, CTA label
   4.8:1 / 6.4:1, focus ring 4.8:1 / 7.8:1. */
.home-hero {
    --hh-bg: #FFFFFF;
    --hh-ink: #0B2545;
    --hh-ink-2: #44566E;
    --hh-ink-3: #566A80;
    --hh-line: #E3E8EF;
    --hh-cta: #0A7E8C;
    --hh-cta-hover: #075E69;
    --hh-on-cta: #FFFFFF;
    --hh-link: #07626D;
    --hh-ring: #0A7E8C;
    background: var(--hh-bg);
    color: var(--hh-ink);
    padding: 56px 0 64px;
    border-bottom: 1px solid var(--hh-line);
}
html.dark-mode .home-hero {
    --hh-bg: #0A1120;
    --hh-ink: #E8EDF6;
    --hh-ink-2: #B4C2D6;
    --hh-ink-3: #9FB0C7;
    --hh-line: #223050;
    --hh-cta: #2FB7C6;
    --hh-cta-hover: #43C7D6;
    --hh-on-cta: #0B2545;
    --hh-link: #2FB7C6;
    --hh-ring: #2FB7C6;
}
/* Nothing in the hero waits for theme-lang.js (every string is in the
   markup in both languages), so the hero is exempt from style.css's
   page-wide .i18n-pending visibility gate: it paints at first paint, in the
   right language, and never swaps text afterwards. */
html.i18n-pending .home-hero { visibility: visible; }
html[lang="en"] .home-hero [data-l="ar"],
html:not([lang="en"]) .home-hero [data-l="en"] { display: none; }

.hh-copy { text-align: center; }
/* One statement, two balanced lines on desktop in both languages. */
.home-hero h1 {
    margin: 0 auto;
    max-width: 880px;
    font-size: 54px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--hh-ink);
    text-wrap: balance;
}
html[lang="en"] .home-hero h1 { max-width: 820px; line-height: 1.12; letter-spacing: -0.02em; }
.hh-lead {
    margin: 18px auto 0;
    max-width: 600px;
    font-size: 19px;
    line-height: 1.7;
    color: var(--hh-ink-2);
    text-wrap: balance;
}
html[lang="en"] .hh-lead { max-width: 680px; line-height: 1.6; }
/* Editorial line breaks: the H1 breaks between its two phrases and the
   lead between its two sentences, never mid-phrase (no dangling «من», no
   one-word last line). Phones reflow the English H1 and lead; the Arabic
   lead keeps one sentence per line there too, so its break points are the
   same in the fallback font and in the web font (no reflow at the swap). */
.home-hero .hh-ph { display: block; }
.home-hero .hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 28px;
}
/* Beats style.css's dark-hero CTA rules (white fill, lift on hover, white
   focus ring), which assumed the old navy gradient. */
body.landing-body .home-hero .hero-actions .hh-cta {
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 10px;
    background: var(--hh-cta);
    color: var(--hh-on-cta);
    font-size: 16px;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}
body.landing-body .home-hero .hero-actions .hh-cta:hover { background: var(--hh-cta-hover); color: var(--hh-on-cta); transform: none; box-shadow: none; }
.home-hero .hh-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--hh-link);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    cursor: pointer;
}
.home-hero .hh-link:hover { text-decoration-thickness: 2px; }
.home-hero .hero-cta-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--hh-ink-3); }
body.landing-body .home-hero .hero-actions a:focus-visible {
    outline: 3px solid var(--hh-ring);
    outline-offset: 3px;
    border-radius: 10px;
}

/* The product: rendered 1:1 (1016 CSS px inside a 1px border) from 1050px
   up, never below 97% of capture size at ≥1024px; the phone crop below. */
.hh-proof { margin: 44px auto 0; width: min(1018px, 100% - 32px); }
.hh-proof figcaption {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hh-ink-3);
    text-align: start;
}
.hh-shot { display: contents; }
.hh-proof img {
    display: block;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11, 37, 69, 0.06), 0 16px 40px -24px rgba(11, 37, 69, 0.28);
}
html.dark-mode .hh-proof img { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
/* Until the inline script has chosen the active-language file (it runs
   during parsing, before first paint) the <img> has no src. */
.hh-shot img:not([src]) { display: none; }

@media (max-width: 1023px) {
    .home-hero { padding: 40px 0 48px; }
    .home-hero h1 { font-size: 42px; max-width: 640px; }
    .hh-lead { font-size: 17px; }
    /* The 360px phone crop, at 1.17× (the 2× file stays sharp). */
    .hh-proof { width: 422px; margin-top: 36px; }
}
@media (max-width: 719px) {
    .home-hero { padding: 28px 0 32px; }
    .hh-copy { text-align: start; }
    .home-hero h1 { font-size: 32px; line-height: 1.4; max-width: none; margin: 0; }
    /* Arabic: sized from the viewport so each phrase keeps one line — the
       longer phrase measures 11.26em, so (100vw - 32px) / 11.6 leaves 3%
       slack (28.3px at 360, 30.9px at 390, 34px from 426). */
    html:not([lang="en"]) .home-hero h1 { font-size: clamp(24px, calc((100vw - 32px) / 11.6), 34px); }
    html[lang="en"] .home-hero h1 { line-height: 1.18; letter-spacing: -0.015em; }
    .hh-lead { font-size: 16px; line-height: 1.65; margin: 12px 0 0; max-width: none; text-wrap: wrap; }
    html[lang="en"] .hh-lead .hh-ph, html[lang="en"] .home-hero h1 .hh-ph { display: inline; }
    /* Reserved geometry: the Arabic lead is 2 lines in IBM Plex Sans Arabic
       but 3 in the wider system fallback painted before the web font
       arrives (whose line boxes run ~1px taller), so it keeps 3 lines + 4px
       of room — the font swap then never moves the CTA or the screenshot
       (measured: the swap was the hero's only remaining layout shift on
       phones). */
    html:not([lang="en"]) .hh-lead { min-height: calc(3 * 1.65em + 4px); }
    html:not([lang="en"]) .home-hero .hero-actions { margin-top: 8px; }
    .home-hero .hero-actions { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 20px; }
    body.landing-body .home-hero .hero-actions .hh-cta { width: 100%; white-space: normal; }
    .home-hero .hh-link { justify-content: center; }
    .home-hero .hero-cta-note { margin-top: 4px; font-size: 13px; text-align: center; }
    /* Phone: the screen runs edge to edge (≥ its captured 360px width). */
    .hh-proof { width: min(100%, 430px); margin-top: 24px; }
    .hh-proof figcaption { padding-inline: 16px; font-size: 12.5px; }
}
@media (max-width: 430px) {
    .hh-proof img { border-radius: 0; border-inline-width: 0; }
}

/* The floating support launcher (reportBotWidget.js) waits until the visitor
   has passed the hero: html.hh-hero-in-view is set by js/homeShowcase.js
   (homepage only). visibility:hidden also takes it out of the Tab order and
   the accessibility tree while hidden; an open panel's button and a focused
   button are never hidden, and once the visitor has opened the assistant
   (html.hh-support-engaged) it stays visible. */
html.hh-hero-in-view:not(.hh-support-engaged) #wesalReportBotRoot .rb-toggle:not(.open):not(:focus) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Homepage-only quiet header (.landing-header--home, index.html) ──
   The language control is plain text ("English" / "العربية") at every
   width: no pill, no globe icon (style.css's drawer tier turns it into an
   icon-only circle on other pages). 38px tall, so the target stays ≥24px. */
.landing-header--home .nav-lang-btn,
.landing-header--home .nav-lang-btn:hover {
    width: auto;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    border-color: transparent !important;
    box-shadow: none;
    transform: none;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 5px;
}
.landing-header--home .nav-lang-btn span { display: inline; }

/* ── Below 720px every Story/Also capture is a 360px phone crop: full-bleed,
   so it is shown at ≥ its captured size (never shrunk on a 360px phone). ── */
@media (max-width: 719px) {
    .sc-fig img {
        width: min(calc(100% + 32px), 430px);
        max-width: none;
        margin-inline: calc((100% - min(calc(100% + 32px), 430px)) / 2);
        border-radius: 0;
        border-inline-width: 0;
    }
}

/* ── Before / after ── */
.ba-section { padding: 64px 0; background: var(--bg-card); border-bottom: 1px solid var(--border-color); }
body.dark-mode .ba-section { background: var(--bg-sidebar); }
.ba-title { text-align: center; font-size: var(--fs-xl); font-weight: 800; color: var(--text-main); max-width: 760px; margin: 0 auto 28px; line-height: 1.5; }
.ba-list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; gap: 12px; }
.ba-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-cell { margin: 0; padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.7; }
.ba-was { background: var(--bg-main); color: var(--text-muted); border: 1px solid var(--border-color); }
.ba-now { background: var(--bg-main); color: var(--text-main); border: 1px solid var(--border-color); border-inline-start: 3px solid #0A7E8C; font-weight: 600; }
.ba-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.ba-now .ba-label { color: var(--wa-green-ink); }
@media (max-width: 719px) {
    .ba-section { padding: 44px 0; }
    .ba-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Story ── */
.story-section { padding: 88px 0 72px; background: var(--bg-main); }
.story-section .section-title { margin-bottom: 40px; }
.chapter { padding: 36px 0; border-top: 1px solid var(--border-color); }
.chapter-text h3 { font-size: 24px; font-weight: 800; color: var(--text-main); line-height: 1.45; margin: 0 0 10px; }
.chapter-text p { font-size: 16px; line-height: 1.85; color: var(--text-muted); margin: 0; max-width: 520px; }
.chapter-text p.chapter-note { margin-top: 10px; font-size: 14px; }
@media (min-width: 1200px) {
    /* Text inline-start, image inline-end — the same side every chapter. */
    .chapter { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 56px; align-items: center; }
}
@media (max-width: 1199px) {
    .chapter-text { text-align: center; margin-bottom: 22px; }
    .chapter-text p { margin-inline: auto; }
}
@media (max-width: 719px) {
    .story-section { padding: 52px 0 44px; }
    .chapter { padding: 28px 0; }
    .chapter-text h3 { font-size: 20px; }
    .chapter-text p { font-size: 15px; }
}
.story-cta { display: flex; justify-content: center; padding: 8px 0 36px; }
.story-cta .btn, .cta-band .btn { min-height: 48px; }

/* The one brand band on the page. */
.cta-band {
    margin-top: 28px; padding: 40px 24px; border-radius: 20px; text-align: center;
    background: linear-gradient(135deg, #0B2545 0%, #0F3460 60%, #0A7E8C 100%);
    color: #FFFFFF;
}
.cta-band h3 { color: #FFFFFF; font-size: 26px; font-weight: 800; margin: 0 0 18px; }
.cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-primary { background: #FFFFFF; color: var(--wa-green-deeper); font-weight: 800; border: 0; }
.cta-band .btn-ghost { background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.55); color: #FFFFFF; font-weight: 700; }
.cta-band .btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.cta-band-note { margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.92); }

/* ── Also included ── */
.also-section { padding: 72px 0; background: var(--bg-card); border-top: 1px solid var(--border-color); }
body.dark-mode .also-section { background: var(--bg-sidebar); }
.also-text h2 { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-main); margin: 0 0 18px; }
.also-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.also-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.7; color: var(--text-main); }
.also-list i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 126, 140, 0.1); color: #07626D; font-size: 15px; margin-top: 1px; }
body.dark-mode .also-list i { color: #5FD3DE; background: rgba(95, 211, 222, 0.12); }
@media (min-width: 1200px) {
    .also-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: center; }
}
@media (max-width: 1199px) {
    .also-text { margin-bottom: 28px; }
}
@media (max-width: 719px) {
    .also-section { padding: 48px 0; }
    .also-text h2 { font-size: var(--fs-xl); }
}