/* Path: app/assets/css/landing.css
 *
 * The design language of the PUBLIC pages - the landing page, About and
 * Contact - taken from the product's own new site at test.gsmgpt.com so a
 * visitor cannot tell they have moved between the two.
 *
 * About and Contact joined this sheet because they were the proof that a
 * second design language existed: same navbar, same footer, and between them
 * flat cards on a flat page. One card, one rhythm, three pages.
 *
 * WHY A SECOND SHEET RATHER THAN EDITS TO home-style.css: home-style.css is the
 * shared skin for every public page - login, select-brand, set-password, the
 * hub. What follows is specific to the long marketing page: aurora fields,
 * cursor-lit cards, a section rhythm built for scrolling past six blocks. Left
 * in the shared sheet it would be paid for by five pages that never use it.
 *
 * WHAT WAS COPIED, and it is the vocabulary rather than the pixels:
 *
 *   grounds     four of them, alternating, hairline-separated, so a scroller
 *               can feel where one idea ends and the next begins. One flat
 *               background for a page this long is what made ours read as a
 *               single undifferentiated column.
 *   aurora      wide, soft radial fields - never a hard shape, never behind
 *               text that has to stay readable.
 *   liquid      cards lit from wherever the cursor is, each in its own colour.
 *   rails       a 3px bar across the top of a card that fills on hover, growing
 *               from the reading edge - right in Persian, left in English.
 *   chips       a square icon tile at 10% of its colour inside a 35% border.
 *
 * The same rail-and-glow vocabulary is already in hub-cards.css. That is the
 * point: the hub, the landing page and the new site are one product.
 *
 * COLOUR AND CONTRAST: every accent here is decoration - a rail, a halo, a
 * tile, a blurred field. Body text is never coloured by one, so none of it can
 * cost contrast.
 */

/* ============================================================ tokens ======= */
/* The reference ships each of these twice, once per theme, and so must we:
   this page has had a theme switch since long before the redesign. */
/* The grounds themselves are NOT defined here - they come from home-style.css
   as --pg-*, because the hub, select-brand, about and contact stand on the same
   ones and a second copy is how two pages start disagreeing about what colour
   the page is. What is defined here is only what this page adds. */
body.light-theme {
    --ln-page:     var(--pg-page);
    --ln-deep:     var(--pg-page);
    --ln-deeper:   var(--pg-deeper);
    --ln-band:     var(--pg-band);
    --ln-surface:  var(--pg-surface);
    --ln-surface2: var(--pg-surface2);
    --ln-hairline: var(--pg-hairline);
    --ln-ink:      var(--pg-ink);
    --ln-ink-soft: #475569;
    --ln-haze:     var(--pg-haze);

    --ln-cta-from: #4169db;
    --ln-cta-to:   #172763;
    --ln-link:     #1a56db;

    /* The glass. In light the card is a near-white pane with a white rim; in
       dark it is a lifted navy with a light rim. Same three properties. */
    --lg-bg:     rgba(255, 255, 255, 0.72);
    --lg-shadow: 0 4px 20px rgba(6, 23, 46, 0.07);
    --lg-shadow-hi: 0 12px 40px rgba(6, 23, 46, 0.13);
    --ln-sheen:  rgba(255, 255, 255, 0.45);
    --ln-spot:   rgba(74, 127, 255, 0.10);
    --ln-aurora-op: .30;
    --ln-blob-op:   .13;
}
body.dark-theme {
    --ln-page:     var(--pg-page);
    --ln-deep:     var(--pg-page);
    --ln-deeper:   var(--pg-deeper);
    --ln-band:     var(--pg-band);
    --ln-surface:  var(--pg-surface);
    --ln-surface2: var(--pg-surface2);
    --ln-hairline: var(--pg-hairline);
    --ln-ink:      var(--pg-ink);
    --ln-ink-soft: #b4c2d9;
    --ln-haze:     var(--pg-haze);

    --ln-cta-from: #4169db;
    --ln-cta-to:   #172763;
    --ln-link:     #60a5fa;

    --lg-bg:     rgba(16, 30, 51, 0.62);
    --lg-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    --lg-shadow-hi: 0 12px 40px rgba(0, 0, 0, 0.60);
    --ln-sheen:  rgba(255, 255, 255, 0.16);
    --ln-spot:   rgba(74, 127, 255, 0.16);
    --ln-aurora-op: .34;
    --ln-blob-op:   .16;
}

