/* Signup funnel v3 — layout, plan card */

/* signup2's rem-based sizing throughout this file (min-heights, paddings,
   font-sizes — most of it written long before signup1's redesign) was built
   assuming Bootstrap's classic `html { font-size: 62.5% }` convention (1rem
   = 10px), which bootstrap.min.css used to provide. Now that signup2 no
   longer loads Bootstrap, restore that same 10px root — but ONLY for
   signup2, via :has() targeting its body class — so signup1 (tuned against
   the real 16px browser default) isn't affected. Without this, every rem
   value on signup2 renders 1.6x too large (16/10), clipping text out of
   fields sized for the old assumption. */
html:has(body.signup-funnel-page--step2) {
    font-size: 62.5%;
}

/* Accessibility floor: an actual field's own typed-in text must render at a
   true 16px so iOS Safari doesn't auto-zoom on focus. Most fields already
   clear this via their own more specific rules (the .form-control !important
   overrides further down, sized well above 16px to match signup1) — this is
   the backstop for the rest (native radios/checkboxes, the Plan Advisor's
   selects, the address-suggestion modal's radios), which otherwise inherit
   either the browser's ~13.3px form-control default or a sub-16px rem value
   computed against this page's 10px root above. Element selectors here so
   any more specific existing rule still wins over this floor. */
body.signup-funnel-page--step2 input,
body.signup-funnel-page--step2 select,
body.signup-funnel-page--step2 textarea {
    font-size: 16px;
}

/* Neither signup1 nor signup2 load bootstrap.min.css/js or Material Kit
   anymore (unused Bootstrap 3 skin — its defaults were fighting the site's
   real design system on every element). This block replaces the handful of
   structural rules both pages were actually relying on: the universal
   box-sizing reset, and .form-control's display/width (inputs default to
   their native intrinsic size without it). Purely structural — no
   colors/sizes here, those stay in the rules below. */
body.signup-funnel-page *,
body.signup-funnel-page *::before,
body.signup-funnel-page *::after {
    box-sizing: border-box;
}

body.signup-funnel-page .form-control {
    display: block;
    width: 100%;
    margin: 0;
}

body.signup-funnel-page .form-group {
    margin-bottom: 1rem;
}

body.signup-funnel-page button {
    margin: 0;
    cursor: pointer;
}

/* Raised card layout (signup1 & signup2) — signup1 overrides this to plain
   white just below; this base value is what signup2 actually renders with. */
