/* ═══════════════════════════════════════════════════════════════
   Sidetake — Compass, the invite-only layer behind "Admin login".

   Tokens, type, buttons and the nav come from site.css; the gate's
   form fields from sheet.css. This file adds the layer's own surfaces,
   built from Hemang's references: squircle TILES with a hairline rim
   and a colour bloom pooling at one edge, one accent (sage) with
   emerald as the solid fill, big numerals, chips and segmented pills.
   The run is a conversation; the result is a bento with the detail
   behind sheets.
   ═══════════════════════════════════════════════════════════════ */

.compass-body {
  min-height: 100vh;
}
.compass-body [hidden] {
  display: none !important;
}
.capp {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--frame) + 88px) var(--gut) clamp(3rem, 7vw, 6rem);
}
.cfoot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin: 0 var(--frame) var(--frame);
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
  background: var(--ink-3);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cfoot a:hover {
  color: var(--sage);
}
html.is-locked,
html.is-locked body {
  overflow: hidden;
}

/* ══════════ nav additions ══════════ */

.cnav__pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(69, 214, 159, 0.45);
  border-radius: 999px;
  background: rgba(10, 16, 14, 0.7);
  backdrop-filter: blur(10px);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.cnav__pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  animation: cping 2.2s var(--ease-out) infinite;
}
@keyframes cping {
  0% {
    box-shadow: 0 0 0 0 rgba(69, 214, 159, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(69, 214, 159, 0);
  }
}
.cnav__who {
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
}
.cnav__who b {
  color: var(--text);
}

/* ══════════ the tile — the one surface everything is made of ══════════ */

.tile {
  --glow: 0.35;
  --bx: 100%;
  --by: 100%;
  position: relative;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.09)) border-box;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}
.tile::before {
  /* the bloom: bright at the anchored edge, gone by the far edge */
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(90% 70% at var(--bx) var(--by), rgba(69, 214, 159, calc(var(--glow) * 0.55)), rgba(69, 214, 159, calc(var(--glow) * 0.14)) 40%, transparent 72%);
  pointer-events: none;
}
.tile--lit::after {
  /* the lit edge along the bloom's side */
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
  opacity: calc(var(--glow) * 1.4);
  pointer-events: none;
}
.tile--top {
  --bx: 50%;
  --by: 0%;
}
.tile--top.tile--lit::after {
  top: 0;
  bottom: auto;
}
.tile--left {
  --bx: 0%;
  --by: 50%;
}
.tile--quiet {
  --glow: 0.12;
}
.tile--em {
  background:
    linear-gradient(var(--em), var(--em)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08)) border-box;
}
.tile--em::before {
  background: radial-gradient(90% 70% at var(--bx) var(--by), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 45%, transparent 72%);
}
.tile--sage {
  background:
    linear-gradient(var(--sage), var(--sage)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)) border-box;
  color: var(--ink);
}
.tile--sage::before {
  background: radial-gradient(90% 70% at var(--bx) var(--by), rgba(255, 255, 255, 0.45), transparent 70%);
}
.tile--sage .label,
.tile--sage .chip {
  color: var(--ink);
  border-color: rgba(10, 16, 14, 0.3);
}
.tile--dash {
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    repeating-linear-gradient(135deg, rgba(69, 214, 159, 0.5) 0 6px, transparent 6px 12px) border-box;
}
.tile--tap {
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease), --glow var(--dur) var(--ease);
}
.tile--tap:hover {
  transform: translateY(-3px);
  --glow: 0.6;
}
.tile--tap:active {
  transform: translateY(-1px);
}
.tile__pad {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.tile__head .label {
  font-size: 0.68rem;
}

/* ══════════ shared bits ══════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.chip small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-3);
}
.chip svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip.is-lit {
  border-color: rgba(69, 214, 159, 0.55);
  background: rgba(69, 214, 159, 0.12);
  color: var(--sage);
}
.chip.is-lit small {
  color: rgba(69, 214, 159, 0.7);
}
.chip--solid {
  border-color: var(--sage);
  background: var(--sage);
  color: var(--ink);
}
.chip--quiet {
  border-color: var(--line);
  color: var(--text-3);
}
.chip--wrap {
  white-space: normal;
  text-align: left;
}
.tile--em .chip {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(6, 9, 10, 0.25);
  color: var(--text);
}
.tile--em .chip small {
  color: rgba(244, 250, 247, 0.6);
}

.ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  color: var(--sage);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--round {
  border-radius: 50%;
}
.ico--sm {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.ico--sm svg {
  width: 14px;
  height: 14px;
}
.ico--lg {
  width: 50px;
  height: 50px;
  border-radius: 14px;
}
.ico--lg svg {
  width: 23px;
  height: 23px;
}
.ico--lit {
  border-color: rgba(69, 214, 159, 0.6);
  background: rgba(69, 214, 159, 0.14);
  box-shadow: 0 0 24px -6px rgba(69, 214, 159, 0.7);
}
.tile--em .ico {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--text);
}

.btn svg,
.quietlink svg,
.seg svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn--sm svg {
  width: 12px;
  height: 12px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled::after {
  display: none;
}
.btn--pill {
  border-radius: 999px;
  padding: 0.95rem 1.4rem;
  font-size: 0.82rem;
}
.quietlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.quietlink:hover {
  color: var(--sage);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
}
.eyebrow .label {
  flex: none;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.eyebrow--quiet .label {
  color: var(--text-3);
}
.eyebrow--first {
  margin-top: 1.2rem;
}

.num-big {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

/* segmented pill */
.seg {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}
.seg button {
  padding: 0.55rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.seg button[aria-selected='true'] {
  background: var(--sage);
  color: var(--ink);
}

/* ══════════ locked / gate ══════════ */

.locked {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: var(--frame);
  border-radius: 22px;
  text-align: center;
}
.locked .mega {
  font-size: clamp(2.6rem, 1rem + 6vw, 7rem);
}
.locked p {
  max-width: 44ch;
  margin-top: 1rem;
  color: rgba(244, 250, 247, 0.86);
}
.gate__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.6rem;
  border-radius: 16px;
  background: var(--em);
}
.gate__mark .brand__mark {
  width: 2.3em;
  height: 2.3em;
}
.gate .sheet__panel {
  text-align: center;
}
.gate .form {
  text-align: left;
}
.gate__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.confirm__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* ══════════ 1 · the entry ══════════ */

.centry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--frame);
}
.centry__hero {
  --glow: 0.5;
  --bx: 70%;
  --by: 0%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  grid-template-areas:
    'copy vis'
    'foot vis';
  align-items: center;
  column-gap: clamp(1.4rem, 3vw, 3rem);
  row-gap: clamp(1.2rem, 2.4vw, 2rem);
  padding: clamp(1.6rem, 3.4vw, 3rem);
}
.centry__copy {
  grid-area: copy;
  align-self: end;
}
.centry__vis {
  grid-area: vis;
  min-width: 0;
}
.centry__foot {
  grid-area: foot;
  align-self: start;
}
.centry__hero .mega {
  margin-top: 1rem;
  font-size: clamp(2.3rem, 0.9rem + 3.4vw, 4.4rem);
}
.centry__lede {
  max-width: 46ch;
  margin-top: 1rem;
  color: rgba(244, 250, 247, 0.88);
}
.centry__foot {
  display: grid;
  gap: 1rem;
}
.centry__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.centry__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.centry__name {
  flex: 1 1 14rem;
  max-width: 22rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(6, 9, 10, 0.35);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.centry__name::placeholder {
  color: rgba(244, 250, 247, 0.5);
}
.centry__name:focus {
  outline: none;
  border-color: var(--sage);
  background: rgba(6, 9, 10, 0.55);
}
.centry__aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: var(--frame);
}
.panel__body {
  padding: var(--pad);
}
.panel__body p {
  color: var(--text-2);
  font-size: 0.95rem;
}
.bullets {
  display: grid;
  gap: 0.55rem;
}
.bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
}
.bullets li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--sage);
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--frame);
}
.facts > div {
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink);
}
.facts b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sage);
}
.facts span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-2);
}

.saved {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.saved h2 {
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.saved p {
  margin-top: 0.5rem;
  color: var(--text-2);
}
.saved__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-end;
  gap: 0.5rem;
}

/* ══════════ 2 · the run — a conversation ══════════ */

.journey {
  position: sticky;
  top: calc(var(--frame) + 58px);
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  max-width: 820px;
  margin: 0 auto 1.4rem;
  padding: 0.6rem 0.8rem 0.6rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 16, 14, 0.86);
  backdrop-filter: blur(14px);
}
.journey__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--em);
}
.journey__mark .brand__mark {
  width: 1.4em;
  height: 1.4em;
}
.journey__rail {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.journey__stop {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--dim);
  transition: background 0.4s var(--ease);
}
.journey__stop.is-done {
  background: var(--sage);
}
.journey__stop.is-now {
  background: linear-gradient(90deg, var(--sage) var(--p, 0%), rgba(69, 214, 159, 0.28) var(--p, 0%));
}
.journey__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.journey__meta b {
  color: var(--sage);
}

.thread {
  display: grid;
  gap: 1.1rem;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 30vh;
}
.msg {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: end;
  scroll-margin-top: calc(var(--frame) + 140px);
  animation: msg-in 0.42s var(--ease-out) both;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.msg__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--line);
}
.msg__avatar .brand__mark {
  width: 1.5em;
  height: 1.5em;
}
.bubble {
  position: relative;
  max-width: 100%;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: 18px 18px 18px 6px;
  background: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}
