/* ============================================================================
   Mada مدى public pages — landing, About, country picker
   ----------------------------------------------------------------------------
   SH (2026-09-21) — this sheet USED to keep its own palette on the grounds that
   the brand should not move when the app theme does. That is no longer true and
   the reversal was deliberate (Sana: "use the main theme we have already"): the
   tokens below are now aliases of --fai-*, so the site and the product cannot
   drift apart, and the accent is the theme's yellow family rather than its blue.
   Everything from THE PALETTE down is kept as the record of how the old colours
   were chosen; it describes what the aliases replaced, not what is in force.

   Class names still read `nilia-*`. The product was renamed to Mada, but a
   rename of every selector would touch far more than it is worth; the visible
   brand is what changed.

   A plain global sheet rather than Blazor scoped CSS, because the floating
   objects are created by nilia-landing.js at runtime and scoped CSS would never
   reach them.

   THE PALETTE (Sana, 2026-09-20: "make the website background white, then make
   the titles the yellow the onboarding is" / "Fix the color UI as a
   professional UI designer").

   The onboarding's yellows are --oq-yellow #ffe066, --oq-yellow-strong #ffd43b
   and --oq-yellow-mark #ffc700, and that stylesheet is explicit that they are a
   FILL, never text. Straight #ffc700 type on white is about 1.7:1, which is why
   the first pass read washed out. So the system splits the job:

     - GOLD  #E8A100  carries every heading. Same hue as the onboarding yellow,
       pushed to a density that holds its own on white at display size.
     - AMBER #FFC700  is the onboarding yellow itself, kept for FILLS only:
       selected states, tints, hairlines. Never text.
     - ORANGE #FF5C00 stays what it always was: actions, the wordmark, the
       footer ground, and the one emphasised word in the headline.
     - TEXT   #5E5140 warm brown-grey for body, #8A7A63 for quiet labels. Both
       clear 4.5:1 on white, so the page reads on a phone in daylight.

   Gold for headings, orange for the thing to press, amber for fills. One warm
   family, three jobs, and no two colours competing for the same one.
   ========================================================================== */

/* Gambetta is the Nilia display face — the one type decision Sana settled on
   and kept. Vendored next to the rest of the fonts, no CDN (UI_UX_PLAN 3.7).
   It has no Arabic glyphs, so Arabic runs on the already-vendored IBM Plex
   Sans Arabic; .nilia-ar swaps the whole type stack over. */
@font-face {
    font-family: 'Gambetta';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/Gambetta-Variable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Gambetta';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/Gambetta-VariableItalic.woff2') format('woff2-variations');
}

.nilia {
    /* SH (2026-09-21) — aliases of the app theme, not a palette of its own (Sana: "use the main
       theme we have already, the yellow, blue, etc. and match it perfectly"). The landing now
       inherits the app's blue, yellow, ink and borders, and keeps inheriting them when the theme
       moves. The old gold #E8A100 also measured 2.19:1 on white, below the 3:1 floor for large
       text, which is why those headlines read hazy. */
    --nilia-gold: var(--fai-ai);
    --nilia-gold-deep: var(--fai-ai);
    --nilia-amber: var(--fai-ai-300);
    --nilia-amber-soft: var(--fai-ai-soft);
    /* SH (2026-09-21) — genuinely yellow, in two parts (Sana: "it's not yellow it's orange").
       The app theme has no text-safe yellow: --fai-ai is #b45309, hue 26 degrees, which is burnt
       orange, and it bottoms out there because a true yellow on white cannot reach 4.5:1 at any
       size. So the job splits, exactly as the onboarding sheet already splits it:

         --nilia-yellow  #ffd43b  a real yellow, Sana's own onboarding yellow. GROUND only, with
                                  ink on top, which measures about 11:1.
         --nilia-accent  #8a6a00  hue 46 degrees, a deep yellow-gold rather than an orange, at
                                  5.07:1 on white. This is what type and hairlines use.

       Yellow is never type and gold is never a large ground. That is the whole rule. */
    --nilia-ground: #b45309;
    --nilia-accent: #ffd43b;
    --nilia-accent-deep: #ffe066;
    --nilia-yellow: #ffd43b;
    --nilia-yellow-soft: #fff9e0;
    --nilia-ink: #ffffff;
    --nilia-body: rgba(255, 255, 255, 0.86);
    --nilia-muted: rgba(255, 255, 255, 0.66);
    --nilia-line: rgba(255, 255, 255, 0.20);
    --nilia-line-strong: rgba(255, 255, 255, 0.34);

    /* Kept for the white panels that sit ON the orange, where the ink has to go back to dark. */
    --nilia-panel: #ffffff;
    --nilia-panel-ink: var(--fai-ink);
    --nilia-panel-body: var(--fai-ink-2);
    --nilia-panel-muted: var(--fai-ink-3);
    --nilia-panel-line: var(--fai-border);

    --nilia-display: 'Gambetta', Georgia, 'Times New Roman', serif;
    --nilia-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --nilia-text: 'Inter', system-ui, -apple-system, sans-serif;

    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--nilia-text);
    color: var(--nilia-body);
    background: var(--nilia-ground);
    -webkit-font-smoothing: antialiased;
}

