:root{
  --cream:#F4EFE4; --paper:#EBE4D5; --sand:#DCD2BF; --line:#CFC5B0;
  --ink:#24291F; --muted:#5E6656; --sage:#7E9779; --sage-deep:#3E5A43; --forest:#1F2B22;
  --gold:#C9A45C; --on-dark:#EFE9DC; --on-dark-muted:#B7B9A6;
  --display:'Newsreader','Iowan Old Style',serif; --sans:'Instrument Sans','Segoe UI',sans-serif; --arabic:'Amiri',serif;
  --pad:clamp(4.5rem,9vw,8rem); --gutter:clamp(1.25rem,5vw,4.5rem); --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(2.6rem,5.6vw,4.9rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:1.45rem;line-height:1.2}
h1 em,h2 em{font-style:italic;color:var(--sage-deep)}
.dark h2 em{color:var(--gold)}
.eyebrow{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--sage-deep);margin-bottom:1.1rem}
.eyebrow.light{color:var(--gold)}
.body,.lede{color:var(--muted);max-width:34rem}
.lede{font-size:1.125rem;margin-top:1.4rem}
.dark .body{color:var(--on-dark-muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--sage-deep);color:var(--cream);padding:.95rem 1.6rem;border-radius:2px;font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--forest);transform:translateY(-2px)}
.btn-small{padding:.7rem 1.1rem;font-size:.72rem}
.btn-light{background:var(--gold);color:var(--forest)}
.btn-light:hover{background:var(--on-dark)}
.link-arrow{position:relative;font-weight:600;font-size:.9rem;padding-bottom:3px}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:left;transform:scaleX(.35);transition:transform .4s var(--ease)}
.link-arrow:hover::after{transform:scaleX(1)}