.bubble--q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.bubble--q .bubble__help {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-2);
}
.bubble--ack {
  font-size: 0.95rem;
  color: var(--text-2);
}
.bubble--ack b {
  color: var(--text);
}
.msg--you {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  padding-left: clamp(2rem, 16%, 8rem);
}
.msg--you .bubble {
  border-color: rgba(69, 214, 159, 0.5);
  border-radius: 18px 18px 6px 18px;
  background: rgba(69, 214, 159, 0.13);
  color: var(--text);
  font-weight: 600;
}
.msg--you .bubble small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
}
.msg--you .bubble .chipset {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}
.msg--you .bubble.is-skip {
  border-style: dashed;
  background: transparent;
  color: var(--text-3);
  font-weight: 500;
}
.typing {
  display: inline-flex;
  gap: 5px;
  padding: 0.3rem 0.2rem;
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.35;
  animation: typing 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* the question card sits under its bubble, full width */
.qcard {
  grid-column: 2;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border-radius: 22px;
}
.qcard--bare {
  border: 0;
  padding: 0;
  background: none;
}
.qcard--bare::before {
  display: none;
}
.qcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.qcard__note {
  font-size: 0.8rem;
  color: var(--text-3);
}
.qcard.is-done .opt:not([aria-pressed='true']) {
  opacity: 0.45;
}
.qcard.is-done .opt:not([aria-pressed='true']):hover {
  opacity: 1;
}

/* options — one tile per answer */
.opt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt + .opt {
  margin-top: 0.5rem;
}
.opt:hover {
  border-color: rgba(69, 214, 159, 0.55);
  background: rgba(69, 214, 159, 0.06);
  transform: translateY(-1px);
}
.opt[aria-pressed='true'] {
  border-color: rgba(157, 240, 207, 0.75);
  background: var(--g-em);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(69, 214, 159, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.opt[aria-pressed='true'] .opt__sub {
  color: rgba(255, 255, 255, 0.78);
}
.opt[aria-pressed='true'] .orb {
  background: var(--g-sage);
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(69, 214, 159, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.opt__txt {
  min-width: 0;
}
.opt__label,
.opt__sub {
  display: block;
}
.opt__label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.opt__sub {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--text-2);
}
.opt__check {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-2);
  border-radius: 8px;
  color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opt__check svg {
  position: absolute;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.opt[aria-pressed='true'] .opt__check {
  background: var(--sage);
  border-color: var(--sage);
}
.opt[aria-pressed='true'] .opt__check svg {
  opacity: 1;
}
.opt[aria-pressed='true'] .opt__check .opt__key {
  opacity: 0;
}
.opt__key {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-3);
  transition: opacity var(--dur) var(--ease);
}

/* the fork — two tall tiles with a seam */
.fork {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.fork::after {
  content: 'or';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--ink);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  pointer-events: none;
}
.fork .opt {
  margin: 0;
}
.fork .opt__label {
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

/* stamps — the multi-select */
.stamps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.stamps .opt {
  margin: 0;
}

/* worlds */
.worlds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}
.worlds .opt {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1rem 0.4rem 0.85rem;
}
.worlds .opt__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}
.worlds .orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.worlds .orb svg {
  width: 23px;
  height: 23px;
}
.worlds .opt__check {
  display: none;
}
.world-general {
  display: block;
  margin: 0.9rem auto 0;
  padding: 0.5rem 0.8rem;
  border: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.world-general:hover,
.world-general[aria-pressed='true'] {
  color: var(--text);
}

/* the dial — where your head is at */
.dial {
  display: grid;
  gap: 0.9rem;
}
.dial__arc {
  display: block;
  width: min(100%, 420px);
  margin: 0 auto;
  overflow: visible;
}
.dial__arc .tick {
  fill: var(--ink);
  stroke: var(--line-2);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.dial__arc .tick:hover,
.dial__arc .tick.is-on {
  fill: var(--sage);
  stroke: var(--sage);
}
.dial__arc .needle {
  stroke: var(--sage);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 200px 200px;
  transition: transform 0.6s var(--ease-out);
}
.dial__arc .hub {
  fill: var(--ink);
  stroke: var(--sage);
  stroke-width: 3;
}
.dial__arc .lbl {
  fill: rgba(244, 250, 247, 0.5);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dial__opts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
}
.dial__opts .opt {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 0.4rem;
  text-align: center;
}
.dial__opts .opt__n {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sage);
}
.dial__opts .opt__label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
}
.dial__opts .opt__check {
  display: none;
}

/* writing */
.write {
  width: 100%;
  min-height: 8.5rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  resize: vertical;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.write::placeholder {
  color: rgba(238, 245, 242, 0.28);
}
.write:focus {
  outline: none;
  border-color: rgba(69, 214, 159, 0.6);
  background: rgba(69, 214, 159, 0.05);
}
.write--long {
  min-height: 11rem;
}
.brief {
  display: grid;
  gap: 0;
  margin-bottom: 0.9rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--g-em);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.brief__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.brief__row + .brief__row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.brief__row .label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.56rem;
  color: rgba(255, 255, 255, 0.7);
}
.brief__row b {
  font-weight: 700;
}
.brief .orb {
  border-color: rgba(255, 255, 255, 0.5);
}
.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.three__card {
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem 0.9rem 1rem;
  border: 1px solid rgba(69, 214, 159, 0.32);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(69, 214, 159, 0.13), rgba(69, 214, 159, 0.03));
}
.three__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.three__plain {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-2);
}

/* about you — compact rows */
.bgq + .bgq {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.bgq__ask {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}
.bgq__ask .ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.bgq__ask .ico svg {
  width: 13px;
  height: 13px;
}
.bgq__opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 0.4rem;
}
.bgq__opts .opt {
  width: auto;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.bgq__opts .opt__label {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
}
.bgq__opts .opt__check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.bgq__opts .opt__check svg {
  width: 9px;
  height: 9px;
}

/* milestones — the journey map */
.milestone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: var(--frame);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  --glow: 0.55;
  --bx: 10%;
  --by: 0%;
}
.milestone__big {
  font-size: clamp(3.6rem, 2rem + 7vw, 6.4rem);
}
.milestone__big sup {
  margin-left: 0.04em;
  font-size: 0.3em;
  vertical-align: top;
  color: var(--sage);
}
.milestone__of {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.milestone__title {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.milestone__line {
  max-width: 40ch;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--text-2);
}
.milestone__next {
  margin-top: 0.9rem;
}
.map {
  display: grid;
  align-content: center;
  gap: 0.8rem;
}
.map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.map .path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 2;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}
.map .path-done {
  fill: none;
  stroke: var(--sage);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.map .stop {
  fill: var(--ink);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}
.map .stop.is-done {
  fill: var(--sage);
  stroke: var(--sage);
}
.map .stop.is-now {
  fill: var(--ink);
  stroke: var(--sage);
  stroke-width: 3;
}
.map .stop-lbl {
  fill: rgba(244, 250, 247, 0.5);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.map .stop-lbl.is-now {
  fill: var(--text);
}
.stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.8rem;
  font-size: 0.82rem;
  color: var(--text-2);
}
.stat b {
  font-family: var(--font-display);
  color: var(--text);
}
.stat__track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--dim);
  overflow: hidden;
}
.stat__fill {
  width: var(--w, 0%);
  height: 100%;
  border-radius: 3px;
  background: var(--sage);
  transition: width 0.9s var(--ease-out);
}

.finish {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  text-align: center;
  --glow: 0.7;
  --bx: 50%;
  --by: 100%;
}
.finish h3 {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* ══════════ 3 · the result — a bento ══════════ */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--frame);
  max-width: 1180px;
  margin: 0 auto;
}
.bento > .label-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(0.8rem, 2vw, 1.4rem) 0 0;
}
.bento > .label-row::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-left: 0.9rem;
  background: var(--line);
}
.bento > .label-row .label {
  flex: none;
}
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