/* The five accents the reference gives its cards, in order. A grid picks them
   up by position, so adding a seventh card needs no new colour decision. */
body.light-theme, body.dark-theme {
    --a1: #2F6BFF;  /* blue    */
    --a2: #009966;  /* green   */
    --a3: #C084FC;  /* violet  */
    --a4: #C9A84C;  /* gold    */
    --a5: #60A5FA;  /* sky     */
    --a6: #E05252;  /* red     */
}

/* ======================================================== section rhythm === */
/* Four grounds in rotation. The hairline is what makes the change read as
   deliberate rather than as a rendering seam. */
.hero            { background: var(--ln-deep); }
.flow            { background: var(--ln-band);   border-block: 1px solid var(--ln-hairline); }
.features-section{ background: var(--ln-deeper); }
.prerequisites   { background: var(--ln-band);   border-block: 1px solid var(--ln-hairline); }
.faq.faq-band    { background: var(--ln-deeper); }
.end-cta         { background: var(--ln-deep);   border-block-start: 1px solid var(--ln-hairline); }

.hero, .flow, .features-section, .prerequisites, .faq.faq-band, .end-cta {
    position: relative;
    overflow: hidden;          /* the aurora fields are wider than the page */
    isolation: isolate;
    /* A band goes edge to edge. The shared sheet used to give .prerequisites a
       max-width and a 30px radius, which floated it as a rounded card in the
       middle of a page of full-width bands - the single loudest reason that
       section read as belonging somewhere else. */
    max-width: none; margin-inline: 0; border-radius: 0;
}

/* 120px of air between ideas, from the reference's --spacing-section. A long
   page needs the gaps to be bigger than the gaps inside a block, or every
   boundary reads as ambiguous. */
.flow, .features-section, .prerequisites, .faq.faq-band {
    padding-block: clamp(64px, 9vw, 120px);
}
.end-cta { padding-block: clamp(56px, 8vw, 104px); }

/* ============================================================ the light ==== */
/* A soft field that follows the cursor inside its own section. --mx/--my come
   from landing-fx.js; with no JS at all the fallback centres it, so the page
   still looks lit rather than looking broken. */
.spotlight-zone::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%),
                                var(--ln-spot), transparent 70%);
    opacity: 0; transition: opacity .35s ease;
}
.spotlight-zone.is-lit::before { opacity: 1; }

/* Aurora: a wide radial wash, round, no edge of its own. Never behind body
   copy - always behind the section's own ground, at low opacity. */
.ln-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ln-aurora {
    position: absolute; border-radius: 9999px; pointer-events: none;
    background: radial-gradient(closest-side, var(--aurora-color, #2F6BFF), transparent 100%);
}
.ln-aurora-a {
    /* Centred by auto margins, NOT by inset-inline-start:50% + translateX(-50%).
       That pair only centres in one direction: inset-inline-start is `right` in
       Persian, so the half-width shift went the same way as the offset instead
       of back against it, and the field landed entirely off the left of the
       screen. The page's signature glow had never once been visible in the
       language most of its readers use.

       PHYSICAL left/translateX on purpose. "Centred" has no reading direction,
       and it is the logical property here that introduced one. Auto margins do
       not work either: this box is deliberately WIDER than the section, and the
       spec resolves over-constrained auto margins by direction too. */
    top: -22%; left: 50%; transform: translateX(-50%);
    width: min(860px, 118vw); height: 620px;
    opacity: var(--ln-aurora-op);
    animation: ln-drift-a 22s ease-in-out infinite alternate;
}
.ln-aurora-b {
    inset-inline-end: 4%; bottom: -16%;
    width: 440px; height: 440px; opacity: calc(var(--ln-aurora-op) * .65);
    animation: ln-drift-b 26s ease-in-out infinite alternate;
}
@keyframes ln-drift-a { from { transform: translateX(-50%) translateY(0)    scale(1);    }
                        to   { transform: translateX(-50%) translateY(26px) scale(1.06); } }
@keyframes ln-drift-b { from { transform: translate(0, 0)        scale(1);   }
                        to   { transform: translate(-30px, -22px) scale(1.1); } }

/* The blobs under a card grid: one per accent, so each card sits over its own
   colour. Desktop only - at phone width they overlap into mud. */
.ln-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ln-blobs span {
    position: absolute; display: none;
    width: 320px; height: 320px; border-radius: 9999px;
    filter: blur(110px); opacity: var(--ln-blob-op);
}
@media (min-width: 1024px) { .ln-blobs span { display: block; } }

/* Everything the reader actually reads sits above all of that. */
.hero > *, .flow > *, .features-section > *, .prerequisites > *,
.faq.faq-band > *, .end-cta > * { position: relative; z-index: 1; }
.ln-backdrop, .ln-blobs { z-index: 0 !important; }

/* ============================================================== glass ====== */
/* One card treatment, reused by four different sections. --lg-glow is the
   card's own accent; --mx/--my is where the cursor is inside it. */
.liquid-glass {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--lg-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--lg-shadow);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
/* The light itself: a white sheen plus the card's colour, both centred on the
   cursor. Hidden until hover, so a still page is calm. */
.liquid-glass::before {
    content: ''; position: absolute; inset: -1px; z-index: 0;
    border-radius: inherit; pointer-events: none; opacity: 0;
    background:
        radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), var(--ln-sheen), transparent 60%),
        radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--lg-glow, transparent), transparent 70%);
    transition: opacity .32s ease;
}
.liquid-glass:hover, .liquid-glass:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--lg-shadow-hi);
}
.liquid-glass:hover::before, .liquid-glass:focus-within::before { opacity: 1; }
.liquid-glass > * { position: relative; z-index: 1; }

