/* SafariPilot — frontend.css
 *
 * Every style the public side uses, in one file: the marketing site (layouts/public, <body class="sf mk">), the
 * sign-in screens (layouts/auth, <body class="sf sf-auth">) and the client's quotation page (public/quote,
 * <body class="kk-quote-page">). Plain CSS, no build step — edit it here.
 *
 * Order matters: the design tokens first, then the page primitives, then each page, and the public site's theme
 * (section 9) last, because it re-points the tokens for the marketing pages only (body.mk).
 *
 * Contents
 *   1. Design tokens and base         (was layouts/partials/sf-tokens.css)
 *   2. Select2                        (was select2-app.css; kept in step with portal.css)
 *   3. Marketing page primitives      (was marketing/sp-styles.css)
 *   4. Pricing                        (was marketing/pricing.css)
 *   5. Contact                        (was contact/create.css)
 *   6. Legal pages                    (was legal/terms.css)
 *   7. Sign-in screens                (was layouts/auth.css)
 *   8. The client's quotation page    (was public/quote.css)
 *   9. The public site's theme        (was marketing/site.css)
 */

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,900");

/* ════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS AND BASE
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Coolvetica';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Coolvetica.ttf') format('truetype')
}

:root {
    /* ── Design tokens ── */
    /* Ink — monochrome ramp for all structure, text and surfaces. */
    --sf-ink: #0A0A0A;
    --sf-ink-soft: #262626;
    --sf-muted-2: #525252;
    /* #6B6B6B, not #767676: at 4.17:1 on --sf-subtle the lighter grey failed
       AA for body text. This value clears 4.5:1 on both --sf-bg and --sf-subtle. */
    --sf-muted: #6B6B6B;
    /* Surfaces + lines */
    --sf-bg: #FAFAFA;
    --sf-surface: #FFFFFF;
    --sf-line: #E5E5E5;
    --sf-line-2: #D4D4D4;
    /* Brand accent — the gold from the logo (#E48D2B). Used as a surface,
       mark or border colour, never as text on a light background, because
       #E48D2B on white is only 2.58:1.
       - on gold, always use --sf-accent-ink  (#0A0A0A -> 7.68:1 on gold)
       - for gold-coloured TEXT on light, use --sf-accent-text (#A2641F -> 4.80:1 on white) */
    --sf-accent: #E48D2B;
    --sf-accent-strong: #C9781F;
    --sf-accent-ink: #0A0A0A;
    --sf-accent-text: #A2641F;
    --sf-accent-soft: #FDF4E7;
    --sf-deep: #0A0A0A;
    --sf-subtle: #F5F5F5;
    /* Semantic status. Hues are kept because they encode meaning, not brand,
       but darkened so white badge/button text clears AA (Bootstrap's
       #28a745 only reaches 2.9:1). */
    --sf-status-ok: #1E7E34;
    --sf-status-ok-strong: #16612A;
    /* Shape */
    --sf-radius: 16px;
    --sf-radius-sm: 8px;
    --sf-radius-pill: 9999px;
    --sf-radius-btn: 3px;
    --sf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .10);
    --sf-shadow-lg: 0 0 0 1px rgba(0, 0, 0, .05), 0 25px 50px -12px rgba(0, 0, 0, .25);
    --sf-shadow-accent: 0 8px 20px -10px rgba(228, 141, 43, .55);
    /* Body + UI face */
    --sf-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    /* Display face for headings, buttons and labels */
    --sf-font-display: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* ── Select2 ── */
    --s2-line: #ced4da;
    --s2-focus: #80bdff;
    --s2-focus-ring: rgba(0, 123, 255, .25);
    --s2-muted: #6c757d;
    --s2-ink: #343a40;
    --s2-surface: #fff;
    --s2-hover: #f8f9fa;
}

/* ---------- Base ---------- */

body.sf {
    font-family: var(--sf-font);
    background: var(--sf-bg);
    color: var(--sf-ink);
    -webkit-font-smoothing: antialiased;
}

/* Heading defaults deliberately sit at low specificity via :where(), so any
   page-level rule (.sf-display, .ed-*, .pr-*, .sf-page-hero h1) overrides
   them by normal cascade order rather than needing !important.
   They deliberately do NOT set `color`: a direct declaration beats
   inherited colour, which broke `.text-white` headings on dark bands
   (ink on #393939 = 1.7:1). Headings inherit ink from body.sf instead. */

.sf :where(h1,
    h2),
.sf-heading {
    font-family: var(--sf-font-display);
    font-weight: 400;
}

.sf :where(h3,
    h4,
    h5,
    h6) {
    font-family: var(--sf-font-display);
    font-weight: 400;
}

/* Bootstrap colours every anchor with its own blue. Neutralise that at zero
   specificity with :where(), so it beats Bootstrap's `a` by source order but
   loses to every component rule — the same trap as the heading defaults.
   A plain `body.sf a` here would out-specify .sf-btn-primary and strip the
   colour off anchor-based buttons. */

:where(body.sf) a {
    color: inherit;
}

/* Plain content links adopt ink, so body copy reads as text rather than
   falling back to a hue. */

body.sf a:not([class]) {
    color: var(--sf-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--sf-line-2);
}

body.sf a:not([class]):hover {
    color: var(--sf-accent-text);
    text-decoration-color: var(--sf-ink);
}

/* ---------- Layout ---------- */

.sf-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sf-container-wide {
    max-width: 1360px;
}

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

.sf-section {
    padding: 88px 0;
}

.sf-section-sm {
    padding: 56px 0;
}

@media (max-width: 767.98px) {
    .sf-section {
        padding: 56px 0;
    }
}

/* ---------- Type scale ---------- */

.sf-display {
    font-family: var(--sf-font-display);
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 0 0 20px;
}

.sf-h2 {
    font-family: var(--sf-font-display);
    font-size: clamp(1.6rem, 2.7vw, 2.2rem);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}

.sf-h3 {
    font-family: var(--sf-font-display);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 8px;
}

.sf-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--sf-muted-2);
    margin: 0 0 16px;
}

.sf-copy {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--sf-muted-2);
}

.sf-eyebrow {
    display: inline-block;
    font-family: var(--sf-font-display);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sf-ink);
    margin: 0 0 14px;
}

.sf-muted {
    color: var(--sf-muted);
}

/* ---------- Buttons ---------- */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--sf-font-display);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 15px 24px;
    border-radius: var(--sf-radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    text-decoration: none;
}

.sf-btn:hover {
    text-decoration: none;
}

.sf-btn-primary {
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
}

.sf-btn-primary:hover {
    background: var(--sf-accent-strong);
    color: var(--sf-accent-ink);
}

/* Solid ink button — secondary emphasis beside a gold primary. */

.sf-btn-dark {
    background: var(--sf-ink);
    color: #fff;
}

.sf-btn-dark:hover {
    background: var(--sf-ink-soft);
    color: #fff;
}

.sf-btn-ghost {
    background: transparent;
    color: var(--sf-ink);
    border-color: var(--sf-line-2);
}

.sf-btn-ghost:hover {
    background: #fff;
    border-color: var(--sf-ink);
    color: var(--sf-ink);
}

/* Ghost button for use on dark backgrounds. */

.sf-btn-ghost-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

.sf-btn-ghost-light:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.sf-btn-block {
    display: flex;
    width: 100%;
}

.sf-btn-sm {
    padding: 10px 16px;
    font-size: .75rem;
    letter-spacing: .04em;
}

/* ---------- Surfaces ---------- */

.sf-card {
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-lg);
}

.sf-panel {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-xs);
}

.sf-panel-hover {
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.sf-panel-hover:hover {
    box-shadow: var(--sf-shadow-sm);
    transform: translateY(-2px);
    border-color: var(--sf-line-2);
}

.sf-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sf-accent-soft);
    color: var(--sf-ink);
    font-size: 1.05rem;
    flex: none;
}

.sf-icon-tile-accent {
    background: var(--sf-accent-soft);
    color: var(--sf-accent-text);
}

/* ---------- Chips + badges ---------- */

