/* ==========================================================================
   Adline — design system v2 · "atelier"
   Light, calm, bilingual. Nile-teal actions, saffron for money & AI-at-work.
   One type family (Rubik) covers Latin and Arabic so the UI never switches
   voice mid-sentence; IBM Plex Mono only where a number must line up.
   Class contract kept from v1: card/hd/bd · f · btn(primary|ghost|danger|sm|
   block) · grid g2 g3 g4 · row spread · tiny dim muted eyebrow kicker mono ·
   tag chip · tabs pane · empty · topbar · drop assets asset · toast.
   ========================================================================== */

:root{
  color-scheme:light;
  /* ground & surfaces */
  --bg:#F5F6F3;
  --bg-2:#ECEEEA;
  --panel:#FFFFFF;
  --panel-2:#F8F9F7;
  --line:#E2E5E0;
  --line-2:#CDD2CB;
  /* ink */
  --txt:#111518;
  --txt-2:#4B5560;
  --txt-3:#7B8591;
  /* action: Nile teal */
  --acc:#5E296D;
  --acc-2:#4A2058;
  --acc-tint:#E5D9E8;
  --acc-ink:#FFFFFF;
  /* signals */
  --gold:#E15D32;   --gold-tint:#F9E0D6;   /* money · AI at work */
  --ok:#1E9E5A;     --ok-tint:#DDF5E7;
  --red:#D3452B;    --red-tint:#FBE4DF;
  --blue:#2F6FED;   --blue-tint:#E3ECFD;
  /* legacy aliases (v1 blocks still reference these) */
  --ink:var(--bg); --ink-2:var(--panel-2); --lime:var(--ok); --acc-dim:var(--acc-tint);
  /* shape & depth */
  --r:14px; --r-sm:10px; --r-xs:8px;
  --shadow:0 1px 2px rgba(17,21,24,.04), 0 8px 24px -16px rgba(17,21,24,.18);
  --shadow-lg:0 12px 40px -18px rgba(17,21,24,.28);
  --ring:0 0 0 3px rgba(94,41,109,.18);
  /* type */
  --disp:"Manrope","Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope","Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* layout */
  --rail:232px; --tabs-h:64px; --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100%;background:var(--bg);color:var(--txt);
  font-family:var(--body);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
:where(a){color:inherit;text-decoration:none}
img,video{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
[dir="rtl"],.ar{font-family:var(--body)}
::selection{background:var(--acc-tint)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.15;color:var(--txt)}
h1{font-size:28px;letter-spacing:-.02em}
h2{font-size:20px}
h3{font-size:15px}
h4{font-size:13.5px}
p{max-width:68ch}
.lead{font-size:15.5px;color:var(--txt-2)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.01em}
.eyebrow{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.kicker{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.muted{color:var(--txt-2)}
.dim{color:var(--txt-3)}
.tiny{font-size:12px}
.small{font-size:13px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--line);margin:18px 0}
.kbd{font-family:var(--mono);font-size:11px;background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px}
.note{font-size:12.5px;color:var(--txt-2);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.pre{white-space:pre-wrap;font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}

/* ---------- shell ---------- */
.shell{position:relative;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{
  position:sticky;top:0;height:100vh;overflow:auto;
  background:var(--panel);border-right:1px solid var(--line);
  padding:18px 12px 16px;display:flex;flex-direction:column;gap:6px;
}
.brandmark{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
.brandmark .dot{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#3AA79F);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.brandmark b{font-family:var(--disp);font-size:18px;letter-spacing:-.02em;font-weight:700}
.brandmark span{font-size:10px;color:var(--txt-3);letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:-3px}

.rail .switch{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);margin:0 0 10px;cursor:pointer;
}
.rail .switch .blogo{width:30px;height:30px;font-size:12px}
.rail .switch b{display:block;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .switch small{display:block;font-size:11px;color:var(--txt-3)}
.rail .switch svg{margin-left:auto;width:14px;height:14px;color:var(--txt-3);flex:none}

.nav{display:flex;flex-direction:column;gap:2px}
.nav .lbl{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);padding:12px 10px 6px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:var(--txt-2);
  font-size:13.5px;font-weight:500;transition:background .14s,color .14s;
}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:var(--panel-2);color:var(--txt)}
.nav a.on{background:var(--acc-tint);color:var(--acc-2);font-weight:600}
.nav a.on svg{opacity:1}
.nav .sep{height:1px;background:var(--line);margin:10px 6px}
.nav .badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:1px 7px;color:var(--txt-3)}
.nav a.on .badge{background:#fff;color:var(--acc-2);border-color:transparent}
.rail .foot{margin-top:auto;padding:12px 10px 0;font-size:11.5px;color:var(--txt-3);border-top:1px solid var(--line)}
.rail .foot b{display:block;color:var(--txt-2);font-weight:600}

/* collapsible "more" inside the sidebar */
.nav-more{position:relative}
.nav-more > a{cursor:pointer}
.nav-more-menu{display:none;flex-direction:column;gap:2px;padding:2px 0 4px 12px}
.nav-more.open .nav-more-menu{display:flex}
.nav-more-menu a{font-size:13px;padding:7px 10px}
.nav-more .caret{margin-left:auto;transition:transform .16s}
.nav-more.open .caret{transform:rotate(180deg)}

.main{padding:26px 32px 96px;max-width:1180px;width:100%;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.topbar > div:first-child{min-width:0}
.topbar .sub{color:var(--txt-2);font-size:13.5px;margin-top:6px;max-width:62ch}
.topbar .actions,.topbar .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.topbar h1 + .sub{margin-top:4px}

/* mobile chrome */
.mtop{display:none}
.mtabs{display:none}
.rail-backdrop{display:none}

/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card .hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card .hd h3{font-size:15px}
.card .bd{padding:18px}
.card.flat{box-shadow:none}
.card.tint{background:var(--acc-tint);border-color:transparent}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
/* two-column "form + preview" pages: sidebar column collapses first */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.split.rev{grid-template-columns:340px minmax(0,1fr)}
.split > .sticky{position:sticky;top:20px}

/* ---------- controls ---------- */
label.f{display:block;margin-bottom:14px}
label.f > span{display:block;font-size:12.5px;color:var(--txt-2);margin-bottom:6px;font-weight:500}
label.f > em{display:block;font-size:12px;color:var(--txt-3);font-style:normal;margin-top:5px;line-height:1.45}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=number],input[type=url],input[type=search],select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--txt);
  border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:14px;transition:border-color .14s,box-shadow .14s;
  min-height:42px;
}
textarea{min-height:88px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:#A2AAB4}
input:disabled,select:disabled,textarea:disabled{background:var(--panel-2);color:var(--txt-3)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%237B8591' stroke-width='1.6' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
[dir="rtl"] select{background-position:left 12px center;padding-right:12px;padding-left:32px}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);width:16px;height:16px;vertical-align:-3px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line-2);color:var(--txt);
  padding:9px 15px;min-height:40px;border-radius:var(--r-sm);font:inherit;font-size:13.5px;font-weight:600;
  transition:background .14s,border-color .14s,transform .12s,box-shadow .14s;
}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:var(--txt-3);background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{background:var(--acc-2);border-color:var(--acc-2);box-shadow:0 8px 20px -10px rgba(94,41,109,.6)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--txt-2)}
.btn.ghost:hover{background:var(--panel-2);color:var(--txt);border-color:transparent}
.btn.soft{background:var(--acc-tint);border-color:transparent;color:var(--acc-2)}
.btn.soft:hover{background:#CFEAE7}
.btn.danger{color:var(--red);border-color:#EFC7BF;background:#fff}
.btn.danger:hover{background:var(--red-tint);border-color:var(--red)}
.btn.sm{padding:6px 11px;min-height:32px;font-size:12.5px;border-radius:var(--r-xs)}
.btn.lg{padding:12px 20px;min-height:48px;font-size:15px;border-radius:12px}
.btn.block{width:100%}
.btn.icon{padding:0;width:40px}
.btn.sm.icon{width:32px}
.btn .spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  cursor:pointer;user-select:none;font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:99px;
  border:1px solid var(--line-2);color:var(--txt-2);background:var(--panel);transition:.14s;min-height:34px;display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{color:var(--txt);border-color:var(--txt-3)}
.chip.on{background:var(--acc-tint);border-color:var(--acc);color:var(--acc-2);font-weight:600}
.chip input{display:none}
.chip .px{font-family:var(--mono);font-size:10.5px;opacity:.7}

/* segmented control (buttons in a group) */
.seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.seg button{background:var(--panel);border:1px solid var(--line-2);color:var(--txt-2);border-radius:var(--r-xs);padding:8px 12px;min-height:38px;font-size:13px;font-weight:500;cursor:pointer;transition:.14s}
.seg button:hover{border-color:var(--txt-3);color:var(--txt)}
.seg button.on{background:var(--acc-tint);border-color:var(--acc);color:var(--acc-2);font-weight:600}

/* switch */
.switch-ui{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px}
.switch-ui input{position:absolute;opacity:0;width:0;height:0}
.switch-ui i{width:38px;height:22px;border-radius:99px;background:var(--line-2);position:relative;transition:.16s;flex:none}
.switch-ui i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.16s}
.switch-ui input:checked + i{background:var(--acc)}
.switch-ui input:checked + i::after{left:19px}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--txt-2);white-space:nowrap}
.tag.tof,.tag.blue{color:var(--blue);background:var(--blue-tint);border-color:transparent}
.tag.mof,.tag.gold{color:#8A6100;background:var(--gold-tint);border-color:transparent}
.tag.bof,.tag.acc{color:var(--acc-2);background:var(--acc-tint);border-color:transparent}
.tag.ok{color:#146B3D;background:var(--ok-tint);border-color:transparent}
.tag.err,.tag.red{color:#9E2E19;background:var(--red-tint);border-color:transparent}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--txt-3)}
.dot.ok{background:var(--ok)} .dot.err{background:var(--red)} .dot.gold{background:var(--gold)} .dot.acc{background:var(--acc)}

/* sliders */
.slider{margin-bottom:16px}
.slider .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--txt-3);margin-bottom:4px}
.slider .lbl b{color:var(--txt-2);font-weight:600}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--acc),var(--line-2));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:pointer}

