/* ════════════════════════════════════════════════════════════════
   KHAT · خَط — landing page styles
   Tokens are copied verbatim from KHAT-Brand-Pack/tokens/khat-tokens.css
   Layout uses CSS logical properties throughout, so this one sheet
   serves the RTL (Arabic) and LTR (English) pages unchanged.
   ════════════════════════════════════════════════════════════════ */

:root{
  --ink:#101418; --ink-soft:#3A4149; --grey:#8B9198;
  --paper:#F5F2EC; --paper-pure:#FFFFFF; --paper-deep:#EBE7DE;
  --blue:#1B4BFF; --blue-deep:#0B2BB8; --blue-tint:#DCE3FF; --rule:#D9D4C9;
  --ar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --la:'Space Grotesk','IBM Plex Sans Arabic',system-ui,sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --draw:560ms cubic-bezier(.22,1,.36,1); --move:320ms ease-out; --arrive:180ms ease-in-out;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px; --s8:60px; --s9:88px;
  --body-font:var(--ar);
}
:root:lang(en){ --body-font:var(--la); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body-font);font-weight:300;font-size:15.5px;line-height:1.85;
  text-align:start;-webkit-font-smoothing:antialiased;
}
body:lang(en){font-weight:400;line-height:1.7;}
.num{font-family:var(--la);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
strong,b{font-weight:600;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}
img,svg{max-width:100%;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── type ────────────────────────────────────────────── */
h1{font-size:clamp(34px,5.4vw,56px);line-height:1.15;font-weight:600;margin:0;max-width:16ch;text-wrap:balance;}
h2{font-size:clamp(24px,3.2vw,34px);line-height:1.3;font-weight:600;margin:0 0 var(--s4);max-width:23ch;text-wrap:balance;}
h3{font-size:19px;line-height:1.45;font-weight:500;margin:0 0 var(--s2);}
p{max-width:64ch;margin:0 0 var(--s4);}
.lede{font-size:17px;line-height:1.8;color:var(--ink-soft);max-width:62ch;}
.eyebrow{font-size:12px;font-weight:600;color:var(--blue);margin:0 0 var(--s3);display:flex;align-items:center;gap:9px;}
.eyebrow:lang(en){letter-spacing:.08em;text-transform:uppercase;font-size:11px;}
.eyebrow::before{content:"";width:5px;height:5px;background:var(--blue);border-radius:50%;flex:none;}
.cap{font-size:12.5px;line-height:1.6;color:var(--grey);}
h1:lang(en),h2:lang(en){max-width:20ch;}

/* ── shell ───────────────────────────────────────────── */
.shell{max-width:1080px;margin:0 auto;padding:0 24px;}
.sec{padding:var(--s9) 0;border-block-start:1px solid var(--rule);}
.sec:first-of-type{border-block-start:0;}

/* ── chapter rail ────────────────────────────────────── */
.crail{display:none;}
@media(min-width:1340px){
  .crail{display:block;position:fixed;inset-inline-start:28px;top:50%;transform:translateY(-50%);z-index:30;}
  .crail ol{list-style:none;margin:0;padding:0;}
  .crail li{position:relative;}
  .crail li::before{content:"";position:absolute;inset-inline-start:8.5px;top:0;bottom:0;width:1px;background:var(--rule);}
  .crail li:first-child::before{top:50%;}
  .crail li:last-child::before{bottom:50%;}
  .crail a{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:12px;
    padding:7px 0;text-decoration:none;color:var(--grey);font-size:12.5px;font-weight:400;line-height:1.4;}
  .crail .nd{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;
    border:1.5px solid var(--rule);background:var(--paper);justify-self:center;
    transition:border-color var(--move),background-color var(--move),transform var(--arrive);}
  .crail li.done .nd{border-color:var(--ink);background:var(--ink);}
  .crail li.here .nd{border-color:var(--blue);border-width:2.5px;background:var(--blue-tint);transform:scale(1.3);}
  .crail li.done a{color:var(--ink-soft);}
  .crail li.here a{color:var(--blue-deep);font-weight:600;}
  .crail a:hover{color:var(--ink);}
}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-block-end:1px solid var(--rule);}
.nav-in{max-width:1080px;margin:0 auto;padding:var(--s3) 24px;display:flex;align-items:center;gap:var(--s5);}
.logo{display:block;height:30px;width:auto;flex:none;}
.brandlink{display:flex;align-items:center;text-decoration:none;}
.nav-links{display:none;gap:var(--s5);margin-inline-start:auto;font-size:14px;font-weight:400;}
@media(min-width:960px){.nav-links{display:flex;}}
.nav-links a{color:var(--ink-soft);text-decoration:none;}
.nav-links a:hover{color:var(--blue);}
.nav-cta{margin-inline-start:auto;display:flex;gap:var(--s2);align-items:center;}
@media(min-width:960px){.nav-cta{margin-inline-start:0;}}
.langlink{font-family:var(--la);font-size:13px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 13px;white-space:nowrap;}
.langlink:hover{border-color:var(--ink);color:var(--ink);}

/* ── buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body-font);
  font-size:15px;font-weight:600;padding:12px 22px;border-radius:var(--r-md);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background-color var(--move),color var(--move),border-color var(--move);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-deep);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{font-size:13.5px;padding:9px 16px;}
.btn-lg{font-size:16px;padding:15px 30px;}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;}

/* ── hero ────────────────────────────────────────────── */
.hero{padding:var(--s9) 0;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s8);align-items:center;}
@media(min-width:940px){.hero-grid{grid-template-columns:1.12fr .88fr;gap:var(--s7);}}
.hero .sub{font-size:18px;line-height:1.8;color:var(--ink-soft);margin:var(--s5) 0 0;max-width:52ch;}
.hero .cta-row{margin-block-start:var(--s6);}
.hero-note{font-size:13px;color:var(--grey);margin:var(--s3) 0 0;}
.strip{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-block-start:var(--s7);
  padding-block-start:var(--s5);border-block-start:1px solid var(--rule);}