.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 6px 11px;
    border-radius: var(--sf-radius-btn);
    background: #fff;
    border: 1px solid var(--sf-line);
    font-family: var(--sf-font-display);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-ink-soft);
}

.sf-chip i {
    color: var(--sf-ink);
}

.sf-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--sf-radius-btn);
    font-family: var(--sf-font-display);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--sf-accent-soft);
    color: var(--sf-ink);
}

.sf-badge-accent {
    background: var(--sf-accent-soft);
    color: var(--sf-accent-text);
}

/* ---------- Forms ---------- */

.sf-label {
    display: block;
    font-family: var(--sf-font-display);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sf-ink-soft);
    margin-bottom: 6px;
}

.sf-input,
body.sf .form-control {
    width: 100%;
    font-family: var(--sf-font);
    font-size: .9375rem;
    color: var(--sf-ink);
    background: #fff;
    border: 1px solid var(--sf-line-2);
    border-radius: var(--sf-radius-sm);
    padding: 12px 14px;
    height: auto;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sf-input::placeholder,
body.sf .form-control::placeholder {
    color: #a2a2a2;
}

.sf-input:focus {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 4px rgba(152, 152, 152, .16);
    outline: none;
}

.sf-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a2a2a2;
    font-size: .9rem;
    pointer-events: none;
}

.sf-error {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: #3d3d3d;
}

.sf-alert {
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-line);
    background: #fff;
    padding: 12px 14px;
    font-size: .875rem;
}

.sf-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sf-check-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    color: var(--sf-muted-2);
    margin-bottom: .5rem;
}

.sf-check-list i {
    color: var(--sf-ink);
    margin-top: .15rem;
}

/* ---------- Bootstrap 4 alignment ---------- */

body.sf .btn {
    font-family: var(--sf-font);
    font-weight: 400;
    border-radius: var(--sf-radius-sm);
    padding: .6rem 1.1rem;
}

body.sf .btn-safari,
body.sf .btn-kk {
    background: var(--sf-ink);
    color: #fff;
    border-color: var(--sf-ink);
}

body.sf .btn-safari:hover,
body.sf .btn-kk:hover {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
}

body.sf .card {
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-xs);
}

body.sf .card-header {
    border-bottom: 1px solid var(--sf-line);
    background: #fff;
}

body.sf .badge {
    font-weight: 400;
    border-radius: var(--sf-radius-pill);
    padding: .35em .7em;
}

body.sf .text-muted {
    color: var(--sf-muted) !important;
}

body.sf hr {
    border-top-color: var(--sf-line);
}

/* Bootstrap paints <code>/<samp> magenta (#e83e8c) — a saturated hue that
   survived the monochrome pass because it ships in Bootstrap's own sheet.
   It also fails AA at 3.82:1 on white. */

body.sf code,
body.sf samp {
    color: var(--sf-ink-soft);
}

body.sf .badge-success,
body.sf .btn-success {
    background-color: var(--sf-status-ok);
    border-color: var(--sf-status-ok);
}

body.sf .btn-success:hover,
body.sf .btn-success:focus,
body.sf .btn-success:active,
body.sf .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--sf-status-ok-strong);
    border-color: var(--sf-status-ok-strong);
    color: #fff;
}

body.sf .btn-outline-success {
    color: var(--sf-status-ok);
    border-color: var(--sf-status-ok);
}

body.sf .btn-outline-success:hover {
    background-color: var(--sf-status-ok);
    border-color: var(--sf-status-ok);
    color: #fff;
}

body.sf .text-success {
    color: var(--sf-status-ok) !important;
}

/* Bootstrap 4's .text-warning (#ffc107) and .text-danger (#dc3545) are
   unreadable as text on light surfaces — 1.63:1 and 3.76:1. Darkened to
   the same hue family at 5.5:1 and 6.7:1. */

body.sf .text-warning {
    color: #8A6100 !important;
}

body.sf .text-danger {
    color: #B21F2D !important;
}

/* ---------- Bootstrap hue overrides ----------
   Bootstrap ships blue as its primary colour. "Primary" here means the brand
   gold from the logo, carried on ink text (7.68:1) because white on #E48D2B
   is only 2.58:1. Everything else brand-facing is remapped to the monochrome
   ramp. The status classes (success / danger / warning) deliberately keep
   their colour: they encode meaning, not brand. */

body.sf .btn-primary {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: var(--sf-accent-ink);
}

body.sf .btn-primary:hover,
body.sf .btn-primary:focus,
body.sf .btn-primary:active,
body.sf .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--sf-accent-strong);
    border-color: var(--sf-accent-strong);
    color: var(--sf-accent-ink);
    box-shadow: none;
}

body.sf .btn-outline-primary {
    color: var(--sf-accent-text);
    border-color: var(--sf-accent);
}

body.sf .btn-outline-primary:hover {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: var(--sf-accent-ink);
}

body.sf .btn-secondary {
    background: var(--sf-ink);
    border-color: var(--sf-ink);
    color: #fff;
}

body.sf .btn-secondary:hover {
    background: var(--sf-ink-soft);
    border-color: var(--sf-ink-soft);
    color: #fff;
}

body.sf .btn-outline-secondary {
    color: var(--sf-ink-soft);
    border-color: var(--sf-line-2);
}

body.sf .btn-outline-secondary:hover {
    background: var(--sf-ink-soft);
    border-color: var(--sf-ink-soft);
    color: #fff;
}

body.sf .btn-info {
    background: var(--sf-ink-soft);
    border-color: var(--sf-ink-soft);
    color: #fff;
}

body.sf .btn-outline-info {
    color: var(--sf-ink-soft);
    border-color: var(--sf-line-2);
}

body.sf .btn-outline-info:hover {
    background: var(--sf-ink-soft);
    border-color: var(--sf-ink-soft);
    color: #fff;
}

body.sf .btn-link {
    color: var(--sf-ink);
}

body.sf .text-primary,
body.sf .text-info {
    color: var(--sf-ink) !important;
}

body.sf .bg-primary {
    background-color: var(--sf-ink) !important;
}

body.sf .bg-info {
    background-color: var(--sf-ink-soft) !important;
}

body.sf .badge-primary {
    background-color: var(--sf-ink);
}

body.sf .badge-info {
    background-color: var(--sf-ink-soft);
}

body.sf .badge-secondary {
    background-color: var(--sf-muted);
}

body.sf .alert-primary,
body.sf .alert-info {
    background: var(--sf-accent-soft);
    border-color: var(--sf-line);
    color: var(--sf-ink-soft);
}

body.sf .page-link {
    color: var(--sf-ink);
}

body.sf .page-item.active .page-link {
    background-color: var(--sf-ink);
    border-color: var(--sf-ink);
}

body.sf .form-control:focus {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 .2rem rgba(228, 141, 43, .22);
    outline: none;
}

body.sf .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--sf-ink);
    border-color: var(--sf-ink);
}

body.sf a.custom-control-label,
body.sf .custom-control-label {
    color: var(--sf-ink-soft);
}

/* ---------- Interior page hero ---------- */

.sf-page-hero {
    position: relative;
    padding: 56px 0 44px;
    background:
        radial-gradient(400px 320px at 88% -20%, rgba(152, 152, 152, .12), transparent 70%),
        radial-gradient(400px 340px at 6% 0%, rgba(91, 91, 91, .09), transparent 72%),
        var(--sf-bg);
    border-bottom: 1px solid var(--sf-line);
}

.sf-page-hero h1 {
    font-family: var(--sf-font-display);
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--sf-ink);
    margin: 14px 0 12px;
}

.sf-page-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--sf-muted-2);
    max-width: 620px;
    margin: 0;
}

.sf-page-hero-center {
    text-align: center;
}

.sf-page-hero-center .sf-page-hero-lead {
    margin-left: auto;
    margin-right: auto;
}

.sf-crumbs {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--sf-muted);
}

body.sf .sf-crumbs a {
    color: var(--sf-muted);
    text-decoration: none;
}

body.sf .sf-crumbs a:hover {
    color: var(--sf-ink);
}