/* progress */
.progress{height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width .4s ease}
.progress.gold i{background:var(--gold)}
.progress.striped i{background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%);background-size:16px 16px;animation:stripe 1s linear infinite}
@keyframes stripe{to{background-position:16px 0}}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--txt-3);flex:none;
  padding:11px 13px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:.14s;margin-bottom:-1px
}
.tabs button:hover{color:var(--txt)}
.tabs button.on{color:var(--acc-2);border-bottom-color:var(--acc);font-weight:600}
.tabs button .n{font-family:var(--mono);font-size:10.5px;color:var(--txt-3);margin-right:6px}
.pane{display:none}
.pane.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- empty states: what · why · one action ---------- */
.empty{
  text-align:center;padding:38px 22px;color:var(--txt-2);
  border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--panel-2);
}
.empty .ico{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 12px;font-size:20px}
.empty h3{font-size:16px;margin-bottom:6px;color:var(--txt)}
.empty p{margin:0 auto 14px;font-size:13.5px;max-width:44ch}
.empty .btn{margin:2px 4px}

/* ---------- collapsible cards ---------- */
details.card > summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:600;font-size:15px;font-family:var(--disp);display:flex;align-items:center;gap:10px;color:var(--txt)}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--txt-3);border-bottom:2px solid var(--txt-3);transform:rotate(45deg);margin-left:auto;margin-right:4px;transition:transform .16s;flex:none}
details.card[open] > summary{border-bottom:1px solid var(--line)}
details.card[open] > summary::after{transform:rotate(-135deg)}
details.card > summary.hd{padding:14px 18px}
details.card > summary .tag,details.card > summary .tiny{margin-left:8px}