.hero-tile {
  --glow: 0.5;
  --bx: 85%;
  --by: 0%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.hero-tile h1 {
  margin-top: 0.8rem;
  font-size: clamp(1.8rem, 1rem + 2.5vw, 3.3rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-tile p {
  max-width: 56ch;
  margin-top: 0.9rem;
  color: var(--text-2);
}
.hero-tile .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.hero__four {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.pill-f {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(10, 16, 14, 0.28);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pill-f:hover {
  background: rgba(10, 16, 14, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}
.pill-f .orb {
  border-color: rgba(255, 255, 255, 0.5);
}
.pill-f--wild {
  border-style: dashed;
}
.facts--row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.facts--row > div {
  padding: 0.65rem 0.75rem 0.75rem;
}
.facts--row b {
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem);
}
.facts--row span {
  margin-top: 0.2rem;
  font-size: 0.7rem;
}

.shape-tile {
  --glow: 0.3;
  --bx: 50%;
  --by: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
.radar {
  display: block;
  width: min(100%, 320px);
  margin: 0.4rem auto;
  overflow: visible;
}
.radar .ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}
.radar .spoke {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}
.radar .area {
  fill: rgba(69, 214, 159, 0.22);
  stroke: var(--sage);
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar .dot {
  fill: var(--sage);
  stroke: var(--ink-2);
  stroke-width: 2;
}
.radar .lbl {
  fill: rgba(244, 250, 247, 0.6);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.radar .lbl.is-top {
  fill: var(--text);
}
.shape-tile .foot {
  font-size: 0.8rem;
  color: var(--text-3);
}

.ftile {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 300px;
  padding: clamp(1.1rem, 2.4vw, 1.4rem);
  --bx: 100%;
  --by: 0%;
  --glow: 0.55;
  text-align: left;
  font: inherit;
  color: inherit;
}
.ftile__top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 76px;
}
.ftile__top .sticker--tag {
  position: absolute;
  right: 0;
  top: 34px;
}
.ftile:hover .orb--lg {
  transform: translateY(-6px) rotate(-6deg);
}
.ftile__blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mini {
  display: grid;
  gap: 0.4rem;
  margin-top: auto;
}
.mini__row {
  display: grid;
  grid-template-columns: 14px minmax(64px, auto) 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mini__row svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mini__track {
  height: 5px;
  border-radius: 3px;
  background: var(--dim);
  overflow: hidden;
}
.mini__fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: 3px;
  background: var(--g-sage);
  transition: width 0.9s var(--ease-out);
}
.ftile__rank {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.ftile__name {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ftile__meta {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-3);
}
.ftile__ev {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.ticks {
  display: flex;
  gap: 3px;
}
.ticks i {
  width: 14px;
  height: 5px;
  border-radius: 2px;
  background: var(--dim);
}
.ticks i.is-on {
  background: var(--sage);
  box-shadow: 0 0 10px rgba(69, 214, 159, 0.6);
}
.ftile__blurb {
  font-size: 0.92rem;
  color: var(--text-2);
}
.ftile__why {
  margin-top: 0;
  padding-left: 0.8rem;
  border-left: 2px solid rgba(69, 214, 159, 0.6);
  font-size: 0.86rem;
  color: var(--text-2);
}
.ftile__why b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}
.ftile__open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-2);
}
.ftile__open svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--sage);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pull-tile {
  --glow: 0.5;
  --bx: 0%;
  --by: 50%;
  display: grid;
  align-items: center;
  grid-template-columns: 4px 1fr;
  gap: 1rem;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
}
.pull-tile i {
  border-radius: 2px;
  background: var(--sage);
}
.pull-tile p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.pull-tile small {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-3);
}

.head-tile {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  --glow: 0.25;
}
.head-tile h3 {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  letter-spacing: -0.02em;
}
.head-tile p {
  font-size: 0.86rem;
  color: var(--text-2);
}
.head-tile .scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
}
.head-tile .scale .opt {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem 0.25rem;
  border-radius: 12px;
  text-align: center;
}
.head-tile .scale .opt__n {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sage);
}
.head-tile .scale .opt__label {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
}
.head-tile .scale .opt__check {
  display: none;
}

.ctile {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 230px;
  padding: clamp(1.1rem, 2.4vw, 1.4rem);
  --bx: 0%;
  --by: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.ctile__name {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ctile__desc {
  font-size: 0.9rem;
  color: var(--text-2);
}
.ctile__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ctile__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.segbar {
  display: flex;
  gap: 3px;
  height: 8px;
}
.segbar i {
  display: block;
  flex: 0 0 var(--w);
  height: 100%;
  border-radius: 3px;
  background: var(--sage);
}
.segbar i:nth-child(2) {
  background: rgba(69, 214, 159, 0.5);
}
.segbar i:nth-child(3) {
  background: rgba(69, 214, 159, 0.22);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.35rem;
  border-radius: 2px;
  background: var(--sage);
  vertical-align: 1px;
}
.legend span:nth-child(2) i {
  background: rgba(69, 214, 159, 0.5);
}
.legend span:nth-child(3) i {
  background: rgba(69, 214, 159, 0.22);
}
.ctile .tile__head {
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}
.ctile .ftile__open {
  margin-top: 0.2rem;
}

.axes-tile {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  --glow: 0.2;
}
.axes {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.8rem;
}
.axis__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
}
.axis__head b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
}
.axis__head span {
  font-size: 0.8rem;
  color: var(--text-3);
}
.axis__head em {
  margin-left: auto;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.axis__rail {
  position: relative;
  height: 156px;
  margin: 0.1rem 0 0.2rem;
}
.axis__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dotted rgba(255, 255, 255, 0.22);
}
.axis__dot {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px var(--ink-2);
  transform: translateY(var(--dy, 0px));
}
.axis__dot--wild {
  background: transparent;
  border: 2px dashed var(--sage);
}
.axis__dot--you {
  z-index: 2;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  background: #f4faf7;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--sage);
}
.axis__lbl {
  position: absolute;
  left: clamp(52px, var(--x), calc(100% - 52px));
  width: 104px;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.axis__lbl--l0 { bottom: calc(50% + 14px); }
.axis__lbl--l1 { top: calc(50% + 14px); }
.axis__lbl--l2 { bottom: calc(50% + 48px); }
.axis__lbl--l3 { top: calc(50% + 48px); }
.axis__lbl--you {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.axes-tile .foot {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-3);
}

.read-tile {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  --glow: 0.22;
  --bx: 100%;
  --by: 0%;
}
.bars {
  display: grid;
  gap: 0.75rem;
}
.bar {
  display: grid;
  grid-template-columns: minmax(96px, 32%) 1fr;
  align-items: center;
  gap: 0.2rem 0.9rem;
}
.bar__name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.bar__track {
  height: 7px;
  border-radius: 4px;
  background: var(--dim);
  overflow: hidden;
}
.bar__fill {
  width: var(--w, 0%);
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sage-deep), var(--sage));
  transition: width 1s var(--ease-out);
}
.bar__plain {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--text-3);
}
.bars--quiet .bar__name {
  font-weight: 700;
  color: var(--text-2);
}
.bars--quiet .bar__fill {
  background: rgba(244, 250, 247, 0.26);
}
.ticks-list {
  display: grid;
  gap: 0.5rem;
}
.ticks-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
}
.ticks-list i {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  border: 1px solid rgba(69, 214, 159, 0.55);
  border-radius: 6px;
  background: rgba(69, 214, 159, 0.18);
  color: var(--sage);
}
.ticks-list i svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quotes {
  display: grid;
  gap: 0.8rem;
}
.quotes li {
  padding-left: 0.8rem;
  border-left: 2px solid rgba(69, 214, 159, 0.5);
}
.quotes .label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.58rem;
  color: var(--text-3);
}
.quotes q {
  font-size: 0.92rem;
  quotes: '\201C' '\201D';
}

.share-tile {
  --bx: 85%;
  --by: 0%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: var(--frame);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.share-tile h3 {
  margin-top: 0.6rem;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.share-tile p {
  max-width: 46ch;
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: rgba(10, 16, 14, 0.78);
}
.share__box {
  display: grid;
  gap: 0.7rem;
  align-self: start;
}
.share__link {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(10, 16, 14, 0.25);
  border-radius: 14px;
  background: rgba(10, 16, 14, 0.9);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-all;
  max-height: 5.6em;
  overflow: hidden;
}
.share__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.share-tile .btn {
  --bg: var(--ink);
  --fg: var(--text);
  border-radius: 999px;
}
.share-tile .btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: rgba(10, 16, 14, 0.4);
}
.share-tile .btn--ghost:hover {
  --bg: rgba(10, 16, 14, 0.08);
}
.res-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.cres__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  max-width: 1180px;
  margin: 0 auto var(--frame);
  padding: 0.7rem 1rem;
}
.cres__banner p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-2);
}
.cres__banner p b {
  color: var(--text);
}
.cres__banner svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════ 4 · the detail sheet ══════════ */

.sheet__panel--lg {
  width: min(100%, 46rem);
  padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.1rem, 2.4vw, 2rem) clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 24px;
}
.detail__grab {
  display: none;
}
.detail__body {
  display: grid;
  gap: 1.1rem;
}
.dhead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding-right: 2.4rem;
}
.dhead h2 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.dhead .ftile__meta {
  margin-top: 0.4rem;
}
.dhead .ftile__ev {
  margin-top: 0.5rem;
}
.dsec {
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}
.dsec .label {
  font-size: 0.6rem;
}
.dsec p {
  font-size: 0.92rem;
  color: var(--text-2);
}
.dsec p b {
  color: var(--text);
}
.dsec .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.dsec--em {
  border-color: transparent;
  background: var(--em);
}
.dsec--em p,
.dsec--em .label {
  color: var(--text);
}
.rail {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0.7rem;
}
.rail::before {
  content: '';
  border-radius: 2px;
  background: var(--sage);
}
.rail__body {
  display: grid;
  gap: 0.45rem;
}
.rail p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
}
.rail svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--sage);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skills {
  display: grid;
}
.skill {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.skill__desc {
  display: none;
}
.skills.show-desc .skill__desc {
  display: block;
}
.lvl {
  display: inline-flex;
  gap: 3px;
  margin-left: 0.2rem;
}
.lvl i {
  width: 12px;
  height: 5px;
  border-radius: 2px;
  background: var(--dim);
}
.lvl i.is-on {
  background: var(--sage);
}
.skills__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.skills__legend .lvl {
  margin: 0 0.35rem 0 0;
  vertical-align: middle;
}
.skill:first-child {
  border-top: 0;
  padding-top: 0.2rem;
}
.skill__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.8rem;
}
.skill__name {
  font-weight: 700;
}
.skill__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.skill__desc {
  font-size: 0.82rem;
  color: var(--text-2);
}
.tagx {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.tagx--req {
  border-color: rgba(69, 214, 159, 0.5);
  color: var(--sage);
}
.tagx--all {
  border-color: var(--sage);
  background: var(--sage);
  color: var(--ink);
}
.tagx--majority {
  border-color: rgba(69, 214, 159, 0.55);
  background: rgba(69, 214, 159, 0.12);
  color: var(--sage);
}
.tagx--plain {
  border-color: transparent;
  padding-inline: 0.15rem;
}
.softs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.res {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem;
}
.res a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.res a:hover {
  border-color: rgba(69, 214, 159, 0.6);
  background: rgba(69, 214, 159, 0.06);
  transform: translateX(2px);
}
.res__kind {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.res__txt b {
  display: block;
  font-size: 0.92rem;
}
.res__txt small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: var(--text-2);
}
.res__txt em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--text-3);
}
.res a > svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.res__group + .res__group {
  margin-top: 0.6rem;
}
.res__group > .label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.58rem;
  color: var(--text-3);
}
.dfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.4rem;
}
.dfoot .quietlink {
  font-size: 0.8rem;
}
.prov {
  display: grid;
  gap: 0.7rem;
}
.prov li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-2);
}
.prov li .ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.prov li .ico svg {
  width: 12px;
  height: 12px;
}

/* ══════════ 5 · admin ══════════ */

