/* Radar only. Surfaces, typefaces and colors inherit Gramium's design tokens. */
.radar-main { width: min(100% - 48px, 1000px); margin: 0 auto; container-type: inline-size; }
.radar-main *, .radar-main *::before, .radar-main *::after { box-sizing: border-box; }
.radar-main :is(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
.radar-main :is(section, article, figure, aside, div) { min-width: 0; }
.radar-main :is(p, li, dd, a) { overflow-wrap: anywhere; }
.radar-main .radar-eyebrow { color: var(--text-secondary); font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.radar-main .radar-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 64px 0 56px; }
.radar-main .radar-hero h1 { margin-top: 16px; font-size: clamp(2.125rem, 3.8cqi + .5rem, 3.125rem); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.radar-main .radar-lead { margin-top: 24px; max-width: 460px; color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.65; }
.radar-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.radar-main .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; height: auto; padding: 12px 18px; line-height: 1.4; text-align: center; }
.radar-main .button svg { width: 16px; height: 16px; flex: none; }
.radar-main :is(a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.radar-main .radar-reassurance { margin-top: 16px; color: var(--text-secondary); font-size: .8125rem; line-height: 1.65; }
.radar-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; color: var(--accent); font-size: .875rem; }
.radar-main :is(.radar-example, .radar-feature-detail, .radar-plan) { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--bg-surface); }
.radar-example figcaption { display: grid; gap: 4px; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
.radar-example-label { color: var(--accent); font-size: .8125rem; font-weight: 600; }
.radar-example-body { padding: 24px; }
.radar-main .radar-example h2 { margin-top: 12px; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.02em; }
.radar-main .radar-example-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.radar-example-values dt { color: var(--text-secondary); font-size: .8125rem; line-height: 1.5; }
.radar-example-values dd { margin-top: 4px; font-family: var(--mono); font-size: clamp(1.75rem, 3.4cqi, 2.25rem); line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.radar-main .radar-example-explanation { margin-top: 16px; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.radar-notification { margin-top: 20px; padding: 16px; border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--bg-elevated); }
.radar-notification strong { display: block; margin-top: 8px; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.radar-main .radar-notification > p:last-child { margin-top: 8px; color: var(--text-secondary); font-size: .8125rem; line-height: 1.65; }
.radar-main .radar-example-footnote { margin-top: 16px; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
.radar-section { padding: 48px 0; border-top: 1px solid var(--border-subtle); scroll-margin-top: 96px; }
.radar-section-heading { max-width: 640px; }
.radar-main .radar-section-heading h2 { margin-top: 8px; font-size: clamp(1.5rem, 2.6cqi, 1.875rem); line-height: 1.25; }
.radar-main .radar-section-heading > p:last-child:not(.radar-eyebrow) { margin-top: 12px; color: var(--text-secondary); line-height: 1.6; }
.radar-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-top: 32px; }
.radar-feature + .radar-feature { margin-top: 32px; border-top: 1px solid var(--border-subtle); }
.radar-feature-number { display: block; margin-bottom: 12px; color: var(--accent); font-family: var(--mono); font-size: .8125rem; }
.radar-main .radar-feature h3 { font-size: 1.125rem; line-height: 1.4; }
.radar-main .radar-feature-copy > p { margin-top: 12px; color: var(--text-secondary); font-size: .9375rem; line-height: 1.7; }
.radar-feature-detail { padding: 20px 24px; }
.radar-main .radar-detail-label { color: var(--text-secondary); font-size: .75rem; font-weight: 500; line-height: 1.6; }
.radar-main .radar-feature-detail > p:not(.radar-detail-label) { margin-top: 8px; font-size: .8125rem; line-height: 1.65; }
.radar-main :is(.radar-rule-list, .radar-observation-list) { margin-top: 16px; }
.radar-main :is(.radar-rule-list, .radar-observation-list) > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: .8125rem; line-height: 1.5; }
.radar-main :is(.radar-rule-list, .radar-observation-list) dt { color: var(--text-secondary); }
.radar-main :is(.radar-rule-list, .radar-observation-list) dd { text-align: right; }
.radar-rule-list dd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.radar-main .radar-feature-detail .radar-detail-note { margin-top: 12px; color: var(--text-secondary); font-size: .75rem; }
.radar-main .radar-feature-detail .radar-calculation { margin: 16px 0 8px; font-family: var(--mono); font-size: clamp(1rem, 2.2cqi, 1.375rem); font-variant-numeric: tabular-nums; }
.radar-calculation strong { color: var(--accent); font-weight: 500; }
.radar-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 28px 0 0; padding: 0; list-style: none; }
.radar-steps li > span { display: block; margin-bottom: 12px; color: var(--accent); font-family: var(--mono); font-size: .8125rem; }
.radar-main .radar-steps h3 { font-size: 1rem; line-height: 1.45; }
.radar-main .radar-steps li p { margin-top: 8px; color: var(--text-secondary); font-size: .875rem; line-height: 1.65; }
.radar-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; align-items: stretch; }
.radar-plan { display: flex; flex-direction: column; padding: 28px; }
.radar-main .radar-plan.is-pro { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-subtle)); }
.radar-main .radar-plan h3 { font-size: 1.0625rem; line-height: 1.5; }
.radar-plan-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.radar-plan-heading > span { color: var(--accent); font-size: .75rem; }
.radar-main .radar-plan-purpose { margin-top: 8px; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.radar-main .radar-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 24px; font-size: 2.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.radar-price small { color: var(--text-secondary); font-size: .875rem; font-weight: 400; letter-spacing: normal; }
.radar-main .radar-plan-allowance { margin-top: 8px; font-size: .9375rem; font-weight: 500; }
.radar-plan ul { display: grid; gap: 10px; margin: 24px 0; padding: 20px 0 0; border-top: 1px solid var(--border-subtle); list-style: none; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.radar-plan li { position: relative; padding-left: 16px; }
.radar-plan li::before { position: absolute; left: 0; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); content: ""; }
.radar-main .radar-pack-capacity { margin: 0 0 24px; padding: 16px; border-radius: 8px; background: var(--bg-elevated); color: var(--text-secondary); font-size: .8125rem; line-height: 1.65; }
.radar-pack-capacity strong { display: block; margin-bottom: 4px; color: var(--text-primary); font-weight: 500; }
.radar-plan .button { width: 100%; margin-top: auto; }
.radar-billing-note { display: grid; gap: 8px; margin-top: 20px; color: var(--text-secondary); font-size: .8125rem; line-height: 1.7; }
.radar-billing-note strong { color: var(--text-primary); font-weight: 500; }
.radar-billing-note code { font-family: var(--mono); font-size: inherit; }
.radar-limits { padding: 32px 0 48px; border-top: 1px solid var(--border-subtle); }
.radar-main .radar-limits h2 { font-size: 1rem; line-height: 1.5; }
.radar-main .radar-limits p { max-width: 760px; margin-top: 12px; color: var(--text-secondary); font-size: .8125rem; line-height: 1.7; }

/* Container queries also cover narrower columns inside the shared site shell. */
@container (max-width: 759px) {
  .radar-main .radar-hero { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; padding-top: 40px; }
  .radar-main .radar-hero h1 { max-width: 620px; font-size: clamp(2.125rem, 6.5cqi, 2.75rem); }
  .radar-main .radar-lead { max-width: 600px; }
  .radar-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .radar-steps ol { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .radar-main .radar-example-values dd { font-size: 2rem; }
}

@container (max-width: 539px) {
  .radar-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .radar-actions .button { flex: 1 1 100%; }
  .radar-plan { padding: 24px; }
  .radar-main .radar-feature-detail .radar-calculation { font-size: 1.125rem; }
}

@media (max-width: 720px) {
  .radar-main { width: calc(100% - 32px); }
  .radar-section { padding: 36px 0; }
  .radar-example figcaption, .radar-example-body, .radar-feature-detail { padding: 20px; }
  .radar-main .radar-hero { padding-bottom: 36px; }
}