/* ════════════════════════════════════════════════════════════════════════
   2. SELECT2
   The same rules sit in portal.css; change both together.
   ════════════════════════════════════════════════════════════════════════ */

.select2-container--bootstrap4 .select2-selection {
    border-color: #ced4da;
    border-radius: .25rem;
}

/* ── The single control, at its normal size ──────────────────────
   No `padding` here, and no `line-height` on the rendered span. The theme already locks the height
   (`calc(1.5em + .75rem + 2px)`) and centres the text with `line-height: calc(1.5em + .75rem)` on
   the rendered span, which is also where a `.form-control`'s 12px inset comes from. A `padding` on
   the box on top of that inset the text *twice* over, and a `line-height` of our own took the text
   back out of the middle of a fixed-height box — the two things that made a select look unlike the
   input beside it.

   What this file adds is only what the theme never had:
     • room on the right for the arrow;
     • centring for the arrow, which the theme leaves sitting low (below);
     • the small-control sizing, which the theme does not know about. */

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    padding-right: 2rem;
    /* room for the arrow, so text cannot run under it */
    ;
}

/* The theme positions the arrow at `top: 50%` and gives it no height, so the triangle it draws
   lands below the middle of the control. A height plus a translate puts it back in the centre at
   both sizes. */

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 50%;
    height: 1.5em;
    transform: translateY(-50%);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    top: 50%;
}

/* The clear ×: left of the arrow rather than on top of it, quiet, and
   red only when a pointer is actually on it. */

.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    float: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    line-height: 1rem;
    text-align: center;
    font-size: .8rem;
    color: var(--s2-muted);
    background: transparent;
    transform: translateY(-50%);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover {
    color: #dc3545;
    background: transparent;
}

/* ── The small controls: filter bars, table heads, report panels ──
   Select2 inserts its own container as a sibling *after* the `<select>`
   it replaces, which is why the sizing is keyed off the class on that
   select — the same way the theme keys its `is-invalid` border off it. */

.input-group-sm .select2-container--bootstrap4 .select2-selection--single,
.form-control-sm~.select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .5rem + 2px) !important;
    padding: 0;
    /* the rendered span below carries the inset;
    padding here as well pushed the text off-centre */
    font-size: .875rem;
}

.input-group-sm .select2-container--bootstrap4 .select2-selection__rendered,
.form-control-sm~.select2-container--bootstrap4 .select2-selection__rendered {
    padding-left: .5rem;
    padding-right: 1.75rem;
    line-height: calc(1.5em + .5rem);
    font-size: .875rem;
}

.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple,
.form-control-sm~.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + .5rem + 2px) !important;
}

.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.form-control-sm~.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    margin-top: 1px;
    font-size: .75rem;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px) !important;
    padding: .1rem .35rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    float: none;
    display: inline-block;
    background-color: var(--s2-hover);
    border: 1px solid var(--s2-line);
    border-radius: .25rem;
    color: var(--s2-ink);
    font-size: .8125rem;
    line-height: 1.4;
    padding: .1rem .4rem;
    margin: .15rem .25rem .15rem 0;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    float: none;
    color: var(--s2-muted);
    margin: 0 .2rem 0 0;
    padding: 0;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc3545;
}

/* The typed-ahead field inside a multiple control: no border of its own, sized like the pills beside it. */

.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    height: 1.6rem;
    padding: 0 .25rem;
    font-size: .8125rem;
}

/* ── The dropdown ──────────────────────────────────────────────── */

/* Above the app's own overlays — the admin sidebar sits at 1020 and a Bootstrap modal at 1055 — because a
   search field that opens under the thing it is filtering is worse than no search field. */

.select2-dropdown {
    border-color: var(--s2-line);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
    z-index: 1060;
}

/* Long option lists are the point of Select2, so the dropdown scrolls at a readable height rather than the
   theme's 15em. */

.select2-container--bootstrap4 .select2-results>.select2-results__options {
    max-height: 17.5rem;
}

.select2-container--bootstrap4 .select2-results__option {
    padding: .3rem .5rem;
    font-size: .875rem;
}

/* The app's accent is ink rather than Bootstrap blue: a highlighted option should look like a hovered menu
   row, which is what the rest of the interface uses (§6.13). */

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    background-color: var(--s2-ink);
    color: #fff;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: var(--s2-hover);
    color: var(--s2-ink);
    font-weight: 600;
}

/* A group heading, from an `<optgroup>` in the select it replaced. */

.select2-container--bootstrap4 .select2-results__group {
    display: block;
    padding: .35rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s2-muted);
    background: var(--s2-surface);
}

.select2-container--bootstrap4 .select2-results__option--group .select2-results__option {
    padding-left: .9rem;
}

/* "No results found", and the field that produced it. */

.select2-results__message {
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--s2-muted);
}

.select2-search--dropdown {
    padding: .4rem;
}

.select2-search--dropdown .select2-search__field {
    padding: .3rem .5rem;
    font-size: .875rem;
    border-color: var(--s2-line);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--s2-focus);
    box-shadow: 0 0 0 .2rem var(--s2-focus-ring);
    outline: 0;
}

/* A select that is disabled should look like every other disabled control in the form. */

select[disabled]+.select2-container--bootstrap4 .select2-selection {
    background-color: #e9ecef;
    opacity: 1;
}

/* ── Where the control has to fill its container ───────────────── */

/* Select2 writes `width: 100%` on the container inline, so these only
   matter where the container's own width is wrong. */

.form-group .select2-container--bootstrap4 {
    width: 100% !important;
}

/* Inside an input group the control flex-grows against the buttons
   beside it (the theme's `flex-grow: 1`), which an inline width of
   100% would fight. */

.input-group>.select2-container--bootstrap4,
.input-group-prepend~.select2-container--bootstrap4,
.input-group-append~.select2-container--bootstrap4 {
    width: 1% !important;
}

/* ════════════════════════════════════════════════════════════════════════
   3. MARKETING PAGE PRIMITIVES
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared ─────────────────────────────────────────── */

.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--sf-font-display);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sf-muted-2);
    margin: 0 0 18px;
}

.sp-eyebrow-mark {
    width: 22px;
    height: 2px;
    background: var(--sf-accent);
}

.sp-title {
    font-family: var(--sf-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--sf-ink);
    margin: 0 0 14px;
}

.sp-sub {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--sf-muted-2);
    max-width: 60ch;
    margin: 0 0 40px;
}

.sp-section {
    padding: 96px 0;
    border-top: 1px solid var(--sf-line);
}

.sp-section-alt {
    background: var(--sf-subtle);
}

/* The first section on a page follows the interior hero, which already draws a rule. */

.sp-section-first {
    border-top: 0;
}

/* Action row inside an interior hero; its lead carries no bottom margin. */

.sp-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 767.98px) {
    .sp-section {
        padding: 60px 0;
    }
}

/* ── Section header, card grid and spec table ───────── */

.sp-head {
    max-width: 62ch;
    margin-bottom: 56px;
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--sf-line);
    border-left: 1px solid var(--sf-line);
}

.sp-card {
    padding: 34px 30px 38px;
    border-right: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
    background: var(--sf-surface);
}

.sp-card-num {
    display: block;
    font-family: var(--sf-font-display);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .12em;
    color: var(--sf-muted);
    margin-bottom: 20px;
}

.sp-card-title {
    font-family: var(--sf-font-display);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: -.012em;
    color: var(--sf-ink);
    margin: 0 0 10px;
}

.sp-card-copy {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--sf-muted-2);
    margin: 0;
}

.sp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sf-line);
    background: var(--sf-surface);
}

.sp-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.sp-table th {
    padding: 14px 22px;
    text-align: left;
    font-family: var(--sf-font-display);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-muted);
    background: var(--sf-bg);
    border-bottom: 1px solid var(--sf-line);
}

.sp-table td {
    padding: 18px 22px;
    font-size: .9rem;
    color: var(--sf-muted-2);
    border-bottom: 1px solid var(--sf-line);
    vertical-align: top;
}

.sp-table tbody tr:last-child td {
    border-bottom: 0;
}

