/* ═══════════════════════════════════════════════════════════════════════════
   PRENEURSHIP — the two home page sections and preneurship.html.
   Everything is prefixed pr- so it never collides with style.css. Buttons and
   badges reuse the home page's crop-mark .btn-primary / .btn-ghost / .badge.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --pr-growth: #4f8ef7;
  --pr-digital: #8b90dc;
  --pr-impact: #5aa982;
  --pr-life: #c9a45c;
  --pr-mindset: #8a94a8;
  --pr-text: #e8ecf4;
  --pr-muted: rgba(232, 236, 244, 0.64);
  --pr-dim: rgba(232, 236, 244, 0.42);
  --pr-line: rgba(255, 255, 255, 0.08);
  --pr-line2: rgba(255, 255, 255, 0.15);
  --pr-panel: rgba(13, 19, 33, 0.8);
  --pr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-f="growth"]  { --fc: var(--pr-growth); }
[data-f="digital"] { --fc: var(--pr-digital); }
[data-f="impact"]  { --fc: var(--pr-impact); }
[data-f="life"]    { --fc: var(--pr-life); }
[data-f="mindset"] { --fc: var(--pr-mindset); }

/* White sections: deeper family colours so they hold up on white */
.pr-light {
  --pr-growth: #2f6fdc;
  --pr-digital: #5b62b8;
  --pr-impact: #3a8a64;
  --pr-life: #9a7428;
  --pr-mindset: #5f6b80;
  --pr-text: #0b1220;
  --pr-muted: rgba(11, 18, 32, 0.66);
  --pr-dim: rgba(11, 18, 32, 0.46);
  --pr-line: rgba(11, 18, 32, 0.09);
  --pr-line2: rgba(11, 18, 32, 0.16);
  --pr-panel: #f6f7f9;
  background: #fff;
  color: var(--pr-text);
}
body.home .pr-light .badge { color: var(--blue); }
body.home .pr-light .btn-ghost {
  color: #0b1220;
  background: rgba(0, 0, 0, 0.04);
  --mark-color: rgba(0, 0, 0, 0.38);
}
body.home .pr-light .btn-ghost:hover { background: rgba(0, 0, 0, 0.07); --mark-color: var(--blue); }

.pr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pr-tint { background: color-mix(in srgb, var(--fc) 14%, transparent); color: var(--fc); }
.pr-nm { white-space: nowrap; }
.pr-suf { color: var(--pr-dim); }
.pr-blue { color: var(--blue); }
.pr-lead { color: var(--pr-muted); font-size: 16px; line-height: 1.65; max-width: 480px; }
.pr-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.pr-btns .btn-primary, .pr-btns .btn-ghost { display: inline-flex; align-items: center; gap: 10px; }
.pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.home .pr-badge { margin-bottom: 0; }

/* ── Family chip (moving rows, quiz "also close") ─────────────────────────── */
.pr-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--pr-panel); border: 1px solid var(--pr-line);
  font-size: 14px; white-space: nowrap; color: var(--pr-text); text-decoration: none;
  transition: border-color 0.25s;
}
.pr-chip:hover, .pr-chip:focus-visible { border-color: color-mix(in srgb, var(--fc) 55%, transparent); outline: none; }
.pr-chip i { width: 28px; height: 28px; display: grid; place-items: center; font-size: 12px; }

