/* Homepage Highlights (2026-10-06): two story-style circles, Student wins and Gains, like Instagram
   highlights. Filled from Supabase site_highlights by js/highlights.js; hidden while both are empty. */
.hl[hidden] { display: none; }
.hl { padding-block: clamp(2rem, 5vw, 3.5rem); }
.hl-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 1.5rem; }
.hl-row { display: flex; gap: clamp(1.25rem, 4vw, 2.5rem); flex-wrap: wrap; }
.hl-btn { display: grid; justify-items: center; gap: .6rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--bone); font: 500 .9rem/1.2 var(--f-text, system-ui); }
.hl-btn[hidden] { display: none; }
.hl-ring { width: clamp(84px, 18vw, 108px); aspect-ratio: 1; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, var(--gold-lo), var(--gold-hi), var(--gold), var(--gold-lo)); transition: transform .2s ease; }
.hl-ring.gains { background: conic-gradient(from 210deg, #1f6f4a, #4fd18b, #2fa56b, #1f6f4a); }
.hl-btn:hover .hl-ring, .hl-btn:focus-visible .hl-ring { transform: scale(1.04); }
.hl-ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--ink, #0d0d0f); background: var(--ink-2); }
.hl-btn small { color: var(--bone-3); font-size: .75rem; }

/* Story viewer */
.hl-view { position: fixed; inset: 0; z-index: 2147483000; background: #050507; display: grid; place-items: center; }
.hl-view[hidden] { display: none; }
.hl-stage { position: relative; width: min(100vw, 460px); height: min(100dvh, 820px); display: grid; grid-template-rows: auto 1fr auto; }
.hl-bars { display: flex; gap: 4px; padding: 12px 12px 6px; }
.hl-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(238, 234, 225, .25); overflow: hidden; }
.hl-bars i b { display: block; height: 100%; width: 0; background: var(--bone); }
.hl-bars i.done b { width: 100%; }
.hl-top { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 8px; color: var(--bone); font-size: .875rem; }
.hl-x { background: none; border: 0; color: var(--bone); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.hl-img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.hl-cap { padding: 10px 14px 16px; color: var(--bone-2); font-size: .8125rem; line-height: 1.45; text-align: center; }
.hl-tap { position: absolute; top: 60px; bottom: 60px; width: 40%; background: none; border: 0; cursor: pointer; }
.hl-tap.prev { left: 0; } .hl-tap.next { right: 0; }
@media (prefers-reduced-motion: reduce) { .hl-ring { transition: none; } }

/* 10-06 (Gerb): Highlights now sit top right of "The work speaks" instead of their own section.
   Two bubbles in view; little arrows slide to more once there are more than fit. */
.hl.hl-inline { padding: 0; display: flex; align-items: center; gap: .5rem; max-width: 100%; }
.hl.hl-inline[hidden] { display: none; }
.hl-inline .hl-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: clamp(1rem, 3vw, 1.75rem); --hlw: clamp(104px, 27vw, 118px); max-width: calc(2 * var(--hlw) + clamp(1rem, 3vw, 1.75rem) + 8px); padding: 4px; }
.hl-inline .hl-row::-webkit-scrollbar { display: none; }
.hl-inline .hl-btn { scroll-snap-align: start; flex: none; width: var(--hlw); }
.hl-arrow { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--bone-2); cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.hl-arrow[hidden] { display: none; }
.hl-arrow:hover, .hl-arrow:focus-visible { border-color: var(--gold); color: var(--gold-hi); }
.hl-arrow:disabled { opacity: .3; cursor: default; }
.hl-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proof-head { align-items: center; }
.gp-res-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: var(--s-7, 3rem); }
.gp-res-head .pg-head { margin-bottom: 0; }
@media (max-width: 720px) { .hl.hl-inline { margin-top: .25rem; } }