/* NOUWA STUDIO — app shell production styles
   Removes the prototype stage scaling. Adapts the prototype to a real,
   full-window app. Adds: pillar selector, mission type tabs, prompt
   enrichment card, model routing chips, output-mode tabs.              */

body.app-body{background:var(--canvas);overflow:hidden;height:100vh;}
.app-stage{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--canvas);}
.app-frame{flex:1;min-height:0;background:var(--canvas);display:flex;overflow:hidden;border:none;border-radius:0;
  box-shadow:none;}

/* hide the stage scaling used by the original prototype */
.app-stage .stage,.app-stage .stage-row,.app-stage .frame-col{position:static;transform:none;
  height:100%;width:100%;gap:0;}
.app-stage .frame{height:100%;width:100%;border-radius:0;box-shadow:none;background:var(--canvas);}

/* ---------- pillar tabs (top of home) ---------- */
.pillar-bar{display:flex;align-items:center;gap:8px;justify-content:center;margin:0 auto 26px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px;
  width:max-content;box-shadow:var(--shadow-s);}
.pillar-tab{display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;border-radius:999px;font-size:13px;
  font-weight:600;color:var(--ink2);transition:all calc(.15s*var(--mt));position:relative;}
.pillar-tab:hover{color:var(--ink);}
.pillar-tab .ico{width:18px;height:18px;display:grid;place-items:center;border-radius:5px;flex:none;
  background:var(--canvas);font-size:10px;font-weight:600;color:var(--ink2);transition:all calc(.15s*var(--mt));}
.pillar-tab.active{color:#fff;}
.pillar-tab.active.p-think{background:var(--red);}
.pillar-tab.active.p-create{background:var(--grad);}
.pillar-tab.active.p-work{background:var(--ink);}
.pillar-tab.active .ico{background:rgba(255,255,255,.22);color:#fff;}

/* ---------- mission type chips (under pillar) ---------- */
/* Hollow rounded card hugging OneBox from above — chips sit inside, border continues into the input */
.mission-types{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;
  background:transparent;border:1px solid var(--border2);border-bottom:none;
  border-radius:16px 16px 0 0;padding:14px 14px 11px;margin:0 0 -1px;
  transition:border-color calc(.2s*var(--mt));}
.onebox{border-top-left-radius:0;border-top-right-radius:0;}
.onebox:focus-within + .mission-types,.mission-types:has(+ .onebox:focus-within){border-color:var(--violet);}
.mission-type{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--ink2);
  transition:all calc(.15s*var(--mt));white-space:nowrap;}
.mission-type:hover{border-color:var(--border2);color:var(--ink);}
.mission-type.active{background:var(--tint2);border-color:var(--violet);color:var(--indigo);}
.mission-type .ico{font-size:13px;}
.mission-type .badge{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--violet);
  background:var(--tint);padding:2px 6px;border-radius:5px;}

@media (max-width:900px){
  .mission-types{flex-wrap:wrap;}
}

/* ---------- enrichment card (plan screen) ---------- */
.enrich-card{margin:18px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow-s);animation:ghostin calc(.45s*var(--mt)) both;
  position:relative;overflow:hidden;}
.enrich-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);}
.enrich-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);}
.enrich-body{font-size:13.5px;line-height:1.65;color:var(--ink2);}
.enrich-body em{font-style:normal;color:var(--ink);font-weight:500;background:var(--tint);padding:1px 6px;
  border-radius:5px;}
.enrich-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.enrich-meta .kv{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2);
  background:var(--canvas);border:1px solid var(--border);padding:4px 10px;border-radius:999px;}
.enrich-meta .kv b{color:var(--ink3);font-weight:600;letter-spacing:.08em;font-size:10.5px;text-transform:uppercase;}

/* ---------- model routing ---------- */
.route-card{margin-top:14px;animation:ghostin calc(.5s*var(--mt)) both;}
.route-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);}
.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.route-chip{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:11px;background:var(--surface);
  border:1px solid var(--border);transition:all calc(.16s*var(--mt));}
