/* The nav's sign-up button and the sign-up popup it opens (see signup.js).
   Built on the page's own tokens and .form styles, so it reads as part of the site. */

/* ---------- nav: the two buttons as a matched pair ---------- */
/* The base nav rules give every nav link a 2px bottom border for the current-page underline, and
   then zero it on buttons. Here both buttons get one equal border on all four sides and the same
   height, so they line up. */
.site-header .site-nav .btn{height:42px;padding:0 18px;border-width:1px;border-style:solid;font-weight:500;line-height:1}
/* .btn.btn--nav, not .btn--nav: the base .site-nav .btn{border-bottom:0} is just as specific, comes
   later, and its shorthand resets the bottom border colour to the white text colour. */
.site-header .btn.btn--nav{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.site-header .btn.btn--nav:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);color:#fff}
.site-header .site-nav .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (min-width:901px){.site-header .site-nav [data-signup]{margin-right:-20px}}
/* phones: sign up moves out of the collapsed menu into the bar, beside the menu button */
.site-header .nav-signup{display:none}
@media (max-width:900px){
  .site-header .nav-signup{display:inline-flex;height:40px;padding:0 16px;margin:0 -12px 0 auto;font-size:.95rem;font-weight:500;line-height:1;border-width:1px;border-style:solid;text-decoration:none}
  .site-header .nav-signup:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .site-header .site-nav [data-signup]{display:none}
  .site-header .site-nav .btn{height:48px;margin-top:18px}
}

/* ---------- popup ---------- */
.su{width:min(900px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:22px;color:var(--ink);overflow:hidden;
  /* each half painted to match its panel, so neither colour fringes the other's rounded corners */
  background:linear-gradient(90deg,var(--navy) 340px,#fff 340px);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.7)}
.su::backdrop{background:rgba(9,12,34,.78);backdrop-filter:blur(8px) saturate(.8);-webkit-backdrop-filter:blur(8px) saturate(.8)}
.su[open]{animation:su-in .28s cubic-bezier(.2,.8,.2,1)}
.su[open]::backdrop{animation:su-fade .28s ease-out}
@keyframes su-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes su-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.su[open],.su[open]::backdrop{animation:none}}
html:has(.su[open]){overflow:hidden}

.su-grid{display:grid;grid-template-columns:340px minmax(0,1fr);max-height:calc(100dvh - 32px)}

/* left: what signing up gets you, on the brand navy */
.su-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:26px;padding:34px 32px;background:var(--navy);color:var(--navy-text)}
.su-aside::before{content:"";position:absolute;width:420px;height:420px;left:-120px;bottom:-240px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,194,61,.3),rgba(255,194,61,0));pointer-events:none}
.su-aside::after{content:"";position:absolute;width:360px;height:360px;right:-200px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,90,254,.38),rgba(61,90,254,0));pointer-events:none}
.su-aside > *{position:relative}
.su-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.su-mark img{width:28px;height:28px}
.su-aside h2{color:#fff;font-size:1.75rem;line-height:1.15}
.su-aside h2 em{font-style:normal;color:var(--gold)}
.su-aside > p{margin:-12px 0 0;font-size:.98rem;line-height:1.55}
.su-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:su}
.su-steps li{counter-increment:su;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:.93rem;line-height:1.45}
.su-steps li::before{content:counter(su);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,194,61,.55);color:var(--gold);font-family:var(--mono);font-size:12.5px}
.su-steps b{display:block;color:#fff;font-weight:600}
.su-alt{margin-top:auto;padding-top:20px;border-top:1px solid var(--navy-line);font-size:.92rem}
.su-alt a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.su-alt a:hover{color:var(--gold);text-decoration-color:var(--gold)}

/* right: the form */
.su-main{background:#fff;overflow-y:auto;overscroll-behavior:contain;padding:34px 36px 30px}
.su-main h3{font-size:1.45rem;padding-right:40px}
.su-sub{margin:6px 0 0;font-size:.96rem;color:var(--ink-3)}
.su-close{position:absolute;z-index:2;top:18px;right:18px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--ink-3);cursor:pointer;transition:background-color .15s,color .15s}
.su-close:hover{background:var(--paper-2);color:var(--navy)}
.su-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.su-close svg{width:18px;height:18px}

.su .form{display:grid;gap:16px;margin-top:24px}
.su .form[hidden],.su-intro[hidden]{display:none}
.su .form .row{gap:14px}
.su .form label{gap:6px;font-size:.9rem}
.su .form input,.su .form select,.su .form textarea{min-height:48px;padding:11px 14px;background:var(--paper);border-color:var(--line);transition:border-color .15s,background-color .15s,box-shadow .15s}
.su .form input:hover,.su .form select:hover,.su .form textarea:hover{border-color:var(--line-2)}
.su .form input:focus,.su .form select:focus,.su .form textarea:focus{background:#fff;border-color:var(--blue);outline:0;box-shadow:0 0 0 4px var(--blue-soft)}
.su .form textarea{min-height:92px}
.su .form [aria-invalid="true"]{border-color:var(--orange);background:#fff}
.su .form [aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--orange-soft)}
.su-err{font-size:.84rem;font-weight:400;color:var(--orange-ink)}
.su-err:empty{display:none}

.su-submit{width:100%;height:52px;margin-top:4px;gap:10px}
.su-submit svg{width:18px;height:18px;transition:transform .15s}
.su-submit:hover svg{transform:translateX(3px)}
.su-submit[aria-busy="true"]{pointer-events:none;opacity:.85}
.su-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:su-spin .7s linear infinite}
@keyframes su-spin{to{transform:rotate(360deg)}}
.su-fine{margin:0;font-size:.84rem;color:var(--ink-3);text-align:center}
.su-fine a{color:var(--ink-2)}
.su-fine a:hover{color:var(--blue-2)}
.su .form .status{margin:0}

/* sent */
.su-done{display:grid;justify-items:center;align-content:center;gap:14px;min-height:430px;padding:20px 10px;text-align:center}
.su-done[hidden]{display:none}
.su-tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green-ink);box-shadow:0 0 0 10px rgba(34,165,90,.08)}
.su-tick svg{width:28px;height:28px}
.su-done h3{padding:0;margin-top:8px;outline:0}
.su-done p{margin:0;color:var(--ink-2);max-width:34ch}
.su-done .btn{margin-top:10px}

/* phone: one column, the navy panel shrinks to a header */
@media (max-width:760px){
  .su{border-radius:18px;background:linear-gradient(180deg,var(--navy) 50%,#fff 50%)}
  .su-grid{grid-template-columns:minmax(0,1fr);overflow-y:auto;overscroll-behavior:contain}
  .su-aside{padding:24px 22px 22px;gap:14px}
  .su-aside::after{display:none}
  .su-mark,.su-steps,.su-alt{display:none}
  .su-aside h2{font-size:1.4rem;padding-right:44px}
  .su-aside > p{margin-top:-6px;font-size:.93rem}
  .su-main{overflow:visible;padding:22px}
  .su-intro{display:none}
  .su .form{margin-top:0}
  .su-close{top:16px;right:16px;color:var(--navy-text)}
  .su-close:hover{background:rgba(255,255,255,.1);color:#fff}
  .su-done{min-height:300px}
}