/* Homepage (v8). Ported from the design export in scratch/export-v8; values
   are the design's own. styles.css still supplies the tokens, the header menu
   and the cookie banner; everything homepage-specific lives here. */

html:has(body.home), body.home { background: #0d0c0b; }
/* The design system's base type, which the design's inline values assume. */
body.home { color: #f3f2f2; font-size: 15px; line-height: 1.55; }
:where(.home) :where(h1, h2, h3) { line-height: 1.12; letter-spacing: -0.015em; }
:where(.home) a { text-underline-offset: 3px; }
.home a:hover { color: var(--color-process-yellow); }

@keyframes clive-caret { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes clive-pulse { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
@keyframes clive-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes clive-fade { from { opacity: 0; } to { opacity: 1; } }

.h-kicker { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #6e6a63; }

.h-btn {
  display: inline-flex; align-items: center; gap: 10px; background: #edbb00; color: #0d0c0b;
  text-decoration: none; font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 8px; white-space: nowrap;
}
.home .h-btn:hover { background: #ffd21f; color: #0d0c0b; }

/* ============ Hero ============ */
.h-hero { position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: #0d0c0b; color: #f3f2f2; }
.h-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; z-index: 0; }
.h-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,11,10,0.62) 0%, rgba(12,11,10,0.30) 38%, rgba(12,11,10,0.52) 70%, rgba(13,12,11,0.9) 88%, #0d0c0b 100%);
}
.h-hero-field { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.h-hero-field span {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-body); font-style: italic;
  line-height: 1.2; text-shadow: 0 1px 12px rgba(10,9,8,0.6); will-change: transform; transition: opacity 700ms ease; opacity: 0;
}
@media (max-width: 699px) {
  .h-hero-field span { white-space: normal; width: max-content; max-width: min(210px, 56vw); text-align: center; text-wrap: balance; }
}
.h-hero-frame { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 32px 36px; }
.home .site-header { gap: 10px; }
/* The design's header links use the design system's .btn type. No display
   value here: styles.css hides .nav-link on phones for the menu button. */
.home .nav-link, .home .nav-signin { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; }
.home .nav-link { font-size: 15px; }
.home .nav-link:hover { color: #fff; }
.home .site-nav { gap: 15px; }
.home .nav-signin { font-size: 15px; padding: 9px 16px; border-radius: 8px; }
.home .nav-signin:hover { color: #f3f2f2; }
.h-hero-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 0; }
.h-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 100%; }
.h-hero-title {
  margin: 0; width: 100%; font-size: clamp(40px, 5.2vw, 84px); line-height: 1.06; letter-spacing: -0.025em;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(10,9,8,0.45);
  animation: clive-hero-in 1000ms cubic-bezier(.22,.61,.36,1) 200ms both;
}
.h-hero-sub {
  max-width: 30em; margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.5; color: rgba(243,242,242,0.82);
  text-wrap: pretty; animation: clive-hero-in 1000ms cubic-bezier(.22,.61,.36,1) 500ms both;
}
.h-hero-ctas { display: flex; align-items: center; gap: 15px; margin-top: 15px; animation: clive-hero-in 1000ms cubic-bezier(.22,.61,.36,1) 760ms both; }
.h-link-under { font-size: 15px; color: rgba(243,242,242,0.82); text-decoration: none; border-bottom: 1px solid rgba(243,242,242,0.35); padding-bottom: 2px; }
.home .h-link-under:hover { color: #fff; border-bottom-color: #fff; }

/* ============ First job ============ */
/* --p is the seam progress (0 to 1) as How it works scrolls in; home.js sets it. */
/* Light behind How it works: as live data rises over it, the section shrinks
   and fades towards this, as in the design (whose page ground was light). */
.h-seam { --p: 0; background: #f3f2f2; }
.h-first {
  position: relative; overflow: clip; background: #0d0c0b; color: #f3f2f2;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px) clamp(96px, 12vw, 180px);
}
.h-first[hidden] { display: none; }
.h-first-copy {
  max-width: 1480px; margin: 0 auto;
  opacity: 0; transform: translateY(40px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.22,.61,.36,1);
}
.h-first-copy.is-in { opacity: 1; transform: translateY(0); }

/* ============ Fresh off the press (#2114, design v8.3) ============ */
.h-fresh-date { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #edbb00; }
.h-fresh-date:empty { display: none; }
.h-fresh-lede {
  margin: 0 0 clamp(40px, 5vw, 72px); max-width: 1100px; font-family: var(--font-heading); font-size: clamp(24px, 3vw, 48px);
  line-height: 1.25; letter-spacing: -0.015em; color: #6e6a63; text-wrap: pretty;
}
.h-fresh-strong { font-weight: 700; color: #f3f2f2; }
.h-fresh-lanes {
  display: flex; flex-direction: column; gap: 4px; margin: 0 calc(-1 * clamp(20px, 5vw, 80px));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h-fresh-lane { overflow: hidden; }
/* The track holds the list twice; padding-right equals the gap so the -50% loop is seamless. */
.h-fresh-track {
  display: flex; align-items: stretch; gap: 24px; padding-right: 24px; width: max-content;
  animation: clive-marquee var(--lane-dur, 80s) linear infinite; animation-direction: var(--lane-dir, normal);
}
.h-fresh-track:hover, .h-fresh-track:focus-within { animation-play-state: paused; }
@keyframes clive-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.h-fresh-tile {
  flex-shrink: 0; box-sizing: border-box; color: #f3f2f2; text-decoration: none; position: relative; width: 330px; height: auto;
  margin-top: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 18px 18px;
  background: #171614; border: 1px solid rgba(243,242,242,0.08); border-radius: 16px;
  transition: border-color 250ms ease, transform 300ms cubic-bezier(.22,.61,.36,1);
}
.home .h-fresh-tile:hover { border-color: #edbb00; color: #f3f2f2; }
.h-fresh-tile:focus-visible { outline: 2px solid #edbb00; outline-offset: 2px; }
.h-fresh-logo {
  position: absolute; left: 50%; top: -38px; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; overflow: hidden;
  background: #ffffff; box-shadow: 0 0 0 5px #0d0c0b; display: grid; place-items: center;
  box-sizing: border-box; padding: 14px; /* about 18% of the 76px circle */
}
.h-fresh-logo.is-dark { background: #2c2a27; }
/* Contained inside the padding so wordmarks are not cropped by the circle. */
.h-fresh-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.h-fresh-tile[hidden] { display: none; }
.h-fresh-emp { font-size: 13px; line-height: 1.4; color: #a8a39c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.h-fresh-title {
  font-family: var(--font-heading); font-size: 21px; line-height: 1.2; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 2.4em; margin-top: 6px;
}
.h-fresh-hook {
  font-size: 14px; line-height: 1.45; color: #a8a39c; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 10px;
}

/* Phones (Harry, 21 Oct): narrower tiles so one whole tile and a clear peek
   of the next fit, no reserved title height, a short edge fade that never
   cuts through a word, and half the top padding. showcase.js uses the same
   639px breakpoint for the tile width. Desktop keeps the design's values. */
@media (max-width: 639px) {
  .h-first { padding-top: 40px; }
  /* showcase.js sizes the rising line to fill the width on one line. */
  .h-choice-text.is-fit { white-space: nowrap; text-wrap: nowrap; line-height: 1; max-width: none; }
  .h-fresh-tile { width: 260px; }
  .h-fresh-title { min-height: 0; font-size: 18px; }
  /* The heading outranks the card titles on a phone (Harry, 21 Oct). */
  .h-fresh-lede { font-size: 30px; }
  .h-fresh-emp { font-size: 13px; }
  .h-fresh-hook { font-size: 14px; }
  .h-fresh-lanes {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}

/* The line that rises out of the bottom of the section as How it works
   scrolls in; overflow: clip on the section masks it at the edge. */
.h-choice {
  position: absolute; left: clamp(20px, 5vw, 80px); right: clamp(20px, 5vw, 80px); pointer-events: none;
  transform: translateY(calc(clamp(0, (var(--p) - 0.1) * 1.6, 1) * (-50% - clamp(48px, 6vw, 90px))));
}
.h-choice-dark { top: 100%; }
.h-choice-text {
  max-width: 1480px; margin: 0 auto; font-family: var(--font-heading); font-weight: 600; font-size: clamp(26px, 3.2vw, 52px);
  line-height: 1; letter-spacing: -0.02em; color: #f3f2f2; white-space: nowrap;
}

/* ============ How it works ============ */
.h-how {
  position: relative; background: #f3f2f2; color: #201e1d;
  padding: clamp(110px, 12vw, 190px) clamp(20px, 5vw, 80px) clamp(96px, 12vw, 180px);
  transform: scale(calc(1 - var(--q, 0) * 0.06)); opacity: calc(1 - var(--q, 0) * 0.7); transform-origin: 50% 100%;
}
.home .h-how a:hover { color: #a37f00; }
.h-how-head { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 40px; }
.h-how-head .h-kicker { margin-bottom: 20px; }
.h-how-title {
  margin: 0 0 clamp(64px, 8vw, 120px); font-size: clamp(34px, 4.4vw, 72px); line-height: 1.06; letter-spacing: -0.02em;
  max-width: 12em; text-wrap: balance;
}

.hw { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; position: relative; }
.hw-navcol { display: none; position: relative; }
@media (min-width: 860px) {
  .hw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hw-navcol { display: block; }
  .hw-kicker { display: none; }
}
.hw-nav { position: sticky; top: calc(50vh - 105px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: max-content; }
.hw-navbtn {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: #8a8580; transition: color 500ms ease;
}
.hw-navbtn.is-active { color: #201e1d; }
.hw-navlabel { display: flex; gap: 8px; }
.hw-navnum { font-variant-numeric: tabular-nums; opacity: 0.6; }
.hw-navline { position: relative; display: block; margin-top: 8px; height: 1px; width: 218px; background: #d9d5d1; }
.hw-navfill {
  position: absolute; top: -1px; left: 0; height: 3px; width: 100%; background: #201e1d;
  transform: scaleX(0); transform-origin: 0 50%; transition: background 300ms ease;
}
.hw-navbtn.is-passed .hw-navfill { background: #8a8580; }

.hw-steps { display: flex; flex-direction: column; gap: 96px; }
.hw-step { display: flex; flex-direction: column; width: 100%; max-width: 720px; }
.hw-kicker { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #6e6a63; }
.hw-title { margin: 8px 0 0; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: #201e1d; }
.hw-num { display: inline-block; min-width: 1.6em; color: #8a8580; font-weight: 500; }
.hw-body { margin: 12px 0 0; max-width: 32rem; font-size: 18px; line-height: 1.5; color: #201e1d; text-wrap: pretty; }

.hw-panel {
  margin-top: 28px; height: 480px; background: #fcfcfb; border-radius: 20px; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif; color: #201e1d;
}
.hw-panel-chat { padding: 24px 24px 20px; gap: 12px; }
.hw-panel-search { padding: 24px; }
.hw-panel-matches { padding: 24px 18px 18px; }
.hw-panel-decide { padding: 20px; gap: 14px; }

.hw-chatwin { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hw-chat { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.hw-chat-sm { gap: 14px; }
.hw-msg-c { margin: 0; font-size: 16px; line-height: 1.55; max-width: 92%; }
.hw-msg-u {
  align-self: flex-end; background: #201e1d; color: #f8f4f4; border-radius: 20px; padding: 10px 16px;
  font-size: 16px; line-height: 1.45; max-width: 78%;
}
.hw-chat-sm .hw-msg-c, .hw-chat-sm .hw-msg-u { font-size: 15px; }
.hw-msg-t { height: 22px; display: flex; align-items: center; }
.hw-msg-t i { width: 9px; height: 9px; border-radius: 50%; background: #201e1d; animation: clive-pulse 1.1s ease-in-out infinite; }

.hw-input {
  flex: none; display: flex; align-items: center; gap: 8px; background: #e4dfd9; border-radius: 28px;
  padding: 7px 7px 7px 20px; min-height: 52px; box-sizing: border-box;
}
.hw-q { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; color: #7d7979; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-q.is-typing { color: #201e1d; }
.hw-caret { display: inline-block; width: 1.5px; height: 1em; background: #201e1d; vertical-align: -2px; margin-left: 1px; animation: clive-caret 1s steps(1) infinite; }
.hw-mic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.hw-mic span { width: 8px; height: 14px; border-radius: 4px; background: #7d7979; }
.hw-send {
  width: 38px; height: 38px; border-radius: 50%; background: #201e1d; color: #f8f4f4; display: grid; place-items: center;
  font-weight: 600; font-size: 16px;
}

.hw-search-head {
  display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid #eae7e7;
}
.hw-search-head span:first-child { font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #605d5d; }
.hw-search-head span:last-child { font-size: 14px; color: #7d7979; }
.hw-row {
  display: grid; grid-template-columns: minmax(84px, 26%) minmax(0, 1fr); gap: 14px; align-items: center;
  height: 54px; border-bottom: 1px solid #eae7e7;
}
.hw-row-label { font-weight: 500; font-size: 15px; line-height: 1.4; color: #7d7979; }
.hw-row-value {
  justify-self: start; display: inline-block; font-size: 17px; line-height: 1.4; color: #201e1d; border-radius: 7px; margin: 0 -6px;
  padding: 2px 6px; border: 1.5px solid transparent; background: transparent; min-height: 1.4em;
  transition: background 1400ms ease, border-color 200ms ease; animation: clive-fade 400ms ease both;
}
.hw-row-value.is-editing { border-color: #EDBB01; background: #ffffff; }
.hw-search-foot { display: flex; justify-content: flex-end; align-items: center; margin-top: auto; padding-top: 16px; }
.hw-pill {
  display: inline-flex; align-items: center; background: #201e1d; color: #f8f4f4; border-radius: 24px; padding: 12px 22px;
  font-weight: 600; font-size: 15px; line-height: 1; transition: opacity 400ms ease, background 300ms ease, transform 160ms ease;
}
.hw-pill-sm { border-radius: 20px; padding: 9px 16px; font-size: 13px; white-space: nowrap; }

.hw-matches-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 6px 14px; border-bottom: 1px solid #eae7e7; }
.hw-matches-title { font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.hw-matches-sub { font-size: 13px; color: #7d7979; margin-top: 4px; }
.hw-again { border: 1px solid #d7d3d3; border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: 13px; line-height: 1; }
.hw-match { display: flex; flex-direction: column; border-bottom: 1px solid #eae7e7; background: transparent; border-radius: 12px; transition: background 300ms ease; }
.hw-match.is-hover { background: #f1ecec; }
.hw-match.is-open { background: #f8f4f4; }
.hw-match-row {
  display: grid; grid-template-columns: 16px 38px minmax(0, 1fr) 14px; align-items: center; gap: 12px;
  padding: 12px 6px; min-height: 76px; box-sizing: border-box;
}
.hw-match-n { font-size: 13px; color: #7d7979; text-align: right; }
.hw-logo {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid #eae7e7; background: #ffffff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hw-logo img { width: 100%; height: 100%; object-fit: contain; }
.hw-match-text, .hw-jobcard-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-job-title { font-size: 15px; line-height: 1.35; font-weight: 600; }
.hw-job-sub, .hw-job-wy { font-size: 13px; line-height: 1.4; color: #7d7979; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-job-wy { color: #444141; }
.hw-chev { color: #444141; font-size: 16px; line-height: 1; transition: transform 180ms ease; }
.hw-match.is-open .hw-chev { transform: rotate(90deg); }
.hw-match-detail { display: none; flex-direction: column; gap: 8px; padding: 2px 12px 14px 72px; animation: clive-rise 260ms cubic-bezier(.2,.7,.3,1) both; }
.hw-match.is-open .hw-match-detail { display: flex; }
.hw-detail-head { font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: #7d7979; margin-bottom: 4px; }
.hw-detail-body { font-size: 13.5px; line-height: 1.5; color: #444141; }

.hw-jobcard { flex: none; border: 1px solid #eae7e7; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.hw-jobcard-top { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; }

/* ============ Live data ============ */
/* --q (on <html>) is how far the live-data section has scrolled in. */
.h-live-wrap { background: #f3f2f2; }
.h-live {
  position: relative; z-index: 2; background: #0d0c0b; color: #f3f2f2;
  border-radius: calc((1 - var(--q, 0)) * 28px) calc((1 - var(--q, 0)) * 28px) 0 0;
  box-shadow: 0 -24px 60px rgba(0,0,0,0.35);
  padding: clamp(96px, 12vw, 180px) clamp(20px, 5vw, 80px) clamp(64px, 8vw, 120px);
}
.h-live-grid {
  max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(48px, 6vw, 96px); align-items: center;
}
.h-live-kicker { margin-bottom: 28px; display: flex; align-items: center; gap: 14px; }
.h-live-dot { width: 12px; height: 12px; border-radius: 50%; background: #edbb00; flex-shrink: 0; transform: scale(0); transition: transform 220ms ease; }
.h-live-lede {
  margin: 0; font-family: var(--font-heading); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.25; letter-spacing: -0.015em;
  color: #6e6a63; text-wrap: pretty;
}
.h-live-fig { color: #f3f2f2; }
.h-live [data-count] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.h-live-updated { margin: 40px 0 0; font-size: 13px; color: #6e6a63; }
.h-bars { display: flex; flex-direction: column; gap: 14px; }
.h-bars .h-kicker { margin-bottom: 10px; }
.h-bar {
  display: grid; grid-template-columns: minmax(150px, 280px) minmax(0, 1fr) 48px; gap: 16px; align-items: center;
  font-size: 15px; color: #f3f2f2;
}
.h-bar > span:first-child { line-height: 1.3; }
.h-track { height: 10px; background: #2c2a27; position: relative; border-radius: 999px; overflow: hidden; }
.h-track > span {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #edbb00;
  transform: scaleX(var(--c, 0)); transform-origin: 0 50%; transition-property: transform; transition-duration: 1100ms;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
.h-bar-n { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ Pricing ============ */
.h-pricing {
  position: relative; overflow: hidden; background: #0d0c0b; color: #f3f2f2;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 80px);
}
.h-pricing-head { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.h-pricing-title { margin: 20px 0 0; font-size: clamp(40px, 5.2vw, 84px); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.h-pricing-sub { margin: 14px 0 0; font-family: var(--font-heading); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: #a8a39c; }
.h-pricing-grid {
  max-width: 1480px; margin: clamp(40px, 5vw, 80px) auto 0; display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 40vw, 660px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 56px);
}
.h-pricing-copy {
  justify-self: end; max-width: 340px; margin: 0 0 0 clamp(40px, 4.5vw, 80px); padding-top: 6%;
  font-size: 18px; line-height: 1.55; color: #a8a39c; text-wrap: pretty;
}
.h-pricing-dog img { width: 100%; height: auto; display: block; }
.h-pricing-cta { justify-self: start; max-width: 340px; padding-top: 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.h-pricing-cta p { margin: 0; font-size: 15px; color: #6e6a63; }

/* ============ FAQ ============ */
.h-faq { position: relative; background: #0d0c0b; color: #f3f2f2; padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 80px) clamp(96px, 12vw, 180px); }
.h-faq-inner { position: relative; max-width: 1480px; margin: 0 auto; padding-left: clamp(48px, 6vw, 100px); }
.h-faq-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 999px; }
.h-faq-title { margin: 0 0 clamp(32px, 4vw, 56px); font-size: clamp(40px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -0.02em; }
#faqs { display: flex; flex-direction: column; }
.h-qa { position: relative; }
.h-qa-stub {
  position: absolute; left: calc(-1 * clamp(48px, 6vw, 100px)); top: calc(15px + 0.6em); font-size: 24px; height: 10px;
  border-radius: 999px; background: #edbb00; width: 28px; transition: width 400ms cubic-bezier(.22,.61,.36,1);
}
.h-qa button {
  width: 100%; color: #a8a39c; padding: 20px 0; cursor: pointer; text-align: left; font-family: var(--font-heading);
  font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; transition: color 250ms ease;
}
.h-qa button:hover { color: #f3f2f2; }
.h-qa.is-open button { color: #edbb00; }
.h-qa.is-open .h-qa-stub { width: calc(clamp(48px, 6vw, 100px) - 16px); }
.h-qa p { margin: 0 0 20px; max-width: 40em; font-size: 18px; line-height: 1.55; color: #a8a39c; text-wrap: pretty; }

/* ============ Scroll-drawn yellow lines ============ */
.h-trail { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 50; display: none; }

/* ============ Small screens ============ */
@media (max-width: 860px) {
  .h-pricing-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .h-pricing-copy, .h-pricing-cta { justify-self: center; margin: 0; padding-top: 0; }
  .h-pricing-cta { align-items: center; }
  .h-pricing-dog { width: min(100%, 460px); order: -1; }
}
@media (max-width: 600px) {
  .h-hero-frame { padding: 24px 20px; }
  /* Phones get the portrait render, cropped about Clive's nose (35% down), so
     the nose stays at 35% of the hero on any phone; the copy starts below it. */
  .h-hero-bg { object-position: 50% 35%; }
  /* svh: the screen left visible by Safari's bars, so nothing sits under them. */
  .h-hero, .h-hero-frame { min-height: 100vh; min-height: 100svh; }
  .h-hero-center { justify-content: flex-start; padding: calc(40vh - 67px) 0 30px; padding-top: calc(40svh - 67px); }
  /* "Need a grad job?" on one line, "Meet Clive" on the next; the subtitle breaks after "find". */
  .h-hero-title { font-size: min(40px, 10.6vw); }
  /* Each line set explicitly and unbreakable: Safari's text-wrap: pretty
     rebalanced a forced break into three lines. */
  .h-hero-line, .h-sub-line { display: block; white-space: nowrap; }
  .h-hero-sub { text-wrap: wrap; }
  .h-hero-ctas { flex-wrap: wrap; justify-content: center; }
  /* The design is set for wide screens: on a phone the rising line wraps
     rather than running off the edge. */
  .h-choice-text { white-space: normal; text-wrap: balance; line-height: 1.1; }
  .h-bar { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr) 40px; gap: 12px; font-size: 14px; }
  .hw-panel { height: 440px; }
  /* Chat runs to the top edge of its panel. */
  .hw-panel-chat { padding-top: 0; }
  /* Search rows wrap on a phone, so the panel grows with them and the button
     keeps clear of the bottom edge. */
  .hw-panel-search { height: auto; padding-bottom: 28px; }
  .hw-row { height: auto; min-height: 54px; padding: 6px 0; box-sizing: border-box; }
  .hw-match-detail { padding-left: 12px; }
}

/* Small muted text on the dark sections measured 3.6:1 (#6e6a63 on #0d0c0b);
   the nearest step of the same warm grey that passes is 4.8:1. All widths
   (Harry, 21 Oct). */
.h-live .h-kicker, .h-pricing .h-kicker, .h-live-updated, .h-pricing-cta p { color: #827d75; }

/* ============ Phone hierarchy audit (#2136, Harry, 21 Oct) ============ */
/* Phones only: sizes, spacing, hit areas and the contrast of small muted
   text. Desktop keeps the design's values. */
@media (max-width: 639px) {
  /* How it works: step titles (28px) sat almost level with the section
     heading (34px); the section also opened with 110px of space. */
  .h-how { padding-top: 72px; }
  .hw-title { font-size: 24px; }
  /* FAQ: 24px questions wrapped to three lines with a lone last word. */
  .h-qa button { font-size: 20px; text-wrap: balance; padding: 16px 0; }
  .h-qa-stub { top: calc(11px + 0.6em); font-size: 20px; }
  .h-qa p { font-size: 16px; }
  /* Hit areas of at least 44px tall on small links and header buttons,
     drawn outside the element so nothing moves. Footer links keep their
     36px row pitch, so theirs fills the pitch without overlapping. */
  .h-link-under, .home .nav-signin, .home .nav-toggle, .home .footer-col a, .home .footer-col .cc-settings-link, .home .h-footer-cta { position: relative; }
  .h-link-under::after { content: ""; position: absolute; inset: -10px -8px; }
  .home .nav-signin::after, .home .nav-toggle::after { content: ""; position: absolute; inset: -4px; }
  .home .footer-col a::after, .home .footer-col .cc-settings-link::after, .home .h-footer-cta::after { content: ""; position: absolute; inset: -6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-first-copy { transition: none; }
  .h-fresh-lane { overflow-x: auto; scrollbar-width: none; }
  .h-fresh-track { animation: none; }
  .h-track > span { transition: none; }
}