/* ============================================================
   Demo mockups — extracted scoped CSS for all 9 mockups.
   Was previously inline <style> inside each .html fragment, but
   iOS Safari did not reliably apply <style> tags injected via
   innerHTML — leaving the preview frame empty on mobile.
   ============================================================ */

/* === bakery-minimal.html === */
.mock-bakery-minimal {
      height: 360px;
      background: linear-gradient(180deg, #faf7f0 0%, #f3ecdf 100%);
      color: #2a2620;
      padding: 40px 48px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 32px;
      align-items: center;
      font-family: var(--font-serif, Georgia, serif);
    }
    .mock-bakery-minimal .mast {
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.24em;
      color: rgba(42, 38, 32, 0.5);
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .mock-bakery-minimal h2 {
      font-size: 38px;
      font-weight: 400;
      line-height: 1.12;
      margin: 0 0 16px;
      letter-spacing: -0.01em;
    }
    .mock-bakery-minimal h2 em {
      font-style: italic;
      color: #8a6f3a;
    }
    .mock-bakery-minimal .deck {
      font-family: var(--font-sans);
      font-size: 13px;
      color: rgba(42, 38, 32, 0.7);
      line-height: 1.6;
      margin: 0 0 22px;
      max-width: 32ch;
    }
    .mock-bakery-minimal .cta {
      display: inline-block;
      padding: 10px 22px;
      border: 1px solid rgba(42, 38, 32, 0.85);
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: #2a2620;
      text-transform: uppercase;
    }
    .mock-bakery-minimal .art {
      align-self: stretch;
      background:
        radial-gradient(circle at 30% 40%, rgba(218, 173, 109, 0.4), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(196, 142, 71, 0.5), transparent 70%),
        linear-gradient(135deg, #e8d4b0, #d8b87e);
      border-radius: 6px;
      position: relative;
    }
    .mock-bakery-minimal .art::after {
      content: '⊛';
      position: absolute;
      bottom: 12px;
      right: 14px;
      font-size: 22px;
      color: rgba(255, 255, 255, 0.55);
    }

/* === bakery-premium.html === */
.mock-bakery-premium {
      height: 360px;
      background: linear-gradient(135deg, #0e0c0a 0%, #1d1814 100%);
      color: #f5e8c8;
      padding: 40px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      text-align: center;
      font-family: var(--font-serif, Georgia, serif);
      position: relative;
      overflow: hidden;
    }
    .mock-bakery-premium::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 30%, rgba(245, 217, 123, 0.06), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(201, 168, 90, 0.07), transparent 55%);
      pointer-events: none;
    }
    .mock-bakery-premium > * { position: relative; z-index: 1; }
    .mock-bakery-premium .mast {
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.24em;
      color: rgba(245, 217, 123, 0.72);
      text-transform: uppercase;
    }
    .mock-bakery-premium .ornament {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: rgba(245, 217, 123, 0.55);
    }
    .mock-bakery-premium .ornament .hr {
      width: 48px;
      height: 1px;
      background: currentColor;
    }
    .mock-bakery-premium h2 {
      font-size: 40px;
      font-weight: 400;
      line-height: 1.08;
      margin: 0;
      font-style: italic;
      background: linear-gradient(135deg, #f5d97b 30%, #c9a85a 80%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .mock-bakery-premium .deck {
      font-family: var(--font-sans);
      font-size: 14px;
      color: rgba(245, 232, 200, 0.65);
      letter-spacing: 0.02em;
      max-width: 44ch;
      margin: 0 auto;
    }
    .mock-bakery-premium .cta {
      align-self: center;
      margin-top: 4px;
      padding: 10px 26px;
      border: 1px solid rgba(245, 217, 123, 0.55);
      border-radius: 100px;
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: rgba(245, 217, 123, 0.95);
      text-transform: uppercase;
    }

/* === bakery-vibrant.html === */
.mock-bakery-vibrant {
      height: 360px;
      background: linear-gradient(135deg, #f7945a 0%, #e0673f 50%, #b94a85 100%);
      color: #fff8ee;
      padding: 40px 48px;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 28px;
      align-items: center;
      font-family: var(--font-serif, Georgia, serif);
      position: relative;
      overflow: hidden;
    }
    .mock-bakery-vibrant::after {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 232, 178, 0.45), transparent 70%);
      pointer-events: none;
    }
    .mock-bakery-vibrant > * { position: relative; z-index: 1; }
    .mock-bakery-vibrant .mast {
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255, 248, 238, 0.85);
      margin-bottom: 14px;
    }
    .mock-bakery-vibrant h2 {
      font-size: 40px;
      font-weight: 500;
      line-height: 1.05;
      margin: 0 0 14px;
      letter-spacing: -0.01em;
      text-shadow: 0 2px 18px rgba(80, 30, 10, 0.2);
    }
    .mock-bakery-vibrant h2 em {
      font-style: italic;
      color: #ffe8b2;
    }
    .mock-bakery-vibrant .deck {
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255, 248, 238, 0.92);
      margin: 0 0 18px;
      max-width: 30ch;
    }
    .mock-bakery-vibrant .cta {
      display: inline-block;
      padding: 12px 24px;
      background: #fff8ee;
      color: #b94a85;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      border-radius: 100px;
      text-transform: uppercase;
      box-shadow: 0 6px 18px rgba(80, 30, 10, 0.18);
    }
    .mock-bakery-vibrant .art {
      align-self: stretch;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 232, 178, 0.55), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 10px, transparent 10px 22px);
      border-radius: 50%;
      aspect-ratio: 1;
      align-self: center;
      width: 220px;
      justify-self: center;
      position: relative;
      display: grid;
      place-items: center;
      font-size: 56px;
      color: rgba(255, 248, 238, 0.85);
    }