/* The rail. It grows from the reading edge - right in Persian, left in
   English - which is why the origin is set per direction rather than once. */
.ln-rail {
    position: absolute; inset-block-start: 0;
    inset-inline: 20px; height: 3px; border-radius: 9999px;
    background: var(--ln-accent, var(--a1));
    transform: scaleX(.28);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    z-index: 2;
}
[dir="rtl"] .ln-rail { transform-origin: right; }
[dir="ltr"] .ln-rail { transform-origin: left; }
.liquid-glass:hover .ln-rail, .liquid-glass:focus-within .ln-rail { transform: scaleX(1); }

/* The icon tile, ONE definition for every card on the page.
 *
 * It used to be two: a 46px rounded square tinted at 10% of the card's accent
 * for features and flow, and - only in the requirements section - a 64px disc
 * filled solid with the accent, white glyph, blurred halo behind it. Two
 * vocabularies in one scroll is exactly what made that section read as a
 * different page. The tinted square wins because it is the one four sections
 * already spoke, and because a solid disc puts a saturated block next to body
 * copy while the tint stays decoration. */
.ln-tile {
    flex: none;
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 1;
    color: var(--ln-accent, var(--a1));
    background: color-mix(in srgb, var(--ln-accent, var(--a1)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ln-accent, var(--a1)) 35%, transparent);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.liquid-glass:hover .ln-tile, .liquid-glass:focus-within .ln-tile { transform: translateY(-2px) scale(1.06); }

/* The corner badge: the step number in the flow, the "Step N" label in the
   requirements. Same object, so it is one class - it grows for a word and
   stays a circle-ish pill for a digit. */
.ln-badge {
    position: absolute; inset-block-start: 14px; inset-inline-end: 16px;
    min-width: 26px; height: 22px; padding-inline: 9px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; font-style: normal; white-space: nowrap;
    color: #fff; background: var(--ln-accent, var(--a1));
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .55);
}

/* ========================================================= the sections ==== */
.section-header { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.section-header h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.15rem); font-weight: 800;
    color: var(--ln-ink); letter-spacing: -.01em;
}
.section-header p {
    margin-top: 14px; margin-inline: auto; max-width: 640px;
    font-size: clamp(.95rem, 1.6vw, 1.05rem); line-height: 2; color: var(--ln-haze);
}

/* ---- ONE CARD, four grids -------------------------------------------------
 *
 * Features, flow, requirements and - since the about and contact pages joined
 * this sheet - values and contact channels all draw the SAME card: glass, a
 * hairline, a 22px radius, a rail that grows from the reading edge, a tinted
 * tile, and text that starts at that same edge.
 *
 * WHY START-ALIGNED EVERYWHERE. Two of these sections used to centre their
 * text. Centred copy under a tile that sits at the reading edge reads as a
 * mistake, and centring only some of the cards is what made the page feel
 * assembled from three templates rather than designed as one.
 */