/* ---------- notices ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);font-size:13.5px}
.notice > .ico{flex:none;font-size:16px;line-height:1.3}
.notice b{font-weight:600}
.notice .btn{margin-left:auto;flex:none}
.notice.info{background:var(--blue-tint);border-color:transparent}
.notice.warn{background:var(--gold-tint);border-color:transparent}
.notice.err{background:var(--red-tint);border-color:transparent}
.notice.ok{background:var(--ok-tint);border-color:transparent}
.notice.acc{background:var(--acc-tint);border-color:transparent}

/* ---------- KPI tiles & list rows ---------- */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kpi .v{font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.kpi .l{font-size:12px;color:var(--txt-3);margin-top:6px}
.kpi.gold .v{color:#8A6100}
.list{display:flex;flex-direction:column}
.list > .li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.list > .li:last-child{border-bottom:0}
.list > .li .t{flex:1;min-width:0}
.list > .li .t b{display:block;font-weight:600}
.list > .li .t small{display:block;color:var(--txt-3);font-size:12px}
.th{width:44px;height:44px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;flex:none;display:grid;place-items:center;font-size:18px}
.th img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- tables (stack on phones via data-label) ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3);font-weight:600;background:var(--panel-2)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm)}
.table-wrap .table th:first-child,.table-wrap .table td:first-child{padding-left:14px}

/* ---------- sticky action bar (thumb zone) ---------- */
.actionbar{
  position:sticky;bottom:12px;z-index:5;margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow-lg);
}
.actionbar .sum{font-weight:600;min-width:0}
.actionbar .sum small{display:block;font-weight:400;color:var(--txt-3);font-size:12px}
.actionbar .btn{margin-left:auto}

/* ---------- brand cards ---------- */
.bcard{position:relative;overflow:hidden;display:block;transition:transform .16s,box-shadow .16s,border-color .16s}
.bcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.bcard .bd{display:flex;gap:14px;align-items:flex-start}
.blogo{width:46px;height:46px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);flex:none;display:grid;place-items:center;overflow:hidden;font-family:var(--disp);font-size:18px;font-weight:600;color:var(--txt-2)}
.blogo img{width:100%;height:100%;object-fit:contain;padding:4px}
.swatches{display:flex;gap:4px;margin-top:10px}
.swatches i{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}
.ring{position:absolute;top:14px;right:14px}