.route-chip:hover{border-color:var(--border2);}
.route-chip .mb{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:11px;
  font-weight:600;color:#fff;flex:none;}
.route-chip.claude .mb{background:#D97706;}
.route-chip.gpt .mb{background:#0F766E;}
.route-chip.gemini .mb{background:#1D4ED8;}
.route-chip.media .mb{background:var(--violet);}
.route-chip .nm{font-size:13px;font-weight:600;line-height:1.2;}
.route-chip .sd{font-size:11.5px;color:var(--ink3);}

/* ---------- topbar ribbon for app mode ---------- */
.app-topbar{height:46px;flex:none;display:flex;align-items:center;gap:12px;padding:0 22px;background:var(--ink);
  color:#fff;font-size:12px;font-weight:500;}
.app-topbar .pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;}
.app-topbar a{color:rgba(255,255,255,.7);font-weight:500;}
.app-topbar a:hover{color:#fff;}

/* fix prototype's stage row that breaks production rendering */
.app-stage .stage{overflow:visible;}

/* ---------- Stage 10: horizontal workspace stepper (replaces .ws-plan) ---------- */
.ws-stepper{position:sticky;top:0;z-index:3;background:var(--surface);border-bottom:1px solid var(--border);
  padding:14px 22px;display:flex;justify-content:center;}
.ws-stepper-rail{display:flex;align-items:center;gap:6px;max-width:980px;width:100%;
  overflow-x:auto;scrollbar-width:none;}
.ws-stepper-rail::-webkit-scrollbar{display:none;}
.wstep{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:transparent;border:1px solid var(--border);font-size:12px;color:var(--ink3);
  white-space:nowrap;flex:none;transition:all .18s ease;}
.wstep.current{background:var(--tint2);border-color:var(--violet);color:var(--indigo);
  box-shadow:0 1px 6px rgba(124,58,237,.18);}
.wstep.done{background:var(--surface);border-color:var(--border2);color:var(--ink2);}
.wstep.done .wstep-mark{background:var(--teal);color:#fff;border-color:var(--teal);}
.wstep-mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--canvas);border:1px solid var(--border);font-size:10.5px;font-weight:600;color:var(--ink3);flex:none;}
.wstep.current .wstep-mark{background:#fff;border-color:var(--violet);color:var(--violet);}
.wstep-num{font-size:10.5px;line-height:1;}
.wstep-lbl{font-weight:500;letter-spacing:-.005em;}
.wstep.done .wstep-lbl{color:var(--ink2);}
.wstep-link{flex:none;width:18px;height:1px;background:var(--border);align-self:center;}
.wstep-link.done{background:var(--teal);}

/* Reclaim space — .ws-plan removed from layout, ws-canvas spans the gained width */
.ws-body > .ws-plan{display:none;}
.ws-canvas .doc{max-width:880px;margin:0 auto;}

@media (max-width:900px){
  .ws-stepper{padding:10px 14px;}
  .wstep-lbl{display:none;}
  .wstep{padding:5px 8px;}
}

/* ============ Stage 12 — Wave 1+2 batch ============ */

/* Toast stack (motion-01) */
.toast-stack{position:fixed;bottom:24px;inset-inline-end:24px;display:flex;flex-direction:column;
  gap:8px;z-index:200;pointer-events:none;max-width:340px;}
.toast{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:11px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;
  box-shadow:0 14px 34px rgba(23,21,58,.26);pointer-events:auto;
  animation:toast-in .22s ease-out both;}
.toast-ok{background:var(--teal);}
.toast-err{background:var(--red);}
.toast-info{background:var(--ink);}
.toast-text{line-height:1.4;}
@keyframes toast-in{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Plan polish (plan-01/02/03) */
.brief-text{margin-top:6px;padding:6px 8px;border-radius:8px;border:1px dashed transparent;transition:all .14s;}
.brief-text.editable:hover{border-color:var(--border2);background:var(--canvas);}
.brief-text.editable:focus{border-color:var(--violet);background:var(--canvas);outline:none;}
.brief-edit-hint{font-size:10.5px;color:var(--ink3);font-weight:500;letter-spacing:.04em;margin-inline-start:6px;}
.plan-run{display:inline-flex;align-items:center;gap:8px;}
.plan-cost-chip{font-size:11.5px;font-weight:600;opacity:.85;background:rgba(255,255,255,.18);
  padding:2px 8px;border-radius:6px;}
.plan-balance{font-size:11.5px;color:var(--ink3);margin-inline-start:6px;}
.plan-skip{margin-top:16px;background:none;border:1px solid var(--border);border-radius:9px;
  padding:8px 14px;font-size:12.5px;color:var(--ink2);cursor:pointer;font-family:inherit;
  transition:all .14s;}
.plan-skip:hover{border-color:var(--violet);color:var(--violet);}

/* Share modal (ws-4) */
.share-modal-backdrop{position:fixed;inset:0;background:rgba(15,14,38,.55);z-index:150;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:toast-in .18s both;}
.share-modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  width:520px;max-width:100%;padding:22px;box-shadow:0 24px 60px rgba(15,14,38,.32);}
.share-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;}
.share-modal-title{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.share-modal-sub{font-size:12.5px;color:var(--ink3);margin-top:3px;}
.share-modal-x{width:30px;height:30px;border-radius:8px;background:none;border:none;cursor:pointer;
  color:var(--ink3);display:grid;place-items:center;}
.share-modal-x:hover{background:var(--canvas);color:var(--ink);}
.share-modal-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.share-modal-lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);min-width:80px;}
.share-modal-link{flex:1;font-family:'SFMono-Regular',Consolas,monospace;font-size:12px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--border);padding:7px 11px;border-radius:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.share-modal-copy{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;
  background:var(--ink);color:#fff;border:none;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;}
.share-modal-copy.ok{background:var(--teal);}
.share-modal-perm{display:flex;gap:6px;}
.share-perm-opt{padding:6px 14px;border-radius:8px;background:var(--canvas);border:1px solid var(--border);
  font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer;font-family:inherit;transition:all .14s;}
.share-perm-opt:hover{border-color:var(--border2);color:var(--ink);}
.share-perm-opt.on{background:var(--violet);border-color:var(--violet);color:#fff;}
.share-modal-mates{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
.share-mate{display:inline-flex;align-items:center;gap:7px;padding:5px 8px;border-radius:999px;
  background:var(--canvas);border:1px solid var(--border);cursor:pointer;font-family:inherit;
  font-size:11.5px;color:var(--ink2);transition:all .14s;}
.share-mate:hover{border-color:var(--violet);color:var(--violet);}
.share-mate-ava{width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;
  display:grid;place-items:center;font-size:9.5px;font-weight:700;letter-spacing:.05em;}
.share-mate-add{margin-inline-start:2px;font-weight:700;color:var(--ink3);}
.share-modal-foot{display:flex;gap:8px;align-items:center;border-top:1px solid var(--border);padding-top:14px;margin-top:6px;}
.share-modal-input{flex:1;font-family:inherit;font-size:13px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--canvas);color:var(--ink);outline:none;}
.share-modal-input:focus{border-color:var(--violet);}
.share-modal-send{padding:8px 18px;font-size:13px;}

/* Clickable WsStepper (ws-2) */
.wstep:not(:disabled){cursor:pointer;}
.wstep:disabled{cursor:default;opacity:.55;}

/* Resume pill */
.pill-resume{transition:background .14s;}
.pill-resume:hover{background:rgba(244,80,76,.32) !important;}

/* a11y-7 contrast bump */
.ink3-bump{color:var(--ink2);}

/* BrandSwitcher pill — must contrast against dark topbar */
.app-topbar .brand-pill{
  background:linear-gradient(135deg, rgba(139,92,246,.32) 0%, rgba(67,56,202,.32) 100%);
  border:1px solid rgba(167,139,250,.40);
  color:#fff;
  font-weight:600;
  padding:4px 12px;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.app-topbar .brand-pill:hover{
  background:linear-gradient(135deg, rgba(139,92,246,.45) 0%, rgba(67,56,202,.45) 100%);
  border-color:rgba(167,139,250,.65);
  box-shadow:0 4px 14px rgba(124,58,237,.30);
}
.app-topbar .brand-pill[aria-expanded="true"]{
  background:linear-gradient(135deg, rgba(139,92,246,.55) 0%, rgba(67,56,202,.55) 100%);
  border-color:rgba(167,139,250,.85);
}

/* Stage 13 — BrandSwitcher popover
   Robust dropdown: explicit width, vertical stack, scrolls if too tall,
   stays inside viewport via right-anchor + max-height. */
.brand-pop{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-end:0;
  width:320px;
  max-width:calc(100vw - 24px);
  max-height:min(440px, calc(100vh - 80px));
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(15,14,38,.28), 0 4px 12px rgba(15,14,38,.10);
  padding:8px;
  z-index:200;
  animation:toast-in .16s both;
}
.brand-pop-head{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);padding:8px 10px 8px;
}
.brand-pop-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;
  border-radius:10px;background:none;border:none;cursor:pointer;
  font-family:inherit;text-align:start;color:var(--ink);transition:background .14s;
}
.brand-pop-item:hover{background:var(--canvas);}
.brand-pop-item.on{background:var(--tint2);}
.brand-pop-palette{display:inline-flex;gap:4px;flex:none;}
.brand-pop-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);}
.brand-pop-text{flex:1;display:flex;flex-direction:column;min-width:0;gap:2px;}
.brand-pop-name{font-size:14px;font-weight:600;line-height:1.25;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brand-pop-text small{font-size:11.5px;color:var(--ink3);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.brand-pop-add{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border-radius:10px;background:none;border:1px dashed var(--border2);
  cursor:pointer;font-family:inherit;text-align:start;
  font-size:13px;font-weight:500;color:var(--ink2);margin-top:6px;
  transition:all .15s ease;
}
.brand-pop-add:hover{border-color:var(--violet);color:var(--violet);background:var(--tint);}

/* Stage 13 — drag handle visibility on plan tasks */
.tool-btn.drag{cursor:grab;}
.tool-btn.drag:active{cursor:grabbing;}
.net-card{cursor:default;}
.net-card.dragging{opacity:.55;}

/* Stage 13 — Publish destinations */
.pub-dests{margin:18px auto 22px;max-width:680px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:16px 18px;}
.pub-dests-head{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:12px;}
.pub-dests-grid{display:flex;flex-direction:column;gap:7px;}
.pub-dest{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  background:var(--canvas);border:1px solid var(--border);transition:all .16s;}
.pub-dest.on{background:var(--tint2);border-color:var(--violet);}
.pub-dest-icon{width:30px;height:30px;border-radius:8px;background:var(--surface);
  display:grid;place-items:center;color:var(--ink2);flex:none;}
.pub-dest.on .pub-dest-icon{background:var(--violet);color:#fff;}
.pub-dest-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.pub-dest-lbl{font-size:13px;font-weight:600;color:var(--ink);}
.pub-dest-sub{font-size:11px;color:var(--ink3);margin-top:2px;}
.pub-dest-toggle{padding:5px 11px;border-radius:8px;background:var(--surface);border:1px solid var(--border);
  font-size:11px;font-weight:600;color:var(--ink2);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;transition:all .14s;flex:none;}
.pub-dest-toggle:hover{border-color:var(--border2);color:var(--ink);}
.pub-dest-toggle.on{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ============ Stage 14: GrowthJobDrawer ============ */
.gj-backdrop{position:fixed;inset:0;background:rgba(15,14,38,.55);z-index:160;
  display:flex;justify-content:flex-end;animation:toast-in .18s both;}
.gj-drawer{width:480px;max-width:100%;background:var(--surface);border-inline-start:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;padding:22px 24px;animation:gj-slide .24s ease both;}
@keyframes gj-slide{from{transform:translateX(100%);}to{transform:translateX(0);}}
[dir="rtl"] .gj-drawer{animation:gj-slide-rtl .24s ease both;border-inline-start:none;border-inline-end:1px solid var(--border);}
@keyframes gj-slide-rtl{from{transform:translateX(-100%);}to{transform:translateX(0);}}
.gj-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;}
.gj-title{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.gj-sub{font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.5;}
.gj-x{width:32px;height:32px;border-radius:9px;background:none;border:none;cursor:pointer;
  color:var(--ink3);display:grid;place-items:center;}
.gj-x:hover{background:var(--canvas);color:var(--ink);}
.gj-status{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:18px;}
.gj-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;}
.gj-pill.gj-live{background:rgba(244,80,76,.14);color:var(--red);}
.gj-pill.gj-paused{background:rgba(0,0,0,.06);color:var(--ink2);}
.gj-pill.gj-done{background:rgba(14,148,132,.14);color:var(--teal);}
.gj-pill.gj-sched{background:var(--tint2);color:var(--indigo);}
.gj-time{font-size:11px;color:var(--ink3);}
.gj-section{margin-bottom:20px;}
.gj-section-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px;}
.gj-ab{display:flex;flex-direction:column;gap:11px;}
.gj-variant{padding:11px 13px;border-radius:11px;background:var(--canvas);border:1px solid var(--border);}
.gj-variant.winner{background:var(--tint2);border-color:var(--violet);}
.gj-variant-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.gj-variant-h b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;}
.gj-variant.winner .gj-variant-h b{background:var(--violet);}
.gj-tag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);
  background:#fff;padding:2px 7px;border-radius:5px;}
.gj-variant-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:5px;}
.gj-variant-bar i{display:block;height:100%;background:var(--violet);transition:width .3s;}
.gj-variant-meta{font-size:11px;color:var(--ink3);font-family:'SFMono-Regular',Consolas,monospace;}
.gj-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.gj-log li{font-size:12.5px;color:var(--ink2);line-height:1.5;display:flex;gap:8px;}
.gj-log li b{color:var(--ink);font-weight:600;font-family:'SFMono-Regular',Consolas,monospace;font-size:11px;min-width:32px;}
.gj-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px;border-top:1px solid var(--border);}

