/* quranrehal.com: night, cream and gold, as the app looks after Isha and at noon.
   Devices are Apple's product bezels exactly as provided. Each screen sits in its display, under the bezel, and is
   clipped to the display's own mask (web/tools/prepare.py), so nothing inside can show past the glass. */

@font-face{font-family:"Fraunces"; src:url(/a/fraunces.1a71f8768d.woff2) format("woff2"); font-weight:400 500; font-style:normal; font-display:swap}
@font-face{font-family:"Literata"; src:url(/a/literata.968350cfe8.woff2) format("woff2"); font-weight:400 600; font-style:normal; font-display:swap}
@font-face{font-family:"Literata"; src:url(/a/literata-italic.b6ef116c00.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:"DKMadina"; src:url(/a/dk-madina.c140ae0b54.woff2) format("woff2"); font-display:block}
@font-face{font-family:"DKIndoPak"; src:url(/a/dk-indopak.e94260f8cf.woff2) format("woff2"); font-display:block}
@font-face{font-family:"Naskh"; src:url(/a/naskh.24b0559d94.woff2) format("woff2"); font-weight:400 600; font-display:swap}
@font-face{font-family:"Nastaliq"; src:url(/a/nastaliq.8a47d85348.woff2) format("woff2"); font-display:swap}

:root{
  --night:#07110D; --night-2:#0B1914; --night-3:#10231C; --emerald:#0F4A3C;
  --gold:#C9A35C; --gold-2:#E4C98D; --gold-ink:#86621F;
  --ink:#F3EAD7; --ink-2:rgba(243,234,215,.76); --ink-3:rgba(243,234,215,.6); --line:rgba(243,234,215,.13);
  --cream:#FBF6EB; --cream-2:#F3EADA; --paper:#FFFCF6; --c-ink:#1E2A25; --c-ink-2:#4F5A54; --c-ink-3:#66706A; --c-line:rgba(30,42,37,.12);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Literata",Georgia,serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --read:"Literata","Naskh","Songti SC","Noto Serif CJK SC","Noto Serif SC",Georgia,serif;     /* Arabic inside a translation (ﷺ, quoted words) in Naskh */
  --naskh:"Naskh","Geeza Pro","Noto Naskh Arabic",serif;
  --urdu:"Nastaliq","Naskh","Noto Nastaliq Urdu",serif;
  --digits:"Geeza Pro","SF Arabic","Segoe UI","Noto Naskh Arabic","Naskh",serif;     /* page and ayah numbers: the system's own Arabic numerals first */
  --wrap:1240px; --gut:clamp(16px,4vw,40px); --top-h:60px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:16px}
body{margin:0; background:var(--night); color:var(--ink); font:400 18px/1.62 var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}
img{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:8px; background:var(--gold); color:var(--night); padding:8px 14px; border-radius:8px; font:600 14px var(--ui); z-index:60}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0; font:600 12px/1.2 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.8}
h1,h2,h3{font-family:var(--display); font-weight:450; letter-spacing:-.015em; margin:0; text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,76px); line-height:1.02}
h2{font-size:clamp(34px,4.4vw,58px); line-height:1.05}
h3{font-size:22px; line-height:1.2}
p{margin:0; text-wrap:pretty}
.lead{font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--ink-2)}

/* wide (iPhone Duo) and narrow (iPhone) variants of the same content */
@media (max-width:699px){ .w-only{display:none!important} }
@media (min-width:700px){ .n-only{display:none!important} }

/* ---------- header ---------- */
.top{position:absolute; inset:0 0 auto; z-index:40; height:var(--top-h); border-bottom:1px solid rgba(243,234,215,.07)}     /* scrolls away: never over a device */
.top .wrap{display:flex; align-items:center; gap:24px; height:100%; max-width:1360px}
.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; font:500 20px/1 var(--display); letter-spacing:-.01em; color:var(--ink)}
.brand img{width:28px; height:28px}
.top nav{display:flex; gap:clamp(14px,2.2vw,28px); margin-left:auto; font:500 14px/1 var(--ui); color:var(--ink-2)}
.top nav a{text-decoration:none; padding:6px 0} .top nav a:hover{color:var(--ink)}
.soon-pill{font:600 12.5px/1 var(--ui); color:var(--gold-2); border:1px solid rgba(228,201,141,.38); border-radius:999px; padding:7px 12px; white-space:nowrap}
@media (max-width:860px){ .top nav{display:none} .soon-pill{margin-left:auto} }

/* ---------- the rehal: the design hub's render, full bleed, the headline over its dark top (from 1000 px, where the
   words fit above the rehal); narrower, the words follow the picture, as in the hub. Nothing ever covers the Duo. ---------- */
