/*
 * Public business signup - resources/views/platform/signup.blade.php
 * (also styles platform/find_workspace, and supplies tokens to subscription-hold.css)
 *
 * ---------------------------------------------------------------------------
 * THE GOURI LOOK - the public site's, not the admin's
 * ---------------------------------------------------------------------------
 * A visitor reaches this page from gourierp.com, so it wears that site's visual
 * language: its palette (read off the site's own CSS custom properties, below),
 * its display face (Sora, self-hosted at public/fonts/sora), pill buttons and
 * soft, warm surfaces. It used to wear the ERP admin's blue, which made the jump
 * from the marketing site to the signup feel like a jump between two products.
 *
 * PRESENTATION ONLY. Every class, data-* hook and `hidden` toggle that signup.js
 * and the Blade view rely on is unchanged; this file only decides how they look.
 *
 * ---------------------------------------------------------------------------
 * SCOPED UNDER .signup, every rule of it
 * ---------------------------------------------------------------------------
 * The page renders inside layouts.auth2, which carries the ERP's skin classes on
 * <body> and loads app.css, vendor.css (Bootstrap 3) and the BS3->4 bridge. An
 * unscoped rule here would follow the visitor into the ERP on any page that happens
 * to load this file.
 *
 * The flip side is that every rule must OUT-SPECIFY that stack. `.signup .form-control`
 * is (0,2,0) against Bootstrap's (0,1,0), which is why the controls below are written
 * as descendants rather than as bare classes. Where the theme used !important, so does
 * this file - and each of those is commented with what it is beating.
 *
 * The outer split is CSS grid, not `.row.no-gutters`: vendor.css loads after all.css
 * and redefines `.row { margin: 0 -15px }`, which hung the panel 15px past the
 * viewport. `minmax(0, …)` tracks for the same reason - a long hostname must not be
 * able to widen a track and bring the sideways scroll back.
 *
 * IN PIXELS, NOT REM: public/css/vendor.css pins `html { font-size: 10px; }`, so rem
 * would render at 62.5% of intent (inputs under the 16px iOS no-zoom floor).
 */

.signup {
    /*
     * ---- palette: gourierp.com's own tokens ----
     *
     *   #7D5D26  --palatinate       primary: buttons, active step, accents, links
     *   #5E461C  --palatinate-deep  primary hover/pressed
     *   #D1AA67  --gold             secondary: progress, icons, hover, decoration
     *   #DCD1C5  warm beige         soft separators, decorative surfaces (sparingly)
     *   #F8F2E8  --wash             the site's warm tint behind highlights
     *   #3A4254  --ink-soft         body text, labels, headings
     *   #FBFBFE  page background    #FFFFFF cards and fields
     */
    --su-ink: #3a4254;
    --su-ink-2: #3a4254;
    --su-ink-soft: #6b7180;
    --su-ink-faint: #9aa0ab;

    --su-line: rgba(125, 93, 38, .12);       /* card borders, hairlines */
    --su-line-strong: rgba(58, 66, 84, .18); /* control borders */
    --su-beige: #dcd1c5;

    --su-bg: #fbfbfe;
    --su-surface: #ffffff;
    --su-surface-2: #fbf8f3;                 /* white, warmed by the wash */
    --su-wash: #f8f2e8;

    --su-brand: #7d5d26;
    --su-brand-deep: #5e461c;
    --su-brand-tint: rgba(125, 93, 38, .08);
    --su-gold: #d1aa67;
    --su-gold-tint: rgba(209, 170, 103, .18);

    /* Kept under their old names - subscription-hold.css reads --su-brand, and the
     * button trio is what the rest of this file was written against. */
    --su-btn: var(--su-brand);
    --su-btn-dark: var(--su-brand-deep);
    --su-btn-darker: #4a3716;

    /* Semantic, and deliberately muted: a success tick and an error line must still
     * read as success and error, but neither should out-shout the brand. */
    --su-ok: #3d7a4f;
    --su-ok-tint: rgba(61, 122, 79, .1);
    --su-error: #b3261e;
    --su-error-ink: #8f1f18;
    --su-error-tint: #fdf4f3;

    /* ---- type ---- */
    --su-font: 'Sora', 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --su-mono: SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --su-fs-display: 40px; /* banner heading */
    --su-fs-h1: 28px;      /* panel heading */
    --su-fs-h2: 18px;      /* step title */
    --su-fs-base: 16px;    /* inputs - the iOS no-zoom floor, held deliberately */
    --su-fs-body: 15px;
    --su-fs-sm: 14px;      /* labels */
    --su-fs-xs: 13px;      /* help text, captions */

    /* ---- spacing: 4px base ---- */
    --su-s1: 4px;
    --su-s2: 8px;
    --su-s3: 12px;
    --su-s4: 16px;
    --su-s5: 20px;
    --su-s6: 24px;
    --su-s8: 32px;
    --su-s10: 40px;
    --su-s12: 48px;
    --su-s16: 64px;

    --su-radius-xl: 24px;  /* the registration card */
    --su-radius-lg: 16px;  /* inner cards: plan, terms, dialogs */
    --su-radius: 12px;     /* fields, alerts */
    --su-radius-sm: 8px;
    --su-pill: 999px;      /* buttons - the homepage's rounded-full */

    --su-shadow-sm: 0 1px 2px rgba(58, 66, 84, .05);
    --su-shadow-md: 0 6px 18px rgba(125, 93, 38, .18);
    --su-shadow-card: 0 1px 2px rgba(58, 66, 84, .04), 0 24px 48px -28px rgba(125, 93, 38, .22);

    --su-ease: cubic-bezier(.2, .7, .2, 1);

    /* Every interactive element gets this. outline:none with no replacement is a
     * defect, not a style. */
    --su-ring: 0 0 0 4px rgba(125, 93, 38, .15);
    --su-focus: 0 0 0 2px var(--su-surface), 0 0 0 4px var(--su-brand);

    position: relative;
    min-height: 100vh;
    color: var(--su-ink);
    font-family: var(--su-font);
    font-size: var(--su-fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;

    /* Two soft warm glows - the beige top-left, the gold bottom-right - so the page
     * reads as the homepage's paper rather than a flat grey. Painted, not an image. */
    background:
        radial-gradient(900px 520px at -8% -12%, rgba(220, 209, 197, .55) 0%, transparent 60%),
        radial-gradient(760px 480px at 108% 108%, rgba(209, 170, 103, .16) 0%, transparent 62%),
        var(--su-bg);
}

/*
 * The face, stated per element rather than inherited: app.css sets a font directly
 * on several elements, and a direct rule beats inheritance whatever the parent says.
 * :where() keeps this at (0,1,0) so the `.las`/`.lab` icon classes on <i> - not in the
 * list - keep their own font, and anything more specific below still wins.
 */
.signup :where(h1, h2, h3, h4, p, a, span, strong, small, li, label, input, select, textarea, button) {
    font-family: var(--su-font);
}

/*
 * `hidden` MEANS HIDDEN. signup.js drives the steps, the buttons, the plan summaries
 * and the terms dialog purely through the `hidden` attribute, and any author
 * `display:` rule here would otherwise beat the UA sheet's `[hidden]` and show them.
 */
.signup [hidden] {
    display: none !important;
}

/* ==========================================================================
 * The header
 * ========================================================================== */

.signup .signup-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-s4);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--su-s6) var(--su-s8);
}