.feature-card, .flow-step, .step-card, .value-card, .contact-card {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: 22px; padding: 30px 24px 26px;
    border: 1px solid var(--ln-hairline);
    text-align: start;
}
.feature-card h3, .flow-step h4, .step-card h4, .value-card h3, .contact-card h3 {
    margin-top: 26px; font-size: 1.05rem; font-weight: 700; color: var(--ln-ink);
}
.feature-card p, .flow-step p, .step-card p, .value-card p, .contact-card p {
    margin-top: 14px; font-size: .88rem; line-height: 1.9; color: var(--ln-haze);
}
/* A card that carries a button: the button sits on the floor of the card, so a
   row of cards with copy of different lengths still lines its actions up. */
.step-card .dl-btn, .contact-card .contact-action { margin-top: auto; }

/* The grids differ - the cards do not. Each is only a column count and the
   width at which it collapses. */
.features, .flow-track, .steps-container, .values-grid, .contact-grid {
    display: grid; gap: 22px; padding: 0; list-style: none;
    margin-inline: auto;
}
/* The three grids on the landing page share ONE width, so a card in the
   requirements row starts and ends on the same pixel as the card above it in
   the features row. They used to be 1240 and 1080, which put a visible step in
   the page's left and right edge halfway down. */
.features        { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); max-width: 1240px; }
.flow-track      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); max-width: 1240px; }
.steps-container { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 1240px; }
/* The inner pages line up with THEIR body instead - .page-body is 1120. */
.values-grid     { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 1120px; }
.contact-grid    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 1120px; }

/* The reference runs four across because it has exactly four services. We
   have six, and six in a four-wide grid leaves a two-card hole under a full
   row. Three columns fill two rows exactly. */
@media (min-width: 1180px) { .features { grid-template-columns: repeat(3, 1fr); } }

/* A card with a badge in its corner needs the corner kept clear, or a long
   title runs under the pill. */
.flow-step, .step-card { padding-top: 44px; }

/* ---- the trust band under the hero ---------------------------------------- */
.trust-strip {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 22px; padding: 0; margin-top: 30px;
}
.trust-strip li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--ln-haze);
    padding: 7px 14px; border-radius: 9999px;
    border: 1px solid var(--ln-hairline); background: var(--ln-surface2);
}

/* ---- FAQ ------------------------------------------------------------------- */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq-item {
    border: 1px solid var(--ln-hairline); border-radius: 14px;
    background: var(--ln-surface); padding: 4px 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--a1) 40%, var(--ln-hairline)); box-shadow: var(--lg-shadow); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 16px 0;
    font-weight: 700; font-size: .96rem; color: var(--ln-ink);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; flex: none; font-size: 20px; font-weight: 400; line-height: 1;
    color: var(--ln-haze); transition: transform .25s ease;
}
.faq-item[open] summary::after { content: '\2212'; transform: rotate(180deg); }
.faq-item p { padding-bottom: 18px; font-size: .88rem; line-height: 2; color: var(--ln-haze); }

/* ---- closing call to action ------------------------------------------------ */
.end-cta { text-align: center; }
.end-cta h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 800; color: var(--ln-ink); }
.end-cta p {
    margin: 16px auto 28px; max-width: 560px;
    font-size: clamp(.92rem, 1.5vw, 1rem); line-height: 2; color: var(--ln-haze);
}
/* ONE action colour for the whole page.
 *
 * Before this there were four: #0088ff on two driver buttons, #059669 on the
 * third, and the CTA gradient on the two big ones. A reader cannot learn what
 * a colour means if the same meaning arrives in four of them - and the green
 * one was the worse half, because green is also the tick that says a step
 * succeeded. Making every call to action the gradient leaves green free to be
 * what it is everywhere else on this page: one card decoration among six.
 */
.end-cta .btn-primary, .hero .btn-cta {
    background: linear-gradient(135deg, var(--ln-cta-from), var(--ln-cta-to));
    border: none; color: #fff;
    box-shadow: 0 12px 30px -14px var(--ln-cta-from);
}
.end-cta .btn-primary:hover, .hero .btn-cta:hover {
    box-shadow: 0 16px 40px -14px var(--ln-cta-from);
    transform: translateY(-2px);
    color: #fff;
}

/* ...and the secondary one is quiet.
 *
 * The requirements row had three gradient buttons side by side, which says
 * three equal primary actions. Two of them are driver downloads - errands, not
 * the thing we want done - and the third opens the panel. So the downloads
 * became a bordered button that carries no fill, and only the panel keeps the
 * gradient. No new hue was introduced to say it: the difference is weight. */
