/* Merged section styles (auto-extracted from mockups, mockup-chrome rules removed) */


/* ══════════════ mockups/01-hero.html ══════════════ */


    /* Mockup viewport chrome — 1440-first */

    /* Entry animations — keyframes only, no JS state needed for initial paint */
    @keyframes beat-in {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes seventeen-pop {
      0%   { opacity: 0; transform: scale(1.15); }
      60%  { opacity: 1; transform: scale(1.02); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes card-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bar-shrink {
      from { width: 100%; }
      to   { width: 14.17%; } /* 17/120 */
    }
    @keyframes streak-breathe {
      0%, 100% { opacity: 0.7; }
      50%      { opacity: 1; }
    }

    .beat { opacity: 0; animation: beat-in 600ms var(--ease-out) forwards; }
    .beat-1 { animation-delay: 200ms; }
    .beat-2 { animation-delay: 300ms; }
    .beat-3 { animation-delay: 400ms; }
    .beat-4 { animation-delay: 500ms; }
    .beat-5 { animation-delay: 650ms; }
    .pop-17 { display: inline-block; opacity: 0; animation: seventeen-pop 700ms var(--ease-out) 1100ms forwards; }
    .metric-card { opacity: 0; animation: card-in 700ms var(--ease-out) 150ms forwards; }
    .bar-fill { width: 100%; animation: bar-shrink 2000ms cubic-bezier(0.33,1,0.68,1) 1200ms forwards; }

    @media (prefers-reduced-motion: reduce) {
      .beat, .pop-17, .metric-card { opacity: 1 !important; animation: none !important; transform: none !important; }
      .bar-fill { animation: none !important; width: 14.17% !important; }
    }
  

/* ══════════════ mockups/09-problem-mirror.html ══════════════ */


    /* Mockup chrome */

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* Pulsing arrow */
    @keyframes arrowPulse {
      0%, 100% { transform: translateY(0); opacity: 1; }
      50%      { transform: translateY(6px); opacity: 0.55; }
    }
    .arrow-pulse { animation: arrowPulse 1.6s var(--ease-out) infinite; display: inline-block; }

    /* Faint red grain */
    .grain::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 600px 200px at 20% 10%, rgba(239,68,68,0.06), transparent 60%),
        radial-gradient(ellipse 400px 300px at 90% 80%, rgba(239,68,68,0.04), transparent 60%);
    }

    @media (max-width: 760px) {
      .section-h2 { font-size: 36px !important; }
      .item-row { font-size: 16px !important; gap: 14px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      .arrow-pulse { animation: none !important; }
    }
  

/* ══════════════ mockups/10-doctrine.html ══════════════ */


    /* Mockup chrome */

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* Ghost number: reveal with scale-down (from slightly larger → to 1) */
    .ghost-num {
      position: absolute;
      top: -36px;
      left: -8px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 148px;
      line-height: 0.9;
      letter-spacing: -0.06em;
      color: rgba(0,71,255,0.20);
      opacity: 0;
      transform: scale(1.08);
      transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
      pointer-events: none;
      user-select: none;
      font-variant-numeric: tabular-nums;
    }
    .ghost-num.in { opacity: 1; transform: scale(1); }

    /* Pillar vertical divider (left side, hidden on first) */
    @media (min-width: 900px) {
      .pillar { border-left: 1px solid #27272a; padding-left: 44px; }
      .pillar.first { border-left: none; padding-left: 0; }
    }

    @media (max-width: 899px) {
      .doctrine-grid { grid-template-columns: 1fr !important; gap: 72px !important; }
      .section-h2 { font-size: 36px !important; }
      .ghost-num { font-size: 96px !important; top: -24px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .ghost-num { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
  

/* ══════════════ mockups/04-case-study.html ══════════════ */


    /* Reveal utility: fade + lift on scroll-into-view */
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
  

/* ══════════════ mockups/05-service-tiers.html ══════════════ */


    /* Mockup viewport chrome */

    /* Reveal: matches case study */
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* Card hover — color/border only, never transform */
    .svc-card { transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
    .svc-card:hover { border-color: #3a3a42; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,71,255,0.10); }

    /* Online pulse dot — Tier 2 badge accent */
    @keyframes pulse-online {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55), 0 0 8px rgba(34,197,94,0.7); }
      50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0),    0 0 8px rgba(34,197,94,0.7); }
    }
    .pulse-dot { animation: pulse-online 1800ms ease-in-out infinite; }

    /* Sub-card hover (Tier 2 agents) */
    .agent-card { transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); }
    .agent-card:hover { border-color: rgba(0,71,255,0.35); background: #131318; }

    @media (max-width: 768px) {
      .agent-grid { grid-template-columns: 1fr !important; }
      .tier-card { padding: 32px 24px !important; }
      .section-h2 { font-size: 32px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      .pulse-dot { animation: none !important; }
    }
  

/* ══════════════ mockups/06-itx-case-tier3.html ══════════════ */


    /* Mockup chrome — identical to hero / SILA / tiers */

    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    .svc-card { transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
    .svc-card:hover { border-color: #3a3a42; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,71,255,0.10); }

    .pillar-card { transition: border-color 260ms var(--ease-out), background 260ms var(--ease-out); }
    .pillar-card:hover { border-color: #3a3a42; background: #1a1a1f; }

    .image-frame {
      position: relative;
      background: #18181b;
      border: 1px solid #27272a;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 18px 48px -16px rgba(0,0,0,0.55);
    }
    /* amber hairline: single-pixel provenance marker (ITX brand) — not a styling accent */
    .image-frame::before {
      content: '';
      position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(254,190,36,0.55), transparent);
      pointer-events: none;
    }

    .cta-link {
      display: inline-flex; align-items: center; gap: 8px;
      color: #0047ff; font-family: var(--font-display); font-weight: 600; font-size: 15px;
      cursor: pointer; position: relative; padding: 6px 0;
      transition: color 160ms var(--ease-out);
    }
    .cta-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
      background: currentColor; transform: scaleX(0); transform-origin: left;
      transition: transform 240ms var(--ease-out);
    }
    .cta-link:hover { color: #5b7adc; }
    .cta-link:hover::after { transform: scaleX(1); }

    @media (max-width: 960px) {
      .pillar-grid { grid-template-columns: 1fr !important; }
      .metric-row { grid-template-columns: 1fr !important; }
      .section-h2 { font-size: 32px !important; }
      .tier-card { padding: 32px 24px !important; }
      .inclusions-grid { grid-template-columns: 1fr !important; }
      .image-frame { border-radius: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
  

/* ══════════════ mockups/07-salotime-tier4.html ══════════════ */


    /* Mockup chrome — consistent with other sections */

    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    .svc-card { transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
    .svc-card:hover { border-color: #3a3a42; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,71,255,0.10); }

    /* Phone frame — contains colorful screenshots against dark page */
    .phone {
      position: relative;
      width: 260px;
      aspect-ratio: 9 / 19.5;
      background: #0a0a0c;
      border: 1px solid #27272a;
      border-radius: 38px;
      padding: 10px;
      box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03);
    }
    .phone::before {
      content: '';
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      width: 92px; height: 24px; background: #050507; border-radius: 9999px;
      z-index: 2;
    }
    .phone-screen {
      width: 100%; height: 100%;
      border-radius: 28px;
      overflow: hidden;
      background: #18181b;
    }
    .phone-screen img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .metric-pop { opacity: 0; transform: scale(0.96) translateY(10px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
    .metric-pop.in { opacity: 1; transform: scale(1) translateY(0); }

    .cta-link {
      display: inline-flex; align-items: center; gap: 8px;
      color: #0047ff; font-family: var(--font-display); font-weight: 600; font-size: 15px;
      cursor: pointer; position: relative; padding: 6px 0;
      transition: color 160ms var(--ease-out);
    }
    .cta-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
      background: currentColor; transform: scaleX(0); transform-origin: left;
      transition: transform 240ms var(--ease-out);
    }
    .cta-link:hover { color: #5b7adc; }
    .cta-link:hover::after { transform: scaleX(1); }

    @media (max-width: 960px) {
      .ba-grid { grid-template-columns: 1fr !important; }
      .ba-grid .arrow-col { display: none !important; }
      .proof-row { flex-direction: column !important; align-items: center !important; }
      .build-grid { grid-template-columns: 1fr !important; }
      .metric-row { grid-template-columns: 1fr !important; }
      .section-h2 { font-size: 32px !important; }
      .tier-card { padding: 32px 24px !important; }
      .inclusions-grid { grid-template-columns: 1fr !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .metric-pop { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
  

/* ══════════════ mockups/08-tiers-5-6-7.html ══════════════ */


    /* Mockup chrome */

    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: translateY(0); }

    .mini-card {
      transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
    }
    .mini-card:hover {
      border-color: rgba(0,71,255,0.30) !important;
      transform: translateY(-4px);
      box-shadow: 0 28px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,71,255,0.08);
    }

    .ghost-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      height: 48px; padding: 0 20px; font-size: 14px;
      font-family: var(--font-display); font-weight: 600;
      border-radius: 10px;
      background: transparent;
      border: 1.5px solid #0047ff;
      color: #fff;
      text-decoration: none;
      letter-spacing: -0.005em;
      transition: all 180ms var(--ease-out);
    }
    [data-theme="light"] .ghost-cta {
      color: #0047ff;
    }
    .ghost-cta:hover {
      background: #0047ff;
      border-color: #0047ff;
      color: #fff !important;
      box-shadow: 0 0 20px rgba(0,71,255,0.35);
    }

    /* Filled variant (toggle via Tweaks) */
    .ghost-cta.filled {
      background: var(--tw-primary, #0047ff);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 0 24px var(--tw-primary-45, rgba(0,71,255,0.45));
    }
    .ghost-cta.filled:hover {
      background: var(--tw-primary, #0047ff);
      filter: brightness(0.9);
      box-shadow: 0 0 40px var(--tw-primary-65, rgba(0,71,255,0.65));
    }

    /* ── Tier 5/6/7 text-link CTA ── */
    @keyframes pulseGlow {
      0%, 100% { text-shadow: 0 0 8px rgba(0,71,255,0.4), 0 0 16px rgba(0,71,255,0.2); }
      50%       { text-shadow: 0 0 16px rgba(0,71,255,0.8), 0 0 32px rgba(0,71,255,0.5), 0 0 48px rgba(0,71,255,0.3); }
    }
    @keyframes pulseGlowIcon {
      0%, 100% { filter: drop-shadow(0 0 4px rgba(0,71,255,0.35)); }
      50%       { filter: drop-shadow(0 0 8px rgba(0,71,255,0.75)) drop-shadow(0 0 16px rgba(0,71,255,0.4)); }
    }
    .card-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 16px 0;
      background: transparent; border: none;
      color: #0047ff;
      font-family: var(--font-display); font-weight: 600;
      font-size: 18px; letter-spacing: 0.02em;
      text-decoration: none;
      animation: pulseGlow 2.2s ease-in-out infinite;
      transition: transform 180ms var(--ease-out), filter 180ms var(--ease-out);
    }
    .card-cta svg {
      animation: pulseGlowIcon 2.2s ease-in-out infinite;
    }
    .card-cta:hover {
      animation-play-state: paused;
      transform: translateY(-1px);
      filter: brightness(1.2);
    }
    .card-cta:hover svg {
      animation-play-state: paused;
    }

    /* Tweaks panel ────────────────── */
    .tw-panel {
      position: fixed; right: 20px; bottom: 20px; z-index: 9999;
      width: 280px;
      background: rgba(20,20,24,0.96);
      backdrop-filter: blur(12px);
      border: 1px solid #27272a; border-radius: 14px;
      padding: 18px;
      font-family: var(--font-display);
      color: #e4e4e7;
      box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7);
      display: none;
    }
    .tw-panel.on { display: block; }
    .tw-panel h4 {
      margin: 0 0 14px; font-size: 11px; font-weight: 600;
      letter-spacing: 0.20em; text-transform: uppercase;
      color: #a1a1aa; font-family: var(--font-mono);
      display: flex; align-items: center; justify-content: space-between;
    }
    .tw-panel h4 .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--tw-primary, #0047ff); box-shadow: 0 0 8px var(--tw-primary, #0047ff); margin-right: 8px; display: inline-block; vertical-align: middle; }
    .tw-row { margin-bottom: 14px; }
    .tw-row:last-child { margin-bottom: 0; }
    .tw-label {
      display: block; margin-bottom: 6px;
      font-size: 11px; color: #a1a1aa; font-family: var(--font-mono);
      letter-spacing: 0.12em; text-transform: uppercase;
    }
    .tw-swatches { display: flex; gap: 8px; }
    .tw-swatches button {
      width: 32px; height: 32px; border-radius: 8px;
      border: 2px solid transparent; cursor: pointer;
      padding: 0; background-clip: padding-box;
      transition: border-color 160ms, transform 160ms;
    }
    .tw-swatches button.active { border-color: #fff; }
    .tw-swatches button:hover { transform: translateY(-1px); }
    .tw-seg {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
      background: #0a0a0c; border: 1px solid #27272a; border-radius: 8px; padding: 4px;
    }
    .tw-seg button {
      height: 30px; border-radius: 6px; border: none; cursor: pointer;
      background: transparent; color: #a1a1aa;
      font-family: var(--font-display); font-size: 12px; font-weight: 500;
      transition: all 160ms;
    }
    .tw-seg button.active { background: var(--tw-primary, #0047ff); color: #fff; }

    @media (max-width: 960px) {
      .tiers-grid { grid-template-columns: 1fr !important; }
      .section-h2 { font-size: 32px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
  

/* ══════════════ mockups/11-final-cta.html ══════════════ */


    /* Mockup chrome */

    /* Reveals */
    .reveal       { opacity: 0; transform: translateY(18px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
    .reveal.in    { opacity: 1; transform: translateY(0); }

    .pop          { opacity: 0; transform: scale(0.95); transition: opacity 640ms var(--ease-out), transform 640ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 640ms var(--ease-out); }
    .pop.in       { opacity: 1; transform: scale(1); }

    /* Soft ambient radial glow behind CTA */
    .ambient-glow {
      position: absolute;
      left: 50%; top: 50%;
      width: 900px; height: 900px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at center, rgba(0,71,255,0.18) 0%, rgba(0,71,255,0.08) 28%, transparent 62%);
      filter: blur(40px);
      pointer-events: none;
      opacity: 0;
      transition: opacity 1200ms var(--ease-out);
    }
    .ambient-glow.in { opacity: 1; }

    /* Primary CTA — heavy glow */
    .cta-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 14px;
      padding: 22px 44px;
      font-family: var(--font-display); font-weight: 600;
      font-size: 20px; letter-spacing: -0.015em;
      color: #fff; text-decoration: none;
      background: #0047ff;
      border-radius: 14px;
      box-shadow: 0 0 60px rgba(0,71,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.08);
      transition: background 220ms var(--ease-out), box-shadow 260ms var(--ease-out), transform 220ms var(--ease-out);
    }
    .cta-primary:hover {
      background: #0035cc;
      box-shadow: 0 0 80px rgba(0,71,255,0.65), inset 0 0 0 1px rgba(255,255,255,0.12);
      transform: translateY(-1px);
    }
    .cta-primary:active { transform: translateY(0); }

    @media (max-width: 760px) {
      .section-h2 { font-size: 44px !important; }
      .cta-primary { font-size: 17px !important; padding: 18px 32px !important; }
      .meta-strip { font-size: 10px !important; letter-spacing: 0.14em !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .pop, .ambient-glow { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; transition: none !important; }
      .reveal, .pop { transform: none !important; }
    }


/* ══════════════ MOBILE RESPONSIVE PASS (max-width: 767px) ══════════════ */

/* ── Hero ── */
@media (max-width: 767px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Headline column first, metric card second on mobile */
  .hero-grid > *:first-child { order: 2; }
  .hero-grid > *:last-child  { order: 1; }
  /* Hero H1 scale */
  .hero-grid h1 {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.08 !important;
  }
  /* Hero sub-paragraph */
  .hero-grid p {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    max-width: 100% !important;
  }
  /* Hero CTA buttons — stack vertically, full-width */
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-ctas button {
    width: 100% !important;
    justify-content: center !important;
    height: 52px !important;
  }
  /* Trust strip — wrap with smaller gap */
  .hero-trust {
    gap: 16px !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    margin-top: 32px !important;
  }
}

/* ── Global section padding ── */
@media (max-width: 767px) {
  /* Cap horizontal padding so nothing bleeds on small screens */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Max-width containers: full width on mobile */
  [style*="maxWidth: 1344"], [style*="maxWidth: 1280"], [style*="maxWidth: 1200"],
  [style*="maxWidth: 1100"], [style*="maxWidth: 1080"], [style*="maxWidth: 1040"],
  [style*="maxWidth: 960"],  [style*="maxWidth: 900"],  [style*="maxWidth: 880"] {
    max-width: 100% !important;
  }
}

/* ── Typography scale ── */
@media (max-width: 767px) {
  .section-h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  h1 { font-size: clamp(32px, 9vw, 52px) !important; }
  /* Metric numbers: keep readable but not viewport-blowing */
  .metric-card [style*="font-size: 88"],
  .metric-card [style*="fontSize: 88"] { font-size: clamp(52px, 14vw, 88px) !important; }
}

/* ── SILA Case Study ── */
@media (max-width: 767px) {
  .sila-story-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sila-metrics-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── Tier 1/2 / All service cards ── */
@media (max-width: 767px) {
  .tier-card { padding: 28px 20px !important; }
  .agent-grid { grid-template-columns: 1fr !important; }
  .svc-card { padding: 28px 20px !important; }
}

/* ── ITX Tier 3 ── */
@media (max-width: 767px) {
  .pillar-grid { grid-template-columns: 1fr !important; }
  .metric-row  { grid-template-columns: 1fr !important; }
}

/* ── Salotime Tier 4 ── */
@media (max-width: 767px) {
  .ba-grid       { grid-template-columns: 1fr !important; }
  .ba-grid .arrow-col { display: none !important; }
  .proof-row     { flex-direction: column !important; align-items: center !important; }
  .build-grid    { grid-template-columns: 1fr !important; }
  .phone         { width: 200px !important; }
}

/* ── Tiers 5/6/7 ── */
@media (max-width: 767px) {
  .tiers-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .mini-card:hover { transform: none !important; }
}

/* ── Final CTA ── */
@media (max-width: 767px) {
  .final-cta-section {
    min-height: auto !important;
    padding: 80px 20px 80px !important;
  }
  .cta-primary {
    width: 100% !important;
    padding: 18px 24px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ── Doctrine ── */
@media (max-width: 767px) {
  .doctrine-grid { grid-template-columns: 1fr !important; gap: 52px !important; }
  .ghost-num { font-size: 88px !important; top: -20px !important; }
}

/* ── Tap target safety ── */
@media (max-width: 767px) {
  button, a { min-height: 44px; }
  .card-cta  { min-height: 52px !important; }
  .cta-link  { min-height: 44px !important; }
}