.strip div{font-size:13px;color:var(--ink-soft);}
.strip b{display:block;font-family:var(--la);font-size:24px;font-weight:500;color:var(--ink);line-height:1.2;}
.strip b.b{color:var(--blue);}

/* ── ascending path ──────────────────────────────────── */
.path{background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s6) var(--s5);}
.panel-head{font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-block-end:var(--s5);
  display:flex;justify-content:space-between;gap:var(--s3);}
.panel-head span:last-child{color:var(--grey);font-weight:400;}
.step{display:grid;grid-template-columns:32px 1fr;gap:0 var(--s3);align-items:start;}
.step-rail{position:relative;height:100%;min-height:54px;display:flex;justify-content:center;}
.step-rail::before{content:"";position:absolute;top:16px;bottom:-6px;width:1px;background:var(--rule);}
.step:last-of-type .step-rail::before{display:none;}
.dot{width:13px;height:13px;border-radius:50%;margin-block-start:6px;position:relative;z-index:1;background:var(--paper-pure);}
.dot.done{background:var(--ink);}
.dot.here{border:2.5px solid var(--blue);background:var(--blue-tint);width:15px;height:15px;}
.dot.lock{border:1.5px solid var(--rule);}
.step-body{padding-block-end:var(--s4);}
.step-title{font-size:14.5px;font-weight:500;line-height:1.5;}
.step.is-lock .step-title{color:var(--grey);font-weight:400;}
.step-cap{font-size:12px;color:var(--grey);}
.step.is-here .step-cap{color:var(--blue);font-weight:600;}
.step-meta{font-size:11.5px;color:var(--grey);font-family:var(--la);margin-block-start:2px;}
.panel-foot{margin-block-start:var(--s4);padding-block-start:var(--s4);border-block-start:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-soft);line-height:1.65;}

