/* ═══════════════════════════════════════════════
   QRtracts Card Styles — SHARED between builder preview + live page.
   Edit ONCE here → both pages update.
   ═══════════════════════════════════════════════ */

/* ── Base card ── */

.qrt-tract-card {
    width: 100%;
    aspect-ratio: 1.75 / 1;
    border-radius: 26px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    position: relative;
}

 .qrt-tract-card-live-page {
    transform: scale(0.75);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    top: -30px;
 }

 .qrt-tract-card-live-page-front {
    animation: float 4.8s ease-in-out infinite;
 }

 @keyframes float {
    0%, 100% {
        transform: translateY(0px) scale(0.75);
    }
    50% {
        transform: translateY(20px) scale(0.75);
    }
}

/* ── Front card (gradient) ── */

.qrt-tract-card-front {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    background: linear-gradient(135deg, #d83434 0%, #b00000 50%, #6d2525 100%);
    /* --qrt-base = the design's "base" color. Defaults to color1 (the
       first palette slot) — any design can override in its own per-design
       rule (e.g. .qrt-hero-design-X { --qrt-base: var(--qrt-color2); }).
       The back card reads this same value so its background tracks the
       front's base color automatically. */
    --qrt-base: var(--qrt-color1);
}

/* Override the design's flex layout — when this class is on the
   .qrt-tract-card-front-text, the cursive accent word flows inline
   within the sentence instead of sitting in its own flex column. Used
   by flex-layout dual-font designs (duo_peach / duo_forest /
   duo_midnight / duo_blush) when the user toggles "Inline accent word"
   OR the catchphrase exceeds 15 characters. */
.qrt-tract-card-front-text.qrt-catchphrase-inline {
    display: block !important;
    align-items: initial !important;
    flex-wrap: initial !important;
    gap: 0 !important;
}

.qrt-tract-card-front-text {
    /* Universal text-override fallbacks — per-design rules supply their own
       defaults via the second var() arg, so picking a font/weight/color in
       the sidebar overrides any design's typography. */
    color: var(--qrt-text-color, var(--qrt-text-color, #ffffff));
    font-family: var(--qrt-text-font, var(--qrt-text-font, 'Raleway', 'Inter', sans-serif));
    font-weight: var(--qrt-text-weight, var(--qrt-text-weight, 700));
    font-size: 30px;
    font-weight: var(--qrt-text-weight, 900);
    user-select: none;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

/* ── Branding — "QRtracts™ [logo]" ── */

.qrt-brand {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.qrt-brand-name {
    display: inline-block;
}

.qrt-brand-logo {
    display: inline-flex;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.qrt-brand-logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Phase 14 — custom ministry branding on the card front ── */
.qrt-brand-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.qrt-brand-logo-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(148, 163, 184, 0.35);
}
/* logo & name: a slightly larger logo box than the QRtracts badge, still small */
.qrt-brand--logo-name .qrt-brand-logo {
    width: 16px;
    height: 16px;
}
.qrt-brand-logo--circle  { border-radius: 50%; }
.qrt-brand-logo--rounded { border-radius: 3px; }
.qrt-brand-name--placeholder { opacity: 0.75; font-style: italic; font-weight: 600; }

/* logo only: centered logo, no name, slider scales it via --qrt-brand-scale */
.qrt-brand--logo-only { gap: 0; }
.qrt-brand--logo-only .qrt-brand-logo {
    width: auto;
    height: auto;
    overflow: visible;
    transform: scale(var(--qrt-brand-scale, 1));
    transform-origin: center bottom;
}
.qrt-brand--logo-only .qrt-brand-img { width: auto; height: 30px; max-width: 170px; }
.qrt-brand--logo-only .qrt-brand-logo-empty { width: 44px; height: 44px; border-radius: 4px; }

/* ── Back card (dark, 2-column grid) ── */

.qrt-tract-card-back {
    /* --qrt-card-bg          → user's explicit override (highest priority).
       --qrt-base             → design-declared base color (set via JS for
                                 non-classics; designs may override in their
                                 own per-design CSS rule).
       --qrt-color1           → first palette slot (also stamped for non-
                                 classics). Falls through here when neither
                                 --qrt-card-bg nor --qrt-base is set.
       --qrt-card-auto-text   → automatic light/dark text choice based on
                                 the section-box bg luminance.
       --qrt-back-text-color  → explicit user text-color override. */
    background: var(--qrt-card-bg, var(--qrt-base, var(--qrt-color1, #0a0a0a)));
    color: var(--qrt-back-text-color, var(--qrt-card-auto-text, #ffffff));
    font-family: var(--qrt-back-font, inherit);
    display: grid;
    grid-template-columns: 32% 64%;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
    user-select: none;
    gap: 8px;
    padding: 13px;
    /* Two-layer var chain so per-design CSS rules can override defaults
       without JS clobbering them inline:
         --qrt-card-X-derived  → palette-derived fallback (set by JS for
                                  non-classics; not set for classics).
         --qrt-card-X          → root sets it from -derived OR a hard
                                  default. A more-specific rule like
                                  .qrt-tract-card-back.qrt-hero-design-Y
                                  can override it directly. JS only sets
                                  this inline when the user explicitly
                                  customizes (then it wins everything). */
    --qrt-card-box:           var(--qrt-card-box-derived,           #421919);
    --qrt-card-outline:       var(--qrt-card-outline-derived,       #C84949);
    --qrt-card-bold:          var(--qrt-card-bold-derived,          #EE6A6A);
    --qrt-back-title-color:   var(--qrt-back-title-color-derived,   #B4B4B4);
    /* Scan-QR placeholder bg + scan-here label color resolve through their own
       cascade so a design can pick a different shade than the outline/box.
       Defaults: placeholder bg = card-box, label color = card-box (legacy). */
    --qrt-scan-qr-bg:           var(--qrt-scan-qr-bg-derived,           var(--qrt-card-box));
    --qrt-scan-here-label-color: var(--qrt-scan-here-label-color-derived, var(--qrt-card-box));
}

.qrt-back-left,
.qrt-back-right {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.qrt-back-left {
    gap: 6px;
    justify-content: center;
}

.qrt-back-right {
    gap: 8px;
}

/* ── Scan Here box ── */

.qrt-scan-here-box {
    border: 2px solid var(--qrt-card-outline);
    border-bottom: 0px;
    border-radius: 11px;
    padding: 1px 1px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    background: var(--qrt-card-outline);
}

.qrt-scan-qr-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 7px;
    /* Color drives the SVG placeholder fill in the builder preview AND any
       inline-SVG variant on the live page. PNG <img> children are opaque so
       this var has no effect there — the live PNG color comes from the
       cached file (qr_{id}_white.png vs qr_{id}_black.png) chosen server-side
       from heroData.back.qrColor. */
    color: var(--qrt-scan-qr-color, white);
    background: var(--qrt-scan-qr-bg);
}

.qrt-scan-qr-placeholder img {
    max-width: 100%;
    height: auto;
    display: block;
}

.qrt-scan-here-label {
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.2px;
    color: var(--qrt-scan-here-label-color);
}

/* ── Feature indicators ── */

.qrt-back-features {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--qrt-card-box);
    /* Same toggleable border as the section box. */
    border: var(--qrt-card-border-width, 0) solid var(--qrt-card-border, transparent);
}

.qrt-back-feature {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    letter-spacing: 0.1px;
    font-weight: 800;
    /* Tied to the description / Q1-Q3 body color via the same var chain
       so the whole back card text changes together. */
    color: var(--qrt-back-text-color, var(--qrt-card-auto-text, #ffffff));
    line-height: 1;
}

.qrt-back-feature svg {
    flex-shrink: 0;
    /* SVG icons share the title's accent color across all designs. */
    color: var(--qrt-back-title-color, #B4B4B4);
}

/* ── Section boxes (Description + Questions) ── */

.qrt-back-section-box {
    background: var(--qrt-card-box);
    border-radius: 10px;
    padding: 5px 8px;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    /* Optional 1px border — width is 0 unless the user toggles
       "Add border to section boxes" in the sidebar. Radiant always
       paints it (the design originally introduced this slot). */
    border: var(--qrt-card-border-width, 0) solid var(--qrt-card-border, transparent);
}

/* Description (first box) fills remaining vertical space */
.qrt-back-right > .qrt-back-section-box:first-child {
    flex: 1 1 0;
}

.qrt-back-box-title {
    font-size: 8px;
    font-weight: 700;
    /* User-pickable via the Back Card Colors → Title color swatch. */
    color: var(--qrt-back-title-color, #B4B4B4);
    margin-bottom: 2px;
}

.qrt-back-box-body {
    font-size: 10px;
    letter-spacing: 0.1px;
    font-weight: 700;
    line-height: 1.25;
    /* Same var chain as .qrt-back-feature + .qrt-back-questions so all
       three text elements change together. */
    color: var(--qrt-back-text-color, var(--qrt-card-auto-text, #ffffff));
    font-family: var(--qrt-back-font, inherit);
}

.description-container-card {
    height: auto;
}

.qrt-back-questions {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    /* Same var chain as .qrt-back-feature + .qrt-back-box-body. */
    color: var(--qrt-back-text-color, var(--qrt-card-auto-text, #ffffff));
    font-family: var(--qrt-back-font, inherit);
    margin: 0;
    /* Auto-numbered list — numbers (1. 2. 3.) are CSS-generated so the
       sidebar text inputs never see them, and empty questions are hidden
       AND skipped by the counter so visible items always start at 1. */
    list-style: none;
    counter-reset: qrt-q-counter;
    padding: 0;
}
.qrt-back-questions li.is-empty { display: none; }
.qrt-back-questions li:not(.is-empty) { counter-increment: qrt-q-counter; }
.qrt-back-questions li:not(.is-empty)::before {
    content: counter(qrt-q-counter) ". ";
}

.qrt-back-questions li {
    margin-bottom: 1px;
}

/* Bold/strong text uses the --qrt-card-bold color (falls back to outline) */
.qrt-back-questions em,
.qrt-back-box-body em {
    color: var(--qrt-card-bold, var(--qrt-card-outline));
    font-style: italic;
}

.qrt-back-questions strong,
.qrt-back-box-body strong {
    color: var(--qrt-card-bold, var(--qrt-card-outline));
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════
   CARD DESIGN VARIANTS — single source of truth.
   Loaded by both the builder preview (via qrt-builder enqueue) and
   the live tract page. Anything card-visual belongs here; builder-
   only UI (sidebar pickers, design modal) stays in qrt-builder.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Vivid ─────────────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-vivid .qrt-tract-card-front-text,
.qrt-tract-card-front.qrt-hero-design-vivid .qrt-tract-card-front-text strong,
.qrt-tract-card-front.qrt-hero-design-vivid .qrt-tract-card-front-text b {
    font-family: var(--qrt-text-font, 'Raleway', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 900);
    /* letter-spacing: 0.5px; */
    color: var(--qrt-text-color, #ffffff);
}
/* Vivid's BACK uses Red Hat Display (distinct from Raleway-900 front) */
.qrt-tract-card-back.qrt-hero-design-vivid,
.qrt-tract-card-back.qrt-hero-design-vivid * {
    font-family: var(--qrt-back-font, 'Red Hat Display', 'Inter', sans-serif);
}

/* ── Futuristic ────────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-futuristic {
    position: relative;
    isolation: isolate; /* lock ::before stacking context to this card */
}
.qrt-tract-card-front.qrt-hero-design-futuristic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://app.qrtracts.com/assets/tract-design-studio/Futuristic.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.qrt-tract-card-front.qrt-hero-design-futuristic .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Montserrat', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 300);
    color: var(--qrt-text-color, #ffffff);
    letter-spacing: 0px;
    position: relative;
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-futuristic .qrt-tract-card-front-text strong,
.qrt-tract-card-front.qrt-hero-design-futuristic .qrt-tract-card-front-text b {
    font-weight: 700;
    color: #ffffff;  /* white, NOT accent — different from body-copy rule */
}
/* Brand stays absolute (keep z-index so it stacks above ::before) */
.qrt-tract-card-front.qrt-hero-design-futuristic .qrt-brand {
    z-index: 1;
}
.qrt-tract-card-back.qrt-hero-design-futuristic,
.qrt-tract-card-back.qrt-hero-design-futuristic * {
    font-family: var(--qrt-back-font, 'Montserrat', 'Inter', sans-serif);
    font-weight: 600;
    letter-spacing: 0px;
}
.qrt-tract-card-back.qrt-hero-design-futuristic .qrt-scan-here-label {
    font-weight: 800 !important;
    letter-spacing: 0px !important;
}

/* ── Radiant ───────────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-radiant {
    position: relative;
    isolation: isolate;
}
.qrt-tract-card-front.qrt-hero-design-radiant::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://app.qrtracts.com/assets/tract-design-studio/radiant-static.svg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /* Always on a white base — multiply darkens INTO the gradient so
       the speckle reads as grain instead of washing out. */
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}
.qrt-tract-card-front.qrt-hero-design-radiant .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Poppins', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 700);
    letter-spacing: 0.1px;
    color: var(--qrt-text-color, #0f172a);
    position: relative;
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-radiant .qrt-tract-card-front-text strong,
.qrt-tract-card-front.qrt-hero-design-radiant .qrt-tract-card-front-text b {
    font-weight: 800;
}
.qrt-tract-card-front.qrt-hero-design-radiant .qrt-brand { z-index: 1; }
.qrt-tract-card-front.qrt-hero-design-radiant .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-radiant .qrt-brand-name { color: #0f172a; }

/* Radiant BACK — white base, Poppins, 1px section-box borders.
   --qrt-card-box = light tinted fill, --qrt-card-border = 1-step-darker
   tinted line. Border is Radiant's exclusive user-customizable slot. */
.qrt-tract-card-back.qrt-hero-design-radiant {
    background: #ffffff;
    color: var(--qrt-back-text-color, #0f172a);
}
.qrt-tract-card-back.qrt-hero-design-radiant,
.qrt-tract-card-back.qrt-hero-design-radiant * {
    font-family: var(--qrt-back-font, 'Poppins', 'Inter', sans-serif);
    font-weight: 500;
    letter-spacing: 0.1px;
}
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-scan-here-label {
    font-weight: 800 !important;
    letter-spacing: 0px !important;
}
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-feature { color: var(--qrt-back-text-color, var(--qrt-card-auto-text, #000)); }
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-feature svg { color: var(--qrt-back-title-color, #797979); }
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-section-box,
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-features {
    border: 1px solid var(--qrt-card-border, rgba(15, 23, 42, 0.08));
}
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-box-title {
    color: var(--qrt-back-title-color, #797979);
    font-weight: 600;
}
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-box-body,
.qrt-tract-card-back.qrt-hero-design-radiant .qrt-back-questions {
    color: var(--qrt-back-text-color, #0f172a);
}


.qrt-tract-card-back.qrt-hero-design-big_italic_gradient {
    --qrt-card-bold: #bfa9ff;
    --qrt-card-outline: #8470bd;
    --qrt-back-title-color: #b9a7ec;
}

.qrt-tract-card-back.qrt-hero-design-duo_forest {
    --qrt-card-box: #192e26;            /* Section Box */
    --qrt-card-bold: #d4af6a;           /* Bolded Words */
    --qrt-card-outline: #d4af6a;        /* Scan Here Text */
    --qrt-back-title-color: #d4af6a;    /* Title & Icons */
}

.qrt-tract-card-back.qrt-hero-design-duo_midnight {
    --qrt-card-bg: #06212a;
    --qrt-card-box: #154d5b;            /* Section Box */
    --qrt-card-bold: #f4d35e;           /* Bolded Words */
    --qrt-card-outline: #f4d35e;        /* Scan Here Text */
    --qrt-back-title-color: #bae7f2;    /* Title & Icons */
}

.qrt-tract-card-back.qrt-hero-design-duo_blush {
    --qrt-card-bg: #fff;
    --qrt-card-box: #fff6f5;            /* Section Box */
    --qrt-card-bold: #b94e6d;           /* Bolded Words */
    --qrt-card-outline: #c46477;        /* Scan Here Text */
    --qrt-back-title-color: #545454;    /* Title & Icons */
    --qrt-card-border: #f9d6d2;         /* Border Color */
}

/* ═══════════════════════════════════════════════════════════════════════
   NEW DESIGN VARIANTS (36 designs across 9 categories).
   Background CSS is set inline via JS/PHP from each design's bgTemplate;
   this file handles fonts, text color, pseudo-element overlays, and any
   positioning/shape tricks unique to each design.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared: all non-accent designs lift children above any ::before layer.
   Only the in-flow catchphrase text gets `position: relative` — the brand
   is already absolute (bottom-left corner) from its base class; forcing
   relative there would drop it back into the flex row and create a
   spurious second column. Brand gets z-index only, keeping its position. */
.qrt-tract-card-front[class*="qrt-hero-design-"]:not(.qrt-hero-design-vivid):not(.qrt-hero-design-futuristic):not(.qrt-hero-design-radiant) .qrt-tract-card-front-text {
    position: relative;
    z-index: 3;
}
.qrt-tract-card-front[class*="qrt-hero-design-"]:not(.qrt-hero-design-vivid):not(.qrt-hero-design-futuristic):not(.qrt-hero-design-radiant) .qrt-brand {
    z-index: 3;
}

/* ─── MODERN GRADIENTS ─────────────────────────────────────────── */
/* Shared: Aurora / Mesh Sunset / Cool Mesh get a 20px blur overlay so the
   radial gradient stops bleed into each other instead of reading as three
   distinct blobs. backdrop-filter on a ::before blurs the parent's own
   background without disturbing the inline `style="background:…"` setup. */
.qrt-tract-card-front.qrt-hero-design-aurora,
.qrt-tract-card-front.qrt-hero-design-mesh_sunset,
.qrt-tract-card-front.qrt-hero-design-mesh_cool,
.qrt-tract-card-front.qrt-hero-design-aurora_dream,
.qrt-tract-card-front.qrt-hero-design-mesh_bloom,
.qrt-tract-card-front.qrt-hero-design-mesh_sky,
.qrt-tract-card-front.qrt-hero-design-mesh_citrus,
.qrt-tract-card-front.qrt-hero-design-mesh_berry,
.qrt-tract-card-front.qrt-hero-design-watercolor,
.qrt-tract-card-front.qrt-hero-design-soft_glow_light {
    position: relative;
    isolation: isolate;
}
.qrt-tract-card-front.qrt-hero-design-aurora::before,
.qrt-tract-card-front.qrt-hero-design-mesh_sunset::before,
.qrt-tract-card-front.qrt-hero-design-mesh_cool::before,
.qrt-tract-card-front.qrt-hero-design-aurora_dream::before,
.qrt-tract-card-front.qrt-hero-design-mesh_bloom::before,
.qrt-tract-card-front.qrt-hero-design-mesh_sky::before,
.qrt-tract-card-front.qrt-hero-design-mesh_citrus::before,
.qrt-tract-card-front.qrt-hero-design-mesh_berry::before,
.qrt-tract-card-front.qrt-hero-design-watercolor::before,
.qrt-tract-card-front.qrt-hero-design-soft_glow_light::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 26px; /* match the base .qrt-tract-card corner radius */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

.qrt-tract-card-front.qrt-hero-design-watercolor .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Cormorant Garamond',serif); font-weight: var(--qrt-text-weight, 600); font-style: italic; letter-spacing: -0.2px; color: var(--qrt-text-color, #1e1b4b); font-size: 30px; }
.qrt-tract-card-front.qrt-hero-design-watercolor .qrt-tract-card-front-text strong { font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-watercolor .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-watercolor .qrt-brand-name { color: #1e1b4b; }

.qrt-tract-card-front.qrt-hero-design-aurora .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Inter','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.3px; color: var(--qrt-text-color, #fff); }
.qrt-tract-card-front.qrt-hero-design-aurora .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-aurora .qrt-brand, .qrt-tract-card-front.qrt-hero-design-aurora .qrt-brand-name { color: #fff; }

.qrt-tract-card-front.qrt-hero-design-mesh_sunset .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'DM Sans','Inter',sans-serif); font-weight: var(--qrt-text-weight, 800); letter-spacing: -0.3px; color: var(--qrt-text-color, #fff); }
.qrt-tract-card-front.qrt-hero-design-mesh_sunset .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-mesh_sunset .qrt-brand, .qrt-tract-card-front.qrt-hero-design-mesh_sunset .qrt-brand-name { color: #fff; }

.qrt-tract-card-front.qrt-hero-design-mesh_cool .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Manrope','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.2px; color: var(--qrt-text-color, #fff); }
.qrt-tract-card-front.qrt-hero-design-mesh_cool .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-mesh_cool .qrt-brand, .qrt-tract-card-front.qrt-hero-design-mesh_cool .qrt-brand-name { color: #fff; }

/* ─── LIGHT MESH TRIO — sibling variants on white with pastel stops ── */
.qrt-tract-card-front.qrt-hero-design-aurora_dream .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Cormorant Garamond',serif); font-weight: var(--qrt-text-weight, 600); font-style: italic; letter-spacing: -0.2px; color: var(--qrt-text-color, #1e1b4b); font-size: 30px; }
.qrt-tract-card-front.qrt-hero-design-aurora_dream .qrt-tract-card-front-text strong { font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-aurora_dream .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-aurora_dream .qrt-brand-name { color: #1e1b4b; }

.qrt-tract-card-front.qrt-hero-design-mesh_bloom .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces',serif); font-weight: var(--qrt-text-weight, 700); font-style: italic; letter-spacing: -0.4px; color: var(--qrt-text-color, #7c2d12); font-size: 28px; }
.qrt-tract-card-front.qrt-hero-design-mesh_bloom .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-mesh_bloom .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mesh_bloom .qrt-brand-name { color: #7c2d12; }

.qrt-tract-card-front.qrt-hero-design-mesh_sky .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'DM Sans','Inter',sans-serif); font-weight: var(--qrt-text-weight, 600); letter-spacing: -0.2px; color: var(--qrt-text-color, #1e293b); }
.qrt-tract-card-front.qrt-hero-design-mesh_sky .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-mesh_sky .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mesh_sky .qrt-brand-name { color: #1e293b; }

.qrt-tract-card-front.qrt-hero-design-mesh_citrus .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Poppins','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.3px; color: var(--qrt-text-color, #164e1b); }
.qrt-tract-card-front.qrt-hero-design-mesh_citrus .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-mesh_citrus .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mesh_citrus .qrt-brand-name { color: #164e1b; }

.qrt-tract-card-front.qrt-hero-design-mesh_berry .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Playfair Display',serif); font-weight: var(--qrt-text-weight, 500); font-style: italic; letter-spacing: -0.3px; color: var(--qrt-text-color, #4c0519); font-size: 30px; }
.qrt-tract-card-front.qrt-hero-design-mesh_berry .qrt-tract-card-front-text strong { font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-mesh_berry .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mesh_berry .qrt-brand-name { color: #4c0519; }

.qrt-tract-card-front.qrt-hero-design-tropical .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Poppins','Inter',sans-serif); font-weight: var(--qrt-text-weight, 800); color: var(--qrt-text-color, #0a2b2d); }
.qrt-tract-card-front.qrt-hero-design-tropical .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-tropical .qrt-brand, .qrt-tract-card-front.qrt-hero-design-tropical .qrt-brand-name { color: #0a2b2d; }

.qrt-tract-card-front.qrt-hero-design-holo_foil { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-holo_foil::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    mix-blend-mode: overlay; opacity: 0.4; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-holo_foil .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Syne','Inter',sans-serif); font-weight: var(--qrt-text-weight, 800); letter-spacing: -0.4px; color: var(--qrt-text-color, #1e1b4b); }
.qrt-tract-card-front.qrt-hero-design-holo_foil .qrt-brand, .qrt-tract-card-front.qrt-hero-design-holo_foil .qrt-brand-name { color: #1e1b4b; }

/* ─── GLASS & FROSTED ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-frost_glass,
.qrt-tract-card-front.qrt-hero-design-frosted_mint { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-frost_glass::before,
.qrt-tract-card-front.qrt-hero-design-frosted_mint::before {
    content: ''; position: absolute;
    top: 0%; left: 0%; right: 0%; bottom: 0%;
    border-radius: 26px;
    /* background: rgba(255,255,255,0.09); */
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    z-index: 2; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-frost_glass .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Montserrat'); font-weight: var(--qrt-text-weight, 800); letter-spacing: -0.2px; color: var(--qrt-text-color, #fff); }
/* Futuristic (frosted_mint) — catchphrase weight is user-selectable via
   the sidebar picker; syncHeroCard stamps --qrt-catch-weight on the card. */
.qrt-tract-card-front.qrt-hero-design-frosted_mint .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Montserrat'); font-weight: var(--qrt-text-weight, var(--qrt-catch-weight, 800)); letter-spacing: -0.2px; color: var(--qrt-text-color, #fff); }
.qrt-tract-card-front.qrt-hero-design-frost_glass .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-frost_glass .qrt-brand-name,
.qrt-tract-card-front.qrt-hero-design-frosted_mint .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-frosted_mint .qrt-brand-name { color: #fff; }

/* ─── NEO-BRUTALISM ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-brut_sun .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Space Grotesk','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.4px; color: var(--qrt-text-color, #000); }
.qrt-tract-card-front.qrt-hero-design-brut_punk .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Archivo Black','Inter',sans-serif); font-weight: var(--qrt-text-weight, 900); letter-spacing: -0.3px; color: var(--qrt-text-color, #000); }
.qrt-tract-card-front.qrt-hero-design-brut_mint .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'IBM Plex Mono',monospace); font-weight: var(--qrt-text-weight, 700); color: var(--qrt-text-color, #000); }
.qrt-tract-card-front.qrt-hero-design-brut_sun .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-brut_sun .qrt-brand-name,
.qrt-tract-card-front.qrt-hero-design-brut_punk .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-brut_punk .qrt-brand-name,
.qrt-tract-card-front.qrt-hero-design-brut_mint .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-brut_mint .qrt-brand-name { color: #000; }
.qrt-tract-card-front.qrt-hero-design-brut_mint .qrt-brand-name { font-family: 'IBM Plex Mono',monospace; }

/* ─── EDITORIAL & ELEGANT ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-editorial_ink .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces','serif'); font-weight: var(--qrt-text-weight, 900); font-style: italic; letter-spacing: -0.03em; line-height: 0.98; color: var(--qrt-text-color, #1A1A1A); font-size: 30px; }
.qrt-tract-card-front.qrt-hero-design-editorial_ink .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-editorial_ink .qrt-brand-name { color: #1A1A1A; }

.qrt-tract-card-front.qrt-hero-design-noir_serif .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Playfair Display',serif); font-weight: var(--qrt-text-weight, 900); font-style: italic; letter-spacing: -0.3px; color: var(--qrt-text-color, #fff); line-height: 1.05; }
.qrt-tract-card-front.qrt-hero-design-noir_serif .qrt-tract-card-front-text em,
.qrt-tract-card-front.qrt-hero-design-noir_serif .qrt-tract-card-front-text strong { color: var(--qrt-color2, #d4af37); font-style: italic; font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-noir_serif .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-noir_serif .qrt-brand-name { color: var(--qrt-color2, #d4af37); }

.qrt-tract-card-front.qrt-hero-design-duo_oxblood .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'DM Serif Display',serif); letter-spacing: -0.3px; color: var(--qrt-text-color, #F2E8DC); font-size: 30px; }
.qrt-tract-card-front.qrt-hero-design-duo_oxblood .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_oxblood .qrt-brand-name { color: #F2E8DC; }

.qrt-tract-card-front.qrt-hero-design-duo_matcha .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Cormorant Garamond',serif); font-weight: var(--qrt-text-weight, 600); font-style: italic; letter-spacing: -0.2px; color: var(--qrt-text-color, #1a1f0e); font-size: 32px; }
.qrt-tract-card-front.qrt-hero-design-duo_matcha .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_matcha .qrt-brand-name { color: #1a1f0e; }

/* ─── MINIMALISM & ZEN ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-mono_minimal { border: 1px solid #e5e7eb; }
.qrt-tract-card-front.qrt-hero-design-mono_minimal .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Inter','Inter',sans-serif); font-weight: var(--qrt-text-weight, 500); letter-spacing: 0px; color: var(--qrt-text-color, #0f172a); font-size: 18px; line-height: 1.45; }
.qrt-tract-card-front.qrt-hero-design-mono_minimal .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mono_minimal .qrt-brand-name { color: #000; }

.qrt-tract-card-front.qrt-hero-design-sumi_zen { position: relative; }
.qrt-tract-card-front.qrt-hero-design-sumi_zen::after {
    content: ''; position: absolute;
    top: 20%; right: 14%;
    width: 20px; height: 20px;
    background: var(--qrt-color2, #A6361F);
    border-radius: 2px;
    z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-sumi_zen .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Shippori Mincho',serif); font-weight: var(--qrt-text-weight, 500); letter-spacing: 0.08em; line-height: 1.4; text-align: left; width: 70%; margin-right: auto; padding-left: 8%; font-size: 22px; color: var(--qrt-text-color, #1C1C1C); }
.qrt-tract-card-front.qrt-hero-design-sumi_zen .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-sumi_zen .qrt-brand-name { color: #1C1C1C; }

/* ─── RETRO & PLAYFUL ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-vaporwave .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'VT323',monospace); font-size: 36px; letter-spacing: 2px; color: var(--qrt-text-color, #fff); text-shadow: 0 0 10px rgba(255,255,255,0.5), 2px 2px 0 #1a0033; }
.qrt-tract-card-front.qrt-hero-design-vaporwave .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-vaporwave .qrt-brand-name { color: #fff; font-family: 'VT323',monospace; font-size: 12px; letter-spacing: 1px; }

.qrt-tract-card-front.qrt-hero-design-memphis { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-memphis::before {
    content: ''; position: absolute; top: 80%; left: 8%;
    width: 60px; height: 3px; background: #000;
    transform: rotate(-20deg);
    box-shadow: 0 8px 0 var(--qrt-color3, #FF3366), 0 -8px 0 var(--qrt-color2, #00CCFF);
    z-index: 2; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-memphis .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Archivo Black','Inter',sans-serif); font-weight: var(--qrt-text-weight, 900); font-size: 28px; letter-spacing: -0.3px; color: var(--qrt-text-color, #000); }
.qrt-tract-card-front.qrt-hero-design-memphis .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-memphis .qrt-brand-name { color: #000; }

.qrt-tract-card-front.qrt-hero-design-cyberpunk { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-cyberpunk::before {
    content: ''; position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.02) 3px 4px),
        radial-gradient(circle at 30% 80%, color-mix(in srgb, var(--qrt-color1, #ec4899) 40%, transparent) 0, transparent 55%),
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--qrt-color2, #06b6d4) 40%, transparent) 0, transparent 55%);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-cyberpunk .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Orbitron','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); font-size: 22px; letter-spacing: 2px; text-transform: uppercase; color: var(--qrt-text-color, #fff); text-shadow: 0 0 8px var(--qrt-color1, #ec4899), 0 0 20px var(--qrt-color2, #06b6d4); }
.qrt-tract-card-front.qrt-hero-design-cyberpunk .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-cyberpunk .qrt-brand-name { color: var(--qrt-color2, #06b6d4); text-shadow: 0 0 6px var(--qrt-color2, #06b6d4); font-family: 'Orbitron','Inter',sans-serif; }

/* Claymorphism — uses real DOM elements instead of ::before/::after
   because `filter: drop-shadow` is applied BEFORE clip-path/mask-image
   (per CSS spec), which would cut the shadow off for heart/star/flower.
   Splitting it into a wrapper (.qrt-clay-obj) + inner fill (.qrt-clay-fill)
   lets the wrapper's drop-shadow process the already-clipped child, so
   the shadow follows every shape outline correctly. */
.qrt-tract-card-front.qrt-hero-design-claymorphism { position: relative; isolation: isolate; }

/* Clay wrapper — present on every card front but hidden unless the
   active design is Claymorphism. The wrapper is where `filter: drop-shadow`
   lives; shape clipping happens on the nested .qrt-clay-fill. */
.qrt-clay-obj {
    display: none;
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-clay-obj {
    display: block;
    filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.22));
}
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-clay-obj-1 {
    top: 22%; left: 22%; width: 50px; height: 50px;
    transform: rotate(-12deg);
}
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-clay-obj-2 {
    top: 28%; right: 18%; width: 40px; height: 40px;
}
/* Inner fill — handles shape clipping + the 3D gradient. Lives INSIDE
   the wrapper so the wrapper's filter applies to the already-clipped
   result, giving us shape-following drop-shadows everywhere. */
.qrt-clay-fill {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,0.55) 0%, transparent 50%),
        radial-gradient(circle at 78% 78%, rgba(0,0,0,0.22) 0%, transparent 55%),
        var(--clay-color, #ff99c8);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    box-sizing: border-box;
}
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-clay-obj-1 .qrt-clay-fill {
    --clay-color: var(--qrt-color3, #ff99c8);
}
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-clay-obj-2 .qrt-clay-fill {
    --clay-color: var(--qrt-color4, #a5d8ff);
}

/* ── Shape variants — driven by data-shape on each .qrt-clay-obj ── */
.qrt-clay-obj[data-shape="square"]   .qrt-clay-fill { border-radius: 14px; }
.qrt-clay-obj[data-shape="circle"]   .qrt-clay-fill { border-radius: 50%; }
.qrt-clay-obj[data-shape="diamond"]  .qrt-clay-fill { border-radius: 8px; transform: rotate(45deg); }
.qrt-clay-obj[data-shape="heart"]    .qrt-clay-fill {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,88 C8,60 0,22 20,12 C40,6 50,20 50,30 C50,20 60,6 80,12 C100,22 92,60 50,88 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,88 C8,60 0,22 20,12 C40,6 50,20 50,30 C50,20 60,6 80,12 C100,22 92,60 50,88 Z' fill='black'/></svg>");
}
.qrt-clay-obj[data-shape="star"] .qrt-clay-fill {
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.qrt-clay-obj[data-shape="flower"] .qrt-clay-fill {
    clip-path: polygon(50% 0,63% 18%,85% 18%,75% 40%,100% 50%,75% 60%,85% 82%,63% 82%,50% 100%,37% 82%,15% 82%,25% 60%,0 50%,25% 40%,15% 18%,37% 18%);
}

.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Nunito','Inter',sans-serif); font-weight: var(--qrt-text-weight, 900); color: var(--qrt-text-color, #4a2c4a); }
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-claymorphism .qrt-brand-name { color: #4a2c4a; }

/* ─── TEXTURE & DEPTH ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-soft_glow .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Inter','Inter',sans-serif); font-weight: var(--qrt-text-weight, 600); letter-spacing: -0.3px; color: var(--qrt-text-color, #fff); }
.qrt-tract-card-front.qrt-hero-design-soft_glow .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-soft_glow .qrt-brand-name { color: #fff; }

/* Soft Glow Light — same Inter feel as Soft Glow but slightly lighter
   weight + dark slate text to read on the white base. */
.qrt-tract-card-front.qrt-hero-design-soft_glow_light .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Poppins'); font-weight: var(--qrt-text-weight, 700); letter-spacing: 0px; color: var(--qrt-text-color, #1e293b); }
.qrt-tract-card-front.qrt-hero-design-soft_glow_light .qrt-tract-card-front-text strong { font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-soft_glow_light .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-soft_glow_light .qrt-brand-name { color: #1e293b; }

/* ─── EMOJI PATTERNS ─────────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-emoji_hearts,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt,
.qrt-tract-card-front.qrt-hero-design-emoji_praying,
.qrt-tract-card-front.qrt-hero-design-emoji_joy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/* Emoji tile repeated via background-image on ::before so its rotation is
   independent of the card. JS writes the emoji into --qrt-emoji-char at
   sync time; CSS injects it into a tiny SVG-less pattern via the char. */
.qrt-tract-card-front.qrt-hero-design-emoji_hearts::before,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt::before,
.qrt-tract-card-front.qrt-hero-design-emoji_praying::before,
.qrt-tract-card-front.qrt-hero-design-emoji_joy::before {
    content: '';
    position: absolute;
    inset: -30%;
    background-image: var(--qrt-emoji-img, none);
    background-size: 70px 70px;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt::before {
    transform: rotate(-15deg);
    inset: -40%;
}
.qrt-tract-card-front.qrt-hero-design-emoji_hearts::after,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt::after,
.qrt-tract-card-front.qrt-hero-design-emoji_praying::after,
.qrt-tract-card-front.qrt-hero-design-emoji_joy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgb(255 255 255) 0%, rgb(255 255 255 / 60%) 60%, transparent 95%);
    z-index: 2;
    pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-emoji_hearts .qrt-tract-card-front-text,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'DM Serif Display',serif); font-size: 30px; letter-spacing: -0.3px; color: var(--qrt-text-color, #881337); }
.qrt-tract-card-front.qrt-hero-design-emoji_praying .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces','serif'); font-weight: var(--qrt-text-weight, 600); font-style: italic; font-size: 28px; color: var(--qrt-text-color, #7c2d12); }
.qrt-tract-card-front.qrt-hero-design-emoji_joy .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Nunito','Inter',sans-serif); font-weight: var(--qrt-text-weight, 900); font-size: 28px; letter-spacing: -0.3px; color: var(--qrt-text-color, #831843); }
.qrt-tract-card-front.qrt-hero-design-emoji_hearts .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts .qrt-brand-name,
.qrt-tract-card-front.qrt-hero-design-emoji_hearts_tilt .qrt-brand-name { color: #881337; }
.qrt-tract-card-front.qrt-hero-design-emoji_praying .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-emoji_praying .qrt-brand-name { color: #7c2d12; }
.qrt-tract-card-front.qrt-hero-design-emoji_joy .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-emoji_joy .qrt-brand-name { color: #831843; }

/* ─── ILLUSTRATED (SVG overlays) ─────────────────────────────────────────── */
/* Each illustrated design paints its SVG via a ::before with a data-URL SVG.
   Palette slot values are injected as CSS custom props so the SVG colors
   can reference them (but since background-image can't pull CSS vars, we
   embed fixed-theme SVGs — user customizing colors changes the underlying
   bgTemplate gradient but the illustration keeps its original palette. This
   is an intentional constraint: illustrations stay consistent across tracts. */
.qrt-tract-card-front.qrt-hero-design-sunburst { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-sunburst::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='%23ea580c' opacity='0.25'><polygon points='0,60 200,0 200,10'/><polygon points='0,60 200,15 200,25'/><polygon points='0,60 200,30 200,40'/><polygon points='0,60 200,45 200,55'/><polygon points='0,60 200,60 200,70'/><polygon points='0,60 200,75 200,85'/><polygon points='0,60 200,90 200,100'/><polygon points='0,60 200,105 200,115'/></g></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-sunburst .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces','serif'); font-weight: var(--qrt-text-weight, 900); font-style: italic; letter-spacing: -0.4px; color: var(--qrt-text-color, #7c2d12); text-align: right; width: 68%; margin-left: auto; padding-right: 4%; font-size: 28px; }
.qrt-tract-card-front.qrt-hero-design-sunburst .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-sunburst .qrt-brand-name { color: #7c2d12; }

.qrt-tract-card-front.qrt-hero-design-blobs { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-blobs::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><path d='M15,40 Q5,10 40,8 T90,22 Q105,55 70,65 T20,70 Q-5,60 15,40Z' fill='%23fb923c' opacity='0.7'/><path d='M145,90 Q130,60 165,50 T195,70 Q205,100 180,110 T145,90Z' fill='%23ec4899' opacity='0.55'/><path d='M100,108 Q80,90 100,75 T130,98 Q125,118 100,108Z' fill='%23fcd34d' opacity='0.7'/></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-blobs .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Nunito','Inter',sans-serif); font-weight: var(--qrt-text-weight, 900); color: var(--qrt-text-color, #7c2d12); }
.qrt-tract-card-front.qrt-hero-design-blobs .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-blobs .qrt-brand-name { color: #7c2d12; }

.qrt-tract-card-front.qrt-hero-design-waves { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-waves::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><path d='M0,120 C100,80 200,160 400,100 L400,200 L0,200 Z' fill='%232dd4bf' opacity='0.55'/><path d='M0,140 C100,110 200,180 400,130 L400,200 L0,200 Z' fill='%2314b8a6' opacity='0.7'/><path d='M0,170 C100,150 200,190 400,160 L400,200 L0,200 Z' fill='%230d9488'/></svg>");
    background-size: 100% 100%; background-position: bottom; background-repeat: no-repeat;
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-waves .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Poppins','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); color: var(--qrt-text-color, #0f766e); }
.qrt-tract-card-front.qrt-hero-design-waves .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-waves .qrt-brand-name { color: #fff; }

.qrt-tract-card-front.qrt-hero-design-mountains { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-mountains::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><polygon points='0,200 0,130 80,70 150,140 200,100 280,150 340,80 400,130 400,200' fill='%23881337' opacity='0.8'/><polygon points='0,200 0,160 60,120 130,170 210,130 290,170 360,130 400,160 400,200' fill='%235c0e2e'/><circle cx='310' cy='55' r='18' fill='%23fbbf24' opacity='0.95'/></svg>");
    background-size: 100% 100%; background-position: bottom; background-repeat: no-repeat;
    z-index: 1; pointer-events: none; transform: translateY(15px);
}
.qrt-tract-card-front.qrt-hero-design-mountains .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces','serif'); font-weight: var(--qrt-text-weight, 900); color: var(--qrt-text-color, #5c0e2e); }
.qrt-tract-card-front.qrt-hero-design-mountains .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mountains .qrt-brand-name { color: #fff; }

.qrt-tract-card-front.qrt-hero-design-constellation { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-constellation::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='xMidYMid slice'><g stroke='%23a5b4fc' stroke-width='0.8' fill='none' opacity='0.55'><line x1='40' y1='30' x2='90' y2='55'/><line x1='90' y1='55' x2='140' y2='40'/><line x1='140' y1='40' x2='180' y2='80'/><line x1='180' y1='80' x2='230' y2='50'/><line x1='230' y1='50' x2='290' y2='90'/><line x1='290' y1='90' x2='350' y2='60'/></g><g fill='%23fef9c3'><circle cx='40' cy='30' r='2'/><circle cx='90' cy='55' r='2.5'/><circle cx='140' cy='40' r='2'/><circle cx='180' cy='80' r='3'/><circle cx='230' cy='50' r='2'/><circle cx='290' cy='90' r='2.5'/><circle cx='350' cy='60' r='2'/><circle cx='60' cy='150' r='1.5' opacity='0.6'/><circle cx='120' cy='170' r='1' opacity='0.5'/><circle cx='260' cy='160' r='1.5' opacity='0.6'/><circle cx='330' cy='180' r='1' opacity='0.5'/></g></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-constellation .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Playfair Display',serif); font-style: italic; letter-spacing: -0.2px; color: var(--qrt-text-color, #fef9c3); }
.qrt-tract-card-front.qrt-hero-design-constellation .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-constellation .qrt-brand-name { color: #fef9c3; }

.qrt-tract-card-front.qrt-hero-design-botanical { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-botanical::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23166534' stroke-width='1.2' stroke-linecap='round' opacity='0.6'><path d='M10,170 Q20,140 40,130 Q55,125 60,140'/><path d='M15,160 Q25,155 35,150'/><path d='M22,170 Q30,160 42,155'/><path d='M390,30 Q370,50 355,60 Q345,66 352,75'/><path d='M385,35 Q378,45 370,50'/><path d='M378,25 Q368,35 360,45'/></g><g fill='%2322c55e' opacity='0.5'><ellipse cx='30' cy='140' rx='10' ry='4' transform='rotate(-25 30 140)'/><ellipse cx='50' cy='150' rx='8' ry='3' transform='rotate(-15 50 150)'/><ellipse cx='370' cy='55' rx='10' ry='4' transform='rotate(140 370 55)'/><ellipse cx='360' cy='45' rx='8' ry='3' transform='rotate(155 360 45)'/></g></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-botanical .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Cormorant Garamond',serif); font-weight: var(--qrt-text-weight, 600); font-style: italic; letter-spacing: -0.2px; color: var(--qrt-text-color, #14532d); font-size: 30px; }
.qrt-tract-card-front.qrt-hero-design-botanical .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-botanical .qrt-brand-name { color: #14532d; }

.qrt-tract-card-front.qrt-hero-design-geometric { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-geometric::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='%23fbbf24' opacity='0.7'><polygon points='20,30 28,38 20,46 12,38'/><polygon points='180,60 188,68 180,76 172,68'/><polygon points='50,100 56,106 50,112 44,106'/></g><g fill='none' stroke='%2322d3ee' stroke-width='1.2' opacity='0.55'><circle cx='170' cy='30' r='8'/><circle cx='30' cy='80' r='6'/><line x1='100' y1='15' x2='100' y2='25'/><line x1='95' y1='20' x2='105' y2='20'/><line x1='145' y1='95' x2='145' y2='105'/><line x1='140' y1='100' x2='150' y2='100'/></g></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-geometric .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Space Grotesk','Inter',sans-serif); font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.3px; color: var(--qrt-text-color, #f1f5f9); }
.qrt-tract-card-front.qrt-hero-design-geometric .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-geometric .qrt-brand-name { color: #f1f5f9; }

.qrt-tract-card-front.qrt-hero-design-scribble { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-scribble::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round'><path d='M100,130 Q180,120 220,128 T320,125' opacity='0.9'/><path d='M100,136 Q170,130 220,134 T320,133' opacity='0.75'/></g><g fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round'><path d='M340,40 Q360,30 370,48 Q378,60 360,62 Q348,54 356,44' opacity='0.8'/><path d='M350,64 L360,78 L348,76 M360,78 L358,66'/></g></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-scribble .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces','serif'); font-weight: var(--qrt-text-weight, 900); letter-spacing: -0.6px; color: var(--qrt-text-color, #0f172a); font-size: 32px; }
.qrt-tract-card-front.qrt-hero-design-scribble .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-scribble .qrt-brand-name { color: #0f172a; }

.qrt-tract-card-front.qrt-hero-design-splash { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-splash::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='xMidYMid slice'><defs><radialGradient id='g1' cx='30%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23c084fc' stop-opacity='0.7'/><stop offset='100%25' stop-color='%23c084fc' stop-opacity='0'/></radialGradient><radialGradient id='g2' cx='70%25' cy='55%25' r='40%25'><stop offset='0%25' stop-color='%23f472b6' stop-opacity='0.65'/><stop offset='100%25' stop-color='%23f472b6' stop-opacity='0'/></radialGradient></defs><rect width='400' height='200' fill='url(%23g1)'/><rect width='400' height='200' fill='url(%23g2)'/><g fill='%23a855f7' opacity='0.35'><circle cx='80' cy='60' r='3'/><circle cx='320' cy='40' r='2'/><circle cx='200' cy='150' r='2.5'/><circle cx='350' cy='140' r='2'/></g></svg>");
    background-size: cover; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-splash .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Fraunces','serif'); font-style: italic; font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.3px; color: var(--qrt-text-color, #581c87); }
.qrt-tract-card-front.qrt-hero-design-splash .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-splash .qrt-brand-name { color: #581c87; }

.qrt-tract-card-front.qrt-hero-design-retro_grid { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-retro_grid::before {
    content: ''; position: absolute; inset: 50% 0 0 0;
    background-image:
        linear-gradient(90deg, transparent 48%, #06b6d4 49%, #06b6d4 51%, transparent 52%),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(6,182,212,0.7) 18px 20px),
        repeating-linear-gradient(90deg, transparent 0 30px, rgba(6,182,212,0.5) 30px 32px);
    transform: perspective(220px) rotateX(55deg); transform-origin: top;
    z-index: 1; opacity: 0.9; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-retro_grid .qrt-tract-card-front-text { font-family: var(--qrt-text-font, 'Orbitron','Inter',sans-serif); font-weight: var(--qrt-text-weight, 900); letter-spacing: 3px; text-transform: uppercase; color: var(--qrt-text-color, #fff); text-shadow: 0 0 10px var(--qrt-color3, #ec4899), 0 0 20px var(--qrt-color3, #ec4899); transform: translateY(-20px); }
.qrt-tract-card-front.qrt-hero-design-retro_grid .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-retro_grid .qrt-brand-name { color: #fff; }


/* CSS for category headers inside the design-picker modal */
.qrt-card-design-cat-head {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    margin: 14px 4px 15px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}
.qrt-card-design-cat-head:first-child { margin-top: 4px; }
.qrt-card-design-cat-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, 260px);
    justify-content: center;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   V2 CARD DESIGNS — front-side per-design rules.
   Each section mirrors the gallery in /CSS/images/card-designs-gallery-v2.html.
   Card aspect is 1.75:1 (same as gallery).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── EDITORIAL — Bodoni Couture ────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-bodoni_couture { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-bodoni_couture .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Bodoni Moda', serif);
    font-weight: var(--qrt-text-weight, 400); letter-spacing: -0.2px;
    color: var(--qrt-text-color, #f7f1e3);
}
.qrt-tract-card-front.qrt-hero-design-bodoni_couture .qrt-tract-card-front-text strong {
    font-style: italic; font-weight: 500; color: var(--qrt-color3, #d6b06b);
}
.qrt-tract-card-front.qrt-hero-design-bodoni_couture .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-bodoni_couture .qrt-brand-name { color: #f7f1e3; }
.qrt-tract-card-front.qrt-hero-design-bodoni_couture::before,
.qrt-tract-card-front.qrt-hero-design-bodoni_couture::after {
    content: ''; position: absolute; left: 18%; right: 18%; height: 1px;
    background: rgba(247,241,227,0.4); z-index: 3; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-bodoni_couture::before { top: 18%; }
.qrt-tract-card-front.qrt-hero-design-bodoni_couture::after  { bottom: 18%; }

/* ─── EDITORIAL — Letterpress Cream ─────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-letterpress_cream {
    box-shadow: inset 0 0 80px rgba(0,0,0,0.06), 0 4px 16px rgba(15,23,42,0.18);
}
.qrt-tract-card-front.qrt-hero-design-letterpress_cream .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Fraunces', serif);
    font-weight: var(--qrt-text-weight, 600); letter-spacing: -0.4px;
    color: var(--qrt-text-color, transparent);
    text-shadow:
        0 1px 0 rgba(255,255,255,0.65),
        0 -1px 0 rgba(60,40,20,0.45),
        0 0 1px rgba(60,40,20,0.4);
}
.qrt-tract-card-front.qrt-hero-design-letterpress_cream .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-letterpress_cream .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-letterpress_cream .qrt-brand-name {
    color: rgba(60,40,20,0.6); text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* ─── EDITORIAL — Mono Word ─────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-mono_word { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-mono_word .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Archivo Black', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 900); letter-spacing: -2px; text-transform: uppercase;
    line-height: 0.95;
    background: linear-gradient(180deg,#fff 0%, #999 100%);
    -webkit-background-clip: text; background-clip: text; color: var(--qrt-text-color, transparent);
}
.qrt-tract-card-front.qrt-hero-design-mono_word .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-mono_word .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mono_word .qrt-brand-name { color: #aaa; }

/* ─── DUAL-FONT — CMYK Process ──────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-cmyk_process { position: relative; isolation: isolate; --qrt-cursive-font: 'Dancing Script', cursive; }
.qrt-tract-card-front.qrt-hero-design-cmyk_process .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 800); letter-spacing: -0.4px; color: var(--qrt-text-color, #111);
}
.qrt-tract-card-front.qrt-hero-design-cmyk_process .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 700; font-style: normal; font-size: calc(var(--qrt-catch-fontsize, 22px) + 22px);
    background: var(--qrt-text-gradient, linear-gradient(90deg, #00b6e1 0%, #ff009d 50%, #ffe800 100%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0px 4px; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-cmyk_process .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-cmyk_process .qrt-brand-name { color: #4b5563; }
/* ─── DUAL-FONT — Cream Cursive (Poppins + Dancing Script) ───────── */
.qrt-tract-card-front.qrt-hero-design-duo_cream { position: relative; isolation: isolate; --qrt-cursive-font: 'Dancing Script', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_cream .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Poppins', sans-serif); font-weight: var(--qrt-text-weight, 600); color: var(--qrt-text-color, #2a2418); letter-spacing: 0.5px;
}
.qrt-tract-card-front.qrt-hero-design-duo_cream .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 700; font-style: italic; font-size: calc(var(--qrt-catch-fontsize, 22px) + 20px);
    color: #b58a3b; line-height: 1; margin: 0 0.06em;
}
.qrt-tract-card-front.qrt-hero-design-duo_cream .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_cream .qrt-brand-name { color: #6b5a3a; }
.qrt-tract-card-front.qrt-hero-design-duo_cream::before {
    content: ''; position: absolute; inset: 8px;
    border: 1px solid rgba(181,138,59,0.35); border-radius: 12px;
    pointer-events: none; z-index: 2;
}

/* ─── DUAL-FONT — Coral Note (Inter + Caveat) ────────────────────── */
.qrt-tract-card-front.qrt-hero-design-duo_coral { position: relative; isolation: isolate; --qrt-cursive-font: 'Caveat', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_coral .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Inter', sans-serif); font-weight: var(--qrt-text-weight, 500); color: var(--qrt-text-color, #f3f0e6); letter-spacing: -0.2px;
}
.qrt-tract-card-front.qrt-hero-design-duo_coral .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 700; font-style: italic; font-size: calc(var(--qrt-catch-fontsize, 22px) + 25px);
    color: #ff8d6b; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-duo_coral .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_coral .qrt-brand-name { color: #f3f0e6; opacity: 0.75; }
.qrt-tract-card-front.qrt-hero-design-duo_coral::after {
    content: ''; position: absolute; left: 50%; top: 69%;
    width: 80px; height: 8px;
    background: radial-gradient(ellipse, rgba(255,141,107,0.45), transparent 70%);
    transform: translateX(-50%); pointer-events: none; z-index: 2;
}

/* ─── DUAL-FONT — Sunset Pacifico (DM Sans + Pacifico) ───────────── */
.qrt-tract-card-front.qrt-hero-design-duo_peach { position: relative; isolation: isolate; --qrt-cursive-font: 'Pacifico', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_peach .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'DM Sans', 'Inter', sans-serif); font-weight: var(--qrt-text-weight, 600); color: var(--qrt-text-color, #43122a);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
}
.qrt-tract-card-front.qrt-hero-design-duo_peach .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 400; font-style: italic; font-size: calc(var(--qrt-catch-fontsize, 22px) + 20px);
    color: #fffaf1; text-shadow: 0 2px 0 rgba(67,18,42,0.25);
    line-height: 1;
    margin: 0 5px;
    transform: translateY(-5px);
}
.qrt-tract-card-front.qrt-hero-design-duo_peach .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_peach .qrt-brand-name { color: #5a1f3a; }

/* ─── DUAL-FONT — Forest Allura (Plus Jakarta + Allura) ──────────── */
.qrt-tract-card-front.qrt-hero-design-duo_forest { position: relative; isolation: isolate; --qrt-cursive-font: 'Allura', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_forest .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Plus Jakarta Sans', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 500); color: var(--qrt-text-color, #f3ead2);
    letter-spacing: 0.5px; text-transform: uppercase;
    display: flex;
    align-items: baseline;
}
.qrt-tract-card-front.qrt-hero-design-duo_forest .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 400; font-style: italic; font-size: calc(var(--qrt-catch-fontsize, 22px) + 40px);
    color: #d4af6a; text-transform: none; letter-spacing: -1px;
    line-height: 1; margin: 0 5px; transform: translateY(7px);
}
.qrt-tract-card-front.qrt-hero-design-duo_forest .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_forest .qrt-brand-name { color: #d4af6a; opacity: 0.85; }

/* ─── DUAL-FONT — Ivory Vibes (Manrope + Great Vibes) ────────────── */
.qrt-tract-card-front.qrt-hero-design-duo_ivory { position: relative; isolation: isolate; --qrt-cursive-font: 'Great Vibes', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_ivory .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Manrope', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 600); color: var(--qrt-text-color, #2c2418);
    letter-spacing: 0.5px; text-transform: uppercase;
    display: flex;
    align-items: baseline;
}
.qrt-tract-card-front.qrt-hero-design-duo_ivory .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 400;
    font-style: italic;
    font-size: calc(var(--qrt-catch-fontsize, 22px) + 40px);
    color: #8a6f3a;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 4px;
    transform: translateY(7px);
}
.qrt-tract-card-front.qrt-hero-design-duo_ivory .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_ivory .qrt-brand-name { color: #8a6f3a; }
.qrt-tract-card-front.qrt-hero-design-duo_ivory::before,
.qrt-tract-card-front.qrt-hero-design-duo_ivory::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 60px; height: 1px; background: #8a6f3a;
    pointer-events: none; z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-duo_ivory::before { top: 22px; }
.qrt-tract-card-front.qrt-hero-design-duo_ivory::after  { bottom: 22px; }

/* ─── DUAL-FONT — Midnight Yellow (Space Grotesk + Yellowtail) ───── */
.qrt-tract-card-front.qrt-hero-design-duo_midnight { position: relative; isolation: isolate; --qrt-cursive-font: 'Yellowtail', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_midnight .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 500); color: var(--qrt-text-color, #e6f4f7);
    display: flex;
    align-items: center;
    letter-spacing: 0px;
}
.qrt-tract-card-front.qrt-hero-design-duo_midnight .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 400; font-style: normal; font-size: calc(var(--qrt-catch-fontsize, 22px) + 30px);
    color: #f4d35e; line-height: 1; margin: 0 7px;
    transform: translateY(-5px);
}
.qrt-tract-card-front.qrt-hero-design-duo_midnight .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_midnight .qrt-brand-name { color: #f4d35e; opacity: 0.8; }

/* ─── DUAL-FONT — Blush Sacramento (Poppins + Sacramento) ────────── */
.qrt-tract-card-front.qrt-hero-design-duo_blush { position: relative; isolation: isolate; --qrt-cursive-font: 'Sacramento', cursive; }
.qrt-tract-card-front.qrt-hero-design-duo_blush .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Poppins', sans-serif); font-weight: var(--qrt-text-weight, 600); color: var(--qrt-text-color, #5a2a35);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}
.qrt-tract-card-front.qrt-hero-design-duo_blush .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-weight: 400;
    font-style: italic;
    font-size: calc(var(--qrt-catch-fontsize, 22px) + 38px);
    color: #b94e6d;
    line-height: 1;
    margin: 0 8px;
    transform: translateY(-3px);
}
.qrt-tract-card-front.qrt-hero-design-duo_blush .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_blush .qrt-brand-name { color: #b94e6d; color: #000; opacity: 0.85; }

/* ─── DUAL-FONT — Academic Italic (Inter + Lora italic) ──────────── */
.qrt-tract-card-front.qrt-hero-design-duo_academic { position: relative; isolation: isolate; --qrt-cursive-font: 'Lora', serif; }
.qrt-tract-card-front.qrt-hero-design-duo_academic .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Inter', sans-serif); font-weight: var(--qrt-text-weight, 500); color: var(--qrt-text-color, #1f1d18);
}
.qrt-tract-card-front.qrt-hero-design-duo_academic .qrt-tract-card-front-text strong {
    font-family: var(--qrt-cursive-font);
    font-style: italic; font-weight: 600; font-size: calc(var(--qrt-catch-fontsize, 22px) + 3px);
    color: #7a3232; margin: 0 0.06em;
}
.qrt-tract-card-front.qrt-hero-design-duo_academic .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-duo_academic .qrt-brand-name { color: #7a3232; opacity: 0.7; }
.qrt-tract-card-front.qrt-hero-design-duo_academic::before {
    content: ''; position: absolute; left: 26px; right: 26px; bottom: 36px;
    height: 1px; background: rgba(0,0,0,0.18);
    pointer-events: none; z-index: 2;
}

/* ─── RETRO / VINTAGE — Sunset '74 ──────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-sunset_74 { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-sunset_74 .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Fraunces', serif);
    font-weight: var(--qrt-text-weight, 700); font-style: italic; letter-spacing: -0.2px;
    color: var(--qrt-text-color, #2b160a); position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-sunset_74 .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-sunset_74::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 220%; height: 220%; transform: translate(-50%,-50%);
    background:
      radial-gradient(circle, transparent 0 26%, rgba(43,22,10,0.18) 26.5% 27%, transparent 27.5% 33%),
      radial-gradient(circle, transparent 0 36%, rgba(43,22,10,0.12) 36.5% 37%, transparent 37.5% 44%),
      radial-gradient(circle, transparent 0 48%, rgba(43,22,10,0.08) 48.5% 49%, transparent 49.5% 100%);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-sunset_74 .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-sunset_74 .qrt-brand-name { color: #2b160a; }

/* ─── RETRO / VINTAGE — Mid-Century Kidney ──────────────────────── */
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'DM Sans', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.2px;
    color: var(--qrt-text-color, #2a2014); position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney::before {
    content: ''; position: absolute; top: -18%; right: -12%;
    width: 38%; aspect-ratio: 1; border-radius: 50%;
    background: var(--qrt-color2, #c4612e); opacity: 0.85;
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney::after {
    content: ''; position: absolute; bottom: -22%; left: -8%;
    width: 30%; height: 32%; border-radius: 50%;
    background: var(--qrt-color3, #4a7a6b); opacity: 0.85;
    transform: rotate(-12deg);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-mid_century_kidney .qrt-brand-name { color: #2a2014; }

/* ─── RETRO / VINTAGE — Sepia Postcard ──────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-sepia_postcard { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-sepia_postcard::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(60,30,10,0.35) 100%);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-sepia_postcard::after {
    content: ''; position: absolute; inset: 12px;
    border: 2px dashed rgba(60,30,10,0.35); border-radius: 12px;
    z-index: 2; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-sepia_postcard .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Lora', serif);
    font-style: italic; font-weight: var(--qrt-text-weight, 600); letter-spacing: -0.1px;
    color: var(--qrt-text-color, #3a2410); position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-sepia_postcard .qrt-tract-card-front-text strong { font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-sepia_postcard .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-sepia_postcard .qrt-brand-name { color: #3a2410; }

/* ─── MINIMAL / SWISS — Bauhaus Primary ─────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary::before {
    content: ''; position: absolute; top: 0; left: 0; width: 38%; height: 100%;
    background: #c62a2a; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary::after {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 20%; aspect-ratio: 1; border-radius: 50%;
    background: var(--qrt-color3, #f5c518);
    transform: translate(20%, 20%);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Archivo Black', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 900); letter-spacing: -0.4px; text-transform: uppercase; line-height: 1.05;
    color: var(--qrt-text-color, #fff); mix-blend-mode: difference;
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-bauhaus_primary .qrt-brand-name { color: #fff; mix-blend-mode: difference; }

/* ─── MINIMAL / SWISS — Numeric Grid ────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-numeric_grid {
    position: relative; isolation: isolate;
    background-image:
      linear-gradient(0deg, rgba(0,0,0,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    background-color: var(--qrt-color1, #f3f3f0) !important;
}
.qrt-tract-card-front.qrt-hero-design-numeric_grid::before {
    content: '01'; position: absolute; right: 14px; top: -10px;
    font-family: 'Archivo Black', 'Inter', sans-serif;
    font-size: 110px; line-height: 1; color: rgba(0,0,0,0.06);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-numeric_grid .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.2px; color: var(--qrt-text-color, #111);
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-numeric_grid .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-numeric_grid .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-numeric_grid .qrt-brand-name { color: #111; }

/* ─── MINIMAL / SWISS — Helvetica Dot ───────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-helvetica_dot { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-helvetica_dot::before {
    content: ''; position: absolute; left: 22px; top: 22px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--qrt-color2, #e3242b);
    z-index: 3; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-helvetica_dot .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Inter', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 600); letter-spacing: -0.4px; color: var(--qrt-text-color, #111);
}
.qrt-tract-card-front.qrt-hero-design-helvetica_dot .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-helvetica_dot .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-helvetica_dot .qrt-brand-name { color: #111; }

/* ─── Y2K — Liquid Chrome ───────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-liquid_chrome { position: relative; isolation: isolate; filter: contrast(1.05); }
.qrt-tract-card-front.qrt-hero-design-liquid_chrome .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Inter', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 900); letter-spacing: -0.6px;
    background: linear-gradient(180deg,#fafcff 0%, #6c7591 50%, #fafcff 100%);
    -webkit-background-clip: text; background-clip: text; color: var(--qrt-text-color, transparent);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.qrt-tract-card-front.qrt-hero-design-liquid_chrome .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-liquid_chrome .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-liquid_chrome .qrt-brand-name { color: #14182a; }

/* ─── Y2K — Oil-Slick Iridescent ────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-oil_slick { position: relative; isolation: isolate; filter: saturate(1.1); }
.qrt-tract-card-front.qrt-hero-design-oil_slick::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 30% 70%, rgba(255,255,255,0.55), transparent 60%);
    mix-blend-mode: screen; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-oil_slick .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 800); letter-spacing: -0.4px; color: var(--qrt-text-color, #2a1640);
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-oil_slick .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-oil_slick .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-oil_slick .qrt-brand-name { color: #2a1640; }

/* ─── GEOMETRIC — Stained Glass ─────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-stained_glass { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-stained_glass::before {
    /* Four clip-path tiles via layered gradients (we can't add inline DOM,
       so we paint each tile with a clip-path on a stacked pseudo). */
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(135deg, var(--qrt-color2, #3b6ea8) 0%, #1d3b66 100%);
    clip-path: polygon(0 0, 50% 0, 39% 60%, 0 48%);
    opacity: 0.85; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-stained_glass::after {
    content: ''; position: absolute; inset: 0;
    background:
      /* tile 2 — top right */
      linear-gradient(135deg, var(--qrt-color3, #7e3a8a) 0%, #3a1656 100%) 0 0/100% 100% no-repeat;
    clip-path: polygon(48% 0, 100% 0, 100% 70%, 60% 42%);
    opacity: 0.85; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-stained_glass .qrt-stained-tile {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-stained_glass .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Cormorant Garamond', serif);
    font-style: italic; font-weight: var(--qrt-text-weight, 600); letter-spacing: -0.1px;
    color: var(--qrt-text-color, #fff); text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-stained_glass .qrt-tract-card-front-text strong { font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-stained_glass .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-stained_glass .qrt-brand-name { color: #fff; }

/* ─── GEOMETRIC — Hex Mosaic ────────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-hex_mosaic {
    position: relative; isolation: isolate;
    background-image:
      radial-gradient(circle at 50% 50%, rgba(124,140,255,0.18) 0 18px, transparent 19px),
      linear-gradient(60deg, transparent 49%, rgba(124,140,255,0.06) 49% 51%, transparent 51%),
      linear-gradient(-60deg, transparent 49%, rgba(124,140,255,0.06) 49% 51%, transparent 51%),
      linear-gradient(0deg,   transparent 49%, rgba(124,140,255,0.06) 49% 51%, transparent 51%) !important;
    background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px !important;
    background-color: var(--qrt-color1, #0d1018) !important;
}
.qrt-tract-card-front.qrt-hero-design-hex_mosaic .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Manrope', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.4px; color: var(--qrt-text-color, #f0f4ff);
}
.qrt-tract-card-front.qrt-hero-design-hex_mosaic .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-hex_mosaic .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-hex_mosaic .qrt-brand-name { color: #f0f4ff; }

/* ─── GEOMETRIC — Low-Poly Dusk ─────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-low_poly_dusk { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-low_poly_dusk::before {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(140deg, rgba(255,255,255,0.06) 0 49.7%, transparent 49.8%),
      linear-gradient(60deg,  rgba(0,0,0,0.18) 0 49.7%, transparent 49.8%),
      linear-gradient(20deg,  rgba(255,255,255,0.04) 0 49.7%, transparent 49.8%);
    background-size: 60% 60%, 50% 50%, 70% 70%;
    background-position: 0 0, 100% 0, 50% 100%;
    background-repeat: no-repeat;
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-low_poly_dusk .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.3px;
    color: var(--qrt-text-color, #fff7ec); text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-low_poly_dusk .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-low_poly_dusk .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-low_poly_dusk .qrt-brand-name { color: #fff7ec; }

/* ─── MODERN GRADIENTS — Riso Duo ───────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-riso_duo { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-riso_duo::before {
    content: ''; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px;
    background: radial-gradient(60% 60% at 70% 30%, var(--qrt-color2, #2657c8) 0%, transparent 65%);
    mix-blend-mode: multiply; opacity: 0.42; filter: blur(0.5px);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-riso_duo::after {
    content: ''; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px;
    background: radial-gradient(55% 55% at 30% 70%, var(--qrt-color3, #ff5c4e) 0%, transparent 65%);
    mix-blend-mode: multiply; opacity: 0.5; filter: blur(0.5px);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-riso_duo .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Space Grotesk', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 800); letter-spacing: -0.4px; color: var(--qrt-text-color, #1a1a14);
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-riso_duo .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-riso_duo .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-riso_duo .qrt-brand-name { color: #1a1a14; }

/* ─── MODERN GRADIENTS — Pastel Mesh ────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-pastel_mesh { position: relative; isolation: isolate; }
.qrt-tract-card-front.qrt-hero-design-pastel_mesh::before {
    content: ''; position: absolute; inset: 0; border-radius: 26px;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    z-index: 0; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-pastel_mesh .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Plus Jakarta Sans', sans-serif);
    font-weight: var(--qrt-text-weight, 700); letter-spacing: -0.4px; color: var(--qrt-text-color, #2a2230);
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-pastel_mesh .qrt-tract-card-front-text strong { font-weight: 800; }
.qrt-tract-card-front.qrt-hero-design-pastel_mesh .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-pastel_mesh .qrt-brand-name { color: #2a2230; }

/* ─── BIG TYPE — Big Italic Gradient ────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-big_italic_gradient { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-big_italic_gradient::before {
    content: ''; position: absolute; left: -40%; top: -40%; width: 180%; height: 180%;
    background: radial-gradient(closest-side, rgba(196,181,253,0.18), transparent 70%);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-big_italic_gradient .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Fraunces', serif);
    font-style: italic; font-weight: var(--qrt-text-weight, 900); letter-spacing: -2px; padding: 4px;
    /* Gradient-clipped text — color is forced transparent so the gradient
       shows through. User edits the stops via the Text Gradient Stops row. */
    background: var(--qrt-text-gradient, linear-gradient(135deg, #ffd6f0 0%, #c4b5fd 50%, #74e0ff 100%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative; z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-big_italic_gradient .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-big_italic_gradient .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-big_italic_gradient .qrt-brand-name { color: #c4b5fd; }

/* ─── BIG TYPE — Outline Yellow ─────────────────────────────────── */
.qrt-tract-card-front.qrt-hero-design-outline_yellow { position: relative; isolation: isolate; overflow: hidden; }
.qrt-tract-card-front.qrt-hero-design-outline_yellow::after {
    content: ''; position: absolute; left: 22px; top: 22px;
    width: 18px; height: 18px; background: #111; border-radius: 50%;
    z-index: 3; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-outline_yellow .qrt-tract-card-front-text {
    font-family: var(--qrt-text-font, 'Archivo Black', 'Inter', sans-serif);
    font-weight: var(--qrt-text-weight, 900); letter-spacing: -2px; text-transform: uppercase; line-height: 0.95;
    -webkit-text-stroke: 2px #111;
    color: var(--qrt-text-color, transparent);
}
.qrt-tract-card-front.qrt-hero-design-outline_yellow .qrt-tract-card-front-text strong { font-weight: 900; }
.qrt-tract-card-front.qrt-hero-design-outline_yellow .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-outline_yellow .qrt-brand-name { color: #111; }

/* ════════════════════════════════════════════════════════════════
   CUSTOM-LAYOUT DESIGNS — Tickets & Passes / Cards · Credit & Finance
   --------------------------------------------------------------------
   These designs do NOT use the universal `.qrt-tract-card-front-text`
   catchphrase or the `.qrt-brand` block. Instead the renderer emits a
   hardcoded inner HTML blob with `.qrt-cl-*` child classes that the
   rules below position. Universal CSS that targets the catchphrase or
   brand-name on the front card naturally just no-ops here because the
   matching elements aren't in the DOM.
   ════════════════════════════════════════════════════════════════ */

/* Common reset for any custom-layout front. The standard front uses
   flex centering of `.qrt-tract-card-front-text`; we override that to
   `position: relative; display: block;` so per-slot absolute positioning
   from each design rule works as in the v4 gallery. */
.qrt-tract-card-front[data-custom-layout="1"] {
    display: block;
    padding: 0;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* ─── 1.1 Admit One ─── */
.qrt-tract-card-front.qrt-hero-design-admit {
    background: linear-gradient(180deg, #c0392b 0%, #962d22 100%);
    color: #fff5e0; font-family: 'Limelight', serif;
}
.qrt-tract-card-front.qrt-hero-design-admit::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 28%;
    border-left: 2px dashed rgba(255,245,224,0.55); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-admit .qrt-cl-stub {
    position: absolute; left: 0; top: 0; bottom: 0; width: 28%;
    display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-admit .qrt-cl-stub-num {
    font-size: 11px; letter-spacing: 3px; color: rgba(255,245,224,0.72); margin-bottom: 4px;
}
.qrt-tract-card-front.qrt-hero-design-admit .qrt-cl-stub-one {
    font-size: 38px; line-height: 1; color: #fff5e0;
}
.qrt-tract-card-front.qrt-hero-design-admit .qrt-cl-stub-label {
    font-size: 10px; letter-spacing: 1.5px; color: rgba(255,245,224,0.78); margin-top: 6px;
}
.qrt-tract-card-front.qrt-hero-design-admit .qrt-cl-main {
    position: absolute; left: 30%; right: 4%; top: 50%; transform: translateY(-50%);
    font-size: 30px; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.qrt-tract-card-front.qrt-hero-design-admit .qrt-cl-corner {
    position: absolute; top: 8px; right: 12px; font-family: 'Courier Prime', monospace;
    font-size: 9px; letter-spacing: 1.5px; color: rgba(255,245,224,0.72); z-index: 3;
}

/* ─── 1.2 Golden Ticket ─── */
.qrt-tract-card-front.qrt-hero-design-golden_ticket {
    background: radial-gradient(120% 90% at 50% 30%, #fff3a8 0%, #f5c93a 32%, #b88515 80%, #8a5a0a 100%);
    color: #3a2806; font-family: 'Cinzel Decorative', serif;
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket::before {
    content: ""; position: absolute; inset: 9px; border: 2px solid #6b3f08;
    border-radius: 10px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket::after {
    content: ""; position: absolute; inset: 14px; border: 1px solid rgba(107,63,8,0.55);
    border-radius: 7px; z-index: 1;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 8px);
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-topline {
    position: absolute; top: 26px; left: 0; right: 0; z-index: 3;
    font-size: 10px; letter-spacing: 6px; color: #6b3f08; font-weight: 700;
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-main {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 30px; font-weight: 700; z-index: 3;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.18);
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-botline {
    position: absolute; bottom: 30px; left: 0; right: 0; z-index: 3;
    font-size: 9px; letter-spacing: 4px; color: #6b3f08;
    font-family: 'Inter', sans-serif; font-weight: 800;
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-star {
    position: absolute; z-index: 2; font-family: 'Cinzel', serif; font-size: 16px; color: #6b3f08;
}
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-star.s1 { top: 30px; left: 28px; }
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-star.s2 { top: 30px; right: 28px; }
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-star.s3 { bottom: 28px; left: 28px; }
.qrt-tract-card-front.qrt-hero-design-golden_ticket .qrt-cl-star.s4 { bottom: 28px; right: 28px; }

/* ─── 1.3 Ticket to Heaven ─── */
.qrt-tract-card-front.qrt-hero-design-heaven_ticket {
    background: radial-gradient(60% 100% at 100% 50%, rgba(255,255,255,0.55) 0%, transparent 50%),
        linear-gradient(180deg, #cfe7ff 0%, #6db7ee 60%, #3984c8 100%);
    color: #0e2540; font-family: 'Cinzel', serif;
}
.qrt-tract-card-front.qrt-hero-design-heaven_ticket::before {
    content: ""; position: absolute; left: -10px; right: -10px; bottom: -34px; height: 80px;
    background:
        radial-gradient(42px 36px at 12% 70%, #fff 99%, transparent 100%),
        radial-gradient(52px 44px at 30% 62%, #fff 99%, transparent 100%),
        radial-gradient(48px 40px at 50% 66%, #fff 99%, transparent 100%),
        radial-gradient(56px 48px at 70% 60%, #fff 99%, transparent 100%),
        radial-gradient(46px 40px at 90% 68%, #fff 99%, transparent 100%),
        linear-gradient(180deg, transparent 0%, transparent 70%, #fff 70%, #fff 100%);
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-heaven_ticket::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 32%;
    border-right: 2px dashed rgba(255,255,255,0.85); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-heaven_ticket .qrt-cl-stub {
    position: absolute; right: 0; top: 0; bottom: 0; width: 32%;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(2px); z-index: 2;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.qrt-tract-card-front.qrt-hero-design-heaven_ticket .qrt-cl-seat { font-size: 10px; letter-spacing: 2px; color: #0e2540; font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-heaven_ticket .qrt-cl-num  { font-family: 'JetBrains Mono', monospace; font-size: 22px; color: #0e2540; font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-heaven_ticket .qrt-cl-gate { font-size: 8px; letter-spacing: 1px; color: #0e2540; font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-heaven_ticket .qrt-cl-topline {
    position: absolute; left: 18px; top: 15px;
    font-size: 11px; letter-spacing: 2px; color: #0e2540; font-weight: 700; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-heaven_ticket .qrt-cl-main {
    position: absolute; left: 4%; right: 36%; top: 50%; transform: translateY(-50%);
    font-size: 28px; letter-spacing: 1px; text-align: left; z-index: 3;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    line-height: 1.4;
}

/* ─── 1.4 Boarding Pass ─── */
.qrt-tract-card-front.qrt-hero-design-boarding {
    background: linear-gradient(180deg, #f4ebd9 0%, #ddd0b6 100%);
    color: #2a1f10; font-family: 'JetBrains Mono', monospace;
}
.qrt-tract-card-front.qrt-hero-design-boarding::before {
    content: ""; position: absolute; top: 0; left: 0; right: 31%; height: 36px;
    background: linear-gradient(90deg, #1a3a52 0%, #2d5775 100%); z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-boarding::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 31%;
    border-left: 2px dashed rgba(42,31,16,0.45); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-head {
    position: absolute; top: 10px; left: 22px;
    font-size: 11px; letter-spacing: 4px; color: #f4ebd9; font-weight: 700; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-from,
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-to {
    position: absolute; top: 60px; font-size: 9px; letter-spacing: 2px;
    color: rgba(42,31,16,0.6); z-index: 3; text-align: left;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-from { left: 22px; }
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-to   { left: 135px; }
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-from b,
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-to b {
    display: block; font-size: 18px; color: #2a1f10; letter-spacing: 0; font-weight: 700;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-arrow {
    position: absolute; top: 70px; left: 100px; font-size: 22px; color: #1a3a52; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-main {
    position: absolute; left: 22px; right: 32%; bottom: 22px;
    font-size: 16px; letter-spacing: 0.5px; text-align: left;
    font-family: 'Fraunces', serif; font-weight: 700;
    text-transform: uppercase; line-height: 1.1;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-stub {
    position: absolute; right: 0; top: 0; bottom: 0; width: 31%;
    display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-seat-l { font-size: 8px; letter-spacing: 2px; color: rgba(42,31,16,0.65); }
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-seat-v { font-size: 26px; font-weight: 700; margin: 4px 0; }
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-gate-l { font-size: 8px; letter-spacing: 2px; color: rgba(42,31,16,0.65); }
.qrt-tract-card-front.qrt-hero-design-boarding .qrt-cl-barcode {
    position: absolute;
    right: 14px;
    bottom: 20px;
    height: 26px;
    width: 80px;
    background: repeating-linear-gradient(90deg, #2a1f10 0 2px, transparent 2px 4px, #2a1f10 4px 5px, transparent 5px 8px);
    z-index: 3;
}

/* ─── 1.5 VIP Pass ─── */
.qrt-tract-card-front.qrt-hero-design-vip_pass {
    background: radial-gradient(60% 80% at 50% 0%, rgba(212,175,55,0.18) 0%, transparent 60%),
        linear-gradient(180deg, #14110a 0%, #07060a 100%);
    color: #f1d97a; font-family: 'Cinzel', serif;
}
.qrt-tract-card-front.qrt-hero-design-vip_pass::before {
    content: ""; position: absolute; inset: 10px; border: 1.5px solid #d4af37;
    border-radius: 12px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-vip_pass::after {
    content: ""; position: absolute; left: 50%; top: -2px; width: 36px; height: 12px;
    transform: translateX(-50%); background: #d4af37; border-radius: 0 0 8px 8px; z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-vip_pass .qrt-cl-ring {
    position: absolute; left: 50%; top: 4px; width: 14px; height: 14px;
    transform: translateX(-50%); border-radius: 50%; background: #1a1a1a;
    border: 2px solid #d4af37; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-vip_pass .qrt-cl-topline {
    position: absolute; top: 30px; left: 0; right: 0;
    font-size: 11px; letter-spacing: 6px; color: #d4af37; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-vip_pass .qrt-cl-main {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 32px; font-weight: 700; letter-spacing: 1.5px;
    background: linear-gradient(180deg, #f7e095 0%, #d4af37 60%, #a47b18 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3); z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-vip_pass .qrt-cl-botline {
    position: absolute; bottom: 30px; left: 0; right: 0;
    font-size: 9px; letter-spacing: 5px; color: rgba(212,175,55,0.65);
    font-family: 'Inter', sans-serif; font-weight: 700; z-index: 3;
}

/* ─── 1.6 Concert Stub ─── */
.qrt-tract-card-front.qrt-hero-design-concert {
    background: linear-gradient(180deg, #1f1530 0%, #0e0816 100%);
    color: #fbe7ff; font-family: 'Bebas Neue', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-concert::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(244,114,182,0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(34,211,238,0.18) 0%, transparent 40%);
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-concert::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 30%;
    border-left: 2px dashed rgba(255,255,255,0.4); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-concert .qrt-cl-stub {
    position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-concert .qrt-cl-row1 { font-size: 9px; letter-spacing: 2px; color: rgba(251,231,255,0.7); margin-bottom: 4px; }
.qrt-tract-card-front.qrt-hero-design-concert .qrt-cl-big  { font-size: 32px; line-height: 0.9; color: #fbe7ff; }
.qrt-tract-card-front.qrt-hero-design-concert .qrt-cl-row2 { font-size: 9px; letter-spacing: 2px; color: rgba(251,231,255,0.7); margin-top: 6px; }
.qrt-tract-card-front.qrt-hero-design-concert .qrt-cl-main {
    position: absolute; left: 32%; right: 4%; top: 50%; transform: translateY(-50%);
    font-size: 36px; line-height: 0.95; letter-spacing: 1px; color: #fbe7ff;
    text-shadow: 0 0 10px rgba(244,114,182,0.55), 0 0 20px rgba(34,211,238,0.35);
    text-align: center;
}

/* ─── 1.7 Raffle Ticket ─── */
.qrt-tract-card-front.qrt-hero-design-raffle {
    background: linear-gradient(180deg, #ffe974 0%, #f6c93a 100%);
    color: #2a1d05; font-family: 'Stardos Stencil', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-raffle::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 32%;
    border-left: 2px dashed rgba(42,29,5,0.55); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-raffle .qrt-cl-stub {
    position: absolute; left: 0; top: 0; bottom: 0; width: 32%;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: rgba(0,0,0,0.05); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-raffle .qrt-cl-row1 { font-size: 11px; letter-spacing: 3px; }
.qrt-tract-card-front.qrt-hero-design-raffle .qrt-cl-num  { font-size: 38px; line-height: 1; margin: 4px 0; font-family: 'Courier Prime', monospace; font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-raffle .qrt-cl-row2 { font-size: 9px; letter-spacing: 2px; }
.qrt-tract-card-front.qrt-hero-design-raffle .qrt-cl-main {
    position: absolute; left: 34%; right: 4%; top: 50%; transform: translateY(-50%);
    font-size: 26px; letter-spacing: 1px; line-height: 1.05;
}
.qrt-tract-card-front.qrt-hero-design-raffle .qrt-cl-topbanner {
    position: absolute; left: 34%; right: 4%; top: 16px;
    font-size: 10px; letter-spacing: 4px; color: rgba(42,29,5,0.7);
    font-weight: 700; z-index: 3;
}

/* ─── 2.1 Platinum Credit ─── */
.qrt-tract-card-front.qrt-hero-design-platinum {
    background: radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,0.18) 0%, transparent 60%),
        linear-gradient(135deg, #d4d6db 0%, #8d9099 50%, #b5b8c0 100%);
    color: #1a1d24; font-family: 'JetBrains Mono', monospace;
}
.qrt-tract-card-front.qrt-hero-design-platinum .qrt-cl-brandbig {
    position: absolute;
    top: 16px;
    right: 22px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 3px;
    color: #1a1d24;
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-platinum .qrt-cl-chip {
    position: absolute;
    top: 40px;
    left: 24px;
    width: 42px;
    height: 32px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 6px),
        linear-gradient(135deg, #f0d27a 0%, #c89730 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.18);
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-platinum .qrt-cl-wave {
    position: absolute; font-size: 15px;
    top: 45px;
    left: 75px;
    color: rgba(26,29,36,0.7); transform: rotate(90deg); z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-platinum .qrt-cl-num {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 40px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #1a1d24;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-platinum .qrt-cl-main {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 19px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
    color: #1a1d24;
    z-index: 3;
}

/* ─── 2.2 Black Card ─── */
.qrt-tract-card-front.qrt-hero-design-blackcard {
    background: radial-gradient(60% 80% at 50% 110%, rgba(212,175,55,0.10) 0%, transparent 60%),
        linear-gradient(135deg, #161618 0%, #0a0a0c 60%);
    color: #d4af37; font-family: 'Cinzel', serif;
}
.qrt-tract-card-front.qrt-hero-design-blackcard::before {
    content: ""; position: absolute; inset: 12px;
    border: 0.5px solid rgba(212,175,55,0.45); border-radius: 12px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-blackcard .qrt-cl-chip {
    position: absolute; top: 48px; left: 26px; width: 46px; height: 36px;
    border-radius: 5px;
    background: linear-gradient(135deg, #f0d27a 0%, #b8841a 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-blackcard .qrt-cl-num {
    position: absolute; left: 26px; right: 26px; bottom: 60px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; letter-spacing: 8px; color: #d4af37; text-align: left; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-blackcard .qrt-cl-main {
    position: absolute; left: 26px; right: 26px; bottom: 22px;
    font-family: 'Cinzel', serif;
    font-size: 16px; letter-spacing: 5px; text-transform: uppercase;
    text-align: left; color: #d4af37; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-blackcard .qrt-cl-brandbig {
    position: absolute; top: 16px; right: 24px;
    font-size: 11px; letter-spacing: 6px; color: rgba(212,175,55,0.7); z-index: 3;
}

/* ─── 2.3 Gift Card ─── */
.qrt-tract-card-front.qrt-hero-design-giftcard {
    background: linear-gradient(135deg, #fda4af 0%, #f472b6 50%, #c026d3 100%);
    color: #fff; font-family: 'Pacifico', cursive;
}
.qrt-tract-card-front.qrt-hero-design-giftcard::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 24%; width: 24px;
    background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 100%);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06); z-index: 1;
}
/* Bow built from a real .qrt-cl-bow span (the center KNOT) plus its
   ::before and ::after pseudo-elements (the LEFT and RIGHT loops). The
   span is anchored on the vertical ribbon (right:24%, width:24px → ribbon
   center sits at right:24%+12px); the span itself is 14px wide so the
   anchor `right: calc(24% + 5px)` puts its center right on the ribbon. */
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-bow {
    position: absolute;
    right: calc(24% + 6px);
    top: 14%;
    width: 11px;
    height: 17px;
    /* Center knot — small darker gold rectangle that visually clamps the
       two loops together. */
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(120,53,15,0.5),
        0 1px 2px rgba(0,0,0,0.30);
    z-index: 4;
}
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-bow::before,
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-bow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 27px;
    height: 24px;
    /* Same gold gradient as the vertical ribbon so the bow reads as one
       continuous piece of foil. */
    background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 100%);
    box-shadow:
        inset 0 0 0 1px rgba(180,83,9,0.4),
        0 1px 2px rgba(0,0,0,0.18);
    z-index: -1;  /* tuck loops behind the knot */
}
/* Left loop — half-ellipse with the flat edge facing the knot.
   border-radius syntax is (tl) (tr) (br) (bl) / (tl-v) (tr-v) (br-v) (bl-v).
   Setting tr+br to 0 flattens the right side into the knot.
   `transform-origin: 100% 50%` rotates from the inner edge so the loop
   pinches naturally toward the knot rather than swinging outward. */
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-bow::before {
    right: 100%;
    margin-right: -3px;  /* tuck under the knot edge so there's no seam */
    border-radius: 33% 63% 63% 40% / 73% 46% 43% 100%;
    transform: translateY(-50%) rotate(-6deg);
    transform-origin: 100% 100%;
}
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-bow::after {
    left: 100%;
    margin-left: -3px;
    border-radius: 98% 58% 32% 60% / 44% 36% 70% 41%;
    transform: translateY(-50%) rotate(6deg);
    transform-origin: 0 100%;
}
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-topline {
    position: absolute;
    left: 22px;
    top: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.85);
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-main {
    position: absolute;
    left: 6%;
    right: 30%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    text-align: left;
    line-height: 1.3em;
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-giftcard .qrt-cl-amt {
    position: absolute;
    right: 6%;
    top: 56%;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 32px;
    color: #fff;
    letter-spacing: 3px;
    z-index: 3;
}

/* ─── 2.4 Bitcoin / Crypto ─── */
.qrt-tract-card.qrt-hero-design-bitcoin {
    --qrt-design-bg:
        radial-gradient(80% 80% at 0% 0%, rgba(255,255,255,0.25) 0%, transparent 50%),
        linear-gradient(135deg, #fb923c 0%, #f97316 50%, #b45309 100%);
    --qrt-design-bg-back: #000;
    --qrt-design-text: #ffffff;
    --qrt-design-font: 'JetBrains Mono', monospace;
    --qrt-design-accent: #ff801f;
}
.qrt-tract-card-front.qrt-hero-design-bitcoin {
    background: var(--qrt-design-bg);
    color: var(--qrt-design-text);
    font-family: var(--qrt-design-font);
}
.qrt-tract-card-front.qrt-hero-design-bitcoin::before {
    content: "₿";
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-52%);
    font-size: 150px;
    line-height: 0.8;
    color: rgba(255, 255, 255, 0.16);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-bitcoin::after {
    content: ""; position: absolute; left: 0; top: 60%; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-bitcoin .qrt-cl-topline {
    position: absolute;
    left: 22px;
    top: 18px;
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-bitcoin .qrt-cl-hash {
    position: absolute;
    left: 22px;
    bottom: 23px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    line-height: 1.4;
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-bitcoin .qrt-cl-main {
    position: absolute;
    left: 22px;
    right: 38%;
    top: 38%;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 1.1em;
    text-align: left;
    z-index: 3;
}
/* Bitcoin · BACK — back-specific bg (#000) via --qrt-design-bg-back, falls
   through to --qrt-design-bg if no back override defined.
   Same fallback pattern available for text + font: declare --qrt-design-{text,font}-back
   on the parent rule above to override the back independently. */
.qrt-tract-card-back.qrt-hero-design-bitcoin {
    background: var(--qrt-design-bg-back, var(--qrt-design-bg));
    color: var(--qrt-design-text-back, var(--qrt-design-text));
    font-family: var(--qrt-design-font-back, var(--qrt-design-font));
    --qrt-card-box-derived: #3a2312 !important;
    --qrt-card-outline-derived: #d77326 !important;
    --qrt-card-bold-derived: #d77326 !important;
    --qrt-back-title-color-derived: #bfbfbf !important;
    --qrt-card-auto-text: #ffffff !important;

    --qrt-card-box-derived: #ffede0 !important;
    --qrt-card-outline-derived: #9e4b0b !important;
    --qrt-card-bold-derived: #e07a2c !important;
    --qrt-back-title-color-derived: #616161 !important;
    --qrt-card-auto-text: #000000 !important;

    --qrt-card-box-derived: #2a2a2a !important;
    --qrt-card-outline-derived: #ff801f !important;
    --qrt-card-bold-derived: #e07a2c !important;
    --qrt-back-title-color-derived: #a4a4a4 !important;
    --qrt-card-auto-text: #ffffff !important;
}

/* ─── 2.5 Personal Check (Photoreal · v5 port · Courier Prime fill) ───
   ═══════════════════════════════════════════════════════════════════
   SHARED FRONT/BACK BG TEMPLATE PATTERN
   Declare the design's bg + text + font ONCE on the .qrt-tract-card
   parent class via three CSS vars (--qrt-design-bg / -text / -font).
   Front and back rules below consume the vars — single source of truth.
   To make any other design share its front bg with its back, follow
   this same shape: hoist the gradient stack onto the parent class as
   --qrt-design-bg and let both front + back read it.
   ═══════════════════════════════════════════════════════════════════ */
.qrt-tract-card.qrt-hero-design-personal_check {
    --qrt-design-bg:
        repeating-radial-gradient(ellipse 200% 60% at 50% 30%, transparent 0 6px, rgba(20,60,110,0.05) 6px 7px),
        repeating-radial-gradient(ellipse 200% 60% at 50% 80%, transparent 0 8px, rgba(20,60,110,0.04) 8px 9px),
        repeating-linear-gradient(45deg, rgba(20,60,110,0.04) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, rgba(20,60,110,0.04) 0 1px, transparent 1px 6px),
        linear-gradient(135deg, rgba(20,60,110,0) 0%, rgba(20,60,110,0.025) 45%, rgba(20,60,110,0) 55%),
        linear-gradient(180deg, #eaf1ec 0%, #d6e4dc 100%);
    --qrt-design-text: #1a3a52;
    --qrt-design-font: 'Inter', sans-serif;
    /* Accent color baked into the card design — used for the check#,
       MICR ink, the bold/em emphasis on the back, and any other "red ink"
       accent. Stays fixed regardless of the user's form-theme picker
       (which controls the digital tract pages, not the card itself). */
    --qrt-design-accent: #876100;
}
.qrt-tract-card-front.qrt-hero-design-personal_check {
    background: var(--qrt-design-bg);
    color: var(--qrt-design-text);
    font-family: var(--qrt-design-font);
}
/* Top-edge dashed pinstripe (perforated stub vestige) */
.qrt-tract-card-front.qrt-hero-design-personal_check::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: repeating-linear-gradient(90deg, #1a3a52 0 4px, transparent 4px 8px);
    z-index: 2;
}
/* Inner ruled frame */
.qrt-tract-card-front.qrt-hero-design-personal_check::after {
    content: ""; position: absolute; inset: 8px;
    border: 1px solid rgba(26,58,82,0.45);
    border-radius: 15px;
    z-index: 1;
}
/* "VOID IF UNREDEEMED" diagonal ghost watermark */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-ghost {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    text-align: center; pointer-events: none;
    font-family: 'Cinzel', serif; font-size: 48px; font-weight: 900;
    letter-spacing: 11px; color: rgba(26,58,82,0.05);
    z-index: 1; user-select: none;
}
/* Top-left bank seal + name + address */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-bank-logo {
    position: absolute; top: 15px; left: 18px; z-index: 3;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fef3c7 0%, #c8973a 50%, #6e4d18 100%);
    border: 1px solid rgba(60,38,8,0.6);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    color: #6e4d18; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-bank-logo svg {
    width: 13px; height: 13px; display: block; fill: #6e4d18;
}
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-bank-name {
    position: absolute; top: 14px; left: 48px; z-index: 3;
    font-family: 'Cinzel', serif; font-size: 11px; font-weight: 800;
    letter-spacing: 1.1px; color: #1a3a52;
}
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-bank-addr {
    position: absolute; top: 28px; left: 48px; z-index: 3;
    font-family: 'Inter', sans-serif; font-size: 6.5px;
    letter-spacing: 0.7px; color: rgba(26,58,82,0.7); font-weight: 500;
}
/* ───────────────────────────────────────────────────────────────────
   Personal Check · element-by-element layout map
   ───────────────────────────────────────────────────────────────────
   Every text element + every underline rule is its own absolute box.
   Tune ANY element by editing JUST its top/left/right/bottom/font-size
   without dragging siblings. The "lines" are bare 1px <div>s — move
   them up or down independently of the text that sits on them.

   Vertical zones (approximate, % of card height — card is 1.75:1):
     0   – 24%   bank header row (logo + name + address)
     30  – 50%   PAY-TO row (label + name + line) | amt box (right)
     55  – 65%   WRITTEN-OUT row (text + line + DOLLARS badge)
     70  – 88%   MEMO row (label + value + line) | SIG block (right)
     90  – 100%  MICR line at very bottom
   ───────────────────────────────────────────────────────────── */

/* PAY-TO label */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-pay-lbl {
    position: absolute; left: 18px; top: 33%; z-index: 3;
    font-family: 'Inter', sans-serif; font-size: 6.5px; line-height: 1;
    letter-spacing: 1.1px; font-weight: 700;
    color: rgba(26,58,82,0.65);
}
/* PAY-TO payee name (Courier Prime) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-pay-name {
    position: absolute; left: 18px; right: 95px; top: 39%; z-index: 3;
    font-family: 'Courier Prime', monospace; font-weight: 700;
    font-size: 14px; line-height: 1; color: #1a3a52;
    padding: 0 5px 2px; text-align: left;
}
/* PAY-TO underline (sits BELOW the payee name) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-pay-line {
    position: absolute; left: 18px; right: 95px; top: 47%;
    height: 1px; background: rgba(26,58,82,0.55); z-index: 2;
}

/* DOLLAR sign (Cinzel "$" — independent of the box) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-amt-sign {
    position: absolute; right: 90px; top: 28%; z-index: 3;
    font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700;
    color: #1a3a52; line-height: 1;
}
/* DOLLAR amount box */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-amt-box {
    position: absolute; right: 18px; top: 24%; z-index: 3;
    border: 1.5px solid rgba(26,58,82,0.7);
    background: rgba(255,255,255,0.55);
    padding: 3px 8px; min-width: 66px; text-align: center;
    font-family: 'Cutive Mono', monospace; font-size: 15px;
    font-weight: 700; color: #1a3a52; letter-spacing: 0.4px;
    box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.7);
}

/* WRITTEN-OUT amount text (Allura cursive) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-written-amt {
    position: absolute; left: 18px; right: 60px; top: 53%; z-index: 3;
    font-family: 'Allura', cursive; font-size: 17px;
    color: #1a3a52; line-height: 1; letter-spacing: 0.3px;
    font-weight: 600;
    text-align: left;
}
/* WRITTEN-OUT underline */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-written-line {
    position: absolute; left: 18px; right: 63px; top: 62%;
    height: 1px; background: rgba(26,58,82,0.4); z-index: 2;
}
/* DOLLARS badge (right end of written-out line) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-doll {
    position: absolute; right: 20px; top: 58%; z-index: 3;
    font-family: 'Inter', sans-serif; font-size: 7px;
    font-weight: 700; color: rgba(26,58,82,0.6); letter-spacing: 0.9px;
    line-height: 1;
}

/* MEMO label */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-memo-lbl {
    position: absolute; left: 18px; bottom: 49px; z-index: 3;
    font-family: 'Inter', sans-serif; font-size: 6.5px;
    letter-spacing: 1.1px; font-weight: 700; line-height: 1;
    color: rgba(26,58,82,0.65);
}
/* MEMO value (Courier Prime) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-memo-val {
    position: absolute; left: 50px; bottom: 49px; z-index: 3;
    font-family: 'Courier Prime', monospace; font-weight: 700;
    font-size: 12px; line-height: 1; color: #1a3a52;
    letter-spacing: 0;
}
/* MEMO underline (under the value) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-memo-line {
    position: absolute; left: 46px; right: 63px; bottom: 46px;
    height: 1px; background: rgba(26,58,82,0.5); z-index: 2;
}
/* Signature line + Allura signature (bottom-right) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-sig-line {
    position: absolute; right: 28px; bottom: 15px; width: 130px; height: 1px;
    background: rgba(26,58,82,0.55); z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-sig {
    position: absolute; right: 32px; bottom: 11px; z-index: 4;
    font-family: 'Allura', cursive; font-size: 18px;
    color: #876100;
    font-weight: 600;
    transform-origin: right bottom; letter-spacing: 0.3px;
}
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-sig-label {
    position: absolute; right: 162px; bottom: 15px; z-index: 3;
    font-size: 6.5px; letter-spacing: 1.1px;
    color: rgba(26,58,82,0.6); font-weight: 700;
    font-family: 'Inter', sans-serif;
}
/* MICR line (real U+2446 / U+2448 transit symbols) */
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-micr {
    display: none;
    position: absolute;
    left: -26px;
    right: 0px;
    bottom: 10px;
    z-index: 3;
    font-family: 'Cutive Mono', monospace;
    font-size: 7.5px;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: 1.8px;
    text-align: center;
}
.qrt-tract-card-front.qrt-hero-design-personal_check .qrt-cl-bracket {
    display: inline-block; transform: scaleY(1.3); padding: 0 2px;
}

/* ─── Personal Check · BACK ─── */
.qrt-tract-card-back.qrt-hero-design-personal_check {
    background: var(--qrt-design-bg-back, var(--qrt-design-bg));
    color: var(--qrt-design-text-back, var(--qrt-design-text));
    font-family: var(--qrt-design-font-back, var(--qrt-design-font));
}
/* Top dashed pinstripe (mirrors the front so the card reads as the same
   document on both sides). */
.qrt-tract-card-back.qrt-hero-design-personal_check::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: repeating-linear-gradient(90deg, #1a3a52 0 4px, transparent 4px 8px);
    z-index: 2;
}
/* Inner ruled frame matching the front. */
.qrt-tract-card-back.qrt-hero-design-personal_check::after {
    content: ""; position: absolute; inset: 8px;
    border: 1px solid rgba(26,58,82,0.45);
    border-radius: 15px;
    z-index: 1; pointer-events: none;
}
/* Lift back-card content above the ::before/::after layers. */
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-left,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-right {
    position: relative; z-index: 3;
}
/* Section panels — translucent white over the guilloche so the bg
   shows through, with thin navy borders to match the front's ruled feel. */
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-scan-here-box,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-features,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-section-box {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(26,58,82,0.45);
    box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.7);
}
/* QR placeholder — solid navy so the QR scans cleanly. */
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-scan-qr-placeholder {
    background: #1a3a52;
}
/* Title + scan label — Cinzel for that engraved-document feel,
   matching the front bank-name treatment. */
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-box-title,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-scan-here-label {
    font-family: 'Cinzel', serif; font-weight: 800;
    letter-spacing: 0.6px; color: #1a3a52;
}

.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-scan-here-label {
    color: #876100;
}
/* Body text · features · questions — navy, same as front ink. */
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-box-body,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-questions,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-questions li,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-feature {
    color: #1a3a52;
    letter-spacing: 0;
}
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-feature svg {
    color: var(--qrt-design-accent);
}
/* Bold/em emphasis — uses the accent (red ink, matching the front's
   check-no + MICR — the only red on a real check). */
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-questions strong,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-questions em,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-box-body strong,
.qrt-tract-card-back.qrt-hero-design-personal_check .qrt-back-box-body em {
    color: var(--qrt-design-accent);
}

/* ─── 2.6 Savings Bond ─── */
.qrt-tract-card-front.qrt-hero-design-bond {
    background: repeating-linear-gradient(90deg, rgba(20,40,30,0.05) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #ecf3ec 0%, #d2dfd3 100%);
    color: #1a3a23; font-family: 'Cinzel', serif;
}
.qrt-tract-card-front.qrt-hero-design-bond::before {
    content: ""; position: absolute; inset: 10px;
    border: 4px double rgba(26,58,35,0.7); border-radius: 16px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-bond .qrt-cl-topline {
    position: absolute; top: 24px; left: 0; right: 0;
    font-size: 11px; letter-spacing: 6px; color: #1a3a23; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-bond .qrt-cl-denom {
    position: absolute; top: 56px; left: 0; right: 0;
    font-family: 'Abril Fatface', serif; font-size: 36px; color: #1a3a23; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-bond .qrt-cl-main {
    position: absolute; bottom: 50px; left: 0; right: 0;
    font-size: 16px; letter-spacing: 1.5px; color: #1a3a23;
    text-transform: uppercase; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-bond .qrt-cl-botline {
    position: absolute; bottom: 24px; left: 0; right: 0;
    font-family: 'IM Fell English', serif;
    font-size: 9px; letter-spacing: 3px; color: rgba(26,58,35,0.7); z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-bond .qrt-cl-seal {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; border-radius: 50%;
    background: radial-gradient(circle, rgba(26,58,35,0.18) 0%, rgba(26,58,35,0.04) 70%);
    border: 1.5px solid rgba(26,58,35,0.6); z-index: 3;
}
/* Center the ★ on the seal's geometric center via translate(-50%,-50%)
   rather than `inset: 0; display: flex`. flex-centering of a single
   glyph inside a bordered box renders subtly differently between the
   scaled-down design-tile preview and the full-size live card because
   the star glyph's font metrics (advance width vs. visual center) shift
   between render contexts. translate(-50%,-50%) on a 1×1 anchor point
   is purely geometric and immune to those quirks — works identically in
   both contexts. line-height:1 collapses the line box so only the
   glyph's own ink contributes to the offset. */
.qrt-tract-card-front.qrt-hero-design-bond .qrt-cl-seal::before {
    content: "★";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    color: rgba(26,58,35,0.6); font-size: 22px;
}

/* ════════════════════════════════════════════════════════════════
   GOVERNMENT DOCUMENTS · Salvation Security Card
   --------------------------------------------------------------------
   Photoreal port of the U.S. Social Security card. Layered structure:
     - 4-side microtext border
     - 2 corinthian columns flanking
     - dark blue arched banner at top
     - SVG arched "SALVATION SECURITY" wordmark
     - central red "Salvation Security · Administration" seal
       (circular text + cross + 6-stripe shield)
     - typewriter SSN-style number row + caption + holder name
     - signature line + Allura cursive + caption
     - bottom-right typewriter date
   Tunable knobs on the design class:
     --qrt-salv-eagle-w / --qrt-salv-eagle-ratio / --qrt-salv-col-w /
     --qrt-salv-edge-inset / --qrt-salv-ring-scale
   Override inline on the .qrt-tract-card-front to play with sizing.
   Pixel values are ~10% smaller than the v5 gallery to fit the live
   builder card; SVG-internal sizes use viewBox coords so they scale
   with the container automatically.
   ════════════════════════════════════════════════════════════════ */
.qrt-tract-card-front.qrt-hero-design-salvation_card {
    --qrt-salv-eagle-w: 65%;
    --qrt-salv-eagle-ratio: 1.6;
    --qrt-salv-col-w: 38px;
    --qrt-salv-edge-inset: 40px;
    --qrt-salv-ring-scale: 0.6;
    --qrt-salv-ring-scale-bot: 0.75; /* tightness of just the bottom arc
                                        (ADMINISTRATION). Smaller = closer
                                        to the cross. Independent of the
                                        top arc's --qrt-salv-ring-scale so
                                        you can dial them separately. */
    --qrt-salv-micro-pad: 6px;     /* extra padding between microtext loop
                                      and card edge. Bump this for more
                                      breathing room without editing the
                                      SVG path. The path itself already has
                                      a built-in inset of 14 user units
                                      (~9px). Total visible gap = this var
                                      + path-inset × scale-factor. */

    background:
        radial-gradient(80% 60% at 50% 0%, rgba(40,80,140,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #cfe6e8 0%, #aacdd2 60%, #c1dade 100%);
    color: #0c1e44;
    font-family: 'Inter', sans-serif;
}
/* Security guilloche — wispy curved lines + crosshatch grain */
.qrt-tract-card-front.qrt-hero-design-salvation_card::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg,  rgba(20,40,80,0.040) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(20,40,80,0.040) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(8deg,   rgba(20,40,80,0.025) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-8deg,  rgba(20,40,80,0.025) 0 1px, transparent 1px 9px);
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 50% at 50% 50%, transparent 30%, rgba(20,40,80,0.06) 30.5%, transparent 32%),
        radial-gradient(140% 60% at 50% 50%, transparent 38%, rgba(20,40,80,0.05) 38.5%, transparent 40%),
        radial-gradient(160% 70% at 50% 50%, transparent 46%, rgba(20,40,80,0.04) 46.5%, transparent 48%);
    z-index: 1; pointer-events: none;
}

/* 4-side microtext border */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro {
    position: absolute;
    z-index: 3;
    font-family: 'Inter', sans-serif;
    font-size: 4.5px; font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(20,40,80,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-transform: uppercase;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-top    { top: 4px;    left: 4px; right: 4px; height: 7px; line-height: 7px; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-bottom { bottom: 4px; left: 4px; right: 4px; height: 7px; line-height: 7px; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-left,
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-right {
    top: 4px; bottom: 4px; width: 7px; line-height: 7px;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-left  { left: 4px;  writing-mode: vertical-rl; transform: rotate(180deg); }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-right { right: 4px; writing-mode: vertical-rl; }

/* 1-piece microtext loop (rounded-corner). Alternative to the 4-strip
   rules above: a single SVG path traces a closed rounded rectangle
   clockwise; <textPath> wraps the repeating string around the entire
   perimeter as a continuous flow that bends through all four corners.
   The viewBox is 700×400 so it matches the card's 1.75:1 aspect; default
   preserveAspectRatio (xMidYMid meet) scales it 1:1 with the card with
   no letterform distortion. Text font-size and letter-spacing are in
   viewBox user-units (1 unit ≈ 0.63 screen px at the live builder card
   width).

   ┌──────────────────────────────────────────────────────────────────┐
   │  HOW TO TWEAK PADDING + BORDER RADIUS:                           │
   │                                                                  │
   │  • PADDING (gap between text and card edge):                     │
   │      Override --qrt-salv-micro-pad inline on the card element,   │
   │      e.g.  style="--qrt-salv-micro-pad: 12px"                    │
   │                                                                  │
   │  • BORDER RADIUS (curvature at the corners):                     │
   │      Edit the SVG path's d= string in TWO files:                 │
   │        - JS Scripts/qrt-builder.js (look for `salv-micro-path`)  │
   │        - PHP Page Files/qrt-builder-functions.php (same id)      │
   │      The path uses inset=14 and corner-radius=27 (user units).   │
   │      Format:                                                     │
   │        M (i+r),i  L (W-i-r),i                                    │
   │        Q (W-i),i (W-i),(i+r)                                     │
   │        L (W-i),(H-i-r)                                           │
   │        Q (W-i),(H-i) (W-i-r),(H-i)                               │
   │        L (i+r),(H-i)                                             │
   │        Q i,(H-i) i,(H-i-r)                                       │
   │        L i,(i+r)                                                 │
   │        Q i,i (i+r),i  Z                                          │
   │      where W=700, H=400, i=inset (14), r=corner-radius (27).     │
   │      Increase r for rounder corners, decrease for sharper.       │
   └──────────────────────────────────────────────────────────────────┘ */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-loop {
    position: absolute;
    /* `inset` shrinks the container, which scales the SVG and its path
       inward, increasing the visible gap to the card edge. Adjust via
       --qrt-salv-micro-pad on the front element (default 6px). */
    inset: var(--qrt-salv-micro-pad, 6px);
    z-index: 3;
    pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-loop svg {
    display: block; width: 100%; height: 100%;
    overflow: visible;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-micro-loop text {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    fill: rgba(20,40,80,0.85);
    text-transform: uppercase;
}

/* Corinthian columns */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col {
    position: absolute;
    z-index: 4;
    top: 19px; bottom: 19px;
    width: var(--qrt-salv-col-w, 32px);
    background:
        repeating-linear-gradient(90deg,
            rgba(28,48,100,0.55) 0 1px,
            rgba(60,90,150,0.18) 1px 6px),
        linear-gradient(90deg, #2a4a8a 0%, #4a6fa8 50%, #2a4a8a 100%);
    border-left: 0.5px solid rgba(0,0,0,0.25);
    border-right: 0.5px solid rgba(0,0,0,0.25);
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col-left  { left: 23px; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col-right { right: 23px; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col-left::before  { left: -1px !important; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col-left::after  { left: -1px !important; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col-right::before { right: -1px !important; }
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col-right::after { right: -1px !important; }

.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col::before {
    content: "";
    position: absolute; top: -2px; left: -4px; right: -4px;
    height: 18px;
    background:
        linear-gradient(180deg,
            #2a4a8a 0%, #4a6fa8 25%, #2a4a8a 30%,
            #4a6fa8 55%, #2a4a8a 60%, #4a6fa8 95%, #2a4a8a 100%);
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4);
    border-radius: 1px 1px 0 0;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-col::after {
    content: "";
    position: absolute; bottom: -2px; left: -4px; right: -4px;
    height: 14px;
    background:
        linear-gradient(180deg, #2a4a8a 0%, #4a6fa8 50%, #2a4a8a 100%);
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4);
    border-radius: 0 0 1px 1px;
}

/* Top arch banner */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-arch {
    position: absolute;
    top: 17px;
    left: var(--qrt-salv-edge-inset, 40px);
    right: var(--qrt-salv-edge-inset, 40px);
    height: 40%;
    background:
        repeating-linear-gradient(38deg,  rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-38deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #1a2c5e 0%, #0f1a3a 100%);
    /* Bottom edge silhouette = single smooth arch dipping up at center.
       ────────────────────────────────────────────────────────────────
       ONE KNOB — change --qrt-salv-arch-peak to control the curve:
         80%  → no arch (flat bottom)
         75%  → barely-there dip
         70%  → slight dip up   (default)
         60%  → moderate arch
         50%  → dramatic arch
       The intermediate polygon points are computed from the peak via
       calc(), so the line segments always sit on a smooth quadratic
       Bezier curve regardless of what value you pick.
       Override on the .qrt-tract-card-front element if you want a
       different curve per tract:
         style="--qrt-salv-arch-peak: 60%"
       polygon() (not path()) is used because clip-path: path() rejects
       percentage units in many browsers. */
    --qrt-salv-arch-peak: 60%;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 80%,
        90% calc(80% - 0.36 * (80% - var(--qrt-salv-arch-peak))),
        80% calc(80% - 0.64 * (80% - var(--qrt-salv-arch-peak))),
        70% calc(80% - 0.84 * (80% - var(--qrt-salv-arch-peak))),
        60% calc(80% - 0.96 * (80% - var(--qrt-salv-arch-peak))),
        50% var(--qrt-salv-arch-peak),
        40% calc(80% - 0.96 * (80% - var(--qrt-salv-arch-peak))),
        30% calc(80% - 0.84 * (80% - var(--qrt-salv-arch-peak))),
        20% calc(80% - 0.64 * (80% - var(--qrt-salv-arch-peak))),
        10% calc(80% - 0.36 * (80% - var(--qrt-salv-arch-peak))),
        0% 80%
    );
    z-index: 3;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* Arched SVG title — "SALVATION SECURITY" wordmark.
   To tune the arch curve, edit the SVG path's d= attribute in BOTH:
     - JS Scripts/qrt-builder.js          (search: salv-arch-path)
     - PHP Page Files/qrt-builder-functions.php   (same id)
   Current path: d="M 40,200 Q 400,30 760,200" in viewBox 800×220.
     • Lower the control Y (the 30) → deeper arch (text peaks higher)
     • Raise the control Y          → flatter arch
     • Change start/end Y (the 200) → moves the side rails up/down
     • Change start/end X (40, 760) → wider or narrower text spread */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-title {
    position: absolute;
    top: 4px;
    left: var(--qrt-salv-edge-inset, 40px);
    right: var(--qrt-salv-edge-inset, 40px);
    height: 28%;
    z-index: 6;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-title svg {
    display: block; width: 100%; height: 100%;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-title text {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 900;
    font-size: 61px;
    letter-spacing: 1px;
    fill: #f4f6fa;
    paint-order: stroke fill;
    stroke: rgba(0,0,0,0.45);
    stroke-width: 1.2;
}

/* Central red eagle-substitute stamp */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-eagle {
    position: absolute;
    left: 50%; top: 56%;
    transform: translate(-50%, -50%);
    width: var(--qrt-salv-eagle-w, 50%);
    aspect-ratio: var(--qrt-salv-eagle-ratio, 1.6) / 1;
    z-index: 7;
    pointer-events: none;
    opacity: 0.55;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-eagle svg {
    display: block; width: 100%; height: 100%;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-ring-text {
    font-family: 'Cinzel', serif; font-weight: 800;
    font-size: 18px; letter-spacing: 1.5px;
    fill: #c43030;
    transform-box: view-box;
    transform-origin: 160px 100px;
    transform: scale(var(--qrt-salv-ring-scale, 0.7));
}
/* Bottom arc tightness override — same single-class specificity as
   .qrt-cl-ring-text but comes later in the cascade, so it wins for any
   <text> that carries BOTH classes. Lets you pull ADMINISTRATION closer
   to the cross without affecting SALVATION SECURITY on the top arc. */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-ring-bot {
    transform: scale(var(--qrt-salv-ring-scale-bot, 0.85));
    font-size: 16px;
}
/* Cross = two <rect>s grouped in .qrt-cl-cross. Each piece's dimensions
   are set directly via SVG geometry properties (width/height/x/y) in CSS
   — tune each rect independently here. */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-cross {
    fill: #c43030;
    transform: translateY(12px);
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-cross-stem {
    x: 153px;
    y: 52px;
    width: 15px;
    height: 84px;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-cross-arm {
    x: 132px;
    y: 72px;
    width: 56px;
    height: 15px;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-stripes {
    fill: rgba(196,48,48,0.55);
    transform: translateY(12px);
}

/* Data rows */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-ssn {
    position: absolute; top: 46%; left: 0; right: 0; z-index: 8;
    font-family: 'Courier Prime', monospace;
    font-weight: 700; font-size: 18px; letter-spacing: 1px;
    color: #0a0a0a; 
    /* text-shadow: 0 1px 0 rgba(255,255,255,0.5); */
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-caption {
    position: absolute; top: 58%; left: 0; right: 0; z-index: 8;
    font-family: 'Inter', sans-serif;
    font-size: 5.5px; font-weight: 900; letter-spacing: 1px;
    color: #0f2e86; text-transform: uppercase;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-holder {
    position: absolute; top: 62%; left: 0; right: 0; z-index: 8;
    font-family: 'Special Elite', cursive;
    font-size: 18px; letter-spacing: 1.2px;
    color: #0a0a0a; text-transform: uppercase; font-weight: 700;
}

/* Signature */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-sig-line {
    position: absolute; left: 22%; right: 22%; bottom: 12%;
    height: 1px; background: rgba(0,0,0,0.85); z-index: 8;
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-sig {
    position: absolute; left: 0; right: 0; bottom: 11%; z-index: 9;
    font-family: 'Allura', cursive; font-size: 16px;
    color: #0a0a3a; line-height: 1; transform: translateY(-2px);
}
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-sig-label {
    position: absolute; left: 0; right: 0; bottom: 7%; z-index: 8;
    font-family: 'Inter', sans-serif;
    font-size: 6px; font-weight: 700; letter-spacing: 1.3px;
    color: #0a0a0a; text-transform: uppercase;
}

/* Bottom-right typewriter date */
.qrt-tract-card-front.qrt-hero-design-salvation_card .qrt-cl-date {
    position: absolute; right: 20%; bottom: 6%; z-index: 8;
    font-family: 'Courier Prime', monospace;
    font-weight: 700; font-size: 8px; letter-spacing: 0px;
    color: #0a0a0a;
}

/* ════════════════════════════════════════════════════════════════
   SALVATION SECURITY CARD — BACK SIDE
   --------------------------------------------------------------------
   Same standard back-card layout (scan box, features panel, two
   section boxes for description + questions) but re-skinned to match
   the front:
     - Card background = the cream/teal paper from the front
     - Scan box, features panel, both section boxes = the dark navy
       arch banner background (with diagonal hatching) so they read
       as a continuation of the SALVATION SECURITY banner motif
     - Box titles + SCAN HERE label use Cinzel (same family as the
       arched SALVATION SECURITY wordmark on the front)
     - Body / question text on the navy panels switches to a light
       cream so it's readable against the dark
     - Emphasis (strong/em) and feature SVG icons use the red eagle
       accent (#c43030) for visual continuity with the central seal
   ════════════════════════════════════════════════════════════════ */

/* Card body — same paper as the front */
.qrt-tract-card-back.qrt-hero-design-salvation_card {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(40,80,140,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #cfe6e8 0%, #aacdd2 60%, #c1dade 100%);
    color: #0c1e44;
}

/* Security guilloche — same crosshatch as the front. ::before paints
   the multi-angle line grain. */
.qrt-tract-card-back.qrt-hero-design-salvation_card::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg,  rgba(20,40,80,0.040) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(20,40,80,0.040) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(8deg,   rgba(20,40,80,0.025) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-8deg,  rgba(20,40,80,0.025) 0 1px, transparent 1px 9px);
    z-index: 1; pointer-events: none;
}
/* ::after paints the three concentric elliptical watermark sweeps. */
.qrt-tract-card-back.qrt-hero-design-salvation_card::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 50% at 50% 50%, transparent 30%, rgba(20,40,80,0.06) 30.5%, transparent 32%),
        radial-gradient(140% 60% at 50% 50%, transparent 38%, rgba(20,40,80,0.05) 38.5%, transparent 40%),
        radial-gradient(160% 70% at 50% 50%, transparent 46%, rgba(20,40,80,0.04) 46.5%, transparent 48%);
    z-index: 1; pointer-events: none;
}
/* Lift the back content into a higher stacking layer so the guilloche
   pseudo-elements (z-index: 1) sit behind it. The standard back card's
   children don't have explicit z-index, so without this they'd render
   under the textures and disappear. Same pattern as the front. */
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-left,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-right {
    position: relative;
    z-index: 2;
}

.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-scan-here-box,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-features,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-section-box {
    background: linear-gradient(180deg, #cae0e3 0%, #b9d2d6 100%);
    border: 1.5px solid rgba(15, 26, 58, 0.65);
    outline: 0.5px solid rgba(15, 26, 58, 0.50);
    outline-offset: -4px;
    box-shadow:
        inset 0 2px 4px rgba(15, 26, 58, 0.18),    /* recessed top shadow */
        inset 0 -1px 0 rgba(255, 255, 255, 0.30);  /* bottom highlight */
}

/* QR placeholder — keep bright white so the QR stays scannable on
   the slightly-tinted engraved surface. */
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-scan-qr-placeholder {
    background: #0f1a3a;
}

/* Cinzel labels matching the SALVATION SECURITY arched wordmark. */
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-box-title,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-scan-here-label {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #0f1a3a;
}

.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-scan-here-label {
    color: #876100;
}

/* Body text + questions + feature labels — dark navy. */
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-box-body,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-questions,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-questions li,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-feature {
    color: #1a2c5e;
}

/* Feature row SVG icons — royal blue accent. */
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-feature svg {
    /* color: #3563e4; */
    color: #876100;
}

/* Bold/em emphasis — same royal blue accent. */
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-questions strong,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-questions em,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-box-body strong,
.qrt-tract-card-back.qrt-hero-design-salvation_card .qrt-back-box-body em {
    color: #876100;
}

/* ════════════════════════════════════════════════════════════════
   New custom-layout designs ported from gallery v3 / v4
   (Heaven & Hell · extra Tickets · extra Finance · Illustrated · Kids).
   Gallery cards render slightly larger than the production
   .qrt-tract-card-front, so font-sizes / offsets are scaled down
   ~10-15% from gallery values. Layout scaffold (background SVGs etc.)
   uses z-index: 1; .qrt-cl-phrase uses z-index 3 above all artwork.
   ════════════════════════════════════════════════════════════════ */

/* ─── Pearly Gates ─── */
.qrt-tract-card-front.qrt-hero-design-pearly_gates {
    background: radial-gradient(60% 80% at 50% 70%, rgba(255,255,255,0.95) 0%, rgba(252,231,163,0.55) 35%, rgba(186,217,238,0) 70%),
        linear-gradient(180deg, #cfe6f5 0%, #f7e8b5 55%, #ffffff 100%);
    color: #6a4a12; font-family: 'Cinzel', serif;
}
.qrt-tract-card-front.qrt-hero-design-pearly_gates::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 45%);
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-pearly_gates .qrt-cl-gates {
    position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
    width: 140px; height: 108px; z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-pearly_gates .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; bottom: 31px;
    font-size: 15px; font-weight: 600; letter-spacing: 1.1px;
    color: #6a4a12; text-shadow: 0 1px 0 rgba(255,255,255,0.75);
    text-align: center; z-index: 3;
}

/* ─── Streets of Gold ─── */
.qrt-tract-card-front.qrt-hero-design-streets_of_gold {
    background: repeating-linear-gradient(45deg, rgba(120,80,15,0.06) 0 2px, transparent 2px 14px),
        repeating-linear-gradient(-45deg, rgba(120,80,15,0.05) 0 2px, transparent 2px 14px),
        radial-gradient(120% 90% at 50% 100%, #fff4c0 0%, #f4c84a 45%, #b07a17 100%);
    color: #4a2f08; font-family: 'Cormorant Garamond', serif;
}
.qrt-tract-card-front.qrt-hero-design-streets_of_gold::before {
    content: ""; position: absolute; inset: 12px;
    border: 1.5px solid rgba(74,47,8,0.55); border-radius: 8px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-streets_of_gold::after {
    content: ""; position: absolute; inset: 18px;
    border: 0.5px solid rgba(74,47,8,0.3); border-radius: 5px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-streets_of_gold .qrt-cl-topline {
    position: absolute; left: 0; right: 0; top: 24px;
    font-size: 9px; letter-spacing: 6px; text-transform: uppercase;
    color: rgba(74,47,8,0.7); text-align: center; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-streets_of_gold .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 3;
    font-size: 24px; font-weight: 700; font-style: italic;
    letter-spacing: -0.2px; text-align: center; line-height: 1.15;
}
.qrt-tract-card-front.qrt-hero-design-streets_of_gold .qrt-cl-phrase em {
    font-style: italic;
}

/* ─── Lake of Fire ─── */
.qrt-tract-card-front.qrt-hero-design-lake_of_fire {
    background: radial-gradient(60% 35% at 30% 20%, rgba(120,90,80,0.18) 0%, transparent 70%),
        radial-gradient(50% 30% at 75% 25%, rgba(120,80,70,0.14) 0%, transparent 70%),
        linear-gradient(180deg, #0a0303 0%, #160505 38%, #4a0d05 60%, #b22a08 78%, #ff7a14 90%, #ffd24a 100%);
    color: #fff5d8; font-family: 'Bebas Neue', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-lake_of_fire::before {
    /* mix-blend-mode creates an isolated compositing layer; when the
       pseudo only covered 55% of the card height (`bottom:0; height:55%`)
       the top edge of that layer rendered as a faint hairline at small
       scales (design-tile preview). Stretching the pseudo to full card
       (`inset: 0`) removes the internal edge — the radial gradients are
       resized proportionally (×0.55) so the flame still sits in the
       lower half visually. */
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(40% 30% at 18% 100%, #ffe14a 0%, #ff7a14 25%, rgba(255,80,10,0) 60%),
        radial-gradient(35% 38% at 38% 100%, #ffb43a 0%, #ff5008 30%, rgba(180,30,5,0) 65%),
        radial-gradient(30% 28% at 58% 100%, #ffd76a 0%, #ff8520 30%, rgba(180,30,5,0) 65%),
        radial-gradient(40% 38% at 80% 100%, #ffc94a 0%, #ff5008 28%, rgba(150,20,5,0) 65%);
    mix-blend-mode: screen; z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-lake_of_fire::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(30% 18% at 25% 30%, rgba(80,60,55,0.35) 0%, transparent 70%),
        radial-gradient(35% 14% at 70% 18%, rgba(60,45,40,0.28) 0%, transparent 70%),
        radial-gradient(25% 12% at 50% 8%, rgba(90,70,65,0.22) 0%, transparent 70%);
    z-index: 3; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-lake_of_fire .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 5;
    font-size: 36px; line-height: 0.95; font-weight: 400;
    letter-spacing: 0.8px; text-transform: uppercase; text-align: center;
    text-shadow: 0 2px 0 #5a0d04, 0 4px 14px rgba(255,90,10,0.65), 0 0 26px rgba(255,140,40,0.5);
    color: #fff5d8;
}

/* ─── Boarding Pass 2 ─── */
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 {
    background: linear-gradient(180deg, #fdfdfd 0%, #ececec 100%);
    color: #1a1a1a; font-family: 'Inter', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-strip {
    position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
    background: linear-gradient(180deg, #1d4ed8 0%, #4f46e5 100%); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-perf {
    position: absolute; left: 65%; top: 12px; bottom: 12px; width: 0;
    border-left: 1.5px dashed rgba(0,0,0,0.3); z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-left {
    position: absolute; left: 20px; top: 18px; right: 38%;
    text-align: left; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-lbl {
    font-size: 7px; letter-spacing: 2px; color: #6b7280;
    font-weight: 700; text-transform: uppercase;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-codes {
    display: flex; align-items: center; gap: 6px; margin-top: 4px;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-c {
    font-size: 24px; font-weight: 800; letter-spacing: -1px; color: #1a1a1a;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-arr {
    font-size: 14px; color: #6b7280;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-phrase {
    position: absolute; left: 20px; bottom: 26px;
    text-align: left; font-size: 14px; font-weight: 700;
    color: #1d4ed8; max-width: 56%; z-index: 3; line-height: 1.2;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-stub {
    position: absolute; right: 12px; top: 0; bottom: 0; width: 30%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-seat { font-size: 9px; color: #6b7280; letter-spacing: 2px; font-weight: 700; }
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-seatN { font-size: 30px; font-weight: 900; letter-spacing: -1px; color: #1a1a1a; }
.qrt-tract-card-front.qrt-hero-design-boarding_pass2 .qrt-cl-gate { font-size: 8px; color: #6b7280; letter-spacing: 1.5px; margin-top: 5px; }

/* ─── Treasury Note ─── */
.qrt-tract-card-front.qrt-hero-design-treasury_note {
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
        linear-gradient(180deg, #f0e8d4 0%, #e2d4b0 100%);
    color: #1a1209; font-family: 'Bodoni Moda', serif;
}
.qrt-tract-card-front.qrt-hero-design-treasury_note::before {
    content: ""; position: absolute; inset: 9px;
    border: 2px solid #1a1209; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-ornL,
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-ornR {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 76px;
    background:
        radial-gradient(circle at 50% 25%, rgba(0,0,0,0.5) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.5) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 75%, rgba(0,0,0,0.5) 0 2px, transparent 3px),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px);
    border: 1px solid rgba(0,0,0,0.4); z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-ornL { left: 18px; }
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-ornR { right: 18px; }
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-serial {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    font-family: 'Courier Prime', monospace; font-size: 9px;
    letter-spacing: 2.5px; color: #6b1212; font-weight: 700; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 3; text-align: center;
}
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-title {
    font-size: 18px; font-weight: 700; color: #1a1209;
    letter-spacing: 1px; text-transform: uppercase;
}
.qrt-tract-card-front.qrt-hero-design-treasury_note .qrt-cl-subtitle {
    font-style: italic; font-weight: 400;
    font-size: 10px; letter-spacing: 1.8px; margin-top: 4px; color: #6b1212;
}

/* ─── Dollar Bill (Photoreal · v5 port · single-pigment intaglio) ───
   Engraved rounded-rect frame (outer 1.5px green rule + inner hairline),
   continuous microtext loop on perimeter, 4 oversized bare "1" numerals
   in the corners (no medallion frame), central "ONE" inside a circular
   bordered medallion, red Cutive Mono serials. */
.qrt-tract-card.qrt-hero-design-dollar_bill {
    --qrt-design-bg:
        radial-gradient(36% 70%, rgba(0, 34, 7, 0.08) 0%, transparent 60%),
        repeating-radial-gradient(circle, transparent 0px, transparent 4px, rgba(0, 34, 7, 0.05) 4px, rgba(0, 34, 7, 0.05) 5px),
        repeating-linear-gradient(45deg, rgba(0, 34, 7, 0.043) 0px, rgba(0, 34, 7, 0.043) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(-45deg, rgba(0, 34, 7, 0.043) 0px, rgba(0, 34, 7, 0.043) 1px, transparent 1px, transparent 4px),
        linear-gradient(#d0dfcf 0%, #d0dfcf 100%);
    --qrt-design-text: #002207;
    --qrt-design-font: 'Cinzel', serif;
    --qrt-design-accent: #b81e2c;
}
.qrt-tract-card-front.qrt-hero-design-dollar_bill {
    background: var(--qrt-design-bg);
    color: var(--qrt-design-text);
    font-family: var(--qrt-design-font);
}
/* Outer engraving rule (rounded) */
.qrt-tract-card-front.qrt-hero-design-dollar_bill::before {
    content: ""; position: absolute; inset: 8px;
    border: 1.5px solid #002207; border-radius: 10px; z-index: 1;
}
/* Inner hairline rule (rounded, slightly tighter radius) */
.qrt-tract-card-front.qrt-hero-design-dollar_bill::after {
    content: ""; position: absolute; inset: 12px;
    border: 0.5px solid rgba(0,34,7,0.55); border-radius: 6px; z-index: 1;
}
/* Continuous microtext loop along the perimeter, sitting between the two rules */
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-micro {
    position: absolute; inset: 12px; z-index: 2; pointer-events: none; overflow: hidden;
}
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-micro svg {
    width: 100%; height: 100%; display: block; overflow: visible;
}
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-micro text {
    font-family: 'Cinzel', serif; font-size: 6px;
    letter-spacing: 0.8px; fill: #002207; font-weight: 600;
}
/* "IN GOD WE TRUST" eyebrow */
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-trust {
    position: absolute; top: 30px; left: 0; right: 0; z-index: 3;
    font-family: 'Cinzel', serif; font-size: 6.5px;
    letter-spacing: 3px; font-weight: 700; color: #002207;
    text-align: center;
}
/* Corner "1" numerals — bare giant numerals, no medallion frame */
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-corner-num {
    position: absolute; z-index: 4;
    width: 26px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; font-size: 50px; font-weight: 900;
    color: #002207; text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-corner-num.qrt-cl-tl { top: 32px; left: 26px; }
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-corner-num.qrt-cl-tr { top: 32px; right: 26px; }
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-corner-num.qrt-cl-bl { bottom: 26px; left: 26px; }
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-corner-num.qrt-cl-br { bottom: 26px; right: 26px; }
/* Central denomination wordmark "ONE" inside a circular medallion */
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-one {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); z-index: 3;
    font-family: 'Cinzel', serif; font-weight: 900;
    font-size: 36px; letter-spacing: 5px; line-height: 1;
    color: #002207; padding: 25px;
    border: 1.5px solid #002207; border-radius: 50%;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(0,34,7,0.18);
    -webkit-text-stroke: 0.5px rgba(0,34,7,0.85);
}
/* Red serial numbers (top-right + bottom-left) */
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-serial {
    position: absolute; z-index: 3;
    font-family: 'Cutive Mono', monospace; font-size: 7.5px;
    letter-spacing: 1.2px; font-weight: 700; color: #b81e2c;
}
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-serial.qrt-cl-top { top: 44px; right: 60px; }
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-serial.qrt-cl-bot { bottom: 44px; left: 60px; }
/* Bottom tagline */
.qrt-tract-card-front.qrt-hero-design-dollar_bill .qrt-cl-bot2 {
    position: absolute; bottom: 28px; left: 0; right: 0; z-index: 3;
    font-size: 5.5px; letter-spacing: 2.5px; font-weight: 700;
    text-align: center;
}

/* ─── License Plate ─── */
.qrt-tract-card-front.qrt-hero-design-license_plate {
    background: linear-gradient(180deg, #fbfbfb 0%, #d0d0d0 100%);
    color: #1a2a4a; font-family: 'Fjalla One', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-license_plate::before {
    content: ""; position: absolute; inset: 9px;
    border: 3px solid #1a2a4a; border-radius: 12px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.7), inset 0 -3px 0 rgba(0,0,0,0.15);
    z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-license_plate .qrt-cl-state {
    position: absolute; top: 16px; left: 0; right: 0;
    font-size: 11px; letter-spacing: 5px; color: #1a2a4a;
    z-index: 3; text-transform: uppercase; text-align: center;
}
.qrt-tract-card-front.qrt-hero-design-license_plate .qrt-cl-num {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 3; text-align: center;
    font-size: 46px; font-weight: 400; letter-spacing: 5px; color: #1a2a4a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 2px 4px rgba(0,0,0,0.25), 0 -1px 0 rgba(0,0,0,0.2);
    line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-license_plate .qrt-cl-phrase {
    position: absolute; bottom: 18px; left: 0; right: 0;
    font-size: 9px; font-family: 'Inter', sans-serif; font-weight: 700;
    color: #1a2a4a; letter-spacing: 1.3px; text-transform: uppercase;
    z-index: 3; text-align: center;
}

/* ─── Forest Topo ─── */
.qrt-tract-card-front.qrt-hero-design-forest_topo {
    background: linear-gradient(180deg, #2a3a28 0%, #1a2818 100%);
    color: #d8e2bf; font-family: 'Inter', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-forest_topo .qrt-cl-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-forest_topo .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 3; text-align: center;
    font-size: 20px; font-weight: 700; letter-spacing: -0.2px;
    text-transform: uppercase; color: #d8e2bf;
}

/* ─── Vintage Map ─── */
.qrt-tract-card-front.qrt-hero-design-vintage_map {
    background: repeating-linear-gradient(45deg, rgba(120,80,30,0.04) 0 1px, transparent 1px 14px),
        radial-gradient(ellipse at 30% 40%, #f3e2b8 0%, #d8c08a 100%);
    color: #3a2614; font-family: 'Im Fell English', serif;
}
.qrt-tract-card-front.qrt-hero-design-vintage_map::before {
    content: ""; position: absolute; inset: 7px;
    border: 1px solid rgba(120,80,30,0.5); z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-vintage_map .qrt-cl-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-vintage_map .qrt-cl-compass {
    position: absolute; right: 22px; top: 20px; z-index: 2;
}
.qrt-tract-card-front.qrt-hero-design-vintage_map .qrt-cl-phrase {
    position: absolute; left: 22px; right: 80px; top: 50%; transform: translateY(-50%);
    z-index: 3;
    font-style: italic; font-size: 18px; color: #3a2614;
    text-align: left; line-height: 1.2;
}

/* ─── Comic Book Cover ─── */
.qrt-tract-card-front.qrt-hero-design-comic_book {
    background: radial-gradient(circle at 50% 0%, #ffd14a 0%, #ff8a30 60%, #d94a08 100%);
    color: #1a0f04; font-family: 'Bangers', sans-serif;
}
.qrt-tract-card-front.qrt-hero-design-comic_book::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1.5px, transparent 2px);
    background-size: 8px 8px; z-index: 1;
    mix-blend-mode: multiply; opacity: 0.6;
}
.qrt-tract-card-front.qrt-hero-design-comic_book::after {
    content: ""; position: absolute; inset: 7px;
    border: 4px solid #1a0f04; border-radius: 15px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-comic_book .qrt-cl-pow {
    position: absolute; top: 16px; right: 18px;
    background: #ffe14a; color: #c41e3a;
    font-size: 18px; padding: 5px 12px; transform: rotate(8deg);
    border: 3px solid #1a0f04; text-shadow: 2px 2px 0 #1a0f04;
    letter-spacing: 1px; box-shadow: 4px 4px 0 #1a0f04; z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-comic_book .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 3;
    font-size: 32px; letter-spacing: 1px; color: #fff;
    text-shadow: 2px 2px 0 #1a0f04, 4px 4px 0 #c41e3a;
    line-height: 1; text-align: center;
}

/* ─── Crayon Doodle ─── */
.qrt-tract-card-front.qrt-hero-design-crayon_doodle {
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 30%),
        repeating-linear-gradient(45deg, rgba(120,80,40,0.05) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #f1d9a8 0%, #d8b574 100%);
    color: #5b3a0a; font-family: 'Edu SA Beginner', cursive;
}
.qrt-tract-card-front.qrt-hero-design-crayon_doodle::before {
    content: ""; position: absolute; left: 12px; right: 12px; top: 12px; bottom: 12px;
    border: 3px solid;
    border-image: repeating-linear-gradient(45deg, #d97706 0 8px, #f59e0b 8px 16px, #d97706 16px 24px) 4;
    border-radius: 8px; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-crayon_doodle .qrt-cl-star {
    position: absolute; z-index: 2; color: #c2410c;
    font-size: 24px; transform: rotate(-12deg);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.1));
}
.qrt-tract-card-front.qrt-hero-design-crayon_doodle .qrt-cl-star.qrt-cl-s1 { top: 16px; right: 26px; transform: rotate(8deg); }
.qrt-tract-card-front.qrt-hero-design-crayon_doodle .qrt-cl-star.qrt-cl-s2 { bottom: 24px; left: 30px; transform: rotate(-12deg); color: #16a34a; }
.qrt-tract-card-front.qrt-hero-design-crayon_doodle .qrt-cl-star.qrt-cl-s3 { bottom: 24px; right: 30px; color: #2563eb; transform: rotate(20deg); }
.qrt-tract-card-front.qrt-hero-design-crayon_doodle .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%) rotate(-2deg);
    z-index: 3;
    font-size: 30px; color: #5b3a0a;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.06); line-height: 1.05;
    text-align: center;
}
.qrt-tract-card-front.qrt-hero-design-crayon_doodle .qrt-cl-phrase em {
    color: #b91c1c; font-style: normal;
}

/* ─── Interstate Shield ─── */
.qrt-tract-card-front.qrt-hero-design-interstate_shield {
    background: radial-gradient(80% 80% at 50% 50%, #1e40af 0%, #1e3a8a 60%, #0f172a 100%);
    color: #fef3c7; font-family: 'Roboto Condensed', sans-serif;
}
/* Stars across the top */
.qrt-tract-card-front.qrt-hero-design-interstate_shield::before {
    content: "\2605 \2605 \2605 \2605 \2605";
    position: absolute; left: 18px; right: 0; top: 8px;
    font-size: 8px; letter-spacing: 18px;
    color: #fcd34d; text-align: center; z-index: 1;
}
.qrt-tract-card-front.qrt-hero-design-interstate_shield .qrt-cl-shield {
    position: absolute; left: 50%; top: 46%;
    transform: translate(-50%, -50%);
    width: 110px; height: 90px;
    background: #fff;
    border-radius: 50% 50% 14px 14px / 35% 35% 14px 14px;
    box-shadow:
        inset 0 0 0 4px #1e3a8a,
        inset 0 0 0 7px #fff,
        inset 0 0 0 9px #1e3a8a,
        0 6px 18px rgba(0,0,0,0.45);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 3;
}
.qrt-tract-card-front.qrt-hero-design-interstate_shield .qrt-cl-shield-lbl {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px; font-weight: 800; letter-spacing: 2px;
    color: #1e3a8a; margin-top: 12px; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-interstate_shield .qrt-cl-shield-num {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 36px; font-weight: 900; color: #1e3a8a;
    line-height: 1; margin-top: 4px; letter-spacing: -1px;
}
.qrt-tract-card-front.qrt-hero-design-interstate_shield .qrt-cl-phrase {
    position: absolute; left: 0; right: 0; bottom: 23px;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800; font-size: 12px; letter-spacing: 2px;
    color: #fef3c7; text-transform: uppercase; text-align: center;
    z-index: 5;
}
.qrt-tract-card-front.qrt-hero-design-interstate_shield .qrt-cl-verse {
    position: absolute; left: 0; right: 0; bottom: 14px;
    font-family: 'DM Mono', monospace;
    font-size: 6px; letter-spacing: 2px;
    color: #93c5fd; text-transform: uppercase; text-align: center;
    z-index: 5;
}
/* ─── Exit Sign ─── */
.qrt-tract-card-front.qrt-hero-design-exit_sign {
    background: linear-gradient(180deg, #1d7a3e 0%, #145c2d 100%);
    color: #fafaf9; font-family: 'Roboto Condensed', sans-serif;
}
/* White inner keyline */
.qrt-tract-card-front.qrt-hero-design-exit_sign::before {
    content: ""; position: absolute; inset: 10px;
    border: 3px solid #fff; border-radius: 12px;
    z-index: 1; pointer-events: none;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-exit-tab {
    position: absolute; right: 10px; top: 10px;
    background: #fff; color: #000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900; font-size: 10px; letter-spacing: 2px;
    padding: 5px 12px; border-radius: 0 7px 0 6px;
    z-index: 3; line-height: 1;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.20); */
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-route-row {
    position: absolute; left: 0; right: 0; top: 12%;
    display: flex; align-items: center; justify-content: center;
    gap: 9px; z-index: 4;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-mini-shield {
    position: relative;
    width: 30px;
    height: 26px;
    background: #fff;
    border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px;
    box-shadow: 
        inset 0 0 0 1.5px #000, 
        inset 0 0 0 2.5px #fff, 
        inset 0 0 0 3.5px #000;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-mini-shield .qrt-cl-shield-lbl {
    font-size: 4px; font-weight: 800; letter-spacing: 0.7px;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-mini-shield .qrt-cl-shield-num {
    font-size: 10px; font-weight: 900; margin-top: 1px;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-cardinal {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900; font-size: 13px; letter-spacing: 2px;
    color: #fff; text-transform: uppercase;
}
/* Destination block — vertically centered as a GROUP. Using top:50% +
   translateY(-50%) keeps the .qrt-cl-city visually centered whether or
   not the .qrt-cl-via-line is rendered (the via toggle just removes the
   second child; the wrapper recenters automatically). */
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-dest {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 3; line-height: 1; text-align: center;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-city {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900; font-size: 38px; letter-spacing: 1.5px;
    color: #fff; text-transform: uppercase;
    text-shadow: 0 1.5px 0 rgba(0,0,0,0.25); line-height: 0.95;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-via-line {
    margin-top: 5px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 1px;
    color: #fafaf9; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-via-line em {
    font-style: italic; font-weight: 500;
    color: rgba(250,250,249,0.85); margin-right: 4px;
}
/* Hidden by default — surfaces only when EXIT ONLY band is toggled off
   (so a "1 MILE" route confirmation can sit in the freed-up space). */
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-miles-line {
    display: none;
    position: absolute; left: 0; right: 0; bottom: 17%;
    z-index: 3; text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900; font-size: 14px; letter-spacing: 2px;
    color: #fff; text-transform: uppercase; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-exit-only-band {
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 13px;
    height: 20%;
    background: #fbb000;
    color: #0a0a0a;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 14px;
    z-index: 4;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.10);
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-exit-only-text {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900; font-size: 16px; letter-spacing: 2px;
    text-transform: uppercase; line-height: 1;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-arrow-l,
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-arrow-r {
    width: 24px; height: 24px; flex: 0 0 auto;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-arrow-l svg,
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-arrow-r svg {
    width: 100%; height: 100%; display: block;
}
/* Bottom-right corner NE arrow — surfaces ONLY when the EXIT ONLY
   band is hidden (via the toggle), since the band's twin arrows
   already imply direction. White stroke matches the white keyline. */
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-corner-arrow {
    position: absolute; right: 28px; bottom: 24px;
    width: 30px; height: 30px;
    display: none;
    z-index: 4;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-cl-corner-arrow svg {
    width: 100%; height: 100%; display: block;
}
/* Toggle off-classes — added to the front-card wrapper when the user
   flips a CUSTOM_TOGGLE_FIELDS toggle off. The miles-line + corner
   arrow surface in place of the EXIT ONLY band when that band is
   hidden. */
.qrt-tract-card-front.qrt-hero-design-exit_sign.qrt-cl-no-exit-only .qrt-cl-exit-only-band { display: none; }
.qrt-tract-card-front.qrt-hero-design-exit_sign.qrt-cl-no-exit-only .qrt-cl-miles-line     { display: block; }
.qrt-tract-card-front.qrt-hero-design-exit_sign.qrt-cl-no-exit-only .qrt-cl-corner-arrow   { display: block; }
.qrt-tract-card-front.qrt-hero-design-exit_sign.qrt-cl-no-via-route .qrt-cl-via-line       { display: none; }
/* Brand sits inside the yellow EXIT ONLY band so it stays legible.
   When the band is hidden, slide the brand back to the empty bottom
   strip below the white keyline. */
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-brand {
    bottom: 18px; z-index: 5; color: #0a0a0a;
    text-shadow: none;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign .qrt-brand .qrt-brand-name { color: #0a0a0a; }
.qrt-tract-card-front.qrt-hero-design-exit_sign.qrt-cl-no-exit-only .qrt-brand {
    bottom: 18px; color: #fafaf9;
}
.qrt-tract-card-front.qrt-hero-design-exit_sign.qrt-cl-no-exit-only .qrt-brand .qrt-brand-name { color: #fafaf9; }

/* Brand-name color overrides for the new ported designs that have
   light/parchment backgrounds where the default white .qrt-brand text
   would be unreadable. .qrt-brand markup itself is the canonical one
   (logo SVG + name span) baked into each customLayoutHtml. */
.qrt-tract-card-front.qrt-hero-design-vintage_map    .qrt-brand-name,
.qrt-tract-card-front.qrt-hero-design-crayon_doodle  .qrt-brand-name {
    color: #2a1a04;
}
.qrt-tract-card-front.qrt-hero-design-vintage_map    .qrt-brand,
.qrt-tract-card-front.qrt-hero-design-crayon_doodle  .qrt-brand {
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
    color: #2a1a04;
}

/* ════════════════════════════════════════════════════════════════════════
   BACK-CARD DEFAULTS — Tickets & Passes / Heaven & Hell / Credit & Finance
                        / Illustrated / Kids
   Each rule:
     1. Defaults the back background to the same gradient as the front,
        with an override hook: --qrt-design-bg-back
     2. Sets the 5 derived back vars (box bg, outline, bold accent,
        title color, body text) tuned to the design's palette
   ──────────────────────────────────────────────────────────────────────── */

/* ─── Tickets & Passes ─── */

.qrt-tract-card-back.qrt-hero-design-admit {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #c0392b 0%, #962d22 100%));
    color: #fff5e0; font-family: 'Limelight', serif;
    --qrt-card-box-derived: rgba(255,245,224,0.10) !important;
    --qrt-card-outline-derived: #fff5e0 !important;
    --qrt-card-bold-derived: #ffd166 !important;
    --qrt-back-title-color-derived: #ffd166 !important;
    --qrt-card-auto-text: #fff5e0 !important;
    --qrt-scan-qr-bg-derived: #f9e1de !important;
    --qrt-scan-here-label-color-derived: #c0392b !important;
}

.qrt-tract-card-back.qrt-hero-design-golden_ticket {
    background: var(--qrt-design-bg-back,
        radial-gradient(120% 90% at 50% 30%, #fff3a8 0%, #f5c93a 32%, #b88515 80%, #8a5a0a 100%));
    color: #3a2806; font-family: 'Cinzel Decorative', serif;
    --qrt-card-box-derived: rgba(58,40,6,0.08) !important;
    --qrt-card-outline-derived: #3a2806 !important;
    --qrt-card-bold-derived: #b88515 !important;
    --qrt-back-title-color-derived: #5a3d0e !important;
    --qrt-card-auto-text: #3a2806 !important;
    --qrt-scan-qr-bg-derived: #fff3a8 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

.qrt-tract-card-back.qrt-hero-design-heaven_ticket {
    background: var(--qrt-design-bg-back,
        radial-gradient(60% 100% at 100% 50%, rgba(255,255,255,0.55) 0%, transparent 50%),
        linear-gradient(180deg, #cfe7ff 0%, #6db7ee 60%, #3984c8 100%));
    color: #0e2540; font-family: 'Cinzel', serif;
    --qrt-card-box-derived: rgba(14,37,64,0.08) !important;
    --qrt-card-outline-derived: #0e2540 !important;
    --qrt-card-bold-derived: #1a4d8f !important;
    --qrt-back-title-color-derived: #0e2540 !important;
    --qrt-card-auto-text: #0e2540 !important;
    --qrt-scan-qr-bg-derived: #e3eef9 !important;
    --qrt-scan-here-label-color-derived: #ffffff !important;
}

.qrt-tract-card-back.qrt-hero-design-boarding {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #f4ebd9 0%, #ddd0b6 100%));
    color: #2a1f10; font-family: 'JetBrains Mono', monospace;
    --qrt-card-box-derived: rgba(42,31,16,0.06) !important;
    --qrt-card-outline-derived: #2a1f10 !important;
    --qrt-card-bold-derived: #1a3a52 !important;
    --qrt-back-title-color-derived: #2a1f10 !important;
    --qrt-card-auto-text: #2a1f10 !important;
    --qrt-scan-qr-bg-derived: #f4ebd9 !important;
    --qrt-scan-here-label-color-derived: #ffffff !important;
}

.qrt-tract-card-back.qrt-hero-design-vip_pass {
    background: var(--qrt-design-bg-back,
        radial-gradient(60% 80% at 50% 0%, rgba(212,175,55,0.18) 0%, transparent 60%),
        linear-gradient(180deg, #14110a 0%, #07060a 100%));
    color: #f1d97a; font-family: 'Cinzel', serif;
    --qrt-card-box-derived: rgba(241,217,122,0.06) !important;
    --qrt-card-outline-derived: #d4af37 !important;
    --qrt-card-bold-derived: #d4af37 !important;
    --qrt-back-title-color-derived: #f1d97a !important;
    --qrt-card-auto-text: #f1d97a !important;
    --qrt-scan-qr-bg-derived: #f5e7b5 !important;
    --qrt-scan-here-label-color-derived: #14110a !important;
}

.qrt-tract-card-back.qrt-hero-design-concert {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #1f1530 0%, #0e0816 100%));
    color: #fbe7ff; font-family: 'Bebas Neue', sans-serif;
    --qrt-card-box-derived: rgba(251,231,255,0.08) !important;
    --qrt-card-outline-derived: #c084fc !important;
    --qrt-card-bold-derived: #f0abfc !important;
    --qrt-back-title-color-derived: #fbe7ff !important;
    --qrt-card-auto-text: #fbe7ff !important;
    --qrt-scan-qr-bg-derived: #f0e0fa !important;
    --qrt-scan-here-label-color-derived: #1f1530 !important;
}

.qrt-tract-card-back.qrt-hero-design-raffle {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #ffe974 0%, #f6c93a 100%));
    color: #2a1d05; font-family: 'Stardos Stencil', sans-serif;
    --qrt-card-box-derived: rgba(42,29,5,0.08) !important;
    --qrt-card-outline-derived: #2a1d05 !important;
    --qrt-card-bold-derived: #c2410c !important;
    --qrt-back-title-color-derived: #2a1d05 !important;
    --qrt-card-auto-text: #2a1d05 !important;
    --qrt-scan-qr-bg-derived: #fff4b8 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

.qrt-tract-card-back.qrt-hero-design-boarding_pass2 {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #fdfdfd 0%, #ececec 100%));
    color: #1a1a1a; font-family: 'Inter', sans-serif;
    --qrt-card-box-derived: rgba(26,26,26,0.04) !important;
    --qrt-card-outline-derived: #1d4ed8 !important;
    --qrt-card-bold-derived: #4f46e5 !important;
    --qrt-back-title-color-derived: #1a1a1a !important;
    --qrt-card-auto-text: #1a1a1a !important;
    --qrt-scan-qr-bg-derived: #e0e7ff !important;
    --qrt-scan-here-label-color-derived: #ffffff !important;
}

/* ─── Heaven & Hell ─── */

.qrt-tract-card-back.qrt-hero-design-pearly_gates {
    background: var(--qrt-design-bg-back,
        radial-gradient(60% 80% at 50% 70%, rgba(255,255,255,0.95) 0%, rgba(252,231,163,0.55) 35%, rgba(186,217,238,0) 70%),
        linear-gradient(180deg, #cfe6f5 0%, #f7e8b5 55%, #ffffff 100%));
    color: #6a4a12; 
    /* font-family: 'Cinzel', serif; */
    --qrt-card-box-derived: rgba(106,74,18,0.06) !important;
    --qrt-card-outline-derived: #6a4a12 !important;
    --qrt-card-bold-derived: #c89a3a !important;
    --qrt-back-title-color-derived: #6a4a12 !important;
    --qrt-card-auto-text: #6a4a12 !important;
    --qrt-scan-qr-bg-derived: #fdf2cf !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

.qrt-tract-card-back.qrt-hero-design-streets_of_gold {
    background: var(--qrt-design-bg-back,
        repeating-linear-gradient(45deg, rgba(120,80,15,0.06) 0 2px, transparent 2px 14px),
        repeating-linear-gradient(-45deg, rgba(120,80,15,0.05) 0 2px, transparent 2px 14px),
        radial-gradient(120% 90% at 50% 100%, #fff4c0 0%, #f4c84a 45%, #b07a17 100%));
    color: #4a2f08; 
    /* font-family: 'Cormorant Garamond', serif; */
    --qrt-card-box-derived: rgba(74,47,8,0.08) !important;
    --qrt-card-outline-derived: #4a2f08 !important;
    --qrt-card-bold-derived: #b07a17 !important;
    --qrt-back-title-color-derived: #4a2f08 !important;
    --qrt-card-auto-text: #4a2f08 !important;
    --qrt-scan-qr-bg-derived: #ffeec0 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

.qrt-tract-card-back.qrt-hero-design-lake_of_fire {
    background: var(--qrt-design-bg-back,
        radial-gradient(60% 35% at 30% 20%, rgba(120,90,80,0.18) 0%, transparent 70%),
        radial-gradient(50% 30% at 75% 25%, rgba(120,80,70,0.14) 0%, transparent 70%),
        linear-gradient(180deg, #0a0303 0%, #160505 38%, #4a0d05 60%, #b22a08 78%, #ff7a14 90%, #ffd24a 100%));
    color: #fff5d8; 
    font-family: 'Bebas Neue', sans-serif;
    --qrt-card-box-derived: rgba(0,0,0,0.32) !important;
    --qrt-card-outline-derived: #ffd24a !important;
    --qrt-card-bold-derived: #ff7a14 !important;
    --qrt-back-title-color-derived: #ffd24a !important;
    --qrt-card-auto-text: #fff5d8 !important;
    --qrt-scan-qr-bg-derived: #1a0a05 !important;
    --qrt-scan-here-label-color-derived: #1a0a05 !important;
}

/* ─── Credit & Finance ─── */

.qrt-tract-card-back.qrt-hero-design-platinum {
    background: var(--qrt-design-bg-back,
        radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,0.18) 0%, transparent 60%),
        linear-gradient(135deg, #d4d6db 0%, #8d9099 50%, #b5b8c0 100%));
    color: #1a1d24; 
    /* font-family: 'JetBrains Mono', monospace; */
    --qrt-card-box-derived: rgba(26,29,36,0.06) !important;
    --qrt-card-outline-derived: #1a1d24 !important;
    --qrt-card-bold-derived: #5b6470 !important;
    --qrt-back-title-color-derived: #1a1d24 !important;
    --qrt-card-auto-text: #1a1d24 !important;
    --qrt-scan-qr-bg-derived: #e8eaef !important;
    --qrt-scan-here-label-color-derived: #ffffff !important;
}

.qrt-tract-card-back.qrt-hero-design-blackcard {
    background: var(--qrt-design-bg-back,
        radial-gradient(60% 80% at 50% 110%, rgba(212,175,55,0.10) 0%, transparent 60%),
        linear-gradient(135deg, #161618 0%, #0a0a0c 60%));
    color: #d4af37; 
    /* font-family: 'Cinzel', serif; */
    --qrt-card-box-derived: rgba(212,175,55,0.05) !important;
    --qrt-card-outline-derived: #d4af37 !important;
    --qrt-card-bold-derived: #d4af37 !important;
    --qrt-back-title-color-derived: #f1d97a !important;
    --qrt-card-auto-text: #d4af37 !important;
    --qrt-scan-qr-bg-derived: #0a0a0c !important;
    --qrt-scan-here-label-color-derived: #14110a !important;
}

.qrt-tract-card-back.qrt-hero-design-giftcard {
    background: var(--qrt-design-bg-back, linear-gradient(135deg, #fda4af 0%, #f472b6 50%, #c026d3 100%));
    color: #ffffff; font-family: 'Pacifico', cursive;
    --qrt-card-box-derived: rgba(255,255,255,0.12) !important;
    --qrt-card-outline-derived: #ffffff !important;
    --qrt-card-bold-derived: #fef08a !important;
    --qrt-back-title-color-derived: #ffffff !important;
    --qrt-card-auto-text: #ffffff !important;
    --qrt-scan-qr-bg-derived: #fce7f3 !important;
    --qrt-scan-here-label-color-derived: #c026d3 !important;
}

.qrt-tract-card-back.qrt-hero-design-bond {
    background: var(--qrt-design-bg-back,
        repeating-linear-gradient(90deg, rgba(20,40,30,0.05) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #ecf3ec 0%, #d2dfd3 100%));
    color: #1a3a23; 
    /* font-family: 'Cinzel', serif; */
    --qrt-card-box-derived: rgba(26,58,35,0.06) !important;
    --qrt-card-outline-derived: #1a3a23 !important;
    --qrt-card-bold-derived: #c19a4a !important;
    --qrt-back-title-color-derived: #1a3a23 !important;
    --qrt-card-auto-text: #1a3a23 !important;
    --qrt-scan-qr-bg-derived: #e8f1e9 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

.qrt-tract-card-back.qrt-hero-design-treasury_note {
    background: var(--qrt-design-bg-back,
        repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
        linear-gradient(180deg, #f0e8d4 0%, #e2d4b0 100%));
    color: #1a1209; font-family: 'Bodoni Moda', serif;
    --qrt-card-box-derived: rgba(26,18,9,0.06) !important;
    --qrt-card-outline-derived: #1a1209 !important;
    --qrt-card-bold-derived: #8a6818 !important;
    --qrt-back-title-color-derived: #1a1209 !important;
    --qrt-card-auto-text: #1a1209 !important;
    --qrt-scan-qr-bg-derived: #f5edd9 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

/* dollar_bill already uses the 4-var template on .qrt-tract-card.qrt-hero-design-dollar_bill;
   the back consumes those vars and overrides the bg if --qrt-design-bg-back is set */
.qrt-tract-card-back.qrt-hero-design-dollar_bill {
    background: var(--qrt-design-bg-back, var(--qrt-design-bg));
    color: var(--qrt-design-text-back, var(--qrt-design-text));
    font-family: var(--qrt-design-font-back, var(--qrt-design-font));
    --qrt-card-box-derived: rgba(0,34,7,0.06) !important;
    --qrt-card-outline-derived: #002207 !important;
    --qrt-card-bold-derived: #b81e2c !important;
    --qrt-back-title-color-derived: #002207 !important;
    --qrt-card-auto-text: #002207 !important;
    --qrt-scan-qr-bg-derived: #e3f2e7 !important;
    --qrt-scan-here-label-color-derived: #ffffff !important;
}

/* ─── Illustrated (custom-layout) ─── */

.qrt-tract-card-back.qrt-hero-design-license_plate {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #fbfbfb 0%, #d0d0d0 100%));
    color: #1a2a4a; font-family: 'Fjalla One', sans-serif;
    --qrt-card-box-derived: rgba(26,42,74,0.05) !important;
    --qrt-card-outline-derived: #1a2a4a !important;
    --qrt-card-bold-derived: #b91c1c !important;
    --qrt-back-title-color-derived: #1a2a4a !important;
    --qrt-card-auto-text: #1a2a4a !important;
    --qrt-scan-qr-bg-derived: #e7eaf2 !important;
    --qrt-scan-here-label-color-derived: #ffffff !important;
}

.qrt-tract-card-back.qrt-hero-design-forest_topo {
    background: var(--qrt-design-bg-back, linear-gradient(180deg, #2a3a28 0%, #1a2818 100%));
    color: #d8e2bf; font-family: 'Inter', sans-serif;
    --qrt-card-box-derived: rgba(216,226,191,0.06) !important;
    --qrt-card-outline-derived: #d8e2bf !important;
    --qrt-card-bold-derived: #a3b88a !important;
    --qrt-back-title-color-derived: #d8e2bf !important;
    --qrt-card-auto-text: #d8e2bf !important;
    --qrt-scan-qr-bg-derived: #1a2818 !important;
    --qrt-scan-here-label-color-derived: #1a2818 !important;
}

.qrt-tract-card-back.qrt-hero-design-vintage_map {
    background: var(--qrt-design-bg-back,
        repeating-linear-gradient(45deg, rgba(120,80,30,0.04) 0 1px, transparent 1px 14px),
        radial-gradient(ellipse at 30% 40%, #f3e2b8 0%, #d8c08a 100%));
    color: #3a2614; font-family: 'Im Fell English', serif;
    --qrt-card-box-derived: rgba(58,38,20,0.06) !important;
    --qrt-card-outline-derived: #3a2614 !important;
    --qrt-card-bold-derived: #8a4a18 !important;
    --qrt-back-title-color-derived: #3a2614 !important;
    --qrt-card-auto-text: #3a2614 !important;
    --qrt-scan-qr-bg-derived: #f5e7c8 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}

.qrt-tract-card-back.qrt-hero-design-interstate_shield {
    background: var(--qrt-design-bg-back,
        radial-gradient(80% 80% at 50% 30%, #1e40af 0%, #1e3a8a 60%, #0f172a 100%));
    color: #fef3c7; font-family: 'Roboto Condensed', sans-serif;
    --qrt-card-box-derived: rgba(0,0,0,0.30) !important;
    --qrt-card-outline-derived: #fcd34d !important;
    --qrt-card-bold-derived: #fcd34d !important;
    --qrt-back-title-color-derived: #fcd34d !important;
    --qrt-card-auto-text: #fef3c7 !important;
    --qrt-scan-qr-bg-derived: #0f172a !important;
    --qrt-scan-here-label-color-derived: #0f172a !important;
}

.qrt-tract-card-back.qrt-hero-design-exit_sign {
    background: var(--qrt-design-bg-back,
        linear-gradient(180deg, #1d7a3e 0%, #145c2d 100%));
    color: #fafaf9; font-family: 'Roboto Condensed', sans-serif;
    --qrt-card-box-derived: rgba(0,0,0,0.28) !important;
    --qrt-card-outline-derived: #fafaf9 !important;
    --qrt-card-bold-derived: #fbb000 !important;
    --qrt-back-title-color-derived: #fbb000 !important;
    --qrt-card-auto-text: #fafaf9 !important;
    --qrt-scan-qr-bg-derived: #0c2614 !important;
    --qrt-scan-here-label-color-derived: #0c2614 !important;
}

/* ─── Kids ─── */

.qrt-tract-card-back.qrt-hero-design-comic_book {
    background: var(--qrt-design-bg-back,
        radial-gradient(circle at 50% 0%, #ffd14a 0%, #ff8a30 60%, #d94a08 100%));
    color: #1a0f04; font-family: 'Bangers', sans-serif;
    --qrt-card-box-derived: rgba(26,15,4,0.08) !important;
    --qrt-card-outline-derived: #1a0f04 !important;
    --qrt-card-bold-derived: #d94a08 !important;
    --qrt-back-title-color-derived: #1a0f04 !important;
    --qrt-card-auto-text: #1a0f04 !important;
    --qrt-scan-qr-bg-derived: #ffe4b8 !important;
    --qrt-scan-here-label-color-derived: #ffd14a !important;
}

.qrt-tract-card-back.qrt-hero-design-crayon_doodle {
    background: var(--qrt-design-bg-back,
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 30%),
        repeating-linear-gradient(45deg, rgba(120,80,40,0.05) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #f1d9a8 0%, #d8b574 100%));
    color: #5b3a0a; font-family: 'Edu SA Beginner', cursive;
    --qrt-card-box-derived: rgba(91,58,10,0.06) !important;
    --qrt-card-outline-derived: #5b3a0a !important;
    --qrt-card-bold-derived: #c2410c !important;
    --qrt-back-title-color-derived: #5b3a0a !important;
    --qrt-card-auto-text: #5b3a0a !important;
    --qrt-scan-qr-bg-derived: #f4dfb0 !important;
    --qrt-scan-here-label-color-derived: #fff5dc !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   Tract-Specific Theme — scroll tracts
   ═══════════════════════════════════════════════════════════════════════
   Applied when the welcome card has `tractTheme: true` AND the user has
   toggled "Apply card theme to tract".

   The `qrt-tract-themed` class lives on:
     - `.container` div on the live page (NOT body — sidesteps the Divi
       parent theme's <body class="custom-background ..."> conflict that
       blocked body-scoped rules from winning the cascade).
     - `#qrt-drop-zone` in the builder preview.

   The form-theme palette provides the CSS vars via the
   `[data-form-theme="<slug>"]` rule emitted by qrt_form_theme_css().

   Per-block bg (NOT body) so the texture scrolls with content instead of
   sitting fixed behind it. The hero section is excluded — it has its own
   card design painting its background.

   Each block also gets a center-spotlight depth gradient via ::before —
   `--form-bg-overlay` (30% color in the middle, transparent at the edges).
   ═══════════════════════════════════════════════════════════════════════ */

/* The container paints the full textured bg ONCE. It scrolls naturally
   with the page (it's a plain block div, not fixed), so the bg moves
   with content as the user scrolls — no stationary-body behavior. The
   single canvas eliminates seams between blocks.

   --form-tract-bg is an OPTIONAL per-design override for designs whose
   --form-bg uses percentage-sized radial gradients tuned for the bounded
   form-wrapper box. On the tall scroll-tract container those gradients
   warp into distorted wave patterns. Designs that hit this case (e.g.
   personal_check) define a scale-stable --form-tract-bg variant; designs
   whose --form-bg works at scale (e.g. salvation_card) don't need to. */
.container.qrt-tract-themed,
#qrt-drop-zone.qrt-tract-themed {
    background: var(--form-tract-bg, var(--form-bg));
}
/* Builder drop zone keeps overflow:hidden so the depth overlays don't
   bleed past its rounded corners. The LIVE-page .container deliberately
   does NOT clip — `overflow: hidden` would make .container the nearest
   scroll container for sticky chapter headings, but the body is what
   actually scrolls, so sticky would silently resolve to static. */
#qrt-drop-zone.qrt-tract-themed {
    overflow: hidden;
}

/* Each block creates its own stacking context (`isolation: isolate`) so
   the ::before depth overlay can use z-index:-1 to sit BELOW children
   without escaping the block's bounds. This avoids overriding child
   position (which would break `position: sticky` on chapter headings). */
.qrt-tract-themed .block:not(.qrt-hero-section),
#qrt-drop-zone.qrt-tract-themed > .block:not(.qrt-hero-section) {
    position: relative;
    isolation: isolate;
}

/* Center-of-block depth overlay — middle 30% color, sides transparent.
   z-index:-1 (within the isolated stacking context) keeps it below all
   block children but ABOVE the container's bg. pointer-events:none so
   it never blocks clicks. */
.qrt-tract-themed .block:not(.qrt-hero-section)::before,
#qrt-drop-zone.qrt-tract-themed > .block:not(.qrt-hero-section)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 100% at 50% 50%,
        var(--form-bg-overlay, rgba(0,0,0,0.18)) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;
}


/* ═══════════════════════════════════════════════════════════════════════
   Tract-Specific Theme — typography + per-element colors
   ═══════════════════════════════════════════════════════════════════════
   Each tract-themed palette in qrt_form_theme_palettes() can declare:
     --tract-font, --tract-accent, --tract-paragraph-color,
     --tract-floating-color, --tract-heading-color, --tract-subheading-color,
     --tract-chapter-bg, --tract-chapter-border,
     --tract-deep-dive-bg, --tract-deep-dive-color,
     --tract-toggle-bg, --tract-toggle-color,
     --tract-toggle-active-bg, --tract-toggle-active-color,
     --tract-toggle-active-outline
   …and these rules pick them up. Designs without these vars fall through
   the var() second-arg defaults, so existing untouched themes stay as-is.
   ═══════════════════════════════════════════════════════════════════════ */

/* Font family — applied across all body-copy elements when the design
   declares one. Falls back to the inherited font if --tract-font is unset.
   Builder fallback: if `qrt-tract-themed` class isn't present on drop-zone
   for any reason, the data-form-theme attribute alone is enough — it's
   only set on the drop-zone when the user explicitly opted into a tract
   theme (the JS strips it when the toggle is off, see qrt-builder.js
   afterStructureChange ~line 10047). */
.qrt-tract-themed .paragraph-text,
.qrt-tract-themed .scroll-fx,
.qrt-tract-themed .scroll-fx span,
.qrt-tract-themed .content-box,
.qrt-tract-themed .content-box span,
.qrt-tract-themed .content-box.ac-question,
.qrt-tract-themed .ac-button-container,
.qrt-tract-themed #yes-ready,
.qrt-tract-themed .foundational-verse,
.qrt-tract-themed .main-button,
.qrt-tract-themed .tract-table,
.qrt-tract-themed .end-message,
.qrt-tract-themed .chapter .heading,
.qrt-tract-themed .chapter .subheading,
.qrt-tract-themed [id^="openDeepDiveOverlayButton-"],
.qrt-tract-themed .reference-toggle-container button,
.qrt-tract-themed strong,
.qrt-tract-themed em,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) strong,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) em,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .paragraph-text,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .scroll-fx,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .scroll-fx span,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .content-box,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .content-box span,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .content-box.ac-question,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .ac-button-container,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) #yes-ready,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .foundational-verse,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .main-button,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .tract-table,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .end-message,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .chapter .heading,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .chapter .subheading,
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) [id^="openDeepDiveOverlayButton-"],
#qrt-drop-zone[data-form-theme]:not([data-form-theme="default"]) .reference-toggle-container button {
    font-family: var(--tract-font, inherit);
}

/* Paragraphs */
.qrt-tract-themed .paragraph-text {
    color: var(--tract-paragraph-color, inherit);
}

/* Floating text boxes (.scroll-fx) */
.qrt-tract-themed .scroll-fx {
    color: var(--tract-floating-color, inherit);
}

/* Chapter container — tinted glass */
.qrt-tract-themed .chapter {
    background: var(--tract-chapter-bg, rgba(249,252,255,0.1));
    border: 1px solid var(--tract-chapter-border, rgba(255,255,255,0.4));
}
.qrt-tract-themed .chapter .heading {
    color: var(--tract-heading-color, inherit);
}
.qrt-tract-themed .chapter .subheading {
    color: var(--tract-subheading-color, var(--tract-accent, inherit));
}

/* Deep-dive trigger button + sibling pill buttons (.not-ready-button is
   the bare-text variant rendered by the notReady deep-dive slot;
   .main-button is the generic CTA pill used elsewhere on tracts) — all
   share the same themed background + ink so the page feels cohesive. */
.qrt-tract-themed [id^="openDeepDiveOverlayButton-"],
.qrt-tract-themed #openDeepDiveOverlayButton-notReady.not-ready-button,
.qrt-tract-themed .main-button {
    background: var(--tract-deep-dive-bg, linear-gradient(0deg, rgb(19 78 192 / 11%), rgb(19 78 192 / 0%)));
    background-color: var(--tract-deep-dive-bg, linear-gradient(0deg, rgb(19 78 192 / 11%), rgb(19 78 192 / 0%)));
    color: var(--tract-deep-dive-color, black);
}
.qrt-tract-themed [id^="openDeepDiveOverlayButton-"] .icon svg {
    color: var(--tract-deep-dive-color, black);
}

/* Salvation-response "Yes, I'm ready!" CTA — separate var because the
   default black + white ink works for most tract themes, but designs
   with a near-black bg (lake_of_fire) need to override it to something
   that contrasts. The .ripple animation behind the button matches the
   button bg so the pulse looks like an extension of the CTA itself
   (not a black halo around an orange button). */
.qrt-tract-themed #yes-ready {
    background: var(--tract-yes-ready-bg, #000) !important;
    color: var(--tract-yes-ready-color, #fff) !important;
    font-weight: 700;
}
/* Scope the ripple override to #yes-ready ONLY. The .ripple class is
   ALSO used by the "Let's Get Started!" .step button at the end-menu,
   which we want to keep at the default black so this rule has to
   target the salvation-CTA's ripples specifically. */
.qrt-tract-themed #yes-ready .ripple {
    background: var(--tract-yes-ready-bg, #000);
}

/* Reference toggle container — base + active states */
.qrt-tract-themed .reference-toggle-container button {
    background: var(--tract-toggle-bg, rgb(19 78 192 / 6%));
    color: var(--tract-toggle-color, #000);
}
.qrt-tract-themed .reference-toggle-container button.active {
    background: var(--tract-toggle-active-bg, #000);
    color: var(--tract-toggle-active-color, #fff);
}
.qrt-tract-themed .reference-toggle-container button.active::after {
    border-color: var(--tract-toggle-active-outline, #000);
}

/* Section labels — "Deep Dive Questions" header (.section-label),
   .more-messages-text, and the "The Bible says:" intro span that
   sits inside a wrapper div alongside a .foundational-verse sibling.
   The `:has(> .foundational-verse)` qualifier scopes the third
   selector to ONLY that wrapper — so arbitrary first-child spans
   elsewhere (e.g. the verse text inside .bible-reference-container)
   don't get tinted with the section-label color and disappear
   against the cream scripture box. */
.qrt-tract-themed .section-label,
.qrt-tract-themed .more-messages-text,
.qrt-tract-themed .content-box > div:has(> .foundational-verse) > span:first-child {
    color: var(--tract-section-label-color, inherit);
}

/* Content-box body text — paragraphs, plain spans, .ac-question text,
   and the emoji-reactions counter. Default tract styles leave these
   inheriting from body (#000-ish), which disappears on dark bgs. */
.qrt-tract-themed .content-box,
.qrt-tract-themed .content-box p,
.qrt-tract-themed .content-box > span,
.qrt-tract-themed .content-box.ac-question,
.qrt-tract-themed .emoji-total,
.qrt-tract-themed .emoji-total .emoji-total-count {
    color: var(--tract-content-color, inherit);
}

/* Foundational verse + Bible-reference container — both render scripture
   text inside cream/white boxes, so they need their OWN ink color so
   the verse text is readable. The `> span` direct-child selector on
   .bible-reference-container skips the <strong>'s inner reference
   span, so the verse reference (e.g. "Romans 10:9") inherits from
   <strong> and stays at --tract-accent. Without this scoping the
   reference would render in the dark verse-text color too. */
.qrt-tract-themed .foundational-verse,
.qrt-tract-themed .foundational-verse span,
.qrt-tract-themed .bible-reference-container,
.qrt-tract-themed .bible-reference-container > span {
    color: var(--tract-foundational-verse-color, #1c1917);
}
/* Background color of the scripture box itself. master-styles paints
   it with `background: var(--ref-bg)` (cream/light blue tinted by the
   user's accent picker); this lets a tract theme swap that for a
   theme-appropriate panel color. Falls through to --ref-bg so
   un-themed (or themes that don't set this var) keep the legacy look. */
.qrt-tract-themed .foundational-verse,
.qrt-tract-themed .bible-reference-container {
    background: var(--tract-foundational-verse-bg, var(--ref-bg));
}

/* Tract-table — outer card chrome + row text + header bar. The
   .table-bold-word pill bg already comes from --tract-accent (defined
   above); these vars cover the rest of the table. */
.qrt-tract-themed .tract-table {
    background: var(--tract-table-bg, transparent);
    color: var(--tract-table-text, inherit);
    border-color: var(--tract-table-border, currentColor);
}
.qrt-tract-themed .tract-table > span {
    color: var(--tract-table-text, inherit);
}
.qrt-tract-themed .tract-table .table-title {
    background: var(--tract-table-title-bg, var(--tract-table-bg, transparent));
    color: var(--tract-table-title-color, var(--tract-table-text, inherit));
    border-bottom-color: var(--tract-table-border, currentColor);
}


/* ═══════════════════════════════════════════════════════════════════════
   Tract-Specific Theme — accent override
   ═══════════════════════════════════════════════════════════════════════
   The dynamic-template emits a <style> block with hardcoded accent rules
   from the user's per-tract accent_color picker — e.g.
     .subheading { color: <accent>; }
     strong      { color: <accent>; }
     .question-section strong, .question-section b { color: <accent>; }
     .table-bold-word { background: <accent>; }
     .question-section / .table-title { background: <tinted accent>; }
   Those rules have specificity (0,0,1,0). The rules below are scoped to
   `.qrt-tract-themed` (0,0,2,0) so they win when a tract-themed design's
   --tract-accent should drive the accent across the page.
   ═══════════════════════════════════════════════════════════════════════ */

.qrt-tract-themed strong,
.qrt-tract-themed .subheading,
.qrt-tract-themed .question-section strong,
.qrt-tract-themed .question-section b {
    color: var(--tract-accent, inherit);
}

.qrt-tract-themed .table-bold-word {
    background: var(--tract-accent, currentColor);
}

/* Soft accent tint for question-section + table-title bg/border. color-mix
   is supported by all evergreen browsers (Chrome 111+, Safari 16.2+,
   Firefox 113+). Safe fallback: var() second-arg only kicks in when
   --tract-accent itself is unset, which can only happen if a design
   declared other --tract-* vars but skipped this one — uncommon. */
.qrt-tract-themed .question-section {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--tract-accent) 15%, transparent) 10%,
        transparent 100%
    );
    border: 1px solid color-mix(in srgb, var(--tract-accent) 25%, transparent);
}
.qrt-tract-themed .table-title {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--tract-accent) 15%, transparent) 10%,
        transparent 100%
    );
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--tract-accent) 25%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════
   End-menu Credits — collapsible movie-credits style block
   ═══════════════════════════════════════════════════════════════════════
   Rendered by qrt_dyn_render_tract_end_menu() in qrt-dynamic-template.php
   only when at least one credit list (writtenBy / contributedBy /
   inspiredBy / modifiedBy / translatedBy) has a non-empty name.
   Toggled via window.qrtToggleCredits (also defined inline in
   qrt-dynamic-template.php, only emitted when credits actually render).

   Two-column grid: labels on the right edge of column 1 (right-aligned),
   names on the left edge of column 2 (left-aligned), so they meet at the
   centerline like film-end credits. Multiple names per category stack
   vertically inside the second column.
   ═══════════════════════════════════════════════════════════════════════ */

.qrt-credits-block {
    margin-top: 7px;
    text-align: center;
}

.qrt-credits-toggle {
    width: fit-content;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    background: #fff;
}

/* Smooth height-driven expansion using the grid-template-rows: 0fr → 1fr
   pattern. Unlike max-height (which has to over-budget a giant ceiling
   and produces uneven easing for short content), this animates the
   ACTUAL content height — open and close feel identical regardless of
   how many credits the tract has. The .qrt-credits-panel-inner child is
   the single grid row; min-height:0 + overflow:hidden lets it shrink to
   0 cleanly. Margin-top transitions in lockstep with the same duration. */
.qrt-credits-panel {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.4s ease,
                margin-top         0.4s ease;
}
.qrt-credits-panel.is-open {
    grid-template-rows: 1fr;
    margin-top: 10px;
}
.qrt-credits-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.qrt-credits-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.qrt-credits-row:last-child {
    border-bottom: none;
}

.qrt-credits-label {
    text-align: right;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: 0.65;
    line-height: 1.5;
    padding-top: 3px;
}

.qrt-credits-names {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qrt-credits-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

/* Tract-theme integration: pick up the design's font + accent + ink so
   credits feel native to the theme. Falls through to inherited values
   on un-themed tracts. */
.qrt-tract-themed .qrt-credits-name,
.qrt-tract-themed .qrt-credits-label {
    font-family: var(--tract-font, inherit);
}
.qrt-tract-themed .qrt-credits-label {
    /* color: var(--tract-accent, currentColor); */
    /* opacity: 0.85; */
}
.qrt-tract-themed .qrt-credits-name {
    color: var(--tract-credits-name-color, var(--tract-paragraph-color, inherit));
}

/* End-transition dot pattern — the bg circle SVG behind the
   "End of the message" panel. JS hardcodes fill="rgb(19 78 192 / 50%)";
   CSS `fill:` outranks SVG presentation attributes (0,0,0,0 specificity),
   so this var override wins on themed pages. Falls back to the original
   blue when --tract-end-transition-dot isn't set. */
.qrt-tract-themed .end-transition-container svg circle {
    fill: var(--tract-end-transition-dot, rgb(19 78 192 / 50%));
}

/* Typing-animation pills ("Remember to keep scrolling down!", etc.).
   Default master-styles uses #0073e3 ink + var(--main-border) which
   are tuned for light pages and disappear on dark themes. We override
   border-color (not the shorthand) so the existing width + style from
   --main-border stick. */
.qrt-tract-themed .typing-container,
.qrt-tract-themed .typing-container-2 {
    color: var(--tract-typing-color, inherit);
    border-color: var(--tract-typing-border, currentColor);
}

/* Scroll-down indicator (#scroll-down-indicator) — fixed-position pill
   appended directly to <body>, OUTSIDE the .container[data-form-theme]
   scope, so the form-theme CSS vars don't cascade out to it. Use the
   `:has()` parent selector to match body when a child carries a
   specific data-form-theme attr, then hardcode the per-theme palette.
   Add a new theme block here when extending tract-themes that need a
   non-default scroll-indicator look. */

/* Exit Sign — asphalt fade + sign-white ink + arrow stroke */
body:has([data-form-theme="exit_sign"]) #scroll-down-indicator {
    background: linear-gradient(0deg, #232323 40%, transparent 90%);
}
body:has([data-form-theme="exit_sign"]) #scroll-down-indicator .scroll-text {
    color: #fafaf9;
}
body:has([data-form-theme="exit_sign"]) #scroll-down-indicator svg path {
    stroke: #fafaf9;
}

/* Bitcoin — dark crypto fade + cream ink */
body:has([data-form-theme="bitcoin"]) #scroll-down-indicator { background: linear-gradient(0deg, #0e0e10 40%, transparent 90%); }
body:has([data-form-theme="bitcoin"]) #scroll-down-indicator .scroll-text { color: #f5f5f7; }
body:has([data-form-theme="bitcoin"]) #scroll-down-indicator svg path { stroke: #f5f5f7; }

/* Savings Bond — pale guilloche fade + forest ink */
body:has([data-form-theme="bond"]) #scroll-down-indicator { background: linear-gradient(0deg, #d8e4d8 40%, transparent 90%); }
body:has([data-form-theme="bond"]) #scroll-down-indicator .scroll-text { color: #1a3a23; }
body:has([data-form-theme="bond"]) #scroll-down-indicator svg path { stroke: #1a3a23; }

/* Lake of Fire — ember-dark fade + cream ink */
body:has([data-form-theme="lake_of_fire"]) #scroll-down-indicator { background: linear-gradient(0deg, #0a0303 40%, transparent 90%); }
body:has([data-form-theme="lake_of_fire"]) #scroll-down-indicator .scroll-text { color: #fff5e6; }
body:has([data-form-theme="lake_of_fire"]) #scroll-down-indicator svg path { stroke: #fff5e6; }

/* Pearly Gates — heaven-cream fade + dark navy ink */
body:has([data-form-theme="pearly_gates"]) #scroll-down-indicator { background: linear-gradient(0deg, #fff8e1 40%, transparent 90%); }
body:has([data-form-theme="pearly_gates"]) #scroll-down-indicator .scroll-text { color: #2a3140; }
body:has([data-form-theme="pearly_gates"]) #scroll-down-indicator svg path { stroke: #2a3140; }

/* Comic Book — POW orange fade + black ink */
body:has([data-form-theme="comic_book"]) #scroll-down-indicator { background: linear-gradient(0deg, #ffd9a3 40%, transparent 90%); }
body:has([data-form-theme="comic_book"]) #scroll-down-indicator .scroll-text { color: #1a1a1a; }
body:has([data-form-theme="comic_book"]) #scroll-down-indicator svg path { stroke: #1a1a1a; }

/* Crayon Doodle — kraft tan fade + dark brown ink */
body:has([data-form-theme="crayon_doodle"]) #scroll-down-indicator { background: linear-gradient(0deg, #e3c490 40%, transparent 90%); }
body:has([data-form-theme="crayon_doodle"]) #scroll-down-indicator .scroll-text { color: #3a2614; }
body:has([data-form-theme="crayon_doodle"]) #scroll-down-indicator svg path { stroke: #3a2614; }

/* Vintage Map — parchment-tan fade + dark brown ink */
body:has([data-form-theme="vintage_map"]) #scroll-down-indicator { background: linear-gradient(0deg, #d8c08a 40%, transparent 90%); }
body:has([data-form-theme="vintage_map"]) #scroll-down-indicator .scroll-text { color: #3a2614; }
body:has([data-form-theme="vintage_map"]) #scroll-down-indicator svg path { stroke: #3a2614; }


/* ═══════════════════════════════════════════════════════════════════════
   Lake of Fire — fire effects (side flames + rising embers)
   ═══════════════════════════════════════════════════════════════════════
   Solid black bg comes from --form-bg / --form-tract-bg in the palette.
   Two fixed pseudo-elements on .container paint ember-orange flame fields
   bleeding in from each edge with a flicker animation. Two body pseudos
   layer rising ember particles — multiple particles per layer via the
   box-shadow stacking trick, two layers staggered to feel non-uniform.
   Builder drop zone gets the same treatment so the preview matches the
   live tract.

   STACKING — the embers must paint BEHIND tract content. The body
   pseudos are at z-index: -1 (below body's static children). For that
   to be visible at all, the .container's bg has to be transparent on
   live pages so the body bg shows through (with the embers between).
   We move the asphalt-black bg from .container onto the body itself
   — visually identical (both scroll with the page), but it lets the
   embers paint over body bg + under container content. Builder drop
   zone keeps its bg on .qrt-drop-zone (the embers don't render in
   the builder, so no transparent-bg trick needed there).
   ═══════════════════════════════════════════════════════════════════════ */

/* Live page only — body bg is set inline by the dynamic-template's
   per-theme style block (so the bg matches the theme + the chrome-sync
   script reads the right color). We just need `isolation: isolate` on
   body so the embers' z-index:-1 stays inside body's stacking context
   (otherwise they escape upward and render below body bg = invisible).
   `.container` is set to transparent so body bg + embers show through
   behind container content. */
body:not(:has(#qrt-drop-zone)):has([data-form-theme="lake_of_fire"]) {
    isolation: isolate;
}
body:not(:has(#qrt-drop-zone)):has([data-form-theme="lake_of_fire"]) .container[data-form-theme="lake_of_fire"] {
    background: transparent;
    position: relative;  /* anchor for the absolute side-flame pseudos so they scroll with content */
}

/* Front + back card border for lake_of_fire — the card's dark bg blends
   into the asphalt-black tract bg without separation. A faint #333
   hairline outlines the card so it reads as a distinct object. Live
   page only (the qrt-tract-card-live-page class is added only on live
   render — see qrt-builder-functions.php case 'welcome-card-block'). */
.qrt-tract-card-live-page.qrt-hero-design-lake_of_fire {
    border: 1px solid #333;
}

/* ── Side flames ── */
.container[data-form-theme="lake_of_fire"]::before,
.container[data-form-theme="lake_of_fire"]::after,
#qrt-drop-zone[data-form-theme="lake_of_fire"]::before,
#qrt-drop-zone[data-form-theme="lake_of_fire"]::after {
    content: "";
    position: absolute;  /* scrolls with the page (anchored to .container / drop zone) */
    top: 0; bottom: 0;
    width: 38%;
    pointer-events: none;
    /* z-index 2 lifts the flames above the .block children (which sit in
       isolated stacking contexts at auto/0). Without this, in the builder
       the flame pseudos render in DOM order with the blocks and get
       hidden behind block backgrounds / depth overlays. The radial
       gradients fade to transparent toward the center, so block content
       only picks up a faint orange tint at the page edges. */
    z-index: 2;
    animation: qrt-lake-flicker 5s ease-in-out infinite;
}
.container[data-form-theme="lake_of_fire"]::before,
#qrt-drop-zone[data-form-theme="lake_of_fire"]::before {
    left: 0;
    background:
        radial-gradient(ellipse 70% 95% at 0% 60%, rgba(255,122,20,0.30) 0%, rgba(255,210,74,0.10) 25%, transparent 65%),
        radial-gradient(ellipse 50% 70% at 0% 30%, rgba(255,180,40,0.18) 0%, transparent 60%);
    /* Builder drop zone is non-fullscreen; pin to drop-zone bounds. */
}
.container[data-form-theme="lake_of_fire"]::after,
#qrt-drop-zone[data-form-theme="lake_of_fire"]::after {
    right: 0;
    background:
        radial-gradient(ellipse 70% 95% at 100% 60%, rgba(255,122,20,0.30) 0%, rgba(255,210,74,0.10) 25%, transparent 65%),
        radial-gradient(ellipse 50% 70% at 100% 30%, rgba(255,180,40,0.18) 0%, transparent 60%);
    animation-delay: -2.6s;  /* offset so left/right don't pulse in lockstep */
}
@keyframes qrt-lake-flicker {
    0%, 100% { opacity: 0.65; transform: scaleX(1);    }
    20%      { opacity: 0.95; transform: scaleX(1.04); }
    40%      { opacity: 0.55; transform: scaleX(0.98); }
    60%      { opacity: 1.00; transform: scaleX(1.06); }
    80%      { opacity: 0.78; transform: scaleX(1.02); }
}

/* Builder preview — drop zone is bounded, NOT viewport-fullscreen, so
   override the `position: fixed` from above to `position: absolute`
   anchored to the drop zone. Live page keeps `fixed`. */
#qrt-drop-zone[data-form-theme="lake_of_fire"] {
    position: relative;  /* anchor for the absolute pseudos below */
}
#qrt-drop-zone[data-form-theme="lake_of_fire"]::before,
#qrt-drop-zone[data-form-theme="lake_of_fire"]::after {
    position: absolute;
}

/* ── Builder-only: merge both side flames into ::before, repurpose ::after as embers ──
   Live page keeps two flame pseudos + body-level embers. The builder
   can't put pseudos on body without bleeding into the toolbar/sidebar,
   and both drop-zone pseudos are otherwise taken by the two flames.
   Solution: combine both edge gradients into a single full-width ::before,
   freeing ::after for box-shadow ember particles scoped to the drop zone. */
#qrt-drop-zone[data-form-theme="lake_of_fire"]::before {
    width: 100%;
    left: 0;
    background:
        radial-gradient(ellipse 27% 95% at 0%   60%, rgba(255,122,20,0.30) 0%, rgba(255,210,74,0.10) 25%, transparent 65%),
        radial-gradient(ellipse 19% 70% at 0%   30%, rgba(255,180,40,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 27% 95% at 100% 60%, rgba(255,122,20,0.30) 0%, rgba(255,210,74,0.10) 25%, transparent 65%),
        radial-gradient(ellipse 19% 70% at 100% 30%, rgba(255,180,40,0.18) 0%, transparent 60%);
}
#qrt-drop-zone[data-form-theme="lake_of_fire"]::after {
    /* repurpose ::after as ember particle source (box-shadow scatters
       12 ember dots across the bottom of the drop zone, animation rises
       them upward and overshoots so the loop seam is invisible) */
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ff7a14;
    filter: blur(0.4px);
    /* sit ABOVE blocks (inherits z-index: 2 from the group rule) so the
       embers float over the block bgs but the gradient is so localized
       it just looks like glowing dots passing through */
    box-shadow:
        6vw   -8vh  0 0      #ff7a14,
        14vw  -42vh 0 -0.5px #ffa040,
        22vw  -22vh 0 0      #ff7a14,
        31vw  -65vh 0 -0.5px #ffd24a,
        38vw  -12vh 0 0      #ff7a14,
        46vw  -85vh 0 -0.5px #ffa040,
        55vw  -32vh 0 0      #ff7a14,
        63vw  -55vh 0 -0.5px #ffd24a,
        71vw  -18vh 0 0      #ff7a14,
        79vw  -78vh 0 -0.5px #ffa040,
        87vw  -45vh 0 0      #ff7a14,
        94vw  -28vh 0 -0.5px #ffd24a;
    opacity: 0.85;
    animation: qrt-lake-embers-builder 14s linear infinite;
}
@keyframes qrt-lake-embers-builder {
    0%   { transform: translate3d(0,    0,     0); }
    100% { transform: translate3d(2vw,  -130vh, 0); }
}

/* ── Rising embers (LIVE PAGE ONLY) ── two layers of box-shadow particles,
   animated up with overshoot beyond the viewport so the loop seam never
   shows. Gated with :not(:has(#qrt-drop-zone)) so the builder page
   doesn't paint embers over the toolbar / sidebar / settings panel —
   the side flames (which are scoped to #qrt-drop-zone via the absolute-
   override above) carry the fire effect in the builder preview.

   z-index: -1 puts the pseudos below body's static children (i.e.
   below .container). The body bg paints first (#0a0303), then the
   embers paint OVER the body bg, then .container (transparent) paints
   on top — letting the embers show through behind container content. */
body:not(:has(#qrt-drop-zone)):has([data-form-theme="lake_of_fire"])::before,
body:not(:has(#qrt-drop-zone)):has([data-form-theme="lake_of_fire"])::after {
    content: "";
    position: fixed;
    bottom: -10vh;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(0.4px);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Slow large embers (orange-leaning) — 12 particles.
   Continuous-flow staggering: Y values are spread across the FULL
   travel cycle (0 → ~120vh below the host), so on any given frame
   some embers are below the viewport, some inside, some above. The
   animation moves the whole set up in lockstep, but because they
   start at different lifecycle positions it reads as a continuous
   stream rather than a bursting cohort.
   Geometry: host at bottom: -10vh → host_y = 110vh in viewport coords.
   Initial shadow_y = 110 + Y. Translate = -250vh, so final shadow_y
   = 110 + Y - 250. With Y ≤ 120 that's ≤ -20vh = above viewport top
   (hidden). With Y ≥ 0 that's ≥ 110vh = below viewport (hidden). At
   t=100%↔t=0% snap, no ember is in view → invisible loop seam. */
body:not(:has(#qrt-drop-zone)):has([data-form-theme="lake_of_fire"])::before {
    background: #ff7a14;
    /* Y values are evenly distributed across the travel cycle (this is
       what keeps the stream continuous), but X is SHUFFLED so embers
       don't rise in a diagonal march — each one enters the viewport
       at a random horizontal position. */
    box-shadow:
        71vw  2vh   0 0      #ff7a14,
        22vw  13vh  0 -0.5px #ffa040,
        87vw  24vh  0 0      #ff7a14,
        14vw  35vh  0 -0.5px #ffd24a,
        55vw  46vh  0 0      #ff7a14,
        94vw  57vh  0 -0.5px #ffa040,
        31vw  68vh  0 0      #ff7a14,
        63vw  79vh  0 -0.5px #ffd24a,
        6vw   90vh  0 0      #ff7a14,
        79vw  101vh 0 -0.5px #ffa040,
        46vw  112vh 0 0      #ff7a14,
        38vw  120vh 0 -0.5px #ffd24a;
    animation-name: qrt-lake-embers-slow;
    animation-duration: 18s;
    opacity: 0.85;
}
@keyframes qrt-lake-embers-slow {
    0%   { transform: translate3d(0,    0,     0); }
    100% { transform: translate3d(2vw, -250vh, 0); }  /* slight rightward drift */
}

/* Fast small embers (gold-leaning) — 14 particles, smaller, faster.
   Same continuous-flow staggering: Y values evenly spread 0–120vh
   so the 14 embers enter the viewport at evenly distributed times. */
body:not(:has(#qrt-drop-zone)):has([data-form-theme="lake_of_fire"])::after {
    width: 2px;
    height: 2px;
    background: #ffd24a;
    /* Same trick — X positions shuffled so the staggered entry times
       don't read as a diagonal line. */
    box-shadow:
        50vw  3vh   0 0 #ffd24a,
        18vw  12vh  0 0 #ff9a30,
        89vw  21vh  0 0 #ffd24a,
        26vw  30vh  0 0 #ff9a30,
        74vw  39vh  0 0 #ffd24a,
        4vw   48vh  0 0 #ff9a30,
        96vw  57vh  0 0 #ffd24a,
        34vw  66vh  0 0 #ff9a30,
        66vw  75vh  0 0 #ffd24a,
        11vw  84vh  0 0 #ff9a30,
        82vw  93vh  0 0 #ffd24a,
        99vw  102vh 0 0 #ff9a30,
        42vw  111vh 0 0 #ffd24a,
        58vw  119vh 0 0 #ff9a30;
    animation-name: qrt-lake-embers-fast;
    animation-duration: 13s;
    opacity: 0.65;
}
@keyframes qrt-lake-embers-fast {
    0%   { transform: translate3d(0,    0,     0); }
    100% { transform: translate3d(-3vw, -250vh, 0); }  /* slight leftward drift */
}

.qrt-tract-themed .qrt-credits-row {
    border-bottom-color: color-mix(in srgb, var(--tract-paragraph-color, currentColor) 15%, transparent);
}

/* ────────────────────────────────────────────────────────────────
 * Phase 15 — Custom Card Design overlay (live + preview surfaces)
 *
 * Same rules as builder's qrt-builder.css but applied to public render
 * sites: live tract hero (qrt_render_element), navbar dropdown messages
 * menu (qrt_dropdown_render_mini_card), random_cards shortcode, dashboard
 * tract preview (qrt_dash_render_tract_front_card_html).
 *
 * The .qrt-hero-custom-face div is inline-styled at render time (so it
 * works even when this stylesheet is bypassed), but these rules harden
 * the hide-everything-else behavior across all surfaces.
 * ──────────────────────────────────────────────────────────────── */
.qrt-tract-card-front.qrt-has-custom-design,
.qrt-tract-card-back.qrt-has-custom-design { position: relative; }
.qrt-tract-card-front.qrt-has-custom-design > :not(.qrt-hero-custom-face),
.qrt-tract-card-back.qrt-has-custom-design  > :not(.qrt-hero-custom-face) {
    visibility: hidden;
}