/* === coach-minimal.html === */
.mock-coach-minimal {
      height: 360px;
      background: linear-gradient(180deg, #fbf8f3 0%, #f1e9dc 100%);
      color: #2d271f;
      padding: 44px 52px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 32px;
      align-items: center;
      font-family: var(--font-serif, Georgia, serif);
    }
    .mock-coach-minimal .mast {
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.24em;
      color: rgba(45, 39, 31, 0.55);
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .mock-coach-minimal h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 1.1;
      margin: 0 0 14px;
      letter-spacing: -0.005em;
    }
    .mock-coach-minimal h2 em {
      font-style: italic;
      color: #a86a3e;
    }
    .mock-coach-minimal .deck {
      font-family: var(--font-sans);
      font-size: 13px;
      color: rgba(45, 39, 31, 0.7);
      line-height: 1.65;
      margin: 0 0 22px;
      max-width: 34ch;
    }
    .mock-coach-minimal .cta {
      display: inline-block;
      padding: 11px 24px;
      border: 1px solid #2d271f;
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.16em;
      color: #2d271f;
      text-transform: uppercase;
    }
    .mock-coach-minimal .portrait {
      align-self: stretch;
      background:
        radial-gradient(circle at 50% 35%, rgba(168, 106, 62, 0.4) 0%, rgba(168, 106, 62, 0.2) 35%, transparent 60%),
        linear-gradient(180deg, #e8d4b5, #c79e6e);
      border-radius: 4px;
      position: relative;
    }
    .mock-coach-minimal .portrait::after {
      content: '';
      position: absolute;
      inset: 60% 30% 6% 30%;
      background: linear-gradient(180deg, rgba(91, 56, 33, 0.6), rgba(91, 56, 33, 0.85));
      border-radius: 4px 4px 60% 60% / 4px 4px 30% 30%;
    }
    .mock-coach-minimal .portrait::before {
      content: '';
      position: absolute;
      inset: 22% 35% 50% 35%;
      background: radial-gradient(circle, rgba(91, 56, 33, 0.7), rgba(91, 56, 33, 0.4));
      border-radius: 50%;
    }

/* === coach-premium.html === */
.mock-coach-premium {
      height: 360px;
      background: #0d0d10;
      color: #f0eee8;
      padding: 40px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 18px;
      font-family: var(--font-sans);
      position: relative;
      overflow: hidden;
    }
    .mock-coach-premium::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 540px;
      height: 540px;
      background: radial-gradient(circle, rgba(247, 211, 110, 0.07), transparent 60%);
      pointer-events: none;
    }
    .mock-coach-premium > * { position: relative; z-index: 1; }
    .mock-coach-premium .num {
      font-family: var(--font-serif, Georgia, serif);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: rgba(247, 211, 110, 0.7);
      text-transform: uppercase;
    }
    .mock-coach-premium h2 {
      font-family: var(--font-sans);
      font-size: 52px;
      font-weight: 800;
      line-height: 0.98;
      margin: 0;
      letter-spacing: -0.025em;
      color: #f0eee8;
      text-transform: uppercase;
    }
    .mock-coach-premium h2 em {
      font-style: normal;
      color: #f7d36e;
    }
    .mock-coach-premium .deck {
      font-family: var(--font-serif, Georgia, serif);
      font-size: 15px;
      font-style: italic;
      color: rgba(240, 238, 232, 0.7);
      line-height: 1.45;
      margin: 0;
      max-width: 50ch;
    }
    .mock-coach-premium .cta {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 22px;
      background: #f7d36e;
      color: #0d0d10;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .mock-coach-premium .cta::after {
      content: '→';
      font-size: 14px;
    }

/* === coach-vibrant.html === */
.mock-coach-vibrant {
      height: 360px;
      background:
        radial-gradient(circle at 80% 20%, rgba(247, 178, 88, 0.95), transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(160, 88, 197, 0.7), transparent 60%),
        linear-gradient(135deg, #f76b66 0%, #6e51c4 100%);
      color: #fff8f1;
      padding: 40px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      font-family: var(--font-sans);
      position: relative;
      overflow: hidden;
    }
    .mock-coach-vibrant::after {
      content: '';
      position: absolute;
      bottom: -20%;
      left: -10%;
      width: 80%;
      height: 100%;
      background: radial-gradient(ellipse, rgba(255, 248, 241, 0.12), transparent 70%);
      pointer-events: none;
    }
    .mock-coach-vibrant > * { position: relative; z-index: 1; }
    .mock-coach-vibrant .mast {
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255, 248, 241, 0.92);
      margin-bottom: 4px;
    }
    .mock-coach-vibrant h2 {
      font-family: var(--font-serif, Georgia, serif);
      font-size: 44px;
      font-weight: 500;
      line-height: 1.02;
      margin: 0 0 8px;
      letter-spacing: -0.012em;
      color: #fff8f1;
      text-shadow: 0 2px 22px rgba(40, 20, 70, 0.32);
    }
    .mock-coach-vibrant h2 em {
      font-style: italic;
      color: #fde2a8;
    }
    .mock-coach-vibrant .deck {
      font-size: 13px;
      color: rgba(255, 248, 241, 0.92);
      line-height: 1.55;
      margin: 0 0 18px;
      max-width: 38ch;
    }
    .mock-coach-vibrant .cta {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 26px;
      background: #fff8f1;
      color: #6e51c4;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-radius: 100px;
      box-shadow: 0 10px 28px rgba(40, 20, 70, 0.32);
    }
    .mock-coach-vibrant .cta-glyph {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #6e51c4;
      color: #fff8f1;
      display: grid;
      place-items: center;
      font-size: 13px;
    }

/* === law-minimal.html === */
.mock-law-minimal, .mock-boutique-minimal, .mock-realestate-minimal, .mock-other-minimal {
      height: 360px;
      background: #fafaf7;
      color: #11131c;
      padding: 44px 52px;
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 32px;
      align-items: center;
      font-family: var(--font-serif, Georgia, serif);
    }
    .mock-law-minimal .mast-row, .mock-boutique-minimal .mast-row, .mock-realestate-minimal .mast-row, .mock-other-minimal .mast-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(17, 19, 28, 0.5);
      margin-bottom: 16px;
    }
    .mock-law-minimal .mast-row .hr, .mock-boutique-minimal .mast-row .hr, .mock-realestate-minimal .mast-row .hr, .mock-other-minimal .mast-row .hr {
      flex: 1;
      height: 1px;
      background: rgba(17, 19, 28, 0.18);
    }
    .mock-law-minimal h2, .mock-boutique-minimal h2, .mock-realestate-minimal h2, .mock-other-minimal h2 {
      font-size: 34px;
      font-weight: 400;
      line-height: 1.15;
      margin: 0 0 14px;
      color: #11131c;
      letter-spacing: -0.005em;
    }
    .mock-law-minimal h2 em, .mock-boutique-minimal h2 em, .mock-realestate-minimal h2 em, .mock-other-minimal h2 em {
      font-style: italic;
      color: #2c5582;
    }
    .mock-law-minimal .deck, .mock-boutique-minimal .deck, .mock-realestate-minimal .deck, .mock-other-minimal .deck {
      font-family: var(--font-sans);
      font-size: 13px;
      color: rgba(17, 19, 28, 0.62);
      line-height: 1.65;
      margin: 0 0 22px;
      max-width: 36ch;
    }
    .mock-law-minimal .cta, .mock-boutique-minimal .cta, .mock-realestate-minimal .cta, .mock-other-minimal .cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      background: #11131c;
      color: #fafaf7;
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .mock-law-minimal .quote-block, .mock-boutique-minimal .quote-block, .mock-realestate-minimal .quote-block, .mock-other-minimal .quote-block {
      align-self: stretch;
      border-right: 2px solid rgba(44, 85, 130, 0.3);
      padding: 18px 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }
    .mock-law-minimal .quote-text, .mock-boutique-minimal .quote-text, .mock-realestate-minimal .quote-text, .mock-other-minimal .quote-text {
      font-family: var(--font-serif, Georgia, serif);
      font-style: italic;
      font-size: 16px;
      line-height: 1.4;
      color: rgba(17, 19, 28, 0.85);
    }
    .mock-law-minimal .quote-by, .mock-boutique-minimal .quote-by, .mock-realestate-minimal .quote-by, .mock-other-minimal .quote-by {
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(17, 19, 28, 0.5);
    }