/* Arabic runs on one family throughout: a serif display face next to a sans
   Arabic reads as two unrelated pages. */
.nilia-ar {
    --nilia-display: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --nilia-ui: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --nilia-text: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* App.razor's <FocusOnNavigate Selector="h1"> puts tabindex="-1" on the first
   heading and focuses it after every navigation, so a screen reader announces
   the new page. base.css then paints the purple focus ring on it, which on a
   landing hero this size reads as a stray box drawn around the headline. The
   heading is a focus TARGET, not an interactive control, so the ring has
   nothing to indicate here — and every real control on the page keeps its own. */
.nilia h1[tabindex="-1"]:focus,
.nilia h1[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ── Floating objects canvas ────────────────────────────────────────────── */
#nilia-canvas {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* ALWAYS ltr, whatever language the page is in (Sana: "the Arabic version has glitches,
       make sure the english and arabic are moving the objects the same way"). The objects are
       positioned by transform in canvas coordinates, and a <canvas> is always drawn from its
       top-left. Inheriting rtl here anchored every object to the RIGHT edge instead, so in
       Arabic an object rendered ~194px away from where its own ribbon was drawn and the
       edge-recycling test fired at the wrong moment. This is a coordinate space, not text. */
    direction: ltr;
    /* Starts invisible and is faded in by nilia-landing.js once every image is
       decoded, so nothing ever pops in half-drawn. */
    opacity: 0;
    transition: opacity 900ms ease;
}

#nilia-canvas.nilia-canvas-in {
    opacity: 1;
}

/* SH (2026-09-22) — objects used to meet the viewport edge at full opacity and vanish on a hard
   line. The fade is spread across the whole screen rather than a thin border, so an object is
   already dissolving long before it reaches the edge and there is no moment where it is cut.

   THE SIZE IS THE WHOLE POINT, and the first attempt got it wrong. `radial-gradient(120% 120%)`
   draws an ellipse 1.2x the viewport, so the middle of the right edge sits at gradient position
   0.5 / 1.2 = 42% — inside the opaque run, and objects were still cut there. At `ellipse 50% 50%`
   the ellipse touches the edge midpoints, so a stop's percentage IS the fraction of the way from
   the centre to the edge and the numbers below mean what they read as: solid through the middle
   third, gone by the edge. Corners are further out than any edge midpoint, so they clear first —
   which is correct, an object drifting into a corner should already have dissolved. */
#nilia-canvas {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #000 30%, rgba(0, 0, 0, 0.72) 52%, rgba(0, 0, 0, 0.3) 74%, rgba(0, 0, 0, 0.08) 88%, transparent 98%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #000 30%, rgba(0, 0, 0, 0.72) 52%, rgba(0, 0, 0, 0.3) 74%, rgba(0, 0, 0, 0.08) 88%, transparent 98%);
}

#nilia-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.nilia-float {
    position: absolute;
    /* Pinned explicitly rather than left at `auto`. An absolutely positioned box with auto
       insets sits at its STATIC position, which flips to the right edge under rtl — the other
       half of the same bug. With these, translate3d(x, y) means the same thing in both
       languages. */
    left: 0;
    top: 0;
    will-change: transform;
    pointer-events: none;
    z-index: 2;
    /* NO drop-shadow here, deliberately. `filter: drop-shadow()` on an element that also has
       `will-change: transform` makes Chrome composite the shadow from the LAYER's rectangular
       bounds instead of the PNG's silhouette, so every object drags a hard-edged grey rectangle
       behind it. The original's shadow was 0.06 and the rectangle was invisible at that weight;
       raising it to lift pale objects off the white ground is what made it obvious. Objects are
       at full opacity, which is what makes them read as the solid one in front of their ghosts,
       and that does the job without a filter at all. */
}