html.glide{scroll-behavior:smooth}
.rehal{position:relative; background:#060D0A; color:var(--ink); overflow:hidden}
.rehal-fig{position:relative; margin:0}
.rehal-fig img{display:block; width:100%; height:auto}
.rehal-fig .pm{position:absolute; inset:0; opacity:0; transition:opacity .8s ease}
.rehal-fig .pm img{height:100%}
.rehal-fig[data-light="morning"] .pm{opacity:1}
.rehal-fig::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,13,10,.9) 0%,rgba(6,13,10,.68) 19%,rgba(6,13,10,.18) 36%,transparent 46%,transparent 86%,#060D0A 100%)}
.rehal-copy{position:absolute; z-index:2; top:calc(var(--top-h) + clamp(0px,1.1vw,24px)); left:var(--gut); right:var(--gut); display:flex; flex-direction:column; align-items:center; text-align:center}
.rehal h1{font-size:clamp(38px,5.2vw,84px); line-height:1; letter-spacing:-.025em}
.rehal h1 em{font-style:italic; color:#F0B04C}
.rehal .sub{margin-top:clamp(10px,1vw,18px); max-width:34em; font:400 clamp(16px,1.3vw,20px)/1.45 var(--text); color:rgba(243,234,215,.8)}
.rehal-bar{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; margin-top:clamp(14px,1.4vw,24px); max-width:100%}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(243,234,215,.32); border-radius:999px; padding:10px 18px; font:600 14.5px/1 var(--ui); color:var(--ink); text-decoration:none; white-space:nowrap; background:rgba(6,13,10,.35)}
.btn-ghost:hover{border-color:rgba(243,234,215,.6)}
.rehal-soon{position:relative; z-index:2; margin:0; padding:2px var(--gut) clamp(30px,3.4vw,48px); text-align:center}
@media (max-width:999px){
  .rehal{padding-top:var(--top-h)}
  .rehal-copy{position:static; padding:clamp(4px,1.5vw,14px) var(--gut) clamp(16px,3vw,28px)}
  .rehal-fig::after{background:linear-gradient(180deg,#060D0A 0%,transparent 10%,transparent 80%,#060D0A 100%)}
  .rehal-soon{padding-top:4px}
}
@media (max-width:699px){
  .rehal h1{font-size:clamp(34px,10.4vw,44px); line-height:1.04}
  .rehal .sub{font-size:16px; line-height:1.5}
  .rehal-copy{padding-bottom:14px}
}

/* ---------- the app, live ---------- */
.hero::before,.closing::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; background:url(/a/lattice.909abf6f72.svg) 0 0/96px 96px; -webkit-mask-image:radial-gradient(70% 80% at 18% 30%,#000,transparent 75%); mask-image:radial-gradient(70% 80% at 18% 30%,#000,transparent 75%)}
.closing::before{-webkit-mask-image:radial-gradient(50% 70% at 50% 40%,#000,transparent 80%); mask-image:radial-gradient(50% 70% at 50% 40%,#000,transparent 80%); opacity:.06}
.hero > .wrap,.closing > .wrap{position:relative}
.hero{position:relative; overflow:hidden; padding:clamp(48px,6vw,92px) 0 clamp(44px,6vw,80px);
  background:radial-gradient(52% 60% at 70% 48%,rgba(52,128,98,.26),transparent 70%),radial-gradient(90% 70% at 50% 0%,#0E231B 0%,var(--night) 72%)}
.hero .wrap{max-width:1360px}
.hero-grid{display:grid; grid-template-columns:minmax(300px,390px) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:center}
.hero-copy h2{margin-top:20px}
.hero-copy .lead{margin-top:22px; max-width:30em}
.try-it{margin-top:14px; font:500 15px/1.5 var(--ui); color:var(--gold-2)}
.soon{margin-top:26px; font:500 15px/1.5 var(--ui); color:var(--ink-2)}
.soon b{color:var(--ink); font-weight:600}
.soon .dot{margin:0 6px; color:var(--ink-3)}
.hero-stage{display:flex; flex-direction:column; align-items:center; min-width:0}
#hero-duo{width:100%; max-width:820px}
#hero-iphone{width:min(76vw,300px)}
@media (max-width:1099px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy{text-align:center; max-width:660px; margin:0 auto}
  .hero-copy .lead{margin-inline:auto}
}
@media (max-width:699px){
  .hero{padding-top:40px}
  .hero-copy h2{font-size:clamp(31px,8.6vw,40px); margin-top:14px}
  .hero-copy .lead{font-size:16px; line-height:1.55; margin-top:14px}
  .try-it{margin-top:10px}
  .soon{margin-top:10px; font-size:14px}
  .hero-stage{margin-top:-6px}
}

/* the dock: Listen, look, Mushaf, language, close */
.dock{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 14px; margin-top:clamp(18px,2.4vw,26px); max-width:100%}
.dock-a,.dock-b{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px}
.listen{display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; border-radius:999px; padding:9px 20px 9px 9px; font:650 15px/1 var(--ui); color:#241603; background:linear-gradient(180deg,#F2D79D,#D5AA5C); box-shadow:0 10px 28px -14px rgba(228,180,92,.9)}
.listen .ic{width:28px; height:28px; border-radius:50%; background:#1B2A22; display:grid; place-items:center}
.listen svg{width:11px; height:11px; fill:#F2D79D}
.i-pause{display:none} [aria-pressed="true"] .i-play,.playing .i-play{display:none} [aria-pressed="true"] .i-pause,.playing .i-pause{display:block}
.listen:hover{filter:brightness(1.05)}
.listen:disabled{opacity:.55; cursor:default}
.seg{display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background:rgba(243,234,215,.07); border:1px solid var(--line); max-width:100%}
.seg button{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; cursor:pointer; color:var(--ink-2); font:600 13.5px/1 var(--ui); padding:9px 12px; border-radius:999px; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked="true"],.seg button[aria-selected="true"]{background:var(--ink); color:#10201A}
.sw{width:11px; height:11px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sw-fajr{background:linear-gradient(135deg,#FFF7F5,#E9C5CD)} .sw-day{background:linear-gradient(135deg,#FFFDF7,#EADBB8)}
.sw-asr{background:linear-gradient(135deg,#FCF2E1,#E8B877)} .sw-night{background:linear-gradient(135deg,#1E3A2F,#0E1E19); box-shadow:inset 0 0 0 1px rgba(242,178,76,.7)}
.menu{position:relative}
.menu-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--line); background:rgba(243,234,215,.07); color:var(--ink); border-radius:999px; padding:10px 14px; font:600 13.5px/1 var(--ui)}
.menu-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; opacity:.8}
.menu-btn .chev{width:10px; height:10px; stroke-width:1.6}
.langs{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; margin-top:14px; max-width:640px}
.langs[hidden]{display:none}
.langs button{border:1px solid var(--line); background:rgba(243,234,215,.05); color:var(--ink-2); cursor:pointer; border-radius:999px; padding:8px 15px; font:600 14px/1.2 var(--ui); animation:fadein .3s ease both}
.langs button:hover{color:var(--ink); background:rgba(243,234,215,.1)}
.langs button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#10201A}
.langs [lang="ar"],.langs [lang="ur"]{font-family:"Geeza Pro","Segoe UI",var(--ui); font-size:15px}
.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fold{display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:1px solid var(--line); background:rgba(243,234,215,.07); color:var(--ink); border-radius:999px; padding:9px 15px 9px 12px; font:600 13.5px/1 var(--ui)}
.fold svg{width:20px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4}
.fold .f-l{transition:transform .5s cubic-bezier(.3,.8,.3,1); transform-origin:10px 7px}
.fold[aria-pressed="true"] .f-l{transform:translateX(10px)}
.fold:hover,.menu-btn:hover{background:rgba(243,234,215,.12)}
.hint{margin-top:14px; min-height:1.5em; font:500 14px/1.5 var(--ui); color:var(--ink-3); text-align:center; max-width:40em}
@media (max-width:699px){
  .dock{gap:10px}
  .dock .seg button{padding:9px 10px; font-size:13px}
  .listen{order:-2}
}

/* ---------- devices: Apple's bezels, the screen beneath, clipped to the display ---------- */
.dev{position:relative; display:block; margin:0; -webkit-tap-highlight-color:transparent}
.dev-duo{aspect-ratio:3093/2247}
.dev-iphone{aspect-ratio:1470/3000}
.dev-ipad{aspect-ratio:3000/2300}
.dev-cover{aspect-ratio:1574/2194}
.dv{position:absolute; inset:0; isolation:isolate; transition:opacity .5s ease}
.dm{position:absolute; inset:0; z-index:1; overflow:hidden; isolation:isolate; background:var(--pg,#0E1E19);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%}
.bz{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none}
.scr{position:absolute; overflow:hidden; container-type:size; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation}
.dev-duo .dv-open .dm{-webkit-mask-image:url(/a/mask-duo-open.f20f83e1e6.png); mask-image:url(/a/mask-duo-open.f20f83e1e6.png)}
.dev-duo .dv-open .scr{left:3.8797%; top:5.3405%; width:92.2405%; height:89.3191%}
.dev-duo .dv-closed{inset:auto; left:25.0242%; top:1.1571%; width:50.8891%; height:97.6413%; display:none; opacity:0}
.dev-duo .dv-closed .dm,.dev-cover .dm{-webkit-mask-image:url(/a/mask-duo-closed.a7d89b01a8.png); mask-image:url(/a/mask-duo-closed.a7d89b01a8.png)}
.dev-duo .dv-closed .scr,.dev-cover .scr{left:5.5909%; top:3.6463%; width:88.8183%; height:92.7074%}
.dev-iphone .dm{-webkit-mask-image:url(/a/mask-iphone.21d48df17b.png); mask-image:url(/a/mask-iphone.21d48df17b.png)}
.dev-iphone .scr{left:5.102%; top:2.2%; width:89.7959%; height:95.6%}
.dev-ipad .dm{-webkit-mask-image:url(/a/mask-ipad.0abcb10d80.png); mask-image:url(/a/mask-ipad.0abcb10d80.png)}
.dev-ipad .scr{left:4.1333%; top:5.1304%; width:91.7333%; height:89.7391%}
/* closing iPhone Duo: a crossfade from the open bezel to the closed one, both at the same scale */
.dev-duo.can-close .dv-closed{display:block}
.dev-duo .dv-open,.dev-duo .dv-closed{transition:opacity .7s ease}
.dev-duo.closed .dv-open{opacity:0; pointer-events:none}
.dev-duo.closed .dv-closed{opacity:1}
/* a device fades in once its bezel is there, so a screen never shows without its frame */
.dev .dv-open{opacity:0}
.dev.ready.drawn .dv-open{opacity:1}
.dev-duo.ready.closed .dv-open{opacity:0}

/* ---------- the app's looks (app/Looks/Look.swift) ---------- */
.look-day  {--pg:#FBF6EB; --pg-2:#FFFDF7; --pg-ink:#1C1B17; --pg-soft:#777163; --pg-line:rgba(28,27,23,.10); --pg-acc:#C9851F; --pg-acc-ink:#8F5E16; --pg-on-acc:#1C1B17; --pg-glow:rgba(232,166,60,.55); --pg-hl:rgba(232,166,60,.20); --pg-mark:#0F4A3C; --sheet:#FFFCF6; --bub:#10241D; --bub-ink:#F4EBD8; --bub-acc:#E9B35A}
.look-night{--pg:#0E1E19; --pg-2:#14291F; --pg-ink:#FBF2DE; --pg-soft:#9EA397; --pg-line:rgba(240,230,208,.10); --pg-acc:#F2B24C; --pg-acc-ink:#F2B24C; --pg-on-acc:#0E1E19; --pg-glow:rgba(242,178,76,.75); --pg-hl:rgba(242,178,76,.16); --pg-mark:#F2B24C; --sheet:#152B23; --bub:#F6EEDC; --bub-ink:#14291F; --bub-acc:#A86A12}
.look-fajr {--pg:#F6EDEE; --pg-2:#FFF7F5; --pg-ink:#2A1F24; --pg-soft:#786870; --pg-line:rgba(42,31,36,.10); --pg-acc:#C2667A; --pg-acc-ink:#A34156; --pg-on-acc:#1A1216; --pg-glow:rgba(214,120,140,.5); --pg-hl:rgba(214,120,140,.18); --pg-mark:#7A4A6A; --sheet:#FFF8F7; --bub:#2A1F24; --bub-ink:#FBEFF0; --bub-acc:#F0A4B4}
.look-asr  {--pg:#F6E7CF; --pg-2:#FCF2E1; --pg-ink:#2B2114; --pg-soft:#79664D; --pg-line:rgba(43,33,20,.11); --pg-acc:#C9701F; --pg-acc-ink:#8E4F16; --pg-on-acc:#1C140A; --pg-glow:rgba(222,128,40,.5); --pg-hl:rgba(222,128,40,.18); --pg-mark:#8A4B12; --sheet:#FFF6E8; --bub:#2B2114; --bub-ink:#FBF1E0; --bub-acc:#F0B060}

/* ---------- the app's screens (pt = one point of iPhone Duo's half display, 475.5 x 669) ---------- */
.app{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr); background:var(--pg)}
.app.spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pane{position:relative; overflow:hidden; container-type:size; background:var(--pg)}
.spread .pane:first-child::after,.spread .pane:last-child::after{content:""; position:absolute; top:0; bottom:0; width:6%; pointer-events:none; z-index:4}
.spread .pane:first-child::after{right:0; background:linear-gradient(90deg,transparent,rgba(60,40,10,.05) 70%,rgba(60,40,10,.11))}
.spread .pane:last-child::after{left:0; background:linear-gradient(90deg,rgba(60,40,10,.10),rgba(60,40,10,.03) 30%,transparent)}
.look-night .spread .pane:first-child::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.10) 70%,rgba(0,0,0,.22))}
.look-night .spread .pane:last-child::after{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.06) 30%,transparent)}
.pg,.rc,.sheet,.bub,.pill{--pt:min(calc(100cqw / 475.5), calc(100cqh / 669))}
.pg,.rc{position:absolute; inset:0}
.fadein{animation:fadein .55s ease both}
@keyframes fadein{from{opacity:0} to{opacity:1}}

.pg{background:radial-gradient(ellipse 85% 70% at 50% 46%,var(--pg-2),var(--pg) 75%); color:var(--pg-ink); display:flex; flex-direction:column; padding:calc(var(--pt)*42) calc(var(--pt)*28) calc(var(--pt)*22)}
.single .pg{padding-top:7.2cqh; padding-bottom:4.4cqh}
.pg .ttl,.pg .pnum{text-align:center; font:calc(var(--pt)*13)/1.5 "DKMadina",serif; color:var(--pg-soft); direction:rtl}
.pg .pnum{font:calc(var(--pt)*12)/1.5 var(--digits)}
.cart{margin:calc(var(--pt)*8) auto 0; width:80%; height:calc(var(--pt)*36); border-radius:999px; border:1px solid color-mix(in srgb,var(--pg-acc) 55%,transparent); display:flex; align-items:center; justify-content:center; gap:calc(var(--pt)*12); font:calc(var(--pt)*15)/1 "DKMadina",serif; color:var(--pg-ink); direction:rtl;
  background:linear-gradient(90deg,transparent,var(--pg-hl) 30%,var(--pg-hl) 70%,transparent)}
.cart i{width:calc(var(--pt)*6); height:calc(var(--pt)*6); border-radius:50%; background:var(--pg-acc); opacity:.8}
.lines{flex:1; display:flex; flex-direction:column; justify-content:center; gap:calc(var(--pt)*3)}
.ln{display:flex; justify-content:center; align-items:center; direction:rtl; white-space:nowrap; line-height:1.8; color:var(--pg-ink)}
.lay-madinah{--wgap:calc(var(--pt)*4.5)} .lay-indopak{--wgap:calc(var(--pt)*5)}
.lay-madinah .ln{font-family:"DKMadina",serif; font-size:calc(var(--pt)*24.5); gap:var(--wgap)}
.lay-indopak .ln{font-family:"DKIndoPak",serif; font-size:calc(var(--pt)*25); gap:var(--wgap)}
.look-night .ln{-webkit-text-stroke:calc(var(--pt)*.35) currentColor}
.mw{display:inline-block; padding:0 calc(var(--pt)*1.5); border-radius:calc(var(--pt)*7); cursor:pointer; transition:color .3s, text-shadow .3s, background .3s, transform .35s}
.mw.sel{--band:color-mix(in srgb,var(--pg-acc) 17%,var(--pg)); background:var(--band); box-shadow:calc(var(--wgap) / 2 + .5px) 0 0 0 var(--band),calc(var(--wgap) / -2 - .5px) 0 0 0 var(--band); border-radius:0}
.look-night .mw.sel{--band:color-mix(in srgb,var(--pg-acc) 15%,var(--pg))}
.mw.on{color:var(--pg-acc); text-shadow:0 0 calc(var(--pt)*12) var(--pg-glow)}
.mw.lift{transform:scale(1.2); color:var(--pg-acc)}
.mk{color:var(--pg-mark); cursor:pointer; border-radius:40%}
.mk:focus-visible{outline:calc(var(--pt)*2) solid var(--pg-acc); outline-offset:calc(var(--pt)*1)}

/* the listening view: the recited ayah, large, with its meaning, on the facing page */
.rc{background:radial-gradient(ellipse 85% 70% at 50% 42%,var(--pg-2),var(--pg) 75%); color:var(--pg-ink); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:calc(var(--pt)*48) calc(var(--pt)*38) calc(var(--pt)*70); cursor:pointer}
.rc .in{display:flex; flex-direction:column; align-items:center; max-height:100%}
.ros{width:calc(var(--pt)*34); height:calc(var(--pt)*34); border-radius:50%; border:1px solid var(--pg-acc); display:grid; place-items:center; font:calc(var(--pt)*14)/1 var(--digits); color:var(--pg-acc-ink); position:relative; flex:none; padding-top:calc(var(--pt)*1.5)}
.ros::before{content:""; position:absolute; inset:calc(var(--pt)*-5); border-radius:50%; border:1px dashed color-mix(in srgb,var(--pg-acc) 45%,transparent)}
.rc .ra{font-family:"DKMadina",serif; direction:rtl; font-size:calc(var(--pt)*27); line-height:1.85; margin-top:calc(var(--pt)*16)}
.rc .rt{font-family:var(--read); font-size:calc(var(--pt)*21); line-height:1.34; margin-top:calc(var(--pt)*12); text-wrap:pretty}
.rc .rf{font-family:var(--read); font-size:calc(var(--pt)*13.4); line-height:1.55; color:var(--pg-soft); margin-top:calc(var(--pt)*14); display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; text-wrap:pretty}
.rc .note{font-family:var(--read); font-size:calc(var(--pt)*11.8); line-height:1.5; color:var(--pg-soft); margin-top:calc(var(--pt)*12); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.rc .st{position:absolute; left:calc(var(--pt)*20); right:calc(var(--pt)*20); bottom:calc(var(--pt)*20); text-align:center; font:500 calc(var(--pt)*9.5)/1.3 var(--ui); color:var(--pg-soft)}
.single .rc{padding-top:9cqh}
.fn{font-size:.62em; vertical-align:.45em; line-height:0; color:var(--pg-acc-ink); font-weight:600; padding:0 .08em}
.vn{opacity:.55; font-variant-numeric:tabular-nums}
.t-ar .rf,.t-ar .lead-ar{font-family:var(--naskh); line-height:1.85}
.t-ur .rt,.t-ur .stt,.t-ur .note,.t-ur .nt{font-family:var(--urdu); line-height:2.15}
.t-ur .rt{font-size:calc(var(--pt)*18)}
.t-zh .rt,.t-zh .rf,.t-zh .stt,.t-zh .stf,.t-zh .nt{line-break:strict; word-break:normal}

/* the meaning sheet (MeaningSheet): over the facing page, 160 pt from its top (on an iPhone it rises to 44%);
   swiped up, 40 pt from the top. Its glass is the look's sheet colour. */
.sheet{position:absolute; left:calc(var(--pt)*10); right:calc(var(--pt)*10); bottom:0; top:calc(var(--pt)*160); z-index:5; display:flex; flex-direction:column;
  border-radius:calc(var(--pt)*30) calc(var(--pt)*30) 0 0; background:var(--sheet);
  box-shadow:0 max(0px,calc(-1*var(--drag,0px))) 0 0 var(--sheet),0 calc(var(--pt)*-2) calc(var(--pt)*24) rgba(0,0,0,.12),0 0 0 1px var(--pg-line); color:var(--pg-ink);
  transform:translateY(104%); transition:transform .62s cubic-bezier(.2,.9,.15,1), top .5s cubic-bezier(.2,.9,.15,1); cursor:grab; overflow:hidden; outline-offset:-3px}
.look-night .sheet{box-shadow:0 max(0px,calc(-1*var(--drag,0px))) 0 0 var(--sheet),0 calc(var(--pt)*-2) calc(var(--pt)*24) rgba(0,0,0,.4),0 0 0 1px var(--pg-line)}
.sheet.on{transform:translateY(var(--drag,0px))}             /* --drag: the finger, while the sheet follows it (lifted, its colour fills below) */
.sheet.drag{transition:none; cursor:grabbing}
.sheet,.sheet *{touch-action:none}                              /* the meaning takes the swipe, as in the app */
.sheet.full .body,.sheet.full .body *{touch-action:pan-y}       /* an open tafsir scrolls by itself */
.sheet.full{top:calc(var(--pt)*40)}
.single .sheet{--pt:calc(100cqw / 440); top:max(calc(var(--pt)*160),44%)}
.single .sheet.full{top:12%}
.sheet .grab{flex:none; width:calc(var(--pt)*38); height:calc(var(--pt)*5); border-radius:9px; background:var(--pg-soft); opacity:.45; margin:calc(var(--pt)*12) auto calc(var(--pt)*14)}
button.grab{display:block; border:0; padding:0; cursor:pointer; position:relative}
button.grab::before{content:""; position:absolute; inset:calc(var(--pt)*-12) calc(var(--pt)*-40)}     /* a larger target than the bar */
button.grab:focus-visible{outline:2px solid var(--pg-acc); outline-offset:calc(var(--pt)*6); opacity:1}
.sheet .body{flex:1; min-height:0; overflow:hidden; padding:0 calc(var(--pt)*24) calc(var(--pt)*40)}
.sheet:not(.full) .body{padding-bottom:0; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--pt)*28),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - var(--pt)*28),transparent)}
.sheet.full .body{overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none}
.sheet.full .body::-webkit-scrollbar{display:none}
.sheet .sh{display:flex; align-items:center; gap:calc(var(--pt)*10); font:600 calc(var(--pt)*10.5)/1.3 var(--ui); color:var(--pg-soft)}
.sheet .sh .ros{width:calc(var(--pt)*26); height:calc(var(--pt)*26); font-size:calc(var(--pt)*11)}
.sheet .sh .ros::before{inset:calc(var(--pt)*-4)}
.sheet .stt{font-family:var(--read); font-size:calc(var(--pt)*20); line-height:1.36; margin-top:calc(var(--pt)*14); text-wrap:pretty}
.sheet .stt.lead-ar{font-size:calc(var(--pt)*19); line-height:1.85}
.sheet .stf{font-family:var(--read); font-size:calc(var(--pt)*13.2); line-height:1.55; color:var(--pg-soft); margin-top:calc(var(--pt)*12)}
.sheet .lg{font-family:var(--naskh); font-size:calc(var(--pt)*15); line-height:1.9; margin-top:16px}
.sheet .nt{font-family:var(--read); font-size:calc(var(--pt)*12.4); line-height:1.55; color:var(--pg-soft); margin-top:calc(var(--pt)*12)}
.sheet.full .nt{margin-top:calc(var(--pt)*14)}
.sheet:not(.full) .lg,.sheet:not(.full) .nt.later{display:none}
.sheet .acts{display:flex; gap:calc(var(--pt)*10); margin-top:calc(var(--pt)*20)}
/* ActionChip: 40 pt, never smaller in a large device; in a small one at least 32 px to touch, but never so large that
   the five leave the sheet (a fifth of the row, less the gaps) */
.ac{flex:none; width:max(calc(var(--pt)*40),min(32px,calc((100% - var(--pt)*40)/5))); height:auto; aspect-ratio:1; border-radius:50%; border:1px solid color-mix(in srgb,var(--pg-acc) 35%,transparent);
  background:var(--pg-hl); display:grid; place-items:center; cursor:pointer; padding:0; color:var(--pg-acc-ink)}
.ac svg{width:44%; height:44%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ac svg .f{fill:currentColor; stroke:none}
.ac.on svg path{fill:currentColor}
.ac:focus-visible{outline:2px solid var(--pg-acc); outline-offset:2px}
.sheet .sfoot{flex:none; padding:calc(var(--pt)*4) 0 calc(var(--pt)*14); text-align:center; font:600 calc(var(--pt)*9.5)/1.3 var(--ui); color:var(--pg-soft)}
.sheet.full .sfoot{display:none}
.sheet.t-ur .stt{font-size:calc(var(--pt)*17.5); line-height:2.2}
.sheet.t-ur .nt{font-size:calc(var(--pt)*13); line-height:2.1}

/* hold a word (WordBubble): the word again, large, in the Mushaf's letters; where it is; whose voice recites it */
.app.spread > .bub{--pt:min(calc(100cqw / 951), calc(100cqh / 669))}
.app.single > .bub{--pt:calc(100cqw / 440)}
.bub{position:absolute; z-index:7; left:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-100%) scale(.9); transform-origin:50% 100%; opacity:0; pointer-events:none;
  transition:opacity .22s, transform .32s cubic-bezier(.2,.9,.2,1.2); background:#10241D; color:#F4EBD8; border-radius:calc(var(--pt)*16);
  padding:calc(var(--pt)*8) calc(var(--pt)*18) calc(var(--pt)*12); box-shadow:0 calc(var(--pt)*6) calc(var(--pt)*16) rgba(0,0,0,.3); text-align:center; white-space:nowrap}
.bub.on{opacity:1; transform:translate(-50%,-100%) scale(1)}
.bub::after{content:""; position:absolute; left:50%; bottom:calc(var(--pt)*-6); width:calc(var(--pt)*14); height:calc(var(--pt)*7); background:#10241D; transform:translateX(-50%); clip-path:polygon(0 0,100% 0,50% 100%)}
.bub .bw{display:block; height:calc(var(--pt)*50); font-size:calc(var(--pt)*30); line-height:calc(var(--pt)*50); font-weight:400; color:#F4EBD8}
.bub .bw.lay-madinah{font-family:"DKMadina",serif} .bub .bw.lay-indopak{font-family:"DKIndoPak",serif}
.bub i{display:block; margin-top:calc(var(--pt)*5); font:500 calc(var(--pt)*11)/1.3 var(--ui); font-style:normal; color:#E9B35A}
.bub > span{display:flex; align-items:center; justify-content:center; gap:calc(var(--pt)*5); margin-top:calc(var(--pt)*5); font:600 calc(var(--pt)*10)/1.3 var(--ui); color:rgba(244,235,216,.62)}
.bub em{display:grid; place-items:center; width:calc(var(--pt)*11); height:calc(var(--pt)*11); color:#E9B35A}
.bub em svg{width:100%; height:100%; fill:currentColor}
.bub em svg .w{fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round}

/* the cover screen (iPhone Duo, closed): 466 pt wide */
.oc{position:absolute; inset:0; background:radial-gradient(ellipse 85% 70% at 50% 45%,var(--pg-2),var(--pg) 75%); --pt:calc(100cqw / 466)}
.oc .pg{--pt:calc(100cqw / 466); background:none; padding:calc(var(--pt)*64) calc(var(--pt)*24) calc(var(--pt)*104)}
.pill{--pt:calc(100cqw / 466); position:absolute; left:50%; bottom:calc(var(--pt)*34); transform:translateX(-50%); display:flex; align-items:center; gap:calc(var(--pt)*12); padding:calc(var(--pt)*9) calc(var(--pt)*9) calc(var(--pt)*9) calc(var(--pt)*20); border-radius:999px;
  background:color-mix(in srgb,var(--pg-2) 70%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--pg-line); box-shadow:0 calc(var(--pt)*10) calc(var(--pt)*28) rgba(0,0,0,.16);
  font:600 calc(var(--pt)*15)/1 var(--ui); color:var(--pg-ink); white-space:nowrap; z-index:6}
.pill .pp{width:calc(var(--pt)*38); height:calc(var(--pt)*38); border-radius:50%; background:var(--pg-acc); display:grid; place-items:center; cursor:pointer; border:0; padding:0}
.pill .pp svg{width:36%; height:36%; fill:var(--pg-on-acc)}
.pill[dir="rtl"]{padding:calc(var(--pt)*9) calc(var(--pt)*20) calc(var(--pt)*9) calc(var(--pt)*9)}
.pill[lang="ar"] span,.pill[lang="ur"] span{font-family:var(--naskh)}
.single .pill{bottom:calc(var(--pt)*48); z-index:6}
.single .pane:has(> .pill) .sheet .body{margin-bottom:calc(100cqw / 466 * 112)}     /* the meaning stays clear of the pill */
.single .pane:has(> .pill) .sheet .sfoot{display:none}
.pill.rise{animation:rise .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes rise{from{opacity:0; transform:translate(-50%,40%)} to{opacity:1; transform:translateX(-50%)}}
.cover-page{position:absolute; inset:0}
.chint{--pt:calc(100cqw / 466); position:absolute; left:50%; top:calc(var(--pt)*54); transform:translate(-50%,-30%); opacity:0; z-index:7; pointer-events:none; white-space:nowrap;
  padding:calc(var(--pt)*9) calc(var(--pt)*16); border-radius:999px; background:color-mix(in srgb,var(--pg-2) 88%,transparent); border:1px solid var(--pg-line);
  font:600 calc(var(--pt)*12)/1.2 var(--ui); color:var(--pg-ink); transition:opacity .3s, transform .4s cubic-bezier(.2,.9,.2,1)}
.chint.on{opacity:1; transform:translate(-50%,0)}

/* a touch, as screen recordings show it: inside the display, never over the device */
.touch{position:absolute; z-index:20; left:0; top:0; width:var(--ts); height:var(--ts); margin:calc(var(--ts) / -2) 0 0 calc(var(--ts) / -2); border-radius:50%;
  background:rgba(255,255,255,.42); box-shadow:0 0 0 2px rgba(255,255,255,.7),0 4px 14px rgba(0,0,0,.22); opacity:0; transform:scale(.6); pointer-events:none; transition:opacity .22s, transform .3s}
.touch.on{opacity:1; transform:scale(1)}
.touch.hold::after{content:""; position:absolute; inset:-28%; border-radius:50%; border:2px solid rgba(255,255,255,.8); animation:ring 1s ease-out infinite}
.touch.glide{transition:opacity .22s, transform .3s, top .85s cubic-bezier(.3,.8,.3,1)}
@keyframes ring{from{transform:scale(.7); opacity:1} to{transform:scale(1.35); opacity:0}}
.dev-duo .scr{--ts:6.4cqh} .dev-iphone .scr{--ts:10cqw} .dev-cover .scr,.dv-closed .scr{--ts:9.5cqw} .dev-ipad .scr{--ts:6.4cqh}

/* ---------- sections ---------- */
.sec{position:relative; padding:clamp(76px,10vw,136px) 0}
.sec-h{max-width:780px; margin:0 auto clamp(36px,5vw,60px); text-align:center}
.sec-h .eyebrow{justify-content:center}
.sec-h h2{margin-top:16px}
.sec-h .sub{margin:18px auto 0; font-size:clamp(17px,1.5vw,19.5px); line-height:1.6; max-width:38em}
.touches,.everywhere,.inside{background:var(--cream); color:var(--c-ink)}
.touches .sub,.everywhere .sub,.inside .sub{color:var(--c-ink-2)}
.touches .eyebrow,.everywhere .eyebrow,.inside .eyebrow{color:var(--gold-ink)}
.looks-sec,.calm{background:linear-gradient(180deg,var(--night-2),var(--night))}
.looks-sec .sub,.calm .sub{color:var(--ink-2)}

/* five touches */
.story{display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.step{position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; width:100%; text-align:left; padding:14px 16px 18px 14px; border:0; border-radius:18px; background:transparent; cursor:pointer; color:var(--c-ink); overflow:hidden}
.step:hover{background:rgba(30,42,37,.04)}
.step .no{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:500 15px/1 var(--display); border:1px solid var(--c-line); color:var(--c-ink-2); margin-top:-2px}
.step .tx b{display:block; font:500 21px/1.2 var(--display); letter-spacing:-.01em}
.step .tx span{display:block; margin-top:4px; font:400 15px/1.5 var(--ui); color:var(--c-ink-2)}
.step .bar{position:absolute; left:60px; right:18px; bottom:8px; height:3px; border-radius:3px; background:var(--c-line); overflow:hidden; opacity:0}
.step .bar i{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); background:#C9851F}
.step[aria-pressed="true"]{background:#F5E9D2}
.step[aria-pressed="true"] .no{background:#C9851F; border-color:#C9851F; color:#1C1B17}
.step[aria-pressed="true"] .bar{opacity:1}
.step.run .bar i{animation:fill var(--dur,6s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.story-stage{position:relative; display:flex; flex-direction:column; align-items:center; padding:clamp(20px,3vw,36px); border-radius:28px; background:radial-gradient(80% 70% at 50% 55%,#FFFAF0,#EFE3CC)}
.story-stage .dev-duo{width:100%; max-width:700px}
.story-cap{display:none}
.story-narrow{--mm:calc(min(64vw,250px) / 81.18); display:grid; place-items:center; width:100%}
.story-narrow > .dev{grid-area:1/1; transition:opacity .7s ease}
#story-iphone{width:calc(var(--mm) * 81.18)}
#story-cover{width:calc(var(--mm) * 86.72); opacity:0}
.story-narrow.closed #story-iphone{opacity:0}
.story-narrow.closed #story-cover{opacity:1}
@media (max-width:1099px){
  .story{grid-template-columns:minmax(0,1fr)}
  .steps{order:2; max-width:640px; width:100%; margin:0 auto}
}
@media (max-width:699px){
  .steps{gap:2px}
  .step{padding:11px 12px 14px 10px}
  .step .tx b{font-size:18.5px}
  .step:not([aria-pressed="true"]) .tx span{display:none}
  .story-stage{padding:22px 12px; border-radius:22px}
}

/* looks */
.looks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,26px); max-width:1080px; margin:0 auto}
.look{margin:0; text-align:center}
.pagecard{position:relative; aspect-ratio:475.5/669; border-radius:16px; overflow:hidden; container-type:size; background:var(--pg); box-shadow:0 26px 50px -30px rgba(0,0,0,.8),0 0 0 1px rgba(243,234,215,.08)}
.look figcaption{margin-top:14px}
.look figcaption b{display:block; font:500 21px/1.2 var(--display)}
.look figcaption span{display:block; margin-top:3px; font:400 13.5px/1.4 var(--ui); color:var(--ink-3)}
.mushaf-pick{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(30px,4vw,48px); text-align:center}
.mushaf-pick p{font:400 15px/1.5 var(--ui); color:var(--ink-3)}
@media (max-width:899px){ .looks{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px} }

/* one design, everywhere: true relative size (iPad Pro 13" 281.6 mm wide; iPhone 18 Pro Max 163.4 mm tall) */
.family{--mm:min(2.62px, calc((100vw - 2 * var(--gut) - 72px) / 368.65)); display:flex; justify-content:center; align-items:flex-end; gap:clamp(28px,4vw,72px)}
.fam{margin:0; display:flex; flex-direction:column; align-items:center}
.fam-ipad .dev{width:calc(var(--mm) * 287.46)}
.fam-iphone .dev{width:calc(var(--mm) * 81.18)}
.fam figcaption{margin-top:18px; max-width:24em; text-align:center; font:400 14.5px/1.5 var(--ui); color:var(--c-ink-2)}
.fam figcaption b{display:block; font:500 19px/1.2 var(--display); color:var(--c-ink); margin-bottom:4px}
.fam-tabs{display:flex; width:max-content; margin:0 auto 26px}
/* Side by side from 900 px: below it the iPhone, at true size beside the iPad, would be too small to touch (its five
   action chips need 24 px each), so the two take turns */
@media (min-width:900px){ .fam-tabs{display:none} }
@media (max-width:899px){
  .family{display:block}
  .fam-ipad .dev{width:100%}
  .fam-iphone .dev{width:min(66vw,260px)}
  .family[data-show="iphone"] .fam-ipad,.family[data-show="ipad"] .fam-iphone{display:none}
}
.seg-light{background:rgba(30,42,37,.05); border-color:var(--c-line)}
.seg-light button{color:var(--c-ink-2)}
.seg-light button:hover{color:var(--c-ink)}
.seg-light button[aria-checked="true"],.seg-light button[aria-selected="true"]{background:var(--emerald); color:#FBF6EB}
.looks-sec .seg-light{background:rgba(243,234,215,.07); border-color:var(--line)}
.looks-sec .seg-light button{color:var(--ink-2)}
.looks-sec .seg-light button[aria-checked="true"]{background:var(--ink); color:#10201A}

/* calm from the first second: the app's own screens, one at a time (no status bar: the app reads full-screen) */
.calm-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; max-width:1020px; margin:0 auto}
.calm-stage{display:flex; justify-content:center}
#calm-iphone{width:min(320px,72vw)}
#calm-screens .ui{opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s .6s}
#calm-screens .ui.on{opacity:1; visibility:visible; transition:opacity .6s ease}
.calm-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.cstep{position:relative; display:block; width:100%; text-align:left; padding:16px 20px 18px; border:0; border-radius:18px; background:transparent; color:var(--ink); cursor:pointer; overflow:hidden}
.cstep:hover{background:rgba(243,234,215,.04)}
.cstep b{display:block; font:500 22px/1.2 var(--display); letter-spacing:-.01em}
.cstep span{display:block; margin-top:5px; font:400 15.5px/1.5 var(--ui); color:var(--ink-3)}
.cstep[aria-pressed="true"]{background:rgba(243,234,215,.07); box-shadow:inset 0 0 0 1px var(--line)}
.cstep[aria-pressed="true"] span{color:var(--ink-2)}
.cstep::after{content:""; position:absolute; left:20px; right:20px; bottom:8px; height:2px; border-radius:2px; background:var(--gold); transform-origin:0 50%; transform:scaleX(0); opacity:0}
.cstep.run::after{opacity:.8; animation:fill var(--dur,4.6s) linear forwards}
@media (max-width:860px){ .calm-grid{grid-template-columns:minmax(0,1fr)} .calm-list{max-width:560px; width:100%; margin:0 auto} }
@media (max-width:699px){ .cstep{padding:12px 16px 14px} .cstep b{font-size:19px} .cstep:not([aria-pressed="true"]) span{display:none} }
.ui{position:absolute; inset:0; background:var(--pg); color:var(--pg-ink); font-family:var(--ui); padding-top:7.4cqh; overflow:hidden}
.ui-title{font:500 8.4cqw/1.1 var(--display); letter-spacing:-.01em; padding:0 7cqw; margin-top:2.4cqh; color:var(--pg-ink)}
.ui-lead{padding:0 7cqw; margin-top:1.4cqh; font-size:4cqw; line-height:1.42; color:var(--pg-soft)}
.ui-hdr{padding:3cqh 8cqw .9cqh; font-size:3.1cqw; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--pg-soft)}
.ui-pick{display:grid; grid-template-columns:1fr 1fr; gap:3.6cqw; padding:.6cqh 7cqw 0}
.ui-pick .opt{border-radius:4cqw; overflow:hidden; background:var(--pg-2); box-shadow:0 0 0 1px var(--pg-line)}
.ui-pick .opt.on{box-shadow:0 0 0 .7cqw var(--pg-acc)}
.ui-pick .thumb{position:relative; height:30cqh; container-type:size; overflow:hidden; pointer-events:none}
.ui-pick .opt b{display:block; padding:1.2cqh 3cqw 1.4cqh; font-size:3.3cqw; font-weight:600; white-space:nowrap}
.ui-note{padding:2.4cqh 7cqw 0; font-size:3.6cqw; color:var(--pg-soft)}
.ui-btn{position:absolute; left:7cqw; right:7cqw; bottom:5.6cqh; height:6.2cqh; border-radius:99px; background:var(--pg-acc); color:var(--pg-on-acc); display:grid; place-items:center; font:600 4.3cqw var(--ui)}
.ui-nav{display:flex; flex-direction:column; align-items:flex-start; gap:.6cqh; padding:1cqh 6cqw 0}
.ui-nav span{color:var(--pg-acc); font:500 4cqw var(--ui)}
.ui-nav b{font:500 7.4cqw/1.12 var(--display); letter-spacing:-.01em; padding-top:.4cqh}
.ui-grp{margin:1.2cqh 5cqw 0; background:var(--pg-2); border-radius:4.2cqw; overflow:hidden; box-shadow:0 0 0 1px var(--pg-line)}
.ui-nav + .ui-grp{margin-top:2.8cqh}
.ui-row{display:flex; align-items:center; gap:3cqw; min-height:4.6cqh; padding:1.1cqh 4.6cqw; font-size:3.9cqw; line-height:1.25; border-top:1px solid var(--pg-line)}
.ui-row:first-child{border-top:0}
.ui-row .t{flex:1; min-width:0}
.ui-row .t small{display:block; margin-top:.4cqh; font-size:3.3cqw; line-height:1.3; color:var(--pg-soft)}
.ui-row .ck{display:grid; place-items:center; width:4.6cqw; height:4.6cqw; color:var(--pg-acc-ink)}
.ui-row .ck svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ui-row .dl{display:flex; align-items:center; gap:1cqw; font-size:2.9cqw; color:var(--pg-acc-ink); white-space:nowrap}
.ui-row .dl svg{width:4.8cqw; height:4.8cqw; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.ui-row .v{color:var(--pg-soft)}
.ui-list .ui-grp + .ui-hdr{padding-top:2.6cqh}
.ui-list .ui-grp + .ui-grp{margin-top:2.6cqh}
.ui-foot{padding:1.4cqh 8cqw; font-size:3.3cqw; line-height:1.4; color:var(--pg-soft)}
.ui-launch{padding:0}
.launch-page{position:absolute; inset:0; opacity:0}
.launch-page .pane{position:absolute; inset:0}
.ui-launch.on .launch-page{animation:launch 1.9s ease forwards}
@keyframes launch{0%,45%{opacity:0} 100%{opacity:1}}

/* everything inside */
.langs-cloud{max-width:980px; margin:0 auto clamp(36px,4.6vw,56px); text-align:center}
.lc-h{font:600 12px/1.2 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.lc{margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font:400 clamp(16px,1.5vw,19px)/1.55 var(--ui); color:var(--c-ink-2)}
.lc span{white-space:nowrap}
.lc span:nth-child(4n+1){color:var(--c-ink)}

.feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px)}
.feat{padding:26px 26px 22px; border-radius:22px; background:var(--paper); box-shadow:0 0 0 1px var(--c-line),0 24px 46px -36px rgba(40,30,10,.5)}
.feat h3{display:flex; align-items:center; gap:12px; font-size:24px}
.feat h3 svg{width:26px; height:26px; flex:none; fill:none; stroke:#B07A26; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.feat ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px}
.feat li{position:relative; padding-left:18px; font:400 15.5px/1.5 var(--ui); color:var(--c-ink-2)}
.feat li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; transform:rotate(45deg); background:#C9A35C; border-radius:1px}
.duo-band{margin-top:clamp(14px,1.8vw,22px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); gap:20px 40px; align-items:center; padding:30px 34px; border-radius:22px; background:radial-gradient(70% 120% at 85% 0%,rgba(201,163,92,.16),transparent 60%),linear-gradient(160deg,#123A2E,#0A1E17); color:var(--ink); box-shadow:0 24px 46px -30px rgba(10,30,22,.8)}
.duo-band h3{display:flex; align-items:center; gap:12px; font-size:26px}
.duo-band h3 svg{width:28px; height:28px; flex:none; fill:none; stroke:var(--gold-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.duo-band ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 32px}
.duo-band li{font:400 15.5px/1.55 var(--ui); color:var(--ink-2)}
.duo-band li b{display:block; margin-bottom:4px; font:500 20px/1.3 var(--display); color:var(--ink)}
@media (max-width:860px){ .duo-band{grid-template-columns:minmax(0,1fr); padding:26px 24px} .duo-band ul{grid-template-columns:minmax(0,1fr)} }
.nw{white-space:nowrap}
@media (max-width:999px){ .feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .feats{grid-template-columns:minmax(0,1fr)} }

/* pay once */
/* ---------- the rehal, in the design hub's renders ---------- */
.rehals{background:#060D0A}
.rehals .sub{color:var(--ink-2)}
.photos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); max-width:1100px; margin:0 auto}
.photos figure{margin:0; min-width:0}
.photos .w{grid-column:1/-1}
.photos img{display:block; width:100%; height:auto; border-radius:clamp(12px,1.5vw,20px); background:#0B1A15}
.photos figcaption{margin-top:10px; padding-inline:4px; font:500 13.5px/1.45 var(--ui); color:var(--ink-3)}
@media (max-width:699px){ .photos{grid-template-columns:minmax(0,1fr)} }

.price{background:radial-gradient(70% 90% at 80% 20%,rgba(201,163,92,.14),transparent 60%),linear-gradient(160deg,#0F3A2E,#08190F)}
.price-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,90px); align-items:center}
.price-copy h2{margin-top:16px}
.amount{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; margin-top:30px}
.amount b{font:400 clamp(64px,8vw,104px)/1 var(--display); letter-spacing:-.03em; color:var(--gold-2)}
.amount span{font:500 17px/1.4 var(--ui); color:var(--ink-2)}
.price .fine{margin-top:14px; font:400 14px/1.5 var(--ui); color:var(--ink-3)}
.promises{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.promises li{padding:20px 22px; border-radius:18px; background:rgba(243,234,215,.05); border:1px solid var(--line); font:400 16px/1.55 var(--ui); color:var(--ink-2)}
.promises b{display:block; margin-bottom:3px; font:500 21px/1.25 var(--display); color:var(--ink)}
@media (max-width:860px){ .price-grid{grid-template-columns:minmax(0,1fr)} }

/* closing */
.closing{position:relative; overflow:hidden; text-align:center; padding:clamp(84px,10vw,140px) 0; background:radial-gradient(60% 80% at 50% 0%,#12372B 0%,var(--night) 70%)}
.closing img{width:72px; height:72px; margin:0 auto 26px}
.closing h2{font-size:clamp(36px,4.6vw,58px)}
.closing .lead{margin:16px auto 0; max-width:30em}

/* ---------- footer ---------- */
.foot{padding:52px 0 calc(52px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); font:400 14px/1.6 var(--ui); color:var(--ink-3)}
.foot .row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 40px}
.foot nav{display:flex; flex-wrap:wrap; gap:10px 22px}
.foot nav a{color:var(--ink-2); text-decoration:none} .foot nav a:hover{color:var(--ink)}
.foot .legal{margin-top:24px; font-size:12.5px; line-height:1.6; max-width:70em}
.foot .fname{color:var(--ink); font-weight:600}

/* ---------- legal pages and the 404 ---------- */
body:has(.doc) .top{position:relative; background:var(--night)}
.doc{padding:clamp(44px,6vw,80px) 0 90px; background:var(--cream); color:var(--c-ink)}
.doc .wrap{max-width:780px}
.doc h1{font-size:clamp(38px,5vw,56px)}
.doc .updated{margin-top:14px; font:500 14px var(--ui); color:var(--c-ink-2)}
.doc h2{font-size:clamp(24px,2.6vw,30px); margin:48px 0 14px}
.doc h3{font-size:20px; margin:28px 0 10px}
.doc p,.doc li{font-size:17px; line-height:1.68; color:#2D2A23; overflow-wrap:break-word}     /* a long address breaks rather than widen the page */
.doc p+p{margin-top:14px}
.doc ul,.doc ol{padding-left:1.3em; margin:12px 0}
.doc li+li{margin-top:6px}
.doc a{color:#7A5A1F; text-underline-offset:3px}
.doc .box{margin:26px 0; padding:20px 22px; background:#fff; border-radius:16px; box-shadow:0 0 0 1px var(--c-line)}
.doc table{width:100%; border-collapse:collapse; font:400 14.5px/1.45 var(--ui); margin:16px 0}
.doc th,.doc td{text-align:left; padding:10px 10px 10px 0; border-bottom:1px solid var(--c-line); vertical-align:top}
.doc td .note{display:block; margin-top:4px; font-size:13px; line-height:1.45; color:var(--c-ink-2)}
.doc th{font-weight:600; color:var(--c-ink-2); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.doc .tbl{overflow-x:auto; -webkit-overflow-scrolling:touch}
.doc pre{white-space:pre-wrap; font:400 13px/1.55 ui-monospace,Menlo,monospace; background:#fff; padding:18px; border-radius:12px; box-shadow:0 0 0 1px var(--c-line)}
.doc .muted{color:var(--c-ink-2)}
/* support: the address as text, with a copy button */
.support .intro{margin-top:16px; font-size:18px}
.support .contact .label{font:600 12px/1.2 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2)}
.support .addr{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:8px}
.support .email{font:600 clamp(19px,2.4vw,23px)/1.3 var(--ui); color:var(--c-ink); -webkit-user-select:all; user-select:all; overflow-wrap:anywhere}
.support .copy{font:600 14px/1 var(--ui); padding:10px 18px; border-radius:999px; border:1px solid rgba(30,42,37,.22); background:var(--cream); color:var(--c-ink); cursor:pointer}
.support .copy:hover{background:var(--cream-2)}
.support .copy:focus-visible{outline:2px solid var(--emerald); outline-offset:2px}
.support .copied{min-height:1.5em; margin-top:6px; font:500 14px/1.5 var(--ui); color:var(--emerald)}
.support .contact p+p.copied{margin-top:6px}
.closing .lead a{color:var(--gold-2)}

/* ---------- reduced motion: no autoplay, no slides, no fades ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}