/* === law-premium.html === */
.mock-law-premium, .mock-boutique-premium, .mock-realestate-premium, .mock-other-premium {
      height: 360px;
      background: #0a0a0d;
      color: #e6dfd1;
      padding: 44px 56px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-family: var(--font-serif, Georgia, serif);
      position: relative;
      overflow: hidden;
    }
    .mock-law-premium::before, .mock-boutique-premium::before, .mock-realestate-premium::before, .mock-other-premium::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(196, 162, 95, 0.6), transparent);
    }
    .mock-law-premium::after, .mock-boutique-premium::after, .mock-realestate-premium::after, .mock-other-premium::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(196, 162, 95, 0.3), transparent);
    }
    .mock-law-premium .top-row, .mock-boutique-premium .top-row, .mock-realestate-premium .top-row, .mock-other-premium .top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(196, 162, 95, 0.75);
    }
    .mock-law-premium .center, .mock-boutique-premium .center, .mock-realestate-premium .center, .mock-other-premium .center {
      text-align: center;
    }
    .mock-law-premium h2, .mock-boutique-premium h2, .mock-realestate-premium h2, .mock-other-premium h2 {
      font-size: 42px;
      font-weight: 300;
      line-height: 1.1;
      margin: 0 0 12px;
      letter-spacing: -0.005em;
      color: #f4eddb;
    }
    .mock-law-premium h2 em, .mock-boutique-premium h2 em, .mock-realestate-premium h2 em, .mock-other-premium h2 em {
      font-style: italic;
      color: #c4a25f;
    }
    .mock-law-premium .deck, .mock-boutique-premium .deck, .mock-realestate-premium .deck, .mock-other-premium .deck {
      font-family: var(--font-sans);
      font-size: 13px;
      color: rgba(230, 223, 209, 0.55);
      letter-spacing: 0.04em;
      max-width: 44ch;
      margin: 0 auto;
      line-height: 1.5;
    }
    .mock-law-premium .bottom-row, .mock-boutique-premium .bottom-row, .mock-realestate-premium .bottom-row, .mock-other-premium .bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mock-law-premium .signature, .mock-boutique-premium .signature, .mock-realestate-premium .signature, .mock-other-premium .signature {
      font-family: var(--font-serif, Georgia, serif);
      font-style: italic;
      font-size: 13px;
      color: rgba(196, 162, 95, 0.8);
    }
    .mock-law-premium .cta, .mock-boutique-premium .cta, .mock-realestate-premium .cta, .mock-other-premium .cta {
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #c4a25f;
      border-bottom: 1px solid rgba(196, 162, 95, 0.5);
      padding-bottom: 4px;
    }

