/* Shared brief chrome: sticky progress header, sidebar step states, thank-you page.
   Loaded by every Binate_*_Brief.html AFTER the page's own <style> block, so these
   rules win on the properties they set and each brief keeps its own palette.

   Selectors are deliberately prefixed with .success and properties are reset
   explicitly rather than left to inherit. Each brief still carries its original
   light-theme success styles inline, and some of those (notably `.success p`)
   outspecify a bare `.success-sub`, so unprefixed rules would silently lose. */

/* ── SIDEBAR LOGO ──
   The gap under the brand used to come from the "Design & Development" line's
   margin-bottom:48px. That line was removed with the old lockup, which took the
   spacing with it and left the logo sitting on the heading, so the margin now
   belongs to the logo itself. Sized down from 150px: the wordmark carries a mark
   and heavier weight than the text it replaced, so it read as oversized at the
   same width. */
.brief-logo{display:block;width:124px;height:auto;margin:0 0 44px}
@media(max-width:900px){.brief-logo{width:112px;margin-bottom:24px}}

/* ── STICKY PROGRESS HEADER ──
   Sits above the form and stays put while the client scrolls, so the completion
   percentage is always visible. .stuck adds the lift shadow once it detaches. */
.page-header{position:sticky;top:0;z-index:40;background:var(--paper);transition:box-shadow .25s ease}
.page-header.stuck{box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px -14px rgba(0,0,0,.22)}

/* ── SIDEBAR STEPS ──
   The numeral is hidden on completed steps so the dot shows only the tick
   instead of rendering "1✓". */
.step.done .step-dot{font-size:0}
.step.done .step-dot::after{font-size:12px}

/* ── THANK YOU PAGE ──
   Fits a single viewport at >=600px tall and scrolls gracefully below that.
   All vertical rhythm derives from --ty-gap so the block scales as one unit.
   padding/max-width/margin are zeroed here to neutralise the inline
   `.success{padding:...;max-width:520px;margin:0 auto}` each brief still ships,
   which would otherwise pin this full-screen overlay to a 520px column. */
.success{
  display:none;position:fixed;inset:0;z-index:999;
  background:var(--ink);color:var(--paper);
  overflow-y:auto;text-align:center;
  padding:0;margin:0;max-width:none;
  --ty-gap:clamp(10px,2.2vh,22px);
}
.success.on{display:flex;align-items:center;justify-content:center;padding:calc(var(--ty-gap) * 1.4) 24px}
.success::before{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:820px;height:820px;max-width:150vw;background:radial-gradient(circle,rgba(232,39,42,.16) 0%,transparent 62%);pointer-events:none}
.success .success-wrap{position:relative;width:100%;max-width:520px;margin:auto;animation:ty-rise .7s cubic-bezier(.16,1,.3,1) both}
@keyframes ty-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.success .success-badge{margin-bottom:var(--ty-gap);display:flex;justify-content:center}
.success .success-badge svg{width:clamp(48px,7vh,64px);height:auto}
.success .ty-ring{animation:ty-pop .6s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes ty-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.success .ty-check{stroke-dasharray:28;stroke-dashoffset:28;animation:ty-draw .5s ease .5s forwards}
@keyframes ty-draw{to{stroke-dashoffset:0}}

.success .ty-eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.success h2{font-family:'Inter',sans-serif;font-size:clamp(26px,4.4vh,38px);font-weight:700;color:var(--paper);margin-bottom:8px;letter-spacing:0;line-height:1.1}
.success p.success-sub{font-size:15px;color:rgba(255,255,255,.55);line-height:1.5;margin:0 0 var(--ty-gap)}

.success .success-steps{text-align:left;display:flex;flex-direction:column;gap:var(--ty-gap);margin-bottom:var(--ty-gap);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:calc(var(--ty-gap) * 1.1) 22px}
.success .ss-step{display:flex;gap:13px;align-items:flex-start}
.success .ss-icon{font-size:20px;flex-shrink:0;margin-top:1px;line-height:1.2}
.success .ss-title{font-size:14px;font-weight:600;color:var(--paper);margin-bottom:2px}
.success .ss-body{font-size:13px;color:rgba(255,255,255,.5);line-height:1.45}

.success .success-contact{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:var(--ty-gap)}
.success .success-contact a{color:var(--paper);text-decoration:none;font-weight:500;border-bottom:1px solid rgba(232,39,42,.7);padding-bottom:1px}

.success .ty-redirect{border-top:1px solid rgba(255,255,255,.09);padding-top:var(--ty-gap)}
.success .ty-count{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:10px}
.success .ty-count b{color:var(--paper);font-weight:600}
.success .ty-meter{height:2px;width:100%;max-width:200px;margin:0 auto calc(var(--ty-gap) * .8);background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.success .ty-meter-fill{height:100%;width:100%;background:var(--red);transform-origin:left;animation:ty-drain 5s linear forwards}
@keyframes ty-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.success .ty-btn{display:inline-block;background:var(--paper);color:var(--ink);font-size:14px;font-weight:600;padding:11px 24px;border-radius:999px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.success .ty-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(255,255,255,.5)}

@media(prefers-reduced-motion:reduce){
  .success .success-wrap,
  .success .ty-ring,
  .success .ty-check,
  .success .ty-meter-fill{animation:none}
  .success .ty-check{stroke-dashoffset:0}
}