.kg-table-wrap { max-width: 100%; margin: 1.5rem 0; overflow-x: auto; border: 1px solid #cad6c2; border-radius: 16px; background: #fffdf7; }
.kg-table-wrap table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.65; }
.kg-table-wrap caption { padding: 18px 20px; text-align: left; color: #496553; font-size: .85rem; }
.kg-table-wrap :is(th,td) { padding: 16px 20px; border-top: 1px solid #dae2d2; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.kg-table-wrap thead th { background: #e7efdf; font-weight: 600; }
.kg-table-wrap tbody th { font-weight: 500; }
.kg-punnett :is(th,td) { text-align: center; }
.kg-punnett td { font-weight: 600; font-size: 1.05rem; }
.kg-punnett small { display: inline-block; font-weight: 400; font-size: .8rem; }
.kg-punnett .kg-is-point { background: #e5eee4; }
.kg-layers { margin: 1.5rem 0; }
.kg-layer-grid { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); gap: 18px; align-items: center; padding: 22px; border: 1px solid #c6d3bf; border-radius: 20px; background: #edf3e9; }
.kg-layer { display: grid; gap: 8px; min-width: 0; padding: 20px 12px; text-align: center; border-radius: 14px; background: #fffdf7; }
.kg-layer strong { font-size: 1.55rem; font-weight: 500; }
.kg-layer span, .kg-layer small { font-size: .85rem; line-height: 1.6; }
.kg-layers .kg-layer-plus { display: block; width: 28px; height: 28px; justify-self: center; color: #597b69; }
.kg-layers figcaption { margin-top: 10px; color: #56705e; font-size: .82rem; line-height: 1.65; }
.kg-colour-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 1.5rem 0 12px; }
.kg-colour-comparison figure { min-width: 0; margin: 0; padding: 14px 16px 18px; border: 1px solid #cad6c2; border-radius: 18px; background: #fffdf7; text-align: center; }
.kg-colour-comparison .kg-cat { display: block; width: 100%; max-width: 280px; height: auto; margin-inline: auto; }
.kg-colour-comparison figcaption strong { display: block; margin: 2px 0 6px; font-size: 1.1rem; font-weight: 600; }
.kg-colour-comparison figcaption span { display: block; font-size: .85rem; line-height: 1.65; color: #496553; }
.kg-schematic-note { font-size: .84rem; line-height: 1.7; color: #56705e; }
@media(max-width:600px) {
  .kg-table-wrap { margin-block: 1.1rem; }
  .kg-table-wrap :is(th,td) { padding: 12px 10px; font-size: .83rem; }
  .kg-table-wrap caption { padding: 14px 12px; }
  .kg-punnett small { font-size: .72rem; }
  .kg-layer-grid { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 16px; }
  .kg-colour-comparison { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .kg-colour-comparison figure { padding: 10px 16px 16px; }
  .kg-colour-comparison .kg-cat { max-width: 250px; }
}