body.signup-funnel-page {
    background: linear-gradient(160deg, #f3f7fc 0%, #ffffff 58%, #f6f9fd 100%);
    min-height: 100vh;
    margin: 0;
}

/* signup1: same fixed page-bg treatment as the marketing site (assets/css/site.css /
   about.html) — static gradient base + two soft blue blobs, ported directly rather than
   linked so this page doesn't pick up the shared site.js (nav/mega-menu/marquee wiring
   that has nothing to do with signup1). */
body.signup-funnel-page:not(.signup-funnel-page--step2) {
    background: #fff;
}

.signup-page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(160deg, #f3f7fc 0%, #ffffff 58%, #f6f9fd 100%);
}

.signup-page-bg::before {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 80% 12%, rgba(0, 119, 255, .05), transparent 55%),
        linear-gradient(160deg, #f3f7fc 0%, #ffffff 58%, #f6f9fd 100%);
}

.signup-page-bg .blob {
    position: absolute;
    border-radius: 50%;
}

.signup-page-bg .pb-blue-1 {
    width: 54rem; height: 40rem;
    top: -12rem; right: -10rem;
    background: radial-gradient(closest-side, rgba(0, 119, 255, .045), transparent 72%);
}

.signup-page-bg .pb-blue-2 {
    width: 40rem; height: 32rem;
    bottom: -10rem; left: -12rem;
    background: radial-gradient(closest-side, rgba(0, 119, 255, .035), transparent 72%);
}

body.signup-funnel-page .wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

.signup-card-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.signup-card-page--scroll {
    align-items: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.signup-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 400px;
    padding: 2.25rem 2rem 2rem;
    box-sizing: border-box;
}

.signup-card--wide {
    max-width: 520px;
    padding: 2rem 1.75rem 1.75rem;
}

.signup-card--step1 {
    padding: 2.5rem;
    box-shadow: 0 24px 60px rgba(15, 40, 90, 0.16), 0 4px 14px rgba(15, 40, 90, 0.08);
    border: 1px solid rgba(15, 40, 90, 0.05);
}

/* Phones: the raised/centered card reads as a floating dialog on a small
   viewport — flatten it into the page itself and start content at the top
   instead of vertically centering, which otherwise pushes it down awkwardly
   once the keyboard opens for the first field. */
@media (max-width: 575px) {
    .signup-page-bg {
        display: none;
    }

    .signup-card-page {
        align-items: flex-start;
        padding: 0;
        background: #fff;
    }

    .signup-step1-shell {
        max-width: none;
    }

    .signup-card--step1 {
        width: 100%;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
        background: #fff;
        padding-bottom: 0;
    }

    /* Gap from the card's own divider down to "Log in" is 2rem (the
       login-link's margin-top collapsing over the divider's 1rem
       margin-bottom). Match that below "Log in" too: card padding-bottom is
       zeroed above so this margin-top is the entire gap down to this
       divider's line. */
    .signup-step1-shell .signup-step1-legal {
        padding: 1.5rem 1.5rem 0;
        margin-top: 2rem;
        border-top: 1px solid #e5e7eb;
    }
}

.signup-card--step1 .signup-card__logo {
    max-width: 196px;
    margin-bottom: 1.65rem;
}

.signup-card--step1 .signup-card__title {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.signup-card--step1 .signup-card__lede {
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: #5b6573;
}

/* Bootstrap 3's stock alert box (#f2dede / #a94442) doesn't belong to this brand —
   reuse the same red-tinted panel language as .signup-card__hint--error below. */
.signup-card--step1 .alert-danger {
    background: #fdf8f8;
    border: 1px solid rgba(180, 35, 45, 0.25);
    color: #b4232d;
    border-radius: 8px;
    font-size: 1.0625rem;
    font-weight: 600;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
}

.signup-card--step1 .signup-card__label {
    font-size: 1.375rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #222;
    line-height: 1.35;
}

/* Both fields are floating-label groups now, so the email group needs the
   same bottom margin the float-group rule gives the password group's sibling
   spacing — set on the shared field-group class instead of per-phase.
   Compound selector (.signup-card.signup-card--step1 .form-group.___): the
   de-bootstrap fallback at the top of this file (body...:not(...) .form-group)
   has 3 classes + a type selector, which otherwise beats a plain 2-class
   selector here on specificity — same issue as the .form-control collision
   above, different rule. */
.signup-card.signup-card--step1 .signup-step1-credentials-stack {
    margin-bottom: 1.5rem;
}

/* Tightens the gap when a password error is about to render right after the
   stack — #emailHelp sits between the stack and #passwordHelp in markup, so
   this uses the general sibling combinator (~) instead of the adjacent one
   (+) to still match. */
.signup-card--step1 .signup-step1-credentials-stack:has(~ #passwordHelp:not(:empty)) {
    margin-bottom: 0.15rem;
}

/* Input box matches /contact-custom's .hs-input field exactly: same border color,
   radius, resting shadow, hover/focus treatment — just a floating label instead
   of a static one above it. */
/* .signup-card.signup-card--step1 (compound, not just .signup-card--step1): the
   card element carries both classes at once, and the older shared rule at
   .signup-card .form-group .form-control (further down, same 3-selector
   specificity) was winning on source order alone and silently swallowing every
   value below. Compounding the classes here guarantees these win regardless of
   where they sit in the file. Signup2's plain (non-grouped) fields share the
   same box now via the .signup-card.signup2-form-card variant — grouped
   fields (signup-address-stack, signup-cc-group) still win over this because
   their own rules further down the file are the same specificity and come
   later, so ties resolve in their favor; that's intentional, they keep their
   distinct joined-box chrome. */
.signup-card.signup-card--step1 .form-group .form-control,
.signup-card.signup2-form-card .form-group .form-control {
    font-size: 1.125rem;
    padding: 0.875rem 1rem;
    line-height: 1.45;
    border: 1px solid #c6cedb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.signup-card.signup-card--step1 .form-group .form-control:hover,
.signup-card.signup2-form-card .form-group .form-control:hover {
    border-color: #9aa5b5;
}

/* Red is this card's error color (alert-danger, the hint--error state, txt-red) —
   reusing it for focus still reads as "this is wrong." Just thicken and darken
   the field's own border to --ink instead of adding a separate outline ring —
   box-sizing:border-box means the extra width grows inward, so nothing shifts. */
.signup-card.signup-card--step1 .form-group .form-control:focus,
.signup-card.signup2-form-card .form-group .form-control:focus {
    border-width: 2px;
    border-color: #222222;
    outline: none;
    box-shadow: none;
}

/* signup2 renders at a 10px root (see the html:has() rule near the top of
   this file — its legacy CSS assumes Bootstrap's old 62.5% trick) while
   signup1 renders at the real 16px browser default, so the shared rem
   values above compute 1.6x smaller here. Fixed-px overrides below, copied
   from what signup1 actually renders, make every field genuinely match
   signup1's instead of just sharing the same rule text. (font-size is set
   further down, in the --signup2-type-scale block, where a higher-priority
   !important rule already targets .form-control — kept there instead of
   duplicated here.) */
.signup-card.signup2-form-card .form-group .form-control {
    padding: 14px 16px;
}

/* Floating label — rests inside the input like a placeholder, floats above
   it (clear of the border) on focus or once a value is present. Shared by
   both cards (`.signup-card` is the base class both signup1's
   `.signup-card--step1` and signup2's `.signup2-form-card` carry) so every
   field on both pages gets identical label behavior. No padding-top reserve
   here (that used to inflate the gap ABOVE whichever field had a label,
   making it uneven with gaps that didn't) — the floated label instead pokes
   up into the field-group's own margin-bottom below it, so every gap stays
   the same size, set in one place per page: .signup-step1-field-group's (or
   the equivalent signup2 field-group's) margin-bottom. */
.signup-card .signup-float-group {
    position: relative;
}

.signup-card .signup-float-group .signup-float-label {
    position: absolute;
    left: 1rem;
    top: 0.875rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #5b6573;
    line-height: 1.4;
    pointer-events: none;
    /* Bento/address-stack fields give their own .form-control
       position:relative + z-index:1 on :focus (for the inset focus ring) —
       tying with this label's z-index would let the input (later in the DOM,
       so it wins stacking ties) paint over and hide the label the moment the
       field is clicked into. z-index:2 keeps the label above regardless. */
    z-index: 2;
    transition: top .15s ease, left .15s ease, font-size .15s ease, color .15s ease,
                font-weight .15s ease, background-color .15s ease;
}

/* signup2's 10px root shrinks the shared rem values above by 1.6x — fixed-px
   equivalents of signup1's actual rendering, same reasoning as the
   .form-control override above. */
.signup-card.signup2-form-card .signup-float-group .signup-float-label {
    left: 16px;
    top: 14px;
    font-size: 16px;
}

/* Same 10px-root problem as the form-card fields above, but for the sidebar
   fax card's own fields (Area Code / Fax number to port) — font-size only,
   since this card's fields use their own positioning already. */
.signup-card.signup2-sidebar-fax-card .signup-float-group .signup-float-label {
    font-size: 16px;
}

.signup-card .signup-required {
    color: inherit;
    margin-left: 0.15rem;
}

/* floated size/weight matches /contact-custom's real field label (.hs-form-field
   > label: .875rem / 650) rather than the resting size scaled down */
/* "Notched outline" style: the label centers ON the input's own top border
   line (border now sits at the .signup-float-group's own top edge, y=0, since
   there's no padding-top reserve any more) with a white backdrop so the
   border doesn't visibly cut through the letters. The label pokes up into
   the gap above (negative top) rather than a dedicated reserve — see the
   comment on .signup-float-group above. Position/size/background apply
   whenever floated (focused OR filled); color is set separately below so it
   only darkens while actually focused — a filled-but-blurred field keeps its
   normal muted label color. A <select> has no :placeholder-shown, so its
   empty state is signaled instead by the required, empty-value placeholder
   option tripping :invalid — see the select-specific variant further down. */
.signup-card .signup-float-group:focus-within .signup-float-label,
.signup-card .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label,
.signup-card .signup-float-group:has(select:not(:invalid)) .signup-float-label {
    top: -0.66rem;
    left: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    background: #fff;
    padding: 0 0.25rem;
}

.signup-card .signup-float-group:focus-within .signup-float-label {
    color: #222222;
}

.signup-card.signup2-form-card .signup-float-group:focus-within .signup-float-label,
.signup-card.signup2-form-card .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label,
.signup-card.signup2-form-card .signup-float-group:has(select:not(:invalid)) .signup-float-label {
    top: -10.5px;
    left: 12px;
    font-size: 15px;
    padding: 0 4px;
}

.signup-card.signup2-sidebar-fax-card .signup-float-group:focus-within .signup-float-label,
.signup-card.signup2-sidebar-fax-card .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label,
.signup-card.signup2-sidebar-fax-card .signup-float-group:has(select:not(:invalid)) .signup-float-label {
    font-size: 12px;
}

/* Leading-icon variant (the port-number field's portability status icon
   sits to the left of the input inside the same bordered wrap) — the label
   needs to clear that icon box (flex: 0 0 2.5rem) instead of starting at the
   group's own left edge. */
.signup-card .signup-float-group--icon-leading .signup-float-label {
    left: calc(2.5rem + 1rem);
}

.signup-card .signup-float-group--icon-leading:focus-within .signup-float-label,
.signup-card .signup-float-group--icon-leading:has(input:not(:placeholder-shown)) .signup-float-label {
    left: calc(2.5rem + 0.75rem);
}

.signup-card.signup2-form-card .signup-float-group--icon-leading .signup-float-label {
    left: 56px;
}

.signup-card.signup2-form-card .signup-float-group--icon-leading:focus-within .signup-float-label,
.signup-card.signup2-form-card .signup-float-group--icon-leading:has(input:not(:placeholder-shown)) .signup-float-label {
    left: 52px;
}

/* Icon-leading variant inside a bento box (currently just the port-number
   field) — same vertical position/size as every other address-stack label
   (resting and floated share the address-stack's own top/14px-left rules),
   just shifted right by the icon chip's width so it never overlaps the
   persistent status icon. The element in markup carries BOTH
   .signup-float-group and .signup-float-group--icon-leading, so writing
   both classes here (rather than just the modifier alone) adds a genuinely
   higher specificity than the plain .signup-float-group rules below/further
   down — a tie on class-count alone would lose to source order, since both
   of those come later in the file. */
.signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group.signup-float-group--icon-leading .signup-float-label {
    left: calc(14px + 2.5rem);
}

body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group.signup-float-group--icon-leading:focus-within .signup-float-label,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group.signup-float-group--icon-leading:has(input:not(:placeholder-shown)) .signup-float-label {
    left: calc(14px + 2.5rem);
}

/* Inside-only variant — every "bento" grouped field (Card Number, Expiry,
   CVC, Street Address, Apt/Suite, City, State, Zip) shrinks its label to a
   small caption INSIDE the box instead of the notched style that pokes above
   the border. Originally this only covered the collapsible details grid
   (.signup-address-stack__details, which needs its own overflow:hidden for
   the expand/collapse 0fr/auto grid-template-rows animation — a
   border-crossing label there would get clipped) but is now applied to the
   whole .signup-address-stack for a consistent look across every grouped
   field, clipping concerns or not. */
.signup-address-stack .signup-float-group .signup-float-label {
    transition: top .15s ease, font-size .15s ease, color .15s ease, font-weight .15s ease;
}

/* The generic resting-label position (left:16px, top:14px) is tuned for
   non-bento fields' shorter box height. Address-stack fields are taller
   (56px min-height) and start their text 2px further left (14px padding),
   so the resting label needs both a left correction and a true vertical
   center: (56px box - 22.4px label line-height) / 2 ≈ 16.8px. */
.signup-card.signup2-form-card .signup-address-stack .signup-float-group .signup-float-label,
.signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group .signup-float-label,
.signup-card.signup-card--step1 .signup-address-stack .signup-float-group .signup-float-label {
    left: 14px;
    top: 17px;
}

.signup-address-stack .signup-float-group:focus-within .signup-float-label,
.signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label,
.signup-address-stack .signup-float-group:has(select:not(:invalid)) .signup-float-label {
    top: 0.4rem;
    left: 1.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    background: transparent;
    padding: 0;
}

.signup-card.signup2-form-card .signup-address-stack .signup-float-group:focus-within .form-control,
.signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .form-control,
.signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(select:not(:invalid)) .form-control {
    padding-top: 1.75rem !important;
    padding-bottom: 0.5rem !important;
}

body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:focus-within .signup-float-label,
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label,
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(select:not(:invalid)) .signup-float-label,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group:focus-within .signup-float-label,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group:has(select:not(:invalid)) .signup-float-label,
.signup-card.signup-card--step1 .signup-address-stack .signup-float-group:focus-within .signup-float-label,
.signup-card.signup-card--step1 .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .signup-float-label {
    top: 6.5px;
    left: 14px;
    font-size: 13px;
    font-weight: 700;
    /* The non-bento "notched" float style (.signup-card.signup2-form-card
       .signup-float-group:has(...) .signup-float-label, higher specificity
       than the address-stack's own padding:0 rule) adds padding:0 4px for
       its white background-notch look — that leaks in here and shifts the
       label 4px right of where the input's own text actually starts. */
    padding: 0;
    background: transparent;
}

/* Higher specificity than the address-stack's own :focus padding rule
   further down (which ties/beats a lower-specificity override on the
   :focus state specifically, since its selector list includes a
   .form-control:focus variant) — without this, clicking into a bento field
   reset its padding back to non-inset values, visually burying the shrunk
   label under the input's cursor/text. */
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:focus-within .form-control,
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .form-control,
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(select:not(:invalid)) .form-control,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group:focus-within .form-control,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .form-control,
body.signup-funnel-page--step2 .signup-card.signup2-sidebar-fax-card .signup-address-stack .signup-float-group:has(select:not(:invalid)) .form-control,
.signup-card.signup-card--step1 .signup-address-stack .signup-float-group:focus-within .form-control,
.signup-card.signup-card--step1 .signup-address-stack .signup-float-group:has(input:not(:placeholder-shown)) .form-control {
    padding-top: 24px !important;
    padding-bottom: 7px !important;
}

/* The chevron's "center" background-position (below) is only correct while
   the field shows its centered placeholder-sized label. Once shrunk to the
   small inset caption, the value text drops to the padding-top:24px/
   padding-bottom:7px band below — center on the full box height would float
   the chevron up near the label instead of the selected value, so it's
   pinned to the vertical center of that value-text band instead
   (24px + half of the 22.4px line-height ≈ 35px). */
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:focus-within select.form-control,
body.signup-funnel-page--step2 .signup-card.signup2-form-card .signup-address-stack .signup-float-group:has(select:not(:invalid)) select.form-control {
    background-position: calc(100% - 14px) 35px !important;
}

.signup-card--step1 .signup-password-wrap .form-control {
    padding-right: 3rem;
}

/* The bento address-stack's own .form-control rule (higher specificity via
   .signup-card .signup-address-stack .form-group .form-control) sets
   padding via the shorthand `padding: 15px 14px`, which ties on class-count
   with the rule above and wins on source order — squeezing the input back
   under the show/hide toggle. Outrank it explicitly for the bento context. */
/* Needs to beat the bento base rule's OWN :focus variant
   (.signup-card .signup-address-stack .form-group .form-control:focus),
   which ties this rule's specificity (5 classes vs 4 classes + :focus) and
   wins on source order — adding .signup-float-group (present on the same
   ancestor as .form-group) pushes this strictly higher regardless of order. */
.signup-card.signup-card--step1 .signup-address-stack .signup-float-group .signup-password-wrap .form-control {
    padding-right: 3rem !important;
}

/* Show/hide toggle only once the field actually has a value — nothing to
   reveal/hide before the user has typed a password. */
.signup-card--step1 .signup-password-toggle {
    display: none;
}

.signup-card--step1 .signup-password-wrap:has(input:not(:placeholder-shown)) .signup-password-toggle,
.signup-card--step1 .signup-password-wrap:focus-within .signup-password-toggle {
    display: inline-flex;
}

.signup-card--step1 .form-text,
.signup-card--step1 .signup-card__hint {
    font-size: 1.125rem;
    color: #5b6573;
}

/* the email-availability check toggles this class on #emailHelp via JS, but
   its color rule (assets/css/inbox.css) was never loaded on this page — give
   it a real definition here instead of leaving the error text unstyled. */
.signup-card--step1 .signup-step1-email-help.txt-red {
    color: #b4232d;
}

/* Empty by default (the JS only ever fills it via .text(), never relies on the
   markup having a placeholder) — no reserved height, so it takes no space until
   there's an actual message to show. */
.signup-card--step1 .signup-step1-email-help {
    display: block;
    font-weight: 600;
    margin-top: 0;
    min-height: 0;
}

.signup-card--step1 .signup-step1-email-help:not(:empty) {
    margin-top: 0.4rem;
}

/* Plain sentence + a normal inline link — matches the site's own .nav-login
   treatment (color/weight/no-underline), not a second button. */
/* Centers this line in the gap between the divider and the card's bottom edge:
   the card's own bottom padding (2.5rem) sets the floor for the space below,
   so margin-top is set to match it (beating the divider's own margin-bottom
   via collapse) and margin-bottom is zeroed so both sides land equal. */
.signup-card--step1 .signup-step1-login-link {
    text-align: center;
    margin: 2rem 0 0;
    font-size: 1rem;
    color: #5b6573;
}

.signup-card--step1 .signup-step1-login-link a {
    color: #b4232d;
    font-weight: 600;
    text-decoration: none;
}

.signup-card--step1 .signup-step1-login-link a:hover {
    color: #971c25;
    text-decoration: underline;
}

.signup-card--step1 .signup-step1-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1.75rem 0 1rem;
}

/* Now lives below the card (a sibling inside .signup-step1-shell), not inside
   it — scoped off the shell wrapper instead of .signup-card--step1. */
.signup-step1-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

/* Nudge the whole shell (card + legal links) up off dead-center on desktop —
   mobile already flattens to top-aligned via .signup-card-page's own
   max-width:575px override above, so this only needs to apply above that. */
@media (min-width: 576px) {
    .signup-step1-shell {
        transform: translateY(-2rem);
    }
}

/* Quiet utility-link sizing, matching the site's own small secondary links
   (e.g. nav-col-desc/.foot-legal territory) instead of body-copy size. */
.signup-step1-shell .signup-step1-legal {
    text-align: center;
    margin: 2rem 0 0;
    font-size: 0.875rem;
    color: #9099a3;
}

.signup-step1-shell .signup-step1-legal a {
    color: #9099a3;
    text-decoration: none;
}

.signup-step1-shell .signup-step1-legal a:hover {
    color: #b4232d;
    text-decoration: underline;
}

.signup-step1-shell .signup-step1-legal span {
    margin: 0 0.4rem;
}

/* Empty by default (only filled in on an actual validation failure — see the
   $passwordError check server-side and showPasswordError()/input listener in
   the page's JS) — no reserved height, matching #emailHelp's pattern.
   Tight above (hugs the password field it's describing) and with room below
   (clearly separate from the Continue button) — not the reverse. */
.signup-card--step1 #passwordHelp:not(:empty) {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Plain red text, no panel — the shared .signup-card__hint--error box style
   (background/border/padding/radius) is overkill for one line directly under
   the field it's about. Not bold either — this is a note, not a warning. */
.signup-card--step1 #passwordHelp.signup-card__hint--error {
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #b4232d;
    font-weight: 400;
    font-size: 0.875rem;
}

/* Matches .tier-cta on /pricing exactly (radius, weight, letter-spacing, shadow,
   hover lift) — that's the literal button that links to this page, so this
   button should look like its continuation, not a different component. */
.signup-card--step1 .signup-card__btn {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 1.125rem 1.125rem;
    border-radius: 9px;
    box-shadow: 0 12px 26px -12px rgba(180, 35, 45, 0.55);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.signup-card--step1 .signup-card__btn:hover,
.signup-card--step1 .signup-card__btn:focus {
    background: #971c25;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(151, 28, 37, 0.6);
}

.signup-card--step1 .signup-card__btn:active {
    transform: translateY(0);
}

/* signup2 renders at a 10px root (its legacy CSS assumes Bootstrap's old
   62.5% trick — see the html:has() rule near the top of this file), while
   signup1 renders at the real 16px browser default. The same rem values
   above would therefore compute 1.6x smaller here — fixed px instead,
   copied directly from signup1's actual computed output, so Activate
   Account is pixel-identical to Continue rather than just using the same
   CSS rule text. */
.signup-card.signup2-form-card .signup-card__btn:not(.signup-card__btn--sm) {
    gap: 8px;
    margin-top: 0.8px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.19px;
    padding: 18px;
    border-radius: 9px;
    box-shadow: 0 12px 26px -12px rgba(180, 35, 45, 0.55);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.signup-card.signup2-form-card .signup-card__btn:not(.signup-card__btn--sm):hover,
.signup-card.signup2-form-card .signup-card__btn:not(.signup-card__btn--sm):focus {
    background: #971c25;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(151, 28, 37, 0.6);
}

.signup-card.signup2-form-card .signup-card__btn:not(.signup-card__btn--sm):active {
    transform: translateY(0);
}

.signup-card--step1 .signup-card__help {
    font-size: 1rem;
}

.signup-card--checkout {
    max-width: 520px;
}

body.signup-funnel-page .wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

body.signup-funnel-page--step2 .wrapper,
body.signup-funnel-page--step2 .main {
    background: linear-gradient(160deg, #f3f7fc 0%, #ffffff 58%, #f6f9fd 100%);
}

body.signup-funnel-page--step2 .signup-card-page {
    min-height: 100vh;
    padding: 0;
    align-items: stretch;
}

.signup2-page {
    background: transparent;
    width: 100%;
}

.signup2-page-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Mobile-only "Details" chevron toggle that reveals the order-summary
   pricing block — hidden on desktop, where the summary is always visible
   further down the sidebar already. Pushed to the header's right edge via
   margin-left:auto regardless of where it sits in source order. */
/* Plain text + chevron, no pill/chip — matches the fax card's own
   "Select a different number" action styling (same font-size/weight) so
   it reads as the same kind of control instead of a separate small badge. */
.signup2-summary-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    cursor: pointer;
}

.signup2-summary-toggle:hover,
.signup2-summary-toggle:focus {
    color: #444;
    outline: none;
}

.signup2-summary-toggle span {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
}

.signup2-summary-toggle .signup-dd-chev {
    width: 1.7rem;
    height: 1.7rem;
    transition: transform 0.15s ease;
}

.signup2-summary-toggle.is-open .signup-dd-chev {
    transform: rotate(180deg);
}

.signup2-page-header .signup-card__logo,
.signup2-page__logo {
    display: block;
    margin: 0;
    max-width: 168px;
    width: auto;
    height: auto;
}

.signup2-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: -0.35rem;
    border-radius: 50%;
    color: #333;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.signup2-back:hover,
.signup2-back:focus {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
    text-decoration: none;
    outline: none;
}

.signup2-back .material-icons {
    font-size: 1.625rem;
}

.signup2-form-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
}

.signup-card.signup2-form-card {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-width: none;
}

/* All four field groups (number/porting, account, billing, campaign) now
   share ONE .signup2-section-panel instead of each having its own boxed
   section with a heading — .signup2-field-cluster marks each group so they
   still get breathing room between each other, spacing only (no
   border/heading), since the whole point was less visual breakup. */
.signup2-form-card .signup2-section-panel > .signup2-field-cluster + .signup2-field-cluster,
.signup2-form-card .signup2-section-panel > .alert-danger + .signup2-field-cluster {
    margin-top: 2rem;
}

.signup-address-stack__row > .col-sm-6 {
    flex: 1;
}

.signup-port-fields .signup-card__label.signup-port-field-label {
    display: block;
    margin-top: 0;
    margin-bottom: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.45;
}

/* Matches .signup2-section-panel__subhead's "Account Details" heading style
   exactly (font-size/weight/color) — pixel values, not rem/scale, same
   reasoning as #faxChooserTitle above (this sits in the 10px-root sidebar,
   the target lives in the differently-scaled form column). */
#portFieldsTitle {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.signup-port-input-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.signup-port-input-block > .form-group {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* Neutral state is borderless/transparent — it now sits inside a
   .signup-address-stack wrapper (same shared bento component every other
   field on the page uses) which supplies the neutral gray border instead.
   The colored is-ok/is-bad border below still renders on this inner
   element, appearing as a ring just inside the neutral outer border. */
.signup-port-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* No overflow:hidden on the wrap (a floating label needs to poke above its
   top edge) — the icon box gets its own matching left radius instead, so it
   still sits flush with the wrap's rounded corner without needing clipping. */
.signup-port-status {
    flex: 0 0 2.5rem;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-right: 1px solid #d8d8d8;
    border-radius: 7px 0 0 7px;
    background: #f3f4f6;
    color: #9ca3af;
    line-height: 0;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
}

.signup-port-status .material-icons {
    font-size: 1.125rem !important;
    line-height: 1.125rem !important;
    width: 1.125rem;
    height: 1.125rem;
    display: block;
    overflow: hidden;
}

.signup-card .signup-port-input-wrap .form-control,
.signup-card .signup-port-input-wrap .form-control:focus,
.signup-card .signup-port-input-wrap.is-focused .form-control,
.signup-card .form-group.signup-port-input-wrap .form-control,
.signup-card .form-group.signup-port-input-wrap .form-control:focus,
.signup-card .form-group.signup-port-input-wrap.is-focused .form-control {
    flex: 1 1 auto;
    align-self: center;
    min-width: 0;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 15px 14px !important;
    line-height: 1.4 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    background-color: #fff !important;
}

.signup-card .signup-port-input-wrap.is-neutral .signup-port-status,
.signup-card .signup-port-status.is-neutral {
    background: #f3f4f6;
    border-right-color: #d8d8d8;
    color: #9ca3af;
}

.signup-card .signup-port-input-wrap.is-ok {
    border-color: #2e7d32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18);
}

.signup-card .signup-port-input-wrap.is-ok .signup-port-status,
.signup-card .signup-port-status.is-ok {
    background: #2e7d32;
    border-right-color: #2e7d32;
    color: #fff;
}

.signup-card .signup-port-input-wrap.is-bad {
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.18);
    overflow: visible;
    position: relative;
    z-index: 3;
}

.signup-card .signup-port-input-wrap.is-bad .signup-port-status,
.signup-card .signup-port-status.is-bad {
    background: #c62828;
    border-right-color: #c62828;
    color: #fff;
    position: relative;
    overflow: visible;
    cursor: default;
}

.signup-card .signup-port-input-wrap.is-neutral:focus-within {
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.signup2-grid {
    display: block;
}

.signup2-layout {
    display: block;
}

.signup2-layout__plan {
    margin-bottom: 0;
}

.signup2-layout__sidebar {
    position: relative;
    background: linear-gradient(160deg, #f3f7fc 0%, #ffffff 58%, #f6f9fd 100%);
    box-sizing: border-box;
}

/* Same atmospheric page background as the homepage/signup1 (gradient + two
   soft blue blobs), self-contained inside the sidebar's own box instead of
   fixed to the viewport — the form column next to it stays plain white. */
.signup2-sidebar-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.signup2-sidebar-bg::before {
    content: "";
    position: absolute;
    inset: -18%;
    background: radial-gradient(circle at 80% 12%, rgba(0, 119, 255, .05), transparent 55%);
}

.signup2-sidebar-bg .blob {
    position: absolute;
    border-radius: 50%;
}

.signup2-sidebar-bg .pb-blue-1 {
    width: 54rem;
    height: 40rem;
    top: -12rem;
    right: -10rem;
    background: radial-gradient(closest-side, rgba(0, 119, 255, .045), transparent 72%);
}

.signup2-sidebar-bg .pb-blue-2 {
    width: 40rem;
    height: 32rem;
    bottom: -10rem;
    left: -12rem;
    background: radial-gradient(closest-side, rgba(0, 119, 255, .035), transparent 72%);
}

.signup2-layout__sidebar > *:not(.signup2-sidebar-bg) {
    position: relative;
    z-index: 1;
}

.signup2-layout__sidebar .signup2-layout__plan .signup-section {
    margin-bottom: 0;
}

.signup2-layout__sidebar .signup2-page-header {
    background: transparent;
    margin-bottom: 2rem;
}

.signup2-layout__sidebar .signup2-layout__plan {
    background: transparent;
}

.signup2-layout__sidebar .signup2-layout__plan {
    background: transparent;
}

/* Signup2 sidebar — subscribe summary (mock layout) */
.signup2-sidebar-title {
    margin: 1rem 0 2rem;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #555;
    line-height: 1.35;
}

.signup2-layout__sidebar .signup2-plan-panel {
    margin-bottom: 0;
}

/* Trust note beneath the order summary — Stripe-checkout convention, and
   gives the sidebar's remaining vertical space a purposeful finishing
   touch instead of just trailing off into empty background. */
.signup2-secure-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 425px;
    margin: 1rem 0 0;
    padding-left: 65px;
    padding-right: 13px;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 500;
    color: #8a94a6;
}

/* Below the Activate Account button in the form column, not the sidebar —
   drop the sidebar's own width/padding tuning and center under the button.
   Font-size is a fixed px (not the base rule's 0.875rem) so it renders the
   same as the sidebar's *Subject to applicable taxes and fees footnote
   despite the form column's different ambient font-size context. */
.signup2-secure-note--form {
    justify-content: center;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-top: 1.75rem;
    font-size: 12px;
}

.signup2-secure-note .material-icons {
    font-size: 1.125rem;
    color: #8a94a6;
}

/* Fax number card — its own distinct, raised card (same treatment as
   .signup2-plan-card) so it reads as a separate interactive setting from
   the plan card below it, not one merged block. Also carries the plain
   .signup-card class (see markup) purely so the moved port-section's
   floating-label CSS — all scoped ".signup-card .signup-float-group ..." —
   still matches; this override neutralizes .signup-card's own default
   background/radius/shadow/max-width/padding in favor of ours. */
.signup-card.signup2-sidebar-fax-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 6px rgba(15, 40, 90, 0.08), 0 10px 24px rgba(15, 40, 90, 0.1);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    padding: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    /* Matches the account-details/card-information bento box width — those
       boxes were widened to fill .signup2-form-card's full 425px (removing
       .signup2-section-panel's own side padding) specifically so they'd
       line up with this card instead of the other way around. */
    max-width: 425px;
    box-sizing: border-box;
    position: relative;
    /* Contains this card's own internal z-index values (the Area Code/Toll
       Free toggle's thumb:1 / options:2 — see .signup-toggle-thumb /
       .signup-toggle-option) so they don't leak past this card's
       position:relative ancestors (all z-index:auto, so no context of their
       own) all the way up into .signup2-layout__plan's shared stacking
       context, where they'd otherwise out-rank .signup2-plan-card's own
       z-index:1 and paint the toggle pill over the plan dropdown menu when
       both the chooser/port panel and "Change plan" are open at once.
       isolation:isolate forces a real stacking context here without
       changing this card's own paint-order slot in the parent context (kept
       equivalent to z-index:auto/0, same as before — still dims correctly
       under the mobile order-summary backdrop). */
    isolation: isolate;
}

/* Replaces the chooser panel's old "Cancel" text button — a single X in the
   card's corner instead, matching common "close this panel" conventions.
   Hidden by default; the :has() below reveals it only while the number
   chooser panel is the thing showing, so it never appears over the default
   assigned-number view or the port-existing-number panel. */
.signup-fax-chooser-close {
    display: none;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a94a6;
    cursor: pointer;
    z-index: 3;
}

.signup-fax-chooser-close svg {
    width: 1.75rem;
    height: 1.75rem;
}

.signup-fax-chooser-close:hover,
.signup-fax-chooser-close:focus {
    background: #f2f3f5;
    color: #222;
    outline: none;
}

/* Each close button is scoped to its own panel's id (not the shared class)
   — with two of these buttons now sharing .signup-fax-chooser-close, a
   class-wide :has() selector would show both at once whenever either
   panel was open. */
.signup-card.signup2-sidebar-fax-card:has(#faxChooserPanel:not(.signup-phase-hidden)) #btnCloseFaxChooser {
    display: flex;
}

.signup-card.signup2-sidebar-fax-card:has(#portFields:not(.signup-phase-hidden)) #btnClosePortPanel {
    display: flex;
}

.signup-fax-chooser-close:disabled {
    opacity: 0.5;
    cursor: default;
}

.signup2-plan-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 6px rgba(15, 40, 90, 0.08), 0 10px 24px rgba(15, 40, 90, 0.1);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    overflow: visible;
    position: relative;
    /* Matches the fax card's own hardcoded width:100%/max-width:425px below
       768px, where .signup2-layout__plan has no width cap of its own — else
       this card stretches to the full sidebar width while the fax card
       stays pinned at 425px, leaving their right edges misaligned. (Both
       get max-width:none again below 767px — see that media query — where
       the layout stacks and should fill the full mobile gutter instead.) */
    width: 100%;
    max-width: 425px;
    box-sizing: border-box;
    /* The hover lift below applies a transform, which creates a NEW stacking
       context for this card — without an explicit z-index here, that new
       context's own auto stacking position loses to the fax card sibling
       (later in the DOM) regardless of the plan dropdown's own z-index:30,
       trapping the open "Change plan" menu behind the fax card. */
    z-index: 1;
}