.admin__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem var(--pad);
  border-top: 1px solid var(--line);
}
.admin__row b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
}
.admin__row span {
  font-size: 0.82rem;
  color: var(--text-3);
  word-break: break-word;
}
.admin__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin__codes li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem var(--pad);
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.admin__codes li span {
  color: var(--text-3);
}
.cres__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
  gap: var(--frame);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
}
.cres__title {
  font-size: clamp(2rem, 1rem + 3.4vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.cres__sub {
  max-width: 56ch;
  margin-top: 1rem;
  color: var(--text-2);
}
.cres {
  max-width: 1180px;
  margin: 0 auto;
}

/* ══════════ toast ══════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  z-index: 140;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.toast.is-on {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ══════════ reveal ══════════ */

.js .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 650ms var(--ease-out), translate 650ms var(--ease-out);
}
.js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* ══════════ responsive ══════════ */

@media (max-width: 1100px) {
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 6; }
  .span-3 { grid-column: span 6; }
  .bento > .ctile:last-of-type { grid-column: span 12; }
  .cres__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 900px) {
  .capp {
    padding-top: calc(var(--frame) + 74px);
  }
  .cnav__pill {
    display: none;
  }
  .centry,
  .milestone,
  .share-tile {
    grid-template-columns: 1fr;
  }
  .centry__hero {
    min-height: 0;
  }
  .saved {
    grid-template-columns: 1fr;
  }
  .journey {
    top: calc(var(--frame) + 50px);
    gap: 0.6rem;
    padding: 0.45rem 0.7rem 0.45rem 0.45rem;
  }
  .journey__mark {
    width: 28px;
    height: 28px;
  }
  .journey__meta {
    font-size: 0.56rem;
  }
  .msg {
    scroll-margin-top: calc(var(--frame) + 116px);
  }
  .axis__lbl {
    left: clamp(40px, var(--x), calc(100% - 40px));
    width: 80px;
    font-size: 0.6rem;
    line-height: 1.1;
  }
  .axis__rail {
    height: 164px;
  }
  .axis__lbl--l0 { bottom: calc(50% + 14px); }
  .axis__lbl--l1 { top: calc(50% + 14px); }
  .axis__lbl--l2 { bottom: calc(50% + 50px); }
  .axis__lbl--l3 { top: calc(50% + 50px); }
  .bar {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  /* sheets become bottom sheets */
  .detail {
    place-items: end center;
    padding: 0;
  }
  .detail .sheet__panel--lg {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding-top: 1.2rem;
    translate: 0 30px;
  }
  .detail.is-open .sheet__panel--lg {
    translate: 0 0;
  }
  .detail__grab {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 0.9rem;
    border-radius: 2px;
    background: var(--line-2);
  }
}

@media (max-width: 700px) {
  .span-8, .span-7, .span-6, .span-5, .span-4, .span-3 { grid-column: span 12; }
  .ftile,
  .ctile {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .msg {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.6rem;
  }
  .msg__avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .msg--you {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 1.5rem;
  }
  .bubble {
    padding: 0.8rem 0.95rem;
    font-size: 0.95rem;
  }
  .fork {
    grid-template-columns: 1fr;
  }
  .fork::after {
    display: none;
  }
  .opt--folder .opt__stage {
    border: 1px solid var(--line-2);
    border-right: 0;
    border-radius: 18px 0 0 18px;
  }
  .opt--folder[aria-pressed='true'] .opt__stage {
    border-color: rgba(157, 240, 207, 0.75);
  }
  .stamps {
    grid-template-columns: 1fr;
  }
  .worlds {
    grid-template-columns: repeat(2, 1fr);
  }
  .dial__opts {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
  }
  .dial__opts .opt {
    padding: 0.6rem 0.2rem;
  }
  .dial__opts .opt__label {
    font-size: 0.6rem;
  }
  .head-tile .scale .opt__label {
    font-size: 0.56rem;
  }
  .cnav__who {
    display: none;
  }
  .facts {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .facts b {
    font-size: 1.4rem;
  }
  .dhead {
    grid-template-columns: 1fr;
  }
}

/* a phone turned sideways: the sticky strip must not eat the screen */
@media (max-height: 460px) {
  .journey {
    position: static;
    margin-bottom: 0.8rem;
  }
  .thread {
    padding-bottom: 10vh;
  }
  .detail .sheet__panel--lg {
    max-height: 96vh;
  }
}

@media (pointer: coarse) {
  .opt {
    padding-block: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msg {
    animation: none;
  }
}

/* ══════════ 6 · the visual pass — glass orbs, structured prompts, legends ══════════ */

:root {
  --mint: #9df0cf;
  --em-2: #128a5e;
  --g-em: linear-gradient(145deg, #138b5f 0%, #0d6446 55%, #0a4a34 100%);
  --g-sage: linear-gradient(135deg, #8df0c8, #45d69f 60%, #2fb985);
  --g-orb: radial-gradient(120% 120% at 28% 22%, rgba(157, 240, 207, 0.62), rgba(69, 214, 159, 0.22) 46%, rgba(13, 100, 70, 0.2) 100%);
  --orb-bg: radial-gradient(120% 120% at 30% 12%, rgba(157, 240, 207, 0.34), rgba(69, 214, 159, 0.09) 44%, transparent 70%), linear-gradient(165deg, #1b3d30, #0f231b);
}

/* the orb — a solid medallion holding one icon.
   Its icon is pinned to the exact centre by absolute positioning, so no rule
   written for the text beside it can move the icon. Never style a bare `span`
   or `svg` inside a component: give the text its own class. */
.orb {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(157, 240, 207, 0.34);
  border-radius: 14px;
  background: var(--orb-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px -16px rgba(0, 0, 0, 0.9);
  color: var(--text);
  line-height: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.orb::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 46%);
  pointer-events: none;
}
.orb > svg,
.orb > .brand__mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
}
.orb > .brand__mark {
  width: 56%;
  height: 56%;
}
.orb svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orb--sm {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.orb--sm svg {
  width: 15px;
  height: 15px;
}
.orb--xs {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.orb--xs svg {
  width: 13px;
  height: 13px;
}
.orb--lg {
  width: 62px;
  height: 62px;
  border-radius: 19px;
}
.orb--lg svg {
  width: 28px;
  height: 28px;
}
.orb--xl {
  width: 76px;
  height: 76px;
  border-radius: 23px;
}
.orb--xl svg {
  width: 34px;
  height: 34px;
}
.orb--round {
  border-radius: 50%;
}
.orb--hot {
  background: var(--g-sage);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  box-shadow: 0 14px 32px -14px rgba(69, 214, 159, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.orb--dash {
  background: #0f1a15;
  border: 1.5px dashed rgba(69, 214, 159, 0.6);
  box-shadow: none;
  color: var(--sage);
}
.tile--em .orb,
.tile--sage .orb {
  border-color: rgba(255, 255, 255, 0.55);
}
.tile--sage .orb {
  color: var(--ink);
}

/* a question in parts: the scene in plain weight, the ask in display weight, examples as pointers */
.bubble__lead {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-2);
}
.bubble__ask {
  display: block;
}
.pointers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.pointer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.7rem 0.36rem 0.55rem;
  border: 1px solid rgba(69, 214, 159, 0.4);
  border-radius: 999px;
  background: rgba(69, 214, 159, 0.09);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.pointer::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 8px rgba(69, 214, 159, 0.8);
}

/* picks list — an orb per option */
.picks .opt {
  padding: 0.75rem 0.9rem 0.75rem 0.75rem;
}
.stamps .opt {
  padding: 0.7rem 0.85rem 0.7rem 0.7rem;
}
.bgq__opts .opt {
  grid-template-columns: auto 1fr auto;
  padding-left: 0.5rem;
}
.bgq__opts .opt:not(:has(.orb)) {
  grid-template-columns: 1fr auto;
  padding-left: 0.8rem;
}
.bgq__opts .opt__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.bgq__opts .opt__check svg {
  width: 10px;
  height: 10px;
}

/* info rows inside sheets */
.info {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
}
.info + .info {
  margin-top: 0.5rem;
}
.lead {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}
.dsec--row {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.9rem;
}
.dsec--row > .label {
  grid-column: 1 / -1;
}

/* the shape tile's three facts */
.shape-tile .facts {
  margin-top: 0.4rem;
}

/* fewer words under the rails: a legend */
.axes-tile .legend {
  margin-top: 0.6rem;
}
.axes-tile .legend i {
  border-radius: 50%;
}
.axes-tile .legend .l-wild {
  background: transparent;
  border: 1.5px dashed var(--sage);
}
.axes-tile .legend .l-you {
  background: #f4faf7;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1.5px var(--sage);
}

@media (max-width: 560px) {
  .three {
    grid-template-columns: 1fr;
  }
  .three__card {
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 0.75rem 0.85rem;
  }
  .res {
    grid-template-columns: 1fr;
  }
  .facts--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .facts--row b {
    font-size: 1.2rem;
  }
}

/* ══════════ 7 · folders, stickers, decks, rails — the fuller pass ══════════ */

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
@keyframes pop {
  0% {
    scale: 1;
  }
  40% {
    scale: 1.045;
  }
  100% {
    scale: 1;
  }
}
@keyframes fly-in {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: 0.92;
  }
}

/* stickers: small things that sit on top of a card and drift */
.sticker {
  position: absolute;
  rotate: var(--r, 0deg);
  animation: float 5.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: translate 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3), rotate 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3), scale 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.sticker--tag {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* a folder: a stage above, a body with a tab below; stickers peek over the fold */
.opt--folder {
  grid-template-columns: 1fr;
  grid-template-rows: 118px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 252px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.opt--folder:hover {
  background: transparent;
  transform: translateY(-6px) rotate(-0.6deg);
}
.opt--folder .opt__stage {
  position: relative;
  display: block;
  border-radius: 18px 18px 0 0;
  background: radial-gradient(70% 85% at 50% 100%, rgba(69, 214, 159, 0.24), rgba(69, 214, 159, 0.05) 55%, transparent 75%);
  transition: background var(--dur) var(--ease);
}
.opt--folder .opt__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.8rem;
  padding: 1.35rem 1rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)), var(--ink-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt--folder .opt__body::before {
  content: '';
  position: absolute;
  left: 16px;
  top: -13px;
  width: 96px;
  height: 14px;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #121b17;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opt--folder .opt__body::after {
  content: '';
  position: absolute;
  left: 17px;
  right: 1px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08));
}
.opt--folder[aria-pressed='true'] {
  background: transparent;
  box-shadow: none;
  color: #fff;
}
.opt--folder[aria-pressed='true'] .opt__stage {
  background: radial-gradient(70% 85% at 50% 100%, rgba(157, 240, 207, 0.42), rgba(69, 214, 159, 0.1) 58%, transparent 80%);
}
.opt--folder[aria-pressed='true'] .opt__body {
  border-color: rgba(157, 240, 207, 0.75);
  background: var(--g-em);
  box-shadow: 0 18px 40px -18px rgba(69, 214, 159, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.opt--folder[aria-pressed='true'] .opt__body::before {
  background: #138b5f;
  border-color: rgba(157, 240, 207, 0.75);
}
.opt--folder[aria-pressed='true'] .sticker--tag {
  background: #fff;
}

/* focus one, soften the rest — the reference's depth of field */
@media (hover: hover) {
  .fork:hover .opt:not(:hover),
  .picks:hover .opt:not(:hover),
  .stamps:hover .opt:not(:hover),
  .worlds:hover .opt:not(:hover),
  .dial__opts:hover .opt:not(:hover) {
    filter: blur(1.4px) saturate(0.6);
    opacity: 0.6;
  }
  .bento:has(.ftile:hover) .ftile:not(:hover),
  .bento:has(.ctile:hover) .ctile:not(:hover) {
    filter: blur(1px);
    opacity: 0.72;
  }
}
.opt {
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.qcard.is-done .opt:not([aria-pressed='true']) {
  opacity: 0.42;
  filter: blur(1px) saturate(0.5);
}
.qcard.is-done .opt:not([aria-pressed='true']):hover {
  opacity: 1;
  filter: none;
}
.is-pop {
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.tile--tap {
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25), filter var(--dur) var(--ease), opacity var(--dur) var(--ease), --glow var(--dur) var(--ease);
}
.worlds .opt:hover .orb,
.picks .opt:hover .orb,
.stamps .opt:hover .orb {
  translate: 0 -3px;
  rotate: -6deg;
}
.orb {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), translate 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3), rotate 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3), transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}

/* the three picked for you: numbered folders */
.three__card {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  align-content: end;
}
.three__card::before {
  content: attr(data-n);
  position: absolute;
  right: 0.5rem;
  top: -0.6rem;
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(69, 214, 159, 0.1);
  pointer-events: none;
}
.three__card .orb {
  animation: float 6s ease-in-out infinite;
}
.three__card:nth-child(2) .orb {
  animation-delay: -2s;
}
.three__card:nth-child(3) .orb {
  animation-delay: -4s;
}

/* the deck: the four fanned like a hand of cards */
.deck {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1.2rem 0.4rem 0.6rem;
  perspective: 900px;
}
.deck__card {
  position: relative;
  width: 158px;
  min-height: 184px;
  margin-left: -30px;
  padding: 0.85rem 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(10, 16, 14, 0.8), rgba(10, 16, 14, 0.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transform-origin: 50% 100%;
  rotate: var(--r, 0deg);
  translate: 0 var(--y, 0px);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: rotate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25), translate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25), scale 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25), filter 0.4s var(--ease), border-color var(--dur) var(--ease);
}
.deck__card:first-child {
  margin-left: 0;
}
.deck__card:hover,
.deck__card:focus-visible {
  rotate: 0deg;
  translate: 0 -16px;
  scale: 1.07;
  z-index: 10;
  border-color: var(--mint);
}
@media (hover: hover) {
  .deck:hover .deck__card:not(:hover) {
    filter: blur(1px) brightness(0.8);
  }
}
.deck__card--wild {
  border-style: dashed;
}
.deck__card .orb {
  margin-bottom: 0.65rem;
}
.deck__rank {
  display: block;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.deck__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.deck__meta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.62);
}

/* the run on a wide screen: journey on the left, the picks so far on the right */
.srail {
  display: none;
}
.run-main {
  min-width: 0;
}
@media (min-width: 1180px) {
  .capp--run {
    display: grid;
    grid-template-columns: 236px minmax(0, 760px) 256px;
    gap: var(--frame);
    justify-content: center;
    align-items: start;
    max-width: 1340px;
  }
  .capp--run .journey {
    display: none;
  }
  .srail {
    display: grid;
    gap: 0.9rem;
    position: sticky;
    top: calc(var(--frame) + 74px);
  }
}
.srail .tile {
  padding: 1rem 1rem 1.1rem;
}
.srail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.srail__big {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sage);
}
.srail__big small {
  margin-left: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.srail__sub {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--text-3);
}
.rstops {
  position: relative;
  display: grid;
  margin-top: 0.9rem;
}
.rstops::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  border-left: 2px dotted rgba(255, 255, 255, 0.12);
}
.rstop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.38rem 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rstop .orb {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border-color: var(--line-2);
  background: var(--ink);
  box-shadow: none;
  color: var(--text-3);
}
.rstop .orb::after {
  display: none;
}
.rstop .orb svg {
  width: 14px;
  height: 14px;
}
.rstop.is-done {
  color: var(--text-2);
}
.rstop.is-done .orb {
  background: var(--orb-bg);
  border-color: rgba(157, 240, 207, 0.4);
  color: var(--text);
}
.rstop.is-now {
  color: var(--text);
}
.rstop.is-now .orb {
  background: var(--g-sage);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(69, 214, 159, 0.9);
}
.rstop.is-now::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 10px var(--sage);
  translate: 0 -50%;
}
.srail__guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
}
.srail__guide .orb {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--em);
  border-color: rgba(255, 255, 255, 0.25);
}
.srail__guide .orb .brand__mark {
  width: 1.4em;
  height: 1.4em;
}
.srail__gtitle {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.srail__gsub {
  display: block;
  font-size: 0.74rem;
  color: var(--text-3);
}
.sofar {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.sofar__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border: 1px solid rgba(69, 214, 159, 0.35);
  border-radius: 999px;
  background: rgba(69, 214, 159, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  rotate: var(--r, 0deg);
}
.sofar__item.is-new {
  animation: fly-in 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
}
.sofar__tag {
  display: block;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sofar__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sofar__more,
.sofar__empty {
  font-size: 0.76rem;
  color: var(--text-3);
}

@media (max-width: 900px) {
  .hero-tile {
    grid-template-columns: 1fr;
  }
  .deck {
    justify-content: flex-start;
    padding: 0.6rem 0 0.4rem;
  }
}
@media (max-width: 560px) {
  .deck {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0 0;
    perspective: none;
  }
  .deck__card {
    width: auto;
    min-height: 0;
    margin-left: 0;
    rotate: 0deg;
    translate: 0 0;
  }
  .deck__card:hover {
    translate: 0 -4px;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticker,
  .three__card .orb {
    animation: none;
  }
  .is-pop,
  .sofar__item.is-new {
    animation: none;
  }
}

/* phones: a folder lies on its side — stage left, words right */
@media (max-width: 560px) {
  .fork .opt--folder {
    grid-template-rows: none;
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 0;
  }
  .fork .opt--folder .opt__stage {
    height: 100%;
    min-height: 104px;
    border: 1px solid var(--line-2);
    border-right: 0;
    border-radius: 18px 0 0 18px;
    background: radial-gradient(90% 90% at 50% 60%, rgba(69, 214, 159, 0.22), transparent 75%);
  }
  .fork .opt--folder[aria-pressed='true'] .opt__stage {
    border-color: rgba(157, 240, 207, 0.75);
    background: radial-gradient(90% 90% at 50% 60%, rgba(157, 240, 207, 0.38), transparent 78%);
  }
  .fork .opt--folder .cluster .sticker--main {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
  .fork .opt--folder .cluster .sticker--main svg {
    width: 24px;
    height: 24px;
  }
  .fork .opt--folder .cluster .sticker--tag {
    display: none;
  }
  .fork .opt--folder .opt__body {
    min-height: 104px;
    padding: 0.9rem 0.9rem 0.9rem 0.7rem;
    border-radius: 0 18px 18px 0;
    border-left: 0;
  }
  .fork .opt--folder .opt__body::before,
  .fork .opt--folder .opt__body::after {
    display: none;
  }
}

/* tablets in landscape and small laptops: narrower rails, the thread flexes */
@media (min-width: 1024px) and (max-width: 1179px) {
  .capp--run {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 216px;
    gap: var(--frame);
    align-items: start;
  }
  .capp--run .journey {
    display: none;
  }
  .srail {
    display: grid;
    gap: 0.8rem;
    position: sticky;
    top: calc(var(--frame) + 74px);
  }
  .srail .tile {
    padding: 0.85rem 0.85rem 0.95rem;
  }
  .rstop {
    font-size: 0.68rem;
  }
}

/* ══════════ 8 · the entry stage — eight worlds, one live preview ══════════ */

.wstage {
  position: relative;
  display: grid;
  align-content: end;
  align-self: center;
  min-height: 372px;
  padding-top: 252px;
}
.wrow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.2rem;
}
.wrow__item {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.2rem 0.2rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease), translate 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3), scale 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.wrow__item .orb {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0.55);
}
.wrow__item .orb svg {
  width: 23px;
  height: 23px;
}
.wrow__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 2.3em;
  max-width: 72px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: rgba(244, 250, 247, 0.72);
}
.wrow__item.is-on .orb {
  scale: 1.1;
  background: var(--g-sage);
  border-color: #fff;
  color: var(--ink);
  box-shadow: 0 16px 34px -14px rgba(69, 214, 159, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.wrow__item.is-on .wrow__label {
  color: #fff;
}
.wrow__item.is-picked .orb {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (hover: hover) {
  .wrow.is-hover .wrow__item:not(.is-on) {
    filter: blur(1.6px) saturate(0.5);
    opacity: 0.55;
  }
  .wrow__item:hover .orb {
    translate: 0 -2px;
  }
}
.wpop {
  position: absolute;
  left: 0;
  bottom: calc(100% - 236px);
  width: 100%;
  translate: 0 0;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(10, 16, 14, 0.9), rgba(10, 16, 14, 0.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.wpop.is-in {
  animation: fly-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
}
.wpop__caret {
  position: absolute;
  left: var(--cx, 50%);
  bottom: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 16, 14, 0.92);
  rotate: 45deg;
  transition: left 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.wpop__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}
.wpop__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.wpop__sub {
  display: block;
  font-size: 0.78rem;
  color: var(--text-2);
}
.wpop__q {
  margin-top: 0.8rem;
  padding: 0.75rem 0.8rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.wpop__q .label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.56rem;
}
.wpop__q p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.wpop__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.wpop__opt {
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(69, 214, 159, 0.4);
  border-radius: 999px;
  background: rgba(69, 214, 159, 0.1);
  font-size: 0.74rem;
  font-weight: 600;
}
.wpop__or {
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.wstage__hint {
  margin-top: 0.7rem;
  text-align: left;
  font-size: 0.72rem;
  color: rgba(244, 250, 247, 0.62);
}
.wstage__hint b {
  color: #fff;
}

@media (max-width: 900px) {
  .centry__hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      'copy'
      'vis'
      'foot';
  }
  .wstage {
    min-height: 0;
    padding-top: 0;
    gap: 0.9rem;
  }
  .wpop {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    translate: 0 0;
    order: -1;
  }
  .wpop__caret {
    display: none;
  }
  .wrow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wpop.is-in {
    animation: none;
  }
}

/* ══════════ 9 · alignment pass ══════════ */

/* the right rail: one tile, the picks on a timeline */
.srail__tile {
  padding: 1rem 1rem 1.05rem;
}
.sofar {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 0.6rem;
}
.sofar::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 16px;
  bottom: 16px;
  border-left: 2px dotted rgba(255, 255, 255, 0.12);
}
.sofar__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  rotate: 0deg;
  font-size: 0.78rem;
  font-weight: 600;
}
.sofar__item .orb {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--orb-bg);
  box-shadow: none;
}
.sofar__item .orb svg {
  width: 13px;
  height: 13px;
}
.sofar__tag {
  display: block;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sofar__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.sofar__more {
  margin-top: 0.3rem;
  padding-left: calc(28px + 0.7rem);
}

/* the three picked for you: one row each, numbered in the corner */
.three__card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.95rem 2.6rem 0.95rem 0.9rem;
}
.three__card::before {
  display: none;
}
.three__card .orb {
  animation: none;
}
.three__n {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--sage);
}

/* the seven: icon tiles with short labels instead of long pills */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.opt--tile {
  position: relative;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  gap: 0.6rem;
  margin: 0;
  padding: 1.05rem 0.7rem 0.95rem;
  text-align: center;
}
.opt--tile .orb {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}
.opt--tile .orb svg {
  width: 22px;
  height: 22px;
}
.opt--tile .opt__label {
  font-size: 0.82rem;
  line-height: 1.2;
}
.opt--tile .opt__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.opt--tile .opt__check svg {
  width: 11px;
  height: 11px;
}
.bgq__opts.tiles .opt {
  border-radius: 18px;
  grid-template-columns: 1fr;
  padding-left: 0.7rem;
}
.bgq__ask {
  align-items: center;
}

/* sheet info rows: the tag sits on the value's line */
.info {
  align-items: center;
}
.info p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.info .info__tag {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.16rem 0.45rem;
  border-radius: 6px;
  background: rgba(69, 214, 159, 0.14);
  color: var(--sage);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* the deck on the entry page */
.centry__vis .deck {
  padding: 1.6rem 0 0.8rem;
}
.centry__vis .deck__card {
  width: 148px;
  margin-left: -32px;
}
.centry__vis .deck__card:first-child {
  margin-left: 0;
}

/* scrollbars in the same language as the page */
.compass-body,
.compass-body * {
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 214, 159, 0.35) transparent;
}
.compass-body ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.compass-body ::-webkit-scrollbar-track {
  background: transparent;
}
.compass-body ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(69, 214, 159, 0.35);
  background-clip: padding-box;
}
.compass-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(69, 214, 159, 0.6);
  background-clip: padding-box;
}