/* === boutique-vibrant.html === */
.mock-boutique-vibrant, .mock-law-vibrant, .mock-realestate-vibrant, .mock-other-vibrant {
      height: 360px;
      background: linear-gradient(120deg, #f4ddc4 0%, #d28a5c 55%, #2a4d3a 100%);
      color: #fff8ee;
      padding: 40px 48px;
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 28px;
      align-items: center;
      font-family: var(--font-serif, Georgia, serif);
      position: relative;
      overflow: hidden;
    }
    .mock-boutique-vibrant > *, .mock-law-vibrant > *, .mock-realestate-vibrant > *, .mock-other-vibrant > * { position: relative; z-index: 1; }
    .mock-boutique-vibrant .mast, .mock-law-vibrant .mast, .mock-realestate-vibrant .mast, .mock-other-vibrant .mast {
      display: inline-block;
      padding: 6px 14px;
      background: rgba(255, 248, 238, 0.18);
      border: 1px solid rgba(255, 248, 238, 0.32);
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .mock-boutique-vibrant h2, .mock-law-vibrant h2, .mock-realestate-vibrant h2, .mock-other-vibrant h2 {
      font-size: 38px;
      font-weight: 500;
      line-height: 1.08;
      margin: 0 0 14px;
      letter-spacing: -0.005em;
      text-shadow: 0 2px 14px rgba(40, 60, 50, 0.25);
    }
    .mock-boutique-vibrant h2 em, .mock-law-vibrant h2 em, .mock-realestate-vibrant h2 em, .mock-other-vibrant h2 em {
      font-style: italic;
      color: #fff1d4;
    }
    .mock-boutique-vibrant .deck, .mock-law-vibrant .deck, .mock-realestate-vibrant .deck, .mock-other-vibrant .deck {
      font-family: var(--font-sans);
      font-size: 13px;
      color: rgba(255, 248, 238, 0.92);
      line-height: 1.5;
      margin: 0 0 20px;
      max-width: 34ch;
    }
    .mock-boutique-vibrant .cta-row, .mock-law-vibrant .cta-row, .mock-realestate-vibrant .cta-row, .mock-other-vibrant .cta-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .mock-boutique-vibrant .cta, .mock-law-vibrant .cta, .mock-realestate-vibrant .cta, .mock-other-vibrant .cta {
      display: inline-block;
      padding: 12px 24px;
      background: #fff8ee;
      color: #2a4d3a;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      border-radius: 4px;
    }
    .mock-boutique-vibrant .cta-secondary, .mock-law-vibrant .cta-secondary, .mock-realestate-vibrant .cta-secondary, .mock-other-vibrant .cta-secondary {
      font-family: var(--font-sans);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255, 248, 238, 0.85);
      border-bottom: 1px solid rgba(255, 248, 238, 0.4);
    }
    .mock-boutique-vibrant .badge, .mock-law-vibrant .badge, .mock-realestate-vibrant .badge, .mock-other-vibrant .badge {
      align-self: center;
      justify-self: end;
      width: 168px;
      aspect-ratio: 1;
      border-radius: 6px;
      background:
        linear-gradient(135deg, rgba(255, 248, 238, 0.15), rgba(255, 248, 238, 0.03)),
        rgba(255, 248, 238, 0.05);
      border: 1px solid rgba(255, 248, 238, 0.25);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 18px;
      font-family: var(--font-serif, Georgia, serif);
      font-style: italic;
    }
    .mock-boutique-vibrant .badge-num, .mock-law-vibrant .badge-num, .mock-realestate-vibrant .badge-num, .mock-other-vibrant .badge-num {
      font-size: 44px;
      line-height: 1;
      color: #fff1d4;
    }
    .mock-boutique-vibrant .badge-label, .mock-law-vibrant .badge-label, .mock-realestate-vibrant .badge-label, .mock-other-vibrant .badge-label {
      font-family: var(--font-sans);
      font-style: normal;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 248, 238, 0.85);
      margin-top: 8px;
    }




