/* jobalob · site styles. Colours, type sizes, radii and spacing come from /tokens.css.
   Play loud, pay quiet: .play screens sit on a pop ground; .paper screens stay bg + ink. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.play { background: var(--play-ground, var(--tangerine)); color: var(--on-pop); }
a { color: var(--brand); }
.play a { color: var(--on-pop); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.play :focus-visible { outline-color: var(--on-pop); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Column ── */
.col {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-48) var(--space-24);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.col.center { justify-content: center; }
.top { padding: 20px var(--space-24) 0; max-width: var(--measure); width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top .mark { width: 120px; height: auto; }
.top a { display: block; line-height: 0; }
.logo { width: min(var(--logo-width), 70vw); height: auto; display: block; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
[data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; }
.play .logo-light, .play .logo-dark { display: none !important; }
.logo-pop { display: none; }
.play .logo-pop { display: block; }

h1, .h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 22px; line-height: 1.25; font-weight: 600; margin: 0; }
p { margin: 0; }
.lead { margin-top: var(--space-12); }
.muted { color: var(--muted); }
.play .muted { color: var(--on-pop); opacity: 0.78; }
.label { font-size: 15px; line-height: 1.3; font-weight: 600; }
.kicker { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.stack > * + * { margin-top: var(--space-24); }
.stack-sm > * + * { margin-top: var(--space-12); }

footer.legal { padding: var(--space-24); text-align: center; font-size: 14px; color: var(--muted); max-width: var(--measure); margin: 0 auto; }
.play footer.legal { color: var(--on-pop); opacity: 0.8; }
footer.legal p + p { margin-top: 8px; }
footer.legal a { color: inherit; }
/* The copyright line in capitals, widely spaced (Simon, 2026-10-23: a quieter, more professional sign-off). */
/* It leads the footer, above the O*NET credit and the links, whatever order a page writes them in. */
footer.legal { display: flex; flex-direction: column; gap: 8px; }
footer.legal p + p { margin-top: 0; }
footer.legal .copyright { order: -1; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; line-height: 1.7; }
.prose h2 { margin-top: var(--space-24); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px;
  border-radius: var(--radius-pill); border: 0; cursor: pointer;
  font: 600 17px/1.2 var(--font-sans); text-decoration: none;
  background: var(--brand); color: #fff;
}
/* Dark mode: the plain button is light blue, so its text goes dark. :where() keeps this at the weight of .btn
   alone, so .play .btn, .unlock .btn, .btn.ghost and .btn.link below still win (they were losing: dark text on dark). */
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .btn { color: var(--bg); } }
:where([data-theme="dark"]) .btn { color: var(--bg); }
.play .btn { background: var(--on-pop); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.play .btn.ghost { color: var(--on-pop); border-color: var(--on-pop); }
.btn.link { background: none; color: var(--brand); min-height: 44px; padding: 8px 0; text-decoration: underline; }
.play .btn.link { color: var(--on-pop); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── Landing ── */
.hero { display: grid; gap: var(--space-40); }
.hero .h1 { font-size: clamp(34px, 8vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; margin-top: var(--space-40); }
/* Hero photo (only when /assets/hero.jpg exists). The orange pane's slanted edge follows the lean of the
   stone column in the photo. Phones: photo band under the content, angled top edge. */
.stage { position: relative; }
.stage .col { position: relative; z-index: 2; flex: none; }
.hero-photo { margin: 0; position: relative; }
.pane { display: none; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 42% 40%; }
.has-photo .stage { display: flex; flex-direction: column; }
.has-photo .hero-photo { order: 2; clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); margin-top: -24px; }
.has-photo .stage .col { order: 1; padding-bottom: var(--space-40); }
.has-photo .hero { grid-template-columns: 1fr; }
.paper { background: var(--bg); color: var(--ink); padding-top: var(--space-24); }
.paper a { color: var(--brand); }
.paper footer.legal { color: var(--muted); opacity: 1; border-top: 1px solid rgba(91,102,114,0.25); margin-top: var(--space-24); padding-top: var(--space-24); }
.paper .trust li { border-top-color: var(--clay); }
.band { padding-top: var(--space-24); }
.lead-m { display: none; }
/* The Stripe badge drops a little below the links and keeps clear of the orange below the page. */
.stripe { line-height: 0; }
footer.legal p.stripe { margin-top: 24px; }
.paper footer.legal { padding-bottom: 36px; }
.stripe img { height: 34px; width: auto; }
.stripe-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stripe-light { display: none; } :root:not([data-theme="light"]) .stripe-dark { display: inline; } }
[data-theme="dark"] .stripe-light { display: none; } [data-theme="dark"] .stripe-dark { display: inline; }
@media (max-width: 759px) {
  .has-photo .stage .lead { display: none; }
  .has-photo .lead-m { display: block; margin-bottom: var(--space-24); }
  .has-photo .offer a { padding: 12px 60px 12px 16px; }
  .has-photo .offer strong { font-size: 18px; }
  .has-photo .hero .h1 { margin-top: var(--space-24); }
}
.band .trust { margin-top: 0; }
@media (min-width: 760px) {
  .has-photo .stage { display: block; min-height: 860px; overflow: hidden; }
  .has-photo .hero-photo { position: absolute; inset: 0; clip-path: none; margin: 0; }
  .has-photo .hero-photo img { position: absolute; top: 0; left: 30vw; height: 100%; width: auto; min-width: calc(100% - 30vw); aspect-ratio: auto; object-fit: cover; object-position: left center; }
  .has-photo .pane { display: block; position: absolute; inset: 0; z-index: 1; background: var(--tangerine); clip-path: polygon(0 0, var(--pane-top, calc(30vw + 359px)) 0, var(--pane-bottom, calc(30vw + 75px)) 100%, 0 100%); }
  .has-photo .stage .col { padding-bottom: 0; }
  .has-photo .hero > div { max-width: 370px; }
  .has-photo .hero .h1 { text-wrap: balance; }
  .has-photo .offer { grid-template-columns: 1fr; }
  .has-photo .offer li { box-shadow: var(--shadow-lob); }
}
.time { margin-top: var(--space-12); font-weight: 600; }
.offer { list-style: none; padding: 0; margin: var(--space-24) 0 0; display: grid; gap: 10px; }
/* Solid, not see-through: on wide screens the tiles cross the slant onto the photo, and should read as cards laid over it. */
.offer li { background: #fac091; color: var(--on-pop); border-radius: var(--radius-card); }
/* Each tile is the way in: the whole tile starts the questions. Its arrow button is in brand colours, blue then pink. */
.offer a {
  position: relative; display: grid; gap: 2px; padding: 14px 68px 14px 18px; border-radius: inherit;
  color: inherit; text-decoration: none; transition: transform 160ms ease;
}
.offer a::before {
  content: ''; position: absolute; right: 14px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; background: var(--sky);
}
.offer li + li a::before { background: var(--orchid); }
.offer a::after {
  content: ''; position: absolute; right: 30px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border: solid var(--on-pop); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg);
}
.offer a:hover { transform: translateY(-2px); }
.offer a:hover::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--on-pop) 18%, transparent); }
.offer a:focus-visible { outline: 3px solid var(--on-pop); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .offer a { transition: none; } .offer a:hover { transform: none; } }
.offer strong { font-size: 20px; letter-spacing: -0.01em; }
.offer span { font-size: 16px; }
.trust { list-style: none; padding: 0; margin: var(--space-48) 0 0; display: grid; gap: 14px; }
.trust li { display: grid; align-content: start; gap: 4px; padding-top: 14px; border-top: 2px solid rgba(20,32,44,0.25); }
.trust strong { font-size: 18px; }
.trust span { font-size: 16px; }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } }
.court-demo { position: relative; height: 210px; }
.court-demo .card { position: absolute; width: 62%; max-width: 280px; height: 150px; }
.court-demo .card:nth-child(1) { left: 0; top: 36px; transform: rotate(-7deg); background: var(--sky); }
.court-demo .card:nth-child(2) { left: 22%; top: 0; transform: rotate(4deg); background: var(--orchid); }
.court-demo .card:nth-child(3) { left: 38%; top: 52px; transform: rotate(-2deg); background: var(--clay); animation: lobIn 700ms 200ms cubic-bezier(.3,.7,.4,1) both; }
@media (min-width: 760px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
  .col.wide { max-width: 1000px; }
}