@media (max-width: 560px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .opt--tile {
    padding: 0.9rem 0.5rem 0.8rem;
  }
}

.centry__chips-wrap {
  display: grid;
  gap: 1rem;
}

@media (max-width: 560px) {
  .centry__vis .deck__card {
    width: auto;
    margin-left: 0;
  }
}

/* ══════════ 11 · the calm result — centred heads, rows of equal cards ══════════ */

.cres--calm {
  max-width: 1180px;
  margin: 0 auto;
}
.sec {
  margin-top: clamp(2.8rem, 6vw, 4.6rem);
}
.sec--first {
  margin-top: clamp(0.4rem, 1.5vw, 1.2rem);
}
.sec__head {
  max-width: 62ch;
  margin: 0 auto clamp(1.3rem, 2.6vw, 2rem);
  text-align: center;
}
.sec__head h1,
.sec__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: none;
}
.sec__head h1 {
  font-size: clamp(1.7rem, 1rem + 2.1vw, 2.7rem);
}
.sec__head h2 {
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
}
.sec__head p {
  max-width: 54ch;
  margin: 0.65rem auto 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-2);
}
.sec__mark {
  display: grid;
  margin: 0 auto 1rem;
}
.sec__mark .brand__mark {
  width: 1.5em;
  height: 1.5em;
}
.sec__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.cards {
  display: grid;
  gap: var(--frame);
}
.cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* the card: eyebrow, title, a line, then a composed visual that bleeds to the foot */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 1.15rem 1.15rem 1rem;
  border-radius: 24px;
  text-align: left;
  font: inherit;
  color: inherit;
  --glow: 0.22;
  --bx: 50%;
  --by: 100%;
}
.cards--4 .card,
.cards--3 .card {
  min-height: 352px;
}
.card--field,
.card--class {
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25), filter var(--dur) var(--ease), opacity var(--dur) var(--ease), --glow var(--dur) var(--ease);
}
.card--field:hover,
.card--class:hover {
  transform: translateY(-5px);
  --glow: 0.5;
}
.card--field:focus-visible,
.card--class:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}
@media (hover: hover) {
  .cards:has(.card--field:hover) .card--field:not(:hover),
  .cards:has(.card--class:hover) .card--class:not(:hover) {
    filter: blur(1px) saturate(0.7);
    opacity: 0.72;
  }
}
.card__eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.card__eyebrow b {
  color: var(--sage);
}
.card__title {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
}
.card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-2);
}
.card__ev {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}
.card__vis {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 150px;
  margin: 0.8rem -1.15rem -1rem;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, transparent, rgba(69, 214, 159, 0.07));
}
.card__plus {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(10, 16, 14, 0.7);
  color: var(--text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), rotate 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.card__plus svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.card:hover .card__plus {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--ink);
  rotate: 90deg;
}

