/* ═══════════════════════════════════════════════════════════════════════
   Public landing page — templates/landing.html + static/landing.js
   ───────────────────────────────────────────────────────────────────────
   Loaded ONLY by the landing page (via head_extra), so none of this weight
   reaches the app pages. Everything is prefixed .lp-*.

   Design brief: "مخطوطة معاصرة" — a contemporary manuscript — and, since
   the school is called أنوار, LIGHT is the interaction language:
     · the hero is an arcade of the logo's arches that rises as the page
       opens, and the logo's own birds take flight from it
     · the vision statement lights up word by word as it is read
     · a chosen subject niche fills with light
     · card borders catch light under the pointer
     · switching theme is a circular sunrise / nightfall reveal
   One signature shape (the round-headed arch from the logo) recurs at every scale, and every
   section has a different structure so the page never settles into a
   repeating card-grid rhythm.

   Hero, marquee and CTA bands are theme-INDEPENDENT deep green: deriving them
   from --primary drops cream text to ~3.4:1 in dark mode.

   Every animation is disabled under prefers-reduced-motion, and anything that
   starts hidden is hidden by a class that only JS adds.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --lp-ink:        #08251a;
    --lp-ink-2:      #0d3524;
    --lp-ink-3:      #14472f;
    --lp-on-dark:    #f7f1e3;                 /* 13.9:1 on --lp-ink */
    --lp-on-dark-mut:rgba(247,241,227,0.76);
    --lp-gold:       #d8b872;                 /* 8.1:1 on --lp-ink */
    --lp-gold-dim:   rgba(216,184,114,0.28);
    --lp-display:    clamp(2.1rem, 1.25rem + 3.7vw, 4.15rem);
    --lp-h2:         clamp(1.55rem, 1.15rem + 1.7vw, 2.5rem);
    --lp-naskh:      'Noto Naskh Arabic', serif;
    --lp-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
    --lp-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --lp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* style.css puts overflow-x:hidden on BOTH html and body. That turns body into
   a scroll container that never actually scrolls, so position:sticky inside it
   has nothing to stick to — the header just scrolled away. `clip` hides the
   horizontal overflow the same way without creating a scroll container.
   Scoped with :has() so the app pages are untouched. */
html:has(.lp-header),
html:has(.lp-header) body { overflow-x: clip; }

.lp-skip-anchor { display: block; height: 0; }
.lp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Scroll reveal (class added by JS only) ─────────────────────────── */
/* Scoped with :not(.is-done): once the entrance finishes, JS adds .is-done and
   these rules stop matching. Otherwise the reveal's own `transition` (0.8s, with
   stagger delay) and its `transform: none` — which outranks `:hover` — would
   permanently replace the element's own hover lift and transitions. */
.lp-reveal-on [data-reveal]:not(.is-done) {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease);
    transition-delay: calc(var(--d, 0) * 80ms);
}
.lp-reveal-on [data-reveal].is-in:not(.is-done) { opacity: 1; transform: none; }

/* Public marketing page: allow pinch-zoom. style.css locks the whole app to
   `touch-action: pan-y` against PWA horizontal drift, which also blocks zooming;
   horizontal overflow is already clipped here. */
html:has(.lp-header),
html:has(.lp-header) body { touch-action: pan-y pinch-zoom; }

/* ─── The signature arch ─────────────────────────────────────────────── */
.lp-arch { display: block; overflow: visible; }
/* Light tracing the outline: pathLength="1" on the path makes this length-agnostic. */
.lp-reveal-on .lp-draw .lp-arch-line,
.lp-reveal-on .lp-draw .lp-niche-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s var(--lp-ease);
    transition-delay: calc(var(--d, 0) * 90ms + 150ms);
}
.lp-reveal-on .lp-draw.is-in .lp-arch-line,
.lp-reveal-on .lp-draw.is-in .lp-niche-line { stroke-dashoffset: 0; }

/* ─── Rubrication marks ──────────────────────────────────────────────── */
.lp-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
}
.lp-kicker::after {
    content: '';
    flex: 1;
    height: 1px;
    max-width: 180px;
    background: linear-gradient(to left, transparent, var(--border));
}
.lp-kicker-center { justify-content: center; }
.lp-kicker-center::after { display: none; }
/* One of the logo's birds, mirrored so that in right-to-left reading it
   flies toward the words it introduces. */
.lp-kicker-mark { display: inline-flex; flex-shrink: 0; transform: scaleX(-1); --brand-birds: var(--accent); }
.lp-kicker-dark { color: var(--lp-gold); }
.lp-kicker-dark .lp-kicker-mark { --brand-birds: var(--lp-gold); }

.lp-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-5) auto;
    max-width: 240px;
    color: var(--lp-gold);
}
.lp-rule::before, .lp-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, currentColor); }
.lp-rule::after { background: linear-gradient(to left, transparent, currentColor); }
.lp-rule span { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex-shrink: 0; }
/* Hero divider carrying the slogan «على طريق المختار» between the two gold lines. */
.lp-rule-slogan { max-width: 380px; gap: var(--space-4); --brand-tagline: var(--lp-gold); }
.lp-rule-slogan .lp-slogan { opacity: 0.95; }

/* ─── Header ─────────────────────────────────────────────────────────────
   Every colour inside the bar reads from four local properties, and the three
   states only swap those — so no child needs per-state rules of its own. */
:root { --lp-hh: 72px; }

.lp-header {
    --h-fg:   var(--text);
    --h-mut:  var(--text-muted);
    --h-bg:   color-mix(in srgb, var(--bg) 84%, transparent);
    --h-line: var(--border);
    --h-ring: var(--focus-ring);
    position: sticky;
    top: 0;
    z-index: 1040;
    color: var(--h-fg);
    background: var(--h-bg);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 -1px 0 var(--h-line);
    padding-top: env(safe-area-inset-top);
    transition: background 0.35s ease-out, box-shadow 0.35s ease-out, color 0.35s ease-out;
}
@supports not (background: color-mix(in srgb, red, blue)) { .lp-header { --h-bg: var(--bg); } }

/* Anything drawn on a dark ground: cream foreground, gold focus ring. */
.lp-header.is-top,
.lp-header.is-dark,
[data-theme="dark"] .lp-header {
    --h-fg:   #f7f1e3;
    --h-mut:  rgba(247,241,227,0.72);
    --h-ring: #d8b872;
}
.lp-header.is-top  { --h-bg: transparent; --h-line: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lp-header.is-dark { --h-bg: rgba(8,37,26,0.74); --h-line: rgba(216,184,114,0.16); }
[data-theme="dark"] .lp-header:not(.is-top):not(.is-dark) { --h-line: rgba(216,184,114,0.14); }

.lp-header :focus-visible { outline-color: var(--h-ring); }

/* The hero slides up underneath the bar so the transparent state shows it. */
.lp-hero {
    margin-top: calc(-1 * (var(--lp-hh) + env(safe-area-inset-top)));
    padding-top: calc(var(--lp-hh) + env(safe-area-inset-top));
}

/* Reading progress — a gold hairline that grows from the reading start edge. */
.lp-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to left, var(--accent), #e9d39d);
    transform: scaleX(var(--p, 0));
    transform-origin: right;           /* RTL: reading starts on the right */
    pointer-events: none;
}
.lp-header.is-top .lp-progress { opacity: 0; }

.lp-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* nav sits truly centred */
    align-items: center;
    gap: var(--space-5);
    min-height: var(--lp-hh);
}

/* Brand: the official lockup, horizontally. */
.lp-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--h-fg) !important;
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.brand-svg { display: block; flex-shrink: 0; overflow: visible; }
.lp-brand-sep { width: 1px; height: 26px; background: currentColor; opacity: 0.22; }

/* Brand colours (static/brand.svg reads these). Official artwork is drawn for
   dark grounds; on a light ground the lettering takes the logo's dark green. */
.lp-header, .lp-footer {
    --brand-letters: #004030;
    --brand-birds:   #c4a55a;
    --brand-tagline: #6f6452;
}
.lp-header.is-top, .lp-header.is-dark,
[data-theme="dark"] .lp-header, [data-theme="dark"] .lp-footer {
    --brand-letters: #d8c591;
    --brand-birds:   #dcd0a8;
    --brand-tagline: #dcd0a8;
}

/* Nav: plain links, one thin gold line sliding under the section in view. */
.lp-nav {
    position: relative;
    display: flex;
    gap: 30px;
}
.lp-nav a {
    position: relative;
    color: var(--h-mut);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: var(--weight-medium);
    padding: 10px 0;
    border-radius: 4px;
    transition: color 0.2s ease-out;
}
.lp-nav a:hover, .lp-nav a.is-active { color: var(--h-fg); }
.lp-nav-ink {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0;
    transition: transform 0.45s var(--lp-spring), width 0.45s var(--lp-spring), opacity 0.25s ease-out;
    pointer-events: none;
}
.lp-nav-ink.is-on { opacity: 1; }