/* ── Cards (lobbed things) ── */
.card {
  border-radius: var(--radius-card); box-shadow: var(--shadow-lob); color: var(--on-pop);
  padding: 24px; display: flex; align-items: flex-end;
  font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em;
}
.court-demo .card { font-size: 22px; }
@keyframes lobIn { 0% { transform: translate(-130%, 70%) rotate(-24deg); } 55% { transform: translate(-30%, -30%) rotate(-6deg); } 100% { transform: none; } }
@keyframes lobInL { 0% { transform: translate(-140%, 60%) rotate(-20deg); } 55% { transform: translate(-30%, -30%) rotate(-5deg); } 100% { transform: none; } }
@keyframes lobInR { 0% { transform: translate(140%, 60%) rotate(20deg); } 55% { transform: translate(30%, -30%) rotate(5deg); } 100% { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }

/* ── Lob: one question at a time ── */
.lob { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); width: 100%; }
.lob .bar, .rally .bar { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.lob .count, .rally .count { font-size: 15px; font-weight: 600; }
.welcome { align-self: flex-start; color: var(--brand); margin: 0; }
.lob .prompt, .rally .prompt { font-size: 18px; align-self: center; text-align: center; }
.lob .stage { position: relative; width: 100%; max-width: 480px; }
.lob .in { animation: lobIn 520ms cubic-bezier(.3,.7,.4,1) both; }

/* The question card holds its own answers: tap one and the whole card is thrown up to the tray. */
.lob .stage .qcard { position: relative; display: flex; align-items: stretch; padding: 24px; }
.qcard .qbody { flex: 1; justify-content: space-between; }
/* A minimum height, not a fixed card shape: a role card with a description must grow, or its answer buttons
   spill out below it (dark text on the dark page, so they looked missing). */
@media (min-width: 521px) { .lob .stage { max-width: 440px; } .lob .stage .qcard { min-height: 277px; } }
.qbody { display: flex; flex-direction: column; gap: var(--space-24); }
.qtext { display: block; min-height: 2.3em; }
.qcard .chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.chip {
  font: 600 15px/1.25 var(--font-sans); color: var(--on-pop); background: transparent;
  border: 1.5px solid var(--on-pop); border-radius: var(--radius-pill);
  padding: 10px 6px; min-height: 52px; cursor: pointer; letter-spacing: 0;
}
.chip:hover { background: color-mix(in srgb, var(--on-pop) 10%, transparent); }
.chip[aria-pressed="true"] { background: var(--on-pop); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--on-pop); outline-offset: 2px; }
@media (max-width: 520px) {
  .lob .stage .qcard { padding: 20px; }
  .qcard .chips { grid-template-columns: 1fr; gap: 6px; }
  .chip { min-height: 44px; padding: 8px 12px; }
  .card { font-size: 26px; }
}

