/* رنّة — presentation page. Khrais Studio identity: bone, ink, one orange. Loaded after app.css (the mock phones reuse the real screens' styles). */
.site{background:var(--bone);--gut:clamp(16px,4vw,56px);--max:1280px;font-size:17px}
.site main{display:block}
.site h1,.site h2,.site h3,.site p{margin:0}
.site ul,.site ol{margin:0;padding:0;list-style:none}
.site section{padding:clamp(56px,9vw,120px) var(--gut);max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto}
.site h2{font:900 clamp(34px,5.6vw,68px)/1.12 var(--ar);letter-spacing:-.01em;max-width:18ch;text-wrap:balance}
html[lang="en"] .site h1,html[lang="en"] .site h2,html[lang="en"] .site h3{font-family:var(--num);letter-spacing:-.035em}
html[lang="en"] .site h2{font-weight:800;font-size:clamp(30px,4.8vw,58px)}
.kmark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ink);color:var(--bone);font:900 22px/1 var(--ar);flex:none}
.eyebrow{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font:700 14px/1.4 var(--body);color:var(--muted);margin-bottom:24px!important}
.eyebrow b{font:800 12px/1 var(--num);padding:6px 9px;border-radius:999px;background:var(--ink);color:var(--bone);letter-spacing:.06em}
.eyebrow--inv{color:#b3aa9d}
.eyebrow--inv b{background:var(--accent);color:var(--ink)}

/* ---------- bar ---------- */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:calc(10px + var(--safe-t)) var(--gut) 10px;background:var(--bone);border-bottom:1.5px solid var(--line)}
.bar__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.bar__word{display:grid;line-height:1}
.bar__word b{font:800 15px/1 var(--num);letter-spacing:.04em}
.bar__word i{font:500 10px/1.5 var(--num);letter-spacing:.42em;font-style:normal;color:var(--muted)}
.bar__crumb{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--body);color:var(--muted);padding-inline-start:14px;border-inline-start:1.5px solid var(--line)}
.bar__crumb b{display:flex;align-items:center;gap:7px;font:800 17px/1 var(--ar);color:var(--ink)}
html[lang="en"] .bar__crumb b{font:800 15px/1 var(--num)}
.bar__end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(28px,5vw,64px)!important}
.hero h1{font:900 clamp(44px,7.4vw,96px)/1.04 var(--ar);letter-spacing:-.015em}
html[lang="en"] .hero h1{font-weight:800;font-size:clamp(38px,6vw,78px);line-height:1.02}
.hero h1 em{font-style:normal;white-space:nowrap;box-shadow:inset 0 -.14em 0 var(--accent)}
.lead{margin-top:22px!important;max-width:44ch;font:500 clamp(17px,1.5vw,20px)/1.8 var(--body);color:#3d3731}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.zeros{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px!important;padding-top:24px!important;border-top:1.5px solid var(--line)}
.zeros li{display:flex;align-items:baseline;gap:9px;font:600 14px/1.4 var(--body);color:var(--muted)}
.zeros b{font-size:34px;color:var(--ink)}
.zeros small{font:800 15px/1 var(--body);margin-inline-start:2px}

.scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2.4vw,34px);padding:clamp(22px,3vw,40px);border-radius:clamp(28px,3.4vw,44px);background:var(--ink);color:var(--bone)}
.scene__staff{display:grid;gap:14px;min-width:0}
.scene__tag{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--body);color:#b3aa9d}
.scene__tag i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.scene__tag--phone{position:absolute;bottom:14px;inset-inline-end:clamp(22px,3vw,40px)}
.scene{padding-bottom:46px!important}
.scene .tk{color:var(--ink);animation:none;box-shadow:0 30px 60px -30px #000}
.scene .tk__num{font-size:clamp(40px,5vw,58px)}
.scene .tk__acts .btn{min-height:58px;font-size:19px}
.scene__hint{font:600 15px/1.6 var(--body);color:var(--bone);min-height:3.2em}
.nudge{animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}60%{box-shadow:0 0 0 14px transparent}}
.c[data-state="ready"] .nudge{animation-name:nudge2}
@keyframes nudge2{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--on-accent) 60%,transparent)}60%{box-shadow:0 0 0 12px transparent}}