/* Make growth-item clickable */
.growth-item{display:flex;align-items:center;gap:11px;width:100%;text-align:start;cursor:pointer;
  background:var(--canvas);border:1px solid var(--border);padding:10px 14px;border-radius:10px;
  font-family:inherit;transition:all .14s;}
.growth-item:hover{border-color:var(--violet);background:var(--surface);}
.growth-item-go{font-size:14px;color:var(--ink3);font-weight:600;}
[dir="rtl"] .growth-item-go{transform:scaleX(-1);}

/* ============ Inline doc editing ============ */
.doc-editable{outline:none;}
.doc-editable .doc-sect{transition:background .14s;}
.doc-editable .doc-sect:hover{background:rgba(124,58,237,.04);}
.doc-editable:focus-within .doc-sect:focus-within{background:var(--tint);outline:1px solid var(--violet);outline-offset:4px;border-radius:6px;}

/* ============ DNA seed state ============ */
.dna-seed{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px;
  max-width:560px;margin:0 auto;animation:toast-in .28s both;}
.dna-seed-orbit{margin-bottom:24px;}
.dna-seed-title{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin:0 0 10px;}
.dna-seed-sub{font-size:14px;color:var(--ink2);line-height:1.65;margin:0 0 18px;}
.dna-seed-progress{font-size:12px;color:var(--violet);background:var(--tint2);padding:7px 14px;
  border-radius:999px;display:inline-block;margin-bottom:18px;font-weight:500;}
.dna-seed-tri{display:flex;gap:11px;margin-bottom:24px;}
.dna-seed-pillar{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--canvas);border:1px solid var(--border);font-size:11.5px;font-weight:500;color:var(--ink2);}
.dna-seed-pillar .dna-seed-dot{width:7px;height:7px;border-radius:50%;}
.dna-seed-pillar.voice .dna-seed-dot{background:#F4504C;}
.dna-seed-pillar.audience .dna-seed-dot{background:#7C3AED;}
.dna-seed-pillar.visual .dna-seed-dot{background:#0E9484;}
.dna-seed-cta{display:flex;gap:8px;}