.sp-table-key {
    font-family: var(--sf-font-display);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--sf-ink);
    white-space: nowrap;
}

/* ── Split layout and numbered steps ────────────────── */

.sp-split {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: start;
}

.sp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--sf-line);
}

.sp-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--sf-line);
}

.sp-step-num {
    font-family: var(--sf-font-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--sf-muted);
}

.sp-step-title {
    font-family: var(--sf-font-display);
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--sf-ink);
    margin: 0 0 6px;
}

.sp-step-copy {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--sf-muted-2);
    margin: 0;
}

/* ── Closing band ───────────────────────────────────── */

.sp-closing {
    padding: 84px 0;
    background: var(--sf-subtle);
    border-top: 1px solid var(--sf-line);
}

.sp-closing-head {
    max-width: 62ch;
    margin-bottom: 48px;
}

.sp-closing-title {
    font-family: var(--sf-font-display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.028em;
    color: var(--sf-ink);
    margin: 0 0 12px;
}

.sp-closing-copy {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sf-muted-2);
    max-width: 56ch;
    margin: 0;
}

.sp-closing-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    padding: 0;
    margin: 0 0 52px;
    border-top: 1px solid var(--sf-line);
}

.sp-closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Feature cards ─────────────────────────────────────
   The features page is built from these: one icon, one claim,
   one sentence, and who it is for. Separate cards rather than the
   joined matrix above, because each is a thing you can buy into
   rather than a step in a sequence. */

.sp-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.sp-feature {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .03);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sp-feature:hover {
    border-color: var(--sf-line-2);
    box-shadow: 0 12px 30px rgba(10, 10, 10, .07);
    transform: translateY(-2px);
}

/* One tint for all of them: the platform's accent, so a grid of cards reads as one
   product rather than a colour chart. */

.sp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--sf-accent-soft);
    color: var(--sf-accent-text);
    font-size: 1.05rem;
}

.sp-feature-title {
    font-family: var(--sf-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--sf-ink);
    margin: 0 0 8px;
}

.sp-feature-copy {
    font-size: .875rem;
    line-height: 1.65;
    color: var(--sf-muted-2);
    margin: 0;
}

.sp-feature-tag {
    margin-top: 14px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sf-muted);
}

/* A heading over a group of cards, with a line saying what the group is for. */

.sp-group {
    margin: 48px 0 20px;
}

.sp-group:first-of-type {
    margin-top: 0;
}

.sp-group-title {
    font-family: var(--sf-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--sf-ink);
    margin: 0 0 4px;
}

.sp-group-copy {
    font-size: .9rem;
    color: var(--sf-muted-2);
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .sp-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sp-closing-steps {
        grid-template-columns: 1fr;
    }

    .sp-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .sp-cards {
        grid-template-columns: 1fr;
    }

    .sp-head {
        margin-bottom: 36px;
    }

    .sp-sub {
        margin-bottom: 28px;
    }

    .sp-card {
        padding: 26px 22px 30px;
    }

    .sp-page-actions .sf-btn,
    .sp-closing-actions .sf-btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   4. PRICING
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared ─────────────────────────────────────────── */

.pl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--sf-font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sf-muted-2);
    margin: 0 0 16px;
}

.pl-eyebrow-mark {
    width: 22px;
    height: 2px;
    background: var(--sf-accent);
}

.pl-title {
    font-family: var(--sf-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--sf-ink);
    margin: 0 0 12px;
}

.pl-sub {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--sf-muted-2);
    max-width: 62ch;
    margin: 0 0 40px;
}

.pl-head {
    max-width: 62ch;
    margin-bottom: 48px;
}

.pl-head-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pl-section {
    padding: 84px 0;
}

.pl-section-alt {
    background: var(--sf-subtle);
    border-top: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
}

@media (max-width: 767.98px) {
    .pl-section {
        padding: 56px 0;
    }
}

/* ── Hero ───────────────────────────────────────────── */

.pl-hero {
    padding: 76px 0 44px;
    background: var(--sf-surface);
    text-align: center;
}

.pl-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.pl-hero-title {
    font-family: var(--sf-font-display);
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.032em;
    color: var(--sf-ink);
    margin: 0 0 18px;
}

.pl-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--sf-muted-2);
    margin: 0 auto 26px;
    max-width: 62ch;
}

.pl-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pl-trust li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--sf-muted-2);
}

.pl-trust i {
    font-size: .8rem;
    color: var(--sf-ink);
}

/* ── Billing switch ─────────────────────────────────── */

.pl-switch-wrap {
    padding: 10px 0 0;
    background: var(--sf-surface);
}

.pl-switch {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--sf-line-2);
    background: var(--sf-bg);
    margin: 0 auto;
}

.pl-switch-wrap .sf-container {
    text-align: center;
}

.pl-switch button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 10px 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--sf-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-muted-2);
    transition: background .14s ease, color .14s ease;
}

.pl-switch button.is-active {
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
}

.pl-switch-save {
    font-size: .68rem;
    letter-spacing: .06em;
    padding: 2px 6px;
    border: 1px solid var(--sf-line-2);
    color: var(--sf-muted-2);
}

.pl-switch button.is-active .pl-switch-save {
    border-color: rgba(10, 10, 10, .35);
    color: var(--sf-accent-ink);
}

[data-cycle-price] {
    display: none;
}

[data-cycle-price].is-shown {
    display: inline;
}

/* ── Cards ──────────────────────────────────────────── */

.pl-cards-band {
    padding: 40px 0 88px;
    background: var(--sf-surface);
}

.pl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 24px;
    align-items: start;
}

.pl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 28px 34px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line-2);
}

.pl-card.is-featured {
    border-color: var(--sf-accent);
    border-width: 2px;
    padding: 31px 27px 33px;
    box-shadow: var(--sf-shadow-accent);
}

.pl-ribbon {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    margin: 0 0 16px;
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
    font-family: var(--sf-font-display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pl-card-head {
    margin-bottom: 22px;
}

.pl-plan-name {
    font-family: var(--sf-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--sf-ink);
    margin: 0 0 8px;
}

.pl-plan-desc {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--sf-muted-2);
    margin: 0;
    min-height: 2.9em;
}

.pl-price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-top: 22px;
    border-top: 1px solid var(--sf-line);
}

.pl-price-amount {
    font-family: var(--sf-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--sf-ink);
}

.pl-price-unit {
    font-size: .875rem;
    color: var(--sf-muted);
}

.pl-price-note {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--sf-muted);
    margin: 10px 0 22px;
    min-height: 2.6em;
}

.pl-cta {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sf-line);
}

.pl-cta-note {
    font-size: .76rem;
    color: var(--sf-muted);
    margin: 10px 0 0;
    text-align: center;
}

.pl-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--sf-line-2);
    font-family: var(--sf-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-muted-2);
}

.pl-card-body {
    padding-top: 24px;
}

.pl-list-label {
    font-family: var(--sf-font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin: 0 0 14px;
}

.pl-list-label-spaced {
    margin-top: 26px;
}

.pl-limits {
    margin: 0;
}

.pl-limits>div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sf-line);
}

.pl-limits dt {
    font-size: .85rem;
    font-weight: 400;
    color: var(--sf-muted-2);
    margin: 0;
}

.pl-limits dd {
    font-family: var(--sf-font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--sf-ink);
    margin: 0;
    text-align: right;
}

.pl-limits dd.is-off {
    color: var(--sf-muted);
    font-weight: 500;
}

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

.pl-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: 6px 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--sf-muted-2);
}

.pl-list i {
    margin-top: .3rem;
    font-size: .7rem;
    color: var(--sf-ink);
}

.pl-empty {
    padding: 40px;
    border: 1px solid var(--sf-line);
    background: var(--sf-subtle);
    text-align: center;
    color: var(--sf-muted-2);
}

/* ── Every plan includes ────────────────────────────── */

.pl-include {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--sf-line);
    border-left: 1px solid var(--sf-line);
}

.pl-include-item {
    padding: 30px 26px 34px;
    border-right: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
    background: var(--sf-surface);
}

