/* Ghayl - the landing page, rebuild B (docs/ghayl/PRD-LANDING-B.md). Loaded only by src/pages/landing.js.

   Grammar "handled objects": each section is one object from a landlord's month that the visitor can
   handle (turn, flick, unfold, open), alternating with photographs of the people it belongs to.
   Phone first: everything below is the phone layout; the media queries widen it. Follows the phone's
   light or dark setting ("Oasis" / "Night oasis", PRD-DESIGN §4). Gold is the door and "owes", nothing else. */

/* ===== tokens (PRD-DESIGN §4): one scale for type, space, radius, controls, motion ===== */
:root{
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.25rem; --fs-xl:1.625rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --tap:44px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.23,1,.32,1); --spring:cubic-bezier(.2,.8,.2,1);
  --dur-1:120ms; --dur-2:240ms; --dur-water:8s; --dur-ripple:5s;
}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-water:0s;--dur-ripple:0s}}

/* The new Gulf currency signs (docs/PRD-REGION.md): only those three code points come from this font. */
@font-face{font-family:"Ghayl Currency";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/ghayl-currency.woff2?v=1) format("woff2");unicode-range:U+20C1,U+20C3,U+20C4}
@font-face{font-family:"Aldar Latin";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/manrope-500.woff2?v=1) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2039-203A,U+2212,U+20AC}
@font-face{font-family:"Aldar Latin";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/manrope-700.woff2?v=1) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2039-203A,U+2212,U+20AC}
@font-face{font-family:"Aldar Latin";font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/manrope-800.woff2?v=1) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2039-203A,U+2212,U+20AC}
@font-face{font-family:"Aldar Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plexar-500.woff2?v=1) format("woff2");unicode-range:U+0600-065F,U+066A-06EF,U+06FA-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Aldar Arabic";font-style:normal;font-weight:700 800;font-display:swap;
  src:url(/fonts/plexar-700.woff2?v=1) format("woff2");unicode-range:U+0600-065F,U+066A-06EF,U+06FA-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

/* ------------------------------------------------------------------ colour: Oasis, and Night oasis
   The 3D scene reads its colours from the --3d-* tokens (hex only). */
:root[data-lp]{
  --bg:#F3F1EC; --surface:#FBFAF7; --ink:#1F2D2B; --muted:#56625F; --link:#24675F;
  --accent:#D9A441; --accent-ink:#6A4B0F; --accent-soft:rgba(217,164,65,.22);
  --paid:#6BAE8C; --paid-ink:#24614A; --empty:#B8C0BC;
  --line:rgba(31,45,43,.12); --edge:rgba(31,45,43,.5);
  --btn:#24675F; --btn-ink:#FFFFFF; --btn-hover:#1C5650; --ring:rgba(36,103,95,.14);
  --soft-shadow:0 1px 2px rgba(31,45,43,.06),0 14px 34px -14px rgba(31,45,43,.22);
  --night:#0E1819; --night-2:#152325; --night-ink:#E8EEEA; --night-muted:#A9BBB6;
  --deep:#16302D; --deep-ink:#EEF3F0;
  --plaster:#ECE5D6;
  --3d-cell:#FBFAF7; --3d-red:#E08A78; --3d-head:#24675F; --3d-paid:#6BAE8C; --3d-owe:#E2A63E; --3d-empty:#4A5C59;
  --3d-glass:#B9D3CE; --3d-wall:#F7F2E8; --3d-band:#E3DCCC; --3d-base:#2C4A46; --3d-phone:#16211F; --3d-screen:#DCEDE9; --3d-bubble:#2A8C7F;
  --3d-sky:#FFFFFF; --3d-gnd:#E6D6BB; --3d-air:#F3F1EC; --3d-shadow:#1F2D2B;
  --pad:16px; --maxw:1240px; --gut:max(var(--pad),calc((100vw - var(--maxw)) / 2));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root[data-lp]{
    --bg:#0E1819; --surface:#152325; --ink:#E8EEEA; --muted:#9FB1AC; --link:#7FD0C2;
    --accent:#E6B35C; --accent-ink:#F2CF8E; --accent-soft:rgba(230,179,92,.16);
    --paid:#5FB592; --paid-ink:#7FD7B0; --empty:#3A4B4C;
    --line:rgba(232,238,234,.12); --edge:rgba(232,238,234,.45);
    --btn:#4FBFAE; --btn-ink:#06201C; --btn-hover:#6ED3C3; --ring:rgba(79,191,174,.14);
    --soft-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -16px rgba(0,0,0,.6);
    --night:#081011; --night-2:#101C1D;
    --deep:#102422; --plaster:#CFC6B4;
    --3d-cell:#DCE6E2; --3d-red:#D9826F; --3d-head:#4FBFAE; --3d-paid:#57B08B; --3d-owe:#E6B35C; --3d-empty:#1E2C2D;
    --3d-glass:#3F5D5A; --3d-wall:#C9CEC4; --3d-band:#9AA197; --3d-base:#1B2D2D; --3d-phone:#050B0B; --3d-screen:#BFE3DB; --3d-bubble:#4FBFAE;
    --3d-sky:#A9C9C4; --3d-gnd:#3A3830; --3d-air:#0E1819; --3d-shadow:#000000;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px;overflow-x:clip}
html.lp-smooth{scroll-behavior:smooth}
body.lp{margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;
  font:500 17px/1.55 "Ghayl Currency","Aldar Latin","Aldar Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
:root[lang=ar] body.lp{font-family:"Ghayl Currency","Aldar Arabic","Aldar Latin",system-ui,sans-serif;line-height:1.75}
img,svg,canvas,video{display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--btn);outline-offset:3px;border-radius:6px}
.lp-skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:50;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:var(--r-sm);text-decoration:none}
.lp-skip:focus{top:12px}
.lp-banner{background:var(--accent);color:#5A3406;font-size:var(--fs-sm);font-weight:700;padding:8px var(--pad);text-align:center;position:relative;z-index:6}

/* ------------------------------------------------------------------ type */
.lp h1,.lp h2,.lp-amt{font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.lp h2{font-size:clamp(30px,6.4vw,56px)}
.lp h3{font-size:var(--fs-lg);font-weight:800;line-height:1.3;letter-spacing:-.01em}
:root[lang=ar] .lp h1,:root[lang=ar] .lp h2,:root[lang=ar] .lp-amt{font-weight:700;letter-spacing:0;line-height:1.35}
:root[lang=ar] .lp h3{font-weight:700;letter-spacing:0;line-height:1.5}
.lp-pillar{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.lp-pillar::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
:root[lang=ar] .lp-pillar{letter-spacing:0;text-transform:none;font-size:var(--fs-md)}
.lp-lede{font-size:var(--fs-lg);color:var(--muted);max-width:40ch;margin-top:16px;line-height:1.5}
:root[lang=ar] .lp-lede{line-height:1.8}
.lp-lede b{color:var(--ink)}
.lp-demo{font-size:var(--fs-sm);color:var(--muted);margin-top:18px}

/* ------------------------------------------------------------------ buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;
  border-radius:var(--r-pill);font:inherit;font-size:var(--fs-md);font-weight:700;line-height:1.2;text-decoration:none;text-align:center;
  border:1.5px solid transparent;cursor:pointer;transition:transform 140ms var(--ease-out),background-color var(--dur-2) ease;user-select:none;-webkit-user-select:none}
.lp-btn:active{transform:scale(.97)}
.lp-btn svg{width:20px;height:20px;flex:none}
.lp-btn-main{background:var(--btn);color:var(--btn-ink)}
.lp-btn-wa,.lp-btn-line{background:transparent;border-color:var(--edge);color:inherit}
@media (hover:hover) and (pointer:fine){
  .lp-btn-main:hover{background:var(--btn-hover)}
  .lp-btn-wa:hover,.lp-btn-line:hover{background:var(--ring)}
}
[aria-disabled=true]{opacity:.55;pointer-events:none}

/* ------------------------------------------------------------------ top bar (over the hero) */
.lp-top{position:absolute;inset-inline:0;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) var(--gut) 10px}
.lp-banner+.lp-top{top:36px}
.lp-brand{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.lp-brand svg{height:28px;width:auto}
.lp-brand .logo-w.ar{height:34px}
.lp-nav{display:none}
.lp-top-act{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.lp-lang,.lp-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:var(--fs-md);font-weight:700;text-decoration:none;border-radius:var(--r-md)}
.lp-lang{border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 14px}
.lp-top-cta{display:inline-flex;min-height:44px;padding:0 14px;font-size:var(--fs-sm)}   /* phones: compact, above the fold (QA final 3) */
.lp-lang,.lp-signin,.lp-top-cta{white-space:nowrap}
.lp-signin svg{display:none;width:22px;height:22px}
/* The narrowest phones: four things do not fit in one row, so Sign in becomes a 44 px person icon (its words stay as its name). */
@media (max-width:389.98px){
  .lp-top-act{gap:4px}
  .lp-signin{justify-content:center;width:44px;padding:0}
  .lp-signin svg{display:block}
  .lp-signin span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ================================================================== 1. hero: the sheet becomes a calm building */
.lp-hero{position:relative;display:grid;grid-template-areas:"head" "stage" "body";align-content:start;min-height:100svh;padding-top:72px}
.lp-hero-head{grid-area:head;padding:6px var(--gut) 0}
.lp-hero-body{grid-area:body;padding:2px var(--gut) 32px}
.lp-meaning{font-size:var(--fs-sm);color:var(--muted);margin:0 0 10px;max-width:46ch}
.lp-hero h1{font-size:clamp(40px,11vw,88px);max-width:11ch;letter-spacing:-.045em;line-height:.98}
:root[lang=ar] .lp-hero h1{font-size:clamp(38px,10vw,76px);max-width:12ch;line-height:1.25}
.lp-lead{font-size:var(--fs-lg);color:var(--muted);max-width:38ch;margin:0 0 22px;line-height:1.5}
:root[lang=ar] .lp-lead{line-height:1.8}
.lp-cta{display:grid;gap:10px}
.lp-note{font-size:var(--fs-sm);color:var(--muted);margin-top:12px}
.lp-stage{grid-area:stage;position:relative;height:56svh;min-height:340px;max-height:560px;margin:4px 0 8px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lp-stage::before{content:"";position:absolute;inset:18% 4% 6%;border-radius:50%;background:radial-gradient(closest-side,var(--ring),transparent);pointer-events:none}
.lp-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.lp-stage canvas:active{cursor:grabbing}
/* No WebGL: the building as a grid of its 40 units, the same colours. */
.lp-grid{position:absolute;inset:24px var(--gut) 92px;margin:auto;width:min(70vw,320px);height:fit-content;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-content:center}
.lp-grid .u{display:block;aspect-ratio:1/.8;border-radius:5px;background:var(--paid)}
.lp-grid .u-d{background:var(--accent)}
.lp-grid .u-e{background:var(--empty)}
.lp-stage.gl-on .lp-grid{display:none}
.lp-count,.lp-tip,.lp-chip{position:absolute;left:0;top:0;margin:0;pointer-events:none;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s ease}
.lp-count,.lp-tip{white-space:nowrap;padding:8px 12px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:800}
.lp-count{background:var(--ink);color:var(--bg)}
.lp-count.done{background:var(--paid-ink);color:#fff}
.lp-tip{background:var(--surface);color:var(--ink);box-shadow:var(--soft-shadow)}
.lp-chip{width:max-content;max-width:min(62vw,250px);padding:10px 13px;border-radius:16px 16px 4px 16px;background:var(--surface);color:var(--ink);box-shadow:var(--soft-shadow);font-size:var(--fs-sm);font-weight:700;line-height:1.45;border-inline-start:3px solid var(--accent)}
:root[dir=rtl] .lp-chip{border-radius:16px 16px 16px 4px}
.lp-rcpt{border-inline-start-color:var(--paid-ink)}
.lp-count.on,.lp-tip.on,.lp-chip.on{opacity:1}
/* The story card: a five-part progress bar (tap a part to play from it), a title and one line. */
.lp-story{position:absolute;inset-inline-start:var(--gut);bottom:8px;width:min(calc(100% - 2 * var(--gut)),380px);padding:6px 14px 13px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:var(--soft-shadow)}
.lp-segs{display:flex;gap:6px;margin:0 -2px 4px}
.lp-segs button{flex:1;min-height:30px;padding:12px 2px;border:0;background:none;cursor:pointer}
.lp-segs i{display:block;position:relative;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.lp-segs i::after{content:"";position:absolute;inset:0;background:var(--btn);transform-origin:left;transform:scaleX(var(--fill,0))}
:root[dir=rtl] .lp-segs i::after{transform-origin:right}
.lp-cap{margin:0;min-height:3.1em}
.gl-on .lp-cap{opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s var(--ease-out)}
.gl-on .lp-cap.on{opacity:1;transform:none}
.lp-cap b{display:block;font-size:var(--fs-md);font-weight:800;line-height:1.3}
.lp-cap span{display:block;font-size:var(--fs-sm);color:var(--muted);line-height:1.45;margin-top:2px}
.lp-replay{position:absolute;inset-inline-end:var(--gut);top:4px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:0;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  box-shadow:var(--soft-shadow);opacity:0;pointer-events:none;transition:opacity .3s ease,transform 140ms var(--ease-out)}
.lp-replay svg{width:18px;height:18px}
.lp-replay.on{opacity:1;pointer-events:auto}
.lp-replay:active{transform:scale(.97)}

/* ================================================================== 2. the evening (photograph; a clip on wide screens) */
.lp-evening{--e:1;position:relative;background:var(--night);color:var(--night-ink);overflow:hidden}
.js .lp-evening{--e:0}
.lp-ev-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#141c1c}
.lp-ev-media img,.lp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-video{display:none;opacity:0;transition:opacity .8s var(--ease)}
.lp-video.on{opacity:1}
.lp-ev-media::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,var(--night));pointer-events:none}
.js .lp-ev-media{clip-path:inset(calc((1 - var(--e)) * 7%) calc((1 - var(--e)) * 6%) round calc((1 - var(--e)) * 28px))}
.js .lp-ev-media img,.js .lp-ev-media .lp-video{transform:scale(calc(1.1 - var(--e) * .1))}
.lp-ev-copy{position:relative;padding:0 var(--gut) 84px;margin-top:-80px}
.lp-big{font-size:clamp(30px,7.4vw,58px)!important;max-width:17ch;color:var(--night-ink)}
.lp-ev-sub{font-size:var(--fs-lg);color:var(--night-muted);max-width:40ch;margin-top:20px;line-height:1.55}
:root[lang=ar] .lp-ev-sub{line-height:1.85}

/* ================================================================== 3. who owes, first: the stack */
.lp-owes{display:grid;gap:36px;padding:96px var(--gut)}
.lp-total{margin:26px 0 6px;font-size:clamp(22px,5vw,30px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:root[lang=ar] .lp-total{letter-spacing:0}
.lp-hint{color:var(--muted);max-width:36ch}
.lp-owes [data-again]{margin-top:16px}
.lp-stack{position:relative;height:340px;perspective:1100px;touch-action:pan-y}
.lp-stack.done::before{content:"";position:absolute;top:28px;inset-inline:0;margin:0 auto;width:min(100%,360px);height:250px;border:2px dashed var(--line);border-radius:26px}
.lp-card{--i:0;--x:0px;--r:0deg;--o:1;position:absolute;top:28px;inset-inline:0;margin:0 auto;width:min(100%,360px);height:250px;
  transform:translate3d(var(--x),calc(var(--i) * 18px),calc(var(--i) * -52px)) rotate(var(--r)) scale(calc(1 - var(--i) * .04));
  transform-style:preserve-3d;opacity:var(--o);z-index:calc(10 - var(--i));transition:transform .55s var(--spring),opacity .3s ease;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lp-card:not(.top){pointer-events:none}
.lp-card.drag{transition:none;cursor:grabbing}
.lp-card.out{visibility:hidden}
.lp-card-in{position:relative;height:100%;transform-style:preserve-3d;transition:transform .6s var(--spring)}
.lp-card.flip .lp-card-in{transform:rotateY(180deg)}
.lp-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:26px;background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 6px rgba(31,45,43,.06),0 24px 48px -20px rgba(31,45,43,.34);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.lp-back{transform:rotateY(180deg);justify-content:space-between}
.lp-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-lg)}
.lp-owe{font-size:var(--fs-sm);font-weight:800;padding:4px 12px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink)}
.lp-card-amt{margin-top:6px;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.lp-card-amt small{font-size:var(--fs-md);color:var(--muted);letter-spacing:0;font-weight:700}
.lp-card-due{font-size:var(--fs-sm);color:var(--muted)}
.lp-card-act{display:flex;gap:10px;margin-top:auto}
.lp-card-act .lp-btn,.lp-back .lp-btn{min-height:46px;padding:0 18px;flex:1}
.lp-back .lp-btn{flex:none;align-self:flex-start}
.lp-wa{padding:12px 14px;border-radius:18px 18px 18px 4px;background:var(--btn);color:var(--btn-ink);font-size:var(--fs-md);font-weight:700;line-height:1.45;font-variant-numeric:tabular-nums}
:root[dir=rtl] .lp-wa{border-radius:18px 18px 4px 18px}
.lp-wa-note{font-size:var(--fs-sm);color:var(--muted)}
.lp-card-ok{position:absolute;top:50%;inset-inline:0;margin:auto;width:max-content;transform:translateY(-50%) rotate(-8deg);padding:6px 18px;border:3px solid var(--paid-ink);
  border-radius:12px;color:var(--paid-ink);font-size:28px;font-weight:800;letter-spacing:.04em;opacity:0;transition:opacity .15s;pointer-events:none}
.lp-card.paid .lp-card-ok{opacity:1}
.lp-card.paid .lp-face{background:color-mix(in srgb,var(--paid) 18%,var(--surface))}
html:not(.js) .lp-stack{height:auto;display:grid;gap:14px}
html:not(.js) .lp-card{position:relative;top:0;transform:none}

/* ================================================================== 4. the real app: a photograph and the real screen */
.lp-app{display:grid;gap:56px;padding:96px var(--gut);background:var(--surface)}
.lp-app-visual{position:relative;width:100%;max-width:520px;padding-bottom:28px}
.lp-app-photo{width:82%;height:auto;border-radius:28px;box-shadow:var(--soft-shadow);background:var(--line)}
.lp-phone-frame{position:absolute;inset-inline-end:0;bottom:0;width:42%;padding:7px;border-radius:30px;background:#111A19;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 34px 60px -22px rgba(10,20,19,.55)}
.lp-phone-frame img{width:100%;height:auto;border-radius:24px;background:var(--3d-screen)}
.lp-app-sub{color:var(--muted);max-width:44ch;margin:14px 0 22px}
.lp-flow{display:grid;counter-reset:f}
.lp-flow li{counter-increment:f;display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.lp-flow li::before{content:counter(f);grid-row:span 2;font-size:var(--fs-xl);font-weight:800;line-height:1.1;color:var(--link)}
.lp-flow p{color:var(--muted);margin-top:4px;max-width:44ch}

/* ================================================================== 5. a record for every tenant: the receipt unfolds */
.lp-record{display:grid;gap:44px;padding:96px var(--gut);background:var(--deep);color:var(--deep-ink)}
.lp-record .lp-pillar{color:#8FD3C6}
.lp-record .lp-lede,.lp-record .lp-demo{color:rgba(238,243,240,.78)}
.lp-paper{width:100%;max-width:400px;justify-self:center}
.rc-sheet{position:relative;border-radius:8px;background:#FBFAF7;color:#1F2D2B;
  box-shadow:0 2px 0 rgba(0,0,0,.08),0 40px 70px -30px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.rc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1.5px dashed rgba(31,45,43,.22)}
.rc-head span{font-size:var(--fs-sm);color:#56625F}
.rc-rows li{display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;align-items:baseline;padding:12px 22px;border-bottom:1px solid rgba(31,45,43,.08);font-size:var(--fs-sm)}
.rc-rows time{color:#56625F}
.rc-rows small{display:block;font-size:var(--fs-xs);color:#56625F}
.rc-rows b{font-weight:800}
.rc-rows li.in b{color:#24614A}
.rc-rows li:last-child{border-bottom:0}
.rc-bal{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 22px 22px;font-weight:800}
.rc-bal::before{content:"";position:absolute;top:0;inset-inline:22px;height:1.5px;background:rgba(31,45,43,.55);transform-origin:left}
[dir=rtl] .rc-bal::before{transform-origin:right}
.rc-bal b{font-size:var(--fs-xl);color:#8A5B0B}
/* The motion (landing.js record()): the slip arrives with only its head; as the page scrolls, each dated line
   prints once it passes a print line low on the screen, in order, at least 90 ms apart: its strip of paper feeds
   out like a printer's line feed (scaleY of a plain strip, 90 ms linear, so strips never overlap in time and the
   paper has no gaps), then its ink lands 80 ms later (opacity and a 6 px drop, 220 ms; text is never scaled). The
   total prints last: the rule draws, the figure counts up in a reserved width. Scrolling back un-prints from the
   bottom: ink first, then its paper rolls back, line by line. Paper and ink share one clock (CSS delays, --pd/--id
   set per line), so they never drift apart under load. Without .live (no script, reduced motion) the card is
   simply finished. */
.lp-paper.live .rc-sheet{background:none;box-shadow:none;isolation:isolate}
.lp-paper.live .rc-head{background:#FBFAF7;border-radius:8px 8px 0 0}
.lp-paper.live .rc-rows li{position:relative;border-bottom-color:transparent}
.rc-shade{position:absolute;inset:0;z-index:-1;border-radius:8px;pointer-events:none;transform-origin:top;
  box-shadow:0 2px 0 rgba(0,0,0,.08),0 40px 70px -30px rgba(0,0,0,.6);transition:transform 220ms var(--ease-out)}
.lp-paper.live .rc-print::after{content:"";position:absolute;inset:0 0 -1px;z-index:-1;background:#FBFAF7;transform-origin:top;transform:scaleY(0);
  transition:transform 90ms linear;transition-delay:var(--pd,0ms)}
.lp-paper.live .rc-rows li+li::after{border-top:1px solid rgba(31,45,43,.08)}
.lp-paper.live .rc-bal::after{inset:0;border-radius:0 0 8px 8px}
.lp-paper.live .rc-print.on::after{transform:none}
.lp-paper.live .rc-print>*{opacity:0;transform:translate3d(0,-6px,0);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);transition-delay:var(--id,0ms)}
.lp-paper.live .rc-print.on>*{opacity:1;transform:none;transition-duration:220ms}
.lp-paper.live .rc-bal::before{opacity:0;transform:scaleX(0);transition:transform 160ms var(--ease-out),opacity 120ms var(--ease-out);transition-delay:var(--id,0ms)}
.lp-paper.live .rc-bal.on::before{opacity:1;transform:none;transition-duration:240ms}
.lp-paper.live .rc-bal b>span{display:inline-block;text-align:end}

/* ================================================================== 6. made for Oman: the people, sideways */
.lp-range{padding:96px 0;overflow:hidden}
.lp-range-head{padding:0 var(--gut);max-width:calc(var(--gut) + 760px)}
/* The head (13/10): words set straight on the scene, no card. A display line in two tones, one plain line, three facts. */
.lp-range-head h2{font-size:clamp(38px,7.4vw,84px);line-height:1}
.lp-range-head h2 span{display:block;color:var(--link)}
:root[lang=ar] .lp-range-head h2{line-height:1.3}
.lp-range-line{font-size:var(--fs-lg);line-height:1.5;color:var(--ink);max-width:44ch;margin-top:20px}
:root[lang=ar] .lp-range-line{line-height:1.85}
.lp-range-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lp-range-facts li{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 16px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;line-height:1.2;
  color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.lp-range-facts li::before{content:"";flex:none;width:9px;height:5px;margin-top:-3px;border:solid var(--link);border-width:0 0 2px 2px;transform:rotate(-45deg)}
:root[lang=ar] .lp-range-facts li{font-size:var(--fs-md)}
/* With the world on: a haze of the page colour under the headline (light, it is large type) and under the line
   (denser, for reading), solid under the words and fading to nothing over 96px past them (painted as nine tiles:
   no mask, no blur, no backdrop), so there is no edge and the city shows around them. The section clips the overhang. */
.world-on .lp-range-head :is(h2,.lp-range-line){position:relative;isolation:isolate}
.world-on .lp-range-head :is(h2,.lp-range-line)::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--pt,56px)) -96px -56px;pointer-events:none;
  --c:color-mix(in srgb,var(--bg) var(--haze,70%),transparent);--t:var(--pt,56px);--mh:calc(100% - var(--t) - 56px);
  background:linear-gradient(var(--c),var(--c)) 96px var(--t)/calc(100% - 192px) var(--mh),
    linear-gradient(90deg,transparent,var(--c)) 0 var(--t)/96px var(--mh),linear-gradient(270deg,transparent,var(--c)) 100% var(--t)/96px var(--mh),
    linear-gradient(transparent,var(--c)) 96px 0/calc(100% - 192px) var(--t),linear-gradient(0deg,transparent,var(--c)) 96px 100%/calc(100% - 192px) 56px,
    radial-gradient(farthest-side at 100% 100%,var(--c),transparent) 0 0/96px var(--t),radial-gradient(farthest-side at 0 100%,var(--c),transparent) 100% 0/96px var(--t),
    radial-gradient(farthest-side at 100% 0,var(--c),transparent) 0 100%/96px 56px,radial-gradient(farthest-side at 0 0,var(--c),transparent) 100% 100%/96px 56px;
  background-repeat:no-repeat}
/* the line paints after the headline: its haze reaches only into the gap above it, never over the headline */
.world-on .lp-range-line{--haze:78%;--pt:18px}
/* the headline's second tone over the city: a step toward the ink, so it holds 4.5:1 (QA final 5) */
.world-on .lp-range-head h2 span{color:color-mix(in srgb,var(--link) 70%,var(--ink))}
.world-on .lp-range-facts li{background:color-mix(in srgb,var(--surface) 90%,transparent)}
/* Arrival with the scroll (--in from landing.js motion()): the headline settles, the line follows, then the facts one by one. */
@media (prefers-reduced-motion:no-preference){
  .js .lp-range-head{--a:clamp(0,calc((var(--in,1) - .3) / .45),1)}
  .js .lp-range-head h2{transform:translate3d(0,calc((1 - var(--in,1)) * 16px),0) skewX(calc(var(--v,0) * -6deg))}
  .js .lp-range-line{opacity:var(--a);transform:translate3d(0,calc((1 - var(--a)) * 18px),0)}
  .js .lp-range-facts li{--c:clamp(0,calc((var(--in,1) - .5 - var(--k,0) * .07) / .35),1);opacity:var(--c);transform:translate3d(0,calc((1 - var(--c)) * 14px),0)}
  .js .lp-range-facts li:nth-child(2){--k:1}
  .js .lp-range-facts li:nth-child(3){--k:2}
}
.lp-rail-wrap{margin-top:40px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:12px;scroll-padding-inline:var(--gut)}
.lp-rail-wrap::-webkit-scrollbar{display:none}
.lp-rail{display:flex;gap:16px;padding:0 var(--gut);width:max-content}
.lp-tile{flex:none;display:flex;flex-direction:column;width:min(78vw,320px);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--soft-shadow);scroll-snap-align:start}
.lp-ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--line)}
.lp-tile>div{padding:18px 20px 22px}
.lp-tile p{color:var(--muted);margin-top:6px}
.lp-tx{justify-content:space-between;background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--btn) 8%,var(--surface)))}
.lp-ico svg{width:64px;height:64px;margin:26px 20px 0;fill:none;stroke:var(--link);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ================================================================== 4b. ask him: the assistant, live (Mu'een by default)
   The visual is a still chat here; with the world on, the 3D phone shows it and types it as you scroll. */
.lp-ask{display:grid;gap:44px;padding:96px var(--gut)}
.lp-ask-list{display:grid;gap:12px;margin-top:22px;max-width:46ch}
.lp-ask-list li{position:relative;padding-inline-start:26px;color:var(--muted)}
.lp-ask-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--btn)}
.lp-ask .lp-pillar bdi{font-size:var(--fs-md);letter-spacing:0;text-transform:none}
.lp-ask-visual{justify-self:center;width:100%;max-width:420px}
.lp-chat{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:32px;background:linear-gradient(#F6F1E7,#EAF0EC);color:#1F2D2B;box-shadow:var(--soft-shadow);font-variant-numeric:tabular-nums}
.lp-chat p{max-width:30ch;padding:12px 16px;border-radius:20px;font-size:var(--fs-md);line-height:1.45}
.lp-chat .me{align-self:flex-end;background:#24675F;color:#fff;border-end-end-radius:6px}
.lp-chat .ai{align-self:flex-start;background:#fff;border-end-start-radius:6px}
.lp-chat-name{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.86);font-weight:800;max-width:none!important}
.lp-chat-name i{width:26px;height:26px;border-radius:50%;border:3px solid #24675F;box-shadow:0 0 0 5px rgba(36,103,95,.15)}
.lp-chat-card{display:grid;gap:6px;padding:18px;border-radius:22px;background:#fff;border-inline-start:4px solid #D9A441}
.lp-chat-card span,.lp-chat-card small{color:#56625F;font-size:var(--fs-sm)}
.lp-chat-card em{font-style:normal;text-align:center;font-weight:800;color:#fff;background:#24675F;border-radius:999px;padding:10px;margin-top:6px}
@media (min-width:900px){.lp-ask{grid-template-columns:1fr 1fr;align-items:center;column-gap:6vw;padding-block:140px}}

/* ================================================================== 7. quiet: steps, prices, coming soon, questions */
.lp-start{padding:96px var(--gut) 72px}
.lp-three{display:grid;gap:26px;margin-top:30px}
.lp-three li{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start}
.lp-n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--btn);color:var(--btn-ink);font-weight:800;font-size:var(--fs-lg)}
.lp-three h3{margin-top:12px}
.lp-three p{color:var(--muted);margin-top:4px;max-width:40ch}
.lp-pricing{padding:72px var(--gut)}
.lp-price-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:24px}
.lp-badge{background:var(--ring);color:var(--link);font-size:var(--fs-sm);font-weight:800;padding:6px 12px;border-radius:var(--r-pill)}
.lp-plans{display:grid;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--soft-shadow);overflow:hidden}
.lp-plan{display:flex;flex-direction:column;gap:10px;padding:24px 20px}
.lp-plan+.lp-plan{border-top:1px solid var(--line)}
.lp-plan h3{font-size:var(--fs-md)}
.lp-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lp-amt{font-size:56px}
.lp-per{font-size:var(--fs-md);color:var(--muted);font-weight:700}
.lp-year{font-size:var(--fs-md);color:var(--muted)}
.lp-local{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;unicode-bidi:isolate}
.lp-ticks{display:grid;gap:8px;margin:4px 0 8px;font-size:var(--fs-md)}
.lp-ticks li{position:relative;padding-inline-start:22px}
.lp-ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--paid-ink);border-bottom:2px solid var(--paid-ink);transform:rotate(-45deg)}
.lp-plan .lp-btn{margin-top:auto}
.lp-pick{box-shadow:inset 0 3px 0 var(--btn)}
.lp-pick .lp-btn{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.lp-price-foot{font-size:var(--fs-md);color:var(--muted);max-width:62ch;margin-top:18px}
.lp-faq{padding:40px var(--gut) 88px}
.lp-faq h2{margin-bottom:12px}
.lp-qs details{border-bottom:1px solid var(--line)}
.lp-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:var(--fs-lg);font-weight:700;min-height:56px}
.lp-qs summary::-webkit-details-marker{display:none}
.lp-qs summary::after{content:"";flex:none;width:11px;height:11px;border-inline-end:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.lp-qs details[open] summary::after{transform:translateY(3px) rotate(225deg)}
.lp-qs p{color:var(--muted);padding:0 0 20px;max-width:62ch}

/* ================================================================== 8. the peak: the door opens */
.lp-final{--d:1;position:relative;height:210svh;background:var(--night);color:var(--night-ink)}
.js .lp-final{--d:0}
.lp-final-stick{position:sticky;top:0;height:100svh;min-height:600px;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;padding:64px var(--gut) max(28px,env(safe-area-inset-bottom))}
.lp-final-stick::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 62%,rgba(246,213,138,calc(var(--d) * .16)),transparent 70%);pointer-events:none}
.lp-scene{position:relative;display:grid;place-items:end center;min-height:0}
.lp-doorway{position:relative;z-index:2;height:min(50svh,500px);aspect-ratio:9/16;border:10px solid var(--plaster);border-bottom:0;border-radius:999px 999px 0 0;
  overflow:hidden;perspective:900px;background:#05090A;box-shadow:0 30px 120px -10px rgba(246,213,138,calc(var(--d) * .42))}
.lp-beyond{position:absolute;inset:0;transform:scale(calc(1.14 - var(--d) * .14));filter:brightness(calc(.45 + var(--d) * .55))}
.lp-beyond img,.lp-beyond .lp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-leaf{position:absolute;inset:0;border-radius:999px 999px 0 0;transform-origin:left center;transform:rotateY(calc(var(--d) * 102deg));
  background:linear-gradient(90deg,#B98429,#D9A441 22%,#E4B65C 62%,#C99434);box-shadow:inset 0 0 0 1px rgba(94,68,16,.3)}
:root[dir=rtl] .lp-leaf{transform-origin:right center;transform:rotateY(calc(var(--d) * -102deg))}
.lp-leaf::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(20,12,0,calc(var(--d) * .45))}
.lp-leaf i{position:absolute;inset:14% 16% 9%;border:2px solid rgba(94,68,16,.32);border-radius:999px 999px 6px 6px}
.lp-leaf b{position:absolute;inset-inline-end:11%;top:56%;width:10px;height:10px;border-radius:50%;background:#5E4410;box-shadow:0 1px 0 rgba(255,240,200,.5)}
.lp-spill{position:absolute;z-index:1;bottom:0;left:50%;width:min(90vw,760px);height:34%;transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 100%,rgba(246,213,138,.32),transparent 72%);opacity:var(--d);pointer-events:none}
.lp-chan{position:absolute;z-index:1;bottom:0;inset-inline-start:calc(-1 * var(--gut));width:calc(50% + var(--gut));height:24px;overflow:visible}
:root[dir=rtl] .lp-chan{transform:scaleX(-1)}
.ch-bed{fill:#4FBFAE;opacity:.16}
.ch-fill{fill:#4FBFAE;opacity:.5;transform-box:fill-box;transform-origin:left center;transform:scaleX(calc(.2 + var(--d) * .8))}
.ch-flow{fill:none;stroke:#E8F7F3;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 22;opacity:.7;animation:ch-flow var(--dur-water) linear infinite}
.ch-ripples ellipse{fill:none;stroke:#E8F7F3;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ch-ripple var(--dur-ripple) var(--ease) infinite}
.ch-ripples ellipse:nth-child(2){animation-delay:2.4s}
@keyframes ch-flow{to{stroke-dashoffset:-360}}
@keyframes ch-ripple{0%{opacity:.5;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.6)}}
.lp-final-copy{position:relative;z-index:3;padding-top:26px;text-align:center;
  opacity:clamp(0,calc((var(--d) - .5) * 2.6),1);transform:translateY(calc((1 - var(--d)) * 28px))}
.lp-final:focus-within .lp-final-copy{opacity:1;transform:none}
.lp-final h2{font-size:clamp(30px,6.8vw,64px);max-width:15ch;margin:0 auto 22px}
.lp-final .lp-cta{justify-content:center}
.lp-final .lp-btn-main{background:#4FBFAE;color:#06201C}
.lp-final .lp-btn-wa{border-color:rgba(232,238,234,.4)}
.lp-final .lp-note{color:var(--night-muted)}
.lp-final .lp-meaning{font-size:var(--fs-sm);color:var(--night-muted);margin:0 auto 12px;letter-spacing:.02em}

/* ------------------------------------------------------------------ footer and the phone dock */
.lp-foot{display:grid;gap:12px;padding:36px var(--gut) calc(104px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.lp-foot .lp-brand{color:var(--ink)}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:4px 6px;margin-inline-start:-10px}
.lp-foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink);font-weight:700;text-decoration:none}
.lp-foot-links a:hover{text-decoration:underline}
.lp-dock{position:fixed;z-index:20;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:7px;
  border-radius:var(--r-pill);background:var(--surface);box-shadow:0 12px 32px rgba(27,38,50,.22);
  transform:translateY(160%);visibility:hidden;transition:transform var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-1)}
.lp-dock.on{transform:none;visibility:visible;transition:transform var(--dur-2) var(--ease-out),visibility 0s}
.lp-dock .lp-btn-main{flex:1}
.lp-dock .lp-icon{width:52px;padding:0}

/* ------------------------------------------------------------------ wider screens */
@media (min-width:600px){
  :root[data-lp]{--pad:28px}
  .lp-cta{display:flex;flex-wrap:wrap}
  .lp-top-cta{padding:0 18px;font-size:var(--fs-md)}
  .lp-stack{height:360px}
}
@media (min-width:768px){
  .lp-video{display:block}
  .lp-evening{display:grid;align-items:end;min-height:min(94svh,880px)}
  .lp-ev-media{position:absolute;inset:0;aspect-ratio:auto}
  :root[dir=rtl] .lp-ev-media{transform:scaleX(-1)}  /* the man moves to the left, the words keep the start side */
  .lp-ev-media::after{inset:0;height:auto;background:linear-gradient(90deg,rgba(14,24,25,.94) 0%,rgba(14,24,25,.7) 30%,rgba(14,24,25,0) 58%),linear-gradient(transparent 60%,rgba(14,24,25,.6))}
  .lp-ev-copy{margin:0;padding:0 var(--gut) 11svh;max-width:calc(var(--gut) + 600px)}
  .lp-tile{width:340px}
}
@media (min-width:900px){
  .lp-owes,.lp-record{grid-template-columns:1fr 1fr;align-items:center;column-gap:6vw;padding-block:140px}
  .lp-app{grid-template-columns:1fr 1fr;align-items:center;column-gap:6vw;padding-block:140px}
  .lp-range{padding-block:140px}
  .js .lp-rail-wrap{overflow:visible;scroll-snap-type:none}
  .lp-three{grid-template-columns:repeat(3,1fr);gap:36px}
  .lp-three li{grid-template-columns:1fr;row-gap:6px}
}
@media (min-width:960px){
  :root[data-lp]{--pad:5vw}
  .lp-top{padding-block:20px}
  .lp-brand svg{height:26px}
  .lp-nav{display:flex;gap:4px;margin-inline-start:24px}
  .lp-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-md);font-weight:700;text-decoration:none;padding:0 12px;border-radius:var(--r-md)}
  .lp-nav a:hover{background:var(--ring)}
  .lp-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr);grid-template-areas:"head stage" "body stage";grid-template-rows:auto auto;
    align-content:center;column-gap:2vw;min-height:min(100svh,940px);padding:96px var(--gut) 40px}
  .lp-hero-head{align-self:end;padding:0 0 22px}
  .lp-hero-body{align-self:start;padding:0}
  .lp-stage{height:min(78svh,700px);max-height:none;margin:0}
  .lp-story{inset-inline-start:16px;width:min(calc(100% - 32px),380px)}
  .lp-grid{inset:24px 16px 92px}
  .lp-replay{inset-inline-end:16px}
  .lp-plans{grid-template-columns:repeat(4,1fr)}
  .lp-plan{padding:30px 26px}
  .lp-plan+.lp-plan{border-top:0;border-inline-start:1px solid var(--line)}
  .lp-doorway{height:min(56svh,560px)}
  .lp-foot{grid-template-columns:auto 1fr auto;align-items:center;gap:8px 24px;padding-bottom:36px}
  .lp-foot>p:last-child{grid-column:3}
  .lp-foot>.lp-foot-say{grid-column:1/3}
  .lp-dock{display:none}
}

/* ------------------------------------------------------------------ reduced motion: every object in its final state */
@media (prefers-reduced-motion:reduce){
  html,html.lp-smooth{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .ch-flow,.ch-ripples ellipse{animation:none}
  .ch-ripples{display:none}
  .lp-evening,.js .lp-evening{--e:1}
  .js .lp-paper .rc-print>*,.js .lp-paper .rc-print::after,.js .lp-paper .rc-bal::before{opacity:1;transform:none}
  .lp-final,.js .lp-final{--d:1;height:auto}
  .lp-final-stick{position:relative;height:auto;min-height:100svh}
  .lp-video{display:none}
  .js .lp-rail-wrap{overflow-x:auto}
}

/* ================================================================== the whole page answers the scroll (landing.js motion())
   --in: each section's arrival 0..1 (scroll position); --v: scroll velocity -1..1, springs back to 0;
   --mx/--my: the pointer, -1..1. Transform and opacity only. None of it under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .js main>section:not(.lp-hero){--in:0}
  /* whole blocks settle (never a heading sliding over the lines under it); headlines lean sideways with speed */
  .js main>section:not(.lp-hero):not(.lp-final)>*{opacity:calc(.15 + var(--in) * .85);transform:translate3d(0,calc((1 - var(--in)) * 40px),0)}
  .js main>section h2{transform:skewX(calc(var(--v,0) * -6deg))}
  .js :is(.lp-tile,.lp-plans,.lp-chat,.lp-paper){transform:perspective(1000px) translate3d(0,calc(var(--v,0) * -12px),0) rotateY(calc(var(--mx,0) * 3deg)) rotateX(calc(var(--my,0) * -2.4deg))}
}

/* ================================================================== the world behind the page (world.js, lazy)
   Without it (no WebGL2, reduced motion, Save-Data, before it boots) the page above is complete as it is.
   .world-lay (landing.js world(), set at once when the world will be tried) carries every rule that changes a
   height; .world-on (world.js, its first frame) only what is painted. So nothing moves when the world starts late,
   or when it gives up (QA final 1). */
.lp-world{position:fixed;top:0;left:0;right:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease)}
.world-on .lp-world{opacity:1}
.lp-stage.world canvas{opacity:0}
.world-on .lp-stage::before,.world-on .lp-grid{display:none}
.world-on :is(.lp-evening,.lp-app,.lp-record,.lp-final){background:transparent}
.world-lay .lp-evening{display:grid;gap:28px;align-items:center;min-height:auto;padding:16svh var(--gut) 14svh}
.world-lay .lp-ev-media{position:relative;inset:auto;aspect-ratio:16/10;width:100%;max-width:560px;border-radius:24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);transform:none}
.world-lay .lp-ev-media::after{display:none}
.world-lay .lp-ev-copy{margin:0;padding:28px;border-radius:28px;background:rgba(8,16,17,.74);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);max-width:640px}
.world-on :is(.lp-owes-copy,.lp-app-copy,.lp-ask-copy,.lp-start,.lp-faq){border-radius:28px;background:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--soft-shadow)}
.world-lay :is(.lp-owes-copy,.lp-app-copy,.lp-ask-copy){padding:28px}
.world-lay :is(.lp-start,.lp-faq){margin:40px var(--gut);padding:32px 28px}
.world-lay .lp-rec-copy{padding:28px;border-radius:28px;background:rgba(8,16,17,.74);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.world-on .lp-record{color:var(--deep-ink)}
.world-lay .lp-app-visual{min-height:min(70svh,560px)}
.world-on :is(.lp-app-visual,.lp-ask-visual){touch-action:pan-y;cursor:grab}
.world-on :is(.lp-app-visual,.lp-ask-visual)>*{visibility:hidden}
.world-lay .lp-ask-visual{min-height:min(70svh,560px)}
.world-on :is(.lp-ask,.lp-app){background:transparent}
@media (min-width:900px){
  .world-lay :is(.lp-app,.lp-ask){min-height:150svh;align-items:start}
  .world-lay :is(.lp-app-visual,.lp-ask-visual){position:sticky;top:12svh;height:76svh;min-height:0}
  .world-lay :is(.lp-app-copy,.lp-ask-copy){margin-top:20svh}
}
.world-on .lp-scene{visibility:hidden}
.world-on .lp-final-stick::before{display:none}
.world-lay .lp-final-copy{align-self:end;margin:0 auto;padding:26px 28px;border-radius:28px;background:rgba(5,10,11,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (min-width:768px){ .world-lay .lp-evening{grid-template-columns:1fr 1fr} .world-lay .lp-ev-media{order:2} }
@media (max-width:767px){
  .world-on :is(.lp-owes-copy,.lp-app-copy,.lp-ask-copy,.lp-start,.lp-faq){-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--surface) 90%,transparent)}
  .world-lay :is(.lp-ev-copy,.lp-rec-copy,.lp-final-copy){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,16,17,.72)}
  .world-lay .lp-app-visual{min-height:52svh}
}

/* ================================================================== collisions (rebuild B, verify gate: 0 overlapping boxes)
   The stack: only the top card shows its words; the face turned away hides its own. */
.lp-stack.live .lp-card:not(.top) .lp-face>*{visibility:hidden}
.lp-stack.live .lp-face>*{transition:visibility 0s linear .28s}
.lp-stack.live .lp-card:not(.flip) .lp-back>*,.lp-stack.live .lp-card.flip .lp-front>*{visibility:hidden}
.lp-stack.live .lp-card:not(.paid) .lp-card-ok{visibility:hidden}
/* ================================================================== the close: the courtyard exists only once the door opens
   (Abdul 12/10: no flash before). Hidden and not painted (visibility) until the door passes its threshold;
   then it fades in with the door (--rv), never from a non-zero start. With the world on, the 3D doorway shows it. */
.lp-beyond>*{visibility:hidden;opacity:0}
.lp-final.reveal .lp-beyond>*{visibility:visible}
.lp-final.reveal .lp-beyond>img,.lp-final.reveal .lp-beyond>.lp-video.on{opacity:var(--rv,1)}
.lp-beyond>.lp-video{display:block}
html:not(.js) .lp-beyond>img{visibility:visible;opacity:1}

/* ================================================================== round 3 (Abdul's review on desktop and Android)
   Hero: the words get a soft, feathered pool of the page colour behind them only; the building is never banded. */
.world-on .lp-hero>*{position:relative;z-index:1}
.world-on :is(.lp-hero-head,.lp-hero-body)::before{content:"";position:absolute;z-index:-1;inset:-48px calc(-1 * min(40px, var(--pad)));pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 92%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 55%,transparent 100%)}
/* the lead and the note reach the thin edge of their pool: their grey a step toward the ink (QA final 6) */
.world-on .lp-hero-body :is(.lp-lead,.lp-note){color:color-mix(in srgb,var(--muted) 50%,var(--ink))}
/* Seams: no straight edge between grounds. Without the world, the dark acts fade in and out of the page colour. */
html:not(.world-on) :is(.lp-evening,.lp-record){background:linear-gradient(var(--bg) 0,var(--night) 180px,var(--night) calc(100% - 180px),var(--bg) 100%)}
html:not(.world-on) .lp-record{background:linear-gradient(var(--bg) 0,var(--deep) 180px,var(--deep) calc(100% - 180px),var(--bg) 100%)}
html:not(.world-lay) .lp-ev-copy{padding-bottom:200px}
html:not(.world-lay) :is(.lp-record){padding-block:200px}
html:not(.world-on) .lp-final{background:linear-gradient(var(--bg) 0,var(--night) 220px)}
/* The page ends on its own calm band: no 3D behind the footer, a long feather into it. */
.lp-foot{position:relative;z-index:1;background:var(--bg)}
.world-lay .lp-foot{border-top:0;padding-top:24px}
.world-on .lp-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
/* The people, pinned: one slide per screen-height or more, holding the first and the last; dots show where you are. */
.lp-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.lp-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:width var(--dur-2) var(--ease-out),background-color var(--dur-2)}
.lp-dots i.on{width:26px;border-radius:5px;background:var(--btn)}
.lp-rail-wrap:focus-visible{outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.js .lp-rail-wrap{cursor:grab}}   /* a mouse drags it at every width (landing.js range()) */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .js .lp-range{height:calc(100svh + 6 * 90svh);padding-block:0;overflow:clip}
  .js .lp-range-head{padding-top:120px}
  .js .lp-rail-stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;overflow:hidden}
  .js .lp-rail-wrap{cursor:grab}
}
.rc-head small{display:block;font-size:var(--fs-sm);font-weight:600;color:#56625F;margin-top:2px}
/* The bar sits on a calm surface at every width: a soft fade of the page colour under it while the world is on. */
.world-on .lp-top::before{content:"";position:absolute;z-index:-1;inset:0 0 -48px 0;pointer-events:none;
  background:linear-gradient(var(--bg) 0,var(--bg) 56%,color-mix(in srgb,var(--bg) 70%,transparent) 76%,transparent 100%)}
/* With the world on, the courtyard is drawn in 3D through the gold door: the DOM copy never shows (it only feeds the texture). */
.world-on .lp-final.reveal .lp-beyond>*,.world-on .lp-beyond>*{visibility:hidden;opacity:0}
/* Inside the doorway the card settles on a deeper glass so it reads over the bright courtyard. */
.world-on .lp-final-copy{transition:background-color .6s ease}
.world-on .lp-final.open .lp-final-copy{background:rgba(5,10,11,.8)}
/* The text pools reach 40px past the hero copy; at tablet widths that is past the page edge. */
.world-on .lp-hero{overflow-x:clip}
/* "Start again" (who owes): .lp-btn's display must not undo [hidden]; a real button, shown only when cards are gone */
.lp-btn[hidden]{display:none}
.lp-owes-copy [data-again]{min-height:48px;margin-top:4px}
/* Phones and narrow tablets (Abdul 12/10: "make sure the hero animation is fully shown"): the hero is a vertical
   stack. The 3D stage has its own reserved box (--sh) and the camera frames the story inside it; the step card
   sits BELOW that box, never over the building; then the lead and the buttons. */
@media (max-width:959.98px){
  .lp-stage{--sh:clamp(300px,58svh,540px);height:auto;min-height:0;max-height:none;padding-top:var(--sh)}
  .lp-stage canvas{inset:0 0 auto 0;height:var(--sh)}
  .lp-stage::before{inset:calc(var(--sh) * .18) 4% auto;height:calc(var(--sh) * .76)}
  .lp-grid{inset:24px var(--gut) calc(100% - var(--sh) + 24px)}
  .lp-story{position:relative;inset:auto;margin:6px var(--gut) 0;width:auto;max-width:520px}
}
/* QA 13/10. (12) The closing card never sits under the footer's feather: the act ends 140 px above it. */
.world-lay .lp-final{padding-bottom:140px}
/* (6) Phones and narrow tablets (the stacked hero, h1 right under the bar): the bar's calm band stops at the bar,
   so the headline's top is never washed (it washed it at 768). */
@media (max-width:959.98px){
  .world-on .lp-top::before{inset:0 0 -10px 0;background:linear-gradient(var(--bg) 0,var(--bg) 78%,transparent 100%)}
}
/* (10) A face that comes in shows its words at once (focus can land on them); a face going out keeps them 0.28 s. */
.lp-stack.live .lp-face>*{transition:visibility 0s}
.lp-stack.live .lp-card:not(.top) .lp-face>*,.lp-stack.live .lp-card:not(.flip) .lp-back>*,.lp-stack.live .lp-card.flip .lp-front>*{transition:visibility 0s linear .28s}