/* nav */
.welcome-ribbon{max-width:1200px;margin:0 auto;padding:2rem 2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--line)}
.welcome-heading{flex-shrink:0}
.welcome-heading .eyebrow{margin-bottom:.5rem}
.welcome-heading h2{font-size:clamp(1.8rem,3vw,2.7rem);color:var(--sage-deep)}
.welcome-greetings{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem .7rem;max-width:36rem}
.welcome-greetings span{display:inline-block;padding:.3rem .7rem;border:1px solid var(--line);border-radius:20px;background:var(--paper);font-size:.82rem;color:var(--sage-deep);animation:welcome-arrive .65s var(--ease) both;transition:translate .2s}
.welcome-greetings span:nth-child(even){animation-delay:.12s}
.welcome-greetings span:hover{translate:0 -3px}
.welcome-greetings [lang=ar],.welcome-greetings [lang=ur]{font-family:var(--arabic);font-size:1rem}
.hero-buy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:.6rem auto .2rem}
.catalog-note{max-width:40rem;margin:1rem auto;text-align:center;font-size:.85rem;color:var(--muted);line-height:1.8}
.catalog-detail-bottle{width:100%;display:block;overflow:hidden;border-radius:6px}
.catalog-detail-bottle>svg{display:block;width:100%;height:auto}
.smart-media>.catalog-detail-bottle{position:absolute;inset:0;height:100%}
.smart-media>.catalog-detail-bottle>svg{height:100%}
.stack-ready .col-card[style*="--stack-offset: 3"],.stack-ready .col-card[style*="--stack-offset: 4"]{visibility:hidden}
@keyframes welcome-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.welcome-ribbon{align-items:flex-start;flex-direction:column;gap:1rem}.welcome-greetings{justify-content:flex-start}}
@media(max-width:520px){.welcome-ribbon{padding:1.5rem 1.25rem 1rem}.welcome-greetings{gap:.4rem}.welcome-greetings span{font-size:.72rem;padding:.2rem .55rem}}
@media(prefers-reduced-motion:reduce){.welcome-greetings span{animation:none;transition:none}.welcome-greetings span:hover{translate:none}}
html.intro-visible{overflow:hidden}
.brand-intro{position:fixed;inset:0;border:0;padding:clamp(1.5rem,4vw,4rem);margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;background:var(--cream);color:var(--sage-deep);overflow:auto}
.brand-intro[open]{display:grid;grid-template-rows:1fr auto}
.brand-intro::backdrop{background:transparent}
.intro-content{align-self:center;text-align:center;padding:1.5rem 0 2rem}
.intro-wordmark{font-family:var(--display);font-size:clamp(5rem,18vw,15rem);font-weight:400;letter-spacing:-.045em;line-height:1.2;animation:intro-name .8s var(--ease) both}
.intro-rule{display:block;width:52px;height:1px;background:var(--gold);margin:1.1rem auto 1.7rem}
.intro-tagline{display:flex;align-items:baseline;justify-content:center;gap:.55em;font-size:clamp(.78rem,1.3vw,1.1rem);font-weight:500;letter-spacing:.2em;line-height:1.6}
.intro-brave{display:inline-block;color:var(--forest);animation:intro-brave .95s .35s var(--ease) both}
.intro-bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;font-size:.875rem;letter-spacing:.04em}
.intro-bottom>p{color:var(--muted)}
.intro-bottom[hidden],.intro-content[hidden],.intro-language-step[hidden]{display:none}
.intro-slide-area{width:460px;max-width:100%}
.entry-slider{position:relative;height:86px;border:2px solid var(--sage-deep);border-radius:48px;background:var(--paper);direction:ltr}
.slide-caption{position:absolute;inset:0;display:grid;place-items:center;font-size:1rem;font-weight:600;letter-spacing:.02em;padding-left:3.25rem;color:var(--forest);pointer-events:none}
.intro-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;border-radius:40px;cursor:grab;touch-action:pan-y}
.intro-slider:active{cursor:grabbing}
.intro-slider::-webkit-slider-runnable-track{height:82px;border-radius:44px;background:linear-gradient(to right,#C9A45C22 var(--slide,0%),transparent var(--slide,0%))}
.intro-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:82px;height:82px;border:6px solid var(--cream);border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%231F2B22' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/30px no-repeat}
.intro-slider::-moz-range-track{height:82px;background:transparent}
.intro-slider::-moz-range-thumb{width:70px;height:70px;border:6px solid var(--cream);border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%231F2B22' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/30px no-repeat}
.slide-help{display:grid;gap:.5rem;font-size:.875rem;line-height:1.6;color:var(--forest);letter-spacing:0;margin:1rem auto 0;max-width:380px}
.slide-help p{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-inline:.35rem}
.slide-help strong{font-weight:600;color:var(--sage-deep)}
.slide-help [lang=ar]{font-family:var(--arabic);font-size:1.125rem}
.intro-language-step{grid-row:1/-1;align-self:center;justify-self:center;width:min(100%,580px);text-align:center;padding:1rem 0}
.language-wordmark{font-family:var(--display);font-size:3rem;color:var(--sage-deep);line-height:1.2;margin-bottom:2rem}
.intro-language-step .eyebrow{font-size:.85rem;margin-bottom:.6rem}
.language-welcome{display:flex;justify-content:center;align-items:center;gap:1.4rem;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.language-welcome [lang=ar]{font-family:var(--arabic);font-size:1.15rem}
.entry-language-options{display:grid;gap:.65rem;margin:2rem auto 1.5rem;max-width:380px}
.entry-language-options button{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:start;gap:.2rem 1.5rem;min-height:82px;padding:1rem 1.3rem;border:1px solid var(--line);background:var(--cream);transition:background .2s,border-color .2s}
.entry-language-options button:hover{background:var(--paper);border-color:var(--sage-deep)}
.entry-language-options button>span:first-child{font-family:var(--display);font-size:1.55rem;line-height:1.2}
.entry-language-options button>small{grid-column:1;font-size:.68rem;color:var(--muted)}
.entry-language-options button>span:last-child{grid-column:2;grid-row:1/3;color:var(--sage-deep)}
.entry-language-options [lang=ar]>span:first-child{font-family:var(--arabic)}
.intro-back{font-size:.7rem;min-height:44px}
.intro-enter{font-size:.73rem;min-height:44px;display:inline-flex;align-items:center;gap:1.3rem}
.brand-intro.leaving{animation:intro-away .55s cubic-bezier(.65,0,.35,1) forwards}
@keyframes intro-name{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-brave{from{opacity:0;transform:translateX(55px)}to{opacity:1;transform:translateX(0)}}
@keyframes intro-away{to{transform:translateY(-100%)}}
@media(max-width:520px){
  .intro-bottom{flex-direction:column;gap:.5rem}
  .intro-content{padding-bottom:3rem}
}
@media(max-height:520px){
  .brand-intro{padding:1rem 1.5rem}
  .intro-wordmark{font-size:clamp(4rem,18vh,7rem)}
  .intro-content{padding:.5rem 0}
  .intro-rule{margin:.5rem auto .8rem}
}
@media(max-height:420px){
  .intro-wordmark{font-size:3rem}
  .intro-tagline{font-size:.78rem}
  .intro-rule{margin:.3rem auto .5rem}
  .intro-bottom>p{display:none}
}
@media(prefers-reduced-motion:reduce){
  .brand-intro,.intro-wordmark,.intro-brave{animation:none!important}
}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem var(--gutter);background:rgba(244,239,228,.88);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wm-name{font-family:var(--display);font-size:1.6rem;font-weight:500;color:var(--sage-deep)}
.wm-tag{font-size:.56rem;letter-spacing:.2em;margin-top:.3rem;color:var(--muted)}
.nav-links{display:flex;gap:2rem;font-size:.88rem}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:1rem}
.language-control{display:block}
.language-select{font-family:var(--sans),var(--arabic);font-size:.73rem;color:var(--sage-deep);padding:.55rem .45rem;border:1px solid var(--line);border-radius:2px;background:var(--cream);min-height:42px;width:103px;cursor:pointer}
@media(max-width:1150px){.nav-links{display:none}}
@media(max-width:520px){
  .nav{gap:.6rem}
  .nav-actions{gap:.45rem}
  .language-select{width:84px;font-size:.66rem;padding-inline:.2rem}
  .nav .btn-small{font-size:.57rem;letter-spacing:.05em;padding:.7rem .6rem;text-align:center}
  .intro-slide-area{width:100%}
  .intro-bottom{gap:1.2rem}
}
@media(max-height:520px){
  .intro-slide-area{width:min(100%,460px)}
  .intro-bottom{gap:.4rem}
  .slide-help{gap:.15rem;margin-top:.5rem}
  .entry-language-options{grid-template-columns:repeat(3,1fr);max-width:none;margin-block:1rem}
  .entry-language-options button{min-height:72px;padding:.7rem}
  .language-wordmark{margin-bottom:.8rem;font-size:2rem}
}

/* Arabic is a full reading-direction adaptation, not mirrored product imagery. */
[dir=rtl] body{font-family:var(--arabic);line-height:1.85}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:var(--arabic);letter-spacing:0;line-height:1.35}
[dir=rtl] .eyebrow,[dir=rtl] .stage-label,[dir=rtl] .personal-preview-label{letter-spacing:0}
[dir=rtl] .eyebrow{font-size:.88rem}
[dir=rtl] .btn{letter-spacing:0;font-family:var(--arabic)}
[dir=rtl] .wm-name,[dir=rtl] .intro-wordmark,[dir=rtl] .foot-big,[dir=rtl] .language-wordmark{font-family:var(--display);direction:ltr;unicode-bidi:isolate}
[dir=rtl] .wm-tag,[dir=rtl] .intro-tagline,[dir=rtl] .foot-tag{font-family:var(--sans);direction:ltr;unicode-bidi:isolate}
[dir=rtl] .intro-wordmark{letter-spacing:-.045em}
[dir=rtl] .language-select{font-family:var(--sans),var(--arabic)}
[dir=rtl] .link-arrow>span[aria-hidden]{display:inline-block;transform:scaleX(-1)}
[dir=rtl] .intro-slide-area{direction:rtl}
[dir=rtl] .intro-tagline{letter-spacing:.2em}
[dir=rtl] .pillar{padding-inline:0 2rem}
[dir=rtl] .pillar+.pillar{padding-inline:2rem;border-left:0;border-right:1px solid var(--line)}
[dir=rtl] .prayer{text-align:right;grid-template-columns:28px 7.5rem 1fr}
[dir=rtl] .p-ar{display:none}
[dir=rtl] .prayer-time,[dir=rtl] .countdown-value,[dir=rtl] .achievement-count,[dir=rtl] .moment-index,[dir=rtl] .dhikr-count{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .prayer-settings input[type=number],[dir=rtl] [name=timezone],[dir=rtl] input[type=email]{direction:ltr;text-align:left}
[dir=rtl] .gift-name-input input{padding-right:1rem;padding-left:5rem}
[dir=rtl] .gift-name-count{right:auto;left:.9rem;direction:ltr}
[dir=rtl] .gift-message-count{float:left;direction:ltr}
[dir=rtl] .gift-note-preview,[dir=rtl] .gift-review,[dir=rtl] .mobile-name-preview{border-left:0;border-right:3px solid var(--gold)}
[dir=rtl] .gift-closing a{margin-left:0;margin-right:auto}
[dir=rtl] .finish-dialog .dialog-copy{text-align:right}
@media(max-width:900px){[dir=rtl] .pillar+.pillar{border-right:0;padding-inline:0}}
@media(max-width:520px){
  [dir=rtl] .prayer{grid-template-columns:25px 6rem 1fr}
  [dir=rtl] .nav .btn-small{font-size:.69rem}
}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,5vw,4.5rem) var(--gutter) clamp(3.5rem,6vw,5rem);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.cta-row{display:flex;align-items:center;gap:1.75rem;margin-top:2.2rem;flex-wrap:wrap}
.hero-points{list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.hero-points li{display:flex;align-items:center;gap:.55rem}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage)}
.hero-media{position:relative;border-radius:240px 240px 6px 6px;overflow:hidden;aspect-ratio:933/1400;max-height:78vh;justify-self:center;width:100%;max-width:470px;background:var(--paper)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.temp-chip{position:absolute;left:1.1rem;bottom:1.1rem;background:var(--forest);color:var(--on-dark);padding:.55rem .95rem;border-radius:100px;font-size:.85rem;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:.1rem}
.temp-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#8FD0E6;margin-right:.5rem;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* marquee */
.marquee{background:var(--sage-deep);color:var(--on-dark);overflow:hidden;padding:1.05rem 0;border-block:1px solid var(--forest)}
.marquee-track{display:flex;gap:2.4rem;width:max-content;animation:marquee 42s linear infinite;align-items:center}
.marquee-track span{font-family:var(--display);font-size:1.35rem;font-style:italic;white-space:nowrap}
.marquee-track .ar{font-family:var(--arabic);font-style:normal;font-size:1.5rem;color:var(--gold)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.section{max-width:var(--max);margin:0 auto;padding:var(--pad) var(--gutter)}
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4rem)}

.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.brand-belief{margin-top:1.5rem;max-width:33rem}
.pillar{padding:2rem 2rem 0 0}
.pillar+.pillar{padding-left:2rem;border-left:1px solid var(--line)}
.pillar-num{font-family:var(--display);font-style:italic;color:var(--sage);font-size:1.1rem}
.pillar h3{margin:.8rem 0 .7rem;font-size:1.9rem}
.pillar p{color:var(--muted);max-width:21rem}

/* ritual */
.ritual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start;padding-top:0}
.ritual-media{position:sticky;top:96px;border-radius:6px;overflow:hidden;background:var(--paper)}
.ritual-media img{width:100%;aspect-ratio:1214/1295;object-fit:cover}
.ritual-copy h2{margin-bottom:1rem}
.tracker{list-style:none;margin-top:2.2rem;border-top:1px solid var(--line)}
.prayer{width:100%;display:grid;grid-template-columns:28px 7.5rem 1fr auto;align-items:center;gap:1rem;padding:1.05rem .25rem;border-bottom:1px solid var(--line);text-align:left;transition:background .3s var(--ease)}
.prayer:hover{background:rgba(126,151,121,.08)}
.ring{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--sage-deep);position:relative;transition:background .35s var(--ease)}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--cream);transform:scale(0);transition:transform .35s var(--ease)}
.prayer[aria-pressed="true"] .ring{background:var(--sage-deep)}
.prayer[aria-pressed="true"] .ring::after{transform:scale(.45)}
.p-name{font-family:var(--display);font-size:1.4rem}
.p-word{color:var(--muted);font-style:italic;font-family:var(--display);font-size:1.1rem}
.p-ar{font-family:var(--arabic);font-size:1.3rem;color:var(--sage-deep);direction:rtl}
.prayer[aria-pressed="true"] .p-name{color:var(--sage-deep)}
.tracker-status{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}
.progress{flex:1 1 140px;height:4px;background:var(--sand);border-radius:4px;overflow:hidden}
.progress-fill{display:block;height:100%;width:0;background:var(--sage-deep);transition:width .5s var(--ease)}
.status-text{font-size:.86rem;color:var(--muted)}
.reset-btn{font-size:.8rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--sage-deep)}
.dhikr{margin-top:2.6rem;padding:1.6rem;background:var(--paper);border-radius:6px}
.dhikr-label{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.dhikr-btn{width:100%;margin-top:1rem;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.25rem 1rem;text-align:left;padding:1.2rem 1.3rem;background:var(--cream);border:1px solid var(--line);border-radius:4px;transition:transform .15s var(--ease),border-color .3s}
.dhikr-btn:hover{border-color:var(--sage)}
.dhikr-btn:active{transform:scale(.985)}
.dhikr-word{font-family:var(--display);font-size:1.8rem;color:var(--sage-deep)}
.dhikr-count{font-family:var(--display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.dhikr-hint{grid-column:1/-1;font-size:.78rem;color:var(--muted)}
.dhikr-steps{display:flex;gap:.4rem;margin-top:1rem}
.dhikr-steps span{flex:1;height:3px;background:var(--sand);border-radius:3px;transition:background .3s}
.dhikr-steps span.on{background:var(--sage-deep)}
.dhikr-btn.bump .dhikr-count{animation:bump .25s var(--ease)}
@keyframes bump{50%{transform:scale(1.12)}}

/* dark */
.dark{background:var(--forest);color:var(--on-dark)}
.smart{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-inline:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)))}
.smart-copy h2{margin-bottom:1rem}
.toggle{display:inline-flex;margin-top:2rem;border:1px solid rgba(239,233,220,.25);border-radius:100px;padding:4px}
.toggle-btn{padding:.55rem 1.4rem;border-radius:100px;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);transition:background .3s,color .3s}
.toggle-btn.active{background:var(--on-dark);color:var(--forest)}
.readout{margin-top:2rem}
.readout-num{font-family:var(--display);font-size:clamp(4.5rem,9vw,7rem);line-height:1;font-variant-numeric:tabular-nums;transition:color .5s}
.readout-unit{font-family:var(--display);font-size:2rem;margin-left:.2rem;vertical-align:top}
.smart.hot .readout-num{color:var(--gold)}
.smart:not(.hot) .readout-num{color:#A9D6E3}
.readout-note{color:var(--on-dark-muted);margin-top:.4rem}
.spec-list{list-style:none;margin-top:2rem;border-top:1px solid rgba(239,233,220,.15)}
.spec-list li{padding:.8rem 0;border-bottom:1px solid rgba(239,233,220,.15);font-size:.92rem}
.smart-media{position:relative;aspect-ratio:933/1400;max-height:82vh;width:100%;max-width:500px;justify-self:center;border-radius:6px;overflow:hidden}
.mode-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.mode-img.show{opacity:1;transform:scale(1)}

/* sizes */
.sizes-media{border-radius:6px;overflow:hidden;background:var(--paper)}
.sizes-media img{width:100%;aspect-ratio:1374/1145;object-fit:cover}
.size-picker{display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.6rem;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.size-btn{padding:1.05rem .5rem;font-family:var(--display);font-size:1.3rem;transition:background .3s,color .3s}
.size-btn+.size-btn{border-left:1px solid var(--line)}
.size-btn:hover{background:var(--paper)}
.size-btn.active{background:var(--sage-deep);color:var(--cream)}
.size-detail{margin-top:1.6rem;max-width:40rem}
.sd-title{font-size:1.7rem}
.sd-text{color:var(--muted);margin-top:.5rem}

/* collection */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
.col-card .col-img{border-radius:6px;overflow:hidden;background:var(--paper);aspect-ratio:933/1400}
.col-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.col-card:hover img{transform:scale(1.04)}
.col-card h3{margin-top:1.1rem}
.col-card p{color:var(--muted);font-size:.92rem;margin-top:.3rem}

/* made to last */
.last{padding-top:0}
.last-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.last-item{background:var(--paper);padding:2rem;border-radius:6px}
.last-item h3{margin-bottom:.6rem}
.last-item p{color:var(--muted);font-size:.95rem}

/* faq */
.faq{padding-top:0;max-width:900px}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;font-family:var(--display);font-size:1.35rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;color:var(--sage-deep);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.ans>p{overflow:hidden;color:var(--muted);max-width:40rem}
.faq details[open] .ans{grid-template-rows:1fr}
.faq details[open] .ans>p{padding-bottom:1.4rem}

/* waitlist */
.waitlist{padding:var(--pad) var(--gutter);text-align:center}
.wl-inner{max-width:38rem;margin:0 auto}
.wl-inner .body{margin:1rem auto 0}
.wl-form{display:flex;gap:.6rem;margin-top:2rem}
.wl-form input{flex:1;min-width:0;padding:.95rem 1.1rem;border-radius:2px;border:1px solid rgba(239,233,220,.3);background:rgba(239,233,220,.06);color:var(--on-dark);font:inherit}
.wl-form input::placeholder{color:var(--on-dark-muted)}
.wl-form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.wl-msg{margin-top:1rem;min-height:1.6em;color:var(--gold);font-size:.92rem}

/* footer */
.footer{background:#151d17;color:var(--on-dark);padding:clamp(3rem,6vw,5rem) var(--gutter) 2rem;text-align:center;overflow:hidden}
.foot-big{font-family:var(--display);font-size:clamp(4.5rem,19vw,15rem);line-height:1;letter-spacing:-.03em;color:var(--sage)}
.foot-tag{letter-spacing:.32em;font-size:.8rem;margin-top:1rem;color:var(--on-dark-muted)}
.foot-row{display:flex;justify-content:space-between;max-width:var(--max);margin:3rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(239,233,220,.12);font-size:.82rem;color:var(--on-dark-muted)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* responsive */
@media (max-width:900px){
  .nav-links{display:none}
  .hero,.ritual,.smart{grid-template-columns:1fr}
  .hero-media{order:-1;max-width:300px;max-height:none}
  .ritual-media{position:relative;top:0}
  .smart-media{max-width:380px;max-height:none}
  .pillar-grid,.col-grid,.last-grid{grid-template-columns:1fr}
  .pillar,.pillar+.pillar{padding:1.6rem 0;border-left:0;border-bottom:1px solid var(--line)}
  .col-grid{gap:2.5rem}
  .col-card .col-img{max-width:420px}
}
@media (max-width:520px){
  .prayer{grid-template-columns:24px 1fr auto;row-gap:.1rem}
  .p-word{grid-column:2}
  .p-ar{grid-row:1/3;grid-column:3}
  .p-name{grid-column:2}
  .ring{grid-row:1/3}
  .wl-form{flex-direction:column}
  .size-btn{font-size:1.05rem}
  .btn-small{padding:.6rem .8rem;font-size:.66rem;letter-spacing:.08em}
  .foot-row{flex-direction:column;gap:.4rem}
}

/* A living daily ritual: restrained motion, tactile product exploration. */
.page-progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;background:var(--sage-deep);transform:scaleX(0);transform-origin:left;pointer-events:none}
.live-dot{display:inline-block;width:6px;height:6px;background:var(--sage-deep);border-radius:50%;margin-right:.5rem;box-shadow:0 0 0 4px #7e97791a}
.hero{max-width:1400px;grid-template-columns:1fr 1fr;gap:4rem;padding-top:2.8rem}
.hero-copy{padding-bottom:1rem}
.hero h1{font-size:clamp(3rem,5.4vw,5.1rem);line-height:1.04}
.hero-experience{--scene:#d6dfce;position:relative;isolation:isolate;padding:2.8rem 2.5rem 1.2rem;background:var(--paper);border-radius:240px 240px 8px 8px;text-align:center}
.hero-halo{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:-1}
.hero-halo::before{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse at 70% 30%,var(--scene),transparent 65%);animation:daylight 14s ease-in-out infinite alternate}
.hero-halo::after{content:"";position:absolute;width:360px;height:360px;border:1px solid #7e977930;border-radius:50%;left:50%;top:16%;transform:translateX(-50%);box-shadow:0 0 0 35px #7e97790b,0 0 0 70px #7e977908}
@keyframes daylight{to{transform:translate(-5%,8%) scale(1.12)}}
.stage-label{display:block;font-size:.62rem;letter-spacing:.22em;color:var(--muted);margin-bottom:1.1rem}
.hero-media{height:clamp(340px,44vw,540px);max-height:58vh;max-width:360px;margin:auto;aspect-ratio:933/1400;border-radius:180px 180px 4px 4px;box-shadow:0 20px 35px #24291f12}
.hero-media img{transform:scale(1.025) translate(var(--px,0px),var(--py,0px));transition:transform .7s var(--ease)}
.temp-chip{left:.8rem;bottom:.8rem;padding:.4rem .8rem}
.moment-card{position:absolute;right:.8rem;bottom:7rem;display:grid;text-align:left;gap:.1rem;min-width:195px;padding:1rem 1.3rem;background:var(--cream);border:1px solid #cfc5b077;box-shadow:0 12px 30px #24291f0b;transform:rotate(-3deg)}
.moment-index{font-size:.58rem;letter-spacing:.16em;color:var(--muted)}
.moment-word{font-family:var(--display);font-size:1.65rem;color:var(--sage-deep)}
.moment-caption{font-size:.7rem;color:var(--muted)}
.moment-card.changing{animation:moment-in .5s var(--ease)}
@keyframes moment-in{from{opacity:.35;transform:translateY(10px) rotate(0)}to{opacity:1;transform:rotate(-3deg)}}
.day-selector{position:relative;display:flex;justify-content:center;margin-top:1.5rem;gap:.15rem}
.day-btn{padding:.5rem .65rem;font-size:.74rem;color:var(--muted);border-bottom:2px solid transparent;transition:color .3s,background .3s}
.day-btn:hover{background:#7e977912}
.day-btn.active{border-color:var(--sage-deep);color:var(--sage-deep);font-weight:600}
.stage-hint{display:block;font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--muted);margin-top:.7rem}
.hero-experience[data-moment="1"]{--scene:#d2c8b2}
.hero-experience[data-moment="2"]{--scene:#b2bba6}
.hero-experience[data-moment="3"]{--scene:#c8b59b}
.hero-experience[data-moment="4"]{--scene:#9ba9b6}
.pillar{transition:transform .45s var(--ease)}
.pillar:hover{transform:translateY(-5px)}
.prayer[aria-pressed="true"]{background:#7e977915}
.prayer[aria-pressed="true"] .ring{animation:ring-mark .45s var(--ease)}
@keyframes ring-mark{50%{box-shadow:0 0 0 7px #7e977928}}
.smart{position:relative;isolation:isolate}
.smart::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 60%,#7e97791c,transparent 60%);opacity:1;transition:opacity 1s}
.smart.hot::before{background:radial-gradient(ellipse at 18% 60%,#c9a45c22,transparent 60%)}
.smart-media{box-shadow:0 24px 60px #0002}
.hotspot{position:absolute;z-index:3;width:40px;height:40px;border:1px solid #f4efe4c0;background:var(--forest);color:var(--cream);border-radius:50%;font-size:1.4rem;line-height:1;box-shadow:0 0 0 6px #f4efe425;transition:transform .3s,background .3s}
.hotspot:hover,.hotspot[aria-expanded="true"]{transform:scale(1.12);background:var(--sage-deep)}
.spot-lid{top:22%;left:20%}
.spot-body{top:58%;right:17%}
.smart.hot .spot-lid{top:15%;left:44%}
.smart.hot .spot-body{top:54%;right:26%}
.feature-popover{position:absolute;z-index:4;bottom:3.6rem;left:1rem;right:1rem;background:var(--cream);color:var(--ink);padding:1.2rem 1.4rem;box-shadow:0 12px 25px #0002;border-radius:3px}
.feature-popover:not([hidden]){animation:popover-in .35s var(--ease)}
@keyframes popover-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.feature-popover .eyebrow{font-size:.6rem;margin-bottom:.5rem}
.feature-popover p:last-child{font-size:.85rem;color:var(--muted);margin-top:.5rem}
.explore-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--forest);color:var(--cream);padding:.45rem .85rem;font-size:.67rem;letter-spacing:.04em;border-radius:100px}
.sizes{padding-bottom:3rem}
.collection{padding-top:3rem}
.size-picker{position:relative}
.size-picker::after{content:"";position:absolute;bottom:0;left:0;width:25%;height:3px;background:var(--gold);transform:translateX(calc(var(--size-index,0) * 100%));transition:transform .6s var(--ease);pointer-events:none}
.size-detail.changing{animation:popover-in .4s var(--ease)}
.col-card{transition:transform .5s var(--ease)}
.col-card:hover{transform:translateY(-6px)}
.finish-open{margin-top:1rem;font-size:.8rem;color:var(--sage-deep)}
.finish-open span{display:inline-block;margin-left:.5rem;transition:transform .3s}
.finish-open:hover span{transform:translate(3px,-3px)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"↗";margin-left:.5rem;transition:transform .3s}
.btn:hover::after{transform:translate(2px,-2px)}
.btn-small::after{content:none}
.preview-note{font-size:.72rem;color:var(--on-dark-muted);margin-top:.75rem}
.finish-dialog{position:fixed;inset:0;margin:auto;width:min(940px,calc(100vw - 3rem));max-height:90vh;overflow:auto;border:0;background:var(--cream);color:var(--ink);box-shadow:0 30px 100px #0004;border-radius:5px}
.finish-dialog[open]{display:grid;grid-template-columns:1fr 1fr;animation:popover-in .45s var(--ease)}
.finish-dialog::backdrop{background:#151d17b8;backdrop-filter:blur(7px)}
.dialog-close{position:absolute;top:.8rem;right:.8rem;width:40px;height:40px;z-index:2;background:var(--cream);border:1px solid var(--line);border-radius:50%;font-size:1.7rem}
.dialog-image{background:var(--paper)}
.dialog-image img{width:100%;height:100%;object-fit:cover}
.dialog-copy{padding:4rem 2.5rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.dialog-copy h2{margin-bottom:1rem}
.finish-description{color:var(--muted)}
.finish-ritual{font-family:var(--display);font-size:2rem;line-height:1.2;margin:2rem 0;color:var(--sage-deep)}
.dialog-done::after{content:none}
body.dialog-open{overflow:hidden}
@media(min-width:901px){.hero .lede{font-size:1.04rem}.hero-points{gap:.9rem;font-size:.77rem}.hero .cta-row{gap:1.3rem}}
@media(max-width:1100px) and (min-width:901px){.hero{gap:2rem}.hero-experience{padding-inline:1.3rem}.moment-card{right:-.3rem}.day-btn{padding-inline:.45rem}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:2rem}
  .hero-experience{grid-row:2;max-width:480px;width:100%;justify-self:center;padding-top:2.2rem}
  .hero-copy{padding-bottom:0}
  .hero h1{max-width:680px}
  .hero-media{height:420px;max-height:none;max-width:280px;order:initial}
  .hero-points{margin-top:1.7rem;padding-top:1rem}
  .hero .cta-row{margin-top:1.6rem}
  .moment-card{right:0;bottom:7rem}
}
@media(max-width:520px){
  .hero{padding-top:2rem;gap:2.2rem}
  .hero h1{font-size:3.15rem}
  .hero .eyebrow{font-size:.6rem;letter-spacing:.13em}
  .hero .lede{font-size:.96rem;line-height:1.65}
  .hero .cta-row{gap:1.2rem}
  .hero .btn{padding:.9rem 1.05rem;font-size:.71rem}
  .hero .link-arrow{font-size:.8rem}
  .hero-points{font-size:.73rem;gap:.65rem 1rem}
  .hero-experience{padding:2rem 1rem 1rem}
  .hero-media{height:360px;max-width:240px}
  .moment-card{min-width:170px;padding:.75rem 1rem;right:-.1rem;bottom:7rem}
  .moment-word{font-size:1.45rem}
  .day-btn{padding:.5rem .5rem;font-size:.69rem}
  .stage-hint{font-size:.85rem}
  .smart-media{max-width:340px}
  .finish-dialog{width:calc(100vw - 1.5rem);max-height:92vh}
  .finish-dialog[open]{grid-template-columns:1fr}
  .dialog-image{height:39vh;overflow:hidden}
  .dialog-image img{object-fit:contain}
  .dialog-copy{padding:1.6rem}
  .dialog-copy h2{font-size:2.3rem}
  .finish-ritual{font-size:1.5rem;margin:1.2rem 0}
  .dialog-copy .eyebrow{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media img{transform:none!important}
  .moment-card{transform:none}
  .col-card:hover,.pillar:hover{transform:none}
}

/* A prayer companion with real calculated times and visible check-offs. */
.ritual-media{overflow:visible;background:transparent}
.ritual-media>img{border-radius:6px;aspect-ratio:933/1400;object-fit:contain}
.lid-concept{padding:1.4rem;background:var(--paper);margin-top:1rem;border-radius:6px}
.lid-concept .eyebrow{font-size:.64rem;margin-bottom:.8rem}
.lid-display{border:1px solid #7e97794d;background:#18221b;color:var(--on-dark);padding:1.5rem;border-radius:12px;text-align:center;box-shadow:inset 0 0 30px #0004}
.lid-next-label{display:block;font-size:.57rem;letter-spacing:.22em;color:#B7B9A6}
.lid-next-name{display:block;font-family:var(--display);font-weight:400;font-size:2.2rem;line-height:1.2;margin-top:.5rem}
.lid-next-time{color:#A9D6E3;font-variant-numeric:tabular-nums;font-size:1.1rem}
.lid-checks{display:flex;justify-content:space-between;gap:.4rem;margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid #efe9dc25}
.lid-checks button{display:grid;justify-items:center;gap:.5rem;flex:1}
.lid-checks button>span{display:grid;place-items:center;width:28px;height:28px;color:transparent;border:1px solid #b7b9a660;border-radius:50%;transition:background .3s,color .3s,transform .3s}
.lid-checks button[aria-pressed="true"]>span{background:#C9A45C;color:#18221b;border-color:#C9A45C;animation:ring-mark .45s var(--ease)}
.lid-checks small{font-size:.6rem;color:var(--on-dark-muted)}
.lid-concept-note{font-size:.71rem;color:var(--muted);margin-top:.8rem;line-height:1.6}
.prayer-day{margin-top:1.8rem}
.prayer-day-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.7rem;flex-wrap:wrap}
.prayer-day-top .eyebrow{font-size:.6rem;letter-spacing:.13em;margin:0}
.prayer-date{font-size:.7rem;color:var(--muted)}
.next-prayer-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.4rem;background:var(--sage-deep);color:var(--cream);border-radius:4px}
.next-label,.countdown-label{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:.58rem;color:#e0e4d8}
.next-name{font-size:2.25rem;margin-top:.25rem}
.next-at{font-size:.75rem;color:#e0e4d8;margin-top:.35rem}
.next-countdown{text-align:right;white-space:nowrap}
.countdown-value{font-family:var(--display);font-size:2rem;line-height:1.2;font-variant-numeric:tabular-nums}
.countdown-label{margin-top:.3rem}
.location-row{display:flex;justify-content:space-between;align-items:center;gap:.7rem;font-size:.73rem;padding:1rem 0 .6rem}
.location-label{color:var(--muted)}
.location-use{font-size:.7rem;color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;min-height:32px}
.location-use:disabled{opacity:.65;cursor:wait}
.prayer-settings{border-block:1px solid var(--line)}
.prayer-settings summary{font-size:.72rem;cursor:pointer;padding:.65rem 0;color:var(--sage-deep)}
.prayer-settings-form{display:grid;gap:.8rem;padding:.5rem 0 1rem}
.prayer-settings label{display:grid;gap:.3rem;font-size:.68rem;color:var(--muted);min-width:0}
.prayer-settings input,.prayer-settings select{min-width:0;width:100%;padding:.6rem .55rem;border:1px solid var(--line);border-radius:2px;background:var(--cream);color:var(--ink);font:inherit;font-size:.8rem}
.settings-pair{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.prayer-settings .btn{font-size:.66rem;justify-self:start;padding:.7rem 1rem}
.location-message{font-size:.73rem;color:var(--sage-deep);margin-top:.5rem}
.location-message:empty{display:none}
.tracker{margin-top:1.1rem}
.prayer{grid-template-columns:28px 1fr 1fr auto;gap:.7rem}
.p-name{font-size:1.3rem}
.prayer-time{display:block;font-family:var(--sans);font-size:.65rem;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:.25rem}
.ring::after{content:"✓";inset:0;display:grid;place-items:center;color:var(--cream);font-family:var(--sans);font-size:.85rem;background:none;border-radius:0}
.prayer[aria-pressed="true"] .ring::after{transform:scale(1)}
.prayer.is-next{border-left:2px solid var(--sage-deep);padding-left:.5rem}
.prayer.is-next .prayer-time::after{content:" · next";color:var(--sage-deep);font-weight:600}
.day-achievement{display:flex;align-items:center;gap:.85rem;border:1px solid var(--line);padding:1rem;margin-top:1.3rem;border-radius:4px;transition:background .4s}
.achievement-symbol{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;color:var(--sage-deep)}
.achievement-title{font-family:var(--display);font-size:1.2rem;color:var(--sage-deep)}
.achievement-copy{font-size:.7rem;color:var(--muted);margin-top:.2rem}
.achievement-count{margin-left:auto;font-family:var(--display);font-size:1.5rem;white-space:nowrap;color:var(--sage-deep)}
.day-achievement.complete{background:var(--sage-deep);border-color:var(--sage-deep)}
.day-achievement.complete .achievement-title,.day-achievement.complete .achievement-copy,.day-achievement.complete .achievement-count,.day-achievement.complete .achievement-symbol{color:var(--cream)}
.day-achievement.complete .achievement-symbol{border-color:var(--sage);animation:ring-mark .6s var(--ease)}
.prayer-disclaimer,.storage-note{color:var(--muted);font-size:.68rem;line-height:1.6;margin-top:.85rem}
.prayer-disclaimer a{text-decoration:underline;text-underline-offset:2px}
.storage-note{margin-top:.45rem}
@media(max-width:520px){
  .prayer{grid-template-columns:24px 1fr auto}
  .p-word{grid-row:2}
  .p-ar{grid-row:1/3}
  .next-prayer-card{padding:1rem}
  .next-name{font-size:2rem}
  .countdown-value{font-size:1.7rem}
  .achievement-title{font-size:1.07rem}
  .achievement-copy{font-size:.66rem}
  .lid-concept{padding:1rem}
}

/* A little pop, without the noise. */
.try-tag{display:inline-block;background:var(--gold);color:var(--forest);padding:.4rem .65rem;letter-spacing:.06em;font-size:.58rem;border-radius:2px;transform:rotate(-3deg);margin-left:.7rem}
.ritual-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}
.day-btn{min-height:44px;position:relative}
.day-btn.active{background:var(--sage-deep);color:var(--cream);border-radius:2px;border-bottom-color:var(--gold)}
.day-btn.active::after{content:"";position:absolute;bottom:-6px;left:50%;width:4px;height:4px;background:var(--gold);border-radius:50%;transform:translateX(-50%)}
.day-selector{gap:.3rem}
.hero-experience{box-shadow:inset 0 0 0 1px #7e97791a}
.moment-card{border-left:3px solid var(--gold)}
.collection-intro{color:var(--muted);font-size:.95rem;margin-top:1rem;max-width:30rem}
.col-img{position:relative}
.finish-image{display:block;width:100%;text-align:left}
.col-img::after{content:"↗";position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cream);color:var(--forest);transition:transform .4s var(--ease),background .4s}
.col-card:hover .col-img::after{transform:rotate(45deg);background:var(--gold)}
.col-card:nth-child(2) .col-img::after{background:var(--paper)}
.col-card:nth-child(2):hover .col-img::after{background:var(--gold)}
.prayer.just-marked .ring{animation:check-pop .5s var(--ease)}
@keyframes check-pop{0%{transform:scale(.8)}55%{transform:scale(1.2);box-shadow:0 0 0 6px #c9a45c30}100%{transform:scale(1)}}
.prayer[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--gold);padding-left:.6rem}
.day-achievement.complete{border-bottom:3px solid var(--gold)}
.js .hero-copy,.js .hero-media{opacity:1;transform:none;animation:hero-enter .9s var(--ease) both}
@keyframes hero-enter{from{opacity:.7;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .hero-copy,.js .hero-media{animation:none}}
@media(max-width:520px){
  .hero h1{font-size:2.75rem}
  .hero .lede{font-size:.92rem;margin-top:1rem}
  .hero-points{display:none}
  .hero{gap:1.5rem}
}

/* Names that turn a daily companion into a personal gift. */
.nav-links{gap:clamp(.85rem,1.8vw,1.8rem)}
.hero-gift-link{display:flex;align-items:center;gap:.55rem;margin-top:1.3rem;color:var(--sage-deep);font-size:.73rem;flex-wrap:wrap}
.hero-gift-link>span:first-child{display:grid;place-items:center;background:var(--gold);color:var(--forest);width:24px;height:24px;border-radius:50%}
.hero-gift-link>span:last-child{text-decoration:underline;text-underline-offset:4px}
.personalize{background:var(--paper);max-width:none;padding-inline:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)));margin-bottom:var(--pad)}
.gift-heading{max-width:650px;margin-bottom:3rem}
.gift-heading h2{font-size:clamp(2.8rem,5.5vw,4.8rem)}
.gift-heading .body{margin-top:1.2rem;max-width:29rem}
.personalize-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.gift-stage{position:sticky;top:90px;padding-bottom:1rem}
.gift-bottle-preview{position:relative;border-radius:180px 180px 4px 4px;overflow:hidden;max-width:440px;margin:auto;aspect-ratio:933/1400}
.gift-bottle-preview img{width:100%;height:100%;object-fit:cover}
.bottle-name-wrap{position:absolute;top:34.5%;left:33%;width:33%;text-align:center;transform:rotate(-.5deg);line-height:1.4}
.bottle-name{display:inline-block;max-width:100%;white-space:nowrap;font-family:var(--display),var(--arabic);font-size:24px;color:#3E4E35;line-height:1.4}
.bottle-name.sample{opacity:.65}
.bottle-name.lettering-modern{font-family:var(--sans),var(--arabic);font-weight:500;letter-spacing:.015em}
.bottle-name.lettering-soft{font-style:italic}
.bottle-name.arabic-name{font-family:var(--arabic);font-style:normal;letter-spacing:0}
.personal-preview-label{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);font-size:.54rem;letter-spacing:.14em;white-space:nowrap;background:var(--cream);color:var(--sage-deep);padding:.45rem .65rem}
.gift-note-preview{position:relative;z-index:1;background:var(--cream);padding:1.7rem 2rem;margin:-1.5rem -.25rem 0 2rem;transform:rotate(-2deg);border-left:3px solid var(--gold);box-shadow:0 14px 30px #24291f10;min-height:170px;overflow-wrap:anywhere}
.gift-note-kicker{display:block;color:var(--sage-deep);font-size:.6rem;letter-spacing:.15em;margin-bottom:.7rem}
.gift-note-to{font-family:var(--display),var(--arabic);font-size:1.5rem;color:var(--sage-deep)}
.gift-note-message{font-size:.85rem;color:var(--muted);margin-top:.5rem;white-space:pre-wrap}
.gift-note-signature{display:block;font-family:var(--display);font-style:italic;color:var(--sage-deep);margin-top:1rem;font-size:1rem}
.gift-step{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.gift-step>span{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;font-family:var(--display);color:var(--sage-deep);font-size:.95rem}
.gift-step h3{font-size:1.8rem}
.gift-step-second{margin-top:2.3rem}
.gift-field-label,.personalize-form legend{font-size:.75rem;font-weight:500;color:var(--ink)}
.gift-field-label{display:block;margin-bottom:.55rem}
.gift-field-label>span{font-weight:400;color:var(--muted)}
.gift-name-input{position:relative}
.gift-name-input input,.personalize-form textarea{width:100%;border:1px solid var(--line);border-radius:3px;background:var(--cream);font-family:var(--sans),var(--arabic);color:var(--ink);font-size:1rem;padding:.9rem 1rem}
.gift-name-input input{padding-right:5rem}
.gift-name-input input[dir=auto]{text-align:start}
.gift-name-input input:focus,.personalize-form textarea:focus{outline:2px solid var(--sage-deep);outline-offset:2px}
.gift-name-input input[aria-invalid=true]{border-color:#8a4935}
.gift-name-count{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font-size:.66rem;color:var(--muted);pointer-events:none}
.mobile-name-preview{display:none}
.gift-field-help{font-size:.66rem;line-height:1.6;color:var(--muted);margin-top:.5rem}
.personalize-form fieldset{border:0;margin-top:1.5rem}
.personalize-form legend{padding:0;margin-bottom:.65rem}
.gift-style-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.gift-style{display:flex;flex-direction:column;gap:.3rem;align-items:center;justify-content:center;min-height:83px;border:1px solid var(--line);border-radius:3px;font-size:.69rem;background:var(--cream);transition:background .3s,transform .3s}
.gift-style>span{font-family:var(--display);font-size:1.65rem;line-height:1.2}
.gift-style[data-lettering=modern]>span{font-family:var(--sans)}
.gift-style[data-lettering=soft]>span{font-style:italic}
.gift-style:hover{transform:translateY(-2px)}
.gift-style.active{background:var(--sage-deep);border-color:var(--sage-deep);color:var(--cream);box-shadow:inset 0 -3px var(--gold)}
.personalize-form .gift-occasions{margin-top:0;margin-bottom:1.5rem}
.occasion-options{display:flex;gap:.5rem;flex-wrap:wrap}
.occasion{border:1px solid var(--line);border-radius:100px;font-size:.71rem;min-height:38px;padding:.45rem .85rem;background:var(--cream);transition:background .3s,border-color .3s}
.occasion:hover{border-color:var(--sage-deep)}
.occasion.active{background:var(--gold);border-color:var(--gold);color:var(--forest)}
.personalize-form textarea{resize:vertical;min-height:110px;display:block;font-size:.85rem;line-height:1.6}
.gift-message-count{float:right}
.gift-review-btn{margin-top:1.3rem}
.gift-form-feedback{font-size:.76rem;color:var(--sage-deep);margin-top:.7rem}
.gift-form-feedback:empty{display:none}
.gift-review{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);padding:1.3rem;margin-top:1rem;overflow-wrap:anywhere}
.gift-review:not([hidden]){animation:popover-in .4s var(--ease)}
.gift-review .eyebrow{font-size:.58rem;margin-bottom:.6rem}
.gift-review-title{font-size:1.5rem;color:var(--sage-deep)}
.gift-review-description{font-size:.69rem;color:var(--muted);margin-top:.5rem}
.gift-review-message{font-size:.85rem;white-space:pre-wrap;margin-top:.8rem}
.gift-edit{margin-top:1rem;font-size:.74rem}
.personalize-disclaimer{font-size:.67rem;color:var(--muted);line-height:1.7;margin-top:1.1rem}
.gift-closing{display:flex;align-items:center;gap:1.4rem;border-top:1px solid var(--line);margin-top:4rem;padding-top:2rem}
.gift-closing-mark{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--sage);color:var(--sage-deep);border-radius:50%;font-family:var(--display);font-size:1.8rem;flex-shrink:0}
.gift-closing p{font-family:var(--display);font-size:1.6rem;line-height:1.2;color:var(--sage-deep)}
.gift-closing a{margin-left:auto;font-size:.8rem;color:var(--sage-deep)}
@media(max-width:900px){
  .personalize-grid{grid-template-columns:1fr}
  .gift-stage{position:relative;top:0;max-width:450px;margin:0 auto;width:100%}
  .gift-bottle-preview{max-width:340px}
  .gift-note-preview{margin-top:-2rem}
  .gift-closing{flex-wrap:wrap}
  .gift-closing a{margin-left:0}
}
@media(max-width:520px){
  .hero-gift-link{font-size:.66rem;gap:.4rem;margin-top:1rem}
  .hero-gift-link>span:last-child{margin-left:1.9rem}
  .gift-heading{margin-bottom:2rem}
  .gift-heading h2{font-size:3rem}
  .gift-bottle-preview{max-width:300px}
  .gift-note-preview{padding:1.4rem;margin-left:1rem;margin-right:0}
  .gift-note-to{font-size:1.35rem}
  .gift-step h3{font-size:1.5rem}
  .gift-closing{gap:1rem}
  .gift-closing p{font-size:1.4rem}
  .gift-closing a{width:100%;margin-top:.3rem}
  .mobile-name-preview{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:center;margin-top:1rem;padding:.85rem 1rem;border-left:2px solid var(--gold);background:var(--cream)}
  .mobile-name-preview>span:first-child{font-size:.53rem;letter-spacing:.13em;color:var(--muted)}
  .mobile-preview-name{grid-row:2;font-family:var(--display),var(--arabic);font-size:1.35rem;overflow-wrap:anywhere;color:var(--sage-deep)}
  .mobile-preview-name.lettering-modern{font-family:var(--sans),var(--arabic)}
  .mobile-preview-name.lettering-soft{font-style:italic}
  .mobile-preview-name.arabic-name{font-family:var(--arabic);font-style:normal}
  .gift-see-bottle{grid-row:1/3;grid-column:2;font-size:.65rem;color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;max-width:85px;min-height:44px}
}

/* Comfortable Arabic line boxes keep diacritics and small interface copy readable. */
[dir=rtl] .hero h1{line-height:1.4;font-size:clamp(2.7rem,5.1vw,4.7rem)}
[dir=rtl] .hero h1 em{display:block}
[dir=rtl] .hero .lede{font-size:1.15rem;line-height:1.9}
[dir=rtl] .nav-links{font-size:1rem}
[dir=rtl] .nav .btn-small{font-size:.85rem}
[dir=rtl] .gift-field-label,[dir=rtl] .personalize-form legend{font-size:.9rem}
[dir=rtl] .gift-field-help,[dir=rtl] .personalize-disclaimer,[dir=rtl] .prayer-disclaimer,[dir=rtl] .storage-note,[dir=rtl] .next-label,[dir=rtl] .countdown-label,[dir=rtl] .location-row,[dir=rtl] .prayer-settings summary,[dir=rtl] .preview-note{font-size:.8rem}
[dir=rtl] .stage-label{font-size:.82rem}
[dir=rtl] .temp-chip{direction:ltr;font-family:var(--sans)}

/* Free learning: a hand-held stack, not a score for worship. */
.nav-links{gap:clamp(.7rem,1.25vw,1.2rem);white-space:nowrap}
.learn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem);align-items:center}
.learn-copy .body{margin-top:1.5rem}
.learn-free{font-size:.82rem;color:var(--sage-deep);margin-top:1.4rem}
.learning-progress{margin-top:2rem;font-size:.8rem;color:var(--sage-deep)}
.learning-dots{display:flex;gap:.6rem;margin:.85rem 0 1.2rem}
.learning-dots button{position:relative;min-width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font-size:.73rem;font-family:var(--sans);transition:background .2s,transform .2s}
.learning-dots button:hover{transform:translateY(-3px)}
.learning-dots button.active{background:var(--sage-deep);color:var(--cream);border-color:var(--sage-deep)}
.learning-dots button.explored::after{content:"";position:absolute;bottom:-4px;left:calc(50% - 3px);width:6px;height:6px;background:var(--sage-deep);border:1px solid var(--cream);border-radius:50%}
.learning-reset{font-size:.74rem}
.learning-session{font-size:.7rem;color:var(--muted);max-width:25rem;margin-top:1.1rem}
.learning-playground{min-width:0}
.learning-stack{position:relative;isolation:isolate;margin:1.2rem 1rem 0}
.stack-sheet{position:absolute;inset:0;border:1px solid var(--line);border-radius:10px;z-index:-1}
.sheet-two{background:var(--sage);transform:rotate(5deg) translate(8px,4px)}
.sheet-one{background:var(--sand);transform:rotate(-3deg) translate(-7px,4px)}
.learning-card{min-height:510px;display:flex;flex-direction:column;justify-content:space-between;position:relative;border:1px solid var(--line);border-radius:10px;padding:1.8rem 2rem;background:var(--paper);box-shadow:0 18px 35px #1f2b220d;touch-action:pan-y}
.learning-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.65rem;color:var(--sage-deep)}
.learning-index{font-family:var(--sans);white-space:nowrap}
.learning-card-front{text-align:center;padding:1.5rem 0}
.learning-arabic{font-family:var(--arabic);font-size:clamp(3rem,4.8vw,4.5rem);color:var(--sage-deep);line-height:1.9}
.learning-transliteration{font-size:.75rem;color:var(--muted);margin:.2rem 0 1.6rem}
.learning-title{font-size:2.15rem;color:var(--forest)}
.learning-teaser{font-size:.83rem;color:var(--muted);max-width:17rem;margin:.8rem auto 0}
.learning-card-back{padding:1.8rem 0 1rem}
.learning-back-title{font-size:1.9rem;color:var(--sage-deep);margin-bottom:1rem}
.learning-meaning{font-size:.86rem;line-height:1.7}
.learning-source{display:inline-block;font-size:.71rem;color:var(--sage-deep);text-decoration:underline;text-underline-offset:4px;margin-top:.65rem;line-height:1.8}
.learning-prompt{border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1rem}
.learning-prompt-label{font-size:.65rem;font-weight:600;color:var(--sage-deep)}
.learning-action{font-size:.84rem;line-height:1.65;margin-top:.45rem}
.learning-mark{display:block;border:1px solid var(--sage-deep);border-radius:3px;padding:.7rem 1rem;margin-top:1.1rem;font-size:.75rem;min-height:44px;text-align:start}
.learning-mark[aria-pressed=true]{background:var(--sage-deep);color:var(--cream)}
.learning-card-foot{text-align:center;font-family:var(--sans);font-size:.53rem;letter-spacing:.18em;color:var(--muted);direction:ltr}
.learning-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2.2rem}
.learning-prev,.learning-next{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;font-size:1.1rem;transition:background .2s,transform .2s}
.learning-prev:hover,.learning-next:hover{background:var(--paper);transform:translateY(-2px)}
.learning-turn{min-height:44px;padding:.5rem .8rem;font-size:.8rem;text-decoration:underline;text-underline-offset:5px;color:var(--sage-deep)}
.learning-hint{text-align:center;font-size:.68rem;color:var(--muted);margin-top:.8rem}
.learning-context{font-size:.67rem;line-height:1.7;color:var(--muted);max-width:27rem;margin:1.1rem auto 0;text-align:center}
[dir=rtl] .learning-prev span,[dir=rtl] .learning-next span{transform:scaleX(-1)}
[dir=rtl] .learning-card-top,[dir=rtl] .learning-prompt-label{font-size:.82rem}
[dir=rtl] .learning-meaning,[dir=rtl] .learning-action{font-size:1rem}
[dir=rtl] .learning-session,[dir=rtl] .learning-context,[dir=rtl] .learning-source,[dir=rtl] .learning-hint{font-size:.8rem}

/* Six-name prototype, with an honest, flat circumference plan. */
.personalize-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gift-stage,.personalize-form{min-width:0}
.name-wrap-planner{margin-top:1.3rem;background:var(--cream);border:1px solid var(--line);padding:1rem;max-width:100%;min-width:0}
.wrap-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.wrap-heading h3{font-size:1.35rem}
.wrap-count{font-size:.66rem;color:var(--sage-deep);white-space:nowrap}
.name-wrap-planner>p{font-size:.71rem;color:var(--muted);margin-top:.4rem}
.name-wrap-strip{display:grid;grid-auto-flow:column;grid-auto-columns:125px;gap:.45rem;overflow-x:auto;padding:.8rem .2rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--sage) var(--paper)}
.name-wrap-strip button{min-width:0;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;scroll-snap-align:start;border:1px dashed var(--line);border-radius:3px;padding:.7rem;transition:background .2s,transform .2s}
.name-wrap-strip button.filled{border-style:solid;background:var(--paper)}
.name-wrap-strip button.selected{border-color:var(--sage-deep);box-shadow:inset 0 -3px var(--gold)}
.name-wrap-strip button:hover{transform:translateY(-2px)}
.name-wrap-strip small{font-family:var(--sans);font-size:.6rem;color:var(--muted)}
.wrap-name{font-size:1rem;font-family:var(--display),var(--arabic);overflow-wrap:anywhere;line-height:1.5}
.wrap-name.lettering-modern{font-family:var(--sans),var(--arabic);font-size:.85rem}
.wrap-name.lettering-soft{font-style:italic}
.wrap-name.arabic-name{font-family:var(--arabic);font-style:normal}
.name-wrap-planner .wrap-disclaimer{font-size:.66rem;line-height:1.7}
.gift-note-preview{margin-top:1.3rem}
.extra-name-row{position:relative;margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.extra-name-row label{padding-inline-end:4.5rem}
.gift-remove-name{position:absolute;inset-inline-end:0;top:.35rem;font-size:.7rem;min-height:44px;padding:.4rem .2rem;text-decoration:underline;text-underline-offset:3px;color:var(--sage-deep)}
.gift-add-name{margin-top:1.1rem;display:inline-flex;gap:.6rem;align-items:center;border:1px solid var(--sage-deep);border-radius:3px;padding:.65rem 1rem;font-size:.78rem;min-height:44px;transition:background .2s,transform .2s}
.gift-add-name:hover:not(:disabled){background:var(--cream);transform:translateY(-2px)}
.gift-add-name:disabled{color:var(--muted);border-color:var(--line);cursor:not-allowed;background:var(--paper)}
.gift-cost-notice{border-inline-start:2px solid var(--gold);padding:.7rem .9rem;margin-top:.9rem}
.gift-cost-notice p{font-size:.74rem}
.gift-extra-summary{display:block;font-size:.69rem;color:var(--muted);margin-top:.3rem}
.gift-review-names{display:flex;flex-wrap:wrap;gap:.4rem .9rem;list-style:none;margin-top:.9rem;font-family:var(--display),var(--arabic);font-size:1.2rem;color:var(--sage-deep)}
.gift-review-names li{overflow-wrap:anywhere;max-width:100%}
.gift-review-extra{font-size:.73rem;line-height:1.65;color:var(--muted);margin-top:.75rem}
[dir=rtl] .wrap-count,[dir=rtl] .name-wrap-planner>p,[dir=rtl] .gift-cost-notice p,[dir=rtl] .gift-extra-summary,[dir=rtl] .gift-review-extra{font-size:.82rem}

/* The percentage is a future commitment, never a fabricated impact metric. */
.giving{display:grid;grid-template-columns:.55fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;border-top:1px solid var(--line)}
.giving-number{text-align:center;color:var(--sage-deep);background:var(--paper);padding:3rem 1rem;border-radius:180px 180px 3px 3px}
.giving-number>span{display:block;font-family:var(--display);font-size:clamp(6rem,12vw,10rem);line-height:1.2;letter-spacing:-.06em}
.giving-number>span>span{font-size:.45em;vertical-align:top;line-height:2;letter-spacing:-.04em}
.giving-number>p{font-size:.75rem;color:var(--muted);margin-top:.4rem}
.giving-copy .body{margin-top:1.2rem}
.giving-qualification{font-size:.8rem;color:var(--muted);line-height:1.8;margin-top:1rem}
.giving-details{border-block:1px solid var(--line);margin:1.4rem 0;padding:1rem 0;font-size:.78rem}
.giving-details summary{cursor:pointer;color:var(--sage-deep);font-weight:500;min-height:30px}
.giving-details ul{margin:1rem 0;padding-inline-start:1.2rem}
.giving-details p{color:var(--muted);font-size:.73rem}
.giving-copy>.link-arrow{font-size:.8rem}
[dir=rtl] .giving-qualification,[dir=rtl] .giving-details,[dir=rtl] .giving-details p{font-size:.9rem}
@media(max-width:1300px){.nav-links{display:none}}
@media(max-width:900px){
  .personalize-grid{grid-template-columns:minmax(0,1fr)}
  .learn{grid-template-columns:1fr;gap:2.5rem}
  .learn-copy{max-width:36rem}
  .learning-playground{width:100%;max-width:490px;margin:auto}
  .learning-card{min-height:500px}
  .gift-stage{position:relative;top:0}
  .giving{grid-template-columns:1fr;gap:2rem}
  .giving-number{width:210px;padding:1.5rem .8rem;margin:auto}
  .giving-number>span{font-size:6.5rem}
}
@media(max-width:520px){
  .learning-stack{margin-inline:.5rem}
  .learning-card{padding:1.4rem;min-height:490px}
  .learning-title{font-size:1.85rem}
  .learning-arabic{font-size:3rem}
  .learning-card-back{padding-block:1.3rem}
  .learning-back-title{font-size:1.7rem}
  .learning-meaning,.learning-action{font-size:.84rem}
  .learning-prompt{margin-top:1rem}
  .giving-number{width:180px}
  .name-wrap-strip{grid-auto-columns:115px}
  .name-wrap-planner{padding:.9rem}
  .gift-note-preview{margin-top:1rem}
}
@media(prefers-reduced-motion:reduce){
  .learning-dots button,.learning-prev,.learning-next,.name-wrap-strip button,.gift-add-name{transition:none;transform:none!important}
}

/* A section bar on desktop, an accessible disclosure on smaller screens. */
html{scroll-padding-top:calc(var(--site-header-height,120px) + 16px)}
.site-header{position:sticky;top:0;z-index:50;background:var(--cream);box-shadow:0 1px 0 var(--line)}
.site-header .nav{position:relative;top:auto;z-index:auto}
.section-menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem clamp(.2rem,1vw,.9rem);padding:.3rem var(--gutter) .6rem;border-top:1px solid var(--line);background:var(--cream)}
.section-menu[hidden]{display:none}
.section-menu a{position:relative;display:block;padding:.5rem .45rem;font-size:.8125rem;color:var(--muted);min-height:40px;line-height:1.7;border-radius:3px;white-space:nowrap}
.section-menu a:hover{background:var(--paper);color:var(--sage-deep)}
.section-menu a[aria-current=location]{color:var(--sage-deep);background:var(--paper);box-shadow:inset 0 -2px var(--gold)}
.menu-toggle{display:none;align-items:center;gap:.5rem;min-height:44px;font-size:.8125rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:3px}
.menu-icon{display:flex;flex-direction:column;gap:5px;width:16px}
.menu-icon>span{height:1px;width:16px;background:currentColor;transition:transform .2s}
.menu-toggle[aria-expanded=true] .menu-icon>span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-icon>span:last-child{transform:translateY(-3px) rotate(-45deg)}
.admin-entry{font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}
.draft-preview-banner{background:var(--paper);border-bottom:1px solid var(--line);padding:.65rem var(--gutter);font-size:.75rem;color:var(--sage-deep);text-align:center}
[dir=rtl] .section-menu a,[dir=rtl] .menu-toggle{font-size:1rem}
@media(max-width:900px){
  .js .menu-toggle{display:inline-flex}
  .section-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;justify-content:stretch;gap:.35rem;padding:1rem var(--gutter);max-height:65vh;overflow-y:auto;overscroll-behavior:contain}
  .section-menu a{min-height:44px;white-space:normal;overflow-wrap:anywhere;font-size:.875rem;padding:.65rem .8rem;background:var(--paper)}
  .section-menu a[aria-current=location]{box-shadow:inset 3px 0 var(--gold)}
  [dir=rtl] .section-menu a[aria-current=location]{box-shadow:inset -3px 0 var(--gold)}
}
@media(max-width:600px){.site-header .nav-actions>.btn{display:none}.site-header .nav-actions{gap:.5rem}}
@media(prefers-reduced-motion:reduce){.menu-icon>span{transition:none}}

/* Flip through normal-lid bottle designs, then configure the selected bottle. */
.smart-media{width:min(100%,54.65vh);max-height:none}
.smart-media .spot-lid{top:9%;left:55%}
.smart-media .spot-body{top:55%;left:60%}
.size-proposal{max-width:640px;margin:0 auto 2rem;text-align:center;color:var(--muted)}
.collection-browser{max-width:520px;margin:2rem auto 0}
.stack-navigation{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}
.stack-navigation button{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--sage-deep);border-radius:50%;font-size:1.3rem}
.stack-navigation button:hover{background:var(--paper)}
.stack-position{font-size:.875rem;color:var(--sage-deep);text-align:center}
.bottle-stack.stack-ready{display:block;position:relative;height:620px;margin:0 28px;touch-action:pan-y}
.stack-ready .col-card{position:absolute;inset:0;display:flex;flex-direction:column;padding:1rem;border:1px solid var(--line);background:var(--cream);border-radius:9px;transform-origin:50% 85%;transition:transform .4s var(--ease),opacity .4s var(--ease);transform:translate(16px,10px) rotate(3deg);z-index:2;opacity:.7}
.stack-ready .col-card[style*="--stack-offset: 2"]{transform:translate(-16px,20px) rotate(-3deg);z-index:1;opacity:.45}
.stack-ready .col-card.is-front{transform:none;z-index:3;opacity:1}
.stack-ready .col-card:hover{transform:none}
.stack-ready .col-card:not(.is-front){pointer-events:none}
.stack-ready .col-card .col-img{display:block;aspect-ratio:auto;height:400px;width:100%;max-width:none;flex:none}
.stack-ready .col-card .col-img img{object-fit:contain}
.stack-ready .col-card h3{margin-top:1rem;font-size:1.6rem}
.stack-ready .col-card p{font-size:.875rem;margin:.4rem 0 1rem}
.col-card .finish-open.btn{color:var(--cream)}
.stack-ready .col-card .finish-open{margin-top:auto;align-self:stretch}
.stack-ready .col-card .finish-open::after{content:none}
.stack-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.stack-choices button{font-size:.8rem;min-height:44px;padding:.5rem .8rem;border:1px solid var(--line);border-radius:3px}
.stack-choices button[aria-pressed=true]{background:var(--sage-deep);color:var(--cream);border-color:var(--sage-deep)}
.stack-help{font-size:.8125rem;text-align:center;color:var(--muted);margin-top:1rem}
[dir=rtl] .stack-navigation button{transform:scaleX(-1)}
.product-configuration{padding-bottom:1.5rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.product-configuration label{display:block;font-size:.875rem;margin:.8rem 0 .4rem}
.product-configuration select,.product-configuration input{display:block;width:100%;min-height:48px;padding:.6rem .8rem;background:var(--cream);border:1px solid var(--line);border-radius:3px;color:var(--ink);font:inherit}
.product-config-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.product-availability{font-size:.8125rem;color:var(--muted);margin-top:1rem;line-height:1.7}
.gift-bottle-preview[data-model="0"] .bottle-name{color:var(--gold)}
.gift-bottle-preview[data-model="0"] .bottle-name-wrap{top:44.8%;left:30%;width:40%}
.gift-bottle-preview[data-model="1"] .bottle-name-wrap{top:27.5%;left:29%;width:42%}
.gift-bottle-preview[data-model="1"] .bottle-name{color:var(--forest)}
.gift-bottle-preview[data-model="2"] .bottle-name-wrap{top:34%;left:30%;width:40%}
.gift-bottle-preview[data-model="2"] .bottle-name{color:var(--cream)}
.checkout-open{margin:1rem 0}
.checkout-preview{margin:1rem 0;padding:1.25rem;background:var(--paper);border:1px solid var(--line);scroll-margin-top:calc(var(--site-header-height,100px) + 24px)}
.checkout-preview[hidden]{display:none}
.checkout-preview p{font-size:.875rem;line-height:1.7;margin:.8rem 0}
.checkout-preview .btn{display:flex;width:100%;margin:1rem 0}
.checkout-preview .btn:disabled{opacity:1;cursor:not-allowed;background:var(--muted);color:var(--cream);transform:none}
.checkout-preview .btn:disabled::after{content:none}
.ritual-media>img{border-radius:6px}
@media(max-width:600px){
  .bottle-stack.stack-ready{height:555px;margin-inline:26px}
  .stack-ready .col-card .col-img{height:320px}
  .stack-ready .col-card h3{font-size:1.4rem}
  .stack-choices button{font-size:.75rem;padding-inline:.6rem}
  .collection-browser{margin-top:1.5rem}
}
.bottle-stack:not(.stack-ready){grid-template-columns:1fr}
html:not(.js) .stack-navigation,html:not(.js) .stack-choices,html:not(.js) .stack-help{display:none}
@media(prefers-reduced-motion:reduce){.stack-ready .col-card{transition:none}}

/* Product motion is independent of the cards: original photo body + original photo lid. */
.bottle-stack.stack-ready{display:grid;grid-template-columns:minmax(0,1fr);height:auto;min-height:770px}
.stack-ready .col-card{position:relative;inset:auto;grid-area:1 / 1;min-width:0;min-height:770px;transform:translate(9px,10px) rotate(2deg);transition:opacity .28s}
.stack-ready .col-card[style*="--stack-offset: 2"]{transform:translate(-9px,18px) rotate(-2deg)}
.stack-ready .col-card.is-front,.stack-ready .col-card.is-front:hover{transform:none}
.stack-ready .col-card:not(.is-front)>*{visibility:hidden}
.stack-ready .col-card:not(.is-front):hover{transform:translate(9px,10px) rotate(2deg)}
.stack-ready .col-card .product-scene{position:relative;isolation:isolate;height:430px;perspective:900px;background:radial-gradient(ellipse at 50% 35%,#F4EFE4,#E4DCCB);overflow:hidden}
.product-scene::before{content:"";position:absolute;width:220px;height:220px;border:1px solid #7e977940;border-radius:50%;left:50%;top:48%;translate:-50% -50%;background:#7e977914;z-index:-1}
.bottle-object{display:block;width:100%;height:100%;transform-origin:50% 55%;filter:drop-shadow(8px 10px 7px #1f2b2222)}
.bottle-artwork{display:block;width:100%;height:100%;overflow:visible}
.bottle-ground-shadow{position:absolute;bottom:4%;left:50%;translate:-50% 0;width:92px;height:12px;background:#1f2b222c;border-radius:50%;filter:blur(7px)}
.bottle-cap{transform-box:fill-box;transform-origin:50% 95%;transition:transform .75s cubic-bezier(.22,1.3,.3,1)}
.bottle-mouth{fill:#283026;stroke:#b79a69;stroke-width:5;opacity:0;transition:opacity .25s}
.lid-is-open .bottle-cap{transform:translateY(-165px) rotate(-12deg)}
.lid-is-open .bottle-mouth{opacity:1}
.lid-initializing .bottle-cap,.lid-initializing .bottle-mouth{transition:none}
.bottle-message{border-inline-start:2px solid var(--gold);padding:.5rem .8rem;margin:.6rem 0 .8rem;min-height:72px}
.bottle-lid-state{display:block;font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bottle-thought{display:block;font-family:var(--display),var(--arabic);font-size:1.25rem;color:var(--sage-deep);line-height:1.35;margin-top:.2rem}
.bottle-play-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.bottle-play-controls button{flex:1;min-height:44px;padding:.55rem .7rem;border:1px solid var(--line);border-radius:4px;font-size:.78rem;color:var(--sage-deep);transition:background .2s,translate .25s}
.bottle-play-controls button:hover{background:var(--paper);translate:0 -2px}
.bottle-play-controls button:active{translate:0 0;background:var(--sand)}
.bottle-motion-note,.metric-note{font-size:.75rem;color:var(--muted);line-height:1.7;text-align:center;margin:1rem auto 0;max-width:620px}
.metric-note a{text-decoration:underline;text-underline-offset:3px}
.capacity-explanation{font-size:.8rem;color:var(--muted);margin-top:.6rem}
.stack-ready .col-card .bottle-motion-note{font-size:.75rem}

/* A deliberately tactile handle design study. */
.dhikr-handle{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,5rem)}
.handle-copy .body{margin:1.5rem 0}
.handle-benefits{list-style:none;counter-reset:handle;display:grid;gap:.8rem;margin:1.6rem 0 2rem}
.handle-benefits li{counter-increment:handle;display:flex;align-items:center;gap:.9rem;font-size:.9rem;color:var(--sage-deep)}
.handle-benefits li::before{content:"0" counter(handle);display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font-size:.7rem}
.handle-disclaimer{font-size:.76rem;line-height:1.8;color:var(--muted);margin-top:1.5rem;max-width:36rem}
.handle-playground{background:var(--paper);border:1px solid var(--line);padding:clamp(1.2rem,3vw,2rem);border-radius:160px 160px 8px 8px;box-shadow:0 20px 35px #1f2b2209}
.handle-demo-top{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin:1.1rem 0 .5rem;color:var(--sage-deep);font-size:.65rem;font-weight:600;letter-spacing:.08em;text-align:center}
.concept-pill{border:1px solid var(--line);border-radius:30px;padding:.4rem .65rem;font-weight:400;letter-spacing:0}
.handle-illustration{max-width:355px;margin:auto}
.remembrance-tap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;width:100%;min-height:235px;padding:2rem .7rem;border-radius:24px;background:var(--cream);color:var(--sage-deep);touch-action:manipulation;transition:background .2s,box-shadow .2s}
.remembrance-tap:hover{background:#faf6ee;box-shadow:0 8px 24px #1f2b2210}
.remembrance-tap:focus-visible{outline:3px solid var(--sage-deep);outline-offset:5px}
.remembrance-word{display:block;font-family:var(--display),var(--arabic);font-size:clamp(2rem,3.3vw,3.2rem);line-height:1.35;overflow-wrap:anywhere}
.remembrance-nudge{font-size:.78rem;color:var(--muted);line-height:1.6}
.word-sparkles{position:absolute;inset:0;pointer-events:none}
.word-sparkles i{position:absolute;opacity:0;font-style:normal;color:#8b682d;font-size:1.3rem}
.word-sparkles i:nth-child(1){inset:30% auto auto 15%}
.word-sparkles i:nth-child(2){inset:20% auto auto 50%}
.word-sparkles i:nth-child(3){inset:30% 15% auto auto}
.dhikr-word{display:inline-block}
.handle-action-label{text-align:center;font-size:.8rem;font-weight:500;color:var(--sage-deep);margin-top:.4rem}
.handle-status{text-align:center;min-height:2.8rem;margin-top:.7rem;font-family:var(--display),var(--arabic);font-size:1.5rem;line-height:1.4;color:var(--sage-deep)}
.handle-total{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-block:1px solid var(--line);padding:.8rem .2rem;margin:.5rem 0 1rem;font-size:.8rem;color:var(--muted)}
.handle-total-number{color:var(--sage-deep);font-size:1rem}
.handle-controls{display:flex;gap:.7rem}
.handle-controls button{flex:1;min-height:44px;border:1px solid var(--sage-deep);border-radius:4px;padding:.7rem;font-size:.8rem;color:var(--sage-deep);transition:background .2s,translate .2s}
.handle-controls button:hover:not(:disabled){background:var(--cream);translate:0 -2px}
.handle-controls button:disabled{cursor:not-allowed;color:var(--muted);border-color:var(--line)}
.handle-session-note{font-size:.7rem;color:var(--muted);line-height:1.7;margin-top:1rem;text-align:center}
[dir=rtl] .bottle-lid-state,[dir=rtl] .handle-demo-top{letter-spacing:0}
[dir=rtl] .bottle-thought{font-size:1.5rem}
[dir=rtl] .handle-disclaimer,[dir=rtl] .handle-session-note,[dir=rtl] .bottle-motion-note,[dir=rtl] .metric-note{font-size:.88rem}
html:not(.js) .handle-illustration,html:not(.js) .handle-controls,html:not(.js) .handle-action-label,html:not(.js) .handle-status,html:not(.js) .handle-total{display:none}

/* Three tangible blocks, building upward from a grounded base. */
[hidden]{display:none!important}
.edition-bar{max-width:1200px;margin:2rem auto 0;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.edition-bar>div>p:last-child{margin-top:.35rem;font-family:var(--display),var(--arabic);font-size:1.3rem}
.edition-choices{display:flex;border:1px solid var(--line);border-radius:12px;padding:5px;gap:5px;background:var(--paper)}
.edition-choices button{padding:.85rem 1.3rem;min-height:70px;border-radius:8px;text-align:start;color:var(--sage-deep);transition:background .2s,color .2s,box-shadow .2s}
.edition-choices button span,.edition-choices button small{display:block}
.edition-choices button span{font-weight:600;font-size:.95rem}
.edition-choices button small{font-size:.71rem;margin-top:.3rem}
.edition-choices button[aria-pressed=true]{background:var(--forest);color:var(--cream);box-shadow:0 4px 8px #1f2b2215}
.edition-choices button:focus-visible,.daily-card button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.daily-rhythm{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.daily-intro .body{margin-top:1.5rem}
.daily-next{margin:2rem 0 1rem;border-inline-start:3px solid var(--gold);padding:.4rem 0 .4rem 1.2rem;padding-inline:1.2rem 0;display:grid;gap:.5rem;color:var(--sage-deep)}
.daily-next>span,.daily-next>small{font-size:.78rem;color:var(--muted)}
.daily-next strong{font-family:var(--display),var(--arabic);font-size:1.9rem;font-weight:400}
.daily-progress{font-size:.85rem;color:var(--sage-deep);margin:1rem 0 .5rem}
.daily-session{font-size:.77rem;line-height:1.8;color:var(--muted);margin-top:1.5rem;max-width:28rem}
.daily-cards{display:grid;gap:.8rem}
.daily-card{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);transition:background .2s,border-color .2s}
.daily-card:first-child{background:#dfe6df}.daily-card:nth-child(2){background:#e4ddce}.daily-card:nth-child(3){background:#d8dece}.daily-card:nth-child(4){background:#e3d8c9}.daily-card:nth-child(5){background:#d8dde3}
.daily-card.is-next{border-color:var(--sage-deep);box-shadow:inset 4px 0 0 var(--sage-deep)}
.daily-card.is-done{background:#cfdbc9}
.daily-word{display:grid;grid-template-columns:24px 1fr;align-items:center;column-gap:1rem;row-gap:.1rem;flex:1;min-width:0;text-align:start;min-height:72px}
.daily-word>small{grid-row:1/3;font-size:.75rem;color:var(--sage-deep)}
.daily-word .remembrance-word{font-size:2.2rem;color:var(--forest)}
.daily-card-time{grid-column:2;font-size:.78rem;color:var(--sage-deep);text-align:start}
.daily-check{width:46px;height:46px;border:1px solid var(--sage-deep);border-radius:50%;font-size:1.3rem;flex:none;color:var(--sage-deep);transition:background .2s,color .2s}
.daily-check[aria-pressed=true]{background:var(--sage-deep);color:var(--cream)}
.daily-check:active{scale:.94}
.daily-settings{margin-top:1.2rem;padding:1.2rem;border:1px solid var(--line);border-radius:8px}
.daily-settings summary{font-size:.9rem;color:var(--sage-deep);cursor:pointer}
.daily-settings-form{margin-top:1.2rem}
.daily-time-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.daily-settings-form label{display:grid;gap:.4rem;font-size:.8rem;color:var(--sage-deep)}
.daily-settings-form input{display:block;background:var(--cream);border:1px solid var(--line);border-radius:4px;width:100%;min-width:0;padding:.7rem;color:var(--forest);font:inherit}
.daily-settings-help,.daily-feedback{font-size:.76rem;line-height:1.7;color:var(--muted);margin:.8rem 0}
.daily-feedback{color:var(--sage-deep)}
.edition-custom-note{font-size:.75rem;line-height:1.7;color:var(--muted);margin:.6rem 0 1rem}
.gift-review-rhythm,.checkout-rhythm{font-size:.85rem;line-height:1.9;color:var(--sage-deep);margin:.8rem 0}
.bottle-print-preview{position:absolute;inset:0}
.bottle-print-preview svg{width:100%;height:100%;display:block}
[data-edition=daily] .day-selector{flex-wrap:wrap}
[data-edition=daily] .day-btn{font-size:.68rem;padding:.5rem .55rem;line-height:1.4}
.day-btn small{display:block;font-size:.62rem;font-weight:400}
@media(max-width:900px){.daily-rhythm{grid-template-columns:1fr}.edition-bar{align-items:start;flex-direction:column}.edition-choices{width:100%}.edition-choices button{flex:1}}
@media(max-width:520px){.edition-bar{padding-inline:1.25rem;margin-top:1.5rem;gap:1rem}.edition-bar .eyebrow{font-size:.62rem}.edition-choices button{padding:.8rem .7rem}.edition-choices button span{font-size:.85rem}.edition-choices button small{font-size:.65rem}.daily-card{padding:.65rem .8rem}.daily-word .remembrance-word{font-size:1.9rem}.daily-word{column-gap:.6rem}.daily-time-fields{gap:.7rem}}
.pillar-grid{display:flex;flex-direction:column;gap:12px;border:0;max-width:880px;margin-inline:auto}
.pillar-grid .pillar,.pillar-grid .pillar+.pillar,[dir=rtl] .pillar-grid .pillar,[dir=rtl] .pillar-grid .pillar+.pillar{padding:clamp(1.4rem,3vw,2rem);border:1px solid #1f2b2220;border-radius:9px;display:grid;grid-template-columns:48px 1fr;gap:.4rem 1rem;box-shadow:0 9px 0 #1f2b2210;background:var(--block-paper,#e8ddc6);transform:none}
.pillar-grid .pillar:nth-child(1){margin-inline:0 12%}
.pillar-grid .pillar:nth-child(2){margin-inline:6%;--block-paper:#cfdbc9}
.pillar-grid .pillar:nth-child(3){margin-inline:12% 0;--block-paper:var(--forest);color:var(--cream)}
.pillar-grid .pillar-num{grid-row:1/3;font-size:1.5rem;color:var(--sage-deep)}
.pillar-grid .pillar h3{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.3}
.pillar-grid .pillar p{grid-column:2;max-width:34rem;color:var(--forest)}
.pillar-grid .pillar:nth-child(3) p,.pillar-grid .pillar:nth-child(3) .pillar-num{color:var(--cream)}
@media(prefers-reduced-motion:no-preference){
  .js .pillar-grid .pillar.in{animation:block-build .75s cubic-bezier(.16,1,.3,1) both}
  .js .pillar-grid .pillar:nth-child(2).in{animation-delay:.12s}
  .js .pillar-grid .pillar:nth-child(3).in{animation-delay:.24s}
  @keyframes block-build{from{clip-path:inset(100% 0 0);opacity:.4;scale:1 .94;transform-origin:bottom}to{clip-path:inset(0);opacity:1;scale:1;transform-origin:bottom}}
}
@media(max-width:600px){
  .pillar-grid .pillar,.pillar-grid .pillar+.pillar,[dir=rtl] .pillar-grid .pillar,[dir=rtl] .pillar-grid .pillar+.pillar{grid-template-columns:30px 1fr;gap:.5rem .6rem;padding:1.2rem}
  .pillar-grid .pillar:nth-child(1){margin-inline:0 6%}
  .pillar-grid .pillar:nth-child(2){margin-inline:3%}
  .pillar-grid .pillar:nth-child(3){margin-inline:6% 0}
  .pillar-grid .pillar p{font-size:.85rem}
  .remembrance-word{font-size:clamp(1.8rem,7vw,2.5rem)}
}

/* Source-led reuse story, in the existing cream / sage visual language. */
.reuse-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:3rem}
.reuse-invitation .body{max-width:34rem}
.reuse-loop{display:flex;align-items:center;gap:1rem;margin-top:1.3rem;font-family:var(--display),var(--arabic);font-size:1.5rem;color:var(--sage-deep)}
.reuse-loop>span:first-child{display:inline-grid;place-items:center;flex:none;width:64px;height:64px;background:#CFDBC9;border-radius:50%;font:3rem/1 var(--sans);transition:transform .6s var(--ease)}
.reuse-invitation:hover .reuse-loop>span:first-child{transform:rotate(90deg)}
.reuse-facts{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line)}
.reuse-fact{padding:2rem 2.25rem 2rem 0;min-width:0}
.reuse-fact:nth-child(even){padding-inline:2.25rem 0;border-inline-start:1px solid var(--line)}
.reuse-fact:nth-child(n+3){border-top:1px solid var(--line)}
.reuse-index{display:block;font:1rem/1 var(--sans);color:var(--sage-deep);margin-bottom:1.2rem}
.reuse-fact h3{font-size:clamp(1.45rem,2.2vw,1.9rem);max-width:25rem;margin-bottom:1rem;line-height:1.2}
.reuse-fact p,.reuse-perspective p{font-size:.9rem;line-height:1.8;max-width:58rem}
.reuse-fact p+p,.reuse-perspective p+p{margin-top:.8rem}
.reuse a{color:var(--sage-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.reuse a:hover{color:var(--forest)}
.reuse-perspective{padding:clamp(1.4rem,4vw,2.5rem);background:#E3E9DD;border-radius:5px;margin-top:2rem}
.reuse-perspective h3{margin-bottom:1rem;font-size:1.65rem}
.reuse-honesty{margin-top:1.5rem;border-block:1px solid #B6C2AF;padding-block:1rem}
.reuse-honesty summary{cursor:pointer;font-size:.95rem;font-weight:600;list-style-position:outside;margin-inline-start:1.1rem;padding-inline-start:.4rem}
.reuse-honesty p{margin-top:1rem}
.reuse-perspective .reuse-review{font-size:.75rem;color:var(--sage-deep);margin-top:1rem}
[dir=rtl] .reuse-fact{padding-inline:0 2.25rem}
[dir=rtl] .reuse-fact:nth-child(even){padding-inline:2.25rem 0}
@media(max-width:700px){
  .reuse-intro{grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}
  .reuse-facts{grid-template-columns:1fr}
  .reuse-fact,.reuse-fact:nth-child(even),[dir=rtl] .reuse-fact,[dir=rtl] .reuse-fact:nth-child(even){padding:1.6rem 0;border-inline-start:0}
  .reuse-fact+.reuse-fact{border-top:1px solid var(--line)}
  .reuse-loop{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.reuse-loop>span:first-child{transition:none}.reuse-invitation:hover .reuse-loop>span:first-child{transform:none}}

/* Playfulness throughout, while merchandise, messages and controls stay readable. */
.js .reveal{transform:none;filter:blur(3px);transition:opacity .7s var(--ease),filter .8s var(--ease)}
.js .reveal.in{transform:none;filter:blur(0)}
.is-front .bottle-artwork{animation:bottle-float 5s ease-in-out infinite}
.is-front .product-scene::before{animation:scene-breathe 5s ease-in-out infinite}
.btn{transition:background .25s,transform .35s cubic-bezier(.16,1.5,.3,1),box-shadow .3s}
.btn:hover{transform:translateY(-4px);box-shadow:0 8px 0 #1f2b2213}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.stack-navigation button{transition:background .2s,rotate .35s cubic-bezier(.16,1.5,.3,1),scale .25s}
.stack-navigation button:hover{rotate:-12deg;scale:1.06}
.stack-navigation button:active{scale:.93}
.stack-choices button{transition:background .25s,color .25s,border-color .25s,translate .25s}
.stack-choices button:hover{translate:0 -3px}
.stack-choices button[aria-pressed=true]{animation:choice-pop .45s cubic-bezier(.16,1.5,.3,1)}
.size-btn.active{animation:choice-pop .45s cubic-bezier(.16,1.5,.3,1)}
.section-menu a{transition:background .25s,color .25s,translate .25s}
.section-menu a:hover{translate:0 -2px}
.menu-open .section-menu{animation:menu-arrive .32s var(--ease)}
.faq details[open] .ans,.giving-details[open] ul{animation:content-arrive .4s var(--ease)}
.gift-name-input{transition:box-shadow .25s,translate .25s}
.gift-name-input:focus-within{box-shadow:0 3px 0 #c9a45c55;translate:0 -2px}
.hero-media img{animation:hero-sway 10s ease-in-out infinite}
@keyframes hero-sway{0%,100%{transform:scale(1.015) translateX(-2px)}50%{transform:scale(1.05) translateX(3px)}}
@keyframes bottle-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes scene-breathe{0%,100%{scale:.96;opacity:.6}50%{scale:1.06;opacity:1}}
@keyframes choice-pop{0%{scale:.95}70%{scale:1.035}100%{scale:1}}
@keyframes menu-arrive{from{opacity:.3;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes content-arrive{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .dhikr-handle{grid-template-columns:1fr}
  .handle-playground{max-width:500px;width:100%;margin:auto}
}
@media(max-width:600px){
  .bottle-stack.stack-ready{min-height:750px;margin-inline:30px}
  .stack-ready .col-card{min-height:750px;padding:.8rem}
  .stack-ready .col-card .product-scene{height:340px}
  .product-scene::before{width:160px;height:160px}
  .bottle-play-controls{gap:.4rem}
  .bottle-play-controls button{font-size:.73rem;padding:.5rem}
  .bottle-message{min-height:85px}
  .bottle-thought{font-size:1.2rem}
  .handle-playground{border-radius:110px 110px 8px 8px}
}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;filter:none;transform:none}
  .is-front .bottle-artwork,.is-front .product-scene::before{animation:none;transform:none}
  .bottle-cap,.bottle-mouth{transition:none}
  .btn:hover,.btn:active,.handle-spin:active{transform:none}
  .bottle-play-controls button:hover,.stack-choices button:hover,.section-menu a:hover,.gift-name-input:focus-within{translate:none}
  .stack-navigation button:hover,.stack-navigation button:active{rotate:none;scale:1}
}

/* Giving: an editorial founder story, with sources kept close to each claim. */
[hidden]#storefront,[hidden].founder-page{display:none}
.section-menu a[aria-current=page]{color:var(--sage-deep);background:var(--paper);box-shadow:inset 0 -2px var(--gold)}
.founder-introduction{display:grid;grid-template-columns:.7fr 1fr;gap:2rem;margin-top:2.5rem;padding:2rem 0;border-block:1px solid var(--line)}
.founder-introduction h3{font-size:clamp(2rem,4vw,3.25rem);color:var(--sage-deep)}
.founder-introduction p:not(.eyebrow){font-size:.9rem;color:var(--muted);line-height:1.85;max-width:32rem}
.founder-introduction .link-arrow{display:inline-flex;margin-top:1rem;gap:1rem}
.founder-page{min-height:65vh}
.founder-page-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end;border-bottom:1px solid var(--line);padding-bottom:clamp(2rem,5vw,4rem)}
.founder-back{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:2.5rem}
.founder-page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,7.5vw,7.5rem);line-height:1.02;letter-spacing:-.045em}
.founder-page-hero h1 em{color:var(--sage-deep)}
.founder-page-intro>p{font-family:var(--display);font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.4;max-width:25rem}
.founder-page-intro nav{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2rem}
.founder-page-intro a{font-size:.85rem;text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;gap:1rem;align-items:center}
.founder-page-return{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:3rem;padding:2rem 0;border-block:1px solid var(--line)}
.founder-page-return>p{font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem)}
.founder-page:not([hidden]) .founder-page-hero{animation:menu-arrive .45s var(--ease)}
.founder-view .page-progress{display:none}
[dir=rtl] .founder-back>span{transform:scaleX(-1)}
@media(max-width:760px){
  .founder-page-hero,.founder-introduction{grid-template-columns:1fr;gap:1.5rem}
  .founder-page-return{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.founder-page:not([hidden]) .founder-page-hero{animation:none}}
.giving-story{grid-column:1/-1;min-width:0;border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4.5rem)}
.giving-story-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:end}
.giving-why-copy{color:var(--muted);font-size:.95rem;line-height:1.85;max-width:32rem}
.giving-why-copy p+p{margin-top:1rem}
.founder-note{display:grid;grid-template-columns:.7fr 1fr;margin-top:3rem;background:var(--paper);border:1px solid var(--line)}
.founder-nameplate{padding:clamp(1.5rem,4vw,3.5rem);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}
.founder-nameplate h2{font-size:clamp(3rem,6vw,5.5rem);color:var(--sage-deep);line-height:.98;letter-spacing:-.035em}
.founder-nameplate>p:not(.eyebrow){font-size:.8rem;color:var(--muted);margin-top:1.25rem;max-width:17rem}
.founder-brave{font-size:.7rem;letter-spacing:.15em;padding-top:2.5rem;margin-top:auto;color:var(--sage-deep)}
.founder-story-copy{padding:clamp(1.5rem,4vw,3.5rem);font-size:.88rem;line-height:1.9;color:var(--muted)}
.founder-story-copy p+p{margin-top:1.2rem}
.founder-story-copy .founder-lede{font-family:var(--display);font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.4;color:var(--ink)}
.founder-story-copy a{color:var(--sage-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.founder-story-copy a:hover{text-decoration-thickness:2px}
.founder-principle{border-top:1px solid var(--line);padding-top:1rem}
.giving-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem;gap:2rem}
.giving-values>div{border-top:1px solid var(--line);padding-top:1rem}
.giving-values>div>span{font-family:var(--display);font-size:1.25rem;color:var(--sage-deep)}
.giving-values h3{font-size:1.6rem;margin:.5rem 0 .75rem}
.giving-values p{font-size:.8rem;line-height:1.8;color:var(--muted)}
.founder-publications{padding-top:clamp(3rem,5vw,5rem)}
.founder-proof-heading{display:flex;justify-content:space-between;gap:2rem;align-items:end}
.founder-proof-heading h3{font-size:clamp(1.9rem,3.5vw,2.8rem)}
.founder-proof-heading h3 em{color:var(--sage-deep)}
.founder-proof-heading>p{max-width:25rem;font-size:.78rem;line-height:1.8;color:var(--muted)}
.founder-featured{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem;border-block:1px solid var(--line)}
.founder-feature{min-width:0;padding:2rem 1.5rem;display:flex;flex-direction:column;transition:background .3s var(--ease)}
.founder-feature+.founder-feature{border-inline-start:1px solid var(--line)}
.founder-feature:hover{background:var(--paper)}
.founder-feature h4{font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:400;line-height:1.2}
.founder-feature>p{font-size:.8rem;line-height:1.8;color:var(--muted);margin-top:1rem;margin-bottom:1.5rem}
.founder-feature-footer{font-size:.75rem;font-weight:600;margin-top:auto;display:flex;justify-content:space-between;gap:.75rem}
.founder-feature-footer>span{transition:transform .25s var(--ease)}
.founder-feature:hover .founder-feature-footer>span{transform:translate(2px,-2px)}
.founder-archive{border-bottom:1px solid var(--line)}
.founder-archive>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:80px;cursor:pointer;font-size:.9rem;font-weight:500;list-style:none}
.founder-archive>summary::-webkit-details-marker{display:none}
.archive-summary-mark{font-family:var(--display);font-size:1.8rem;transition:transform .3s var(--ease)}
.founder-archive[open] .archive-summary-mark{transform:rotate(45deg)}
.archive-body{padding-bottom:2rem}
.archive-scope,.archive-caution{font-size:.78rem;line-height:1.8;color:var(--muted);max-width:52rem}
.archive-toolbar{margin-top:1.5rem}
.archive-toolbar[hidden]{display:none}
.archive-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.archive-filters button,.archive-clear{border:1px solid var(--line);padding:.65rem 1rem;font-size:.75rem;min-height:44px;transition:background .2s,color .2s}
.archive-filters button:hover,.archive-clear:hover{background:var(--paper)}
.archive-filters button[aria-pressed=true]{background:var(--sage-deep);border-color:var(--sage-deep);color:var(--cream)}
.archive-search-label{display:block;margin-top:1.25rem;font-size:.75rem;font-weight:500}
.archive-search-label input{display:block;width:100%;max-width:30rem;min-height:48px;margin-top:.5rem;border:1px solid var(--line);background:var(--cream);border-radius:2px;padding:.65rem .9rem;font:inherit;color:var(--ink);font-size:.9rem}
.archive-search-label input::placeholder{color:var(--muted);opacity:1}
.archive-status{font-size:.75rem;color:var(--muted);margin:1rem 0}
.archive-records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
.archive-record{min-width:0;border-top:1px solid var(--line);padding:1.4rem 0;display:flex;flex-direction:column}
.archive-record>a:first-child{display:flex;flex-direction:column;flex:1;align-items:flex-start}
.archive-meta{font-size:.68rem;letter-spacing:.04em;color:var(--muted);display:block;text-align:start}
.archive-record h4{font-family:var(--display);font-size:1.45rem;line-height:1.3;font-weight:400;margin:.6rem 0;overflow-wrap:anywhere;text-align:left}
.archive-record-type{font-size:.7rem;font-weight:600;color:var(--sage-deep)}
.archive-record p{font-size:.8rem;line-height:1.85;color:var(--muted);margin:.6rem 0 .8rem}
.archive-source-action,.archive-extra{font-size:.75rem;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.archive-source-action{margin-top:auto}
.archive-extra{display:block;margin-top:.7rem;color:var(--sage-deep)}
.archive-record>a:first-child:hover h4{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.archive-caution{margin-top:1.5rem}
.archive-empty{grid-column:1/-1;font-size:.9rem;margin:.5rem 0 1rem}
.archive-clear{justify-self:start;margin-bottom:1rem}
[dir=rtl] .founder-nameplate h2{direction:ltr;text-align:right}
[dir=rtl] .founder-story-copy,[dir=rtl] .giving-why-copy{font-size:1.05rem}
[dir=rtl] .founder-story-copy .founder-lede{font-size:1.65rem}
[dir=rtl] .archive-record p,[dir=rtl] .giving-values p,[dir=rtl] .founder-feature>p{font-size:.95rem}
[dir=rtl] .archive-record h4{align-self:stretch}
@media(max-width:760px){
  .giving-story-intro,.founder-note{grid-template-columns:1fr}
  .founder-nameplate{border-inline-end:0;border-bottom:1px solid var(--line)}
  .founder-nameplate h2{font-size:4rem}
  .founder-nameplate h2 br{display:none}
  .founder-brave{padding-top:1.5rem}
  .founder-proof-heading{display:block}
  .founder-proof-heading>p{margin-top:1.2rem}
  .giving-values{gap:1rem}
  .giving-values h3{font-size:1.35rem}
  .founder-feature{padding:1.5rem 1rem}
}
@media(max-width:520px){
  .giving-values,.founder-featured,.archive-records{grid-template-columns:1fr}
  .giving-values{gap:1.5rem}
  .giving-values>div{display:grid;grid-template-columns:2rem 1fr;column-gap:.75rem}
  .giving-values h3{margin:.15rem 0 .5rem;font-size:1.65rem}
  .giving-values p{grid-column:2}
  .founder-feature+.founder-feature{border-inline-start:0;border-top:1px solid var(--line)}
  .founder-feature{padding:1.5rem .5rem}
  .founder-feature h4 br{display:none}
  .founder-feature h4{font-size:1.9rem}
  .founder-feature .eyebrow{margin-bottom:.6rem}
  .founder-feature>p{margin:.75rem 0 1rem}
  .founder-nameplate h2{font-size:3.5rem}
  .archive-filters button{padding:.6rem .75rem}
  .founder-archive>summary{font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .founder-feature,.founder-feature-footer>span,.archive-summary-mark,.archive-filters button{transition:none}
  .founder-feature:hover .founder-feature-footer>span{transform:none}
}

/* The prayer selector turns the actual photo cutout, while the stage stays still. */
.hero-media.prayer-design-stage{position:relative;background:radial-gradient(ellipse at 50% 35%,#f4efe4,#e2dccb);overflow:hidden}
.hero-prayer-view{position:absolute;inset:0 0 42px;width:100%;perspective:900px;border-radius:inherit;cursor:pointer;touch-action:manipulation}
.hero-prayer-view:focus-visible{outline:2px solid var(--sage-deep);outline-offset:-4px}
.hero-prayer-face{position:absolute;inset:0;display:block;transform-origin:50% 50%;filter:drop-shadow(7px 12px 7px #1f2b2225)}
.hero-prayer-face[hidden]{display:none}
.hero-prayer-face .bottle-artwork{animation:bottle-float 6s ease-in-out infinite}
.hero-design-caption{position:absolute;inset:auto .5rem .6rem;display:grid;gap:.15rem;color:var(--sage-deep);line-height:1.5;pointer-events:none}
.hero-design-caption>span{font-size:.82rem;font-weight:500}
.hero-design-caption small{font-size:.65rem;color:var(--muted)}
[dir=rtl] .hero-design-caption>span{font-size:1rem}
[dir=rtl] .hero-design-caption small{font-size:.8rem}
.day-btn{min-height:44px}
@media(max-width:520px){
  .hero-design-caption>span{font-size:.73rem}
  .hero-design-caption small{font-size:.6rem}
  .prayer-hero .moment-card{position:static;min-width:0;text-align:center;transform:none;box-shadow:none;padding:.6rem;margin:.8rem 0 0}
  .prayer-hero .moment-card.changing{animation:content-arrive .4s var(--ease)}
  .prayer-hero .day-selector{margin-top:.6rem}
}