.dl-btn {
    align-self: start;
    min-height: 44px;               /* a real touch target, not a text link */
    padding: 11px 18px; border-radius: 12px;
    font-size: .82rem; font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ln-ink);
    background: var(--ln-surface2);
    border: 1px solid var(--ln-hairline);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.dl-btn:hover {
    color: var(--ln-ink);
    border-color: color-mix(in srgb, var(--ln-accent, var(--a1)) 55%, transparent);
    background: color-mix(in srgb, var(--ln-accent, var(--a1)) 8%, var(--ln-surface2));
    transform: translateY(-2px);
}

/* The one filled button in the row: the card whose action is entering the
   panel, not downloading a driver. */
.dl-btn-alt {
    padding-inline: 20px;
    background: linear-gradient(135deg, var(--ln-cta-from), var(--ln-cta-to));
    border: none; color: #fff;
    box-shadow: 0 12px 30px -14px var(--ln-cta-from);
}
.dl-btn-alt:hover {
    background: linear-gradient(135deg, var(--ln-cta-from), var(--ln-cta-to));
    box-shadow: 0 16px 40px -14px var(--ln-cta-from);
    transform: translateY(-2px); color: #fff;
}


/* Keyboard users get the same ring every interactive thing on the page gets.
   A card that is itself a link is the one that needs it most: without it the
   only sign of focus would be a hover effect a keyboard never triggers. */
.dl-btn:focus-visible, .dl-btn-alt:focus-visible, .contact-card:focus-visible,
.faq-item summary:focus-visible {
    outline: 2px solid var(--ln-link);
    outline-offset: 3px;
}

/* ================================================ the inner pages ========= *
 *
 * about.php and contact.php used to load home-style.css and nothing else, and
 * that is the whole reason they read as a different site: no alternating
 * grounds, no aurora, no glass, no rail, no reveal on scroll. They load THIS
 * sheet now, so everything above applies to them unchanged - their cards are
 * the landing page's card, by the same rules, with the same accents.
 *
 * What follows is only what those two pages ADD: a titled head band and a
 * two-column body. Both are declared here rather than in the shared sheet for
 * the reason the file header gives - login, select-brand and the hub would
 * otherwise pay for shapes they never draw.
 */

/* The same four grounds, in the same rotation. A visitor moving from the
   landing page to About should not feel the floor change. */
.page-head { background: var(--ln-deep); }
.sec-band  { background: var(--ln-band);   border-block: 1px solid var(--ln-hairline); }
.sec-deep  { background: var(--ln-deeper); }

.page-head, .sec-band, .sec-deep {
    position: relative; overflow: hidden; isolation: isolate;
}
.sec-band, .sec-deep { padding: clamp(56px, 8vw, 104px) 5%; }
.page-head > *, .sec-band > *, .sec-deep > * { position: relative; z-index: 1; }

/* home-style.css gives .page-head a max-width and centres it, which is right
   for a page whose head is a block. Here it is a BAND with its own ground, so
   the section goes full width and the measure moves inside it. */
.page-head {
    max-width: none; margin: 0;
    padding: clamp(52px, 8vw, 96px) 5% clamp(40px, 6vw, 68px);
    text-align: center;
}
.page-head .head-inner { max-width: 780px; margin-inline: auto; }
.page-head h1 {
    font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 900;
    letter-spacing: -.02em; color: var(--ln-ink); margin-bottom: 0;
}
.page-head p {
    margin: 18px auto 0; max-width: 640px;
    font-size: clamp(.95rem, 1.6vw, 1.05rem); line-height: 2; color: var(--ln-haze);
}
.page-head .hero-eyebrow { margin-bottom: 18px; }

/* The two-column body: prose that can run long, and a card of facts beside it
   that does not move when it does. */
