/* Quiet by default. Boxes only where something is genuinely separate or selectable,
   space and type hierarchy everywhere else. The green means one thing: this is chosen,
   or this is the action. */

:root{
  --bg:#FCFCFB; --surface:#fff; --ink:#15181A; --muted:#5E6A6E; --faint:#8A9499;
  --line:#E7E9E6; --line-soft:#F0F1EE;
  --accent:#0A7A54; --accent-soft:#EAF4EF;
  --warn:#8A6212; --warn-soft:#FBF4E4; --danger:#A93226; --danger-soft:#FBEDEB;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121413;--surface:#191C1B;--ink:#E9ECEA;--muted:#9BA5A3;--faint:#78827F;
        --line:#262A28;--line-soft:#1F2321;
        --accent:#4FCE9A;--accent-soft:#15271F;
        --warn:#DCA94A;--warn-soft:#241F12;--danger:#E8817A;--danger-soft:#251716;}
}

*{box-sizing:border-box}
/* display:grid below would otherwise beat the browser own hide rule */
[hidden]{display:none !important}

body{margin:0;background:var(--bg);color:var(--ink);
     font:17px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;
     -webkit-font-smoothing:antialiased;padding-bottom:104px}
a{color:var(--accent)}

/* ---------- header ---------- */

header{position:sticky;top:0;z-index:20;background:var(--bg);
       border-bottom:1px solid var(--line);padding:16px 28px 14px}
.tabs{display:flex;gap:0;flex-wrap:wrap;margin-bottom:10px}
.tab{font-size:15px;font-weight:500;letter-spacing:.005em;padding:3px 0;margin-right:26px;
  color:var(--faint);cursor:pointer;border-bottom:2px solid transparent;transition:color .12s}
.tab:hover{color:var(--muted)}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.hint{color:var(--muted);font-size:14px;margin:0 0 12px;max-width:70ch}
.controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* ---------- type ---------- */

main{padding:34px 28px;max-width:1180px}
.status{color:var(--faint);font-size:14px;margin-bottom:26px}

