/* NOUWA STUDIO — design tokens & base styles
   DNA: hexagonal network mark · indigo→violet · warm near-white canvas · ink text
   THE RED NODE RULE: --red appears ONLY where AI is actively thinking/working/speaking. */

:root{
  --indigo:#4338CA;
  --violet:#7C3AED;
  --red:#F4504C;
  --ink:#17153A;
  --ink2:rgba(23,21,58,.64);
  --ink3:rgba(23,21,58,.40);
  --canvas:#FAFAFA;
  --surface:#FFFFFF;
  --tint:#F5F3FD;
  --tint2:#EDE9FB;
  --teal:#0E9484;
  --teal-tint:#E2F3F0;
  --border:#EAE7F4;
  --border2:#DCD7EE;
  --grad:linear-gradient(135deg,#4338CA 0%,#7C3AED 100%);
  --shadow-s:0 1px 2px rgba(23,21,58,.05);
  --shadow-m:0 4px 18px rgba(23,21,58,.07);
  --shadow-l:0 16px 48px rgba(23,21,58,.14);
  --r-s:8px; --r-m:12px; --r-l:16px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-ar:'Tajawal',var(--font);
  --mt:1;            /* motion multiplier (0 = instant) */
  --redscale:1;      /* red node prominence */
  --hexop:.6;        /* hexagon geometry intensity 0–1 */
}

/* Tajawal has no 600 weight — snap Arabic to its native 500/700 to avoid faux-bold.
   Selectors include the same class hooks the original rules use to win specificity. */
[dir="rtl"]{font-synthesis:none;}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
[dir="rtl"] .home-greet,
[dir="rtl"] .hero h1.exec, [dir="rtl"] .hero h1, [dir="rtl"] .hero .strap,
[dir="rtl"] .sect-head h2, [dir="rtl"] .cta-final h2,
[dir="rtl"] .price-card .pn, [dir="rtl"] .price-card .pp,
[dir="rtl"] .diff-card .nm, [dir="rtl"] .agent .ag-title,
[dir="rtl"] .ps-tab .nm, [dir="rtl"] .pillar h3, [dir="rtl"] .pillar .pill-name,
[dir="rtl"] .tour-body h2, [dir="rtl"] .err-h2,
[dir="rtl"] .acct-txt .nm, [dir="rtl"] .nap-title,
[dir="rtl"] .quality-head .ttl, [dir="rtl"] .qscore .v,
[dir="rtl"] .deliv h1, [dir="rtl"] .deliv h2,
[dir="rtl"] .brand-name h1, [dir="rtl"] .analysis h1,
[dir="rtl"] .prop-cover h1, [dir="rtl"] .camp-big h1,
[dir="rtl"] .ws-plan h4, [dir="rtl"] .plan-head h3{
  font-weight:700 !important;
}
[dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] .pill-sub, [dir="rtl"] .hero-sub,
[dir="rtl"] .sect-head p, [dir="rtl"] .sd, [dir="rtl"] .ag-sub{
  font-weight:400;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:#E9E7F1;}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;}
::selection{background:var(--tint2);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea{font-family:inherit;color:inherit;}
.no-motion *, .no-motion *::before, .no-motion *::after{animation:none !important;transition:none !important;}

/* Stage 12 a11y-1: global focus-visible — single low-specificity rule */
:where(button,a,input,textarea,select,[role="button"],[role="tab"],[role="option"],[role="menuitem"],[tabindex]):focus-visible{
  outline:2px solid var(--violet);outline-offset:2px;border-radius:6px;
}
.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;}

/* Stage 12 a11y-4: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .confetti{display:none;}
}

/* ---------- stage & frame ---------- */
.stage{position:fixed;inset:0;overflow:hidden;}
.stage-row{display:flex;gap:24px;align-items:flex-start;position:absolute;left:50%;top:50%;}
.frame{width:1440px;height:900px;background:var(--canvas);overflow:hidden;display:flex;
  border-radius:10px;box-shadow:0 24px 80px rgba(23,21,58,.22);position:relative;}
.frame[dir="rtl"]{font-family:var(--font-ar);}

/* ---------- density ---------- */
.frame{--pad-card:20px;--gap:16px;--fs-body:14px;--fs-small:12.5px;--row-h:44px;}
.frame[data-density="Business"]{--pad-card:14px;--gap:11px;--fs-body:13px;--fs-small:11.5px;--row-h:36px;}

/* ---------- gradient reach ---------- */
.grad-cta{background:linear-gradient(135deg,#6366F1 0%,#A78BFA 100%);color:#fff;}
.grad-opt{background:var(--indigo);color:#fff;}
[data-grad="Balanced"] .grad-opt,[data-grad="Generous"] .grad-opt{background:var(--grad);}
.grad-text{color:var(--ink);}
[data-grad="Balanced"] .grad-text em,[data-grad="Generous"] .grad-text em{
  font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
[data-grad="Generous"] .chip.active{background:var(--grad);color:#fff;border-color:transparent;}
[data-grad="Generous"] .type-chip{background:var(--tint2);}

/* ---------- red node (sacred) ---------- */
.rednode{display:inline-block;width:calc(9px*var(--redscale));height:calc(9px*var(--redscale));
  border-radius:50%;background:var(--red);position:relative;flex:none;}
.rednode.pulse::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);
  animation:redring 1.8s cubic-bezier(.2,.6,.4,1) infinite;}
@keyframes redring{0%{transform:scale(1);opacity:.55;}80%{transform:scale(calc(2.4*var(--redscale) + .6));opacity:0;}100%{opacity:0;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;font-size:var(--fs-body);
  font-weight:500;padding:9px 16px;transition:all calc(.18s*var(--mt));white-space:nowrap;}
.btn-primary{box-shadow:0 2px 10px rgba(67,56,202,.28);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(67,56,202,.36);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{border:1px solid var(--border2);background:var(--surface);color:var(--ink2);}
.btn-ghost:hover{border-color:var(--violet);color:var(--ink);}
.btn-quiet{color:var(--ink3);padding:9px 10px;}
.btn-quiet:hover{color:var(--ink);background:var(--tint);border-radius:9px;}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--border2);background:var(--surface);font-size:var(--fs-small);font-weight:500;
  color:var(--ink2);transition:all calc(.15s*var(--mt));}
.chip:hover{border-color:var(--violet);color:var(--indigo);}
.chip.active{background:var(--tint2);border-color:var(--violet);color:var(--indigo);}
.type-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;background:var(--tint);
  color:var(--indigo);font-size:11px;font-weight:600;letter-spacing:.02em;}

/* ---------- sidebar ---------- */
.sidebar{width:240px;flex:none;background:var(--surface);border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 14px 16px;gap:4px;position:relative;z-index:2;}
.sb-logo{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;}
.sb-word{font-size:14px;font-weight:600;letter-spacing:.14em;}
.sb-word small{display:block;font-size:9px;font-weight:500;letter-spacing:.34em;color:var(--ink3);}
.sb-new{justify-content:center;margin:2px 4px 14px;padding:10px;border-radius:10px;font-weight:600;}
.sb-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;font-size:var(--fs-body);
  font-weight:500;color:var(--ink2);transition:all calc(.13s*var(--mt));width:100%;text-align:start;}
.sb-item:hover{background:var(--tint);color:var(--ink);}
.sb-item.active{background:var(--tint2);color:var(--indigo);}
.sb-sect{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--ink3);padding:16px 10px 6px;text-transform:uppercase;}
.sb-recent{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:var(--fs-small);
  color:var(--ink2);width:100%;text-align:start;transition:background calc(.13s*var(--mt));}
.sb-recent:hover{background:var(--tint);}
.sb-recent .dot{width:6px;height:6px;border-radius:50%;flex:none;}
.sb-credit{margin-top:auto;border:1px solid var(--border);border-radius:12px;padding:15px 14px 13px;background:var(--canvas);}
.sb-credit-row{display:flex;align-items:baseline;justify-content:space-between;}
.sb-credit-row .lbl{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);}
.sb-credit-row .val{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.sb-credit-bar{height:5px;border-radius:99px;background:var(--tint2);margin:11px 0 10px;overflow:hidden;}
.sb-credit-bar i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width calc(.5s*var(--mt));}
.sb-credit-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--ink3);}
.sb-upgrade{font-size:11.5px;font-weight:600;color:var(--indigo);flex:none;}
.sb-upgrade:hover{text-decoration:underline;}

