/* r28 home8: the section designs of the home, loaded on every render (assets/home/review.js picks the option).
   Every option lives under a data attribute, so an unset attribute leaves the page as it was.
   Palette and type come from the page itself (--wine, --gold, --gold-lit, --paper, --stone, Heebo). */

/* ---------- the switch bar ---------- */
#rvBar{position:fixed;left:10px;top:calc(62px + env(safe-area-inset-top));z-index:1150;display:flex;flex-direction:column;align-items:flex-start;direction:rtl;font-family:Heebo,sans-serif;font-size:12px;color:#f7f1e8;text-align:right}
#rvBar .rvPill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;border:0;background:#2a161d;color:#eddcb2;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.6),0 0 0 1px rgba(237,220,178,.3)}
#rvBar .rvPill i{width:7px;height:7px;border-radius:50%;background:#78d9a8}
#rvBar .rvPanel{display:none;margin-top:6px;width:min(330px,calc(100vw - 20px));max-height:calc(100svh - 170px);overflow:auto;padding:8px 12px 10px;border-radius:14px;background:rgba(32,16,22,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 50px -20px rgba(0,0,0,.7),0 0 0 1px rgba(237,220,178,.22)}
#rvBar.open .rvPanel{display:block}
@media(max-width:899px){#rvBar{top:auto;bottom:calc(78px + env(safe-area-inset-bottom));flex-direction:column-reverse}#rvBar .rvPanel{margin:0 0 6px;max-height:calc(100svh - 190px)}}
.rvRow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid rgba(237,220,178,.1)}
.rvRow:last-child{border-bottom:0}
.rvRow b{flex:0 0 100%;font-weight:700;font-size:11.5px;color:rgba(237,220,178,.55);margin-bottom:1px}
.rvRow button{height:26px;padding:0 9px;border-radius:13px;border:0;background:rgba(237,220,178,.1);color:#eddcb2;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.rvRow button:hover{background:rgba(237,220,178,.2)}
.rvRow button.on{background:#eddcb2;color:#2a161d;font-weight:800}
.rvRow .rvLink{margin-inline-start:auto;background:none;color:rgba(237,220,178,.6);text-decoration:underline;text-underline-offset:3px}
.rvRow .rvLink.ok{color:#78d9a8}
body.rvOn #skinSw,body.rvOn #featSw{display:none!important}

/* ---------- icons shared by the options ---------- */
.rvI{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(179,137,63,.45);color:var(--wine)}
.rvI svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   1. the template gallery: cf coverflow, ix index, lb lookbook
   ===================================================================== */
.tplShow[data-tv=cf] .tsCone,.tplShow[data-tv=ix] .tsCone,.tplShow[data-tv=lb] .tsCone,.tplShow[data-tv=ix] .tsPodium{display:none}
.rvGal .tcNmW{display:none}
.rvGal .fInfo{grid-template-columns:1fr;gap:0}
.rvGal .fInfo > .tsArr{display:none}
.rvGal .fInfo .rvNav .tsArr{display:grid;width:44px;height:44px}
@property --k{syntax:'<number>';inherits:true;initial-value:0}
.rvCnt{display:inline-flex;align-items:baseline;gap:6px;direction:ltr;font-variant-numeric:tabular-nums;color:rgba(237,220,178,.55);font-size:13px;font-weight:600}
.rvCnt b{font-size:30px;font-weight:300;color:var(--gold-lit);line-height:1}
.rvCnt small{font-size:13px;font-weight:600;color:rgba(237,220,178,.45)}
.rvNav{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px auto 4px}
.rvHint{font-size:12.5px;color:rgba(237,220,178,.45);margin-top:6px}

/* ---- a. coverflow ---- */
.tplShow[data-tv=cf]{--cw:min(224px,56vw)}
.tplShow[data-tv=cf] .tsStage{height:calc(var(--cw) * 2.164 + 70px);perspective:1100px;perspective-origin:50% 40%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;padding:0;margin-inline:calc(50% - 50vw)}
.tplShow[data-tv=cf] .tsStage.grab{cursor:grabbing}
.tplShow[data-tv=cf] .tsTrack{position:absolute;inset:0;transform-style:preserve-3d}
.tplShow[data-tv=cf] .tc{position:absolute;left:50%;top:30px;margin-left:calc(var(--cw) / -2);will-change:transform;cursor:pointer;visibility:hidden}
.tplShow[data-tv=cf] .tc.v{visibility:visible}
.tplShow[data-tv=cf] .tsPodium{display:block;bottom:10px;width:calc(var(--cw) * 2.1);height:44px}
.tplShow[data-tv=cf] .fTxt{min-height:120px}
@media(min-width:900px){.tplShow[data-tv=cf]{--cw:250px}.tplShow[data-tv=cf] .tsStage{height:calc(var(--cw) * 2.164 + 90px)}}


/* ---- h. the editorial index: the list of names beside one large phone ---- */
.tplShow[data-tv=ix]{--cw:min(230px,54vw)}
.tplShow[data-tv=ix] .tsStage{display:grid;grid-template-columns:1fr;justify-items:center;gap:14px;margin-inline:0;padding:10px 0 0;overflow:visible;height:auto}
.tplShow[data-tv=ix] .tsTrack{position:relative;width:var(--cw);height:calc(var(--cw) * 2.164);perspective:1000px}
.tplShow[data-tv=ix] .tc{position:absolute;inset:0;margin:0;visibility:hidden;cursor:pointer;--k:1}
.tplShow[data-tv=ix] .tc.v{visibility:visible}
.tplShow[data-tv=ix] .tsPodium{display:block;bottom:auto;top:calc(10px + var(--cw) * 2.164 - 16px)}
.ixList{width:100%;max-width:420px;height:212px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;padding:84px 0;text-align:start;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.ixList::-webkit-scrollbar{display:none}
.ixList button{display:flex;align-items:baseline;gap:12px;width:100%;height:44px;padding:0 6px;border:0;background:none;color:rgba(237,220,178,.4);font:inherit;font-size:24px;font-weight:800;line-height:1;cursor:pointer;scroll-snap-align:center;transition:color .3s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.ixList button i{font-style:normal;font-size:11px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;direction:ltr;min-width:22px}
.ixList button small{font-size:13px;font-weight:500;color:rgba(247,241,232,.45);overflow:hidden;text-overflow:ellipsis}
.ixList button.on{color:var(--gold-lit)}
.ixList button.on small{color:rgba(247,241,232,.75)}
.ixList button:focus-visible{outline:2px solid var(--gold-lit);outline-offset:-2px;border-radius:6px}
@media(min-width:900px){
  .tplShow[data-tv=ix]{--cw:280px}
  .tplShow[data-tv=ix] .tsStage{grid-template-columns:minmax(0,1fr) var(--cw);align-items:center;gap:60px;max-width:1040px;margin:0 auto;padding:20px 0 0}
  .tplShow[data-tv=ix] .tsPodium{display:none}
  .ixList{max-width:none;height:auto;overflow:visible;padding:0;mask-image:none;-webkit-mask-image:none;display:grid;grid-template-columns:1fr 1fr;gap:0 30px;scroll-snap-type:none}
  .ixList button{height:58px;font-size:30px;border-bottom:1px solid rgba(237,220,178,.12);scroll-snap-align:none;position:relative}
  .ixList button::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:0;height:1px;background:var(--gold-lit);transition:width .45s var(--ease)}
  .ixList button.on::after{width:100%}
  .ixList button:hover{color:#fff7e6}
}

/* ---- i. the lookbook: one phone turning like a page, the name huge behind it ---- */
.tplShow[data-tv=lb]{--cw:min(250px,60vw)}
.tplShow[data-tv=lb] .tsStage{height:calc(var(--cw) * 2.164 + 70px);perspective:1300px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;margin-inline:calc(50% - 50vw);padding:0}
.tplShow[data-tv=lb] .tsStage.grab{cursor:grabbing}
.tplShow[data-tv=lb] .tsTrack{position:absolute;left:50%;top:34px;width:var(--cw);height:calc(var(--cw) * 2.164);margin-left:calc(var(--cw) / -2);transform-style:preserve-3d}
.tplShow[data-tv=lb] .tc{position:absolute;inset:0;margin:0;visibility:hidden;cursor:pointer;--k:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.tplShow[data-tv=lb] .tc.v{visibility:visible}
.tplShow[data-tv=lb] .tc .tcShot{box-shadow:0 60px 80px -40px rgba(0,0,0,1),0 0 0 1px rgba(217,188,128,.25)}
.tplShow[data-tv=lb] .tsPodium{display:block;bottom:12px;width:calc(var(--cw) * 1.7)}
.lbName{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:1.1em;pointer-events:none;text-align:center;font-size:clamp(96px,30vw,300px);font-weight:900;line-height:1;color:rgba(237,220,178,.09);white-space:nowrap;overflow:hidden}
.lbName span{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
@media(min-width:900px){.tplShow[data-tv=lb]{--cw:290px}.tplShow[data-tv=lb] .tsStage{height:calc(var(--cw) * 2.164 + 90px)}.lbName{font-size:clamp(200px,24vw,360px)}}

/* =====================================================================
   2. categories: a index, e tabs. The type toggle: a hidden
   ===================================================================== */
body[data-cat] #kChips{display:none!important}
.rvCat button{-webkit-tap-highlight-color:transparent}
.rvCat button:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:4px}
.rvCat button svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* a. editorial index */
.rvCat.ix{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px;margin:22px auto 0;max-width:980px}
.rvCat.ix button{position:relative;border:0;background:none;padding:4px 2px 10px;font:inherit;font-size:clamp(22px,5.4vw,34px);font-weight:800;line-height:1.1;color:rgba(237,220,178,.4);cursor:pointer;display:inline-flex;align-items:flex-start;gap:5px;transition:color .35s var(--ease)}
.rvCat.ix button i{font-style:normal;font-size:11px;font-weight:700;color:var(--gold);margin-top:5px;font-variant-numeric:tabular-nums;direction:ltr;line-height:1}
.rvCat.ix button svg{display:none}
.rvCat.ix button::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:2px;border-radius:2px;background:var(--gold-lit);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.rvCat.ix button.on{color:var(--gold-lit)}
.rvCat.ix button.on::after{transform:scaleX(1)}
.rvCat.ix button:hover{color:rgba(237,220,178,.85)}
/* e. tabs with a sliding ink */
.rvCat.tb{position:relative;display:flex;gap:2px;margin:20px calc(-1 * clamp(16px,4vw,22px)) 0;padding:0 clamp(16px,4vw,22px);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(237,220,178,.14);-webkit-overflow-scrolling:touch}
.rvCat.tb::-webkit-scrollbar{display:none}
.rvCat.tb button{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 12px;border:0;background:none;color:rgba(237,220,178,.6);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:color .3s;white-space:nowrap}
.rvCat.tb button svg{width:18px;height:18px}
.rvCat.tb button small{font-size:11px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;margin-top:-8px}
.rvCat.tb button.on{color:var(--gold-lit)}
.rvCat.tb .ink{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--gold-lit);border-radius:2px;will-change:transform,width}
@media(min-width:900px){.rvCat.tb{justify-content:center;margin-inline:auto;overflow:visible;max-width:1100px}}
/* the type toggle (full / Save the Date): a hidden, 0 shown under the stage */
body[data-tog=a] #tsFoot .tplToggle{display:none}

/* =====================================================================
   3. the four steps: e the floating phone, f the ladder (0 keeps the old path)
   ===================================================================== */
body[data-steps] #tl{display:none}
.rvHow .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:var(--gold-lit);flex:none}
.rvHow .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rvHow h3{font-size:19px;font-weight:800;color:var(--wine);line-height:1.2;margin:0}
.rvHow p{font-size:14px;color:var(--stone);line-height:1.55;margin:4px 0 0}
.rvHow .st{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rvHow .st:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rvHow .ok{position:absolute;top:14px;inset-inline-end:14px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#2a1119;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .4s,transform .5s var(--ease)}
.rvHow .ok svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rvHow .st.lit .ok{opacity:1;transform:none}
/* e. the floating phone: the screen of the step, the steps light and stay lit */
.rvHow.ph{display:grid;gap:18px;margin-top:22px}
.rvHow.ph .phStick{display:grid;justify-items:center;gap:14px;padding:6px 0 4px}
.rvHow.ph .phone{--pw:190px;width:var(--pw);border-radius:calc(var(--pw) * .17);padding:calc(var(--pw) * .03);background:#0b0709;box-shadow:0 40px 70px -28px rgba(0,0,0,.7),0 0 0 1px rgba(237,220,178,.35);position:relative;will-change:transform}
.rvHow.ph .phone .isl{position:absolute;top:3.2%;left:50%;width:30%;height:3.2%;transform:translateX(-50%);border-radius:99px;background:#07050a;z-index:3}
.rvHow.ph .scr{position:relative;aspect-ratio:390/844;border-radius:calc(var(--pw) * .14);overflow:hidden;background:#150d11}
.rvHow.ph .scr>*{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.rvHow.ph .scr img{width:100%;height:100%;object-fit:cover;object-position:top}
.rvHow.ph .scr .four{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:16% 7% 7%;background:#160b10}
.rvHow.ph .scr .four img{position:static;opacity:1;border-radius:7px;width:100%;height:100%;object-fit:cover;object-position:top;min-height:0}
.rvHow.ph .scr .four::before{content:"בוחרים";position:absolute;top:7%;left:0;right:0;text-align:center;color:var(--gold-lit);font-size:calc(var(--pw) * .07);font-weight:700}
.rvHow.ph .phRail{display:flex;gap:8px}
.rvHow.ph .phRail button{display:flex;flex-direction:column;align-items:center;gap:4px;width:56px;padding:6px 0 5px;border:0;border-radius:14px;background:none;color:var(--stone);font:inherit;font-size:11px;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums;direction:ltr;transition:color .3s;-webkit-tap-highlight-color:transparent}
.rvHow.ph .phRail button .ic{width:34px;height:34px;background:#fff;color:var(--stone);box-shadow:inset 0 0 0 1.5px rgba(179,137,63,.35);transition:background .4s,color .4s,box-shadow .4s,transform .4s var(--ease)}
.rvHow.ph .phRail button .ic svg{width:16px;height:16px}
.rvHow.ph .phRail button.lit .ic{background:var(--gold);color:#2a1119;box-shadow:none}
.rvHow.ph .phRail button.lit{color:var(--wine)}
.rvHow.ph .phRail button.on .ic{background:var(--wine);color:var(--gold-lit);transform:scale(1.1);box-shadow:0 0 0 5px rgba(92,21,38,.12)}
.rvHow.ph .list{display:grid}
.rvHow.ph .st{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 20px;padding-inline-end:48px;border-radius:18px;background:#fffdf9;border:1px solid var(--line);opacity:.5;transition:opacity .4s,border-color .4s,box-shadow .4s;text-align:start}
.rvHow.ph .st .ic{background:#fff;color:var(--stone);box-shadow:inset 0 0 0 1.5px rgba(179,137,63,.35);transition:background .4s,color .4s}
.rvHow.ph .st.lit{opacity:1}
.rvHow.ph .st.lit .ic{background:var(--wine);color:var(--gold-lit);box-shadow:none}
.rvHow.ph .st.cur{border-color:var(--gold);box-shadow:0 20px 40px -24px rgba(67,16,28,.35)}
.rvHow.ph .st .k{font-size:12px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;direction:ltr;display:block;margin-bottom:2px}
@media(max-width:899px){.rvHow.ph .list>.st{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s var(--ease)}.rvHow.ph .list>.st.cur{opacity:1;transform:none}}
@media(max-width:899px) and (max-height:700px){.rvHow.ph .phone{--pw:150px}.rvHow.ph .phStick{gap:8px}}
@media(min-width:900px){.rvHow.ph{grid-template-columns:360px 1fr;gap:60px;align-items:start;max-width:1000px;margin:36px auto 0}.rvHow.ph .phStick{position:sticky;top:100px;padding:0;gap:18px}.rvHow.ph .phone{--pw:300px}.rvHow.ph .phRail{display:none}.rvHow.ph .list{gap:26px;padding:30px 0 60px}.rvHow.ph .st{padding:26px;padding-inline-end:54px;gap:18px}.rvHow.ph .st h3{font-size:23px}.rvHow.ph .st p{font-size:15.5px}.rvHow.ph .ok{top:18px;inset-inline-end:18px}}
/* f. the ladder: four big numbered rungs on a rule that fills with the scroll */
.rvHow.ld{position:relative;max-width:720px;margin:32px auto 0;padding-inline-start:30px;display:grid;gap:14px}
.rvHow.ld .ln{position:absolute;inset-inline-start:7px;top:8px;bottom:8px;width:2px;background:rgba(179,137,63,.18);border-radius:2px}
.rvHow.ld .ln i{position:absolute;inset:0;background:linear-gradient(180deg,var(--gold),var(--wine));transform:scaleY(var(--p,0));transform-origin:top;border-radius:2px}
.rvHow.ld .st{position:relative;display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:center;padding:18px 20px;padding-inline-end:50px;border-radius:18px;background:#fffdf9;border:1px solid var(--line);text-align:start;transition:border-color .4s,box-shadow .4s}
.rvHow.ld .st::before{content:"";position:absolute;inset-inline-start:-30px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fffdf9;box-shadow:inset 0 0 0 2px rgba(179,137,63,.4);transition:background .4s,box-shadow .4s}
.rvHow.ld .st.lit::before{background:var(--gold);box-shadow:0 0 0 5px rgba(179,137,63,.15)}
.rvHow.ld .st .n{font-size:40px;font-weight:900;color:rgba(179,137,63,.35);line-height:1;font-variant-numeric:tabular-nums;direction:ltr;min-width:52px;transition:color .4s}
.rvHow.ld .st.lit .n{color:var(--gold)}
.rvHow.ld .st .ic{background:#fff;color:var(--stone);box-shadow:inset 0 0 0 1.5px rgba(179,137,63,.35);transition:background .4s,color .4s}
.rvHow.ld .st.lit .ic{background:var(--wine);color:var(--gold-lit);box-shadow:none}
.rvHow.ld .st.cur{border-color:var(--gold);box-shadow:0 20px 40px -24px rgba(67,16,28,.3)}
@media(min-width:900px){.rvHow.ld{max-width:1000px;grid-template-columns:1fr 1fr;gap:18px 22px;padding-inline-start:0}.rvHow.ld .ln{display:none}.rvHow.ld .st::before{display:none}.rvHow.ld .st{padding:28px 26px;padding-inline-end:56px}.rvHow.ld .st .n{font-size:56px;min-width:76px}.rvHow.ld .st h3{font-size:22px}.rvHow.ld .st p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.rvHow.ph .list>.st{transition:none}}

/* =====================================================================
   4. the colour rhythm: light hero, dark steps, black stage, light features, dark pricing, light order, dark faq
   ===================================================================== */
body:is([data-rh="1"],[data-rh="2"]) #how{background:linear-gradient(180deg,#2b1019 0%,#1d0b12 100%);color:var(--paper);padding-bottom:clamp(80px,11vw,130px)}
body:is([data-rh="1"],[data-rh="2"]) #how::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,188,128,.7),transparent)}
body:is([data-rh="1"],[data-rh="2"]) #how::after{content:"";position:absolute;left:50%;top:-80px;width:min(900px,120vw);height:260px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(179,137,63,.22),transparent 72%)}
body:is([data-rh="1"],[data-rh="2"]) #how .wrap{position:relative;z-index:1}
body:is([data-rh="1"],[data-rh="2"]) #how .eyebrow{color:var(--gold-soft)}
body:is([data-rh="1"],[data-rh="2"]) #how .h2{color:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) #how .sub{color:rgba(247,241,232,.72)}
body:is([data-rh="1"],[data-rh="2"]) #templates::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;pointer-events:none;z-index:1;background:linear-gradient(180deg,#1d0b12,rgba(7,6,10,0))}
body:is([data-rh="1"],[data-rh="2"]) #templates[data-skin=black]{background:#07060a}
/* the old path on the dark ground */
body:is([data-rh="1"],[data-rh="2"]) .tlCircle{background:rgba(255,253,249,.05);border-color:rgba(237,220,178,.22);box-shadow:none}
body:is([data-rh="1"],[data-rh="2"]) .tlNode.lit .tlCircle{background:rgba(255,253,249,.08);border-color:var(--gold-soft)}
body:is([data-rh="1"],[data-rh="2"]) .tlNode.lit .tlIcon{stroke:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .tlNum{color:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .tlLabel{color:rgba(247,241,232,.72)}
body:is([data-rh="1"],[data-rh="2"]) .tlPanel{background:rgba(23,11,16,.55);border-color:rgba(237,220,178,.18);box-shadow:none}
body:is([data-rh="1"],[data-rh="2"]) .tlPanel h3{color:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .tlPanel p{color:rgba(247,241,232,.72)}
body:is([data-rh="1"],[data-rh="2"]) .tlPath{stroke:rgba(217,188,128,.5)}
/* the phone and the ladder on the dark ground */
body:is([data-rh="1"],[data-rh="2"]) .rvHow h3{color:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow p{color:rgba(247,241,232,.72)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .st,body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st{background:rgba(255,253,249,.05);border-color:rgba(237,220,178,.18)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .st.cur,body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st.cur{border-color:var(--gold-soft);box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .st .ic,body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st .ic,body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button .ic{background:rgba(255,253,249,.08);color:rgba(247,241,232,.6);box-shadow:inset 0 0 0 1px rgba(237,220,178,.3)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow .st.lit .ic,body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button.lit .ic{background:var(--gold-lit);color:#2a1119;box-shadow:none}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button{color:rgba(247,241,232,.5)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button.lit{color:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button.on .ic{background:var(--gold);color:#2a1119;box-shadow:0 0 0 5px rgba(217,188,128,.15)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .st .k{color:var(--gold-soft)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .ln{background:rgba(237,220,178,.14)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .ln i{background:linear-gradient(180deg,var(--gold-lit),var(--gold))}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st::before{background:#2b1019;box-shadow:inset 0 0 0 2px rgba(237,220,178,.35)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st.lit::before{background:var(--gold-lit);box-shadow:0 0 0 5px rgba(237,220,178,.14)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st .n{color:rgba(237,220,178,.3)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st.lit .n{color:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow .ok{background:var(--gold-lit)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phone{box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(237,220,178,.45),0 0 80px -20px rgba(217,188,128,.35)}
/* features b on a phone: the story phone stays in the flow, the tiles below it (sticky put them under the phone) */
@media(max-width:899px){#features[data-feat=b] .fsPhone{position:static}}

/* =====================================================================
   5. captions on the phone: a centre, b beside, c outside
   ===================================================================== */
#hStage[data-cap=a] .hcap{top:50%;bottom:auto;transform:translateY(-50%);padding:0 7%}
#hStage[data-cap=a] .hcap span{background:rgba(42,22,29,.82);color:#fff7ec;font-size:19px;padding:14px 22px;border-radius:20px;line-height:1.3;box-shadow:inset 0 0 0 1px rgba(237,220,178,.55),0 24px 50px -16px rgba(0,0,0,.85);-webkit-backdrop-filter:none;backdrop-filter:none;text-wrap:balance}
#hStage[data-cap=b] .hcap,#hStage[data-cap=c] .hcap{display:none}
.rvCap{pointer-events:none;font-family:Heebo,sans-serif}
.rvCap.b{position:absolute;z-index:6;top:25%;left:12px;width:168px;padding:11px 14px 12px;border-radius:14px 14px 14px 4px;background:#fffdf9;color:var(--wine);font-size:15px;font-weight:800;line-height:1.25;text-align:start;box-shadow:0 18px 40px -16px rgba(42,22,29,.55),0 0 0 1px rgba(179,137,63,.3)}
.rvCap.b i{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--gold);margin-bottom:3px;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.rvCap.c{position:relative;width:100%;max-width:360px;margin:0 auto 16px;text-align:center}
.rvCap.c i{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;direction:ltr;margin-bottom:4px}
.rvCap.c b{display:block;font-size:clamp(21px,5.6vw,26px);font-weight:800;color:var(--wine);line-height:1.15;text-wrap:balance;min-height:1.2em}
.rvCap.c::after{content:"";display:block;width:44px;height:2px;margin:12px auto 0;background:var(--gold);border-radius:2px}
@media(min-width:900px){.rvCap.b{left:calc(50% - var(--pw,320px) / 2 - 64px);top:28%;width:200px;font-size:16px}.rvCap.c{margin-bottom:6px}}

/* =====================================================================
   6. the order area: a card, b ticket, c split, d stepper
   ===================================================================== */
body[data-order] .oSteps{display:none}
body[data-order] .act .actH,body[data-order] .act .actSteps{display:none}
.rvAct{margin-bottom:16px}
.rvAct .ttl{display:flex;align-items:center;gap:10px;margin-bottom:14px}
body[data-order=a] .rvAct .ttl{justify-content:center}
.rvAct .ttl b{font-size:18px;font-weight:800;color:var(--wine);line-height:1.15}
.rvAct .ttl .rvI{width:36px;height:36px;background:var(--wine);color:var(--gold-lit);box-shadow:none}
.rvAct .ttl .rvI svg{width:17px;height:17px}
.rvAct bdo{font-weight:800;color:var(--wine)}
.rvSlug,.rvAct bdo{white-space:nowrap;unicode-bidi:isolate}
/* the icon row: three medallions on a hairline */
.rvIcoRow{display:grid;grid-template-columns:repeat(3,1fr);position:relative;margin:6px 0 8px;gap:6px}
.rvIcoRow::before{content:"";position:absolute;top:28px;left:17%;right:17%;height:1px;background:linear-gradient(90deg,transparent,rgba(179,137,63,.55),rgba(179,137,63,.55),transparent)}
.rvIcoRow .it{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;text-align:center}
.rvIcoRow .it .rvI{width:56px;height:56px;background:#fffdf9;box-shadow:inset 0 0 0 1.5px rgba(179,137,63,.45),0 0 0 8px #fffdf9}
.rvIcoRow .it .rvI svg{width:23px;height:23px}
.rvIcoRow .it .k{position:absolute;top:-4px;inset-inline-end:calc(50% - 36px);width:20px;height:20px;border-radius:50%;background:var(--wine);color:var(--gold-lit);font-size:11px;font-weight:800;display:grid;place-items:center;font-style:normal;z-index:1}
.rvIcoRow .it b{font-size:14px;font-weight:800;color:var(--wine);line-height:1.2}
.rvIcoRow .it small{display:block;font-size:12px;color:var(--stone);font-weight:500;margin-top:3px;line-height:1.4}
.rvIcoRow.lit .it .rvI{transition:transform .5s var(--ease),box-shadow .5s}
/* a. one card, an icon row */
body[data-order=a] .oStart{grid-template-columns:1fr;max-width:640px;text-align:center;gap:0}
body[data-order=a] .osR{display:none}
body[data-order=a] .osL{align-items:center}
body[data-order=a] .oStart .rvIcoRow{width:100%;max-width:520px;margin:4px auto 10px}
body[data-order=a] .oTrust{justify-content:center}
body[data-order=a] .act{text-align:center}
body[data-order=a] .act .rvIcoRow{margin-bottom:16px}
body[data-order=a] .sheet .shQ{display:flex;align-items:center;gap:12px}
body[data-order=a] .sheet .shQ .rvI{width:40px;height:40px}
body[data-order=a] .shPane[data-step="2"] .field{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;padding:6px 0}
body[data-order=a] .shPane[data-step="2"] .field label{grid-column:2;margin-bottom:4px}
body[data-order=a] .shPane[data-step="2"] .field>.rvI{grid-row:1 / span 2;width:46px;height:46px}
body[data-order=a] .shPane[data-step="2"] .field .fiw,body[data-order=a] .shPane[data-step="2"] .field select{grid-column:2}
body[data-order=a] .shPane[data-step="2"] .field .fiw svg{display:none}
body[data-order=a] .shPane[data-step="2"] .field .fiw input{padding-inline-start:15px!important}
body[data-order=a] .shPane[data-step="2"] .field .fiw input[dir="ltr"]{padding-left:15px!important}
/* b. a ticket */
body[data-order=b] .oStart{display:block;max-width:520px;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
body[data-order=b] .oStart::before,body[data-order=b] .oStart::after{display:none}
body[data-order=b] .osR{display:none}
.rvTk{position:relative;background:#fffdf9;border-radius:18px;padding:22px 24px 20px;box-shadow:0 30px 60px -30px rgba(67,16,28,.5);border:1px solid rgba(179,137,63,.28);text-align:start;
  -webkit-mask:radial-gradient(13px at 0 var(--ty,80%),transparent 97%,#000 100%),radial-gradient(13px at 100% var(--ty,80%),transparent 97%,#000 100%);-webkit-mask-composite:source-in;
  mask:radial-gradient(13px at 0 var(--ty,80%),transparent 97%,#000 100%),radial-gradient(13px at 100% var(--ty,80%),transparent 97%,#000 100%);mask-composite:intersect}
.rvTk .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px dashed rgba(92,21,38,.25);margin-bottom:6px}
.rvTk .hd b{font-size:16px;font-weight:800;color:var(--wine)}
.rvTk .hd span{font-size:12px;color:var(--stone);font-variant-numeric:tabular-nums;direction:ltr}
.rvTk .row{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:14.5px;color:var(--ink)}
.rvTk .row .rvI{width:38px;height:38px}
.rvTk .row .rvI svg{width:17px;height:17px}
.rvTk .row .lb{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.rvTk .row .lb b{font-weight:700;color:var(--wine);white-space:nowrap}
.rvTk .row .lb i{flex:1;border-bottom:1.5px dotted rgba(92,21,38,.3);transform:translateY(-4px);min-width:14px}
.rvTk .row .lb span{font-size:13px;color:var(--stone);white-space:nowrap;font-variant-numeric:tabular-nums}
.rvTk .tear{height:0;border-top:2px dashed rgba(92,21,38,.22);margin:12px 0 14px}
.rvTk .rvBc{height:30px;margin:12px 0 4px;opacity:.55;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 12px,transparent 12px 14px,var(--ink) 14px 15px,transparent 15px 19px)}
.rvTk .btn{width:100%;max-width:none}
.rvTk .oTrust{margin-top:12px;justify-content:center}
body[data-order=b] .sheet .shQ{font-size:22px}
body[data-order=b] .shPane[data-step="2"] .rvTk{padding:16px 18px 14px;margin-bottom:14px}
body[data-order=b] .shPane[data-step="2"] .rvTk .field{margin:0}
body[data-order=b] .act{padding:0;background:none;border:0;box-shadow:none}
/* c. a split with the live phone */
body[data-order=c] .oStart{grid-template-columns:1fr;gap:16px}
body[data-order=c] .osR{order:-1;min-height:0;padding:6px 0 14px}
body[data-order=c] .osPhone{--pw:150px}
.rvSpl{display:grid;gap:10px}
.rvSpl .it{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--paper);border:1px solid var(--line);text-align:start}
.rvSpl .it .rvI{width:46px;height:46px}
.rvSpl .it b{display:block;font-size:15px;font-weight:800;color:var(--wine);line-height:1.2}
.rvSpl .it small{display:block;font-size:12.5px;color:var(--stone);margin-top:2px;line-height:1.4}
.rvSpl .it .k{font-size:11px;font-weight:800;color:var(--gold);margin-inline-end:6px}
.rvWa{display:flex;gap:10px;align-items:flex-end;margin:0 0 14px;padding:12px 12px 12px 14px;border-radius:16px;background:#e9f6ee;border:1px solid rgba(17,122,61,.18)}
.rvWa .rvI{width:36px;height:36px;background:#25d366;color:#fff;box-shadow:none}
.rvWa .bub{flex:1;position:relative;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#fff;font-size:13.5px;color:var(--ink);line-height:1.45;box-shadow:0 8px 20px -14px rgba(0,0,0,.4)}
.rvWa .bub b{color:var(--wine);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.rvWa .bub small{display:block;font-size:11px;color:var(--stone);margin-top:4px;text-align:end}
@media(min-width:900px){body[data-order=c] .oStart{grid-template-columns:.85fr 1.15fr}body[data-order=c] .osR{order:0;padding:0}body[data-order=c] .osPhone{--pw:200px}}
/* d. a stepper with a progress line */
.rvStp{position:relative;display:grid;gap:16px;padding-inline-start:54px;text-align:start}
.rvStp::before{content:"";position:absolute;inset-inline-start:17px;top:16px;bottom:16px;width:2px;background:rgba(179,137,63,.2);border-radius:2px}
.rvStp .ln{position:absolute;inset-inline-start:17px;top:16px;bottom:16px;width:2px;background:linear-gradient(180deg,var(--gold),var(--wine));transform:scaleY(var(--p,0));transform-origin:top;border-radius:2px}
.rvStp .it{position:relative;min-height:36px;padding-top:6px}
.rvStp .it .rvI{position:absolute;inset-inline-start:-54px;top:0;width:36px;height:36px;background:#fff;transition:background .4s,color .4s,box-shadow .4s}
.rvStp .it .rvI svg{width:16px;height:16px}
.rvStp .it.lit .rvI{background:var(--wine);color:var(--gold-lit);box-shadow:0 0 0 5px rgba(92,21,38,.1)}
.rvStp .it .k{position:absolute;inset-inline-start:-60px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#2a1119;font-size:10.5px;font-weight:800;display:grid;place-items:center;z-index:1}
.rvStp .it b{display:block;font-size:15px;font-weight:800;color:var(--wine);line-height:1.2}
.rvStp .it small{display:block;font-size:13px;color:var(--stone);margin-top:2px;line-height:1.45}
body[data-order=d] .osL{gap:16px}
body[data-order=d] .sheet .shQ{font-size:22px}
body[data-order=d] .shSteps li i{overflow:hidden}
body[data-order=d] .shSteps li i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-order=d] .shSteps li::before{height:2px;background:rgba(42,22,29,.1);overflow:hidden}
body[data-order=d] .shSteps li em{position:absolute;top:15px;inset-inline-start:calc(50% + 18px);width:calc(100% - 36px);height:2px;background:var(--gold);transform:scaleX(var(--f,0));transform-origin:right;border-radius:2px}
body[data-order=d] .shPane[data-step="2"] .rvStp{gap:4px;margin-top:4px}
body[data-order=d] .shPane[data-step="2"] .rvStp .it{padding-top:0}
body[data-order=d] .shPane[data-step="2"] .rvStp .field{margin-bottom:12px}
body[data-order=d] .shPane[data-step="2"] .rvStp .fiw svg{display:none}
body[data-order=d] .shPane[data-step="2"] .rvStp .fiw input{padding-inline-start:15px!important}
body[data-order=d] .shPane[data-step="2"] .rvStp .fiw input[dir="ltr"]{padding-left:15px!important}
@media(min-width:900px){body[data-order=d] .oStart{align-items:center}}
@media(max-width:560px){body[data-order] .oStart{text-align:start}}

/* =====================================================================
   r28 pass 4
   ===================================================================== */
/* ---- k. the 3D stage: one big phone, two tilted at the sides, native swipe ---- */
.tplShow[data-tv=st]{--cw:clamp(150px,min(236px,58vw,calc((100svh - 380px) / 2.164)),236px);--S:calc(var(--cw) * .66)}
.tplShow[data-tv=st] .tsCone{display:none}
.tplShow[data-tv=st] .tsStage{position:relative;height:calc(var(--cw) * 2.164 + 46px);margin-inline:calc(50% - 50vw);padding:0;overflow:hidden;user-select:none;-webkit-user-select:none}
.tplShow[data-tv=st] .tsTrack{position:absolute;inset:0;pointer-events:none}
.tplShow[data-tv=st] .tc{position:absolute;left:50%;top:14px;margin-left:calc(var(--cw) / -2);visibility:hidden;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tplShow[data-tv=st] .tc.v{visibility:visible}
.tplShow[data-tv=st] .tc .tcShot{box-shadow:0 50px 70px -36px rgba(0,0,0,1),0 0 0 1px rgba(237,220,178,.16)}
.tplShow[data-tv=st] .tc.is-on .tcShot{box-shadow:0 0 0 1px color-mix(in srgb,var(--b,#b3893f) 60%,#fff),0 0 80px -14px color-mix(in srgb,var(--b,#b3893f) 60%,transparent),0 56px 80px -34px rgba(0,0,0,1)}
.tplShow[data-tv=st] .tsPodium{display:block;bottom:4px;width:calc(var(--cw) * 1.9);height:40px}
.stSc{position:absolute;inset:0;z-index:5;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-tap-highlight-color:transparent}
.stSc::-webkit-scrollbar{display:none}
.stSc::before,.stSc::after{content:"";flex:none;width:calc(50% - var(--S) / 2)}
.stSc i{flex:none;width:var(--S);height:100%;scroll-snap-align:center}
.stSc.grab{cursor:grabbing}
.stInfo{display:grid;justify-items:center;gap:14px;margin-top:4px}
.stNav{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:12px;width:min(100%,440px)}
.stNav .tsArr{width:46px;height:46px}
.stNm{min-width:0;text-align:center;line-height:1.15}
.stNm>b{display:block;font-size:21px;font-weight:800;color:#fff7e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stNm>small{display:block;font-size:13px;font-weight:500;color:rgba(247,241,232,.6);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stNm .rvCnt{margin-top:6px;justify-content:center;font-size:11px}
.stNm .rvCnt b{font-size:13px;font-weight:700}
.stNm .rvCnt small{font-size:11px}
.stTh{display:flex;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:6px 16px 8px;margin-inline:-16px;-webkit-overflow-scrolling:touch;scroll-padding-inline:16px}
.stTh::-webkit-scrollbar{display:none}
.stTh button{flex:none;width:44px;height:62px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#150d11;cursor:pointer;opacity:.5;box-shadow:0 0 0 1px rgba(237,220,178,.16);transition:opacity .35s,transform .5s var(--ease),box-shadow .35s;-webkit-tap-highlight-color:transparent}
.stTh button img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.stTh button.on{opacity:1;transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold-lit),0 12px 22px -10px rgba(0,0,0,.8)}
.stTh button:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}
.stDesc{display:none}
.stBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.stBtns .btn{min-width:0;padding-inline:34px}
@media(max-width:899px){.stBtns{width:100%}.stBtns .btn{width:100%;max-width:340px}}
@media(min-width:900px){
  .tplShow[data-tv=st]{--cw:min(270px,calc((100svh - 300px) / 2.164));--S:calc(var(--cw) * .8)}
  .tplShow[data-tv=st] .tsStage{height:calc(var(--cw) * 2.164 + 56px)}
  .stInfo{gap:16px}
  .stDesc{display:block;max-width:520px;font-size:15px;line-height:1.6;color:rgba(247,241,232,.66);margin:0;text-align:center}
  .stTh{justify-content:safe center;margin-inline:0}
  .stTh button{width:50px;height:70px}
}
/* ---- g. the category tags as glass chips over the stage ---- */
.rvCat.gl{display:flex;gap:8px;margin:18px calc(-1 * clamp(16px,4vw,22px)) 4px;padding:4px clamp(16px,4vw,22px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rvCat.gl::-webkit-scrollbar{display:none}
.rvCat.gl button{flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:21px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:rgba(247,241,232,.82);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .35s,color .35s,border-color .35s}
.rvCat.gl button svg{width:17px;height:17px}
.rvCat.gl button small{font-size:11px;font-weight:700;color:rgba(237,220,178,.55);font-variant-numeric:tabular-nums}
.rvCat.gl button.on{background:rgba(247,236,210,.94);border-color:rgba(255,255,255,.6);color:#24101a}
.rvCat.gl button.on small{color:rgba(36,16,26,.55)}
@media(hover:hover){.rvCat.gl button:hover{border-color:rgba(255,255,255,.3);color:#fff7e6}}
@media(min-width:900px){.rvCat.gl{justify-content:center;flex-wrap:wrap;overflow:visible;margin-inline:auto;max-width:1000px}}

/* ---- the hero phone, a: one clean pose, flat inside (html[data-hp=a]); the motion is in templates/home.html ---- */
html[data-hp=a] .hstage{perspective:1500px;perspective-origin:50% 42%;padding-bottom:34px}
html[data-hp=a] .hscene{--by:-14;--bx:5;transform-style:flat;transform:translate3d(0,calc(var(--ty,0) * 1px),0) rotateY(calc((var(--by) + var(--ry,0)) * 1deg)) rotateX(calc((var(--bx) + var(--rx,0)) * 1deg))}
html[data-hp=a] .hphone,html[data-hp=a] .hscreen{transform:none}
html[data-hp=a] .hshadow{bottom:-30px;width:84%;height:34px;transform:translateX(-50%);transform-origin:50% 50%;background:radial-gradient(closest-side,rgba(42,22,29,.42),rgba(42,22,29,.14) 60%,transparent);z-index:-1}
@media(max-width:899px){html[data-hp=a] .hscene{--by:-9;--bx:3}html[data-hp=a] .hstage{padding-bottom:30px}}
@media(prefers-reduced-motion:reduce){html[data-hp=a] .hscene{transform:rotateY(-10deg) rotateX(3deg)}}
.hero .ctas .btn svg{width:15px;height:15px;fill:currentColor;flex:none;margin-inline-end:8px}

/* ---- steps e, pass 4: a real screen per step, a bigger phone, the lit step under it on a phone ---- */
.rvHow.ph .phone{--pw:clamp(160px,min(232px,56vw,calc((100svh - 400px) / 2.164)),232px)}
.rvHow.ph .scr>video{width:100%;height:100%;object-fit:cover;object-position:top;background:#150d11}
.rvHow.ph .scr .sPick,.rvHow.ph .scr .sForm{display:flex;flex-direction:column;gap:calc(var(--pw) * .035);padding:calc(var(--pw) * .15) calc(var(--pw) * .06) calc(var(--pw) * .06);background:linear-gradient(180deg,#1b0f15,#110a0e);color:#f7f1e8;font-size:calc(var(--pw) * .052);text-align:start}
.rvHow.ph .sTop{display:flex;justify-content:space-between;align-items:baseline}
.rvHow.ph .sTop b{font-size:calc(var(--pw) * .075);font-weight:800;color:#fff7e6}
.rvHow.ph .sTop span{font-size:calc(var(--pw) * .048);color:rgba(237,220,178,.6);font-variant-numeric:tabular-nums;direction:ltr}
.rvHow.ph .sChips{display:flex;gap:calc(var(--pw) * .02);flex-wrap:nowrap;overflow:hidden}
.rvHow.ph .sChips i{flex:none;font-style:normal;padding:calc(var(--pw) * .012) calc(var(--pw) * .04);border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(247,241,232,.75);font-size:calc(var(--pw) * .046);font-weight:700;transition:background .3s,color .3s}
.rvHow.ph .sChips i.on{background:#f3e3c3;color:#24101a;border-color:transparent}
.rvHow.ph .sGrid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--pw) * .035);min-height:0}
.rvHow.ph .sGrid i{position:relative;border-radius:calc(var(--pw) * .05);overflow:hidden;box-shadow:0 0 0 1px rgba(237,220,178,.14);transition:box-shadow .35s}
.rvHow.ph .sGrid i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:1}
.rvHow.ph .sGrid i.on{box-shadow:0 0 0 2px #f3d79a,0 10px 24px -8px rgba(243,215,154,.6)}
.rvHow.ph .sGrid i.on::after{content:"";position:absolute;top:6%;inset-inline-end:7%;width:22%;aspect-ratio:1;border-radius:50%;background:#f3d79a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2324101a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.rvHow.ph .sCta{height:calc(var(--pw) * .15);border-radius:99px;display:grid;place-items:center;font-size:calc(var(--pw) * .056);font-weight:800;background:rgba(255,255,255,.08);color:rgba(247,241,232,.6);border:1px solid rgba(255,255,255,.12);transition:background .35s,color .35s,transform .35s var(--ease)}
.rvHow.ph .sCta.on{background:linear-gradient(160deg,#7a2238,#5c1526);color:#fff7ec;border-color:rgba(243,215,154,.5);transform:scale(1.03)}
.rvHow.ph .sTap{position:absolute;width:calc(var(--pw) * .13);aspect-ratio:1;margin:calc(var(--pw) * -.065) 0 0 calc(var(--pw) * -.065);border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 calc(var(--pw) * .025) rgba(255,255,255,.18);opacity:0;pointer-events:none;z-index:2;inset:auto}
.rvHow.ph .sBar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:calc(var(--pw) * .02)}
.rvHow.ph .sBar i{display:block;height:100%;background:linear-gradient(90deg,#f3d79a,#c9a35a);transform-origin:right;transform:scaleX(.08)}
.rvHow.ph .sForm label{font-size:calc(var(--pw) * .044);font-weight:700;color:rgba(237,220,178,.7);margin-bottom:calc(var(--pw) * -.02)}
.rvHow.ph .sIn{position:relative;height:calc(var(--pw) * .13);border-radius:calc(var(--pw) * .035);padding:0 calc(var(--pw) * .04);display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:calc(var(--pw) * .056);font-weight:600;color:#fff7e6;white-space:nowrap;overflow:hidden;transition:border-color .3s,background .3s}
.rvHow.ph .sIn.on{border-color:rgba(243,215,154,.75);background:rgba(243,215,154,.08)}
.rvHow.ph .sIn u{display:none;width:1.5px;height:52%;background:#f3d79a;margin-inline-start:2px;animation:sCaret 1s steps(2) infinite}
.rvHow.ph .sIn.on u{display:block}
.rvHow.ph .sForm .sCta{margin-top:auto}
@keyframes sCaret{50%{opacity:0}}
@media(max-width:899px){
  .rvHow.ph{gap:12px}
  .rvHow.ph .phStick{gap:12px}
  .rvHow.ph .list>.st{padding:16px 18px;padding-inline-end:18px}
}
@media(max-width:899px) and (max-height:700px){.rvHow.ph .phone{--pw:142px}.rvHow.ph .phStick{gap:8px}.rvHow.ph .phRail button b{display:none}.rvHow.ph .phRail button{padding:2px 0}html[data-gl=g] .rvHow.ph .phRail button .ic{width:38px;height:38px}.rvHow.ph .list>.st p{font-size:13px;line-height:1.45}.rvHow.ph .list>.st{padding:12px 16px}.rvHow.ph .list>.st h3{font-size:17px}html[data-gl=g] .rvHow .list .ic{width:40px;height:40px}}

/* =====================================================================
   glass frames (html[data-gl=g]): frosted panels with a hairline of light, no gold number badges or check circles, bigger icons
   ===================================================================== */
html[data-gl=g] .rvHow .ok{display:none}
html[data-gl=g] .rvHow.ph .st{padding-inline-end:20px}
html[data-gl=g] .rvHow.ph .st .k{color:rgba(237,220,178,.6);font-weight:600;letter-spacing:.04em}
html[data-gl=g] .rvHow .ic{width:56px;height:56px}
html[data-gl=g] .rvHow .ic svg{width:27px;height:27px;stroke-width:1.35}
html[data-gl=g] .rvHow.ph .phRail button .ic{width:42px;height:42px}
html[data-gl=g] .rvHow.ph .phRail button .ic svg{width:20px;height:20px}
html[data-gl=g] .rvHow.ph .phRail button{width:62px}
/* the steps on a dark ground: glass cards, the icon floats in the glass without a medallion */
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .st,html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -36px rgba(0,0,0,.9)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .st.cur,html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st.cur{border-color:rgba(255,255,255,.26)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow .st .ic,html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow .st.lit .ic{background:none;box-shadow:none;color:rgba(247,241,232,.55)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow .st.lit .ic{color:#f3d79a}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button .ic{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(247,241,232,.5)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button.lit .ic{background:rgba(255,255,255,.1);color:#f3d79a;box-shadow:inset 0 0 0 1px rgba(243,215,154,.45)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph .phRail button.on .ic{background:rgba(243,215,154,.92);color:#24101a;box-shadow:0 0 0 6px rgba(243,215,154,.12)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st .n{color:rgba(255,255,255,.14)}
html[data-gl=g] body:is([data-rh="1"],[data-rh="2"]) .rvHow.ld .st.lit .n{color:rgba(243,215,154,.8)}
/* the order area: the icons stand on glass discs, no number badges */
html[data-gl=g] .rvIcoRow .it .k,html[data-gl=g] .rvStp .it .k{display:none}
html[data-gl=g] .rvI{width:54px;height:54px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,253,249,.6));box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.6),0 14px 30px -18px rgba(67,16,28,.45)}
html[data-gl=g] .rvI svg{width:25px;height:25px;stroke-width:1.4}
html[data-gl=g] .rvIcoRow .it .rvI{width:66px;height:66px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 18px 36px -20px rgba(67,16,28,.5)}
html[data-gl=g] .rvIcoRow .it .rvI svg{width:29px;height:29px}
html[data-gl=g] .rvIcoRow::before{top:33px;background:linear-gradient(90deg,transparent,rgba(92,21,38,.16),rgba(92,21,38,.16),transparent)}
html[data-gl=g] .rvAct .ttl .rvI{width:42px;height:42px;background:rgba(92,21,38,.9);color:#f3d79a}
html[data-gl=g] body[data-order=a] #order .oStart{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,253,249,.5));border:1px solid rgba(255,255,255,.85);box-shadow:0 40px 80px -48px rgba(67,16,28,.5),inset 0 1px 0 #fff}
html[data-gl=g] body[data-order=a] #order .oStart::before{display:none}
/* the feature tiles: glass on the paper, the icon bigger and free of its gold ring */
html[data-gl=g] #features .feat{background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,253,249,.45));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 26px 50px -36px rgba(67,16,28,.4)}
html[data-gl=g] #features .feat .ic{width:62px;height:62px;background:none;border:0;box-shadow:none}
html[data-gl=g] #features .feat .ic svg{width:31px;height:31px;stroke:var(--wine);stroke-width:1.3}
html[data-gl=g] #features .feat .ic::after{display:none}
html[data-gl=g] #features .feat:hover .ic svg{stroke:var(--gold-soft)}
html[data-gl=g] #features[data-feat=b] .feat.lit{border-color:rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 26px 50px -30px rgba(67,16,28,.45)}

/* =====================================================================
   rh 2: wine once. Paper hero, the deep wine steps melting into the black stage, paper features, deep ink pricing,
   paper order, warm charcoal questions, paper footer. Seams are gradients and a hairline of gold, never a hard cut of two darks
   ===================================================================== */
body[data-rh="2"] #how{background:linear-gradient(180deg,#2b1019 0%,#1f0b13 62%,#0c070a 100%)}
body[data-rh="2"] #templates::before{background:linear-gradient(180deg,#0c070a,rgba(7,6,10,0))}
body[data-rh="2"] #pricing{background:radial-gradient(55% 45% at 18% 8%,rgba(201,163,90,.16),transparent 62%),radial-gradient(50% 40% at 88% 92%,rgba(120,150,190,.10),transparent 62%),linear-gradient(172deg,#161a22 0%,#10131a 55%,#0c0e13 100%)}
body[data-rh="2"] #pricing::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,188,128,.6),transparent);z-index:1}
body[data-rh="2"] #pricing .pBlob.b{background:radial-gradient(closest-side,rgba(150,170,200,.12),transparent 70%)}
body[data-rh="2"] #faq{background:linear-gradient(180deg,#1d1a17 0%,#161311 100%);position:relative}
body[data-rh="2"] #faq::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,188,128,.5),transparent)}
/* the three tiers: a line icon each, the same stroke (html[data-pic="1"]) */
.price .pIc{display:none}
html[data-pic="1"] .price .pIc{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 12px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18);color:#f3d79a}
html[data-pic="1"] .price .pIc svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
html[data-pic="1"] .price.hot .pIc{background:linear-gradient(160deg,rgba(243,215,154,.28),rgba(243,215,154,.06));box-shadow:inset 0 0 0 1px rgba(243,215,154,.45)}

/* ---- the floating actions, a: one quiet ink family, smaller, the primary in paper (html[data-fab=a]); no backdrop filter on a
   fixed layer (it would re-filter every scroll frame in WebKit) ---- */
html[data-fab=a] .bar{background:rgba(27,19,23,.94);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);gap:4px;padding:5px}
html[data-fab=a] .bar>*{height:46px;font-size:14px;font-weight:700}
html[data-fab=a] .bar .bWa,html[data-fab=a] .bar .bLead{background:transparent;color:rgba(247,241,232,.78);transition:background .3s,color .3s}
html[data-fab=a] .bar .bWa:hover,html[data-fab=a] .bar .bLead:hover{background:rgba(255,255,255,.08);color:#fff7ec}
html[data-fab=a] .bar .bGo{background:#f6efe3;color:#24101a;box-shadow:none;transition:background .3s,transform .4s var(--ease)}
html[data-fab=a] .bar .bGo:hover{background:#fff;transform:translateY(-1px)}
@media(max-width:420px){html[data-fab=a] .bar .bWa,html[data-fab=a] .bar .bLead{width:46px}}
@media(min-width:900px){
  html[data-fab=a] .bar{bottom:20px;inset-inline-start:20px;padding:4px;gap:2px}
  html[data-fab=a] .bar>*{height:40px;font-size:13.5px;padding:0 12px}
  html[data-fab=a] .bar .bGo{padding:0 18px}
  html[data-fab=a] .bar .bWa span,html[data-fab=a] .bar .bLead span{display:none}
  html[data-fab=a] .bar .bWa,html[data-fab=a] .bar .bLead{width:40px;padding:0}
  html[data-fab=a] .bar svg{width:18px;height:18px;stroke-width:1.7}
}

/* ---- "your invitation", a: a slim bar, one line, after a real choice only (html[data-rb=a]) ---- */
html[data-rb=a] .pop{left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));height:64px;padding:0 6px 0 8px;gap:10px;border-radius:20px;background:rgba(27,19,23,.96);box-shadow:0 18px 40px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);color:#f7f1e8}
html[data-rb=a] .pop .ph{width:30px;padding:2px;border-radius:7px;background:#000}
html[data-rb=a] .pop .scr{border-radius:5px}
html[data-rb=a] .pop .ov{display:none}
html[data-rb=a] .pop .tx{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:0;order:1}
html[data-rb=a] .pop .ey{display:none}
html[data-rb=a] .pop .tx b{grid-column:1;grid-row:1;font-size:15px;color:#fff7ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;align-self:end}
html[data-rb=a] .pop .tx>span{grid-column:1;grid-row:2;font-size:12px;color:rgba(247,241,232,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;align-self:start}
html[data-rb=a] .pop .go{grid-column:2;grid-row:1 / span 2;margin:0;height:42px;padding:0 16px;background:#f6efe3;color:#24101a;box-shadow:none;font-size:14px}
html[data-rb=a] .pop .x{position:static;order:2;flex:none;width:34px;height:42px;color:rgba(247,241,232,.55)}
@media(min-width:900px){html[data-rb=a] .pop{left:auto;right:auto;inset-inline-start:20px;width:420px;bottom:76px}}

/* ---- the rose petals (assets/home/pt.js) ---- */
.ptC{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
.ptOn>.ptC{opacity:1}
.ptBack{z-index:0}
.ptFront{z-index:6}
.hero>.in,#order>.wrap{position:relative;z-index:2}

/* ---- the film's own preloader (html[data-pre=a]): a wine glass in one line, a clear sound button ---- */
.hPre{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--pw) * .045);padding:0 9%;text-align:center;color:#f7f1e8;
  background:radial-gradient(70% 45% at 50% 42%,rgba(92,21,38,.38),transparent 70%),linear-gradient(180deg,rgba(16,9,12,.8) 0%,rgba(16,9,12,.94) 100%);transition:opacity .6s var(--ease)}
html:not([data-pre=a]) .hPre{display:none}
.hPre.off{opacity:0;pointer-events:none}
.hPreG{width:calc(var(--pw) * .2);height:auto;overflow:visible}
.hPreG .l{fill:none;stroke:#ecd39c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hPreDraw 1.8s var(--ease) .3s forwards}
.hPreG .l+.l{animation-delay:1s}
.hPreG .w{fill:#8e2440;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:hPreFill 1.6s var(--ease) 1.5s forwards}
@keyframes hPreDraw{to{stroke-dashoffset:0}}
@keyframes hPreFill{to{transform:scaleY(.62)}}
.hPreK{font-size:calc(var(--pw) * .047);font-weight:600;color:rgba(247,241,232,.72);letter-spacing:.01em}
.hPreGo{display:inline-flex;align-items:center;gap:9px;height:calc(var(--pw) * .16);min-height:46px;padding:0 calc(var(--pw) * .07);border:0;border-radius:99px;background:#f6efe3;color:#24101a;font:inherit;font-size:calc(var(--pw) * .056);font-weight:800;cursor:pointer;box-shadow:0 16px 34px -14px rgba(0,0,0,.8);transition:transform .35s var(--ease)}
.hPreGo:active{transform:scale(.95)}
.hPreGo svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hPreGo .w1,.hPreGo .w2{animation:hPreWave 1.6s ease-in-out infinite}
.hPreGo .w2{animation-delay:.25s}
@keyframes hPreWave{0%,100%{opacity:.25}50%{opacity:1}}
.hPreMute{border:0;background:none;color:rgba(247,241,232,.62);font:inherit;font-size:calc(var(--pw) * .044);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:6px 10px}
.hSnd.call{animation:hSndCall 1.4s var(--ease) 3}
@keyframes hSndCall{0%{transform:scale(1)}30%{transform:scale(1.14)}60%{transform:scale(.98)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hPreG .l{stroke-dashoffset:0}.hPreG .w{transform:scaleY(.62)}}

.rvGal[data-tv=st] ~ .tsFoot .tsCnt,#templates[data-tv=st] #tsCnt{display:none}
html[data-rb=a] .pop::before,html[data-rb=a] .pop::after{display:none}

/* =====================================================================
   r28 pass 5
   ===================================================================== */
/* ---- hero copy: no rule before the kicker, the headline breaks where the owner wants it, three real buttons ---- */
.hero .hkick::before{display:none}
.hcopy{container-type:inline-size}
.hero .hh1{text-wrap:wrap}
.hero .hh1 .hl{display:block;white-space:nowrap}
.hero .hh1 .hl1{font-size:clamp(24px,6.3cqi,50px);line-height:1.1;margin-bottom:.06em}
.hero .hh1 .hl2{font-size:clamp(26px,9.2cqi,76px);line-height:1.02}
.hero .ctas{display:grid;grid-template-columns:auto auto auto;justify-content:start;gap:10px}
.hero .ctas .btn{width:auto;max-width:none;min-height:54px;padding:0 26px;font-size:16px}
.btn.quiet{color:var(--wine);background:rgba(92,21,38,.04);border:1px solid rgba(92,21,38,.18);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.btn.quiet:hover{background:rgba(92,21,38,.08);border-color:rgba(92,21,38,.32);transform:translateY(-2px)}
.hero .ctas .btn svg.play{width:15px;height:15px;fill:currentColor;flex:none;margin:0}
@media(max-width:900px){
  .hero .ctas{grid-template-columns:1fr 1fr;justify-content:stretch;width:100%;max-width:400px;margin-inline:auto}
  .hero .ctas .btn{width:100%;padding:0 12px}
  .hero .ctas .btn.gold{grid-column:1 / -1}
}
/* ---- the hero phone, pass 5: almost frontal at rest, no lean on open; the scroll drives a slow drift and tilt ---- */
html[data-hp=a] .hscene{--by:-6;--bx:3}
@media(max-width:899px){html[data-hp=a] .hscene{--by:-4;--bx:2.5}}
/* ---- the film gate, pass 5: the glass keeps filling while it waits, a ring breathes around the button, an arrow points at it ---- */
.hPreG .w{display:none}
.hPreG .lvl{transform:translateY(56px);animation:hPreLvl 7s cubic-bezier(.45,0,.25,1) 1.6s infinite}
.hPreG .wv{fill:#8e2440;animation:hPreWv 2.6s linear infinite}
.hPreG .wv2{fill:#6f1a31;opacity:.55;animation:hPreWv 3.8s linear infinite reverse}
@keyframes hPreWv{from{transform:translateX(-20px)}to{transform:translateX(-60px)}}
@keyframes hPreLvl{0%{transform:translateY(56px)}46%{transform:translateY(27px)}52%{transform:translateY(25px)}58%{transform:translateY(28.5px)}64%{transform:translateY(26.5px)}70%,86%{transform:translateY(27px)}100%{transform:translateY(56px)}}
.hPreArr{display:block;width:22px;height:22px;color:#ecd39c;margin:-2px 0 -4px;animation:hPreArr 1.4s cubic-bezier(.5,0,.3,1) infinite}
.hPreArr svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes hPreArr{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(4px);opacity:1}}
.hPreGo{position:relative}
.hPreGo::before,.hPreGo::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(246,239,227,.75);pointer-events:none;animation:hPreRing 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.hPreGo::after{animation-delay:1.1s}
@keyframes hPreRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.28,1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.hPreG .lvl{animation:none;transform:translateY(27px)}.hPreArr,.hPreGo::before,.hPreGo::after{animation:none}.hPreGo::after{display:none}}

/* ---- the icon system (assets/home/icons.js): draw on enter, one motion of the moving part ---- */
.hzi{display:inline-grid;place-items:center;flex:none;line-height:0}
.hzs{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hzs .fill{fill:currentColor;stroke:none}
.hzs [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0}
.hzi:not(.in) .hzs [pathLength]{stroke-dashoffset:1}
/* the draw and the motions run in assets/home/icons.js (Web Animations) */
@media(prefers-reduced-motion:reduce){.hzi .hzs *{animation:none!important}}
/* the icon system in its places */
.rvHow .ic .hzi,.rvI .hzi{width:56%;height:56%}
.feat .ic .hzi{width:58%;height:58%;color:var(--gold)}
html[data-gl=g] #features .feat .ic .hzi{width:34px;height:34px;color:var(--wine)}
.price .pIc .hzi{width:34px;height:34px}
.kChips button .hzi,.rvCat button .hzi{width:19px;height:19px}
.bar .hzi{width:20px;height:20px}
.tlIcon.hzi{width:24px;height:24px}
.faq .q .qi{width:24px;height:24px;margin-inline-end:12px;color:var(--gold);flex:none}
.faq .q{display:flex;align-items:center}
/* ---- steps e, pass 5: a big phone; on a phone the four steps are a column of glass tiles beside it that light and stay lit ---- */
.rvHow.ph{--stInk:var(--wine);--stMute:#7a6660;--stTile:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,253,249,.5));--stLine:rgba(92,21,38,.14);--stAcc:var(--wine);--stAccLine:rgba(92,21,38,.4);--stOnBg:var(--wine);--stOnFg:#f6efe3;--stHalo:rgba(92,21,38,.08)}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph{--stInk:#f7f1e8;--stMute:rgba(247,241,232,.72);--stTile:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));--stLine:rgba(255,255,255,.14);--stAcc:#ecd39c;--stAccLine:rgba(236,211,156,.5);--stOnBg:#ecd39c;--stOnFg:#24101a;--stHalo:rgba(236,211,156,.14)}
.rvHow.ph .phStick{display:grid;gap:16px;justify-items:stretch}
.rvHow.ph .phRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.rvHow.ph .phone{--pw:clamp(188px,min(56vw,calc((100svh - 250px) / 2.164)),236px)}
.rvHow.ph .phRail{position:relative;display:grid;gap:12px;align-content:center;padding-inline-start:0}
.rvHow.ph .phRail::before,.rvHow.ph .phRail::after{content:"";position:absolute;inset-inline-start:23px;top:24px;bottom:24px;width:1.5px;border-radius:2px;background:var(--stLine)}
.rvHow.ph .phRail::after{background:var(--stAcc);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .6s var(--ease)}
.rvHow.ph .phRail button{direction:inherit;position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);min-width:0;align-items:center;gap:10px;width:auto;padding:0;border:0;background:none;text-align:start;font:inherit;cursor:pointer;opacity:.42;transition:opacity .5s;-webkit-tap-highlight-color:transparent}
.rvHow.ph .phRail button b{display:block;font-size:13.5px;font-weight:800;line-height:1.2;color:var(--stInk)}
html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:48px;height:48px;border-radius:15px;background:var(--stTile);box-shadow:inset 0 0 0 1px var(--stLine);color:var(--stMute);transform:none;transition:background .5s,box-shadow .5s,color .5s}
.rvHow.ph .phRail button .ic .hzi{width:25px;height:25px}
.rvHow.ph .phRail button.lit{opacity:1}
html .rvHow.ph .phRail button.lit .ic,html[data-gl=g] body .rvHow.ph .phRail button.lit .ic{color:var(--stAcc);box-shadow:inset 0 0 0 1px var(--stAccLine)}
html .rvHow.ph .phRail button.on .ic,html[data-gl=g] body .rvHow.ph .phRail button.on .ic{background:var(--stOnBg);color:var(--stOnFg);box-shadow:0 0 0 6px var(--stHalo),0 14px 30px -14px var(--stOnBg)}
.rvHow.ph .phRail button.on b{color:var(--stInk)}
.rvHow.ph .phNow{margin:0;min-height:3em;text-align:center;font-size:15px;line-height:1.5;color:var(--stMute);text-wrap:balance}
@media(max-width:899px){.rvHow.ph .list{display:none}}
@media(max-width:899px) and (max-height:700px){.rvHow.ph .phone{--pw:188px}.rvHow.ph .phRail{gap:8px}.rvHow.ph .phRail button b{font-size:13px}.rvHow.ph .phNow{font-size:14px;min-height:2.8em}}
@media(min-width:900px){
  .rvHow.ph .phRow{grid-template-columns:auto}
  .rvHow.ph .phRail,.rvHow.ph .phNow{display:none}
  .rvHow.ph .phone{--pw:340px}
  .rvHow.ph{grid-template-columns:400px 1fr}
  .rvHow.ph .st{grid-template-columns:56px 1fr;align-items:center}
}
/* the step cards: the icon lives in its own glass tile, no numbers anywhere */
.rvHow.ph .st .k,.rvHow .ok{display:none!important}
html .rvHow.ph .st .ic,html[data-gl=g] body .rvHow.ph .st .ic{width:56px;height:56px;border-radius:17px;background:var(--stTile);box-shadow:inset 0 0 0 1px var(--stLine);color:var(--stMute)}
html .rvHow.ph .st.lit .ic,html[data-gl=g] body .rvHow.ph .st.lit .ic{color:var(--stAcc);box-shadow:inset 0 0 0 1px var(--stAccLine)}
html .rvHow.ph .st.cur .ic,html[data-gl=g] body .rvHow.ph .st.cur .ic{background:var(--stOnBg);color:var(--stOnFg)}
.rvHow.ph .st .ic .hzi{width:28px;height:28px}

/* =====================================================================
   rh 3 (pass 5 default): two families only. Warm ivory paper and one deep neutral ink, wine only as an accent.
   hero paper, steps paper (the dark phone carries it), gallery ink, features paper, pricing ink, order paper, faq ink, footer paper.
   Every ink section opens on a hairline of gold; no purple or pink in any ground or glow
   ===================================================================== */
body[data-rh="3"]{--ink0:#111113;--ink1:#16161a}
body[data-rh="3"] #how{background:linear-gradient(180deg,#f3ece1 0%,#efe6d8 100%);color:var(--ink)}
body[data-rh="3"] #templates,body[data-rh="3"] #templates[data-skin]{background:var(--ink0)}
body[data-rh="3"] #templates::before{display:none}
body[data-rh="3"] #templates .tsWorld,body[data-rh="3"] #templates .tsAmb{display:none!important}
body[data-rh="3"] #pricing{background:radial-gradient(60% 40% at 50% 0%,rgba(201,163,90,.10),transparent 70%),linear-gradient(180deg,var(--ink1),var(--ink0))}
body[data-rh="3"] #pricing .pBlob{display:none}
body[data-rh="3"] #faq{background:var(--ink0)}
body[data-rh="3"] :is(#templates,#pricing,#faq){position:relative}
body[data-rh="3"] :is(#templates,#pricing,#faq)::after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,188,128,.55),transparent);pointer-events:none;z-index:2}
/* the stage on ink: the glow of the centre phone is warm light, never the template's own pink or violet */
body[data-rh="3"] .tplShow .tc.is-on .tcShot{box-shadow:0 0 0 1px rgba(246,239,227,.55),0 0 70px -18px rgba(246,239,227,.22),0 56px 80px -34px #000}
body[data-rh="3"] .tplShow .tsPodium{background:radial-gradient(closest-side,rgba(246,239,227,.16),transparent 75%)!important;box-shadow:none!important}
body[data-rh="3"] .tplShow{--acc:#c9a35a!important}
/* the petal layer over the whole page (pass 5): fixed, under the nav, the bar and every sheet */
#ptPage{position:fixed;inset:0;z-index:60;pointer-events:none;contain:strict}
/* finish12: gone while the order sheet, the viewer or a popup is open */
#ptPage{transition:opacity .35s var(--ease)}#ptPage.ptHide{opacity:0}
#ptPage .ptC{position:absolute}
#ptPage .ptBack{z-index:0}#ptPage .ptFront{z-index:1}
/* ---- stage and rows (tpl 0, layout 6), tsl b: the template's name above the stage, its two buttons under the rows ---- */
.tplShow[data-tsl=b][data-tv=c][data-tl="6"]{display:flex;flex-direction:column}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] :is(.tsInfo,.fInfo,.fTxt){display:contents}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] .fInfo>.tsArr{display:none}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] :is(.tcCat,.tcNm){order:-2;align-self:center;text-align:center}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] .tcD{order:-1;align-self:center;text-align:center;max-width:520px;margin:6px auto 14px}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] .tsStage{order:0}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] .tcBtns{order:1;align-self:center;justify-content:center;margin-top:18px}
.tplShow[data-tsl=b][data-tv=c][data-tl="6"] .fTxt.swap>*{opacity:.3}
/* ---- the floating bar, pass 5: a clear WhatsApp mark, a green primary with a shine and an arrow that nudges forward (left) ---- */
html[data-fab=a] .bar .bWa{color:#fff}
html[data-fab=a] .bar .bWa .hzi{width:23px;height:23px;color:#4fd98a}
html[data-fab=a] .bar .bLead .hzi{width:20px;height:20px}
html[data-fab=a] .bar .bGo{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#25935f,#177049);color:#fff;box-shadow:0 10px 24px -12px rgba(23,112,73,.9),inset 0 1px 0 rgba(255,255,255,.25)}
html[data-fab=a] .bar .bGo:hover{background:linear-gradient(160deg,#2aa06a,#197a50)}
html[data-fab=a] .bar .bGo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-120%) skewX(-18deg);animation:fabShine 4.2s cubic-bezier(.5,0,.3,1) 1.5s infinite}
@keyframes fabShine{0%{transform:translateX(-120%) skewX(-18deg)}28%,100%{transform:translateX(330%) skewX(-18deg)}}
html[data-fab=a] .bar .bGo .hzi{width:19px;height:19px;animation:fabNudge 2.1s cubic-bezier(.5,0,.3,1) infinite}
@keyframes fabNudge{0%,55%,100%{transform:translateX(0)}70%{transform:translateX(-5px)}85%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){html[data-fab=a] .bar .bGo::after,html[data-fab=a] .bar .bGo .hzi{animation:none}}
@media(min-width:900px){.rvHow.ph .list{gap:26vh;padding:6vh 0 30vh}.rvHow.ph .phStick{top:90px}}
/* ---- steps e on a phone, pass 5b: the big phone centred, a horizontal rail of four tiles under it, then the lit step's
   title on one line and its sentence ---- */
.rvHow.ph .phNow b{display:block;font-size:19px;font-weight:800;line-height:1.25;color:var(--stInk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvHow.ph .phNow p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--stMute);text-wrap:balance}
@media(max-width:899px){
  .rvHow.ph .phStick{gap:14px}
  .rvHow.ph .phRow{grid-template-columns:auto;justify-content:center;justify-items:center;gap:16px}
  .rvHow.ph .phone{order:-1;--pw:clamp(165px,min(64vw,calc((100svh - 330px) / 2.164)),250px)}
  .rvHow.ph .phRail{display:flex;gap:16px;justify-content:center;padding:0}
  .rvHow.ph .phRail::before,.rvHow.ph .phRail::after{top:50%;bottom:auto;inset-inline-start:24px;inset-inline-end:24px;width:auto;height:1.5px;margin-top:-.75px}
  .rvHow.ph .phRail::after{transform-origin:right;transform:scaleX(var(--p,0))}
  .rvHow.ph .phRail button{grid-template-columns:48px;gap:0}
  .rvHow.ph .phRail button b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rvHow.ph .phNow{min-height:0;padding:0 8px}
}
@media(max-width:899px) and (max-height:700px){.rvHow.ph .phone{--pw:165px}.rvHow.ph .phStick{gap:10px}.rvHow.ph .phRow{gap:12px}.rvHow.ph .phRail{gap:12px}html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:42px;height:42px;border-radius:13px}.rvHow.ph .phRail button{grid-template-columns:42px}.rvHow.ph .phNow b{font-size:17px}.rvHow.ph .phNow p{font-size:14px;line-height:1.45}}
[dir=ltr] .rvHow.ph .phRail::after{transform-origin:left}

/* =====================================================================
   pass 5b
   ===================================================================== */
/* ---- one primary colour on the whole page: every primary is the green of "בנו את שלכם", with the same shine ---- */
html[data-fab=a] .btn.gold{box-shadow:0 14px 30px -14px rgba(23,112,73,.85)}
html[data-fab=a] .btn.gold:hover{box-shadow:0 18px 36px -14px rgba(23,112,73,.9)}
html[data-fab=a] .btn.gold::after,html[data-fab=a] .hero .btn.gold::after{inset:0;z-index:-2;background:linear-gradient(160deg,#25935f,#177049)}
html[data-fab=a] .btn.gold::before{left:0;top:0;bottom:0;width:42%;height:auto;aspect-ratio:auto;margin:0;z-index:-1;border-radius:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);transform:translateX(-130%) skewX(-18deg);animation:fabShine 4.2s cubic-bezier(.5,0,.3,1) 1.2s infinite}
html[data-fab=a] .hero .btn.gold{box-shadow:0 16px 34px -14px rgba(23,112,73,.9)}
@media(prefers-reduced-motion:reduce){html[data-fab=a] .btn.gold::before{animation:none;opacity:0}}

/* ---- the film gate button: big and green, the rings breathe in green ---- */
.hPreGo{height:calc(var(--pw) * .19);min-height:52px;padding:0 calc(var(--pw) * .09);background:linear-gradient(160deg,#2aa06a,#177049);color:#fff;font-size:calc(var(--pw) * .066);box-shadow:0 18px 36px -12px rgba(23,112,73,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.hPreGo svg{width:24px;height:24px}
.hPreGo::before,.hPreGo::after{border-color:rgba(74,214,140,.85)}

/* ---- captions on a phone: on the phone itself, a readable pill over the film (cap c keeps them above on a wide screen) ---- */
@media(max-width:899px){
  #hStage[data-cap=c] .rvCap.c{display:none}
  #hStage[data-cap=c] .hcap{display:flex;top:auto;bottom:13%;padding:0 6%}
  #hStage[data-cap=c] .hcap span{background:rgba(20,12,16,.82);color:#fff7ec;font-size:17px;padding:11px 18px;border-radius:16px;line-height:1.3;box-shadow:inset 0 0 0 1px rgba(237,220,178,.4),0 18px 40px -16px rgba(0,0,0,.85);-webkit-backdrop-filter:none;backdrop-filter:none;text-wrap:balance}
}

/* ---- phones: a tighter vertical rhythm everywhere (desktop unchanged) ---- */
@media(max-width:899px){
  section{padding:46px 0}
  .hero{padding:82px 0 30px}
  .hero .in{gap:18px}
  .hero .hcopy>p.hkick{margin-bottom:8px}
  .hero .hh1{margin:0 0 10px}
  .hero .hcopy>p{margin-bottom:0}
  .hero .ctas{margin-top:16px;gap:8px}
  .hero .ctas .btn{min-height:50px}
  html[data-hp=a] .hstage{padding:4px 0 26px}
  .h2{margin:6px 0 8px}
  .sub{font-size:15.5px}
  .rvHow.ph{margin-top:12px}
  body:is([data-rh="1"],[data-rh="2"]) #how{padding-bottom:56px}
  .rvCat.gl{margin-top:12px}
  .featGrid{margin-top:22px}
  .oStart{margin-top:18px}
  #faqList{margin-top:20px!important}
}

/* ---- steps on a phone, pass 5b: bigger rail tiles, and the scene keeps the rail and the lit title clear of the floating bar ---- */
@media(max-width:899px){
  .rvHow.ph .phone{--pw:clamp(150px,min(62vw,calc((100svh - 330px - env(safe-area-inset-bottom)) / 2.164)),244px)}
  .rvHow.ph .phRail{gap:14px}
  .rvHow.ph .phRail button{grid-template-columns:58px}
  html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:58px;height:58px;border-radius:18px}
  .rvHow.ph .phRail button .ic .hzi{width:27px;height:27px}
  .rvHow.ph .phRail::before,.rvHow.ph .phRail::after{inset-inline-start:29px;inset-inline-end:29px}
  .rvHow.ph .phStick{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media(max-width:899px) and (max-height:700px){
  .rvHow.ph .phone{--pw:clamp(140px,calc((100svh - 330px - env(safe-area-inset-bottom)) / 2.164),180px)}
  html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:54px;height:54px;border-radius:17px}
  .rvHow.ph .phRail button{grid-template-columns:54px}
  .rvHow.ph .phRail button .ic .hzi{width:26px;height:26px}
}
/* ---- deliberate line breaks (owner): every heading breaks by meaning, one line per span, never an orphan word ---- */
.h2 .ln{white-space:nowrap}
@media(max-width:899px){.h2 .ln{display:block}.h2{font-size:min(31px,7.7vw);line-height:1.18}}
.sub,.hero .hcopy>p,.rvHow p,.feat p,.price .for,.stDesc,.phNow p,.oStart p,.faq .a p{text-wrap:balance}
.feat h3,.price h3,.rvHow h3,.rvIcoRow b,.stNm>b,.tcNm{text-wrap:balance}
/* features on a phone: one column of tiles, the icon at the start, so every title sits on one line */
@media(max-width:899px){
  #features .featGrid{grid-template-columns:1fr;gap:10px}
  #features .feat{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:start;padding:16px 18px}
  #features .feat .ic{grid-row:1 / span 2;margin:0}
  #features .feat h3{margin:0;font-size:17.5px}
  #features .feat p{margin:2px 0 0;font-size:14px}
}
/* the owner's line breaks per device (studio home editor, api/_home.js textHTML) */
@media(min-width:900px){br.hz-bp{display:none}}
@media(max-width:899px){br.hz-bd{display:none}}
/* an accent the owner set in the studio editor (api/_home.js textHTML) */
em.accent{font-style:normal;color:var(--gold)}
.dark2 em.accent,#templates em.accent,#pricing em.accent,#faq em.accent{color:var(--gold-lit)}

/* =====================================================================
   pass 6
   ===================================================================== */
/* ---- every shine runs right to left (RTL), and stays inside the rounded button: the shine is a full size layer with the
   button's own radius and a moving gradient, so WebKit has no square corners to show (a transformed stripe escaped them) ---- */
@keyframes rtlShine{0%{background-position:220% 0}36%,100%{background-position:-120% 0}}
html[data-fab=a] .btn.gold::before,html[data-fab=a] .bar .bGo::after{inset:0;left:0;width:auto;border-radius:inherit;transform:none;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.36) 50%,transparent 80%) no-repeat;background-size:42% 100%;animation:rtlShine 4.2s cubic-bezier(.5,0,.3,1) 1.2s infinite}
.btn.em.hot .sh,.btn.big .sh{inset:0;left:0;width:auto;border-radius:inherit;transform:none;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.3) 50%,transparent 80%) no-repeat;background-size:40% 100%;animation:rtlShine 3.2s var(--ease) infinite}
@keyframes tcSheen{0%{transform:translateX(70%);opacity:0}8%{opacity:1}34%{transform:translateX(-70%);opacity:1}36%,100%{transform:translateX(-70%);opacity:0}}
.btn,.bar>*,.tsArr,.pvAll,.stBtns .btn,.hPreGo{border-radius:999px}
/* ---- the hero: two buttons ---- */
.hero .ctas{grid-template-columns:auto auto}
@media(max-width:900px){.hero .ctas{grid-template-columns:1fr}.hero .ctas .btn.gold{grid-column:auto}}
/* ---- all the templates, from the order sheet ---- */
.pvTx .pvAll{margin:0;padding:6px 12px;border-radius:999px;background:rgba(92,21,38,.06);border:1px solid rgba(92,21,38,.16);color:var(--wine);text-decoration:none;font-size:12.5px}
/* ---- categories d: a dropdown in the site's look ---- */
.rvCat.dd{position:relative;display:flex;justify-content:center;margin:16px auto 4px;z-index:20;max-width:420px}
.rvCat.dd .ddBtn{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;height:60px;padding:0 16px;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#f7f1e8;font:inherit;cursor:pointer;text-align:start;transition:border-color .3s,background .3s}
.rvCat.dd .ddBtn:hover,.rvCat.dd.open .ddBtn{border-color:rgba(236,211,156,.55);background:rgba(255,255,255,.1)}
.rvCat.dd .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(236,211,156,.14);color:#ecd39c}
.rvCat.dd .ic .hzi{width:20px;height:20px}
.rvCat.dd .tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.rvCat.dd .tx small{font-size:11.5px;color:rgba(247,241,232,.55);font-weight:600}
.rvCat.dd .tx b{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvCat.dd .n{min-width:30px;height:24px;padding:0 8px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:12px;font-weight:700;color:rgba(247,241,232,.75);font-variant-numeric:tabular-nums}
.rvCat.dd .chev{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.rvCat.dd.open .chev{transform:rotate(180deg)}
.rvCat.dd .ddList{position:absolute;top:calc(100% + 8px);left:0;right:0;padding:6px;border-radius:20px;background:#17171b;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);max-height:min(60svh,460px);overflow:auto}
.rvCat.dd .ddList[hidden]{display:none}
.rvCat.dd .ddList button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;height:52px;padding:0 10px;border:0;border-radius:14px;background:none;color:#f7f1e8;font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-align:start}
.rvCat.dd .ddList button .ic{width:32px;height:32px}
.rvCat.dd .ddList button small{font-size:12px;color:rgba(247,241,232,.5);font-variant-numeric:tabular-nums}
.rvCat.dd .ddList button:hover,.rvCat.dd .ddList button:focus-visible{background:rgba(255,255,255,.07);outline:0}
.rvCat.dd .ddList button.on{background:rgba(236,211,156,.14);color:#ecd39c}
/* ---- categories s: a segmented switch with a sliding thumb ---- */
.rvCat.sg{position:relative;display:flex;gap:0;margin:16px calc(-1 * clamp(16px,4vw,22px)) 4px;padding:4px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:0}
.rvCat.sg::-webkit-scrollbar{display:none}
.rvCat.sg .thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:14px;background:rgba(247,236,210,.95);box-shadow:0 8px 20px -10px rgba(0,0,0,.7);will-change:transform,width}
.rvCat.sg button{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:74px;height:52px;padding:0 14px;border:0;background:none;color:rgba(247,241,232,.75);font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;transition:color .35s}
.rvCat.sg button small{font-size:11px;font-weight:700;color:rgba(247,241,232,.45);font-variant-numeric:tabular-nums;transition:color .35s}
.rvCat.sg button.on{color:#24101a}
.rvCat.sg button.on small{color:rgba(36,16,26,.55)}
@media(min-width:900px){.rvCat.sg{width:max-content;max-width:100%;margin:18px auto 4px}}
/* ---- steps, pass 6: every step icon in a circle, bigger, and it moves while its step is lit ---- */
html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{border-radius:50%}
@media(max-width:899px){
  .rvHow.ph .phRail{gap:12px}
  .rvHow.ph .phRail button{grid-template-columns:68px}
  html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:68px;height:68px}
  .rvHow.ph .phRail button .ic .hzi{width:32px;height:32px}
  .rvHow.ph .phRail::before,.rvHow.ph .phRail::after{inset-inline-start:34px;inset-inline-end:34px}
}
@media(max-width:899px) and (max-height:700px){
  .rvHow.ph .phRail button{grid-template-columns:62px}
  html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:62px;height:62px}
  .rvHow.ph .phRail button .ic .hzi{width:30px;height:30px}
}
html .rvHow.ph .st .ic,html[data-gl=g] body .rvHow.ph .st .ic{border-radius:50%}
@media(min-width:900px){
  /* tight again: a compact stack of four beside the sticky phone, each lights as the scroll reaches it, a tap lights it too */
  .rvHow.ph .list{gap:14px;padding:40px 0 30vh}
  .rvHow.ph .st{grid-template-columns:76px 1fr;gap:18px;padding:20px 22px}
  html .rvHow.ph .st .ic,html[data-gl=g] body .rvHow.ph .st .ic{width:76px;height:76px}
  .rvHow.ph .st .ic .hzi{width:36px;height:36px}
}
.rvCat.dd .hzi .hzs [pathLength]{stroke-dashoffset:0!important}
/* ---- steps, pass 7 (owner: "more intuitive, a connection between them, some animation"): one journey. A path joins the
   circles and draws itself as the steps light; the current step is bigger and moves; a passed step carries a small check.
   Phone: a horizontal rail under the phone, a label under every circle. Desktop: a vertical path beside the phone, the
   steps as open text beside their circles, no boxes ---- */
.rvHow.ph{--jLine:rgba(92,21,38,.13);--jDraw:linear-gradient(var(--jDir,270deg),#c9a35a,#8a2a3f);--jOk:#1f8a5a}
body:is([data-rh="1"],[data-rh="2"]) .rvHow.ph{--jLine:rgba(255,255,255,.14)}
.rvHow.ph .ic{position:relative}
.rvHow.ph :is(.phRail button,.st) .ic::after{content:"";position:absolute;top:-2px;inset-inline-end:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--jOk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 0 0 2.5px var(--paper,#f7f1e8);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.rvHow.ph :is(.phRail button.lit:not(.on),.st.lit:not(.cur)) .ic::after{transform:scale(1)}
html .rvHow.ph .phRail button .ic,html .rvHow.ph .st .ic{transition:background .5s,color .5s,box-shadow .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
@media(max-width:899px){
  .rvHow.ph .phRow{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .rvHow.ph .phRow>.phone{justify-self:center}
  .rvHow.ph .phRail{align-items:start;gap:0;justify-content:space-between;width:100%;max-width:380px;justify-self:center}
  .rvHow.ph .phRail button{min-width:0}
  .rvHow.ph .phRail button{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:1}
  .rvHow.ph .phRail button b{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;text-align:center;font-size:12.5px;line-height:1.25;font-weight:700;color:var(--stMute);max-width:70px;text-wrap:balance;transition:color .4s}
  .rvHow.ph .phRail button.lit b{color:var(--stInk)}
  .rvHow.ph .phRail button.on b{color:var(--stInk);font-weight:800}
  .rvHow.ph .phRail button:not(.lit) .ic{opacity:.55}
  html .rvHow.ph .phRail button.on .ic,html[data-gl=g] body .rvHow.ph .phRail button.on .ic{transform:scale(1.12)}
  /* the path runs between the first and the last circle, at their centre */
  .rvHow.ph .phRail::before,.rvHow.ph .phRail::after{top:calc(var(--icS,64px) / 2);margin-top:-1px;height:2px;inset-inline-start:12.5%;inset-inline-end:12.5%}
  .rvHow.ph .phRail::before{background:var(--jLine)}
  .rvHow.ph .phRail::after{background:var(--jDraw);transition:transform .9s cubic-bezier(.65,0,.35,1)}
  .rvHow.ph .phRail{--icS:68px}
  .rvHow.ph .phNow b{display:none}
  .rvHow.ph .phNow p{margin:0;font-size:14.5px}
}
@media(max-width:899px) and (max-height:700px){
  .rvHow.ph .phRail{--icS:56px}
  .rvHow.ph .phRail button{grid-template-columns:none;gap:6px}
  html .rvHow.ph .phRail button .ic,html[data-gl=g] body .rvHow.ph .phRail button .ic{width:56px;height:56px}
  .rvHow.ph .phRail button .ic .hzi{width:27px;height:27px}
  .rvHow.ph .phRail button b{font-size:11.5px}
  .rvHow.ph .phNow{display:none}
}
@media(min-width:900px){
  .rvHow.ph .list{position:relative;gap:6px}
  .rvHow.ph .list::before,.rvHow.ph .list::after{content:"";position:absolute;inset-inline-start:var(--jx,60px);top:var(--jy0,60px);bottom:var(--jy1,60px);width:2px;margin-inline-start:-1px;border-radius:2px;background:var(--jLine)}
  .rvHow.ph .list::after{--jDir:180deg;background:var(--jDraw);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .9s cubic-bezier(.65,0,.35,1)}
  html body .rvHow.ph .st,html[data-gl=g] body .rvHow.ph .st{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:.5;padding:16px 22px;transition:opacity .5s}
  html body .rvHow.ph .st.lit{opacity:1}
  .rvHow.ph .st .ic{z-index:1}
  html .rvHow.ph .st.cur .ic,html[data-gl=g] body .rvHow.ph .st.cur .ic{transform:scale(1.14);box-shadow:0 0 0 8px var(--stHalo),0 18px 36px -16px var(--stOnBg)}
  html .rvHow.ph .st:not(.lit) .ic{background:var(--paper,#f7f1e8)}
  .rvHow.ph .st h3{transition:color .4s}
  .rvHow.ph .st.cur h3{color:var(--stInk)}
}
@media(prefers-reduced-motion:reduce){.rvHow.ph .phRail::after,.rvHow.ph .list::after,.rvHow.ph .ic::after{transition:none}}
/* ---- categories, pass 7: c, one line (the chosen kind and a chevron), the list opens in the site's select ---- */
.rvCat.cp{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px auto 2px;max-width:100%}
.rvCat.cp .cpL{flex:none;font-size:13px;font-weight:700;color:rgba(247,241,232,.55)}
.rvCat.cp .hs{display:inline-block;width:auto;min-width:0}
.rvCat.cp .hs-btn{min-height:40px;padding-inline:16px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(237,220,178,.28);font-size:15px;font-weight:800;color:#f7f1e8}
.rvCat.cp .hs-btn:hover,.rvCat.cp .hs.on .hs-btn{border-color:#d9bc80;background:rgba(255,255,255,.09)}
.rvCat.cp .hs-v{white-space:nowrap}
.rvCat.cp>select:not(.hs-native){height:40px;border-radius:999px;padding:0 14px;background:rgba(255,255,255,.06);color:#f7f1e8;border:1px solid rgba(237,220,178,.28);font:inherit;font-weight:800}
/* ---- the 3D stage, pass 7: the name and the short line above the centre phone, the arrows and the counter below ---- */
.stHead{display:grid;justify-items:center;text-align:center;gap:3px;margin:6px auto -2px;padding:0 16px;max-width:100%;line-height:1.15}
.stHead>b{display:block;max-width:100%;font-size:22px;font-weight:800;color:#fff7e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stHead>small{display:block;max-width:100%;font-size:13.5px;font-weight:500;color:rgba(247,241,232,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stInfo .stNm{display:grid;place-items:center;min-width:72px}
.stInfo .stNm .rvCnt{margin-top:0}
@media(min-width:900px){.stHead>b{font-size:26px}.stHead>small{font-size:15px}}
/* ---- pass 7 (owner): every button with an arrow nudges the arrow the way it points (left in Hebrew): two small pushes,
   then a rest; on hover the arrow steps forward and keeps going. The forward arrow is the one path the page draws
   (M19 12H5...) or the ui-arrow icon. Off under reduced motion ---- */
:is(a,button) :is(svg:has(path[d^="M19 12H5"]):not(.hzi svg),.hzi[data-hzi="ui-arrow"]){animation:hzNudge 2.8s cubic-bezier(.45,0,.25,1) infinite;transition:translate .35s cubic-bezier(.22,1,.36,1)}
:is(a,button):is(:hover,:focus-visible) :is(svg:has(path[d^="M19 12H5"]):not(.hzi svg),.hzi[data-hzi="ui-arrow"]){translate:-3px 0}
@keyframes hzNudge{0%,58%,100%{transform:translateX(0)}68%{transform:translateX(-5px)}78%{transform:translateX(0)}85%{transform:translateX(-3px)}92%{transform:translateX(0)}}
[dir="ltr"] :is(a,button) :is(svg:has(path[d^="M19 12H5"]):not(.hzi svg),.hzi[data-hzi="ui-arrow"]){animation-name:hzNudgeL}
[dir="ltr"] :is(a,button):is(:hover,:focus-visible) :is(svg:has(path[d^="M19 12H5"]):not(.hzi svg),.hzi[data-hzi="ui-arrow"]){translate:3px 0}
@keyframes hzNudgeL{0%,58%,100%{transform:translateX(0)}68%{transform:translateX(5px)}78%{transform:translateX(0)}85%{transform:translateX(3px)}92%{transform:translateX(0)}}
html[data-fab=a] .bar .bGo .hzi{animation:hzNudge 2.8s cubic-bezier(.45,0,.25,1) infinite}
@media(prefers-reduced-motion:reduce){:is(a,button) :is(svg:has(path[d^="M19 12H5"]):not(.hzi svg),.hzi[data-hzi="ui-arrow"]),html[data-fab=a] .bar .bGo .hzi{animation:none;translate:none}}