:root {
  --analogies-navy: #1e2a44;
  --analogies-gold: #a97d41;
  --analogies-cream: #f5f0e9;
  --analogies-wash: #e8dfd2;
  --analogies-ink: var(--color-text);
  --analogies-muted: var(--color-text-muted);
  --analogies-rule: var(--color-border);
}

.fee-analogies { overflow: hidden; color: var(--analogies-ink); }
.fee-analogies h1,
.fee-analogies h2,
.fee-analogies h3 { font-family: var(--font-serif); font-weight: 500; }
.fee-analogies h2 { margin: .3rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.8rem); letter-spacing: -.045em; line-height: 1; }
.fee-analogies p { margin-top: 0; }
.fee-analogies-mark,
.fee-analogies-kicker { margin: 0 0 1rem; color: var(--analogies-gold); font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.fee-analogies-mark { color: var(--analogies-navy); font-family: var(--font-serif); font-size: .8rem; letter-spacing: .28em; }

.fee-analogies-hero { padding-block: clamp(3.5rem, 8vw, 7.5rem); background: var(--analogies-cream); }
.fee-analogies-hero-grid { display: grid; grid-template-columns: minmax(18rem, 1.05fr) minmax(17rem, .95fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; }
.fee-analogies-back { display: inline-block; margin-bottom: clamp(3.5rem, 9vw, 7rem); color: var(--analogies-muted); font-size: .7rem; font-weight: 750; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.fee-analogies-back:hover,
.fee-analogies-back:focus-visible { color: var(--analogies-gold); }
.fee-analogies-hero h1 { max-width: 9ch; margin: 0; color: var(--analogies-navy); font-size: clamp(4rem, 9vw, 8rem); letter-spacing: -.06em; line-height: .92; }
.fee-analogies-intro > p:first-child { max-width: 37rem; color: var(--analogies-muted); font-family: var(--font-serif); font-size: clamp(1.25rem, 2.5vw, 1.85rem); line-height: 1.45; }
.fee-analogies-scope { width: fit-content; margin: 2rem 0 0; padding: .6rem .8rem; color: var(--analogies-navy); background: #fff; border-left: .2rem solid var(--analogies-gold); font-size: .66rem; font-weight: 800; letter-spacing: .11em; line-height: 1.45; text-transform: uppercase; }

.fee-analogies-rule { padding-block: clamp(4.5rem, 9vw, 8rem); color: #fff; background: var(--analogies-navy); }
.fee-analogies-rule-grid { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(18rem, 1.3fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.fee-analogies-rule-number { display: flex; align-items: flex-start; color: #d7b982; font-family: var(--font-serif); line-height: .7; }
.fee-analogies-rule-number span { font-size: clamp(11rem, 25vw, 21rem); letter-spacing: -.1em; }
.fee-analogies-rule-number i { margin: .35em 0 0 .08em; font-size: clamp(2.5rem, 6vw, 5rem); font-style: normal; }
.fee-analogies-rule .fee-analogies-kicker { color: #d7b982; }
.fee-analogies-rule h2 { max-width: 10ch; color: #fff; }
.fee-analogies-rule-grid > div:last-child > p:not(.fee-analogies-kicker) { max-width: 48rem; color: rgba(255,255,255,.76); font-size: 1.06rem; line-height: 1.75; }

.fee-analogies-index { position: sticky; z-index: 2; top: 0; background: #fff; border-bottom: 1px solid var(--analogies-rule); }
.fee-analogies-index .shell { display: grid; grid-template-columns: repeat(6, 1fr); padding-block: 0; }
.fee-analogies-index a { display: flex; gap: .55rem; align-items: center; justify-content: center; min-height: 3.6rem; padding: .65rem; color: var(--analogies-navy); border-left: 1px solid var(--analogies-rule); font-size: .67rem; font-weight: 750; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.fee-analogies-index a:last-child { border-right: 1px solid var(--analogies-rule); }
.fee-analogies-index a:hover,
.fee-analogies-index a:focus-visible { color: #fff; background: var(--analogies-navy); }
.fee-analogies-index span { color: var(--analogies-gold); font-family: var(--font-serif); font-size: 1rem; }

.fee-analogy { scroll-margin-top: 4rem; padding-block: clamp(4.5rem, 10vw, 9rem); }
.fee-analogy:nth-child(even) { background: var(--analogies-cream); }
.fee-analogy-grid { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(20rem, 1.1fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.fee-analogy:nth-child(even) .fee-analogy-art { grid-column: 2; }
.fee-analogy:nth-child(even) .fee-analogy-copy { grid-column: 1; grid-row: 1; }
.fee-analogy-art { min-width: 0; padding: clamp(1rem, 3vw, 2rem); background: linear-gradient(145deg, #fbf8f2, var(--analogies-wash)); border: 1px solid var(--analogies-rule); }
.fee-analogy-art svg { display: block; width: 100%; height: auto; }
.fee-analogy-art .art-line { fill: none; stroke: var(--analogies-navy); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.fee-analogy-art .art-dash { fill: none; stroke: var(--analogies-gold); stroke-dasharray: 9 9; stroke-linecap: round; stroke-width: 4; }
.fee-analogy-art .art-dot { fill: var(--analogies-gold); stroke: #fff; stroke-width: 3; }
.fee-analogy-art .art-label,
.fee-analogy-art .art-total { fill: var(--analogies-navy); font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.fee-analogy-art .art-water-fill,
.fee-analogy-art .art-house,
.fee-analogy-art .art-receipt { fill: color-mix(in srgb, var(--analogies-gold) 13%, white); }
.fee-analogy-art .art-water { stroke: var(--analogies-gold); }
.fee-analogy-art .art-wall { stroke-width: 9; }
.fee-analogy-art .art-mountain-back { fill: color-mix(in srgb, var(--analogies-navy) 8%, white); }
.fee-analogy-art .art-mountain { stroke-width: 6; }
.fee-analogy-art .art-flag { fill: var(--analogies-gold); stroke: var(--analogies-navy); stroke-width: 3; }
.fee-analogy-art .art-soil { stroke: var(--analogies-gold); stroke-width: 7; }
.fee-analogy-art .art-stem { stroke-width: 6; }
.fee-analogy-art .art-leaf,
.fee-analogy-art .art-grain,
.fee-analogy-art .art-seed { fill: color-mix(in srgb, var(--analogies-gold) 18%, white); stroke: var(--analogies-navy); stroke-linejoin: round; stroke-width: 4; }
.fee-analogy-art .art-house { stroke: var(--analogies-navy); stroke-width: 3; }
.fee-analogy-art .art-door { fill: #fff; stroke: var(--analogies-navy); stroke-width: 3; }
.fee-analogy-art .art-key-ring { fill: none; stroke: var(--analogies-gold); stroke-width: 9; }
.fee-analogy-art .art-key { stroke: var(--analogies-gold); stroke-width: 8; }
.fee-analogy-art .art-receipt { stroke: var(--analogies-navy); stroke-linejoin: round; stroke-width: 4; }
.fee-analogy-art .art-track { fill: color-mix(in srgb, var(--analogies-gold) 22%, white); stroke: var(--analogies-navy); stroke-width: 4; }
.fee-analogy-art .art-track-inner { fill: #fff; stroke: var(--analogies-navy); stroke-width: 4; }
.fee-analogy-art .art-finish,
.fee-analogy-art .art-check { fill: none; stroke: var(--analogies-navy); stroke-width: 3; }
.fee-analogy-copy h2 { max-width: 11ch; color: var(--analogies-navy); }
.fee-analogy-subtitle { margin-bottom: 2rem; color: var(--analogies-gold); font-family: var(--font-serif); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-style: italic; line-height: 1.25; }
.fee-analogy-body { max-width: 46rem; color: var(--analogies-muted); font-size: 1.06rem; line-height: 1.75; }
.fee-analogy-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--analogies-rule); border: 1px solid var(--analogies-rule); }
.fee-analogy-limits > div { padding: 1.25rem; background: #fff; }
.fee-analogy:nth-child(odd) .fee-analogy-limits > div { background: var(--analogies-cream); }
.fee-analogy-limits h3 { margin: 0 0 .65rem; color: var(--analogies-navy); font-family: var(--font-sans); font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fee-analogy-limits > div:last-child h3 { color: var(--analogies-gold); }
.fee-analogy-limits p { margin: 0; color: var(--analogies-muted); font-size: .85rem; line-height: 1.6; }

.fee-analogies-wrong { padding-block: clamp(4.5rem, 9vw, 8rem); color: #fff; background: var(--analogies-navy); }
.fee-analogies-wrong-grid { display: grid; grid-template-columns: minmax(15rem, .55fr) minmax(20rem, 1.45fr); gap: clamp(3rem, 9vw, 9rem); }
.fee-analogies-wrong .fee-analogies-kicker { color: #d7b982; }
.fee-analogies-wrong h2 { max-width: 11ch; color: #fff; }
.fee-analogies-wrong-grid > div p { max-width: 50rem; color: rgba(255,255,255,.76); font-size: 1.05rem; line-height: 1.75; }

.fee-analogies-close { padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--analogies-cream); }
.fee-analogies-close-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(20rem, 1.2fr); gap: clamp(3rem, 8vw, 8rem); }
.fee-analogies-close h2 { max-width: 10ch; color: var(--analogies-navy); }
.fee-analogies-close-grid > div > p:not(.fee-analogies-mark) { max-width: 38rem; color: var(--analogies-muted); font-size: 1.06rem; line-height: 1.7; }
.fee-analogies-close .button-row { margin-top: 2rem; }
.fee-analogies-close .button-light { color: #fff; background: var(--analogies-navy); border-color: var(--analogies-navy); }
.fee-analogies-important { padding-top: 1.25rem; border-top: 1px solid var(--analogies-rule); }
.fee-analogies-important h3 { margin: 0 0 1.25rem; color: var(--analogies-navy); font-family: var(--font-sans); font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.fee-analogies-important p { color: var(--analogies-muted); font-size: .72rem; line-height: 1.65; }

@media (max-width: 900px) {
  .fee-analogies-hero-grid,
  .fee-analogies-rule-grid,
  .fee-analogy-grid,
  .fee-analogies-wrong-grid,
  .fee-analogies-close-grid { grid-template-columns: 1fr; }
  .fee-analogies-rule-number { max-height: 13rem; }
  .fee-analogies-index { position: static; }
  .fee-analogies-index .shell { grid-template-columns: repeat(3, 1fr); }
  .fee-analogies-index a:nth-child(3) { border-right: 1px solid var(--analogies-rule); }
  .fee-analogies-index a:nth-child(n+4) { border-top: 1px solid var(--analogies-rule); }
  .fee-analogy:nth-child(even) .fee-analogy-art,
  .fee-analogy:nth-child(even) .fee-analogy-copy { grid-column: auto; grid-row: auto; }
  .fee-analogy:nth-child(even) .fee-analogy-copy { grid-row: 1; }
}

@media (max-width: 620px) {
  .fee-analogies-hero h1 { font-size: clamp(3.7rem, 19vw, 5.6rem); }
  .fee-analogies-index .shell { grid-template-columns: repeat(2, 1fr); }
  .fee-analogies-index a:nth-child(2n) { border-right: 1px solid var(--analogies-rule); }
  .fee-analogies-index a:nth-child(n+3) { border-top: 1px solid var(--analogies-rule); }
  .fee-analogy-limits { grid-template-columns: 1fr; }
  .fee-analogies-close .button-row { align-items: stretch; flex-direction: column; }
}