/* ── blocks ──────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr;gap:var(--s6);}
@media(min-width:860px){.g2{grid-template-columns:1fr 1fr;gap:var(--s7);}}
.g3{display:grid;grid-template-columns:1fr;gap:var(--s4);}
@media(min-width:780px){.g3{grid-template-columns:repeat(3,1fr);}}
.card{background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s5);}
.card h3{font-size:16.5px;}
.card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 var(--s3);max-width:none;}
.card p:last-child{margin-block-end:0;}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--blue);
  background:var(--blue-tint);border-radius:var(--r-pill);padding:3px 11px;margin-block-end:var(--s3);}
.tag.plain{color:var(--ink-soft);background:var(--paper-deep);}

/* ── asks ────────────────────────────────────────────── */
.asks{border-block-start:1px solid var(--ink);margin-block-start:var(--s6);}
.ask{display:grid;grid-template-columns:1fr;gap:var(--s2);padding:var(--s5) 0;border-block-end:1px solid var(--rule);}
@media(min-width:820px){.ask{grid-template-columns:minmax(0,26ch) 1fr;gap:var(--s6);align-items:baseline;}}
.ask .q{font-size:17px;font-weight:500;line-height:1.5;color:var(--ink);}
.ask .a{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:60ch;}
.ask .a b{color:var(--ink);}

/* ── diagnosis ───────────────────────────────────────── */
.diag{background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;margin-block-start:var(--s6);}
.diag-head{padding:var(--s4) var(--s5);border-block-end:1px solid var(--rule);display:flex;
  justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s2);}
.diag-head .t{font-size:15px;font-weight:600;}
.diag-head .m{font-size:12.5px;color:var(--grey);}
.qrow{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;width:100%;text-align:start;
  padding:var(--s4) var(--s5);border:0;border-block-end:1px solid var(--rule);background:transparent;cursor:pointer;
  font-family:var(--body-font);font-size:14.5px;font-weight:300;color:var(--ink);transition:background-color var(--move);}
.qrow:lang(en){font-weight:400;}
.qrow:hover{background:var(--paper);}
.qrow[aria-selected="true"]{background:var(--blue-tint);}
.qrow .qt{font-weight:500;display:block;}
.qrow .qs{font-size:12.5px;color:var(--ink-soft);display:block;margin-block-start:2px;}
.qrow[aria-selected="true"] .qt{color:var(--blue-deep);}
.qpill{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid var(--rule);color:var(--ink-soft);}
.qrow[aria-selected="true"] .qpill{border-color:var(--blue);color:var(--blue);background:var(--paper-pure);}
.diag-out{padding:var(--s5);background:var(--paper);}
.diag-out .vd{font-size:12px;font-weight:600;color:var(--blue);margin-block-end:6px;}
.diag-out .vt{font-size:18px;font-weight:600;margin-block-end:var(--s2);}
.diag-out .vb{font-size:14.5px;color:var(--ink-soft);margin:0 0 var(--s4);max-width:64ch;}
.diag-out .va{font-size:14px;color:var(--ink);border-inline-start:2px solid var(--blue);
  padding-inline-start:14px;max-width:62ch;}
.diag-out .va b{color:var(--blue-deep);}

/* ── signals ─────────────────────────────────────────── */
.sig{display:grid;grid-template-columns:1fr;border-block-start:1px solid var(--ink);margin-block-start:var(--s6);}
@media(min-width:720px){.sig{grid-template-columns:1fr 1fr;column-gap:var(--s7);}}
.sig div{padding:var(--s4) 0;border-block-end:1px solid var(--rule);}
.sig b{display:block;font-weight:600;font-size:14.5px;margin-block-end:2px;}
.sig span{color:var(--ink-soft);font-size:13.5px;line-height:1.7;}