.nilia-float img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* SH (2026-09-21) — opaque, in the page's exact colour, with no rule under it. Frosted glass is a
   white-page idiom: a translucent tint over white is invisible, but over a flat saturated ground
   it reads as a lighter band with a seam along the bottom, which is the line Sana spotted. On one
   flat colour the honest answer is no seam at all. */
.nilia-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--nilia-ground);
    
}

.nilia-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    /* Wraps rather than overflows. On a phone the wordmark plus the toggle plus the country
       plus About is wider than 375px, and an overflowing row in an RTL page does not just
       clip: it shifts the WHOLE layout sideways and leaves a horizontal scrollbar on every
       section. Two tidy rows beat one broken one, and nothing has to be hidden. */
    flex-wrap: wrap;
}

.nilia-header-right {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* SH (2026-09-21) — Mada مدى, both scripts side by side. The pair always reads English then
   Arabic, so the row is forced to ltr even on the Arabic page: a name is not a sentence and
   should not reorder with the page. Ink, not accent, so the brand carries weight instead of
   sitting at the same volume as everything else. */
/* SH (2026-09-21) — Mada مدى. Both halves the same size and the same yellow (Sana): one name in
   two scripts, not a name plus a translation of it. Forced ltr and isolated so Arabic bidi cannot
   reorder the two halves against each other. Centred rather than baseline-aligned, because the
   scripts have different baselines and matching those drops the Arabic low. */
.nilia-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--nilia-display);
    font-weight: 600;
    /* SH (2026-09-22) — smaller (Sana). A wordmark competing with the headline for first read is
       a wordmark that is too big; the header is chrome. */
    font-size: 1.15rem;
    color: var(--nilia-accent);
    letter-spacing: -0.015em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* SH (2026-09-23) — the wordmark keeps its own colour under the pointer (Sana: "don't let it turn
   a color when its hovered over, that is not hyperlinked"). It is an anchor, so the app's global
   a:hover was winning on specificity and repainting it in the product blue; the Arabic half kept
   its colour because it sets one of its own, so the name came apart into a blue word and a yellow
   one. Both halves now state the colour, and hover states it again. */
.nilia-wordmark:hover,
.nilia-wordmark:hover .nilia-wordmark-en,
.nilia-wordmark:hover .nilia-wordmark-ar,
.nilia-wordmark-en {
    color: var(--nilia-accent);
}

.nilia-wordmark-ar {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: var(--nilia-accent);
}

.nilia-wordmark-sm {
    font-size: 1rem;
}

/* SH (2026-09-23) — no rule under the link on hover (Sana: "remove the lines under hyperlinks").
   A header of four or five short links is already legible as navigation; a 2px bar appearing
   under one of them reads like a selected tab, which promises a state this header does not have.
   The colour shift alone is enough of an answer to the pointer. */
.nilia-nav-link {
    font-family: var(--nilia-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--nilia-accent);
    text-decoration: none;
    padding: 8px 2px;
    white-space: nowrap;
}

.nilia-nav-link:hover {
    color: var(--nilia-accent-deep);
}

/* A flag glyph at the label's 11px would be a coloured speck, so it gets its own size. line-height
   1 keeps the pill the same height it was when it held text. */
.nilia-country-flag {
    font-size: 17px;
    line-height: 1;
}

.nilia-country-pill {
    font-family: var(--nilia-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nilia-muted);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--nilia-line-strong);
    border-radius: 999px;
    white-space: nowrap;
}

.nilia-country-pill:hover {
    /* Panel ink, not --nilia-ink: the fill is cream, and --nilia-ink is white on this page. */
    color: var(--nilia-panel-ink);
    border-color: var(--nilia-amber);
    background: var(--nilia-amber-soft);
}

/* "United Arab Emirates" is the widest label on the page. It gets to ellipsise instead of
   pushing the header out of the viewport. */
@media (max-width: 480px) {
    .nilia-country-pill {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.nilia-ar .nilia-country-pill,
.nilia-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--nilia-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--nilia-accent);
    text-decoration: none;
}

.nilia-back:hover {
    color: var(--nilia-accent-deep);
}

/* The chevron glyph points right. "Back" is left in English, and right again in
   Arabic, so the rotation is undone rather than doubled. */
.nilia-back svg {
    transform: rotate(180deg);
}

.nilia-ar .nilia-back svg {
    transform: none;
}

/* ── Language toggle ────────────────────────────────────────────────────── */
.nilia-lang {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--nilia-line-strong);
    border-radius: 999px;
    background: var(--nilia-ground);
}