/* ============================================================
   Per-biz accent overrides — each business gets its own color
   personality on top of the shared style base.
   ============================================================ */

/* === MINIMAL: accent color on h2 em === */
.mock-boutique-minimal h2 em { color: #a86b4a; }
.mock-boutique-minimal .quote-block { border-right-color: rgba(168, 107, 74, 0.32); }
.mock-boutique-minimal .cta { background: #a86b4a; }

.mock-realestate-minimal h2 em { color: #1f3a5f; }
.mock-realestate-minimal .quote-block { border-right-color: rgba(31, 58, 95, 0.32); }
.mock-realestate-minimal .cta { background: #1f3a5f; }

.mock-other-minimal h2 em { color: #2a6b5a; }
.mock-other-minimal .quote-block { border-right-color: rgba(42, 107, 90, 0.32); }
.mock-other-minimal .cta { background: #2a6b5a; }

/* === PREMIUM: accent on h2 em, top/bottom rule colors === */
.mock-boutique-premium {
  background: #120e10;
  color: #e9d9c7;
}
.mock-boutique-premium h2 { color: #f3e2c8; }
.mock-boutique-premium h2 em { color: #d4a373; }
.mock-boutique-premium::before { background: linear-gradient(to right, transparent, rgba(212, 163, 115, 0.6), transparent); }
.mock-boutique-premium::after { background: linear-gradient(to right, transparent, rgba(212, 163, 115, 0.3), transparent); }
.mock-boutique-premium .top-row { color: rgba(212, 163, 115, 0.78); }
.mock-boutique-premium .signature { color: rgba(212, 163, 115, 0.82); }
.mock-boutique-premium .cta { color: #d4a373; border-bottom-color: rgba(212, 163, 115, 0.5); }

.mock-realestate-premium {
  background: #0a0e16;
  color: #d8dde8;
}
.mock-realestate-premium h2 { color: #eef2fa; }
.mock-realestate-premium h2 em { color: #8aa6cf; }
.mock-realestate-premium::before { background: linear-gradient(to right, transparent, rgba(138, 166, 207, 0.55), transparent); }
.mock-realestate-premium::after { background: linear-gradient(to right, transparent, rgba(138, 166, 207, 0.28), transparent); }
.mock-realestate-premium .top-row { color: rgba(138, 166, 207, 0.75); }
.mock-realestate-premium .signature { color: rgba(138, 166, 207, 0.8); }
.mock-realestate-premium .cta { color: #8aa6cf; border-bottom-color: rgba(138, 166, 207, 0.5); }

.mock-other-premium {
  background: #0c1110;
  color: #dee5e0;
}
.mock-other-premium h2 { color: #eef5ef; }
.mock-other-premium h2 em { color: #7cb09a; }
.mock-other-premium::before { background: linear-gradient(to right, transparent, rgba(124, 176, 154, 0.55), transparent); }
.mock-other-premium::after { background: linear-gradient(to right, transparent, rgba(124, 176, 154, 0.28), transparent); }
.mock-other-premium .top-row { color: rgba(124, 176, 154, 0.75); }
.mock-other-premium .signature { color: rgba(124, 176, 154, 0.82); }
.mock-other-premium .cta { color: #7cb09a; border-bottom-color: rgba(124, 176, 154, 0.5); }

/* === VIBRANT: different gradient per biz === */
.mock-law-vibrant {
  background: linear-gradient(120deg, #d4dbe8 0%, #5e7191 55%, #1a2740 100%);
  color: #f4f6fb;
}
.mock-law-vibrant h2 em { color: #ffeec2; }
.mock-law-vibrant .cta { background: #f4f6fb; color: #1a2740; }
.mock-law-vibrant .badge-num { color: #ffeec2; }

.mock-realestate-vibrant {
  background: linear-gradient(120deg, #f4e2c4 0%, #c98a5a 50%, #3d2918 100%);
  color: #fff5e6;
}
.mock-realestate-vibrant h2 em { color: #ffe8c2; }
.mock-realestate-vibrant .cta { background: #fff5e6; color: #3d2918; }
.mock-realestate-vibrant .badge-num { color: #ffe8c2; }

.mock-other-vibrant {
  background: linear-gradient(120deg, #e2dcf2 0%, #8b6fb8 50%, #2a1f4a 100%);
  color: #f7f3ff;
}
.mock-other-vibrant h2 em { color: #f0e1ff; }
.mock-other-vibrant .cta { background: #f7f3ff; color: #2a1f4a; }
.mock-other-vibrant .badge-num { color: #f0e1ff; font-family: var(--font-serif, Georgia, serif); }