/* composition 1: stacked papers (the job titles) with the orb in front */
.vis-stack .paper {
  position: absolute;
  left: 30%;
  right: 12%;
  bottom: 54px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: linear-gradient(180deg, #1b2621, #131b17);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.85);
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.25), opacity 0.4s var(--ease);
}
.vis-stack .paper--0 {
  z-index: 3;
  color: var(--text);
  transform: translate(0, 0) rotate(0deg);
}
.vis-stack .paper--1 {
  z-index: 2;
  opacity: 0.85;
  transform: translate(8px, -14px) rotate(3deg);
}
.vis-stack .paper--2 {
  z-index: 1;
  opacity: 0.65;
  transform: translate(-6px, -26px) rotate(-4deg);
}
.card:hover .vis-stack .paper--1 {
  transform: translate(16px, -20px) rotate(7deg);
}
.card:hover .vis-stack .paper--2 {
  transform: translate(-14px, -36px) rotate(-9deg);
}
.vis-stack .orb--lg {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
}
.card:hover .vis-stack .orb--lg {
  transform: translateY(-6px) rotate(-6deg);
}

/* composition 2: a small cloud of skill chips with the orb in front */
.vis-chips .vchip {
  position: absolute;
  max-width: 62%;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(69, 214, 159, 0.4);
  border-radius: 999px;
  background: rgba(69, 214, 159, 0.1);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.25);
}
.vis-chips .vchip--0 {
  left: 8%;
  top: 16px;
  transform: rotate(-4deg);
}
.vis-chips .vchip--1 {
  right: 8%;
  top: 46px;
  transform: rotate(3deg);
}
.vis-chips .vchip--2 {
  left: 34%;
  top: 80px;
  transform: rotate(2deg);
}
.vis-chips .vchip--3 {
  right: 14%;
  top: 112px;
  transform: rotate(-3deg);
}
.card:hover .vis-chips .vchip--0 {
  transform: rotate(-8deg) translate(-4px, -3px);
}
.card:hover .vis-chips .vchip--1 {
  transform: rotate(6deg) translate(4px, -3px);
}
.card:hover .vis-chips .vchip--2 {
  transform: rotate(4deg) translate(2px, 2px);
}
.card:hover .vis-chips .vchip--3 {
  transform: rotate(-6deg) translate(-3px, 3px);
}
.vis-chips .orb--lg {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
}
.card:hover .vis-chips .orb--lg {
  transform: translateY(-6px) rotate(-6deg);
}

/* the wider cards keep their inner styles; align their heads with the others */
.card.shape-tile,
.card.axes-tile,
.card.read-tile,
.card.head-tile,
.card.share-tile,
.card.card--quote,
.card.card--cta {
  display: grid;
  grid-template-rows: none;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.card.share-tile {
  grid-template-columns: 1fr;
}
.card.share-tile .card__eyebrow,
.card.share-tile .label {
  color: var(--ink);
}
.card.share-tile h3 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
}
.card.card--quote .quote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.card.card--quote small {
  font-size: 0.8rem;
  color: var(--text-3);
}
.card.card--cta h3 {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  letter-spacing: -0.03em;
}
.card.card--cta p {
  color: rgba(244, 250, 247, 0.85);
}
.card.card--cta .btn {
  justify-self: start;
}
.card.head-tile h3 {
  margin-top: -0.3rem;
}
.card.shape-tile .radar {
  margin: 0 auto;
}

/* ══════════ 12 · micro-motion ══════════ */

/* staggered reveals: each card waits its turn */
.js .reveal {
  transition-delay: calc(var(--i, 0) * 80ms);
}
/* the radar grows into place */
.reveal .radar .area,
.reveal .radar .dot {
  transform-origin: 160px 150px;
  transform: scale(0.15);
  opacity: 0;
  transition: transform 0.9s var(--ease-out) 0.25s, opacity 0.5s var(--ease) 0.25s;
}
.reveal.is-in .radar .area,
.reveal.is-in .radar .dot {
  transform: scale(1);
  opacity: 1;
}
/* the dots on the rails land one by one */
.reveal .axis__dot {
  scale: 0;
  transition: scale 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.35) calc(0.2s + var(--k, 0) * 70ms);
}
.reveal.is-in .axis__dot {
  scale: 1;
}
/* evidence ticks light up left to right */
.reveal .ticks i.is-on {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out) calc(0.35s + var(--t, 0) * 0.1s);
}
.reveal.is-in .ticks i.is-on {
  transform: scaleX(1);
}
/* the student's echo pops in */
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(6px);
  }
}
.msg--you .bubble {
  transform-origin: 100% 100%;
  animation: pop-in 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3) both;
}
/* the worlds arrive one after another */
.wrow__item {
  animation: fly-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
/* the current journey stop breathes */
@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(69, 214, 159, 0);
  }
  50% {
    box-shadow: 0 0 14px 1px rgba(69, 214, 159, 0.45);
  }
}
.journey__stop.is-now,
.rstop.is-now .orb {
  animation: breathe 2.6s ease-in-out infinite;
}
/* a sheet's sections slide up in order */
.detail.is-open .dsec,
.detail.is-open .facts {
  animation: fly-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
/* the fork: one medallion and its pull, stacked and centred on the stage */
.opt--folder .opt__stage {
  display: grid;
  place-items: center;
  height: 132px;
}
.cluster {
  display: grid;
  justify-items: center;
  gap: 10px;
  animation: float 5.5s ease-in-out infinite;
}
.fork .opt--folder + .opt--folder .cluster {
  animation-delay: -2.7s;
}
.opt--folder .cluster .sticker {
  position: relative;
  inset: auto;
  margin: 0;
  rotate: 0deg;
  animation: none;
}
.opt--folder .cluster .sticker--main {
  width: 62px;
  height: 62px;
  border-radius: 19px;
}
.opt--folder .cluster .sticker--main svg {
  width: 28px;
  height: 28px;
}
.opt--folder:hover .cluster .sticker--main,
.opt--folder[aria-pressed='true'] .cluster .sticker--main {
  translate: 0 -3px;
  scale: 1.05;
}
.opt--folder .opt__body::before {
  left: 18px;
  background: linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)), var(--ink-2);
}
.fork::after {
  top: calc(50% + 66px);
}
@media (prefers-reduced-motion: reduce) {
  .cluster {
    animation: none;
  }
}
/* the right rail before anything is picked */
.sofar--ghost .sofar__item {
  opacity: 0.5;
}
.sofar--ghost .sofar__item:first-child {
  opacity: 1;
}
.sofar__empty {
  margin-top: 0.6rem;
  padding-left: calc(28px + 0.7rem);
}