.signup .signup-topbar-logo {
    display: inline-flex;
    align-items: center;
}

.signup .signup-topbar-logo img {
    display: block;
    height: 40px;
    width: auto;
}

/* ==========================================================================
 * The split
 * ========================================================================== */

.signup .signup-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--su-s16);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--su-s4) var(--su-s8) var(--su-s16);
}

/* A page that draws no header above the split (find_workspace) still needs the
 * breathing room the header would have given it. */
.signup > .signup-split:first-child {
    padding-top: var(--su-s12);
}

/* ==========================================================================
 * Left: the pitch
 *
 * No longer a coloured slab - it sits on the page's own warm paper, like the
 * homepage's sections.
 *
 * STATIC, NOT STICKY. It was `position: sticky` for a while, and that made it
 * jump: the form column changes height under it (step 1 -> 2, errors, the plan
 * summary swapping), and a sticky column re-pins itself every time it does. It
 * now scrolls with the page like everything else.
 * ========================================================================== */

.signup .signup-banner {
    display: flex;
    flex-direction: column;
    padding-top: var(--su-s6);
}

/*
 * COLOUR IS STATED, NOT INHERITED, on every text node in this column: app.css sets a
 * colour on `p`, `span`, `strong` and `li` directly, which beats inheritance.
 */
.signup .signup-banner,
.signup .signup-banner h1,
.signup .signup-banner p,
.signup .signup-banner li,
.signup .signup-banner span,
.signup .signup-banner strong {
    color: var(--su-ink);
}

.signup .signup-banner i {
    color: var(--su-brand);
}

.signup .signup-banner-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-s4);
}

.signup .signup-banner-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    padding: var(--su-s6) 0 var(--su-s8);
}

/* ---- brand (the text wordmark, where a page still carries it in this column) ---- */

.signup .signup-brand {
    display: flex;
    align-items: center;
    gap: var(--su-s3);
}

.signup .signup-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: block;
}

.signup .signup-brand-mark-bg {
    fill: var(--su-brand);
}

.signup .signup-brand-mark-text {
    fill: #fff;
    font-family: var(--su-font);
    font-size: 16px;
    font-weight: 700;
}

.signup .signup-banner .signup-brand-word,
.signup .signup-brand-word {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--su-brand);
}

/* ---- the eyebrow pill ---- */

.signup .signup-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--su-s2);
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: var(--su-pill);
    background: var(--su-surface);
    border: 1px solid rgba(209, 170, 103, .5);
    box-shadow: var(--su-shadow-sm);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.signup .signup-banner .signup-pill {
    color: var(--su-brand);
}

.signup .signup-banner .signup-pill i {
    color: var(--su-gold);
    font-size: 15px;
}

/* ---- pitch ---- */

.signup .signup-banner .signup-banner-heading {
    font-size: var(--su-fs-display);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0 0 var(--su-s4);
    color: var(--su-ink);
}

/* A short gold rule under the heading - the one flourish, and the homepage's. */
.signup .signup-banner-heading::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: var(--su-s5);
    border-radius: var(--su-pill);
    background: linear-gradient(90deg, var(--su-brand), var(--su-gold));
}

.signup .signup-banner .signup-banner-lede {
    font-size: var(--su-fs-body);
    line-height: 1.75;
    margin: 0 0 var(--su-s8);
    color: var(--su-ink-soft);
}

/* ---- the ERP workspace miniature, in Gouri colours ----
 * Abstract bars and rows plus real module names: it claims nothing, so it needs no
 * "sample" disclaimer. Decorative (aria-hidden in the markup). */

.signup .signup-art {
    background: var(--su-surface);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius-lg);
    overflow: hidden;
    margin-bottom: var(--su-s8);
    box-shadow: var(--su-shadow-card);
}

.signup .signup-art-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px var(--su-s4);
    background: var(--su-surface-2);
    border-bottom: 1px solid var(--su-line);
}

.signup .signup-banner .signup-art-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--su-beige);
    flex: 0 0 auto;
}

.signup .signup-banner .signup-art-crumb {
    margin-left: auto;
    width: 76px;
    height: 8px;
    border-radius: var(--su-pill);
    background: var(--su-wash);
}

.signup .signup-art-body {
    display: flex;
    min-height: 172px;
}

.signup .signup-art-rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--su-s2);
    padding: var(--su-s3) var(--su-s2);
    background: var(--su-surface-2);
    border-right: 1px solid var(--su-line);
}

.signup .signup-banner .signup-art-railitem {
    width: 28px;
    height: 28px;
    border-radius: var(--su-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.signup .signup-banner .signup-art-railitem i {
    color: var(--su-ink-faint);
}

.signup .signup-banner .signup-art-railitem.is-active {
    background: var(--su-brand);
}

.signup .signup-banner .signup-art-railitem.is-active i {
    color: #fff;
}

.signup .signup-art-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--su-s4);
}

.signup .signup-art-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--su-s3);
    margin-bottom: var(--su-s4);
}

.signup .signup-art-tile {
    background: var(--su-surface-2);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius-sm);
    padding: var(--su-s2) 10px 10px;
    min-width: 0;
}

.signup .signup-banner .signup-art-tilelabel {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--su-ink-soft);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.signup .signup-banner .signup-art-tiletrack {
    display: block;
    height: 6px;
    border-radius: var(--su-pill);
    background: var(--su-wash);
    overflow: hidden;
}

.signup .signup-banner .signup-art-tilefill {
    display: block;
    height: 100%;
    border-radius: var(--su-pill);
    background: linear-gradient(90deg, var(--su-gold), var(--su-brand));
}

.signup .signup-art-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signup .signup-art-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.signup .signup-banner .signup-art-avatar {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--su-gold-tint);
}

.signup .signup-banner .signup-art-lines {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.signup .signup-banner .signup-art-line {
    display: block;
    height: 6px;
    border-radius: var(--su-pill);
    background: rgba(58, 66, 84, .12);
}

.signup .signup-banner .signup-art-line.is-short {
    background: rgba(58, 66, 84, .06);
}

.signup .signup-banner .signup-art-chip {
    width: 34px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: var(--su-pill);
    background: var(--su-wash);
    border: 1px solid rgba(209, 170, 103, .35);
}

/* ---- points ---- */

.signup .signup-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.signup .signup-points li {
    position: relative;
    padding-left: 52px;
    margin-bottom: var(--su-s5);
}

.signup .signup-points li:last-child {
    margin-bottom: 0;
}

.signup .signup-banner .signup-point-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--su-radius);
    background: var(--su-wash);
    border: 1px solid rgba(209, 170, 103, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.signup .signup-banner .signup-points strong {
    display: block;
    font-size: var(--su-fs-sm);
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--su-ink);
}