.panel{margin:0 0 34px;max-width:660px}
.panel.wide{max-width:1080px}
.panel + .panel{border-top:1px solid var(--line-soft);padding-top:32px}
.panel h2{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.panel h3{margin:26px 0 9px;font-size:15px;font-weight:600;letter-spacing:-.005em}
.panel h3:first-child{margin-top:0}
.panel p{margin:0 0 22px;color:var(--muted);font-size:15px;line-height:1.6;max-width:64ch}
.panel ul{margin:0 0 4px;padding-left:19px}
.panel li{margin-bottom:9px;font-size:15px;line-height:1.55;color:var(--muted);max-width:64ch}

/* the one panel that stays a card, because it is a form that appeared on request */
#addPanel{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px;max-width:640px}
#addPanel + .panel, #addPanel{border-top:0}

/* ---------- fields ---------- */

.field{margin-bottom:20px}
label{display:block;font-size:14.5px;font-weight:600;margin:0 0 7px;letter-spacing:-.003em}
.help{color:var(--faint);font-size:13.5px;line-height:1.5;margin:6px 0 0;max-width:60ch}

select,input[type=search],input[type=text],input[type=email],input[type=number],input[type=date],textarea{
  padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;
  min-width:0;width:100%;transition:border-color .12s,box-shadow .12s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
input[type=search]{flex:1 1 220px;width:auto}
header select{width:auto;min-width:190px}
textarea{resize:vertical;min-height:88px;line-height:1.6}
select:disabled,input:disabled,textarea:disabled{opacity:.45;cursor:not-allowed}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

.req{font-weight:500;font-size:12px;color:var(--faint);margin-left:8px;letter-spacing:.01em}

.chip{padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--muted);font-size:14px;cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .12s,color .12s,background .12s}
.chip:hover{border-color:var(--muted)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.chip.off{opacity:.35;cursor:not-allowed}
.picks{display:flex;gap:8px;flex-wrap:wrap}

/* a repeated block genuinely is a separate thing, so it keeps an edge */
.rowblock{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:22px;margin-bottom:14px;position:relative}
.rowblock .drop{position:absolute;top:14px;right:14px;padding:5px 12px;font-size:13px}
.rows{margin-bottom:14px}

/* ---------- buttons ---------- */

button{padding:11px 20px;border:0;border-radius:9px;background:var(--accent);color:#fff;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .12s}
button:hover{opacity:.9}
button:disabled{opacity:.35;cursor:not-allowed}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
button.ghost:hover{border-color:var(--muted);opacity:1}
button.small{padding:7px 14px;font-size:14px}

/* ---------- notes ---------- */

.note{border-radius:11px;padding:15px 17px;font-size:14.5px;line-height:1.55;margin:0 0 26px;
  max-width:660px}
.note strong{font-weight:600}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.bad{background:var(--danger-soft);color:var(--danger)}
.note.good{background:var(--accent-soft);color:var(--accent)}
.note ul{margin:9px 0 0;padding-left:19px}
.note li{margin-bottom:6px}

/* ---------- client list ---------- */

.clist{display:grid;gap:1px;max-width:820px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.crow{background:var(--bg);padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cmain{flex:1 1 260px;min-width:0}
.cname{font-weight:600;font-size:16px;letter-spacing:-.008em}
.csub{color:var(--muted);font-size:14px;margin-top:3px}
.clink{font-size:12.5px;color:var(--faint);font-family:ui-monospace,Consolas,monospace;
  word-break:break-all;margin-top:7px}
.cdone{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pill{font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:5px;
  background:var(--accent-soft);color:var(--accent)}
.pill.todo{background:transparent;color:var(--faint);border:1px solid var(--line)}
.pill.wait{background:var(--warn-soft);color:var(--warn)}

/* ---------- voices ---------- */

.vlist{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.vrow{display:flex;align-items:center;gap:15px;background:var(--bg);padding:13px 18px}
.vrow.sel{background:var(--accent-soft)}
.vplay{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0}
.vplay:hover{border-color:var(--muted)}
.vplay::after{content:"";border-left:11px solid var(--accent);border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}
.vrow.playing .vplay::after{border:0;width:11px;height:12px;margin:0;
  border-left:3.5px solid var(--accent);border-right:3.5px solid var(--accent)}
.vinfo{flex:1 1 auto;min-width:0}
.vname{font-weight:600;font-size:15px}
.vsub{color:var(--muted);font-size:13.5px;margin-top:2px}
.vpick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:13px;font-weight:700;color:transparent;line-height:1}
.vrow.sel .vpick{background:var(--accent);border-color:var(--accent);color:#fff}
.vtag{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent);margin-left:8px}

/* ---------- actors ---------- */

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color .12s,box-shadow .12s}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.stage{position:relative;aspect-ratio:3/4;background:var(--line-soft);cursor:pointer}
.stage img,.stage video{width:100%;height:100%;object-fit:cover;display:block}
/* the play control sits in the corner, never over the face */
.play{position:absolute;left:9px;bottom:9px;pointer-events:none}
.play span{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);
  display:grid;place-items:center;transition:opacity .15s,background .15s;backdrop-filter:blur(3px)}
.play span::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}
.card.playing .play span{opacity:0}
.stage:hover .play span{background:rgba(0,0,0,.75)}
.card.loading .play span{opacity:1;background:rgba(0,0,0,.55)}
.card.loading .play span::after{border:0;width:14px;height:14px;margin:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.snd{position:absolute;left:47px;bottom:12px;background:rgba(0,0,0,.7);color:#fff;
  font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;display:none}
.card.silent .snd{display:block}
.err{position:absolute;left:9px;right:9px;bottom:9px;background:rgba(0,0,0,.75);color:#fff;
  font-size:11.5px;padding:6px 9px;border-radius:7px;display:none;text-align:center}
.card.failed .err{display:block}
.tick{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.1);cursor:pointer;
  display:grid;place-items:center;font-size:14px;color:transparent;font-weight:700;line-height:1}
.card.sel .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.meta{padding:11px 13px 13px;cursor:pointer}
.nm{font-weight:600;font-size:14.5px}
.sub{color:var(--muted);font-size:13px;margin-top:3px}
.badges{margin-top:7px;display:flex;gap:5px;flex-wrap:wrap}
.b{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:4px;
   background:var(--accent-soft);color:var(--accent)}
.b.pro{background:var(--warn-soft);color:var(--warn)}

/* ---------- the three versions ---------- */

.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:34px}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;
  cursor:pointer;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.opt:hover{border-color:var(--muted)}
.opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.opt h3{margin:0 0 14px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.opt .body{white-space:pre-wrap;font-size:15.5px;line-height:1.72;flex:1 1 auto}
.opt .choose{margin-top:20px;font-size:14px;font-weight:600;color:var(--faint)}
.opt.on .choose{color:var(--accent)}

/* ---------- code and pasted blocks ---------- */

.sent{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px;
  font-size:12.5px;line-height:1.6;max-height:300px;overflow:auto;white-space:pre-wrap;
  word-break:break-word;font-family:ui-monospace,Consolas,monospace;margin:0 0 20px;
  color:var(--muted)}
code{background:var(--line-soft);border-radius:5px;padding:2px 6px;
  font-size:13px;font-family:ui-monospace,Consolas,monospace}

/* ---------- uploads ---------- */

.drop{border:1.5px dashed var(--line);border-radius:12px;padding:26px;text-align:center;
  background:var(--surface);margin-bottom:14px;transition:border-color .12s,background .12s}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.dropnote{color:var(--faint);font-size:14px;margin-left:12px}
.prog{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  margin-bottom:14px;position:relative;overflow:hidden}
.prog .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-soft);
  transition:width .15s}
.prog span{position:relative;font-size:14px;color:var(--muted)}
.linkadd{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.linkadd input{flex:1 1 auto}
.linkadd button{white-space:nowrap}
.alist{display:grid;gap:1px;margin-top:14px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.arow{display:flex;gap:12px;align-items:center;background:var(--bg);
  padding:12px 15px;flex-wrap:wrap}
.aname{font-weight:600;font-size:14.5px;flex:1 1 190px;min-width:0;word-break:break-all}
.ameta{color:var(--muted);font-size:13.5px;flex:1 1 170px}

/* ---------- bottom bar ---------- */

footer{position:fixed;bottom:0;left:0;right:0;background:var(--bg);
  border-top:1px solid var(--line);padding:15px 28px;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap;z-index:15}
.count{font-weight:500;color:var(--faint);font-size:14.5px}
.msg{font-size:14.5px}
.msg.ok{color:var(--accent)} .msg.err{color:var(--danger)}

@media (max-width:640px){
  header{padding:14px 18px 12px}
  main{padding:26px 18px}
  footer{padding:13px 18px}
  .tab{margin-right:20px;font-size:14.5px}
}

/* pricing */
.bignum{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.pill.bad{background:var(--danger-soft);color:var(--danger)}
.rowblock .cname{font-size:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* what a client can buy */
.opt .bignum{font-size:30px;font-weight:600;letter-spacing:-.025em;margin:0 0 10px}
.permonth{font-size:15px;font-weight:400;color:var(--faint);letter-spacing:0}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{margin-bottom:7px;font-size:14.5px;color:var(--muted)}
a.buy{display:block;text-align:center;margin-top:18px;padding:12px 18px;border-radius:9px;
  background:var(--accent);color:#fff;font-weight:600;font-size:15px;text-decoration:none}
a.buy:hover{opacity:.9}
.aprice{font-weight:600;font-size:15px;flex:0 0 auto}

/* the volume table */
.tablewrap{overflow-x:auto;margin-bottom:16px}
table.grid2{border-collapse:collapse;width:100%;font-size:14.5px}
table.grid2 th{text-align:left;font-weight:600;font-size:13px;color:var(--faint);
  padding:8px 14px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid2 td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.grid2 tr.now td{background:var(--accent-soft)}
.vm{margin-left:9px;font-size:13px;color:var(--accent);font-weight:600}
.vm.bad{color:var(--danger)}
.help em{font-style:normal;color:var(--muted)}


.gal


/* ---------- the ad gallery and the rate card ----------
   Shared by the public front page and by a client's own page, because they show the same
   two things and they must not drift apart.

   Every rule is scoped under .gal. Several of these names (card, grid, chip, body, play)
   already mean something else elsewhere in this file, and an unscoped .chip rule here
   silently restyled every option chip in the client's form. */

.gal .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.gal .chip{font-size:14px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--muted);cursor:pointer;transition:.12s}
.gal .chip:hover{border-color:var(--faint);color:var(--ink)}
.gal .chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}

.gal .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:26px}
.gal .card{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  overflow:hidden;display:flex;flex-direction:column}
.gal .frame{position:relative;background:#0d0f0e;line-height:0;cursor:pointer}
.gal .frame img{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.gal .frame.sq img{aspect-ratio:1/1;object-fit:contain;background:#0d0f0e}
.gal .frame video{width:100%;display:block;background:#000}
.gal .play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.4))}
.gal .play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 3px 14px rgba(0,0,0,.3)}
.gal .play span::after{content:"";border-left:15px solid #15181A;
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.gal .card .body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.gal .tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.gal .tag{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.gal .who{font-size:13px;color:var(--muted)}
.gal .num{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--accent);margin:2px 0 0}
.gal .basis{font-size:12.5px;color:var(--faint);line-height:1.5}
.gal .what{font-size:14.5px;line-height:1.55;color:var(--ink);margin:0;max-width:none}
.gal .why{font-size:14px;line-height:1.55;color:var(--muted);margin:0;max-width:none}
.gal .caveat{font-size:13px;line-height:1.55;color:var(--warn);background:var(--warn-soft);
  border-radius:9px;padding:10px 12px;margin:2px 0 0;max-width:none}
.gal .note{color:var(--faint);font-size:13.5px;line-height:1.6;max-width:62ch;margin:26px 0 0}

.gal .rate{display:grid;grid-template-columns:1fr auto;gap:10px 22px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line-soft)}
.gal .rate:last-child{border-bottom:0}
.gal .rate h3{margin:0 0 4px;font-size:16.5px;font-weight:600}
.gal .rate p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:56ch}
.gal .rate .amt{font-size:21px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.gal .rate .amt.free{font-size:15px;color:var(--accent);font-weight:600}

.gal .pks{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px;
  margin-top:8px}
.gal .pk{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:24px}
.gal .pk h3{margin:0 0 5px;font-size:17px;font-weight:600}
.gal .pk .amt{font-size:31px;font-weight:600;letter-spacing:-.028em;margin:10px 0 3px}
.gal .pk .per{font-size:13px;color:var(--faint);margin:0 0 15px}
.gal .pk p.pkblurb{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 15px;max-width:none}
.gal .pk ul{margin:0;padding-left:18px}
.gal .pk li{font-size:14.5px;line-height:1.5;color:var(--muted);margin-bottom:7px}

.gal .band{background:var(--accent-soft);border:1px solid var(--line);border-radius:15px;
  padding:24px 26px;margin:0 0 34px}
.gal .band h3{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.gal .band p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:58ch}

.gal .req{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line-soft)}
.gal .req h3{margin:0 0 12px;font-size:15px;font-weight:600}
.gal .req li{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:9px}
.gal .pk.custom{border-style:dashed;background:transparent}
.gal .pk .amt{white-space:nowrap}