.nilia-lang-option {
    font-family: var(--nilia-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    padding: 6px 11px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--nilia-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.nilia-lang-option:hover:not(:disabled) {
    color: var(--nilia-ink);
}

/* Amber as a FILL with near-black on it, which is the rule the onboarding's own
   stylesheet sets for this yellow. --nilia-panel-ink is where that near-black lives now:
   --nilia-ink became white when the page became orange, which left the selected language
   at 1.6:1 against its own pill. */
.nilia-lang-on {
    background: var(--nilia-amber);
    color: var(--nilia-panel-ink);
    cursor: default;
}

.nilia-lang-ar {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0;
}

/* SH (2026-09-22) — the divider between the two options is gone (Sana: "this spacing is still
   not fixed the middle | line"). It could not be spaced evenly: on its left is the FILLED pill,
   whose edge is 2px away, and on its right a transparent button whose letters start 11px past
   its own padding, so 2px against 13px is what it looked like. The filled segment already
   separates the two, which is what a segmented control is for. The rule is kept, unused by the
   markup, only so a future divider does not get reinvented from scratch. */
.nilia-lang-sep {
    display: none;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.nilia-hero {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 24px 88px;
    min-height: 74vh;
    text-align: center;
}

.nilia-hero h1 {
    font-family: var(--nilia-display);
    font-size: clamp(2.6rem, 6.6vw, 5.8rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.028em;
    color: var(--nilia-ink);
    margin: 0;
    max-width: 16ch;
    text-wrap: balance;
}

/* The one emphasised word, in the brand orange: gold to orange is a warm step
   up, and it ties the headline to the button underneath it. */
.nilia-hero h1 em {
    font-style: italic;
    color: var(--nilia-accent);
}

.nilia-ar .nilia-hero h1 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    font-size: clamp(2.1rem, 5.2vw, 4.4rem);
    max-width: 18ch;
}

/* Arabic has no italic tradition; the colour alone carries the emphasis. */
.nilia-ar .nilia-hero h1 em {
    font-style: normal;
}

.nilia-hero p {
    margin: 28px 0 0;
    max-width: 34rem;
    font-size: 17px;
    line-height: 1.6;
    color: var(--nilia-body);
}

.nilia-ar .nilia-hero p {
    line-height: 1.9;
}

/* The hero's only button, and the one control on the page that has to look
   pressable from across a room. Yellow ground, brown ink, and nothing else
   competing with it.

   The padding is deliberately lopsided: a trailing chevron carries far less
   visual weight than a letter, so equal padding leaves the word sitting left
   of where the eye puts the centre. Trimming the chevron side by 6px lands it.
   Logical properties, because Arabic flips the whole row.

   Sized in one place: --nilia-cta-lift is how far it rises, and the hover and
   active states both read it, so the press is always the exact inverse of the
   hover rather than two numbers that drift apart. */
.nilia-cta {
    --nilia-cta-lift: 2px;
    margin-top: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--nilia-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    padding-block: 18px;
    padding-inline: 30px 24px;
    background: var(--nilia-yellow);
    color: #4a2c00;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    /* A contact shadow in the ground's own brown rather than the old orange
       glow: on an orange page a saturated orange shadow reads as a smudge
       around the button instead of light under it. */
    box-shadow: 0 1px 1px rgba(60, 22, 0, .16), 0 10px 20px -12px rgba(40, 14, 0, .7);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* The label rides on the text baseline; line-height 1 above keeps the button
   the same height in both languages, where Arabic would otherwise grow it. */
.nilia-cta-label {
    display: block;
    padding-block-start: .08em;
}

/* The chevron leans into the direction of travel on hover. `translate` rather
   than `transform`, so it composes with the rotate that Arabic applies below
   instead of overwriting it. */
.nilia-cta svg {
    flex: none;
    transition: translate .15s ease;
}

/* The colour is restated on every state, not just the resting one: base.css has
   a blanket `a:hover { color: var(--fai-primary-strong) }` for the app's links,
   and without this the label turns app-blue the moment the pointer lands on it. */
.nilia-cta:hover,
.nilia-cta:active,
.nilia-cta:focus-visible {
    color: #4a2c00;
}

.nilia-cta:hover {
    background: var(--nilia-accent-deep);
    transform: translateY(calc(var(--nilia-cta-lift) * -1));
    box-shadow: 0 2px 2px rgba(60, 22, 0, .16), 0 16px 26px -12px rgba(40, 14, 0, .75);
}

.nilia-cta:hover svg {
    translate: 3px 0;
}

/* Press: back down past its resting place, shadow pulled in tight. */
.nilia-cta:active {
    transform: translateY(1px);
    box-shadow: 0 1px 1px rgba(60, 22, 0, .2), 0 4px 8px -6px rgba(40, 14, 0, .7);
    transition-duration: .06s;
}

.nilia-cta:active svg {
    translate: 1px 0;
}

/* base.css paints the app's purple ring on every :focus-visible, which on this
   page is both invisible against the orange and squares the button off with its
   own radius. Cream on brown instead, at the button's own corner. */
.nilia-cta:focus-visible {
    outline: 2px solid var(--nilia-ink);
    outline-offset: 3px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(60, 22, 0, .16), 0 10px 20px -12px rgba(40, 14, 0, .7);
}

/* Arabic reads right to left, so the chevron points that way and leans that
   way. Both are `translate`/`rotate` longhands for the same reason: they stack
   rather than clobber each other. */
.nilia-ar .nilia-cta svg {
    rotate: 180deg;
}

.nilia-ar .nilia-cta:hover svg {
    translate: -3px 0;
}

.nilia-ar .nilia-cta:active svg {
    translate: -1px 0;
}

/* ── Price section: the coin scroll moment ──────────────────────────────── */
/* A tall section with a sticky viewport inside it. Scrolling past turns the coin
   two full revolutions while it scales up and away, and the line arrives under
   it — the original homepage's CoinScrollSection, driven by nilia-landing.js.
   The height is what gives the moment room to play out; the sticky child is what
   holds it still while it does. */
.nilia-price {
    position: relative;
    z-index: 10;
    height: 120vh;
}

.nilia-price-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 0 24px;
    text-align: center;
}

/* The wrapper carries the animation so the coin's own drop shadow is not scaled
   and rotated along with it. */
.nilia-price-coin-wrap {
    opacity: 0;
    will-change: transform, opacity;
}

.nilia-price-coin {
    display: block;
    width: 200px;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(45, 30, 0, .12));
}

.nilia-price-copy {
    opacity: 0;
    max-width: 42rem;
    will-change: transform, opacity;
}

.nilia-price h2 {
    font-family: var(--nilia-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--nilia-ink);
    margin: 0 0 14px;
    text-wrap: balance;
}

.nilia-price h2 span {
    color: var(--nilia-accent);
}

.nilia-ar .nilia-price h2 {
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
}

.nilia-price p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--nilia-body);
    max-width: 28rem;
    margin: 0 auto;
}