.lp-header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-icon-btn {
    all: unset;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--h-mut);
    font-size: 1.05rem;
    transition: background 0.2s ease-out, color 0.2s ease-out;
}
.lp-icon-btn:hover { color: var(--h-fg); background: color-mix(in srgb, currentColor 12%, transparent); }
.lp-icon-btn:focus-visible { outline: 2px solid var(--h-ring); outline-offset: 2px; }
.lp-icon-btn :is(i, .ic) { transition: transform 0.5s var(--lp-spring); }
.lp-icon-btn:hover :is(i, .ic) { transform: rotate(-20deg); }

.lp-hbtn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: var(--weight-bold);
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background: var(--primary);
    border: 1px solid transparent;
    transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}
.lp-hbtn:hover { color: #fff; background: var(--primary-hover); box-shadow: 0 6px 18px rgba(31,107,69,0.25); }
.lp-hbtn:focus-visible { outline: 2px solid var(--h-ring); outline-offset: 2px; }
/* Dark theme: dark ink on the bright fill (white on #2d9b65 fails AA). */
[data-theme="dark"] .lp-hbtn, [data-theme="dark"] .lp-hbtn:hover { color: #04150c; }
/* On the dark hero: a quiet cream outline, so it doesn't compete with the hero CTAs. */
.lp-header.is-top .lp-hbtn,
.lp-header.is-dark .lp-hbtn { color: #f7f1e3; background: rgba(247,241,227,0.08); border-color: rgba(247,241,227,0.32); box-shadow: none; }
.lp-header.is-top .lp-hbtn:hover,
.lp-header.is-dark .lp-hbtn:hover { color: #f7f1e3; background: rgba(247,241,227,0.18); border-color: rgba(247,241,227,0.6); }

/* «انضمي» — the visitor's way in, straight to WhatsApp. Gold in every header
   state, so it is the one filled thing in the bar over the dark hero. */
.lp-hbtn-wa,
.lp-header.is-top .lp-hbtn-wa,
.lp-header.is-dark .lp-hbtn-wa {
    gap: 7px;
    padding-inline: 16px 18px;
    color: #1f1603;
    background: var(--lp-gold);
    border-color: var(--lp-gold);
}
.lp-hbtn-wa:hover,
.lp-header.is-top .lp-hbtn-wa:hover,
.lp-header.is-dark .lp-hbtn-wa:hover { color: #1f1603; background: #e4c888; border-color: #e4c888; }
.lp-hbtn-wa .ic { font-size: 1.15rem; }
.lp-header-actions { display: flex; align-items: center; gap: 10px; }
/* Phones: the hero's own button and the floating one already carry it. */
@media (max-width: 575.98px) { .lp-hbtn-wa { display: none; } }

@media (max-width: 991.98px) {
    .lp-header-inner { display: flex; justify-content: space-between; gap: var(--space-3); }
    .lp-nav { display: none; }
}
@media (max-width: 379.98px) {
    .lp-brand-sep, .lp-brand-tag { display: none; }
    .lp-hbtn { padding: 0 14px; }
}

/* Sunrise / nightfall: the new theme grows as a circle from the toggle. */
html.lp-vt::view-transition-old(root),
html.lp-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.lp-vt::view-transition-new(root) { animation: lp-circle-in 0.7s var(--lp-ease); }
@keyframes lp-circle-in {
    from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); }
    to   { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); }
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 60% 55% at 50% 8%, rgba(216,184,114,0.20), transparent 62%),
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(8,37,26,0.85), transparent 70%),
        linear-gradient(168deg, var(--lp-ink-3) 0%, var(--lp-ink-2) 45%, var(--lp-ink) 100%);
    color: var(--lp-on-dark);
    overflow: hidden;
}
.lp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--lp-grain);
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ─── The arcade ─────────────────────────────────────────────────────────
   Broad arches of the mark's shape in three depths, each rising out of the
   floor in turn as the page opens: far gate, then the middle pair, then the
   near pair. The resting state is the risen one, so reduced motion (which
   switches animations off site-wide) and print simply show the finished
   arcade, never an empty hero. */
.lp-arcade {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    /* The box never gets much taller than it is wide, or slicing to fill it
       would crop the flanking arches off a phone or tablet and leave only
       the empty centre of the gate. */
    height: min(100%, 95vw);
    pointer-events: none;
}
.lp-arc {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: lp-arc-rise 1.35s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.lp-arc-far  { animation-delay: 0.08s; }
.lp-arc-mid  { animation-delay: 0.36s; }
.lp-arc-near { animation-delay: 0.62s; }
@keyframes lp-arc-rise {
    from { transform: translateY(60%); opacity: 0; }
    45%  { opacity: 1; }
}
/* the lattice lives only inside the flanking arches, never behind words */
.lp-arc-lattice { opacity: 0.1; }
.lp-arc-glow { animation: lp-arc-fade 2.2s ease-out 0.45s backwards; }
.lp-arc-floor { animation: lp-arc-fade 1.1s ease-out backwards; }
.lp-arc-horizon {
    stroke: #d8b872;
    stroke-opacity: 0.24;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: lp-arc-horizon 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@keyframes lp-arc-fade { from { opacity: 0; } }
@keyframes lp-arc-horizon { from { transform: scaleX(0); } }

/* ─── The birds of the mark ──────────────────────────────────────────────
   Three copies of the logo's own birds sit exactly over the ones drawn in
   the mark. When the arcade has risen they take flight up and away, the
   mark's birds vanish at that same instant (so there is no double), and a
   moment after the flock has gone the mark's birds quietly return. Hover or
   tap the logo and they go again (landing.js sets --fly-delay: 0s on the
   frame for a replay, where both the flock and the mark can see it).
   Registering the property is what lets the
   mark's bird colour be animated at all. */
@property --brand-birds {
    syntax: '<color>';
    inherits: true;
    initial-value: #dcd0a8;
}
.lp-flock { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lp-bird { position: absolute; display: block; opacity: 0; line-height: 0; }
.lp-bird .brand-svg { transform-origin: 50% 50%; }
.lp-frontispiece .lp-bird-1 { left: 63.2px; top: 57.6px; }
.lp-frontispiece .lp-bird-2 { left: 42.2px; top: 64px; }
.lp-frontispiece .lp-bird-3 { left: 32.8px; top: 75px; }
.lp-flock.is-flying .lp-bird {
    animation: lp-fly-1 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--fly-delay, 1.75s) forwards;
}
.lp-flock.is-flying .lp-bird-2 { animation-name: lp-fly-2; animation-delay: calc(var(--fly-delay, 1.75s) + 0.14s); }
.lp-flock.is-flying .lp-bird-3 { animation-name: lp-fly-3; animation-delay: calc(var(--fly-delay, 1.75s) + 0.28s); }
.lp-flock.is-flying .lp-bird .brand-svg { animation: lp-flap 0.2s ease-in-out infinite alternate; }
@keyframes lp-flap { to { transform: scaleY(0.72); } }
@keyframes lp-fly-1 {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    38%  { transform: translate(130px, -92px) scale(2.2) rotate(-10deg); }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: translate(640px, -150px) scale(3.2) rotate(-2deg); }
}
@keyframes lp-fly-2 {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    42%  { transform: translate(86px, -118px) scale(2.5) rotate(-16deg); }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: translate(560px, -190px) scale(3.4) rotate(-6deg); }
}
@keyframes lp-fly-3 {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    36%  { transform: translate(160px, -62px) scale(2) rotate(-4deg); }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: translate(700px, -112px) scale(2.9) rotate(2deg); }
}
/* the mark's own birds step aside for the flight and come home after */
.lp-frontispiece:has(.lp-flock.is-flying) .lp-lockup-mark {
    animation: lp-birds-away 5.9s linear var(--fly-delay, 1.75s) forwards;
}
@keyframes lp-birds-away {
    0%, 77% { --brand-birds: rgba(220, 208, 168, 0); }
    100%    { --brand-birds: #dcd0a8; }
}
/* the invitation at the foot of the page gets its own small flight */
.lp-cta-flock .lp-bird-1 { left: 16%; top: 72%; }
.lp-cta-flock .lp-bird-2 { left: 12%; top: 64%; }
.lp-cta-flock .lp-bird-3 { left: 9%;  top: 78%; }
.lp-cta-flock { --brand-birds: #dcd0a8; --fly-delay: 0.5s; }

.lp-hero-inner {
    position: relative;
    text-align: center;
    max-width: 820px;
    padding-block: clamp(52px, 7vw, 92px) clamp(40px, 5vw, 64px);
}
@media (min-width: 992px) {
    .lp-hero-inner { min-height: min(86vh, 800px); display: flex; flex-direction: column; justify-content: center; }
}

.lp-frontispiece {
    position: relative;
    width: 150px;
    margin: 0 auto var(--space-5);
    color: var(--lp-gold);
    /* Gentle scroll parallax. The individual `translate` property, not
       `transform`, because the reveal animation owns `transform` here. */
    translate: 0 calc(var(--sy, 0) * -0.12px);
}
.lp-frontispiece .lp-arch {
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
}
/* The official vector lockup (mark over tagline) straight on the green — no
   tile — so the logo's own arch nests inside the gold frame. */
.lp-lockup {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transform: translate(50%, -50%);
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
    animation: lp-float 6s ease-in-out infinite;
}
@keyframes lp-float {
    0%, 100% { transform: translate(50%, -50%); }
    50%      { transform: translate(50%, calc(-50% - 6px)); }
}
.lp-frontispiece::before {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    width: 210px;
    height: 210px;
    transform: translate(50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,184,114,0.30), transparent 68%);
    animation: lp-breathe 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lp-breathe {
    0%, 100% { opacity: 0.75; transform: translate(50%, -50%) scale(0.94); }
    50%      { opacity: 1;    transform: translate(50%, -50%) scale(1.06); }
}

/* Title: cream→gold wash plus a single glint of light sweeping across.
   Animated by WORD-free background position — Arabic letters are joined, so
   anything per-letter would break the shaping. */
.lp-hero-title {
    font-family: var(--lp-naskh);
    color: var(--lp-on-dark);
    font-size: var(--lp-display);
    font-weight: var(--weight-bold);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lp-hero-title {
        background:
            linear-gradient(105deg, transparent 42%, rgba(255,250,235,0.95) 50%, transparent 58%) no-repeat,
            linear-gradient(172deg, #fdfaf2 22%, #ecd9ac 64%, #d3b269 100%);
        background-size: 260% 100%, 100% 100%;
        background-position: 130% 0, 0 0;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
    }
    .lp-hero-title.is-in, .lp-hero-title:hover { animation: lp-glint 2.2s var(--lp-ease) 0.5s 1 both; }
}
@keyframes lp-glint {
    from { background-position: 130% 0, 0 0; }
    to   { background-position: -30% 0, 0 0; }
}

.lp-hero-sub {
    color: var(--lp-on-dark-mut);
    font-size: clamp(1rem, 0.94rem + 0.4vw, 1.22rem);
    line-height: 1.85;
    margin: 0 auto var(--space-6);
    max-width: 42rem;
}
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.lp-ledger {
    list-style: none;
    margin: clamp(40px, 6vw, 72px) 0 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--lp-gold-dim);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.lp-ledger li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    color: var(--lp-on-dark-mut);
    line-height: 1.5;
}
.lp-ledger li + li { border-inline-start: 1px solid var(--lp-gold-dim); }
.lp-ledger :is(i, .ic) { font-size: 1.3rem; color: var(--lp-gold); }
.lp-ledger b { display: block; color: var(--lp-on-dark); font-size: var(--text-base); font-weight: var(--weight-bold); }

/* Scroll cue */
.lp-scroll-cue {
    display: none;
    margin: var(--space-6) auto 0;
    width: 26px;
    height: 42px;
    border: 1.5px solid var(--lp-gold-dim);
    border-radius: 999px;
    position: relative;
}
.lp-scroll-cue::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-inline-start: -2px;
    border-radius: 2px;
    background: var(--lp-gold);
    animation: lp-cue 1.8s ease-in-out infinite;
}
@keyframes lp-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 992px) and (min-height: 760px) { .lp-scroll-cue { display: block; } }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.lp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    text-decoration: none;
    border: 1.5px solid transparent;
    overflow: hidden;
    /* --mx/--my: magnetic offset set by JS on fine pointers */
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out,
                box-shadow 0.25s ease-out, transform 0.35s var(--lp-spring);
}
.lp-btn.is-magnet { transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.08s linear; }
/* A sheen that sweeps across on hover. */
.lp-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
    transform: translateX(120%);
    transition: transform 0.7s var(--lp-ease);
    pointer-events: none;
}
.lp-btn:hover::after { transform: translateX(-120%); }

