/* Hablobi landing — namespaced (hb-). Used by index.html only.
   styles.css continues to serve privacy, terms, support, download and invite untouched.
   Palette: the app's paper/rose/sage tokens. No webfonts, no frameworks.
   Motion: transforms/opacity only; every loop can be paused (html.hb-paused),
   Reduce Motion is honoured at runtime (html.hb-force is the visitor's explicit opt-in). */

:root {
  --hb-canvas:#FBF4F1; --hb-card:#F6EDE8; --hb-surface:#F3E6E1; --hb-surface2:#ECDAD4;
  --hb-blush:#F3E6E1; --hb-rose:#E9B8BB; --hb-rose-deep:#CE8A90; --hb-rose-ink:#8E5660;
  --hb-ink:#4A3F3C; --hb-ink2:#746460; --hb-muted:#A79590; --hb-hair:#E6D6D0;
  --hb-sage:#E7EBE2; --hb-sage-deep:#2BA88F; --hb-sage-ink:#14735A; --hb-gold:#C9A227; --hb-gold-ink:#7D600B;
  --hb-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Baskerville,Georgia,serif;
  --hb-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --hb-quran:"KFGQPC Uthman Taha Naskh","Amiri","Scheherazade New","Noto Naskh Arabic","Geeza Pro",serif;
  --hb-max:1120px; --hb-gutter:clamp(20px,5vw,56px);
  --hb-r-card:20px; --hb-r-pill:999px;
  --hb-ease:cubic-bezier(.2,.7,.2,1);
  --hb-nav-h:72px;
}

/* ---------- base ---------- */
.hb { margin:0; background:var(--hb-canvas); color:var(--hb-ink); font:17px/1.6 var(--hb-sans); -webkit-font-smoothing:antialiased; overflow-x:hidden }
.hb [id] { scroll-margin-top:84px }
.hb #top { scroll-margin-top:84px }
.hb *,.hb *::before,.hb *::after { box-sizing:border-box }
.hb [hidden] { display:none !important }
.hb h1,.hb h2,.hb h3 { font-family:var(--hb-serif); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-.02em }
.hb h1 { font-size:clamp(3.4rem,8vw,6.4rem); line-height:.98 }
.hb h2 { font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.08 }
.hb h3 { font-size:1.35rem; line-height:1.25 }
.hb em { font-style:normal; color:var(--hb-rose-ink) }
.hb p { margin:0 }
.hb a { color:inherit; text-underline-offset:4px }
.hb a:focus-visible,.hb button:focus-visible,.hb summary:focus-visible,.hb input:focus-visible { outline:3px solid var(--hb-rose-deep); outline-offset:4px; border-radius:6px }
.hb img { display:block; max-width:100%; height:auto }
.hb video { display:block }
.hb button { font:inherit; color:inherit }
.hb-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.hb-skip { position:absolute; top:-100px; left:16px; z-index:100; background:var(--hb-ink); color:#fff; padding:10px 14px; border-radius:10px }
.hb-skip:focus { top:12px }
.hb-eyebrow { font-family:var(--hb-sans); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--hb-rose-ink); margin-bottom:18px; display:flex; align-items:center; gap:8px }
.hb-lead { font-family:var(--hb-serif); font-size:clamp(1.2rem,1.6vw,1.45rem); line-height:1.45; color:var(--hb-ink); margin-top:22px }
.hb-lead + p,.hb-act__copy p + p { margin-top:16px; color:var(--hb-ink2) }
.hb-fine { font-size:.9rem; color:var(--hb-ink2); margin-top:14px }
.hb-tag { display:inline-block; font-family:var(--hb-sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hb-sage-ink); background:var(--hb-sage); border-radius:999px; padding:3px 9px; vertical-align:middle }
.hb-points { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; color:var(--hb-ink2) }
.hb-points li { position:relative; padding-left:22px }
.hb-points li::before { content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--hb-rose) }

/* word-by-word headline reveal (spans are added by landing.js) */
.hb-words .hb-w { display:inline-block }
html.hb-js .hb-reveal .hb-w { opacity:0; transform:translateY(.35em); transition:opacity .6s var(--hb-ease), transform .6s var(--hb-ease); transition-delay:calc(var(--i,0) * 70ms) }
html.hb-js .hb-reveal.is-in .hb-w { opacity:1; transform:none }