.nilia-ar .nilia-price p {
    line-height: 1.9;
}

/* ── At the exhibition ──────────────────────────────────────────────────── */
.nilia-built {
    position: relative;
    z-index: 10;
    padding: 64px 24px 0;
}

.nilia-built-inner {
    max-width: 1060px;
    margin: 0 auto;
}

/* SH (2026-09-22) — the gap under the heading was 40px plus the first row's own top padding plus
   the rule above it, which in Arabic (short body lines, tall heading) opened a hole in the middle
   of the section (Sana: "fix the spacing of the middle"). The stage centres each feature in the
   viewport, so the heading only has to clear itself. */
.nilia-built-head {
    text-align: center;
    margin-bottom: 12px;
}

.nilia-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--nilia-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--nilia-accent);
}

.nilia-ar .nilia-eyebrow {
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}

.nilia-built-head h2 {
    font-family: var(--nilia-display);
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--nilia-ink);
    margin: 0;
}

.nilia-ar .nilia-built-head h2 {
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
}

/* SH (2026-09-22) — the feature list is a scroll stage now (Sana: "each one should be a large
   size, then should fade in, with the icon, no lines in between, and showing each feature one at
   a time only once in the screen, then at the end, they show together").
   No rules between rows: the separating a border used to do is done by the screen itself.

   THE BASE RULES BELOW ARE THE NO-JS PAGE: six rows, one under the other, every one visible.
   Everything that hides anything is scoped to .nilia-built[data-stage], and nilia-landing.js sets
   that attribute only once it has taken the section over and only when motion is welcome. A
   reveal that can strand content invisible is worse than no reveal. */
.nilia-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    margin: 0;
    padding: 0 0 80px;
    list-style: none;
    counter-reset: feature;
}