.page-body {
    max-width: 1120px; margin-inline: auto; padding: 0;
    display: grid; gap: 28px;
    grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); align-items: start;
}
.prose h2 { font-size: 1.15rem; font-weight: 800; color: var(--ln-ink); margin: 30px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p {
    font-size: .95rem; line-height: 2.1; color: var(--ln-haze); margin-bottom: 18px;
    /* Person-written copy that may be Persian, English or both in one line.
       plaintext lets each paragraph take its direction from its own first
       strong character instead of being forced either way. */
    unicode-bidi: plaintext;
}
.prose .muted-note {
    font-size: .88rem;
    border-inline-start: 3px solid var(--ln-link);
    padding-inline-start: 14px;
}

/* The fact card is a card, so it is the page's card: glass, hairline, rail. */
.fact-card {
    position: sticky; top: 92px;
    border: 1px solid var(--ln-hairline); border-radius: 22px;
    padding: 6px 22px;
    background: var(--lg-bg); box-shadow: var(--lg-shadow);
}
.fact-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 15px 0; border-bottom: 1px solid var(--ln-hairline);
}
.fact-row:last-child { border-bottom: none; }
.fact-row span   { flex: none; font-size: .8rem; font-weight: 600; color: var(--ln-haze); }
.fact-row strong {
    font-size: .88rem; font-weight: 800; color: var(--ln-ink);
    text-align: end; word-break: break-word; unicode-bidi: plaintext;
}

/* A contact channel is a link that IS the card, so the whole tile is the touch
   target rather than a word inside it. */
.contact-card { text-decoration: none; color: inherit; }
.contact-card strong {
    margin-top: 10px; font-size: .95rem; font-weight: 800; color: var(--ln-ink);
    word-break: break-word;
}
.contact-card .contact-action {
    padding-top: 16px; font-size: .82rem; font-weight: 800;
    color: var(--ln-accent, var(--a1));
    display: inline-flex; align-items: center; gap: 6px;
}
/* The arrow leans the way the language reads, and steps forward on hover. */
.contact-card .contact-action::after {
    content: '\2192'; display: inline-block;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
[dir="rtl"] .contact-card .contact-action::after { content: '\2190'; }
[dir="rtl"] .contact-card:hover .contact-action::after { transform: translateX(-4px); }
[dir="ltr"] .contact-card:hover .contact-action::after { transform: translateX(4px); }

/* The closing band on the inner pages is the landing page's closing band. */
.cta-band {
    max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: var(--ln-deep); border-block-start: 1px solid var(--ln-hairline);
    padding: clamp(56px, 8vw, 104px) 5%; text-align: center;
    position: relative; overflow: hidden; isolation: isolate;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 800; color: var(--ln-ink); }
.cta-band p {
    margin: 16px auto 28px; max-width: 560px;
    font-size: clamp(.92rem, 1.5vw, 1rem); line-height: 2; color: var(--ln-haze);
}
.cta-band .btn-primary {
    background: linear-gradient(135deg, var(--ln-cta-from), var(--ln-cta-to));
    border: none; color: #fff;
    box-shadow: 0 12px 30px -14px var(--ln-cta-from);
}
.cta-band .btn-primary:hover {
    box-shadow: 0 16px 40px -14px var(--ln-cta-from);
    transform: translateY(-2px); color: #fff;
}

@media (max-width: 860px) {
    .page-body { grid-template-columns: 1fr; }
    .fact-card { position: static; }
}

/* ====================================================== word-by-word reveal = */
/* Each word rises into place behind a mask, in source order.
 *
 * BIDI: an inline-block is one atomic item to line layout, and the line still
 * places those items in the paragraph's own direction - so a Persian sentence
 * still reads right to left and an English word inside it stays left to right.
 * verify_landing_ref.js measures the rendered order against the same heading
 * unsplit, because getting this wrong is the exact failure this project has
 * hit three times.
 */
.split-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-word {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform .62s cubic-bezier(.22, 1, .36, 1), opacity .62s ease;
    transition-delay: var(--wd, 0ms);
}
.is-revealed .split-word { transform: none; opacity: 1; }

/* Blocks that fade up as a whole, for everything that is not a heading. */
.ln-rise {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--wd, 0ms);
}
.ln-rise.is-revealed { opacity: 1; transform: none; }

/* ============================================================ restraint ==== */
/* A reader who has asked for less motion gets the finished state immediately,
   never a half-played animation. Everything below is the END of every effect
   above, not an approximation of it. */
@media (prefers-reduced-motion: reduce) {
    .ln-aurora { animation: none !important; }
    .split-word, .ln-rise { transform: none !important; opacity: 1 !important; transition: none !important; }
    .liquid-glass, .liquid-glass::before, .ln-rail, .ln-tile { transition: none !important; }
    .liquid-glass:hover { transform: none; }
}
/* backdrop-filter on a dozen cards costs real frames on a phone, and the
   design does not need it there: the cards are already full-width. */
@media (max-width: 720px) {
    .liquid-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ln-surface); }
    .ln-aurora-b { display: none; }
}