/* Xerxes lead capture — side sheet + inline band.
   Component only: every rule is scoped to .xf-* so it cannot touch the host page.
   Paired with assets/lead-form.js, which injects the sheet markup. */
/* ============================================================ tokens
   Lifted from assets/apply-modal.css so this matches the live site. */
:root{
  --xf-red:#88181a;
  --xf-red-2:#a3232a;
  --xf-ink:#0e1a3d;
  --xf-text:#4b5468;
  --xf-line:rgba(14,26,61,.1);
  --xf-field:#f6f6f9;
  --xf-mute:#9aa0ae;
  --xf-ok:#1a9a5c;
  --xf-ease:cubic-bezier(.2,.8,.2,1);
  --xf-tint:#fdeef0;
}
body.xf-lock{overflow:hidden}

/* ============================================================ 1. INLINE BAND (the passive hook) */
.xf-band{
  position:relative;overflow:hidden;
  margin:0;padding:30px clamp(22px,3.4vw,42px);
  border-radius:24px;border:1px solid rgba(136,24,26,.14);
  background:
    radial-gradient(130% 150% at 100% 0,#fde8ea 0,rgba(253,232,234,0) 58%),
    linear-gradient(180deg,#fffdfd,#fdf6f7);
}
.xf-band::before{
  content:"";position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(136,24,26,.1),rgba(136,24,26,0) 68%);pointer-events:none
}
.xf-band-in{position:relative;display:flex;flex-wrap:wrap;gap:26px 40px;align-items:flex-end;justify-content:space-between}
.xf-band-copy{flex:1 1 290px;min-width:0}
.xf-band-copy h3{margin:0 0 7px;font-size:clamp(20px,2.2vw,25px);font-weight:800;letter-spacing:-.025em}
.xf-band-copy p{margin:0;font-size:14.5px;line-height:1.6;color:var(--xf-text);max-width:42ch}
.xf-band-form{flex:1 1 520px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.xf-band-form .xf-in{flex:1 1 180px;min-width:0}
.xf-band-form .xf-in--wide{flex:1.5 1 230px}
.xf-band-form input{
  width:100%;min-height:50px;padding:13px 15px;border:1.5px solid transparent;border-radius:13px;
  background:#fff;font:inherit;font-size:15px;color:var(--xf-ink);outline:0;
  box-shadow:inset 0 0 0 1px rgba(14,26,61,.07);
  transition:border-color .25s,box-shadow .25s
}
.xf-band-form input::placeholder{color:var(--xf-mute)}
.xf-band-form input:focus{border-color:var(--xf-red);box-shadow:0 0 0 4px rgba(136,24,26,.1)}
.xf-band-form input[aria-invalid="true"]{border-color:#d0343c;box-shadow:0 0 0 4px rgba(208,52,60,.12)}
.xf-band-send{
  min-height:50px;padding:0 24px;border:0;border-radius:13px;cursor:pointer;
  background:var(--xf-ink);color:#fff;font:inherit;font-size:15px;font-weight:700;
  transition:background .22s,transform .22s var(--xf-ease)
}
.xf-band-send:hover{background:var(--xf-red);transform:translateY(-1px)}
.xf-band-err{flex:1 1 100%;margin:2px 0 0;font-size:12.5px;font-weight:600;color:#d0343c;display:none}
.xf-band.is-err .xf-band-err{display:block}
.xf-band-done{display:none}
.xf-band.is-sent .xf-band-form,.xf-band.is-sent .xf-band-copy p,.xf-band.is-sent .xf-band-copy h3{display:none!important}

/* ---- sent state: the band turns into a bold brand-red confirmation card ---- */
.xf-band.is-sent{
  border-color:transparent;color:#fff;
  background:
    radial-gradient(120% 160% at 100% 0,rgba(255,120,130,.38) 0,rgba(255,120,130,0) 55%),
    radial-gradient(90% 140% at 0 100%,rgba(40,0,4,.55) 0,rgba(40,0,4,0) 60%),
    linear-gradient(120deg,#6e1012 0%,#88181a 45%,#b5262e 100%);
  box-shadow:0 26px 60px -24px rgba(136,24,26,.65),inset 0 1px 0 rgba(255,255,255,.18);
  animation:xfBandIn .6s var(--xf-ease) both
}
.xf-band.is-sent::before{
  right:-60px;top:-120px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 66%);
  animation:xfGlow 3.2s ease-in-out infinite
}
.xf-band.is-sent::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);mask-image:linear-gradient(90deg,transparent 35%,#000)
}
.xf-band.is-sent .xf-band-in{z-index:1}
.xf-band.is-sent .xf-band-copy{flex:1 1 100%}
.xf-band.is-sent .xf-band-done{display:flex;align-items:center;flex-wrap:wrap;gap:18px 22px}
.xf-bd-badge{position:relative;flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--xf-red);box-shadow:0 12px 28px -8px rgba(0,0,0,.45);
  animation:xfPop .55s .1s cubic-bezier(.2,1.5,.4,1) both}
.xf-bd-badge svg{width:30px;height:30px}
.xf-bd-badge svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:xfTick .45s .45s ease forwards}
.xf-bd-badge i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  animation:xfRing 1.8s .6s ease-out infinite}
.xf-bd-badge i+i{animation-delay:1.5s}
.xf-bd-copy{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px;animation:xfUp .5s .2s var(--xf-ease) both}
.xf-bd-copy b{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:#fff}
.xf-bd-copy span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
.xf-bd-tags{display:flex;flex-wrap:wrap;gap:8px;animation:xfUp .5s .35s var(--xf-ease) both}
.xf-bd-tags em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  padding:8px 14px 8px 30px;border-radius:999px;position:relative;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.xf-bd-tags em::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
@keyframes xfBandIn{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
@keyframes xfGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes xfPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes xfTick{to{stroke-dashoffset:0}}
@keyframes xfRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@keyframes xfUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){
  .xf-band.is-sent .xf-band-done{gap:14px}
  .xf-bd-badge{width:52px;height:52px}.xf-bd-badge svg{width:26px;height:26px}
  .xf-bd-tags{flex:1 1 100%}
}
.xf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ============================================================ 2. SIDE SHEET (the discovery-call form) */
.xf-root{position:fixed;inset:0;z-index:2000;display:none}
.xf-root.is-open{display:block}
.xf-scrim{
  position:absolute;inset:0;background:rgba(10,14,30,.52);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s ease
}
.xf-root.is-in .xf-scrim{opacity:1}

.xf-sheet{
  position:absolute;top:0;right:0;height:100%;width:min(560px,100%);
  display:flex;flex-direction:column;background:#fff;
  box-shadow:-30px 0 70px rgba(10,14,30,.28);
  transform:translateX(100%);transition:transform .34s var(--xf-ease)
}
.xf-root.is-in .xf-sheet{transform:none}

.xf-head{position:relative;flex:none;padding:26px 30px 0}
.xf-ctx{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:6px 13px 6px 9px;border-radius:999px;background:var(--xf-tint);
  font-size:12px;font-weight:800;letter-spacing:.01em;color:var(--xf-red)
}
.xf-ctx i{width:6px;height:6px;border-radius:50%;background:var(--xf-red);display:block}
.xf-head h2{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.xf-head .xf-sub{margin:0;font-size:14.5px;line-height:1.6;color:var(--xf-text)}
.xf-x{
  position:absolute;top:22px;right:24px;width:38px;height:38px;border:0;cursor:pointer;
  border-radius:50%;background:var(--xf-field);color:var(--xf-ink);
  display:grid;place-items:center;transition:background .2s,transform .2s var(--xf-ease)
}
.xf-x:hover{background:#ecedf3;transform:rotate(90deg)}
.xf-x svg{width:16px;height:16px}

.xf-prog{flex:none;display:flex;align-items:center;gap:12px;padding:20px 30px 0}
.xf-prog-track{flex:1;height:3px;border-radius:3px;background:var(--xf-field);overflow:hidden}
.xf-prog-fill{height:100%;width:50%;border-radius:3px;background:var(--xf-red);transition:width .4s var(--xf-ease)}
.xf-prog-txt{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--xf-mute);white-space:nowrap}

#xfForm{flex:1;min-height:0;display:flex;flex-direction:column}
.xf-body{flex:1;min-height:0;overflow-y:auto;padding:24px 30px 8px;scrollbar-width:thin}
.xf-step{display:none}
.xf-step.is-on{display:block;animation:xfIn .34s var(--xf-ease)}
@keyframes xfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.xf-q{margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:-.01em}
.xf-q em{font-style:normal;color:var(--xf-red)}
.xf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;border:0}
.xf-chip{position:relative}
.xf-chip input{position:absolute;opacity:0;width:0;height:0}
.xf-chip span{
  display:block;padding:10px 15px;border-radius:12px;cursor:pointer;
  background:var(--xf-field);border:1.5px solid transparent;
  font-size:14px;font-weight:600;color:var(--xf-text);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--xf-ease)
}
.xf-chip span:hover{background:#eeeef4}
.xf-chip input:checked+span{background:#fff;border-color:var(--xf-red);color:var(--xf-red);font-weight:800}
.xf-chip input:focus-visible+span{box-shadow:0 0 0 4px rgba(136,24,26,.14)}

.xf-field{margin:0 0 16px}
.xf-field label{display:block;margin:0 0 7px;font-size:13px;font-weight:700;color:var(--xf-ink)}
.xf-field label em{font-style:normal;color:var(--xf-red)}
.xf-field label small{font-weight:600;color:var(--xf-mute)}
.xf-field input,.xf-field textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1.5px solid transparent;border-radius:12px;
  background:var(--xf-field);font:inherit;font-size:15px;color:var(--xf-ink);outline:0;
  transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none
}
.xf-field textarea{min-height:104px;resize:vertical;line-height:1.55}
.xf-field input::placeholder,.xf-field textarea::placeholder{color:var(--xf-mute)}
.xf-field input:hover,.xf-field textarea:hover{background:#f1f1f6}
.xf-field input:focus,.xf-field textarea:focus{background:#fff;border-color:var(--xf-red);box-shadow:0 0 0 4px rgba(136,24,26,.1)}
.xf-field input[aria-invalid="true"],.xf-field textarea[aria-invalid="true"]{border-color:#d0343c;background:#fff;box-shadow:0 0 0 4px rgba(208,52,60,.1)}
.xf-err{display:none;margin:6px 0 0;font-size:12.5px;font-weight:600;color:#d0343c}
.xf-field.is-err .xf-err{display:block}
.xf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){.xf-row{grid-template-columns:1fr}}

.xf-consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 2px;font-size:13px;line-height:1.55;color:var(--xf-text)}
.xf-consent input{flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--xf-red)}
.xf-consent a{color:var(--xf-red);font-weight:700}

.xf-foot{
  flex:none;display:flex;gap:12px;align-items:center;
  padding:16px 30px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--xf-line);background:#fff
}
.xf-back{
  border:0;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;
  color:var(--xf-text);padding:10px 4px;display:none;align-items:center;gap:7px
}
.xf-back:hover{color:var(--xf-red)}
.xf-back svg{width:15px;height:15px}
.xf-next{
  margin-left:auto;min-height:50px;padding:0 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--xf-red);color:#fff;font:inherit;font-size:15px;font-weight:700;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 24px rgba(136,24,26,.24);
  transition:background .22s,transform .2s var(--xf-ease),box-shadow .22s
}
.xf-next:hover:not(:disabled){background:var(--xf-red-2);transform:translateY(-2px)}
.xf-next:disabled{opacity:.6;cursor:default}
.xf-next svg{width:17px;height:17px}
.xf-next.is-loading span{opacity:.5}