@media (max-width: 1000px) {
  .cards--4,
  .cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .cards--2 {
    grid-template-columns: 1fr;
  }
  .cards--4 .card,
  .cards--3 .card {
    min-height: 320px;
  }
}
@media (max-width: 560px) {
  .cards--4,
  .cards--3 {
    grid-template-columns: 1fr;
  }
  .cards--4 .card,
  .cards--3 .card {
    min-height: 0;
  }
  .card__vis {
    min-height: 140px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transition-delay: 0s;
  }
  .reveal .radar .area,
  .reveal .radar .dot,
  .reveal .axis__dot,
  .reveal .ticks i.is-on {
    transform: none;
    scale: 1;
    opacity: 1;
    transition: none;
  }
  .msg--you .bubble,
  .wrow__item,
  .journey__stop.is-now,
  .rstop.is-now .orb,
  .detail.is-open .dsec,
  .detail.is-open .facts {
    animation: none;
  }
}

/* ══════════ 13 · icon containers: centred by construction ══════════ */

.ico > svg,
.card__plus > svg,
.ticks-list i > svg,
.opt__check > svg {
  position: absolute;
  inset: 0;
  margin: auto;
}
.ticks-list i {
  position: relative;
}

/* the three picked for you: medallion, then the words — one column per card */
.three__card {
  grid-template-columns: 1fr;
  justify-items: start;
  align-items: start;
  align-content: start;
  gap: 0.75rem;
  padding: 1rem 1rem 1.05rem;
}
.three__body {
  display: grid;
  gap: 0.2rem;
}
.three__n {
  top: 1rem;
  right: 1rem;
}
@media (max-width: 560px) {
  .three__card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding-right: 2.6rem;
  }
}

/* ══════════ 14 · the printed result — dark A4 pages ══════════
   The document styles apply on screen too, so the pages can be measured
   off-screen and packed before printing; only page-level rules are print-only. */

.printdoc {
  display: none;
  color: #eef5f2;
  font-family: var(--font-body);
  font-size: 8.4pt;
  line-height: 1.42;
}
.printdoc.is-measuring {
  display: block;
  position: fixed;
  top: 0;
  left: -10000px;
  z-index: -1;
  visibility: hidden;
  pointer-events: none;
}
.printdoc .ticks i.is-on {
  box-shadow: none;
}
.printdoc .radar .lbl {
  font-size: 13px;
}
.printdoc .orb {
  border-color: #2f5a49;
  background: linear-gradient(165deg, #23493a, #11281f);
  box-shadow: none;
}
.printdoc .orb::after {
  display: none;
}
.printdoc .orb--hot {
  border-color: #9df0cf;
  background: linear-gradient(135deg, #8df0c8, #45d69f 60%, #2fb985);
}
.printdoc .orb--dash {
  border-color: #45d69f;
  background: #0f1a15;
}

.pd__page {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.6mm;
  width: 210mm;
  height: 296.5mm;
  padding: 11mm 12.5mm 9mm;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20210%20297%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M9%200V297M18%200V297M27%200V297M36%200V297M45%200V297M54%200V297M63%200V297M72%200V297M81%200V297M90%200V297M99%200V297M108%200V297M117%200V297M126%200V297M135%200V297M144%200V297M153%200V297M162%200V297M171%200V297M180%200V297M189%200V297M198%200V297M207%200V297M0%209H210M0%2018H210M0%2027H210M0%2036H210M0%2045H210M0%2054H210M0%2063H210M0%2072H210M0%2081H210M0%2090H210M0%2099H210M0%20108H210M0%20117H210M0%20126H210M0%20135H210M0%20144H210M0%20153H210M0%20162H210M0%20171H210M0%20180H210M0%20189H210M0%20198H210M0%20207H210M0%20216H210M0%20225H210M0%20234H210M0%20243H210M0%20252H210M0%20261H210M0%20270H210M0%20279H210M0%20288H210%27%20fill=%27none%27%20stroke=%27%23162420%27%20stroke-width=%270.25%27/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(200deg, #0f2a20 0%, #0a100e 38%),
    #0a100e;
  break-after: page;
  page-break-after: always;
}
.pd__page:last-child {
  break-after: auto;
  page-break-after: auto;
}

/* the top bar and the foot */
.pd__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4mm;
  padding-bottom: 3mm;
  border-bottom: 0.25mm solid rgba(255, 255, 255, 0.1);
}
.pd__brand {
  display: inline-flex;
  align-items: center;
  gap: 2mm;
  font-family: var(--font-display);
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4faf7;
}
.pd__brand .brand__mark {
  width: 6mm;
  height: 6mm;
}
.pd__toptitle {
  padding: 1.1mm 3mm;
  border: 0.3mm solid rgba(69, 214, 159, 0.5);
  border-radius: 99px;
  font-size: 6.4pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #45d69f;
}
.pd__pg {
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 250, 247, 0.5);
}
.pd__foot {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  margin-top: auto;
  padding-top: 3mm;
  border-top: 0.25mm solid rgba(255, 255, 255, 0.1);
  font-size: 6.4pt;
  letter-spacing: 0.04em;
  color: rgba(244, 250, 247, 0.45);
}

/* page one: the emerald hero */
.pd__hero {
  position: relative;
  padding: 6.5mm 7mm 6mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.2);
  border-radius: 6mm;
  background: linear-gradient(150deg, #1a9e6d 0%, #0d6446 52%, #0a4a34 100%);
  overflow: hidden;
}
.pd__hero::after {
  content: '';
  position: absolute;
  right: 7mm;
  bottom: -7mm;
  width: 40mm;
  height: 40mm;
  background: rgba(255, 255, 255, 0.1);
  -webkit-mask: url(/logo.svg) center / contain no-repeat;
  mask: url(/logo.svg) center / contain no-repeat;
}
.pd__herochip {
  display: inline-block;
  padding: 1.1mm 3mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.45);
  border-radius: 99px;
  font-size: 6.4pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.pd__hero h1 {
  position: relative;
  z-index: 1;
  max-width: 148mm;
  margin: 3.4mm 0 0;
  font-family: var(--font-display);
  font-size: 22pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
}
.pd__hero p {
  position: relative;
  z-index: 1;
  max-width: 138mm;
  margin: 2.6mm 0 0;
  font-size: 9pt;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.pd__metas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.8mm;
  margin-top: 4mm;
}
.pd__meta {
  display: inline-flex;
  align-items: center;
  gap: 1.5mm;
  padding: 1.2mm 2.8mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  background: rgba(10, 16, 14, 0.28);
  font-size: 6.4pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.pd__meta svg {
  width: 3mm;
  height: 3mm;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* section heads */
.pd__sec {
  display: grid;
  gap: 3mm;
}
.pd__sechead {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin: 0;
  font-family: var(--font-body);
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #45d69f;
}
.pd__sechead::after {
  content: '';
  flex: 1;
  height: 0.25mm;
  background: rgba(255, 255, 255, 0.12);
}
.pd__label {
  display: block;
  margin: 0 0 1.6mm;
  font-size: 6.2pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #45d69f;
}
.pd__note {
  margin: 2.4mm 0 0;
  font-size: 6.8pt;
  color: rgba(244, 250, 247, 0.5);
}
.pd__rank {
  display: block;
  font-size: 6.4pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 250, 247, 0.55);
}
.pd__fam {
  margin: 0;
  font-size: 7pt;
  color: rgba(244, 250, 247, 0.5);
}

/* page one: the four as cards */
.pd__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4mm;
}
.pd__card {
  display: grid;
  align-content: start;
  gap: 1.5mm;
  padding: 4.4mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.12);
  border-radius: 4.5mm;
  background: linear-gradient(180deg, #16231d, #101915);
}
.pd__card.is-wild,
.pd__detail.is-wild {
  border: 0.4mm dashed rgba(69, 214, 159, 0.6);
}
.pd__cardhead {
  display: flex;
  align-items: center;
  gap: 2.6mm;
  margin-bottom: 1mm;
}
.pd__cardhead .orb {
  width: 9.5mm;
  height: 9.5mm;
  border-radius: 3mm;
}
.pd__cardhead .orb svg {
  width: 4.6mm;
  height: 4.6mm;
}
.pd__evline {
  display: flex;
  align-items: center;
  gap: 1.6mm;
  margin-top: 0.8mm;
  font-size: 6.2pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #45d69f;
}
.pd__card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12pt;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}
.pd__blurb {
  margin: 0.6mm 0 0;
  font-size: 8pt;
  color: rgba(244, 250, 247, 0.8);
}
.pd__pulls {
  display: grid;
  gap: 1.3mm;
  margin-top: 1.6mm;
}
.pd__pull {
  display: grid;
  grid-template-columns: 3.4mm 19mm 1fr;
  align-items: center;
  gap: 1.8mm;
}
.pd__pull svg {
  width: 3.2mm;
  height: 3.2mm;
  fill: none;
  stroke: #45d69f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pd__pullname {
  font-size: 6pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 250, 247, 0.55);
}
.pd__pull i,
.pd__bar i {
  display: block;
  border-radius: 1mm;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.pd__pull i {
  height: 1.4mm;
}
.pd__pull b,
.pd__bar b {
  display: block;
  height: 100%;
  border-radius: 1mm;
}
.pd__pull b {
  background: linear-gradient(90deg, #2fb985, #8df0c8);
}

/* page one: the shape */
.pd__shape {
  display: grid;
  grid-template-columns: 74mm 1fr;
  gap: 3.4mm;
}
.pd__panel {
  padding: 4.4mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.12);
  border-radius: 4.5mm;
  background: #101915;
}
.pd__panel .radar {
  display: block;
  width: 100%;
  max-width: 54mm;
  margin: 1mm auto 0;
}
.pd__bars {
  display: grid;
  gap: 2.1mm;
  margin-top: 1mm;
}
.pd__bar {
  display: grid;
  grid-template-columns: 22mm 1fr;
  align-items: center;
  gap: 3mm;
}
.pd__barname {
  font-size: 6.6pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 250, 247, 0.82);
}
.pd__bar i {
  height: 2mm;
}
.pd__bar b {
  background: linear-gradient(90deg, #0d6446, #45d69f);
}

/* pages two and three: each of the four, up close */
.pd__detail {
  display: grid;
  gap: 3mm;
  padding: 4.4mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.12);
  border-radius: 5mm;
  background: linear-gradient(180deg, #16231d, #0f1814);
}
.pd__dhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4mm;
}
.pd__dhead .orb {
  width: 13mm;
  height: 13mm;
  border-radius: 4mm;
}
.pd__dhead .orb svg {
  width: 6.2mm;
  height: 6.2mm;
}
.pd__dtitle h3 {
  margin: 0.8mm 0 0;
  font-family: var(--font-display);
  font-size: 15pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
}
.pd__dtitle p {
  margin: 1.2mm 0 0;
  font-size: 8pt;
  color: rgba(244, 250, 247, 0.75);
}
.pd__evpill {
  display: inline-flex;
  align-items: center;
  gap: 1.8mm;
  padding: 1.4mm 3mm;
  border: 0.3mm solid rgba(69, 214, 159, 0.45);
  border-radius: 99px;
  font-size: 6.2pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #45d69f;
}
.pd__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}
.pd__col {
  display: grid;
  align-content: start;
  gap: 3mm;
}
.pd__why {
  padding: 3.6mm 4mm;
  border-radius: 3.6mm;
  background: linear-gradient(150deg, #138b5f, #0d6446 60%, #0b5139);
}
.pd__why .pd__label {
  color: rgba(255, 255, 255, 0.72);
}
.pd__why p {
  margin: 0;
  font-size: 8pt;
  color: #fff;
}
.pd__ticks {
  display: grid;
  gap: 1.3mm;
  margin: 2.2mm 0 0;
  padding: 0;
  list-style: none;
}
.pd__ticks li {
  display: grid;
  grid-template-columns: 4mm minmax(0, 1fr);
  align-items: center;
  gap: 2mm;
}
.pd__ticks i {
  position: relative;
  display: block;
  width: 4mm;
  height: 4mm;
  border-radius: 1.2mm;
  background: rgba(255, 255, 255, 0.2);
}
.pd__ticks i > svg {
  position: absolute;
  inset: 0;
  width: 2.6mm;
  height: 2.6mm;
  margin: auto;
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pd__ticktext {
  font-size: 7.6pt;
  color: #fff;
}
.pd__info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3mm;
}
.pd__info .orb {
  width: 9mm;
  height: 9mm;
  border-radius: 2.8mm;
}
.pd__info .orb svg {
  width: 4.2mm;
  height: 4.2mm;
}
.pd__info .pd__label {
  margin-bottom: 0.6mm;
}
.pd__info p {
  margin: 0;
  font-size: 7.6pt;
  color: rgba(244, 250, 247, 0.85);
}
.pd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3mm;
}
.pd__chip {
  display: inline-flex;
  align-items: center;
  padding: 1mm 2.4mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  font-size: 6.6pt;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(244, 250, 247, 0.88);
}
.pd__chip.is-req {
  border-color: #45d69f;
  background: #45d69f;
  color: #0a100e;
}
.pd__chip.is-soft {
  border-color: rgba(69, 214, 159, 0.45);
  background: rgba(69, 214, 159, 0.12);
  color: #eef5f2;
}
.pd__key {
  display: flex;
  flex-wrap: wrap;
  gap: 3.5mm;
  font-size: 6pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 250, 247, 0.5);
}
.pd__key i {
  display: inline-block;
  width: 2.4mm;
  height: 2.4mm;
  margin-right: 1.2mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  vertical-align: -0.35mm;
}
.pd__key i.k-req {
  border-color: #45d69f;
  background: #45d69f;
}
.pd__freegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2mm;
}
.pd__res {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2.6mm;
  padding: 2.4mm 3mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.1);
  border-radius: 3mm;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
}
.pd__res .orb {
  width: 8.5mm;
  height: 8.5mm;
  border-radius: 2.6mm;
}
.pd__res .orb svg {
  width: 4mm;
  height: 4mm;
}
.pd__restext {
  display: grid;
  gap: 0.3mm;
  min-width: 0;
}
.pd__resname {
  font-size: 7.6pt;
  font-weight: 700;
  color: #fff;
}
.pd__resby {
  font-size: 6.4pt;
  color: rgba(244, 250, 247, 0.55);
}
.pd__resurl {
  overflow: hidden;
  font-size: 6.4pt;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #45d69f;
}

