
.scvb{--p:#D6A84F;--dark:#111827;--muted:#4B5563;--line:#E3E5E8;--soft:#F7F8FA;max-width:1120px;margin:0 auto;font-family:inherit;color:var(--dark)}
.scvb *{box-sizing:border-box}
.scvb__header{text-align:center;padding:20px 14px 30px}
.scvb__eyebrow{display:inline-block;font-size:18px;font-weight:900;letter-spacing:.11em;color:var(--p);margin-bottom:8px}
.scvb__header h2{font-size:clamp(24px,3vw,32px);line-height:1.08;margin:0 auto 10px;max-width:800px;letter-spacing:-.025em}
.scvb__header p{font-size:14px;line-height:1.5;margin:0 auto 10px;max-width:680px;color:var(--muted)}
.scvb__trust{font-size:12px;font-weight:800;color:var(--dark)}
.scvb__steps{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.scvb__main{min-width:0}
.scvb__step{display:flex;gap:13px;align-items:flex-start;margin:24px 0 14px}
.scvb__step>b{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:var(--dark);color:#fff;font-size:14px}
.scvb__step h3{font-size:20px;line-height:1.2;margin:0 0 4px}
.scvb__step p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}

.scvb__voices{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.scvb__voice{display:block;position:relative;border:2px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:.18s ease;overflow:hidden}
.scvb__voice:nth-child(1),.scvb__voice:nth-child(2),.scvb__voice:nth-child(3){grid-column:span 2}
.scvb__voice:nth-child(4){grid-column:2/span 2}.scvb__voice:nth-child(5){grid-column:4/span 2}
.scvb__voice:hover{border-color:#B4862F;transform:translateY(-1px)}
.scvb__voice.is-selected{border-color:var(--p);box-shadow:0 0 0 4px rgba(214,168,79,.14)}
.scvb__voice input{position:absolute;opacity:0}
.scvb__voice-card{display:block;padding:17px}
.scvb__voice-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scvb__voice-top strong{font-size:19px}
.scvb__voice-top i{width:24px;height:24px;border:2px solid #b8b1c0;border-radius:50%;position:relative;flex:0 0 24px}
.scvb__voice.is-selected .scvb__voice-top i{border-color:var(--p)}
.scvb__voice.is-selected .scvb__voice-top i:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--p)}
.scvb__voice-action{display:inline-block;margin:11px 0 8px;padding:5px 10px;border-radius:999px;background:#f1eaff;color:var(--p);font-size:10px;font-weight:900;letter-spacing:.04em}
.scvb__listen-label{display:block;font-size:11px;font-weight:800;margin-bottom:5px}
.scvb__voice.is-selected .scvb__voice-action{background:var(--p);color:#fff}
.scvb__voice audio{display:block;width:100%;height:38px}
.scvb__voice small{display:block;margin-top:8px;font-size:12px;color:var(--muted);font-weight:700}

.scvb__quantity{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scvb__quantity>strong{grid-column:1/-1;font-size:15px;margin-bottom:1px}
.scvb__quantity label{display:block;border:2px solid var(--line);border-radius:13px;background:#fff;padding:12px 13px;cursor:pointer;transition:.18s ease}
.scvb__quantity label:hover{border-color:#B4862F}
.scvb__quantity label.is-selected{border-color:var(--p);background:#FAF3E4;box-shadow:0 0 0 3px rgba(214,168,79,.10)}
.scvb__quantity input{position:absolute;opacity:0}
.scvb__quantity label span{display:flex;align-items:center;gap:7px;font-size:13px}
.scvb__quantity label span b{font-size:21px;color:var(--p)}
.scvb__quantity em{margin-left:auto;font-style:normal;font-weight:900;font-size:14px}

.scvb__scripts{display:grid;gap:13px}
.scvb__script-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:15px}
.scvb__script-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
.scvb__script-heading strong{font-size:16px}
.scvb__script-heading span{font-size:12px;font-weight:800;color:var(--muted)}
.scvb__script-card textarea{display:block;width:100%;min-height:140px;margin-top:9px;border:1px solid #d7d0df;border-radius:10px;padding:12px;font:inherit;line-height:1.5;resize:vertical}
.scvb__script-card textarea:focus{outline:3px solid rgba(214,168,79,.16);border-color:var(--p)}
.scvb__generator{font-size:13px;color:var(--muted);margin:10px 0 0}
.scvb__generator a{font-weight:900;color:var(--p);text-decoration:underline}

.scvb__summary{position:sticky;top:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(17,24,39,.08);overflow:hidden}
.scvb__summary:before{content:"";display:block;height:5px;background:var(--p)}
.scvb__summary>*{margin-left:20px;margin-right:20px}
.scvb__summary-heading{font-size:21px;font-weight:900;margin-top:19px;margin-bottom:17px}
.scvb__summary p{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);padding:10px 0;border-bottom:1px solid #eee}
.scvb__summary p strong{color:var(--dark);text-align:right}
.scvb__summary hr{border:0;border-top:1px solid var(--line);margin-top:16px}
.scvb__summary h3:not(:first-child){display:flex;justify-content:space-between;align-items:center;font-size:20px;margin-top:17px}
.scvb__summary-price{font-size:25px}
.scvb__order{width:calc(100% - 40px);margin:15px 20px 10px;min-height:60px;border:0;border-radius:11px;background:var(--p);color:#fff;font-size:15px;font-weight:900;letter-spacing:.01em;cursor:pointer;box-shadow:0 7px 18px rgba(214,168,79,.25);transition:.18s ease}
.scvb__order:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(214,168,79,.30)}
.scvb__order:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.scvb__summary small{display:block;text-align:center;color:var(--muted);font-size:11px;padding:0 20px 19px}

.scvb__payments{margin:0 20px 19px;text-align:center}
.scvb__payment-title{font-size:11px;font-weight:900;color:var(--dark);margin:2px 0 9px}
.scvb__payment-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.scvb__payment-logo{height:34px;min-width:0;padding:5px 7px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:#fff}
.scvb__payment-logo img{display:block;width:auto;max-width:72px;height:20px;max-height:20px;object-fit:contain}
.scvb__payment-note{font-size:10px;line-height:1.35;font-weight:700;color:var(--muted);margin-top:8px}
.scvb__status{
    margin-top:14px;
    padding:12px 16px;
    border:1px solid #D6A84F;
    border-radius:10px;
    background:#FAF3E4;
    color:#111827;
    font-size:14px;
    line-height:1.45;
    font-weight:700;
    text-align:center;
}
.scvb__status:before{
    content:"✓";
    display:inline-block;
    margin-right:8px;
    color:#B4862F;
    font-weight:900;
}

@media(max-width:850px){
 .scvb__steps{grid-template-columns:1fr}
 .scvb__summary{position:sticky;bottom:10px;top:auto;z-index:5;box-shadow:0 5px 25px rgba(30,18,45,.16)}
}
@media(max-width:650px){
 .scvb__voices{grid-template-columns:1fr}
 .scvb__quantity{grid-template-columns:repeat(2,1fr)}
 .scvb__header{padding-top:10px}
 .scvb__header h2{font-size:30px}
 .scvb__step{margin-top:20px}
 .scvb__summary>*{margin-left:16px;margin-right:16px}
 .scvb__order{width:calc(100% - 32px);margin-left:16px;margin-right:16px}
}

@media(max-width:650px){
 .scvb__eyebrow{font-size:16px}
 .scvb__header h2{font-size:25px}
 .scvb__header p{font-size:13px}
 .scvb__trust{font-size:11px}
}

/* v0.7.4 selection/counter refinements */
.scvb__voice{overflow:hidden}
.scvb__voice-card{position:relative}
.scvb__voice-top{position:relative}
.scvb__voice-top .scvb__radio{position:absolute;right:2px;top:2px;width:26px;height:26px;box-sizing:border-box;border:2px solid #aaa;border-radius:50%;background:#fff;z-index:2}
.scvb__voice.is-selected{border-width:3px;background:#FFFDF8;box-shadow:0 0 0 4px rgba(214,168,79,.16),0 8px 20px rgba(17,24,39,.08)}
.scvb__voice.is-selected .scvb__voice-top .scvb__radio{border-color:#D6A84F;background:#D6A84F}
.scvb__voice.is-selected .scvb__voice-top .scvb__radio:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900}
.scvb__voice.is-selected .scvb__voice-action:after{content:"  ✓ SELECTED"}
.scvb__script-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.scvb__script-heading strong{font-size:16px}
.scvb__script-heading span{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}

/* v0.7.5 typography and word-counter refinement */
.scvb .scvb__eyebrow{font-size:22px!important;line-height:1.15!important;font-weight:900!important;letter-spacing:.12em!important;color:#D6A84F!important}
.scvb .scvb__header h2{font-size:30px!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-.015em!important;margin-top:7px!important}
.scvb .scvb__header p{font-size:14px!important;line-height:1.45!important}
.scvb .scvb__trust{font-size:12px!important;font-weight:800!important}
.scvb__script-heading span{font-variant-numeric:tabular-nums}
.scvb__script-heading span.is-limit{font-weight:900}
@media(max-width:650px){
 .scvb .scvb__eyebrow{font-size:17px!important}
 .scvb .scvb__header h2{font-size:25px!important}
 .scvb .scvb__header p{font-size:13px!important}
 .scvb .scvb__trust{font-size:11px!important}
}

/* v0.7.10 — MOBILE ONLY
   Based directly on v0.7.5. Desktop layout and voice selection are unchanged.
*/
@media(max-width:650px){
  /* Keep the configurator inside the phone viewport. */
  .scvb{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:12px;
    overflow-x:clip;
  }

  /* Give mobile step headings controlled, readable sizing. */
  .scvb__step{
    width:100%;
    min-width:0;
    gap:12px;
  }
  .scvb__step>div{min-width:0}
  .scvb__step h3{
    font-size:25px!important;
    line-height:1.12!important;
  }
  .scvb__step p{
    font-size:13px!important;
    line-height:1.4!important;
  }

  /* Voices: one card per row. This does NOT alter desktop. */
  .scvb__voices{
    grid-template-columns:1fr!important;
    width:100%;
    gap:12px;
  }
  .scvb__voice{
    grid-column:1!important;
    width:100%;
    min-width:0;
  }

  /* Quantity selector: mobile cards show only number + price.
     The word "recording(s)" is deliberately omitted on small screens:
     the section heading already says "How many recordings?".
  */
  .scvb__quantity{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px;
    width:100%;
  }
  .scvb__quantity>strong{
    grid-column:1/-1;
    font-size:15px!important;
    line-height:1.2!important;
  }
  .scvb__quantity label{
    width:100%;
    min-width:0;
    min-height:72px;
    padding:10px 11px;
    display:flex;
    align-items:center;
  }
  .scvb__quantity label span{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center;
    column-gap:8px;
    width:100%;
    min-width:0;
    font-size:0!important;
    line-height:1.1;
  }
  .scvb__quantity label span b{
    grid-column:1;
    display:block;
    font-size:25px!important;
    line-height:1!important;
    color:var(--p);
  }
  .scvb__quantity label span:after{
    display:none!important;
    content:none!important;
  }
  .scvb__quantity label span em{
    grid-column:2;
    display:block;
    margin:0!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-style:normal;
    font-weight:900;
    white-space:nowrap;
  }

  /* No sticky summary over the mobile buying interface. */
  .scvb__summary{
    position:relative;
    top:auto;
    bottom:auto;
    width:100%;
    max-width:100%;
    margin-top:18px;
  }
  .scvb__summary>*{
    margin-left:16px;
    margin-right:16px;
  }
  .scvb__order{
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
  }
}

/* v0.7.13 — desktop order-summary positioning is handled by the JS fallback.
   Mobile is deliberately excluded at min-width:851px. */
@media(min-width:851px){
  .scvb__steps{overflow:visible!important;position:relative!important}
  .scvb__summary{align-self:start!important;}
}

/* v0.7.15 — voice-card name spacing */
.scvb__voice-person{display:block!important;min-width:0!important}
.scvb__voice-name{display:block!important;line-height:1.15!important;margin:0 0 3px!important}
.scvb__voice-role{display:block!important;line-height:1.25!important;margin:0!important}
.scvb__voice-person>span:last-child{display:block!important;min-width:0!important}
@media(max-width:650px){.scvb__voice-name{margin-bottom:3px!important}}

/* v0.7.16 — restore voice-card text below portrait */
.scvb__voice-person{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.scvb__voice-name,
.scvb__voice-role{
  display:block!important;
  width:100%!important;
}