/* pills + links */
.hb-pill { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:52px; padding:12px 24px; border-radius:var(--hb-r-pill); text-decoration:none; font-weight:500; font-size:1rem; border:1px solid transparent; transition:transform .2s var(--hb-ease), background .2s, box-shadow .2s }
.hb a.hb-pill--rose,.hb .hb-pill--rose { background:var(--hb-rose); color:var(--hb-ink); border-color:#D9A3A8; box-shadow:0 10px 24px -14px rgba(206,138,144,.9) }
.hb a.hb-pill--rose:hover { background:#F0C6C9; transform:translateY(-1px) }
.hb a.hb-pill--ink,.hb .hb-pill--ink { background:var(--hb-ink); color:#FFFFFF }
.hb a.hb-pill--ink:hover { background:#5E504C; transform:translateY(-1px) }
.hb-pill--sm { min-height:44px; padding:10px 18px; font-size:.95rem }
.hb .hb-textlink { background:none; border:0; padding:10px 0; min-height:44px; display:inline-flex; align-items:center; font-size:1rem; color:var(--hb-ink); text-decoration:underline; text-underline-offset:5px; cursor:pointer }
.hb .hb-textlink--sm { font-size:.9rem }
.hb .hb-chip { font:600 .86rem/1 var(--hb-sans); letter-spacing:.02em; min-height:44px; padding:10px 14px; border-radius:999px; border:1px solid var(--hb-hair); background:transparent; color:var(--hb-ink2); cursor:pointer; transition:background .15s, color .15s, border-color .15s }
.hb .hb-chip:hover { border-color:var(--hb-rose-deep); color:var(--hb-ink) }
.hb .hb-chip.is-on,.hb .hb-chip[aria-pressed="true"] { background:var(--hb-rose); color:var(--hb-ink); border-color:#D9A3A8 }
.hb .hb-chip--wide { width:100%; text-align:center }

/* ---------- nav ---------- */
.hb-nav { position:sticky; top:0; z-index:40; background:rgba(251,244,241,.86); backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px); border-bottom:1px solid rgba(230,214,208,.7) }
.hb-nav__inner { max-width:var(--hb-max); margin:0 auto; padding:0 var(--hb-gutter); min-height:var(--hb-nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px }
.hb-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--hb-serif); font-size:1.35rem }
.hb-nav__links { display:none; gap:22px; font-size:.95rem }
.hb-nav__links a { text-decoration:none; color:var(--hb-ink2); padding:8px 0; border-bottom:1px solid transparent; white-space:nowrap }
.hb-nav__links a:hover,.hb-nav__links a.is-active { color:var(--hb-ink); border-bottom-color:var(--hb-rose) }
.hb-nav__tools { display:flex; align-items:center; gap:10px }
.hb-nav .hb-pill { min-height:44px; padding:9px 18px; font-size:.92rem }
.hb .hb-motion { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:999px; border:1px solid var(--hb-hair); background:transparent; font:600 .74rem/1 var(--hb-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--hb-ink2); cursor:pointer }
.hb .hb-motion:hover { border-color:var(--hb-rose-deep); color:var(--hb-ink) }
.hb-motion__dot { width:9px; height:9px; border-radius:50%; background:var(--hb-muted); transition:background .2s, box-shadow .2s }
.hb .hb-motion[aria-pressed="true"] .hb-motion__dot { background:var(--hb-sage-deep); box-shadow:0 0 0 3px rgba(43,168,143,.18) }
html:not(.hb-js) .hb-motion { display:none }
@media (min-width:1000px) { .hb-nav__links { display:flex } }
@media (max-width:479px) { .hb-nav__inner { gap:8px } .hb-nav .hb-pill { padding:9px 14px; font-size:.88rem; white-space:nowrap } .hb-brand { font-size:1.2rem; gap:8px } .hb .hb-motion { padding:0 10px; gap:6px; font-size:.7rem } }
@media (max-width:359px) { .hb-motion__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) } .hb .hb-motion { padding:0 14px } }

/* ---------- hero stage ---------- */
.hb-hero { position:relative; overflow:hidden; isolation:isolate; --hb-dawn:.3 }
.hb-hero__inner { position:relative; z-index:1; max-width:var(--hb-max); margin:0 auto; padding:clamp(28px,4vw,48px) var(--hb-gutter) clamp(40px,6vw,80px); display:grid; gap:32px; align-items:start }
@media (min-width:900px) { .hb-hero__inner { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; min-height:calc(100vh - var(--hb-nav-h)); min-height:calc(100svh - var(--hb-nav-h)); align-content:center } }
@media (min-width:900px) { .hb h1 { font-size:clamp(3rem,5.2vw,4.8rem) } }
.hb-petals { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }
.hb-dawn { position:absolute; inset:-20% -30% -20% 25%; z-index:0; pointer-events:none; background:radial-gradient(55% 50% at 62% 48%, rgba(233,184,187,.75) 0, rgba(201,162,39,.22) 42%, rgba(251,244,241,0) 72%); opacity:var(--hb-dawn); transition:opacity 1.4s var(--hb-ease) }
.hb-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:24px }
.hb-acts { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.hb-acts a { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:baseline; text-decoration:none; padding:12px 14px; border:1px solid var(--hb-hair); border-radius:14px; background:var(--hb-card); transition:border-color .2s, transform .2s var(--hb-ease) }
.hb-acts a:hover { border-color:var(--hb-rose); transform:translateY(-1px) }
.hb-acts__n { grid-row:1 / span 2; font-family:var(--hb-serif); font-size:1.5rem; color:var(--hb-rose-ink) }
.hb-acts span:not(.hb-acts__n) { font-family:var(--hb-serif); font-size:1.1rem }
.hb-acts small { display:block; font-size:.78rem; color:var(--hb-ink2) }
@media (max-width:899px) { .hb-acts--desktop { display:none } .hb-hero__inner { padding-top:20px; gap:22px } .hb h1 { font-size:clamp(2.6rem,12vw,3.4rem) } .hb-lead { margin-top:14px; font-size:1.12rem } .hb-hero__actions { margin-top:18px } .hb-fine { margin-top:10px; font-size:.84rem } }

/* phone frames (exact native proportion 660 x 1434) */
.hb-phone { margin:0; width:min(100%,300px) }
.hb-phone__screen { position:relative; aspect-ratio:660 / 1434; overflow:hidden; border-radius:38px; border:7px solid #3B312E; background:var(--hb-card); box-shadow:0 2px 0 2px #B0A299, 0 30px 48px -26px rgba(74,63,60,.55) }
.hb-phone__screen img,.hb-phone__screen video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:31px }
.hb-phone__cap { margin-top:14px; font-family:var(--hb-serif); font-style:italic; font-size:.98rem; color:var(--hb-ink2); text-align:center }
.hb-phone--hero { width:min(100%,236px); margin:0 auto; perspective:1200px }
html.hb-js .hb-phone--hero { animation:hbFloat 7s ease-in-out infinite; animation-play-state:paused }
.hb-phone--hero .hb-phone__screen { transform:var(--hb-tilt,none); transition:transform .35s var(--hb-ease); will-change:transform }
.hb-phone--hero .hb-phone__screen::after { content:""; position:absolute; inset:0; border-radius:31px; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 38%); mix-blend-mode:screen }
@keyframes hbFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@media (max-width:599px) { .hb-phone--hero { width:min(100%,210px) } }
.hb-phone--tilt-l { transform:rotate(-4deg) }
.hb-phone--tilt-r { transform:rotate(4deg) translateY(24px) }

