/* ════════════════════════════════════════════════════════════════════════
   QRtracts Marketing Site — public pages (home, about, solutions, contact)
   ────────────────────────────────────────────────────────────────────────
   Token system mirrors Plugins/qrt-dashboard/css/dashboard.css so the
   marketing site visually inherits the SaaS chrome (indigo accent, white
   surfaces, 20px radius). Marketing-only additions live in the `--qrm-`
   namespace; everything else proxies to the dashboard `--qrt-` tokens
   when this stylesheet is loaded standalone (no Divi in scope).
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* mirror dashboard tokens so swap-once-touch-all still holds */
    --qrt-accent:           #6366f1;
    --qrt-accent-hover:     #4f46e5;
    --qrt-accent-soft:      rgba(99,102,241,0.10);
    --qrt-primary:          #4f46e5;
    --qrt-primary-hover:    #4338ca;
    --qrt-text-primary:     #111827;
    --qrt-text-secondary:   #4b5563;
    --qrt-text-muted:       #747b85;
    --qrt-text-muted2:      #64748b;
    --qrt-card-border:      #e5e7eb;
    --qrt-card-shadow:      0 1px 3px rgba(0,0,0,0.04);
    --qrt-card-shadow-hover:0 8px 24px rgba(17,24,39,0.08);
    --qrt-radius:           20px;
    --qrt-radius-sm:        10px;
    --qrt-radius-lg:        14px;
    --qrt-font:             "Open Sans", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

    /* marketing-specific */
    --qrm-surface:          #ffffff;
    --qrm-tint:             #f5f6fb;
    --qrm-dark:             #0f172a;
    --qrm-dark-soft:        #1e293b;
    --qrm-border-strong:    #d1d5db;
}

/* ─── reset / base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.qrt-mkt {
    margin: 0;
    font-family: var(--qrt-font);
    color: var(--qrt-text-primary);
    background: var(--qrm-surface);
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
body.qrt-mkt a { color: var(--qrt-accent); text-decoration: none; }
body.qrt-mkt a:hover { color: var(--qrt-accent-hover); }
body.qrt-mkt img, body.qrt-mkt svg { max-width: 100%; height: auto; display: block; }

/* Smooth scroll for in-page anchor links (e.g. href="#pricing").
   Browsers honor scroll-behavior set on the root element for every
   anchor jump + JS scrollTo({behavior:'smooth'}) call.
   prefers-reduced-motion disables it for users who get motion sick. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Screen-reader-only utility — visually hidden but still readable
   by assistive tech. Used by the newsletter form's email label. */
.qrt-mkt-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Signup card — borrows .qrt-mkt-signup-card chrome from the main
   signup section. The width modifier centers + caps it at a comfy
   reading width since this form is name+name+email (smaller than the
   main signup form). */
.qrm-newsletter-card {
    max-width: 620px;
    margin: 0 auto;
}
.qrm-newsletter-form {
    display: flex; flex-direction: column;
    gap: 14px;
}
.qrm-newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.qrm-newsletter-field {
    display: flex; flex-direction: column;
    gap: 5px;
    min-width: 0; /* prevents grid blowout on small screens */
}
.qrm-newsletter-field--full { grid-column: 1 / -1; }
.qrm-newsletter-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--qrt-text-secondary);
    letter-spacing: 0.02em;
}
.qrm-newsletter-input {
    width: 100%;
    padding: 12px 14px !important;
    border: 1px solid var(--qrt-card-border) !important;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    background: #fff;
    color: var(--qrt-text-primary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qrm-newsletter-input:focus {
    outline: 0;
    border-color: var(--qrt-accent) !important;
    box-shadow: 0 0 0 3px var(--qrt-accent-soft);
}
.qrm-newsletter-submit {
    align-self: stretch;
    margin-top: 2px;
}
.qrm-newsletter-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
/* Honeypot — visually hidden but reachable by bots. position:absolute
   instead of display:none so headless bots that filter on visibility
   still fill it. */
.qrm-newsletter-hp {
    position: absolute !important;
    left: -9999px;
    top: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    tab-index: -1;
}
.qrm-newsletter-status {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: center;
}
/* Collapse the status paragraph entirely until JS populates it with a
   message — otherwise the empty <p> reserves a chin under the submit
   button. The trade-off is a single-line layout shift the moment a
   message appears, which feels intentional (it's a status reveal). */
.qrm-newsletter-status:empty { display: none; }
.qrm-newsletter-status.is-success { color: #15803d; font-weight: 600; }
.qrm-newsletter-status.is-error   { color: #b91c1c; font-weight: 600; }

@media (max-width: 720px) {
    .qrm-newsletter-grid { grid-template-columns: 1fr; }
}

/* ─── "This week's challenge" tease card (home newsletter section) ─
   Clickable card that previews the current challenge under the
   section-sub. Links to /challenge for the full read + submit form. */
.qrm-challenge-tease {
    display: block;
    max-width: 620px;
    margin: 8px auto 28px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: 14px;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.qrm-challenge-tease:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    border-color: var(--qrt-accent);
}
.qrm-challenge-tease-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.qrm-challenge-tease-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--qrt-accent);
}
.qrm-challenge-tease-text {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--qrt-text-primary);
}
.qrm-challenge-tease-cta {
    font-size: 13px;
    font-weight: 700;
    color: var(--qrt-accent);
    letter-spacing: 0.01em;
}

/* ─── Difficulty pills — KEEP IN SYNC with challenge.css ──────────
   These same selectors live in Plugins/qrt-marketing/assets/challenge.css
   for the /challenge page. We duplicate the minimal pill rules here so
   the home page's "this week's challenge" tease + any other marketing
   surface can render a pill without enqueuing challenge.css globally. */
.qrt-chal-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
}
.qrt-chal-pill--easy {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.qrt-chal-pill--medium {
    background: #fef9c3;
    color: #a16207;
    border: 1px solid #fde68a;
}
.qrt-chal-pill--hard {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Heading color reset — Divi's actual winning selector turned out to
   be more specific than a bare h1, so we double-prefix here:
   `html body h1` = (0,0,3) which beats any single-element-chain rule
   Divi ships, while staying lower than any class-scoped marketing
   override like `.qrt-mkt-cta-inner h2` (0,1,1) so dark sections keep
   their custom colors without needing !important on this rule. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    color: var(--qrt-text-primary);
}

.qrt-mkt-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ─── typography ───────────────────────────────────────────────────────── */

.qrt-mkt-h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.05; font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.qrt-mkt-h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15; font-weight: 700; letter-spacing: -0.015em;
    margin: 0 0 12px;
}
.qrt-mkt-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--qrt-text-secondary); line-height: 1.65;
    max-width: 640px; margin: 0 0 24px;
}
.qrt-mkt-eyebrow {
    display: inline-block;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qrt-accent);
    background: var(--qrt-accent-soft);
    padding: 6px 12px; border-radius: 999px;
    margin-bottom: 16px;
}

/* ─── topbar ───────────────────────────────────────────────────────────── */

.qrt-mkt-topbar {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--qrt-card-border);
}
/* Horizontal-overflow guard lives on <main>, NOT on body/html. The
   topbar is a SIBLING of <main> (not a descendant), so clipping main's
   overflow can't affect the topbar's position:sticky — which is exactly
   why putting overflow on body broke it. This contains any too-wide page
   content (e.g. the fixed-width reCAPTCHA box) without touching the nav. */
.qrt-mkt-main { overflow-x: clip; }
.qrt-mkt-topbar-inner {
    display: flex; align-items: center; gap: 32px;
    min-height: 70px;
}
.qrt-mkt-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; color: var(--qrt-text-primary);
    font-size: 1.15rem; letter-spacing: -0.01em;
}
.qrt-mkt-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--qrt-accent), #818cf8);
    color: #fff; font-weight: 800; font-size: 0.85rem; letter-spacing: -0.02em;
}
.qrt-mkt-brand-large .qrt-mkt-brand-mark { width: 44px; height: 44px; font-size: 1.05rem; }

/* Logo image (replaces the QR-box + text lockup). Header ~30px tall,
   footer ~38px. `.qrt-mkt-brand-img-light` force-inverts the logo to
   pure white for the dark footer. */
.qrt-mkt-brand-img {
    width: 130px; display: block;
}
.qrt-mkt-brand-img-light {
    filter: brightness(0) invert(1);
}
.qrt-mkt-nav { display: flex; gap: 28px; flex: 1; }
.qrt-mkt-nav-link {
    color: var(--qrt-text-secondary) !important; font-weight: 500;
    padding: 8px 0; position: relative;
    transition: color 0.15s ease;
}
.qrt-mkt-nav-link:hover, .qrt-mkt-nav-link.is-active { color: var(--qrt-text-primary) !important; }
.qrt-mkt-nav-link.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--qrt-accent); border-radius: 2px;
}

/* ─── nav dropdown (Explore ▾) ─────────────────────────────────────
   A nav group acts like a flat link until clicked — same color,
   underline-on-active treatment, and font weight. The chevron rotates
   when the panel is open; the panel itself is an absolutely-positioned
   card with a soft shadow. Click-only (no hover-open) — keeps touch
   devices and keyboard navigation predictable, avoids hover-out errors.

   The panel is left-aligned with the trigger by default. JS handles
   open/close + outside-click + Escape via a tiny inline IIFE at the
   bottom of marketing.js (added in the same patch).
   ────────────────────────────────────────────────────────────────── */
.qrt-mkt-nav-group { position: relative; display: inline-flex; }
.qrt-mkt-nav-group-trigger {
    /* Override default <button> chrome so the trigger inherits all of
       the .qrt-mkt-nav-link rules (color, weight, underline) cleanly. */
    appearance: none; background: transparent; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; line-height: inherit;
    font-family: inherit;
}
.qrt-mkt-nav-chev {
    flex-shrink: 0;
    transition: transform 0.18s ease;
    margin-top: 1px;
}
.qrt-mkt-nav-group.is-open .qrt-mkt-nav-chev { transform: rotate(180deg); }
.qrt-mkt-nav-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: -12px;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--qrt-card-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
    padding: 6px;
    z-index: 70;
    /* Subtle entry animation when the panel reveals. */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.qrt-mkt-nav-group.is-open .qrt-mkt-nav-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* When [hidden] is set programmatically (initial render + after close),
   the panel is removed from the layout tree entirely. JS removes the
   attribute on open so the transition kicks in. */
