/* ============================================================
   characters.css — scoped to /characters and /order-received
   Uses the studio tokens from styles.css. Nothing here leaks
   into other pages; this file is only linked from those two.
   ============================================================ */

/* ---------- Hero ---------- */
.ch-hero{padding:clamp(64px,11vh,132px) clamp(20px,5vw,72px) clamp(32px,4vw,56px)}
.ch-hero h1{font-weight:700;letter-spacing:-0.05em;line-height:0.82;font-size:clamp(54px,11vw,168px)}
.ch-hero__sub{margin-top:clamp(22px,3vw,38px);max-width:30ch;font-size:clamp(17px,1.7vw,22px);line-height:1.45;letter-spacing:-0.01em}
.ch-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(26px,3.5vw,44px);font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.ch-facts b{color:var(--ink);font-weight:400}

/* ---------- Tier cards ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{position:relative;display:flex;flex-direction:column;gap:22px;background:var(--paper);padding:clamp(24px,2.8vw,36px);cursor:pointer;transition:background .18s,color .18s}
.tier input{position:absolute;opacity:0;pointer-events:none}
.tier:hover{background:var(--card)}
.tier__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tier__id{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);transition:color .18s}
.tier__tag{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:4px 9px;border-radius:999px;transition:border-color .18s,color .18s}
.tier__name{font-weight:700;font-size:clamp(26px,3vw,40px);letter-spacing:-0.04em;line-height:0.95}
.tier__price{font-weight:700;font-size:clamp(30px,3.4vw,46px);letter-spacing:-0.045em;line-height:1}
.tier__rule{height:1px;background:var(--line);transition:background .18s}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15px;line-height:1.45;color:var(--muted);transition:color .18s}
.tier li{display:flex;gap:11px}
.tier li span{color:var(--mist);flex:none;transition:color .18s}
.tier__pick{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.tier__dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--mist);flex:none;position:relative;transition:border-color .18s,background .18s}
.tier__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:transparent;transition:background .18s}

.tier.is-on{background:var(--blue);color:#fff}
.tier.is-on .tier__id{color:rgba(255,255,255,0.8)}
.tier.is-on .tier__tag{border-color:rgba(255,255,255,0.4);color:rgba(255,255,255,0.85)}
.tier.is-on .tier__rule{background:rgba(255,255,255,0.28)}
.tier.is-on ul{color:rgba(255,255,255,0.86)}
.tier.is-on li span{color:rgba(255,255,255,0.5)}
.tier.is-on .tier__pick{color:#fff}
.tier.is-on .tier__dot{border-color:#fff}
.tier.is-on .tier__dot::after{background:#fff}
.tier:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
.tier.is-on:has(input:focus-visible){outline-color:#fff;outline-offset:-4px}

.tier-note{margin-top:clamp(18px,2.4vw,28px);font-size:15px;line-height:1.55;color:var(--muted);max-width:62ch}
.tier-note a{color:var(--blue);border-bottom:1px solid rgba(40,52,235,0.3)}

/* ---------- Deliverables ---------- */
.del-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.del{background:var(--paper);padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px}
.del__k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue)}
.del__t{font-weight:700;font-size:clamp(18px,1.9vw,23px);letter-spacing:-0.03em;line-height:1.1}
.del p{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- Steps ---------- */
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(14px,3vw,40px);align-items:baseline;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.step__n{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--blue)}
.step h3{margin:0;font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:-0.035em;line-height:1.05}
.step p{margin:9px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:56ch}

/* ---------- The brief form ---------- */
.brief-col{max-width:1000px}
.brief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,44px) clamp(24px,4vw,64px)}
.f{display:flex;flex-direction:column}
.f--full{grid-column:1/-1}
.f__label{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.f__label i{font-style:normal;color:var(--blue)}
.f__opt{color:var(--muted);letter-spacing:0.1em}
.f__hint{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.inp{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;color:var(--ink);font-family:var(--sans);font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-0.015em;padding:8px 0 13px;transition:border-color .18s}
.inp::placeholder{color:var(--mist);font-weight:400}
.inp:hover{border-bottom-color:var(--muted)}
.inp:focus{outline:none;border-bottom-color:var(--blue)}
textarea.inp{min-height:82px;resize:vertical;line-height:1.45;font-size:clamp(15px,1.4vw,17px);font-weight:500}
.inp[type=date]{-webkit-appearance:none;appearance:none;min-height:46px;font-weight:500;font-size:17px;color:var(--muted)}
.inp[type=date]:focus{color:var(--ink)}

/* Uploader */
.drop{border:1px solid var(--line);background:var(--card);padding:clamp(20px,2.6vw,30px);text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.drop:hover,.drop.is-over{border-color:var(--blue);background:var(--bluesoft)}
.drop__t{font-weight:600;font-size:15px;letter-spacing:-0.01em}
.drop__s{margin-top:7px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.thumb{position:relative;width:76px;height:76px;border:1px solid var(--line);overflow:hidden;background:var(--card)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:0;right:0;width:22px;height:22px;border:0;background:var(--ink);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.thumb button:hover{background:var(--blue)}

/* Add-on + consent */
.opt{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);padding:16px 18px;cursor:pointer;transition:border-color .18s,background .18s}
.opt:hover{border-color:var(--muted)}
.opt.is-on{border-color:var(--blue);background:var(--bluesoft)}
.opt input{margin:2px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none}
.opt__body{flex:1;min-width:0}
.opt__t{display:block;font-weight:600;font-size:15px;letter-spacing:-0.01em}
.opt__s{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--muted);max-width:60ch}
.opt__p{margin-left:auto;font-weight:700;font-size:15px;letter-spacing:-0.02em;flex:none}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer}
.check input{margin:2px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none}
.check a{color:var(--blue)}

/* Sticky pay bar */
.paybar{position:sticky;bottom:0;z-index:40;margin-top:clamp(30px,4vw,48px);background:var(--ink);color:#fff;padding:16px clamp(18px,2.4vw,28px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.paybar__lines{display:flex;flex-direction:column;gap:4px;min-width:0}
.paybar__sel{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.62)}
.paybar__tot{font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.04em;line-height:1}
.paybar__right{display:flex;align-items:center;gap:16px;margin-left:auto}
.paybar__note{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);white-space:nowrap}
.pay{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;border:0;border-radius:999px;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.pay:hover{opacity:0.85}
.pay:disabled{opacity:0.45;cursor:default}
.pay .arr{font-size:13px}
.form-status{font-size:14px;line-height:1.5;margin:14px 0 0;min-height:1em}
.form-status.is-bad{color:#B3261E}

/* FAQ reuse */
.ch-faq .faq-row:last-child{border-bottom:0}

/* Confirmation page */
.done{padding:clamp(80px,14vh,180px) clamp(20px,5vw,72px)}
.done h1{font-weight:700;font-size:clamp(40px,7vw,96px);letter-spacing:-0.045em;line-height:0.9;max-width:16ch}
.done p{margin-top:clamp(20px,2.6vw,32px);font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:48ch}
.done__ref{margin-top:clamp(28px,3.4vw,44px);font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .tier-grid{grid-template-columns:1fr}
  .del-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .brief{grid-template-columns:1fr}
  .del-grid{grid-template-columns:1fr}
  .step{grid-template-columns:auto minmax(0,1fr);column-gap:16px}
  .paybar{padding:14px 16px}
  .paybar__right{width:100%;justify-content:space-between}
  .paybar__note{display:none}
  .pay{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .tier,.opt,.drop,.inp,.pay{transition:none}
}