.pl-include-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    background: var(--sf-accent);
    color: var(--sf-accent-ink);
    font-size: .95rem;
}

.pl-include-title {
    font-family: var(--sf-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--sf-ink);
    margin: 0 0 8px;
}

.pl-include-copy {
    font-size: .875rem;
    line-height: 1.65;
    color: var(--sf-muted-2);
    margin: 0;
}

/* ── FAQ ────────────────────────────────────────────── */

.pl-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
    border-top: 1px solid var(--sf-line-2);
}

.pl-faq-item {
    border-bottom: 1px solid var(--sf-line);
}

.pl-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--sf-font-display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--sf-ink);
}

.pl-faq-q i {
    flex: none;
    font-size: .7rem;
    color: var(--sf-muted);
    transition: transform .18s ease;
}

.pl-faq-q[aria-expanded="true"] i {
    transform: rotate(45deg);
}

.pl-faq-a {
    font-size: .9rem;
    line-height: 1.75;
    color: var(--sf-muted-2);
    margin: 0 0 22px;
    max-width: 62ch;
}

.pl-faq-more {
    margin: 34px 0 0;
    font-size: .9rem;
    color: var(--sf-muted-2);
}

/* ── Closing ────────────────────────────────────────── */

.pl-closing {
    padding: 84px 0;
    background: var(--sf-deep);
    text-align: center;
}

.pl-closing-inner {
    max-width: 720px;
    margin: 0 auto;
}

.pl-closing-title {
    font-family: var(--sf-font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 16px;
}

.pl-closing-copy {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 30px;
}

.pl-closing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .pl-include {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {

    .pl-cards,
    .pl-faq {
        grid-template-columns: 1fr;
    }

    .pl-cards {
        gap: 20px;
    }

    .pl-card.is-featured {
        order: -1;
    }

    .pl-faq {
        gap: 0;
    }

    .pl-hero {
        padding: 56px 0 36px;
    }

    .pl-cards-band {
        padding: 32px 0 60px;
    }
}

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

    .pl-card,
    .pl-card.is-featured {
        padding: 26px 20px 28px;
    }

    .pl-price-amount {
        font-size: 2.5rem;
    }

    .pl-plan-desc,
    .pl-price-note {
        min-height: 0;
    }

    .pl-closing-actions .sf-btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   5. CONTACT
   ════════════════════════════════════════════════════════════════════════ */

.ct-hero {
    padding: 72px 0 56px;
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-line);
}

.ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--sf-font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sf-muted-2);
    margin: 0 0 16px;
}

.ct-eyebrow-mark {
    width: 22px;
    height: 2px;
    background: var(--sf-accent);
}

.ct-title {
    font-family: var(--sf-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--sf-ink);
    margin: 0 0 16px;
}

.ct-lead {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--sf-muted-2);
    max-width: 60ch;
    margin: 0;
}

.ct-section {
    padding: 72px 0 96px;
}

.ct-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 64px;
    align-items: start;
}

/* ── Details column ── */

.ct-aside {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ct-detail {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--sf-line);
}

.ct-detail:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.ct-detail-label {
    font-family: var(--sf-font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin: 0 0 8px;
}

.ct-detail-value {
    font-family: var(--sf-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--sf-ink);
    margin: 0 0 6px;
}

.ct-detail-note {
    font-size: .875rem;
    line-height: 1.65;
    color: var(--sf-muted);
    margin: 0;
}

.ct-hours {
    margin: 0;
}

.ct-hours>div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sf-line);
}

.ct-hours>div:last-child {
    border-bottom: 0;
}

.ct-hours dt {
    font-size: .875rem;
    font-weight: 500;
    color: var(--sf-ink-soft);
    margin: 0;
}

.ct-hours dd {
    font-size: .875rem;
    color: var(--sf-muted);
    margin: 0;
    text-align: right;
}

.ct-note {
    padding: 22px;
    background: var(--sf-subtle);
    border-left: 2px solid var(--sf-accent);
}

.ct-note-title {
    font-family: var(--sf-font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sf-ink);
    margin: 0 0 8px;
}

.ct-note-copy {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--sf-muted-2);
    margin: 0;
}

/* ── Form card ── */

.ct-form-card {
    padding: 40px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
}

.ct-form-title {
    font-family: var(--sf-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--sf-ink);
    margin: 0 0 6px;
}

.ct-form-sub {
    font-size: .875rem;
    color: var(--sf-muted);
    margin: 0 0 30px;
}

.ct-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ct-field {
    margin-bottom: 20px;
}

.ct-req {
    color: var(--sf-ink);
}

.ct-privacy {
    font-size: .82rem;
    line-height: 1.6;
    color: var(--sf-muted);
    margin: 4px 0 22px;
}

.ct-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: 14px 16px;
    margin-bottom: 26px;
    font-size: .9rem;
    border: 1px solid var(--sf-line-2);
    background: var(--sf-subtle);
    color: var(--sf-ink-soft);
}

.ct-alert i {
    margin-top: .2rem;
}

.ct-alert-ok {
    border-left: 2px solid var(--sf-ink);
}

.ct-alert-error {
    border-left: 2px solid #c0392b;
}

/* ── Responsive ── */

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

    .ct-hero {
        padding: 56px 0 44px;
    }

    .ct-section {
        padding: 52px 0 68px;
    }

    .ct-form-card {
        padding: 30px 24px;
    }
}

@media (max-width: 575.98px) {
    .ct-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   6. LEGAL PAGES
   ════════════════════════════════════════════════════════════════════════ */

.legal-sidebar a {
    font-size: .85rem;
    color: #727272;
    text-decoration: none;
    display: block;
    padding: 6px 0;
    border-left: 2px solid transparent;
    padding-left: 12px;
    transition: all .15s;
}

.legal-sidebar a:hover,
.legal-sidebar a.active {
    color: #393939;
    border-left-color: #393939;
    font-weight: 600;
}

.legal-body h2 {
    font-size: 1.3rem;
    color: #393939;
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    padding-top: .5rem;
}

.legal-body h3 {
    font-size: 1.05rem;
    color: #404040;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.legal-body p,
.legal-body li {
    font-size: .93rem;
    line-height: 1.8;
    color: #404040;
}

.legal-body ul {
    padding-left: 1.4rem;
}

.legal-body ul li {
    margin-bottom: .35rem;
}

/* ════════════════════════════════════════════════════════════════════════
   7. SIGN-IN SCREENS
   ════════════════════════════════════════════════════════════════════════ */

.sf-auth {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sf-surface);
}

.sf-auth::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sf-accent) 0%, var(--sf-muted) 45%, var(--sf-accent) 100%);
    z-index: 10;
}

.sf-auth-shell {
    flex: 1 0 auto;
    display: flex;
    min-height: 100vh;
}

/* ── The picture half ─────────────────────────────────────────── */

.sf-auth-visual {
    flex: 1 1 46%;
    max-width: 46%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 46px;
    color: #fff;
    background-color: var(--sf-deep);
    background-image:
        linear-gradient(160deg, rgba(10, 10, 10, .80), rgba(10, 10, 10, .52)),
        url('../images/auth/elephant.jpg');
    background-size: cover;
    background-position: center;
}

.sf-auth-wordmark {
    font-family: var(--sf-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
}

.sf-auth-wordmark:hover {
    color: #fff;
    text-decoration: none;
}

.sf-auth-visual-copy {
    margin: auto 0;
    max-width: 30rem;
}

.sf-auth-visual-title {
    font-family: var(--sf-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 14px;
}

.sf-auth-visual-lead {
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 22px;
}

.sf-auth-visual-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: rgba(255, 255, 255, .92);
}

.sf-auth-visual-list i {
    margin-right: 9px;
    color: var(--sf-accent);
}

.sf-auth-visual-foot {
    margin: 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .62);
}

/* ── The form half ────────────────────────────────────────────── */

.sf-auth-panel {
    flex: 1 1 54%;
    max-width: 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 32px;
    background: var(--sf-surface);
}

.sf-auth-panel-inner {
    width: 100%;
    max-width: 580px;
}