/* Raised, hoverable shadows tell the user these boxes are interactive
   (Change plan / Select a different number / Port existing number all
   live inside them), not just static summary panels. */
.signup2-plan-card:hover,
.signup-card.signup2-sidebar-fax-card:hover {
    box-shadow: 0 4px 10px rgba(15, 40, 90, 0.12), 0 14px 32px rgba(15, 40, 90, 0.14);
    transform: translateY(-2px);
}

.signup2-plan-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 12px 12px 0 0;
    background: #fff;
    position: relative;
}

.signup2-plan-card__name-block {
    min-width: 0;
}

.signup2-plan-card__name {
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

/* Real catalog copy (already authored for the plan-advisor cards, unused
   here until now) — gives the plan card a second line of context instead
   of just a bare name, and fills out the card's visual weight to better
   match the fax number card above it. */
.signup2-plan-card__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.9375rem;
    font-weight: 400;
    color: #777;
    line-height: 1.3;
}

.signup2-plan-card__price-block {
    text-align: right;
    flex-shrink: 0;
}

.signup2-plan-card__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

.signup2-plan-card__currency {
    font-size: 1em;
}

.signup2-plan-card__billing {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    font-style: italic;
    font-weight: 400;
    color: #777;
    line-height: 1.2;
}

.signup2-plan-card__divider {
    height: 1px;
    background: #e8e8e8;
    margin: 0;
}