/* ---------- main column ---------- */
.main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;}
.main-scroll{flex:1;overflow-y:auto;position:relative;z-index:1;}
.hexbg{position:absolute;inset:0;pointer-events:none;z-index:0;}

/* ---------- one box ---------- */
.home-hero{max-width:1000px;margin:0 auto;padding:64px 40px 0;}
.frame[data-density="Business"] .home-hero{padding-top:44px;}
.home-greet{font-size:34px;font-weight:600;letter-spacing:-.02em;text-align:center;margin:0 0 26px;}
.onebox{background:var(--surface);border:1px solid var(--border2);border-radius:18px;box-shadow:var(--shadow-m);
  padding:14px 18px 12px;position:relative;transition:box-shadow calc(.2s*var(--mt)),border-color calc(.2s*var(--mt));}
.onebox:focus-within{border-color:var(--violet);box-shadow:0 6px 28px rgba(124,58,237,.13);}
.onebox textarea{width:100%;border:none;outline:none;resize:none;font-size:15.5px;line-height:1.5;
  background:transparent;min-height:34px;position:relative;z-index:1;}
.onebox .ghost{position:absolute;top:14px;inset-inline-start:18px;inset-inline-end:70px;font-size:15.5px;line-height:1.5;
  color:var(--ink3);pointer-events:none;animation:ghostin calc(.45s*var(--mt)) both;}
