/* Layout: an audited report. Cool paper, ledger-green ink, and a yellow highlighter that marks what the owner missed. Numbers set in mono like a statement. */
:root{
  --paper:#F3F5F9; --card:#FFFFFF; --ink:#0F1D33; --ink2:#4A5A72; --line:#D5DCE6; --soft:#E8EDF5;
  --green:#1F4E9E; --green-fg:#F2F5F2; --mark:#F2C230; --hl:#F7D96B;
  --red:#B4372B; --amber:#A86E12; --ok:#1F7650;
  --display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0B1220; --card:#121B2D; --ink:#E8EEF7; --ink2:#9AA9C0; --line:#24324A; --soft:#18233A;
  --green:#2F64C4; --green-fg:#EEF4F0; --mark:#E8B923; --hl:rgba(232,185,35,.34);
  --red:#E26B5E; --amber:#E2A444; --ok:#4FB488; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B1220; --card:#121B2D; --ink:#E8EEF7; --ink2:#9AA9C0; --line:#24324A; --soft:#18233A;
  --green:#2F64C4; --green-fg:#EEF4F0; --mark:#E8B923; --hl:rgba(232,185,35,.34);
  --red:#E26B5E; --amber:#E2A444; --ok:#4FB488; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
.logo-mark{width:50px;height:50px;flex:0 0 50px;align-self:center;background:url(assets/logo.png) center/contain no-repeat;border-radius:50%}
.logo{align-items:center}
.trainer{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.trainer .stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px}
.trainer .stats b{display:block;font-family:var(--mono);font-size:26px;color:var(--green)}
.trainer .stats small{color:var(--ink2);font-size:14px}
@media (max-width:760px){.trainer{grid-template-columns:1fr}.trainer .portrait{max-width:440px}}

html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;direction:rtl}
a{color:inherit}
.in{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.3;text-wrap:balance}
h1{font-size:clamp(30px,5vw,54px);font-weight:900;letter-spacing:-.01em}
h2{font-size:clamp(24px,3.4vw,36px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.hl{background:linear-gradient(transparent 52%,var(--hl) 52%,var(--hl) 92%,transparent 92%);padding-inline:.08em}
.kicker{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink2)}
.lead{color:var(--ink2);font-size:18px;max-width:58ch}
.sec{padding-block:72px}
.sec-head{display:grid;gap:10px;margin-bottom:32px;max-width:720px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);padding:14px 20px;border:1.5px solid var(--green);background:var(--green);color:var(--green-fg);cursor:pointer;text-decoration:none;border-radius:4px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.mark{background:var(--mark);border-color:var(--mark);color:#10241D}
.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--mark);outline-offset:2px}
.btn:hover{filter:brightness(1.06)}

/* demo strip */
.demo{background:var(--ink);color:var(--paper);font-size:13px;text-align:center;padding-block:6px}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.logo b{font-family:var(--display);font-weight:900;font-size:24px;color:var(--green)}
.logo span{font-family:var(--mono);font-size:13px;color:var(--ink2);letter-spacing:.12em}
.links{display:flex;gap:22px;font-size:15px}
.links a{text-decoration:none;color:var(--ink2)}
.links a:hover{color:var(--ink)}
.nav-end{display:flex;gap:10px;align-items:center}
.cur{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cur button{font:600 13px var(--body);padding:7px 10px;background:transparent;border:0;color:var(--ink2);cursor:pointer}
.cur button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:900px){.links{display:none}}