.signup2-plan-card__selector {
    margin-top: 0;
}

.signup2-plan-card__selector.signup-dd {
    position: relative;
    z-index: 2;
}

.signup2-plan-card__selector.signup-dd.is-open {
    z-index: 30;
}

.signup2-plan-card__toggle.signup-dd-toggle {
    border: 0;
    border-radius: 0 0 12px 12px;
    background: #fff;
    padding: 0.85rem 1.25rem 1.15rem;
}

/* Visible hover/focus feedback (the row was plain white on white before,
   giving no sense it was a clickable selector rather than static plan
   detail text). */
.signup2-plan-card__toggle.signup-dd-toggle:hover,
.signup2-plan-card__toggle.signup-dd-toggle:focus {
    border-color: transparent;
    background: #f7f7f7;
    outline: none;
}

/* Plain text, no pill/border/underline — quiet secondary action, not
   competing with the page's red CTAs. The row's own hover highlight
   (.signup2-plan-card__toggle.signup-dd-toggle:hover, above) is the only
   feedback that this text is part of a clickable row. */
.signup2-plan-card__toggle-action {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.signup2-plan-card__toggle-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #666;
}

.signup2-plan-card .signup-dd-spec {
    gap: 1.25rem;
}

.signup2-plan-card .signup-tier-spec-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
}

.signup2-plan-card .signup-tier-spec-label {
    margin-top: 0.15rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #777;
}

.signup2-plan-card .signup-tier-spec-div {
    background: #e0e0e0;
    margin: 0.2rem 0;
}

.signup2-plan-card .signup-dd-chev {
    width: 1rem;
    height: 1rem;
    color: #666;
}

.signup2-plan-card .signup-dd-menu {
    left: 1rem;
    right: 1rem;
    z-index: 40;
}

.signup2-order-summary {
    margin-top: 4.5rem;
    padding-left: 65px;
    padding-right: 13px;
    box-sizing: border-box;
}

.signup2-order-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.signup2-order-summary__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #333;
}

.signup2-order-summary__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111;
    text-align: right;
}

.signup2-order-summary__value--muted {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #888;
}

.signup2-order-summary__divider {
    height: 1px;
    background: #aaa;
    margin: 0.85rem 0;
    border: 0;
}

.signup2-order-summary__asterisk {
    font-size: 0.875rem;
    margin-left: 0.15rem;
    color: #888;
    vertical-align: super;
}

/* Taking the asterisk out of flow keeps the total's own "$XX.XX" text the
   same width as the other rows' values (which have no trailing asterisk),
   so their left edges line up under right-aligned flex layout — the
   asterisk hangs past that shared right edge instead of widening the total
   row and shifting its number left. */
.signup2-order-summary__row--total .signup2-order-summary__value {
    position: relative;
}

.signup2-order-summary__row--total .signup2-order-summary__asterisk {
    position: absolute;
    left: 100%;
    top: 0.1em;
    margin-left: 0;
}

/* Now nested inside .signup2-order-summary (a sibling of the summary rows,
   not a standalone element outside it) — its own left/right padding was
   removed since it would otherwise stack on top of the parent's identical
   65px/13px inset, double-indenting the text. */
.signup2-order-summary__footnote {
    width: 100%;
    max-width: 425px;
    margin: 0.5rem 0 0;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 500;
    color: #8a94a6;
    line-height: 1.3;
}

.signup2-order-summary__row--total .signup2-order-summary__label,
.signup2-order-summary__row--total .signup2-order-summary__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
}

.signup-cc-group {
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0;
    width: fit-content;
    max-width: 100%;
    line-height: 0;
}

.signup-card .signup-address-stack .signup-cc-group--in-stack {
    border: 0;
    border-radius: 0;
    border-top: 1px solid #d8d8d8;
    width: 100%;
    max-width: 100%;
}

.signup-card .signup-address-stack .signup-cc-group--in-stack .signup-cc-group__row {
    width: 100%;
}

.signup-cc-group__row {
    display: flex;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    height: 3.9375rem;
    margin: 0;
    line-height: 0;
}

.signup-cc-group__cell {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 3.9375rem;
    margin: 0;
    padding: 0;
    line-height: 0;
    border-left: 1px solid #d8d8d8;
}

.signup-cc-group__cell:first-child {
    border-left: 0;
}

.signup-cc-group__cell--number {
    flex: 0 0 auto;
    position: relative;
}

.signup-cc-group__cell--exp {
    flex: 0 0 9.75rem;
}

.signup-cc-group__cell--cvc {
    flex: 0 0 5.75rem;
}

.signup-cc-group__cell--number .form-control {
    width: 21rem;
    max-width: 100%;
}

.signup-cc-group__logos {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    font-size: 0;
    pointer-events: none;
}

.signup-cc-group__logos li {
    width: 34px;
    height: 20px;
    transform: none;
    margin: 0;
    background-size: 238px 20px;
}

.signup-cc-group__logos .card_mastercard {
    background-position: -37px 0;
}

.signup-cc-group__logos .card_amex {
    background-position: -74px 0;
}

.signup-cc-group__logos .card_discover {
    background-position: -111px 0;
}

@media (max-width: 575px) {
    .signup-cc-group,
    .signup-cc-group__row {
        width: 100%;
    }

    .signup-cc-group__cell--number .form-control {
        width: 100%;
        min-width: 0;
    }

    .signup-cc-group__cell--number {
        flex: 1 1 0;
        min-width: 0;
    }

    .signup-cc-group__cell--exp {
        flex: 0 0 8.75rem;
    }

    .signup-cc-group__cell--cvc {
        flex: 0 0 4.75rem;
    }

    .signup-cc-group__logos {
        display: none;
    }

    .signup-card .signup-cc-group__cell--number .form-control {
        padding-right: 1rem !important;
    }
}