@keyframes ghostin{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.onebox-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:10px;}
.onebox-foot-start{position:relative;display:flex;align-items:center;gap:8px;}

/* + attach button — ghost circular, sits opposite send button */
.attach-btn{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:transparent;border:1px solid var(--border2);
  display:grid;place-items:center;color:var(--ink2);cursor:pointer;
  transition:all .18s ease;
}
.attach-btn:hover{
  background:var(--tint);border-color:var(--violet);color:var(--violet);
  transform:translateY(-1px);
}
.attach-btn[aria-expanded="true"]{
  background:var(--tint);border-color:var(--violet);color:var(--violet);
}

/* popover menu — anchors above the + button */
.attach-backdrop{position:fixed;inset:0;z-index:60;background:transparent;}
.attach-menu{
  position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;
  z-index:61;min-width:240px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 44px rgba(15,14,38,.16),0 4px 12px rgba(15,14,38,.06);
  padding:6px;
  animation:attachIn .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes attachIn{
  0%{opacity:0;transform:translateY(6px) scale(.97);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.attach-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border-radius:9px;border:none;background:transparent;
  text-align:start;cursor:pointer;font-family:inherit;
  transition:background .15s ease;
}
.attach-item:hover{background:var(--canvas);}
.attach-item .ai-ico{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-size:17px;background:var(--tint);flex:none;
}
.attach-item .ai-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.attach-item .ai-nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2;}
.attach-item .ai-sd{font-size:11px;color:var(--ink3);line-height:1.35;}

/* attached chips row above the foot */
.onebox-attached{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.attach-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tint);color:var(--ink);
  padding:5px 6px 5px 10px;border-radius:999px;
  font-size:12px;font-weight:500;
  border:1px solid var(--border);
}
.attach-chip-rm{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.08);border:none;cursor:pointer;
  color:var(--ink2);font-size:14px;line-height:1;
  transition:background .15s ease;
}
.attach-chip-rm:hover{background:rgba(0,0,0,.18);color:var(--ink);}
.onebox-chips{display:flex;gap:8px;flex-wrap:wrap;}
.sendbtn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;position:relative;
  transition:all calc(.18s*var(--mt));box-shadow:0 2px 10px rgba(67,56,202,.3);}
.sendbtn:hover{transform:translateY(-1px) scale(1.03);}
.sendbtn .rednode{position:absolute;top:-3px;inset-inline-end:-3px;width:calc(8px*var(--redscale));height:calc(8px*var(--redscale));
  border:2px solid var(--canvas);box-sizing:content-box;}