/* ---------- assets ---------- */
.drop{
  border:1.5px dashed var(--line-2);border-radius:var(--r);padding:22px;text-align:center;color:var(--txt-2);
  cursor:pointer;transition:.14s;background:var(--panel-2);font-size:13.5px;
}
.drop:hover,.drop.over{border-color:var(--acc);color:var(--acc-2);background:var(--acc-tint)}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.asset{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;transition:transform .12s}
.asset img{width:100%;height:100%;object-fit:cover;display:block}
.asset:hover{transform:translateY(-1px)}
.asset.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-tint),0 0 0 3px var(--acc)}
.asset .x{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:7px;background:rgba(17,21,24,.7);color:#fff;display:grid;place-items:center;font-size:12px;opacity:0;transition:.14s}
.asset:hover .x,.asset:focus-within .x{opacity:1}
@media(hover:none){.asset .x{opacity:1}}
.asset .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 5px;font-size:10.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- results ---------- */
.variant{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:12px;overflow:hidden}
.variant .vh{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.variant .vb{padding:14px 16px}
.variant .hook{font-family:var(--disp);font-size:16.5px;font-weight:600;line-height:1.3;margin-bottom:9px}
.variant .body{white-space:pre-wrap;color:var(--txt-2);font-size:13.5px;margin-bottom:12px}
.variant .meta{display:grid;grid-template-columns:110px 1fr;gap:5px 12px;font-size:12.5px;border-top:1px dashed var(--line);padding-top:11px}
.variant .meta b{color:var(--txt-3);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.shot .im{background:var(--bg-2);display:grid;place-items:center;min-height:120px}
.shot img{width:100%;display:block}
.shot .ft{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--txt-3)}
.post{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;display:grid;grid-template-columns:190px minmax(0,1fr)}
.post + .post{margin-top:12px}
.post .im{background:var(--bg-2);display:grid;place-items:center;border-right:1px solid var(--line);min-height:150px;position:relative}
/* Show the whole creative, not a cropped slice of it — a 4:5 or 9:16 image in
   a narrow, caption-height column was being cover-cropped beyond recognition. */
.post .im img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.post .bd{padding:14px}
.post .ph{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.post .cap{white-space:pre-wrap;color:var(--txt-2);font-size:13.5px}
.post .tags{margin-top:8px;color:var(--blue);font-size:12.5px}
.doc h3{margin:22px 0 8px;font-size:16px}
.doc h3:first-child{margin-top:0}
.doc p{color:var(--txt-2);margin-bottom:9px}
.doc ul{margin:0 0 12px 18px;color:var(--txt-2)}
.doc li{margin-bottom:4px}
.doc table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:13px}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.doc th{background:var(--panel-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3);font-weight:600}

/* ---------- toasts ---------- */
.toasts{position:fixed;top:16px;right:16px;z-index:9000;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto}
.toast{background:var(--txt);color:#fff;border-radius:12px;padding:11px 14px;font-size:13.5px;box-shadow:var(--shadow-lg);animation:slideup .22s ease;display:flex;gap:10px;align-items:flex-start}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);margin-top:6px;flex:none}
.toast.err::before{background:var(--red)}
.toast.ok::before{background:var(--ok)}
.toast.warn::before{background:var(--gold)}
.jobs{position:fixed;bottom:calc(16px + var(--safe-b));right:16px;z-index:8000;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px));pointer-events:none}
.job{pointer-events:auto}
.job{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-lg);font-size:13px;animation:slideup .22s ease}
.job .bar{height:5px;background:var(--bg-2);border-radius:99px;margin:8px 0 6px;overflow:hidden}
.job .bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s}
.job small{color:var(--txt-3)}
.job .t{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.job .t span{font-family:var(--mono);font-size:12px;color:var(--txt-3)}
.job .msg{font-size:12.5px;color:var(--txt-2)}
.job.ok .bar i{background:var(--ok)}
.job.err .bar i,.job.warn .bar i{background:var(--red)}
.job.warn .bar i{background:var(--gold)}

/* ---------- modal (AL.modal builds inline; these back the .modal markup) ---------- */
.modal-ov{position:fixed;inset:0;z-index:9500;background:rgba(17,21,24,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:40px 16px}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:860px;width:100%;box-shadow:var(--shadow-lg);animation:rise .18s ease}
.modal-box .mh{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);border-radius:16px 16px 0 0}
.modal-box .mb{padding:16px 18px}