.qrt-mkt-nav-panel[hidden] { display: none; }
.qrt-mkt-nav-panel-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--qrt-text-primary) !important;
    text-decoration: none;
    transition: background 0.12s ease;
}
.qrt-mkt-nav-panel-item:hover,
.qrt-mkt-nav-panel-item:focus-visible {
    background: var(--qrt-accent-soft);
    outline: 0;
}
.qrt-mkt-nav-panel-item.is-active {
    background: var(--qrt-accent-soft);
}
.qrt-mkt-nav-panel-item.is-active .qrt-mkt-nav-panel-label {
    color: var(--qrt-accent);
}
.qrt-mkt-nav-panel-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--qrt-text-primary);
    line-height: 1.3;
}
.qrt-mkt-nav-panel-desc {
    font-size: 12px;
    color: var(--qrt-text-secondary, #64748b);
    line-height: 1.4;
}

.qrt-mkt-topbar-cta { display: flex; align-items: center; gap: 16px; }
.qrt-mkt-burger {
    display: none; background: none; border: 0; padding: 8px;
    width: 40px; height: 40px; cursor: pointer;
}
.qrt-mkt-burger span {
    display: block; width: 22px; height: 2px; background: var(--qrt-text-primary);
    margin: 5px auto; border-radius: 2px; transition: transform 0.2s, opacity 0.2s;
}
.qrt-mkt-mobile-nav { display: none; }

/* ─── buttons ──────────────────────────────────────────────────────────── */

.qrt-mkt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 12px;
    font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em;
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1; white-space: nowrap;
    margin-top: 10px;
}
.qrt-mkt-btn-primary {
    background: var(--qrt-primary); color: #fff !important;
}
.qrt-mkt-btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}
.qrt-mkt-btn-ghost {
    background: transparent; color: var(--qrt-text-primary);
    border-color: var(--qrm-border-strong);
}
.qrt-mkt-btn-ghost:hover { background: var(--qrm-tint); color: var(--qrt-text-primary); }
.qrt-mkt-btn-light {
    background: #fff; color: var(--qrm-dark);
}
.qrt-mkt-btn-light:hover { background: #f3f4f6; color: var(--qrm-dark); transform: translateY(-1px); }
.qrt-mkt-btn-lg { padding: 16px 32px; font-size: 1.05rem; border-radius: 14px; }
.qrt-mkt-btn-block { width: 100%; }
.qrt-mkt-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.qrt-mkt-btn-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: qrm-spin 0.8s linear infinite;
}
@keyframes qrm-spin { to { transform: rotate(360deg); } }

/* ─── hero ─────────────────────────────────────────────────────────────── */

.qrt-mkt-hero {
    position: relative;
    padding: 80px 0 60px;
    background: radial-gradient(ellipse at top left, rgba(99,102,241,0.08), transparent 60%),
                radial-gradient(ellipse at top right, rgba(129,140,248,0.06), transparent 50%),
                var(--qrm-surface);
    overflow: hidden;
}
.qrt-mkt-hero-grid {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.qrt-mkt-hero-bullets {
    list-style: none; padding: 0; margin: 24px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
}
.qrt-mkt-hero-bullets li {
    display: flex; align-items: center; gap: 10px;
    color: var(--qrt-text-secondary); font-size: 0.98rem;
}
.qrt-mkt-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--qrt-accent-soft); color: var(--qrt-accent);
    font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}

/* ─── signup card ──────────────────────────────────────────────────────── */

.qrt-mkt-signup-card {
    background: var(--qrm-surface);
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 32px;
    box-shadow: var(--qrt-card-shadow-hover);
    position: relative;
}
.qrt-mkt-signup-title {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em;
    margin: 0 0 6px; color: var(--qrt-text-primary);
}
.qrt-mkt-signup-sub { color: var(--qrt-text-muted); margin: 0 0 22px; font-size: 0.92rem; }

/* `display: grid` defeats the browser's default [hidden] { display: none }
   rule. Re-assert it so marketing.js can hide the account-type toggle when
   a plan is preselected from solutions.php (account_type is auto-applied
   from the plan in that case). */
