/* =========================================================================
   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;
    /* when this box hits its end, do NOT hand the remaining scroll to the
       page behind - that is what made a flick inside the popup scroll the
       whole site on a phone */
    overscroll-behavior: contain;
}
.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 ---------- */
/* Anchored to #eg-gs, not to .eg-gs-shell - see the comment in the markup.
   The shell scrolls; the dialog does not, so this stays put.
   Opaque rather than 90% white because on a phone it now sits over
   scrolling content and has to stay legible against whatever passes under
   it. The shadow separates it from the text behind. */
.eg-gs-x{
    position: absolute; top: 14px; right: 16px; z-index: 10;
    width: 40px; height: 40px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: #fff; color: #51657E;
    box-shadow: 0 2px 10px rgba(18,63,114,.18);
    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;
    overscroll-behavior: contain;
}
.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;
    overscroll-behavior: contain;
}

.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; }
    /* ONE scroller on a phone, not three.
       .eg-gs-rail and .eg-gs-card each carry overflow-y:auto for the desktop
       two-column layout. Stacked into a single column they became scrollers
       nested inside the shell, which is also a scroller - so a swipe scrolled
       whichever box the finger happened to be over, the submit button sat
       inside the card's own hidden overflow and could not be reached, and
       scrolling back up stalled at the boundary between them. That is the
       "form locks" behaviour. Here they just grow and the shell scrolls. */
    .eg-gs-rail, .eg-gs-card, .eg-gs-done{ overflow: visible; }
    .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; }
}
/* ---------- phones ----------
   Edge to edge. At this width the rounded card floating in a dimmed page
   wastes the little room there is, and the form is the whole job.

   100dvh, not 100vh. On iOS Safari 100vh is the LARGE viewport - the height
   the page would have if the toolbars were collapsed - so a popup sized to
   100vh runs underneath the toolbar and its last field cannot be reached.
   dvh is the height actually on screen right now. The vh line above it is
   the fallback for browsers that do not know dvh; the dvh line wins where
   it is supported. */
@media only screen and (max-width: 600px){
    /* Pin all four edges instead of sizing it 100dvh and letting the UA
       stylesheet's margin:auto centre it.

       On iOS a position:fixed element is laid out in the LAYOUT viewport,
       which is taller than the visible area while Safari's toolbars are
       showing. A centred 100dvh box therefore overflows above the top of
       the screen, and the close button goes up under the toolbar with it -
       which is exactly the "X is cut off" report. With inset:0 and margin:0
       the top edge is the top of the viewport, on every browser, whether or
       not it understands dvh. */
    /* Sized and positioned from the VISUAL viewport, via two custom
       properties the script keeps up to date.

       iOS lays out position:fixed against the LAYOUT viewport, which extends
       behind Safari's toolbars and does not shrink when the keyboard opens.
       So inset:0 put the dialog's top edge underneath the header and took the
       close button with it. window.visualViewport reports what is actually on
       screen, including the toolbars and the keyboard, and the script mirrors
       it onto --vv-top and --vv-height.

       The 12px margin gives the card an edge instead of running into the
       bezel, and keeps the close button clear of the chrome. The fallbacks in
       the var() calls cover any browser without visualViewport. */
    #eg-gs{
        top: var(--vv-top, 0px);
        left: 0; right: 0; bottom: auto;
        margin: 12px;
        width: auto;  max-width: none;
        height:     calc(var(--vv-height, 100dvh) - 24px);
        max-height: calc(var(--vv-height, 100dvh) - 24px);
        border-radius: 14px;
        box-shadow: 0 10px 40px rgba(11,35,64,.34);
    }

    /* the shell is the one thing that scrolls, and it fills the dialog.
       The bottom padding is what lets the last row clear Safari's toolbar
       and the home indicator once it is scrolled to. */
    .eg-gs-shell{
        height: 100%; max-height: 100%;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    /* room to breathe: the heading clears the close button's row, and the
       card is no longer jammed against the edges of the screen */
    .eg-gs-rail{ padding: 30px 18px 4px; }
    .eg-gs-rail h2{ font-size: 30px; margin: 18px 0 12px; }
    .eg-gs-rail > p:not(.eg-gs-foot){ font-size: 15px; margin-bottom: 20px; }
    .eg-gs-card{ margin: 0 16px; padding: 24px 20px 22px; }
    .eg-gs-done{ margin: 0 16px; padding: 44px 22px; }
    .eg-gs-f{ margin-bottom: 18px; }

    /* clear of the notch. top:0 plus the inset, not 10px plus it, because
       the dialog's own top edge is now flush with the viewport. */
    /* inside the card now, not against the screen edge, so it cannot be
       clipped by the browser chrome */
    .eg-gs-x{ top: 10px; right: 10px; }
}

@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; }
}