/* success */
.xf-done{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:40px 36px;text-align:center}
.xf-root.is-sent .xf-body,.xf-root.is-sent .xf-foot,.xf-root.is-sent .xf-prog,.xf-root.is-sent .xf-head .xf-sub,.xf-root.is-sent .xf-head h2{display:none}
.xf-root.is-sent .xf-done{display:flex}
.xf-tick{
  width:74px;height:74px;border-radius:50%;background:#e8f7ee;color:var(--xf-ok);
  display:grid;place-items:center;margin:0 0 20px;animation:xfPop .5s cubic-bezier(.2,1.4,.4,1)
}
.xf-tick svg{width:34px;height:34px}
@keyframes xfPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.xf-done h3{margin:0 0 10px;font-size:25px;font-weight:800;letter-spacing:-.025em}
.xf-done p{margin:0 0 24px;font-size:15px;line-height:1.65;color:var(--xf-text);max-width:34ch}

/* mobile: bottom sheet */
@media (max-width:720px){
  .xf-sheet{
    top:auto;bottom:0;right:0;left:0;width:100%;height:min(94vh,860px);height:min(94dvh,860px);max-height:calc(100dvh - 8px);
    border-radius:24px 24px 0 0;transform:translateY(100%);
    box-shadow:0 -24px 60px rgba(10,14,30,.3)
  }
  .xf-root.is-in .xf-sheet{transform:none}
  .xf-head{padding:14px 22px 0}
  .xf-head::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:#dfe1ea;margin:0 auto 16px}
  .xf-head h2{font-size:22px}
  .xf-x{top:10px;right:16px;width:34px;height:34px}
  .xf-prog,.xf-body,.xf-foot{padding-left:22px;padding-right:22px}
}
@media (prefers-reduced-motion:reduce){
  .xf-root,.xf-root *,.xf-band,.xf-band *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================ band placement
   Wrapper used where the band is dropped into an existing page. */
.xf-band-wrap{display:none;max-width:1680px;margin:0 auto;padding:clamp(38px,5vw,74px) clamp(18px,4vw,48px) 0}
.xf-band-wrap.is-ready{display:block}
@media (max-width:640px){.xf-band-wrap{padding-top:34px}}

/* popup above header */
.xf-root{z-index:2000!important}
body.xf-lock header,body.xf-lock header.hdr-fix,body.xf-lock .xh-header{z-index:1!important}
html:has(body.xf-lock){overflow:hidden;overscroll-behavior:none}
body.xf-lock{overflow:hidden;overscroll-behavior:none}
.xf-sheet{overscroll-behavior:contain}
@media (max-width:720px){.xf-sheet{height:min(94vh,860px);height:min(94dvh,860px);max-height:calc(100dvh - 8px)}}