/* AccelaStudy AI competition family: the component layer the five competition
   sites share (words, academic-bowl, science-competitions, competition-math,
   competitions). Loaded through Custom.ExtraStylesheets, after the shared
   style.css, by those five sites and no other (2026-10-12).

   Every color is a shared token from style.css (:root and .dark), so one rule
   set serves both themes. The few literal HSL values are the fleet's own
   contrast shades (the accent chip and the accent button fill in style.css),
   not new colors. Cyan is not used here: it belongs to approved
   knowledge-graph art only (websites/CLAUDE.md, Branding). */

/* ── Layout ─────────────────────────────────────────────────────────────── */
.cmp-wrap { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .cmp-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .cmp-wrap { padding-left: 2rem; padding-right: 2rem; } }
.cmp-wrap--narrow { max-width: 48rem; }
.cmp-section { padding: 4rem 0; }
@media (min-width: 768px) { .cmp-section { padding: 5.5rem 0; } }
.cmp-section--tint { background: hsl(var(--muted) / 0.5); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.cmp-page section[id], .cmp-page [data-anchor] { scroll-margin-top: 5.5rem; }
.cmp-head { max-width: 46rem; margin: 0 auto 2.75rem; text-align: center; }
.cmp-head--left { margin-left: 0; text-align: left; }

.cmp-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .cmp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .cmp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Type ───────────────────────────────────────────────────────────────── */
.cmp-eyebrow { color: hsl(var(--accent)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.75rem; }
.cmp-h1 { color: hsl(var(--foreground)); font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.cmp-h2 { color: hsl(var(--foreground)); font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.cmp-h3 { color: hsl(var(--foreground)); font-size: 1.125rem; line-height: 1.35; font-weight: 700; margin: 0; }
.cmp-lead { color: hsl(var(--muted-foreground)); font-size: 1.0625rem; line-height: 1.7; margin: 1rem 0 0; }
.cmp-body { color: hsl(var(--muted-foreground)); line-height: 1.7; margin: 0.5rem 0 0; }
.cmp-body a, .cmp-lead a, .cmp-link { color: hsl(var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.cmp-body a:hover, .cmp-lead a:hover, .cmp-link:hover { text-decoration: none; }
.cmp-small { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.cmp-strong { color: hsl(var(--foreground)); font-weight: 700; }
.cmp-math { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; color: hsl(var(--foreground)); font-weight: 600; }

/* ── Status: Coming Soon, the price slot, the sample label ──────────────────
   The pill's text takes the fleet's chip shades (style.css, "Accent text on
   an accent tint"): L=32% in light and L=74% in dark, which clear 4.5:1 on its
   own tint over card, background, and muted in both themes. */
.cmp-soon { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; color: hsl(207 55% 32%); background: hsl(var(--accent) / 0.1); border: 1px solid hsl(var(--accent) / 0.35); }
.dark .cmp-soon { color: hsl(207 55% 74%); background: hsl(var(--accent) / 0.14); border-color: hsl(var(--accent) / 0.45); }
.cmp-soon__dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
.cmp-soon--sm { font-size: 0.6875rem; padding: 0.2rem 0.55rem; gap: 0.35rem; }
.cmp-soon--sm .cmp-soon__dot { width: 0.375rem; height: 0.375rem; }
.cmp-price { color: hsl(var(--foreground)); }
.cmp-price__lead { font-weight: 800; }
.cmp-sample-tag { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1.5px dashed hsl(var(--muted-foreground) / 0.7); border-radius: 0.375rem; padding: 0.25rem 0.55rem; }
.cmp-chip { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700; color: hsl(207 55% 32%); background: hsl(var(--accent) / 0.1); border-radius: 9999px; padding: 0.2rem 0.6rem; }
.dark .cmp-chip { color: hsl(207 55% 74%); background: hsl(var(--accent) / 0.14); }

/* ── Buttons ───────────────────────────────────────────────────────────────
   The solid fill is L=40% Renkara Blue in both themes (white text 5.6:1); the
   dark theme's lifted --accent is for text, not fills (style.css). */
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem; border-radius: 9999px; font-weight: 700; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; background: hsl(207 55% 40%); color: #fff; border: 1.5px solid transparent; transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.cmp-btn:hover { opacity: 0.9; }
.cmp-btn:focus-visible, .cmp-ghost-link:focus-visible { outline: 3px solid hsl(var(--accent)); outline-offset: 3px; }
.cmp-btn--ghost { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.cmp-btn--ghost:hover { opacity: 1; border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
.cmp-btn--sm { min-height: 2.25rem; padding: 0 1rem; font-size: 0.8125rem; }
.cmp-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cmp-btn { transition: none; } }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.cmp-hero { position: relative; overflow: hidden; padding: 3rem 0 4rem; border-bottom: 1px solid hsl(var(--border)); background: radial-gradient(60rem 30rem at 85% -10%, hsl(var(--accent) / 0.1), transparent 70%), hsl(var(--background)); }
@media (min-width: 1024px) { .cmp-hero { padding: 5rem 0 5.5rem; } }
.cmp-hero__grid { display: grid; gap: 2.75rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cmp-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; } }
.cmp-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.cmp-hero__audience { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.cmp-hero__body { font-size: 1.125rem; line-height: 1.7; color: hsl(var(--muted-foreground)); margin: 1.25rem 0 0; max-width: 36rem; }
.cmp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; }
.cmp-hero__note { margin: 1rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* ── Plates: the subject illustrations ─────────────────────────────────── */
.cmp-plate { position: relative; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1.25rem; padding: 1.25rem; box-shadow: 0 1px 2px hsl(var(--navy) / 0.05), 0 24px 48px -28px hsl(var(--navy) / 0.35); }
@media (min-width: 640px) { .cmp-plate { padding: 1.75rem; } }
.dark .cmp-plate { box-shadow: 0 24px 48px -28px hsl(0 0% 0% / 0.6); }
.cmp-plate--grid { background-image: linear-gradient(hsl(var(--border) / 0.65) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border) / 0.65) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.cmp-plate--ruled { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, hsl(var(--border) / 0.8) 35px, hsl(var(--border) / 0.8) 36px); }
.cmp-plate__label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.cmp-plate__caption { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.cmp-figure { margin: 0; }
.cmp-figure svg { display: block; width: 100%; height: auto; }

/* SVG paint, from tokens, so a drawing follows the theme. */
.cmp-fill-ink { fill: hsl(var(--foreground)); }
.cmp-fill-muted { fill: hsl(var(--muted-foreground)); }
.cmp-fill-accent { fill: hsl(var(--accent)); }
.cmp-fill-card { fill: hsl(var(--card)); }
.cmp-fill-bg { fill: hsl(var(--background)); }
.cmp-fill-tint { fill: hsl(var(--accent) / 0.12); }
.cmp-fill-none { fill: none; }
.cmp-stroke-ink { stroke: hsl(var(--foreground)); }
.cmp-stroke-muted { stroke: hsl(var(--muted-foreground)); }
.cmp-stroke-accent { stroke: hsl(var(--accent)); }
.cmp-stroke-border { stroke: hsl(var(--border)); }
.cmp-svg-label { font-family: inherit; font-size: 13px; font-weight: 600; }
.cmp-svg-label--sm { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.cmp-svg-label--lg { font-size: 18px; font-weight: 800; }
.cmp-motif { display: block; flex-shrink: 0; }
.cmp-motif--sm { width: 2.25rem; height: 2.25rem; }
.cmp-motif--md { width: 3rem; height: 3rem; }
.cmp-motif--lg { width: 4.5rem; height: 4.5rem; }
.cmp-motif__text { font-family: inherit; font-size: 17px; font-weight: 800; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cmp-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; padding: 1.5rem; height: 100%; }
.cmp-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.cmp-card ul:not(.cmp-family) { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.cmp-card ul:not(.cmp-family) > li { position: relative; padding-left: 1.25rem; margin-top: 0.4rem; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.6; }
.cmp-card ul:not(.cmp-family) > li::before { content: ""; position: absolute; left: 0.2rem; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: hsl(var(--accent)); }
.cmp-card--track { border-top: 3px solid hsl(var(--accent)); }

/* Numbered steps (the adaptive-preparation explanation). */
.cmp-steps { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: cmp-step; }
@media (min-width: 768px) { .cmp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cmp-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cmp-steps > li { counter-increment: cmp-step; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; padding: 1.5rem; }
.cmp-steps > li::before { content: counter(cmp-step, decimal-leading-zero); display: block; font-family: "Fira Code", ui-monospace, monospace; font-size: 1.5rem; font-weight: 700; line-height: 1; color: hsl(var(--accent)); margin-bottom: 0.875rem; }

/* ── Sample Preview frames ──────────────────────────────────────────────── */
.cmp-sample { background: hsl(var(--card)); border: 1.5px dashed hsl(var(--muted-foreground) / 0.5); border-radius: 1.25rem; padding: 1.25rem; }
@media (min-width: 768px) { .cmp-sample { padding: 2rem; } }
.cmp-sample__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.cmp-sample__title { font-size: 1rem; font-weight: 700; color: hsl(var(--foreground)); margin: 0; }
.cmp-sample__note { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.cmp-sample-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cmp-sample-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmp-sample-grid--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* Native reveals: <details class="cmp-reveal">. No height animation (it
   would need script and ignore reduced motion); the chevron turns, and stops
   turning when motion is reduced. */
.cmp-reveal { border: 1px solid hsl(var(--border)); border-radius: 0.875rem; background: hsl(var(--background)); margin-top: 0.875rem; }
.cmp-reveal > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.125rem; font-weight: 700; color: hsl(var(--foreground)); border-radius: 0.875rem; }
.cmp-reveal > summary::-webkit-details-marker { display: none; }
.cmp-reveal > summary:hover { background: hsl(var(--muted) / 0.6); }
.cmp-reveal > summary:focus-visible { outline: 3px solid hsl(var(--accent)); outline-offset: 2px; }
.cmp-reveal__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); transition: transform 0.2s ease; }
.cmp-reveal[open] > summary .cmp-reveal__icon { transform: rotate(180deg); }
.cmp-reveal__body { padding: 0.25rem 1.125rem 1.125rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.cmp-reveal__body > * + * { margin-top: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .cmp-reveal__icon { transition: none; } }

/* Steppers: [data-stepper]. Without script every step shows; competitions.js
   hides all but the first and reveals the rest one at a time. */
.cmp-stepper__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.cmp-stepper__list > li { border: 1px solid hsl(var(--border)); border-radius: 0.875rem; background: hsl(var(--background)); padding: 1rem 1.125rem; }
.cmp-stepper__list > li[hidden] { display: none; }
.cmp-stepper__list > li:focus { outline: none; }
.cmp-stepper__list > li:focus-visible { outline: 3px solid hsl(var(--accent)); outline-offset: 2px; }
.cmp-stepper__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.cmp-stepper__status { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.cmp-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.cmp-step-num { font-family: "Fira Code", ui-monospace, monospace; font-size: 0.8125rem; font-weight: 700; color: hsl(var(--foreground)); }

/* An answer, once revealed. Accent, not emerald: emerald means "live". */
.cmp-answer { border-left: 4px solid hsl(var(--accent)); background: hsl(var(--accent) / 0.08); border-radius: 0 0.75rem 0.75rem 0; padding: 0.875rem 1rem; color: hsl(var(--foreground)); }
.cmp-answer strong { font-weight: 800; }

/* ── Comparison table ───────────────────────────────────────────────────── */
/* position: relative makes the wrapper the containing block of the table's
   .sr-only text (absolutely positioned). Without it that text escaped the
   scroll clip and widened the whole page by 206px at 390px (found 2026-10-12). */
.cmp-table-wrap { position: relative; overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card)); }
.cmp-table-wrap:focus-visible { outline: 3px solid hsl(var(--accent)); outline-offset: 3px; }
.cmp-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.9375rem; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: middle; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.cmp-table thead th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.7); }
.cmp-table tbody th { color: hsl(var(--foreground)); font-weight: 700; }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table__option { display: block; margin-bottom: 0.4rem; }

/* ── Explore All Competitions (every product site) ─────────────────────── */
.cmp-explore { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cmp-explore { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; } }
.cmp-explore__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.25rem 0 1.5rem; }
.cmp-explore__list { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.cmp-explore__compare-title { margin: 3rem 0 1rem; }
.cmp-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; padding: 0.875rem 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.875rem; }
.cmp-mini__name { flex: 1; min-width: 0; font-weight: 700; color: hsl(var(--foreground)); }
.cmp-mini__name a { color: inherit; text-decoration: underline; text-decoration-color: hsl(var(--accent) / 0.55); text-underline-offset: 3px; }
.cmp-mini__name a:hover { color: hsl(var(--accent)); }
.cmp-mini__here { font-weight: 500; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.cmp-mini--current { border-color: hsl(var(--accent) / 0.6); box-shadow: inset 3px 0 0 hsl(var(--accent)); }

/* ── Audience cards ─────────────────────────────────────────────────────── */
.cmp-audience { display: flex; gap: 1rem; align-items: flex-start; }
.cmp-audience__icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); }
.cmp-audience__icon svg { width: 1.25rem; height: 1.25rem; }

/* ── Scope note (what is and is not covered) ────────────────────────────── */
.cmp-scope { border: 1px solid hsl(var(--border)); border-left: 4px solid hsl(var(--foreground) / 0.6); border-radius: 0 1rem 1rem 0; background: hsl(var(--card)); padding: 1.25rem 1.5rem; }
.cmp-scope__title { font-weight: 700; color: hsl(var(--foreground)); margin: 0 0 0.35rem; }

/* ── Subject treatments ─────────────────────────────────────────────────── */
/* Spelling & Vocabulary: the dictionary entry. */
.cmp-entry__word { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: hsl(var(--foreground)); margin: 0; }
.cmp-entry__dot { color: hsl(var(--accent)); padding: 0 0.04em; }
.cmp-entry__word--inline { display: inline; font-size: 1.375rem; letter-spacing: 0.01em; }
.cmp-entry__pron { font-size: 1.0625rem; color: hsl(var(--foreground)); margin: 0.5rem 0 0; }
.cmp-entry__pos { font-style: italic; color: hsl(var(--muted-foreground)); margin-left: 0.5rem; font-size: 0.9375rem; }
.cmp-entry__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid hsl(var(--border)); }
.cmp-entry__key { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding-top: 0.15rem; }
.cmp-entry__val { color: hsl(var(--foreground)); line-height: 1.6; }
.cmp-family { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cmp-family > li { font-weight: 600; font-size: 0.9375rem; color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 9999px; padding: 0.25rem 0.75rem; }
.cmp-family mark { background: none; color: hsl(var(--accent)); font-weight: 800; }
.cmp-analogy { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-weight: 800; letter-spacing: 0.02em; color: hsl(var(--foreground)); text-align: center; padding: 1rem; border-radius: 0.875rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); }
.cmp-choices { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cmp-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-choices > li { border: 1px solid hsl(var(--border)); border-radius: 0.625rem; padding: 0.55rem 0.8rem; color: hsl(var(--foreground)); background: hsl(var(--background)); }
.cmp-choices__key { font-weight: 800; margin-right: 0.4rem; }

/* Academic Bowl: the clue composition. */
.cmp-clue { color: hsl(var(--foreground)); line-height: 1.65; }

/* Two-column "same word, two checks" diagram on the words site, and the
   three-layer explanation on the academic bowl site. */
.cmp-split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .cmp-split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cmp-split--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Bundle hub ─────────────────────────────────────────────────────────── */
.cmp-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.cmp-quad__cell { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 9rem; }
.cmp-quad__cell svg { width: 100%; height: auto; max-height: 7.5rem; }
.cmp-quad__name { font-size: 0.8125rem; font-weight: 700; color: hsl(var(--foreground)); margin: 0; }
.cmp-panel { display: flex; flex-direction: column; gap: 1rem; }
.cmp-panel__name { font-size: 1.125rem; font-weight: 800; color: hsl(var(--foreground)); margin: 0; }
.cmp-panel__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: auto; padding-top: 0.5rem; }
.cmp-ghost-link { font-weight: 700; font-size: 0.9375rem; color: hsl(var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.cmp-ghost-link:hover { text-decoration: none; }

/* In-page anchors scroll smoothly only for visitors who have not asked for
   reduced motion (no `scroll-smooth` class on <html>, which forces it). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Academic Bowl: four clue cards around one hidden answer.
   Phones: the clues stack along a dashed line that ends at the answer node.
   640px and up: a 2x2 grid with the node in the middle, and an X of dashed
   connectors sized to the gaps, so each line visibly runs from a card's inner
   corner to the node (the cards are opaque and sit above the lines). */
.cmp-clues { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-left: 1.75rem; }
.cmp-clues::before { content: ""; position: absolute; left: 0.6rem; top: 1rem; bottom: 1.5rem; border-left: 2px dashed hsl(var(--accent) / 0.6); }
.cmp-clues .cmp-clues__lines { display: none; }
.cmp-clue-card { position: relative; z-index: 1; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.875rem; padding: 0.875rem; }
.cmp-clue-card::before { content: ""; position: absolute; left: -1.5rem; top: 1.1rem; width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: hsl(var(--card)); border: 2px solid hsl(var(--accent)); }
.cmp-clue-card p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5; color: hsl(var(--foreground)); }
.cmp-clues__center { position: relative; z-index: 2; margin-left: -1.75rem; width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #fff; background: hsl(207 55% 40%); box-shadow: 0 0 0 5px hsl(var(--card)); }
@media (min-width: 640px) {
  .cmp-clues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; padding-left: 0; }
  .cmp-clues::before, .cmp-clue-card::before { content: none; }
  .cmp-clues .cmp-clues__lines { display: block; position: absolute; left: 50%; top: 50%; width: 9rem; height: 9rem; transform: translate(-50%, -50%); pointer-events: none; }
  .cmp-clues__center { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); width: 3rem; height: 3rem; }
}
.cmp-clues__lines line { stroke: hsl(var(--accent) / 0.65); stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }

/* The header's Competitions menu: room for "Coming Soon" beside each product
   name on one line (the shared panel's 260px minimum wrapped both). Scoped to
   the family, since only these five sites load this stylesheet. */
#products-menu { min-width: 21rem; }
#products-menu a > span:last-child { white-space: nowrap; margin-left: 0.75rem; }