/* =========================================================
   assets/css/signup.css - the Create Account page only.
   ---------------------------------------------------------
   Its own file, loaded only by request.php, and every class
   starts `su-`. Two reasons:

     - site.css is a big shared file. Editing it to restyle one
       page means every other page rides on that change, and an
       update that replaces it could quietly undo something done
       there in the meantime.
     - a prefix no other page uses means nothing here can reach
       out and change a page I have not looked at.

   Colours are the site's own, read off the existing pages:
   indigo #4a3fd4, ink #14152b, line #e7e7f3.
   ========================================================= */

.su-page { background: #f6f6fd; }

/* The band behind the heading. Its background comes from the admin
   setting, inline, so a photograph or a colour can be dropped in
   without touching this file. */
.su-band { background-size: cover; background-position: center; }

.su-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 44px 24px 64px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

/* The column of reasons to sign up. It gives way first: on a narrow
   screen the form is what matters, so that gets the room. */
.su-left { flex: 999 1 540px; min-width: 0; }
.su-form { flex: 1 1 400px; min-width: 0; max-width: 460px; }

/* The page's own labels. style.css puts admin labels in small caps,
   which is right there and wrong here - the reference design has them
   in plain sentence case, and FULL NAME shouts at somebody who is just
   filling in a form. */
.su-card label,
.su-field > label {
    text-transform: none;
    letter-spacing: normal;
}

/* ---- the heading ---- */
.su-eyebrow {
    display: inline-block;
    background: #e6e4fb; color: #3f33b4;
    font-size: 12px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px;
}
.su-h1 {
    margin: 18px 0 0;
    font-size: clamp(32px, 4.4vw, 50px);
    line-height: 1.1; letter-spacing: -.025em; font-weight: 800;
    color: #14152b;
}
.su-h1 em { font-style: normal; color: #4a3fd4; }
.su-lead {
    margin: 18px 0 0; max-width: 46ch;
    font-size: 17px; line-height: 1.65; color: #4b4d68;
}

/* On a dark band the same text goes light. Contrast checked against
   the darkest overlay: white on #100e2e is far past 4.5:1, and the
   muted greys below are past it too. */
.su-band--dark .su-h1      { color: #fff; }
.su-band--dark .su-h1 em   { color: #bdb6ff; }
.su-band--dark .su-lead    { color: #e2e0f5; }
.su-band--dark .su-eyebrow { background: rgba(255,255,255,.17); color: #fff; }
.su-band--dark .su-sect-h  { color: #fff; }
.su-band--dark .su-note    { color: #c7c4e2; }
.su-band--dark .su-more    { color: #c5bdff; }

/* ---- what they get ---- */
.su-gets {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px 28px;
}
.su-get { display: flex; gap: 14px; align-items: flex-start; }
.su-get-ico {
    flex: none; width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center; color: #2f2a6b;
}
.su-get b { display: block; font-size: 15.5px; font-weight: 700; color: #1b1c33; }
.su-get span { display: block; margin-top: 2px; font-size: 13.5px; color: #5c5f78; }
.su-band--dark .su-get b    { color: #fff; }
.su-band--dark .su-get span { color: #cfccea; }

/* ---- sectors ---- */
.su-sect-top {
    margin-top: 42px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.su-sect-h { margin: 0; font-size: 22px; font-weight: 700; color: #14152b; }
.su-more { font-size: 14px; font-weight: 600; text-decoration: none; color: #4a3fd4; }
.su-more:hover { text-decoration: underline; }

.su-tiles {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.su-tile {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e7e7f3; border-radius: 13px;
    padding: 13px 14px; text-decoration: none; color: #22243d;
}
.su-tile:hover { border-color: #c9c5f0; }
.su-tile-ico {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; background: #eeecfb; color: #4a3fd4;
}
.su-tile-ico svg { width: 16px; height: 16px; }
/* The colour is said again here: the shared sheet styles every link
   inside a panel, and without this the tile text comes out indigo. */
.su-tile b { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #22243d; }
.su-band--dark .su-tile b { color: #22243d; }

/* ---- the figures ---- */
.su-stats {
    margin-top: 26px; background: #fff;
    border: 1px solid #e7e7f3; border-radius: 16px; padding: 20px 24px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px;
}
.su-stat { display: flex; align-items: center; gap: 13px; }
.su-stat-ico {
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; background: #eeecfb; color: #4a3fd4;
}
.su-stat-ico svg { width: 19px; height: 19px; }
.su-stat b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.su-stat span { display: block; font-size: 12.5px; color: #5c5f78; }

.su-note { margin: 10px 0 0; font-size: 12.5px; color: #6a6d85; }

/* ---- the form card ---- */
.su-card {
    background: #fff; border: 1px solid #ebebf6; border-radius: 20px;
    padding: 30px; box-shadow: 0 18px 44px rgba(30,27,78,.08);
}
.su-card h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.su-card-sub { margin: 7px 0 22px; font-size: 14.5px; color: #5c5f78; }

.su-field { margin-bottom: 16px; }
.su-field > label {
    display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; color: #22243d;
}
.su-req { color: #b3261e; }

.su-in { position: relative; }
.su-in svg.su-lead-ico {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: #85889f; pointer-events: none;
}
.su-in input,
.su-in select,
.su-tel select {          /* the country picker sits beside .su-in, not inside it */
    width: 100%; box-sizing: border-box;
    padding: 13px 14px; border: 1px solid #dcdde9; border-radius: 11px;
    font: inherit; font-size: 14.5px; background: #fff; color: #14152b;
    /* Padding alone left these a pixel under the 44px a thumb needs on
       a 360px screen, which is the narrowest width in the brief. */
    min-height: 46px;
}
.su-in.has-ico input { padding-left: 42px; }
.su-in.has-eye input { padding-right: 52px; }
.su-in input::placeholder { color: #9598ae; }
.su-in input:focus-visible,
.su-in select:focus-visible,
.su-tel select:focus-visible { outline: 2px solid #4a3fd4; outline-offset: 1px; border-color: #4a3fd4; }

/* the phone row */
.su-tel { display: flex; gap: 9px; }
.su-tel select { flex: none; width: 140px; }
.su-tel .su-in { flex: 1 1 auto; min-width: 0; }

.su-eye {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    /* 44px square. Anything smaller is awkward to hit with a thumb,
       and it is the one control on this form a person taps rather than
       types into. */
    width: 44px; height: 44px; border: 0; background: none; color: #85889f;
    cursor: pointer; display: grid; place-items: center; border-radius: 10px;
}
.su-eye:hover { color: #4a3fd4; background: #f2f1fc; }
.su-eye svg { width: 17px; height: 17px; }
.su-hint { margin: 7px 0 0; font-size: 12px; color: #6a6d85; }

.su-go {
    width: 100%; padding: 15px; margin-top: 4px;
    background: #4a3fd4; color: #fff; border: 0; border-radius: 12px;
    font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.su-go:hover { background: #3b31b4; }

.su-alt  { margin: 16px 0 0; text-align: center; font-size: 14px; color: #4b4d68; }
.su-fine { margin: 8px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: #7b7e95; }

/* errors from the existing validation, in the card where they happened */
.su-errs {
    background: #fdecea; border: 1px solid #f4c7c2; border-left: 4px solid #b3261e;
    border-radius: 11px; padding: 12px 15px; margin-bottom: 18px;
}
.su-errs p { margin: 0 0 5px; font-size: 13.5px; color: #8a2019; }
.su-errs p:last-child { margin-bottom: 0; }

/* ---- the admin-managed promotional block ---- */
.su-promo {
    margin-top: 18px; background: #fff;
    border: 1px solid #ebebf6; border-radius: 18px; overflow: hidden;
}
.su-promo img, .su-promo video { display: block; width: 100%; height: auto; }
.su-promo-say { padding: 18px 20px; }
.su-promo-say h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.su-promo-say p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5c5f78; }
.su-promo-cta {
    display: inline-block; margin-top: 12px; padding: 10px 18px;
    background: #4a3fd4; color: #fff; text-decoration: none;
    border-radius: 10px; font-size: 14px; font-weight: 600;
}

/* ---- the three ticks, phone only ---- */
.su-chips { display: none; }

/* ---- after submitting: approved, blocked, waiting ---- */
.su-done { max-width: 620px; margin: 0 auto; }
.su-done .su-card { text-align: center; }
.su-done-ico {
    width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 17px;
    display: grid; place-items: center;
}
.su-done h2 { font-size: 23px; }
.su-done p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #4b4d68; }
.su-done-acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.su-done-acts a {
    padding: 12px 20px; border-radius: 11px; text-decoration: none;
    font-size: 14.5px; font-weight: 600;
}
.su-done-acts .one  { background: #4a3fd4; color: #fff; }
.su-done-acts .two  { background: #f1f0fb; color: #3b3d5c; }

/* =========================================================
   Phone and tablet
   Tested at 360, 390, 430, 768, 1280 and 1440.
   ========================================================= */
@media (max-width: 1080px) {
    /* Stacked, the order is: heading, then the form, then everything
       else. The form is why they came, so it must not sit under a wall
       of benefits - but arriving at a form with no idea what the site
       is would be worse, so the heading keeps its place above it.

       `display: contents` lets the heading and the rest, which are one
       element on a wide screen, be ordered separately here without
       writing the heading out twice. */
    .su-wrap { flex-direction: column; padding: 28px 16px 48px; }
    .su-left { display: contents; }

    /* A flex item is min-width:auto by default, so the sideways-scrolling
       tile strip inside would force the whole column - and the page -
       wider than the screen. These three are now flex items in their own
       right, so each says it may shrink. */
    .su-head, .su-form, .su-rest { min-width: 0; max-width: none; width: 100%; }
    .su-form { flex: 1 1 auto; }
    .su-head { order: 1; }
    .su-form { order: 2; }
    .su-rest { order: 3; }
    .su-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 700px) {
    .su-wrap { padding: 22px 16px 44px; gap: 26px; }

    /* Heading and lead centred above the form, short enough that the
       form is on the first screen. */
    .su-head { text-align: center; }
    .su-h1   { font-size: clamp(26px, 7.6vw, 34px); }
    .su-lead { margin-left: auto; margin-right: auto; font-size: 14.5px; max-width: 38ch; }

    .su-chips {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
        margin-top: 14px;
    }
    .su-chip {
        display: inline-flex; align-items: center; gap: 6px;
        background: #fff; border: 1px solid #dff0e6; border-radius: 999px;
        padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: #1d5c3c;
    }
    .su-chip svg { width: 14px; height: 14px; color: #2e8255; }
    .su-band--dark .su-chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
    .su-band--dark .su-chip svg { color: #86e3ad; }

    .su-card { padding: 20px 18px; border-radius: 16px; }
    .su-card h2 { font-size: 20px; text-align: center; }
    .su-card-sub { text-align: center; font-size: 13px; margin-bottom: 18px; }

    .su-gets { margin-top: 26px; grid-template-columns: 1fr; gap: 16px; }

    /* Sectors scroll sideways rather than making a tall grid. */
    .su-tiles {
        display: flex; gap: 10px; overflow-x: auto;
        padding-bottom: 4px; margin-left: -16px; margin-right: -16px;
        padding-left: 16px; padding-right: 16px;
        scroll-snap-type: x proximity;
    }
    .su-tile {
        flex: none; width: 150px; scroll-snap-align: start;
    }
    .su-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 18px; gap: 16px; }
    .su-stat b { font-size: 18px; }

    .su-tel select { width: 112px; }
}

/* Very small phones: 360px and under. */
@media (max-width: 380px) {
    .su-tel { flex-wrap: wrap; }
    .su-tel select { width: 100%; }
    .su-tel .su-in { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .su-tiles { scroll-behavior: auto; }
}