.nilia-feature {
    counter-increment: feature;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.nilia-feature-art {
    flex: none;
    inline-size: 104px;
    block-size: 104px;
    display: grid;
    place-items: center;
}

.nilia-feature-art img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.nilia-feature-text {
    min-inline-size: 0;
}

.nilia-feature-text::before {
    content: counter(feature, decimal-leading-zero);
    display: block;
    margin-block-end: 0.5rem;
    font-family: var(--nilia-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--nilia-accent);
}

.nilia-features h3 {
    margin: 0 0 0.35rem;
    font-family: var(--nilia-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--nilia-ink);
}

.nilia-features p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--nilia-body);
    max-inline-size: 32rem;
}

/* ── The stage ──────────────────────────────────────────────────────────────
   A tall track with a sticky viewport inside it, the same shape as the coin section above: the
   page holds still while the scroll walks through the steps. One viewport of scroll per feature
   plus one for the finale, and the count comes from --nilia-stage-steps, which Landing.razor
   writes from the feature array — the height must not hard-code a six that the data could change.
   svh rather than vh on a phone, where vh is the tallest the viewport ever gets and a stage that
   size is taller than the screen you are looking at. */
.nilia-stage-track {
    position: relative;
}

.nilia-built[data-stage] {
    padding-bottom: 72px;
}

.nilia-built[data-stage] .nilia-stage-track {
    block-size: calc(var(--nilia-stage-steps, 7) * 100vh);
    block-size: calc(var(--nilia-stage-steps, 7) * 100svh);
}

.nilia-built[data-stage] .nilia-stage {
    position: sticky;
    top: 0;
    block-size: 100vh;
    block-size: 100svh;
    display: grid;
    place-items: center;
    padding-inline: 24px;
    overflow: hidden;
}

/* Every feature in the SAME grid cell. Overlapping is what lets one cross-fade into the next
   without the box under it moving, and it is also what the finale undoes in one line. */
.nilia-built[data-stage] .nilia-features {
    inline-size: 100%;
    max-inline-size: 900px;
    gap: 0;
    padding: 0;
    place-items: center;
}

.nilia-built[data-stage] .nilia-feature {
    grid-area: 1 / 1;
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .3, 1);
    pointer-events: none;
}

.nilia-built[data-stage] .nilia-feature.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Large, because one at a time earns the room. */
.nilia-built[data-stage] .nilia-feature-art {
    inline-size: clamp(150px, 24vh, 250px);
    block-size: clamp(150px, 24vh, 250px);
}

.nilia-built[data-stage] .nilia-features h3 {
    font-size: clamp(1.8rem, 4.2vw, 3rem);
    line-height: 1.15;
    margin-block-end: 0.7rem;
}

.nilia-built[data-stage] .nilia-features p {
    font-size: clamp(1rem, 1.9vw, 1.35rem);
    line-height: 1.55;
    max-inline-size: 38rem;
    margin-inline: auto;
}

.nilia-built[data-stage] .nilia-feature-text::before {
    font-size: 0.78rem;
    margin-block-end: 0.75rem;
}

/* The finale. Nothing is duplicated: the same six rows drop the overlap, the grid flows, and
   they stand together. */
.nilia-built[data-stage] .nilia-features[data-step="all"] {
    max-inline-size: 1060px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 1.75rem;
    align-items: start;
}

.nilia-built[data-stage] .nilia-features[data-step="all"] .nilia-feature {
    grid-area: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    gap: 0.8rem;
}

.nilia-built[data-stage] .nilia-features[data-step="all"] .nilia-feature-art {
    inline-size: 72px;
    block-size: 72px;
}

.nilia-built[data-stage] .nilia-features[data-step="all"] h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-block-end: 0.3rem;
}

.nilia-built[data-stage] .nilia-features[data-step="all"] p {
    font-size: 0.92rem;
    max-inline-size: none;
}

.nilia-built[data-stage] .nilia-features[data-step="all"] .nilia-feature-text::before {
    margin-block-end: 0.4rem;
}

/* The finale has to FIT the one screen it gets. Six tiles with body copy do not, on a phone, so
   below this width they are icon and title only: the sentence has already been read once, full
   size, on the way down. */
