/* fawz.sa — platform reframe (Oct 2026). Loaded after style.css on every page. */
:root{
  --ph-mit:#3FB39B;   /* mitigation  */
  --ph-prep:#5B9BE0;  /* preparedness */
  --ph-resp:#E7604F;  /* response    */
  --ph-rec:#C9A227;   /* recovery    */
}

/* ---------- header: logo | tagline | lang, then a nav row ---------- */
header .nav{height:auto;padding:10px 0 6px}
.navrow{display:flex;justify-content:center;gap:6px 28px;flex-wrap:wrap;padding:8px 0 12px;border-top:1px solid var(--elev)}
.navrow a{color:var(--muted);font-weight:600;font-size:.98rem;padding:2px 0;border-bottom:2px solid transparent}
.navrow a:hover{color:var(--gold-l)}
.navrow a.active{color:var(--gold-l);border-bottom-color:var(--gold)}
@media(max-width:640px){
  .navrow{gap:4px 18px;padding:6px 0 10px}
  .navrow a{font-size:.9rem}
}

/* ---------- hero cycle visual ---------- */
.cycle{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:84px;row-gap:56px;background:var(--surface);border:1px solid var(--elev);border-radius:var(--radius);padding:18px}
.cycle .ph{border-radius:12px;padding:16px 16px 14px;background:var(--bg);border-top:4px solid var(--c);min-height:132px}
.cycle .ph .k{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--c)}
.cycle .ph h3{font-size:1.08rem;margin:4px 0 6px;color:var(--ink)}
.cycle .ph p{font-size:.84rem;color:var(--muted);line-height:1.5}
.cycle .hub{position:absolute;inset:0;margin:auto;width:96px;height:96px;border-radius:50%;background:var(--gold);color:var(--bg);display:grid;place-items:center;text-align:center;font-weight:800;font-size:.76rem;line-height:1.3;padding:10px;box-shadow:0 0 0 6px var(--surface)}
.cycle::before{content:"";position:absolute;inset:0;margin:auto;width:170px;height:170px;border:2px dashed rgba(201,162,39,.45);border-radius:50%;pointer-events:none}
.cycle .ph{position:relative;z-index:1}
.ph.mit{--c:var(--ph-mit)}.ph.prep{--c:var(--ph-prep)}.ph.resp{--c:var(--ph-resp)}.ph.rec{--c:var(--ph-rec)}
@media(max-width:520px){
  .cycle{grid-template-columns:1fr;row-gap:12px}
  .cycle::before{display:none}
  .cycle .hub{position:static;width:auto;height:auto;border-radius:12px;box-shadow:none;order:5}
  .cycle .ph.mit{order:1}.cycle .ph.prep{order:2}.cycle .ph.resp{order:3}.cycle .ph.rec{order:4}
}

/* ---------- phase columns (home + platform) ---------- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
@media(max-width:1000px){.phases{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.phases{grid-template-columns:1fr}}
.phase{background:var(--surface);border:1px solid var(--elev);border-top:4px solid var(--c);border-radius:var(--radius);padding:22px 20px}
.phase .k{font-size:.74rem;font-weight:800;letter-spacing:.08em;color:var(--c)}
.phase h3{font-size:1.2rem;margin:4px 0 4px}
.phase .q{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.phase ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.phase li{font-size:.92rem;line-height:1.45;padding-inline-start:16px;position:relative}
.phase li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--c)}
.phase li small{display:block;color:var(--muted);font-size:.8rem}
.phase.mit{--c:var(--ph-mit)}.phase.prep{--c:var(--ph-prep)}.phase.resp{--c:var(--ph-resp)}.phase.rec{--c:var(--ph-rec)}
.loopnote{margin-top:18px;background:var(--elev);border-radius:12px;padding:14px 18px;color:var(--ink);font-size:.95rem;display:flex;gap:12px;align-items:center}
.loopnote b{color:var(--gold-l)}
.loopnote .ic{font-size:1.4rem;color:var(--gold-l)}

/* ---------- standards strip ---------- */
.stds{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 14px}
.std{background:var(--surface);border:1px solid var(--elev);border-radius:10px;padding:10px 14px;min-width:150px}
.std b{display:block;color:var(--gold-l);font-family:var(--f-en);font-size:.95rem}
.std span{color:var(--muted);font-size:.82rem}
.honest{color:var(--muted);font-size:.88rem;border-inline-start:3px solid var(--gold);padding-inline-start:12px;max-width:52em}