@media (min-width: 768px) {
    body.signup-funnel-page--step2 .wrapper,
    body.signup-funnel-page--step2 .main {
        background: #fff;
    }

    .signup-shell.signup2-shell {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .signup2-grid {
        /* One fluid gutter reused for BOTH the outer edge-to-viewport inset
           and the inner edge-to-center-divider inset, so they always read
           as the same size and grow/shrink together with the viewport —
           derived directly from the actual layout math instead of a guessed
           vw curve. Each column is exactly half the viewport (equal 1fr
           columns, no grid gap) and holds content capped at max-width:425px
           plus a gutter on each side, so:
             columnWidth (100vw / 2) = 425px + gutter + gutter
             gutter = (100vw / 4) - 212.5px  →  25vw - 212.5px
           This is 0 (or negative) until the column is wide enough to fit
           425px of content plus two 2.5rem gutters. 2.5rem is 25px, not
           40px, on this page specifically — the html:has(body...) rule
           near the top of this file forces a 10px root here — so that
           crossover lands at ~950px viewport, not the 1010px a 16px-root
           assumption would predict. Below that width the clamp()'s floor
           holds the old fixed 2.5rem value; above it, the gutter grows
           linearly until it hits the 10rem ceiling (~2330px viewport),
           past which extra width just becomes outer margin instead of an
           ever-widening gutter. */
        --signup2-gutter: clamp(2.5rem, calc(25vw - 212.5px), 10rem);
        --signup2-split-inset: var(--signup2-gutter);
        --signup2-column-top: 5rem;
        display: grid;
        /* Equal fr shares so the sidebar column has as much room to work
           with as the form column at any given viewport width — the old
           0.95fr/1.15fr split kept the sidebar column narrower, so its
           cards hit their max-width cap later and rendered visibly
           thinner than the form column's content at in-between viewport
           widths. */
        grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(100vh, auto);
        gap: 0;
        align-items: start;
        /* Hard-stop background split must track the column ratio above
           (50/50 now) so the blue/white color boundary lines up exactly
           with the grid column boundary. A single hard-stop gradient, not
           two layered ones — stacking a diagonal gradient under a
           transparent/white mask produced a visible banding seam near the
           split edge in testing. */
        background: linear-gradient(90deg, #f3f7fc 0%, #f3f7fc 50%, #ffffff 50%, #ffffff 100%);
    }

    .signup2-layout__sidebar {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        align-self: start;
        position: sticky;
        top: 0;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        padding: var(--signup2-column-top, 5rem) var(--signup2-split-inset) 3rem var(--signup2-gutter);
        box-sizing: border-box;
        overflow: hidden;
    }

    .signup2-layout__sidebar .signup2-page-header {
        margin-bottom: 2rem;
        padding: 0;
        width: 100%;
        max-width: 425px;
    }

    .signup2-layout__sidebar .signup2-sidebar-title {
        width: 100%;
        max-width: 425px;
    }

    .signup2-layout__sidebar .signup2-layout__plan {
        padding: 0;
        width: 100%;
        max-width: 425px;
    }

    .signup2-layout__form {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        width: 100%;
        max-width: none;
        padding: var(--signup2-column-top, 5rem) var(--signup2-gutter) 3rem var(--signup2-split-inset);
        box-sizing: border-box;
        min-height: 100vh;
        z-index: 1;
        /* Tuned for the old stark grey/white split — a dark 0.32-alpha
           shadow read as a stray line against the softer blue tint. Same
           soft blue-tinted shadow language as the rest of this file
           (.signup-card--step1's box-shadow, etc). */
        box-shadow: -8px 0 24px rgba(15, 40, 90, 0.08);
    }

    .signup2-layout__form .signup-card.signup2-form-card {
        max-width: 425px;
    }

    .signup2-layout__plan .signup-section {
        margin-bottom: 0;
    }

    .signup2-actions {
        text-align: left !important;
    }
}

.signup-card__logo {
    display: block;
    max-width: 168px;
    width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
}

.signup-card__title {
    text-align: center;
    font-size: 1.375rem;
    font-weight: 400;
    color: #222;
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

.signup-card__label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 0;
}

.signup-card__hint {
    display: block;
    margin-top: 0.05rem;
    font-size: 1rem;
    color: #666;
    line-height: 1.45;
}

.signup-card__hint--error {
    color: #b4232d;
    font-weight: 600;
    background: #fdf8f8;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(180, 35, 45, 0.25);
    margin-top: 0.05rem;
}

.signup-card .form-text {
    font-size: 1rem;
    line-height: 1.45;
}

.signup-card .form-group {
    margin-bottom: 0.125rem;
}

/* No overflow:hidden — a floating label needs to poke above its own field's
   top border, which clipping would otherwise cut off. The stack's rounded
   outer corners are recreated directly on whichever field is actually
   first/last instead of relying on clipping to fake it (see the
   first-child/last-child overrides further down). */
.signup-address-stack {
    margin-bottom: 0.125rem;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
}

/* Corner rounding keyed off actual DOM position, not one-off assumptions
   per stack: each bento box (Card Info, Billing Address, Account Details)
   shapes its first/last field differently — sometimes a lone field,
   sometimes a two-up row — and fields like Cardholder Name, Phone Number,
   and Company were appended after an existing row, so the row is no longer
   reliably the last element. Rows nested inside .signup-address-stack__details
   (the collapsible Apt/City/State/Zip block) never count as the stack's
   true top/bottom edge, because Address1 and Phone Number sit outside that
   wrapper as permanent first/last siblings. */
.signup-card .signup-address-stack > .form-group:first-child .form-control {
    border-radius: 7px 7px 0 0 !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:first-child > [class*="col-"]:first-child .form-control {
    border-radius: 7px 0 0 0 !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:first-child > [class*="col-"]:last-child .form-control {
    border-radius: 0 7px 0 0 !important;
}

.signup-card .signup-address-stack > .form-group:last-of-type:not(:first-child) .form-control {
    border-radius: 0 0 7px 7px !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:last-child > [class*="col-"]:first-child .form-control {
    border-radius: 0 0 0 7px !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:last-child > [class*="col-"]:last-child .form-control {
    border-radius: 0 0 7px 0 !important;
}

/* Sole-field stack: first and last child are the same lone form-group. */
.signup-card .signup-address-stack > .form-group:first-child:last-of-type .form-control {
    border-radius: 7px !important;
}

/* A later same-specificity rule resets border-radius on :focus (needed so
   interior/divider fields never round), which ties with the corner rules
   above and wins on source order — repeat them with :focus so the stack's
   actual edge fields (e.g. Street Address, Card Number) stay rounded while
   focused instead of squaring off. */
.signup-card .signup-address-stack > .form-group:first-child .form-control:focus {
    border-radius: 7px 7px 0 0 !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:first-child > [class*="col-"]:first-child .form-control:focus {
    border-radius: 7px 0 0 0 !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:first-child > [class*="col-"]:last-child .form-control:focus {
    border-radius: 0 7px 0 0 !important;
}

.signup-card .signup-address-stack > .form-group:last-of-type:not(:first-child) .form-control:focus {
    border-radius: 0 0 7px 7px !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:last-child > [class*="col-"]:first-child .form-control:focus {
    border-radius: 0 0 0 7px !important;
}

.signup-card .signup-address-stack > .row.signup-address-stack__row:last-child > [class*="col-"]:last-child .form-control:focus {
    border-radius: 0 0 7px 0 !important;
}

.signup-card .signup-address-stack > .form-group:first-child:last-of-type .form-control:focus {
    border-radius: 7px !important;
}

/* The port-number field's sole-field stack matches the generic rule above,
   which rounds all four corners — wrong here since the leading portability
   icon chip occupies the left edge. Square off the left so the focus ring
   sits flush against the icon instead of leaving a rounded gap. Selector
   adds .signup-port-input-wrap to outrank the generic rule's specificity. */
.signup-card .signup-address-stack > .signup-port-input-wrap.form-group:first-child:last-of-type .form-control,
.signup-card .signup-address-stack > .signup-port-input-wrap.form-group:first-child:last-of-type .form-control:focus {
    border-radius: 0 7px 7px 0 !important;
}

/* The City/State/Zip row is always followed by Phone Number outside
   .signup-address-stack__details, so it's a mid-box divider, never a
   rounded edge. */
.signup-card .signup-address-stack .signup-address-stack__details .signup-address-stack__row .form-group .form-control {
    border-bottom: 1px solid #d8d8d8 !important;
}

/* Phone Number moved out of Billing Address into Account Details, so the
   City/State/Zip row is now genuinely the last/bottom field in this stack
   instead of a mid-box divider — drop the divider border and round its
   corners to match the box's bottom edge. ID selector outranks the
   class-only rules above regardless of source order. */
#billingAddressStack .signup-address-stack__details .signup-address-stack__row .form-group .form-control {
    border-bottom: 0 !important;
}

#billingAddressStack .signup-address-stack__details > .signup-address-stack__row:last-child > [class*="col-"]:first-child .form-control,
#billingAddressStack .signup-address-stack__details > .signup-address-stack__row:last-child > [class*="col-"]:first-child .form-control:focus {
    border-radius: 0 0 0 7px !important;
}

#billingAddressStack .signup-address-stack__details > .signup-address-stack__row:last-child > [class*="col-"]:last-child .form-control,
#billingAddressStack .signup-address-stack__details > .signup-address-stack__row:last-child > [class*="col-"]:last-child .form-control:focus {
    border-radius: 0 0 7px 0 !important;
}

#billingAddressStack > .form-group .form-control {
    border-bottom: 1px solid #d8d8d8 !important;
}

.signup-card .signup-address-stack .signup-address-stack__details > .form-group .form-control {
    border-bottom: 1px solid #d8d8d8 !important;
}

.signup-card .signup-address-stack .form-group {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    line-height: 0;
}

/* .signup-address-stack has no signup1 equivalent (signup1 has no grouped
   multi-field boxes) — it's effectively signup2-only, so no step1/step2
   branching is needed here. Sizing is fixed px rather than the 1.6x-smaller
   rem this would compute to under signup2's 10px root (see the html:has()
   rule near the top of this file), so these grouped fields render the same
   size as signup1's plain fields. */
.signup-card .signup-address-stack .form-group .form-control {
    display: block;
    width: 100%;
    height: auto;
    min-height: 56px;
    max-height: none;
    padding: 15px 14px;
    margin: 0 !important;
    line-height: 1.4;
    font-size: 16px;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #fff !important;
    background-image: none !important;
    float: none;
    -webkit-appearance: none;
    appearance: none;
    color: #222;
    color-scheme: light;
}

.signup-card .signup-address-stack > .form-group .form-control {
    border-bottom: 1px solid #d8d8d8 !important;
}

.signup-card .signup-address-stack > .form-group:last-of-type .form-control {
    border-bottom: 0 !important;
}

.signup-address-stack__row {
    margin: 0 !important;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.signup-address-stack__row > [class*="col-"] {
    padding: 0 !important;
    float: none;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.signup-address-stack__row > .col-sm-5 {
    flex: 6;
}

.signup-address-stack__row > .col-sm-4 {
    flex: 3;
}

.signup-address-stack__row > .col-sm-3 {
    flex: 3;
}

.signup-card .signup-address-stack__row .form-group {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
}

.signup-card .signup-address-stack__row .form-group .form-control {
    flex: 1 1 auto;
    border-left: 1px solid #d8d8d8 !important;
}

.signup-card .signup-address-stack > .signup-address-stack__row:not(:last-child) .form-group .form-control {
    border-bottom: 1px solid #d8d8d8 !important;
}

.signup-cc-number-wrap {
    position: relative;
}

/* Compound .form-group.signup-cc-number-wrap (both classes live on the same
   element): the general .signup-address-stack .form-group .form-control
   padding rule further down is the same specificity and would otherwise win
   on source order, clobbering this padding-right back down and hiding the
   card-brand icons under the typed digits. */
/* Icon reserve is deliberately more compact than a literal 1.6x scale-up
   would give — the field's own width didn't grow, only its font/padding did
   to match signup1, so the icon strip has to stay small enough to leave the
   (now much wider, 19px-font) card number room to actually display without
   clipping. */
.signup-card .signup-address-stack .form-group.signup-cc-number-wrap .form-control {
    padding-right: 130px !important;
}

.signup-cc-cards-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: auto;
    pointer-events: none;
    z-index: 2;
}

.signup-cc-cvv-wrap {
    position: relative;
}

.signup-card .signup-address-stack .form-group.signup-cc-cvv-wrap .form-control {
    padding-right: 56px !important;
}

.signup-cc-cvv-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    width: auto;
    pointer-events: none;
    z-index: 2;
}

.signup-card .signup-address-stack__row > [class*="col-"]:first-child .form-group .form-control {
    border-left: 0 !important;
}

.signup-card .signup-address-stack .form-group select.form-control {
    padding-right: 22px;
}

.signup-card .signup-address-stack .form-group .form-control:focus {
    position: relative;
    z-index: 1;
    line-height: 1.4;
    box-shadow: inset 0 0 0 2px #222222 !important;
    background-color: #fff !important;
    background-image: none !important;
    border-color: transparent !important;
}

.signup-card .form-group .form-control {
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    padding: 0.9rem 1rem;
    height: auto;
    font-size: 1.1875rem;
    line-height: 1.4;
    color: #222;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: initial;
    background-size: initial;
    caret-color: #222;
    color-scheme: light;
}

.signup-card .form-group .form-control:focus,
.signup-card .form-group.is-focused .form-control {
    border-color: #222222;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
    color: #222;
    outline: none;
}

.signup-card .signup-address-stack .form-group .form-control,
.signup-card .signup-address-stack .form-group .form-control:focus,
.signup-card .signup-address-stack .form-group.is-focused .form-control {
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    padding: 15px 14px !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

.signup-card .signup-address-stack .form-group .form-control:focus,
.signup-card .signup-address-stack .form-group.is-focused .form-control {
    box-shadow: inset 0 0 0 2px #222222 !important;
    position: relative;
    z-index: 1;
}

.signup-card .signup-address-stack .form-group select.form-control {
    padding-right: 30px !important;
    cursor: pointer;
    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 fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

.signup-card .signup-address-stack .form-group select.form-control:focus,
.signup-card .signup-address-stack .form-group.is-focused select.form-control {
    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 fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

.signup-card .signup-cc-group .form-control,
.signup-card .signup-cc-group .form-control:focus {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 3.9375rem !important;
    min-height: 3.9375rem !important;
    max-height: 3.9375rem !important;
    padding: 1.125rem 1.375rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #fff !important;
    background-image: none !important;
    float: none;
    vertical-align: top;
    -webkit-appearance: none;
    appearance: none;
    color: #222;
    color-scheme: light;
}

.signup-card .signup-cc-group__cell--number .form-control {
    width: 21rem;
    max-width: 100%;
    padding-right: 7rem !important;
}

.signup-card .signup-cc-group .form-control:focus {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 2px rgba(180, 35, 45, 0.35) !important;
    background-color: #fff !important;
    background-image: none !important;
    border-color: transparent !important;
    outline: none;
}

.signup-card .form-group .form-control:-webkit-autofill,
.signup-card .form-group .form-control:-webkit-autofill:hover,
.signup-card .form-group .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #222;
    caret-color: #222;
}

.signup-card .form-group .form-control::placeholder {
    color: #888;
    opacity: 1;
}

body.signup-funnel-page--step2 .signup-card .form-group input.form-control,
body.signup-funnel-page--step2 .signup-card .signup-address-stack .form-group input.form-control {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

body.signup-funnel-page--step2 .signup-card .signup-address-stack .form-group {
    line-height: normal;
}

.signup-address-suggestions {
    position: fixed;
    z-index: 10050;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    box-sizing: border-box;
}

.signup-address-suggestions__item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.35;
}

.signup-address-suggestions__item:last-child {
    border-bottom: 0;
}

.signup-address-suggestions__item:hover,
.signup-address-suggestions__item:focus {
    background: #f5f5f5;
    outline: none;
}

.signup-address-suggestions__line {
    display: block;
    color: #222;
    font-weight: 600;
}

.signup-address-suggestions__locality {
    display: block;
    margin-top: 0.15rem;
    color: #666;
    font-size: 0.9375rem;
    font-weight: 400;
}

.signup-card .form-group .form-control[readonly] {
    background-color: #ececec;
    border-color: #ccc;
    color: #666;
    cursor: default;
}

.signup-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: 8px;
    padding: 0.9rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 0.05rem;
    border: 0;
    background: #b4232d;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.signup-card__btn:hover,
.signup-card__btn:focus {
    background: #9a1e26;
    color: #fff;
}

/* Small primary — Reserve/Proceed actions, address-suggestion modal
   Cancel/Confirm. Still visually distinct from the full-size Activate
   Account button, but closer to it in weight than the original small
   size read. */
.signup-card__btn--sm {
    display: inline-flex;
    width: auto;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 8px;
    margin-top: 0;
}

/* signup2's forced 10px root (see html:has() rule at the top of this file)
   shrinks the shared 1rem above to 10px — this button is also used on
   signup1 (real 16px root, already fine there), so the fix is scoped to
   step2 only rather than raising the shared base rule. */
body.signup-funnel-page--step2 .signup-card__btn--sm {
    font-size: 1.5rem;
}

/* Plain unstyled <label>/<div>/<span> markup (see signup2.php) inheriting
   the page's 10px root directly — setting the modal's own font-size gives
   every child at least a 12px floor without needing a rule per element. */
body.signup-funnel-page--step2 #addressSuggestionModal {
    font-size: 12px;
}

.signup-card__btn:disabled {
    background: #c9ced6;
    color: #fff;
    cursor: default;
}

.signup-card__btn--secondary:disabled {
    background: #fff;
    color: #9099a3;
    border-color: #dde1e7;
    cursor: default;
}

.signup-card__help {
    margin-top: 2rem;
    padding-top: 1.25rem;
    text-align: center;
    font-size: 0.9375rem;
    color: #555;
    line-height: 1.5;
}

.error-tooltip {
    position: fixed;
    background: #d32f2f;
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    font-weight: bold;
    font-size: 14px;
    max-width: 350px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.error-tooltip.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.signup-card__help a {
    color: #b4232d;
    font-weight: 500;
    text-decoration: none;
}

.signup-card__help a:hover {
    text-decoration: underline;
}

.signup-card .form-group .signup-password-wrap .form-control {
    padding-right: 3rem;
}

.signup-shell {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
}

.signup-shell.signup2-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.signup2-page-header {
    padding: 1.5rem 1.25rem 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    /* No overflow:hidden here (unlike the pre-media-query base rule) — the
       decorative background blobs already clip themselves via
       .signup2-sidebar-bg's own overflow:hidden, so this outer one was
       redundant for them, but it silently clipped the "Change plan"
       dropdown too whenever it was taller than the sidebar's own natural
       content height (e.g. the shorter "assigned number, no port" state),
       cutting the menu off mid-list with the form column's white
       background showing through right where it got clipped. */
    .signup2-layout__sidebar {
        background: linear-gradient(160deg, #f3f7fc 0%, #ffffff 58%, #f6f9fd 100%);
        padding: 0 1.25rem 1.5rem;
        box-sizing: border-box;
    }

    .signup2-layout__sidebar .signup2-page-header {
        position: relative;
        padding: 2rem 0 0;
    }

    /* Two classes (rather than relying on tie-break source order against
       the unconditional .signup-card__logo max-width:168px rule elsewhere
       in this file) — guarantees this wins regardless of file position. */
    .signup2-page-header .signup2-page__logo {
        max-width: 96px;
    }

    /* Matches the Details chevron's own icon size (1.1rem). Same selector
       (2 classes) as the unconditional (all-viewport) scaled rule further
       down this file that this needs to outrank — adding body's step2
       class makes this strictly more specific (3 classes) instead of
       relying on a same-specificity tie-break by file position. */
    body.signup-funnel-page--step2 .signup2-layout__sidebar .signup2-back .material-icons {
        font-size: 1.7rem;
    }

    /* Sized to match the larger icon proportionally, instead of leaving
       the icon cramped inside an unchanged-size circle. */
    .signup2-layout__sidebar .signup2-back {
        width: 2.5rem;
        height: 2.5rem;
    }

    .signup2-layout__form {
        background: #fff;
        padding: 1.5rem 1.25rem 2rem;
        box-sizing: border-box;
        /* Same soft blue-tinted shadow language as the desktop column
           divider (.signup2-layout__form's -8px 0 24px side shadow further
           down this file), rotated to a top edge instead of a side edge —
           on mobile the two sections stack vertically rather than side by
           side, so the seam that needs a visual boundary is horizontal. */
        position: relative;
        box-shadow: 0 -8px 24px rgba(15, 40, 90, 0.08);
    }
}

.signup-section {
    margin-bottom: 0.375rem;
}

.signup-section h3,
.signup-section h4 {
    margin-top: 0;
    margin-bottom: 0.15rem;
}

.signup-section > p {
    margin: 0 0 0.15rem;
}

.signup-plan-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.15rem;
}

.signup-plan-section-head h3 {
    margin-bottom: 0;
}

.signup2-form-card .signup-card__help {
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.signup-phase-hidden {
    display: none !important;
}

.signup-password-wrap {
    position: relative;
}

.signup-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    /* The bento address-stack's .form-control:focus rule sets its own
       position:relative + z-index:1 (for the inset focus ring) — without
       this, focusing the field lifts the input above this button in
       stacking order and hides it right when it's most needed. */
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #666;
    padding: 0;
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 1;
}

.signup-password-toggle .fa {
    font-size: 1.125rem;
    line-height: 1;
}

/* Plan tier card (from pricing.html, simplified) */
.signup-tier {
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.75rem;
    background: #fff;
    box-shadow: 0 14px 34px -28px rgba(34, 34, 34, 0.35);
    font-size: 1.0625rem;
}

.signup-tier--featured {
    border-color: #b4232d;
}

.signup-tier-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.signup-tier-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #222;
}

.signup-tier-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #b4232d;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.signup-tier-for {
    color: #666;
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.signup-tier-price {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: #222;
}

.signup-tier-price .cur {
    font-size: 0.42em;
    vertical-align: super;
}

.signup-tier-price .per {
    font-size: 0.35em;
    font-weight: 500;
    color: #666;
}

.signup-tier-note {
    font-size: 0.9375rem;
    color: #666;
    margin: 0.5rem 0 0;
}

.signup-dd {
    position: relative;
    margin-top: 1rem;
}

.signup-dd-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 1px solid #ccc;
    border-radius: 9px;
    cursor: pointer;
    background: #f8f9fa;
    font: inherit;
    text-align: left;
}

.signup-dd-toggle:hover {
    border-color: #b4232d;
}

.signup-dd-spec {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.signup-tier-spec-item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.signup-tier-spec-num {
    font-size: 1.1875rem;
    font-weight: 800;
    color: #222;
}

.signup-tier-spec-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #666;
}

.signup-tier-spec-div {
    width: 1px;
    align-self: stretch;
    background: #ccc;
    margin: 0.15rem 0;
}

.signup-dd-chev {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    color: #666;
    transition: transform 0.25s ease;
}

.signup-dd.is-open .signup-dd-chev {
    transform: rotate(180deg);
}

.signup-dd-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.3rem;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 18px 40px -12px rgba(34, 34, 34, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.signup-dd.is-open .signup-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.signup-dd-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.65rem;
    border-radius: 7px;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font: inherit;
}

.signup-dd-item:hover,
.signup-dd-item:focus {
    background: #f8f9fa;
    outline: none;
}

.signup-dd-item-price {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
}

.signup-dd-item-price-suffix {
    font-size: 1.2rem;
    font-weight: 400;
    color: #777;
}

.signup-dd-item--contact {
    justify-content: center;
    margin-top: 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    border-radius: 0;
    cursor: default;
    font-size: 12px;
    color: #666;
}

.signup-dd-item--contact a {
    color: #b4232d;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
}

.signup-tier-features {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid #e0e0e0;
}

.signup-tier-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 1rem;
    line-height: 1.45;
    color: #666;
    margin-bottom: 0.65rem;
}

.signup-tier-features li strong {
    color: #222;
}

.signup-tier-check {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: #b4232d;
    margin-top: 0.1rem;
}

.signup-port-section .signup-port-choice {
    margin-bottom: 0;
}

.signup-port-choice {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    margin: 0 0 1.25rem;
}

/* Segmented pill toggle instead of plain native radios — same red-accent
   "selected" language used throughout this page (Change/Port actions,
   T&C checkbox accent-color) rather than the browser's default blue dot. */
.signup-port-radio {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.4rem 0.9rem;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.signup-port-radio:hover {
    border-color: #222222;
}

.signup-port-radio:has(input:checked) {
    background: #222222;
    border-color: #222222;
    color: #fff;
}

.signup-port-radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signup-port-fields {
    margin-top: 0;
    margin-left: calc(-1 * var(--signup2-section-panel-padding-x, 1.75rem));
    margin-right: calc(-1 * var(--signup2-section-panel-padding-x, 1.75rem));
    padding-top: 0;
    padding-left: var(--signup2-section-panel-padding-x, 1.75rem);
    padding-right: var(--signup2-section-panel-padding-x, 1.75rem);
    border-top: 0;
}

.signup-number-pick-label {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #444;
    line-height: 1.35;
}

/* "Your Assigned Fax Number" specifically — match .signup2-plan-card__subtitle
   ("For individuals & solo practitioners") so the two cards' caption text
   reads as the same style, rather than the bolder heading-like style shared
   with the chooser/port panel titles (.signup-number-pick-label). */
#faxAssignedLabel,
#faxPortingLabel {
    font-size: 0.9375rem;
    font-weight: 400;
    color: #777;
    line-height: 1.3;
    margin: 0 0 0.3rem;
}

/* Matches .signup2-section-panel__subhead's "Account Details" heading style
   exactly (font-size/color) — pixel values, not rem/scale, since this sits
   in the 10px-root sidebar and the target lives in the differently-scaled
   form column; this is copying the other column's real computed output. */
#faxChooserTitle,
#rbChooseNumber > .signup-number-pick-label {
    font-size: 16px;
    color: #222;
}

.signup-number-search-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.signup-number-search-by__label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #444;
}

/* Segmented pill toggle (Area Code / Toll Free) — a single rounded track
   with a sliding white "thumb" behind whichever option is active, instead
   of two independently-bordered pill buttons. Inputs sit as plain (visually
   hidden but focusable) siblings before their labels so :checked + label
   and the group's :has() below can both react to selection without JS. */
.signup-toggle-group {
    position: relative;
    display: inline-flex;
    background: #eef0f3;
    border-radius: 999px;
    padding: 4px;
}

.signup-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signup-toggle-option {
    position: relative;
    z-index: 2;
    flex: 1 1 0%;
    /* Flex items default to min-width:auto, which stops flex-basis:0 from
       actually forcing equal widths whenever the content's own natural
       width would otherwise be wider than its equal share — exactly what
       happened here ("Area Code" is wider than "Toll Free"), leaving the
       two options unequal width while the sliding thumb (a plain 50%
       calc()) stayed exactly half, so the thumb and the text it was
       supposed to sit under no longer lined up. min-width:0 lets flex
       actually enforce the equal 50/50 split. */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #777;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.signup-toggle-input:checked + .signup-toggle-option {
    color: #222;
}

.signup-toggle-input:focus-visible + .signup-toggle-option {
    outline: 2px solid #222222;
    outline-offset: 2px;
}

/* The sliding highlight itself — width matches one option's share of the
   track (50% for this two-option toggle), sliding via transform so it
   animates smoothly instead of jumping. */
.signup-toggle-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 40, 90, 0.16);
    transition: transform 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

.signup-toggle-group:has(#faxSearchByTF:checked) .signup-toggle-thumb {
    transform: translateX(100%);
}

.signup-fax-area-wrap {
    margin-bottom: 1rem;
}

.signup-fax-area-wrap .signup-address-stack {
    max-width: 140px;
    margin-bottom: 0.5rem;
}

/* The resting "Area Code" label sits directly over the placeholder slot
   (same reason every other field uses placeholder=" " instead of real
   text), so the "(720)" example only turns visible once the label has
   floated out of the way on focus — same moment the notched label and the
   example format hint appear together, no overlap either state. */
#faxNpa::placeholder {
    color: transparent;
}