@media (max-width: 760px) {
    .nilia-built[data-stage] .nilia-features[data-step="all"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .nilia-built[data-stage] .nilia-features[data-step="all"] p {
        display: none;
    }

    .nilia-built[data-stage] .nilia-features[data-step="all"] .nilia-feature-art {
        inline-size: 56px;
        block-size: 56px;
    }

    .nilia-built[data-stage] .nilia-features[data-step="all"] h3 {
        font-size: 0.98rem;
    }
}

@media (max-width: 720px) {
    .nilia-feature-art {
        inline-size: 64px;
        block-size: 64px;
    }
}

.nilia-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.nilia-card {
    background: var(--nilia-ground);
    border: 1px solid var(--nilia-line);
    border-radius: 18px;
    padding: 30px 30px 32px;
    text-align: start;
    box-shadow: 0 1px 2px rgba(42, 32, 21, .04), 0 12px 28px -14px rgba(42, 32, 21, .18);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nilia-card:hover {
    border-color: var(--nilia-line-strong);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(42, 32, 21, .05), 0 18px 36px -16px rgba(42, 32, 21, .24);
}

.nilia-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--nilia-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    background: var(--nilia-amber-soft);
    color: var(--nilia-gold-deep);
}

.nilia-ar .nilia-tag {
    letter-spacing: 0;
    font-size: 12px;
}

.nilia-card-investor .nilia-tag {
    background: rgba(255, 92, 0, 0.09);
    color: var(--nilia-accent-deep);
}

.nilia-card h3 {
    font-family: var(--nilia-display);
    font-weight: 600;
    font-size: 28px;
    color: var(--nilia-ink);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.nilia-ar .nilia-card h3 {
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.45;
    font-size: 24px;
}

.nilia-card p {
    color: var(--nilia-body);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

.nilia-ar .nilia-card p {
    line-height: 1.95;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Deeper than the page so the footer reads as a base, not a third colour. */
.nilia-footer {
    position: relative;
    overflow: hidden;
    margin-top: auto;
    z-index: 10;
    background: #8a3f07;
}

.nilia-footer-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 0;
}

/* SH (2026-09-23) — one column since Legals was removed, so the track sizing has to follow it:
   a fixed 2-up (3-up on desktop) grid would have left the single list hugging one edge with two
   empty columns beside it, which reads as something failing to load rather than as a short
   footer. auto-fit keeps the row honest if a second column ever comes back. */
.nilia-footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
    row-gap: 36px;
    column-gap: 32px;
    margin-bottom: 56px;
}

/* Mada مدى in the footer bar, same rule as the wordmark: the pair reads English then Arabic in
   both languages, because a name is not a sentence and should not reorder with the page. */
.nilia-footer-brand {
    direction: ltr;
    unicode-bidi: isolate;
}

.nilia-footer-cols h4 {
    margin: 0 0 18px;
    font-family: var(--nilia-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.nilia-ar .nilia-footer-cols h4 {
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}

.nilia-footer-cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nilia-footer-cols a,
.nilia-footer-cols button {
    font-family: var(--nilia-text);
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: start;
}

.nilia-footer-cols a:hover,
.nilia-footer-cols button:hover {
    color: #fff;
}

.nilia-footer-bar {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255, 247, 232, .14);
    font-family: var(--nilia-text);
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
}

.nilia-footer-bar button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
}

.nilia-footer-bar button:hover {
    color: #fff;
}

.nilia-footer-mark {
    position: relative;
    margin-top: 24px;
}

.nilia-footer-mark div {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px 36px;
}

.nilia-footer-mark span {
    user-select: none;
    pointer-events: none;
    font-family: var(--nilia-display);
    font-size: clamp(24px, 3.5vw, 44px);
    line-height: 1;
    color: rgba(255, 255, 255, .16);
}

/* ============================================================================
   Country picker
   ----------------------------------------------------------------------------
   Sana, 2026-09-20: "the homepage should just be the countries listed
   vertically in small buttons, apple style, no 'which country' above it or the
   subtitle." So: no heading, no explainer, one narrow column of compact rows.
   Apple-style means restraint — hairline borders, a tight radius, one weight of
   type, and the only colour on the page reserved for the row you chose.
   ========================================================================== */
.nilia-country {
    background: var(--nilia-ground);
}

.nilia-country-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 20px 0;
}

.nilia-country-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 24px 72px;
}

.nilia-country-list {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nilia-country-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    background: var(--nilia-ground);
    border: 1px solid var(--nilia-line-strong);
    border-radius: 12px;
    cursor: pointer;
    text-align: start;
    color: rgba(255, 255, 255, .92);
    /* `color` is in here deliberately. The ink flips from white to near-black on hover, and with
       only the background easing there was a 150ms window holding the new ink against the old
       orange — during which the chevron, which turns the same burnt orange as the page, was not
       there at all. Both ends of a contrast pair have to move together. */
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
        transform .1s ease;
}

.nilia-country-row svg {
    flex-shrink: 0;
    color: var(--nilia-muted);
    transition: color .15s ease;
}

.nilia-ar .nilia-country-row svg {
    transform: rotate(180deg);
}

