/* ============ tokens: one flat ramp, white ground, no accent hue ============ */
:root{
  --maxw-wide:1280px;
  --accent:#1E2124;                 /* ink: primary text, active fills, primary buttons */
  --bg0:#FFFFFF;                    /* the single page ground */
  --ink:#1E2124; --dim:#6E6E6E; --mut:#6E6E6E;
  --line:#DBDBDB;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;color:var(--ink);}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{font-family:'Saira',sans-serif;color:var(--ink);background:var(--bg0);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:#DBDBDB;}

/* the atmosphere: one flat fixed layer, the same white as the page ground */
.atmo{position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:var(--bg0);}

/* ============ award-grade chrome ============ */
/* film grain: retired for the flat theme. an overlay blend mode is a no-op only over
   white; over every #1E2124 surface it computes 2*b*s, so the noise painted animated
   paper tooth onto flat ink (.btn-gold, .fchip.on, the pips, .plan .tag, .step .num,
   .phone). The layer is kept inert so no markup and no JS has to move. */
.grain{position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:0;
 background-image:none;}

/* preloader: the mark, a counter, gone in about a second. Failsafes in JS mean it can
   never strand the page: no JS, no GSAP, slow fonts all still lift it. */
/* A preloader that can strand the page is the worst failure there is. JS lifts it on
   fonts.ready, on load, and on a 1.8s timer; this animation lifts it even if that whole
   script never parses. Nothing can leave the page covered. */
.loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
 background:var(--bg0);transition:opacity .5s ease,visibility .5s;}
/* scoped to :not(.done) so the animation and the class can never fight over the same
   properties: whichever lifts the loader first, the other simply has nothing to do */
.loader:not(.done){animation:loaderFailsafe .5s ease 3.5s forwards;}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
.loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.loader .mark{font-size:44px;animation:heroFocus 1s cubic-bezier(.16,1,.3,1) both;}
.loader .ct{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--mut);}
.loader .bar{width:min(220px,50vw);height:1px;background:#DBDBDB;overflow:hidden;}
.loader .bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s ease;}
@media(prefers-reduced-motion:reduce){.loader{display:none;}}

/* cursor: a dot that is exactly where you are, a ring that remembers where you were.
   Fine pointers only; the system cursor never disappears on links and inputs. */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;
 transform:translate(-50%,-50%);display:none;}
.cur-dot{width:6px;height:6px;background:var(--accent);}
.cur-ring{width:34px;height:34px;border:1px solid #6E6E6E;transition:width .25s,height .25s,border-color .25s;}
.cur-ring.big{width:58px;height:58px;border-color:#1E2124;}
@media(hover:hover) and (pointer:fine){body.has-cursor .cur-dot,body.has-cursor .cur-ring{display:block;}}

/* kinetic strip: oversized outline type dragged by the scrollbar. Ink, not image. */
.kinetic{overflow:hidden;padding:clamp(30px,5vw,60px) 0;min-height:clamp(120px,15vw,200px);}
.kinetic .kt{display:flex;gap:.6em;white-space:nowrap;will-change:transform;
 font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(64px,11vw,150px);line-height:1;
 color:transparent;-webkit-text-stroke:1px #6E6E6E;letter-spacing:-.01em;}
.kinetic .kt .solid{color:var(--accent);-webkit-text-stroke:0;}
.kinetic .kt .arb{font-family:'Scheherazade New',serif;font-weight:500;-webkit-text-stroke:1px #6E6E6E;}

/* The footer closes on the mark itself, oversized, half-buried.
   Buried by the PAGE EDGE, which is the point: the negative margin cancels the footer's 44px
   of bottom padding so the overflow clip lands on the last pixel of the document. Without it
   the mark was cut by an invisible box with white space underneath, which reads as a crop
   rather than as type running off the end. If footer padding-bottom changes, change this. */
.foot-mark{overflow:hidden;margin-top:26px;margin-bottom:-44px;}
.foot-mark span{display:block;min-height:.78em;text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:700;
 font-size:clamp(110px,22vw,300px);line-height:.78;letter-spacing:-.03em;transform:translateY(18%);
 color:transparent;-webkit-text-stroke:1px #6E6E6E;}

/* split-text hero: each word rises out of its own clip. JS wraps and animates;
   without JS the plain headline simply stands. */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;}
.hero h1 .wi{display:inline-block;will-change:transform;}

/* progress hairline: the page tells you where you are in it */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;}
.scroll-progress span{display:block;height:100%;background:var(--accent);
 transform-origin:0 50%;transform:scaleX(0);}

h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.015em;text-wrap:balance;}
p{text-wrap:pretty;}
.k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px);}
section{padding:clamp(64px,9vw,120px) 0;}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:18px;
 padding:14px clamp(18px,4vw,40px);transition:background .25s,border-color .25s,padding .25s;
 border-bottom:1px solid transparent;}