#faxNpa:focus::placeholder {
    color: #9aa0a8;
}

.signup-fax-area-wrap .signup-port-note,
.signup-fax-number-list > .signup-port-note {
    margin: 0.35rem 0 0;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #444;
    line-height: 1.35;
}

/* Needs to beat .signup-fax-area-wrap .signup-port-note /
   .signup-fax-number-list > .signup-port-note (2 classes each) — both
   contexts this error note can appear in — since a single-class selector
   here would lose that specificity tie and stay gray. */
.signup-fax-area-wrap .signup-port-note.signup-port-note--error,
.signup-fax-number-list > .signup-port-note.signup-port-note--error {
    color: #b4232d;
    font-weight: 600;
}

.signup-fax-number-list {
    margin: 0.75rem 0 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* No-results/error state prints one or more <p> notes directly into this
   grid (see buildNoNumbersFoundHtml()) — span both columns so they stack
   as full-width lines instead of packing two-per-row like the number
   options. */
.signup-fax-number-list > .signup-port-note {
    grid-column: 1 / -1;
}

/* Selectable row cards — same border/hover language as the plan dropdown's
   .signup-dd-item, so picking a number feels consistent with picking a
   plan tier elsewhere in this checkout. */
.signup-fax-number-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.signup-fax-number-option:hover {
    background: #f8f9fa;
}

.signup-fax-number-option:has(input:checked) {
    border-color: #222222;
    background: rgba(0, 0, 0, 0.04);
}

.signup-fax-number-option input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: #222222;
    width: 1.125rem;
    height: 1.125rem;
}