/* The panel is the card now: the chrome that made sense on a grey page would only draw a box inside a
   box. */

.sf-auth-panel .sf-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.sf-auth-panel .sf-auth-card-wide {
    max-width: 580px;
}

/* On a phone the picture is gone, so the brand comes back here. */

.sf-auth-panel-brand {
    display: none;
    margin-bottom: 26px;
}

.sf-auth-panel-brand img {
    height: 40px;
    width: auto;
}

.sf-auth-foot {
    flex: none;
    width: 100%;
    padding: 34px 20px 6px;
    text-align: center;
    font-size: .8125rem;
    color: var(--sf-muted);
}

@media (max-width: 991.98px) {
    .sf-auth-visual {
        display: none;
    }

    .sf-auth-panel {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 40px 22px 24px;
    }

    .sf-auth-panel-brand {
        display: block;
    }
}

body.sf .sf-auth-foot a {
    color: var(--sf-muted-2);
    text-decoration: none;
}

body.sf .sf-auth-foot a:hover {
    color: var(--sf-ink);
}

/* Header block shared by every auth screen. */

.sf-auth-title {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -.025em;
    color: var(--sf-ink);
    margin: 0 0 6px;
}

.sf-auth-sub {
    font-size: .9375rem;
    color: var(--sf-muted-2);
    margin: 0 0 26px;
}

.sf-auth-head {
    text-align: left;
    margin-bottom: 24px;
}

.sf-auth-head .sf-auth-sub {
    margin-bottom: 0;
}

.sf-auth-alt {
    text-align: center;
    margin: 22px 0 0;
    font-size: .875rem;
    color: var(--sf-muted-2);
}

.sf-btn+.sf-auth-alt a {
    font-weight: 400;
}

/* Selectable role cards on the registration screen */

.sf-role {
    display: block;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}

.sf-role input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sf-role-body {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 13px 15px;
    border: 1px solid var(--sf-line-2);
    border-radius: var(--sf-radius-sm);
    background: #fff;
    font-size: .9375rem;
    color: var(--sf-ink-soft);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.sf-role-body i {
    color: var(--sf-muted);
    width: 18px;
    text-align: center;
}

.sf-role:hover .sf-role-body {
    border-color: #a2a2a2;
}

.sf-role input:checked+.sf-role-body {
    border-color: var(--sf-accent);
    background: var(--sf-accent-soft);
    color: var(--sf-ink);
    box-shadow: 0 0 0 3px rgba(228, 141, 43, .18);
}

.sf-role input:checked+.sf-role-body i {
    color: var(--sf-accent-text);
}

.sf-role input:focus-visible+.sf-role-body {
    box-shadow: 0 0 0 4px rgba(228, 141, 43, .30);
}

/* 6-digit OTP entry */

.sf-otp-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.sf-otp-box {
    width: 46px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--sf-ink);
    border: 1px solid var(--sf-line-2);
    border-radius: var(--sf-radius-sm);
    background: #fff;
}

.sf-otp-box:focus {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 4px rgba(152, 152, 152, .16);
}

.sf-otp-box:disabled {
    background: #F3F4F6;
    color: var(--sf-muted);
}

@media (max-width: 400px) {
    .sf-otp-box {
        width: 40px;
        height: 50px;
        font-size: 1.25rem;
    }
}

/* ── The pieces the views used to set inline ─────────────────────
   Each of these replaces a `style="…"` attribute that was repeated
   on every auth screen. The markup now says what a thing *is*. */

/* A field with an icon in it: the icon is absolutely placed, so the
   input has to make room for it. */

.sf-field {
    position: relative;
}

.sf-field .sf-input-icon~.form-control {
    padding-left: 40px;
}

/* …and room on the right when something else sits inside it. */

.sf-field .sf-input--pw {
    padding-right: 40px;
}

/* Show/hide a password, from inside the field. */

.sf-pw-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
}

.sf-pw-toggle i {
    font-size: .85rem;
    color: var(--sf-muted);
}

.sf-pw-toggle:hover i {
    color: var(--sf-ink);
}

/* Alerts raised by the screen itself, rather than only by validation. */

.sf-alert--status {
    background: var(--sf-accent-soft);
    border-color: var(--sf-line-2);
}

.sf-alert--error {
    background: #FEF2F2;
    border-color: #d5d5d5;
    color: #3d3d3d;
}

.sf-alert--error i {
    color: #B42318;
}

/* A link that has to read as a link inside a sentence. */

.sf-auth-link {
    color: var(--sf-ink);
    font-weight: 600;
    text-decoration: none;
}

.sf-auth-link:hover {
    color: var(--sf-accent-text);
    text-decoration: underline;
}

.sf-auth-link--quiet {
    color: var(--sf-accent-text);
    font-weight: 400;
    font-size: .875rem;
}

.sf-auth-link--quiet:hover {
    color: var(--sf-ink);
}

/* A quiet line of explanation under a field. */

.sf-hint {
    display: block;
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--sf-muted);
}

/* The label beside a checkbox. */

.sf-check {
    font-size: .875rem;
    color: var(--sf-muted-2);
}

.sf-check--sm {
    font-size: .8125rem;
}

/* The icon tile above an auth heading. */

.sf-auth-tile {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
}

/* A rule with something centred under it, as the OTP screen's resend block is. */

.sf-auth-divider {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--sf-line);
    text-align: center;
}

.sf-auth-divider p {
    margin-bottom: 6px;
    font-size: .8125rem;
}

.sf-auth-resend {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sf-ink);
    font-size: .875rem;
    font-weight: 600;
}

.sf-auth-resend:hover {
    color: var(--sf-accent-text);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   8. THE CLIENT'S QUOTATION PAGE
   ════════════════════════════════════════════════════════════════════════ */

body:where(.kk-quote-page) {
    font-family: 'Nunito', sans-serif;
    background: #f4f6f0;
}

:where(.kk-quote-page) .quote-header {
    background: linear-gradient(135deg, #313131 0%, #4e4e4e 100%);
}

:where(.kk-quote-page) .day-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #393939;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    flex-shrink: 0;
}

:where(.kk-quote-page) .inc-item::before {
    content: '✓ ';
    color: #747474;
    font-weight: 700;
}

:where(.kk-quote-page) .exc-item::before {
    content: '✗ ';
    color: #4d4d4d;
    font-weight: 700;
}

:where(.kk-quote-page) .responded-banner {
    background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
    border: 1px solid #cacaca;
}

:where(.kk-quote-page) .trust-bar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

/* ════════════════════════════════════════════════════════════════════════
   9. THE PUBLIC SITE'S THEME
   ════════════════════════════════════════════════════════════════════════ */

body.mk {
    --mk-primary: #E48D2B;
    --mk-primary-700: #E48D23;
    --mk-primary-900: #E48D29;
    --mk-primary-50: #EFF4F5;
    --mk-primary-100: #D7E6E7;
    --mk-accent: #E89E4B;
    --mk-accent-50: #FDF7F0;
    --mk-accent-text: #A86318;
    --mk-gray-50: #F9FAFB;
    --mk-gray-100: #F3F4F6;
    --mk-gray-300: #D1D5DB;
    --mk-gray-600: #4B5563;
    --mk-gray-900: #111827;
    /* The shared sf-* tokens, re-pointed for the public site. */
    --sf-ink: var(--mk-gray-900);
    --sf-ink-soft: #1F2937;
    --sf-muted: var(--mk-gray-600);
    --sf-muted-2: var(--mk-gray-600);
    --sf-bg: #FFFFFF;
    --sf-subtle: var(--mk-gray-50);
    --sf-line: var(--mk-gray-100);
    --sf-line-2: #E5E7EB;
    --sf-accent: var(--mk-accent);
    --sf-accent-strong: #E48D2B;
    --sf-accent-text: var(--mk-accent-text);
    --sf-accent-soft: var(--mk-accent-50);
    --sf-deep: var(--mk-primary-900);
    --sf-radius: 20px;
    --sf-radius-btn: 9999px;
    --sf-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --sf-font-display: 'Source Sans Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: #FAF8F4;
    color: var(--mk-gray-900);
    padding-top: 72px;
    /* the fixed navbar */
    ;
}

body.mk :where(h1,
    h2,
    h3,
    h4) {
    font-family: var(--sf-font-display);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mk-gray-900);
}

