/* Shokry demo — structure shared by both designs. Colours/shapes come from each page's theme. */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--f-body);line-height:1.7;min-height:100vh;overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
#app{max-width:480px;margin:0 auto;position:relative;min-height:100vh}
.scr{padding-bottom:110px}
.sec{padding:28px 18px;display:flex;flex-direction:column;gap:14px}
.eyebrow{font-family:var(--f-latin);font-size:11px;letter-spacing:.22em;color:var(--acc);font-weight:600}
.h2{font-family:var(--f-head);font-size:28px;line-height:1.3;font-weight:700}
.h4{font-size:15px;font-weight:700;color:var(--mut);margin-top:6px}
.note{font-size:14px;color:var(--mut)}
.tiny{font-size:12px;color:var(--mut);opacity:.7}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 18px;font-weight:700;font-size:16px;transition:transform .15s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn-mini{width:auto;padding:8px 12px;font-size:13px}
/* hero */
.hero{position:relative;min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero-shade{position:absolute;inset:0}
.hero-tx{position:relative;padding:28px 20px;display:flex;flex-direction:column;gap:12px;width:100%}
.kicker{font-family:var(--f-latin);font-size:11px;letter-spacing:.3em;color:var(--acc)}
.sig{font-family:'Aref Ruqaa',serif;font-size:58px;line-height:1.1;color:var(--sig);font-weight:700}
.lead{font-size:16px;color:var(--tx);opacity:.9;max-width:340px}
/* segmented */
.seg{display:flex;padding:4px;gap:4px}
.seg button{flex:1;padding:10px 6px;font-size:14px;font-weight:700;color:var(--mut)}
/* packages */
.pkgs{display:flex;flex-direction:column;gap:14px}
.pkg{position:relative;padding:20px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .2s,transform .2s}
.pkg-top{display:flex;justify-content:space-between;align-items:center}
.pkg-n{font-family:var(--f-latin);font-size:12px;color:var(--mut);letter-spacing:.2em}
.pkg-sub{font-size:13px;color:var(--mut);font-weight:700}
.pkg-name{font-family:var(--f-latin);font-size:30px;line-height:1.1;text-align:right}
.pkg-price{display:flex;align-items:baseline;gap:8px}
.pkg-price b{font-family:var(--f-latin);font-size:34px;font-weight:700;color:var(--acc)}
.pkg-price span{font-size:13px;color:var(--mut)}
.pkg-inst{font-size:13px;color:var(--mut)}
.pkg-f{list-style:none;display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.pkg-f li{font-size:14px;padding-right:22px;position:relative}
.pkg-f li::before{content:'✓';position:absolute;right:0;color:var(--acc);font-weight:700}
/* know */
.knows{display:flex;flex-direction:column;gap:10px}
.kn{display:flex;gap:14px;padding:14px}
.kn>span{font-size:24px;line-height:1.3}
.kn b{font-size:15px}.kn p{font-size:13.5px;color:var(--mut)}
.about{margin:10px 18px 0;overflow:hidden;position:relative}
.about img{width:100%;height:200px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about>div{padding:16px}
/* wizard */
.wz-h{display:flex;align-items:center;gap:12px}
.back{width:42px;height:42px;flex:none;font-size:20px;display:grid;place-items:center}
.bar{height:5px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);transition:width .3s}
.flds{display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.lb{font-size:14px;font-weight:700}
.fld input,.fld textarea,.search,.paste{width:100%;padding:13px 14px;font-size:15px;outline:none;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 16px;font-size:14px;font-weight:700}
.hint{font-size:12px;color:var(--mut)}
.ph{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.phb{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--mut)}
.phb i{font-style:normal;font-size:22px;color:var(--acc)}
.cond{display:flex;flex-direction:column;gap:16px;padding-right:12px;border-right:2px solid var(--acc)}
.sum{display:flex;align-items:center;gap:10px;padding:14px 16px}
.sum span{font-size:13px;color:var(--mut)}.sum b{flex:1;font-family:var(--f-latin)}.sum em{font-style:normal;font-weight:700;color:var(--acc)}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:right;padding:14px}
.opt i{width:22px;height:22px;flex:none;margin-top:2px;display:grid;place-items:center;font-style:normal;font-size:13px}
.opt.on i::after{content:'✓'}
.opt b{font-size:14.5px}.opt p{font-size:12.5px;color:var(--mut)}
.tl{display:flex;flex-direction:column}
.tl-r{display:flex;gap:12px;align-items:flex-start;padding:10px 0;position:relative}
.tl-dot{width:12px;height:12px;flex:none;border-radius:50%;background:var(--acc);margin-top:7px}
.tl.big .tl-dot{width:38px;height:38px;margin:0;display:grid;place-items:center;font-size:18px;background:var(--surf2)}
.tl-r>div{flex:1}.tl-r b{font-size:14.5px}.tl-r p{font-size:13px;color:var(--mut)}
.tl-r em{font-style:normal;font-weight:700;color:var(--acc);font-size:14px}
.pm{display:flex;flex-direction:column;gap:8px}
.pm-i{padding:12px 14px;font-size:14px;font-weight:700;display:flex;justify-content:space-between}
.pm-i.off{opacity:.45}.pm-i small{font-size:12px;font-weight:500}
.terms{padding:16px}
.terms h4{font-size:15px;margin-bottom:8px}
.terms ol{padding-right:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)}
.sig-in{font-family:'Aref Ruqaa',serif !important;font-size:22px !important}
/* done */
.okx{align-items:center;text-align:center}
.ok-ic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:36px;font-weight:700}
.ref{font-family:var(--f-latin);font-size:34px;font-weight:700;letter-spacing:.12em;color:var(--acc);padding:10px 22px}
.okx .card{width:100%;text-align:right}
/* cards */
.card{padding:16px;display:flex;flex-direction:column;gap:8px}
.card h3{font-family:var(--f-latin);font-size:22px;line-height:1.25}
.card h4{font-size:15px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}.kv span{color:var(--mut)}
.ul{padding-right:18px;display:flex;flex-direction:column;gap:5px;font-size:14px}
/* client */
.cl-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ring{--p:50;width:78px;height:78px;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,var(--bg) 82%,transparent 84%),conic-gradient(var(--acc) calc(var(--p)*1%),var(--line) 0)}
.ring b{font-family:var(--f-latin);font-size:24px;line-height:1}.ring span{font-size:11px;color:var(--mut)}
.cl-pay{display:flex;justify-content:space-between;padding:12px 14px;font-size:14px}
.cl-pay span{color:var(--mut)}
.upd{position:relative}
.new{font-size:11px;padding:2px 8px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:9px 14px;font-size:14px;font-weight:700;color:var(--mut);white-space:nowrap}
.plan{position:relative;display:flex;flex-direction:column;gap:12px;-webkit-user-select:none;user-select:none;overflow:hidden}
.plan>*:not(.wm){position:relative;z-index:1}
.wm{position:absolute;inset:-40px;display:flex;flex-wrap:wrap;gap:40px 30px;transform:rotate(-24deg);pointer-events:none;z-index:2;opacity:.06;font-size:13px;font-weight:700;align-content:flex-start}
.wm span{white-space:nowrap}
.days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.days button{flex:none;padding:8px 13px;font-size:13px;font-weight:700;color:var(--mut)}
.ex{display:flex;gap:12px;padding:14px}
.ex-n{font-family:var(--f-latin);font-size:22px;font-weight:700;color:var(--acc);line-height:1.2}
.ex-b{flex:1;display:flex;flex-direction:column;gap:6px}
.ex-b b{font-family:var(--f-latin);font-size:15px;letter-spacing:.02em;text-align:right}
.ex-b p{font-size:13px;color:var(--mut)}
.ex-m{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-block;font-family:var(--f-latin);font-size:12px;font-weight:600;padding:3px 10px}
.dose{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px;align-items:center}
.dose b{font-family:var(--f-latin);font-size:15px;text-align:right}
.dose p{grid-column:1/-1;font-size:13px;color:var(--mut)}
.demo-tag{font-size:12px;text-align:center;padding:6px;color:var(--mut);border:1px dashed var(--line)}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet-c{width:100%;max-width:480px;padding:22px 18px 30px;display:flex;flex-direction:column;gap:10px;transform:translateY(30px);transition:transform .25s}
.sheet.on .sheet-c{transform:none}
.arch{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;text-align:right}
.arch span{font-size:13px;color:var(--mut)}
/* coach */
.co-h{display:flex;align-items:center;gap:14px}
.co-h img{width:62px;height:62px;object-fit:cover;object-position:center 20%;flex:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{padding:16px 14px;display:flex;flex-direction:column;gap:2px}
.tile b{font-family:var(--f-latin);font-size:32px;line-height:1}
.tile span{font-size:12.5px;color:var(--mut)}
.crow{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:right;width:100%}
.crow>div{flex:1}.crow b{font-size:14.5px}.crow p{font-size:12px;color:var(--mut);font-family:var(--f-latin);text-align:right}
.av{width:38px;height:38px;flex:none;display:grid;place-items:center;font-weight:700}
.st{font-size:11.5px;font-weight:700;padding:4px 10px;white-space:nowrap}
.tg{padding:16px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.payr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px}
.payr b{font-size:14px}.payr p{font-size:12.5px;color:var(--mut)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts .btn{font-size:13.5px;padding:12px 8px}
.paste{font-size:13px !important;line-height:1.6;font-family:var(--f-body)}
.prev h5{font-family:var(--f-latin);font-size:14.5px;margin-top:6px}
.prev p{font-size:13.5px}
.prev hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.f-note,.f-warn,.f-fire{padding:8px 10px;font-size:13px}
/* demo nav */
.demo-nav{position:fixed;left:50%;transform:translateX(-50%);z-index:30;display:flex;width:100%;max-width:480px}
.demo-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;font-size:11.5px;font-weight:700;color:var(--mut)}
.demo-nav i{font-style:normal;font-size:16px}
/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;z-index:60;padding:12px 18px;font-size:14px;font-weight:700;max-width:88%;text-align:center;transition:.25s;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* gate */
#gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .4s}
#gate.out{opacity:0}
.g-card{width:100%;max-width:400px;padding:30px 22px;display:flex;flex-direction:column;gap:14px;text-align:center}
.g-card h1{font-family:var(--f-head);font-size:26px;line-height:1.35}
.g-card p{font-size:15px;color:var(--mut)}
.g-card input{width:100%;padding:15px;text-align:center;font-family:var(--f-latin);font-size:20px;letter-spacing:.3em;outline:none;text-transform:uppercase}
.g-err{min-height:22px;font-size:13px;color:#E88B8B}
.g-ic{font-size:44px;line-height:1}
.g-oath{font-size:16px;line-height:1.9;padding:16px;text-align:right}
/* package tabs (mobile) + duration step */
.pkg-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px}
.pkg-tabs button{padding:10px 2px;font-family:var(--f-latin);font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap}
.pkg:not(.on){display:none}
.pkg-price small{font-size:12px;color:var(--mut);align-self:center}
.durs{display:flex;flex-direction:column;gap:10px}
.durc{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:2px 8px;padding:18px;text-align:right}
.durc-l{font-size:17px;font-weight:700}
.durc b{font-family:var(--f-latin);font-size:28px;color:var(--acc);line-height:1}
.durc-c{font-size:13px;color:var(--mut)}
.durc-i{grid-column:1/-1;font-size:13px;color:var(--mut)}

/* ===== desktop ===== */
@media (min-width:900px){
  #app{max-width:1200px}
  .sec{padding:44px 40px}
  .h2{font-size:38px}
  .demo-nav{max-width:none;width:100%}
  .demo-nav button{flex:0 0 auto;padding-left:22px;padding-right:22px}
  .demo-nav{justify-content:center}
  /* hero split */
  .hero{min-height:640px;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .hero-img{position:relative;grid-column:1;grid-row:1;height:640px;inset:auto}
  .hero-shade{display:none}
  .hero-tx{grid-column:2;grid-row:1;padding:40px 56px}
  .sig{font-size:96px}
  .lead{font-size:19px;max-width:440px}
  .hero-tx .btn{width:auto;align-self:flex-start;padding:16px 36px}
  /* packages side by side */
  .pkg-tabs{display:none}
  .pkg:not(.on){display:flex}
  .pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  .pkg .btn{margin-top:auto}
  .pkg-name{font-size:30px}
  .pkg-price b{font-size:30px}
  .knows{display:grid;grid-template-columns:repeat(4,1fr)}
  .about{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;margin:0 40px}
  .about img{height:320px}
  /* steps centred */
  .dur,.wz,.okx{max-width:760px;margin:0 auto;width:100%}
  .durs{display:grid;grid-template-columns:repeat(3,1fr)}
  .durc{grid-template-columns:1fr;text-align:center;gap:6px;padding:26px 18px}
  .durc b{font-size:40px}
  .flds{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
  .flds>.fld:has(textarea),.flds>.fld:has(.ph),.flds>.cond,.flds>.sum,.flds>.opt,.flds>.tl,.flds>.terms,.flds>.fld:has(.pm),.flds>.fld:has(.sig-in){grid-column:1/-1}
  .cond{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
  .cond>.fld:has(textarea),.cond>.fld:has(.ph){grid-column:1/-1}
  .wz>.btn,.dur>.btn{max-width:320px;align-self:flex-start}
  /* client: sidebar + plan */
  .cl{display:grid;grid-template-columns:320px 1fr;gap:16px 28px;align-items:start;max-width:1100px;margin:0 auto}
  .cl>.cl-h,.cl>.cl-pay,.cl>.upd,.cl>.btn-ghost{grid-column:1}
  .cl>.tabs,.cl>.plan{grid-column:2}
  .cl>.tabs{grid-row:1;margin:0;padding:0}
  .cl>.plan{grid-row:2 / span 4}
  .cl>.cl-h{grid-row:1}.cl>.cl-pay{grid-row:2}.cl>.upd{grid-row:3}.cl>.btn-ghost{grid-row:4}
  .plan{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .plan>.card.hi,.plan>.days,.plan>.demo-tag,.plan>.tl{grid-column:1/-1}
  /* coach */
  .co{max-width:1100px;margin:0 auto}
  .co>.seg{max-width:520px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .search{max-width:520px}
  .co .acts{grid-template-columns:repeat(4,1fr)}
  .co:has(.paste){display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;align-items:start}
  .co:has(.paste)>*{grid-column:1/-1}
  .co:has(.paste)>.paste{grid-column:1;grid-row:5 / span 2;min-height:520px}
  .co:has(.paste)>.eyebrow:not(.co-h *){grid-column:2;grid-row:5}
  .co:has(.paste)>.prev{grid-column:2;grid-row:6}
  .co:has(.paste)>.acts,.co:has(.paste)>.btn-main{grid-column:1/-1}
  .co:has(.paste)>.btn-main{max-width:320px}
  .sheet-c{border-radius:20px;margin-bottom:40px}
  .sheet{align-items:center}
  #toast{bottom:40px}
}
/* about page */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{padding:18px 14px;display:flex;flex-direction:column;gap:2px;background:var(--surf);border:1px solid var(--line)}
.stat b{font-family:var(--f-latin);font-size:36px;line-height:1.1;color:var(--acc)}
.stat span{font-size:13px;color:var(--mut)}
.story{display:flex;flex-direction:column;gap:16px}
.story img{width:100%;height:340px;object-fit:cover;object-position:center 25%}
.story>div{display:flex;flex-direction:column;gap:12px}
.story p:not(.eyebrow){font-size:15.5px;color:var(--tx);opacity:.88}
.wins{display:flex;flex-direction:column;gap:8px}
.win{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surf);border:1px solid var(--line)}
.win>span{font-size:24px}.win>div{flex:1}.win b{font-size:14.5px}
.win em{font-style:normal;font-family:var(--f-latin);font-weight:700;color:var(--acc)}
.quotes{display:flex;flex-direction:column;gap:10px}
.quotes blockquote{font-family:var(--f-head);font-size:20px;line-height:1.6;padding:16px 18px;border-right:3px solid var(--acc);background:var(--surf)}
.ba{display:flex;flex-direction:column;gap:14px}
.ba-c{display:flex;flex-direction:column;gap:8px}
.ba-c>p{font-size:13px;color:var(--mut)}
.ba-im{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba-im figure{position:relative;margin:0}
.ba-im img{width:100%;height:240px;object-fit:cover;object-position:center 25%}
.ba-im img.bw{filter:grayscale(1) brightness(.85)}
.ba-im figcaption{position:absolute;bottom:8px;right:8px;font-size:12px;font-weight:700;padding:3px 10px;background:rgba(0,0,0,.6);color:#fff}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc{display:flex;flex-direction:column;gap:2px;padding:16px;background:var(--surf);border:1px solid var(--line);opacity:.8}
.soc b{font-family:var(--f-latin);font-size:16px;text-align:right}.soc small{font-size:12px;color:var(--mut)}
@media (min-width:900px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:26px 22px}.stat b{font-size:48px}
  .story{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
  .story img{height:520px}
  .story p:not(.eyebrow){font-size:17px}
  .quotes{display:grid;grid-template-columns:repeat(3,1fr)}
  .ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .ba-im img{height:340px}
  .socials{grid-template-columns:repeat(4,1fr)}
  .scr-programs .sec:first-child{padding-top:56px}
}
.dose p[dir="auto"]{grid-column:1/-1;font-size:13px;color:var(--mut)}
.dose .dose-t{color:var(--acc);font-family:var(--f-latin);font-weight:600;text-align:right}
.dose .f-note{grid-column:1/-1;color:var(--tx);margin-top:4px}
.dose.off{opacity:.55}
@media (min-width:900px){.plan>.h4,.plan>.f-note{grid-column:1/-1}}