/* =========================================================================
   Get Started modal

   Built on the native <dialog> element, which carries the things a hand-made
   overlay usually gets wrong for free: it traps focus, Escape closes it, the
   page behind becomes inert, and ::backdrop dims without a second element.

   Everything is scoped under #eg-gs so nothing here can reach the rest of
   the site, and the block brings its own border-box because egumball.com
   has no global reset.
   ========================================================================= */
#eg-gs, #eg-gs *{ box-sizing: border-box; }

/* The hidden attribute only works while nothing else sets display. Both
   panels below are display:flex, which silently beat it - the success panel
   sat beside the form instead of replacing it. */
#eg-gs [hidden]{ display: none !important; }

#eg-gs{
    width: min(1160px, calc(100vw - 32px));
    max-width: none;
    max-height: min(920px, calc(100vh - 32px));
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #F7FAFE;
    color: #123F72;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-shadow: 0 24px 70px rgba(18,63,114,.28);
}
#eg-gs::backdrop{
    background: rgba(11,35,64,.55);
    backdrop-filter: blur(2px);
}
#eg-gs[open]{ display: flex; }

/* the two decorative circles from the comp, drawn rather than shipped */
.eg-gs-shell{
    display: flex;
    width: 100%;
    max-height: inherit;
    position: relative;
    overflow: hidden;
}
.eg-gs-shell::before,
.eg-gs-shell::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #E8F1FB;
    pointer-events: none;
}
.eg-gs-shell::before{ width: 340px; height: 340px; top: -150px; right: -110px; }
.eg-gs-shell::after { width: 420px; height: 420px; bottom: -230px; right: -90px; }

/* ---------- close ---------- */
.eg-gs-x{
    position: absolute; top: 14px; right: 16px; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255,255,255,.9); color: #51657E;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.eg-gs-x:hover{ background: #fff; color: #123F72; }
