/* Bedu layer v2 — the canvas model.
   Bedu is the ground: a flat sand canvas with text and Isotype pictograms printed on it, no cards.
   The client's experience floats above it in .bd-sheet elements with layered shadows and never moves.
   Only .bd-print layers drift (max 4px) via bedu-drift.js. Every class starts with bd-; logical properties mirror RTL. */

.bd{
  --bd-display:var(--font-display);
  --bd-text:var(--font-text);
  --bd-track:1;
  font-family:var(--bd-text);color:var(--ink);-webkit-font-smoothing:antialiased;box-sizing:border-box;
}
.bd *,.bd *::before,.bd *::after{box-sizing:border-box}
.bd:lang(ar),.bd :lang(ar){--bd-display:var(--font-ar-display);--bd-text:var(--font-ar);--bd-track:0}
.bd :where(h1,h2,h3,h4,p){margin:0}
.bd :focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- Canvas, print layer, floating sheet ---------- */
.bd-canvas{background:var(--sand);color:var(--ink);padding-block:var(--space-6);
  padding-inline:max(var(--space-6),env(safe-area-inset-left,0px)) max(var(--space-6),env(safe-area-inset-right,0px))}
.bd-print{position:relative;transform:translate3d(var(--bd-dx,0px),calc(var(--bd-dy,0px) + var(--bd-sy,0px)),0);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.bd-sheet{position:relative;isolation:isolate;width:100%;max-width:var(--layout-max);margin-inline:auto;border-radius:var(--radius-sheet);overflow:hidden;box-shadow:var(--float)}
.bd-sheet.is-back{box-shadow:var(--float-back)}
@media (max-width:640px){
  .bd-canvas{padding-inline:max(var(--gutter-phone),env(safe-area-inset-left,0px)) max(var(--gutter-phone),env(safe-area-inset-right,0px));padding-block:20px}
  .bd-sheet{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.bd-print{transform:none;transition:none}}

/* ---------- Mark + "Pitch by Bedu" ---------- */
.bd-mark{display:block;flex:none;width:16px;height:20px}
.bd-by{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink-2);text-decoration:none;
  font:600 10.5px/1 var(--bd-text);letter-spacing:calc(.16em * var(--bd-track));text-transform:uppercase}
.bd-by:lang(ar),.bd:lang(ar) .bd-by{font-size:12.5px}
@media (max-width:640px){.bd-by .bd-by-text{display:none}}
.bd-by.is-compact .bd-by-text{display:none}

/* ---------- Act counter (Isotype squares) ---------- */
.bd-counter{display:inline-flex;gap:var(--space-1)}
.bd-counter i{display:block;width:var(--counter-square);height:var(--counter-square);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bd-counter i.on{background:var(--ink)}

/* ---------- Printed act heading (the chapter card) ---------- */
.bd-act{display:grid;gap:6px;width:100%;max-width:var(--layout-max);margin-inline:auto}
.bd-act-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.bd-act-k{font:600 10.5px/1 var(--bd-text);letter-spacing:calc(.16em * var(--bd-track));text-transform:uppercase;color:var(--ink-2)}
.bd-act:lang(ar) .bd-act-k{font-size:12.5px}
.bd-act-title{font:600 clamp(52px,9vw,76px)/.95 var(--bd-display);letter-spacing:calc(-.02em * var(--bd-track));text-wrap:balance}
.bd-act:lang(ar) .bd-act-title{font-weight:700;line-height:1.15;font-size:clamp(46px,8vw,70px)}
.bd-act-purpose{margin-top:4px;font:500 17px/1.35 var(--bd-text)}
.bd-act-kpi{font:400 13.5px/1.5 var(--bd-text);color:var(--ink-2);max-width:var(--measure)}
.bd-act:lang(ar) .bd-act-purpose,.bd-act:lang(ar) .bd-act-kpi{line-height:1.7}

/* ---------- Badge: pictogram + label ---------- */
.bd-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--system);
  font:600 10.5px/1 var(--bd-text);letter-spacing:calc(.16em * var(--bd-track));text-transform:uppercase}
.bd-badge svg,.bd-key svg{width:var(--pictogram);height:var(--pictogram);flex:none;display:block;fill:currentColor}
.bd-badge:lang(ar),.bd:lang(ar) .bd-badge{font-size:12.5px}
.bd [data-type=creative]{color:var(--creative)} .bd [data-type=agentic]{color:var(--agentic)} .bd [data-type=joker]{color:var(--joker)}
.bd [data-type=conversion],.bd [data-type=crm]{color:var(--conversion)} .bd [data-type=system]{color:var(--system)}