/* ---------- journey (signature) ---------- */
.journey{--jn:5;position:relative}
.journey ol{list-style:none;display:grid;grid-template-columns:repeat(var(--jn),minmax(0,1fr));gap:6px;position:relative}
.journey ol::before{content:"";position:absolute;left:calc(100% / var(--jn) / 2);right:calc(100% / var(--jn) / 2);top:15px;height:2px;background:var(--line-2);z-index:0}
.journey ol::after{content:"";position:absolute;left:calc(100% / var(--jn) / 2);top:15px;height:2px;background:var(--acc);z-index:0;width:calc((100% - 100% / var(--jn)) * var(--jp,0));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.journey li{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.journey li a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--txt-3);font-size:12px;font-weight:500;padding:0 4px;border-radius:8px}
.journey .pt{width:32px;height:32px;border-radius:50%;background:var(--panel);border:2px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--txt-3);transition:.2s}
.journey li.done .pt{background:var(--acc);border-color:var(--acc);color:#fff}
.journey li.done a{color:var(--txt-2)}
.journey li.next .pt{border-color:var(--acc);color:var(--acc-2);box-shadow:0 0 0 6px var(--acc-tint);animation:pulse 2.2s ease-in-out infinite}
.journey li.next a{color:var(--acc-2);font-weight:600}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px var(--acc-tint)}50%{box-shadow:0 0 0 9px rgba(94,41,109,.08)}}
.journey small{display:block;font-weight:400;color:var(--txt-3);font-size:11px}
/* compact strip on brand pages */
.journey.strip{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px;margin-bottom:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.journey.strip .next-cta{display:flex;align-items:center;gap:10px;flex:none}
.journey.strip .next-cta .t{font-size:12.5px;color:var(--txt-2);text-align:right;max-width:26ch}
.journey.strip .next-cta .t b{display:block;color:var(--txt);font-weight:600}
/* hero on Home */
.journey.hero{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:var(--shadow)}
.journey.hero ol{margin:16px 0 4px}
.journey.hero .pt{width:40px;height:40px;font-size:14px}
.journey.hero li a{font-size:13px}

/* next-step card */
.nextstep{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;background:linear-gradient(135deg,var(--acc-tint),#fff);border:1px solid #CFE7E4;border-radius:16px;padding:18px 20px}
.nextstep .n{width:46px;height:46px;border-radius:14px;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:20px;flex:none}
.nextstep h3{font-size:16px;margin-bottom:3px}
.nextstep p{font-size:13.5px;color:var(--txt-2);margin:0}
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.quick a{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:.16s;min-height:112px}
.quick a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.quick a .ico{font-size:22px}
.quick a b{font-size:14px;font-weight:600}
.quick a small{color:var(--txt-3);font-size:12px;line-height:1.4}

/* ---------- toolkit (marketools) ---------- */
.tk-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:24px}
.tk-metric{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r-sm);padding:14px 16px}
.tk-metric .v{font-family:var(--disp);font-size:26px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.tk-metric .l{font-size:11px;color:var(--txt-3);letter-spacing:.06em;text-transform:uppercase;margin-top:5px}
.tk-metric.ok{border-left-color:var(--ok)} .tk-metric.blue{border-left-color:var(--blue)}
.tk-phase{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.tk-phase .num{font-family:var(--mono);font-size:11px;color:var(--txt-3);letter-spacing:.1em}
.tk-phase h2{font-size:16px}
.tk-phase .done{margin-left:auto;font-size:11.5px;color:var(--acc-2);font-weight:600}
.tk-phase .rule{flex:1;height:1px;background:var(--line)}
.tool-card{display:block;color:inherit;transition:border-color .14s,transform .14s,box-shadow .14s}
.tool-card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tool-card .icon{font-size:19px;color:var(--acc)}
.tool-card .bar{height:3px;background:var(--bg-2);border-radius:2px;margin-top:14px;overflow:hidden}
.tool-card .bar i{display:block;height:100%;width:0;background:var(--txt-3);transition:width .3s}
.tool-card .bar i.prog{width:50%;background:var(--gold)} .tool-card .bar i.done{width:100%;background:var(--ok)}
.card-status{font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--txt-3);white-space:nowrap;text-transform:uppercase}
.card-status.st-done{color:#146B3D;background:var(--ok-tint);border-color:transparent}
.card-status.st-in_progress{color:#8A6100;background:var(--gold-tint);border-color:transparent}
.tk-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.cb{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;min-height:104px;cursor:pointer;transition:border-color .14s,background .14s}
.cb:hover{border-color:var(--acc);background:var(--panel-2)}
.cb .h{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.cb .dot{width:7px;height:7px;border-radius:50%;flex:none}
.cb .lab{font-size:12px;font-weight:600;color:var(--txt-2)}
.cb .ar{font-size:10.5px;color:var(--txt-3);margin-bottom:8px}
.cb .pv{font-size:12px;color:var(--txt-2);line-height:1.7;word-break:break-word}
.cb .pv .ph{color:var(--txt-3);font-style:italic}
.cb .n{position:absolute;top:11px;right:12px;font-family:var(--mono);font-size:10.5px;color:var(--txt-3)}
.bmc{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto auto;gap:10px}
.swot-axis{display:flex;justify-content:space-around;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.12em}
.swot-grid{display:grid;grid-template-columns:34px 1fr 1fr;gap:12px}
.swot-side{writing-mode:vertical-rl;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--txt-3);display:flex;align-items:center;justify-content:center}
.swot-grid .cb{min-height:168px}
.swot-tally{display:flex;gap:20px;margin-top:14px;font-size:12px;color:var(--txt-3);font-family:var(--mono);flex-wrap:wrap}
.swot-tally i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.persona{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.persona.primary{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-tint)}
.persona .top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.persona .av{width:34px;height:34px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--txt-3);flex:none}
.persona .top input{flex:1;border:0;background:transparent;padding:0;min-height:0;font-family:var(--disp);font-size:15px;font-weight:600}
.persona-row{padding:7px 6px;border-radius:6px;cursor:pointer;transition:background .12s}
.persona-row:hover{background:var(--panel-2)}
.persona-row .h{display:flex;align-items:center;gap:6px}
.persona-row .pv{font-size:12px;color:var(--txt-2);padding-left:13px;line-height:1.7;margin-top:2px}
.tk-modal{position:fixed;inset:0;background:rgba(17,21,24,.45);backdrop-filter:blur(3px);z-index:9500;display:none;align-items:center;justify-content:center;padding:16px}
.tk-modal.show{display:flex;animation:fade .14s ease}
.tk-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(580px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:rise .18s cubic-bezier(.2,.8,.2,1)}
.tk-box .mh{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.tk-box .mh .dot{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none}
.tk-box .mh h3{font-size:16px}
.tk-box .mh .ar{font-size:11.5px;color:var(--txt-3)}
.tk-box .mh button{margin-left:auto;background:transparent;border:0;color:var(--txt-3);font-size:22px;cursor:pointer;line-height:1;width:32px;height:32px;border-radius:8px}
.tk-box .mh button:hover{background:var(--panel-2);color:var(--txt)}
.tk-box .mq{padding:14px 18px 0;font-size:13px;color:var(--txt-2)}
.tk-box .mq .ar{color:var(--txt-3);font-size:12px;margin-top:3px}
.tk-box .mb{padding:14px 18px;overflow:auto;flex:1}
.tk-box .mf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel-2);border-radius:0 0 15px 15px}
.tk-box .mf .cnt{font-family:var(--mono);font-size:11px;color:var(--txt-3);margin-right:auto}
.sug{font-size:12px;color:var(--txt-2);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 11px;cursor:pointer;transition:.12s;min-height:30px}
.sug:hover{border-color:var(--acc);color:var(--acc-2)}
.tk-item{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tk-item .grip{color:var(--txt-3);cursor:grab;font-size:12px;user-select:none}
.tk-item input{flex:1}
.tk-x{background:transparent;border:0;color:var(--txt-3);cursor:pointer;font-size:18px;padding:0 6px;min-height:36px}
.tk-x:hover{color:var(--red)}
.add-another{width:100%;margin-top:6px;background:transparent;border:1px dashed var(--line-2);color:var(--acc-2);border-radius:var(--r-xs);padding:9px;cursor:pointer;font-size:13px;font-weight:600;min-height:38px}
.add-another:hover{border-color:var(--acc);background:var(--acc-tint)}
.demo-group{margin-bottom:16px}
.demo-group>label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--txt-3);margin-bottom:7px;text-transform:uppercase}
.pick{display:flex;gap:7px;flex-wrap:wrap}
.pick button{background:var(--panel);border:1px solid var(--line-2);color:var(--txt-2);border-radius:var(--r-xs);padding:8px 13px;min-height:36px;font-size:12.5px;cursor:pointer;transition:.12s}
.pick button:hover{border-color:var(--txt-3)}
.pick button.on{background:var(--acc-tint);border-color:var(--acc);color:var(--acc-2);font-weight:600}
.tags-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.guide{display:flex;flex-direction:column;gap:12px;position:sticky;top:20px}
.guide-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.guide-box h4{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--txt-3);text-transform:uppercase;margin-bottom:8px}
.guide-box.green{background:var(--ok-tint);border-color:transparent}
.guide-box.gold{background:var(--gold-tint);border-color:transparent}