/* ---------- sector grid: 4 cards ---------- */
.vertgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.vertgrid.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vertgrid.four{grid-template-columns:1fr}}
.vertcard .newpill{position:absolute;inset-inline-end:16px;top:16px;font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--bg);background:var(--gold-l);border-radius:999px;padding:3px 12px}

/* ---------- page hero (inner pages) ---------- */
.phero{padding:40px 0 10px}
.phero h1{font-size:clamp(1.8rem,4vw,2.8rem)}
.phero .lede{max-width:44em}

/* ---------- module cards (platform) ---------- */
.modgroup{margin-top:34px}
.modgroup>.gh{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;border-bottom:1px solid var(--elev);padding-bottom:10px}
.modgroup>.gh .k{font-size:.74rem;font-weight:800;letter-spacing:.08em;color:var(--c)}
.modgroup>.gh h2{margin:0;font-size:1.4rem}
.modgroup.mit{--c:var(--ph-mit)}.modgroup.prep{--c:var(--ph-prep)}.modgroup.resp{--c:var(--ph-resp)}.modgroup.rec{--c:var(--ph-rec)}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.mods{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mods{grid-template-columns:1fr}}
.mod{background:var(--surface);border:1px solid var(--elev);border-inline-start:3px solid var(--c);border-radius:12px;padding:18px}
.mod h3{font-size:1.02rem;margin-bottom:6px;color:var(--ink)}
.mod h3 .en{font-family:var(--f-en);font-weight:600;color:var(--muted);font-size:.78rem;margin-inline-start:6px}
.mod p{color:var(--muted);font-size:.9rem;line-height:1.55}