.nilia-country-row:hover,
.nilia-country-row:hover .nilia-country-name {
    color: var(--nilia-panel-ink);
}

.nilia-country-row:hover {
    background: #FCFAF5;
    border-color: var(--nilia-amber);
}

.nilia-country-row:hover svg {
    color: var(--nilia-gold-deep);
}

.nilia-country-row:active {
    transform: scale(0.995);
}

/* The chosen row is the only colour on the page: amber as a fill, near-black on
   top of it, which is the rule the onboarding's own stylesheet sets. The near-black is
   --nilia-panel-ink, because on an orange page --nilia-ink is white. */
.nilia-country-row-on,
.nilia-country-row-on .nilia-country-name {
    color: var(--nilia-panel-ink);
}

.nilia-country-row-on {
    background: var(--nilia-amber-soft);
    border-color: var(--nilia-amber);
}

.nilia-country-row-on svg {
    color: var(--nilia-gold-deep);
}

.nilia-country-name {
    font-family: var(--nilia-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, .92);
}

/* ============================================================================
   About page
   ----------------------------------------------------------------------------
   The Khaleeji man celebrates for three seconds, then the page fades in. The
   CSS bounce below is not decoration: the Lottie alone stalled on frames and
   read as a man standing still (Sana: "The animation of the man is not
   working!"), and the keyframe carries the celebration through those frames.
   ========================================================================== */
.nilia-about {
    overflow: hidden;
}

.nilia-splash {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nilia-ground);
    opacity: 1;
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nilia-splash-out {
    opacity: 0;
    pointer-events: none;
}

.nilia-splash-figure {
    width: 360px;
    height: 480px;
    max-width: 82vw;
    filter: drop-shadow(0 30px 60px rgba(42, 32, 21, 0.18));
    transform-origin: bottom center;
    animation: nilia-celebrate 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.nilia-splash-figure > div {
    width: 100%;
    height: 100%;
}

@keyframes nilia-celebrate {
    0% { transform: translateY(0) rotate(-3deg) scale(1); }
    25% { transform: translateY(-14px) rotate(0deg) scale(1.03); }
    50% { transform: translateY(0) rotate(3deg) scale(1); }
    75% { transform: translateY(-8px) rotate(0deg) scale(1.015); }
    100% { transform: translateY(0) rotate(-3deg) scale(1); }
}

.nilia-about-body {
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nilia-about-in {
    opacity: 1;
}

.nilia-about-main {
    max-width: 1152px;
    margin: 0 auto;
    padding: 64px 24px;
}

.nilia-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.nilia-about-cover {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.nilia-about-cover img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 25px 50px -12px rgba(42, 32, 21, 0.25);
    display: block;
}

.nilia-about-copy h1 {
    font-family: var(--nilia-display);
    font-size: clamp(1.8rem, 3.9vw, 2.8rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 22px;
    text-wrap: balance;
}

.nilia-ar .nilia-about-copy h1 {
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
}

.nilia-about-copy p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 16px;
}

.nilia-ar .nilia-about-copy p {
    line-height: 2;
}

/* ── Wider screens ──────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .nilia-footer-bar {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .nilia-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .nilia-price-coin {
        width: 300px;
    }

    .nilia-about-copy p {
        font-size: 17px;
    }
}

@media (min-width: 1024px) {
    .nilia-header-inner,
    .nilia-country-top,
    .nilia-hero,
    .nilia-built,
    .nilia-footer-inner,
    .nilia-footer-mark div,
    .nilia-about-main {
        padding-left: 48px;
        padding-right: 48px;
    }

    .nilia-hero {
        padding-top: 104px;
        padding-bottom: 120px;
    }

    .nilia-about-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 80px;
    }

    .nilia-about-main {
        padding-top: 88px;
        padding-bottom: 88px;
    }
}

/* Someone who asked their system not to animate things still gets the page. */
@media (prefers-reduced-motion: reduce) {
    #nilia-canvas {
        display: none;
    }

    /* No scroll choreography: the coin section collapses to an ordinary block that is
       simply there. nilia-landing.js leaves both parts at full opacity to match. */
    .nilia-price {
        height: auto;
    }

    .nilia-price-sticky {
        position: static;
        height: auto;
        padding: 80px 24px;
    }

    .nilia-price-coin-wrap,
    .nilia-price-copy {
        opacity: 1;
    }

    .nilia-splash-figure {
        animation: none;
    }

    .nilia-cta,
    .nilia-cta svg,
    .nilia-card,
    .nilia-country-row {
        transition: none;
    }
}