.signup .signup-banner .signup-point-body {
    display: block;
    font-size: var(--su-fs-xs);
    line-height: 1.6;
    color: var(--su-ink-soft);
}

/* ---- the module list along the foot ---- */

.signup .signup-banner .signup-banner-modules {
    margin: 0;
    padding-top: var(--su-s5);
    border-top: 1px solid var(--su-beige);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--su-ink-faint);
}

/* ==========================================================================
 * Right: the registration card
 * ========================================================================== */

.signup .signup-panel {
    min-width: 0; /* see grid-template-columns */
}

.signup .signup-panel-inner {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 0 0 auto;
    background: var(--su-surface);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius-xl);
    box-shadow: var(--su-shadow-card);
    padding: var(--su-s12) var(--su-s12) var(--su-s10);
}

/* A thin gold edge along the top of the card. A pseudo-element rather than
 * `overflow: hidden` + a border: clipping the card would be one ancestor transform
 * away from trapping the fixed-position terms dialog that lives inside it. */
.signup .signup-panel-inner::before {
    content: "";
    position: absolute;
    top: -1px;
    left: var(--su-s12);
    right: var(--su-s12);
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--su-gold), var(--su-brand), var(--su-gold));
}

.signup .signup-head {
    margin-bottom: var(--su-s8);
}

.signup .signup-head h2 {
    font-size: var(--su-fs-h1);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0 0 var(--su-s2);
    color: var(--su-ink);
}

.signup .signup-head p {
    color: var(--su-ink-soft);
    font-size: var(--su-fs-body);
    line-height: 1.6;
    margin: 0;
}

/* ---- the stepper ----
 * is-current / is-done are set by signup.js. The track fills with gold once step 1
 * is done, which is the whole of the "progress" - no extra markup. */

.signup .signup-steps {
    display: flex;
    align-items: center;
    gap: var(--su-s3);
    list-style: none;
    padding: 0 0 var(--su-s6);
    margin: 0 0 var(--su-s8);
    border-bottom: 1px solid var(--su-line);
}

.signup .signup-stepitem {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}

.signup .signup-stepline {
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    min-width: var(--su-s6);
    background: rgba(58, 66, 84, .1);
    border-radius: 2px;
    overflow: hidden;
}

.signup .signup-stepline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--su-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s var(--su-ease);
}

.signup .signup-stepitem.is-done + .signup-stepline::after {
    transform: scaleX(1);
}

.signup .signup-stepdot {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid rgba(58, 66, 84, .22);
    background: var(--su-surface);
    color: var(--su-ink-faint);
    font-size: var(--su-fs-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.signup .signup-steplabel {
    font-size: var(--su-fs-sm);
    font-weight: 500;
    color: var(--su-ink-faint);
    white-space: nowrap;
    transition: color .25s ease;
}

.signup .signup-stepitem.is-current .signup-stepdot {
    border-color: var(--su-brand);
    background: var(--su-brand);
    color: #fff;
    box-shadow: 0 0 0 5px var(--su-brand-tint);
}

.signup .signup-stepitem.is-current .signup-steplabel {
    color: var(--su-brand);
    font-weight: 600;
}

/* Done: the number gives way to a drawn tick. The digit stays in the DOM (font-size 0,
 * not removed), so assistive tech still reads the step number. */
.signup .signup-stepitem.is-done .signup-stepdot {
    border-color: var(--su-gold);
    background: var(--su-wash);
    font-size: 0;
}

.signup .signup-stepitem.is-done .signup-stepdot::after {
    content: "";
    width: 10px;
    height: 6px;
    margin-top: -2px;
    border-left: 2px solid var(--su-brand);
    border-bottom: 2px solid var(--su-brand);
    transform: rotate(-45deg);
}

.signup .signup-stepitem.is-done .signup-steplabel {
    color: var(--su-ink);
}

/* ---- the step panels ---- */

.signup .signup-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Re-runs every time a panel is un-hidden, so moving between steps is a short
 * fade-up rather than a hard swap. */
.signup .signup-step-panel:not([hidden]) {
    animation: signup-step-in .32s var(--su-ease) both;
}

@keyframes signup-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.signup .signup-card-head {
    margin-bottom: var(--su-s6);
}

.signup .signup-card-title {
    font-size: var(--su-fs-h2);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--su-ink);
    margin: 0;
}

.signup .signup-card-sub {
    font-size: var(--su-fs-sm);
    color: var(--su-ink-soft);
    margin: 4px 0 0;
}

/* ---- the form grid ----
 * Not .form-row/.col-md-*: those carry the negative side margins that put the old
 * split 15px off-viewport. */
.signup .signup-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--su-s5);
}

.signup .signup-col-5 { grid-column: span 5; }
.signup .signup-col-6 { grid-column: span 6; }
.signup .signup-col-7 { grid-column: span 7; }

.signup .form-group {
    margin-bottom: var(--su-s6);
}

.signup .form-group:last-child,
.signup .signup-group-last {
    margin-bottom: 0;
}

/* Inside a two-up row every field keeps its margin: once the row stacks on a phone,
 * the second field is the one sitting directly above the next label. */
.signup .signup-row > .form-group {
    margin-bottom: var(--su-s6);
}

/*
 * app.css title-cases every label with !important:
 *     label { text-transform: capitalize !important; }
 * Right for admin field names, wrong for a sentence. Only !important beats it.
 */
.signup label,
.signup label span,
.signup .form-text,
.signup .signup-card-title,
.signup .signup-steplabel {
    text-transform: none !important;
}

.signup .form-group label {
    display: block;
    font-size: var(--su-fs-sm);
    font-weight: 500;
    color: var(--su-ink);
    margin-bottom: var(--su-s2);
}

/* Brand, not red: a column of red asterisks makes a clean form look like an error
 * report before anything has gone wrong. */
.signup .signup-req {
    color: var(--su-gold);
    font-weight: 600;
}

/* ---- controls ----
 * 50px min-height clears the 44px touch target; 16px text stops iOS zooming on
 * focus. height:auto because Bootstrap 3 fixes .form-control at 34px. */
