/* ============================================================
       ENTERPRISE.TRANGOTECH.COM
       Page: Dynamics 365 Integration Services
       ============================================================ */

       :root {
        --red:      #de253a;
        --red-h:    #c41f32;
        --red-tint: #fbe9eb;
        --red-glow: rgba(222,37,58,.18);
        --dark:     #343434;
        --black:    #0d0d0d;
        --ink:      #141414;
        --ink-2:    #1c1c1f;
        --white:    #ffffff;
        --gray-60:  #565656;
        --gray-40:  #777070;
        --gray-20:  #d0d0d0;
        --gray-10:  #e8e8e8;
        --gray-05:  #f6f6f6;
        --gray-02:  #f9f9f9;
        --r-lg:     20px;
        --r-md:     15px;
        --r-sm:     10px;
        --shadow:   0 8px 40px rgba(0,0,0,.08);
        --shadow-h: 0 16px 60px rgba(0,0,0,.14);
        --t-fast:   140ms;
        --t-base:   220ms;
        --t-slow:   360ms;
        --ease-out: cubic-bezier(.22, 1, .36, 1);
        --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
        --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    }

    img { max-width: 100%; height: auto; }
    a { text-decoration: none; }
    button { font-family: inherit; }
    main, section, .sec-inner, .d3-hero-inner, .d3-trust-inner { max-width: 100%; }
    h1, h2, h3, h4, p { overflow-wrap: break-word; word-wrap: break-word; }
    .d3-final .wpcf7 form .wpcf7-response-output {
      margin: 2em 0.5em 1em;
      padding: 0.2em 1em;
      border: 2px solid #00a0d2;
      color: #ffffff;
    }

    /* A11Y */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      background: var(--red);
      color: #fff;
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      z-index: 9999;
      transition: top var(--t-base) var(--ease-out);
    }
    .skip-link:focus {
      top: 16px;
      color: #fff;
      outline: 3px solid #fff;
      outline-offset: 2px;
    }
    a:focus-visible, button:focus-visible, input:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
    .btn-red:focus-visible, .btn-ghost:focus-visible { outline-offset: 4px; }

    /* ── BUTTONS ── */
    .btn-red { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: #fff; font-size: 15px; font-weight: 700; padding: 15px 30px; border-radius: 16px; transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); border: none; cursor: pointer; text-decoration: none; min-height: 48px; line-height: 1; position: relative; overflow: hidden; }
    .btn-red::before { content:''; position:absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out); pointer-events: none; }
    .btn-red:hover { background: var(--red-h); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(222,37,58,.32); }
    .btn-red:hover::before { transform: translateX(100%); }
    .btn-red:active { transform: translateY(0); transition-duration: var(--t-fast); }
    .btn-red i { transition: transform var(--t-base) var(--ease-out); }
    .btn-red:hover i { transform: translateX(3px); }
    .btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--dark); font-size: 15px; font-weight: 600; padding: 15px 30px; border-radius: 16px; border: 1.5px solid var(--gray-20); transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); text-decoration: none; min-height: 48px; line-height: 1; cursor: pointer; }
    .btn-ghost:hover { border-color: var(--gray-40); background: var(--gray-05); color: var(--dark); }
    .sec-dark .btn-ghost, .d3-final .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.03); }
    .sec-dark .btn-ghost:hover, .d3-final .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }

    /* ── EYEBROW + SECTION TYPOGRAPHY (matched to live BC page pattern) ── */
    .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
    .eyebrow::before { content:''; display:block; width:32px; height:2.5px; background:var(--red); border-radius:2px; }
    .eyebrow span { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: 1.8px; text-transform: uppercase; }
    .eyebrow-c { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .eyebrow-c .eyebrow { justify-content: center; }
    .sec-title { font-size: 42px; font-weight: 500; color: #000; line-height: 1.21; letter-spacing: 0; margin-bottom: 18px; text-transform: capitalize; }
    .sec-title .accent, .sec-title span.accent { color: var(--red); font-weight: 700; }
    .sec-sub { font-size: 17px; color: var(--gray-60); line-height: 1.75; max-width: 640px; font-weight: 400; }
    .eyebrow-c .sec-title, .eyebrow-c .sec-sub { text-align: center; }
    .eyebrow-c .sec-sub { margin-left: auto; margin-right: auto; }
    .sec-dark .sec-title { color: #fff; font-weight: 700; }
    .sec-dark .sec-title .accent, .sec-dark .sec-title span.accent { color: var(--red); font-weight: 700; }
    .sec-dark .sec-sub { color: rgba(255,255,255,.72); }
    .sec-dark .eyebrow span { color: var(--red); }
    .sec-dark .eyebrow::before { background: var(--red); }
    .d3-final h2 .accent, .d3-final h2 span.accent { color: var(--red); font-weight: 700; }
    @media (max-width: 1024px) { .sec-title { font-size: 40px; line-height: 1.15; } }
    @media (max-width: 640px) { .sec-title { font-size: 30px; line-height: 1.25; } }

    /* ── SECTION WRAPPERS ── */
    .sec-white { background: var(--white); padding: 100px 0; position: relative; }
    .sec-gray  { background: var(--gray-05); padding: 100px 0; position: relative; }
    .sec-dark  { background: var(--ink); padding: 100px 0; position: relative; overflow: hidden; }
    .sec-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

    /* ============================================================
       HERO — split with integration "connections" visual
       ============================================================ */
    .d3-hero { background: #fff; padding: 80px 0 64px; margin-top: 108px; position: relative; overflow: hidden; }
    .d3-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--gray-10) 1px, transparent 1px), linear-gradient(90deg, var(--gray-10) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; opacity: .35; }
    .d3-hero::after { content:''; position: absolute; bottom: -30%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(222,37,58,.06) 0%, transparent 60%); pointer-events: none; }
    .d3-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

    .d3-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; }
    .d3-crumb a { color: var(--gray-40); transition: color .18s; }
    .d3-crumb a:hover { color: var(--red); }
    .d3-crumb .sep { color: var(--gray-20); font-size: 10px; }
    .d3-crumb .here { color: var(--gray-60); }

    .d3-hero-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--red-tint); border: 1px solid rgba(222,37,58,.22); border-radius: 100px; padding: 7px 18px 7px 9px; margin-bottom: 22px; }
    .d3-hero-pill-dot { width: 26px; height: 26px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; flex-shrink: 0; }
    .d3-hero-pill-text { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .9px; text-transform: uppercase; }

    /* Hero H1 — matched to BC live page banner-title pattern */
    .d3-hero h1 { font-size: 52px; font-weight: 700; color: #27282c; line-height: 1.2; letter-spacing: 0; max-width: 580px; margin-bottom: 22px; }
    .d3-hero h1 .accent { color: var(--red); font-weight: 700; }
    @media (max-width: 1200px) { .d3-hero h1 { font-size: 44px; line-height: 54px; } }
    @media (max-width: 768px)  { .d3-hero h1 { font-size: 34px; line-height: 44px; } #d3-est-locked{position: static;}}

    .d3-hero-sub { font-size: 17.5px; color: var(--gray-60); max-width: 540px; line-height: 1.75; margin-bottom: 32px; font-weight: 400; }
    .d3-hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 0; }
    .d3-hero-ctas .btn-red, .d3-hero-ctas .btn-ghost { padding: 14px 22px; font-size: 14.5px; }

    /* Hero right — Trango BC dashboard mockup */
    .d3-hero-img { width: 100%; max-width: 560px; margin-left: auto; position: relative; aspect-ratio: 696/490; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -18px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.05); background: var(--gray-05); }
    .d3-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
    .d3-hero-img-chip { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.96); border: 1px solid rgba(14,14,15,.06); color: #1a1a1f; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
    .d3-hero-img-chip i { color: #0078d4; font-size: 12px; }

    /* ============================================================
       TRUST BAR — 4 inline stats with connector-icon row
       ============================================================ */
    .d3-trust { background: var(--gray-02); border-top: 1px solid var(--gray-10); border-bottom: 1px solid var(--gray-10); padding: 36px 0; position: relative; }
    .d3-trust::after { content:''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .35; }
    .d3-trust-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0; }
    .d3-trust-cell { padding: 0 28px; border-right: 1px solid var(--gray-10); display: flex; flex-direction: column; gap: 6px; }
    .d3-trust-cell:first-child { padding-left: 0; }
    .d3-trust-cell:last-child { border-right: none; padding-right: 0; }
    .d3-trust-cell-head { display: flex; align-items: center; gap: 10px; }
    .d3-trust-cell-icon { width: 36px; height: 36px; background: var(--red-tint); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 15px; flex-shrink: 0; }
    .d3-trust-cell-v { font-size: 22px; font-weight: 800; color: var(--dark); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
    .d3-trust-cell-l { font-size: 12.5px; color: var(--gray-40); line-height: 1.5; }

    /* ── RESPONSIVE BASE ── */
    @media (max-width: 1024px) {
        .topbar { display: none; }
        .main-nav { top: 0; }
        .d3-hero { margin-top: 70px; padding: 56px 0 48px; }
        .d3-hero-inner { grid-template-columns: 1fr; gap: 48px; }
        .d3-hero h1, .d3-hero-sub { max-width: 100%; }
        .d3-hero-img { max-width: 560px; margin: 0 auto; }
        .d3-trust-inner { grid-template-columns: 1fr 1fr; gap: 28px 0; }
        .d3-trust-cell:nth-child(2n) { border-right: none; }
        .d3-trust-cell:nth-child(n+3) { padding-top: 24px; border-top: 1px solid var(--gray-10); }
    }
    @media (max-width: 768px) {
        .nav-links { display: none; }
        .d3-hero h1 { font-size: 36px; }
        .d3-hero-sub { font-size: 16px; }
        .sec-white, .sec-gray, .sec-dark { padding: 64px 0; }
    }
    @media (max-width: 640px) {
        .d3-trust-inner { grid-template-columns: 1fr; }
        .d3-trust-cell { padding: 0 !important; border-right: none !important; border-top: none !important; }
        .d3-trust-cell + .d3-trust-cell { padding-top: 18px !important; border-top: 1px solid var(--gray-10) !important; }
        .btn-red, .btn-ghost { font-size: 14.5px; padding: 14px 22px; }
        .sec-title br { display: none; }
    }
    @media (max-width: 480px) {
        .d3-hero { padding: 48px 0 36px; }
        .d3-hero-ctas { gap: 10px; flex-direction: column; align-items: stretch; }
        .d3-hero-ctas .btn-red, .d3-hero-ctas .btn-ghost { justify-content: center; width: 100%; }
        .sec-inner { padding: 0 18px; }
    }

    /* ============================================================
       SECTION 3 — WHAT IS D365 INTEGRATION (definition / AEO block)
       ============================================================ */
    .d3-def-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; margin-top: 56px; }
    .d3-def-prose p { font-size: 16.5px; color: var(--gray-60); line-height: 1.85; margin-bottom: 18px; }
    .d3-def-prose p strong { color: var(--dark); font-weight: 700; }
    .d3-def-prose .d3-def-quote { background: var(--red-tint); border-left: 4px solid var(--red); padding: 22px 26px; margin: 26px 0; font-size: 16px; color: #5a1018; line-height: 1.7; border-radius: 0 12px 12px 0; }
    .d3-def-prose .d3-def-quote strong { color: var(--red); font-weight: 700; letter-spacing: .3px; display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; }
    .d3-def-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--red); text-decoration: none; padding: 12px 20px; border: 1.5px solid var(--red); border-radius: 14px; transition: background .2s, color .2s; }
    .d3-def-cta:hover { background: var(--red); color: #fff; }
    .d3-def-cta i { transition: transform .2s; }
    .d3-def-cta:hover i { transform: translateX(3px); }

    .d3-keyfacts { background: #fff; border: 1px solid var(--gray-10); border-radius: 18px; padding: 26px; box-shadow: 0 8px 30px -16px rgba(0,0,0,.08); }
    .d3-keyfacts-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--gray-10); margin-bottom: 18px; }
    .d3-keyfacts-head-icon { width: 38px; height: 38px; background: var(--red); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; }
    .d3-keyfacts-head-text { font-size: 12px; font-weight: 800; color: var(--dark); letter-spacing: 1.4px; text-transform: uppercase; }
    .d3-keyfacts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
    .d3-keyfacts-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
    .d3-keyfacts-list li i { color: var(--red); font-size: 13px; padding-top: 4px; }
    .d3-keyfacts-list li strong { display: block; font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
    .d3-keyfacts-list li span { font-size: 13.5px; color: var(--gray-60); line-height: 1.6; }

    .d3-when-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
    .d3-when-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 16px; padding: 26px; }
    .d3-when-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
    .d3-when-card.is-yes .d3-when-card-h { color: #167b4d; }
    .d3-when-card.is-no  .d3-when-card-h { color: #6b6b6b; }
    .d3-when-card.is-yes { border-color: #c6e7d6; background: #f4fbf7; }
    .d3-when-card.is-no  { background: var(--gray-02); }
    .d3-when-card-h i { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
    .d3-when-card.is-yes .d3-when-card-h i { background: #2aa86a; }
    .d3-when-card.is-no  .d3-when-card-h i { background: #aaa; }
    .d3-when-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
    .d3-when-card li { padding-left: 22px; position: relative; font-size: 14.5px; line-height: 1.65; color: var(--gray-60); }
    .d3-when-card.is-yes li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: #2aa86a; font-size: 11px; }
    .d3-when-card.is-no li::before  { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: #c44; font-size: 11px; }

    /* ============================================================
       SECTION 4 — INTEGRATION SCENARIOS (tabbed grid)
       ============================================================ */
    .d3-scen-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 44px; padding: 8px; background: #fff; border: 1px solid var(--gray-10); border-radius: 100px; max-width: max-content; margin-left: auto; margin-right: auto; box-shadow: 0 6px 22px -12px rgba(0,0,0,.08); }
    .d3-scen-tab { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 11px 20px; border-radius: 100px; font-size: 13.5px; font-weight: 700; color: var(--gray-60); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; font-family: inherit; letter-spacing: .2px; white-space: nowrap; }
    .d3-scen-tab:hover { color: var(--red); background: var(--red-tint); }
    .d3-scen-tab.is-active { background: var(--red); color: #fff; box-shadow: 0 6px 16px -6px rgba(222,37,58,.45); }
    .d3-scen-tab.is-active:hover { background: var(--red-h); color: #fff; }
    .d3-scen-tab i { font-size: 12.5px; }
    .d3-scen-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--gray-05); color: var(--gray-60); font-size: 11px; font-weight: 800; border-radius: 100px; margin-left: 2px; }
    .d3-scen-tab.is-active .d3-scen-tab-count { background: rgba(255,255,255,.22); color: #fff; }

    .d3-scen-panel { display: none; }
    .d3-scen-panel.is-active { display: block; animation: d3FadeIn .35s ease both; }
    @keyframes d3FadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    .d3-scen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
    .d3-scen-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 14px; padding: 22px 20px; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; overflow: hidden; }
    .d3-scen-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
    .d3-scen-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(222,37,58,.18); }
    .d3-scen-card:hover::after { transform: scaleX(1); }
    .d3-scen-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .d3-scen-card-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--gray-05); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .d3-scen-card-ico.is-salesforce { background: #e6f3fb; color: #00a1e0; }
    .d3-scen-card-ico.is-shopify    { background: #ebf6e3; color: #5e8e3e; }
    .d3-scen-card-ico.is-qb         { background: #e7f2ea; color: #2ca01c; }
    .d3-scen-card-ico.is-sap        { background: #e6eef7; color: #0a6ed1; }
    .d3-scen-card-ico.is-sharepoint { background: #e0eff5; color: #0078d4; }
    .d3-scen-card-ico.is-outlook    { background: #e2ebf8; color: #0078d4; }
    .d3-scen-card-ico.is-teams      { background: #ebebfa; color: #4b53bc; }
    .d3-scen-card-ico.is-pbi        { background: #fff4cc; color: #c79900; }
    .d3-scen-card-ico.is-mc         { background: #fff7e0; color: #ffe01b; }
    .d3-scen-card-ico.is-hs         { background: #fbe9e4; color: #ff7a59; }
    .d3-scen-card-ico.is-stripe     { background: #ebe6ff; color: #635bff; }
    .d3-scen-card-ico.is-legacy     { background: #f3e8e9; color: var(--red); }
    .d3-scen-card-ico.is-bigc       { background: #e6f1ff; color: #1273de; }
    .d3-scen-card-ico.is-woo        { background: #f1e6f5; color: #7f54b3; }
    .d3-scen-card-ico.is-adobe      { background: #fde7e6; color: #fa0f00; }
    .d3-scen-card-ico.is-amazon     { background: #fff3df; color: #ff9900; }
    .d3-scen-card-ico.is-ebay       { background: #e6f0e1; color: #86b817; }
    .d3-scen-card-ico.is-walmart    { background: #e3eefb; color: #0071ce; }
    .d3-scen-card-ico.is-pipedrive  { background: #fbeee0; color: #1a1a1a; }
    .d3-scen-card-ico.is-zendesk    { background: #e0f1ec; color: #03363d; }
    .d3-scen-card-ico.is-xero       { background: #e0f1f9; color: #13b5ea; }
    .d3-scen-card-ico.is-ns         { background: #e8edf3; color: #00467f; }
    .d3-scen-card-ico.is-sage       { background: #e3f5ee; color: #00d639; }
    .d3-scen-card-ico.is-ship       { background: #eaf3fb; color: #2c83d6; }
    .d3-scen-card-ico.is-fedex      { background: #ece5fa; color: #4d148c; }
    .d3-scen-card-ico.is-edi        { background: #f4eef6; color: #5b3a8b; }
    .d3-scen-card-ico.is-wms        { background: #fef0e6; color: #cc5a16; }
    .d3-scen-card-ico.is-onprem     { background: #ecedf0; color: #3a3a3a; }
    .d3-scen-card-ico.is-as400      { background: #f0e8e0; color: #6b4423; }
    .d3-scen-card-t { font-size: 15px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .d3-scen-card-d { font-size: 13.5px; color: var(--gray-60); line-height: 1.65; margin-bottom: 14px; }
    .d3-scen-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
    .d3-scen-card-tag { font-size: 10.5px; font-weight: 700; color: var(--red); background: var(--red-tint); padding: 3px 9px; border-radius: 5px; letter-spacing: .3px; text-transform: uppercase; }
    .d3-scen-card-tag.is-neutral { color: var(--gray-60); background: var(--gray-05); }

    .d3-scen-cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
    .d3-scen-cta-text { font-size: 14.5px; color: var(--gray-60); font-weight: 500; }
    .d3-scen-cta-text strong { color: var(--dark); font-weight: 700; }

    /* ============================================================
       SECTION 5 — FIVE INTEGRATION APPROACHES MATRIX
       ============================================================ */
    .d3-app-matrix-wrap { margin-top: 56px; max-width: 100%; overflow-x: auto; border: 1px solid var(--gray-10); border-radius: 14px; background: #fff; -webkit-overflow-scrolling: touch; }
    .d3-app-matrix { width: 100%; border-collapse: collapse; min-width: 920px; }
    .d3-app-matrix th, .d3-app-matrix td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--gray-10); font-size: 13.5px; vertical-align: top; }
    .d3-app-matrix thead th { background: var(--ink); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; border-bottom: none; }
    .d3-app-matrix thead th:first-child { border-top-left-radius: 14px; }
    .d3-app-matrix thead th:last-child  { border-top-right-radius: 14px; }
    .d3-app-matrix tbody tr:last-child td { border-bottom: none; }
    .d3-app-matrix tbody tr:hover td { background: #faf6f7; }
    .d3-app-matrix .d3-app-name { font-weight: 800; color: var(--dark); font-size: 14px; }
    .d3-app-matrix .d3-app-name span { display: block; font-size: 11.5px; font-weight: 600; color: var(--gray-40); margin-top: 3px; text-transform: uppercase; letter-spacing: .6px; }
    .d3-app-matrix td.is-strong { color: #167b4d; font-weight: 600; }
    .d3-app-matrix td.is-weak   { color: #b14a4a; font-weight: 600; }
    .d3-app-matrix td.is-mid    { color: var(--gray-60); }
    .d3-app-pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; }
    .d3-app-pill.is-low  { background: #e9f5ee; color: #167b4d; }
    .d3-app-pill.is-med  { background: #fff4e0; color: #a3700b; }
    .d3-app-pill.is-high { background: #fbe6e9; color: var(--red); }

    .d3-app-help { margin-top: 28px; background: var(--red-tint); border: 1px solid rgba(222,37,58,.18); border-radius: 14px; padding: 22px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .d3-app-help-text { flex: 1; min-width: 220px; font-size: 15px; color: #5a1018; font-weight: 500; line-height: 1.6; }
    .d3-app-help-text strong { color: var(--red); font-weight: 800; }
    .d3-app-help .btn-red { font-size: 14px; padding: 12px 22px; }

    @media (max-width: 1024px) {
        .d3-def-grid, .d3-when-grid { grid-template-columns: 1fr; gap: 32px; }
        .d3-scen-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
        .d3-scen-grid { grid-template-columns: repeat(2, 1fr); }
        .d3-scen-tabs { max-width: 100%; border-radius: 16px; gap: 6px; padding: 6px; }
        .d3-scen-tab { padding: 9px 14px; font-size: 12.5px; }
    }
    @media (max-width: 480px) {
        .d3-scen-grid { grid-template-columns: 1fr; }
        .d3-app-matrix-wrap { border-radius: 12px; }
        .d3-scen-tabs { flex-direction: column; align-items: stretch; }
        .d3-scen-tab { justify-content: space-between; }
    }

    /* ============================================================
       SECTION 6 — INTEGRATION APPROACH WIZARD (form-first, then output)
       ============================================================ */
    .d3-wiz { background: #fff; border: 1px solid var(--gray-10); border-radius: 22px; padding: 0; margin-top: 56px; box-shadow: 0 30px 80px -28px rgba(0,0,0,.18); overflow: hidden; }
    .d3-wiz-head { background: linear-gradient(135deg, #1a1a1f 0%, #2a2a32 100%); color: #fff; padding: 26px 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .d3-wiz-head-icon { width: 44px; height: 44px; background: var(--red); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .d3-wiz-head-text { flex: 1; min-width: 220px; }
    .d3-wiz-head-text strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: .2px; margin-bottom: 4px; }
    .d3-wiz-head-text span { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; }
    .d3-wiz-progress { display: flex; align-items: center; gap: 4px; }
    .d3-wiz-progress-dot { width: 28px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); transition: background .25s; }
    .d3-wiz-progress-dot.is-active { background: var(--red); }
    .d3-wiz-progress-dot.is-done   { background: rgba(255,255,255,.55); }

    .d3-wiz-body { padding: 36px 34px 34px; }
    .d3-wiz-step { display: none; }
    .d3-wiz-step.is-active { display: block; }
    .d3-wiz-q { font-size: 21px; font-weight: 700; color: var(--dark); line-height: 1.35; margin-bottom: 8px; }
    .d3-wiz-q-help { font-size: 14px; color: var(--gray-60); margin-bottom: 22px; line-height: 1.65; }
    .d3-wiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
    .d3-wiz-opt { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1.5px solid var(--gray-10); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
    .d3-wiz-opt:hover { border-color: var(--red); background: #fffafb; }
    .d3-wiz-opt.is-selected { border-color: var(--red); background: var(--red-tint); }
    .d3-wiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
    .d3-wiz-opt-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-20); flex-shrink: 0; margin-top: 1px; position: relative; transition: border-color .2s; }
    .d3-wiz-opt.is-selected .d3-wiz-opt-dot { border-color: var(--red); }
    .d3-wiz-opt.is-selected .d3-wiz-opt-dot::after { content:''; position: absolute; inset: 2px; background: var(--red); border-radius: 50%; }
    .d3-wiz-opt-text { flex: 1; }
    .d3-wiz-opt-text strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
    .d3-wiz-opt-text span { display: block; font-size: 12.5px; color: var(--gray-40); line-height: 1.55; }

    .d3-wiz-nav { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gray-10); padding-top: 22px; }
    .d3-wiz-back { background: none; border: none; color: var(--gray-60); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; transition: color .2s, background .2s; }
    .d3-wiz-back:hover { color: var(--dark); background: var(--gray-05); }
    .d3-wiz-back[disabled] { opacity: .3; cursor: not-allowed; }
    .d3-wiz-next { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: #fff; font-size: 14.5px; font-weight: 700; padding: 13px 26px; border-radius: 14px; border: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; }
    .d3-wiz-next:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(222,37,58,.35); }
    .d3-wiz-next[disabled] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
    .d3-wiz-next i { transition: transform .2s; }
    .d3-wiz-next:hover:not([disabled]) i { transform: translateX(3px); }

    /* Gate form */
    .d3-wiz-gate { display: none; }
    .d3-wiz-gate.is-active { display: block; }
    .d3-wiz-gate-h { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
    .d3-wiz-gate-h .accent { color: var(--red); }
    .d3-wiz-gate-sub { font-size: 14.5px; color: var(--gray-60); margin-bottom: 22px; line-height: 1.65; }
    .d3-wiz-gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    .d3-wiz-gate-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--dark); margin-bottom: 6px; letter-spacing: .3px; text-transform: uppercase; }
    .d3-wiz-gate-field { position: relative; }
    .d3-wiz-gate-field input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-10); border-radius: 10px; font-size: 14.5px; color: var(--dark); background: #fff; transition: border-color .2s, box-shadow .2s; font-family: inherit; }
    .d3-wiz-gate-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(222,37,58,.12); }
    .d3-wiz-gate-field.has-error input { border-color: var(--red); background: #fff5f6; }
    .d3-wiz-gate-field-err { display: none; font-size: 12px; color: var(--red); font-weight: 600; margin-top: 6px; align-items: center; gap: 6px; }
    .d3-wiz-gate-field.has-error .d3-wiz-gate-field-err { display: flex; }
    .d3-wiz-gate-field-err i { font-size: 11px; }
    .d3-wiz-gate-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--gray-60); line-height: 1.55; margin: 16px 0 22px; padding: 10px 12px; border-radius: 8px; border: 1.5px solid transparent; transition: border-color .2s, background .2s; }
    .d3-wiz-gate-consent input { margin-top: 3px; accent-color: var(--red); }
    .d3-wiz-gate-consent a { color: var(--red); font-weight: 600; text-decoration: underline; }
    .d3-wiz-gate-consent.has-error { border-color: var(--red); background: #fff5f6; color: var(--red); }
    .d3-wiz-form-banner { display: none; align-items: center; gap: 10px; padding: 11px 14px; background: #fff5f6; border: 1px solid rgba(222,37,58,.25); border-radius: 10px; color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
    .d3-wiz-form-banner.is-shown { display: flex; }
    .d3-wiz-form-banner i { font-size: 14px; }
    .d3-wiz-gate-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--red); color: #fff; font-size: 15px; font-weight: 800; padding: 16px 28px; border-radius: 14px; border: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; }
    .d3-wiz-gate-submit:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(222,37,58,.4); }
    .d3-wiz-gate-trust { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: 12px; color: var(--gray-40); }
    .d3-wiz-gate-trust i { color: var(--red); font-size: 11px; }

    /* Result */
    .d3-wiz-result { display: none; }
    .d3-wiz-result.is-active { display: block; }
    .d3-wiz-result-banner { background: linear-gradient(135deg, var(--red-tint) 0%, #fff 100%); border: 1px solid rgba(222,37,58,.18); border-radius: 14px; padding: 24px; margin-bottom: 22px; }
    .d3-wiz-result-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; color: var(--red); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
    .d3-wiz-result-name { font-size: 26px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }
    .d3-wiz-result-fit { font-size: 14.5px; color: var(--gray-60); line-height: 1.65; }
    .d3-wiz-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
    .d3-wiz-result-cell { background: var(--gray-02); border: 1px solid var(--gray-10); border-radius: 12px; padding: 16px 18px; }
    .d3-wiz-result-cell-l { font-size: 11.5px; font-weight: 700; color: var(--gray-40); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 6px; }
    .d3-wiz-result-cell-v { font-size: 18px; font-weight: 800; color: var(--dark); }
    .d3-wiz-result-cta { display: flex; gap: 12px; flex-wrap: wrap; }
    .d3-wiz-result-restart { background: none; border: 1.5px solid var(--gray-20); color: var(--gray-60); font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 12px; cursor: pointer; transition: border-color .2s, color .2s; }
    .d3-wiz-result-restart:hover { border-color: var(--gray-40); color: var(--dark); }

    /* ============================================================
       SECTION 7 — IMPLEMENTATION METHODOLOGY (6 PHASES)
       ============================================================ */
    .d3-meth-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 56px; position: relative; }
    .d3-meth-grid::before { content: ''; position: absolute; left: 27px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(to bottom, var(--red), var(--gray-10)); }
    .d3-meth-row { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 24px 0; position: relative; align-items: start; }
    .d3-meth-num { width: 56px; height: 56px; background: #fff; border: 2.5px solid var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; position: relative; z-index: 1; box-shadow: 0 0 0 6px #fff; }
    .sec-gray .d3-meth-num { box-shadow: 0 0 0 6px var(--gray-05); }
    .d3-meth-body { padding-top: 6px; }
    .d3-meth-h { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 6px; letter-spacing: -.005em; }
    .d3-meth-time { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--red); background: var(--red-tint); padding: 3px 10px; border-radius: 6px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 12px; }
    .d3-meth-d { font-size: 15px; color: var(--gray-60); line-height: 1.75; margin-bottom: 14px; max-width: 720px; }
    .d3-meth-deliv { display: flex; flex-wrap: wrap; gap: 8px; }
    .d3-meth-deliv span { font-size: 12px; font-weight: 600; color: var(--dark); background: #fff; border: 1px solid var(--gray-10); padding: 5px 11px; border-radius: 6px; }

    /* ============================================================
       SECTION 8 — TECH STACK & SECURITY
       ============================================================ */
    .d3-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
    .d3-tech-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 14px; padding: 24px; transition: border-color .25s, transform .25s, box-shadow .25s; }
    .d3-tech-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(0,0,0,.12); }
    .sec-dark .d3-tech-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
    .sec-dark .d3-tech-card:hover { background: rgba(255,255,255,.07); border-color: var(--red); }
    .d3-tech-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .d3-tech-card-ico { width: 42px; height: 42px; background: var(--red-tint); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 17px; flex-shrink: 0; }
    .sec-dark .d3-tech-card-ico { background: rgba(222,37,58,.16); color: var(--red); }
    .d3-tech-card-t { font-size: 15.5px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .sec-dark .d3-tech-card-t { color: #fff; }
    .d3-tech-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
    .d3-tech-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gray-60); line-height: 1.6; }
    .sec-dark .d3-tech-list li { color: rgba(255,255,255,.72); }
    .d3-tech-list li i { color: var(--red); font-size: 10px; padding-top: 5px; flex-shrink: 0; }
    .sec-dark .d3-tech-list li i { color: var(--red); }
    .d3-tech-list li strong { font-weight: 700; color: var(--dark); }
    .sec-dark .d3-tech-list li strong { color: #fff; }

    .d3-tech-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
    .d3-tech-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 9px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }
    .d3-tech-badge i { color: var(--red); font-size: 13px; }

    @media (max-width: 1024px) {
        .d3-wiz-body { padding: 28px 22px 24px; }
        .d3-wiz-opts { grid-template-columns: 1fr; }
        .d3-tech-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
        .d3-wiz-gate-row { grid-template-columns: 1fr; }
        .d3-wiz-result-grid { grid-template-columns: 1fr; }
        .d3-meth-row { grid-template-columns: 44px 1fr; gap: 16px; }
        .d3-meth-num { width: 44px; height: 44px; font-size: 15px; }
        .d3-meth-grid::before { left: 21px; }
        .d3-tech-grid { grid-template-columns: 1fr; }
        .d3-wiz-head { padding: 22px; }
        .d3-wiz-head-text strong { font-size: 16px; }
    }

    /* ============================================================
       SECTION 9 — COST & TIMELINE ESTIMATOR (rich layout, form-gated)
       ============================================================ */
    .d3-est { background: #fff; border: 1px solid var(--gray-10); border-radius: 22px; padding: 0; margin-top: 56px; box-shadow: 0 30px 80px -28px rgba(0,0,0,.18); overflow: hidden; }
    .d3-est-head { background: linear-gradient(135deg, #1a1a1f 0%, #2a2a32 100%); color: #fff; padding: 26px 36px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .d3-est-head-ico { width: 48px; height: 48px; background: var(--red); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; flex-shrink: 0; }
    .d3-est-head-text { flex: 1; min-width: 220px; }
    .d3-est-head-text strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: .2px; margin-bottom: 4px; }
    .d3-est-head-text span { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; }
    .d3-est-head-meta { display: flex; align-items: center; gap: 18px; }
    .d3-est-head-meta-cell { text-align: right; }
    .d3-est-head-meta-cell strong { display: block; font-size: 18px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
    .d3-est-head-meta-cell span { display: block; font-size: 10.5px; color: rgba(255,255,255,.6); letter-spacing: .7px; text-transform: uppercase; margin-top: 4px; font-weight: 700; }

    .d3-est-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
    .d3-est-form { padding: 32px 36px; border-right: 1px solid var(--gray-10); background: var(--gray-02); }
    .d3-est-form-h { font-size: 12px; font-weight: 800; color: var(--red); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; }
    .d3-est-form-title { font-size: 19px; font-weight: 800; color: var(--dark); line-height: 1.35; margin-bottom: 20px; }
    .d3-est-form-title em { color: var(--red); font-style: normal; }

    .d3-est-q { margin-bottom: 18px; }
    .d3-est-q:last-child { margin-bottom: 0; }
    .d3-est-q-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--dark); margin-bottom: 8px; letter-spacing: .3px; text-transform: uppercase; }
    .d3-est-q-num { width: 22px; height: 22px; background: var(--red); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; flex-shrink: 0; }
    .d3-est-q-help { font-size: 12.5px; color: var(--gray-40); margin-bottom: 8px; line-height: 1.55; }
    .d3-est-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .d3-est-seg.is-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .d3-est-seg input { position: absolute; opacity: 0; pointer-events: none; }
    .d3-est-seg label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; background: #fff; border: 1.5px solid var(--gray-10); border-radius: 9px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; text-align: center; min-height: 56px; }
    .d3-est-seg label:hover { border-color: var(--red); transform: translateY(-1px); }
    .d3-est-seg label.is-selected { border-color: var(--red); background: var(--red-tint); }
    .d3-est-seg label strong { font-size: 12.5px; font-weight: 700; color: var(--dark); display: block; line-height: 1.2; }
    .d3-est-seg label.is-selected strong { color: var(--red); }
    .d3-est-seg label span { font-size: 10.5px; color: var(--gray-40); display: block; margin-top: 2px; line-height: 1.3; }

    .d3-est-output { padding: 32px 36px; position: relative; background: #fff; }

    /* Locked gate overlay */
    .d3-est-locked { position: absolute; inset: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 28px; z-index: 3; transition: opacity .25s; }
    .d3-est-locked.is-hidden { opacity: 0; pointer-events: none; }
    .d3-est-locked-icon { width: 52px; height: 52px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; margin-bottom: 14px; box-shadow: 0 12px 28px -10px rgba(222,37,58,.45); }
    .d3-est-locked-h { font-size: 19px; font-weight: 800; color: var(--dark); margin-bottom: 6px; line-height: 1.35; }
    .d3-est-locked-h .accent { color: var(--red); }
    .d3-est-locked-sub { font-size: 13.5px; color: var(--gray-60); line-height: 1.6; margin-bottom: 20px; max-width: 320px; }
    .d3-est-locked-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
    .d3-est-locked-banner { display: none; align-items: center; gap: 8px; padding: 9px 12px; background: #fff5f6; border: 1px solid rgba(222,37,58,.25); border-radius: 8px; color: var(--red); font-size: 12px; font-weight: 600; margin-bottom: 4px; width: 100%; max-width: 340px; }
    .d3-est-locked-banner.is-shown { display: flex; }
    .d3-est-locked-banner i { font-size: 11px; }
    .d3-est-locked-form .d3-est-field { position: relative; }
    .d3-est-locked-form input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-10); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; transition: border-color .2s, box-shadow .2s; }
    .d3-est-locked-form input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(222,37,58,.12); }
    .d3-est-locked-form .d3-est-field.has-error input { border-color: var(--red); background: #fff5f6; }
    .d3-est-field-err { display: none; font-size: 11px; color: var(--red); font-weight: 600; margin-top: 4px; text-align: left; }
    .d3-est-field.has-error .d3-est-field-err { display: block; }
    .d3-est-locked-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--gray-60); margin-top: 6px; line-height: 1.5; text-align: left; padding: 8px 10px; border: 1.5px solid transparent; border-radius: 8px; transition: border-color .2s, background .2s; }
    .d3-est-locked-consent input { margin-top: 2px; accent-color: var(--red);width: 20px; }
    .d3-est-locked-consent a { color: var(--red); font-weight: 600; }
    .d3-est-locked-consent.has-error { border-color: var(--red); background: #fff5f6; color: var(--red); }
    .d3-est-locked-form button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--red); color: #fff; font-size: 14.5px; font-weight: 800; padding: 14px 22px; border-radius: 12px; border: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; margin-top: 4px; }
    .d3-est-locked-form button:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(222,37,58,.4); }
    .d3-est-locked-trust { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: 11.5px; color: var(--gray-40); }
    .d3-est-locked-trust i { color: var(--red); font-size: 11px; }

    /* Result content */
    .d3-est-result-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; color: var(--red); background: var(--red-tint); padding: 5px 12px; border-radius: 100px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; }
    .d3-est-result-eyebrow i { font-size: 10px; }
    .d3-est-result-tier { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 4px; line-height: 1.2; }
    .d3-est-result-tier-sub { font-size: 13px; color: var(--gray-60); line-height: 1.55; margin-bottom: 22px; }

    .d3-est-cost-card { background: linear-gradient(135deg, var(--ink) 0%, #2a2a32 100%); border-radius: 16px; padding: 22px 24px; margin-bottom: 18px; color: #fff; position: relative; overflow: hidden; }
    .d3-est-cost-card::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(222,37,58,.35) 0%, transparent 60%); }
    .d3-est-cost-l { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.65); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; position: relative; z-index: 1; }
    .d3-est-cost { font-size: 38px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; letter-spacing: -.02em; position: relative; z-index: 1; }
    .d3-est-cost .d3-est-cost-cur { font-size: 20px; color: rgba(255,255,255,.7); font-weight: 600; vertical-align: top; margin-right: 4px; }
    .d3-est-cost-sub { font-size: 12.5px; color: rgba(255,255,255,.55); position: relative; z-index: 1; }

    .d3-est-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
    .d3-est-meta-cell { background: var(--gray-02); border: 1px solid var(--gray-10); border-radius: 11px; padding: 12px 14px; }
    .d3-est-meta-cell.is-accent { background: var(--red-tint); border-color: rgba(222,37,58,.22); }
    .d3-est-meta-l { font-size: 10.5px; font-weight: 800; color: var(--gray-40); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
    .d3-est-meta-cell.is-accent .d3-est-meta-l { color: var(--red); }
    .d3-est-meta-v { font-size: 15px; font-weight: 800; color: var(--dark); line-height: 1.2; }

    .d3-est-incl { border-top: 1px solid var(--gray-10); padding-top: 16px; margin-bottom: 16px; }
    .d3-est-incl-h { font-size: 11px; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
    .d3-est-incl ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
    .d3-est-incl li { display: flex; align-items: start; gap: 9px; font-size: 12.5px; color: var(--gray-60); line-height: 1.55; }
    .d3-est-incl li i { color: #2aa86a; font-size: 10.5px; padding-top: 4px; flex-shrink: 0; }

    .d3-est-result-cta { display: flex; gap: 8px; flex-wrap: wrap; }
    .d3-est-result-cta .btn-red, .d3-est-result-cta .btn-ghost { font-size: 13px; padding: 11px 18px; }

    .d3-est-disclaim { display: flex; align-items: start; gap: 8px; background: var(--gray-02); border-radius: 10px; padding: 10px 12px; margin-top: 14px; font-size: 11.5px; color: var(--gray-60); line-height: 1.55; }
    .d3-est-disclaim i { color: var(--red); font-size: 11px; padding-top: 3px; flex-shrink: 0; }

    /* ============================================================
       SECTION 10 — COMMON INTEGRATION FAILURES
       ============================================================ */
    .d3-fail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
    .d3-fail-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 16px; padding: 28px; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; overflow: hidden; }
    .d3-fail-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(0,0,0,.14); }
    .d3-fail-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .d3-fail-card-ico { width: 42px; height: 42px; background: #fbe9eb; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 17px; flex-shrink: 0; }
    .d3-fail-card-t { font-size: 17px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .d3-fail-card-d { font-size: 14.5px; color: var(--gray-60); line-height: 1.7; margin-bottom: 14px; }
    .d3-fail-card-d code { background: var(--gray-05); padding: 2px 8px; border-radius: 5px; font-size: 12.5px; color: #b14a4a; border: 1px solid var(--gray-10); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .d3-fail-fix { background: #f4fbf7; border-left: 3px solid #2aa86a; padding: 12px 16px; border-radius: 0 8px 8px 0; }
    .d3-fail-fix-h { font-size: 11px; font-weight: 800; color: #167b4d; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 5px; }
    .d3-fail-fix p { font-size: 13.5px; color: #1d4a32; margin: 0; line-height: 1.6; }
    .d3-fail-fix strong { color: #0e3a23; }

    /* ============================================================
       SECTION 11 — INDUSTRY PLAYBOOKS
       ============================================================ */
    .d3-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
    .d3-ind-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 16px; padding: 0; transition: border-color .25s, transform .25s, box-shadow .25s; overflow: hidden; }
    .d3-ind-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(0,0,0,.16); }
    .d3-ind-card-banner { height: 160px; background: var(--ink); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; }
    .d3-ind-card-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
    .d3-ind-card:hover .d3-ind-card-banner img { transform: scale(1.06); }
    .d3-ind-card-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,15,.15) 0%, rgba(14,14,15,.55) 60%, rgba(14,14,15,.78) 100%); }
    .d3-ind-card-banner-ico { width: 42px; height: 42px; background: var(--red); border: 1px solid rgba(255,255,255,.18); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; position: relative; z-index: 1; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
    .d3-ind-card-body { padding: 22px 22px 24px; }
    .d3-ind-card-t { font-size: 17px; font-weight: 800; color: var(--dark); line-height: 1.3; margin-bottom: 8px; }
    .d3-ind-card-systems { font-size: 12px; font-weight: 600; color: var(--gray-40); margin-bottom: 14px; letter-spacing: .2px; }
    .d3-ind-card-systems strong { color: var(--red); font-weight: 700; }
    .d3-ind-card ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
    .d3-ind-card li { padding-left: 20px; position: relative; font-size: 13.5px; color: var(--gray-60); line-height: 1.55; }
    .d3-ind-card li::before { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 4px; color: var(--red); font-size: 9px; }
    .d3-ind-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--red); text-decoration: none; transition: gap .2s; }
    .d3-ind-card-link:hover { gap: 11px; }

    @media (max-width: 1024px) {
        .d3-est-body { grid-template-columns: 1fr; }
        .d3-est-form { border-right: none; border-bottom: 1px solid var(--gray-10); }
        .d3-est-head-meta { width: 100%; justify-content: space-between; }
        .d3-fail-grid { grid-template-columns: 1fr; }
        .d3-ind-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
        .d3-est-head { padding: 22px; gap: 12px; }
        .d3-est-form, .d3-est-output { padding: 24px 22px; }
        .d3-est-cost { font-size: 32px; }
        .d3-est-meta { grid-template-columns: 1fr; }
        .d3-ind-grid { grid-template-columns: 1fr; }
        .d3-est-seg { grid-template-columns: 1fr 1fr; }
        .d3-est-seg.is-4 { grid-template-columns: 1fr 1fr; }
    }

    /* ============================================================
       SECTION 12 — NATIVE vs CUSTOM DECISION MATRIX
       ============================================================ */
    .d3-nvc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
    .d3-nvc-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 18px; padding: 0; overflow: hidden; }
    .d3-nvc-card-head { padding: 24px 26px 18px; display: flex; align-items: center; gap: 14px; }
    .d3-nvc-card-head-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
    .d3-nvc-card.is-native .d3-nvc-card-head-ico { background: #e6f1f8; color: #0078d4; }
    .d3-nvc-card.is-custom .d3-nvc-card-head-ico { background: var(--red-tint); color: var(--red); }
    .d3-nvc-card-head-t { font-size: 19px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .d3-nvc-card-head-t span { display: block; font-size: 12px; font-weight: 700; color: var(--gray-40); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
    .d3-nvc-card-body { padding: 0 26px 24px; }
    .d3-nvc-card-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--gray-10); align-items: start; }
    .d3-nvc-card-row-l { font-size: 11.5px; font-weight: 800; color: var(--gray-40); text-transform: uppercase; letter-spacing: .6px; padding-top: 2px; }
    .d3-nvc-card-row-v { font-size: 14px; color: var(--gray-60); line-height: 1.65; }
    .d3-nvc-card-row-v strong { color: var(--dark); font-weight: 700; }
    .d3-nvc-verdict { background: var(--gray-02); border-top: 1px solid var(--gray-10); padding: 16px 26px; display: flex; align-items: start; gap: 12px; }
    .d3-nvc-verdict i { color: var(--red); font-size: 14px; padding-top: 3px; flex-shrink: 0; }
    .d3-nvc-verdict-text { font-size: 13px; color: var(--gray-60); line-height: 1.65; }
    .d3-nvc-verdict-text strong { color: var(--dark); font-weight: 700; }

    /* ============================================================
       SECTION 13 — APPSOURCE ISV INTEGRATIONS
       ============================================================ */
    .d3-isv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
    .d3-isv-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color .25s, transform .25s, box-shadow .25s; }
    .d3-isv-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(0,0,0,.12); }
    .d3-isv-card-h { display: flex; align-items: center; gap: 11px; }
    .d3-isv-card-ico { width: 38px; height: 38px; border-radius: 9px; background: var(--red-tint); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
    .d3-isv-card-name { font-size: 14.5px; font-weight: 800; color: var(--dark); line-height: 1.2; }
    .d3-isv-card-cat { font-size: 11px; font-weight: 700; color: var(--gray-40); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
    .d3-isv-card-d { font-size: 13px; color: var(--gray-60); line-height: 1.6; }

    .d3-isv-note { margin-top: 32px; background: #f4fbf7; border: 1px solid #c6e7d6; border-radius: 12px; padding: 18px 22px; display: flex; align-items: start; gap: 14px; }
    .d3-isv-note i { color: #2aa86a; font-size: 18px; flex-shrink: 0; padding-top: 2px; }
    .d3-isv-note-text { font-size: 14px; color: #1d4a32; line-height: 1.6; }
    .d3-isv-note-text strong { color: #0e3a23; font-weight: 700; }

    /* ============================================================
       SECTION 14 — PRICING TIERS
       ============================================================ */
    .d3-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; align-items: stretch; }
    .d3-price-card { background: #fff; border: 1.5px solid var(--gray-10); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; }
    .d3-price-card.is-recommended { border-color: var(--red); box-shadow: 0 30px 60px -22px rgba(222,37,58,.25); }
    .d3-price-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(0,0,0,.16); }
    .d3-price-card.is-recommended:hover { box-shadow: 0 36px 70px -22px rgba(222,37,58,.32); }
    .d3-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; box-shadow: 0 6px 18px -6px rgba(222,37,58,.5); }
    .d3-price-tier { font-size: 12.5px; font-weight: 800; color: var(--red); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 10px; }
    .d3-price-name { font-size: 21px; font-weight: 800; color: var(--dark); margin-bottom: 4px; line-height: 1.25; }
    .d3-price-desc { font-size: 13px; color: var(--gray-60); line-height: 1.55; margin-bottom: 18px; min-height: 40px; }
    .d3-price-from { font-size: 11px; font-weight: 700; color: var(--gray-40); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: block; }
    .d3-price-amount { font-size: 38px; font-weight: 800; color: var(--dark); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 4px; letter-spacing: -.02em; }
    .d3-price-amount .d3-price-cur { font-size: 18px; font-weight: 600; color: var(--gray-40); vertical-align: top; margin-right: 4px; }
    .d3-price-amount .d3-price-plus { font-size: 22px; color: var(--gray-40); font-weight: 600; }
    .d3-price-time { font-size: 12.5px; color: var(--gray-40); font-weight: 600; margin-bottom: 22px; }
    .d3-price-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .d3-price-feats li { display: flex; align-items: start; gap: 9px; font-size: 13.5px; color: var(--gray-60); line-height: 1.55; }
    .d3-price-feats li i { color: #2aa86a; font-size: 11px; padding-top: 5px; flex-shrink: 0; }
    .d3-price-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: background .2s, color .2s, transform .15s, box-shadow .2s; cursor: pointer; }
    .d3-price-cta.is-primary { background: var(--red); color: #fff; }
    .d3-price-cta.is-primary:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(222,37,58,.4); }
    .d3-price-cta.is-secondary { background: var(--gray-05); color: var(--dark); border: 1.5px solid var(--gray-10); }
    .d3-price-cta.is-secondary:hover { background: var(--white); border-color: var(--red); color: var(--red); }

    .d3-price-note { margin-top: 32px; text-align: center; font-size: 14px; color: var(--gray-60); }
    .d3-price-note strong { color: var(--dark); font-weight: 700; }
    .d3-price-note a { color: var(--red); font-weight: 700; text-decoration: none; }

    @media (max-width: 1024px) {
        .d3-nvc-grid { grid-template-columns: 1fr; }
        .d3-isv-grid { grid-template-columns: repeat(2, 1fr); }
        .d3-price-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
        .d3-isv-grid { grid-template-columns: 1fr; }
        .d3-price-grid { grid-template-columns: 1fr; }
        .d3-nvc-card-row { grid-template-columns: 1fr; gap: 4px; }
    }

    /* ============================================================
       SECTION 15 — PARTNER VETTING CHECKLIST
       ============================================================ */
    .d3-vet-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; margin-top: 56px; align-items: start; }
    .d3-vet-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 18px; padding: 30px 30px 26px; }
    .d3-vet-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
    .d3-vet-card-h-ico { width: 40px; height: 40px; background: var(--gray-05); color: var(--dark); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; border: 1px solid var(--gray-10); }
    .d3-vet-card-h-t { font-size: 19px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .d3-vet-card-sub { font-size: 13.5px; color: var(--gray-60); line-height: 1.6; margin-bottom: 22px; }
    .d3-vet-q { padding: 16px 0; border-top: 1px solid var(--gray-10); display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
    .d3-vet-q:last-child { padding-bottom: 0; }
    .d3-vet-q-num { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .d3-vet-q-body strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--dark); margin-bottom: 5px; line-height: 1.4; }
    .d3-vet-q-body span { display: block; font-size: 13px; color: var(--gray-60); line-height: 1.65; }
    .d3-vet-q-body span em { color: var(--dark); font-style: normal; font-weight: 600; }
    .d3-vet-q-body span em::before { content: '\201C'; color: var(--gray-40); margin-right: 1px; }
    .d3-vet-q-body span em::after  { content: '\201D'; color: var(--gray-40); margin-left: 1px; }
    .d3-vet-q-body span::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #2aa86a; font-size: 10px; margin-right: 7px; }

    .d3-vet-red { background: linear-gradient(180deg, #1a1a1f 0%, #2a2a32 100%); color: #fff; border-radius: 18px; padding: 30px 28px 26px; }
    .d3-vet-red-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
    .d3-vet-red-h-ico { width: 40px; height: 40px; background: rgba(222,37,58,.18); color: var(--red); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
    .d3-vet-red-h-t { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.3; }
    .d3-vet-red-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; margin-bottom: 18px; }
    .d3-vet-red ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .d3-vet-red li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.55; }
    .d3-vet-red li i { color: var(--red); font-size: 11px; padding-top: 4px; }
    .d3-vet-red li strong { color: #fff; font-weight: 700; }

    /* ============================================================
       SECTION 16 — WHY TRANGO TECH (6 DIFFERENTIATORS)
       ============================================================ */
    .d3-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
    .d3-why-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 16px; padding: 28px 26px; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; }
    .d3-why-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(0,0,0,.14); }
    .d3-why-card-num { position: absolute; top: 22px; right: 26px; font-size: 38px; font-weight: 800; color: var(--gray-10); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
    .d3-why-card-ico { width: 50px; height: 50px; background: var(--red-tint); color: var(--red); border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 16px; }
    .d3-why-card-t { font-size: 17px; font-weight: 800; color: var(--dark); line-height: 1.3; margin-bottom: 8px; }
    .d3-why-card-d { font-size: 14px; color: var(--gray-60); line-height: 1.7; }
    .d3-why-card-d strong { color: var(--dark); font-weight: 700; }

    .d3-why-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #1a1a1f 0%, #2a2a32 100%); }
    .d3-why-stat { padding: 30px 26px; border-right: 1px solid rgba(255,255,255,.1); text-align: center; }
    .d3-why-stat:last-child { border-right: none; }
    .d3-why-stat-v { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: 6px; }
    .d3-why-stat-v .accent { color: var(--red); }
    .d3-why-stat-l { font-size: 12.5px; color: rgba(255,255,255,.7); font-weight: 600; line-height: 1.5; }

    /* ============================================================
       SECTION 17 — CASE STUDIES
       ============================================================ */
    .d3-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
    .d3-cs-card { background: #fff; border: 1px solid var(--gray-10); border-radius: 18px; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
    .d3-cs-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(0,0,0,.18); }
    .d3-cs-banner { height: 180px; background: var(--ink); position: relative; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
    .d3-cs-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
    .d3-cs-card:hover .d3-cs-banner img { transform: scale(1.06); }
    .d3-cs-banner::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,15,.18) 0%, rgba(14,14,15,.62) 65%, rgba(14,14,15,.85) 100%); }
    .d3-cs-banner-ico { width: 42px; height: 42px; background: var(--red); border: 1px solid rgba(255,255,255,.18); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; position: relative; z-index: 1; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
    .d3-cs-banner-cat { position: relative; z-index: 1; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 1.2px; text-transform: uppercase; align-self: flex-start; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .d3-cs-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
    .d3-cs-t { font-size: 17px; font-weight: 800; color: var(--dark); line-height: 1.3; margin-bottom: 10px; }
    .d3-cs-d { font-size: 13.5px; color: var(--gray-60); line-height: 1.7; margin-bottom: 18px; }
    .d3-cs-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
    .d3-cs-result-cell { background: var(--gray-02); border: 1px solid var(--gray-10); border-radius: 10px; padding: 12px 14px; }
    .d3-cs-result-v { font-size: 19px; font-weight: 800; color: var(--red); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-bottom: 4px; }
    .d3-cs-result-l { font-size: 11px; color: var(--gray-40); font-weight: 600; line-height: 1.4; }
    .d3-cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gray-10); }
    .d3-cs-tag { font-size: 10.5px; font-weight: 700; color: var(--gray-60); background: var(--gray-05); padding: 4px 9px; border-radius: 5px; letter-spacing: .3px; text-transform: uppercase; }

    @media (max-width: 1024px) {
        .d3-vet-grid { grid-template-columns: 1fr; }
        .d3-why-grid, .d3-cs-grid { grid-template-columns: 1fr 1fr; }
        .d3-why-stats { grid-template-columns: 1fr 1fr; }
        .d3-why-stat { border-right: none; }
        .d3-why-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
        .d3-why-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
    }
    @media (max-width: 640px) {
        .d3-why-grid, .d3-cs-grid { grid-template-columns: 1fr; }
        .d3-why-stats { grid-template-columns: 1fr; }
        .d3-why-stat { border-right: none !important; }
        .d3-why-stat + .d3-why-stat { border-top: 1px solid rgba(255,255,255,.1); }
        .d3-why-stat-v { font-size: 34px; }
    }

    /* ============================================================
       SECTION 18 — TESTIMONIALS
       ============================================================ */
    .d3-test-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 56px; align-items: start; }
    .d3-test-feat { background: #fff; border: 1px solid var(--gray-10); border-radius: 20px; padding: 36px 40px; position: relative; box-shadow: 0 30px 60px -28px rgba(0,0,0,.14); }
    .d3-test-feat::before { content: '\201C'; position: absolute; top: 18px; left: 30px; font-size: 96px; line-height: 1; color: var(--red); font-family: Georgia, serif; opacity: .18; }
    .d3-test-stars { display: flex; gap: 3px; margin-bottom: 14px; }
    .d3-test-stars i { color: #f5a623; font-size: 14px; }
    .d3-test-feat-q { font-size: 20px; font-weight: 500; color: var(--dark); line-height: 1.55; margin-bottom: 22px; letter-spacing: -.005em; }
    .d3-test-feat-q em { color: var(--red); font-weight: 600; font-style: normal; }
    .d3-test-attrib { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--gray-10); }
    .d3-test-attrib-av { width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
    .d3-test-attrib-n { font-size: 14.5px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .d3-test-attrib-r { font-size: 12.5px; color: var(--gray-40); margin-top: 2px; }
    .d3-test-attrib-r strong { color: var(--gray-60); font-weight: 700; }
    .d3-test-attrib-logo { margin-left: auto; padding-left: 14px; border-left: 1px solid var(--gray-10); font-size: 11px; font-weight: 700; color: var(--gray-40); letter-spacing: 1px; text-transform: uppercase; }

    .d3-test-side { display: flex; flex-direction: column; gap: 16px; }
    .d3-test-mini { background: #fff; border: 1px solid var(--gray-10); border-radius: 14px; padding: 22px 24px; }
    .d3-test-mini .d3-test-stars { margin-bottom: 10px; }
    .d3-test-mini-q { font-size: 14px; color: var(--gray-60); line-height: 1.65; margin-bottom: 14px; font-style: italic; }
    .d3-test-mini-q::before { content: '\201C'; color: var(--red); font-size: 18px; vertical-align: -2px; margin-right: 2px; }
    .d3-test-mini-q::after { content: '\201D'; color: var(--red); font-size: 18px; vertical-align: -2px; margin-left: 2px; }
    .d3-test-mini-n { font-size: 13px; font-weight: 800; color: var(--dark); }
    .d3-test-mini-r { font-size: 11.5px; color: var(--gray-40); margin-top: 2px; }

    /* ============================================================
       SECTION 19 — POST GO-LIVE SUPPORT TIERS
       ============================================================ */
    .d3-sup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; align-items: stretch; }
    .d3-sup-card { background: #fff; border: 1.5px solid var(--gray-10); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s; }
    .d3-sup-card.is-popular { border-color: var(--red); background: linear-gradient(180deg, var(--red-tint) 0%, #fff 60%); }
    .d3-sup-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(0,0,0,.14); }
    .d3-sup-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .d3-sup-card-ico { width: 42px; height: 42px; background: var(--red-tint); color: var(--red); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
    .d3-sup-card.is-popular .d3-sup-card-ico { background: var(--red); color: #fff; }
    .d3-sup-card-t { font-size: 18px; font-weight: 800; color: var(--dark); line-height: 1.3; }
    .d3-sup-card-d { font-size: 13.5px; color: var(--gray-60); line-height: 1.65; margin-bottom: 18px; }
    .d3-sup-sla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; padding: 14px 0; border-top: 1px solid var(--gray-10); border-bottom: 1px solid var(--gray-10); }
    .d3-sup-sla-cell-l { font-size: 11px; font-weight: 700; color: var(--gray-40); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
    .d3-sup-sla-cell-v { font-size: 14.5px; font-weight: 800; color: var(--dark); line-height: 1.2; }
    .d3-sup-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
    .d3-sup-feats li { display: flex; align-items: start; gap: 9px; font-size: 13.5px; color: var(--gray-60); line-height: 1.55; }
    .d3-sup-feats li i { color: #2aa86a; font-size: 11px; padding-top: 5px; flex-shrink: 0; }

    /* ============================================================
       SECTION 20 — FAQ ACCORDION
       ============================================================ */
    .d3-faq-list { margin-top: 56px; max-width: 880px; margin-left: auto; margin-right: auto; }
    .d3-faq-item { background: #fff; border: 1px solid var(--gray-10); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .25s; }
    .d3-faq-item.is-open { border-color: var(--red); box-shadow: 0 10px 28px -14px rgba(0,0,0,.12); }
    .d3-faq-q { width: 100%; background: none; border: none; padding: 20px 24px; display: flex; align-items: start; justify-content: space-between; gap: 18px; text-align: left; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.45; font-family: inherit; }
    .d3-faq-q:hover { color: var(--red); }
    .d3-faq-q-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-05); color: var(--gray-60); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: background .2s, color .2s, transform .25s; margin-top: 1px; }
    .d3-faq-item.is-open .d3-faq-q-ico { background: var(--red); color: #fff; transform: rotate(45deg); }
    .d3-faq-a-wrap { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
    .d3-faq-item.is-open .d3-faq-a-wrap { max-height: 900px; }
    .d3-faq-a { padding: 0 24px 22px; font-size: 14.5px; color: var(--gray-60); line-height: 1.75; }
    .d3-faq-a p { margin: 0 0 12px; }
    .d3-faq-a p:last-child { margin: 0; }
    .d3-faq-a code { background: var(--gray-05); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--gray-10); }
    .d3-faq-a a { color: var(--red); font-weight: 700; text-decoration: none; }
    .d3-faq-a a:hover { text-decoration: underline; }

    @media (max-width: 1024px) {
        .d3-test-grid, .d3-sup-grid { grid-template-columns: 1fr; }
        .d3-test-feat { padding: 28px 30px; }
        .d3-test-feat-q { font-size: 17px; }
    }
    @media (max-width: 640px) {
        .d3-faq-q { padding: 16px 18px; font-size: 14.5px; }
        .d3-faq-a { padding: 0 18px 18px; }
        .d3-test-feat { padding: 24px 22px; }
        .d3-test-feat-q { font-size: 16px; }
        .d3-sup-sla { grid-template-columns: 1fr; gap: 14px; }
    }

    /* ============================================================
       SECTION 21 — FINAL CTA + CONTACT FORM
       ============================================================ */
    .d3-final { background: linear-gradient(135deg, #1a1a1f 0%, #2a2a32 50%, #1a1a1f 100%); padding: 100px 0; position: relative; overflow: hidden; }
    .d3-final::before { content:''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; opacity: .55; pointer-events: none; }
    .d3-final::after { content:''; position: absolute; top: -20%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(222,37,58,.18) 0%, transparent 60%); pointer-events: none; }
    .d3-final-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }

    .d3-final-left .eyebrow span { color: var(--red); }
    .d3-final-left .eyebrow::before { background: var(--red); }
    .d3-final-left h2 { font-size: 44px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 18px; }
    .d3-final-left h2 .accent { color: var(--red); }
    .d3-final-left p { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 28px; max-width: 520px; }
    .d3-final-left ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .d3-final-left li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.88); font-weight: 500; }
    .d3-final-left li i { color: var(--red); font-size: 13px; }
    .d3-final-left li strong { color: #fff; font-weight: 700; }

    .d3-final-form { background: rgba(255,255,255,.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 32px; box-shadow: 0 30px 80px -28px rgba(0,0,0,.55); }
    .d3-final-form-h { font-size: 13px; font-weight: 800; color: var(--red); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 10px; }
    .d3-final-form-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 24px; line-height: 1.3; }
    .d3-final-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
    .d3-final-form-field label { display: block; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 6px; letter-spacing: .4px; text-transform: uppercase; }
    .d3-final-form-field input, .d3-final-form-field select, .d3-final-form-field textarea { width: 100%; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); border-radius: 11px; padding: 13px 15px; font-size: 14px; color: #fff; font-family: inherit; transition: border-color .2s, background .2s, box-shadow .2s; }
    .d3-final-form-field input::placeholder, .d3-final-form-field textarea::placeholder { color: rgba(255,255,255,.4); }
    .d3-final-form-field input:focus, .d3-final-form-field select:focus, .d3-final-form-field textarea:focus { outline: none; border-color: var(--red); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(222,37,58,.15); }
    .d3-final-form-field textarea { min-height: 90px; resize: vertical; }
    .d3-final-form-field select option { background: #1a1a1f; color: #fff; }
    .d3-final-form-consent { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 18px; font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.55; }
    .d3-final-form-consent input { margin-top: 3px; accent-color: var(--red); }
    .d3-final-form-consent a { color: var(--red); text-decoration: underline; }
    .d3-final-form-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--red); color: #fff; font-size: 15px; font-weight: 800; padding: 16px 28px; border-radius: 13px; border: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; }
    .d3-final-form-submit:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 14px 32px -8px rgba(222,37,58,.5); }
    .d3-final-form-trust { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; font-size: 11.5px; color: rgba(255,255,255,.5); }
    .d3-final-form-trust span { display: flex; align-items: center; gap: 6px; }
    .d3-final-form-trust i { color: var(--red); font-size: 11px; }

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer { background: #0A0A0A; color: rgba(255,255,255,.7); padding: 64px 0 0; border-top: 1px solid rgba(255,255,255,.06); }
    .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .footer-brand-mark { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
    .footer-brand-mark .nav-logo-mark { background: var(--red); }
    .footer-brand-name { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .4px; }
    .footer-brand-name span { display: block; font-size: 10px; color: var(--red); letter-spacing: 1.4px; text-transform: uppercase; margin-top: 3px; }
    .footer-brand p { font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; max-width: 320px; }
    .footer-contact { font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
    .footer-contact a { color: rgba(255,255,255,.75); display: inline-flex; align-items: center; gap: 9px; }
    .footer-contact a:hover { color: #fff; }
    .footer-contact i { color: var(--red); font-size: 12px; width: 14px; }
    .footer-col-h { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 16px; }
    .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
    .footer-col a { font-size: 13.5px; color: rgba(255,255,255,.6); transition: color .15s; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.5); }
    .footer-bottom-links { display: flex; gap: 18px; }
    .footer-bottom-links a { color: rgba(255,255,255,.5); }
    .footer-bottom-links a:hover { color: #fff; }
    .footer-social { display: flex; gap: 10px; }
    .footer-social a { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font-size: 12px; transition: border-color .15s, color .15s, background .15s; }
    .footer-social a:hover { color: #fff; border-color: var(--red); background: var(--red); }

    @media (max-width: 1024px) {
        .d3-final-inner { grid-template-columns: 1fr; gap: 40px; }
        .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
    }
    @media (max-width: 640px) {
        .d3-final { padding: 64px 0; }
        .d3-final-left h2 { font-size: 32px; }
        .d3-final-form { padding: 24px; }
        .d3-final-form-row { grid-template-columns: 1fr; }
        .footer-grid { grid-template-columns: 1fr 1fr; }
        .footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    /* =====================================================
       AEO ADDITIONS — TL;DR direct answer, matrix tables,
       worked examples, date stamps
       ===================================================== */
    .d3-tldr { background: linear-gradient(180deg, #fff 0%, var(--gray-02, #F8F8F8) 100%); border: 1px solid var(--gray-10, #E8E8E8); border-radius: 18px; padding: 26px 30px; margin: -28px auto 56px; max-width: 960px; position: relative; z-index: 5; box-shadow: 0 30px 60px -28px rgba(0,0,0,.16); }
    .d3-tldr-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; flex-wrap: wrap; }
    .d3-tldr-ico { width: 32px; height: 32px; background: var(--red); color: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
    .d3-tldr-title { font-size: 11px; font-weight: 800; color: var(--red); letter-spacing: 1.4px; text-transform: uppercase; }
    .d3-tldr-date { font-size: 11px; font-weight: 700; color: var(--gray-40, #8A8A8A); margin-left: auto; padding: 4px 9px; background: var(--gray-05, #F5F5F5); border-radius: 100px; }
    .d3-tldr p { font-size: 15px; color: var(--dark); line-height: 1.75; margin: 0; }
    .d3-tldr p strong { font-weight: 800; }
    .d3-tldr p .accent { color: var(--red); font-weight: 800; }
    .d3-tldr-byline { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--gray-10, #E8E8E8); font-size: 11.5px; color: var(--gray-40, #8A8A8A); line-height: 1.55; }
    .d3-tldr-byline strong { color: var(--gray-60, #565656); }
    .d3-tldr-byline a { color: var(--red); font-weight: 700; }
    @media (max-width: 640px) { .d3-tldr { padding: 20px; margin: -20px 16px 40px; border-radius: 14px; } .d3-tldr p { font-size: 13.5px; } .d3-tldr-date { width: 100%; margin-left: 0; } }

    .d3-conn-note, .d3-price-stamp { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--gray-40, #8A8A8A); line-height: 1.6; }
    .d3-conn-note strong, .d3-price-stamp strong { color: var(--gray-60, #565656); font-weight: 700; }
    .d3-conn-note a, .d3-price-stamp a { color: var(--red); font-weight: 700; }

    .d3-worked { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
    .d3-worked-card { background: #fff; border: 1px solid var(--gray-10, #E8E8E8); border-radius: 16px; padding: 24px 22px; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .25s; }
    .d3-worked-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgba(0,0,0,.14); }
    .d3-worked-tag { font-size: 10.5px; font-weight: 800; color: var(--red); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
    .d3-worked-t { font-size: 16px; font-weight: 800; color: var(--dark); line-height: 1.3; margin: 0 0 10px; }
    .d3-worked-d { font-size: 13px; color: var(--gray-60, #565656); line-height: 1.65; margin: 0 0 14px; flex: 1; }
    .d3-worked-d strong { color: var(--dark); font-weight: 700; }
    .d3-worked-math { padding: 13px 15px; background: rgba(222,37,58,.06); border: 1px solid rgba(222,37,58,.2); border-radius: 10px; font-size: 12.5px; color: var(--gray-60, #565656); line-height: 1.65; font-variant-numeric: tabular-nums; }
    .d3-worked-math strong { color: var(--red); font-size: 15px; font-weight: 800; }
    .d3-worked-math small { display: block; margin-top: 5px; color: var(--gray-40, #8A8A8A); font-size: 11px; }
    @media (max-width: 900px) { .d3-worked { grid-template-columns: 1fr; } }

    .d3-final a{color: #de253a;}