body.mk a:not([class]) {
    color: var(--mk-primary);
    text-decoration-color: var(--mk-primary-100);
}

body.mk a:not([class]):hover {
    color: var(--mk-primary-700);
}

/* ── Buttons: pills, sentence case ───────────────────────── */

body.mk .sf-btn {
    font-family: var(--sf-font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: 9999px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.mk .sf-btn-sm {
    padding: 10px 20px;
    font-size: .9rem;
}

body.mk .sf-btn-primary {
    background: var(--mk-primary);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(25, 100, 105, .7);
}

body.mk .sf-btn-primary:hover {
    background: var(--mk-primary-700);
    color: #fff;
    transform: translateY(-1px);
}

body.mk .sf-btn-dark {
    background: var(--mk-primary-900);
    color: #fff;
}

body.mk .sf-btn-dark:hover {
    background: var(--mk-primary-700);
    color: #fff;
}

body.mk .sf-btn-ghost {
    background: #fff;
    color: var(--mk-primary-700);
    border: 2px solid var(--mk-primary-100);
}

body.mk .sf-btn-ghost:hover {
    border-color: var(--mk-primary);
    color: var(--mk-primary-700);
    background: var(--mk-primary-50);
}

body.mk .sf-btn-accent {
    background: var(--mk-accent);
    color: var(--mk-gray-900);
}

body.mk .sf-btn-accent:hover {
    background: #E48D2B;
    color: var(--mk-gray-900);
}

body.mk .sf-btn:focus-visible {
    outline: 3px solid var(--mk-accent);
    outline-offset: 2px;
}

/* ── Navbar ──────────────────────────────────────────────── */

.mk-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mk-gray-100);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.mk-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 1rem;
}

.mk-nav-brand img {
    height: 34px;
    width: auto;
    display: block;
}

.mk-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.mk-nav-links a {
    font-family: var(--sf-font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--mk-gray-900);
    text-decoration: none;
}

.mk-nav-links a:hover,
.mk-nav-links a.is-active {
    color: var(--mk-primary);
}

.mk-nav-cta {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.mk-nav-login {
    font-family: var(--sf-font-display);
    font-weight: 600;
    color: var(--mk-gray-900);
    text-decoration: none;
}

.mk-nav-login:hover {
    color: var(--mk-primary);
    text-decoration: none;
}

.mk-nav-toggle {
    background: none;
    border: 0;
    font-size: 1.3rem;
    color: var(--mk-gray-900);
    padding: .25rem .5rem;
}

.mk-nav-mobile {
    display: flex;
    flex-direction: column;
    padding: .5rem 1rem 1rem;
    border-top: 1px solid var(--mk-gray-100);
    background: #fff;
}

.mk-nav-mobile a {
    padding: .75rem .5rem;
    font-family: var(--sf-font-display);
    font-weight: 600;
    color: var(--mk-gray-900);
    text-decoration: none;
    border-radius: 8px;
}

.mk-nav-mobile a:hover {
    background: var(--mk-primary-50);
    color: var(--mk-primary);
}

/* ── Footer ──────────────────────────────────────────────── */

.mk-footer {
    background: var(--mk-gray-900);
    color: var(--mk-gray-300);
    padding: 4rem 0 2rem;
}

.mk-footer-logo {
    height: 36px;
    margin-bottom: 1rem;
}

.mk-footer-copy {
    font-size: .92rem;
    line-height: 1.7;
    max-width: 340px;
    color: #9CA3AF;
}

.mk-footer-head {
    font-family: var(--sf-font-display);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.mk-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mk-footer-links li {
    margin-bottom: .6rem;
    font-size: .9rem;
}

body.mk .mk-footer-links a {
    color: var(--mk-gray-300);
    text-decoration: none;
}

body.mk .mk-footer-links a:hover {
    color: #7FB8BC;
}

.mk-footer-bar {
    border-top: 1px solid #1F2937;
    margin-top: 3rem;
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
    color: #9CA3AF;
}

/* ── Sections ────────────────────────────────────────────── */

.mk-section {
    padding: 6rem 0;
    background: #fff;
}

.mk-section-alt {
    background: var(--mk-gray-50);
}

.mk-head {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.mk-eyebrow {
    display: inline-block;
    font-family: var(--sf-font-display);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mk-primary);
    margin-bottom: .75rem;
}

.mk-title {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    line-height: 1.12;
    margin-bottom: 1rem;
}

.mk-sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--mk-gray-600);
    margin: 0;
}

/* Hero */

.mk-hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 5rem;
    background: radial-gradient(1200px 500px at 85% -10%, var(--mk-primary-50), transparent 60%), radial-gradient(700px 400px at -10% 110%, var(--mk-accent-50), transparent 60%), #fff;
}

.mk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 9999px;
    background: var(--mk-primary-50);
    color: var(--mk-primary-700);
    font-family: var(--sf-font-display);
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 1.5rem;
}

.mk-hero-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mk-accent);
}

.mk-hero-title {
    font-size: clamp(2.6rem, 6.5vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    margin-bottom: 1.25rem;
}

.mk-hero-title .em {
    color: var(--mk-primary);
}

.mk-hero-lead {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--mk-gray-600);
    max-width: 620px;
    margin-bottom: 2rem;
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.mk-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .92rem;
    color: var(--mk-gray-600);
}

.mk-trust i {
    color: var(--mk-primary);
    margin-right: .4rem;
}

/* The product preview beside the hero copy. */

.mk-preview {
    background: #fff;
    border: 1px solid var(--mk-gray-100);
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(13, 52, 55, .35);
    overflow: hidden;
}

.mk-preview-bar {
    display: flex;
    gap: 6px;
    padding: .8rem 1rem;
    background: var(--mk-gray-50);
    border-bottom: 1px solid var(--mk-gray-100);
}

.mk-preview-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mk-gray-300);
}

.mk-preview-body {
    padding: 1.25rem;
}

.mk-preview-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.mk-preview-tile {
    border: 1px solid var(--mk-gray-100);
    border-radius: 14px;
    padding: .75rem;
}

.mk-preview-tile small {
    display: block;
    color: var(--mk-gray-600);
    font-size: .7rem;
}

.mk-preview-tile strong {
    font-family: var(--sf-font-display);
    font-size: 1.1rem;
}

.mk-preview-day {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .6rem 0;
    border-top: 1px solid var(--mk-gray-100);
    font-size: .85rem;
}

.mk-preview-day b {
    flex: none;
    display: inline-block;
    min-width: 52px;
    text-align: center;
    padding: .2rem .5rem;
    border-radius: 9999px;
    background: var(--mk-primary);
    color: #fff;
    font-size: .72rem;
}

.mk-preview-day span {
    color: var(--mk-gray-600);
    display: block;
    font-size: .78rem;
}

/* Replace three tools with one */

.mk-compare {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.mk-compare-item {
    border: 1px solid var(--mk-gray-100);
    border-radius: 20px;
    padding: 1.5rem;
    background: #fff;
}

.mk-compare-item h3 {
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

.mk-compare-item p {
    margin: 0;
    color: var(--mk-gray-600);
    font-size: .92rem;
}

.mk-compare-item i {
    font-size: 1.2rem;
    color: var(--mk-gray-300);
    margin-bottom: .75rem;
    display: block;
}

.mk-compare-item.is-us {
    background: var(--mk-primary);
    border-color: var(--mk-primary);
}

.mk-compare-item.is-us h3,
.mk-compare-item.is-us p,
.mk-compare-item.is-us i {
    color: #fff;
}

/* Feature cards */

.mk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mk-card {
    background: #fff;
    border: 1px solid var(--mk-gray-100);
    border-radius: 20px;
    padding: 2rem;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.mk-card:hover {
    box-shadow: 0 20px 40px -24px rgba(13, 52, 55, .35);
    transform: translateY(-3px);
    border-color: var(--mk-primary-100);
}

.mk-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--mk-primary-50);
    color: var(--mk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.mk-card-icon.is-accent {
    background: var(--mk-accent-50);
    color: var(--mk-accent-text);
}

.mk-card h3 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.mk-card p {
    color: var(--mk-gray-600);
    line-height: 1.65;
    margin-bottom: 1rem;
    font-size: .95rem;
}

body.mk .mk-card-link {
    font-family: var(--sf-font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--mk-primary);
    text-decoration: none;
}

body.mk .mk-card-link:hover {
    color: var(--mk-primary-700);
}

/* Steps */

.mk-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mk-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--mk-gray-100);
    border-radius: 20px;
    padding: 1.5rem;
}

.mk-step-num {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--mk-accent);
    color: var(--mk-gray-900);
    font-family: var(--sf-font-display);
    font-weight: 800;
    margin-bottom: 1rem;
}