/* hero garden demo */
.hb-hero__demo { display:grid; gap:20px; min-width:0 }
@media (min-width:600px) { .hb-hero__demo { grid-template-columns:236px minmax(240px,1fr); align-items:start } }
@media (min-width:900px) and (max-width:1079px) { .hb-hero__demo { grid-template-columns:1fr } .hb-phone--hero { width:min(100%,214px) } }
.hb-garden__frame { opacity:0; transition:opacity .55s var(--hb-ease) }
.hb-garden__frame.is-current { opacity:1 }
.hb-garden__video { z-index:2; opacity:0; transition:opacity .45s var(--hb-ease); background:transparent }
[data-garden-demo].is-live .hb-garden__video { opacity:1 }
[data-garden-demo].is-stills .hb-garden__video { display:none }
.hb .hb-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 18px 10px 14px; border:0; border-radius:999px; background:rgba(74,63,60,.92); color:#fff; font:500 .92rem var(--hb-sans); cursor:pointer; box-shadow:0 10px 24px -10px rgba(0,0,0,.5) }
.hb .hb-play:hover { background:var(--hb-ink) }
.hb-play__icon { width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff }
.hb-recite { background:var(--hb-card); border:1px solid var(--hb-hair); border-radius:var(--hb-r-card); padding:16px; min-width:0 }
.hb-recite__name { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hb-ink2); display:flex; gap:8px; flex-wrap:wrap }
.hb-recite__name [lang="ar"] { font-family:var(--hb-quran); font-size:1.05rem; letter-spacing:0; text-transform:none }
.hb-recite__list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px }
.hb-ayah { display:block; width:100%; min-height:44px; text-align:right; background:var(--hb-canvas); border:1px solid var(--hb-hair); border-radius:14px; padding:8px 12px; font-family:var(--hb-quran); font-size:1.35rem; line-height:1.8; cursor:pointer; transition:border-color .2s, background .2s, transform .15s var(--hb-ease), opacity .2s }
.hb-ayah:hover:not(:disabled) { border-color:var(--hb-rose); background:#FFF9F6 }
.hb-ayah:active:not(:disabled) { transform:scale(.99) }
.hb-ayah:disabled { cursor:default; opacity:.55 }
.hb-ayah.is-done { border-color:var(--hb-rose); background:var(--hb-blush); opacity:1 }
.hb-ayah.is-reading { border-color:var(--hb-rose-deep); background:#FFF9F6 }
.hb-ayah span { display:inline-block; transition:color .25s }
.hb-ayah.is-reading span { color:var(--hb-rose-ink); animation:hbWord var(--hb-word-dur,.9s) var(--hb-ease) both; animation-delay:calc(var(--i,0) * var(--hb-word-step,220ms)) }
.hb-ayah.is-done span { color:var(--hb-gold-ink) }
@keyframes hbWord { 0% { color:var(--hb-ink) } 40% { color:var(--hb-rose-ink) } 100% { color:var(--hb-gold-ink) } }
.hb-ayah__tr { font-family:var(--hb-serif); font-size:.9rem; color:var(--hb-ink2); margin:4px 4px 0 }
.hb-recite__status { margin-top:12px; font-size:.9rem; color:var(--hb-ink2); min-height:1.4em }
.hb-recite__done { margin-top:12px; padding:12px; border-radius:14px; background:var(--hb-blush); display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; font-size:.95rem }
/* at the reward, the translations fold away so the completion panel takes their room (no fold growth) */
.hb-recite.is-rewarded .hb-ayah__tr,.hb-recite.is-rewarded .hb-recite__status { display:none }
.hb-recite.is-rewarded .hb-ayah { min-height:40px; padding:4px 12px; line-height:1.6 }
.hb-recite__done p { color:var(--hb-ink) }
.hb-recite__done-actions { display:flex; align-items:center; gap:14px 18px; margin-top:10px; flex-wrap:wrap }
.hb-recite__done .hb-pill { white-space:nowrap; padding:8px 14px; min-height:40px; font-size:.9rem }

/* the Red Rose turntable: 41 real render frames on one sheet (7 x 6 cells of 160 x 355) */
.hb-rose3d { --rs:1; --col:0; --row:0; width:calc(160px * var(--rs)); height:calc(355px * var(--rs)); background-image:url(/assets/landing-2026-10/rose-turntable.webp); background-repeat:no-repeat; background-size:calc(1120px * var(--rs)) calc(2130px * var(--rs)); background-position:calc(var(--col) * -160px * var(--rs)) calc(var(--row) * -355px * var(--rs)); filter:drop-shadow(0 18px 14px rgba(74,63,60,.28)) }
.hb-rose3d--sm { --rs:.3 }

/* ---------- the story (sticky stage, native scrolling) ---------- */
.hb-story { --sbg:var(--hb-canvas); --sink:var(--hb-ink); --sink2:var(--hb-ink2); --seye:var(--hb-rose-ink); --sem:var(--hb-rose-ink); background:var(--sbg); color:var(--sink); padding:clamp(56px,8vw,112px) var(--hb-gutter) 0; transition:background-color 1.1s var(--hb-ease), color 1.1s var(--hb-ease); border-top:1px solid var(--hb-hair) }
.hb-story[data-active="2"] { --sbg:var(--hb-sage); --seye:var(--hb-sage-ink); --sem:var(--hb-sage-ink) }
.hb-story[data-active="3"] { --sbg:#F8EBDD; --seye:var(--hb-gold-ink); --sem:var(--hb-gold-ink) }
.hb-story[data-active="4"] { --sbg:var(--hb-blush) }
.hb-story[data-active="5"] { --sbg:var(--hb-ink); --sink:var(--hb-canvas); --sink2:#C9B8B2; --seye:var(--hb-rose); --sem:var(--hb-rose) }
.hb-story .hb-eyebrow { color:var(--seye) }
.hb-story em { color:var(--sem) }
.hb-story .hb-lead { color:var(--sink) }
.hb-story__head { max-width:var(--hb-max); margin:0 auto; }
.hb-story__head .hb-lead { max-width:640px }
.hb-story__grid { max-width:var(--hb-max); margin:0 auto; display:grid; gap:0 48px; align-items:start }
.hb-story__stage { position:sticky; top:72px; z-index:1; height:min(54vh,480px); overflow:hidden; border-radius:0 0 24px 24px; background:var(--sbg); transition:background-color 1.1s var(--hb-ease); box-shadow:0 18px 24px -24px rgba(74,63,60,.35) }
@supports (height:1svh) { .hb-story__stage { height:min(54svh,480px) } }
.hb-beats { list-style:none; margin:0; padding:0 }
.hb-beat { min-height:100vh; display:flex; align-items:center; padding:4vh 0; opacity:.5; transition:opacity .5s var(--hb-ease) }
@supports (height:1svh) { .hb-beat { min-height:100svh } }
.hb-beat:first-child { min-height:70vh; align-items:flex-start; padding-top:6vh }
.hb-beat.is-active,html:not(.hb-js) .hb-beat { opacity:1 }
.hb-beat:last-child { padding-bottom:10vh }
.hb-beat__inner { max-width:440px }
@media (max-width:899px) {
  html.hb-js .hb-beat__inner[id] { scroll-margin-top:calc(92px + min(54vh,480px)) }
  @supports (height:1svh) { html.hb-js .hb-beat__inner[id] { scroll-margin-top:calc(92px + min(54svh,480px)) } }
}
.hb-beat h3 { font-size:clamp(1.65rem,2.7vw,2.4rem); line-height:1.12 }
.hb-beat h3 + p { margin-top:14px; color:var(--sink2) }
.hb-beat .hb-points { color:var(--sink2) }
.hb-beat .hb-pill { margin-top:22px }
.hb-beat__still { margin:18px 0 0; width:min(100%,180px) }
.hb-beat__still img { border-radius:14px }
html.hb-js .hb-beat__still { display:none }
html:not(.hb-js) .hb-story__stage { display:none }
@media (min-width:900px) {
  .hb-story__grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) }
  .hb-beats { grid-column:1; grid-row:1 }
  .hb-story__stage { grid-column:2; grid-row:1; top:88px; height:calc(100vh - 108px); max-height:760px; background:transparent; box-shadow:none; border-radius:24px }
  @supports (height:1svh) { .hb-story__stage { height:calc(100svh - 108px) } }
  .hb-beat { min-height:100vh; align-items:center; padding:8vh 0 }
  @supports (height:1svh) { .hb-beat { min-height:100svh } }
  .hb-beat:first-child { min-height:88vh }
  .hb-beat:last-child { padding-bottom:12vh }
}
/* stage layers */
.hb-st { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .7s var(--hb-ease), transform .7s var(--hb-ease); pointer-events:none; will-change:opacity }
.hb-st.is-on { opacity:1; pointer-events:auto }
.hb-st--glow { background:radial-gradient(45% 40% at 50% 55%, rgba(201,162,39,.38) 0, rgba(233,184,187,.22) 45%, rgba(251,244,241,0) 72%) }
.hb-phone--st { height:88%; width:auto; max-height:100%; transition:transform .7s var(--hb-ease) }
.hb-phone--st .hb-phone__screen { height:100%; width:auto; aspect-ratio:660 / 1434 }
.hb-st--phone.is-off .hb-phone--st { transform:translateX(-18%) scale(.92) }
.hb-st__pron { opacity:var(--hb-pron,0); transition:opacity .35s var(--hb-ease) }
.hb-tapring { position:absolute; left:50%; top:72%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; border:2px solid var(--hb-rose-deep); opacity:0; transform:scale(.6); pointer-events:none }
.is-tap .hb-tapring { animation:hbRing 1.7s ease-out infinite }
@keyframes hbRing { 0% { opacity:0; transform:scale(.5) } 25% { opacity:.9 } 100% { opacity:0; transform:scale(1.5) } }
.hb-plate { position:relative; width:min(108%,680px); aspect-ratio:2 / 1; transform:scale(var(--hb-plate-scale,1)); transition:transform .2s linear; -webkit-mask-image:radial-gradient(ellipse 62% 72% at 50% 52%, #000 58%, rgba(0,0,0,0) 86%); mask-image:radial-gradient(ellipse 62% 72% at 50% 52%, #000 58%, rgba(0,0,0,0) 86%) }
.hb-plate__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent }
.hb-plate__still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hb-plate.is-failed .hb-plate__video { display:none }
.hb-st--rose { z-index:2 }
.hb-st--rose .hb-rose3d { --rs:1; transition:none }
@media (max-width:899px) { .hb-st--rose .hb-rose3d { --rs:.78 } }
.hb-stcard { position:relative; width:min(54%,236px); aspect-ratio:512 / 717; border-radius:14px; overflow:hidden; background:var(--hb-card); box-shadow:0 30px 48px -26px rgba(0,0,0,.45), 0 1px 2px rgba(74,63,60,.2); transform:translateY(var(--hb-card-y,0)) rotate(var(--hb-card-r,-4deg)) }
.hb-stcard img:first-child { width:100%; height:100%; object-fit:cover }
.hb-stcard__note { position:absolute; left:9%; right:9%; top:38%; min-height:2.6em; text-align:center; font-family:var(--hb-serif); font-style:italic; font-size:clamp(.9rem,1.6vw,1.05rem); line-height:1.35; color:var(--hb-ink); background:rgba(255,250,246,.88); border-radius:10px; padding:9px 11px; box-shadow:0 2px 8px rgba(74,63,60,.12); overflow-wrap:anywhere; opacity:var(--hb-note-o,0) }
.hb-stcard__seal { position:absolute; left:9%; bottom:8%; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #E9B8BB 0, #CE8A90 45%, #A66A72 100%); box-shadow:inset 0 2px 4px rgba(255,255,255,.35), 0 6px 12px -6px rgba(74,63,60,.6); opacity:0; transform:scale(1.6) }
.hb-stcard__seal img { width:22px; height:auto; opacity:.9 }
.hb-stcard.is-sealed .hb-stcard__seal { opacity:1; transform:scale(1); animation:hbStamp .6s var(--hb-ease) both }
@keyframes hbStamp { 0% { opacity:0; transform:scale(1.7) } 55% { opacity:1; transform:scale(.88) } 100% { opacity:1; transform:scale(1) } }
.hb-st__cap { position:absolute; left:12px; right:12px; bottom:10px; text-align:center; font-family:var(--hb-serif); font-style:italic; font-size:.9rem; color:var(--sink2); opacity:.95 }

/* ---------- act sections ---------- */
.hb-act { padding:clamp(56px,8vw,112px) var(--hb-gutter) }
.hb-act__grid { max-width:var(--hb-max); margin:0 auto; display:grid; gap:40px; align-items:center }
@media (min-width:900px) { .hb-act__grid { grid-template-columns:1fr 1fr; gap:64px } .hb-act__grid--flip > .hb-act__copy { order:2 } }
.hb-act__media { display:flex; justify-content:center; gap:18px; align-items:flex-start; flex-wrap:wrap }
.hb-act__media .hb-phone { width:min(46%,260px) }
.hb-act--recite { background:var(--hb-canvas) }
.hb-act--give { background:linear-gradient(180deg,var(--hb-canvas),#F7E9E6) }
.hb-stages__cap { width:100%; margin-top:16px; text-align:center; font-family:var(--hb-serif); font-style:italic; color:var(--hb-ink2); font-size:.95rem }

/* reader demo */
.hb-phone--reader { width:min(100%,250px) }
.hb-reader__alt { opacity:0; transition:opacity .4s var(--hb-ease) }
[data-reader-demo].is-pron .hb-reader__alt { opacity:1 }
.hb-tapring--reader { left:40%; top:48% }
[data-reader-demo].is-pron .hb-tapring--reader { left:50%; top:72% }
.hb-reader__panel { display:grid; gap:10px; align-content:start; width:min(100%,240px) }
.hb-reader__label { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-ink2) }
.hb-wave { display:flex; align-items:center; justify-content:center; gap:4px; height:28px; opacity:.25; transition:opacity .2s }
.hb-wave i { display:block; width:4px; height:10px; border-radius:2px; background:var(--hb-rose-deep); transform-origin:center }
.hb-wave.is-on { opacity:1 }
.hb-wave.is-on i { animation:hbWave .9s ease-in-out infinite; animation-delay:calc(var(--i,0) * 110ms) }
.hb-wave i:nth-child(1) { --i:0 } .hb-wave i:nth-child(2) { --i:1 } .hb-wave i:nth-child(3) { --i:2 } .hb-wave i:nth-child(4) { --i:3 } .hb-wave i:nth-child(5) { --i:4 }
@keyframes hbWave { 0%,100% { transform:scaleY(.5) } 50% { transform:scaleY(2.2) } }
.hb-reader__status { font-size:.9rem; color:var(--hb-ink2); min-height:2.8em }

/* card maker */
.hb-maker { display:grid; gap:22px; width:100%; max-width:560px }
@media (min-width:600px) { .hb-maker { grid-template-columns:1fr 1fr; align-items:start } }
.hb-maker__card { position:relative; aspect-ratio:512 / 717; border-radius:14px; overflow:hidden; box-shadow:0 24px 40px -22px rgba(74,63,60,.55), 0 1px 2px rgba(74,63,60,.2); background:var(--hb-card); transition:transform .5s var(--hb-ease), box-shadow .5s }
[data-card-demo].is-sealed .hb-maker__card { transform:translateY(-6px) rotate(-1.5deg); box-shadow:0 34px 48px -24px rgba(74,63,60,.6), 0 1px 2px rgba(74,63,60,.2) }
.hb-maker__cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--hb-ease) }
.hb-maker__cover.is-current { opacity:1 }
.hb-maker__note { position:absolute; left:10%; right:10%; top:38%; text-align:center; font-family:var(--hb-serif); font-style:italic; font-size:clamp(1rem,2.2vw,1.2rem); line-height:1.35; color:var(--hb-ink); background:rgba(255,250,246,.86); border-radius:10px; padding:10px 12px; box-shadow:0 2px 8px rgba(74,63,60,.12); overflow-wrap:anywhere }
.hb-maker__rose { position:absolute; width:28%; height:auto; right:7%; bottom:5%; filter:drop-shadow(0 10px 10px rgba(74,63,60,.35)); transform:rotate(10deg); transition:opacity .3s, transform .3s var(--hb-ease) }
.hb-maker__rose.is-hidden { opacity:0; transform:rotate(10deg) translateY(10px); pointer-events:none }
.hb-seal { position:absolute; left:8%; bottom:8%; width:64px; height:64px; border:0; background:none; padding:0; cursor:pointer; border-radius:50% }
.hb-seal__wax { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #E9B8BB 0, #CE8A90 45%, #A66A72 100%); box-shadow:inset 0 2px 4px rgba(255,255,255,.35), 0 6px 12px -6px rgba(74,63,60,.6); transition:transform .25s var(--hb-ease), filter .25s }
.hb-seal__wax img { width:26px; height:auto; opacity:.9; filter:drop-shadow(0 1px 1px rgba(142,86,96,.4)) }
.hb-seal:hover .hb-seal__wax { transform:scale(1.04) }
.hb-seal.is-sealed .hb-seal__wax { animation:hbPress .55s var(--hb-ease) both; filter:saturate(1.1) }
@keyframes hbPress { 0% { transform:scale(1) } 35% { transform:scale(.86) } 100% { transform:scale(1) } }
.hb-maker__form { display:grid; gap:14px }
.hb-maker__form legend,.hb-maker__field > span { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-ink2); margin-bottom:8px; display:block }
.hb-maker__covers { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.hb-maker__covers label { position:relative; cursor:pointer; border-radius:10px; overflow:hidden; border:2px solid transparent; transition:border-color .15s }
.hb-maker__covers label:has(input:checked) { border-color:var(--hb-rose-deep) }
.hb-maker__covers input { position:absolute; opacity:0; inset:0; margin:0 }
.hb-maker__covers img { aspect-ratio:512/717; object-fit:cover; width:100% }
.hb-maker__field input { width:100%; min-height:48px; border:1px solid var(--hb-hair); border-radius:12px; padding:10px 14px; font:italic 1rem var(--hb-serif); background:var(--hb-card); color:var(--hb-ink) }
.hb-maker__check { display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--hb-ink2); min-height:44px }
.hb-maker__check input { width:18px; height:18px; accent-color:var(--hb-rose-deep) }
.hb-maker__status { font-size:.9rem; color:var(--hb-ink2); min-height:1.4em }
.hb-maker__status.is-sealed { color:var(--hb-rose-ink); font-family:var(--hb-serif); font-style:italic; font-size:1rem }

/* ---------- friends ---------- */
.hb-friends { background:var(--hb-canvas); padding:clamp(56px,8vw,112px) var(--hb-gutter); border-top:1px solid var(--hb-hair) }
.hb-friends__inner { max-width:var(--hb-max); margin:0 auto; display:grid; gap:40px; align-items:center }
@media (min-width:900px) { .hb-friends__inner { grid-template-columns:.9fr 1.1fr; gap:64px } }
.hb-friends__copy .hb-pill { margin-top:26px }
.hb-friends__media { display:grid; gap:28px; justify-items:center }
.hb-friends__phones { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; width:100% }
.hb-friends__phones .hb-phone { width:min(46%,220px) }
.hb-relay { width:min(100%,420px); background:var(--hb-card); border:1px solid var(--hb-hair); border-radius:var(--hb-r-card); padding:18px }
.hb-relay__title { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-ink2); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline }
.hb-relay__ex { font-size:.72rem; letter-spacing:.04em; text-transform:none; color:var(--hb-muted) }
.hb-relay__ring { position:relative; aspect-ratio:300 / 260; margin:12px 0 6px; color:var(--hb-hair) }
.hb-relay__path { position:absolute; inset:0; width:100%; height:100% }
.hb-relay__node { position:absolute; width:64px; margin-left:-32px; text-align:center; font-size:.82rem; color:var(--hb-ink2); transition:color .3s }
.hb-relay__node[data-relay-node="0"] { left:50%; top:16.9%; transform:translateY(-50%) }
.hb-relay__node[data-relay-node="1"] { left:87.3%; top:82.3%; transform:translateY(-50%) }
.hb-relay__node[data-relay-node="2"] { left:12.7%; top:82.3%; transform:translateY(-50%) }
.hb-relay__dot { display:block; width:16px; height:16px; margin:0 auto 4px; border-radius:50%; background:var(--hb-canvas); border:2px solid var(--hb-muted); transition:background .3s, border-color .3s, transform .3s var(--hb-ease) }
.hb-relay__node.is-turn { color:var(--hb-ink); font-weight:600 }
.hb-relay__node.is-turn .hb-relay__dot { background:var(--hb-rose); border-color:var(--hb-rose-deep); transform:scale(1.25) }
.hb-relay__node.is-done .hb-relay__dot { background:var(--hb-gold); border-color:var(--hb-gold-ink) }
.hb-relay__token { position:absolute; left:0; top:0; transform:translate(-50%,-50%); background:var(--hb-ink); color:#fff; font:600 .74rem/1 var(--hb-sans); letter-spacing:.06em; text-transform:uppercase; padding:7px 10px; border-radius:999px; white-space:nowrap; box-shadow:0 8px 16px -8px rgba(0,0,0,.5); transition:transform .9s var(--hb-ease), opacity .3s }
.hb-relay__token b { font-weight:700 }
.hb-relay__plate { position:absolute; left:50%; top:60%; width:112px; height:40px; margin:-20px 0 0 -56px; border-radius:50%; background:radial-gradient(ellipse at 50% 40%, #6B3A33, #4A2A25 70%); border:3px solid #E6D6B8; box-shadow:0 6px 10px -6px rgba(74,63,60,.5) }
.hb-relay__plate i { position:absolute; width:9px; height:9px; border-radius:50%; background:#C8343F; box-shadow:0 0 0 2px rgba(255,255,255,.25) inset; opacity:0; transform:scale(.4); transition:opacity .4s, transform .5s var(--hb-ease) }
.hb-relay__plate i:nth-child(1) { left:22%; top:32% } .hb-relay__plate i:nth-child(2) { left:58%; top:22% } .hb-relay__plate i:nth-child(3) { left:40%; top:52% } .hb-relay__plate i:nth-child(4) { left:70%; top:50% }
.hb-relay__plate i.is-grown { opacity:1; transform:scale(1) }
.hb-relay__status { font-size:.92rem; color:var(--hb-ink2); min-height:2.8em; margin-top:6px }
.hb-relay__actions { display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap }

/* ---------- mimo ---------- */
.hb-mimo { background:linear-gradient(180deg,#F7E9E6,var(--hb-canvas)); padding:clamp(56px,8vw,112px) var(--hb-gutter) }
.hb-mimo__inner { max-width:var(--hb-max); margin:0 auto; display:grid; gap:40px; align-items:start }
@media (min-width:900px) { .hb-mimo__inner { grid-template-columns:.9fr 1.1fr; gap:64px } }
.hb-mimo__honest { margin-top:18px; padding:14px 16px; border-left:3px solid var(--hb-rose); background:var(--hb-card); border-radius:0 12px 12px 0; font-size:.95rem; color:var(--hb-ink2) }
.hb-orb { display:inline-block; border-radius:50%; background:radial-gradient(circle at 32% 28%, #F3C9CB 0, #E9B8BB 48%, #CE8A90 100%); box-shadow:inset 0 -2px 6px rgba(142,86,96,.25), 0 2px 6px -2px rgba(142,86,96,.4) }
.hb-orb--xs { width:14px; height:14px }
.hb-orb--sm { width:22px; height:22px }
.hb-preview-label { font-size:.82rem; color:var(--hb-ink2); margin-bottom:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.hb-preview-label span { font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-sage-ink); background:var(--hb-sage); padding:3px 9px; border-radius:999px; font-size:.72rem }
.hb-mimo__card { background:var(--hb-canvas); border:1px solid var(--hb-hair); border-radius:28px; padding:18px; box-shadow:0 30px 50px -34px rgba(74,63,60,.5) }
.hb-mimo__q { margin:0 0 12px auto; max-width:85%; background:var(--hb-blush); border-radius:18px 18px 6px 18px; padding:10px 14px; font-family:var(--hb-serif); font-size:1.05rem }
.hb-mimo__a { background:rgba(243,230,225,.55); border-radius:18px; padding:16px }
.hb-mimo__head { display:flex; flex-direction:column; gap:10px; margin-bottom:12px }
.hb-mimo__eyebrow { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-ink2); font-weight:600 }
.hb-mimo__modes { display:flex; gap:6px }
.hb-mimo__claim { font-family:var(--hb-serif); font-size:1.08rem; line-height:1.5; margin:10px 0 8px }
.hb-mimo__excerpt { margin:0 0 10px; padding:8px 12px; border-left:3px solid var(--hb-rose); background:var(--hb-card); border-radius:0 10px 10px 0; font-family:var(--hb-serif); font-style:italic; font-size:.98rem; line-height:1.45 }
.hb-mimo__verified { font-size:.8rem; color:var(--hb-sage-ink); margin:4px 0 2px }
.hb-ref { display:inline-block; font:500 .78rem/1 var(--hb-sans); font-variant-numeric:tabular-nums; color:var(--hb-ink); background:var(--hb-surface2); border:1px solid var(--hb-hair); border-radius:999px; padding:5px 8px; margin-left:6px; vertical-align:middle; font-style:normal }
.hb-mimo__count { font-size:.85rem; color:var(--hb-ink2); margin-bottom:10px }
.hb-mimo__sources { display:grid; gap:10px; margin-top:12px }
.hb-source { background:var(--hb-card); border:1px solid var(--hb-hair); border-radius:16px; padding:14px }
.hb-source header { display:flex; align-items:center; gap:8px; margin-bottom:8px }
.hb-source__name { font-family:var(--hb-serif); font-size:1rem }
.hb-source__ar { font-family:var(--hb-quran); font-size:1.45rem; line-height:2; text-align:right; margin:4px 0 8px }
.hb-source__tr { font-family:var(--hb-serif); font-size:.98rem; line-height:1.5 }
.hb-source__attr { font-size:.74rem; color:var(--hb-ink2); margin-top:8px }
.hb-mimo__composer { margin-top:12px; display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border-radius:24px; background:var(--hb-card); border:1px solid var(--hb-hair); color:var(--hb-muted); font-family:var(--hb-serif) }
html.hb-js .hb-mimo__preview .hb-stagger { opacity:0; transform:translateY(10px); transition:opacity .55s var(--hb-ease), transform .55s var(--hb-ease); transition-delay:calc(var(--i,0) * 110ms) }
html.hb-js .hb-mimo__preview.is-in .hb-stagger { opacity:1; transform:none }

/* ---------- plus ---------- */
.hb-plus { background:var(--hb-canvas); padding:clamp(56px,8vw,112px) var(--hb-gutter); border-top:1px solid var(--hb-hair) }
.hb-plus__inner { max-width:var(--hb-max); margin:0 auto }
.hb-plus__head { text-align:center; max-width:720px; margin:0 auto }
.hb-plus__head .hb-eyebrow { justify-content:center }
.hb-plans { display:grid; gap:18px; margin-top:40px }
@media (min-width:760px) { .hb-plans { grid-template-columns:1fr 1fr } }
.hb-plan { background:var(--hb-card); border:1px solid var(--hb-hair); border-radius:var(--hb-r-card); padding:28px }
.hb-plan--plus { background:linear-gradient(180deg,#F8ECE9,#F3E6E1); border-color:#EBD2CF }
.hb-plan h3 { font-size:1.6rem }
.hb-plan ul { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; color:var(--hb-ink2) }
.hb-plan li { position:relative; padding-left:20px }
.hb-plan li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--hb-rose) }
.hb-plan--plus li::before { background:var(--hb-rose-deep) }
.hb-plan__fine { margin-top:18px; font-size:.84rem; color:var(--hb-ink2) }
.hb-plus__note { margin:26px auto 0; max-width:640px; text-align:center; color:var(--hb-ink2) }

/* ---------- method ---------- */
.hb-method { background:var(--hb-sage); padding:clamp(56px,8vw,112px) var(--hb-gutter); border-block:1px solid #D9DFD2 }
.hb-method__inner { max-width:var(--hb-max); margin:0 auto }
.hb-method em { color:var(--hb-sage-ink) }
.hb-method .hb-eyebrow { color:var(--hb-sage-ink) }
.hb-method__cols { display:grid; gap:24px; margin-top:30px }
@media (min-width:760px) { .hb-method__cols { grid-template-columns:1fr 1fr; gap:40px } }
.hb-method h3 { font-size:1.15rem; margin-top:18px }
.hb-method h3:first-child { margin-top:0 }
.hb-method p { margin-top:8px; color:var(--hb-ink2) }
.hb-method__status { margin-top:28px; padding-top:18px; border-top:1px solid #D9DFD2; font-size:.9rem; color:var(--hb-ink2) }

/* ---------- faq ---------- */
.hb-faq { background:var(--hb-canvas); padding:clamp(56px,8vw,96px) var(--hb-gutter) }
.hb-faq__inner { max-width:760px; margin:0 auto }
.hb-faq h2 { margin-bottom:20px }
.hb-faq details { border-top:1px solid var(--hb-hair); padding:8px 0 }
.hb-faq details:last-child { border-bottom:1px solid var(--hb-hair) }
.hb-faq summary { cursor:pointer; font-family:var(--hb-serif); font-size:1.15rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px }
.hb-faq summary::-webkit-details-marker { display:none }
.hb-faq summary::after { content:"+"; font-size:1.4rem; color:var(--hb-rose-ink); transition:transform .2s }
.hb-faq details[open] summary::after { transform:rotate(45deg) }
.hb-faq details p { margin-top:10px; color:var(--hb-ink2) }

/* ---------- closing / footer / rail ---------- */
.hb-closing { background:linear-gradient(180deg,var(--hb-canvas),#F3E6E1); padding:clamp(64px,9vw,120px) var(--hb-gutter); text-align:center }
.hb-closing__inner { max-width:620px; margin:0 auto; display:grid; justify-items:center; gap:14px }
.hb-closing .hb-eyebrow { justify-content:center; margin-bottom:0 }
.hb-closing .hb-pill { margin-top:12px }
.hb-footer { border-top:1px solid var(--hb-hair); padding:34px var(--hb-gutter) 44px; font-size:.9rem; color:var(--hb-ink2) }
.hb-footer__inner { max-width:var(--hb-max); margin:0 auto; display:grid; gap:18px; align-items:center }
@media (min-width:760px) { .hb-footer__inner { grid-template-columns:1fr auto 1fr } .hb-footer__copy { text-align:right } }
.hb-footer__brand { font-family:var(--hb-serif); font-size:1.2rem; color:var(--hb-ink); text-decoration:none }
.hb-footer nav { display:flex; gap:22px; flex-wrap:wrap }
.hb-footer nav a { text-decoration:none }
.hb-footer nav a:hover { text-decoration:underline }
.hb-rail { display:none; position:fixed; right:4px; top:50%; transform:translateY(-50%); z-index:30; flex-direction:column; gap:30px; padding:15px 0 }
@media (min-width:1180px) { .hb-rail { display:flex } }
.hb-rail a { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; margin:-15px 0 }
.hb-rail a::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--hb-muted); opacity:.5; transition:transform .2s var(--hb-ease), opacity .2s, background .2s }
.hb-rail a.is-active::before { background:var(--hb-rose-deep); opacity:1; transform:scale(1.5) }
.hb-rail a:hover::before { opacity:1 }

/* below-the-fold rendering budget */
.hb-mimo,.hb-plus,.hb-method,.hb-faq,.hb-closing { content-visibility:auto; contain-intrinsic-size:auto 900px }

/* ---------- reveal + motion control ---------- */
.hb-reveal { transition:opacity .6s var(--hb-ease), transform .6s var(--hb-ease) }
html.hb-js .hb-reveal { opacity:0; transform:translateY(14px) }
html.hb-js .hb-reveal.is-in { opacity:1; transform:none }
/* The Motion control: every CSS loop stops; landing.js stops the videos, canvases and timers. */
html.hb-paused .hb *,html.hb-paused .hb *::before,html.hb-paused .hb *::after { animation-play-state:paused !important }
html.hb-paused .hb-phone--hero .hb-phone__screen { transform:none !important }
html.hb-paused .hb-stcard__seal,html.hb-paused .hb-seal__wax,html.hb-paused .hb-ayah span,html.hb-paused .hb-tapring { animation:none !important }
html.hb-paused .hb-ayah.is-reading span { color:var(--hb-gold-ink) }
html.hb-paused .is-tap .hb-tapring { opacity:.9; transform:scale(1) }
/* Reduce Motion: stationary by default; html.hb-force is the visitor's explicit opt-in via the Motion control. */
@media (prefers-reduced-motion: reduce) {
  html:not(.hb-force) .hb-reveal,html:not(.hb-force).hb-js .hb-reveal,html:not(.hb-force).hb-js .hb-reveal .hb-w,html:not(.hb-force).hb-js .hb-mimo__preview .hb-stagger { opacity:1; transform:none; transition:none }
  html:not(.hb-force) .hb-garden__frame,html:not(.hb-force) .hb-maker__cover,html:not(.hb-force) .hb-pill,html:not(.hb-force) .hb-acts a,html:not(.hb-force) .hb-seal__wax,html:not(.hb-force) .hb-ayah,html:not(.hb-force) .hb-ayah span,html:not(.hb-force) .hb-maker__rose,html:not(.hb-force) .hb-rail a::before,html:not(.hb-force) .hb-phone--hero,html:not(.hb-force) .hb-tapring,html:not(.hb-force) .hb-wave i,html:not(.hb-force) .hb-stcard__seal,html:not(.hb-force) .hb-relay__token,html:not(.hb-force) .hb-relay__dot,html:not(.hb-force) .hb-plate,html:not(.hb-force) .hb-phone--st { transition:none; animation:none !important }
  html:not(.hb-force) .hb-ayah.is-reading span { color:var(--hb-gold-ink) }
  html:not(.hb-force) .hb-phone--tilt-l,html:not(.hb-force) .hb-phone--tilt-r,html:not(.hb-force) .hb-phone--hero .hb-phone__screen { transform:none }
  html:not(.hb-force) .hb-st { transition:opacity .2s linear }
  html:not(.hb-force) .hb-story { transition:none }
  html:not(.hb-force) .hb-beat { transition:none }
  html:not(.hb-force) .hb-dawn { transition:none }
  html:not(.hb-force) .is-tap .hb-tapring { opacity:.9; transform:scale(1) }
  html:not(.hb-force) { scroll-behavior:auto }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth } }