/**
 * Carttrix central design system.
 *
 * Shared by every page under resources/views/central/** via layouts/base.blade.php.
 * Tokens are transcribed from the Notion design-md system: link-blue primary CTA, deep
 * navy hero band, pastel card tints, warm-neutral greys, 8px buttons / 12px cards.
 *
 * Deliberately hand-written and framework-free. The landing page loads this alone; the
 * registration and login pages load it *after* Bootstrap, whose form components their
 * validation scripts depend on, and the overrides at the end of this file restyle those
 * components into the same system.
 *
 * This is a separate system from public/css/super-admin.css - the operator panel keeps
 * its own palette. Do not cross-import.
 */

/* ==========================================================================
   Tokens
   --------------------------------------------------------------------------
   Every value here is an explicit color. Nothing is computed from anything
   else: what the file says is what the browser paints, so inspecting a token
   tells you its real value rather than an expression you have to evaluate in
   your head.

   The brand primary is DESIGN.md's link-blue (#0075de), not its own purple
   "primary" (#5645d4) - a deliberate choice made in review, not a mismatch to
   fix. --link-blue itself has since moved off that value to its own hue
   (#1d4ed8, see the "Brand & primary" block below) precisely so a CTA button
   and an inline text link read as different controls again, which is the
   whole point of DESIGN.md keeping the two roles apart in the first place.

   CHANGING THE BRAND COLOR: edit the four in the "Brand & primary" block below
   - --primary and its pressed/deep states, plus the --primary-tint/--primary-ink
   pair used by the chips. They are separate values on purpose; a new primary
   needs its own darker states, it cannot borrow the old ones.

   Picking those states for a new hue: keep the hue and saturation, and set the
   lightness to ~45% for pressed and ~38% for deep. That is the relationship
   DESIGN.md's own primary-pressed/-deep have to its primary, and the same
   model App\Services\Vega\ColorRamp uses for tenant storefront colors. The
   current pressed value didn't need computing - it's DESIGN.md's own
   link-blue-pressed; deep continues that same hue/saturation one step further,
   since DESIGN.md defines no third step for link-blue.

   Deliberately independent of the brand color:
     - the six pastel card tints (--tint-peach … --tint-cream) and the brand
       spectrum (--brand-pink … --brand-yellow) behind the animated scenes, a
       fixed decorative range -
       --brand-purple is DESIGN.md's purple accent, unrelated to the old
       primary purple this replaced;
     - the navy hero band (--brand-navy);
     - the semantic red/amber/green password-strength bars in
       resources/views/central/auth/register.blade.php.
   ========================================================================== */

:root {
    /* Brand & primary - link-blue from DESIGN.md, see the note above */
    --primary: #0075de;
    --primary-pressed: #005bab;
    --primary-deep: #004480;
    --on-primary: #ffffff;

    /* Chip and trial-badge pair. Paired with card-tint-sky, DESIGN.md's
       pale-blue tint, now that the primary itself is blue. Carry their own
       names rather than reusing --tint-sky, so the chips move with the brand
       color while the decorative sky card stays put. */
    --primary-tint: #dcecfa;
    --primary-ink: #005bab;

    --brand-navy: #0a1530;
    --brand-navy-deep: #070f24;
    --brand-navy-mid: #1a2a52;

    /* Inline text links - deliberately its own hue, not primary's. 16 degrees of hue
       apart from --primary (224 vs 208, both still unmistakably "blue"), and far
       enough from both purples (--brand-purple 260, the old primary 247) that it
       reads as neither. A button and a link should not look like the same control. */
    --link-blue: #1d4ed8;
    --link-blue-pressed: #173eab;

    /* Brand spectrum - DESIGN.md. The animated background scenes and the mockup's
       sidebar dots, plus the two tag-chip text colors. A fixed decorative range:
       it is what gives the design its multi-colour character, so it does not
       track the brand color. */
    --brand-pink: #ff64c8;
    --brand-orange: #dd5b00;
    --brand-orange-deep: #793400;
    --brand-purple: #7b3ff2;
    --brand-teal: #2a9d99;
    --brand-green: #1aae39;
    --brand-yellow: #f5d75e;

    /* Card tints */
    --tint-peach: #ffe8d4;
    --tint-rose: #fde0ec;
    --tint-mint: #d9f3e1;
    --tint-lavender: #e6e0f5;
    --tint-sky: #dcecfa;
    --tint-yellow: #fef7d6;
    --tint-yellow-bold: #f9e79f;
    --tint-cream: #f8f5e8;

    /* Surfaces */
    --canvas: #ffffff;
    --surface: #f6f5f4;
    --surface-soft: #fafaf9;
    --hairline: #e5e3df;
    --hairline-soft: #ede9e4;
    --hairline-strong: #c8c4be;

    /* Text */
    --ink-deep: #000000;
    --ink: #1a1a1a;
    --charcoal: #37352f;
    --slate: #5d5b54;
    --steel: #787671;
    --stone: #a4a097;
    --muted: #bbb8b1;
    --on-dark: #ffffff;
    --on-dark-muted: #a4a097;

    /* Semantic */
    --success: #1aae39;
    --warning: #dd5b00;
    --error: #e03131;
    --success-tint: #e8f7ec;
    --error-tint: #fdecec;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-xxl: 20px;
    --r-full: 9999px;

    /* Elevation */
    --shadow-1: rgba(15, 15, 15, 0.04) 0 1px 2px 0;
    --shadow-2: rgba(15, 15, 15, 0.08) 0 4px 12px 0;
    --shadow-3: rgba(15, 15, 15, 0.2) 0 24px 48px -8px;
    --shadow-4: rgba(15, 15, 15, 0.16) 0 16px 48px -8px;

    /* Layout */
    --container: 1280px;
    --gutter: 32px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * In-page navigation (the #features / #pricing / #faq links in the nav, the mobile
 * menu and the footer) glides instead of jumping. Declared on the root element
 * because that - not body - is what actually scrolls, and this stylesheet only ever
 * loads on central pages, so it cannot leak into the tenant admin or storefront.
 */
html {
    scroll-behavior: smooth;
}

/*
 * .site-nav is sticky and 64px tall, so a landed-on section would otherwise sit
 * underneath it. Stop each one short of the bar with a little breathing room.
 */
.central section[id] {
    scroll-margin-top: 88px;
}

/* Anyone who has asked their OS for less motion gets the instant jump back. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.central {
    margin: 0;
    background-color: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/*
 * Element resets, deliberately wrapped in :where() so they carry zero specificity.
 *
 * Written plainly ('.central a { color: inherit }') they score 0,1,1 and quietly outrank
 * every single-class rule below - a link with .btn--primary would take the inherited ink
 * instead of its own white, and .central p's margin:0 would flatten .pricing-card__desc's
 * margin-top. At zero specificity any class rule wins, which is what a reset should do.
 */
:where(.central) :where(h1, h2, h3, h4, h5) {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

:where(.central) :where(p) {
    margin: 0;
}

:where(.central) :where(a) {
    color: inherit;
    text-decoration: none;
}

:where(.central) :where(img, svg) {
    max-width: 100%;
}

:where(.central) :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.central :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

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

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

@media (max-width: 575.98px) {
    .container {
        padding: 0 20px;
    }
}

.section {
    padding: 96px 0;
}

.section--tight {
    padding: 64px 0;
}

.section--surface {
    background-color: var(--surface);
}

.section-head {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--stone);
}

.display-lg {
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -1px;
}

.heading-2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.heading-4 {
    font-size: 1.375rem;
    line-height: 1.3;
}

.subtitle {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--slate);
}

.lede {
    margin-top: 16px;
    font-size: 1.0625rem;
    color: var(--slate);
}

.text-link {
    color: var(--link-blue);
    font-weight: 500;
}

.text-link:hover {
    color: var(--link-blue-pressed);
    text-decoration: underline;
}

/* ==========================================================================
   Brand slot
   --------------------------------------------------------------------------
   The height is owned by the wrapper, never by the asset, so dropping a real
   logo file in (APP_BRAND_LOGO) cannot shift anything around it.
   ========================================================================== */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--brand-height, 32px);
    line-height: 1;
    flex: none;
}

.brand__img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
}

.brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    flex: none;
    border-radius: var(--r-md);
    background-color: var(--primary);
    color: var(--on-primary);
}

.brand__mark svg {
    width: 62%;
    height: 62%;
    display: block;
}

.brand__wordmark {
    font-size: calc(var(--brand-height, 32px) * 0.56);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
}

.brand--on-dark .brand__mark {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--on-dark);
}

.brand--on-dark .brand__wordmark {
    color: var(--on-dark);
}

/* ==========================================================================
   Buttons - 8px rectangles, never pills
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--lg {
    min-height: 48px;
    padding: 13px 24px;
    font-size: 15px;
}

.btn--block {
    width: 100%;
}

.btn--primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

.btn--primary:hover {
    background-color: var(--primary-pressed);
    color: var(--on-primary);
}

.btn--primary:active {
    background-color: var(--primary-deep);
}

.btn--primary:disabled {
    background-color: var(--hairline);
    color: var(--muted);
    cursor: not-allowed;
}

.btn--dark {
    background-color: var(--ink-deep);
    color: var(--on-dark);
}

.btn--dark:hover {
    background-color: var(--charcoal);
    color: var(--on-dark);
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--hairline-strong);
    color: var(--ink);
}

.btn--secondary:hover {
    background-color: var(--surface);
    color: var(--ink);
}

.btn--on-dark {
    background-color: var(--on-dark);
    color: var(--ink);
}

.btn--on-dark:hover {
    background-color: var(--surface);
    color: var(--ink);
}

.btn--secondary-on-dark {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--on-dark);
}

.btn--secondary-on-dark:hover {
    border-color: var(--on-dark);
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--on-dark);
}

.btn--ghost {
    background-color: transparent;
    color: var(--charcoal);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}

.btn--ghost:hover {
    background-color: var(--surface);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.badge--primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.tag--primary {
    background-color: var(--primary-tint);
    color: var(--primary-ink);
}

.tag--orange {
    background-color: var(--tint-peach);
    color: var(--brand-orange-deep);
}

.tag--green {
    background-color: var(--tint-mint);
    color: var(--brand-green);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px;
}

.card--feature {
    padding: 32px;
}

.card--tint {
    border-color: transparent;
    color: var(--charcoal);
}

.tint-peach { background-color: var(--tint-peach); }
.tint-rose { background-color: var(--tint-rose); }
.tint-mint { background-color: var(--tint-mint); }
.tint-lavender { background-color: var(--tint-lavender); }
.tint-sky { background-color: var(--tint-sky); }
.tint-yellow { background-color: var(--tint-yellow); }
.tint-yellow-bold { background-color: var(--tint-yellow-bold); }
.tint-cream { background-color: var(--tint-cream); }

/* ==========================================================================
   Promo strip + top navigation
   ========================================================================== */

.promo-strip {
    background-color: var(--surface);
    border-bottom: 1px solid var(--hairline);
    color: var(--charcoal);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 10px 16px;
}

.promo-strip__accent {
    color: var(--primary);
    font-weight: 600;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hairline);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 64px;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.site-nav__links a {
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--slate);
}

.site-nav__links a:hover {
    background-color: var(--surface);
    color: var(--ink);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__toggle {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.site-nav__mobile {
    display: none;
    border-top: 1px solid var(--hairline);
    padding: 12px 0 20px;
}

.site-nav__mobile.is-open {
    display: block;
}

.site-nav__mobile a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--charcoal);
    border-bottom: 1px solid var(--hairline-soft);
}

.site-nav__mobile .btn {
    width: 100%;
    margin-top: 16px;
}

@media (max-width: 1023.98px) {
    .site-nav__links,
    .site-nav__actions {
        display: none;
    }

    .site-nav__toggle {
        display: flex;
    }
}

/* ==========================================================================
   Hero band
   ========================================================================== */

.hero {
    position: relative;
    background-color: var(--brand-navy);
    color: var(--on-dark);
    padding: 104px 0 0;
    overflow: hidden;
}

/* ==========================================================================
   Animated scenes (central.partials.scene)
   --------------------------------------------------------------------------
   A band's background tells the reader what the band is about: carts and bags
   behind the hero, storefronts behind the features, sellers and coins behind
   pricing, customers behind the FAQ, headsets behind support. Each icon bobs on
   its own cycle, drifts with the scroll and pops in when its band comes into
   view. All of it is switched on and off by public/js/central-motion.js; with
   no script the icons just sit still at their resting opacity.

   Colours are set here, not as `fill`/`stroke` attributes on the icons: an SVG
   presentation attribute cannot read a custom property. The spectrum is the
   fixed decorative range, deliberately not the brand colour, so the scenes keep
   the multi-colour character that was the signature of the reference design.
   ========================================================================== */

.scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Set by central-motion.js while the band scrolls: -70 .. 70 (unitless px). */
    --parallax: 0;
}

/* A band that carries a scene keeps its own content above it. */
.has-scene {
    position: relative;
    overflow: hidden;
}

.has-scene > .container {
    position: relative;
}

.scene__item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: calc(var(--size) * var(--scale, 1));
    height: calc(var(--size) * var(--scale, 1));
    margin: calc(var(--size) * var(--scale, 1) / -2) 0 0 calc(var(--size) * var(--scale, 1) / -2);
    /* Nearer (deeper) icons are both stronger and travel further. */
    opacity: calc(var(--alpha) * (0.55 + var(--depth) * 0.45));
    transform: translate3d(0, calc(var(--parallax) * var(--depth) * 1px), 0) scale(var(--pop, 1));
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i) * 55ms);
    will-change: transform, opacity;
}

.scene__icon {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(var(--tilt));
    animation: scene-float var(--dur) ease-in-out var(--delay) infinite alternate;
}

/* Before the band has been scrolled to, its icons wait small and invisible; the
   moment the script marks the scene active they scale up in a stagger. Only
   when the script is present (html.js) - otherwise nothing would ever show. */
.js .scene:not(.is-active) .scene__item {
    --pop: 0.4;
    opacity: 0;
}

.js .scene:not(.is-active) .scene__icon,
.js .scene:not(.is-active) .scene__runner {
    animation-play-state: paused;
}

.scene--dark {
    --alpha: 0.6;
}

.scene--light {
    --alpha: 0.34;
}

/* On the light bands the headline sits in the middle column, so the icons under it
   fade back further still; on a phone, where there is no column, they go entirely. */
.scene--light .scene__item--inner {
    --alpha: 0.2;
}

@media (max-width: 767.98px) {
    .scene {
        --scale: 0.7;
    }

    .scene__item--inner {
        display: none;
    }
}

.scene__item--pink { color: var(--brand-pink); }
.scene__item--teal { color: var(--brand-teal); }
.scene__item--purple { color: var(--brand-purple); }
.scene__item--orange { color: var(--brand-orange); }
.scene__item--green { color: var(--brand-green); }
.scene__item--yellow { color: var(--brand-yellow); }
.scene__item--primary { color: var(--primary); }

/* Yellow on white has no contrast; on the light bands it takes the orange instead. */
.scene--light .scene__item--yellow {
    color: var(--brand-orange);
}

/* The cart rolling along the foot of the hero. Same colour as the CTA so it reads
   as the brand's own cart, and a tiny bounce so the wheels look like they turn. */
.scene__runner {
    position: absolute;
    left: 0;
    bottom: 38px;
    width: 40px;
    height: 40px;
    color: var(--on-dark);
    opacity: 0.55;
    animation: scene-roll 42s linear 2s infinite;
}

.scene__runner .scene__icon {
    transform: none;
    animation: scene-bounce 0.55s ease-in-out infinite alternate;
}

@keyframes scene-float {
    from {
        transform: translateY(8px) rotate(var(--tilt));
    }

    to {
        transform: translateY(-14px) rotate(calc(var(--tilt) * -1));
    }
}

@keyframes scene-roll {
    from {
        transform: translateX(-60px);
    }

    to {
        transform: translateX(calc(100vw + 60px));
    }
}

@keyframes scene-bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-3px);
    }
}

/* ==========================================================================
   Entrances
   --------------------------------------------------------------------------
   The hero rises on page load in CSS alone. Everything below the fold waits
   for central-motion.js to mark it visible (data-reveal), and only when the
   script is present - html.js - so nothing is ever hidden from a reader whose
   JavaScript failed to load.
   ========================================================================== */

.hero__title,
.hero__subtitle,
.hero__actions,
.hero__note,
.hero .mockup,
.support-hero .eyebrow,
.store-finder {
    animation: central-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.store-finder {
    animation-delay: 0.36s;
}

.hero__subtitle {
    animation-delay: 0.12s;
}

.hero__actions {
    animation-delay: 0.24s;
}

.hero__note {
    animation-delay: 0.34s;
}

.hero .mockup {
    animation-delay: 0.4s;
    animation-duration: 1s;
}

@keyframes central-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js [data-reveal]:not([data-reveal="stagger"]),
.js [data-reveal="stagger"] > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js [data-reveal="stagger"] > * {
    transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].is-visible:not([data-reveal="stagger"]),
.js [data-reveal="stagger"].is-visible > * {
    opacity: 1;
    transform: none;
}

/* Cards lift a little under the pointer, so the grid feels alive after it has landed. */
.feature-card,
.pricing-card,
.help-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover,
.pricing-card:hover,
.help-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

@media (prefers-reduced-motion: reduce) {
    .scene__icon,
    .scene__runner,
    .scene__runner .scene__icon,
    .hero__title,
    .hero__subtitle,
    .hero__actions,
    .hero__note,
    .hero .mockup,
    .support-hero .eyebrow,
    .store-finder {
        animation: none;
    }

    .scene__item {
        transform: none;
        transition: opacity 0.4s ease;
    }

    .js [data-reveal]:not([data-reveal="stagger"]),
    .js [data-reveal="stagger"] > * {
        transform: none;
        transition: opacity 0.4s ease;
    }

    .feature-card:hover,
    .pricing-card:hover,
    .help-card:hover {
        transform: none;
    }
}

.hero__inner {
    position: relative;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.hero__title {
    color: var(--on-dark);
    font-size: clamp(2.25rem, 6vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.hero__subtitle {
    margin: 24px auto 0;
    max-width: 620px;
    font-size: 1.125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.hero__note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--on-dark-muted);
}

/* The mockup breaks out of the bottom of the band. */
.hero__mockup-wrap {
    position: relative;
    margin-top: 72px;
    padding-bottom: 96px;
    /* Fixed split, not a percentage: the card has to straddle the band edge by the same
       amount whatever its own height turns out to be. */
    background: linear-gradient(to bottom, var(--brand-navy) 0 180px, var(--canvas) 180px 100%);
}

@media (max-width: 767.98px) {
    .hero {
        padding-top: 72px;
    }

    .hero__mockup-wrap {
        margin-top: 48px;
        padding-bottom: 64px;
        background: linear-gradient(to bottom, var(--brand-navy) 0 96px, var(--canvas) 96px 100%);
    }
}

/* ==========================================================================
   Storefront mockup (hand-built, no image asset)
   ========================================================================== */

.mockup {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    color: var(--ink);
    text-align: left;
}

.mockup__chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--surface);
    border-bottom: 1px solid var(--hairline);
}

.mockup__lights {
    display: flex;
    gap: 6px;
}

.mockup__lights span {
    width: 10px;
    height: 10px;
    border-radius: var(--r-full);
    background-color: var(--hairline-strong);
}

.mockup__url {
    flex: 1;
    max-width: 320px;
    padding: 5px 12px;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--steel);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup__body {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 380px;
}

.mockup__side {
    border-right: 1px solid var(--hairline);
    padding: 20px 16px;
    background-color: var(--surface-soft);
}

.mockup__side-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 12px;
}

.mockup__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--slate);
}

.mockup__nav-item.is-active {
    background-color: var(--primary-tint);
    color: var(--primary-ink);
    font-weight: 500;
}

.mockup__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    flex: none;
}

/* The fake admin sidebar's status dots, echoing the coloured database properties
   the reference design is built around. --off is the deliberate neutral: the one
   row that is not part of the coloured group. */
.mockup__dot--primary {
    background-color: var(--primary);
}

.mockup__dot--teal {
    background-color: var(--brand-teal);
}

.mockup__dot--orange {
    background-color: var(--brand-orange);
}

.mockup__dot--green {
    background-color: var(--brand-green);
}

.mockup__dot--pink {
    background-color: var(--brand-pink);
}

.mockup__dot--yellow {
    background-color: var(--brand-yellow);
}

.mockup__dot--off {
    background-color: var(--stone);
}

.mockup__main {
    padding: 24px;
}

.mockup__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.mockup__title {
    font-size: 18px;
    font-weight: 600;
}

.mockup__pill {
    padding: 4px 10px;
    border-radius: var(--r-full);
    background-color: var(--tint-mint);
    color: var(--brand-green);
    font-size: 12px;
    font-weight: 600;
}

.mockup__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.mockup__stat {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 12px 14px;
}

.mockup__stat-label {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--stone);
}

.mockup__stat-value {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 4px;
}

.mockup__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.mockup__product {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
}

.mockup__thumb {
    height: 76px;
}

.mockup__product-meta {
    padding: 10px;
}

.mockup__bar {
    height: 7px;
    border-radius: var(--r-full);
    background-color: var(--hairline);
}

.mockup__bar + .mockup__bar {
    margin-top: 6px;
    width: 55%;
    background-color: var(--hairline-soft);
}

@media (max-width: 767.98px) {
    .mockup__body {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .mockup__side {
        display: none;
    }

    .mockup__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mockup__stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Capability strip
   ========================================================================== */

.capabilities {
    background-color: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.capability__value {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.capability__label {
    margin-top: 6px;
    font-size: 14px;
    color: var(--slate);
}

@media (max-width: 767.98px) {
    .capabilities {
        grid-template-columns: repeat(2, 1fr);
        padding: 32px 24px;
        gap: 24px;
    }
}

/* ==========================================================================
   Feature grid
   ========================================================================== */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--charcoal);
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--charcoal);
}

.feature-card p {
    margin-top: 10px;
    font-size: 15px;
    color: var(--slate);
}

.banner-card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
    border-radius: var(--r-lg);
    padding: 48px;
    margin-top: 20px;
    color: var(--charcoal);
}

.banner-card h3 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--charcoal);
}

.banner-card p {
    margin-top: 14px;
    font-size: 16px;
    color: var(--charcoal);
    opacity: 0.82;
}

.banner-card__list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.banner-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
}

.banner-card__list svg {
    flex: none;
    margin-top: 3px;
    color: var(--charcoal);
}

.banner-card__panel {
    background-color: var(--canvas);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: var(--shadow-2);
}

.domain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
    color: var(--charcoal);
    border-bottom: 1px solid var(--hairline-soft);
}

.domain-row:last-child {
    border-bottom: 0;
}

.domain-row code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--ink);
}

@media (max-width: 1023.98px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .banner-card {
        grid-template-columns: 1fr;
        padding: 32px;
    }
}

@media (max-width: 575.98px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 32px;
}

.pricing-card--featured {
    background-color: var(--surface);
    border: 2px solid var(--primary);
}

.pricing-card__badge {
    position: absolute;
    top: -13px;
    left: 32px;
}

.pricing-card__name {
    font-size: 1.125rem;
    font-weight: 600;
}

.pricing-card__desc {
    margin-top: 6px;
    font-size: 14px;
    color: var(--steel);
    min-height: 42px;
}

.pricing-card__price {
    margin-top: 20px;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.1;
}

/* Scoped to the period, not to every span: the price itself is now one span per
   currency inside this element, and a bare descendant rule would grey them all out. */
.pricing-card__price .pricing-card__period {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--steel);
}

.pricing-card__trial {
    margin-top: 8px;
    font-size: 13px;
    color: var(--steel);
}

.pricing-card .btn {
    margin-top: 24px;
}

.pricing-card__features {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
}

.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--charcoal);
}

.pricing-card__features svg {
    flex: none;
    margin-top: 3px;
    color: var(--success);
}

.compare {
    margin-top: 64px;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow-x: auto;
}

.compare table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.compare th,
.compare td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--hairline-soft);
}

.compare thead th {
    background-color: var(--surface-soft);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.compare tbody th {
    font-weight: 400;
    color: var(--slate);
}

.compare td {
    color: var(--ink);
    white-space: nowrap;
}

.compare tr:last-child th,
.compare tr:last-child td {
    border-bottom: 0;
}

.compare .is-off {
    color: var(--muted);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
    max-width: 800px;
    margin: 0 auto;
}

.faq details {
    border-bottom: 1px solid var(--hairline);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--steel);
    border-bottom: 2px solid var(--steel);
    transform: rotate(45deg) translateY(-25%);
    transition: transform 0.15s ease;
}

.faq details[open] summary::after {
    transform: rotate(225deg) translateY(-25%);
}

.faq details p {
    padding: 0 0 24px;
    max-width: 68ch;
    color: var(--slate);
}

/* ==========================================================================
   CTA banner + footer
   ========================================================================== */

.cta-banner {
    background-color: var(--surface);
    border-radius: var(--r-lg);
    padding: 64px 32px;
    text-align: center;
}

.cta-banner p {
    margin: 16px auto 0;
    max-width: 520px;
    color: var(--slate);
}

.cta-banner .btn {
    margin-top: 32px;
}

.site-footer {
    background-color: var(--canvas);
    border-top: 1px solid var(--hairline);
    padding: 64px 0 32px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
}

.site-footer__about p {
    margin-top: 16px;
    max-width: 34ch;
    font-size: 14px;
    color: var(--steel);
}

.site-footer h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--ink);
    margin-bottom: 12px;
}

.site-footer li a {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    color: var(--steel);
}

.site-footer li a:hover {
    color: var(--ink);
}

.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
    color: var(--steel);
}

@media (max-width: 767.98px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .site-footer__about {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Auth shells (register / login / provisioning)
   ========================================================================== */

.auth-body {
    background-color: var(--surface-soft);
    min-height: 100vh;
}

.auth-dark-body {
    position: relative;
    background-color: var(--brand-navy);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.auth-card {
    background-color: var(--canvas);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-4);
    overflow: hidden;
}

.auth-card__head {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid var(--hairline-soft);
}

.auth-card__head .brand {
    margin: 0 auto;
}

.auth-card__head h1 {
    margin-top: 20px;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.auth-card__head p {
    margin-top: 6px;
    font-size: 14px;
    color: var(--steel);
}

.auth-card__body {
    padding: 28px 32px 32px;
}

.auth-card__foot {
    padding: 16px 32px;
    border-top: 1px solid var(--hairline-soft);
    background-color: var(--surface-soft);
    text-align: center;
    font-size: 13px;
    color: var(--steel);
}

.auth-aside {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.auth-aside a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

/* ---------- Registration two-panel shell ---------- */

.register-shell {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 20px;
}

.register-grid {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.brand-panel {
    position: relative;
    background-color: var(--brand-navy);
    color: var(--on-dark);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.brand-panel__inner {
    position: relative;
}

.brand-panel h2 {
    margin: 40px 0 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--on-dark);
}

.brand-panel .lead-text {
    margin-top: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
}

.brand-features {
    display: grid;
    gap: 14px;
    margin-top: 32px;
}

.brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
}

.brand-features i {
    margin-top: 3px;
    color: var(--tint-mint);
}

.brand-footer {
    position: relative;
    margin-top: 40px;
    font-size: 13px;
    color: var(--on-dark-muted);
}

.form-panel {
    padding: 48px 44px;
    background-color: var(--canvas);
}

.form-panel-header h1 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.form-panel-header p {
    margin: 8px 0 32px;
    font-size: 15px;
    color: var(--steel);
}

@media (max-width: 991.98px) {
    .register-grid {
        grid-template-columns: 1fr;
    }

    .brand-panel {
        padding: 32px;
    }

    .brand-features,
    .brand-footer {
        display: none;
    }

    .brand-panel h2 {
        margin-top: 24px;
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .form-panel {
        padding: 28px 20px;
    }
}

/* ---------- Form primitives (shared with the Bootstrap overrides below) ---------- */

.form-section-title {
    margin: 32px 0 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--stone);
}

.form-section-title:first-of-type {
    margin-top: 0;
}

.form-group {
    margin-bottom: 20px;
}

.field-feedback {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
}

.field-feedback.show {
    display: flex;
}

.subdomain-preview {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    background-color: var(--success-tint);
    border: 1px solid rgba(26, 174, 57, 0.25);
    border-radius: var(--r-md);
    font-size: 14px;
    color: #146b28;
}

.subdomain-preview.show {
    display: block;
}

.verification-row {
    display: none;
    margin-top: 10px;
    padding: 14px;
    background-color: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}

.verification-row.show {
    display: block;
}

#verification_code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.35rem;
    text-align: center;
}

.verification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--steel);
}

.verification-meta button {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--link-blue);
    cursor: pointer;
}

.verification-meta button:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.email-verified-badge {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background-color: var(--success-tint);
    border: 1px solid rgba(26, 174, 57, 0.25);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    color: #146b28;
}

.email-verified-badge.show {
    display: flex;
}

.email-verified-badge button {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #146b28;
    text-decoration: underline;
    cursor: pointer;
}

.password-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.password-strength span {
    height: 4px;
    flex: 1;
    border-radius: var(--r-full);
    background-color: var(--hairline);
    transition: background-color 0.2s ease;
}

/* Plan selection cards */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    /* The row gap and the top margin are both clearance for .plan-card__badge, which
       overhangs the top edge of its card and would otherwise sit on the section title
       above it, or on the card above it once the grid wraps. */
    margin-top: 12px;
    gap: 22px 12px;
}

.plan-card {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 18px 18px 16px;
    background-color: var(--canvas);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.plan-card:hover {
    border-color: var(--hairline-strong);
}

.plan-card input[type='radio'] {
    position: absolute;
    top: 16px;
    right: 16px;
    accent-color: var(--primary);
}

.plan-card .plan-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.plan-card .plan-price {
    margin-top: 4px;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
}

.plan-card .plan-price small {
    font-size: 13px;
    font-weight: 400;
    color: var(--steel);
}

.plan-card .plan-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--steel);
}

.plan-card .plan-features {
    display: grid;
    gap: 6px;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--hairline-soft);
    list-style: none;
}

.plan-card .plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--charcoal);
}

.plan-card .plan-features li .feat-label {
    color: var(--steel);
}

.plan-card .plan-features li.is-disabled {
    color: var(--muted);
}

.plan-card .plan-features li i {
    width: 12px;
    font-size: 11px;
    text-align: center;
}

.plan-card .plan-features li .fa-check {
    color: var(--success);
}

.plan-card .plan-features li .fa-xmark {
    color: var(--muted);
}

/* "Most popular", the same plan the landing page's pricing grid badges. Only the badge
   marks it: on this page a border is the selection affordance (.plan-card.selected), so
   giving the recommended card one too would read as already chosen. */
.plan-card__badge {
    position: absolute;
    top: -11px;
    left: 16px;
    padding: 3px 9px;
    font-size: 12px;
}

.plan-card .trial-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background-color: var(--primary-tint);
    color: var(--primary-ink);
    font-size: 12px;
    font-weight: 600;
}

.plan-card.selected {
    border: 2px solid var(--primary);
    background-color: var(--surface);
    padding: 17px 17px 15px;
}

.login-link {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline-soft);
    text-align: center;
    font-size: 14px;
    color: var(--steel);
}

.spin-icon {
    animation: central-spin 0.7s linear infinite;
}

@keyframes central-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Provisioning (store setup) page ---------- */

.setup-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: var(--surface-soft);
}

.setup-panel {
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.setup-panel > .brand {
    margin: 0 auto 24px;
}

.setup-card {
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: 40px 32px;
    text-align: center;
}

.setup-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 24px;
    color: var(--primary);
    animation: central-spin 1s linear infinite;
}

.setup-card h1 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.setup-card__store {
    margin-top: 8px;
    font-size: 15px;
    color: var(--steel);
}

.setup-card__store strong {
    color: var(--charcoal);
    font-weight: 600;
}

.setup-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    background-color: var(--tint-sky);
    color: #12456f;
    font-size: 14px;
}

.setup-steps {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    text-align: left;
}

.setup-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--charcoal);
}

.setup-steps li.is-pending {
    color: var(--stone);
}

.setup-steps svg {
    flex: none;
}

.setup-steps li.is-done svg {
    color: var(--success);
}

.setup-steps li.is-pending svg {
    color: var(--muted);
}

.setup-status {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline-soft);
    font-size: 14px;
    color: var(--steel);
}

.setup-error {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background-color: var(--error-tint);
    color: #9b1c1c;
    font-size: 14px;
    text-align: left;
}

.setup-error__retry {
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #9b1c1c;
    text-decoration: underline;
    cursor: pointer;
}

.setup-domain {
    margin-top: 24px;
    padding: 16px;
    border-radius: var(--r-md);
    background-color: var(--surface);
    text-align: left;
}

