/* Sareera sky experience, live-v5. Specs: site/experience/proto-v4-SPEC.md (items in brackets), then GO-LIVE, QA-GOLIVE,
   FIX2 and V3LOOK-SPEC (2026-11-10: Lala's prototype v3 look, see the V3LOOK section at the end, which wins).
   Motion [8][12]: 450 to 600 ms, max 12 px rise, cubic-bezier(0.22,1,0.36,1); no blur, no rotateX; loops: sky drift,
   star twinkle and the 24 s cloud veil only. */

/* V3LOOK [2]: v3's fonts. IBM Plex Sans Arabic 400/500/600 (Arabic + Latin, subset by tools/v3look-fonts.sh) and
   IBM Plex Sans 300 for the logo (the seven letters of «sareera» only). Self-hosted: the CSP allows same-origin fonts. */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/PlexArabic-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/PlexArabic-500.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-display: swap; font-weight: 600 700; src: url(fonts/PlexArabic-600.woff2) format('woff2'); }
@font-face { font-family: 'Plex Logo'; font-style: normal; font-display: swap; font-weight: 300; src: url(fonts/PlexSans-300-logo.woff2) format('woff2'); }

:root {
  --ink: #1B1420; --muted: #4A4153; --gold: #D4A04A; --pearl: #EBE3D6; --star: #FFF4DC;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 500ms;
  /* set by sky.js from P */
  --core: 250, 246, 238; --edge-tint: #FFFFFF; --hdr: var(--ink); --hdr-veil: rgba(255, 255, 255, .34);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: #4A8FD6; -webkit-text-size-adjust: 100%; }
/* QA-GOLIVE: no scroll snap. In WebKit (iOS, Telegram/Instagram/TikTok) the proximity snap on the chapter clouds
   pulled every short scroll back to the themes chapter start (stuck at 2097 px for nine 90 px steps at 375x667,
   qa/scroll-probe.mjs). The «متابعة» buttons and star taps already land on exact positions by script. */
html.in-act2 { scroll-snap-type: none; }
body {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 400; color: var(--ink);
  font-size: 20px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; min-height: 100svh;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- sky [3][4] */
#sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #4A8FD6; }
.plates { position: absolute; inset: -28px; will-change: transform; } /* overscan: translation max 24 px, scale max 1.025 */
.drift { position: absolute; inset: 0; animation: drift 60s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -6px, 0); } }
.pl { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; will-change: opacity; }
.pl.day { opacity: 1; background-image: url(sky/day-lo.webp); }
.pl.golden { background: linear-gradient(to top, rgba(244, 184, 102, .78), rgba(242, 196, 130, .42) 45%, rgba(236, 200, 150, .10)); mix-blend-mode: soft-light; }
/* v4.1 [5]: honey wash for golden hour (P 0.25) and a rose lift for sunset (P 0.40) so its top never goes black-brown */
.pl.honey { background: linear-gradient(to top, rgba(240, 158, 70, .88), rgba(242, 172, 90, .78) 38%, rgba(238, 176, 104, .70) 70%, rgba(232, 172, 108, .64)); }
.pl.rose { background: linear-gradient(to bottom, rgba(138, 98, 148, .90), rgba(196, 124, 142, .80) 30%, rgba(232, 146, 124, .58) 58%, rgba(240, 150, 96, .14) 86%, rgba(240, 150, 96, 0)); }
.pl.tint { background: #2B2140; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; }
#thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#thr { fill: none; stroke: rgba(242, 212, 154, .55); stroke-width: 1; stroke-linecap: round; }

/* ---------------------------------------------------------------- header + position [5] */
.top { position: fixed; top: 0; inset-inline: 0; z-index: 6; color: var(--hdr); pointer-events: none; }
.top::before { content: ""; position: absolute; inset: 0 0 -18px; background: linear-gradient(var(--hdr-veil), transparent); pointer-events: none; transition: opacity 360ms var(--ease); }
.bar { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 520px; margin: 0 auto;
  padding: calc(12px + var(--safe-t)) 16px 0; }
.logo { font-weight: 300; font-size: 22px; line-height: 1.2; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .16); }
.ctl { display: flex; gap: 8px; pointer-events: auto; }
.pill { font-size: 13px; line-height: 1; color: #fff; background: rgba(20, 16, 30, .18); border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px; min-height: 32px; padding: 0 12px; cursor: pointer; }
/* QA-GOLIVE: 44 px tap area around the 32 px capsule (invisible, no layout change) */
.pill { position: relative; }
.pill::after { content: ""; position: absolute; z-index: -1; inset: -6px -3px; }
.pill[aria-disabled="true"] { opacity: .5; cursor: default; }
.pill[aria-pressed="true"] { background: rgba(255, 255, 255, .22); }
.where { position: relative; max-width: 520px; margin: 0 auto; padding: 0 16px; }
.arc { display: block; width: 100%; height: 16px; overflow: visible; }
#arcp { fill: none; stroke: currentColor; stroke-opacity: .45; stroke-width: 1; }
#arcdot { fill: #F2C14E; }
#chapter { font-size: 16px; line-height: 1.5; min-height: 24px; text-align: center; }
/* v4.1 [1]: compact map band. Once the reader scrolls past the full map, the header and the band become one solid
   night panel with a crisp hairline edge (no fade): content passes under it like under any fixed bar. */
.top::after { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--hdrB, 84px) + 8px); z-index: -1; background: rgb(var(--nightbg, 19, 39, 72)); opacity: 0;
  transition: opacity 360ms var(--ease); pointer-events: none; }
