/*
 * On-site checkout (lib/Checkout.php).
 *
 * Self-contained on purpose: this page is served on the reseller's own domain
 * with none of WHMCS's theme loaded, so it cannot lean on the client area's
 * stylesheet or on Bootstrap. --sfr-primary / --sfr-accent are written into the
 * document head from the reseller's brand kit. --sfr-btn / --sfr-bg carry the
 * reseller's checkout-design overrides (button colour and page background),
 * each falling back to the brand primary / a neutral grey when unset.
 */

*, *::before, *::after { box-sizing: border-box; }

.sfrc-body {
    margin: 0;
    padding: 0;
    background: var(--sfr-bg, #f5f6f8);
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sfr-accent, #1e40af); }

/* ------------------------------- shell -------------------------------- */

.sfrc-top {
    background: var(--sfr-primary, #2563eb);
    padding: 16px 20px;
}
.sfrc-top-inner {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sfrc-top img { height: 34px; width: auto; display: block; }
/* The studio's logo is inline SVG rather than an image URL, so it needs a box
   to size against — an unconstrained <svg> renders at whatever the viewBox
   suggests, which is usually far too large for a header strip. */
.sfrc-top-mark { display: flex; align-items: center; height: 34px; flex: none; }
.sfrc-top-mark svg { width: 34px; height: 34px; display: block; }
/* The studio's mark can also be an uploaded image of unknown proportions —
   pin the height and let the width follow so a wide wordmark is not squashed. */
.sfrc-top-mark img { height: 34px; width: auto; max-width: 180px; object-fit: contain; display: block; }

/* Initials, used only when no mark exists anywhere. Reversed out of the header
   so it reads as a deliberate badge rather than a missing image. */
.sfrc-top-mono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.sfrc-top-name {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
/*
 * The two-part wordmark carried over from the reseller's site.
 *
 * The studio draws the name as <b>first</b><i>second</i> with no space between
 * them — the weight contrast is what separates the words, not whitespace. These
 * rules reproduce that here so the header reads identically to the page the
 * customer arrived from, and reset <i> because the second half is a word, not
 * an aside.
 */
.sfrc-top-name b { font-weight: 700; }
.sfrc-top-name i { font-style: normal; font-weight: 300; opacity: 0.9; }

.sfrc-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.sfrc-head { margin-bottom: 22px; }
.sfrc-head h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.sfrc-head p { margin: 0; color: #6b7280; }

.sfrc-foot {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.85rem;
    text-align: center;
}
.sfrc-foot a { color: #6b7280; }

/* ------------------------------- layout ------------------------------- */

.sfrc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 860px) {
    .sfrc-grid { grid-template-columns: 1fr; }
    .sfrc-summary { order: -1; }
}

.sfrc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 22px;
}
.sfrc-card + .sfrc-card { margin-top: 18px; }
.sfrc-card h2 {
    margin: 0 0 16px;
    font-size: 1.02rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #374151;
}

/* ------------------------------- forms -------------------------------- */

.sfrc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) { .sfrc-row { grid-template-columns: 1fr; } }

.sfrc-field { margin-bottom: 14px; }
.sfrc-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}
.sfrc-field .sfrc-opt { font-weight: 400; color: #9ca3af; }

/* password is listed with the rest: the sign-in page is built from these same
   classes, and without it the one field on that page renders as the browser's
   raw default beside a styled email box. */
/* A control carrying [hidden] must stay hidden. The rule below sets width and
   padding but no display, so the UA's [hidden] still wins here — this states
   it outright so adding `display` to that rule later cannot quietly reveal the
   stand-in state/city controls. */
.sfrc-field [hidden] { display: none !important; }

.sfrc-field input[type=text],
.sfrc-field input[type=email],
.sfrc-field input[type=tel],
.sfrc-field input[type=password],
.sfrc-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font: inherit;
    color: inherit;
    background: #fff;
}
.sfrc-field input:focus,
.sfrc-field select:focus {
    outline: none;
    border-color: var(--sfr-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.sfrc-hint {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}
.sfrc-field.has-error input,
.sfrc-field.has-error select { border-color: #dc2626; }
.sfrc-err {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: #b91c1c;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.sfrc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sfrc-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.9rem;
}
.sfrc-alert-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

/* --------------------------- payment methods -------------------------- */

.sfrc-methods { display: grid; gap: 10px; }
.sfrc-method {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
}
.sfrc-method:hover { border-color: var(--sfr-primary, #2563eb); }
.sfrc-method input { margin: 0; accent-color: var(--sfr-primary, #2563eb); }
.sfrc-method span { font-weight: 500; }

.sfrc-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    font-size: 0.88rem;
    color: #4b5563;
}
.sfrc-terms input { margin-top: 3px; accent-color: var(--sfr-primary, #2563eb); }

/* ------------------------------- summary ------------------------------ */

.sfrc-summary { position: sticky; top: 20px; }
.sfrc-sum-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.sfrc-sum-cycle { color: #6b7280; font-size: 0.85rem; margin: 0 0 14px; }
.sfrc-sum-desc {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 0.87rem;
    color: #4b5563;
}
.sfrc-sum-desc li { padding-left: 18px; position: relative; margin-bottom: 5px; }
.sfrc-sum-desc li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--sfr-primary, #2563eb);
    font-weight: 700;
}
.sfrc-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}
.sfrc-sum-total span { color: #6b7280; font-size: 0.88rem; }
.sfrc-sum-total strong { font-size: 1.5rem; letter-spacing: -0.02em; }

/* Reseller-defined reassurance lines under the order summary. */
.sfrc-badges ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.87rem;
    color: #4b5563;
}
.sfrc-badges li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
}
.sfrc-badges li:last-child { margin-bottom: 0; }
.sfrc-badges li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--sfr-btn, var(--sfr-primary, #2563eb));
    font-weight: 700;
}

/* ------------------------------- buttons ------------------------------ */

.sfrc-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--sfr-btn, var(--sfr-primary, #2563eb));
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.sfrc-btn:hover { filter: brightness(0.92); color: #fff; }
.sfrc-btn-ghost {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}
.sfrc-btn-ghost:hover { background: #f3f4f6; color: #111827; }
.sfrc-btn-row { margin-top: 20px; }

/* --------------------------- gateway output --------------------------- */

/*
 * The gateway module's own markup lands here untouched — it is WHMCS's, not
 * ours, and rewriting it would break the modules we most want to support. All
 * we do is make its button look like it belongs on this page.
 */
.sfrc-gateway { margin-top: 8px; }
.sfrc-gateway form { margin: 0; }
.sfrc-gateway input[type=submit],
.sfrc-gateway button[type=submit],
.sfrc-gateway .btn {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--sfr-primary, #2563eb);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.sfrc-gateway p { margin: 0 0 10px; }

.sfrc-instructions {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.92rem;
}

/* ------------------------------ confirmation -------------------------- */

.sfrc-done { max-width: 620px; margin: 0 auto; text-align: center; }
.sfrc-tick {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--sfr-primary, #2563eb);
    color: #fff;
    font-size: 30px;
    line-height: 62px;
    font-weight: 700;
}
.sfrc-tick-wait { background: #f59e0b; }
.sfrc-done h1 { margin: 0 0 8px; font-size: 1.5rem; }
.sfrc-done p { color: #4b5563; }
.sfrc-detail {
    margin: 22px 0;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.sfrc-detail div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    font-size: 0.9rem;
}
.sfrc-detail div + div { border-top: 1px solid #e5e7eb; }
.sfrc-detail span { color: #6b7280; }
.sfrc-detail strong { font-weight: 600; text-align: right; word-break: break-word; }

/* ---------------------------- custom sections ------------------------- */

/*
 * Blocks the reseller added on the Checkout page of the Rebrand studio. The
 * markup inside is theirs (allowlist-filtered in lib/CheckoutDesign.php), so
 * this only sets the typography it lands in — enough that unstyled content
 * reads correctly, loose enough that their own CSS can take it anywhere.
 */
.sfrc-custom > h2 { margin: 0 0 10px; }
.sfrc-custom p { margin: 0 0 10px; }
.sfrc-custom p:last-child { margin-bottom: 0; }
.sfrc-custom ul, .sfrc-custom ol { margin: 0 0 10px; padding-left: 20px; }
.sfrc-custom li { margin-bottom: 4px; }
.sfrc-custom img { max-width: 100%; height: auto; }
.sfrc-custom table { width: 100%; border-collapse: collapse; }
.sfrc-custom th, .sfrc-custom td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 0.92rem;
}
.sfrc-custom h3 { margin: 14px 0 6px; font-size: 1.02rem; }
.sfrc-custom h4 { margin: 12px 0 6px; font-size: 0.95rem; }
.sfrc-custom > :first-child { margin-top: 0; }
.sfrc-custom + .sfrc-custom { margin-top: 14px; }
div.sfrc-custom:not(.sfrc-card) { margin-bottom: 14px; }

/* --------------------------- inherited skin --------------------------- */

/*
 * Applied when the reseller ticked "Match my website design".
 *
 * The studio writes their design pack and palette into the document head as a
 * :root block plus the pack's own stylesheet — the same CSS their landing page
 * uses. That stylesheet styles the site's class contract (.wrap, .btn, header,
 * footer, .plan ...), which covers the header and footer we carry across but
 * knows nothing about this form's sfrc-* classes.
 *
 * This block is the bridge: it re-expresses the checkout in terms of the
 * variables that contract defines, so the form picks up their fonts, palette,
 * corner radius and surfaces without the design pack needing to know the
 * checkout exists. Everything degrades through the second value in var() when a
 * pack leaves something undefined.
 */
/*
 * --sfr-bg-set / --sfr-btn-set exist only when the reseller actually picked a
 * colour on the studio's Colours pane. That is what makes "leave it blank to
 * follow your design" work: with nothing set, var() falls through to the design
 * pack's own --canvas / --accent instead of to the brand-kit primary, which is
 * always populated and would otherwise quietly win.
 */
.sfrc-skinned {
    background: var(--sfr-bg-set, var(--canvas, var(--sfr-bg, #f5f6f8)));
    color: var(--ink, #111827);
    font-family: var(--font-body, inherit);
}
.sfrc-skinned a { color: var(--accent, var(--sfr-accent, #1e40af)); }

.sfrc-skinned .sfrc-wrap { max-width: var(--maxw, 1060px); }

.sfrc-skinned .sfrc-head h1,
.sfrc-skinned .sfrc-card h2,
.sfrc-skinned .sfrc-done h1 {
    font-family: var(--font-head, inherit);
    color: var(--ink, #111827);
}
.sfrc-skinned .sfrc-head p,
.sfrc-skinned .sfrc-done p,
.sfrc-skinned .sfrc-hint,
.sfrc-skinned .sfrc-sum-cycle,
.sfrc-skinned .sfrc-detail span { color: var(--muted, #6b7280); }

.sfrc-skinned .sfrc-card {
    background: var(--panel, #fff);
    border-color: var(--line, #e5e7eb);
    /* Packs go as far as 0 for a hard-edged look; clamped so the form does not
       end up more rounded than the site it is sitting inside. */
    border-radius: min(var(--r, 10px), 22px);
}
.sfrc-skinned .sfrc-instructions,
.sfrc-skinned .sfrc-detail,
.sfrc-skinned .sfrc-method {
    background: var(--bg-2, #f9fafb);
    border-color: var(--line, #e5e7eb);
}
.sfrc-skinned .sfrc-detail div + div,
.sfrc-skinned .sfrc-custom th,
.sfrc-skinned .sfrc-custom td { border-color: var(--line, #e5e7eb); }

.sfrc-skinned .sfrc-field label { color: var(--ink, #374151); }
.sfrc-skinned .sfrc-field input[type=text],
.sfrc-skinned .sfrc-field input[type=email],
.sfrc-skinned .sfrc-field input[type=tel],
.sfrc-skinned .sfrc-field input[type=password],
.sfrc-skinned .sfrc-field select {
    background: var(--panel, #fff);
    border-color: var(--line-2, #d1d5db);
    border-radius: min(var(--r, 8px), 12px);
    color: var(--ink, #111827);
    font-family: var(--font-body, inherit);
}
.sfrc-skinned .sfrc-field input:focus,
.sfrc-skinned .sfrc-field select:focus {
    border-color: var(--accent, var(--sfr-primary, #2563eb));
    box-shadow: 0 0 0 3px var(--glow, rgba(37, 99, 235, 0.15));
}

/* The button keeps an explicit override when one is set — a reseller who chose
   a checkout button colour meant it, design pack or not. */
.sfrc-skinned .sfrc-btn {
    background: var(--sfr-btn-set, var(--accent, #2563eb));
    color: var(--on-accent, #fff);
    border-radius: min(var(--r, 8px), 14px);
    font-family: var(--font-head, inherit);
}
.sfrc-skinned .sfrc-btn-ghost {
    background: transparent;
    color: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
}
.sfrc-skinned .sfrc-sum-total strong { color: var(--ink, #111827); }
.sfrc-skinned .sfrc-badges li::before,
.sfrc-skinned .sfrc-sum-desc li::before { color: var(--accent, #2563eb); }
.sfrc-skinned .sfrc-tick { background: var(--accent, #2563eb); color: var(--on-accent, #fff); }

/* The carried-over site header and footer are full-bleed on the landing page
   and must stay that way here; the centred column is only for the form. */
.sfrc-skinned > header,
.sfrc-skinned > footer { max-width: none; }

/*
 * Undoing the parts of a design pack that only make sense on a landing page.
 *
 * A pack is written for a document that opens with a full-height hero, so it
 * pins the header over the page and lays a fixed decorative grid behind
 * everything. Both assume content that starts below the fold. The checkout is a
 * form that starts at the top, so a fixed header would sit on the first field
 * and the grid would print over the cards.
 *
 * These rules are scoped to .sfrc-skinned, so they only apply where a pack has
 * actually been carried across, and they change position and layering only —
 * the pack keeps its own colour, type and spacing.
 */
.sfrc-skinned > header {
    position: static;
    /* Never gets the .scrolled class here (that is set by the site's own
       script, which the checkout does not load), so it needs a surface of its
       own or it renders transparent over the page background. */
    background: var(--panel, var(--sfr-primary, #2563eb));
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
/* The decorative overlay is drawn on the page's own ::before. */
.sfrc-skinned::before { display: none !important; }

/* Keep the form above anything the pack positions at z-index 0. */
.sfrc-skinned .sfrc-wrap { position: relative; z-index: 1; }

/*
 * The one rule in a design pack that actively breaks this page.
 *
 * "form" is part of the design contract every pack is written against, and it
 * means one thing there: the contact form in the landing page's last section.
 * So packs style the bare element — a bordered, padded, shadowed card laid out
 * as two columns:
 *
 *     form{border:1px solid …;border-radius:22px;padding:30px;background:#fff;
 *          display:grid;grid-template-columns:1fr 1fr;gap:16px}
 *
 * details.tpl wraps the entire checkout in a <form>, so inheriting a pack put
 * the whole order page inside that card and crammed it into the left-hand
 * column of a two-column grid — the checkout ending up stuck to one side with
 * empty space beside it.
 *
 * A class beats a bare element on specificity, so this wins wherever it lands
 * in the cascade, including under a pack the reseller uploaded themselves.
 */
.sfrc-skinned form {
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    max-width: none;
    gap: 0;
}

/* Packs strip link underlines for a nav bar full of them. In body copy — the
   terms link, anything inside a custom section — that leaves no way to see
   what is clickable. */
.sfrc-skinned .sfrc-card a:not(.sfrc-btn),
.sfrc-skinned .sfrc-custom a { text-decoration: underline; }

/*
 * The mobile menu is a JavaScript component, so it is not carried over. Packs
 * hide .nav-links and reveal .burger below their breakpoint, which would leave
 * this header with no navigation at all — !important because the rule being
 * overridden lives inside the pack's own media query.
 */
.sfrc-skinned > header .nav-links {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.sfrc-skinned > header .burger,
.sfrc-skinned > header .mmenu { display: none !important; }

@media (max-width: 700px) {
    /* At this width the link row is taller than it is useful; the logo and the
       call to action carry the header on their own. */
    .sfrc-skinned > header .nav-links { display: none !important; }
    .sfrc-skinned > header .nav { height: auto; padding: 12px 0; }
}

/* ------------------------------ sign-in ------------------------------- */

/*
 * The branded login and password-reset pages (lib/CustomerLogin.php).
 *
 * Narrower than the checkout because there is one decision to make, not twelve —
 * a full-width card for two fields reads as an empty page. Everything else is
 * inherited from the checkout's own classes, so the reseller's design pack,
 * colours and custom CSS reach this page without knowing it exists.
 */
.sfrc-auth { max-width: 430px; margin: 0 auto; }
.sfrc-auth .sfrc-head { text-align: center; }
.sfrc-auth .sfrc-btn { width: 100%; justify-content: center; }
.sfrc-auth .sfrc-btn-row { margin-top: 18px; }
.sfrc-auth .sfrc-terms { margin-top: 14px; }

.sfrc-auth-alt {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.9rem;
}
.sfrc-auth-back {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.85rem;
}
.sfrc-auth-back a { color: #6b7280; }
.sfrc-skinned .sfrc-auth-back a { color: var(--muted, #6b7280); }

/* The unskinned .sfrc-alert-info is defined with the other alerts above; this is
   only its design-pack counterpart. */
.sfrc-skinned .sfrc-alert-info {
    background: var(--bg-2, #eff6ff);
    border-color: var(--line, #bfdbfe);
    color: var(--ink, #1e40af);
}

/* ----- phone: code picker and number as two separate fields -----
   They used to be welded together, the select clipped to 84px because it
   showed "+91". It now shows "India (+91)", and each sits in its own labelled
   field: the pair reads as two questions with two answers, which is what
   stopped customers typing the dial code into the number box as well.

   Both are ordinary full-width controls inside their grid column, so there is
   nothing to style but the truncation — country names vary a lot in length and
   the column does not. */
#f-dial {
    width: 100%;
    text-overflow: ellipsis;
}

/* ==================== site chrome, without a design pack ====================
 *
 * The reseller's header and footer are carried onto the checkout and sign-in
 * pages ALWAYS — see stampCheckout() in assets/rebrand/studio.js on why that is
 * not left to the inherit toggle. The design PACK is what the toggle controls,
 * and with it off the markup arrived here with nothing to style it: no .wrap,
 * no .nav, no .btn. The result was the site's navigation as a bare stack of
 * underlined links above the order form — worse than the plain brand strip it
 * replaced, and only on the pages of resellers who had deliberately turned the
 * pack off.
 *
 * So this is the floor: enough for the chrome to read as a header and a footer
 * on its own. Every rule is scoped to :not(.sfrc-skinned) so it cannot fight
 * the pack when there is one — under a pack these elements are styled by the
 * pack's own rules and this must stay out of the way entirely.
 */
.sfrc-body:not(.sfrc-skinned) .sfrc-site-head,
.sfrc-body:not(.sfrc-skinned) .sfrc-site-foot { --sfr-chrome-line: #e5e7eb; }

.sfrc-body:not(.sfrc-skinned) .sfrc-site-head {
    background: #fff;
    border-bottom: 1px solid var(--sfr-chrome-line);
}
.sfrc-body:not(.sfrc-skinned) .sfrc-site-foot {
    background: #fff;
    border-top: 1px solid var(--sfr-chrome-line);
    margin-top: 40px;
    padding: 32px 0 24px;
    font-size: .9rem;
}

/* The pack's own container width, restated so the chrome lines up with the
   checkout column instead of running to the edge of the viewport. */
.sfrc-body:not(.sfrc-skinned) .sfrc-site-head .wrap,
.sfrc-body:not(.sfrc-skinned) .sfrc-site-foot .wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.sfrc-body:not(.sfrc-skinned) .sfrc-site-head .nav {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    flex-wrap: wrap;
}
.sfrc-body:not(.sfrc-skinned) .logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
    font-size: 1.15rem;
    font-weight: 700;
}
.sfrc-body:not(.sfrc-skinned) .logo b { font-weight: 800; }
/* The wordmark's second half is drawn in an <i> purely for the weight contrast
   the studio gives it. Italic here would be a different name from the one on
   the reseller's home page. */
.sfrc-body:not(.sfrc-skinned) .logo i { font-style: normal; font-weight: 400; }
.sfrc-body:not(.sfrc-skinned) .logo svg,
.sfrc-body:not(.sfrc-skinned) .logo img { height: 30px; width: auto; }

.sfrc-body:not(.sfrc-skinned) .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-left: auto;
}
.sfrc-body:not(.sfrc-skinned) .nav-links a {
    color: #4b5563;
    text-decoration: none;
    font-size: .92rem;
}
.sfrc-body:not(.sfrc-skinned) .nav-links a:hover { color: var(--sfr-btn, #2563eb); }

.sfrc-body:not(.sfrc-skinned) .nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* .btn is the pack's button class, and the chrome's two nav buttons carry it.
   Unstyled they rendered as plain links, so the call to action on the header a
   customer just came from vanished on the order page. */
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--sfr-btn, #2563eb);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn-ghost {
    color: var(--sfr-btn, #2563eb);
    background: none;
}
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn-primary {
    color: #fff;
    background: var(--sfr-btn, #2563eb);
}
/* The arrow is decorative and the studio sizes it against the pack's type
   scale; left alone it can arrive taller than the button it sits in. */
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn svg { width: 14px; height: 14px; }

.sfrc-body:not(.sfrc-skinned) .foot-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(auto-fit, minmax(140px, 1fr));
    gap: 26px;
}
.sfrc-body:not(.sfrc-skinned) .foot-brand p {
    margin-top: 10px;
    color: #6b7280;
    max-width: 46ch;
}
.sfrc-body:not(.sfrc-skinned) .foot-col h4 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    margin-bottom: 10px;
}
.sfrc-body:not(.sfrc-skinned) .foot-col a {
    display: block;
    padding: 3px 0;
    color: #4b5563;
    text-decoration: none;
}
.sfrc-body:not(.sfrc-skinned) .foot-col a:hover { text-decoration: underline; }
.sfrc-body:not(.sfrc-skinned) .socials {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.sfrc-body:not(.sfrc-skinned) .socials a { color: #6b7280; }
.sfrc-body:not(.sfrc-skinned) .socials svg { width: 18px; height: 18px; }
.sfrc-body:not(.sfrc-skinned) .foot-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--sfr-chrome-line);
    color: #6b7280;
    font-size: .84rem;
}

@media (max-width: 700px) {
    /* Same trade the skinned header makes at this width: the links are taller
       than they are useful, and the mark plus the call to action carry it. */
    .sfrc-body:not(.sfrc-skinned) .nav-links { display: none; }
    .sfrc-body:not(.sfrc-skinned) .sfrc-site-head .nav { min-height: 56px; }
}

/* ---- captcha on the branded sign-in ----
   The provider's widget is a fixed-size iframe, so it is centred rather than
   stretched — a 304px box left-aligned in a 430px card reads as misaligned
   rather than deliberate. Margin matches the field rhythm above it. */
.sfrc-captcha {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.sfrc-captcha > div { max-width: 100%; }