/* ---------- misc legacy ---------- */
.qblock{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.qs-step{display:flex;gap:12px;align-items:flex-start}
.block{display:block}
.err{color:var(--red)}
.ok{color:var(--ok)}
.v{font-family:var(--disp);font-weight:600}
.l{color:var(--txt-3);font-size:12px}
.spread{justify-content:space-between}
.sub{color:var(--txt-2)}
.doc-sec{margin-bottom:22px}
.on-hover-lift:hover{transform:translateY(-2px)}
.tabbar-fade{position:relative}
.wrap{max-width:1180px}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mob-only{display:none}
.desk-only{display:initial}
.tar{text-align:right} .tac{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split.rev,.tk-layout{grid-template-columns:1fr}
  .split > .sticky{position:static}
  .main{padding:22px 22px 96px}
}
@media(max-width:900px){
  .bmc{grid-template-columns:1fr;grid-template-rows:none}
  .bmc .cb{grid-column:1/-1!important;grid-row:auto!important}
}
@media(max-width:800px){
  :root{--rail:0px}
  .shell{grid-template-columns:1fr}
  .rail{
    position:fixed;inset:0 auto 0 0;width:min(84vw,320px);height:100dvh;z-index:9100;
    transform:translateX(-104%);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-lg);
  }
  .rail.open{transform:none}
  .rail-backdrop{display:block;position:fixed;inset:0;background:rgba(17,21,24,.4);z-index:9050;opacity:0;pointer-events:none;transition:opacity .2s}
  .rail-backdrop.show{opacity:1;pointer-events:auto}
  .mtop{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    background:rgba(245,246,243,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
    padding:10px 14px;min-height:54px;
  }
  .mtop .blogo{width:32px;height:32px;font-size:12px;border-radius:9px}
  .mtop .t{min-width:0;flex:1}
  .mtop .t b{display:block;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtop .t small{display:block;font-size:11px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtop .btn.icon{width:38px;min-height:38px;border-color:transparent;background:transparent}
  .mtabs{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:9000;
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + var(--safe-b));height:calc(var(--tabs-h) + var(--safe-b));
  }
  .mtabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--txt-3);border-radius:10px;padding:4px 2px}
  .mtabs a svg{width:22px;height:22px}
  .mtabs a.on{color:var(--acc-2);background:var(--acc-tint);font-weight:600}
  .main{padding:16px 14px calc(var(--tabs-h) + var(--safe-b) + 24px);max-width:100%}
  .topbar{margin-bottom:16px}
  .topbar h1{font-size:22px}
  .topbar .actions,.topbar .row{width:100%}
  .topbar .actions .btn,.topbar .row .btn{flex:1 1 auto}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .card .bd{padding:14px}
  .card .hd{padding:12px 14px}
  .post{grid-template-columns:1fr}
  .post .im{border-right:0;border-bottom:1px solid var(--line)}
  .journey li a{font-size:11px}
  .journey small{display:none}
  .journey.strip{grid-template-columns:1fr;padding:10px 12px 8px;margin-bottom:14px;gap:8px}
  .journey.strip .pt{width:26px;height:26px;font-size:11px}
  .journey.strip ol::before,.journey.strip ol::after{top:12px}
  .journey.strip .next-cta{justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;margin-top:0;gap:8px}
  .journey.strip .next-cta .t{text-align:left;font-size:12px}
  .journey.strip .next-cta .t b{display:inline}
  .journey.strip .next-cta .t b::after{content:" · ";color:var(--txt-3)}
  .journey.strip .next-cta .btn{padding:6px 11px;min-height:34px;font-size:12.5px;border-radius:var(--r-xs)}
  .nextstep{grid-template-columns:auto minmax(0,1fr)}
  .nextstep .btn{grid-column:1/-1;width:100%}
  .actionbar{position:fixed;left:10px;right:10px;bottom:calc(var(--tabs-h) + var(--safe-b) + 8px);margin:0}
  .actionbar .btn{flex:1}
  .toasts{top:auto;bottom:calc(var(--tabs-h) + var(--safe-b) + 84px);left:12px;right:12px;max-width:none}
  .jobs{bottom:calc(var(--tabs-h) + var(--safe-b) + 84px);left:12px;right:12px;max-width:none}
  .table:not(.keep) thead{display:none}
  .table:not(.keep) tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .table:not(.keep) td{display:flex;gap:10px;justify-content:space-between;border:0;padding:4px 8px}
  .table:not(.keep) td::before{content:attr(data-label);color:var(--txt-3);font-size:12px;flex:none}
  .variant .meta{grid-template-columns:1fr}
  .mob-only{display:initial}
  .desk-only{display:none!important}
  .modal-ov{padding:12px}
  .modal-box{border-radius:14px}
  /* safety net: inline fixed grids from older views collapse to one column */
  .grid[style*="grid-template-columns"],div[style*="grid-template-columns"]:not(.assets):not(.bmc):not(.journey ol):not(.mtabs){grid-template-columns:1fr!important}
  [style*="width:3"][style*="px"]:not(img):not(.blogo):not(.th){width:auto!important;max-width:100%}
  input,select,textarea{font-size:16px} /* stops iOS zoom */
}
@media(max-width:380px){
  .mtabs a{font-size:10px}
  .main{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .rail,.mtop,.mtabs,.actionbar,.toasts,.jobs{display:none!important}
  .shell{grid-template-columns:1fr}
  .main{padding:0;max-width:none}
}

/* Verdict + voice-example actions on an ad copy variant card */
.variant .v-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.variant .v-acts .btn.on{border-color:var(--acc);color:var(--acc-2);background:var(--acc-tint)}

/* Custom video length: a number box that sits inside the segmented control
   without breaking its row rhythm (item 5). */
.seg .vd-custom-secs{display:inline-flex;align-items:center;gap:6px;margin-inline-start:8px}
.seg .vd-custom-secs input[type=number]{width:88px;background:var(--panel);border:1px solid var(--acc);
  color:var(--txt);border-radius:var(--r-xs);padding:8px 10px;min-height:38px;font-size:13px;font-weight:600}
.seg .vd-custom-secs input[type=number]:focus{outline:2px solid var(--acc-tint);outline-offset:1px}

/* Ad-copy bulk actions: send every variant to the calendar in one go, and the
   link left behind after any send, so no variant is stranded (item 3). */
.vbulk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 14px}
.vbulk.sent{border-color:var(--acc);background:var(--acc-tint)}