/* ═══ HOME A — rotating name + moving rows ════════════════════════════════ */
.pr-home-a { position: relative; z-index: 2; padding: 110px 0 100px; }
.pr-home-a .pr-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.pr-home-a .pr-wrap > * { min-width: 0; }
.pr-home-a h2 { font-family: var(--sans); font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -0.02em; margin: 22px 0 14px; font-weight: 700; color: #fff; }
.pr-rot { font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.02em; display: flex; align-items: baseline; height: 1.25em; overflow: hidden; margin-bottom: 8px; color: #fff; }
.pr-rot-w { display: inline-block; }
.pr-rot-d { color: var(--pr-muted); font-size: 14.5px; line-height: 1.55; min-height: 3.1em; max-width: 460px; }
.pr-rows { display: flex; flex-direction: column; gap: 10px; }
.pr-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pr-track { display: flex; gap: 10px; width: max-content; animation: prMarquee 60s linear infinite; }
.pr-row:nth-child(2) .pr-track { animation-direction: reverse; animation-duration: 70s; }
.pr-row:hover .pr-track, .pr-row:focus-within .pr-track { animation-play-state: paused; }
@keyframes prMarquee { to { transform: translateX(-50%); } }
.pr-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 12px; color: var(--pr-dim); }
.pr-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pr-legend span::before { content: ''; width: 7px; height: 7px; background: var(--fc); }

/* ═══ HOME B — family tiles (white) ═════════════════════════════════════════ */
.pr-home-b { position: relative; z-index: 2; padding: 40px 0 64px; }
.pr-fams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pr-fam {
  position: relative;
  padding: 24px; background: var(--pr-panel); border: 1px solid var(--pr-line);
  display: flex; flex-direction: column; gap: 12px; min-height: 220px;
  color: inherit; text-decoration: none;
  transition: border-color 0.3s, transform 0.35s var(--pr-ease), box-shadow 0.35s;
}
.pr-fam:hover, .pr-fam:focus-visible {
  border-color: color-mix(in srgb, var(--fc) 45%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(11, 18, 32, 0.35);
  outline: none;
}
.pr-fam-top { display: flex; justify-content: space-between; align-items: center; }
.pr-fam-ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 15px; }
.pr-fam-count { font-family: var(--sans); font-size: 12px; color: var(--pr-dim); }
.pr-fam h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--pr-text); }
.pr-fam p { color: var(--pr-muted); font-size: 13.5px; line-height: 1.55; }
.pr-fam-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pr-fam-names span { font-size: 12px; padding: 5px 9px; border: 1px solid var(--pr-line2); color: var(--pr-muted); background: rgba(255, 255, 255, 0.6); }
.pr-fam--quiz {
  background: linear-gradient(160deg, rgba(79, 142, 247, 0.12), #f6f7f9 62%);
  border-color: rgba(79, 142, 247, 0.3);
  --fc: var(--blue);
}
.pr-fam--quiz .btn-primary { align-self: flex-start; margin-top: auto; }

/* Curved joins drawn by .wave-transition; these two variants add the fills
   the home page didn't have yet */
/* The curve itself stays within the middle ~30-70% of the band, so each
   band's outer strip is painted in the neighbouring section's colour: no
   hairline can show at the seam whatever the sub-pixel rounding. */
.wave-transition.wave-to-light  { background: linear-gradient(transparent 78%, #fff 78%); }
.wave-transition.wave-light-top { background: linear-gradient(#fff 22%, transparent 22%); }
.wave-transition.wave-on-dark   { background: linear-gradient(#080c14 78%, #fff 78%); }
.wave-transition.wave-into-dark { background: linear-gradient(#fff 78%, #080c14 78%); }
.wave-transition.wave-into-footer { background: linear-gradient(#fff 78%, #070b14 78%); }

/* ═══ PAGE ════════════════════════════════════════════════════════════════ */
body.pr-page { background: #080c14; color: var(--pr-text); }
.pr-page-main { position: relative; overflow: hidden; }
.pr-page-main::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1100px; pointer-events: none;
  background:
    radial-gradient(640px 420px at 78% 36%, rgba(79, 142, 247, 0.10), transparent 70%),
    radial-gradient(520px 380px at 12% 12%, rgba(124, 131, 214, 0.08), transparent 70%);
}
.pr-page h1, .pr-page h2, .pr-page h3 { font-family: var(--sans); }
/* The quiz curves straight into the footer; its glow line would read as a hard edge */
body.pr-page footer { border-top: 0; }
body.pr-page footer::before { display: none; }

/* ── Hero: orbit ── */
.pr-hero { position: relative; }
.pr-hero .pr-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 24px; min-height: 760px; padding-top: 110px; padding-bottom: 30px; }
.pr-hero .pr-wrap > * { min-width: 0; }
.pr-hero h1 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.04; letter-spacing: -0.025em; margin: 22px 0 18px; font-weight: 700; color: #fff; }
.pr-search { display: flex; margin-top: 28px; max-width: 480px; border: 1px solid var(--pr-line2); background: var(--pr-panel); }
.pr-search > i { padding: 0 14px; display: grid; place-items: center; color: var(--pr-dim); }
.pr-search input { flex: 1; background: transparent; border: 0; color: var(--pr-text); font: inherit; font-family: var(--inter); font-size: 15px; padding: 15px 0; outline: none; min-width: 0; }
.pr-search input::placeholder { color: var(--pr-dim); }
.pr-search input::-webkit-search-cancel-button { filter: invert(0.6); }
.pr-search:focus-within { border-color: rgba(79, 142, 247, 0.6); }
.pr-search .pr-go { border: 0; background: var(--blue); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 0 18px; cursor: pointer; }
.pr-search .pr-go:hover { background: #3a7aed; }
.pr-stats { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.pr-stats b { font-family: var(--sans); font-size: 26px; display: block; font-weight: 700; color: #fff; }
.pr-stats span { font-size: 11px; color: var(--pr-dim); text-transform: uppercase; letter-spacing: 0.12em; }

.pr-orbit { position: relative; height: 640px; }
.pr-orbit:not([data-f]), .pr-wheel:not([data-f]), .pr-fchip:not([data-f]) { --fc: var(--blue); }
.pr-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pr-node { position: absolute; left: 0; top: 0; background: none; border: 0; padding: 0; color: var(--pr-text); cursor: pointer; transition: opacity 0.4s; will-change: transform; }
.pr-node .pr-dot { width: 38px; height: 38px; display: grid; place-items: center; background: #0d1321; border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent); color: var(--fc); font-size: 13px; transition: transform 0.45s var(--pr-ease), background 0.35s; }
.pr-node .pr-lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 10.5px; color: var(--pr-dim); font-family: var(--sans); white-space: nowrap; transition: color 0.3s; }
.pr-orbit.is-focus .pr-node { opacity: 0.35; }
.pr-orbit.is-focus .pr-node.is-kin { opacity: 0.75; }
.pr-orbit.is-focus .pr-node.is-on { opacity: 1; }
.pr-node.is-on .pr-dot { transform: scale(1.35); background: color-mix(in srgb, var(--fc) 24%, #0d1321); }
.pr-node.is-on .pr-lbl { color: #fff; }
.pr-node:focus-visible { outline: none; }
.pr-node:focus-visible .pr-dot { outline: 2px solid var(--blue); outline-offset: 3px; }
.pr-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210px; text-align: center; pointer-events: none; }
.pr-core-ic { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 23px; border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); position: relative; }
.pr-core-ic::before, .pr-core-ic::after { content: ''; position: absolute; inset: -10px; border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent); animation: prHalo 3s ease-out infinite; }
.pr-core-ic::after { animation-delay: 1.5s; }
@keyframes prHalo { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
.pr-core-name { font-family: var(--sans); font-size: 25px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.pr-core-name .pr-suf, .pr-drawer h3 .pr-suf, .pr-q-res h3 .pr-suf { color: var(--blue); }
.pr-core-fam { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc); margin-top: 6px; font-weight: 600; }
.pr-core-desc { font-size: 13px; color: var(--pr-muted); line-height: 1.5; margin-top: 10px; }

/* ── Directory ── */
.pr-dir { position: relative; padding: 70px 0 90px; scroll-margin-top: 60px; }
.pr-dir h2, .pr-quiz h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; margin: 18px 0 10px; font-weight: 700; }
.pr-dir h2 { color: #fff; }
.pr-dir-bar { margin: 28px 0 14px; }
.pr-dir-bar .pr-search { margin: 0; max-width: none; }
.pr-fchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.pr-fchip { flex: none; white-space: nowrap; padding: 9px 13px; font-size: 13px; border: 1px solid var(--pr-line); background: transparent; color: var(--pr-muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font-family: var(--inter); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pr-fchip:hover { color: #fff; border-color: var(--pr-line2); }
.pr-fchip .pr-d { width: 7px; height: 7px; background: var(--fc); }
.pr-fchip em { font-style: normal; color: var(--pr-dim); font-size: 12px; }
.pr-fchip.is-on { color: #fff; border-color: color-mix(in srgb, var(--fc) 55%, transparent); background: color-mix(in srgb, var(--fc) 10%, transparent); }
.pr-count { font-size: 12.5px; color: var(--pr-dim); margin-bottom: 14px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pr-card { padding: 20px; background: var(--pr-panel); border: 1px solid var(--pr-line); cursor: pointer; display: flex; flex-direction: column; gap: 12px; text-align: left; color: inherit; font: inherit; transition: border-color 0.25s, transform 0.35s var(--pr-ease); }
.pr-card:hover, .pr-card:focus-visible { border-color: color-mix(in srgb, var(--fc) 50%, transparent); transform: translateY(-3px); outline: none; }
.pr-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pr-card .pr-ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 15px; flex: none; }
.pr-card .pr-ftag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc); font-weight: 600; text-align: right; line-height: 1.4; white-space: nowrap; }
.pr-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.pr-card p { font-size: 13.5px; color: var(--pr-muted); line-height: 1.55; }
.pr-card .pr-more { margin-top: auto; font-size: 12.5px; color: var(--blue); display: flex; gap: 6px; align-items: center; }
.pr-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--pr-dim); border: 1px dashed var(--pr-line2); }
.pr-empty button { margin-top: 12px; background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; }

/* ── Details drawer ── */
.pr-scrim { position: fixed; inset: 0; background: rgba(3, 6, 12, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1200; }
.pr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #0b111d; border-left: 1px solid var(--pr-line2); z-index: 1201; transform: translateX(100%); visibility: hidden; transition: transform 0.5s var(--pr-ease), visibility 0s 0.5s; overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 40px; color: var(--pr-text); }
body.pr-dopen { overflow: hidden; }
body.pr-dopen .pr-scrim { opacity: 1; pointer-events: auto; }
body.pr-dopen .pr-drawer { transform: none; visibility: visible; transition: transform 0.5s var(--pr-ease), visibility 0s; }
.pr-dr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.pr-dr-nav { display: flex; gap: 6px; }
.pr-dr-top button { width: 38px; height: 38px; border: 1px solid var(--pr-line2); background: transparent; color: var(--pr-muted); cursor: pointer; }
.pr-dr-top button:hover { color: #fff; }
.pr-dr-ic { width: 56px; height: 56px; display: grid; place-items: center; font-size: 21px; margin-bottom: 18px; }
.pr-dr-fam { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc); font-weight: 600; }
.pr-drawer h3 { font-size: 32px; letter-spacing: -0.02em; margin: 8px 0 14px; font-weight: 700; color: #fff; }
.pr-dr-desc { color: var(--pr-muted); line-height: 1.7; font-size: 15px; }
.pr-dr-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 18px; }
.pr-dr-sw div { padding: 14px; border: 1px solid var(--pr-line); font-size: 13.5px; line-height: 1.5; }
.pr-dr-sw small { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.pr-dr-sw .is-s small { color: var(--pr-impact); }
.pr-dr-sw .is-w small { color: var(--pr-life); }
.pr-dr-ex { margin-bottom: 22px; }
.pr-dr-ex small { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pr-dim); font-weight: 600; margin-bottom: 8px; }
.pr-dr-ex div { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-dr-ex span { font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--pr-line); color: var(--pr-muted); }
.pr-dr-note { padding: 14px; background: rgba(138, 148, 168, 0.1); font-size: 13px; color: var(--pr-muted); line-height: 1.55; margin-bottom: 20px; }
.pr-dr-on { border-top: 1px solid var(--pr-line); padding-top: 20px; }
.pr-dr-on h4 { font-family: var(--sans); font-size: 14px; margin-bottom: 10px; color: #fff; }
.pr-dr-on ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--pr-muted); }
.pr-dr-on li { display: flex; gap: 10px; }
.pr-dr-on li i { color: var(--blue); margin-top: 3px; font-size: 12px; }

/* ── Wheel ── */
.pr-wheel-sec { position: relative; padding: 10px 0 30px; }
.pr-wheel { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.pr-wheel:focus-visible .pr-drum span.is-on { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 8px; }
.pr-wheel.is-drag { cursor: grabbing; }
.pr-wheel-glow { position: absolute; left: 50%; top: 44%; width: 560px; height: 560px; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--fc) 16%, transparent), transparent 65%); transition: background 0.8s; pointer-events: none; }
.pr-wheel-rings { position: absolute; left: 50%; top: 44%; pointer-events: none; }
.pr-wheel-rings i:first-child { width: 320px; height: 320px; }
.pr-wheel-rings i:last-child { width: 470px; height: 470px; }
.pr-wheel-rings i { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255, 255, 255, 0.07); border-radius: 50%; transform: translate(-50%, -50%); }
.pr-drum-row {
  position: relative; display: flex; align-items: center; margin-top: -90px; padding: 150px 0;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.pr-drum { position: relative; height: var(--ih, 72px); cursor: pointer; }
.pr-drum span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; font-family: var(--sans); font-weight: 700; font-size: var(--fs, 56px); letter-spacing: -0.02em; color: rgba(232, 236, 244, 0.34); transition: color 0.5s; white-space: nowrap; will-change: transform; }
.pr-drum span.is-on { color: #fff; }
.pr-suffix { font-family: var(--sans); font-weight: 700; font-size: var(--fs, 56px); color: var(--blue); letter-spacing: -0.02em; position: relative; z-index: 2; }
.pr-w-info { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 16px; }
.pr-w-info .pr-ic { width: 44px; height: 44px; display: grid; place-items: center; font-size: 16px; }
.pr-w-fam { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc); font-weight: 600; }
.pr-w-info p { font-size: 14px; color: var(--pr-muted); max-width: 400px; line-height: 1.55; min-height: 3.1em; }
.pr-w-arrows { position: absolute; right: 8px; top: 44%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.pr-w-arrows button { width: 40px; height: 40px; border: 1px solid var(--pr-line2); background: rgba(13, 19, 33, 0.8); color: var(--pr-muted); cursor: pointer; }
.pr-w-arrows button:hover { color: #fff; }

/* ── Quiz (white) ── */
.pr-quiz { position: relative; z-index: 2; padding: 50px 0 90px; scroll-margin-top: 40px; }
.pr-quiz-head { text-align: center; }
.pr-quiz-head .pr-lead { margin: 0 auto; }
.pr-qbox { max-width: 760px; margin: 30px auto 0; padding: 32px; background: var(--pr-panel); border: 1px solid var(--pr-line); }
.pr-q-progress { height: 2px; background: var(--pr-line2); margin-bottom: 24px; }
.pr-q-progress span { display: block; height: 100%; background: var(--blue); transition: width 0.5s var(--pr-ease); }
.pr-q-step { font-size: 11px; color: var(--pr-dim); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.pr-qbox h3 { font-size: 24px; margin: 10px 0 20px; letter-spacing: -0.01em; font-weight: 700; color: var(--pr-text); }
.pr-q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-q-opt { padding: 16px; text-align: left; border: 1px solid var(--pr-line2); background: #fff; color: var(--pr-text); cursor: pointer; display: flex; gap: 12px; align-items: center; font: inherit; font-family: var(--inter); font-size: 14.5px; transition: border-color 0.2s, background 0.2s; }
.pr-q-opt i { color: var(--blue); width: 18px; text-align: center; }
.pr-q-opt:hover, .pr-q-opt:focus-visible { border-color: rgba(79, 142, 247, 0.6); background: rgba(79, 142, 247, 0.05); outline: none; }
.pr-q-back { margin-top: 18px; background: none; border: 0; color: var(--pr-dim); cursor: pointer; font: inherit; font-size: 13px; }
.pr-q-back:hover { color: var(--pr-text); }
.pr-q-res { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.pr-q-res .pr-ic { width: 72px; height: 72px; display: grid; place-items: center; font-size: 26px; }
.pr-q-res h3 { font-size: 34px; margin: 6px 0 10px; }
.pr-q-res .pr-lead { max-width: none; }
.pr-q-also { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; font-size: 13px; color: var(--pr-dim); }
.pr-q-also .pr-chip { background: #fff; border-color: var(--pr-line2); cursor: pointer; font: inherit; font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pr-home-a { padding: 80px 0 70px; }
  .pr-home-a .pr-wrap { grid-template-columns: 1fr; gap: 36px; }
  .pr-fams { grid-template-columns: 1fr 1fr; }
  .pr-hero .pr-wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 100px; }
  .pr-orbit { height: 520px; }
  .pr-wheel { height: 520px; }
}
@media (max-width: 560px) {
  .pr-wrap { padding: 0 16px; }
  .pr-fams { grid-template-columns: 1fr; }
  .pr-fam { min-height: 0; }
  .pr-q-opts { grid-template-columns: 1fr; }
  /* Family filters: one swipeable row instead of chips breaking over lines */
  .pr-fchips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px 20px; padding: 0 16px 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .pr-fchips::-webkit-scrollbar { display: none; }
  .pr-qbox { padding: 22px 18px; }
  .pr-orbit { height: 420px; }
  .pr-node .pr-lbl { display: none; }
  .pr-node.is-on .pr-lbl { display: block; }
  .pr-node .pr-dot { width: 28px; height: 28px; font-size: 10.5px; }
  .pr-core { width: 150px; }
  .pr-core-desc { display: none; }
  .pr-core-ic { width: 50px; height: 50px; font-size: 18px; }
  .pr-core-name { font-size: 20px; }
  .pr-wheel { height: 450px; --fs: 36px; --ih: 48px; }
  .pr-wheel-glow { width: 340px; height: 340px; }
  .pr-wheel-rings i:first-child { width: 230px; height: 230px; }
  .pr-wheel-rings i:last-child { width: 330px; height: 330px; }
  .pr-drum-row { padding: 110px 0; margin-top: -70px; }
  .pr-w-arrows { top: 8px; right: 0; transform: none; flex-direction: row; }
  .pr-dr-sw { grid-template-columns: 1fr; }
  .pr-drawer { padding: 18px 18px 32px; }
  .pr-q-res { grid-template-columns: 1fr; }
  .pr-stats { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-track { animation: none; }
  .pr-core-ic::before, .pr-core-ic::after { animation: none; }
}