/* ============================================================
   diagnosis-sme.css
   企業數位健診頁面專用樣板（由 diagnosis_sme_uiux_demo.html 產生）
   所有規則作用域限制於 .diag-sme 容器內，避免影響全站樣式。
   請勿直接手動編輯；樣式調整請修改 DEMO 源檔後重新執行
   tools/Apply-DiagnosisSmeTemplate.ps1 產生。
   ============================================================ */
    :root{
      --brand: #175cd3;
      --brand-dark: #1849a9;
      --brand-mid: #2e90fa;
      --aux-teal: #0f766e;
      --aux-teal-dark: #0b5f59;
      --aux-teal-soft: #e9f7f4;
      --aux-gold: #b7791f;
      --aux-gold-dark: #7a4f14;
      --aux-gold-soft: #fff5e3;
      --ink: #17263a;
      --text: #4a5a6c;
      --muted: #66758a;
      --line: #dce4ee;
      --line-strong: #c6d2e0;
      --paper: #ffffff;
      --soft: #f6f8fb;
      --soft-2: #edf2f7;
      --accent-soft: #eaf2ff;
      --teal: var(--brand);
      --teal-dark: var(--brand-dark);
      --blue: var(--brand);
      --blue-dark: var(--brand-dark);
      --navy: #0b2b4f;
      --lime: #60758a;
      --sage-deep: #5e7188;
      --sage-dark: #3f556d;
      --amber: var(--aux-gold);
      --sky: #eef3fa;
      --shadow-sm: 0 10px 24px rgba(11, 43, 79, .06);
      --shadow: 0 18px 48px rgba(11, 43, 79, .09);
      --radius: 14px;
      --max: 1180px;
    }

    .diag-sme, .diag-sme *{
      box-sizing: border-box;
    }

    .diag-sme{
      scroll-behavior: smooth;
    }

    .diag-sme [id]{
      scroll-margin-top: 88px;
    }

    .diag-sme [hidden]{
      display: none !important;
    }

    .diag-sme{
      margin: 0;
      color: var(--ink);
      font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
      line-height: 1.7;
      background: var(--paper);
      letter-spacing: 0;
    }

    .diag-sme a{
      color: inherit;
      text-decoration: none;
    }

    .diag-sme a:focus-visible,.diag-sme button:focus-visible,.diag-sme summary:focus-visible{
      outline: 3px solid rgba(0, 127, 189, .32);
      outline-offset: 3px;
    }

    .diag-sme img{
      display: block;
      max-width: 100%;
    }

    .diag-sme .container{
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .diag-sme .page-nav{
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(205, 234, 243, .92);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 8px 24px rgba(17, 72, 111, .08);
      backdrop-filter: blur(16px);
    }

    .diag-sme .page-nav-inner{
      display: flex;
      min-height: 68px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .diag-sme .brand{
      flex: 0 0 auto;
      color: var(--navy);
      font-weight: 900;
      letter-spacing: -.01em;
    }

    .diag-sme .brand span{
      color: var(--teal-dark);
    }

    .diag-sme .page-nav-links{
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
    }

    .diag-sme .page-nav-links > a:not(.btn){
      padding: 9px 11px;
      border-radius: 8px;
      color: #465a70;
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .diag-sme .page-nav-links > a:not(.btn):hover,.diag-sme .page-nav-links > a:not(.btn):focus-visible{
      color: var(--teal-dark);
      background: #eaf8fb;
    }

    .diag-sme .page-nav .btn{
      min-height: 42px;
      margin-left: 8px;
      padding-inline: 15px;
      font-size: 14px;
    }

    .diag-sme .btn{
      position: relative;
      overflow: hidden;
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 18px;
      border: 0;
      border-radius: 8px;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .diag-sme .btn svg{
      flex: 0 0 auto;
    }

    .diag-sme .btn-primary{
      isolation: isolate;
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      box-shadow: 0 12px 26px rgba(11, 122, 106, .22);
    }

    .diag-sme .btn-primary::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 50% 115%, rgba(255, 255, 255, .32), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 48%);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none;
    }

    .diag-sme .btn-primary:hover,.diag-sme .btn-primary:focus-visible{
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 16px 34px rgba(11, 122, 106, .28), 0 0 0 4px rgba(11, 122, 106, .10);
      outline: none;
    }

    .diag-sme .btn-primary:hover::before,.diag-sme .btn-primary:focus-visible::before{
      opacity: 1;
      transform: translateY(0);
    }

    .diag-sme .btn-label{
      position: relative;
      z-index: 1;
    }

    .diag-sme .btn-primary svg{
      position: relative;
      z-index: 1;
      transition: transform .22s ease;
    }

    .diag-sme .btn-primary:hover svg,.diag-sme .btn-primary:focus-visible svg{
      transform: translateX(4px);
    }

    .diag-sme .btn-primary:active{
      transform: translateY(0) scale(.99);
      box-shadow: 0 8px 18px rgba(11, 122, 106, .22);
    }

    .diag-sme .btn-secondary{
      color: var(--teal-dark);
      background: #e6f8fa;
      box-shadow: none;
    }

    .diag-sme .btn-secondary:hover,.diag-sme .btn-secondary:focus-visible{
      transform: translateY(-2px);
      color: var(--navy);
      background: #dff6ff;
      box-shadow: 0 10px 22px rgba(0, 160, 233, .12);
      outline: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme{
        scroll-behavior: auto;
      }

      .diag-sme, .diag-sme *,.diag-sme *::before,.diag-sme *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }

      .diag-sme .btn,.diag-sme .btn-primary::before,.diag-sme .btn-primary svg{
        transition: none;
      }

      .diag-sme .btn-primary:hover,.diag-sme .btn-primary:focus-visible,.diag-sme .btn-primary:active{
        transform: none;
      }
    }

    .diag-sme .hero{
      position: relative;
      min-height: 560px;
      overflow: hidden;
      color: var(--navy);
      background:
        linear-gradient(90deg, rgba(246, 251, 255, .98) 0%, rgba(246, 251, 255, .92) 42%, rgba(246, 251, 255, .34) 78%, rgba(246, 251, 255, .08) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .hero::after{
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 120px;
      background: linear-gradient(180deg, rgba(244, 248, 251, 0), var(--soft));
      pointer-events: none;
    }

    .diag-sme .hero-inner{
      position: relative;
      z-index: 1;
      display: grid;
      min-height: 560px;
      align-items: center;
      padding: 42px 0 44px;
    }

    .diag-sme .hero-copy{
      width: min(720px, 100%);
    }

    .diag-sme .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--teal-dark);
      font-size: 15px;
      font-weight: 800;
    }

    .diag-sme .eyebrow::before{
      content: "";
      width: 36px;
      height: 2px;
      background: var(--blue);
    }

    .diag-sme .hero h1{
      margin: 0;
      font-size: 54px;
      line-height: 1.14;
      font-weight: 900;
    }

    .diag-sme .hero h1 span{
      color: var(--teal);
    }

    .diag-sme .hero p{
      width: min(660px, 100%);
      margin: 18px 0 0;
      color: #4e6074;
      font-size: 19px;
    }

    .diag-sme .hero-actions{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 26px;
    }

    .diag-sme .hero-actions .btn{
      min-height: 56px;
      padding-inline: 22px;
    }

    .diag-sme .hero-metrics{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      width: min(620px, 100%);
      margin-top: 22px;
    }

    .diag-sme .metric{
      min-height: 70px;
      padding: 12px 14px;
      border: 1px solid #cdeaf3;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 14px 34px rgba(27, 104, 142, .12);
      backdrop-filter: blur(12px);
    }

    .diag-sme .metric strong{
      display: block;
      color: var(--teal-dark);
      font-size: 27px;
      line-height: 1;
    }

    .diag-sme .metric span{
      display: block;
      margin-top: 6px;
      color: #65778b;
      font-size: 14px;
      line-height: 1.5;
    }

    .diag-sme .section{
      padding: 92px 0;
    }

    .diag-sme #body{
      padding-top: 50px;
    }

    .diag-sme .section.soft{
      background: var(--soft);
    }

    .diag-sme .section.alt{
      background: #eef7f5;
    }

    .diag-sme .section-head{
      display: grid;
      grid-template-columns: minmax(0, .94fr) minmax(280px, .56fr);
      align-items: end;
      gap: 36px;
      margin-bottom: 42px;
    }

    .diag-sme .section-kicker{
      margin: 0 0 12px;
      color: var(--teal-dark);
      font-size: 15px;
      font-weight: 900;
    }

    .diag-sme .section-title{
      margin: 0;
      font-size: 38px;
      line-height: 1.25;
      font-weight: 900;
      color: var(--navy);
    }

    .diag-sme .section-title span{
      color: var(--teal);
    }

    .diag-sme .section-note{
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }

    .diag-sme .body-copy{
      margin: 0;
      color: #3d4c5f;
      font-size: 18px;
    }

    .diag-sme .body-tabs{
      display: inline-grid;
      grid-template-columns: repeat(2, minmax(156px, 1fr));
      gap: 8px;
      padding: 8px;
      border: 1px solid #cdeaf3;
      border-radius: 8px;
      background: rgba(255, 255, 255, .76);
      box-shadow: 0 12px 30px rgba(28, 104, 142, .08);
    }

    .diag-sme .body-tabs button{
      min-height: 54px;
      padding: 8px 16px;
      border: 0;
      border-radius: 8px;
      color: #536276;
      background: transparent;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .diag-sme .body-tabs button span,.diag-sme .chart-tabs button span{
      display: block;
      line-height: 1.2;
    }

    .diag-sme .body-tabs button small,.diag-sme .chart-tabs button small{
      display: block;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 800;
      opacity: .72;
    }

    .diag-sme .body-tabs button.active{
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      box-shadow: 0 10px 24px rgba(0, 160, 233, .24);
    }

    .diag-sme .body-tabs button[aria-selected="false"]:focus-visible,.diag-sme .chart-tabs button[aria-selected="false"]:focus-visible{
      color: var(--teal-dark);
      background: #eaf8fb;
    }

    .diag-sme .body-tabs button:hover{
      transform: translateY(-1px);
    }

    .diag-sme .dual-grid{
      display: block;
      margin-top: 22px;
    }

    .diag-sme .pillar[hidden]{
      display: none;
    }

    .diag-sme .pillar{
      border: 1px solid #cdeaf3;
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      box-shadow: 0 16px 36px rgba(27, 104, 142, .1);
      animation: panelIn .35s ease both;
    }

    .diag-sme .pillar-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 92px;
      padding: 22px 24px;
      color: #fff;
      background:
        radial-gradient(circle at 86% 20%, rgba(140, 198, 63, .42), transparent 28%),
        linear-gradient(135deg, var(--blue), var(--teal-dark));
    }

    .diag-sme .pillar.digital .pillar-header{
      background:
        radial-gradient(circle at 86% 20%, rgba(255, 177, 31, .42), transparent 28%),
        linear-gradient(135deg, var(--teal), #106fbd);
    }

    .diag-sme .pillar-header h3{
      margin: 0;
      font-size: 28px;
      line-height: 1.2;
    }

    .diag-sme .pillar-header h3 span{
      color: #fff6a4;
    }

    .diag-sme .pillar-header p{
      margin: 6px 0 0;
      color: rgba(255, 255, 255, .78);
      font-weight: 700;
    }

    .diag-sme .pillar-badge{
      display: grid;
      width: 58px;
      height: 58px;
      place-items: center;
      border-radius: 8px;
      background: rgba(255, 255, 255, .16);
      font-size: 26px;
      font-weight: 900;
    }

    .diag-sme .dimension-list{
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      padding: 16px;
      background: linear-gradient(180deg, #f8fcff, #eef8fb);
    }

    .diag-sme .dimension{
      position: relative;
      min-height: 194px;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      padding: 18px;
      border: 1px solid #d9edf4;
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 8px 20px rgba(27, 104, 142, .06);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .diag-sme .dimension::after{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(0, 160, 233, .1), rgba(0, 169, 157, .12));
      opacity: 0;
      transition: opacity .22s ease;
      pointer-events: none;
    }

    .diag-sme .dimension:hover{
      transform: translateY(-5px);
      border-color: rgba(0, 160, 233, .42);
      box-shadow: 0 18px 34px rgba(27, 104, 142, .13);
    }

    .diag-sme .dimension:hover::after{
      opacity: 1;
    }

    .diag-sme .dimension-icon{
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 8px;
      color: var(--teal-dark);
      background: #e6f8fa;
      font-weight: 900;
    }

    .diag-sme .pillar.physical .dimension-icon{
      color: var(--blue);
      background: #e7f7ff;
    }

    .diag-sme .dimension h4{
      margin: 0;
      font-size: 19px;
      line-height: 1.35;
      color: var(--navy);
    }

    .diag-sme .dimension .en{
      min-height: 18px;
      margin: 3px 0 10px;
      overflow: hidden;
      color: #8796a7;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .diag-sme .dimension ul,.diag-sme .plain-list{
      margin: 0;
      padding-left: 1.15em;
      color: #536276;
      font-size: 14px;
    }

    .diag-sme .dimension li + li,.diag-sme .plain-list li + li{
      margin-top: 4px;
    }

    @keyframes panelIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .diag-sme .report-grid{
      display: block;
    }

    .diag-sme .steps-flow{
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 28px;
    }

    .diag-sme .steps-flow::before{
      content: "";
      position: absolute;
      top: 39px;
      right: 8%;
      left: 8%;
      height: 2px;
      background: linear-gradient(90deg, var(--teal), var(--blue), var(--lime));
      opacity: .28;
    }

    .diag-sme .flow-step{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      min-height: 92px;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid #cfe6ef;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 10px 24px rgba(27, 104, 142, .07);
    }

    .diag-sme .flow-step strong{
      display: grid;
      width: 50px;
      height: 50px;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      line-height: 1;
    }

    .diag-sme .flow-step span{
      font-size: 16px;
      font-weight: 900;
      color: var(--navy);
    }

    .diag-sme .report-panel{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .diag-sme .report-panel-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 22px 24px;
      background:
        radial-gradient(circle at 90% 10%, rgba(140, 198, 63, .18), transparent 28%),
        linear-gradient(135deg, #f3fbff, #e8f8fb);
      color: var(--navy);
      border-bottom: 1px solid #cdeaf3;
    }

    .diag-sme .report-panel-header h3{
      margin: 0;
      font-size: 24px;
      white-space: nowrap;
    }

    .diag-sme .report-panel-header > strong{
      display: grid;
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      place-items: center;
      margin-left: auto;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      box-shadow: 0 8px 18px rgba(0, 127, 189, .16);
    }

    .diag-sme .tag-row{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .diag-sme .tag{
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 4px 10px;
      border-radius: 8px;
      color: var(--teal-dark);
      background: #dff7fb;
      font-size: 13px;
      font-weight: 900;
    }

    .diag-sme .report-body{
      padding: 24px;
    }

    .diag-sme .quadrant-figure{
      margin: 0;
      padding: 12px;
      border: 1px solid #d9edf4;
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 10px 24px rgba(27, 104, 142, .06);
    }

    .diag-sme .quadrant-image{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
    }

    .diag-sme .report-note{
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .diag-sme .subsection-heading{
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 34px;
    }

    .diag-sme .subsection-heading > strong,.diag-sme .consult-step-badge{
      display: grid;
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      box-shadow: 0 10px 22px rgba(0, 127, 189, .18);
    }

    .diag-sme .subsection-heading .section-kicker{
      margin-bottom: 2px;
    }

    .diag-sme .subsection-heading h3{
      margin: 0;
      color: var(--navy);
      font-size: 24px;
      line-height: 1.35;
    }

    .diag-sme .recommendations{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
    }

    .diag-sme .recommendation{
      min-height: 330px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, #fff, #f8fcff);
      box-shadow: 0 10px 24px rgba(27, 104, 142, .06);
    }

    .diag-sme .recommendation-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .diag-sme .quadrant-mini{
      display: grid;
      flex: 0 0 auto;
      width: 62px;
      height: 62px;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
      padding: 5px;
      border: 1px solid #d8eaf2;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(27, 104, 142, .08);
    }

    .diag-sme .quadrant-mini span{
      border-radius: 5px;
      background: #edf4f7;
    }

    .diag-sme .recommendation[data-quadrant="leader"] .quadrant-mini span:nth-child(2),.diag-sme .recommendation[data-quadrant="challenger"] .quadrant-mini span:nth-child(1),.diag-sme .recommendation[data-quadrant="explorer"] .quadrant-mini span:nth-child(3),.diag-sme .recommendation[data-quadrant="ready"] .quadrant-mini span:nth-child(4){
      background: linear-gradient(135deg, var(--teal), var(--lime));
    }

    .diag-sme .recommendation h4{
      margin: 0;
      color: var(--navy);
      font-size: 18px;
    }

    .diag-sme .recommendation p{
      margin: 0;
      color: #536276;
      font-size: 14px;
    }

    .diag-sme .chart-tabs{
      position: relative;
      z-index: 2;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 34px 0 -1px;
      padding: 8px 8px 0;
      border: 1px solid #cdeaf3;
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      background: #f4fbff;
    }

    .diag-sme .chart-tabs button{
      position: relative;
      min-width: 150px;
      min-height: 58px;
      padding: 9px 18px 12px;
      border: 1px solid #cdeaf3;
      border-radius: 8px 8px 0 0;
      color: #536276;
      background: #fff;
      font-weight: 900;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .diag-sme .chart-tabs button.active{
      color: #fff;
      border-color: var(--blue);
      background: linear-gradient(135deg, var(--blue), var(--teal));
      transform: translateY(1px);
    }

    .diag-sme .chart-tabs button.active::after{
      content: "";
      position: absolute;
      left: 50%;
      bottom: -9px;
      width: 16px;
      height: 16px;
      transform: translateX(-50%) rotate(45deg);
      background: var(--teal);
      border-radius: 2px;
    }

    .diag-sme .chart-tabs button:not(.active):hover{
      color: var(--teal-dark);
      background: #eaf8fb;
      transform: translateY(-1px);
    }

    .diag-sme .chart-tabs + .report-panel{
      border-color: #cdeaf3;
      border-top-left-radius: 0;
      box-shadow: 0 18px 42px rgba(27, 104, 142, .12);
    }

    .diag-sme .chart-layout{
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 18px;
      align-items: stretch;
    }

    .diag-sme .score-table,.diag-sme .radar-card{
      min-height: 310px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .diag-sme .score-row{
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px 72px;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eef3f7;
      color: #536276;
      font-weight: 800;
    }

    .diag-sme .score-row:last-child{
      border-bottom: 0;
    }

    .diag-sme .score-row span:nth-child(n+2){
      color: var(--navy);
      text-align: right;
    }

    .diag-sme .score-head{
      color: #7b8b9d;
      font-size: 12px;
      font-weight: 900;
    }

    .diag-sme .score-head span:first-child{
      color: #7b8b9d;
    }

    .diag-sme .score-row .company-score{
      color: var(--teal-dark);
    }

    .diag-sme .score-row .benchmark-score{
      color: var(--blue);
    }

    .diag-sme .radar-wrap{
      display: grid;
      min-height: 270px;
      grid-template-columns: minmax(210px, .9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: 18px;
    }

    .diag-sme .radar-plot{
      position: relative;
      width: min(240px, 100%);
      aspect-ratio: 1;
      margin: auto;
    }

    .diag-sme .radar-grid,.diag-sme .radar-benchmark,.diag-sme .radar-company{
      position: absolute;
      inset: 12%;
      clip-path: polygon(50% 0%, 97.55% 34.55%, 79.39% 90.45%, 20.61% 90.45%, 2.45% 34.55%);
    }

    .diag-sme .radar-grid{
      border: 1px solid #cfe0e9;
      background:
        repeating-radial-gradient(circle at center, transparent 0 17%, rgba(0, 127, 189, .12) 18% 19%, transparent 20% 34%);
      box-shadow: inset 0 0 0 1px rgba(0, 127, 189, .08);
    }

    .diag-sme .radar-benchmark,.diag-sme .radar-company{
      inset: 0;
    }

    .diag-sme .radar-benchmark{
      background: rgba(0, 127, 189, .22);
      clip-path: var(--benchmark-shape);
      outline: 2px solid rgba(0, 127, 189, .72);
    }

    .diag-sme .radar-company{
      background: rgba(140, 198, 63, .34);
      clip-path: var(--company-shape);
      outline: 2px solid rgba(75, 139, 28, .82);
    }

    .diag-sme .radar-labels{
      display: grid;
      gap: 10px;
      color: #536276;
      font-size: 13px;
      font-weight: 800;
    }

    .diag-sme .radar-labels span{
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .diag-sme .radar-labels span::before{
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: var(--lime);
    }

    .diag-sme .radar-labels .benchmark-label::before{
      border: 1px dashed #7d8fa0;
      background: #e4ebf0;
    }

    .diag-sme .radar-caption{
      grid-column: 1 / -1;
      margin: 0;
      color: #7b8b9d;
      font-size: 12px;
    }

    .diag-sme .bars{
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .diag-sme .bar{
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      color: var(--muted);
      font-weight: 800;
      font-size: 14px;
    }

    .diag-sme .bar-track{
      height: 12px;
      border-radius: 999px;
      background: #e6edf3;
      overflow: hidden;
    }

    .diag-sme .bar-fill{
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--teal), var(--lime));
    }

    .diag-sme .consult-panel{
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(320px, 1.14fr);
      gap: 28px;
      align-items: center;
      margin-top: 28px;
      padding: 28px;
      border-radius: var(--radius);
      color: var(--navy);
      background:
        linear-gradient(90deg, rgba(246, 251, 255, .98) 0%, rgba(225, 248, 251, .88) 54%, rgba(225, 248, 251, .58) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
      border: 1px solid #cdeaf3;
      box-shadow: 0 18px 42px rgba(27, 104, 142, .12);
    }

    .diag-sme .consult-panel h3{
      margin: 0;
      font-size: 28px;
      line-height: 1.3;
    }

    .diag-sme .consult-step-badge{
      margin-bottom: 18px;
      background: linear-gradient(135deg, var(--lime), var(--teal));
    }

    .diag-sme .consult-panel p{
      margin: 12px 0 0;
      color: #536276;
    }

    .diag-sme .consult-copy{
      max-width: 440px;
      font-size: 18px;
      font-weight: 800;
    }

    .diag-sme .consult-visual{
      display: grid;
      gap: 12px;
    }

    .diag-sme .consult-line{
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 10px 24px rgba(27, 104, 142, .08);
    }

    .diag-sme .consult-line b{
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 8px;
      color: var(--navy);
      background: #b7f05a;
    }

    .diag-sme .consult-line span{
      color: #385069;
      font-weight: 800;
    }

    .diag-sme .kpi-band{
      position: relative;
      overflow: hidden;
      color: var(--navy);
      background:
        linear-gradient(90deg, rgba(246, 251, 255, .98) 0%, rgba(246, 251, 255, .92) 52%, rgba(246, 251, 255, .78) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .kpi-band::before{
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 160, 233, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 160, 233, .08) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(90deg, #000, transparent 78%);
      pointer-events: none;
    }

    .diag-sme .kpi-band .container{
      position: relative;
      z-index: 1;
    }

    .diag-sme .kpi-layout{
      display: grid;
      gap: 30px;
    }

    .diag-sme .kpi-layout h2{
      margin: 0;
      font-size: 42px;
      line-height: 1.25;
    }

    .diag-sme .kpi-layout p{
      margin: 16px 0 0;
      color: #536276;
      font-size: 18px;
    }

    .diag-sme .kpi-footnote{
      margin-top: 18px;
      color: #7a899a;
      font-size: 13px;
    }

    .diag-sme .kpi-intro{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
      gap: 34px;
      align-items: end;
    }

    .diag-sme .kpi-copy{
      max-width: 660px;
    }

    .diag-sme .role-panel{
      padding: 30px;
      border: 1px solid #cdeaf3;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 18px 46px rgba(27, 104, 142, .12);
      backdrop-filter: blur(14px);
    }

    .diag-sme .role-panel h3{
      margin: 0;
      font-size: 30px;
    }

    .diag-sme .role-panel-head{
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 22px;
    }

    .diag-sme .role-panel-head p{
      max-width: 410px;
      margin: 0;
      color: #536276;
      font-size: 16px;
      text-align: right;
    }

    .diag-sme .role-panel-head > div p{
      margin-top: 8px;
      text-align: left;
    }

    .diag-sme .role-cards{
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }

    .diag-sme .role-card{
      position: relative;
      min-height: 210px;
      padding: 22px;
      border: 1px solid #d9edf4;
      border-radius: var(--radius);
      background: linear-gradient(180deg, #fff, #f3fbff);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .diag-sme .role-card::before{
      content: "";
      position: absolute;
      right: -28px;
      top: -28px;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background: rgba(0, 160, 233, .12);
      transition: transform .22s ease, background .22s ease;
    }

    .diag-sme .role-card:hover{
      transform: translateY(-5px);
      border-color: rgba(0, 160, 233, .42);
      box-shadow: 0 16px 30px rgba(27, 104, 142, .13);
    }

    .diag-sme .role-card:hover::before{
      transform: scale(1.55);
      background: rgba(0, 169, 157, .14);
    }

    .diag-sme .role-icon{
      position: relative;
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--teal));
      font-size: 21px;
      font-weight: 900;
    }

    .diag-sme .role-card p{
      position: relative;
      margin: 22px 0 12px;
      color: var(--navy);
      font-size: 18px;
      font-weight: 900;
      line-height: 1.45;
    }

    .diag-sme .role-card strong{
      position: relative;
      display: inline-flex;
      color: var(--teal-dark);
      font-size: 15px;
      line-height: 1.3;
    }

    .diag-sme .role-stats{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .diag-sme .role-stat{
      min-height: 126px;
      padding: 22px;
      border: 1px solid #e1eff5;
      border-radius: var(--radius);
      color: var(--navy);
      background: #fff;
      box-shadow: 0 12px 28px rgba(27, 104, 142, .08);
    }

    .diag-sme .role-stat strong{
      display: block;
      color: var(--blue-dark);
      font-size: 36px;
      line-height: 1;
    }

    .diag-sme .role-stat span{
      display: block;
      margin-top: 7px;
      color: var(--navy);
      font-weight: 800;
    }

    .diag-sme .role-stat small{
      display: block;
      margin-top: 4px;
      color: #65778b;
      font-size: 13px;
      line-height: 1.45;
    }

    .diag-sme .testimonial-carousel{
      position: relative;
      overflow: hidden;
      border: 1px solid #cdeaf3;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .diag-sme .testimonial-stage{
      min-height: 380px;
      padding: 52px min(7vw, 78px);
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .28) 76%, rgba(255, 255, 255, .04) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .testimonial{
      display: flex;
      width: min(650px, 68%);
      min-height: 276px;
      flex-direction: column;
      justify-content: space-between;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .diag-sme .process-card:hover{
      transform: translateY(-5px);
      border-color: rgba(0, 160, 233, .36);
      box-shadow: 0 18px 36px rgba(27, 104, 142, .13);
    }

    .diag-sme .testimonial h3{
      margin: 0 0 12px;
      color: var(--teal-dark);
      font-size: 30px;
    }

    .diag-sme .testimonial p{
      margin: 0;
      color: #405269;
      font-size: 17px;
    }

    .diag-sme .testimonial footer{
      margin-top: 18px;
      color: var(--navy);
      font-weight: 900;
    }

    .diag-sme .testimonial footer::before{
      content: "— ";
      color: var(--teal);
    }

    .diag-sme .carousel-controls{
      display: flex;
      min-height: 72px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 12px 20px;
      border-top: 1px solid #d9edf4;
      background: #f8fcff;
    }

    .diag-sme .carousel-button{
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid #cdeaf3;
      border-radius: 50%;
      color: var(--teal-dark);
      background: #fff;
      font: inherit;
      font-size: 22px;
      font-weight: 900;
      cursor: pointer;
    }

    .diag-sme .carousel-button:hover,.diag-sme .carousel-button:focus-visible{
      color: #fff;
      background: var(--teal-dark);
    }

    .diag-sme .carousel-status{
      min-width: 66px;
      color: #65778b;
      text-align: center;
      font-size: 14px;
      font-weight: 900;
    }

    .diag-sme .pricing-view{
      display: grid;
      grid-template-columns: minmax(0, 1.14fr) minmax(280px, .86fr);
      gap: 24px;
      align-items: stretch;
    }

    .diag-sme .plan{
      position: relative;
      overflow: hidden;
      display: flex;
      min-height: 360px;
      flex-direction: column;
      justify-content: space-between;
      padding: 28px;
      border: 1px solid #cdeaf3;
      border-radius: var(--radius);
      color: var(--navy);
      background:
        radial-gradient(circle at 88% 12%, rgba(0, 160, 233, .18), transparent 28%),
        linear-gradient(180deg, #fff, #f1fbff);
      box-shadow: var(--shadow);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .diag-sme .plan:hover{
      transform: translateY(-4px);
      border-color: rgba(0, 160, 233, .36);
      box-shadow: 0 18px 36px rgba(27, 104, 142, .13);
    }

    .diag-sme .plan.recommended{
      min-height: 392px;
      border: 2px solid rgba(0, 169, 157, .46);
      background:
        radial-gradient(circle at 90% 8%, rgba(0, 160, 233, .24), transparent 28%),
        linear-gradient(135deg, #fff 0%, #f3fcff 54%, #e7f8fb 100%);
      box-shadow: 0 24px 58px rgba(0, 160, 233, .16);
      transform: translateY(-8px);
    }

    .diag-sme .plan.recommended::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 169, 157, .08), rgba(255, 255, 255, 0) 46%);
      pointer-events: none;
    }

    .diag-sme .plan.recommended:hover{
      transform: translateY(-12px);
      border-color: rgba(0, 169, 157, .64);
      box-shadow: 0 30px 68px rgba(0, 160, 233, .2);
    }

    .diag-sme .plan.plus{
      min-height: 344px;
      margin-top: 26px;
      border-color: rgba(205, 234, 243, .86);
      background:
        radial-gradient(circle at 88% 12%, rgba(140, 198, 63, .15), transparent 28%),
        linear-gradient(135deg, #f8fdff, #eef8f7);
      box-shadow: 0 12px 28px rgba(27, 104, 142, .08);
    }

    .diag-sme .plan.plus:hover{
      transform: translateY(0);
      box-shadow: 0 16px 32px rgba(27, 104, 142, .11);
    }

    .diag-sme .plan > *{
      position: relative;
      z-index: 1;
    }

    .diag-sme .plan-header{
      display: flex;
      gap: 16px;
      align-items: flex-start;
      justify-content: space-between;
    }

    .diag-sme .plan-badge{
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      margin: 0 0 14px;
      padding: 0 12px;
      border-radius: 999px;
      color: var(--teal-dark);
      background: #e6f8fa;
      font-size: 14px;
      font-weight: 900;
    }

    .diag-sme .plan.recommended .plan-badge{
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      box-shadow: 0 10px 22px rgba(0, 160, 233, .18);
    }

    .diag-sme .plan-plus-label{
      color: #5d8332;
      background: #eff8e8;
    }

    .diag-sme .plan h3{
      margin: 0;
      font-size: 34px;
      line-height: 1.2;
    }

    .diag-sme .plan-note{
      margin: 14px 0 0;
      color: #536276;
      font-weight: 800;
    }

    .diag-sme .plan.recommended .plan-note{
      color: var(--teal-dark);
    }

    .diag-sme .plan ul{
      display: grid;
      gap: 12px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .diag-sme .plan li{
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 10px;
      border: 1px solid #d9edf4;
      border-radius: 8px;
      background: rgba(255, 255, 255, .78);
      font-weight: 800;
    }

    .diag-sme .plan li::before{
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--lime);
    }

    .diag-sme .plan.recommended li{
      border-color: rgba(0, 169, 157, .24);
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 8px 18px rgba(27, 104, 142, .06);
    }

    .diag-sme .plan.plus li{
      color: #536276;
      background: rgba(255, 255, 255, .68);
    }

    .diag-sme .plan.plus .btn-secondary{
      border: 1px solid rgba(0, 169, 157, .22);
      background: rgba(255, 255, 255, .82);
    }

    .diag-sme .process-grid{
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      counter-reset: step;
    }

    .diag-sme .process-card{
      position: relative;
      min-height: 208px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 10px 24px rgba(27, 62, 93, .07);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .diag-sme .process-card::after{
      content: "";
      position: absolute;
      top: 38px;
      right: -15px;
      width: 15px;
      height: 2px;
      background: var(--teal);
      opacity: .32;
    }

    .diag-sme .process-card:last-child::after{
      display: none;
    }

    .diag-sme .process-card strong{
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      padding: 0 10px;
      border-radius: 8px;
      color: #fff;
      background: var(--teal);
      font-size: 13px;
    }

    .diag-sme .process-card h3{
      margin: 20px 0 0;
      font-size: 20px;
      line-height: 1.35;
      color: var(--navy);
    }

    .diag-sme .process-card p{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .diag-sme .process-card .nowrap-note{
      font-size: 13px;
      white-space: nowrap;
    }

    .diag-sme .process-cta{
      display: grid;
      min-height: 160px;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      margin-top: 24px;
      padding: 28px;
      border: 1px solid #cdeaf3;
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .22) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center right / cover no-repeat;
      box-shadow: 0 14px 34px rgba(27, 104, 142, .1);
    }

    .diag-sme .process-cta strong,.diag-sme .process-cta span{
      display: block;
    }

    .diag-sme .process-cta strong{
      color: var(--navy);
      font-size: 24px;
    }

    .diag-sme .process-cta .btn{
      min-height: 54px;
      padding-inline: 22px;
    }

    .diag-sme .process-cta div > span{
      margin-top: 6px;
      color: #536276;
    }

    .diag-sme .faq-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 14px;
    }

    .diag-sme details{
      align-self: start;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 8px 18px rgba(27, 62, 93, .05);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .diag-sme details[open]{
      border-color: rgba(15, 143, 140, .45);
      box-shadow: 0 14px 30px rgba(27, 104, 142, .11);
      transform: scale(1.01);
    }

    .diag-sme summary{
      display: grid;
      grid-template-columns: minmax(0, 1fr) 28px;
      gap: 14px;
      align-items: center;
      min-height: 72px;
      padding: 18px 20px;
      color: var(--navy);
      font-weight: 900;
      cursor: pointer;
      list-style: none;
    }

    .diag-sme summary::-webkit-details-marker{
      display: none;
    }

    .diag-sme summary::after{
      content: "+";
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 8px;
      color: var(--teal-dark);
      background: #e1f5f2;
      font-size: 20px;
      line-height: 1;
    }

    .diag-sme details[open] summary::after{
      content: "-";
    }

    .diag-sme details p{
      margin: 0;
      padding: 0 20px 20px;
      color: #536276;
    }

    .diag-sme details p a{
      color: var(--teal-dark);
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .diag-sme .final-cta{
      padding: 70px 0;
      color: var(--navy);
      background:
        linear-gradient(110deg, rgba(246, 251, 255, .98), rgba(232, 248, 251, .86)),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
      border-top: 1px solid #cdeaf3;
    }

    .diag-sme .final-cta-inner{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
    }

    .diag-sme .final-cta p{
      margin: 0 0 8px;
      color: var(--teal-dark);
      font-weight: 900;
    }

    .diag-sme .final-cta h2{
      margin: 0;
      font-size: 38px;
      line-height: 1.25;
    }

    .diag-sme .site-footer{
      padding: 26px 0;
      color: #617184;
      background: #fff;
      border-top: 1px solid var(--line);
      font-size: 14px;
    }

    .diag-sme .mobile-only{
      display: none;
    }

    /* Base component theme; final emerald-indigo palette is applied below. */
    .diag-sme{
      color: var(--ink);
      background: var(--paper);
    }

    .diag-sme a:focus-visible,.diag-sme button:focus-visible,.diag-sme summary:focus-visible{
      outline-color: rgba(25, 118, 210, .34);
    }

    .diag-sme .page-nav{
      border-color: var(--line);
      box-shadow: 0 8px 24px rgba(21, 50, 75, .07);
    }

    .diag-sme .page-nav-links > a:not(.btn){
      color: var(--text);
    }

    .diag-sme .page-nav-links > a:not(.btn):hover,.diag-sme .page-nav-links > a:not(.btn):focus-visible{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .btn-primary{
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      box-shadow: 0 12px 26px rgba(11, 122, 106, .22);
    }

    .diag-sme .btn-primary:hover,.diag-sme .btn-primary:focus-visible{
      box-shadow: 0 16px 34px rgba(11, 122, 106, .28), 0 0 0 4px rgba(11, 122, 106, .10);
    }

    .diag-sme .btn-primary:active{
      box-shadow: 0 8px 18px rgba(11, 122, 106, .22);
    }

    .diag-sme .btn-secondary{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .btn-secondary:hover,.diag-sme .btn-secondary:focus-visible{
      color: var(--navy);
      background: var(--soft-2);
      box-shadow: var(--shadow-sm);
    }

    .diag-sme .hero{
      background:
        linear-gradient(90deg, rgba(246, 249, 250, .98) 0%, rgba(246, 249, 250, .92) 42%, rgba(246, 249, 250, .36) 78%, rgba(246, 249, 250, .08) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .hero::after{
      background: linear-gradient(180deg, rgba(246, 249, 250, 0), var(--soft));
    }

    .diag-sme .hero p,.diag-sme .body-copy,.diag-sme .section-note,.diag-sme .dimension ul,.diag-sme .plain-list,.diag-sme .recommendation p,.diag-sme .consult-panel p,.diag-sme .consult-line span,.diag-sme .kpi-layout p,.diag-sme .role-panel-head p,.diag-sme .testimonial p,.diag-sme .plan-note,.diag-sme .process-card p,.diag-sme details p{
      color: var(--text);
    }

    .diag-sme .section.soft{
      background: var(--soft);
    }

    .diag-sme .section.alt{
      background: var(--soft-2);
    }

    .diag-sme .metric,.diag-sme .body-tabs,.diag-sme .pillar,.diag-sme .dimension,.diag-sme .flow-step,.diag-sme .report-panel,.diag-sme .quadrant-figure,.diag-sme .recommendation,.diag-sme .score-table,.diag-sme .radar-card,.diag-sme .consult-panel,.diag-sme .role-panel,.diag-sme .role-card,.diag-sme .role-stat,.diag-sme .testimonial-carousel,.diag-sme .plan,.diag-sme .process-card,.diag-sme .process-cta,.diag-sme details{
      border-color: var(--line);
    }

    .diag-sme .metric,.diag-sme .body-tabs,.diag-sme .pillar,.diag-sme .report-panel,.diag-sme .consult-panel,.diag-sme .role-panel,.diag-sme .testimonial-carousel,.diag-sme .plan,.diag-sme .process-cta{
      box-shadow: var(--shadow);
    }

    .diag-sme .dimension,.diag-sme .flow-step,.diag-sme .recommendation,.diag-sme .role-card,.diag-sme .role-stat,.diag-sme .process-card,.diag-sme details{
      box-shadow: var(--shadow-sm);
    }

    .diag-sme .role-card{
      background: linear-gradient(180deg, #fff, var(--soft));
    }

    .diag-sme .body-tabs button.active,.diag-sme .chart-tabs button.active,.diag-sme .flow-step strong,.diag-sme .subsection-heading > strong,.diag-sme .report-panel-header > strong,.diag-sme .role-icon,.diag-sme .plan.recommended .plan-badge,.diag-sme .consult-step-badge{
      color: #fff;
      background: var(--teal);
      box-shadow: 0 10px 22px rgba(23, 118, 111, .18);
    }

    .diag-sme .chart-tabs button.active::after{
      background: var(--teal);
    }

    .diag-sme .body-tabs button[aria-selected="false"]:focus-visible,.diag-sme .chart-tabs button[aria-selected="false"]:focus-visible,.diag-sme .chart-tabs button:not(.active):hover{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .pillar-header{
      background:
        radial-gradient(circle at 88% 16%, rgba(120, 155, 136, .24), transparent 30%),
        linear-gradient(135deg, var(--blue), var(--blue-dark));
    }

    .diag-sme .pillar.digital .pillar-header{
      background:
        radial-gradient(circle at 88% 16%, rgba(212, 154, 70, .18), transparent 30%),
        linear-gradient(135deg, var(--teal), var(--teal-dark));
    }

    .diag-sme .pillar-header h3 span{
      color: #f4dfc6;
    }

    .diag-sme .pillar-header p{
      color: rgba(255, 255, 255, .94);
    }

    .diag-sme .dimension-list{
      background: linear-gradient(180deg, #fafcfc, var(--soft));
    }

    .diag-sme .dimension::after{
      background: linear-gradient(135deg, rgba(25, 118, 210, .07), rgba(23, 118, 111, .08));
    }

    .diag-sme .dimension:hover,.diag-sme .role-card:hover,.diag-sme .process-card:hover{
      border-color: var(--line-strong);
      box-shadow: 0 16px 32px rgba(21, 50, 75, .11);
    }

    .diag-sme .dimension-icon{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .pillar.physical .dimension-icon{
      color: var(--blue-dark);
      background: var(--sky);
    }

    .diag-sme .dimension .en,.diag-sme .score-head,.diag-sme .radar-caption,.diag-sme .kpi-footnote{
      color: var(--muted);
    }

    .diag-sme .steps-flow::before{
      background: var(--teal);
    }

    .diag-sme .report-panel-header{
      border-color: var(--line);
      background: var(--soft-2);
    }

    .diag-sme .tag{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .report-note,.diag-sme .metric span,.diag-sme .radar-labels,.diag-sme .process-card p,.diag-sme .site-footer{
      color: var(--muted);
    }

    .diag-sme .quadrant-figure{
      overflow-x: auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      scrollbar-color: var(--line-strong) transparent;
    }

    .diag-sme .quadrant-image{
      width: 100%;
      min-width: 720px;
      max-width: none;
      aspect-ratio: 900 / 610;
    }

    .diag-sme .recommendation{
      background: linear-gradient(180deg, #fff, var(--soft));
    }

    .diag-sme .recommendation[data-quadrant="challenger"] .quadrant-mini span:nth-child(1){
      background: var(--blue);
    }

    .diag-sme .recommendation[data-quadrant="leader"] .quadrant-mini span:nth-child(2){
      background: var(--teal);
    }

    .diag-sme .recommendation[data-quadrant="explorer"] .quadrant-mini span:nth-child(3){
      background: #536e82;
    }

    .diag-sme .recommendation[data-quadrant="ready"] .quadrant-mini span:nth-child(4){
      background: var(--sage-deep);
    }

    .diag-sme .radar-company{
      background: rgba(23, 118, 111, .24);
      outline-color: var(--teal);
    }

    .diag-sme .radar-grid{
      border-color: var(--line-strong);
      background:
        repeating-radial-gradient(circle at center, transparent 0 17%, rgba(25, 118, 210, .10) 18% 19%, transparent 20% 34%);
      box-shadow: inset 0 0 0 1px rgba(25, 118, 210, .06);
    }

    .diag-sme .radar-benchmark{
      background: rgba(97, 116, 130, .16);
      outline-color: rgba(97, 116, 130, .62);
    }

    .diag-sme .radar-labels span::before{
      background: var(--teal);
    }

    .diag-sme .consult-panel{
      background:
        linear-gradient(90deg, rgba(246, 249, 250, .98) 0%, rgba(234, 242, 243, .88) 54%, rgba(234, 242, 243, .58) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .consult-line b{
      color: var(--teal-dark);
      background: #ddebe2;
    }

    .diag-sme .kpi-band{
      background-color: #f7fbff;
      background-image:
        linear-gradient(90deg, rgba(247, 251, 255, .99) 0%, rgba(247, 251, 255, .96) 48%, rgba(247, 251, 255, .76) 66%, rgba(247, 251, 255, .18) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-kpi-challenges-bg.webp");
      background-position: center, 78% center;
      background-size: cover, cover;
      background-repeat: no-repeat;
    }

    .diag-sme .kpi-band::before{
      background: radial-gradient(circle at 8% 10%, rgba(25, 118, 210, .08), transparent 30%);
      mask-image: none;
    }

    .diag-sme .role-card::before{
      background: rgba(25, 118, 210, .10);
    }

    .diag-sme .role-card:hover::before{
      background: rgba(23, 118, 111, .12);
    }

    .diag-sme .role-stat strong{
      color: var(--blue-dark);
    }

    .diag-sme .role-card strong{
      color: var(--teal-dark);
    }

    .diag-sme .testimonial-stage{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .30) 76%, rgba(255, 255, 255, .05) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .carousel-controls,.diag-sme .chart-tabs{
      border-color: var(--line);
      background: var(--soft);
    }

    .diag-sme .carousel-button{
      border-color: var(--line-strong);
      color: var(--teal-dark);
    }

    .diag-sme .carousel-button:hover,.diag-sme .carousel-button:focus-visible{
      color: #fff;
      background: var(--teal-dark);
    }

    .diag-sme .plan{
      background: linear-gradient(180deg, #fff, var(--soft));
    }

    .diag-sme .plan.recommended{
      border-color: rgba(23, 118, 111, .42);
      background: linear-gradient(135deg, #fff 0%, var(--soft) 56%, var(--accent-soft) 100%);
      box-shadow: 0 24px 58px rgba(21, 50, 75, .12);
    }

    .diag-sme .plan.plus{
      background: linear-gradient(135deg, #fafcfc, #eef3f1);
    }

    .diag-sme .plan:hover{
      border-color: var(--line-strong);
      box-shadow: 0 18px 36px rgba(21, 50, 75, .11);
    }

    .diag-sme .plan.recommended::after{
      background: linear-gradient(90deg, rgba(23, 118, 111, .07), rgba(255, 255, 255, 0) 46%);
    }

    .diag-sme .plan.recommended:hover{
      border-color: rgba(23, 118, 111, .56);
      box-shadow: 0 28px 62px rgba(21, 50, 75, .14);
    }

    .diag-sme .plan.plus:hover{
      box-shadow: 0 16px 32px rgba(21, 50, 75, .10);
    }

    .diag-sme .plan.recommended li{
      border-color: rgba(23, 118, 111, .22);
      box-shadow: 0 8px 18px rgba(21, 50, 75, .05);
    }

    .diag-sme .plan.plus .btn-secondary{
      border-color: rgba(23, 118, 111, .20);
      background: rgba(255, 255, 255, .88);
    }

    .diag-sme .plan.plus > .btn{
      margin-top: 24px;
    }

    .diag-sme .plan-plus-label{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .bar-fill{
      background: linear-gradient(90deg, var(--blue), var(--teal));
    }

    .diag-sme .plan li::before{
      background: var(--teal);
    }

    .diag-sme .process-cta{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .90) 48%, rgba(255, 255, 255, .24) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center right / cover no-repeat;
    }

    .diag-sme details[open]{
      border-color: rgba(23, 118, 111, .42);
      box-shadow: 0 14px 30px rgba(21, 50, 75, .10);
    }

    .diag-sme summary::after{
      color: var(--teal-dark);
      background: var(--accent-soft);
    }

    .diag-sme .final-cta{
      background:
        linear-gradient(110deg, rgba(246, 249, 250, .98), rgba(234, 242, 243, .84)),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
      border-color: var(--line);
    }

    .diag-sme.fx main > section:not(.hero),.diag-sme.fx .site-footer{
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .diag-sme.fx main > section.is-visible,.diag-sme.fx .site-footer.is-visible{
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1080px) {
      .diag-sme .hero h1{
        font-size: 52px;
      }

      .diag-sme .section-head,.diag-sme .report-grid,.diag-sme .kpi-intro,.diag-sme .kpi-layout,.diag-sme .consult-panel{
        grid-template-columns: 1fr;
      }

      .diag-sme .recommendations{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .diag-sme .steps-flow{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .diag-sme .steps-flow::before{
        display: none;
      }

      .diag-sme .dimension-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .diag-sme .role-cards{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .diag-sme .pricing-view{
        grid-template-columns: 1fr;
      }

      .diag-sme .plan.recommended,.diag-sme .plan.recommended:hover,.diag-sme .plan.plus,.diag-sme .plan.plus:hover{
        margin-top: 0;
        transform: none;
      }

      .diag-sme .process-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .diag-sme .page-nav-inner{
        min-height: 58px;
        gap: 10px;
      }

      .diag-sme .page-nav-links{
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
      }

      .diag-sme .page-nav-links::-webkit-scrollbar{
        display: none;
      }

      .diag-sme .page-nav-links > a:not(.btn){
        padding-inline: 9px;
        font-size: 13px;
      }

      .diag-sme .page-nav .btn{
        min-height: 38px;
        margin-left: 2px;
        font-size: 13px;
      }

      .diag-sme .container{
        width: min(100% - 28px, var(--max));
      }

      .diag-sme .hero,.diag-sme .hero-inner{
        min-height: 600px;
      }

      .diag-sme .hero{
        background:
          linear-gradient(180deg, rgba(246, 249, 250, .98) 0%, rgba(246, 249, 250, .94) 58%, rgba(246, 249, 250, .70) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
      }

      .diag-sme .hero-inner{
        align-items: end;
        padding: 50px 0 48px;
      }

      .diag-sme .hero h1{
        font-size: 40px;
      }

      .diag-sme .hero p,.diag-sme .body-copy,.diag-sme .section-note,.diag-sme .kpi-layout p{
        font-size: 16px;
      }

      .diag-sme .hero-metrics,.diag-sme .kpi-intro,.diag-sme .role-stats,.diag-sme .pricing-view,.diag-sme .faq-grid,.diag-sme .final-cta-inner,.diag-sme .chart-layout,.diag-sme .process-cta{
        grid-template-columns: 1fr;
      }

      .diag-sme .hero-metrics{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 22px;
      }

      .diag-sme .metric{
        min-height: auto;
        padding: 14px 10px;
      }

      .diag-sme .metric strong{
        font-size: 30px;
      }

      .diag-sme .metric span{
        font-size: 12px;
      }

      .diag-sme .section{
        padding: 68px 0;
      }

      .diag-sme .section-title,.diag-sme .kpi-layout h2,.diag-sme .final-cta h2{
        font-size: 30px;
      }

      .diag-sme .role-panel h3,.diag-sme .consult-panel h3{
        font-size: 26px;
      }

      .diag-sme .role-panel{
        padding: 20px;
      }

      .diag-sme .role-panel-head{
        display: grid;
        gap: 10px;
      }

      .diag-sme .role-panel-head p{
        max-width: none;
        text-align: left;
      }

      .diag-sme .body-tabs,.diag-sme .chart-tabs{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      .diag-sme .chart-tabs{
        padding-right: 8px;
      }

      .diag-sme .chart-tabs button{
        min-width: 0;
        padding-inline: 10px;
      }

      .diag-sme .dimension-list,.diag-sme .role-cards{
        grid-template-columns: 1fr;
      }

      .diag-sme .role-card{
        min-height: auto;
      }

      .diag-sme .pillar-header{
        min-height: auto;
        padding: 18px;
      }

      .diag-sme .pillar-header h3{
        font-size: 25px;
      }

      .diag-sme .dimension{
        min-height: auto;
        padding: 18px;
      }

      .diag-sme .report-panel-header{
        display: block;
      }

      .diag-sme .recommendations,.diag-sme .process-grid{
        grid-template-columns: 1fr;
      }

      .diag-sme .steps-flow{
        grid-template-columns: 1fr;
      }

      .diag-sme .testimonial-stage{
        min-height: 420px;
        padding: 34px 24px 180px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .95) 56%, rgba(255, 255, 255, .2) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center bottom / cover no-repeat;
      }

      .diag-sme .testimonial{
        width: 100%;
        min-height: 230px;
      }

      .diag-sme .testimonial h3{
        font-size: 25px;
      }

      .diag-sme .testimonial p{
        font-size: 15px;
      }

      .diag-sme .radar-wrap{
        grid-template-columns: 1fr;
      }

      .diag-sme .score-row{
        grid-template-columns: minmax(0, 1fr) 48px 58px;
        gap: 8px;
        font-size: 13px;
      }

      .diag-sme .recommendation,.diag-sme .testimonial,.diag-sme .process-card,.diag-sme .plan{
        min-height: auto;
      }

      .diag-sme .process-card::after{
        display: none;
      }

      .diag-sme .final-cta-inner{
        justify-items: start;
      }

      .diag-sme .mobile-only{
        display: inline;
      }
    }

    @media (max-width: 560px) {
      .diag-sme .brand{
        display: none;
      }

      .diag-sme .page-nav-links{
        width: 100%;
      }

      .diag-sme .page-nav .container{
        width: calc(100% - 20px);
      }

    }

    /* Full-bleed dual-body analysis: both profiles stay visible without tabs. */
    .diag-sme .two-body-showcase{
      position: relative;
      isolation: isolate;
      overflow: hidden;
      margin: clamp(84px, 9vw, 120px) calc(50% - 50vw) 0;
      padding: clamp(74px, 7vw, 104px) 0 clamp(78px, 7vw, 100px);
      color: #fff;
      background:
        radial-gradient(circle at 12% 8%, rgba(79, 149, 178, .28), transparent 31%),
        radial-gradient(circle at 88% 14%, rgba(46, 151, 139, .22), transparent 28%),
        linear-gradient(135deg, #07345a 0%, #0d67a8 52%, #0a7f87 100%);
    }

    .diag-sme .two-body-showcase::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(180deg, #000, transparent 74%);
    }

    .diag-sme .two-body-showcase::after{
      content: "";
      position: absolute;
      right: -130px;
      bottom: -180px;
      z-index: -1;
      width: 480px;
      height: 480px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 50%;
      box-shadow:
        0 0 0 62px rgba(255, 255, 255, .025),
        0 0 0 124px rgba(255, 255, 255, .02);
    }

    .diag-sme .two-body-shell{
      position: relative;
      z-index: 1;
      width: min(1440px, calc(100% - 64px));
      margin: 0 auto;
    }

    .diag-sme .two-body-intro{
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(320px, .72fr);
      gap: clamp(36px, 6vw, 96px);
      align-items: end;
      margin-bottom: 44px;
    }

    .diag-sme .two-body-intro > div{
      position: relative;
      padding-left: 76px;
    }

    .diag-sme .two-body-step{
      position: absolute;
      top: 4px;
      left: 0;
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 16px;
      color: #fff;
      background: rgba(255, 255, 255, .10);
      box-shadow: 0 14px 30px rgba(4, 25, 43, .18);
      font-size: 17px;
      font-weight: 900;
      backdrop-filter: blur(10px);
    }

    .diag-sme .two-body-intro .section-kicker{
      margin-bottom: 10px;
      color: #9ed6d1;
      letter-spacing: .08em;
    }

    .diag-sme .two-body-intro h3{
      max-width: 720px;
      margin: 0;
      color: #fff;
      font-size: clamp(38px, 4.2vw, 58px);
      line-height: 1.12;
      letter-spacing: -.04em;
    }

    .diag-sme .two-body-intro > p{
      max-width: 560px;
      margin: 0;
      color: rgba(255, 255, 255, .78);
      font-size: 17px;
      line-height: 1.9;
    }

    .diag-sme .body-profile-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    .diag-sme .body-profile{
      --profile-accent: var(--blue);
      --profile-soft: var(--sky);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .34);
      border-radius: 24px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 26px 64px rgba(4, 25, 43, .24);
    }

    .diag-sme .body-profile::before{
      content: "";
      position: absolute;
      inset: 0 0 auto;
      z-index: 4;
      height: 6px;
      background: var(--profile-accent);
    }

    .diag-sme .digital-profile{
      --profile-accent: var(--teal);
      --profile-soft: var(--accent-soft);
    }

    .diag-sme .body-profile-visual{
      position: relative;
      min-height: 246px;
      overflow: hidden;
      background: var(--navy);
    }

    .diag-sme .body-profile-visual img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease;
    }

    .diag-sme .management-profile .body-profile-visual img{
      object-position: 68% center;
    }

    .diag-sme .digital-profile .body-profile-visual img{
      object-position: 72% center;
    }

    .diag-sme .body-profile-visual::after{
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(15, 43, 65, .96) 0%, rgba(15, 43, 65, .84) 38%, rgba(15, 43, 65, .26) 76%, rgba(15, 43, 65, .08) 100%),
        linear-gradient(0deg, rgba(15, 43, 65, .36), transparent 52%);
    }

    .diag-sme .body-profile:hover .body-profile-visual img{
      transform: scale(1.035);
    }

    .diag-sme .profile-index{
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 2;
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .32);
      border-radius: 14px;
      color: #fff;
      background: rgba(15, 43, 65, .26);
      font-weight: 900;
      backdrop-filter: blur(10px);
    }

    .diag-sme .profile-visual-copy{
      position: absolute;
      bottom: 28px;
      left: 30px;
      z-index: 2;
      max-width: calc(100% - 120px);
      color: #fff;
    }

    .diag-sme .profile-visual-copy > span{
      display: block;
      margin-bottom: 7px;
      color: #a9d7e6;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .diag-sme .digital-profile .profile-visual-copy > span{
      color: #9ed6d1;
    }

    .diag-sme .profile-visual-copy h4{
      margin: 0;
      color: #fff;
      font-size: 36px;
      line-height: 1.15;
      letter-spacing: -.03em;
    }

    .diag-sme .profile-visual-copy p{
      margin: 9px 0 0;
      color: rgba(255, 255, 255, .80);
      font-size: 14px;
      font-weight: 800;
    }

    .diag-sme .body-profile-body{
      padding: 26px 28px 30px;
    }

    .diag-sme .body-profile-summary{
      display: flex;
      min-height: 72px;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .diag-sme .body-profile-summary p{
      max-width: 430px;
      margin: 0;
      color: var(--text);
      font-size: 14px;
      line-height: 1.75;
    }

    .diag-sme .profile-chip{
      flex: 0 0 auto;
      padding: 7px 11px;
      border-radius: 999px;
      color: var(--profile-accent);
      background: var(--profile-soft);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .diag-sme .body-profile-data{
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr);
      gap: 16px;
      align-items: stretch;
    }

    .diag-sme .body-profile .score-table,.diag-sme .body-profile .radar-card{
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fbfcfc;
      box-shadow: none;
    }

    .diag-sme .body-profile .score-table{
      padding: 8px;
    }

    .diag-sme .body-profile .score-row{
      grid-template-columns: minmax(0, 1fr) 44px 44px;
      gap: 8px;
      padding: 10px 9px;
      font-size: 12.5px;
    }

    .diag-sme .body-profile .score-head{
      border-radius: 10px;
      background: var(--profile-soft);
    }

    .diag-sme .body-profile .company-score{
      color: var(--profile-accent);
    }

    .diag-sme .body-profile .radar-card{
      display: grid;
      padding: 18px 15px;
      place-items: center;
    }

    .diag-sme .body-profile .radar-wrap{
      min-height: 0;
      grid-template-columns: 1fr;
      gap: 10px;
      align-content: center;
      justify-items: center;
    }

    .diag-sme .body-profile .radar-plot{
      width: min(164px, 100%);
    }

    .diag-sme .body-profile .radar-labels{
      width: 100%;
      gap: 5px;
      font-size: 11.5px;
    }

    .diag-sme .body-profile .radar-caption{
      text-align: center;
      line-height: 1.55;
    }

    .diag-sme .management-profile .radar-company{
      background: rgba(25, 118, 210, .24);
      outline-color: var(--blue);
    }

    .diag-sme .management-profile .radar-labels span:not(.benchmark-label)::before{
      background: var(--blue);
    }

    @media (max-width: 1180px) {
      .diag-sme .two-body-shell{
        width: min(960px, calc(100% - 48px));
      }

      .diag-sme .body-profile-grid{
        grid-template-columns: 1fr;
      }

      .diag-sme .body-profile-data{
        grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr);
      }

      .diag-sme .body-profile .radar-plot{
        width: min(205px, 100%);
      }
    }

    @media (max-width: 760px) {
      .diag-sme .kpi-band{
        background-color: #f7fbff;
        background-image:
          linear-gradient(180deg, rgba(247, 251, 255, .82) 0%, rgba(247, 251, 255, .94) 230px, #f7fbff 450px),
          url("/newCIOP/img/diagnosis_sme/diagnosis-kpi-challenges-bg.webp");
        background-position: center top, 78% top;
        background-size: 100% 460px, auto 420px;
        background-repeat: no-repeat;
      }

      .diag-sme .kpi-band::before{
        display: none;
      }

      .diag-sme .two-body-showcase{
        margin-top: 68px;
        padding: 62px 0 64px;
      }

      .diag-sme .two-body-shell{
        width: calc(100% - 28px);
      }

      .diag-sme .two-body-intro{
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 30px;
      }

      .diag-sme .two-body-intro > div{
        padding-left: 0;
      }

      .diag-sme .two-body-step{
        position: static;
        margin-bottom: 22px;
      }

      .diag-sme .two-body-intro h3{
        font-size: 38px;
      }

      .diag-sme .two-body-intro > p{
        font-size: 16px;
      }

      .diag-sme .body-profile-grid{
        gap: 18px;
      }

      .diag-sme .body-profile-visual{
        min-height: 220px;
      }

      .diag-sme .profile-visual-copy{
        bottom: 24px;
        left: 22px;
      }

      .diag-sme .profile-visual-copy h4{
        font-size: 32px;
      }

      .diag-sme .body-profile-body{
        padding: 22px 20px 24px;
      }

      .diag-sme .body-profile-summary{
        min-height: 0;
        flex-wrap: wrap;
      }

      .diag-sme .body-profile-data{
        grid-template-columns: 1fr;
      }

      .diag-sme .body-profile .radar-wrap{
        grid-template-columns: minmax(170px, .82fr) minmax(0, 1fr);
        align-items: center;
      }

      .diag-sme .body-profile .radar-caption{
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 520px) {
      .diag-sme .two-body-intro h3{
        font-size: 34px;
      }

      .diag-sme .body-profile-visual{
        min-height: 206px;
      }

      .diag-sme .profile-index{
        top: 18px;
        right: 18px;
      }

      .diag-sme .profile-visual-copy{
        max-width: calc(100% - 76px);
      }

      .diag-sme .body-profile .score-row{
        grid-template-columns: minmax(0, 1fr) 40px 42px;
        font-size: 12px;
      }

      .diag-sme .body-profile .radar-wrap{
        grid-template-columns: 1fr;
      }
    }

    /* Final palette harmony: emerald actions, indigo analysis, warm neutral surfaces. */
    .diag-sme a:focus-visible,.diag-sme button:focus-visible,.diag-sme summary:focus-visible{
      outline-color: rgba(11, 122, 104, .34);
    }

    .diag-sme .page-nav{
      background: rgba(255, 253, 248, .95);
      box-shadow: 0 8px 24px rgba(24, 39, 35, .07);
    }

    .diag-sme .btn-primary{
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      box-shadow: 0 12px 26px rgba(11, 122, 104, .22);
    }

    .diag-sme .btn-primary:hover,.diag-sme .btn-primary:focus-visible{
      box-shadow:
        0 16px 34px rgba(11, 122, 104, .27),
        0 0 0 4px rgba(11, 122, 104, .10);
    }

    .diag-sme .btn-primary:active{
      box-shadow: 0 8px 18px rgba(11, 122, 104, .22);
    }

    .diag-sme .btn-secondary{
      color: var(--blue-dark);
      background: var(--sky);
    }

    .diag-sme .btn-secondary:hover,.diag-sme .btn-secondary:focus-visible{
      color: #fff;
      background: var(--blue);
      box-shadow: 0 12px 26px rgba(79, 70, 229, .18);
    }

    .diag-sme .hero{
      background:
        linear-gradient(90deg, rgba(255, 253, 248, .98) 0%, rgba(255, 253, 248, .93) 42%, rgba(255, 253, 248, .39) 78%, rgba(255, 253, 248, .08) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .hero::after{
      background: linear-gradient(180deg, rgba(255, 253, 248, 0), var(--soft));
    }

    .diag-sme .dimension::after{
      background: linear-gradient(135deg, rgba(79, 70, 229, .07), rgba(11, 122, 104, .08));
    }

    .diag-sme .eyebrow::before{
      background: var(--amber);
    }

    .diag-sme .recommendation[data-quadrant="leader"] .quadrant-mini span:nth-child(2){
      background: #087f5b;
    }

    .diag-sme .recommendation[data-quadrant="challenger"] .quadrant-mini span:nth-child(1){
      background: #4a45a8;
    }

    .diag-sme .recommendation[data-quadrant="explorer"] .quadrant-mini span:nth-child(3){
      background: #a86b00;
    }

    .diag-sme .recommendation[data-quadrant="ready"] .quadrant-mini span:nth-child(4){
      background: #0a7f83;
    }

    .diag-sme .radar-grid{
      border-color: var(--line-strong);
      background:
        repeating-radial-gradient(circle at center, transparent 0 17%, rgba(79, 70, 229, .10) 18% 19%, transparent 20% 34%);
      box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .06);
    }

    .diag-sme .radar-benchmark{
      background: rgba(79, 70, 229, .14);
      outline-color: rgba(79, 70, 229, .62);
    }

    .diag-sme .bar-fill{
      background: linear-gradient(90deg, var(--teal), #27846d);
    }

    .diag-sme .kpi-band{
      background-color: var(--paper);
      background-image:
        linear-gradient(90deg, rgba(255, 253, 248, .99) 0%, rgba(255, 253, 248, .96) 48%, rgba(238, 244, 239, .80) 66%, rgba(229, 244, 237, .22) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-kpi-challenges-bg.webp");
    }

    .diag-sme .kpi-band::before{
      display: block;
      background:
        radial-gradient(circle at 78% 26%, rgba(11, 122, 104, .10), transparent 34%),
        radial-gradient(circle at 94% 74%, rgba(79, 70, 229, .07), transparent 28%);
      mask-image: none;
    }

    .diag-sme .role-card::before{
      background: rgba(79, 70, 229, .09);
    }

    .diag-sme .role-card:hover::before{
      background: rgba(11, 122, 104, .11);
    }

    .diag-sme .plan{
      background: linear-gradient(180deg, #fff, #fbf8f2);
    }

    .diag-sme .plan.recommended{
      border-color: rgba(11, 122, 104, .42);
      background: linear-gradient(135deg, #fff 0%, #fbf8f2 56%, var(--accent-soft) 100%);
      box-shadow: 0 24px 58px rgba(24, 39, 35, .12);
    }

    .diag-sme .plan.plus{
      border-color: #cdd2ed;
      background: linear-gradient(135deg, #fff, var(--sky));
    }

    .diag-sme .plan-plus-label{
      color: #7b5208;
      background: #fff3d6;
    }

    .diag-sme .plan.plus li::before{
      background: var(--amber);
    }

    .diag-sme .plan.plus .btn-secondary{
      border-color: transparent;
      color: #fff;
      background: var(--blue);
      box-shadow: 0 12px 26px rgba(79, 70, 229, .18);
    }

    .diag-sme .plan.plus .btn-secondary:hover,.diag-sme .plan.plus .btn-secondary:focus-visible{
      background: var(--blue-dark);
      box-shadow: 0 16px 32px rgba(55, 48, 163, .22);
    }

    .diag-sme details{
      border-color: var(--line);
      background: #fff;
    }

    .diag-sme details[open]{
      border-color: rgba(11, 122, 104, .42);
      background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%);
      box-shadow: 0 14px 30px rgba(24, 39, 35, .10);
    }

    .diag-sme details[open] summary::after{
      color: #fff;
      background: var(--teal);
    }

    .diag-sme details p a{
      color: var(--blue-dark);
      font-weight: 900;
    }

    .diag-sme .consult-panel{
      background:
        linear-gradient(90deg, rgba(255, 253, 248, .98) 0%, rgba(238, 244, 239, .90) 54%, rgba(229, 244, 237, .56) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .testimonial-stage{
      background:
        linear-gradient(90deg, rgba(255, 253, 248, .99) 0%, rgba(255, 253, 248, .95) 48%, rgba(255, 253, 248, .30) 76%, rgba(255, 253, 248, .05) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .process-cta{
      background:
        linear-gradient(90deg, rgba(255, 253, 248, .98) 0%, rgba(255, 253, 248, .91) 48%, rgba(255, 253, 248, .25) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center right / cover no-repeat;
    }

    .diag-sme .final-cta{
      border-color: var(--line);
      background:
        linear-gradient(110deg, rgba(255, 253, 248, .98), rgba(229, 244, 237, .86)),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .two-body-showcase{
      background:
        radial-gradient(circle at 12% 8%, rgba(52, 211, 153, .17), transparent 31%),
        radial-gradient(circle at 88% 14%, rgba(99, 102, 241, .23), transparent 28%),
        linear-gradient(135deg, #073a33 0%, #0d6658 58%, #312e81 100%);
    }

    .diag-sme .two-body-step{
      box-shadow: 0 14px 30px rgba(18, 34, 30, .20);
    }

    .diag-sme .two-body-intro .section-kicker{
      color: #a7f3d0;
    }

    .diag-sme .body-profile{
      background: #fffdf9;
      box-shadow: 0 26px 64px rgba(24, 39, 35, .20);
    }

    .diag-sme .management-profile .body-profile-visual::after{
      background:
        linear-gradient(90deg, rgba(35, 32, 94, .95) 0%, rgba(35, 32, 94, .80) 38%, rgba(35, 32, 94, .23) 76%, rgba(35, 32, 94, .06) 100%),
        linear-gradient(0deg, rgba(35, 32, 94, .30), transparent 52%);
    }

    .diag-sme .digital-profile .body-profile-visual::after{
      background:
        linear-gradient(90deg, rgba(5, 63, 54, .95) 0%, rgba(5, 63, 54, .81) 38%, rgba(5, 63, 54, .23) 76%, rgba(5, 63, 54, .06) 100%),
        linear-gradient(0deg, rgba(5, 63, 54, .30), transparent 52%);
    }

    .diag-sme .management-profile .profile-index{
      background: rgba(35, 32, 94, .28);
    }

    .diag-sme .digital-profile .profile-index{
      background: rgba(5, 63, 54, .28);
    }

    .diag-sme .profile-visual-copy > span{
      color: #c7d2fe;
    }

    .diag-sme .digital-profile .profile-visual-copy > span{
      color: #a7f3d0;
    }

    .diag-sme .body-profile .score-table,.diag-sme .body-profile .radar-card{
      background: #fffcf7;
    }

    .diag-sme .management-profile .radar-company{
      background: rgba(79, 70, 229, .22);
      outline-color: var(--blue);
    }

    .diag-sme .management-profile .radar-labels span:not(.benchmark-label)::before{
      background: var(--blue);
    }

    @media (max-width: 760px) {
      .diag-sme .hero{
        background:
          linear-gradient(180deg, rgba(255, 253, 248, .98) 0%, rgba(255, 253, 248, .94) 58%, rgba(255, 253, 248, .72) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
      }

      .diag-sme .kpi-band{
        background-color: var(--paper);
        background-image:
          linear-gradient(180deg, rgba(255, 253, 248, .84) 0%, rgba(255, 253, 248, .95) 230px, #fffdf8 450px),
          url("/newCIOP/img/diagnosis_sme/diagnosis-kpi-challenges-bg.webp");
      }

      .diag-sme .kpi-band::before{
        display: none;
      }

      .diag-sme .testimonial-stage{
        background:
          linear-gradient(180deg, rgba(255, 253, 248, .99) 0%, rgba(255, 253, 248, .95) 56%, rgba(255, 253, 248, .22) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center bottom / cover no-repeat;
      }
    }

    /* Premium single-blue system: one brand hue with quiet slate support. */
    .diag-sme{
      color: var(--ink);
      background: var(--paper);
    }

    .diag-sme a:focus-visible,.diag-sme button:focus-visible,.diag-sme summary:focus-visible{
      outline-color: rgba(23, 92, 211, .30);
    }

    .diag-sme .page-nav{
      border-color: rgba(198, 210, 224, .78);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 8px 26px rgba(11, 43, 79, .06);
      backdrop-filter: blur(18px);
    }

    .diag-sme .btn{
      border-radius: 10px;
    }

    .diag-sme .btn-primary{
      background: var(--brand);
      box-shadow: 0 10px 24px rgba(11, 43, 79, .16);
    }

    .diag-sme .btn-primary::before{
      display: none;
    }

    .diag-sme .btn-primary:hover,.diag-sme .btn-primary:focus-visible{
      background: var(--brand-dark);
      box-shadow:
        0 14px 30px rgba(11, 43, 79, .20),
        0 0 0 4px rgba(23, 92, 211, .09);
      transform: translateY(-1px);
    }

    .diag-sme .btn-primary:active{
      background: var(--brand-dark);
      box-shadow: 0 6px 14px rgba(11, 43, 79, .14);
    }

    .diag-sme .btn-secondary{
      border-color: rgba(23, 92, 211, .16);
      color: var(--brand-dark);
      background: var(--accent-soft);
    }

    .diag-sme .btn-secondary:hover,.diag-sme .btn-secondary:focus-visible{
      color: #fff;
      border-color: var(--brand);
      background: var(--brand);
      box-shadow: 0 10px 22px rgba(11, 43, 79, .14);
    }

    .diag-sme .hero{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .93) 42%, rgba(255, 255, 255, .38) 78%, rgba(255, 255, 255, .08) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .hero::after{
      background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--soft));
    }

    .diag-sme .eyebrow::before{
      background: var(--aux-gold);
    }

    .diag-sme .section.soft{
      background: var(--soft);
    }

    .diag-sme .section.alt{
      background: var(--soft-2);
    }

    .diag-sme .metric,.diag-sme .body-tabs,.diag-sme .pillar,.diag-sme .dimension,.diag-sme .flow-step,.diag-sme .report-panel,.diag-sme .quadrant-figure,.diag-sme .recommendation,.diag-sme .role-panel,.diag-sme .role-stat,.diag-sme .testimonial-carousel,.diag-sme .plan,.diag-sme .process-card,.diag-sme details{
      border-color: var(--line);
      box-shadow: var(--shadow-sm);
    }

    .diag-sme .pillar-header{
      background: linear-gradient(135deg, #1849a9, #0b2b4f);
    }

    .diag-sme .pillar.digital .pillar-header{
      background: linear-gradient(135deg, var(--aux-teal), #084c48);
    }

    .diag-sme .pillar-header p{
      color: rgba(255, 255, 255, .94);
    }

    .diag-sme .pillar-header h3 span{
      color: #dceaff;
    }

    .diag-sme .dimension::after{
      background: linear-gradient(135deg, rgba(23, 92, 211, .055), rgba(46, 144, 250, .075));
    }

    .diag-sme .dimension-icon,.diag-sme .pillar.physical .dimension-icon{
      color: var(--brand-dark);
      background: var(--accent-soft);
    }

    .diag-sme .pillar.digital .dimension-icon{
      color: var(--aux-teal-dark);
      background: var(--aux-teal-soft);
    }

    .diag-sme .body-tabs button.active,.diag-sme .chart-tabs button.active,.diag-sme .flow-step strong,.diag-sme .subsection-heading > strong,.diag-sme .report-panel-header > strong,.diag-sme .role-icon,.diag-sme .plan.recommended .plan-badge,.diag-sme .consult-step-badge{
      color: #fff;
      background: var(--brand);
      box-shadow: none;
    }

    .diag-sme .chart-tabs button.active::after{
      border-top-color: var(--brand);
    }

    .diag-sme .steps-flow::before{
      background: linear-gradient(90deg, rgba(23, 92, 211, .18), var(--brand), rgba(23, 92, 211, .18));
    }

    .diag-sme .report-panel-header{
      background: var(--soft-2);
    }

    .diag-sme .tag,.diag-sme summary::after{
      color: var(--brand-dark);
      background: var(--accent-soft);
    }

    .diag-sme .quadrant-figure{
      background: #fff;
      box-shadow: 0 18px 42px rgba(11, 43, 79, .08);
    }

    .diag-sme .recommendation[data-quadrant="leader"] .quadrant-mini span:nth-child(2){
      background: #175cd3;
    }

    .diag-sme .recommendation[data-quadrant="leader"] h3{
      color: var(--brand-dark);
    }

    .diag-sme .recommendation[data-quadrant="challenger"] .quadrant-mini span:nth-child(1){
      background: #3b6fb6;
    }

    .diag-sme .recommendation[data-quadrant="challenger"] h3{
      color: #244f82;
    }

    .diag-sme .recommendation[data-quadrant="explorer"] .quadrant-mini span:nth-child(3){
      background: var(--aux-gold);
    }

    .diag-sme .recommendation[data-quadrant="explorer"] h3{
      color: var(--aux-gold-dark);
    }

    .diag-sme .recommendation[data-quadrant="ready"] .quadrant-mini span:nth-child(4){
      background: var(--aux-teal);
    }

    .diag-sme .recommendation[data-quadrant="ready"] h3{
      color: var(--aux-teal-dark);
    }

    .diag-sme .radar-grid{
      border-color: var(--line-strong);
      background:
        repeating-radial-gradient(circle at center, transparent 0 17%, rgba(23, 92, 211, .10) 18% 19%, transparent 20% 34%);
      box-shadow: inset 0 0 0 1px rgba(23, 92, 211, .05);
    }

    .diag-sme .radar-company{
      background: rgba(23, 92, 211, .20);
      outline-color: var(--brand);
    }

    .diag-sme .radar-benchmark{
      background: rgba(96, 117, 138, .13);
      outline-color: rgba(96, 117, 138, .55);
    }

    .diag-sme .radar-labels span::before{
      background: var(--brand);
    }

    .diag-sme .bar-fill{
      background: linear-gradient(90deg, var(--brand-dark), var(--brand-mid));
    }

    .diag-sme .consult-panel{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(246, 248, 251, .91) 54%, rgba(234, 242, 255, .56) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .consult-line b{
      color: var(--brand-dark);
      background: var(--accent-soft);
    }

    .diag-sme .kpi-band{
      background-color: var(--paper);
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .96) 48%, rgba(246, 248, 251, .80) 66%, rgba(234, 242, 255, .18) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-kpi-challenges-bg.webp");
    }

    .diag-sme .kpi-band::before{
      display: block;
      background:
        radial-gradient(circle at 78% 26%, rgba(23, 92, 211, .09), transparent 34%),
        radial-gradient(circle at 94% 74%, rgba(183, 121, 31, .07), transparent 28%);
      mask-image: none;
    }

    .diag-sme .role-card::before{
      background: rgba(23, 92, 211, .08);
    }

    .diag-sme .role-card:hover::before{
      background: rgba(46, 144, 250, .10);
    }

    .diag-sme .role-stat strong{
      color: var(--brand-dark);
    }

    .diag-sme .role-stat:nth-child(2) strong{
      color: var(--aux-teal-dark);
    }

    .diag-sme .role-card strong{
      color: var(--brand);
    }

    .diag-sme .role-card:nth-child(2) .role-icon,.diag-sme .role-card:nth-child(4) .role-icon{
      background: var(--aux-teal);
    }

    .diag-sme .testimonial-stage{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .30) 76%, rgba(255, 255, 255, .05) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .testimonial h3{
      color: var(--brand-dark);
    }

    .diag-sme .plan,.diag-sme .plan.recommended,.diag-sme .plan.plus{
      background: #fff;
    }

    .diag-sme .plan.recommended{
      border-color: rgba(23, 92, 211, .34);
      box-shadow: var(--shadow);
    }

    .diag-sme .plan.recommended::after{
      display: none;
    }

    .diag-sme .plan.plus{
      border-color: rgba(15, 118, 110, .26);
      box-shadow: inset 0 3px 0 var(--aux-teal), var(--shadow-sm);
    }

    .diag-sme .plan-plus-label{
      color: var(--aux-gold-dark);
      background: var(--aux-gold-soft);
    }

    .diag-sme .plan li::before,.diag-sme .plan.plus li::before{
      background: var(--brand);
    }

    .diag-sme .plan.plus .btn-secondary{
      border-color: var(--brand);
      color: #fff;
      background: var(--brand);
      box-shadow: 0 10px 22px rgba(11, 43, 79, .14);
    }

    .diag-sme .plan.plus .btn-secondary:hover,.diag-sme .plan.plus .btn-secondary:focus-visible{
      background: var(--brand-dark);
      box-shadow: 0 14px 28px rgba(11, 43, 79, .18);
    }

    .diag-sme details{
      border-color: var(--line);
      background: #fff;
      box-shadow: 0 10px 24px rgba(11, 43, 79, .05);
    }

    .diag-sme details[open]{
      border-color: rgba(23, 92, 211, .30);
      background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%);
      box-shadow: 0 14px 30px rgba(11, 43, 79, .08);
    }

    .diag-sme details[open] summary::after{
      color: #fff;
      background: var(--brand);
    }

    .diag-sme details p a{
      color: var(--brand-dark);
    }

    .diag-sme .process-cta{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .91) 48%, rgba(255, 255, 255, .24) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center right / cover no-repeat;
    }

    .diag-sme .final-cta{
      border-color: var(--line);
      background:
        linear-gradient(110deg, rgba(255, 255, 255, .98), rgba(234, 242, 255, .86)),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .two-body-showcase{
      background:
        radial-gradient(circle at 12% 8%, rgba(46, 144, 250, .18), transparent 31%),
        radial-gradient(circle at 88% 14%, rgba(116, 168, 222, .15), transparent 28%),
        linear-gradient(135deg, #0b2b4f 0%, #124d84 58%, #175cd3 100%);
    }

    .diag-sme .two-body-step{
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(5, 27, 52, .18);
    }

    .diag-sme .two-body-intro .section-kicker{
      color: #d7e8ff;
    }

    .diag-sme .body-profile{
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 24px 58px rgba(5, 27, 52, .18);
    }

    .diag-sme .management-profile{
      --profile-accent: #175cd3;
      --profile-soft: #eaf2ff;
    }

    .diag-sme .digital-profile{
      --profile-accent: var(--aux-teal);
      --profile-soft: var(--aux-teal-soft);
    }

    .diag-sme .management-profile .body-profile-visual::after{
      background:
        linear-gradient(90deg, rgba(11, 43, 79, .95) 0%, rgba(11, 43, 79, .82) 38%, rgba(11, 43, 79, .24) 76%, rgba(11, 43, 79, .06) 100%),
        linear-gradient(0deg, rgba(11, 43, 79, .30), transparent 52%);
    }

    .diag-sme .digital-profile .body-profile-visual::after{
      background:
        linear-gradient(90deg, rgba(7, 62, 59, .95) 0%, rgba(7, 62, 59, .80) 38%, rgba(7, 62, 59, .23) 76%, rgba(7, 62, 59, .06) 100%),
        linear-gradient(0deg, rgba(7, 62, 59, .30), transparent 52%);
    }

    .diag-sme .management-profile .profile-index,.diag-sme .digital-profile .profile-index{
      border-radius: 10px;
      background: rgba(11, 43, 79, .28);
    }

    .diag-sme .digital-profile .profile-index{
      background: rgba(15, 118, 110, .28);
    }

    .diag-sme .profile-visual-copy > span,.diag-sme .digital-profile .profile-visual-copy > span{
      color: #dceaff;
    }

    .diag-sme .digital-profile .profile-visual-copy > span{
      color: #c9f0e8;
    }

    .diag-sme .body-profile .score-table,.diag-sme .body-profile .radar-card{
      border-radius: 10px;
      background: #fbfcfe;
    }

    .diag-sme .management-profile .radar-company{
      background: rgba(23, 92, 211, .20);
      outline-color: #175cd3;
    }

    .diag-sme .management-profile .radar-labels span:not(.benchmark-label)::before{
      background: #175cd3;
    }

    .diag-sme .digital-profile .radar-company{
      background: rgba(15, 118, 110, .20);
      outline-color: var(--aux-teal);
    }

    .diag-sme .digital-profile .radar-labels span:not(.benchmark-label)::before{
      background: var(--aux-teal);
    }

    .diag-sme .dimension:hover,.diag-sme .role-card:hover,.diag-sme .process-card:hover,.diag-sme .plan:hover{
      border-color: var(--line-strong);
      box-shadow: 0 16px 34px rgba(11, 43, 79, .09);
      transform: translateY(-2px);
    }

    .diag-sme .process-card:nth-child(2) strong,.diag-sme .process-card:nth-child(4) strong{
      background: var(--aux-teal);
    }

    .diag-sme .process-card:nth-child(5) strong{
      background: var(--aux-gold-dark);
    }

    @media (max-width: 760px) {
      .diag-sme .hero{
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 58%, rgba(255, 255, 255, .72) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
      }

      .diag-sme .kpi-band{
        background-color: var(--paper);
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .95) 230px, #fff 450px),
          url("/newCIOP/img/diagnosis_sme/diagnosis-kpi-challenges-bg.webp");
      }

      .diag-sme .kpi-band::before{
        display: none;
      }

      .diag-sme .testimonial-stage{
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .95) 56%, rgba(255, 255, 255, .22) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center bottom / cover no-repeat;
      }
    }

    /* Experience redesign: editorial role art, sticky report journey, immersive body profiles. */
    .diag-sme .role-cards{
      gap: 18px;
    }

    .diag-sme .role-card{
      display: flex;
      min-height: 342px;
      flex-direction: column;
      padding: 12px 12px 20px;
      overflow: hidden;
      border-radius: 20px;
      text-align: left;
      background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    }

    .diag-sme .role-card::before{
      display: none;
    }

    .diag-sme .role-illustration{
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border: 1px solid rgba(183, 121, 31, .14);
      border-radius: 16px;
      background: #fffaf0;
    }

    .diag-sme .role-illustration::after{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
      pointer-events: none;
    }

    .diag-sme .role-illustration img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .diag-sme .role-card:hover .role-illustration img{
      transform: scale(1.045);
    }

    .diag-sme .role-card p{
      margin: 18px 8px 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.55;
    }

    .diag-sme .role-card strong{
      margin: auto 8px 0;
      padding-top: 14px;
      color: var(--brand);
      font-size: 13px;
      letter-spacing: .02em;
    }

    .diag-sme #report{
      position: relative;
      background:
        radial-gradient(circle at 8% 12%, rgba(23, 92, 211, .07), transparent 28%),
        linear-gradient(180deg, #f8fafd 0%, #eef3f8 100%);
    }

    .diag-sme #report > .container{
      max-width: 1240px;
    }

    .diag-sme .steps-flow{
      position: sticky;
      top: 72px;
      z-index: 30;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 30px 0 34px;
      padding: 10px;
      overflow: visible;
      border: 1px solid rgba(198, 210, 224, .78);
      border-radius: 18px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 14px 36px rgba(11, 43, 79, .11);
      backdrop-filter: blur(18px) saturate(1.12);
    }

    .diag-sme .steps-flow::before{
      content: "";
      position: absolute;
      top: 50%;
      right: 7%;
      left: 7%;
      z-index: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(23, 92, 211, .12), rgba(23, 92, 211, .36), rgba(15, 118, 110, .20));
    }

    .diag-sme .flow-step{
      position: relative;
      z-index: 1;
      display: grid;
      min-width: 0;
      min-height: 72px;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 13px;
      color: var(--muted);
      background: rgba(255, 255, 255, .96);
      transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }

    .diag-sme .flow-step strong{
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border-radius: 13px;
      color: var(--brand-dark);
      background: var(--accent-soft);
      box-shadow: inset 0 0 0 1px rgba(23, 92, 211, .08);
      font-size: 15px;
      transition: color .25s ease, background .25s ease, transform .25s ease;
    }

    .diag-sme .flow-step span{
      display: flex;
      min-width: 0;
      flex-direction: column;
      color: inherit;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.3;
    }

    .diag-sme .flow-step small{
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .14em;
    }

    .diag-sme .flow-step:hover{
      color: var(--brand-dark);
      border-color: rgba(23, 92, 211, .15);
      transform: translateY(-1px);
    }

    .diag-sme .flow-step.active{
      color: var(--brand-dark);
      border-color: rgba(23, 92, 211, .24);
      background: linear-gradient(135deg, #fff, var(--accent-soft));
      box-shadow: 0 8px 20px rgba(23, 92, 211, .11);
    }

    .diag-sme .flow-step.active strong{
      color: #fff;
      background: var(--brand);
      box-shadow: 0 8px 18px rgba(23, 92, 211, .24);
      transform: scale(1.04);
    }

    .diag-sme .flow-step.is-complete strong{
      color: #fff;
      background: var(--aux-teal);
      box-shadow: none;
    }

    .diag-sme .journey-step{
      scroll-margin-top: 176px;
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: inset 0 4px 0 rgba(23, 92, 211, .30), 0 18px 46px rgba(11, 43, 79, .08);
      transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    }

    .diag-sme .journey-step.is-active{
      border-color: rgba(23, 92, 211, .28);
      box-shadow: inset 0 4px 0 var(--brand), 0 22px 54px rgba(11, 43, 79, .11);
    }

    .diag-sme #analysis,.diag-sme #direction,.diag-sme #two-body,.diag-sme #consult{
      margin-top: 32px;
    }

    .diag-sme .direction-step{
      padding: 0 28px 28px;
      overflow: hidden;
      background: #fff;
    }

    .diag-sme .direction-step .subsection-heading{
      margin: 0 -28px 0;
      padding: 26px 28px 24px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(135deg, #fff, var(--soft));
    }

    .diag-sme .direction-step .recommendations{
      margin-top: 24px;
    }

    .diag-sme #two-body,.diag-sme #consult{
      overflow: hidden;
    }

    /* Full-bleed two-body experience. */
    .diag-sme .body-experience{
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 112px 0 124px;
      color: #fff;
      background:
        radial-gradient(circle at 10% 15%, rgba(46, 144, 250, .24), transparent 29%),
        radial-gradient(circle at 92% 82%, rgba(15, 118, 110, .20), transparent 30%),
        linear-gradient(135deg, #071f3b 0%, #0b3766 50%, #114f85 100%);
    }

    .diag-sme .body-experience::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    }

    .diag-sme .body-experience::after{
      content: "";
      position: absolute;
      top: -180px;
      left: 50%;
      z-index: -1;
      width: 760px;
      height: 760px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 50%;
      box-shadow: 0 0 0 92px rgba(255, 255, 255, .025), 0 0 0 184px rgba(255, 255, 255, .018);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .diag-sme .body-experience-inner{
      position: relative;
      z-index: 1;
      max-width: 1440px;
    }

    .diag-sme .body-experience .section-head{
      margin-bottom: 50px;
      align-items: end;
    }

    .diag-sme .body-experience .section-kicker{
      color: #a9cfff;
    }

    .diag-sme .body-experience .section-title{
      max-width: 760px;
      color: #fff;
      font-size: clamp(36px, 4vw, 58px);
      line-height: 1.16;
    }

    .diag-sme .body-experience .section-title span{
      color: #8fbdff;
    }

    .diag-sme .body-experience .section-note{
      color: rgba(231, 240, 250, .82);
      font-size: 17px;
    }

    .diag-sme .body-dual-grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .diag-sme .body-story-card{
      display: grid;
      min-width: 0;
      grid-template-columns: minmax(300px, .32fr) minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .20);
      border-radius: 28px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 30px 70px rgba(2, 20, 40, .28);
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .diag-sme .body-story-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 38px 82px rgba(2, 20, 40, .34);
    }

    .diag-sme .body-story-card.digital{
      grid-template-columns: minmax(0, 1fr) minmax(300px, .32fr);
    }

    .diag-sme .body-story-card.digital .pillar-header{
      order: 2;
    }

    .diag-sme .body-story-card.digital .dimension-list{
      order: 1;
    }

    .diag-sme .body-experience .pillar-header{
      position: relative;
      min-height: 100%;
      padding: 42px 36px;
      overflow: hidden;
      border-radius: 0;
      background-position: center;
      background-size: cover;
    }

    .diag-sme .body-experience .pillar.physical .pillar-header{
      background:
        linear-gradient(155deg, rgba(11, 43, 79, .97) 4%, rgba(24, 73, 169, .80) 58%, rgba(23, 92, 211, .34) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center / cover no-repeat;
    }

    .diag-sme .body-experience .pillar.digital .pillar-header{
      background:
        linear-gradient(155deg, rgba(5, 64, 60, .97) 4%, rgba(15, 118, 110, .82) 60%, rgba(15, 118, 110, .34) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center / cover no-repeat;
    }

    .diag-sme .body-experience .pillar-header::before{
      content: "";
      position: absolute;
      inset: -30%;
      z-index: 0;
      background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .15) 50%, transparent 62%);
      transform: translateX(-65%);
      animation: bodySheen 7.5s ease-in-out infinite;
    }

    .diag-sme .body-experience .pillar-header::after{
      content: "";
      position: absolute;
      right: -84px;
      bottom: -88px;
      z-index: 0;
      width: 220px;
      height: 220px;
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 50%;
      box-shadow: 0 0 0 34px rgba(255, 255, 255, .045), 0 0 0 70px rgba(255, 255, 255, .026);
      animation: bodyOrbit 5.5s ease-in-out infinite alternate;
    }

    .diag-sme .body-experience .pillar-header > *{
      position: relative;
      z-index: 1;
    }

    .diag-sme .body-experience .pillar-header h3{
      font-size: 46px;
      line-height: 1.05;
    }

    .diag-sme .body-experience .pillar-header h3 span,.diag-sme .body-experience .pillar-header p{
      color: #fff;
    }

    .diag-sme .body-experience .pillar-badge{
      width: 58px;
      height: 58px;
      border: 1px solid rgba(255, 255, 255, .26);
      border-radius: 16px;
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(10px);
    }

    .diag-sme .body-experience .dimension-list{
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      padding: 24px;
      background: linear-gradient(180deg, #fff, #f4f7fa);
    }

    .diag-sme .body-experience .dimension{
      display: block;
      min-width: 0;
      min-height: 278px;
      padding: 18px 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 8px 20px rgba(11, 43, 79, .05);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .diag-sme .body-experience .dimension::after{
      display: none;
    }

    .diag-sme .body-experience .dimension:hover{
      border-color: rgba(23, 92, 211, .24);
      box-shadow: 0 18px 32px rgba(11, 43, 79, .10);
      transform: translateY(-6px);
    }

    .diag-sme .body-experience .pillar.digital .dimension:hover{
      border-color: rgba(15, 118, 110, .28);
    }

    .diag-sme .body-experience .dimension-icon{
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
      border-radius: 12px;
      font-size: 13px;
    }

    .diag-sme .body-experience .dimension h4{
      min-height: 46px;
      margin: 0;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.42;
    }

    .diag-sme .body-experience .dimension .en{
      min-height: 32px;
      margin-top: 5px;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.35;
      white-space: normal;
    }

    .diag-sme .body-experience .dimension ul{
      margin: 14px 0 0;
      padding-left: 16px;
      color: var(--text);
      font-size: 12px;
      line-height: 1.58;
    }

    .diag-sme .body-experience .dimension li + li{
      margin-top: 5px;
    }

    @keyframes bodySheen {
      0%, 62% { transform: translateX(-65%); }
      84%, 100% { transform: translateX(65%); }
    }

    @keyframes bodyOrbit {
      from { transform: translate3d(0, 0, 0) scale(.96); opacity: .68; }
      to { transform: translate3d(-12px, -10px, 0) scale(1.04); opacity: 1; }
    }

    @keyframes bodyTileIn {
      from { opacity: 0; transform: translateY(18px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .diag-sme.fx .body-experience.is-visible .dimension{
      animation: bodyTileIn .62s cubic-bezier(.2, .8, .2, 1) both;
    }

    .diag-sme.fx .body-experience.is-visible .dimension:nth-child(2){ animation-delay: .07s; }
    .diag-sme.fx .body-experience.is-visible .dimension:nth-child(3){ animation-delay: .14s; }
    .diag-sme.fx .body-experience.is-visible .dimension:nth-child(4){ animation-delay: .21s; }
    .diag-sme.fx .body-experience.is-visible .dimension:nth-child(5){ animation-delay: .28s; }

    @media (max-width: 1180px) {
      .diag-sme .body-story-card,.diag-sme .body-story-card.digital{
        grid-template-columns: 1fr;
      }

      .diag-sme .body-story-card.digital .pillar-header,.diag-sme .body-story-card.digital .dimension-list{
        order: initial;
      }

      .diag-sme .body-experience .pillar-header{
        min-height: 260px;
      }

      .diag-sme .body-experience .dimension-list{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .diag-sme .body-experience .dimension{
        min-height: 238px;
      }
    }

    @media (max-width: 900px) {
      .diag-sme .steps-flow{
        top: 66px;
        grid-template-columns: repeat(4, minmax(210px, 1fr));
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
      }

      .diag-sme .steps-flow::before{
        right: 60px;
        left: 60px;
      }

      .diag-sme .journey-step{
        scroll-margin-top: 164px;
      }
    }

    @media (max-width: 760px) {
      .diag-sme .role-card{
        display: grid;
        min-height: 0;
        grid-template-columns: 108px minmax(0, 1fr);
        grid-template-areas:
          "art copy"
          "art tag";
        gap: 0 16px;
        padding: 12px;
      }

      .diag-sme .role-illustration{
        grid-area: art;
        align-self: center;
      }

      .diag-sme .role-card p{
        grid-area: copy;
        margin: 8px 0 0;
      }

      .diag-sme .role-card strong{
        grid-area: tag;
        margin: 0;
        padding-top: 8px;
      }

      .diag-sme .direction-step{
        padding: 0 18px 18px;
      }

      .diag-sme .direction-step .subsection-heading{
        margin: 0 -18px;
        padding: 20px 18px;
      }

      .diag-sme .body-experience{
        padding: 82px 0 92px;
      }

      .diag-sme .body-experience .section-head{
        margin-bottom: 34px;
      }

      .diag-sme .body-experience .section-title{
        font-size: 36px;
      }

      .diag-sme .body-experience .pillar-header{
        min-height: 230px;
        padding: 32px 26px;
      }

      .diag-sme .body-experience .pillar-header h3{
        font-size: 38px;
      }

      .diag-sme .body-experience .dimension-list{
        grid-template-columns: 1fr;
        padding: 16px;
      }

      .diag-sme .body-experience .dimension{
        min-height: 0;
      }

      .diag-sme .body-experience .dimension h4,.diag-sme .body-experience .dimension .en{
        min-height: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme .body-experience .pillar-header::before,.diag-sme .body-experience .pillar-header::after,.diag-sme.fx .body-experience.is-visible .dimension{
        animation: none;
      }
    }

    /* Continuity refinement: wider physiology fields, one report journey, quieter iconography. */
    .diag-sme .body-experience-inner{
      width: 100%;
      max-width: none;
      padding-right: clamp(24px, 4.4vw, 92px);
      padding-left: clamp(24px, 4.4vw, 92px);
    }

    .diag-sme .body-story-card{
      grid-template-columns: minmax(340px, .27fr) minmax(0, 1fr);
    }

    .diag-sme .body-story-card.digital{
      grid-template-columns: minmax(0, 1fr) minmax(340px, .27fr);
    }

    .diag-sme .body-experience .pillar-header{
      padding: 50px 42px;
    }

    .diag-sme .body-experience .pillar-header h3{
      font-size: 52px;
    }

    .diag-sme .body-experience .dimension-list{
      gap: 20px;
      padding: 32px;
    }

    .diag-sme .body-experience .dimension{
      min-height: 316px;
      padding: 24px 20px;
    }

    .diag-sme .body-experience .dimension-icon{
      width: 48px;
      height: 48px;
      margin-bottom: 22px;
      font-size: 14px;
    }

    .diag-sme .body-experience .dimension h4{
      min-height: 52px;
      font-size: 18px;
      line-height: 1.44;
    }

    .diag-sme .body-experience .dimension .en{
      min-height: 36px;
      margin-top: 7px;
      font-size: 10px;
      line-height: 1.45;
    }

    .diag-sme .body-experience .dimension ul{
      margin-top: 18px;
      padding-left: 18px;
      font-size: 14px;
      line-height: 1.68;
    }

    .diag-sme .body-experience .dimension li + li{
      margin-top: 8px;
    }

    .diag-sme .report-journey{
      position: relative;
      overflow: hidden;
      padding-left: 58px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: #fff;
      box-shadow: 0 24px 64px rgba(11, 43, 79, .10);
    }

    .diag-sme .report-journey::before{
      content: "";
      position: absolute;
      top: 42px;
      bottom: 42px;
      left: 28px;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--brand) 0%, #6da7e8 45%, var(--aux-teal) 100%);
    }

    .diag-sme .report-journey .report-grid{
      display: block;
      margin: 0;
    }

    .diag-sme .report-journey .journey-step{
      position: relative;
      margin: 0;
      overflow: visible;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      transition: background-color .3s ease, box-shadow .3s ease;
    }

    .diag-sme .report-journey .journey-step:not(:last-child){
      border-bottom: 1px solid var(--line);
    }

    .diag-sme .report-journey .journey-step::before{
      content: attr(data-journey-step);
      position: absolute;
      top: 32px;
      left: -47px;
      z-index: 4;
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 2px solid var(--line-strong);
      border-radius: 50%;
      color: var(--brand-dark);
      background: #fff;
      box-shadow: 0 0 0 6px #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .diag-sme .report-journey .journey-step.is-active{
      border-color: transparent;
      background-color: rgba(234, 242, 255, .26);
      box-shadow: inset 4px 0 0 var(--brand);
    }

    .diag-sme .report-journey .journey-step.is-active::before{
      color: #fff;
      border-color: var(--brand);
      background: var(--brand);
      box-shadow: 0 0 0 6px #fff, 0 8px 18px rgba(23, 92, 211, .22);
    }

    .diag-sme .report-journey #analysis,.diag-sme .report-journey #direction,.diag-sme .report-journey #two-body,.diag-sme .report-journey #consult{
      margin-top: 0;
    }

    .diag-sme .report-journey #analysis .report-panel-header,.diag-sme .report-journey .direction-step .subsection-heading{
      border-radius: 0;
    }

    .diag-sme .report-journey #two-body,.diag-sme .report-journey #consult{
      border-radius: 0;
    }

    .diag-sme .role-card{
      min-height: 284px;
      align-items: stretch;
      padding: 22px 20px 24px;
      background: #fff;
    }

    .diag-sme .role-icon-jp{
      position: relative;
      display: grid;
      width: 92px;
      height: 92px;
      place-items: center;
      margin-bottom: 24px;
      border: 1px solid rgba(23, 92, 211, .15);
      border-radius: 50% 46% 52% 44%;
      color: var(--brand-dark);
      background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .94), transparent 28%),
        var(--accent-soft);
      box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .52);
      transform: rotate(-2deg);
      transition: transform .3s ease, background-color .3s ease;
    }

    .diag-sme .role-icon-jp svg{
      width: 46px;
      height: 46px;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.55;
      stroke-linecap: round;
      stroke-linejoin: round;
      transform: rotate(2deg);
    }

    .diag-sme .role-icon-jp span{
      position: absolute;
      top: 10px;
      right: 8px;
      width: 10px;
      height: 10px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: var(--aux-gold);
    }

    .diag-sme .role-card:nth-child(2) .role-icon-jp,.diag-sme .role-card:nth-child(4) .role-icon-jp{
      color: var(--aux-teal-dark);
      border-color: rgba(15, 118, 110, .16);
      background: var(--aux-teal-soft);
    }

    .diag-sme .role-card:hover .role-icon-jp{
      transform: rotate(0) translateY(-3px);
    }

    .diag-sme .testimonial-stage{
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .97) 42%, rgba(255, 255, 255, .82) 57%, rgba(255, 255, 255, .12) 100%),
        var(--testimonial-image, url("/newCIOP/img/diagnosis_sme/diagnosis-testimonial-01-manufacturing.webp"));
      background-position: center;
      background-size: cover;
    }

    .diag-sme .testimonial{
      max-width: 58%;
    }

    .diag-sme .process-grid::before,.diag-sme .process-card::after{
      background: rgba(23, 92, 211, .28);
    }

    .diag-sme .process-card strong,.diag-sme .process-card:nth-child(2) strong,.diag-sme .process-card:nth-child(4) strong,.diag-sme .process-card:nth-child(5) strong{
      color: var(--brand-dark);
      border: 1px solid rgba(23, 92, 211, .14);
      background: var(--accent-soft);
      box-shadow: none;
    }

    .diag-sme .process-card:hover strong{
      color: #fff;
      border-color: var(--brand);
      background: var(--brand);
    }

    @media (max-width: 1180px) {
      .diag-sme .body-story-card,.diag-sme .body-story-card.digital{
        grid-template-columns: 1fr;
      }

      .diag-sme .body-experience .dimension-list{
        gap: 18px;
        padding: 26px;
      }

      .diag-sme .body-experience .dimension{
        min-height: 286px;
      }
    }

    @media (max-width: 760px) {
      .diag-sme .body-experience-inner{
        padding-right: 18px;
        padding-left: 18px;
      }

      .diag-sme .body-experience .dimension-list{
        gap: 14px;
        padding: 16px;
      }

      .diag-sme .body-experience .dimension{
        min-height: 0;
        padding: 22px 20px;
      }

      .diag-sme .body-experience .dimension h4,.diag-sme .body-experience .dimension .en{
        min-height: 0;
      }

      .diag-sme .report-journey{
        padding-left: 0;
        border-radius: 20px;
      }

      .diag-sme .report-journey::before,.diag-sme .report-journey .journey-step::before{
        display: none;
      }

      .diag-sme .report-journey .journey-step.is-active{
        box-shadow: inset 0 4px 0 var(--brand);
      }

      .diag-sme .role-card{
        min-height: 0;
      }

      .diag-sme .role-icon-jp{
        grid-area: art;
        width: 96px;
        height: 96px;
        margin: 0;
        align-self: center;
      }

      .diag-sme .testimonial{
        max-width: 100%;
      }

      .diag-sme .testimonial-stage{
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .96) 62%, rgba(255, 255, 255, .38) 100%),
          var(--testimonial-image, url("/newCIOP/img/diagnosis_sme/diagnosis-testimonial-01-manufacturing.webp"));
        background-position: center;
      }
    }

    /* Final density pass: stronger plan hierarchy, tighter physiology, cleaner journey. */
    .diag-sme #pricing{
      background:
        radial-gradient(circle at 12% 18%, rgba(23, 92, 211, .07), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f6f9fd 100%);
    }

    .diag-sme #pricing .section-head{
      margin-bottom: 54px;
    }

    .diag-sme .pricing-view{
      grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
      gap: 34px;
      align-items: center;
    }

    .diag-sme .plan{
      min-height: 470px;
      padding: 34px;
      border-color: var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 18px 46px rgba(11, 43, 79, .08);
    }

    .diag-sme .plan:hover{
      border-color: var(--line-strong);
      box-shadow: 0 22px 54px rgba(11, 43, 79, .11);
      transform: translateY(-3px);
    }

    .diag-sme .plan.recommended{
      min-height: 548px;
      padding: 40px;
      border: 2px solid rgba(23, 92, 211, .58);
      background: linear-gradient(145deg, #fff 0%, #f7faff 58%, #eaf2ff 100%);
      box-shadow: 0 32px 76px rgba(23, 92, 211, .18);
      transform: translateY(-12px) scale(1.012);
    }

    .diag-sme .plan.recommended::before{
      content: "";
      position: absolute;
      inset: 0 0 auto;
      z-index: 2;
      height: 8px;
      background: linear-gradient(90deg, var(--brand-dark), var(--brand), #4d8ce8);
    }

    .diag-sme .plan.recommended::after{
      content: "";
      position: absolute;
      right: -92px;
      bottom: -118px;
      display: block;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(23, 92, 211, .07);
      pointer-events: none;
    }

    .diag-sme .plan.recommended:hover{
      border-color: rgba(23, 92, 211, .78);
      box-shadow: 0 38px 82px rgba(23, 92, 211, .22);
      transform: translateY(-16px) scale(1.012);
    }

    .diag-sme .plan.recommended .plan-badge{
      min-height: 34px;
      padding: 0 15px;
      color: #fff;
      background: var(--brand);
      box-shadow: 0 10px 24px rgba(23, 92, 211, .20);
      font-size: 14px;
    }

    .diag-sme .plan.recommended h3{
      color: var(--brand-dark);
      font-size: 46px;
      letter-spacing: -.04em;
    }

    .diag-sme .plan-emphasis{
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-top: 14px;
    }

    .diag-sme .plan-emphasis strong{
      color: var(--ink);
      font-size: 21px;
      line-height: 1.25;
    }

    .diag-sme .plan-emphasis span{
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .diag-sme .plan.recommended .plan-emphasis strong{
      color: var(--brand);
      font-size: 29px;
    }

    .diag-sme .plan-note{
      margin-top: 10px;
      color: var(--text);
      line-height: 1.65;
    }

    .diag-sme .plan.recommended .plan-note{
      color: var(--text);
    }

    .diag-sme .plan ul{
      gap: 10px;
      margin-top: 26px;
    }

    .diag-sme .plan li{
      min-height: 50px;
      padding: 10px 13px;
      border-color: var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, .88);
    }

    .diag-sme .plan.recommended li{
      border-color: rgba(23, 92, 211, .19);
      box-shadow: 0 8px 18px rgba(11, 43, 79, .045);
    }

    .diag-sme .plan.recommended li::before{
      width: 11px;
      height: 11px;
      box-shadow: 0 0 0 4px rgba(23, 92, 211, .10);
    }

    .diag-sme .plan.recommended > .btn{
      min-height: 56px;
      font-size: 16px;
      box-shadow: 0 16px 32px rgba(23, 92, 211, .20);
    }

    .diag-sme .plan.plus{
      min-height: 470px;
      margin-top: 32px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 14px 36px rgba(11, 43, 79, .07);
      transform: none;
    }

    .diag-sme .plan.plus:hover{
      border-color: rgba(23, 92, 211, .22);
      box-shadow: 0 18px 42px rgba(11, 43, 79, .09);
      transform: translateY(-2px);
    }

    .diag-sme .plan.plus h3{
      font-size: 36px;
    }

    .diag-sme .plan-plus-label{
      color: var(--brand-dark);
      background: var(--accent-soft);
    }

    .diag-sme .plan.plus > .btn{
      margin-top: 28px;
    }

    .diag-sme .body-experience{
      padding: 78px 0 88px;
    }

    .diag-sme .body-experience .section-head{
      margin-bottom: 34px;
    }

    .diag-sme .body-dual-grid{
      gap: 22px;
    }

    .diag-sme .body-experience .pillar-header{
      padding: 38px 34px;
    }

    .diag-sme .body-experience .pillar-header h3{
      font-size: 44px;
    }

    .diag-sme .body-experience .dimension-list{
      gap: 14px;
      padding: 22px;
    }

    .diag-sme .body-experience .dimension{
      min-height: 232px;
      padding: 20px 18px;
    }

    .diag-sme .body-experience .dimension-icon{
      width: 42px;
      height: 42px;
      margin-bottom: 16px;
      font-size: 13px;
    }

    .diag-sme .body-experience .dimension h4{
      min-height: 44px;
      font-size: 17px;
      line-height: 1.4;
    }

    .diag-sme .body-experience .dimension .en{
      min-height: 28px;
      margin-top: 4px;
      font-size: 9.5px;
      line-height: 1.4;
    }

    .diag-sme .body-experience .dimension ul{
      margin-top: 12px;
      padding-left: 17px;
      font-size: 13.5px;
      line-height: 1.55;
    }

    .diag-sme .body-experience .dimension li + li{
      margin-top: 5px;
    }

    .diag-sme .report-journey .journey-step.is-active{
      box-shadow: none;
    }

    .diag-sme .report-journey #two-body{
      margin: 0;
      padding: 44px 0 56px;
    }

    .diag-sme .report-journey #two-body .two-body-intro{
      gap: 32px;
      margin-bottom: 26px;
    }

    .diag-sme .report-journey #two-body .two-body-intro h3{
      font-size: clamp(34px, 3.5vw, 48px);
    }

    .diag-sme .report-journey #two-body .two-body-intro > p{
      font-size: 16px;
      line-height: 1.7;
    }

    .diag-sme .body-profile-body{
      padding: 26px 30px 30px;
    }

    .diag-sme .body-profile-summary{
      min-height: 0;
      margin-bottom: 18px;
    }

    .diag-sme .body-profile-summary p{
      font-size: 16px;
      line-height: 1.7;
    }

    .diag-sme .profile-chip{
      font-size: 13px;
    }

    .diag-sme .body-profile .score-row{
      padding: 11px 10px;
      font-size: 14.5px;
    }

    .diag-sme .body-profile .score-head{
      font-size: 13.5px;
    }

    .diag-sme .body-profile .radar-labels{
      font-size: 13px;
    }

    .diag-sme .body-profile .radar-caption{
      font-size: 12.5px;
    }

    @media (max-width: 1180px) {
      .diag-sme .body-experience .pillar-header{
        min-height: 220px;
      }

      .diag-sme .body-experience .dimension{
        min-height: 214px;
      }
    }

    @media (max-width: 1000px) {
      .diag-sme .pricing-view{
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .diag-sme .plan.recommended,.diag-sme .plan.recommended:hover{
        transform: none;
      }

      .diag-sme .plan.plus{
        margin-top: 0;
      }

      .diag-sme .body-profile-grid,.diag-sme .body-profile-data{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .diag-sme #pricing .section-head{
        margin-bottom: 32px;
      }

      .diag-sme .plan,.diag-sme .plan.recommended,.diag-sme .plan.plus{
        min-height: 0;
        padding: 26px 22px;
        border-radius: 18px;
      }

      .diag-sme .plan.recommended h3{
        font-size: 38px;
      }

      .diag-sme .plan-emphasis{
        flex-direction: column;
        gap: 4px;
      }

      .diag-sme .body-experience{
        padding: 64px 0 70px;
      }

      .diag-sme .body-experience .pillar-header{
        min-height: 190px;
        padding: 30px 26px;
      }

      .diag-sme .body-experience .pillar-header h3{
        font-size: 38px;
      }

      .diag-sme .body-experience .dimension{
        min-height: 0;
      }

      .diag-sme .report-journey .journey-step.is-active{
        box-shadow: none;
      }

      .diag-sme .report-journey #two-body{
        padding: 36px 0 44px;
      }

      .diag-sme .report-journey #two-body .two-body-intro{
        margin-bottom: 22px;
      }

      .diag-sme .body-profile-summary{
        display: grid;
      }

      .diag-sme .body-profile .score-row{
        font-size: 13.5px;
      }
    }

    /* Single-line headline tuning for the key diagnostic messages. */
    .diag-sme .body-experience .section-head{
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
      gap: clamp(24px, 3vw, 48px);
    }

    .diag-sme .body-experience .section-title{
      max-width: none;
      font-size: clamp(30px, 4.1vw, 50px);
      line-height: 1.12;
      letter-spacing: -.05em;
      white-space: nowrap;
    }

    .diag-sme #report .section-head{
      grid-template-columns: minmax(0, 1.3fr) minmax(270px, .48fr);
      gap: 28px;
    }

    .diag-sme #report .section-title{
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.15;
      letter-spacing: -.045em;
      white-space: nowrap;
    }

    .diag-sme .report-journey #two-body .two-body-intro h3{
      max-width: none;
      font-size: clamp(26px, 3.2vw, 44px);
      letter-spacing: -.045em;
      white-space: nowrap;
    }

    .diag-sme .kpi-intro{
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, .55fr);
    }

    .diag-sme .kpi-copy{
      max-width: none;
    }

    .diag-sme .kpi-copy h2{
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1.16;
      letter-spacing: -.04em;
      white-space: nowrap;
    }

    .diag-sme #analysis .report-panel-header{
      background: #fff;
    }

    /* Layered 3D testimonial deck: active card centered, adjacent cards behind. */
    .diag-sme #recommend{
      overflow: hidden;
    }

    .diag-sme #recommend .testimonial-carousel{
      overflow: visible;
      padding-top: 16px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .diag-sme #recommend .testimonial-stage{
      position: relative;
      min-height: 470px;
      padding: 0;
      overflow: visible;
      background: transparent;
      perspective: 1500px;
      transform-style: preserve-3d;
    }

    .diag-sme #recommend .testimonial{
      position: absolute;
      top: 20px;
      left: 50%;
      display: flex;
      width: min(860px, 72vw);
      max-width: none;
      min-height: 390px;
      padding: 48px 52px;
      overflow: hidden;
      border: 1px solid rgba(184, 201, 216, .92);
      border-radius: 22px;
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .96) 43%, rgba(255, 255, 255, .72) 59%, rgba(255, 255, 255, .08) 100%),
        var(--testimonial-card-image);
      background-position: center;
      background-size: cover;
      box-shadow: 0 22px 56px rgba(11, 43, 79, .15);
      opacity: 0;
      filter: saturate(.62) brightness(.96);
      backface-visibility: hidden;
      pointer-events: none;
      transform: translate3d(-50%, 34px, -260px) scale(.72);
      transform-origin: center;
      transform-style: preserve-3d;
      transition:
        transform .68s cubic-bezier(.2, .72, .18, 1),
        opacity .5s ease,
        filter .5s ease,
        box-shadow .5s ease;
      will-change: transform, opacity;
    }

    .diag-sme #recommend .testimonial[hidden]{
      display: flex;
    }

    .diag-sme #recommend .testimonial > div{
      max-width: 58%;
    }

    .diag-sme #recommend .testimonial.is-active{
      z-index: 4;
      opacity: 1;
      filter: none;
      pointer-events: auto;
      transform: translate3d(-50%, 0, 80px) scale(1);
      box-shadow: 0 34px 78px rgba(11, 43, 79, .22);
    }

    .diag-sme #recommend .testimonial.is-prev,.diag-sme #recommend .testimonial.is-next{
      z-index: 2;
      opacity: .46;
      cursor: pointer;
      pointer-events: auto;
    }

    .diag-sme #recommend .testimonial.is-prev{
      transform: translate3d(-105%, 22px, -150px) rotateY(8deg) scale(.84);
    }

    .diag-sme #recommend .testimonial.is-next{
      transform: translate3d(5%, 22px, -150px) rotateY(-8deg) scale(.84);
    }

    .diag-sme #recommend .testimonial.is-prev:hover,.diag-sme #recommend .testimonial.is-next:hover{
      opacity: .68;
      filter: saturate(.82) brightness(1);
    }

    .diag-sme #recommend .testimonial.is-far-left{
      transform: translate3d(-138%, 34px, -240px) rotateY(12deg) scale(.70);
    }

    .diag-sme #recommend .testimonial.is-far-right{
      transform: translate3d(38%, 34px, -240px) rotateY(-12deg) scale(.70);
    }

    .diag-sme #recommend .testimonial h3{
      color: var(--brand-dark);
      font-size: 32px;
    }

    .diag-sme #recommend .testimonial p{
      color: var(--text);
      font-size: 17px;
      line-height: 1.75;
    }

    .diag-sme #recommend .testimonial footer{
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(8px);
    }

    .diag-sme #recommend .carousel-controls{
      position: relative;
      z-index: 6;
      width: fit-content;
      min-height: 60px;
      margin: -24px auto 0;
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 12px 30px rgba(11, 43, 79, .10);
      backdrop-filter: blur(14px);
    }

    @media (max-width: 1100px) {
      .diag-sme .body-experience .section-head,.diag-sme #report .section-head,.diag-sme .kpi-intro{
        grid-template-columns: 1fr;
      }

      .diag-sme .body-experience .section-head,.diag-sme #report .section-head{
        align-items: start;
      }
    }

    @media (max-width: 760px) {
      .diag-sme .body-experience .section-title{
        font-size: clamp(18px, 4.8vw, 32px);
      }

      .diag-sme #report .section-title{
        font-size: clamp(15.5px, 4.6vw, 28px);
      }

      .diag-sme .kpi-copy h2{
        font-size: clamp(15.5px, 4.8vw, 30px);
      }

      .diag-sme #recommend .testimonial-stage{
        min-height: 440px;
      }

      .diag-sme #recommend .testimonial{
        width: 78vw;
        min-height: 370px;
        padding: 34px 28px;
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 66%, rgba(255, 255, 255, .44) 100%),
          var(--testimonial-card-image);
      }

      .diag-sme #recommend .testimonial > div{
        max-width: 100%;
      }

      .diag-sme #recommend .testimonial h3{
        font-size: 27px;
      }

      .diag-sme #recommend .testimonial p{
        font-size: 15px;
        line-height: 1.65;
      }

      .diag-sme #recommend .carousel-controls{
        margin-top: -30px;
      }
    }

    @media (max-width: 520px) {
      .diag-sme .report-journey #two-body .two-body-intro h3{
        font-size: clamp(21px, 6.5vw, 28px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme #recommend .testimonial{
        transition-duration: .01ms;
      }
    }

    /* Keep both physiology stories on the same left-to-right reading path. */
    .diag-sme .body-story-card.digital{
      grid-template-columns: minmax(340px, .27fr) minmax(0, 1fr);
    }

    .diag-sme .body-story-card.digital .pillar-header,.diag-sme .body-story-card.digital .dimension-list{
      order: initial;
    }

    @media (max-width: 1180px) {
      .diag-sme .body-story-card.digital{
        grid-template-columns: 1fr;
      }
    }

    /* Premium pricing hierarchy with both plans aligned to the same baseline. */
    .diag-sme .pricing-view{
      align-items: stretch;
    }

    .diag-sme .plan.recommended,.diag-sme .plan.plus{
      min-height: 548px;
      margin-top: 0;
      align-self: stretch;
      transform: none;
    }

    .diag-sme .plan.recommended{
      padding: 0;
      border: 2px solid rgba(23, 92, 211, .58);
      background: #fff;
      box-shadow: 0 34px 78px rgba(23, 92, 211, .20);
    }

    .diag-sme .plan.recommended::before{
      content: "企業首選";
      position: absolute;
      top: 25px;
      right: -43px;
      z-index: 5;
      display: grid;
      width: 174px;
      height: 34px;
      place-items: center;
      color: var(--brand-dark);
      background: linear-gradient(90deg, #f8e8bd, #d9b66d);
      box-shadow: 0 8px 20px rgba(5, 27, 52, .20);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      transform: rotate(45deg);
    }

    .diag-sme .plan.recommended::after{
      display: none;
    }

    .diag-sme .plan.recommended:hover{
      border-color: rgba(23, 92, 211, .76);
      box-shadow: 0 38px 86px rgba(23, 92, 211, .24);
      transform: none;
    }

    .diag-sme .plan.recommended .plan-header{
      position: relative;
      display: block;
      min-height: 226px;
      padding: 40px 42px 32px;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 88% 10%, rgba(143, 189, 255, .30), transparent 34%),
        linear-gradient(135deg, #0b2b4f 0%, #124d84 58%, #175cd3 100%);
    }

    .diag-sme .plan.recommended .plan-header::before,.diag-sme .plan.recommended .plan-header::after{
      content: "";
      position: absolute;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 50%;
      pointer-events: none;
    }

    .diag-sme .plan.recommended .plan-header::before{
      top: -118px;
      right: -46px;
      width: 280px;
      height: 280px;
      box-shadow: 0 0 0 48px rgba(255, 255, 255, .025);
    }

    .diag-sme .plan.recommended .plan-header::after{
      right: 154px;
      bottom: -112px;
      width: 190px;
      height: 190px;
    }

    .diag-sme .plan.recommended .plan-header > *{
      position: relative;
      z-index: 1;
    }

    .diag-sme .plan.recommended .plan-badge{
      color: var(--brand-dark);
      background: #fff;
      box-shadow: 0 10px 24px rgba(5, 27, 52, .18);
    }

    .diag-sme .plan.recommended h3{
      color: #fff;
      font-size: 48px;
    }

    .diag-sme .plan.recommended .plan-emphasis strong{
      color: #fff;
      font-size: 30px;
    }

    .diag-sme .plan.recommended .plan-emphasis span{
      color: #d7e8ff;
    }

    .diag-sme .plan.recommended .plan-note{
      max-width: 520px;
      color: rgba(255, 255, 255, .80);
    }

    .diag-sme .plan.recommended ul{
      margin: 28px 34px 0;
      padding: 0;
    }

    .diag-sme .plan.recommended > .btn{
      margin: 28px 34px 34px;
    }

    .diag-sme .plan.plus{
      padding: 40px 34px 34px;
      border: 1px solid var(--line-strong);
      background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
      box-shadow: 0 18px 46px rgba(11, 43, 79, .09);
    }

    .diag-sme .plan.plus:hover{
      border-color: rgba(23, 92, 211, .28);
      box-shadow: 0 22px 52px rgba(11, 43, 79, .12);
      transform: none;
    }

    .diag-sme .plan.plus .plan-header{
      min-height: 226px;
      align-items: flex-start;
    }

    @media (max-width: 760px) {
      .diag-sme .plan.recommended,.diag-sme .plan.plus{
        min-height: 0;
      }

      .diag-sme .plan.recommended{
        padding: 0;
      }

      .diag-sme .plan.recommended .plan-header{
        min-height: 0;
        padding: 34px 24px 28px;
      }

      .diag-sme .plan.recommended ul{
        margin: 24px 22px 0;
      }

      .diag-sme .plan.recommended > .btn{
        margin: 24px 22px 24px;
      }

      .diag-sme .plan.plus{
        padding: 30px 22px 24px;
      }

      .diag-sme .plan.plus .plan-header{
        min-height: 0;
      }
    }

    /* Keep the preferred-plan label clear of the card content. */
    .diag-sme .plan.recommended::before{
      top: 18px;
      right: 18px;
      width: auto;
      height: 32px;
      padding: 0 13px;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 999px;
      box-shadow: 0 8px 22px rgba(5, 27, 52, .18);
      font-size: 11px;
      letter-spacing: .08em;
      transform: none;
    }

    /* Hero micro-details: neutral eyebrow rule and an animated 20-minute promise. */
    .diag-sme .eyebrow::before{
      background: #9aa7b5;
    }

    .diag-sme .hero h1 .hero-time{
      position: relative;
      display: inline-flex;
      align-items: baseline;
      color: var(--brand-dark);
      text-shadow: 0 8px 24px rgba(23, 92, 211, .10);
      white-space: nowrap;
      animation: heroTimeLift 3.4s ease-in-out infinite;
    }

    .diag-sme .hero h1 .hero-time strong{
      display: inline-block;
      margin-right: .13em;
      color: transparent;
      background: linear-gradient(105deg, #0b4aa8 0%, #175cd3 30%, #62a7ff 48%, #175cd3 66%, #0b4aa8 100%);
      background-size: 230% auto;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 8px 16px rgba(23, 92, 211, .20));
      font: inherit;
      animation: heroNumberSheen 3s linear infinite;
    }

    .diag-sme .hero h1 .hero-time::after{
      content: "";
      position: absolute;
      right: 0;
      bottom: -.08em;
      left: 0;
      height: .08em;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(23, 92, 211, .12), #2e90fa 42%, #84c5ff 58%, rgba(23, 92, 211, .12));
      box-shadow: 0 4px 14px rgba(46, 144, 250, .30);
      transform-origin: center;
      animation: heroTimeLine 2.6s ease-in-out infinite;
    }

    .diag-sme .hero h1 .hero-time::before{
      content: "";
      position: absolute;
      bottom: -.12em;
      left: 0;
      z-index: 1;
      width: .14em;
      height: .14em;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #62a7ff;
      box-shadow: 0 0 0 .07em rgba(98, 167, 255, .18), 0 0 .28em rgba(46, 144, 250, .72);
      animation: heroTimeSpark 2.6s ease-in-out infinite;
    }

    @keyframes heroNumberSheen {
      to { background-position: -230% center; }
    }

    @keyframes heroTimeLift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }

    @keyframes heroTimeLine {
      0%, 100% { opacity: .55; transform: scaleX(.82); }
      50% { opacity: 1; transform: scaleX(1); }
    }

    @keyframes heroTimeSpark {
      0% { left: 0; opacity: 0; }
      14% { opacity: 1; }
      82% { opacity: 1; }
      100% { left: calc(100% - .14em); opacity: 0; }
    }

    @media (max-width: 760px) {
      .diag-sme .plan.recommended::before{
        top: 14px;
        right: 12px;
        height: 28px;
        padding: 0 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme .hero h1 .hero-time,.diag-sme .hero h1 .hero-time strong,.diag-sme .hero h1 .hero-time::before,.diag-sme .hero h1 .hero-time::after{
        animation: none;
      }
    }

    /* Compact corner tag for the preferred plan. */
    .diag-sme .plan.recommended::before{
      content: "";
      inset: 0 0 auto auto;
      width: 92px;
      height: 92px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: linear-gradient(135deg, #f8e8bd 0%, #d9b66d 100%);
      box-shadow: none;
      filter: drop-shadow(-5px 7px 12px rgba(5, 27, 52, .18));
      clip-path: polygon(0 0, 100% 0, 100% 100%);
      transform: none;
      pointer-events: none;
    }

    .diag-sme .plan.recommended::after{
      content: "首選";
      position: absolute;
      top: 18px;
      right: 2px;
      z-index: 6;
      display: block;
      width: 58px;
      height: auto;
      border-radius: 0;
      color: var(--brand-dark);
      background: transparent;
      text-align: center;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      line-height: 1;
      transform: rotate(45deg);
      pointer-events: none;
    }

    @media (max-width: 760px) {
      .diag-sme .plan.recommended::before{
        inset: 0 0 auto auto;
        width: 78px;
        height: 78px;
      }

      .diag-sme .plan.recommended::after{
        top: 14px;
        right: 0;
        width: 50px;
        font-size: 10px;
      }
    }

    /* Refined hero-time effect: shimmer, soft aura and one restrained sparkle. */
    .diag-sme .hero h1 .hero-time{
      isolation: isolate;
      animation: none;
    }

    .diag-sme .hero h1 .hero-time strong{
      background: linear-gradient(105deg, #0b4aa8 0%, #175cd3 34%, #8bc6ff 48%, #175cd3 62%, #0b4aa8 100%);
      background-size: 260% auto;
      animation: heroNumberSheen 4.2s linear infinite;
    }

    .diag-sme .hero h1 .hero-time::before{
      content: "";
      position: absolute;
      inset: 18% -5% 10% -5%;
      z-index: -1;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 999px;
      background: radial-gradient(ellipse at 34% 52%, rgba(98, 167, 255, .20), rgba(23, 92, 211, .07) 48%, transparent 74%);
      box-shadow: none;
      filter: blur(12px);
      opacity: .75;
      animation: heroTimeAura 3.6s ease-in-out infinite;
    }

    .diag-sme .hero h1 .hero-time::after{
      content: "";
      position: absolute;
      top: -.02em;
      right: -.16em;
      bottom: auto;
      left: auto;
      width: .18em;
      height: .18em;
      border-radius: 0;
      background: linear-gradient(135deg, #ffffff, #62a7ff 62%, #175cd3);
      box-shadow: 0 0 .28em rgba(98, 167, 255, .68);
      clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
      transform-origin: center;
      animation: heroTimeTwinkle 2.8s ease-in-out infinite;
    }

    @keyframes heroTimeAura {
      0%, 100% { opacity: .50; transform: scale(.94); }
      50% { opacity: .88; transform: scale(1.04); }
    }

    @keyframes heroTimeTwinkle {
      0%, 34%, 100% { opacity: .26; transform: scale(.62) rotate(0deg); }
      48% { opacity: 1; transform: scale(1.08) rotate(45deg); }
      62% { opacity: .42; transform: scale(.74) rotate(90deg); }
    }

    /* Rendering-safe number effect and a self-contained corner label. */
    .diag-sme .hero h1 .hero-time strong{
      color: #175cd3;
      background: none;
      background-clip: border-box;
      -webkit-background-clip: border-box;
      -webkit-text-fill-color: #175cd3;
      filter: none;
      animation: heroNumberFocus 2.9s ease-in-out infinite;
    }

    .diag-sme .hero h1 .hero-time::before,.diag-sme .hero h1 .hero-time::after{
      display: none;
    }

    @keyframes heroNumberFocus {
      0%, 100% {
        color: #175cd3;
        text-shadow: 0 6px 16px rgba(23, 92, 211, .16);
        transform: translateY(0) scale(1);
      }
      50% {
        color: #2e90fa;
        text-shadow: 0 0 18px rgba(46, 144, 250, .42), 0 9px 22px rgba(23, 92, 211, .18);
        transform: translateY(-1px) scale(1.035);
      }
    }

    .diag-sme .plan.recommended::before{
      content: "首選";
      display: flex;
      box-sizing: border-box;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 13px 7px 0 0;
      color: var(--brand-dark);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      line-height: 1;
      white-space: nowrap;
    }

    .diag-sme .plan.recommended::after{
      content: "";
      display: none;
    }

    @media (max-width: 760px) {
      .diag-sme .plan.recommended::before{
        padding: 10px 5px 0 0;
        font-size: 10px;
      }
    }

    .diag-sme .plan.recommended::before{
      padding: 14px 7px 0 0;
      font-size: 15px;
      letter-spacing: .03em;
      line-height: 1.1;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .46);
    }

    @media (max-width: 760px) {
      .diag-sme .plan.recommended::before{
        padding: 11px 5px 0 0;
        font-size: 12px;
      }
    }

    /* Full-page diagnostic calibration loader. */
    .diag-sme.is-loading{
      overflow: hidden;
    }

    .diag-sme > .page-nav,.diag-sme > main,.diag-sme > .site-footer{
      transition: opacity .72s ease, transform .72s cubic-bezier(.2, .72, .18, 1);
    }

    .diag-sme.is-loading > .page-nav,.diag-sme.is-loading > main,.diag-sme.is-loading > .site-footer{
      opacity: 0;
      transform: translateY(14px);
    }

    .diag-sme.is-loading.loader-ready > .page-nav,.diag-sme.is-loading.loader-ready > main,.diag-sme.is-loading.loader-ready > .site-footer{
      opacity: 1;
      transform: none;
    }

    .diag-sme .site-loader{
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      overflow: hidden;
      place-items: center;
      color: #fff;
      background:
        radial-gradient(circle at 22% 18%, rgba(75, 151, 235, .22), transparent 32%),
        radial-gradient(circle at 82% 78%, rgba(15, 118, 110, .18), transparent 30%),
        linear-gradient(135deg, #061b32 0%, #0b2b4f 48%, #124d84 100%);
      clip-path: inset(0 0 0 0);
      opacity: 1;
      transition: clip-path .86s cubic-bezier(.76, 0, .24, 1), opacity .52s ease;
    }

    .diag-sme .site-loader::before{
      content: "";
      position: absolute;
      inset: -8%;
      background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, .78) 46%, transparent 78%);
      animation: loaderGridDrift 8s linear infinite;
    }

    .diag-sme .site-loader::after{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(62vw, 760px);
      aspect-ratio: 1;
      border: 1px solid rgba(143, 189, 255, .11);
      border-radius: 50%;
      box-shadow:
        0 0 0 80px rgba(255, 255, 255, .018),
        0 0 0 160px rgba(255, 255, 255, .012);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .diag-sme .site-loader.is-leaving{
      clip-path: inset(0 0 100% 0);
      opacity: .96;
      pointer-events: none;
    }

    .diag-sme .site-loader[hidden]{
      display: none !important;
    }

    .diag-sme .loader-content{
      position: relative;
      z-index: 2;
      display: grid;
      justify-items: center;
      width: min(520px, calc(100% - 40px));
      text-align: center;
    }

    .diag-sme .loader-brand{
      margin-bottom: 28px;
      color: rgba(255, 255, 255, .78);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: .06em;
    }

    .diag-sme .loader-brand span{
      color: #8fbdff;
    }

    .diag-sme .loader-core{
      position: relative;
      display: grid;
      width: 184px;
      height: 184px;
      place-items: center;
      margin-bottom: 30px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(143, 189, 255, .16), rgba(255, 255, 255, .035) 56%, transparent 58%);
      box-shadow: inset 0 0 46px rgba(143, 189, 255, .09), 0 24px 70px rgba(0, 0, 0, .26);
      animation: loaderCoreBreath 3.2s ease-in-out infinite;
    }

    .diag-sme .loader-core::before,.diag-sme .loader-core::after{
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .diag-sme .loader-core::before{
      inset: 25px;
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: inset 0 0 24px rgba(143, 189, 255, .08);
    }

    .diag-sme .loader-core::after{
      inset: 54px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(220, 235, 251, .88));
      box-shadow: 0 12px 32px rgba(0, 0, 0, .26), inset 0 1px 0 #fff;
    }

    .diag-sme .loader-core strong{
      position: relative;
      z-index: 5;
      color: #0b2b4f;
      font-size: 22px;
      letter-spacing: -.04em;
    }

    .diag-sme .loader-orbit,.diag-sme .loader-sweep,.diag-sme .loader-cross{
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .diag-sme .loader-orbit-a{
      inset: 7px;
      border: 4px solid transparent;
      border-top-color: #77b6ff;
      border-right-color: rgba(119, 182, 255, .22);
      border-bottom-color: #0f766e;
      animation: loaderSpin 2.8s linear infinite;
    }

    .diag-sme .loader-orbit-b{
      inset: 18px;
      border: 2px dashed rgba(255, 255, 255, .30);
      animation: loaderSpinReverse 7s linear infinite;
    }

    .diag-sme .loader-sweep{
      inset: 32px;
      background: conic-gradient(from 0deg, transparent 0 74%, rgba(143, 189, 255, .52) 86%, transparent 96%);
      mask-image: radial-gradient(circle, transparent 0 63%, #000 65% 69%, transparent 71%);
      animation: loaderSpin 2s linear infinite;
    }

    .diag-sme .loader-cross{
      inset: 39px;
      border-radius: 0;
    }

    .diag-sme .loader-cross::before,.diag-sme .loader-cross::after{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 999px;
      background: rgba(143, 189, 255, .34);
      transform: translate(-50%, -50%);
    }

    .diag-sme .loader-cross::before{
      width: 100%;
      height: 1px;
    }

    .diag-sme .loader-cross::after{
      width: 1px;
      height: 100%;
    }

    .diag-sme .loader-title{
      color: #fff;
      font-size: clamp(30px, 4vw, 42px);
      font-weight: 900;
      letter-spacing: .08em;
    }

    .diag-sme .loader-content > p{
      margin: 12px 0 24px;
      color: rgba(225, 237, 250, .72);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .diag-sme .loader-progress{
      width: min(300px, 76vw);
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
    }

    .diag-sme .loader-progress span{
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #77b6ff, #fff, #58b8ae);
      box-shadow: 0 0 18px rgba(119, 182, 255, .50);
      transform: scaleX(0);
      transform-origin: left;
      animation: loaderProgress 1.9s cubic-bezier(.22, .78, .24, 1) forwards;
    }

    .diag-sme .loader-status{
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 14px;
      color: rgba(225, 237, 250, .54);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .18em;
    }

    .diag-sme .loader-status i{
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #8fbdff;
      animation: loaderDot 1.2s ease-in-out infinite;
    }

    .diag-sme .loader-status i:nth-child(2){ animation-delay: .16s; }
    .diag-sme .loader-status i:nth-child(3){ animation-delay: .32s; }

    @keyframes loaderGridDrift {
      to { transform: translate3d(54px, 54px, 0); }
    }

    @keyframes loaderSpin {
      to { transform: rotate(360deg); }
    }

    @keyframes loaderSpinReverse {
      to { transform: rotate(-360deg); }
    }

    @keyframes loaderCoreBreath {
      0%, 100% { transform: scale(.98); box-shadow: inset 0 0 46px rgba(143, 189, 255, .08), 0 24px 70px rgba(0, 0, 0, .24); }
      50% { transform: scale(1.02); box-shadow: inset 0 0 58px rgba(143, 189, 255, .14), 0 28px 78px rgba(0, 0, 0, .30); }
    }

    @keyframes loaderProgress {
      0% { transform: scaleX(0); }
      46% { transform: scaleX(.58); }
      100% { transform: scaleX(1); }
    }

    @keyframes loaderDot {
      0%, 100% { opacity: .28; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-3px); }
    }

    @media (max-width: 600px) {
      .diag-sme .loader-brand{
        margin-bottom: 22px;
      }

      .diag-sme .loader-core{
        width: 154px;
        height: 154px;
        margin-bottom: 26px;
      }

      .diag-sme .loader-core::after{
        inset: 44px;
      }

      .diag-sme .loader-core strong{
        font-size: 19px;
      }

      .diag-sme .loader-title{
        font-size: 30px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme .site-loader,.diag-sme .site-loader::before,.diag-sme .loader-core,.diag-sme .loader-orbit,.diag-sme .loader-sweep,.diag-sme .loader-status i,.diag-sme .loader-progress span{
        animation: none;
      }

      .diag-sme .loader-progress span{
        transform: scaleX(1);
      }
    }

/* ============================================================
   20260820 靜態頁工程交付版 新增（skip-link / geo-summary /
   pricing 雙層背景 / testimonial 重構）
   ============================================================ */

    /* 無障礙跳轉連結 */
    .diag-sme .skip-link{
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 9999;
      padding: 10px 14px;
      border-radius: 8px;
      color: #fff;
      background: var(--brand-dark);
      box-shadow: var(--shadow-sm);
      transform: translateY(-160%);
      transition: transform .18s ease;
    }

    .diag-sme .skip-link:focus-visible{
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme .skip-link{ transition: none; }
    }

    /* geo-summary 快速摘要卡 */
    .diag-sme .geo-summary{
      position: relative;
      z-index: 3;
      padding: 42px 0 64px;
      background: linear-gradient(180deg, #f7faff 0, #fff 92px, #fff 100%);
    }

    .diag-sme .geo-summary-inner{
      display: grid;
      grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
      gap: clamp(28px, 4vw, 64px);
      align-items: center;
      padding: 30px 34px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(135deg, #fff 0%, #f7faff 100%);
      box-shadow: 0 18px 46px rgba(11, 43, 79, .08);
    }

    .diag-sme .geo-summary-heading p{
      margin: 0 0 8px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .diag-sme .geo-summary-heading h2{
      margin: 0;
      color: var(--ink);
      font-size: clamp(26px, 2.6vw, 36px);
      line-height: 1.2;
    }

    .diag-sme .geo-summary-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 20px;
      margin: 0;
    }

    .diag-sme .geo-summary-grid > div{
      min-width: 0;
      padding-left: 14px;
      border-left: 3px solid rgba(23, 92, 211, .20);
    }

    .diag-sme .geo-summary-grid > div:nth-child(3){
      grid-column: 1 / -1;
    }

    .diag-sme .geo-summary-grid dt{
      color: var(--brand-dark);
      font-size: 13px;
      font-weight: 900;
    }

    .diag-sme .geo-summary-grid dd{
      margin: 4px 0 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    @media (max-width: 900px) {
      .diag-sme .geo-summary-inner{ grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .diag-sme .geo-summary{ padding: 28px 0 46px; }
      .diag-sme .geo-summary-inner{ gap: 22px; padding: 26px 22px; border-radius: 16px; }
      .diag-sme .geo-summary-grid{ grid-template-columns: 1fr; }
      .diag-sme .geo-summary-grid > div:nth-child(3){ grid-column: auto; }
    }

    /* pricing 雙層背景 + hover 預覽 */
    .diag-sme #pricing{
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #f2f6fa;
    }

    .diag-sme #pricing::before,
    .diag-sme #pricing::after{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      pointer-events: none;
      transition: opacity .58s ease, transform 1s cubic-bezier(.2, .72, .18, 1);
    }

    .diag-sme #pricing::before{
      background-image:
        linear-gradient(90deg, rgba(244, 248, 252, .98) 0%, rgba(244, 248, 252, .91) 46%, rgba(244, 248, 252, .72) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-pricing-lite-bg.webp");
      background-position: center, center;
      opacity: .82;
    }

    .diag-sme #pricing::after{
      background-image:
        linear-gradient(90deg, rgba(241, 246, 251, .98) 0%, rgba(241, 246, 251, .89) 48%, rgba(241, 246, 251, .68) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-pricing-plus-bg.webp");
      background-position: center, center;
      opacity: 0;
      transform: scale(1.035);
    }

    .diag-sme #pricing.is-plus-preview::before{
      opacity: 0;
      transform: scale(1.025);
    }

    .diag-sme #pricing.is-plus-preview::after{
      opacity: .86;
      transform: scale(1);
    }

    .diag-sme #pricing > .container{
      position: relative;
      z-index: 1;
    }

    @media (max-width: 760px) {
      .diag-sme #pricing::before,
      .diag-sme #pricing::after{
        background-position: center top, 72% top;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .diag-sme #pricing::before,
      .diag-sme #pricing::after{ transition: none; }
    }

    /* 推薦卡重構：圖片改 ::before 右半、白色漸層遮罩，is-active 平面化 */
    .diag-sme #recommend .testimonial{
      isolation: isolate;
      background: #fff;
    }

    .diag-sme #recommend .testimonial::before{
      content: "";
      position: absolute;
      inset: 0 0 0 52%;
      z-index: -2;
      background-image: var(--testimonial-card-image);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      image-rendering: auto;
    }

    .diag-sme #recommend .testimonial::after{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, #fff 0%, #fff 47%, rgba(255, 255, 255, .86) 55%, rgba(255, 255, 255, .05) 76%, transparent 100%);
      pointer-events: none;
    }

    .diag-sme #recommend .testimonial > div{
      width: 48%;
      max-width: 48%;
      min-width: 0;
      overflow: hidden;
    }

    .diag-sme #recommend .testimonial p{
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    .diag-sme #recommend .testimonial footer{
      position: relative;
      z-index: 1;
      max-width: 48%;
    }

    .diag-sme #recommend .testimonial.is-active{
      filter: none;
      backface-visibility: visible;
      transform: translateX(-50%);
      will-change: auto;
    }

    @media (max-width: 760px) {
      .diag-sme #recommend .testimonial::before{ inset: 54% 0 0; background-position: center 38%; }
      .diag-sme #recommend .testimonial::after{ background: linear-gradient(180deg, #fff 0%, #fff 53%, rgba(255, 255, 255, .80) 63%, rgba(255, 255, 255, .08) 84%, transparent 100%); }
      .diag-sme #recommend .testimonial > div,
      .diag-sme #recommend .testimonial footer{ width: 100%; max-width: 100%; }
    }

/* ============================================================
   背景圖 WebP 化（覆寫前面所有 .png 參考，利用 cascade 後寫者勝）
   ============================================================ */
    .diag-sme .hero{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .93) 42%, rgba(255, 255, 255, .38) 78%, rgba(255, 255, 255, .08) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .hero::after{
      background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--soft));
    }

    .diag-sme .consult-panel{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(246, 248, 251, .91) 54%, rgba(234, 242, 255, .56) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .final-cta{
      background:
        linear-gradient(110deg, rgba(255, 255, 255, .98), rgba(234, 242, 255, .86)),
        url("/newCIOP/img/diagnosis_sme/diagnosis-consult-bg.webp") center right / cover no-repeat;
    }

    .diag-sme .body-experience .pillar.physical .pillar-header{
      background:
        linear-gradient(155deg, rgba(11, 43, 79, .97) 4%, rgba(24, 73, 169, .80) 58%, rgba(23, 92, 211, .34) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-roles-bg.webp") center / cover no-repeat;
    }

    .diag-sme .body-experience .pillar.digital .pillar-header{
      background:
        linear-gradient(155deg, rgba(5, 64, 60, .97) 4%, rgba(15, 118, 110, .82) 60%, rgba(15, 118, 110, .34) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center / cover no-repeat;
    }

    .diag-sme .process-cta{
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .91) 48%, rgba(255, 255, 255, .24) 100%),
        url("/newCIOP/img/diagnosis_sme/diagnosis-hero.webp") center right / cover no-repeat;
    }

    @media (max-width: 760px) {
      .diag-sme .hero{
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 58%, rgba(255, 255, 255, .72) 100%),
          url("/newCIOP/img/diagnosis_sme/diagnosis-people-bg.webp") center right / cover no-repeat;
      }
    }