/* Logo PNG exports (item 1). The transparent cell sits on a chequerboard so a
   failed key-out reads as a solid block instead of hiding against white. */
.logo-png-row{display:flex;gap:10px;flex-wrap:wrap}
.logo-png-cell{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px}
.logo-png-cell a{display:block;width:96px;height:96px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.logo-png-cell img{width:100%;height:100%;object-fit:contain}
.logo-png-cell.light a{background:#F7F7F5}
.logo-png-cell.dark  a{background:#101418}
.logo-png-cell.transparent a{background-color:#fff;background-image:
  linear-gradient(45deg,#d8d8d8 25%,transparent 25%),linear-gradient(-45deg,#d8d8d8 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#d8d8d8 75%),linear-gradient(-45deg,transparent 75%,#d8d8d8 75%);
  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.tiny.warn{color:var(--warn,#b8860b)}

/* ── Post cards (item 3) ─────────────────────────────────────────────
   .pic / .im-acts / .im-dl shipped with no styles at all: the image and the
   four buttons were loose grid children of .im, so the buttons spilled out of
   the 190px column on desktop and the whole block overlapped the next card on
   mobile. The image column is now a proper flex stack: picture on top, action
   buttons wrapping BELOW it, download pinned to the picture's corner. */
.post .im{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:10px;min-height:0}
.post .pic{position:relative;display:flex;align-items:center;justify-content:center;min-height:110px;background:var(--bg-2);border-radius:8px;overflow:hidden}
.post .pic img{max-width:100%;max-height:230px;width:auto;height:auto;object-fit:contain;display:block}
.post .pic .im-dl{position:absolute;right:6px;bottom:6px;padding:4px 9px;min-height:0;line-height:1.4;background:var(--panel);opacity:.92}
.post .im-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.post .im-acts .btn{padding:6px 9px;min-height:30px;font-size:12px;white-space:nowrap}
@media (max-width:760px){
  .post .im{border-right:0;border-bottom:1px solid var(--line)}
  .post .pic{min-height:90px}
  .post .pic img{max-height:200px}
}

/* ── Client-first logo step (item 1) ───────────────────────────────── */
.logo-langq{padding:26px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.logo-langq .row{justify-content:center;gap:12px}
.logo-langbtn{min-width:130px;font-size:15px}
.logo-cards .logo-card{display:flex;flex-direction:column}
.logo-hero{display:flex;align-items:center;justify-content:center;min-height:150px;background:#F7F7F5;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-direction:column;gap:8px}
.logo-hero img{max-width:100%;max-height:170px;object-fit:contain;display:block}
.logo-pack{border:1px solid var(--acc);background:var(--acc-tint);border-radius:var(--r-sm);padding:16px}
.logo-png-cell.icon a{width:64px;height:64px}

/* ── Library images pane (item 2) ──────────────────────────────────── */
.lib-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lib-img{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.lib-img a{display:block;aspect-ratio:1/1;background:var(--bg-2)}
.lib-img img{width:100%;height:100%;object-fit:cover;display:block}
.lib-img figcaption{display:flex;flex-direction:column;gap:2px;padding:7px 9px}

/* Ad-copy coverage matrix + script beats (long-form copy) */
.cov-matrix{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;background:var(--panel)}
.cov-grid{display:flex;flex-direction:column;gap:2px;overflow-x:auto;padding-bottom:4px}
.cov-row{display:flex;gap:2px;align-items:center}
.cov-cell{min-width:30px;height:24px;display:flex;align-items:center;justify-content:center;font-size:11.5px;border-radius:5px;background:var(--bg-2);color:var(--txt-3);flex:none}
.cov-cell.lbl{min-width:38px;background:none;justify-content:flex-start;color:var(--txt-2);font-weight:600}
.cov-row.head .cov-cell{background:none;font-weight:700;color:var(--txt-2)}
.cov-cell.on{color:#fff;font-weight:700}
.cov-cell.on.pain{background:var(--acc)}
.cov-cell.on.ben{background:#3b6fd4}
.beats{margin-top:10px;border-inline-start:2px solid var(--line-2);display:flex;flex-direction:column;gap:6px;padding-inline-start:10px}
.beat{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.beat .bt{flex:none;font-family:ui-monospace,monospace;font-size:11px;color:var(--acc-2);background:var(--acc-tint);border-radius:5px;padding:1px 6px}
.beat .bv{font-size:13px;color:var(--txt-2)}
.beat .bo{font-size:11.5px;color:var(--txt-3)}

/* Today's spend, always in view (sidebar, above the account line). */
.spend-chip{display:block;margin:0 14px 8px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;
  font-size:12px;color:var(--txt-2);text-align:center;text-decoration:none;background:var(--bg-2)}
.spend-chip:hover{border-color:var(--acc);color:var(--acc-2)}


/* ── RTL — Arabic UI ─────────────────────────────────────────────────────
   The shell is grid and the components are flex, so the document direction
   flips the layout on its own. What follows is only the physical left/right
   styling that CSS cannot mirror automatically, plus Cairo taking the lead
   for Arabic text. */
[dir="rtl"]{--disp:"Cairo","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Cairo","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
[dir="rtl"] .rail{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .rail .switch svg{margin-left:0;margin-right:auto}
[dir="rtl"] .nav .badge{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-more .caret{margin-left:0;margin-right:auto}
[dir="rtl"] .tabs button .n{margin-right:0;margin-left:6px}
[dir="rtl"] details.card > summary::after{margin-left:4px;margin-right:auto;border-right:0;border-left:2px solid var(--txt-3);transform:rotate(-45deg)}
[dir="rtl"] details.card[open] > summary::after{transform:rotate(45deg)}
[dir="rtl"] details.card > summary .tag,[dir="rtl"] details.card > summary .tiny{margin-left:0;margin-right:8px}
[dir="rtl"] .notice .btn{margin-left:0;margin-right:auto}
[dir="rtl"] .table th,[dir="rtl"] .table td{text-align:right}
[dir="rtl"] .table-wrap .table th:first-child,[dir="rtl"] .table-wrap .table td:first-child{padding-left:12px;padding-right:14px}
[dir="rtl"] .actionbar .btn{margin-left:0;margin-right:auto}
[dir="rtl"] .ring{right:auto;left:14px}
[dir="rtl"] .asset .x{right:auto;left:5px}
[dir="rtl"] .post .im{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .doc th,[dir="rtl"] .doc td{text-align:right}
[dir="rtl"] .toasts{right:auto;left:16px}
[dir="rtl"] .jobs{right:auto;left:16px}
[dir="rtl"] .tk-metric{border-left:1px solid var(--line);border-right:3px solid var(--acc)}
[dir="rtl"] .tk-metric.ok{border-right-color:var(--ok)}
[dir="rtl"] .tk-metric.blue{border-right-color:var(--blue)}
[dir="rtl"] .tk-phase .done{margin-left:0;margin-right:auto}
[dir="rtl"] .cb .n{right:auto;left:12px}
[dir="rtl"] .swot-tally i{margin-right:0;margin-left:6px}
[dir="rtl"] .persona-row .pv{padding-left:0;padding-right:13px}
[dir="rtl"] .tk-box .mh button{margin-left:0;margin-right:auto}
[dir="rtl"] .tk-box .mf .cnt{margin-right:0;margin-left:auto}
[dir="rtl"] .journey.strip .next-cta .t{text-align:right}
[dir="rtl"] .post .pic .im-dl{right:auto;left:6px}
[dir="rtl"] .switch-ui i::after{left:auto;right:3px}
[dir="rtl"] .switch-ui input:checked + i::after{left:auto;right:19px}
[dir="rtl"] .journey ol::after{left:auto;right:calc(100% / var(--jn) / 2)}
/* numerals, ids and code keep their LTR shape inside Arabic text */
[dir="rtl"] .mono,[dir="rtl"] code,[dir="rtl"] input[type="text"].secret{direction:ltr;unicode-bidi:isolate}