/* ── Stage strip: where you are in the three parts ── */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 420px; border-radius: 10px; overflow: hidden; }
/* On a coloured intro screen one segment can match the background, so the strip gets an outline there. */
.play .stages { box-shadow: 0 0 0 2px var(--on-pop); }
.stages span { position: relative; padding: 9px 10px; font-size: 15px; font-weight: 700; color: var(--on-pop); background: color-mix(in srgb, var(--on-pop) 12%, transparent); }
.stages span.on, .stages span.done { background: var(--sky); }
.stages span:nth-child(2).on, .stages span:nth-child(2).done { background: var(--tangerine); }
.stages span:nth-child(3).on, .stages span:nth-child(3).done { background: var(--orchid); }
.stages span.done::after { content: ''; position: absolute; right: 8px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #2db84d; }
.stages span.done::before { content: ''; position: absolute; right: 16px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); z-index: 1; }
.progress { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: 15px; font-weight: 600; }

/* ── Tray: one unlabelled column per group; answered cards land here as bricks ── */
.tray { position: relative; display: grid; gap: 10px; width: 100%; max-width: 420px; align-items: end; }
.tray .stack { position: relative; display: flex; justify-content: center; }
.tray .slots {
  display: flex; flex-direction: column-reverse; gap: 2px; width: 100%;
  height: calc(var(--n) * (var(--tile-h) + 2px) + 4px); padding: 2px;
  border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.tray .tile { display: block; height: var(--tile-h); border-radius: 2px; flex: none; }
.tray .tile.landed { animation: brickDrop 220ms ease-out; }
@keyframes brickDrop { 0% { transform: translateY(-5px) scaleX(0.8); } 70% { transform: translateY(1px) scaleX(1.06); } 100% { transform: none; } }
.tray .stack.clearing .tile { animation: brickClear 560ms cubic-bezier(.5,0,.7,.4) forwards; animation-delay: calc(var(--k) * 22ms); }
@keyframes brickClear {
  0% { filter: none; }
  30% { filter: brightness(1.35) saturate(1.3); transform: scaleX(1.12); }
  100% { transform: translateY(40px) scaleX(0.2); opacity: 0; }
}
.tray .stack.done .slots > .tile { visibility: hidden; }
.tray .tick {
  position: absolute; bottom: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); opacity: 0; transform: scale(0);
}
.tray .tick::after {
  content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tray .tick::after { border-color: var(--bg); } }