.examples{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.examples .lbl{font-size:var(--fs-small);color:var(--ink3);}
.ex-chip{font-size:var(--fs-small);color:var(--ink2);padding:5px 12px;border-radius:999px;background:transparent;
  border:1px dashed var(--border2);transition:all calc(.15s*var(--mt));}
.ex-chip:hover{border-style:solid;border-color:var(--violet);color:var(--indigo);background:var(--surface);}

/* ---------- home sections ---------- */
.home-sect{max-width:1000px;margin:0 auto;padding:38px 40px 8px;}
.home-sect h2{font-size:14px;font-weight:600;letter-spacing:.01em;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.home-sect h2 .more{margin-inline-start:auto;font-size:var(--fs-small);font-weight:500;color:var(--ink3);}
.home-sect h2 .more:hover{color:var(--indigo);}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.m-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--pad-card);
  display:flex;flex-direction:column;gap:10px;transition:all calc(.18s*var(--mt));text-align:start;}
.m-card:hover{border-color:var(--border2);box-shadow:var(--shadow-m);transform:translateY(-2px);}
.m-thumb{height:92px;border-radius:10px;background:var(--canvas);border:1px solid var(--border);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;overflow:hidden;position:relative;}
.frame[data-density="Business"] .m-thumb{height:74px;}
.m-thumb .tline{height:7px;border-radius:3px;background:var(--tint2);}
.m-thumb .tline.head{height:11px;width:62%;background:var(--ink);opacity:.82;}
.m-thumb .tline.accent{width:34%;background:var(--violet);opacity:.5;}
.m-title{font-size:var(--fs-body);font-weight:600;line-height:1.35;}
.m-meta{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink3);}
.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;}
.status.done{color:var(--teal);}
.status.pub{color:var(--indigo);}
.status.working{color:var(--ink2);}
.microbar{height:3px;border-radius:99px;background:var(--tint2);overflow:hidden;position:relative;margin-top:2px;}
.microbar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;background:var(--violet);opacity:.6;}
.microbar .node{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--red);
  animation:travel calc(2.6s/max(var(--mt),.01)) ease-in-out infinite alternate;}
@keyframes travel{from{inset-inline-start:2%;}to{inset-inline-start:60%;}}
.pack-card{position:relative;overflow:hidden;}
.pack-remix{position:absolute;inset:0;display:grid;place-items:center;background:rgba(250,250,250,.88);
  opacity:0;transition:opacity calc(.18s*var(--mt));border-radius:var(--r-l);}
.pack-card:hover .pack-remix{opacity:1;}
.remix-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-body);
  border:1px solid var(--violet);color:var(--indigo);background:var(--surface);padding:9px 18px;border-radius:999px;}

/* ---------- empty state ---------- */
.emptystate{max-width:680px;margin:0 auto;padding:46px 40px;text-align:center;position:relative;}
.emptystate p{color:var(--ink2);font-size:var(--fs-body);margin:10px 0 0;}
.emptystate .arrow{display:block;margin:0 auto 6px;}

/* ---------- plan screen ---------- */
.plan-wrap{max-width:840px;margin:0 auto;padding:34px 40px 80px;}
.topbar{height:58px;flex:none;display:flex;align-items:center;gap:13px;padding:0 22px;background:var(--surface);
  border-bottom:1px solid var(--border);position:relative;z-index:3;}
.topbar .title{font-size:14.5px;font-weight:600;white-space:nowrap;}
.topbar .grow{flex:1;}
.brief-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:18px 22px;
  font-size:15px;line-height:1.6;color:var(--ink2);box-shadow:var(--shadow-s);position:relative;}
.brief-card .who{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin-bottom:7px;}
.ai-line{display:flex;align-items:center;gap:10px;font-size:var(--fs-body);color:var(--ink2);margin:26px 0 0;
  animation:ghostin calc(.4s*var(--mt)) both;}
.clarify{margin-top:18px;display:flex;flex-direction:column;gap:14px;}
.clarify-q{animation:ghostin calc(.45s*var(--mt)) both;}
.clarify-q .q{font-size:var(--fs-body);font-weight:500;margin-bottom:9px;display:flex;gap:9px;align-items:center;}
.clarify-q .opts{display:flex;gap:8px;flex-wrap:wrap;}
.skip-link{align-self:flex-start;font-size:var(--fs-small);color:var(--ink3);margin-top:4px;}
.skip-link:hover{color:var(--indigo);text-decoration:underline;}