.signup .form-control {
    display: block;
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 12px 16px;
    font-size: var(--su-fs-base);
    line-height: 1.5;
    color: var(--su-ink);
    background-color: var(--su-surface);
    border: 1px solid var(--su-line-strong);
    border-radius: var(--su-radius);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* One chevron, drawn in brand brown, on every select - the native arrow differs per
 * browser and was the last blue-grey thing on the form. data: URIs are allowed by
 * the CSP's img-src. */
.signup select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237D5D26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.signup select.form-control::-ms-expand {
    display: none;
}

.signup .form-control::placeholder {
    color: #a7acb6;
    opacity: 1;
}

.signup .form-control:hover {
    border-color: rgba(125, 93, 38, .35);
}

.signup .form-control:focus {
    outline: none;
    border-color: var(--su-brand);
    box-shadow: var(--su-ring);
}

.signup .form-control.is-invalid {
    border-color: var(--su-error);
    background-color: #fffdfd;
}

.signup .form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(179, 38, 30, .12);
}

/*
 * The password boxes' show/hide eye (behaviour from manage_user/partials/password_field).
 * THE PADDING IS RE-STATED BECAUSE OF LOAD ORDER: the partial's
 * `.password-input-wrap .form-control` and `.signup .form-control` tie at (0,2,0) and
 * this file loads later, so the shorthand above would put the eye over the text.
 */
.signup .password-input-wrap .form-control {
    padding-right: 48px;
}

.signup .password-input-wrap .toggle-password {
    right: 16px;
    font-size: 20px;
    color: var(--su-ink-faint);
    transition: color .15s ease;
}

.signup .password-input-wrap .toggle-password:hover {
    color: var(--su-brand);
}

.signup .password-input-wrap .toggle-password:focus-visible {
    outline: none;
    box-shadow: var(--su-focus);
    border-radius: var(--su-radius-sm);
}

.signup .password-hint {
    font-size: var(--su-fs-xs) !important; /* the partial's own 12px */
    margin-top: 6px;
    line-height: 1.5;
}

/* ---- the searchable time zone picker (Select2, layered on the real <select>) ----
 *
 * Drawn to match `.form-control` exactly - same 50px, radius, border, chevron and
 * brown focus ring - so it reads as one more field rather than as a plugin. The
 * open list is rendered inside the field's .form-group (signup.js sets
 * dropdownParent), which is what lets these `.signup`-scoped rules reach it.
 * Every selector out-specifies vendor.css's own `.select2-container--default …`.
 */
.signup .signup-tz-group {
    position: relative;
}

.signup .select2-container--default .select2-selection--single {
    height: 50px;
    padding: 0; /* vendor.css adds 6px 12px, which pushed the text past the other selects' */
    border: 1px solid var(--su-line-strong);
    border-radius: var(--su-radius);
    background: var(--su-surface);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.signup .select2-container--default .select2-selection--single:hover {
    border-color: rgba(125, 93, 38, .35);
}

/* The same box model as `.form-control` (a 24px line inside 12px padding) rather than
 * one 48px line: Sora's tall ascent sits a 48px line's text visibly high, so this is
 * what puts "America/Chicago" on the same baseline as "April" beside it. */
.signup .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
    padding: 12px 44px 12px 16px;
    margin-top: 0; /* vendor.css lifts it by -4px for the ERP's 34px Select2 boxes */
    font-size: var(--su-fs-base);
    color: var(--su-ink);
}

.signup .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 16px;
    width: 12px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237D5D26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
    transition: transform .18s ease;
}

.signup .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.signup .select2-container--default.select2-container--open .select2-selection__arrow {
    transform: rotate(180deg);
}

.signup .select2-container--default.select2-container--focus .select2-selection--single,
.signup .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--su-brand);
    box-shadow: var(--su-ring);
}

/* Select2 squares off the edge the list hangs from; here the list floats clear of
 * the field (see the dropdown's margin), so the field keeps all four corners. */
.signup .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.signup .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-radius: var(--su-radius);
}

.signup select.is-invalid + .select2-container--default .select2-selection--single {
    border-color: var(--su-error);
}

/* The open list: detached from the field by a small gap, fully rounded. */
.signup .select2-container--default .select2-dropdown {
    margin-top: 6px;
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius);
    background: var(--su-surface);
    box-shadow: 0 18px 40px -16px rgba(58, 66, 84, .28);
    overflow: hidden;
    z-index: 1040;
    animation: signup-fade-in .16s ease both;
}

.signup .select2-container--default .select2-dropdown--above {
    margin-top: -6px;
}

.signup .select2-container--default .select2-search--dropdown {
    padding: 10px;
    border-bottom: 1px solid var(--su-line);
}

.signup .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 42px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--su-line-strong);
    border-radius: 10px;
    font-size: var(--su-fs-base); /* 16px: iOS zooms the page on anything smaller */
    color: var(--su-ink);
    background: var(--su-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%237D5D26' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%237D5D26' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 12px center / 16px 16px no-repeat;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.signup .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--su-brand);
    box-shadow: var(--su-ring);
}

.signup .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: #a7acb6;
}

.signup .select2-container--default .select2-results > .select2-results__options {
    max-height: 280px;
    padding: 6px;
}

.signup .select2-container--default .select2-results__option {
    padding: 9px 12px;
    border-radius: var(--su-radius-sm);
    font-size: var(--su-fs-sm);
    color: var(--su-ink);
}

.signup .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--su-brand-tint);
    color: var(--su-brand);
    font-weight: 600;
}

.signup .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--su-wash);
    color: var(--su-brand-deep);
}

.signup .select2-container--default .select2-results__message {
    color: var(--su-ink-soft);
    font-weight: 400;
}

/* The hostname is read character by character; monospace makes a typo visible. */
.signup .signup-input-mono {
    font-family: var(--su-mono);
    letter-spacing: .01em;
}

/*
 * The web-address field's optional base-domain suffix. A custom group rather than
 * Bootstrap's `.input-group`, which detaches its addon under the BS3->4 bridge.
 * The focus ring moves to the GROUP so field and suffix light up as one control.
 */
.signup .signup-input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--su-radius);
    transition: box-shadow .18s ease;
}

.signup .signup-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    min-width: 0;
}

.signup .signup-input-group:focus-within {
    box-shadow: var(--su-ring);
}

.signup .signup-input-group .form-control:focus {
    position: relative;
    z-index: 1;
    box-shadow: none;
}

.signup .signup-input-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--su-s4);
    border: 1px solid var(--su-line-strong);
    border-left: none;
    border-top-right-radius: var(--su-radius);
    border-bottom-right-radius: var(--su-radius);
    background: var(--su-surface-2);
    color: var(--su-brand);
    font-family: var(--su-mono);
    font-size: var(--su-fs-sm);
    white-space: nowrap;
    transition: border-color .18s ease;
}

.signup .signup-input-group:focus-within .signup-input-addon {
    border-color: var(--su-brand);
}

/* The composed address - a fact, not a verdict, so caption rhythm. */
.signup .signup-host-preview {
    margin: 6px 0 0;
    font-size: var(--su-fs-xs);
    line-height: 1.5;
    color: var(--su-ink-soft);
}