/* ---------- loop diagram ---------- */
.loop{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:22px}
.loop .n{background:var(--surface);border:1px solid var(--elev);border-radius:10px;padding:10px 14px;font-weight:700;font-size:.92rem}
.loop .n.hub{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.loop .a{color:var(--gold);font-weight:800}
html[dir="rtl"] .loop .a{transform:scaleX(-1)}

/* ---------- mapping table ---------- */
.tablewrap{overflow-x:auto;margin-top:18px;border:1px solid var(--elev);border-radius:12px}
table.map{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
table.map th,table.map td{padding:11px 14px;border-bottom:1px solid var(--elev);text-align:start;vertical-align:top}
table.map th{color:var(--gold-l);background:var(--surface);font-size:.85rem}
table.map td{color:var(--muted)}
table.map td:first-child{color:var(--ink);font-weight:700}
table.map tr:last-child td{border-bottom:none}
table.map .cl{font-family:var(--f-en);direction:ltr;unicode-bidi:isolate}

/* ---------- dashboards chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:var(--surface);border:1px solid var(--elev);border-radius:999px;padding:7px 14px;font-size:.88rem}

/* ---------- crowd page ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:900px){.three{grid-template-columns:1fr}}
.col{background:var(--surface);border:1px solid var(--elev);border-radius:var(--radius);padding:22px}
.col h3{font-size:1.1rem;margin-bottom:12px}
.col.take{border-top:4px solid var(--ph-prep)}
.col.add{border-top:4px solid var(--gold)}
.col.never{border-top:4px solid var(--ph-resp)}
.col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.col li{font-size:.93rem;color:var(--muted);padding-inline-start:20px;position:relative}
.col li::before{position:absolute;inset-inline-start:0;font-weight:800}
.col.take li::before{content:"←";color:var(--ph-prep)}
html[dir="ltr"] .col.take li::before,html[lang="en"] .col.take li::before{content:"→"}
.col.add li::before{content:"✓";color:var(--ok)}
.col.never li::before{content:"✕";color:var(--alert)}
.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:22px}
.chain .s{flex:1 1 150px;background:var(--surface);border:1px solid var(--elev);border-radius:12px;padding:14px 16px;position:relative}
.chain .s b{display:block;color:var(--gold-l);margin-bottom:4px}
.chain .s span{color:var(--muted);font-size:.86rem}
.chain .s .st{font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.06em}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
@media(max-width:700px){.ladder{grid-template-columns:1fr}}
.rung{border-radius:12px;padding:16px 18px;background:var(--surface);border:1px solid var(--elev);border-top:5px solid var(--rc)}
.rung b{color:var(--rc);display:block;margin-bottom:6px;font-size:1.02rem}
.rung p{color:var(--muted);font-size:.9rem}
.rung.g{--rc:#2ECC71}.rung.a{--rc:#F0B429}.rung.r{--rc:#E7604F}
.statusnote{margin-top:26px;background:var(--elev);border-radius:12px;padding:16px 20px;color:var(--ink);font-size:.95rem}
.statusnote b{color:var(--gold-l)}

/* keep the side gutter on hero sections (.wrap padding was overridden by .hero/.phero) */
section.wrap.hero,section.wrap.phero{padding-inline:22px}

/* ---------- problem: today vs with Fawz ---------- */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media(max-width:800px){.pains{grid-template-columns:1fr}}
.pain{display:grid;grid-template-rows:auto auto;border:1px solid var(--elev);border-radius:var(--radius);overflow:hidden}
.pain .now{background:var(--bg);padding:16px 18px;color:var(--muted);font-size:.93rem}
.pain .fix{background:var(--surface);padding:16px 18px;color:var(--ink);font-size:.95rem;border-top:1px dashed rgba(201,162,39,.4)}
.pain .tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;border-radius:999px;padding:2px 10px;margin-inline-end:8px;vertical-align:1px}
.pain .now .tag{background:rgba(231,76,60,.15);color:#ff9c8f;border:1px solid rgba(231,76,60,.5)}
.pain .fix .tag{background:var(--gold);color:var(--bg)}
.cta.ghost-dark{background:transparent;color:var(--bg);border:1.5px solid var(--bg)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.faq details{background:var(--surface);border:1px solid var(--elev);border-radius:12px;padding:0 18px}
.faq summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-l);font-weight:800;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:.95rem;padding:0 0 16px}
.faq summary:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px;border-radius:6px}

/* ---------- sector pages ---------- */
.codegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.codegrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.codegrid{grid-template-columns:1fr}}
.codecard{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--elev);border-inline-start:4px solid var(--cc);border-radius:12px;padding:14px 16px}
.codecard .dot{flex:0 0 14px;height:14px;border-radius:50%;background:var(--cc);margin-top:5px;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.codecard b{display:block;color:var(--ink);font-size:1rem}
.codecard span{color:var(--muted);font-size:.88rem;line-height:1.45}
.lvls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.lvls{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.lvls{grid-template-columns:1fr}}
.lvl{background:var(--surface);border:1px solid var(--elev);border-radius:12px;padding:18px}
.lvl .n{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--bg);display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.lvl b{display:block;margin-bottom:6px}
.lvl p{color:var(--muted);font-size:.9rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:800px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--elev);border-radius:var(--radius);padding:22px}
.stat .big{font-family:var(--f-en);font-weight:800;font-size:1.9rem;color:var(--gold-l);margin-bottom:8px}
.stat p{color:var(--ink);font-size:.95rem}
.stat small{display:block;color:var(--muted);font-size:.78rem;margin-top:10px}