.plan-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 6px;animation:ghostin calc(.4s*var(--mt)) both;}
.plan-head h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0;}
.plan-head .est{font-size:var(--fs-small);color:var(--ink3);}

/* variation A — calm list */
.plan-list{position:relative;margin-top:18px;}
.plan-rail{position:absolute;inset-inline-start:21px;top:18px;bottom:18px;width:2px;background:var(--border);overflow:hidden;}
.plan-rail i{display:block;width:100%;background:linear-gradient(var(--indigo),var(--violet));transition:height calc(.55s*var(--mt)) ease;}
.ptask{display:flex;align-items:center;gap:15px;padding:9px 0;position:relative;animation:taskin calc(.5s*var(--mt)) both;}
@keyframes taskin{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.ptask .hexnum{width:44px;height:44px;flex:none;display:grid;place-items:center;position:relative;z-index:1;}
.ptask-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:13px 16px;display:flex;align-items:center;gap:11px;transition:all calc(.16s*var(--mt));}
.ptask-card:hover{border-color:var(--border2);box-shadow:var(--shadow-s);}
.ptask.dragging{opacity:.35;}
.ptask-label{flex:1;font-size:var(--fs-body);font-weight:500;outline:none;border-radius:4px;}
.ptask-label:focus{background:var(--tint);box-shadow:0 0 0 4px var(--tint);}
.ptask-sub{font-size:var(--fs-small);color:var(--ink3);display:block;margin-top:2px;}
.ptask .tools{display:flex;gap:2px;opacity:0;transition:opacity calc(.15s*var(--mt));}
.ptask-card:hover .tools{opacity:1;}
.tool-btn{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink3);}
.tool-btn:hover{background:var(--tint);color:var(--ink);}
.tool-btn.drag{cursor:grab;}

/* variation B — networked path */
.plan-net{position:relative;margin:26px auto 0;width:760px;}
.plan-net svg.wires{position:absolute;inset:0;overflow:visible;}
.net-node{position:absolute;width:46px;height:46px;display:grid;place-items:center;
  transform:translate(-50%,-50%);animation:nodein calc(.5s*var(--mt)) cubic-bezier(.3,1.4,.5,1) both;}
@keyframes nodein{from{opacity:0;transform:translate(-50%,-50%) scale(.4);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.net-card{position:absolute;width:330px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:12px 15px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-s);
  animation:taskin calc(.5s*var(--mt)) both;transition:border-color calc(.16s*var(--mt)),box-shadow calc(.16s*var(--mt));}
.net-card:hover{border-color:var(--border2);box-shadow:var(--shadow-m);}
.net-card .tools{display:flex;gap:2px;opacity:0;transition:opacity calc(.15s*var(--mt));}
.net-card:hover .tools{opacity:1;}
.wire{stroke-width:1.6;fill:none;stroke-dasharray:400;stroke-dashoffset:400;}
.wire.drawn{animation:wiredraw calc(.6s*var(--mt)) ease forwards;}
@keyframes wiredraw{to{stroke-dashoffset:0;}}
.red-traveller{position:absolute;width:calc(12px*var(--redscale));height:calc(12px*var(--redscale));border-radius:50%;
  background:var(--red);transform:translate(-50%,-50%);transition:top calc(.55s*var(--mt)) cubic-bezier(.5,0,.2,1),
  left calc(.55s*var(--mt)) cubic-bezier(.5,0,.2,1),opacity calc(.3s*var(--mt));z-index:3;box-shadow:0 0 0 4px rgba(244,80,76,.15);}
.red-traveller::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);
  animation:redring 1.6s ease-out infinite;}

.plan-actions{display:flex;align-items:center;gap:12px;margin-top:34px;animation:ghostin calc(.5s*var(--mt)) both;}
.addstep{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-body);color:var(--ink3);padding:8px 12px;
  border-radius:9px;border:1px dashed var(--border2);}
.addstep:hover{color:var(--indigo);border-color:var(--violet);}