/* ── numbered steps ──────────────────────────────────── */
.st3{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-block-start:var(--s6);}
@media(min-width:820px){.st3{grid-template-columns:repeat(3,1fr);}}
.st{padding-block-start:var(--s4);border-block-start:2px solid var(--ink);}
.st .n{font-family:var(--la);font-size:12px;color:var(--blue);font-weight:500;margin-block-end:6px;}
.st h3{font-size:16.5px;}
.st p{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:none;}

/* ── inventory ───────────────────────────────────────── */
.inv{border-block-start:1px solid var(--ink);margin-block-start:var(--s6);}
.invg{display:grid;grid-template-columns:154px 1fr;gap:0 var(--s5);padding:var(--s5) 0;
  border-block-end:1px solid var(--rule);}
@media(max-width:720px){.invg{grid-template-columns:1fr;gap:var(--s3) 0;}}
.invg .gt{font-size:14.5px;font-weight:600;}
.invg .gt span{display:block;font-size:11px;color:var(--grey);font-weight:400;font-family:var(--la);
  letter-spacing:.08em;margin-block-start:3px;}
.invg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  gap:var(--s2) var(--s5);font-size:14px;}
@media(min-width:640px){.invg ul{grid-template-columns:1fr 1fr;}}
.invg li{color:var(--ink-soft);position:relative;padding-inline-start:16px;max-width:none;line-height:1.65;}
.invg li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:8px;height:1px;background:var(--rule);}
.invg li b{color:var(--ink);font-weight:500;}
.rare{color:var(--blue);font-size:11px;font-weight:600;font-style:normal;margin-inline-end:5px;}

/* ── pricing ─────────────────────────────────────────── */
.toggle{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px;
  background:var(--paper-pure);margin-block-end:var(--s6);}
.toggle button{border:0;background:transparent;font-family:var(--body-font);font-size:13.5px;font-weight:600;
  color:var(--ink-soft);padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;
  transition:background-color var(--move),color var(--move);}
.toggle button[aria-pressed="true"]{background:var(--blue);color:#fff;}
.toggle .save{font-size:11px;font-weight:500;opacity:.9;margin-inline-start:5px;}
.plans{display:grid;grid-template-columns:1fr;gap:var(--s4);}
@media(min-width:920px){.plans{grid-template-columns:repeat(3,1fr);}}
.plan{background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);display:flex;flex-direction:column;}
.plan.rec{border-color:var(--blue);}
.plan .pn{font-size:22px;font-weight:600;line-height:1.25;}
.plan .pn small{display:block;font-family:var(--la);font-size:10.5px;color:var(--grey);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;margin-block-start:4px;}
.plan.rec .pn{color:var(--blue-deep);}
.plan .pp{margin:var(--s5) 0 0;display:flex;align-items:baseline;gap:7px;}
.plan .pp .v{font-family:var(--la);font-size:38px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;}
.plan.rec .pp .v{color:var(--blue);}
.plan .pp .u{font-size:13px;color:var(--grey);}
.plan .pw{font-size:12.5px;color:var(--ink-soft);margin-block-start:8px;min-height:22px;}
.plan .pr{font-size:13px;color:var(--ink-soft);margin:var(--s4) 0 var(--s5);padding:var(--s3) 0;
  border-block:1px solid var(--rule);}
.plan .promise{font-size:15.5px;font-weight:500;line-height:1.6;margin:0 0 var(--s4);max-width:none;color:var(--ink);}
.plan.rec .promise{color:var(--blue-deep);}
.plan ul{list-style:none;margin:0 0 var(--s5);padding:0;font-size:14px;flex:1;}
.plan li{padding:5px 0;padding-inline-start:18px;position:relative;color:var(--ink-soft);max-width:none;line-height:1.65;}
.plan li::before{content:"";position:absolute;inset-inline-start:0;top:14px;width:8px;height:1px;background:var(--rule);}
.plan li.key{color:var(--ink);}
.plan li.key::before{background:var(--blue);height:2px;top:13px;}
.plan li b{font-weight:600;color:var(--ink);}
.plan .lim{font-size:12.5px;color:var(--grey);border-block-start:1px solid var(--rule);
  padding-block-start:var(--s3);margin-block-end:var(--s4);}