.signup-fax-loader {
    color: #666;
    padding: 0.5rem 0;
}

.signup-fax-reserve-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.signup-fax-reserve-actions .btn {
    margin: 0;
}

.signup-fax-reserve-error {
    font-size: 0.875rem;
    font-weight: 600;
    color: #b4232d;
}

.signup-fax-reserve-error[hidden] {
    display: none !important;
}

.signup-port-number-error {
    margin: 0.6rem 0 0;
    font-size: 12px;
    line-height: 1.4;
}

.signup-port-number-error a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.signup-fax-reserved-number {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.02em;
}

/* Fax card rebuilt to share the plan card's exact visual language — same
   header padding, same 1px full-bleed divider (.signup2-plan-card__divider,
   reused directly), same toggle-row padding/chevron pattern for the
   actions — so the two cards read as a matched, consistent pair instead of
   improvising a new style (icon badges, pill buttons) for just this one. */
/* Same two-column header shape as .signup2-plan-card__header — name/number
   on the left, a dollar-value-style block on the right ("Free" normally,
   the $20 porting fee when porting) — so the two cards in this sidebar
   read as a matched pair. */
.signup-fax-assigned-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    position: relative;
}

/* The first header row sits right under the card's own top padding, so it
   needs none of its own — but this second row sits directly under the
   divider with no equivalent breathing room, which left "Porting number"
   crammed flush against the line above it. Give it the same top padding as
   its own bottom padding so the divider sits centered between the two rows,
   and shift its vertical divider down to match. */
#faxPortingSummary .signup-fax-assigned-header {
    padding-top: 1rem;
}

.signup-fax-assigned-name-block {
    min-width: 0;
}

.signup-fax-assigned-label-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.signup-info-tooltip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e3e7ee;
    color: #6b7280;
    cursor: default;
    position: relative;
}

.signup-info-tooltip svg {
    width: 0.7rem;
    height: 0.7rem;
}

.signup-info-tooltip:hover,
.signup-info-tooltip:focus-visible {
    background: #d7dce4;
    color: #333;
    outline: none;
}

.signup-info-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    z-index: 20;
    min-width: 14rem;
    max-width: 20rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.signup-info-tooltip[data-tooltip]:hover::after,
.signup-info-tooltip[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.signup-fax-assigned-price-block {
    text-align: right;
    flex-shrink: 0;
}

.signup-fax-assigned-price {
    font-size: calc(1.5rem * var(--signup2-sidebar-scale, 1));
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

/* Bleed the divider and actions row past the card's own 1.25rem padding so
   they reach the card edges edge-to-edge, exactly like
   .signup2-plan-card__divider and .signup2-plan-card__toggle do inside the
   plan card (which has no outer padding of its own — only its header/toggle
   carry padding). The fax card's outer padding serves everything else
   (header, chooser panel, port fields), so the bleed is scoped narrowly to
   just these two elements. */
.signup-fax-assigned .signup2-plan-card__divider {
    margin: 0 -1.25rem;
}

.signup-fax-assigned-actions {
    margin: 0 -1.25rem -1.25rem;
}

.signup-fax-assigned-number {
    display: block;
    margin: 0.15rem 0 0;
    /* Smaller and lighter than .signup2-plan-card__name on purpose — the
       fax number is secondary to the plan/price, not an equal visual peer. */
    font-size: calc(1.75rem * var(--signup2-sidebar-scale, 1));
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}

/* Same caption language as .signup2-plan-card__billing ("billed monthly")
   — pairs with .signup-fax-assigned-price to say what that dollar value
   means (no charge normally, a one-time fee when porting). */
.signup-fax-assigned-price-note {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    font-style: italic;
    font-weight: 400;
    color: #777;
    line-height: 1.2;
}

.signup-fax-assigned-actions {
    display: flex;
    position: relative;
}

/* Vertical divider between the two actions, centered via absolute
   positioning + translateX(-50%) rather than a real flex-item span — a
   plain width:1px flex item lands on a whole device pixel and renders
   crisp/solid, while this centering trick can land on a fractional pixel
   and anti-alias into a visibly softer/thicker line, so this technique is
   used consistently for every vertical divider in this card. */
.signup-fax-assigned-actions::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e0e0e0;
    transform: translateX(-50%);
    pointer-events: none;
}

.signup-fax-assigned-actions--single::after {
    display: none;
}

.signup-fax-assigned-action {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border: 0;
    background: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    text-align: left;
    cursor: pointer;
}

.signup-fax-assigned-action:first-child {
    border-radius: 0 0 0 12px;
}

.signup-fax-assigned-action:last-child {
    border-radius: 0 0 12px 0;
}

/* The :last-child rule above targets whichever button is LAST IN THE DOM —
   but #btnEditPortNumber always sits last in markup order (it's only shown
   once porting is confirmed; the other two stay in the DOM, just hidden).
   That leaves #btnOpenPortPanel — visibly the last/right-hand action in the
   normal two-button state — without any rounding, squaring off the card's
   bottom-right corner. Target it directly by id instead of relying on DOM
   position. */
#btnOpenPortPanel {
    border-radius: 0 0 12px 0;
}

.signup-fax-assigned-action:hover,
.signup-fax-assigned-action:focus {
    background: #f7f7f7;
    outline: none;
}

.signup-fax-assigned-action__chev {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: #999;
}

/* When porting is confirmed, this is the only visible action in the row
   (its siblings carry .signup-phase-hidden) — override the :last-child
   right-only rounding so it reads as a normal full-width action. */
#btnEditPortNumber {
    border-radius: 0 0 12px 12px;
}

.signup-port-fields .form-group {
    margin-bottom: 0;
}

.signup-port-input-block .signup-port-note {
    font-size: 1.2rem;
    color: #666;
    margin: 0 !important;
    line-height: 1.45;
}

.signup-port-note + .signup-port-note {
    margin-top: 0.16rem;
}

#creditInfo {
    margin-top: 0;
    margin-bottom: 1rem;
}

.signup-cc-error {
    background: #d32f2f;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* The Source field lives in its own .signup-address-stack (like Card Info
   or Billing Address) so it gets the standard bento box, border, radius,
   and select-chevron styling for free. #campaignIdentifierOtherGroup is a
   second field in that same stack, revealed only when "Other" is picked —
   at that point the stack behaves exactly like the collapsible billing
   address box: Source becomes the top field, Please Specify the bottom. */
.signup-campaign-source-stack:not(:has(#campaignIdentifierOtherGroup.is-visible)) > .form-group:first-child .form-control {
    border-radius: 7px !important;
    border-bottom: 0 !important;
}

.signup2-tc-checkbox {
    margin: 0.75rem 0 0;
    text-align: center;
}

.signup2-tc-checkbox label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    text-align: left;
    max-width: 100%;
}

.signup2-tc-checkbox label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    position: relative;
    top: 0;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #b4232d;
    cursor: pointer;
}

.signup2-tc-checkbox label input[type="checkbox"]:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 2px;
}