.signup .signup-host-preview:empty {
    display: none;
}

.signup .form-text {
    display: block;
    margin-top: 6px;
    font-size: var(--su-fs-xs);
    line-height: 1.55;
    color: var(--su-ink-soft);
}

/* Inline errors: clear dark-red text with a small marker, not a red block. */
.signup .signup-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--su-s2);
    font-size: var(--su-fs-xs);
    font-weight: 500;
    color: var(--su-error-ink);
    animation: signup-fade-in .2s ease both;
}

.signup .signup-field-error::before {
    content: "!";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--su-error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

@keyframes signup-fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

/* ---- the chosen plan, as a pricing card ----
 * One block per plan is rendered and signup.js un-hides the chosen one, so each
 * change of plan replays the fade-up and the choice visibly "lands". */

.signup .signup-plansummary {
    position: relative;
    background: var(--su-surface);
    border: 1px solid rgba(125, 93, 38, .2);
    border-radius: var(--su-radius-lg);
    box-shadow: 0 10px 28px -20px rgba(125, 93, 38, .35);
    padding: var(--su-s5) var(--su-s6);
    margin-top: var(--su-s3);
    overflow: hidden;
}

.signup .signup-plansummary:not([hidden]) {
    animation: signup-step-in .28s var(--su-ease) both;
}

/* Brand edge down the left: the "selected" marker, without a word to translate. */
.signup .signup-plansummary::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--su-brand), var(--su-gold));
}

.signup .signup-plansummary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-s3);
    flex-wrap: wrap;
}

.signup .signup-plansummary-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.signup .signup-plansummary-amount {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--su-brand);
}

.signup .signup-plansummary-per {
    font-size: var(--su-fs-sm);
    color: var(--su-ink-soft);
}

.signup .signup-plansummary-trial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--su-brand);
    background: var(--su-wash);
    border: 1px solid rgba(209, 170, 103, .5);
    border-radius: var(--su-pill);
    padding: 5px 12px;
}

.signup .signup-plansummary-trial i {
    color: var(--su-gold);
    font-size: 14px;
}

.signup .signup-plansummary-desc {
    font-size: var(--su-fs-sm);
    line-height: 1.6;
    color: var(--su-ink-soft);
    margin: var(--su-s2) 0 0;
}

/* The quotas as four small stat tiles: figure on top, what it counts beneath. */
.signup .signup-plansummary-limits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--su-s2);
    list-style: none;
    padding: 0;
    margin: var(--su-s4) 0 0;
}

.signup .signup-plansummary-limits li {
    min-width: 0;
    padding: 10px var(--su-s3);
    border-radius: var(--su-radius-sm);
    background: var(--su-surface-2);
    border: 1px solid var(--su-line);
    font-size: 12px;
    line-height: 1.35;
    color: var(--su-ink-soft);
}

.signup .signup-plansummary-limits strong {
    display: block;
    margin-bottom: 2px;
    font-size: var(--su-fs-base);
    font-weight: 600;
    color: var(--su-ink);
    overflow-wrap: anywhere;
}

/* ---- the live address verdict ----
 * Hidden while empty, so it takes no space on a form nobody has touched. */
.signup .signup-host-feedback {
    font-size: var(--su-fs-xs);
    font-weight: 500;
    margin: var(--su-s2) 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.signup .signup-host-feedback[data-state=""]         { display: none; }
.signup .signup-host-feedback[data-state="checking"] { color: var(--su-ink-soft); }
.signup .signup-host-feedback[data-state="ok"]       { color: var(--su-ok); }
.signup .signup-host-feedback[data-state="error"]    { color: var(--su-error-ink); }

.signup .signup-host-feedback[data-state]:not([data-state=""])::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.signup .signup-host-feedback[data-state="checking"]::before {
    animation: signup-pulse 1s ease-in-out infinite;
}

@keyframes signup-pulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* ---- terms ---- */

.signup .signup-terms {
    background: var(--su-surface-2);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius);
    padding: var(--su-s2) var(--su-s4);
    margin-top: var(--su-s2);
}

/* The label is the hit area, which gives a 20px box a target well past 44px. */
.signup .signup-terms-label {
    display: flex;
    align-items: flex-start;
    gap: var(--su-s3);
    font-weight: 400 !important; /* app.css bolds every label */
    font-size: var(--su-fs-sm);
    line-height: 1.6;
    color: var(--su-ink);
    margin: 0;
    padding: var(--su-s2) 0;
    cursor: pointer;
}

/* A drawn checkbox. appearance:none changes only the paint - it is still a real
 * checkbox, still `required`, still submitted and still keyboard-operable. */
.signup .signup-terms-label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    border: 1.5px solid rgba(58, 66, 84, .3);
    border-radius: 6px;
    background: var(--su-surface) center / 12px 10px no-repeat;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.signup .signup-terms-label input[type="checkbox"]:hover {
    border-color: var(--su-brand);
}

.signup .signup-terms-label input[type="checkbox"]:checked {
    background-color: var(--su-brand);
    border-color: var(--su-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.3 3.3L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.signup .signup-terms-label input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--su-ring);
    border-color: var(--su-brand);
}

/*
 * The trigger inside the consent sentence: a <button> painted as a link, because it
 * opens a dialog and goes nowhere. `font: inherit` keeps it inside its sentence.
 */
.signup .signup-terms-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--su-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(125, 93, 38, .4);
    cursor: pointer;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.signup .signup-terms-link:hover,
.signup .signup-terms-link:focus {
    color: var(--su-gold);
    text-decoration-color: currentColor;
}

.signup .signup-terms-link:focus-visible {
    outline: none;
    box-shadow: var(--su-focus);
    border-radius: 4px;
}

/* ---- the terms dialog ----
 * Fixed to the viewport; z-index 1050 is Bootstrap's modal layer. */

.signup .signup-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--su-s5);
}

.signup .signup-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(58, 66, 84, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: signup-fade-in .2s ease both;
}

.signup .signup-modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - var(--su-s10));
    background: var(--su-surface);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius-lg);
    box-shadow: 0 30px 60px -20px rgba(58, 66, 84, .35);
    overflow: hidden;
    animation: signup-step-in .25s var(--su-ease) both;
}

.signup .signup-modal-dialog:focus {
    outline: none;
}

.signup .signup-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-s3);
    padding: var(--su-s5) var(--su-s6);
    border-bottom: 1px solid var(--su-line);
}

.signup .signup-modal-head h2 {
    margin: 0;
    font-size: var(--su-fs-h2);
    font-weight: 600;
    color: var(--su-ink);
}

.signup .signup-modal-x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--su-ink-soft);
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.signup .signup-modal-x:hover,
.signup .signup-modal-x:focus {
    background: var(--su-wash);
    color: var(--su-brand);
}

