/* ---------- Education hub (/education). Classes start with eduhub-. Motion in src/js/edu-hub.js.
   The hero loop is an illustration of the integrated system for a made-up "Your Centre": five stages on
   a ring (get found, convert, follow up, reputation, the centre's own app) and the card for the active
   stage in the middle. Its screens stay light in both themes, like screenshots. Motion uses transform and
   opacity only, runs only while the loop is on screen, and is absent without html.motion (reduced
   motion), where the nodes still switch stages on click. */

/* Hero heading: the second half in the accent colour. */
.eduhub-hero .display { font-size: clamp(40px, 4.8vw, 64px); }
.eduhub-hero .display em { display: block; font-style: normal; color: #b23c0a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eduhub-hero .display em { color: var(--sun); } }
:root[data-theme="dark"] .eduhub-hero .display em { color: var(--sun); }
.eduhub-for-chip { white-space: normal; line-height: 1.3; }

/* ---------- Hero loop */
.eduhub-vis { display: grid; gap: 10px; min-width: 0; container: eduhub / inline-size; }
@media (max-width: 860px) { .eduhub-vis { width: 100%; max-width: 560px; justify-self: center; } }
.eduhub-loop { --d: 58px; --gold: #d4a648; position: relative; margin: 0; border-radius: 28px; isolation: isolate;
  background: radial-gradient(62% 62% at 50% 50%, rgba(212, 166, 72, 0.15), transparent 72%), var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 24, 29, 0.16); }
:root[data-theme="light"] .eduhub-loop { box-shadow: 0 0 0 1px rgba(140, 100, 30, 0.12), 0 24px 60px rgba(110, 80, 10, 0.16); }