.signup2-tc-checkbox a {
    color: #b4232d;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.signup2-tc-checkbox a:hover,
.signup2-tc-checkbox a:focus {
    text-decoration: underline;
}

.signup2-actions {
    margin: 2rem 0 0.35rem;
}

.signup2-actions .btn {
    display: block;
    width: 100%;
    margin: 0;
}

@media (max-width: 767px) {
    .signup2-layout__plan {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .signup2-layout__sidebar {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .signup2-layout__sidebar .signup2-page-header {
        padding-left: 0;
        padding-right: 0;
    }

    .signup2-layout__form {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* The plan/fax cards' shared 425px cap is a desktop-column-width
       constant — on mobile there's no second column to match, so let them
       fill the sidebar's own full (padded) width instead of stranding
       leftover space on either side. */
    .signup2-plan-card,
    .signup-card.signup2-sidebar-fax-card {
        max-width: none;
        margin-bottom: 3rem;
    }

    /* Sits above the backdrop/overlay panel below so it stays visible and
       clickable as a close affordance the whole time the panel is open —
       "anchored to top of page" per its own request (scrolls away with the
       header, unlike a viewport-fixed button would). */
    /* Absolutely positioned against .signup2-layout__sidebar (position:
       relative on it already, from its base rule), NOT the page-header row
       — an absolutely positioned child's containing block is its ancestor's
       PADDING edge, not its content edge, so measuring right from the
       sidebar keeps this flush against the true screen edge regardless of
       the sidebar's own gutter padding; anchoring to the header instead
       would inset it back by that same gutter.
       top is a measured pixel value (not a formula) matching the WestFax
       logo's own vertical center at this breakpoint — the logo's height is
       intrinsic (auto, from its own aspect ratio at max-width:96px on
       mobile), so there's no CSS-computable constant to derive this from.
       Re-measure and update this whenever the mobile logo max-width or the
       page-header's own padding-top changes — it was last measured against
       max-width:96px and padding-top:2rem. */
    .signup2-summary-toggle {
        display: inline-flex;
        position: absolute;
        top: 3.33rem;
        right: 1.25rem;
        transform: translateY(-50%);
        z-index: 61;
    }

    /* Collapsed by default on mobile — expanded via JS adding is-open to the
       toggle button and .signup2-summary-expanded to the sidebar. Scoped
       entirely inside this media query so desktop's always-visible summary
       is untouched regardless of viewport-resize state left behind by JS.
       The footnote is a child of .signup2-order-summary now (not a
       standalone sibling), so hiding/showing the parent covers both. */
    .signup2-order-summary {
        display: none;
    }

    /* Dimmed full-viewport scrim behind the dropped-down panel — tapping it
       closes the panel (wired in JS) same as tapping the toggle again.
       Selector needs 2 classes (ancestor + own) to outrank the sidebar's
       own ".signup2-layout__sidebar > *:not(.signup2-sidebar-bg)" catch-all
       (position:relative; z-index:1 on every direct child) — the backdrop
       IS a direct child of the sidebar, and a single-class selector here
       ties that catch-all's specificity and loses on source order. */
    .signup2-layout__sidebar .signup2-summary-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(20, 26, 37, 0.45);
        z-index: 58;
    }

    .signup2-layout__sidebar.signup2-summary-expanded .signup2-summary-backdrop {
        display: block;
    }

    /* .signup2-layout__plan is a direct child of the sidebar, so the same
       catch-all above also gives IT position:relative + z-index:1 — which
       creates its own stacking context. A position:fixed descendant (the
       order-summary panel below) still has its z-index compared only
       WITHIN that ancestor stacking context, not globally — so its own
       z-index:60 never actually gets weighed against the backdrop's z-index
       58 one level up; the entire .signup2-layout__plan subtree (plan card,
       fax card, AND the summary panel alike) just paints wherever ITS
       z-index:1 places it, behind the backdrop.
       Raising .signup2-layout__plan's OWN z-index above the backdrop (an
       earlier attempt) fixed the panel but wrongly dragged the plan/fax
       cards up above the backdrop with it, undimming them too — they're
       siblings of the panel inside the same subtree, not something that
       fix could separate out.
       The actual fix is the opposite: drop .signup2-layout__plan's z-index
       to auto, which stops it from creating a stacking context at all.
       Its children then get compared for stacking directly in the next
       real ancestor context up (shared with the backdrop), each on its own
       terms: the plan card's own z-index:1 (set directly on
       .signup2-plan-card, for an unrelated dropdown-stacking fix) still
       loses to the backdrop's 58 — dimmed, correctly. The fax card has no
       z-index of its own, so it paints in the plain non-positioned layer,
       which always sits below anything with an explicit z-index — dimmed,
       correctly. The summary panel's own z-index:60 now finally gets
       compared against the backdrop's 58 directly, in that same shared
       context, and wins — undimmed, as intended. */
    .signup2-layout__sidebar.signup2-summary-expanded .signup2-layout__plan {
        z-index: auto;
    }

    /* Full-width dropdown: detaches from its normal spot further down the
       sidebar and pins to the top of the viewport instead, covering the
       full screen width regardless of the sidebar's own padded column. */
    .signup2-layout__sidebar.signup2-summary-expanded .signup2-order-summary {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 60;
        background: #fff;
        padding: 7rem 2rem 1.75rem;
        box-sizing: border-box;
        box-shadow: 0 16px 32px rgba(15, 40, 90, 0.22);
        max-height: 85vh;
        overflow-y: auto;
    }

    .signup2-sidebar-title {
        text-align: center;
        margin-top: 3.5rem;
    }
}

.signup2-form-card .signup2-section-panel {
    /* Zeroed so the account-details/card-information/etc. bento boxes fill
       the full 425px of .signup2-form-card instead of sitting inset by
       17.5px a side — matching the fax-number/plan cards' width exactly
       instead of the other way around. Vertical padding is unaffected. */
    --signup2-section-panel-padding-x: 0;
    padding: 1.75rem var(--signup2-section-panel-padding-x);
    box-sizing: border-box;
}

.signup2-form-card .signup2-section-panel > .signup-address-stack {
    margin-bottom: 0;
}

.signup2-form-card .signup2-section-panel > * + *:not(.signup2-billing-fields) {
    margin-top: 0.75rem;
}

.signup2-form-card .signup2-section-panel > .signup2-tc-checkbox {
    margin-top: 3.75rem;
}

.signup2-form-card .signup2-section-panel > .signup2-actions {
    margin-top: 1.5rem;
}

.signup2-form-card .signup2-section-panel__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.375rem;
}

.signup2-form-card .signup2-section-panel__row > [class*="col-"] {
    padding: 0 0.375rem;
    flex: 1;
    min-width: 0;
    float: none;
}

.signup2-form-card .signup2-section-panel .form-group {
    margin-bottom: 0;
}

.signup2-form-card .signup2-section-panel .signup-card__label,
.signup2-form-card .signup2-section-panel__subhead {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #444;
    line-height: 1.35;
}

.signup2-form-card .signup2-billing-card-block #creditInfo {
    margin-bottom: 0;
}

/* Billing panel rhythm: equal space above Cardholder / Billing Address / Phone */
.signup2-form-card .signup2-billing-fields {
    --signup2-billing-group-gap: 2.25rem;
    display: block;
    margin-top: 0;
    padding-top: 0;
}

.signup2-form-card .signup2-section-panel .signup2-billing-card-block + .signup2-billing-fields {
    margin-top: 0;
    padding-top: var(--signup2-billing-group-gap);
}

.signup2-form-card .signup2-billing-fields > .signup2-billing-labeled-field + .signup2-billing-labeled-field {
    margin-top: 0;
    padding-top: var(--signup2-billing-group-gap);
}

.signup2-form-card .signup2-account-block > .signup2-section-panel__subhead,
.signup2-form-card .signup2-billing-card-block > .signup2-section-panel__subhead,
.signup2-form-card .signup2-billing-labeled-field > .signup2-section-panel__subhead,
.signup2-form-card .signup2-campaign-block > .signup2-section-panel__subhead {
    margin-top: 0;
    /* Extra room vs. the 0.5rem elsewhere: the field right below (First
       Name / Card Number / Street Address / Source) floats its label up
       into this gap on focus, and needs clearance so it doesn't collide
       with this heading. */
    margin-bottom: 1.25rem;
}

/* Extra breathing room above these three headings specifically (not
   Account Details, which already sits comfortably below the fax/plan
   summary) — on top of the 2rem gap the field-cluster rule already gives
   every group. */
.signup2-form-card .signup2-billing-card-block > .signup2-section-panel__subhead,
.signup2-form-card .signup2-billing-labeled-field > .signup2-section-panel__subhead,
.signup2-form-card .signup2-campaign-block > .signup2-section-panel__subhead {
    padding-top: 1rem;
}

.signup2-form-card .signup2-account-block > .signup2-section-panel__subhead + *,
.signup2-form-card .signup2-billing-card-block > .signup2-section-panel__subhead + *,
.signup2-form-card .signup2-billing-labeled-field > .signup2-section-panel__subhead + *,
.signup2-form-card .signup2-campaign-block > .signup2-section-panel__subhead + * {
    margin-top: 0;
}

.signup2-form-card .signup2-billing-card-block > * + * {
    margin-top: 0;
}

.signup2-form-card .signup2-billing-labeled-field {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
}

/* Kill Material Kit leftovers under Cardholder/Phone so gaps match address stack */
.signup2-form-card .signup2-billing-fields .signup2-billing-labeled-field > .form-group {
    margin: 0 !important;
    padding-bottom: 0 !important;
}

.signup2-form-card .signup2-billing-fields .signup2-billing-labeled-field > .form-group .form-control {
    margin-bottom: 0 !important;
}

.signup2-form-card .signup2-billing-card-block .signup-address-stack,
.signup2-form-card .signup2-billing-fields .signup-address-stack {
    margin-bottom: 0;
}

.signup2-form-card .signup2-section-panel .signup-port-fields {
    margin-top: 0;
}

/* Signup2 columns — form 25% larger; sidebar +15% on top of that */
.signup2-grid {
    --signup2-type-scale: 1.25;
}

.signup2-layout__form {
    font-size: 125%;
}

.signup2-layout__sidebar {
    --signup2-sidebar-scale: 1.15;
    font-size: calc(125% * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-sidebar-title {
    font-size: calc(1.125rem * var(--signup2-type-scale) * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-back .material-icons {
    font-size: calc(1.625rem * var(--signup2-type-scale) * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card__billing {
    /* 0.84rem chosen so 0.84 * type-scale(1.25) * sidebar-scale(1.15) * the
       page's 10px root (see the html:has() rule at the top of this file)
       clears the 12px / 12pt accessibility floor. Same reasoning applies to
       every other rem bump in this sidebar-scale block below. */
    font-size: calc(0.84rem * var(--signup2-type-scale) * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup-fax-assigned-price-note {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card__subtitle {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar #faxAssignedLabel,
.signup2-layout__sidebar #faxPortingLabel {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-secure-note {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card .signup-tier-spec-num {
    font-size: calc(1.5rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card .signup-tier-spec-label {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card__toggle-label {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-order-summary__label,
.signup2-layout__sidebar .signup2-order-summary__value {
    font-size: calc(0.9375rem * var(--signup2-type-scale) * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-order-summary__value--muted {
    font-size: calc(0.8125rem * var(--signup2-type-scale) * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-order-summary__row--total .signup2-order-summary__label,
.signup2-layout__sidebar .signup2-order-summary__row--total .signup2-order-summary__value {
    font-size: calc(1.25rem * var(--signup2-type-scale) * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-order-summary__asterisk {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-order-summary__footnote {
    font-size: calc(1.05rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card__name {
    font-size: calc(2rem * var(--signup2-sidebar-scale));
}

.signup2-layout__sidebar .signup2-plan-card__price {
    font-size: calc(1.5rem * var(--signup2-sidebar-scale));
}

/* This whole block used to multiply every form-side font-size by
   --signup2-type-scale (1.25 — "form 25% larger" than signup2's own 10px-root
   baseline). That compounded with signup2's 10px root being 1.6x smaller than
   signup1's real 16px root in confusing ways (25% bigger than a baseline
   that's already 37.5% smaller nets out close to signup1's actual size by
   coincidence for some elements, not others). Replaced with fixed px matching
   what signup1 itself renders at 16px root, so form fields actually match
   signup1 instead of approximating it through two stacked multipliers. */
.signup2-layout__form .signup2-form-card .signup2-section-panel .signup-card__label,
.signup2-layout__form .signup2-form-card .signup2-section-panel__subhead {
    font-size: 19px;
}

/* Section headings (Account Details / Card Information / Billing Address /
   How Did You Find Us?) only — smaller and darker than the shared
   .signup-card__label sizing above, so they read as compact section
   dividers rather than field-label-sized text. */
.signup2-layout__form .signup2-form-card .signup2-section-panel__subhead {
    font-size: 16px;
    color: #222;
}

.signup2-layout__form .signup-port-fields .signup-card__label.signup-port-field-label {
    font-size: 19px;
}

.signup2-layout__form .signup-port-radio,
.signup2-layout__form .signup2-tc-checkbox label,
.signup2-layout__form .alert-danger {
    font-size: 16px;
}

.signup2-layout__form .signup-port-input-block .signup-port-note {
    font-size: 14px;
}

.signup2-layout__form .signup-fax-area-wrap .signup-port-note,
.signup2-layout__form .signup-fax-number-list > .signup-port-note {
    font-size: 19px;
    font-weight: 400;
    color: #444;
    line-height: 1.35;
}

.signup2-layout__form .signup-port-status .material-icons {
    font-size: 18px !important;
    line-height: 18px !important;
    width: 18px;
    height: 18px;
}

.signup2-layout__form .signup-cc-error {
    font-size: 14px;
}

.signup2-layout__form .signup-card__help {
    font-size: 15px;
}

.signup2-layout__form .signup-card .form-group .form-control,
.signup2-layout__form .signup-card .signup-address-stack .form-group .form-control,
.signup2-layout__form .signup-card .signup-address-stack .form-group select.form-control,
body.signup-funnel-page--step2 .signup2-layout__form .signup-card .form-group input.form-control,
body.signup-funnel-page--step2 .signup2-layout__form .signup-card .signup-address-stack .form-group input.form-control,
body.signup-funnel-page--step2 .signup2-layout__form .signup-card .form-group select.form-control {
    font-size: 16px !important;
}

.signup2-layout__form .signup2-actions .btn {
    font-size: calc(1.125rem * var(--signup2-type-scale));
}

.signup2-layout__form .signup2-actions .btn .material-icons {
    font-size: calc(1.5rem * var(--signup2-type-scale));
}