.lp-btn-primary {
    background: linear-gradient(150deg, #f6ebd2, #dcbf7e);
    color: #2a1e05 !important;
    box-shadow: 0 10px 30px rgba(216,184,114,0.22);
}
.lp-btn-primary:hover { color: #2a1e05 !important; box-shadow: 0 16px 40px rgba(216,184,114,0.38); }
.lp-btn-ghost {
    background: rgba(247,241,227,0.04);
    color: var(--lp-on-dark) !important;
    border-color: rgba(247,241,227,0.34);
}
.lp-btn-ghost:hover { background: rgba(247,241,227,0.13); color: var(--lp-on-dark) !important; border-color: rgba(247,241,227,0.7); }
.lp-btn-ghost::after { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%); }
.lp-btn:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }

/* ─── Marquee band ───────────────────────────────────────────────────── */
.lp-marquee {
    position: relative;
    overflow: hidden;
    background: var(--lp-ink);
    border-block: 1px solid var(--lp-gold-dim);
    padding-block: 18px;
}
/* Edge fades are overlays in the band's own colour. A mask would make the band
   itself transparent at the ends and let the beige page show through. */
.lp-marquee::before,
.lp-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    z-index: 1;
    pointer-events: none;
}
.lp-marquee::before { left: 0;  background: linear-gradient(to right, var(--lp-ink), transparent); }
.lp-marquee::after  { right: 0; background: linear-gradient(to left,  var(--lp-ink), transparent); }
.lp-marquee-track {
    display: flex;
    width: max-content;
    animation: lp-marquee 48s linear infinite;
}
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.lp-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding-inline-end: 28px;
    font-family: var(--lp-naskh);
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
    font-weight: var(--weight-bold);
    white-space: nowrap;
    color: var(--lp-on-dark);
}
.lp-marquee-item:nth-child(even) { color: var(--lp-gold); }
.lp-marquee-item::after { content: ''; width: 8px; height: 8px; transform: rotate(45deg); background: var(--lp-gold-dim); }
/* RTL: an RTL track is anchored to the right edge with its second copy
   laid out to the LEFT of the first, so it must travel 0 → +50% (rightward)
   to loop seamlessly. -50% → 0 would open a blank gap at the right. */
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ─── Section scaffolding ────────────────────────────────────────────── */
.lp-section { padding-block: clamp(64px, 9vw, 116px); position: relative; }
.lp-section-alt { background: var(--bg-card); border-block: 1px solid var(--border); }

.lp-h2 {
    font-family: var(--lp-naskh);
    font-size: var(--lp-h2);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
    max-width: 22ch;
}
.lp-h2-center { margin-inline: auto; text-align: center; max-width: 26ch; }
.lp-lead { color: var(--text-secondary); font-size: var(--text-lg); line-height: 1.85; max-width: 58ch; margin: 0; }
.lp-lead-center { margin-inline: auto; text-align: center; }

/* ─── Vision ─────────────────────────────────────────────────────────── */
.lp-vision { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 899.98px) { .lp-vision { grid-template-columns: 1fr; } }

.lp-quote {
    position: relative;
    margin: var(--space-5) 0 0;
    padding-inline-start: var(--space-5);
    border-inline-start: 2px solid var(--border);
    font-family: var(--lp-naskh);
    font-size: clamp(1.18rem, 1rem + 0.8vw, 1.6rem);
    line-height: 1.95;
    color: var(--text);
}
/* The rule itself fills with gold as the words light up (--qp: 0..1). */
.lp-quote::after {
    content: '';
    position: absolute;
    inset-inline-start: -2px;
    top: 0;
    width: 2px;
    height: calc(var(--qp, 1) * 100%);
    background: var(--accent);
}
.lp-quote::before {
    content: '';
    position: absolute;
    inset-inline-start: -6px;
    top: calc(var(--qp, 1) * 100% - 5px);
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Words are split into spans by JS; each is dim until the reader reaches it. */
.lp-quote .lp-w { transition: color 0.4s ease-out, text-shadow 0.4s ease-out; }
.lp-quote.is-split .lp-w { color: color-mix(in srgb, var(--text) 24%, transparent); }
.lp-quote.is-split .lp-w.is-lit { color: var(--text); }
.lp-quote.is-split .lp-w.is-glow { color: var(--accent-text); }

.lp-pillars { list-style: none; margin: 0; padding: 0; }
.lp-pillar {
    position: relative;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-3);
    margin-inline: calc(var(--space-3) * -1);
    border-radius: var(--radius-md);
    transition: background 0.3s ease-out;
}
/* Dividers as straight hairlines. A border-bottom on a rounded box curls up
   at both ends. */