/* ---------- the mock phone: real screen styles, sized by the frame instead of the viewport ---------- */
.phone{position:relative;width:clamp(232px,23vw,292px);aspect-ratio:9/18.6;border-radius:42px;padding:9px;background:#0b0a09;box-shadow:0 0 0 2px #3a342e,0 50px 80px -40px #000;container-type:inline-size;flex:none;color:var(--fg);--bg:#fbf9f4;--fg:#141210;--card:#fff;--line:#e4ddcf;--muted:#6b6358;transition:transform .5s var(--spring)}
.phone__notch{position:absolute;z-index:3;top:17px;left:50%;width:30%;height:19px;margin-left:-15%;border-radius:999px;background:#0b0a09}
.phone .c{min-height:0;height:100%;max-width:none;margin:0;padding:46px 13px 14px;border-radius:34px;background:var(--bg);color:var(--fg);overflow:hidden;grid-template-rows:auto 1fr auto;transition:background .45s var(--ease),color .45s}
.phone .c[data-state="ready"]{background:var(--accent);color:var(--on-accent)}
.phone .c[data-state="ready"]>*{max-width:none}
.phone .c__top{gap:9px}
.phone .c__top .vlogo{width:34px;height:34px;border-radius:calc(var(--r-s)*.7)}
.phone .c__top .vlogo--mark{font-size:19px}
.phone .c__venue b{font-size:15px}
.phone .c__main{gap:11px;padding:8px 0}
.phone .disc{width:76%}
.phone .disc__label{font-size:10.5px}
.phone .disc__num{font-size:25cqw}
.phone .disc__dots i{width:5px;height:5px;margin:-2.5px}
.phone .c__status{font-size:9.6cqw;line-height:1.2}
.phone .c__sub{font-size:12.5px;line-height:1.6;max-width:26ch}
.phone .fact{min-width:0;flex:1;padding:8px 6px;border-radius:calc(var(--r-s)*.8)}
.phone .fact b{font-size:19px}
.phone .fact span{font-size:10.5px}
.phone .c__facts{width:100%;flex-wrap:nowrap;gap:6px}
.phone .c__foot{gap:7px}
.phone .btn{min-height:44px;font-size:14.5px;padding:0 12px}
.phone .alertcard{padding:11px;gap:4px;border-radius:calc(var(--r)*.8)}
.phone .alertcard h3{font-size:15px}
.phone .alertcard p{font-size:12px}
.phone .stars button,.phone .stars span{width:15cqw;height:15cqw;display:grid;place-items:center;font-size:11cqw;line-height:1;color:color-mix(in srgb,var(--fg) 18%,transparent)}
.phone .stars .on{color:#f5a800}
.phone.is-ringing{animation:buzz .45s linear infinite}
@keyframes buzz{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.3deg) translateX(-2px)}75%{transform:rotate(1.3deg) translateX(2px)}}

/* ---------- how ---------- */
.how h2{margin-bottom:clamp(28px,4vw,52px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps li{position:relative;display:grid;gap:6px;padding:16px 16px 22px;border-radius:30px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.steps li>b{position:absolute;top:28px;inset-inline-start:28px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--bone);font:800 15px/1 var(--num)}
.steps h3{font:900 clamp(24px,2.6vw,32px)/1.25 var(--ar);margin-top:12px;padding-inline:6px}
.steps p{font:500 16px/1.6 var(--body);color:var(--muted);padding-inline:6px}
.step__art{height:clamp(170px,19vw,230px);border-radius:20px;display:grid;place-items:center;overflow:hidden;position:relative;background:var(--bone)}
.miniqr{width:min(42%,120px);color:var(--ink);padding:10px;border-radius:14px;background:#fff}
.scanline{position:absolute;inset-inline:22%;top:20%;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent);animation:scan 2.4s var(--ease) infinite alternate}
@keyframes scan{to{top:78%}}
.minidisc,.miniring{position:relative;width:min(46%,130px);aspect-ratio:1;display:grid;place-items:center;font-size:clamp(36px,4vw,50px)}
.minidisc svg{position:absolute;inset:0;transform:rotate(-90deg)}
.minidisc circle{fill:none;stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:7}
.minidisc circle.go{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:276;animation:fill 4s var(--ease) infinite}
@keyframes fill{from{stroke-dashoffset:276}80%,to{stroke-dashoffset:0}}
.step__art--ring{background:var(--accent)}
.miniring{border-radius:50%;background:var(--ink);color:var(--accent);animation:ring3 1.4s ease-out infinite}
@keyframes ring3{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 55%,transparent)}100%{box-shadow:0 0 0 44px transparent}}

/* ---------- demo ---------- */
.site .demo{max-width:none;margin-inline:clamp(8px,1.6vw,24px);padding-inline:clamp(16px,4vw,56px);border-radius:clamp(28px,3.6vw,48px);background:var(--ink);color:var(--bone)}
.demo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,60px);align-items:center}
.demo:has(.demo__live:not([hidden])){grid-template-columns:minmax(0,1fr)}
.demo>*{min-width:0}
.demo__head p:last-child{margin-top:16px;max-width:52ch;font:500 18px/1.8 var(--body);color:#cfc7ba}
.demo__start{display:grid;gap:18px;padding:clamp(18px,2.4vw,30px);border-radius:30px;background:#211d1a}
.demo__go{min-height:76px;width:100%;padding:0 24px;font:900 clamp(22px,2.4vw,28px)/1 var(--ar)}
html[lang="en"] .demo__go{font:800 clamp(19px,2vw,23px)/1 var(--num)}
.demo__steps{display:grid;gap:4px;counter-reset:d}
.demo__steps li{counter-increment:d;display:flex;align-items:center;gap:12px;padding:10px 4px;font:600 16.5px/1.5 var(--body);border-top:1.5px solid #38322c}
.demo__steps li::before{content:counter(d);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--bone);color:var(--ink);font:800 13px/1 var(--num);flex:none}
.demo__err{color:#ff8f85;font-weight:700}
.demo__err:empty{display:none}
.demo__live{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px}
.frame{margin:0;border-radius:26px;background:#211d1a;padding:8px;min-width:0}
.frame figcaption{display:flex;align-items:center;gap:8px;padding:6px 10px 12px;font:700 14px/1.3 var(--body);color:#cfc7ba}
.frame figcaption i{width:8px;height:8px;border-radius:50%;background:#6fd49b;flex:none;animation:blink 1.4s ease-in-out infinite}
.frame figcaption a{margin-inline-start:auto;font:600 12.5px/1 var(--body);color:#b3aa9d;white-space:nowrap}
.frame__in{border-radius:19px;overflow:hidden;background:var(--paper);height:clamp(560px,62vw,700px)}
.frame iframe{display:block;width:100%;height:100%;border:0}
.demo__note{grid-column:1/-1;font:500 14px/1.6 var(--body);color:#b3aa9d}
.demo__screen{justify-self:start;box-shadow:inset 0 0 0 2px var(--bone);color:var(--bone)}

/* ---------- more ---------- */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;margin-top:clamp(28px,4vw,48px)}
.vs>div{padding:clamp(20px,2.6vw,32px);border-radius:30px}
.vs h3{display:flex;align-items:center;gap:10px;font:900 26px/1.3 var(--ar);margin-bottom:14px}
html[lang="en"] .vs h3{font:800 22px/1.3 var(--num)}
.vs li{position:relative;padding:11px 0;padding-inline-start:32px;font:600 17px/1.6 var(--body);border-top:1.5px solid color-mix(in srgb,currentColor 14%,transparent)}
.vs li::before{position:absolute;inset-inline-start:0;top:11px;font:800 17px/1.6 var(--num)}
.vs__old{background:color-mix(in srgb,var(--ink) 6%,transparent);color:#5b544c}
.vs__old li::before{content:"×"}
.vs__new{background:var(--accent);color:var(--ink)}
.vs__new li::before{content:"✓"}
.vs__new .rmark::after{box-shadow:0 0 0 2px var(--accent);background:var(--bone)}
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px!important}
.feats li{display:grid;gap:6px;align-content:start;padding:20px;border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.feats svg{width:34px;height:34px;padding:7px;border-radius:11px;background:var(--ink);color:var(--accent);margin-bottom:8px;box-sizing:content-box}
.feats h3{font:900 21px/1.35 var(--ar)}
html[lang="en"] .feats h3{font:800 18px/1.35 var(--num)}
.feats p{font:500 15px/1.65 var(--body);color:var(--muted)}

/* ---------- packages ---------- */
.packs__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.packs__cards{display:grid;gap:14px;min-width:0}
.pack{display:grid;gap:12px;padding:clamp(18px,2.4vw,28px);border-radius:30px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .25s}
.pack[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--ink)}
.pack header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pack h3{font:900 clamp(28px,3.2vw,38px)/1.2 var(--ar)}
html[lang="en"] .pack h3{font:800 clamp(24px,2.6vw,32px)/1.2 var(--num)}
.pack>p{font:500 16.5px/1.7 var(--body);color:#3d3731}
.pack>ul{display:grid;gap:7px}
.pack>ul li{position:relative;padding-inline-start:28px;font:600 15.5px/1.6 var(--body)}
.pack>ul li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;font:800 15px/1.7 var(--num);color:var(--ok)}
.play{display:grid;gap:14px;margin-top:6px;padding:16px;border-radius:20px;background:var(--bone);cursor:default}
.play__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font:700 14.5px/1.4 var(--body)}
.play .swatches button{width:38px;height:38px}
.packs__preview{position:sticky;top:96px;display:flex;align-items:flex-start;padding-top:10px}
.packs__preview .phone{width:clamp(210px,20vw,264px)}
.packs__preview .phone--b{margin-inline-start:-46px;margin-top:64px;transform:rotate(4deg)}
[dir="rtl"] .packs__preview .phone--b{transform:rotate(-4deg)}

/* ---------- faq / end / foot ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,60px);align-items:start}
.faq__list{display:grid;gap:8px}
.faq details{border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;font:800 19px/1.5 var(--ar);cursor:pointer;list-style:none}
html[lang="en"] .faq summary{font:700 17px/1.5 var(--num)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 26px/1 var(--num);flex:none;transition:transform .25s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;font:500 16px/1.85 var(--body);color:#3d3731}
.site .end{max-width:none;margin:0 clamp(8px,1.6vw,24px) clamp(8px,1.6vw,24px);border-radius:clamp(28px,3.6vw,48px);background:var(--accent);color:var(--ink);text-align:center;display:grid;justify-items:center;gap:16px}
.end h2{max-width:16ch}
.end p{max-width:44ch;font:600 18px/1.8 var(--body)}
.end .btn--accent{background:var(--ink);color:var(--bone)}
.foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px var(--gut) calc(26px + var(--safe-b));font:600 14px/1.4 var(--body);color:var(--muted)}
.foot .kmark{width:30px;height:30px;font-size:17px;border-radius:9px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:minmax(0,1fr)}
  .demo__live{grid-template-columns:minmax(0,1fr)}
  .demo{grid-template-columns:minmax(0,1fr)}
  .frame--kiosk .frame__in{height:560px}
}
@media (max-width:860px){
  .packs__grid{grid-template-columns:minmax(0,1fr)}
  .packs__preview{position:static;justify-content:center;order:-1}
  .vs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .bar__word,.bar__crumb>span{display:none}
  .bar__crumb{padding-inline-start:10px}
  .scene{grid-template-columns:minmax(0,1fr);justify-items:center;padding:18px 16px 22px;gap:18px}
  .scene__staff{width:100%}
  .scene__tag--phone{position:static;order:2}
  .scene .phone{order:3;width:min(74vw,280px)}
  .scene__hint{min-height:0}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step__art{height:170px}
  .hero__cta .btn{flex:1 1 100%}
  .feats{gap:8px}
  .feats li{padding:14px}
  .feats h3{font-size:18px}
  .feats p{font-size:13.5px}
  .frame__in{height:640px}
  .frame--kiosk{display:none}
  .packs__preview .phone{width:min(46vw,210px)}
  .packs__preview .phone--b{margin-inline-start:-30px;margin-top:40px}
}
@media (max-width:340px){
  .feats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .zeros{gap:8px 18px}
  .zeros b{font-size:28px}
}