/* ---------- workspace ---------- */
.ws{display:flex;flex-direction:column;height:100%;flex:1;min-width:0;}
.ws-body{flex:1;display:flex;min-height:0;position:relative;}
.ws-plan{width:280px;flex:none;border-inline-end:1px solid var(--border);background:var(--surface);
  padding:18px 14px;overflow-y:auto;position:relative;z-index:2;}
.frame[data-density="Business"] .ws-plan{width:248px;}
.ws-plan h4{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px;padding:0 8px;}
.wtask{display:flex;gap:11px;padding:9px 8px;border-radius:10px;position:relative;transition:background calc(.2s*var(--mt));}
.wtask.current{background:var(--tint);}
.wtask .mark{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;margin-top:1px;}
.wtask.pending .mark{border:1.6px solid var(--border2);}
.wtask.done .mark{background:var(--teal);color:#fff;animation:checkpop calc(.45s*var(--mt)) cubic-bezier(.3,1.6,.5,1);}
.wtask.done .mark::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal);
  animation:ripple calc(.7s*var(--mt)) ease-out forwards;}
@keyframes checkpop{from{transform:scale(.4);}60%{transform:scale(1.15);}to{transform:scale(1);}}
@keyframes ripple{from{transform:scale(1);opacity:.6;}to{transform:scale(2.1);opacity:0;}}
.wtask .body{min-width:0;flex:1;}
.wtask .lbl{font-size:13px;font-weight:500;line-height:1.4;}
.wtask.pending .lbl{color:var(--ink3);}
.wtask.done .lbl{color:var(--ink2);}
.wtask .verb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--red);font-weight:500;margin-top:4px;}
.wtask .verb .dots i{animation:blink 1.2s infinite;}
.wtask .verb .dots i:nth-child(2){animation-delay:.2s;}
.wtask .verb .dots i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
.ws-conn{position:absolute;inset-inline-start:26px;width:1.6px;background:var(--border);z-index:-1;}

.ws-canvas{flex:1;min-width:0;overflow-y:auto;background:var(--canvas);position:relative;}
.doc{max-width:660px;margin:34px auto 90px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-m);padding:54px 60px 60px;min-height:600px;position:relative;}
.frame[data-density="Business"] .doc{padding:42px 48px;}
.doc-sect{margin-bottom:38px;border-radius:10px;transition:box-shadow calc(.4s*var(--mt));}
.doc-sect.just-done{animation:sectglow calc(1.3s*var(--mt)) ease-out;}
@keyframes sectglow{0%{box-shadow:0 0 0 0 rgba(124,58,237,0);}25%{box-shadow:0 0 0 6px rgba(124,58,237,.13);}100%{box-shadow:0 0 0 0 rgba(124,58,237,0);}}
.doc .eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--indigo);text-transform:uppercase;margin:0 0 14px;}
.doc h1{font-size:40px;font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0 0 18px;}
.doc h2{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px;}
.doc p{font-size:15.5px;line-height:1.75;color:var(--ink2);margin:0 0 12px;text-wrap:pretty;}
.doc .caret{display:inline-block;width:2px;height:1.05em;background:var(--red);vertical-align:text-bottom;
  margin-inline-start:2px;animation:blink .9s infinite;}
.doc-cta-pill{display:inline-flex;padding:11px 22px;border-radius:999px;color:#fff;background:var(--grad);
  font-weight:600;font-size:14.5px;margin-top:6px;white-space:nowrap;}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.tier{border:1px solid var(--border);border-radius:12px;padding:16px 14px;animation:taskin calc(.45s*var(--mt)) both;}