.lp-pillar + .lp-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: var(--space-3);
    height: 1px;
    background: var(--border);
}
.lp-pillar:hover { background: var(--primary-light); }
.lp-pillar-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1.25rem;
    transition: transform 0.45s var(--lp-spring), background 0.3s, color 0.3s;
}
.lp-pillar:hover .lp-pillar-icon { transform: rotate(-8deg) scale(1.08); background: var(--primary); color: #fff; }
[data-theme="dark"] .lp-pillar-icon { color: var(--link); }
[data-theme="dark"] .lp-pillar:hover .lp-pillar-icon { background: var(--link); color: #04150c; }
.lp-pillar h3 { font-size: var(--text-lg); color: var(--text); margin: 0 0 6px; }
.lp-pillar p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.8; margin: 0; }

/* ─── Subjects — selectable niches + detail panel ────────────────────── */
.lp-subjects-band { overflow: hidden; }
.lp-subjects-band::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: -12%;
    width: 46%;
    background: url('/static/pattern.png') repeat;
    background-size: 200px;
    opacity: 0.06;
    -webkit-mask-image: radial-gradient(ellipse 100% 78% at 0% 50%, #000 8%, transparent 72%);
            mask-image: radial-gradient(ellipse 100% 78% at 0% 50%, #000 8%, transparent 72%);
    pointer-events: none;
}

/* The five subjects are one arcade, a riwaq: five doorways of the same
   colonnade standing on one floor. They used to stand apart in wide columns,
   each washed in its own pastel, and read as a row of headstones against a
   page that is otherwise cream, green and gold. Now every arch shares one
   neutral treatment and the subject's colour lives only in its mark, until
   that arch is chosen. Columns have no gutter so the floor runs unbroken. */
.lp-niches {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    row-gap: var(--space-5);
    max-width: 820px;
    margin: clamp(32px, 4vw, 56px) auto 0;
    perspective: 900px;
}
/* Phones: wrap 3 + 2 rather than a swipe rail — every subject stays visible,
   with no hidden gesture to discover. Each row gets its own stretch of floor,
   faded at both of its ends. Six half-columns, two per arch, so the second
   row of two sits centred under the first instead of hanging to one side. */
@media (max-width: 479.98px) {
    .lp-niches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lp-niches .lp-niche { grid-column: span 2; }
    .lp-niches .lp-niche:nth-child(4) { grid-column: 2 / span 2; }
    .lp-niches .lp-niche:nth-child(3) .lp-niche-name::before { background: linear-gradient(to right, transparent, var(--accent) 70%); }
    .lp-niches .lp-niche:nth-child(4) .lp-niche-name::before { background: linear-gradient(to left, transparent, var(--accent) 70%); }
}
/* Scoped under .lp-niches: this block precedes the base niche rules, so a bare
   selector would lose to them on source order. */
@media (max-width: 767.98px) {
    .lp-niches .lp-niche-name { font-size: 0.88rem; }
    .lp-niches .lp-niche-shape { max-width: 92px; }
}

.lp-niche {
    all: unset;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    color: var(--subject-hue, var(--primary));
    border-radius: var(--radius-md);
    padding: 6px 4px 0;
    -webkit-tap-highlight-color: transparent;
}
.lp-niche:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.lp-niche-shape {
    /* A <span> (buttons may only contain phrasing content), so it must be made
       a block explicitly — inline, it ignores max-width and aspect-ratio and
       stops being a positioning box for the icon. */
    display: block;
    position: relative;
    width: 100%;
    max-width: 124px;
    margin: 0 auto;
    aspect-ratio: 100 / 132;
    transform-style: preserve-3d;
    transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px));
    transition: transform 0.5s var(--lp-spring);
}
.lp-niche:hover .lp-niche-shape { --lift: -6px; }
.lp-niche.is-tilting .lp-niche-shape { transition: transform 0.1s linear; }
.lp-niche-shape .lp-arch { width: 100%; height: 100%; }
.lp-niche-fill { fill: var(--accent); opacity: 0.07; transition: opacity 0.4s; }
.lp-niche-line { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.55;
                 transition: stroke 0.4s, opacity 0.4s, stroke-width 0.4s; }
.lp-niche:hover .lp-niche-line { opacity: 0.9; }
/* Light rising inside the arch when the niche is chosen. */
.lp-niche-light {
    fill: currentColor;
    opacity: 0.32;
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.7s var(--lp-ease);
}
.lp-niche[aria-selected="true"] .lp-niche-light { transform: scaleY(1); }
.lp-niche[aria-selected="true"] .lp-niche-line { stroke: currentColor; opacity: 1; stroke-width: 2; }
.lp-niche[aria-selected="true"] .lp-niche-fill { opacity: 0; }
.lp-niche[aria-selected="true"] .lp-niche-shape { filter: drop-shadow(0 10px 22px color-mix(in srgb, currentColor 35%, transparent)); }
.lp-niche-shape .lp-niche-icon {
    position: absolute;
    inset-inline-start: 50%;
    top: 54%;
    transform: translate(50%, -50%) translateZ(24px);
    /* Was clamp(1.7rem … 2.4rem): roughly a quarter of the arch, so each niche
       read as a big empty doorway with a small sticker in it. The mark now
       fills the arch the way a lamp fills a mihrab. */
    font-size: clamp(2.6rem, 1.6rem + 3vw, 3.9rem);
    transition: transform 0.5s var(--lp-spring);
}
.lp-niche[aria-selected="true"] .lp-niche-shape .lp-niche-icon { transform: translate(50%, -50%) translateZ(24px) scale(1.1); }
.lp-niche .lp-niche-icon { opacity: 0.78; transition: opacity 0.3s, transform 0.5s var(--lp-spring); }
.lp-niche:hover .lp-niche-icon,
.lp-niche[aria-selected="true"] .lp-niche-icon { opacity: 1; }
.lp-niche-name {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    padding-top: var(--space-4);
    position: relative;
    transition: color 0.3s;
}
.lp-niche-name::before {
    content: '';
    position: absolute;
    /* run into the button's own 4px side padding, or the floor breaks
       between every pair of arches */
    inset-inline: -4px;
    top: 0;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
}
/* fade the floor out at the two ends of each row, like .lp-rule */
.lp-niche:first-child .lp-niche-name::before { background: linear-gradient(to left, transparent, var(--accent) 70%); }
.lp-niche:last-child  .lp-niche-name::before { background: linear-gradient(to right, transparent, var(--accent) 70%); }
.lp-niche-name::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    width: 7px;
    height: 7px;
    background: var(--accent);
    translate: 50% -50%;
    rotate: 45deg;
    scale: 0;
    transition: scale 0.35s var(--lp-spring), background 0.3s;
}
.lp-niche[aria-selected="true"] .lp-niche-name { color: var(--text); }
.lp-niche[aria-selected="true"] .lp-niche-name::after { scale: 1; background: var(--subject-hue, var(--accent)); }

.lp-subject-panel {
    position: relative;
    max-width: 860px;           /* as wide as the arcade it belongs to */
    margin: var(--space-6) auto 0;
    padding: clamp(24px, 3.5vw, 40px);
    border-radius: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--subject-hue, var(--primary));
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    align-items: center;
}
/* A wash of the subject's hue from the reading-start corner. */
.lp-subject-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 120% at 100% 0%, color-mix(in srgb, currentColor 14%, transparent), transparent 70%);
    pointer-events: none;
    transition: background 0.5s;
}
/* the chosen subject's mark, standing in its own small arch like the ones
   above it */
.lp-subject-panel-icon {
    position: relative;
    width: 84px;
    height: 100px;
    border-radius: 42px 42px 10px 10px;
    display: grid;
    place-items: center;
    padding-top: 8px;
    font-size: 2.9rem;
    background: color-mix(in srgb, currentColor 13%, var(--bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}
.lp-subject-panel-body { position: relative; }
.lp-subject-panel h3 { font-family: var(--lp-naskh); font-size: var(--text-2xl); color: var(--text); margin: 0 0 var(--space-2); }
.lp-subject-panel p { color: var(--text-secondary); line-height: 1.85; margin: 0 0 var(--space-4); max-width: 62ch; }
.lp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.lp-chips li {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, currentColor 30%, var(--border));
}
/* Content swap: fade/slide the incoming subject in. */
.lp-subject-panel.is-swapping .lp-subject-panel-body,
.lp-subject-panel.is-swapping .lp-subject-panel-icon { animation: lp-swap 0.5s var(--lp-ease); }
@keyframes lp-swap { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) {
    .lp-subject-panel { grid-template-columns: 1fr; text-align: start; }
    .lp-subject-panel-icon { width: 64px; height: 76px; font-size: 2.2rem; border-radius: 32px 32px 8px 8px; padding-top: 6px; }
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .lp-subject-panel::before { display: none; }
    .lp-subject-panel-icon { background: var(--bg-card); }
}

/* ─── How it works — tabs driving a live phone ───────────────────────── */
.lp-demo {
    display: grid;
    grid-template-columns: 1fr minmax(290px, 360px);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
    margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 899.98px) { .lp-demo { grid-template-columns: 1fr; } }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lp-step {
    all: unset;
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-4);
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    -webkit-tap-highlight-color: transparent;
}
.lp-step:hover { background: var(--bg-card); }
.lp-step:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lp-step[aria-selected="true"] { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-lg); }
.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-family: var(--lp-naskh);
    font-weight: var(--weight-bold);
    font-size: 1.25rem;
    transition: all 0.4s var(--lp-spring);
}
.lp-step[aria-selected="true"] .lp-step-num { border-color: var(--primary); background: var(--primary); color: #fff; transform: scale(1.06); }
[data-theme="dark"] .lp-step[aria-selected="true"] .lp-step-num { border-color: var(--link); background: var(--link); color: #04150c; }
.lp-step-h { display: block; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text); margin: 2px 0 4px; }
.lp-step-p {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.8;
    margin: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0.0;
    transition: grid-template-rows 0.45s var(--lp-ease), opacity 0.35s ease-out;
}
.lp-step-p > span { overflow: hidden; }
.lp-step[aria-selected="true"] .lp-step-p { grid-template-rows: 1fr; opacity: 1; }
/* Auto-advance timer bar along the bottom of the active step. */
.lp-step-timer {
    position: absolute;
    inset-inline: var(--space-4);
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--track);
    overflow: hidden;
    opacity: 0;
}
.lp-step-timer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(var(--t, 0));
    transform-origin: right;
}
.lp-demo.is-autoplay .lp-step[aria-selected="true"] .lp-step-timer { opacity: 1; }

