/* -- Kumon vertical overrides ------------------------------------------------
   Shares the hub's design system. Only the accent colour differs.
   Loaded only on /kumon/ pages.

   Accent: Deep Teal #0B7A7E -- precision and structure, distinct from
   Hotworx red (#c4332d), Primrose green (#1D7A4E),
   School of Rock amber (#B45309), Kiddie Academy blue (#2B5EA7)
   and Goddard plum (#8248A0).

   Measured contrast ratios:
     #0B7A7E on #f5f3f0 (paper):  4.63:1  AA text
     #0B7A7E on #111111 (dark):   3.67:1  AA large text / graphics
     #0B7A7E on #2d2d2d (card):   2.67:1
     #5EC3C7 on #2d2d2d (card):   6.66:1  AA text (accent-on-card)
     #085456 on #f5f3f0 (paper):  7.85:1  AAA text (accent-dark)
     #1A9BA0 on #111111 (dark):   5.73:1  AA text (accent-light)
*/

:root {
  --color-accent:         #0B7A7E;
  --color-accent-dark:    #085456;
  --color-accent-light:   #1A9BA0;
  --color-accent-on-card: #5EC3C7;  /* 6.66:1 on the #2d2d2d card surface */
  --color-tag-bg:   rgba(11, 122, 126, 0.08);
  --color-tag-text: #0B7A7E;
  --shadow-accent-glow: 0 0 20px rgba(11, 122, 126, 0.25);
}

.pillars__grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars__grid { grid-template-columns: 1fr; }
}

.fee-stack__layer--royalty    { background: rgba(11, 122, 126, 0.14); }
.fee-stack__layer--materials  { background: rgba(11, 122, 126, 0.10); }
.fee-stack__layer--franchise  { background: rgba(11, 122, 126, 0.07); }

/* Per-student royalty visualisation -- unique to Kumon */
.royalty-viz { max-width: 700px; }

.royalty-viz__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 1rem);
  margin-bottom: var(--space-sm, 1rem);
}

.royalty-viz__label {
  flex: 0 0 200px;
  font-weight: 600;
  font-size: 0.95rem;
}

.royalty-viz__track {
  flex: 1;
  min-width: 0;
}

.royalty-viz__bar {
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm, 1rem);
  font-weight: 600;
  font-size: 0.9rem;
  transition: width 1s ease-out;
}

.royalty-viz__value {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.royalty-viz__compare {
  margin-top: var(--space-md, 1.5rem);
  padding: var(--space-sm, 1rem);
  background: var(--color-tag-bg, rgba(11, 122, 126, 0.08));
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.numbers__value--fade {
  animation: none;
}

@media (max-width: 560px) {
  .royalty-viz__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .royalty-viz__label { flex: none; }
  .royalty-viz__bar { width: 100% !important; }
}

.royalty-viz__bar--50   { background: var(--color-accent-on-card, #5EC3C7); color: var(--color-text-on-light, #1a1a1a); }
.royalty-viz__bar--100  { background: var(--color-accent, #0B7A7E); color: var(--color-text-light, #f5f3f0); }
.royalty-viz__bar--150  { background: var(--color-accent-dark, #085456); color: var(--color-text-light, #f5f3f0); }
.royalty-viz__bar--200  { background: var(--color-accent-dark, #085456); color: var(--color-text-light, #f5f3f0); }

.capital-stack-viz__layer--equity { background: #5ec3c7; color: var(--color-text-on-light, #1a1a1a); }
.capital-stack-viz__layer--sba    { background: #0b7a7e; color: var(--color-text-light, #f5f3f0); }
.capital-stack-viz__layer--self   { background: #1a9ba0; color: var(--color-text-light, #f5f3f0); }