:root { color-scheme: dark; --open: var(--phosphor-300); --soon: #ff9d3a; --glow-open: 0 0 10px rgba(51, 255, 102, .55); --glow-soon: 0 0 10px rgba(255, 157, 58, .55); --bg: #030604; --panel: #07100a; --line: #1a2c20; --line-2: #2a4433; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-mono); }
body { min-height: 100vh; overflow-x: hidden; }
a { color: var(--phosphor-200); }
:focus-visible { outline: 2px solid var(--phosphor-300); outline-offset: 3px; }
/* Headings that only receive focus from script (the role dialog title) announce without a ring. */
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--phosphor-300); box-shadow: 0 0 9px var(--phosphor-300); margin-right: 9px; vertical-align: 1px; }

.proto-tag { color: var(--fg-3); border: 1px solid var(--rule-2); padding: 5px 8px; }

/* Same page width and gutters as the shared header and footer. */
main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 36px) 40px; }
.hero { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px 32px; padding: 14px 0 16px; }
.hero-cta { text-decoration: none; }
/* Shown when a role link no longer matches an open role (careers.js roleGone). */
.role-gone { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--soon); font: 13px/1.6 var(--font-sans); color: var(--fg-1); }
.role-gone:empty { display: none; }
.eyebrow { margin: 0; font-size: 10px; letter-spacing: .18em; color: var(--fg-2); }
.hero h1 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; font: 500 11px/1.6 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--phosphor-200); }
.hero-meta { font-weight: 400; color: var(--fg-2); white-space: pre-wrap; }
.lede { margin: 0; font: 13px/1.8 var(--font-sans); color: var(--fg-2); max-width: 46ch; }
.hero-mission { margin: 8px 0 0; font: 600 clamp(18px, 1.2rem + .5vw, 22px)/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--phosphor-100); max-width: 46ch; }

/* Hover effects are wrapped in @media (hover: hover): on touch screens a tap would leave them stuck on. */