.setup-domain__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
}

.setup-domain code {
    display: block;
    padding: 8px 12px;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.setup-foot {
    margin-top: 20px;
    font-size: 13px;
    color: var(--steel);
}

.pulse-dot {
    animation: central-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    color: var(--primary);
}

@keyframes central-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* ==========================================================================
   Bootstrap overrides
   --------------------------------------------------------------------------
   Only the registration and super-admin login pages load Bootstrap; their
   validation scripts drive .is-valid/.is-invalid, .input-group composition and
   .alert dismissal, so the framework stays and is restyled into this system.
   ========================================================================== */

.central-bs {
    font-family: var(--font-sans);
    color: var(--ink);
}

.central-bs .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
}

.central-bs .form-control,
.central-bs .form-select {
    min-height: 44px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background-color: var(--canvas);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.central-bs .form-control::placeholder {
    color: var(--muted);
}

.central-bs .form-control:focus,
.central-bs .form-select:focus {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.central-bs .form-control.is-valid,
.central-bs .form-select.is-valid {
    border-color: var(--success);
    background-image: none;
    padding-right: 14px;
}

.central-bs .form-control.is-invalid,
.central-bs .form-select.is-invalid {
    border-color: var(--error);
    background-image: none;
    padding-right: 14px;
}

.central-bs .form-control.is-valid:focus,
.central-bs .form-control.is-invalid:focus {
    box-shadow: none;
}

.central-bs .input-group-text {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--steel);
    background-color: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
}

.central-bs .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.central-bs .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.central-bs .form-check-label {
    font-size: 14px;
    color: var(--charcoal);
}

/* The consent gate on the register form. Set apart from the fields above it: it is
   the last thing between the form and a live store, and it holds the submit button
   disabled until it is ticked, so it should not read as one more optional field. */
.central-bs .terms-consent {
    margin-bottom: 20px;
    padding: 14px 16px;
    background-color: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}

.central-bs .terms-consent .form-check-label {
    line-height: 1.5;
}

/* Always underlined here, rather than on hover as .text-link is elsewhere - a reader
   has to be able to see that there is something to read before they agree to it. */
.central-bs .terms-consent .text-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.central-bs .form-text {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--steel);
}

/* A hint that is really a blocker: the email field is the one place where filling
   the input in is not enough, so it is coloured like an error until it is cleared. */
.central-bs .form-text.is-required {
    color: var(--error);
    font-weight: 500;
}

/* The disabled submit button's reason, stated in the page rather than in a tooltip. */
.central-bs .submit-blocker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    background-color: var(--error-tint);
    border: 1px solid rgba(224, 49, 49, 0.25);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--error);
}

.central-bs .submit-blocker[hidden] {
    display: none;
}

.central-bs .field-feedback.text-danger {
    color: var(--error) !important;
}

.central-bs .field-feedback.text-success {
    color: var(--success) !important;
}

.central-bs .field-feedback.text-muted {
    color: var(--steel) !important;
}

.central-bs .btn-inline-action {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--primary);
    background-color: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-left: 0;
}

.central-bs .btn-inline-action:hover:not(:disabled) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.central-bs .btn-inline-action:disabled {
    color: var(--muted);
    background-color: var(--surface-soft);
    /* Bootstrap's .btn:disabled reads --bs-btn-disabled-border-color, which only a variant
       class defines. This button has none, so without this the border falls back to
       currentColor and darkens to the disabled text instead of matching the input. */
    border-color: var(--hairline-strong);
    cursor: not-allowed;
}

/* Bootstrap rounds the last visible child of an input group, but it can't see that the
   button has been hidden, so restore the input's own right edge. */
.central-bs .input-group.action-hidden .form-control {
    border-top-right-radius: var(--r-md);
    border-bottom-right-radius: var(--r-md);
}

.central-bs .btn-primary,
.central-bs .btn-register,
.central-bs .btn-login {
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--on-primary);
    background-color: var(--primary);
    background-image: none;
    border: 1px solid var(--primary);
    border-radius: var(--r-md);
    transition: background-color 0.15s ease;
}

.central-bs .btn-primary:hover:not(:disabled),
.central-bs .btn-register:hover:not(:disabled),
.central-bs .btn-login:hover:not(:disabled) {
    color: var(--on-primary);
    background-color: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

.central-bs .btn-primary:disabled,
.central-bs .btn-register:disabled,
.central-bs .btn-login:disabled {
    color: var(--muted);
    background-color: var(--hairline);
    border-color: var(--hairline);
    cursor: not-allowed;
    opacity: 1;
}

.central-bs .alert {
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: 14px;
}

.central-bs .alert-danger {
    background-color: var(--error-tint);
    border-color: rgba(224, 49, 49, 0.25);
    color: #9b1c1c;
}

.central-bs .alert-success {
    background-color: var(--success-tint);
    border-color: rgba(26, 174, 57, 0.25);
    color: #146b28;
}

/* ==========================================================================
   Support page
   --------------------------------------------------------------------------
   A short navy band with its own scene (headsets, chat, life rings), the store
   finder that sends a merchant straight to their own admin panel, three ways
   to reach us, a grid of help topics that each open a pre-addressed email, and
   the support FAQ.
   ========================================================================== */

.support-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--brand-navy);
    color: var(--on-dark);
    padding: 96px 0 88px;
}

.support-hero .eyebrow {
    color: var(--brand-yellow);
}