body.compact .top::after { opacity: 1; }
body.compact .top::before { opacity: 0; }
.mapnav { position: fixed; z-index: 6; inset-inline: 0; top: var(--hdrB, 84px); height: 96px; display: flex; justify-content: center;
  padding: 0 10px; background: rgb(var(--nightbg, 19, 39, 72)); border-bottom: 1px solid rgba(235, 227, 214, .16);
  opacity: 0; pointer-events: none; }
/* QA-GOLIVE [1]: the band's opacity is driven by sky.js (--navIn, second half of the full-map handoff), never by a CSS
   transition, so the band moon only appears after the sky moon has gone (one moon on screen at any time) */
body.compact .mapnav { opacity: var(--navIn, 1); pointer-events: auto; }
/* while a field has focus (keyboard up) the band steps aside so the form keeps the screen; the header panel stays */
html.typing body.compact .mapnav { opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
.nv { flex: 1; max-width: 125px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1px; padding: 12px 2px 6px; background: none; border: 0; color: var(--star); cursor: pointer; transition: opacity 300ms var(--ease); }
.nv .dot { display: block; width: 18px; height: 18px; margin-bottom: 5px; border-radius: 50%; flex: none; }
.nv i.dot { background: radial-gradient(circle, #FFFAEE 0 2.4px, rgba(255, 214, 140, .55) 3.2px, rgba(255, 214, 140, 0) 9px); }
.nv i.asc { background: radial-gradient(circle, #FFFAEE 0 2.4px, rgba(200, 220, 255, .55) 3.2px, rgba(200, 220, 255, 0) 9px); }
.nv i.lp { background: radial-gradient(circle, #FFFAEE 0 1.8px, rgba(255, 240, 210, .5) 2.6px, rgba(255, 240, 210, 0) 7px); }
.nv.unknown i.dot { background: none; box-shadow: inset 0 0 0 1px rgba(200, 220, 255, .55); transform: scale(.6); }
.nv .k { font-size: 12px; line-height: 1.4; color: #D2CBDC; white-space: nowrap; }
.nv .v { font-size: 15px; line-height: 1.35; font-weight: 500; white-space: nowrap; }
.nv.dim { opacity: .6; }
.nv.on .k { color: var(--star); }
.nv:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }

/* ---------------------------------------------------------------- layout: native document scroll [2] */
main { position: relative; z-index: 2; overflow-x: clip; }
/* FIX2 [6]: every svh line has a vh line before it (WebViews without svh, e.g. Android before Chrome 108, keep the vh) */
.act1 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 45vh 40px calc(28px + var(--safe-b)); padding: 45svh 40px calc(28px + var(--safe-b)); }
.act2 { padding: 0 40px calc(40px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; }
.mapspace { height: max(48vh, calc(var(--mapB, 0px) + 64px)); height: max(48svh, calc(var(--mapB, 0px) + 64px)); width: 100%; } /* QA-GOLIVE: the reading starts below the line */
.chap { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 34vh; padding-top: 34svh; }
/* v4.1 [1]: chapter anchors sit below the compact band; the cloud's core lands 56 px under it (core = text box - 24) */
.chap > .rw:first-child > .cloud { scroll-snap-align: start; scroll-margin-top: calc(var(--hdrB, 84px) + 96px + 56px + 24px); }
.closing { scroll-snap-align: none; }
.proto-note { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .8); text-shadow: 0 0 6px rgba(0, 0, 0, .5); margin-top: 48px; direction: ltr; text-align: center; }

/* ---------------------------------------------------------------- cloud panels [6]: core, photographic edge, veil */
/* v4.1 [2]: no isolation per cloud. Every decorative layer (veil -3, edge -2, core -1) of every cloud shares main's
   stacking context, so all of them paint below every .c-body: a neighbour's wisps or drifting veil can never cover
   text. Masks, transforms and the veil animation live only on those decorative siblings; no text or form ancestor
   carries a mask, a filter or a lasting transform. */
.cloud { position: relative; width: 100%; max-width: 380px; }
/* act 2 wrapper: 88 px between clouds (no mask any more) */
.rw { width: calc(100% + 140px); margin: 8px -70px -80px; padding: 80px 70px; display: flex; flex-direction: column; align-items: center; }
#blocks { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* core: one group at 0.94 opacity (no double density where shapes overlap), 24 px beyond the text, cumulus bumps
   on the top and bottom edges with soft falloff; nothing in it moves */
.c-core { position: absolute; inset: -24px; z-index: -1; opacity: .94; background: rgb(var(--core));
  border-radius: 72px 56px 80px 64px / 60px 66px 54px 72px; box-shadow: 0 0 30px 16px rgba(var(--core), .82); }
.c-core::before, .c-core::after { content: ""; position: absolute; inset-inline: 0; pointer-events: none; }
.c-core::before { top: -50px; height: 90px;
  background: radial-gradient(circle at 15% 78%, rgb(var(--core)) 0 34px, rgba(var(--core), 0) 46px),
              radial-gradient(circle at 37% 66%, rgb(var(--core)) 0 44px, rgba(var(--core), 0) 58px),
              radial-gradient(circle at 62% 76%, rgb(var(--core)) 0 36px, rgba(var(--core), 0) 48px),
              radial-gradient(circle at 85% 82%, rgb(var(--core)) 0 28px, rgba(var(--core), 0) 40px); }
.c-core::after { bottom: -34px; height: 64px;
  background: radial-gradient(circle at 26% 30%, rgb(var(--core)) 0 30px, rgba(var(--core), 0) 42px),
              radial-gradient(circle at 72% 26%, rgb(var(--core)) 0 36px, rgba(var(--core), 0) 48px); }
.c-edge { position: absolute; inset: -64px -58px; z-index: -2; pointer-events: none; }
.c-edge i { position: absolute; display: block;
  background: url(sky/cloud.webp) center / 100% 100% no-repeat, linear-gradient(var(--edge-tint), var(--edge-tint));
  background-blend-mode: multiply, normal;
  -webkit-mask: url(sky/cloud.webp) center / 100% 100% no-repeat; mask: url(sky/cloud.webp) center / 100% 100% no-repeat; }
.c-edge i:nth-child(1) { top: -4%; inset-inline-start: -6%; width: 78%; height: 38%; max-height: 190px; }
.c-edge i:nth-child(2) { top: -2%; inset-inline-end: -8%; width: 70%; height: 34%; max-height: 170px; transform: scaleX(-1); }
.c-edge i:nth-child(3) { bottom: -6%; inset-inline-start: 4%; width: 92%; height: 34%; max-height: 180px; transform: scaleY(-1); opacity: .9; }
.c-edge i:nth-child(4) { top: 30%; inset-inline-end: -18%; width: 46%; height: 40%; transform: rotate(84deg) scaleX(-1); opacity: .75; }
.c-veil { position: absolute; inset: -80px -70px; z-index: -3; pointer-events: none; opacity: .42;
  background: radial-gradient(48% 34% at 30% 26%, rgba(255, 255, 255, .7), transparent 72%),
              radial-gradient(44% 36% at 72% 70%, rgba(255, 255, 255, .6), transparent 72%);
  animation: veil 24s ease-in-out infinite alternate; }
@keyframes veil { from { transform: translate3d(-3px, 0, 0); } to { transform: translate3d(4px, -3px, 0); } }
.c-body { position: relative; z-index: 1; }

/* QA-GOLIVE: the strings are filled in by app.js; on a slow network the empty cloud used to paint first and then grow
   (CLS 0.11 on slow 4G). The cloud stays invisible (layout kept) until its text is in, then fades in. */
html.boot #c1 { visibility: hidden; }
#c1 { animation: fadein 400ms var(--ease) both; }
html.boot #c1 { animation: none; }

/* act 1 transitions [8]: exit 160 ms, enter 500 ms, 12 px rise; the cloud parts for the reveal (800 ms) */
.step { animation: enter var(--dur) var(--ease) both; }
.step.out { animation: leave 160ms cubic-bezier(.4, 0, 1, 1) both; }
@keyframes enter { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: translate3d(0, -6px, 0); } }
/* parting and withdrawal: the decorative layers move; the text layer only fades (no transform on text ancestors) */
.cloud.parting > .c-core, .cloud.parting > .c-veil, .cloud.parting > .c-edge { animation: part 800ms var(--ease) both; }
.cloud.parting > .c-body { animation: fadeout 800ms var(--ease) both; }
.cloud.parting .c-edge i:nth-child(odd) { transition: transform 800ms var(--ease); transform: translate3d(40px, 0, 0); }
.cloud.parting .c-edge i:nth-child(even) { transition: transform 800ms var(--ease); transform: translate3d(-40px, 0, 0) scaleX(-1); }
@keyframes part { to { opacity: 0; transform: translate3d(0, 10px, 0) scale(1.03); } }
@keyframes fadeout { to { opacity: 0; } }
.cloud.withdraw { pointer-events: none; }
.cloud.withdraw > .c-core, .cloud.withdraw > .c-veil, .cloud.withdraw > .c-edge { animation: part 600ms var(--ease) both; }
.cloud.withdraw > .c-body { animation: fadeout 600ms var(--ease) both; }

/* ---------------------------------------------------------------- type [10] */
h1, h2 { font-weight: 500; font-size: 30px; line-height: 1.4; }
.lead, .body { font-size: 20px; line-height: 1.75; margin-top: 10px; }
.lead { color: var(--muted); }
.small, .label { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.center { text-align: center; }
.err { color: #8E2F1C; font-size: 16px; line-height: 1.5; margin-top: 8px; min-height: 0; }
.err:empty { margin: 0; }
.err:not(:empty)::before { content: "! "; font-weight: 500; }

/* buttons [9]: solid gold, 52 px, 8 px radius; ink on warm skies */
.btn { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 8px; background: var(--gold); color: var(--ink);
  font-size: 18px; font-weight: 500; line-height: 1.3; padding: 12px 16px; margin-top: 22px; cursor: pointer;
  transition: background-color 450ms var(--ease), color 450ms var(--ease); }
.btn:active { transform: translateY(1px); }
body.warm .btn { background: var(--ink); color: var(--pearl); }
.btn:disabled { opacity: .5; cursor: default; }
.link { display: block; width: 100%; min-height: 44px; background: none; border: 0; color: var(--muted); font-size: 16px;
  text-decoration: underline; text-underline-offset: 4px; margin-top: 6px; cursor: pointer; }
.link.light { color: var(--star); }
.ghost { display: block; width: 100%; min-height: 48px; background: transparent; border: 1px solid rgba(27, 20, 32, .32); border-radius: 8px;
  color: var(--ink); font-size: 17px; margin-top: 14px; cursor: pointer; }
.ghost[aria-pressed="true"] { border-color: var(--ink); background: rgba(27, 20, 32, .06); }
.nav { margin-top: 4px; }
/* v4.1 [7]: «لا أعرف الساعة» is a text link that toggles; pressed reads as chosen (medium weight, a 2 px underline) */
.link.toggle { width: auto; margin: 10px auto 0; padding: 0 6px; color: var(--ink); }
.link.toggle[aria-pressed="true"] { font-weight: 500; text-decoration-thickness: 2px; }
/* «ليس الآن»: a quiet link normally; in the retry state retry and later are equal ghosts side by side */
.pair-btn { display: flex; gap: 10px; }
.pair-btn .ghost { flex: 1; }
.pair-btn .link { margin-top: 10px; }
.ok { font-size: 18px; line-height: 1.6; font-weight: 500; margin-top: 22px; padding: 12px 0; text-align: center; }
.ok:focus { outline: none; }

/* fields */
.fields { display: flex; gap: 10px; margin-top: 16px; }
.fields label, .f { flex: 1; display: block; }
.fields label.wide { flex: 1.6; }
.fields span, .f > span { display: block; font-size: 16px; line-height: 1.5; color: var(--muted); }
.fields input, .f input { display: block; width: 100%; min-height: 52px; border: 1px solid rgba(27, 20, 32, .30); border-radius: 8px;
  background: rgba(255, 255, 255, .72); padding: 8px 12px; font-size: 20px; color: var(--ink); text-align: center; }
.f input { text-align: start; }
.f input[dir="ltr"] { text-align: left; }
.fields input:focus, .f input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
::placeholder { color: #6E6577; opacity: 1; }
.timebox { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.timebox.off { opacity: .45; }
.seg { display: flex; gap: 4px; padding: 3px; border: 1px solid rgba(27, 20, 32, .30); border-radius: 8px; min-height: 52px; background: rgba(255, 255, 255, .55); }
.seg button { border: 0; border-radius: 6px; background: transparent; padding: 0 12px; font-size: 17px; color: var(--muted); cursor: pointer; min-width: 62px;
  transition: background-color 200ms var(--ease), color 200ms var(--ease); }
/* v4.1 [7]: the selected half is a solid ink chip with pearl text and a medium weight */
.seg button[aria-checked="true"] { background: var(--ink); color: var(--pearl); font-weight: 500; }
/* v5 [4]: the time is complete but morning/evening is not chosen: the group gets a 2 px gold outline */
.seg.need { outline: 2px solid var(--gold); outline-offset: 1px; }
/* FIX2 [6]: sky.js safe-area probe (was an inline cssText; the CSP allows no inline style) */
.safe-probe { position: fixed; top: 0; left: 0; width: 0; padding-top: env(safe-area-inset-top, 0px); visibility: hidden; pointer-events: none; }
/* v5 [1]: signup honeypot, off screen for people, present for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choices { margin-top: 14px; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; padding: 0 16px;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(27, 20, 32, .28); border-radius: 8px; font-size: 19px; cursor: pointer; text-align: start; }
.choice i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.choice[aria-checked="true"] { border-color: var(--ink); }
.choice[aria-checked="true"] i { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 42%, transparent 46%); }

/* combobox (port of prototype-night) */
/* QA-GOLIVE: the city field scrolls to the top when focused (room for the list above the keyboard); the margin keeps it
   below the fixed header instead of under it */
.combo { position: relative; margin-top: 16px; scroll-margin-top: calc(var(--hdrB, 84px) + 12px); }
#suggest { list-style: none; margin-top: 6px; border: 1px solid rgba(27, 20, 32, .22); border-radius: 8px; overflow: auto; background: rgb(var(--core)); max-height: 384px; }
#suggest li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 14px; min-height: 48px; border-bottom: 1px solid rgba(27, 20, 32, .10); cursor: pointer; font-size: 18px; line-height: 1.4; }
#suggest li:last-child { border-bottom: 0; }
#suggest li.sel, #suggest li:hover { background: rgba(27, 20, 32, .07); }
#suggest b { font-weight: 500; }
/* v4.1 [7]: rows are options, not links: the typed part is marked by a soft gold wash, never an underline */
#suggest mark { background: rgba(212, 160, 74, .26); color: inherit; border-radius: 3px; }
#suggest .co { font-size: 16px; color: var(--muted); }
#suggest .en { font-size: 15px; color: var(--muted); }
#suggest .more { color: var(--muted); }

/* ---------------------------------------------------------------- act 2: reading [7] */
.blk .lab { font-size: 16px; line-height: 1.5; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.blk .fact { font-size: 20px; line-height: 1.6; font-weight: 500; margin-top: 6px; }
.blk .short { font-size: 20px; line-height: 1.75; margin-top: 6px; }
.blk.note .short { color: var(--muted); }
.calc { display: flex; flex-direction: column; margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.themes { list-style: none; margin-top: 4px; }
.themes li { font-size: 20px; line-height: 1.6; padding: 14px 0; }
.label.rule { border-top: 1px solid rgba(27, 20, 32, .22); padding-top: 14px; margin-top: 22px; }
.how { list-style: none; counter-reset: n; margin-top: 12px; }
.how li { counter-increment: n; position: relative; padding-inline-start: 38px; font-size: 20px; line-height: 1.75; margin-top: 12px; }
.how li::before { content: counter(n); position: absolute; inset-inline-start: 0; top: 4px; width: 26px; height: 26px; border: 1px solid rgba(27, 20, 32, .4);
  border-radius: 50%; font-size: 15px; line-height: 24px; text-align: center; color: var(--muted); }
.price { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(27, 20, 32, .22); font-size: 20px; font-weight: 500; }
.check { position: relative; display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; min-height: 26px; font-size: 16px; line-height: 1.6; cursor: pointer; }
/* QA-GOLIVE: a one-line consent label is 26 px; the invisible 9 px bands make every checkbox row a 44 px tap target,
   and the 18 px gap (was 14) means two rows' bands never overlap */
.check::after { content: ""; position: absolute; z-index: -1; inset: -9px 0; } /* behind the box and text: only empty space hits it */
.check input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin-top: 2px; }
.indent { margin-inline-start: 34px; margin-top: 4px; }
.f input[type="email"] { margin-top: 4px; }
#wait-form .f { margin-top: 16px; }
.demo { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 14px; text-align: center; }

/* sky text: the line before ignition, star labels, closing [7][8] */
.skyline { position: fixed; z-index: 3; inset-inline: 24px; top: max(46vh, var(--mapB, 0px)); top: max(46svh, var(--mapB, 0px)); text-align: center; font-size: 20px; line-height: 1.75; color: var(--star);
  text-shadow: 0 0 12px rgba(0, 0, 0, .6); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 600ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.skyline.show { opacity: 1; transform: none; }
#labels { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.slab { position: absolute; display: block; background: none; border: 0; padding: 4px 6px; text-align: center; color: var(--star); cursor: pointer;
  pointer-events: auto; min-width: 44px; min-height: 44px; opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease); text-shadow: 0 0 12px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .5); }
.slab.show { opacity: 1; transform: none; }
.slab .k { display: block; font-size: 13px; line-height: 1.4; color: #D2CBDC; }
.slab .v { display: block; font-size: 19px; line-height: 1.35; font-weight: 500; }
.slab .n { display: block; font-size: 13px; line-height: 1.5; color: #D2CBDC; max-width: 150px; font-weight: 400; }
.slab:focus-visible { outline: 2px solid var(--star); }
.closing { position: relative; min-height: 100vh; min-height: 100svh; padding-top: 40vh; padding-top: 40svh; justify-content: flex-start; }
/* QA-GOLIVE [2]: the closing letter is taller than the screen. The old scrim was one radial gradient centred at 40% of
   the section, so the first line, the last paragraphs, the «نجم» signature and the footer sat on the bare Milky Way
   while scrolling. Now a feathered night column runs behind the whole letter and footer (static: a blurred solid, no
   backdrop-filter over the animated sky), so every line has the same dark ground at every scroll position.
   FIX2 [6]: no filter. The old look was a rounded box blurred by 22 px (a two-screen-tall blur WebKit may drop or
   jank). A Gaussian-blurred box is the product of two edge ramps, so the same look is a static gradient: horizontal
   ramp in the background, vertical ramp in the mask, each 88 px wide (two blur radii either side of the old edge),
   stops on the Gaussian curve. The box grows by 44 px on every side to hold the outer half of the ramp. */
.scrim { position: absolute; inset: calc(40vh - 88px) -58px -36px; inset: calc(40svh - 88px) -58px -36px; pointer-events: none; animation: fadein 600ms var(--ease) both;
  background: linear-gradient(to right, rgba(6, 7, 18, 0) 0, rgba(6, 7, 18, .045) 11px, rgba(6, 7, 18, .118) 22px, rgba(6, 7, 18, .229) 33px, rgba(6, 7, 18, .37) 44px,
    rgba(6, 7, 18, .511) 55px, rgba(6, 7, 18, .622) 66px, rgba(6, 7, 18, .69) 77px, rgba(6, 7, 18, .74) 88px, rgba(6, 7, 18, .74) calc(100% - 88px),
    rgba(6, 7, 18, .69) calc(100% - 77px), rgba(6, 7, 18, .622) calc(100% - 66px), rgba(6, 7, 18, .511) calc(100% - 55px), rgba(6, 7, 18, .37) calc(100% - 44px),
    rgba(6, 7, 18, .229) calc(100% - 33px), rgba(6, 7, 18, .118) calc(100% - 22px), rgba(6, 7, 18, .045) calc(100% - 11px), rgba(6, 7, 18, 0) 100%);
  -webkit-mask-image: var(--scrimV); mask-image: var(--scrimV);
  --scrimV: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .061) 11px, rgba(0, 0, 0, .159) 22px, rgba(0, 0, 0, .309) 33px, rgba(0, 0, 0, .5) 44px,
    rgba(0, 0, 0, .691) 55px, rgba(0, 0, 0, .841) 66px, rgba(0, 0, 0, .933) 77px, #000 88px, #000 calc(100% - 88px), rgba(0, 0, 0, .933) calc(100% - 77px),
    rgba(0, 0, 0, .841) calc(100% - 66px), rgba(0, 0, 0, .691) calc(100% - 55px), rgba(0, 0, 0, .5) calc(100% - 44px), rgba(0, 0, 0, .309) calc(100% - 33px),
    rgba(0, 0, 0, .159) calc(100% - 22px), rgba(0, 0, 0, .061) calc(100% - 11px), rgba(0, 0, 0, 0) 100%); }
@keyframes fadein { from { opacity: 0; } }
.lines { position: relative; max-width: 380px; color: var(--star); text-align: center; }
.lines p { font-size: 20px; line-height: 1.75; margin-top: 12px; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease); text-shadow: 0 0 10px rgba(0, 0, 0, .55); }
.lines p.show { opacity: 1; transform: none; }
.lines p.now { transition: none; }
.lines .ok2 { color: #F2D49A; }
.lines .sign { color: #F2D49A; font-size: 24px; margin-top: 4px; }
.close-foot { position: relative; margin-top: 36px; text-align: center; color: var(--star); opacity: 0; transition: opacity 600ms var(--ease); }
.close-foot.show { opacity: 1; }
.credit { font-size: 14px; line-height: 1.6; color: #D2CBDC; margin-top: 8px; }

/* ---------------------------------------------------------------- FIX2 [7]: privacy notice sheet */
/* A modal <dialog> over the journey (same look as /privacy/, legal.css): full screen on phones, a 680 px column on
   wide screens. Only its body scrolls; overscroll does not reach the page underneath. */
dialog.sheet { position: fixed; inset: 0; width: 100%; max-width: 680px; height: 100%; max-height: none; margin: 0 auto; padding: 0; border: 0;
  background: #0e0d0c; color: #efe6d6; overscroll-behavior: contain; }
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(6, 7, 18, .7); }
.sheet-bar { flex: none; display: flex; justify-content: flex-start; padding: calc(10px + var(--safe-t)) 16px 10px; border-bottom: 1px solid #3a342d; }
.sheet-bar .ghost { width: auto; min-width: 96px; min-height: 44px; padding: 0 18px; color: #efe6d6; border-color: rgba(239, 230, 214, .4); font-size: 16px; }
.sheet-bar .ghost:focus-visible { outline: 2px solid #d9a441; outline-offset: 2px; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 24px calc(48px + var(--safe-b));
  font-size: 17px; line-height: 1.85; outline: none; }
.legal h1 { font-size: 26px; line-height: 1.4; margin: 0 0 4px; }
.legal h2 { font-size: 18px; color: #d9a441; margin-top: 28px; }
.legal p, .legal li { margin-top: 8px; }
.legal a { color: #d9a441; }
.legal a:focus-visible { outline: 2px solid #d9a441; outline-offset: 2px; border-radius: 3px; }
.legal ul { padding-inline-start: 22px; list-style: disc; }
.legal li { margin: 4px 0; }
.legal .en { border-top: 1px solid #3a342d; margin-top: 56px; padding-top: 24px; }
.legal .muted { color: #b8ad9c; font-size: 15px; }

/* ================================================================ V3LOOK (V3LOOK-SPEC, 2026-11-10)
   The look of Lala's prototype v3 (site/experience/proto, sareera-preview): the bright photographic sun (in the day
   and golden plates, sky.js), one white cloud panel in the middle of the screen for every act 1 step and the waitlist,
   v3's type sizes, white logo, glass pills and the gold gradient button. Everything else (fields, combobox, keyboard
   logic, reading, band, closing scrim, signup) is the live-v5 code underneath. Values are v3's unless a line says why.
   Contrast is measured by qa/contrast.mjs (act 1 steps included); text on the cloud is ink and --fg2 at every stage. */
:root { --fg2: rgba(27, 20, 32, .74); --fedge: rgba(27, 20, 32, .14); --field: rgba(255, 255, 255, .62);
  /* gold text on the white cloud: v3's #D4A04A is 2.2:1 there, so gold TEXT uses this deeper gold (8.3:1 on white, 4.8:1 on the dimmest day cloud);
     gold fills (button, borders, ring) stay v3's gold */
  --gold-ink: #6B420C; --pfill: 0; }
html, #sky { background: #1E63C4; }

/* header: v3 (logo 21 px Plex Sans 300 white, glass pills 12.5 px); no veil under the header */
.bar { padding: calc(14px + var(--safe-t)) 18px 10px; }
.logo { font-family: 'Plex Logo', 'IBM Plex Sans Arabic', sans-serif; font-weight: 300; font-size: 21px; line-height: 1.2; color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
/* v3's pill is white on rgba(255,255,255,.12); over the golden plate that is 2.6:1, so the glass carries a smoke
   (rgba(20,16,30,.38) under the white tint) and the label stays >= 4.5:1 at every stage */
.pill { font-size: 12.5px; color: #fff; background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)), rgba(20, 16, 30, .38);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 20px; min-height: 30px; padding: 0 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.pill::after { inset: -7px -3px; } /* v3's 30 px capsule, 44 px tap band */
#snd::before { content: "\266A\00A0"; }
.pill[aria-disabled="true"] { opacity: .75; } /* v3 shows «English» like any pill; a little quieter here, it is not live yet */
.pill[aria-pressed="true"] { background: linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, .24)), rgba(20, 16, 30, .38); }
.top::before { display: none; }
/* act 1: v3 has no chapter line or arc in the header (the progress is inside the panel); the element keeps its place
   (layout, aria-live) but is not painted until the reading */
html:not(.in-act2) .where { opacity: 0; }

/* ---- the v3 cloud panel (every cloud: act 1, reading, themes, how, waitlist) */
.c-edge, .c-veil { display: none; }
.cloud { max-width: 440px; padding: 40px 34px; }
/* --pfill (sky.js, from the measured contrast): extra white under the text, feathered wide so it reads as the dense
   heart of the cloud, not a box */
.cloud > .c-core { inset: 0; z-index: -1; opacity: 1; border-radius: 56px; background: rgba(255, 255, 255, var(--pfill));
  box-shadow: 0 0 48px 10px rgba(255, 255, 255, var(--pfill)); animation: drift2 26s ease-in-out infinite alternate; }
.cloud > .c-core::before, .cloud > .c-core::after { content: ""; position: absolute; z-index: 0; pointer-events: none; height: auto; }
.cloud > .c-core::before { inset: -26px -30px -22px -30px; filter: blur(16px);
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(34% 28% at 58% 10%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 70%),
    radial-gradient(30% 26% at 86% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%),
    radial-gradient(46% 34% at 50% 45%, rgba(255, 255, 255, .97), rgba(255, 255, 255, 0) 75%),
    radial-gradient(40% 30% at 14% 62%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(42% 30% at 84% 66%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(44% 26% at 40% 90%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 72%),
    radial-gradient(30% 22% at 76% 92%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 72%),
    radial-gradient(70% 60% at 50% 52%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 80%);
  animation: billow 18s ease-in-out infinite alternate; }
.cloud > .c-core::after { inset: -10px -14px; filter: blur(26px); opacity: .55;
  background: radial-gradient(28% 22% at 10% 30%, #fff, transparent 70%), radial-gradient(26% 20% at 92% 44%, #fff, transparent 70%),
    radial-gradient(30% 22% at 30% 100%, #fff, transparent 70%), radial-gradient(26% 20% at 70% 0%, #fff, transparent 70%);
  animation: billow 24s ease-in-out infinite alternate-reverse; }
html.nt .cloud > .c-core::before { filter: blur(16px) brightness(.96) sepia(.12); }
@keyframes billow { from { transform: translate(0, 0) scale(1); } to { transform: translate(8px, -6px) scale(1.03); } }
/* v3 drifts the whole cloud; here only the decorative layer drifts (no lasting transform on a text ancestor) */
@keyframes drift2 { from { transform: translate(-6px, 0); } to { transform: translate(10px, -8px); } }
.cloud > .c-body { color: var(--ink); }
.cloud :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

/* act 1: the panel is centred on the screen (v3 stage: 60 px top, 4vh bottom, centred); v3 width 440, 16 px sides */
.act1 { justify-content: center; padding: calc(64px + var(--safe-t)) 16px calc(32px + var(--safe-b)); }
/* step change: v3's cloudIn (from the side), without the blur and the scale on text */
.step { animation: v3in 900ms cubic-bezier(.2, .8, .2, 1) both; }
.step.out { animation: v3out 160ms ease-in both; }
@keyframes v3in { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } } /* no scale: tap targets keep 44 px through the move */
@keyframes v3out { to { opacity: 0; transform: translate3d(-40px, 0, 0); } }
.cloud.parting > .c-core { animation: part 800ms var(--ease) both; }

/* type: v3 sizes (h1 29, h2 25, lead 16 / 15 inside steps, small 13) */
h1 { font-weight: 500; font-size: 29px; line-height: 1.38; }
h2 { font-weight: 500; font-size: 25px; line-height: 1.4; }
.lead, .body { font-size: 15px; line-height: 1.85; color: var(--fg2); margin-top: 10px; }
.step[data-step="arrive"] .lead { font-size: 16px; }
.small, .label { font-size: 13px; line-height: 1.75; color: var(--fg2); margin-top: 12px; }
/* error text: v3's #B8703A is 3.9:1 on the cloud; the live-v5 red stays (7:1) at v3's size */
.err { color: #8E2F1C; font-size: 13px; }

/* progress (v3): four labelled segments at the top of the panel, the current one gold */
.prog { display: flex; gap: 6px; margin-bottom: 18px; }
.prog span { flex: 1; font-size: 11.5px; line-height: 1.5; color: var(--fg2); padding-top: 7px; border-top: 2px solid rgba(27, 20, 32, .16); text-align: center; }
.prog span.done { border-color: rgba(212, 160, 74, .6); }
.prog span.cur { color: var(--gold-ink); border-color: var(--gold); font-weight: 600; }
/* back (v3: «→ رجوع» at the top of the panel); 44 px tall tap area */
.back { display: inline-flex; align-items: center; min-height: 44px; min-width: 64px; margin: -12px 0 -2px; padding: 0; background: none; border: 0;
  color: var(--fg2); font-size: 14px; cursor: pointer; }
.back::before { content: "\2192\00A0"; }

/* buttons: v3 gold gradient, 17 px 600, radius 14; ink text (6.9:1). The «warm» ink button is gone (v3 is always gold) */
.btn, body.warm .btn { min-height: 52px; border-radius: 14px; background: linear-gradient(180deg, #E0B05A, #C9963F); color: var(--ink);
  font-size: 17px; font-weight: 600; padding: 15px 16px; margin-top: 20px; box-shadow: 0 8px 26px rgba(212, 160, 74, .3); }
.btn:active { transform: scale(.985); }
.link { font-size: 14.5px; color: var(--fg2); margin-top: 8px; }
.link.toggle { color: var(--fg2); margin-top: 8px; }
.link.toggle[aria-pressed="true"] { color: var(--ink); }
.ghost { border-radius: 14px; border-color: var(--fedge); font-size: 15px; }

/* fields: v3 boxes (label inside, 11.5 px; value 18 px 500), focus = gold edge and ring */
.fields { gap: 10px; margin-top: 18px; }
.fields label, .act1 .f { flex: 1; display: block; background: var(--field); border: 1px solid var(--fedge); border-radius: 12px; padding: 8px 12px;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); cursor: text; }
.fields label.wide { flex: 1.3; }
.fields label:focus-within, .act1 .f:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 74, .35); }
.fields span, .act1 .f > span { font-size: 11.5px; line-height: 1.5; color: var(--fg2); }
/* the input reaches over the label line and into the box padding (negative margins), so the field itself is a 44 px
   target while the box keeps v3's size */
.fields input, .act1 .f input { min-height: 30px; border: 0; border-radius: 0; background: none; margin: -6px 0 -5px; padding: 8px 0 7px; font-size: 18px; font-weight: 500;
  color: var(--ink); text-align: right; box-shadow: none; position: relative; }
.act1 .f input[dir="ltr"] { text-align: left; }
/* the box edge turns gold (v3); the focused input itself also carries a 2 px gold ring around its value, so focus is
   visible on the control a keyboard lands on (WebKit's Option+Tab stops on every field) */
.fields input:focus, .act1 .f input:focus, .fields input:focus-visible, .act1 .f input:focus-visible { outline: none; border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(212, 160, 74, .85); }
::placeholder { color: #6E6577; }
.timebox { align-items: stretch; gap: 10px; margin-top: 18px; }
.timebox .f { flex: 1; }
.seg { gap: 0; padding: 0; border: 1px solid var(--fedge); border-radius: 12px; overflow: hidden; background: none; min-height: 52px; }
.seg button { flex: 1; border-radius: 0; padding: 0 10px; min-width: 58px; font-size: 15px; color: var(--fg2); }
.seg button[aria-checked="true"] { background: rgba(212, 160, 74, .2); color: var(--ink); font-weight: 600; }
.seg button:focus-visible { outline-offset: -3px; }
.seg.need { outline: 2px solid var(--gold); outline-offset: 2px; }
.choices { margin-top: 6px; }
.choice { gap: 12px; min-height: 56px; margin-top: 12px; padding: 0 16px; background: var(--field); border: 1px solid var(--fedge); border-radius: 14px;
  font-size: 17px; color: var(--ink); }
.choice i { width: 20px; height: 20px; border: 1.5px solid var(--fg2); }
.choice[aria-checked="true"] { border-color: var(--gold); }
.choice[aria-checked="true"] i { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 45%, transparent 50%); }
/* the city list (v3 .sugg): white rows on the cloud, hairlines */
#suggest { border: 1px solid var(--fedge); border-radius: 12px; background: rgba(255, 255, 255, .94); }
#suggest li { font-size: 15px; border-bottom: 1px solid var(--fedge); }
#suggest li.sel, #suggest li:hover { background: rgba(212, 160, 74, .14); }
#suggest .co, #suggest .en, #suggest .more { color: var(--fg2); font-size: 13px; }

/* ---- act 2 (reading, themes, how, waitlist): v3 panels and card type */
.act2 { padding: 0 16px calc(40px + var(--safe-b)); }
.blk .lab { font-size: 12px; line-height: 1.5; color: var(--fg2); align-items: baseline; }
.blk .lab > span:first-child { font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.blk .fact { font-size: 19px; line-height: 1.5; font-weight: 500; margin-top: 3px; }
.blk .short { font-size: 15px; line-height: 1.8; color: var(--fg2); margin-top: 4px; }
#intro { font-size: 15.5px; line-height: 1.85; color: var(--ink); margin-top: 0; }
.calc { font-size: 13px; color: var(--fg2); }
.label.rule { display: none; } /* v3 shows the tag on every theme instead (app.js) */
.themes { margin-top: 6px; }
.themes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding: 14px 16px;
  font-size: 16.5px; line-height: 1.5; font-weight: 500; background: var(--field); border: 1px solid var(--fedge); border-radius: 14px; }
.themes li .tag { flex: none; font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--gold-ink); border: 1px solid rgba(212, 160, 74, .45);
  border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.how { margin-top: 6px; }
.how li { padding-inline-start: 38px; font-size: 15.5px; line-height: 1.75; margin-top: 14px; }
.how li::before { top: 0; border-color: rgba(212, 160, 74, .6); color: var(--gold-ink); font-size: 13px; line-height: 24px; }
.price { margin-top: 16px; padding: 12px 16px; border: 1px solid rgba(212, 160, 74, .4); border-radius: 14px; background: rgba(212, 160, 74, .12);
  font-size: 16px; font-weight: 600; color: var(--gold-ink); }
/* waitlist: v3 (label as small text, the email box itself, 13.5 px consents) */
#wait-form .f { margin-top: 12px; }
#wait-form .f > span { font-size: 13px; line-height: 1.75; color: var(--fg2); }
.f input[type="email"] { min-height: 50px; margin-top: 6px; padding: 12px 13px; font-size: 16px; text-align: left; color: var(--ink);
  background: var(--field); border: 1px solid var(--fedge); border-radius: 12px; }
.f input[type="email"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 74, .35); }
.check { font-size: 13.5px; line-height: 1.65; margin-top: 16px; }
.check input { width: 20px; height: 20px; accent-color: #D4A04A; }
.indent { font-size: 12px; margin-inline-start: 32px; }
#t-privacy { font-size: 12px; text-align: center; }
.ok { margin-top: 18px; padding: 11px 14px; font-size: 14px; font-weight: 500; text-align: start; border: 1px solid rgba(143, 165, 138, .55);
  background: rgba(143, 165, 138, .16); border-radius: 12px; }

/* ---- the sky text: reveal line and closing, written on the stars (v3 .skymsg: 17 px / 2, warm glow) */
.skyline { font-size: 17px; line-height: 2; color: #FFF9EC; text-shadow: 0 0 14px rgba(242, 212, 154, .55), 0 0 2px rgba(255, 255, 255, .6), 0 0 12px rgba(0, 0, 0, .45); }
.lines p { font-size: 17px; line-height: 2; margin-top: 10px; color: #FFF9EC;
  text-shadow: 0 0 14px rgba(242, 212, 154, .55), 0 0 2px rgba(255, 255, 255, .6), 0 0 10px rgba(0, 0, 0, .5); }
.lines .ok2 { font-size: 20px; color: #F2D49A; margin-bottom: 12px; }
.lines .sign { font-size: 24px; color: #F2D49A; }

/* reduced transparency: one solid panel under the text (no cloud wisps over the sky) */
@media (prefers-reduced-transparency: reduce) {
  .cloud > .c-core { background: rgb(250, 246, 238); box-shadow: none; border-radius: 24px; }
  .cloud > .c-core::before, .cloud > .c-core::after { display: none; }
}

/* ---------------------------------------------------------------- reduced motion [12] */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .drift, .c-veil, .cloud > .c-core, .cloud > .c-core::before, .cloud > .c-core::after { animation: none !important; }
}