/* ====== Layout — 12-col percentages (desktop/laptop) ====== */
/* Columns: Left 7/12 (58.3333%), Gap 1/12 (8.3333%), Right 4/12 (33.3333%) */
/* Right also has 0.5 col padding on both sides (3.1667% each) */
.tcp-dyk { --ring-size: 220px; --ring-thickness: 10px; --ring-color: #085DD4; --ring-track: #C4E4FF; margin: 5em 0; }
.tcp-dyk__inner { display: flex; width: 100%; }
.tcp-dyk__left { width: 58.3333%; }
.tcp-dyk__right { width: 33.3333%; margin-left: 8.3333%; padding-left: 3.1667%; padding-right: 3.1667%;
  position: relative; border-radius: 24px; background: #fff; border: 1px solid #E2F2FF; }

.tcp-dyk__right.has-dot-bg{
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.6' fill='%23E9EEF7'/%3E%3C/svg%3E")
    top left / 20px 20px repeat;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 1024px){
  /* Stack for smaller screens */
  .tcp-dyk__inner { display: block; }
  .tcp-dyk__left, .tcp-dyk__right { width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
  .tcp-dyk__right { margin-top: 24px; }
  .tcp-dyk__right.has-dot-bg { padding-left: 20px; padding-right: 20px; }
}

/* ====== Left side typography ====== */
.tcp-dyk__eyebrow { font-size: 14px; font-weight: 400; color: #346860; margin: 0 0 .9rem !important; letter-spacing: .02em; }
.tcp-dyk__h2 { font-size: 48px; color: #02182E; margin-top: 0 !important; margin-bottom: .75rem !important; line-height: 1.12; }
.tcp-dyk__body { color: #1c2a39; opacity: .9; }

/* ====== Ring ====== */
.tcp-dyk__ring { width: var(--ring-size); height: var(--ring-size); position: relative; margin: 0 auto; display: grid; place-items: center; }
.tcp-dyk__svg { width: 100%; height: 100%; overflow: visible; }
.tcp-dyk__circle { fill: none; stroke-linecap: round; stroke-width: 10px; }
.tcp-dyk__circle--track { stroke: var(--ring-track); }
.tcp-dyk__circle--value { stroke: var(--ring-color); }
.tcp-dyk__pct { position: absolute; font-weight: 700; font-size: clamp(28px, 5vw, 44px); }

/* ====== Callout + footnote ====== */
.tcp-dyk__callout { margin-top: 16px; padding: 14px 16px; background: #E2F2FF; border: 1px solid #E2F2FF; border-radius: 8px; font-size: 15px; }
.tcp-dyk__callout p { color: #5C5C5C; }
.tcp-dyk__footnote { margin-top: 10px; color: #6b778c; font-size: 12px; text-align: center; }