.signup .signup-modal-x:focus-visible {
    outline: none;
    box-shadow: var(--su-focus);
}

/* The one part that scrolls - operator-supplied terms can be any length. */
.signup .signup-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--su-s6);
    font-size: var(--su-fs-sm);
    line-height: 1.75;
    color: var(--su-ink);
}

.signup .signup-modal-body :last-child {
    margin-bottom: 0;
}

.signup .signup-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: var(--su-s4) var(--su-s6);
    border-top: 1px solid var(--su-line);
    background: var(--su-surface-2);
}

/* UNSCOPED BY NECESSITY - the class goes on <body>; signup.js alone adds it. */
body.signup-modal-open {
    overflow: hidden;
}

/* ---- buttons and the actions row ---- */

.signup .signup-actions {
    display: flex;
    align-items: center;
    gap: var(--su-s3);
    margin-top: var(--su-s8);
    padding-top: var(--su-s6);
    border-top: 1px solid var(--su-line);
}

.signup .signup-actions-spacer {
    flex: 1 1 auto;
}

/* Pills, as on the homepage. */
.signup .signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--su-s2);
    min-height: 50px;
    padding: 0 var(--su-s8);
    border: 1.5px solid transparent;
    border-radius: var(--su-pill);
    font-family: var(--su-font);
    font-size: var(--su-fs-body);
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s var(--su-ease);
}

.signup .signup-btn i {
    font-size: 17px;
    transition: transform .18s var(--su-ease);
}

.signup .signup-btn-primary {
    background: var(--su-brand);
    border-color: var(--su-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(94, 70, 28, .2);
}

.signup .signup-btn-primary i {
    color: #fff;
}

.signup .signup-btn-primary:hover,
.signup .signup-btn-primary:focus {
    background: var(--su-brand-deep);
    border-color: var(--su-brand-deep);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--su-shadow-md);
    transform: translateY(-1px);
}

.signup .signup-btn-primary:hover .la-arrow-right {
    transform: translateX(3px);
}

/* Pressed: on touch there is no hover, so this is the only feedback before the
 * page moves on. */
.signup .signup-btn-primary:active {
    background: var(--su-btn-darker);
    border-color: var(--su-btn-darker);
    transform: translateY(0);
    box-shadow: none;
}

.signup .signup-btn-ghost {
    background: var(--su-surface);
    border-color: rgba(125, 93, 38, .25);
    color: var(--su-brand);
}

.signup .signup-btn-ghost i {
    color: var(--su-brand);
}

.signup .signup-btn-ghost:hover,
.signup .signup-btn-ghost:focus {
    background: rgba(220, 209, 197, .3);
    border-color: rgba(125, 93, 38, .45);
    color: var(--su-brand-deep);
    text-decoration: none;
}

.signup .signup-btn-ghost:hover .la-arrow-left {
    transform: translateX(-3px);
}

.signup .signup-btn:focus-visible {
    outline: none;
    box-shadow: var(--su-focus);
}

.signup .signup-foot {
    text-align: center;
    font-size: var(--su-fs-sm);
    color: var(--su-ink-soft);
    margin: var(--su-s6) 0 0;
}

.signup .signup-foot strong {
    font-weight: 500;
    color: var(--su-ink-soft);
}

/* Every link in the foot is a brand link - find_workspace's "Sign up" is a bare <a>. */
.signup .signup-foot a {
    color: var(--su-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(125, 93, 38, .35);
}

.signup .signup-foot a:hover,
.signup .signup-foot a:focus {
    color: var(--su-gold);
    text-decoration-color: currentColor;
}

.signup .signup-foot .signup-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    color: var(--su-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(125, 93, 38, .35);
    transition: color .15s ease, text-decoration-color .15s ease;
}

.signup .signup-foot .signup-foot-link:hover,
.signup .signup-foot .signup-foot-link:focus {
    color: var(--su-gold);
    text-decoration-color: currentColor;
}

.signup .signup-foot .signup-foot-link:focus-visible {
    outline: none;
    box-shadow: var(--su-focus);
    border-radius: 4px;
}

.signup .signup-foot .signup-foot-link .la-arrow-right {
    font-size: 14px;
    transition: transform .15s ease;
}

.signup .signup-foot .signup-foot-link:hover .la-arrow-right {
    transform: translateX(2px);
}

/* ---- the error summary: a soft tint and clear text, not a red slab ---- */

.signup .signup-alert {
    display: flex;
    gap: var(--su-s3);
    background: var(--su-error-tint);
    border: 1px solid rgba(179, 38, 30, .16);
    border-left: 3px solid var(--su-error);
    border-radius: var(--su-radius);
    padding: var(--su-s4) var(--su-s5);
    margin-bottom: var(--su-s6);
    color: var(--su-error-ink);
    font-size: var(--su-fs-sm);
    line-height: 1.55;
    animation: signup-fade-in .25s ease both;
}

.signup .signup-alert li {
    color: var(--su-error-ink);
}

.signup .signup-alert i {
    margin-top: 1px;
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--su-error);
}

.signup .signup-alert ul {
    padding-left: var(--su-s4);
    margin: 0;
}

/* ==========================================================================
 * The closed and success states
 * They sit inside the registration card, so they draw no card of their own.
 * ========================================================================== */

.signup .signup-outcome {
    background: none;
    border: 0;
    box-shadow: none;
    text-align: center;
    padding: var(--su-s6) 0 var(--su-s2);
}

.signup .signup-outcome-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto var(--su-s6);
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup .signup-outcome-ok .signup-outcome-icon {
    background: var(--su-brand);
    color: #fff;
    box-shadow: 0 0 0 10px var(--su-wash), 0 12px 28px -8px rgba(125, 93, 38, .45);
    animation: signup-sent-pop .45s cubic-bezier(.2, .9, .3, 1.3) both;
}

.signup .signup-outcome-closed .signup-outcome-icon {
    background: var(--su-wash);
    color: var(--su-brand);
}

.signup .signup-outcome-icon i {
    color: inherit;
}

.signup .signup-outcome h2 {
    font-size: var(--su-fs-h1);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--su-ink);
    margin: 0 0 var(--su-s3);
}

.signup .signup-outcome p {
    color: var(--su-ink-soft);
    font-size: var(--su-fs-sm);
    line-height: 1.7;
    max-width: 440px;
    margin: 0 auto var(--su-s5);
}

.signup .signup-outcome p a {
    color: var(--su-brand);
    font-weight: 600;
}

.signup .signup-outcome p a:hover {
    color: var(--su-gold);
}

/* The new address, as text as well as behind the button - something they can write
 * down - with the copy button in the same box so the two read as one control. */
.signup .signup-outcome-url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-s3);
    background: var(--su-surface-2);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius);
    padding: 8px 8px 8px 16px;
    margin: var(--su-s6) auto var(--su-s3);
    max-width: 100%;
    text-align: left;
}