/* hero */
.hero{padding-block:56px 64px}
.hero .in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero p.lead{margin-top:18px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .fine{font-size:14px;color:var(--ink2);margin-top:14px}
.stmt{background:var(--card);border:1px solid var(--line);padding:22px 22px 18px;box-shadow:0 18px 40px -24px rgba(15,29,51,.35);position:relative;min-width:0}
.stmt h4{font-size:15px;display:flex;justify-content:space-between;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:6px}
.stmt h4 small{font-family:var(--body);font-weight:500;color:var(--ink2);font-size:12px}
.row{display:flex;justify-content:space-between;gap:12px;padding-block:6px;border-bottom:1px dashed var(--line);font-size:14.5px}
.row .num{font-size:14px}
.row.sub{font-weight:700}
.row.sub .num{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.row.neg .num{color:var(--ink2)}
.row.total{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:10px;font-weight:800;font-size:16px}
.row.total .num{color:var(--red);font-size:17px}
.stamp{position:absolute;left:-10px;top:-14px;background:var(--mark);color:#10241D;font:800 12px var(--display);padding:6px 10px;transform:rotate(-4deg)}
.stmt .note{font-size:12px;color:var(--ink2);margin-top:10px}
@media (max-width:860px){.hero .in{grid-template-columns:1fr}.stamp{left:8px}}

/* proof */
.proof{background:var(--green);color:var(--green-fg)}
.proof .in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof div{padding:22px 12px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.14)}
.proof div:first-child{border-inline-start:0}
.proof b{display:block;font-family:var(--mono);font-size:clamp(24px,3vw,32px);color:var(--mark)}
.proof small{font-size:14px;opacity:.9}
@media (max-width:640px){.proof .in{grid-template-columns:repeat(2,1fr)}.proof div:nth-child(3){border-inline-start:0}}

/* roles */
.roles{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card)}
.role{padding:22px 20px;border-inline-start:1px solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
.role:first-child{border-inline-start:0}
.role .lvl{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.role h3{font-size:19px}
.role .en{font-family:var(--mono);font-size:12px;color:var(--ink2);direction:ltr;text-align:right}
.role p{font-size:14.5px;color:var(--ink2)}
.role dl{margin:0;display:grid;gap:4px;font-size:13.5px}
.role dt{font-weight:700;color:var(--ink)}
.role dd{margin:0 0 6px;color:var(--ink2)}
.role.cfo{background:var(--soft)}
.roles-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:15px;color:var(--ink2)}
@media (max-width:900px){.roles{grid-template-columns:repeat(2,1fr)}.role:nth-child(3){border-inline-start:0}.role:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.roles{grid-template-columns:1fr}.role{border-inline-start:0;border-top:1px solid var(--line)}.role:first-child{border-top:0}}

/* quiz */
.quiz-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.quiz{background:var(--card);border:1px solid var(--line);padding:26px;min-width:0}
.qbar{height:6px;background:var(--soft);margin-bottom:20px}
.qbar i{display:block;height:100%;background:var(--green);width:0;transition:width .25s}
.qn{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.qq{font-family:var(--display);font-weight:700;font-size:21px;margin:6px 0 18px}
.opts{display:grid;gap:10px}
.opts button{font:500 16px var(--body);text-align:right;padding:14px 16px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:4px}
.opts button:hover{border-color:var(--green)}
.qnav{display:flex;justify-content:space-between;margin-top:16px}
.qnav button{font:500 14px var(--body);background:none;border:0;color:var(--ink2);cursor:pointer;padding:4px}
.result{display:grid;gap:14px}
.score{display:flex;align-items:baseline;gap:10px}
.score b{font-family:var(--mono);font-size:56px;line-height:1}
.score span{color:var(--ink2)}
.verdict{display:inline-block;font:700 13px var(--body);padding:4px 10px;border-radius:999px}
.v-red{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.v-amber{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.v-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.gaps{margin:0;padding-right:20px;color:var(--ink2);font-size:15px}
.quiz-side ul{padding-right:20px;color:var(--ink2);margin:16px 0 0}
@media (max-width:860px){.quiz-wrap{grid-template-columns:1fr}}

/* products */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod{background:var(--card);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.prod .tag{font:600 12px var(--body);color:var(--ink2);display:flex;justify-content:space-between;gap:8px}
.prod .tag em{font-style:normal;color:var(--ok)}
.prod .tag em.live{color:var(--amber)}
.prod h3{font-size:19px}
.prod .en{font-family:var(--mono);font-size:12px;color:var(--ink2);direction:ltr;text-align:right}
.prod p{font-size:14.5px;color:var(--ink2)}
.prod ul{margin:0;padding-right:18px;font-size:14px;color:var(--ink2)}
.prod .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.price{font-family:var(--mono);font-weight:600;font-size:22px;direction:ltr}
.price small{font-size:12px;color:var(--ink2);font-family:var(--body);font-weight:500}
.prod .btn{padding:10px 14px;font-size:14px}
.prod.feature{background:var(--green);color:var(--green-fg);border-color:var(--green)}
.prod.feature p,.prod.feature ul,.prod.feature .en,.prod.feature .tag,.prod.feature .price small{color:color-mix(in srgb,var(--green-fg) 80%,transparent)}
.prod.feature .tag em{color:var(--mark)}
.prod.feature .foot{border-top-color:rgba(255,255,255,.2)}
.prod.feature .price{color:var(--mark)}
@media (max-width:960px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.prods{grid-template-columns:1fr}}

/* health check */
.hc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hc ol{padding-right:22px;margin:18px 0 0;display:grid;gap:10px}
.hc ol li::marker{font-family:var(--mono);color:var(--green);font-weight:600}
.report{background:var(--card);border:1px solid var(--line);padding:24px;position:relative;min-width:0;box-shadow:0 18px 40px -26px rgba(15,29,51,.4)}
.report::before{content:"";position:absolute;inset:10px -10px -10px 10px;border:1px solid var(--line);background:var(--soft);z-index:-1}
.rep-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.rep-h b{font-family:var(--display);font-size:16px}
.rep-h small{font-size:12px;color:var(--ink2)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.kpi{border:1px solid var(--line);padding:12px;min-width:0}
.kpi small{display:block;font-size:12.5px;color:var(--ink2)}
.kpi b{font-family:var(--mono);font-size:22px;display:block;direction:ltr;text-align:right}
.kpi .st{font-size:12px;font-weight:700}
.st.r{color:var(--red)}.st.a{color:var(--amber)}.st.g{color:var(--ok)}
.flags{margin-top:14px;display:grid;gap:8px;font-size:14px}
.flag{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.flag i{width:10px;height:10px;border-radius:50%;margin-top:8px;display:block}
.flag i.r{background:var(--red)}.flag i.a{background:var(--amber)}
.report .note{font-size:12px;color:var(--ink2);margin-top:12px}
@media (max-width:860px){.hc{grid-template-columns:1fr}}

/* book */
.book{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.cover{width:260px;max-width:100%;aspect-ratio:2/3;background:var(--green);color:var(--green-fg);padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 10px 0 0 rgba(0,0,0,.18),0 24px 40px -20px rgba(15,29,51,.6);direction:ltr;text-align:left}
.cover .series{font-family:var(--mono);font-size:11px;letter-spacing:.14em;opacity:.8}
.cover h4{font-family:var(--display);font-size:30px;line-height:1.1;font-weight:900;margin-top:10px}
.cover h4 span{background:var(--mark);color:#10241D;padding:0 4px}
.cover .ar{direction:rtl;text-align:right;font-family:var(--display);font-weight:700;font-size:15px;margin-top:10px;opacity:.95}
.cover .by{font-family:var(--mono);font-size:12px;border-top:1px solid rgba(255,255,255,.3);padding-top:10px}
.toc{columns:2;column-gap:32px;padding-right:22px;margin:18px 0 0;font-size:15px}
.toc li{break-inside:avoid;margin-bottom:6px}
.formats{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.formats span{font-size:13px;border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:var(--ink2)}
.buyrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
@media (max-width:760px){.book{grid-template-columns:1fr;justify-items:start}.toc{columns:1}}

/* hire */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.step{padding:20px 18px 0 0;display:grid;gap:8px;min-width:0}
.step .n{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.step p{font-size:14.5px;color:var(--ink2)}
.hire-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;background:var(--card);border:1px solid var(--line);padding:18px 20px}
.roles-chips{display:flex;gap:8px;flex-wrap:wrap}
.roles-chips span{font-size:13px;background:var(--soft);padding:4px 10px;border-radius:999px}
@media (max-width:760px){.steps{grid-template-columns:1fr}.step{padding-top:16px}}

/* course */
.course{background:var(--green);color:var(--green-fg)}
.course .kicker,.course .lead{color:color-mix(in srgb,var(--green-fg) 78%,transparent)}
.course-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.sessions{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.sess{padding:12px 0 12px 12px;border-bottom:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15px;min-width:0}
.sess .num{color:var(--mark);font-size:13px;padding-top:3px}
.enroll{background:var(--card);color:var(--ink);padding:24px;display:grid;gap:14px;min-width:0}
.enroll .meta{display:grid;gap:8px;font-size:15px}
.enroll .meta div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.enroll .meta span{color:var(--ink2)}
.seats{height:8px;background:var(--soft)}
.seats i{display:block;height:100%;width:64%;background:var(--mark)}
.enroll .fine{font-size:13px;color:var(--ink2)}
@media (max-width:860px){.course-grid{grid-template-columns:1fr}.sessions{grid-template-columns:1fr}}

/* consult */
.consult{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.picker{background:var(--card);border:1px solid var(--line);padding:22px;min-width:0}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.day{flex:0 0 auto;font:500 14px var(--body);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 12px;cursor:pointer;text-align:center;border-radius:4px;min-width:72px}
.day b{display:block;font-family:var(--mono);font-size:18px}
.day[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:var(--green-fg)}
.times{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.time{font:600 14px var(--mono);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);padding:9px 14px;cursor:pointer;border-radius:4px}
.time[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.time[aria-pressed="true"]{border-color:var(--mark);background:var(--mark);color:#10241D}
.summary{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.summary p{font-size:15px}
.msg{margin-top:12px;font-size:14px;background:var(--soft);padding:10px 12px}
.consult ul{padding-right:20px;color:var(--ink2);margin:16px 0 0}
@media (max-width:860px){.consult{grid-template-columns:1fr}}

/* circle */
.circle{background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:32px;padding:32px;align-items:center}
.circle ul{columns:2;column-gap:28px;padding-right:20px;margin:16px 0 0;color:var(--ink2)}
.circle li{break-inside:avoid;margin-bottom:6px}
.circle .p{text-align:center;display:grid;gap:10px;justify-items:center}
.circle .price{font-size:34px}
@media (max-width:760px){.circle{grid-template-columns:1fr}.circle ul{columns:1}}

/* proof placeholders */
.ph{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ph div{border:1.5px dashed var(--line);padding:22px;color:var(--ink2);font-size:14px;min-height:120px;display:grid;align-content:center;gap:6px}
.logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.logos span{border:1.5px dashed var(--line);padding:10px 18px;font-size:13px;color:var(--ink2)}
@media (max-width:760px){.ph{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding-block:16px}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink2)}
.faq details[open] summary::after{content:"\2212 "}
.faq p{color:var(--ink2);margin-top:10px;font-size:15px}

footer{background:var(--ink);color:var(--paper);padding-block:40px;font-size:14px}
footer .in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .logo b{color:var(--mark)}
footer p{opacity:.75;max-width:46ch;margin-top:8px}
.wa{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:#1F7A4E;color:#fff;font:700 14px var(--body);padding:12px 16px;border-radius:999px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);z-index:30}
/* lead form */
.modal{position:fixed;inset:0;z-index:50;background:rgba(8,18,14,.55);display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sheet{background:var(--card);color:var(--ink);width:100%;max-width:480px;max-height:100%;overflow:auto;padding:26px;border-top:6px solid var(--mark);position:relative}
.sheet .x{position:absolute;left:12px;top:10px;background:none;border:0;font:500 24px var(--mono);color:var(--ink2);cursor:pointer;padding:4px 8px}
.lf{display:grid;gap:12px;margin-top:16px}
.lf label{display:grid;gap:4px;font-size:14px;font-weight:600}
.lf label span{font-weight:400;color:var(--ink2)}
.lf input,.lf select{font:16px var(--body);padding:11px 12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;width:100%;min-width:0}
.lf input:focus,.lf select:focus{outline:none;border-color:var(--green)}
.phone{display:grid;grid-template-columns:110px 1fr;gap:8px;direction:ltr}
.phone input{direction:ltr;text-align:left}
.lf .err{color:var(--red);font-size:13px;min-height:1em}
.lf .btn{justify-content:center}
.lf .priv{font-size:12px;color:var(--ink2)}
.chip{display:inline-block;font:600 13px var(--body);background:var(--soft);padding:4px 10px;border-radius:999px;margin-top:6px}
.done{display:grid;gap:12px;text-align:center;justify-items:center;padding-block:12px}
.done b.big{font-family:var(--display);font-size:24px}
.gate{display:grid;gap:12px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.qbar i{transition:none}}

/* ---------- option 2: multi-page ---------- */
nav .in{position:relative}
.menu{display:flex;gap:4px;align-items:center}
.mi{position:relative}
.mi>a,.mi>button{display:block;font:500 15px var(--body);color:var(--ink2);text-decoration:none;background:none;border:0;padding:8px 10px;cursor:pointer;border-radius:4px}
.mi>a:hover,.mi>button:hover,.mi>a.on,.mi>button.on{color:var(--ink);background:var(--soft)}
.mi>button::after{content:" \25be ";font-size:11px}
.drop{position:absolute;top:100%;right:0;min-width:300px;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 40px -20px rgba(15,29,51,.4);padding:10px;display:none;z-index:40}
.mi:hover .drop,.mi:focus-within .drop{display:grid}
.drop a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px;text-decoration:none;border-radius:4px}
.drop a:hover{background:var(--soft)}
.drop a i{grid-row:span 2;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--green);background:var(--soft);width:34px;height:34px;display:grid;place-items:center;border-radius:4px}
.drop a b{font-size:14.5px}
.drop a small{font-size:12.5px;color:var(--ink2)}
.burger{display:none;background:none;border:1.5px solid var(--line);color:var(--ink);font:600 14px var(--body);padding:8px 12px;border-radius:4px;cursor:pointer}
.mobile{display:none}
@media (max-width:1020px){.menu{display:none}.burger{display:inline-block}
  .mobile:not([hidden]){display:grid;gap:18px;padding-block:8px 20px;border-top:1px solid var(--line)}
  .mobile div{display:grid;gap:2px}.mobile b{font-size:12px;color:var(--ink2);letter-spacing:.05em}
  .mobile a{text-decoration:none;padding:8px 0;font-size:16px;border-bottom:1px dashed var(--line)}}
@media (max-width:520px){.nav-end .btn{display:none}}
main{min-height:60vh}
.crumbs{font-size:13px;color:var(--ink2);padding-block:22px 0;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--ink2)}
.page-head{padding-block:18px 36px;display:grid;gap:12px;max-width:780px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tabs button{font:500 14px var(--body);padding:8px 14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge{font:600 11.5px var(--body);padding:3px 9px;border-radius:999px;white-space:nowrap}
.b-now{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.b-soon{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.b-wait{background:var(--soft);color:var(--ink2)}
.prod .tag{align-items:center}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:40px 0 16px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.cat-head:first-child{margin-top:0}
.cat-head a{font-size:14px}
.detail{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start;padding-bottom:72px}
.detail .box{background:var(--card);border:1px solid var(--line);padding:24px;display:grid;gap:14px;position:sticky;top:calc(84px + env(safe-area-inset-top,0px));min-width:0}
.detail h2{font-size:22px;margin-top:28px}
.detail ul.check{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.detail ul.check li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.detail ul.check li::before{content:"\2713 ";font-family:var(--mono);color:var(--ok);font-weight:600}
.for{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.for span{background:var(--soft);padding:5px 12px;border-radius:999px;font-size:14px}
.related{padding-block:56px;border-top:1px solid var(--line)}
@media (max-width:860px){.detail{grid-template-columns:1fr}.detail .box{position:static}}
.saas-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:40px}
.app{background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(15,29,51,.45);min-width:0}
.app-bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--soft);font-size:12px;color:var(--ink2)}
.app-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.app-body{padding:16px;display:grid;gap:10px}
.app-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;font-size:13.5px;padding-block:6px;border-bottom:1px dashed var(--line);align-items:center}
.app-row .num{font-size:13px}
.app-row .r{color:var(--red)}.app-row .g{color:var(--ok)}
@media (max-width:860px){.saas-hero{grid-template-columns:1fr}}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.type{background:var(--card);border:1.5px solid var(--line);padding:20px;cursor:pointer;text-align:right;font:inherit;color:inherit;display:grid;gap:8px;border-radius:4px}
.type[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.type small{color:var(--ink2);font-size:14px}
@media (max-width:760px){.types{grid-template-columns:1fr}}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:var(--card);border:1px solid var(--line);padding:24px}
.calc label{display:grid;gap:4px;font-size:14px;font-weight:600}
.calc input{font:16px var(--mono);padding:10px 12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;width:100%;direction:ltr;text-align:left}
.calc .fields{display:grid;gap:12px}
.calc .out .row{font-size:15px}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.gloss div{padding:16px 0 16px 20px;border-bottom:1px solid var(--line);min-width:0}
.gloss b{font-family:var(--display)}
.gloss .en{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-inline-start:6px}
.gloss p{font-size:14.5px;color:var(--ink2);margin-top:4px}
@media (max-width:700px){.gloss{grid-template-columns:1fr}}
.hub{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hub a{background:var(--card);border:1px solid var(--line);padding:22px;text-decoration:none;display:grid;gap:6px}
.hub a:hover{border-color:var(--green)}
.hub small{color:var(--ink2)}
@media (max-width:700px){.hub{grid-template-columns:1fr}}
.sitemap{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;width:100%}
.sitemap div{display:grid;gap:6px;align-content:start}
.sitemap b{color:var(--mark);font-size:13px}
.sitemap a{text-decoration:none;opacity:.85}
.sitemap a:hover{opacity:1;text-decoration:underline}
@media (max-width:860px){.sitemap{grid-template-columns:repeat(2,1fr)}}
.week{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.week .col{border:1px solid var(--line);padding:12px;display:grid;gap:8px;align-content:start;min-width:0}
.week .col b{font-size:14px}
@media (max-width:700px){.week{grid-template-columns:1fr}}
.prep{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.prep div{border-top:2px solid var(--ink);padding-top:12px;font-size:14.5px;color:var(--ink2)}
.prep b{display:block;color:var(--ink);font-family:var(--display);margin-bottom:4px}
@media (max-width:700px){.prep{grid-template-columns:1fr}}

/* language switch */
.lang{font:600 14px var(--mono);text-decoration:none;color:var(--ink);border:1.5px solid var(--line);padding:8px 11px;border-radius:4px}
.lang:hover{border-color:var(--ink)}
footer .logo-mark{width:58px;height:58px;flex-basis:58px}
/* portrait */
.portrait{position:relative;aspect-ratio:1192/1070;max-width:100%;background:linear-gradient(180deg,var(--soft) 0%,var(--card) 100%);overflow:hidden}
.portrait::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--green)}
.portrait::after{content:"";position:absolute;left:0;right:0;bottom:34%;height:5px;background:var(--mark)}
.portrait img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.trainer{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.trainer h2{font-size:clamp(30px,4vw,44px)}
/* English (LTR) */
html[dir="ltr"] body{direction:ltr}
[dir="ltr"] .opts button,[dir="ltr"] .type,[dir="ltr"] .en,[dir="ltr"] .prod .en,[dir="ltr"] .role .en,[dir="ltr"] .kpi b{text-align:left}
[dir="ltr"] ul,[dir="ltr"] ol{padding-right:0;padding-left:20px}
[dir="ltr"] .detail ul.check{padding-left:0}
[dir="ltr"] .drop{right:auto;left:0}
[dir="ltr"] .stamp{left:auto;right:-10px}
[dir="ltr"] .sheet .x{left:auto;right:12px}
[dir="ltr"] .wa{left:auto;right:calc(16px + env(safe-area-inset-right,0px))}
[dir="ltr"] .report::before{inset:10px 10px -10px -10px}
[dir="ltr"] .sess{padding:12px 12px 12px 0}
[dir="ltr"] .step{padding:20px 18px 0 0}
[dir="ltr"] .gloss div{padding:16px 20px 16px 0}
[dir="ltr"] .m-quote,[dir="ltr"] .flag{text-align:left}
[dir="ltr"] .cover .ar{direction:ltr;text-align:left}
[dir="ltr"] .footer button{text-align:left}
[dir="ltr"] .row,[dir="ltr"] .app-row{direction:ltr}
/* ---- company home ---- */
.tagline{margin-top:14px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--green);border-inline-start:4px solid var(--mark);padding-inline-start:12px}
.hero-figure{margin:0;display:grid;gap:0;min-width:0}
.hero-figure figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-top:0;padding:12px 16px}
.hero-figure figcaption b{font-family:var(--display);font-size:17px}
.hero-figure figcaption span{font-size:13px;color:var(--ink2)}
.mission{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding-bottom:36px;border-bottom:2px solid var(--ink)}
.mission h2{font-size:clamp(26px,3.6vw,40px)}
.how-h{margin:36px 0 16px;font-size:18px;color:var(--ink2);font-weight:600}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillar{background:var(--card);border:1px solid var(--line);padding:22px;display:grid;gap:8px;align-content:start;min-width:0}
.pillar .num{color:var(--green);font-size:14px}
.pillar p{color:var(--ink2);font-size:15px}
.pillar a{font-weight:600;font-size:14px;color:var(--green)}
.values{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.values span{background:var(--soft);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600}
.solve{display:grid;border-top:2px solid var(--ink)}
.solve-row{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:28px;padding-block:22px;border-bottom:1px solid var(--line);align-items:start}
.solve-row>.num{font-size:28px;font-weight:600;color:var(--green);line-height:1}
.solve-row small{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--ink2);margin-bottom:4px}
.solve-row h3{font-size:20px}
.solve-row p{color:var(--ink2);font-size:15px;margin-top:4px}
.solve-row div:last-child p{color:var(--ink)}
.solve-row a{display:inline-block;margin-top:8px;font-weight:600;font-size:14px;color:var(--green)}
.paper{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}
.founder{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.founder .en{text-align:inherit}
.quote{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.45;border-inline-start:5px solid var(--mark);padding-inline-start:20px}
.quote cite{display:block;font-family:var(--body);font-style:normal;font-weight:500;font-size:14px;opacity:.75;margin-top:12px}
@media (max-width:860px){.mission,.paper,.founder{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}.solve-row{grid-template-columns:40px minmax(0,1fr);gap:12px 16px}.solve-row div:last-child{grid-column:2}.hero-figure{max-width:440px}}

.prods.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.prods.two{grid-template-columns:1fr}}
/* ---- book covers + richer product pages ---- */
.prod.has-cover{padding-top:0;overflow:hidden}
.book-thumb{display:block;margin:0 -22px 4px;background:var(--soft);padding:18px 0 0;text-align:center}
.book-thumb img{width:58%;max-width:180px;height:auto;display:inline-block;box-shadow:0 18px 30px -16px rgba(15,29,51,.55);transform:translateY(6px);transition:transform .2s}
.prod.has-cover:hover .book-thumb img{transform:translateY(0)}
.book-hero{margin-top:26px;background:var(--soft);padding:28px;display:flex;justify-content:center}
.book-hero img{width:100%;max-width:300px;height:auto;box-shadow:0 26px 40px -22px rgba(15,29,51,.6)}
.toc-list{margin:12px 0 0;padding-inline-start:22px;display:grid;gap:8px}
.toc-list li::marker{font-family:var(--mono);color:var(--green);font-weight:600}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.how3 div{border-top:2px solid var(--ink);padding-top:10px;min-width:0}
.how3 .num{display:block;color:var(--green);font-size:13px}
.how3 b{display:block;font-family:var(--display);margin-top:2px}
.how3 p{font-size:14px;color:var(--ink2);margin-top:4px}
.notfor{margin-top:14px;font-size:14px;color:var(--ink2);border-inline-start:3px solid var(--line);padding-inline-start:12px}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--green);color:var(--green-fg);padding:22px 24px;margin:8px 0 40px}
.cta-band p{opacity:.85;margin-top:4px}
.cta-band b{font-family:var(--display);font-size:19px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink);margin-top:14px}
.timeline div{padding:14px 0 0 14px;min-width:0}
[dir="ltr"] .timeline div{padding:14px 14px 0 0}
.timeline b{display:block;font-family:var(--mono);font-size:22px;color:var(--green)}
.timeline p{font-size:14px;color:var(--ink2);margin-top:4px}
.values3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.values3 div{background:var(--card);border:1px solid var(--line);padding:18px;min-width:0}
.values3 b{font-family:var(--display);display:block}
.values3 p{font-size:14px;color:var(--ink2);margin-top:6px}
@media (max-width:760px){.how3,.timeline,.values3{grid-template-columns:1fr!important}.timeline div{padding:12px 0 0}}