.ent{margin-block-start:var(--s4);background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;}
.ent .et{font-size:18px;font-weight:600;}
.ent .ed{font-size:14.5px;color:var(--ink-soft);max-width:58ch;margin:6px 0 0;}

/* ── table ───────────────────────────────────────────── */
.tw{overflow-x:auto;margin-block-start:var(--s6);border-block-start:1px solid var(--ink);}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px;}
th,td{text-align:start;padding:12px 0;border-block-end:1px solid var(--rule);vertical-align:middle;}
th{font-weight:600;font-size:12.5px;color:var(--ink-soft);}
td:not(:first-child),th:not(:first-child){padding-inline-start:18px;text-align:center;}
td.n{font-family:var(--la);font-variant-numeric:tabular-nums;}
.yes{color:var(--blue);font-weight:600;}
.no{color:var(--grey);}
tfoot td{border-block-end:0;font-size:12.5px;color:var(--grey);padding-block-start:14px;text-align:start;}

/* ── season ──────────────────────────────────────────── */
.band{background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s7) var(--s6);margin-block-start:var(--s6);}
.months{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s5) 0 0;}
.mo{flex:1;min-width:54px;text-align:center;padding:10px 4px;border:1px solid var(--rule);
  border-radius:var(--r-sm);font-size:12px;color:var(--ink-soft);background:var(--paper);}
.mo.on{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-deep);font-weight:600;}
.mo.off{color:var(--grey);background:var(--paper-deep);border-style:dashed;}
.mo span{display:block;font-family:var(--la);font-size:10.5px;margin-block-start:2px;opacity:.75;}

/* ── demo ────────────────────────────────────────────── */
.demo-box{background:var(--paper-deep);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin-block-start:var(--s4);}
.demo-box .dh{font-size:12px;font-weight:600;color:var(--ink-soft);margin-block-end:var(--s3);}
.cred{display:grid;gap:6px;font-family:var(--la);font-size:13.5px;}
.cred div{color:var(--ink);display:flex;gap:10px;}
.cred i{font-style:normal;color:var(--grey);min-width:74px;}

/* ── faq ─────────────────────────────────────────────── */
.faq{border-block-start:1px solid var(--ink);margin-block-start:var(--s6);}
details{border-block-end:1px solid var(--rule);}
summary{list-style:none;cursor:pointer;padding:var(--s4) 0;font-size:16px;font-weight:500;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-family:var(--la);font-size:20px;color:var(--blue);flex:none;line-height:1;}
details[open] summary::after{content:"\2013";}
details[open] summary{color:var(--blue-deep);}
details .ans{padding-block-end:var(--s5);}
details p{font-size:14.5px;color:var(--ink-soft);margin:0 0 var(--s3);}
details p:last-child{margin-block-end:0;}

/* ── contact ─────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-block-start:var(--s6);}
@media(min-width:820px){.contact{grid-template-columns:repeat(3,1fr);}}
.ccard{background:var(--paper-pure);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;}
.ccard h3{font-size:16.5px;}
.ccard p{font-size:14px;color:var(--ink-soft);flex:1;max-width:none;}
.ccard .who{font-size:12px;color:var(--grey);margin:0 0 var(--s3);flex:none;}

/* ── close / footer ──────────────────────────────────── */
.close{text-align:center;}
.close h2,.close .lede{margin-inline:auto;}
.close .lede{margin-block-end:var(--s6);}
.close .cta-row{justify-content:center;}
footer{border-block-start:1px solid var(--ink);padding:var(--s7) 0 var(--s8);font-size:13.5px;color:var(--grey);}
.fg{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-start;}
footer a{color:var(--ink-soft);text-decoration:none;}
footer a:hover{color:var(--blue);}
footer .fnav{display:grid;gap:7px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}