.nav.is-solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line);padding-top:10px;padding-bottom:10px;}
.mark{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:24px;color:var(--accent);letter-spacing:-.02em;text-decoration:none;}
.mark i{font-style:normal;position:relative;}
.mark i::after{content:'';position:absolute;left:50%;top:.12em;width:.16em;height:.16em;background:currentColor;transform:translateX(-50%) rotate(45deg);border-radius:1px;}
.nav-links{display:flex;gap:4px;margin-left:auto;}
.nav-links a{color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:9px;transition:.15s;}
.nav-links a:hover{color:#1E2124;background:rgba(30,33,36,.06);}
.nav-links a.cur{color:#1E2124;background:#F3F3F3;}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:12px;padding:12px 22px;font-family:'Space Grotesk',sans-serif;
 font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;border:none;transition:.16s;}
.btn-gold{background:var(--accent);color:#FFFFFF;box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);}
.btn-line{border:1px solid #DBDBDB;color:var(--ink);background:#FFFFFF;}
.btn-line:hover{background:#F3F3F3;border-color:#6E6E6E;}
.nav .btn{padding:9px 16px;font-size:13px;}
@media(max-width:760px){.nav-links{display:none;}}

/* ============ hero ============ */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;padding:110px 0 40px;}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center;}
.hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;color:#1E2124;}
.hero h1 .g{color:#1E2124;background:#F3F3F3;}
.hero h1 .nw{white-space:nowrap;}
/* the headline racks into focus on arrival. Opacity never moves, so a throttled tab
   still shows the words; only blur and scale settle. */
@keyframes heroFocus{from{filter:blur(14px);transform:scale(1.035);}to{filter:blur(0);transform:none;}}
.hero h1{animation:heroFocus 1s cubic-bezier(.16,1,.3,1) both;}
.hero .lede,.hero-cta,.stores,.hero-note{animation:heroFocus .9s cubic-bezier(.16,1,.3,1) both;}
.hero .lede{animation-delay:.08s;}.hero-cta{animation-delay:.16s;}
.stores{animation-delay:.24s;}.hero-note{animation-delay:.3s;}
@media(prefers-reduced-motion:reduce){.hero h1,.hero .lede,.hero-cta,.stores,.hero-note{animation:none;}}
.hero .lede{font-size:clamp(15.5px,1.6vw,18px);line-height:1.6;color:var(--dim);margin-top:20px;max-width:52ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center;}
.hero-note{margin-top:14px;font-size:12.5px;color:var(--mut);}
.stores{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}
.store{display:inline-flex;align-items:center;gap:10px;border:1px solid #DBDBDB;border-radius:12px;
 padding:9px 15px;text-decoration:none;color:var(--ink);background:#FFFFFF;transition:.15s;position:relative;}
.store:hover{background:#F3F3F3;}
.store svg{width:19px;height:19px;flex:none;}
.store b{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;line-height:1.15;letter-spacing:-.01em;}
.store .pre{display:block;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:2px;font-family:'Saira',sans-serif;}
.store .soon{position:absolute;top:-8px;right:10px;background:var(--accent);color:#FFFFFF;font-family:'JetBrains Mono',monospace;
 font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:5px;padding:2px 6px;}

/* the deck: three cards fanned, cut like the real deck: faceted frame, inner zone,
   numbered pip, a lamp of colour behind the Arabic. The whole fan tilts toward the
   pointer, each card breathes on its own beat. */
.deck{position:relative;height:clamp(360px,44vw,540px);contain:layout paint;transform-style:preserve-3d;
 transition:transform .35s cubic-bezier(.16,1,.3,1);will-change:transform;}
.hero-in{perspective:1600px;}
.mini{position:absolute;width:clamp(180px,22vw,260px);aspect-ratio:2/3;border-radius:14px;padding:8px;
 transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
 display:flex;flex-direction:column;
 background:#FFFFFF;
 border:1px solid #DBDBDB;
 box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);}
/* the same printed-stock treatment the app's cards carry: paper tooth in the surface,
   a cut edge that catches light along the top and left, and shadow along the trim */
.mini::after{content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
 background:none;
 box-shadow:none;}
.mini .mhead{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px;}
.mini .mk{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.13em;text-transform:uppercase;color:#6E6E6E;}
.mini .pip{width:19px;height:19px;flex:none;display:grid;place-items:center;transform:rotate(45deg);border-radius:4px;
 background:#1E2124;
 box-shadow:none;}
.mini .pip i{transform:rotate(-45deg);font-style:normal;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:8.5px;color:#FFFFFF;}
.mini .mi{flex:1;border-radius:9px;position:relative;overflow:hidden;
 background:#F3F3F3;
 border:1px solid #DBDBDB;
 display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px 12px;text-align:center;
 animation:cardBob 7s ease-in-out infinite;}
.mini.m1 .mi{animation-delay:0s;}.mini.m2 .mi{animation-delay:1.2s;}.mini.m3 .mi{animation-delay:2.4s;}
@keyframes cardBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@media(prefers-reduced-motion:reduce){.mini .mi{animation:none;}}
.mini .mt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:#1E2124;line-height:1.2;}
.mini .ar{direction:rtl;font-family:'Scheherazade New',serif;font-size:19px;line-height:2;color:#1E2124;
 text-shadow:none;}
.mini .ms{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:#6E6E6E;}
.mini .mfoot{display:flex;justify-content:space-between;align-items:center;padding:8px 6px 2px;font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);}
.mini .mfoot::before{content:'';position:absolute;left:8px;right:8px;bottom:26px;height:1px;
 background:#DBDBDB;}
.mini.m1{left:4%;top:10%;transform:rotate(-8deg);z-index:1;}
.mini.m2{left:30%;top:2%;transform:rotate(2deg);z-index:3;}
.mini.m3{left:56%;top:14%;transform:rotate(9deg);z-index:2;}
@media(hover:hover) and (pointer:fine){
 .deck:hover .mini.m1{transform:rotate(-11deg) translate(-10px,-6px);}
 .deck:hover .mini.m2{transform:rotate(2deg) translateY(-12px);}
 .deck:hover .mini.m3{transform:rotate(12deg) translate(10px,-6px);}
}
@media(prefers-reduced-motion:reduce){.deck:hover .mini{transform:none;}}
@media(min-width:1500px){.wrap{max-width:var(--maxw-wide);}}
/* the page column runs to the same edges as the nav bar: one gutter from the window on each side */
.wrap{max-width:none;}
hr.divider{max-width:none;}
.hero>.wrap{width:100%;}
@media(max-width:900px){
 .hero{min-height:0;}
 .hero-in{grid-template-columns:1fr;}
 .deck{height:clamp(300px,80vw,380px);max-width:460px;margin:0 auto;width:100%;}
}
/* the fan is laid out in percentages, so on a narrow phone the third card ran past the
   edge and was clipped. Below 520px it draws in and the cards overlap more, the way a
   real fan closes when there is less table. */
@media(max-width:520px){
 .mini{width:clamp(140px,42vw,180px);}
 .mini.m1{left:5%;top:12%;transform:rotate(-9deg);}
 .mini.m2{left:25%;top:2%;transform:rotate(2deg);}
 .mini.m3{left:45%;top:16%;transform:rotate(10deg);}
 .mini .mt{font-size:11.5px;}
 .mini .ar{font-size:16px;}
}

/* ============ marquee: the sources strip ============ */
.sources{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.marquee{overflow:hidden;}
.mq-track{display:flex;width:max-content;animation:mq 36s linear infinite;}
.marquee:hover .mq-track{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none;}}
.mq-group{display:flex;align-items:center;gap:34px;padding-right:34px;}
.mq-item{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.mq-sep{width:6px;height:6px;background:#6E6E6E;transform:rotate(45deg);border-radius:1px;flex:none;}
@keyframes mq{to{transform:translateX(-50%);}}

/* dotted dividers give the long scroll its breathing marks */
.divider{border:none;border-top:2px dotted #DBDBDB;color:var(--line);max-width:var(--maxw);
 margin:0 auto;width:calc(100% - clamp(36px,8vw,80px));}

/* ============ shared section headers ============ */
.sh{max-width:640px;margin-bottom:clamp(30px,4vw,50px);}
.sh h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;color:#1E2124;margin-top:12px;}
.sh p{font-size:15.5px;line-height:1.6;color:var(--dim);margin-top:14px;}

/* ============ facing: chips that swap the demo card ============ */
.facing-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:center;}
.fchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.fchip{border:1px solid #DBDBDB;background:#FFFFFF;border-radius:999px;padding:10px 18px;
 color:var(--dim);font-family:'Saira',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;}
.fchip:hover{background:#F3F3F3;color:#1E2124;}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF;}
.facing-card{display:flex;justify-content:center;perspective:1400px;}
.fcard{width:min(300px,80vw);aspect-ratio:2/3;border-radius:16px;padding:9px;position:relative;
 transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1);
 background:#FFFFFF;
 border:1px solid #DBDBDB;
 box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);}
.fcard.swap{transform:rotateY(90deg);transition:transform .22s ease-in;}
.fcard-in{height:100%;border-radius:11px;border:1px solid #DBDBDB;
 background:#F3F3F3;display:flex;flex-direction:column;padding:18px 16px 12px;}
.fcard .fk{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#6E6E6E;}
.fcard .ft{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;line-height:1.15;color:#1E2124;margin-top:7px;}
.fcard .far{direction:rtl;text-align:center;font-family:'Scheherazade New',serif;font-size:24px;line-height:2.1;color:#1E2124;margin:auto 0;padding:10px 0;}
.fcard .fen{text-align:center;font-style:italic;font-size:12.5px;line-height:1.5;color:var(--dim);}
.fcard .fsrc{text-align:center;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:10px;padding-top:9px;border-top:1px solid #DBDBDB;}
@media(max-width:900px){.facing-in{grid-template-columns:1fr;}}

/* ============ steps ============ */
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;counter-reset:st;}
.step{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:#FFFFFF;}
.step .num{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
 background:var(--accent);color:#FFFFFF;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;}
.step h3{font-size:17px;color:#1E2124;margin-top:16px;}
.step p{font-size:13.5px;line-height:1.6;color:var(--dim);margin-top:8px;}

/* ============ qibla + prayer times ============
   Two cards for the two tools, then one flat panel that states the web limit and hands
   the reader to the same waitlist the app section uses. No second lead store. */
.qtc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.qtcard{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:#FFFFFF;transition:border-color .2s,background .2s;}
.qtcard:hover{border-color:#6E6E6E;background:#F3F3F3;}
.qtcard .qti{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#F3F3F3;color:var(--ink);}
.qtcard .qti svg{width:20px;height:20px;}
.qtcard h3{font-size:17px;color:#1E2124;margin-top:15px;}
.qtcard p{font-size:13.5px;line-height:1.6;color:var(--dim);margin-top:8px;}
.qtl{list-style:none;margin-top:17px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;}
.qtl li{display:flex;gap:9px;font-size:12.5px;line-height:1.55;color:var(--dim);}
.qtl li::before{content:'✓';color:var(--ink);font-weight:700;flex:none;}
/* the limit panel: grey stock so it reads as a caveat, not a claim */
.qtlim{margin-top:14px;border:1px solid var(--line);border-radius:16px;background:#F3F3F3;
 padding:clamp(24px,3.4vw,34px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
 gap:clamp(22px,4vw,48px);align-items:center;}
.qtlim h3{font-size:clamp(19px,2.2vw,24px);line-height:1.15;color:#1E2124;margin-top:12px;}
.qtlim p{font-size:13.5px;line-height:1.6;color:var(--dim);margin-top:10px;max-width:54ch;}
.qtlim .wait{margin-top:0;max-width:none;}
@media(max-width:900px){.qtlim{grid-template-columns:1fr;}}
/* on a narrow phone the field and the button stop fighting over one line */
@media(max-width:520px){.qtlim .wait{flex-wrap:wrap;}
 .qtlim .wait input{flex:1 1 100%;}
 .qtlim .wait .btn{width:100%;justify-content:center;}}

/* ============ features + stats ============ */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media(max-width:900px){.feats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.feats{grid-template-columns:1fr;}}
.feat{border:1px solid var(--line);border-radius:16px;padding:24px;background:#FFFFFF;transition:border-color .2s,background .2s;}
.feat:hover{border-color:#6E6E6E;background:#F3F3F3;}
.feat .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#F3F3F3;color:var(--ink);}
.feat .fi svg{width:20px;height:20px;}
.feat h3{font-size:16px;color:#1E2124;margin-top:15px;}
.feat p{font-size:13px;line-height:1.6;color:var(--dim);margin-top:7px;}
.feat .lock{display:inline-block;margin-left:7px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;
 text-transform:uppercase;color:#FFFFFF;background:var(--accent);border-radius:4px;padding:2px 6px;vertical-align:2px;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:clamp(36px,5vw,60px);
 border-top:1px solid var(--line);padding-top:clamp(30px,4vw,44px);}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,4vw,44px);color:var(--accent);letter-spacing:-.02em;}
.stat span{display:block;font-size:12.5px;color:var(--dim);margin-top:6px;}

/* ============ share ============ */
.share-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:center;}
.share-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.sbtn{display:inline-flex;align-items:center;gap:9px;border:1px solid #DBDBDB;background:#FFFFFF;
 border-radius:12px;padding:11px 18px;color:var(--ink);font-family:'Saira',sans-serif;font-size:13.5px;font-weight:600;
 text-decoration:none;cursor:pointer;transition:.15s;}
.sbtn:hover{background:#F3F3F3;border-color:#6E6E6E;}
.sbtn svg{width:16px;height:16px;}
.share-quote{border:1px solid #DBDBDB;border-radius:16px;padding:26px 24px;
 background:#F3F3F3;}
.share-quote .ar{direction:rtl;text-align:center;font-family:'Scheherazade New',serif;font-size:26px;line-height:2.1;color:#1E2124;}
.share-quote .en{text-align:center;font-style:italic;font-size:13.5px;line-height:1.55;color:var(--dim);margin-top:12px;}
.share-quote .src{text-align:center;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:12px;}
@media(max-width:900px){.share-in{grid-template-columns:1fr;}}

/* ============ pricing ============ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.plan{border:1px solid var(--line);border-radius:18px;padding:28px 26px;background:#FFFFFF;position:relative;}
.plan.hero-plan{border-color:#1E2124;background:#F3F3F3;}
.plan .tag{position:absolute;top:-10px;left:24px;background:var(--accent);color:#FFFFFF;font-family:'JetBrains Mono',monospace;
 font-size:8px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-radius:5px;padding:3px 8px;}
.plan .pv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;color:#1E2124;margin-top:10px;}
.plan .pv small{font-size:13px;color:var(--mut);font-weight:500;}
.plan ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px;}
.plan li{display:flex;gap:9px;font-size:13px;line-height:1.5;color:var(--dim);}
.plan li::before{content:'✓';color:var(--ink);font-weight:700;flex:none;}
.plan .btn{width:100%;justify-content:center;margin-top:22px;}
.plan li .live,.plan li .soon{margin-left:auto;flex:none;align-self:flex-start;font-family:'JetBrains Mono',monospace;
 font-size:8px;letter-spacing:.1em;text-transform:uppercase;border-radius:5px;padding:2px 6px;}
.plan li .live{color:#FFFFFF;background:var(--ink);}
.plan li .soon{color:#6E6E6E;background:#F3F3F3;}
.plan-honest{margin-top:14px;font-size:12px;line-height:1.55;color:var(--mut);}
.feat .lock.soon{background:#F3F3F3;color:#6E6E6E;}
.plan-ph{margin-top:20px;}
.plan-note{margin-top:18px;font-size:12.5px;color:var(--mut);text-align:center;}

/* ============ faq ============ */
.faq{max-width:760px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:20px 2px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#1E2124;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-size:20px;color:var(--accent);transition:transform .2s;flex:none;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .fa-p{padding:0 2px 20px;font-size:14px;line-height:1.65;color:var(--dim);max-width:65ch;}

/* ============ the sets: a sticky stack, because the product is a deck ============
   Each set is one oversized card that sticks under the last, so scrolling literally
   deals the deck. Pure position:sticky, no pinning to go wrong. */
.stack{display:flex;flex-direction:column;gap:26px;}
.scard{position:sticky;top:calc(86px + var(--i)*16px);min-height:min(44vh,380px);border-radius:22px;
 padding:clamp(24px,4vw,46px);
 background:#FFFFFF;
 border:1px solid #DBDBDB;
 box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,4vw,44px);align-items:center;}
.scard .sk{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 color:#6E6E6E;}
.scard h3{font-size:clamp(24px,3.2vw,38px);color:#1E2124;margin-top:10px;letter-spacing:-.015em;}
.scard .sd{font-size:14.5px;line-height:1.6;color:var(--dim);margin-top:12px;max-width:52ch;}
.scard .sm{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--mut);margin-top:18px;}
.scard .sart{width:clamp(120px,14vw,170px);aspect-ratio:2/3;border-radius:12px;flex:none;position:relative;
 background:#F3F3F3;
 border:1px solid #DBDBDB;
 display:grid;place-items:center;transform:rotate(4deg);box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);}
.scard .sart .ar{direction:rtl;font-family:'Scheherazade New',serif;font-size:clamp(17px,1.8vw,22px);line-height:2;
 color:#1E2124;text-align:center;padding:0 12px;text-shadow:none;}
.scard .sart .pip{position:absolute;top:9px;right:9px;width:18px;height:18px;transform:rotate(45deg);border-radius:4px;
 display:grid;place-items:center;background:#1E2124;}
.scard .sart .pip i{transform:rotate(-45deg);font-style:normal;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:8px;color:#FFFFFF;}
@media(max-width:760px){.scard{grid-template-columns:1fr;min-height:0;}.scard .sart{display:none;}}
/* on a short window the stack would stick a card taller than the space it has, and its
   foot would sit under the fold for the whole section. Below that height it simply stacks. */
@media(max-height:560px){.scard{position:static;min-height:0;}.stack{gap:16px;}}

/* the card in the facing demo hands you straight into the app */
.openlink{display:block;text-align:center;margin-top:16px;color:var(--accent);text-decoration:none;
 font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;transition:.15s;}
.openlink:hover{color:#6E6E6E;}

/* ============ final cta + footer ============ */
/* the close is a cinematic beat: a near-empty field, one claim, one action */
.final{text-align:center;position:relative;min-height:72vh;display:flex;align-items:center;justify-content:center;}
.final .wrap::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:min(720px,90vw);height:340px;pointer-events:none;z-index:-1;
 background:none;}
.final h2{font-size:clamp(30px,4.6vw,54px);line-height:1.05;color:#1E2124;}
.final p{font-size:16px;color:var(--dim);margin-top:16px;}
.final .hero-cta{justify-content:center;}
.final .stores{justify-content:center;}
footer{border-top:1px solid var(--line);padding:36px 0 44px;}
.foot-in{display:flex;flex-wrap:wrap;gap:22px;align-items:center;}
.foot-links{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto;}
.foot-lang{display:flex;align-items:center;gap:9px;max-width:38ch;}
.foot-lang svg{width:20px;height:auto;border-radius:2px;flex:none;box-shadow:0 0 0 1px #DBDBDB;}
.foot-lang span{font-size:11.5px;line-height:1.5;color:var(--mut);}
.foot-links a{color:var(--mut);text-decoration:none;font-size:12.5px;padding:6px 10px;border-radius:8px;transition:.15s;}
.foot-links a:hover{color:#1E2124;background:rgba(30,33,36,.06);}
.foot-note{width:100%;font-size:11.5px;color:var(--mut);line-height:1.6;max-width:70ch;}

/* ============ visual placeholders: the app's art-brief language ============
   Every slot names the exact visual to be made, so filling them later is a checklist,
   not a guess. Hatched field, emerald ink, mono kicker. */
.ph{--phc:#1E2124;position:relative;border-radius:14px;overflow:hidden;color:var(--phc);
 border:1px dashed #DBDBDB;padding:13px 14px;display:flex;flex-direction:column;gap:6px;
 background:#F3F3F3;}
.ph-k{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--phc);}
.ph-k svg{width:13px;height:13px;flex:none;}
.ph p{font-size:11.5px;line-height:1.55;color:#6E6E6E;}
.ph .spec{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#6E6E6E;margin-top:auto;padding-top:6px;}
.step .ph{margin-top:16px;min-height:118px;}

/* phone frame: holds the app-screen placeholder at true phone proportion */
.phone{width:min(270px,72vw);aspect-ratio:9/19;border-radius:42px;border:10px solid #1E2124;margin:0 auto;position:relative;
 background:#FFFFFF;box-shadow:0 1px 2px rgba(30,33,36,.05),0 10px 24px -14px rgba(30,33,36,.16);}
.phone::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:86px;height:16px;
 border-radius:0 0 11px 11px;background:#1E2124;z-index:2;}
.phone .ph{position:absolute;inset:0;border-radius:32px;border:none;padding:34px 16px 16px;}
.app-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:center;}
.app-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px;}
.app-list li{display:flex;gap:10px;font-size:14px;line-height:1.55;color:var(--dim);}
.app-list li::before{content:'✓';color:var(--ink);font-weight:700;flex:none;}
.wait{display:flex;gap:8px;margin-top:24px;max-width:420px;}
.wait input{flex:1;min-width:0;background:#FFFFFF;border:1px solid #DBDBDB;border-radius:12px;
 padding:12px 15px;color:var(--ink);font-family:'Saira',sans-serif;font-size:13.5px;outline:none;transition:border-color .15s;}
.wait input::placeholder{color:var(--mut);}
.wait input:focus{border-color:#1E2124;}
.wait-note{margin-top:10px;font-size:11.5px;color:var(--mut);}
@media(max-width:900px){.app-in{grid-template-columns:1fr;}}

.daily-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,60px);align-items:center;}
.daily-p{font-size:15.5px;line-height:1.6;color:var(--dim);margin-top:14px;max-width:52ch;}
.daily-card .ph{min-height:210px;}
@media(max-width:900px){.daily-in{grid-template-columns:1fr;}}

/* testimonials: slots for real words, clearly not yet real */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
.quote{border:1px solid var(--line);border-radius:16px;padding:22px;background:#FFFFFF;display:flex;flex-direction:column;gap:14px;}
.quote .qhead{display:flex;align-items:center;gap:11px;}
.quote .qav{width:38px;height:38px;border-radius:50%;flex:none;border:1px dashed #DBDBDB;
 background:#F3F3F3;}
.quote .qwho b{display:block;font-family:'Space Grotesk',sans-serif;font-size:13px;color:#1E2124;}
.quote .qwho span{display:block;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:2px;}

/* footer socials */
.socials{display:flex;gap:8px;}
.soc{width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid #DBDBDB;color:var(--dim);background:#FFFFFF;cursor:pointer;transition:.15s;}
.soc:hover{color:#1E2124;background:#F3F3F3;}
.soc svg{width:16px;height:16px;}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:300;background:var(--ink);color:#FFFFFF;
 font-weight:600;font-size:13px;border-radius:12px;padding:11px 18px;opacity:0;pointer-events:none;transition:.25s;max-width:88vw;text-align:center;}
.toast.on{opacity:1;transform:translate(-50%,0);}

:where(a,button,summary):focus{outline:none;}
:where(a,button,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}

/* ============ particle scenes (particles.js) ============ */
.pcv{display:block;width:100%;height:100%;--dot:#1E2124;--glow:rgba(30,33,36,.07);--label:#6E6E6E;}
.light{padding:clamp(70px,10vw,130px) 0 clamp(40px,6vw,80px);}
.light-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;}
.light h2{font-size:clamp(30px,4.4vw,54px);line-height:1.04;letter-spacing:-.025em;margin:14px 0 16px;}
.light p.lp{color:var(--dim);font-size:16px;line-height:1.6;max-width:44ch;}
.lchips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px;}
.lchip{border:1px solid #DBDBDB;background:#fff;color:#1E2124;border-radius:999px;padding:8px 14px;font:500 13.5px 'Saira',sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.lchip:hover{border-color:#1E2124;}
.lchip[aria-selected="true"]{background:#1E2124;border-color:#1E2124;color:#fff;}
.lchip .ar{font-family:'Scheherazade New',serif;margin-left:6px;opacity:.7;}
.lcap{min-height:72px;border-left:2px solid #1E2124;padding:2px 0 2px 14px;margin-bottom:22px;}
.lcap b{display:block;font-family:'Space Grotesk',sans-serif;font-size:17px;}
.lcap span{display:block;color:var(--dim);font-size:14px;line-height:1.55;margin-top:3px;max-width:46ch;}
.light-stage{position:relative;aspect-ratio:1.15/1;border-radius:26px;background:radial-gradient(120% 90% at 50% 40%,#FFFFFF 0,#F6F6F4 70%);border:1px solid #ECECEC;overflow:hidden;}
.light-stage .lhint{position:absolute;left:18px;bottom:14px;font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#9A9A9A;}
.light-stage .lauto{position:absolute;right:16px;bottom:12px;height:3px;width:80px;border-radius:2px;background:#ECECEC;overflow:hidden;}
.light-stage .lauto i{display:block;height:100%;width:0;background:#1E2124;}
@media(max-width:900px){.light-in{grid-template-columns:1fr;}.light-stage{aspect-ratio:1/1;}}
/* the set panels now carry a live scene instead of a flat card */
.scard .sart.live{width:clamp(220px,27vw,360px);aspect-ratio:5/4;transform:none;padding:0;overflow:visible;
 background:none;border:0;box-shadow:none;border-radius:0;display:block;}
.scard .sart.live .pcv{position:absolute;inset:0;}
.scard .sart.live .ar{position:absolute;left:0;right:0;bottom:8px;font-size:clamp(14px,1.4vw,17px);color:#1E2124;opacity:.85;}
.scard .sart.live .pip{z-index:1;}
.scard .sart.live .scn{position:absolute;left:12px;top:11px;font:500 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;}
@media(max-width:760px){.scard .sart.live{display:block;width:100%;aspect-ratio:16/10;}}

/* ============ real captures in place of the placeholders ============ */
.shot{margin-top:16px;border-radius:16px;overflow:hidden;border:1px solid #E3E3E3;background:#F3F3F3;
 box-shadow:0 1px 2px rgba(30,33,36,.05),0 14px 30px -18px rgba(30,33,36,.28);}
.shot img{display:block;width:100%;height:auto;}
.shot-card{max-width:250px;margin-left:auto;margin-right:auto;border:0;background:none;box-shadow:none;overflow:visible;}
.shot-card img{border-radius:18px;box-shadow:0 18px 36px -20px rgba(30,33,36,.45);}
.flip{perspective:1200px;}
.flip .flip-in{display:grid;transform-style:preserve-3d;animation:cardflip 7s ease-in-out infinite;}
.flip img{grid-area:1/1;backface-visibility:hidden;}
.flip .fb{transform:rotateY(180deg);}
@keyframes cardflip{0%,38%{transform:rotateY(0)}50%,88%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.flip .flip-in{animation:none}}
.shot-phone{max-width:300px;margin:0 auto;border:0;background:none;box-shadow:none;}
.shot-phone img{filter:drop-shadow(0 24px 40px rgba(30,33,36,.22));}
.shot-scene{position:relative;aspect-ratio:4/5;background:radial-gradient(120% 90% at 50% 35%,#FFFFFF 0,#F3F3F1 75%);}
.shot-scene .pcv{position:absolute;inset:0;}
.shot-scene .shot-cap{position:absolute;left:16px;bottom:14px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;}
/* the hero fan: each card carries a small live scene above its words */
.mini .mi{justify-content:flex-end;background:radial-gradient(120% 80% at 50% 25%,#FFFFFF 0,#F3F3F1 70%);}
.mini .mi .mcv{position:absolute;left:0;right:0;top:0;height:60%;}
.mini .mi > span{position:relative;}

.plan-shots{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start;margin-top:18px;}
.plan-shots .shot{margin-top:0;}
.plan-shots figcaption{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8A8A8A;padding:10px 14px;background:#fff;border-top:1px solid #ECECEC;}
@media(max-width:700px){.plan-shots{grid-template-columns:1fr;}}
/* the reader's backdrop leaves a hairline at the card's sides; trim it */

/* the strip runs on its own (two identical halves loop seamlessly); the scrollbar still nudges it */
.kinetic .kt-run{display:flex;width:max-content;animation:ktrun 38s linear infinite;}
.kinetic .kt-g{display:flex;gap:.6em;padding-right:.6em;flex:none;}
@keyframes ktrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.kinetic .kt-run{animation:none;}}

/* ============ hero: the WebGL deck (deck3d.js); the 2D fan is the fallback ============ */
.d3{display:none;}
.deck.gl{height:clamp(470px,52vw,660px);contain:none;transform:none!important;}
.deck.gl .mini{display:none;}
.deck.gl .d3{display:block;position:absolute;inset:-4% -12% 0 -2%;}
.d3-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;}
.d3-chips{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:min(560px,100%);}
.d3-chips .d3-k{width:100%;text-align:center;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#6E6E6E;margin-bottom:2px;}
.d3-chips button{border:1px solid #DBDBDB;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border-radius:999px;padding:6px 12px;
 font:500 12.5px 'Saira',sans-serif;color:#1E2124;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;}
.d3-chips button:hover{border-color:#1E2124;transform:translateY(-1px);}
.d3-chips button[aria-pressed="true"]{background:#1E2124;border-color:#1E2124;color:#fff;}
.d3-cap{position:absolute;left:50%;top:5%;transform:translateX(-50%);flex-direction:row!important;align-items:center;gap:12px!important;white-space:nowrap;padding:9px 16px!important;border-radius:999px!important;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid #E3E3E3;
 border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 30px -18px rgba(30,33,36,.35);animation:capIn .35s ease both;}
.d3-cap[hidden]{display:none;}
.d3-cap b{font:600 15px 'Space Grotesk',sans-serif;color:#1E2124;}
.d3-cap span{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6E6E6E;}
.d3-cap a{margin-top:0;font:600 13px 'Space Grotesk',sans-serif;color:#1E2124;}
.d3-cap button{align-self:center;border:0;background:none;padding:0;font:500 12px 'Saira',sans-serif;color:#6E6E6E;text-decoration:underline;cursor:pointer;}
@keyframes capIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.d3-hint{position:absolute;left:4%;top:2%;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9A;pointer-events:none;}
@media(max-width:860px){.deck.gl{height:clamp(440px,118vw,560px);max-width:none;}.deck.gl .d3{inset:0 -16px;}.d3-hint{left:16px;}.d3-cap{white-space:normal;flex-wrap:wrap;justify-content:center;width:calc(100% - 32px);top:3%;}}

/* the Baik logo (assets/logo/baik-logo_caps-black.png): its shape used as a mask, filled with currentColor, so it takes any ink */
.baik-logo{display:inline-block;vertical-align:middle;height:1em;aspect-ratio:118.13/45.82;background:currentColor;
 -webkit-mask:url("assets/logo/baik-logo_caps-black.png") center/108% 120.7% no-repeat;mask:url("assets/logo/baik-logo_caps-black.png") center/108% 120.7% no-repeat;}
.mark .baik-logo{height:1.15em;}
.loader .mark .baik-logo{height:1.2em;}
/* footer: the logo, oversized and quiet, where the outlined word was */
.foot-mark .baik-logo{display:block;height:clamp(110px,22vw,300px);margin:0 auto;color:#F1F1F1;transform:translateY(18%);}

/* ============ The table: WebGL scene (table3d.js); the screenshot is the fallback ============ */
.t3-wrap{position:relative;}
.t3{display:none;}
.t3-wrap.gl .t3-fallback{display:none;}
.t3-wrap.gl .t3{display:block;position:relative;aspect-ratio:1.25/1;width:100%;}
.t3-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;}
.t3-hint{position:absolute;left:0;right:0;top:4px;text-align:center;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9A;pointer-events:none;transition:opacity .6s;}
.t3-hint.gone{opacity:0;}
.t3-bar{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;
 background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid #E3E3E3;border-radius:999px;padding:8px 16px;font:500 12.5px 'Saira',sans-serif;color:#6E6E6E;}
.t3-bar b{font:600 13.5px 'Space Grotesk',sans-serif;color:#1E2124;}
.t3-bar button{border:0;background:none;padding:0;font:500 12px 'Saira',sans-serif;color:#6E6E6E;text-decoration:underline;cursor:pointer;}
.t3-peek{position:absolute;right:2%;top:9%;display:flex;flex-direction:column;gap:3px;max-width:230px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
 border:1px solid #E3E3E3;border-radius:14px;padding:11px 14px;box-shadow:0 14px 30px -18px rgba(30,33,36,.35);}
.t3-peek[hidden]{display:none;}
.t3-peek b{font:600 14.5px 'Space Grotesk',sans-serif;color:#1E2124;} .t3-peek span{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6E6E6E;}
.t3-peek a{margin-top:5px;font:600 13px 'Space Grotesk',sans-serif;color:#1E2124;}
@media(max-width:700px){.t3-wrap.gl .t3{aspect-ratio:1/1;}.t3-bar{white-space:normal;flex-wrap:wrap;justify-content:center;width:calc(100% - 24px);}}
/* the phone: titanium body, Dynamic Island, keys, status bar, home indicator; the video is the screen */
.iphone{position:relative;width:min(292px,74vw);margin:0 auto;padding:11px;border-radius:54px;
 background:linear-gradient(145deg,#4A4D53 0%,#2A2C31 18%,#17181B 55%,#2E3035 100%);
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #0B0C0E,0 1px 1px rgba(0,0,0,.2),0 30px 60px -22px rgba(20,22,26,.45),0 60px 90px -60px rgba(20,22,26,.5);}
.iphone::after{content:'';position:absolute;inset:4px;border-radius:50px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.ip-screen{position:relative;border-radius:43px;overflow:hidden;background:#fff;aspect-ratio:740/1516;isolation:isolate;}
.app-vid{display:block;width:100%;height:100%;object-fit:cover;}
.ip-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:31%;height:25px;border-radius:20px;background:#050506;z-index:2;}
.ip-island::after{content:'';position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2B3A55,#0A0D14 70%);}
.ip-status{position:absolute;left:0;right:0;top:0;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;z-index:1;color:#111;background:#fff;font:600 13.5px -apple-system,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:-.01em;}
.ip-icons{display:flex;align-items:center;gap:5px;}
.ip-home{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:36%;height:4.5px;border-radius:3px;background:#111;opacity:.85;z-index:2;}
.ip-key{position:absolute;width:3.5px;border-radius:2px;background:linear-gradient(90deg,#1A1B1E,#3A3C41);}
.ip-action{left:-3px;top:17%;height:5%;} .ip-vol1{left:-3px;top:26%;height:9.5%;} .ip-vol2{left:-3px;top:38%;height:9.5%;}
.ip-power{right:-3px;left:auto;top:29%;height:14%;background:linear-gradient(270deg,#1A1B1E,#3A3C41);}
.shot-phone{overflow:visible;}

/* ============ How it works: three steps told on one stage as you scroll ============ */
.hw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);margin-top:28px;}
.hw-steps{list-style:none;margin:0;padding:0;}
.hw-step{display:grid;grid-template-columns:auto 1fr;gap:18px;min-height:56vh;padding:6vh 0;opacity:.32;transition:opacity .5s ease;}
.hw-step.on{opacity:1;}
.hw-step:first-child{padding-top:2vh;} .hw-step:last-child{min-height:44vh;}
.hw-n{font:600 13px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#1E2124;width:38px;height:38px;border:1px solid #DBDBDB;border-radius:50%;
 display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s;}
.hw-step.on .hw-n{background:#1E2124;color:#fff;border-color:#1E2124;}
.hw-step h3{font-size:clamp(20px,2.2vw,26px);color:#1E2124;margin:4px 0 10px;letter-spacing:-.01em;}
.hw-step p{font-size:15px;line-height:1.65;color:var(--dim);max-width:44ch;}
.hw-stage{position:sticky;top:14vh;height:min(72vh,620px);border-radius:24px;background:radial-gradient(120% 90% at 50% 20%,#FFFFFF 0,#F4F3F0 78%);
 border:1px solid #ECECEC;overflow:hidden;align-self:start;}
/* step 1: the search */
.hw-search{position:absolute;left:12%;right:12%;top:16%;height:52px;border-radius:14px;background:#fff;border:1px solid #DBDBDB;display:flex;align-items:center;gap:10px;padding:0 16px;
 color:#6E6E6E;box-shadow:0 10px 30px -18px rgba(30,33,36,.3);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s;}
.hw-q{font:500 16px 'Saira',sans-serif;color:#1E2124;white-space:nowrap;}
.hw-caret{width:2px;height:20px;background:#1E2124;animation:hwBlink 1s steps(1) infinite;}
@keyframes hwBlink{50%{opacity:0}}
.hw-tags{position:absolute;left:12%;right:12%;top:calc(16% + 66px);display:flex;flex-wrap:wrap;gap:8px;align-items:center;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);}
.hw-tag{font:500 13px 'Saira',sans-serif;color:#fff;background:#1E2124;border-radius:999px;padding:6px 12px;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1);}
.hw-tag b{font-weight:400;opacity:.6;margin-left:4px;}
.hw-count{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#6E6E6E;margin-left:6px;opacity:0;transition:opacity .4s .2s;}
.hw-stage.typed .hw-tag{opacity:1;transform:none;} .hw-stage.typed .hw-tag:nth-child(2){transition-delay:.12s;} .hw-stage.typed .hw-count{opacity:1;}
/* step 2: the draw */
.hw-deck{position:absolute;left:0;right:0;bottom:0;height:100%;perspective:1400px;pointer-events:none;}
.hw-back,.hw-card{position:absolute;left:50%;width:min(36%,210px);aspect-ratio:972/1695;}
.hw-back{bottom:-46%;border-radius:12px;box-shadow:0 18px 36px -20px rgba(0,0,0,.5);transition:transform .9s cubic-bezier(.16,1,.3,1),bottom .9s cubic-bezier(.16,1,.3,1);}
.hw-back.b1{transform:translateX(-78%) rotate(-9deg);} .hw-back.b2{transform:translateX(-22%) rotate(8deg);}
.hw-card{bottom:-60%;transform:translateX(-50%) rotate(3deg);transition:bottom .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.hw-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.65,0,.35,1);}
.hw-flip img{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;backface-visibility:hidden;box-shadow:0 26px 50px -26px rgba(0,0,0,.55);}
.hw-rear{transform:rotateY(180deg);}
.hw-stage[data-step="1"] .hw-back{bottom:-40%;}
.hw-stage[data-step="2"] .hw-search,.hw-stage[data-step="3"] .hw-search{transform:translateY(-140%) scale(.92);opacity:0;}
.hw-stage[data-step="2"] .hw-tags,.hw-stage[data-step="3"] .hw-tags{transform:translateY(-200%);opacity:0;}
.hw-stage[data-step="2"] .hw-back,.hw-stage[data-step="3"] .hw-back{bottom:-34%;}
.hw-stage[data-step="2"] .hw-card,.hw-stage[data-step="3"] .hw-card{bottom:9%;transform:translateX(-50%) rotate(-1.5deg);}
/* step 3: turn it over, the about panel and the actions */
.hw-stage[data-step="3"] .hw-card{transform:translateX(-112%) rotate(-3deg);}
.hw-stage[data-step="3"] .hw-back{bottom:-52%;}
.hw-stage[data-step="3"] .hw-flip{transform:rotateY(180deg);}
.hw-about{position:absolute;right:7%;top:20%;width:min(42%,250px);background:#fff;border:1px solid #E3E3E3;border-radius:16px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px;
 box-shadow:0 20px 40px -24px rgba(30,33,36,.35);opacity:0;transform:translateX(30px);transition:opacity .5s .35s,transform .8s .35s cubic-bezier(.16,1,.3,1);}
.hw-about .hw-ak{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;margin-bottom:4px;}
.hw-about b{font:600 13.5px 'Space Grotesk',sans-serif;color:#1E2124;margin-top:6px;} .hw-about span{font-size:12.5px;line-height:1.5;color:#6E6E6E;}
.hw-acts{position:absolute;right:7%;top:calc(20% + 230px);width:min(42%,250px);display:flex;gap:6px;opacity:0;transform:translateY(16px);transition:opacity .5s .6s,transform .7s .6s cubic-bezier(.16,1,.3,1);}
.hw-acts span{flex:1;white-space:nowrap;text-align:center;font:600 11.5px 'Space Grotesk',sans-serif;color:#1E2124;background:#fff;border:1px solid #DBDBDB;border-radius:10px;padding:8px 4px;}
.hw-stage[data-step="3"] .hw-about,.hw-stage[data-step="3"] .hw-acts{opacity:1;transform:none;}
/* phones: no sticky; the stage leads, and plays the three steps by itself while it is on screen */
@media(max-width:860px){
 .hw{grid-template-columns:1fr;}
 .hw-stage{position:relative;top:auto;order:-1;height:min(118vw,520px);}
 .hw-step{min-height:0;padding:16px 0;}
}
@media(prefers-reduced-motion:reduce){.hw-stage *{transition:none!important;animation:none!important;}}

/* ============ A moment of zikir: one bead, tap to count (zikir3d.js) ============ */
.zk{padding:clamp(70px,10vw,130px) 0;}
.zk-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;}
.zk h2{font-size:clamp(32px,4.6vw,56px);line-height:1.03;letter-spacing:-.025em;margin:14px 0 16px;}
.zk-lp{color:var(--dim);font-size:16px;line-height:1.6;max-width:42ch;margin-bottom:26px;}
.zk-wrap{position:relative;}
.zk-stage{position:relative;aspect-ratio:5/6;max-height:660px;max-width:560px;margin:0 auto;}
.zk-wrap:not(.gl) .zk-stage{display:none;}
.zk-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none;}
.zk-ui{position:absolute;left:0;right:0;bottom:2%;text-align:center;pointer-events:none;transition:opacity .22s,transform .22s;}
.zk-ui.swap{opacity:0;transform:translateY(6px);}
.zk-ar{font-family:'Scheherazade New',serif;font-size:clamp(28px,3.4vw,40px);line-height:1.5;color:#1E2124;direction:rtl;}
.zk-tr{font:500 14px 'Saira',sans-serif;color:#1E2124;margin-top:2px;} .zk-tr span{color:#8A8A8A;font-weight:400;}
.zk-count{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font:500 12px 'JetBrains Mono',monospace;color:#8A8A8A;letter-spacing:.06em;}
.zk-n{font:600 22px 'Space Grotesk',sans-serif;color:#1E2124;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;}
.zk-dots{display:inline-flex;gap:5px;margin-right:4px;}
.zk-dots i{width:7px;height:7px;border-radius:50%;border:1px solid #BDBDBD;}
.zk-dots i.now{border-color:#1E2124;} .zk-dots i.full{background:#1E2124;border-color:#1E2124;}
.zk-hint{position:absolute;left:0;right:0;bottom:-6%;text-align:center;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9A;pointer-events:none;transition:opacity .6s;}
.zk-hint.gone{opacity:0;}
@media(max-width:900px){.zk-in{grid-template-columns:1fr;}.zk-stage{max-width:520px;}}

/* ============ The open mushaf (mushaf3d.js) ============ */
/* the table and the mushaf sit either side of one dotted rule: each keeps only a short margin to it,
   since the book's stage already opens with air above the book */
#table{padding-bottom:clamp(36px,5vw,64px);}
.mf{padding:clamp(28px,4vw,48px) 0 clamp(70px,10vw,130px);}
.mf-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:center;}
.mf h2{font-size:clamp(32px,4.6vw,56px);line-height:1.03;letter-spacing:-.025em;margin:14px 0 16px;}
.mf-lp{color:var(--dim);font-size:16px;line-height:1.6;max-width:40ch;margin-bottom:26px;}
.mf-wrap{position:relative;} .mf-wrap:not(.gl){display:none;}
.mf-stage{position:relative;aspect-ratio:1.25/1;}
.mf-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;}
.mf-cap{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;white-space:nowrap;font:400 13.5px 'Saira',sans-serif;color:#6E6E6E;}
.mf-cap b{font:600 14px 'Space Grotesk',sans-serif;color:#1E2124;} .mf-cap i{font:500 11px 'JetBrains Mono',monospace;font-style:normal;color:#9A9A9A;margin-left:6px;}
.mf-cap button{width:34px;height:34px;border-radius:50%;border:1px solid #DBDBDB;background:#fff;font-size:18px;line-height:1;color:#1E2124;cursor:pointer;transition:border-color .2s,transform .2s;}
.mf-cap button:hover{border-color:#1E2124;transform:translateY(-1px);}
.mf-hint{position:absolute;left:0;right:0;top:-3%;text-align:center;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9A;pointer-events:none;transition:opacity .6s;}
.mf-hint.gone{opacity:0;}
@media(max-width:900px){.mf-in{grid-template-columns:1fr;}.mf-stage{aspect-ratio:1.1/1;}}

/* ============ Words from readers ============ */
.quote.q2{position:relative;padding:26px 24px 22px;gap:14px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;}
.quote.q2:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(30,33,36,.35);}
.q-stars{font-size:14px;letter-spacing:3px;color:#1E2124;}
.quote.q2 blockquote{margin:0;font-size:15.5px;line-height:1.65;color:#2E3237;flex:1;}
.q-card{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#8A8A8A;padding-top:12px;border-top:1px solid #EFEFEF;}
.q-card b{color:#1E2124;font-weight:600;}
.quote.q2 .qav{border:0;background:#1E2124;color:#fff;display:grid;place-items:center;font:600 15px 'Space Grotesk',sans-serif;}
.quote.q2 .qwho b{font-size:14.5px;} .quote.q2 .qwho span{font-size:9px;}
.q-sample{position:absolute;top:14px;right:14px;font:500 8.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#9A9A9A;border:1px dashed #D5D5D5;border-radius:999px;padding:3px 8px;}
.quote.q2:not([data-sample]) .q-sample{display:none;}
.d3-pending .deck:not(.gl) .mini{visibility:hidden;}
.deck.gl .d3{animation:d3In .9s ease both;}
@keyframes d3In{from{opacity:0}to{opacity:1}}


.loader{display:none;}
/* the Baik logo (assets/logo/baik-logo_caps.svg): a mask filled with currentColor, so it takes any ink */
.baik-logo{display:inline-block;vertical-align:middle;height:1em;aspect-ratio:118.13/45.82;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20118.13%2045.82%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22118.13%22%20height%3D%2245.82%22%3E%3Crect%20width%3D%22118.13%22%20height%3D%2245.82%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M9.05%2012.16H19.44A4.26%204.26%200%200%201%2019.44%2020.68H9.05Z%22%2F%3E%3Cpath%20d%3D%22M9.05%2028.08H20.44A4.56%204.56%200%200%201%2020.44%2037.2H9.05Z%22%2F%3E%3Ccircle%20cx%3D%2253.78%22%20cy%3D%2231.15%22%20r%3D%226.96%22%2F%3E%3Cpolygon%20points%3D%2260.73%2C16%2056.23%2C16%2060.73%2C19.7%22%2F%3E%3Cpolygon%20points%3D%2260.73%2C46.3%2056.23%2C46.3%2060.73%2C42.5%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23000%22%20%20mask%3D%22url(%23cut)%22%3E%3Cpolygon%20points%3D%220%2C4.16%209.05%2C4.16%209.05%2C45.2%200%2C45.2%22%2F%3E%3Cpath%20d%3D%22M0%204.16H21.14A11.96%2011.96%200%200%201%2021.14%2028.08H0Z%22%2F%3E%3Cpath%20d%3D%22M0%2020.68H22.14A12.26%2012.26%200%200%201%2022.14%2045.2H0Z%22%2F%3E%3Cellipse%20cx%3D%2253.78%22%20cy%3D%2231%22%20rx%3D%2215.43%22%20ry%3D%2214.79%22%2F%3E%3Cpolygon%20points%3D%2260.73%2C16.9%2069.38%2C16.9%2069.38%2C45.2%2060.73%2C45.2%22%2F%3E%3Cpolygon%20points%3D%2275.13%2C20.26%2084.18%2C16.9%2084.18%2C45.2%2075.13%2C45.2%22%2F%3E%3Cpolygon%20points%3D%2279.66%2C0%2085.96%2C6.3%2079.66%2C12.6%2073.36%2C6.3%22%2F%3E%3Cpolygon%20points%3D%2289.4%2C7.69%2098.33%2C4.16%2098.33%2C28.6%2099.53%2C29.7%2099.53%2C33%2098.33%2C33.7%2098.33%2C45.2%2089.4%2C45.2%22%2F%3E%3Cpolygon%20points%3D%2298.33%2C28.46%20107.15%2C16.9%20118.13%2C16.9%20106.3%2C30.6%20117.97%2C45.2%20108.02%2C45.2%2098.33%2C33.85%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20118.13%2045.82%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22118.13%22%20height%3D%2245.82%22%3E%3Crect%20width%3D%22118.13%22%20height%3D%2245.82%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M9.05%2012.16H19.44A4.26%204.26%200%200%201%2019.44%2020.68H9.05Z%22%2F%3E%3Cpath%20d%3D%22M9.05%2028.08H20.44A4.56%204.56%200%200%201%2020.44%2037.2H9.05Z%22%2F%3E%3Ccircle%20cx%3D%2253.78%22%20cy%3D%2231.15%22%20r%3D%226.96%22%2F%3E%3Cpolygon%20points%3D%2260.73%2C16%2056.23%2C16%2060.73%2C19.7%22%2F%3E%3Cpolygon%20points%3D%2260.73%2C46.3%2056.23%2C46.3%2060.73%2C42.5%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23000%22%20%20mask%3D%22url(%23cut)%22%3E%3Cpolygon%20points%3D%220%2C4.16%209.05%2C4.16%209.05%2C45.2%200%2C45.2%22%2F%3E%3Cpath%20d%3D%22M0%204.16H21.14A11.96%2011.96%200%200%201%2021.14%2028.08H0Z%22%2F%3E%3Cpath%20d%3D%22M0%2020.68H22.14A12.26%2012.26%200%200%201%2022.14%2045.2H0Z%22%2F%3E%3Cellipse%20cx%3D%2253.78%22%20cy%3D%2231%22%20rx%3D%2215.43%22%20ry%3D%2214.79%22%2F%3E%3Cpolygon%20points%3D%2260.73%2C16.9%2069.38%2C16.9%2069.38%2C45.2%2060.73%2C45.2%22%2F%3E%3Cpolygon%20points%3D%2275.13%2C20.26%2084.18%2C16.9%2084.18%2C45.2%2075.13%2C45.2%22%2F%3E%3Cpolygon%20points%3D%2279.66%2C0%2085.96%2C6.3%2079.66%2C12.6%2073.36%2C6.3%22%2F%3E%3Cpolygon%20points%3D%2289.4%2C7.69%2098.33%2C4.16%2098.33%2C28.6%2099.53%2C29.7%2099.53%2C33%2098.33%2C33.7%2098.33%2C45.2%2089.4%2C45.2%22%2F%3E%3Cpolygon%20points%3D%2298.33%2C28.46%20107.15%2C16.9%20118.13%2C16.9%20106.3%2C30.6%20117.97%2C45.2%20108.02%2C45.2%2098.33%2C33.85%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.mark .baik-logo{height:1.15em;}
.loader .mark .baik-logo{height:1.2em;}
/* footer: the logo, oversized and quiet, where the outlined word was */
.foot-mark .baik-logo{display:block;height:clamp(110px,22vw,300px);margin:0 auto;color:#F1F1F1;transform:translateY(18%);}

/* phones and small tablets: the ring above, the "what are you facing" chips below it, never over it */
@media(max-width:860px){
 .deck.gl .d3{display:flex;flex-direction:column;}
 .deck.gl .d3 .d3-cv{position:relative;inset:auto;flex:1 1 auto;min-height:0;height:auto;}
 .d3-chips{position:static;transform:none;margin:2px auto 0;padding:0 16px 6px;width:100%;max-width:560px;row-gap:8px;}
}
@media(max-width:520px){
 .deck.gl{height:clamp(560px,158vw,700px);}
 .d3-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
 .d3-chips .d3-k{grid-column:1/-1;margin-bottom:4px;}
 .d3-chips button{padding:10px 10px;font-size:13.5px;}
 .d3-chips button:last-child:nth-child(even){grid-column:1/-1;}
}

/* How it works on phones: the stage on top, the steps under it as a short list you can tap.
   The open step shows its words; a thin line under it runs while the steps play by themselves. */
@media(max-width:860px){
 .hw-stage{cursor:pointer;}
 .hw-search{left:6%;right:6%;top:13%;height:48px;padding:0 14px;}
 .hw-q{font-size:13.5px;min-width:0;}
 .hw-tags{left:6%;right:6%;top:calc(13% + 60px);}
 .hw-stage[data-step="1"] .hw-back{bottom:-28%;}
 .hw-steps{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
 .hw-step{position:relative;opacity:1;padding:12px 14px 14px;border-radius:16px;gap:14px;cursor:pointer;transition:background .3s ease;-webkit-tap-highlight-color:transparent;}
 .hw-step:first-child{padding-top:12px;}
 .hw-step .hw-n{width:32px;height:32px;font-size:12px;}
 .hw-step h3{font-size:17px;margin:5px 0 0;color:#6E6E6E;transition:color .3s ease;}
 .hw-step p{display:none;font-size:14.5px;margin-top:6px;}
 .hw-step.on{background:#F6F5F2;}
 .hw-step.on h3{color:#1E2124;}
 .hw-step.on p{display:block;animation:hwIn .4s ease both;}
 .hw-step:focus-visible{outline:2px solid #1E2124;outline-offset:2px;}
 .hw.auto .hw-step.on::after{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:#1E2124;opacity:.5;transform-origin:left;animation:hwProg 4.2s linear both;}
}
@keyframes hwIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes hwProg{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* step 3 on phones: the card turns over in the top half; a short "About this dua" sits across the bottom */
@media(max-width:860px){
 .hw-stage[data-step="3"] .hw-card{bottom:47%;transform:translateX(-50%) rotate(-2deg);}
 .hw-about{left:6%;right:6%;top:auto;bottom:5%;width:auto;padding:12px 14px 13px;}
 .hw-about b:nth-of-type(2),.hw-about span:nth-of-type(3){display:none;}
 .hw-acts{display:none;}
}

/* ============ phones: long card lists become swipe rails (index.astro adds the dots) ============
   Sets (no longer stacked on top of each other), the features, the quotes and the qibla/prayer
   cards. Each card takes most of the width with the next one peeking in, so the page stays short. */
@media(max-width:760px){
 .stack,.feats,.quotes,.qtc{display:flex;flex-direction:row;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 -16px;padding:4px 16px 6px;scroll-padding:0 16px;}
 .stack::-webkit-scrollbar,.feats::-webkit-scrollbar,.quotes::-webkit-scrollbar,.qtc::-webkit-scrollbar{display:none;}
 .stack>*,.feats>*,.quotes>*,.qtc>*{flex:0 0 84%;scroll-snap-align:start;min-width:0;}
 .scard{position:relative;top:auto;min-height:0;}
 .scard .sart.live{aspect-ratio:16/9;}
 .rail-dots{display:flex;justify-content:center;gap:6px;margin-top:14px;}
 .rail-dots i{width:6px;height:6px;border-radius:999px;background:rgba(30,33,36,.18);transition:width .3s ease,background .3s ease;}
 .rail-dots i.on{width:18px;background:#1E2124;}
}
@media(min-width:761px){.rail-dots{display:none;}}
/* phones: the last How it works step drops its desktop height, and sections sit closer together */
@media(max-width:760px){
 .hw-step:last-child{min-height:0;}
 section{padding:44px 0;}
 .sh{margin-bottom:24px;}
}

/* the mushaf's page-to-card moment (mushaf3d.js): the label under the floating card */
.mf-promo{position:absolute;left:50%;top:6%;transform:translate(-50%,8px);display:flex;flex-direction:column;align-items:center;gap:3px;
 padding:10px 18px 11px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #E3E3E3;
 box-shadow:0 14px 30px -18px rgba(30,33,36,.35);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1);white-space:nowrap;z-index:2;}
.mf-promo.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.mf-promo span{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A6D1E;}
.mf-promo b{font:600 16px 'Space Grotesk',sans-serif;color:#1E2124;}
.mf-promo a{font:600 12.5px 'Space Grotesk',sans-serif;color:#1E2124;text-decoration:none;border-bottom:1px solid currentColor;margin-top:2px;}
@media(prefers-reduced-motion:reduce){.mf-promo{transition:none;}}
/* phones: the label is one line, above the book where the "drag a page" hint sits */
.mf3:has(.mf-promo.on) .mf-hint,#mf3:has(.mf-promo.on) .mf-hint{opacity:0;}
@media(max-width:760px){
 .mf-promo{top:-5%;flex-direction:row;gap:10px;padding:7px 14px;border-radius:999px;}
 .mf-promo span{display:none;}
 .mf-promo b{font-size:14px;} .mf-promo a{margin-top:0;font-size:12.5px;}
}

/* the footer's social links (Instagram, TikTok) look like the buttons beside them */
a.soc{display:inline-grid;place-items:center;text-decoration:none;color:inherit;}

/* ============ "Built with care": tiles with a small live demo each (index.astro) ============ */
.feats.fxs{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
.fxs .feat{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:0 0 22px;transition:border-color .3s ease,box-shadow .4s ease,transform .4s cubic-bezier(.16,1,.3,1);}
.fxs .feat:nth-child(1),.fxs .feat:nth-child(2){grid-column:span 3;}
.fxs .feat:nth-child(3),.fxs .feat:nth-child(4),.fxs .feat:nth-child(5){grid-column:span 2;}
.fxs .feat:nth-child(6){grid-column:span 6;flex-direction:row;align-items:center;padding:0;}
.fxs .feat:nth-child(6) .fx{flex:0 0 46%;height:150px;margin:0;}
.fxs .feat:nth-child(6) h3{margin-top:0;}
.fxs .feat>h3,.fxs .feat>p{padding:0 24px;}
.fxs .feat:nth-child(6)>h3,.fxs .feat:nth-child(6)>p{padding:0 32px 0 8px;}
.fxs .feat:hover{background:#FFFFFF;border-color:#CFCFCC;box-shadow:0 22px 44px -32px rgba(30,33,36,.4);transform:translateY(-2px);}
.fx{position:relative;height:168px;margin:10px 10px 18px;border-radius:12px;background:radial-gradient(120% 110% at 50% 0%,#FBFBFA,#F2F1EE);
 display:grid;place-items:center;overflow:hidden;}
.fx-ar{font-family:'Scheherazade New',serif;direction:rtl;color:#1E2124;line-height:1.6;}
/* 1 · source and check */
.fx-card{width:min(250px,80%);background:#fff;border:1px solid #E6E5E1;border-radius:12px;padding:16px 16px 13px;box-shadow:0 14px 28px -22px rgba(30,33,36,.45);display:flex;flex-direction:column;align-items:center;gap:8px;}
.fx-card .fx-ar{font-size:20px;}
.fx-rule{width:100%;height:1px;background:#ECEBE8;}
.fx-ref{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#6E6E6E;min-height:14px;}
.fx-ref::after{content:'';display:inline-block;width:1px;height:11px;margin-left:2px;background:#1E2124;vertical-align:-1px;animation:fxBlink 1s steps(1) infinite;}
.typed .fx-ref::after{opacity:0;animation:none;}
.fx-stamp{display:inline-flex;align-items:center;gap:5px;font:600 10.5px 'Space Grotesk',sans-serif;color:#1F6B4C;background:rgba(31,107,76,.08);border:1px solid rgba(31,107,76,.25);border-radius:999px;padding:3px 9px 3px 6px;
 opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
.fx-stamp svg{width:12px;height:12px;}
.typed .fx-stamp{opacity:1;transform:none;}
/* 2 · one line, three readings */
.fx-read{grid-template-rows:auto auto auto;align-content:center;gap:10px;}
.fx-read .fx-ar{font-size:24px;}
.fx-seg{position:relative;display:inline-grid;grid-template-columns:repeat(2,58px);background:#EAE9E5;border-radius:999px;padding:3px;}
.fx-seg b{position:relative;z-index:1;font:600 10.5px 'Space Grotesk',sans-serif;color:#6E6E6E;text-align:center;padding:4px 0;transition:color .3s ease;}
.fx-seg b.on{color:#1E2124;}
.fx-seg i{position:absolute;left:3px;top:3px;bottom:3px;width:58px;border-radius:999px;background:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.18);transform:translateX(calc(var(--seg,0) * 58px));transition:transform .5s cubic-bezier(.16,1,.3,1);}
.fx-mean{position:relative;height:20px;width:min(320px,92%);}
.fx-mean em{position:absolute;inset:0;text-align:center;font:italic 400 13px 'Saira',sans-serif;color:#4A4D50;opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .5s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fx-mean em.on{opacity:1;transform:none;}
/* 3 · a hand of cards, the bookmark drops on the one you keep */
.fx-deck .fx-c{position:absolute;left:50%;top:50%;width:62px;height:93px;margin:-46px 0 0 -31px;border-radius:8px;background:linear-gradient(140deg,#2A2D32,#141619);border:1px solid rgba(255,255,255,.08);
 box-shadow:0 12px 22px -14px rgba(0,0,0,.6);transition:transform 1s cubic-bezier(.16,1,.3,1);}
.fx-deck .c3{display:grid;place-items:center;}
.fx-deck .c3 span{font:700 11px 'Space Grotesk',sans-serif;color:#F3F3F1;letter-spacing:-.01em;}
.play .fx-deck .c1{animation:fxFan1 5.4s cubic-bezier(.65,0,.35,1) infinite;}
.play .fx-deck .c2{animation:fxFan2 5.4s cubic-bezier(.65,0,.35,1) infinite;}
.play .fx-deck .c3{animation:fxFan3 5.4s cubic-bezier(.65,0,.35,1) infinite;}
.fx-mark{position:absolute;left:calc(50% + 14px);top:calc(50% - 46px);width:10px;height:22px;background:#C9A227;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);opacity:0;}
.play .fx-mark{animation:fxMark 5.4s cubic-bezier(.34,1.56,.64,1) infinite;}
/* 4 · it arrives with its source */
.fx-bub{position:relative;max-width:min(260px,84%);background:#fff;border:1px solid #E6E5E1;border-radius:14px 14px 4px 14px;padding:10px 12px 8px;display:flex;flex-direction:column;gap:3px;
 box-shadow:0 14px 28px -22px rgba(30,33,36,.45);opacity:0;transform:translateY(14px) scale(.96);}
.play .fx-bub{animation:fxBub 5.6s cubic-bezier(.16,1,.3,1) infinite;}
.fx-bub .fx-ar{font-size:19px;text-align:right;}
.fx-en{font:italic 400 12px 'Saira',sans-serif;color:#4A4D50;}
.fx-ref2{font:500 8.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8A8A8A;margin-top:3px;}
.fx-tick{position:absolute;right:9px;bottom:6px;font-size:9px;color:#3E9A63;letter-spacing:-2px;}
/* 5 · the words, as they are read */
.fx-hear{grid-template-rows:auto auto;align-content:center;gap:12px;}
.fx-words{font-size:25px;}
.fx-words b{font-weight:400;color:#B9B8B3;transition:color .35s ease;}
.fx-words b.on{color:#1E2124;}
.fx-wave{display:flex;align-items:center;gap:3px;height:28px;}
.fx-wave i{width:3px;border-radius:2px;background:#1E2124;opacity:.22;}
.play .fx-wave i{animation:fxWave 1.3s ease-in-out infinite;animation-delay:calc(var(--k) * -73ms);}
/* 6 · what Baik will never do */
.fx-priv{grid-template-columns:auto 1fr;gap:18px;padding:0 24px;justify-items:start;}
.fx-shield{width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid #E6E5E1;display:grid;place-items:center;color:#1F6B4C;box-shadow:0 10px 22px -16px rgba(30,33,36,.4);}
.fx-shield svg{width:26px;height:26px;}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;}
.fx-chips b{font:600 11.5px 'Space Grotesk',sans-serif;color:#1E2124;background:#fff;border:1px solid #E3E2DE;border-radius:999px;padding:5px 10px;opacity:0;transform:translateY(6px);}
.play .fx-chips b{animation:fxChip .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.3s + var(--d) * .18s);}
@keyframes fxBlink{50%{opacity:0;}}
@keyframes fxFan1{0%,12%{transform:none;}30%,82%{transform:translateX(-46px) rotate(-12deg);}100%{transform:none;}}
@keyframes fxFan2{0%,12%{transform:none;}30%,82%{transform:translateX(46px) rotate(12deg);}100%{transform:none;}}
@keyframes fxFan3{0%,12%{transform:none;}30%,82%{transform:translateY(-8px);}100%{transform:none;}}
@keyframes fxMark{0%,34%{opacity:0;transform:translateY(-26px);}44%,80%{opacity:1;transform:translateY(-8px);}92%,100%{opacity:0;transform:translateY(-8px);}}
@keyframes fxBub{0%{opacity:0;transform:translateY(14px) scale(.96);}12%,82%{opacity:1;transform:none;}96%,100%{opacity:0;transform:translateY(-6px);}}
@keyframes fxWave{0%,100%{transform:scaleY(.5);}50%{transform:scaleY(1.25);}}
@keyframes fxChip{to{opacity:1;transform:none;}}
@media(max-width:900px){
 .fxs .feat:nth-child(n){grid-column:span 3;}
 .fxs .feat:nth-child(6){grid-column:span 6;}
}
@media(max-width:760px){
 .fxs .feat:nth-child(6){flex-direction:column;align-items:stretch;padding:0 0 22px;}
 .fxs .feat:nth-child(6) .fx{flex:none;height:168px;margin:10px 10px 18px;}
 .fxs .feat:nth-child(6)>h3,.fxs .feat:nth-child(6)>p{padding:0 24px;}
 .fx-priv{grid-template-columns:1fr;justify-items:center;padding:0 14px;gap:12px;}
 .fx-chips{justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
 .fxs *{animation:none!important;transition:none!important;}
 .fx-bub,.fx-mark,.fx-chips b{opacity:1;transform:none;}
}
/* the wide "Private by design" tile: the demo on the left, the title over the text on the right */
@media(min-width:761px){
 .fxs .feat:nth-child(6){display:grid;grid-template-columns:46% 1fr;grid-template-rows:1fr auto auto 1fr;align-items:start;padding:0;}
 .fxs .feat:nth-child(6) .fx{grid-row:1 / -1;align-self:stretch;height:auto;min-height:150px;margin:10px;}
 .fxs .feat:nth-child(6)>h3{grid-column:2;grid-row:2;padding:0 32px 0 18px;}
 .fxs .feat:nth-child(6)>p{grid-column:2;grid-row:3;padding:0 32px 0 18px;max-width:52ch;}
}
/* five tiles now: on tablets the last one runs the full width */
@media(min-width:761px) and (max-width:900px){.fxs .feat:nth-child(5){grid-column:span 6;}}