.tier.featured{border-color:var(--violet);background:var(--tint);}
.tier .tname{font-weight:600;font-size:14px;}
.tier .tprice{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:6px 0 4px;}
.tier .tprice small{font-size:12px;font-weight:500;color:var(--ink3);}
.tier .tdesc{font-size:12.5px;color:var(--ink2);line-height:1.55;}
.cta-band{background:var(--ink);color:#fff;border-radius:12px;padding:26px 28px;text-align:center;}
.cta-band h3{font-size:21px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
.cta-band p{color:rgba(255,255,255,.66);margin:0;font-size:14px;}
.skel{border:1px dashed var(--border2);border-radius:10px;padding:18px;margin-bottom:38px;}
.skel .skel-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px;}
.skel .sline{height:9px;border-radius:4px;margin-bottom:8px;background:linear-gradient(90deg,var(--tint2) 25%,var(--tint) 50%,var(--tint2) 75%);
  background-size:200% 100%;animation:shimmer calc(1.4s/max(var(--mt),.01)) linear infinite;}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
.brandread{border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:30px;background:var(--canvas);}
.brandread .skel-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px;}
.brandread .pills{display:flex;gap:8px;flex-wrap:wrap;}
.bpill{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border2);animation:taskin calc(.4s*var(--mt)) both;}
.bpill b{font-weight:600;}
.bpill span{color:var(--ink2);}
.delivered-foot{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:10px;
  font-size:13px;color:var(--teal);font-weight:600;animation:ghostin calc(.5s*var(--mt)) both;}

/* ---------- chat ---------- */
.ws-chat{width:320px;flex:none;border-inline-start:1px solid var(--border);background:var(--surface);
  display:flex;flex-direction:column;transition:margin calc(.3s*var(--mt)) ease;position:relative;z-index:2;}
.ws-chat.closed{margin-inline-end:-320px;}
.ws-chat .head{height:46px;flex:none;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:600;}
.chat-scroll{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:14px;}
.msg{display:flex;gap:10px;animation:ghostin calc(.35s*var(--mt)) both;}
.msg .avatar{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--tint2);position:relative;}
.msg.user .avatar{background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;}
.msg .bubble{font-size:13px;line-height:1.6;color:var(--ink);}
.msg .bubble .meta{font-size:10.5px;color:var(--ink3);margin-bottom:3px;font-weight:600;}
.msg .avatar .rednode{position:absolute;bottom:-2px;inset-inline-end:-2px;width:8px;height:8px;border:2px solid var(--surface);box-sizing:content-box;}
.typing{display:inline-flex;gap:4px;padding:4px 0;}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:blink 1.1s infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
.chat-input{margin:12px;display:flex;align-items:center;gap:8px;border:1px solid var(--border2);border-radius:11px;
  padding:4px 4px 4px 13px;transition:border-color calc(.15s*var(--mt));}
.chat-input:focus-within{border-color:var(--violet);}
.chat-input input{flex:1;border:none;outline:none;font-size:13px;background:transparent;padding:8px 0;}
.chat-input button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink3);}
.chat-input button:hover{background:var(--tint);color:var(--indigo);}

/* ---------- toasts / misc ---------- */
.credits-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink2);
  border:1px solid var(--border);border-radius:999px;padding:5px 12px;background:var(--surface);position:relative;}
.credits-chip .tick{position:absolute;inset-inline-end:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:tickfade calc(1s*var(--mt)) ease-out forwards;}
@keyframes tickfade{from{opacity:1;transform:scale(1.4);}to{opacity:0;transform:scale(.6);}}
.savestate{font-size:11.5px;color:var(--ink3);}
/* ---------- stage row (single or EN↔AR compare) ---------- */
.frame-col{display:flex;flex-direction:column;gap:12px;align-items:center;}
.frame-cap{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6B6788;}

/* ---------- utility / services bar ---------- */
.utilbar{height:54px;flex:none;display:flex;align-items:center;gap:8px;padding:0 22px;
  background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:2;}
.utilbar.transparent{background:transparent;border-bottom-color:transparent;}
.util-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:9px;
  padding:7px 12px;color:var(--ink3);font-size:12.5px;width:264px;background:var(--surface);cursor:pointer;
  transition:border-color calc(.15s*var(--mt));}
.util-search:hover{border-color:var(--border2);color:var(--ink2);}
.util-search .k{margin-inline-start:auto;font-size:10.5px;border:1px solid var(--border);border-radius:4px;padding:1px 5px;background:var(--canvas);}
.util-iconbtn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--ink2);}
.util-iconbtn:hover{background:var(--tint);color:var(--ink);}
.util-div{width:1px;height:22px;background:var(--border2);margin:0 6px;}
.acct{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:10px;text-align:start;}
.acct:hover{background:var(--tint);}
.ava{width:30px;height:30px;border-radius:50%;background:var(--tint2);color:var(--indigo);display:grid;
  place-items:center;font-size:11.5px;font-weight:600;flex:none;}
