:root{
  --bg:#080b12;
  --panel:#0f1520;
  --panel2:#0b111a;
  --soft:#141b27;
  --line:#222c3c;
  --line-strong:#344055;
  --text:#f4f2ee;
  --muted:#929cad;
  --accent:#7864e6;
  --accent2:#a99bf2;
  --accent-soft:#c7bdf7;
  --good:#56d68a;
  --bad:#f47f91;
}

html{background:var(--bg);scroll-behavior:smooth}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(760px 360px at 82% -10%,rgba(120,100,230,.065),transparent 68%),
    linear-gradient(180deg,#080b12 0%,#090d15 46%,#080b12 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:before{display:none!important}
::selection{background:rgba(120,100,230,.32);color:#fff}

.wrap{max-width:1320px;padding:0 30px 76px;position:relative}
nav{
  min-height:78px;
  margin:0 0 34px;
  padding:14px 0;
  border-bottom:1px solid rgba(148,163,184,.11);
}
.logo{display:flex;align-items:center;gap:11px;min-width:225px;font-weight:800;letter-spacing:-.02em}
.brand-mark{display:none!important}
.brand-mark-img{display:block;width:52px;height:52px;flex:none;border-radius:13px;box-shadow:0 10px 28px rgba(0,0,0,.24)}
.brand-wordmark{display:flex;flex-direction:column;line-height:1}
.brand-wordmark strong{font-size:18px;letter-spacing:-.015em;color:#f5f3ef}
.brand-wordmark span{margin-top:7px;color:#a99bf2;font-size:8.5px;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.nav{gap:8px}.nav #navUser{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.btn{
  min-height:40px;
  border:1px solid var(--line-strong);
  background:#121925;
  color:#f1f3f7;
  border-radius:9px;
  padding:9px 13px;
  font-weight:760;
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px);background:#17202d;border-color:#4a5870}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.tab:focus-visible{outline:2px solid #9e8af0;outline-offset:2px}
.btn.primary{
  border-color:#8875eb;
  background:#7460dd;
  color:white;
  box-shadow:none;
}
.btn.primary:hover:not(:disabled){background:#806dea;border-color:#9583ee;box-shadow:none}
.btn:disabled{cursor:not-allowed}

.hero{text-align:center;max-width:1040px;margin:0 auto 42px;padding:10px 0 18px}
.hero h1{max-width:930px;margin:0 auto;font-size:clamp(44px,6.1vw,76px);line-height:.98;letter-spacing:-.05em;text-wrap:balance;color:#f4f2ee}
.hero h1 .brand-highlight{color:#b8acf1;background:none;-webkit-text-fill-color:initial}
.hero p{max-width:720px;margin:20px auto 0;color:#a0a9b8;font-size:17px;line-height:1.62}
.heroform{display:flex;gap:8px;max-width:790px;margin:28px 0 0;padding:6px;background:#0c121b;border:1px solid #263044;border-radius:12px;box-shadow:none}
.heroform input{min-height:48px;border:0!important;background:transparent!important;padding:12px 14px!important}
.heroform input::placeholder{color:#697588}
.heroform .btn{min-width:176px;padding-inline:18px}
.brand-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-top:15px;color:#7c8799;font-size:10px;font-weight:700}
.brand-trust span{display:inline-flex;align-items:center;gap:7px}
.brand-trust span:before{content:"";width:5px;height:5px;border-radius:50%;background:#8774e4}

.brand-feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1080px;
  margin:0 auto 42px;
  border:1px solid #202a39;
  border-radius:13px;
  overflow:hidden;
  background:#0c121b;
}
.brand-feature{display:flex;align-items:flex-start;gap:11px;min-height:84px;padding:16px 17px;border:0;background:transparent}
.brand-feature+.brand-feature{border-left:1px solid #202a39}
.brand-feature i{width:7px;height:7px;margin-top:5px;flex:none;border-radius:50%;background:#7864e6}
.brand-feature b{display:block;margin-bottom:5px;color:#e9e7e2;font-size:11.5px}
.brand-feature span{display:block;color:#7f8a9b;font-size:9.5px;line-height:1.45}

.pricing{max-width:1040px;gap:13px;margin:28px auto 58px}
.price,.card{background:#0f1520;border-color:#222c3c;box-shadow:none}
.price{padding:22px;border-radius:15px}
.price.featured{background:#111725;border-color:#7562c8;box-shadow:inset 0 2px 0 #7864e6}
.price h3{font-size:16px;letter-spacing:-.01em}.price .amount{letter-spacing:-.035em;color:#f4f2ee}
.price ul{color:#98a2b2;line-height:1.72}.plan-note{color:#a89be8}
.popular-badge{background:#1d1830;border-color:#55468d;color:#d1c8fb}
.price .btn{width:100%}

.grid{grid-template-columns:minmax(330px,388px) minmax(0,1fr);gap:20px;align-items:start}
.card{border-radius:16px}.form,.results{padding:20px}
.brand-section-label{margin:0 0 8px;color:#746f86;font-size:9px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.form h2{margin:0 0 11px;font-size:20px;letter-spacing:-.025em;color:#f2f0ec}
.form-intro{margin-bottom:14px;padding:12px 13px;background:#0b121c;border-color:#222d40;color:#8995a7;border-radius:10px}
label{color:#aeb6c4;letter-spacing:.09em}
input,select,textarea{min-height:43px;background:#0a1018;border-color:#263247;border-radius:9px;color:#f4f2ee;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
textarea{min-height:88px}
input:hover,select:hover,textarea:hover{border-color:#35435a}
input:focus,select:focus,textarea:focus{border-color:#7465bd;box-shadow:0 0 0 3px rgba(120,100,230,.09);background:#0b111a}
.field-hint,.output-disclaimer{color:#6f7c90}.generate{min-height:48px;margin-top:18px;font-size:13px}

.account{margin-bottom:13px;padding:12px 13px;background:#0a111a;border-color:#202a39;border-radius:10px}.account b{font-size:13px}.account small{color:#808b9d}
.plan-upgrade{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-2px 0 14px;padding:12px 13px;border:1px solid #3c3555;border-radius:10px;background:#11131d}
.plan-upgrade-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.plan-upgrade-copy b{font-size:11px;color:#ebe7f8}.plan-upgrade-copy span{font-size:10px;line-height:1.45;color:#858da0}.plan-upgrade .btn{flex:none;min-height:36px;padding:7px 10px;font-size:10.5px;border-color:#51466f;background:#181625;color:#dcd5f9}
.tabs{gap:4px;margin-bottom:12px;padding:0 0 8px;border-bottom:1px solid #1e2836}
.tab{min-height:36px;padding:8px 10px;background:transparent;border-color:transparent;border-radius:7px;color:#8792a3}
.tab:hover{background:#121a26;color:#d9dde5}.tab.active{background:#171524;border-color:#383052;color:#e8e3ff;box-shadow:inset 0 -2px 0 #7864e6}
.tool{margin:4px 0 12px}.tool .btn{min-height:36px;font-size:11px}
.empty{min-height:520px;background:#0a1018;border-color:#273246;color:#697588;border-radius:12px}

.section{background:#0b121b;border-color:#202b3b;border-radius:12px;padding:15px}
.section h3{color:#efede9}.section p{color:#adb5c2}
.hook{background:#0c141f;border-color:#243044;border-radius:9px}.hook-row .hook{box-shadow:none}
.source{background:#0b121b;border-color:#263246}.tag{background:#111925;border-color:#303b4d;color:#cbd2dd}
.stage-pill,.meta-pill{background:#181525;border-color:#41375f;color:#d9d0fa}

.script-card{background:#0b121b;border-color:#222d3e;border-radius:15px;box-shadow:none}
.script-head{padding:16px;border-bottom-color:#202a39}.script-num{color:#7d899a}.script-head h3{color:#f0eee9;letter-spacing:-.01em}
.script-actions .btn{min-height:34px;padding:7px 9px}
.script-meta{padding:10px 16px 2px}.script-meta .meta-pill{background:#111a26;border-color:#2b3749;color:#bbc4d1}.script-strategy{color:#8b96a7!important}
.style-note{color:#657287}
.segment-card{background:#081019;border-color:#223044;border-radius:12px}
.segment-card.hook-segment{border-color:#4e416f;box-shadow:inset 3px 0 0 #7864e6}
.segment-top{background:#0d1621;border-bottom-color:#202c3c}
.direction-box{background:#0d1621;border-color:#28364a;border-radius:10px}
.direction-box.action{background:#121323;border-color:#383650}.direction-box.say{background:#0b151e;border-color:#2d3d4d}
.direction-box.action .eyebrow{color:#b3a6ed}.direction-box.say .eyebrow{color:#8fd5ad}
.support-grid,.support-item+.support-item{border-color:#202b3b}
.support-text{color:#929dad}.support-text.screen{color:#bfc6d1}

.styles-intro{background:#111421;border-color:#44395f;border-radius:12px}.style-manager-card{background:#0b121b;border-color:#243044;border-radius:12px}
.upgrade-panel{background:#0d1420;border-color:#594b86;box-shadow:inset 3px 0 0 #7864e6}.upgrade-panel .eyebrow{color:#b7aae9}
.modalback{backdrop-filter:blur(7px)}.modal{background:#0f1520;border-color:#2a3548;box-shadow:0 28px 80px rgba(0,0,0,.48)}

.paid-session #pricing,.paid-session .brand-feature-strip{display:none!important}
.paid-session .brand-trust{display:none!important}
.paid-session .hero{margin-bottom:24px;padding-bottom:8px}
.paid-session .hero p{max-width:650px}

footer{margin-top:62px;padding-top:30px;border-top:1px solid rgba(148,163,184,.1);color:#616d7e}footer a{color:#8994a4}footer a:hover{color:#d8dde5}
.brand-footer-lockup{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:13px;color:#8e98a7;font-size:9.5px;font-weight:780;letter-spacing:.05em;text-transform:uppercase}
.brand-footer-lockup img{width:25px;height:25px;border-radius:7px}
.brand-footer-lockup .mini-slash{display:none}

@media(max-width:900px){
  .wrap{padding:0 16px 56px}
  nav{min-height:68px;margin-bottom:18px;padding:11px 0}.logo{min-width:0}.brand-mark-img{width:38px;height:38px;border-radius:10px}.brand-wordmark strong{font-size:12.5px}.brand-wordmark span{font-size:7px;letter-spacing:.22em}
  .nav{gap:6px}.nav #navUser{display:none}.nav .btn{min-height:36px;padding:7px 9px;font-size:10.5px}
  .hero{padding:10px 1px 10px;margin-bottom:28px}.hero h1{font-size:clamp(39px,11.8vw,57px);line-height:1;letter-spacing:-.048em}.hero p{margin-top:16px;font-size:15px;line-height:1.58}
  .heroform{flex-direction:column;padding:6px;margin-top:22px}.heroform input{font-size:16px}.heroform .btn{width:100%;min-height:48px;min-width:0}.brand-trust{gap:8px 15px;font-size:9px}
  .brand-feature-strip{grid-template-columns:1fr 1fr;margin-bottom:32px}.brand-feature:nth-child(3){border-left:0}.brand-feature:nth-child(n+3){border-top:1px solid #202a39}.brand-feature{min-height:82px;padding:14px 15px}
  .pricing{gap:10px;margin-bottom:38px}.price{padding:18px}
  .grid{grid-template-columns:1fr}.form,.results{padding:14px}.results{min-height:540px}
  input,select{min-height:46px}.generate{min-height:50px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:9px}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;scroll-snap-align:start;min-height:38px}
  .script-head{align-items:flex-start;flex-direction:column}.script-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.script-actions .btn{width:100%;white-space:normal;line-height:1.2}
  .primary-grid{grid-template-columns:1fr}.support-grid{grid-template-columns:1fr}.support-item+.support-item{border-left:0;border-top:1px solid #202b3b}
  .direction-box.say .direction-text{font-size:16px}.segment-card{margin:10px 10px 14px}
}

@media(max-width:560px){
  .wrap{padding-inline:13px}
  nav{align-items:flex-start;gap:10px}.brand-wordmark span{display:none}.logo{gap:8px}.brand-mark-img{width:36px;height:36px}.brand-wordmark strong{font-size:12px}
  .nav{justify-content:flex-end}.nav .btn{font-size:10px;padding-inline:8px}
  .hero{padding-top:8px}.hero h1 br{display:none}.hero h1{font-size:clamp(38px,12.2vw,52px)}
  .brand-feature-strip{grid-template-columns:1fr}.brand-feature+.brand-feature{border-left:0;border-top:1px solid #202a39}.brand-feature{min-height:auto}
  .pricing{grid-template-columns:1fr}.price ul{min-height:0}
  .form,.results{padding:13px}.row{grid-template-columns:1fr}
  .account{align-items:flex-start}.account #usageLabel{white-space:nowrap}
  .plan-upgrade{align-items:flex-start;flex-direction:column;gap:10px}.plan-upgrade .btn{width:100%}
  .script-actions{grid-template-columns:1fr 1fr}.script-actions .script-copy{grid-column:1/-1}
  .hook-row{align-items:stretch}.hook-save{min-width:64px}
  .upgrade-panel{padding:22px;min-height:340px}
}

/* Workspace readability pass */
.results .workspace-kicker{font-size:10px;color:#9d98ad;letter-spacing:.14em}
.results .workspace-meta-chip{font-size:11px;color:#c0c8d4;min-height:25px;padding:5px 8px}
.results .workspace-meta-empty{font-size:11.5px;color:#929dad}
.results .workspace-head .account b{font-size:12px}
.results .workspace-head .account small{font-size:11px;color:#a4afbf}
.results .workspace-head .account #usageLabel{font-size:11px!important;color:#a5afbd!important}
.results .workspace-new{font-size:11px}
.results .workspace-nav-label{font-size:9.5px;color:#8f99aa;letter-spacing:.12em}
.results .workspace-nav-wrap .tab{font-size:11.5px;color:#a6afbd}
.results .workspace-nav-wrap .tab.active{color:#f0ecff}
.results .workspace-tool-row .tool .btn{font-size:10.5px;color:#a9b2bf}
.results .script-meta .meta-pill,.results .stage-pill,.results .meta-pill{font-size:11px}
.results .script-strategy{font-size:12px!important;color:#a8b1bf!important;line-height:1.5}
.results .eyebrow{font-size:10px}
.results .segment-time{font-size:11px;color:#a6b0bf}
.results .support-label{font-size:10px;color:#8793a6}
.results .support-text{font-size:12px;line-height:1.55;color:#aab4c2}
.results .support-text.screen{color:#cbd2dc}
.results .section p{color:#bcc4cf;line-height:1.58}
.results .hook{font-size:13.5px;line-height:1.55;color:#d2d7df}
.results .tag{font-size:11px}
.results .source{font-size:12.5px;color:#d0d6df;line-height:1.5}
.results .source small{font-size:10.5px;color:#909cad}
.results .styles-intro p{font-size:13px;color:#b8c1cf;line-height:1.6}
.results .style-manager-head h3{font-size:15px}
.results .style-manager-details{font-size:12px;color:#acb6c5;line-height:1.65}
.results .saved-hook-text{font-size:13px;line-height:1.55;color:#eef1f5}

/* Keep Library navigation grouped with Campaign tabs on desktop */
.results .workspace-nav-label.library{margin-left:8px!important}

@media(max-width:560px){
  .results .workspace-kicker{font-size:10px}
  .results .workspace-meta-chip{font-size:10.5px}
  .results .workspace-nav-wrap .tab{font-size:11.5px}
  .results .support-text{font-size:12.5px}
  .results .hook{font-size:14px}
}

/* Keep all workspace tabs on one row so Library items stay together. */
.results .workspace-nav-wrap .tabs{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none}
.results .workspace-nav-wrap .tabs::-webkit-scrollbar{display:none}
.results .workspace-nav-wrap .tab,.results .workspace-nav-label{flex:0 0 auto}
.results .workspace-nav-label.library{margin-left:8px!important}


/* Mobile viewport containment */
html,body{max-width:100%;overflow-x:clip}
.wrap{width:100%;margin-inline:auto}
.grid,.grid>*,
.form,.results,
.workspace-head,.workspace-head-main,.workspace-head-side,
.workspace-nav-wrap,.workspace-nav-wrap .tabs,
.account,.plan-upgrade,
#content,.empty{
  min-width:0;
  max-width:100%;
}
input,select,textarea{min-width:0;max-width:100%}
.results{overflow:hidden}
.workspace-nav-wrap{overflow:hidden}
.workspace-nav-wrap .tabs{width:100%;max-width:100%}

@media(max-width:900px){
  .wrap{width:100%;max-width:100%;margin:0 auto}
  #studio.grid{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr)}
  #studio>.form,#studio>.results{width:100%;max-width:100%;min-width:0}
}

@media(max-width:560px){
  body{width:100%;max-width:100%;overflow-x:hidden}
  .wrap{width:100%;max-width:100%;padding-left:14px;padding-right:14px}
  nav,.hero,#studio,footer{width:100%;max-width:100%;margin-left:auto;margin-right:auto}
  .hero{padding-left:0;padding-right:0}
  .hero h1,.hero p,.hero-guidance{max-width:100%}
  .form,.results{width:100%;max-width:100%;min-width:0}
  .campaign-brief-head{width:100%;min-width:0}
  .campaign-brief-head h2{min-width:0}
  .workspace-head{width:100%;max-width:100%;min-width:0}
  .workspace-head-side{width:100%;max-width:100%;min-width:0}
  .workspace-head .account{min-width:0;width:100%;max-width:100%}
  .workspace-head .account .account-usage-wrap{min-width:0}
  .workspace-nav-wrap{width:100%;max-width:100%;min-width:0}
  .workspace-nav-wrap .tabs{width:100%;max-width:100%;min-width:0;overscroll-behavior-inline:contain}
  .workspace-tool-row{width:100%;max-width:100%}
  .empty{width:100%;max-width:100%;min-width:0}
  .results #content{width:100%;max-width:100%;min-width:0}
  .script-card,.section,.history-intro,.history-archive{max-width:100%;min-width:0}
}