.signup .signup-outcome-url-text {
    font-family: var(--su-mono);
    font-size: var(--su-fs-xs);
    color: var(--su-ink);
    word-break: break-all;
}

.signup .signup-copy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(125, 93, 38, .25);
    background: var(--su-surface);
    color: var(--su-brand);
    font-family: var(--su-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 12px;
    border-radius: var(--su-pill);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.signup .signup-copy-btn:hover,
.signup .signup-copy-btn:focus {
    background: var(--su-wash);
    border-color: var(--su-brand);
}

.signup .signup-copy-btn:focus-visible {
    outline: none;
    box-shadow: var(--su-focus);
}

/* Attribute selector rather than `.la-copy` - JS swaps it for `.la-check`. */
.signup .signup-copy-btn [data-signup-copy-icon] {
    font-size: 15px;
}

.signup .signup-copy-btn[data-state="copied"] {
    color: var(--su-ok);
    border-color: var(--su-ok);
    background: var(--su-ok-tint);
}

.signup .signup-outcome-note {
    font-size: var(--su-fs-xs);
}

/* ---- "Find my workspace": the email-sent panel ---- */

.signup .signup-outcome.signup-sent {
    padding: var(--su-s4) 0 0;
}

.signup .signup-sent .signup-sent-badge {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto var(--su-s5);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--su-gold) 0%, var(--su-brand) 100%);
    color: #fff;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 10px var(--su-wash), 0 12px 28px -8px rgba(125, 93, 38, .45);
    animation: signup-sent-pop .45s cubic-bezier(.2, .9, .3, 1.3) both;
}

.signup .signup-sent .signup-sent-badge i {
    color: #fff;
}

@keyframes signup-sent-pop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.signup .signup-sent .signup-sent-title {
    font-size: var(--su-fs-h1);
    font-weight: 600;
    color: var(--su-ink);
    margin: var(--su-s6) 0 var(--su-s2);
}

.signup .signup-sent .signup-sent-lede {
    font-size: var(--su-fs-sm);
    color: var(--su-ink-soft);
    margin: 0 auto var(--su-s3);
}

.signup .signup-sent .signup-sent-email {
    display: inline-flex;
    align-items: center;
    gap: var(--su-s2);
    max-width: 100%;
    padding: 10px var(--su-s5);
    margin: 0 auto var(--su-s8);
    border-radius: var(--su-pill);
    background: var(--su-wash);
    border: 1px solid rgba(209, 170, 103, .45);
    color: var(--su-ink);
    font-size: var(--su-fs-body);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.signup .signup-sent .signup-sent-email .la-envelope {
    color: var(--su-brand);
    font-size: 20px;
    flex-shrink: 0;
}

.signup .signup-sent .signup-sent-next {
    text-align: left;
    background: var(--su-surface-2);
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius-lg);
    padding: var(--su-s5) var(--su-s5) var(--su-s2);
    margin: 0 0 var(--su-s4);
}

.signup .signup-sent .signup-sent-label {
    max-width: none;
    margin: 0 0 var(--su-s4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--su-ink-faint);
}

.signup .signup-sent .signup-sent-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.signup .signup-sent .signup-sent-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--su-s3);
    margin: 0 0 var(--su-s4);
    color: var(--su-ink);
    font-size: var(--su-fs-sm);
    line-height: 1.5;
}

.signup .signup-sent .signup-sent-stepnum {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: -1px;
    border-radius: 50%;
    background: var(--su-surface);
    border: 1px solid rgba(209, 170, 103, .6);
    color: var(--su-brand);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup .signup-sent .signup-sent-help {
    display: flex;
    gap: var(--su-s3);
    text-align: left;
    padding: var(--su-s3) var(--su-s4);
    margin: 0 0 var(--su-s6);
    border-radius: var(--su-radius);
    background: var(--su-wash);
    border: 1px solid rgba(209, 170, 103, .45);
    font-size: var(--su-fs-xs);
    line-height: 1.55;
    color: var(--su-ink);
}

.signup .signup-sent .signup-sent-help .la-info-circle {
    font-size: 20px;
    color: var(--su-gold);
    flex-shrink: 0;
    margin-top: 1px;
}

.signup .signup-sent .signup-sent-help strong {
    display: block;
    color: var(--su-brand-deep);
    margin-bottom: 2px;
}

.signup .signup-sent .signup-sent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--su-s3);
}

.signup .signup-sent .signup-sent-actions form {
    margin: 0;
}

.signup .signup-sent .signup-sent-actions .signup-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--su-s4);
    font-size: var(--su-fs-sm);
}

/* Screen-reader only (the copy confirmation is announced through this). */
.signup .signup-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
 * The Pay button, and the marks under it
 *
 * The one button that asks a stranger for money, seconds after the form. The card
 * glyph says "checkout", the arrow says it LEAVES the page (the processor hosts the
 * card form), the scheme marks answer "will it take my card", and the padlock line
 * answers "who gets my card number". All Line Awesome glyphs - nothing to fetch.
 * -------------------------------------------------------------------------- */

.signup .signup-btn-pay {
    padding-left: var(--su-s6);
    padding-right: var(--su-s6);
}

.signup .signup-btn-pay .la-credit-card {
    font-size: 20px;
}

.signup .signup-btn-pay .signup-btn-arrow {
    font-size: 18px;
    transition: transform .15s ease;
}

.signup .signup-btn-pay:hover .signup-btn-arrow,
.signup .signup-btn-pay:focus .signup-btn-arrow {
    transform: translateX(3px);
}

.signup .signup-paymarks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--su-s3);
    margin: var(--su-s5) 0 var(--su-s2);
    font-size: 30px;
    line-height: 1;

    /* Muted on purpose: a statement of fact, not four logos out-shouting the button. */
    color: var(--su-ink-faint);
}

.signup .signup-paymarks i {
    color: inherit;
}

/* `.signup-outcome` is in the selector to beat `.signup .signup-outcome p`. */
.signup .signup-outcome .signup-paysecure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--su-fs-xs);
    color: var(--su-ink-soft);
    max-width: 460px;
    margin: 0 auto var(--su-s5);
}

.signup .signup-outcome .signup-paysecure .la-lock {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--su-gold);
}

/* ---- the receipt strip, drawn after a settled payment ----
 * The same brown-on-wash as the tick above it: both say the same thing about the
 * same event, and a second accent would read as a separate status. */

.signup .signup-receipt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--su-s2);
    background: var(--su-wash);
    border: 1px solid rgba(209, 170, 103, .45);
    border-radius: var(--su-radius);
    padding: var(--su-s3) var(--su-s4);
    margin: 0 auto var(--su-s3);
    max-width: 440px;
}

.signup .signup-receipt .la-check-circle {
    font-size: 18px;
    color: var(--su-brand);
    flex-shrink: 0;
}