.support-hero__title {
    color: var(--on-dark);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.support-hero__subtitle {
    margin: 20px auto 0;
    max-width: 600px;
    font-size: 1.125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

/* The store finder: a merchant types their store's name and lands in its admin. */
.store-finder {
    margin: 40px auto 0;
    max-width: 640px;
    /* Solid, so the scene behind the band cannot show through the hint text. */
    background-color: var(--brand-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-lg);
    padding: 20px;
    text-align: left;
}

.store-finder__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    margin-bottom: 10px;
}

.store-finder__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.store-finder__field {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    background-color: var(--canvas);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    color: var(--steel);
    font-size: 15px;
    overflow: hidden;
}

.store-finder__field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 117, 222, 0.25);
}

.store-finder__affix {
    padding: 0 12px;
    white-space: nowrap;
    font-size: 14px;
}

.store-finder__affix--suffix {
    color: var(--stone);
}

.store-finder__input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
}

.store-finder__hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--on-dark-muted);
}

@media (max-width: 575.98px) {
    .store-finder__row {
        flex-direction: column;
    }

    .store-finder__affix--prefix {
        display: none;
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    background-color: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-1);
}

.contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    margin-bottom: 20px;
    color: var(--charcoal);
}

.contact-card h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--charcoal);
}

.contact-card p {
    margin-top: 10px;
    font-size: 15px;
    color: var(--slate);
    flex: 1;
}

.contact-card .btn,
.contact-card .text-link {
    margin-top: 20px;
    align-self: flex-start;
}

.contact-card__meta {
    margin-top: 16px;
    font-size: 13px;
    color: var(--stone);
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.help-card {
    display: flex;
    flex-direction: column;
}

.help-card p {
    flex: 1;
}

.help-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--charcoal);
}

.help-card__link:hover {
    color: var(--link-blue);
}

.help-card__link svg {
    transition: transform 0.2s ease;
}

.help-card__link:hover svg {
    transform: translateX(3px);
}

.cta-banner--dark {
    background-color: var(--brand-navy);
    color: var(--on-dark);
    overflow: hidden;
}

.cta-banner--dark .heading-2 {
    color: var(--on-dark);
}

.cta-banner--dark p {
    color: rgba(255, 255, 255, 0.78);
}

.cta-banner--dark > .cta-banner__inner {
    position: relative;
}

@media (max-width: 991.98px) {
    .contact-grid,
    .help-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .support-hero {
        padding: 72px 0 64px;
    }

    .contact-grid,
    .help-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Service)
   --------------------------------------------------------------------------
   Long-form prose, which nothing else on the central site is. The element
   resets at the top of this file are deliberately zero-specificity :where()
   rules that strip margins from p and markers from ul, so everything a reader
   needs to get through a legal document has to be put back here, scoped to
   .legal. Beside it sits a sticky table of contents; the two stack on narrow
   screens with the contents first, so the anchors stay useful on a phone.
   ========================================================================== */

.legal-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--brand-navy);
    color: var(--on-dark);
    padding: 96px 0 80px;
}

.legal-hero .eyebrow {
    color: var(--brand-yellow);
}

.legal-hero__title {
    color: var(--on-dark);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.legal-hero__subtitle {
    margin: 20px auto 0;
    max-width: 620px;
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

/* The revision line. Quiet, but it is the thing a reader comes back to check. */
.legal-hero__meta {
    margin-top: 24px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--on-dark-muted);
    animation: central-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.34s;
}

.legal-section {
    padding-top: 72px;
}

.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* Contents ---------------------------------------------------------------- */

.legal-toc {
    position: sticky;
    /* Clears the 64px sticky nav, matching .central section[id] scroll-margin-top. */
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
    border-left: 1px solid var(--hairline);
}

.legal-toc__title {
    margin-bottom: 14px;
    padding-left: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--stone);
}

.legal-toc__list {
    display: flex;
    flex-direction: column;
}

.legal-toc__link {
    display: block;
    padding: 7px 0 7px 20px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--steel);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.legal-toc__link:hover,
.legal-toc__link:focus-visible {
    color: var(--link-blue);
    border-left-color: var(--link-blue);
}

/* Prose ------------------------------------------------------------------- */

.legal {
    max-width: 72ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--slate);
}

.legal__intro {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--charcoal);
}

.legal section {
    scroll-margin-top: 88px;
}

.legal h2 {
    margin-top: 56px;
    margin-bottom: 16px;
    font-size: clamp(1.375rem, 2.2vw, 1.625rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.legal h3 {
    margin-top: 32px;
    margin-bottom: 10px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--charcoal);
}

.legal p {
    margin-bottom: 18px;
}

.legal p:last-child {
    margin-bottom: 0;
}

/* Markers come back: an unordered list of obligations is unreadable without them. */
.legal ul,
.legal ol {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}

.legal ol {
    list-style: decimal;
}

.legal li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.legal li::marker {
    color: var(--stone);
}

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

.legal strong {
    font-weight: 600;
    color: var(--charcoal);
}

.legal a {
    color: var(--link-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal a:hover {
    color: var(--link-blue-pressed);
}

@media (max-width: 991.98px) {
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Unpinned and boxed: at this width it reads as a summary above the document
       rather than a rail beside it. */
    .legal-toc {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 24px;
        border-left: 0;
        border: 1px solid var(--hairline);
        border-radius: var(--r-lg);
        background-color: var(--surface-soft);
    }

    .legal-toc__title,
    .legal-toc__link {
        padding-left: 0;
    }

    .legal-toc__link {
        margin-left: 0;
        border-left: 0;
    }

    .legal {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .legal-hero {
        padding: 72px 0 56px;
    }

    .legal-section {
        padding-top: 56px;
    }

    .legal h2 {
        margin-top: 44px;
    }
}