.eduhub-ring { position: relative; aspect-ratio: 1; }
.eduhub-ring__track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eduhub-ring__track circle, .eduhub-ring__track path { fill: none; stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.eduhub-ring__track circle { stroke: var(--line-2); }
.eduhub-ring__track .eduhub-ring__back { stroke: var(--gold-line); stroke-width: 2; }

/* The orbit turns by 72deg per stage (--turn counts up, so it always moves forward). The trail is a 72deg
   arc of the ring behind the dot: at rest it lights the path from the last stage to the current one. */
.eduhub-ring__orbit { position: absolute; inset: 0; transform: rotate(calc(var(--turn, 0) * 72deg)); }
.eduhub-ring__trail { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -72deg, rgba(212, 166, 72, 0) 0deg, rgba(212, 166, 72, 0.55) 52deg, #f0cf7c 72deg, transparent 72deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(76% - 2.5px), #000 calc(76% - 2px), #000 calc(76% + 2px), transparent calc(76% + 2.5px));
  mask: radial-gradient(circle closest-side, transparent calc(76% - 2.5px), #000 calc(76% - 2px), #000 calc(76% + 2px), transparent calc(76% + 2.5px)); }
.eduhub-ring__dot { position: absolute; left: 50%; top: 12%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #f0cf7c; box-shadow: 0 0 0 3px rgba(212, 166, 72, 0.25), 0 0 16px 3px rgba(240, 207, 124, 0.7); }

/* Stage nodes: the disk sits on the ring, the label below it. */
.eduhub-nodes { position: absolute; inset: 0; }
.eduhub-node { position: absolute; z-index: 2; left: var(--x); top: var(--y); margin-top: calc(var(--d) / -2); transform: translateX(-50%); display: grid; justify-items: center; gap: 7px;
  padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.eduhub-node__disk { position: relative; display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%; background: var(--bg); color: var(--accent-text);
  font-size: calc(var(--d) * 0.4); box-shadow: inset 0 0 0 1.5px var(--gold-line), 0 6px 16px rgba(22, 24, 29, 0.12); }
.eduhub-node__disk::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, #f7e1a6, #d4a648); opacity: 0; }
.eduhub-node__disk::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); opacity: 0; }
.eduhub-node__disk .psg-ic { position: relative; stroke-width: 2; }
.eduhub-node__lbl { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 700 12px/1 var(--font-body); letter-spacing: -0.005em; color: var(--ink-2); white-space: nowrap; }
.eduhub-node__lbl b { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 3px; border-radius: 9999px; background: var(--chip); color: var(--ink-2); font: 700 9.5px/1 var(--font-body); }
.eduhub-node.is-on .eduhub-node__disk { transform: scale(1.12); color: #3a2304; }
.eduhub-node.is-on .eduhub-node__disk::before { opacity: 1; }
.eduhub-node.is-on .eduhub-node__lbl { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.eduhub-node.is-on .eduhub-node__lbl b { background: linear-gradient(135deg, #f7e1a6, #d4a648); color: #3a2304; }
.eduhub-node:hover .eduhub-node__lbl { color: var(--ink); }
.eduhub-node:focus-visible { outline: none; }
.eduhub-node:focus-visible .eduhub-node__disk { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Centre hub: the active stage's name, shown only when the cards sit below the ring (narrow stages). */
.eduhub-ring__hub { display: none; }

/* The stage cards, stacked in one cell; the active one shows. */
.eduhub-cards { position: absolute; z-index: 1; left: 50%; top: 50%; width: 51%; transform: translate(-50%, -50%); display: grid; }
.eduhub-card { grid-area: 1 / 1; align-self: center; display: grid; gap: 9px; align-content: start; min-width: 0; padding: 13px 13px 14px; border-radius: 16px; background: #fff; color: #16181d;
  box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 14px 34px rgba(22, 24, 29, 0.2); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); }
.eduhub-card.is-on { opacity: 1; visibility: visible; transform: none; }
.eduhub-card__k { display: flex; align-items: center; gap: 7px; font: 700 10px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #6b4a12; }
.eduhub-card__k b { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(135deg, #f7e1a6, #d4a648); color: #3a2304; font: 700 9px/1 var(--font-body); letter-spacing: 0; }
.eduhub-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 500 11px/1.3 var(--font-body); color: #4b505a; }
.eduhub-st { padding: 4px 7px; border-radius: 6px; background: #e6f6ea; color: #0d6a2f; font: 700 11px/1 var(--font-body); font-style: normal; white-space: nowrap; }
.eduhub-st--draft { background: #e0f5f3; color: #065c57; }

/* Card 1: a search and an ad, plus the feeds. */
.eduhub-q { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9999px; box-shadow: 0 0 0 1px #dfe1e5, 0 1px 4px rgba(32, 33, 36, 0.12); font: 400 12.5px/1.2 Arial, "Helvetica Neue", Helvetica, sans-serif; color: #202124; }
.eduhub-q svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #5f6368; stroke-width: 2.4; stroke-linecap: round; }
.eduhub-ad { display: grid; gap: 3px; padding: 0 2px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.eduhub-ad__sp { font: 700 10.5px/1.2 Arial, sans-serif; color: #202124; }
.eduhub-ad b { font: 400 13.5px/1.28 Arial, sans-serif; color: #1a0dab; }
.eduhub-plat { display: flex; flex-wrap: wrap; gap: 4px; }
.eduhub-plat i { padding: 4px 7px; border-radius: 9999px; background: #f1f3f5; color: #3c4048; font: 600 10.5px/1 var(--font-body); font-style: normal; }

/* Card 2: the landing page. */
.eduhub-page { display: grid; border-radius: 11px; overflow: hidden; box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08); }
.eduhub-page__bar { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: #eef0f3; font: 600 10.5px/1 var(--font-body); color: #3c4048; white-space: nowrap; overflow: hidden; }
.eduhub-page__bar svg { width: 9px; height: 9px; flex: none; fill: #0d7f37; }
.eduhub-page__body { display: grid; gap: 6px; justify-items: start; padding: 11px 11px 12px; background: linear-gradient(140deg, #f8f2e4, #ead6a2); }
.eduhub-page__body small { font: 700 9.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #6b5200; }
.eduhub-page__body b { font: 700 15px/1.15 var(--font-body); letter-spacing: -0.02em; color: #16181d; }
.eduhub-page__body em { padding: 7px 11px; border-radius: 9999px; background: #16181d; color: #fff; font: 700 11px/1 var(--font-body); font-style: normal; box-shadow: 0 5px 12px rgba(22, 24, 29, 0.22); }
.eduhub-page__facts { display: flex; flex-wrap: wrap; gap: 4px; }
.eduhub-page__facts i { padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); color: #3c4048; font: 600 9.5px/1.1 var(--font-body); font-style: normal; }

/* Card 3: the WhatsApp reply. */
.eduhub-chat { display: grid; gap: 6px; padding: 9px; border-radius: 11px; background: #efeae2; }
.eduhub-chat > span { max-width: 88%; padding: 7px 9px; border-radius: 9px; font: 500 11.5px/1.35 var(--font-body); color: #16181d; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.eduhub-chat__in { justify-self: start; background: #fff; border-top-left-radius: 2px; }
.eduhub-chat__out { justify-self: end; background: #d9fdd3; border-top-right-radius: 2px; }

/* Card 4: a review with the owner's reply. */
.eduhub-rev { display: grid; gap: 6px; }
.eduhub-rev__who { display: flex; align-items: center; gap: 7px; }
.eduhub-rev__who i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #087570; color: #fff; font: 700 11px/1 var(--font-body); font-style: normal; }
.eduhub-rev__who b { font: 700 12.5px/1 var(--font-body); color: #16181d; }
.eduhub-stars { margin-left: auto; color: #e8a400; font-size: 12px; letter-spacing: 1px; }
.eduhub-rev__txt { font: 500 12px/1.4 var(--font-body); color: #3c4048; }
.eduhub-rev__reply { display: grid; gap: 3px; padding: 7px 9px; border-radius: 9px; background: #f3f4f6; box-shadow: inset 2px 0 0 #d4a648; font: 500 11.5px/1.35 var(--font-body); color: #3c4048; }
.eduhub-rev__reply small { font: 700 9.5px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: #6b4a12; }

/* Card 5: app notifications. */
.eduhub-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 9px; border-radius: 11px; background: #f3f4f6; }
.eduhub-note > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #f7e1a6, #d4a648); color: #3a2304; font: 700 10px/1 var(--font-body); font-style: normal; }
.eduhub-note > i.eduhub-note__ai { background: #eee7fd; color: #4b2a8a; }
.eduhub-note > span { display: grid; gap: 2px; min-width: 0; font: 500 11px/1.3 var(--font-body); color: #4b505a; }
.eduhub-note b { font: 700 12px/1.25 var(--font-body); color: #16181d; }

/* Corner label for the loop. */
.eduhub-loop__tag { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 9999px;
  background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); font: 700 10.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.eduhub-loop__tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Pause control (shown by the script when the loop plays). */
.eduhub-loop__pause { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--chip); color: var(--ink); cursor: pointer; }
.eduhub-loop__pause svg { width: 12px; height: 12px; fill: currentColor; }
.eduhub-loop__pause .eduhub-ic-play, .eduhub-loop.is-paused .eduhub-loop__pause .eduhub-ic-pause { display: none; }
.eduhub-loop.is-paused .eduhub-loop__pause .eduhub-ic-play { display: block; }
.eduhub-loop__pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.eduhub-loop__pause::before { content: ""; position: absolute; inset: -5px; }

/* Motion: only with html.motion. Each change waits for the orbit, then the card and node follow. */
html.motion .eduhub-ring__orbit { transition: transform 0.9s cubic-bezier(.65, 0, .35, 1); }
html.motion .eduhub-node__disk { transition: transform 0.45s cubic-bezier(.3, .7, .3, 1) 0.6s; }
html.motion .eduhub-node__disk::before { transition: opacity 0.35s ease 0.6s; }
html.motion .eduhub-node:not(.is-on) .eduhub-node__disk, html.motion .eduhub-node:not(.is-on) .eduhub-node__disk::before { transition-delay: 0s; }
html.motion .eduhub-card { transition: opacity 0.3s ease, transform 0.4s ease, visibility 0s linear 0.4s; }
html.motion .eduhub-card.is-on { transition: opacity 0.45s ease 0.5s, transform 0.6s cubic-bezier(.2, .7, .2, 1) 0.5s, visibility 0s linear 0s; }
html.motion .eduhub-loop.is-run .eduhub-node.is-on .eduhub-node__disk::after { animation: eduhub-pulse 1.8s ease-out 0.9s infinite both; }
@keyframes eduhub-pulse { 0% { opacity: 0.75; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.45); } }
html.motion .eduhub-loop.is-run .eduhub-ring__dot { animation: eduhub-glow 1.8s ease-in-out infinite alternate; }
@keyframes eduhub-glow { from { opacity: 0.7; } to { opacity: 1; } }

/* Narrow stages (tablet columns and phones): the ring on top with the stage name in its middle, the card below. */
@container eduhub (max-width: 479px) {
  .eduhub-loop { --d: 46px; display: grid; gap: 4px; padding: 44px 12px 14px; }
  .eduhub-ring { width: min(100%, 320px); justify-self: center; }
  .eduhub-node { gap: 5px; }
  .eduhub-node__lbl { padding: 3px 7px 3px 3px; font-size: 11px; gap: 4px; }
  .eduhub-node__lbl b { min-width: 16px; height: 16px; font-size: 8.5px; }
  .eduhub-ring__hub { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); display: grid; text-align: center; }
  .eduhub-ring__hub span { grid-area: 1 / 1; align-self: center; display: grid; justify-items: center; gap: 6px; font: 700 15px/1.2 var(--font-body); letter-spacing: -0.015em; color: var(--ink); opacity: 0; }
  .eduhub-ring__hub span.is-on { opacity: 1; }
  .eduhub-ring__hub b { font: 700 30px/1 var(--font-body); letter-spacing: -0.03em; color: var(--accent-text); }
  html.motion .eduhub-ring__hub span { transition: opacity 0.3s ease; }
  html.motion .eduhub-ring__hub span.is-on { transition: opacity 0.45s ease 0.5s; }
  .eduhub-cards { position: static; width: auto; transform: none; }
  .eduhub-card { padding: 12px 12px 13px; box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 8px 22px rgba(22, 24, 29, 0.14); }
  .eduhub-loop__pause { top: 10px; right: 10px; width: 32px; height: 32px; }
  .eduhub-loop__tag { top: 12px; left: 12px; height: 26px; font-size: 9.5px; padding: 0 9px 0 7px; }
}

/* ---------- The problem: three gaps plus the admin note */
.eduhub-gaps .eyebrow { margin-top: 2px; }
.eduhub-after { display: flex; align-items: center; gap: 14px; margin: clamp(14px, 1.8vw, 20px) 0 0; padding: 14px 20px 14px 14px; border-radius: var(--radius-card); border: 1.5px dashed var(--line-2);
  font: 500 15.5px/1.5 var(--font-body); color: var(--ink-2); }
.eduhub-after b { color: var(--ink); font-weight: 700; }
.eduhub-after .psg-dot { flex: none; }

/* ---------- How it fits together: five stage rows joined by a gold spine */
.eduhub-sys { --nb: 48px; --pad: clamp(18px, 2.4vw, 28px); position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.eduhub-sys::before { content: ""; position: absolute; z-index: 0; top: 30px; bottom: 30px; left: calc(var(--pad) + var(--nb) / 2 - 1px); width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-line), #f0cf7c 50%, var(--gold-line)); }
.eduhub-sys__row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--nb) minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 0.95fr); gap: clamp(16px, 2.2vw, 28px); align-items: center;
  padding: var(--pad); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .eduhub-sys__row { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.eduhub-sys__n { display: grid; place-items: center; width: var(--nb); height: var(--nb); border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 15px/1 var(--font-body); letter-spacing: 0.02em; box-shadow: 0 0 0 5px var(--panel); }
.eduhub-sys__what { display: grid; gap: 6px; min-width: 0; }
.eduhub-sys__what h3 { font: 700 clamp(20px, 1.9vw, 24px)/1.15 var(--font-body); letter-spacing: -0.025em; color: var(--ink); }
.eduhub-sys__what p { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--ink-2); }
.eduhub-sys__svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.eduhub-sys__svc a, .eduhub-sys__plain { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 11px 14px 11px 11px; border-radius: 14px; background: var(--bg); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line); }
.eduhub-sys__svc a { transition: box-shadow 0.2s, background 0.2s; }
.eduhub-sys__svc a:hover { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.eduhub-sys__svc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.eduhub-sys__plain { grid-template-columns: 38px minmax(0, 1fr); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.eduhub-sys__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-soft); color: var(--accent-text); font-size: 19px; box-shadow: inset 0 0 0 1px var(--gold-line); }
.eduhub-sys__svc b { display: block; font: 700 15px/1.25 var(--font-body); letter-spacing: -0.01em; color: var(--ink); }
.eduhub-sys__svc a > span:nth-child(2) > span, .eduhub-sys__plain > span:nth-child(2) > span { display: block; margin-top: 3px; font: 500 13.5px/1.4 var(--font-body); color: var(--muted); }
.eduhub-sys__go { font-size: 18px; color: var(--muted); transition: transform 0.15s, color 0.15s; }
.eduhub-sys__svc a:hover .eduhub-sys__go { transform: translateX(3px); color: var(--ink); }
.eduhub-sys__hand { position: relative; margin: 0; padding: 12px 14px 13px 16px; border-radius: 14px; background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-line); font: 500 14px/1.5 var(--font-body); color: var(--ink); }
.eduhub-sys__hand > span { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.eduhub-sys__hand > span::after { content: "→"; display: inline-block; font-size: 13px; letter-spacing: 0; transform: rotate(90deg); }
.eduhub-sys__hand--loop > span::after { content: "↺"; transform: none; font-size: 14px; }
.eduhub-sys__foot { display: flex; align-items: center; gap: 14px 18px; margin-top: 14px; padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.6vw, 28px); border-radius: var(--radius-card); background: linear-gradient(160deg, var(--sun), var(--sun-deep)); color: #16181d; }
.eduhub-sys__foot .psg-tag, .eduhub-sys__foot .psg-tag:not([class*="psg-tag--"]) { flex: none; background: rgba(22, 24, 29, 0.88); color: #f7e1a6; }
.eduhub-sys__foot p { margin: 0; font: 500 16px/1.5 var(--font-body); color: #16181d; }
.eduhub-sys__foot b { font-weight: 700; }
@media (max-width: 1100px) {
  .eduhub-sys__row { grid-template-columns: var(--nb) minmax(0, 1fr) minmax(0, 1.1fr); }
  .eduhub-sys__hand { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .eduhub-sys { --nb: 40px; gap: 12px; }
  .eduhub-sys::before { top: 26px; bottom: 26px; }
  .eduhub-sys__row { grid-template-columns: var(--nb) minmax(0, 1fr); gap: 14px; align-items: start; }
  .eduhub-sys__n { font-size: 13.5px; }
  .eduhub-sys__what { padding-top: 6px; }
  .eduhub-sys__svc, .eduhub-sys__hand { grid-column: 1 / -1; }
  .eduhub-sys__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Choose your service: goal picker and six service cards */
.eduhub-goal { display: grid; gap: 14px; margin-bottom: clamp(20px, 2.4vw, 28px); padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .eduhub-goal { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.eduhub-goal__q { margin: 0; font: 700 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.eduhub-goal__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eduhub-goal__opts button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 14px; border: 0; border-radius: 9999px; background: var(--chip); color: var(--ink);
  font: 600 15px/1.25 var(--font-body); letter-spacing: -0.01em; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: background 0.2s, box-shadow 0.2s, color 0.2s; }
.eduhub-goal__opts button::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background 0.2s, box-shadow 0.2s; }
.eduhub-goal__opts button:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.eduhub-goal__opts button[aria-pressed="true"] { background: var(--gold-grad); color: var(--gold-ink); box-shadow: none; }
.eduhub-goal__opts button[aria-pressed="true"]::before { background: radial-gradient(circle, #fff 0 3.5px, var(--gold-ink) 4px); box-shadow: none; }
.eduhub-goal__opts button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.eduhub-goal__out { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; min-height: 56px; padding: 12px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.eduhub-goal__out p { flex: 1 1 340px; margin: 0; font: 500 15.5px/1.5 var(--font-body); color: var(--muted); }
.eduhub-goal__out.is-on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-line); }
.eduhub-goal__out.is-on p { color: var(--ink); }
.eduhub-goal__out .psg-btn { flex: none; }
html.motion .eduhub-goal__out.is-on > * { animation: rise 0.45s cubic-bezier(.2, .7, .2, 1) both; }

.eduhub-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.eduhub-svc__c { position: relative; gap: 14px; }
.eduhub-svc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eduhub-svc__top .psg-disk { width: 44px; height: 44px; font-size: 21px; }
.eduhub-svc__c h3 { font-size: 21px; }
.eduhub-svc__first { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 11px 13px; border-radius: 12px; background: var(--chip); font: 600 14px/1.35 var(--font-body); color: var(--ink); }
.eduhub-svc__first > span:first-child { flex: 1 0 100%; margin-bottom: 2px; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.eduhub-svc__first .psg-chip { font-style: normal; }
.eduhub-svc__pick { position: absolute; top: -11px; left: 22px; display: none; }
.eduhub-svc__c.is-pick { background: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold-line) !important; }
.eduhub-svc__c.is-pick .eduhub-svc__pick { display: inline-flex; }
.eduhub-svc__c.is-pick .eduhub-svc__first { background: var(--panel); }
@media (max-width: 960px) { .eduhub-svc, .eduhub-goal__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .eduhub-svc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .eduhub-goal__opts button { font-size: 14.5px; padding: 8px 14px 8px 10px; gap: 9px; border-radius: 16px; }
  .eduhub-goal__opts button::before { width: 18px; height: 18px; }
}

.eduhub-who { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(24px, 3vw, 36px); }
.eduhub-who__t { margin: 0; font: 600 14px/1.4 var(--font-body); color: var(--muted); }
.eduhub-who__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eduhub-who__list li { padding: 8px 13px; border-radius: 9999px; background: var(--chip); color: var(--ink); font: 600 13.5px/1.2 var(--font-body); }

/* ---------- Care built in */
.eduhub-care { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4.5vw, 64px); padding: clamp(26px, 4vw, 56px); border-radius: var(--radius-card);
  background: radial-gradient(90% 80% at 0% 0%, var(--trust-wash), transparent 60%), var(--panel); }
:root[data-theme="light"] .eduhub-care { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.eduhub-care__head { display: grid; gap: 16px; align-content: start; }
.eduhub-care__head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eduhub-care__head .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); }
.eduhub-care__head .h-sec { font-size: clamp(28px, 2.7vw, 36px); }
.eduhub-care__head .body-2 { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.eduhub-care__note { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--muted); }
.eduhub-care__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px); align-content: start; }
.eduhub-care__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
.eduhub-care__ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--trust-wash); color: var(--trust); font-size: 19px; }
.eduhub-care__ic .psg-ic { stroke-width: 2; }
.eduhub-care__list b { font: 700 16px/1.3 var(--font-body); letter-spacing: -0.012em; color: var(--ink); }
.eduhub-care__list li > span:last-child { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-2); }
@media (max-width: 960px) { .eduhub-care { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .eduhub-care__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Proof bento */
.eduhub-proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.eduhub-proof__c { grid-column: span 3; position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(22px, 2.4vw, 28px); border-radius: var(--radius-card); background: var(--panel);
  color: inherit; text-decoration: none; transition: box-shadow 0.2s; }
:root[data-theme="light"] .eduhub-proof__c { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.eduhub-proof__c:hover, :root[data-theme="light"] .eduhub-proof__c:hover { box-shadow: inset 0 0 0 2px var(--gold-line), 0 10px 30px rgba(140, 100, 30, 0.1); }
.eduhub-proof__c:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.eduhub-proof__c > b, .eduhub-proof__body > b { font: 700 18px/1.3 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.eduhub-proof__txt { font: 400 15px/1.55 var(--font-body); color: var(--ink-2); }
.eduhub-proof__c .more { margin-top: auto; padding-top: 4px; }
.eduhub-proof__logo { display: flex; align-items: center; justify-content: center; gap: 10px; height: 88px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.06); overflow: hidden; }
.eduhub-proof__logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; min-width: 0; }
.eduhub-proof__logo img + img { max-width: 48%; }
.eduhub-proof__c--google { grid-column: span 6; gap: 16px; padding: clamp(26px, 3.4vw, 40px);
  background: radial-gradient(110% 80% at 100% 0%, rgba(212, 166, 72, 0.28), transparent 60%), var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
:root[data-theme="light"] .eduhub-proof__c--google { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.eduhub-proof__head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.eduhub-proof__badge { flex: none; display: grid; place-items: center; width: 76px; height: 76px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(90, 60, 10, 0.12); }
.eduhub-proof__badge img { width: 100%; height: auto; }
.eduhub-proof__kick { font: 700 12.5px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.eduhub-proof__c .eduhub-proof__big { font: 700 clamp(44px, 4.6vw, 66px)/0.98 var(--font-body); letter-spacing: -0.045em; color: var(--ink); }
.eduhub-proof__c--google .eduhub-proof__txt { max-width: 40ch; font-size: 16.5px; color: var(--ink); }
.eduhub-proof__c--app { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 3.4vw, 44px);
  background: radial-gradient(70% 120% at 100% 50%, rgba(212, 166, 72, 0.16), transparent 70%), var(--panel); }
.eduhub-proof__body { display: grid; justify-items: start; gap: 12px; }
.eduhub-proof__body > b { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; }
.eduhub-proof__body .eduhub-proof__txt { max-width: 58ch; }
.eduhub-proof__body .more { margin-top: 4px; }
.eduhub-proof__stores { display: flex; flex-wrap: wrap; gap: 8px; }
.eduhub-proof__stores i { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 9999px; background: var(--trust-wash); color: var(--trust); font: 700 13px/1 var(--font-body); font-style: normal; }
.eduhub-proof__stores .psg-ic { font-size: 15px; stroke-width: 2.4; }
.eduhub-proof__qr { display: grid; justify-items: center; gap: 8px; padding: 14px 14px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.06), 0 10px 26px rgba(22, 24, 29, 0.12); }
.eduhub-proof__qr img { width: 132px; height: 132px; }
.eduhub-proof__qr small { font: 600 11.5px/1.3 var(--font-body); color: #4b505a; text-align: center; max-width: 16ch; }
.eduhub-team { margin-top: clamp(16px, 2vw, 24px); }
.eduhub-team .feature__body .h-sec { font-size: clamp(26px, 2.6vw, 34px); }
.eduhub-partners { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 1100px) {
  .eduhub-proof__c { grid-column: span 6; }
  .eduhub-proof__c--google, .eduhub-proof__c--app { grid-column: span 12; }
}
@media (max-width: 640px) {
  .eduhub-proof__c { grid-column: span 12; }
  .eduhub-proof__c--app { grid-template-columns: minmax(0, 1fr); }
  .eduhub-proof__qr { justify-self: start; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px 10px 10px; }
  .eduhub-proof__qr img { width: 84px; height: 84px; }
  .eduhub-proof__qr small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .eduhub-loop *, .eduhub-loop *::before, .eduhub-loop *::after, .eduhub-goal__out > * { animation: none !important; transition: none !important; }
  .eduhub-sys__svc a, .eduhub-sys__go, .eduhub-goal__opts button, .eduhub-proof__c { transition: none; }
}