.qrt-mkt-toggle[hidden] { display: none; }
.qrt-mkt-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--qrm-tint); border-radius: 10px; padding: 4px;
    margin-bottom: 20px;
}
.qrt-mkt-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.qrt-mkt-toggle label {
    text-align: center; padding: 10px; border-radius: 8px;
    font-weight: 600; font-size: 0.92rem; cursor: pointer;
    color: var(--qrt-text-secondary); transition: all 0.15s;
}
.qrt-mkt-toggle input:checked + label {
    background: #fff; color: var(--qrt-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.qrt-mkt-field { margin-bottom: 16px; }
.qrt-mkt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qrt-mkt-field label {
    display: block; font-size: 0.85rem; font-weight: 600;
    color: var(--qrt-text-primary); margin-bottom: 6px;
}
.qrt-mkt-hint { color: var(--qrt-text-muted); font-weight: 400; font-size: 0.78rem; margin-left: 4px; }
.qrt-mkt-field input, .qrt-mkt-field select, .qrt-mkt-field textarea,
.qrt-mkt-contact-form input, .qrt-mkt-contact-form select, .qrt-mkt-contact-form textarea {
    width: 100%; padding: 11px 14px !important;
    border: 1px solid var(--qrt-card-border) !important; border-radius: 10px;
    font-family: inherit; font-size: 0.95rem; color: var(--qrt-text-primary);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qrt-mkt-field input:focus, .qrt-mkt-field select:focus, .qrt-mkt-field textarea:focus,
.qrt-mkt-contact-form input:focus, .qrt-mkt-contact-form select:focus, .qrt-mkt-contact-form textarea:focus {
    outline: 0; border-color: var(--qrt-accent) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
}
.qrt-mkt-field.has-error input { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); border-color: #ef4444 !important; }
.qrt-mkt-field-error { color: #ef4444; font-size: 0.8rem; margin-top: 6px; }

.qrt-mkt-slug-input { display: flex; align-items: stretch; }
.qrt-mkt-slug-input input {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0;
}
.qrt-mkt-slug-suffix {
    display: inline-flex; align-items: center; padding: 0 14px;
    background: var(--qrm-tint); border: 1px solid var(--qrt-card-border);
    border-left: 0;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
    color: var(--qrt-text-muted); font-size: 0.92rem;
}
.qrt-mkt-slug-preview {
    margin-top: 8px; padding: 8px 12px; background: var(--qrt-accent-soft);
    border-radius: 8px; font-size: 0.85rem; color: var(--qrt-text-secondary);
}
.qrt-mkt-slug-preview strong { color: var(--qrt-accent-hover); }

.qrt-mkt-fineprint {
    font-size: 0.78rem; color: var(--qrt-text-muted);
    text-align: center; margin: 12px 0 0;
}
.qrt-mkt-form-message {
    margin-top: 14px; padding: 12px 14px;
    border-radius: 10px; font-size: 0.9rem;
}
.qrt-mkt-form-message.is-error { background: #fef2f2; color: #b91c1c; }
.qrt-mkt-form-message.is-success { background: #ecfdf5; color: #065f46; }

/* ─── agreement checkboxes ──────────────────────────────────────────────── */
.qrt-mkt-agree {
    display: flex; flex-direction: column; gap: 10px;
    margin: 18px 0 24px;
}
.qrt-mkt-agree-row {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.85rem; line-height: 1.45;
    color: var(--qrt-text-secondary);
    cursor: pointer;
}
.qrt-mkt-agree-row input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0;
    margin: 1px 0 0; cursor: pointer;
    accent-color: var(--qrt-accent);
}
.qrt-mkt-agree-row a { color: var(--qrt-accent); font-weight: 600; text-decoration: underline; }
.qrt-mkt-agree-row a:hover { color: var(--qrt-accent-hover); }
/* Error state — applied to the row when an agreement is left unchecked. */
.qrt-mkt-agree-row.has-error { color: #b91c1c; }
.qrt-mkt-agree-row.has-error input[type="checkbox"] {
    outline: 2px solid #ef4444; outline-offset: 1px; border-radius: 3px;
}

/* ─── terms modals (doctrinal / general) ───────────────────────────────────
   Sit ABOVE the signup modal (z-index 9999) so terms can be read on top of
   the signup popup. Scrollable body for long legal content. */
.qrt-mkt-terms-modal {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.qrt-mkt-terms-modal[hidden] { display: none; }
.qrt-mkt-terms-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
}
.qrt-mkt-terms-card {
    position: relative;
    width: 100%; max-width: 720px; max-height: 86vh;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--qrt-radius);
    box-shadow: 0 40px 80px -20px rgba(17,24,39,0.45);
    overflow: hidden;
}
.qrt-mkt-terms-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--qrt-card-border);
    flex-shrink: 0;
}
.qrt-mkt-terms-title {
    font-size: 1.25rem; font-weight: 700; margin: 0;
    color: var(--qrt-text-primary); letter-spacing: -0.01em;
}
.qrt-mkt-terms-close {
    background: none; border: 0; padding: 6px; cursor: pointer;
    color: var(--qrt-text-muted); border-radius: 8px;
    display: inline-flex; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.qrt-mkt-terms-close:hover { background: var(--qrm-tint); color: var(--qrt-text-primary); }
.qrt-mkt-terms-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Legal content typography (shared by both modal bodies). */
.qrt-mkt-legal { font-size: 0.92rem; line-height: 1.65; color: var(--qrt-text-secondary); }
.qrt-mkt-legal h3 {
    font-size: 1.02rem; font-weight: 700; color: var(--qrt-text-primary);
    margin: 22px 0 8px; letter-spacing: -0.01em;
}
.qrt-mkt-legal h4 {
    font-size: 0.92rem; font-weight: 700; color: var(--qrt-text-primary);
    margin: 16px 0 6px;
}
.qrt-mkt-legal p { margin: 0 0 12px; }
.qrt-mkt-legal ol, .qrt-mkt-legal ul { margin: 0 0 30px; padding-left: 50px; list-style: auto; }
.qrt-mkt-legal li { margin: 0 0 6px; }
.qrt-mkt-legal a { color: var(--qrt-accent); text-decoration: underline; }
.qrt-mkt-legal strong { color: var(--qrt-text-primary); }
.qrt-mkt-legal-effective {
    font-size: 0.82rem; color: var(--qrt-text-muted);
    padding-bottom: 12px; border-bottom: 1px solid var(--qrt-card-border); margin-bottom: 16px;
}
.qrt-mkt-legal-indent { padding-left: 14px; border-left: 2px solid var(--qrt-card-border); margin: 0 0 12px; }

/* ─── sections ─────────────────────────────────────────────────────────── */

.qrt-mkt-section { padding: 80px 0; }
.qrt-mkt-section-tinted { background: var(--qrm-tint); }
.qrt-mkt-section-dark   { background: var(--qrm-dark); color: #e2e8f0; }
.qrt-mkt-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.qrt-mkt-section-head .qrt-mkt-lead { margin: 0 auto; }
.qrt-mkt-section-sub { color: var(--qrt-text-secondary); max-width: 600px; margin: 0 auto; }

.qrt-mkt-eyebrow-light { color: #c7d2fe; background: rgba(199,210,254,0.12); }
.qrt-mkt-h2-light { color: #f8fafc; }
.qrt-mkt-lead-light { color: #cbd5e1; }

/* ─── trust strip ──────────────────────────────────────────────────────── */
.qrt-mkt-trust { padding: 28px 0; border-bottom: 1px solid var(--qrt-card-border); }
.qrt-mkt-trust-label {
    text-align: center; color: var(--qrt-text-muted);
    font-size: 0.85rem; letter-spacing: 0.05em; margin: 0;
    text-transform: uppercase; font-weight: 600;
}

/* ─── feature grid ─────────────────────────────────────────────────────── */

.qrt-mkt-feature-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.qrt-mkt-feature-grid-3 { grid-template-columns: repeat(3, 1fr); }
.qrt-mkt-feature-card {
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.qrt-mkt-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--qrt-card-shadow-hover);
}
.qrt-mkt-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--qrt-accent-soft); font-size: 1.5rem;
    margin-bottom: 16px;
}
/* When a real product image is dropped in (live site uses 4 PNG/WEBP
   illustrations rather than abstract icons), drop the indigo pill
   background and let the image breathe as a hero illustration. The
   :has() guard isolates this from the emoji-icon variant. */
.qrt-mkt-feature-icon:has(img) {
    width: auto; height: auto; padding: 0;
    background: transparent; border-radius: 0;
    margin-bottom: 20px;
    aspect-ratio: 1 / 1;
}
.qrt-mkt-feature-icon img {
    width: 100%; max-width: 160px; height: auto;
    object-fit: contain;
}
/* SVG variant — render as a 24px stroked icon in the indigo accent.
   Sits inside the default pill background (the :has(img) override above
   only matches <img>, not <svg>), so the indigo soft pill applies and
   the SVG fills with `color: var(--qrt-accent)` via stroke=currentColor. */
.qrt-mkt-feature-icon svg {
    width: 24px; height: 24px;
    color: var(--qrt-accent);
}

/* Marketplace CTA — primary button inside the section header, directly
   under `.qrt-mkt-section-sub`. The section-head is already centered,
   but `text-align: center` keeps this hook robust if the markup moves. */
.qrm-marketplace-cta {
    text-align: center;
    margin-top: 24px;
}
/* Small fineprint note that sits under a CTA button (reused — name is
   generic on purpose, this isn't marketplace-specific). */
.qrm-cta-note {
    color: var(--qrt-text-muted);
    font-size: 0.88rem;
    margin: 40px auto 0;
    max-width: 500px;
    line-height: 1.5;
    text-align: center;
}
.qrt-mkt-feature-card h3 { font-size: 1.1rem; margin: 0 0 8px; font-weight: 700; }
.qrt-mkt-feature-card p { color: var(--qrt-text-secondary); margin: 0; font-size: 0.95rem; }

/* ─── steps ────────────────────────────────────────────────────────────── */

.qrt-mkt-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.qrt-mkt-step {
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 32px;
    position: relative;
}
.qrt-mkt-step-num {
    display: inline-block;
    font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em;
    color: var(--qrt-accent);
    background: var(--qrt-accent-soft);
    padding: 6px 14px; border-radius: 999px;
    margin-bottom: 18px;
}
.qrt-mkt-step h3 { margin: 0 0 10px; font-size: 1.2rem; }
.qrt-mkt-step p { color: var(--qrt-text-secondary); margin: 0; }
.qrt-mkt-step code {
    background: var(--qrm-tint); padding: 1px 8px; border-radius: 6px;
    font-size: 0.88em; color: var(--qrt-accent-hover);
}

/* ─── two-up ───────────────────────────────────────────────────────────── */

.qrt-mkt-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.qrt-mkt-twoup-card {
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 36px;
}
.qrt-mkt-twoup-accent {
    background: linear-gradient(135deg, var(--qrt-accent), #818cf8);
    color: #fff; border: 0;
}
.qrt-mkt-twoup-accent .qrt-mkt-eyebrow { background: rgba(255,255,255,0.18); color: #fff; }
.qrt-mkt-twoup-accent h3 { color: #fff; }
.qrt-mkt-twoup-accent p { color: rgba(255,255,255,0.92) !important;}
.qrt-mkt-twoup-card h3 { font-size: 1.45rem; margin: 0 0 12px; font-weight: 700; line-height: 1.25em; }
.qrt-mkt-twoup-card p { color: var(--qrt-text-secondary); margin: 0 0 20px; }
.qrt-mkt-link-cta {
    font-weight: 600; color: var(--qrt-accent);
    transition: transform 0.15s ease-out;
    display: inline-block;
}
.qrt-mkt-twoup-accent .qrt-mkt-link-cta { color: #fff; }
.qrt-mkt-link-cta:hover { transform: translateX(3px); }

/* ─── checklist section (dark) ─────────────────────────────────────────── */

.qrt-mkt-checklist-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.qrt-mkt-checklist {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.qrt-mkt-checklist li {
    position: relative; padding-left: 32px;
    color: #e2e8f0; font-weight: 500;
}
.qrt-mkt-checklist li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(99,102,241,0.25); color: #c7d2fe;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
}

/* ─── testimonials ─────────────────────────────────────────────────────── */

.qrt-mkt-testimonial-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.qrt-mkt-testimonial {
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 28px; margin: 0;
}
.qrt-mkt-testimonial blockquote {
    margin: 0 0 18px;
    color: var(--qrt-text-primary);
    font-size: 1.02rem; line-height: 1.6;
    border-color: #f2b32e;
}
.qrt-mkt-testimonial figcaption { display: flex; flex-direction: column; gap: 2px; }
.qrt-mkt-testimonial-name { font-weight: 700; color: var(--qrt-text-primary); }
.qrt-mkt-testimonial-role { color: var(--qrt-text-muted); font-size: 0.88rem; }

/* ─── compare table ────────────────────────────────────────────────────── */

.qrt-mkt-compare {
    background: #fff; border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius); overflow: hidden;
    max-width: 880px; margin: 0 auto;
}
.qrt-mkt-compare-row {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr;
    padding: 16px 24px; border-bottom: 1px solid var(--qrt-card-border);
    align-items: center;
}
.qrt-mkt-compare-row:last-child { border-bottom: 0; }
.qrt-mkt-compare-head {
    background: #fafbfd; font-weight: 700;
    color: var(--qrt-text-primary);
}
.qrt-mkt-compare-label { font-weight: 600; color: var(--qrt-text-primary); }
.qrt-mkt-compare-row > div:not(.qrt-mkt-compare-label) { color: var(--qrt-text-secondary); }
.qrt-mkt-compare-win { color: var(--qrt-primary) !important; font-weight: 600; }

/* ─── Touch Points row — CSS-built dots/lines diagram ────────────────────
   Visualizes the engagement journey for Traditional tracts (ends at hand-out,
   fades into nothing) vs QRtracts (continues through scanned → read → saved
   → connected). Built entirely with flex + bordered divs — no SVG, no JS.
   The traditional row uses indigo accent + fade gradient; QRtracts uses
   indigo for the shared first two steps then green for the new steps to
   signal "this is where the digital advantage begins." */
.qrm-compare-touchpoints-row {
    padding: 22px 24px 14px;
    /* Override the compare rows' default `align-items: center` — top-align
       so both timelines start their first dot ("Make contact") at the same
       height instead of the shorter Traditional one floating to the middle. */
    align-items: start;
}
/* Traditional cell — diagram on the left (109px fixed) + muted "Unknown
   engagement" caption on the right. The caption picks up the muted-italic
   vocabulary already used for low-emphasis text on the site.
   NOTE: no `flex-wrap` here — the caption MUST stay beside the diagram.
   If the column is narrow the caption text wraps internally instead. */
.qrm-tp-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.qrm-tp-cell .qrm-touchpoints {
    flex: 0 0 109px;   /* don't grow, don't shrink — locked at 109px */
}
.qrm-tp-aside {
    flex: 1 1 0;
    min-width: 0;
    font-style: italic;
    color: var(--qrt-text-muted);
    font-size: 0.65rem;
    line-height: 1.35;
    margin-bottom: 28px;
    margin-left: 7px;
}
.qrm-touchpoints {
    display: flex; align-items: center; gap: 0;
    padding: 0 6px 28px;  /* bottom padding leaves room for the labels */
}
.qrm-tp-dot {
    position: relative; flex: 0 0 auto;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--qrt-accent);
}
.qrm-tp-dot span {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    font-size: 0.66rem; line-height: 1.15;
    color: var(--qrt-accent);
    text-align: center; white-space: nowrap;
    font-weight: 600;
}
.qrm-tp-dot-success { border-color: #10b981; }
.qrm-tp-dot-success span { color: #10b981; }
.qrm-tp-line {
    flex: 1 1 auto; height: 2px;
    background: var(--qrt-accent);
    align-self: center;
    min-width: 18px;
}
.qrm-tp-line-success { background: #10b981; }
/* Fade trail at the end of the Traditional row — visual punch for "the
   trail ends here, no further engagement". */
.qrm-tp-fade {
    flex: 1 1 auto; height: 2px;
    background: linear-gradient(to right, var(--qrt-accent), transparent);
    align-self: center;
    min-width: 24px;
}

/* ─── use cases ────────────────────────────────────────────────────────── */

.qrt-mkt-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qrt-mkt-usecase-card {
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.qrt-mkt-usecase-card:hover { transform: translateY(-3px); box-shadow: var(--qrt-card-shadow-hover); }
.qrt-mkt-usecase-icon { font-size: 2rem; margin-bottom: 14px; }
/* SVG variant — render the use-case icon as a 32px stroked glyph in
   the indigo accent, replacing the old emoji rendering. No pill
   background here (different vocabulary from .qrt-mkt-feature-icon —
   use-case cards intentionally have a bare-icon aesthetic). */
.qrt-mkt-usecase-icon svg {
    width: 32px; height: 32px;
    color: var(--qrt-accent);
    display: inline-block;
}
.qrt-mkt-usecase-card h3 { font-size: 1.15rem; margin: 0 0 8px; }
.qrt-mkt-usecase-card p { color: var(--qrt-text-secondary); margin: 0; font-size: 0.95rem; }

/* ─── faith grid ───────────────────────────────────────────────────────── */

.qrt-mkt-faith-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qrt-mkt-faith-card {
    background: #fff; border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius-lg); padding: 24px;
    /* Flex column so the scripture footer (margin-top: auto below) gets
       pushed to the bottom of every card regardless of how long the
       paragraph above is — all 6 citations line up across the grid. */
    display: flex; flex-direction: column;
}
.qrt-mkt-faith-card h4 {
    font-size: 1.05rem; margin: 0 0 6px; color: var(--qrt-accent);
    font-weight: 700;
}
.qrt-mkt-faith-card p { color: var(--qrt-text-secondary); margin: 0; font-size: 0.95rem; }
/* Scripture references attached to each belief card. Small uppercase
   indigo caption separated from the doctrinal statement by a thin top
   border. `margin-top: auto` pushes it to the bottom of the flex card,
   so refs align across the row even when paragraphs differ in length.
   The `padding-top: 14px` gives the divider some breathing room from
   the scripture text. */
.qrt-mkt-faith-scripture {
    margin-top: auto !important;
    padding-top: 14px;
    border-top: 1px solid var(--qrt-card-border);
    font-size: 0.75rem !important;
    font-weight: 700;
    color: var(--qrt-accent) !important;
}

/* ─── prose ────────────────────────────────────────────────────────────── */

.qrt-mkt-prose { max-width: 720px; margin: 0 auto; }
.qrt-mkt-prose p {
    font-size: 1.05rem; color: var(--qrt-text-secondary);
    line-height: 1.75; margin: 0 0 18px;
}
.qrt-mkt-prose p em { color: var(--qrt-text-primary); font-style: italic; }
/* Founder signature at the end of long-form prose. Italic name on its
   own visual line, muted role caption below. Spacing above creates a
   pause between the last paragraph and the sign-off. */
.qrt-mkt-prose-signature {
    margin: 32px 0 0 !important;
    font-style: italic;
    font-size: 1.15rem !important;
    color: var(--qrt-text-primary) !important;
    line-height: 1.4 !important;
}
.qrt-mkt-prose-signature span {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--qrt-accent);
}

/* ─── page header ──────────────────────────────────────────────────────── */

.qrt-mkt-pageheader {
    padding: 40px 0 48px;
    background: radial-gradient(ellipse at top, rgba(99,102,241,0.08), transparent 60%);
    text-align: center;
}
.qrt-mkt-pageheader .qrt-mkt-lead { margin: 0 auto 28px; }
.qrt-mkt-pageheader-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Intro video that sits inside the page header below the CTA buttons.
   Reuses .qrm-builder-video-frame as the visual frame; this class just
   adds the top spacing so it doesn't crash into the CTAs. */
.qrm-pageheader-video { margin: 48px auto 0; }

/* ─── contact ──────────────────────────────────────────────────────────── */

.qrt-mkt-contact-grid {
    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px;
}
.qrt-mkt-contact-side { display: flex; flex-direction: column; gap: 24px; }
.qrt-mkt-contact-block h4 {
    font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--qrt-accent); margin: 0 0 6px; font-weight: 700;
}
.qrt-mkt-contact-block a { font-size: 1.05rem; font-weight: 600; }
.qrt-mkt-contact-block p { color: var(--qrt-text-secondary); margin: 4px 0 0; }
/* Welcome block — warm, accented card at the top of the sidebar inviting
   personal (non-business) messages. Sentence-case heading instead of the
   uppercase label style the other blocks use. */
.qrt-mkt-contact-welcome {
    background: var(--qrt-accent-soft);
    border-radius: var(--qrt-radius-lg);
    padding: 20px 22px;
}
.qrt-mkt-contact-welcome h4 {
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 1.1rem;
    color: var(--qrt-accent-hover);
    margin-bottom: 8px;
}
.qrt-mkt-contact-welcome p { color: var(--qrt-text-secondary); margin: 0; line-height: 1.55; }
.qrt-mkt-contact-welcome p + .qrt-mkt-contact-welcome-list { margin-top: 12px; }
.qrt-mkt-contact-welcome-list + p { margin-top: 12px; }
.qrt-mkt-contact-welcome strong { color: var(--qrt-accent-hover); }
/* Bulleted questions inside the welcome card — small indigo dot markers. */
.qrt-mkt-contact-welcome-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.qrt-mkt-contact-welcome-list li {
    position: relative;
    padding-left: 20px;
    color: var(--qrt-text-secondary);
    line-height: 1.5;
}
.qrt-mkt-contact-welcome-list li::before {
    content: '';
    position: absolute; left: 4px; top: 9px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--qrt-accent);
}
.qrt-mkt-contact-form {
    background: #fff; border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius); padding: 32px;
    box-shadow: var(--qrt-card-shadow);
}
/* The toggle (.qrt-mkt-toggle, shared with signup) needs bottom spacing
   inside the contact form. */
.qrt-mkt-contact-form .qrt-mkt-toggle { margin-bottom: 20px; }
/* reCAPTCHA widget — give it breathing room above the submit button. */
.qrt-mkt-recaptcha { margin: 4px 0 18px; }

/* ─── CTA banner ───────────────────────────────────────────────────────── */

.qrt-mkt-cta-banner {
    padding: 72px 0;
    background: linear-gradient(135deg, var(--qrt-accent) 0%, #818cf8 100%);
    color: #fff;
}
.qrt-mkt-cta-inner { text-align: center; }
.qrt-mkt-cta-inner h2 { color: #fff; margin: 0 0 12px; }
.qrt-mkt-cta-inner p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin: 0 0 24px; }
.qrt-mkt-cta-inner .qrt-mkt-btn-primary {
    background: #fff; color: var(--qrt-primary) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.qrt-mkt-cta-inner .qrt-mkt-btn-primary:hover { background: #f3f4f6; color: var(--qrt-primary-hover); }

/* ─── footer ───────────────────────────────────────────────────────────── */

.qrt-mkt-footer { background: #0b0d13; color: #cbd5e1; padding: 64px 0 0; }
.qrt-mkt-footer-inner {
    display: grid; grid-template-columns: 1.2fr 2fr; gap: 56px;
    padding-bottom: 48px;
}
.qrt-mkt-footer-tag { color: #cbd5e1; margin: 10px 0; max-width: 320px; }
.qrt-mkt-footer-scripture {
    color: #94a3b8; font-style: italic; font-size: 0.92rem; margin: 16px 0 0;
    border-left: 3px solid var(--qrt-accent); padding-left: 14px;
}
.qrt-mkt-footer-scripture span { display: block; color: var(--qrt-text-muted2); font-style: normal; margin-top: 7px; margin-bottom: -7px; }
.qrt-mkt-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.qrt-mkt-footer-col h4 {
    color: var(--qrt-text-muted2); font-size: 0.85rem; letter-spacing: 0.08em;
    text-transform: uppercase; margin: 0 0 6px;
}
.qrt-mkt-footer-col a {
    display: block; color: #b4bbc6 !important; padding: 4px 0; font-size: 1rem; transition: color 0.1s ease;
}
.qrt-mkt-footer-col a:hover { color: #fff !important; }
.qrt-mkt-footer .qrt-mkt-brand { color: #fff; }
.qrt-mkt-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0;
}
.qrt-mkt-footer-bottom-inner {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--qrt-text-muted2); font-size: 0.85rem;
}

/* ─── pricing ──────────────────────────────────────────────────────────── */

.qrt-mkt-billing-toggle {
    display: inline-flex; align-items: center; gap: 0;
    background: var(--qrm-tint); border-radius: 999px; padding: 4px;
    margin: 24px auto 0;
}
.qrt-mkt-billing-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.qrt-mkt-billing-toggle label {
    padding: 10px 22px; border-radius: 999px;
    font-weight: 600; font-size: 0.92rem; cursor: pointer;
    color: var(--qrt-text-secondary); transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 8px;
}
.qrt-mkt-billing-toggle input:checked + label {
    background: #fff; color: var(--qrt-text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.qrt-mkt-save-pill {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    background: var(--qrt-accent-soft); color: var(--qrt-accent);
    padding: 3px 8px; border-radius: 999px;
}

.qrt-mkt-pricing-grid {
    /* 3 columns (Individual / Standard / Premium) — Bilingual merged
       into Standard 2026-06. Was 4 columns previously. */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-top: 16px; align-items: stretch;
    max-width: 1000px; margin-left: auto; margin-right: auto;
}
.qrt-mkt-plan {
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius);
    padding: 28px 24px;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.qrt-mkt-plan:hover { transform: translateY(-3px); box-shadow: var(--qrt-card-shadow-hover); }
.qrt-mkt-plan-featured {
    border-color: var(--qrt-accent);
    box-shadow: 0 8px 24px rgba(99,102,241,0.18);
    transform: translateY(-6px);
}
.qrt-mkt-plan-featured:hover { transform: translateY(-9px); }
.qrt-mkt-plan-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--qrt-primary); color: #fff;
    padding: 5px 14px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}
.qrt-mkt-plan-name {
    font-size: 1.25rem; font-weight: 700; margin: 0 0 6px;
    color: var(--qrt-text-primary);
}
.qrt-mkt-plan-tag {
    color: var(--qrt-text-muted); font-size: 0.88rem;
    margin: 0 0 20px; min-height: 38px;
}
.qrt-mkt-price {
    display: flex; align-items: baseline; gap: 2px;
    margin-bottom: 4px;
}
.qrt-mkt-price-currency {
    font-size: 1.4rem; font-weight: 600; color: var(--qrt-text-secondary);
    align-self: flex-start; margin-top: 8px;
}
.qrt-mkt-price-amount {
    font-size: 3rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--qrt-text-primary); line-height: 1;
}
.qrt-mkt-price-unit {
    font-size: 1rem; color: var(--qrt-text-muted); margin-left: 6px;
}
.qrt-mkt-price-note {
    font-size: 0.78rem; color: var(--qrt-text-muted);
    margin: 0 0 8px; min-height: 18px;
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.qrt-mkt-price-note[hidden] { display: none; margin: 0; min-height: 0; }

/* "Save $X" green pill — appears next to "Billed annually" when the
   yearly toggle is on. Same green palette as the dashboard billing tab
   so the savings visual reads consistently across marketing + portal. */
.qrt-mkt-save-badge {
    display: inline-flex; align-items: center;
    background: #dcfce7; color: #15803d;
    padding: 2px 8px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Personal-account subdomain mode picker — Phase 13 Pass 8.
   Card-style radios so the two choices ("Use my name" / "Stay anonymous")
   read as a clear binary with the resulting subdomain preview inline on
   each card. The native radio inputs are hidden; the label is clickable. */
.qrt-mkt-subdomain-mode { margin-bottom: 16px; }
.qrt-mkt-subdomain-mode > label {
    display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.92rem;
}
.qrt-mkt-subdomain-mode-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
@media (max-width: 520px) {
    .qrt-mkt-subdomain-mode-toggle { grid-template-columns: 1fr; }
}
.qrt-mkt-subdomain-mode-toggle input {
    position: absolute; opacity: 0; pointer-events: none;
}
.qrt-mkt-subdomain-mode-toggle label {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius-sm);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.qrt-mkt-subdomain-mode-toggle label:hover { border-color: var(--qrm-border-strong); }
.qrt-mkt-subdomain-mode-toggle input:checked + label {
    border-color: var(--qrt-accent);
    background: var(--qrt-accent-soft);
    box-shadow: 0 1px 3px rgba(99,102,241,0.10);
}
.qrt-mkt-subdomain-mode-title {
    font-weight: 600; font-size: 0.88rem; color: var(--qrt-text-primary);
}
/* Single-line URL row inside each radio card. The sample + suffix are
   inline spans inside this wrapper so they render side-by-side; nowrap +
   ellipsis keeps the row to one line if a long name overflows the card. */
.qrt-mkt-subdomain-mode-url {
    display: block; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qrt-mkt-subdomain-mode-sample {
    font-size: 0.82rem; color: var(--qrt-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.qrt-mkt-subdomain-mode-suffix {
    font-size: 0.82rem; color: var(--qrt-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* "Selected plan" row on the signup form — Phase 13 Pass 8.
   Hidden by default; revealed by marketing.js after reading the
   clicked solutions-page button's data-selected-plan attr.
   Header/footer "Get started free" CTAs leave this row hidden, in
   which case the signup defaults to the free plan_tier. */
.qrt-mkt-selected-plan {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
    padding: 12px 14px;
    background: var(--qrt-accent-soft);
    border: 1px solid var(--qrt-accent-soft);
    border-radius: var(--qrt-radius-sm);
    margin: 0 0 16px;
}
.qrt-mkt-selected-plan[hidden] { display: none; }
.qrt-mkt-selected-plan-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    color: var(--qrt-accent); text-transform: uppercase;
    flex: 0 0 auto;
}
.qrt-mkt-selected-plan-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: #fff; color: var(--qrt-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-size: 0.9rem; font-weight: 600;
}
.qrt-mkt-selected-plan-cadence {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    background: var(--qrt-accent-soft); color: var(--qrt-accent);
    padding: 2px 8px; border-radius: 999px; text-transform: capitalize;
}
.qrt-mkt-tract-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--qrm-tint); border-radius: 8px; padding: 3px;
    margin: 0 0 5px;
}
.qrt-mkt-tract-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.qrt-mkt-tract-toggle label {
    text-align: center; padding: 7px; border-radius: 6px;
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
    color: var(--qrt-text-secondary); transition: all 0.15s;
}
.qrt-mkt-tract-toggle input:checked + label {
    background: #fff; color: var(--qrt-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.qrt-mkt-plan-features {
    list-style: none; padding: 0; margin: 20px 0 0;
    display: flex; flex-direction: column; gap: 10px;
    border-top: 1px solid var(--qrt-card-border); padding-top: 20px;
}
.qrt-mkt-plan-features li {
    position: relative; padding-left: 26px;
    color: var(--qrt-text-secondary); font-size: 0.92rem;
    line-height: 1.45;
}
.qrt-mkt-plan-features li::before {
    content: '✓'; position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--qrt-accent-soft); color: var(--qrt-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800;
}
.qrt-mkt-plan-features strong { color: var(--qrt-text-primary); }

/* compare-all table */
.qrt-mkt-compare-toggle {
    margin: 40px auto 0; max-width: 980px;
    border: 1px solid var(--qrt-card-border);
    border-radius: var(--qrt-radius); background: #fff;
    /* Was `overflow: hidden` — changed to visible so the .qrm-tip
       tooltips on top rows can extend above the table edge without
       being clipped. The thead's gray background still respects the
       rounded corners visually because the summary sits above it
       inside the rounded perimeter. */
    overflow: visible;
}
.qrt-mkt-compare-toggle summary {
    list-style: none; cursor: pointer;
    padding: 18px 24px; font-weight: 600;
    color: var(--qrt-accent);
}
.qrt-mkt-compare-toggle summary::-webkit-details-marker { display: none; }
.qrt-mkt-compare-toggle[open] summary { border-bottom: 1px solid var(--qrt-card-border); }
/* Locked-open variant — the summary becomes a static heading instead of
   a clickable toggle. Pointer-events:none on the <summary> blocks the
   click-to-collapse behavior so the table stays expanded permanently. */
.qrt-mkt-compare-locked summary {
    cursor: default;
    pointer-events: none;
    color: var(--qrt-text-primary);
    font-size: 1rem;
}
/* On desktop, no overflow constraint — the table fits within 980px and
   any tooltip needs to be able to escape upward. On mobile (the 720px
   breakpoint further down), overflow-x: auto kicks in for horizontal
   scroll on narrow viewports. */
.qrt-mkt-feature-table-wrap { /* overflow: visible by default */ }
.qrt-mkt-feature-table {
    width: 100%; border-collapse: collapse; font-size: 0.92rem;
}
.qrt-mkt-feature-table th, .qrt-mkt-feature-table td {
    padding: 12px 18px; text-align: center;
    border-bottom: 1px solid var(--qrt-card-border);
}
.qrt-mkt-feature-table th {
    background: var(--qrm-tint); font-weight: 700;
    color: var(--qrt-text-primary); font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.qrt-mkt-feature-table tr:last-child td { border-bottom: 0; }
/* Row hover — subtle light wash for readability while scanning across a
   row. Excludes subhead divider rows (they're section labels, not data). */
.qrt-mkt-feature-table tbody tr:not(.qrt-mkt-feature-subhead) {
    transition: background 0.2s ease;
}
.qrt-mkt-feature-table tbody tr:not(.qrt-mkt-feature-subhead):hover {
    background: var(--qrm-tint);
}
.qrt-mkt-feature-label { text-align: left !important; font-weight: 500; color: var(--qrt-text-primary); }
.qrt-mkt-feature-yes { color: var(--qrt-primary); font-weight: 700; }
.qrt-mkt-feature-no  { color: var(--qrt-text-muted); }
.qrt-mkt-feature-val { color: var(--qrt-text-primary); font-weight: 600; font-size: 0.85rem; }

/* Section subheads inside the feature-comparison table. Rendered as
   full-width <th colspan="4"> rows that visually divide the matrix into
   scannable categories (Design Studio, Branding, Outreach, etc.).
   Indigo small-caps text, no background, thin top divider. The first
   subhead loses its top border so it doesn't double up with the thead's
   bottom border above it. */
.qrt-mkt-feature-subhead th {
    text-align: left;
    background: transparent;
    color: var(--qrt-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 24px 18px 10px;
    border-top: 1px solid var(--qrt-card-border);
    border-bottom: 0;
}
.qrt-mkt-feature-table tbody tr.qrt-mkt-feature-subhead:first-child th {
    border-top: 0;
    padding-top: 16px;
}
/* Feature row immediately under a subhead — no top border needed since
   the subhead already provides visual separation from the previous group. */
.qrt-mkt-feature-subhead + tr td { border-top: 0; }

/* ─── tooltip terms (Shopify pattern) ──────────────────────────────────
   Wraps feature names that need a longer explanation than fits in the
   table. Dotted underline signals "more info here"; hover or keyboard
   focus reveals a dark card with the description above the term.
   Pure CSS — no JS, the description string is read from `data-tooltip`
   via attr(). Tabindex on the span gives touch + keyboard users access. */
.qrm-tip {
    position: relative;
    text-decoration: underline dotted #8c98aa;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: help;
    outline: none;
}
.qrm-tip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #111827;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    z-index: 30;
}
.qrm-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #111827;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    z-index: 30;
}
.qrm-tip:hover::after,
.qrm-tip:focus::after,
.qrm-tip:hover::before,
.qrm-tip:focus::before {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.qrm-tip:hover::after,
.qrm-tip:focus::after { transform: translateY(0); }
.qrm-tip:focus       { /* indicate keyboard focus subtly */
    text-decoration-color: var(--qrt-accent);
}

.qrt-mkt-pricing-footnote {
    text-align: center; color: var(--qrt-text-muted);
    font-size: 0.85rem; margin: 32px 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   V2 HOME — Wix-style hero + product mockup + subdomain claim
   ──────────────────────────────────────────────────────────────────────
   All `.qrm-*` classes belong to the V2 home (templates/home.php). They
   share the dashboard tokens with the rest of the site but introduce
   their own layout primitives (centered hero, mockup stage, claim pill).
   ════════════════════════════════════════════════════════════════════════ */

.qrm-hero {
    position: relative;
    padding: 40px 0 0 0px;
    /* Matches the v1 hero — soft indigo radial wash on white. Stays in
       the QRtracts token system: only --qrt-accent variants, no pink. */
    background: radial-gradient(ellipse at top left,  rgba(99,102,241,0.10), transparent 60%),
                radial-gradient(ellipse at top right, rgba(129,140,248,0.07), transparent 50%),
                var(--qrm-surface);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 40px 80px -20px rgba(17, 24, 39, 0.05);
}
.qrm-hero-inner { max-width: 1200px; }
.qrm-hero-title {
    font-size: clamp(2.5rem, 6.5vw, 5.5rem);
    line-height: 1.02; letter-spacing: -0.03em; font-weight: 800;
    margin: 0 auto 24px; max-width: 16ch;
    color: var(--qrt-text-primary);
}
.qrm-hero-title em {
    /* Indigo emphasis using the same avatar-fallback gradient already in
       the dashboard system (--qrt-accent → #818cf8). Single-palette. */
    font-style: italic; font-weight: 700;
    background: linear-gradient(135deg, var(--qrt-accent) 0%, #818cf8 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding: 0 13px;
}
.qrm-hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--qrt-text-secondary); line-height: 1.6;
    max-width: 620px; margin: 0 auto 0px;
}
.qrm-hero-ctas {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-top: 8px;
}
.qrm-hero-cta {
    padding: 16px 32px; font-size: 1rem; border-radius: 999px;
}
.qrm-hero-reassure {
    color: var(--qrt-text-muted); font-size: 0.75rem; margin: 16px 0 0;
}

/* Hero media — single product image, drop-shadow card. Swap the inner
   <img> src for the real hero shot when ready (handles, family photo
   of cards, hand holding card, etc.). */
.qrm-hero-media {
    margin: 56px auto 0;
}
.qrm-hero-media img {
    width: 100%; height: auto; display: block;
}

/* Dual-button CTA banner (final call-to-action at bottom of home). */
.qrm-cta-buttons {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ─── password strength UI ─────────────────────────────────────────────
   Modern signup-form password enforcement. Five rules, mirrored on the
   server (qrt-marketing.php). Visual stack: input with eye toggle →
   5-segment meter → strength label → 5-row checklist.
   Color ramp red→amber→yellow→emerald maps to rules-passed (1→5).
   ──────────────────────────────────────────────────────────────────── */
.qrt-mkt-pw-input { position: relative; }
.qrt-mkt-pw-input input { padding-right: 44px; }
.qrt-mkt-pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: 8px; cursor: pointer;
    color: var(--qrt-text-muted); display: inline-flex;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.qrt-mkt-pw-toggle:hover { color: var(--qrt-text-primary); background: var(--qrm-tint); }
.qrt-mkt-pw-toggle:focus-visible {
    outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
}
.qrt-mkt-pw-toggle svg { width: 18px; height: 18px; }
/* Hide the eye-off icon by default; flip when the toggle has shown state. */
.qrt-mkt-pw-toggle .qrt-mkt-pw-eye-off { display: none; }
.qrt-mkt-pw-toggle.is-showing .qrt-mkt-pw-eye     { display: none; }
.qrt-mkt-pw-toggle.is-showing .qrt-mkt-pw-eye-off { display: inline-block; }

/* Segmented strength meter — 5 thin pills. data-level fills 1..5 from
   the left. Stays neutral grey at level 0 (empty / no input). */
.qrt-mkt-pw-meter {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
    margin-top: 10px; height: 5px;
}
.qrt-mkt-pw-meter span {
    background: var(--qrt-card-border);
    border-radius: 999px;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.qrt-mkt-pw-meter[data-level="1"] span:nth-child(-n+1) { background: #ef4444; }
.qrt-mkt-pw-meter[data-level="2"] span:nth-child(-n+2) { background: #f59e0b; }
.qrt-mkt-pw-meter[data-level="3"] span:nth-child(-n+3) { background: #eab308; }
.qrt-mkt-pw-meter[data-level="4"] span:nth-child(-n+4) { background: #10b981; }
.qrt-mkt-pw-meter[data-level="5"] span:nth-child(-n+5) { background: #059669; }

.qrt-mkt-pw-strength {
    font-size: 0.78rem; font-weight: 700; margin-top: 8px;
    letter-spacing: 0.01em;
}
.qrt-mkt-pw-strength[data-level="1"] { color: #ef4444; }
.qrt-mkt-pw-strength[data-level="2"] { color: #d97706; }
.qrt-mkt-pw-strength[data-level="3"] { color: #ca8a04; }
.qrt-mkt-pw-strength[data-level="4"] { color: #10b981; }
.qrt-mkt-pw-strength[data-level="5"] { color: #059669; }

/* Checklist — each row has a circle that fills + checks on .is-met. */
.qrt-mkt-pw-checklist {
    list-style: none; padding: 0; margin: 12px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
    font-size: 0.82rem; color: var(--qrt-text-muted);
}
.qrt-mkt-pw-checklist li {
    display: flex; align-items: center; gap: 8px;
    transition: color 0.2s ease;
}
.qrt-mkt-pw-checklist li.is-met { color: #059669; font-weight: 500; }
.qrt-mkt-pw-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--qrt-card-border);
    color: #fff; font-size: 0.66rem; font-weight: 800; line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.qrt-mkt-pw-checklist li.is-met .qrt-mkt-pw-check {
    background: #10b981;
    transform: scale(1.05);
}
/* Checkmark only appears on met rules. */
.qrt-mkt-pw-checklist li.is-met .qrt-mkt-pw-check::after { content: '✓'; }

/* Strength UI is collapsed by default — meter, label, and checklist all
   hidden until the password field (input or its eye-toggle button) is
   focused. Keeps the form compact at first glance and reveals
   enforcement details on demand. Uses :focus-within so the eye-toggle
   click keeps the panel open. */
.qrt-mkt-pw-meter,
.qrt-mkt-pw-strength,
.qrt-mkt-pw-checklist { display: none; }
.qrt-mkt-pw-field:focus-within .qrt-mkt-pw-meter     { display: grid;  }
.qrt-mkt-pw-field:focus-within .qrt-mkt-pw-checklist { display: grid;  }
.qrt-mkt-pw-field:focus-within .qrt-mkt-pw-strength  { display: block; }
/* The strength label is JS-toggled via [hidden] when password is empty;
   honour that even while focused (no label until they type something). */
.qrt-mkt-pw-strength[hidden] { display: none !important; }

/* ─── builder video section ────────────────────────────────────────────
   Centered headline + autoplay-muted-loop product demo video, framed in
   a rounded card with the same drop-shadow vocabulary as the hero media.
   Aspect-ratio locks the frame so layout doesn't shift while the video
   fetches; the <video> element fills it via object-fit: cover.
   ──────────────────────────────────────────────────────────────────── */
.qrm-builder-video {
    padding: 100px 0;
    background: var(--qrm-surface);
}
.qrm-builder-video-frame {
    max-width: 1080px;
    margin: 16px auto 0;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--qrm-dark); /* shows during fetch / if video errors */
    box-shadow: 0 40px 80px -20px rgba(17,24,39,0.20),
                0 16px 32px -8px rgba(17,24,39,0.08);
}
.qrm-builder-video-el {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ─── mockup stage ──────────────────────────────────────────────────────
   The visual composition. Center browser-window dashboard, with two
   floating panels (left + right) overlapping its corners, plus a
   physical-card mock anchored bottom-left. All built in HTML/CSS — swap
   inner contents with <img> tags once real screenshots are available.
   ──────────────────────────────────────────────────────────────────── */

.qrm-mockup-stage {
    position: relative;
    margin: 64px auto 0;
    width: 100%;
    max-width: 1100px;
    height: 540px;
}

/* center browser window */
.qrm-mockup-browser {
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: min(720px, 78%); height: 460px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 40px 80px -20px rgba(17,24,39,0.25),
                0 16px 32px -8px rgba(17,24,39,0.10);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    z-index: 2;
}
.qrm-browser-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}
.qrm-browser-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.qrm-dot-r { background: #ef4444; }
.qrm-dot-y { background: #f59e0b; }
.qrm-dot-g { background: #10b981; }
.qrm-browser-url {
    flex: 1; margin-left: 12px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 6px; padding: 5px 10px;
    font-size: 0.78rem; color: var(--qrt-text-secondary);
    display: flex; align-items: center; gap: 6px;
    max-width: 380px;
}
.qrm-url-lock { font-size: 0.7rem; color: var(--qrt-text-muted); }
.qrm-url-text { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; }

.qrm-browser-body { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 38px); }
.qrm-dash-side {
    background: #fafbfc; border-right: 1px solid #e5e7eb;
    padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.qrm-dash-brand {
    display: flex; align-items: center; gap: 8px; padding: 4px 0 14px;
    border-bottom: 1px solid #e5e7eb; margin-bottom: 10px;
}
.qrm-dash-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: linear-gradient(135deg, var(--qrt-accent), #818cf8);
    color: #fff; font-size: 0.65rem; font-weight: 800;
}
.qrm-dash-name { font-size: 0.78rem; font-weight: 700; color: var(--qrt-text-primary); }
.qrm-dash-navitem {
    padding: 7px 10px; border-radius: 6px;
    font-size: 0.78rem; color: var(--qrt-text-secondary); font-weight: 500;
}
.qrm-dash-active { background: var(--qrt-accent-soft); color: var(--qrt-accent); font-weight: 600; }

.qrm-dash-main { padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.qrm-dash-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qrm-stat {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.qrm-stat-label { font-size: 0.66rem; color: var(--qrt-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.qrm-stat-num   { font-size: 1.25rem; font-weight: 800; color: var(--qrt-text-primary); letter-spacing: -0.02em; }
.qrm-stat-delta { font-size: 0.7rem; color: #10b981; font-weight: 700; }
.qrm-dash-chart {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px; height: 90px;
}
.qrm-dash-chart svg { width: 100%; height: 100%; }
.qrm-dash-tracts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qrm-tract-card {
    aspect-ratio: 3 / 2; border-radius: 10px;
    display: flex; align-items: flex-end; padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* Tract preview cards — three indigo-system variants. If you later want
   them to represent the actual multi-colored design library (Love /
   Vivid / Watercolor / etc.), swap these gradients for the real design
   palette colors. For now we stay in QRtracts indigo. */
.qrm-tract-purple { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.qrm-tract-teal   { background: linear-gradient(135deg, #6366f1, #c7d2fe); }
.qrm-tract-amber  { background: linear-gradient(135deg, #312e81, #6366f1); }
.qrm-tract-label  { color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: -0.01em; }

/* floating side panels (left + right) */
.qrm-mockup-panel {
    position: absolute;
    width: 220px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 20px 40px -10px rgba(17,24,39,0.18),
                0 8px 16px -4px rgba(17,24,39,0.06);
    padding: 14px;
    z-index: 3;
}
.qrm-panel-left  { top: 60px;  left: 0;  transform: rotate(-3deg); }
.qrm-panel-right { top: 110px; right: 0; transform: rotate(3deg); }

.qrm-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.qrm-panel-title { font-size: 0.82rem; font-weight: 700; color: var(--qrt-text-primary); }
.qrm-panel-x { color: var(--qrt-text-muted); font-size: 1rem; line-height: 1; }
.qrm-panel-search {
    display: flex; align-items: center; gap: 6px;
    background: #f3f4f6; border-radius: 7px; padding: 6px 9px;
    margin-bottom: 10px;
}
.qrm-panel-search-icon { font-size: 0.65rem; }
.qrm-panel-search-placeholder { font-size: 0.72rem; color: var(--qrt-text-muted); }
.qrm-panel-pills { display: flex; gap: 5px; margin-bottom: 10px; }
.qrm-pill {
    font-size: 0.66rem; font-weight: 600;
    padding: 4px 9px; border-radius: 999px;
    background: #f3f4f6; color: var(--qrt-text-secondary);
}
.qrm-pill-active { background: var(--qrt-text-primary); color: #fff; }
.qrm-panel-thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.qrm-thumb {
    aspect-ratio: 3 / 4; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 6px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
    background: #fafbfc;
}
.qrm-thumb-selected { border-color: var(--qrt-accent); box-shadow: 0 0 0 2px var(--qrt-accent-soft); }
.qrm-thumb-line { display: block; height: 3px; background: #d1d5db; border-radius: 2px; }
.qrm-thumb-line.short { width: 60%; }

/* right panel — live analytics */
.qrm-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #10b981;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
    animation: qrm-pulse 2s ease-in-out infinite;
}
@keyframes qrm-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0.05); }
}
.qrm-live-big { font-size: 2.2rem; font-weight: 800; color: var(--qrt-text-primary); letter-spacing: -0.03em; line-height: 1; }
.qrm-live-sub { font-size: 0.72rem; color: var(--qrt-text-muted); margin-bottom: 12px; }
.qrm-live-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-top: 1px solid #f1f2f5;
    font-size: 0.72rem;
}
.qrm-live-flag { font-size: 0.9rem; }
.qrm-live-loc  { flex: 1; color: var(--qrt-text-primary); font-weight: 500; }
.qrm-live-ago  { color: var(--qrt-text-muted); font-size: 0.65rem; }

/* physical QR card (bottom-left of stage) */
.qrm-mockup-card {
    position: absolute;
    bottom: 0; left: 8%;
    width: 180px; aspect-ratio: 3 / 4.6;
    background: linear-gradient(160deg, #1e1b4b 0%, var(--qrt-accent) 70%, #818cf8 100%);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 25px 50px -15px rgba(99,102,241,0.5),
                0 10px 20px -5px rgba(0,0,0,0.2);
    transform: rotate(-8deg);
    color: #fff;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 3;
}
.qrm-card-top { font-size: 0.62rem; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.qrm-card-headline { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.qrm-card-qr {
    margin-top: auto;
    width: 100%; aspect-ratio: 1; background: #fff;
    border-radius: 8px; padding: 10px;
    display: flex; align-items: center; justify-content: center;
}
.qrm-qr-pattern {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
}
.qrm-qr-pattern span {
    background: #0f172a; border-radius: 1px;
}
/* sprinkle some empty cells to simulate a QR pattern */
.qrm-qr-pattern span:nth-child(3),
.qrm-qr-pattern span:nth-child(6),
.qrm-qr-pattern span:nth-child(11),
.qrm-qr-pattern span:nth-child(14) { background: transparent; }
.qrm-card-foot { font-size: 0.7rem; opacity: 0.85; text-align: center; font-weight: 500; margin-top: 4px; }

/* ─── subdomain claim section ──────────────────────────────────────────── */

.qrm-claim {
    padding: 100px 0;
    background: var(--qrm-surface);
    border-top: 1px solid var(--qrt-card-border);
}
.qrm-claim-inner { text-align: center; max-width: 760px; }
.qrm-claim .qrt-mkt-h2 { margin-bottom: 14px; }
.qrm-claim code {
    background: var(--qrt-accent-soft); color: var(--qrt-accent-hover);
    padding: 2px 8px; border-radius: 6px; font-size: 0.88em;
}
.qrm-claim-form {
    display: flex; gap: 10px; margin-top: 32px;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.qrm-claim-input {
    flex: 1; display: flex; align-items: stretch;
    background: #fff; border: 1px solid var(--qrm-border-strong);
    border-radius: 999px; padding: 0; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qrm-claim-input:focus-within {
    border-color: var(--qrt-accent);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
}
.qrm-claim-input input {
    flex: 1; border: 0; outline: 0; padding: 16px 22px;
    font-family: inherit; font-size: 1rem; background: transparent;
    color: var(--qrt-text-primary);
}
.qrm-claim-suffix {
    display: inline-flex; align-items: center; padding: 0 22px 0 0;
    color: var(--qrt-text-muted); font-size: 0.95rem; font-weight: 500;
}
.qrm-claim-form .qrt-mkt-btn { border-radius: 999px; padding: 16px 30px; }
.qrm-claim-availability {
    margin-top: 16px; font-size: 0.92rem; font-weight: 500;
}
.qrm-claim-availability.is-ok    { color: #047857; }
.qrm-claim-availability.is-error { color: #b91c1c; }

/* ─── signup section (V2) ──────────────────────────────────────────────── */

.qrm-signup-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--qrm-tint) 0%, var(--qrm-surface) 100%);
}
.qrm-signup-wrap { max-width: 720px; }
.qrm-signup-head { margin-bottom: 32px; }
.qrm-signup-card-wide { padding: 40px; }
.qrm-signup-card-wide .qrt-mkt-signup-form { max-width: 600px; margin: 0 auto; }
/* Reassurance fineprint that sits beneath the section-sub — kills the
   "is this a paid trial that'll bill me?" objection in one line. */
.qrm-signup-reassure {
    color: var(--qrt-text-muted);
    font-size: 0.88rem;
    margin: 14px 0 0;
}

/* ─── signup modal ─────────────────────────────────────────────────────
   Dashboard-style popup containing the global signup form (footer-rendered
   'modal' instance). Opened by [data-open-signup] triggers. z-index sits
   above the sticky topbar (z-index 60). The overlay itself scrolls so the
   long form is reachable on short viewports. */
.qrt-mkt-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.qrt-mkt-modal[hidden] { display: none; }
.qrt-mkt-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    animation: qrm-modal-fade 0.2s ease;
}
.qrt-mkt-modal-card {
    position: relative;
    width: 100%; max-width: 560px;
    margin: auto;
    background: #fff;
    border-radius: var(--qrt-radius);
    box-shadow: 0 40px 80px -20px rgba(17,24,39,0.40);
    padding: 36px;
    animation: qrm-modal-pop 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.qrt-mkt-modal-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: 0; padding: 6px; cursor: pointer;
    color: var(--qrt-text-muted); border-radius: 8px;
    display: inline-flex;
    transition: background 0.15s, color 0.15s;
}
.qrt-mkt-modal-close:hover { background: var(--qrm-tint); color: var(--qrt-text-primary); }
.qrt-mkt-modal-head { text-align: center; margin-bottom: 24px; }
.qrt-mkt-modal-title {
    font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 700;
    letter-spacing: -0.015em; margin: 0 0 6px;
    color: var(--qrt-text-primary);
}
@keyframes qrm-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qrm-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .qrt-mkt-hero { padding: 56px 0 40px; }
    .qrt-mkt-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .qrt-mkt-feature-grid, .qrt-mkt-feature-grid-3,
    .qrt-mkt-steps, .qrt-mkt-testimonial-grid,
    .qrt-mkt-usecase-grid, .qrt-mkt-faith-grid {
        grid-template-columns: 1fr 1fr;
    }
    .qrt-mkt-twoup, .qrt-mkt-checklist-section, .qrt-mkt-contact-grid,
    .qrt-mkt-footer-inner {
        grid-template-columns: 1fr; gap: 32px;
    }
    /* 3-tier pricing → 2-up on tablet, 1-col on phone (see 720px block). */
    .qrt-mkt-pricing-grid { grid-template-columns: 1fr 1fr; max-width: 600px; }
    .qrt-mkt-plan-featured { transform: none; }
    .qrt-mkt-plan-featured:hover { transform: translateY(-3px); }
    .qrt-mkt-checklist { grid-template-columns: 1fr; }
    .qrt-mkt-footer-cols { grid-template-columns: repeat(3, 1fr); }

    /* V2 hero — shrink stage + tuck floating panels closer */
    .qrm-hero { padding: 56px 0 0px; }
    .qrm-mockup-stage { height: 440px; max-width: 92%; }
    .qrm-mockup-browser { width: 78%; height: 380px; }
    .qrm-panel-left  { width: 175px; top: 40px; left: -8px; }
    .qrm-panel-right { width: 175px; top: 80px; right: -8px; }
    .qrm-mockup-card { width: 140px; left: 2%; }
}

@media (max-width: 720px) {
    .qrt-mkt-nav, .qrt-mkt-topbar-cta { display: none; }
    /* Push burger to the far right: with the nav + CTA hidden, the only
       flex siblings of .qrt-mkt-brand are the burger — `margin-left: auto`
       on the burger soaks up all remaining space so it sits flush right. */
    .qrt-mkt-burger { display: block; margin-left: auto; }
    .qrt-mkt-mobile-nav {
        display: none; flex-direction: column; gap: 0;
        border-top: 1px solid var(--qrt-card-border);
        padding: 16px 24px 20px; background: #fff;
    }
    .qrt-mkt-mobile-nav.is-open { display: flex; }
    .qrt-mkt-mobile-link {
        padding: 12px 0; color: var(--qrt-text-primary);
        font-weight: 600; border-bottom: 1px solid var(--qrt-card-border);
    }
    .qrt-mkt-mobile-link:last-of-type { border-bottom: 0; }
    .qrt-mkt-mobile-cta { margin-top: 14px; }

    /* Mobile dropdown rendering — expand/collapse accordion. Closed
       by default; tapping the trigger toggles the panel + rotates the
       chevron. Each group opens/closes independently of the others.

       Visual match to the other mobile rows: border-bottom + purple
       accent text on the toggle row. Sub-links inherit the same
       link-purple via `body.qrt-mkt a` and stay border-less so the
       expanded panel reads as a single visual block under the toggle. */
    .qrt-mkt-mobile-group {
        display: flex; flex-direction: column;
    }
    .qrt-mkt-mobile-group-toggle {
        appearance: none; background: transparent; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        font: inherit;
        font-family: inherit;
        font-weight: 600;
        color: var(--qrt-accent);
        text-align: left;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--qrt-card-border);
    }
    .qrt-mkt-mobile-group-chev {
        flex-shrink: 0;
        transition: transform 0.2s ease;
        color: currentColor;
    }
    .qrt-mkt-mobile-group.is-open .qrt-mkt-mobile-group-chev {
        transform: rotate(180deg);
    }
    .qrt-mkt-mobile-group-panel {
        display: flex; flex-direction: column;
        padding: 4px 0 8px;
    }
    .qrt-mkt-mobile-group-panel[hidden] { display: none; }
    .qrt-mkt-mobile-link--sub {
        padding: 10px 0 10px 14px;
        border-bottom: 0;
        font-weight: 500;
    }

    .qrt-mkt-feature-grid, .qrt-mkt-feature-grid-3,
    .qrt-mkt-steps, .qrt-mkt-testimonial-grid,
    .qrt-mkt-usecase-grid, .qrt-mkt-faith-grid,
    .qrt-mkt-footer-cols, .qrt-mkt-hero-bullets {
        grid-template-columns: 1fr;
    }
    .qrt-mkt-section { padding: 40px 0; }
    .qrt-mkt-signup-card { padding: 24px; }
    .qrt-mkt-field-row { grid-template-columns: 1fr; }
    .qrt-mkt-footer-bottom-inner { flex-direction: column; gap: 10px; text-align: center; }
    .qrt-mkt-compare-row { grid-template-columns: 1fr 1fr 1fr; padding: 14px 16px; font-size: 0.9rem; }

    /* ── Touch points → VERTICAL TIMELINE on mobile ──────────────────────
       The horizontal diagram crams at phone width, so each diagram renders
       as a vertical timeline: dots + connecting line down the LEFT, labels
       to the RIGHT. The row KEEPS its columns (label | Traditional |
       QRtracts) — the timelines stay in their own columns, just stacked
       vertically. A slightly narrower label column gives the timelines
       a bit more room. */
    .qrm-compare-touchpoints-row { grid-template-columns: 0.7fr 1fr 1fr; gap: 8px; }
    .qrm-touchpoints {
        flex-direction: column;
        align-items: flex-start;
        width: auto !important;   /* override the inline 109px on the traditional diagram */
        padding: 0;
    }
    .qrm-tp-dot { width: 11px; height: 11px; margin: 0; }
    .qrm-tp-dot span {
        /* Label sits to the RIGHT of the dot, vertically centered on it. */
        position: absolute;
        left: 19px; top: 50%; transform: translateY(-50%);
        white-space: nowrap; text-align: left;
        font-size: 0.72rem; line-height: 1.15;
    }
    .qrm-tp-line, .qrm-tp-fade {
        width: 2px; height: 34px;     /* vertical segment */
        min-width: 0;
        margin-left: 4.5px;           /* centers the 2px line under the 11px dot */
        align-self: flex-start;
    }
    /* Traditional fade trail now points DOWN. */
    .qrm-tp-fade { background: linear-gradient(to bottom, var(--qrt-accent), transparent); }
    /* Traditional cell stacks the diagram above its "Unknown engagement" note. */
    .qrm-tp-cell { flex-direction: column; align-items: flex-start; gap: 8px; }
    .qrm-tp-aside { margin-bottom: 0; font-size: 0.72rem; }

    .qrt-mkt-pricing-grid { grid-template-columns: 1fr; }
    .qrt-mkt-feature-table th, .qrt-mkt-feature-table td { padding: 7px 5px; font-size: 0.82rem; }
    /* Re-enable horizontal scroll on phones — the table is wider than
       the viewport at this width. Tooltips on top rows may clip slightly
       here since overflow-x: auto re-establishes a clipping context,
       but the trade-off (cramped table vs lost tooltips) favors scroll. */
    .qrt-mkt-feature-table-wrap { overflow-x: auto; }
    .qrt-mkt-feature-table th { font-size: 0.7rem; padding-top: 30px; }

    /* V2 hero on phones — drop the floating side panels + physical card
       (composition reads as clutter at this width), keep just the
       browser-window dashboard mock centered. */
    .qrm-hero-title { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.1;}
    .qrm-hero { padding: 40px 0 0px; }
    .qrm-mockup-stage { height: auto; margin-top: 40px; }
    .qrm-mockup-browser {
        position: relative; transform: none; left: auto;
        width: 100%; height: auto; aspect-ratio: 5 / 4;
    }
    .qrm-browser-body { height: auto; min-height: 240px; }
    .qrm-mockup-panel, .qrm-mockup-card { display: none; }

    /* V2 claim — stack input + button */
    .qrm-claim { padding: 56px 0; }
    .qrm-claim-form { flex-direction: column; gap: 12px; }
    .qrm-claim-form .qrt-mkt-btn { width: 100%; }
    .qrm-claim-input { border-radius: 16px; }
    .qrm-claim-input input { padding: 14px 18px; }
    .qrm-claim-suffix { padding: 0 18px 14px; }

    /* V2 signup section padding */
    .qrm-signup-section { padding: 56px 0; }
    .qrm-signup-card-wide { padding: 24px; }

    /* Signup modal goes full-bleed on phones for max form room. */
    .qrt-mkt-modal { padding: 0; align-items: stretch; }
    .qrt-mkt-modal-card { border-radius: 0; min-height: 100%; max-width: none; padding: 28px 20px; }

    /* Terms modals full-bleed on phones too (lots of scrolling text). */
    .qrt-mkt-terms-modal { padding: 0; align-items: stretch; }
    .qrt-mkt-terms-card { border-radius: 0; max-width: none; max-height: 100%; height: 100%; }
    .qrt-mkt-terms-body { padding: 20px; }

    /* reCAPTCHA widget is a fixed 304px box — scale it down so it doesn't
       overflow the form on narrow phones. transform-origin keeps it
       left-aligned with the rest of the fields. */
    /* The widget is a fixed 304px box; transform shrinks it visually but
       the layout box stays 304px and overflows the narrow form. height
       reclaims the scaled vertical space; overflow:hidden clips the
       leftover 304px width so it can't push the page wider than the
       viewport (which was also breaking the sticky topbar). */
    .qrt-mkt-recaptcha { transform: scale(0.88); transform-origin: left top; height: 68px; overflow: hidden; }

    /* ── Contact page mobile polish ──────────────────────────────────────
       Page headers lose their towering top padding; let the headline wrap
       naturally (kill the desktop <br>); tighten the form + sidebar so
       fields aren't squeezed. NOTE: deliberately does NOT touch
       .qrt-mkt-container — its gutter padding stays as-is per preference. */
    .qrt-mkt-pageheader { padding: 48px 0 28px; }
    .qrt-mkt-contact-grid { gap: 24px; padding-bottom: 50px;}
    .qrt-mkt-contact-side { gap: 30px; }
    .qrt-mkt-contact-welcome { padding: 16px 18px; }
    .qrt-mkt-contact-form { padding: 22px 18px; }

    /* Builder video — tighter band on phones, slightly smaller radius. */
    .qrm-builder-video { padding: 56px 0; }
    .qrm-builder-video-frame { border-radius: 14px; }

    /* Password checklist — single column on phones (two columns get
       cramped under the narrow field width). */
    .qrt-mkt-pw-checklist { grid-template-columns: 1fr; }
}