.signup .signup-receipt-head {
    font-size: var(--su-fs-sm);
    font-weight: 600;
    color: var(--su-brand);
}

.signup .signup-receipt-amount {
    font-size: var(--su-fs-body);
    font-weight: 600;
    color: var(--su-ink);
}

.signup .signup-receipt-plan {
    font-size: var(--su-fs-xs);
    color: var(--su-ink-soft);
}

.signup .signup-outcome .signup-receipt-note {
    margin-bottom: var(--su-s5);
}

/* The secondary "pay now" under a sign-in CTA - sized down so the order is clear. */
.signup .signup-btn-paylater {
    min-height: 42px;
    margin-top: var(--su-s4);
    font-size: var(--su-fs-sm);
}

.signup .signup-btn-paylater .la-credit-card {
    font-size: 17px;
}

/* ==========================================================================
 * Responsive - Bootstrap 4's boundaries (576 / 768 / 992 / 1200).
 * 320px is the narrowest width supported.
 * ========================================================================== */

/* ---- 992-1199: the split holds, tighter. ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .signup {
        --su-fs-display: 32px;
    }

    .signup .signup-split {
        gap: var(--su-s10);
        padding-left: var(--su-s6);
        padding-right: var(--su-s6);
    }

    .signup .signup-topbar {
        padding-left: var(--su-s6);
        padding-right: var(--su-s6);
    }

    .signup .signup-panel-inner {
        padding: var(--su-s10) var(--su-s8) var(--su-s8);
    }

    .signup .signup-panel-inner::before {
        left: var(--su-s8);
        right: var(--su-s8);
    }
}

/* ---- < 992: stacked. The pitch becomes a short intro above the card. ---- */
@media (max-width: 991.98px) {
    .signup .signup-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--su-s6);
        padding: 0 var(--su-s6) var(--su-s12);
    }

    .signup > .signup-split:first-child {
        padding-top: var(--su-s6);
    }

    .signup .signup-topbar {
        padding: var(--su-s5) var(--su-s6);
    }

    .signup .signup-banner {
        position: static;
        padding-top: 0;
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .signup .signup-banner-inner {
        max-width: none;
        padding: var(--su-s4) 0 0;
    }

    .signup .signup-banner .signup-banner-heading {
        font-size: 28px;
        margin-bottom: var(--su-s3);
    }

    .signup .signup-banner-heading::after {
        margin-top: var(--su-s4);
    }

    .signup .signup-banner .signup-banner-lede {
        font-size: var(--su-fs-sm);
        margin-bottom: 0;
    }

    /* The half of the pitch that costs vertical space goes; the promise stays.
     * Not a toggle: a disclosure over marketing copy is a control nobody opens. */
    .signup .signup-art,
    .signup .signup-points,
    .signup .signup-banner-modules {
        display: none;
    }

    .signup .signup-panel-inner {
        margin: 0 auto;
        padding: var(--su-s10) var(--su-s8) var(--su-s8);
    }

    .signup .signup-panel-inner::before {
        left: var(--su-s8);
        right: var(--su-s8);
    }
}

/* ---- < 768: single-column fields. ---- */
@media (max-width: 767.98px) {
    .signup .signup-split {
        padding: 0 var(--su-s4) var(--su-s10);
    }

    .signup .signup-topbar {
        padding: var(--su-s4);
    }

    .signup .signup-topbar-logo img {
        height: 34px;
    }

    .signup .signup-banner .signup-banner-heading {
        font-size: 24px;
    }

    .signup .signup-panel-inner {
        border-radius: 20px;
        padding: var(--su-s8) var(--su-s6) var(--su-s6);
    }

    .signup .signup-panel-inner::before {
        left: var(--su-s6);
        right: var(--su-s6);
    }

    .signup .signup-head {
        margin-bottom: var(--su-s6);
    }

    .signup .signup-steps {
        margin-bottom: var(--su-s6);
        padding-bottom: var(--su-s5);
    }

    /* A 6/6 split here gives each field ~160px - not enough for a name or a month. */
    .signup .signup-col-5,
    .signup .signup-col-6,
    .signup .signup-col-7 {
        grid-column: span 12;
    }

    .signup .signup-plansummary {
        padding: var(--su-s4) var(--su-s5);
    }

    .signup .signup-plansummary-amount {
        font-size: 26px;
    }

    .signup .signup-plansummary-limits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- < 576: the narrow phone. ---- */
@media (max-width: 575.98px) {
    .signup .signup-banner-top {
        gap: var(--su-s2);
    }

    .signup .signup-brand-mark {
        width: 36px;
        height: 36px;
    }

    .signup .signup-brand-word {
        font-size: 17px;
    }

    .signup .signup-banner .signup-banner-heading {
        font-size: 22px;
    }

    /* The card is what this screen is for; one line of pitch above it is enough. */
    .signup .signup-banner .signup-banner-lede {
        display: none;
    }

    .signup .signup-head h2 {
        font-size: 23px;
    }

    .signup .signup-panel-inner {
        border-radius: 18px;
        padding: var(--su-s8) var(--su-s4) var(--su-s5);
    }

    .signup .signup-panel-inner::before {
        left: var(--su-s5);
        right: var(--su-s5);
    }

    .signup .signup-outcome-url {
        flex-direction: column;
        align-items: stretch;
    }

    .signup .signup-copy-btn {
        justify-content: center;
    }

    /* Full-width, stacked, primary on top: the thumb reaches the bottom first,
     * and Back is the rarer of the two. */
    .signup .signup-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--su-s2);
    }

    .signup .signup-actions-spacer {
        display: none;
    }

    .signup .signup-btn {
        width: 100%;
        min-height: 52px;
    }

    .signup .signup-sent .signup-sent-actions {
        grid-template-columns: 1fr;
    }

    /* A sheet, not a card: at this width the terms are the thing being read. */
    .signup .signup-modal {
        padding: 0;
    }

    .signup .signup-modal-dialog {
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: 0;
    }

    .signup .signup-modal-head,
    .signup .signup-modal-body {
        padding-left: var(--su-s4);
        padding-right: var(--su-s4);
    }

    .signup .signup-modal-foot {
        padding: var(--su-s3) var(--su-s4) var(--su-s4);
    }
}

/* Both step labels fit down to ~360px; below that the dots and the track say enough. */
@media (max-width: 359.98px) {
    .signup .signup-steplabel {
        display: none;
    }
}

/* Honour the OS setting: no movement, colour changes only. */
@media (prefers-reduced-motion: reduce) {
    .signup *,
    .signup *::before,
    .signup *::after {
        animation: none !important;
        transition-duration: 0s !important;
    }

    .signup .signup-btn-primary:hover,
    .signup .signup-btn-primary:focus,
    .signup .signup-btn:hover i,
    .signup .signup-btn-pay:hover .signup-btn-arrow {
        transform: none;
    }
}