/* Viewer */
.viewer { border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 0 60px rgba(51, 255, 102, .05); }
.viewer-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-size: 11px; color: var(--fg-2); }
.viewer-bar .cmd { color: var(--phosphor-100); }
.viewer-bar .flow { flex: 1 1 0; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 4px 0; color: var(--phosphor-300); letter-spacing: .12em; font-size: 10px; text-transform: uppercase; }
@media (hover: hover) { .viewer-bar .flow:hover:not(:disabled) { color: var(--phosphor-100); text-decoration: underline; text-underline-offset: 4px; } }
.viewer-bar .flow:disabled { color: var(--fg-3); cursor: default; }
.viewer-bar .caret { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--phosphor-300); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .viewer-bar .caret { animation: none; } }
.viewer-bar .tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tour-state { font-size: 10px; letter-spacing: .12em; color: var(--fg-3); margin-right: 6px; }
/* Tablet widths: the idle-tour hint gives its room to the command output ("7 open · see all ↓"). */
@media (max-width: 1100px) { .tour-state { display: none; } }
.touring .tour-state, .viewer:has(.touring) .tour-state { color: var(--phosphor-300); }
.viewer-bar button { font: inherit; font-size: 11px; color: var(--phosphor-200); background: none; border: 1px solid var(--line-2); padding: 7px 11px; cursor: pointer; }
@media (hover: hover) { .viewer-bar button:hover { border-color: var(--phosphor-500); color: var(--phosphor-100); } }
.viewer-bar .ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.viewer-bar button[aria-pressed="true"] { background: var(--phosphor-300); color: #031006; border-color: var(--phosphor-300); }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline-block; } }

.stage { position: relative; height: clamp(380px, calc(100vh - 418px), 660px); overflow: hidden; background: radial-gradient(ellipse at 45% 55%, #0b1a10, var(--bg) 70%); }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(51, 255, 102, .022) 0 1px, transparent 1px 4px); }
.hud { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: 10px; letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; pointer-events: none; z-index: 2; }
.no-webgl { margin: 0; color: var(--fg-2); font: 13px/1.6 var(--font-sans); }
.stage.flat { height: auto; min-height: 0; padding: 16px; display: grid; gap: 14px; background: none; }
.stage.flat::after { display: none; }
.stage.flat .card { position: static; width: auto; max-height: none; animation: none; }

.pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 6px; font: 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--phosphor-200); background: rgba(4, 10, 6, .86); border: 1px solid var(--phosphor-600); cursor: pointer; white-space: nowrap; transition: opacity .25s, background .2s, color .2s; }
.pin::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: var(--phosphor-500); }
.pin-n { color: var(--fg-3); }
.pin-count { color: var(--fg-3); text-transform: none; letter-spacing: .02em; }
.pin.on .pin-count { color: #0a3a18; }
.pin.custom .pin-count { color: #b98a3a; }
.pin.hover, .pin:focus-visible { border-color: var(--phosphor-300); color: var(--phosphor-100); }
@media (hover: hover) { .pin:hover { border-color: var(--phosphor-300); color: var(--phosphor-100); } }
.pin.on { background: var(--phosphor-300); color: #031006; border-color: var(--phosphor-300); }
.pin.on .pin-n { color: #0a3a18; }
.pin.custom { color: var(--amber-300); border-color: #6b4a14; }
.pin.custom::after { background: #8a5f1a; }
.pin.custom.on { background: var(--amber-300); color: #1d1204; }
.pin.off { opacity: 0; pointer-events: none; }
.touring .pin:not(.on) { opacity: .75; }

.card { position: absolute; z-index: 3; top: 14px; right: 14px; bottom: auto; max-height: calc(100% - 28px); width: min(340px, 42%); overflow: auto; padding: 18px 18px 16px; background: rgba(5, 12, 7, .94); border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); display: flex; flex-direction: column; animation: cardIn .35s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateX(14px); } }
/* Content cross-fades when the tour moves to the next zone. */
.card > * { animation: cardFade .5s ease both; }
@keyframes cardFade { from { opacity: 0; transform: translateY(4px); } }
.card-path { font-size: 10px; color: var(--fg-3); margin: 0 26px 18px 0; }
.tour-tag { color: var(--phosphor-300); margin-left: 6px; letter-spacing: .1em; }
.card-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--fg-2); font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }
.card-n { margin: 0 0 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--phosphor-300); }
.card.custom .card-n, .card.custom h2 { color: var(--amber-300); }
.card h2 { margin: 0 0 8px; font: 400 30px/1.08 var(--font-display); color: var(--phosphor-100); }
.card-pitch { margin: 0 0 18px; font: 13px/1.7 var(--font-sans); color: var(--fg-2); }
.card-label { margin: 0 0 6px; font-size: 10px; letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.card-roles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
/* Each role is the card's call to action: a bordered tile that lights up like a campus pin. */
.card-roles button { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; background: rgba(51, 255, 102, .03); border: 1px solid var(--line-2); padding: 12px 14px 12px 12px; color: var(--phosphor-100); font: 400 17px/1.25 var(--font-display); cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.card-roles button:focus-visible { border-color: var(--phosphor-500); background: rgba(51, 255, 102, .07); box-shadow: 0 0 22px rgba(51, 255, 102, .12); }
@media (hover: hover) { .card-roles button:hover { border-color: var(--phosphor-500); background: rgba(51, 255, 102, .07); box-shadow: 0 0 22px rgba(51, 255, 102, .12); } }
.role-text { min-width: 0; }
.role-title { display: block; }
.role-hook { display: block; margin-top: 3px; font: 12px/1.5 var(--font-sans); color: var(--fg-2); }
.role-go { display: block; margin-top: 8px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--phosphor-300); }
.role-go span { display: inline-block; transition: transform .25s ease; }
@media (hover: hover) { .card-roles button:hover .role-go span { transform: translateX(4px); } }
.card-roles .soon-role { background: rgba(255, 157, 58, .04); }
.card-roles .soon-role .role-go { color: var(--soon); }
.card-roles small { display: block; margin-top: 4px; font: 10px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--fg-3); }
.card-roles small.open { color: var(--open); text-shadow: var(--glow-open); }
.card-roles small.soon { color: var(--soon); text-shadow: var(--glow-soon); }
.card-cta { margin-top: 4px; padding-top: 8px; display: grid; gap: 10px; justify-items: start; }
.card-none { margin: 0; font: 13px/1.6 var(--font-sans); color: var(--fg-2); }

.zone-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.zone-menu button { display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 13px 14px; background: none; border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--fg-2); font: 11px/1.4 var(--font-mono); cursor: pointer; }
.zone-menu button:nth-child(4n) { border-right: 0; }
.zone-menu button:nth-child(n+5) { border-bottom: 0; }
/* Seven zones: Hall 3 (last) takes the spare cell, on both the 4- and 2-column menu. */
.zone-menu button:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; }
.zone-menu .zm-n { color: var(--fg-3); }
.zone-menu .zm-main b { font-weight: 600; color: var(--phosphor-100); }
.zone-menu .zm-main small { display: block; margin-top: 2px; font-size: 10px; color: var(--fg-3); }
.zone-menu button.custom .zm-main b { color: var(--amber-300); }
@media (hover: hover) { .zone-menu button:hover { background: #0b1a10; color: var(--phosphor-100); } }
.zone-menu button[aria-pressed="true"] { background: #0e2414; color: var(--phosphor-200); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; padding: 12px 15px; border: 1px solid var(--phosphor-600); background: transparent; color: var(--phosphor-200); cursor: pointer; }
@media (hover: hover) { .btn:hover { border-color: var(--phosphor-300); color: var(--phosphor-100); } }
.btn.solid { background: var(--phosphor-300); border-color: var(--phosphor-300); color: #031006; }
@media (hover: hover) { .btn.solid:hover { background: var(--phosphor-200); } }
.card.custom .btn.solid { background: var(--amber-300); border-color: var(--amber-300); color: #1d1204; }

/* Roles list */
.roles { padding: 46px 0 10px; }
/* Anchor and scroll targets land below the sticky site header, not under it. */
#roles, .roles .team { scroll-margin-top: 96px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.sec-head h2, .own h2 { margin: 0; font: 400 34px/1.1 var(--font-display); color: var(--phosphor-100); }
.sec-head span { font-size: 11px; color: var(--fg-3); letter-spacing: .1em; }
#role-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.job-body { max-width: 900px; }
.team h3 { display: flex; gap: 10px; margin: 18px 0 4px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.team h3 span { color: var(--phosphor-300); }
.job { border-top: 1px solid var(--line-2); }
.job summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; }
.job summary::-webkit-details-marker { display: none; }
.job-title { display: block; font: 400 21px/1.2 var(--font-display); color: var(--phosphor-100); }
.job-hook { display: block; margin-top: 4px; font: 13px/1.5 var(--font-sans); color: var(--fg-2); }
.job-meta { font-size: 10px; color: var(--fg-3); letter-spacing: .08em; white-space: nowrap; }
.job-meta b { font-weight: 500; }
.job-meta .open { color: var(--open); text-shadow: var(--glow-open); }
.job-meta .soon { color: var(--soon); text-shadow: var(--glow-soon); }
.job-body { padding: 0 0 20px; }

/* JD content (list + dialog) */
.jd-lede { font: italic 18px/1.45 var(--font-display); color: var(--fg-1); margin: 0 0 14px; }
.jd-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.jd-meta dt { color: var(--fg-3); } .jd-meta dd { margin: 2px 0 0; color: var(--fg-1); }
.jd-meta .open { color: var(--open); text-shadow: var(--glow-open); } .jd-meta .soon { color: var(--soon); text-shadow: var(--glow-soon); }
.job-body h3, .jd h3 { font: 600 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--phosphor-300); margin: 18px 0 6px; }
.job-body p, .jd-body > p, .job-body li, .jd li { font: 13px/1.7 var(--font-sans); color: var(--fg-2); }
.job-body ul, .jd ul { margin: 0; padding-left: 18px; }
.job-body .btn { margin-top: 14px; }

.own { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin: 46px 0 0; padding: 28px; border: 1px dashed #6b4a14; }
.own .eyebrow { color: var(--amber-300); margin-bottom: 10px; }
.own h2 em { color: var(--amber-300); }
.own p:not(.eyebrow) { margin: 8px 0 0; font: 13px/1.7 var(--font-sans); color: var(--fg-2); }
.own .btn.solid { background: var(--amber-300); border-color: var(--amber-300); color: #1d1204; }

/* Dialog */
.jd { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; padding: 0; border: 1px solid var(--phosphor-500); background: #040805; color: var(--fg-1); box-shadow: 0 0 70px rgba(51, 255, 102, .14); }
/* The role window fits the visible screen (dvh, not vh, which on iPhone includes the area under Safari's toolbars, so
   in landscape the close bar and Apply bar sat off screen), and the page behind it doesn't scroll on touch screens. */
@media (pointer: coarse) { body:has(.jd[open]) { overflow: hidden; } }
.jd::backdrop { background: rgba(2, 5, 3, .82); backdrop-filter: blur(4px); }
.jd-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: #040805; border-bottom: 1px solid var(--line-2); font-size: 11px; color: var(--fg-2); }
.jd-close { background: none; border: 0; color: var(--fg-2); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0; }
.jd-body { padding: 22px 22px 24px; }
.jd-body h2 { margin: 0 0 10px; font: 400 34px/1.1 var(--font-display); color: var(--phosphor-100); }
.jd .actions, .apply .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.actions small { font-size: 10px; color: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; }
.actions small.notice { font-size: 12px; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--fg-2); max-width: 46ch; }
/* The privacy notice reads as one full-width paragraph below the send button, not a column beside it. */
.apply .actions:has(.notice) { flex-direction: column; align-items: flex-start; }
.apply .actions small.notice { max-width: 72ch; }
.actions small.notice a { color: var(--phosphor-200); text-decoration: underline; text-underline-offset: 3px; }
.apply .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.field.wide { grid-column: 1 / -1; }
.apply > .field { margin-bottom: 14px; }
.field small { color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.field input, .field textarea { font: 15px/1.4 var(--font-mono); color: var(--phosphor-100); background: #020503; border: 1px solid var(--line-2); padding: 10px 11px; border-radius: 0; text-transform: none; letter-spacing: 0; }
.field input[type=file] { font-size: 12px; min-height: 44px; }
/* iPhone zooms into any field under 16px on focus, and stays zoomed: 16px on touch screens and phones. */
@media (pointer: coarse), (max-width: 640px) { .field input, .field textarea, .field select { font-size: 16px; } }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--phosphor-400); box-shadow: 0 0 0 1px var(--phosphor-400); }
.field.invalid span { color: var(--rust-300); }
.field.invalid input, .field.invalid textarea { border-color: var(--rust-300); }
.form-error { color: var(--rust-300); font-size: 11px; letter-spacing: .08em; min-height: 1.2em; margin: 12px 0 0; }
.receipt { margin: 8px 0 0; padding: 16px; border: 1px solid var(--line-2); background: #020503; color: var(--phosphor-200); font: 13px/1.8 var(--font-mono); white-space: pre-wrap; }

@media (max-width: 900px) {
  .card { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 58%; }
  .zone-menu { grid-template-columns: 1fr 1fr; }
  .zone-menu button:nth-child(2n) { border-right: 0; }
  .zone-menu button:nth-child(n+5) { border-bottom: 1px solid var(--line-2); }
  .zone-menu button:nth-child(n+7) { border-bottom: 0; }
  #role-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .proto-tag { display: none; }
  .hero { flex-direction: column; align-items: flex-start; padding-top: 18px; }
  .viewer-bar .flow, .tour-state { display: none; }
  .stage { height: min(78svh, 680px); min-height: 460px; }
  .pin-name, .pin-count { display: none; }
  .pin.on .pin-name { display: inline; }
  .pin { padding: 6px 8px; }
  .hud { display: none; }
  /* Compact bottom sheet: roles first, pitch trimmed, so the lit zone stays visible above it. */
  .card { left: 8px; right: 8px; bottom: 8px; max-height: 52%; padding: 12px 14px 12px; }
  .card-path { margin-bottom: 8px; font-size: 9px; }
  .card-close { top: 6px; right: 6px; padding: 8px; }
  .card-n { margin-bottom: 4px; font-size: 9px; }
  .card h2 { font-size: 22px; margin-bottom: 6px; }
  .card-label { order: 3; }
  .card-roles { order: 4; margin-bottom: 0; }
  .card-roles button { font-size: 16px; padding: 9px 10px; }
  .card-roles small { display: none; }
  .card-pitch { order: 5; margin: 10px 0 0; font-size: 12px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card-cta { order: 6; margin-top: 0; padding-top: 10px; }
  .card-cta .btn { padding: 10px 12px; }
  .apply .grid { grid-template-columns: 1fr; }
  .own { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .card, .card > * { animation: none; } .pin { transition: none; } }

/* ---------- Touch: inline trailer → full-screen explore ---------- */
.viewer-bar button.explore, .viewer-bar button.explore:hover { background: var(--phosphor-300); color: #031006; border-color: var(--phosphor-300); font-weight: 600; }
.viewer-bar button.explore[aria-pressed="true"] { background: none; color: var(--phosphor-200); border-color: var(--line-2); }
.card-grip, .card-swipe { display: none; }

body.locked { position: fixed; left: 0; right: 0; overflow: hidden; }
.viewer.immersive {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; height: 100dvh; border: 0;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overscroll-behavior: contain; animation: immersiveIn .3s ease both;
}
@keyframes immersiveIn { from { opacity: 0; } }
.viewer.immersive .stage { flex: 1; height: auto; min-height: 0; }
.viewer.immersive .zone-menu, .viewer.immersive .tour-state, .viewer.immersive .flow { display: none; }
.viewer.immersive .viewer-bar { flex-wrap: nowrap; }
.viewer.immersive .viewer-bar .cmd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer.immersive .hud { display: block; top: 12px; bottom: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; animation: hudFade 4.5s ease forwards; }
@keyframes hudFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.viewer.immersive .card { touch-action: pan-y; }
.viewer.immersive .card-grip { display: block; flex: none; width: 56px; height: 18px; margin: -4px auto 6px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.viewer.immersive .card-grip::before { content: ''; position: absolute; left: 10px; right: 10px; top: 7px; height: 4px; border-radius: 2px; background: var(--line-2); }
.viewer.immersive .card-swipe { display: block; order: 7; margin: 10px 0 0; text-align: center; font-size: 10px; letter-spacing: .1em; color: var(--fg-3); }
/* Collapsed: just the zone name and role count, so the 3D gets almost the whole screen. */
.card.peek > :not(.card-grip):not(.card-n):not(h2):not(.card-label):not(.card-swipe):not(.card-close) { display: none; }
.card.peek h2 { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .viewer.immersive, .viewer.immersive .hud { animation: none; } }

/* ---------- Fixes from review ---------- */
.soon-note { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--soon); color: var(--fg-1); font: 13px/1.6 var(--font-sans); background: rgba(255, 157, 58, .06); }
.link-back { display: inline-block; margin: 0 0 16px; padding: 6px 0; background: none; border: 0; color: var(--phosphor-200); font: 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.zoom { display: inline-flex; }
.zoom button { min-width: 34px; }
.zoom button + button { border-left: 0; }
/* Touch: bigger targets, no zoom buttons (pinch), Overview only in full-screen. */
@media (pointer: coarse) {
  .viewer-bar button { min-height: 44px; }
  .card-close { width: 44px; height: 44px; top: 4px; right: 4px; }
  .zoom { display: none; }
  .viewer:not(.immersive) #overview { display: none; }
}
.viewer.immersive .viewer-bar .cmd { display: none; }
.viewer.immersive .viewer-bar .tools { margin-left: 0; width: 100%; justify-content: flex-end; }
/* Landscape phones: the card becomes a side panel so the 3D keeps most of the screen. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .card { top: 8px; bottom: 8px; left: auto; right: 8px; width: min(320px, 46%); max-height: none; padding: 12px 14px; }
  .card h2 { font-size: 22px; }
  .card-label { order: 3; } .card-roles { order: 4; margin-bottom: 0; } .card-pitch { order: 5; margin: 10px 0 0; font-size: 12px; }
  .card-cta { order: 6; } .card-roles button { font-size: 16px; padding: 8px 10px; } .card-roles small { display: none; }
  .stage { height: 86svh; min-height: 0; }
}
/* Touch screens: numbered pins only (plus the selected zone's team), so labels never pile up. */
@media (pointer: coarse) {
  .pin:not(.on) .pin-name, .pin .pin-count { display: none; }
  .pin { padding: 6px 8px; }
}

@media (max-width: 640px) { .wide-only { display: none; } }

/* With a zone selected, other pins shrink to their number so labels don't pile up. */
.pins:has(.pin.on) .pin:not(.on):not(:hover):not(:focus-visible) .pin-name,
.pins:has(.pin.on) .pin:not(.on):not(:hover):not(:focus-visible) .pin-count { display: none; }

/* Founding technical team (intro from the JD document) */

/* JD sections */
.jd-kicker { margin: 0 0 6px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--phosphor-300); }
.jd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.jd-not { padding-left: 18px; border-left: 1px dashed var(--line-2); }
.jd-not h3 { color: var(--fg-2) !important; }
ul.not { list-style: none; padding-left: 0 !important; }
ul.not li { position: relative; padding-left: 18px; }
ul.not li::before { content: '✕'; position: absolute; left: 0; top: 0; font: 10px/2.2 var(--font-mono); color: var(--fg-3); }
.jd-rich .jd-bonus, .jd-bonus { margin: 22px 0 6px; padding: 14px 18px; border: 1px solid var(--line-2); background: rgba(51, 255, 102, .03); }
.jd-terms { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2) !important; font-family: var(--font-mono) !important; }
.jd-terms b { font-weight: 500; color: var(--phosphor-200); }
.jd-benefits { margin: 6px 0 0; color: var(--phosphor-200) !important; }
.jd-footer { margin: 10px 0 0; font: italic 16px/1.5 var(--font-display) !important; color: var(--fg-1) !important; }
.job-body h4 { font: 600 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--phosphor-300); margin: 18px 0 6px; }
.jd-not h4 { color: var(--fg-2); }
.job-apply-top { margin: 0 0 14px !important; }
.jd-apply { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px -22px -24px; padding: 12px 22px; background: rgba(4, 8, 5, .96); border-top: 1px solid var(--line-2); box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); }
.jd-apply span { font: 400 16px/1.25 var(--font-display); color: var(--fg-1); min-width: 0; }
.job-body li b, .jd li b { font-weight: 600; color: var(--fg-1); }

@media (max-width: 900px) {
}
@media (max-width: 640px) {
  .jd-apply span { display: none; }
  .jd-apply .btn { width: 100%; justify-content: center; }
  .jd-split { grid-template-columns: 1fr; }
  .jd-not { padding-left: 0; border-left: 0; }
}

/* Live careers page additions */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.turnstile { margin: 14px 0 0; }
.roles-empty { margin: 10px 0; padding: 16px; border: 1px dashed var(--line-2); color: var(--fg-2); font: 13px/1.6 var(--font-sans); }
.jd-rich p, .jd-rich li { font: 13px/1.7 var(--font-sans); color: var(--fg-2); }
.jd-rich ul { margin: 0; padding-left: 18px; }
.jd-rich p { margin: 0 0 10px; }
.jd-rich strong, .jd-rich b { font-weight: 600; color: var(--fg-1); }
.apply button[type=submit]:disabled { opacity: .6; cursor: progress; }

/* About Aran: the company intro, inside every job description */
.jd-about { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); }
.jd-rich .jd-about-mission { font: 400 17px/1.5 var(--font-display); color: var(--fg-1); }
.jd-callout { margin: 14px 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--phosphor-300); }
.jd-rich .jd-callout p { margin: 0; font: italic 400 19px/1.4 var(--font-display); color: var(--phosphor-100); }
.jd-rich .jd-closer { font-size: 12px; color: var(--fg-3); }
.job-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.job-actions .btn { margin-top: 0; }
.job-link { font-size: 11px; letter-spacing: .06em; color: var(--fg-3); text-underline-offset: 3px; }
@media (hover: hover) { .job-link:hover { color: var(--phosphor-200); } }

/* Role rows: each discipline's wireframe drawing redraws itself on hover. */
.glyph { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); background: rgba(51, 255, 102, .03); transition: border-color .3s, box-shadow .3s; }
.job .glyph { width: 52px; height: 52px; }
.glyph svg { width: 30px; height: 30px; fill: none; stroke: var(--phosphor-300); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.card-roles button:focus-visible .glyph, .job[open] .glyph { border-color: #1f7a3a; box-shadow: 0 0 18px rgba(51, 255, 102, .25); }
@media (hover: hover) { .card-roles button:hover .glyph, .job summary:hover .glyph { border-color: #1f7a3a; box-shadow: 0 0 18px rgba(51, 255, 102, .25); } }
@media (hover: hover) { .card-roles button:hover .glyph svg *, .job summary:hover .glyph svg * { stroke-dasharray: 100; animation: glyph-draw .9s ease both; } }
.soon-role .glyph { border-color: #6b4a14; } .soon-role .glyph svg { stroke: var(--soon); }
@keyframes glyph-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .glyph svg * { animation: none !important; } }
@media (max-width: 640px) {
  .job summary { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .job .glyph { width: 40px; height: 40px; grid-row: 1 / span 2; } .job .glyph svg { width: 24px; height: 24px; }
  .job-meta { grid-column: 2; }
  .job-hook { font-size: 12px; }
}
/* The card is a compact sheet on touch screens: smaller drawing, no hook. */
@media (pointer: coarse), (max-width: 640px) {
  .card-roles button { grid-template-columns: 32px 1fr; gap: 10px; }
  .card-roles .glyph { width: 32px; height: 32px; } .card-roles .glyph svg { width: 22px; height: 22px; }
  .card-roles .role-hook { display: none; }
}
/* Touch: campus pins get a taller hit area; the narrowest phones list zones in one column. */
@media (pointer: coarse) { .pin { padding-block: 10px; } }
@media (max-width: 380px) {
  .zone-menu { grid-template-columns: 1fr; }
  .zone-menu button, .zone-menu button:nth-child(n), .zone-menu button:last-child:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line-2); grid-column: auto; }
  .zone-menu button:last-child { border-bottom: 0; }
}

/* Return visits after applying: the status window, "Applied" marks, saved drafts, the puzzle in the role window */
.jd-body > p.status-lede { margin: 18px 0 0; font: italic 18px/1.45 var(--font-display); color: var(--fg-1); }
.status-hook { flex-basis: 100%; margin: 4px 0 0; font: 12px/1.5 var(--font-sans); color: var(--fg-2); }
.status-off { margin: 18px 0 0; color: var(--fg-3); }
@media (hover: hover) { .status-off:hover { color: var(--phosphor-200); } }
.applied-mark { color: var(--phosphor-200); }
.card-roles .applied .role-go { color: var(--phosphor-200); }
.draft-note { margin: 0 0 14px; padding: 8px 12px; border-left: 2px solid var(--phosphor-300); font: 12px/1.5 var(--font-sans); color: var(--fg-2); }
.draft-note .link-back { margin: 0 0 0 6px; }
.jd-game { display: block; width: 100%; height: 520px; border: 0; background: transparent; }
.jd-games { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.jd-games .btn { min-height: 40px; }