/* page four: careers, words, the way back online */
.pd__grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.4mm;
}
.pd__career {
  display: grid;
  grid-template-columns: 58mm minmax(0, 1fr);
  gap: 5mm;
  padding: 3.8mm 4.4mm;
  border: 0.3mm solid rgba(255, 255, 255, 0.12);
  border-radius: 4.5mm;
  background: #101915;
}
.pd__career.is-featured {
  border-color: #2fa77c;
  background: linear-gradient(180deg, #17352a, #101915 42%);
}
.pd__cmhead {
  display: flex;
  align-items: center;
  gap: 2.4mm;
  margin-bottom: 1mm;
}
.pd__cmhead .orb {
  width: 9mm;
  height: 9mm;
  border-radius: 2.8mm;
}
.pd__cmhead .orb svg {
  width: 4.2mm;
  height: 4.2mm;
}
.pd__career h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10.5pt;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}
.pd__career p {
  margin: 0;
  font-size: 7.4pt;
  color: rgba(244, 250, 247, 0.78);
}
.pd__career p.pd__fam {
  color: rgba(244, 250, 247, 0.5);
}
.pd__cleft,
.pd__cright {
  display: grid;
  align-content: start;
  gap: 1.2mm;
}
.pd__cright .pd__label {
  margin: 1.2mm 0 0;
}
.pd__cright .pd__label:first-child {
  margin-top: 0;
}
.pd__two {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.4mm;
}
.pd__quotes,
.pd__prov {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd__quotes {
  gap: 2.6mm;
}
.pd__quotes li {
  padding-left: 3mm;
  border-left: 0.5mm solid #45d69f;
}
.pd__quotes .pd__label {
  margin-bottom: 0.5mm;
  color: rgba(244, 250, 247, 0.5);
}
.pd__quotes q {
  font-family: var(--font-display);
  font-size: 8.2pt;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.pd__prov {
  gap: 2.2mm;
}
.pd__prov li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2.6mm;
}
.pd__prov .orb {
  width: 7.5mm;
  height: 7.5mm;
  border-radius: 2.3mm;
}
.pd__prov .orb svg {
  width: 3.6mm;
  height: 3.6mm;
}
.pd__provtext {
  font-size: 7.2pt;
  color: rgba(244, 250, 247, 0.82);
}
.pd__share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5mm;
  padding: 5mm 6mm;
  border-radius: 5mm;
  background: linear-gradient(135deg, #8df0c8, #45d69f 58%, #2fb985);
  color: #0a100e;
}
.pd__share .pd__label {
  color: rgba(10, 16, 14, 0.65);
}
.pd__sharetitle {
  display: block;
  font-family: var(--font-display);
  font-size: 13pt;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.pd__share p {
  margin: 1.4mm 0 0;
  font-size: 7.4pt;
  color: rgba(10, 16, 14, 0.78);
}
.pd__btn {
  display: inline-flex;
  align-items: center;
  padding: 2.6mm 4.6mm;
  border-radius: 99px;
  background: #0a100e;
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: #f4faf7;
}

/* packed pages: a flow of units between the top bar and the foot */
.pd__flow,
.pd__unit {
  display: flex;
  flex-direction: column;
  gap: 3.6mm;
}
.pd__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3mm;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd__steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2.4mm;
}
.pd__steps .orb {
  width: 8mm;
  height: 8mm;
  border-radius: 2.4mm;
}
.pd__steps .orb svg {
  width: 3.8mm;
  height: 3.8mm;
}
.pd__steptext {
  font-size: 7.2pt;
  line-height: 1.4;
  color: rgba(244, 250, 247, 0.8);
}
.pd__steptext b {
  color: #fff;
}

/* a page that would not otherwise fit: the same layout, a little tighter */
.pd__page.is-tight,
.pd__page.is-tight .pd__flow,
.pd__page.is-tight .pd__unit {
  gap: 2.6mm;
}
.pd__page.is-tight .pd__detail {
  gap: 2.4mm;
  padding: 3.6mm;
}
.pd__page.is-tight .pd__cols {
  gap: 3mm;
}
.pd__page.is-tight .pd__col {
  gap: 2.2mm;
}
.pd__page.is-tight .pd__why {
  padding: 3mm 3.4mm;
}
.pd__page.is-tight .pd__res {
  padding: 1.8mm 2.6mm;
}
.pd__page.is-tight .pd__resby {
  display: none;
}
.pd__page.is-tight .pd__hero {
  padding: 5.4mm 6mm 5mm;
}
.pd__page.is-tight .pd__card,
.pd__page.is-tight .pd__career,
.pd__page.is-tight .pd__panel {
  padding: 3.6mm;
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  html,
  body {
    width: 210mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #0a100e !important;
  }
  html,
  .compass-body *,
  .compass-body *::before,
  .compass-body *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }
  .compass-body > :not(main) {
    display: none !important;
  }
  .compass-body .capp {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .compass-body .capp:has(> .printdoc) > :not(.printdoc) {
    display: none !important;
  }
  .printdoc,
  .printdoc.is-measuring {
    display: block !important;
    position: static !important;
    visibility: visible !important;
  }
}

.pd__roles {
  margin-top: 0.6mm;
  font-size: 6.8pt;
  line-height: 1.45;
  color: rgba(244, 250, 247, 0.62);
}
.pd__roles b {
  margin-right: 1mm;
  font-size: 6pt;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #45d69f;
}

/* the top bar on Compass: a solid, blurred band once the page scrolls */
.compass-body .nav::before {
  inset: 0;
  background: rgba(10, 16, 14, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* the first screen, before the app has arrived */
.boot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  font-size: 0.86rem;
  color: rgba(244, 250, 247, 0.82);
}
.boot__bar {
  position: relative;
  flex: none;
  width: 112px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.boot__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 2px;
  background: #fff;
  animation: boot-run 1.2s ease-in-out infinite;
}
@keyframes boot-run {
  from {
    translate: -100% 0;
  }
  to {
    translate: 250% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot__bar::after {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}
.submit-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* tablets: three career cards in a two-column grid — the third spans the row */
@media (min-width: 561px) and (max-width: 1000px) {
  .cards--3 > .card:last-child:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    align-content: stretch;
    column-gap: 1.4rem;
    min-height: 0;
  }
  .cards--3 > .card:last-child:nth-child(3) > :not(.card__vis):not(.card__plus) {
    grid-column: 1;
  }
  .cards--3 > .card:last-child:nth-child(3) .card__vis {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 200px;
    margin: -1.15rem -1.15rem -1rem 0;
    border-radius: 0 24px 24px 0;
  }
}