/* FDEBench hub, quiet edition.
   One typeface, regular-weight headlines, generous space, one call to action per section.
   Teal (FDEBench's accent) is used sparingly: primary buttons and the two chart marks that matter. */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F6F5F1;
  --bg-mist: #EEF4F3;
  --ink: #111414;
  --ink-2: #4D5454;
  --ink-3: #6E7575;
  --line: #E7E5DF;
  --teal: #1D7581;
  --teal-deep: #165E68;
  --teal-mark: #20808D;
  --gray-mark: #CDD1CE;
  --radius: 22px;
  --radius-sm: 14px;
  --wrap: 1200px;
  --gutter: 32px;
  --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }

/* Buttons */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--teal); color: #fff;
  font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), transform .2s var(--ease), color .25s, border-color .25s;
}
.pill:hover { background: var(--teal-deep); }
.pill:active { transform: scale(.98); }
.pill .arr { transition: transform .25s var(--ease); }
.pill:hover .arr { transform: translateX(3px); }
.pill--light { background: #fff; color: var(--ink); }
.pill--light:hover { background: #F1F1EE; }
.pill--ghost { background: transparent; color: var(--ink); border-color: #CFCDC6; }
.pill--ghost:hover { background: var(--bg-soft); }
.pill--sm { padding: 10px 18px; font-size: .9375rem; }
.text-link { text-decoration: none; color: var(--teal); font-weight: 500; }
.text-link .arr { display: inline-block; transition: transform .25s var(--ease); }
.text-link:hover .arr { transform: translateX(3px); }

/* Header: clear over the hero, solid once you scroll (and on subpages) */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff; transition: background-color .3s var(--ease), color .3s, box-shadow .3s; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.brand { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.nav { display: flex; gap: 34px; font-size: .9375rem; }
.nav a { text-decoration: none; opacity: .86; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.site-header .pill { background: #fff; color: var(--ink); }
.site-header .pill:hover { background: #F1F1EE; }
.site-header.is-solid, .is-subpage .site-header { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid .pill, .is-subpage .site-header .pill { background: var(--teal); color: #fff; }
.site-header.is-solid .pill:hover, .is-subpage .site-header .pill:hover { background: var(--teal-deep); }

/* Hero */
.hero { position: relative; height: min(92vh, 920px); min-height: 620px; overflow: hidden; color: #fff; background: #1b1d1d; }
.hero-media { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 86%; object-fit: cover; object-position: 50% 100%; filter: grayscale(1) contrast(1.06) brightness(.8); transform-origin: 50% 100%; animation: drift 26s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.045) translate3d(-.8%, 0, 0); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,12,.42) 0%, rgba(10,12,12,0) 26%, rgba(10,12,12,0) 48%, rgba(10,12,12,.62) 100%); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 88px; }
.hero h1 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.03; letter-spacing: -0.035em; max-width: 17ch; }
.hero .sub { margin-top: 20px; max-width: 30em; font-size: 1.1875rem; line-height: 1.5; color: rgba(255,255,255,.86); }
.hero .pill { margin-top: 32px; }
.glass {
  flex: 0 0 auto; width: 320px; padding: 22px 24px; border-radius: 20px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.glass:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.glass .eyebrow { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: rgba(255,255,255,.78); }
.glass .dot { width: 7px; height: 7px; border-radius: 50%; background: #7CD3C4; box-shadow: 0 0 0 4px rgba(124,211,196,.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(124,211,196,0); } }
.glass p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.4; }
.glass .go { display: inline-block; margin-top: 14px; font-size: .9375rem; font-weight: 500; }

/* Sections */
.sec { padding-block: 140px; }
.sec--soft { background: var(--bg-soft); }
.sec-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.sec-head h2, .feature h2, .final h2 { font-size: clamp(2rem, 3.6vw, 3.125rem); line-height: 1.08; }
.sec-head .sub { margin: 18px auto 0; max-width: 34em; font-size: 1.1875rem; color: var(--ink-2); }

/* Trust line */
.trust { padding: 84px 0 12px; text-align: center; }
.trust p { font-size: .9375rem; color: var(--ink-3); }
.trust ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; margin-top: 24px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; color: #9CA2A1; }

/* Doors */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.door {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: 340px; padding: 32px; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--bg-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.door:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(17,20,20,.35); }
.door h3 { font-size: 1.625rem; line-height: 1.15; }
.door p { max-width: 26em; color: var(--ink-2); }
.door .go { margin-top: 6px; font-size: .9375rem; font-weight: 500; color: var(--teal); }
.door .go .arr { display: inline-block; transition: transform .25s var(--ease); }
.door:hover .go .arr { transform: translateX(4px); }
.door .big { margin-bottom: auto; font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.door .big small { display: block; margin-top: 10px; font-size: .9375rem; letter-spacing: 0; color: var(--ink-3); }
.door--wide { grid-column: 1 / -1; min-height: 460px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; padding: 56px; }
.door--wide .door-text { display: flex; flex-direction: column; gap: 12px; }
.door--wide h3 { font-size: clamp(2rem, 3vw, 2.625rem); }
.door--wide p { font-size: 1.125rem; }
.door--wide .shot { border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 1px 0 rgba(17,20,20,.06), 0 30px 60px -30px rgba(17,20,20,.4); transition: transform .8s var(--ease); }
.door--wide:hover .shot { transform: scale(1.015); }
.door--mist { background: radial-gradient(120% 120% at 0% 0%, #D9ECEB 0%, #EEF5F4 45%, #F7FAF9 100%); }
.door--sand { background: radial-gradient(120% 120% at 100% 0%, #EFE6D6 0%, #F5F0E6 45%, #FAF8F3 100%); }
.door--slate { background: radial-gradient(120% 120% at 0% 100%, #DFE4EC 0%, #EEF1F5 45%, #F8F9FB 100%); }

/* Statement: the job in four moves, lit line by line as it scrolls in */
.statement { padding-block: 160px; text-align: center; }
.statement .lines { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.16; letter-spacing: -0.03em; }
.statement .lines span { display: block; color: var(--ink); transition: color .9s var(--ease); }
.js .statement .lines span { color: #C9CDCB; }
.js .statement .lines span.is-lit { color: var(--ink); }
.statement .cap { margin-top: 40px; color: var(--ink-3); }
.statement .cap a { margin-left: 6px; }

/* Voices */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.voice blockquote p { font-size: 1.5rem; line-height: 1.32; letter-spacing: -0.02em; }
.voice blockquote p::before { content: "\201C"; }
.voice blockquote p::after { content: "\201D"; }
.voice figcaption { margin-top: 20px; font-size: .9375rem; color: var(--ink-3); }
.voice figcaption b { display: block; font-weight: 500; color: var(--ink); }
.rating { margin-top: 64px; text-align: center; font-size: .9375rem; color: var(--ink-3); }

/* Feature (bootcamp) */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.feature .label { font-size: .9375rem; color: var(--teal); font-weight: 500; }
.feature h2 { margin-top: 14px; }
.feature .body { margin-top: 20px; max-width: 30em; font-size: 1.1875rem; color: var(--ink-2); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; color: var(--ink-2); }
.facts li { display: block; }
.facts b { font-weight: 500; color: var(--ink); }
.feature .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.feature .small { font-size: .9375rem; color: var(--ink-3); }
.portrait { position: relative; border-radius: var(--radius); overflow: hidden; background: radial-gradient(120% 120% at 70% 0%, #DCEDEC 0%, #EEF5F4 50%, #F6F5F1 100%); aspect-ratio: 5 / 4; }
.portrait img { position: absolute; bottom: 0; left: 50%; width: 74%; transform: translateX(-50%); filter: grayscale(1) contrast(1.04); }
.portrait-cap { margin-top: 16px; font-size: .9375rem; color: var(--ink-3); }
.portrait-cap b { font-weight: 500; color: var(--ink); }

/* Final */
.final { padding-block: 160px; text-align: center; background: var(--bg-soft); }
.final .sub { margin: 18px auto 0; max-width: 30em; font-size: 1.1875rem; color: var(--ink-2); }
.final .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

/* Footer */
.site-footer { padding: 72px 0 40px; font-size: .9375rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-top .brand { color: var(--ink); }
.foot-top p { margin-top: 10px; max-width: 22em; }
.foot-top h4 { margin-bottom: 12px; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.foot-top li { padding: 4px 0; }
.foot-top a { text-decoration: none; }
.foot-top a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-3); }
.foot-bottom a { color: var(--ink-2); }
.fine { max-width: 60em; }

/* Subpages */
.page-hero { padding: 176px 0 40px; text-align: center; }
.page-hero h1 { font-size: clamp(2.75rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -0.035em; }
.page-hero .sub { margin: 22px auto 0; max-width: 34em; font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); }
.page-hero .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.block { padding-block: 96px; }
.block + .block { padding-top: 24px; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 36px; }
.block-head h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.12; }
.block-head p { color: var(--ink-3); font-size: .9375rem; }

/* Learn page */
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(17,20,20,.35); }
.card .media { aspect-ratio: 16 / 9; overflow: hidden; background: #E9E8E3; }
.card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .media img { transform: scale(1.02); }
.card .media--grad { display: flex; align-items: flex-end; padding: 28px; background: radial-gradient(120% 120% at 0% 0%, #D9ECEB 0%, #EEF5F4 45%, #F7FAF9 100%); }
.card .media--grad span { font-size: clamp(3rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -0.04em; }
.card .media--grad small { display: block; margin-top: 8px; font-size: .9375rem; letter-spacing: 0; color: var(--ink-3); }
.card .body { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 32px; }
.card h3 { font-size: 1.5rem; line-height: 1.2; }
.card p { color: var(--ink-2); }
.card .meta { font-size: .875rem; color: var(--ink-3); }
.card .go { margin-top: 6px; font-weight: 500; color: var(--teal); }
.note { margin-top: 24px; text-align: center; color: var(--ink-3); }
.note a { color: var(--teal); text-decoration: none; }
.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.book { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px; border-radius: var(--radius); background: var(--bg-soft); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
a.book:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(17,20,20,.35); }
.book img, .book .tile { width: 112px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; box-shadow: 0 18px 30px -18px rgba(17,20,20,.5); }
.book .tile { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 10px; background: #fff; font-size: .8125rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.book .tile small { font-size: .5625rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.book .tile i { font-style: normal; font-weight: 400; font-size: .6875rem; color: var(--ink-2); }
.book h3 { font-size: 1.3125rem; line-height: 1.22; }
.book p { margin-top: 8px; font-size: .9875rem; color: var(--ink-2); }
.book .meta { margin-top: 10px; font-size: .875rem; color: var(--ink-3); }
.book .go { display: inline-block; margin-top: 12px; font-weight: 500; color: var(--teal); text-decoration: none; }
.rows li { border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows a { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 6px 32px; align-items: baseline; padding: 22px 4px; text-decoration: none; transition: background-color .25s; }
.rows a:hover { background: var(--bg-soft); }
.rows .t { font-size: 1.125rem; letter-spacing: -0.01em; }
.rows .w { color: var(--ink-3); font-size: .9375rem; }
.rows .g { color: var(--teal); font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.rows .live { display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px; background: var(--bg-mist); color: var(--teal); font-size: .75rem; font-weight: 500; vertical-align: 2px; }

/* Interview page */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile3 { padding: 32px; border-radius: var(--radius); background: var(--bg-soft); }
.tile3 .n { font-size: .9375rem; color: var(--ink-3); }
.tile3 h3 { margin-top: 40px; font-size: 1.5rem; line-height: 1.2; }
.tile3 p { margin-top: 10px; color: var(--ink-2); }
.tile3.is-key { background: var(--bg-mist); }
.tile3.is-key h3 { color: var(--teal-deep); }
.after { margin-top: 28px; text-align: center; font-size: 1.25rem; letter-spacing: -0.015em; }
.after + .src { margin-top: 8px; text-align: center; font-size: .875rem; color: var(--ink-3); }
.src { font-size: .875rem; color: var(--ink-3); }
.rounds li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr); gap: 8px 40px; padding: 28px 0; border-top: 1px solid var(--line); }
.rounds li:last-child { border-bottom: 1px solid var(--line); }
.rounds h3 { font-size: 1.25rem; line-height: 1.3; }
.rounds .fw { font-size: 1.0625rem; }
.rounds .say { color: var(--ink-2); }
.rounds .is-key h3 { color: var(--teal-deep); }
.rounds-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr); gap: 8px 40px; padding-bottom: 12px; font-size: .875rem; color: var(--ink-3); }

/* Seven-move chart (dataviz method: thin marks, hairline grid, emphasis = teal + gray, hover + table twin) */
.gantt { margin-top: 8px; }
.g-row { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); gap: 0 40px; align-items: start; border-top: 1px solid var(--line); }
.g-label { padding: 18px 0; }
.g-name { font-size: 1.125rem; }
.g-name small { margin-left: 8px; font-size: .9375rem; color: var(--ink-3); }
.g-share { margin-left: 8px; font-size: .875rem; font-weight: 500; color: var(--teal); }
.g-line { margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.g-track { position: relative; align-self: stretch; min-height: 60px; background: repeating-linear-gradient(to right, transparent 0 calc(100% * 10 / 43 - 1px), #EFEDE8 calc(100% * 10 / 43 - 1px) calc(100% * 10 / 43)); border-left: 1px solid #DAD8D1; }
.g-bar { position: absolute; top: 26px; height: 10px; left: calc(var(--s) / 43 * 100%); width: calc(var(--w) / 43 * 100%); border-radius: 5px; background: var(--gray-mark); transition: filter .2s; }
.g-bar::before { content: ""; position: absolute; inset: -12px -2px; }
.g-bar.is-key { background: var(--teal-mark); }
.g-bar:hover, .g-bar:focus-visible { filter: brightness(1.1); }
.g-axis { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); gap: 0 40px; border-top: 1px solid var(--line); }
.g-axis .unit { padding-top: 10px; text-align: right; font-size: .8125rem; color: var(--ink-3); }
.g-ticks { position: relative; height: 34px; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-ticks span { position: absolute; top: 10px; left: calc(var(--at) / 43 * 100%); transform: translateX(-50%); }
.g-ticks span:first-child { transform: none; }
.big-line { margin-top: 56px; text-align: center; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.03em; }
.big-line b { font-weight: 400; color: var(--teal); }
.big-line + .src { margin-top: 12px; text-align: center; }
details.table-view { margin-top: 32px; text-align: center; }
details.table-view summary { display: inline-block; cursor: pointer; font-size: .9375rem; color: var(--ink-3); }
details.table-view summary:hover { color: var(--ink); }
details.table-view table { margin: 18px auto 0; border-collapse: collapse; text-align: left; font-size: .9375rem; }
details.table-view th, details.table-view td { padding: 8px 20px; border-bottom: 1px solid var(--line); }
details.table-view th { font-weight: 500; color: var(--ink-3); }
details.table-view .num { text-align: right; font-variant-numeric: tabular-nums; }
details.worked { border-radius: var(--radius); background: var(--bg-soft); }
details.worked summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; cursor: pointer; list-style: none; }
details.worked summary::-webkit-details-marker { display: none; }
details.worked summary span { font-size: 1.375rem; letter-spacing: -0.02em; }
details.worked summary small { display: block; margin-bottom: 4px; font-size: .9375rem; letter-spacing: 0; color: var(--ink-3); }
details.worked .plus { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--teal); font-size: 1.25rem; transition: transform .3s var(--ease); }
details.worked[open] .plus { transform: rotate(45deg); }
.w-list { padding: 0 32px 8px; }
.w-list li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.w-list b { font-weight: 500; }
.w-list .is-key b { color: var(--teal-deep); }
.w-list span { color: var(--ink-2); }
details.worked .w-end { padding: 16px 32px 28px; color: var(--ink-3); font-size: .9375rem; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 8px; }
.steps3 .n { font-size: .9375rem; color: var(--teal); font-weight: 500; }
.steps3 h3 { margin-top: 10px; font-size: 1.375rem; }
.steps3 p { margin-top: 8px; color: var(--ink-2); }
.center-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 56px; }

/* Tooltip (chart) */
.tip { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: .8125rem; line-height: 1.35; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.tip strong { font-size: 1rem; font-weight: 500; }
.tip span { color: #C4CBCA; }
.tip[hidden] { display: none; }

/* Scroll reveal (only when JS runs; content is visible without it) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .nav { gap: 22px; }
  .doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .door--wide { grid-template-columns: minmax(0, 1fr); padding: 40px; }
  .door:last-child { grid-column: 1 / -1; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top > :first-child { grid-column: 1 / -1; }
  .hero-inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .sec { padding-block: 96px; }
  .statement, .final { padding-block: 112px; }
  .hero { height: auto; min-height: 92svh; }
  .hero-inner { padding: 140px 0 48px; min-height: 92svh; }
  .hero .sub { font-size: 1.0625rem; }
  .glass { width: 100%; }
  .doors, .voices, .cards2, .books, .cols3, .steps3 { grid-template-columns: minmax(0, 1fr); }
  .door { min-height: 280px; padding: 28px; }
  .door--wide { padding: 28px; gap: 28px; }
  .voices { gap: 40px; }
  .voice blockquote p { font-size: 1.3125rem; }
  .trust ul { gap: 10px 26px; font-size: 1.0625rem; }
  .book { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 22px; }
  .book img, .book .tile { width: 88px; }
  .rows a { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 4px; }
  .rounds-head { display: none; }
  .rounds li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
  .g-row, .g-axis { grid-template-columns: minmax(0, 1fr); }
  .g-label { padding-bottom: 4px; }
  .g-track { min-height: 34px; margin-bottom: 14px; }
  .g-bar { top: 12px; }
  .g-axis .unit { display: none; }
  .w-list li { grid-template-columns: minmax(0, 1fr); }
  details.worked summary { padding: 22px; }
  .w-list { padding: 0 22px 8px; }
  details.worked .w-end { padding: 12px 22px 22px; }
  .page-hero { padding-top: 136px; }
  .block { padding-block: 64px; }
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media, .glass .dot { animation: none; }
  *, *::before, *::after { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .statement .lines span { color: var(--ink); }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the headline sits mid-photo, over the bright wall panels, so darken more evenly. */
@media (max-width: 720px) {
  .hero-media { filter: grayscale(1) contrast(1.04) brightness(.66); }
  .hero::after { background: linear-gradient(180deg, rgba(10,12,12,.35) 0%, rgba(10,12,12,.25) 40%, rgba(10,12,12,.7) 100%); }
}

/* =====================================================================
   Jobs-first hub: hero with search, job cards, toolbar, question rows.
   Card structure follows the traversaal.ai/fde/jobs board, quieter.
   ===================================================================== */
.is-subpage .page-hero.left { text-align: left; }
.is-subpage .page-hero.left .sub { margin-left: 0; }

/* Hero */
.jhero { position: relative; padding: 156px 0 96px; overflow: hidden; background: radial-gradient(70% 90% at 85% 10%, #E4F0EE 0%, rgba(228,240,238,0) 60%), radial-gradient(50% 60% at 0% 100%, #F4EFE6 0%, rgba(244,239,230,0) 70%), #fff; }
.jhero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.eyebrow-line { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); }
.eyebrow-line .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-mark); box-shadow: 0 0 0 4px rgba(32,128,141,.14); }
.jhero h1 { margin-top: 18px; font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.jhero .sub { margin-top: 20px; max-width: 32em; font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); }
.searchbar { display: flex; align-items: center; gap: 8px; margin-top: 36px; max-width: 600px; padding: 8px 8px 8px 20px; border: 1px solid #DCDAD3; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -30px rgba(17,20,20,.45); transition: border-color .2s, box-shadow .2s; }
.searchbar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(29,117,129,.12), 0 18px 40px -30px rgba(17,20,20,.45); }
.searchbar svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; }
.searchbar input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.0625rem; color: var(--ink); padding: 8px 0; }
.searchbar input::placeholder { color: #8C9292; }
.searchbar .pill { padding: 12px 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips a { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid #E2E0D9; font-size: .9375rem; color: var(--ink-2); text-decoration: none; transition: border-color .2s, color .2s, background-color .2s; }
.chips a:hover { border-color: var(--teal); color: var(--teal-deep); background: #fff; }
.chips .label { padding: 7px 4px 7px 0; font-size: .9375rem; color: var(--ink-3); }
.stack { position: relative; display: grid; gap: 14px; }
.stack .jobcard:nth-child(2) { margin-left: 28px; }
.stack .jobcard:nth-child(3) { margin-left: 56px; }
.stack-more { margin-top: 18px; padding-left: 56px; }

/* Job card */
.jobcard { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.jobcard:hover { transform: translateY(-2px); border-color: #CFE1DE; box-shadow: 0 22px 44px -30px rgba(17,20,20,.4); }
.jc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jc-logo { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-mist); color: var(--teal-deep); font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.jc-co { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 500; }
.jc-pick { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--bg-mist); color: var(--teal-deep); font-size: .75rem; font-weight: 500; }
.jc-arrow { margin-left: auto; flex: 0 0 auto; color: var(--ink-3); transition: transform .25s var(--ease), color .25s; }
.jobcard:hover .jc-arrow { transform: translate(2px, -2px); color: var(--teal); }
.jc-title { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.jc-facts { font-size: .9375rem; color: var(--ink-3); }
.jc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.jc-pay { padding: 4px 10px; border-radius: 999px; background: #E6F1EF; color: var(--teal-deep); font-size: .8125rem; font-weight: 600; }
.jc-tag { padding: 4px 10px; border-radius: 999px; background: #F3F2EE; color: var(--ink-2); font-size: .8125rem; }

/* Market band (home) */
.mband { padding: 72px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mband .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: end; }
.mstat .v { display: block; font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.035em; }
.mstat .l { display: block; margin-top: 10px; font-size: .9375rem; color: var(--ink-3); }
.mband .more { justify-self: end; }

/* Question cards (home) and rows (prep) */
.qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.qcard { display: flex; flex-direction: column; gap: 16px; min-height: 260px; padding: 28px; border-radius: var(--radius); background: var(--bg-soft); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.qcard:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(17,20,20,.38); }
.qcard .qc-topic { font-size: .875rem; color: var(--ink-3); }
.qcard .qc-q { font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.015em; }
.qcard .qc-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink-2); font-size: .8125rem; }
.badge--rubric { background: #E6F1EF; color: var(--teal-deep); font-weight: 500; }
.center-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 48px; }

/* Toolbar (jobs + prep) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tsearch { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 48px; border: 1px solid #DCDAD3; border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.tsearch:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(29,117,129,.12); }
.tsearch svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; }
.tsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #F1F0EC; }
.seg button { border: 0; background: transparent; font: inherit; font-size: .9375rem; color: var(--ink-2); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17,20,20,.12); }
.tselect { height: 48px; padding: 0 40px 0 18px; border: 1px solid #DCDAD3; border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236E7575' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; font: inherit; font-size: .9375rem; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.ttoggle { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); cursor: pointer; user-select: none; }
.ttoggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ttoggle .sw { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #DCDAD3; transition: background-color .2s; }
.ttoggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.ttoggle input:checked + .sw { background: var(--teal); }
.ttoggle input:checked + .sw::after { transform: translateX(16px); }
.ttoggle input:focus-visible + .sw { outline: 2px solid var(--teal); outline-offset: 3px; }
.tsummary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 22px 0 18px; font-size: .9375rem; color: var(--ink-3); }
.tsummary b { color: var(--ink); font-weight: 500; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--teal); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.jobgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.empty-state { padding: 56px 0; text-align: center; color: var(--ink-3); }
.loading { padding: 40px 0; color: var(--ink-3); }

.qlist li { border-top: 1px solid var(--line); }
.qlist li:last-child { border-bottom: 1px solid var(--line); }
.qlist a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 20px 4px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.qlist a:hover { background: var(--bg-soft); }
.qlist .qn { font-size: .875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qlist .qq { font-size: 1.0625rem; line-height: 1.45; }
.qlist .qmeta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.qlist .qmeta .badge { background: #F3F2EE; }
.qlist .qmeta .badge--rubric { background: #E6F1EF; }
.qlist .qgo { grid-row: 1; grid-column: 3; color: var(--ink-3); }

/* Market cards (jobs page) */
.mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mcard { padding: 28px 32px; border-radius: var(--radius); background: var(--bg-soft); }
.mcard h3 { font-size: 1.25rem; margin-bottom: 18px; }
.mbars li { display: grid; grid-template-columns: 128px minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 6px 0; font-size: .9375rem; }
.mbars .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mbars .trk { height: 8px; border-radius: 0 4px 4px 0; background: transparent; position: relative; }
.mbars .fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--teal-mark); }
.mbars .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.mbars .val small { margin-left: 6px; color: var(--ink-3); font-size: .8125rem; }
.mcard .note { margin-top: 14px; font-size: .875rem; color: var(--ink-3); }
details.sourcing { margin-top: 40px; padding: 22px 28px; border-radius: var(--radius); background: var(--bg-soft); }
details.sourcing summary { cursor: pointer; font-weight: 500; }
details.sourcing p { margin-top: 12px; color: var(--ink-2); }
.nudge2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 32px 36px; border-radius: var(--radius); background: var(--bg-mist); }
.nudge2 h3 { font-size: 1.5rem; }
.nudge2 p { margin-top: 6px; color: var(--ink-2); }

/* Join us live (home end) */
.live { padding-block: 140px; background: var(--ink); color: #fff; }
.live .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.live .label { font-size: .9375rem; font-weight: 500; color: #8FD1C6; }
.live h2 { margin-top: 14px; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.live .body { margin-top: 20px; max-width: 32em; font-size: 1.1875rem; color: #C9D0CF; }
.live .facts { margin-top: 28px; color: #C9D0CF; }
.live .facts b { color: #fff; }
.live .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.live .pill { background: #fff; color: var(--ink); }
.live .pill:hover { background: #E9EFEE; }
.live .small { color: #A9B2B1; font-size: .9375rem; }
.live blockquote { padding: 32px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.live blockquote p { font-size: 1.375rem; line-height: 1.4; letter-spacing: -0.015em; }
.live blockquote p::before { content: "\201C"; }
.live blockquote p::after { content: "\201D"; }
.live blockquote footer { margin-top: 18px; font-size: .9375rem; color: #A9B2B1; }
.live blockquote footer b { display: block; color: #fff; font-weight: 500; }

@media (max-width: 1000px) {
  .jhero .wrap { grid-template-columns: minmax(0, 1fr); }
  .stack .jobcard:nth-child(2), .stack .jobcard:nth-child(3) { margin-left: 0; }
  .stack-more { padding-left: 0; }
  .mband .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mband .more { justify-self: start; }
  .qcards { grid-template-columns: minmax(0, 1fr); }
  .qcard { min-height: 0; }
  .live .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .jhero { padding: 120px 0 64px; }
  .searchbar { padding-left: 16px; }
  .searchbar .pill { padding: 11px 16px; }
  .stack .jobcard:nth-child(3) { display: none; }
  .jobgrid { grid-template-columns: minmax(0, 1fr); }
  .mband .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .seg { width: 100%; overflow-x: auto; }
  .seg button { flex: 1 0 auto; padding: 8px 12px; }
  .tselect { flex: 1 1 auto; }
  .qlist a { grid-template-columns: 36px minmax(0, 1fr); }
  .qlist .qgo { display: none; }
  .mbars li { grid-template-columns: 104px minmax(0, 1fr) 56px; }
  .mcard { padding: 24px 22px; }
  .live { padding-block: 96px; }
  .nudge2 { padding: 26px 24px; }
}

/* Header nav on phones: the sections matter more than the pill */
@media (max-width: 720px) {
  .site-header .pill { display: none; }
  .nav { display: flex; gap: 18px; font-size: .9375rem; }
}

/* Light hero on the home page: dark header text from the start, solid once you scroll. */
.is-light-hero .site-header { color: var(--ink); }
.is-light-hero .site-header .pill { background: var(--teal); color: #fff; }
.is-light-hero .site-header .pill:hover { background: var(--teal-deep); }
.page-hero.left { padding: 152px 0 24px; }
.page-hero.left .actions { justify-content: flex-start; }
.page-hero.left h1 { max-width: 16ch; }
.door--white { background: #fff; }
.label-sm { font-size: .9375rem; font-weight: 500; color: var(--teal); }
.note a { text-decoration: none; }
.note a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .page-hero.left { padding-top: 120px; } }
/* Review: cards in the hero stack sit aligned, and the market row aligns at the top. */
.stack .jobcard:nth-child(2), .stack .jobcard:nth-child(3) { margin-left: 0; }
.stack-more { padding-left: 0; }
.mband .wrap { align-items: start; }
.mband .more { align-self: center; }

/* Review: the toolbar comes right after a left-aligned page hero. */
.page-hero.left + .block { padding-top: 48px; }

/* Illustrations: fine ink drawings with people and loose watercolour (traversaal coral, FDEBench teal, sand, mint), on transparent backgrounds (assets/img/art). */
.page-hero.has-art { overflow-x: clip; }
.page-hero.has-art .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: center; }
.page-hero.has-art .sub { max-width: 30em; }
/* Each image has empty margin, so the drawing spreads past its column to read at full size (less at the bottom, to clear the next section). */
.hero-art { display: block; width: 122%; max-width: none; height: auto; margin: -64px -11% -16px; }
.sec-art { display: block; width: min(440px, 86%); height: auto; margin: 0 auto 24px; }
.live-side { display: grid; gap: 4px; }
.live-art { display: block; justify-self: center; width: min(440px, 100%); height: auto; }
@media (max-width: 860px) {
  .page-hero.has-art .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
}
@media (max-width: 720px) {
  .sec-art { width: min(320px, 80%); margin-bottom: 16px; }
  .live-art { width: min(300px, 80%); }
}
/* The drawing brings its own white space, so the section above it needs less. */
.sec:has(.sec-art) { padding-top: 96px; }
@media (max-width: 720px) { .sec:has(.sec-art) { padding-top: 64px; } }

/* Cursor grid (assets/cursor-grid.js): a notebook dot grid in teal shows through in a soft circle that trails the pointer,
   and fades out when the pointer leaves the hero. Mouse and trackpad only; nothing on touch or with reduced motion. */
.cursor-grid { position: relative; isolation: isolate; }
.cursor-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--teal) 1.2px, transparent 1.8px);
  background-size: 24px 24px; background-position: 12px 12px;
  opacity: 0; transition: opacity .6s var(--ease);
  -webkit-mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.45) 38%, transparent 72%);
          mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.45) 38%, transparent 72%);
}
.cursor-grid.is-pointing::before { opacity: .55; }
.cursor-grid > .wrap { position: relative; }

/* Latest roles: the home page's second section. Six of the newest roles (one per company, not the hero's picks), then the market figures. */
.latest { padding: 88px 0 96px; border-top: 1px solid var(--line); }
.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.latest-grid .jobcard { height: 100%; }
.latest-grid .jc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest-market { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .latest { padding: 64px 0 72px; }
  .latest-grid { grid-template-columns: minmax(0, 1fr); }
  .latest-grid .jobcard:nth-child(n+5) { display: none; }
  .latest-market { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 40px; padding-top: 32px; }
}

/* Home hero, after traversaal.ai/fde: a two-part statement with highlighted verbs, three ways in, the credential line,
   and the drawing on a soft coral disc over a faint dot grid. No jobs here; they start in Latest roles below. */
.jhero { isolation: isolate; padding: 148px 0 112px; }
.jhero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, #CFD2D8 1.1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 74% 46%, #000 10%, transparent 72%); mask-image: radial-gradient(60% 70% at 74% 46%, #000 10%, transparent 72%); }
.jhero h1 .l2 { display: block; }
.jhero h1 .hl { padding: 0 .1em; margin: 0 -.02em; border-radius: .14em; background: #CFE8E3; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.jhero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.jhero .creds { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 34em; font-size: .9375rem; line-height: 1.55; color: var(--ink-3); }
.jhero .creds b { color: var(--ink); font-weight: 500; }
.jhero-visual { position: relative; }
.jhero-disc { position: absolute; z-index: -1; right: 2%; top: 50%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #FBE1D8; transform: translateY(-50%); }
.jhero-ring { position: absolute; z-index: -1; left: 4%; bottom: -16%; width: 44%; aspect-ratio: 1; border: 1px solid rgba(17,20,20,.3); border-radius: 50%; }
.jhero-art { position: relative; display: block; width: 116%; max-width: none; height: auto; margin: 0 -8%; }
.latest .eyebrow-line { margin-bottom: 14px; }
@media (max-width: 860px) { .jhero-visual { display: none; } .jhero { padding-bottom: 72px; } }

/* Rounds show (assets/rounds.js), after emote.agency's "Our approach": on wide screens the four rounds become tabs with one
   drawing per round, and a teal bar fills under the playing round. Under 861px and without JS it stays the plain list above. */
.rounds-art, .rounds-tabs, .rounds-toggle { display: none; }
.rounds-show.is-tabs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.is-tabs .rounds-art { display: block; position: relative; aspect-ratio: 3 / 2; }
.rounds-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rounds-art img.is-on { opacity: 1; transform: none; }
.is-tabs .rounds-head { display: none; }
.is-tabs .rounds-tabs { display: flex; flex-direction: column; margin-bottom: 24px; }
.rounds-tab { position: relative; display: block; width: 100%; padding: 12px 0 16px; border: 0; background: none; color: #A3A9A8; font: inherit; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; text-align: left; cursor: pointer; transition: color .3s; }
.rounds-tab:hover { color: var(--ink-2); }
.rounds-tab[aria-selected="true"] { color: var(--ink); }
.rounds-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
.rounds-tab .bar { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s; }
.rounds-tab[aria-selected="true"] .bar { opacity: 1; }
.rounds-tab .bar::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.rounds-tab[aria-selected="true"] .bar::after { animation: rounds-fill 7s linear forwards; animation-play-state: paused; }
.is-playing .rounds-tab[aria-selected="true"] .bar::after { animation-play-state: running; }
.is-stopped .rounds-tab[aria-selected="true"] .bar::after { animation: none; transform: none; }
@keyframes rounds-fill { to { transform: scaleX(1); } }
.is-tabs .rounds li { display: block; min-height: 9.5em; padding: 0; border: 0; }
.is-tabs .rounds li:last-child { border: 0; }
.is-tabs .rounds li[hidden] { display: none; }
.is-tabs .rounds h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-tabs .rounds .fw { font-size: 1.1875rem; animation: rounds-in .6s var(--ease) both; }
.is-tabs .rounds .say { margin-top: 18px; animation: rounds-in .6s var(--ease) .1s both; }
.is-tabs .rounds .fw::before, .is-tabs .rounds .say::before { display: block; margin-bottom: 4px; font-size: .875rem; color: var(--ink-3); }
.is-tabs .rounds .fw::before { content: "The framework"; }
.is-tabs .rounds .say::before { content: "What it sounds like"; }
@keyframes rounds-in { from { opacity: 0; transform: translateY(8px); } }
.is-tabs .rounds-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 7px 14px; border: 1px solid #CFCDC6; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: .875rem; cursor: pointer; }
.rounds-toggle:hover { background: var(--bg-soft); }
.rounds-toggle .ico { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.is-stopped .rounds-toggle .ico { width: 0; height: 0; border-right: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
@media (prefers-reduced-motion: reduce) { .rounds-art img, .is-tabs .rounds .fw, .is-tabs .rounds .say { transition: none; animation: none; } }
@media (max-width: 860px) { .jhero-grid { display: none; } }

/* =====================================================================
   Review fixes, round 2 (3 Nov review: six lenses, each finding reproduced by a skeptic).
   ===================================================================== */
/* The hidden attribute always wins (.pill and other display rules used to override it: "Show more (0 left)"). */
[hidden] { display: none !important; }

/* Contrast: small gray text passes 4.5:1 on the soft and mist panels too; form borders and switch tracks pass 3:1. */
:root { --ink-3: #646B6B; }
.tsearch input::placeholder, .searchbar input::placeholder { color: #6B7171; }
.tsearch, .tselect { border-color: #8F8C84; }
.ttoggle .sw { background: #ECEAE4; box-shadow: inset 0 0 0 1px #8F8C84; }
.ttoggle .sw::after { box-shadow: 0 0 0 1px #8F8C84; }
.ttoggle input:checked + .sw, .ttoggle input:checked + .sw::after { box-shadow: none; }
.seg button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.seg button:focus-visible { outline-offset: -3px; }
.ttoggles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; flex: 0 0 auto; }
@media (forced-colors: active) {
  .seg button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ttoggle .sw { border: 1px solid ButtonText; background: Canvas; }
  .ttoggle .sw::after { background: ButtonText; }
  .ttoggle input:checked + .sw { background: Highlight; }
  .ttoggle input:checked + .sw::after { background: HighlightText; }
}

/* Header: the nav sits on the page's centre line, and "Join us live" (priority four) is an outline,
   so each page's own primary button leads. */
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header .pill { justify-self: end; }
.site-header .pill, .is-light-hero .site-header .pill, .site-header.is-solid .pill, .is-subpage .site-header .pill { background: transparent; color: inherit; border-color: #B9B6AE; }
.site-header .pill:hover, .is-light-hero .site-header .pill:hover, .site-header.is-solid .pill:hover, .is-subpage .site-header .pill:hover { background: var(--bg-soft); }
.nav a { white-space: nowrap; }
@media (max-width: 720px) { .site-header .wrap { display: flex; } }
@media (max-width: 360px) { .nav { gap: 12px; } }

/* Footer column titles and the jobs nudge are h2 now (heading order), with the same look as before. */
.foot-top h2 { margin: 0 0 12px; font-size: .875rem; font-weight: 500; letter-spacing: 0; line-height: 1.6; color: var(--ink); }
.foot-top .brand { display: block; line-height: 1.6; }
.nudge2 h2 { font-size: 1.5rem; line-height: 1.2; }

/* Home: the free course as a tile (the old screenshot carried a webcam frame), its label in teal, its heading an h2. */
.door .label-sm { color: var(--teal); font-size: .9375rem; font-weight: 500; }
.door--wide h2 { font-size: clamp(2rem, 3vw, 2.625rem); line-height: 1.15; }
.shot--tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; aspect-ratio: 16 / 9; padding: 36px;
  background: radial-gradient(120% 120% at 0% 0%, #D9ECEB 0%, #EEF5F4 45%, #F7FAF9 100%); }
.shot--tile .tile-big { font-size: clamp(3rem, 5.5vw, 4.75rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.shot--tile .tile-small { max-width: 26em; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }

/* Job cards: tag rows sit at the bottom of every card; on phones a long company name wraps instead of being cut. */
.jobgrid .jc-foot, .latest-grid .jc-foot { margin-top: auto; }

/* Market cards: values get the width they need, rows start at the top, notes align with the bars. */
.mcards { align-items: start; }
.mbars li { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) max-content; }
.mcard .note { text-align: left; }

/* Text: an eyebrow never touches its headline; centred subheads balance; long question rows stop at a readable measure. */
.page-hero .eyebrow-line + h1 { margin-top: 18px; }
.sec-head .sub, .final .sub { text-wrap: balance; }
.qlist .qq, .bank-src { max-width: 72ch; }

/* Talks and reads: one fixed action column, so every row lines up. */
.rows a { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 128px; }
.rows .g { justify-self: end; }

/* Disclosures look like controls: a teal plus that turns into a cross when open. */
details.sourcing summary, details.table-view summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
details.sourcing summary::-webkit-details-marker, details.table-view summary::-webkit-details-marker { display: none; }
details.sourcing summary::after, details.table-view summary::after { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--teal); font-size: 1.0625rem; line-height: 1; transition: transform .3s var(--ease); }
details.table-view summary { color: var(--teal); }
details.table-view summary::after { background: var(--bg-soft); }
details.sourcing[open] summary::after, details.table-view[open] summary::after { transform: rotate(45deg); }

/* The seven moves on phones: each move carries its minutes on the clock, since the axis is far below. */
.g-when { display: none; margin-left: 8px; font-size: .8125rem; color: var(--ink-3); }
.g-when::before { content: "· "; }

@media (max-width: 1000px) {
  .books { grid-template-columns: minmax(0, 1fr); }
  .book { align-items: start; }
}
@media (max-width: 720px) {
  .tselect { font-size: 1rem; } /* 16px, so iOS Safari does not zoom the page on focus */
  .jc-top { flex-wrap: wrap; row-gap: 6px; }
  .jc-co { white-space: normal; }
  .mbars li { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) max-content; }
  .rows a { grid-template-columns: minmax(0, 1fr); }
  .rows .g { justify-self: start; }
  .live .facts { flex-direction: column; gap: 6px; }
  .book { grid-template-columns: minmax(0, 1fr); }
  details.table-view th, details.table-view td { padding: 8px 10px; }
  details.table-view table { width: 100%; }
  .g-when { display: inline; }
}

/* Page-hero actions: a text link next to a pill sits on the pill's centre line. */
.page-hero .actions { align-items: center; }
/* Phones: when a long company name and its badge wrap, the arrow stays in the card's top-right corner. */
@media (max-width: 720px) {
  .jobcard { position: relative; }
  .jc-top { padding-right: 26px; }
  .jc-arrow { position: absolute; top: 30px; right: 22px; margin: 0; }
}

/* Latest roles into "Prepare for the interview": the two sections' padding plus the drawing's own empty margin left a blank band. */
.latest { padding-bottom: 40px; }
.latest + .sec:has(.sec-art) { padding-top: 24px; border-top: 0; }
.sec-art { margin-top: -8px; }
@media (max-width: 720px) { .latest { padding-bottom: 32px; } .latest + .sec:has(.sec-art) { padding-top: 16px; } }

/* Bigger home hero drawing: an even split with the headline, and the art spreads into its own empty margin. */
.jhero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.jhero-art { width: 132%; margin: -40px -12% -40px -20%; }
.jhero-disc { width: 82%; right: -4%; }
.jhero-ring { left: -2%; bottom: -10%; width: 40%; }
.jhero .actions { column-gap: 18px; }
.jhero-art { width: 124%; margin: -36px -18% -36px -6%; }

/* =====================================================================
   Review fixes, round 3 (the regression check after round 2).
   ===================================================================== */
/* Home hero: one column wherever its drawing is hidden (860px and below). */
@media (max-width: 860px) { .jhero .wrap { grid-template-columns: minmax(0, 1fr); } }
/* Free-course tile on phones: the content sets the height, so "55 chapters" is never clipped. */
@media (max-width: 720px) {
  .shot--tile { aspect-ratio: auto; padding: 24px; }
  .shot--tile .tile-big { font-size: 2.5rem; }
}
/* Market bars share one scale: every row uses the list's three columns, and long company names wrap. */
.mbars { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) max-content; column-gap: 12px; }
.mbars li { grid-column: 1 / -1; grid-template-columns: subgrid; }
.mbars .lbl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
@media (max-width: 720px) { .mbars { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) max-content; } }
/* The bank's source note gets room under "Show more questions". */
.bank-src { margin-top: 32px; }
/* Button elements use the page's typeface (form controls do not inherit it by default). */
.pill { font-family: inherit; }
/* Eyebrow lines: when the text wraps, the dot stays on the first line and stays round. */
.eyebrow-line { align-items: flex-start; }
.eyebrow-line .dot { flex: 0 0 auto; margin-top: .6em; }
/* Round tabs: unselected tabs pass 4.5:1 (selected stays ink and keeps its teal bar). */
.rounds-tab { color: var(--ink-3); }
/* The disclosure plus is decoration, so screen readers skip it. */
details.sourcing summary::after, details.table-view summary::after { content: "+"; content: "+" / ""; }
/* Forced colours: chart bars and the selected round keep a visible mark. */
@media (forced-colors: active) {
  .g-bar, .mbars .fill { forced-color-adjust: none; background: CanvasText; }
  .g-bar.is-key { background: Highlight; }
  .rounds-tab .bar { forced-color-adjust: none; background: CanvasText; }
}

/* Header: Jobs · Prep · Blog · Free course. "Join us live" glows: a soft halo of FDEBench teal and traversaal coral turns
   slowly behind a solid white pill, so the text never sits on the colour. Static with reduced motion; hidden on phones as before. */
.site-header .brand { justify-self: start; }
@property --glow-turn { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.site-header .pill.pill--glow, .is-light-hero .site-header .pill.pill--glow, .site-header.is-solid .pill.pill--glow, .is-subpage .site-header .pill.pill--glow {
  position: relative; background: #fff; color: var(--ink); border-color: rgba(17, 20, 20, .08);
}
.site-header .pill--glow::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--glow-turn), #1D7581, #FF6A4D, #8FD1C6, #FF6A4D, #1D7581);
  filter: blur(8px); opacity: .5; animation: glow-turn 8s linear infinite; transition: opacity .3s;
}
.site-header .pill--glow:hover::before, .site-header .pill--glow:focus-visible::before { opacity: .85; }
@keyframes glow-turn { to { --glow-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .site-header .pill--glow::before { animation: none; } }
@media (forced-colors: active) { .site-header .pill--glow::before { display: none; } }
@media (max-width: 420px) { .nav { gap: 14px; font-size: .875rem; } }
@media (max-width: 350px) { .nav { gap: 10px; font-size: .8125rem; } .site-header .brand { font-size: .9375rem; } }

/* =====================================================================
   Jobs first, the rubric demo, FAQ and the blog (fdebench-26).
   ===================================================================== */

/* Home hero: the job search is the first action; prep, the free course and "join us live" follow as text links. */
/* The longer jobs-first headline sits on three lines at desktop widths ("Land a forward deployed / engineer job. / We teach you how."). */
.jhero h1 { font-size: clamp(2.5rem, 3.9vw, 3.5rem); line-height: 1.06; }
.jhero .searchbar { margin-top: 32px; max-width: 580px; }
.jhero .searchbar + .actions { margin-top: 22px; gap: 10px 26px; }
@media (max-width: 520px) {
  .jhero .searchbar { padding-left: 16px; }
  .jhero .searchbar .pill { padding: 11px 16px; }
  .jhero .searchbar .pill .arr { display: none; }
}

/* Job cards say where you apply: the card opens the listing. */
.jc-apply { margin-left: auto; flex: 0 0 auto; font-size: .8125rem; font-weight: 500; color: var(--teal); white-space: nowrap; }
.jc-apply span { display: inline-block; transition: transform .25s var(--ease); }
.jobcard:hover .jc-apply span { transform: translate(2px, -2px); }
@media (max-width: 720px) {
  .jc-top { padding-right: 62px; }
  .jc-apply { position: absolute; top: 31px; right: 22px; margin: 0; }
}

/* Pre-rendered lists (build_data.py): every question is in the HTML for crawlers; with JS on, only the first page shows
   until prep.js swaps in the live list (if the data fails to load, all rows show). */
.js:not(.no-data) .qlist .pre-more { display: none; }

/* Home: the "how one question is scored" film (a mock interview and the interviewer's scorecard), with a one-line caption. */
.prep-film { margin: 0 auto 48px; max-width: 1120px; }
.prep-film video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 914; background: #fff; }
.prep-film figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; margin-top: 8px; text-align: center; color: var(--ink-3); font-size: .9375rem; }

/* FAQ: on the jobs, prep and learn pages and at the end of each post. build_site.py reads these for FAQPage data. */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 4px; cursor: pointer; list-style: none; font-size: 1.125rem; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: 0 0 auto; font-size: 1.375rem; line-height: 1; color: var(--teal); transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--teal-deep); }
.faq-a { max-width: 46em; padding: 0 4px 24px; color: var(--ink-2); }
.faq-a p + p { margin-top: 12px; }
.faq-a a { color: var(--teal-deep); text-underline-offset: 3px; }

/* Blog: the index uses .rows; a post is one readable column. */
.post { padding: 148px 0 72px; }
.post-col { max-width: 720px; margin: 0 auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .9375rem; color: var(--ink-3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--teal); }
.post h1 { margin-top: 20px; font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.035em; }
.post-meta { margin-top: 18px; font-size: .9375rem; color: var(--ink-3); }
.post-meta a { text-decoration: none; color: var(--ink-2); }
.answer { margin-top: 36px; padding: 24px 28px; border-radius: var(--radius-sm); background: var(--bg-mist); }
.answer-label { margin-bottom: 6px; font-size: .875rem; font-weight: 500; color: var(--teal-deep); }
.answer p:last-child { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }
.answer a { color: var(--teal-deep); }
.prose { margin-top: 40px; font-size: 1.125rem; line-height: 1.7; color: #232828; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.1em; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; color: var(--ink); scroll-margin-top: 96px; }
.prose h3 { margin-top: 1.7em; font-size: 1.25rem; line-height: 1.3; scroll-margin-top: 96px; }
.prose h2 + *, .prose h3 + * { margin-top: .65em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--teal); }
.prose a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--teal); }
.prose strong { font-weight: 600; }
.prose blockquote { padding-left: 20px; border-left: 2px solid var(--teal-mark); color: var(--ink-2); }
.prose blockquote p + p { margin-top: .8em; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--bg-soft); font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: .86em; }
.prose .table-wrap { margin-block: 1.6em; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .96875rem; line-height: 1.45; }
.prose th { padding: 10px 16px 10px 0; border-bottom: 1px solid #CFCDC6; text-align: left; font-weight: 500; color: var(--ink); vertical-align: bottom; }
.prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.prose td:first-child { color: var(--ink); }
.post-jobs { margin-top: 36px; }
.post-practice { margin-top: 64px; }
.post-practice h2, .post-faq h2 { font-size: 1.5rem; line-height: 1.2; }
.post-practice-sub { margin: 8px 0 20px; font-size: .9375rem; color: var(--ink-3); }
.post-practice .qlist a { grid-template-columns: 40px minmax(0, 1fr) auto; }
.post-practice-more { margin-top: 20px; }
.post-faq { margin-top: 64px; }
.post-faq h2 { margin-bottom: 16px; }
.post-source { margin-top: 48px; font-size: .875rem; line-height: 1.55; color: var(--ink-3); }
.post-source a { color: inherit; }
.post-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-next > span { font-size: .9375rem; color: var(--ink-3); }
.post-next a { font-size: 1.125rem; letter-spacing: -0.01em; text-decoration: none; }
.post-next a:hover { color: var(--teal); }
.final .actions .text-link { align-self: center; }
@media (max-width: 720px) {
  .post { padding: 116px 0 48px; }
  .prose { font-size: 1.0625rem; }
  .answer { padding: 20px 22px; }
}

/* Join us live: the course page on Maven, in a quiet browser frame (Hamza's request), above Kurt's quote. */
.live-shot { position: relative; display: flex; flex-direction: column-reverse; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); transition: transform .4s var(--ease); }
.live-shot:hover { transform: translateY(-3px); }
.live-shot img { width: 100%; height: auto; }
.live-shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: #F1F0EC; border-bottom: 1px solid #E2E0D9; font-size: .75rem; color: var(--ink-3); }
.live-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9D6CE; }
.live-shot-bar span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-side:has(.live-shot) { gap: 20px; }

/* Home: the market row under Latest roles. Three figures, each with a small chart from the same snapshot (build_data.py);
   teal marks the figure's own bar, gray the rest. The charts grow and the figures count up as the row scrolls in. */
.latest-market { display: block; margin-top: 56px; padding-top: 0; border-top: 0; }
.mt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; font-size: .9375rem; color: var(--ink-3); }
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mtile { display: flex; flex-direction: column; padding: 26px 28px 24px; border-radius: 20px; background: var(--bg-soft); }
.mt-v { font-size: clamp(2.25rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.035em; }
.mt-l { margin-top: 8px; font-size: .9375rem; color: var(--ink-3); }
.mt-cols, .mt-seg, .mt-bars { margin-top: auto; padding-top: 24px; }
/* Pay by level: five thin columns from one baseline, labels under them. */
.mt-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 8px; height: 132px; border-bottom: 0; }
.mt-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: default; }
.mt-col i { display: block; width: min(22px, 70%); height: var(--h); border-radius: 4px 4px 0 0; background: var(--gray-mark); transform-origin: 50% 100%; transition: transform .9s var(--ease); }
.mt-col.is-key i { background: var(--teal-mark); }
.mt-col b { margin-top: 8px; font-size: .75rem; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.mt-col.is-key b { color: var(--ink); }
/* Where the roles are: one thin segmented bar, 2px surface gaps, names and shares in the legend under it. */
.mt-seg { display: flex; gap: 2px; height: calc(24px + 10px); align-items: flex-end; }
.mt-seg i { display: block; flex: var(--w) 1 0; height: 10px; border-radius: 5px; background: var(--gray-mark); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.mt-seg i.is-key { background: var(--teal-mark); }
.mt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: .8125rem; color: var(--ink-3); }
.mt-legend .is-key { color: var(--ink); }
/* Skills asked for most: four short bars, the top one in teal. */
.mt-bars li { display: grid; grid-template-columns: 82px minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding: 4px 0; font-size: .8125rem; color: var(--ink-3); }
.mt-bars li.is-key { color: var(--ink); }
.mt-trk { position: relative; height: 8px; cursor: default; }
.mt-trk i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 0 4px 4px 0; background: var(--gray-mark); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.mt-bars li.is-key .mt-trk i { background: var(--teal-mark); }
.mt-n { text-align: right; font-variant-numeric: tabular-nums; }
/* Growth: only when JS runs (the reveal class), staggered a little per mark. */
.js .latest-market.reveal:not(.is-in) .mt-col i { transform: scaleY(0); }
.js .latest-market.reveal:not(.is-in) .mt-seg i, .js .latest-market.reveal:not(.is-in) .mt-trk i { transform: scaleX(0); }
.mt-col:nth-child(2) i, .mt-seg i:nth-child(2), .mt-bars li:nth-child(2) i { transition-delay: 80ms; }
.mt-col:nth-child(3) i, .mt-seg i:nth-child(3), .mt-bars li:nth-child(3) i { transition-delay: 160ms; }
.mt-col:nth-child(4) i, .mt-seg i:nth-child(4), .mt-bars li:nth-child(4) i { transition-delay: 240ms; }
.mt-col:nth-child(5) i { transition-delay: 320ms; }
.latest-market.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mt-col i, .mt-seg i, .mt-trk i { transition: none; } }
@media (max-width: 900px) { .mtiles { grid-template-columns: minmax(0, 1fr); } .mt-cols { height: 110px; } }
@media (max-width: 720px) { .latest-market { margin-top: 40px; padding-top: 0; } }

/* Jobs hero: the employer's way in, one quiet line under the subhead. */
.page-hero .hire { margin-top: 18px; font-size: .9375rem; color: var(--ink-3); }
/* Phones: wide comparison tables keep readable columns and scroll inside their own box (the page never scrolls sideways). */
@media (max-width: 720px) {
  .prose .table-wrap { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .prose table { min-width: 560px; font-size: .875rem; }
}

/* Home: free talks (after fde.traversaal.ai's "Sessions with industry experts"). Speaker photo cards, four across,
   a "coming up" line that removes itself after its date (data-until), and a last tile to all sessions. */
.talks { padding-block: 120px; border-top: 1px solid var(--line); }
.talks-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; margin-bottom: 36px; }
.talks-head h2 { max-width: 20ch; font-size: clamp(2rem, 3.6vw, 3.125rem); line-height: 1.08; }
.talks-head p { color: var(--ink-2); margin-bottom: 8px; }
.talk-next { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 16px 20px 16px 16px; border-radius: 20px; background: #FCEDE8; color: var(--ink); text-decoration: none; transition: background-color .25s; }
.talk-next:hover { background: #F9E2DA; }
.talk-next img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.talk-next .tn-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; color: var(--ink-2); }
.talk-next .tn-text b { font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.talk-next .pill { flex: 0 0 auto; background: #FF6A4D; border-color: #FF6A4D; color: #fff; }
.video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.video { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--bg-soft); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.video:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(17,20,20,.4); }
.v-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #E9E7E1; }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video:hover .v-thumb img { transform: scale(1.04); }
.v-len { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; border-radius: 999px; background: rgba(17,20,20,.8); color: #fff; font-size: .75rem; line-height: 1; }
.v-play { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.v-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: 16px 18px 18px; }
.v-title { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; }
.v-who { font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.video .go { margin-top: auto; padding-top: 10px; font-size: .875rem; font-weight: 500; color: var(--teal); }
.maven-row { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.mr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; font-size: .9375rem; color: var(--ink-3); }
.mr-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.mr-list a { display: flex; align-items: center; gap: 12px; padding: 8px; margin: -8px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background-color .25s; }
.mr-list a:hover { background: var(--bg-soft); }
.mr-list img { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.mr-list b { display: block; font-size: .9375rem; font-weight: 400; line-height: 1.3; }
.mr-list small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 1000px) { .video-grid, .mr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .video-grid, .mr-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .talks { padding-block: 80px; }
  .talks-head { grid-template-columns: minmax(0, 1fr); }
  .talk-next { flex-wrap: wrap; }
  .talk-next .pill { margin-left: 64px; }
  .talk-body { padding: 14px 14px 16px; }
  .talk-title { font-size: .9375rem; }
}

/* Blog index: each post is a card with its drawing (assets/img/blog/<slug>.webp, or its stage's drawing until it has one). */
.post-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
.post-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(17,20,20,.35); border-color: #DAD8D1; }
.pc-art { display: block; aspect-ratio: 3 / 2; background: var(--bg-soft); overflow: hidden; }
.pc-art img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.06); transition: transform .6s var(--ease); }
.post-card:hover .pc-art img { transform: scale(1.1); }
.pc-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 20px 22px 22px; }
.pc-meta { font-size: .8125rem; color: var(--ink-3); }
.pc-title { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.pc-desc { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .go { margin-top: auto; padding-top: 6px; font-size: .9375rem; font-weight: 500; color: var(--teal); }
.post-art { margin: 32px 0 0; border-radius: var(--radius); background: var(--bg-soft); overflow: hidden; }
.post-art img { width: 100%; height: auto; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }

/* Job cards in their company's colors (Hamza: "more colorful boxes, based on the company logo or feel").
   --brand comes from the logo (scripts/fetch_logos.py); the card takes a light wash of it, the logo sits on white. */
.jobcard { --brand: #1D7581; --brand-ink: color-mix(in srgb, var(--brand) 55%, #000); background: color-mix(in srgb, var(--brand) 11%, #fff); border-color: color-mix(in srgb, var(--brand) 26%, #E7E5DF); }
.jobcard:hover { border-color: color-mix(in srgb, var(--brand) 50%, #E7E5DF); box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--brand) 55%, transparent); }
.jc-logo { background: color-mix(in srgb, var(--brand) 22%, #fff); color: var(--brand-ink); }
.jc-logo.has-img { padding: 5px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, #E7E5DF); }
.jc-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.jobcard .jc-pick { background: #fff; color: var(--brand-ink); }
.jobcard .jc-tag { background: rgba(255, 255, 255, .72); }
.jobcard .jc-pay { background: #fff; color: var(--brand-ink); }
.jobcard .jc-apply { color: var(--brand-ink); }
@media (forced-colors: active) { .jobcard { background: Canvas; } }

/* Phones and tablets: the hero drawings come back, compact and above the headline (they were hidden under 861px).
   Sized so the headline and the job search still sit in the first screen; the text paints above the drawing's margin. */
@media (max-width: 860px) {
  .jhero { padding-top: 84px; }
  .jhero .wrap { display: flex; flex-direction: column; gap: 0; }
  .jhero .wrap > div:first-child { position: relative; z-index: 1; }
  .jhero-visual { display: block; order: -1; width: min(400px, 88%); margin: 0 auto 4px; }
  .jhero-art { width: 100%; margin: 0; }
  .jhero-disc { width: 62%; right: 10%; }
  .jhero-ring { width: 28%; left: 4%; bottom: 0; }
  .jhero h1 { margin-top: 0; }
  .page-hero.has-art { padding-top: 88px; }
  .page-hero.has-art .wrap { display: flex; flex-direction: column; }
  .page-hero.has-art .hero-copy { position: relative; z-index: 1; }
  .page-hero.has-art .hero-art { display: block; order: -1; width: min(380px, 86%); max-width: none; margin: -8px auto -20px; }
}