/* ---------- Printed section bar ---------- */
.bd-bar{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding-top:10px;border-top:1px solid var(--hair);max-width:var(--layout-max);margin-inline:auto}
.bd-bar-no{font:500 18px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.bd-bar-title{font:500 clamp(16px,2.4vw,19px)/1.2 var(--bd-display);color:var(--ink)}
.bd-bar:lang(ar) .bd-bar-title{font-weight:600;line-height:1.4}

/* ---------- Printed pitch note ---------- */
.bd-note{width:100%;display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;max-width:var(--layout-max);margin-inline:auto;font:400 14.5px/1.55 var(--bd-text);color:var(--ink)}
.bd-note::before{content:attr(data-label);font:600 10.5px/1.5 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.bd-note:lang(ar){line-height:1.7}
.bd-note:lang(ar)::before{font-family:var(--font-ar);font-size:12.5px;letter-spacing:0;text-transform:none}
.bd-note p{max-width:var(--measure)}
@media (max-width:640px){.bd-note{grid-template-columns:1fr;gap:6px}}
.bd-notes-off .bd-note{display:none}

/* ---------- Legend (map key) ---------- */
.bd-key{width:100%;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);padding-top:12px;border-top:1px solid var(--hair);max-width:var(--layout-max);margin-inline:auto}
.bd-key span{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--bd-text);letter-spacing:calc(.1em * var(--bd-track));text-transform:uppercase;color:var(--ink-2)}
.bd-key span svg{fill:currentColor}

/* ---------- Isotype count (KPIs as repeated units) ---------- */
.bd-count{display:grid;gap:10px}
.bd-count-cap{font:600 10.5px/1.4 var(--bd-text);letter-spacing:calc(.16em * var(--bd-track));text-transform:uppercase;color:var(--ink-2)}
.bd-count-row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;font:500 12.5px/1.2 var(--bd-text);color:var(--ink-2)}
.bd-count-row span:last-child{display:flex;flex-wrap:wrap;gap:var(--space-1);color:var(--agentic)}
.bd-count-row.is-before span:last-child{color:var(--mist)}
.bd-count-row svg{width:22px;height:22px;fill:currentColor;display:block}

/* ---------- Printed bands: plan and results ---------- */
.bd-band{width:100%;display:grid;gap:var(--space-4);max-width:var(--layout-max);margin-inline:auto;padding-block:var(--space-7)}
.bd-band-title{font:600 clamp(30px,5vw,44px)/1 var(--bd-display);letter-spacing:calc(-.02em * var(--bd-track));text-wrap:balance}
.bd-band:lang(ar) .bd-band-title{font-weight:700;line-height:1.3}
.bd-lead{font:400 15px/1.55 var(--bd-text);color:var(--ink-2);max-width:var(--measure)}
.bd-plan,.bd-metrics,.bd-pilot{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border-top:1px solid var(--hair)}
.bd-pilot{--cols:4}
.bd-plan>div,.bd-metrics>div,.bd-pilot>div{display:grid;gap:8px;align-content:start;padding:16px 18px 4px;min-width:0;border-inline-start:1px solid var(--hair)}
.bd-plan>div:first-child,.bd-metrics>div:first-child,.bd-pilot>div:first-child{border-inline-start:0;padding-inline-start:0}
.bd-plan h3{font:500 24px/1.1 var(--bd-display)}
.bd-plan p,.bd-pilot p{font:400 13.5px/1.5 var(--bd-text);color:var(--ink-2)}
.bd-metrics b{font:500 44px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bd-metrics span{font:400 13.5px/1.4 var(--bd-text);color:var(--ink-2)}
.bd-small{font:600 10.5px/1.3 var(--bd-text);letter-spacing:calc(.16em * var(--bd-track));text-transform:uppercase;color:var(--ink-2)}
.bd-pilot b{font:500 17px/1.2 var(--bd-display)}
@media (max-width:760px){.bd-plan,.bd-metrics{--cols:1}.bd-pilot{--cols:2}
  .bd-plan>div,.bd-metrics>div{border-inline-start:0;padding-inline:0;border-top:1px solid var(--hair)}
  .bd-plan>div:first-child,.bd-metrics>div:first-child{border-top:0}}
@media (max-width:420px){.bd-pilot{--cols:1}.bd-pilot>div{border-inline-start:0;padding-inline:0}}

/* ---------- Pitch-notes switch (Bedu control) ---------- */
.bd-switch{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--hair);border-radius:var(--radius-control);background:var(--paper);color:var(--ink);
  font:600 10.5px/1 var(--bd-text);letter-spacing:calc(.14em * var(--bd-track));text-transform:uppercase;cursor:pointer}
.bd-switch[aria-pressed=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}