.eg-gs-x:focus-visible{ outline: 3px solid #FF5A00; outline-offset: 2px; }
.eg-gs-x svg{ width: 18px; height: 18px; display: block; }

/* ---------- left rail ---------- */
.eg-gs-rail{
    flex: 0 0 38%;
    padding: 46px 38px 34px;
    position: relative; z-index: 2;
    overflow-y: auto;
}
.eg-gs-rule{ width: 72px; height: 5px; background: #FF5A00; border-radius: 3px; }
.eg-gs-rail h2{
    margin: 22px 0 14px;
    font-size: 46px; font-weight: 900; line-height: 1.02; letter-spacing: -.02em;
    color: #0167CD;
}
/* :not(.eg-gs-foot) because .eg-gs-foot is also a direct <p> child of the
   rail. At (0,0,1,1) this rule beat .eg-gs-foot at (0,0,1,0) and overrode its
   font-size and margin, and the 26ch clamp made the footer line wrap four
   ways. */
.eg-gs-rail > p:not(.eg-gs-foot){
    margin: 0 0 34px; max-width: 26ch;
    font-size: 18px; font-weight: 500; line-height: 1.45; color: #51657E;
}

.eg-gs-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.eg-gs-points li{ display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.eg-gs-ico{
    width: 56px; height: 56px; border-radius: 50%;
    background: #E8F1FB; color: #0167CD;
    display: flex; align-items: center; justify-content: center;
}
.eg-gs-ico svg{ width: 26px; height: 26px; display: block; }
.eg-gs-points b{ display: block; font-size: 17px; font-weight: 800; color: #123F72; margin-bottom: 3px; }
/* "b + span" and not a bare "span": .eg-gs-points span is (0,0,1,1) and beats
   .eg-gs-ico at (0,0,1,0), so it was painting the icon grey and turning its
   flex centering back into block - the icon sat in the top-left of its circle.
   This targets only the description span that follows the heading. */
.eg-gs-points b + span{ display: block; font-size: 15px; line-height: 1.45; color: #7A7E91; }

.eg-gs-foot{
    margin-top: 34px; padding-top: 22px; border-top: 1px solid #D7E5F2;
    font-size: 12.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.8;
    text-transform: uppercase; color: #8FA3BC;
}
.eg-gs-foot::after{
    content: ""; display: block; width: 66px; height: 4px;
    background: #0167CD; border-radius: 2px; margin-top: 16px;
}

/* ---------- form card ---------- */
.eg-gs-card{
    flex: 1 1 auto; margin: 22px 22px 22px 0;
    background: #fff; border-radius: 14px;
    box-shadow: 0 10px 34px rgba(18,63,114,.10);
    padding: 34px 36px 30px;
    position: relative; z-index: 2;
    overflow-y: auto;
}

.eg-gs-step{ display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.eg-gs-step b{
    font-size: 44px; font-weight: 900; line-height: 1;
    color: #BDE0F9; letter-spacing: -.02em;
}
.eg-gs-step div{ border-left: 1px solid #D7E5F2; padding-left: 20px; }
.eg-gs-step h3{ margin: 0 0 2px; font-size: 22px; font-weight: 800; color: #123F72; }
.eg-gs-step p{ margin: 0; font-size: 15px; color: #7A7E91; }

.eg-gs-row{ display: flex; gap: 18px; }
.eg-gs-row > *{ flex: 1 1 0; min-width: 0; }
.eg-gs-f{ margin-bottom: 16px; }
.eg-gs-f label{
    display: block; margin-bottom: 6px;
    font-size: 14px; font-weight: 700; color: #123F72;
}
.eg-gs-f input,
.eg-gs-f select{
    width: 100%; height: 48px; padding: 0 14px;
    font-family: inherit; font-size: 15.5px; color: #123F72;
    background: #fff; border: 1px solid #C9DDF0; border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.eg-gs-f select{
    appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230167CD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
}
.eg-gs-f input::placeholder{ color: #A9B4C2; }
.eg-gs-f input:focus,
.eg-gs-f select:focus{
    outline: none; border-color: #0167CD;
    box-shadow: 0 0 0 3px rgba(1,103,205,.15);
}
/* only after a failed submit, so it does not shout while they are typing */
.eg-gs-card.was-checked :invalid{ border-color: #C2410C; }

.eg-gs-hr{ border: 0; border-top: 1px solid #E4EDF7; margin: 26px 0 24px; }

/* ---------- Turnstile ----------
   Cloudflare draws the widget in a fixed 300x65 iframe that it will not let
   you restyle. Reserve the height so the submit button does not jump down
   the moment the widget appears, and cap the width so the 300px box cannot
   push the card sideways on a narrow phone. */
.eg-gs-cap{ margin: 4px 0 16px; }

/* The decoy box also carries these as an inline style, so it stays hidden
   even if this file does not load. Belt and braces on purpose: a visible
   "Subject" field would look like a bug and would get filled in. */
.eg-gs-hp{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.eg-gs-cap iframe{ max-width: 100%; }

.eg-gs-submit{
    width: 100%; margin-top: 8px; border: 0; cursor: pointer;
    background: #FF5A00; color: #fff;
    font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: .06em;
    padding: 19px 20px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    transition: background-color .15s ease;
}
.eg-gs-submit:hover{ background: #E04E00; }
.eg-gs-submit:focus-visible{ outline: 3px solid #123F72; outline-offset: 2px; }
.eg-gs-submit svg{ width: 20px; height: 20px; flex: none; }

.eg-gs-fine{ margin: 14px 0 0; text-align: center; font-size: 13.5px; color: #909CA8; }

/* ---------- narrow ---------- */
@media only screen and (max-width: 900px){
    #eg-gs{ width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
    .eg-gs-shell{ flex-direction: column; overflow-y: auto; }
    .eg-gs-rail{ flex: none; padding: 34px 24px 4px; }
    .eg-gs-rail h2{ font-size: 34px; }
    /* must carry the same :not() as the base rule, or that rule's higher
       specificity beats this one and the mobile size never applies */
    .eg-gs-rail > p:not(.eg-gs-foot){ font-size: 16px; margin-bottom: 26px; }
    /* the three points are reassurance, not instructions - they cost a lot of
       scrolling on a phone and the form is the job here */
    .eg-gs-points, .eg-gs-foot{ display: none; }
    .eg-gs-card{ margin: 18px; padding: 24px 20px 22px; }
    .eg-gs-row{ flex-direction: column; gap: 0; }
    .eg-gs-step b{ font-size: 36px; }
    .eg-gs-step h3{ font-size: 19px; }
}
@media (prefers-reduced-motion: reduce){ #eg-gs *{ transition: none !important; } }

/* =========================================================================
   Sent / error states
   The form posts by fetch and the answer comes back into this same panel,
   so nobody leaves the page.

   Note: with Turnstile in place, a browser with JavaScript switched off can
   no longer submit at all - the widget cannot run, so no token is produced
   and the server rejects the post. That is true of every modern captcha,
   and it is the intended behaviour: near enough all of the traffic it stops
   is scripted.
   ========================================================================= */
.eg-gs-err{
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FEF2EC;
    border: 1px solid #F3C4AE;
    color: #9A3412;
    font-size: 14.5px;
    line-height: 1.45;
}

.eg-gs-done{
    flex: 1 1 auto;
    margin: 22px 22px 22px 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(18,63,114,.10);
    padding: 64px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.eg-gs-tick{
    width: 78px; height: 78px; border-radius: 50%;
    background: #E8F6EE; color: #1C7C4A;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
}
.eg-gs-tick svg{ width: 36px; height: 36px; display: block; }
.eg-gs-done h3{
    margin: 0 0 10px; font-size: 28px; font-weight: 900; color: #123F72;
}
.eg-gs-done h3:focus{ outline: none; }
.eg-gs-done p{
    margin: 0 0 28px; max-width: 34ch;
    font-size: 16px; line-height: 1.5; color: #51657E;
}
.eg-gs-doneclose{
    border: 0; cursor: pointer;
    background: #0167CD; color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .05em;
    padding: 14px 34px; border-radius: 8px;
    transition: background-color .15s ease;
}
.eg-gs-doneclose:hover{ background: #01549F; }
.eg-gs-doneclose:focus-visible{ outline: 3px solid #FF5A00; outline-offset: 2px; }

@media only screen and (max-width: 900px){
    .eg-gs-done{ margin: 18px; padding: 44px 22px; }
    .eg-gs-done h3{ font-size: 23px; }
}