[data-theme="dark"] .tray .tick::after { border-color: var(--bg); }
.tray .stack.done .tick { opacity: 1; transform: none; animation: tickPop 360ms cubic-bezier(.3,1.6,.5,1); }
@keyframes tickPop { 0% { transform: scale(0); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tray .tile.landed, .tray .stack.done .tick { animation: none; } }

/* ── Choice buckets and the code they open into ── */
.tray.buckets { max-width: 360px; }
.codebox { align-items: flex-start; gap: var(--space-24); }
.codebox .tray { margin-top: var(--space-12); }
.tray .letter {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; border-radius: 16px; font-size: 32px; font-weight: 700; color: var(--on-pop);
  animation: letterPop 420ms cubic-bezier(.3,1.6,.5,1) both;
}
/* Same colours, in the same order, as the code on the result page. */
.tray .stack:nth-child(1) .letter { background: var(--tangerine); }
.tray .stack:nth-child(2) .letter { background: var(--sky); }
.tray .stack:nth-child(3) .letter { background: var(--orchid); }
@keyframes letterPop { 0% { transform: scale(0) rotate(-12deg); } 100% { transform: none; } }
.tcaps.codewords { max-width: 360px; margin-top: 0; min-height: 1.4em; }
.tcaps.codewords span { font-size: 16px; color: var(--ink); animation: fadeIn 300ms both; }
@media (prefers-reduced-motion: reduce) { .tray .letter, .codewords span { animation: none; } }

/* ── Paid reveal ── */
body.revealing #app > .stack > :not(#report) { display: none; }
body.revealing .keep, body.revealing footer.legal p + p { display: none; }
.tcaps { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: -14px; }
.tcaps span { text-align: center; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.qsub { display: block; margin-top: 8px; font-size: 16px; line-height: 1.35; font-weight: 400; letter-spacing: 0; }
.qtag { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.reveal .revealbox { margin: auto 0; }
.steps-live { list-style: none; padding: 0; margin: var(--space-24) 0; display: grid; gap: 10px; font-weight: 600; font-size: 20px; }
.steps-live li { display: flex; align-items: center; gap: 12px; opacity: 0.35; }
.steps-live li::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--on-pop); }
.steps-live li.on, .steps-live li.done { opacity: 1; }
.steps-live li.on::before { border-top-color: transparent; animation: spin 700ms linear infinite; }
.steps-live li.done::before { background: #2db84d; border-color: #2db84d; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps-live li.on::before { animation: none; } }

/* ── Rally: two options face off ── */
.rally { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }
.rally .court { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.rally .side {
  position: relative; min-height: 240px; border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-lob);
  color: var(--on-pop); padding: 20px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; cursor: pointer; font-family: var(--font-sans);
}
.rally .side.l { background: var(--rally-left); }
.rally .side.r { background: var(--rally-right); }
.rally .side b { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.rally .side span { font-size: 15px; line-height: 1.35; }
.rally .inL { animation: lobInL 520ms cubic-bezier(.3,.7,.4,1) both; }
.rally .inR { animation: lobInR 520ms cubic-bezier(.3,.7,.4,1) both; }
@media (max-width: 520px) { .rally .side { min-height: 200px; padding: 16px; } .rally .side b { font-size: 21px; } }


@media (prefers-reduced-motion: reduce) {
  .lob .in, .rally .inL, .rally .inR, .court-demo .card { animation: fadeIn 200ms both !important; }
}

/* ── Forms (assurance) ── */
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.bands { display: flex; flex-wrap: wrap; gap: 8px; }
.bands label { position: relative; }
.bands input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bands span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-pill); font-weight: 600; font-size: 15px;
}
.bands input:checked + span { background: var(--ink); color: var(--bg); }
.bands input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
select {
  font: inherit; color: var(--ink); background: var(--bg); width: 100%; min-height: 48px;
  border: 1.5px solid var(--ink); border-radius: 14px; padding: 8px 12px;
}
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.sub { font-size: 20px; font-weight: 700; }
.error { color: var(--ink); font-weight: 600; border-left: 4px solid var(--brand); padding-left: 12px; }

/* ── Result (paper) ── */
.panel { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding-top: var(--space-24); }
.code { display: flex; gap: 8px; margin-top: 8px; }
.code b {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  font-size: 28px; font-weight: 700; color: var(--on-pop);
}
.code b:nth-child(1) { background: var(--tangerine); }
.code b:nth-child(2) { background: var(--sky); }
.code b:nth-child(3) { background: var(--orchid); }
.bars { display: grid; gap: 14px; margin-top: var(--space-12); }
.bars .row { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: center; }
.bars .name { font-weight: 600; }
.bars .track { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.bars .fill { height: 100%; border-radius: 999px; background: var(--muted); width: 0; transition: width 700ms cubic-bezier(.3,.7,.4,1); }
.bars .row.hi .fill { background: var(--tangerine); }
.bars .desc { grid-column: 2; font-size: 15px; color: var(--muted); margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .bars .fill { transition: none; } }
.list { list-style: none; padding: 0; margin: var(--space-12) 0 0; display: grid; gap: 10px; }
.list li { display: flex; flex-direction: column; }
.list li b { font-weight: 600; }
.roles li { font-size: 20px; font-weight: 600; }
.bullets { list-style: disc; padding-left: 1.3em; margin: var(--space-12) 0 0; display: grid; gap: 10px; }
.bullets li { display: list-item; font-size: 20px; font-weight: 600; }
.unlock { background: var(--sky); color: var(--on-pop); border-radius: var(--radius-card); padding: var(--space-24); }
.unlock .btn { background: var(--on-pop); color: #fff; }
.unlock ul { margin: var(--space-12) 0 0; padding-left: 1.2em; }
.unlock li + li { margin-top: 4px; }
.unlock .secure { font-size: 15px; font-weight: 600; }
.unlock .coverage { font-weight: 600; }
.unlock .coverage p + p { margin-top: 4px; }
.unlock .btn.ghost { background: transparent; color: var(--on-pop); border: 1.5px solid var(--on-pop); }
.unlocked { display: flex; gap: 14px; align-items: flex-start; background: var(--sky); color: var(--on-pop); border-radius: var(--radius-card); padding: var(--space-24); }
.unlocked .tick { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2db84d; position: relative; }
.unlocked .tick::after { content: ''; position: absolute; left: 12px; top: 6px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(45deg); }
.unlocked h2 { margin: 0; }
.unlocked p { margin-top: 4px; }
/* Paid: a small badge at the top right in place of the big unlocked banner. */
.unlocked-badge {
  display: flex; width: fit-content; margin: 0 0 0 auto; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600;
  background: color-mix(in srgb, var(--sky) 22%, transparent);
}
.unlocked-badge .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); position: relative; }
.unlocked-badge .tick::after { content: ''; position: absolute; left: 8.5px; top: 4.5px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Free result: one role per way in, as three columns (stacked on a phone). The column name is written on each. */
.band-roles { list-style: none; padding: 0; margin: var(--space-12) 0 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .band-roles { grid-template-columns: repeat(3, 1fr); } }
.band-roles li { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; color: var(--on-pop); }
.band-roles .label { font-size: 14px; font-weight: 700; opacity: 0.85; }
.band-roles b { font-size: 18px; line-height: 1.25; }
.band-roles .band-light { background: var(--tangerine); }
.band-roles .band-train { background: var(--sky); }
.band-roles .band-degree { background: var(--orchid); }

/* Paid report tabs: About me, My pathways, Choose again. They stay at the top while the panel scrolls. */
.tabs {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 8%, var(--bg));
  box-shadow: 0 0 0 8px var(--bg);
}
.tab {
  font: 600 15px/1.2 var(--font-sans); color: var(--ink); background: transparent; border: 0; cursor: pointer;
  min-height: 44px; padding: 8px 6px; border-radius: var(--radius-pill);
}
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tabpanel { margin-top: var(--space-12); }
.tabpanel > * + * { margin-top: var(--space-12); }
/* Each part of the report is a tile, so it reads as grouped boxes rather than one long list. */
.panel.tile { border-top: 0; padding: var(--space-24); border-radius: var(--radius-card); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
@media (max-width: 520px) { .panel.tile { padding: 18px; } }
.tile .pathway { background: var(--bg); }
/* Colour blends, after Stripe's (Simon, 2026-10-23), from jobalob's own colours and never red. Each pathway's header is
   a blend, a different one per card, so closed cards read as bright bands; the report tile opens the tab with one. */
.pathway > summary, .report-head.tile { color: var(--on-pop); }
.pathway > summary {
  margin: calc(-1 * var(--space-24)); padding: 20px var(--space-24); border-radius: var(--radius-card);
  background:
    radial-gradient(120% 160% at 0% 100%, var(--tangerine) 0%, transparent 60%),
    radial-gradient(110% 150% at 100% 0%, var(--sky) 0%, transparent 62%),
    linear-gradient(120deg, var(--clay), var(--orchid));
}
.pathway:nth-of-type(3n+2) > summary { background:
  radial-gradient(120% 160% at 100% 100%, var(--orchid) 0%, transparent 60%),
  radial-gradient(110% 150% at 0% 0%, var(--sky) 0%, transparent 62%),
  linear-gradient(120deg, var(--tangerine), var(--clay)); }
.pathway:nth-of-type(3n) > summary { background:
  radial-gradient(120% 160% at 0% 0%, var(--tangerine) 0%, transparent 58%),
  radial-gradient(110% 150% at 100% 100%, var(--orchid) 0%, transparent 62%),
  linear-gradient(120deg, var(--sky), var(--clay)); }
.pathway[open] > summary { margin-bottom: var(--space-24); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.pathway > summary h3 { color: var(--on-pop); font-weight: 700; }
.pathway > summary::after { border-color: var(--on-pop) !important; }
.pathway { box-shadow: var(--shadow-lob); }
.report-head.tile { background:
  radial-gradient(90% 140% at 0% 0%, var(--sky) 0%, transparent 60%),
  radial-gradient(90% 140% at 100% 100%, var(--orchid) 0%, transparent 60%),
  linear-gradient(110deg, var(--tangerine), var(--clay)); }
.report-head.tile .muted, .report-head.tile .note { color: var(--on-pop); }
.report-head.tile .note { border-left-color: var(--on-pop); }
.report-head.tile .btn.ghost { color: var(--on-pop); border-color: var(--on-pop); }
@media print { .pathway > summary, .report-head.tile { background: none; } }
.swap { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
@media print {
  .tabpanel[hidden] { display: block !important; }
  .panel.tile { background: none; padding: 0; }
}
/* Sample report: a soft blue intro tile with the country switch, so it's always clear this is Sam, not you. */
.panel.tile.sample-intro { background: color-mix(in srgb, var(--sky) 18%, var(--bg)); }
.sample-countries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sample-countries .label { margin-right: 4px; font-weight: 600; }
.sample-countries .btn[aria-current] { pointer-events: none; }
.sample-note { margin-top: 8px; }
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .panel.tile.sample-intro { background: none; padding: 0; }
  .sample-print { margin-top: 24pt; padding-top: 8pt; border-top: 1px solid #999; font-weight: 600; }
}
.report ul { margin: var(--space-12) 0 0; padding-left: 1.2em; }
.report li + li { margin-top: 4px; }

/* ── Full report (paper, pay quiet) ── */
.hair { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.note { font-size: 15px; border-left: 4px solid var(--brand); padding: 4px 0 4px 12px; }
.fine { font-size: 14px; color: var(--muted); margin-top: var(--space-12); }
.tag { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.report-head > * + * { margin-top: var(--space-12); }
.report-head .btn { margin-top: var(--space-12); }
h3 { font-size: 19px; line-height: 1.3; font-weight: 600; margin: 0; }
h4 { font-size: 16px; line-height: 1.3; font-weight: 600; margin: var(--space-24) 0 8px; }
.band-head { margin-top: var(--space-24); padding: 10px 14px; border-radius: 12px; color: var(--on-pop); }
.band-head .band-title { margin: 0; font-size: 18px; color: var(--on-pop); }
.band-head .muted { color: var(--on-pop); opacity: 0.85; font-size: 15px; }
.band-head.band-light { background: var(--tangerine); }
.band-head.band-train { background: var(--sky); }
.band-head.band-degree { background: var(--orchid); }
.matches.band-light .match { border-left: 6px solid var(--tangerine); }
.matches.band-train .match { border-left: 6px solid var(--sky); }
.matches.band-degree .match { border-left: 6px solid var(--orchid); }
.matches .match { padding-left: 12px; }
.blurb { margin-top: 4px; font-size: 16px; color: var(--muted); }
.matches { list-style: none; padding: 0; margin: 8px 0 0; }
.match { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.match-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.match-row b { font-weight: 600; }
.match-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.match .match-row .btn { flex-shrink: 0; white-space: nowrap; }
/* On a phone the button sits under the role name, so a long title never squeezes it onto three lines. */
@media (max-width: 560px) { .match .match-row { flex-direction: column; align-items: flex-start; gap: 8px; } }
.match details { margin-top: 6px; font-size: 16px; }
.match summary { cursor: pointer; color: var(--brand); font-size: 15px; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.match details > * + * { margin-top: 8px; }
.match details ul { margin: 4px 0 0; padding-left: 1.2em; }
.why { font-weight: 600; }
/* Folded report sections (all matches, still being written): a closed panel whose heading opens it. */
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { flex: 1; margin: 0; }
details.fold > summary::after { content: ''; flex: none; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin-right: 4px; transition: transform 160ms; }
details.fold[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { details.fold > summary::after { transition: none; } }
.pathway > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pathway > summary::-webkit-details-marker { display: none; }
.pathway > summary h3 { flex: 1; }
.pathway > summary::after { content: ''; flex: none; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin-right: 4px; transition: transform 160ms; }
.pathway[open] > summary::after { transform: rotate(-135deg); }
.pathway[open] > summary { margin-bottom: var(--space-24); }
.pathway { margin-top: var(--space-24); padding: var(--space-24); border-radius: var(--radius-card); }
.pathway-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pathway-top .btn.link { min-height: 32px; padding: 0; font-size: 15px; }
.routes { display: grid; gap: var(--space-24); margin-top: var(--space-24); }
/* One column: the report column is narrow, and long words (emails, links) must wrap instead of pushing out. */
details.pathway { overflow-wrap: anywhere; }
.routes > *, .route { min-width: 0; }
.route h4 { margin-top: 0; }
.steps, .first { margin: 8px 0 0; padding-left: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
/* Numbers in coloured circles, cycling orange, blue, pink. The number is the label, the colour only decoration. */
.steps > li, .first > li { position: relative; padding-left: 42px; min-height: 30px; counter-increment: step; }
.steps > li::before, .first > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--on-pop); background: var(--tangerine);
}
.steps > li:nth-child(3n+2)::before, .first > li:nth-child(3n+2)::before { background: var(--sky); }
.steps > li:nth-child(3n)::before, .first > li:nth-child(3n)::before { background: var(--orchid); }
.steps b { display: block; }
.steps .dur { display: block; font-size: 14px; color: var(--muted); }
.steps p { font-size: 16px; }
.quals, .sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.quals li { display: flex; flex-direction: column; }
.quals .muted, .route .muted { font-size: 15px; }
.sources a, a.src { font-size: 15px; word-break: break-word; }
.jobs .btn-row { gap: 8px; }
/* All nine values: a numbered rank, the name and line, and the label in its own column. The label is a soft pill
   tinted by how much it matters (orange, pink, blue, then plain); the words carry the meaning, the tint only helps. */
.values-rank { list-style: none; padding: 0; margin: var(--space-12) 0 0; counter-reset: v; display: grid; gap: 4px; }
.values-rank li {
  counter-increment: v; display: grid; grid-template-columns: 30px 1fr auto; column-gap: 14px; align-items: start;
  padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.values-rank li:first-child { border-top: 0; }
.values-rank li::before {
  content: counter(v); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: var(--on-pop); background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.values-rank .v-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.values-rank .v-text b { font-weight: 600; }
.values-rank .v-band {
  justify-self: end; white-space: nowrap; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill);
  color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.values-rank .v-essential::before { background: var(--tangerine); }
.values-rank .v-essential .v-band { background: color-mix(in srgb, var(--tangerine) 30%, transparent); }
.values-rank .v-lot::before { background: var(--orchid); }
.values-rank .v-lot .v-band { background: color-mix(in srgb, var(--orchid) 28%, transparent); }
.values-rank .v-matters::before { background: var(--sky); }
.values-rank .v-matters .v-band { background: color-mix(in srgb, var(--sky) 26%, transparent); }
.values-rank .v-less::before, .values-rank .v-none::before { color: var(--ink); }
@media (max-width: 420px) {
  .values-rank li { grid-template-columns: 30px 1fr; row-gap: 6px; }
  .values-rank .v-band { grid-column: 2; justify-self: start; }
}

/* ── Career pages (/careers/, built by tools/careers/build.py). Paper: plain text, no script. ── */
.career ul { margin: 0; padding-left: 1.2em; }
.career li + li { margin-top: 4px; }
.career .crumbs { color: var(--muted); }
.career .bars .fill { display: block; }
.career .crumbs a { color: var(--brand); }
.career-cta { border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--radius-card); padding: var(--space-24); }
.career-cta .btn { margin-top: var(--space-12); }
.career-links { list-style: none; padding-left: 0 !important; }
.career-links.cols { columns: 2 14em; column-gap: var(--space-24); }
.career-links.cols li { break-inside: avoid; margin: 0 0 6px; }
/* The careers index opens with the landing's photo hero, shorter, then a group bar that sticks while the list scrolls. */
.logo-link { display: block; width: fit-content; line-height: 0; }
.careers-index .intro { margin-top: var(--space-12); font-size: 20px; }
.group-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.group-bar-in { max-width: 960px; margin: 0 auto; justify-content: safe center; padding: 10px var(--space-24); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.group-bar-in::-webkit-scrollbar { display: none; }
.paper .group-bar a { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.paper .group-bar a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.paper .group-bar a.to-top { border-color: transparent; padding-left: 4px; padding-right: 4px; }
.careers-index .paper { padding-top: 0; }
.index-intro { max-width: var(--measure); margin: 0 auto; padding: var(--space-40) var(--space-24) var(--space-24); }
.index-intro h1 { font-size: clamp(24px, 4vw, 30px); }
.index-intro p { margin-top: var(--space-12); }
/* The list sits on paper inside a .play page, so undo the play colours that would vanish on a dark paper ground. */
.careers-index .paper .muted { color: var(--muted); opacity: 1; }
.careers-index .paper :focus-visible { outline-color: var(--brand); }
.careers-index section[id] { scroll-margin-top: 72px; }
html:has(.careers-index) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.careers-index) { scroll-behavior: auto; } }
@media (min-width: 760px) { .has-photo .stage.short { min-height: 560px; } .stage.short .hero > div { max-width: clamp(280px, 22vw + 110px, 340px); }
  /* The headline gets a little more room than the text so it sits on two lines, "Not sure where / to start?", not three. */
  .stage.short .hero .h1 { font-size: clamp(38px, 4.2vw, 52px); width: 7.3em; text-wrap: wrap; }
  /* Wide screens: hold the text near the left edge instead of centring it, so it never drifts onto the photo. */
  .has-photo .stage.short .col { padding-bottom: var(--space-48); max-width: none; margin: 0; padding-left: clamp(var(--space-24), 6vw, 112px); } }
.landing-browse { margin-top: var(--space-24); font-weight: 600; }

@media print {
  .no-print, header.top, footer.legal { display: none !important; }
  body { font-size: 12pt; background: #fff; color: #000; }
  .col { padding: 0; max-width: none; }
  .pathway { break-inside: avoid-page; border-color: #999; }
  .match details { display: none; }
  .bars .fill { transition: none; }
  a { color: #000; }
  .sources a::after, a.src::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}