.acct-txt .nm{display:block;font-size:12.5px;font-weight:600;line-height:1.25;}
.acct-txt small{display:block;font-size:10.5px;color:var(--ink3);font-weight:500;}

/* ---------- RTL polish ---------- */
.frame[dir="rtl"] .flip-rtl svg{transform:scaleX(-1);}
.frame[dir="rtl"] .doc p{line-height:1.95;}
.frame[dir="rtl"] .doc h1{line-height:1.34;letter-spacing:0;}
.frame[dir="rtl"] .doc h2{letter-spacing:0;}
.frame[dir="rtl"] .home-greet{letter-spacing:0;}
.frame[dir="rtl"] .sb-word{letter-spacing:.14em;}

/* ---------- Screen 17: the publish moment ---------- */
.pub{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--canvas);}
.pub-top{height:58px;flex:none;display:flex;align-items:center;gap:12px;padding:0 22px;position:relative;z-index:2;}
.pub-note{font-size:11.5px;color:var(--ink3);white-space:nowrap;}
.pub-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:0 60px 34px;position:relative;z-index:1;}
.pub-hero{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;animation:ghostin calc(.5s*var(--mt)) both;}
.pub-hero h1{font-size:36px;font-weight:600;letter-spacing:-.02em;margin:10px 0 0;white-space:nowrap;}
.frame[dir="rtl"] .pub-hero h1{letter-spacing:0;}
.pub-sub{font-size:13px;color:var(--ink3);white-space:nowrap;}
.pub-url-row{display:flex;gap:14px;align-items:stretch;animation:ghostin calc(.55s*var(--mt)) .12s both;}
.pub-url{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border2);
  border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-m);direction:ltr;}
.pub-url .proto{font-size:15px;color:var(--ink3);}
.pub-url .u{font-size:27px;font-weight:600;letter-spacing:-.01em;}
.copybtn{border:1px solid var(--border2);background:var(--canvas);color:var(--ink2);margin-inline-start:10px;
  font-size:12.5px;padding:8px 13px;}
.copybtn:hover{border-color:var(--violet);color:var(--indigo);}
.copybtn.ok{border-color:var(--teal);color:var(--teal);background:var(--teal-tint);}
.qr-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px 14px;}
.qr-card small{font-size:10px;color:var(--ink3);font-weight:500;}
.pub-sect{display:flex;flex-direction:column;gap:10px;align-items:center;animation:ghostin calc(.55s*var(--mt)) .24s both;}
.pub-sect-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap;}
.pub-cards{display:flex;gap:12px;}
.share-card{width:218px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:13px 14px;display:flex;flex-direction:column;gap:8px;text-align:start;transition:all calc(.16s*var(--mt));}
.share-card:hover{border-color:var(--border2);box-shadow:var(--shadow-m);transform:translateY(-2px);}
.share-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;}
.share-glyph{width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;display:grid;
  place-items:center;font-size:12px;font-weight:600;}
.share-txt{font-size:11.5px;color:var(--ink2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;}
.next-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:13px 14px;width:218px;text-align:start;transition:all calc(.16s*var(--mt));}
.next-card:hover{border-color:var(--violet);box-shadow:var(--shadow-s);}
.next-t{flex:1;font-size:13px;font-weight:500;line-height:1.35;}
.next-go{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--ink3);
  border:1px solid var(--border);flex:none;}
.next-card:hover .next-go{color:var(--indigo);border-color:var(--violet);}
.pub-actions{display:flex;gap:12px;animation:ghostin calc(.55s*var(--mt)) .36s both;}

/* confetti — one-time, restrained */
.confetti{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden;}
.confetti i{position:absolute;left:50%;top:40%;display:block;opacity:0;
  animation:burst var(--dur) cubic-bezier(.15,.6,.3,1) var(--del) forwards;}
.confetti .redspark{box-shadow:0 0 0 3px rgba(244,80,76,.18);}
@keyframes burst{0%{transform:translate(0,0) rotate(0);opacity:1;}70%{opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0;}}