/* Phones: stacked vertically, the step list pushed the phone it drives below
   the fold, so autoplay changed a screen nobody could see. Collapse the steps
   into a 4-up stepper and show only the active description beneath it (all
   four sit in the same absolute slot; only the selected one is opaque). */
@media (max-width: 899.98px) {
    .lp-demo { gap: var(--space-5); }
    .lp-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        position: relative;
        padding-bottom: 5.4em;      /* room for a 3-line caption on 320px phones */
    }
    .lp-step {
        position: static;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 6px;
        padding: 10px 4px 12px;
    }
    .lp-step[aria-selected="true"] { box-shadow: var(--shadow); }
    .lp-step-num { width: 40px; height: 40px; font-size: 1.05rem; }
    .lp-step-h { font-size: 0.82rem; margin: 0; line-height: 1.35; }
    .lp-step-p {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 5em;
        text-align: center;
        pointer-events: none;
    }
    .lp-step-timer { position: relative; inset: auto; width: 60%; }
    .lp-phone-wrap { max-width: 280px; }
}

/* The phone */
.lp-phone-wrap { position: relative; perspective: 1200px; justify-self: center; width: 100%; max-width: 330px; }
.lp-phone {
    position: relative;
    aspect-ratio: 9 / 18.5;
    border-radius: 46px;
    padding: 11px;
    background: linear-gradient(145deg, #1d2a24, #0a120e);
    box-shadow:
        0 0 0 1.5px #3a4a42 inset,
        0 40px 80px -20px rgba(8,37,26,0.45),
        0 18px 36px -18px rgba(0,0,0,0.4);
    transform: rotateY(var(--pry, -8deg)) rotateX(var(--prx, 4deg));
    transition: transform 0.6s var(--lp-ease);
}
.lp-phone.is-tilting { transition: transform 0.12s linear; }
[data-theme="dark"] .lp-phone { box-shadow: 0 0 0 1.5px #3a4a42 inset, 0 40px 80px -20px rgba(0,0,0,0.7); }
.lp-phone::after {                     /* glass reflection */
    content: '';
    position: absolute;
    inset: 11px;
    border-radius: 36px;
    background: linear-gradient(125deg, rgba(255,255,255,0.10), transparent 35%);
    pointer-events: none;
    z-index: 5;
}
.lp-phone-island {
    position: absolute;
    top: 20px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 86px;
    height: 24px;
    border-radius: 999px;
    background: #000;
    z-index: 6;
}
.lp-screen {
    position: relative;
    height: 100%;
    border-radius: 36px;
    overflow: hidden;
    background: #f7f1e3;
    color: #2c3e2d;
    font-size: 12px;
}
[data-theme="dark"] .lp-screen { background: #0e2f21; color: #e8dfc9; }
.lp-screen-bar {
    height: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 26px 6px;
    font-size: 11px;
    font-weight: 700;
}
.lp-screen-bar :is(i, .ic) { font-size: 11px; margin-inline-start: 3px; }

/* Scenes cross-fade; only the active one takes pointer events. */
.lp-scene {
    position: absolute;
    inset: 44px 0 0;
    padding: 8px 14px 14px;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.45s var(--lp-ease), transform 0.45s var(--lp-ease);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-scene.is-active { opacity: 1; transform: none; pointer-events: auto; }

.lp-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1f6b45, #0e2f21);
    color: #f7f1e3;
}
.lp-app-head b { display: block; font-size: 14px; font-family: var(--lp-naskh); }
.lp-app-head small { opacity: 0.8; font-size: 10.5px; }
.lp-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.lp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lp-ring circle { fill: none; stroke-width: 4; }
.lp-ring .lp-ring-track { stroke: rgba(247,241,227,0.22); }
.lp-ring .lp-ring-val {
    stroke: #d8b872;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--v, 0) * 100);
    transition: stroke-dashoffset 0.6s var(--lp-ease);
}
.lp-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; }

.lp-points {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-radius: 12px;
    background: rgba(196,165,90,0.16);
    font-weight: 700;
}
.lp-points :is(i, .ic) { color: #9a7a2a; }
[data-theme="dark"] .lp-points :is(i, .ic) { color: #d8b872; }
.lp-points b { font-size: 14px; display: inline-block; }
.lp-points b.is-bump { animation: lp-bump 0.45s var(--lp-spring); }
@keyframes lp-bump { 40% { transform: scale(1.35); color: #9a7a2a; } }

.lp-lesson {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e0d7c3;
    cursor: pointer;
    color: inherit;
    opacity: 0;
    transform: translateX(-12px);
    /* Stagger only the entrance. A shared transition-delay also delayed the
       tick colour, so tapping the 5th lesson took 0.35s to respond. */
    transition: opacity 0.4s var(--lp-ease) calc(var(--i, 0) * 70ms),
                transform 0.4s var(--lp-ease) calc(var(--i, 0) * 70ms),
                background 0.25s, border-color 0.25s;
}
[data-theme="dark"] .lp-lesson { background: #163829; border-color: #1e5038; }
.lp-scene.is-active .lp-lesson { opacity: 1; transform: none; }
.lp-lesson:focus-visible { outline: 2px solid #876a1c; outline-offset: 1px; }
.lp-lesson-ic {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--subject-hue);
    background: color-mix(in srgb, var(--subject-hue) 14%, transparent);
    font-size: 15px;
}
.lp-lesson-txt { flex: 1; min-width: 0; line-height: 1.35; }
.lp-lesson-txt b { display: block; font-size: 11.5px; }
.lp-lesson-txt small { opacity: 0.65; font-size: 10px; }
.lp-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #cdbf9f;
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--lp-spring);
}
.lp-lesson.is-done { border-color: rgba(31,107,69,0.45); background: #eef6f0; }
[data-theme="dark"] .lp-lesson.is-done { background: #1a4a33; border-color: #2d9b65; }
.lp-lesson.is-done .lp-check { background: #1f6b45; border-color: #1f6b45; color: #fff; transform: scale(1.1); }
[data-theme="dark"] .lp-lesson.is-done .lp-check { background: #43c288; border-color: #43c288; color: #04150c; }
.lp-lesson-hint { text-align: center; font-size: 10px; opacity: 0.6; margin-top: auto; }

/* Exam scene */
.lp-exam-card { padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e0d7c3; }
[data-theme="dark"] .lp-exam-card { background: #163829; border-color: #1e5038; }
.lp-exam-card b { font-size: 13px; display: block; font-family: var(--lp-naskh); }
.lp-badge-open { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; background: #e4f0e8; color: #1f6b45; }
[data-theme="dark"] .lp-badge-open { background: #1a4a33; color: #43c288; }
.lp-drop {
    all: unset;
    box-sizing: border-box;
    flex: 1;
    min-height: 150px;
    border: 1.5px dashed #cdbf9f;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.lp-drop:focus-visible { outline: 2px solid #876a1c; }
.lp-drop > :is(i, .ic) { font-size: 26px; color: #9a7a2a; }
[data-theme="dark"] .lp-drop > :is(i, .ic) { color: #d8b872; }
.lp-drop small { opacity: 0.65; font-size: 10.5px; }
/* The "photo" of the answer sheet that flies in. */
.lp-sheet {
    position: absolute;
    width: 92px;
    height: 118px;
    border-radius: 6px;
    background: repeating-linear-gradient(to bottom, #fffdf6 0 12px, #e8e0cc 12px 13px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(60px) rotate(-12deg) scale(0.8);
}
.lp-sheet::before { content: ''; position: absolute; inset: 10px 12px auto; height: 6px; border-radius: 3px; background: #c4a55a; opacity: 0.7; }
/* Landed state is a real style, the flight is `backwards`-filled on top — so
   under reduced motion (all animations stripped) the sheet still appears. */
.lp-drop.is-uploading .lp-sheet,
.lp-drop.is-uploaded .lp-sheet { opacity: 1; transform: translateY(-14px) rotate(-4deg); }
.lp-drop.is-uploading .lp-sheet { animation: lp-sheet-in 0.8s var(--lp-spring) backwards; }
.lp-drop.is-uploading > :is(i, .ic), .lp-drop.is-uploading > span, .lp-drop.is-uploading > small,
.lp-drop.is-uploaded > :is(i, .ic),  .lp-drop.is-uploaded > span,  .lp-drop.is-uploaded > small { opacity: 0; }
@keyframes lp-sheet-in { from { opacity: 0; transform: translateY(60px) rotate(-12deg) scale(0.8); } }
.lp-upbar { height: 6px; border-radius: 3px; background: #ded4bd; overflow: hidden; }
[data-theme="dark"] .lp-upbar { background: #1e5038; }
.lp-upbar span { display: block; height: 100%; width: calc(var(--u, 0) * 100%); background: #1f6b45; transition: width 0.2s linear; }
[data-theme="dark"] .lp-upbar span { background: #43c288; }
.lp-upstate { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; }
.lp-upstate .is-ok { color: #1f6b45; }
[data-theme="dark"] .lp-upstate .is-ok { color: #43c288; }

/* Result scene */
.lp-notif {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 10px 26px rgba(0,0,0,0.14);
    border: 1px solid #e0d7c3;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.6s var(--lp-spring), opacity 0.3s;
}
[data-theme="dark"] .lp-notif { background: rgba(22,56,41,0.95); border-color: #1e5038; }
.lp-scene.is-active .lp-notif.is-shown { transform: none; opacity: 1; }
.lp-notif img { border-radius: 8px; flex-shrink: 0; }
.lp-notif b { display: block; font-size: 11.5px; }
.lp-notif small { font-size: 10.5px; opacity: 0.75; }
.lp-result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.lp-score { position: relative; width: 132px; height: 132px; }
.lp-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
/* Stroke is in viewBox units (36) and this ring renders ~3.7× larger than the
   header ring, so it needs a far thinner stroke to look the same weight. */
.lp-score circle { fill: none; stroke-width: 2.6; }
.lp-score .lp-ring-track { stroke: #ded4bd; }
[data-theme="dark"] .lp-score .lp-ring-track { stroke: #1e5038; }
.lp-score .lp-ring-val { stroke: #1f6b45; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0) * 100); transition: stroke-dashoffset 1.2s var(--lp-ease); }
[data-theme="dark"] .lp-score .lp-ring-val { stroke: #43c288; }
.lp-score div { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1.1; }
.lp-score b { font-size: 34px; font-family: var(--lp-naskh); }
.lp-score small { font-size: 10.5px; opacity: 0.65; }
.lp-medal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    background: linear-gradient(135deg, #f6ebd2, #dcbf7e);
    color: #2a1e05;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.3s, transform 0.6s var(--lp-spring);
}
.lp-medal.is-shown { opacity: 1; transform: none; }
.lp-bonus { font-size: 11px; font-weight: 700; color: #7d6220; opacity: 0; transform: translateY(6px); transition: all 0.4s var(--lp-ease) 0.2s; }
[data-theme="dark"] .lp-bonus { color: #d8b872; }
.lp-bonus.is-shown { opacity: 1; transform: none; }

/* Floating chips orbiting the phone */
.lp-float-chip {
    position: absolute;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: lp-bob 5s ease-in-out infinite;
    white-space: nowrap;
}
.lp-float-chip :is(i, .ic) { color: var(--accent-text); }
.lp-float-chip.is-a { top: 14%; inset-inline-end: -14%; }
.lp-float-chip.is-b { bottom: 18%; inset-inline-start: -12%; animation-delay: -2.5s; }
.lp-float-chip.is-pop { animation: lp-pop 0.5s var(--lp-spring), lp-bob 5s ease-in-out 0.5s infinite; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lp-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (max-width: 899.98px) {
    /* Beside the phone it covers the progress ring; lift it above the frame. */
    .lp-float-chip.is-a { top: -18px; inset-inline-end: auto; inset-inline-start: 2%; }
    .lp-float-chip.is-b { inset-inline-start: -4%; }
}

/* ─── Features — bento with live tiles ───────────────────────────────── */
.lp-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: clamp(32px, 4vw, 56px);
}
.lp-tile {
    position: relative;
    isolation: isolate;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: var(--space-5);
    overflow: hidden;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.4s var(--lp-spring);
}
.lp-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Light caught under the pointer: a soft pool on the surface plus a brighter
   rim, both centred on --sx/--sy which JS sets per tile. */
.lp-tile::before,
.lp-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    pointer-events: none;
}
.lp-tile::before {
    z-index: -1;
    background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
}
.lp-tile::after {
    padding: 1px;
    background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), var(--accent), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lp-tile:hover::before, .lp-tile:hover::after { opacity: 1; }

.lp-tile-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: var(--accent-text);
    background: var(--accent-light);
    margin-bottom: var(--space-4);
}
.lp-tile h3 { font-size: var(--text-base); color: var(--text); margin: 0 0 var(--space-2); }
.lp-tile p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.8; margin: 0; }
.lp-tile-foot { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.lp-mini-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    color: var(--accent-ink);
    background: var(--accent);
    transition: transform 0.35s var(--lp-spring), box-shadow 0.3s;
}
.lp-mini-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.lp-mini-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Bell rings on hover / when the demo toast fires. */
.lp-tile:hover .bi-bell, .lp-ring-bell { animation: lp-ring 0.9s ease-in-out; transform-origin: top center; }
@keyframes lp-ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

/* Lead tile: 2×2, dark, carries the arch watermark + the install animation. */
.lp-tile-lead {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(150deg, var(--lp-ink-3), var(--lp-ink));
    border-color: var(--lp-gold-dim);
    color: var(--lp-on-dark);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-5);
    align-items: center;
}
.lp-tile-lead::before { background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(216,184,114,0.14), transparent 60%); }
.lp-tile-lead::after  { background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), var(--lp-gold), transparent 65%); }
.lp-tile-lead h3 { color: var(--lp-on-dark); font-size: var(--text-xl); font-family: var(--lp-naskh); }
.lp-tile-lead p { color: var(--lp-on-dark-mut); }
.lp-tile-lead .lp-tile-ic { color: var(--lp-ink); background: var(--lp-gold); }
.lp-tile-watermark {
    position: absolute;
    top: -18%;
    inset-inline-end: -4%;
    height: 136%;
    width: auto;
    color: var(--lp-gold);
    opacity: 0.14;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 95%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 95%);
}

/* Theme switch that genuinely switches the page. */
.lp-switch {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--lp-on-dark);
}
.lp-switch:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 4px; border-radius: 999px; }
.lp-switch-track {
    position: relative;
    width: 54px;
    height: 30px;
    border-radius: 999px;
    background: rgba(247,241,227,0.18);
    border: 1px solid var(--lp-gold-dim);
    transition: background 0.3s;
}
.lp-switch-knob {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lp-on-dark);
    display: grid;
    place-items: center;
    color: #9a7a2a;
    font-size: 12px;
    transition: transform 0.45s var(--lp-spring), background 0.3s, color 0.3s;
}
.lp-switch[aria-checked="true"] .lp-switch-track { background: var(--lp-gold); }
.lp-switch[aria-checked="true"] .lp-switch-knob { transform: translateX(-24px); background: var(--lp-ink); color: var(--lp-gold); }

/* Home-screen icons; the Anwar icon drops into its slot. */
.lp-homescreen {
    position: relative;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(3, 52px);
    gap: 14px;
    padding: 20px;
    border-radius: 26px;
    background: rgba(247,241,227,0.05);
    border: 1px solid var(--lp-gold-dim);
}
.lp-app-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(247,241,227,0.09); }
.lp-app-ic.is-anwar { background: none; position: relative; }
.lp-app-ic.is-anwar img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 0 2px rgba(216,184,114,0.5);
}
/* The icon's resting state is VISIBLE; the drop is an entrance animation
   played from above. Its final state used to live only in the keyframes, so
   with scripting off — or under reduced motion, where style.css strips every
   animation — the icon never appeared at all. */
.lp-reveal-on .lp-tile-lead.is-in .lp-app-ic.is-anwar img { animation: lp-drop-in 0.9s var(--lp-spring) 0.4s backwards; }
.lp-reveal-on .lp-tile-lead:not(.is-in) .lp-app-ic.is-anwar img { opacity: 0; }
@keyframes lp-drop-in { from { transform: translateY(-70px) scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-app-ic.is-anwar::after {
    content: 'أنوار';
    position: absolute;
    top: 100%;
    inset-inline: 0;
    margin-top: 4px;
    text-align: center;
    font-size: 10px;
    color: var(--lp-on-dark-mut);
}

/* Calendar tile: the real date today, flipping between Hijri and Gregorian. */
.lp-cal { perspective: 600px; margin-top: var(--space-3); }
.lp-cal-date {
    display: block;
    font-family: var(--lp-naskh);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    min-height: 1.6em;
    transform-origin: center bottom;
}
.lp-cal-date.is-flip { animation: lp-flip 0.5s var(--lp-ease); }
@keyframes lp-flip { 0% { transform: rotateX(0); opacity: 1; } 45% { transform: rotateX(-90deg); opacity: 0; } 55% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
.lp-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    position: relative;
}
.lp-seg button {
    all: unset;
    position: relative;
    z-index: 1;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
}
.lp-seg button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.lp-seg button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* Points tile */
.lp-counter { font-family: var(--lp-naskh); font-size: 2.4rem; font-weight: var(--weight-bold); line-height: 1; color: var(--text); }
.lp-counter small { font-size: var(--text-sm); color: var(--text-muted); font-family: inherit; margin-inline-start: 6px; }
.lp-medals { display: flex; gap: 6px; margin-top: var(--space-3); }
.lp-medals span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--accent-ink);
    background: var(--accent);
    transition: transform 0.5s var(--lp-spring) calc(var(--i) * 120ms + 300ms);
}
.lp-reveal-on .lp-tile:not(.is-in) .lp-medals span { transform: scale(0); }

/* Privacy tile: a scan line passes over the shield. */
.lp-tile-ic.is-scan { position: relative; overflow: hidden; }
.lp-tile-ic.is-scan::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 40%;
    top: -40%;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}
.lp-tile:hover .lp-tile-ic.is-scan::after { animation: lp-scan 1.1s ease-in-out; }
@keyframes lp-scan { to { top: 100%; } }

@media (max-width: 767.98px) {
    .lp-bento { grid-template-columns: 1fr; }
    .lp-tile-lead { grid-column: span 1; grid-row: span 1; grid-template-columns: 1fr; }
    .lp-tile-watermark { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .lp-bento { grid-template-columns: repeat(2, 1fr); }
    .lp-tile-lead { grid-column: span 2; grid-row: span 1; }
}

/* ─── Progress & the seat — interactive weekly record ────────────────── */
.lp-progress-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 899.98px) { .lp-progress-grid { grid-template-columns: 1fr; } }

.lp-checklist { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.lp-checklist li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.65; }
.lp-checklist :is(i, .ic) { color: var(--primary); margin-top: 3px; flex-shrink: 0; }
[data-theme="dark"] .lp-checklist :is(i, .ic) { color: var(--link); }

.lp-paper { position: relative; }
.lp-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transform: rotate(3deg) translateY(10px);
    box-shadow: var(--shadow);
}
.lp-report {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.10);
    padding: var(--space-5);
    transform: rotate(-1.4deg);
    transition: transform 0.5s var(--lp-ease);
    overflow: hidden;
}
[data-theme="dark"] .lp-report { box-shadow: 0 18px 50px rgba(0,0,0,0.42); }
.lp-paper:hover .lp-report, .lp-paper:focus-within .lp-report { transform: rotate(0deg); }
.lp-report::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(to left, var(--accent), rgba(196,165,90,0.15)); }

.lp-report-head { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.lp-report-head strong { color: var(--text); flex: 1; }
.lp-report-head i.bi-graph-up-arrow { color: var(--accent-text); }
.lp-wk-btn {
    all: unset;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--text-muted);
    border: 1px solid var(--border);
    transition: background 0.2s, color 0.2s;
}
.lp-wk-btn:hover:not(:disabled) { background: var(--primary-light); color: var(--primary); }
.lp-wk-btn:disabled { opacity: 0.35; cursor: default; }
.lp-wk-btn:focus-visible { outline: 3px solid var(--focus-ring); }
.lp-wk-label { font-size: var(--text-sm); color: var(--text-muted); min-width: 7.5em; text-align: center; }
/* Narrow phones: title keeps its own line, week switcher drops below it. */
@media (max-width: 419.98px) {
    .lp-report-head { flex-wrap: wrap; row-gap: var(--space-2); }
    .lp-report-head strong { flex-basis: calc(100% - 28px); }
    .lp-report-head .lp-wk-btn:first-of-type { margin-inline-start: auto; }
    .lp-wk-label { min-width: 6.5em; }
}

.lp-chart {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: end;
    gap: 6px;
    height: 96px;
    margin: var(--space-4) 0 var(--space-2);
}
.lp-bar {
    all: unset;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    border-radius: 6px;
}
.lp-bar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lp-bar span {
    display: block;
    width: 100%;
    height: calc(var(--h) * 100%);
    border-radius: 6px 6px 3px 3px;
    background: color-mix(in srgb, var(--primary) 30%, var(--track));
    transform-origin: bottom;
    transition: transform 0.7s var(--lp-spring) calc(var(--i) * 50ms), background 0.3s;
}
/* Collapsed only while the reveal system is active — with scripting off the
   bars must simply be there. */
.lp-reveal-on .lp-paper:not(.is-in) .lp-bar span { transform: scaleY(0); }
.lp-bar:hover span { background: color-mix(in srgb, var(--primary) 60%, var(--track)); }
.lp-bar[aria-pressed="true"] span { background: var(--accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent); }
.lp-bar::after {                      /* tooltip */
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-start: 50%;
    transform: translateX(50%) translateY(4px);
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: var(--text-xs);
    background: var(--text);
    color: var(--bg-card);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 2;
}
.lp-bar:hover::after, .lp-bar:focus-visible::after { opacity: 1; transform: translateX(50%) translateY(0); }
/* Edge bars: centred tooltips spill past the card and get clipped by its
   overflow:hidden, so anchor them to the bar's outer edge instead. */
.lp-bar:first-child::after { inset-inline-start: 0; transform: translateY(4px); }
.lp-bar:last-child::after  { inset-inline-start: auto; inset-inline-end: 0; transform: translateY(4px); }
.lp-bar:first-child:hover::after, .lp-bar:first-child:focus-visible::after,
.lp-bar:last-child:hover::after,  .lp-bar:last-child:focus-visible::after { transform: translateY(0); }
.lp-chart-legend { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }

.lp-report-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px dashed var(--border-light); font-size: var(--text-sm); }
.lp-report-row:last-of-type { border-bottom: none; }
.lp-report-row span { color: var(--text-muted); }
.lp-report-row strong { color: var(--text); font-family: var(--lp-naskh); font-size: 1.05rem; }
.lp-report-row strong.is-tick { animation: lp-tick 0.4s var(--lp-ease); }
@keyframes lp-tick { from { opacity: 0.2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lp-report-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* ─── FAQ — smooth open/close, no JS ─────────────────────────────────── */
.lp-faq-wrap { max-width: 46rem; margin-inline: auto; }
.lp-faq { border-bottom: 1px solid var(--border); interpolate-size: allow-keywords; }
.lp-faq::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.4s var(--lp-ease), content-visibility 0.4s allow-discrete;
}
.lp-faq[open]::details-content { block-size: auto; }
.lp-faq summary {
    padding: var(--space-5) 0;
    cursor: pointer;
    font-weight: var(--weight-medium);
    font-size: var(--text-lg);
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    transition: color 0.2s, padding 0.3s var(--lp-ease);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover { color: var(--primary); padding-inline-start: 6px; }
[data-theme="dark"] .lp-faq summary:hover { color: var(--link); }
.lp-faq summary::after {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background:
        linear-gradient(var(--accent-text), var(--accent-text)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--accent-text), var(--accent-text)) center / 1.5px 11px no-repeat;
    transition: transform 0.4s var(--lp-spring), background-size 0.3s ease-out, background-color 0.3s;
}
.lp-faq[open] summary::after { transform: rotate(180deg); background-size: 11px 1.5px, 0 0; background-color: var(--accent-light); }
.lp-faq p { padding: 0 0 var(--space-5); margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: 1.85; max-width: 58ch; }
.lp-faq p a { color: var(--primary-text); font-weight: var(--weight-bold, 700); text-underline-offset: 3px; }

/* ─── CTA ────────────────────────────────────────────────────────────── */
.lp-cta {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 55% 70% at 50% 100%, rgba(216,184,114,0.20), transparent 65%),
        linear-gradient(178deg, var(--lp-ink) 0%, var(--lp-ink-2) 100%);
    color: var(--lp-on-dark);
    border-block: 1px solid var(--lp-gold-dim);
    overflow: hidden;
}
.lp-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--lp-grain); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
.lp-cta-inner { position: relative; text-align: center; padding-block: clamp(64px, 9vw, 116px); max-width: 660px; }
.lp-cta-arch {
    position: absolute;
    top: 9%;
    inset-inline-start: 50%;
    width: min(900px, 96vw);   /* wider than the text it frames */
    height: auto;
    transform: translateX(50%);
    color: var(--lp-gold);
    opacity: 0.22;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
            mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
}
.lp-cta-title { font-family: var(--lp-naskh); font-size: var(--lp-h2); font-weight: var(--weight-bold); color: var(--lp-on-dark); line-height: 1.3; margin: 0 0 var(--space-3); }
.lp-cta-sub { color: var(--lp-on-dark-mut); line-height: 1.85; margin: 0 0 var(--space-6); }
.lp-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.lp-footer { background: var(--bg-card); border-top: 1px solid var(--border); padding-block: var(--space-6); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.lp-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.lp-footer-brand { display: flex; align-items: center; gap: var(--space-3); }

.lp-footer-brand strong { display: block; color: var(--text); font-size: var(--text-sm); font-family: var(--lp-naskh); }
.lp-footer-brand span { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.lp-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-inline-start: auto; }
.lp-footer-links a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
.lp-footer-links a:hover { color: var(--primary); text-decoration: underline; }
.lp-footer-copy { width: 100%; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: var(--text-xs); }

/* ─── Demo toast (fired from the notifications tile) ─────────────────── */
.lp-toast {
    position: fixed;
    top: calc(80px + env(safe-area-inset-top));
    inset-inline-start: 50%;
    z-index: 1060;
    width: min(360px, calc(100vw - 32px));
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transform: translate(50%, -30px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    /* Hidden from screen readers too until it fires; becoming visible is also
       what makes the live region announce it. */
    visibility: hidden;
    transition: transform 0.55s var(--lp-spring), opacity 0.3s, visibility 0s linear 0.55s;
}
.lp-toast.is-shown { transform: translate(50%, 0) scale(1); opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.lp-toast img { border-radius: 10px; flex-shrink: 0; }
.lp-toast b { display: block; color: var(--text); font-size: var(--text-sm); }
.lp-toast span { color: var(--text-muted); font-size: var(--text-sm); }
.lp-toast small { margin-inline-start: auto; align-self: flex-start; color: var(--text-muted); font-size: var(--text-xs); }

/* ─── Floating join pill (phones, anonymous visitors) ────────────────── */
.lp-fab {
    position: fixed;
    inset-inline: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 1039;
    display: none;
    transform: translateY(140%);
    /* visibility (delayed until the slide-out ends) takes the off-screen link
       out of the Tab order — translate alone left it focusable but unseen. */
    visibility: hidden;
    transition: transform 0.5s var(--lp-spring), visibility 0s linear 0.5s;
}
.lp-fab.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
.lp-fab .lp-btn { width: 100%; box-shadow: 0 16px 36px rgba(8,37,26,0.35); }
.lp-fab .lp-btn .ic { font-size: 1.3rem; }
@media (max-width: 767.98px) { .lp-fab { display: block; } }
@media (min-width: 768px) {
    .lp-fab { display: block; inset-inline: auto 28px; bottom: 28px; }
    .lp-fab .lp-btn { width: 60px; height: 60px; padding: 0; border-radius: 50%; }
    .lp-fab .lp-btn .ic { font-size: 1.7rem; }
    .lp-fab .lp-btn span {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
}

/* ─── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .lp-hero-cta .lp-btn, .lp-cta-actions .lp-btn { width: 100%; }
    .lp-ledger { grid-template-columns: 1fr; gap: var(--space-4); }
    .lp-ledger li { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; }
    .lp-ledger li + li { border-inline-start: none; border-top: 1px solid var(--lp-gold-dim); padding-top: var(--space-4); }
    .lp-footer-links { margin-inline-start: 0; }
    .lp-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* room for the fab */
}

/* ─── Touch screens: no sticky hover ─────────────────────────────────────
   On a phone :hover latches onto whatever was last tapped, leaving a tile
   lifted or a pillar tinted until the next tap elsewhere. */
@media (hover: none) {
    .lp-tile:hover { transform: none; box-shadow: none; }
    .lp-tile:hover::before, .lp-tile:hover::after { opacity: 0; }
    .lp-niche:hover .lp-niche-shape { --lift: 0px; }
    .lp-pillar:hover { background: transparent; }
    .lp-pillar:hover .lp-pillar-icon { transform: none; background: var(--primary-light); color: var(--primary); }
    [data-theme="dark"] .lp-pillar:hover .lp-pillar-icon { color: var(--link); }
    .lp-faq summary:hover { padding-inline-start: 0; color: var(--text); }
    .lp-btn:hover::after { transform: translateX(120%); }
}

/* ─── Motion & print guards ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lp-lockup, .lp-frontispiece::before,
    .lp-marquee-track, .lp-float-chip, .lp-scroll-cue::after { animation: none !important; }
    .lp-hero-title { animation: none !important; }
    .lp-niche-shape, .lp-phone, .lp-btn, .lp-tile { transform: none !important; }
    .lp-marquee { overflow-x: auto; }
    html.lp-vt::view-transition-new(root) { animation: none; }
}
@media print {
    .lp-reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
    .lp-header { position: static; }
    .lp-fab, .lp-toast, .lp-flock { display: none !important; }
}

/* ─── The invitation's WhatsApp number ────────────────────────────────── */
.lp-cta-number { margin: var(--space-4) 0 0; color: var(--lp-on-dark-mut); font-size: var(--text-sm); }
.lp-cta-number a {
    color: var(--lp-gold);
    font-weight: var(--weight-bold);
    text-decoration: none;
    border-bottom: 1px solid var(--lp-gold-dim);
    padding-bottom: 1px;
}
.lp-cta-number a:hover { border-bottom-color: var(--lp-gold); }
.lp-cta-number bdi { unicode-bidi: isolate; letter-spacing: 0.02em; }

/* ─── Teachers ───────────────────────────────────────────────────────────
   Each teacher stands in the mark's arch: round head, straight jambs, flat
   base. A teacher who prefers not to show a photograph gets her subject's
   mark in the arch instead, which is a complete card, not a gap. */
.lp-teachers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(22px, 3vw, 40px);
    max-width: 1020px;
    margin: clamp(32px, 4vw, 52px) auto 0;
}
.lp-teacher { position: relative; text-align: center; color: var(--subject-hue, var(--primary)); }
.lp-teacher-portrait {
    display: grid;
    place-items: center;
    width: min(196px, 72%);
    aspect-ratio: 100 / 132;
    margin: 0 auto var(--space-4);
    overflow: hidden;
    /* a circular head on straight jambs: 50% of the width across, and the
       same length down (38% of a 100:132 box) */
    border-radius: 50% 50% 10px 10px / 38% 38% 10px 10px;
    background: color-mix(in srgb, currentColor 10%, var(--bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent),
                0 16px 34px rgba(8, 37, 26, 0.10);
}
.lp-teacher-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-teacher-mark { font-size: clamp(3.2rem, 2.4rem + 2.4vw, 4.4rem); line-height: 0; opacity: 0.9; }
.lp-teacher-name {
    margin: 0 0 var(--space-2);
    font-family: var(--lp-naskh);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
}
.lp-teacher-subject {
    display: inline-block;
    margin: 0;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
    background: color-mix(in srgb, var(--subject-hue, var(--primary)) 14%, var(--bg-card));
}
.lp-teacher-bio {
    max-width: 34ch;
    margin: var(--space-3) auto 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.85;
}
.lp-teacher-draft {
    display: inline-block;
    margin-top: var(--space-3);
    padding: 2px 10px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: var(--text-xs);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .lp-teacher-portrait { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
    .lp-teacher-subject { background: var(--bg); }
}

/* ─── Registration status (hero) ─────────────────────────────────────── */
.lp-reg-status {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 auto var(--space-4); padding: 6px 16px; border-radius: 999px;
    font-size: var(--text-sm); font-weight: 700;
    color: var(--lp-on-dark); background: rgba(247, 241, 227, 0.08);
    border: 1px solid var(--lp-gold-dim);
}
.lp-reg-dot { width: 10px; height: 10px; border-radius: 50%; background: #b9b3a3; flex-shrink: 0; }
.lp-reg-status.is-open { border-color: rgba(95, 211, 156, 0.55); }
.lp-reg-status.is-open .lp-reg-dot { background: #5fd39c; box-shadow: 0 0 0 0 rgba(95, 211, 156, 0.6); animation: lp-reg-pulse 2.2s ease-out infinite; }
.lp-reg-status.is-closed { color: var(--lp-on-dark-mut); font-weight: 600; }
@keyframes lp-reg-pulse {
    0% { box-shadow: 0 0 0 0 rgba(95, 211, 156, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(95, 211, 156, 0); }
    100% { box-shadow: 0 0 0 0 rgba(95, 211, 156, 0); }
}
@media (prefers-reduced-motion: reduce) { .lp-reg-status.is-open .lp-reg-dot { animation: none; } }

/* ─── Social links ───────────────────────────────────────────────────── */
.lp-socials { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.lp-socials a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
    border-radius: 999px; color: var(--lp-on-dark); text-decoration: none; font-weight: 600;
    border: 1px solid var(--lp-gold-dim); font-size: var(--text-sm);
}
.lp-socials a:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.lp-socials .ic { font-size: 1.2rem; }
.lp-footer-socials { display: flex; gap: var(--space-2); width: 100%; justify-content: flex-start; }
.lp-footer-socials a {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    color: var(--primary-text); border: 1px solid var(--border); font-size: 1.15rem;
}
.lp-footer-socials a:hover { background: var(--primary-light); }