.mk-step h3 {
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

.mk-step p {
    margin: 0;
    color: var(--mk-gray-600);
    font-size: .9rem;
    line-height: 1.6;
}

/* FAQ */

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

.mk-faq-item {
    border: 1px solid var(--mk-gray-100);
    border-radius: 16px;
    background: #fff;
    margin-bottom: .75rem;
}

.mk-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: none;
    border: 0;
    padding: 1.25rem 1.5rem;
    font-family: var(--sf-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--mk-gray-900);
}

.mk-faq-q i {
    color: var(--mk-primary);
    transition: transform .2s ease;
}

.mk-faq-q[aria-expanded="true"] i {
    transform: rotate(45deg);
}

.mk-faq-a {
    padding: 0 1.5rem 1.25rem;
    margin: 0;
    color: var(--mk-gray-600);
    line-height: 1.7;
}

/* The closing call to action */

.mk-cta {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--mk-primary-900), var(--mk-primary) 120%);
    color: #fff;
    text-align: center;
}

.mk-cta .mk-eyebrow {
    color: var(--mk-accent);
}

.mk-cta h2 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom: 1rem;
}

.mk-cta p {
    color: rgba(255, 255, 255, .8);
    font-size: 1.15rem;
    max-width: 620px;
    margin: 0 auto 2rem;
}

.mk-cta .mk-hero-actions {
    justify-content: center;
    margin-bottom: 1.25rem;
}

.mk-cta small {
    color: rgba(255, 255, 255, .7);
}

body.mk .mk-cta .sf-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

body.mk .mk-cta .sf-btn-ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
}

/* ── The existing page primitives, re-themed ─────────────── */

/* Interior heroes (features, about, contact, legal, pricing). */

body.mk .sf-page-hero,
body.mk .pl-hero,
body.mk .ct-hero {
    background: radial-gradient(1000px 400px at 90% -20%, var(--mk-primary-50), transparent 60%), #fff;
    border-bottom: 1px solid var(--mk-gray-100);
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
}

body.mk .sf-page-hero h1,
body.mk .pl-hero-title,
body.mk .ct-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

body.mk .sf-chip {
    background: var(--mk-primary-50);
    color: var(--mk-primary-700);
    border: 0;
    border-radius: 9999px;
    font-weight: 600;
}

body.mk .sf-chip i {
    color: var(--mk-primary) !important;
}

body.mk .sp-section,
body.mk .pl-section {
    padding: 5rem 0;
    background: #fff;
}

body.mk .sp-section-alt,
body.mk .pl-section-alt {
    background: var(--mk-gray-50);
}

body.mk .sp-eyebrow,
body.mk .pl-eyebrow,
body.mk .ct-eyebrow {
    color: var(--mk-primary);
    font-family: var(--sf-font-display);
    font-weight: 700;
    letter-spacing: .12em;
}

body.mk .sp-eyebrow-mark,
body.mk .pl-eyebrow-mark,
body.mk .ct-eyebrow-mark {
    background: var(--mk-accent);
}

body.mk .sp-title,
body.mk .pl-title {
    font-weight: 800;
    letter-spacing: -.02em;
}

body.mk .sp-card,
body.mk .sp-feature,
body.mk .pl-include-item,
body.mk .ct-form-card,
body.mk .sf-panel {
    background: #fff;
    border: 1px solid var(--mk-gray-100);
    border-radius: 20px;
    box-shadow: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

body.mk .sp-feature:hover,
body.mk .sp-card:hover {
    box-shadow: 0 20px 40px -24px rgba(13, 52, 55, .35);
    transform: translateY(-3px);
}

body.mk .sp-feature-icon,
body.mk .pl-include-icon,
body.mk .sf-icon-tile {
    background: var(--mk-primary-50);
    color: var(--mk-primary);
    border-radius: 14px;
}

body.mk .sf-icon-tile-accent {
    background: var(--mk-accent-50);
    color: var(--mk-accent-text);
}

body.mk .sp-feature-tag {
    background: var(--mk-accent-50);
    color: var(--mk-accent-text);
    border-radius: 9999px;
}

body.mk .sp-group-title {
    font-weight: 800;
}

/* Pricing cards */

body.mk .pl-card {
    border: 1px solid var(--mk-gray-100);
    border-radius: 24px;
    box-shadow: none;
}

body.mk .pl-card.is-featured {
    border: 2px solid var(--mk-primary);
    box-shadow: 0 30px 60px -30px rgba(13, 52, 55, .45);
}

body.mk .pl-ribbon {
    background: var(--mk-accent);
    color: var(--mk-gray-900);
    border-radius: 9999px;
}

body.mk .pl-switch {
    border-radius: 9999px;
    background: var(--mk-gray-100);
}

body.mk .pl-switch button {
    border-radius: 9999px;
}

body.mk .pl-switch button.is-active {
    background: var(--mk-primary);
    color: #fff;
}

body.mk .pl-list i {
    color: var(--mk-primary);
}

body.mk .pl-faq-item,
body.mk .sp-faq-item {
    border-radius: 16px;
}

/* Closing bands */

body.mk .sp-closing,
body.mk .pl-closing,
body.mk .sp-band {
    background: linear-gradient(135deg, var(--mk-primary-900), var(--mk-primary) 120%);
    color: #fff;
}

body.mk .sp-closing :where(h2,
    h3),
body.mk .pl-closing :where(h2,
    h3),
body.mk .sp-band :where(h2,
    h3) {
    color: #fff;
}

body.mk .sp-closing p,
body.mk .pl-closing p,
body.mk .sp-closing .sp-step-copy {
    color: rgba(255, 255, 255, .8);
}

body.mk .sp-closing .sp-eyebrow {
    color: var(--mk-accent);
}

body.mk .sp-closing .sp-step-num {
    background: var(--mk-accent);
    color: var(--mk-gray-900);
}

body.mk .sp-closing .sf-btn-ghost,
body.mk .pl-closing .sf-btn-ghost-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .35);
    color: #fff;
}

/* Forms on the contact page */

body.mk .form-control,
body.mk .ct-field input,
body.mk .ct-field textarea,
body.mk .ct-field select {
    border-radius: 12px;
}

body.mk .form-control:focus {
    border-color: var(--mk-primary);
    box-shadow: 0 0 0 3px rgba(25, 100, 105, .15);
}

/* ── Small screens ───────────────────────────────────────── */

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

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

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

    .mk-hero {
        padding: 4rem 0 3.5rem;
    }
}

@media (max-width: 575.98px) {

    .mk-cards,
    .mk-compare,
    .mk-steps {
        grid-template-columns: 1fr;
    }

    .mk-section,
    .mk-cta {
        padding: 4rem 0;
    }

    .mk-preview-tiles {
        grid-template-columns: 1fr 1fr;
    }

    body.mk .sf-btn {
        width: 100%;
    }

    .mk-nav-cta .sf-btn {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mk-card,
    body.mk .sf-btn,
    body.mk .sp-feature {
        transition: none;
    }

    .mk-card:hover,
    body.mk .sp-feature:hover,
    body.mk .sf-btn-primary:hover {
        transform: none;
    }
}